🚀 Universe Canvas V3 - Quick User Guide

📖 How to Use

Main Toolbar (Top of screen)

1. Add Section 🟢 - Adds new section at bottom of canvas
2. Show/Hide Labels 🏷️ - Toggle section name/layout labels

⚙️ Config Panel Actions (When section selected)

🟢 Add Sections

• Add Inside - Create child section (nested container)
• Add After - Add sibling section below
• Add Before - Add sibling section above

🔄 Reorder

• Move Up - Swap with section above
• Move Down - Swap with section below

🎨 Layout & Properties

Section Properties:

• Label - Change section name
• Layout Type - Flexbox or Grid

Flexbox Controls:

• Direction - Row → (horizontal) or Column ↓ (vertical)
• Justify - Start / Center / End / Space Between / Around / Evenly
• Align - Start / Center / End / Stretch / Baseline
• Gap - Spacing between items (e.g., "16px")

📏 Size & Spacing

Width:

• Custom value (e.g., "50%", "300px", "auto")
• Presets: Auto / 50% / 100%

Min Height:

• Custom value (e.g., "200px", "50vh")
• Presets: S (100px) / M (300px) / L (500px) / Full (100vh)

Padding:

• Custom value (e.g., "20px", "2rem")
• Presets: 0 / S (8px) / M (16px) / L (32px)

🗑️ Danger Zone

• Delete Section - Remove section permanently

🎯 Common Workflows

Create Nested Layout

1. Click a section
2. Click "Add Inside" → Creates child
3. Click "Add Inside" again → Creates another child
4. Configure each child independently
5. Result: Parent with multiple children

Build 2-Column Layout

1. Click Main Content section
2. Click "Add Inside" twice → Creates 2 children
3. In parent config: Set Direction = Row →
4. Click first child → Set Width = 30%
5. Result: Left (30%) + Right (auto) columns

Resize Section

1. Click section
2. In Size & Spacing:
   • Click M (300px) for medium height
   • Click L (32px) for large padding
3. Result: Instantly resized

Reorder Sections

1. Click section to move
2. Click "Move Up" or "Move Down"
3. Result: Section swapped with sibling

💡 Pro Tips

Keyboard Navigation

• Click sections to select
• Use config panel for all modifications
• No need to switch modes!

Visual Feedback

• Purple glow = Hovered section
• Brighter border = Selected section
• Labels = Show section name + layout type

Smart Defaults

• New sections: Flexbox, Column, 200px min-height
• 16px gap and padding
• Auto width

Nested Containers

• Sections can contain sections infinitely
• Each child is independent
• Parent controls overall layout (Row/Column)
• Children control their own size/style

🎨 Layout Patterns

Header Layout (Logo + Nav)

Header (Flexbox, Row)
├─ Logo Section (Width: auto)
└─ Nav Section (Width: 100%)

Sidebar Layout

Main Container (Flexbox, Row)
├─ Sidebar (Width: 25%)
└─ Content (Width: auto)

Card Grid

Cards Container (Flexbox, Row, Wrap)
├─ Card 1 (Width: 30%)
├─ Card 2 (Width: 30%)
└─ Card 3 (Width: 30%)

Full-Page Section

Hero Section
- Min Height: Full (100vh)
- Justify: Center
- Align: Center

🔧 Troubleshooting

Q: Section not showing?
A: Check Min Height - might be too small

Q: Items not laying out correctly?
A: Check parent Flexbox Direction (Row vs Column)

Q: Can't move section?
A: Must have siblings to reorder (can't move only child)

Q: Delete not working?
A: Can't delete root sections (Header/Main/Footer)

Q: Width not applying?
A: Parent must be Row direction for child width to work

🎯 Next Steps

Coming Soon:

• Drag & drop modules from palette
• Module configuration per section
• Save/Load canvas layouts
• Copy/Paste sections
• Undo/Redo

Current Status: ✅ Core functionality complete!

📚 Key Concepts

Section Types

• Container - Can hold children (nestable)
• Content - Will hold modules/widgets (future)

Layout Types

• Flexbox - One-dimensional (row or column)
• Grid - Two-dimensional (rows AND columns)

Responsive

• All sizes support CSS units (px, %, vh, rem)
• Use % for responsive width
• Use vh for full-viewport sections

Happy Building! 🚀