@oh-just-another/react-ui 0.61.0 → 0.63.0

package/src/styles.css

@@ -19,48 +19,175 @@
  * value in `packages/tokens/src/colors.ts`.
  */
 
+/* ================================================================== */
+/* DESIGN TOKENS                                                        */
+/* Every component reads its colours, sizes and rhythm through these    */
+/* custom properties. They are grouped by TYPE; hosts override any of   */
+/* them in their own stylesheet. Theme-dependent groups (colour,        */
+/* elevation) are re-declared per theme scope below; the rest are       */
+/* theme-neutral and live here only.                                    */
+/* ================================================================== */
 :root {
-  /* --- Surfaces (from UI_SURFACE.light) --- */
-  --du-canvas-bg: #f5f5f5; /* UI_SURFACE.light.canvas */
-  --du-ui-bg: rgba(255, 255, 255, 0.95); /* UI_SURFACE.light.bg */
-  --du-ui-bg-solid: #ffffff; /* UI_SURFACE.light.bgSolid */
-  --du-ui-border: rgba(0, 0, 0, 0.08); /* UI_SURFACE.light.border */
-  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
-
-  /* --- Text (from UI_SURFACE.light) --- */
-  --du-text: #1a1a1a; /* UI_SURFACE.light.text */
-  --du-text-muted: #6b6b6b; /* UI_SURFACE.light.textMuted */
+  /* ---- Colour · surfaces (UI_SURFACE.light in @oh-just-another/tokens) ---- */
+  --du-canvas-bg: #f5f5f5; /* paper under the scene — NOT themed (see dark note) */
+  --du-ui-bg: #ffffff; /* chrome surface (bars, groups) — opaque */
+  --du-ui-bg-solid: #ffffff; /* same surface; kept for hosts that override one */
+  --du-ui-border: rgba(0, 0, 0, 0.08); /* hairline on every chrome edge */
+  --du-hover-overlay: rgba(0, 0, 0, 0.05); /* hover wash on flat controls */
+  --du-scrim: rgba(0, 0, 0, 0.55); /* backdrop behind modals / sheets */
+
+  /* ---- Colour · text ---- */
+  --du-text: #1a1a1a;
+  --du-text-muted: #6b6b6b; /* captions, shortcuts, group titles */
   --du-text-on-accent: #ffffff;
 
-  /* --- Accent (from UI_ACCENT.light — Radix iris) --- */
-  --du-accent: #5b5bd6; /* UI_ACCENT.light.accent (iris.iris9) */
-  --du-accent-hover: #5151cd; /* UI_ACCENT.light.accentHover (iris.iris10) */
-  --du-danger: #e54d2e; /* UI_ACCENT.light.danger (tomato.tomato9) */
-
-  /* --- Selected (tonal, modern-style) --- */
-  /* Active toolbar / icon buttons get a *muted* tonal fill so they
-     read as "this state is selected" without hijacking the eye like
-     a saturated accent fill would. The icon switches to the accent
-     hue, the background stays close to the surface. */
-  --du-selected-bg: #e6e7ff; /* UI_ACCENT.light.selectedBg (iris.iris4) */
-  --du-selected-fg: #5753c6; /* UI_ACCENT.light.selectedFg (iris.iris11) */
-
-  /* --- Sizing --- */
-  --du-radius: 10px;
-  --du-radius-sm: 6px;
-  --du-radius-lg: 14px;
-  --du-button-size: 36px;
-  --du-button-size-sm: 32px;
-  --du-icon-size: 18px;
-  --du-gap: 8px;
-  --du-gap-sm: 4px;
-  --du-pad: 8px;
-  --du-pad-sm: 4px;
-  --du-hover-overlay: rgba(0, 0, 0, 0.05);
-  --du-bar-inset: 12px;
+  /* ---- Colour · accent (UI_ACCENT.light — Radix iris) ---- */
+  --du-accent: #5b5bd6; /* iris9 — focus rings, active glyphs, links */
+  --du-accent-hover: #5151cd; /* iris10 */
+  --du-danger: #e54d2e; /* tomato9 */
+  --du-success: #30a46c; /* grass9 */
+  --du-warning: #ffc53d; /* amber9 */
+  /* Selected state is TONAL: a muted iris wash + iris text, never a
+     saturated fill, so a pressed tool doesn't hijack the eye. */
+  --du-selected-bg: #e6e7ff; /* iris4 */
+  --du-selected-fg: #5753c6; /* iris11 */
+
+  /* ---- Colour · inverse (tooltip) ---- */
+  --du-tooltip-bg: var(--du-text);
+  --du-tooltip-fg: var(--du-ui-bg-solid);
+
+  /* ---- Elevation — ONE level for every floating chrome surface
+     (toolbars, groups, menus, popovers, panels, minimap), a heavier one
+     for dialogs that sit on a scrim. Tinted with the text colour. ---- */
+  --du-ui-shadow: 0 2px 8px rgba(34, 36, 40, 0.12), 0 0 12px rgba(34, 36, 40, 0.04);
+  --du-modal-shadow: 0 8px 32px rgba(34, 36, 40, 0.24);
+
+  /* ---- Radius — three steps: items inside a group (4), toolbars /
+     dropdowns / popovers (8), panels / dialogs (12); pills are round. ---- */
+  --du-radius-sm: 4px;
+  --du-radius: 8px;
+  --du-radius-lg: 12px;
+  --du-radius-round: 999px;
+
+  /* ---- Chrome rhythm — ONE size and ONE inset shared by toolbars and
+     menus: a toolbar button, a menu row (Shapes and lines, context / main
+     / zoom menus) and a panel list row are all `--du-control-size` tall;
+     the padding around a toolbar's button column and around a menu's rows
+     is `--du-chrome-pad`. Change these two to rescale every bar and menu
+     together. ---- */
+  --du-control-size: 40px;
+  --du-chrome-pad: 4px;
+
+  /* ---- Spacing — 4-px grid. `--du-gap` / `--du-pad` are the working
+     defaults for chrome (8 = between controls / inside a surface,
+     4 = inside a group / between grouped items). ---- */
+  --du-space-xs: 2px;
+  --du-space-sm: 4px;
+  --du-space-md: 8px;
+  --du-space-lg: 12px;
+  --du-space-xl: 16px;
+  --du-space-2xl: 24px;
+  --du-gap: var(--du-space-md);
+  --du-gap-sm: var(--du-space-sm);
+  --du-pad: var(--du-space-md);
+  --du-pad-sm: var(--du-chrome-pad); /* inset of a button group / dock */
+
+  /* ---- Sizing · controls ---- */
+  --du-button-size: var(--du-control-size); /* toolbar icon button / bar height driver */
+  --du-button-size-sm: var(--du-control-size); /* grouped / panel buttons — same 40 (alias) */
+  --du-touch-size: 44px; /* minimum tap target on coarse pointers */
+  --du-icon-size: 24px; /* toolbar glyph — lucide's native grid, crisp strokes */
+  --du-icon-size-sm: 20px; /* in-row glyph (menus, panels) — a step below controls */
+  --du-input-h: 36px; /* text / search inputs */
+  --du-control-h: 28px; /* small inline controls (number input, swatch fill) */
+  --du-swatch-size: 32px; /* colour cell (fill grows from 28 → 32 on hover) */
+  --du-switch-w: 30px;
+  --du-switch-h: 18px;
+  --du-key-h: 24px; /* <kbd> pill in the help dialog */
+  --du-checkbox-size: 16px; /* native checkbox in property rows */
+  --du-input-icon-size: 12px; /* glyph inside a text input (search) */
+  --du-divider-h: var(--du-icon-size); /* vertical separator inside a toolbar row */
+
+  /* ---- Typography — system stack; 14 body, 12 captions, 10 micro caps. ---- */
+  --du-font-family:
+    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --du-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --du-font-size-xs: 10px;
+  --du-font-size-sm: 12px;
+  --du-font-size: 14px;
+  --du-font-size-lg: 16px;
+  --du-font-weight: 400;
+  --du-font-weight-strong: 600;
+  --du-line-height: 20px;
+  --du-caps-tracking: 0.5px; /* letter-spacing of uppercase captions */
+
+  /* ---- Layout — where the static chrome sits ---- */
+  --du-bar-inset: 12px; /* canvas edge → top / bottom bars, side panels, minimap */
+  --du-dock-inset: 10px; /* canvas edge → the vertical tool dock */
+  --du-flyout-gap: 10px; /* a bar → the menu / flyout that opens from it */
+  --du-submenu-gap: 6px; /* parent menu column → nested menu */
+  /* Height of a bar = group padding + button + padding + border. */
+  --du-bar-height: calc(var(--du-button-size) + 2 * var(--du-pad-sm) + 2px);
+  /* Top edge of anything docked under the top bar / above the bottom bar. */
+  --du-bar-clear: calc(var(--du-bar-inset) + var(--du-bar-height) + var(--du-gap));
+  --du-side-panel-w: 240px;
+  --du-brand-h: 24px; /* logo artwork height inside the 40-px brand cell */
+  --du-sidebar-w: 280px; /* host-composed <Sidebar> */
+  --du-thread-w: 280px; /* comment thread popover */
+  --du-panel-row-h: var(--du-control-size); /* list row inside a panel (layers, comments) */
+
+  /* ---- Menus — one system for the context menu, main / zoom menus, the
+     Shapes and lines flyout and list rows inside popovers. ---- */
+  --du-menu-pad: var(--du-chrome-pad); /* inset around the rows = toolbar group inset */
+  --du-menu-min-w: 240px;
+  --du-menu-radius: var(--du-radius);
+  --du-menu-row-h: var(--du-control-size); /* = toolbar button height */
+  --du-menu-row-pad-x: var(--du-space-xl);
+  --du-menu-row-radius: var(--du-radius-sm);
+  --du-menu-gutter: 24px; /* icon / check column, same width everywhere */
+  --du-menu-gap: var(--du-space-md); /* gutter ↔ label */
+  --du-menu-font: var(--du-font-size);
+  --du-menu-shortcut-font: var(--du-font-size-sm);
+  --du-menu-sep: var(--du-space-md); /* separator / group-title vertical rhythm */
+
+  /* ---- Popovers (property controls) ---- */
+  --du-popover-pad: var(--du-pad);
+  --du-popover-min-w: 120px;
+  --du-popover-max-w: 320px;
+
+  /* ---- Modals / dialogs ---- */
+  --du-modal-pad-y: var(--du-space-xl);
+  --du-modal-pad-x: 20px;
+  --du-modal-gap: var(--du-space-lg);
+  --du-modal-radius: var(--du-radius-lg);
+  --du-modal-max-w: 560px;
+  --du-modal-margin: 32px; /* kept clear on each side of the viewport */
+
+  /* ---- Toasts ---- */
+  --du-toast-inset: var(--du-space-xl);
+  --du-toast-min-w: 240px;
+  --du-toast-max-w: 360px;
+
+  /* ---- Tooltip ---- */
+  --du-tooltip-max-w: 260px;
+
+  /* ---- z-index scale (one place; chrome inside the UI layer stacks in
+     its own context, dialogs / toasts / tooltips portal to body) ---- */
   --du-z-canvas: 1;
-  --du-z-ui: 100;
-  --du-z-modal: 1000;
+  --du-z-ui: 100; /* UI layer (bars, docks, panels) + bottom sheets */
+  --du-z-link-chrome: 1380; /* sticky reactions, link badges / popups */
+  --du-z-floating: 1500; /* selection floating toolbar */
+  --du-z-popover: 1600; /* popovers, drop menus, caption editor */
+  --du-z-drop-overlay: 1650; /* file-drop hint — over panels and popovers, under menus */
+  --du-z-context-menu: 1700; /* above every toolbar, panel and popover */
+  --du-z-modal: 1800; /* dialogs — above all floating chrome */
+  --du-z-toast: 1900; /* above dialogs */
+  --du-z-tooltip: 10000; /* always on top */
+
+  /* ---- Motion ---- */
+  --du-motion-fast: 0.12s ease; /* hover / state changes */
+  --du-motion-press: 0.05s ease; /* press scale */
+  --du-motion-sheet: 0.18s ease; /* bottom-sheet height snap */
 }
 
 /**
@@ -82,10 +209,12 @@
     /* The canvas is NOT themed (user content is authored against light
        paper); dark mode darkens the chrome only. UI_SURFACE.dark.canvas. */
     --du-canvas-bg: #f5f5f5;
