STORYBOOK EDITOR - LAYOUT MOCKUPS ═══════════════════════════════════════════════════════════════════════════════ Color Legend: ████ aubergine-900 (background) ████ aubergine-800 (panels) ████ gold-500 (accents) OPTION 1: THREE-COLUMN LAYOUT (Wide Screen Focus) ═══════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ⚡ Storybook ◉ ○ ○ [Validate] [Save] │ aubergine-800 ├─────────┬───────────────────────────────────────────────────┬───────────────┤ │ FILES │ EDITOR │ INSPECTOR │ │ │ │ │ │ 📁 alice│ character WhiteRabbit: Rabbit from Wonderland... │ WhiteRabbit │ │ └─ 📁 w│ │ ─────────────│ │ ├─ ch│ use schema::core_enums::{Size, EmotionalState}; │ │ │ ├─ ch│ use schema::templates::WonderlandCreature; │ Type: │ │ └─ wh│ │ Character │ │ 📁 schem│ character WhiteRabbit: Rabbit from WonderlandCr...│ │ │ └─ temp│ // Physical traits │ Species: │ │ │ current_size: small │ Rabbit │ │ [Search]│ wears_waistcoat: true │ │ │ │ has_pocket_watch: true │ Templates: │ │ Recent │ │ • WonderlandC.│ │ ───── │ // Personality │ • CourtMember │ │ • white│ emotional_state: frightened │ │ │ • alice│ awareness_of_absurdity: 0.3 │ Fields: 12 │ │ │ │ Prose: 1 │ │ │ ---backstory │ │ │ │ Always late, always anxious. Herald of │ Validation │ │ │ the Queen, perpetually checking his │ ─────────────│ │ │ pocket watch. │ ✓ All valid │ │ │ --- │ │ │ 240px │ │ 320px │ ├─────────┴───────────────────────────────────────────────────┴───────────────┤ │ 🟢 Ready alice-in-wonderland (main) 12 characters, 7 relationships │ └─────────────────────────────────────────────────────────────────────────────┘ OPTION 2: TWO-COLUMN WITH BOTTOM DIAGNOSTICS ═══════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ⚡ Storybook Editor 🔍 Search ✓ Validate 💾 Save ⚙️ │ ├─────────┬───────────────────────────────────────────────────────────────────┤ │ FILES │ EDITOR │ │ │ │ │ 📂 world│ character MadHatter: Human from MadTeaPartyMember { │ │ ├─ 📂 c│ │ │ │ ├─ a│ // Physical traits │ │ │ ├─ w│ current_size: normal │ │ │ └─ m│ wears_top_hat: true ┌──────────────┐│ │ ├─ 📂 i│ hat_size_label: "10/6" │ QUICK ACTIONS││ │ └─ 📂 r│ │ ────────────│││ │ │ // Personality │ Add Field ││ │ 📂 schema│ emotional_state: confused │ Add Prose ││ │ ├─ core│ follows_logic: false │ Duplicate ││ │ ├─ temp│ awareness_of_absurdity: 0.1 │ Delete Char ││ │ └─ spec│ │ View Graph ││ │ │ // Tea party state └──────────────┘│ │ [+ New] │ stuck_at_teatime: true │ │ │ current_seat_position: 1 │ │ 280px │ │ ├─────────┼───────────────────────────────────────────────────────────────────┤ │ DIAGNOSTICS & VALIDATION │ │ ──────────────────────────────────────────────────────────────────────────│ │ ✓ No errors (validated 0.3s ago) [Run Tests] │ │ │ │ INFO: MadHatter inherits 8 fields from MadTeaPartyMember │ │ INFO: Cross-file reference to schema/templates.sb resolved │ │ │ │ 180px │ └─────────────────────────────────────────────────────────────────────────────┘ OPTION 3: FOCUSED SINGLE-PANEL (Mobile/Compact) ═══════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ☰ WhiteRabbit.sb ✓ Valid 💾 Save │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ use schema::templates::WonderlandCreature; │ │ │ │ character WhiteRabbit: Rabbit from WonderlandCreature { │ │ // Physical traits │ │ current_size: small │ │ wears_waistcoat: true │ │ has_pocket_watch: true │ │ │ │ // Personality │ │ emotional_state: frightened │ │ awareness_of_absurdity: 0.3 │ │ │ │ ---backstory │ │ Always late, always anxious. │ │ --- │ │ } │ │ │ │ │ ├─────────────────────────────────────────────────────────────────────────────┤ │ ← Back to Files Templates: WonderlandCreature, CourtMember │ └─────────────────────────────────────────────────────────────────────────────┘ DETAILED THREE-COLUMN BREAKDOWN ═══════════════════════════════════════════════════════════════════════════════ ┌──────────────────────── TITLE BAR (48px) ───────────────────────────────────┐ │ │ │ ⚡ Storybook Editor alice-in-wonderland ◉ Validate │ │ ↑ ↑ ↑ │ │ Logo + Title Project Name Primary CTA │ │ (gold accent) (muted) (gold button)│ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌──────────── LEFT: FILE BROWSER (240-320px, resizable) ─────────────────────┐ │ │ │ FILES [🔍] [+] │ │ ═════ │ │ │ │ 📂 alice-in-wonderland ← Project root │ │ ├─ 📂 world ← Expandable tree │ │ │ ├─ 📂 characters │ │ │ │ ├─ 📄 alice.sb │ │ │ │ ├─ 📄 white_rabbit.sb ← Selected (gold left border) │ │ │ │ ├─ 📄 cheshire_cat.sb │ │ │ │ └─ 📄 mad_tea_party.sb │ │ │ ├─ 📂 institutions │ │ │ └─ 📂 relationships │ │ └─ 📂 schema │ │ ├─ 📄 core_enums.sb │ │ ├─ 📄 templates.sb │ │ └─ 📄 beings.sb │ │ │ │ ───────────────────────── │ │ │ │ RECENT ← Collapsible section │ │ • white_rabbit.sb │ │ • alice.sb │ │ • wonderland_relationships.sb │ │ │ │ ───────────────────────── │ │ │ │ [+ New Character] ← Quick actions │ │ [+ New Relationship] │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌──────────────── CENTER: CODE EDITOR (flex, main area) ─────────────────────┐ │ │ │ white_rabbit.sb Modified • Auto-save: on │ │ ━━━━━━━━━━━━━━━━ ↑ File tab │ │ ↑ Status indicators │ │ ┌─ Line numbers │ │ │ │ │ 1 //! White Rabbit: The anxious herald of Wonderland │ │ 2 │ │ 3 use schema::core_enums::{Size, EmotionalState}; │ │ 4 use schema::templates::WonderlandCreature; │ │ 5 │ │ 6 character WhiteRabbit: Rabbit from WonderlandCreature { │ │ 7 // Physical traits │ │ 8 current_size: small │ │ 9 wears_waistcoat: true │ │ 10 has_pocket_watch: true │ │ 11 │ │ 12 // Personality │ │ 13 emotional_state: frightened │ │ 14 awareness_of_absurdity: 0.3 │ │ 15 │ │ 16 ---backstory ← Prose block marker │ │ 17 Always late, always anxious. Herald of (gold accent) │ │ 18 the Queen of Hearts, perpetually checking │ │ 19 his pocket watch and muttering about time. │ │ 20 --- │ │ 21 } │ │ 22 │ │ │ │ ┌─ Inline validation indicators │ │ └─ Line 6: ✓ WonderlandCreature template resolved │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌───────────── RIGHT: INSPECTOR/METADATA (280-400px, resizable) ─────────────┐ │ │ │ INSPECTOR [⚙️] │ │ ═════════ │ │ │ │ WhiteRabbit ← Current entity │ │ ━━━━━━━━━━━━ (gold underline) │ │ │ │ Type: Character │ │ Species: Rabbit │ │ File: world/characters/white_rabbit.sb │ │ │ │ ───────────────────────── │ │ │ │ TEMPLATES │ │ • WonderlandCreature [View] ← Clickable │ │ • CourtMember [View] │ │ │ │ FIELDS (12) │ │ • current_size: small │ │ • wears_waistcoat: true │ │ • has_pocket_watch: true │ │ • emotional_state: frightened │ │ • awareness_of_absurdity: 0.3 │ │ • loyalty_to_queen: 0.95 │ │ ... [6 more] │ │ │ │ PROSE BLOCKS (1) │ │ • backstory (47 words) │ │ │ │ ───────────────────────── │ │ │ │ VALIDATION ✓ │ │ All checks passed │ │ Last validated: 2s ago │ │ │ │ [◉ Validate Now] ← Gold button │ │ │ │ ───────────────────────── │ │ │ │ RELATIONSHIPS (2) │ │ • AliceAndWhiteRabbit [View] │ │ • WhiteRabbit_Anxiety [View] │ │ │ │ [+ Add Relationship] │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────── BOTTOM: STATUS BAR (32px) ──────────────────────────┐ │ │ │ 🟢 Ready alice-in-wonderland (main) 12 char 7 rel Ln 14 Col 8│ │ ↑ ↑ ↑ ↑ │ │ Status Project & Branch Stats Cursor │ │ (green) (muted text) (muted) (muted) │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ALTERNATIVE: RELATIONSHIP GRAPH VIEW ═══════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ⚡ Storybook Editor › Relationship Graph [Code] [Graph] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ●─────── pursuer ────────● │ │ Alice WhiteRabbit │ │ ● ● │ │ ╲ ╱ │ │ ╲ seeker_of_ ╱ │ │ ╲ guidance ╱ │ │ ╲ ╱ │ │ ●─────────────● │ │ CheshireCat │ │ ● │ │ │ │ │ amused │ │ observer │ │ │ │ │ ● │ │ MadHatter ●────●────● MarchHare │ │ co- │ │ conspirators │ │ │ │ [Legend: ● Character ── Relationship Gold = Selected] │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ UI ELEMENT DETAILS ═══════════════════════════════════════════════════════════════════════════════ ┌─ Button Styles ──────────────────────────────────────────────────────────┐ │ │ │ PRIMARY (Gold): [◉ Validate] │ │ ↑ gold-500 bg, aubergine-900 text │ │ │ │ SECONDARY (Ghost): [○ Save] │ │ ↑ transparent bg, aubergine-600 border │ │ │ │ TERTIARY (Text): View Edit Delete │ │ ↑ gold-500 text, no background │ │ │ │ ICON ONLY: [🔍] [+] [⚙️] │ │ ↑ 32x32px touch target │ │ │ └───────────────────────────────────────────────────────────────────────────┘ ┌─ Input Field ────────────────────────────────────────────────────────────┐ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ Search files... │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ ↑ aubergine-800 bg, warm-gray-400 placeholder │ │ ↑ Focus: gold-500 border + glow │ │ │ └───────────────────────────────────────────────────────────────────────────┘ ┌─ List Item States ───────────────────────────────────────────────────────┐ │ │ │ 📄 alice.sb ← Default (transparent bg) │ │ 📄 white_rabbit.sb ← Hover (aubergine-700 bg) │ │ ┃ 📄 cheshire_cat.sb ← Selected (gold-500 left border) │ │ 📄 mad_tea_party.sb │ │ │ └───────────────────────────────────────────────────────────────────────────┘ ┌─ Toast Notification ─────────────────────────────────────────────────────┐ │ │ │ ┌───────────────────────────────────────────────────┐ ← Top-right │ │ │ ✓ Validation passed [×] │ position │ │ │ All 12 characters valid │ │ │ └───────────────────────────────────────────────────┘ │ │ ↑ aubergine-700 bg, green icon, auto-dismiss 3s │ │ │ └───────────────────────────────────────────────────────────────────────────┘ SPACING REFERENCE (8px grid) ═══════════════════════════════════════════════════════════════════════════════ Panel Padding: 24px (3 × 8px) Section Spacing: 16px (2 × 8px) Element Spacing: 8px (1 × 8px) Tight Spacing: 4px (0.5 × 8px) Button Padding: 8px × 16px (vertical × horizontal) Input Padding: 8px × 12px List Item Height: 32px (4 × 8px) Title Bar: 48px (6 × 8px) Status Bar: 32px (4 × 8px) INTERACTION PATTERNS ═══════════════════════════════════════════════════════════════════════════════ File Selection: Click file → Highlight with gold border → Load in editor → Show metadata Validation: Press Validate → Spinner appears → Success/error toast → Update badges Auto-save: Type → 2s debounce → Save indicator → "Saved" confirmation Panel Resize: Hover divider → Cursor changes → Drag → Live resize → Snap to min/max Focus Navigation: Tab → Next focusable → Visible gold outline Shift+Tab → Previous focusable Escape → Close modal/blur input ═══════════════════════════════════════════════════════════════════════════════ END OF MOCKUPS Which layout speaks to you? We can mix and match elements. The three-column is great for wide screens, two-column is more focused.