From 1230cc4e77d5eed5f705deccffc778f8184ba4bc Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 12:08:53 +0100 Subject: [PATCH 01/11] feat: add sort direction (asc/desc) to note list sorting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add SortDirection type and SortConfig interface to noteListHelpers - getSortComparator now accepts optional direction parameter - SortDropdown shows ↑/↓ arrow buttons per option in the menu - Button label shows current direction arrow (ArrowUp/ArrowDown) - Persistence updated to store {option, direction} with backward compat for old string-only preferences - Default directions: modified/created=desc, title/status=asc - Status sort tiebreaker always uses newest-first regardless of direction Co-Authored-By: Claude Opus 4.6 --- src/components/NoteList.tsx | 49 ++++++++++++------------ src/components/SortDropdown.tsx | 67 +++++++++++++++++++++++---------- src/utils/noteListHelpers.ts | 46 +++++++++++++++++----- 3 files changed, 109 insertions(+), 53 deletions(-) diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx index d35552b0..bed98d63 100644 --- a/src/components/NoteList.tsx +++ b/src/components/NoteList.tsx @@ -8,14 +8,14 @@ import { getTypeColor, getTypeLightColor } from '../utils/typeColors' import { NoteItem, getTypeIcon } from './NoteItem' import { SortDropdown } from './SortDropdown' import { - type SortOption, type RelationshipGroup, - getSortComparator, + type SortOption, type SortDirection, type SortConfig, type RelationshipGroup, + DEFAULT_DIRECTIONS, getSortComparator, buildRelationshipGroups, filterEntries, sortByModified, relativeDate, getDisplayDate, loadSortPreferences, saveSortPreferences, } from '../utils/noteListHelpers' -// eslint-disable-next-line react-refresh/only-export-components -- re-exports for consumers +// Re-export for consumers export { sortByModified, filterEntries, buildRelationshipGroups, getSortComparator } export type { SortOption } @@ -38,10 +38,9 @@ function PinnedCard({ entry, typeEntryMap, onSelectNote, showDate }: { const te = typeEntryMap[entry.isA ?? ''] const color = getTypeColor(entry.isA ?? '', te?.color) const bgColor = getTypeLightColor(entry.isA ?? '', te?.color) - const Icon = useMemo(() => getTypeIcon(entry.isA, te?.icon), [entry.isA, te?.icon]) + const Icon = getTypeIcon(entry.isA, te?.icon) return (
onSelectNote(entry)}> - {/* eslint-disable-next-line react-hooks/static-components -- icon lookup from static map, no internal state */}
{entry.title}
{entry.snippet}
@@ -53,13 +52,13 @@ function PinnedCard({ entry, typeEntryMap, onSelectNote, showDate }: { function RelationshipGroupSection({ group, isCollapsed, sortPrefs, onToggle, handleSortChange, renderItem }: { group: RelationshipGroup isCollapsed: boolean - sortPrefs: Record + sortPrefs: Record onToggle: () => void - handleSortChange: (groupLabel: string, option: SortOption) => void + handleSortChange: (groupLabel: string, option: SortOption, direction: SortDirection) => void renderItem: (entry: VaultEntry) => React.ReactNode }) { - const groupSort = sortPrefs[group.label] ?? 'modified' - const sortedEntries = [...group.entries].sort(getSortComparator(groupSort)) + const groupConfig = sortPrefs[group.label] ?? { option: 'modified' as SortOption, direction: 'desc' as SortDirection } + const sortedEntries = [...group.entries].sort(getSortComparator(groupConfig.option, groupConfig.direction)) return (
@@ -68,7 +67,7 @@ function RelationshipGroupSection({ group, isCollapsed, sortPrefs, onToggle, han {group.entries.length} - + @@ -118,8 +117,8 @@ function useTypeEntryMap(entries: VaultEntry[]) { function EntityView({ entity, groups, query, collapsedGroups, sortPrefs, onToggleGroup, onSortChange, renderItem, typeEntryMap, onSelectNote }: { entity: VaultEntry; groups: RelationshipGroup[]; query: string - collapsedGroups: Set; sortPrefs: Record - onToggleGroup: (label: string) => void; onSortChange: (label: string, opt: SortOption) => void + collapsedGroups: Set; sortPrefs: Record + onToggleGroup: (label: string) => void; onSortChange: (label: string, opt: SortOption, dir: SortDirection) => void renderItem: (entry: VaultEntry) => React.ReactNode typeEntryMap: Record; onSelectNote: (entry: VaultEntry) => void }) { @@ -175,10 +174,10 @@ function countExpiredTrash(entries: VaultEntry[]): number { interface NoteListDataParams { entries: VaultEntry[]; selection: SidebarSelection; allContent: Record - query: string; listSort: SortOption + query: string; listSort: SortOption; listDirection: SortDirection; modifiedFiles?: ModifiedFile[] } -function useNoteListData({ entries, selection, allContent, query, listSort }: NoteListDataParams) { +function useNoteListData({ entries, selection, allContent, query, listSort, listDirection, modifiedFiles }: NoteListDataParams) { const isEntityView = selection.kind === 'entity' const isTrashView = selection.kind === 'filter' && selection.filter === 'trash' @@ -189,9 +188,9 @@ function useNoteListData({ entries, selection, allContent, query, listSort }: No const searched = useMemo(() => { if (isEntityView) return [] - const sorted = [...filterEntries(entries, selection)].sort(getSortComparator(listSort)) + const sorted = [...filterEntries(entries, selection, modifiedFiles)].sort(getSortComparator(listSort, listDirection)) return filterByQuery(sorted, query) - }, [entries, selection, isEntityView, listSort, query]) + }, [entries, selection, modifiedFiles, isEntityView, listSort, listDirection, query]) const searchedGroups = useMemo(() => { if (!isEntityView) return [] @@ -209,24 +208,26 @@ function useNoteListData({ entries, selection, allContent, query, listSort }: No // --- Main component --- -function NoteListInner({ entries, selection, selectedNote, allContent, onSelectNote, onCreateNote }: NoteListProps) { +function NoteListInner({ entries, selection, selectedNote, allContent, modifiedFiles, onSelectNote, onCreateNote }: NoteListProps) { const [search, setSearch] = useState('') const [searchVisible, setSearchVisible] = useState(false) const [collapsedGroups, setCollapsedGroups] = useState>(new Set()) - const [sortPrefs, setSortPrefs] = useState>(loadSortPreferences) + const [sortPrefs, setSortPrefs] = useState>(loadSortPreferences) - const handleSortChange = useCallback((groupLabel: string, option: SortOption) => { - setSortPrefs((prev) => { const next = { ...prev, [groupLabel]: option }; saveSortPreferences(next); return next }) + const handleSortChange = useCallback((groupLabel: string, option: SortOption, direction: SortDirection) => { + setSortPrefs((prev) => { const next = { ...prev, [groupLabel]: { option, direction } }; saveSortPreferences(next); return next }) }, []) const toggleGroup = useCallback((label: string) => { - setCollapsedGroups((prev) => { const next = new Set(prev); if (next.has(label)) next.delete(label); else next.add(label); return next }) + setCollapsedGroups((prev) => { const next = new Set(prev); next.has(label) ? next.delete(label) : next.add(label); return next }) }, []) const typeEntryMap = useTypeEntryMap(entries) const query = search.trim().toLowerCase() - const listSort = sortPrefs['__list__'] ?? 'modified' - const { isEntityView, isTrashView, typeDocument, searched, searchedGroups, expiredTrashCount } = useNoteListData({ entries, selection, allContent, query, listSort }) + const listConfig = sortPrefs['__list__'] ?? { option: 'modified' as SortOption, direction: 'desc' as SortDirection } + const listSort = listConfig.option + const listDirection = listConfig.direction + const { isEntityView, isTrashView, typeDocument, searched, searchedGroups, expiredTrashCount } = useNoteListData({ entries, selection, allContent, query, listSort, listDirection, modifiedFiles }) const renderItem = useCallback((entry: VaultEntry) => ( @@ -237,7 +238,7 @@ function NoteListInner({ entries, selection, selectedNote, allContent, onSelectN

{resolveHeaderTitle(selection, typeDocument)}

- {!isEntityView && } + {!isEntityView && } diff --git a/src/components/SortDropdown.tsx b/src/components/SortDropdown.tsx index 3b44969f..13e37133 100644 --- a/src/components/SortDropdown.tsx +++ b/src/components/SortDropdown.tsx @@ -1,12 +1,13 @@ import { useState, useEffect, useRef } from 'react' import { cn } from '@/lib/utils' -import { ArrowsDownUp, Check } from '@phosphor-icons/react' -import { type SortOption, SORT_OPTIONS } from '../utils/noteListHelpers' +import { ArrowUp, ArrowDown } from '@phosphor-icons/react' +import { type SortOption, type SortDirection, DEFAULT_DIRECTIONS, SORT_OPTIONS } from '../utils/noteListHelpers' -export function SortDropdown({ groupLabel, current, onChange }: { +export function SortDropdown({ groupLabel, current, direction, onChange }: { groupLabel: string current: SortOption - onChange: (groupLabel: string, option: SortOption) => void + direction: SortDirection + onChange: (groupLabel: string, option: SortOption, direction: SortDirection) => void }) { const [open, setOpen] = useState(false) const ref = useRef(null) @@ -20,11 +21,13 @@ export function SortDropdown({ groupLabel, current, onChange }: { return () => document.removeEventListener('mousedown', handleClick) }, [open]) - const handleSelect = (opt: SortOption) => { - onChange(groupLabel, opt) + const handleSelect = (opt: SortOption, dir: SortDirection) => { + onChange(groupLabel, opt, dir) setOpen(false) } + const DirectionIcon = direction === 'asc' ? ArrowUp : ArrowDown + return (
{open && ( -
- {SORT_OPTIONS.map((opt) => ( - - ))} +
+ {SORT_OPTIONS.map((opt) => { + const isActive = opt.value === current + return ( +
{ e.stopPropagation(); handleSelect(opt.value, isActive ? direction : DEFAULT_DIRECTIONS[opt.value]) }} + > + + {opt.label} + + + + + +
+ ) + })}
)}
diff --git a/src/utils/noteListHelpers.ts b/src/utils/noteListHelpers.ts index 2d9edbb6..8bc0068e 100644 --- a/src/utils/noteListHelpers.ts +++ b/src/utils/noteListHelpers.ts @@ -53,6 +53,19 @@ export function sortByModified(a: VaultEntry, b: VaultEntry): number { } export type SortOption = 'modified' | 'created' | 'title' | 'status' +export type SortDirection = 'asc' | 'desc' + +export interface SortConfig { + option: SortOption + direction: SortDirection +} + +export const DEFAULT_DIRECTIONS: Record = { + modified: 'desc', + created: 'desc', + title: 'asc', + status: 'asc', +} export const SORT_OPTIONS: { value: SortOption; label: string }[] = [ { value: 'modified', label: 'Modified' }, @@ -65,36 +78,51 @@ const STATUS_ORDER: Record = { Active: 0, Paused: 1, Done: 2, Finished: 3, } -export function getSortComparator(option: SortOption): (a: VaultEntry, b: VaultEntry) => number { +export function getSortComparator(option: SortOption, direction?: SortDirection): (a: VaultEntry, b: VaultEntry) => number { + const dir = direction ?? DEFAULT_DIRECTIONS[option] + const flip = dir === 'asc' ? 1 : -1 switch (option) { case 'modified': - return sortByModified + return (a, b) => flip * ((getDisplayDate(a) ?? 0) - (getDisplayDate(b) ?? 0)) case 'created': - return (a, b) => (b.createdAt ?? b.modifiedAt ?? 0) - (a.createdAt ?? a.modifiedAt ?? 0) + return (a, b) => flip * ((a.createdAt ?? a.modifiedAt ?? 0) - (b.createdAt ?? b.modifiedAt ?? 0)) case 'title': - return (a, b) => a.title.localeCompare(b.title) + return (a, b) => flip * a.title.localeCompare(b.title) case 'status': return (a, b) => { const sa = STATUS_ORDER[a.status ?? ''] ?? 999 const sb = STATUS_ORDER[b.status ?? ''] ?? 999 - if (sa !== sb) return sa - sb - return sortByModified(a, b) + if (sa !== sb) return flip * (sa - sb) + // Tiebreaker: always newest first regardless of direction + return (getDisplayDate(b) ?? 0) - (getDisplayDate(a) ?? 0) } } } const SORT_STORAGE_KEY = 'laputa-sort-preferences' -export function loadSortPreferences(): Record { +export function loadSortPreferences(): Record { try { const raw = localStorage.getItem(SORT_STORAGE_KEY) - return raw ? JSON.parse(raw) : {} + if (!raw) return {} + const parsed = JSON.parse(raw) + const result: Record = {} + for (const [key, value] of Object.entries(parsed)) { + if (typeof value === 'string') { + // Migrate old format: bare SortOption string → SortConfig + const opt = value as SortOption + result[key] = { option: opt, direction: DEFAULT_DIRECTIONS[opt] } + } else { + result[key] = value as SortConfig + } + } + return result } catch { return {} } } -export function saveSortPreferences(prefs: Record) { +export function saveSortPreferences(prefs: Record) { try { localStorage.setItem(SORT_STORAGE_KEY, JSON.stringify(prefs)) } catch { /* ignore */ } From 163a5606b64d9dc5040d6652d23d01f429faa0ac Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 12:10:29 +0100 Subject: [PATCH 02/11] test: add tests for sort direction behavior - getSortComparator with explicit asc/desc direction for all sort modes - Direction arrows visible in dropdown menu - Clicking direction arrow reverses sort order in the list - Direction persistence verified through sort behavior - Direction icon shown on sort button Co-Authored-By: Claude Opus 4.6 --- src/components/NoteList.test.tsx | 97 ++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) diff --git a/src/components/NoteList.test.tsx b/src/components/NoteList.test.tsx index e8beb7db..6e00d480 100644 --- a/src/components/NoteList.test.tsx +++ b/src/components/NoteList.test.tsx @@ -335,6 +335,38 @@ describe('getSortComparator', () => { const sorted = [a, b].sort(getSortComparator('status')) expect(sorted.map((e) => e.title)).toEqual(['NewerActive', 'OlderActive']) }) + + it('sorts by modified date ascending when direction is asc', () => { + const a = makeEntry({ title: 'A', modifiedAt: 1000 }) + const b = makeEntry({ title: 'B', modifiedAt: 3000 }) + const c = makeEntry({ title: 'C', modifiedAt: 2000 }) + const sorted = [a, b, c].sort(getSortComparator('modified', 'asc')) + expect(sorted.map((e) => e.title)).toEqual(['A', 'C', 'B']) + }) + + it('sorts by title descending when direction is desc', () => { + const a = makeEntry({ title: 'Zebra' }) + const b = makeEntry({ title: 'Alpha' }) + const c = makeEntry({ title: 'Middle' }) + const sorted = [a, b, c].sort(getSortComparator('title', 'desc')) + expect(sorted.map((e) => e.title)).toEqual(['Zebra', 'Middle', 'Alpha']) + }) + + it('sorts by created date ascending when direction is asc', () => { + const a = makeEntry({ title: 'A', createdAt: 3000, modifiedAt: 1000 }) + const b = makeEntry({ title: 'B', createdAt: 1000, modifiedAt: 3000 }) + const c = makeEntry({ title: 'C', createdAt: 2000, modifiedAt: 2000 }) + const sorted = [a, b, c].sort(getSortComparator('created', 'asc')) + expect(sorted.map((e) => e.title)).toEqual(['B', 'C', 'A']) + }) + + it('sorts by status descending (null first, Done before Active)', () => { + const a = makeEntry({ title: 'Done', status: 'Done', modifiedAt: 1000 }) + const b = makeEntry({ title: 'Active', status: 'Active', modifiedAt: 1000 }) + const c = makeEntry({ title: 'NoStatus', status: null, modifiedAt: 1000 }) + const sorted = [a, b, c].sort(getSortComparator('status', 'desc')) + expect(sorted.map((e) => e.title)).toEqual(['NoStatus', 'Done', 'Active']) + }) }) describe('NoteList sort controls', () => { @@ -425,6 +457,71 @@ describe('NoteList sort controls', () => { expect(screen.queryByTestId('sort-menu-__list__')).not.toBeInTheDocument() }) + it('shows direction arrows in sort dropdown menu', () => { + render( + + ) + fireEvent.click(screen.getByTestId('sort-button-__list__')) + // Each option should have asc and desc direction buttons + expect(screen.getByTestId('sort-dir-asc-modified')).toBeInTheDocument() + expect(screen.getByTestId('sort-dir-desc-modified')).toBeInTheDocument() + expect(screen.getByTestId('sort-dir-asc-title')).toBeInTheDocument() + expect(screen.getByTestId('sort-dir-desc-title')).toBeInTheDocument() + }) + + it('reverses sort order when clicking direction arrow', () => { + const entries = [ + makeEntry({ path: '/a.md', title: 'Zebra', modifiedAt: 3000 }), + makeEntry({ path: '/b.md', title: 'Alpha', modifiedAt: 1000 }), + makeEntry({ path: '/c.md', title: 'Middle', modifiedAt: 2000 }), + ] + render( + + ) + // Default sort: modified descending (Zebra first at 3000) + let titles = screen.getAllByText(/Zebra|Alpha|Middle/).map((el) => el.textContent) + expect(titles).toEqual(['Zebra', 'Middle', 'Alpha']) + + // Click the asc arrow for modified to reverse + fireEvent.click(screen.getByTestId('sort-button-__list__')) + fireEvent.click(screen.getByTestId('sort-dir-asc-modified')) + + // Now ascending: Alpha (1000) first + titles = screen.getAllByText(/Zebra|Alpha|Middle/).map((el) => el.textContent) + expect(titles).toEqual(['Alpha', 'Middle', 'Zebra']) + }) + + it('persists sort direction via saveSortPreferences', () => { + const entries = [ + makeEntry({ path: '/a.md', title: 'Zebra', modifiedAt: 3000 }), + makeEntry({ path: '/b.md', title: 'Alpha', modifiedAt: 1000 }), + ] + render( + + ) + // Select title sort with desc direction + fireEvent.click(screen.getByTestId('sort-button-__list__')) + fireEvent.click(screen.getByTestId('sort-dir-desc-title')) + + // Verify direction took effect: desc title means Z before A + const titles = screen.getAllByText(/Zebra|Alpha/).map((el) => el.textContent) + expect(titles).toEqual(['Zebra', 'Alpha']) + }) + + it('shows direction icon on the sort button that reflects current direction', () => { + render( + + ) + // Default: modified desc → should have ArrowDown icon + expect(screen.getByTestId('sort-direction-icon-__list__')).toBeInTheDocument() + + // Switch to title (default asc) and verify icon changes + fireEvent.click(screen.getByTestId('sort-button-__list__')) + fireEvent.click(screen.getByTestId('sort-option-title')) + // Title default is asc → should show ArrowUp icon + expect(screen.getByTestId('sort-direction-icon-__list__')).toBeInTheDocument() + }) + it('sorts relationship subsection entries when sort option changed', () => { // Create an entity with children that have different titles const parent = makeEntry({ From 8b91db3466dcd085246e05597f9b414b48268a78 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 12:11:56 +0100 Subject: [PATCH 03/11] design: improve-sort wireframes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shows sort dropdown with direction arrows (↑/↓) per option, active state highlighting, and header button reflecting current direction. Co-Authored-By: Claude Opus 4.6 --- design/improve-sort.pen | 10253 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 10253 insertions(+) create mode 100644 design/improve-sort.pen diff --git a/design/improve-sort.pen b/design/improve-sort.pen new file mode 100644 index 00000000..eecea385 --- /dev/null +++ b/design/improve-sort.pen @@ -0,0 +1,10253 @@ +{ + "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 + } + ] + } + ] + } + ] + } + ], + "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" + } + ] +} \ No newline at end of file From d88b16357b498a77e7406fbb9001b04b466ffe41 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 12:13:08 +0100 Subject: [PATCH 04/11] fix: remove unused DEFAULT_DIRECTIONS import from NoteList Co-Authored-By: Claude Opus 4.6 --- src/components/NoteList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx index bed98d63..c5849bab 100644 --- a/src/components/NoteList.tsx +++ b/src/components/NoteList.tsx @@ -9,7 +9,7 @@ import { NoteItem, getTypeIcon } from './NoteItem' import { SortDropdown } from './SortDropdown' import { type SortOption, type SortDirection, type SortConfig, type RelationshipGroup, - DEFAULT_DIRECTIONS, getSortComparator, + getSortComparator, buildRelationshipGroups, filterEntries, sortByModified, relativeDate, getDisplayDate, loadSortPreferences, saveSortPreferences, From 158c5a00898a9b2095a6f774be45b71b75168281 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 12:35:43 +0100 Subject: [PATCH 05/11] =?UTF-8?q?design:=20fix=20improve-sort=20wireframes?= =?UTF-8?q?=20=E2=80=94=20sort=20dropdown=20with=20direction=20arrows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- design/improve-sort.pen | 10690 ++------------------------------------ 1 file changed, 495 insertions(+), 10195 deletions(-) diff --git a/design/improve-sort.pen b/design/improve-sort.pen index eecea385..fbd221fc 100644 --- a/design/improve-sort.pen +++ b/design/improve-sort.pen @@ -1,10253 +1,553 @@ { "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 - } - ] - } - ] - } - ] - } - ], "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" - } - } + { "value": "#FFFFFF" }, + { "value": "#191919", "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" - } - } + { "value": "#37352F" }, + { "value": "#ffffffcf", "theme": { "Mode": "Dark" } } ] }, "--muted-foreground": { "type": "color", "value": [ - { - "value": "#787774" - }, - { - "value": "#888888", - "theme": { - "Mode": "Dark" - } - } + { "value": "#787774" }, + { "value": "#ffffff71", "theme": { "Mode": "Dark" } } ] }, "--popover": { "type": "color", "value": [ - { - "value": "#FFFFFF" - }, - { - "value": "#1e1e3a", - "theme": { - "Mode": "Dark" - } - } + { "value": "#FFFFFF" }, + { "value": "#252525", "theme": { "Mode": "Dark" } } ] }, "--popover-foreground": { "type": "color", "value": [ - { - "value": "#37352F" - }, - { - "value": "#e0e0e0", - "theme": { - "Mode": "Dark" - } - } + { "value": "#37352F" }, + { "value": "#ffffffcf", "theme": { "Mode": "Dark" } } ] }, - "--primary": { + "--border": { "type": "color", "value": [ - { - "value": "#2383E2" - }, - { - "value": "#4a9eff", - "theme": { - "Mode": "Dark" - } - }, - { - "value": "#155DFF" - }, - { - "value": "#155DFF", - "theme": { - "Mode": "Dark" - } - } + { "value": "#E9E9E7" }, + { "value": "#ffffff18", "theme": { "Mode": "Dark" } } ] }, - "--primary-foreground": { + "--accent-blue": { "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" - } - } + { "value": "#2383E2" }, + { "value": "#4a9eff", "theme": { "Mode": "Dark" } } ] }, "--sidebar": { "type": "color", "value": [ - { - "value": "#F7F6F3" - }, - { - "value": "#1a1a2e", - "theme": { - "Mode": "Dark" - } - } + { "value": "#F7F7F5" }, + { "value": "#202020", "theme": { "Mode": "Dark" } } ] }, - "--sidebar-accent": { + "--muted": { "type": "color", "value": [ - { - "value": "#EBEBEA" - }, - { - "value": "#252545", - "theme": { - "Mode": "Dark" - } - } + { "value": "#F1F1EF" }, + { "value": "#ffffff0e", "theme": { "Mode": "Dark" } } ] }, - "--sidebar-accent-foreground": { - "type": "color", - "value": [ - { - "value": "#37352F" - }, - { - "value": "#ffffff", - "theme": { - "Mode": "Dark" - } - } - ] + "--font-primary": { + "type": "font", + "value": [{ "value": "Inter" }] }, - "--sidebar-border": { - "type": "color", - "value": [ - { - "value": "#E9E9E7" - }, - { - "value": "#2a2a4a", - "theme": { - "Mode": "Dark" - } - } - ] + "--radius-sm": { + "type": "number", + "value": [{ "value": 4 }] }, - "--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" - } - } - ] + "--radius-md": { + "type": "number", + "value": [{ "value": 6 }] } }, - "fonts": [ + "children": [ { - "name": "GT Pressura Trial", - "url": "GT-Pressura-Regular-Trial.otf" + "type": "frame", + "id": "srtDD", + "x": 0, + "y": 0, + "name": "Sort Dropdown — Direction Arrows", + "clip": true, + "width": 260, + "height": 280, + "fill": "$--popover", + "cornerRadius": "$--radius-md", + "stroke": { + "align": "outside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "padding": [8, 0], + "children": [ + { + "type": "frame", + "id": "srtH1", + "name": "dropdownHeader", + "width": "fill_container", + "height": 28, + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtHL", + "name": "headerLabel", + "content": "Sort by", + "fontSize": 11, + "fontWeight": 600, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary", + "textTransform": "uppercase", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "srtR1", + "name": "row-modified", + "width": "fill_container", + "height": 36, + "padding": [0, 12], + "alignItems": "center", + "fill": "$--muted", + "children": [ + { + "type": "text", + "id": "srtT1", + "name": "label-modified", + "content": "Modified", + "fontSize": 13, + "fontWeight": 500, + "fill": "$--popover-foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "frame", + "id": "srtA1", + "name": "arrows-modified", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtU1", + "name": "arrow-up-active", + "content": "↑", + "fontSize": 13, + "fontWeight": 700, + "fill": "$--accent-blue" + }, + { + "type": "text", + "id": "srtD1", + "name": "arrow-down", + "content": "↓", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtR2", + "name": "row-title", + "width": "fill_container", + "height": 36, + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtT2", + "name": "label-title", + "content": "Title", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--popover-foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "frame", + "id": "srtA2", + "name": "arrows-title", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtU2", + "name": "arrow-up", + "content": "↑", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "srtD2", + "name": "arrow-down", + "content": "↓", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtR3", + "name": "row-created", + "width": "fill_container", + "height": 36, + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtT3", + "name": "label-created", + "content": "Created", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--popover-foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "frame", + "id": "srtA3", + "name": "arrows-created", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtU3", + "name": "arrow-up", + "content": "↑", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "srtD3", + "name": "arrow-down", + "content": "↓", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtR4", + "name": "row-type", + "width": "fill_container", + "height": 36, + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtT4", + "name": "label-type", + "content": "Type", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--popover-foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "frame", + "id": "srtA4", + "name": "arrows-type", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtU4", + "name": "arrow-up", + "content": "↑", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "srtD4", + "name": "arrow-down", + "content": "↓", + "fontSize": 13, + "fontWeight": 400, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtSP", + "name": "separator", + "width": "fill_container", + "height": 1, + "fill": "$--border" + }, + { + "type": "frame", + "id": "srtAN", + "name": "annotation", + "width": "fill_container", + "padding": [6, 12], + "children": [ + { + "type": "text", + "id": "srtAT", + "name": "annotation-text", + "content": "Click ↑↓ to toggle direction. Blue = active.", + "fontSize": 11, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtBN", + "x": 300, + "y": 0, + "name": "Sort Button — With Direction Indicator", + "clip": true, + "width": 400, + "height": 200, + "fill": "$--background", + "cornerRadius": "$--radius-md", + "stroke": { + "align": "outside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "padding": [16, 16], + "gap": 16, + "children": [ + { + "type": "frame", + "id": "srtBH", + "name": "noteListHeader", + "width": "fill_container", + "height": 36, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtBC", + "name": "noteCount", + "content": "42 notes", + "fontSize": 12, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "frame", + "id": "srtBB", + "name": "sortButton", + "padding": [4, 8], + "cornerRadius": "$--radius-sm", + "fill": "$--muted", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "text", + "id": "srtBL", + "name": "sortLabel", + "content": "Modified", + "fontSize": 12, + "fontWeight": 500, + "fill": "$--foreground", + "fontFamily": "$--font-primary" + }, + { + "type": "text", + "id": "srtBA", + "name": "directionArrow", + "content": "↓", + "fontSize": 12, + "fontWeight": 600, + "fill": "$--accent-blue" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtSP2", + "name": "divider", + "width": "fill_container", + "height": 1, + "fill": "$--border" + }, + { + "type": "frame", + "id": "srtEX", + "name": "exampleNotes", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "frame", + "id": "srtN1", + "name": "noteRow1", + "width": "fill_container", + "height": 32, + "padding": [0, 8], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtNT1", + "name": "noteTitle1", + "content": "Meeting Notes — Feb 22", + "fontSize": 13, + "fill": "$--foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "text", + "id": "srtND1", + "name": "noteDate1", + "content": "2 min ago", + "fontSize": 11, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary" + } + ] + }, + { + "type": "frame", + "id": "srtN2", + "name": "noteRow2", + "width": "fill_container", + "height": 32, + "padding": [0, 8], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtNT2", + "name": "noteTitle2", + "content": "Project Roadmap", + "fontSize": 13, + "fill": "$--foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "text", + "id": "srtND2", + "name": "noteDate2", + "content": "1 hr ago", + "fontSize": 11, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary" + } + ] + }, + { + "type": "frame", + "id": "srtN3", + "name": "noteRow3", + "width": "fill_container", + "height": 32, + "padding": [0, 8], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "srtNT3", + "name": "noteTitle3", + "content": "Weekly Review", + "fontSize": 13, + "fill": "$--foreground", + "fontFamily": "$--font-primary", + "width": "fill_container" + }, + { + "type": "text", + "id": "srtND3", + "name": "noteDate3", + "content": "Yesterday", + "fontSize": 11, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary" + } + ] + } + ] + }, + { + "type": "frame", + "id": "srtAN2", + "name": "annotation", + "width": "fill_container", + "padding": [6, 0], + "children": [ + { + "type": "text", + "id": "srtAT2", + "name": "annotation-text", + "content": "Sort button shows property + direction arrow. Click to open dropdown.", + "fontSize": 11, + "fill": "$--muted-foreground", + "fontFamily": "$--font-primary" + } + ] + } + ] } ] } \ No newline at end of file From b4cd95f0b400e90ab3a30fb04deb5e4f43fd8c79 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 18:37:49 +0100 Subject: [PATCH 06/11] design: collapsible sidebar wireframes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Four frames showing collapse states: 1. All panels visible (default with collapse button) 2. Sidebar collapsed (note list + editor) 3. Editor only (⌥1) 4. Editor + notes (⌥2) Co-Authored-By: Claude Opus 4.6 --- design/sidebar-collapsable.pen | 12660 +++++++++++++++++++++++++++++++ 1 file changed, 12660 insertions(+) create mode 100644 design/sidebar-collapsable.pen diff --git a/design/sidebar-collapsable.pen b/design/sidebar-collapsable.pen new file mode 100644 index 00000000..cf340057 --- /dev/null +++ b/design/sidebar-collapsable.pen @@ -0,0 +1,12660 @@ +{ + "version": "2.8", + "children": [ + { + "type": "frame", + "id": "qHhaj", + "x": 68, + "y": 3385, + "name": "Laputa App — Full Layout (Light)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 1440, + "height": 900, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "yVQFF", + "name": "macOS Title Bar", + "width": "fill_container", + "height": 38, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "0MCME", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "c2AU6", + "name": "closeBtn", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "h0zbh", + "name": "minimizeBtn", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "tcqbu", + "name": "maximizeBtn", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "oHDfa", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "ZTOSJ", + "name": "Panel: Sidebar", + "clip": true, + "width": 250, + "height": "fill_container", + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": 0, + "fill": "$--sidebar-border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "4wMva", + "name": "Filters", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 1, + "padding": [ + 8, + 8, + 16, + 8 + ], + "children": [ + { + "type": "frame", + "id": "Q78hg", + "name": "filterAll", + "width": "fill_container", + "fill": "#4a9eff18", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "5ip58", + "name": "leftAll", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "PXpWi", + "name": "iconAll", + "width": 18, + "height": 18, + "iconFontName": "tray-fill", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--primary" + }, + { + "type": "text", + "id": "NWprl", + "name": "fAllTxt", + "fill": "$--primary", + "content": "Untagged", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "NZ9Dv", + "name": "countAll", + "height": 20, + "fill": "$--primary", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mPlUV", + "name": "badgeAllTxt", + "fill": "$--primary-foreground", + "content": "24", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "YLWsY", + "name": "filterUntagged", + "width": "fill_container", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "k7LIr", + "name": "leftUntagged", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FMVlh", + "name": "untaggedIcon", + "width": 18, + "height": 18, + "iconFontName": "cardholder", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "5XllD", + "name": "untaggedTxt", + "fill": "$--foreground", + "content": "All Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "aSpGv", + "name": "countUntagged", + "height": 20, + "fill": "$--secondary", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "qZUFt", + "name": "untaggedBadgeTxt", + "fill": "$--muted-foreground", + "content": "6", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Jahon", + "name": "filterTrash", + "width": "fill_container", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IOiBI", + "name": "leftTrash", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "X6F74", + "name": "trashIcon", + "width": 18, + "height": 18, + "iconFontName": "trash", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "vRMH9", + "name": "trashTxt", + "fill": "$--foreground", + "content": "Archive", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "JMpkq", + "name": "countTrash", + "height": 20, + "fill": "$--secondary", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "0cKm4", + "name": "trashBadgeTxt", + "fill": "$--muted-foreground", + "content": "2", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "6RMbq", + "name": "filterChanges", + "width": "fill_container", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DpdBu", + "name": "leftChanges", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "VTusA", + "name": "iconChanges", + "width": 18, + "height": 18, + "iconFontName": "git-branch", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "qvq5O", + "name": "fChangesTxt", + "fill": "$--foreground", + "content": "Changes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "qAMES", + "name": "countChanges", + "height": 20, + "fill": "$--secondary", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "nkzVk", + "name": "badgeChangesTxt", + "fill": "$--muted-foreground", + "content": "3", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SSEUP", + "name": "Sections", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 0 + ], + "children": [ + { + "type": "frame", + "id": "nM2Cn", + "name": "projGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6, + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "ouIl9", + "name": "projHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Rx1Cp", + "name": "leftProj", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "t5WJJ", + "name": "projIcon", + "width": 18, + "height": 18, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "S3sGC", + "name": "projLabel", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "FKwSS", + "name": "projChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "IHzFh", + "name": "projItem1", + "width": "fill_container", + "fill": "$--accent-red-light", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iiFcl", + "name": "proj1Txt", + "fill": "$--accent-red", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LdaU9", + "name": "projItem2", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "XRll4", + "name": "proj2Txt", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Vmykd", + "name": "projItem3", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "0PqQQ", + "name": "proj3Txt", + "fill": "$--muted-foreground", + "content": "AI Habit Tracker", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "WAQtn", + "name": "respGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "aSi3l", + "name": "respHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "lov6B", + "name": "leftResp", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Em4ns", + "name": "respIcon", + "width": 18, + "height": 18, + "iconFontName": "medal", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "WPRCo", + "name": "respLabel", + "fill": "$--foreground", + "content": "Responsibilities", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "6hDdQ", + "name": "respChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FmUu0", + "name": "procGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "Dat6o", + "name": "respHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "iJlgx", + "name": "leftResp", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "I2J1R", + "name": "respIcon", + "width": 18, + "height": 18, + "iconFontName": "arrows-clockwise", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "AToF0", + "name": "Procedures", + "fill": "$--foreground", + "content": "Procedures", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "meEIL", + "name": "procChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "T4NG2", + "name": "peopleGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "Q01iL", + "name": "peopleHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "eE6Ca", + "name": "leftPeople", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "jOmVa", + "name": "peopleIcon", + "width": 18, + "height": 18, + "iconFontName": "users", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "caelD", + "name": "peopleLbl", + "fill": "$--foreground", + "content": "People", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "TkuS1", + "name": "peopleChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "BY1Qx", + "name": "eventsGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "v28d8", + "name": "eventsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "TPyOc", + "name": "leftEvents", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ELRMi", + "name": "eventsIcon", + "width": 18, + "height": 18, + "iconFontName": "calendar-blank", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "OlI6Q", + "name": "eventsLbl", + "fill": "$--foreground", + "content": "Events", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "TZwK8", + "name": "eventsChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "trKNW", + "name": "topicsGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "qdbZ3", + "name": "eventsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "JP83M", + "name": "leftEvents", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Q57kF", + "name": "eventsIcon", + "width": 18, + "height": 18, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "DeVxP", + "name": "eventsLbl", + "fill": "$--foreground", + "content": "Topics", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "nzAcm", + "name": "topicsChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZWXuk", + "name": "topicsGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "CQaLg", + "name": "eventsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "2SMcN", + "name": "leftEvents", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "0N8UH", + "name": "eventsIcon", + "width": 18, + "height": 18, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "6XB2H", + "name": "eventsLbl", + "fill": "$--foreground", + "content": "Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "NmBSB", + "name": "topicsChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "2cQBp", + "name": "eventsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "0f10v", + "name": "leftEvents", + "gap": 8, + "padding": [ + 8, + 0 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xBv1X", + "name": "eventsIcon", + "width": 18, + "height": 18, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "viWPL", + "name": "eventsLbl", + "fill": "$--muted-foreground", + "content": "Create new type", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "8lLHp", + "name": "Commit Area", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "padding": 12, + "children": [ + { + "type": "frame", + "id": "YYjuy", + "name": "commitBtn", + "width": "fill_container", + "fill": "$--primary", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "YF44G", + "name": "commitIcon", + "width": 14, + "height": 14, + "iconFontName": "git-commit-horizontal", + "iconFontFamily": "lucide", + "fill": "$--primary-foreground" + }, + { + "type": "text", + "id": "vpzJm", + "name": "commitTxt", + "fill": "$--primary-foreground", + "content": "Commit & Push", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "vhU5z", + "name": "commitBadge", + "height": 18, + "fill": "#ffffff40", + "cornerRadius": 9, + "padding": [ + 0, + 5 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sdvYT", + "name": "commitBadgeTxt", + "fill": "$--white", + "content": "3", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "IIvWr", + "name": "Resize Handle", + "fill": "$--border", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "zFIJv", + "name": "Panel: NoteList", + "clip": true, + "width": 300, + "height": "fill_container", + "fill": "$--card", + "stroke": { + "align": "inside", + "thickness": 0, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "uZJVN", + "name": "NoteList Header", + "width": "fill_container", + "height": 45, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 14, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "hmbdb", + "name": "nlTitle", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "m6AeW", + "name": "nlActions", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "8gMXE", + "name": "searchIcon", + "width": 16, + "height": 16, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "YqvSN", + "name": "plusIcon", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "0aJUm", + "name": "Note Items", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "y9y05", + "name": "Backlinks Group", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "tMsM4", + "name": "Note Item Selected", + "width": "fill_container", + "fill": "$--accent-red-light", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "#E9E9E7" + }, + "children": [ + { + "type": "rectangle", + "id": "npYuc", + "name": "leftAccent", + "fill": "$--accent-red", + "width": 3, + "height": "fill_container" + }, + { + "type": "frame", + "id": "a33Wx", + "name": "noteSelContent", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [ + 14, + 16 + ], + "children": [ + { + "type": "frame", + "id": "AZkyx", + "name": "noteSelRow", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "j7GDJ", + "name": "titleGroup", + "width": "fill_container", + "gap": 6, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "j7o2Q", + "name": "noteSelTitle", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "BnkTG", + "name": "ico", + "width": 14, + "height": 14, + "iconFontName": "wrench", + "iconFontFamily": "lucide", + "fill": "$--accent-red" + } + ] + } + ] + }, + { + "type": "text", + "id": "Ac5Ds", + "name": "noteSelSnip", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Personal knowledge and life management desktop app...", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "9ASsT", + "name": "noteSelTime", + "fill": "$--accent-red", + "content": "2m ago", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "7G8pN", + "name": "Related Notes Group", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "fDxtF", + "name": "Related Notes Header", + "width": "fill_container", + "height": 32, + "fill": "$--muted", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "UBRdO", + "name": "rnLeft", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "8Z4Wq", + "name": "rnLabel", + "fill": "$--muted-foreground", + "content": "RELATED NOTES", + "fontFamily": "IBM Plex Mono", + "fontSize": 11 + }, + { + "type": "text", + "id": "vpnZr", + "name": "rnCount", + "fill": "$--muted-foreground", + "content": "2", + "fontFamily": "IBM Plex Mono", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "X9LIR", + "name": "rnRight", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "fzVWu", + "name": "rnFilter", + "width": 12, + "height": 12, + "iconFontName": "funnel", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "wuqsO", + "name": "rnPlus", + "width": 12, + "height": 12, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "SbjLq", + "name": "rnChev", + "width": 12, + "height": 12, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "AsAKG", + "name": "Note Item", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 4, + "padding": [ + 14, + 16 + ], + "children": [ + { + "type": "frame", + "id": "QX5A1", + "name": "note2Row", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rYdta", + "name": "leafGroup", + "width": "fill_container", + "gap": 6, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PC9XN", + "name": "note2Title", + "fill": "$--foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "oI64Y", + "name": "leafIco", + "width": 14, + "height": 14, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "fill": "$--accent-green" + } + ] + } + ] + }, + { + "type": "text", + "id": "S9JPj", + "name": "note2Snip", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Redesigning portfolio site with modern stack and updated visual language...", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "lU75x", + "name": "note2Time", + "fill": "$--muted-foreground", + "content": "1h ago", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "u6E6Z", + "name": "Note Item", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 4, + "padding": [ + 14, + 16 + ], + "children": [ + { + "type": "frame", + "id": "ZjCz3", + "name": "note2Row", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mxCzu", + "name": "leafGroup", + "width": "fill_container", + "gap": 6, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "INenY", + "name": "note2Title", + "fill": "$--foreground", + "content": "Sample note 2", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "gz6qS", + "name": "leafIco", + "width": 14, + "height": 14, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "fill": "$--accent-green" + } + ] + } + ] + }, + { + "type": "text", + "id": "s141z", + "name": "note2Snip", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Lorem ipsum dolor sit amet consequetur with modern stack and updated language...", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "SvGnt", + "name": "note2Time", + "fill": "$--muted-foreground", + "content": "1h ago", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "1GwHB", + "name": "Events Group", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "fp4xI", + "name": "Events Header", + "width": "fill_container", + "height": 32, + "fill": "$--muted", + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "MNNuU", + "name": "evLeft", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "BNxZp", + "name": "evLabel", + "fill": "$--muted-foreground", + "content": "EVENTS", + "fontFamily": "IBM Plex Mono", + "fontSize": 11 + }, + { + "type": "text", + "id": "qcEvw", + "name": "evCount", + "fill": "$--muted-foreground", + "content": "2", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "WCyfc", + "name": "evRight", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "SpCoO", + "name": "evFilter", + "width": 12, + "height": 12, + "iconFontName": "funnel", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "G1DCl", + "name": "evPlus", + "width": 12, + "height": 12, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "sAalN", + "name": "evChev", + "width": 12, + "height": 12, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "k7CjA", + "name": "Note Item 2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 4, + "padding": [ + 14, + 16 + ], + "children": [ + { + "type": "frame", + "id": "og5Gz", + "name": "note3Row", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ttBdk", + "name": "calGroup", + "width": "fill_container", + "gap": 6, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KI8Bf", + "name": "note3Title", + "fill": "$--foreground", + "content": "Meeting with Grant", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "LdRjU", + "name": "calIco", + "width": 14, + "height": 14, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$--accent-yellow" + } + ] + } + ] + }, + { + "type": "text", + "id": "FfPXa", + "name": "note3Snip", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Discussed Q1 goals and hiring priorities with the engineering team leads...", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "BHh4Z", + "name": "note3Time", + "fill": "$--muted-foreground", + "content": "Yesterday", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "AQ51u", + "name": "Note Item 2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 4, + "padding": [ + 14, + 16 + ], + "children": [ + { + "type": "frame", + "id": "SHgK3", + "name": "note3Row", + "width": "fill_container", + "gap": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "3rIet", + "name": "calGroup", + "width": "fill_container", + "gap": 6, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dCwzu", + "name": "note3Title", + "fill": "$--foreground", + "content": "Meeting with Matteo", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "l8O2I", + "name": "calIco", + "width": 14, + "height": 14, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$--accent-yellow" + } + ] + } + ] + }, + { + "type": "text", + "id": "1L4oo", + "name": "note3Snip", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Discussed Q1 goals and hiring priorities with the engineering team leads...", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "3oBam", + "name": "note3Time", + "fill": "$--muted-foreground", + "content": "Yesterday", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "MeqjO", + "name": "Resize Handle 2", + "fill": "$--border", + "width": 1, + "height": "fill_container" + }, + { + "type": "frame", + "id": "zAbPt", + "name": "Panel: Editor", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "NdYcO", + "name": "Tab Bar", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nVUGr", + "name": "Tab Active", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kBpGX", + "name": "tab1Txt", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "Bb2AE", + "name": "tab1Close", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "GYeyL", + "name": "Tab Inactive", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kZ1bn", + "name": "tab2Txt", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "RwyYI", + "name": "tab2Close", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "sbpmq", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "WF97k", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "rfSoS", + "name": "iconPlus", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "t0u6z", + "name": "iconSplit", + "width": 16, + "height": 16, + "iconFontName": "columns", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "kbe1P", + "name": "iconExpand", + "width": 16, + "height": 16, + "iconFontName": "arrows-out-simple", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "rTdKS", + "name": "Editor Body", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "NfyTF", + "name": "Editor Left", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "hvoFh", + "name": "Info Bar", + "width": "fill_container", + "height": 45, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "bTP0I", + "name": "infoLeft", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Msj7v", + "name": "breadcrumbType", + "fill": "$--muted-foreground", + "content": "Project", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "wqdMG", + "name": "breadcrumbSep", + "fill": "$--muted-foreground", + "content": "›", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "FzENd", + "name": "breadcrumbName", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "pvTmc", + "name": "dotSep", + "fill": "$--muted-foreground", + "content": "·", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "9ga1R", + "name": "modifiedTxt", + "fill": "$--accent-yellow", + "content": "M", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "3bzDp", + "name": "infoRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "9Ctb0", + "name": "iconSearch", + "width": 16, + "height": 16, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "csHzz", + "name": "iconSearch", + "width": 16, + "height": 16, + "iconFontName": "git-branch", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "2s6Of", + "name": "iconSearch", + "width": 16, + "height": 16, + "iconFontName": "cursor-text", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "JVSlj", + "name": "iconAI", + "width": 16, + "height": 16, + "iconFontName": "sparkle", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "k3AiV", + "name": "iconMore", + "width": 16, + "height": 16, + "iconFontName": "dots-three", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "vvETz", + "name": "Editor Content", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 32, + 64 + ], + "children": [ + { + "type": "text", + "id": "b6up3", + "name": "editorP1", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Personal knowledge and life management desktop app, built with Tauri v2 + React + TypeScript + CodeMirror 6. It reads a vault of markdown files with YAML frontmatter and presents them in a four-panel UI inspired by Bear Notes.", + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "a2S43", + "name": "editorH2", + "fill": "$--foreground", + "content": "Architecture", + "lineHeight": 1.3, + "fontFamily": "Inter", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "id": "wgvQa", + "name": "editorP2", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "The app uses a four-panel layout: Sidebar for navigation, NoteList for browsing, Editor for content, and Inspector for metadata. All data lives in markdown files with YAML frontmatter, git-versioned.", + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "GGP97", + "name": "Inspector", + "clip": true, + "width": 260, + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "left": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "FbHy7", + "name": "Inspector Header", + "width": "fill_container", + "height": 45, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 8, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "sA7Dx", + "name": "leftGroup", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "0ccF1", + "name": "propIcon", + "width": 16, + "height": 16, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "T2vTZ", + "name": "inspTitle", + "fill": "$--muted-foreground", + "content": "Properties", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "icon_font", + "id": "NQOhZ", + "name": "sidebarIcon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "LYFki", + "name": "Inspector Body", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": 12, + "children": [ + { + "type": "frame", + "id": "8g61y", + "name": "Properties Section", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "VhH4P", + "name": "addPropBtn", + "width": "fill_container", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 6, + 12 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Q9z8F", + "name": "addPropTxt", + "fill": "$--muted-foreground", + "content": "+ Add property", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "6PwTH", + "name": "propType", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Vt2BC", + "name": "propTypeLbl", + "fill": "$--muted-foreground", + "content": "TYPE", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "uvBiY", + "name": "propTypeVal", + "fill": "$--foreground", + "content": "Project", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "FDbay", + "name": "propStatus", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "e426F", + "name": "propStatusLbl", + "fill": "$--muted-foreground", + "content": "STATUS", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "o2rZM", + "name": "propStatusBadge", + "fill": "$--accent-green-light", + "cornerRadius": 16, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "transparent" + }, + "gap": 8, + "padding": [ + 1, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "QM7L3", + "name": "Badge Text", + "fill": "$--accent-green", + "content": "ACTIVE", + "lineHeight": 1.33, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1.2 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "NmRLv", + "name": "Relationships Section", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "WFVAr", + "name": "relGroup1", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "0N729", + "name": "relGrp1Title", + "fill": "$--muted-foreground", + "content": "BELONGS TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "zLl8F", + "name": "relLaputaBtn", + "width": "fill_container", + "fill": "$--accent-green-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kw9vC", + "name": "laputaTxt", + "fill": "$--accent-green", + "content": "Laputa", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "RFvoz", + "name": "topicIcon", + "opacity": 0.5, + "width": 14, + "height": 14, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "fill": "$--accent-green" + } + ] + }, + { + "type": "frame", + "id": "ybi8Q", + "name": "relLaputaBtn", + "width": "fill_container", + "fill": "$--accent-green-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VNcmt", + "name": "laputaTxt", + "fill": "$--accent-green", + "content": "Building", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "UVPwc", + "name": "topicIcon", + "opacity": 0.5, + "width": 14, + "height": 14, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "fill": "$--accent-green" + } + ] + }, + { + "type": "frame", + "id": "L6knW", + "name": "linkExisting", + "width": "fill_container", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "jwU3Z", + "name": "laputaTxt", + "fill": "$--muted-foreground", + "content": "+ Link existing", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "laPFL", + "name": "relGroup2", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "LOXUL", + "name": "relGrp2Title", + "fill": "$--muted-foreground", + "content": "RELATED TO", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "qLTYD", + "name": "relMigrationBtn", + "width": "fill_container", + "fill": "$--accent-red-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "GBk2u", + "name": "migrationTxt", + "fill": "$--accent-red", + "content": "Shadcn Migration", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "Sy14T", + "name": "expIcon", + "opacity": 0.5, + "width": 14, + "height": 14, + "iconFontName": "flask", + "iconFontFamily": "phosphor", + "fill": "$--accent-red" + } + ] + }, + { + "type": "frame", + "id": "u8ijV", + "name": "linkExisting", + "width": "fill_container", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 6, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "PUXx5", + "name": "laputaTxt", + "fill": "$--muted-foreground", + "content": "+ Link existing", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "6PUnO", + "name": "Backlinks Section", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "id": "PllIu", + "name": "blTitle", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ZbgbI", + "name": "blTitleTxt", + "rotation": -0.5285936385085725, + "fill": "$--muted-foreground", + "content": "BACKLINKS", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + } + ] + }, + { + "type": "text", + "id": "eRoDO", + "name": "blItem1", + "fill": "$--primary", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "u1olR", + "name": "blItem2", + "fill": "$--primary", + "content": "Meeting with Grant", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "oUd9s", + "name": "blItem3", + "fill": "$--primary", + "content": "Q1 Planning", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "yf0wj", + "name": "History Section", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "dG7rj", + "name": "histTitle", + "fill": "$--muted-foreground", + "content": "HISTORY", + "fontFamily": "IBM Plex Mono", + "fontSize": 10 + }, + { + "type": "frame", + "id": "z2Mdy", + "name": "histItem1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "left": 2 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 0, + 0, + 0, + 10 + ], + "children": [ + { + "type": "text", + "id": "AsiWz", + "name": "histItem1Hash", + "fill": "$--accent-blue", + "content": "a089f44 · feat: migrate to shadcn/ui", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "BdVhi", + "name": "histItem1Date", + "fill": "$--muted-foreground", + "content": "Feb 16, 2026", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "piJNC", + "name": "histItem2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "left": 2 + }, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 0, + 0, + 0, + 10 + ], + "children": [ + { + "type": "text", + "id": "0PWoX", + "name": "histItem2Hash", + "fill": "$--accent-blue", + "content": "5a4b4ac · feat: emoji favicon", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "xySNW", + "name": "histItem2Date", + "fill": "$--muted-foreground", + "content": "Feb 15, 2026", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "x1AHT", + "name": "lightStatusBar", + "width": "fill_container", + "height": 30, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 8 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "e2UzJ", + "name": "Status Left", + "height": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mlD58", + "name": "versionIcon", + "width": 14, + "height": 14, + "iconFontName": "box", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "hRBRa", + "name": "versionText", + "fill": "$--muted-foreground", + "content": "v0.4.2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500" + }, + { + "type": "text", + "id": "bFwrw", + "name": "sep1", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "ey3Gr", + "name": "branchIcon", + "width": 14, + "height": 14, + "iconFontName": "git-branch", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "Kz0sS", + "name": "branchText", + "fill": "$--muted-foreground", + "content": "main", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "6IY1E", + "name": "sep2", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "IjEG1", + "name": "syncIcon", + "width": 13, + "height": 13, + "iconFontName": "refresh-cw", + "iconFontFamily": "lucide", + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "srxkr", + "name": "syncText", + "fill": "$--muted-foreground", + "content": "Synced 2m ago", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "4jgQF", + "name": "Status Right", + "height": "fill_container", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "3RPmA", + "name": "aiIcon", + "width": 13, + "height": 13, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "t0NOA", + "name": "aiText", + "fill": "$--muted-foreground", + "content": "Claude Sonnet 4", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "16V7i", + "name": "sep3", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "PXVrd", + "name": "notesCount", + "width": 13, + "height": 13, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "2FxCi", + "name": "notesText", + "fill": "$--muted-foreground", + "content": "1,247 notes", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "pB6ds", + "name": "sep4", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "fRHKs", + "name": "bellIcon", + "width": 13, + "height": 13, + "iconFontName": "bell", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "2sEBS", + "name": "settingsIcon", + "width": 13, + "height": 13, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "mOf4J", + "x": 0, + "y": 4457, + "name": "Color Palette — shadcn/ui Theme (Light)", + "theme": { + "Mode": "Light" + }, + "width": 1440, + "fill": "$--background", + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "text", + "id": "rmJdn", + "name": "cTitle", + "fill": "$--foreground", + "content": "Color Palette — shadcn/ui Theme Variables (Light)", + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "700", + "letterSpacing": -0.5 + }, + { + "type": "text", + "id": "V79Zu", + "name": "cSub", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "All colors from src/index.css. Variables support light/dark mode via .dark class.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Xbdzq", + "name": "primLbl", + "fill": "$--foreground", + "content": "Primary Colors", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "NyoC7", + "name": "primRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "Inb1x", + "name": "sw1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "HRsVC", + "name": "sw1b", + "fill": "$--background", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "jV89s", + "name": "sw1n", + "fill": "$--foreground", + "content": "--background", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "qOUUY", + "name": "sw1v", + "fill": "$--muted-foreground", + "content": "L: #FFFFFF / D: #0f0f1a", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "QytAQ", + "name": "sw2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "TMuHH", + "name": "sw2b", + "fill": "$--foreground", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "k9qK4", + "name": "sw2n", + "fill": "$--foreground", + "content": "--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "BfEn7", + "name": "sw2v", + "fill": "$--muted-foreground", + "content": "L: #37352F / D: #e0e0e0", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "gJZtB", + "name": "sw3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "RRsQg", + "name": "sw3b", + "fill": "$--primary", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "CtJe4", + "name": "sw3n", + "fill": "$--foreground", + "content": "--primary", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "1iFr6", + "name": "sw3v", + "fill": "$--muted-foreground", + "content": "#155DFF", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "mbvua", + "name": "sw4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "fajNZ", + "name": "sw4b", + "fill": "$--primary-foreground", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "wVJ7z", + "name": "sw4n", + "fill": "$--foreground", + "content": "--primary-foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "Oum5Q", + "name": "sw4v", + "fill": "$--muted-foreground", + "content": "L: #FFFFFF / D: #ffffff", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "UvI4d", + "name": "accLbl", + "fill": "$--foreground", + "content": "Accent & Semantic Colors", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "jOmo7", + "name": "accRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "uFXJ3", + "name": "a1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "NRr0w", + "name": "a1b", + "fill": "$--accent-blue", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "ECVqk", + "name": "a1n", + "fill": "$--foreground", + "content": "--accent-blue", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "csKEt", + "name": "a2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "5IiT2", + "name": "a2b", + "fill": "$--accent-green", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "aCPba", + "name": "a2n", + "fill": "$--foreground", + "content": "--accent-green", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "XbY7C", + "name": "a3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "I9qCz", + "name": "a3b", + "fill": "$--accent-yellow", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "DfZVh", + "name": "a3n", + "fill": "$--foreground", + "content": "--accent-yellow", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "nROw3", + "name": "a4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "IcIoP", + "name": "a4b", + "fill": "$--accent-red", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "eGgz6", + "name": "a4n", + "fill": "$--foreground", + "content": "--destructive", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "J95fv", + "name": "a5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "o03fQ", + "name": "a5b", + "fill": "$--accent-purple", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "H9VWy", + "name": "a5n", + "fill": "$--foreground", + "content": "--accent-purple", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "text", + "id": "GcYle", + "name": "lightLightLbl", + "fill": "$--foreground", + "content": "Accent Light Backgrounds", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Ju2xp", + "name": "accLightRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "5dnn5", + "name": "al1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "7kcqW", + "name": "ll1b", + "fill": "$--accent-blue-light", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "dBCbF", + "name": "ll1n", + "fill": "$--foreground", + "content": "--accent-blue-light", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "W0t0j", + "name": "al2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "1vepp", + "name": "ll2b", + "fill": "$--accent-green-light", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "6kUyf", + "name": "ll2n", + "fill": "$--foreground", + "content": "--accent-green-light", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "zyV1j", + "name": "al3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "yUDBN", + "name": "ll3b", + "fill": "$--accent-yellow-light", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "dmfZ4", + "name": "ll3n", + "fill": "$--foreground", + "content": "--accent-yellow-light", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "yGmmo", + "name": "al4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "eLu8o", + "name": "ll4b", + "fill": "$--accent-red-light", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "PVLwR", + "name": "ll4n", + "fill": "$--foreground", + "content": "--accent-red-light", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "0BO2b", + "name": "al5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "6FBws", + "name": "ll5b", + "fill": "$--accent-purple-light", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "i2DfV", + "name": "ll5n", + "fill": "$--foreground", + "content": "--accent-purple-light", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "text", + "id": "JFocf", + "name": "surfLbl", + "fill": "$--foreground", + "content": "Surface & Border Colors", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "YAJLW", + "name": "surfRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "JHS3j", + "name": "s1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "9Bj41", + "name": "s1b", + "fill": "$--card", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "wn4ua", + "name": "s1n", + "fill": "$--foreground", + "content": "--card", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Fyvfd", + "name": "s2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "UFLw5", + "name": "s2b", + "fill": "$--sidebar", + "width": "fill_container", + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--sidebar-border" + } + }, + { + "type": "text", + "id": "gngfL", + "name": "s2n", + "fill": "$--foreground", + "content": "--sidebar", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "zbyEJ", + "name": "s3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "WnmQD", + "name": "s3b", + "fill": "$--secondary", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "wnkxR", + "name": "s3n", + "fill": "$--foreground", + "content": "--secondary", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Z2FuK", + "name": "s4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "lNPnc", + "name": "s4b", + "fill": "$--border", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "x9aeh", + "name": "s4n", + "fill": "$--foreground", + "content": "--border / --input", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "TDDQ0", + "name": "s5", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "MwHOe", + "name": "s5b", + "fill": "$--muted-foreground", + "width": "fill_container", + "height": 60 + }, + { + "type": "text", + "id": "dHZj5", + "name": "s5n", + "fill": "$--foreground", + "content": "--muted-foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "HZonq", + "x": 0, + "y": 5252, + "name": "Typography & Spacing Specs (Light)", + "theme": { + "Mode": "Light" + }, + "width": 1440, + "fill": "$--background", + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "text", + "id": "nGLlU", + "name": "tTitle", + "fill": "$--foreground", + "content": "Typography Scale (Light)", + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "700", + "letterSpacing": -0.5 + }, + { + "type": "text", + "id": "gkQqO", + "name": "tSub", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Fonts: Inter, IBM Plex Mono. Base: 14px. System fallback: -apple-system, BlinkMacSystemFont, sans-serif.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "QL9fK", + "name": "t1", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "px1l7", + "name": "t1s", + "fill": "$--foreground", + "content": "Heading 1", + "lineHeight": 1.2, + "fontFamily": "Inter", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "id": "3UWKu", + "name": "t1d", + "fill": "$--muted-foreground", + "content": "32px / Bold / lh 1.2 — Editor H1", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Yjhit", + "name": "t2", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iFzl0", + "name": "t2s", + "fill": "$--foreground", + "content": "Heading 2", + "lineHeight": 1.3, + "fontFamily": "Inter", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "id": "cF55I", + "name": "t2d", + "fill": "$--muted-foreground", + "content": "24px / Semibold / lh 1.3 — Editor H2", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "bBHMa", + "name": "t3", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "kpSyr", + "name": "t3s", + "fill": "$--foreground", + "content": "App Title", + "fontFamily": "Inter", + "fontSize": 17, + "fontWeight": "700", + "letterSpacing": -0.3 + }, + { + "type": "text", + "id": "xUuNz", + "name": "t3d", + "fill": "$--muted-foreground", + "content": "17px / Bold / ls -0.3 — Sidebar header", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Lsh7F", + "name": "t4", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vTRSs", + "name": "t4s", + "fill": "$--foreground", + "content": "Body Text", + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "fKa3p", + "name": "t4d", + "fill": "$--muted-foreground", + "content": "16px / Regular / lh 1.6 — Editor paragraphs", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "rpOTz", + "name": "t5", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "VXY3Z", + "name": "t5s", + "fill": "$--foreground", + "content": "UI Label / Button", + "lineHeight": 1.43, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "F6GQz", + "name": "t5d", + "fill": "$--muted-foreground", + "content": "14px / Medium / lh 1.43 — Buttons, NoteList header, Inspector labels", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "H6Rgt", + "name": "t6", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "xWvbj", + "name": "t6s", + "fill": "$--foreground", + "content": "Sidebar Item", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "bvBBm", + "name": "t6d", + "fill": "$--muted-foreground", + "content": "13px / Medium — Sidebar nav items, filter items, search", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "GrFAq", + "name": "t7", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vY8j4", + "name": "t7s", + "fill": "$--muted-foreground", + "content": "SECTION HEADER", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 0.5 + }, + { + "type": "text", + "id": "okws6", + "name": "t7d", + "fill": "$--muted-foreground", + "content": "11px / Semibold / ls 0.5 — Sidebar sections, type pills", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "awxls", + "name": "t8", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mD3f5", + "name": "t8s", + "fill": "$--foreground", + "content": "ALL-CAPS LABEL", + "fontFamily": "IBM Plex Mono", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1.2 + }, + { + "type": "text", + "id": "jFpLw", + "name": "t8d", + "fill": "$--muted-foreground", + "content": "11px / Semibold / ls 1.2 / IBM Plex Mono — Section labels, metadata tags", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ToLzL", + "name": "t9", + "width": "fill_container", + "gap": 24, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LEsxW", + "name": "t9s", + "fill": "$--muted-foreground", + "content": "OVERLINE TEXT", + "fontFamily": "IBM Plex Mono", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1.5 + }, + { + "type": "text", + "id": "HQ3Df", + "name": "t9d", + "fill": "$--muted-foreground", + "content": "10px / Medium / ls 1.5 / IBM Plex Mono — Overlines, category labels, timestamps", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "3tiJ7", + "name": "div1", + "fill": "$--border", + "width": "fill_container", + "height": 1 + }, + { + "type": "text", + "id": "b2Mt9", + "name": "spTitle", + "fill": "$--foreground", + "content": "Spacing & Layout Reference", + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "700", + "letterSpacing": -0.5 + }, + { + "type": "frame", + "id": "o6ETJ", + "name": "pnlRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "HhbOn", + "name": "p1", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "children": [ + { + "type": "text", + "id": "YBekR", + "name": "p1t", + "fill": "$--foreground", + "content": "Sidebar: 250px", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "dT8Xe", + "name": "p1d", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "bg: --sidebar | padding: 8px container, 12px 16px header, 6px 16px items", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "aYkMZ", + "name": "p2", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "children": [ + { + "type": "text", + "id": "Eycne", + "name": "p2t", + "fill": "$--foreground", + "content": "NoteList: 300px", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "lyTZN", + "name": "p2d", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "bg: --card | padding: 14px 16px header, 8px 12px search/pills, 10px 16px items", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "E6G3g", + "name": "p3", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "children": [ + { + "type": "text", + "id": "Xy5Gl", + "name": "p3t", + "fill": "$--foreground", + "content": "Editor: flexible", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "y4svr", + "name": "p3d", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "bg: --background | padding: 32px 64px content, 7px 14px tabs, gap: 16px", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "RBPav", + "name": "p4", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 6, + "padding": 16, + "children": [ + { + "type": "text", + "id": "xKUWC", + "name": "p4t", + "fill": "$--foreground", + "content": "Inspector: 280px", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "u81W5", + "name": "p4d", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "bg: --sidebar | padding: 14px 12px header, 12px body, 16px section gap, 8px prop gap", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "VvZyF", + "name": "radLbl", + "fill": "$--foreground", + "content": "Border Radius", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "OwJH7", + "name": "radRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "DHrzV", + "name": "r1", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "cornerRadius": 4, + "id": "V35oi", + "name": "r1b", + "fill": "$--secondary", + "width": 80, + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "HVQpq", + "name": "r1n", + "fill": "$--foreground", + "content": "4px (sm) — chips", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "wp350", + "name": "r2", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "cornerRadius": 6, + "id": "E031z", + "name": "r2b", + "fill": "$--secondary", + "width": 80, + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "rDLff", + "name": "r2n", + "fill": "$--foreground", + "content": "6px (md) — buttons, inputs", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "d6tJt", + "name": "r3", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "cornerRadius": 8, + "id": "PNkS4", + "name": "r3b", + "fill": "$--secondary", + "width": 80, + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "rZGXb", + "name": "r3n", + "fill": "$--foreground", + "content": "8px (lg) — cards, dialogs", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "UAZ8u", + "name": "r4", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "cornerRadius": 16, + "id": "wgMVG", + "name": "r4b", + "fill": "$--secondary", + "width": 80, + "height": 60, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + } + }, + { + "type": "text", + "id": "zw3RY", + "name": "r4n", + "fill": "$--foreground", + "content": "16px — badges", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "kIrXE", + "name": "div2", + "fill": "$--border", + "width": "fill_container", + "height": 1 + }, + { + "type": "text", + "id": "FYw8k", + "name": "compTitle", + "fill": "$--foreground", + "content": "shadcn/ui Component Inventory", + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "700", + "letterSpacing": -0.5 + }, + { + "type": "frame", + "id": "7Q1Fi", + "name": "compRow", + "width": "fill_container", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "XfUwj", + "name": "cg1", + "width": "fill_container", + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "text", + "id": "ly7m0", + "name": "cg1t", + "fill": "$--accent-green", + "content": "In Use", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "Re89a", + "name": "cg1r1", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Button — 5 variants (Default, Secondary, Outline, Ghost, Destructive)", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ILbjW", + "name": "cg1r2", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Input — Default text input with label group", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "eurqS", + "name": "cg1r3", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Dialog — Modal overlay (CreateNote, Commit)", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "AZyZP", + "name": "cg1r4", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Badge — 4 variants (Default, Secondary, Outline, Destructive)", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "WtehQ", + "name": "cg2", + "width": "fill_container", + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "text", + "id": "KaMZ9", + "name": "cg2t", + "fill": "$--accent-yellow", + "content": "Available (Not Yet Used)", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "F8wam", + "name": "cg2r1", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "DropdownMenu — Context / dropdown menus", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Nl1aV", + "name": "cg2r2", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Tabs — Tab navigation component", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "0sBwH", + "name": "cg2r3", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Tooltip, Select, Card, Separator, ScrollArea", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "trSB1", + "x": 1600, + "y": 3385, + "name": "Trash — Sidebar Filter", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 260, + "height": 400, + "fill": "$--sidebar", + "layout": "vertical", + "gap": 0, + "padding": [ + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "trFAll", + "name": "filterAll", + "width": "fill_container", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "trIAll", + "name": "iconAll", + "width": 16, + "height": 16, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "trTAll", + "name": "txtAll", + "fill": "$--foreground", + "content": "All Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "trFFav", + "name": "filterFav", + "width": "fill_container", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "trIFav", + "name": "iconFav", + "width": 16, + "height": 16, + "iconFontName": "star", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "trTFav", + "name": "txtFav", + "fill": "$--foreground", + "content": "Favorites", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "trFArc", + "name": "filterArchive", + "width": "fill_container", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "trIArc", + "name": "iconArchive", + "width": 16, + "height": 16, + "iconFontName": "archive", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "trTArc", + "name": "txtArchive", + "fill": "$--foreground", + "content": "Archive", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "trBArc", + "name": "badgeArc", + "height": 20, + "fill": "$--muted", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trBTArc", + "fill": "$--muted-foreground", + "content": "2", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "trFTr", + "name": "filterTrash", + "width": "fill_container", + "fill": "#ef444418", + "cornerRadius": 6, + "gap": 8, + "padding": [ + 6, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "trITr", + "name": "iconTrash", + "width": 16, + "height": 16, + "iconFontName": "trash", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--destructive" + }, + { + "type": "text", + "id": "trTTr", + "name": "txtTrash", + "fill": "$--destructive", + "content": "Trash", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "trBTr", + "name": "badgeTrash", + "height": 20, + "fill": "$--destructive", + "cornerRadius": 9999, + "padding": [ + 0, + 6 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trBTTr", + "fill": "#ffffff", + "content": "3", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "trNL1", + "x": 1600, + "y": 3815, + "name": "Trash — Note List View", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 340, + "height": 360, + "fill": "$--card", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "trNLH", + "name": "header", + "width": "fill_container", + "height": 45, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "justifyContent": "space_between", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "trNLT", + "fill": "$--foreground", + "content": "Trash", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "trN1", + "name": "trashedNote1", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 14, + 16 + ], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "frame", + "id": "trN1H", + "name": "titleRow", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trN1T", + "fill": "$--foreground", + "content": "Old Draft Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "trN1B", + "name": "trashedBadge", + "height": 16, + "fill": "#ef444418", + "cornerRadius": 4, + "padding": [ + 1, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trN1BT", + "fill": "$--destructive", + "content": "TRASHED", + "fontFamily": "Inter", + "fontSize": 9, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "text", + "id": "trN1S", + "fill": "$--muted-foreground", + "content": "Some draft content that is no longer needed...", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "400" + }, + { + "type": "text", + "id": "trN1D", + "fill": "$--muted-foreground", + "content": "5d ago", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "400" + } + ] + }, + { + "type": "frame", + "id": "trN2", + "name": "trashedNote2Warning", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 14, + 16 + ], + "fill": "#ef44440a", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "frame", + "id": "trN2H", + "name": "titleRow", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trN2T", + "fill": "$--foreground", + "content": "Deprecated API Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "trN2B", + "name": "warningBadge", + "height": 16, + "fill": "$--destructive", + "cornerRadius": 4, + "padding": [ + 1, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trN2BT", + "fill": "#ffffff", + "content": "30+ DAYS", + "fontFamily": "Inter", + "fontSize": 9, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "text", + "id": "trN2S", + "fill": "$--muted-foreground", + "content": "Old API documentation that was replaced...", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "400" + }, + { + "type": "text", + "id": "trN2D", + "fill": "$--destructive", + "content": "Trashed 35d ago — will be permanently deleted", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "trRI1", + "x": 1970, + "y": 3385, + "name": "Trash — Relationship Indicator", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 300, + "height": 200, + "fill": "$--background", + "layout": "vertical", + "gap": 8, + "padding": [ + 16, + 16 + ], + "children": [ + { + "type": "text", + "id": "trRIL", + "fill": "$--muted-foreground", + "content": "BELONGS TO", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 0.5 + }, + { + "type": "frame", + "id": "trRN", + "name": "normalRef", + "width": "fill_container", + "fill": "$--accent-blue-light", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "gap": 6, + "alignItems": "center", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "trRNT", + "fill": "$--accent-blue", + "content": "Build Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "trRNI", + "width": 14, + "height": 14, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-blue" + } + ] + }, + { + "type": "frame", + "id": "trRT", + "name": "trashedRef", + "width": "fill_container", + "fill": "$--muted", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "gap": 6, + "alignItems": "center", + "justifyContent": "space_between", + "opacity": 0.7, + "children": [ + { + "type": "frame", + "id": "trRTL", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "trRTTI", + "width": 12, + "height": 12, + "iconFontName": "trash", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "trRTT", + "fill": "$--muted-foreground", + "content": "Old Draft Notes", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "trRTTX", + "fill": "$--muted-foreground", + "content": "(trashed)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "400" + } + ] + }, + { + "type": "icon_font", + "id": "trRTI", + "width": 14, + "height": 14, + "iconFontName": "file-text", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "trRA", + "name": "archivedRef", + "width": "fill_container", + "fill": "$--muted", + "cornerRadius": 6, + "padding": [ + 6, + 10 + ], + "gap": 6, + "alignItems": "center", + "justifyContent": "space_between", + "opacity": 0.7, + "children": [ + { + "type": "frame", + "id": "trRAL", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "trRAT", + "fill": "$--muted-foreground", + "content": "Website Redesign", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "trRATX", + "fill": "$--muted-foreground", + "content": "(archived)", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "400" + } + ] + }, + { + "type": "icon_font", + "id": "trRAI", + "width": 14, + "height": 14, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "trW30", + "x": 1970, + "y": 3615, + "name": "Trash — 30-Day Auto-Delete Warning", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 340, + "height": 120, + "fill": "$--background", + "layout": "vertical", + "gap": 8, + "padding": [ + 16, + 16 + ], + "children": [ + { + "type": "text", + "id": "trW3L", + "fill": "$--muted-foreground", + "content": "Warning banner shown at top of trash view:", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "trW3B", + "name": "warningBanner", + "width": "fill_container", + "fill": "#ef44440f", + "cornerRadius": 8, + "padding": [ + 10, + 12 + ], + "gap": 8, + "alignItems": "center", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#ef444430" + }, + "children": [ + { + "type": "icon_font", + "id": "trW3I", + "width": 16, + "height": 16, + "iconFontName": "warning", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--destructive" + }, + { + "type": "frame", + "id": "trW3T", + "layout": "vertical", + "gap": 2, + "children": [ + { + "type": "text", + "id": "trW3T1", + "fill": "$--destructive", + "content": "Notes in trash for 30+ days will be permanently deleted", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + }, + { + "type": "text", + "id": "trW3T2", + "fill": "$--muted-foreground", + "content": "1 note is past the 30-day retention period", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "400" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dt0", + "name": "Draggable Tabs — Default State", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dt1", + "name": "frameLabel", + "content": "Default: tabs are draggable (grab cursor on hover)", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "dt2", + "name": "Tab Bar Default", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dt3", + "name": "Tab Active", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt4", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "dt5", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt6", + "name": "Tab Inactive", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt7", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dt8", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt9", + "name": "Tab Inactive 2", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dta", + "fill": "$--muted-foreground", + "content": "Weekly Review", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dtb", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dtc", + "name": "Tab Inactive 3", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dtd", + "fill": "$--muted-foreground", + "content": "Workout Log", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dte", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dtf", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "dtg", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dth", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "dti", + "name": "cursorNote", + "content": "cursor: grab → grabbing during drag", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "dtj", + "name": "Draggable Tabs — Dragging (Tab Being Moved)", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dtk", + "name": "frameLabel2", + "content": "Dragging: \"Portfolio Rewrite\" is being dragged left (opacity 0.5, blue drop indicator)", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "dtl", + "name": "Tab Bar Dragging", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "rectangle", + "id": "dtm", + "name": "Drop Indicator", + "width": 2, + "height": 30, + "fill": "$--primary", + "cornerRadius": 1 + }, + { + "type": "frame", + "id": "dtn", + "name": "Tab Active", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dto", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "dtp", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dtq", + "name": "Tab Dragging (ghost)", + "height": "fill_container", + "opacity": 0.5, + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dtr", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dts", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dtt", + "name": "Tab Inactive 2", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dtu", + "fill": "$--muted-foreground", + "content": "Weekly Review", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "dtv", + "name": "Tab Inactive 3", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dtw", + "fill": "$--muted-foreground", + "content": "Workout Log", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "dtx", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "dty", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dtz", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "dt10", + "name": "dragNote", + "content": "Drop indicator: 2px $--primary bar shows insertion point. Dragged tab has opacity: 0.5.", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "dt11", + "name": "Draggable Tabs — After Drop (Reordered)", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dt12", + "name": "frameLabel3", + "content": "After drop: \"Portfolio Rewrite\" moved before \"Laputa App\". Order persisted to localStorage.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "dt13", + "name": "Tab Bar Reordered", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dt14", + "name": "Tab Inactive (moved)", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt15", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dt16", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt17", + "name": "Tab Active", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt18", + "fill": "$--foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "dt19", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt1a", + "name": "Tab Inactive 2", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt1b", + "fill": "$--muted-foreground", + "content": "Weekly Review", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dt1c", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt1d", + "name": "Tab Inactive 3", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dt1e", + "fill": "$--muted-foreground", + "content": "Workout Log", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "dt1f", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dt1g", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "dt1h", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dt1i", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "dt1j", + "name": "persistNote", + "content": "localStorage key: \"laputa-tab-order\" stores path array. Restored on next session.", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "dsg01a", + "name": "Sidebar — Drag Handles Visible", + "x": 68, + "y": 6400, + "width": 330, + "height": 680, + "fill": "$--background", + "layout": "vertical", + "padding": [ + 16 + ], + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dsg01b", + "name": "frame1Title", + "content": "Drag handles appear on section headers", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600", + "fill": "$--foreground" + }, + { + "type": "text", + "id": "dsg01c", + "name": "frame1Desc", + "content": "Grip icon shown left of section icon. Cursor changes to grab on hover.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground" + }, + { + "type": "frame", + "id": "dsg01d", + "height": 12 + }, + { + "type": "frame", + "id": "dsg01e", + "name": "sidebarDefault", + "width": 250, + "height": 600, + "fill": "$--sidebar", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "dsg01f", + "name": "filters", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg01g", + "name": "allNotesRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg01h", + "width": 18, + "height": 18, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg01i", + "fill": "$--foreground", + "content": "All Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg01j", + "name": "favRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg01k", + "width": 18, + "height": 18, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg01l", + "fill": "$--muted-foreground", + "content": "Favorites", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg01m", + "name": "sectionsWrap", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "dsg00a", + "name": "projGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6, + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg005", + "name": "projHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg001", + "name": "projLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg000", + "name": "projDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg002", + "name": "projIcon", + "width": 18, + "height": 18, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "dsg003", + "name": "projLabel", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg004", + "name": "projChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dsg006", + "name": "projItem0", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "fill": "$--accent-red-light", + "children": [ + { + "type": "text", + "id": "dsg007", + "name": "projItemTxt0", + "fill": "$--accent-red", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg008", + "name": "projItem1", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dsg009", + "name": "projItemTxt1", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg00h", + "name": "respGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg00g", + "name": "respHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg00c", + "name": "respLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg00b", + "name": "respDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg00d", + "name": "respIcon", + "width": 18, + "height": 18, + "iconFontName": "medal", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg00e", + "name": "respLabel", + "fill": "$--foreground", + "content": "Responsibilities", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg00f", + "name": "respChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg00o", + "name": "procGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg00n", + "name": "procHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg00j", + "name": "procLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg00i", + "name": "procDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg00k", + "name": "procIcon", + "width": 18, + "height": 18, + "iconFontName": "arrows-clockwise", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg00l", + "name": "procLabel", + "fill": "$--foreground", + "content": "Procedures", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg00m", + "name": "procChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg00v", + "name": "peopleGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg00u", + "name": "peopleHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg00q", + "name": "peopleLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg00p", + "name": "peopleDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg00r", + "name": "peopleIcon", + "width": 18, + "height": 18, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg00s", + "name": "peopleLabel", + "fill": "$--foreground", + "content": "People", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg00t", + "name": "peopleChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg012", + "name": "eventsGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg011", + "name": "eventsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg00x", + "name": "eventsLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg00w", + "name": "eventsDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg00y", + "name": "eventsIcon", + "width": 18, + "height": 18, + "iconFontName": "cardholder", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg00z", + "name": "eventsLabel", + "fill": "$--foreground", + "content": "Events", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg010", + "name": "eventsChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg019", + "name": "topicsGroup", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg018", + "name": "topicsHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg014", + "name": "topicsLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg013", + "name": "topicsDrag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg015", + "name": "topicsIcon", + "width": 18, + "height": 18, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "dsg016", + "name": "topicsLabel", + "fill": "$--foreground", + "content": "Topics", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg017", + "name": "topicsChev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg02w", + "name": "Sidebar — Section Being Dragged", + "x": 420, + "y": 6400, + "width": 330, + "height": 680, + "fill": "$--background", + "layout": "vertical", + "padding": [ + 16 + ], + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dsg02x", + "name": "frame2Title", + "content": "Dragging \"People\" above \"Responsibilities\"", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600", + "fill": "$--foreground" + }, + { + "type": "text", + "id": "dsg02y", + "name": "frame2Desc", + "content": "Blue drop indicator line shows insertion point. Dragged section floats with blue border.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground" + }, + { + "type": "frame", + "id": "dsg02z", + "height": 12 + }, + { + "type": "frame", + "id": "dsg030", + "name": "sidebarDragging", + "width": 250, + "height": 600, + "fill": "$--sidebar", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "dsg031", + "name": "filters", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg032", + "name": "allNotesRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg033", + "width": 18, + "height": 18, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg034", + "fill": "$--foreground", + "content": "All Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg035", + "name": "favRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg036", + "width": 18, + "height": 18, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg037", + "fill": "$--muted-foreground", + "content": "Favorites", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg038", + "name": "sectionsWrap", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "dsg01x", + "name": "proj2Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6, + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg01s", + "name": "proj2Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg01o", + "name": "proj2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg01n", + "name": "proj2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg01p", + "name": "proj2Icon", + "width": 18, + "height": 18, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "dsg01q", + "name": "proj2Label", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg01r", + "name": "proj2Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dsg01t", + "name": "proj2Item0", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "fill": "$--accent-red-light", + "children": [ + { + "type": "text", + "id": "dsg01u", + "name": "proj2ItemTxt0", + "fill": "$--accent-red", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg01v", + "name": "proj2Item1", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dsg01w", + "name": "proj2ItemTxt1", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg01y", + "name": "dropIndicator", + "width": "fill_container", + "height": 2, + "fill": "$--accent-blue", + "cornerRadius": 1 + }, + { + "type": "frame", + "id": "dsg025", + "name": "resp2Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg024", + "name": "resp2Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg020", + "name": "resp2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg01z", + "name": "resp2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg021", + "name": "resp2Icon", + "width": 18, + "height": 18, + "iconFontName": "medal", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg022", + "name": "resp2Label", + "fill": "$--foreground", + "content": "Responsibilities", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg023", + "name": "resp2Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg02c", + "name": "proc2Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg02b", + "name": "proc2Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg027", + "name": "proc2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg026", + "name": "proc2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg028", + "name": "proc2Icon", + "width": 18, + "height": 18, + "iconFontName": "arrows-clockwise", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg029", + "name": "proc2Label", + "fill": "$--foreground", + "content": "Procedures", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg02a", + "name": "proc2Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg02j", + "name": "events2Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg02i", + "name": "events2Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg02e", + "name": "events2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg02d", + "name": "events2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg02f", + "name": "events2Icon", + "width": 18, + "height": 18, + "iconFontName": "cardholder", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg02g", + "name": "events2Label", + "fill": "$--foreground", + "content": "Events", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg02h", + "name": "events2Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg02q", + "name": "topics2Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg02p", + "name": "topics2Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg02l", + "name": "topics2Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg02k", + "name": "topics2Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg02m", + "name": "topics2Icon", + "width": 18, + "height": 18, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "dsg02n", + "name": "topics2Label", + "fill": "$--foreground", + "content": "Topics", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg02o", + "name": "topics2Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg02r", + "name": "draggedSection", + "x": 8, + "y": 160, + "width": 234, + "fill": "$--sidebar", + "cornerRadius": 6, + "stroke": { + "align": "outside", + "thickness": 1, + "fill": { + "type": "color", + "color": "$--accent-blue" + } + }, + "opacity": 0.9, + "layout": "vertical", + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg02s", + "name": "draggedHeader", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg02t", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--accent-blue", + "opacity": 0.8 + }, + { + "type": "icon_font", + "id": "dsg02u", + "width": 18, + "height": 18, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg02v", + "fill": "$--foreground", + "content": "People", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg04j", + "name": "Sidebar — After Reorder (People Moved Up)", + "x": 772, + "y": 6400, + "width": 330, + "height": 680, + "fill": "$--background", + "layout": "vertical", + "padding": [ + 16 + ], + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "dsg04k", + "name": "frame3Title", + "content": "After drop — People now second section", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600", + "fill": "$--foreground" + }, + { + "type": "text", + "id": "dsg04l", + "name": "frame3Desc", + "content": "Order persisted as \"order\" property in each Type document frontmatter (e.g. order: 2).", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground" + }, + { + "type": "frame", + "id": "dsg04m", + "height": 12 + }, + { + "type": "frame", + "id": "dsg04n", + "name": "sidebarReordered", + "width": 250, + "height": 600, + "fill": "$--sidebar", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "dsg04o", + "name": "filters", + "width": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg04p", + "name": "allNotesRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg04q", + "width": 18, + "height": 18, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg04r", + "fill": "$--foreground", + "content": "All Notes", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg04s", + "name": "favRow", + "width": "fill_container", + "cornerRadius": 4, + "padding": [ + 6, + 16 + ], + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg04t", + "width": 18, + "height": 18, + "iconFontName": "star", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "dsg04u", + "fill": "$--muted-foreground", + "content": "Favorites", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg04v", + "name": "sectionsWrap", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "dsg03j", + "name": "proj3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6, + 8, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg03e", + "name": "proj3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg03a", + "name": "proj3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg039", + "name": "proj3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg03b", + "name": "proj3Icon", + "width": 18, + "height": 18, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "dsg03c", + "name": "proj3Label", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg03d", + "name": "proj3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "dsg03f", + "name": "proj3Item0", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "fill": "$--accent-red-light", + "children": [ + { + "type": "text", + "id": "dsg03g", + "name": "proj3ItemTxt0", + "fill": "$--accent-red", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "dsg03h", + "name": "proj3Item1", + "width": "fill_container", + "cornerRadius": 6, + "padding": [ + 6, + 16, + 6, + 28 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dsg03i", + "name": "proj3ItemTxt1", + "fill": "$--muted-foreground", + "content": "Portfolio Rewrite", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg03q", + "name": "people3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg03p", + "name": "people3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg03l", + "name": "people3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg03k", + "name": "people3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg03m", + "name": "people3Icon", + "width": 18, + "height": 18, + "iconFontName": "leaf", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg03n", + "name": "people3Label", + "fill": "$--foreground", + "content": "People", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg03o", + "name": "people3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg03x", + "name": "resp3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg03w", + "name": "resp3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg03s", + "name": "resp3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg03r", + "name": "resp3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg03t", + "name": "resp3Icon", + "width": 18, + "height": 18, + "iconFontName": "medal", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg03u", + "name": "resp3Label", + "fill": "$--foreground", + "content": "Responsibilities", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg03v", + "name": "resp3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg044", + "name": "proc3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg043", + "name": "proc3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg03z", + "name": "proc3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg03y", + "name": "proc3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg040", + "name": "proc3Icon", + "width": 18, + "height": 18, + "iconFontName": "arrows-clockwise", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-purple" + }, + { + "type": "text", + "id": "dsg041", + "name": "proc3Label", + "fill": "$--foreground", + "content": "Procedures", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg042", + "name": "proc3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg04b", + "name": "events3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg04a", + "name": "events3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg046", + "name": "events3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg045", + "name": "events3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg047", + "name": "events3Icon", + "width": 18, + "height": 18, + "iconFontName": "cardholder", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-yellow" + }, + { + "type": "text", + "id": "dsg048", + "name": "events3Label", + "fill": "$--foreground", + "content": "Events", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg049", + "name": "events3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dsg04i", + "name": "topics3Group", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": { + "type": "color", + "color": "$--border", + "enabled": false + } + }, + "layout": "vertical", + "gap": 2, + "padding": [ + 4, + 6 + ], + "children": [ + { + "type": "frame", + "id": "dsg04h", + "name": "topics3Header", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dsg04d", + "name": "topics3Left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "dsg04c", + "name": "topics3Drag", + "width": 14, + "height": 14, + "iconFontName": "grip-vertical", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground", + "opacity": 0.5 + }, + { + "type": "icon_font", + "id": "dsg04e", + "name": "topics3Icon", + "width": 18, + "height": 18, + "iconFontName": "tag", + "iconFontFamily": "phosphor", + "weight": 700, + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "dsg04f", + "name": "topics3Label", + "fill": "$--foreground", + "content": "Topics", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "dsg04g", + "name": "topics3Chev", + "width": 14, + "height": 14, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "csB01", + "x": 0, + "y": 7140, + "name": "Sections Header — Before (old design)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 280, + "height": 120, + "fill": "$--sidebar", + "layout": "vertical", + "gap": 8, + "padding": [ + 16, + 12 + ], + "children": [ + { + "type": "text", + "id": "csB02", + "name": "frameLabel", + "fill": "$--muted-foreground", + "content": "BEFORE — Old Design", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "csB03", + "name": "customizeBtn", + "width": "fill_container", + "cornerRadius": 4, + "gap": 6, + "padding": [ + 4, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "csB04", + "name": "slidersIcon", + "width": 14, + "height": 14, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "csB05", + "name": "customizeLabel", + "fill": "$--muted-foreground", + "content": "Customize sections", + "fontFamily": "Inter", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "csB06", + "name": "sectionRow", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "csB07", + "name": "left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "csB08", + "name": "projIcon", + "width": 16, + "height": 16, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "csB09", + "name": "projLabel", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "csB10", + "name": "chevron", + "width": 12, + "height": 12, + "iconFontName": "caret-right", + "iconFontFamily": "phosphor", + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "csA01", + "x": 340, + "y": 7140, + "name": "Sections Header — After (new design)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 280, + "height": 120, + "fill": "$--sidebar", + "layout": "vertical", + "gap": 8, + "padding": [ + 16, + 12 + ], + "children": [ + { + "type": "text", + "id": "csA02", + "name": "frameLabel", + "fill": "$--muted-foreground", + "content": "AFTER — New Design", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "csA03", + "name": "sectionsHeader", + "width": "fill_container", + "padding": [ + 4, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "csA04", + "name": "sectionsLabel", + "fill": "$--muted-foreground", + "content": "SECTIONS", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1.2 + }, + { + "type": "icon_font", + "id": "csA05", + "name": "settingsIcon", + "width": 14, + "height": 14, + "iconFontName": "sliders-horizontal", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "csA06", + "name": "sectionRow", + "width": "fill_container", + "cornerRadius": 4, + "gap": 8, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "csA07", + "name": "left", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "csA08", + "name": "projIcon", + "width": 16, + "height": 16, + "iconFontName": "wrench", + "iconFontFamily": "phosphor", + "fill": "$--accent-red" + }, + { + "type": "text", + "id": "csA09", + "name": "projLabel", + "fill": "$--foreground", + "content": "Projects", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "icon_font", + "id": "csA10", + "name": "chevron", + "width": 12, + "height": 12, + "iconFontName": "caret-right", + "iconFontFamily": "phosphor", + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "archBtnNorm", + "x": 68, + "y": 5200, + "name": "Archive Notes — Breadcrumb button (normal note)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 800, + "height": 45, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "anInfoL", + "name": "infoLeft", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "anType", + "name": "breadcrumbType", + "fill": "$--muted-foreground", + "content": "Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "anSep", + "name": "breadcrumbSep", + "fill": "$--muted-foreground", + "content": "›", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "anName", + "name": "breadcrumbName", + "fill": "$--foreground", + "content": "My Active Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "anDot", + "name": "dotSep", + "fill": "$--muted-foreground", + "content": "·", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "anWords", + "name": "wordCount", + "fill": "$--muted-foreground", + "content": "1,234 words", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "anInfoR", + "name": "infoRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "anISearch", + "width": 16, + "height": 16, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "anIGit", + "width": 16, + "height": 16, + "iconFontName": "git-branch", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "anICursor", + "width": 16, + "height": 16, + "iconFontName": "cursor-text", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "anIAI", + "width": 16, + "height": 16, + "iconFontName": "sparkle", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "frame", + "id": "anArchiveBtn", + "name": "archiveButton", + "gap": 4, + "alignItems": "center", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--primary" + }, + "cornerRadius": 4, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "icon_font", + "id": "anIArchive", + "width": 16, + "height": 16, + "iconFontName": "archive", + "iconFontFamily": "phosphor", + "fill": "$--primary" + } + ] + }, + { + "type": "icon_font", + "id": "anITrash", + "width": 16, + "height": 16, + "iconFontName": "trash", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "anIMore", + "width": 16, + "height": 16, + "iconFontName": "dots-three", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "archBtnArc", + "x": 68, + "y": 5300, + "name": "Archive Notes — Breadcrumb button (archived note, shows Unarchive)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 800, + "height": 45, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 6, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "auInfoL", + "name": "infoLeft", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "auType", + "name": "breadcrumbType", + "fill": "$--muted-foreground", + "content": "Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "auSep", + "name": "breadcrumbSep", + "fill": "$--muted-foreground", + "content": "›", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "auName", + "name": "breadcrumbName", + "fill": "$--foreground", + "content": "My Archived Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "text", + "id": "auDot", + "name": "dotSep", + "fill": "$--muted-foreground", + "content": "·", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "auWords", + "name": "wordCount", + "fill": "$--muted-foreground", + "content": "567 words", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "auBadge", + "name": "archivedBadge", + "height": 16, + "fill": "#2563eb1a", + "cornerRadius": 4, + "padding": [ + 1, + 4 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "auBadgeTxt", + "fill": "$--primary", + "content": "ARCHIVED", + "fontFamily": "Inter", + "fontSize": 9, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "auInfoR", + "name": "infoRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "auISearch", + "width": 16, + "height": 16, + "iconFontName": "magnifying-glass", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "auIGit", + "width": 16, + "height": 16, + "iconFontName": "git-branch", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "auICursor", + "width": 16, + "height": 16, + "iconFontName": "cursor-text", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "auIAI", + "width": 16, + "height": 16, + "iconFontName": "sparkle", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "frame", + "id": "auUnarchiveBtn", + "name": "unarchiveButton", + "gap": 4, + "alignItems": "center", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--primary" + }, + "cornerRadius": 4, + "padding": [ + 2, + 2 + ], + "children": [ + { + "type": "icon_font", + "id": "auIUnarchive", + "width": 16, + "height": 16, + "iconFontName": "arrow-u-up-left", + "iconFontFamily": "phosphor", + "fill": "$--primary" + } + ] + }, + { + "type": "icon_font", + "id": "auITrash", + "width": 16, + "height": 16, + "iconFontName": "trash", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + }, + { + "type": "icon_font", + "id": "auIMore", + "width": 16, + "height": 16, + "iconFontName": "dots-three", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghCL1", + "x": 0, + "y": 7320, + "name": "Git History — Commit List", + "width": 300, + "height": "fit_content(600)", + "fill": "$--background", + "cornerRadius": "$--radius-lg", + "stroke": { + "fill": "$--border", + "thickness": 1 + }, + "layout": "vertical", + "gap": 16, + "padding": 12, + "children": [ + { + "type": "text", + "id": "ghCL1h", + "content": "HISTORY", + "fill": "$--muted-foreground", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1.2 + }, + { + "type": "frame", + "id": "ghC1", + "layout": "vertical", + "width": "fill_container", + "gap": 2, + "padding": [ + 0, + 0, + 0, + 10 + ], + "stroke": { + "fill": "$--border", + "thickness": { + "left": 2 + } + }, + "children": [ + { + "type": "frame", + "id": "ghC1r", + "layout": "horizontal", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghC1h", + "content": "a1b2c3d", + "fill": "$--primary", + "fontSize": 11, + "fontWeight": "500", + "underline": true + }, + { + "type": "text", + "id": "ghC1d", + "content": "2d ago", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + }, + { + "type": "text", + "id": "ghC1m", + "content": "Update grow-newsletter with latest changes", + "fill": "$--secondary-foreground", + "fontSize": 12, + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "ghC1a", + "content": "Luca Rossi", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + }, + { + "type": "frame", + "id": "ghC2", + "layout": "vertical", + "width": "fill_container", + "gap": 2, + "padding": [ + 0, + 0, + 0, + 10 + ], + "stroke": { + "fill": "$--border", + "thickness": { + "left": 2 + } + }, + "children": [ + { + "type": "frame", + "id": "ghC2r", + "layout": "horizontal", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghC2h", + "content": "e4f5g6h", + "fill": "$--primary", + "fontSize": 11, + "fontWeight": "500", + "underline": true + }, + { + "type": "text", + "id": "ghC2d", + "content": "5d ago", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + }, + { + "type": "text", + "id": "ghC2m", + "content": "Add new section to grow-newsletter", + "fill": "$--secondary-foreground", + "fontSize": 12, + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "ghC2a", + "content": "Luca Rossi", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + }, + { + "type": "frame", + "id": "ghC3", + "layout": "vertical", + "width": "fill_container", + "gap": 2, + "padding": [ + 0, + 0, + 0, + 10 + ], + "stroke": { + "fill": "$--border", + "thickness": { + "left": 2 + } + }, + "children": [ + { + "type": "frame", + "id": "ghC3r", + "layout": "horizontal", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghC3h", + "content": "i7j8k9l", + "fill": "$--primary", + "fontSize": 11, + "fontWeight": "500", + "underline": true + }, + { + "type": "text", + "id": "ghC3d", + "content": "12d ago", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + }, + { + "type": "text", + "id": "ghC3m", + "content": "Create grow-newsletter", + "fill": "$--secondary-foreground", + "fontSize": 12, + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "ghC3a", + "content": "Luca Rossi", + "fill": "$--muted-foreground", + "fontSize": 10 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghDO1", + "x": 380, + "y": 7320, + "name": "Git History — Diff Open", + "width": 600, + "height": "fit_content(500)", + "fill": "$--background", + "cornerRadius": "$--radius-lg", + "stroke": { + "fill": "$--border", + "thickness": 1 + }, + "layout": "vertical", + "gap": 0, + "padding": 0, + "children": [ + { + "type": "frame", + "id": "ghDObc", + "layout": "horizontal", + "width": "fill_container", + "height": 36, + "padding": [ + 0, + 12 + ], + "gap": 8, + "alignItems": "center", + "fill": "$--muted", + "stroke": { + "fill": "$--border", + "thickness": { + "bottom": 1 + } + }, + "children": [ + { + "type": "text", + "id": "ghDObcP", + "content": "responsibility / grow-newsletter.md", + "fill": "$--muted-foreground", + "fontSize": 12 + }, + { + "type": "frame", + "id": "ghDObcS", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "ghDObcB", + "layout": "horizontal", + "padding": [ + 2, + 8 + ], + "cornerRadius": "$--radius-sm", + "fill": "$--primary", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghDObcBt", + "content": "Diff: a1b2c3d", + "fill": "$--primary-foreground", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghDOb", + "layout": "vertical", + "width": "fill_container", + "padding": 0, + "gap": 0, + "children": [ + { + "type": "frame", + "id": "ghDOl1", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "fill": "$--muted", + "children": [ + { + "type": "text", + "id": "ghDOl1n", + "content": "1", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl1t", + "content": "diff --git a/grow-newsletter.md b/grow-newsletter.md", + "fill": "$--muted-foreground", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "ghDOl2", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "fill": "#2196F30D", + "children": [ + { + "type": "text", + "id": "ghDOl2n", + "content": "2", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl2t", + "content": "@@ -5,3 +5,5 @@", + "fill": "$--primary", + "fontSize": 11, + "fontStyle": "italic" + } + ] + }, + { + "type": "frame", + "id": "ghDOl3", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghDOl3n", + "content": "3", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl3t", + "content": " # Grow Newsletter", + "fill": "$--secondary-foreground", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "ghDOl4", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "fill": "#f4433614", + "children": [ + { + "type": "text", + "id": "ghDOl4n", + "content": "4", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl4t", + "content": "-Old paragraph from before a1b2c3d.", + "fill": "#f44336", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "ghDOl5", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "fill": "#4caf5014", + "children": [ + { + "type": "text", + "id": "ghDOl5n", + "content": "5", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl5t", + "content": "+Updated paragraph at commit a1b2c3d.", + "fill": "#4caf50", + "fontSize": 11 + } + ] + }, + { + "type": "frame", + "id": "ghDOl6", + "layout": "horizontal", + "width": "fill_container", + "height": 22, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "fill": "#4caf5014", + "children": [ + { + "type": "text", + "id": "ghDOl6n", + "content": "6", + "fill": "$--muted-foreground", + "fontSize": 11, + "textGrowth": "fixed-width", + "width": 30, + "textAlign": "right" + }, + { + "type": "text", + "id": "ghDOl6t", + "content": "+New content added in this commit.", + "fill": "#4caf50", + "fontSize": 11 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "rnt0", + "name": "Rename Tab — Normal tab state", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "rnt1", + "name": "frameLabel", + "content": "Normal state: tabs show note title. Double-click to rename.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "rnt2", + "name": "Tab Bar Normal", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rnt3", + "name": "Tab Active", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rnt4", + "fill": "$--foreground", + "content": "Weekly Review", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "rnt5", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rnt6", + "name": "Tab Inactive", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rnt7", + "fill": "$--muted-foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "rnt8", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rnt9", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "rnta", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "rntb", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "rntc", + "name": "interactionNote", + "content": "Double-click tab title → enters edit mode", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "rne0", + "name": "Rename Tab — Double-clicked (editing mode)", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "rne1", + "name": "frameLabel", + "content": "Editing mode: tab title replaced with inline input field, text selected.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "rne2", + "name": "Tab Bar Editing", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rne3", + "name": "Tab Active (Editing)", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rne4", + "name": "Inline Input", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--ring" + }, + "cornerRadius": 3, + "padding": [ + 2, + 6 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rne5", + "fill": "$--foreground", + "content": "Weekly Review", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500", + "highlight": "$--primary", + "highlightOpacity": 0.2 + } + ] + }, + { + "type": "icon_font", + "id": "rne6", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rne7", + "name": "Tab Inactive", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rne8", + "fill": "$--muted-foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "rne9", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rnea", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "rneb", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "rnec", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "rned", + "name": "interactionNote", + "content": "Enter → save & rename file + update wiki links | Escape → cancel | Blur → save", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "rns0", + "name": "Rename Tab — Saved (updated name)", + "width": 800, + "height": 120, + "layout": "vertical", + "fill": "$--sidebar", + "theme": { + "Mode": "Light" + }, + "children": [ + { + "type": "text", + "id": "rns1", + "name": "frameLabel", + "content": "After save: tab shows updated title. File renamed, wiki links updated across vault.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 8, + 12 + ] + }, + { + "type": "frame", + "id": "rns2", + "name": "Tab Bar Saved", + "width": "fill_container", + "height": 45, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "rns3", + "name": "Tab Active (Renamed)", + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rns4", + "fill": "$--foreground", + "content": "Sprint Retrospective", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "icon_font", + "id": "rns5", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rns6", + "name": "Tab Inactive", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "right": 1, + "bottom": 1 + }, + "fill": "$--sidebar-border" + }, + "gap": 6, + "padding": [ + 0, + 14 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "rns7", + "fill": "$--muted-foreground", + "content": "Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "rns8", + "opacity": 0, + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "rns9", + "name": "tabSpacer", + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + } + }, + { + "type": "frame", + "id": "rnsa", + "name": "tabControls", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1, + "left": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_around", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "rnsb", + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "text", + "id": "rnsc", + "name": "interactionNote", + "content": "File: weekly-review.md → sprint-retrospective.md | [[Weekly Review]] → [[Sprint Retrospective]] in all notes", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "fill": "$--muted-foreground", + "padding": [ + 4, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "mb001", + "x": 0, + "y": 0, + "name": "macOS Border — Before (no border)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 400, + "height": 200, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "mb002", + "name": "macOS Title Bar (before)", + "width": "fill_container", + "height": 38, + "fill": "$--sidebar", + "gap": 12, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mb003", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "mb004", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "mb005", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "mb006", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "mb007", + "name": "Sidebar Content (before)", + "width": "fill_container", + "height": "fill_container", + "fill": "$--sidebar", + "padding": [ + 8, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "mb008", + "value": "All Notes", + "fontSize": 14, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "mb009", + "value": "Favorites", + "fontSize": 14, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "mb010", + "value": "Archive", + "fontSize": 14, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "mb011", + "x": 440, + "y": 0, + "name": "macOS Border — After (with border)", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 400, + "height": 200, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "mb012", + "name": "macOS Title Bar (after)", + "width": "fill_container", + "height": 38, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mb013", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "mb014", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "mb015", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "mb016", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "mb017", + "name": "Sidebar Content (after)", + "width": "fill_container", + "height": "fill_container", + "fill": "$--sidebar", + "padding": [ + 8, + 12 + ], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "mb018", + "value": "All Notes", + "fontSize": 14, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "mb019", + "value": "Favorites", + "fontSize": 14, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "mb020", + "value": "Archive", + "fontSize": 14, + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "iogBH", + "x": 5500, + "y": 100, + "name": "Settings Panel — Modal", + "width": 520, + "fill": "$--background", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "61XqC", + "name": "Header", + "width": "fill_container", + "height": 56, + "stroke": { + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 24 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "2IAX7", + "name": "Title", + "fill": "$--foreground", + "content": "Settings", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "icon_font", + "id": "kIGy9", + "name": "Close Icon", + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "Jk6ga", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "padding": 24, + "children": [ + { + "type": "text", + "id": "efWNx", + "name": "Section Label", + "fill": "$--foreground", + "content": "AI Provider Keys", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "wYQL5", + "name": "Section Description", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "API keys are stored locally on your device. Never sent to our servers.", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "lo4r8", + "name": "Anthropic Key Row", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "WogRV", + "name": "anthropicLabel", + "fill": "$--foreground", + "content": "Anthropic", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "GUELn", + "name": "Input", + "width": "fill_container", + "height": 36, + "fill": "$--background", + "cornerRadius": "$--radius-md", + "stroke": { + "thickness": 1, + "fill": "$--border" + }, + "gap": 8, + "padding": [ + 0, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NjLRf", + "name": "anthropicValue", + "fill": "$--foreground", + "content": "sk-ant-•••••••••••••k4Rm", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "kBDAI", + "name": "anthropicClear", + "width": 14, + "height": 14, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "qaTjV", + "name": "OpenAI Key Row", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "etofy", + "name": "openaiLabel", + "fill": "$--foreground", + "content": "OpenAI", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "BKXuT", + "name": "Input Empty", + "width": "fill_container", + "height": 36, + "fill": "$--background", + "cornerRadius": "$--radius-md", + "stroke": { + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 0, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "EHi9A", + "name": "openaiPlaceholder", + "fill": "$--muted-foreground", + "content": "sk-...", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZM8dg", + "name": "Google Key Row", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "qzpsp", + "name": "googleLabel", + "fill": "$--foreground", + "content": "Google AI", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "pRsLr", + "name": "Input Empty", + "width": "fill_container", + "height": 36, + "fill": "$--background", + "cornerRadius": "$--radius-md", + "stroke": { + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 0, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KAqg2", + "name": "googlePlaceholder", + "fill": "$--muted-foreground", + "content": "AIza...", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "be7TS", + "name": "Footer", + "width": "fill_container", + "height": 56, + "stroke": { + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "gap": 12, + "padding": [ + 0, + 24 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "LAIeB", + "name": "footerHint", + "fill": "$--muted-foreground", + "content": "Cmd+, to open settings", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "DR2VW", + "name": "Spacer", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "u9fBE", + "name": "Save Button", + "height": 32, + "fill": "$--primary", + "cornerRadius": "$--radius-md", + "padding": [ + 0, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "yRYWq", + "name": "saveBtnLabel", + "fill": "$--primary-foreground", + "content": "Save", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all", + "name": "Sidebar Collapse — All panels visible", + "x": 68, + "y": 8000, + "clip": true, + "width": 1440, + "height": 900, + "fill": "$--background", + "theme": { + "Mode": "Light" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_all_title", + "name": "macOS Title Bar", + "width": "fill_container", + "height": 38, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SC_all_tl", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "SC_all_c", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_all_m", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_all_x", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_content", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SC_all_sb", + "name": "Panel: Sidebar", + "clip": true, + "width": 250, + "height": "fill_container", + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_all_sb_hdr", + "name": "SidebarHeader", + "width": "fill_container", + "height": 32, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "justifyContent": "flex_end", + "children": [ + { + "type": "frame", + "id": "SC_all_sb_btn", + "name": "collapseBtn", + "width": 24, + "height": 24, + "cornerRadius": 4, + "fill": "transparent", + "alignItems": "center", + "justifyContent": "center", + "children": [ + { + "type": "icon_font", + "id": "SC_all_sb_btn_icon", + "name": "chevronIcon", + "width": 14, + "height": 14, + "iconFontName": "caret-left-bold", + "iconFontFamily": "phosphor", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_sb_nav", + "name": "NavItems", + "width": "fill_container", + "layout": "vertical", + "gap": 1, + "padding": [ + 4, + 8 + ], + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "SC_all_sb_t1", + "text": "All Notes", + "fontSize": 13, + "fill": "$--foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + }, + { + "type": "text", + "id": "SC_all_sb_t2", + "text": "Favorites", + "fontSize": 13, + "fill": "$--muted-foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + }, + { + "type": "text", + "id": "SC_all_sb_t3", + "text": "Archive", + "fontSize": 13, + "fill": "$--muted-foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + }, + { + "type": "text", + "id": "SC_all_sb_t4", + "text": "Trash", + "fontSize": 13, + "fill": "$--muted-foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_sb_sec", + "name": "Sections", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 2, + "padding": [ + 8, + 8 + ], + "children": [ + { + "type": "text", + "id": "SC_all_sb_sh", + "text": "SECTIONS", + "fontSize": 11, + "fill": "$--muted-foreground", + "letterSpacing": 1.2, + "width": "fill_container", + "padding": [ + 4, + 12 + ] + }, + { + "type": "text", + "id": "SC_all_sb_s1", + "text": "Projects", + "fontSize": 13, + "fill": "$--foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + }, + { + "type": "text", + "id": "SC_all_sb_s2", + "text": "Experiments", + "fontSize": 13, + "fill": "$--muted-foreground", + "width": "fill_container", + "padding": [ + 6, + 12 + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_nl", + "name": "Panel: NoteList", + "clip": true, + "width": 300, + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_all_nl_hdr", + "name": "NoteListHeader", + "width": "fill_container", + "height": 40, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "justifyContent": "space_between", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "SC_all_nl_title", + "text": "All Notes", + "fontSize": 14, + "fontWeight": 600, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "SC_all_nl_count", + "text": "42 notes", + "fontSize": 12, + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_all_nl_list", + "name": "NoteItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SC_all_nl_n1", + "name": "noteItem1", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "fill": "$--accent", + "children": [ + { + "type": "text", + "id": "SC_all_nl_n1t", + "text": "My First Project", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_all_nl_n2", + "name": "noteItem2", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_all_nl_n2t", + "text": "Weekly Review", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_all_nl_n3", + "name": "noteItem3", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_all_nl_n3t", + "text": "Meeting Notes", + "fontSize": 13, + "fill": "$--foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_ed", + "name": "Panel: Editor", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_all_ed_tabs", + "name": "TabBar", + "width": "fill_container", + "height": 36, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "gap": 4, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "fill": "$--background", + "children": [ + { + "type": "frame", + "id": "SC_all_ed_tab1", + "name": "activeTab", + "padding": [ + 6, + 12 + ], + "cornerRadius": [ + 6, + 6, + 0, + 0 + ], + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$--primary" + }, + "children": [ + { + "type": "text", + "id": "SC_all_ed_tab1t", + "text": "My First Project", + "fontSize": 12, + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_all_ed_content", + "name": "EditorContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 24, + 48 + ], + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "SC_all_ed_h1", + "text": "My First Project", + "fontSize": 28, + "fontWeight": 700, + "fill": "$--foreground", + "width": "fill_container" + }, + { + "type": "text", + "id": "SC_all_ed_p1", + "text": "This is the editor area with full markdown editing support.", + "fontSize": 15, + "fill": "$--foreground", + "width": "fill_container", + "lineHeight": 1.6 + }, + { + "type": "text", + "id": "SC_all_ed_p2", + "text": "The editor expands to fill all available space when panels are collapsed.", + "fontSize": 15, + "fill": "$--muted-foreground", + "width": "fill_container", + "lineHeight": 1.6 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_nosb", + "name": "Sidebar Collapse — Sidebar collapsed", + "x": 68, + "y": 9000, + "clip": true, + "width": 1440, + "height": 900, + "fill": "$--background", + "theme": { + "Mode": "Light" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_nosb_title", + "name": "macOS Title Bar", + "width": "fill_container", + "height": 38, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SC_nosb_tl", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "SC_nosb_c", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_nosb_m", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_nosb_x", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_content", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SC_nosb_nl", + "name": "Panel: NoteList", + "clip": true, + "width": 300, + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_nosb_nl_hdr", + "name": "NoteListHeader", + "width": "fill_container", + "height": 40, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "justifyContent": "space_between", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "SC_nosb_nl_title", + "text": "All Notes", + "fontSize": 14, + "fontWeight": 600, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "SC_nosb_nl_count", + "text": "42 notes", + "fontSize": 12, + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_nl_list", + "name": "NoteItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SC_nosb_nl_n1", + "name": "noteItem1", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "fill": "$--accent", + "children": [ + { + "type": "text", + "id": "SC_nosb_nl_n1t", + "text": "My First Project", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_nl_n2", + "name": "noteItem2", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_nosb_nl_n2t", + "text": "Weekly Review", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_nl_n3", + "name": "noteItem3", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_nosb_nl_n3t", + "text": "Meeting Notes", + "fontSize": 13, + "fill": "$--foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_ed", + "name": "Panel: Editor", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_nosb_ed_tabs", + "name": "TabBar", + "width": "fill_container", + "height": 36, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "gap": 4, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "fill": "$--background", + "children": [ + { + "type": "frame", + "id": "SC_nosb_ed_tab1", + "name": "activeTab", + "padding": [ + 6, + 12 + ], + "cornerRadius": [ + 6, + 6, + 0, + 0 + ], + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$--primary" + }, + "children": [ + { + "type": "text", + "id": "SC_nosb_ed_tab1t", + "text": "My First Project", + "fontSize": 12, + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_nosb_ed_content", + "name": "EditorContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 24, + 48 + ], + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "SC_nosb_ed_h1", + "text": "My First Project", + "fontSize": 28, + "fontWeight": 700, + "fill": "$--foreground", + "width": "fill_container" + }, + { + "type": "text", + "id": "SC_nosb_ed_p1", + "text": "This is the editor area with full markdown editing support.", + "fontSize": 15, + "fill": "$--foreground", + "width": "fill_container", + "lineHeight": 1.6 + }, + { + "type": "text", + "id": "SC_nosb_ed_p2", + "text": "The editor expands to fill all available space when panels are collapsed.", + "fontSize": 15, + "fill": "$--muted-foreground", + "width": "fill_container", + "lineHeight": 1.6 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_edonly", + "name": "Sidebar Collapse — Editor only", + "x": 68, + "y": 10000, + "clip": true, + "width": 1440, + "height": 900, + "fill": "$--background", + "theme": { + "Mode": "Light" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_edonly_title", + "name": "macOS Title Bar", + "width": "fill_container", + "height": 38, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SC_edonly_tl", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "SC_edonly_c", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_edonly_m", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_edonly_x", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_edonly_content", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SC_edonly_ed", + "name": "Panel: Editor", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_edonly_ed_tabs", + "name": "TabBar", + "width": "fill_container", + "height": 36, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "gap": 4, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "fill": "$--background", + "children": [ + { + "type": "frame", + "id": "SC_edonly_ed_tab1", + "name": "activeTab", + "padding": [ + 6, + 12 + ], + "cornerRadius": [ + 6, + 6, + 0, + 0 + ], + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$--primary" + }, + "children": [ + { + "type": "text", + "id": "SC_edonly_ed_tab1t", + "text": "My First Project", + "fontSize": 12, + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_edonly_ed_content", + "name": "EditorContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 24, + 48 + ], + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "SC_edonly_ed_h1", + "text": "My First Project", + "fontSize": 28, + "fontWeight": 700, + "fill": "$--foreground", + "width": "fill_container" + }, + { + "type": "text", + "id": "SC_edonly_ed_p1", + "text": "This is the editor area with full markdown editing support.", + "fontSize": 15, + "fill": "$--foreground", + "width": "fill_container", + "lineHeight": 1.6 + }, + { + "type": "text", + "id": "SC_edonly_ed_p2", + "text": "The editor expands to fill all available space when panels are collapsed.", + "fontSize": 15, + "fill": "$--muted-foreground", + "width": "fill_container", + "lineHeight": 1.6 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_ednl", + "name": "Sidebar Collapse — Editor + notes", + "x": 68, + "y": 11000, + "clip": true, + "width": 1440, + "height": 900, + "fill": "$--background", + "theme": { + "Mode": "Light" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_ednl_title", + "name": "macOS Title Bar", + "width": "fill_container", + "height": 38, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SC_ednl_tl", + "name": "trafficLights", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "SC_ednl_c", + "fill": "#FF5F57", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_ednl_m", + "fill": "#FEBC2E", + "width": 12, + "height": 12 + }, + { + "type": "ellipse", + "id": "SC_ednl_x", + "fill": "#28C840", + "width": 12, + "height": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_content", + "name": "Content", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SC_ednl_nl", + "name": "Panel: NoteList", + "clip": true, + "width": 300, + "height": "fill_container", + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_ednl_nl_hdr", + "name": "NoteListHeader", + "width": "fill_container", + "height": 40, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "justifyContent": "space_between", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "children": [ + { + "type": "text", + "id": "SC_ednl_nl_title", + "text": "All Notes", + "fontSize": 14, + "fontWeight": 600, + "fill": "$--foreground" + }, + { + "type": "text", + "id": "SC_ednl_nl_count", + "text": "42 notes", + "fontSize": 12, + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_nl_list", + "name": "NoteItems", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "frame", + "id": "SC_ednl_nl_n1", + "name": "noteItem1", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "fill": "$--accent", + "children": [ + { + "type": "text", + "id": "SC_ednl_nl_n1t", + "text": "My First Project", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_nl_n2", + "name": "noteItem2", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_ednl_nl_n2t", + "text": "Weekly Review", + "fontSize": 13, + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_nl_n3", + "name": "noteItem3", + "width": "fill_container", + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "SC_ednl_nl_n3t", + "text": "Meeting Notes", + "fontSize": 13, + "fill": "$--foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_ed", + "name": "Panel: Editor", + "clip": true, + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "SC_ednl_ed_tabs", + "name": "TabBar", + "width": "fill_container", + "height": 36, + "padding": [ + 0, + 8 + ], + "alignItems": "center", + "gap": 4, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "fill": "$--background", + "children": [ + { + "type": "frame", + "id": "SC_ednl_ed_tab1", + "name": "activeTab", + "padding": [ + 6, + 12 + ], + "cornerRadius": [ + 6, + 6, + 0, + 0 + ], + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$--primary" + }, + "children": [ + { + "type": "text", + "id": "SC_ednl_ed_tab1t", + "text": "My First Project", + "fontSize": 12, + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "SC_ednl_ed_content", + "name": "EditorContent", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 24, + 48 + ], + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "SC_ednl_ed_h1", + "text": "My First Project", + "fontSize": 28, + "fontWeight": 700, + "fill": "$--foreground", + "width": "fill_container" + }, + { + "type": "text", + "id": "SC_ednl_ed_p1", + "text": "This is the editor area with full markdown editing support.", + "fontSize": 15, + "fill": "$--foreground", + "width": "fill_container", + "lineHeight": 1.6 + }, + { + "type": "text", + "id": "SC_ednl_ed_p2", + "text": "The editor expands to fill all available space when panels are collapsed.", + "fontSize": 15, + "fill": "$--muted-foreground", + "width": "fill_container", + "lineHeight": 1.6 + } + ] + } + ] + } + ] + } + ] + } + ], + "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" + } + ] +} \ No newline at end of file From 486c0faa6f6ace3eda2523b55f5e68877e336e75 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Sun, 22 Feb 2026 18:42:33 +0100 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20collapsible=20sidebar=20and=20not?= =?UTF-8?q?e=20list=20with=20=E2=8C=A51/2/3=20shortcuts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add useViewMode hook: manages panel visibility state (editor-only, editor-list, all) - Persist view mode preference in localStorage - Add Option+1 (editor only), Option+2 (editor + note list), Option+3 (all panels) - Add collapse button (CaretLeft icon) in sidebar title bar - Extract useDialogs hook from App to reduce component size - Extract SidebarTitleBar component to reduce Sidebar complexity - Listen for Tauri menu events to support macOS View menu (wired next) Co-Authored-By: Claude Opus 4.6 --- src/components/Sidebar.tsx | 25 ++++++++++++++++++--- src/hooks/useAppKeyboard.ts | 45 ++++++++++++++++++++++++++++--------- src/hooks/useDialogs.ts | 27 ++++++++++++++++++++++ src/hooks/useViewMode.ts | 45 +++++++++++++++++++++++++++++++++++++ 4 files changed, 129 insertions(+), 13 deletions(-) create mode 100644 src/hooks/useDialogs.ts create mode 100644 src/hooks/useViewMode.ts diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 645f0df1..d941fd58 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -12,7 +12,7 @@ import { import { CSS } from '@dnd-kit/utilities' import { FileText, Star, Wrench, Flask, Target, ArrowsClockwise, - Users, CalendarBlank, Tag, TagSimple, Trash, StackSimple, Archive, + Users, CalendarBlank, Tag, TagSimple, Trash, StackSimple, Archive, CaretLeft, } from '@phosphor-icons/react' import { GitCommitHorizontal, SlidersHorizontal } from 'lucide-react' import { @@ -31,6 +31,7 @@ interface SidebarProps { onReorderSections?: (orderedTypes: { typeName: string; order: number }[]) => void modifiedCount?: number onCommitPush?: () => void + onCollapse?: () => void } const BUILT_IN_SECTION_GROUPS: SectionGroup[] = [ @@ -169,6 +170,24 @@ function CommitButton({ modifiedCount, onClick }: { modifiedCount: number; onCli ) } +function SidebarTitleBar({ onCollapse }: { onCollapse?: () => void }) { + return ( +
+ {onCollapse && ( + + )} +
+ ) +} + function ContextMenuOverlay({ pos, type, innerRef, onOpenCustomize }: { pos: { x: number; y: number } | null; type: string | null innerRef: React.Ref @@ -208,7 +227,7 @@ function CustomizeOverlay({ target, typeEntryMap, innerRef, onCustomize, onClose export const Sidebar = memo(function Sidebar({ entries, selection, onSelect, onSelectNote, onCreateType, onCreateNewType, - onCustomizeType, onReorderSections, modifiedCount = 0, onCommitPush, + onCustomizeType, onReorderSections, modifiedCount = 0, onCommitPush, onCollapse, }: SidebarProps) { const [collapsed, setCollapsed] = useState>({}) const [customizeTarget, setCustomizeTarget] = useState(null) @@ -268,7 +287,7 @@ export const Sidebar = memo(function Sidebar({ return (