diff --git a/design/autocomplete-flat-list.pen b/design/autocomplete-flat-list.pen new file mode 100644 index 00000000..8c37ffd1 --- /dev/null +++ b/design/autocomplete-flat-list.pen @@ -0,0 +1,247 @@ +{ + "children": [ + { + "type": "frame", + "id": "acFlatList", + "x": 0, + "y": 0, + "name": "Autocomplete — Flat List with Type Badge", + "clip": true, + "width": 400, + "height": 380, + "fill": "#FFFFFF", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "acHeader", + "name": "Context: Editor line with [[query", + "width": "fill_container", + "height": 40, + "fill": "#FAFAFA", + "padding": [10, 16], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "acQueryLine", + "content": "Working on [[proj", + "fontSize": 15, + "fill": "#1a1a1a" + } + ] + }, + { + "type": "frame", + "id": "acMenu", + "name": "Suggestion Menu (flat, no group headers)", + "width": 320, + "fill": "#FFFFFF", + "layout": "vertical", + "gap": 0, + "padding": 4, + "cornerRadius": 6, + "stroke": { + "align": "outside", + "thickness": 1, + "fill": "rgba(0,0,0,0.1)" + }, + "children": [ + { + "type": "frame", + "id": "acItem1", + "name": "Item: Build Laputa (Project)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "fill": "rgba(21,93,255,0.08)", + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle1", + "content": "Build Laputa", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + }, + { + "type": "text", + "id": "acType1", + "content": "Project", + "fontSize": 11, + "fontWeight": "500", + "fill": "var(--accent-red, #E53935)", + "opacity": 0.8 + } + ] + }, + { + "type": "frame", + "id": "acItem2", + "name": "Item: Project Planning (Responsibility)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle2", + "content": "Project Planning", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + }, + { + "type": "text", + "id": "acType2", + "content": "Responsibility", + "fontSize": 11, + "fontWeight": "500", + "fill": "var(--accent-purple, #7B1FA2)", + "opacity": 0.8 + } + ] + }, + { + "type": "frame", + "id": "acItem3", + "name": "Item: Q1 Project Review (no type = Note)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle3", + "content": "Q1 Project Review", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + } + ] + }, + { + "type": "frame", + "id": "acItem4", + "name": "Item: Project Kickoff (Event)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle4", + "content": "Project Kickoff", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + }, + { + "type": "text", + "id": "acType4", + "content": "Event", + "fontSize": 11, + "fontWeight": "500", + "fill": "var(--accent-yellow, #F9A825)", + "opacity": 0.8 + } + ] + }, + { + "type": "frame", + "id": "acItem5", + "name": "Item: Side Project Ideas (Topic)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle5", + "content": "Side Project Ideas", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + }, + { + "type": "text", + "id": "acType5", + "content": "Topic", + "fontSize": 11, + "fontWeight": "500", + "fill": "var(--accent-green, #43A047)", + "opacity": 0.8 + } + ] + }, + { + "type": "frame", + "id": "acItem6", + "name": "Item: Project Retrospective (no type)", + "width": "fill_container", + "height": 32, + "padding": [6, 10], + "cornerRadius": 4, + "alignItems": "center", + "justifyContent": "space-between", + "children": [ + { + "type": "text", + "id": "acTitle6", + "content": "Project Retrospective", + "fontSize": 13, + "fill": "#1a1a1a", + "fontWeight": "400" + } + ] + } + ] + }, + { + "type": "frame", + "id": "acAnnotation", + "name": "Design Notes", + "width": "fill_container", + "padding": [12, 16], + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "acNote1", + "content": "Key changes from previous design:", + "fontSize": 12, + "fontWeight": "600", + "fill": "#666" + }, + { + "type": "text", + "id": "acNote2", + "content": "• Flat list — no group headers for type sections\n• Sorted by match relevance (fuzzy score)\n• Type badge on right with accent color\n• No badge for untyped notes (\"Note\")\n• Max 10 results visible\n• Long type names truncated with ellipsis", + "fontSize": 11, + "fill": "#999", + "lineHeight": 1.6 + } + ] + } + ] + } + ], + "variables": {} +}