@elytracms/studio 0.0.39 → 0.0.41

package/dist/components/cms/rich-text/toolbar-state.d.ts

@@ -0,0 +1,45 @@
+import type { Editor } from '@tiptap/react';
+/** Snapshot of the active formatting state, recomputed reactively per selection. */
+export interface ToolbarState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    paragraph: boolean;
+    headingLevel: number | null;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+/**
+ * The toolbar's state when there is no live editor to read — every control
+ * inactive and both history actions disabled. Returned by
+ * {@link toolbarStateFromEditor} for a missing / not-yet-initialized / destroyed
+ * editor so the toolbar renders inert instead of throwing.
+ */
+export declare const DISABLED_TOOLBAR_STATE: ToolbarState;
+/**
+ * Project a TipTap editor into the toolbar's active-state shape — NULL-SAFE, and
+ * the pure function the toolbar's `useEditorState` selector delegates to.
+ *
+ * `useEditorState`'s selector runs through `useSyncExternalStoreWithSelector`, so
+ * React can invoke it against an editor that is missing, not yet initialized, or
+ * already DESTROYED — e.g. during React 19 concurrent teardown, or when the
+ * EC-322 lazy/Suspense boundary unmounts the editor subtree and `useEditor`'s
+ * cleanup has already called `editor.destroy()` while the external store fires the
+ * selector one last time. TipTap v3 nulls the editor's `commandManager` (and
+ * `editorView`) on destroy, so `editor.can()` then throws
+ * `Cannot read properties of null (reading 'can')` — the published-package crash
+ * Konditorei hit (`editor.isActive(...)` returns stale state and does NOT throw,
+ * which is why the reported stack points specifically at `.can`).
+ *
+ * Guarding on `isDestroyed` (safe on a destroyed editor — it reads
+ * `editorView?.isDestroyed ?? true`) short-circuits before any command access; a
+ * defensive `try/catch` covers any other pre-init window. The result is the
+ * disabled shape rather than a throw, independent of mount/unmount timing.
+ */
+export declare function toolbarStateFromEditor(editor: Editor | null | undefined): ToolbarState;

package/dist/components/cms/rich-text/toolbar-state.js

@@ -0,0 +1,66 @@
+/**
+ * The toolbar's state when there is no live editor to read — every control
+ * inactive and both history actions disabled. Returned by
+ * {@link toolbarStateFromEditor} for a missing / not-yet-initialized / destroyed
+ * editor so the toolbar renders inert instead of throwing.
+ */
+export const DISABLED_TOOLBAR_STATE = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strike: false,
+    code: false,
+    bulletList: false,
+    orderedList: false,
+    blockquote: false,
+    codeBlock: false,
+    paragraph: false,
+    headingLevel: null,
+    canUndo: false,
+    canRedo: false,
+};
+/**
+ * Project a TipTap editor into the toolbar's active-state shape — NULL-SAFE, and
+ * the pure function the toolbar's `useEditorState` selector delegates to.
+ *
+ * `useEditorState`'s selector runs through `useSyncExternalStoreWithSelector`, so
+ * React can invoke it against an editor that is missing, not yet initialized, or
+ * already DESTROYED — e.g. during React 19 concurrent teardown, or when the
+ * EC-322 lazy/Suspense boundary unmounts the editor subtree and `useEditor`'s
+ * cleanup has already called `editor.destroy()` while the external store fires the
+ * selector one last time. TipTap v3 nulls the editor's `commandManager` (and
+ * `editorView`) on destroy, so `editor.can()` then throws
+ * `Cannot read properties of null (reading 'can')` — the published-package crash
+ * Konditorei hit (`editor.isActive(...)` returns stale state and does NOT throw,
+ * which is why the reported stack points specifically at `.can`).
+ *
+ * Guarding on `isDestroyed` (safe on a destroyed editor — it reads
+ * `editorView?.isDestroyed ?? true`) short-circuits before any command access; a
+ * defensive `try/catch` covers any other pre-init window. The result is the
+ * disabled shape rather than a throw, independent of mount/unmount timing.
+ */
+export function toolbarStateFromEditor(editor) {
+    if (!editor || editor.isDestroyed)
+        return DISABLED_TOOLBAR_STATE;
+    try {
+        return {
+            bold: editor.isActive('bold'),
+            italic: editor.isActive('italic'),
+            underline: editor.isActive('underline'),
+            strike: editor.isActive('strike'),
+            code: editor.isActive('code'),
+            bulletList: editor.isActive('bulletList'),
+            orderedList: editor.isActive('orderedList'),
+            blockquote: editor.isActive('blockquote'),
+            codeBlock: editor.isActive('codeBlock'),
+            paragraph: editor.isActive('paragraph'),
+            headingLevel: [1, 2, 3, 4, 5, 6].find((l) => editor.isActive('heading', { level: l })) ?? null,
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo(),
+        };
+    }
+    catch {
+        return DISABLED_TOOLBAR_STATE;
+    }
+}
+//# sourceMappingURL=toolbar-state.js.map