-    --du-ui-bg: rgba(35, 35, 35, 0.95); /* UI_SURFACE.dark.bg */
+    --du-ui-bg: #252525; /* UI_SURFACE.dark.bg */
     --du-ui-bg-solid: #252525; /* UI_SURFACE.dark.bgSolid */
     --du-ui-border: rgba(255, 255, 255, 0.08); /* UI_SURFACE.dark.border */
-    --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+    --du-ui-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.25);
+    --du-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    --du-scrim: rgba(0, 0, 0, 0.65);
     --du-text: #e8e8e8; /* UI_SURFACE.dark.text */
     --du-text-muted: #9a9a9a; /* UI_SURFACE.dark.textMuted */
     --du-accent: #5b5bd6; /* UI_ACCENT.dark.accent (irisDark.iris9) */
@@ -102,10 +231,12 @@
      up the light palette under all conditions. Mirrors
      UI_SURFACE.light + UI_ACCENT.light. */
   --du-canvas-bg: #f5f5f5;
-  --du-ui-bg: rgba(255, 255, 255, 0.95);
+  --du-ui-bg: #ffffff;
   --du-ui-bg-solid: #ffffff;
   --du-ui-border: rgba(0, 0, 0, 0.08);
-  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  --du-ui-shadow: 0 2px 8px rgba(34, 36, 40, 0.12), 0 0 12px rgba(34, 36, 40, 0.04);
+  --du-modal-shadow: 0 8px 32px rgba(34, 36, 40, 0.24);
+  --du-scrim: rgba(0, 0, 0, 0.55);
   --du-text: #1a1a1a;
   --du-text-muted: #6b6b6b;
   --du-accent: #5b5bd6; /* iris.iris9 */
@@ -116,8 +247,8 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Legacy variable aliases — kept so the older components (MainMenu,  */
-/* ContextMenu, Modal, HelpDialog) that read `var(--panel)` /         */
+/* Legacy variable aliases (DEPRECATED — prefer `--du-*`). Kept so   */
+/* hosts and older components that read `var(--panel)` /              */
 /* `var(--text)` / `var(--button-bg)` etc. still pick up the active   */
 /* theme without being rewritten to the `--du-*` namespace.           */
 /*                                                                    */
@@ -159,17 +290,21 @@
   --toolbar-bg: var(--du-ui-bg-solid);
   --cursor-bg: var(--du-selected-bg);
   --code-bg: var(--du-ui-bg-solid);
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --font-mono: var(--du-font-mono);
+  --panel-fg: var(--du-text);
+  --du-accent-strong: var(--du-accent-hover);
 }
 
 [data-theme="dark"] {
   /* Mirrors UI_SURFACE.dark + UI_ACCENT.dark from `@oh-just-another/tokens`. */
   /* Canvas stays light — see the note in the media-query block above. */
   --du-canvas-bg: #f5f5f5;
-  --du-ui-bg: rgba(35, 35, 35, 0.95);
+  --du-ui-bg: #252525;
   --du-ui-bg-solid: #252525;
   --du-ui-border: rgba(255, 255, 255, 0.08);
-  --du-ui-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+  --du-ui-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.25);
+  --du-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+  --du-scrim: rgba(0, 0, 0, 0.65);
   --du-text: #e8e8e8;
   --du-text-muted: #9a9a9a;
   --du-accent: #5b5bd6; /* irisDark.iris9 */
@@ -180,19 +315,16 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Canvas surface focus ring. The surface is `tabIndex=0` so keyboard   */
-/* users can land on it, but it also takes focus on a pointer press     */
-/* (so shortcuts work right after a click). Gate the ring on            */
-/* `:focus-visible` so it shows ONLY for keyboard focus — a mouse click */
-/* never draws an input-like outline. Class+pseudo specificity (0,2,0)  */
-/* beats a host's `*:focus { outline: none }`.                          */
+/* Canvas surface: `tabIndex=0` so it can hold focus (shortcuts work    */
+/* right after a click / Tab), but it never draws a focus ring — the    */
+/* selection chrome on the canvas is the focus indication. Programmatic */
+/* re-focus after a click makes browsers match `:focus-visible`, so     */
+/* that state is silenced too.                                          */
 /* ------------------------------------------------------------------ */
-.du-canvas-surface {
-  outline: none;
-}
+.du-canvas-surface,
+.du-canvas-surface:focus,
 .du-canvas-surface:focus-visible {
-  outline: 2px solid var(--du-accent);
-  outline-offset: -2px;
+  outline: none;
 }
 
 /* ------------------------------------------------------------------ */
@@ -265,13 +397,14 @@
   border: 1px solid var(--du-ui-border);
   border-radius: var(--du-radius);
   cursor: pointer;
-  font-size: 14px;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
   line-height: 1;
   box-shadow: var(--du-ui-shadow);
   transition:
-    background 0.12s ease,
-    color 0.12s ease,
-    transform 0.05s ease;
+    background var(--du-motion-fast),
+    color var(--du-motion-fast),
+    transform var(--du-motion-press);
   padding: 0;
   outline: none;
   user-select: none;
@@ -292,7 +425,7 @@
 
 .du-icon-button:focus-visible {
   outline: 2px solid var(--du-accent);
-  outline-offset: 2px;
+  outline-offset: var(--du-space-xs);
 }
 
 .du-icon-button[aria-pressed="true"],
@@ -312,7 +445,7 @@
 .du-icon-button-sm {
   width: var(--du-button-size-sm);
   height: var(--du-button-size-sm);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
 }
 
 /**
@@ -355,6 +488,22 @@
      be able to render outside the group's bounds. */
 }
 
