@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/text-caret.ts

@@ -0,0 +1,239 @@
+/**
+ * @file       text-caret.ts — shared custom blinking caret for every editable
+ *             text surface (artboard inline edit + the four annotation editors)
+ * @purpose    Native caret BLINK is unreliable in WebKit under the transformed
+ *             `.dc-world` (a compositing trigger on/near the editable freezes
+ *             the blink to a static line — see CARET_FIX_STYLE in
+ *             annotations-layer.tsx for the translateZ(0) post-mortem), and
+ *             blink is temporal, so no automated tool can assert it. This
+ *             module replaces the native caret with a CSS-animated
+ *             `[data-maude-caret]` element: engine-independent, identical on
+ *             every surface, and harness-assertable (presence + animationName
+ *             + position). The native caret is hidden via
+ *             `caret-color: transparent` while mounted.
+ *
+ * Positioning model: the caret element is appended to the document BODY with
+ * `position: fixed` and placed from the live selection's client rects —
+ * viewport coords, already post-transform, so the world's pan/zoom needs no
+ * special-casing. Positioning is driven THREE ways, deliberately redundant:
+ * a synchronous first paint on mount, the discrete event set (selectionchange
+ * / input / keyup / focus / blur / scroll), and a rAF loop for pan/zoom
+ * (which fires no DOM event). rAF alone is NOT enough — WKWebView pauses rAF
+ * for occluded windows (measured in the desktop-e2e harness), which would
+ * leave the caret invisible. Style is only touched on an actual rect change,
+ * and a change restarts the blink cycle exactly like a native caret (solid
+ * while typing/moving).
+ */
+
+/**
+ * Place a collapsed caret inside a contentEditable at a viewport point —
+ * `caretRangeFromPoint` (WebKit/Chromium), `caretPositionFromPoint`
+ * (standard) fallback — THE unified entry-placement chain for the artboard
+ * inline editor and every annotation editor. A point that resolves outside
+ * the editable (click on padding / another element) is a miss. Without a
+ * point, or on a miss with `fallbackToSelectAll`, selects the whole content
+ * (the right default for keyboard entry, where select-all-then-retype is the
+ * rename convention). Returns true when a caret/selection was applied.
+ */
+export function placeCaretAt(
+  editable: HTMLElement,
+  win: Window,
+  point?: { x: number; y: number },
+  fallbackToSelectAll = true
+): boolean {
+  const doc = editable.ownerDocument as Document & {
+    caretRangeFromPoint?: (x: number, y: number) => Range | null;
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+  };
+  try {
+    let range: Range | null = null;
+    if (point) {
+      if (typeof doc.caretRangeFromPoint === 'function') {
+        range = doc.caretRangeFromPoint(point.x, point.y);
+      } else if (typeof doc.caretPositionFromPoint === 'function') {
+        const pos = doc.caretPositionFromPoint(point.x, point.y);
+        if (pos) {
+          range = doc.createRange();
+          range.setStart(pos.offsetNode, pos.offset);
+          range.collapse(true);
+        }
+      }
+      if (range && !editable.contains(range.startContainer)) range = null;
+    }
+    if (!range) {
+      if (!fallbackToSelectAll) return false;
+      range = doc.createRange();
+      range.selectNodeContents(editable);
+    }
+    const sel = win.getSelection();
+    if (!sel) return false;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    return true;
+  } catch {
+    /* selection API unavailable */
+    return false;
+  }
+}
+
+const STYLE_ID = 'maude-caret-css';
+
+const CARET_CSS = `
+[data-maude-caret] {
+  animation: maude-caret-blink 1s steps(1, end) infinite;
+}
+@keyframes maude-caret-blink {
+  0%, 49.9% { opacity: 1; }
+  50%, 99.9% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* No blink, but the caret stays visible — position is still the signal. */
+  [data-maude-caret] { animation: none; }
+}
+`;
+
+function ensureCaretStyles(doc: Document): void {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = CARET_CSS;
+  doc.head.appendChild(style);
+}
+
+interface CaretRect {
+  x: number;
+  y: number;
+  h: number;
+}
+
+/** Resolve where the caret should paint, in viewport coords — or null when it
+ * should hide (no collapsed selection inside the editable / editable not
+ * focused / a range selection is active, where the native highlight is the
+ * affordance). */
+function caretRectFor(editable: HTMLElement, win: Window): CaretRect | null {
+  const doc = editable.ownerDocument;
+  const active = doc.activeElement;
+  if (active !== editable && !editable.contains(active)) return null;
+  const sel = win.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+  const node = sel.anchorNode;
+  if (!node || !editable.contains(node)) return null;
+  const range = sel.getRangeAt(0).cloneRange();
+  range.collapse(true);
+  // A collapsed range usually has one zero-width client rect; WebKit sometimes
+  // returns none (empty text node / line start) — getBoundingClientRect is the
+  // second try before falling back to the editable's own box metrics.
+  let r: DOMRect | null = range.getClientRects()[0] ?? null;
+  if (!r || (r.height === 0 && r.y === 0 && r.x === 0)) {
+    const br = range.getBoundingClientRect();
+    if (br && br.height > 0) r = br;
+  }
+  if (r && r.height > 0) return { x: r.left, y: r.top, h: r.height };
+  // Empty editable — no rect exists anywhere. Derive a caret box from the
+  // editable's padding box + line metrics. (The annotation editors avoid this
+  // path by mounting with a zero-width-space JUMP_SENTINEL, but the artboard
+  // editor can reach it by deleting all text.)
+  const er = editable.getBoundingClientRect();
+  const cs = win.getComputedStyle(editable);
+  const fs = Number.parseFloat(cs.fontSize) || 14;
+  const lh = cs.lineHeight === 'normal' ? fs * 1.25 : Number.parseFloat(cs.lineHeight) || fs * 1.25;
+  const padL = Number.parseFloat(cs.paddingLeft) || 0;
+  const padT = Number.parseFloat(cs.paddingTop) || 0;
+  return { x: er.left + padL, y: er.top + padT, h: lh };
+}
+
+/**
+ * Mount the custom blinking caret onto a contentEditable. Returns a disposer
+ * that removes the caret element and restores the editable's own caret-color.
+ * One mount per editing session — enter-edit mounts, teardown disposes.
+ */
+export function mountCaret(editable: HTMLElement, win: Window): () => void {
+  const doc = editable.ownerDocument;
+  if (!doc.body) return () => {};
+  ensureCaretStyles(doc);
+
+  const caret = doc.createElement('span');
+  caret.setAttribute('data-maude-caret', '1');
+  caret.setAttribute('aria-hidden', 'true');
+  Object.assign(caret.style, {
+    position: 'fixed',
+    left: '0px',
+    top: '0px',
+    width: '2px',
+    height: '16px',
+    background: 'var(--maude-hud-accent, #4a63e7)',
+    borderRadius: '1px',
+    pointerEvents: 'none',
+    zIndex: '9999',
+    display: 'none',
+  } satisfies Partial<CSSStyleDeclaration>);
+  doc.body.appendChild(caret);
+
+  const prevCaretColor = editable.style.caretColor;
+  editable.style.caretColor = 'transparent';
+
+  let shown = false;
+  let last: CaretRect = { x: -1, y: -1, h: -1 };
+
+  const restartBlink = (): void => {
+    // Re-trigger the stylesheet animation from 0% so the caret is solid right
+    // after a move/keystroke — the native caret's exact behavior.
+    caret.style.animation = 'none';
+    void caret.offsetWidth; // reflow flushes the 'none'
+    caret.style.animation = '';
+  };
+
+  const position = (): void => {
+    const rc = caretRectFor(editable, win);
+    if (!rc) {
+      if (shown) {
+        caret.style.display = 'none';
+        shown = false;
+      }
+    } else {
+      if (rc.x !== last.x || rc.y !== last.y || rc.h !== last.h) {
+        caret.style.left = `${rc.x - 0.5}px`;
+        caret.style.top = `${rc.y}px`;
+        caret.style.height = `${Math.max(8, rc.h)}px`;
+        last = rc;
+        restartBlink();
+      }
+      if (!shown) {
+        caret.style.display = 'block';
+        shown = true;
+      }
+    }
+  };
+
+  // Synchronous first paint + discrete events carry the caret even when rAF
+  // is throttled (WKWebView pauses rAF for occluded windows — measured in the
+  // desktop-e2e harness); the rAF loop on top tracks pan/zoom, which fires no
+  // DOM event at all.
+  const onUpdate = (): void => position();
+  doc.addEventListener('selectionchange', onUpdate);
+  editable.addEventListener('input', onUpdate);
+  editable.addEventListener('keyup', onUpdate);
+  editable.addEventListener('focus', onUpdate);
+  editable.addEventListener('blur', onUpdate);
+  win.addEventListener('scroll', onUpdate, true);
+  let raf = 0;
+  const tick = (): void => {
+    position();
+    raf = win.requestAnimationFrame(tick);
+  };
+  position();
+  raf = win.requestAnimationFrame(tick);
+
+  return () => {
+    win.cancelAnimationFrame(raf);
+    doc.removeEventListener('selectionchange', onUpdate);
+    editable.removeEventListener('input', onUpdate);
+    editable.removeEventListener('keyup', onUpdate);
+    editable.removeEventListener('focus', onUpdate);
+    editable.removeEventListener('blur', onUpdate);
+    win.removeEventListener('scroll', onUpdate, true);
+    caret.remove();
+    editable.style.caretColor = prevCaretColor;
+  };
+}

