@1agh/maude 0.28.0 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/canvas-shell.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-shell.tsx — universal input-grammar wrapper for TSX canvases
- * @scope      plugins/design/dev-server/canvas-shell.tsx
+ * @scope      apps/studio/canvas-shell.tsx
  * @purpose    Mounted by `DesignCanvas` for every canvas. Stacks
  *             SelectionSetProvider + ContextMenuProvider, wires the input
  *             router to provider actions, and renders the floating chrome
@@ -42,10 +42,10 @@ import { ArtboardMarqueeOverlay } from './artboard-marquee.tsx';
 import {
   type ArtboardRect,
   SnapGuideOverlay,
-  type ViewportControllerHandle,
   useArtboardsContext,
   useDragStateContext,
   useViewportControllerContext,
+  type ViewportControllerHandle,
 } from './canvas-lib.tsx';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import {
@@ -59,12 +59,14 @@ import {
 import { ContextualToolbar } from './contextual-toolbar.tsx';
 import { CursorsOverlay } from './cursors-overlay.tsx';
 import {
-  cssEscape,
   cssPath,
   deriveFile,
   domPath,
   hoverTargetToSelection,
   realClasses,
+  resolveSelectionEl,
+  scopedCdSelector,
+  selectorIndex,
   shortText,
 } from './dom-selection.ts';
 import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
@@ -129,32 +131,46 @@ import { useUndoStack } from './use-undo-stack.tsx';
 // theme (readInitialTheme() → 'dark'). DDR — mirrors the `--maude-hud-*`
 // precedent; the `data-maude-theme` attribute is deliberately SEPARATE from the
 // DS `data-theme` so chrome theming never touches artboard palettes.
+// Plan B (Task 7) — the in-canvas chrome now mirrors the maude DS ladder (indigo
+// accent hue 268, cool-neutral hue 255) so the iframe chrome reads as one product
+// with the rewritten outer shell. Accent-fg is the maude dark navy (NOT white):
+// maude's bright indigo accent needs a dark fg for WCAG contrast (white/indigo
+// ≈ 3:1, fails AA; navy/indigo ≈ 6.3:1). Token-only swap — no overlay logic
+// changes (DDR-054). Values lifted from `.design/system/maude/colors_and_type.css`.
 const HUD_TOKENS_CSS = `
 :root,
 :root[data-maude-theme="dark"] {
-  --maude-hud-accent:        #d63b1f;
-  --maude-hud-accent-hover:  #b8331b;
-  --maude-hud-accent-active: #962a16;
-  --maude-hud-accent-fg:     #ffffff;
-  --maude-hud-accent-tint:   color-mix(in oklab, #d63b1f 14%, transparent);
-
-  --maude-chrome-bg-0:      oklch(13% 0.012 60);
-  --maude-chrome-bg-1:      oklch(17% 0.014 60);
-  --maude-chrome-bg-2:      oklch(20% 0.016 60);
-  --maude-chrome-fg-0:      oklch(94% 0.014 80);
-  --maude-chrome-fg-1:      oklch(78% 0.014 80);
-  --maude-chrome-border:    oklch(28% 0.018 60);
-  --maude-chrome-shadow:    rgba(0, 0, 0, 0.45);
-  --maude-chrome-font-mono: 'Berkeley Mono', 'TX-02', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --maude-hud-accent:        oklch(0.680 0.180 268);
+  --maude-hud-accent-hover:  oklch(0.730 0.170 268);
+  --maude-hud-accent-active: oklch(0.630 0.180 268);
+  --maude-hud-accent-fg:     oklch(0.180 0.030 268);
+  --maude-hud-accent-tint:   color-mix(in oklab, oklch(0.680 0.180 268) 16%, transparent);
+
+  --maude-chrome-bg-0:      oklch(0.165 0.012 255);
+  --maude-chrome-bg-1:      oklch(0.198 0.012 255);
+  --maude-chrome-bg-2:      oklch(0.232 0.013 255);
+  --maude-chrome-fg-0:      oklch(0.955 0.005 250);
+  --maude-chrome-fg-1:      oklch(0.790 0.008 250);
+  --maude-chrome-border:    oklch(0.290 0.012 255);
+  --maude-chrome-dot:       oklch(0.340 0.012 255);
+  --maude-chrome-shadow:    rgba(0, 0, 0, 0.46);
+  --maude-chrome-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 }
 :root[data-maude-theme="light"] {
-  --maude-chrome-bg-0:   oklch(97.5% 0.008 78);
-  --maude-chrome-bg-1:   oklch(95.5% 0.010 78);
-  --maude-chrome-bg-2:   oklch(93.0% 0.012 78);
-  --maude-chrome-fg-0:   oklch(20% 0.020 50);
-  --maude-chrome-fg-1:   oklch(38% 0.018 50);
-  --maude-chrome-border: oklch(86% 0.014 70);
-  --maude-chrome-shadow: color-mix(in oklab, oklch(20% 0.020 50) 14%, transparent);
+  --maude-hud-accent:        oklch(0.520 0.195 268);
+  --maude-hud-accent-hover:  oklch(0.470 0.195 268);
+  --maude-hud-accent-active: oklch(0.430 0.190 268);
+  --maude-hud-accent-fg:     oklch(0.995 0.004 268);
+  --maude-hud-accent-tint:   color-mix(in oklab, oklch(0.520 0.195 268) 12%, transparent);
+
+  --maude-chrome-bg-0:   oklch(0.975 0.004 255);
+  --maude-chrome-bg-1:   oklch(1.000 0 0);
+  --maude-chrome-bg-2:   oklch(0.987 0.003 255);
+  --maude-chrome-fg-0:   oklch(0.225 0.015 260);
+  --maude-chrome-fg-1:   oklch(0.400 0.014 260);
+  --maude-chrome-border: oklch(0.922 0.005 255);
+  --maude-chrome-dot:    oklch(0.860 0.008 255);
+  --maude-chrome-shadow: color-mix(in oklab, oklch(0.225 0.015 260) 14%, transparent);
 }
 `;
 
@@ -956,12 +972,16 @@ function buildRegistry(deps: {
 
   const postComposeForTarget = (target: ContextTarget): void => {
     if (typeof window === 'undefined') return;
+    const composeSelector = target.cdId
+      ? scopedCdSelector(target.cdId, target.artboardId)
+      : cssPath(target.el);
     const sel: Selection | null = target.el
       ? {
           file: deriveFile(),
           id: target.cdId ?? undefined,
-          selector: target.cdId ? `[data-cd-id="${target.cdId}"]` : cssPath(target.el),
+          selector: composeSelector,
           artboardId: target.artboardId,
+          index: target.cdId ? selectorIndex(document, composeSelector, target.el) : 0,
           tag: target.el.tagName.toLowerCase(),
           classes: realClasses(target.el),
           text: shortText(target.el, 240),
@@ -1283,6 +1303,15 @@ function CanvasRouter({
         if (typeof t === 'string') setTool(t as never);
         return;
       }
+      // Plan C — Edit menu (shell) bridges to the in-canvas undo stack.
+      if (m.dgn === 'undo') {
+        void undoStack.undo();
+        return;
+      }
+      if (m.dgn === 'redo') {
+        void undoStack.redo();
+        return;
+      }
       // D9 — canvas-shell chrome follows the Maude chrome theme. The chrome's
       // `--maude-chrome-*` token family is keyed by `data-maude-theme` on the
       // iframe documentElement (see HUD_TOKENS_CSS). This attribute is
@@ -1299,7 +1328,7 @@ function CanvasRouter({
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [selSet, annotSel, setTool]);
+  }, [selSet, annotSel, setTool, undoStack]);
 
   // Cleanup any pending rAF on unmount.
   useEffect(
@@ -1822,11 +1851,7 @@ function SelectionHalos() {
       for (let i = 0; i < selected.length; i++) {
         const sel = selected[i];
         const child = c.children[i] as HTMLDivElement;
-        const el = sel?.id
-          ? document.querySelector(`[data-cd-id="${cssEscape(sel.id)}"]`)
-          : sel
-            ? safeQuery(sel.selector)
-            : null;
+        const el = sel ? resolveSelectionEl(document, sel) : null;
         if (!el) {
           child.style.display = 'none';
           continue;
@@ -1879,9 +1904,7 @@ function GroupBbox() {
       let yMax = Number.NEGATIVE_INFINITY;
       let anyHit = false;
       for (const sel of selected) {
-        const el = sel.id
-          ? document.querySelector(`[data-cd-id="${cssEscape(sel.id)}"]`)
-          : safeQuery(sel.selector);
+        const el = resolveSelectionEl(document, sel);
         if (!el) continue;
         // Post-Wave-2: direct artboard drag — the article updates its own
         // `left/top` during drag, so the group bbox just follows via
@@ -1936,11 +1959,3 @@ function classifyContextKind(target: HoverTarget | null): ContextTargetKind {
   if (target.artboardId) return 'artboard-chrome';
   return 'world';
 }
-
-function safeQuery(selector: string): Element | null {
-  try {
-    return document.querySelector(selector);
-  } catch {
-    return null;
-  }
-}