@1agh/maude 0.28.1 → 0.29.0

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

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-icons.tsx — Phase 5.1 inline-SVG icon set
- * @scope      plugins/design/dev-server/canvas-icons.tsx
+ * @scope      apps/studio/canvas-icons.tsx
  * @purpose    Tiny dependency-free Lucide-style icon set for the canvas
  *             chrome (tool palette, context toolbar). Each icon is a single
  *             `<svg>` with `currentColor` stroke so it inherits the button
@@ -122,6 +122,18 @@ export function IconText(props: IconProps) {
   );
 }
 
+// Phase 23 — link (chain) glyph, used by the annotation context toolbar's
+// "Open link" button. (Media is paste/drop-only — no toolbar buttons — so the
+// picture-frame image icon was dropped.)
+export function IconLink(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </Svg>
+  );
+}
+
 export function IconPresentation(props: IconProps) {
   return (
     <Svg {...props}>
@@ -404,11 +416,58 @@ export function IconAlignRight(props: IconProps) {
   );
 }
 
+// ── Annotation polish text-style icons (italic / underline / lists) ──────────
+export function IconItalic(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 5h8M6 19h8M14 5l-4 14" />
+    </Svg>
+  );
+}
+export function IconUnderline(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M7 4v7a5 5 0 0010 0V4M5 20h14" />
+    </Svg>
+  );
+}
+export function IconListBullet(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M9 6h11M9 12h11M9 18h11" />
+      <circle cx="4.5" cy="6" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="12" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="18" r="1.1" fill="currentColor" stroke="none" />
+    </Svg>
+  );
+}
+export function IconListOrdered(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 6h10M10 12h10M10 18h10" />
+      <path d="M3 5l1.4-.5V9M3 9h2.8" strokeWidth={1.4} />
+      <path d="M3.2 14.2a1 1 0 011.7.7c0 .9-1.7 1.4-1.7 2.6h2" strokeWidth={1.4} />
+    </Svg>
+  );
+}
+
+// ── Annotation polish — highlighter (chisel-tip marker) ──────────────────────
+export function IconHighlighter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M14 4l6 6-8.5 8.5H6v-5.5z" />
+      <path d="M11 7l6 6" />
+      <path d="M4 21h7" strokeWidth={2.5} />
+    </Svg>
+  );
+}
+
 export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   move: IconMove,
   hand: IconHand,
   comment: IconComment,
   pen: IconPen,
+  highlighter: IconHighlighter,
   // Phase 24 — single Shape tool. rect/ellipse kept for any legacy lookups.
   shape: IconShape,
   rect: IconRect,

package/{plugins/design/dev-server → apps/studio}/canvas-lib-inline.ts

@@ -3,7 +3,7 @@
 //
 // `/design:handoff` emits a self-contained shadcn registry-item.json. Canvases
 // import their envelope + helpers from `@maude/canvas-lib`, which the dev-server
-// resolves to its bundled `plugins/design/dev-server/canvas-lib.tsx`. The
+// resolves to its bundled `apps/studio/canvas-lib.tsx`. The
 // handoff drop must inline every used export so the consumer never sees the
 // `@maude/canvas-lib` specifier — it's a dev-time virtual module, not a real
 // npm dep.

package/{plugins/design/dev-server → apps/studio}/canvas-lib-resolver.ts

@@ -2,7 +2,7 @@
 //
 // Canvases import the shared canvas library via the specifier `@maude/canvas-lib`.
 // At build time we redirect that to the dev-server-bundled source at
-// `plugins/design/dev-server/canvas-lib.tsx` so:
+// `apps/studio/canvas-lib.tsx` so:
 //
 //   - the lib ships with the dev-server install (single source of truth — see
 //     DDR-025; reverses DDR-022's "project-owned source under <designRoot>/_lib/"),

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

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-lib.tsx — dev-server-bundled canvas library
- * @scope      plugins/design/dev-server/canvas-lib.tsx
+ * @scope      apps/studio/canvas-lib.tsx
  *             Ships with the dev-server install; resolved at canvas build time
  *             via the `@maude/canvas-lib` virtual specifier. Per DDR-025, this
  *             is the single source of truth — no project-side copy.
