Mockup — Widget library + insert + renumber

Two paths: AI generates sections, OR the operator picks from a widget library. Both insert into the structure tree with a slot number. Renumbering is automatic — slots are just addresses, not fixed IDs. The widget tree, the AI tree, and the renumbering all share one rule: slot = position-in-tree.

🌲 Structure tree with insert + renumber

DYNAMIC NUMBERING

Slots are addresses, not IDs. Insert anywhere → everything after renumbers. The operator sees the new index in green.

S-1 ▭ Hero HERO

+ Insert here

S-2 ▭ About TEXT

+ ↳ insert Services (cards) here

S-3 NEW ▦ Services CARDS

+ Insert here

S-4 ▭ Testimonials TEXT

+ Insert here

S-5 ▭ CTA CTA

+ Insert here

S-6 ▭ Footer FOOTER

🧩 Widget library — click to insert

23 WIDGETS

Hero

section · full

Cards

section · 2-col

Text block

section · text

CTA

section · cta

Image

widget · media

Gallery

section · 3-col

Testimonial

widget · quote

Pricing

section · 3-col

Contact form

section · form

Team grid

section · 3-col

Icon list

widget · list

Accordion

widget · faq

🤖 AI path — generate or modify

LLM POWERED

AI prompt

Add a testimonials section between About and CTA, with 3 quotes from teachers.

AI plan

✓ Insert new section at slot 4 (after S-2 About)
✓ Type: TEXT (testimonial widget)
✓ 3 child widgets, each a Testimonial
✓ Renumber: S-3 → S-4, S-4 → S-5, S-5 → S-6
✓ Auto-detect on inserted section (override if wrong)

✏️ Manual path — pick widget + position

DRAG OR CLICK

Two ways to insert

1. Click a slot in the tree

Hover any tree node → a + button appears above and below. Click it → widget library opens → pick one → inserts at that position.

2. Drag from widget library

Drag any widget card from the library onto a slot in the tree. Blue line shows where it'll land. Drop → inserts.

3. Quick-add at end

The bottom bar's + Section / + Container / + Widget appends to the end of the tree.

🔢 Slot addressing — why renumbering is free

DATA MODEL

Old (brittle)

{
  "id": "S-3",
  "type": "section",
  "name": "Services"
}

Insert at S-2 → S-3 must move, all references break, IDs lie.

New (resilient)

{
  "slot": 3,        ← position
  "uuid": "a7f3...", ← stable ID
  "type": "section",
  "name": "Services"
}

Insert at slot 2 → slot 3..N renumber. UUIDs are stable. CSS selectors target UUIDs, not slots.

Display rule

function displayId(slot) {
  return `S-${slot}`;
}

// Renumber = re-index array.
// No ID changes, no CSS breaks.
// Operator sees the new slot
// in green, then it settles.

S-1, S-2, S-3 are labels, not IDs. They're regenerated from position on every render.

The full plan — three things that have to work together:

1. Widget library (23 widgets across 5 categories)

Section-level (creates a new top-level slot): Hero, Cards, Gallery, Pricing, Team grid, Contact form, CTA, Footer
Widget-level (goes inside a container): Heading, Text, Image, Button, Testimonial, Icon list, Accordion, Tabs, Divider, Spacer, Video, Icon, Social icons, Breadcrumb, Map
Each has a small preview thumbnail + name + category. Click → inserts at the chosen slot with sensible defaults
The library is a panel that opens when the operator clicks + Widget in the bottom bar, or a + next to a tree node, or drags onto a slot

2. Manual insert — three entry points

Slot in tree: hover any tree node → + button above + below. Click → library opens scoped to that slot
Drag from library: drag any widget card onto a slot. Blue line shows landing position. Drop → inserts
Bottom bar quick-add: + Section / + Container / + Widget — appends to the end. + Widget opens the library
All three paths share the same insert function: insertAt(slot, widgetType, options)

3. Renumbering is automatic

Slots are positions in an array, not IDs. Insert at position 2 → positions 2..N all renumber
Each section has a stable UUID generated on insert. CSS selectors, references, undo stack — all use UUIDs
The display label (S-3) is regenerated from position on every render. So it always reads correctly
The operator sees the new index in green for 2 seconds after insert, then it settles to white. Visual signal that something moved
AI inserts work the same way — the LLM's plan says "insert at slot 4", the system shifts positions and assigns a UUID

4. The data model change

Today: section has id: "S-3". Insert at S-2 breaks everything that referenced S-3
New: section has slot: 3 and uuid: "a7f3...". Insert at slot 2 → slot 3's section becomes slot 4, but its UUID stays the same. CSS that targeted the old S-3 still works because it uses UUID
Why now: the inspector is about to add per-section overrides (mobile toggle, custom CSS, animations). These need to survive renumbering. UUIDs make that possible

5. What the operator sees (the UX)

Tree shows clean slot numbers: S-1, S-2, S-3...
After insert, the new section is highlighted green, its slot label is green. Sections that moved have their slot labels briefly flash green too (the "settles" animation)
AI plan preview shows the renumbering explicitly: "S-3 → S-4, S-4 → S-5, S-5 → S-6". Operator can reject the plan if the renumbering looks ugly
Bottom bar always visible. + Widget is the primary action (green). + Section / + Container are secondary

Widget library + manual insert + renumber — the operator flow

Two ways to insert

The full plan — three things that have to work together:

1. Widget library (23 widgets across 5 categories)

2. Manual insert — three entry points

3. Renumbering is automatic

4. The data model change

5. What the operator sees (the UX)