+/* Items inside a toolbar group take the item radius (4); the group itself
+   keeps the toolbar radius (8). */
+.du-button-group > .du-icon-button,
+.du-button-group > .du-shapes-wrap > .du-icon-button {
+  border-radius: var(--du-radius-sm);
+}
+
+/* Inside a popover the group is a plain segmented row: the popover
+   already provides the surface, so no nested card chrome. */
+.du-popover .du-button-group {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
 /* Vertical variant — the left creation dock. Stacks buttons in a
    column; dividers (rendered inline by <Toolbar>) become horizontal. */
 .du-button-group-vertical {
@@ -362,7 +511,8 @@
   align-items: stretch;
 }
 
-.du-button-group > .du-icon-button {
+.du-button-group > .du-icon-button,
+.du-button-group > .du-shapes-wrap > .du-icon-button {
   border: none;
   box-shadow: none;
   border-radius: var(--du-radius-sm);
@@ -372,7 +522,8 @@
 }
 
 /* Vertical dock buttons are square + centred (icon-only tools). */
-.du-button-group-vertical > .du-icon-button {
+.du-button-group-vertical > .du-icon-button,
+.du-button-group-vertical > .du-shapes-wrap > .du-icon-button {
   width: var(--du-button-size-sm) !important;
   min-width: var(--du-button-size-sm) !important;
   padding: 0 !important;
@@ -408,25 +559,31 @@
   .du-button-group-vertical::-webkit-scrollbar {
     display: none;
   }
-  .du-button-group-vertical > .du-icon-button {
-    width: 44px !important;
-    min-width: 44px !important;
-    height: 44px !important;
+  .du-button-group-vertical > .du-icon-button,
+  .du-button-group-vertical > .du-shapes-wrap > .du-icon-button {
+    width: var(--du-touch-size) !important;
+    min-width: var(--du-touch-size) !important;
+    height: var(--du-touch-size) !important;
   }
 }
 
-.du-button-group > .du-icon-button:hover:not(:disabled) {
+.du-button-group > .du-icon-button:hover:not(:disabled),
+.du-button-group > .du-shapes-wrap > .du-icon-button:hover:not(:disabled) {
   background: var(--du-hover-overlay);
 }
 
 .du-button-group > .du-icon-button[aria-pressed="true"],
-.du-button-group > .du-icon-button.is-active {
+.du-button-group > .du-shapes-wrap > .du-icon-button[aria-pressed="true"],
+.du-button-group > .du-icon-button.is-active,
+.du-button-group > .du-shapes-wrap > .du-icon-button.is-active {
   background: var(--du-selected-bg);
   color: var(--du-selected-fg);
 }
 
 .du-button-group > .du-icon-button[aria-pressed="true"]:hover:not(:disabled),
-.du-button-group > .du-icon-button.is-active:hover:not(:disabled) {
+.du-button-group > .du-shapes-wrap > .du-icon-button[aria-pressed="true"]:hover:not(:disabled),
+.du-button-group > .du-icon-button.is-active:hover:not(:disabled),
+.du-button-group > .du-shapes-wrap > .du-icon-button.is-active:hover:not(:disabled) {
   background: color-mix(in srgb, var(--du-selected-bg) 90%, var(--du-text) 10%);
 }
 
@@ -437,13 +594,13 @@
 /* ------------------------------------------------------------------ */
 .du-side-panel {
   position: absolute;
-  top: calc(var(--du-bar-inset) + var(--du-button-size) + var(--du-gap));
-  bottom: calc(var(--du-bar-inset) + var(--du-button-size) + var(--du-gap));
-  width: 240px;
+  top: var(--du-bar-clear);
+  bottom: var(--du-bar-clear);
+  width: var(--du-side-panel-w);
   background: var(--du-ui-bg);
   color: var(--du-text);
   border: 1px solid var(--du-ui-border);
-  border-radius: var(--du-radius);
+  border-radius: var(--du-radius-lg);
   box-shadow: var(--du-ui-shadow);
   display: flex;
   flex-direction: column;
@@ -477,13 +634,13 @@
 .du-side-panel-header {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: var(--du-gap-sm);
   padding: var(--du-pad-sm) var(--du-pad-sm) var(--du-pad-sm) var(--du-pad);
-  font-size: 12px;
-  font-weight: 600;
+  font-size: var(--du-font-size-sm);
+  font-weight: var(--du-font-weight-strong);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--du-caps-tracking);
   color: var(--du-text-muted);
 }
 
@@ -492,6 +649,16 @@
   display: none;
 }
 
+/* Panel title in the header's left slot (normal case, full text colour —
+   the header's uppercase muted styling is for action captions). */
+.du-side-panel-title {
+  font-size: var(--du-font-size);
+  font-weight: 600;
+  color: var(--du-text);
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 /* Auto-height variant — content hugs its natural height instead
    of stretching from top to bottom of the canvas area. Used by
    the Properties panel so it shrinks to whatever the inspector
@@ -499,7 +666,7 @@
    so its long grid can scroll. */
 .du-side-panel-auto-height {
   bottom: auto;
-  max-height: calc(100% - 2 * var(--du-bar-inset) - 2 * var(--du-button-size) - 2 * var(--du-gap));
+  max-height: calc(100% - 2 * var(--du-bar-clear));
 }
 
 .du-side-panel-body {
@@ -516,6 +683,335 @@
   padding: 0;
 }
 
+/* Static variant — a card the host lays out itself (LayerPanel,
+   CommentsPanel inside a <Sidebar> or any flex column). Same chrome, no
+   absolute positioning; stretches to the host's height. */
+.du-side-panel-static {
+  position: static;
+  top: auto;
+  bottom: auto;
+  min-height: 0;
+  max-height: 100%;
+}
+
+/* ------------------------------------------------------------------ */
+/* Panel lists — rows inside a side panel share the menu-row rhythm    */
+/* (40-px rows, hover wash, tonal selected state).                     */
+/* ------------------------------------------------------------------ */
+.du-panel-list {
+  display: flex;
+  flex-direction: column;
+  padding: var(--du-pad-sm);
+}
+
+.du-panel-row {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--du-panel-row-h);
+  padding: 0 var(--du-pad-sm) 0 var(--du-pad);
+  border-radius: var(--du-radius-sm);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  line-height: var(--du-line-height);
+  color: var(--du-text);
+  cursor: pointer;
+}
+
+.du-panel-row:hover {
+  background: var(--du-hover-overlay);
+}
+
+.du-panel-row.is-active {
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+}
+
+.du-panel-row.is-muted {
+  opacity: 0.55;
+}
+
+.du-panel-row:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: -2px;
+}
+
+/* Two-line row (comments): meta line + preview, both left-aligned. */
+.du-panel-row-stack {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0;
+  padding: var(--du-pad-sm) var(--du-pad);
+  text-align: left;
+}
+
+.du-panel-row-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.du-panel-row-label.is-muted {
+  color: var(--du-text-muted);
+}
+
+.du-panel-row.is-active .du-panel-row-label.is-muted {
+  color: inherit;
+}
+
+.du-panel-row-meta {
+  display: flex;
+  gap: var(--du-gap-sm);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+.du-panel-row-meta > strong {
+  color: var(--du-text);
+  font-weight: var(--du-font-weight-strong);
+}
+
+.du-panel-row.is-active .du-panel-row-meta,
+.du-panel-row.is-active .du-panel-row-meta > strong {
+  color: inherit;
+}
+
+.du-panel-row-meta-end {
+  margin-left: auto;
+}
+
+.du-panel-empty {
+  padding: var(--du-space-xl) var(--du-pad);
+  font-size: var(--du-font-size-sm);
+  line-height: var(--du-line-height);
+  color: var(--du-text-muted);
+}
+
+/* Inline text input inside a panel row / form. */
+.du-panel-input {
+  flex: 1;
+  min-width: 0;
+  height: var(--du-input-h);
+  box-sizing: border-box;
+  padding: 0 var(--du-space-md);
+  font: inherit;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-sm);
+  outline: none;
+}
+
+.du-panel-input::placeholder {
+  color: var(--du-text-muted);
+}
+
+.du-panel-input:focus {
+  border-color: var(--du-accent);
+}
+
+/* Muted flat icon button (hidden / unlocked layer toggles). */
+.du-icon-button-flat.is-muted {
+  opacity: 0.4;
+}
+
+.du-icon-button-flat.is-muted:hover:not(:disabled) {
+  opacity: 1;
+}
+
+/* ------------------------------------------------------------------ */
+/* Text button — small labelled action (dialog footers, thread header, */
+/* sidebar tabs). `is-active` = tonal selected; `-primary` = accent.   */
+/* ------------------------------------------------------------------ */
+.du-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--du-gap-sm);
+  height: var(--du-button-size-sm);
+  padding: 0 var(--du-space-lg);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  font-weight: var(--du-font-weight);
+  line-height: 1;
+  color: var(--du-text);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background var(--du-motion-fast),
+    color var(--du-motion-fast);
+}
+
+.du-button:hover:not(:disabled) {
+  background: var(--du-hover-overlay);
+}
+
+.du-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.du-button.is-active {
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+  border-color: transparent;
+}
+
+.du-button-primary {
+  background: var(--du-accent);
+  color: var(--du-text-on-accent);
+  border-color: transparent;
+}
+
+.du-button-primary:hover:not(:disabled) {
+  background: var(--du-accent-hover);
+}
+
+.du-button:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: var(--du-space-xs);
+}
+
+/* ------------------------------------------------------------------ */
+/* Sidebar — host-composed docked column with tabs (see <Sidebar>).    */
+/* ------------------------------------------------------------------ */
+.du-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--du-sidebar-w);
+  min-height: 0;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  color: var(--du-text);
+  background: var(--du-ui-bg-solid);
+}
+
+.du-sidebar-right {
+  border-left: 1px solid var(--du-ui-border);
+}
+
+.du-sidebar-left {
+  border-right: 1px solid var(--du-ui-border);
+}
+
+.du-sidebar-header {
+  padding: var(--du-space-lg) var(--du-space-xl);
+  font-size: var(--du-font-size);
+  font-weight: var(--du-font-weight-strong);
+  line-height: var(--du-line-height);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-sidebar-tabs {
+  display: flex;
+  gap: var(--du-gap-sm);
+  padding: var(--du-pad);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-sidebar-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--du-pad);
+}
+
+.du-sidebar-section {
+  padding: var(--du-pad) var(--du-space-lg);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+/* ------------------------------------------------------------------ */
+/* Comment thread popover — floating card top-right of the canvas.     */
+/* ------------------------------------------------------------------ */
+.du-thread {
+  position: absolute;
+  top: var(--du-bar-inset);
+  right: var(--du-bar-inset);
+  z-index: var(--du-z-popover);
+  display: flex;
+  flex-direction: column;
+  width: var(--du-thread-w);
+  max-height: 70vh;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  line-height: var(--du-line-height);
+  color: var(--du-text);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-lg);
+  box-shadow: var(--du-ui-shadow);
+}
+
+.du-thread-header {
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap-sm);
+  padding: var(--du-pad-sm) var(--du-pad-sm) var(--du-pad-sm) var(--du-pad);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-thread-status {
+  flex: 1;
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+.du-thread-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--du-pad);
+}
+
+.du-thread-item {
+  position: relative;
+  padding-right: var(--du-button-size-sm);
+  margin-bottom: var(--du-space-lg);
+}
+
+.du-thread-item:last-child {
+  margin-bottom: 0;
+}
+
+.du-thread-item-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.du-thread-item-meta {
+  margin-bottom: var(--du-space-xs);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+.du-thread-item-meta > strong {
+  color: var(--du-text);
+  font-weight: var(--du-font-weight-strong);
+}
+
+.du-thread-item-body {
+  white-space: pre-wrap;
+}
+
+.du-thread-form {
+  display: flex;
+  gap: var(--du-gap-sm);
+  padding: var(--du-pad);
+  border-top: 1px solid var(--du-ui-border);
+}
+
 /* ------------------------------------------------------------------ */
 /* Palette (template library content) — sectioned grid of icon tiles. */
 /* No per-tile borders, no per-section dividers — visual structure    */
@@ -536,8 +1032,9 @@
   flex-direction: column;
 }
 