package/apps/studio/tool-palette.tsx

@@ -287,17 +287,22 @@ const SHAPE_KINDS: ReadonlyArray<{ kind: ShapeKind; label: string }> = [
  * when the user hasn't right-clicked a specific element). Growth-only: an
  * artboard's `<article data-dc-screen>` carries NO `data-cd-id` of its own
  * (`DCArtboard` doesn't forward it to the DOM — only its SOURCE JSX tag is
- * stamped, unresolvable from here), so `applyInsertElement`'s `refId` can't
- * target the artboard directly. Anchor on the artboard's LAST direct child
- * that DOES carry a `data-cd-id` and insert `position:'after'` it — the exact
- * relation the context-menu's element-relative insert already uses. Returns
- * `null` for an empty (or artboard-less) canvas — a documented v1 limit; the
- * per-element context-menu "Insert ▸ …" still works there once a first
- * element exists. `doc` is injectable for testing without a real iframe.
+ * stamped, unresolvable from here), so the primary anchor is the artboard's
+ * LAST direct child that DOES carry a `data-cd-id`, inserted `after` it — the
+ * exact relation the context-menu's element-relative insert already uses.
+ * When the artboard has NO such child yet (fresh/emptied artboard — the bug
+ * this fallback fixes, was previously a silent no-op), fall back to the
+ * artboard's own `data-dc-screen` id (its `DCArtboard id` prop verbatim) and
+ * insert `inside-end` of it directly — `applyInsertElementIntoArtboard`
+ * addresses the `<DCArtboard>` JSX node by that same id, mirroring
+ * `applyResizeArtboard`/`applyDeleteArtboard`. Returns `null` only when there
+ * is no artboard at all (or no `.dc-artboard-body` wrapper) — nothing to
+ * anchor on, artboard-less canvas. `doc` is injectable for testing without a
+ * real iframe.
  */
 export function resolveInsertAnchor(
   doc: Document = document
-): { refId: string; position: 'after' } | null {
+): { refId: string; position: 'after' } | { artboardId: string; position: 'inside-end' } | null {
   const current = doc.querySelector('[data-dc-screen][aria-current="true"]');
   const artboardEl = current ?? doc.querySelector('[data-dc-screen]');
   if (!artboardEl) return null;
@@ -306,7 +311,9 @@ export function resolveInsertAnchor(
   const kids = Array.from(body.children).reverse();
   const last = kids.find((el) => el.hasAttribute('data-cd-id'));
   const refId = last?.getAttribute('data-cd-id');
-  return refId ? { refId, position: 'after' } : null;
+  if (refId) return { refId, position: 'after' };
+  const artboardId = artboardEl.getAttribute('data-dc-screen');
+  return artboardId ? { artboardId, position: 'inside-end' } : null;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -349,25 +356,30 @@ export function ToolPalette() {
   }, [tool]);
 
   // Stage I3 tail — insert a Div/Text/Image relative to the active artboard's
-  // last existing element (`resolveInsertAnchor`). Same request verbs the
+  // last existing element, or — empty-artboard fallback — as a child of the
+  // artboard itself (`resolveInsertAnchor`). Same request verbs the
   // context-menu's per-element "Insert ▸ …" already posts (`insert-request` /
-  // `insert-image-request`, main-origin shell WRITES — DDR-054); a null anchor
-  // (empty/artboard-less canvas) is a silent no-op — a documented v1 limit.
+  // `insert-image-request`, main-origin shell WRITES — DDR-054), extended with
+  // an `artboardId` field for the fallback case; a null anchor is still a
+  // no-op for div/text (nothing to insert into) but NOT for image —
+  // feature-bulk-media-insert still posts `insert-image-request` with no
+  // refId/artboardId, so an artboard-less canvas opens the picker (in
+  // annotation-only mode, Task 7) instead of silently doing nothing.
   const insertViaPalette = (kind: 'div' | 'text' | 'image') => {
     setInsertOpen(false);
     const anchor = resolveInsertAnchor();
-    if (!anchor) return;
+    if (!anchor && kind !== 'image') return;
+    const anchorFields =
+      anchor == null
+        ? {}
+        : 'artboardId' in anchor
+          ? { artboardId: anchor.artboardId, position: anchor.position }
+          : { refId: anchor.refId, position: anchor.position };
     try {
       if (kind === 'image') {
-        window.parent.postMessage(
-          { dgn: 'insert-image-request', refId: anchor.refId, position: anchor.position },
-          '*'
-        );
+        window.parent.postMessage({ dgn: 'insert-image-request', ...anchorFields }, '*');
       } else {
-        window.parent.postMessage(
-          { dgn: 'insert-request', refId: anchor.refId, position: anchor.position, kind },
-          '*'
-        );
+        window.parent.postMessage({ dgn: 'insert-request', ...anchorFields, kind }, '*');
       }
     } catch {
       /* detached / cross-origin teardown */
@@ -513,6 +525,22 @@ export function ToolPalette() {
             </div>
           ) : null}
         </span>
+        <button
+          type="button"
+          aria-label="Stickers"
+          title="Stickers — searchable sticker picker"
+          onClick={() => {
+            try {
+              window.parent.postMessage({ dgn: 'open-sticker-picker' }, '*');
+            } catch {
+              /* detached / cross-origin teardown */
+            }
+          }}
+        >
+          <span aria-hidden="true" style={{ fontSize: 16, lineHeight: 1 }}>
+            🙂
+          </span>
+        </button>
         <button
           type="button"
           aria-label="Export (⌘E)"

package/apps/studio/ui-prefs.ts

@@ -0,0 +1,130 @@
+// ui-prefs.ts — disk-backed UI / view preferences (feature-unified-settings-modal).
+//
+// The Settings modal's non-secret UI prefs (theme + the Canvas & View toggles)
+// persist here so they survive a restart AND a cleared browser localStorage
+// (the native WKWebView shell is the case that motivated an explicit on-disk
+// store rather than trusting localStorage alone). Stored GLOBALLY per user, not
+// per-project — these are user preferences, not canvas state — at
+// `~/.config/maude/prefs.json` (XDG-aware, same location discipline as
+// generation/keys.ts's keys.json and sync/hubs-config.ts's hubs.json).
+//
+// NON-SECRET by construction: this file only ever holds boolean/enum view
+// toggles. It is never versioned and never served to a canvas — the GET/POST
+// routes are MAIN-ORIGIN ONLY (privileged), like /_api/generate/prefs.
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+
+/** The dockable shell panels the Layout tab can move between the two sides. */
+export const DOCK_PANEL_IDS = [
+  'tree',
+  'layers',
+  'inspector',
+  'comments',
+  'changes',
+  'assistant',
+] as const;
+export type DockPanelId = (typeof DOCK_PANEL_IDS)[number];
+export type DockSide = 'left' | 'right';
+export type PanelSides = Record<DockPanelId, DockSide>;
+
+export interface UiPrefs {
+  theme: 'light' | 'dark';
+  minimap: boolean;
+  zoom: boolean;
+  annotations: boolean;
+  autoOpenInspector: boolean;
+  /** Which side each dockable panel lives on (feature-configurable-panel-docking). */
+  panelSides: PanelSides;
+  /** Whether Layers is its own dockable panel or a tab inside the Inspector. */
+  layersMode: 'separate' | 'in-inspector';
+}
+
+// Defaults MUST agree with app.jsx's initial state (THEME default 'dark',
+// MINIMAP/ZOOMCTL false, annotations on, auto-open-inspector on) and with
+// use-chrome-visibility.tsx's provider defaults. Panel defaults mirror the
+// pre-docking shell: tree + layers on the left, everything else on the right;
+// Layers ships as its own panel (`separate`), docked left.
+export const PANEL_SIDES_DEFAULTS: PanelSides = {
+  tree: 'left',
+  layers: 'left',
+  inspector: 'right',
+  comments: 'right',
+  changes: 'right',
+  assistant: 'right',
+};
+export const UI_PREFS_DEFAULTS: UiPrefs = {
+  theme: 'dark',
+  minimap: false,
+  zoom: false,
+  annotations: true,
+  autoOpenInspector: true,
+  panelSides: { ...PANEL_SIDES_DEFAULTS },
+  layersMode: 'separate',
+};
+
+/** Resolve the on-disk path to prefs.json (mirrors keys.ts's XDG logic). */
+export function uiPrefsPath(): string {
+  if (process.env.MAUDE_UI_PREFS_PATH) return process.env.MAUDE_UI_PREFS_PATH;
+  const xdg = process.env.XDG_CONFIG_HOME;
+  const base = xdg && xdg.length > 0 ? xdg : join(homedir(), '.config');
+  return join(base, 'maude', 'prefs.json');
+}
+
+function coercePanelSides(raw: unknown): PanelSides {
+  const o =
+    raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as Record<string, unknown>) : {};
+  const out = { ...PANEL_SIDES_DEFAULTS };
+  for (const id of DOCK_PANEL_IDS) {
+    if (o[id] === 'left' || o[id] === 'right') out[id] = o[id] as DockSide;
+  }
+  return out;
+}
+
+function coerce(raw: unknown): UiPrefs {
+  const o =
+    raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as Record<string, unknown>) : {};
+  const bool = (v: unknown, d: boolean) => (typeof v === 'boolean' ? v : d);
+  return {
+    theme: o.theme === 'light' || o.theme === 'dark' ? o.theme : UI_PREFS_DEFAULTS.theme,
+    minimap: bool(o.minimap, UI_PREFS_DEFAULTS.minimap),
+    zoom: bool(o.zoom, UI_PREFS_DEFAULTS.zoom),
+    annotations: bool(o.annotations, UI_PREFS_DEFAULTS.annotations),
+    autoOpenInspector: bool(o.autoOpenInspector, UI_PREFS_DEFAULTS.autoOpenInspector),
+    panelSides: coercePanelSides(o.panelSides),
+    layersMode: o.layersMode === 'in-inspector' ? 'in-inspector' : UI_PREFS_DEFAULTS.layersMode,
+  };
+}
+
+/** Current UI prefs merged over the defaults (defaults when missing/unreadable). */
+export function readUiPrefs(): UiPrefs {
+  const path = uiPrefsPath();
+  if (!existsSync(path)) return { ...UI_PREFS_DEFAULTS };
+  try {
+    return coerce(JSON.parse(readFileSync(path, 'utf8')));
+  } catch {
+    return { ...UI_PREFS_DEFAULTS };
+  }
+}
+
+/**
+ * Persist a partial patch over the on-disk prefs (only the provided keys change;
+ * every other stored value is preserved). Returns the merged result. Best-effort
+ * — a write failure throws so the route can surface it.
+ */
+export function writeUiPrefs(patch: Partial<UiPrefs>): UiPrefs {
+  const cur = readUiPrefs();
+  // panelSides is deep-merged so a partial patch (one panel moved) preserves the
+  // other panels' sides instead of resetting them to defaults via coerce.
+  const merged: Partial<UiPrefs> = {
+    ...cur,
+    ...patch,
+    panelSides: { ...cur.panelSides, ...(patch.panelSides ?? {}) },
+  };
+  const next = coerce(merged);
+  const path = uiPrefsPath();
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, `${JSON.stringify(next, null, 2)}\n`);
+  return next;
+}