package/dist/components/cms/rich-text/toolbar-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-state.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar-state.ts"],"names":[],"mappings":"AAmBA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAiB;IAClD,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,YAAY,EAAE,IAAI;IAClB,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,KAAK;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,sBAAsB,CAAC,MAAiC;IACtE,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,WAAW;QAAE,OAAO,sBAAsB,CAAA;IAChE,IAAI,CAAC;QACH,OAAO;YACL,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC7B,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACjC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACjC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC7B,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YACzC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;YAC3C,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YACzC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI;YAC9F,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE;YAC5B,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE;SAC7B,CAAA;IACH,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,sBAAsB,CAAA;IAC/B,CAAC;AACH,CAAC","sourcesContent":["import type { Editor } from '@tiptap/react'\n\n/** Snapshot of the active formatting state, recomputed reactively per selection. */\nexport interface ToolbarState {\n  bold: boolean\n  italic: boolean\n  underline: boolean\n  strike: boolean\n  code: boolean\n  bulletList: boolean\n  orderedList: boolean\n  blockquote: boolean\n  codeBlock: boolean\n  paragraph: boolean\n  headingLevel: number | null\n  canUndo: boolean\n  canRedo: boolean\n}\n\n/**\n * The toolbar's state when there is no live editor to read — every control\n * inactive and both history actions disabled. Returned by\n * {@link toolbarStateFromEditor} for a missing / not-yet-initialized / destroyed\n * editor so the toolbar renders inert instead of throwing.\n */\nexport const DISABLED_TOOLBAR_STATE: ToolbarState = {\n  bold: false,\n  italic: false,\n  underline: false,\n  strike: false,\n  code: false,\n  bulletList: false,\n  orderedList: false,\n  blockquote: false,\n  codeBlock: false,\n  paragraph: false,\n  headingLevel: null,\n  canUndo: false,\n  canRedo: false,\n}\n\n/**\n * Project a TipTap editor into the toolbar's active-state shape — NULL-SAFE, and\n * the pure function the toolbar's `useEditorState` selector delegates to.\n *\n * `useEditorState`'s selector runs through `useSyncExternalStoreWithSelector`, so\n * React can invoke it against an editor that is missing, not yet initialized, or\n * already DESTROYED — e.g. during React 19 concurrent teardown, or when the\n * EC-322 lazy/Suspense boundary unmounts the editor subtree and `useEditor`'s\n * cleanup has already called `editor.destroy()` while the external store fires the\n * selector one last time. TipTap v3 nulls the editor's `commandManager` (and\n * `editorView`) on destroy, so `editor.can()` then throws\n * `Cannot read properties of null (reading 'can')` — the published-package crash\n * Konditorei hit (`editor.isActive(...)` returns stale state and does NOT throw,\n * which is why the reported stack points specifically at `.can`).\n *\n * Guarding on `isDestroyed` (safe on a destroyed editor — it reads\n * `editorView?.isDestroyed ?? true`) short-circuits before any command access; a\n * defensive `try/catch` covers any other pre-init window. The result is the\n * disabled shape rather than a throw, independent of mount/unmount timing.\n */\nexport function toolbarStateFromEditor(editor: Editor | null | undefined): ToolbarState {\n  if (!editor || editor.isDestroyed) return DISABLED_TOOLBAR_STATE\n  try {\n    return {\n      bold: editor.isActive('bold'),\n      italic: editor.isActive('italic'),\n      underline: editor.isActive('underline'),\n      strike: editor.isActive('strike'),\n      code: editor.isActive('code'),\n      bulletList: editor.isActive('bulletList'),\n      orderedList: editor.isActive('orderedList'),\n      blockquote: editor.isActive('blockquote'),\n      codeBlock: editor.isActive('codeBlock'),\n      paragraph: editor.isActive('paragraph'),\n      headingLevel: [1, 2, 3, 4, 5, 6].find((l) => editor.isActive('heading', { level: l })) ?? null,\n      canUndo: editor.can().undo(),\n      canRedo: editor.can().redo(),\n    }\n  } catch {\n    return DISABLED_TOOLBAR_STATE\n  }\n}\n"]}

package/dist/components/cms/rich-text/toolbar.js

@@ -5,6 +5,7 @@ import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMe
 import { translate } from '@elytracms/studio/lib/i18n';
 import { ToolbarButton } from './toolbar-button';
 import { LinkControl } from './link-control';