+/* Sections sit inside the same inset a menu panel gives its rows. */
 .du-palette-section {
-  padding: 0 var(--du-pad) var(--du-pad-sm);
+  padding: 0 var(--du-menu-pad);
 }
 
 .du-palette-category {
@@ -545,12 +1042,13 @@
   background: transparent;
   color: var(--du-text-muted);
   border: none;
-  padding: 10px 0 6px;
+  /* Same rhythm as `.du-menu-group-title`. */
+  padding: var(--du-menu-sep) var(--du-menu-row-pad-x) var(--du-space-xs);
   font: inherit;
-  font-size: 11px;
-  font-weight: 600;
+  font-size: var(--du-menu-shortcut-font);
+  font-weight: var(--du-font-weight-strong);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--du-caps-tracking);
   text-align: left;
   cursor: pointer;
   display: flex;
@@ -579,14 +1077,12 @@
   padding: 0;
 }
 
-/* Compact list layout (modern-style templates panel) — single column of
-   icon + name rows. Denser than the grid; the label reads left-aligned
-   beside a small icon. */
+/* List layout (templates panel) — single column of icon + name rows in
+   the shared menu-row rhythm (`--du-panel-row-h`, `--du-menu-row-pad-x`). */
 .du-palette-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 0 var(--du-pad) var(--du-pad-sm);
+  padding: 0 var(--du-menu-pad);
 }
 .du-palette-section > .du-palette-list {
   padding: 0;
@@ -596,15 +1092,17 @@
   align-items: center;
   justify-content: flex-start;
   aspect-ratio: auto;
-  gap: 8px;
-  padding: 5px 8px;
+  gap: var(--du-menu-gap);
+  min-height: var(--du-panel-row-h);
+  padding: 0 var(--du-menu-row-pad-x);
+  border-radius: var(--du-menu-row-radius);
   text-align: left;
-  font-size: 12px;
-  line-height: 1.2;
+  font-size: var(--du-menu-font);
+  line-height: var(--du-line-height);
 }
 .du-palette-list .du-palette-item-icon {
-  width: 20px !important;
-  height: 20px !important;
+  width: var(--du-icon-size) !important;
+  height: var(--du-icon-size) !important;
   flex: 0 0 auto;
 }
 .du-palette-list .du-palette-item-label {
@@ -615,9 +1113,9 @@
 }
 
 .du-palette-empty {
-  padding: 24px 12px;
+  padding: var(--du-space-2xl) var(--du-space-lg);
   text-align: center;
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
 }
 
@@ -626,18 +1124,18 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--du-space-sm);
   aspect-ratio: 1;
-  padding: 6px 4px;
+  padding: var(--du-space-sm);
   background: transparent;
   color: var(--du-text);
   border: none;
   border-radius: var(--du-radius-sm);
   cursor: grab;
   text-align: center;
-  font-size: 10px;
+  font-size: var(--du-font-size-xs);
   line-height: 1.1;
-  transition: background 0.12s ease;
+  transition: background var(--du-motion-fast);
 }
 
 .du-palette-item:hover {
@@ -679,24 +1177,24 @@
 .du-prop-panel {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 4px 0;
+  gap: var(--du-space-xl);
+  padding: var(--du-space-sm) 0;
   color: var(--du-text);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
 }
 
 .du-prop-section {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--du-space-sm);
 }
 
 .du-prop-section-label {
   margin: 0;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: var(--du-font-size-xs);
+  font-weight: var(--du-font-weight-strong);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--du-caps-tracking);
   color: var(--du-text-muted);
 }
 
@@ -708,15 +1206,15 @@
 }
 
 .du-prop-row-label {
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
-  min-width: 48px;
+  min-width: 48px; /* label column of a prop row */
 }
 
 .du-prop-empty {
   font-style: italic;
   color: var(--du-text-muted);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
 }
 
 /* modern-style flat segmented control inside the panel:
@@ -727,7 +1225,7 @@
   border: none;
   box-shadow: none;
   padding: 0;
-  gap: 2px;
+  gap: var(--du-space-xs);
 }
 
 /* Tighter active state inside the panel (smaller buttons, same
@@ -742,16 +1240,16 @@
 .du-prop-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--du-space-sm);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text);
   user-select: none;
 }
 
 .du-prop-checkbox input[type="checkbox"] {
-  width: 14px;
-  height: 14px;
+  width: var(--du-checkbox-size);
+  height: var(--du-checkbox-size);
   margin: 0;
   accent-color: var(--du-selected-fg);
   cursor: pointer;
@@ -766,14 +1264,14 @@
 .du-swatch-grid {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 4px;
-  max-width: 232px; /* 8 cells (26 × 8 = 208) + 7 gaps × 4 = ~232 */
+  gap: var(--du-space-sm);
+  max-width: calc(8 * var(--du-swatch-size) + 7 * var(--du-space-sm)); /* 8 cells per row */
 }
 
 .du-swatch {
   position: relative;
-  width: 26px;
-  height: 26px;
+  width: var(--du-swatch-size);
+  height: var(--du-swatch-size);
   padding: 0;
   background: transparent;
   border: none;
@@ -784,7 +1282,7 @@
   justify-content: center;
   /* Reserve the ring space so width never changes on selection. */
   box-shadow: inset 0 0 0 0 transparent;
-  transition: box-shadow 0.12s ease;
+  transition: box-shadow var(--du-motion-fast);
   /* Suppress the UA tap-highlight on iOS so the cell looks clean
      while the user drags through swatches. */
   -webkit-tap-highlight-color: transparent;
@@ -803,21 +1301,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--du-control-h);
+  height: var(--du-control-h);
   border-radius: var(--du-radius-sm);
   border: 1px solid var(--du-ui-border);
   box-sizing: border-box;
   transition:
-    width 0.12s ease,
-    height 0.12s ease,
-    border-color 0.12s ease;
+    width var(--du-motion-fast),
+    height var(--du-motion-fast),
+    border-color var(--du-motion-fast);
 }
 
 .du-swatch:hover .du-swatch-fill,
 .du-swatch:focus-visible .du-swatch-fill {
-  width: 26px;
-  height: 26px;
+  width: var(--du-swatch-size);
+  height: var(--du-swatch-size);
 }
 
 /* Clear (×) + custom-picker (+) cells use the same chrome as a
@@ -842,12 +1340,526 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Slider — themed native <input type=range> + value badge.           */
 /* ------------------------------------------------------------------ */
