Mockup — Dev mode toggle (the single entry point)

setDevMode(on) already exists. It's the floating Dev icon (44×44, dark with green </>). When OFF: only the icon is visible, sitting above any app UI. When ON: chips appear on sections, dock pills on the edges, panels open, inspector slides in. One toggle, the whole layer.

📱 Dev mode OFF (visitor mode)

PRODUCTION

DEV OFF

9:41 📶 🔋

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources

Get Started

Ready to bring trees to your classroom?

🏠Home

📚Books

📰News

👥Team

👤Account

📱 Dev mode ON (operator mode)

CMS LAYER

DEV ON

9:41 📶 🔋

S-1

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

S-3

What we offer

Books · News · Team · Resources

S-5

Get Started

Ready to bring trees to your classroom?

S-6

🏠Home

📚Books

📰News

👥Team

👤Account

▦ STR

⚙ INS

⊟ LAY

↶ HIS

+ Section

+ Widget

📐

FVRE

TRACE

S-3 · Services

Heading

Section type

Auto-collapse below

Background

📍 Dev toggle position — the rules

PLACEMENT

📍 Position

Default: bottom-right, 12px from edges, 70px above app bar
Draggable to any corner
Position persists in localStorage
safe-area-inset-* respected (iOS notch)

🎨 Style

44×44 round button (44pt touch target)
Dark when OFF, green when ON
Subtle drop shadow + 1px border
Hover: scale to 1.1
Active: glow halo when ON

🔌 What's gated

All dock pills (4 edges)
All section chips
All panels (inspector, structure, media, etc.)
Section outlines on hover
Selection / breadcrumb / dev tools

⚡ Triggers

Click toggle
Keyboard: Ctrl+Shift+D
URL param: ?dev=1
localStorage: fvcms.dev=1
Auth: dev role only (when backend available)

⚙️ The toggle implementation

CODE

// freshvibe-cms/cms/devToggle.js — the floating Dev icon
export function mountDevToggle({
  setDevMode,       // required: the existing setDevMode from install-editor
  getDevMode,       // required: isDevMode()
  persist = true,
}) {
  // Create the toggle element
  const btn = document.createElement('button');
  btn.className = 'fvcms-dev-toggle';
  btn.setAttribute('aria-label', 'Toggle Dev mode');
  btn.innerHTML = '</>';

  // Restore position from localStorage
  const pos = JSON.parse(localStorage.getItem('fvcms.devTogglePos') || 'null');
  if (pos) {
    btn.style.left = pos.x + 'px';
    btn.style.top  = pos.y + 'px';
  } else {
    btn.style.right = '12px';
    btn.style.bottom = '70px';  // above app bar
  }

  // Sync visual state with dev mode
  const sync = () => {
    const on = getDevMode();
    btn.classList.toggle('on', on);
    document.body.classList.toggle('fvcms-dev-on', on);
  };

  // Click toggles dev mode (uses existing setDevMode)
  btn.addEventListener('click', () => {
    setDevMode(!getDevMode());
    sync();
  });

  // Drag to reposition
  let drag = null;
  btn.addEventListener('pointerdown', (e) => {
    const r = btn.getBoundingClientRect();
    drag = { x: e.clientX - r.left, y: e.clientY - r.top };
    btn.setPointerCapture(e.pointerId);
  });
  btn.addEventListener('pointermove', (e) => {
    if (!drag) return;
    const x = e.clientX - drag.x, y = e.clientY - drag.y;
    btn.style.left = clamp(x, 0, innerWidth  - 44) + 'px';
    btn.style.top  = clamp(y, 0, innerHeight - 44) + 'px';
    btn.style.right = btn.style.bottom = 'auto';
  });
  btn.addEventListener('pointerup', (e) => {
    if (!drag) return;
    if (persist) {
      const r = btn.getBoundingClientRect();
      localStorage.setItem('fvcms.devTogglePos', JSON.stringify({ x: r.left, y: r.top }));
    }
    drag = null;
  });

  sync();
  document.body.appendChild(btn);
  return btn;
}

Why use the existing setDevMode, not invent a new toggle

It's already there — installEditor() exposes setDevMode and isDevMode. Adding a parallel toggle creates two ways to do the same thing, which is a bug source
It already controls the whole layer — chips, breadcrumb, panel-auto-open, outlines. Adding a new toggle means re-wiring all of that
Single source of truth — one boolean controls one thing. Anywhere in the code that needs to know "is the operator here?" reads isDevMode()
The Dev icon IS the UI for that toggle — floating, always visible (operator), off for visitors. A 44px round button is the standard pattern for "dev/debug" affordances (React DevTools, Vue Devtools, etc.)

What the Dev toggle does NOT do

It does not compete with the app's own bottom bar — the toggle sits above the app bar by 12-18px
It does not move when the app's bar moves — it has its own positioning logic (default bottom-right, draggable)
It does not show anything else CMS-related when OFF — the icon is the only thing visible. No pills, no chips, no labels. The visitor sees nothing
It does not require authentication in dev/demo mode — for the live product, gate it on a dev role

What "CMS layer" actually means here

All dock pills (left/right/top/bottom)
All section chips (the small purple S-1/S-3 tags on each section)
Hover outlines on sections (subtle green border)
The inspector panel (and every other panel)
The breadcrumb (showing current selection path)
Selection-based panel auto-open (click chip → panel opens)
The bottom-bar widget library / insert controls (the + Widget we just designed)

State persistence

Dev mode state persists in localStorage: fvcms.dev=1 or fvcms.dev=0
Toggle position persists separately: fvcms.devTogglePos
URL param ?dev=0 forces OFF (for sharing clean pages)
URL param ?dev=1 forces ON (for demos, recordings)
Per-session in memory (default) — clear on browser close unless URL param or localStorage says otherwise

What changes for the previous mockups (the bottom-bar placement one)

The bottom-bar mockup was designing the bar when dev mode is ON. So the conflict detection only matters inside the CMS layer's lifetime
When dev mode is OFF, the bar doesn't exist at all. No conflicts. Visitor sees a clean page
When dev mode is ON, the bar can still be smart (stacked above app bars, hidden during GDPR, etc.) — same as before, but only relevant when the operator is editing

Dev mode toggle — the single entry point for the entire CMS layer

Explore the World of Trees

What we offer

Get Started

Explore the World of Trees

What we offer

Get Started

Why use the existing setDevMode, not invent a new toggle

What the Dev toggle does NOT do

What "CMS layer" actually means here

State persistence

What changes for the previous mockups (the bottom-bar placement one)