@1agh/maude 1.4.5 → 1.5.0

package/apps/studio/bin/read-annotations.sh

@@ -1,11 +1,15 @@
 #!/usr/bin/env bash
-# read-annotations.sh — thin wrapper around read-annotations.mjs (the headless
-# SVG → JSON annotation reader). Reached via `maude design read-annotations`
-# (DDR-062), never a raw bin path. The reader is zero-dep Node, so we exec under
-# `node` (always present — maude itself runs on Node), not Bun.
+# read-annotations.sh — thin wrapper around read-annotations.mjs (the AI read
+# verb over the v2 board). Reached via `maude design read-annotations`
+# (DDR-062), never a raw bin path.
 #
 # Usage:
-#   read-annotations.sh <rel-path> [--root <repo>] [--canvas-state <path>]
+#   read-annotations.sh <rel-path> [--in <id>] [--type <t,…>] [--rects <path>] [--graph] [--full]
 #   (see read-annotations.mjs --help for the full contract)
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+# DDR-242 — the v2 board is read through the TS model: prefer bun (bundled with
+# the app), fall back to node (≥ 22.18 strips TS types natively).
+if command -v bun >/dev/null 2>&1; then
+  exec bun "$SCRIPT_DIR/read-annotations.mjs" "$@"
+fi
 exec node "$SCRIPT_DIR/read-annotations.mjs" "$@"

package/apps/studio/canvas-artifacts.ts