-.du-slider {
+/* Menu system — shared by the context menu, the main / zoom menus,    */
+/* the Shapes and lines flyout and list rows inside popovers. All      */
+/* metrics come from the `--du-menu-*` tokens.                         */
+/* ------------------------------------------------------------------ */
+.du-menu-panel {
+  box-sizing: border-box;
+  min-width: var(--du-menu-min-w);
+  padding: var(--du-menu-pad);
+  font-size: var(--du-menu-font);
+  color: var(--menu-text);
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-menu-radius);
+  box-shadow: var(--du-ui-shadow);
+}
+
+.du-menu-row {
+  all: unset;
+  box-sizing: border-box;
   display: flex;
+  gap: var(--du-menu-gap);
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--du-menu-row-h);
+  padding: 0 var(--du-menu-row-pad-x);
+  font-size: var(--du-menu-font);
+  color: var(--du-text);
+  text-align: left;
+  border-radius: var(--du-menu-row-radius);
+  cursor: pointer;
+}
+
+.du-menu-row:hover:not(:disabled),
+.du-menu-row.is-open {
+  background: var(--du-hover-overlay);
+}
+
+.du-menu-row.is-active {
+  background: var(--du-selected-bg);
+}
+
+.du-menu-row:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.du-menu-row:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: -2px;
+}
+
+/* Label side: gutter + text. */
+.du-menu-row-main {
+  display: inline-flex;
+  gap: var(--du-menu-gap);
+  align-items: center;
+  min-width: 0;
+}
+
+/* Leading gutter: icon, check mark or empty — labels align across rows. */
+.du-menu-gutter {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--du-menu-gutter);
+  color: var(--du-text-muted);
+}
+
+.du-menu-gutter.is-accent {
+  color: var(--du-accent);
+}
+
+/* Trailing side: shortcut / chevron / control. */
+.du-menu-shortcut {
+  margin-left: auto;
+  font-size: var(--du-menu-shortcut-font);
+  color: var(--du-text-muted);
+}
+
+.du-menu-sep {
+  margin: var(--du-menu-sep) 0;
+  border: 0;
+  border-top: 1px solid var(--menu-divider);
+}
+
+.du-menu-group-title {
+  padding: var(--du-menu-sep) var(--du-menu-row-pad-x) var(--du-space-xs);
+  font-size: var(--du-menu-shortcut-font);
+  letter-spacing: var(--du-caps-tracking);
+  color: var(--du-text-muted);
+  text-transform: uppercase;
+}
+
+/* Nested panel of the main menu. The `::before` bridge covers the
+   `--du-submenu-gap` strip (plus the parent's inset + border) so the
+   pointer travelling from the parent row into the child never leaves the
+   submenu wrapper — otherwise the gap would fire the delayed close. */
+.du-menu-submenu::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: calc(var(--du-menu-pad) + 1px + var(--du-submenu-gap));
+}
+
+/* Modals share one padding / radius rhythm. */
+.du-modal-header {
+  display: flex;
+  gap: var(--du-modal-gap);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--du-modal-pad-y) var(--du-modal-pad-x);
+  border-bottom: 1px solid var(--du-ui-border);
+}
+
+.du-modal-body {
+  padding: var(--du-modal-pad-y) var(--du-modal-pad-x);
+  overflow-y: auto;
+}
+
+.du-modal-footer {
+  display: flex;
+  gap: var(--du-gap);
+  justify-content: flex-end;
+  padding: var(--du-modal-pad-y) var(--du-modal-pad-x);
+  border-top: 1px solid var(--du-ui-border);
+}
+
+.du-modal-title {
+  margin: 0;
+  font-size: var(--du-font-size-lg);
+  font-weight: var(--du-font-weight-strong);
+  line-height: var(--du-line-height);
+  color: var(--du-text);
+}
+
+.du-modal-subtitle {
+  margin: var(--du-space-sm) 0 0;
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+/* Flat close glyph in a modal header. */
+.du-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--du-space-sm);
+  color: var(--du-text);
+  background: transparent;
+  border: none;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+}
+
+.du-modal-close:hover {
+  background: var(--du-hover-overlay);
+}
+
+.du-modal-close:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: var(--du-space-xs);
+}
+
+/* Merge dialog — one bordered card per conflict. */
+.du-merge-conflict {
+  margin-bottom: var(--du-space-lg);
+  padding: var(--du-space-md);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-sm);
+}
+
+.du-merge-conflict-title {
+  margin-bottom: var(--du-space-sm);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+.du-merge-conflict-picks {
+  display: flex;
+  gap: var(--du-gap);
+}
+
+.du-merge-conflict-pick {
+  display: flex;
+  align-items: center;
+  gap: var(--du-space-sm);
+  font-size: var(--du-font-size-sm);
+}
+
+/* ------------------------------------------------------------------ */
+/* Toast — top-right stack; the kind accent is the left border, set    */
+/* inline by <ToastItem>.                                              */
+/* ------------------------------------------------------------------ */
+.du-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--du-space-lg);
+  min-width: var(--du-toast-min-w);
+  max-width: var(--du-toast-max-w);
+  padding: var(--du-space-md) var(--du-space-lg);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  line-height: var(--du-line-height);
+  color: var(--du-text);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+  pointer-events: auto;
+}
+
+.du-toast-message {
+  flex: 1;
+}
+
+.du-toast-dismiss {
+  padding: 0;
+  font-size: var(--du-font-size-lg);
+  line-height: 1;
+  color: var(--du-text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.du-toast-dismiss:hover {
+  color: var(--du-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Bottom sheet — mobile dialog docked to the bottom edge.             */
+/* ------------------------------------------------------------------ */
+.du-sheet-grip {
+  display: flex;
+  justify-content: center;
+  padding: var(--du-space-md) 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.du-sheet-grip-bar {
+  display: block;
+  width: 36px;
+  height: var(--du-space-sm);
+  border-radius: var(--du-radius-round);
+  background: var(--du-text);
+  opacity: 0.4;
+}
+
+.du-sheet-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--du-space-lg) var(--du-space-lg);
+}
+
+/* ------------------------------------------------------------------ */
+/* Static chrome docks — where the fixed toolbars live.               */
+/* ------------------------------------------------------------------ */
+/* Brand cell at the start of the top-left bar: a 40-px cell holding the
+   logo (or any host node), as wide as its content. Not interactive. */
+.du-button-group > .du-brand,
+.du-brand {
+  width: auto;
+  min-width: var(--du-button-size);
+  padding: 0 var(--du-space-md);
+  cursor: default;
+}
+
+.du-brand:hover {
+  background: transparent;
+}
+
+.du-brand-logo {
+  display: inline-flex;
+  align-items: center;
+  height: var(--du-brand-h);
+}
+
+.du-brand-logo > svg {
+  display: block;
+  height: var(--du-brand-h);
+  width: auto;
+}
+
+/* Theme-matched artwork: light by default, dark under the dark theme —
+   mirrors the token scopes (system preference, then explicit data-theme).
+   Selectors keep the `.du-brand-logo > …` form so they outrank the base
+   `> svg` rule above. */
+.du-brand-logo > .du-brand-logo-dark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .du-brand-logo > .du-brand-logo-light {
+    display: none;
+  }
+  .du-brand-logo > .du-brand-logo-dark {
+    display: block;
+  }
+}
+
+[data-theme="light"] .du-brand-logo > .du-brand-logo-light {
+  display: block;
+}
+[data-theme="light"] .du-brand-logo > .du-brand-logo-dark {
+  display: none;
+}
+[data-theme="dark"] .du-brand-logo > .du-brand-logo-light {
+  display: none;
+}
+[data-theme="dark"] .du-brand-logo > .du-brand-logo-dark {
+  display: block;
+}
+
+/* Zoom value trigger (opens the zoom menu) — flat, wide enough for "100%". */
+.du-zoom-trigger {
+  min-width: 56px;
+  padding: 0 var(--du-space-md);
+  font-variant-numeric: tabular-nums;
+}
+
+.du-zoom-readout {
+  display: inline-block;
+  min-width: var(--du-button-size);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Standalone bottom-right zoom cluster (hosts without the bottom bar). */
+.du-zoom-floating {
+  position: absolute;
+  right: var(--du-bar-inset);
+  bottom: var(--du-bar-inset);
+  z-index: var(--du-z-ui);
+}
+
+/* Hairline between button clusters inside a toolbar row / column. */
+.du-toolbar-divider {
+  flex: none;
+  width: 1px;
+  height: var(--du-icon-size);
+  margin: 0 var(--du-space-sm);
+  background: var(--du-ui-border);
+}
+
+.du-toolbar-divider.is-vertical {
+  width: 100%;
+  height: 1px;
+  margin: var(--du-space-sm) 0;
+}
+
+/* Minimap — bottom-right, stacked above the bottom bar. */
+.du-minimap-dock {
+  position: absolute;
+  right: var(--du-bar-inset);
+  bottom: var(--du-bar-clear);
+  z-index: var(--du-z-ui);
+  overflow: hidden;
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+}
+
+/* Vertical tool dock — vertically centred with a WHOLE-pixel offset:
+   a plain `translateY(-50%)` (or flex centring) lands on half pixels when
+   the free space is odd, and every glyph in the dock renders blurry. */
+.du-dock {
+  position: absolute;
+  top: round(50%, 1px);
+  z-index: var(--du-z-ui);
+  translate: 0 round(-50%, 1px);
+}
+
+/* ------------------------------------------------------------------ */
+/* File-drop overlay — shown while an OS file drag hovers the canvas.  */
+/* Pointer-events none: the drop lands on the canvas handlers beneath. */
+/* ------------------------------------------------------------------ */
+.du-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--du-z-drop-overlay);
+  pointer-events: none;
+  background: color-mix(in srgb, var(--du-accent) 6%, transparent);
+}
+
+.du-drop-overlay-frame {
+  position: absolute;
+  inset: var(--du-bar-inset);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--du-accent);
+  border-radius: var(--du-radius-lg);
+}
+
+/* One card: the drop glyph + DROP on top, the accepted kinds listed
+   beneath a hairline — no nested chips. */
+.du-drop-overlay-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 320px;
+  max-width: min(560px, 80%);
+  background: var(--du-ui-bg-solid);
+  border: 1px solid var(--du-ui-border);
+  border-radius: var(--du-radius-lg);
+  box-shadow: var(--du-ui-shadow);
+  overflow: hidden;
+}
+
+.du-drop-overlay-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--du-space-md);
+  padding: var(--du-space-2xl) calc(2 * var(--du-space-2xl));
+  color: var(--du-accent);
+}
+
+.du-drop-overlay-label {
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-lg);
+  font-weight: var(--du-font-weight-strong);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.du-drop-overlay-types {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--du-space-md) var(--du-space-xl);
+  border-top: 1px solid var(--du-ui-border);
+  list-style: none;
+}
+
+.du-drop-type {
+  display: flex;
+  align-items: center;
+  gap: var(--du-gap);
+  min-height: var(--du-control-size);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
+  color: var(--du-text);
+}
+
+.du-drop-type-label {
+  font-weight: var(--du-font-weight-strong);
+  white-space: nowrap;
+}
+
+.du-drop-type-formats {
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text-muted);
+}
+
+/* Tool-options panel (brush / eraser) — top-right, under the top bar. */
+.du-tool-options-dock {
+  position: absolute;
+  top: var(--du-bar-clear);
+  right: var(--du-bar-inset);
+  z-index: var(--du-z-ui);
+}
+
+/* Switch — pill toggle used for on/off settings inside menus. */
+.du-switch {
+  position: relative;
+  flex: none;
+  width: var(--du-switch-w);
+  height: var(--du-switch-h);
+  padding: 0;
+  background: var(--du-ui-border);
+  border: 0;
+  border-radius: var(--du-radius-round);
+  cursor: pointer;
+  transition: background var(--du-motion-fast);
+}
+
+.du-switch.is-on {
+  background: var(--du-accent);
+}
+
+.du-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.du-switch-knob {
+  position: absolute;
+  top: var(--du-space-xs);
+  left: var(--du-space-xs);
+  width: calc(var(--du-switch-h) - 2 * var(--du-space-xs));
+  height: calc(var(--du-switch-h) - 2 * var(--du-space-xs));
+  background: var(--du-text-on-accent);
+  border-radius: 50%;
+  box-shadow: var(--du-ui-shadow);
+  transition: transform var(--du-motion-fast);
+}
+
+.du-switch.is-on .du-switch-knob {
+  transform: translateX(calc(var(--du-switch-w) - var(--du-switch-h)));
+}
+
+.du-switch:focus-visible {
+  outline: 2px solid var(--du-accent);
+  outline-offset: 2px;
+}
+
+/* Slider — themed native <input type=range> + value badge.           */
+/* ------------------------------------------------------------------ */
+.du-slider {
+  display: flex;
+  align-items: center;
+  gap: var(--du-space-md);
   width: 100%;
 }
 
