{ "children": [ { "type": "frame", "id": "spd-date", "x": 0, "y": 0, "name": "Smart Properties — Date picker open", "width": 280, "height": 300, "fill": "#FFFFFF", "layout": "vertical", "padding": 12, "gap": 8, "children": [ { "type": "text", "id": "spd-date-title", "content": "Date Property Display", "fontSize": 13, "fontWeight": "600", "fill": "#1A1A1A" }, { "type": "frame", "id": "spd-date-row", "name": "DateRow", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-date-label", "content": "DEADLINE", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2, "textTransform": "uppercase" }, { "type": "text", "id": "spd-date-value", "content": "Feb 25, 2026", "fontSize": 12, "fill": "#1A1A1A" } ] }, { "type": "frame", "id": "spd-date-picker", "name": "DatePickerOpen", "width": "fill_container", "height": 200, "fill": "#F5F5F5", "cornerRadius": 8, "stroke": { "fill": "#E0E0E0", "thickness": 1 }, "layout": "vertical", "padding": 12, "gap": 8, "children": [ { "type": "text", "id": "spd-picker-month", "content": "February 2026", "fontSize": 13, "fontWeight": "600", "fill": "#1A1A1A" }, { "type": "text", "id": "spd-picker-hint", "content": "Native opens on click.\nDisplays as 'Feb 25, 2026' when closed.", "fontSize": 11, "fill": "#888888" } ] } ] }, { "type": "frame", "id": "spd-bool", "x": 300, "y": 0, "name": "Smart Properties — Boolean toggle", "width": 280, "height": 200, "fill": "#FFFFFF", "layout": "vertical", "padding": 12, "gap": 8, "children": [ { "type": "text", "id": "spd-bool-title", "content": "Boolean Property Display", "fontSize": 13, "fontWeight": "600", "fill": "#1A1A1A" }, { "type": "frame", "id": "spd-bool-row-on", "name": "BooleanRowTrue", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-bool-label-on", "content": "PUBLISHED", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-bool-toggle-on", "name": "ToggleOn", "height": 22, "cornerRadius": 4, "fill": "#E8F5E9", "padding": [2, 8], "alignItems": "center", "children": [ { "type": "text", "id": "spd-bool-val-on", "content": "\u2713 Yes", "fontSize": 12, "fill": "#2E7D32" } ] } ] }, { "type": "frame", "id": "spd-bool-row-off", "name": "BooleanRowFalse", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-bool-label-off", "content": "ARCHIVED", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-bool-toggle-off", "name": "ToggleOff", "height": 22, "cornerRadius": 4, "stroke": { "fill": "#E0E0E0", "thickness": 1 }, "padding": [2, 8], "alignItems": "center", "children": [ { "type": "text", "id": "spd-bool-val-off", "content": "\u2717 No", "fontSize": 12, "fill": "#888888" } ] } ] } ] }, { "type": "frame", "id": "spd-status", "x": 600, "y": 0, "name": "Smart Properties — Status badge", "width": 280, "height": 260, "fill": "#FFFFFF", "layout": "vertical", "padding": 12, "gap": 8, "children": [ { "type": "text", "id": "spd-status-title", "content": "Status Property Display", "fontSize": 13, "fontWeight": "600", "fill": "#1A1A1A" }, { "type": "frame", "id": "spd-status-row-active", "name": "StatusActive", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-status-label-a", "content": "STATUS", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-badge-active", "name": "BadgeActive", "cornerRadius": 16, "fill": "#E8F5E9", "padding": [1, 6], "children": [ { "type": "text", "id": "spd-badge-active-text", "content": "ACTIVE", "fontSize": 10, "fontWeight": "600", "fill": "#2E7D32", "letterSpacing": 1.2 } ] } ] }, { "type": "frame", "id": "spd-status-row-draft", "name": "StatusDraft", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-status-label-d", "content": "STATUS", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-badge-draft", "name": "BadgeDraft", "cornerRadius": 16, "fill": "#FFF8E1", "padding": [1, 6], "children": [ { "type": "text", "id": "spd-badge-draft-text", "content": "DRAFT", "fontSize": 10, "fontWeight": "600", "fill": "#F9A825", "letterSpacing": 1.2 } ] } ] }, { "type": "frame", "id": "spd-status-row-done", "name": "StatusDone", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "children": [ { "type": "text", "id": "spd-status-label-dn", "content": "STATUS", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-badge-done", "name": "BadgeDone", "cornerRadius": 16, "fill": "#E3F2FD", "padding": [1, 6], "children": [ { "type": "text", "id": "spd-badge-done-text", "content": "DONE", "fontSize": 10, "fontWeight": "600", "fill": "#1565C0", "letterSpacing": 1.2 } ] } ] } ] }, { "type": "frame", "id": "spd-override", "x": 900, "y": 0, "name": "Smart Properties — Display mode override dropdown", "width": 280, "height": 300, "fill": "#FFFFFF", "layout": "vertical", "padding": 12, "gap": 8, "children": [ { "type": "text", "id": "spd-override-title", "content": "Display Mode Override", "fontSize": 13, "fontWeight": "600", "fill": "#1A1A1A" }, { "type": "frame", "id": "spd-override-row", "name": "PropertyWithOverrideHandle", "width": "fill_container", "height": 28, "alignItems": "center", "justifyContent": "space-between", "padding": [0, 6], "fill": "#F5F5F5", "cornerRadius": 4, "children": [ { "type": "text", "id": "spd-override-label", "content": "DEADLINE", "fontSize": 10, "fontWeight": "500", "fill": "#888888", "letterSpacing": 1.2 }, { "type": "frame", "id": "spd-override-actions", "gap": 4, "alignItems": "center", "children": [ { "type": "text", "id": "spd-override-val", "content": "Feb 25, 2026", "fontSize": 12, "fill": "#1A1A1A" }, { "type": "frame", "id": "spd-override-handle", "name": "OverrideHandle", "width": 16, "height": 16, "cornerRadius": 3, "fill": "#E0E0E0", "alignItems": "center", "justifyContent": "center", "children": [ { "type": "text", "id": "spd-override-icon", "content": "\u25BE", "fontSize": 10, "fill": "#666666" } ] } ] } ] }, { "type": "frame", "id": "spd-dropdown", "name": "DisplayModeDropdown", "width": 160, "fill": "#FFFFFF", "cornerRadius": 8, "stroke": { "fill": "#E0E0E0", "thickness": 1 }, "layout": "vertical", "padding": 4, "gap": 2, "children": [ { "type": "frame", "id": "spd-opt-text", "name": "OptionText", "width": "fill_container", "height": 28, "padding": [4, 8], "cornerRadius": 4, "alignItems": "center", "children": [ { "type": "text", "id": "spd-opt-text-label", "content": "Text", "fontSize": 12, "fill": "#1A1A1A" } ] }, { "type": "frame", "id": "spd-opt-date", "name": "OptionDate", "width": "fill_container", "height": 28, "padding": [4, 8], "cornerRadius": 4, "fill": "#E3F2FD", "alignItems": "center", "children": [ { "type": "text", "id": "spd-opt-date-label", "content": "\u2713 Date", "fontSize": 12, "fill": "#1565C0" } ] }, { "type": "frame", "id": "spd-opt-bool", "name": "OptionBoolean", "width": "fill_container", "height": 28, "padding": [4, 8], "cornerRadius": 4, "alignItems": "center", "children": [ { "type": "text", "id": "spd-opt-bool-label", "content": "Boolean", "fontSize": 12, "fill": "#1A1A1A" } ] }, { "type": "frame", "id": "spd-opt-status", "name": "OptionStatus", "width": "fill_container", "height": 28, "padding": [4, 8], "cornerRadius": 4, "alignItems": "center", "children": [ { "type": "text", "id": "spd-opt-status-label", "content": "Status", "fontSize": 12, "fill": "#1A1A1A" } ] }, { "type": "frame", "id": "spd-opt-url", "name": "OptionURL", "width": "fill_container", "height": 28, "padding": [4, 8], "cornerRadius": 4, "alignItems": "center", "children": [ { "type": "text", "id": "spd-opt-url-label", "content": "URL", "fontSize": 12, "fill": "#1A1A1A" } ] } ] } ] } ], "variables": {} }