package/apps/studio/undo-stack.ts

@@ -256,17 +256,109 @@ function ensureStoreMap(): Map<string, UndoStackState> {
   return host.__maude_undo_stacks;
 }
 
+// ── Durable layer: sessionStorage (DDR-050 follow-up) ────────────────────────
+// The window/window.top Map above is the fast in-memory path, but it lives on a
+// window object — and in the segregated canvas origin (DDR-054) that IS the
+// canvas iframe's OWN window, which a full iframe reload destroys. An artboard
+// TEXT edit rewrites the `.tsx` → HMR reload of the canvas iframe → the Map is
+// wiped → Cmd+Z after the edit finds an empty stack. (Annotation edits write a
+// sidecar SVG, never reload the iframe, so their history survives — the exact
+// asymmetry users hit.) sessionStorage is per-ORIGIN and survives a reload, so
+// it's the durable backstop: every save mirrors here, every load falls back to
+// it when the Map misses (i.e. right after a reload rebuilt the window).
+const SS_PREFIX = 'maude-undo:';
+const SS_MAX_BYTES = 512 * 1024;
+
+function getSessionStore(): Storage | null {
+  try {
+    return typeof window !== 'undefined' && window.sessionStorage ? window.sessionStorage : null;
+  } catch {
+    return null; // sessionStorage can throw in sandboxed / disabled contexts
+  }
+}
+
+// DDR-054 §2g — strip dangerous keys at parse time so a poisoned sessionStorage
+// entry can't seed `__proto__` / `constructor` / `prototype` own-properties into
+// a rehydrated record (mirrors the sync-lane reviver, sync/codec.ts).
+function parseJsonSafe(s: string): unknown {
+  return JSON.parse(s, (key, value) => {
+    if (key === '__proto__' || key === 'constructor' || key === 'prototype') return undefined;
+    return value;
+  });
+}
+
+/** A well-formed persisted record — `kind`/`label` strings, a `payload`
+ *  property present. Rejects a malformed/poisoned sessionStorage entry BEFORE
+ *  it can reach the command rebuilder (defence-in-depth on the durable layer —
+ *  the apply boundary is already path-contained + inert-write-only). */
+function isCommandRecord(v: unknown): v is CommandRecord {
+  return (
+    !!v &&
+    typeof v === 'object' &&
+    typeof (v as CommandRecord).kind === 'string' &&
+    typeof (v as CommandRecord).label === 'string' &&
+    'payload' in (v as object)
+  );
+}
+
+function isUndoStackState(v: unknown): v is UndoStackState {
+  return (
+    !!v &&
+    typeof v === 'object' &&
+    Array.isArray((v as UndoStackState).past) &&
+    Array.isArray((v as UndoStackState).future) &&
+    (v as UndoStackState).past.every(isCommandRecord) &&
+    (v as UndoStackState).future.every(isCommandRecord)
+  );
+}
+
 /** Load saved state for a canvas file. Returns empty state on miss. */
 export function loadStackState(canvasFile: string): UndoStackState {
-  return ensureStoreMap().get(canvasFile) ?? createUndoStackState();
+  const map = ensureStoreMap();
+  const cached = map.get(canvasFile);
+  if (cached) return cached;
+  // Map missed (fresh window after an iframe reload) — restore from the durable
+  // per-origin layer, then warm the Map so subsequent reads are in-memory.
+  try {
+    const raw = getSessionStore()?.getItem(SS_PREFIX + canvasFile);
+    if (raw) {
+      const parsed = parseJsonSafe(raw);
+      if (isUndoStackState(parsed)) {
+        map.set(canvasFile, parsed);
+        return parsed;
+      }
+    }
+  } catch {
+    /* corrupt / unavailable — fall through to empty */
+  }
+  return createUndoStackState();
 }
 
