{ "version": "2.8", "children": [ { "type": "frame", "id": "qHhaj", "x": 68, "y": 3385, "name": "Laputa App — Full Layout (Light)", "theme": { "Mode": "Light" }, "clip": true, "width": 1440, "height": 900, "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "yVQFF", "name": "macOS Title Bar", "width": "fill_container", "height": 38, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "0MCME", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "c2AU6", "name": "closeBtn", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "h0zbh", "name": "minimizeBtn", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "tcqbu", "name": "maximizeBtn", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "oHDfa", "name": "Content", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "ZTOSJ", "name": "Panel: Sidebar", "clip": true, "width": 250, "height": "fill_container", "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": 0, "fill": "$--sidebar-border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "4wMva", "name": "Filters", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 1, "padding": [ 8, 8, 16, 8 ], "children": [ { "type": "frame", "id": "Q78hg", "name": "filterAll", "width": "fill_container", "fill": "#4a9eff18", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "5ip58", "name": "leftAll", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "PXpWi", "name": "iconAll", "width": 18, "height": 18, "iconFontName": "tray-fill", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--primary" }, { "type": "text", "id": "NWprl", "name": "fAllTxt", "fill": "$--primary", "content": "Untagged", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "NZ9Dv", "name": "countAll", "height": 20, "fill": "$--primary", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "mPlUV", "name": "badgeAllTxt", "fill": "$--primary-foreground", "content": "24", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "YLWsY", "name": "filterUntagged", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "k7LIr", "name": "leftUntagged", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "FMVlh", "name": "untaggedIcon", "width": 18, "height": 18, "iconFontName": "cardholder", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "5XllD", "name": "untaggedTxt", "fill": "$--foreground", "content": "All Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "aSpGv", "name": "countUntagged", "height": 20, "fill": "$--secondary", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "qZUFt", "name": "untaggedBadgeTxt", "fill": "$--muted-foreground", "content": "6", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "Jahon", "name": "filterTrash", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "IOiBI", "name": "leftTrash", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "X6F74", "name": "trashIcon", "width": 18, "height": 18, "iconFontName": "trash", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "vRMH9", "name": "trashTxt", "fill": "$--foreground", "content": "Archive", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "JMpkq", "name": "countTrash", "height": 20, "fill": "$--secondary", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "0cKm4", "name": "trashBadgeTxt", "fill": "$--muted-foreground", "content": "2", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "6RMbq", "name": "filterChanges", "width": "fill_container", "cornerRadius": 6, "gap": 6, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "DpdBu", "name": "leftChanges", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "VTusA", "name": "iconChanges", "width": 18, "height": 18, "iconFontName": "git-branch", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "qvq5O", "name": "fChangesTxt", "fill": "$--foreground", "content": "Changes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "qAMES", "name": "countChanges", "height": 20, "fill": "$--secondary", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "nkzVk", "name": "badgeChangesTxt", "fill": "$--muted-foreground", "content": "3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "SSEUP", "name": "Sections", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [ 8, 0 ], "children": [ { "type": "frame", "id": "nM2Cn", "name": "projGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6, 8, 6 ], "children": [ { "type": "frame", "id": "ouIl9", "name": "projHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "Rx1Cp", "name": "leftProj", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "t5WJJ", "name": "projIcon", "width": 18, "height": 18, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-red" }, { "type": "text", "id": "S3sGC", "name": "projLabel", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "FKwSS", "name": "projChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "IHzFh", "name": "projItem1", "width": "fill_container", "fill": "$--accent-red-light", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "iiFcl", "name": "proj1Txt", "fill": "$--accent-red", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "LdaU9", "name": "projItem2", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "XRll4", "name": "proj2Txt", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Vmykd", "name": "projItem3", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "0PqQQ", "name": "proj3Txt", "fill": "$--muted-foreground", "content": "AI Habit Tracker", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "WAQtn", "name": "respGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "aSi3l", "name": "respHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "lov6B", "name": "leftResp", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "Em4ns", "name": "respIcon", "width": 18, "height": 18, "iconFontName": "medal", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "WPRCo", "name": "respLabel", "fill": "$--foreground", "content": "Responsibilities", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "6hDdQ", "name": "respChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "FmUu0", "name": "procGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "Dat6o", "name": "respHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "iJlgx", "name": "leftResp", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "I2J1R", "name": "respIcon", "width": 18, "height": 18, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "AToF0", "name": "Procedures", "fill": "$--foreground", "content": "Procedures", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "meEIL", "name": "procChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "T4NG2", "name": "peopleGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "Q01iL", "name": "peopleHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "eE6Ca", "name": "leftPeople", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "jOmVa", "name": "peopleIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "caelD", "name": "peopleLbl", "fill": "$--foreground", "content": "People", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "TkuS1", "name": "peopleChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "BY1Qx", "name": "eventsGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "v28d8", "name": "eventsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "TPyOc", "name": "leftEvents", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "ELRMi", "name": "eventsIcon", "width": 18, "height": 18, "iconFontName": "calendar-blank", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "OlI6Q", "name": "eventsLbl", "fill": "$--foreground", "content": "Events", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "TZwK8", "name": "eventsChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "trKNW", "name": "topicsGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "qdbZ3", "name": "eventsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "JP83M", "name": "leftEvents", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "Q57kF", "name": "eventsIcon", "width": 18, "height": 18, "iconFontName": "tag", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-green" }, { "type": "text", "id": "DeVxP", "name": "eventsLbl", "fill": "$--foreground", "content": "Topics", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "nzAcm", "name": "topicsChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ZWXuk", "name": "topicsGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "CQaLg", "name": "eventsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "2SMcN", "name": "leftEvents", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "0N8UH", "name": "eventsIcon", "width": 18, "height": 18, "iconFontName": "leaf", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-green" }, { "type": "text", "id": "6XB2H", "name": "eventsLbl", "fill": "$--foreground", "content": "Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "NmBSB", "name": "topicsChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "2cQBp", "name": "eventsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "0f10v", "name": "leftEvents", "gap": 8, "padding": [ 8, 0 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "xBv1X", "name": "eventsIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--muted-foreground" }, { "type": "text", "id": "viWPL", "name": "eventsLbl", "fill": "$--muted-foreground", "content": "Create new type", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] } ] } ] } ] }, { "type": "frame", "id": "8lLHp", "name": "Commit Area", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "layout": "vertical", "padding": 12, "children": [ { "type": "frame", "id": "YYjuy", "name": "commitBtn", "width": "fill_container", "fill": "$--primary", "cornerRadius": 6, "gap": 6, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "YF44G", "name": "commitIcon", "width": 14, "height": 14, "iconFontName": "git-commit-horizontal", "iconFontFamily": "lucide", "fill": "$--primary-foreground" }, { "type": "text", "id": "vpzJm", "name": "commitTxt", "fill": "$--primary-foreground", "content": "Commit & Push", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "frame", "id": "vhU5z", "name": "commitBadge", "height": 18, "fill": "#ffffff40", "cornerRadius": 9, "padding": [ 0, 5 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "sdvYT", "name": "commitBadgeTxt", "fill": "$--white", "content": "3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] } ] } ] }, { "type": "rectangle", "id": "IIvWr", "name": "Resize Handle", "fill": "$--border", "width": 1, "height": "fill_container" }, { "type": "frame", "id": "zFIJv", "name": "Panel: NoteList", "clip": true, "width": 300, "height": "fill_container", "fill": "$--card", "stroke": { "align": "inside", "thickness": 0, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "uZJVN", "name": "NoteList Header", "width": "fill_container", "height": 45, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "hmbdb", "name": "nlTitle", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "frame", "id": "m6AeW", "name": "nlActions", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "8gMXE", "name": "searchIcon", "width": 16, "height": 16, "iconFontName": "magnifying-glass", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "YqvSN", "name": "plusIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "0aJUm", "name": "Note Items", "clip": true, "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "y9y05", "name": "Backlinks Group", "width": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "tMsM4", "name": "Note Item Selected", "width": "fill_container", "fill": "$--accent-red-light", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "#E9E9E7" }, "children": [ { "type": "rectangle", "id": "npYuc", "name": "leftAccent", "fill": "$--accent-red", "width": 3, "height": "fill_container" }, { "type": "frame", "id": "a33Wx", "name": "noteSelContent", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "AZkyx", "name": "noteSelRow", "width": "fill_container", "gap": 8, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "j7GDJ", "name": "titleGroup", "width": "fill_container", "gap": 6, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "j7o2Q", "name": "noteSelTitle", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "icon_font", "id": "BnkTG", "name": "ico", "width": 14, "height": 14, "iconFontName": "wrench", "iconFontFamily": "lucide", "fill": "$--accent-red" } ] } ] }, { "type": "text", "id": "Ac5Ds", "name": "noteSelSnip", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Personal knowledge and life management desktop app...", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "9ASsT", "name": "noteSelTime", "fill": "$--accent-red", "content": "2m ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "7G8pN", "name": "Related Notes Group", "width": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "fDxtF", "name": "Related Notes Header", "width": "fill_container", "height": 32, "fill": "$--muted", "padding": [ 0, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "UBRdO", "name": "rnLeft", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "8Z4Wq", "name": "rnLabel", "fill": "$--muted-foreground", "content": "RELATED NOTES", "fontFamily": "IBM Plex Mono", "fontSize": 11 }, { "type": "text", "id": "vpnZr", "name": "rnCount", "fill": "$--muted-foreground", "content": "2", "fontFamily": "IBM Plex Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "X9LIR", "name": "rnRight", "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", "id": "fzVWu", "name": "rnFilter", "width": 12, "height": 12, "iconFontName": "funnel", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "wuqsO", "name": "rnPlus", "width": 12, "height": 12, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "SbjLq", "name": "rnChev", "width": 12, "height": 12, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "AsAKG", "name": "Note Item", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "QX5A1", "name": "note2Row", "width": "fill_container", "gap": 8, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "rYdta", "name": "leafGroup", "width": "fill_container", "gap": 6, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "PC9XN", "name": "note2Title", "fill": "$--foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "icon_font", "id": "oI64Y", "name": "leafIco", "width": 14, "height": 14, "iconFontName": "leaf", "iconFontFamily": "phosphor", "fill": "$--accent-green" } ] } ] }, { "type": "text", "id": "S9JPj", "name": "note2Snip", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Redesigning portfolio site with modern stack and updated visual language...", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "lU75x", "name": "note2Time", "fill": "$--muted-foreground", "content": "1h ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "u6E6Z", "name": "Note Item", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "ZjCz3", "name": "note2Row", "width": "fill_container", "gap": 8, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "mxCzu", "name": "leafGroup", "width": "fill_container", "gap": 6, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "INenY", "name": "note2Title", "fill": "$--foreground", "content": "Sample note 2", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "icon_font", "id": "gz6qS", "name": "leafIco", "width": 14, "height": 14, "iconFontName": "leaf", "iconFontFamily": "phosphor", "fill": "$--accent-green" } ] } ] }, { "type": "text", "id": "s141z", "name": "note2Snip", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Lorem ipsum dolor sit amet consequetur with modern stack and updated language...", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "SvGnt", "name": "note2Time", "fill": "$--muted-foreground", "content": "1h ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "1GwHB", "name": "Events Group", "width": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "fp4xI", "name": "Events Header", "width": "fill_container", "height": 32, "fill": "$--muted", "padding": [ 0, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "MNNuU", "name": "evLeft", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "BNxZp", "name": "evLabel", "fill": "$--muted-foreground", "content": "EVENTS", "fontFamily": "IBM Plex Mono", "fontSize": 11 }, { "type": "text", "id": "qcEvw", "name": "evCount", "fill": "$--muted-foreground", "content": "2", "fontFamily": "IBM Plex Sans", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "WCyfc", "name": "evRight", "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", "id": "SpCoO", "name": "evFilter", "width": 12, "height": 12, "iconFontName": "funnel", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "G1DCl", "name": "evPlus", "width": 12, "height": 12, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "sAalN", "name": "evChev", "width": 12, "height": 12, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "k7CjA", "name": "Note Item 2", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "og5Gz", "name": "note3Row", "width": "fill_container", "gap": 8, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "ttBdk", "name": "calGroup", "width": "fill_container", "gap": 6, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "KI8Bf", "name": "note3Title", "fill": "$--foreground", "content": "Meeting with Grant", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "icon_font", "id": "LdRjU", "name": "calIco", "width": 14, "height": 14, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$--accent-yellow" } ] } ] }, { "type": "text", "id": "FfPXa", "name": "note3Snip", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Discussed Q1 goals and hiring priorities with the engineering team leads...", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "BHh4Z", "name": "note3Time", "fill": "$--muted-foreground", "content": "Yesterday", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "AQ51u", "name": "Note Item 2", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "SHgK3", "name": "note3Row", "width": "fill_container", "gap": 8, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "3rIet", "name": "calGroup", "width": "fill_container", "gap": 6, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "dCwzu", "name": "note3Title", "fill": "$--foreground", "content": "Meeting with Matteo", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "icon_font", "id": "l8O2I", "name": "calIco", "width": 14, "height": 14, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$--accent-yellow" } ] } ] }, { "type": "text", "id": "1L4oo", "name": "note3Snip", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Discussed Q1 goals and hiring priorities with the engineering team leads...", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "3oBam", "name": "note3Time", "fill": "$--muted-foreground", "content": "Yesterday", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "rectangle", "id": "MeqjO", "name": "Resize Handle 2", "fill": "$--border", "width": 1, "height": "fill_container" }, { "type": "frame", "id": "zAbPt", "name": "Panel: Editor", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "NdYcO", "name": "Tab Bar", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "nVUGr", "name": "Tab Active", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "kBpGX", "name": "tab1Txt", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "Bb2AE", "name": "tab1Close", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "GYeyL", "name": "Tab Inactive", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "kZ1bn", "name": "tab2Txt", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "RwyYI", "name": "tab2Close", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "sbpmq", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "WF97k", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "rfSoS", "name": "iconPlus", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "t0u6z", "name": "iconSplit", "width": 16, "height": 16, "iconFontName": "columns", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "kbe1P", "name": "iconExpand", "width": 16, "height": 16, "iconFontName": "arrows-out-simple", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "rTdKS", "name": "Editor Body", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "NfyTF", "name": "Editor Left", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "hvoFh", "name": "Info Bar", "width": "fill_container", "height": 45, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "bTP0I", "name": "infoLeft", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "Msj7v", "name": "breadcrumbType", "fill": "$--muted-foreground", "content": "Project", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "wqdMG", "name": "breadcrumbSep", "fill": "$--muted-foreground", "content": "›", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "FzENd", "name": "breadcrumbName", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "pvTmc", "name": "dotSep", "fill": "$--muted-foreground", "content": "·", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "9ga1R", "name": "modifiedTxt", "fill": "$--accent-yellow", "content": "M", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "3bzDp", "name": "infoRight", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "9Ctb0", "name": "iconSearch", "width": 16, "height": 16, "iconFontName": "magnifying-glass", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "csHzz", "name": "iconSearch", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "2s6Of", "name": "iconSearch", "width": 16, "height": 16, "iconFontName": "cursor-text", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "JVSlj", "name": "iconAI", "width": 16, "height": 16, "iconFontName": "sparkle", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "k3AiV", "name": "iconMore", "width": 16, "height": 16, "iconFontName": "dots-three", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "vvETz", "name": "Editor Content", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 16, "padding": [ 32, 64 ], "children": [ { "type": "text", "id": "b6up3", "name": "editorP1", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Personal knowledge and life management desktop app, built with Tauri v2 + React + TypeScript + CodeMirror 6. It reads a vault of markdown files with YAML frontmatter and presents them in a four-panel UI inspired by Bear Notes.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "text", "id": "a2S43", "name": "editorH2", "fill": "$--foreground", "content": "Architecture", "lineHeight": 1.3, "fontFamily": "Inter", "fontSize": 24, "fontWeight": "600" }, { "type": "text", "id": "wgvQa", "name": "editorP2", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "The app uses a four-panel layout: Sidebar for navigation, NoteList for browsing, Editor for content, and Inspector for metadata. All data lives in markdown files with YAML frontmatter, git-versioned.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "GGP97", "name": "Inspector", "clip": true, "width": 260, "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "left": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "FbHy7", "name": "Inspector Header", "width": "fill_container", "height": 45, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "gap": 8, "padding": [ 0, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "sA7Dx", "name": "leftGroup", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "0ccF1", "name": "propIcon", "width": 16, "height": 16, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "text", "id": "T2vTZ", "name": "inspTitle", "fill": "$--muted-foreground", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "icon_font", "id": "NQOhZ", "name": "sidebarIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "LYFki", "name": "Inspector Body", "clip": true, "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 16, "padding": 12, "children": [ { "type": "frame", "id": "8g61y", "name": "Properties Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "frame", "id": "VhH4P", "name": "addPropBtn", "width": "fill_container", "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 6, 12 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "Q9z8F", "name": "addPropTxt", "fill": "$--muted-foreground", "content": "+ Add property", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "6PwTH", "name": "propType", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "Vt2BC", "name": "propTypeLbl", "fill": "$--muted-foreground", "content": "TYPE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "normal" }, { "type": "text", "id": "uvBiY", "name": "propTypeVal", "fill": "$--foreground", "content": "Project", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "FDbay", "name": "propStatus", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "e426F", "name": "propStatusLbl", "fill": "$--muted-foreground", "content": "STATUS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "normal" }, { "type": "frame", "id": "o2rZM", "name": "propStatusBadge", "fill": "$--accent-green-light", "cornerRadius": 16, "stroke": { "align": "inside", "thickness": 1, "fill": "transparent" }, "gap": 8, "padding": [ 1, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "QM7L3", "name": "Badge Text", "fill": "$--accent-green", "content": "ACTIVE", "lineHeight": 1.33, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1.2 } ] } ] } ] }, { "type": "frame", "id": "NmRLv", "name": "Relationships Section", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "frame", "id": "WFVAr", "name": "relGroup1", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "0N729", "name": "relGrp1Title", "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "frame", "id": "zLl8F", "name": "relLaputaBtn", "width": "fill_container", "fill": "$--accent-green-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "kw9vC", "name": "laputaTxt", "fill": "$--accent-green", "content": "Laputa", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "RFvoz", "name": "topicIcon", "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "tag", "iconFontFamily": "phosphor", "fill": "$--accent-green" } ] }, { "type": "frame", "id": "ybi8Q", "name": "relLaputaBtn", "width": "fill_container", "fill": "$--accent-green-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "VNcmt", "name": "laputaTxt", "fill": "$--accent-green", "content": "Building", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "UVPwc", "name": "topicIcon", "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "tag", "iconFontFamily": "phosphor", "fill": "$--accent-green" } ] }, { "type": "frame", "id": "L6knW", "name": "linkExisting", "width": "fill_container", "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "jwU3Z", "name": "laputaTxt", "fill": "$--muted-foreground", "content": "+ Link existing", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "laPFL", "name": "relGroup2", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "LOXUL", "name": "relGrp2Title", "fill": "$--muted-foreground", "content": "RELATED TO", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "frame", "id": "qLTYD", "name": "relMigrationBtn", "width": "fill_container", "fill": "$--accent-red-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "GBk2u", "name": "migrationTxt", "fill": "$--accent-red", "content": "Shadcn Migration", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "Sy14T", "name": "expIcon", "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] }, { "type": "frame", "id": "u8ijV", "name": "linkExisting", "width": "fill_container", "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "PUXx5", "name": "laputaTxt", "fill": "$--muted-foreground", "content": "+ Link existing", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "6PUnO", "name": "Backlinks Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "frame", "id": "PllIu", "name": "blTitle", "gap": 4, "alignItems": "center", "children": [ { "type": "text", "id": "ZbgbI", "name": "blTitleTxt", "rotation": -0.5285936385085725, "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", "fontSize": 10 } ] }, { "type": "text", "id": "eRoDO", "name": "blItem1", "fill": "$--primary", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "u1olR", "name": "blItem2", "fill": "$--primary", "content": "Meeting with Grant", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "oUd9s", "name": "blItem3", "fill": "$--primary", "content": "Q1 Planning", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "yf0wj", "name": "History Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "dG7rj", "name": "histTitle", "fill": "$--muted-foreground", "content": "HISTORY", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "frame", "id": "z2Mdy", "name": "histItem1", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--border" }, "layout": "vertical", "gap": 2, "padding": [ 0, 0, 0, 10 ], "children": [ { "type": "text", "id": "AsiWz", "name": "histItem1Hash", "fill": "$--accent-blue", "content": "a089f44 · feat: migrate to shadcn/ui", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "BdVhi", "name": "histItem1Date", "fill": "$--muted-foreground", "content": "Feb 16, 2026", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "piJNC", "name": "histItem2", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--border" }, "layout": "vertical", "gap": 2, "padding": [ 0, 0, 0, 10 ], "children": [ { "type": "text", "id": "0PWoX", "name": "histItem2Hash", "fill": "$--accent-blue", "content": "5a4b4ac · feat: emoji favicon", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "xySNW", "name": "histItem2Date", "fill": "$--muted-foreground", "content": "Feb 15, 2026", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] } ] } ] } ] } ] } ] }, { "type": "frame", "id": "x1AHT", "name": "lightStatusBar", "width": "fill_container", "height": 30, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "padding": [ 0, 8 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "e2UzJ", "name": "Status Left", "height": "fill_container", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mlD58", "name": "versionIcon", "width": 14, "height": 14, "iconFontName": "box", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "hRBRa", "name": "versionText", "fill": "$--muted-foreground", "content": "v0.4.2", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "text", "id": "bFwrw", "name": "sep1", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "icon_font", "id": "ey3Gr", "name": "branchIcon", "width": 14, "height": 14, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "Kz0sS", "name": "branchText", "fill": "$--muted-foreground", "content": "main", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "6IY1E", "name": "sep2", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "icon_font", "id": "IjEG1", "name": "syncIcon", "width": 13, "height": 13, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$--accent-green" }, { "type": "text", "id": "srxkr", "name": "syncText", "fill": "$--muted-foreground", "content": "Synced 2m ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "4jgQF", "name": "Status Right", "height": "fill_container", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "3RPmA", "name": "aiIcon", "width": 13, "height": 13, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$--accent-purple" }, { "type": "text", "id": "t0NOA", "name": "aiText", "fill": "$--muted-foreground", "content": "Claude Sonnet 4", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "16V7i", "name": "sep3", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "icon_font", "id": "PXVrd", "name": "notesCount", "width": 13, "height": 13, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "2FxCi", "name": "notesText", "fill": "$--muted-foreground", "content": "1,247 notes", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "pB6ds", "name": "sep4", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "icon_font", "id": "fRHKs", "name": "bellIcon", "width": 13, "height": 13, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "2sEBS", "name": "settingsIcon", "width": 13, "height": 13, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "mOf4J", "x": 0, "y": 4457, "name": "Color Palette — shadcn/ui Theme (Light)", "theme": { "Mode": "Light" }, "width": 1440, "fill": "$--background", "layout": "vertical", "gap": 32, "padding": 40, "children": [ { "type": "text", "id": "rmJdn", "name": "cTitle", "fill": "$--foreground", "content": "Color Palette — shadcn/ui Theme Variables (Light)", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "700", "letterSpacing": -0.5 }, { "type": "text", "id": "V79Zu", "name": "cSub", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "All colors from src/index.css. Variables support light/dark mode via .dark class.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "Xbdzq", "name": "primLbl", "fill": "$--foreground", "content": "Primary Colors", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "NyoC7", "name": "primRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "Inb1x", "name": "sw1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "HRsVC", "name": "sw1b", "fill": "$--background", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "jV89s", "name": "sw1n", "fill": "$--foreground", "content": "--background", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "qOUUY", "name": "sw1v", "fill": "$--muted-foreground", "content": "L: #FFFFFF / D: #0f0f1a", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "QytAQ", "name": "sw2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "TMuHH", "name": "sw2b", "fill": "$--foreground", "width": "fill_container", "height": 60 }, { "type": "text", "id": "k9qK4", "name": "sw2n", "fill": "$--foreground", "content": "--foreground", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "BfEn7", "name": "sw2v", "fill": "$--muted-foreground", "content": "L: #37352F / D: #e0e0e0", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gJZtB", "name": "sw3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "RRsQg", "name": "sw3b", "fill": "$--primary", "width": "fill_container", "height": 60 }, { "type": "text", "id": "CtJe4", "name": "sw3n", "fill": "$--foreground", "content": "--primary", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "1iFr6", "name": "sw3v", "fill": "$--muted-foreground", "content": "#155DFF", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mbvua", "name": "sw4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "fajNZ", "name": "sw4b", "fill": "$--primary-foreground", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "wVJ7z", "name": "sw4n", "fill": "$--foreground", "content": "--primary-foreground", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "Oum5Q", "name": "sw4v", "fill": "$--muted-foreground", "content": "L: #FFFFFF / D: #ffffff", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "UvI4d", "name": "accLbl", "fill": "$--foreground", "content": "Accent & Semantic Colors", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "jOmo7", "name": "accRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "uFXJ3", "name": "a1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "NRr0w", "name": "a1b", "fill": "$--accent-blue", "width": "fill_container", "height": 60 }, { "type": "text", "id": "ECVqk", "name": "a1n", "fill": "$--foreground", "content": "--accent-blue", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "csKEt", "name": "a2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "5IiT2", "name": "a2b", "fill": "$--accent-green", "width": "fill_container", "height": 60 }, { "type": "text", "id": "aCPba", "name": "a2n", "fill": "$--foreground", "content": "--accent-green", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "XbY7C", "name": "a3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "I9qCz", "name": "a3b", "fill": "$--accent-yellow", "width": "fill_container", "height": 60 }, { "type": "text", "id": "DfZVh", "name": "a3n", "fill": "$--foreground", "content": "--accent-yellow", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "nROw3", "name": "a4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "IcIoP", "name": "a4b", "fill": "$--accent-red", "width": "fill_container", "height": 60 }, { "type": "text", "id": "eGgz6", "name": "a4n", "fill": "$--foreground", "content": "--destructive", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "J95fv", "name": "a5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "o03fQ", "name": "a5b", "fill": "$--accent-purple", "width": "fill_container", "height": 60 }, { "type": "text", "id": "H9VWy", "name": "a5n", "fill": "$--foreground", "content": "--accent-purple", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] }, { "type": "text", "id": "GcYle", "name": "lightLightLbl", "fill": "$--foreground", "content": "Accent Light Backgrounds", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "Ju2xp", "name": "accLightRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "5dnn5", "name": "al1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "7kcqW", "name": "ll1b", "fill": "$--accent-blue-light", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "dBCbF", "name": "ll1n", "fill": "$--foreground", "content": "--accent-blue-light", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "W0t0j", "name": "al2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "1vepp", "name": "ll2b", "fill": "$--accent-green-light", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "6kUyf", "name": "ll2n", "fill": "$--foreground", "content": "--accent-green-light", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "zyV1j", "name": "al3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "yUDBN", "name": "ll3b", "fill": "$--accent-yellow-light", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "dmfZ4", "name": "ll3n", "fill": "$--foreground", "content": "--accent-yellow-light", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "yGmmo", "name": "al4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "eLu8o", "name": "ll4b", "fill": "$--accent-red-light", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "PVLwR", "name": "ll4n", "fill": "$--foreground", "content": "--accent-red-light", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "0BO2b", "name": "al5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "6FBws", "name": "ll5b", "fill": "$--accent-purple-light", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "i2DfV", "name": "ll5n", "fill": "$--foreground", "content": "--accent-purple-light", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] }, { "type": "text", "id": "JFocf", "name": "surfLbl", "fill": "$--foreground", "content": "Surface & Border Colors", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "YAJLW", "name": "surfRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "JHS3j", "name": "s1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "9Bj41", "name": "s1b", "fill": "$--card", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "wn4ua", "name": "s1n", "fill": "$--foreground", "content": "--card", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "Fyvfd", "name": "s2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "UFLw5", "name": "s2b", "fill": "$--sidebar", "width": "fill_container", "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--sidebar-border" } }, { "type": "text", "id": "gngfL", "name": "s2n", "fill": "$--foreground", "content": "--sidebar", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "zbyEJ", "name": "s3", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "WnmQD", "name": "s3b", "fill": "$--secondary", "width": "fill_container", "height": 60 }, { "type": "text", "id": "wnkxR", "name": "s3n", "fill": "$--foreground", "content": "--secondary", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "Z2FuK", "name": "s4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "lNPnc", "name": "s4b", "fill": "$--border", "width": "fill_container", "height": 60 }, { "type": "text", "id": "x9aeh", "name": "s4n", "fill": "$--foreground", "content": "--border / --input", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "TDDQ0", "name": "s5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "MwHOe", "name": "s5b", "fill": "$--muted-foreground", "width": "fill_container", "height": 60 }, { "type": "text", "id": "dHZj5", "name": "s5n", "fill": "$--foreground", "content": "--muted-foreground", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "HZonq", "x": 0, "y": 5252, "name": "Typography & Spacing Specs (Light)", "theme": { "Mode": "Light" }, "width": 1440, "fill": "$--background", "layout": "vertical", "gap": 32, "padding": 40, "children": [ { "type": "text", "id": "nGLlU", "name": "tTitle", "fill": "$--foreground", "content": "Typography Scale (Light)", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "700", "letterSpacing": -0.5 }, { "type": "text", "id": "gkQqO", "name": "tSub", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Fonts: Inter, IBM Plex Mono. Base: 14px. System fallback: -apple-system, BlinkMacSystemFont, sans-serif.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "QL9fK", "name": "t1", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "px1l7", "name": "t1s", "fill": "$--foreground", "content": "Heading 1", "lineHeight": 1.2, "fontFamily": "Inter", "fontSize": 32, "fontWeight": "700" }, { "type": "text", "id": "3UWKu", "name": "t1d", "fill": "$--muted-foreground", "content": "32px / Bold / lh 1.2 — Editor H1", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Yjhit", "name": "t2", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "iFzl0", "name": "t2s", "fill": "$--foreground", "content": "Heading 2", "lineHeight": 1.3, "fontFamily": "Inter", "fontSize": 24, "fontWeight": "600" }, { "type": "text", "id": "cF55I", "name": "t2d", "fill": "$--muted-foreground", "content": "24px / Semibold / lh 1.3 — Editor H2", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "bBHMa", "name": "t3", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "kpSyr", "name": "t3s", "fill": "$--foreground", "content": "App Title", "fontFamily": "Inter", "fontSize": 17, "fontWeight": "700", "letterSpacing": -0.3 }, { "type": "text", "id": "xUuNz", "name": "t3d", "fill": "$--muted-foreground", "content": "17px / Bold / ls -0.3 — Sidebar header", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Lsh7F", "name": "t4", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "vTRSs", "name": "t4s", "fill": "$--foreground", "content": "Body Text", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "text", "id": "fKa3p", "name": "t4d", "fill": "$--muted-foreground", "content": "16px / Regular / lh 1.6 — Editor paragraphs", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "rpOTz", "name": "t5", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "VXY3Z", "name": "t5s", "fill": "$--foreground", "content": "UI Label / Button", "lineHeight": 1.43, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "F6GQz", "name": "t5d", "fill": "$--muted-foreground", "content": "14px / Medium / lh 1.43 — Buttons, NoteList header, Inspector labels", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "H6Rgt", "name": "t6", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "xWvbj", "name": "t6s", "fill": "$--foreground", "content": "Sidebar Item", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "text", "id": "bvBBm", "name": "t6d", "fill": "$--muted-foreground", "content": "13px / Medium — Sidebar nav items, filter items, search", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "GrFAq", "name": "t7", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "vY8j4", "name": "t7s", "fill": "$--muted-foreground", "content": "SECTION HEADER", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 0.5 }, { "type": "text", "id": "okws6", "name": "t7d", "fill": "$--muted-foreground", "content": "11px / Semibold / ls 0.5 — Sidebar sections, type pills", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "awxls", "name": "t8", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "mD3f5", "name": "t8s", "fill": "$--foreground", "content": "ALL-CAPS LABEL", "fontFamily": "IBM Plex Mono", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1.2 }, { "type": "text", "id": "jFpLw", "name": "t8d", "fill": "$--muted-foreground", "content": "11px / Semibold / ls 1.2 / IBM Plex Mono — Section labels, metadata tags", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ToLzL", "name": "t9", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "LEsxW", "name": "t9s", "fill": "$--muted-foreground", "content": "OVERLINE TEXT", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.5 }, { "type": "text", "id": "HQ3Df", "name": "t9d", "fill": "$--muted-foreground", "content": "10px / Medium / ls 1.5 / IBM Plex Mono — Overlines, category labels, timestamps", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "rectangle", "id": "3tiJ7", "name": "div1", "fill": "$--border", "width": "fill_container", "height": 1 }, { "type": "text", "id": "b2Mt9", "name": "spTitle", "fill": "$--foreground", "content": "Spacing & Layout Reference", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "700", "letterSpacing": -0.5 }, { "type": "frame", "id": "o6ETJ", "name": "pnlRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "HhbOn", "name": "p1", "width": "fill_container", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 6, "padding": 16, "children": [ { "type": "text", "id": "YBekR", "name": "p1t", "fill": "$--foreground", "content": "Sidebar: 250px", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "dT8Xe", "name": "p1d", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "bg: --sidebar | padding: 8px container, 12px 16px header, 6px 16px items", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "aYkMZ", "name": "p2", "width": "fill_container", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 6, "padding": 16, "children": [ { "type": "text", "id": "Eycne", "name": "p2t", "fill": "$--foreground", "content": "NoteList: 300px", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "lyTZN", "name": "p2d", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "bg: --card | padding: 14px 16px header, 8px 12px search/pills, 10px 16px items", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "E6G3g", "name": "p3", "width": "fill_container", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 6, "padding": 16, "children": [ { "type": "text", "id": "Xy5Gl", "name": "p3t", "fill": "$--foreground", "content": "Editor: flexible", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "y4svr", "name": "p3d", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "bg: --background | padding: 32px 64px content, 7px 14px tabs, gap: 16px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "RBPav", "name": "p4", "width": "fill_container", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 6, "padding": 16, "children": [ { "type": "text", "id": "xKUWC", "name": "p4t", "fill": "$--foreground", "content": "Inspector: 280px", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "u81W5", "name": "p4d", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "bg: --sidebar | padding: 14px 12px header, 12px body, 16px section gap, 8px prop gap", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "VvZyF", "name": "radLbl", "fill": "$--foreground", "content": "Border Radius", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "OwJH7", "name": "radRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "DHrzV", "name": "r1", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 4, "id": "V35oi", "name": "r1b", "fill": "$--secondary", "width": 80, "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "HVQpq", "name": "r1n", "fill": "$--foreground", "content": "4px (sm) — chips", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "wp350", "name": "r2", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 6, "id": "E031z", "name": "r2b", "fill": "$--secondary", "width": 80, "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "rDLff", "name": "r2n", "fill": "$--foreground", "content": "6px (md) — buttons, inputs", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "d6tJt", "name": "r3", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 8, "id": "PNkS4", "name": "r3b", "fill": "$--secondary", "width": 80, "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "rZGXb", "name": "r3n", "fill": "$--foreground", "content": "8px (lg) — cards, dialogs", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "UAZ8u", "name": "r4", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 16, "id": "wgMVG", "name": "r4b", "fill": "$--secondary", "width": 80, "height": 60, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" } }, { "type": "text", "id": "zw3RY", "name": "r4n", "fill": "$--foreground", "content": "16px — badges", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] }, { "type": "rectangle", "id": "kIrXE", "name": "div2", "fill": "$--border", "width": "fill_container", "height": 1 }, { "type": "text", "id": "FYw8k", "name": "compTitle", "fill": "$--foreground", "content": "shadcn/ui Component Inventory", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "700", "letterSpacing": -0.5 }, { "type": "frame", "id": "7Q1Fi", "name": "compRow", "width": "fill_container", "gap": 16, "children": [ { "type": "frame", "id": "XfUwj", "name": "cg1", "width": "fill_container", "fill": "$--card", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 12, "padding": 16, "children": [ { "type": "text", "id": "ly7m0", "name": "cg1t", "fill": "$--accent-green", "content": "In Use", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "Re89a", "name": "cg1r1", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Button — 5 variants (Default, Secondary, Outline, Ghost, Destructive)", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "ILbjW", "name": "cg1r2", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Input — Default text input with label group", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "eurqS", "name": "cg1r3", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Dialog — Modal overlay (CreateNote, Commit)", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "AZyZP", "name": "cg1r4", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Badge — 4 variants (Default, Secondary, Outline, Destructive)", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "WtehQ", "name": "cg2", "width": "fill_container", "fill": "$--card", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "gap": 12, "padding": 16, "children": [ { "type": "text", "id": "KaMZ9", "name": "cg2t", "fill": "$--accent-yellow", "content": "Available (Not Yet Used)", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "F8wam", "name": "cg2r1", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "DropdownMenu — Context / dropdown menus", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Nl1aV", "name": "cg2r2", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Tabs — Tab navigation component", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "0sBwH", "name": "cg2r3", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Tooltip, Select, Card, Separator, ScrollArea", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "trSB1", "x": 1600, "y": 3385, "name": "Trash — Sidebar Filter", "theme": { "Mode": "Light" }, "clip": true, "width": 260, "height": 400, "fill": "$--sidebar", "layout": "vertical", "gap": 0, "padding": [ 8, 6 ], "children": [ { "type": "frame", "id": "trFAll", "name": "filterAll", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "trIAll", "name": "iconAll", "width": 16, "height": 16, "iconFontName": "file-text", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "trTAll", "name": "txtAll", "fill": "$--foreground", "content": "All Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "trFFav", "name": "filterFav", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "trIFav", "name": "iconFav", "width": 16, "height": 16, "iconFontName": "star", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "trTFav", "name": "txtFav", "fill": "$--foreground", "content": "Favorites", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "trFArc", "name": "filterArchive", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "trIArc", "name": "iconArchive", "width": 16, "height": 16, "iconFontName": "archive", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--foreground" }, { "type": "text", "id": "trTArc", "name": "txtArchive", "fill": "$--foreground", "content": "Archive", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "frame", "id": "trBArc", "name": "badgeArc", "height": 20, "fill": "$--muted", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "trBTArc", "fill": "$--muted-foreground", "content": "2", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "trFTr", "name": "filterTrash", "width": "fill_container", "fill": "#ef444418", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "trITr", "name": "iconTrash", "width": 16, "height": 16, "iconFontName": "trash", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--destructive" }, { "type": "text", "id": "trTTr", "name": "txtTrash", "fill": "$--destructive", "content": "Trash", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "trBTr", "name": "badgeTrash", "height": 20, "fill": "$--destructive", "cornerRadius": 9999, "padding": [ 0, 6 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "trBTTr", "fill": "#ffffff", "content": "3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "trNL1", "x": 1600, "y": 3815, "name": "Trash — Note List View", "theme": { "Mode": "Light" }, "clip": true, "width": 340, "height": 360, "fill": "$--card", "layout": "vertical", "gap": 0, "children": [ { "type": "frame", "id": "trNLH", "name": "header", "width": "fill_container", "height": 45, "padding": [ 0, 16 ], "alignItems": "center", "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "trNLT", "fill": "$--foreground", "content": "Trash", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" } ] }, { "type": "frame", "id": "trN1", "name": "trashedNote1", "width": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 14, 16 ], "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "trN1H", "name": "titleRow", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "trN1T", "fill": "$--foreground", "content": "Old Draft Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "frame", "id": "trN1B", "name": "trashedBadge", "height": 16, "fill": "#ef444418", "cornerRadius": 4, "padding": [ 1, 4 ], "alignItems": "center", "children": [ { "type": "text", "id": "trN1BT", "fill": "$--destructive", "content": "TRASHED", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "500" } ] } ] }, { "type": "text", "id": "trN1S", "fill": "$--muted-foreground", "content": "Some draft content that is no longer needed...", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "400" }, { "type": "text", "id": "trN1D", "fill": "$--muted-foreground", "content": "5d ago", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "400" } ] }, { "type": "frame", "id": "trN2", "name": "trashedNote2Warning", "width": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 14, 16 ], "fill": "#ef44440a", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "trN2H", "name": "titleRow", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "trN2T", "fill": "$--foreground", "content": "Deprecated API Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "frame", "id": "trN2B", "name": "warningBadge", "height": 16, "fill": "$--destructive", "cornerRadius": 4, "padding": [ 1, 4 ], "alignItems": "center", "children": [ { "type": "text", "id": "trN2BT", "fill": "#ffffff", "content": "30+ DAYS", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "text", "id": "trN2S", "fill": "$--muted-foreground", "content": "Old API documentation that was replaced...", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "400" }, { "type": "text", "id": "trN2D", "fill": "$--destructive", "content": "Trashed 35d ago — will be permanently deleted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "trRI1", "x": 1970, "y": 3385, "name": "Trash — Relationship Indicator", "theme": { "Mode": "Light" }, "clip": true, "width": 300, "height": 200, "fill": "$--background", "layout": "vertical", "gap": 8, "padding": [ 16, 16 ], "children": [ { "type": "text", "id": "trRIL", "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 0.5 }, { "type": "frame", "id": "trRN", "name": "normalRef", "width": "fill_container", "fill": "$--accent-blue-light", "cornerRadius": 6, "padding": [ 6, 10 ], "gap": 6, "alignItems": "center", "justifyContent": "space_between", "children": [ { "type": "text", "id": "trRNT", "fill": "$--accent-blue", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "trRNI", "width": 14, "height": 14, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-blue" } ] }, { "type": "frame", "id": "trRT", "name": "trashedRef", "width": "fill_container", "fill": "$--muted", "cornerRadius": 6, "padding": [ 6, 10 ], "gap": 6, "alignItems": "center", "justifyContent": "space_between", "opacity": 0.7, "children": [ { "type": "frame", "id": "trRTL", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "trRTTI", "width": 12, "height": 12, "iconFontName": "trash", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--muted-foreground" }, { "type": "text", "id": "trRTT", "fill": "$--muted-foreground", "content": "Old Draft Notes", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "trRTTX", "fill": "$--muted-foreground", "content": "(trashed)", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "400" } ] }, { "type": "icon_font", "id": "trRTI", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "trRA", "name": "archivedRef", "width": "fill_container", "fill": "$--muted", "cornerRadius": 6, "padding": [ 6, 10 ], "gap": 6, "alignItems": "center", "justifyContent": "space_between", "opacity": 0.7, "children": [ { "type": "frame", "id": "trRAL", "gap": 4, "alignItems": "center", "children": [ { "type": "text", "id": "trRAT", "fill": "$--muted-foreground", "content": "Website Redesign", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "trRATX", "fill": "$--muted-foreground", "content": "(archived)", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "400" } ] }, { "type": "icon_font", "id": "trRAI", "width": 14, "height": 14, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "trW30", "x": 1970, "y": 3615, "name": "Trash — 30-Day Auto-Delete Warning", "theme": { "Mode": "Light" }, "clip": true, "width": 340, "height": 120, "fill": "$--background", "layout": "vertical", "gap": 8, "padding": [ 16, 16 ], "children": [ { "type": "text", "id": "trW3L", "fill": "$--muted-foreground", "content": "Warning banner shown at top of trash view:", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "trW3B", "name": "warningBanner", "width": "fill_container", "fill": "#ef44440f", "cornerRadius": 8, "padding": [ 10, 12 ], "gap": 8, "alignItems": "center", "stroke": { "align": "inside", "thickness": 1, "fill": "#ef444430" }, "children": [ { "type": "icon_font", "id": "trW3I", "width": 16, "height": 16, "iconFontName": "warning", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--destructive" }, { "type": "frame", "id": "trW3T", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "trW3T1", "fill": "$--destructive", "content": "Notes in trash for 30+ days will be permanently deleted", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "text", "id": "trW3T2", "fill": "$--muted-foreground", "content": "1 note is past the 30-day retention period", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "400" } ] } ] } ] }, { "type": "frame", "id": "dt0", "name": "Draggable Tabs — Default State", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dt1", "name": "frameLabel", "content": "Default: tabs are draggable (grab cursor on hover)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "dt2", "name": "Tab Bar Default", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "dt3", "name": "Tab Active", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt4", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "dt5", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt6", "name": "Tab Inactive", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt7", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dt8", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt9", "name": "Tab Inactive 2", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dta", "fill": "$--muted-foreground", "content": "Weekly Review", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dtb", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dtc", "name": "Tab Inactive 3", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dtd", "fill": "$--muted-foreground", "content": "Workout Log", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dte", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dtf", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "dtg", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "dth", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "dti", "name": "cursorNote", "content": "cursor: grab → grabbing during drag", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "dtj", "name": "Draggable Tabs — Dragging (Tab Being Moved)", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dtk", "name": "frameLabel2", "content": "Dragging: \"Portfolio Rewrite\" is being dragged left (opacity 0.5, blue drop indicator)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "dtl", "name": "Tab Bar Dragging", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "rectangle", "id": "dtm", "name": "Drop Indicator", "width": 2, "height": 30, "fill": "$--primary", "cornerRadius": 1 }, { "type": "frame", "id": "dtn", "name": "Tab Active", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dto", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "dtp", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dtq", "name": "Tab Dragging (ghost)", "height": "fill_container", "opacity": 0.5, "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dtr", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dts", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dtt", "name": "Tab Inactive 2", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dtu", "fill": "$--muted-foreground", "content": "Weekly Review", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dtv", "name": "Tab Inactive 3", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dtw", "fill": "$--muted-foreground", "content": "Workout Log", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dtx", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "dty", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "dtz", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "dt10", "name": "dragNote", "content": "Drop indicator: 2px $--primary bar shows insertion point. Dragged tab has opacity: 0.5.", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "dt11", "name": "Draggable Tabs — After Drop (Reordered)", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dt12", "name": "frameLabel3", "content": "After drop: \"Portfolio Rewrite\" moved before \"Laputa App\". Order persisted to localStorage.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "dt13", "name": "Tab Bar Reordered", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "dt14", "name": "Tab Inactive (moved)", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt15", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dt16", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt17", "name": "Tab Active", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt18", "fill": "$--foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "dt19", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt1a", "name": "Tab Inactive 2", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt1b", "fill": "$--muted-foreground", "content": "Weekly Review", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dt1c", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt1d", "name": "Tab Inactive 3", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "dt1e", "fill": "$--muted-foreground", "content": "Workout Log", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "dt1f", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dt1g", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "dt1h", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "dt1i", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "dt1j", "name": "persistNote", "content": "localStorage key: \"laputa-tab-order\" stores path array. Restored on next session.", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "dsg01a", "name": "Sidebar — Drag Handles Visible", "x": 68, "y": 6400, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", "padding": [ 16 ], "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dsg01b", "name": "frame1Title", "content": "Drag handles appear on section headers", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600", "fill": "$--foreground" }, { "type": "text", "id": "dsg01c", "name": "frame1Desc", "content": "Grip icon shown left of section icon. Cursor changes to grab on hover.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground" }, { "type": "frame", "id": "dsg01d", "height": 12 }, { "type": "frame", "id": "dsg01e", "name": "sidebarDefault", "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "dsg01f", "name": "filters", "width": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 8, 6 ], "children": [ { "type": "frame", "id": "dsg01g", "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg01h", "width": 18, "height": 18, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg01i", "fill": "$--foreground", "content": "All Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg01j", "name": "favRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg01k", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg01l", "fill": "$--muted-foreground", "content": "Favorites", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg01m", "name": "sectionsWrap", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "dsg00a", "name": "projGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6, 8, 6 ], "children": [ { "type": "frame", "id": "dsg005", "name": "projHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg001", "name": "projLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg000", "name": "projDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg002", "name": "projIcon", "width": 18, "height": 18, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-red" }, { "type": "text", "id": "dsg003", "name": "projLabel", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg004", "name": "projChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dsg006", "name": "projItem0", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "fill": "$--accent-red-light", "children": [ { "type": "text", "id": "dsg007", "name": "projItemTxt0", "fill": "$--accent-red", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg008", "name": "projItem1", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "dsg009", "name": "projItemTxt1", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg00h", "name": "respGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg00g", "name": "respHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg00c", "name": "respLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg00b", "name": "respDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg00d", "name": "respIcon", "width": 18, "height": 18, "iconFontName": "medal", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg00e", "name": "respLabel", "fill": "$--foreground", "content": "Responsibilities", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg00f", "name": "respChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg00o", "name": "procGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg00n", "name": "procHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg00j", "name": "procLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg00i", "name": "procDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg00k", "name": "procIcon", "width": 18, "height": 18, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg00l", "name": "procLabel", "fill": "$--foreground", "content": "Procedures", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg00m", "name": "procChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg00v", "name": "peopleGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg00u", "name": "peopleHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg00q", "name": "peopleLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg00p", "name": "peopleDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg00r", "name": "peopleIcon", "width": 18, "height": 18, "iconFontName": "leaf", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg00s", "name": "peopleLabel", "fill": "$--foreground", "content": "People", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg00t", "name": "peopleChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg012", "name": "eventsGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg011", "name": "eventsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg00x", "name": "eventsLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg00w", "name": "eventsDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg00y", "name": "eventsIcon", "width": 18, "height": 18, "iconFontName": "cardholder", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg00z", "name": "eventsLabel", "fill": "$--foreground", "content": "Events", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg010", "name": "eventsChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg019", "name": "topicsGroup", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg018", "name": "topicsHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg014", "name": "topicsLeft", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg013", "name": "topicsDrag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg015", "name": "topicsIcon", "width": 18, "height": 18, "iconFontName": "tag", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-green" }, { "type": "text", "id": "dsg016", "name": "topicsLabel", "fill": "$--foreground", "content": "Topics", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg017", "name": "topicsChev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] } ] } ] } ] }, { "type": "frame", "id": "dsg02w", "name": "Sidebar — Section Being Dragged", "x": 420, "y": 6400, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", "padding": [ 16 ], "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dsg02x", "name": "frame2Title", "content": "Dragging \"People\" above \"Responsibilities\"", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600", "fill": "$--foreground" }, { "type": "text", "id": "dsg02y", "name": "frame2Desc", "content": "Blue drop indicator line shows insertion point. Dragged section floats with blue border.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground" }, { "type": "frame", "id": "dsg02z", "height": 12 }, { "type": "frame", "id": "dsg030", "name": "sidebarDragging", "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "dsg031", "name": "filters", "width": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 8, 6 ], "children": [ { "type": "frame", "id": "dsg032", "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg033", "width": 18, "height": 18, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg034", "fill": "$--foreground", "content": "All Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg035", "name": "favRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg036", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg037", "fill": "$--muted-foreground", "content": "Favorites", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg038", "name": "sectionsWrap", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "dsg01x", "name": "proj2Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6, 8, 6 ], "children": [ { "type": "frame", "id": "dsg01s", "name": "proj2Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg01o", "name": "proj2Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg01n", "name": "proj2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg01p", "name": "proj2Icon", "width": 18, "height": 18, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-red" }, { "type": "text", "id": "dsg01q", "name": "proj2Label", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg01r", "name": "proj2Chev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dsg01t", "name": "proj2Item0", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "fill": "$--accent-red-light", "children": [ { "type": "text", "id": "dsg01u", "name": "proj2ItemTxt0", "fill": "$--accent-red", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg01v", "name": "proj2Item1", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "dsg01w", "name": "proj2ItemTxt1", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg01y", "name": "dropIndicator", "width": "fill_container", "height": 2, "fill": "$--accent-blue", "cornerRadius": 1 }, { "type": "frame", "id": "dsg025", "name": "resp2Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg024", "name": "resp2Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg020", "name": "resp2Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg01z", "name": "resp2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg021", "name": "resp2Icon", "width": 18, "height": 18, "iconFontName": "medal", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg022", "name": "resp2Label", "fill": "$--foreground", "content": "Responsibilities", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg023", "name": "resp2Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg02c", "name": "proc2Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg02b", "name": "proc2Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg027", "name": "proc2Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg026", "name": "proc2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg028", "name": "proc2Icon", "width": 18, "height": 18, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg029", "name": "proc2Label", "fill": "$--foreground", "content": "Procedures", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg02a", "name": "proc2Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg02j", "name": "events2Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg02i", "name": "events2Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg02e", "name": "events2Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg02d", "name": "events2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg02f", "name": "events2Icon", "width": 18, "height": 18, "iconFontName": "cardholder", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg02g", "name": "events2Label", "fill": "$--foreground", "content": "Events", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg02h", "name": "events2Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg02q", "name": "topics2Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg02p", "name": "topics2Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg02l", "name": "topics2Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg02k", "name": "topics2Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg02m", "name": "topics2Icon", "width": 18, "height": 18, "iconFontName": "tag", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-green" }, { "type": "text", "id": "dsg02n", "name": "topics2Label", "fill": "$--foreground", "content": "Topics", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg02o", "name": "topics2Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] } ] } ] }, { "type": "frame", "id": "dsg02r", "name": "draggedSection", "x": 8, "y": 160, "width": 234, "fill": "$--sidebar", "cornerRadius": 6, "stroke": { "align": "outside", "thickness": 1, "fill": { "type": "color", "color": "$--accent-blue" } }, "opacity": 0.9, "layout": "vertical", "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg02s", "name": "draggedHeader", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg02t", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--accent-blue", "opacity": 0.8 }, { "type": "icon_font", "id": "dsg02u", "width": 18, "height": 18, "iconFontName": "leaf", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg02v", "fill": "$--foreground", "content": "People", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "dsg04j", "name": "Sidebar — After Reorder (People Moved Up)", "x": 772, "y": 6400, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", "padding": [ 16 ], "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "dsg04k", "name": "frame3Title", "content": "After drop — People now second section", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600", "fill": "$--foreground" }, { "type": "text", "id": "dsg04l", "name": "frame3Desc", "content": "Order persisted as \"order\" property in each Type document frontmatter (e.g. order: 2).", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground" }, { "type": "frame", "id": "dsg04m", "height": 12 }, { "type": "frame", "id": "dsg04n", "name": "sidebarReordered", "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "dsg04o", "name": "filters", "width": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 8, 6 ], "children": [ { "type": "frame", "id": "dsg04p", "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg04q", "width": 18, "height": 18, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg04r", "fill": "$--foreground", "content": "All Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg04s", "name": "favRow", "width": "fill_container", "cornerRadius": 4, "padding": [ 6, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg04t", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "dsg04u", "fill": "$--muted-foreground", "content": "Favorites", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg04v", "name": "sectionsWrap", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "dsg03j", "name": "proj3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6, 8, 6 ], "children": [ { "type": "frame", "id": "dsg03e", "name": "proj3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg03a", "name": "proj3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg039", "name": "proj3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg03b", "name": "proj3Icon", "width": 18, "height": 18, "iconFontName": "wrench", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-red" }, { "type": "text", "id": "dsg03c", "name": "proj3Label", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg03d", "name": "proj3Chev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "dsg03f", "name": "proj3Item0", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "fill": "$--accent-red-light", "children": [ { "type": "text", "id": "dsg03g", "name": "proj3ItemTxt0", "fill": "$--accent-red", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "dsg03h", "name": "proj3Item1", "width": "fill_container", "cornerRadius": 6, "padding": [ 6, 16, 6, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "dsg03i", "name": "proj3ItemTxt1", "fill": "$--muted-foreground", "content": "Portfolio Rewrite", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dsg03q", "name": "people3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg03p", "name": "people3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg03l", "name": "people3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg03k", "name": "people3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg03m", "name": "people3Icon", "width": 18, "height": 18, "iconFontName": "leaf", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg03n", "name": "people3Label", "fill": "$--foreground", "content": "People", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg03o", "name": "people3Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg03x", "name": "resp3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg03w", "name": "resp3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg03s", "name": "resp3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg03r", "name": "resp3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg03t", "name": "resp3Icon", "width": 18, "height": 18, "iconFontName": "medal", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg03u", "name": "resp3Label", "fill": "$--foreground", "content": "Responsibilities", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg03v", "name": "resp3Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg044", "name": "proc3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg043", "name": "proc3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg03z", "name": "proc3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg03y", "name": "proc3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg040", "name": "proc3Icon", "width": 18, "height": 18, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-purple" }, { "type": "text", "id": "dsg041", "name": "proc3Label", "fill": "$--foreground", "content": "Procedures", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg042", "name": "proc3Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg04b", "name": "events3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg04a", "name": "events3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg046", "name": "events3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg045", "name": "events3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg047", "name": "events3Icon", "width": 18, "height": 18, "iconFontName": "cardholder", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-yellow" }, { "type": "text", "id": "dsg048", "name": "events3Label", "fill": "$--foreground", "content": "Events", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg049", "name": "events3Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "dsg04i", "name": "topics3Group", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": { "type": "color", "color": "$--border", "enabled": false } }, "layout": "vertical", "gap": 2, "padding": [ 4, 6 ], "children": [ { "type": "frame", "id": "dsg04h", "name": "topics3Header", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dsg04d", "name": "topics3Left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "dsg04c", "name": "topics3Drag", "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", "fill": "$--muted-foreground", "opacity": 0.5 }, { "type": "icon_font", "id": "dsg04e", "name": "topics3Icon", "width": 18, "height": 18, "iconFontName": "tag", "iconFontFamily": "phosphor", "weight": 700, "fill": "$--accent-green" }, { "type": "text", "id": "dsg04f", "name": "topics3Label", "fill": "$--foreground", "content": "Topics", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "dsg04g", "name": "topics3Chev", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] } ] } ] } ] }, { "type": "frame", "id": "csB01", "x": 0, "y": 7140, "name": "Sections Header — Before (old design)", "theme": { "Mode": "Light" }, "clip": true, "width": 280, "height": 120, "fill": "$--sidebar", "layout": "vertical", "gap": 8, "padding": [ 16, 12 ], "children": [ { "type": "text", "id": "csB02", "name": "frameLabel", "fill": "$--muted-foreground", "content": "BEFORE — Old Design", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1 }, { "type": "frame", "id": "csB03", "name": "customizeBtn", "width": "fill_container", "cornerRadius": 4, "gap": 6, "padding": [ 4, 16 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "csB04", "name": "slidersIcon", "width": 14, "height": 14, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "text", "id": "csB05", "name": "customizeLabel", "fill": "$--muted-foreground", "content": "Customize sections", "fontFamily": "Inter", "fontSize": 12 } ] }, { "type": "frame", "id": "csB06", "name": "sectionRow", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "csB07", "name": "left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "csB08", "name": "projIcon", "width": 16, "height": 16, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-red" }, { "type": "text", "id": "csB09", "name": "projLabel", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "csB10", "name": "chevron", "width": 12, "height": 12, "iconFontName": "caret-right", "iconFontFamily": "phosphor", "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "csA01", "x": 340, "y": 7140, "name": "Sections Header — After (new design)", "theme": { "Mode": "Light" }, "clip": true, "width": 280, "height": 120, "fill": "$--sidebar", "layout": "vertical", "gap": 8, "padding": [ 16, 12 ], "children": [ { "type": "text", "id": "csA02", "name": "frameLabel", "fill": "$--muted-foreground", "content": "AFTER — New Design", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1 }, { "type": "frame", "id": "csA03", "name": "sectionsHeader", "width": "fill_container", "padding": [ 4, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "csA04", "name": "sectionsLabel", "fill": "$--muted-foreground", "content": "SECTIONS", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1.2 }, { "type": "icon_font", "id": "csA05", "name": "settingsIcon", "width": 14, "height": 14, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "csA06", "name": "sectionRow", "width": "fill_container", "cornerRadius": 4, "gap": 8, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "csA07", "name": "left", "gap": 8, "alignItems": "center", "children": [ { "type": "icon_font", "id": "csA08", "name": "projIcon", "width": 16, "height": 16, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-red" }, { "type": "text", "id": "csA09", "name": "projLabel", "fill": "$--foreground", "content": "Projects", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "csA10", "name": "chevron", "width": 12, "height": 12, "iconFontName": "caret-right", "iconFontFamily": "phosphor", "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "archBtnNorm", "x": 68, "y": 5200, "name": "Archive Notes — Breadcrumb button (normal note)", "theme": { "Mode": "Light" }, "clip": true, "width": 800, "height": 45, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "anInfoL", "name": "infoLeft", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "anType", "name": "breadcrumbType", "fill": "$--muted-foreground", "content": "Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "anSep", "name": "breadcrumbSep", "fill": "$--muted-foreground", "content": "›", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "anName", "name": "breadcrumbName", "fill": "$--foreground", "content": "My Active Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "anDot", "name": "dotSep", "fill": "$--muted-foreground", "content": "·", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "anWords", "name": "wordCount", "fill": "$--muted-foreground", "content": "1,234 words", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "anInfoR", "name": "infoRight", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "anISearch", "width": 16, "height": 16, "iconFontName": "magnifying-glass", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "anIGit", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "anICursor", "width": 16, "height": 16, "iconFontName": "cursor-text", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "anIAI", "width": 16, "height": 16, "iconFontName": "sparkle", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "frame", "id": "anArchiveBtn", "name": "archiveButton", "gap": 4, "alignItems": "center", "stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" }, "cornerRadius": 4, "padding": [ 2, 2 ], "children": [ { "type": "icon_font", "id": "anIArchive", "width": 16, "height": 16, "iconFontName": "archive", "iconFontFamily": "phosphor", "fill": "$--primary" } ] }, { "type": "icon_font", "id": "anITrash", "width": 16, "height": 16, "iconFontName": "trash", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "anIMore", "width": 16, "height": 16, "iconFontName": "dots-three", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "archBtnArc", "x": 68, "y": 5300, "name": "Archive Notes — Breadcrumb button (archived note, shows Unarchive)", "theme": { "Mode": "Light" }, "clip": true, "width": 800, "height": 45, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 6, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "auInfoL", "name": "infoLeft", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "auType", "name": "breadcrumbType", "fill": "$--muted-foreground", "content": "Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "auSep", "name": "breadcrumbSep", "fill": "$--muted-foreground", "content": "›", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "auName", "name": "breadcrumbName", "fill": "$--foreground", "content": "My Archived Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "auDot", "name": "dotSep", "fill": "$--muted-foreground", "content": "·", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "auWords", "name": "wordCount", "fill": "$--muted-foreground", "content": "567 words", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "auBadge", "name": "archivedBadge", "height": 16, "fill": "#2563eb1a", "cornerRadius": 4, "padding": [ 1, 4 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "auBadgeTxt", "fill": "$--primary", "content": "ARCHIVED", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "auInfoR", "name": "infoRight", "gap": 12, "alignItems": "center", "children": [ { "type": "icon_font", "id": "auISearch", "width": 16, "height": 16, "iconFontName": "magnifying-glass", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "auIGit", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "auICursor", "width": 16, "height": 16, "iconFontName": "cursor-text", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "auIAI", "width": 16, "height": 16, "iconFontName": "sparkle", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "frame", "id": "auUnarchiveBtn", "name": "unarchiveButton", "gap": 4, "alignItems": "center", "stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" }, "cornerRadius": 4, "padding": [ 2, 2 ], "children": [ { "type": "icon_font", "id": "auIUnarchive", "width": 16, "height": 16, "iconFontName": "arrow-u-up-left", "iconFontFamily": "phosphor", "fill": "$--primary" } ] }, { "type": "icon_font", "id": "auITrash", "width": 16, "height": 16, "iconFontName": "trash", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "icon_font", "id": "auIMore", "width": 16, "height": 16, "iconFontName": "dots-three", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghCL1", "x": 0, "y": 7320, "name": "Git History — Commit List", "width": 300, "height": "fit_content(600)", "fill": "$--background", "cornerRadius": "$--radius-lg", "stroke": { "fill": "$--border", "thickness": 1 }, "layout": "vertical", "gap": 16, "padding": 12, "children": [ { "type": "text", "id": "ghCL1h", "content": "HISTORY", "fill": "$--muted-foreground", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1.2 }, { "type": "frame", "id": "ghC1", "layout": "vertical", "width": "fill_container", "gap": 2, "padding": [ 0, 0, 0, 10 ], "stroke": { "fill": "$--border", "thickness": { "left": 2 } }, "children": [ { "type": "frame", "id": "ghC1r", "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "ghC1h", "content": "a1b2c3d", "fill": "$--primary", "fontSize": 11, "fontWeight": "500", "underline": true }, { "type": "text", "id": "ghC1d", "content": "2d ago", "fill": "$--muted-foreground", "fontSize": 10 } ] }, { "type": "text", "id": "ghC1m", "content": "Update grow-newsletter with latest changes", "fill": "$--secondary-foreground", "fontSize": 12, "textGrowth": "fixed-width", "width": "fill_container" }, { "type": "text", "id": "ghC1a", "content": "Luca Rossi", "fill": "$--muted-foreground", "fontSize": 10 } ] }, { "type": "frame", "id": "ghC2", "layout": "vertical", "width": "fill_container", "gap": 2, "padding": [ 0, 0, 0, 10 ], "stroke": { "fill": "$--border", "thickness": { "left": 2 } }, "children": [ { "type": "frame", "id": "ghC2r", "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "ghC2h", "content": "e4f5g6h", "fill": "$--primary", "fontSize": 11, "fontWeight": "500", "underline": true }, { "type": "text", "id": "ghC2d", "content": "5d ago", "fill": "$--muted-foreground", "fontSize": 10 } ] }, { "type": "text", "id": "ghC2m", "content": "Add new section to grow-newsletter", "fill": "$--secondary-foreground", "fontSize": 12, "textGrowth": "fixed-width", "width": "fill_container" }, { "type": "text", "id": "ghC2a", "content": "Luca Rossi", "fill": "$--muted-foreground", "fontSize": 10 } ] }, { "type": "frame", "id": "ghC3", "layout": "vertical", "width": "fill_container", "gap": 2, "padding": [ 0, 0, 0, 10 ], "stroke": { "fill": "$--border", "thickness": { "left": 2 } }, "children": [ { "type": "frame", "id": "ghC3r", "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "ghC3h", "content": "i7j8k9l", "fill": "$--primary", "fontSize": 11, "fontWeight": "500", "underline": true }, { "type": "text", "id": "ghC3d", "content": "12d ago", "fill": "$--muted-foreground", "fontSize": 10 } ] }, { "type": "text", "id": "ghC3m", "content": "Create grow-newsletter", "fill": "$--secondary-foreground", "fontSize": 12, "textGrowth": "fixed-width", "width": "fill_container" }, { "type": "text", "id": "ghC3a", "content": "Luca Rossi", "fill": "$--muted-foreground", "fontSize": 10 } ] } ] }, { "type": "frame", "id": "ghDO1", "x": 380, "y": 7320, "name": "Git History — Diff Open", "width": 600, "height": "fit_content(500)", "fill": "$--background", "cornerRadius": "$--radius-lg", "stroke": { "fill": "$--border", "thickness": 1 }, "layout": "vertical", "gap": 0, "padding": 0, "children": [ { "type": "frame", "id": "ghDObc", "layout": "horizontal", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "gap": 8, "alignItems": "center", "fill": "$--muted", "stroke": { "fill": "$--border", "thickness": { "bottom": 1 } }, "children": [ { "type": "text", "id": "ghDObcP", "content": "responsibility / grow-newsletter.md", "fill": "$--muted-foreground", "fontSize": 12 }, { "type": "frame", "id": "ghDObcS", "width": "fill_container", "height": 1 }, { "type": "frame", "id": "ghDObcB", "layout": "horizontal", "padding": [ 2, 8 ], "cornerRadius": "$--radius-sm", "fill": "$--primary", "alignItems": "center", "children": [ { "type": "text", "id": "ghDObcBt", "content": "Diff: a1b2c3d", "fill": "$--primary-foreground", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "ghDOb", "layout": "vertical", "width": "fill_container", "padding": 0, "gap": 0, "children": [ { "type": "frame", "id": "ghDOl1", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "fill": "$--muted", "children": [ { "type": "text", "id": "ghDOl1n", "content": "1", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl1t", "content": "diff --git a/grow-newsletter.md b/grow-newsletter.md", "fill": "$--muted-foreground", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "ghDOl2", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "fill": "#2196F30D", "children": [ { "type": "text", "id": "ghDOl2n", "content": "2", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl2t", "content": "@@ -5,3 +5,5 @@", "fill": "$--primary", "fontSize": 11, "fontStyle": "italic" } ] }, { "type": "frame", "id": "ghDOl3", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghDOl3n", "content": "3", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl3t", "content": " # Grow Newsletter", "fill": "$--secondary-foreground", "fontSize": 11 } ] }, { "type": "frame", "id": "ghDOl4", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "fill": "#f4433614", "children": [ { "type": "text", "id": "ghDOl4n", "content": "4", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl4t", "content": "-Old paragraph from before a1b2c3d.", "fill": "#f44336", "fontSize": 11 } ] }, { "type": "frame", "id": "ghDOl5", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "fill": "#4caf5014", "children": [ { "type": "text", "id": "ghDOl5n", "content": "5", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl5t", "content": "+Updated paragraph at commit a1b2c3d.", "fill": "#4caf50", "fontSize": 11 } ] }, { "type": "frame", "id": "ghDOl6", "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ 0, 8 ], "alignItems": "center", "fill": "#4caf5014", "children": [ { "type": "text", "id": "ghDOl6n", "content": "6", "fill": "$--muted-foreground", "fontSize": 11, "textGrowth": "fixed-width", "width": 30, "textAlign": "right" }, { "type": "text", "id": "ghDOl6t", "content": "+New content added in this commit.", "fill": "#4caf50", "fontSize": 11 } ] } ] } ] }, { "type": "frame", "id": "rnt0", "name": "Rename Tab — Normal tab state", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "rnt1", "name": "frameLabel", "content": "Normal state: tabs show note title. Double-click to rename.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "rnt2", "name": "Tab Bar Normal", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "rnt3", "name": "Tab Active", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "rnt4", "fill": "$--foreground", "content": "Weekly Review", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rnt5", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rnt6", "name": "Tab Inactive", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "rnt7", "fill": "$--muted-foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "rnt8", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rnt9", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "rnta", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "rntb", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "rntc", "name": "interactionNote", "content": "Double-click tab title → enters edit mode", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "rne0", "name": "Rename Tab — Double-clicked (editing mode)", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "rne1", "name": "frameLabel", "content": "Editing mode: tab title replaced with inline input field, text selected.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "rne2", "name": "Tab Bar Editing", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "rne3", "name": "Tab Active (Editing)", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "frame", "id": "rne4", "name": "Inline Input", "fill": "$--background", "stroke": { "align": "inside", "thickness": 1, "fill": "$--ring" }, "cornerRadius": 3, "padding": [ 2, 6 ], "alignItems": "center", "children": [ { "type": "text", "id": "rne5", "fill": "$--foreground", "content": "Weekly Review", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500", "highlight": "$--primary", "highlightOpacity": 0.2 } ] }, { "type": "icon_font", "id": "rne6", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rne7", "name": "Tab Inactive", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "rne8", "fill": "$--muted-foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "rne9", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rnea", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "rneb", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "rnec", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "rned", "name": "interactionNote", "content": "Enter → save & rename file + update wiki links | Escape → cancel | Blur → save", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "rns0", "name": "Rename Tab — Saved (updated name)", "width": 800, "height": 120, "layout": "vertical", "fill": "$--sidebar", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "rns1", "name": "frameLabel", "content": "After save: tab shows updated title. File renamed, wiki links updated across vault.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "rns2", "name": "Tab Bar Saved", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "rns3", "name": "Tab Active (Renamed)", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "rns4", "fill": "$--foreground", "content": "Sprint Retrospective", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rns5", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rns6", "name": "Tab Inactive", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "rns7", "fill": "$--muted-foreground", "content": "Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "rns8", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rns9", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "rnsa", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "rnsb", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "rnsc", "name": "interactionNote", "content": "File: weekly-review.md → sprint-retrospective.md | [[Weekly Review]] → [[Sprint Retrospective]] in all notes", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 4, 12 ] } ] }, { "type": "frame", "id": "mb001", "x": 0, "y": 0, "name": "macOS Border — Before (no border)", "theme": { "Mode": "Light" }, "clip": true, "width": 400, "height": 200, "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "mb002", "name": "macOS Title Bar (before)", "width": "fill_container", "height": 38, "fill": "$--sidebar", "gap": 12, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "mb003", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "mb004", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "mb005", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "mb006", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "mb007", "name": "Sidebar Content (before)", "width": "fill_container", "height": "fill_container", "fill": "$--sidebar", "padding": [ 8, 12 ], "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "mb008", "value": "All Notes", "fontSize": 14, "fill": "$--foreground" }, { "type": "text", "id": "mb009", "value": "Favorites", "fontSize": 14, "fill": "$--foreground" }, { "type": "text", "id": "mb010", "value": "Archive", "fontSize": 14, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "mb011", "x": 440, "y": 0, "name": "macOS Border — After (with border)", "theme": { "Mode": "Light" }, "clip": true, "width": 400, "height": 200, "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "mb012", "name": "macOS Title Bar (after)", "width": "fill_container", "height": 38, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "mb013", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "mb014", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "mb015", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "mb016", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "mb017", "name": "Sidebar Content (after)", "width": "fill_container", "height": "fill_container", "fill": "$--sidebar", "padding": [ 8, 12 ], "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "mb018", "value": "All Notes", "fontSize": 14, "fill": "$--foreground" }, { "type": "text", "id": "mb019", "value": "Favorites", "fontSize": 14, "fill": "$--foreground" }, { "type": "text", "id": "mb020", "value": "Archive", "fontSize": 14, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "iogBH", "x": 5500, "y": 100, "name": "Settings Panel — Modal", "width": 520, "fill": "$--background", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "61XqC", "name": "Header", "width": "fill_container", "height": 56, "stroke": { "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 24 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "2IAX7", "name": "Title", "fill": "$--foreground", "content": "Settings", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "600" }, { "type": "icon_font", "id": "kIGy9", "name": "Close Icon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "Jk6ga", "name": "Body", "width": "fill_container", "layout": "vertical", "gap": 24, "padding": 24, "children": [ { "type": "text", "id": "efWNx", "name": "Section Label", "fill": "$--foreground", "content": "AI Provider Keys", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "wYQL5", "name": "Section Description", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "API keys are stored locally on your device. Never sent to our servers.", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "lo4r8", "name": "Anthropic Key Row", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "WogRV", "name": "anthropicLabel", "fill": "$--foreground", "content": "Anthropic", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "frame", "id": "GUELn", "name": "Input", "width": "fill_container", "height": 36, "fill": "$--background", "cornerRadius": "$--radius-md", "stroke": { "thickness": 1, "fill": "$--border" }, "gap": 8, "padding": [ 0, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "NjLRf", "name": "anthropicValue", "fill": "$--foreground", "content": "sk-ant-•••••••••••••k4Rm", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "icon_font", "id": "kBDAI", "name": "anthropicClear", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "qaTjV", "name": "OpenAI Key Row", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "etofy", "name": "openaiLabel", "fill": "$--foreground", "content": "OpenAI", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "frame", "id": "BKXuT", "name": "Input Empty", "width": "fill_container", "height": 36, "fill": "$--background", "cornerRadius": "$--radius-md", "stroke": { "thickness": 1, "fill": "$--border" }, "padding": [ 0, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "EHi9A", "name": "openaiPlaceholder", "fill": "$--muted-foreground", "content": "sk-...", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "ZM8dg", "name": "Google Key Row", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "qzpsp", "name": "googleLabel", "fill": "$--foreground", "content": "Google AI", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "frame", "id": "pRsLr", "name": "Input Empty", "width": "fill_container", "height": 36, "fill": "$--background", "cornerRadius": "$--radius-md", "stroke": { "thickness": 1, "fill": "$--border" }, "padding": [ 0, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "KAqg2", "name": "googlePlaceholder", "fill": "$--muted-foreground", "content": "AIza...", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "be7TS", "name": "Footer", "width": "fill_container", "height": 56, "stroke": { "thickness": { "top": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 24 ], "justifyContent": "end", "alignItems": "center", "children": [ { "type": "text", "id": "LAIeB", "name": "footerHint", "fill": "$--muted-foreground", "content": "Cmd+, to open settings", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "frame", "id": "DR2VW", "name": "Spacer", "width": "fill_container", "height": 1 }, { "type": "frame", "id": "u9fBE", "name": "Save Button", "height": 32, "fill": "$--primary", "cornerRadius": "$--radius-md", "padding": [ 0, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "yRYWq", "name": "saveBtnLabel", "fill": "$--primary-foreground", "content": "Save", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "srtDD", "x": 0, "y": 0, "name": "Sort Dropdown — Direction Arrows", "clip": true, "width": 260, "height": 280, "fill": "$--popover", "cornerRadius": "$--radius-md", "stroke": { "align": "outside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "padding": [ 8, 0 ], "children": [ { "type": "frame", "id": "srtH1", "name": "dropdownHeader", "width": "fill_container", "height": 28, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtHL", "name": "headerLabel", "content": "Sort by", "fontSize": 11, "fontWeight": 600, "fill": "$--muted-foreground", "fontFamily": "$--font-primary", "textTransform": "uppercase", "letterSpacing": 0.5 } ] }, { "type": "frame", "id": "srtR1", "name": "row-modified", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "fill": "$--muted", "children": [ { "type": "text", "id": "srtT1", "name": "label-modified", "content": "Modified", "fontSize": 13, "fontWeight": 500, "fill": "$--popover-foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "frame", "id": "srtA1", "name": "arrows-modified", "gap": 2, "alignItems": "center", "children": [ { "type": "text", "id": "srtU1", "name": "arrow-up-active", "content": "↑", "fontSize": 13, "fontWeight": 700, "fill": "$--accent-blue" }, { "type": "text", "id": "srtD1", "name": "arrow-down", "content": "↓", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "srtR2", "name": "row-title", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtT2", "name": "label-title", "content": "Title", "fontSize": 13, "fontWeight": 400, "fill": "$--popover-foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "frame", "id": "srtA2", "name": "arrows-title", "gap": 2, "alignItems": "center", "children": [ { "type": "text", "id": "srtU2", "name": "arrow-up", "content": "↑", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" }, { "type": "text", "id": "srtD2", "name": "arrow-down", "content": "↓", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "srtR3", "name": "row-created", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtT3", "name": "label-created", "content": "Created", "fontSize": 13, "fontWeight": 400, "fill": "$--popover-foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "frame", "id": "srtA3", "name": "arrows-created", "gap": 2, "alignItems": "center", "children": [ { "type": "text", "id": "srtU3", "name": "arrow-up", "content": "↑", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" }, { "type": "text", "id": "srtD3", "name": "arrow-down", "content": "↓", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "srtR4", "name": "row-type", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtT4", "name": "label-type", "content": "Type", "fontSize": 13, "fontWeight": 400, "fill": "$--popover-foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "frame", "id": "srtA4", "name": "arrows-type", "gap": 2, "alignItems": "center", "children": [ { "type": "text", "id": "srtU4", "name": "arrow-up", "content": "↑", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" }, { "type": "text", "id": "srtD4", "name": "arrow-down", "content": "↓", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "srtSP", "name": "separator", "width": "fill_container", "height": 1, "fill": "$--border" }, { "type": "frame", "id": "srtAN", "name": "annotation", "width": "fill_container", "padding": [ 6, 12 ], "children": [ { "type": "text", "id": "srtAT", "name": "annotation-text", "content": "Click ↑↓ to toggle direction. Blue = active.", "fontSize": 11, "fill": "$--muted-foreground", "fontFamily": "$--font-primary" } ] } ] }, { "type": "frame", "id": "srtBN", "x": 300, "y": 0, "name": "Sort Button — With Direction Indicator", "clip": true, "width": 400, "height": 200, "fill": "$--background", "cornerRadius": "$--radius-md", "stroke": { "align": "outside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "padding": [ 16, 16 ], "gap": 16, "children": [ { "type": "frame", "id": "srtBH", "name": "noteListHeader", "width": "fill_container", "height": 36, "alignItems": "center", "children": [ { "type": "text", "id": "srtBC", "name": "noteCount", "content": "42 notes", "fontSize": 12, "fill": "$--muted-foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "frame", "id": "srtBB", "name": "sortButton", "padding": [ 4, 8 ], "cornerRadius": "$--radius-sm", "fill": "$--muted", "alignItems": "center", "gap": 4, "children": [ { "type": "text", "id": "srtBL", "name": "sortLabel", "content": "Modified", "fontSize": 12, "fontWeight": 500, "fill": "$--foreground", "fontFamily": "$--font-primary" }, { "type": "text", "id": "srtBA", "name": "directionArrow", "content": "↓", "fontSize": 12, "fontWeight": 600, "fill": "$--accent-blue" } ] } ] }, { "type": "frame", "id": "srtSP2", "name": "divider", "width": "fill_container", "height": 1, "fill": "$--border" }, { "type": "frame", "id": "srtEX", "name": "exampleNotes", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ { "type": "frame", "id": "srtN1", "name": "noteRow1", "width": "fill_container", "height": 32, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtNT1", "name": "noteTitle1", "content": "Meeting Notes — Feb 22", "fontSize": 13, "fill": "$--foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "text", "id": "srtND1", "name": "noteDate1", "content": "2 min ago", "fontSize": 11, "fill": "$--muted-foreground", "fontFamily": "$--font-primary" } ] }, { "type": "frame", "id": "srtN2", "name": "noteRow2", "width": "fill_container", "height": 32, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtNT2", "name": "noteTitle2", "content": "Project Roadmap", "fontSize": 13, "fill": "$--foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "text", "id": "srtND2", "name": "noteDate2", "content": "1 hr ago", "fontSize": 11, "fill": "$--muted-foreground", "fontFamily": "$--font-primary" } ] }, { "type": "frame", "id": "srtN3", "name": "noteRow3", "width": "fill_container", "height": 32, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "srtNT3", "name": "noteTitle3", "content": "Weekly Review", "fontSize": 13, "fill": "$--foreground", "fontFamily": "$--font-primary", "width": "fill_container" }, { "type": "text", "id": "srtND3", "name": "noteDate3", "content": "Yesterday", "fontSize": 11, "fill": "$--muted-foreground", "fontFamily": "$--font-primary" } ] } ] }, { "type": "frame", "id": "srtAN2", "name": "annotation", "width": "fill_container", "padding": [ 6, 0 ], "children": [ { "type": "text", "id": "srtAT2", "name": "annotation-text", "content": "Sort button shows property + direction arrow. Click to open dropdown.", "fontSize": 11, "fill": "$--muted-foreground", "fontFamily": "$--font-primary" } ] } ] }, { "type": "frame", "id": "ghv01", "x": 68, "y": 0, "name": "GitHub Vault — Modal empty state", "clip": true, "width": 560, "height": 480, "fill": "$--background", "cornerRadius": 12, "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv01-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": "ghv01-title", "name": "title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "ghv01-close", "name": "closeBtn", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [ { "type": "text", "id": "ghv01-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv01-tabs", "name": "TabBar", "width": "fill_container", "height": 44, "fill": "$--background", "padding": [ 0, 24 ], "gap": 0, "alignItems": "end", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv01-tab-clone", "name": "Tab: Clone Existing", "padding": [ 8, 16 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--accent-blue" }, "children": [ { "type": "text", "id": "ghv01-tab-clone-lbl", "content": "Clone Existing", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv01-tab-create", "name": "Tab: Create New", "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-tab-create-lbl", "content": "Create New", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv01-body", "name": "Body: Empty State", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [ 32, 24 ], "gap": 16, "alignItems": "center", "justifyContent": "center", "children": [ { "type": "frame", "id": "ghv01-icon", "name": "githubIcon", "width": 48, "height": 48, "cornerRadius": 24, "fill": "$--accent", "alignItems": "center", "justifyContent": "center", "children": [ { "type": "text", "id": "ghv01-gh", "content": "GH", "fontSize": 20, "fontWeight": 600, "fill": "$--muted-foreground" } ] }, { "type": "text", "id": "ghv01-heading", "content": "Clone an existing GitHub repository", "fontSize": 15, "fontWeight": 600, "fill": "$--foreground", "textAlign": "center" }, { "type": "text", "id": "ghv01-desc", "content": "Search your repos or paste a URL to clone a GitHub repo as a vault.", "fontSize": 13, "fill": "$--muted-foreground", "textAlign": "center", "width": 360 }, { "type": "frame", "id": "ghv01-search", "name": "SearchInput", "width": 400, "height": 40, "cornerRadius": 8, "fill": "$--input", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-placeholder", "content": "Search repos or paste URL...", "fontSize": 13, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv01-footer", "name": "Footer", "width": "fill_container", "height": 56, "padding": [ 0, 24 ], "alignItems": "center", "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv01-hint", "content": "Connected as @lucaong", "fontSize": 11, "fill": "$--muted-foreground" }, { "type": "frame", "id": "ghv01-btns", "name": "buttons", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ghv01-cancel", "name": "cancelBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv01-cancel-lbl", "content": "Cancel", "fontSize": 13, "fill": "$--foreground" } ] } ] } ] } ] }, { "type": "frame", "id": "ghv02", "x": 700, "y": 0, "name": "GitHub Vault — Clone repo list", "clip": true, "width": 560, "height": 540, "fill": "$--background", "cornerRadius": 12, "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv02-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": "ghv02-title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "ghv02-close", "name": "closeBtn", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [ { "type": "text", "id": "ghv02-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv02-tabs", "name": "TabBar", "width": "fill_container", "height": 44, "fill": "$--background", "padding": [ 0, 24 ], "gap": 0, "alignItems": "end", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv02-tab-clone", "name": "Tab: Clone Existing (active)", "padding": [ 8, 16 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--accent-blue" }, "children": [ { "type": "text", "id": "ghv02-tab-clone-lbl", "content": "Clone Existing", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv02-tab-create", "name": "Tab: Create New", "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-tab-create-lbl", "content": "Create New", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv02-body", "name": "Body: Repo List", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [ 16, 24 ], "gap": 12, "children": [ { "type": "frame", "id": "ghv02-search", "name": "SearchInput (filled)", "width": "fill_container", "height": 40, "cornerRadius": 8, "fill": "$--input", "stroke": { "align": "inside", "thickness": 1, "fill": "$--ring" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-search-val", "content": "laputa", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv02-list", "name": "RepoList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 2, "children": [ { "type": "frame", "id": "ghv02-repo1", "name": "RepoItem: selected", "width": "fill_container", "height": 56, "cornerRadius": 6, "fill": "$--accent", "padding": [ 8, 12 ], "layout": "vertical", "gap": 4, "justifyContent": "center", "children": [ { "type": "frame", "id": "ghv02-repo1-row", "name": "topRow", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-repo1-name", "content": "lucaong/laputa-vault", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "ghv02-repo1-badge", "name": "privateBadge", "padding": [ 2, 6 ], "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv02-repo1-priv", "content": "Private", "fontSize": 10, "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "ghv02-repo1-desc", "content": "Personal knowledge vault — markdown + YAML frontmatter", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "ghv02-repo2", "name": "RepoItem: unselected", "width": "fill_container", "height": 56, "cornerRadius": 6, "padding": [ 8, 12 ], "layout": "vertical", "gap": 4, "justifyContent": "center", "children": [ { "type": "frame", "id": "ghv02-repo2-row", "name": "topRow", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-repo2-name", "content": "lucaong/laputa-app", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "frame", "id": "ghv02-repo2-badge", "name": "publicBadge", "padding": [ 2, 6 ], "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv02-repo2-pub", "content": "Public", "fontSize": 10, "fill": "$--muted-foreground" } ] } ] }, { "type": "text", "id": "ghv02-repo2-desc", "content": "Laputa desktop app — Tauri + React + CodeMirror 6", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "ghv02-repo3", "name": "RepoItem: unselected 2", "width": "fill_container", "height": 56, "cornerRadius": 6, "padding": [ 8, 12 ], "layout": "vertical", "gap": 4, "justifyContent": "center", "children": [ { "type": "frame", "id": "ghv02-repo3-row", "name": "topRow", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-repo3-name", "content": "lucaong/dotfiles", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" } ] }, { "type": "text", "id": "ghv02-repo3-desc", "content": "My macOS dotfiles and config", "fontSize": 12, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv02-path", "name": "LocalPathPicker", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "ghv02-path-lbl", "content": "Clone to:", "fontSize": 12, "fontWeight": 500, "fill": "$--foreground" }, { "type": "frame", "id": "ghv02-path-input", "name": "pathInput", "width": "fill_container", "height": 36, "cornerRadius": 6, "fill": "$--input", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-path-val", "content": "~/Vaults/laputa-vault", "fontSize": 12, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "ghv02-footer", "name": "Footer", "width": "fill_container", "height": 56, "padding": [ 0, 24 ], "alignItems": "center", "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv02-hint", "content": "3 repos found", "fontSize": 11, "fill": "$--muted-foreground" }, { "type": "frame", "id": "ghv02-btns", "name": "buttons", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ghv02-cancel", "name": "cancelBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv02-cancel-lbl", "content": "Cancel", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv02-clone-btn", "name": "cloneBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "fill": "$--primary", "children": [ { "type": "text", "id": "ghv02-clone-lbl", "content": "Clone & Open", "fontSize": 13, "fontWeight": 500, "fill": "#FFFFFF" } ] } ] } ] } ] }, { "type": "frame", "id": "ghv03", "x": 68, "y": 600, "name": "GitHub Vault — Create new repo", "clip": true, "width": 560, "height": 440, "fill": "$--background", "cornerRadius": 12, "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv03-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": "ghv03-title", "content": "Connect GitHub Repo", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "ghv03-close", "name": "closeBtn", "width": 24, "height": 24, "cornerRadius": 4, "alignItems": "center", "justifyContent": "center", "children": [ { "type": "text", "id": "ghv03-x", "content": "X", "fontSize": 14, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "ghv03-tabs", "name": "TabBar", "width": "fill_container", "height": 44, "fill": "$--background", "padding": [ 0, 24 ], "gap": 0, "alignItems": "end", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv03-tab-clone", "name": "Tab: Clone Existing", "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv03-tab-clone-lbl", "content": "Clone Existing", "fontSize": 13, "fontWeight": 400, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "ghv03-tab-create", "name": "Tab: Create New (active)", "padding": [ 8, 16 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--accent-blue" }, "children": [ { "type": "text", "id": "ghv03-tab-create-lbl", "content": "Create New", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "ghv03-body", "name": "Body: Create Form", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [ 24, 24 ], "gap": 20, "children": [ { "type": "frame", "id": "ghv03-name-field", "name": "RepoNameField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "ghv03-name-lbl", "content": "Repository name", "fontSize": 12, "fontWeight": 500, "fill": "$--foreground" }, { "type": "frame", "id": "ghv03-name-input", "name": "nameInput", "width": "fill_container", "height": 40, "cornerRadius": 8, "fill": "$--input", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv03-name-val", "content": "my-vault", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "text", "id": "ghv03-name-hint", "content": "github.com/lucaong/my-vault", "fontSize": 11, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "ghv03-vis-field", "name": "VisibilityToggle", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "ghv03-vis-lbl", "content": "Visibility", "fontSize": 12, "fontWeight": 500, "fill": "$--foreground" }, { "type": "frame", "id": "ghv03-vis-opts", "name": "options", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "ghv03-opt-priv", "name": "PrivateOption (selected)", "padding": [ 6, 12 ], "cornerRadius": 6, "fill": "$--accent", "stroke": { "align": "inside", "thickness": 1, "fill": "$--accent-blue" }, "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "ghv03-opt-priv-icon", "content": "Lock", "fontSize": 13, "fill": "$--accent-blue" }, { "type": "text", "id": "ghv03-opt-priv-lbl", "content": "Private", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv03-opt-pub", "name": "PublicOption", "padding": [ 6, 12 ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "ghv03-opt-pub-icon", "content": "Globe", "fontSize": 13, "fill": "$--muted-foreground" }, { "type": "text", "id": "ghv03-opt-pub-lbl", "content": "Public", "fontSize": 13, "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "ghv03-path-field", "name": "LocalPathField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "ghv03-path-lbl", "content": "Clone to:", "fontSize": 12, "fontWeight": 500, "fill": "$--foreground" }, { "type": "frame", "id": "ghv03-path-input", "name": "pathInput", "width": "fill_container", "height": 36, "cornerRadius": 6, "fill": "$--input", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "ghv03-path-val", "content": "~/Vaults/my-vault", "fontSize": 12, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "ghv03-footer", "name": "Footer", "width": "fill_container", "height": 56, "padding": [ 0, 24 ], "alignItems": "center", "justifyContent": "end", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv03-btns", "name": "buttons", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ghv03-cancel", "name": "cancelBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv03-cancel-lbl", "content": "Cancel", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv03-create-btn", "name": "createBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "fill": "$--primary", "children": [ { "type": "text", "id": "ghv03-create-lbl", "content": "Create & Clone", "fontSize": 13, "fontWeight": 500, "fill": "#FFFFFF" } ] } ] } ] } ] }, { "type": "frame", "id": "ghv04", "x": 700, "y": 600, "name": "GitHub Vault — Clone in progress", "clip": true, "width": 560, "height": 320, "fill": "$--background", "cornerRadius": 12, "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv04-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": "ghv04-title", "content": "Cloning Repository...", "fontSize": 16, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "ghv04-body", "name": "Body: Progress", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": [ 32, 24 ], "gap": 20, "alignItems": "center", "justifyContent": "center", "children": [ { "type": "frame", "id": "ghv04-spinner", "name": "spinner", "width": 40, "height": 40, "cornerRadius": 20, "stroke": { "align": "inside", "thickness": 3, "fill": "$--accent-blue" } }, { "type": "text", "id": "ghv04-status", "content": "Cloning lucaong/laputa-vault...", "fontSize": 14, "fontWeight": 500, "fill": "$--foreground", "textAlign": "center" }, { "type": "text", "id": "ghv04-sub", "content": "Receiving objects: 67% (1,234/1,842)", "fontSize": 12, "fill": "$--muted-foreground", "textAlign": "center" }, { "type": "frame", "id": "ghv04-bar-bg", "name": "progressBarBg", "width": 360, "height": 4, "cornerRadius": 2, "fill": "$--accent", "children": [ { "type": "frame", "id": "ghv04-bar-fill", "name": "progressBarFill", "width": 241, "height": 4, "cornerRadius": 2, "fill": "$--accent-blue" } ] } ] }, { "type": "frame", "id": "ghv04-footer", "name": "Footer", "width": "fill_container", "height": 56, "padding": [ 0, 24 ], "alignItems": "center", "justifyContent": "end", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "ghv04-cancel", "name": "cancelBtn", "padding": [ 6, 16 ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "text", "id": "ghv04-cancel-lbl", "content": "Cancel", "fontSize": 13, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "SC_all", "name": "Sidebar Collapse — All panels visible", "x": 68, "y": 8000, "clip": true, "width": 1440, "height": 900, "fill": "$--background", "theme": { "Mode": "Light" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_all_title", "name": "macOS Title Bar", "width": "fill_container", "height": 38, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "SC_all_tl", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "SC_all_c", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_all_m", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_all_x", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "SC_all_content", "name": "Content", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "SC_all_sb", "name": "Panel: Sidebar", "clip": true, "width": 250, "height": "fill_container", "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_all_sb_hdr", "name": "SidebarHeader", "width": "fill_container", "height": 32, "padding": [ 0, 8 ], "alignItems": "center", "justifyContent": "flex_end", "children": [ { "type": "frame", "id": "SC_all_sb_btn", "name": "collapseBtn", "width": 24, "height": 24, "cornerRadius": 4, "fill": "transparent", "alignItems": "center", "justifyContent": "center", "children": [ { "type": "icon_font", "id": "SC_all_sb_btn_icon", "name": "chevronIcon", "width": 14, "height": 14, "iconFontName": "caret-left-bold", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "SC_all_sb_nav", "name": "NavItems", "width": "fill_container", "layout": "vertical", "gap": 1, "padding": [ 4, 8 ], "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "SC_all_sb_t1", "text": "All Notes", "fontSize": 13, "fill": "$--foreground", "width": "fill_container", "padding": [ 6, 12 ] }, { "type": "text", "id": "SC_all_sb_t2", "text": "Favorites", "fontSize": 13, "fill": "$--muted-foreground", "width": "fill_container", "padding": [ 6, 12 ] }, { "type": "text", "id": "SC_all_sb_t3", "text": "Archive", "fontSize": 13, "fill": "$--muted-foreground", "width": "fill_container", "padding": [ 6, 12 ] }, { "type": "text", "id": "SC_all_sb_t4", "text": "Trash", "fontSize": 13, "fill": "$--muted-foreground", "width": "fill_container", "padding": [ 6, 12 ] } ] }, { "type": "frame", "id": "SC_all_sb_sec", "name": "Sections", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 8, 8 ], "children": [ { "type": "text", "id": "SC_all_sb_sh", "text": "SECTIONS", "fontSize": 11, "fill": "$--muted-foreground", "letterSpacing": 1.2, "width": "fill_container", "padding": [ 4, 12 ] }, { "type": "text", "id": "SC_all_sb_s1", "text": "Projects", "fontSize": 13, "fill": "$--foreground", "width": "fill_container", "padding": [ 6, 12 ] }, { "type": "text", "id": "SC_all_sb_s2", "text": "Experiments", "fontSize": 13, "fill": "$--muted-foreground", "width": "fill_container", "padding": [ 6, 12 ] } ] } ] }, { "type": "frame", "id": "SC_all_nl", "name": "Panel: NoteList", "clip": true, "width": 300, "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_all_nl_hdr", "name": "NoteListHeader", "width": "fill_container", "height": 40, "padding": [ 0, 12 ], "alignItems": "center", "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "SC_all_nl_title", "text": "All Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "SC_all_nl_count", "text": "42 notes", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "SC_all_nl_list", "name": "NoteItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 0, "children": [ { "type": "frame", "id": "SC_all_nl_n1", "name": "noteItem1", "width": "fill_container", "padding": [ 10, 16 ], "fill": "$--accent", "children": [ { "type": "text", "id": "SC_all_nl_n1t", "text": "My First Project", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_all_nl_n2", "name": "noteItem2", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_all_nl_n2t", "text": "Weekly Review", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_all_nl_n3", "name": "noteItem3", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_all_nl_n3t", "text": "Meeting Notes", "fontSize": 13, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "SC_all_ed", "name": "Panel: Editor", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "SC_all_ed_tabs", "name": "TabBar", "width": "fill_container", "height": 36, "padding": [ 0, 8 ], "alignItems": "center", "gap": 4, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "fill": "$--background", "children": [ { "type": "frame", "id": "SC_all_ed_tab1", "name": "activeTab", "padding": [ 6, 12 ], "cornerRadius": [ 6, 6, 0, 0 ], "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--primary" }, "children": [ { "type": "text", "id": "SC_all_ed_tab1t", "text": "My First Project", "fontSize": 12, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "SC_all_ed_content", "name": "EditorContent", "width": "fill_container", "height": "fill_container", "padding": [ 24, 48 ], "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "SC_all_ed_h1", "text": "My First Project", "fontSize": 28, "fontWeight": 700, "fill": "$--foreground", "width": "fill_container" }, { "type": "text", "id": "SC_all_ed_p1", "text": "This is the editor area with full markdown editing support.", "fontSize": 15, "fill": "$--foreground", "width": "fill_container", "lineHeight": 1.6 }, { "type": "text", "id": "SC_all_ed_p2", "text": "The editor expands to fill all available space when panels are collapsed.", "fontSize": 15, "fill": "$--muted-foreground", "width": "fill_container", "lineHeight": 1.6 } ] } ] } ] } ] }, { "type": "frame", "id": "SC_nosb", "name": "Sidebar Collapse — Sidebar collapsed", "x": 68, "y": 9000, "clip": true, "width": 1440, "height": 900, "fill": "$--background", "theme": { "Mode": "Light" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_nosb_title", "name": "macOS Title Bar", "width": "fill_container", "height": 38, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "SC_nosb_tl", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "SC_nosb_c", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_nosb_m", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_nosb_x", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "SC_nosb_content", "name": "Content", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "SC_nosb_nl", "name": "Panel: NoteList", "clip": true, "width": 300, "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_nosb_nl_hdr", "name": "NoteListHeader", "width": "fill_container", "height": 40, "padding": [ 0, 12 ], "alignItems": "center", "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "SC_nosb_nl_title", "text": "All Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "SC_nosb_nl_count", "text": "42 notes", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "SC_nosb_nl_list", "name": "NoteItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 0, "children": [ { "type": "frame", "id": "SC_nosb_nl_n1", "name": "noteItem1", "width": "fill_container", "padding": [ 10, 16 ], "fill": "$--accent", "children": [ { "type": "text", "id": "SC_nosb_nl_n1t", "text": "My First Project", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_nosb_nl_n2", "name": "noteItem2", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_nosb_nl_n2t", "text": "Weekly Review", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_nosb_nl_n3", "name": "noteItem3", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_nosb_nl_n3t", "text": "Meeting Notes", "fontSize": 13, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "SC_nosb_ed", "name": "Panel: Editor", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "SC_nosb_ed_tabs", "name": "TabBar", "width": "fill_container", "height": 36, "padding": [ 0, 8 ], "alignItems": "center", "gap": 4, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "fill": "$--background", "children": [ { "type": "frame", "id": "SC_nosb_ed_tab1", "name": "activeTab", "padding": [ 6, 12 ], "cornerRadius": [ 6, 6, 0, 0 ], "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--primary" }, "children": [ { "type": "text", "id": "SC_nosb_ed_tab1t", "text": "My First Project", "fontSize": 12, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "SC_nosb_ed_content", "name": "EditorContent", "width": "fill_container", "height": "fill_container", "padding": [ 24, 48 ], "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "SC_nosb_ed_h1", "text": "My First Project", "fontSize": 28, "fontWeight": 700, "fill": "$--foreground", "width": "fill_container" }, { "type": "text", "id": "SC_nosb_ed_p1", "text": "This is the editor area with full markdown editing support.", "fontSize": 15, "fill": "$--foreground", "width": "fill_container", "lineHeight": 1.6 }, { "type": "text", "id": "SC_nosb_ed_p2", "text": "The editor expands to fill all available space when panels are collapsed.", "fontSize": 15, "fill": "$--muted-foreground", "width": "fill_container", "lineHeight": 1.6 } ] } ] } ] } ] }, { "type": "frame", "id": "SC_edonly", "name": "Sidebar Collapse — Editor only", "x": 68, "y": 10000, "clip": true, "width": 1440, "height": 900, "fill": "$--background", "theme": { "Mode": "Light" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_edonly_title", "name": "macOS Title Bar", "width": "fill_container", "height": 38, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "SC_edonly_tl", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "SC_edonly_c", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_edonly_m", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_edonly_x", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "SC_edonly_content", "name": "Content", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "SC_edonly_ed", "name": "Panel: Editor", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "SC_edonly_ed_tabs", "name": "TabBar", "width": "fill_container", "height": 36, "padding": [ 0, 8 ], "alignItems": "center", "gap": 4, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "fill": "$--background", "children": [ { "type": "frame", "id": "SC_edonly_ed_tab1", "name": "activeTab", "padding": [ 6, 12 ], "cornerRadius": [ 6, 6, 0, 0 ], "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--primary" }, "children": [ { "type": "text", "id": "SC_edonly_ed_tab1t", "text": "My First Project", "fontSize": 12, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "SC_edonly_ed_content", "name": "EditorContent", "width": "fill_container", "height": "fill_container", "padding": [ 24, 48 ], "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "SC_edonly_ed_h1", "text": "My First Project", "fontSize": 28, "fontWeight": 700, "fill": "$--foreground", "width": "fill_container" }, { "type": "text", "id": "SC_edonly_ed_p1", "text": "This is the editor area with full markdown editing support.", "fontSize": 15, "fill": "$--foreground", "width": "fill_container", "lineHeight": 1.6 }, { "type": "text", "id": "SC_edonly_ed_p2", "text": "The editor expands to fill all available space when panels are collapsed.", "fontSize": 15, "fill": "$--muted-foreground", "width": "fill_container", "lineHeight": 1.6 } ] } ] } ] } ] }, { "type": "frame", "id": "SC_ednl", "name": "Sidebar Collapse — Editor + notes", "x": 68, "y": 11000, "clip": true, "width": 1440, "height": 900, "fill": "$--background", "theme": { "Mode": "Light" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_ednl_title", "name": "macOS Title Bar", "width": "fill_container", "height": 38, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "SC_ednl_tl", "name": "trafficLights", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", "id": "SC_ednl_c", "fill": "#FF5F57", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_ednl_m", "fill": "#FEBC2E", "width": 12, "height": 12 }, { "type": "ellipse", "id": "SC_ednl_x", "fill": "#28C840", "width": 12, "height": 12 } ] } ] }, { "type": "frame", "id": "SC_ednl_content", "name": "Content", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "SC_ednl_nl", "name": "Panel: NoteList", "clip": true, "width": 300, "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "SC_ednl_nl_hdr", "name": "NoteListHeader", "width": "fill_container", "height": 40, "padding": [ 0, 12 ], "alignItems": "center", "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "SC_ednl_nl_title", "text": "All Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "SC_ednl_nl_count", "text": "42 notes", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "SC_ednl_nl_list", "name": "NoteItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 0, "children": [ { "type": "frame", "id": "SC_ednl_nl_n1", "name": "noteItem1", "width": "fill_container", "padding": [ 10, 16 ], "fill": "$--accent", "children": [ { "type": "text", "id": "SC_ednl_nl_n1t", "text": "My First Project", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_ednl_nl_n2", "name": "noteItem2", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_ednl_nl_n2t", "text": "Weekly Review", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "SC_ednl_nl_n3", "name": "noteItem3", "width": "fill_container", "padding": [ 10, 16 ], "children": [ { "type": "text", "id": "SC_ednl_nl_n3t", "text": "Meeting Notes", "fontSize": 13, "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "SC_ednl_ed", "name": "Panel: Editor", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--background", "layout": "vertical", "children": [ { "type": "frame", "id": "SC_ednl_ed_tabs", "name": "TabBar", "width": "fill_container", "height": 36, "padding": [ 0, 8 ], "alignItems": "center", "gap": 4, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "fill": "$--background", "children": [ { "type": "frame", "id": "SC_ednl_ed_tab1", "name": "activeTab", "padding": [ 6, 12 ], "cornerRadius": [ 6, 6, 0, 0 ], "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 2 }, "fill": "$--primary" }, "children": [ { "type": "text", "id": "SC_ednl_ed_tab1t", "text": "My First Project", "fontSize": 12, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "SC_ednl_ed_content", "name": "EditorContent", "width": "fill_container", "height": "fill_container", "padding": [ 24, 48 ], "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "SC_ednl_ed_h1", "text": "My First Project", "fontSize": 28, "fontWeight": 700, "fill": "$--foreground", "width": "fill_container" }, { "type": "text", "id": "SC_ednl_ed_p1", "text": "This is the editor area with full markdown editing support.", "fontSize": 15, "fill": "$--foreground", "width": "fill_container", "lineHeight": 1.6 }, { "type": "text", "id": "SC_ednl_ed_p2", "text": "The editor expands to fill all available space when panels are collapsed.", "fontSize": 15, "fill": "$--muted-foreground", "width": "fill_container", "lineHeight": 1.6 } ] } ] } ] } ] }, { "type": "frame", "id": "pi01", "name": "Properties Inspector — Editable Properties", "width": 320, "height": 520, "layout": "vertical", "fill": "$--background", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "pi02", "name": "frameLabel", "content": "Editable properties section: interactive hover states, cursor pointer, click-to-edit inputs. Properties from frontmatter YAML that the user can modify.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "pi03", "name": "Inspector Header", "width": "fill_container", "height": 45, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "gap": 8, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "pi04", "width": 16, "height": 16, "iconFontName": "sliders-horizontal", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "pi05", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600", "fill": "$--muted-foreground", "width": "fill_container" }, { "type": "icon_font", "id": "pi06", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "pi07", "name": "Properties Section", "width": "fill_container", "layout": "vertical", "padding": [ 12, 12 ], "gap": 10, "children": [ { "type": "frame", "id": "pi08", "name": "Type Row", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi09", "content": "TYPE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground" }, { "type": "frame", "id": "pi10", "name": "Type Badge", "fill": "$--accent-blue-light", "cornerRadius": 6, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "pi11", "content": "Project", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500", "fill": "$--accent-blue" } ] } ] }, { "type": "frame", "id": "pi12", "name": "Editable Row — Status (hover state)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "cornerRadius": 4, "fill": "$--bg-hover-subtle", "padding": [ 4, 6 ], "children": [ { "type": "text", "id": "pi13", "content": "STATUS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground" }, { "type": "frame", "id": "pi14", "name": "Status Badge", "fill": "$--accent-green-light", "cornerRadius": 16, "padding": [ 1, 6 ], "children": [ { "type": "text", "id": "pi15", "content": "ACTIVE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1.2, "fill": "$--accent-green" } ] } ] }, { "type": "frame", "id": "pi16", "name": "Editable Row — Owner (normal state)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "cornerRadius": 4, "padding": [ 4, 6 ], "children": [ { "type": "text", "id": "pi17", "content": "OWNER", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground" }, { "type": "text", "id": "pi18", "content": "Luca Rossi", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal", "fill": "$--foreground" } ] }, { "type": "frame", "id": "pi19", "name": "Editable Row — Tags (normal state)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "cornerRadius": 4, "padding": [ 4, 6 ], "children": [ { "type": "text", "id": "pi20", "content": "TAGS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground" }, { "type": "frame", "id": "pi21", "name": "Tag Pills", "gap": 4, "children": [ { "type": "frame", "id": "pi22", "fill": "$--accent-blue-light", "cornerRadius": 12, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "pi23", "content": "React", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "fill": "$--accent-blue" } ] }, { "type": "frame", "id": "pi24", "fill": "$--accent-blue-light", "cornerRadius": 12, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "pi25", "content": "TypeScript", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "fill": "$--accent-blue" } ] } ] } ] }, { "type": "frame", "id": "pi26", "name": "Add Property Button", "width": "fill_container", "height": 32, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "pi27", "content": "+ Add property", "fontFamily": "Inter", "fontSize": 12, "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "pi28", "name": "Separator", "width": "fill_container", "height": 1, "fill": "$--border" }, { "type": "frame", "id": "pi29", "name": "Info Section — Read-only Metadata", "width": "fill_container", "layout": "vertical", "padding": [ 12, 12 ], "gap": 6, "children": [ { "type": "text", "id": "pi30", "content": "INFO", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground", "padding": [ 0, 0, 4, 0 ] }, { "type": "frame", "id": "pi31", "name": "Info Row — Modified (read-only, muted)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi32", "content": "MODIFIED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--text-muted" }, { "type": "text", "id": "pi33", "content": "Feb 14, 2026", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal", "fill": "$--text-muted" } ] }, { "type": "frame", "id": "pi34", "name": "Info Row — Created (read-only, muted)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi35", "content": "CREATED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--text-muted" }, { "type": "text", "id": "pi36", "content": "Jan 5, 2026", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal", "fill": "$--text-muted" } ] }, { "type": "frame", "id": "pi37", "name": "Info Row — Words (read-only, muted)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi38", "content": "WORDS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--text-muted" }, { "type": "text", "id": "pi39", "content": "1,247", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal", "fill": "$--text-muted" } ] }, { "type": "frame", "id": "pi40", "name": "Info Row — File Size (read-only, muted)", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi41", "content": "SIZE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--text-muted" }, { "type": "text", "id": "pi42", "content": "4.2 KB", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal", "fill": "$--text-muted" } ] } ] } ] }, { "type": "frame", "id": "pi50", "name": "Properties Inspector — Info Section Detail", "width": 320, "height": 400, "layout": "vertical", "fill": "$--background", "theme": { "Mode": "Light" }, "children": [ { "type": "text", "id": "pi51", "name": "frameLabel", "content": "Info section for read-only derived metadata. Labels and values use --text-muted color. No hover states, no cursor pointer, no click interaction. Visually distinct from editable properties above.", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal", "fill": "$--muted-foreground", "padding": [ 8, 12 ] }, { "type": "frame", "id": "pi52", "name": "Comparison Side by Side", "width": "fill_container", "layout": "vertical", "padding": [ 12, 12 ], "gap": 16, "children": [ { "type": "frame", "id": "pi53", "name": "Editable Property Example", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "pi54", "content": "EDITABLE (interactive)", "fontFamily": "IBM Plex Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1.5, "fill": "$--accent-green" }, { "type": "frame", "id": "pi55", "name": "Row — cursor:pointer, hover:bg-muted, rounded", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "cornerRadius": 4, "fill": "$--bg-hover-subtle", "padding": [ 4, 6 ], "children": [ { "type": "text", "id": "pi56", "content": "OWNER", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--muted-foreground" }, { "type": "text", "id": "pi57", "content": "Luca Rossi", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal", "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "pi58", "name": "Read-only Property Example", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "pi59", "content": "READ-ONLY (muted, no interaction)", "fontFamily": "IBM Plex Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1.5, "fill": "$--text-muted" }, { "type": "frame", "id": "pi60", "name": "Row — cursor:default, no hover, muted color", "width": "fill_container", "justifyContent": "space-between", "alignItems": "center", "padding": [ 4, 6 ], "children": [ { "type": "text", "id": "pi61", "content": "MODIFIED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", "letterSpacing": 1.2, "fill": "$--text-muted" }, { "type": "text", "id": "pi62", "content": "Feb 14, 2026", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal", "fill": "$--text-muted" } ] } ] } ] } ] }, { "type": "frame", "id": "rbF01", "x": 0, "y": 0, "name": "Inspector — Referenced By (Multiple)", "theme": { "Mode": "Light" }, "clip": true, "width": 320, "height": 700, "fill": "$--background", "layout": "vertical", "gap": 16, "padding": 16, "children": [ { "type": "frame", "id": "rbF01h", "name": "Inspector Header", "width": "fill_container", "height": 36, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "rbF01hL", "name": "leftGroup", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "rbF01hI", "name": "propIcon", "width": 16, "height": 16, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "text", "id": "rbF01hT", "name": "inspTitle", "fill": "$--muted-foreground", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "icon_font", "id": "rbF01hX", "name": "closeIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rbF01rel", "name": "Relationships Section", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF01relT", "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "frame", "id": "rbF01relB", "name": "relBtn", "width": "fill_container", "fill": "$--accent-blue-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "rbF01relBT", "fill": "$--accent-blue", "content": "Grow Newsletter", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01relBI", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "target", "iconFontFamily": "phosphor", "fill": "$--accent-blue" } ] } ] }, { "type": "frame", "id": "rbF01ref", "name": "Referenced By Section", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "rbF01refH", "name": "refByHeader", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "rbF01refHT", "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF01refHC", "fill": "$--muted-foreground", "content": "5", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "rbF01refG1", "name": "refByGroup — via Belongs to", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF01refG1T", "fill": "$--muted-foreground", "opacity": 0.7, "content": "VIA BELONGS TO", "fontFamily": "IBM Plex Mono", "fontSize": 9 }, { "type": "frame", "id": "rbF01refG1B1", "name": "refItem1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF01refG1B1T", "fill": "$--accent-orange", "content": "Write Weekly Essays", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01refG1B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "fill": "$--accent-orange" } ] }, { "type": "frame", "id": "rbF01refG1B2", "name": "refItem2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF01refG1B2T", "fill": "$--accent-purple", "content": "On Writing Well", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01refG1B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] }, { "type": "frame", "id": "rbF01refG1B3", "name": "refItem3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF01refG1B3T", "fill": "$--accent-purple", "content": "AI Agents Primer", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01refG1B3I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] } ] }, { "type": "frame", "id": "rbF01refG2", "name": "refByGroup — via Related to", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF01refG2T", "fill": "$--muted-foreground", "opacity": 0.7, "content": "VIA RELATED TO", "fontFamily": "IBM Plex Mono", "fontSize": 9 }, { "type": "frame", "id": "rbF01refG2B1", "name": "refItem4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF01refG2B1T", "fill": "$--accent-red", "content": "Failed SEO Experiment", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01refG2B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] }, { "type": "frame", "id": "rbF01refG2B2", "name": "refItem5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF01refG2B2T", "fill": "$--accent-red", "content": "Twitter Thread Experiment", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF01refG2B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] } ] } ] }, { "type": "frame", "id": "rbF01bl", "name": "Backlinks Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "rbF01blT", "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF01blI1", "fill": "$--primary", "content": "Write Weekly Essays", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "rbF02", "x": 360, "y": 0, "name": "Inspector — Referenced By (Empty)", "theme": { "Mode": "Light" }, "clip": true, "width": 320, "height": 500, "fill": "$--background", "layout": "vertical", "gap": 16, "padding": 16, "children": [ { "type": "frame", "id": "rbF02h", "name": "Inspector Header", "width": "fill_container", "height": 36, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "rbF02hL", "name": "leftGroup", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "rbF02hI", "width": 16, "height": 16, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "text", "id": "rbF02hT", "fill": "$--muted-foreground", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "icon_font", "id": "rbF02hX", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rbF02rel", "name": "Relationships Section", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF02relT", "fill": "$--muted-foreground", "content": "No relationships", "fontFamily": "Inter", "fontSize": 13 } ] }, { "type": "frame", "id": "rbF02ref", "name": "Referenced By Section (Empty)", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "rbF02refT", "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF02refE", "fill": "$--muted-foreground", "content": "No references", "fontFamily": "Inter", "fontSize": 13 } ] }, { "type": "frame", "id": "rbF02bl", "name": "Backlinks Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "rbF02blT", "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF02blE", "fill": "$--muted-foreground", "content": "No backlinks", "fontFamily": "Inter", "fontSize": 13 } ] } ] }, { "type": "frame", "id": "rbF03", "x": 720, "y": 0, "name": "Inspector — Referenced By (Many Backlinks)", "theme": { "Mode": "Light" }, "clip": true, "width": 320, "height": 800, "fill": "$--background", "layout": "vertical", "gap": 16, "padding": 16, "children": [ { "type": "frame", "id": "rbF03h", "name": "Inspector Header", "width": "fill_container", "height": 36, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "rbF03hL", "name": "leftGroup", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "rbF03hI", "width": 16, "height": 16, "iconFontName": "sliders-horizontal", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" }, { "type": "text", "id": "rbF03hT", "fill": "$--muted-foreground", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "icon_font", "id": "rbF03hX", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "rbF03rel", "name": "Relationships Section", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "frame", "id": "rbF03relG1", "name": "relGroup — Has", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF03relG1T", "fill": "$--muted-foreground", "content": "HAS", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "frame", "id": "rbF03relG1B1", "width": "fill_container", "fill": "$--accent-purple-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "rbF03relG1B1T", "fill": "$--accent-purple", "content": "On Writing Well", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03relG1B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] }, { "type": "frame", "id": "rbF03relG1B2", "width": "fill_container", "fill": "$--accent-purple-light", "cornerRadius": 6, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "rbF03relG1B2T", "fill": "$--accent-purple", "content": "Engineering Leadership 101", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03relG1B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] } ] } ] }, { "type": "frame", "id": "rbF03ref", "name": "Referenced By Section (Many)", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "rbF03refH", "name": "refByHeader", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "rbF03refHT", "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF03refHC", "fill": "$--muted-foreground", "content": "8", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "rbF03refG1", "name": "refByGroup — via Belongs to", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF03refG1T", "fill": "$--muted-foreground", "opacity": 0.7, "content": "VIA BELONGS TO", "fontFamily": "IBM Plex Mono", "fontSize": 9 }, { "type": "frame", "id": "rbF03refG1B1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG1B1T", "fill": "$--accent-orange", "content": "Write Weekly Essays", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG1B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "fill": "$--accent-orange" } ] }, { "type": "frame", "id": "rbF03refG1B2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG1B2T", "fill": "$--accent-purple", "content": "On Writing Well", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG1B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] }, { "type": "frame", "id": "rbF03refG1B3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG1B3T", "fill": "$--accent-purple", "content": "Engineering Leadership 101", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG1B3I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] }, { "type": "frame", "id": "rbF03refG1B4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG1B4T", "fill": "$--accent-purple", "content": "AI Agents Primer", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG1B4I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" } ] } ] }, { "type": "frame", "id": "rbF03refG2", "name": "refByGroup — via Related to", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF03refG2T", "fill": "$--muted-foreground", "opacity": 0.7, "content": "VIA RELATED TO", "fontFamily": "IBM Plex Mono", "fontSize": 9 }, { "type": "frame", "id": "rbF03refG2B1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG2B1T", "fill": "$--accent-red", "content": "Failed SEO Experiment", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG2B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] }, { "type": "frame", "id": "rbF03refG2B2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG2B2T", "fill": "$--accent-red", "content": "Twitter Thread Experiment", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG2B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] } ] }, { "type": "frame", "id": "rbF03refG3", "name": "refByGroup — via Topics", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "rbF03refG3T", "fill": "$--muted-foreground", "opacity": 0.7, "content": "VIA TOPICS", "fontFamily": "IBM Plex Mono", "fontSize": 9 }, { "type": "frame", "id": "rbF03refG3B1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG3B1T", "fill": "$--accent-blue", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG3B1I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-blue" } ] }, { "type": "frame", "id": "rbF03refG3B2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "padding": [ 4, 0 ], "children": [ { "type": "text", "id": "rbF03refG3B2T", "fill": "$--accent-blue", "content": "Newsletter Strategy 2026", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "rbF03refG3B2I", "width": 14, "height": 14, "opacity": 0.5, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-blue" } ] } ] } ] }, { "type": "frame", "id": "rbF03bl", "name": "Backlinks Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "frame", "id": "rbF03blH", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "rbF03blT", "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", "fontSize": 10 }, { "type": "text", "id": "rbF03blC", "fill": "$--muted-foreground", "content": "3", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "text", "id": "rbF03blI1", "fill": "$--primary", "content": "Write Weekly Essays", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "rbF03blI2", "fill": "$--primary", "content": "Monthly Review Template", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "rbF03blI3", "fill": "$--primary", "content": "Q1 Planning", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "wlc01", "x": 0, "y": 0, "name": "Wikilink Colors — Editor View (Light)", "theme": { "Mode": "Light" }, "clip": true, "width": 760, "height": 440, "fill": "$--background", "layout": "vertical", "padding": [ 32, 40 ], "gap": 12, "children": [ { "type": "text", "id": "wlc02", "content": "Build Laputa App", "fontSize": 28, "fontWeight": 700, "fill": "$--foreground" }, { "type": "text", "id": "wlc03", "content": "Wiki-Links", "fontSize": 20, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "wlc10", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc10a", "content": "See ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc10b", "content": "Stock Screener — EMA200 Wick Bounce", "fontSize": 15, "fill": "$--accent-red", "textDecoration": "underline" }, { "type": "text", "id": "wlc10c", "content": " for the experiment approach.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "frame", "id": "wlc11", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc11a", "content": "Contact ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc11b", "content": "Matteo Cellini", "fontSize": 15, "fill": "$--accent-yellow", "textDecoration": "underline" }, { "type": "text", "id": "wlc11c", "content": " for sponsorship data.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "frame", "id": "wlc12", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc12a", "content": "Link to ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc12b", "content": "Grow Newsletter", "fontSize": 15, "fill": "$--accent-purple", "textDecoration": "underline" }, { "type": "text", "id": "wlc12c", "content": " responsibility.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "frame", "id": "wlc13", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc13a", "content": "Check ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc13b", "content": "Software Development", "fontSize": 15, "fill": "$--accent-green", "textDecoration": "underline" }, { "type": "text", "id": "wlc13c", "content": " for tech notes.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "frame", "id": "wlc14", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc14a", "content": "See ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc14b", "content": "Laputa App Design Session", "fontSize": 15, "fill": "$--accent-yellow", "textDecoration": "underline" }, { "type": "text", "id": "wlc14c", "content": " event recap.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "frame", "id": "wlc15", "name": "Legend", "layout": "horizontal", "gap": 16, "width": "fill_container", "height": "hug_contents", "padding": [ 12, 0, 0, 0 ], "children": [ { "type": "text", "id": "wlc15a", "content": "Experiment", "fontSize": 12, "fill": "$--accent-red" }, { "type": "text", "id": "wlc15b", "content": "Person / Event", "fontSize": 12, "fill": "$--accent-yellow" }, { "type": "text", "id": "wlc15c", "content": "Responsibility", "fontSize": 12, "fill": "$--accent-purple" }, { "type": "text", "id": "wlc15d", "content": "Topic", "fontSize": 12, "fill": "$--accent-green" } ] } ] }, { "type": "frame", "id": "wlc20", "x": 800, "y": 0, "name": "Wikilink Colors — Broken Link State", "theme": { "Mode": "Light" }, "clip": true, "width": 500, "height": 200, "fill": "$--background", "layout": "vertical", "padding": [ 32, 40 ], "gap": 12, "children": [ { "type": "text", "id": "wlc21", "content": "Broken Wikilink", "fontSize": 20, "fontWeight": 600, "fill": "$--foreground" }, { "type": "frame", "id": "wlc22", "layout": "horizontal", "gap": 0, "width": "fill_container", "height": "hug_contents", "children": [ { "type": "text", "id": "wlc22a", "content": "Also see ", "fontSize": 15, "fill": "$--foreground" }, { "type": "text", "id": "wlc22b", "content": "Non-Existent Note", "fontSize": 15, "fill": "$--muted-foreground", "textDecoration": "underline", "opacity": 0.7 }, { "type": "text", "id": "wlc22c", "content": " which is a broken link.", "fontSize": 15, "fill": "$--foreground" } ] }, { "type": "text", "id": "wlc23", "content": "Broken links show muted color + dashed underline + reduced opacity", "fontSize": 12, "fill": "$--muted-foreground", "fontStyle": "italic" } ] }, { "type": "frame", "id": "vl001", "x": 0, "y": 0, "name": "Virtual List — Default State (9000+ notes)", "theme": { "Mode": "Light" }, "clip": true, "width": 300, "height": 900, "fill": "$--card", "layout": "vertical", "children": [ { "type": "frame", "id": "vl002", "name": "Header", "width": "fill_container", "height": 45, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl003", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "vl004", "text": "9,236 items", "fontSize": 11, "fill": "$--muted-foreground", "x": 200 } ] }, { "type": "frame", "id": "vl005", "name": "Virtualized Viewport", "width": "fill_container", "height": "fill_container", "fill": "$--card", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "vl006", "name": "NoteItem-visible-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl007", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "vl008", "text": "This paragraph has bold text, italic text...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl009", "text": "2m ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl010", "name": "NoteItem-visible-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl011", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl012", "text": "Lookalike audiences convert 3x better...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl013", "text": "5h ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl014", "name": "NoteItem-visible-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl015", "text": "Quick Meeting 1", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl016", "text": "Key findings from the latest analysis...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl017", "text": "1d ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl018", "name": "NoteItem-visible-4", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl019", "text": "Advanced Strategy 2", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl020", "text": "Notes on process improvements...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl021", "text": "2d ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl022", "name": "NoteItem-visible-5-selected", "width": "fill_container", "height": 72, "fill": "#2383E210", "stroke": { "align": "inside", "thickness": { "left": 3, "bottom": 1 }, "fill": "$--accent-blue" }, "padding": [ 14, 13 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl023", "text": "Daily Review 3", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "vl024", "text": "Summary of decisions made during review...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl025", "text": "3d ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl026", "name": "NoteItem-visible-6", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl027", "text": "Weekly Plan 4", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl028", "text": "Action items and follow-ups...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl029", "text": "4d ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl030", "name": "scrollbar-indicator", "width": 6, "height": 40, "fill": "$--muted-foreground", "opacity": 0.3, "cornerRadius": 3, "x": 290, "y": 200 } ] } ] }, { "type": "frame", "id": "vl100", "x": 340, "y": 0, "name": "Virtual List — Scrolled Mid-list", "theme": { "Mode": "Light" }, "clip": true, "width": 300, "height": 900, "fill": "$--card", "layout": "vertical", "children": [ { "type": "frame", "id": "vl101", "name": "Header", "width": "fill_container", "height": 45, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl102", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vl103", "name": "Virtualized Viewport — items 4500-4512", "width": "fill_container", "height": "fill_container", "fill": "$--card", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "vl104", "name": "NoteItem-mid-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl105", "text": "Final Report 4501", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl106", "text": "Draft outline for upcoming deliverable.", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl107", "text": "Jan 15", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl108", "name": "NoteItem-mid-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl109", "text": "Revised Checklist 4502", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl110", "text": "Reference material for ongoing initiative.", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl111", "text": "Jan 14", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl112", "name": "NoteItem-mid-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl113", "text": "Archived Template 4503", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl114", "text": "Tracking progress on quarterly objectives.", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl115", "text": "Jan 13", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl116", "name": "NoteItem-mid-4", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl117", "text": "New Framework 4504", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl118", "text": "Comparison of different approaches.", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl119", "text": "Jan 12", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl120", "name": "scrollbar-indicator-mid", "width": 6, "height": 40, "fill": "$--muted-foreground", "opacity": 0.3, "cornerRadius": 3, "x": 290, "y": 440 } ] } ] }, { "type": "frame", "id": "vl200", "x": 680, "y": 0, "name": "Virtual List — Search Filtering", "theme": { "Mode": "Light" }, "clip": true, "width": 300, "height": 900, "fill": "$--card", "layout": "vertical", "children": [ { "type": "frame", "id": "vl201", "name": "Header", "width": "fill_container", "height": 45, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl202", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vl203", "name": "Search Bar", "width": "fill_container", "height": 40, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 8, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "vl204", "name": "search-input", "width": "fill_container", "height": 32, "fill": "$--background", "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl205", "text": "strategy", "fontSize": 13, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "vl206", "name": "Filtered Results (23 matches)", "width": "fill_container", "height": "fill_container", "fill": "$--card", "layout": "vertical", "clip": true, "children": [ { "type": "frame", "id": "vl207", "name": "NoteItem-filtered-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl208", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl209", "text": "Lookalike audiences convert 3x better...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl210", "text": "5h ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl211", "name": "NoteItem-filtered-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl212", "text": "Advanced Strategy 2", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl213", "text": "Notes on process improvements...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl214", "text": "2d ago", "fontSize": 10, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vl215", "name": "NoteItem-filtered-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 14, 16 ], "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "vl216", "text": "Quick Strategy 10", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground" }, { "type": "text", "id": "vl217", "text": "Key findings from the latest analysis...", "fontSize": 12, "fill": "$--muted-foreground" }, { "type": "text", "id": "vl218", "text": "Jan 5", "fontSize": 10, "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "vl300", "x": 1020, "y": 0, "name": "Virtual List — Empty Search Result", "theme": { "Mode": "Light" }, "clip": true, "width": 300, "height": 400, "fill": "$--card", "layout": "vertical", "children": [ { "type": "frame", "id": "vl301", "name": "Header", "width": "fill_container", "height": 45, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 0, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl302", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vl303", "name": "Search Bar", "width": "fill_container", "height": 40, "fill": "$--card", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "padding": [ 8, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "vl304", "name": "search-input", "width": "fill_container", "height": 32, "fill": "$--background", "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "vl305", "text": "xyznonexistent", "fontSize": 13, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "vl306", "name": "Empty State", "width": "fill_container", "height": "fill_container", "fill": "$--card", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [ 32, 16 ], "children": [ { "type": "text", "id": "vl307", "text": "No matching notes", "fontSize": 13, "fill": "$--muted-foreground", "textAlign": "center" } ] } ] }, { "type": "frame", "id": "mni01", "x": 0, "y": 0, "name": "Modified Note Indicator — NoteList States", "width": 340, "height": "fit_content(600)", "fill": "$--card", "layout": "vertical", "children": [ { "type": "text", "id": "mni01t", "fill": "$--muted-foreground", "content": "NoteList — Modified vs Clean", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "width": "fill_container", "padding": [ 8, 16 ] }, { "type": "frame", "id": "mni02", "name": "Note Item — Modified", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "mni02r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "mni02tg", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "mni02dot", "name": "Modified Indicator", "width": 6, "height": 6, "fill": "$--accent-orange" }, { "type": "text", "id": "mni02ti", "fill": "$--foreground", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "mni02ic", "width": 14, "height": 14, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-red" } ] }, { "type": "text", "id": "mni02sn", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Personal knowledge management app built with Tauri + React.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mni02tm", "fill": "$--muted-foreground", "content": "2m ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mni03", "name": "Note Item — Clean (no indicator)", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "mni03r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "mni03ti", "fill": "$--foreground", "content": "Facebook Ads Strategy", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" }, { "type": "icon_font", "id": "mni03ic", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "text", "id": "mni03sn", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Lookalike audiences convert 3x better than cold.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mni03tm", "fill": "$--muted-foreground", "content": "1h ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mni04", "name": "Note Item — Added (new file)", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "mni04r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "mni04tg", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "mni04dot", "name": "Modified Indicator", "width": 6, "height": 6, "fill": "$--accent-orange" }, { "type": "text", "id": "mni04ti", "fill": "$--foreground", "content": "AI Agents Primer", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "icon_font", "id": "mni04ic", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] }, { "type": "text", "id": "mni04sn", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "How autonomous agents are changing software development.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mni04tm", "fill": "$--muted-foreground", "content": "5m ago", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "mni10", "x": 380, "y": 0, "name": "Modified Note Indicator — TabBar States", "width": 800, "height": 120, "fill": "$--sidebar", "layout": "vertical", "children": [ { "type": "text", "id": "mni10t", "fill": "$--muted-foreground", "content": "TabBar — Modified Dot on Dirty Tabs", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "padding": [ 8, 16 ] }, { "type": "frame", "id": "mni11", "name": "Tab Bar with Modified Indicators", "width": "fill_container", "height": 45, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" }, "alignItems": "center", "children": [ { "type": "frame", "id": "mni11a", "name": "Tab Active — Modified", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "mni11at", "fill": "$--foreground", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "ellipse", "id": "mni11adot", "name": "Tab Modified Dot", "width": 6, "height": 6, "fill": "$--accent-orange" }, { "type": "icon_font", "id": "mni11ax", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "mni11b", "name": "Tab Inactive — Clean", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "mni11bt", "fill": "$--muted-foreground", "content": "Facebook Ads Strategy", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "icon_font", "id": "mni11bx", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "mni11c", "name": "Tab Inactive — Modified", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "gap": 6, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "mni11ct", "fill": "$--muted-foreground", "content": "AI Agents Primer", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "ellipse", "id": "mni11cdot", "name": "Tab Modified Dot", "width": 6, "height": 6, "fill": "$--accent-orange" }, { "type": "icon_font", "id": "mni11cx", "opacity": 0, "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "mni11sp", "name": "tabSpacer", "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" } }, { "type": "frame", "id": "mni11ctrl", "name": "tabControls", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" }, "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_around", "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni11plus", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "phosphor", "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "mni20", "x": 0, "y": 400, "name": "Modified Note Indicator — StatusBar Pending Count", "width": 800, "height": 80, "fill": "$--background", "layout": "vertical", "children": [ { "type": "text", "id": "mni20t", "fill": "$--muted-foreground", "content": "StatusBar — Pending Changes Counter", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "padding": [ 8, 16 ] }, { "type": "frame", "id": "mni21", "name": "StatusBar with Pending Count", "width": "fill_container", "height": 30, "fill": "$--sidebar", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "padding": [ 0, 8 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "mni21l", "name": "left", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "mni21v", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni21fi", "width": 13, "height": 13, "iconFontName": "folder-open", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "mni21fl", "fill": "$--muted-foreground", "content": "Demo v2", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "mni21s1", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 }, { "type": "frame", "id": "mni21br", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni21gi", "width": 13, "height": 13, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "mni21gl", "fill": "$--muted-foreground", "content": "main", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "mni21s2", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 }, { "type": "frame", "id": "mni21sy", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni21ri", "width": 13, "height": 13, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$--accent-green" }, { "type": "text", "id": "mni21rl", "fill": "$--muted-foreground", "content": "Synced 2m ago", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "mni21s3", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 }, { "type": "frame", "id": "mni21pd", "name": "Pending Count", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni21pi", "width": 13, "height": 13, "iconFontName": "circle-dot", "iconFontFamily": "lucide", "fill": "$--accent-orange" }, { "type": "text", "id": "mni21pl", "fill": "$--muted-foreground", "content": "3 pending", "fontFamily": "Inter", "fontSize": 11 } ] } ] }, { "type": "frame", "id": "mni21r", "name": "right", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "mni21nc", "gap": 4, "alignItems": "center", "children": [ { "type": "icon_font", "id": "mni21ni", "width": 13, "height": 13, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }, { "type": "text", "id": "mni21nl", "fill": "$--muted-foreground", "content": "9,200 notes", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "icon_font", "id": "mni21set", "width": 14, "height": 14, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] } ] }, { "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 } ] } ] } ] } ] }, { "type": "frame", "id": "urlDefault", "x": 0, "y": 0, "name": "URL Property — default state (no hover)", "width": 320, "height": 40, "fill": "#ffffff", "layout": "horizontal", "alignItems": "center", "padding": [ 6, 6 ], "gap": 8, "children": [ { "type": "text", "id": "urlDefaultLabel", "name": "label", "content": "URL", "fontSize": 10, "fontWeight": 600, "letterSpacing": 1.2, "textTransform": "uppercase", "fill": "#6b7280" }, { "type": "frame", "id": "urlDefaultValueWrap", "name": "value-wrapper", "width": "fill_container", "layout": "horizontal", "alignItems": "center", "justifyContent": "end", "gap": 4, "children": [ { "type": "text", "id": "urlDefaultValue", "name": "url-value", "content": "https://example.com/article", "fontSize": 13, "fill": "#374151", "textAlign": "right" }, { "type": "text", "id": "urlDefaultEditIcon", "name": "edit-icon", "content": "pencil", "fontSize": 12, "fill": "#9ca3af", "opacity": 0 } ] } ] }, { "type": "frame", "id": "urlHover", "x": 0, "y": 60, "name": "URL Property — hover state (underline + pointer cursor)", "width": 320, "height": 40, "fill": "#f9fafb", "layout": "horizontal", "alignItems": "center", "padding": [ 6, 6 ], "gap": 8, "children": [ { "type": "text", "id": "urlHoverLabel", "name": "label", "content": "URL", "fontSize": 10, "fontWeight": 600, "letterSpacing": 1.2, "textTransform": "uppercase", "fill": "#6b7280" }, { "type": "frame", "id": "urlHoverValueWrap", "name": "value-wrapper", "width": "fill_container", "layout": "horizontal", "alignItems": "center", "justifyContent": "end", "gap": 4, "children": [ { "type": "text", "id": "urlHoverValue", "name": "url-value-hovered", "content": "https://example.com/article", "fontSize": 13, "fill": "#2563eb", "textDecoration": "underline", "textAlign": "right" }, { "type": "text", "id": "urlHoverEditIcon", "name": "edit-icon-visible", "content": "pencil", "fontSize": 12, "fill": "#6b7280", "opacity": 1 } ] } ] }, { "type": "frame", "id": "urlEdit", "x": 0, "y": 120, "name": "URL Property — edit mode (double-click or edit icon)", "width": 320, "height": 40, "fill": "#ffffff", "layout": "horizontal", "alignItems": "center", "padding": [ 6, 6 ], "gap": 8, "children": [ { "type": "text", "id": "urlEditLabel", "name": "label", "content": "URL", "fontSize": 10, "fontWeight": 600, "letterSpacing": 1.2, "textTransform": "uppercase", "fill": "#6b7280" }, { "type": "frame", "id": "urlEditInputWrap", "name": "input-wrapper", "width": "fill_container", "height": 28, "fill": "#f3f4f6", "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "#6366f1" }, "padding": [ 4, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "urlEditInput", "name": "edit-input", "content": "https://example.com/article", "fontSize": 13, "fill": "#111827" } ] } ] }, { "type": "frame", "id": "vc001", "x": 0, "y": 0, "name": "Changes — sidebar section with pending notes", "clip": true, "width": 550, "height": 500, "fill": "$--background", "layout": "horizontal", "children": [ { "type": "frame", "id": "vc002", "name": "Sidebar", "width": 250, "height": "fill_container", "fill": "$--sidebar", "layout": "vertical", "children": [ { "type": "frame", "id": "vc003", "name": "Filters", "width": "fill_container", "layout": "vertical", "gap": 1, "padding": [ 8, 8 ], "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc004", "name": "filterAll", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc005", "text": "All Notes", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc006", "name": "filterFavorites", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc007", "text": "Favorites", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc008", "name": "filterTrash", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc009", "text": "Trash", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc010", "name": "filterChanges-active", "width": "fill_container", "fill": "#F5750018", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "justifyContent": "space-between", "children": [ { "type": "text", "id": "vc011", "text": "Changes", "fontSize": 13, "fontWeight": 500, "fill": "$--accent-orange" }, { "type": "frame", "id": "vc012", "name": "badge", "fill": "$--accent-orange", "cornerRadius": 9999, "padding": [ 0, 6 ], "height": 20, "alignItems": "center", "children": [ { "type": "text", "id": "vc013", "text": "3", "fontSize": 10, "fontWeight": 600, "fill": "$--white" } ] } ] } ] } ] }, { "type": "frame", "id": "vc014", "name": "NoteList: Changes", "width": 300, "height": "fill_container", "fill": "$--card", "layout": "vertical", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc015", "name": "header", "width": "fill_container", "height": 45, "padding": [ 0, 16 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "vc016", "text": "Changes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc017", "name": "note1-modified", "width": "fill_container", "padding": [ 10, 16 ], "gap": 4, "layout": "vertical", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc018", "name": "titleRow", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "vc019", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc020", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "text", "id": "vc021", "text": "This paragraph has bold text, italic text…", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vc022", "name": "note2-modified", "width": "fill_container", "padding": [ 10, 16 ], "gap": 4, "layout": "vertical", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc023", "name": "titleRow", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "vc024", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc025", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "text", "id": "vc026", "text": "Lookalike audiences from newsletter subscribers…", "fontSize": 12, "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "vc027", "name": "note3-added", "width": "fill_container", "padding": [ 10, 16 ], "gap": 4, "layout": "vertical", "children": [ { "type": "frame", "id": "vc028", "name": "titleRow", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "vc029", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc030", "text": "AI Agents Primer", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "text", "id": "vc031", "text": "AI agents are autonomous systems that can plan…", "fontSize": 12, "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "vc100", "x": 600, "y": 0, "name": "Changes — empty state (0 pending)", "clip": true, "width": 550, "height": 400, "fill": "$--background", "layout": "horizontal", "children": [ { "type": "frame", "id": "vc101", "name": "Sidebar (no Changes item)", "width": 250, "height": "fill_container", "fill": "$--sidebar", "layout": "vertical", "children": [ { "type": "frame", "id": "vc102", "name": "Filters", "width": "fill_container", "layout": "vertical", "gap": 1, "padding": [ 8, 8 ], "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc103", "name": "filterAll-active", "width": "fill_container", "fill": "#4a9eff18", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc104", "text": "All Notes", "fontSize": 13, "fontWeight": 500, "fill": "$--primary" } ] }, { "type": "frame", "id": "vc105", "name": "filterFavorites", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc106", "text": "Favorites", "fontSize": 13, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc107", "name": "filterTrash", "width": "fill_container", "cornerRadius": 6, "gap": 8, "padding": [ 6, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "vc108", "text": "Trash", "fontSize": 13, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "vc109", "name": "annotation", "width": "fill_container", "padding": [ 12, 16 ], "children": [ { "type": "text", "id": "vc110", "text": "← No \"Changes\" item when 0 pending", "fontSize": 11, "fill": "$--muted-foreground", "fontStyle": "italic" } ] } ] }, { "type": "frame", "id": "vc111", "name": "NoteList: All Notes", "width": 300, "height": "fill_container", "fill": "$--card", "layout": "vertical", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc112", "name": "header", "width": "fill_container", "height": 45, "padding": [ 0, 16 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "vc113", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc114", "name": "notesList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "vc115", "name": "note-no-dot", "width": "fill_container", "padding": [ 10, 16 ], "gap": 4, "layout": "vertical", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "vc116", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }, { "type": "text", "id": "vc117", "text": "No orange dot — all committed", "fontSize": 12, "fill": "$--muted-foreground" } ] } ] } ] } ] }, { "type": "frame", "id": "vc200", "x": 0, "y": 560, "name": "Changes — real-time update (note disappears after save)", "clip": true, "width": 800, "height": 300, "fill": "$--background", "layout": "horizontal", "gap": 40, "padding": [ 20, 20 ], "children": [ { "type": "frame", "id": "vc201", "name": "Before: 3 pending", "width": 340, "height": "fill_container", "fill": "$--card", "layout": "vertical", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc202", "name": "header", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "vc203", "text": "Changes (before save)", "fontSize": 12, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc204", "name": "item1", "width": "fill_container", "padding": [ 8, 12 ], "gap": 6, "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "ellipse", "id": "vc205", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc206", "text": "Build Laputa App", "fontSize": 12, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc207", "name": "item2-highlight", "width": "fill_container", "padding": [ 8, 12 ], "gap": 6, "fill": "#F5750010", "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "ellipse", "id": "vc208", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc209", "text": "Facebook Ads Strategy ← saving…", "fontSize": 12, "fontWeight": 500, "fill": "$--accent-orange" } ] }, { "type": "frame", "id": "vc210", "name": "item3", "width": "fill_container", "padding": [ 8, 12 ], "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "vc211", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc212", "text": "AI Agents Primer", "fontSize": 12, "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "vc220", "name": "After: 2 pending (note committed)", "width": 340, "height": "fill_container", "fill": "$--card", "layout": "vertical", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "children": [ { "type": "frame", "id": "vc221", "name": "header", "width": "fill_container", "height": 36, "padding": [ 0, 12 ], "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "vc222", "text": "Changes (after save + commit)", "fontSize": 12, "fontWeight": 600, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc223", "name": "item1", "width": "fill_container", "padding": [ 8, 12 ], "gap": 6, "alignItems": "center", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "ellipse", "id": "vc224", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc225", "text": "Build Laputa App", "fontSize": 12, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc226", "name": "item2", "width": "fill_container", "padding": [ 8, 12 ], "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "vc227", "fill": "$--accent-orange", "width": 6, "height": 6 }, { "type": "text", "id": "vc228", "text": "AI Agents Primer", "fontSize": 12, "fill": "$--foreground" } ] }, { "type": "frame", "id": "vc229", "name": "removedNote", "width": "fill_container", "padding": [ 12, 12 ], "children": [ { "type": "text", "id": "vc230", "text": "Facebook Ads Strategy removed (committed)", "fontSize": 11, "fontStyle": "italic", "fill": "$--muted-foreground" } ] } ] } ] }, { "type": "frame", "id": "dp01", "x": 0, "y": 0, "name": "NoteStatus — NoteList (New vs Modified)", "width": 340, "height": "fit_content(600)", "fill": "$--card", "layout": "vertical", "children": [ { "type": "text", "id": "dp01t", "fill": "$--muted-foreground", "content": "NoteList — New vs Modified vs Clean", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "width": "fill_container", "padding": [ 8, 16 ] }, { "type": "frame", "id": "dp02", "name": "Note Item — New (green dot)", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "dp02r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dp02tg", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "dp02dot", "name": "New Indicator (green)", "width": 6, "height": 6, "fill": "$--accent-green" }, { "type": "text", "id": "dp02ti", "fill": "$--foreground", "content": "Untitled Note", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "text", "id": "dp02d", "fill": "$--muted-foreground", "content": "just now", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "dp02s", "fill": "$--muted-foreground", "content": "New note created in this session, never saved to disk", "fontFamily": "Inter", "fontSize": 12, "width": "fill_container" } ] }, { "type": "frame", "id": "dp03", "name": "Note Item — Modified (orange dot)", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "dp03r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dp03tg", "gap": 6, "alignItems": "center", "children": [ { "type": "ellipse", "id": "dp03dot", "name": "Modified Indicator (orange)", "width": 6, "height": 6, "fill": "$--accent-orange" }, { "type": "text", "id": "dp03ti", "fill": "$--foreground", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "text", "id": "dp03d", "fill": "$--muted-foreground", "content": "2 hours ago", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "dp03s", "fill": "$--muted-foreground", "content": "Existing note with uncommitted git changes", "fontFamily": "Inter", "fontSize": 12, "width": "fill_container" } ] }, { "type": "frame", "id": "dp04", "name": "Note Item — Clean (no dot)", "width": "fill_container", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "gap": 4, "padding": [ 14, 16 ], "children": [ { "type": "frame", "id": "dp04r", "name": "titleRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "dp04tg", "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "dp04ti", "fill": "$--foreground", "content": "Meeting Notes", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "text", "id": "dp04d", "fill": "$--muted-foreground", "content": "yesterday", "fontFamily": "Inter", "fontSize": 11 } ] }, { "type": "text", "id": "dp04s", "fill": "$--muted-foreground", "content": "No indicator — clean, committed note", "fontFamily": "Inter", "fontSize": 12, "width": "fill_container" } ] } ] }, { "type": "frame", "id": "dp10", "x": 360, "y": 0, "name": "NoteStatus — TabBar (New vs Modified)", "width": 600, "height": "fit_content(200)", "fill": "$--sidebar", "layout": "vertical", "children": [ { "type": "text", "id": "dp10t", "fill": "$--muted-foreground", "content": "TabBar — Green vs Orange Status Dots", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "width": "fill_container", "padding": [ 8, 16 ] }, { "type": "frame", "id": "dp11", "name": "Tab Row", "width": "fill_container", "height": 45, "alignItems": "center", "children": [ { "type": "frame", "id": "dp11a", "name": "Active Tab (new)", "height": "fill_container", "fill": "$--background", "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" }, "padding": [ 0, 12 ], "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "dp11at", "fill": "$--foreground", "content": "Untitled Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "ellipse", "id": "dp11adot", "name": "New dot (green)", "width": 6, "height": 6, "fill": "$--accent-green" }, { "type": "text", "id": "dp11ax", "fill": "$--muted-foreground", "content": "×", "fontFamily": "Inter", "fontSize": 14 } ] }, { "type": "frame", "id": "dp11b", "name": "Inactive Tab (modified)", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "padding": [ 0, 12 ], "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "dp11bt", "fill": "$--muted-foreground", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 12 }, { "type": "ellipse", "id": "dp11bdot", "name": "Modified dot (orange)", "width": 6, "height": 6, "fill": "$--accent-orange" } ] }, { "type": "frame", "id": "dp11c", "name": "Inactive Tab (clean)", "height": "fill_container", "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" }, "padding": [ 0, 12 ], "gap": 6, "alignItems": "center", "children": [ { "type": "text", "id": "dp11ct", "fill": "$--muted-foreground", "content": "Meeting Notes", "fontFamily": "Inter", "fontSize": 12 } ] } ] } ] }, { "type": "frame", "id": "dp20", "x": 360, "y": 220, "name": "NoteStatus — BreadcrumbBar (N vs M badge)", "width": 600, "height": "fit_content(200)", "fill": "$--background", "layout": "vertical", "children": [ { "type": "text", "id": "dp20t", "fill": "$--muted-foreground", "content": "BreadcrumbBar — Status Badge", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "width": "fill_container", "padding": [ 8, 16 ] }, { "type": "frame", "id": "dp21", "name": "Breadcrumb — New Note", "width": "fill_container", "padding": [ 8, 16 ], "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "dp21type", "fill": "$--muted-foreground", "content": "Note", "fontFamily": "Inter", "fontSize": 12 }, { "type": "text", "id": "dp21sep", "fill": "$--muted-foreground", "content": "/", "fontFamily": "Inter", "fontSize": 12 }, { "type": "text", "id": "dp21title", "fill": "$--foreground", "content": "Untitled Note", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "frame", "id": "dp21badge", "name": "New Badge", "fill": "$--accent-green", "cornerRadius": 3, "padding": [ 1, 5 ], "children": [ { "type": "text", "id": "dp21bl", "fill": "#ffffff", "content": "N", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" } ] } ] }, { "type": "frame", "id": "dp22", "name": "Breadcrumb — Modified Note", "width": "fill_container", "padding": [ 8, 16 ], "gap": 8, "alignItems": "center", "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "dp22type", "fill": "$--muted-foreground", "content": "Project", "fontFamily": "Inter", "fontSize": 12 }, { "type": "text", "id": "dp22sep", "fill": "$--muted-foreground", "content": "/", "fontFamily": "Inter", "fontSize": 12 }, { "type": "text", "id": "dp22title", "fill": "$--foreground", "content": "Build Laputa App", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "frame", "id": "dp22badge", "name": "Modified Badge", "fill": "$--accent-yellow", "cornerRadius": 3, "padding": [ 1, 5 ], "children": [ { "type": "text", "id": "dp22bl", "fill": "#ffffff", "content": "M", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" } ] } ] } ] }, { "type": "frame", "id": "dp30", "x": 0, "y": 640, "name": "NoteStatus — State Transitions", "width": 960, "height": "fit_content(300)", "fill": "$--card", "layout": "vertical", "children": [ { "type": "text", "id": "dp30t", "fill": "$--muted-foreground", "content": "State Transition Flow", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "textTransform": "uppercase", "letterSpacing": 1, "width": "fill_container", "padding": [ 8, 16 ] }, { "type": "frame", "id": "dp31", "name": "Flow", "width": "fill_container", "padding": [ 16, 16 ], "gap": 16, "alignItems": "center", "children": [ { "type": "frame", "id": "dp31a", "name": "Create", "fill": "$--accent-green", "cornerRadius": 8, "padding": [ 12, 20 ], "children": [ { "type": "text", "id": "dp31at", "fill": "#ffffff", "content": "Create Note → Green Dot", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "dp31arr1", "fill": "$--muted-foreground", "content": "→", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "700" }, { "type": "frame", "id": "dp31b", "name": "Save", "fill": "$--muted", "cornerRadius": 8, "padding": [ 12, 20 ], "children": [ { "type": "text", "id": "dp31bt", "fill": "$--foreground", "content": "Cmd+S → Dot Removed", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "dp31arr2", "fill": "$--muted-foreground", "content": "→", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "700" }, { "type": "frame", "id": "dp31c", "name": "Edit+Save", "fill": "$--accent-orange", "cornerRadius": 8, "padding": [ 12, 20 ], "children": [ { "type": "text", "id": "dp31ct", "fill": "#ffffff", "content": "Edit Existing → Orange Dot", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "dp31arr3", "fill": "$--muted-foreground", "content": "→", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "700" }, { "type": "frame", "id": "dp31d", "name": "Commit", "fill": "$--muted", "cornerRadius": 8, "padding": [ 12, 20 ], "children": [ { "type": "text", "id": "dp31dt", "fill": "$--foreground", "content": "Git Commit → Dot Removed", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] } ] } ], "themes": { "Mode": [ "Dark" ] }, "variables": { "--accent": { "type": "color", "value": [ { "value": "#EBEBEA" }, { "value": "#252545", "theme": { "Mode": "Dark" } } ] }, "--accent-blue": { "type": "color", "value": [ { "value": "#2383E2" }, { "value": "#4a9eff", "theme": { "Mode": "Dark" } }, { "value": "#155DFF" }, { "value": "#155DFF", "theme": { "Mode": "Dark" } } ] }, "--accent-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#ffffff", "theme": { "Mode": "Dark" } } ] }, "--accent-green": { "type": "color", "value": [ { "value": "#0F7B6C" }, { "value": "#4caf50", "theme": { "Mode": "Dark" } }, { "value": "#00B38B" }, { "value": "#00B38B", "theme": { "Mode": "Dark" } } ] }, "--accent-orange": { "type": "color", "value": [ { "value": "#D9730D" }, { "value": "#ff9800", "theme": { "Mode": "Dark" } } ] }, "--accent-purple": { "type": "color", "value": [ { "value": "#9065B0" }, { "value": "#9c72ff", "theme": { "Mode": "Dark" } }, { "value": "#A932FF" }, { "value": "#A932FF", "theme": { "Mode": "Dark" } } ] }, "--accent-red": { "type": "color", "value": [ { "value": "#E03E3E" }, { "value": "#f44336", "theme": { "Mode": "Dark" } } ] }, "--background": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#0f0f1a", "theme": { "Mode": "Dark" } } ] }, "--black": { "type": "color", "value": "#000000" }, "--border": { "type": "color", "value": [ { "value": "#E9E9E7" }, { "value": "#2a2a4a", "theme": { "Mode": "Dark" } } ] }, "--card": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#16162a", "theme": { "Mode": "Dark" } } ] }, "--card-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#e0e0e0", "theme": { "Mode": "Dark" } } ] }, "--destructive": { "type": "color", "value": [ { "value": "#E03E3E" }, { "value": "#f44336", "theme": { "Mode": "Dark" } } ] }, "--destructive-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#ffffff", "theme": { "Mode": "Dark" } } ] }, "--font-primary": { "type": "string", "value": [ { "value": "Inter" }, { "value": "-apple-system, BlinkMacSystemFont, Inter, sans-serif" }, { "value": "Inter" } ] }, "--font-system": { "type": "string", "value": "-apple-system, BlinkMacSystemFont, sans-serif" }, "--foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#e0e0e0", "theme": { "Mode": "Dark" } } ] }, "--input": { "type": "color", "value": [ { "value": "#E9E9E7" }, { "value": "#2a2a4a", "theme": { "Mode": "Dark" } } ] }, "--muted": { "type": "color", "value": [ { "value": "#F0F0EF" }, { "value": "#1e1e3a", "theme": { "Mode": "Dark" } } ] }, "--muted-foreground": { "type": "color", "value": [ { "value": "#787774" }, { "value": "#888888", "theme": { "Mode": "Dark" } } ] }, "--popover": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#1e1e3a", "theme": { "Mode": "Dark" } } ] }, "--popover-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#e0e0e0", "theme": { "Mode": "Dark" } } ] }, "--primary": { "type": "color", "value": [ { "value": "#2383E2" }, { "value": "#4a9eff", "theme": { "Mode": "Dark" } }, { "value": "#155DFF" }, { "value": "#155DFF", "theme": { "Mode": "Dark" } } ] }, "--primary-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#ffffff", "theme": { "Mode": "Dark" } } ] }, "--radius-lg": { "type": "number", "value": 8 }, "--radius-md": { "type": "number", "value": 6 }, "--radius-sm": { "type": "number", "value": 4 }, "--ring": { "type": "color", "value": [ { "value": "#2383E2" }, { "value": "#4a9eff", "theme": { "Mode": "Dark" } }, { "value": "#155DFF" }, { "value": "#155DFF", "theme": { "Mode": "Dark" } } ] }, "--secondary": { "type": "color", "value": [ { "value": "#EBEBEA" }, { "value": "#2a2a4a", "theme": { "Mode": "Dark" } } ] }, "--secondary-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#e0e0e0", "theme": { "Mode": "Dark" } } ] }, "--sidebar": { "type": "color", "value": [ { "value": "#F7F6F3" }, { "value": "#1a1a2e", "theme": { "Mode": "Dark" } } ] }, "--sidebar-accent": { "type": "color", "value": [ { "value": "#EBEBEA" }, { "value": "#252545", "theme": { "Mode": "Dark" } } ] }, "--sidebar-accent-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#ffffff", "theme": { "Mode": "Dark" } } ] }, "--sidebar-border": { "type": "color", "value": [ { "value": "#E9E9E7" }, { "value": "#2a2a4a", "theme": { "Mode": "Dark" } } ] }, "--sidebar-foreground": { "type": "color", "value": [ { "value": "#37352F" }, { "value": "#e0e0e0", "theme": { "Mode": "Dark" } } ] }, "--sidebar-primary": { "type": "color", "value": [ { "value": "#2383E2" }, { "value": "#4a9eff", "theme": { "Mode": "Dark" } }, { "value": "#155DFF" }, { "value": "#155DFF", "theme": { "Mode": "Dark" } } ] }, "--sidebar-primary-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#ffffff", "theme": { "Mode": "Dark" } } ] }, "--sidebar-ring": { "type": "color", "value": [ { "value": "#2383E2" }, { "value": "#4a9eff", "theme": { "Mode": "Dark" } }, { "value": "#155DFF" }, { "value": "#155DFF", "theme": { "Mode": "Dark" } } ] }, "--white": { "type": "color", "value": "#ffffff" }, "--accent-yellow": { "type": "color", "value": [ { "value": "#F0B100" }, { "value": "#F0B100", "theme": { "Mode": "Dark" } } ] }, "--accent-blue-light": { "type": "color", "value": [ { "value": "#155DFF14" }, { "value": "#155DFF20", "theme": { "Mode": "Dark" } } ] }, "--accent-green-light": { "type": "color", "value": [ { "value": "#00B38B14" }, { "value": "#00B38B20", "theme": { "Mode": "Dark" } } ] }, "--accent-purple-light": { "type": "color", "value": [ { "value": "#A932FF14" }, { "value": "#A932FF20", "theme": { "Mode": "Dark" } } ] }, "--accent-red-light": { "type": "color", "value": [ { "value": "#E03E3E14" }, { "value": "#f4433620", "theme": { "Mode": "Dark" } } ] }, "--accent-yellow-light": { "type": "color", "value": [ { "value": "#F0B10014" }, { "value": "#F0B10020", "theme": { "Mode": "Dark" } } ] } }, "fonts": [ { "name": "GT Pressura Trial", "url": "GT-Pressura-Regular-Trial.otf" } ] }