@1agh/maude 0.29.0 → 0.31.0

package/apps/studio/canvas-edit.ts

@@ -68,6 +68,8 @@ function computeId(componentName: string, idx: number): string {
 
 interface OpeningHit {
   opening: AnyNode;
+  /** The full JSXElement node — `editText` needs `.children` (JSXText), not just the opening tag. */
+  element: AnyNode;
 }
 
 /**
@@ -108,7 +110,7 @@ function findOpening(program: AnyNode, targetId: string): OpeningHit | null {
       frame.jsxIndex += 1;
       const id = computeId(frame.componentName, idx);
       if (id === targetId) {
-        hit = { opening: node.openingElement };
+        hit = { opening: node.openingElement, element: node };
       }
       if (!hit) {
         if (node.openingElement) visit(node.openingElement.attributes);
@@ -200,6 +202,111 @@ export async function editAttribute(
   });
 }
 
+/**
+ * Remove an attribute (or one inline-style property) from the element with the
+ * given `data-cd-id` — the "reset to original" path (Phase 12.3). `attr` follows
+ * the same shape as `editAttribute`: `style.<camelOrKebab>` removes one inline
+ * style key (dropping the whole `style={{}}` when it was the last key); any other
+ * name removes that plain JSX attribute. A missing key/attribute is a no-op
+ * (delta 0), never an error. Same atomic write + per-file lock as `editAttribute`.
+ */
+export async function removeAttribute(
+  canvasAbsPath: string,
+  id: string,
+  attr: string
+): Promise<EditResult> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id,
+      });
+    }
+    const source = await file.text();
+    const next = applyRemove(canvasAbsPath, source, id, attr);
+    if (next.source === source) return { source, delta: 0 };
+    const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
+    await Bun.write(tmp, next.source);
+    const { rename } = await import('node:fs/promises');
+    await rename(tmp, canvasAbsPath);
+    return next;
+  });
+}
+
+/** Pure variant of `removeAttribute` — exposed for tests. */
+export function applyRemove(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  attr: string
+): EditResult {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    const first = parsed.errors[0];
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${first?.message ?? 'unknown'}`,
+      {
+        canvas: canvasAbsPath,
+        id,
+      }
+    );
+  }
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const s = new MagicString(source);
+  if (attr.startsWith('style.')) {
+    removeStyleProp(s, hit.opening, attr.slice('style.'.length), source);
+  } else if (attr === 'data-cd-id') {
+    throw new CanvasEditError('data-cd-id is owned by the pipeline; cannot be removed', {
+      canvas: canvasAbsPath,
+      id,
+    });
+  } else {
+    removeStringAttr(s, hit.opening, attr, source);
+  }
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
+/**
+ * Apply an inline TEXT-content edit to the JSX element with the given
+ * `data-cd-id`. Leaf-text only: the element's children must be exactly one
+ * `JSXText` node (whitespace-only siblings are ignored). Mixed/expression
+ * children (`<b>x</b>`, `{count}`) throw `CanvasEditError` — the caller should
+ * surface a "use /design:edit" refusal rather than guess. The text is
+ * JSX-escaped before it touches source. Same atomic write + per-file lock as
+ * `editAttribute`. See DDR-103.
+ */
+export async function editText(
+  canvasAbsPath: string,
+  id: string,
+  text: string
+): Promise<EditResult> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id,
+      });
+    }
+    const source = await file.text();
+    const next = applyTextEdit(canvasAbsPath, source, id, text);
+    if (next.source === source) return { source, delta: 0 };
+    const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
+    await Bun.write(tmp, next.source);
+    const { rename } = await import('node:fs/promises');
+    await rename(tmp, canvasAbsPath);
+    return next;
+  });
+}
+
 /**
  * Pure variant — exposed for tests + in-memory pipelines. Caller owns
  * persistence. Throws CanvasEditError if the ID isn't found or the edit shape
@@ -245,6 +352,68 @@ export function applyEdit(
   return { source: out, delta: out.length - source.length };
 }
 
+/**
+ * Pure variant of `editText` — parse, locate the JSXText child, overwrite its
+ * source span (preserving the original leading/trailing whitespace so JSX
+ * indentation survives), escaping the new text. Throws `CanvasEditError` for a
+ * missing id, no text content, or mixed/expression children.
+ */
+export function applyTextEdit(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  text: string
+): EditResult {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    const first = parsed.errors[0];
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${first?.message ?? 'unknown'}`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+
+  const children: AnyNode[] = Array.isArray(hit.element?.children) ? hit.element.children : [];
+  // Ignore whitespace-only JSXText siblings (`<button>\n  Save\n</button>` parses
+  // as one JSXText; `<a>\n  <b/>\n</a>` parses as ws + element + ws — the ws is
+  // noise). What's left is the "real" content.
+  const meaningful = children.filter(
+    (c) => !(c?.type === 'JSXText' && typeof c.value === 'string' && c.value.trim() === '')
+  );
+  if (meaningful.length === 0) {
+    throw new CanvasEditError(`element "${id}" has no editable text content`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const only = meaningful[0];
+  if (meaningful.length > 1 || only?.type !== 'JSXText') {
+    throw new CanvasEditError(
+      `element "${id}" has mixed or expression content — edit it via /design:edit`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  const start = only.start as number;
+  const end = only.end as number;
+  const raw = source.slice(start, end);
+  // Preserve the original indentation/newline framing; swap only the visible text.
+  const lead = /^\s*/.exec(raw)?.[0] ?? '';
+  const trail = /\s*$/.exec(raw)?.[0] ?? '';
+  const s = new MagicString(source);
+  s.overwrite(start, end, `${lead}${escapeJsxText(text)}${trail}`);
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
@@ -263,14 +432,20 @@ function editStringAttr(s: MagicString, opening: AnyNode, name: string, value: s
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
-      // Replace just the value text, keeping surrounding quotes.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // Replace the whole `"value"` (quotes included) so we control the escaping.
+      // The value lands in a JSX *attribute*, where `"` must become `&quot;` and
+      // `<`/`>` their entities — NOT JS backslash escaping. `JSON.stringify` would
+      // emit `\"`, which is invalid in a JSX attribute and corrupts the source on
+      // any value containing a double quote. Use the same `escapeAttr` as the two
+      // insert branches so all four paths agree. See DDR-103 / DDR-105.
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     if (v.type === 'JSXExpressionContainer') {
       // Replace the whole `{...}` with a plain quoted literal — keeps the
-      // resulting JSX readable, no escaping gymnastics.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // resulting JSX readable. Same JSX-attribute escaping as above (NOT
+      // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     // Unknown shape — refuse rather than corrupt.
@@ -289,6 +464,24 @@ function escapeAttr(value: string): string {
   return value.replace(/"/g, '&quot;').replace(/[<>]/g, (c) => (c === '<' ? '&lt;' : '&gt;'));
 }
 
+/**
+ * Escape JSX-significant characters so user-typed text lands in source `.tsx`
+ * as inert TEXT, never as markup or an expression. The text is written between
+ * an element's tags (`<button>HERE</button>`), where `<`/`>` would start a tag
+ * and `{`/`}` would open a JSX expression — so all four (plus a bare `&`, which
+ * begins an entity) are encoded. This is the load-bearing guard that keeps the
+ * inline text editor (Phase 12) from being a source-injection vector. See
+ * DDR-103.
+ */
+function escapeJsxText(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;');
+}
+
 function editStyleProp(
   s: MagicString,
   opening: AnyNode,
@@ -308,14 +501,14 @@ function editStyleProp(
     return;
   }
   const v = attr.value;
-  if (!v || v.type !== 'JSXExpressionContainer') {
+  if (v?.type !== 'JSXExpressionContainer') {
     throw new CanvasEditError(
       `style attribute on ${id} is not a {{...}} expression — refusing to edit`,
       { canvas: canvasAbsPath, id }
     );
   }
   const obj = v.expression;
-  if (!obj || obj.type !== 'ObjectExpression') {
+  if (obj?.type !== 'ObjectExpression') {
     throw new CanvasEditError(
       `style={...} on ${id} is not an inline ObjectExpression — refusing to edit`,
       { canvas: canvasAbsPath, id }
@@ -349,6 +542,63 @@ function editStyleProp(
   void tail;
 }
 
+/**
+ * Remove a single inline-style property (the "reset to original" path — DDR-104
+ * Phase 12.3). No-op when the style attribute or the key is absent. When the key
+ * was the object's ONLY property, the whole `style={{…}}` attribute is removed so
+ * we don't leave an empty `style={{}}` behind.
+ */
+function removeStyleProp(s: MagicString, opening: AnyNode, prop: string, source: string): boolean {
+  const attr = findAttribute(opening, 'style');
+  if (!attr) return false;
+  const v = attr.value;
+  if (v?.type !== 'JSXExpressionContainer') return false;
+  const obj = v.expression;
+  if (obj?.type !== 'ObjectExpression') return false;
+  const props = (obj.properties as AnyNode[]).filter(
+    (p) => p?.type === 'Property' || p?.type === 'ObjectProperty'
+  );
+  const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  const idx = props.findIndex((p) => {
+    const k = p.key;
+    const kname =
+      k?.type === 'Identifier' ? k.name : k?.type === 'Literal' ? String(k.value) : null;
+    return kname === prop || kname === propCamel;
+  });
+  if (idx === -1) return false;
+
+  // Only property → drop the whole `style={{…}}` attribute (plus the leading space).
+  if (props.length === 1) {
+    const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+    s.remove(start, attr.end);
+    return true;
+  }
+  // Otherwise remove the one property + one adjacent comma/whitespace run so the
+  // remaining object stays well-formed: consume forward to the next prop's start
+  // (eats the trailing `, `), or — for the last prop — backward from the previous
+  // prop's end (eats the leading `, `).
+  const target = props[idx];
+  if (idx < props.length - 1) {
+    s.remove(target.start as number, props[idx + 1].start as number);
+  } else {
+    s.remove(props[idx - 1].end as number, target.end as number);
+  }
+  return true;
+}
+
+/**
+ * Remove a plain JSX attribute (the custom-attribute "reset" path). No-op when
+ * absent. Refuses `data-cd-id` / `style` (pipeline-owned / wrong endpoint).
+ */
+function removeStringAttr(s: MagicString, opening: AnyNode, name: string, source: string): boolean {
+  if (name === 'data-cd-id' || name === 'style') return false;
+  const attr = findAttribute(opening, name);
+  if (!attr) return false;
+  const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+  s.remove(start, attr.end);
+  return true;
+}
+
 /**
  * Render a JS object key — bare identifier when the prop is camelCase + valid
  * JS id, quoted otherwise. Mirrors how authors write JSX styles.

package/apps/studio/canvas-icons.tsx

@@ -473,6 +473,8 @@ export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   rect: IconRect,
   ellipse: IconEllipse,
   sticky: IconSticky,
+  // FigJam v3 — labelled organizing container.
+  section: IconSection,
   arrow: IconArrow,
   text: IconText,
   eraser: IconEraser,
@@ -487,3 +489,106 @@ export const SHAPE_KIND_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   triangle: IconTriangle,
   'triangle-down': IconTriangleDown,
 };
+
+// ── FigJam v3 — multi-select manipulation icons ──────────────────────────────
+// Object align (an edge line + two boxes), distribute (rails + a box), and
+// group/ungroup. Same 24×24 stroke language as the rest of the set.
+
+export function IconObjAlignLeft(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18" />
+      <rect x="7" y="6" width="11" height="4" rx="1" />
+      <rect x="7" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignHCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 3v2M12 19v2" />
+      <rect x="6" y="6" width="12" height="4" rx="1" />
+      <rect x="8" y="14" width="8" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignRight(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M20 3v18" />
+      <rect x="6" y="6" width="11" height="4" rx="1" />
+      <rect x="11" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignTop(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18" />
+      <rect x="6" y="7" width="4" height="11" rx="1" />
+      <rect x="14" y="7" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignVCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h2M19 12h2" />
+      <rect x="6" y="6" width="4" height="12" rx="1" />
+      <rect x="14" y="8" width="4" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignBottom(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 20h18" />
+      <rect x="6" y="6" width="4" height="11" rx="1" />
+      <rect x="14" y="11" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeH(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18M20 3v18" />
+      <rect x="9" y="8" width="6" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeV(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18M3 20h18" />
+      <rect x="8" y="9" width="8" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconGroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 7V4a1 1 0 011-1h3M17 3h3a1 1 0 011 1v3M21 17v3a1 1 0 01-1 1h-3M7 21H4a1 1 0 01-1-1v-3" />
+      <rect x="7" y="7" width="6" height="6" rx="1" />
+      <rect x="11" y="11" width="6" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconUngroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="7" height="7" rx="1" />
+      <rect x="13" y="13" width="7" height="7" rx="1" />
+      <path d="M15 6l3 3M6 15l3 3" />
+    </Svg>
+  );
+}
+
+/** FigJam v3 — section tool: a region with its name chip docked top-left. */
+export function IconSection(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="8" width="16" height="12" rx="2" />
+      <path d="M4 4h7" />
+    </Svg>
+  );
+}

package/apps/studio/canvas-lib.tsx

@@ -102,6 +102,7 @@ import {
   matchesArtboard,
   useCanvasActivity,
 } from './use-canvas-activity.tsx';
+import { useChromeVisibility } from './use-chrome-visibility.tsx';
 import { CollabProvider, canvasSlugFromPath } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { MaybeToolProvider, useToolModeOptional } from './use-tool-mode.tsx';
@@ -118,6 +119,17 @@ const WHEEL_ZOOM_K = 0.0015; // larger = more sensitive wheel
 const SETTLE_MS = 500;
 const PUBLISH_MS = 50;
 
+// WebKit (Safari + the Tauri WKWebView native shell, DDR-106) vs Blink (Chrome).
+// The two engines render the CSS `zoom` property incompatibly (see writeTransform),
+// so the scale dimension takes a different path on each. Detected via Apple's
+// `navigator.vendor` and the WebKit-only `GestureEvent` global — both absent in
+// Chrome/Edge/Firefox, present in Safari and WKWebView. Evaluated once at module
+// load; the canvas always runs in a browser/webview context.
+const IS_WEBKIT =
+  typeof navigator !== 'undefined' &&
+  (/apple/i.test(navigator.vendor || '') ||
+    (typeof window !== 'undefined' && 'GestureEvent' in window));
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Engine CSS (Phase 4) — injected once per iframe inside DesignCanvas's mount.
 // The visual chrome of `.dc-artboard` (borders, label strip, SKU type) still
@@ -130,6 +142,10 @@ const ENGINE_CSS = `
   inset: 0;
   overflow: hidden;
   outline: none;
+  /* WebKit text inflation must not re-grow artboard text that the world scales
+     down on zoom-out. Inherited, so this covers every descendant. No-op on Blink. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   /* DDR-046 — snap-layer magenta is distinct from --accent so the snap chrome
      never visually melts into the selection halo during a drag-snap gesture.
      OKLCH default approximates FigJam magenta in the project's color space. */
@@ -653,27 +669,47 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
   jumpTargetsRef.current = jumpTargets;
 
   // worldRef is stable across renders — read inside callbacks lazily, no dep.
-  // Use CSS `zoom` (not `transform: scale`) for the scale dimension. `zoom`
-  // re-flows layout at the new size so the browser re-rasterizes text at the
-  // target resolution — text stays crisp at any zoom level. `transform: scale`
-  // upscales a cached layer, which produces the pixelation users see at
-  // zoom > ~1.5. CSS `zoom` is supported in Chrome / Safari / Edge (always)
-  // and Firefox 126+; for a dev-server design tool that's full coverage.
   //
-  // ! Subtle: CSS `zoom: N` makes `transform: translate(Xpx, Ypx)` translate by
-  // ! N×X / N×Y screen pixels (translate is in the *pre-zoom* coord space, then
-  // ! the whole layer is zoomed). Our controller's `vpRef` holds the translate
-  // ! in *screen* pixels (the same convention as `transform: scale(N)
-  // ! translate(...)` had), so we divide by zoom at write time to convert into
-  // ! the CSS-zoom world. The data model stays simple and pan/zoom math (in
-  // ! particular zoom-around-cursor) keeps using screen-px throughout.
+  // The scale dimension takes an engine-specific path because the CSS `zoom`
+  // property is NOT interoperable between Blink and WebKit:
+  //
+  // • Blink (Chrome): CSS `zoom`. `zoom` re-flows layout at the new size so the
+  //   browser re-rasterizes text at the target resolution — text stays crisp at
+  //   any zoom level (whereas `transform: scale` upscales a cached layer →
+  //   pixelation at zoom > ~1.5). Blink composites `zoom` changes on a fast path,
+  //   so pinch stays smooth. Unchanged from the original implementation.
+  //   ! Subtle: under `zoom: N`, a co-located `transform: translate(Xpx, Ypx)`
+  //   ! translates by N×X / N×Y screen px (translate is in pre-zoom coords, then
+  //   ! the layer is zoomed). `vpRef` holds the translate in *screen* px, so we
+  //   ! divide by zoom at write time. pan/zoom math stays screen-px throughout.
+  //
+  // • WebKit (Safari + the Tauri WKWebView shell): `transform: translate() scale()`.
+  //   On WebKit, `zoom` co-located with a `transform` does NOT cascade scale into
+  //   descendant text (fonts stay fixed size — the reported bug) and forces a
+  //   main-thread relayout on every pinch tick (janky trackpad zoom). A composited
+  //   `transform: scale` scales all descendants uniformly incl. text and never
+  //   relayouts. transform-origin is pinned top-left so the affine matches the
+  //   `screen = translate + scale·world` model the rest of the math assumes — so
+  //   here the translate is plain screen px (no /z). Crispness at high zoom is
+  //   recovered by releasing the compositor layer on settle (`crisp` → will-change
+  //   auto), which prompts WebKit to re-rasterize text at the target scale.
   // biome-ignore lint/correctness/useExhaustiveDependencies: refs only — stable identity by design.
-  const writeTransform = useCallback((v: ViewportState) => {
+  const writeTransform = useCallback((v: ViewportState, opts?: { crisp?: boolean }) => {
     const el = worldRef.current;
     if (!el) return;
     const z = v.zoom || 1;
-    el.style.transform = `translate(${v.x / z}px, ${v.y / z}px)`;
-    el.style.zoom = String(z);
+    if (IS_WEBKIT) {
+      el.style.zoom = '';
+      el.style.transformOrigin = '0 0';
+      el.style.transform = `translate(${v.x}px, ${v.y}px) scale(${z})`;
+      // Mid-gesture keep the layer promoted (smooth); when settled release it so
+      // WebKit re-paints text crisp at the new scale instead of upscaling the
+      // cached bitmap.
+      el.style.willChange = opts?.crisp ? 'auto' : 'transform';
+    } else {
+      el.style.transform = `translate(${v.x / z}px, ${v.y / z}px)`;
+      el.style.zoom = String(z);
+    }
     el.style.visibility = 'visible';
   }, []);
 
@@ -710,8 +746,12 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       isInteractingStateRef.current = false;
       setIsInteracting(false);
       interactEndTimerRef.current = null;
+      // Motion has stopped — re-write the world transform in crisp mode so the
+      // WebKit path drops its compositor layer and re-rasterizes text sharply at
+      // the settled scale. No-op on the Blink path (CSS `zoom` is already crisp).
+      writeTransform(vpRef.current, { crisp: true });
     }, 220);
-  }, []);
+  }, [writeTransform]);
 
   const applyViewport = useCallback(
     (next: ViewportState) => {
@@ -866,7 +906,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
     const initial = getInitial();
     if (initial) {
       vpRef.current = { ...initial };
-      writeTransform(vpRef.current);
+      writeTransform(vpRef.current, { crisp: true });
       setViewportPublished({ ...vpRef.current });
     }
     // If host has no size yet, refit when ResizeObserver delivers one.
@@ -879,7 +919,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
         hadSize = true;
         const refit = computeFitRef.current();
         vpRef.current = { ...refit };
-        writeTransform(vpRef.current);
+        writeTransform(vpRef.current, { crisp: true });
         setViewportPublished({ ...vpRef.current });
       }
     });
@@ -917,6 +957,11 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       lastY: number;
     } = { active: false, pointerId: -1, lastX: 0, lastY: 0 };
 
+    // Safari/WKWebView trackpad pinch — see gesture* handlers below. While a
+    // native gesture is in flight, the ctrlKey-wheel branch defers to it so a
+    // pinch doesn't double-apply (WebKit may emit both event streams).
+    const gesture = { active: false, lastScale: 1 };
+
     const onWheel = (e: WheelEvent) => {
       e.preventDefault();
       const rect = host.getBoundingClientRect();
@@ -926,6 +971,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       // without a physical Ctrl press — so the same branch covers both
       // Ctrl+wheel (mouse) and pinch-zoom (trackpad).
       if (e.ctrlKey || e.metaKey) {
+        if (gesture.active) return; // WebKit GestureEvent owns this pinch
         // T32 — clamp deltaY into [-50, 50] before the exp() to bring
         // trackpad-pinch (small per-frame delta) and mouse-wheel (one
         // notch = ±100) onto the same perceived-speed curve. Mouse-wheel
@@ -951,6 +997,38 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       panBy(-e.deltaX, -e.deltaY);
     };
 
+    // Safari/WKWebView-only trackpad pinch. WebKit exposes the native pinch via
+    // `gesture*` events (absent in Blink — these listeners simply never fire
+    // there). Two reasons to handle them: (1) preventDefault suppresses Safari's
+    // built-in page-zoom that would otherwise fight the canvas; (2) `e.scale`
+    // (cumulative since gesturestart) gives a smoother, 1:1 pinch than reverse-
+    // engineering it from synthesized ctrlKey-wheel deltas. The onWheel ctrlKey
+    // branch defers while `gesture.active` so a pinch is never applied twice.
+    type SafariGestureEvent = Event & { scale: number; clientX: number; clientY: number };
+    const onGestureStart = (ev: Event) => {
+      ev.preventDefault();
+      const e = ev as SafariGestureEvent;
+      gesture.active = true;
+      gesture.lastScale = e.scale || 1;
+    };
+    const onGestureChange = (ev: Event) => {
+      ev.preventDefault();
+      if (!gesture.active) return;
+      const e = ev as SafariGestureEvent;
+      const rect = host.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const s = e.scale || 1;
+      const factor = gesture.lastScale > 0 ? s / gesture.lastScale : 1;
+      gesture.lastScale = s;
+      zoomAt(factor, cx, cy);
+    };
+    const onGestureEnd = (ev: Event) => {
+      ev.preventDefault();
+      gesture.active = false;
+      gesture.lastScale = 1;
+    };
+
     const onPointerDown = (e: PointerEvent) => {
       const isMiddle = e.button === 1;
       const isLeftWithSpace = e.button === 0 && spaceHeld.current;
@@ -1072,6 +1150,11 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
     host.addEventListener('pointermove', onPointerMove);
     host.addEventListener('pointerup', endPan);
     host.addEventListener('pointercancel', endPan);
+    // WebKit-only; no-ops elsewhere. passive:false so preventDefault can cancel
+    // Safari's native page-zoom.
+    host.addEventListener('gesturestart', onGestureStart, { passive: false });
+    host.addEventListener('gesturechange', onGestureChange, { passive: false });
+    host.addEventListener('gestureend', onGestureEnd, { passive: false });
 
     return () => {
       doc.removeEventListener('wheel', captureWheel, { capture: true } as EventListenerOptions);
@@ -1082,6 +1165,9 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       host.removeEventListener('pointermove', onPointerMove);
       host.removeEventListener('pointerup', endPan);
       host.removeEventListener('pointercancel', endPan);
+      host.removeEventListener('gesturestart', onGestureStart);
+      host.removeEventListener('gesturechange', onGestureChange);
+      host.removeEventListener('gestureend', onGestureEnd);
     };
   }, [hostRef]);
 
@@ -2035,6 +2121,7 @@ export function DCMiniMap() {
   ensureOverlayStyles();
   const world = useWorldContext();
   const controller = useViewportControllerContext();
+  const chrome = useChromeVisibility();
   const bodyRef = useRef<HTMLDivElement | null>(null);
   // 132 - 22 (header) = 110 body height; width matches the chrome.
   const MAP_W = 196;
@@ -2045,6 +2132,9 @@ export function DCMiniMap() {
   });
 
   if (!world || !controller) return null;
+  // Menubar "View ▸ Minimap" toggle + Presentation Mode (which hides ALL
+  // chrome). `chrome` is null in a bare DS specimen — then default-visible.
+  if (chrome && (!chrome.minimap || chrome.present)) return null;
 
   const geometry = computeMiniMapGeometry(world.artboards, MAP_W, MAP_BODY_H);
   const host = world.hostRef.current;
@@ -2165,7 +2255,10 @@ DCMiniMap.displayName = 'DCMiniMap';
 export function DCZoomToolbar() {
   ensureOverlayStyles();
   const controller = useViewportControllerContext();
+  const chrome = useChromeVisibility();
   if (!controller) return null;
+  // Menubar "View ▸ Zoom controls" toggle + Presentation Mode.
+  if (chrome && (!chrome.zoom || chrome.present)) return null;
   const pct = Math.round(controller.viewport.zoom * 100);
   return (
     <div className="dc-zoom-tb" role="toolbar" aria-label="Zoom">