-/** Persist state for a canvas file. */
+/** Persist state for a canvas file — to the in-memory Map AND the durable
+ *  sessionStorage layer, so it survives the HMR iframe reload a text edit
+ *  triggers. */
 export function saveStackState(canvasFile: string, state: UndoStackState): void {
   ensureStoreMap().set(canvasFile, state);
+  try {
+    const s = JSON.stringify(state);
+    if (s.length <= SS_MAX_BYTES) getSessionStore()?.setItem(SS_PREFIX + canvasFile, s);
+  } catch {
+    /* quota / serialization failure — the in-memory Map still holds it */
+  }
 }
 
 /** Test seam — wipe the cross-iframe store between bun:test cases. */
 export function _clearStackStore(): void {
   getStoreHost().__maude_undo_stacks = new Map();
+  try {
+    const ss = getSessionStore();
+    if (ss) {
+      for (let i = ss.length - 1; i >= 0; i--) {
+        const k = ss.key(i);
+        if (k?.startsWith(SS_PREFIX)) ss.removeItem(k);
+      }
+    }
+  } catch {
+    /* no sessionStorage in this runtime */
+  }
 }

package/apps/studio/use-annotation-resize.tsx

@@ -98,7 +98,7 @@ function ensureResizeStyles(): void {
   document.head.appendChild(s);
 }
 
