{ "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" } ] } ] } ] } ], "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" } ] }