@1agh/maude 1.3.0 → 1.4.0

package/apps/studio/annotation-edit-base.ts

@@ -0,0 +1,36 @@
+// Which SVG an annotation edit names as its base (DDR-241 accepted revisions).
+//
+// The project merges an annotation proposal element by element against the
+// text it was derived from. The canvas used to send the CANONICAL
+// re-serialization of the strokes it held — fine while the stored text is
+// canonical too, and silently fatal when it is not: an element written by an
+// older serializer, a hand edit or any other writer then looks changed on BOTH
+// sides, the merge refuses it as a conflict, and the person's edit is reverted
+// without a word (plan T31, L09 arrowheads on a non-canonical arrow).
+//
+// An edit made on exactly the state this canvas last RECEIVED names the text
+// it received — the project then sees "nothing changed underneath", accepts
+// the edit whole, and the stored text becomes canonical as a side effect. Any
+// other state (edits stacked before the echo returns) is this canvas's own
+// canonical output, which is what the project holds after accepting it.
+
+import { type Stroke, strokesToSvg } from './annotations-model.ts';
+
+export interface ReceivedAnnotations {
+  /** The SVG text exactly as the project delivered it. */
+  raw: string;
+  /** The same state as this client serializes it. */
+  canon: string;
+}
+
+export function receivedAnnotations(raw: string, strokes: readonly Stroke[]): ReceivedAnnotations {
+  return { raw, canon: strokesToSvg(strokes) };
+}
+
+export function annotationEditBase(
+  before: readonly Stroke[],
+  received: ReceivedAnnotations | null
+): string {
+  const canon = strokesToSvg(before);
+  return received && received.canon === canon ? received.raw : canon;
+}

package/apps/studio/annotations-layer.tsx

@@ -1,3 +1,8 @@
+import {
+  annotationEditBase,
+  type ReceivedAnnotations,
+  receivedAnnotations,
+} from './annotation-edit-base.ts';
 import { createAnnotationEchoGuard, observeAnnotationSnapshots } from './annotations-sync.ts';
 /**
  * @file       annotations-layer.tsx — FigJam-style annotation overlay
@@ -1157,6 +1162,9 @@ export function AnnotationsLayer() {
   // peer undo/delete can legitimately return to any previously rendered SVG.
   const annotationEchoRef = useRef(createAnnotationEchoGuard());
   const annotationsChangedRef = useRef(false);
+  // The annotations as the project last delivered them — the base an edit on
+  // exactly that state names (annotation-edit-base.ts).
+  const receivedRef = useRef<ReceivedAnnotations | null>(null);
   useEffect(() => {
     const file = deriveFile();
     fileRef.current = file;
@@ -1169,6 +1177,7 @@ export function AnnotationsLayer() {
       .then((text) => {
         if (cancelled || annotationsChangedRef.current) return;
         const loaded = svgToStrokes(text);
+        receivedRef.current = receivedAnnotations(text, loaded);
         if (loaded.length) {
           setStrokesState(loaded);
         }
@@ -1186,8 +1195,9 @@ export function AnnotationsLayer() {
     if (!collab) return;
     return observeAnnotationSnapshots(collab.doc, (svg, writeId) => {
       annotationsChangedRef.current = true;
-      if (annotationEchoRef.current.isOwn(svg, writeId)) return;
       const incoming = svgToStrokes(svg);
+      receivedRef.current = receivedAnnotations(svg, incoming);
+      if (annotationEchoRef.current.isOwn(svg, writeId)) return;
       setStrokesState((prev) => reconcileForeignEcho(prev, incoming));
     });
   }, [collab]);
@@ -1243,7 +1253,7 @@ export function AnnotationsLayer() {
     const persistableBefore = before.some(isEphemeralHref)
       ? before.filter((s) => !isEphemeralHref(s))
       : before;
-    const base = strokesToSvg(persistableBefore);
+    const base = annotationEditBase(persistableBefore, receivedRef.current);
     // Phase 8 Task 5 — record the SVG we just authored locally so the
     // server-broadcast echo (PUT → onAnnotationsChanged → syncRoom* →
     // Y.Map.observe) doesn't trigger a redundant setStrokesState.
@@ -4984,6 +4994,7 @@ function AnnotationContextMenu({
     <button
       type="button"
       role="menuitem"
+      data-action={id}
       disabled={opts?.disabled}
       className={`dc-menu-item${opts?.destructive ? ' is-destructive' : ''}`}
       onClick={() => {

package/apps/studio/api.ts

@@ -141,7 +141,7 @@ const HIDDEN_OK = new Set(['.ai', '.claude', '.design']);
 // an explicit enumerated list rather than a broad pattern so it can never
 // accidentally widen to swallow runtime JSON — findFiles already excludes
 // `_`-prefixed entries before this list is even consulted.
-const PREVIEW_ASSET_EXTS = [
+export const PREVIEW_ASSET_EXTS = [
   '.svg',
   '.png',
   '.jpg',
@@ -171,6 +171,30 @@ const PREVIEW_ASSET_EXTS = [
  * (`system/<ds>/preview/*.html`) intentionally stay `.html` and travel via
  * the DS-aware `findFiles()` path below.
  */