@@ -856,22 +1868,22 @@
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
-  height: 18px;
+  height: var(--du-switch-h);
   margin: 0;
   padding: 0;
   cursor: pointer;
 }
 
 .du-slider-track::-webkit-slider-runnable-track {
-  height: 4px;
+  height: var(--du-space-sm);
   background: var(--du-selected-bg);
-  border-radius: 2px;
+  border-radius: var(--du-space-xs);
 }
 
 .du-slider-track::-moz-range-track {
-  height: 4px;
+  height: var(--du-space-sm);
   background: var(--du-selected-bg);
-  border-radius: 2px;
+  border-radius: var(--du-space-xs);
   border: none;
 }
 
@@ -885,7 +1897,7 @@
   border: 2px solid var(--du-ui-bg-solid);
   margin-top: -5px;
   cursor: grab;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--du-ui-shadow);
 }
 
 .du-slider-track::-moz-range-thumb {
@@ -895,7 +1907,7 @@
   border-radius: 50%;
   border: 2px solid var(--du-ui-bg-solid);
   cursor: grab;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--du-ui-shadow);
 }
 
 .du-slider-track:focus {
@@ -908,10 +1920,10 @@
 }
 
 .du-slider-value {
-  min-width: 36px;
+  min-width: 36px; /* "100%" */
   text-align: right;
   font-variant-numeric: tabular-nums;
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
 }
 
@@ -920,15 +1932,15 @@
 /* ------------------------------------------------------------------ */
 .du-number-input {
   width: 64px;
-  height: 24px;
+  height: var(--du-control-h);
   box-sizing: border-box;
   background: var(--du-ui-bg-solid);
   color: var(--du-text);
   border: 1px solid var(--du-ui-border);
   border-radius: var(--du-radius-sm);
-  padding: 0 6px;
+  padding: 0 var(--du-space-sm);
   font: inherit;
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   font-variant-numeric: tabular-nums;
   outline: none;
 }
@@ -940,21 +1952,21 @@
 /* Search input row — sits between the header and the body. */
 .du-side-panel-search {
   position: relative;
-  padding: var(--du-pad-sm) var(--du-pad);
-  border-bottom: 1px solid var(--du-ui-border);
+  padding: var(--du-pad-sm) var(--du-pad) var(--du-pad);
 }
 
 .du-side-panel-search input[type="search"] {
   width: 100%;
-  height: 28px;
+  height: var(--du-input-h);
   box-sizing: border-box;
   background: var(--du-ui-bg-solid);
   color: var(--du-text);
   border: 1px solid var(--du-ui-border);
   border-radius: var(--du-radius-sm);
-  padding: 0 8px 0 26px;
+  padding: 0 var(--du-space-md) 0
+    calc(var(--du-space-md) + var(--du-input-icon-size) + var(--du-space-sm));
   font: inherit;
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   outline: none;
 }
 
@@ -968,7 +1980,7 @@
 
 .du-side-panel-search-icon {
   position: absolute;
-  left: calc(var(--du-pad) + 8px);
+  left: calc(var(--du-pad) + var(--du-space-md));
   top: 50%;
   transform: translateY(-50%);
   color: var(--du-text-muted);
@@ -982,20 +1994,21 @@
   display: inline-flex;
   align-items: center;
   gap: var(--du-gap-sm);
-  padding: 0 12px;
+  padding: 0 var(--du-space-lg);
   height: var(--du-button-size);
   background: var(--du-ui-bg);
   color: var(--du-text);
   border: 1px solid var(--du-ui-border);
-  border-radius: 999px;
+  border-radius: var(--du-radius-round);
   box-shadow: var(--du-ui-shadow);
   cursor: pointer;
-  font-size: 13px;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size);
   line-height: 1;
   white-space: nowrap;
   transition:
-    background 0.15s ease,
-    transform 0.05s ease;
+    background var(--du-motion-fast),
+    transform var(--du-motion-press);
 }
 
 .du-pill-button:hover {
@@ -1011,16 +2024,16 @@
 /* Pointer-events-none so it never blocks hover on neighbour buttons. */
 /* ------------------------------------------------------------------ */
 .du-tooltip {
-  background: var(--du-text);
-  color: var(--du-ui-bg-solid);
-  padding: 4px 8px;
+  background: var(--du-tooltip-bg);
+  color: var(--du-tooltip-fg);
+  padding: var(--du-space-sm) var(--du-space-md);
   border-radius: var(--du-radius-sm);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   line-height: 1.4;
   white-space: nowrap;
   box-shadow: var(--du-ui-shadow);
-  font-family: inherit;
-  max-width: 260px;
+  font-family: var(--du-font-family);
+  max-width: var(--du-tooltip-max-w);
 }
 
 /* ------------------------------------------------------------------ */
@@ -1031,22 +2044,21 @@
 /* ------------------------------------------------------------------ */
 .du-help-islands {
   display: grid;
-  gap: 24px;
+  gap: var(--du-space-2xl);
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 }
 
 .du-help-island {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--du-space-md);
 }
 
 .du-help-island-title {
   margin: 0;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: var(--du-font-size);
+  font-weight: var(--du-font-weight-strong);
   color: var(--du-text);
-  letter-spacing: 0.2px;
 }
 
 .du-help-island-rows {
@@ -1059,9 +2071,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 8px 12px;
-  font-size: 13px;
+  gap: var(--du-space-lg);
+  padding: var(--du-space-md) var(--du-space-lg);
+  font-size: var(--du-font-size);
+  line-height: var(--du-line-height);
   color: var(--du-text);
   border-bottom: 1px solid var(--du-ui-border);
 }
