@1agh/maude 1.4.4 → 1.4.6

package/apps/studio/client/panels/DiffView.jsx

@@ -170,7 +170,9 @@ function CanvasView({ src, view, setView, label }) {
           className="dv-frame-wrap"
           style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}
         >
-          <iframe className="dv-frame" src={src} title={label} />
+          {/* A read-only preview: out of the tab order, so the modal's focus
+              never falls into a document whose keys the shell cannot see. */}
+          <iframe className="dv-frame" src={src} title={label} tabIndex={-1} />
         </div>
       ) : (
         <div className="dv-thumb-note">No saved version of this canvas to compare yet.</div>
@@ -236,6 +238,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
   // HEAD), then re-pointable in-place via the "Saved version" picker.
   const tgtFile = target?.file;
   const tgtBeforeSha = target?.beforeSha;
+  const acceptedPreview = /^r\d+$/.test(tgtBeforeSha || '');
   const [beforeSha, setBeforeSha] = useState(tgtBeforeSha || 'HEAD');
   const [versions, setVersions] = useState(null); // per-file saved versions, or null while loading
 
@@ -253,7 +256,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
     let cancelled = false;
     (async () => {
       const entries = (await loadLog(tgtFile)) || [];
-      if (!cancelled) setVersions(entries);
+      if (!cancelled) setVersions(Array.isArray(entries) ? entries : []);
     })();
     return () => {
       cancelled = true;
@@ -263,16 +266,38 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
   useEffect(() => {
     if (!target) return;
     const opener = document.activeElement;
+    // A modal keeps the keyboard inside it (S19): Tab / Shift+Tab cycle the
+    // sheet's own controls, and Escape is taken before anything behind it.
+    const controls = () =>
+      [
+        ...(sheetRef.current?.querySelectorAll(
+          'button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        ) ?? []),
+      ].filter((el) => !el.closest('[hidden]'));
     const onKey = (e) => {
       if (e.key === 'Escape') {
         e.preventDefault();
+        e.stopImmediatePropagation();
         onClose();
+      } else if (e.key === 'Tab') {
+        const items = controls();
+        if (!items.length) return;
+        const inside = sheetRef.current?.contains(document.activeElement);
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (e.shiftKey && (!inside || document.activeElement === first || document.activeElement === sheetRef.current)) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && (!inside || document.activeElement === last)) {
+          e.preventDefault();
+          first.focus();
+        }
       }
     };
-    window.addEventListener('keydown', onKey);
+    document.addEventListener('keydown', onKey, true);
     sheetRef.current?.focus();
     return () => {
-      window.removeEventListener('keydown', onKey);
+      document.removeEventListener('keydown', onKey, true);
       if (opener instanceof HTMLElement) opener.focus();
     };
   }, [target, onClose]);
@@ -335,12 +360,13 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
             <label className="dv-verpick">
               <span className="dv-verpick-lbl">Compare against</span>
               <select
+                data-testid="history-preview-version"
                 className="dv-verpick-sel"
                 value={beforeSha}
                 onChange={(e) => setBeforeSha(e.target.value)}
                 aria-label={`Saved version of ${baseName(file)} to compare against`}
               >
-                <option value="HEAD">Last saved</option>
+                {!acceptedPreview && <option value="HEAD">Last saved</option>}
                 {versions.map((v) => (
                   <option key={v.sha} value={v.sha}>
                     {`${v.message || 'Saved version'} · ${timeAgo(v.date)}`}
@@ -506,7 +532,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
                   <div className="dv-col">
                     <div className="dv-col-hd">
                       <span className="dv-col-tag is-after">Your version</span>
-                      <span className="dv-col-who">now · unsaved</span>
+                      <span className="dv-col-who">{acceptedPreview ? 'now · working copy' : 'now · unsaved'}</span>
                     </div>
                     <div className="dv-thumb is-after">
                       <CanvasView
@@ -559,17 +585,20 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
                 <button
                   type="button"
                   className="btn btn--ghost btn--sm"
+                  data-testid="history-preview-restore"
                   disabled={busy}
                   onClick={async () => {
                     if (
                       !window.confirm(
-                        `Restore the saved version of “${baseName(file)}”? Your unsaved changes to it are discarded.`
+                        acceptedPreview
+                          ? `Restore version ${beforeSha.slice(1)} of “${baseName(file)}” as a new saved version?`
+                          : `Restore the saved version of “${baseName(file)}”? Your unsaved changes to it are discarded.`
                       )
                     )
                       return;
                     setBusy(true);
                     try {
-                      await onRestore(file);
+                      await onRestore(file, beforeSha);
                     } finally {
                       setBusy(false);
                     }

package/apps/studio/client/panels/GitPanel.jsx

@@ -182,6 +182,7 @@ export default function GitPanel({
   // is swapped at the same call site; this prop is only how the panel knows
   // which repo the rows it just received describe, so it can name it.
   historySource = 'local',
+  historyRefresh = 0, // applied project revisions and restores invalidate this list
   // `{ branch, project, hubHost }` — what the cell reported alongside the log.
   // Null until the first successful cloud load.
   cloudHistory = null,
@@ -465,7 +466,7 @@ export default function GitPanel({
   useEffect(() => {
     setLogFailed(false);
     setLogScope(undefined);
-  }, [historySource]);
+  }, [historySource, historyRefresh]);
 
   function toggleAll() {
     setUnchecked((prev) => (prev.size === 0 ? new Set(files.map((f) => f.path)) : new Set()));

package/apps/studio/client/panels/SourceConflictPanel.jsx

@@ -12,7 +12,8 @@
 //
 // No hashes, epochs or lane names: "Your version" / "The project's version".
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useLinkDialogFocus } from '../share-dialog.jsx';
 
 /** Line diff by longest common subsequence — bounded, for a canvas source. */
 export function lineDiff(a, b, max = 2000) {
@@ -63,7 +64,7 @@ export default function SourceConflictPanel({ slug, onClose }) {
   const [sides, setSides] = useState(null);
   const [error, setError] = useState('');
   const [busy, setBusy] = useState('');
-  const ref = useRef(null);
+  const ref = useLinkDialogFocus(onClose);
 
   useEffect(() => {
     let alive = true;
@@ -80,19 +81,6 @@ export default function SourceConflictPanel({ slug, onClose }) {
     };
   }, [slug]);
 
-  useEffect(() => {
-    const prev = document.activeElement;
-    ref.current?.querySelector('button')?.focus();
-    const onKey = (e) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      prev?.focus?.();
-    };
-  }, [onClose]);
-
   const rows = useMemo(() => (sides ? withContext(lineDiff(sides.mine ?? '', sides.theirs ?? '')) : []), [sides]);
 
   async function choose(choice) {
@@ -120,8 +108,8 @@ export default function SourceConflictPanel({ slug, onClose }) {
       <div className="gi-dialog scp-dialog" ref={ref} data-testid="source-conflict-panel">
         <div className="tp-dialog-head">
           <div>
-            <h2 id="scp-title">Two versions of {slug}</h2>
-            <p>Your change and a teammate’s touched the same lines. Nothing is lost — choose which one the project keeps.</p>
+            <h2 id="scp-title">Review changes to {slug}</h2>
+            <p>Your draft has not been shared. Compare it with the project’s version before choosing what to keep.</p>
           </div>
           <button type="button" className="btn btn--ghost btn--sm" onClick={() => onClose()} aria-label="Close" data-testid="source-conflict-close">
             ×
@@ -129,6 +117,20 @@ export default function SourceConflictPanel({ slug, onClose }) {
         </div>
         {sides && (
           <>
+            <div className="scp-recovery">
+              <details>
+                <summary>Original draft</summary>
+                {sides.original !== null && sides.original !== undefined ? (
+                  <pre tabIndex={0} role="region" aria-label="Original draft" data-testid="source-conflict-original">{sides.original}</pre>
+                ) : <p>The original draft is not available on this device.</p>}
+              </details>
+              <details>
+                <summary>Starting version</summary>
+                {sides.base !== null && sides.base !== undefined ? (
+                  <pre tabIndex={0} role="region" aria-label="Starting version" data-testid="source-conflict-base">{sides.base}</pre>
+                ) : <p>The version this draft started from is not known.</p>}
+              </details>
+            </div>
             <div className="scp-legend" aria-hidden="true">
               <span className="scp-key scp-key--mine">Your version</span>
               <span className="scp-key scp-key--theirs">The project’s version</span>

package/apps/studio/client/styles/3-shell-maude.css

@@ -80,7 +80,7 @@
 .st-mb-file b { color: var(--fg-0); font-weight: 600; }
 .st-mb-sep { width: 1px; height: 16px; background: var(--border-default); }
 .st-mb-count { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); }
-.st-mb-proj { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--status-success); }
+.st-mb-proj { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); }
 .st-reportbug {
   appearance: none; border: 0; background: transparent; cursor: pointer;
   width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm);
@@ -193,7 +193,7 @@
   font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); z-index: 30;
 }
 .st-sb-slot { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
-.st-sb-slot .lbl { color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; flex: none; }
+.st-sb-slot .lbl { color: var(--fg-2); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; flex: none; }
 .st-sb-slot .val { color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .st-sb-slot + .st-sb-slot { padding-left: var(--space-4); border-left: 1px solid var(--border-subtle); }
 .st-sb-active { font-weight: 500; }
@@ -225,7 +225,7 @@
 
 /* The running release. Ambient, not a state to act on — so it sits at the same
    weight as a slot label rather than at .val's foreground. No new tokens. */
-.st-sb-version .val { color: var(--fg-3); }
+.st-sb-version .val { color: var(--fg-2); }
 
 /* ═══ Task 4 — body row · sidebar · tree · rail ═══════════════════════════════ */
 
@@ -243,7 +243,7 @@
 .st-dockslot > .st-rpanel,
 .st-dockslot > .st-sidebar { flex: 1 1 auto; width: 100%; min-height: 0; }
 .st-docktabs { display: flex; gap: 2px; padding: var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-1); flex: none; }
-.st-docktab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); transition: color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.st-docktab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); transition: color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
 .st-docktab:hover { color: var(--fg-1); background: var(--bg-2); }
 .st-docktab.is-active { color: var(--fg-0); background: var(--bg-2); box-shadow: inset 0 -2px 0 var(--accent); }
 .st-docktab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@@ -308,8 +308,10 @@
    accent language as .st-row.is-drop-target. */
 .st-tree-sec-hd.is-drop-target { background: var(--accent-tint); color: var(--fg-0); box-shadow: inset 2px 0 0 var(--accent); }
 .st-tree-sec-hd .st-sec-name { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
+/* --fg-2, not --fg-3: a 10px count is text, and --fg-3 is 3.0:1 on the
+   sidebar — below WCAG AA (axe on the cloud cell, F3 S19, 2026-09-24). */
 .st-tree-sec-hd .st-pill {
-  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
+  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
   padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
 }
 .st-tree-empty { padding: var(--space-2) var(--space-5); color: var(--fg-3); font-size: var(--type-xs); font-style: italic; }
@@ -357,6 +359,8 @@
 }
 /* delete affordance — sibling of the row button (can't nest buttons). */
 .st-row-wrap { position: relative; display: flex; align-items: center; }
+.st-tree-item:focus-visible { outline: none; }
+.st-tree-item:focus-visible > .st-row-wrap { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
 .st-row-wrap .st-row { flex: 1; }
 .st-row-del {
   position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
@@ -564,6 +568,10 @@
 .st-banner-close:hover { background: color-mix(in oklab, var(--fg-0) 12%, transparent); color: var(--fg-0); }
 
 /* ─── Command palette (⌘K) ───────────────────────────────────────────────── */
+/* The informational role notice sits BELOW a modal's scrim (9000): it covered
+   the preview dialog's own header (S19). Warnings and errors keep
+   .st-banner's 9100 and stay visible over a dialog. */
+.st-banner.st-banner--info { z-index: 8990; }
 .st-scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--bg-0) 62%, transparent); z-index: 9000; display: grid; place-items: start center; padding-top: 12vh; }
 .st-palette {
   width: 560px; max-width: 92vw; background: var(--bg-2); border: 1px solid var(--border-default);
@@ -1563,7 +1571,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 }
 .st-skel-cap {
   font-size: var(--type-xs); letter-spacing: var(--tracking-wide);
-  text-transform: uppercase; color: var(--fg-3);
+  text-transform: uppercase; color: var(--fg-2);
 }
 .skel {
   display: block;
@@ -1744,7 +1752,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gp-panel-title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-md); color: var(--fg-0); flex: none; }
 .gp-count { font-family: var(--font-mono); font-size: var(--type-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-muted); white-space: nowrap; flex: none; }
 .gp-spacer { flex: 1; min-width: var(--space-2); }
-.gp-draft { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); white-space: nowrap; min-width: 0; flex: 0 1 auto; }
+.gp-draft { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); white-space: nowrap; min-width: 0; flex: 0 1 auto; }
 .gp-draft b { color: var(--fg-0); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
 .gp-draft .gp-sep { color: var(--fg-3); }
 .gp-x { appearance: none; border: none; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: var(--radius-xs); }
@@ -2263,7 +2271,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .dv-zoom-btn:hover { background: var(--bg-3); color: var(--fg-0); }
 .dv-zoom-val { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); min-width: 44px; text-align: center; cursor: pointer; appearance: none; border: none; background: transparent; }
 .dv-zoom-val:hover { color: var(--fg-0); }
-.dv-zoom-sync { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-3); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); margin-left: var(--space-1); }
+.dv-zoom-sync { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); margin-left: var(--space-1); }
 
 /* overlay / slider compare (shares the locked view; frozen layers for the wipe) */
 .dv-overlay { --dv-split: 52%; position: relative; flex: 1; min-height: 0; margin: 0 auto; width: 100%; max-width: 900px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
@@ -2639,7 +2647,11 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .sp-ai-held { display: flex; flex-direction: column; gap: var(--space-2); }
 .sp-ai-actions { display: flex; gap: var(--space-2); }
 /* ── SourceConflictPanel (plan T28) — two versions, line by line. ── */
-.gi-dialog.scp-dialog { width: min(760px, 94vw); max-height: min(820px, 90vh); overflow: hidden; display: flex; flex-direction: column; padding: var(--space-6); gap: var(--space-4); }
+.gi-dialog.scp-dialog { width: min(760px, 94vw); max-height: min(820px, 90vh); overflow: auto; display: flex; flex-direction: column; padding: var(--space-6); gap: var(--space-4); }
+.scp-recovery { display: grid; gap: var(--space-2); font-size: var(--type-xs); color: var(--fg-1); }
+.scp-recovery summary { cursor: pointer; padding: var(--space-2) 0; }
+.scp-recovery pre { margin: 0; padding: var(--space-3); max-height: 160px; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-1); font: var(--type-xs)/1.55 var(--font-mono); }
+.scp-recovery summary:focus-visible, .scp-recovery pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .scp-legend { display: flex; gap: var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
 .scp-key::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-2); vertical-align: -1px; }
 .scp-key--mine::before { background: color-mix(in oklch, var(--status-warn) 45%, transparent); }

package/apps/studio/client/styles/4-components.css

@@ -1614,7 +1614,9 @@
   position: fixed;
   left: 16px;
   bottom: 16px;
-  z-index: 9001;
+  /* below a modal's scrim (.st-scrim 9000): it sat on top of the history
+     preview dialog (S19). */
+  z-index: 8990;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2030,7 +2032,7 @@
 .st-cloudwho-out {
   font: inherit;
   font-size: 12px;
-  color: var(--u-fg-3);
+  color: var(--u-fg-2);
   background: none;
   border: 0;
   cursor: pointer;

package/apps/studio/collab/index.ts

@@ -64,6 +64,15 @@ export function createCollab(ctx: Context, api: Api): Collab {
     api,
     fileForSlug,
     shouldSeed: (slug) => !(ctx.sharedDoc && registryRef?.isPinned(slug)),
+    // Issue #133 — record comment ids as synced only once the hub holds them,
+    // and only for the room that IS the hub's doc (pinned). No hub linked:
+    // nothing is "synced" — recording then would label local comments with
+    // the last hub's identity and a relink would drop them (security review
+    // F1a). Linked but the runtime is not up yet: not confirmed.
+    commentsConfirmed: (slug) => {
+      if (!ctx.cfg?.linkedHub || !registryRef?.isPinned(slug)) return false;
+      return ctx.syncControl?.current?.()?.commentsConfirmedOnHub?.(slug) === true;
+    },
     // A room restored from its own `.ydoc.bin` must not outrank a sidecar the
     // hub (or an editor) wrote after that cache — see `reconcileAfterCache`.
     // Only for rooms no hub provider owns: a pinned doc is the hub's replica

package/apps/studio/collab/persistence.ts

@@ -11,6 +11,7 @@ import type { Context } from '../context.ts';
 // From the LEAF, never from `sync/codec.ts` — codec imports `Y_TYPES` from this
 // file, so reaching for it here would close a cycle (see sync/limits.ts).
 import { commentKey } from '../sync/comment-identity.ts';
+import { type CommentLedger, commentLedgerFor } from '../sync/comment-ledger.ts';
 import { MAX_ANNOTATIONS_BYTES, MAX_COMMENTS_BYTES, withinByteCap } from '../sync/limits.ts';
 import { ensureStateDir, type RoomCallbacks } from './room.ts';
 
@@ -60,6 +61,19 @@ export interface PersistenceDeps {
    * seed). Absent → cache-only restore, the previous behavior.
    */
   reconcileAfterCache?: (slug: string, doc: Y.Doc, cachedAtMs: number) => Promise<void>;
+  /**
+   * Issue #133 — which comment ids this machine synced before (see
+   * sync/comment-ledger.ts). Defaults to the process-wide ledger for the design
+   * root; tests inject a fresh one per simulated launch.
+   */
+  commentLedger?: CommentLedger;
+  /**
+   * May the ledger record `slug`'s projected comments as synced? Only when the
+   * hub is known to hold them (see `commentsConfirmedOnHub`, sync/index.ts). A
+   * projection of a comment added offline would otherwise read as "synced" and
+   * the next cold start would drop it. Absent → always (tests, local projects).
+   */
+  commentsConfirmed?: (slug: string) => boolean;
 }
 
 /**
@@ -93,6 +107,7 @@ function withinCap(slug: string, lane: string, value: string, max: number): bool
 export function createPersistence(deps: PersistenceDeps): RoomCallbacks {
   const { ctx, api, fileForSlug } = deps;
   const stateDir = ensureStateDir(ctx.paths.designRoot);
+  const ledger = deps.commentLedger ?? commentLedgerFor(ctx.paths.designRoot);
 
   // Per-slug: every comment identity this doc has EVER carried (issue #111).
   //
@@ -180,6 +195,27 @@ export function createPersistence(deps: PersistenceDeps): RoomCallbacks {
     return ids;
   }
 
+  // Issue #133 (plan Task 8) — a comment that stays on this disk and out of the
+  // shared document is invisible to every other peer, and nothing said so: the
+  // report behind #133 had to be reconstructed from code. Say it once per
+  // change of the count, in the server log (which the in-app bug report
+  // attaches), and say when it clears.
+  const localOnlyBySlug = new Map<string, number>();
+  function reportLocalOnly(slug: string, n: number): void {
+    const prev = localOnlyBySlug.get(slug) ?? 0;
+    if (n === prev) return;
+    localOnlyBySlug.set(slug, n);
+    if (n > 0) {
+      console.warn(
+        `[collab/${slug}] comments: ${n} on this disk ${n === 1 ? 'is' : 'are'} not in the shared document yet — kept, not overwritten; other peers do not see ${n === 1 ? 'it' : 'them'} until ${n === 1 ? 'it arrives' : 'they arrive'}.`
+      );
+    } else {
+      console.log(
+        `[collab/${slug}] comments: every comment on this disk is in the shared document again.`
+      );
+    }
+  }
+
   function ydocBinPath(slug: string): string {
     return path.join(stateDir, `${slug}.ydoc.bin`);
   }
@@ -284,10 +320,22 @@ export function createPersistence(deps: PersistenceDeps): RoomCallbacks {
       // brings that id into the doc is itself a doc update, which re-arms the
       // flush, and the next pass writes the merged state. A delete still
       // materializes — its id IS in `everSeen`, so the write proceeds.
+      //
+      // Issue #133 — `everSeen` starts empty on every launch, so an id deleted
+      // by a peer while this machine was closed also reads as "never carried"
+      // and froze the file for good. The ledger knows it was synced from here
+      // before: an id in the ledger and absent from the doc is a delete.
       const onDisk = await api.loadCommentsForFile(file);
-      const behind = onDisk.some((c) => !everSeen.has(commentKey(c)));
+      const synced = ledger.get(slug);
+      const localOnly = onDisk.filter((c) => {
+        const k = commentKey(c);
+        return !everSeen.has(k) && !synced.has(k);
+      }).length;
+      const behind = localOnly > 0;
+      reportLocalOnly(slug, localOnly);
       if (!behind && withinCap(slug, 'comments', JSON.stringify(list), MAX_COMMENTS_BYTES)) {
         await api.saveCommentsForFile(file, list);
+        if (deps.commentsConfirmed?.(slug) ?? true) ledger.record(slug, list.map(commentKey));
       }
     }
 

package/apps/studio/comment-anchor.ts

@@ -0,0 +1,116 @@
+/**
+ * @file       comment-anchor.ts — where a comment lives when it is not on an element
+ * @scope      apps/studio/comment-anchor.ts
+ * @purpose    Two anchors besides the `data-cd-id` element selector (#134/#136):
+ *
+ *   - `annotationId` — a comment placed on a sticky, shape, pen stroke, image,
+ *     link or media card anchors to that annotation's `data-id`. Annotation ids
+ *     are persisted in `*.annotations.svg` and stable across edits, undo and
+ *     sync (see `stableAnnotationId` in annotations-model.ts for the one case
+ *     they were not). The pin follows the annotation; a deleted annotation
+ *     DETACHES the comment, it never deletes it.
+ *   - `world` — a comment placed on empty canvas holds a WORLD point, so it stays
+ *     put through pan and zoom. The legacy screen `bounds` captured at create
+ *     time only matched the camera of that moment.
+ *
+ * Runs inside the canvas iframe, in both the canvas bundle and the separate
+ * comment-mount bundle — so the camera is read through `window.__maudeViewport`
+ * (canvas-lib.tsx), not through a module import that would be another copy.
+ * Annotation ids are peer-supplied (DDR-054): every id is validated before it
+ * reaches a selector.
+ */
+
+export interface WorldPoint {
+  x: number;
+  y: number;
+}
+
+interface Viewport {
+  x: number;
+  y: number;
+  zoom: number;
+}
+
+/** Shape rule for an annotation id — the `s_…` scheme plus imported ids. */
+const ANNOTATION_ID_RE = /^[A-Za-z0-9_-]{1,64}$/;
+/** World coordinates beyond this are garbage, not a place on the board. */
+const MAX_WORLD = 10_000_000;
+
+export function isAnnotationId(v: unknown): v is string {
+  return typeof v === 'string' && ANNOTATION_ID_RE.test(v);
+}
+
+export function isWorldPoint(v: unknown): v is WorldPoint {
+  if (!v || typeof v !== 'object') return false;
+  const { x, y } = v as { x?: unknown; y?: unknown };
+  return (
+    typeof x === 'number' &&
+    typeof y === 'number' &&
+    Number.isFinite(x) &&
+    Number.isFinite(y) &&
+    Math.abs(x) <= MAX_WORLD &&
+    Math.abs(y) <= MAX_WORLD
+  );
+}
+
+function liveCamera(): { vp: Viewport; left: number; top: number } | null {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return null;
+  const vp = window.__maudeViewport?.() ?? null;
+  if (!vp || !(vp.zoom > 0)) return null;
+  const host = document.querySelector('.dc-canvas');
+  if (!host) return null;
+  const r = host.getBoundingClientRect();
+  return { vp, left: r.left, top: r.top };
+}
+
+/** Client (iframe viewport) point → world point, or null with no world plane. */
+export function clientToWorld(clientX: number, clientY: number): WorldPoint | null {
+  const cam = liveCamera();
+  if (!cam) return null;
+  const { vp } = cam;
+  return {
+    x: (clientX - cam.left - vp.x) / vp.zoom,
+    y: (clientY - cam.top - vp.y) / vp.zoom,
+  };
+}
+
+/** World point → client point, or null with no world plane. */
+export function worldToClient(p: WorldPoint): { x: number; y: number } | null {
+  const cam = liveCamera();
+  if (!cam) return null;
+  const { vp } = cam;
+  return { x: cam.left + vp.x + p.x * vp.zoom, y: cam.top + vp.y + p.y * vp.zoom };
+}
+
+/** The live element of an annotation, or null. */
+export function annotationElement(id: string): Element | null {
+  if (typeof document === 'undefined' || !isAnnotationId(id)) return null;
+  // The id is already restricted to [A-Za-z0-9_-]; no escaping needed.
+  return document.querySelector(`[data-id="${id}"][data-tool]`);
+}
+
+/**
+ * The annotation under a client point, if any. Geometric rather than
+ * `elementFromPoint`: in comment mode the annotation layer is not the hit
+ * target (its pointer events belong to the draw tools), which is exactly why a
+ * click on a sticky used to fall through to a floating comment.
+ *
+ * The smallest containing box wins, so a sticky inside a section anchors to
+ * the sticky. Sections are skipped: they frame artboards and other elements,
+ * and "a comment somewhere inside this section" is a floating comment.
+ */
+export function annotationIdAt(clientX: number, clientY: number): string | null {
+  if (typeof document === 'undefined') return null;
+  let best: { id: string; area: number } | null = null;
+  for (const el of Array.from(document.querySelectorAll('[data-id][data-tool]'))) {
+    if (el.getAttribute('data-tool') === 'section') continue;
+    const id = el.getAttribute('data-id');
+    if (!isAnnotationId(id)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 && r.height <= 0) continue;
+    if (clientX < r.left || clientX > r.right || clientY < r.top || clientY > r.bottom) continue;
+    const area = Math.max(1, r.width) * Math.max(1, r.height);
+    if (!best || area <= best.area) best = { id, area };
+  }
+  return best?.id ?? null;
+}