feat: publish HoloLake model-native living system source
This commit is contained in:
parent
6ad10edde1
commit
c395dd3a99
2467 changed files with 615073 additions and 0 deletions
448
product-source/hololake-platform/design/add-property-inline.pen
Normal file
448
product-source/hololake-platform/design/add-property-inline.pen
Normal file
|
|
@ -0,0 +1,448 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmpty",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Add Property — Inline Form (Empty State)",
|
||||
"theme": { "Mode": "Light" },
|
||||
"width": 320,
|
||||
"height": 180,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyDesc",
|
||||
"name": "description",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Inline add-property form: replaces the old grey popup. Fields are horizontal, matching existing property row layout. Shows after clicking + Add property.",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyExisting1",
|
||||
"name": "Existing Property Row — Status",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 4,
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyLabel1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "STATUS",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 1.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyBadge1",
|
||||
"fill": "$--accent-green-light",
|
||||
"cornerRadius": 16,
|
||||
"padding": [1, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyBadgeText1",
|
||||
"fill": "$--accent-green",
|
||||
"content": "ACTIVE",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 1.2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptySep",
|
||||
"name": "Separator",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$--border"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyForm",
|
||||
"name": "Inline Add Property Form — Empty",
|
||||
"width": "fill_container",
|
||||
"gap": 6,
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyNameInput",
|
||||
"name": "Name Input",
|
||||
"width": 90,
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyNamePlaceholder",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Name",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyTypeSelect",
|
||||
"name": "Type Selector",
|
||||
"width": 72,
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"padding": [4, 6],
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apEmptyTypeIcon",
|
||||
"width": 12,
|
||||
"height": 12,
|
||||
"iconFontName": "type",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyTypePlaceholder",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Text",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apEmptyTypeChevron",
|
||||
"width": 10,
|
||||
"height": 10,
|
||||
"iconFontName": "chevron-down",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyValueInput",
|
||||
"name": "Value Input",
|
||||
"width": "fill_container",
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apEmptyValuePlaceholder",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Value",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyConfirmBtn",
|
||||
"name": "Confirm Button",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$--primary",
|
||||
"cornerRadius": 4,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apEmptyConfirmIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#ffffff"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apEmptyCancelBtn",
|
||||
"name": "Cancel Button",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apEmptyCancelIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilled",
|
||||
"x": 400,
|
||||
"y": 0,
|
||||
"name": "Add Property — Inline Form (Filled State)",
|
||||
"theme": { "Mode": "Light" },
|
||||
"width": 320,
|
||||
"height": 180,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledDesc",
|
||||
"name": "description",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Filled state: user has typed a property name, selected a type (Date), and entered a value. Confirm button is enabled (blue). The form looks like the property row it will create.",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledExisting1",
|
||||
"name": "Existing Property Row — Status",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 4,
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledLabel1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "STATUS",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 1.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledBadge1",
|
||||
"fill": "$--accent-green-light",
|
||||
"cornerRadius": 16,
|
||||
"padding": [1, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledBadgeText1",
|
||||
"fill": "$--accent-green",
|
||||
"content": "ACTIVE",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 1.2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledSep",
|
||||
"name": "Separator",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$--border"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledForm",
|
||||
"name": "Inline Add Property Form — Filled",
|
||||
"width": "fill_container",
|
||||
"gap": 6,
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledNameInput",
|
||||
"name": "Name Input (filled)",
|
||||
"width": 90,
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" },
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledNameText",
|
||||
"fill": "$--foreground",
|
||||
"content": "deadline",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledTypeSelect",
|
||||
"name": "Type Selector (Date selected)",
|
||||
"width": 72,
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"padding": [4, 6],
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apFilledTypeIcon",
|
||||
"width": 12,
|
||||
"height": 12,
|
||||
"iconFontName": "calendar",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledTypeText",
|
||||
"fill": "$--foreground",
|
||||
"content": "Date",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apFilledTypeChevron",
|
||||
"width": 10,
|
||||
"height": 10,
|
||||
"iconFontName": "chevron-down",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledValueInput",
|
||||
"name": "Value Input (filled)",
|
||||
"width": "fill_container",
|
||||
"height": 26,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" },
|
||||
"padding": [4, 6],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "apFilledValueText",
|
||||
"fill": "$--foreground",
|
||||
"content": "2026-03-15",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledConfirmBtn",
|
||||
"name": "Confirm Button (enabled)",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$--primary",
|
||||
"cornerRadius": 4,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apFilledConfirmIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#ffffff"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "apFilledCancelBtn",
|
||||
"name": "Cancel Button",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 4,
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "apFilledCancelIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "x",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"--background": { "type": "color", "value": [{ "value": "#ffffff" }] },
|
||||
"--foreground": { "type": "color", "value": [{ "value": "#37352F" }] },
|
||||
"--muted": { "type": "color", "value": [{ "value": "#F0F0EF" }] },
|
||||
"--muted-foreground": { "type": "color", "value": [{ "value": "#9B9A97" }] },
|
||||
"--border": { "type": "color", "value": [{ "value": "#E9E9E7" }] },
|
||||
"--primary": { "type": "color", "value": [{ "value": "#155DFF" }] },
|
||||
"--accent-green": { "type": "color", "value": [{ "value": "#38A169" }] },
|
||||
"--accent-green-light": { "type": "color", "value": [{ "value": "rgba(56, 161, 105, 0.1)" }] }
|
||||
}
|
||||
}
|
||||
340
product-source/hololake-platform/design/ai-agent-panel-ui.pen
Normal file
340
product-source/hololake-platform/design/ai-agent-panel-ui.pen
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_panel_closed",
|
||||
"name": "AI Agent Panel — Closed (trigger button in toolbar)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "ai_closed_editor",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_closed_toolbar",
|
||||
"name": "Right Toolbar",
|
||||
"layout": "vertical",
|
||||
"width": 36,
|
||||
"height": "fill_container",
|
||||
"fill": "$--background",
|
||||
"padding": [8, 4],
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_trigger_btn",
|
||||
"name": "AI Trigger Button",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"cornerRadius": 6,
|
||||
"fill": "$--muted",
|
||||
"layout": "horizontal",
|
||||
"padding": [6, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_trigger_icon",
|
||||
"content": "✦",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_panel_open_idle",
|
||||
"name": "AI Agent Panel — Open, Idle (empty state)",
|
||||
"x": 1320,
|
||||
"y": 0,
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "ai_open_editor",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_panel_sidebar",
|
||||
"name": "AI Panel Sidebar",
|
||||
"layout": "vertical",
|
||||
"width": 320,
|
||||
"height": "fill_container",
|
||||
"fill": "$--background",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_panel_header",
|
||||
"name": "Panel Header",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 45,
|
||||
"padding": [0, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_header_label",
|
||||
"content": "AI",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600",
|
||||
"fill": "$--muted-foreground",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_close_icon",
|
||||
"content": "✕",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_empty_state",
|
||||
"name": "Empty State",
|
||||
"layout": "vertical",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": [24, 24],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_empty_hint",
|
||||
"content": "Ask the AI agent to work on your vault…",
|
||||
"fontSize": 13,
|
||||
"fill": "$--muted-foreground",
|
||||
"textAlign": "center",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_input_row",
|
||||
"name": "Input Row",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "ai_input_field",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"cornerRadius": 6,
|
||||
"fill": "$--muted"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_send_btn",
|
||||
"name": "Send Button",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"cornerRadius": 6,
|
||||
"fill": "$--primary",
|
||||
"layout": "horizontal",
|
||||
"padding": [6, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_send_icon",
|
||||
"content": "→",
|
||||
"fontSize": 12,
|
||||
"fill": "$--primary-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_panel_active",
|
||||
"name": "AI Agent Panel — Active (streaming, action cards visible)",
|
||||
"x": 2640,
|
||||
"y": 0,
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "ai_active_editor",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_active_panel",
|
||||
"name": "AI Panel — With Messages",
|
||||
"layout": "vertical",
|
||||
"width": 320,
|
||||
"height": "fill_container",
|
||||
"fill": "$--background",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_active_header",
|
||||
"name": "Panel Header",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 45,
|
||||
"padding": [0, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ai_active_label",
|
||||
"content": "AI",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600",
|
||||
"fill": "$--muted-foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_message_thread",
|
||||
"name": "Message Thread",
|
||||
"layout": "vertical",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": [12, 12],
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_user_msg",
|
||||
"name": "User Message",
|
||||
"layout": "vertical",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"content": "You",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"content": "Crea una nota evento per la riunione con Marco domani",
|
||||
"fontSize": 13,
|
||||
"fill": "$--foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_agent_msg",
|
||||
"name": "Agent Message + Actions",
|
||||
"layout": "vertical",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_action_done",
|
||||
"name": "Action Card — Done",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"padding": [0, 8],
|
||||
"gap": 6,
|
||||
"cornerRadius": 4,
|
||||
"fill": "$--muted",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"content": "✓",
|
||||
"fontSize": 12,
|
||||
"fill": "$--primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"content": "Loaded vault context",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ai_action_progress",
|
||||
"name": "Action Card — In Progress",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"padding": [0, 8],
|
||||
"gap": 6,
|
||||
"cornerRadius": 4,
|
||||
"fill": "$--muted",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"content": "◌",
|
||||
"fontSize": 12,
|
||||
"fill": "$--primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"content": "Creating: 2026-03-01-meeting-marco.md",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"content": "Ho creato la nota evento e linkato Marco come partecipante. La trovi già aperta in un nuovo tab.",
|
||||
"fontSize": 13,
|
||||
"fill": "$--foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,96 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "build_number_status_bar",
|
||||
"name": "Build Number — Status Bar",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 1200,
|
||||
"height": 36,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "status_vault",
|
||||
"content": "vault-name",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "status_sep1",
|
||||
"content": "|",
|
||||
"fill": "$--border",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "status_build",
|
||||
"content": "b223",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "status_note",
|
||||
"content": "← dynamic build number from package.json, replacing hardcoded v0.4.2",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "build_number_fallback",
|
||||
"name": "Build Number — Fallback (no build info)",
|
||||
"x": 0,
|
||||
"y": 60,
|
||||
"width": 400,
|
||||
"height": 36,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fallback_build",
|
||||
"content": "b?",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fallback_note",
|
||||
"content": "← shows b? when build number unavailable",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,387 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_ev",
|
||||
"name": "Command Palette — type \"new ev\" autocomplete",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 620,
|
||||
"height": "fit_content(500)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [32, 32],
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_title",
|
||||
"content": "Command Palette — \"new ev\" autocomplete",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_dialog",
|
||||
"name": "Palette Dialog",
|
||||
"width": 520,
|
||||
"height": "fit_content(440)",
|
||||
"fill": "$--popover",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": [12, 12, 12, 12],
|
||||
"stroke": "$--border",
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_input_row",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"stroke": "$--border",
|
||||
"strokeSides": ["bottom"],
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_query",
|
||||
"content": "new ev",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_results",
|
||||
"name": "Results",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [4, 0],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_group_label",
|
||||
"content": "NOTE",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 1,
|
||||
"padding": [8, 16, 4, 16]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_row1",
|
||||
"name": "New Event (selected)",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"fill": "$--accent",
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_row1_label",
|
||||
"content": "New Event",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_row2",
|
||||
"name": "New Event Log",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_row2_label",
|
||||
"content": "New Event Log",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_row3",
|
||||
"name": "New Experiment",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_row3_label",
|
||||
"content": "New Experiment",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_new_footer",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"gap": 16,
|
||||
"stroke": "$--border",
|
||||
"strokeSides": ["top"],
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_hint1",
|
||||
"content": "↑↓ navigate",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_hint2",
|
||||
"content": "↵ select",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_new_hint3",
|
||||
"content": "esc close",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_pe",
|
||||
"name": "Command Palette — type \"list pe\" autocomplete",
|
||||
"x": 720,
|
||||
"y": 0,
|
||||
"width": 620,
|
||||
"height": "fit_content(500)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [32, 32],
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_title",
|
||||
"content": "Command Palette — \"list pe\" autocomplete",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_dialog",
|
||||
"name": "Palette Dialog",
|
||||
"width": 520,
|
||||
"height": "fit_content(440)",
|
||||
"fill": "$--popover",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": [12, 12, 12, 12],
|
||||
"stroke": "$--border",
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_input_row",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"stroke": "$--border",
|
||||
"strokeSides": ["bottom"],
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_query",
|
||||
"content": "list pe",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_results",
|
||||
"name": "Results",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [4, 0],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_group_label",
|
||||
"content": "NAVIGATION",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 1,
|
||||
"padding": [8, 16, 4, 16]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_row1",
|
||||
"name": "List People (selected)",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"fill": "$--accent",
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_row1_label",
|
||||
"content": "List People",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_row2",
|
||||
"name": "List Procedures",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_row2_label",
|
||||
"content": "List Procedures",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_row3",
|
||||
"name": "List Projects",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"padding": [0, 12],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"horizontalAlign": "spaceBetween",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"margin": [0, 4],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_row3_label",
|
||||
"content": "List Projects",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cp_list_footer",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"verticalAlign": "center",
|
||||
"gap": 16,
|
||||
"stroke": "$--border",
|
||||
"strokeSides": ["top"],
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_hint1",
|
||||
"content": "↑↓ navigate",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_hint2",
|
||||
"content": "↵ select",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cp_list_hint3",
|
||||
"content": "esc close",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
285
product-source/hololake-platform/design/date-picker-shadcn.pen
Normal file
285
product-source/hololake-platform/design/date-picker-shadcn.pen
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "datePickerClosed",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Date Picker — closed state (showing formatted date as button)",
|
||||
"width": 320,
|
||||
"height": 40,
|
||||
"fill": "#ffffff",
|
||||
"gap": 8,
|
||||
"padding": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateClosedLabel",
|
||||
"name": "label",
|
||||
"fill": "#6b7280",
|
||||
"content": "deadline",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": 1.2,
|
||||
"textTransform": "uppercase"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "dateClosedButton",
|
||||
"name": "date-button",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "flex-end",
|
||||
"alignItems": "center",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateClosedIcon",
|
||||
"name": "calendar-icon",
|
||||
"fill": "#9ca3af",
|
||||
"content": "📅",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateClosedValue",
|
||||
"name": "date-value",
|
||||
"fill": "#374151",
|
||||
"content": "Mar 31, 2026",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "datePickerOpen",
|
||||
"x": 0,
|
||||
"y": 160,
|
||||
"name": "Date Picker — open state (calendar popup below button)",
|
||||
"width": 320,
|
||||
"height": 380,
|
||||
"fill": "#ffffff",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "dateOpenRow",
|
||||
"name": "property-row",
|
||||
"width": "fill_container",
|
||||
"height": 40,
|
||||
"gap": 8,
|
||||
"padding": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateOpenLabel",
|
||||
"name": "label",
|
||||
"fill": "#6b7280",
|
||||
"content": "deadline",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": 1.2,
|
||||
"textTransform": "uppercase"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "dateOpenButton",
|
||||
"name": "date-button-active",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "flex-end",
|
||||
"alignItems": "center",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateOpenIcon",
|
||||
"name": "calendar-icon",
|
||||
"fill": "#6366f1",
|
||||
"content": "📅",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dateOpenValue",
|
||||
"name": "date-value",
|
||||
"fill": "#111827",
|
||||
"content": "Mar 31, 2026",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calendarPopup",
|
||||
"name": "calendar-popup",
|
||||
"width": 280,
|
||||
"height": 320,
|
||||
"fill": "#ffffff",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": 8,
|
||||
"padding": 12,
|
||||
"gap": 8,
|
||||
"stroke": {
|
||||
"align": "outside",
|
||||
"thickness": 1,
|
||||
"fill": "#e5e7eb"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calendarHeader",
|
||||
"name": "calendar-header",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "calPrevBtn",
|
||||
"name": "prev-month",
|
||||
"fill": "#6b7280",
|
||||
"content": "◀",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "calMonthYear",
|
||||
"name": "month-year",
|
||||
"fill": "#111827",
|
||||
"content": "March 2026",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "calNextBtn",
|
||||
"name": "next-month",
|
||||
"fill": "#6b7280",
|
||||
"content": "▶",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calWeekdayRow",
|
||||
"name": "weekday-headers",
|
||||
"width": "fill_container",
|
||||
"height": 24,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{ "type": "text", "id": "wd1", "fill": "#9ca3af", "content": "Su", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd2", "fill": "#9ca3af", "content": "Mo", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd3", "fill": "#9ca3af", "content": "Tu", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd4", "fill": "#9ca3af", "content": "We", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd5", "fill": "#9ca3af", "content": "Th", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd6", "fill": "#9ca3af", "content": "Fr", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" },
|
||||
{ "type": "text", "id": "wd7", "fill": "#9ca3af", "content": "Sa", "fontSize": 11, "fontFamily": "Inter", "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calGrid",
|
||||
"name": "calendar-grid",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calRow1",
|
||||
"name": "week-1",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{ "type": "text", "id": "d1", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d2", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d3", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d4", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d5", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d6", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d7", "fill": "#374151", "content": "1", "fontSize": 12, "fontFamily": "Inter" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calRow5",
|
||||
"name": "week-5-selected",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{ "type": "text", "id": "d29", "fill": "#374151", "content": "29", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d30", "fill": "#374151", "content": "30", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "selectedDay",
|
||||
"name": "selected-day-31",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"fill": "#111827",
|
||||
"cornerRadius": 14,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "d31", "fill": "#ffffff", "content": "31", "fontSize": 12, "fontFamily": "Inter", "fontWeight": "600" }
|
||||
]
|
||||
},
|
||||
{ "type": "text", "id": "d32", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d33", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d34", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" },
|
||||
{ "type": "text", "id": "d35", "fill": "#d1d5db", "content": " ", "fontSize": 12, "fontFamily": "Inter" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "calFooter",
|
||||
"name": "calendar-footer",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "flex-end",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "calClearBtn",
|
||||
"name": "clear-button",
|
||||
"fill": "#6b7280",
|
||||
"content": "Clear",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
13769
product-source/hololake-platform/design/design-full-layouts.pen
Normal file
13769
product-source/hololake-platform/design/design-full-layouts.pen
Normal file
File diff suppressed because it is too large
Load diff
78
product-source/hololake-platform/design/drag-drop-images.pen
Normal file
78
product-source/hololake-platform/design/drag-drop-images.pen
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "drag_drop_idle",
|
||||
"name": "Drag & Drop Images — Idle (no drag)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 900,
|
||||
"height": 600,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "drag_idle_editor",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$--background",
|
||||
"cornerRadius": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "drag_drop_active",
|
||||
"name": "Drag & Drop Images — Drag Over (overlay shown)",
|
||||
"x": 940,
|
||||
"y": 0,
|
||||
"width": 900,
|
||||
"height": 600,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "drag_active_container",
|
||||
"name": "Editor with Drag Overlay",
|
||||
"layout": "vertical",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "drag_active_editor_bg",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$--background"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "drag_overlay",
|
||||
"name": "Drop Overlay",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"fill": "rgba(0,0,0,0.4)",
|
||||
"cornerRadius": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "drag_overlay_label",
|
||||
"content": "Drop image to insert",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600",
|
||||
"fill": "#ffffff",
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "fpdn_before",
|
||||
"name": "Property Dropdown Narrow — Before (clipped)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 280,
|
||||
"height": 200,
|
||||
"fill": "#1a1a1a",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"theme": "dark",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fpdn_before_label",
|
||||
"content": "Bug: StatusDropdown clipped by overflow:hidden container at 200-280px panel width",
|
||||
"fill": "#ff4444",
|
||||
"fontFamily": "SF Pro Text",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "regular",
|
||||
"letterSpacing": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "fpdn_after",
|
||||
"name": "Property Dropdown Narrow — After (portal, no clip)",
|
||||
"x": 320,
|
||||
"y": 0,
|
||||
"width": 280,
|
||||
"height": 200,
|
||||
"fill": "#1a1a1a",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"theme": "dark",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fpdn_after_label",
|
||||
"content": "Fix: StatusDropdown + DisplayModeSelector use createPortal with fixed positioning — renders above overflow:hidden, visible at any panel width",
|
||||
"fill": "#44bb44",
|
||||
"fontFamily": "SF Pro Text",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "regular",
|
||||
"letterSpacing": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "welcome_screen",
|
||||
"name": "Getting Started — Welcome Screen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#F7F6F3",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 0,
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "welcome_card",
|
||||
"name": "Welcome Card",
|
||||
"width": 520,
|
||||
"height": "fit_content",
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": [12, 12, 12, 12],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 24,
|
||||
"padding": [48, 48, 48, 48],
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "welcome_icon_wrap",
|
||||
"name": "Icon",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#EBF4FF",
|
||||
"cornerRadius": [16, 16, 16, 16],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "welcome_icon_text",
|
||||
"content": "✦",
|
||||
"fontSize": 28,
|
||||
"fill": "#2383E2",
|
||||
"fontFamily": "Inter"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "welcome_text_group",
|
||||
"name": "Text Group",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "welcome_title",
|
||||
"content": "Welcome to Laputa",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700",
|
||||
"letterSpacing": -0.5,
|
||||
"textAlign": "center"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "welcome_subtitle",
|
||||
"content": "Wiki-linked knowledge management for deep thinkers.\nChoose how to get started.",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"lineHeight": 1.6,
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "welcome_divider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "#E9E9E7"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "welcome_actions",
|
||||
"name": "Actions",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "btn_create_vault",
|
||||
"name": "Create Getting Started Vault Button",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#2383E2",
|
||||
"cornerRadius": [8, 8, 8, 8],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_create_icon",
|
||||
"content": "＋",
|
||||
"fill": "#FFFFFF",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_create_label",
|
||||
"content": "Create Getting Started vault",
|
||||
"fill": "#FFFFFF",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "btn_open_folder",
|
||||
"name": "Open Existing Folder Button",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"cornerRadius": [8, 8, 8, 8],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_open_icon",
|
||||
"content": "📂",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_open_label",
|
||||
"content": "Open an existing folder",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "welcome_hint",
|
||||
"content": "The Getting Started vault will be created in ~/Documents/Laputa",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_missing_screen",
|
||||
"name": "Getting Started — Vault Missing Error",
|
||||
"x": 1540,
|
||||
"y": 0,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#F7F6F3",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 0,
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "missing_card",
|
||||
"name": "Missing Vault Card",
|
||||
"width": 520,
|
||||
"height": "fit_content",
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": [12, 12, 12, 12],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 24,
|
||||
"padding": [48, 48, 48, 48],
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "missing_icon_wrap",
|
||||
"name": "Warning Icon",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": [16, 16, 16, 16],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "missing_icon_text",
|
||||
"content": "⚠",
|
||||
"fontSize": 28,
|
||||
"fill": "#E8890C",
|
||||
"fontFamily": "Inter"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "missing_text_group",
|
||||
"name": "Text Group",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "missing_title",
|
||||
"content": "Vault not found",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700",
|
||||
"letterSpacing": -0.5,
|
||||
"textAlign": "center"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "missing_subtitle",
|
||||
"content": "The vault folder could not be found on disk.\nIt may have been moved or deleted.",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"lineHeight": 1.6,
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "missing_path_badge",
|
||||
"name": "Path Badge",
|
||||
"width": "fill_container",
|
||||
"height": "fit_content",
|
||||
"fill": "#F7F6F3",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"padding": [8, 12, 8, 12],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "missing_path_text",
|
||||
"content": "~/Laputa",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "SF Mono, monospace",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "missing_divider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "#E9E9E7"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "missing_actions",
|
||||
"name": "Actions",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "btn_recreate_vault",
|
||||
"name": "Create Getting Started Vault Button",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#2383E2",
|
||||
"cornerRadius": [8, 8, 8, 8],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_recreate_icon",
|
||||
"content": "＋",
|
||||
"fill": "#FFFFFF",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_recreate_label",
|
||||
"content": "Create Getting Started vault",
|
||||
"fill": "#FFFFFF",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "btn_choose_folder",
|
||||
"name": "Choose Different Folder Button",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"cornerRadius": [8, 8, 8, 8],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_choose_icon",
|
||||
"content": "📂",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_choose_label",
|
||||
"content": "Choose a different folder",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
258
product-source/hololake-platform/design/github-oauth-fix.pen
Normal file
258
product-source/hololake-platform/design/github-oauth-fix.pen
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix01",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "GitHub OAuth Fix — Modal with inline device flow",
|
||||
"clip": true,
|
||||
"width": 560,
|
||||
"height": 420,
|
||||
"fill": "$--background",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix01-hdr",
|
||||
"name": "Header",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$--background",
|
||||
"padding": [0, 24],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix01-title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" },
|
||||
{ "type": "frame", "id": "gofix01-close", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [{ "type": "text", "id": "gofix01-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" }] }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix01-desc",
|
||||
"name": "Description",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix01-desc-t", "content": "Connect your GitHub account to clone or create vaults backed by GitHub repos.", "fontSize": 13, "fill": "$--muted-foreground", "lineHeight": 1.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix01-body",
|
||||
"name": "DeviceFlowLogin",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [24, 24],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix01-login-btn",
|
||||
"name": "LoginButton",
|
||||
"width": 200,
|
||||
"height": 36,
|
||||
"fill": "$--foreground",
|
||||
"cornerRadius": 6,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix01-gh-icon", "content": "G", "fontSize": 14, "fontWeight": 700, "fill": "$--background" },
|
||||
{ "type": "text", "id": "gofix01-login-label", "content": "Login with GitHub", "fontSize": 13, "fontWeight": 500, "fill": "$--background" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02",
|
||||
"x": 660,
|
||||
"y": 0,
|
||||
"name": "GitHub OAuth Fix — Device code waiting state",
|
||||
"clip": true,
|
||||
"width": 560,
|
||||
"height": 420,
|
||||
"fill": "$--background",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-hdr",
|
||||
"name": "Header",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$--background",
|
||||
"padding": [0, 24],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" },
|
||||
{ "type": "frame", "id": "gofix02-close", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [{ "type": "text", "id": "gofix02-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" }] }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-desc",
|
||||
"name": "Description",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-desc-t", "content": "Connect your GitHub account to clone or create vaults backed by GitHub repos.", "fontSize": 13, "fill": "$--muted-foreground", "lineHeight": 1.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-body",
|
||||
"name": "DeviceCodeCard",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [24, 24],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-card",
|
||||
"name": "CodeCard",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [16, 24],
|
||||
"cornerRadius": 8,
|
||||
"alignItems": "center",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-hint", "content": "Enter this code on GitHub:", "fontSize": 12, "fill": "$--muted-foreground" },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-code-row",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-code", "content": "ABCD-1234", "fontSize": 24, "fontWeight": 700, "letterSpacing": 4, "fontFamily": "monospace", "fill": "$--foreground" },
|
||||
{ "type": "text", "id": "gofix02-copy", "content": "[copy]", "fontSize": 12, "fill": "$--muted-foreground" }
|
||||
]
|
||||
},
|
||||
{ "type": "text", "id": "gofix02-url", "content": "https://github.com/login/device", "fontSize": 12, "fill": "$--muted-foreground", "textDecoration": "underline" },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-spinner-row",
|
||||
"gap": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-waiting", "content": "Waiting for authorization...", "fontSize": 12, "fill": "$--muted-foreground" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix02-cancel-btn",
|
||||
"name": "CancelButton",
|
||||
"width": 80,
|
||||
"height": 32,
|
||||
"cornerRadius": 6,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix02-cancel-label", "content": "Cancel", "fontSize": 12, "fill": "$--muted-foreground" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03",
|
||||
"x": 1320,
|
||||
"y": 0,
|
||||
"name": "GitHub OAuth Fix — Expired/Error state with retry",
|
||||
"clip": true,
|
||||
"width": 560,
|
||||
"height": 420,
|
||||
"fill": "$--background",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03-hdr",
|
||||
"name": "Header",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$--background",
|
||||
"padding": [0, 24],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix03-title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" },
|
||||
{ "type": "frame", "id": "gofix03-close", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [{ "type": "text", "id": "gofix03-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" }] }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03-desc",
|
||||
"name": "Description",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 24],
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix03-desc-t", "content": "Connect your GitHub account to clone or create vaults backed by GitHub repos.", "fontSize": 13, "fill": "$--muted-foreground", "lineHeight": 1.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03-body",
|
||||
"name": "ErrorState",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [24, 24],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03-login-btn",
|
||||
"name": "LoginButton",
|
||||
"width": 200,
|
||||
"height": 36,
|
||||
"fill": "$--foreground",
|
||||
"cornerRadius": 6,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix03-gh-icon", "content": "G", "fontSize": 14, "fontWeight": 700, "fill": "$--background" },
|
||||
{ "type": "text", "id": "gofix03-login-label", "content": "Login with GitHub", "fontSize": 13, "fontWeight": 500, "fill": "$--background" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "gofix03-error-row",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "gofix03-error-msg", "content": "Authorization expired. Please try again.", "fontSize": 12, "fill": "$--destructive" },
|
||||
{ "type": "text", "id": "gofix03-retry-label", "content": "Retry", "fontSize": 12, "fill": "$--destructive" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
1
product-source/hololake-platform/design/gs-git-init.pen
Normal file
1
product-source/hololake-platform/design/gs-git-init.pen
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"children":[{"type":"frame","id":"gs_git_init_after","name":"Getting Started Vault — Git Initialized","x":0,"y":0,"width":600,"height":"fit_content(200)","fill":"#FFFFFF","layout":"vertical","gap":16,"padding":[32,32],"children":[{"type":"text","id":"gs_title","content":"After: Getting Started vault created","fontFamily":"Inter","fontSize":20,"fontWeight":"700","fill":"#111111"},{"type":"text","id":"gs_desc","content":"When a new Getting Started vault is created, it is automatically initialized as a git repo with an initial commit containing all sample files.","fontFamily":"Inter","fontSize":14,"lineHeight":1.5,"fill":"#555555"},{"type":"frame","id":"gs_terminal","name":"Git Log Output","width":"fill_container","height":"fit_content(80)","fill":"#1E1E1E","cornerRadius":[8,8,8,8],"padding":[16,16],"layout":"vertical","gap":4,"children":[{"type":"text","id":"gs_prompt","content":"$ git log --oneline","fontFamily":"JetBrains Mono, monospace","fontSize":12,"fill":"#AAAAAA"},{"type":"text","id":"gs_log","content":"a1b2c3d Initial vault setup","fontFamily":"JetBrains Mono, monospace","fontSize":12,"fill":"#66FF66"}]},{"type":"frame","id":"gs_details","name":"Details","width":"fill_container","layout":"vertical","gap":8,"children":[{"type":"text","id":"gs_detail1","content":"git init + git add . + git commit","fontFamily":"Inter","fontSize":13,"fill":"#333333"},{"type":"text","id":"gs_detail2","content":"Fallback author: Laputa <vault@laputa.app> (if no global git config)","fontFamily":"Inter","fontSize":13,"fill":"#333333"},{"type":"text","id":"gs_detail3","content":"No UI changes — backend only (git.rs + getting_started.rs)","fontFamily":"Inter","fontSize":13,"fill":"#333333"}]}]}],"variables":{}}
|
||||
17
product-source/hololake-platform/design/gs-wikilinks-fix.pen
Normal file
17
product-source/hololake-platform/design/gs-wikilinks-fix.pen
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"name": "Getting Started Wikilinks — Fixed (styled with type color)",
|
||||
"type": "FRAME",
|
||||
"width": 800,
|
||||
"height": 400,
|
||||
"children": [
|
||||
{
|
||||
"name": "Description",
|
||||
"type": "TEXT",
|
||||
"characters": "Wikilinks in Getting Started vault now resolve correctly:\n- path/to/note targets match entry paths ending in /path/to/note.md\n- Display text shows entry title (not raw path)\n- Color reflects the linked note's type (e.g. blue for Note type)\n- Broken links show muted color as expected\n\nBefore: [[note/welcome-to-laputa]] showed raw path, unstyled\nAfter: [[note/welcome-to-laputa]] shows 'Welcome to Laputa' in Note blue"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "hideBacklinksEmpty_before",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Hide Empty Backlinks Label — Before (shows No backlinks label)",
|
||||
"width": 280,
|
||||
"height": 80,
|
||||
"fill": "#ffffff",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"alignItems": "flex-start",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "bl_header_before",
|
||||
"name": "section-header",
|
||||
"fill": "#6b7280",
|
||||
"content": "Backlinks",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 1.2
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "bl_empty_before",
|
||||
"name": "empty-label",
|
||||
"fill": "#9ca3af",
|
||||
"content": "No backlinks",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "hideBacklinksEmpty_after",
|
||||
"x": 320,
|
||||
"y": 0,
|
||||
"name": "Hide Empty Backlinks Label — After (section hidden when empty)",
|
||||
"width": 280,
|
||||
"height": 80,
|
||||
"fill": "#ffffff",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"alignItems": "flex-start",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "bl_note_after",
|
||||
"name": "note",
|
||||
"fill": "#9ca3af",
|
||||
"content": "(Backlinks, Referenced By, and Relations sections are hidden when empty — no placeholder label shown)",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
156
product-source/hololake-platform/design/keyboard-first-nav.pen
Normal file
156
product-source/hololake-platform/design/keyboard-first-nav.pen
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_notelist_nav",
|
||||
"name": "Keyboard-first — Note list keyboard navigation",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 280,
|
||||
"height": "fit_content(400)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"padding": [8, 0],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_notelist_label",
|
||||
"content": "Note list — ↑↓ highlight, Enter opens",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"padding": [0, 12, 8, 12]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_note_item_selected",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$--accent",
|
||||
"padding": [0, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_note_title_active",
|
||||
"content": "My selected note (keyboard highlight)",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_note_item_normal",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "transparent",
|
||||
"padding": [0, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_note_title_normal",
|
||||
"content": "Another note",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_menu_bar",
|
||||
"name": "Keyboard-first — Menu bar shortcuts added",
|
||||
"x": 320,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": "fit_content(200)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [16, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_menu_title",
|
||||
"content": "New menu bar shortcuts",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_s1",
|
||||
"content": "Archive Note — ⌘E\nTrash Note — ⌘⌫\nFind in Vault — ⌘⇧F\nGo Back — ⌘[\nGo Forward — ⌘]",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"lineHeight": 1.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_inspector_tab",
|
||||
"name": "Keyboard-first — Inspector Tab+Enter navigation",
|
||||
"x": 760,
|
||||
"y": 0,
|
||||
"width": 300,
|
||||
"height": "fit_content(200)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [16, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_inspector_title",
|
||||
"content": "Inspector — Tab focuses rows, Enter starts editing",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "kfn_prop_focused",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"padding": [0, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_prop_key",
|
||||
"content": "Status",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kfn_prop_val",
|
||||
"content": "In Progress (focused — ring visible)",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
185
product-source/hololake-platform/design/new-note-creation.pen
Normal file
185
product-source/hololake-platform/design/new-note-creation.pen
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_pending_save",
|
||||
"name": "New Note Creation — Unsaved State (Cmd+N)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 800,
|
||||
"height": 120,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"gap": 0,
|
||||
"padding": [
|
||||
0,
|
||||
0
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_tab_bar",
|
||||
"name": "Tab Bar",
|
||||
"layout": "horizontal",
|
||||
"width": 800,
|
||||
"height": 40,
|
||||
"fill": "$--card",
|
||||
"gap": 0,
|
||||
"padding": [
|
||||
0,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_tab_active",
|
||||
"name": "Tab — Unsaved Note (blue dot + italic)",
|
||||
"layout": "horizontal",
|
||||
"width": 180,
|
||||
"height": 40,
|
||||
"fill": "$--background",
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
0,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "nnc_dot_pending",
|
||||
"width": 8,
|
||||
"height": 8,
|
||||
"cornerRadius": 4,
|
||||
"fill": "#3b82f6"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "nnc_tab_label",
|
||||
"content": "Untitled Note",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "400",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_editor_area",
|
||||
"name": "Editor — Empty New Note",
|
||||
"layout": "vertical",
|
||||
"width": 800,
|
||||
"height": 80,
|
||||
"fill": "$--background",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "nnc_placeholder",
|
||||
"content": "Start typing...",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_after_first_save",
|
||||
"name": "New Note Creation — After First Save",
|
||||
"x": 820,
|
||||
"y": 0,
|
||||
"width": 800,
|
||||
"height": 120,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"padding": [
|
||||
0,
|
||||
0
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_tab_bar_saved",
|
||||
"name": "Tab Bar — Saved",
|
||||
"layout": "horizontal",
|
||||
"width": 800,
|
||||
"height": 40,
|
||||
"fill": "$--card",
|
||||
"gap": 0,
|
||||
"padding": [
|
||||
0,
|
||||
8
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_tab_saved",
|
||||
"name": "Tab — Saved Note",
|
||||
"layout": "horizontal",
|
||||
"width": 180,
|
||||
"height": 40,
|
||||
"fill": "$--background",
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
0,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "nnc_tab_label_saved",
|
||||
"content": "My New Note",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "400"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "nnc_editor_saved",
|
||||
"name": "Editor — Note with Content",
|
||||
"layout": "vertical",
|
||||
"width": 800,
|
||||
"height": 80,
|
||||
"fill": "$--background",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
16,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "nnc_content",
|
||||
"content": "My New Note content...",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
422
product-source/hololake-platform/design/notelist-multiselect.pen
Normal file
422
product-source/hololake-platform/design/notelist-multiselect.pen
Normal file
|
|
@ -0,0 +1,422 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_selected",
|
||||
"name": "Multi-select — 2 notes selected (bulk action bar visible)",
|
||||
"width": 340,
|
||||
"height": "fit_content(600)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"fill": "#FFFFFF",
|
||||
"layout": "vertical",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_hdr1",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space_between",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_h1t", "content": "Notes", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" },
|
||||
{ "type": "frame", "id": "ms_h1icons", "gap": 12, "alignItems": "center", "children": [
|
||||
{ "type": "text", "id": "ms_h1s", "content": "\uD83D\uDD0D", "fontSize": 14 },
|
||||
{ "type": "text", "id": "ms_h1p", "content": "+", "fontSize": 16, "fill": "#9B9A97" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_item1",
|
||||
"name": "item-selected-1",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#EBF5FF",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_i1row",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "frame", "id": "ms_i1chk", "width": 16, "height": 16, "cornerRadius": 3, "fill": "#2383E2", "stroke": { "fill": "#2383E2", "thickness": 1 } },
|
||||
{ "type": "text", "id": "ms_i1t", "content": "Build Laputa App", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }
|
||||
]
|
||||
},
|
||||
{ "type": "text", "id": "ms_i1s", "content": "Build a personal knowledge management app.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_item2",
|
||||
"name": "item-normal",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_i2row",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "frame", "id": "ms_i2chk", "width": 16, "height": 16, "cornerRadius": 3, "stroke": { "fill": "#D4D4D4", "thickness": 1 } },
|
||||
{ "type": "text", "id": "ms_i2t", "content": "Facebook Ads Strategy", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{ "type": "text", "id": "ms_i2s", "content": "Lookalike audiences convert 3x better.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_item3",
|
||||
"name": "item-selected-2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#EBF5FF",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_i3row",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "frame", "id": "ms_i3chk", "width": 16, "height": 16, "cornerRadius": 3, "fill": "#2383E2", "stroke": { "fill": "#2383E2", "thickness": 1 } },
|
||||
{ "type": "text", "id": "ms_i3t", "content": "Matteo Cellini", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }
|
||||
]
|
||||
},
|
||||
{ "type": "text", "id": "ms_i3s", "content": "Sponsorship manager.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_item4",
|
||||
"name": "item-normal-2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_i4t", "content": "Kickoff Meeting", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_i4s", "content": "Project kickoff meeting notes.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{ "type": "frame", "id": "ms_spacer1", "width": "fill_container", "height": 120 },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_bulkbar",
|
||||
"name": "bulk-action-bar",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"padding": [0, 16],
|
||||
"fill": "#37352F",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_bcount", "content": "2 selected", "fill": "#FFFFFF", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_bactions",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_barchive",
|
||||
"padding": [6, 12],
|
||||
"cornerRadius": 6,
|
||||
"fill": "#FFFFFF20",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_bat1", "content": "Archive", "fill": "#FFFFFF", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_btrash",
|
||||
"padding": [6, 12],
|
||||
"cornerRadius": 6,
|
||||
"fill": "#E03E3E30",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_bat2", "content": "Move to Trash", "fill": "#E03E3E", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_bclose",
|
||||
"padding": [6, 8],
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_bx", "content": "\u2715", "fill": "#FFFFFF80", "fontSize": 14 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_range",
|
||||
"name": "Multi-select — range select Shift+click",
|
||||
"width": 340,
|
||||
"height": "fit_content(600)",
|
||||
"x": 400,
|
||||
"y": 0,
|
||||
"fill": "#FFFFFF",
|
||||
"layout": "vertical",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_hdr2",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space_between",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_h2t", "content": "Notes", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" },
|
||||
{ "type": "frame", "id": "ms_h2icons", "gap": 12, "alignItems": "center", "children": [
|
||||
{ "type": "text", "id": "ms_h2s", "content": "\uD83D\uDD0D", "fontSize": 14 },
|
||||
{ "type": "text", "id": "ms_h2p", "content": "+", "fontSize": 16, "fill": "#9B9A97" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_r_annotation",
|
||||
"name": "annotation",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 16],
|
||||
"fill": "#FFF8E1",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_ra_t", "content": "Shift+Click: range from first-clicked to here", "fill": "#D9730D", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_r1",
|
||||
"name": "range-anchor",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#EBF5FF",
|
||||
"stroke": { "align": "inside", "fill": "#2383E2", "thickness": { "left": 3, "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_r1t", "content": "Build Laputa App \u2190 anchor (first Cmd+click)", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" },
|
||||
{ "type": "text", "id": "ms_r1s", "content": "Build a personal knowledge management app.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_r2",
|
||||
"name": "range-included",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#EBF5FF",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_r2t", "content": "Facebook Ads Strategy (auto-included in range)", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_r2s", "content": "Lookalike audiences convert 3x better.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_r3",
|
||||
"name": "range-end",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#EBF5FF",
|
||||
"stroke": { "align": "inside", "fill": "#2383E2", "thickness": { "left": 3, "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_r3t", "content": "Matteo Cellini \u2190 Shift+click target", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" },
|
||||
{ "type": "text", "id": "ms_r3s", "content": "Sponsorship manager.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_r4",
|
||||
"name": "range-outside",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_r4t", "content": "Kickoff Meeting (outside range)", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_r4s", "content": "Project kickoff meeting notes.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{ "type": "frame", "id": "ms_rspacer", "width": "fill_container", "height": 80 },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_rbulkbar",
|
||||
"name": "bulk-action-bar",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"padding": [0, 16],
|
||||
"fill": "#37352F",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_rbcount", "content": "3 selected", "fill": "#FFFFFF", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_rbactions",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{ "type": "frame", "id": "ms_rbarchive", "padding": [6, 12], "cornerRadius": 6, "fill": "#FFFFFF20", "children": [
|
||||
{ "type": "text", "id": "ms_rba1", "content": "Archive", "fill": "#FFFFFF", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }
|
||||
]},
|
||||
{ "type": "frame", "id": "ms_rbtrash", "padding": [6, 12], "cornerRadius": 6, "fill": "#E03E3E30", "children": [
|
||||
{ "type": "text", "id": "ms_rba2", "content": "Move to Trash", "fill": "#E03E3E", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }
|
||||
]},
|
||||
{ "type": "frame", "id": "ms_rbclose", "padding": [6, 8], "children": [
|
||||
{ "type": "text", "id": "ms_rbx", "content": "\u2715", "fill": "#FFFFFF80", "fontSize": 14 }
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_empty",
|
||||
"name": "Multi-select — empty selection / hover state",
|
||||
"width": 340,
|
||||
"height": "fit_content(600)",
|
||||
"x": 800,
|
||||
"y": 0,
|
||||
"fill": "#FFFFFF",
|
||||
"layout": "vertical",
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_hdr3",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"padding": [0, 16],
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space_between",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_h3t", "content": "Notes", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" },
|
||||
{ "type": "frame", "id": "ms_h3icons", "gap": 12, "alignItems": "center", "children": [
|
||||
{ "type": "text", "id": "ms_h3s", "content": "\uD83D\uDD0D", "fontSize": 14 },
|
||||
{ "type": "text", "id": "ms_h3p", "content": "+", "fontSize": 16, "fill": "#9B9A97" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e_annot",
|
||||
"name": "annotation",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 16],
|
||||
"fill": "#F5F5F5",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_ea_t", "content": "No selection \u2014 Cmd+Click to select, Shift+Click for range", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 11 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e1",
|
||||
"name": "item-active",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 13, 14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#2383E2", "thickness": { "left": 3, "bottom": 1 } },
|
||||
"fill": "#EBF5FF",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_e1t", "content": "Build Laputa App (current note \u2014 active)", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" },
|
||||
{ "type": "text", "id": "ms_e1s", "content": "Build a personal knowledge management app.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e2",
|
||||
"name": "item-hover",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"fill": "#F5F5F4",
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_e2t", "content": "Facebook Ads Strategy (hover state)", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_e2s", "content": "Lookalike audiences convert 3x better.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e3",
|
||||
"name": "item-default",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_e3t", "content": "Matteo Cellini", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_e3s", "content": "Sponsorship manager.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e4",
|
||||
"name": "item-default-2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "#E5E5E5", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_e4t", "content": "Kickoff Meeting", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" },
|
||||
{ "type": "text", "id": "ms_e4s", "content": "Project kickoff meeting notes.", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ms_e_nobar",
|
||||
"name": "no-bar-annotation",
|
||||
"width": "fill_container",
|
||||
"padding": [12, 16],
|
||||
"fill": "#F5F5F5",
|
||||
"children": [
|
||||
{ "type": "text", "id": "ms_ena_t", "content": "\u2191 No bulk action bar when nothing is selected", "fill": "#9B9A97", "fontFamily": "Inter", "fontSize": 11 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "rel_x_default",
|
||||
"name": "Relationship Pill — Default (X hidden)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 280,
|
||||
"height": "fit_content(40)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
16,
|
||||
16
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_default_label",
|
||||
"content": "Relationship Pill — Default State",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "rel_x_pill_default",
|
||||
"layout": "horizontal",
|
||||
"gap": 4,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"fill": "$--accent",
|
||||
"borderRadius": 6,
|
||||
"width": "fit_content",
|
||||
"height": "fit_content",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_pill_label",
|
||||
"content": "Note Title",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "rel_x_type_icon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"opacity": 0.5,
|
||||
"borderRadius": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_note_default",
|
||||
"content": "X button not visible in default state",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "rel_x_hover",
|
||||
"name": "Relationship Pill — Hover (X visible)",
|
||||
"x": 320,
|
||||
"y": 0,
|
||||
"width": 280,
|
||||
"height": "fit_content(40)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
16,
|
||||
16
|
||||
],
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_hover_label",
|
||||
"content": "Relationship Pill — Hover State",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "rel_x_pill_hover",
|
||||
"layout": "horizontal",
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
4,
|
||||
8
|
||||
],
|
||||
"fill": "$--accent",
|
||||
"borderRadius": 6,
|
||||
"width": "fit_content",
|
||||
"height": "fit_content",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_pill_label_hover",
|
||||
"content": "Note Title",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "rel_x_trailing",
|
||||
"layout": "horizontal",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_icon",
|
||||
"content": "×",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "400"
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"id": "rel_x_type_icon_hover",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"opacity": 0.5,
|
||||
"borderRadius": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "rel_x_note_hover",
|
||||
"content": "X appears inline as flex child, before type icon. Ring border on hover.",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[{"id":"status-bar-indexing","type":"frame","name":"StatusBar - Indexing Progress States","layout":"vertical","x":0,"y":0,"width":1400,"height":400,"gap":24,"padding":24,"fill":"#F7F6F3","children":[{"id":"title","type":"text","content":"StatusBar Indexing Progress - search-bundle-qmd","fontSize":20,"fontWeight":"600","fill":"#37352F"},{"id":"desc","type":"text","content":"The indexing badge appears in the StatusBar left section, after the pending changes badge. It shows the current indexing phase with a spinner icon (Loader2) during active phases and a Search icon when complete.","fontSize":14,"fill":"#9B9A97","width":900},{"id":"states","type":"frame","name":"States","layout":"vertical","gap":16,"width":1350,"children":[{"id":"state-idle","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-idle","type":"text","content":"idle:","fontSize":12,"fontWeight":"600","fill":"#9B9A97","width":100},{"id":"val-idle","type":"text","content":"(hidden - no badge shown)","fontSize":12,"fill":"#9B9A97"}]},{"id":"state-installing","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-install","type":"text","content":"installing:","fontSize":12,"fontWeight":"600","fill":"#3b82f6","width":100},{"id":"val-install","type":"text","content":"| [spinner] Installing search\u2026","fontSize":12,"fill":"#3b82f6"}]},{"id":"state-scanning","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-scan","type":"text","content":"scanning:","fontSize":12,"fontWeight":"600","fill":"#3b82f6","width":100},{"id":"val-scan","type":"text","content":"| [spinner] Indexing\u2026 342/1,057","fontSize":12,"fill":"#3b82f6"}]},{"id":"state-embedding","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-embed","type":"text","content":"embedding:","fontSize":12,"fontWeight":"600","fill":"#3b82f6","width":100},{"id":"val-embed","type":"text","content":"| [spinner] Embedding\u2026 50/200","fontSize":12,"fill":"#3b82f6"}]},{"id":"state-complete","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-done","type":"text","content":"complete:","fontSize":12,"fontWeight":"600","fill":"#22c55e","width":100},{"id":"val-done","type":"text","content":"| [search icon] Index ready (auto-dismisses after 5s)","fontSize":12,"fill":"#22c55e"}]},{"id":"state-error","type":"frame","layout":"horizontal","gap":8,"alignItems":"center","children":[{"id":"label-err","type":"text","content":"error:","fontSize":12,"fontWeight":"600","fill":"#f97316","width":100},{"id":"val-err","type":"text","content":"| [search icon] Index error (orange accent)","fontSize":12,"fill":"#f97316"}]}]},{"id":"flow","type":"frame","name":"Flow","layout":"vertical","gap":8,"width":1350,"children":[{"id":"flow-title","type":"text","content":"Auto-indexing Flow","fontSize":16,"fontWeight":"600","fill":"#37352F"},{"id":"flow-desc","type":"text","content":"1. Vault opens \u2192 useIndexing checks index status via get_index_status\n2. If qmd missing or collection missing or pending embeds \u2192 triggers start_indexing\n3. Rust emits indexing-progress events (installing \u2192 scanning \u2192 embedding \u2192 complete)\n4. StatusBar shows IndexingBadge with spinner + phase label + progress counts\n5. On file save \u2192 trigger_incremental_index runs qmd update in background\n6. Complete phase auto-dismisses after 5 seconds","fontSize":13,"fill":"#37352F","width":900}]}]}],"variables":{}}
|
||||
|
|
@ -0,0 +1,665 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_main",
|
||||
"name": "Search Results — subtitle with metadata",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 540,
|
||||
"fill": "$--card",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$--border"
|
||||
},
|
||||
"shadow": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 8,
|
||||
"blur": 32,
|
||||
"spread": -4,
|
||||
"fill": "#00000020"
|
||||
}
|
||||
],
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_inputRow",
|
||||
"name": "searchInputRow",
|
||||
"width": "fill_container",
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"gap": 8,
|
||||
"padding": [14, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "srs_searchIcon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "magnifying-glass",
|
||||
"iconFontFamily": "phosphor",
|
||||
"fill": "$--primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_query",
|
||||
"fill": "$--foreground",
|
||||
"content": "time management",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_resultsHeader",
|
||||
"name": "resultsHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 16],
|
||||
"alignItems": "center",
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_count",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "3 results \u00b7 45ms",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_result1",
|
||||
"name": "searchResult1 (selected)",
|
||||
"width": "fill_container",
|
||||
"fill": "$--accent-blue-light",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r1_titleRow",
|
||||
"name": "titleRow",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Time Management Strategies",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r1_badge",
|
||||
"name": "typeBadge",
|
||||
"fill": "$--accent-green-light",
|
||||
"cornerRadius": 4,
|
||||
"padding": [2, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_badgeTxt",
|
||||
"fill": "$--accent-green",
|
||||
"content": "Evergreen",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r1_meta",
|
||||
"name": "metadataRow",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_date",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "2d ago",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_sep1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_words",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "1,247 words",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_sep2",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r1_links",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "5 links",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_result2",
|
||||
"name": "searchResult2",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r2_titleRow",
|
||||
"name": "titleRow",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Weekly Review Process",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r2_badge",
|
||||
"name": "typeBadge",
|
||||
"fill": "$--accent-purple-light",
|
||||
"cornerRadius": 4,
|
||||
"padding": [2, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_badgeTxt",
|
||||
"fill": "$--accent-purple",
|
||||
"content": "Procedure",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r2_meta",
|
||||
"name": "metadataRow",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_date",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "5h ago",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_sep1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_created",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Created Jan 15",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_sep2",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_words",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "856 words",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_sep3",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r2_links",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "12 links",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_result3",
|
||||
"name": "searchResult3",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16, 14, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r3_titleRow",
|
||||
"name": "titleRow",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r3_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Q1 Planning",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_r3_meta",
|
||||
"name": "metadataRow",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r3_date",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Jan 3",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r3_sep1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u00b7",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_r3_words",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "2,103 words",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_footer",
|
||||
"name": "searchFooter",
|
||||
"width": "fill_container",
|
||||
"fill": "$--muted",
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"top": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"gap": 16,
|
||||
"padding": [8, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_hint1",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u2191\u2193 Navigate",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_hint2",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "\u21b5 Open",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_hint3",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Esc Close",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_states",
|
||||
"name": "Search Results — subtitle states",
|
||||
"x": 600,
|
||||
"y": 0,
|
||||
"width": 540,
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [24, 24],
|
||||
"fill": "$--background",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$--border"
|
||||
},
|
||||
"theme": {
|
||||
"Mode": "Light"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_states_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Metadata Subtitle — States",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_state1",
|
||||
"name": "State: all metadata present",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s1_label",
|
||||
"fill": "$--accent-blue",
|
||||
"content": "All metadata present (modified \u2260 created)",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s1_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Time Management Strategies",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s1_meta",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "2d ago \u00b7 Created Jan 15 \u00b7 1,247 words \u00b7 5 links",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_state2",
|
||||
"name": "State: no created date (same as modified)",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s2_label",
|
||||
"fill": "$--accent-blue",
|
||||
"content": "Modified = Created (skip 'Created' field)",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s2_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Quick Note",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s2_meta",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "just now \u00b7 342 words \u00b7 2 links",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_state3",
|
||||
"name": "State: no links (zero outgoingLinks)",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s3_label",
|
||||
"fill": "$--accent-blue",
|
||||
"content": "No links (omitted from metadata)",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s3_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Random Thought",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s3_meta",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "3h ago \u00b7 128 words",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_state4",
|
||||
"name": "State: empty note (zero words)",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
},
|
||||
"fill": "$--border"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s4_label",
|
||||
"fill": "$--accent-blue",
|
||||
"content": "Empty note (word count shows 'Empty')",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s4_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Untitled Draft",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s4_meta",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "5d ago \u00b7 Empty",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "srs_state5",
|
||||
"name": "State: no date at all",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s5_label",
|
||||
"fill": "$--accent-blue",
|
||||
"content": "No date available (graceful degradation)",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s5_title",
|
||||
"fill": "$--foreground",
|
||||
"content": "Legacy Import",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "srs_s5_meta",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "89 words \u00b7 1 link",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
{"children":[
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f_search_meta",
|
||||
"name": "Search Result — with metadata subtitle",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 540,
|
||||
"height": "fit_content",
|
||||
"fill": "$--search-bg",
|
||||
"layout": "vertical",
|
||||
"padding": [24, 0],
|
||||
"gap": 0,
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_heading",
|
||||
"content": "Search Result Item — with metadata subtitle",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700",
|
||||
"width": "fill_container",
|
||||
"padding": [0, 16, 12, 16]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_desc",
|
||||
"content": "Each search result now shows a metadata line below the snippet: modified date, word count, and link count. The type badge remains next to the title.",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"lineHeight": 1.5,
|
||||
"width": "fill_container",
|
||||
"padding": [0, 16, 16, 16]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_countbar",
|
||||
"width": "fill_container",
|
||||
"padding": [6, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--search-border", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_count",
|
||||
"content": "12 results · 148ms",
|
||||
"fill": "$--search-highlight",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_result1",
|
||||
"name": "Result 1 — Selected",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"fill": "$--accent",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r1_titlerow",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r1_title",
|
||||
"content": "How to Manage your Time",
|
||||
"fill": "$--search-heading",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r1_badge",
|
||||
"cornerRadius": 3,
|
||||
"fill": "$--secondary",
|
||||
"padding": [2, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r1_badgeText",
|
||||
"content": "Essay",
|
||||
"fill": "$--search-text-muted",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r1_snippet",
|
||||
"content": "...how people can improve their time management skills. They gathered results in this article...",
|
||||
"fill": "$--search-snippet",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"lineHeight": 1.4,
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r1_meta",
|
||||
"name": "metadata line",
|
||||
"width": "fill_container",
|
||||
"gap": 0,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r1_m1",
|
||||
"content": "Modified 2h ago · 1,240 words · 7 links",
|
||||
"fill": "$--search-text-dim",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_result2",
|
||||
"name": "Result 2 — Normal",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--search-border", "thickness": { "top": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r2_titlerow",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r2_title",
|
||||
"content": "Weekly Review Process",
|
||||
"fill": "$--search-heading",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r2_badge",
|
||||
"cornerRadius": 3,
|
||||
"fill": "$--secondary",
|
||||
"padding": [2, 6],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r2_badgeText",
|
||||
"content": "Procedure",
|
||||
"fill": "$--search-text-muted",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r2_snippet",
|
||||
"content": "Every Sunday morning, review the week's progress and plan the next week...",
|
||||
"fill": "$--search-snippet",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"lineHeight": 1.4,
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r2_meta",
|
||||
"name": "metadata line",
|
||||
"width": "fill_container",
|
||||
"gap": 0,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r2_m1",
|
||||
"content": "Modified 3d ago · 520 words · 12 links",
|
||||
"fill": "$--search-text-dim",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_result3",
|
||||
"name": "Result 3 — No links",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [10, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--search-border", "thickness": { "top": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r3_titlerow",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r3_title",
|
||||
"content": "Morning Routine",
|
||||
"fill": "$--search-heading",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r3_snippet",
|
||||
"content": "A simple checklist for starting the day with intention...",
|
||||
"fill": "$--search-snippet",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"lineHeight": 1.4,
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f1_r3_meta",
|
||||
"name": "metadata line",
|
||||
"width": "fill_container",
|
||||
"gap": 0,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f1_r3_m1",
|
||||
"content": "Modified Jan 15 · 89 words",
|
||||
"fill": "$--search-text-dim",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f_notelist_meta",
|
||||
"name": "NoteList Item — subtitle with link count",
|
||||
"x": 600,
|
||||
"y": 0,
|
||||
"width": 340,
|
||||
"height": "fit_content",
|
||||
"fill": "$--card",
|
||||
"layout": "vertical",
|
||||
"padding": [24, 0],
|
||||
"gap": 0,
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_heading",
|
||||
"content": "NoteList Item — enhanced subtitle",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700",
|
||||
"width": "fill_container",
|
||||
"padding": [0, 16, 12, 16]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_desc",
|
||||
"content": "Normal NoteList items add a link count after date and word count. The separator is a middle dot (·). When link count is 0, it's omitted.",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"lineHeight": 1.5,
|
||||
"width": "fill_container",
|
||||
"padding": [0, 16, 16, 16]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_item1",
|
||||
"name": "NoteListItem — with links",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--border", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_i1_titlerow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i1_title",
|
||||
"content": "Build Laputa App",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i1_sub",
|
||||
"content": "2h ago · 342 words · 5 links",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_item2",
|
||||
"name": "NoteListItem — no links",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--border", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_i2_titlerow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i2_title",
|
||||
"content": "Quick Meeting Notes",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i2_sub",
|
||||
"content": "5d ago · 120 words",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_item3",
|
||||
"name": "NoteListItem — empty note",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [14, 16],
|
||||
"stroke": { "align": "inside", "fill": "$--border", "thickness": { "bottom": 1 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "f2_i3_titlerow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i3_title",
|
||||
"content": "New Untitled Note",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "f2_i3_sub",
|
||||
"content": "just now · Empty",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],"variables":{
|
||||
"--search-bg": {"type":"color","value":[{"value":"#FFFFFF"},{"theme":{"Mode":"Dark"},"value":"#1E1E2E"}]},
|
||||
"--search-heading": {"type":"color","value":[{"value":"#37352F"},{"theme":{"Mode":"Dark"},"value":"#e0e0f0"}]},
|
||||
"--search-snippet": {"type":"color","value":[{"value":"#787774"},{"theme":{"Mode":"Dark"},"value":"#888899"}]},
|
||||
"--search-text-dim": {"type":"color","value":[{"value":"#787774"},{"theme":{"Mode":"Dark"},"value":"#666680"}]},
|
||||
"--search-text-muted": {"type":"color","value":[{"value":"#787774"},{"theme":{"Mode":"Dark"},"value":"#8888aa"}]},
|
||||
"--search-highlight": {"type":"color","value":[{"value":"#37352F"},{"theme":{"Mode":"Dark"},"value":"#555570"}]},
|
||||
"--search-border": {"type":"color","value":[{"value":"#E9E9E7"},{"theme":{"Mode":"Dark"},"value":"#4c4c6d"}]},
|
||||
"--foreground": {"type":"color","value":[{"value":"#1C1C1C"},{"theme":{"Mode":"Dark"},"value":"#F5F5F5"}]},
|
||||
"--muted-foreground": {"type":"color","value":[{"value":"#737373"},{"theme":{"Mode":"Dark"},"value":"#A3A3A3"}]},
|
||||
"--border": {"type":"color","value":[{"value":"#E5E5E5"},{"theme":{"Mode":"Dark"},"value":"#333333"}]},
|
||||
"--card": {"type":"color","value":[{"value":"#FFFFFF"},{"theme":{"Mode":"Dark"},"value":"#1C1C1C"}]},
|
||||
"--accent": {"type":"color","value":[{"value":"#F5F5F5"},{"theme":{"Mode":"Dark"},"value":"#262626"}]},
|
||||
"--secondary": {"type":"color","value":[{"value":"#F5F5F5"},{"theme":{"Mode":"Dark"},"value":"#262626"}]}
|
||||
}}
|
||||
|
|
@ -0,0 +1,524 @@
|
|||
{
|
||||
"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 <input type='date'> 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": {}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
619
product-source/hololake-platform/design/status-color-picker.pen
Normal file
619
product-source/hololake-platform/design/status-color-picker.pen
Normal file
|
|
@ -0,0 +1,619 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "Status Dropdown — Color Dots",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"id": "1wdqT",
|
||||
"name": "title1",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"content": "Each status option shows a color dot on the left. Clicking the dot opens the color palette picker.",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal",
|
||||
"id": "PsCXR",
|
||||
"lineHeight": 1.5,
|
||||
"name": "desc1",
|
||||
"textGrowth": "fixed-width",
|
||||
"type": "text",
|
||||
"width": 272
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "Type a status...",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal",
|
||||
"id": "VyDsY",
|
||||
"name": "searchText",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"id": "tim0g",
|
||||
"name": "searchBar",
|
||||
"padding": [
|
||||
8,
|
||||
10
|
||||
],
|
||||
"stroke": {
|
||||
"fill": "$--border",
|
||||
"thickness": {
|
||||
"bottom": 1
|
||||
}
|
||||
},
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "FROM VAULT",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 9,
|
||||
"fontWeight": "500",
|
||||
"id": "Bn3lU",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "labelText",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"id": "CB90c",
|
||||
"name": "sectionLabel",
|
||||
"padding": [
|
||||
4,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"fill": "$--accent-green",
|
||||
"height": 10,
|
||||
"id": "8uSm6",
|
||||
"name": "dot1",
|
||||
"type": "ellipse",
|
||||
"width": 10
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "ACTIVE",
|
||||
"fill": "$--accent-green",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"id": "h4OER",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "pill1text",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 16,
|
||||
"fill": "$--accent-green-light",
|
||||
"id": "k7sSo",
|
||||
"name": "pill1",
|
||||
"padding": [
|
||||
1,
|
||||
6
|
||||
],
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 4,
|
||||
"gap": 8,
|
||||
"id": "IZrMP",
|
||||
"name": "Status Option - Active",
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"fill": "$--accent-red",
|
||||
"height": 10,
|
||||
"id": "sSEfx",
|
||||
"name": "dot2",
|
||||
"type": "ellipse",
|
||||
"width": 10
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "BLOCKED",
|
||||
"fill": "$--accent-red",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"id": "61jBJ",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "pill2text",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 16,
|
||||
"fill": "$--accent-red-light",
|
||||
"id": "ozLQM",
|
||||
"name": "pill2",
|
||||
"padding": [
|
||||
1,
|
||||
6
|
||||
],
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 4,
|
||||
"gap": 8,
|
||||
"id": "B3Im8",
|
||||
"name": "Status Option - Blocked",
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"fill": "$--accent-yellow",
|
||||
"height": 10,
|
||||
"id": "2mTmp",
|
||||
"name": "dot3",
|
||||
"type": "ellipse",
|
||||
"width": 10
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "DRAFT",
|
||||
"fill": "$--accent-yellow",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"id": "evl7l",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "pill3text",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 16,
|
||||
"fill": "$--accent-yellow-light",
|
||||
"id": "6Fuxw",
|
||||
"name": "pill3",
|
||||
"padding": [
|
||||
1,
|
||||
6
|
||||
],
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 4,
|
||||
"fill": "$--muted",
|
||||
"gap": 8,
|
||||
"id": "TwUBA",
|
||||
"name": "Status Option - Draft (hover)",
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 8,
|
||||
"fill": "$--background",
|
||||
"id": "DT2gn",
|
||||
"layout": "vertical",
|
||||
"name": "Dropdown Container",
|
||||
"stroke": {
|
||||
"fill": "$--border",
|
||||
"thickness": 1
|
||||
},
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
}
|
||||
],
|
||||
"fill": "$--background",
|
||||
"gap": 16,
|
||||
"id": "2N2BP",
|
||||
"layout": "vertical",
|
||||
"name": "1 — Status Dropdown with Color Dots",
|
||||
"padding": 24,
|
||||
"type": "frame",
|
||||
"width": 320,
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "Color Picker — Expanded",
|
||||
"fill": "$--foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"id": "zPCnI",
|
||||
"name": "title2",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"content": "Clicking a color dot expands the palette inline. The 8 accent colors from the design system are shown as clickable swatches. A 'Default' option resets to the built-in color.",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal",
|
||||
"id": "TtaTt",
|
||||
"lineHeight": 1.5,
|
||||
"name": "desc2",
|
||||
"textGrowth": "fixed-width",
|
||||
"type": "text",
|
||||
"width": 272
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"fill": "$--accent-yellow",
|
||||
"height": 10,
|
||||
"id": "FRKg5",
|
||||
"name": "dotActive",
|
||||
"stroke": {
|
||||
"fill": "$--foreground",
|
||||
"thickness": 2
|
||||
},
|
||||
"type": "ellipse",
|
||||
"width": 10
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "DRAFT",
|
||||
"fill": "$--accent-yellow",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"id": "rA60a",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "pillActiveText",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 16,
|
||||
"fill": "$--accent-yellow-light",
|
||||
"id": "15D2Q",
|
||||
"name": "pillActive",
|
||||
"padding": [
|
||||
1,
|
||||
6
|
||||
],
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 4,
|
||||
"fill": "$--muted",
|
||||
"gap": 8,
|
||||
"id": "3QplJ",
|
||||
"name": "Draft Option Row",
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "ASSIGN COLOR",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 9,
|
||||
"fontWeight": "500",
|
||||
"id": "5yhS8",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "paletteLabel",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "Default",
|
||||
"fill": "$--muted-foreground",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "normal",
|
||||
"id": "Q2ZwX",
|
||||
"name": "defText",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 10,
|
||||
"id": "Sgzjz",
|
||||
"name": "defBtn",
|
||||
"padding": [
|
||||
2,
|
||||
6
|
||||
],
|
||||
"stroke": {
|
||||
"fill": "$--border",
|
||||
"thickness": 1
|
||||
},
|
||||
"type": "frame"
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-red",
|
||||
"height": 16,
|
||||
"id": "sOgl3",
|
||||
"name": "sw1",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-orange",
|
||||
"height": 16,
|
||||
"id": "kqj6G",
|
||||
"name": "sw2",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-yellow",
|
||||
"height": 16,
|
||||
"id": "luCEG",
|
||||
"name": "sw3",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-green",
|
||||
"height": 16,
|
||||
"id": "KmBPE",
|
||||
"name": "sw4",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-blue",
|
||||
"height": 16,
|
||||
"id": "IsLDd",
|
||||
"name": "sw5",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-purple",
|
||||
"height": 16,
|
||||
"id": "M6bwU",
|
||||
"name": "sw6",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-teal",
|
||||
"height": 16,
|
||||
"id": "LKPIO",
|
||||
"name": "sw7",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
},
|
||||
{
|
||||
"fill": "$--accent-pink",
|
||||
"height": 16,
|
||||
"id": "bFQCa",
|
||||
"name": "sw8",
|
||||
"type": "ellipse",
|
||||
"width": 16
|
||||
}
|
||||
],
|
||||
"gap": 6,
|
||||
"id": "zwiKV",
|
||||
"name": "Swatches Row",
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"fill": "$--muted",
|
||||
"gap": 8,
|
||||
"id": "ZUL7a",
|
||||
"layout": "vertical",
|
||||
"name": "Color Palette",
|
||||
"padding": [
|
||||
8,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"fill": "$--border",
|
||||
"height": 1,
|
||||
"id": "hsnvv",
|
||||
"name": "divider",
|
||||
"type": "rectangle",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"fill": "$--accent-green",
|
||||
"height": 10,
|
||||
"id": "Mddih",
|
||||
"name": "otherDot",
|
||||
"type": "ellipse",
|
||||
"width": 10
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"content": "ACTIVE",
|
||||
"fill": "$--accent-green",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600",
|
||||
"id": "pVJ5Z",
|
||||
"letterSpacing": 1.2,
|
||||
"name": "otherText",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 16,
|
||||
"fill": "$--accent-green-light",
|
||||
"id": "bHWx0",
|
||||
"name": "otherPill",
|
||||
"padding": [
|
||||
1,
|
||||
6
|
||||
],
|
||||
"type": "frame"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 4,
|
||||
"gap": 8,
|
||||
"id": "EpnwC",
|
||||
"name": "Other Option",
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
}
|
||||
],
|
||||
"cornerRadius": 8,
|
||||
"fill": "$--background",
|
||||
"id": "f2Adq",
|
||||
"layout": "vertical",
|
||||
"name": "Dropdown with Picker",
|
||||
"stroke": {
|
||||
"fill": "$--border",
|
||||
"thickness": 1
|
||||
},
|
||||
"type": "frame",
|
||||
"width": "fill_container"
|
||||
}
|
||||
],
|
||||
"fill": "$--background",
|
||||
"gap": 16,
|
||||
"id": "jbCuz",
|
||||
"layout": "vertical",
|
||||
"name": "2 — Color Picker Expanded",
|
||||
"padding": 24,
|
||||
"type": "frame",
|
||||
"width": 320,
|
||||
"x": 360,
|
||||
"y": 0
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"--accent-blue": {
|
||||
"type": "color",
|
||||
"value": "#155DFF"
|
||||
},
|
||||
"--accent-blue-light": {
|
||||
"type": "color",
|
||||
"value": "#155DFF14"
|
||||
},
|
||||
"--accent-green": {
|
||||
"type": "color",
|
||||
"value": "#38A169"
|
||||
},
|
||||
"--accent-green-light": {
|
||||
"type": "color",
|
||||
"value": "#38A16919"
|
||||
},
|
||||
"--accent-orange": {
|
||||
"type": "color",
|
||||
"value": "#D9730D"
|
||||
},
|
||||
"--accent-orange-light": {
|
||||
"type": "color",
|
||||
"value": "#D9730D19"
|
||||
},
|
||||
"--accent-pink": {
|
||||
"type": "color",
|
||||
"value": "#D53F8C"
|
||||
},
|
||||
"--accent-pink-light": {
|
||||
"type": "color",
|
||||
"value": "#D53F8C19"
|
||||
},
|
||||
"--accent-purple": {
|
||||
"type": "color",
|
||||
"value": "#805AD5"
|
||||
},
|
||||
"--accent-purple-light": {
|
||||
"type": "color",
|
||||
"value": "#805AD519"
|
||||
},
|
||||
"--accent-red": {
|
||||
"type": "color",
|
||||
"value": "#E53E3E"
|
||||
},
|
||||
"--accent-red-light": {
|
||||
"type": "color",
|
||||
"value": "#E53E3E19"
|
||||
},
|
||||
"--accent-teal": {
|
||||
"type": "color",
|
||||
"value": "#319795"
|
||||
},
|
||||
"--accent-teal-light": {
|
||||
"type": "color",
|
||||
"value": "#31979519"
|
||||
},
|
||||
"--accent-yellow": {
|
||||
"type": "color",
|
||||
"value": "#D69E2E"
|
||||
},
|
||||
"--accent-yellow-light": {
|
||||
"type": "color",
|
||||
"value": "#D69E2E19"
|
||||
},
|
||||
"--background": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"--border": {
|
||||
"type": "color",
|
||||
"value": "#E9E9E7"
|
||||
},
|
||||
"--foreground": {
|
||||
"type": "color",
|
||||
"value": "#37352F"
|
||||
},
|
||||
"--muted": {
|
||||
"type": "color",
|
||||
"value": "#F5F5F4"
|
||||
},
|
||||
"--muted-foreground": {
|
||||
"type": "color",
|
||||
"value": "#787774"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"children":[],"variables":{}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"children":[{"id":"trashed-banner-frame","type":"frame","name":"Trashed Note Banner","x":0,"y":0,"width":720,"height":340,"fill":"#FFFFFF","cornerRadius":[8,8,8,8],"children":[{"id":"breadcrumb","type":"frame","name":"Breadcrumb Bar","width":720,"height":45,"fill":"#FFFFFF","layout":"horizontal","mainAxisAlignment":"space-between","crossAxisAlignment":"center","padding":16,"children":[{"id":"breadcrumb-left","type":"frame","layout":"horizontal","gap":4,"crossAxisAlignment":"center","children":[{"id":"type-label","type":"text","content":"Note","fontSize":12,"textColor":"#6B7280"},{"id":"sep","type":"text","content":"›","fontSize":12,"textColor":"#6B7280"},{"id":"title","type":"text","content":"My Trashed Note","fontSize":12,"fontWeight":"600","textColor":"#1F2937"},{"id":"dot","type":"text","content":"·","fontSize":12,"textColor":"#6B7280"},{"id":"words","type":"text","content":"1,234 words","fontSize":12,"textColor":"#6B7280"}]},{"id":"breadcrumb-right","type":"frame","layout":"horizontal","gap":12,"crossAxisAlignment":"center","children":[{"id":"restore-icon","type":"text","content":"↺","fontSize":14,"textColor":"#6B7280"},{"id":"inspector-icon","type":"text","content":"⚙","fontSize":14,"textColor":"#6B7280"}]}]},{"id":"banner","type":"frame","name":"Trashed Note Banner","width":720,"height":32,"fill":"#FEF2F2","layout":"horizontal","crossAxisAlignment":"center","gap":8,"padding":16,"children":[{"id":"trash-icon","type":"text","content":"🗑","fontSize":12,"textColor":"#DC2626"},{"id":"banner-text","type":"text","content":"This note is in the Trash","fontSize":12,"textColor":"#6B7280","width":400},{"id":"restore-btn","type":"frame","layout":"horizontal","gap":4,"crossAxisAlignment":"center","padding":4,"cornerRadius":[4,4,4,4],"children":[{"id":"restore-icon-2","type":"text","content":"↺","fontSize":11,"textColor":"#2563EB"},{"id":"restore-label","type":"text","content":"Restore","fontSize":11,"textColor":"#2563EB"}]},{"id":"delete-btn","type":"frame","layout":"horizontal","gap":4,"crossAxisAlignment":"center","padding":4,"cornerRadius":[4,4,4,4],"children":[{"id":"delete-icon","type":"text","content":"🗑","fontSize":11,"textColor":"#DC2626"},{"id":"delete-label","type":"text","content":"Delete permanently","fontSize":11,"textColor":"#DC2626"}]}]},{"id":"editor-area","type":"frame","name":"Editor (read-only, muted)","width":720,"height":260,"fill":"#FAFAFA","padding":32,"children":[{"id":"h1","type":"text","content":"My Trashed Note","fontSize":24,"fontWeight":"700","textColor":"#9CA3AF"},{"id":"p1","type":"text","content":"This is the content of a trashed note. The editor is non-editable.","fontSize":14,"textColor":"#9CA3AF","y":40},{"id":"p2","type":"text","content":"Navigation and copy still work, but typing and editing are disabled.","fontSize":14,"textColor":"#9CA3AF","y":64}]}]}],"variables":{}}
|
||||
329
product-source/hololake-platform/design/ui-design-cleanup.pen
Normal file
329
product-source/hololake-platform/design/ui-design-cleanup.pen
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"id": "cleanup-summary",
|
||||
"type": "frame",
|
||||
"name": "ui-design-cleanup — Summary of Changes",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 800,
|
||||
"height": "fit_content(600)",
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"padding": 32,
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"id": "title",
|
||||
"type": "text",
|
||||
"content": "ui-design.pen Cleanup — 2026-02-27",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700",
|
||||
"color": "$--foreground"
|
||||
},
|
||||
{
|
||||
"id": "counts",
|
||||
"type": "frame",
|
||||
"layout": "horizontal",
|
||||
"gap": 40,
|
||||
"children": [
|
||||
{
|
||||
"id": "count-before",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"id": "cb-label",
|
||||
"type": "text",
|
||||
"content": "Frames Before",
|
||||
"fontSize": 12,
|
||||
"color": "$--muted-foreground",
|
||||
"fontFamily": "$--font-mono"
|
||||
},
|
||||
{
|
||||
"id": "cb-value",
|
||||
"type": "text",
|
||||
"content": "113",
|
||||
"fontSize": 32,
|
||||
"fontWeight": "700",
|
||||
"color": "$--foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "count-after",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"id": "ca-label",
|
||||
"type": "text",
|
||||
"content": "Frames After",
|
||||
"fontSize": 12,
|
||||
"color": "$--muted-foreground",
|
||||
"fontFamily": "$--font-mono"
|
||||
},
|
||||
{
|
||||
"id": "ca-value",
|
||||
"type": "text",
|
||||
"content": "129",
|
||||
"fontSize": 32,
|
||||
"fontWeight": "700",
|
||||
"color": "$--accent-green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "count-removed",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"id": "cr-label",
|
||||
"type": "text",
|
||||
"content": "Before Variants Removed",
|
||||
"fontSize": 12,
|
||||
"color": "$--muted-foreground",
|
||||
"fontFamily": "$--font-mono"
|
||||
},
|
||||
{
|
||||
"id": "cr-value",
|
||||
"type": "text",
|
||||
"content": "3",
|
||||
"fontSize": 32,
|
||||
"fontWeight": "700",
|
||||
"color": "$--destructive"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "count-integrated",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"id": "ci-label",
|
||||
"type": "text",
|
||||
"content": "Frames Integrated",
|
||||
"fontSize": 12,
|
||||
"color": "$--muted-foreground",
|
||||
"fontFamily": "$--font-mono"
|
||||
},
|
||||
{
|
||||
"id": "ci-value",
|
||||
"type": "text",
|
||||
"content": "18",
|
||||
"fontSize": 32,
|
||||
"fontWeight": "700",
|
||||
"color": "$--accent-blue"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "sep1",
|
||||
"type": "line",
|
||||
"width": "fill_container",
|
||||
"stroke": "$--border",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
{
|
||||
"id": "section-removed",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"id": "sr-title",
|
||||
"type": "text",
|
||||
"content": "Removed (before variants)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"color": "$--foreground"
|
||||
},
|
||||
{
|
||||
"id": "sr1",
|
||||
"type": "text",
|
||||
"content": "- csB01: Sections Header — Before (old design)",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "sr2",
|
||||
"type": "text",
|
||||
"content": "- mb001: macOS Border — Before (no border)",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "sr3",
|
||||
"type": "text",
|
||||
"content": "- hideBacklinksEmpty_before: Hide Empty Backlinks Label — Before",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "section-renamed",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"id": "sn-title",
|
||||
"type": "text",
|
||||
"content": "Renamed (dropped After/Before labels)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"color": "$--foreground"
|
||||
},
|
||||
{
|
||||
"id": "sn1",
|
||||
"type": "text",
|
||||
"content": "- csA01: Sections Header — After (new design) → Sections Header — Redesigned",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "sn2",
|
||||
"type": "text",
|
||||
"content": "- mb011: macOS Border — After (with border) → macOS Border — With Border",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "sn3",
|
||||
"type": "text",
|
||||
"content": "- hideBacklinksEmpty_after: ... → Hide Empty Backlinks Label",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "sep2",
|
||||
"type": "line",
|
||||
"width": "fill_container",
|
||||
"stroke": "$--border",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
{
|
||||
"id": "section-integrated",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"id": "si-title",
|
||||
"type": "text",
|
||||
"content": "Integrated from design/*.pen",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"color": "$--foreground"
|
||||
},
|
||||
{
|
||||
"id": "si1",
|
||||
"type": "text",
|
||||
"content": "- add-property-inline.pen (2 frames) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si2",
|
||||
"type": "text",
|
||||
"content": "- autocomplete-type-color.pen (2 frames) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si3",
|
||||
"type": "text",
|
||||
"content": "- date-picker-shadcn.pen (2 frames) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si4",
|
||||
"type": "text",
|
||||
"content": "- design-full-layouts.pen (4 frames) → Full Layouts section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si5",
|
||||
"type": "text",
|
||||
"content": "- hide-backlinks-empty.pen (1 after variant) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si6",
|
||||
"type": "text",
|
||||
"content": "- smart-property-display.pen (4 frames) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "si7",
|
||||
"type": "text",
|
||||
"content": "- status-property-dropdown.pen (3 frames) → Inspector section",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "sep3",
|
||||
"type": "line",
|
||||
"width": "fill_container",
|
||||
"stroke": "$--border",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
{
|
||||
"id": "section-notes",
|
||||
"type": "frame",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"id": "notes-title",
|
||||
"type": "text",
|
||||
"content": "Notes",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"color": "$--foreground"
|
||||
},
|
||||
{
|
||||
"id": "note1",
|
||||
"type": "text",
|
||||
"content": "Dark mode conversion: Not needed — all frames already use CSS variables (light theme)",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "note2",
|
||||
"type": "text",
|
||||
"content": "Deduplication: No true duplicates found — unnamed frames are section dividers",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"id": "note3",
|
||||
"type": "text",
|
||||
"content": "Empty design files (0 frames): auto-pull-vault, git-status-bar, note-subtitle-metadata, note-type-labels, properties-panel-header",
|
||||
"fontSize": 13,
|
||||
"color": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,281 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_menu_remove",
|
||||
"name": "Vault Menu — Remove from List",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 380,
|
||||
"height": 320,
|
||||
"fill": "#F7F6F3",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [24, 24, 24, 24],
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "vault_menu_title",
|
||||
"content": "Vault Menu — Remove Action",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_menu_dropdown",
|
||||
"name": "Vault Dropdown",
|
||||
"width": "fill_container",
|
||||
"height": "fit_content",
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": [6, 6, 6, 6],
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"layout": "vertical",
|
||||
"padding": [4, 4, 4, 4],
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_item_active",
|
||||
"name": "Active Vault Item",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "#EBEBEA",
|
||||
"cornerRadius": [4, 4, 4, 4],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"padding": [4, 8, 4, 8],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_item_active_left",
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{ "type": "text", "id": "vault_check", "content": "✓", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 12 },
|
||||
{ "type": "text", "id": "vault_label_active", "content": "My Vault", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "remove_btn_active",
|
||||
"name": "Remove Button",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"cornerRadius": [3, 3, 3, 3],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "x_icon_active", "content": "×", "fill": "#787774", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_item_other",
|
||||
"name": "Other Vault Item",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"cornerRadius": [4, 4, 4, 4],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"padding": [4, 8, 4, 8],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_item_other_left",
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{ "type": "text", "id": "vault_spacer", "content": " ", "fill": "transparent", "fontFamily": "Inter", "fontSize": 12 },
|
||||
{ "type": "text", "id": "vault_label_other", "content": "Work Vault", "fill": "#787774", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "remove_btn_other",
|
||||
"name": "Remove Button",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"cornerRadius": [3, 3, 3, 3],
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{ "type": "text", "id": "x_icon_other", "content": "×", "fill": "#787774", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_separator",
|
||||
"name": "Separator",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "#E9E9E7"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "vault_open_folder",
|
||||
"name": "Open Local Folder",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"cornerRadius": [4, 4, 4, 4],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"gap": 6,
|
||||
"padding": [4, 8, 4, 8],
|
||||
"children": [
|
||||
{ "type": "text", "id": "folder_icon", "content": "📁", "fontFamily": "Inter", "fontSize": 12 },
|
||||
{ "type": "text", "id": "open_folder_label", "content": "Open local folder", "fill": "#787774", "fontFamily": "Inter", "fontSize": 12 }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "vault_menu_note",
|
||||
"content": "× button removes vault from list without deleting files.\nAvailable when 2+ vaults in list.",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd_k_vault_commands",
|
||||
"name": "Cmd+K — Vault Commands",
|
||||
"x": 420,
|
||||
"y": 0,
|
||||
"width": 520,
|
||||
"height": 320,
|
||||
"fill": "#F7F6F3",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [24, 24, 24, 24],
|
||||
"theme": { "Mode": "Light" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmdk_title",
|
||||
"content": "Command Palette — Vault Commands",
|
||||
"fill": "#37352F",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_palette",
|
||||
"name": "Command Palette",
|
||||
"width": "fill_container",
|
||||
"height": "fit_content",
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": [8, 8, 8, 8],
|
||||
"stroke": "#E9E9E7",
|
||||
"strokeThickness": 1,
|
||||
"layout": "vertical",
|
||||
"padding": [0, 0, 0, 0],
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_search",
|
||||
"name": "Search Input",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 16, 0, 16],
|
||||
"children": [
|
||||
{ "type": "text", "id": "cmdk_search_text", "content": "vault", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 14 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_separator",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "#E9E9E7"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_group_header",
|
||||
"name": "Settings Group",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 12, 0, 12],
|
||||
"children": [
|
||||
{ "type": "text", "id": "group_label", "content": "Settings", "fill": "#B4B4B4", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_open_vault",
|
||||
"name": "Open Vault Command",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 12, 0, 12],
|
||||
"children": [
|
||||
{ "type": "text", "id": "cmd_open_vault", "content": "Open Vault…", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_remove_vault",
|
||||
"name": "Remove Vault Command (highlighted)",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"fill": "#E8F4FE",
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 12, 0, 12],
|
||||
"children": [
|
||||
{ "type": "text", "id": "cmd_remove_vault", "content": "Remove Vault from List", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmdk_restore_gs",
|
||||
"name": "Restore Getting Started Command",
|
||||
"width": "fill_container",
|
||||
"height": 36,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 12, 0, 12],
|
||||
"children": [
|
||||
{ "type": "text", "id": "cmd_restore_gs", "content": "Restore Getting Started Vault", "fill": "#37352F", "fontFamily": "Inter", "fontSize": 13 }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmdk_note",
|
||||
"content": "• 'Remove Vault from List' removes active vault (disabled if only 1 vault)\n• 'Restore Getting Started Vault' shown when GS vault is hidden\n• Both accessible via Cmd+K search with 'vault' keyword",
|
||||
"fill": "#787774",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11,
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
202
product-source/hololake-platform/design/zoom-shortcuts.pen
Normal file
202
product-source/hololake-platform/design/zoom-shortcuts.pen
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_normal",
|
||||
"name": "Zoom Shortcuts — StatusBar (100% / default)",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"theme": { "Mode": "Light" },
|
||||
"width": 800,
|
||||
"height": 32,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"gap": 0,
|
||||
"padding": [0, 12],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_normal_desc",
|
||||
"name": "description",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_normal_desc_text",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "StatusBar at 100% zoom — zoom indicator is HIDDEN. Cmd+= zooms in, Cmd+- zooms out, Cmd+0 resets to 100%.",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_zoomed",
|
||||
"name": "Zoom Shortcuts — StatusBar (150% / zoomed in)",
|
||||
"x": 0,
|
||||
"y": 60,
|
||||
"theme": { "Mode": "Light" },
|
||||
"width": 800,
|
||||
"height": 32,
|
||||
"fill": "$--background",
|
||||
"layout": "horizontal",
|
||||
"gap": 0,
|
||||
"padding": [0, 12],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_statusbar_zoomed",
|
||||
"name": "StatusBar — 150% (zoom indicator visible)",
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"padding": [0, 8],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_wordcount_z",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "1,247 words",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 11
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_zoom_badge",
|
||||
"name": "Zoom % Badge",
|
||||
"fill": "$--muted",
|
||||
"cornerRadius": 4,
|
||||
"padding": [2, 6],
|
||||
"alignItems": "center",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_zoom_label",
|
||||
"fill": "$--foreground",
|
||||
"content": "150%",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_cmd_palette",
|
||||
"name": "Zoom Shortcuts — Command Palette entries",
|
||||
"x": 0,
|
||||
"y": 120,
|
||||
"theme": { "Mode": "Light" },
|
||||
"width": 540,
|
||||
"height": 120,
|
||||
"fill": "$--popover",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_cmd_row1",
|
||||
"name": "Command — Zoom In (⌘=)",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 12],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"fill": "$--accent",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row1_label",
|
||||
"fill": "$--accent-foreground",
|
||||
"content": "Zoom In",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row1_shortcut",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Command+=",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_cmd_row2",
|
||||
"name": "Command — Zoom Out (⌘-)",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 12],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row2_label",
|
||||
"fill": "$--foreground",
|
||||
"content": "Zoom Out",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row2_shortcut",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Command+-",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "zs_cmd_row3",
|
||||
"name": "Command — Reset Zoom (⌘0)",
|
||||
"layout": "horizontal",
|
||||
"width": "fill_container",
|
||||
"padding": [8, 12],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row3_label",
|
||||
"fill": "$--foreground",
|
||||
"content": "Reset Zoom",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "zs_cmd_row3_shortcut",
|
||||
"fill": "$--muted-foreground",
|
||||
"content": "Command+0",
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
Loading…
Reference in a new issue