@@ -1078,38 +2091,38 @@
 .du-help-keys {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--du-space-sm);
   flex-shrink: 0;
 }
 
 .du-help-keys-separator {
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
-  padding: 0 2px;
+  padding: 0 var(--du-space-xs);
 }
 
 .du-help-key {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
+  min-width: var(--du-key-h);
+  height: var(--du-key-h);
+  padding: 0 var(--du-space-sm);
   background: var(--du-selected-bg);
   color: var(--du-selected-fg);
   border-radius: var(--du-radius-sm);
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 600;
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  font-weight: var(--du-font-weight-strong);
   line-height: 1;
   white-space: nowrap;
 }
 
 .du-help-platform-badge {
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--du-caps-tracking);
 }
 
 /* ------------------------------------------------------------------ */
@@ -1134,9 +2147,9 @@
   border-radius: var(--du-radius);
   box-shadow: var(--du-ui-shadow);
   padding: var(--du-pad-sm);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text);
-  max-width: calc(100vw - 32px);
+  max-width: calc(100vw - 2 * var(--du-bar-inset));
   /* Allow horizontal scroll within the pill when too many controls
      are visible; `shift` middleware clamps the outer position but
      a panel wider than viewport still needs internal overflow. */
@@ -1154,13 +2167,11 @@
   right: 0;
   /* Sit ABOVE the bottom bar (zoom / help) + the home-indicator safe area
      so the two don't overlap. Mirrors the side-panel top offset. */
-  bottom: calc(
-    var(--du-bar-inset) + var(--du-button-size) + var(--du-gap) + env(safe-area-inset-bottom, 0px)
-  );
-  z-index: 1500;
+  bottom: calc(var(--du-bar-clear) + env(safe-area-inset-bottom, 0px));
+  z-index: var(--du-z-floating);
   display: flex;
   justify-content: center;
-  padding: 0 8px;
+  padding: 0 var(--du-space-md);
   pointer-events: none;
 }
 
@@ -1171,10 +2182,10 @@
   flex-direction: column;
   align-items: stretch;
   width: 100%;
-  max-width: 560px;
+  max-width: var(--du-modal-max-w);
   overflow: visible;
-  gap: 6px;
-  padding: 8px;
+  gap: var(--du-space-sm);
+  padding: var(--du-space-md);
 }
 .du-sel-mobile-row {
   display: flex;
@@ -1205,19 +2216,19 @@
   align-items: center;
   gap: var(--du-gap-sm);
   border-top: 1px solid var(--du-ui-border);
-  padding-top: 8px;
+  padding-top: var(--du-space-md);
 }
 /* ≥44px touch targets on the mobile panel (Apple HIG). Standalone icon
    buttons + color triggers grow; grouped segmented buttons stay a touch
    smaller so wide controls (font-size S/M/L/XL) still fit one row. */
 .du-sel-panel-mobile .du-sel-icon-button,
 .du-sel-panel-mobile .du-sel-color-trigger {
-  width: 44px;
-  height: 44px;
+  width: var(--du-touch-size);
+  height: var(--du-touch-size);
 }
 .du-sel-panel-mobile .du-button-group > .du-icon-button {
-  width: 38px;
-  height: 38px;
+  width: var(--du-control-size);
+  height: var(--du-control-size);
 }
 
 /* Flat segmented controls inside the floating panel — no group
@@ -1228,7 +2239,7 @@
   border: none;
   box-shadow: none;
   padding: 0;
-  gap: 2px;
+  gap: var(--du-space-xs);
 }
 
 .du-sel-panel .du-button-group > .du-icon-button {
@@ -1262,9 +2273,9 @@
 
 .du-sel-color-swatch {
   display: inline-block;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
+  width: var(--du-divider-h);
+  height: var(--du-divider-h);
+  border-radius: var(--du-radius-sm);
   border: 1px solid var(--du-ui-border);
   box-sizing: border-box;
 }
@@ -1310,13 +2321,13 @@
   justify-content: center;
   height: var(--du-button-size-sm);
   min-width: var(--du-button-size-sm);
-  padding: 0 8px;
+  padding: 0 var(--du-space-md);
   background: transparent;
   border: none;
   border-radius: var(--du-radius-sm);
   cursor: pointer;
   color: var(--du-text);
-  font-size: 12px;
+  font-size: var(--du-font-size-sm);
   font-variant-numeric: tabular-nums;
 }
 
@@ -1330,12 +2341,27 @@
 }
 
 /* Visual divider between inline groups (z-order, actions). */
-.du-sel-divider {
+/* Control clusters of the selection panel. The separator is drawn by a
+   group that has a NON-EMPTY group before it — so clusters whose controls
+   all rendered nothing for this selection never leave a stray or doubled
+   divider, and no divider ever sits at either end. */
+.du-sel-group {
+  display: inline-flex;
+  gap: var(--du-gap-sm);
+  align-items: center;
+}
+
+.du-sel-group:empty {
+  display: none;
+}
+
+.du-sel-group:not(:empty) ~ .du-sel-group:not(:empty)::before {
   display: inline-block;
   width: 1px;
-  height: 18px;
+  height: var(--du-divider-h);
+  margin: 0 var(--du-space-xs);
+  content: "";
   background: var(--du-ui-border);
-  margin: 0 2px;
 }
 
 /* ------------------------------------------------------------------ */
@@ -1347,26 +2373,26 @@
   border: 1px solid var(--du-ui-border);
   border-radius: var(--du-radius);
   box-shadow: var(--du-ui-shadow);
-  padding: var(--du-pad);
-  font-size: 12px;
+  padding: var(--du-popover-pad);
+  font-size: var(--du-font-size-sm);
   color: var(--du-text);
-  min-width: 120px;
-  max-width: 320px;
+  min-width: var(--du-popover-min-w);
+  max-width: var(--du-popover-max-w);
 }
 
 .du-sel-popover-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--du-space-md);
   min-width: 0;
 }
 
 .du-sel-popover-label {
   margin: 0;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: var(--du-font-size-xs);
+  font-weight: var(--du-font-weight-strong);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--du-caps-tracking);
   color: var(--du-text-muted);
 }
 
@@ -1375,12 +2401,14 @@
    current value. */
 .du-sel-menu-row {
   all: unset;
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
+  min-height: var(--du-menu-row-h);
   box-sizing: border-box;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 13px;
+  padding: 0 var(--du-menu-row-pad-x);
+  border-radius: var(--du-menu-row-radius);
+  font-size: var(--du-menu-font);
   color: var(--du-text);
   cursor: pointer;
 }
@@ -1398,12 +2426,12 @@
   width: 220px;
   max-width: 60vw;
   box-sizing: border-box;
-  padding: 6px 8px;
-  font-size: 13px;
+  padding: var(--du-space-sm) var(--du-space-md);
+  font-size: var(--du-font-size);
   color: var(--du-text);
   background: var(--du-ui-bg);
   border: 1px solid var(--du-ui-border);
-  border-radius: 4px;
+  border-radius: var(--du-radius-sm);
   outline: none;
 }
 
