Mockups

Visual previews of what we're building. Each card links to a live page. Cards tagged Done are shipped to production. Mockup = preview only.

World-Class CMS

🎛️ Done

Section Panel — Full Field List

What the operator sees clicking a top-level section. Background, Border, Shadow, Color, Padding — all the tools any image tool has.

Open mockup

✋ Mockup

Section Edit Mode (page drag)

First try — drag on the actual page to reorder. Works but messy. See Structure panel mockup for the better pattern.

Open mockup

🌲 Mockup

Structure Panel (Elementor-style)

Tree of sections/containers/widgets on the left, page stays normal on the right. Drag, reorder, nest. No overlays on the page.

Open mockup

⇕ Mockup

Structure Panel + Resize

Same as Structure, plus dashed line drag handles. Hover to reveal. Snap to 100/200/400/600/800px. Alt = free. No extra chrome.

Open mockup

📱 Mockup

Mobile — per-section 2-col toggle

Cards/galleries stay 2-col. Text stacks. Per-section override + ratio buttons + auto-collapse breakpoint. Live preview at viewport width.

Open mockup

🌲 Example

Real example — Tree Academy

Same homepage, 3 viewports. S-1/S-5/S-8/S-9 stack. S-3 Services (cards) keeps 2-col. See badges (top-right) showing the toggle state per section.

Open mockup

⚙️ Mockup

Where the toggle lives — Inspector

Click a section → Layout tab → Responsive group below Columns/Gap. 3 controls + live preview at 390px. Badge on each section shows current state.

Open mockup

🧠 Mockup

FvRE — section type detection

The brains behind the toggle. Heuristics + scores + type enum (HERO/FULL/INNER/COLS/CARDS/TEXT/CTA/FOOTER). Defaults drive the toggle; operator can override.

Open mockup

🧩 Mockup

Widget library + insert + renumber

23 widgets. Manual + AI paths. Click slot, drag from library, or quick-add. Slots = addresses, UUIDs stable. Renumber is free.

Open mockup

📍 Mockup

Bottom bar placement + GDPR

Bar moves to safest empty slot. Stacks above app bars, hides for GDPR, floats top when chat bubbles squat the corner. Re-evaluates on scroll/resize/mutation.

Open mockup

</> Mockup

Dev mode toggle — the single entry point

Floating icon, bottom-right, 44pt. OFF = clean visitor page. ON = chips, dock pills, panels, outlines all appear. Uses existing setDevMode. Drag to reposition.

Open mockup

▦ Mockup

Samsung-style edge panel

4px edge handle. Swipe in → 2-col grid of 12 CMS tools. Tabbed (Tools / Recent). Persistent footer with + Section/Container/Widget. Future: second-swipe reveals paired panel.

Open mockup

📐 v2 — Refined

Edge panel v2 — 33% max, dock untouched

Additive to dock. Width: 220px mobile (56%), 280px tablet (36%), 360px desktop (25%), hard cap 33vw. Dock stays as-is. Click icon → dock panel opens, edge slides out.

Open mockup

▥ v3 — Narrow

Edge panel v3 — single column, way narrower

140px mobile (36%), 160px tablet (21%), 180px desktop (12.5%). Icon list with name + tooltip. Super-narrow 72px (18%) as floor. App stays mostly visible.

Open mockup

▦ v4 — harsh