diff --git a/ui-design.pen b/ui-design.pen index 554dc0a8..64349b32 100644 --- a/ui-design.pen +++ b/ui-design.pen @@ -17614,6 +17614,1066 @@ ] } ] + }, + { + "type": "frame", + "id": "reF01", + "x": 0, + "y": 0, + "name": "Relations Edit — Default (hover to reveal remove)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 320, + "height": 520, + "fill": "$--background", + "layout": "vertical", + "gap": 16, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "reF01h", + "name": "Inspector Header", + "width": "fill_container", + "height": 36, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "reF01hL", + "name": "leftGroup", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF01hI", + "width": 16, + "height": 16, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF01hT", + "fill": "$--muted-foreground", + "content": "Properties", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "icon_font", + "id": "reF01hX", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "reF01rel", + "name": "Relationships Section", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "reF01relG1", + "name": "relGroup — Belongs to", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF01relG1T", + "fill": "$--muted-foreground", + "content": "BELONGS TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF01relG1B1", + "name": "relPill1", + "width": "fill_container", + "fill": "$--accent-blue-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF01relG1B1T", + "fill": "$--accent-blue", + "content": "Grow Newsletter", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF01relG1B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF01relG1B1X", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue", + "annotation": "visible on hover" + }, + { + "type": "icon_font", + "id": "reF01relG1B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "target", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF01relG1Add", + "name": "addBtn", + "gap": 4, + "alignItems": "center", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "icon_font", + "id": "reF01relG1AddI", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF01relG1AddT", + "fill": "$--muted-foreground", + "content": "Add", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF01relG2", + "name": "relGroup — Related to", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF01relG2T", + "fill": "$--muted-foreground", + "content": "RELATED TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF01relG2B1", + "name": "relPill2", + "width": "fill_container", + "fill": "$--accent-purple-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF01relG2B1T", + "fill": "$--accent-purple", + "content": "On Writing Well", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF01relG2B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF01relG2B1X", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple", + "annotation": "visible on hover" + }, + { + "type": "icon_font", + "id": "reF01relG2B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF01relG2B2", + "name": "relPill3", + "width": "fill_container", + "fill": "$--accent-red-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF01relG2B2T", + "fill": "$--accent-red", + "content": "Failed SEO Experiment", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF01relG2B2R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF01relG2B2X", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--accent-red", + "annotation": "visible on hover" + }, + { + "type": "icon_font", + "id": "reF01relG2B2I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "flask", + "iconFontFamily": "phosphor", + "fill": "$--accent-red" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF01relG2Add", + "name": "addBtn", + "gap": 4, + "alignItems": "center", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "icon_font", + "id": "reF01relG2AddI", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF01relG2AddT", + "fill": "$--muted-foreground", + "content": "Add", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF02", + "x": 360, + "y": 0, + "name": "Relations Edit — Hover on pill (X remove visible)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 320, + "height": 520, + "fill": "$--background", + "layout": "vertical", + "gap": 16, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "reF02h", + "name": "Inspector Header", + "width": "fill_container", + "height": 36, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "reF02hL", + "name": "leftGroup", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF02hI", + "width": 16, + "height": 16, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF02hT", + "fill": "$--muted-foreground", + "content": "Properties", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "icon_font", + "id": "reF02hX", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "reF02rel", + "name": "Relationships Section", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "reF02relG1", + "name": "relGroup — Belongs to", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF02relG1T", + "fill": "$--muted-foreground", + "content": "BELONGS TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF02relG1B1", + "name": "relPill1 — hovered", + "width": "fill_container", + "fill": "$--accent-blue-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--accent-blue", + "opacity": 0.3 + }, + "annotation": "pill is hovered — X button fully visible", + "children": [ + { + "type": "text", + "id": "reF02relG1B1T", + "fill": "$--accent-blue", + "content": "Grow Newsletter", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF02relG1B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF02relG1B1X", + "width": 14, + "height": 14, + "opacity": 1, + "iconFontName": "x-circle", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue", + "annotation": "X remove — fully visible on hover" + }, + { + "type": "icon_font", + "id": "reF02relG1B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "target", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF02relG1Add", + "name": "addBtn", + "gap": 4, + "alignItems": "center", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "icon_font", + "id": "reF02relG1AddI", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF02relG1AddT", + "fill": "$--muted-foreground", + "content": "Add", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF02relG2", + "name": "relGroup — Related to", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF02relG2T", + "fill": "$--muted-foreground", + "content": "RELATED TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF02relG2B1", + "name": "relPill2", + "width": "fill_container", + "fill": "$--accent-purple-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF02relG2B1T", + "fill": "$--accent-purple", + "content": "On Writing Well", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF02relG2B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF02relG2B1X", + "width": 14, + "height": 14, + "opacity": 0, + "iconFontName": "x-circle", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple", + "annotation": "hidden — not hovered" + }, + { + "type": "icon_font", + "id": "reF02relG2B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF02relG2Add", + "name": "addBtn", + "gap": 4, + "alignItems": "center", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "icon_font", + "id": "reF02relG2AddI", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF02relG2AddT", + "fill": "$--muted-foreground", + "content": "Add", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF03", + "x": 720, + "y": 0, + "name": "Relations Edit — Add expanded with autocomplete", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 320, + "height": 620, + "fill": "$--background", + "layout": "vertical", + "gap": 16, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "reF03h", + "name": "Inspector Header", + "width": "fill_container", + "height": 36, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "reF03hL", + "name": "leftGroup", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03hI", + "width": 16, + "height": 16, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF03hT", + "fill": "$--muted-foreground", + "content": "Properties", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "icon_font", + "id": "reF03hX", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "reF03rel", + "name": "Relationships Section", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "reF03relG1", + "name": "relGroup — Belongs to (add expanded)", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF03relG1T", + "fill": "$--muted-foreground", + "content": "BELONGS TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF03relG1B1", + "name": "relPill1", + "width": "fill_container", + "fill": "$--accent-blue-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF03relG1B1T", + "fill": "$--accent-blue", + "content": "Grow Newsletter", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF03relG1B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG1B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "target", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF03relG1Input", + "name": "addInputWrapper", + "width": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "reF03relG1InputF", + "name": "textInputField", + "width": "fill_container", + "height": 32, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--primary" + }, + "padding": [ + 6, + 10 + ], + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "icon_font", + "id": "reF03relG1InputSI", + "width": 14, + "height": 14, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF03relG1InputTV", + "fill": "$--foreground", + "content": "Eng", + "fontFamily": "Inter", + "fontSize": 12 + }, + { + "type": "frame", + "id": "reF03relG1InputCursor", + "name": "textCursor", + "width": 1, + "height": 14, + "fill": "$--primary" + } + ] + }, + { + "type": "frame", + "id": "reF03relG1Drop", + "name": "autocompleteDropdown", + "width": "fill_container", + "fill": "$--popover", + "cornerRadius": 6, + "stroke": { + "align": "outside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "frame", + "id": "reF03relG1DropI1", + "name": "suggestion1 — highlighted", + "width": "fill_container", + "fill": "$--accent", + "cornerRadius": 4, + "padding": [ + 6, + 10 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG1DropI1I", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "reF03relG1DropI1T", + "fill": "$--foreground", + "content": "Engineering Leadership 101", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "reF03relG1DropI2", + "name": "suggestion2", + "width": "fill_container", + "padding": [ + 6, + 10 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG1DropI2I", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "reF03relG1DropI2T", + "fill": "$--foreground", + "content": "Engineering Metrics", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "reF03relG1DropI3", + "name": "suggestion3", + "width": "fill_container", + "padding": [ + 6, + 10 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG1DropI3I", + "width": 14, + "height": 14, + "iconFontName": "target", + "iconFontFamily": "phosphor", + "fill": "$--accent-blue" + }, + { + "type": "text", + "id": "reF03relG1DropI3T", + "fill": "$--foreground", + "content": "English Writing Course", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "reF03relG1DropI4", + "name": "suggestion4", + "width": "fill_container", + "padding": [ + 6, + 10 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG1DropI4I", + "width": 14, + "height": 14, + "iconFontName": "flask", + "iconFontFamily": "phosphor", + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "reF03relG1DropI4T", + "fill": "$--foreground", + "content": "Engine Performance Tests", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF03relG2", + "name": "relGroup — Related to", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "reF03relG2T", + "fill": "$--muted-foreground", + "content": "RELATED TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "reF03relG2B1", + "name": "relPill2", + "width": "fill_container", + "fill": "$--accent-purple-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "reF03relG2B1T", + "fill": "$--accent-purple", + "content": "On Writing Well", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "reF03relG2B1R", + "name": "rightIcons", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "reF03relG2B1I", + "width": 14, + "height": 14, + "opacity": 0.5, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "fill": "$--accent-purple" + } + ] + } + ] + }, + { + "type": "frame", + "id": "reF03relG2Add", + "name": "addBtn", + "gap": 4, + "alignItems": "center", + "padding": [ + 4, + 0 + ], + "children": [ + { + "type": "icon_font", + "id": "reF03relG2AddI", + "width": 14, + "height": 14, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "reF03relG2AddT", + "fill": "$--muted-foreground", + "content": "Add", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] } ], "themes": {