@1agh/maude 0.28.1 → 0.30.0

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

@@ -19,7 +19,8 @@ import type { ActiveJsonShape } from './exporters/scope.ts';
 import type { Inspect } from './inspect.ts';
 import { canvasSlug, writeLocator } from './locator.ts';
 import { DEV_SERVER_ROOT } from './paths.ts';
-import { getRuntimeBundle, packageForSlug, RUNTIME_PACKAGES, slugFor } from './runtime-bundle.ts';
+import { getRuntimeBundle, packageForSlug } from './runtime-bundle.ts';
+import { loadWhatsNew } from './whats-new.ts';
 
 // Real disk install root — never the virtual `/$bunfs/root` of compiled bins.
 // See paths.ts for the resolution logic + Phase 19.1 / v0.18.1 rationale.
@@ -80,10 +81,11 @@ function ext(p: string): string {
  *
  * `frame-ancestors` (A6) — restricts who may embed the canvas document. The
  * legit embedder is the main dev-server origin, so we allowlist exactly that
- * (`mainOrigin`) plus `'self'`; an arbitrary external page can no longer reframe
- * the canvas. When `mainOrigin` is unknown (tests / pre-boot) the directive is
- * OMITTED rather than set to `'self'` — `'self'` alone would forbid the legit
- * cross-origin embed and blank the canvas.
+ * (`mainOrigin` — a space-separated source list; server.ts advertises both
+ * loopback spellings, `localhost` + `127.0.0.1`) plus `'self'`; an arbitrary
+ * external page can no longer reframe the canvas. When `mainOrigin` is unknown
+ * (tests / pre-boot) the directive is OMITTED rather than set to `'self'` —
+ * `'self'` alone would forbid the legit cross-origin embed and blank the canvas.
  */
 export function cspForCanvasShell(html: string, mainOrigin?: string): string {
   const hashes: string[] = [];
@@ -114,6 +116,34 @@ export function cspForCanvasShell(html: string, mainOrigin?: string): string {
   return directives.join('; ');
 }
 
+/**
+ * CSRF guard for the main-origin source-write routes (edit-css / edit-text /
+ * edit-attr). Those routes are reachable only from the shell, which is
+ * same-origin — but `readJson` enforces no `Content-Type`, so a cross-site page
+ * could otherwise forge a `text/plain` CORS *simple-request* POST to
+ * `http://localhost:<port>/_api/edit-*` (no preflight) and drive a write into
+ * the user's source `.tsx`. The browser stamps every cross-origin POST with an
+ * unspoofable `Origin` header, so we reject any request whose Origin is PRESENT
+ * and ≠ the server's own origin. A request with NO Origin (bun:test, curl,
+ * non-browser programmatic clients — none of which are the CSRF threat, which
+ * requires a browser executing attacker markup that always sends Origin on a
+ * cross-origin POST) is allowed through. This is layered on top of the DDR-054
+ * origin-split (which blocks the untrusted canvas *iframe*); it closes the
+ * *other* untrusted origin — a malicious top-level page in another tab.
+ * Deliberately NOT applied to `/_api/asset` (that route is canvas-origin
+ * reachable by design — drag-drop/paste upload runs inside the iframe). See
+ * DDR-105. Exported for unit testing (the decision is a pure function of `req`).
+ */
+export function sameOriginWrite(req: Request): boolean {
+  const origin = req.headers.get('origin');
+  if (!origin) return true; // non-browser / same-origin omitting Origin → allow
+  try {
+    return origin === new URL(req.url).origin;
+  } catch {
+    return false;
+  }
+}
+
 function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
   let pathname: string;
   try {
@@ -131,7 +161,10 @@ function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
 // and inside the standalone binary's embedded FS in --compile mode.
 const DIST_DIR = join(HERE, 'dist');
 const CLIENT_DIR = join(HERE, 'client');
-const TEMPLATES_DIR = join(HERE, '..', 'templates');
+// Templates stayed under the design *plugin* (plugins/design/templates) when the
+// dev-server moved to apps/studio (DDR-095) — both ship in the npm tarball, so
+// from DEV_SERVER_ROOT (apps/studio) reach across with ../../plugins/design.
+const TEMPLATES_DIR = join(HERE, '..', '..', 'plugins', 'design', 'templates');
 
 // In-memory transpile cache. Key = absolute canvas path. Repeat GETs against an
 // unchanged source skip the parse + ID-injection + Bun.Transpiler + Bun.build
@@ -424,6 +457,12 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
     '/_config': () => Response.json({ ...ctx.cfg, canvasOrigin: ctx.canvasOrigin }),
 
+    // What's New feed (DDR-A) — read-only product-update list surfaced in the
+    // Maude UI chrome. Main-origin only by omission from the canvas-origin
+    // allowlist below (the untrusted canvas iframe never needs it).
+    '/_api/whats-new': () =>
+      Response.json(loadWhatsNew(), { headers: { 'Cache-Control': 'no-store' } }),
+
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
 
@@ -582,6 +621,181 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/canvas': async (req: Request) => {
+      // Phase 22 — create + soft-delete a canvas from the browser file tree.
+      // POST   body { name, kind?: "brief-board", group? } → 201 { file, rel, slug }
+      // DELETE ?file=<rel>                                 → 200 { rel, slug, trashed[] }
+      // MAIN ORIGIN ONLY: this route is intentionally absent from
+      // startCanvasServer's allowlist (DDR-054) — the untrusted canvas iframe
+      // origin must never reach a file-write/-delete endpoint. Validation lives in
+      // api.createCanvas / api.deleteCanvas (containment + group allowlist).
+      if (req.method === 'DELETE') {
+        const file = new URL(req.url).searchParams.get('file');
+        const result = await api.deleteCanvas({ file });
+        if (!result.ok) {
+          return Response.json(
+            { ok: false, error: result.error },
+            { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+          );
+        }
+        return Response.json(
+          {
+            ok: true,
+            rel: result.rel,
+            slug: result.slug,
+            trashed: result.trashed,
+            trashDir: result.trashDir,
+          },
+          { status: 200, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      const body = await readJson<{ name?: unknown; kind?: unknown; group?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.createCanvas(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, file: result.file, rel: result.rel, slug: result.slug },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-css': async (req: Request) => {
+      // Phase 12 (DDR-103) — single-property inline CSS edit. POST body
+      // { canvas, id, property, value } → writes one key into the element's
+      // inline `style={{}}` object via api.editCss → editAttribute. MAIN ORIGIN
+      // ONLY: intentionally absent from CANVAS_SAFE_API + startCanvasServer's
+      // route allowlist (DDR-054) — the untrusted canvas iframe origin must never
+      // reach a source-write endpoint. The CSS-knob UI lives in the shell (main
+      // origin) and calls it directly.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        property?: unknown;
+        value?: unknown;
+        reset?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editCss(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-text': async (req: Request) => {
+      // Phase 12 (DDR-103) — inline element text-content edit. POST body
+      // { canvas, id, text } → overwrites the element's single JSXText child
+      // (JSX-escaped) via api.editText → editText. Same MAIN-ORIGIN-ONLY trust
+      // boundary as /_api/edit-css + /_api/canvas. The inline contenteditable
+      // editor reaches it via the dgn:* bus → shell relay (never the iframe).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; text?: unknown }>(
+        req,
+        16 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editText(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-attr': async (req: Request) => {
+      // Phase 12.2 (DDR-104) — the CSS panel's "custom HTML attribute" escape
+      // hatch. POST body { canvas, id, attr, value } → writes a plain JSX
+      // attribute (data-*, aria-*, role, …) via api.editAttr → editAttribute's
+      // non-`style.` path. Same MAIN-ORIGIN-ONLY trust boundary as
+      // /_api/edit-css + /_api/edit-text (absent from CANVAS_SAFE_API +
+      // startCanvasServer's route map; the untrusted iframe can never reach it).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        attr?: unknown;
+        value?: unknown;
+        reset?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editAttr(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/asset': async (req: Request) => {
+      // Phase 23 — binary image upload from the canvas (drag-drop / paste / the
+      // a11y file picker). POST raw image bytes → content-addressed write under
+      // <designRoot>/assets/<sha8>.<ext>, returns 201 { path }. This route is on
+      // the canvas-origin allowlist (CANVAS_SAFE_API below) — a bigger grant than
+      // the inert annotation-SVG write (binary, disk) — so the caps in
+      // api.saveAsset (magic-byte sniff, 10 MB ceiling, content-addressed name,
+      // traversal guard, no-SVG, dedupe) are the load-bearing trust mitigation,
+      // NOT optional. See DDR (Task 9).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      // Early reject on a declared oversize body (the post-read length check in
+      // saveAsset is the authoritative gate — Content-Length can be omitted/lied).
+      const declared = Number(req.headers.get('content-length') || '0');
+      if (Number.isFinite(declared) && declared > 10 * 1024 * 1024) {
+        return Response.json(
+          { ok: false, error: 'asset exceeds the 10 MB cap' },
+          { status: 413, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      let bytes: Uint8Array;
+      try {
+        bytes = new Uint8Array(await req.arrayBuffer());
+      } catch {
+        return new Response('could not read request body', { status: 400 });
+      }
+      const result = await api.saveAsset(bytes);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status ?? 400, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { path: result.path },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/export-history': async (req: Request) => {
       // Phase 6.5 T10 — read-only recent-exports feed for the dialog's
       // Recent tab. Writes happen as a side-effect of `/_api/export`.
@@ -791,6 +1005,11 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         headers: {
           'Content-Type': MIME[e] || 'application/octet-stream',
           'Cache-Control': 'no-store',
+          // DDR-088 follow-up — never let a browser MIME-sniff a served file
+          // (e.g. an uploaded GIF/WEBP polyglot) into a richer type. Assets are
+          // only referenced via <image href> + the canvas CSP blocks script, so
+          // this is defense-in-depth on the static lane.
+          'X-Content-Type-Options': 'nosniff',
         },
       });
     } catch (err) {
@@ -837,6 +1056,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     '/_api/git-user', // presence display name
     '/_api/canvas-meta', // layout/viewport sidecar (GET + PATCH)
     '/_api/annotations', // annotation SVG (GET + PUT) — drives the collab bridge
+    '/_api/asset', // Phase 23 — capped binary image upload (sniff+10MB+sha8 name+no-SVG)
     '/_api/git-committers', // @mention autocomplete
     '/_api/ai', // AI-activity banner
     '/_comments', // per-file comment list (renders pins)

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
@@ -78,16 +82,20 @@ export type Tool =
   | 'arrow'
   | 'sticky'
   | 'text'
+  // FigJam v3 — labelled organizing container (Shift+S).
+  | 'section'
   | 'eraser';
 
 const ANNOTATION_TOOLS = new Set<Tool>([
   'pen',
+  'highlighter',
   'shape',
   'rect',
   'ellipse',
   'arrow',
   'sticky',
   'text',
+  'section',
   'eraser',
 ]);
 
@@ -167,6 +175,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' };
@@ -176,6 +186,10 @@ export function classify(input: ClassifyInput): RouterAction {
     // yields when focus is inside the canvas iframe (app.jsx onKey bail).
     if (k === 'n') return { kind: 'tool', tool: 'sticky' };
     if (k === 't') return { kind: 'tool', tool: 'text' };
+    // FigJam v3 — Shift+S arms the Section tool (FigJam's own binding; bare S
+    // stays with the shell's Design-system view). Checked here because the
+    // modifier guard above only filters Cmd/Ctrl/Alt.
+    if (k === 's' && input.shiftKey) return { kind: 'tool', tool: 'section' };
     if (k === 'e') return { kind: 'tool', tool: 'eraser' };
     if (input.key === 'Escape') return { kind: 'escape' };
     return { kind: 'no-op' };

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

@@ -1,13 +1,15 @@
 // Active-canvas state, selected-element tracking, and HTML injection
 // (inspector overlay + canvas runtime). See plan Task 7 + DDR-007.
 
-import path from 'node:path';
 import type { Context } from './context.ts';
 
 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 +142,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 +284,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 +312,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 +355,34 @@ const INSPECTOR_SCRIPT = `
     new MutationObserver(function(){ startTick(); }).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['style', 'class'], childList: true });
   }
 
+  // Shell chords — keydown fired inside the canvas iframe never reaches the
+  // shell's window-scoped listener (iframe keyboard isolation), so each shell
+  // chord must be forwarded to the parent. preventDefault is load-bearing for
+  // ⌘R: without it the BROWSER reloads the whole shell while focus is in the
+  // canvas (the advertised behavior is "reload the active canvas"). Capture
+  // phase so canvas-lib's pan/zoom keydown handler can't swallow them first.
+  document.addEventListener('keydown', function(e) {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    var k = (e.key || '').toLowerCase();
+    if (k === 'k' && !e.shiftKey) {
+      e.preventDefault();
+      try { window.parent.postMessage({ dgn: 'toggle-palette' }, '*'); } catch (err) {}
+      return;
+    }
+    if (k === 'r' && !e.shiftKey) {
+      e.preventDefault();
+      try { window.parent.postMessage({ dgn: 'shell-shortcut', id: 'reload' }, '*'); } catch (err) {}
+      return;
+    }
+    if (e.shiftKey) {
+      var id = k === 'i' ? 'inspector' : k === 'm' ? 'comments' : k === 'e' ? 'export' : k === 'h' ? 'handoff' : null;
+      if (id) {
+        e.preventDefault();
+        try { window.parent.postMessage({ dgn: 'shell-shortcut', id: id }, '*'); } catch (err) {}
+      }
+    }
+  }, true);
+
   window.addEventListener('message', function(e) {
     var m = e.data;
     if (!m || typeof m !== 'object' || !m.dgn) return;
@@ -368,10 +399,25 @@ 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) {}
       }
+    } else if (m.dgn === 'theme') {
+      // Catch the chrome-theme seed the shell posts in reply to our 'loaded'
+      // ping (sent below). THIS listener registers during page-load — before
+      // the React canvas-shell mounts and adds its OWN 'dgn:theme' listener —
+      // so without this branch the shell's reply lands in the gap between
+      // page-load and React-mount and is dropped, leaving the canvas stuck on
+      // its hardcoded dark default until a manual theme toggle re-broadcasts
+      // it (the recurring "open a canvas under a light shell → canvas chrome is
+      // dark; toggle twice to fix; next canvas reverts" bug). We set the same
+      // attribute the canvas-shell chrome reads (data-maude-theme on <html>);
+      // canvas-shell's default-dark guard then sees the value already present
+      // and won't override it, and its own listener takes over live toggles.
+      if (m.theme === 'light' || m.theme === 'dark') {
+        try { document.documentElement.setAttribute('data-maude-theme', m.theme); } catch (e) {}
+      }
     }
     /* force-clear is now consumed by canvas-shell.tsx — the inspector
        overlay has no per-element selection state to clear anymore. */

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
@@ -14,7 +14,7 @@
  * own avatar to release. tldraw-style.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useViewportControllerContext } from './canvas-lib.tsx';
 import { type AgentPresence, useAgentPresence } from './use-agent-presence.tsx';
@@ -192,7 +192,6 @@ function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element
           setOpen((v) => !v);
         }
       }}
-      // biome-ignore lint/a11y/useSemanticElements: 28px round chip needs raw <div> + inline bg + custom focus ring; <button> reset is more code than the rule saves.
       role="button"
       tabIndex={0}
       title={peer.name}
@@ -201,8 +200,6 @@ function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element
     >
       {initialsFor(peer.name)}
       {open && (
-        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; keyboard focus stays in the button child.
-        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role; the inner <button> is the actionable element.
         <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
           <div className="dc-participant-popover__name">{peer.name}</div>
           <button
@@ -250,7 +247,6 @@ function AgentAvatar({ agent }: { agent: AgentPresence }): JSX.Element {
           setOpen((v) => !v);
         }
       }}
-      // biome-ignore lint/a11y/useSemanticElements: matches the peer Avatar chip pattern.
       role="button"
       tabIndex={0}
       title={`${agent.name} (AI agent)`}
@@ -262,8 +258,6 @@ function AgentAvatar({ agent }: { agent: AgentPresence }): JSX.Element {
         ✦
       </span>
       {open && (
-        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; no actionable child.
-        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role.
         <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
           <div className="dc-participant-popover__name">{agent.name}</div>
           <div className="dc-participant-popover__sub">AI agent · {agent.author}</div>

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'],
@@ -276,8 +294,11 @@ let server: BunServer;
 
 // T2 (9.1-A) — advertise the main origin so the canvas origin's CSP can
 // allowlist it in `frame-ancestors` (the legit embedder). Must be set before
-// the canvas listener serves its first shell.
-ctx.mainOrigin = `http://localhost:${server.port}`;
+// the canvas listener serves its first shell. Both loopback host spellings are
+// listed: the server binds 127.0.0.1, so a user who opens the printed URL as
+// `127.0.0.1:<port>` is the same legit embedder — with only `localhost` allowed
+// the canvas iframe was silently refused (blank sad-page, no error anywhere).
+ctx.mainOrigin = `http://localhost:${server.port} http://127.0.0.1:${server.port}`;
 
 // T2 (9.1-A) — segregated canvas-content origin. ON BY DEFAULT (opt-OUT) since
 // phase-9.1: a second listener binds an OS-assigned free port, advertised as