-type Corner =
+export type Corner =
   | 'nw'
   | 'ne'
   | 'sw'
@@ -132,9 +132,9 @@ function isRotCorner(c: Corner): boolean {
  * `padDX/padDY` shift a dragged handle's cursor back ONTO the true bbox
  * corner/edge so the shape doesn't grow by the pad on first move.
  */
-const padDX = (c: Corner): number =>
+export const padDX = (c: Corner): number =>
   c === 'nw' || c === 'sw' || c === 'w' ? 1 : c === 'ne' || c === 'se' || c === 'e' ? -1 : 0;
-const padDY = (c: Corner): number =>
+export const padDY = (c: Corner): number =>
   c === 'nw' || c === 'ne' || c === 'n' ? 1 : c === 'sw' || c === 'se' || c === 's' ? -1 : 0;
 
 /** Stroke types that expose resize handles. Text inherits its anchor bbox. */
@@ -227,7 +227,7 @@ function rotatedAnchorShift(
  * The no-modifier branch is algebraically identical to the previous
  * min/max corner math (verified against the resize round-trip tests).
  */
-function bboxResize(
+export function bboxResize(
   bbox: { x: number; y: number; w: number; h: number },
   corner: Corner,
   wx: number,

package/apps/studio/use-canvas-media-drop.tsx

@@ -301,6 +301,12 @@ export async function uploadAndAnnounceMedia(
   showCanvasToast(`Added ${res.path}${warn} — snippet copied: ${snippet}`);
 }
 
+/** World-px stagger between cascaded drop targets so a batch Finder drop
+ * doesn't stack every clip on the exact same point. Exported — the picker's
+ * batched "Add as annotation" insert (annotations-layer.tsx) reuses the same
+ * stagger so both entry points cascade identically. */
+export const BATCH_DROP_CASCADE_PX = 28;
+
 export function useCanvasMediaDrop(opts: {
   enabled: boolean;
   screenToWorld: (cx: number, cy: number) => [number, number];
@@ -339,7 +345,40 @@ export function useCanvasMediaDrop(opts: {
     const onDrop = (e: DragEvent) => {
       body.classList.remove('dc-media-dragover');
       if (!e.dataTransfer) return;
-      const intent = classifyMediaPayload(payloadFromTransfer(e.dataTransfer));
+      const payload = payloadFromTransfer(e.dataTransfer);
+      // A multi-file Finder drop (select N clips → drag) previously fell through
+      // classifyMediaPayload's single-intent contract (designed for the
+      // drop-carries-both-a-file-and-a-uri-list case) and silently dropped every
+      // file past the first — forcing users to drop one at a time. Batch-dispatch
+      // every image/video/audio file here; classifyMediaPayload still owns the
+      // single-item path (including link/URL drops, which have no "files" list).
+      const mediaFiles = payload.files.filter(
+        (f) =>
+          typeof f.type === 'string' &&
+          (f.type.startsWith('image/') ||
+            f.type.startsWith('video/') ||
+            f.type.startsWith('audio/'))
+      );
+      if (mediaFiles.length > 1) {
+        e.preventDefault();
+        const [ox, oy] = screenToWorld(e.clientX, e.clientY);
+        mediaFiles.forEach((file, i) => {
+          const world: [number, number] = [
+            ox + i * BATCH_DROP_CASCADE_PX,
+            oy + i * BATCH_DROP_CASCADE_PX,
+          ];
+          const intent: MediaIntent = file.type.startsWith('image/')
+            ? { kind: 'image', file }
+            : {
+                kind: 'media',
+                file,
+                mediaKind: file.type.startsWith('video/') ? 'video' : 'audio',
+              };
+          dispatchIntent(intent, world);
+        });
+        return;
+      }
+      const intent = classifyMediaPayload(payload);
       if (!intent) return; // not media — leave the event for other handlers
       e.preventDefault();
       const world = screenToWorld(e.clientX, e.clientY);