Sienna Meridian Satterwhite
16deb5d237
BREAKING CHANGES: - Relationship syntax now requires blocks for all participants - Removed self/other perspective blocks from relationships - Replaced 'guard' keyword with 'if' for behavior tree decorators Language Features: - Add tree-sitter grammar with improved if/condition disambiguation - Add comprehensive tutorial and reference documentation - Add SBIR v0.2.0 binary format specification - Add resource linking system for behaviors and schedules - Add year-long schedule patterns (day, season, recurrence) - Add behavior tree enhancements (named nodes, decorators) Documentation: - Complete tutorial series (9 chapters) with baker family examples - Complete reference documentation for all language features - SBIR v0.2.0 specification with binary format details - Added locations and institutions documentation Examples: - Convert all examples to baker family scenario - Add comprehensive working examples Tooling: - Zed extension with LSP integration - Tree-sitter grammar for syntax highlighting - Build scripts and development tools Version Updates: - Main package: 0.1.0 → 0.2.0 - Tree-sitter grammar: 0.1.0 → 0.2.0 - Zed extension: 0.1.0 → 0.2.0 - Storybook editor: 0.1.0 → 0.2.0
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.
|