Here’s a tight, surgical plan to add a Photoshop-style movable + collapsible toolbar without disturbing what’s working.

Phase 0 — Decision switches (no code yet)

Contents: tabs for 🎨 Logo, 🖊️ Text, 🟦 Shapes (your existing pop-outs live inside).

Default: dock left, expanded, position {x:16,y:96}.

Behavior: draggable header, snap to screen edges (8–12px), collapse/expand, remember state.

Phase 1 — Minimal shell (draggable + collapsible)

State (one source of truth):

{
  x: number, y: number,            // px; top-left of the toolbar
  dock: "left" | "right" | "free", // optional; start "left"
  collapsed: boolean,              // false expanded, true mini-rail
  activeTab: "logo" | "text" | "shapes",
  z: number                        // bring-to-front on focus
}


DOM rules:

Toolbar root: position: fixed; transform: translate3d(xpx, ypx, 0); z-index: 30;

Header: drag handle (cursor: move).

Body: renders your 3 editors (exact content you already have).

Collapsed state: show only vertical icon rail (3 icons).

Pointer hygiene:

On pointerdown (header): capture, store origin and start {x,y}, preventDefault().

On pointermove: nextX = startX + dx; nextY = startY + dy; then clamp to viewport.

On pointerup: release capture.

Bounds clamp:

x in [8, window.innerWidth - panelWidth - 8]

y in [8, window.innerHeight - panelHeight - 8]

Collapse/expand:

Click header chevron or double-click header toggles collapsed.

When collapsed, width ≈ 60–72px; height auto to fit icons.

Persistence:

Save {x,y,collapsed,dock,activeTab} to localStorage on change; restore on mount.

Phase 2 — Docking + snapping (polish)

Snap zones (magnet):

When dropping within 12px of left/right edges → set dock="left"|"right", snap x to 8px from edge.

If not near edges → dock="free" (free-floating).

Auto-reflow on resize:

On window resize, if out of bounds after restore, re-clamp into view.

Focus & z-order:

On mousedown inside toolbar: z = ++zCounter so it floats above other panels (if you add more later).

Keyboard UX (nice-to-have):

[ or ] cycles tabs; 1/2/3 jumps to tab.

Esc collapses; Enter expands.

Arrow keys nudge position (Shift = 10px).

Phase 3 — Integrate your existing editors (no rewrites)

Each tab simply renders the exact editor you already built (Logo Editor, Branding Text Editor, Add/Edit Shapes).

Keep their internal logic/state untouched.

Only add a tiny adapter so activeTab switches which one is visible.

Visual spec (quick)

Shadow: soft drop-shadow-md.

Border radius: rounded-xl.

Header: title + icons (collapse chevron, close optional later).

Animations: transform/opacity only (no layout thrash):

expand/collapse: scaleY + opacity 150–200ms.

drag: translate3d; no transitions while dragging.

Acceptance checklist

Drag by header → smooth, no text selection; toolbar stays within viewport.

Snap to left/right edges when near them; otherwise free-float.

Collapse/expand works; state persists across refresh.

Active tab remembers; editors’ existing functionality unchanged.

Preview drag remains buttery (toolbar doesn’t block it when not overlapping).

Tiny tasks for Replit (sequence)

Create ToolbarStore (Zustand or your current store) with the state above + persistence.

Add Toolbar component shell with header/body; wire pointer events + clamp.

Implement collapse toggle + restore-from-storage.

Add snap logic on drag end; set dock and snap x.

Render your existing three editors inside tabs; no internal changes.

Quick smoke test on desktop + touch.