+/**
+ * True when `abs` is a directory tree holding nothing but folder placeholders
+ * (`.gitkeep`, `.DS_Store`) — what a folder projection leaves before any
+ * content arrives. False when it is absent, is not a directory, or holds
+ * anything real (a symlink counts as real: never followed, never removed).
+ */
+async function onlyFolderPlaceholders(abs: string, depth = 0): Promise<boolean> {
+  if (depth > 16) return false;
+  let entries: Dirent[];
+  try {
+    entries = await readdir(abs, { withFileTypes: true });
+  } catch {
+    return false;
+  }
+  for (const e of entries) {
+    if (e.isDirectory()) {
+      if (!(await onlyFolderPlaceholders(path.join(abs, e.name), depth + 1))) return false;
+    } else if (!(e.isFile() && (e.name === '.gitkeep' || e.name === '.DS_Store'))) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export async function findHtmlFiles(absRoot: string, prefixUnderRepo: string): Promise<string[]> {
   const out: string[] = [];
   let entries: Dirent[];
@@ -203,7 +227,7 @@ export async function findHtmlFiles(absRoot: string, prefixUnderRepo: string): P
  * traversal instead of adding a second full walk of `system/` (the largest
  * group) just to enumerate directories.
  */
-async function findFiles(
+export async function findFiles(
   absRoot: string,
   prefix: string,
   exts: string[],
@@ -3214,6 +3238,11 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       };
     }
     await rename(g.abs, toAbs);
+    // A hub's own studio has no watcher to see this rename: announce both
+    // ends, or the journal learns of it only from the walk-import belt and a
+    // teammate waits minutes for a rename that took a second here.
+    announceWritten(rel);
+    announceWritten(toRel);
     ctx.bus.emit('canvas-list-update', {
       action: 'moved',
       rel: toRel,
@@ -3248,6 +3277,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     await mkdir(trashDir, { recursive: true });
     const trashed = path.join(trashDir, path.posix.basename(rel));
     await rename(g.abs, trashed);
+    announceWritten(rel);
     ctx.bus.emit('canvas-list-update', { action: 'removed', rel, slug });
     return {
       ok: true,
@@ -3903,6 +3933,17 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     }
 
     await mkdir(toDirAbs, { recursive: true });
+    // OUR OWN ACTION MAY ALREADY BE ON THIS DISK. The destination did not exist
+    // when this move was checked; the project accepted the move since, and its
+    // announcement can reach this machine's sync before the answer reaches this
+    // request — which materializes the destination folders (each with its
+    // `.gitkeep`). Renaming onto that non-empty placeholder failed (ENOTEMPTY),
+    // leaving the old folder in this person's tree while every teammate had
+    // the move (plan T31/L02). A destination holding nothing but placeholders
+    // is that projection; it is replaced, never merged into.
+    if (await onlyFolderPlaceholders(toDirFinalAbs)) {
+      await rm(toDirFinalAbs, { recursive: true, force: true });
+    }
     try {
       await rename(dirAbs, toDirFinalAbs);
     } catch (err) {
@@ -3925,6 +3966,14 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       );
       for (const artifact of canvasArtifacts({ rel: fromRel, paths })) {
         if (artifact.kind !== 'slug-keyed') continue; // primary/siblings already moved with the dir
+        if (artifact.carryOnMove === false) {
+          // The old slug's CRDT cache, stamped "moved away" — the same drop as
+          // moveCanvas; carried, the new document opens retired.
+          await rm(artifact.abs, { force: true }).catch((err) => {
+            console.warn(`[move] could not drop the stale doc cache: ${(err as Error).message}`);
+          });
+          continue;
+        }
         const dest = relocatedName(artifact, fromRel, toRel, paths);
         if (path.resolve(dest) === path.resolve(artifact.abs)) continue;
         try {

package/apps/studio/canvas-build.ts

@@ -22,7 +22,7 @@
 // serves the resulting JS at /<designRel>/ui/<slug>.tsx with Content-Type
 // `application/javascript`.
 
-import { existsSync } from 'node:fs';
+import { existsSync, realpathSync } from 'node:fs';
 import path from 'node:path';
 
 import { canvasLibPath, canvasLibResolver } from './canvas-lib-resolver.ts';
@@ -129,6 +129,10 @@ export async function buildCanvasModule(
   // needed; RUNTIME_PACKAGES already lists every specifier the importmap covers.
   const externalSpecifiers = new Set<string>(RUNTIME_PACKAGES);
   const denials: Array<{ specifier: string; reason: string }> = [];
+  // Every stylesheet the canvas pulls in by relative import — they are inlined
+  // (below), so the open canvas has no <link> to swap when one changes; the
+  // injector records them for the iframe's HMR client (see buildCssInjector).
+  const cssSources = new Set<string>();
 
   const built = await Bun.build({
     entrypoints: [canvasAbsPath],
@@ -151,6 +155,17 @@ export async function buildCanvasModule(
       'process.env.NODE_ENV': '"production"',
     },
     plugins: [
+      {
+        name: 'css-sources',
+        setup(builder) {
+          builder.onResolve({ filter: /\.css$/ }, (args: { path: string; importer: string }) => {
+            if (args.path.startsWith('.') && args.importer) {
+              cssSources.add(path.resolve(path.dirname(args.importer), args.path));
+            }
+            return null; // record only — resolution continues as before
+          });
+        },
+      },
       // Resolve `@maude/canvas-lib` BEFORE exact-externals — we want the bare
       // specifier to map to the dev-server-bundled lib, not get marked external.
       canvasLibResolver(),
@@ -217,7 +232,26 @@ export async function buildCanvasModule(
     for (const a of cssAssets) css += await a.text();
     if (css.trim().length > 0) {
       const slug = canvasAbsPath.split('/').pop() ?? 'canvas';
-      js = buildCssInjector(slug, css) + js;
+      const root = options.designRoot ?? options.restrictImportsTo;
+      // Real paths on both sides: the bundler reports importers by their REAL
+      // path, and a design root reached through a symlink (macOS `/var` →
+      // `/private/var`, where every temp dir lives) made each source look like
+      // `../../private/…` — filtered out, so nothing was ever named and the
+      // open canvas never restyled.
+      const real = (p: string) => {
+        try {
+          return realpathSync(p);
+        } catch {
+          return p;
+        }
+      };
+      const realRoot = root ? real(root) : null;
+      const sources = realRoot
+        ? [...cssSources]
+            .map((abs) => path.relative(realRoot, real(abs)).split(path.sep).join('/'))
+            .filter((rel) => rel && !rel.startsWith('..'))
+        : [];
+      js = buildCssInjector(slug, css, sources) + js;
     }
   }
 
@@ -227,16 +261,23 @@ export async function buildCanvasModule(
 
 /**
  * Synthesize a module-init prologue that creates a `<style data-canvas-css>`
- * tag with the bundled CSS text. Idempotent per-slug — duplicate mounts of
- * the same canvas don't re-inject. Run at top-level so it executes before
- * the React component does its first render.
+ * tag with the bundled CSS text. One tag per slug — a duplicate mount reuses
+ * it, and a RE-IMPORT (the iframe's soft reload after a stylesheet changed)
+ * replaces its text, so a changed import actually reaches the page. Run at
+ * top-level so it executes before the React component does its first render.
+ *
+ * `sources` — the design-root-relative stylesheets inlined here — lands on the
+ * tag as `data-canvas-css-sources` (`|`-separated): the iframe's HMR client
+ * reloads when one of them changes, since there is no <link> to swap (plan
+ * T31/L16: a canvas importing `../system/<ds>/tokens.css` never restyled).
  */
-function buildCssInjector(slug: string, css: string): string {
+function buildCssInjector(slug: string, css: string, sources: readonly string[] = []): string {
   // JSON-encode the CSS text so we don't need to worry about backticks,
   // backslashes, or embedded `</style>` (which would break a raw template).
   const enc = JSON.stringify(css);
-  const id = `canvas-css-${slug.replace(/[^a-zA-Z0-9-]/g, '_')}`;
-  return `// canvas-build: inject bundled sibling CSS so the canvas is self-contained.\n(function(){if(typeof document==="undefined")return;if(document.getElementById(${JSON.stringify(id)}))return;var s=document.createElement("style");s.id=${JSON.stringify(id)};s.dataset.canvasCss="bundled";s.textContent=${enc};document.head.appendChild(s);})();\n`;
+  const id = JSON.stringify(`canvas-css-${slug.replace(/[^a-zA-Z0-9-]/g, '_')}`);
+  const src = JSON.stringify(sources.join('|'));
+  return `// canvas-build: inject bundled sibling CSS so the canvas is self-contained.\n(function(){if(typeof document==="undefined")return;var s=document.getElementById(${id});if(!s){s=document.createElement("style");s.id=${id};s.dataset.canvasCss="bundled";document.head.appendChild(s);}s.dataset.canvasCssSources=${src};if(s.textContent!==${enc})s.textContent=${enc};})();\n`;
 }
 
 /**

package/apps/studio/canvas-edit.ts

@@ -696,6 +696,7 @@ export function applyTextEdit(
     const expr = (only as AnyNode).expression;
     // A single `{'string literal'}` — rewrite the literal in place (DDR-150 P1).
     if (isStringLit(expr)) {
+      if (expr.value === text) return { source, delta: 0 };
       const s = new MagicString(source);
       s.overwrite(expr.start as number, expr.end as number, JSON.stringify(text));
       const out = s.toString();
@@ -727,6 +728,10 @@ export function applyTextEdit(
   const start = only.start as number;
   const end = only.end as number;
   const raw = source.slice(start, end);
+  // The text it already shows is not an edit (plan T23): a multi-line JSX text
+  // renders as its lines joined by one space, and rewriting it with that same
+  // text used to fold the author's line breaks into one line.
+  if (jsxRenderedText(raw) === escapeJsxText(text)) return { source, delta: 0 };
   // Preserve the original indentation/newline framing; swap only the visible text.
   const lead = /^\s*/.exec(raw)?.[0] ?? '';
   const trail = /\s*$/.exec(raw)?.[0] ?? '';
@@ -746,6 +751,26 @@ export function applyTextEdit(
 // the index drifts (`.filter().map()`, reorders). Anything we can't target
 // unambiguously returns null → the caller throws → routes to /design:edit.
 
+/**
+ * JSX's own whitespace rule for a text child, on the raw source: each line is
+ * trimmed (inner lines on both sides), empty lines drop, and the rest join with
+ * one space. Entities stay encoded — the caller compares against escaped text.
+ */
+function jsxRenderedText(raw: string): string {
+  const lines = raw.split(/\r\n|\n|\r/);
+  if (lines.length === 1) return raw.trim();
+  return lines
+    .map((line, i) => {
+      let l = line;
+      if (i !== 0) l = l.replace(/^[ \t]+/, '');
+      if (i !== lines.length - 1) l = l.replace(/[ \t]+$/, '');
+      return l;
+    })
+    .filter((l) => l.length > 0)
+    .join(' ')
+    .trim();
+}
+
 function isStringLit(n: AnyNode): boolean {
   return !!(
     n &&
@@ -4871,6 +4896,28 @@ export function assembleCompSource(
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
+/**
+ * The literal an attribute expression IS — a string, number or boolean (a
+ * negative number arrives as a unary minus) — or null for anything computed.
+ */
+function literalOfExpression(expr: AnyNode): string | number | boolean | null {
+  if (!expr) return null;
+  if (expr.type === 'Literal' || expr.type === 'StringLiteral') {
+    const v = expr.value;
+    return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' ? v : null;
+  }
+  if (expr.type === 'NumericLiteral') return typeof expr.value === 'number' ? expr.value : null;
+  if (expr.type === 'BooleanLiteral') return typeof expr.value === 'boolean' ? expr.value : null;
+  if (
+    expr.type === 'UnaryExpression' &&
+    expr.operator === '-' &&
+    (expr.argument?.type === 'Literal' || expr.argument?.type === 'NumericLiteral') &&
+    typeof expr.argument.value === 'number'
+  )
+    return -expr.argument.value;
+  return null;
+}
+
 function editStringAttr(
   s: MagicString,
   opening: AnyNode,
@@ -4897,6 +4944,9 @@ function editStringAttr(
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
+      // Setting the value it already has is not an edit (plan T23): keep the
+      // author's bytes, quote style included.
+      if (typeof v.value === 'string' && v.value === value) return;
       // Replace the whole `"value"` (quotes included) so we control the escaping.
       // The value lands in a JSX *attribute*, where `"` must become `"` and
       // `<`/`>` their entities — NOT JS backslash escaping. `JSON.stringify` would
@@ -4921,6 +4971,25 @@ function editStringAttr(
           { canvas: canvasAbsPath, id }
         );
       }
+      // A NUMBER OR BOOLEAN STAYS ONE (plan T23). `height={400}`,
+      // `durationInFrames={30}`, `aria-pressed={false}` used to come back as
+      // `"400"` / `"30"` / `"false"` — a different type, which a component that
+      // does arithmetic on its prop (every Remotion timing prop) silently
+      // mis-reads — and even an edit to the value it already had rewrote the
+      // bytes. The same value is now no edit; a new number or boolean is
+      // written into the braces it came in.
+      const lit = literalOfExpression(inner);
+      if (lit !== null) {
+        if (String(lit) === value) return;
+        if (typeof lit === 'number' && /^-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+        if (typeof lit === 'boolean' && (value === 'true' || value === 'false')) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+      }
       // Replace the whole `{...}` with a plain quoted literal — keeps the
       // resulting JSX readable. Same JSX-attribute escaping as above (NOT
       // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
@@ -5726,6 +5795,14 @@ export function relocateElement(
   return matches.length === 1 ? (matches[0] as { id: string }).id : null;
 }
 
+/** T23 — every JSX element of `source` with its id and print (corpus checks). */
+export function listElements(
+  canvasAbsPath: string,
+  source: string
+): Array<{ id: string; print: ElementPrint }> {
+  return printAll(canvasAbsPath, source, null);
+}
+
 /** T23 — how many elements of `source` carry a print no other element shares. */
 export function printUniqueness(
   canvasAbsPath: string,

package/apps/studio/canvas-lib.tsx

@@ -3138,32 +3138,47 @@ const ASSET_REF_RE = /assets\/[0-9a-f]{8}\.[a-z0-9]+/i;
  *  baked, the element's `src`/`href` is a `data:` URL that no longer contains
  *  the original asset path, so the substring match alone would lose track of
  *  it on the very next edit. */
-function findPhotoEl(asset: string): Element | null {
+function photoRefOf(el: Element): string {
+  return el.getAttribute('src') || el.getAttribute('href') || el.getAttribute('xlink:href') || '';
+}
+
+/**
+ * Is the element's `data-photo-asset` tag still true? The tag is this bridge's
+ * memory of a node it baked — while baked, the node shows a `data:` URL; left
+ * alone, it shows the asset. Once the canvas points the node at something
+ * else (Replace… on the image), the memory is stale: the node is no longer
+ * this photo, and acting on the tag would put the old picture back over the
+ * new one on the machine that made the replace (plan T31/L12).
+ */
+function photoTagCurrent(el: Element, tagged: string): boolean {
+  const ref = photoRefOf(el);
+  return ref.startsWith('data:') || ref.includes(tagged);
+}
+
+export function findPhotoEl(asset: string): Element | null {
   if (typeof document === 'undefined') return null;
   // Scoped to img/image (not a bare `[data-photo-asset]` attribute selector) —
   // the canvas iframe is untrusted content (DDR-054); an authored canvas could
   // otherwise stamp the tag on an arbitrary element to redirect a bake.
   for (const n of document.querySelectorAll('img[data-photo-asset], image[data-photo-asset]')) {
-    if (n.getAttribute('data-photo-asset') === asset) return n;
+    if (n.getAttribute('data-photo-asset') !== asset) continue;
+    if (photoTagCurrent(n, asset)) return n;
+    n.removeAttribute('data-photo-asset');
   }
   for (const n of document.querySelectorAll('img, image')) {
-    const src =
-      n.getAttribute('src') || n.getAttribute('href') || n.getAttribute('xlink:href') || '';
-    if (src.includes(asset)) return n;
+    if (photoRefOf(n).includes(asset)) return n;
   }
   return null;
 }
 
-function extractAssetRef(el: Element): string | null {
+export function extractAssetRef(el: Element): string | null {
   // Only trust `data-photo-asset` when it actually has the `assets/<sha8>.<ext>`
   // shape — the tag is attacker-controllable (untrusted canvas content,
   // DDR-054), and an unshaped value would otherwise ride unbounded into
   // `_active.json`/the WS broadcast via inspect.ts's `enrich()`.
   const tagged = el.getAttribute('data-photo-asset');
-  if (tagged && ASSET_REF_RE.test(tagged)) return tagged;
-  const ref =
-    el.getAttribute('src') || el.getAttribute('href') || el.getAttribute('xlink:href') || '';
-  return ref.match(ASSET_REF_RE)?.[0] ?? null;
+  if (tagged && ASSET_REF_RE.test(tagged) && photoTagCurrent(el, tagged)) return tagged;
+  return photoRefOf(el).match(ASSET_REF_RE)?.[0] ?? null;
 }
 
 function setPhotoElSrc(el: Element, url: string): void {

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

@@ -25,9 +25,28 @@
 
 import path from 'node:path';
 
-import { canvasSlugFromRel, findHtmlFiles, SKIP_DIRS } from './api.ts';
+import {
+  canvasSlugFromRel,
+  findFiles,
+  findHtmlFiles,
+  PREVIEW_ASSET_EXTS,
+  SKIP_DIRS,
+} from './api.ts';
 import type { Context } from './context.ts';
 
+/**
+ * Supporting files the tree lists beside the canvases (images, fonts, media —
+ * the same `PREVIEW_ASSET_EXTS` `/_index-data` walks). A new one written from
+ * outside the app — an agent's export, a teammate's image arriving through
+ * sync — is a tree change too; without it the row stayed missing until
+ * something else reloaded the tree (plan T17/L03). Sidecars and stylesheets are
+ * deliberately NOT here: they are rewritten on every edit, and the tree nests
+ * them under their canvas anyway.
+ */
+function isListedFile(low: string): boolean {
+  return PREVIEW_ASSET_EXTS.some((x) => low.endsWith(x));
+}
+
 /** 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;
@@ -59,7 +78,8 @@ export function isCanvasCandidate(rel: string, groupPaths: string[]): boolean {
   // canvases costs one recompute and emits nothing.
   const last = p.slice(p.lastIndexOf('/') + 1);
   const looksLikeDir = !last.includes('.');
-  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html')) return false;
+  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html') && !isListedFile(low))
+    return false;
   const segs = p.split('/');
   for (const s of segs) {
     if (!s) return false;
@@ -123,6 +143,11 @@ export function createCanvasListWatch(
         continue; // group dir missing / unreadable — treat as empty
       }
       for (const f of files) out.add(f);
+      try {
+        for (const f of await findFiles(groupAbs, groupRel, PREVIEW_ASSET_EXTS)) out.add(f);
+      } catch {
+        /* unreadable — the canvases above still diff */
+      }
     }
     return out;
   }
@@ -137,6 +162,12 @@ export function createCanvasListWatch(
     // 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;
+    if (isListedFile(rel.toLowerCase())) {
+      // Not a canvas: its own action and no slug, so no consumer mistakes an
+      // image for a canvas to close, retarget or adopt.
+      ctx.bus.emit('canvas-list-update', { action: `file-${action}`, rel: relOut });
+      return;
+    }
     ctx.bus.emit('canvas-list-update', {
       action,
       rel: relOut,