366 lines
33 KiB
Plaintext
366 lines
33 KiB
Plaintext
|
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.
|