@@ -113,6 +113,15 @@ export function canvasArtifacts(input: { rel: string; paths: Paths }): CanvasArt
   });
   out.push({
     // Versioned — a real git rename on move, which is correct and expected.
+    // DDR-242: the annotations board.
+    abs: path.join(paths.designRoot, `${slug}.annotations.json`),
+    kind: 'slug-keyed',
+    rekey: true,
+    versioned: true,
+  });
+  out.push({
+    // A not-yet-migrated v1 sidecar travels with its canvas until the boot
+    // migration converts it (annotations/migrate-boot.ts).
     abs: path.join(paths.designRoot, `${slug}.annotations.svg`),
     kind: 'slug-keyed',
     rekey: true,

package/apps/studio/canvas-comment-mount.tsx

@@ -39,6 +39,7 @@ import {
 } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { annotationElement, annotationIdAt, clientToWorld } from './comment-anchor.ts';
 import { CommentsOverlay } from './comments-overlay.tsx';
 import { deriveFile, hoverTargetToSelection } from './dom-selection.ts';
 import {
@@ -394,6 +395,36 @@ function dropComment(
   file: string | undefined
 ): void {
   if (typeof document === 'undefined') return;
+  const world = clientToWorld(clientX, clientY) ?? undefined;
+
+  // A click on an annotation (sticky, shape, stroke, image, link, media card)
+  // anchors to it (#134/#136). Checked first: annotations draw above the
+  // artboards, so what the user clicked is the annotation, not the element
+  // underneath it.
+  const annotationId = annotationIdAt(clientX, clientY);
+  if (annotationId) {
+    const el = annotationElement(annotationId);
+    const r = el?.getBoundingClientRect();
+    const annotationSel: Selection = {
+      file,
+      id: undefined,
+      selector: '',
+      artboardId: null,
+      tag: el?.getAttribute('data-tool') ?? 'annotation',
+      classes: '',
+      text: '',
+      dom_path: [],
+      bounds: r
+        ? { x: r.left, y: r.top, w: r.width, h: r.height }
+        : { x: clientX - 12, y: clientY - 12, w: 24, h: 24 },
+      html: '',
+      annotationId,
+      ...(world ? { world } : {}),
+    };
+    openComposer(annotationSel, clientX, clientY);
+    return;
+  }
+
   let target = resolveHoverTarget(document, clientX, clientY, { deep: true });
   if (!target) target = resolveHoverTarget(document, clientX, clientY, { deep: false });
   // UI-canvas recovery — when both passes bail on a `pointer-events: none`
@@ -428,8 +459,9 @@ function dropComment(
 
   if (!target) {
     // Floating comment — no element anchor, just the click point (e.g. a click
-    // on empty canvas/specimen dead space). The overlay renders a pin at the
-    // stored bounds.
+    // on empty canvas/specimen dead space). The overlay renders the pin at the
+    // WORLD point, so it stays put through pan and zoom; `bounds` is the
+    // screen-space fallback for surfaces without a world plane (specimens).
     const floatingSel: Selection = {
       file,
       id: undefined,
@@ -441,6 +473,7 @@ function dropComment(
       dom_path: [],
       bounds: { x: clientX - 12, y: clientY - 12, w: 24, h: 24 },
       html: '',
+      ...(world ? { world } : {}),
     };
     openComposer(floatingSel, clientX, clientY);
     return;

package/apps/studio/canvas-lib.tsx

@@ -265,6 +265,8 @@ const IS_WEBKIT =
 type DcPerfCounters = {
   artboardRenders: number;
   annotationRenders: number;
+  /** Annotation element nodes (re-)rendered — a drag should touch only what moves. */
+  annotationNodeRenders?: number;
   instrumented?: boolean;
 };
 
@@ -1428,7 +1430,17 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
     // receives events natively.
     const onPointerEnter = () => {
       try {
-        if (typeof window !== 'undefined' && document.activeElement !== host) {
+        const active = document.activeElement as HTMLElement | null;
+        // Never steal focus from something being TYPED into. An editor that
+        // mounts under a stationary pointer (double-click on a standalone
+        // text) makes the engine fire pointerenter on the host; focusing the
+        // host then blurred the editor, and blur commits — so the editor
+        // closed ~5 ms after it opened and a double-click never entered edit.
+        const typing =
+          !!active &&
+          active !== host &&
+          (active.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(active.tagName));
+        if (typeof window !== 'undefined' && active !== host && !typing) {
           host.focus({ preventScroll: true });
         }
       } catch {
@@ -2869,11 +2881,16 @@ function buildCanvasRectsManifest(): CanvasRectsManifest {
 declare global {
   interface Window {
     __maudeCanvasRects?: () => CanvasRectsManifest;
+    /** The live camera, for layers built in another bundle (the comment
+     *  overlay mounts from canvas-comment-mount, which gets its own copy of
+     *  this module's state) — see comment-anchor.ts. */
+    __maudeViewport?: () => ViewportState | null;
   }
 }
 
 if (typeof window !== 'undefined') {
   window.__maudeCanvasRects = buildCanvasRectsManifest;
+  window.__maudeViewport = getLiveViewport;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/apps/studio/canvas-shell.tsx

@@ -829,6 +829,12 @@ function CanvasCore({
         return;
       }
       if (t.closest('[data-dc-screen]')) return; // any part of an artboard
+      // Inside anything editable a double-click selects a WORD — the text
+      // editors of stickies / shape labels / texts sit over the world, not over
+      // an artboard, so this used to fit() and throw the view to the top-left
+      // mid-edit (user report 2026-09-30).
+      if (t.closest('[data-annot-editor], input, textarea, select')) return;
+      if ((t as HTMLElement).isContentEditable) return;
       e.preventDefault();
       controller.fit();
     };
@@ -1130,9 +1136,52 @@ interface DsThemeSupport {
 }
 
 let _dsThemeSupport: DsThemeSupport | null = null;
+// A NEGATIVE answer is cached too (#131). The probe below appends DOM to
+// <body> and reads getComputedStyle for every candidate, which forces a style
+// recalc of the whole document. Only a positive answer was cached, so on a
+// canvas whose DS has a single theme it re-ran on EVERY call — and the element
+// toolbar's menu asks on every render, i.e. every frame of a pan with something
+// selected. On a 160-board canvas in Safari that alone held pan at ~1.3 fps
+// (hundreds of ms per probe, two per frame). The reason a negative answer was
+// not cached — a DS stylesheet that parses after first paint — is honoured
+// precisely instead: the negative answer holds until a stylesheet is added to
+// or finishes loading in the document, then the next call probes again.
+let _dsThemeUnsupported = false;
+let _dsThemeWatch = false;
+const _unsupported: DsThemeSupport = { supported: false, wrapperClass: '' };
+
+function watchStylesheetsOnce(): void {
+  if (_dsThemeWatch || typeof document === 'undefined') return;
+  _dsThemeWatch = true;
+  const invalidate = (): void => {
+    _dsThemeUnsupported = false;
+  };
+  try {
+    new MutationObserver((records) => {
+      for (const r of records) {
+        for (const n of Array.from(r.addedNodes)) {
+          const tag = (n as Element).tagName;
+          if (tag === 'STYLE' || tag === 'LINK') return invalidate();
+        }
+      }
+    }).observe(document.head ?? document.documentElement, { childList: true, subtree: true });
+    // A <link> that was already in the DOM finishing its load (capture: load
+    // does not bubble).
+    document.addEventListener(
+      'load',
+      (e) => {
+        if ((e.target as Element | null)?.tagName === 'LINK') invalidate();
+      },
+      true
+    );
+  } catch {
+    _dsThemeWatch = false;
+  }
+}
 
-function detectDsThemeSupport(): DsThemeSupport {
+export function detectDsThemeSupport(): DsThemeSupport {
   if (_dsThemeSupport) return _dsThemeSupport;
+  if (_dsThemeUnsupported) return _unsupported;
   const fallback: DsThemeSupport = { supported: false, wrapperClass: '' };
   if (typeof document === 'undefined' || !document.body) return fallback;
   try {
@@ -1181,6 +1230,10 @@ function detectDsThemeSupport(): DsThemeSupport {
     // unsupported. Caching that would permanently disable theming; instead
     // re-probe until support is confirmed (or the DS genuinely has one theme).
     if (found.supported) _dsThemeSupport = found;
+    else {
+      _dsThemeUnsupported = true;
+      watchStylesheetsOnce();
+    }
     return found;
   } catch {
     return fallback;

package/apps/studio/client/app.jsx

@@ -130,6 +130,16 @@ import { acceptCanvasNotice } from '../canvas-notice-message.ts';
 import { ExportBadge, ExportPanel, ExportToast, useExportCenter } from './export-center.jsx';
 import { ReportBugDialog } from './report-bug.jsx';
 import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
+import {
+  collectDirPaths,
+  isDirOpen,
+  pruneDirs,
+  remapDirPrefix,
+  revealPath,
+  setDirOpen,
+  toggleSection as toggleSectionState,
+  useTreeExpansion,
+} from './tree-expansion.js';
 
 const USAGE_TOUR_STORE = 'mdcc-usage-tour-seen';
 // Phase 29 (E4) — the collab "rychlý kurz" is offered once after onboarding.
@@ -138,7 +148,6 @@ const COLLAB_TOUR_STORE = 'mdcc-collab-tour-seen';
 const SYSTEM_TAB = '__system__';
 const THEME_STORE = 'mdcc-theme';
 const SHOW_HIDDEN_STORE = 'mdcc-show-hidden';
-const SECTIONS_STORE = 'mdcc-sections-expanded';
 // DDR-171 — CSS panel vocabulary mode ('advanced' | 'designer'), read inside
 // CssKnobs.
 const CP_MODE_STORE = 'maude-cp-mode';
@@ -330,14 +339,14 @@ function readJsonStore(key, fallback) {
   }
 }
 
-// Section default-open: working sections (project + non-DS canvas groups)
-// open; meta sections (DS + runtime) collapsed. Users can override per-section
-// via the chevron; overrides persist in localStorage.
-function sectionDefaultOpen(g) {
-  if (g.kind === 'runtime') return false;
-  if (g.label === 'Design system') return false;
-  return true;
+// Section default-open: EVERY section starts collapsed (issue #124 — "default
+// should be collapsed"). The user's per-section choice is remembered per
+// project by useTreeExpansion (tree-expansion.js), next to the folder state.
+function sectionDefaultOpen() {
+  return false;
 }
+// Stable empty list for the Sidebar while the tree state hydrates.
+const EMPTY_GROUPS = [];
 
 // ---------- Utility ----------
 
@@ -2155,8 +2164,17 @@ function ExportDialog({
 const TREE_INDENT_BASE = 12;
 const TREE_INDENT_STEP = 16;
 
-function DirRow({ name, depth, defaultOpen, children, dirPath, drag, menu }) {
-  const [open, setOpen] = useState(defaultOpen);
+// Issue #124 — disclosure is CONTROLLED: `expansion` is App's tree state (see
+// tree-expansion.js), so a collapse outlives this row's unmount (dock-tab
+// switch, section toggle, reload). `forceOpen` = an active search; it shows
+// the hits without recording anything.
+function DirRow({ name, depth, children, dirPath, drag, menu, expansion, forceOpen }) {
+  const open = !!forceOpen || !!expansion?.isOpen(dirPath);
+  const setOpen = (v) => {
+    if (forceOpen) return; // search is showing hits — don't record a choice
+    const next = typeof v === 'function' ? v(open) : v;
+    if (next !== open) expansion?.setOpen(dirPath, next);
+  };
   // feature-file-tree-drag-drop-folders (Task 8) — a folder row IS the drop
   // target. `drag` is undefined for groups that can't accept a move (the
   // design-system group) — no handlers attach there, so the browser's default
@@ -2223,8 +2241,13 @@ function DirRow({ name, depth, defaultOpen, children, dirPath, drag, menu }) {
 // Split target: chevron toggles disclosure of the folder's contents; clicking
 // the folder name opens the SystemView focused on that DS (single SystemView
 // for now; the dsName is plumbed through so a future per-DS view can use it).
-function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, children }) {
-  const [open, setOpen] = useState(defaultOpen);
+function DsFolderRow({ name, dsName, dirPath, depth, active, onOpenSystem, children, expansion, forceOpen }) {
+  const open = !!forceOpen || !!expansion?.isOpen(dirPath);
+  const setOpen = (v) => {
+    if (forceOpen) return; // search is showing hits — don't record a choice
+    const next = typeof v === 'function' ? v(open) : v;
+    if (next !== open) expansion?.setOpen(dirPath, next);
+  };
   return (
     <FileTreeItem label={name} expanded={open} selected={active}
       onToggle={() => setOpen(v => !v)} row={
@@ -2613,6 +2636,8 @@ function Tree({
   // feature-file-tree-drag-drop-folders (Task 9) — the shared row-menu
   // instance (useRowMenu()), undefined for groups that can't participate.
   menu,
+  // Issue #124 — App-level folder disclosure `{ isOpen, setOpen }`.
+  expansion,
 }) {
   const dirs = Object.keys(node)
     .filter((k) => k !== '_files')
@@ -2728,6 +2753,7 @@ function Tree({
             dirPath={childPath}
             drag={drag}
             menu={menu}
+            expansion={expansion}
           />
         );
         if (dsMatch && onOpenSystem) {
@@ -2736,8 +2762,10 @@ function Tree({
               key={d}
               name={d}
               dsName={dsMatch.name}
+              dirPath={childPath}
               depth={depth}
-              defaultOpen={true}
+              expansion={expansion}
+              forceOpen={hasSearch}
               active={activePath === SYSTEM_TAB && dsMatch.name === activeDsName}
               onOpenSystem={onOpenSystem}
             >
@@ -2750,8 +2778,9 @@ function Tree({
             key={d}
             name={d}
             depth={depth}
-            defaultOpen={true}
             dirPath={childPath}
+            expansion={expansion}
+            forceOpen={hasSearch}
             drag={drag}
             menu={drag ? menu : undefined}
           >
@@ -2809,6 +2838,8 @@ function Sidebar({
   showHidden,
   sectionsExpanded,
   onToggleSection,
+  // Issue #124 — App-level folder disclosure `{ isOpen, setOpen }`.
+  treeExpansion,
   onNewBoard,
   onDeleteBoard,
   onRefresh,
@@ -3264,6 +3295,7 @@ function Sidebar({
                     dirPath={g.fullPath}
                     drag={!isDs && g.kind === 'canvas' && !readOnly ? treeDrag : undefined}
                     menu={rowMenu}
+                    expansion={treeExpansion}
                   />
                 ) : (
                   <div className="st-tree-empty">{search ? 'No matches.' : 'Empty.'}</div>
@@ -10412,7 +10444,11 @@ function App() {
   const [openMenu, setOpenMenu] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(() => readBoolStore(SIDEBAR_STORE, true));
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
-  const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
+  // Issue #124 — folder + section disclosure of the Files panel, remembered
+  // per project on disk (tree-expansion.js). Absent ⇒ closed.
+  const treeExp = useTreeExpansion();
+  const updateTreeExp = treeExp.update;
+  const sectionsExpanded = treeExp.state.sections;
   const [helpOpen, setHelpOpen] = useState(false);
   const [reportBugOpen, setReportBugOpen] = useState(false);
 
@@ -11748,11 +11784,6 @@ function App() {
       localStorage.setItem(SHOW_HIDDEN_STORE, showHidden ? '1' : '0');
     } catch {}
   }, [showHidden]);
-  useEffect(() => {
-    try {
-      localStorage.setItem(SECTIONS_STORE, JSON.stringify(sectionsExpanded));
-    } catch {}
-  }, [sectionsExpanded]);
   useEffect(() => {
     try {
       localStorage.setItem(MINIMAP_STORE, minimapVisible ? '1' : '0');
@@ -11835,13 +11866,28 @@ function App() {
     } catch {}
   }, [layersMode]);
 
-  const toggleSection = useCallback((label, defaultOpen) => {
-    setSectionsExpanded((prev) => {
-      const cur = prev[label];
-      const isOpen = cur === undefined ? defaultOpen : cur;
-      return { ...prev, [label]: !isOpen };
-    });
-  }, []);
+  // #124 — forget folders that no longer exist (deleted, or moved outside
+  // Maude). ONCE per session, on the first loaded tree: pruning on every tree
+  // change would race a move's remap against the reload that follows it.
+  const treePruned = useRef(false);
+  useEffect(() => {
+    if (treePruned.current || !treeExp.ready || !treeLoaded || !groups.length) return;
+    treePruned.current = true;
+    const known = collectDirPaths(groups);
+    updateTreeExp((st) => pruneDirs(st, known));
+  }, [treeExp.ready, treeLoaded, groups, updateTreeExp]);
+
+  const toggleSection = useCallback(
+    (label) => updateTreeExp((st) => toggleSectionState(st, label)),
+    [updateTreeExp]
+  );
+  const treeExpansion = useMemo(
+    () => ({
+      isOpen: (dirPath) => isDirOpen(treeExp.state, dirPath),
+      setOpen: (dirPath, open) => updateTreeExp((st) => setDirOpen(st, dirPath, open)),
+    }),
+    [treeExp.state, updateTreeExp]
+  );
 
   const toggleTheme = useCallback(() => {
     setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
@@ -12354,7 +12400,12 @@ function App() {
   // The `tabs` state stays as a 0-or-1 array so the rest of the plumbing
   // (iframesRef, comments push, WS `tabs` message) doesn't need refactoring.
   // ARTBOARDS slot in the menubar reads `tabs.length` and reports 0 or 1.
-  const openTab = useCallback((path) => {
+  // `reveal: false` for opens the USER didn't just ask for (URL restore on
+  // boot, the cloud first-canvas auto-open): nothing expands itself on launch
+  // (#124). Every other open reveals the canvas's row in the Files tree.
+  const openTab = useCallback((path, { reveal = true } = {}) => {
+    if (reveal && path && path !== SYSTEM_TAB)
+      updateTreeExp((st) => revealPath(st, groups, path));
     addressMode.current = 'push';
     setFocusedCommentId(null);
     setPreviewPath(null);
@@ -12372,12 +12423,12 @@ function App() {
     // Canvas-compile skeleton — cleared by the iframe's dgn:'loaded' message,
     // the onLoad fallback timer (legacy .html), or a hard 15s cap.
     if (path !== SYSTEM_TAB) setLoadingPath(path);
-  }, [activePath]);
+  }, [activePath, groups, updateTreeExp]);
 
   // Resolve URL identities against the loaded tree, including non-canvas previews.
   const openLinkedFile = useCallback((rel, mode = 'push') => {
     const path = groups.flatMap((g) => g.paths || []).find((p) => normalizeOpenPath(p, cfg.designRel) === rel);
-    if (path && CANVAS_EXT_RE.test(path)) openTab(path);
+    if (path && CANVAS_EXT_RE.test(path)) openTab(path, { reveal: false });
     else if (path && previewKind(basename(path))) onPreview(path);
     else {
       setTabs([]);
@@ -12482,7 +12533,7 @@ function App() {
     }
     if (!first) return;
     autoOpened.current = true;
-    openTab(first);
+    openTab(first, { reveal: false });
   }, [cfg.cloud, groups, tabs.length, openTab]);
 
   const openSystem = useCallback(
@@ -12849,6 +12900,9 @@ function App() {
         );
         const fromFile = `${designRel}/${j.fromRel}`;
         const toFile = `${designRel}/${j.toRel}`;
+        // #124 — a moved folder keeps its (and its subfolders') open state, and
+        // the destination opens so the moved row is visible.
+        updateTreeExp((st) => revealPath(remapDirPrefix(st, fromFile, toFile), groups, toFile));
         await loadTree();
         setTabs((prev) => prev.map((t) => (t.path === fromFile ? { path: toFile } : t)));
         setActivePath((prev) => (prev === fromFile ? toFile : prev));
@@ -12865,7 +12919,7 @@ function App() {
         return { ok: false, error: 'network error' };
       }
     },
-    [loadTree, cfg]
+    [loadTree, cfg, groups, updateTreeExp]
   );
 
   // feature-file-tree-drag-drop-folders (Task 4/9/12) — create a folder under
@@ -12887,6 +12941,8 @@ function App() {
           shellToast(`Could not create folder: ${error}`);
           return { ok: false, error };
         }
+        // #124 — open the parent so the new folder is visible (it starts closed).
+        updateTreeExp((st) => revealPath(st, groups, parentDir, { includeSelf: true }));
         await loadTree();
         return { ok: true, dir: j.dir };
       } catch (e) {
@@ -12895,7 +12951,7 @@ function App() {
         return { ok: false, error };
       }
     },
-    [loadTree]
+    [loadTree, groups, updateTreeExp]
   );
 
   // feature-file-tree-drag-drop-folders (dogfood follow-up) — delete a
@@ -12943,12 +12999,16 @@ function App() {
           shellToast(`Could not rename folder: ${j.error || `error ${r.status}`}`);
           return;
         }
+        // #124 — the renamed folder keeps its open state (and its subfolders').
+        const designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '');
+        const toDir = typeof j.toRel === 'string' ? `${designRel}/${j.toRel}` : `${parent}/${name}`;
+        updateTreeExp((st) => remapDirPrefix(st, dirPath, toDir));
         await loadTree();
       } catch (e) {
         shellToast(`Rename failed: ${e instanceof Error ? e.message : 'network error'}`);
       }
     },
-    [loadTree]
+    [loadTree, cfg, updateTreeExp]
   );
 
   // Plan T25/L04 — rename a canvas in place (its sidecars follow; an open tab
@@ -13711,6 +13771,9 @@ function App() {
               classes: p.classes,
               bounds: p.bounds,
               html_excerpt: p.html_excerpt,
+              // #134/#136 anchors — shape-checked server-side (api.ts commentsAdd).
+              annotationId: p.annotationId,
+              world: p.world,
               text: txt,
             },
           });
@@ -15671,7 +15734,9 @@ function App() {
         <Sidebar
           cloud={cfg.cloud}
           readOnly={viewerMode}
-          groups={groups}
+          // Held back until the remembered disclosure is read, so the first
+          // paint is the user's tree rather than an all-closed flash (#124).
+          groups={treeExp.ready ? groups : EMPTY_GROUPS}
           activePath={activePath}
           previewPath={previewPath}
           activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
@@ -15688,6 +15753,7 @@ function App() {
           showHidden={showHidden}
           sectionsExpanded={sectionsExpanded}
           onToggleSection={toggleSection}
+          treeExpansion={treeExpansion}
           onNewBoard={createBoard}
           onDeleteBoard={deleteBoard}
           onMoveCanvas={moveCanvasReq}

package/apps/studio/client/comments-overlay.css

@@ -65,6 +65,16 @@
   opacity: 0.6;
 }
 
+/* Detached — the comment's element or annotation is gone from this canvas. The
+   comment is kept at its last known place (never deleted by software, #134/#136).
+   A hollow, dashed pin: the state reads from the shape, not from colour alone,
+   and the number keeps full contrast. The aria-label says "detached" too. */
+.cm-pin[data-detached='true'] {
+  background: var(--maude-chrome-bg-1, #faf6ef);
+  color: var(--maude-chrome-fg-0, #2a2520);
+  border: 1.5px dashed var(--maude-hud-accent, #6f63ef);
+}
+
 .cm-pin[data-focused='true'] {
   /* Subtle ring — DS hard-edges discipline: no glow, just a hairline outline. */
   outline: 1px solid var(--maude-chrome-fg-0, #2a2520);

package/apps/studio/client/hmr.mjs

@@ -69,7 +69,7 @@ function handle(evt) {
   }
   if (evt.type === 'fs:json' && evt.file) {
     // Phase 20 (DDR-049) — external edits to canvas `.meta.json` or
-    // `.annotations.svg` invalidate the iframe's in-memory undo stack
+    // `.annotations.json` invalidate the iframe's in-memory undo stack
     // (stale before/after snapshots would otherwise restore wrong state).
     // The iframe's UndoStackProvider self-echo-dampens our own PATCH-es
     // via window.__maude_last_meta_self_write_at, so we forward

package/apps/studio/client/panels/git-grouping.js

@@ -1,12 +1,12 @@
 // Pure grouping helpers for the Changes panel (GitPanel.jsx) — framework-free so
 // they unit-test without a DOM. DDR-115 follow-up: group changed files by parent
 // canvas + its supporting sidecars (same-stem `.meta.json`, slug-matched
-// `.annotations.svg`), mirroring the server's `expandSidecars` notion of "travels
+// `.annotations.json`), mirroring the server's `expandSidecars` notion of "travels
 // with the canvas" so the visual grouping is honest with what a unit commits.
 
 export const CANVAS_RE = /\.(tsx|html)$/i;
 export const META_RE = /\.meta\.json$/i;
-export const ANNOT_RE = /\.annotations\.svg$/i;
+export const ANNOT_RE = /\.annotations\.(?:svg|json)$/i;
 
 /** Display name for a file (last path segment, sidecar/canvas extension stripped). */
 export function baseName(p) {