@1agh/maude 0.28.1 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/input-router.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       input-router.tsx — canvas pointer/keyboard classifier + hook
- * @scope      plugins/design/dev-server/input-router.tsx
+ * @scope      apps/studio/input-router.tsx
  * @purpose    Owned by canvas-lib's DesignCanvas. Classifies the NON-WHEEL
  *             subset of pointer + key events into discrete router actions.
  *             `useViewportController` keeps owning wheel + middle-mouse +
@@ -68,6 +68,10 @@ export type Tool =
   | 'hand'
   | 'comment'
   | 'pen'
+  // Annotation polish (item 8) — FigJam-style highlighter. A `pen`-shaped tool
+  // that produces a translucent wide multiply stroke (a PenStroke with
+  // `highlighter:true`), not a new stroke type.
+  | 'highlighter'
   // Phase 24 — `shape` is the single active draw tool that produces rect /
   // ellipse / polygon strokes (the kind is chosen via the palette popover).
   // `rect` / `ellipse` stay in the union as the stroke discriminants they
@@ -82,6 +86,7 @@ export type Tool =
 
 const ANNOTATION_TOOLS = new Set<Tool>([
   'pen',
+  'highlighter',
   'shape',
   'rect',
   'ellipse',
@@ -167,6 +172,8 @@ export function classify(input: ClassifyInput): RouterAction {
     if (k === 'h') return { kind: 'tool', tool: 'hand' };
     if (k === 'c') return { kind: 'tool', tool: 'comment' };
     if (k === 'b') return { kind: 'tool', tool: 'pen' };
+    // I = hIghlighter (a free bare letter; 'H' is taken by Hand).
+    if (k === 'i') return { kind: 'tool', tool: 'highlighter' };
     // Phase 24 — R (and legacy O) both arm the single Shape tool; the specific
     // primitive is picked from the palette's shape-kind popover.
     if (k === 'r' || k === 'o') return { kind: 'tool', tool: 'shape' };

package/{plugins/design/dev-server → apps/studio}/inspect.ts

@@ -8,6 +8,9 @@ export interface SelectedElement {
   file: string;
   /** CSS-selector path (v1 anchor). Always present for backwards-compat + legacy HTML canvases. */
   selector: string;
+  /** Occurrence index among `querySelectorAll(selector)` — disambiguates a
+   * component repeated within one artboard. Absent → first match. */
+  index?: number;
   tag: string;
   classes: string;
   text: string;
@@ -140,6 +143,7 @@ export function createInspect(
     return {
       file,
       selector: String(sel.selector || ''),
+      index: typeof sel.index === 'number' ? sel.index : undefined,
       tag: String(sel.tag || ''),
       classes: String(sel.classes || ''),
       text: String(sel.text || '').slice(0, 240),
@@ -281,7 +285,7 @@ const INSPECTOR_SCRIPT = `
     var withSelector = commentsCache.filter(function(c) { return c && c.selector; });
     withSelector.forEach(function(c, i) {
       var target = null;
-      try { target = document.querySelector(c.selector); } catch (e) {}
+      try { var _all = document.querySelectorAll(c.selector); var _i = (typeof c.index === 'number' && c.index > 0 && c.index < _all.length) ? c.index : 0; target = _all[_i] || _all[0] || null; } catch (e) {}
       var pin = document.createElement('button');
       pin.className = 'dgn-pin' + (c.status === 'resolved' ? ' resolved' : '') + (c.id === focusedPinId ? ' focused' : '');
       pin.textContent = String(i + 1);
@@ -309,7 +313,7 @@ const INSPECTOR_SCRIPT = `
       var node = pinNodes[i];
       var x, y, hidden = false;
       if (!node.target || !node.target.isConnected) {
-        try { node.target = document.querySelector(node.comment.selector); } catch (e) {}
+        try { var _nc = node.comment; var _na = document.querySelectorAll(_nc.selector); var _ni = (typeof _nc.index === 'number' && _nc.index > 0 && _nc.index < _na.length) ? _nc.index : 0; node.target = _na[_ni] || _na[0] || null; } catch (e) {}
       }
       if (node.target) {
         var r = node.target.getBoundingClientRect();
@@ -352,6 +356,19 @@ const INSPECTOR_SCRIPT = `
     new MutationObserver(function(){ startTick(); }).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['style', 'class'], childList: true });
   }
 
+  // ⌘K / Ctrl+K command palette — keydown fired inside the canvas iframe never
+  // reaches the shell's window-scoped listener (iframe keyboard isolation), so
+  // the palette wouldn't open while focus is in the canvas. Forward the chord to
+  // the parent; the shell toggles the palette (mirrors its own handler, which
+  // fires "even in inputs"). Capture phase so canvas-lib's pan/zoom keydown
+  // handler can't swallow it first.
+  document.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+      e.preventDefault();
+      try { window.parent.postMessage({ dgn: 'toggle-palette' }, '*'); } catch (err) {}
+    }
+  }, true);
+
   window.addEventListener('message', function(e) {
     var m = e.data;
     if (!m || typeof m !== 'object' || !m.dgn) return;
@@ -368,7 +385,7 @@ const INSPECTOR_SCRIPT = `
       var c = commentsCache.find(function(x){ return x && x.id === m.id; });
       if (c && c.selector) {
         try {
-          var t = document.querySelector(c.selector);
+          var _ta = document.querySelectorAll(c.selector); var _ti = (typeof c.index === 'number' && c.index > 0 && c.index < _ta.length) ? c.index : 0; var t = _ta[_ti] || _ta[0] || null;
           if (t) t.scrollIntoView({ behavior: 'smooth', block: 'center' });
         } catch (e) {}
       }

package/{plugins/design/dev-server → apps/studio}/marquee-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       marquee-overlay.tsx — T26 (Wave 3)
- * @scope      plugins/design/dev-server/marquee-overlay.tsx
+ * @scope      apps/studio/marquee-overlay.tsx
  * @purpose    Element-level marquee selection. Drag from empty padding inside
  *             an artboard body (NOT on top of a `[data-cd-id]` element) to
  *             lasso multiple stamped elements. Aseprite modifier vocabulary:
@@ -22,6 +22,7 @@
 
 import { useEffect, useRef } from 'react';
 
+import { scopedCdSelector, selectorIndex } from './dom-selection.ts';
 import { DRAG_THRESHOLD_PX } from './input-router.tsx';
 import { type Selection, useSelectionSet } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
@@ -103,10 +104,12 @@ function elementToSelection(el: Element, bodyAncestor: Element): Selection | nul
   const artboardEl = bodyAncestor.closest('[data-dc-screen]');
   const artboardId = artboardEl?.getAttribute('data-dc-screen') ?? null;
   const rect = (el as HTMLElement).getBoundingClientRect();
+  const marqueeSelector = scopedCdSelector(cdId, artboardId);
   return {
     id: cdId,
-    selector: `[data-cd-id="${cdId}"]`,
+    selector: marqueeSelector,
     artboardId,
+    index: selectorIndex(document, marqueeSelector, el),
     tag: el.tagName.toLowerCase(),
     classes: (el.getAttribute('class') ?? '')
       .trim()

package/{plugins/design/dev-server → apps/studio}/participants-chrome.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       participants-chrome.tsx — top-right avatar stack of live peers
- * @scope      plugins/design/dev-server/participants-chrome.tsx
+ * @scope      apps/studio/participants-chrome.tsx
  * @purpose    Phase 8 Task 6 — show who's currently on the canvas. Colored
  *             initials in a circle per peer, with a popover for full name +
  *             "Follow" button. Follow mode publishes `followTarget` on my

package/{plugins/design/dev-server → apps/studio}/paths.ts

@@ -8,10 +8,14 @@
 //                                  is the virtual `/$bunfs/root` (bun --compile
 //                                  embedded fs) — NOT a real disk path.
 //                                  Walk up from process.execPath until we find
-//                                  the real plugins/design/dev-server/ dir.
-//   3. Compiled binary, marketplace cache: similar to (2) but lives at
-//                                  ~/.claude/plugins/cache/maude/design/<v>/
-//                                  dev-server/. Same walk-up logic finds it.
+//                                  the real apps/studio/ dir.
+//   3. Compiled binary, marketplace cache: the marketplace clone ships only the
+//                                  plugin markdown (plugins/design/) — the
+//                                  dev-server ships via npm (package.json files),
+//                                  so the runtime is resolved from the npm
+//                                  package layout, never the marketplace cache.
+//                                  Same walk-up logic anchors on http.ts. See
+//                                  DDR-095 for the apps/studio relocation.
 //
 // Why this matters: Phase 19 v0.18.0 used `dirname(fileURLToPath(import.meta.url))`
 // universally. In the compiled binary that's `/$bunfs/root` — a virtual path —
@@ -28,7 +32,7 @@ import { fileURLToPath } from 'node:url';
 
 /**
  * Real disk path to the dev-server install dir
- * (`plugins/design/dev-server/` inside whatever package layout we're in).
+ * (`apps/studio/` inside whatever package layout we're in).
  *
  * Always a directory that contains `http.ts` + `dist/` + (optionally)
  * `node_modules/` and `client/`. Never a virtual `/$bunfs/*` path.
@@ -86,16 +90,16 @@ function resolveDevServerRoot(): string {
   }
 
   // (2 + 3) Compiled binary: walk up from process.execPath until we find a dir
-  // that *contains* `plugins/design/dev-server/<canonical files>`. Match both
-  // npm install layout (binary at @1agh/maude-<plat>/maude → walk up 4 levels
-  // to @1agh/maude/) AND marketplace cache layout (binary somewhere under
-  // ~/.claude/plugins/cache/maude/design/<v>/dev-server/dist/).
+  // that *contains* `apps/studio/<canonical files>`. Match the npm install
+  // layout (binary at @1agh/maude-<plat>/maude → walk up to @1agh/maude/, which
+  // ships apps/studio/ via package.json files). The dev-server is NOT shipped via
+  // the marketplace clone, so there is no marketplace-cache anchor (DDR-095).
   let cur = dirname(process.execPath);
   for (let i = 0; i < 10; i++) {
     // Check if cur itself is the dev-server root.
     if (isDevServerDir(cur)) return cur;
-    // Check if cur contains plugins/design/dev-server/.
-    const nested = join(cur, 'plugins', 'design', 'dev-server');
+    // Check if cur contains apps/studio/.
+    const nested = join(cur, 'apps', 'studio');
     if (isDevServerDir(nested)) return nested;
     const parent = dirname(cur);
     if (parent === cur) break;

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

@@ -101,11 +101,20 @@ const { port: BASE_PORT, explicit: PORT_EXPLICIT } = resolvePort();
 
 type BunServer = ReturnType<typeof Bun.serve<WsData, never>>;
 
+// Phase 23 security review (DDR-088 follow-up) — hard ceiling on a buffered
+// request body. Without it Bun's 128 MB default applies, so `POST /_api/asset`
+// would buffer up to 128 MB into RAM BEFORE api.saveAsset's 10 MB check runs
+// (memory amplification from the untrusted canvas origin). 16 MB covers every
+// legit body (10 MB asset + 1 MB annotation SVG + small JSON) with headroom and
+// bounds the pre-handler buffer; the authoritative per-route caps still apply.
+const MAX_REQUEST_BODY = 16 * 1024 * 1024;
+
 function startServer(port: number): BunServer {
   return Bun.serve<WsData, never>({
     port,
     hostname: '127.0.0.1',
     development: process.env.NODE_ENV !== 'production',
+    maxRequestBodySize: MAX_REQUEST_BODY,
     routes: http.routes,
     async fetch(req, srv) {
       const pathname = new URL(req.url).pathname;
@@ -167,6 +176,9 @@ function startCanvasServer(port: number): BunServer {
     port,
     hostname: '127.0.0.1',
     development: process.env.NODE_ENV !== 'production',
+    // DDR-088 follow-up — bound the pre-handler request buffer on the UNTRUSTED
+    // canvas origin (the asset upload lives here). See MAX_REQUEST_BODY.
+    maxRequestBodySize: MAX_REQUEST_BODY,
     // Hard allowlist of route-table endpoints (Bun matches `routes` before
     // `fetch`). Only the collab/display-data endpoints the canvas runtime needs
     // — see http.isCanvasSafeRoute for the trust rationale. The dynamic
@@ -176,6 +188,12 @@ function startCanvasServer(port: number): BunServer {
       '/_api/git-user': http.routes['/_api/git-user'],
       '/_api/canvas-meta': http.routes['/_api/canvas-meta'],
       '/_api/annotations': http.routes['/_api/annotations'],
+      // Phase 23 — capped binary image upload (magic-byte sniff + 10 MB +
+      // content-addressed name + traversal guard + no-SVG, in api.saveAsset).
+      // Bun matches `routes` BEFORE `fetch`, so the route must be listed here
+      // explicitly — the CANVAS_SAFE_API entry alone only opens the fetch
+      // fall-through (which serves files, not route handlers). See DDR (Task 9).
+      '/_api/asset': http.routes['/_api/asset'],
       '/_api/git-committers': http.routes['/_api/git-committers'],
       '/_api/ai': http.routes['/_api/ai'],
       '/_comments': http.routes['/_comments'],

package/{plugins/design/dev-server → apps/studio}/sync/index.ts

@@ -824,7 +824,7 @@ async function defaultProviderFactory(args: {
     mod = await import('@hocuspocus/provider');
   } catch (err) {
     throw new Error(
-      `@hocuspocus/provider unavailable — install it under plugins/design/dev-server/. (${err instanceof Error ? err.message : String(err)})`
+      `@hocuspocus/provider unavailable — install it under apps/studio/. (${err instanceof Error ? err.message : String(err)})`
     );
   }
   // Hocuspocus accepts ws:// or wss://; the linked URL is http(s)://, so swap

package/{plugins/design/dev-server → apps/studio}/test/annotations-layer.test.ts

@@ -13,6 +13,8 @@ import {
   type ArrowStroke,
   arrowHeadPoints,
   type EllipseStroke,
+  type ImageStroke,
+  type LinkStroke,
   type PenStroke,
   type PolygonStroke,
   penPathD,
@@ -696,6 +698,67 @@ describe('annotations-layer / Phase 21 sticky + standalone-text geometry', () =>
   });
 });
 
+describe('annotations-layer / Phase 23 image + link geometry', () => {
+  const image: ImageStroke = {
+    id: 'im',
+    tool: 'image',
+    x: 30,
+    y: 40,
+    w: 200,
+    h: 150,
+    href: 'assets/deadbeef.png',
+  };
+  const link: LinkStroke = {
+    id: 'lk',
+    tool: 'link',
+    x: 30,
+    y: 40,
+    w: 260,
+    h: 76,
+    url: 'https://example.com',
+    title: 'Example',
+    domain: 'example.com',
+  };
+
+  test('image bbox is its rect extent (normalizes negative extent)', () => {
+    expect(strokeBBox(image)).toEqual({ x: 30, y: 40, w: 200, h: 150 });
+    expect(strokeBBox({ ...image, x: 230, y: 190, w: -200, h: -150 })).toEqual({
+      x: 30,
+      y: 40,
+      w: 200,
+      h: 150,
+    });
+  });
+
+  test('link bbox is its card extent', () => {
+    expect(strokeBBox(link)).toEqual({ x: 30, y: 40, w: 260, h: 76 });
+  });
+
+  test('image + link are filled-card hits anywhere inside', () => {
+    expect(strokeHitTest(image, 100, 100, 4)).toBe(true); // interior
+    expect(strokeHitTest(image, 30, 40, 4)).toBe(true); // corner
+    expect(strokeHitTest(image, 999, 999, 4)).toBe(false); // far outside
+    expect(strokeHitTest(link, 100, 60, 4)).toBe(true);
+    expect(strokeHitTest(link, 999, 999, 4)).toBe(false);
+  });
+
+  test('image serializes a same-origin <image> with preserveAspectRatio', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).toContain('<image');
+    expect(svg).toContain('data-tool="image"');
+    expect(svg).toContain('preserveAspectRatio="xMidYMid meet"');
+    expect(svg).toContain('href="assets/deadbeef.png"');
+  });
+
+  test('link serializes a card <g> carrying its data-* payload', () => {
+    const svg = strokesToSvg([link]);
+    expect(svg).toContain('data-tool="link"');
+    expect(svg).toContain('data-url="https://example.com"');
+    expect(svg).toContain('data-domain="example.com"');
+    expect(svg).toContain('<rect');
+  });
+});
+
 describe('annotations-layer / Phase 24 polygon geometry', () => {
   test('polygonVertices span the full bbox for every shape', () => {
     for (const shape of ['diamond', 'triangle', 'triangle-down'] as const) {

package/{plugins/design/dev-server → apps/studio}/test/annotations-roundtrip.test.ts

@@ -14,6 +14,8 @@ import { GlobalRegistrator } from '@happy-dom/global-registrator';
 
 import {
   type ArrowStroke,
+  type ImageStroke,
+  type LinkStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
@@ -217,6 +219,101 @@ describe('annotations round-trip / arrow heads + dash (4 dirs × 2 dash)', () =>
   }
 });
 
+describe('annotations round-trip / image (Phase 23)', () => {
+  const image: ImageStroke = {
+    id: 'im1',
+    tool: 'image',
+    x: 120,
+    y: 80,
+    w: 320,
+    h: 240,
+    href: 'assets/a1b2c3d4.png',
+  };
+
+  test('image survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([image])) as ImageStroke[];
+    expect(parsed).toEqual(image);
+  });
+
+  test('image alt text round-trips via data-alt', () => {
+    const withAlt: ImageStroke = { ...image, alt: 'competitor pricing page' };
+    const svg = strokesToSvg([withAlt]);
+    expect(svg).toContain('data-alt="competitor pricing page"');
+    const [parsed] = svgToStrokes(svg) as ImageStroke[];
+    expect(parsed?.alt).toBe('competitor pricing page');
+  });
+
+  test('image with no alt omits data-alt (no phantom default)', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).not.toContain('data-alt');
+    const [parsed] = svgToStrokes(svg) as ImageStroke[];
+    expect(parsed?.alt).toBeUndefined();
+  });
+
+  test('image persists a relative assets href (never a data: URL)', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).toContain('href="assets/a1b2c3d4.png"');
+    expect(svg).not.toContain('data:');
+  });
+
+  test('image serialize → parse is idempotent', () => {
+    const once = strokesToSvg([{ ...image, alt: 'x' }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('image SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    // The assets href must SURVIVE the sanitizer (Task 4 relaxation), so the
+    // persisted form comes back unchanged on every PUT.
+    const svg = strokesToSvg([image]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+});
+
+describe('annotations round-trip / link chip (Phase 23)', () => {
+  const link: LinkStroke = {
+    id: 'lk1',
+    tool: 'link',
+    x: 60,
+    y: 40,
+    w: 260,
+    h: 76,
+    url: 'https://example.com/blog/post?ref=maude',
+    title: 'A reference post worth reacting to',
+    domain: 'example.com',
+  };
+
+  test('link survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([link])) as LinkStroke[];
+    expect(parsed).toEqual(link);
+  });
+
+  test('link never persists an <a href> (click-to-open is client-only)', () => {
+    const svg = strokesToSvg([link]);
+    expect(svg).not.toContain('<a ');
+    expect(svg).toContain('data-url="https://example.com/blog/post?ref=maude"');
+  });
+
+  test('link serialize → parse is idempotent (even with a long title)', () => {
+    const once = strokesToSvg([{ ...link, title: 'x'.repeat(200) }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('link SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    // rect/svg/path/text/data-* are all allowlisted; no on*/style/href → unchanged.
+    const svg = strokesToSvg([link]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+
+  test('link missing data-title falls back to the domain', () => {
+    const svg =
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+      '<g data-id="lk2" data-tool="link" data-url="https://x.io" data-domain="x.io">' +
+      '<rect x="0" y="0" width="260" height="76" rx="8" ry="8"/></g></svg>';
+    const [parsed] = svgToStrokes(svg) as LinkStroke[];
+    expect(parsed?.title).toBe('x.io');
+  });
+});
+
 describe('annotations round-trip / standalone vs anchored text', () => {
   test('standalone text round-trips its world (x, y) and stays unanchored', () => {
     const t: TextStroke = {