@1agh/maude 0.29.0 → 0.31.0

package/apps/studio/api.ts

@@ -3,13 +3,22 @@
 
 import crypto from 'node:crypto';
 import type { Dirent } from 'node:fs';
-import { mkdir, readdir, readFile, rename, stat as statp } from 'node:fs/promises';
+import { mkdir, readdir, readFile, rename, rm, stat as statp } from 'node:fs/promises';
 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([
+// Directories that never hold user-facing canvases. Exported so the
+// external-canvas watcher (`canvas-list-watch.ts`) shares one source instead of
+// a hand-synced copy. (activity.ts still carries its own historical mirror.)
+export const SKIP_DIRS = new Set([
   'node_modules',
   '.git',
   '.next',
@@ -56,6 +65,31 @@ export async function findHtmlFiles(absRoot: string, prefixUnderRepo: string): P
   return out;
 }
 
+/**
+ * Canonical canvas slug from a (repo- or design-root-relative) canvas path.
+ * Pure — the `fileSlug` closure inside `createApi` delegates here, and the
+ * external-canvas watcher (`canvas-list-watch.ts`) imports it so both creation
+ * paths derive identical `canvas-list-update` slugs. Strips an optional
+ * `<designRel>/` prefix, then `/`→`-`, whitespace→`_`, drops the `.tsx`/`.html`
+ * extension, and lowercases.
+ */
+export function canvasSlugFromRel(file: string, designRel: string): string {
+  let p = String(file).replace(/^\/+|\/+$/g, '');
+  try {
+    p = decodeURIComponent(p);
+  } catch {
+    /* ignore */
+  }
+  const prefix = `${designRel.replace(/^\/+|\/+$/g, '')}/`;
+  if (p.startsWith(prefix)) p = p.slice(prefix.length);
+  return p
+    .replace(/\//g, '-')
+    .replace(/\s+/g, '_')
+    .replace(/\.(tsx|html)$/i, '')
+    .replace(/^\.+/, '')
+    .toLowerCase();
+}
+
 async function findFiles(absRoot: string, prefix: string, exts: string[]): Promise<string[]> {
   const out: string[] = [];
   let entries: Dirent[];
@@ -141,6 +175,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 +229,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 +262,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,104 +350,13 @@ 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;
   const { paths, cfg } = ctx;
 
   function fileSlug(file: string): string {
-    let p = String(file).replace(/^\/+|\/+$/g, '');
-    try {
-      p = decodeURIComponent(p);
-    } catch {
-      /* ignore */
-    }
-    const prefix = `${paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
-    if (p.startsWith(prefix)) p = p.slice(prefix.length);
-    return p
-      .replace(/\//g, '-')
-      .replace(/\s+/g, '_')
-      .replace(/\.(tsx|html)$/i, '')
-      .replace(/^\.+/, '')
-      .toLowerCase();
+    return canvasSlugFromRel(file, paths.designRel);
   }
 
   async function fileForSlug(slug: string): Promise<string | null> {
@@ -716,21 +652,28 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     }
   }
 
-  // ---------- Canvas meta sidecar (Phase 4 T5) ----------
+  // ---------- Canvas meta sidecar (Phase 4 T5; split DDR-115) ----------
   //
   // Each canvas under `<designRoot>/ui/<name>.tsx` has a sibling
-  // `<name>.meta.json`. Phase 4 stores `layout` (per-artboard world-coord
-  // rects) and `viewport` (last pan/zoom) inside that file so the canvas
-  // runtime can restore state on reload. The PATCH path is intentionally
-  // merge-shallow on top-level keys — never clobber `title`, `sections`,
-  // `ai_context`, or any other authoring metadata.
+  // `<name>.meta.json` — the SHARED, versioned document (title, sections,
+  // `layout` per-artboard world-coord rects, css_mode, …). The PATCH path is
+  // intentionally merge-shallow on top-level keys — never clobber `title`,
+  // `sections`, `ai_context`, or any other authoring metadata.
+  //
+  // DDR-115 — the PER-USER camera (`viewport` pan/zoom) NO LONGER lives in
+  // `.meta.json`. It churns on every mouse pan/zoom, so persisting it inline
+  // dirtied a tracked file. It now lives in a gitignored per-machine view file
+  // (`canvasViewPath` below). PATCH splits the lanes (viewport → view file,
+  // layout → meta); GET merges them back so the client (`window.__canvas_meta__`)
+  // is unchanged. `last_modified` is stamped into meta ONLY on a real shared
+  // (layout) change — never on a viewport-only patch.
 
   /**
-   * Resolve `file` (a path relative to repoRoot like `.design/ui/Foo.tsx`)
-   * into the absolute path of its sibling `.meta.json` sidecar. Refuses
-   * paths that escape repoRoot.
+   * Resolve `file` (a path relative to repoRoot like `.design/ui/Foo.tsx`) into
+   * the absolute path of the canvas SOURCE file. Refuses traversal, paths that
+   * escape repoRoot, and non-canvas extensions. Returns null on rejection.
    */
-  function canvasMetaPath(file: string): string | null {
+  function canvasSourceAbs(file: string): string | null {
     let p = String(file).replace(/^\/+/, '');
     try {
       p = decodeURIComponent(p);
@@ -742,29 +685,133 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     if (!abs.startsWith(`${paths.repoRoot}/`)) return null;
     const ext = path.extname(abs).toLowerCase();
     if (ext !== '.tsx' && ext !== '.html') return null;
-    return abs.replace(/\.(tsx|html)$/i, '.meta.json');
+    return abs;
+  }
+
+  /**
+   * Resolve `file` into the absolute path of its sibling `.meta.json` sidecar.
+   * Same containment guard as `canvasSourceAbs` (refuses paths that escape
+   * repoRoot / non-canvas extensions).
+   */
+  function canvasMetaPath(file: string): string | null {
+    const abs = canvasSourceAbs(file);
+    return abs ? abs.replace(/\.(tsx|html)$/i, '.meta.json') : null;
+  }
+
+  // ---------- Per-machine canvas view / camera (DDR-115) ----------
+  //
+  // The canvas pan/zoom ("camera") is PER-USER runtime state, separate from the
+  // shared `.meta.json` document. It lives in `_canvas-state/<slug>.view.json`
+  // ({ viewport }) — gitignored, swept on delete, export-excluded. DISTINCT from
+  // the legacy `_canvas-state/<slug>.json` ({ sections, viewport:{x,y,scale} })
+  // store: that uses `scale` clamped 0.05–8, this uses `zoom` clamped 0.1–4, so
+  // overloading one file would let the two writers clobber each other's shape.
+
+  /** Validate a candidate viewport — finite x/y, zoom clamped [0.1, 4] (the
+   *  Phase 4 rule). Returns the normalized viewport, or null when invalid. */
+  function normalizeViewport(v: unknown): { x: number; y: number; zoom: number } | null {
+    if (!v || typeof v !== 'object' || Array.isArray(v)) return null;
+    const vv = v as { x?: unknown; y?: unknown; zoom?: unknown };
+    if (
+      Number.isFinite(vv.x as number) &&
+      Number.isFinite(vv.y as number) &&
+      Number.isFinite(vv.zoom as number)
+    ) {
+      const zoom = Math.min(4, Math.max(0.1, vv.zoom as number));
+      return { x: vv.x as number, y: vv.y as number, zoom };
+    }
+    return null;
+  }
+
+  /** Per-machine view file for a canvas: `_canvas-state/<slug>.view.json`. Gated
+   *  by the same containment guard as the meta sidecar (traversal / repoRoot /
+   *  canvas-ext). Returns null when `file` is not a valid canvas path. */
+  function canvasViewPath(file: string): string | null {
+    if (!canvasMetaPath(file)) return null; // reuse the containment + ext gate
+    return path.join(paths.canvasStateDir, `${fileSlug(file)}.view.json`);
+  }
+
+  async function loadCanvasView(
+    file: string
+  ): Promise<{ viewport?: { x: number; y: number; zoom: number } } | null> {
+    const viewAbs = canvasViewPath(file);
+    if (!viewAbs) return null;
+    try {
+      const obj = JSON.parse(await Bun.file(viewAbs).text());
+      if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+        const vp = normalizeViewport((obj as { viewport?: unknown }).viewport);
+        return vp ? { viewport: vp } : {};
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** Persist the per-user camera. Validates + clamps; best-effort (mkdir the
+   *  bucket if absent). Returns the normalized viewport on write, null when the
+   *  path is rejected or the viewport is invalid (no write). */
+  async function saveCanvasView(
+    file: string,
+    viewport: unknown
+  ): Promise<{ x: number; y: number; zoom: number } | null> {
+    const viewAbs = canvasViewPath(file);
+    if (!viewAbs) return null;
+    const vp = normalizeViewport(viewport);
+    if (!vp) return null;
+    try {
+      await mkdir(paths.canvasStateDir, { recursive: true });
+      await Bun.write(viewAbs, `${JSON.stringify({ viewport: vp }, null, 2)}\n`);
+      return vp;
+    } catch {
+      return null;
+    }
   }
 
   async function loadCanvasMeta(file: string): Promise<Record<string, unknown> | null> {
     const metaAbs = canvasMetaPath(file);
     if (!metaAbs) return null;
+    let obj: Record<string, unknown> = {};
+    let hadMeta = false;
     try {
-      const raw = await Bun.file(metaAbs).text();
-      const obj = JSON.parse(raw);
-      return obj && typeof obj === 'object' && !Array.isArray(obj)
-        ? (obj as Record<string, unknown>)
-        : null;
+      const parsed = JSON.parse(await Bun.file(metaAbs).text());
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        obj = parsed as Record<string, unknown>;
+        hadMeta = true;
+      }
     } catch {
-      return null;
+      // No meta on disk — fall through to a possible view-only result.
     }
+    // DDR-115 — never surface the per-user camera or the local write-timestamp
+    // from the on-disk meta: `viewport` is stale (the live camera lives in the
+    // view file), `last_modified` is local bookkeeping. Strip both, then overlay
+    // the current camera so the shell's `window.__canvas_meta__.viewport` still
+    // restores on reload — the client stays unchanged. (`= undefined` over
+    // `delete` — JSON.stringify/Response.json drop undefined keys, matching the
+    // codebase convention + biome's noDelete.)
+    obj.viewport = undefined;
+    obj.last_modified = undefined;
+    const view = await loadCanvasView(file);
+    if (view?.viewport) obj.viewport = view.viewport;
+    // Preserve the historic contract: no meta AND no camera → null (GET → {},
+    // PATCH-on-rejected-path → 404). A view-only canvas still returns its camera.
+    if (!hadMeta && !view?.viewport) return null;
+    return obj;
   }
 
   /**
-   * Shallow-merge `patch` onto the existing meta sidecar and write back. Only
-   * the Phase 4 keys `layout` + `viewport` are accepted from untrusted clients;
-   * the rest of meta (title, sections, brief, ai_context, …) is preserved.
-   * Returns the merged meta on success, null when the canvas has no meta or
-   * the patch is rejected.
+   * Apply a `patch` from the (untrusted) client, splitting the two lanes
+   * (DDR-115):
+   *   - `viewport` → the per-machine view file (`saveCanvasView`); NEVER the
+   *     versioned meta. A viewport-only patch leaves `.meta.json` byte-unchanged
+   *     (no `last_modified` bump) — this is the mouse-move churn killer.
+   *   - `layout`   → the shared `.meta.json`, shallow-merged so `title`,
+   *     `sections`, `ai_context`, … are preserved; `last_modified` is stamped
+   *     ONLY here (a real shared change the user wants committable).
+   * Returns the same coherent object a GET would produce (shared meta + camera),
+   * or null only when the path itself is rejected (traversal / bad ext) so the
+   * route maps it to 404. A viewport-only patch on a canvas that has no meta yet
+   * still succeeds (writes only the view file) and returns `{ viewport }`.
    */
   async function patchCanvasMeta(
     file: string,
@@ -773,43 +820,63 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     const metaAbs = canvasMetaPath(file);
     if (!metaAbs) return null;
     if (!patch || typeof patch !== 'object' || Array.isArray(patch)) return null;
-    let current: Record<string, unknown> = {};
-    try {
-      const raw = await Bun.file(metaAbs).text();
-      const parsed = JSON.parse(raw);
-      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-        current = parsed as Record<string, unknown>;
+
+    // DDR-115 security (F-A2) — the PATCH lanes are reachable from the untrusted
+    // canvas origin (DDR-054). Refuse to mint per-canvas state (view file or
+    // `.meta.json`) for a canvas that doesn't exist, so a malicious origin can't
+    // spray arbitrary-slug files/inodes via fabricated `file` paths. A valid
+    // patch only ever targets a canvas the user actually has; `.meta.json` may
+    // still be absent (first layout/viewport write), but the source must exist.
+    const srcAbs = canvasSourceAbs(file);
+    if (!srcAbs || !(await Bun.file(srcAbs).exists())) return null;
+
+    // --- Per-user camera lane: viewport → view file, never the versioned meta.
+    if (patch.viewport !== undefined) {
+      if (patch.viewport === null) {
+        // Explicit clear — best-effort remove the view file.
+        const viewAbs = canvasViewPath(file);
+        if (viewAbs) {
+          try {
+            await rm(viewAbs);
+          } catch {
+            /* absent / unreadable — nothing to clear */
+          }
+        }
+      } else {
+        // saveCanvasView validates + clamps; an invalid viewport is a silent no-op.
+        await saveCanvasView(file, patch.viewport);
       }
-    } catch {
-      // No existing meta — create one with just the Phase 4 keys.
     }
-    const next = { ...current };
-    // Whitelist of patchable top-level keys.
+
+    // --- Shared document lane: layout → versioned meta, stamps last_modified. ---
     if (patch.layout !== undefined) {
+      let current: Record<string, unknown> = {};
+      try {
+        const parsed = JSON.parse(await Bun.file(metaAbs).text());
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+          current = parsed as Record<string, unknown>;
+        }
+      } catch {
+        // No existing meta — create one with just the layout key.
+      }
+      const next = { ...current };
       if (patch.layout === null) {
         next.layout = undefined;
       } else if (typeof patch.layout === 'object' && !Array.isArray(patch.layout)) {
         next.layout = patch.layout;
       }
+      // Defensive: a stale inline viewport must never persist in the versioned
+      // file (the camera lane owns it now). JSON.stringify drops undefined keys.
+      next.viewport = undefined;
+      next.last_modified = new Date().toISOString();
+      // Trailing newline — consistent with canvas-create.ts + sync/codec.ts
+      // (mergeSharedMetaIntoLocal), so a layout edit doesn't churn the newline.
+      await Bun.write(metaAbs, `${JSON.stringify(next, null, 2)}\n`);
     }
-    if (patch.viewport !== undefined) {
-      if (patch.viewport === null) {
-        next.viewport = undefined;
-      } else if (typeof patch.viewport === 'object' && !Array.isArray(patch.viewport)) {
-        const v = patch.viewport as { x?: unknown; y?: unknown; zoom?: unknown };
-        if (
-          Number.isFinite(v.x as number) &&
-          Number.isFinite(v.y as number) &&
-          Number.isFinite(v.zoom as number)
-        ) {
-          const zoom = Math.min(4, Math.max(0.1, v.zoom as number));
-          next.viewport = { x: v.x as number, y: v.y as number, zoom };
-        }
-      }
-    }
-    next.last_modified = new Date().toISOString();
-    await Bun.write(metaAbs, JSON.stringify(next, null, 2));
-    return next;
+
+    // Return the merged view (shared meta + camera) — identical to GET, so the
+    // client gets a coherent object regardless of which lane(s) the patch hit.
+    return await loadCanvasMeta(file);
   }
 
   // ---------- Annotations sidecar (Phase 5) ----------
@@ -1009,6 +1076,12 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       path.join(groupAbs, `${v.name}.meta.json`),
       `${JSON.stringify(meta, null, 2)}\n`
     );
+    // Phase 30 — same-machine live tree refresh. Other tabs on THIS dev-server
+    // re-read the (branch-scoped, on-disk) canvas list so a freshly-created
+    // canvas appears without a reload. Cross-machine peers get the new canvas
+    // via git "Get latest" — the file travels through git, this event is only a
+    // "refresh your list" nudge for online local tabs (loopback inspector WS).
+    ctx.bus.emit('canvas-list-update', { action: 'added', rel, slug });
     // designRel-prefixed path — matches the file-tree `file.path` shape so the
     // client can open it directly after reloadTree().
     return { ok: true, file: path.posix.join(paths.designRel, rel), rel, slug };
@@ -1110,6 +1183,11 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       path.join(paths.canvasStateDir, `${slug}.json`),
       `_canvas-state__${slug}.json`
     );
+    // DDR-115 — the per-machine camera view file.
+    await moveIfExists(
+      path.join(paths.canvasStateDir, `${slug}.view.json`),
+      `_canvas-state__${slug}.view.json`
+    );
     await moveIfExists(path.join(paths.commentsDir, `${slug}.json`), `_comments__${slug}.json`);
 
     await Bun.write(
@@ -1117,6 +1195,8 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       `${JSON.stringify({ canvas: rel, slug, deletedAt: new Date().toISOString(), trashed }, null, 2)}\n`
     );
 
+    // Phase 30 — live tree refresh for other local tabs (see createCanvas).
+    ctx.bus.emit('canvas-list-update', { action: 'removed', rel, slug });
     return {
       ok: true,
       rel,
@@ -1126,6 +1206,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 +1780,9 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     saveAsset,
     createCanvas,
     deleteCanvas,
+    editCss,
+    editText,
+    editAttr,
     buildIndexData,
     buildSystemData,
     loadExportHistory,