@@ -137,10 +137,9 @@ const ENGINE_CSS = `
   /* Canvas-shell chrome — the workspace plane + dotted grid follow the Maude
      chrome theme (--maude-chrome-*), NOT the DS palette. See canvas-shell.tsx
      HUD_TOKENS_CSS. Artboards (.dc-artboard) keep the DS theme. */
-  background-color: var(--maude-chrome-bg-1, #f4f1ea);
+  background-color: var(--maude-chrome-bg-0, #f4f1ea);
   background-image:
-    linear-gradient(var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px),
-    linear-gradient(90deg, var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px);
+    radial-gradient(var(--maude-chrome-dot, rgba(0,0,0,0.12)) 1.1px, transparent 1.2px);
   background-size: 24px 24px;
 }
 /* DDR-046 — Snap guides. Sibling kind = confident magenta + glow + distance
@@ -199,6 +198,17 @@ const ENGINE_CSS = `
      irrelevant under zoom (zoom anchors top-left of the box). will-change
      hints to the compositor that this layer changes often. */
   will-change: transform;
+  /* Marquee / multi-select drags over artboards must not trigger native text
+     selection (it highlighted the canvas content). Editable surfaces re-enable
+     it below. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+.dc-world input,
+.dc-world textarea,
+.dc-world [contenteditable="true"] {
+  user-select: text;
+  -webkit-user-select: text;
 }
 .dc-section-collapsed { display: contents; }
 
@@ -1162,7 +1172,7 @@ export function useDragStateContext(): DragStateBus | null {
 interface DesignCanvasProps {
   children: ReactNode;
   /** Per-overlay opt-out. `false` hides it; omit or `true` shows it. */
-  controls?: { minimap?: boolean; toolbar?: boolean };
+  controls?: { minimap?: boolean; toolbar?: boolean; zoom?: boolean };
 }
 
 /**
@@ -1374,6 +1384,7 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   );
 
   const showMiniMap = controls?.minimap !== false;
+  const showZoom = controls?.zoom !== false;
 
   // Drag-state bus (Phase 4.2). Single source of truth: only one artboard
   // drag is active at a time. DCArtboards write here when their local drag
@@ -1445,10 +1456,12 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
         {children}
       </div>
       {showMiniMap ? <DCMiniMap /> : null}
-      {/* DCZoomToolbar is intentionally not rendered here. The Phase 5.1
-          ToolPalette absorbs its 4 actions into the unified canvas chrome.
-          The component stays exported for back-compat with any consumer that
-          still imports it directly. */}
+      {/* Plan C F6 — separate bottom-left zoom pill (the design's ZoomHud).
+          Phase 5.1 had folded zoom into the ToolPalette; user feedback wants
+          the design's standalone pill, so DCZoomToolbar renders here again (the
+          ToolPalette's inline zoom is removed in tool-palette.tsx). It carries
+          MORE than the mock — fit + actual-size — so no capability is lost. */}
+      {showZoom ? <DCZoomToolbar /> : null}
     </div>
   );
 
@@ -1900,6 +1913,9 @@ const OVERLAY_CSS = `
   overflow: hidden;
 }
 .dc-mm-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 5px 8px 4px;
   border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   letter-spacing: 0.05em;
@@ -1907,6 +1923,7 @@ const OVERLAY_CSS = `
   font-size: 9px;
   background: var(--maude-chrome-bg-1, #f4f1ea);
 }
+.dc-mm-count { font-variant-numeric: tabular-nums; color: var(--maude-chrome-fg-2, rgba(40,30,20,0.55)); }
 .dc-mm-body {
   position: relative;
   width: 100%;
@@ -1932,9 +1949,8 @@ const OVERLAY_CSS = `
 }
 .dc-zoom-tb {
   position: absolute;
-  left: 50%;
+  left: 16px;
   bottom: 16px;
-  transform: translateX(-50%);
   display: flex;
   align-items: stretch;
   background: var(--maude-chrome-bg-0, #ffffff);
@@ -2105,7 +2121,10 @@ export function DCMiniMap() {
   return (
     <div className="dc-mm" aria-hidden="true">
       <div className="dc-mm-hd">
-        WORLD MAP · {world.artboards.length}/{world.artboards.length}
+        <span>World</span>
+        <span className="dc-mm-count">
+          {world.artboards.length} / {world.artboards.length}
+        </span>
       </div>
       <div
         className="dc-mm-body"

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
@@ -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;
-  }
-}