feat(web): canvas-first editor with floating panels and a docked token dialog #5

Merged

marti merged 1 commit from feature/editor-floating-layout into feature/m4-exports 2026-10-27 08:23:05 +01:00

Conversation 0 Commits 1 Files changed 15 +1237 -541

marti commented 2026-10-27 01:33:34 +01:00

Owner

• Copy link
• Copy Markdown

Stacked on #4 (base feature/m4-exports); retarget to main once #4 merges.

The user's review of the milestone 3 editor: the canvas should be the page, the editor should float over it (Excalidraw / T3 Code style), and values should be edited in modals.

Summary

 /o/$orgSlug/design-systems/$id/editor      (staticData: { fullscreen: true })
-<AppShell sidebar>
-  <PageHeader "Token editor">
-  [tree] [form + relations] [canvas ~500px]
+<AppShell> renders only <Outlet/> for fullscreen routes
+  <Canvas>                 fills the window; device widths centred on the grid;
+                           frames start below/beside the floating chrome on wide screens
+  floating top-left bar    back, name, read-only badge, save status
+  floating left panel      token tree, collapsible (remembered in localStorage)
+  floating toolbar         library, mode, viewport icons, compare popover
+  <TokenDialog>            docked right, transparent overlay: form, contrast,
+                           alias chain, dependents, delete
+  toasts                   conflict / rejected / failed save

Evidence

These screenshots are from the built web image, in headless Chrome against the running stack, signed in as the demo user.

• Dark theme with color.brand.600 open: editor-designbase-dark-dialog.png.
• Light theme with the tree open: editor-designbase-light.png.

They were reviewed during development, and two issues found there were fixed:

• Frame inset: the frames are now inset so the floating bars do not cover the preview's own navigation and the open tree does not hide swatches.

• Overlay: the docked dialog's overlay is now transparent instead of dimming the canvas.

• Before: web 71 tests

• After: web 77 tests. The milestone 3 scenario (near-white color.brand.600 -> frame gets the new variable and a failing light primary pair -> contrast warning) now runs inside the dialog. New tests cover:

  • the editor rendering without the sidebar;
  • collapsing the tree;
  • Escape closing the dialog without recreating the frame;
  • viewport changes not recreating the frame;
  • comparing with the latest version.

pnpm lint and pnpm typecheck are clean.

Merge Danger

Door: two-way

Blast Radius: editor

The change is UI only, with no API or data changes. The shared Modal gains a placement="end" option; centred dialogs are unchanged.

🤖 Generated with Claude Code

Stacked on #4 (base `feature/m4-exports`); retarget to `main` once #4 merges. The user's review of the milestone 3 editor: the canvas should be the page, the editor should float over it (Excalidraw / T3 Code style), and values should be edited in modals. ## Summary ```diff /o/$orgSlug/design-systems/$id/editor (staticData: { fullscreen: true }) -<AppShell sidebar> - <PageHeader "Token editor"> - [tree] [form + relations] [canvas ~500px] +<AppShell> renders only <Outlet/> for fullscreen routes + <Canvas> fills the window; device widths centred on the grid; + frames start below/beside the floating chrome on wide screens + floating top-left bar back, name, read-only badge, save status + floating left panel token tree, collapsible (remembered in localStorage) + floating toolbar library, mode, viewport icons, compare popover + <TokenDialog> docked right, transparent overlay: form, contrast, + alias chain, dependents, delete + toasts conflict / rejected / failed save ``` ## Evidence These screenshots are from the built web image, in headless Chrome against the running stack, signed in as the demo user. - Dark theme with `color.brand.600` open: `editor-designbase-dark-dialog.png`. - Light theme with the tree open: `editor-designbase-light.png`. They were reviewed during development, and two issues found there were fixed: - **Frame inset:** the frames are now inset so the floating bars do not cover the preview's own navigation and the open tree does not hide swatches. - **Overlay:** the docked dialog's overlay is now transparent instead of dimming the canvas. - **Before:** web 71 tests - **After:** web 77 tests. The milestone 3 scenario (near-white `color.brand.600` -> frame gets the new variable and a failing light primary pair -> contrast warning) now runs inside the dialog. New tests cover: - the editor rendering without the sidebar; - collapsing the tree; - Escape closing the dialog without recreating the frame; - viewport changes not recreating the frame; - comparing with the latest version. `pnpm lint` and `pnpm typecheck` are clean. ## Merge Danger **Door:** two-way **Blast Radius:** editor The change is UI only, with no API or data changes. The shared `Modal` gains a `placement="end"` option; centred dialogs are unchanged. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

marti added 1 commit 2026-10-27 01:33:34 +01:00

feat(web): canvas-first editor with floating panels and a docked token dialog ... 8360c6fae3

The editor leaves the app shell: the preview fills the window and the
editing UI floats over it. A top-left bar holds the way back, the name and
the save status; the token tree is a collapsible floating panel; library,
mode, viewport and compare sit in a floating toolbar. Opening a token shows
its form, contrast warnings, alias chain and dependents in a dialog docked to
the right with no dimming, so the canvas stays visible and updates live. On
wide screens the frames start below and beside the floating chrome, so it
never covers the components.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

marti merged commit 464f5bc743 into feature/m4-exports 2026-10-27 08:23:05 +01:00

marti referenced this pull request from a commit 2026-10-27 08:23:07 +01:00

Merge pull request 'feat(web): canvas-first editor with floating panels and a docked token dialog' (#5) from feature/editor-floating-layout into feature/m4-exports

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

marti/designbase!5

No description provided.