@@ -1414,29 +2442,228 @@
 
 /* Hover link popup (chip above a linked element). */
 .du-link-popup {
-  z-index: 1400;
-  margin-top: -6px;
+  z-index: var(--du-z-link-chrome);
+  margin-top: calc(-1 * var(--du-space-sm));
+  pointer-events: auto;
+}
+
+/* Two-row alignment / list dropdowns: stacked segment rows. */
+.du-sel-align-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--du-space-sm);
+  padding: var(--du-space-sm);
+}
+
+.du-sel-align-rows-row {
+  display: flex;
+  gap: var(--du-space-sm);
+  justify-content: center;
+}
+
+/* Image file-name input in the toolbar row. */
+.du-sel-name-input {
+  width: 140px;
+  padding: var(--du-space-xs) var(--du-space-sm);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--du-radius-sm);
+}
+
+.du-sel-name-input:hover,
+.du-sel-name-input:focus {
+  border-color: var(--menu-border);
+  outline: none;
+}
+
+/* Sticky Auto font-size toggle inside the size popover. */
+.du-sel-auto-size {
+  width: auto;
+  padding: var(--du-space-xs) var(--du-space-md);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  font-weight: var(--du-font-weight-strong);
+}
+
+/* Sticky size letters (S / M / L segments). */
+.du-sel-size-letter {
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  font-weight: var(--du-font-weight-strong);
+}
+
+/* Emoji picker grid inside its popover. */
+.du-sel-emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(5, var(--du-input-h));
+  gap: var(--du-space-xs);
+  padding: var(--du-space-sm);
+}
+
+.du-sel-emoji-item {
+  width: var(--du-input-h);
+  height: var(--du-input-h);
+  padding: 0;
+  font-size: var(--du-font-size-lg);
+  line-height: 1;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+}
+
+.du-sel-emoji-item:hover {
+  border-color: var(--menu-border);
+}
+
+/* Sticky tag pills in the tag popover. */
+.du-sel-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--du-space-sm);
+  margin-bottom: var(--du-space-sm);
+}
+
+.du-sel-tag-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--du-space-sm);
+  padding: var(--du-space-xs) var(--du-space-md);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-radius-round);
+}
+
+.du-sel-tag-remove {
+  padding: 0 var(--du-space-xs);
+  font-size: var(--du-font-size-sm);
+  line-height: 1;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+/* Sticky reactions: pills are painted by the canvas renderer; the DOM
+   only carries transparent click zones on the same rects plus the "+"
+   button / picker anchor. */
+.du-sticky-reactions {
+  position: fixed;
+  z-index: var(--du-z-link-chrome);
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.du-sticky-reaction-hit {
+  position: fixed;
+  z-index: var(--du-z-link-chrome);
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--du-radius-round);
+  cursor: pointer;
+}
+
+.du-sticky-reaction-picker {
+  position: absolute;
+  bottom: var(--du-key-h);
+  left: 0;
+  display: grid;
+  grid-template-columns: repeat(5, var(--du-input-h));
+  gap: var(--du-space-xs);
+  padding: var(--du-space-sm);
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
+}
+
+/* Border-group trigger: an outlined ring showing the stroke colour. */
+.du-sel-swatch-ring {
+  background: transparent;
+  border: 3px solid var(--menu-border); /* ring thickness = stroke preview */
+}
+
+/* Frame size preset list inside its popover. */
+.du-sel-preset-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--du-space-sm);
+}
+
+.du-sel-preset-item {
+  padding: var(--du-space-sm) var(--du-space-md);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text);
+  background: transparent;
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-radius-sm);
+  cursor: pointer;
+}
+
+.du-sel-preset-item:hover {
+  border-color: var(--du-accent);
+}
+
+/* Alt-text textarea inside its popover. */
+.du-sel-alt-input {
+  width: 200px;
+  padding: var(--du-space-sm);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
+  color: var(--du-text);
+  background: transparent;
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-radius-sm);
+  resize: vertical;
+}
+
+/* Persistent link badge at an element's top-right corner. Slightly offset
+   outward so it reads as attached to the shape without covering content. */
+.du-link-badge {
+  z-index: var(--du-z-link-chrome);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--du-divider-h);
+  height: var(--du-divider-h);
+  padding: 0;
+  color: var(--du-accent);
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: 50%;
+  box-shadow: var(--du-ui-shadow);
+  transform: translate(-40%, -60%);
+  cursor: pointer;
   pointer-events: auto;
 }
 
+.du-link-badge:hover {
+  color: var(--du-accent-strong, var(--du-accent));
+  border-color: var(--du-accent);
+}
+
 .du-link-popup-url {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--du-space-sm);
   max-width: 280px;
-  padding: 4px 8px;
-  font:
-    12px system-ui,
-    -apple-system,
-    Segoe UI,
-    Roboto,
-    sans-serif;
+  padding: var(--du-space-sm) var(--du-space-md);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
   color: var(--du-accent);
   text-decoration: none;
   background: var(--menu-bg);
   border: 1px solid var(--menu-border);
-  border-radius: 6px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
   cursor: pointer;
 }
 
@@ -1455,18 +2682,18 @@
 .du-arrowhead-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 2px;
-  margin-top: 4px;
+  gap: var(--du-space-xs);
+  margin-top: var(--du-space-sm);
 }
 .du-arrowhead-option {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 30px;
-  height: 26px;
-  padding: 2px;
+  min-width: var(--du-swatch-size);
+  height: var(--du-swatch-size);
+  padding: var(--du-space-xs);
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--du-radius-sm);
   background: transparent;
   cursor: pointer;
   color: var(--du-text);
@@ -1478,24 +2705,24 @@
   border-color: var(--du-accent);
 }
 .du-arrowhead-none {
-  font-size: 13px;
+  font-size: var(--du-font-size);
   opacity: 0.6;
 }
 .du-arrowhead-erd-label {
-  font-size: 9px;
+  font-size: var(--du-font-size-xs);
   line-height: 1.05;
   text-align: center;
 }
 .du-arrowhead-erd-toggle {
-  margin-top: 6px;
+  margin-top: var(--du-space-sm);
   width: 100%;
   text-align: left;
   border: none;
   background: transparent;
   cursor: pointer;
-  font-size: 11px;
+  font-size: var(--du-font-size-sm);
   color: var(--du-text-muted);
-  padding: 2px 0;
+  padding: var(--du-space-xs) 0;
 }
 .du-arrowhead-erd-toggle:hover {
   color: var(--du-text);
@@ -1505,17 +2732,16 @@
 .du-link-caption-input {
   min-width: 60px;
   max-width: 220px;
-  padding: 2px 6px;
-  font:
-    12px system-ui,
-    sans-serif;
+  padding: var(--du-space-xs) var(--du-space-sm);
+  font-family: var(--du-font-family);
+  font-size: var(--du-font-size-sm);
   line-height: 1.25;
   text-align: center;
   color: var(--du-text);
   background: var(--du-ui-bg-solid);
   border: 1px solid var(--du-accent);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  border-radius: var(--du-radius-sm);
+  box-shadow: var(--du-ui-shadow);
   outline: none;
   resize: none;
   overflow: hidden;
@@ -1524,22 +2750,22 @@
 /* Mini shape-picker shown after a link is dropped on empty canvas. */
 .du-link-drop-menu {
   display: flex;
-  gap: 2px;
-  padding: 4px;
+  gap: var(--du-space-xs);
+  padding: var(--du-space-sm);
   background: var(--du-ui-bg-solid);
   border: 1px solid var(--du-ui-border);
-  border-radius: 8px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  border-radius: var(--du-radius);
+  box-shadow: var(--du-ui-shadow);
 }
 .du-link-drop-item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  padding: 4px;
+  width: var(--du-button-size-sm);
+  height: var(--du-button-size-sm);
+  padding: var(--du-space-sm);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--du-radius-sm);
   background: transparent;
   cursor: pointer;
   color: var(--du-text);
@@ -1556,3 +2782,115 @@
   outline: 2px solid var(--du-accent);
   outline-offset: -2px;
 }
+
+/* Mask picker tiles inside the image-mask popover. */
+.du-sel-mask-tiles {
+  display: flex;
+  gap: var(--du-space-sm);
+  margin-bottom: var(--du-space-sm);
+}
+
+/* Aspect-preset rows in the mask popover: icon + name, crop ratio
+   right-aligned. */
+/* Arrange popover: one row of align / distribute action buttons. */
+.du-sel-arrange-row {
+  display: flex;
+  gap: var(--du-space-xs);
+}
+
+.du-sel-mask-list {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--du-space-sm);
+}
+
+.du-sel-mask-row {
+  display: flex;
+  gap: var(--du-menu-gap);
+  align-items: center;
+  width: 100%;
+  min-height: var(--du-menu-row-h);
+  padding: 0 var(--du-menu-row-pad-x);
+  font-size: var(--du-menu-font);
+  color: var(--du-text);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: var(--du-menu-row-radius);
+  cursor: pointer;
+}
+
+.du-sel-mask-row:hover {
+  background: var(--du-hover-overlay);
+}
+
+.du-sel-mask-row.is-active {
+  background: var(--du-selected-bg);
+}
+
+.du-sel-mask-ratio {
+  margin-left: auto;
+  font-size: var(--du-menu-shortcut-font);
+  color: var(--du-text-muted);
+}
+
+/* "Shapes and lines" flyout beside the vertical toolbar. */
+.du-shapes-flyout {
+  position: absolute;
+  top: 0;
+  /* The wrap sits inside the dock: clear its inset + border, then the gap. */
+  left: calc(100% + var(--du-pad-sm) + 1px + var(--du-flyout-gap));
+  z-index: var(--du-z-ui);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: var(--du-menu-min-w);
+  padding: var(--du-menu-pad);
+  background: var(--menu-bg);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--du-menu-radius);
+  box-shadow: var(--du-ui-shadow);
+}
+
+/* Rows use the shared menu metrics (see `.du-menu-row`). */
+.du-shapes-flyout-row {
+  display: flex;
+  gap: var(--du-menu-gap);
+  align-items: center;
+  width: 100%;
+  min-height: var(--du-menu-row-h);
+  padding: 0 var(--du-menu-row-pad-x);
+  font-size: var(--du-menu-font);
+  color: var(--du-text);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: var(--du-menu-row-radius);
+  cursor: pointer;
+}
+
+.du-shapes-flyout-row:hover {
+  background: var(--du-hover-overlay);
+}
+
+/* The armed tool (shape kind / line preset) — tonal selected, like menus. */
+.du-shapes-flyout-row.is-active {
+  background: var(--du-selected-bg);
+  color: var(--du-selected-fg);
+}
+
+.du-shapes-flyout-row.is-active .du-shapes-flyout-hotkey {
+  color: inherit;
+}
+
+.du-shapes-flyout-hotkey {
+  margin-left: auto;
+  font-size: var(--du-menu-shortcut-font);
+  color: var(--du-text-muted);
+}
+
+.du-shapes-flyout-divider {
+  margin: var(--du-menu-sep) 0;
+  border: none;
+  border-top: 1px solid var(--du-ui-border);
+}