diff --git a/docs/DESIGN-SYSTEM-PROPOSAL.md b/docs/DESIGN-SYSTEM-PROPOSAL.md new file mode 100644 index 00000000..766ffea7 --- /dev/null +++ b/docs/DESIGN-SYSTEM-PROPOSAL.md @@ -0,0 +1,352 @@ +# Design System Proposal for Laputa + +## Current State Assessment + +### What exists today +- **53 top-level frames** scattered across a ~6800x11400px canvas with no spatial logic +- **0 reusable components** (every frame is ad-hoc) +- **~40 design variables** with light/dark theme support (colors, radii, fonts) +- **2 foundation frames**: Color Palette and Typography & Spacing Specs +- **1 full-app layout** frame (light mode only) +- **4 sidebar-collapse variations** showing different panel states + +### Recurring patterns that should be components (but aren't) +By analyzing the 53 frames, these patterns are duplicated 3-10x each: + +| Pattern | Where it appears | Times duplicated | +|---------|-----------------|-----------------| +| Inspector section header (label + action icon) | rbF01-03, reF01-03, pi01 | 7x | +| Note list item (title + snippet + date + dot) | dp01-04, mni01-04, trNL1 | ~10x | +| Tab bar tab (label + close + dot indicator) | dp10, mni10, full layout | 3x | +| Sidebar filter item (icon + label + count) | trSB1, full layout sidebar | 4x | +| Sidebar section group (chevron + icon + label) | full layout, drag frames | 4x | +| Breadcrumb bar (icon + path + badges) | dp20, archBtnNorm/Arc, full layout | 4x | +| Modal shell (header + body + footer) | ghv01-04, iogBH (settings) | 5x | +| Property row (label + value) | urlDefault/Hover/Edit, pi01 | 4x | +| Relationship pill (icon + label + X) | trRI1, reF01-03, rbF01-03 | 6x | +| Status badge (colored dot/pill) | dp01, dp10, dp20, dp30 | 4x | +| Status bar (version + branch + sync) | mni20, full layout | 2x | +| Search bar (dark themed) | 3aG9b, K1O2x, nrIcZ | 3x | +| Warning/info banner | trW30 | 1x (but will recur) | + +Every time a new feature is designed, these get rebuilt from scratch. + +--- + +## Proposed Structure + +### Single file: `ui-design.pen` + +Multiple files creates friction (can't reference components cross-file, harder to maintain). Keep one file, organized into logical **sections** using large container frames as visual grouping. Each section is a horizontal band across the canvas. + +### Canvas Layout (top to bottom) + +``` +y ≈ 0 ┌─────────────────────────────────────────────┐ + │ 0. COVER │ + │ App name, version, last updated, TOC │ + └─────────────────────────────────────────────┘ + +y ≈ 200 ┌─────────────────────────────────────────────┐ + │ 1. FOUNDATIONS │ + │ Color palette, Typography scale, Spacing, │ + │ Border radius, Shadows, Iconography │ + └─────────────────────────────────────────────┘ + +y ≈ 1800 ┌─────────────────────────────────────────────┐ + │ 2. COMPONENTS (Reusable) │ + │ Atoms → Molecules → Organisms │ + │ Each component: default + states side by side│ + └─────────────────────────────────────────────┘ + +y ≈ 5000 ┌─────────────────────────────────────────────┐ + │ 3. PATTERNS / COMPOSITIONS │ + │ Panel Inspector, Panel NoteList, Panel Editor│ + │ Modal shell, Popover/dropdown shell │ + └─────────────────────────────────────────────┘ + +y ≈ 7000 ┌─────────────────────────────────────────────┐ + │ 4. FULL LAYOUTS │ + │ Default state, Sidebar collapsed, Editor │ + │ only, etc. (full 1440x900 frames) │ + └─────────────────────────────────────────────┘ + +y ≈ 12000 ┌─────────────────────────────────────────────┐ + │ 5. FEATURE SPECS │ + │ Grouped by feature area — all current 53 │ + │ frames reorganized here │ + └─────────────────────────────────────────────┘ +``` + +Each section starts with a **section label frame** (large text, description, horizontal rule). Within each section, frames flow **left to right, wrapping down**, with 100px spacing. + +--- + +## Section 1: Foundations + +### What to keep +- **Color Palette** (frame `mOf4J`) — already good. Move to top of file. +- **Typography & Spacing** (frame `HZonq`) — already good. Place next to color palette. + +### What to add +- **Spacing Scale** — explicit 4px grid reference (4, 8, 12, 16, 20, 24, 32, 40, 48, 64) with visual boxes +- **Shadow Tokens** — overlay shadow, dialog shadow, dropdown shadow (currently only documented in CSS, not in the design file) +- **Icon Reference** — small grid showing common Lucide + Phosphor icons used in the app, at 14px and 16px sizes + +### Variables to add +The .pen file already has `--radius-sm/md/lg` but is missing spacing variables. Add: + +| Variable | Value | Usage | +|----------|-------|-------| +| `--space-xs` | 4 | Tight gaps (icon-to-label) | +| `--space-sm` | 8 | Standard gap | +| `--space-md` | 12 | Section padding | +| `--space-lg` | 16 | Panel padding | +| `--space-xl` | 24 | Large section gaps | +| `--space-2xl` | 32 | Page padding | +| `--space-3xl` | 48 | Section dividers | + +--- + +## Section 2: Component Library + +### Atomic Design Hierarchy + +#### Atoms (smallest building blocks) + +| Component | Variants/States | ID Prefix | +|-----------|----------------|-----------| +| **Button/Primary** | default, hover, active, disabled | `c/btn-pri` | +| **Button/Secondary** | default, hover, active, disabled | `c/btn-sec` | +| **Button/Ghost** | default, hover, active | `c/btn-ghost` | +| **Button/Destructive** | default, hover, disabled | `c/btn-dest` | +| **Button/Icon** | default, hover (icon-only button, e.g. close, settings) | `c/btn-icon` | +| **Input/Text** | empty, filled, focused, error, disabled | `c/input` | +| **Input/Search** | empty, with query, with clear button | `c/input-search` | +| **Badge** | default, secondary, outline, destructive, status colors (green/orange/red/blue/purple) | `c/badge` | +| **Status Dot** | green (new), orange (modified), none (clean) | `c/status-dot` | +| **Checkbox** | unchecked, checked, indeterminate | `c/checkbox` | +| **Toggle** | off, on | `c/toggle` | +| **Icon** | 14px, 16px, 20px wrapper with Lucide/Phosphor | `c/icon` | +| **Separator** | horizontal, vertical | `c/sep` | +| **Avatar/Initial** | letter avatar for Person entities | `c/avatar` | +| **Tooltip** | top, bottom (container with pointer) | `c/tooltip` | + +#### Molecules (composed from atoms) + +| Component | Composition | States | ID Prefix | +|-----------|------------|--------|-----------| +| **Sidebar/FilterItem** | icon + label + count badge | default, active, hover | `c/sb-filter` | +| **Sidebar/SectionHeader** | chevron + icon + label + add button | collapsed, expanded, hover, dragging | `c/sb-section` | +| **Sidebar/SectionItem** | indent + label | default, active, hover | `c/sb-item` | +| **Sidebar/TopicItem** | hash + label | default, active, hover | `c/sb-topic` | +| **NoteList/Item** | status dot + title + snippet + date + type pill | default, selected, hover, modified, new | `c/nl-item` | +| **NoteList/Header** | title + count + sort button | — | `c/nl-header` | +| **Tab** | label + close btn + modified dot | default, active, hover, modified | `c/tab` | +| **BreadcrumbBar** | path segments + word count + status badge | new, modified, clean | `c/breadcrumb` | +| **Property/Row** | label + value | default, hover, editing | `c/prop-row` | +| **Property/URLRow** | label + link + copy/edit icons | default, hover, editing | `c/prop-url` | +| **Relationship/Pill** | icon + label + (X remove on hover) | default, hover, trashed, archived | `c/rel-pill` | +| **Relationship/AddInput** | search input with autocomplete | empty, typing, results | `c/rel-add` | +| **Inspector/SectionHeader** | label + action button | default, hover | `c/insp-header` | +| **Git/CommitItem** | hash + message + author + date (timeline style) | — | `c/git-commit` | +| **Search/ResultItem** | title + path + highlighted snippet | default, selected | `c/search-result` | +| **Sort/DropdownItem** | label + direction arrow + checkmark | default, selected | `c/sort-item` | +| **Banner/Warning** | icon + message + optional action | info, warning, error | `c/banner` | +| **Wikilink** | colored link text (varies by entity type) | 8 type colors | `c/wikilink` | + +#### Organisms (panel-level compositions) + +| Component | Content | ID Prefix | +|-----------|---------|-----------| +| **Panel/Sidebar** | title bar + filters + sections + commit area | `c/panel-sidebar` | +| **Panel/NoteList** | header + type pills + item list | `c/panel-notelist` | +| **Panel/Editor** | tab bar + breadcrumb + content area | `c/panel-editor` | +| **Panel/Inspector** | properties section + relations + backlinks + history | `c/panel-inspector` | +| **Modal/Shell** | header + tab bar (opt) + body + footer | `c/modal` | +| **Popover/Dropdown** | list of items + separator + annotation | `c/popover` | +| **StatusBar** | left info + right info | `c/statusbar` | +| **TitleBar** | traffic lights (macOS) | `c/titlebar` | + +--- + +## Section 3: Patterns / Compositions + +These are **non-reusable** reference frames showing how components compose into real UI sections. Think of them as "component playgrounds" — they use component instances to build real UI, but they're documentation, not building blocks. + +- **Inspector states**: Properties expanded, Relations with pills, Referenced By with/without entries, Backlinks, Git history +- **NoteList states**: All Notes view, filtered by section, empty state, search results +- **Sidebar states**: All sections expanded, one collapsed, dragging reorder, after reorder +- **Editor states**: Single tab, multiple tabs, modified tabs, diff view +- **Modal patterns**: GitHub Vault flow (4 states), Settings, Create Note, Commit Dialog + +--- + +## Section 4: Full Layouts + +| Frame | Description | +|-------|-------------| +| **Default — All Panels** | 1440x900, sidebar + notelist + editor + inspector | +| **Sidebar Collapsed** | Editor area wider, collapse button visible | +| **Editor + NoteList Only** | No sidebar or inspector | +| **Editor Only** | Focused writing mode | +| **AI Chat Open** | Inspector replaced with AI Chat panel | +| **Quick Open Modal** | Cmd+P overlay on default layout | + +Keep the existing 5 layout frames (qHhaj + SC_all/nosb/edonly/ednl). Add AI Chat and Quick Open. + +--- + +## Section 5: Feature Specs + +Reorganize existing 53 frames into feature groups. Each group gets a **feature label** frame above it: + +| Group | Frames to include | +|-------|-------------------| +| **Note Status & Indicators** | dp01, dp10, dp20, dp30, mni01, mni10, mni20 | +| **Trash & Archive** | trSB1, trNL1, trRI1, trW30, archBtnNorm, archBtnArc | +| **Inspector & Properties** | pi01, pi50, rbF01-03, reF01-03, urlDefault/Hover/Edit | +| **Sidebar** | dsg01a-04j, csB01, csA01 | +| **GitHub Vault** | ghv01-04, ghv03 | +| **Git History** | ghCL1, ghDO1, vc001, vc100, vc200 | +| **Sort & Search** | srtDD, srtBN, 3aG9b, K1O2x, nrIcZ | +| **Editor & Wikilinks** | wlc01 | +| **Settings** | iogBH | +| **Virtual List** | vl001 | + +--- + +## Naming Convention + +### Frames +``` +Section-level: "== FOUNDATIONS ==" + "== COMPONENTS ==" + "== FULL LAYOUTS ==" + +Feature groups: "Feature: Trash & Archive" + "Feature: Note Status" +``` + +### Reusable Components +``` +component// + +Examples: + component/button/primary + component/button/ghost + component/sidebar/filter-item + component/notelist/item + component/inspector/section-header + component/modal/shell +``` + +### States (within a component frame) +``` + — + +Examples: + Button/Primary — Default + Button/Primary — Hover + NoteList/Item — Selected + NoteList/Item — Modified +``` + +### Feature Spec Frames +``` + — + +Examples: + Trash — Note List View + Trash — 30-Day Warning + Git History — Commit List + Git History — Diff Open +``` + +--- + +## Implementation Priority + +### Phase 1: Foundation Cleanup (2-3 hours) +1. Add spacing variables to the .pen file +2. Move Color Palette and Typography frames to top of canvas (y ≈ 200) +3. Add section label frames as visual dividers +4. Reorganize existing 53 frames into the feature-spec section (y ≈ 12000+) +5. Create cover frame at y ≈ 0 + +**Impact**: Clean canvas, easy to navigate. Zero component work yet. + +### Phase 2: Core Atoms (3-4 hours) +1. **Button** — 4 variants x 3 states = ~12 sub-frames, all as `reusable: true` +2. **Badge** — 6 color variants + 4 style variants +3. **Status Dot** — green, orange, red, none +4. **Input** — text + search variants +5. **Separator** — horizontal + vertical +6. **Icon Button** — close, settings, chevron, etc. + +**Impact**: Building blocks exist. Future features can pull from them. + +### Phase 3: Core Molecules (4-5 hours) +1. **Sidebar/FilterItem** — most reused sidebar pattern +2. **Sidebar/SectionHeader** — with chevron and add button +3. **NoteList/Item** — the most duplicated pattern in the file +4. **Tab** — with modified indicator states +5. **Property/Row** — default/hover/edit states +6. **Relationship/Pill** — normal/trashed/archived states +7. **Inspector/SectionHeader** — label + collapse/action + +**Impact**: Feature specs can be rebuilt from instances. Consistency guaranteed. + +### Phase 4: Organisms (3-4 hours) +1. **Modal/Shell** — replace 5 ad-hoc modals with instances of one shell +2. **Panel/Sidebar** — full sidebar composition +3. **Panel/NoteList** — full notelist composition +4. **StatusBar** — standardize +5. **Popover/Dropdown** — for sort, autocomplete, etc. + +**Impact**: Full layouts can be composed from panel organisms. + +### Phase 5: Rebuild Full Layouts (2-3 hours) +1. Rebuild "Laputa App — Full Layout (Light)" using component instances +2. Create remaining layout variants (AI Chat, Quick Open) +3. Ensure all layouts use the same component instances for consistency + +**Impact**: Single source of truth. Change a button component, all layouts update. + +### Phase 6: Feature Spec Cleanup (2-3 hours) +1. Rebuild key feature specs using component instances where possible +2. Remove frames that are now redundant (covered by component states) +3. Add any missing feature-specific variations + +**Impact**: Clean, maintainable feature documentation. + +--- + +## Estimated Total Effort + +| Phase | Effort | Cumulative | +|-------|--------|-----------| +| 1. Foundation Cleanup | 2-3h | 2-3h | +| 2. Core Atoms | 3-4h | 5-7h | +| 3. Core Molecules | 4-5h | 9-12h | +| 4. Organisms | 3-4h | 12-16h | +| 5. Full Layouts | 2-3h | 14-19h | +| 6. Feature Cleanup | 2-3h | 16-22h | + +**Recommendation**: Do phases 1-3 first (9-12h). This covers 80% of the value — clean organization + the most reused components. Phases 4-6 can happen incrementally as features are designed. + +--- + +## What "World Class" Looks Like + +After this work, `ui-design.pen` will: + +1. **Open to a cover page** with app identity and section navigation +2. **Have ~30 reusable components** that match the real implementation 1:1 +3. **Use variables everywhere** — no hardcoded colors, spacing, or radii +4. **Show every component state** — no guessing what hover/active/disabled looks like +5. **Compose layouts from instances** — change a component, all layouts update +6. **Group features logically** — find any feature spec in seconds +7. **Grow naturally** — new features just add instances of existing components + new feature-specific frames + +The key shift: **from "collection of screenshots" to "living system of composable parts"**. diff --git a/ui-design.pen b/ui-design.pen index 0c31d0b2..cda58b57 100644 --- a/ui-design.pen +++ b/ui-design.pen @@ -1,11 +1,357 @@ { "version": "2.8", "children": [ + { + "type": "frame", + "id": "urlEdit", + "x": 1331, + "y": 1073, + "name": "URL Property — edit mode (double-click or edit icon)", + "width": 320, + "height": 40, + "fill": "#ffffff", + "gap": 8, + "padding": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "urlEditLabel", + "name": "label", + "fill": "#6b7280", + "content": "URL", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 1.2 + }, + { + "type": "frame", + "id": "urlEditInputWrap", + "name": "input-wrapper", + "width": "fill_container", + "height": 28, + "fill": "#f3f4f6", + "cornerRadius": 4, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#6366f1" + }, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "urlEditInput", + "name": "edit-input", + "fill": "#111827", + "content": "https://example.com/article", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "mni20", + "x": 1345, + "y": 700, + "name": "Modified Note Indicator — StatusBar Pending Count", + "width": 800, + "height": 80, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "mni20t", + "fill": "$--muted-foreground", + "content": "StatusBar — Pending Changes Counter", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "mni21", + "name": "StatusBar with Pending Count", + "width": "fill_container", + "height": 30, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 8 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mni21l", + "name": "left", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mni21v", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mni21fi", + "width": 13, + "height": 13, + "iconFontName": "folder-open", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "mni21fl", + "fill": "$--muted-foreground", + "content": "Demo v2", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "mni21s1", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "mni21br", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mni21gi", + "width": 13, + "height": 13, + "iconFontName": "git-branch", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "mni21gl", + "fill": "$--muted-foreground", + "content": "main", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "mni21s2", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "mni21sy", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mni21ri", + "width": 13, + "height": 13, + "iconFontName": "refresh-cw", + "iconFontFamily": "lucide", + "fill": "$--accent-green" + }, + { + "type": "text", + "id": "mni21rl", + "fill": "$--muted-foreground", + "content": "Synced 2m ago", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "mni21s3", + "fill": "$--border", + "content": "|", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "mni21pd", + "name": "Pending Count", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mni21pi", + "width": 13, + "height": 13, + "iconFontName": "circle-dot", + "iconFontFamily": "lucide", + "fill": "$--accent-orange" + }, + { + "type": "text", + "id": "mni21pl", + "fill": "$--muted-foreground", + "content": "3 pending", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "mni21r", + "name": "right", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mni21nc", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mni21ni", + "width": 13, + "height": 13, + "iconFontName": "file-text", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + }, + { + "type": "text", + "id": "mni21nl", + "fill": "$--muted-foreground", + "content": "9,200 notes", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "icon_font", + "id": "mni21set", + "width": 14, + "height": 14, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "urlHover", + "x": 1345, + "y": 880, + "name": "URL Property — hover state (underline + pointer cursor)", + "width": 320, + "height": 40, + "fill": "#f9fafb", + "gap": 8, + "padding": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "urlHoverLabel", + "name": "label", + "fill": "#6b7280", + "content": "URL", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal", + "letterSpacing": 1.2 + }, + { + "type": "frame", + "id": "urlHoverValueWrap", + "name": "value-wrapper", + "width": "fill_container", + "gap": 4, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "urlHoverValue", + "name": "url-value-hovered", + "fill": "#2563eb", + "content": "https://example.com/article", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "urlHoverEditIcon", + "name": "edit-icon-visible", + "fill": "#6b7280", + "content": "pencil", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, { "type": "frame", "id": "qHhaj", - "x": 0, - "y": 1800, + "x": 68, + "y": 3385, "name": "Laputa App — Full Layout (Light)", "theme": { "Mode": "Light" @@ -1440,7 +1786,8 @@ "fill": "$--muted-foreground", "content": "RELATED NOTES", "fontFamily": "IBM Plex Mono", - "fontSize": 11 + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", @@ -1704,7 +2051,8 @@ "fill": "$--muted-foreground", "content": "EVENTS", "fontFamily": "IBM Plex Mono", - "fontSize": 11 + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", @@ -2573,7 +2921,8 @@ "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -2696,7 +3045,8 @@ "fill": "$--muted-foreground", "content": "RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -2792,7 +3142,8 @@ "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" } ] }, @@ -2843,7 +3194,8 @@ "fill": "$--muted-foreground", "content": "HISTORY", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -3150,9 +3502,756 @@ }, { "type": "frame", - "id": "mOf4J", + "id": "ghv03", "x": 0, - "y": 0, + "y": 1045, + "name": "GitHub Vault — Create new repo", + "clip": true, + "width": 560, + "height": 440, + "fill": "$--background", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ghv03-hdr", + "name": "Header", + "width": "fill_container", + "height": 56, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-title", + "fill": "$--foreground", + "content": "Connect GitHub Repo", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ghv03-close", + "name": "closeBtn", + "width": 24, + "height": 24, + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-x", + "fill": "$--muted-foreground", + "content": "X", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghv03-tabs", + "name": "TabBar", + "width": "fill_container", + "height": 44, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 24 + ], + "alignItems": "end", + "children": [ + { + "type": "frame", + "id": "ghv03-tab-clone", + "name": "Tab: Clone Existing", + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-tab-clone-lbl", + "fill": "$--muted-foreground", + "content": "Clone Existing", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ghv03-tab-create", + "name": "Tab: Create New (active)", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$--accent-blue" + }, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-tab-create-lbl", + "fill": "$--foreground", + "content": "Create New", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghv03-body", + "name": "Body: Create Form", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 20, + "padding": 24, + "children": [ + { + "type": "frame", + "id": "ghv03-name-field", + "name": "RepoNameField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ghv03-name-lbl", + "fill": "$--foreground", + "content": "Repository name", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ghv03-name-input", + "name": "nameInput", + "width": "fill_container", + "height": 40, + "fill": "$--input", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-name-val", + "fill": "$--foreground", + "content": "my-vault", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "ghv03-name-hint", + "fill": "$--muted-foreground", + "content": "github.com/lucaong/my-vault", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ghv03-vis-field", + "name": "VisibilityToggle", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ghv03-vis-lbl", + "fill": "$--foreground", + "content": "Visibility", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ghv03-vis-opts", + "name": "options", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ghv03-opt-priv", + "name": "PrivateOption (selected)", + "fill": "$--accent", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--accent-blue" + }, + "gap": 6, + "padding": [ + 6, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-opt-priv-icon", + "fill": "$--accent-blue", + "content": "Lock", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ghv03-opt-priv-lbl", + "fill": "$--foreground", + "content": "Private", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ghv03-opt-pub", + "name": "PublicOption", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 6, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-opt-pub-icon", + "fill": "$--muted-foreground", + "content": "Globe", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ghv03-opt-pub-lbl", + "fill": "$--muted-foreground", + "content": "Public", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghv03-path-field", + "name": "LocalPathField", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "text", + "id": "ghv03-path-lbl", + "fill": "$--foreground", + "content": "Clone to:", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ghv03-path-input", + "name": "pathInput", + "width": "fill_container", + "height": 36, + "fill": "$--input", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 0, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ghv03-path-val", + "fill": "$--foreground", + "content": "~/Vaults/my-vault", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ghv03-footer", + "name": "Footer", + "width": "fill_container", + "height": 56, + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 24 + ], + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ghv03-btns", + "name": "buttons", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ghv03-cancel", + "name": "cancelBtn", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "padding": [ + 6, + 16 + ], + "children": [ + { + "type": "text", + "id": "ghv03-cancel-lbl", + "fill": "$--foreground", + "content": "Cancel", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ghv03-create-btn", + "name": "createBtn", + "fill": "$--primary", + "cornerRadius": 6, + "padding": [ + 6, + 16 + ], + "children": [ + { + "type": "text", + "id": "ghv03-create-lbl", + "fill": "#FFFFFF", + "content": "Create & Clone", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dp30", + "x": 1830, + "y": 1894, + "name": "NoteStatus — State Transitions", + "width": 960, + "fill": "$--card", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "dp30t", + "fill": "$--muted-foreground", + "content": "State Transition Flow", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "dp31", + "name": "Flow", + "width": "fill_container", + "gap": 16, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "dp31a", + "name": "Create", + "fill": "$--accent-green", + "cornerRadius": 8, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "dp31at", + "fill": "#ffffff", + "content": "Create Note → Green Dot", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "dp31arr1", + "fill": "$--muted-foreground", + "content": "→", + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "dp31b", + "name": "Save", + "fill": "$--muted", + "cornerRadius": 8, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "dp31bt", + "fill": "$--foreground", + "content": "Cmd+S → Dot Removed", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "dp31arr2", + "fill": "$--muted-foreground", + "content": "→", + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "dp31c", + "name": "Edit+Save", + "fill": "$--accent-orange", + "cornerRadius": 8, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "dp31ct", + "fill": "#ffffff", + "content": "Edit Existing → Orange Dot", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "dp31arr3", + "fill": "$--muted-foreground", + "content": "→", + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "700" + }, + { + "type": "frame", + "id": "dp31d", + "name": "Commit", + "fill": "$--muted", + "cornerRadius": 8, + "padding": [ + 12, + 20 + ], + "children": [ + { + "type": "text", + "id": "dp31dt", + "fill": "$--foreground", + "content": "Git Commit → Dot Removed", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "dp20", + "x": 628, + "y": 1056, + "name": "NoteStatus — BreadcrumbBar (N vs M badge)", + "width": 600, + "fill": "$--background", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "dp20t", + "fill": "$--muted-foreground", + "content": "BreadcrumbBar — Status Badge", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "dp21", + "name": "Breadcrumb — New Note", + "width": "fill_container", + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dp21type", + "fill": "$--muted-foreground", + "content": "Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dp21sep", + "fill": "$--muted-foreground", + "content": "/", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dp21title", + "fill": "$--foreground", + "content": "Untitled Note", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "dp21badge", + "name": "New Badge", + "fill": "$--accent-green", + "cornerRadius": 3, + "padding": [ + 1, + 5 + ], + "children": [ + { + "type": "text", + "id": "dp21bl", + "fill": "#ffffff", + "content": "N", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "dp22", + "name": "Breadcrumb — Modified Note", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "top": 1 + }, + "fill": "$--border" + }, + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dp22type", + "fill": "$--muted-foreground", + "content": "Project", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dp22sep", + "fill": "$--muted-foreground", + "content": "/", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "dp22title", + "fill": "$--foreground", + "content": "Build Laputa App", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "dp22badge", + "name": "Modified Badge", + "fill": "$--accent-yellow", + "cornerRadius": 3, + "padding": [ + 1, + 5 + ], + "children": [ + { + "type": "text", + "id": "dp22bl", + "fill": "#ffffff", + "content": "M", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "mOf4J", + "x": 2310, + "y": 4410, "name": "Color Palette — shadcn/ui Theme (Light)", "theme": { "Mode": "Light" @@ -3904,8 +5003,8 @@ { "type": "frame", "id": "HZonq", - "x": 0, - "y": 700, + "x": 2355, + "y": 5511, "name": "Typography & Spacing Specs (Light)", "theme": { "Mode": "Light" @@ -4734,8 +5833,8 @@ { "type": "frame", "id": "trSB1", - "x": 0, - "y": 11620, + "x": 1600, + "y": 3385, "name": "Trash — Sidebar Filter", "theme": { "Mode": "Light" @@ -4745,7 +5844,6 @@ "height": 400, "fill": "$--sidebar", "layout": "vertical", - "gap": 0, "padding": [ 8, 6 @@ -4948,11 +6046,303 @@ } ] }, + { + "type": "frame", + "id": "vc200", + "x": -100, + "y": 2189, + "name": "Changes — real-time update (note disappears after save)", + "clip": true, + "width": 800, + "height": 300, + "fill": "$--background", + "gap": 40, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "vc201", + "name": "Before: 3 pending", + "width": 340, + "height": "fill_container", + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "vc202", + "name": "header", + "width": "fill_container", + "height": 36, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vc203", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc204", + "name": "item1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vc205", + "fill": "$--accent-orange", + "width": 6, + "height": 6 + }, + { + "type": "text", + "id": "vc206", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc207", + "name": "item2-highlight", + "width": "fill_container", + "fill": "#F5750010", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vc208", + "fill": "$--accent-orange", + "width": 6, + "height": 6 + }, + { + "type": "text", + "id": "vc209", + "fill": "$--accent-orange", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc210", + "name": "item3", + "width": "fill_container", + "gap": 6, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vc211", + "fill": "$--accent-orange", + "width": 6, + "height": 6 + }, + { + "type": "text", + "id": "vc212", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "vc220", + "name": "After: 2 pending (note committed)", + "width": 340, + "height": "fill_container", + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "vc221", + "name": "header", + "width": "fill_container", + "height": 36, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vc222", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc223", + "name": "item1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 6, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vc224", + "fill": "$--accent-orange", + "width": 6, + "height": 6 + }, + { + "type": "text", + "id": "vc225", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc226", + "name": "item2", + "width": "fill_container", + "gap": 6, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "vc227", + "fill": "$--accent-orange", + "width": 6, + "height": 6 + }, + { + "type": "text", + "id": "vc228", + "fill": "$--foreground", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "vc229", + "name": "removedNote", + "width": "fill_container", + "padding": 12, + "children": [ + { + "type": "text", + "id": "vc230", + "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "fontStyle": "italic" + } + ] + } + ] + } + ] + }, { "type": "frame", "id": "trNL1", - "x": 360, - "y": 11620, + "x": 1600, + "y": 3815, "name": "Trash — Note List View", "theme": { "Mode": "Light" @@ -4962,7 +6352,6 @@ "height": 360, "fill": "$--card", "layout": "vertical", - "gap": 0, "children": [ { "type": "frame", @@ -4970,12 +6359,6 @@ "name": "header", "width": "fill_container", "height": 45, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { @@ -4983,6 +6366,12 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -5000,12 +6389,6 @@ "id": "trN1", "name": "trashedNote1", "width": "fill_container", - "layout": "vertical", - "gap": 2, - "padding": [ - 14, - 16 - ], "stroke": { "align": "inside", "thickness": { @@ -5013,6 +6396,12 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, + "padding": [ + 14, + 16 + ], "children": [ { "type": "frame", @@ -5062,8 +6451,7 @@ "fill": "$--muted-foreground", "content": "Some draft content that is no longer needed...", "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "400" + "fontSize": 12 }, { "type": "text", @@ -5071,8 +6459,7 @@ "fill": "$--muted-foreground", "content": "5d ago", "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "400" + "fontSize": 10 } ] }, @@ -5081,12 +6468,6 @@ "id": "trN2", "name": "trashedNote2Warning", "width": "fill_container", - "layout": "vertical", - "gap": 2, - "padding": [ - 14, - 16 - ], "fill": "#ef44440a", "stroke": { "align": "inside", @@ -5095,6 +6476,12 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, + "padding": [ + 14, + 16 + ], "children": [ { "type": "frame", @@ -5144,8 +6531,7 @@ "fill": "$--muted-foreground", "content": "Old API documentation that was replaced...", "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "400" + "fontSize": 12 }, { "type": "text", @@ -5163,8 +6549,8 @@ { "type": "frame", "id": "trRI1", - "x": 800, - "y": 11620, + "x": 1970, + "y": 3385, "name": "Trash — Relationship Indicator", "theme": { "Mode": "Light" @@ -5175,10 +6561,7 @@ "fill": "$--background", "layout": "vertical", "gap": 8, - "padding": [ - 16, - 16 - ], + "padding": 16, "children": [ { "type": "text", @@ -5197,13 +6580,13 @@ "width": "fill_container", "fill": "$--accent-blue-light", "cornerRadius": 6, + "gap": 6, "padding": [ 6, 10 ], - "gap": 6, - "alignItems": "center", "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -5230,17 +6613,17 @@ "type": "frame", "id": "trRT", "name": "trashedRef", + "opacity": 0.7, "width": "fill_container", "fill": "$--muted", "cornerRadius": 6, + "gap": 6, "padding": [ 6, 10 ], - "gap": 6, - "alignItems": "center", "justifyContent": "space_between", - "opacity": 0.7, + "alignItems": "center", "children": [ { "type": "frame", @@ -5273,8 +6656,7 @@ "fill": "$--muted-foreground", "content": "(trashed)", "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "400" + "fontSize": 10 } ] }, @@ -5294,17 +6676,17 @@ "type": "frame", "id": "trRA", "name": "archivedRef", + "opacity": 0.7, "width": "fill_container", "fill": "$--muted", "cornerRadius": 6, + "gap": 6, "padding": [ 6, 10 ], - "gap": 6, - "alignItems": "center", "justifyContent": "space_between", - "opacity": 0.7, + "alignItems": "center", "children": [ { "type": "frame", @@ -5327,8 +6709,7 @@ "fill": "$--muted-foreground", "content": "(archived)", "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "400" + "fontSize": 10 } ] }, @@ -5349,8 +6730,8 @@ { "type": "frame", "id": "trW30", - "x": 1200, - "y": 11620, + "x": 1970, + "y": 3615, "name": "Trash — 30-Day Auto-Delete Warning", "theme": { "Mode": "Light" @@ -5361,10 +6742,7 @@ "fill": "$--background", "layout": "vertical", "gap": 8, - "padding": [ - 16, - 16 - ], + "padding": 16, "children": [ { "type": "text", @@ -5382,17 +6760,17 @@ "width": "fill_container", "fill": "#ef44440f", "cornerRadius": 8, - "padding": [ - 10, - 12 - ], - "gap": 8, - "alignItems": "center", "stroke": { "align": "inside", "thickness": 1, "fill": "#ef444430" }, + "gap": 8, + "padding": [ + 10, + 12 + ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -5425,8 +6803,7 @@ "fill": "$--muted-foreground", "content": "1 note is past the 30-day retention period", "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "400" + "fontSize": 11 } ] } @@ -5434,860 +6811,55 @@ } ] }, - { - "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 - ] - } - ], - "x": 0, - "y": 12520 - }, - { - "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 - ] - } - ], - "x": 900, - "y": 12520 - }, - { - "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 - ] - } - ], - "x": 1800, - "y": 12520 - }, { "type": "frame", "id": "dsg01a", + "x": 68, + "y": 4661, "name": "Sidebar — Drag Handles Visible", - "x": 0, - "y": 10440, + "theme": { + "Mode": "Light" + }, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", - "padding": [ - 16 - ], - "theme": { - "Mode": "Light" - }, "children": [ { "type": "text", "id": "dsg01b", "name": "frame1Title", + "fill": "$--foreground", "content": "Drag handles appear on section headers", "fontFamily": "Inter", "fontSize": 14, - "fontWeight": "600", - "fill": "$--foreground" + "fontWeight": "600" }, { "type": "text", "id": "dsg01c", "name": "frame1Desc", + "fill": "$--muted-foreground", "content": "Grip icon shown left of section icon. Cursor changes to grab on hover.", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "normal", - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "dsg01d", + "width": "fit_content(0)", "height": 12 }, { "type": "frame", "id": "dsg01e", "name": "sidebarDefault", + "clip": true, "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", - "clip": true, "children": [ { "type": "frame", @@ -6307,11 +6879,11 @@ "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -6340,11 +6912,11 @@ "name": "favRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -6427,12 +6999,12 @@ "type": "icon_font", "id": "dsg000", "name": "projDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6474,6 +7046,7 @@ "id": "dsg006", "name": "projItem0", "width": "fill_container", + "fill": "$--accent-red-light", "cornerRadius": 6, "padding": [ 6, @@ -6482,7 +7055,6 @@ 28 ], "alignItems": "center", - "fill": "$--accent-red-light", "children": [ { "type": "text", @@ -6572,12 +7144,12 @@ "type": "icon_font", "id": "dsg00b", "name": "respDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6664,12 +7236,12 @@ "type": "icon_font", "id": "dsg00i", "name": "procDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6756,12 +7328,12 @@ "type": "icon_font", "id": "dsg00p", "name": "peopleDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6848,12 +7420,12 @@ "type": "icon_font", "id": "dsg00w", "name": "eventsDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6940,12 +7512,12 @@ "type": "icon_font", "id": "dsg013", "name": "topicsDrag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -6993,54 +7565,52 @@ { "type": "frame", "id": "dsg02w", + "x": 458, + "y": 4661, "name": "Sidebar — Section Being Dragged", - "x": 430, - "y": 10440, + "theme": { + "Mode": "Light" + }, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", - "padding": [ - 16 - ], - "theme": { - "Mode": "Light" - }, "children": [ { "type": "text", "id": "dsg02x", "name": "frame2Title", + "fill": "$--foreground", "content": "Dragging \"People\" above \"Responsibilities\"", "fontFamily": "Inter", "fontSize": 14, - "fontWeight": "600", - "fill": "$--foreground" + "fontWeight": "600" }, { "type": "text", "id": "dsg02y", "name": "frame2Desc", + "fill": "$--muted-foreground", "content": "Blue drop indicator line shows insertion point. Dragged section floats with blue border.", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "normal", - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "dsg02z", + "width": "fit_content(0)", "height": 12 }, { "type": "frame", "id": "dsg030", "name": "sidebarDragging", + "clip": true, "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", - "clip": true, "children": [ { "type": "frame", @@ -7060,11 +7630,11 @@ "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -7093,11 +7663,11 @@ "name": "favRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -7180,12 +7750,12 @@ "type": "icon_font", "id": "dsg01n", "name": "proj2Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7227,6 +7797,7 @@ "id": "dsg01t", "name": "proj2Item0", "width": "fill_container", + "fill": "$--accent-red-light", "cornerRadius": 6, "padding": [ 6, @@ -7235,7 +7806,6 @@ 28 ], "alignItems": "center", - "fill": "$--accent-red-light", "children": [ { "type": "text", @@ -7334,12 +7904,12 @@ "type": "icon_font", "id": "dsg01z", "name": "resp2Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7426,12 +7996,12 @@ "type": "icon_font", "id": "dsg026", "name": "proc2Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7518,12 +8088,12 @@ "type": "icon_font", "id": "dsg02d", "name": "events2Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7610,12 +8180,12 @@ "type": "icon_font", "id": "dsg02k", "name": "topics2Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7662,20 +8232,15 @@ "type": "frame", "id": "dsg02r", "name": "draggedSection", - "x": 8, - "y": 160, + "opacity": 0.9, "width": 234, "fill": "$--sidebar", "cornerRadius": 6, "stroke": { "align": "outside", "thickness": 1, - "fill": { - "type": "color", - "color": "$--accent-blue" - } + "fill": "$--accent-blue" }, - "opacity": 0.9, "layout": "vertical", "padding": [ 4, @@ -7698,12 +8263,12 @@ { "type": "icon_font", "id": "dsg02t", + "opacity": 0.8, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--accent-blue", - "opacity": 0.8 + "fill": "$--accent-blue" }, { "type": "icon_font", @@ -7733,54 +8298,52 @@ { "type": "frame", "id": "dsg04j", + "x": 922, + "y": 4661, "name": "Sidebar — After Reorder (People Moved Up)", - "x": 860, - "y": 10440, + "theme": { + "Mode": "Light" + }, "width": 330, "height": 680, "fill": "$--background", "layout": "vertical", - "padding": [ - 16 - ], - "theme": { - "Mode": "Light" - }, "children": [ { "type": "text", "id": "dsg04k", "name": "frame3Title", + "fill": "$--foreground", "content": "After drop — People now second section", "fontFamily": "Inter", "fontSize": 14, - "fontWeight": "600", - "fill": "$--foreground" + "fontWeight": "600" }, { "type": "text", "id": "dsg04l", "name": "frame3Desc", + "fill": "$--muted-foreground", "content": "Order persisted as \"order\" property in each Type document frontmatter (e.g. order: 2).", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "normal", - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "dsg04m", + "width": "fit_content(0)", "height": 12 }, { "type": "frame", "id": "dsg04n", "name": "sidebarReordered", + "clip": true, "width": 250, "height": 600, "fill": "$--sidebar", "layout": "vertical", - "clip": true, "children": [ { "type": "frame", @@ -7800,11 +8363,11 @@ "name": "allNotesRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -7833,11 +8396,11 @@ "name": "favRow", "width": "fill_container", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 16 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -7920,12 +8483,12 @@ "type": "icon_font", "id": "dsg039", "name": "proj3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -7967,6 +8530,7 @@ "id": "dsg03f", "name": "proj3Item0", "width": "fill_container", + "fill": "$--accent-red-light", "cornerRadius": 6, "padding": [ 6, @@ -7975,7 +8539,6 @@ 28 ], "alignItems": "center", - "fill": "$--accent-red-light", "children": [ { "type": "text", @@ -8065,12 +8628,12 @@ "type": "icon_font", "id": "dsg03k", "name": "people3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -8157,12 +8720,12 @@ "type": "icon_font", "id": "dsg03r", "name": "resp3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -8249,12 +8812,12 @@ "type": "icon_font", "id": "dsg03y", "name": "proc3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -8341,12 +8904,12 @@ "type": "icon_font", "id": "dsg045", "name": "events3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -8433,12 +8996,12 @@ "type": "icon_font", "id": "dsg04c", "name": "topics3Drag", + "opacity": 0.5, "width": 14, "height": 14, "iconFontName": "grip-vertical", "iconFontFamily": "lucide", - "fill": "$--muted-foreground", - "opacity": 0.5 + "fill": "$--muted-foreground" }, { "type": "icon_font", @@ -8486,8 +9049,8 @@ { "type": "frame", "id": "csB01", - "x": 1290, - "y": 10440, + "x": 0, + "y": 7140, "name": "Sections Header — Before (old design)", "theme": { "Mode": "Light" @@ -8544,7 +9107,8 @@ "fill": "$--muted-foreground", "content": "Customize sections", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] }, @@ -8608,8 +9172,8 @@ { "type": "frame", "id": "csA01", - "x": 1670, - "y": 10440, + "x": 340, + "y": 7140, "name": "Sections Header — After (new design)", "theme": { "Mode": "Light" @@ -8731,8 +9295,8 @@ { "type": "frame", "id": "archBtnNorm", - "x": 0, - "y": 14540, + "x": 68, + "y": 4387, "name": "Archive Notes — Breadcrumb button (normal note)", "theme": { "Mode": "Light" @@ -8861,18 +9425,15 @@ "type": "frame", "id": "anArchiveBtn", "name": "archiveButton", - "gap": 4, - "alignItems": "center", + "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" }, - "cornerRadius": 4, - "padding": [ - 2, - 2 - ], + "gap": 4, + "padding": 2, + "alignItems": "center", "children": [ { "type": "icon_font", @@ -8910,8 +9471,8 @@ { "type": "frame", "id": "archBtnArc", - "x": 900, - "y": 14540, + "x": 68, + "y": 4520, "name": "Archive Notes — Breadcrumb button (archived note, shows Unarchive)", "theme": { "Mode": "Light" @@ -9065,18 +9626,15 @@ "type": "frame", "id": "auUnarchiveBtn", "name": "unarchiveButton", - "gap": 4, - "alignItems": "center", + "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" }, - "cornerRadius": 4, - "padding": [ - 2, - 2 - ], + "gap": 4, + "padding": 2, + "alignItems": "center", "children": [ { "type": "icon_font", @@ -9115,15 +9673,14 @@ "type": "frame", "id": "ghCL1", "x": 0, - "y": 24605, + "y": 7320, "name": "Git History — Commit List", "width": 300, - "height": "fit_content(600)", "fill": "$--background", "cornerRadius": "$--radius-lg", "stroke": { - "fill": "$--border", - "thickness": 1 + "thickness": 1, + "fill": "$--border" }, "layout": "vertical", "gap": 16, @@ -9132,8 +9689,9 @@ { "type": "text", "id": "ghCL1h", - "content": "HISTORY", "fill": "$--muted-foreground", + "content": "HISTORY", + "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 1.2 @@ -9141,8 +9699,14 @@ { "type": "frame", "id": "ghC1", - "layout": "vertical", "width": "fill_container", + "stroke": { + "thickness": { + "left": 2 + }, + "fill": "$--border" + }, + "layout": "vertical", "gap": 2, "padding": [ 0, @@ -9150,17 +9714,10 @@ 0, 10 ], - "stroke": { - "fill": "$--border", - "thickness": { - "left": 2 - } - }, "children": [ { "type": "frame", "id": "ghC1r", - "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", @@ -9168,44 +9725,56 @@ { "type": "text", "id": "ghC1h", - "content": "a1b2c3d", "fill": "$--primary", + "content": "a1b2c3d", + "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "500", - "underline": true + "fontWeight": "500" }, { "type": "text", "id": "ghC1d", - "content": "2d ago", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "2d ago", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] }, { "type": "text", "id": "ghC1m", - "content": "Update grow-newsletter with latest changes", "fill": "$--secondary-foreground", - "fontSize": 12, "textGrowth": "fixed-width", - "width": "fill_container" + "width": "fill_container", + "content": "Update grow-newsletter with latest changes", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "text", "id": "ghC1a", - "content": "Luca Rossi", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "Luca Rossi", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] }, { "type": "frame", "id": "ghC2", - "layout": "vertical", "width": "fill_container", + "stroke": { + "thickness": { + "left": 2 + }, + "fill": "$--border" + }, + "layout": "vertical", "gap": 2, "padding": [ 0, @@ -9213,17 +9782,10 @@ 0, 10 ], - "stroke": { - "fill": "$--border", - "thickness": { - "left": 2 - } - }, "children": [ { "type": "frame", "id": "ghC2r", - "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", @@ -9231,44 +9793,56 @@ { "type": "text", "id": "ghC2h", - "content": "e4f5g6h", "fill": "$--primary", + "content": "e4f5g6h", + "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "500", - "underline": true + "fontWeight": "500" }, { "type": "text", "id": "ghC2d", - "content": "5d ago", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "5d ago", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] }, { "type": "text", "id": "ghC2m", - "content": "Add new section to grow-newsletter", "fill": "$--secondary-foreground", - "fontSize": 12, "textGrowth": "fixed-width", - "width": "fill_container" + "width": "fill_container", + "content": "Add new section to grow-newsletter", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "text", "id": "ghC2a", - "content": "Luca Rossi", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "Luca Rossi", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] }, { "type": "frame", "id": "ghC3", - "layout": "vertical", "width": "fill_container", + "stroke": { + "thickness": { + "left": 2 + }, + "fill": "$--border" + }, + "layout": "vertical", "gap": 2, "padding": [ 0, @@ -9276,17 +9850,10 @@ 0, 10 ], - "stroke": { - "fill": "$--border", - "thickness": { - "left": 2 - } - }, "children": [ { "type": "frame", "id": "ghC3r", - "layout": "horizontal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", @@ -9294,36 +9861,42 @@ { "type": "text", "id": "ghC3h", - "content": "i7j8k9l", "fill": "$--primary", + "content": "i7j8k9l", + "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "500", - "underline": true + "fontWeight": "500" }, { "type": "text", "id": "ghC3d", - "content": "12d ago", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "12d ago", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] }, { "type": "text", "id": "ghC3m", - "content": "Create grow-newsletter", "fill": "$--secondary-foreground", - "fontSize": 12, "textGrowth": "fixed-width", - "width": "fill_container" + "width": "fill_container", + "content": "Create grow-newsletter", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "text", "id": "ghC3a", - "content": "Luca Rossi", "fill": "$--muted-foreground", - "fontSize": 10 + "content": "Luca Rossi", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" } ] } @@ -9332,47 +9905,45 @@ { "type": "frame", "id": "ghDO1", - "x": 400, - "y": 24605, + "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 + "thickness": 1, + "fill": "$--border" }, "layout": "vertical", - "gap": 0, - "padding": 0, "children": [ { "type": "frame", "id": "ghDObc", - "layout": "horizontal", "width": "fill_container", "height": 36, + "fill": "$--muted", + "stroke": { + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "gap": 8, "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 + "content": "responsibility / grow-newsletter.md", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "frame", @@ -9383,20 +9954,20 @@ { "type": "frame", "id": "ghDObcB", - "layout": "horizontal", + "fill": "$--primary", + "cornerRadius": "$--radius-sm", "padding": [ 2, 8 ], - "cornerRadius": "$--radius-sm", - "fill": "$--primary", "alignItems": "center", "children": [ { "type": "text", "id": "ghDObcBt", - "content": "Diff: a1b2c3d", "fill": "$--primary-foreground", + "content": "Diff: a1b2c3d", + "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } @@ -9407,39 +9978,39 @@ { "type": "frame", "id": "ghDOb", - "layout": "vertical", "width": "fill_container", - "padding": 0, - "gap": 0, + "layout": "vertical", "children": [ { "type": "frame", "id": "ghDOl1", - "layout": "horizontal", "width": "fill_container", "height": 22, + "fill": "$--muted", "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" + "content": "1", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", "id": "ghDOl1t", - "content": "diff --git a/grow-newsletter.md b/grow-newsletter.md", "fill": "$--muted-foreground", + "content": "diff --git a/grow-newsletter.md b/grow-newsletter.md", + "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } @@ -9448,32 +10019,35 @@ { "type": "frame", "id": "ghDOl2", - "layout": "horizontal", "width": "fill_container", "height": 22, + "fill": "#2196F30D", "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" + "content": "2", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", "id": "ghDOl2t", - "content": "@@ -5,3 +5,5 @@", "fill": "$--primary", + "content": "@@ -5,3 +5,5 @@", + "fontFamily": "Inter", "fontSize": 11, + "fontWeight": "normal", "fontStyle": "italic" } ] @@ -9481,7 +10055,6 @@ { "type": "frame", "id": "ghDOl3", - "layout": "horizontal", "width": "fill_container", "height": 22, "padding": [ @@ -9493,912 +10066,130 @@ { "type": "text", "id": "ghDOl3n", - "content": "3", "fill": "$--muted-foreground", - "fontSize": 11, "textGrowth": "fixed-width", "width": 30, - "textAlign": "right" + "content": "3", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", "id": "ghDOl3t", - "content": " # Grow Newsletter", "fill": "$--secondary-foreground", - "fontSize": 11 + "content": " # Grow Newsletter", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" } ] }, { "type": "frame", "id": "ghDOl4", - "layout": "horizontal", "width": "fill_container", "height": 22, + "fill": "#f4433614", "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" + "content": "4", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", "id": "ghDOl4t", - "content": "-Old paragraph from before a1b2c3d.", "fill": "#f44336", - "fontSize": 11 + "content": "-Old paragraph from before a1b2c3d.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" } ] }, { "type": "frame", "id": "ghDOl5", - "layout": "horizontal", "width": "fill_container", "height": 22, + "fill": "#4caf5014", "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" + "content": "5", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "type": "text", "id": "ghDOl5t", - "content": "+Updated paragraph at commit a1b2c3d.", "fill": "#4caf50", - "fontSize": 11 + "content": "+Updated paragraph at commit a1b2c3d.", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" } ] }, { "type": "frame", "id": "ghDOl6", - "layout": "horizontal", "width": "fill_container", "height": 22, + "fill": "#4caf5014", "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" + "content": "6", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" }, { "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", + "content": "+New content added in this commit.", "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, + "fontSize": 11, "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 - ] - } - ], - "x": 0, - "y": 13140 - }, - { - "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 - ] - } - ], - "x": 900, - "y": 13140 - }, - { - "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 - ] - } - ], - "x": 1800, - "y": 13140 - }, - { - "type": "frame", - "id": "mb001", - "x": 0, - "y": 7600, - "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": 500, - "y": 7600, - "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" } ] } @@ -10407,8 +10198,8 @@ { "type": "frame", "id": "iogBH", - "x": 0, - "y": 9340, + "x": 5500, + "y": 100, "name": "Settings Panel — Modal", "width": 520, "fill": "$--background", @@ -10725,7 +10516,7 @@ "type": "frame", "id": "srtDD", "x": 0, - "y": 13760, + "y": 284, "name": "Sort Dropdown — Direction Arrows", "clip": true, "width": 260, @@ -10759,12 +10550,11 @@ "type": "text", "id": "srtHL", "name": "headerLabel", - "content": "Sort by", - "fontSize": 11, - "fontWeight": 600, "fill": "$--muted-foreground", + "content": "Sort by", "fontFamily": "$--font-primary", - "textTransform": "uppercase", + "fontSize": 11, + "fontWeight": "normal", "letterSpacing": 0.5 } ] @@ -10775,23 +10565,22 @@ "name": "row-modified", "width": "fill_container", "height": 36, + "fill": "$--muted", "padding": [ 0, 12 ], "alignItems": "center", - "fill": "$--muted", "children": [ { "type": "text", "id": "srtT1", "name": "label-modified", - "content": "Modified", - "fontSize": 13, - "fontWeight": 500, "fill": "$--popover-foreground", + "content": "Modified", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "frame", @@ -10804,19 +10593,21 @@ "type": "text", "id": "srtU1", "name": "arrow-up-active", + "fill": "$--accent-blue", "content": "↑", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 700, - "fill": "$--accent-blue" + "fontWeight": "normal" }, { "type": "text", "id": "srtD1", "name": "arrow-down", + "fill": "$--muted-foreground", "content": "↓", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -10838,12 +10629,11 @@ "type": "text", "id": "srtT2", "name": "label-title", - "content": "Title", - "fontSize": 13, - "fontWeight": 400, "fill": "$--popover-foreground", + "content": "Title", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "frame", @@ -10856,19 +10646,21 @@ "type": "text", "id": "srtU2", "name": "arrow-up", + "fill": "$--muted-foreground", "content": "↑", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "srtD2", "name": "arrow-down", + "fill": "$--muted-foreground", "content": "↓", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -10890,12 +10682,11 @@ "type": "text", "id": "srtT3", "name": "label-created", - "content": "Created", - "fontSize": 13, - "fontWeight": 400, "fill": "$--popover-foreground", + "content": "Created", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "frame", @@ -10908,19 +10699,21 @@ "type": "text", "id": "srtU3", "name": "arrow-up", + "fill": "$--muted-foreground", "content": "↑", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "srtD3", "name": "arrow-down", + "fill": "$--muted-foreground", "content": "↓", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -10942,12 +10735,11 @@ "type": "text", "id": "srtT4", "name": "label-type", - "content": "Type", - "fontSize": 13, - "fontWeight": 400, "fill": "$--popover-foreground", + "content": "Type", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "frame", @@ -10960,19 +10752,21 @@ "type": "text", "id": "srtU4", "name": "arrow-up", + "fill": "$--muted-foreground", "content": "↑", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "srtD4", "name": "arrow-down", + "fill": "$--muted-foreground", "content": "↓", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11000,10 +10794,11 @@ "type": "text", "id": "srtAT", "name": "annotation-text", - "content": "Click ↑↓ to toggle direction. Blue = active.", - "fontSize": 11, "fill": "$--muted-foreground", - "fontFamily": "$--font-primary" + "content": "Click ↑↓ to toggle direction. Blue = active.", + "fontFamily": "$--font-primary", + "fontSize": 11, + "fontWeight": "normal" } ] } @@ -11012,8 +10807,8 @@ { "type": "frame", "id": "srtBN", - "x": 360, - "y": 13760, + "x": 0, + "y": -280, "name": "Sort Button — With Direction Indicator", "clip": true, "width": 400, @@ -11026,11 +10821,8 @@ "fill": "$--border" }, "layout": "vertical", - "padding": [ - 16, - 16 - ], "gap": 16, + "padding": 16, "children": [ { "type": "frame", @@ -11044,43 +10836,44 @@ "type": "text", "id": "srtBC", "name": "noteCount", - "content": "42 notes", - "fontSize": 12, "fill": "$--muted-foreground", + "content": "42 notes", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 12, + "fontWeight": "normal" }, { "type": "frame", "id": "srtBB", "name": "sortButton", + "fill": "$--muted", + "cornerRadius": "$--radius-sm", + "gap": 4, "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" + "content": "Modified", + "fontFamily": "$--font-primary", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "text", "id": "srtBA", "name": "directionArrow", + "fill": "$--accent-blue", "content": "↓", + "fontFamily": "Inter", "fontSize": 12, - "fontWeight": 600, - "fill": "$--accent-blue" + "fontWeight": "normal" } ] } @@ -11118,20 +10911,21 @@ "type": "text", "id": "srtNT1", "name": "noteTitle1", - "content": "Meeting Notes — Feb 22", - "fontSize": 13, "fill": "$--foreground", + "content": "Meeting Notes — Feb 22", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "srtND1", "name": "noteDate1", - "content": "2 min ago", - "fontSize": 11, "fill": "$--muted-foreground", - "fontFamily": "$--font-primary" + "content": "2 min ago", + "fontFamily": "$--font-primary", + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -11151,20 +10945,21 @@ "type": "text", "id": "srtNT2", "name": "noteTitle2", - "content": "Project Roadmap", - "fontSize": 13, "fill": "$--foreground", + "content": "Project Roadmap", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "srtND2", "name": "noteDate2", - "content": "1 hr ago", - "fontSize": 11, "fill": "$--muted-foreground", - "fontFamily": "$--font-primary" + "content": "1 hr ago", + "fontFamily": "$--font-primary", + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -11184,20 +10979,21 @@ "type": "text", "id": "srtNT3", "name": "noteTitle3", - "content": "Weekly Review", - "fontSize": 13, "fill": "$--foreground", + "content": "Weekly Review", "fontFamily": "$--font-primary", - "width": "fill_container" + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "srtND3", "name": "noteDate3", - "content": "Yesterday", - "fontSize": 11, "fill": "$--muted-foreground", - "fontFamily": "$--font-primary" + "content": "Yesterday", + "fontFamily": "$--font-primary", + "fontSize": 11, + "fontWeight": "normal" } ] } @@ -11217,10 +11013,11 @@ "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" + "content": "Sort button shows property + direction arrow. Click to open dropdown.", + "fontFamily": "$--font-primary", + "fontSize": 11, + "fontWeight": "normal" } ] } @@ -11229,20 +11026,20 @@ { "type": "frame", "id": "ghv01", - "x": 0, - "y": 8300, + "x": -1399, + "y": -80, "name": "GitHub Vault — Modal empty state", "clip": true, "width": 560, "height": 480, "fill": "$--background", "cornerRadius": 12, - "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "layout": "vertical", "children": [ { "type": "frame", @@ -11251,12 +11048,6 @@ "width": "fill_container", "height": 56, "fill": "$--background", - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { @@ -11264,15 +11055,21 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-title", "name": "title", + "fill": "$--foreground", "content": "Connect GitHub Repo", + "fontFamily": "Inter", "fontSize": 16, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", @@ -11281,15 +11078,17 @@ "width": 24, "height": 24, "cornerRadius": 4, - "alignItems": "center", "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-x", + "fill": "$--muted-foreground", "content": "X", + "fontFamily": "Inter", "fontSize": 14, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11302,12 +11101,6 @@ "width": "fill_container", "height": 44, "fill": "$--background", - "padding": [ - 0, - 24 - ], - "gap": 0, - "alignItems": "end", "stroke": { "align": "inside", "thickness": { @@ -11315,16 +11108,16 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "end", "children": [ { "type": "frame", "id": "ghv01-tab-clone", "name": "Tab: Clone Existing", - "padding": [ - 8, - 16 - ], - "alignItems": "center", "stroke": { "align": "inside", "thickness": { @@ -11332,14 +11125,20 @@ }, "fill": "$--accent-blue" }, + "padding": [ + 8, + 16 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-tab-clone-lbl", + "fill": "$--foreground", "content": "Clone Existing", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -11356,10 +11155,11 @@ { "type": "text", "id": "ghv01-tab-create-lbl", + "fill": "$--muted-foreground", "content": "Create New", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11372,13 +11172,13 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", + "gap": 16, "padding": [ 32, 24 ], - "gap": 16, - "alignItems": "center", "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "frame", @@ -11386,38 +11186,41 @@ "name": "githubIcon", "width": 48, "height": 48, - "cornerRadius": 24, "fill": "$--accent", - "alignItems": "center", + "cornerRadius": 24, "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-gh", + "fill": "$--muted-foreground", "content": "GH", + "fontFamily": "Inter", "fontSize": 20, - "fontWeight": 600, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, { "type": "text", "id": "ghv01-heading", - "content": "Clone an existing GitHub repository", - "fontSize": 15, - "fontWeight": 600, "fill": "$--foreground", - "textAlign": "center" + "content": "Clone an existing GitHub repository", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "ghv01-desc", - "content": "Search your repos or paste a URL to clone a GitHub repo as a vault.", - "fontSize": 13, "fill": "$--muted-foreground", + "content": "Search your repos or paste a URL to clone a GitHub repo as a vault.", "textAlign": "center", - "width": 360 + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "frame", @@ -11425,8 +11228,8 @@ "name": "SearchInput", "width": 400, "height": 40, - "cornerRadius": 8, "fill": "$--input", + "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, @@ -11441,9 +11244,11 @@ { "type": "text", "id": "ghv01-placeholder", + "fill": "$--muted-foreground", "content": "Search repos or paste URL...", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11455,12 +11260,6 @@ "name": "Footer", "width": "fill_container", "height": 56, - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { @@ -11468,13 +11267,20 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv01-hint", + "fill": "$--muted-foreground", "content": "Connected as @lucaong", + "fontFamily": "Inter", "fontSize": 11, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "frame", @@ -11487,23 +11293,25 @@ "type": "frame", "id": "ghv01-cancel", "name": "cancelBtn", - "padding": [ - 6, - 16 - ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [ + 6, + 16 + ], "children": [ { "type": "text", "id": "ghv01-cancel-lbl", + "fill": "$--foreground", "content": "Cancel", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -11516,20 +11324,20 @@ { "type": "frame", "id": "ghv02", - "x": 660, - "y": 8300, + "x": 700, + "y": 0, "name": "GitHub Vault — Clone repo list", "clip": true, "width": 560, "height": 540, "fill": "$--background", "cornerRadius": 12, - "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "layout": "vertical", "children": [ { "type": "frame", @@ -11538,12 +11346,6 @@ "width": "fill_container", "height": 56, "fill": "$--background", - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { @@ -11551,14 +11353,20 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-title", + "fill": "$--foreground", "content": "Connect GitHub Repo", + "fontFamily": "Inter", "fontSize": 16, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", @@ -11567,15 +11375,17 @@ "width": 24, "height": 24, "cornerRadius": 4, - "alignItems": "center", "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-x", + "fill": "$--muted-foreground", "content": "X", + "fontFamily": "Inter", "fontSize": 14, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11588,12 +11398,6 @@ "width": "fill_container", "height": 44, "fill": "$--background", - "padding": [ - 0, - 24 - ], - "gap": 0, - "alignItems": "end", "stroke": { "align": "inside", "thickness": { @@ -11601,16 +11405,16 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "end", "children": [ { "type": "frame", "id": "ghv02-tab-clone", "name": "Tab: Clone Existing (active)", - "padding": [ - 8, - 16 - ], - "alignItems": "center", "stroke": { "align": "inside", "thickness": { @@ -11618,14 +11422,20 @@ }, "fill": "$--accent-blue" }, + "padding": [ + 8, + 16 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-tab-clone-lbl", + "fill": "$--foreground", "content": "Clone Existing", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -11642,10 +11452,11 @@ { "type": "text", "id": "ghv02-tab-create-lbl", + "fill": "$--muted-foreground", "content": "Create New", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11658,11 +11469,11 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", + "gap": 12, "padding": [ 16, 24 ], - "gap": 12, "children": [ { "type": "frame", @@ -11670,8 +11481,8 @@ "name": "SearchInput (filled)", "width": "fill_container", "height": 40, - "cornerRadius": 8, "fill": "$--input", + "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1, @@ -11686,9 +11497,11 @@ { "type": "text", "id": "ghv02-search-val", + "fill": "$--foreground", "content": "laputa", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -11707,14 +11520,14 @@ "name": "RepoItem: selected", "width": "fill_container", "height": 56, - "cornerRadius": 6, "fill": "$--accent", + "cornerRadius": 6, + "layout": "vertical", + "gap": 4, "padding": [ 8, 12 ], - "layout": "vertical", - "gap": 4, "justifyContent": "center", "children": [ { @@ -11727,32 +11540,35 @@ { "type": "text", "id": "ghv02-repo1-name", + "fill": "$--foreground", "content": "lucaong/laputa-vault", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "ghv02-repo1-badge", "name": "privateBadge", - "padding": [ - 2, - 6 - ], "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [ + 2, + 6 + ], "children": [ { "type": "text", "id": "ghv02-repo1-priv", + "fill": "$--muted-foreground", "content": "Private", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11761,9 +11577,11 @@ { "type": "text", "id": "ghv02-repo1-desc", + "fill": "$--muted-foreground", "content": "Personal knowledge vault — markdown + YAML frontmatter", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -11774,12 +11592,12 @@ "width": "fill_container", "height": 56, "cornerRadius": 6, + "layout": "vertical", + "gap": 4, "padding": [ 8, 12 ], - "layout": "vertical", - "gap": 4, "justifyContent": "center", "children": [ { @@ -11792,32 +11610,35 @@ { "type": "text", "id": "ghv02-repo2-name", + "fill": "$--foreground", "content": "lucaong/laputa-app", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "ghv02-repo2-badge", "name": "publicBadge", - "padding": [ - 2, - 6 - ], "cornerRadius": 4, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [ + 2, + 6 + ], "children": [ { "type": "text", "id": "ghv02-repo2-pub", + "fill": "$--muted-foreground", "content": "Public", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11826,9 +11647,11 @@ { "type": "text", "id": "ghv02-repo2-desc", + "fill": "$--muted-foreground", "content": "Laputa desktop app — Tauri + React + CodeMirror 6", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -11839,12 +11662,12 @@ "width": "fill_container", "height": 56, "cornerRadius": 6, + "layout": "vertical", + "gap": 4, "padding": [ 8, 12 ], - "layout": "vertical", - "gap": 4, "justifyContent": "center", "children": [ { @@ -11857,19 +11680,22 @@ { "type": "text", "id": "ghv02-repo3-name", + "fill": "$--foreground", "content": "lucaong/dotfiles", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "text", "id": "ghv02-repo3-desc", + "fill": "$--muted-foreground", "content": "My macOS dotfiles and config", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -11886,10 +11712,11 @@ { "type": "text", "id": "ghv02-path-lbl", + "fill": "$--foreground", "content": "Clone to:", + "fontFamily": "Inter", "fontSize": 12, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", @@ -11897,8 +11724,8 @@ "name": "pathInput", "width": "fill_container", "height": 36, - "cornerRadius": 6, "fill": "$--input", + "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, @@ -11913,9 +11740,11 @@ { "type": "text", "id": "ghv02-path-val", + "fill": "$--foreground", "content": "~/Vaults/laputa-vault", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -11929,12 +11758,6 @@ "name": "Footer", "width": "fill_container", "height": 56, - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { @@ -11942,13 +11765,20 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv02-hint", + "fill": "$--muted-foreground", "content": "3 repos found", + "fontFamily": "Inter", "fontSize": 11, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "frame", @@ -11961,23 +11791,25 @@ "type": "frame", "id": "ghv02-cancel", "name": "cancelBtn", - "padding": [ - 6, - 16 - ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [ + 6, + 16 + ], "children": [ { "type": "text", "id": "ghv02-cancel-lbl", + "fill": "$--foreground", "content": "Cancel", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -11985,445 +11817,21 @@ "type": "frame", "id": "ghv02-clone-btn", "name": "cloneBtn", + "fill": "$--primary", + "cornerRadius": 6, "padding": [ 6, 16 ], - "cornerRadius": 6, - "fill": "$--primary", "children": [ { "type": "text", "id": "ghv02-clone-lbl", + "fill": "#FFFFFF", "content": "Clone & Open", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ghv03", - "x": 1320, - "y": 8300, - "name": "GitHub Vault — Create new repo", - "clip": true, - "width": 560, - "height": 440, - "fill": "$--background", - "cornerRadius": 12, - "layout": "vertical", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "children": [ - { - "type": "frame", - "id": "ghv03-hdr", - "name": "Header", - "width": "fill_container", - "height": 56, - "fill": "$--background", - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "text", - "id": "ghv03-title", - "content": "Connect GitHub Repo", - "fontSize": 16, - "fontWeight": 600, - "fill": "$--foreground" - }, - { - "type": "frame", - "id": "ghv03-close", - "name": "closeBtn", - "width": 24, - "height": 24, - "cornerRadius": 4, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "ghv03-x", - "content": "X", - "fontSize": 14, - "fill": "$--muted-foreground" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ghv03-tabs", - "name": "TabBar", - "width": "fill_container", - "height": 44, - "fill": "$--background", - "padding": [ - 0, - 24 - ], - "gap": 0, - "alignItems": "end", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "frame", - "id": "ghv03-tab-clone", - "name": "Tab: Clone Existing", - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ghv03-tab-clone-lbl", - "content": "Clone Existing", - "fontSize": 13, - "fontWeight": 400, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "ghv03-tab-create", - "name": "Tab: Create New (active)", - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 2 - }, - "fill": "$--accent-blue" - }, - "children": [ - { - "type": "text", - "id": "ghv03-tab-create-lbl", - "content": "Create New", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ghv03-body", - "name": "Body: Create Form", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [ - 24, - 24 - ], - "gap": 20, - "children": [ - { - "type": "frame", - "id": "ghv03-name-field", - "name": "RepoNameField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ghv03-name-lbl", - "content": "Repository name", - "fontSize": 12, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "frame", - "id": "ghv03-name-input", - "name": "nameInput", - "width": "fill_container", - "height": 40, - "cornerRadius": 8, - "fill": "$--input", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ghv03-name-val", - "content": "my-vault", - "fontSize": 13, - "fill": "$--foreground" - } - ] - }, - { - "type": "text", - "id": "ghv03-name-hint", - "content": "github.com/lucaong/my-vault", - "fontSize": 11, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "ghv03-vis-field", - "name": "VisibilityToggle", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ghv03-vis-lbl", - "content": "Visibility", - "fontSize": 12, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "frame", - "id": "ghv03-vis-opts", - "name": "options", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ghv03-opt-priv", - "name": "PrivateOption (selected)", - "padding": [ - 6, - 12 - ], - "cornerRadius": 6, - "fill": "$--accent", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--accent-blue" - }, - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ghv03-opt-priv-icon", - "content": "Lock", - "fontSize": 13, - "fill": "$--accent-blue" - }, - { - "type": "text", - "id": "ghv03-opt-priv-lbl", - "content": "Private", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "ghv03-opt-pub", - "name": "PublicOption", - "padding": [ - 6, - 12 - ], - "cornerRadius": 6, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ghv03-opt-pub-icon", - "content": "Globe", - "fontSize": 13, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "ghv03-opt-pub-lbl", - "content": "Public", - "fontSize": 13, - "fill": "$--muted-foreground" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ghv03-path-field", - "name": "LocalPathField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ghv03-path-lbl", - "content": "Clone to:", - "fontSize": 12, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "frame", - "id": "ghv03-path-input", - "name": "pathInput", - "width": "fill_container", - "height": 36, - "cornerRadius": 6, - "fill": "$--input", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "padding": [ - 0, - 10 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ghv03-path-val", - "content": "~/Vaults/my-vault", - "fontSize": 12, - "fill": "$--foreground" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ghv03-footer", - "name": "Footer", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "end", - "stroke": { - "align": "inside", - "thickness": { - "top": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "frame", - "id": "ghv03-btns", - "name": "buttons", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ghv03-cancel", - "name": "cancelBtn", - "padding": [ - 6, - 16 - ], - "cornerRadius": 6, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "children": [ - { - "type": "text", - "id": "ghv03-cancel-lbl", - "content": "Cancel", - "fontSize": 13, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "ghv03-create-btn", - "name": "createBtn", - "padding": [ - 6, - 16 - ], - "cornerRadius": 6, - "fill": "$--primary", - "children": [ - { - "type": "text", - "id": "ghv03-create-lbl", - "content": "Create & Clone", - "fontSize": 13, - "fontWeight": 500, - "fill": "#FFFFFF" + "fontWeight": "normal" } ] } @@ -12436,20 +11844,20 @@ { "type": "frame", "id": "ghv04", - "x": 1980, - "y": 8300, + "x": 700, + "y": 600, "name": "GitHub Vault — Clone in progress", "clip": true, "width": 560, "height": 320, "fill": "$--background", "cornerRadius": 12, - "layout": "vertical", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "layout": "vertical", "children": [ { "type": "frame", @@ -12458,12 +11866,6 @@ "width": "fill_container", "height": 56, "fill": "$--background", - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "space-between", "stroke": { "align": "inside", "thickness": { @@ -12471,14 +11873,20 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "ghv04-title", + "fill": "$--foreground", "content": "Cloning Repository...", + "fontFamily": "Inter", "fontSize": 16, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -12489,13 +11897,13 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", + "gap": 20, "padding": [ 32, 24 ], - "gap": 20, - "alignItems": "center", "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "frame", @@ -12513,19 +11921,22 @@ { "type": "text", "id": "ghv04-status", - "content": "Cloning lucaong/laputa-vault...", - "fontSize": 14, - "fontWeight": 500, "fill": "$--foreground", - "textAlign": "center" + "content": "Cloning lucaong/laputa-vault...", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" }, { "type": "text", "id": "ghv04-sub", - "content": "Receiving objects: 67% (1,234/1,842)", - "fontSize": 12, "fill": "$--muted-foreground", - "textAlign": "center" + "content": "Receiving objects: 67% (1,234/1,842)", + "textAlign": "center", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" }, { "type": "frame", @@ -12533,8 +11944,8 @@ "name": "progressBarBg", "width": 360, "height": 4, - "cornerRadius": 2, "fill": "$--accent", + "cornerRadius": 2, "children": [ { "type": "frame", @@ -12542,8 +11953,8 @@ "name": "progressBarFill", "width": 241, "height": 4, - "cornerRadius": 2, - "fill": "$--accent-blue" + "fill": "$--accent-blue", + "cornerRadius": 2 } ] } @@ -12555,12 +11966,6 @@ "name": "Footer", "width": "fill_container", "height": 56, - "padding": [ - 0, - 24 - ], - "alignItems": "center", - "justifyContent": "end", "stroke": { "align": "inside", "thickness": { @@ -12568,28 +11973,36 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 24 + ], + "justifyContent": "end", + "alignItems": "center", "children": [ { "type": "frame", "id": "ghv04-cancel", "name": "cancelBtn", - "padding": [ - 6, - 16 - ], "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "padding": [ + 6, + 16 + ], "children": [ { "type": "text", "id": "ghv04-cancel-lbl", + "fill": "$--foreground", "content": "Cancel", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -12600,16 +12013,16 @@ { "type": "frame", "id": "SC_all", + "x": 68, + "y": 8000, "name": "Sidebar Collapse — All panels visible", - "x": 0, - "y": 3200, + "theme": { + "Mode": "Light" + }, "clip": true, "width": 1440, "height": 900, "fill": "$--background", - "theme": { - "Mode": "Light" - }, "layout": "vertical", "children": [ { @@ -12699,7 +12112,6 @@ 8 ], "alignItems": "center", - "justifyContent": "flex_end", "children": [ { "type": "frame", @@ -12707,10 +12119,10 @@ "name": "collapseBtn", "width": 24, "height": 24, - "cornerRadius": 4, "fill": "transparent", - "alignItems": "center", + "cornerRadius": 4, "justifyContent": "center", + "alignItems": "center", "children": [ { "type": "icon_font", @@ -12731,12 +12143,6 @@ "id": "SC_all_sb_nav", "name": "NavItems", "width": "fill_container", - "layout": "vertical", - "gap": 1, - "padding": [ - 4, - 8 - ], "stroke": { "align": "inside", "thickness": { @@ -12744,54 +12150,44 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 1, + "padding": [ + 4, + 8 + ], "children": [ { "type": "text", "id": "SC_all_sb_t1", - "text": "All Notes", - "fontSize": 13, "fill": "$--foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "SC_all_sb_t2", - "text": "Favorites", - "fontSize": 13, "fill": "$--muted-foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "SC_all_sb_t3", - "text": "Archive", - "fontSize": 13, "fill": "$--muted-foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "SC_all_sb_t4", - "text": "Trash", - "fontSize": 13, "fill": "$--muted-foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" } ] }, @@ -12803,47 +12199,32 @@ "height": "fill_container", "layout": "vertical", "gap": 2, - "padding": [ - 8, - 8 - ], + "padding": 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 - ] + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", + "letterSpacing": 1.2 }, { "type": "text", "id": "SC_all_sb_s1", - "text": "Projects", - "fontSize": 13, "fill": "$--foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "SC_all_sb_s2", - "text": "Experiments", - "fontSize": 13, "fill": "$--muted-foreground", - "width": "fill_container", - "padding": [ - 6, - 12 - ] + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" } ] } @@ -12872,12 +12253,6 @@ "name": "NoteListHeader", "width": "fill_container", "height": 40, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { @@ -12885,21 +12260,28 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", "id": "SC_all_nl_title", - "text": "All Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "SC_all_nl_count", - "text": "42 notes", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -12910,25 +12292,25 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", - "gap": 0, "children": [ { "type": "frame", "id": "SC_all_nl_n1", "name": "noteItem1", "width": "fill_container", + "fill": "$--accent", "padding": [ 10, 16 ], - "fill": "$--accent", "children": [ { "type": "text", "id": "SC_all_nl_n1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -12945,9 +12327,10 @@ { "type": "text", "id": "SC_all_nl_n2t", - "text": "Weekly Review", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -12964,9 +12347,10 @@ { "type": "text", "id": "SC_all_nl_n3t", - "text": "Meeting Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -12990,12 +12374,7 @@ "name": "TabBar", "width": "fill_container", "height": 36, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "gap": 4, + "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13003,23 +12382,24 @@ }, "fill": "$--border" }, - "fill": "$--background", + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", "children": [ { "type": "frame", "id": "SC_all_ed_tab1", "name": "activeTab", - "padding": [ - 6, - 12 - ], + "fill": "$--background", "cornerRadius": [ 6, 6, 0, 0 ], - "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13027,13 +12407,18 @@ }, "fill": "$--primary" }, + "padding": [ + 6, + 12 + ], "children": [ { "type": "text", "id": "SC_all_ed_tab1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13045,39 +12430,38 @@ "name": "EditorContent", "width": "fill_container", "height": "fill_container", + "layout": "vertical", + "gap": 12, "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" + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" } ] } @@ -13090,16 +12474,16 @@ { "type": "frame", "id": "SC_nosb", + "x": 68, + "y": 9000, "name": "Sidebar Collapse — Sidebar collapsed", - "x": 0, - "y": 4200, + "theme": { + "Mode": "Light" + }, "clip": true, "width": 1440, "height": 900, "fill": "$--background", - "theme": { - "Mode": "Light" - }, "layout": "vertical", "children": [ { @@ -13184,12 +12568,6 @@ "name": "NoteListHeader", "width": "fill_container", "height": 40, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { @@ -13197,21 +12575,28 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", "id": "SC_nosb_nl_title", - "text": "All Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "SC_nosb_nl_count", - "text": "42 notes", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -13222,25 +12607,25 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", - "gap": 0, "children": [ { "type": "frame", "id": "SC_nosb_nl_n1", "name": "noteItem1", "width": "fill_container", + "fill": "$--accent", "padding": [ 10, 16 ], - "fill": "$--accent", "children": [ { "type": "text", "id": "SC_nosb_nl_n1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -13257,9 +12642,10 @@ { "type": "text", "id": "SC_nosb_nl_n2t", - "text": "Weekly Review", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -13276,9 +12662,10 @@ { "type": "text", "id": "SC_nosb_nl_n3t", - "text": "Meeting Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13302,12 +12689,7 @@ "name": "TabBar", "width": "fill_container", "height": 36, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "gap": 4, + "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13315,23 +12697,24 @@ }, "fill": "$--border" }, - "fill": "$--background", + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", "children": [ { "type": "frame", "id": "SC_nosb_ed_tab1", "name": "activeTab", - "padding": [ - 6, - 12 - ], + "fill": "$--background", "cornerRadius": [ 6, 6, 0, 0 ], - "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13339,13 +12722,18 @@ }, "fill": "$--primary" }, + "padding": [ + 6, + 12 + ], "children": [ { "type": "text", "id": "SC_nosb_ed_tab1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13357,39 +12745,38 @@ "name": "EditorContent", "width": "fill_container", "height": "fill_container", + "layout": "vertical", + "gap": 12, "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" + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" } ] } @@ -13402,16 +12789,16 @@ { "type": "frame", "id": "SC_edonly", + "x": 68, + "y": 10000, "name": "Sidebar Collapse — Editor only", - "x": 0, - "y": 5200, + "theme": { + "Mode": "Light" + }, "clip": true, "width": 1440, "height": 900, "fill": "$--background", - "theme": { - "Mode": "Light" - }, "layout": "vertical", "children": [ { @@ -13489,12 +12876,7 @@ "name": "TabBar", "width": "fill_container", "height": 36, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "gap": 4, + "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13502,23 +12884,24 @@ }, "fill": "$--border" }, - "fill": "$--background", + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", "children": [ { "type": "frame", "id": "SC_edonly_ed_tab1", "name": "activeTab", - "padding": [ - 6, - 12 - ], + "fill": "$--background", "cornerRadius": [ 6, 6, 0, 0 ], - "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13526,13 +12909,18 @@ }, "fill": "$--primary" }, + "padding": [ + 6, + 12 + ], "children": [ { "type": "text", "id": "SC_edonly_ed_tab1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13544,39 +12932,38 @@ "name": "EditorContent", "width": "fill_container", "height": "fill_container", + "layout": "vertical", + "gap": 12, "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" + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" } ] } @@ -13589,16 +12976,16 @@ { "type": "frame", "id": "SC_ednl", + "x": 68, + "y": 11000, "name": "Sidebar Collapse — Editor + notes", - "x": 0, - "y": 6200, + "theme": { + "Mode": "Light" + }, "clip": true, "width": 1440, "height": 900, "fill": "$--background", - "theme": { - "Mode": "Light" - }, "layout": "vertical", "children": [ { @@ -13683,12 +13070,6 @@ "name": "NoteListHeader", "width": "fill_container", "height": 40, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "justifyContent": "space_between", "stroke": { "align": "inside", "thickness": { @@ -13696,21 +13077,28 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", "id": "SC_ednl_nl_title", - "text": "All Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "SC_ednl_nl_count", - "text": "42 notes", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -13721,25 +13109,25 @@ "width": "fill_container", "height": "fill_container", "layout": "vertical", - "gap": 0, "children": [ { "type": "frame", "id": "SC_ednl_nl_n1", "name": "noteItem1", "width": "fill_container", + "fill": "$--accent", "padding": [ 10, 16 ], - "fill": "$--accent", "children": [ { "type": "text", "id": "SC_ednl_nl_n1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -13756,9 +13144,10 @@ { "type": "text", "id": "SC_ednl_nl_n2t", - "text": "Weekly Review", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -13775,9 +13164,10 @@ { "type": "text", "id": "SC_ednl_nl_n3t", - "text": "Meeting Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13801,12 +13191,7 @@ "name": "TabBar", "width": "fill_container", "height": 36, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "gap": 4, + "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13814,23 +13199,24 @@ }, "fill": "$--border" }, - "fill": "$--background", + "gap": 4, + "padding": [ + 0, + 8 + ], + "alignItems": "center", "children": [ { "type": "frame", "id": "SC_ednl_ed_tab1", "name": "activeTab", - "padding": [ - 6, - 12 - ], + "fill": "$--background", "cornerRadius": [ 6, 6, 0, 0 ], - "fill": "$--background", "stroke": { "align": "inside", "thickness": { @@ -13838,13 +13224,18 @@ }, "fill": "$--primary" }, + "padding": [ + 6, + 12 + ], "children": [ { "type": "text", "id": "SC_ednl_ed_tab1t", - "text": "My First Project", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -13856,39 +13247,38 @@ "name": "EditorContent", "width": "fill_container", "height": "fill_container", + "layout": "vertical", + "gap": 12, "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" + "fontFamily": "Inter", + "fontSize": 28, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "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 + "lineHeight": 1.6, + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" } ] } @@ -13901,28 +13291,26 @@ { "type": "frame", "id": "pi01", + "x": -1136, + "y": 1894, "name": "Properties Inspector — Editable Properties", - "width": 320, - "height": 520, - "layout": "vertical", - "fill": "$--background", "theme": { "Mode": "Light" }, + "width": 320, + "height": 520, + "fill": "$--background", + "layout": "vertical", "children": [ { "type": "text", "id": "pi02", "name": "frameLabel", + "fill": "$--muted-foreground", "content": "Editable properties section: interactive hover states, cursor pointer, click-to-edit inputs. Properties from frontmatter YAML that the user can modify.", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "normal", - "fill": "$--muted-foreground", - "padding": [ - 8, - 12 - ] + "fontWeight": "normal" }, { "type": "frame", @@ -13957,12 +13345,11 @@ { "type": "text", "id": "pi05", + "fill": "$--muted-foreground", "content": "Properties", "fontFamily": "Inter", "fontSize": 13, - "fontWeight": "600", - "fill": "$--muted-foreground", - "width": "fill_container" + "fontWeight": "600" }, { "type": "icon_font", @@ -13981,29 +13368,25 @@ "name": "Properties Section", "width": "fill_container", "layout": "vertical", - "padding": [ - 12, - 12 - ], "gap": 10, + "padding": 12, "children": [ { "type": "frame", "id": "pi08", "name": "Type Row", "width": "fill_container", - "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi09", + "fill": "$--muted-foreground", "content": "TYPE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground" + "letterSpacing": 1.2 }, { "type": "frame", @@ -14019,11 +13402,11 @@ { "type": "text", "id": "pi11", + "fill": "$--accent-blue", "content": "Project", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "500", - "fill": "$--accent-blue" + "fontWeight": "500" } ] } @@ -14034,24 +13417,23 @@ "id": "pi12", "name": "Editable Row — Status (hover state)", "width": "fill_container", - "justifyContent": "space-between", - "alignItems": "center", + "fill": "#000000", "cornerRadius": 4, - "fill": "$--bg-hover-subtle", "padding": [ 4, 6 ], + "alignItems": "center", "children": [ { "type": "text", "id": "pi13", + "fill": "$--muted-foreground", "content": "STATUS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground" + "letterSpacing": 1.2 }, { "type": "frame", @@ -14067,12 +13449,12 @@ { "type": "text", "id": "pi15", + "fill": "$--accent-green", "content": "ACTIVE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "600", - "letterSpacing": 1.2, - "fill": "$--accent-green" + "letterSpacing": 1.2 } ] } @@ -14083,32 +13465,31 @@ "id": "pi16", "name": "Editable Row — Owner (normal state)", "width": "fill_container", - "justifyContent": "space-between", - "alignItems": "center", "cornerRadius": 4, "padding": [ 4, 6 ], + "alignItems": "center", "children": [ { "type": "text", "id": "pi17", + "fill": "$--muted-foreground", "content": "OWNER", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi18", + "fill": "$--foreground", "content": "Luca Rossi", "fontFamily": "Inter", "fontSize": 13, - "fontWeight": "normal", - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -14117,23 +13498,22 @@ "id": "pi19", "name": "Editable Row — Tags (normal state)", "width": "fill_container", - "justifyContent": "space-between", - "alignItems": "center", "cornerRadius": 4, "padding": [ 4, 6 ], + "alignItems": "center", "children": [ { "type": "text", "id": "pi20", + "fill": "$--muted-foreground", "content": "TAGS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground" + "letterSpacing": 1.2 }, { "type": "frame", @@ -14154,11 +13534,11 @@ { "type": "text", "id": "pi23", + "fill": "$--accent-blue", "content": "React", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "500", - "fill": "$--accent-blue" + "fontWeight": "500" } ] }, @@ -14175,11 +13555,11 @@ { "type": "text", "id": "pi25", + "fill": "$--accent-blue", "content": "TypeScript", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "500", - "fill": "$--accent-blue" + "fontWeight": "500" } ] } @@ -14193,22 +13573,23 @@ "name": "Add Property Button", "width": "fill_container", "height": 32, + "cornerRadius": 6, "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, - "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "pi27", + "fill": "$--muted-foreground", "content": "+ Add property", "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -14228,54 +13609,44 @@ "name": "Info Section — Read-only Metadata", "width": "fill_container", "layout": "vertical", - "padding": [ - 12, - 12 - ], "gap": 6, + "padding": 12, "children": [ { "type": "text", "id": "pi30", + "fill": "$--muted-foreground", "content": "INFO", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground", - "padding": [ - 0, - 0, - 4, - 0 - ] + "letterSpacing": 1.2 }, { "type": "frame", "id": "pi31", "name": "Info Row — Modified (read-only, muted)", "width": "fill_container", - "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi32", + "fill": "#000000", "content": "MODIFIED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--text-muted" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi33", + "fill": "#000000", "content": "Feb 14, 2026", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "normal", - "fill": "$--text-muted" + "fontWeight": "normal" } ] }, @@ -14284,27 +13655,26 @@ "id": "pi34", "name": "Info Row — Created (read-only, muted)", "width": "fill_container", - "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi35", + "fill": "#000000", "content": "CREATED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--text-muted" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi36", + "fill": "#000000", "content": "Jan 5, 2026", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "normal", - "fill": "$--text-muted" + "fontWeight": "normal" } ] }, @@ -14313,27 +13683,26 @@ "id": "pi37", "name": "Info Row — Words (read-only, muted)", "width": "fill_container", - "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi38", + "fill": "#000000", "content": "WORDS", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--text-muted" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi39", + "fill": "#000000", "content": "1,247", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "normal", - "fill": "$--text-muted" + "fontWeight": "normal" } ] }, @@ -14342,61 +13711,56 @@ "id": "pi40", "name": "Info Row — File Size (read-only, muted)", "width": "fill_container", - "justifyContent": "space-between", "alignItems": "center", "children": [ { "type": "text", "id": "pi41", + "fill": "#000000", "content": "SIZE", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--text-muted" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi42", + "fill": "#000000", "content": "4.2 KB", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "normal", - "fill": "$--text-muted" + "fontWeight": "normal" } ] } ] } - ], - "x": 0, - "y": 16025 + ] }, { "type": "frame", "id": "pi50", + "x": -1136, + "y": 1425, "name": "Properties Inspector — Info Section Detail", - "width": 320, - "height": 400, - "layout": "vertical", - "fill": "$--background", "theme": { "Mode": "Light" }, + "width": 320, + "height": 400, + "fill": "$--background", + "layout": "vertical", "children": [ { "type": "text", "id": "pi51", "name": "frameLabel", + "fill": "$--muted-foreground", "content": "Info section for read-only derived metadata. Labels and values use --text-muted color. No hover states, no cursor pointer, no click interaction. Visually distinct from editable properties above.", "fontFamily": "Inter", "fontSize": 11, - "fontWeight": "normal", - "fill": "$--muted-foreground", - "padding": [ - 8, - 12 - ] + "fontWeight": "normal" }, { "type": "frame", @@ -14404,11 +13768,8 @@ "name": "Comparison Side by Side", "width": "fill_container", "layout": "vertical", - "padding": [ - 12, - 12 - ], "gap": 16, + "padding": 12, "children": [ { "type": "frame", @@ -14421,45 +13782,44 @@ { "type": "text", "id": "pi54", + "fill": "$--accent-green", "content": "EDITABLE (interactive)", "fontFamily": "IBM Plex Mono", "fontSize": 9, "fontWeight": "600", - "letterSpacing": 1.5, - "fill": "$--accent-green" + "letterSpacing": 1.5 }, { "type": "frame", "id": "pi55", "name": "Row — cursor:pointer, hover:bg-muted, rounded", "width": "fill_container", - "justifyContent": "space-between", - "alignItems": "center", + "fill": "#000000", "cornerRadius": 4, - "fill": "$--bg-hover-subtle", "padding": [ 4, 6 ], + "alignItems": "center", "children": [ { "type": "text", "id": "pi56", + "fill": "$--muted-foreground", "content": "OWNER", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--muted-foreground" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi57", + "fill": "$--foreground", "content": "Luca Rossi", "fontFamily": "Inter", "fontSize": 13, - "fontWeight": "normal", - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -14476,43 +13836,42 @@ { "type": "text", "id": "pi59", + "fill": "#000000", "content": "READ-ONLY (muted, no interaction)", "fontFamily": "IBM Plex Mono", "fontSize": 9, "fontWeight": "600", - "letterSpacing": 1.5, - "fill": "$--text-muted" + "letterSpacing": 1.5 }, { "type": "frame", "id": "pi60", "name": "Row — cursor:default, no hover, muted color", "width": "fill_container", - "justifyContent": "space-between", - "alignItems": "center", "padding": [ 4, 6 ], + "alignItems": "center", "children": [ { "type": "text", "id": "pi61", + "fill": "#000000", "content": "MODIFIED", "fontFamily": "IBM Plex Mono", "fontSize": 10, "fontWeight": "500", - "letterSpacing": 1.2, - "fill": "$--text-muted" + "letterSpacing": 1.2 }, { "type": "text", "id": "pi62", + "fill": "#000000", "content": "Feb 14, 2026", "fontFamily": "Inter", "fontSize": 12, - "fontWeight": "normal", - "fill": "$--text-muted" + "fontWeight": "normal" } ] } @@ -14520,15 +13879,13 @@ } ] } - ], - "x": 420, - "y": 16025 + ] }, { "type": "frame", "id": "rbF01", - "x": 0, - "y": 17045, + "x": -1136, + "y": 564, "name": "Inspector — Referenced By (Multiple)", "theme": { "Mode": "Light" @@ -14605,7 +13962,8 @@ "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -14633,9 +13991,9 @@ { "type": "icon_font", "id": "rbF01relBI", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "target", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -14665,7 +14023,8 @@ "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -14689,23 +14048,24 @@ { "type": "text", "id": "rbF01refG1T", - "fill": "$--muted-foreground", "opacity": 0.7, + "fill": "$--muted-foreground", "content": "VIA BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 9 + "fontSize": 9, + "fontWeight": "normal" }, { "type": "frame", "id": "rbF01refG1B1", "name": "refItem1", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -14719,9 +14079,9 @@ { "type": "icon_font", "id": "rbF01refG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "fill": "$--accent-orange" @@ -14733,12 +14093,12 @@ "id": "rbF01refG1B2", "name": "refItem2", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -14752,9 +14112,9 @@ { "type": "icon_font", "id": "rbF01refG1B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -14766,12 +14126,12 @@ "id": "rbF01refG1B3", "name": "refItem3", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -14785,9 +14145,9 @@ { "type": "icon_font", "id": "rbF01refG1B3I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -14807,23 +14167,24 @@ { "type": "text", "id": "rbF01refG2T", - "fill": "$--muted-foreground", "opacity": 0.7, + "fill": "$--muted-foreground", "content": "VIA RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 9 + "fontSize": 9, + "fontWeight": "normal" }, { "type": "frame", "id": "rbF01refG2B1", "name": "refItem4", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -14837,9 +14198,9 @@ { "type": "icon_font", "id": "rbF01refG2B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" @@ -14851,12 +14212,12 @@ "id": "rbF01refG2B2", "name": "refItem5", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -14870,9 +14231,9 @@ { "type": "icon_font", "id": "rbF01refG2B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" @@ -14897,7 +14258,8 @@ "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -14915,8 +14277,8 @@ { "type": "frame", "id": "rbF02", - "x": 420, - "y": 17045, + "x": 297, + "y": 0, "name": "Inspector — Referenced By (Empty)", "theme": { "Mode": "Light" @@ -14990,7 +14352,8 @@ "fill": "$--muted-foreground", "content": "No relationships", "fontFamily": "Inter", - "fontSize": 13 + "fontSize": 13, + "fontWeight": "normal" } ] }, @@ -15008,7 +14371,8 @@ "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -15016,7 +14380,8 @@ "fill": "$--muted-foreground", "content": "No references", "fontFamily": "Inter", - "fontSize": 13 + "fontSize": 13, + "fontWeight": "normal" } ] }, @@ -15034,7 +14399,8 @@ "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -15042,7 +14408,8 @@ "fill": "$--muted-foreground", "content": "No backlinks", "fontFamily": "Inter", - "fontSize": 13 + "fontSize": 13, + "fontWeight": "normal" } ] } @@ -15051,8 +14418,8 @@ { "type": "frame", "id": "rbF03", - "x": 840, - "y": 17045, + "x": 2867, + "y": -42, "name": "Inspector — Referenced By (Many Backlinks)", "theme": { "Mode": "Light" @@ -15134,7 +14501,8 @@ "fill": "$--muted-foreground", "content": "HAS", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -15161,9 +14529,9 @@ { "type": "icon_font", "id": "rbF03relG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -15195,9 +14563,9 @@ { "type": "icon_font", "id": "rbF03relG1B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -15229,7 +14597,8 @@ "fill": "$--muted-foreground", "content": "REFERENCED BY", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -15253,22 +14622,23 @@ { "type": "text", "id": "rbF03refG1T", - "fill": "$--muted-foreground", "opacity": 0.7, + "fill": "$--muted-foreground", "content": "VIA BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 9 + "fontSize": 9, + "fontWeight": "normal" }, { "type": "frame", "id": "rbF03refG1B1", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15282,9 +14652,9 @@ { "type": "icon_font", "id": "rbF03refG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "arrows-clockwise", "iconFontFamily": "phosphor", "fill": "$--accent-orange" @@ -15295,12 +14665,12 @@ "type": "frame", "id": "rbF03refG1B2", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15314,9 +14684,9 @@ { "type": "icon_font", "id": "rbF03refG1B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -15327,12 +14697,12 @@ "type": "frame", "id": "rbF03refG1B3", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15346,9 +14716,9 @@ { "type": "icon_font", "id": "rbF03refG1B3I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -15359,12 +14729,12 @@ "type": "frame", "id": "rbF03refG1B4", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15378,9 +14748,9 @@ { "type": "icon_font", "id": "rbF03refG1B4I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -15400,22 +14770,23 @@ { "type": "text", "id": "rbF03refG2T", - "fill": "$--muted-foreground", "opacity": 0.7, + "fill": "$--muted-foreground", "content": "VIA RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 9 + "fontSize": 9, + "fontWeight": "normal" }, { "type": "frame", "id": "rbF03refG2B1", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15429,9 +14800,9 @@ { "type": "icon_font", "id": "rbF03refG2B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" @@ -15442,12 +14813,12 @@ "type": "frame", "id": "rbF03refG2B2", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15461,9 +14832,9 @@ { "type": "icon_font", "id": "rbF03refG2B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" @@ -15483,22 +14854,23 @@ { "type": "text", "id": "rbF03refG3T", - "fill": "$--muted-foreground", "opacity": 0.7, + "fill": "$--muted-foreground", "content": "VIA TOPICS", "fontFamily": "IBM Plex Mono", - "fontSize": 9 + "fontSize": 9, + "fontWeight": "normal" }, { "type": "frame", "id": "rbF03refG3B1", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15512,9 +14884,9 @@ { "type": "icon_font", "id": "rbF03refG3B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -15525,12 +14897,12 @@ "type": "frame", "id": "rbF03refG3B2", "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", "padding": [ 4, 0 ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "text", @@ -15544,9 +14916,9 @@ { "type": "icon_font", "id": "rbF03refG3B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "wrench", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -15577,7 +14949,8 @@ "fill": "$--muted-foreground", "content": "BACKLINKS", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "text", @@ -15624,8 +14997,8 @@ { "type": "frame", "id": "wlc01", - "x": 0, - "y": 15085, + "x": 1791, + "y": 1185, "name": "Wikilink Colors — Editor View (Light)", "theme": { "Mode": "Light" @@ -15635,185 +15008,197 @@ "height": 440, "fill": "$--background", "layout": "vertical", + "gap": 12, "padding": [ 32, 40 ], - "gap": 12, "children": [ { "type": "text", "id": "wlc02", + "fill": "$--foreground", "content": "Build Laputa App", + "fontFamily": "Inter", "fontSize": 28, - "fontWeight": 700, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc03", + "fill": "$--foreground", "content": "Wiki-Links", + "fontFamily": "Inter", "fontSize": 20, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "frame", "id": "wlc10", - "layout": "horizontal", - "gap": 0, "width": "fill_container", - "height": "hug_contents", "children": [ { "type": "text", "id": "wlc10a", + "fill": "$--foreground", "content": "See ", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc10b", - "content": "Stock Screener — EMA200 Wick Bounce", - "fontSize": 15, "fill": "$--accent-red", - "textDecoration": "underline" + "content": "Stock Screener — EMA200 Wick Bounce", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "wlc10c", + "fill": "$--foreground", "content": " for the experiment approach.", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "frame", "id": "wlc11", - "layout": "horizontal", - "gap": 0, "width": "fill_container", - "height": "hug_contents", "children": [ { "type": "text", "id": "wlc11a", + "fill": "$--foreground", "content": "Contact ", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc11b", - "content": "Matteo Cellini", - "fontSize": 15, "fill": "$--accent-yellow", - "textDecoration": "underline" + "content": "Matteo Cellini", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "wlc11c", + "fill": "$--foreground", "content": " for sponsorship data.", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "frame", "id": "wlc12", - "layout": "horizontal", - "gap": 0, "width": "fill_container", - "height": "hug_contents", "children": [ { "type": "text", "id": "wlc12a", + "fill": "$--foreground", "content": "Link to ", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc12b", - "content": "Grow Newsletter", - "fontSize": 15, "fill": "$--accent-purple", - "textDecoration": "underline" + "content": "Grow Newsletter", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "wlc12c", + "fill": "$--foreground", "content": " responsibility.", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "frame", "id": "wlc13", - "layout": "horizontal", - "gap": 0, "width": "fill_container", - "height": "hug_contents", "children": [ { "type": "text", "id": "wlc13a", + "fill": "$--foreground", "content": "Check ", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc13b", - "content": "Software Development", - "fontSize": 15, "fill": "$--accent-green", - "textDecoration": "underline" + "content": "Software Development", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "wlc13c", + "fill": "$--foreground", "content": " for tech notes.", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "frame", "id": "wlc14", - "layout": "horizontal", - "gap": 0, "width": "fill_container", - "height": "hug_contents", "children": [ { "type": "text", "id": "wlc14a", + "fill": "$--foreground", "content": "See ", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "wlc14b", - "content": "Laputa App Design Session", - "fontSize": 15, "fill": "$--accent-yellow", - "textDecoration": "underline" + "content": "Laputa App Design Session", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" }, { "type": "text", "id": "wlc14c", + "fill": "$--foreground", "content": " event recap.", + "fontFamily": "Inter", "fontSize": 15, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -15821,10 +15206,8 @@ "type": "frame", "id": "wlc15", "name": "Legend", - "layout": "horizontal", - "gap": 16, "width": "fill_container", - "height": "hug_contents", + "gap": 16, "padding": [ 12, 0, @@ -15835,111 +15218,48 @@ { "type": "text", "id": "wlc15a", + "fill": "$--accent-red", "content": "Experiment", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--accent-red" + "fontWeight": "normal" }, { "type": "text", "id": "wlc15b", + "fill": "$--accent-yellow", "content": "Person / Event", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--accent-yellow" + "fontWeight": "normal" }, { "type": "text", "id": "wlc15c", + "fill": "$--accent-purple", "content": "Responsibility", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--accent-purple" + "fontWeight": "normal" }, { "type": "text", "id": "wlc15d", + "fill": "$--accent-green", "content": "Topic", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--accent-green" + "fontWeight": "normal" } ] } ] }, - { - "type": "frame", - "id": "wlc20", - "x": 860, - "y": 15085, - "name": "Wikilink Colors — Broken Link State", - "theme": { - "Mode": "Light" - }, - "clip": true, - "width": 500, - "height": 200, - "fill": "$--background", - "layout": "vertical", - "padding": [ - 32, - 40 - ], - "gap": 12, - "children": [ - { - "type": "text", - "id": "wlc21", - "content": "Broken Wikilink", - "fontSize": 20, - "fontWeight": 600, - "fill": "$--foreground" - }, - { - "type": "frame", - "id": "wlc22", - "layout": "horizontal", - "gap": 0, - "width": "fill_container", - "height": "hug_contents", - "children": [ - { - "type": "text", - "id": "wlc22a", - "content": "Also see ", - "fontSize": 15, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "wlc22b", - "content": "Non-Existent Note", - "fontSize": 15, - "fill": "$--muted-foreground", - "textDecoration": "underline", - "opacity": 0.7 - }, - { - "type": "text", - "id": "wlc22c", - "content": " which is a broken link.", - "fontSize": 15, - "fill": "$--foreground" - } - ] - }, - { - "type": "text", - "id": "wlc23", - "content": "Broken links show muted color + dashed underline + reduced opacity", - "fontSize": 12, - "fill": "$--muted-foreground", - "fontStyle": "italic" - } - ] - }, { "type": "frame", "id": "vl001", - "x": 0, - "y": 20005, + "x": 2401, + "y": 114, "name": "Virtual List — Default State (9000+ notes)", "theme": { "Mode": "Light" @@ -15973,18 +15293,18 @@ { "type": "text", "id": "vl003", - "text": "Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl004", - "text": "9,236 items", - "fontSize": 11, "fill": "$--muted-foreground", - "x": 200 + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -15992,11 +15312,11 @@ "type": "frame", "id": "vl005", "name": "Virtualized Viewport", + "clip": true, "width": "fill_container", "height": "fill_container", "fill": "$--card", "layout": "vertical", - "clip": true, "children": [ { "type": "frame", @@ -16012,34 +15332,36 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 16 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl007", - "text": "Build Laputa App", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl008", - "text": "This paragraph has bold text, italic text...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl009", - "text": "2m ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16057,34 +15379,36 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 16 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl011", - "text": "Facebook Ads Strategy", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl012", - "text": "Lookalike audiences convert 3x better...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl013", - "text": "5h ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16102,34 +15426,36 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 16 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl015", - "text": "Quick Meeting 1", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl016", - "text": "Key findings from the latest analysis...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl017", - "text": "1d ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16147,34 +15473,36 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 16 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl019", - "text": "Advanced Strategy 2", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl020", - "text": "Notes on process improvements...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl021", - "text": "2d ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16188,39 +15516,41 @@ "stroke": { "align": "inside", "thickness": { - "left": 3, - "bottom": 1 + "bottom": 1, + "left": 3 }, "fill": "$--accent-blue" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 13 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl023", - "text": "Daily Review 3", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl024", - "text": "Summary of decisions made during review...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl025", - "text": "3d ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16238,34 +15568,36 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 2, "padding": [ 14, 16 ], - "layout": "vertical", - "gap": 2, "children": [ { "type": "text", "id": "vl027", - "text": "Weekly Plan 4", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl028", - "text": "Action items and follow-ups...", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vl029", - "text": "4d ago", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 10, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -16273,630 +15605,11 @@ "type": "frame", "id": "vl030", "name": "scrollbar-indicator", + "opacity": 0.3, "width": 6, "height": 40, "fill": "$--muted-foreground", - "opacity": 0.3, - "cornerRadius": 3, - "x": 290, - "y": 200 - } - ] - } - ] - }, - { - "type": "frame", - "id": "vl100", - "x": 400, - "y": 20005, - "name": "Virtual List — Scrolled Mid-list", - "theme": { - "Mode": "Light" - }, - "clip": true, - "width": 300, - "height": 900, - "fill": "$--card", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "vl101", - "name": "Header", - "width": "fill_container", - "height": 45, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "vl102", - "text": "Notes", - "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vl103", - "name": "Virtualized Viewport — items 4500-4512", - "width": "fill_container", - "height": "fill_container", - "fill": "$--card", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "vl104", - "name": "NoteItem-mid-1", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl105", - "text": "Final Report 4501", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl106", - "text": "Draft outline for upcoming deliverable.", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl107", - "text": "Jan 15", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl108", - "name": "NoteItem-mid-2", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl109", - "text": "Revised Checklist 4502", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl110", - "text": "Reference material for ongoing initiative.", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl111", - "text": "Jan 14", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl112", - "name": "NoteItem-mid-3", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl113", - "text": "Archived Template 4503", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl114", - "text": "Tracking progress on quarterly objectives.", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl115", - "text": "Jan 13", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl116", - "name": "NoteItem-mid-4", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl117", - "text": "New Framework 4504", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl118", - "text": "Comparison of different approaches.", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl119", - "text": "Jan 12", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl120", - "name": "scrollbar-indicator-mid", - "width": 6, - "height": 40, - "fill": "$--muted-foreground", - "opacity": 0.3, - "cornerRadius": 3, - "x": 290, - "y": 440 - } - ] - } - ] - }, - { - "type": "frame", - "id": "vl200", - "x": 800, - "y": 20005, - "name": "Virtual List — Search Filtering", - "theme": { - "Mode": "Light" - }, - "clip": true, - "width": 300, - "height": 900, - "fill": "$--card", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "vl201", - "name": "Header", - "width": "fill_container", - "height": 45, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "vl202", - "text": "Notes", - "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vl203", - "name": "Search Bar", - "width": "fill_container", - "height": 40, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "vl204", - "name": "search-input", - "width": "fill_container", - "height": 32, - "fill": "$--background", - "cornerRadius": 6, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "vl205", - "text": "strategy", - "fontSize": 13, - "fill": "$--foreground" - } - ] - } - ] - }, - { - "type": "frame", - "id": "vl206", - "name": "Filtered Results (23 matches)", - "width": "fill_container", - "height": "fill_container", - "fill": "$--card", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "vl207", - "name": "NoteItem-filtered-1", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl208", - "text": "Facebook Ads Strategy", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl209", - "text": "Lookalike audiences convert 3x better...", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl210", - "text": "5h ago", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl211", - "name": "NoteItem-filtered-2", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl212", - "text": "Advanced Strategy 2", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl213", - "text": "Notes on process improvements...", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl214", - "text": "2d ago", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - }, - { - "type": "frame", - "id": "vl215", - "name": "NoteItem-filtered-3", - "width": "fill_container", - "height": 72, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 14, - 16 - ], - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "vl216", - "text": "Quick Strategy 10", - "fontSize": 13, - "fontWeight": 500, - "fill": "$--foreground" - }, - { - "type": "text", - "id": "vl217", - "text": "Key findings from the latest analysis...", - "fontSize": 12, - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "vl218", - "text": "Jan 5", - "fontSize": 10, - "fill": "$--muted-foreground" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "vl300", - "x": 1200, - "y": 20005, - "name": "Virtual List — Empty Search Result", - "theme": { - "Mode": "Light" - }, - "clip": true, - "width": 300, - "height": 400, - "fill": "$--card", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "vl301", - "name": "Header", - "width": "fill_container", - "height": 45, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "vl302", - "text": "Notes", - "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vl303", - "name": "Search Bar", - "width": "fill_container", - "height": 40, - "fill": "$--card", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "vl304", - "name": "search-input", - "width": "fill_container", - "height": 32, - "fill": "$--background", - "cornerRadius": 6, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "padding": [ - 0, - 8 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "vl305", - "text": "xyznonexistent", - "fontSize": 13, - "fill": "$--foreground" - } - ] - } - ] - }, - { - "type": "frame", - "id": "vl306", - "name": "Empty State", - "width": "fill_container", - "height": "fill_container", - "fill": "$--card", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": [ - 32, - 16 - ], - "children": [ - { - "type": "text", - "id": "vl307", - "text": "No matching notes", - "fontSize": 13, - "fill": "$--muted-foreground", - "textAlign": "center" + "cornerRadius": 3 } ] } @@ -16905,11 +15618,10 @@ { "type": "frame", "id": "mni01", - "x": 0, - "y": 21405, + "x": -113, + "y": 1745, "name": "Modified Note Indicator — NoteList States", "width": 340, - "height": "fit_content(600)", "fill": "$--card", "layout": "vertical", "children": [ @@ -16921,13 +15633,7 @@ "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "width": "fill_container", - "padding": [ - 8, - 16 - ] + "letterSpacing": 1 }, { "type": "frame", @@ -16966,9 +15672,9 @@ "type": "ellipse", "id": "mni02dot", "name": "Modified Indicator", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 }, { "type": "text", @@ -17122,9 +15828,9 @@ "type": "ellipse", "id": "mni04dot", "name": "Modified Indicator", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 }, { "type": "text", @@ -17176,8 +15882,8 @@ { "type": "frame", "id": "mni10", - "x": 440, - "y": 21405, + "x": 1038, + "y": -390, "name": "Modified Note Indicator — TabBar States", "width": 800, "height": 120, @@ -17192,12 +15898,7 @@ "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "padding": [ - 8, - 16 - ] + "letterSpacing": 1 }, { "type": "frame", @@ -17248,9 +15949,9 @@ "type": "ellipse", "id": "mni11adot", "name": "Tab Modified Dot", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 }, { "type": "icon_font", @@ -17337,9 +16038,9 @@ "type": "ellipse", "id": "mni11cdot", "name": "Tab Modified Dot", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 }, { "type": "icon_font", @@ -17403,239 +16104,11 @@ } ] }, - { - "type": "frame", - "id": "mni20", - "x": 1340, - "y": 21405, - "name": "Modified Note Indicator — StatusBar Pending Count", - "width": 800, - "height": 80, - "fill": "$--background", - "layout": "vertical", - "children": [ - { - "type": "text", - "id": "mni20t", - "fill": "$--muted-foreground", - "content": "StatusBar — Pending Changes Counter", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "padding": [ - 8, - 16 - ] - }, - { - "type": "frame", - "id": "mni21", - "name": "StatusBar with Pending Count", - "width": "fill_container", - "height": 30, - "fill": "$--sidebar", - "stroke": { - "align": "inside", - "thickness": { - "top": 1 - }, - "fill": "$--border" - }, - "padding": [ - 0, - 8 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mni21l", - "name": "left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mni21v", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mni21fi", - "width": 13, - "height": 13, - "iconFontName": "folder-open", - "iconFontFamily": "lucide", - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "mni21fl", - "fill": "$--muted-foreground", - "content": "Demo v2", - "fontFamily": "Inter", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "mni21s1", - "fill": "$--border", - "content": "|", - "fontFamily": "Inter", - "fontSize": 11 - }, - { - "type": "frame", - "id": "mni21br", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mni21gi", - "width": 13, - "height": 13, - "iconFontName": "git-branch", - "iconFontFamily": "lucide", - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "mni21gl", - "fill": "$--muted-foreground", - "content": "main", - "fontFamily": "Inter", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "mni21s2", - "fill": "$--border", - "content": "|", - "fontFamily": "Inter", - "fontSize": 11 - }, - { - "type": "frame", - "id": "mni21sy", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mni21ri", - "width": 13, - "height": 13, - "iconFontName": "refresh-cw", - "iconFontFamily": "lucide", - "fill": "$--accent-green" - }, - { - "type": "text", - "id": "mni21rl", - "fill": "$--muted-foreground", - "content": "Synced 2m ago", - "fontFamily": "Inter", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "mni21s3", - "fill": "$--border", - "content": "|", - "fontFamily": "Inter", - "fontSize": 11 - }, - { - "type": "frame", - "id": "mni21pd", - "name": "Pending Count", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mni21pi", - "width": 13, - "height": 13, - "iconFontName": "circle-dot", - "iconFontFamily": "lucide", - "fill": "$--accent-orange" - }, - { - "type": "text", - "id": "mni21pl", - "fill": "$--muted-foreground", - "content": "3 pending", - "fontFamily": "Inter", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "mni21r", - "name": "right", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mni21nc", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mni21ni", - "width": 13, - "height": 13, - "iconFontName": "file-text", - "iconFontFamily": "lucide", - "fill": "$--muted-foreground" - }, - { - "type": "text", - "id": "mni21nl", - "fill": "$--muted-foreground", - "content": "9,200 notes", - "fontFamily": "Inter", - "fontSize": 11 - } - ] - }, - { - "type": "icon_font", - "id": "mni21set", - "width": 14, - "height": 14, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$--muted-foreground" - } - ] - } - ] - } - ] - }, { "type": "frame", "id": "reF01", - "x": 0, - "y": 18345, + "x": -595, + "y": 1878, "name": "Relations Edit — Default (hover to reveal remove)", "theme": { "Mode": "Light" @@ -17717,7 +16190,8 @@ "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -17752,20 +16226,19 @@ { "type": "icon_font", "id": "reF01relG1B1X", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "x", "iconFontFamily": "phosphor", - "fill": "$--accent-blue", - "annotation": "visible on hover" + "fill": "$--accent-blue" }, { "type": "icon_font", "id": "reF01relG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "target", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -17779,11 +16252,11 @@ "id": "reF01relG1Add", "name": "addBtn", "gap": 4, - "alignItems": "center", "padding": [ 4, 0 ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -17800,7 +16273,8 @@ "fill": "$--muted-foreground", "content": "Add", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -17820,7 +16294,8 @@ "fill": "$--muted-foreground", "content": "RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -17855,20 +16330,19 @@ { "type": "icon_font", "id": "reF01relG2B1X", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "x", "iconFontFamily": "phosphor", - "fill": "$--accent-purple", - "annotation": "visible on hover" + "fill": "$--accent-purple" }, { "type": "icon_font", "id": "reF01relG2B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -17910,20 +16384,19 @@ { "type": "icon_font", "id": "reF01relG2B2X", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "x", "iconFontFamily": "phosphor", - "fill": "$--accent-red", - "annotation": "visible on hover" + "fill": "$--accent-red" }, { "type": "icon_font", "id": "reF01relG2B2I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "flask", "iconFontFamily": "phosphor", "fill": "$--accent-red" @@ -17937,11 +16410,11 @@ "id": "reF01relG2Add", "name": "addBtn", "gap": 4, - "alignItems": "center", "padding": [ 4, 0 ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -17958,7 +16431,8 @@ "fill": "$--muted-foreground", "content": "Add", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -17971,8 +16445,8 @@ { "type": "frame", "id": "reF02", - "x": 420, - "y": 18345, + "x": 1491, + "y": -210, "name": "Relations Edit — Hover on pill (X remove visible)", "theme": { "Mode": "Light" @@ -18054,7 +16528,8 @@ "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -18063,19 +16538,17 @@ "width": "fill_container", "fill": "$--accent-blue-light", "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--accent-blue" + }, "padding": [ 6, 10 ], "justifyContent": "space_between", "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--accent-blue", - "opacity": 0.3 - }, - "annotation": "pill is hovered — X button fully visible", "children": [ { "type": "text", @@ -18098,18 +16571,16 @@ "id": "reF02relG1B1X", "width": 14, "height": 14, - "opacity": 1, "iconFontName": "x-circle", "iconFontFamily": "phosphor", - "fill": "$--accent-blue", - "annotation": "X remove — fully visible on hover" + "fill": "$--accent-blue" }, { "type": "icon_font", "id": "reF02relG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "target", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -18123,11 +16594,11 @@ "id": "reF02relG1Add", "name": "addBtn", "gap": 4, - "alignItems": "center", "padding": [ 4, 0 ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -18144,7 +16615,8 @@ "fill": "$--muted-foreground", "content": "Add", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -18164,7 +16636,8 @@ "fill": "$--muted-foreground", "content": "RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -18199,20 +16672,19 @@ { "type": "icon_font", "id": "reF02relG2B1X", + "opacity": 0, "width": 14, "height": 14, - "opacity": 0, "iconFontName": "x-circle", "iconFontFamily": "phosphor", - "fill": "$--accent-purple", - "annotation": "hidden — not hovered" + "fill": "$--accent-purple" }, { "type": "icon_font", "id": "reF02relG2B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -18226,11 +16698,11 @@ "id": "reF02relG2Add", "name": "addBtn", "gap": 4, - "alignItems": "center", "padding": [ 4, 0 ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -18247,7 +16719,8 @@ "fill": "$--muted-foreground", "content": "Add", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -18260,8 +16733,8 @@ { "type": "frame", "id": "reF03", - "x": 840, - "y": 18345, + "x": 1879, + "y": -300, "name": "Relations Edit — Add expanded with autocomplete", "theme": { "Mode": "Light" @@ -18343,7 +16816,8 @@ "fill": "$--muted-foreground", "content": "BELONGS TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -18378,9 +16852,9 @@ { "type": "icon_font", "id": "reF03relG1B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "target", "iconFontFamily": "phosphor", "fill": "$--accent-blue" @@ -18395,7 +16869,7 @@ "name": "addInputWrapper", "width": "fill_container", "layout": "vertical", - "gap": 0, + "gap": 4, "children": [ { "type": "frame", @@ -18410,12 +16884,12 @@ "thickness": 1, "fill": "$--primary" }, + "gap": 4, "padding": [ 6, 10 ], "alignItems": "center", - "gap": 4, "children": [ { "type": "icon_font", @@ -18432,7 +16906,8 @@ "fill": "$--foreground", "content": "Eng", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" }, { "type": "frame", @@ -18457,10 +16932,7 @@ "fill": "$--border" }, "layout": "vertical", - "padding": [ - 4, - 0 - ], + "padding": 4, "children": [ { "type": "frame", @@ -18469,11 +16941,11 @@ "width": "fill_container", "fill": "$--accent", "cornerRadius": 4, + "gap": 8, "padding": [ 6, 10 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -18501,11 +16973,11 @@ "id": "reF03relG1DropI2", "name": "suggestion2", "width": "fill_container", + "gap": 8, "padding": [ 6, 10 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -18523,7 +16995,8 @@ "fill": "$--foreground", "content": "Engineering Metrics", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] }, @@ -18532,11 +17005,11 @@ "id": "reF03relG1DropI3", "name": "suggestion3", "width": "fill_container", + "gap": 8, "padding": [ 6, 10 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -18554,7 +17027,8 @@ "fill": "$--foreground", "content": "English Writing Course", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] }, @@ -18563,11 +17037,11 @@ "id": "reF03relG1DropI4", "name": "suggestion4", "width": "fill_container", + "gap": 8, "padding": [ 6, 10 ], - "gap": 8, "alignItems": "center", "children": [ { @@ -18585,7 +17059,8 @@ "fill": "$--foreground", "content": "Engine Performance Tests", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -18609,7 +17084,8 @@ "fill": "$--muted-foreground", "content": "RELATED TO", "fontFamily": "IBM Plex Mono", - "fontSize": 10 + "fontSize": 10, + "fontWeight": "normal" }, { "type": "frame", @@ -18644,9 +17120,9 @@ { "type": "icon_font", "id": "reF03relG2B1I", + "opacity": 0.5, "width": 14, "height": 14, - "opacity": 0.5, "iconFontName": "file-text", "iconFontFamily": "phosphor", "fill": "$--accent-purple" @@ -18660,11 +17136,11 @@ "id": "reF03relG2Add", "name": "addBtn", "gap": 4, - "alignItems": "center", "padding": [ 4, 0 ], + "alignItems": "center", "children": [ { "type": "icon_font", @@ -18681,7 +17157,8 @@ "fill": "$--muted-foreground", "content": "Add", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -18694,178 +17171,57 @@ { "type": "frame", "id": "urlDefault", - "x": 0, - "y": 19465, + "x": -595, + "y": 1664, "name": "URL Property — default state (no hover)", "width": 320, "height": 40, "fill": "#ffffff", - "layout": "horizontal", - "alignItems": "center", - "padding": [ - 6, - 6 - ], "gap": 8, + "padding": 6, + "alignItems": "center", "children": [ { "type": "text", "id": "urlDefaultLabel", "name": "label", + "fill": "#6b7280", "content": "URL", + "fontFamily": "Inter", "fontSize": 10, - "fontWeight": 600, - "letterSpacing": 1.2, - "textTransform": "uppercase", - "fill": "#6b7280" + "fontWeight": "normal", + "letterSpacing": 1.2 }, { "type": "frame", "id": "urlDefaultValueWrap", "name": "value-wrapper", "width": "fill_container", - "layout": "horizontal", - "alignItems": "center", - "justifyContent": "end", "gap": 4, + "justifyContent": "end", + "alignItems": "center", "children": [ { "type": "text", "id": "urlDefaultValue", "name": "url-value", - "content": "https://example.com/article", - "fontSize": 13, "fill": "#374151", - "textAlign": "right" + "content": "https://example.com/article", + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "text", "id": "urlDefaultEditIcon", "name": "edit-icon", - "content": "pencil", - "fontSize": 12, + "opacity": 0, "fill": "#9ca3af", - "opacity": 0 - } - ] - } - ] - }, - { - "type": "frame", - "id": "urlHover", - "x": 420, - "y": 19465, - "name": "URL Property — hover state (underline + pointer cursor)", - "width": 320, - "height": 40, - "fill": "#f9fafb", - "layout": "horizontal", - "alignItems": "center", - "padding": [ - 6, - 6 - ], - "gap": 8, - "children": [ - { - "type": "text", - "id": "urlHoverLabel", - "name": "label", - "content": "URL", - "fontSize": 10, - "fontWeight": 600, - "letterSpacing": 1.2, - "textTransform": "uppercase", - "fill": "#6b7280" - }, - { - "type": "frame", - "id": "urlHoverValueWrap", - "name": "value-wrapper", - "width": "fill_container", - "layout": "horizontal", - "alignItems": "center", - "justifyContent": "end", - "gap": 4, - "children": [ - { - "type": "text", - "id": "urlHoverValue", - "name": "url-value-hovered", - "content": "https://example.com/article", - "fontSize": 13, - "fill": "#2563eb", - "textDecoration": "underline", - "textAlign": "right" - }, - { - "type": "text", - "id": "urlHoverEditIcon", - "name": "edit-icon-visible", "content": "pencil", + "fontFamily": "Inter", "fontSize": 12, - "fill": "#6b7280", - "opacity": 1 - } - ] - } - ] - }, - { - "type": "frame", - "id": "urlEdit", - "x": 840, - "y": 19465, - "name": "URL Property — edit mode (double-click or edit icon)", - "width": 320, - "height": 40, - "fill": "#ffffff", - "layout": "horizontal", - "alignItems": "center", - "padding": [ - 6, - 6 - ], - "gap": 8, - "children": [ - { - "type": "text", - "id": "urlEditLabel", - "name": "label", - "content": "URL", - "fontSize": 10, - "fontWeight": 600, - "letterSpacing": 1.2, - "textTransform": "uppercase", - "fill": "#6b7280" - }, - { - "type": "frame", - "id": "urlEditInputWrap", - "name": "input-wrapper", - "width": "fill_container", - "height": 28, - "fill": "#f3f4f6", - "cornerRadius": 4, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "#6366f1" - }, - "padding": [ - 4, - 8 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "urlEditInput", - "name": "edit-input", - "content": "https://example.com/article", - "fontSize": 13, - "fill": "#111827" + "fontWeight": "normal" } ] } @@ -18874,14 +17230,13 @@ { "type": "frame", "id": "vc001", - "x": 0, - "y": 23605, + "x": -663, + "y": 1032, "name": "Changes — sidebar section with pending notes", "clip": true, "width": 550, "height": 500, "fill": "$--background", - "layout": "horizontal", "children": [ { "type": "frame", @@ -18897,12 +17252,6 @@ "id": "vc003", "name": "Filters", "width": "fill_container", - "layout": "vertical", - "gap": 1, - "padding": [ - 8, - 8 - ], "stroke": { "align": "inside", "thickness": { @@ -18910,6 +17259,9 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 1, + "padding": 8, "children": [ { "type": "frame", @@ -18927,9 +17279,10 @@ { "type": "text", "id": "vc005", - "text": "All Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -18949,9 +17302,10 @@ { "type": "text", "id": "vc007", - "text": "Favorites", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -18971,9 +17325,10 @@ { "type": "text", "id": "vc009", - "text": "Trash", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -18990,36 +17345,35 @@ 16 ], "alignItems": "center", - "justifyContent": "space-between", "children": [ { "type": "text", "id": "vc011", - "text": "Changes", + "fill": "$--accent-orange", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--accent-orange" + "fontWeight": "normal" }, { "type": "frame", "id": "vc012", "name": "badge", + "height": 20, "fill": "$--accent-orange", "cornerRadius": 9999, "padding": [ 0, 6 ], - "height": 20, "alignItems": "center", "children": [ { "type": "text", "id": "vc013", - "text": "3", + "fill": "$--white", + "fontFamily": "Inter", "fontSize": 10, - "fontWeight": 600, - "fill": "$--white" + "fontWeight": "normal" } ] } @@ -19036,7 +17390,6 @@ "width": 300, "height": "fill_container", "fill": "$--card", - "layout": "vertical", "stroke": { "align": "inside", "thickness": { @@ -19044,6 +17397,7 @@ }, "fill": "$--border" }, + "layout": "vertical", "children": [ { "type": "frame", @@ -19051,11 +17405,6 @@ "name": "header", "width": "fill_container", "height": 45, - "padding": [ - 0, - 16 - ], - "alignItems": "center", "stroke": { "align": "inside", "thickness": { @@ -19063,14 +17412,19 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "vc016", - "text": "Changes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -19079,12 +17433,6 @@ "id": "vc017", "name": "note1-modified", "width": "fill_container", - "padding": [ - 10, - 16 - ], - "gap": 4, - "layout": "vertical", "stroke": { "align": "inside", "thickness": { @@ -19092,6 +17440,12 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 16 + ], "children": [ { "type": "frame", @@ -19111,19 +17465,20 @@ { "type": "text", "id": "vc020", - "text": "Build Laputa App", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "text", "id": "vc021", - "text": "This paragraph has bold text, italic text…", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -19132,12 +17487,6 @@ "id": "vc022", "name": "note2-modified", "width": "fill_container", - "padding": [ - 10, - 16 - ], - "gap": 4, - "layout": "vertical", "stroke": { "align": "inside", "thickness": { @@ -19145,6 +17494,12 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 16 + ], "children": [ { "type": "frame", @@ -19164,19 +17519,20 @@ { "type": "text", "id": "vc025", - "text": "Facebook Ads Strategy", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "text", "id": "vc026", - "text": "Lookalike audiences from newsletter subscribers…", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] }, @@ -19185,12 +17541,12 @@ "id": "vc027", "name": "note3-added", "width": "fill_container", + "layout": "vertical", + "gap": 4, "padding": [ 10, 16 ], - "gap": 4, - "layout": "vertical", "children": [ { "type": "frame", @@ -19210,19 +17566,20 @@ { "type": "text", "id": "vc030", - "text": "AI Agents Primer", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, { "type": "text", "id": "vc031", - "text": "AI agents are autonomous systems that can plan…", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -19233,14 +17590,13 @@ { "type": "frame", "id": "vc100", - "x": 650, - "y": 23605, + "x": -620, + "y": -60, "name": "Changes — empty state (0 pending)", "clip": true, "width": 550, "height": 400, "fill": "$--background", - "layout": "horizontal", "children": [ { "type": "frame", @@ -19256,12 +17612,6 @@ "id": "vc102", "name": "Filters", "width": "fill_container", - "layout": "vertical", - "gap": 1, - "padding": [ - 8, - 8 - ], "stroke": { "align": "inside", "thickness": { @@ -19269,6 +17619,9 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 1, + "padding": 8, "children": [ { "type": "frame", @@ -19287,10 +17640,10 @@ { "type": "text", "id": "vc104", - "text": "All Notes", + "fill": "$--primary", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 500, - "fill": "$--primary" + "fontWeight": "normal" } ] }, @@ -19310,9 +17663,10 @@ { "type": "text", "id": "vc106", - "text": "Favorites", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -19332,9 +17686,10 @@ { "type": "text", "id": "vc108", - "text": "Trash", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fill": "$--foreground" + "fontWeight": "normal" } ] } @@ -19353,9 +17708,10 @@ { "type": "text", "id": "vc110", - "text": "← No \"Changes\" item when 0 pending", - "fontSize": 11, "fill": "$--muted-foreground", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal", "fontStyle": "italic" } ] @@ -19369,7 +17725,6 @@ "width": 300, "height": "fill_container", "fill": "$--card", - "layout": "vertical", "stroke": { "align": "inside", "thickness": { @@ -19377,6 +17732,7 @@ }, "fill": "$--border" }, + "layout": "vertical", "children": [ { "type": "frame", @@ -19384,11 +17740,6 @@ "name": "header", "width": "fill_container", "height": 45, - "padding": [ - 0, - 16 - ], - "alignItems": "center", "stroke": { "align": "inside", "thickness": { @@ -19396,14 +17747,19 @@ }, "fill": "$--border" }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", "children": [ { "type": "text", "id": "vc113", - "text": "Notes", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 14, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" } ] }, @@ -19420,12 +17776,6 @@ "id": "vc115", "name": "note-no-dot", "width": "fill_container", - "padding": [ - 10, - 16 - ], - "gap": 4, - "layout": "vertical", "stroke": { "align": "inside", "thickness": { @@ -19433,21 +17783,28 @@ }, "fill": "$--border" }, + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 16 + ], "children": [ { "type": "text", "id": "vc116", - "text": "Build Laputa App", + "fill": "$--foreground", + "fontFamily": "Inter", "fontSize": 13, - "fontWeight": 600, - "fill": "$--foreground" + "fontWeight": "normal" }, { "type": "text", "id": "vc117", - "text": "No orange dot — all committed", + "fill": "$--muted-foreground", + "fontFamily": "Inter", "fontSize": 12, - "fill": "$--muted-foreground" + "fontWeight": "normal" } ] } @@ -19457,308 +17814,13 @@ } ] }, - { - "type": "frame", - "id": "vc200", - "x": 1300, - "y": 23605, - "name": "Changes — real-time update (note disappears after save)", - "clip": true, - "width": 800, - "height": 300, - "fill": "$--background", - "layout": "horizontal", - "gap": 40, - "padding": [ - 20, - 20 - ], - "children": [ - { - "type": "frame", - "id": "vc201", - "name": "Before: 3 pending", - "width": 340, - "height": "fill_container", - "fill": "$--card", - "layout": "vertical", - "cornerRadius": 8, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "children": [ - { - "type": "frame", - "id": "vc202", - "name": "header", - "width": "fill_container", - "height": 36, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "text", - "id": "vc203", - "text": "Changes (before save)", - "fontSize": 12, - "fontWeight": 600, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vc204", - "name": "item1", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "gap": 6, - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "ellipse", - "id": "vc205", - "fill": "$--accent-orange", - "width": 6, - "height": 6 - }, - { - "type": "text", - "id": "vc206", - "text": "Build Laputa App", - "fontSize": 12, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vc207", - "name": "item2-highlight", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "gap": 6, - "fill": "#F5750010", - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "ellipse", - "id": "vc208", - "fill": "$--accent-orange", - "width": 6, - "height": 6 - }, - { - "type": "text", - "id": "vc209", - "text": "Facebook Ads Strategy ← saving…", - "fontSize": 12, - "fontWeight": 500, - "fill": "$--accent-orange" - } - ] - }, - { - "type": "frame", - "id": "vc210", - "name": "item3", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "vc211", - "fill": "$--accent-orange", - "width": 6, - "height": 6 - }, - { - "type": "text", - "id": "vc212", - "text": "AI Agents Primer", - "fontSize": 12, - "fill": "$--foreground" - } - ] - } - ] - }, - { - "type": "frame", - "id": "vc220", - "name": "After: 2 pending (note committed)", - "width": 340, - "height": "fill_container", - "fill": "$--card", - "layout": "vertical", - "cornerRadius": 8, - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$--border" - }, - "children": [ - { - "type": "frame", - "id": "vc221", - "name": "header", - "width": "fill_container", - "height": 36, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "text", - "id": "vc222", - "text": "Changes (after save + commit)", - "fontSize": 12, - "fontWeight": 600, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vc223", - "name": "item1", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "gap": 6, - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "bottom": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "ellipse", - "id": "vc224", - "fill": "$--accent-orange", - "width": 6, - "height": 6 - }, - { - "type": "text", - "id": "vc225", - "text": "Build Laputa App", - "fontSize": 12, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vc226", - "name": "item2", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "vc227", - "fill": "$--accent-orange", - "width": 6, - "height": 6 - }, - { - "type": "text", - "id": "vc228", - "text": "AI Agents Primer", - "fontSize": 12, - "fill": "$--foreground" - } - ] - }, - { - "type": "frame", - "id": "vc229", - "name": "removedNote", - "width": "fill_container", - "padding": [ - 12, - 12 - ], - "children": [ - { - "type": "text", - "id": "vc230", - "text": "Facebook Ads Strategy removed (committed)", - "fontSize": 11, - "fontStyle": "italic", - "fill": "$--muted-foreground" - } - ] - } - ] - } - ] - }, { "type": "frame", "id": "dp01", - "x": 0, - "y": 22505, + "x": -595, + "y": 730, "name": "NoteStatus — NoteList (New vs Modified)", "width": 340, - "height": "fit_content(600)", "fill": "$--card", "layout": "vertical", "children": [ @@ -19770,13 +17832,7 @@ "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "width": "fill_container", - "padding": [ - 8, - 16 - ] + "letterSpacing": 1 }, { "type": "frame", @@ -19815,9 +17871,9 @@ "type": "ellipse", "id": "dp02dot", "name": "New Indicator (green)", + "fill": "$--accent-green", "width": 6, - "height": 6, - "fill": "$--accent-green" + "height": 6 }, { "type": "text", @@ -19836,7 +17892,8 @@ "fill": "$--muted-foreground", "content": "just now", "fontFamily": "Inter", - "fontSize": 11 + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -19847,7 +17904,7 @@ "content": "New note created in this session, never saved to disk", "fontFamily": "Inter", "fontSize": 12, - "width": "fill_container" + "fontWeight": "normal" } ] }, @@ -19888,9 +17945,9 @@ "type": "ellipse", "id": "dp03dot", "name": "Modified Indicator (orange)", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 }, { "type": "text", @@ -19909,7 +17966,8 @@ "fill": "$--muted-foreground", "content": "2 hours ago", "fontFamily": "Inter", - "fontSize": 11 + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -19920,7 +17978,7 @@ "content": "Existing note with uncommitted git changes", "fontFamily": "Inter", "fontSize": 12, - "width": "fill_container" + "fontWeight": "normal" } ] }, @@ -19974,7 +18032,8 @@ "fill": "$--muted-foreground", "content": "yesterday", "fontFamily": "Inter", - "fontSize": 11 + "fontSize": 11, + "fontWeight": "normal" } ] }, @@ -19985,7 +18044,7 @@ "content": "No indicator — clean, committed note", "fontFamily": "Inter", "fontSize": 12, - "width": "fill_container" + "fontWeight": "normal" } ] } @@ -19994,11 +18053,10 @@ { "type": "frame", "id": "dp10", - "x": 440, - "y": 22505, + "x": 480, + "y": -280, "name": "NoteStatus — TabBar (New vs Modified)", "width": 600, - "height": "fit_content(200)", "fill": "$--sidebar", "layout": "vertical", "children": [ @@ -20010,13 +18068,7 @@ "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "width": "fill_container", - "padding": [ - 8, - 16 - ] + "letterSpacing": 1 }, { "type": "frame", @@ -20039,11 +18091,11 @@ }, "fill": "$--border" }, + "gap": 6, "padding": [ 0, 12 ], - "gap": 6, "alignItems": "center", "children": [ { @@ -20059,9 +18111,9 @@ "type": "ellipse", "id": "dp11adot", "name": "New dot (green)", + "fill": "$--accent-green", "width": 6, - "height": 6, - "fill": "$--accent-green" + "height": 6 }, { "type": "text", @@ -20069,7 +18121,8 @@ "fill": "$--muted-foreground", "content": "×", "fontFamily": "Inter", - "fontSize": 14 + "fontSize": 14, + "fontWeight": "normal" } ] }, @@ -20086,11 +18139,11 @@ }, "fill": "$--sidebar-border" }, + "gap": 6, "padding": [ 0, 12 ], - "gap": 6, "alignItems": "center", "children": [ { @@ -20099,15 +18152,16 @@ "fill": "$--muted-foreground", "content": "Build Laputa App", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" }, { "type": "ellipse", "id": "dp11bdot", "name": "Modified dot (orange)", + "fill": "$--accent-orange", "width": 6, - "height": 6, - "fill": "$--accent-orange" + "height": 6 } ] }, @@ -20124,11 +18178,11 @@ }, "fill": "$--sidebar-border" }, + "gap": 6, "padding": [ 0, 12 ], - "gap": 6, "alignItems": "center", "children": [ { @@ -20137,7 +18191,8 @@ "fill": "$--muted-foreground", "content": "Meeting Notes", "fontFamily": "Inter", - "fontSize": 12 + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -20147,969 +18202,655 @@ }, { "type": "frame", - "id": "dp20", - "x": 1140, - "y": 22505, - "name": "NoteStatus — BreadcrumbBar (N vs M badge)", - "width": 600, - "height": "fit_content(200)", - "fill": "$--background", + "id": "3aG9b", + "x": -595, + "y": 508, + "name": "Full-text Search — Empty State", + "width": 500, + "fill": "#1E1E2E", + "cornerRadius": 12, "layout": "vertical", "children": [ - { - "type": "text", - "id": "dp20t", - "fill": "$--muted-foreground", - "content": "BreadcrumbBar — Status Badge", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "width": "fill_container", - "padding": [ - 8, - 16 - ] - }, { "type": "frame", - "id": "dp21", - "name": "Breadcrumb — New Note", - "width": "fill_container", - "padding": [ - 8, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "dp21type", - "fill": "$--muted-foreground", - "content": "Note", - "fontFamily": "Inter", - "fontSize": 12 - }, - { - "type": "text", - "id": "dp21sep", - "fill": "$--muted-foreground", - "content": "/", - "fontFamily": "Inter", - "fontSize": 12 - }, - { - "type": "text", - "id": "dp21title", - "fill": "$--foreground", - "content": "Untitled Note", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "dp21badge", - "name": "New Badge", - "fill": "$--accent-green", - "cornerRadius": 3, - "padding": [ - 1, - 5 - ], - "children": [ - { - "type": "text", - "id": "dp21bl", - "fill": "#ffffff", - "content": "N", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "dp22", - "name": "Breadcrumb — Modified Note", - "width": "fill_container", - "padding": [ - 8, - 16 - ], - "gap": 8, - "alignItems": "center", - "stroke": { - "align": "inside", - "thickness": { - "top": 1 - }, - "fill": "$--border" - }, - "children": [ - { - "type": "text", - "id": "dp22type", - "fill": "$--muted-foreground", - "content": "Project", - "fontFamily": "Inter", - "fontSize": 12 - }, - { - "type": "text", - "id": "dp22sep", - "fill": "$--muted-foreground", - "content": "/", - "fontFamily": "Inter", - "fontSize": 12 - }, - { - "type": "text", - "id": "dp22title", - "fill": "$--foreground", - "content": "Build Laputa App", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "dp22badge", - "name": "Modified Badge", - "fill": "$--accent-yellow", - "cornerRadius": 3, - "padding": [ - 1, - 5 - ], - "children": [ - { - "type": "text", - "id": "dp22bl", - "fill": "#ffffff", - "content": "M", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "dp30", - "x": 1840, - "y": 22505, - "name": "NoteStatus — State Transitions", - "width": 960, - "height": "fit_content(300)", - "fill": "$--card", - "layout": "vertical", - "children": [ - { - "type": "text", - "id": "dp30t", - "fill": "$--muted-foreground", - "content": "State Transition Flow", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "600", - "textTransform": "uppercase", - "letterSpacing": 1, - "width": "fill_container", - "padding": [ - 8, - 16 - ] - }, - { - "type": "frame", - "id": "dp31", - "name": "Flow", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "dp31a", - "name": "Create", - "fill": "$--accent-green", - "cornerRadius": 8, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "text", - "id": "dp31at", - "fill": "#ffffff", - "content": "Create Note → Green Dot", - "fontFamily": "Inter", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "dp31arr1", - "fill": "$--muted-foreground", - "content": "→", - "fontFamily": "Inter", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "dp31b", - "name": "Save", - "fill": "$--muted", - "cornerRadius": 8, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "text", - "id": "dp31bt", - "fill": "$--foreground", - "content": "Cmd+S → Dot Removed", - "fontFamily": "Inter", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "dp31arr2", - "fill": "$--muted-foreground", - "content": "→", - "fontFamily": "Inter", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "dp31c", - "name": "Edit+Save", - "fill": "$--accent-orange", - "cornerRadius": 8, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "text", - "id": "dp31ct", - "fill": "#ffffff", - "content": "Edit Existing → Orange Dot", - "fontFamily": "Inter", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "dp31arr3", - "fill": "$--muted-foreground", - "content": "→", - "fontFamily": "Inter", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "dp31d", - "name": "Commit", - "fill": "$--muted", - "cornerRadius": 8, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "text", - "id": "dp31dt", - "fill": "$--foreground", - "content": "Git Commit → Dot Removed", - "fontFamily": "Inter", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "children": [ - { - "alignItems": "center", - "children": [ - { - "content": "🔍", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 16, - "fontWeight": "normal", - "id": "PjHq0", - "name": "searchIcon", - "type": "text" - }, - { - "content": "Search in all notes...", - "fill": "#666680", - "fontFamily": "Inter", - "fontSize": 15, - "fontWeight": "normal", - "id": "rkrbE", - "name": "searchInput", - "textGrowth": "fixed-width", - "type": "text", - "width": "fill_container" - }, - { - "alignItems": "center", - "children": [ - { - "alignItems": "center", - "children": [ - { - "content": "Keyword", - "fill": "#CCCCDD", - "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "R5D8g", - "name": "kwText", - "type": "text" - } - ], - "cornerRadius": 4, - "fill": "#4C4C6D", - "id": "mcpPa", - "name": "kwBadge", - "padding": [ - 4, - 8 - ], - "type": "frame" - }, - { - "alignItems": "center", - "children": [ - { - "content": "Semantic", - "fill": "#666680", - "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "NJYVj", - "name": "semText", - "type": "text" - } - ], - "cornerRadius": 4, - "fill": "#33334D", - "id": "W1DvY", - "name": "semBadge", - "padding": [ - 4, - 8 - ], - "type": "frame" - } - ], - "gap": 4, - "id": "1az05", - "name": "Mode Toggle", - "type": "frame" - } - ], - "cornerRadius": 8, - "fill": "#2A2A3C", - "gap": 10, - "height": 48, "id": "x1pHS", "name": "Search Bar", + "width": "fill_container", + "height": 48, + "fill": "#2A2A3C", + "cornerRadius": 8, + "gap": 10, "padding": [ 0, 16 ], - "type": "frame", - "width": "fill_container" - }, - { "alignItems": "center", "children": [ { - "content": "Search across all note contents — Cmd+Shift+F", - "fill": "#555570", + "type": "text", + "id": "PjHq0", + "name": "searchIcon", + "fill": "#8888AA", + "content": "🔍", "fontFamily": "Inter", - "fontSize": 13, - "fontWeight": "normal", - "id": "6O2iX", - "name": "hintText", - "type": "text" + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "rkrbE", + "name": "searchInput", + "fill": "#666680", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Search in all notes...", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "1az05", + "name": "Mode Toggle", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mcpPa", + "name": "kwBadge", + "fill": "#4C4C6D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "R5D8g", + "name": "kwText", + "fill": "#CCCCDD", + "content": "Keyword", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "W1DvY", + "name": "semBadge", + "fill": "#33334D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "NJYVj", + "name": "semText", + "fill": "#666680", + "content": "Semantic", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] } - ], + ] + }, + { + "type": "frame", "id": "73imz", - "justifyContent": "center", "name": "shortcutHint", + "width": "fill_container", "padding": [ 24, 16 ], - "type": "frame", - "width": "fill_container" - } - ], - "cornerRadius": 12, - "fill": "#1E1E2E", - "id": "3aG9b", - "layout": "vertical", - "name": "Full-text Search — Empty State", - "type": "frame", - "width": 500, - "x": 0, - "y": 25705 - }, - { - "children": [ - { + "justifyContent": "center", "alignItems": "center", "children": [ { - "content": "🔍", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 16, - "fontWeight": "normal", - "id": "9pswg", - "name": "icon2", - "type": "text" - }, - { - "content": "time management", - "fill": "#E0E0F0", - "fontFamily": "Inter", - "fontSize": 15, - "fontWeight": "normal", - "id": "IG4Oy", - "name": "input2", - "textGrowth": "fixed-width", "type": "text", - "width": "fill_container" - }, - { - "alignItems": "center", - "children": [ - { - "alignItems": "center", - "children": [ - { - "content": "Keyword", - "fill": "#CCCCDD", - "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "aL4o7", - "name": "kwLabel", - "type": "text" - } - ], - "cornerRadius": 4, - "fill": "#4C4C6D", - "id": "7jTLP", - "name": "kwActive", - "padding": [ - 4, - 8 - ], - "type": "frame" - }, - { - "alignItems": "center", - "children": [ - { - "content": "Semantic", - "fill": "#666680", - "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "Kq87g", - "name": "semLabel", - "type": "text" - } - ], - "cornerRadius": 4, - "fill": "#33334D", - "id": "cTlcM", - "name": "semInactive", - "padding": [ - 4, - 8 - ], - "type": "frame" - } - ], - "gap": 4, - "id": "hgbNF", - "name": "Mode Toggle", - "type": "frame" + "id": "6O2iX", + "name": "hintText", + "fill": "#555570", + "content": "Search across all note contents — Cmd+Shift+F", + "fontFamily": "Inter", + "fontSize": 13, + "fontWeight": "normal" } - ], - "cornerRadius": 8, - "fill": "#2A2A3C", - "gap": 10, - "height": 48, + ] + } + ] + }, + { + "type": "frame", + "id": "K1O2x", + "x": 560, + "y": 0, + "name": "Full-text Search — Results", + "enabled": false, + "width": 500, + "fill": "#1E1E2E", + "cornerRadius": 12, + "layout": "vertical", + "children": [ + { + "type": "frame", "id": "mNK9x", "name": "Search Bar", + "width": "fill_container", + "height": 48, + "fill": "#2A2A3C", + "cornerRadius": 8, + "gap": 10, "padding": [ 0, 16 ], - "type": "frame", - "width": "fill_container" - }, - { "alignItems": "center", "children": [ { - "content": "12 results — 148ms", - "fill": "#555570", + "type": "text", + "id": "9pswg", + "name": "icon2", + "fill": "#8888AA", + "content": "🔍", "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "ox2wo", - "name": "countText", - "type": "text" + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "IG4Oy", + "name": "input2", + "fill": "#E0E0F0", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "time management", + "fontFamily": "Inter", + "fontSize": 15, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "hgbNF", + "name": "Mode Toggle", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "7jTLP", + "name": "kwActive", + "fill": "#4C4C6D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "aL4o7", + "name": "kwLabel", + "fill": "#CCCCDD", + "content": "Keyword", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "cTlcM", + "name": "semInactive", + "fill": "#33334D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Kq87g", + "name": "semLabel", + "fill": "#666680", + "content": "Semantic", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] } - ], + ] + }, + { + "type": "frame", "id": "SAQ8v", "name": "countBar", + "width": "fill_container", "padding": [ 6, 16 ], - "type": "frame", - "width": "fill_container" - }, - { - "children": [ - { - "children": [ - { - "content": "How to Manage your Time", - "fill": "#E0E0F0", - "fontFamily": "Inter", - "fontSize": 14, - "fontWeight": "600", - "id": "tCIvh", - "name": "r1title", - "type": "text" - }, - { - "content": "...how people can improve their time management skills. They gathered results in this article...", - "fill": "#888899", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal", - "id": "jAqxc", - "lineHeight": 1.4, - "name": "r1snippet", - "textGrowth": "fixed-width", - "type": "text", - "width": "fill_container" - }, - { - "alignItems": "center", - "children": [ - { - "children": [ - { - "content": "Essay", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "Peatz", - "name": "r1typeText", - "type": "text" - } - ], - "cornerRadius": 3, - "fill": "#33334D", - "id": "a4ghT", - "name": "r1type", - "padding": [ - 2, - 6 - ], - "type": "frame" - }, - { - "content": "score: 0.87", - "fill": "#555570", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "xS0iX", - "name": "r1score", - "type": "text" - } - ], - "gap": 8, - "id": "AP1fQ", - "name": "r1meta", - "type": "frame" - } - ], - "fill": "#2A2A3C", - "gap": 4, - "id": "g7JoL", - "layout": "vertical", - "name": "Result Item — Selected", - "padding": [ - 10, - 16 - ], - "type": "frame", - "width": "fill_container" - }, - { - "children": [ - { - "content": "On solo work, self-reflection and decision fatigue", - "fill": "#C0C0D0", - "fontFamily": "Inter", - "fontSize": 14, - "id": "eSx2r", - "name": "r2title", - "type": "text" - }, - { - "content": "...I organize my time carefully, create recurring activities, block time on my calendar...", - "fill": "#666680", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal", - "id": "MB5C8", - "lineHeight": 1.4, - "name": "r2snippet", - "textGrowth": "fixed-width", - "type": "text", - "width": "fill_container" - }, - { - "alignItems": "center", - "children": [ - { - "children": [ - { - "content": "Evergreen", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "lVC0y", - "name": "r2typeText", - "type": "text" - } - ], - "cornerRadius": 3, - "fill": "#33334D", - "id": "DZDtT", - "name": "r2type", - "padding": [ - 2, - 6 - ], - "type": "frame" - }, - { - "content": "score: 0.75", - "fill": "#555570", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "q5ohu", - "name": "r2score", - "type": "text" - } - ], - "gap": 8, - "id": "kUzQY", - "name": "r2meta", - "type": "frame" - } - ], - "gap": 4, - "id": "wa3Pe", - "layout": "vertical", - "name": "Result Item", - "padding": [ - 10, - 16 - ], - "type": "frame", - "width": "fill_container" - }, - { - "children": [ - { - "content": "Time Management Is About More Than Life Hacks", - "fill": "#C0C0D0", - "fontFamily": "Inter", - "fontSize": 14, - "fontWeight": "normal", - "id": "fDBcr", - "name": "r3title", - "type": "text" - }, - { - "content": "...the results ran counter to popular admonitions of either the virtues or the detriments of multitasking...", - "fill": "#666680", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal", - "id": "9X1rc", - "lineHeight": 1.4, - "name": "r3snippet", - "textGrowth": "fixed-width", - "type": "text", - "width": "fill_container" - }, - { - "alignItems": "center", - "children": [ - { - "children": [ - { - "content": "Reading", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "ql9Q1", - "name": "r3typeText", - "type": "text" - } - ], - "cornerRadius": 3, - "fill": "#33334D", - "id": "IHIHs", - "name": "r3type", - "padding": [ - 2, - 6 - ], - "type": "frame" - }, - { - "content": "score: 0.73", - "fill": "#555570", - "fontFamily": "Inter", - "fontSize": 10, - "fontWeight": "normal", - "id": "XQs3c", - "name": "r3score", - "type": "text" - } - ], - "gap": 8, - "id": "gMuVI", - "name": "r3meta", - "type": "frame" - } - ], - "gap": 4, - "id": "EATNG", - "layout": "vertical", - "name": "Result Item", - "padding": [ - 10, - 16 - ], - "type": "frame", - "width": "fill_container" - } - ], - "id": "cGRXu", - "layout": "vertical", - "name": "Results List", - "type": "frame", - "width": "fill_container" - } - ], - "cornerRadius": 12, - "fill": "#1E1E2E", - "id": "K1O2x", - "layout": "vertical", - "name": "Full-text Search — Results", - "type": "frame", - "width": 500, - "x": 600, - "y": 25705 - }, - { - "children": [ - { "alignItems": "center", "children": [ { - "content": "🔍", - "fill": "#8888AA", - "fontFamily": "Inter", - "fontSize": 16, - "fontWeight": "normal", - "id": "nrIc1", - "name": "icon3", - "type": "text" - }, - { - "content": "xyznonexistent", - "fill": "#E0E0F0", - "fontFamily": "Inter", - "fontSize": 15, - "fontWeight": "normal", - "id": "nrIc2", - "name": "input3", - "textGrowth": "fixed-width", "type": "text", - "width": "fill_container" - }, + "id": "ox2wo", + "name": "countText", + "fill": "#555570", + "content": "12 results — 148ms", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "cGRXu", + "name": "Results List", + "width": "fill_container", + "layout": "vertical", + "children": [ { - "alignItems": "center", + "type": "frame", + "id": "g7JoL", + "name": "Result Item — Selected", + "width": "fill_container", + "fill": "#2A2A3C", + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 16 + ], "children": [ { - "alignItems": "center", - "children": [ - { - "content": "Keyword", - "fill": "#CCCCDD", - "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "nrIc3", - "type": "text" - } - ], - "cornerRadius": 4, - "fill": "#4C4C6D", - "id": "nrIc4", - "padding": [ - 4, - 8 - ], - "type": "frame" + "type": "text", + "id": "tCIvh", + "name": "r1title", + "fill": "#E0E0F0", + "content": "How to Manage your Time", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" }, { + "type": "text", + "id": "jAqxc", + "name": "r1snippet", + "fill": "#888899", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "...how people can improve their time management skills. They gathered results in this article...", + "lineHeight": 1.4, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "AP1fQ", + "name": "r1meta", + "gap": 8, "alignItems": "center", "children": [ { - "content": "Semantic", - "fill": "#666680", + "type": "frame", + "id": "a4ghT", + "name": "r1type", + "fill": "#33334D", + "cornerRadius": 3, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "Peatz", + "name": "r1typeText", + "fill": "#8888AA", + "content": "Essay", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "xS0iX", + "name": "r1score", + "fill": "#555570", + "content": "score: 0.87", "fontFamily": "Inter", - "fontSize": 11, - "fontWeight": "normal", - "id": "nrIc5", - "type": "text" + "fontSize": 10, + "fontWeight": "normal" } - ], - "cornerRadius": 4, - "fill": "#33334D", - "id": "nrIc6", - "padding": [ - 4, - 8 - ], - "type": "frame" + ] } - ], + ] + }, + { + "type": "frame", + "id": "wa3Pe", + "name": "Result Item", + "width": "fill_container", + "layout": "vertical", "gap": 4, - "id": "nrIc7", - "name": "Mode Toggle", - "type": "frame" + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "eSx2r", + "name": "r2title", + "fill": "#C0C0D0", + "content": "On solo work, self-reflection and decision fatigue", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "MB5C8", + "name": "r2snippet", + "fill": "#666680", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "...I organize my time carefully, create recurring activities, block time on my calendar...", + "lineHeight": 1.4, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "kUzQY", + "name": "r2meta", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "DZDtT", + "name": "r2type", + "fill": "#33334D", + "cornerRadius": 3, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "lVC0y", + "name": "r2typeText", + "fill": "#8888AA", + "content": "Evergreen", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "q5ohu", + "name": "r2score", + "fill": "#555570", + "content": "score: 0.75", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "EATNG", + "name": "Result Item", + "width": "fill_container", + "layout": "vertical", + "gap": 4, + "padding": [ + 10, + 16 + ], + "children": [ + { + "type": "text", + "id": "fDBcr", + "name": "r3title", + "fill": "#C0C0D0", + "content": "Time Management Is About More Than Life Hacks", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "9X1rc", + "name": "r3snippet", + "fill": "#666680", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "...the results ran counter to popular admonitions of either the virtues or the detriments of multitasking...", + "lineHeight": 1.4, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "gMuVI", + "name": "r3meta", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "IHIHs", + "name": "r3type", + "fill": "#33334D", + "cornerRadius": 3, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "ql9Q1", + "name": "r3typeText", + "fill": "#8888AA", + "content": "Reading", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "XQs3c", + "name": "r3score", + "fill": "#555570", + "content": "score: 0.73", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + } + ] } - ], - "cornerRadius": 8, - "fill": "#2A2A3C", - "gap": 10, - "height": 48, + ] + } + ] + }, + { + "type": "frame", + "id": "nrIcZ", + "x": 1338, + "y": 468, + "name": "Full-text Search — No Results", + "width": 500, + "fill": "#1E1E2E", + "cornerRadius": 12, + "layout": "vertical", + "children": [ + { + "type": "frame", "id": "nrIc8", "name": "Search Bar", + "width": "fill_container", + "height": 48, + "fill": "#2A2A3C", + "cornerRadius": 8, + "gap": 10, "padding": [ 0, 16 ], - "type": "frame", - "width": "fill_container" - }, - { "alignItems": "center", "children": [ { - "content": "No results found", - "fill": "#888899", + "type": "text", + "id": "nrIc1", + "name": "icon3", + "fill": "#8888AA", + "content": "🔍", "fontFamily": "Inter", - "fontSize": 14, - "fontWeight": "normal", - "id": "nrIcA", - "type": "text" + "fontSize": 16, + "fontWeight": "normal" }, { - "content": "Try different keywords or switch to semantic search", - "fill": "#555570", + "type": "text", + "id": "nrIc2", + "name": "input3", + "fill": "#E0E0F0", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "xyznonexistent", "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal", - "id": "nrIcB", - "type": "text" + "fontSize": 15, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "nrIc7", + "name": "Mode Toggle", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nrIc4", + "fill": "#4C4C6D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "nrIc3", + "fill": "#CCCCDD", + "content": "Keyword", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "nrIc6", + "fill": "#33334D", + "cornerRadius": 4, + "padding": [ + 4, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "nrIc5", + "fill": "#666680", + "content": "Semantic", + "fontFamily": "Inter", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] } - ], - "gap": 8, + ] + }, + { + "type": "frame", "id": "nrIc9", - "justifyContent": "center", - "layout": "vertical", "name": "No Results Body", + "width": "fill_container", + "layout": "vertical", + "gap": 8, "padding": [ 32, 16 ], - "type": "frame", - "width": "fill_container" + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "nrIcA", + "fill": "#888899", + "content": "No results found", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "nrIcB", + "fill": "#555570", + "content": "Try different keywords or switch to semantic search", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] } - ], - "cornerRadius": 12, - "fill": "#1E1E2E", - "id": "nrIcZ", - "layout": "vertical", - "name": "Full-text Search — No Results", - "type": "frame", - "width": 500, - "x": 1200, - "y": 25705 + ] } ], "themes": {