@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/annotations-snap.ts

@@ -0,0 +1,125 @@
+/**
+ * @file       annotations-snap.ts — FigJam v3 drag snapping + smart guides
+ * @scope      apps/studio/annotations-snap.ts
+ * @purpose    Pure math (no React, no DOM) for edge/center snapping while
+ *             dragging annotation strokes. Candidates are the bboxes of the
+ *             non-moved strokes plus the artboard rects; per axis the nearest
+ *             candidate line within the threshold wins and contributes one
+ *             guide line for the overlay to paint. Hold ⌘ to suppress
+ *             (handled by the caller — Figma/FigJam convention).
+ */
+
+export interface SnapBox {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface SnapGuide {
+  /** `x` = a vertical guide at x=`at`; `y` = a horizontal guide at y=`at`. */
+  axis: 'x' | 'y';
+  at: number;
+  from: number;
+  to: number;
+}
+
+export interface SnapResult {
+  dx: number;
+  dy: number;
+  guides: SnapGuide[];
+}
+
+/** Snap threshold in world px at zoom 1 (callers scale by 1/zoom). */
+export const SNAP_THRESHOLD_PX = 6;
+
+/** Dot-grid pitch in world px — mirrors the DS `--canvas-grid` token (24px). */
+export const GRID_PITCH_PX = 24;
+
+const NO_SNAP: SnapResult = { dx: 0, dy: 0, guides: [] };
+
+function lines(b: SnapBox, axis: 'x' | 'y'): [number, number, number] {
+  return axis === 'x' ? [b.x, b.x + b.w / 2, b.x + b.w] : [b.y, b.y + b.h / 2, b.y + b.h];
+}
+
+/**
+ * Nearest grid-line correction for one axis position. The dot grid is a
+ * world-space lattice at `pitch`; the stroke's leading edge snaps to it.
+ */
+function gridDelta(pos: number, pitch: number, threshold: number): number | null {
+  const nearest = Math.round(pos / pitch) * pitch;
+  const d = nearest - pos;
+  return Math.abs(d) <= threshold ? d : null;
+}
+
+/**
+ * Best snap correction for the moving bbox against the candidates. The two
+ * axes resolve independently (FigJam: a drag can snap horizontally to one
+ * neighbour and vertically to another). Edges AND centers participate.
+ *
+ * Grid snapping (`opts.grid`): when an axis finds NO stroke/artboard snap, its
+ * leading edge falls back to the canvas dot grid — weaker than smart guides
+ * (geometry alignment wins over the lattice) and silent (no guide line, the
+ * dots themselves are the visual). ⌘ suppresses both via the caller.
+ */
+export function computeSnap(
+  moving: SnapBox,
+  candidates: readonly SnapBox[],
+  threshold: number,
+  opts?: { grid?: number }
+): SnapResult {
+  const grid = opts?.grid ?? 0;
+  if (threshold <= 0 || (candidates.length === 0 && grid <= 0)) return NO_SNAP;
+  let bestX: { d: number; at: number; cand: SnapBox } | null = null;
+  let bestY: { d: number; at: number; cand: SnapBox } | null = null;
+  const mx = lines(moving, 'x');
+  const my = lines(moving, 'y');
+  for (const c of candidates) {
+    const cx = lines(c, 'x');
+    const cy = lines(c, 'y');
+    for (const m of mx) {
+      for (const v of cx) {
+        const d = v - m;
+        if (Math.abs(d) <= threshold && (!bestX || Math.abs(d) < Math.abs(bestX.d))) {
+          bestX = { d, at: v, cand: c };
+        }
+      }
+    }
+    for (const m of my) {
+      for (const v of cy) {
+        const d = v - m;
+        if (Math.abs(d) <= threshold && (!bestY || Math.abs(d) < Math.abs(bestY.d))) {
+          bestY = { d, at: v, cand: c };
+        }
+      }
+    }
+  }
+  // Grid fallback per axis — only where no smart-guide candidate won.
+  let gridDx: number | null = null;
+  let gridDy: number | null = null;
+  if (grid > 0) {
+    if (!bestX) gridDx = gridDelta(moving.x, grid, threshold);
+    if (!bestY) gridDy = gridDelta(moving.y, grid, threshold);
+  }
+  if (!bestX && !bestY && gridDx == null && gridDy == null) return NO_SNAP;
+  const dx = bestX?.d ?? gridDx ?? 0;
+  const dy = bestY?.d ?? gridDy ?? 0;
+  const guides: SnapGuide[] = [];
+  if (bestX) {
+    guides.push({
+      axis: 'x',
+      at: bestX.at,
+      from: Math.min(moving.y + dy, bestX.cand.y),
+      to: Math.max(moving.y + moving.h + dy, bestX.cand.y + bestX.cand.h),
+    });
+  }
+  if (bestY) {
+    guides.push({
+      axis: 'y',
+      at: bestY.at,
+      from: Math.min(moving.x + dx, bestY.cand.x),
+      to: Math.max(moving.x + moving.w + dx, bestY.cand.x + bestY.cand.w),
+    });
+  }
+  return { dx, dy, guides };
+}

package/apps/studio/api.ts

@@ -7,6 +7,12 @@ import { mkdir, readdir, readFile, rename, stat as statp } from 'node:fs/promise
 import path from 'node:path';
 
 import { renderBriefBoard, validateCanvasName } from './canvas-create.ts';
+import {
+  CanvasEditError,
+  editAttribute,
+  removeAttribute,
+  editText as runEditText,
+} from './canvas-edit.ts';
 import type { Context } from './context.ts';
 
 const SKIP_DIRS = new Set([
@@ -141,6 +147,11 @@ export type DeleteCanvasResult =
   | { ok: true; rel: string; slug: string; trashed: string[]; trashDir: string }
   | { ok: false; status: number; error: string };
 
+/** Phase 12 — result of an in-canvas direct edit (`editCss` / `editText`). */
+export type EditOpResult =
+  | { ok: true; delta: number }
+  | { ok: false; status: number; error: string };
+
 export interface Api {
   // File tree
   fileSlug(file: string): string;
@@ -190,6 +201,25 @@ export interface Api {
   }): Promise<CreateCanvasResult>;
   // Soft-delete a canvas from the browser (Phase 22 — DELETE /_api/canvas)
   deleteCanvas(input: { file?: unknown }): Promise<DeleteCanvasResult>;
+  // Phase 12 (DDR-103) — single-property inline CSS edit (POST /_api/edit-css).
+  // Main-origin only: writes one key into the element's inline `style={{}}` object.
+  editCss(input: {
+    canvas?: unknown;
+    id?: unknown;
+    property?: unknown;
+    value?: unknown;
+  }): Promise<EditOpResult>;
+  // Phase 12 (DDR-103) — inline text-content edit (POST /_api/edit-text). Main-origin only.
+  editText(input: { canvas?: unknown; id?: unknown; text?: unknown }): Promise<EditOpResult>;
+  // Phase 12.2 (DDR-104) — custom HTML attribute edit (POST /_api/edit-attr). Main-origin
+  // only. The CSS panel's "custom HTML attribute" escape hatch (data-*, aria-*, role, …);
+  // writes a plain JSX attribute via editAttribute's non-`style.` path.
+  editAttr(input: {
+    canvas?: unknown;
+    id?: unknown;
+    attr?: unknown;
+    value?: unknown;
+  }): Promise<EditOpResult>;
   // Aggregate data
   buildIndexData(): Promise<unknown>;
   buildSystemData(dsName?: string | null): Promise<unknown>;
@@ -204,45 +234,14 @@ export interface ApiHooks {
   onAnnotationsChanged?: (file: string, svg: string) => void;
 }
 
-/**
- * Elements the annotation tool legitimately emits (`strokesToSvg` in
- * annotations-layer.tsx). This is the WHOLE vocabulary — purely presentational.
- */
-const ANNOTATION_SVG_ELEMENTS = new Set([
-  'svg',
-  'g',
-  'path',
-  'rect',
-  'ellipse',
-  'line',
-  'polyline',
-  // Phase 24 — `polygon` (diamond / triangle shape primitives + closed arrowhead
-  // outlines + diamond heads) and `circle` (circle arrowhead). Inert shape
-  // elements with no script capability — same safety class as the rest.
-  'polygon',
-  'circle',
-  'text',
-  // Annotation polish (item 4a) — `tspan` carries one line of multi-line text
-  // inside a `<text>` (SVG `<text>` ignores `\n`). Inert presentational element
-  // with no script capability — same safety class as `text`. Only `x`/`dy`
-  // (geometry) survive; the attribute denylist strips any on*/style/href.
-  'tspan',
-  // Phase 23 — `image` (dropped/pasted raster). The ONLY element allowed to keep
-  // an href, and ONLY a relative assets/<sha8>.<ext> path (ASSET_IMAGE_HREF_RE) —
-  // every external / data: / javascript: / `..` href is still stripped. <image>
-  // is a passive include with no script capability. See DDR (Task 9).
-  'image',
-]);
+// FigJam v3 — the annotation sanitizer moved to annotations-model.ts (the
+// schema owner; the allowlist guards exactly that vocabulary, and the
+// headless `maude design annotate` write verb needs it without pulling the
+// server modules). Re-exported here so every existing `from './api.ts'`
+// import keeps working unchanged.
+export { ASSET_IMAGE_HREF_RE, sanitizeAnnotationSvg } from './annotations-model.ts';
 
-/**
- * Phase 23 — the ONLY href shape allowed to survive on an `<image>`: a relative,
- * single-segment `assets/<name>.<ext>` path. Anchored (`^…$`), no scheme, no `/`
- * beyond the one `assets/` segment (blocks `assets/../../etc/passwd`), no query,
- * ext ∈ the four raster types the upload route accepts. Everything else —
- * external, `data:`, `javascript:`, `..`, or any href on a non-image element —
- * is stripped by Rule 3. Pairs with the asset-write caps (DDR Task 9).
- */
-export const ASSET_IMAGE_HREF_RE = /^assets\/[A-Za-z0-9._-]+\.(?:png|jpe?g|webp|gif)$/;
+import { sanitizeAnnotationSvg } from './annotations-model.ts';
 
 /** Phase 23 — hard ceiling on a single uploaded asset (10 MB). */
 export const ASSET_MAX_BYTES = 10 * 1024 * 1024;
@@ -323,84 +322,6 @@ export interface SaveAssetResult {
   path?: string;
 }
 
-/**
- * A3 (DDR-060 F1 re-audit) — sanitize an annotation SVG before it is persisted /
- * synced / mirrored into the collab Y.Map. ALLOWLIST, not denylist (the F1
- * confirming pass showed a denylist loses the race: `<svg:script>` via namespace,
- * `javascript&#58;` via HTML entity, `<style>@import url()>`, CSS `url(javascript:)`
- * all slipped a tag-name denylist). Two rules, both keyed to the fixed legit
- * vocabulary so they're zero-regression on real annotations:
- *
- *   1. Element allowlist — drop the markup of any tag whose LOCAL name (namespace
- *      stripped, so `svg:script` → `script`) isn't in ANNOTATION_SVG_ELEMENTS.
- *      Dropped-tag text content survives as inert text (not in a script/style
- *      context), which is harmless.
- *   2. Attribute denylist on survivors — the legit vocabulary uses none of
- *      `on*=`, `style=`, or any `href`, so stripping them closes inline handlers,
- *      CSS `url(javascript:)`, and entity-encoded `xlink:href` in one pass.
- *
- * The current consumer (`svgToStrokes` → DOMParser image/svg+xml → structured
- * strokes → React) never raw-renders this string, so the live XSS risk is already
- * nil; this keeps "inert" TRUE for any future raw-render consumer and for the
- * synced file a peer / Claude-context ingests (defense-in-depth, DDR-054 §3).
- */
-export function sanitizeAnnotationSvg(svg: string): string {
-  // Phase 23 — <image> href handling. Rule 3 below strips EVERY href (that's the
-  // zero-bypass invariant). To let a legit assets/ href survive WITHOUT
-  // re-opening the denylist race, we (a) neutralize any input-supplied marker so
-  // only this pre-pass can mint one, (b) on `<image>` ONLY, hoist a regex-valid
-  // assets href into a sanitizer-inert `data-mdcc-asset` marker (an external /
-  // data: / `..` / non-image href is left as a plain href → stripped by Rule 3),
-  // then (c) after the three rules, restore the marker back to `href` — but ONLY
-  // after RE-validating the value, so a forged marker can never smuggle a
-  // scheme/traversal back in. The restored value is, by construction, a safe
-  // same-origin path. See ASSET_IMAGE_HREF_RE + DDR (Task 9).
-  const hoisted = svg
-    .replace(/\sdata-mdcc-asset\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
-    .replace(/<\s*(?:[\w-]+:)?image\b[^>]*>/gi, (tag) => {
-      const m = tag.match(/(?:xlink:)?href\s*=\s*"([^"]*)"|(?:xlink:)?href\s*=\s*'([^']*)'/i);
-      const val = m ? (m[1] ?? m[2] ?? '') : '';
-      if (!val || !ASSET_IMAGE_HREF_RE.test(val)) return tag;
-      return tag.replace(/(?:xlink:)?href\s*=\s*("[^"]*"|'[^']*')/i, `data-mdcc-asset="${val}"`);
-    });
-  const cleaned = hoisted
-    // 1. Remove the CONTENT of executable / instruction-bearing elements (not
-    //    just their tags) so an injected script body / `@import` / prompt-
-    //    injection string can't survive as inert text a future raw-renderer or
-    //    Claude-context read might act on. Namespace-tolerant (`svg:script`),
-    //    non-greedy to the first matching dangerous close tag.
-    .replace(
-      /<\s*(?:[\w-]+:)?(?:script|style|foreignObject|title|desc)\b[\s\S]*?<\s*\/\s*(?:[\w-]+:)?(?:script|style|foreignObject|title|desc)\s*>/gi,
-      ''
-    )
-    // 2. Element allowlist — drop the markup of any tag whose LOCAL name isn't
-    //    in the fixed annotation vocabulary. `[^>]*` stops at the first `>`;
-    //    annotation attrs never contain a literal `>`.
-    .replace(/<\/?\s*([a-zA-Z][\w:-]*)\b[^>]*>/g, (match, rawName: string) => {
-      const local = String(rawName).split(':').pop()?.toLowerCase() ?? '';
-      return ANNOTATION_SVG_ELEMENTS.has(local) ? match : '';
-    })
-    // 3. Attribute denylist on the surviving allowlisted elements — the legit
-    //    vocabulary uses no on*= / style= / *href=, so stripping them closes
-    //    inline handlers, CSS url(javascript:), and entity-encoded hrefs.
-    //    The leading boundary is a LOOKBEHIND on whitespace / quote / slash
-    //    (not a consumed `\s`) so a handler glued to the previous attribute's
-    //    closing quote — `<circle r="2"onload="…"/>`, which HTML/SVG parsers
-    //    accept as a distinct attribute — is also stripped (Phase 24 security
-    //    review, DDR-067). The non-consuming lookbehind leaves the preceding
-    //    quote intact so the legit attribute it belonged to survives.
-    .replace(
-      /(?<=[\s"'/])(?:on[a-z]+|style|(?:[\w-]+:)?href)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi,
-      ''
-    );
-  // Post-pass — restore the validated assets href on <image>. Re-validate the
-  // marker value (defense-in-depth: a forged data-mdcc-asset can only resolve to
-  // a safe same-origin assets path; anything with a scheme/traversal is dropped).
-  return cleaned.replace(/\sdata-mdcc-asset\s*=\s*"([^"]*)"/gi, (_whole, val: string) =>
-    ASSET_IMAGE_HREF_RE.test(val) ? ` href="${val}"` : ''
-  );
-}
-
 export function createApi(ctx: Context, hooks: ApiHooks): Api {
   const onCommentsChanged = hooks.onCommentsChanged;
   const onAnnotationsChanged = hooks.onAnnotationsChanged;
@@ -1126,6 +1047,174 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     };
   }
 
+  // Phase 12 (DDR-103) — resolve a v2 canvas slug (`selected.canvas`: POSIX,
+  // extension-less, designRoot-relative — matches `_locator.json` keys + the
+  // `canvasSlug()` shape) to its absolute `.tsx` path, with a containment
+  // backstop. Same main-origin-only trust boundary as createCanvas: the
+  // untrusted canvas iframe origin never reaches a source-write endpoint.
+  function resolveCanvasAbs(
+    slugRaw: unknown
+  ): { ok: true; abs: string } | { ok: false; status: number; error: string } {
+    if (typeof slugRaw !== 'string' || !slugRaw.trim()) {
+      return { ok: false, status: 400, error: 'canvas (slug) required' };
+    }
+    let slug = slugRaw.replace(/^\/+|\/+$/g, '').replace(/\.(tsx|html)$/i, '');
+    // Accept either the bare slug (`ui/Foo`) or the designRel-prefixed file path
+    // the client `selected.file` carries (`.design/ui/Foo.tsx`) — strip a leading
+    // designRel so both shapes resolve to the same canvas (mirrors deriveCanvasSlug).
+    const dr = paths.designRel.replace(/^\.\//, '').replace(/^\/+|\/+$/g, '');
+    if (dr && slug.startsWith(`${dr}/`)) slug = slug.slice(dr.length + 1);
+    if (
+      !slug ||
+      path.isAbsolute(slug) ||
+      slug.split('/').some((seg) => seg === '..' || seg === '.' || seg === '')
+    ) {
+      return { ok: false, status: 400, error: 'invalid canvas slug' };
+    }
+    const abs = `${path.join(paths.designRoot, ...slug.split('/'))}.tsx`;
+    const resolvedRoot = path.resolve(paths.designRoot);
+    const resolved = path.resolve(abs);
+    if (!resolved.startsWith(`${resolvedRoot}${path.sep}`)) {
+      return { ok: false, status: 400, error: 'canvas resolves outside the design root' };
+    }
+    return { ok: true, abs };
+  }
+
+  // 8-hex lowercase, the shape `computeId` (canvas-edit.ts) stamps on data-cd-id.
+  const CD_ID_RE = /^[0-9a-f]{8}$/;
+
+  async function editCss(input: {
+    canvas?: unknown;
+    id?: unknown;
+    property?: unknown;
+    value?: unknown;
+    reset?: unknown;
+  }): Promise<EditOpResult> {
+    const r = resolveCanvasAbs(input.canvas);
+    if (!r.ok) return r;
+    const id = typeof input.id === 'string' ? input.id.trim() : '';
+    if (!CD_ID_RE.test(id)) return { ok: false, status: 400, error: 'invalid data-cd-id' };
+    const property = typeof input.property === 'string' ? input.property.trim() : '';
+    // CSS property names are ASCII letters + hyphens only (optionally a leading
+    // `-` for vendor prefixes) — reject anything that could smuggle a second key
+    // or an expression into the inline style object.
+    if (!property || !/^-?[a-z][a-z-]*$/.test(property)) {
+      return { ok: false, status: 400, error: 'invalid css property' };
+    }
+    // kebab → camelCase JSX style key.
+    const camel = property.replace(/-([a-z])/g, (_m, c: string) => c.toUpperCase());
+    // Phase 12.3 — `reset: true` REMOVES the inline property (back to class /
+    // inherited). No value needed; a missing key is a no-op (delta 0).
+    if (input.reset === true) {
+      try {
+        const res = await removeAttribute(r.abs, id, `style.${camel}`);
+        return { ok: true, delta: res.delta };
+      } catch (err) {
+        return {
+          ok: false,
+          status: 422,
+          error: err instanceof CanvasEditError ? err.message : 'reset failed',
+        };
+      }
+    }
+    const value = typeof input.value === 'string' ? input.value : '';
+    if (!value.trim()) return { ok: false, status: 400, error: 'value required' };
+    if (value.length > 256) return { ok: false, status: 413, error: 'value too long' };
+    // The value is always written as a JS STRING literal: JSON.stringify escapes
+    // quotes/backslashes/newlines so it can never break out of the string, and
+    // React accepts string values for every style prop — so `var(--accent)`,
+    // `#fff`, `8px`, `700`, `1.5` all ride verbatim.
+    try {
+      const res = await editAttribute(r.abs, id, `style.${camel}`, JSON.stringify(value));
+      return { ok: true, delta: res.delta };
+    } catch (err) {
+      return {
+        ok: false,
+        status: 422,
+        error: err instanceof CanvasEditError ? err.message : 'edit failed',
+      };
+    }
+  }
+
+  async function editText(input: {
+    canvas?: unknown;
+    id?: unknown;
+    text?: unknown;
+  }): Promise<EditOpResult> {
+    const r = resolveCanvasAbs(input.canvas);
+    if (!r.ok) return r;
+    const id = typeof input.id === 'string' ? input.id.trim() : '';
+    if (!CD_ID_RE.test(id)) return { ok: false, status: 400, error: 'invalid data-cd-id' };
+    if (typeof input.text !== 'string') return { ok: false, status: 400, error: 'text required' };
+    if (input.text.length > 5000) return { ok: false, status: 413, error: 'text too long' };
+    try {
+      const res = await runEditText(r.abs, id, input.text);
+      return { ok: true, delta: res.delta };
+    } catch (err) {
+      return {
+        ok: false,
+        status: 422,
+        error: err instanceof CanvasEditError ? err.message : 'edit failed',
+      };
+    }
+  }
+
+  async function editAttr(input: {
+    canvas?: unknown;
+    id?: unknown;
+    attr?: unknown;
+    value?: unknown;
+    reset?: unknown;
+  }): Promise<EditOpResult> {
+    const r = resolveCanvasAbs(input.canvas);
+    if (!r.ok) return r;
+    const id = typeof input.id === 'string' ? input.id.trim() : '';
+    if (!CD_ID_RE.test(id)) return { ok: false, status: 400, error: 'invalid data-cd-id' };
+    const attr = typeof input.attr === 'string' ? input.attr.trim() : '';
+    // Plain HTML attributes only — data-*, aria-*, role, title, id, lang, dir…
+    // Reject `style*` (that's /_api/edit-css), `data-cd-id` (pipeline-owned, also
+    // refused downstream by editAttribute), and anything that isn't a bare html
+    // attribute name. Digits allowed mid-name (e.g. data-2x).
+    if (
+      !attr ||
+      !/^[a-z][a-z0-9-]*$/.test(attr) ||
+      attr === 'data-cd-id' ||
+      attr.startsWith('style')
+    ) {
+      return { ok: false, status: 400, error: 'invalid attribute' };
+    }
+    // Phase 12.3 — `reset: true` REMOVES the custom attribute. No-op if absent.
+    if (input.reset === true) {
+      try {
+        const res = await removeAttribute(r.abs, id, attr);
+        return { ok: true, delta: res.delta };
+      } catch (err) {
+        return {
+          ok: false,
+          status: 422,
+          error: err instanceof CanvasEditError ? err.message : 'reset failed',
+        };
+      }
+    }
+    const value = typeof input.value === 'string' ? input.value : '';
+    if (!value.trim()) return { ok: false, status: 400, error: 'value required' };
+    if (value.length > 256) return { ok: false, status: 413, error: 'value too long' };
+    try {
+      // Non-`style.` attr name → editAttribute writes a plain quoted JSX attribute.
+      // Pass the value RAW: editStringAttr quotes/escapes it itself (JSON.stringify
+      // on replace, escapeAttr on insert) — pre-stringifying here double-encoded
+      // the value (`data-x="\"ok\""`; knob-smoke finding, 2026-06-12).
+      const res = await editAttribute(r.abs, id, attr, value);
+      return { ok: true, delta: res.delta };
+    } catch (err) {
+      return {
+        ok: false,
+        status: 422,
+        error: err instanceof CanvasEditError ? err.message : 'edit failed',
+      };
+    }
+  }
+
   async function saveCanvasState(file: string, state: Record<string, unknown>) {
     if (!state || typeof state !== 'object') return;
     const safe: Record<string, unknown> = {};
@@ -1532,6 +1621,9 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     saveAsset,
     createCanvas,
     deleteCanvas,
+    editCss,
+    editText,
+    editAttr,
     buildIndexData,
     buildSystemData,
     loadExportHistory,

package/apps/studio/bin/_png-playwright.mjs

@@ -5,7 +5,7 @@
 // producing clipped captures. With our own playwright we control the
 // viewport exactly and crop to the target element's bounding box.
 
-import { mkdirSync, writeFileSync } from 'node:fs';
+import { mkdirSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { launchChromium } from './_pw-launch.mjs';