diff --git a/ui-design.pen b/ui-design.pen index 9244899a..3b5f6def 100644 --- a/ui-design.pen +++ b/ui-design.pen @@ -37108,6 +37108,825 @@ "fontSize": 10 } ] + }, + { + "children": [ + { + "content": "Tags Property — Display", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600", + "id": "HHQbx", + "letterSpacing": 0.5, + "name": "title1", + "type": "text" + }, + { + "alignItems": "center", + "children": [ + { + "content": "TAGS", + "fill": "$--muted-foreground", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "500", + "id": "9BDgi", + "letterSpacing": 1.2, + "name": "label1", + "type": "text" + }, + { + "alignItems": "center", + "children": [ + { + "alignItems": "center", + "children": [ + { + "content": "React", + "fill": "$--accent-blue", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500", + "id": "V1Dfn", + "name": "pillText1", + "type": "text" + }, + { + "content": "×", + "fill": "$--accent-blue", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "500", + "id": "urcjo", + "name": "pillX1", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-blue-light", + "gap": 4, + "id": "70AK4", + "name": "pill1", + "padding": [ + 2, + 8 + ], + "type": "frame" + }, + { + "alignItems": "center", + "children": [ + { + "content": "TypeScript", + "fill": "$--accent-green", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500", + "id": "VtpTf", + "name": "pillText2", + "type": "text" + }, + { + "content": "×", + "fill": "$--accent-green", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "500", + "id": "sw4gt", + "name": "pillX2", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-green-light", + "gap": 4, + "id": "rCHzS", + "name": "pill2", + "padding": [ + 2, + 8 + ], + "type": "frame" + }, + { + "alignItems": "center", + "children": [ + { + "content": "Tauri", + "fill": "$--accent-purple", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500", + "id": "OTVWd", + "name": "pillText3", + "type": "text" + }, + { + "content": "×", + "fill": "$--accent-purple", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "500", + "id": "j8w8E", + "name": "pillX3", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-purple-light", + "gap": 4, + "id": "U4Dfr", + "name": "pill3", + "padding": [ + 2, + 8 + ], + "type": "frame" + }, + { + "alignItems": "center", + "children": [ + { + "content": "+", + "fill": "$--accent-blue", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500", + "id": "BTPW1", + "name": "addPlus", + "type": "text" + } + ], + "cornerRadius": 10, + "height": 20, + "id": "2A0u4", + "justifyContent": "center", + "name": "addBtn", + "type": "frame", + "width": 20 + } + ], + "gap": 4, + "id": "wQwb9", + "name": "pillWrap", + "type": "frame" + } + ], + "gap": 8, + "id": "9vZUA", + "name": "row1", + "type": "frame", + "width": "fill_container" + } + ], + "cornerRadius": 8, + "fill": "$--background", + "gap": 12, + "id": "5Co69", + "layout": "vertical", + "name": "Tags Property — Display (pills with color + X)", + "padding": 16, + "type": "frame", + "width": 280, + "x": 0, + "y": 0 + }, + { + "children": [ + { + "content": "Tags Dropdown — Multi-Select", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600", + "id": "EYQrz", + "letterSpacing": 0.5, + "name": "title2", + "type": "text" + }, + { + "children": [ + { + "content": "Type a tag...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal", + "id": "K4O5T", + "name": "searchInput", + "type": "text" + } + ], + "id": "FiJYp", + "name": "searchBox", + "padding": [ + 8, + 12 + ], + "type": "frame", + "width": "fill_container" + }, + { + "children": [ + { + "content": "FROM VAULT", + "fill": "$--muted-foreground", + "fontFamily": "IBM Plex Mono", + "fontSize": 9, + "fontWeight": "500", + "id": "TTrI3", + "letterSpacing": 1.2, + "name": "secLabel1", + "type": "text" + }, + { + "alignItems": "center", + "children": [ + { + "content": "✓", + "fill": "$--accent-blue", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "id": "hvC9R", + "name": "check1", + "type": "text" + }, + { + "children": [ + { + "content": "REACT", + "fill": "$--accent-blue", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "id": "uafDO", + "letterSpacing": 1.2, + "name": "optPillText1", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-blue-light", + "id": "fSE56", + "name": "optPill1", + "padding": [ + 1, + 6 + ], + "type": "frame" + }, + { + "fill": "$--accent-blue", + "height": 14, + "id": "hm8BB", + "name": "optColor1", + "type": "ellipse", + "width": 14 + } + ], + "cornerRadius": 4, + "fill": "$--muted", + "gap": 6, + "id": "sEjJ4", + "name": "opt1", + "padding": [ + 6, + 8 + ], + "type": "frame", + "width": "fill_container" + }, + { + "alignItems": "center", + "children": [ + { + "content": "✓", + "fill": "$--accent-green", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "id": "xMjpj", + "name": "check2", + "type": "text" + }, + { + "children": [ + { + "content": "TYPESCRIPT", + "fill": "$--accent-green", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "id": "QkrlH", + "letterSpacing": 1.2, + "name": "optPillText2", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-green-light", + "id": "mFD4b", + "name": "optPill2", + "padding": [ + 1, + 6 + ], + "type": "frame" + }, + { + "fill": "$--accent-green", + "height": 14, + "id": "IeC8h", + "name": "optColor2", + "type": "ellipse", + "width": 14 + } + ], + "cornerRadius": 4, + "gap": 6, + "id": "jTW08", + "name": "opt2", + "padding": [ + 6, + 8 + ], + "type": "frame", + "width": "fill_container" + }, + { + "alignItems": "center", + "children": [ + { + "height": 14, + "id": "VWb7I", + "name": "spacer3", + "type": "frame", + "width": 14 + }, + { + "children": [ + { + "content": "VITE", + "fill": "$--accent-orange", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "id": "IBEpk", + "letterSpacing": 1.2, + "name": "optPillText3", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-orange-light", + "id": "juYuA", + "name": "optPill3", + "padding": [ + 1, + 6 + ], + "type": "frame" + }, + { + "fill": "$--accent-orange", + "height": 14, + "id": "aTF8b", + "name": "optColor3", + "type": "ellipse", + "width": 14 + } + ], + "cornerRadius": 4, + "gap": 6, + "id": "byNKM", + "name": "opt3", + "padding": [ + 6, + 8 + ], + "type": "frame", + "width": "fill_container" + }, + { + "fill": "$--border", + "height": 1, + "id": "5sC2Y", + "name": "divider", + "type": "rectangle", + "width": "fill_container" + }, + { + "content": "SUGGESTED", + "fill": "$--muted-foreground", + "fontFamily": "IBM Plex Mono", + "fontSize": 9, + "fontWeight": "500", + "id": "7vME3", + "letterSpacing": 1.2, + "name": "secLabel2", + "type": "text" + } + ], + "id": "KsIE1", + "layout": "vertical", + "name": "listArea", + "padding": [ + 4, + 0 + ], + "type": "frame", + "width": "fill_container" + } + ], + "cornerRadius": 8, + "fill": "$--background", + "id": "aWUZr", + "layout": "vertical", + "name": "Tags Property — Input (entering new tag)", + "type": "frame", + "width": 220, + "x": 320, + "y": 0 + }, + { + "children": [ + { + "content": "Color Picker — Per Tag", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600", + "id": "eUqcb", + "letterSpacing": 0.5, + "name": "title3", + "type": "text" + }, + { + "content": "Click the color swatch next to any tag to expand the color picker row", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "id": "9JSxa", + "name": "desc3", + "type": "text" + }, + { + "alignItems": "center", + "children": [ + { + "content": "✓", + "fill": "$--accent-purple", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "id": "8P4r5", + "name": "optCheck", + "type": "text" + }, + { + "children": [ + { + "content": "TAURI", + "fill": "$--accent-purple", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "id": "u9Ljh", + "letterSpacing": 1.2, + "name": "optPillTxt", + "type": "text" + } + ], + "cornerRadius": 12, + "fill": "$--accent-purple-light", + "id": "KLwLI", + "name": "optPill", + "padding": [ + 1, + 6 + ], + "type": "frame" + }, + { + "fill": "$--accent-purple", + "height": 14, + "id": "XMIpZ", + "name": "optSwatch", + "type": "ellipse", + "width": 14 + } + ], + "cornerRadius": 4, + "fill": "$--muted", + "gap": 6, + "id": "osSzq", + "name": "optRow", + "padding": [ + 6, + 4 + ], + "type": "frame", + "width": "fill_container" + }, + { + "alignItems": "center", + "children": [ + { + "fill": "$--accent-red", + "height": 16, + "id": "4lhx5", + "name": "c1", + "type": "ellipse", + "width": 16 + }, + { + "fill": "$--accent-orange", + "height": 16, + "id": "aa0VW", + "name": "c2", + "type": "ellipse", + "width": 16 + }, + { + "fill": "$--accent-yellow", + "height": 16, + "id": "Vdkb2", + "name": "c3", + "type": "ellipse", + "width": 16 + }, + { + "fill": "$--accent-green", + "height": 16, + "id": "nb62h", + "name": "c4", + "type": "ellipse", + "width": 16 + }, + { + "fill": "$--accent-blue", + "height": 16, + "id": "lFU1J", + "name": "c5", + "type": "ellipse", + "width": 16 + }, + { + "fill": "$--accent-purple", + "height": 16, + "id": "d7Vkz", + "name": "c6", + "type": "ellipse", + "width": 16 + } + ], + "gap": 6, + "id": "aHm6t", + "name": "colorRow", + "padding": [ + 8, + 12 + ], + "type": "frame" + } + ], + "cornerRadius": 8, + "fill": "$--background", + "id": "SBYSL", + "layout": "vertical", + "name": "Tags Property — Color Picker (selecting tag color)", + "padding": 12, + "type": "frame", + "width": 220, + "x": 580, + "y": 0 + }, + { + "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 + } + ] + } + ] } ], "themes": { @@ -37984,6 +38803,10 @@ "--white-overlay": { "type": "color", "value": "#ffffff40" + }, + "--accent-orange-light": { + "type": "color", + "value": "#D9730D14" } }, "fonts": [