+import { toolbarStateFromEditor } from './toolbar-state';
 /**
  * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that
  * reads its active/enabled state reactively from the editor (`useEditorState`) so a
@@ -12,23 +13,14 @@ import { LinkControl } from './link-control';
  * mousedown so clicking it never steals the editor selection.
  */
 export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }) {
+    // The selector delegates to a pure, NULL-SAFE projection: `useEditorState` runs
+    // it through an external store that React can fire against a destroyed/pre-init
+    // editor (concurrent teardown, the EC-322 lazy boundary), where `editor.can()`
+    // would throw on TipTap v3's nulled `commandManager`. `toolbarStateFromEditor`
+    // returns the disabled shape in that window instead of crashing the toolbar.
     const state = useEditorState({
         editor,
-        selector: ({ editor }) => ({
-            bold: editor.isActive('bold'),
-            italic: editor.isActive('italic'),
-            underline: editor.isActive('underline'),
-            strike: editor.isActive('strike'),
-            code: editor.isActive('code'),
-            bulletList: editor.isActive('bulletList'),
-            orderedList: editor.isActive('orderedList'),
-            blockquote: editor.isActive('blockquote'),
-            codeBlock: editor.isActive('codeBlock'),
-            paragraph: editor.isActive('paragraph'),
-            headingLevel: [1, 2, 3, 4, 5, 6].find((l) => editor.isActive('heading', { level: l })) ?? null,
-            canUndo: editor.can().undo(),
-            canRedo: editor.can().redo(),
-        }),
+        selector: ({ editor }) => toolbarStateFromEditor(editor),
     });
     const styleLabel = state.headingLevel != null
         ? translate('richText.heading', { level: state.headingLevel })

package/dist/components/cms/rich-text/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,UAAU,EACV,aAAa,EACb,SAAS,EACT,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,gBAAgB,GACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AA8B5C;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAwB;IACjG,MAAM,KAAK,GAAG,cAAc,CAAC;QAC3B,MAAM;QACN,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAgB,EAAE,CAAC,CAAC;YACvC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC7B,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACjC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACjC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC7B,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YACzC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;YAC3C,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YACzC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI;YAC9F,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE;YAC5B,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE;SAC7B,CAAC;KACH,CAAC,CAAA;IAEF,MAAM,UAAU,GACd,KAAK,CAAC,YAAY,IAAI,IAAI;QACxB,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;QAC9D,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;IAErC,OAAO,CACL,MAAC,OAAO,IAAC,SAAS,EAAC,8EAA8E,aAC/F,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,4BAA4B,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,aAErC,UAAU,EACX,KAAC,WAAW,IAAC,SAAS,EAAC,mBAAmB,GAAG,IACtC,GACW,EACtB,MAAC,mBAAmB,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,UAAU,aACrD,MAAC,gBAAgB,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,aAC3E,KAAC,OAAO,IAAC,SAAS,EAAC,UAAU,GAAG,OAAE,SAAS,CAAC,oBAAoB,CAAC,IAChD,EACjB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnC,MAAC,gBAAgB,IAEf,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,aAErE,gBAAM,SAAS,EAAC,yCAAyC,kBAAG,KAAK,IAAQ,EAAC,GAAG,EAC5E,SAAS,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,CAAC,KAJpC,KAAK,CAKO,CACpB,CAAC,IACkB,IACT,EAEf,KAAC,gBAAgB,KAAG,EAEpB,MAAC,YAAY,eACX,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,YAExD,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,GACf,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,YAE1D,KAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,GACjB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,eAAe,EAAE,CAAC,GAAG,EAAE,YAE7D,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACpB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,YAE1D,KAAC,aAAa,IAAC,SAAS,EAAC,UAAU,GAAG,GACxB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,YAExD,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,GACf,IACH,EAEf,KAAC,gBAAgB,KAAG,EAEpB,MAAC,YAAY,eACX,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,KAAK,EAAE,SAAS,CAAC,qBAAqB,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,YAE9D,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,GAAG,GACf,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,WAAW,EACzB,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAAC,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,iBAAiB,EAAE,CAAC,GAAG,EAAE,YAE/D,KAAC,WAAW,IAAC,SAAS,EAAC,UAAU,GAAG,GACtB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,KAAK,EAAE,SAAS,CAAC,qBAAqB,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,YAE9D,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,eAAe,EAAE,CAAC,GAAG,EAAE,YAE7D,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,GAAG,GACrB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,SAAS,CAAC,yBAAyB,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,iBAAiB,EAAE,CAAC,GAAG,EAAE,YAE/D,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,IACH,EAEf,KAAC,gBAAgB,KAAG,EAEpB,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,EAChD,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,WAAW,YACzE,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACpB,CACjB,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,WAAW,YACzE,KAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,GACjB,CACjB,CAAC,CAAC,CAAC,IAAI,IACK,EAEf,cAAK,SAAS,EAAC,QAAQ,GAAG,EAE1B,MAAC,YAAY,eACX,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EACxB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,YAElD,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,EAChB,KAAC,aAAa,IACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,EACxB,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,YAElD,KAAC,KAAK,IAAC,SAAS,EAAC,UAAU,GAAG,GAChB,IACH,IACP,CACX,CAAA;AACH,CAAC","sourcesContent":["import { useEditorState } from '@tiptap/react'\nimport type { Editor } from '@tiptap/react'\nimport {\n  Blocks,\n  Bold,\n  ChevronDown,\n  Code,\n  ImagePlus,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Pilcrow,\n  Quote,\n  Redo2,\n  SquareCode,\n  Strikethrough,\n  Underline,\n  Undo2,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Toolbar,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { ToolbarButton } from './toolbar-button'\nimport { LinkControl } from './link-control'\nimport type { LinkTarget } from './link-control'\n\ninterface RichTextToolbarProps {\n  editor: Editor\n  /** Internal-link destinations across the workspace (empty ⇒ external-only). */\n  targets: LinkTarget[]\n  /** Open the shared image picker (omitted ⇒ no image button). */\n  onOpenImage?: () => void\n  /** Open the shared component-embed picker (omitted ⇒ no embed button). */\n  onOpenEmbed?: () => void\n}\n\n/** Snapshot of the active formatting state, recomputed reactively per selection. */\ninterface ToolbarState {\n  bold: boolean\n  italic: boolean\n  underline: boolean\n  strike: boolean\n  code: boolean\n  bulletList: boolean\n  orderedList: boolean\n  blockquote: boolean\n  codeBlock: boolean\n  paragraph: boolean\n  headingLevel: number | null\n  canUndo: boolean\n  canRedo: boolean\n}\n\n/**\n * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that\n * reads its active/enabled state reactively from the editor (`useEditorState`) so a\n * pressed control always mirrors the caret. Every button prevents the default\n * mousedown so clicking it never steals the editor selection.\n */\nexport function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }: RichTextToolbarProps) {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }): ToolbarState => ({\n      bold: editor.isActive('bold'),\n      italic: editor.isActive('italic'),\n      underline: editor.isActive('underline'),\n      strike: editor.isActive('strike'),\n      code: editor.isActive('code'),\n      bulletList: editor.isActive('bulletList'),\n      orderedList: editor.isActive('orderedList'),\n      blockquote: editor.isActive('blockquote'),\n      codeBlock: editor.isActive('codeBlock'),\n      paragraph: editor.isActive('paragraph'),\n      headingLevel: [1, 2, 3, 4, 5, 6].find((l) => editor.isActive('heading', { level: l })) ?? null,\n      canUndo: editor.can().undo(),\n      canRedo: editor.can().redo(),\n    }),\n  })\n\n  const styleLabel =\n    state.headingLevel != null\n      ? translate('richText.heading', { level: state.headingLevel })\n      : translate('richText.paragraph')\n\n  return (\n    <Toolbar className=\"h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-7 gap-1 px-2 font-medium\"\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {styleLabel}\n            <ChevronDown className=\"size-3 opacity-60\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n          <DropdownMenuItem onSelect={() => editor.chain().focus().setParagraph().run()}>\n            <Pilcrow className=\"size-3.5\" /> {translate('richText.paragraph')}\n          </DropdownMenuItem>\n          {([1, 2, 3] as const).map((level) => (\n            <DropdownMenuItem\n              key={level}\n              onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}\n            >\n              <span className=\"w-3.5 text-center text-xs font-semibold\">H{level}</span>{' '}\n              {translate('richText.heading', { level })}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bold}\n          label={translate('richText.bold')}\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <Bold className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.italic}\n          label={translate('richText.italic')}\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <Italic className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.underline}\n          label={translate('richText.underline')}\n          onClick={() => editor.chain().focus().toggleUnderline().run()}\n        >\n          <Underline className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.strike}\n          label={translate('richText.strike')}\n          onClick={() => editor.chain().focus().toggleStrike().run()}\n        >\n          <Strikethrough className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.code}\n          label={translate('richText.code')}\n          onClick={() => editor.chain().focus().toggleCode().run()}\n        >\n          <Code className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bulletList}\n          label={translate('richText.bulletList')}\n          onClick={() => editor.chain().focus().toggleBulletList().run()}\n        >\n          <List className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.orderedList}\n          label={translate('richText.orderedList')}\n          onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        >\n          <ListOrdered className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.blockquote}\n          label={translate('richText.blockquote')}\n          onClick={() => editor.chain().focus().toggleBlockquote().run()}\n        >\n          <Quote className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.codeBlock}\n          label={translate('richText.codeBlock')}\n          onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n        >\n          <SquareCode className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          label={translate('richText.horizontalRule')}\n          onClick={() => editor.chain().focus().setHorizontalRule().run()}\n        >\n          <Minus className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <LinkControl editor={editor} targets={targets} />\n        {onOpenImage ? (\n          <ToolbarButton label={translate('richText.image.add')} onClick={onOpenImage}>\n            <ImagePlus className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n        {onOpenEmbed ? (\n          <ToolbarButton label={translate('richText.embed.add')} onClick={onOpenEmbed}>\n            <Blocks className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n      </ToolbarGroup>\n\n      <div className=\"flex-1\" />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canUndo}\n          label={translate('richText.undo')}\n          onClick={() => editor.chain().focus().undo().run()}\n        >\n          <Undo2 className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canRedo}\n          label={translate('richText.redo')}\n          onClick={() => editor.chain().focus().redo().run()}\n        >\n          <Redo2 className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n    </Toolbar>\n  )\n}\n"]}
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEditorState } from '@tiptap/react'\nimport type { Editor } from '@tiptap/react'\nimport {\n  Blocks,\n  Bold,\n  ChevronDown,\n  Code,\n  ImagePlus,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Pilcrow,\n  Quote,\n  Redo2,\n  SquareCode,\n  Strikethrough,\n  Underline,\n  Undo2,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Toolbar,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { ToolbarButton } from './toolbar-button'\nimport { LinkControl } from './link-control'\nimport type { LinkTarget } from './link-control'\nimport { toolbarStateFromEditor } from './toolbar-state'\n\ninterface RichTextToolbarProps {\n  editor: Editor\n  /** Internal-link destinations across the workspace (empty ⇒ external-only). */\n  targets: LinkTarget[]\n  /** Open the shared image picker (omitted ⇒ no image button). */\n  onOpenImage?: () => void\n  /** Open the shared component-embed picker (omitted ⇒ no embed button). */\n  onOpenEmbed?: () => void\n}\n\n/**\n * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that\n * reads its active/enabled state reactively from the editor (`useEditorState`) so a\n * pressed control always mirrors the caret. Every button prevents the default\n * mousedown so clicking it never steals the editor selection.\n */\nexport function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }: RichTextToolbarProps) {\n  // The selector delegates to a pure, NULL-SAFE projection: `useEditorState` runs\n  // it through an external store that React can fire against a destroyed/pre-init\n  // editor (concurrent teardown, the EC-322 lazy boundary), where `editor.can()`\n  // would throw on TipTap v3's nulled `commandManager`. `toolbarStateFromEditor`\n  // returns the disabled shape in that window instead of crashing the toolbar.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor }) => toolbarStateFromEditor(editor),\n  })\n\n  const styleLabel =\n    state.headingLevel != null\n      ? translate('richText.heading', { level: state.headingLevel })\n      : translate('richText.paragraph')\n\n  return (\n    <Toolbar className=\"h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-7 gap-1 px-2 font-medium\"\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {styleLabel}\n            <ChevronDown className=\"size-3 opacity-60\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n          <DropdownMenuItem onSelect={() => editor.chain().focus().setParagraph().run()}>\n            <Pilcrow className=\"size-3.5\" /> {translate('richText.paragraph')}\n          </DropdownMenuItem>\n          {([1, 2, 3] as const).map((level) => (\n            <DropdownMenuItem\n              key={level}\n              onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}\n            >\n              <span className=\"w-3.5 text-center text-xs font-semibold\">H{level}</span>{' '}\n              {translate('richText.heading', { level })}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bold}\n          label={translate('richText.bold')}\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <Bold className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.italic}\n          label={translate('richText.italic')}\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <Italic className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.underline}\n          label={translate('richText.underline')}\n          onClick={() => editor.chain().focus().toggleUnderline().run()}\n        >\n          <Underline className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.strike}\n          label={translate('richText.strike')}\n          onClick={() => editor.chain().focus().toggleStrike().run()}\n        >\n          <Strikethrough className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.code}\n          label={translate('richText.code')}\n          onClick={() => editor.chain().focus().toggleCode().run()}\n        >\n          <Code className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={state.bulletList}\n          label={translate('richText.bulletList')}\n          onClick={() => editor.chain().focus().toggleBulletList().run()}\n        >\n          <List className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.orderedList}\n          label={translate('richText.orderedList')}\n          onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        >\n          <ListOrdered className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.blockquote}\n          label={translate('richText.blockquote')}\n          onClick={() => editor.chain().focus().toggleBlockquote().run()}\n        >\n          <Quote className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={state.codeBlock}\n          label={translate('richText.codeBlock')}\n          onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n        >\n          <SquareCode className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          label={translate('richText.horizontalRule')}\n          onClick={() => editor.chain().focus().setHorizontalRule().run()}\n        >\n          <Minus className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n\n      <ToolbarSeparator />\n\n      <ToolbarGroup>\n        <LinkControl editor={editor} targets={targets} />\n        {onOpenImage ? (\n          <ToolbarButton label={translate('richText.image.add')} onClick={onOpenImage}>\n            <ImagePlus className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n        {onOpenEmbed ? (\n          <ToolbarButton label={translate('richText.embed.add')} onClick={onOpenEmbed}>\n            <Blocks className=\"size-3.5\" />\n          </ToolbarButton>\n        ) : null}\n      </ToolbarGroup>\n\n      <div className=\"flex-1\" />\n\n      <ToolbarGroup>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canUndo}\n          label={translate('richText.undo')}\n          onClick={() => editor.chain().focus().undo().run()}\n        >\n          <Undo2 className=\"size-3.5\" />\n        </ToolbarButton>\n        <ToolbarButton\n          active={false}\n          disabled={!state.canRedo}\n          label={translate('richText.redo')}\n          onClick={() => editor.chain().focus().redo().run()}\n        >\n          <Redo2 className=\"size-3.5\" />\n        </ToolbarButton>\n      </ToolbarGroup>\n    </Toolbar>\n  )\n}\n"]}

package/dist/components/cms/version-compare.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { ArrowRight, ChevronDown, ChevronLeft, ChevronRight, Image as ImageIcon, RotateCcw } from 'lucide-react';
 import { diffDocuments } from '@elytracms/core/content';
-import { isAssetNode, readAssetId, readDocumentRef } from '@elytracms/core/cms-core';
+import { assetSubfieldsOf, isAssetNode, readAssetId, readDocumentRef } from '@elytracms/core/cms-core';
 import { Badge, Button, Code, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 import { useOperationCache } from '@elytracms/studio/lib/query';
 import { translate } from '@elytracms/studio/lib/i18n';
@@ -146,7 +146,7 @@ export function VersionCompare() {
                         : translate(diff.changes.length === 1 ? 'cms.version.changeSummary.one' : 'cms.version.changeSummary.other', {
                             count: diff.changes.length,
                             unchanged: diff.unchangedCount,
-                        }), !canRestore && diff.changes.length > 0 ? translate('cms.version.comparingPastVersionsHint') : ''] }), diff.changes.length === 0 ? (_jsx(CompareNotice, { children: translate('cms.version.versionsIdentical') })) : (_jsx(DiffDisplayContext.Provider, { value: diffDisplay, children: _jsxs("div", { className: "pb-1", children: [_jsxs("div", { className: cn(DIFF_ROW_GRID, 'px-2 pb-1.5'), children: [_jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.fieldColumnHeader') }), mode === 'unified' ? (_jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.unifiedCaption', { base: compare.base, target: targetLabel }) })) : (_jsx(TwoCol, { before: _jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.beforeVersion', { version: compare.base }) }), after: _jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.afterTarget', { target: targetLabel }) }) }))] }), groupRows.map(({ group, field, zebraStart }) => (_jsx(FieldGroup, { group: group, field: field, zebraStart: zebraStart, canRestore: canRestore, busy: busy, onRestore: restore }, group.field)))] }) }))] }));
+                        }), !canRestore && diff.changes.length > 0 ? translate('cms.version.comparingPastVersionsHint') : ''] }), diff.changes.length === 0 ? (_jsx(CompareNotice, { children: translate('cms.version.versionsIdentical') })) : (_jsx(DiffDisplayContext.Provider, { value: diffDisplay, children: _jsxs("div", { className: "pb-1", children: [_jsxs("div", { className: cn(DIFF_ROW_GRID, 'px-2 pb-1.5'), children: [_jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.fieldColumnHeader') }), mode === 'unified' ? (_jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.unifiedCaption', { base: compare.base, target: targetLabel }) })) : (_jsx(TwoCol, { before: _jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.beforeVersion', { version: compare.base }) }), after: _jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: translate('cms.version.afterTarget', { target: targetLabel }) }) }))] }), groupRows.map(({ group, field, zebraStart }) => (_jsx(FieldGroup, { group: group, field: field, zebraStart: zebraStart, baseVersion: compare.base, canRestore: canRestore, busy: busy, onRestore: restore }, group.field)))] }) }))] }));
 }
 const DiffDisplayContext = createContext(null);
 function useDiffDisplay() {
@@ -155,12 +155,15 @@ function useDiffDisplay() {
         throw new Error('useDiffDisplay must be rendered under the VersionCompare diff area');
     return ctx;
 }
-/** Shared grid template so the descriptor lane + header captions line up. */
-const DIFF_ROW_GRID = 'grid grid-cols-[7.5rem_1fr] items-start gap-x-4';
-/** A before | after grid; a divider sits at the midline (its own, scoped to this
- *  instance — every row uses the same proportions, so they all line up). */
+/** Shared grid template so the descriptor lane + header captions line up. 0.0.41:
+ *  a third slim column holds the field-row restore action — see {@link FieldRow}. */
+const DIFF_ROW_GRID = 'grid grid-cols-[7.5rem_1fr_1.75rem] items-start gap-x-4';
+/** A before | after grid with a clear central divider (0.0.39: a full-height ruled
+ *  gutter — the same proportions in every row type, so the before/after split reads
+ *  consistently across field rows, block-prop rows and word diffs). The columns keep
+ *  a symmetric inset off the divider so values never touch it. */
 function TwoCol({ before, after, className }) {
-    return (_jsxs("div", { className: cn('relative grid grid-cols-2 gap-x-6', className), children: [_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border", "aria-hidden": true }), _jsx("div", { className: "min-w-0", children: before }), _jsx("div", { className: "min-w-0", children: after })] }));
+    return (_jsxs("div", { className: cn('relative grid grid-cols-2 gap-x-8', className), children: [_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border", "aria-hidden": true }), _jsx("div", { className: "min-w-0 pr-1", children: before }), _jsx("div", { className: "min-w-0 pl-1", children: after })] }));
 }
 /**
  * Mode-aware value display (EC-317): side-by-side keeps the before | after
@@ -200,32 +203,37 @@ function DiffViewOption({ active, label, onClick }) {
  * `fieldLabel` active-locale resolver where a schema field exists, falling
  * back to the diff engine's default-locale label for a schema-drift key).
  */
-function FieldGroup({ group, field, zebraStart, canRestore, busy, onRestore, }) {
+function FieldGroup({ group, field, zebraStart, baseVersion, canRestore, busy, onRestore, }) {
     const label = field ? fieldLabel(field) : group.label;
     return (_jsx("div", { className: "border-t border-border/30", children: group.entries.map((entry, i) => {
             const rowId = `${group.field}:${entry.locale ?? '_'}`;
-            return (_jsx(FieldRow, { zebra: (zebraStart + i) % 2 === 1, descriptor: _jsx(FieldDescriptor, { label: label, locale: entry.locale, kind: entry.kind }), restore: canRestore ? (_jsx(RestoreIcon, { busy: busy, title: entry.locale
-                        ? translate('cms.version.restoreFieldLocale', {
-                            field: label,
-                            locale: localeChipLabel(entry.locale),
-                        })
-                        : translate('cms.version.restoreField', { field: label }), onClick: () => onRestore(fieldScope(entry)) })) : null, children: _jsx(EntryBody, { change: entry, rowId: rowId, canRestore: canRestore, busy: busy, onRestore: onRestore }) }, entry.locale ?? '__base__'));
+            // 0.0.39: ONE restore per row, right-aligned in the descriptor lane. A blocks
+            // field restores per BLOCK (each block owns its own restore in its header), so
+            // the field-level restore is dropped there — no more two icons per row.
+            const fieldRestore = canRestore && !entry.blocks ? (_jsx(RestoreIcon, { busy: busy, title: entry.locale
+                    ? translate('cms.version.restoreFieldLocale', {
+                        field: label,
+                        locale: localeChipLabel(entry.locale),
+                        version: baseVersion,
+                    })
+                    : translate('cms.version.restoreField', { field: label, version: baseVersion }), onClick: () => onRestore(fieldScope(entry)) })) : null;
+            return (_jsx(FieldRow, { zebra: (zebraStart + i) % 2 === 1, descriptor: _jsx(FieldDescriptor, { label: label, locale: entry.locale, kind: entry.kind }), restore: fieldRestore, children: _jsx(EntryBody, { change: entry, rowId: rowId, baseVersion: baseVersion, canRestore: canRestore, busy: busy, onRestore: onRestore }) }, entry.locale ?? '__base__'));
         }) }));
 }
 /** The descriptor lane + value area, one grid row (EC-317). Zebra alternates
  *  by the row's position across the WHOLE change-list, not per field group. */
 function FieldRow({ descriptor, restore, zebra, children, }) {
-    return (_jsxs("div", { className: cn(DIFF_ROW_GRID, 'rounded-sm px-2 py-2.5', zebra && 'bg-muted/40'), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [descriptor, restore] }), _jsx("div", { className: "min-w-0", children: children })] }));
+    return (_jsxs("div", { className: cn(DIFF_ROW_GRID, 'rounded-sm px-2 py-2.5', zebra && 'bg-muted/40'), children: [_jsx("div", { className: "min-w-0", children: descriptor }), _jsx("div", { className: "min-w-0", children: children }), _jsx("div", { className: "flex justify-end", children: restore })] }));
 }
 /** The descriptor lane's content (EC-317): field label always, locale chip only
  *  when this row is a localized variant, plus the quiet added/removed kind tag. */
 function FieldDescriptor({ label, locale, kind }) {
     return (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "sm", weight: "medium", className: "min-w-0 truncate", children: label }), _jsxs(Row, { gap: "1", wrap: true, children: [locale ? (_jsx(Badge, { variant: "outline", className: "px-1 py-0 text-[0.6rem] uppercase tracking-wide text-muted-foreground", children: localeChipLabel(locale) })) : null, _jsx(KindTag, { kind: kind })] })] }));
 }
-function EntryBody({ change, rowId, canRestore, busy, onRestore, }) {
+function EntryBody({ change, rowId, baseVersion, canRestore, busy, onRestore, }) {
     const localeScope = change.locale !== undefined ? { locale: change.locale } : {};
     if (change.blocks) {
-        return (_jsx(Stack, { gap: "3", className: "mt-1", children: change.blocks.map((block) => (_jsx(BlockSection, { block: block, rowId: `${rowId}|block:${block.blockId}`, canRestore: canRestore, busy: busy, onRestore: () => onRestore({ kind: 'block', field: change.field, blockId: block.blockId, ...localeScope }) }, block.blockId))) }));
+        return (_jsx(Stack, { gap: "2", className: "mt-1", children: change.blocks.map((block) => (_jsx(BlockSection, { block: block, rowId: `${rowId}|block:${block.blockId}`, baseVersion: baseVersion, canRestore: canRestore, busy: busy, onRestore: () => onRestore({ kind: 'block', field: change.field, blockId: block.blockId, ...localeScope }) }, block.blockId))) }));
     }
     if (change.type === 'richText') {
         const before = richTextToText(change.before);
@@ -239,9 +247,12 @@ function EntryBody({ change, rowId, canRestore, busy, onRestore, }) {
     }
     return (_jsx(DiffColumns, { kind: change.kind, before: _jsx(SideValue, { value: change.before, other: change.after, typeHint: change.type, id: `${rowId}|before` }), after: _jsx(SideValue, { value: change.after, other: change.before, typeHint: change.type, id: `${rowId}|after` }) }));
 }
-function BlockSection({ block, rowId, canRestore, busy, onRestore, }) {
+function BlockSection({ block, rowId, baseVersion, canRestore, busy, onRestore, }) {
     const name = block.componentId.split('.').pop() ?? block.componentId;
-    return (_jsxs("div", { children: [_jsxs(Row, { gap: "2", align: "center", className: "mb-1", children: [_jsx(Text, { size: "xs", weight: "medium", className: "min-w-0 truncate", children: name }), _jsx(Code, { tone: "muted", children: block.componentId }), _jsx(KindTag, { kind: block.kind }), _jsx(Spacer, {}), canRestore ? (_jsx(RestoreIcon, { busy: busy, title: translate('cms.version.restoreBlock'), onClick: onRestore })) : null] }), block.props && block.props.length > 0 ? (_jsx(Stack, { gap: "2", children: block.props.map((prop) => (_jsx(PropRow, { prop: prop, rowId: `${rowId}|prop:${prop.name}` }, prop.name))) })) : null, block.slotsChanged ? _jsx(MutedNote, { children: translate('cms.version.nestedContentChanged') }) : null, block.kind !== 'changed' && !block.props?.length ? (_jsx(MutedNote, { children: block.kind === 'added' ? translate('cms.version.blockAdded') : translate('cms.version.blockRemoved') })) : null] }));
+    // 0.0.39: each block is its own owned row — a header band (block name + id + kind,
+    // restore right-aligned) over the prop changes, indented under it with a left rail
+    // so the nesting (field → block → props) reads at a glance.
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-border/60", children: [_jsxs(Row, { gap: "2", align: "center", className: "border-b border-border/50 bg-muted/30 px-2 py-1.5", children: [_jsx(Text, { size: "xs", weight: "semibold", className: "min-w-0 truncate", children: name }), _jsx(Code, { tone: "muted", children: block.componentId }), _jsx(KindTag, { kind: block.kind }), _jsx(Spacer, {}), canRestore ? (_jsx(RestoreIcon, { busy: busy, title: translate('cms.version.restoreBlock', { version: baseVersion }), onClick: onRestore })) : null] }), _jsxs("div", { className: "px-2 py-2", children: [block.props && block.props.length > 0 ? (_jsx(Stack, { gap: "3", className: "border-l-2 border-border/50 pl-3", children: block.props.map((prop) => (_jsx(PropRow, { prop: prop, rowId: `${rowId}|prop:${prop.name}` }, prop.name))) })) : null, block.slotsChanged ? _jsx(MutedNote, { children: translate('cms.version.nestedContentChanged') }) : null, block.kind !== 'changed' && !block.props?.length ? (_jsx(MutedNote, { children: block.kind === 'added' ? translate('cms.version.blockAdded') : translate('cms.version.blockRemoved') })) : null] })] }));
 }
 function PropRow({ prop, rowId }) {
     const useWordDiff = prop.kind === 'changed' && typeof prop.before === 'string' && typeof prop.after === 'string';
@@ -301,11 +312,29 @@ function RelationValue({ value, other }) {
         .join(', ');
     return _jsx(Text, { size: "sm", children: label });
 }
+/**
+ * Asset-record-owned keys — resolved off the asset RECORD at render (url, alt,
+ * dimensions, focal point, …), never authored on the referencing document. Mirrors
+ * the diff engine's own denylist (`document-diff.ts`): those keys never register as a
+ * change, so they are never worth SHOWING as one either. Only authored per-use
+ * sub-fields (EC-301, e.g. a placement's `caption`) surface beneath the thumbnail.
+ */
+const ASSET_RECORD_KEYS = new Set([
+    'url', 'alt', 'width', 'height', 'focalPoint', 'contentType', 'mimeType',
+    'byteSize', 'storageKey', 'title', 'filename', 'meta', 'createdAt', 'updatedAt',
+]);
+function authoredAssetSubfields(value) {
+    return Object.entries(assetSubfieldsOf(value)).filter(([key]) => !ASSET_RECORD_KEYS.has(key));
+}
 function AssetValue({ value }) {
-    const ids = (Array.isArray(value) ? value : [value]).map(readAssetId).filter((id) => id !== undefined);
-    if (ids.length === 0)
+    const items = (Array.isArray(value) ? value : [value])
+        .map((entry) => ({ id: readAssetId(entry), sub: authoredAssetSubfields(entry) }))
+        .filter((a) => a.id !== undefined);
+    if (items.length === 0)
         return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: String(value) }));
-    return (_jsx("div", { className: "flex flex-wrap gap-2", children: ids.map((id) => (_jsx(AssetThumb, { id: id }, id))) }));
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: items.map(({ id, sub }, i) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(AssetThumb, { id: id }), sub.length > 0 ? (_jsx(Stack, { gap: "1", className: "pl-0.5", children: sub.map(([key, val]) => (_jsxs(Text, { size: "xs", tone: "muted", className: "break-words", children: [_jsxs("span", { className: "uppercase tracking-wide text-muted-foreground/70", children: [prettyName(key), ":"] }), ' ', typeof val === 'object' && val !== null
+                                ? translate('cms.version.objectValue')
+                                : String(val)] }, key))) })) : null] }, `${id}-${i}`))) }));
 }
 /** An asset as a thumbnail (image with a resolvable URL) or a labelled badge —
  *  the visual diff for a cover-image change, not two identical filenames. */