@1agh/maude 0.30.0 → 0.31.0

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">

package/apps/studio/canvas-list-watch.ts

@@ -0,0 +1,177 @@
+// External-canvas list watcher.
+//
+// The browser file tree re-reads `/_index-data` only when it receives a
+// `canvas-list-update` WS message. Until now that message was emitted ONLY by
+// the dev-server's own create/delete API (`api.ts` createCanvas / deleteCanvas),
+// so a canvas written straight to disk by something OUTSIDE the server — the ACP
+// chat agent running `/design:new`, an agent `Write`, `git checkout`, a terminal
+// `cp`/`rm` — never refreshed the tree. The file landed on disk, `fs:any` fired,
+// the HMR/activity/git-status subscribers reacted, but the tree stayed stale
+// until a full page reload. See `.ai/logs/rca/issue-acp-new-canvas-not-in-filetree.md`.
+//
+// This is the symmetric server-side counterpart: subscribe to `fs:any`, and when
+// the set of openable canvas files under the configured canvas groups changes
+// (add or remove), emit the same `canvas-list-update` the API does. The client's
+// handler just calls `loadTree()` (a wholesale `/_index-data` re-read), so a
+// nudge is all that's required — the diff makes it precise enough to skip every
+// non-structural edit (a canvas body save, a `.meta.json` rewrite) and so avoid
+// thrashing the tree on every `/design:edit`.
+//
+// Bun-native (DDR-009); the canvas listing reuses `findHtmlFiles` and the slug
+// reuses `canvasSlugFromRel`, both from api.ts — the single source of truth that
+// also backs `/_index-data` and the UI create/delete emits (no duplicated
+// SKIP_DIRS / group rules to drift; DDR-115 runtime-state exclusions come along
+// for free because `findHtmlFiles` already skips `_`-prefixed + SKIP_DIRS paths).
+
+import path from 'node:path';
+
+import { canvasSlugFromRel, findHtmlFiles, SKIP_DIRS } from './api.ts';
+import type { Context } from './context.ts';
+
+/** Burst-collapse window. A new canvas writes both `.tsx` and `.meta.json`; a
+ * git checkout touches many files at once — one snapshot per quiet window. */
+export const CANVAS_LIST_DEBOUNCE_MS = 150;
+
+/**
+ * Cheap gate: is this `fs:any` path worth a (debounced) full recompute? True
+ * only for an openable canvas file (`.tsx` / `.html`) that lives under one of
+ * the configured canvas groups and carries no `_`-prefixed or SKIP_DIRS segment.
+ * A loose gate just means an occasional needless recompute — never a wrong emit,
+ * since `snapshot()` is authoritative. Input is design-root-relative (the shape
+ * fs-watch emits, e.g. `ui/project/Pricing.tsx`).
+ *
+ * Pure — no disk access. Accepts back-slash or forward-slash input.
+ */
+export function isCanvasCandidate(rel: string, groupPaths: string[]): boolean {
+  if (typeof rel !== 'string') return false;
+  const p = rel.replace(/\\/g, '/').replace(/^\/+/, '');
+  if (!p) return false;
+  const low = p.toLowerCase();
+  if (!low.endsWith('.tsx') && !low.endsWith('.html')) return false;
+  const segs = p.split('/');
+  for (const s of segs) {
+    if (!s) return false;
+    if (s.startsWith('_')) return false;
+    if (SKIP_DIRS.has(s)) return false;
+  }
+  return groupPaths.some((gp) => {
+    const g = gp.replace(/^\/+|\/+$/g, '');
+    return !!g && (p === g || p.startsWith(`${g}/`));
+  });
+}
+
+export interface CanvasListWatch {
+  /** Resolves once the initial canvas set has been seeded (no emit). */
+  readonly ready: Promise<void>;
+  /** Test seam — force a recompute + diff + emit. Serialized after the seed and
+   * any in-flight refresh, so a create observed between calls always diffs
+   * against the pre-create set. */
+  refresh(): Promise<void>;
+  /** Current known openable-canvas set (design-rel-prefixed). For assertions. */
+  readonly known: ReadonlySet<string>;
+  stop(): void;
+}
+
+export interface CanvasListWatchOptions {
+  debounceMs?: number;
+}
+
+export function createCanvasListWatch(
+  ctx: Context,
+  opts: CanvasListWatchOptions = {}
+): CanvasListWatch {
+  const debounceMs = opts.debounceMs ?? CANVAS_LIST_DEBOUNCE_MS;
+  // Mirror /_index-data's group set exactly (cfg.canvasGroups) — NOT api.ts's
+  // create-allowlist, which additionally permits cfg.newCanvasDir. On the
+  // default config newCanvasDir IS a group; a config pointing it outside
+  // canvasGroups would have the canvas absent from /_index-data too, so the
+  // watcher stays consistent with what the tree can actually show.
+  const groupPaths = (ctx.cfg.canvasGroups ?? []).map((g) => g.path);
+
+  // null = not yet seeded; the first refresh captures the baseline and emits
+  // nothing (canvases already on disk at boot aren't "added").
+  let known: Set<string> | null = null;
+  let chain: Promise<void> = Promise.resolve();
+  let pending: ReturnType<typeof setTimeout> | null = null;
+
+  async function snapshot(): Promise<Set<string>> {
+    const out = new Set<string>();
+    for (const g of ctx.cfg.canvasGroups ?? []) {
+      const groupAbs = path.join(ctx.paths.designRoot, g.path);
+      const groupRel = path.posix.join(ctx.paths.designRel, g.path);
+      let files: string[];
+      try {
+        files = await findHtmlFiles(groupAbs, groupRel);
+      } catch {
+        continue; // group dir missing / unreadable — treat as empty
+      }
+      for (const f of files) out.add(f);
+    }
+    return out;
+  }
+
+  function emit(action: 'added' | 'removed', rel: string) {
+    // `rel` from findHtmlFiles is designRel-prefixed (`.design/ui/X.tsx`); strip
+    // the prefix so the wire shape matches api.ts's group-relative emit
+    // (`ui/X.tsx`). The client IGNORES the payload entirely — it just re-reads
+    // /_index-data — so rel/slug are advisory only. SECURITY TRIPWIRE: any FUTURE
+    // consumer of this event must treat rel/slug as ATTACKER-CONTROLLED (agent /
+    // `git checkout`-authored filenames) and must NOT feed them to a
+    // render/open/build sink without re-validating against /_index-data.
+    const prefix = `${ctx.paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
+    const relOut = rel.startsWith(prefix) ? rel.slice(prefix.length) : rel;
+    ctx.bus.emit('canvas-list-update', {
+      action,
+      rel: relOut,
+      slug: canvasSlugFromRel(rel, ctx.paths.designRel),
+    });
+  }
+
+  async function doRefresh(): Promise<void> {
+    const next = await snapshot();
+    if (known === null) {
+      known = next; // seed — no emit
+      return;
+    }
+    for (const rel of next) if (!known.has(rel)) emit('added', rel);
+    for (const rel of known) if (!next.has(rel)) emit('removed', rel);
+    known = next;
+  }
+
+  // Serialize every recompute through one chain so the boot-time seed always
+  // runs first and concurrent snapshots can't race a create into a missed diff.
+  function refresh(): Promise<void> {
+    chain = chain.then(doRefresh, doRefresh);
+    return chain;
+  }
+
+  const ready = refresh(); // seed at construction
+
+  function schedule() {
+    if (pending) clearTimeout(pending);
+    pending = setTimeout(() => {
+      pending = null;
+      void refresh();
+    }, debounceMs);
+  }
+
+  const off = ctx.bus.on('fs:any', (rel: string) => {
+    if (!isCanvasCandidate(rel, groupPaths)) return;
+    schedule();
+  });
+
+  function stop() {
+    off();
+    if (pending) clearTimeout(pending);
+    pending = null;
+  }
+
+  return {
+    ready,
+    refresh,
+    get known() {
+      return known ?? new Set<string>();
+    },
+    stop,
+  };
+}

package/apps/studio/canvas-shell.tsx

@@ -82,6 +82,7 @@ import {
   useAnnotationSelectionOptional,
 } from './use-annotation-selection.tsx';
 import { AnnotationsVisibilityProvider } from './use-annotations-visibility.tsx';
+import { ChromeVisibilityProvider, useChromeVisibility } from './use-chrome-visibility.tsx';
 import { useCollab } from './use-collab.tsx';
 import { useCursorModifiers } from './use-cursor-modifiers.tsx';
 import { useKeyboardDiscipline } from './use-keyboard-discipline.tsx';
@@ -481,7 +482,9 @@ export function CanvasShell({
     <MaybeSelectionSetProvider>
       <AnnotationSelectionProvider>
         <AnnotationsVisibilityProvider>
-          <CanvasCore hostRef={hostRef}>{children}</CanvasCore>
+          <ChromeVisibilityProvider>
+            <CanvasCore hostRef={hostRef}>{children}</CanvasCore>
+          </ChromeVisibilityProvider>
         </AnnotationsVisibilityProvider>
       </AnnotationSelectionProvider>
     </MaybeSelectionSetProvider>
@@ -1371,6 +1374,11 @@ function CanvasRouter({
   const undoStack = useUndoStack();
   // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
   const zoomController = useViewportControllerContext();
+  // Shell View-menu chrome-visibility bridge (dgn:'view-chrome') — minimap /
+  // zoom-controls toggles + Presentation Mode. Drives the shared chrome store
+  // the floating chrome (DCMiniMap, DCZoomToolbar, ToolPalette, AnnotationsLayer)
+  // consumes.
+  const chromeCtx = useChromeVisibility();
 
   // Hover state drives the floating .dc-cv-halo--hover overlay. The overlay
   // itself reads getBoundingClientRect on every rAF tick to follow pan/zoom.
@@ -1539,10 +1547,22 @@ function CanvasRouter({
         else if (op === 'actual') zoomController.reset();
         return;
       }
+      // Shell View-menu chrome toggles + Presentation Mode. Only the fields the
+      // shell sends are merged, so a `{ present: true }` enter keeps the user's
+      // individual minimap/zoom toggles for the eventual exit.
+      if (m.dgn === 'view-chrome' && chromeCtx) {
+        const mm = m as { minimap?: boolean; zoom?: boolean; present?: boolean };
+        const patch: { minimap?: boolean; zoom?: boolean; present?: boolean } = {};
+        if (typeof mm.minimap === 'boolean') patch.minimap = mm.minimap;
+        if (typeof mm.zoom === 'boolean') patch.zoom = mm.zoom;
+        if (typeof mm.present === 'boolean') patch.present = mm.present;
+        chromeCtx.setChrome(patch);
+        return;
+      }
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [selSet, annotSel, setTool, undoStack, zoomController]);
+  }, [selSet, annotSel, setTool, undoStack, zoomController, chromeCtx]);
 
   // Phase 12 (DDR-103) — double-click a LEAF-TEXT element (children all text
   // nodes) to edit its copy in place. Commit (blur / Enter) posts `dgn:edit-text`