@elytracms/studio 0.0.27 → 0.0.28

package/dist/components/cms/use-cell-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-cell-edit.js","sourceRoot":"","sources":["../../../src/components/cms/use-cell-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useState } from 'react'\nimport type { RefObject } from 'react'\nimport { resolveField } from '@elytracms/core/cms-core'\nimport type { CmsDocument, CollectionDef } from '@elytracms/core/cms-core'\nimport { cellErrorMessage, cellKey, nextEditableCell } from './cell-edit'\nimport type { AdvanceDirection, CellCoord } from './cell-edit'\nimport { useCms } from './cms-store'\n\n/**\n * Table-level cell-edit controller (EC-168). Owns the state machine the cells\n * render from:\n *\n *   idle → editing (click/Enter) → committing (Enter/Tab/blur) → idle\n *        ↘ cancelled (Esc, no operation)        ↘ rejected (rollback + cell error)\n *\n * Exactly one cell edits at a time; commits go through\n * `cms.commitFieldEdit` (one operations command each); rejections park a\n * per-cell error that the cell renders inline until the cell is edited again.\n */\nexport interface CellEditController {\n  /** Ref for the table container (focus restoration after commits/cancels). */\n  containerRef: RefObject<HTMLDivElement | null>\n  /** Key of the cell currently editing, or null. */\n  activeKey: string | null\n  /** Key of the cell with a commit in flight, or null. */\n  busyKey: string | null\n  errorOf(key: string): string | null\n  start(coord: CellCoord): void\n  cancel(coord: CellCoord): void\n  commit(coord: CellCoord, value: unknown, advance: AdvanceDirection | null): void\n}\n\nexport function useCellEdit({\n  collection,\n  docs,\n  editableFields,\n}: {\n  collection: CollectionDef\n  /** Documents in rendered (sorted) row order. */\n  docs: readonly CmsDocument[]\n  /** Editable column field names in rendered order. */\n  editableFields: readonly string[]\n}): CellEditController {\n  const cms = useCms()\n  const [activeKey, setActiveKey] = useState<string | null>(null)\n  const [busyKey, setBusyKey] = useState<string | null>(null)\n  const [errors, setErrors] = useState<Record<string, string>>({})\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  // Snapshots for async commit completion (row order may re-sort mid-flight).\n  const activeRef = useRef(activeKey)\n  activeRef.current = activeKey\n  const docsRef = useRef(docs)\n  docsRef.current = docs\n  const fieldsRef = useRef(editableFields)\n  fieldsRef.current = editableFields\n\n  const clearError = useCallback((key: string) => {\n    setErrors((prev) => {\n      if (!(key in prev)) return prev\n      const next = { ...prev }\n      delete next[key]\n      return next\n    })\n  }, [])\n\n  const focusCell = useCallback((key: string) => {\n    // After state settles: return focus to the cell so Enter re-edits and the\n    // keyboard flow continues where the user left off.\n    requestAnimationFrame(() => {\n      containerRef.current\n        ?.querySelector<HTMLElement>(`[data-cell-key=\"${CSS.escape(key)}\"]`)\n        ?.focus()\n    })\n  }, [])\n\n  const start = useCallback(\n    (coord: CellCoord) => {\n      const key = cellKey(coord)\n      clearError(key)\n      setActiveKey(key)\n    },\n    [clearError],\n  )\n\n  const cancel = useCallback(\n    (coord: CellCoord) => {\n      const key = cellKey(coord)\n      if (activeRef.current !== key) return\n      setActiveKey(null)\n      focusCell(key)\n    },\n    [focusCell],\n  )\n\n  /** Close the editor and move on (commit settled or value unchanged). */\n  const settle = useCallback(\n    (coord: CellCoord, next: CellCoord | null) => {\n      const key = cellKey(coord)\n      // The user may have clicked into another cell while the commit ran —\n      // never clobber their new edit session.\n      if (activeRef.current !== key) return\n      if (next) {\n        clearError(cellKey(next))\n        setActiveKey(cellKey(next))\n      } else {\n        setActiveKey(null)\n        focusCell(key)\n      }\n    },\n    [clearError, focusCell],\n  )\n\n  const commit = useCallback(\n    (coord: CellCoord, value: unknown, advance: AdvanceDirection | null) => {\n      const key = cellKey(coord)\n      const doc = docsRef.current.find((d) => d.id === coord.docId)\n      const field = collection.fields.find((f) => f.name === coord.field)\n      if (!doc || !field) {\n        settle(coord, null)\n        return\n      }\n      // The advance target is computed against the row order at commit time —\n      // a re-sort caused by the edit must not teleport the cursor.\n      const next = advance\n        ? nextEditableCell(\n            docsRef.current.map((d) => d.id),\n            fieldsRef.current,\n            coord,\n            advance,\n          )\n        : null\n\n      // Same value as displayed → close (and advance) without any operation.\n      // Notably: re-committing an unchanged fallback-shown value dispatches\n      // nothing — a localized variant is only created by an actual edit.\n      const locale = cms.activeLocale\n      const original = resolveField(collection, doc, field.name, locale, cms.localeConfig).value\n      if (sameCellValue(value, original)) {\n        settle(coord, next)\n        return\n      }\n\n      setBusyKey(key)\n      void cms\n        .commitFieldEdit({ collection, doc, field, locale, value })\n        .then((outcome) => {\n          if (outcome.ok) {\n            clearError(key)\n            settle(coord, next)\n            return\n          }\n          // Rejected: the session already rolled back — park the error on the\n          // cell (never a toast) and return focus there.\n          setErrors((prev) => ({ ...prev, [key]: cellErrorMessage(outcome.error) }))\n          settle(coord, null)\n        })\n        .finally(() => {\n          setBusyKey((prev) => (prev === key ? null : prev))\n        })\n    },\n    [cms, collection, clearError, settle],\n  )\n\n  return {\n    containerRef,\n    activeKey,\n    busyKey,\n    errorOf: (key) => errors[key] ?? null,\n    start,\n    cancel,\n    commit,\n  }\n}\n\n/** Structural equality good enough for cell values (scalars, refs, id arrays). */\nfunction sameCellValue(a: unknown, b: unknown): boolean {\n  if (a === undefined && b === undefined) return true\n  try {\n    return JSON.stringify(a) === JSON.stringify(b)\n  } catch {\n    return false\n  }\n}\n"]}
+{"version":3,"file":"use-cell-edit.js","sourceRoot":"","sources":["../../../src/components/cms/use-cell-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useState } from 'react'\nimport type { RefObject } from 'react'\nimport { resolveField } from '@elytracms/core/cms-core'\nimport type { CmsDocument, CollectionDef } from '@elytracms/core/cms-core'\nimport { cellErrorMessage, cellKey, nextEditableCell } from './cell-edit'\nimport type { AdvanceDirection, CellCoord } from './cell-edit'\nimport { useCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * Table-level cell-edit controller (EC-168). Owns the state machine the cells\n * render from:\n *\n *   idle → editing (click/Enter) → committing (Enter/Tab/blur) → idle\n *        ↘ cancelled (Esc, no operation)        ↘ rejected (rollback + cell error)\n *\n * Exactly one cell edits at a time; commits go through\n * `cms.commitFieldEdit` (one operations command each); rejections park a\n * per-cell error that the cell renders inline until the cell is edited again.\n */\nexport interface CellEditController {\n  /** Ref for the table container (focus restoration after commits/cancels). */\n  containerRef: RefObject<HTMLDivElement | null>\n  /** Key of the cell currently editing, or null. */\n  activeKey: string | null\n  /** Key of the cell with a commit in flight, or null. */\n  busyKey: string | null\n  errorOf(key: string): string | null\n  start(coord: CellCoord): void\n  cancel(coord: CellCoord): void\n  commit(coord: CellCoord, value: unknown, advance: AdvanceDirection | null): void\n}\n\nexport function useCellEdit({\n  collection,\n  docs,\n  editableFields,\n}: {\n  collection: CollectionDef\n  /** Documents in rendered (sorted) row order. */\n  docs: readonly CmsDocument[]\n  /** Editable column field names in rendered order. */\n  editableFields: readonly string[]\n}): CellEditController {\n  const source = useCollectionView()\n  const [activeKey, setActiveKey] = useState<string | null>(null)\n  const [busyKey, setBusyKey] = useState<string | null>(null)\n  const [errors, setErrors] = useState<Record<string, string>>({})\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  // Snapshots for async commit completion (row order may re-sort mid-flight).\n  const activeRef = useRef(activeKey)\n  activeRef.current = activeKey\n  const docsRef = useRef(docs)\n  docsRef.current = docs\n  const fieldsRef = useRef(editableFields)\n  fieldsRef.current = editableFields\n\n  const clearError = useCallback((key: string) => {\n    setErrors((prev) => {\n      if (!(key in prev)) return prev\n      const next = { ...prev }\n      delete next[key]\n      return next\n    })\n  }, [])\n\n  const focusCell = useCallback((key: string) => {\n    // After state settles: return focus to the cell so Enter re-edits and the\n    // keyboard flow continues where the user left off.\n    requestAnimationFrame(() => {\n      containerRef.current\n        ?.querySelector<HTMLElement>(`[data-cell-key=\"${CSS.escape(key)}\"]`)\n        ?.focus()\n    })\n  }, [])\n\n  const start = useCallback(\n    (coord: CellCoord) => {\n      const key = cellKey(coord)\n      clearError(key)\n      setActiveKey(key)\n    },\n    [clearError],\n  )\n\n  const cancel = useCallback(\n    (coord: CellCoord) => {\n      const key = cellKey(coord)\n      if (activeRef.current !== key) return\n      setActiveKey(null)\n      focusCell(key)\n    },\n    [focusCell],\n  )\n\n  /** Close the editor and move on (commit settled or value unchanged). */\n  const settle = useCallback(\n    (coord: CellCoord, next: CellCoord | null) => {\n      const key = cellKey(coord)\n      // The user may have clicked into another cell while the commit ran —\n      // never clobber their new edit session.\n      if (activeRef.current !== key) return\n      if (next) {\n        clearError(cellKey(next))\n        setActiveKey(cellKey(next))\n      } else {\n        setActiveKey(null)\n        focusCell(key)\n      }\n    },\n    [clearError, focusCell],\n  )\n\n  const commit = useCallback(\n    (coord: CellCoord, value: unknown, advance: AdvanceDirection | null) => {\n      const key = cellKey(coord)\n      const doc = docsRef.current.find((d) => d.id === coord.docId)\n      const field = collection.fields.find((f) => f.name === coord.field)\n      if (!doc || !field) {\n        settle(coord, null)\n        return\n      }\n      // The advance target is computed against the row order at commit time —\n      // a re-sort caused by the edit must not teleport the cursor.\n      const next = advance\n        ? nextEditableCell(\n            docsRef.current.map((d) => d.id),\n            fieldsRef.current,\n            coord,\n            advance,\n          )\n        : null\n\n      // Same value as displayed → close (and advance) without any operation.\n      // Notably: re-committing an unchanged fallback-shown value dispatches\n      // nothing — a localized variant is only created by an actual edit.\n      const locale = source.activeLocale\n      const original = resolveField(collection, doc, field.name, locale, source.localeConfig).value\n      if (sameCellValue(value, original)) {\n        settle(coord, next)\n        return\n      }\n\n      // Inline editing is a capability — absent it (a read-only rail) there is\n      // nothing to commit; close the editor without dispatching.\n      const commitField = source.inlineEditing?.commitField\n      if (!commitField) {\n        settle(coord, null)\n        return\n      }\n\n      setBusyKey(key)\n      void commitField({ collection, doc, field, locale, value })\n        .then((outcome) => {\n          if (outcome.ok) {\n            clearError(key)\n            settle(coord, next)\n            return\n          }\n          // Rejected: the session already rolled back — park the error on the\n          // cell (never a toast) and return focus there.\n          setErrors((prev) => ({ ...prev, [key]: cellErrorMessage(outcome.error) }))\n          settle(coord, null)\n        })\n        .finally(() => {\n          setBusyKey((prev) => (prev === key ? null : prev))\n        })\n    },\n    [source, collection, clearError, settle],\n  )\n\n  return {\n    containerRef,\n    activeKey,\n    busyKey,\n    errorOf: (key) => errors[key] ?? null,\n    start,\n    cancel,\n    commit,\n  }\n}\n\n/** Structural equality good enough for cell values (scalars, refs, id arrays). */\nfunction sameCellValue(a: unknown, b: unknown): boolean {\n  if (a === undefined && b === undefined) return true\n  try {\n    return JSON.stringify(a) === JSON.stringify(b)\n  } catch {\n    return false\n  }\n}\n"]}

package/dist/components/cms/use-document-versions.d.ts

@@ -0,0 +1,16 @@
+import type { DocumentRef } from '@elytracms/core/cms-core';
+import type { DocumentVersionsView } from './cms-store';
+/** The one cache key for a document's version history — shared so the Versions
+ *  pane and the EC-298 compare view read through a single deduped query. */
+export declare function documentVersionsKey(projectId: string | undefined, ref: DocumentRef): readonly ["documentVersions", string, string, string];
+/**
+ * A document's recorded version history, read through the one operations-backed
+ * query cache (EC-308/AD-17). The flush-before-read ordering lives IN the loader,
+ * so every fetch — initial, invalidated, or refetch — lists an authoritative
+ * history regardless of which surface triggered the change. Two mounts with the
+ * same document share one fetch (TanStack dedup on the key).
+ */
+export declare function useDocumentVersionsQuery(ref: DocumentRef): {
+    versionsQuery: import("@tanstack/react-query").UseQueryResult<DocumentVersionsView>;
+    versionKey: readonly ["documentVersions", string, string, string];
+};

package/dist/components/cms/use-document-versions.js

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useOperationQuery } from '@elytracms/studio/lib/query';
+import { useCollectionView } from '../collection-view/collection-view-context';
+/** Recorded-version freshness: any document command (publish/restore/upsert) may
+ *  change the history, so re-read on the whole `documents` domain. */
+const VERSION_RELOAD_OPS = ['documents'];
+/** The one cache key for a document's version history — shared so the Versions
+ *  pane and the EC-298 compare view read through a single deduped query. */
+export function documentVersionsKey(projectId, ref) {
+    return ['documentVersions', projectId ?? '∅', ref.collection, ref.id];
+}
+/**
+ * A document's recorded version history, read through the one operations-backed
+ * query cache (EC-308/AD-17). The flush-before-read ordering lives IN the loader,
+ * so every fetch — initial, invalidated, or refetch — lists an authoritative
+ * history regardless of which surface triggered the change. Two mounts with the
+ * same document share one fetch (TanStack dedup on the key).
+ */
+export function useDocumentVersionsQuery(ref) {
+    const source = useCollectionView();
+    const versionKey = useMemo(() => documentVersionsKey(source.projectId, ref), [source.projectId, ref.collection, ref.id]);
+    const versionsQuery = useOperationQuery({
+        queryKey: versionKey,
+        // The versioning capability owns the flush-before-read ordering; a source
+        // without versions (never mounts this) degrades to an empty history.
+        loader: async () => (await source.versioning?.load(ref)) ?? { versions: [] },
+        invalidateOn: VERSION_RELOAD_OPS,
+    });
+    return { versionsQuery, versionKey };
+}
+//# sourceMappingURL=use-document-versions.js.map

package/dist/components/cms/use-document-versions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-document-versions.js","sourceRoot":"","sources":["../../../src/components/cms/use-document-versions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAA;AAG9E;sEACsE;AACtE,MAAM,kBAAkB,GAAG,CAAC,WAAW,CAAU,CAAA;AAEjD;4EAC4E;AAC5E,MAAM,UAAU,mBAAmB,CAAC,SAA6B,EAAE,GAAgB;IACjF,OAAO,CAAC,kBAAkB,EAAE,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAU,CAAA;AAChF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,wBAAwB,CAAC,GAAgB;IACvD,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,EAChD,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,CAC3C,CAAA;IACD,MAAM,aAAa,GAAG,iBAAiB,CAAuB;QAC5D,QAAQ,EAAE,UAAU;QACpB,0EAA0E;QAC1E,qEAAqE;QACrE,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5E,YAAY,EAAE,kBAAkB;KACjC,CAAC,CAAA;IACF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,CAAA;AACtC,CAAC","sourcesContent":["import { useMemo } from 'react'\nimport type { DocumentRef } from '@elytracms/core/cms-core'\nimport { useOperationQuery } from '@elytracms/studio/lib/query'\nimport { useCollectionView } from '../collection-view/collection-view-context'\nimport type { DocumentVersionsView } from './cms-store'\n\n/** Recorded-version freshness: any document command (publish/restore/upsert) may\n *  change the history, so re-read on the whole `documents` domain. */\nconst VERSION_RELOAD_OPS = ['documents'] as const\n\n/** The one cache key for a document's version history — shared so the Versions\n *  pane and the EC-298 compare view read through a single deduped query. */\nexport function documentVersionsKey(projectId: string | undefined, ref: DocumentRef) {\n  return ['documentVersions', projectId ?? '∅', ref.collection, ref.id] as const\n}\n\n/**\n * A document's recorded version history, read through the one operations-backed\n * query cache (EC-308/AD-17). The flush-before-read ordering lives IN the loader,\n * so every fetch — initial, invalidated, or refetch — lists an authoritative\n * history regardless of which surface triggered the change. Two mounts with the\n * same document share one fetch (TanStack dedup on the key).\n */\nexport function useDocumentVersionsQuery(ref: DocumentRef) {\n  const source = useCollectionView()\n  const versionKey = useMemo(\n    () => documentVersionsKey(source.projectId, ref),\n    [source.projectId, ref.collection, ref.id],\n  )\n  const versionsQuery = useOperationQuery<DocumentVersionsView>({\n    queryKey: versionKey,\n    // The versioning capability owns the flush-before-read ordering; a source\n    // without versions (never mounts this) degrades to an empty history.\n    loader: async () => (await source.versioning?.load(ref)) ?? { versions: [] },\n    invalidateOn: VERSION_RELOAD_OPS,\n  })\n  return { versionsQuery, versionKey }\n}\n"]}

package/dist/components/cms/version-compare-text.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Pure text helpers for the EC-298 compare view — extracted so the fiddly bits
+ * (word-level LCS, format-agnostic "rich text" extraction) are unit-tested apart
+ * from the React surface.
+ */
+export interface WordToken {
+    text: string;
+    changed: boolean;
+}
+/**
+ * Word-level LCS diff (prose, not code): tokens NOT on the longest common
+ * subsequence are marked — removed on the before side, added on the after side.
+ * Whitespace tokens participate, so spacing is preserved on render.
+ */
+export declare function wordDiff(before: string, after: string): {
+    before: WordToken[];
+    after: WordToken[];
+};
+/**
+ * A "rich text" value as readable text for the prose diff — FORMAT-AGNOSTIC, since
+ * the stored value can be anything the field's editor writes: a plain/HTML STRING
+ * (a simple text input), a TipTap `{version, doc}` tree, or a bare doc. We show
+ * whatever is entered rather than assuming a structure (EC-298).
+ */
+export declare function richTextToText(value: unknown): string;
+export declare function looksLikeHtml(s: string): boolean;
+/** Strip HTML to readable text, keeping block breaks so paragraphs still separate. */
+export declare function htmlToText(html: string): string;
+/** Plain text from ProseMirror/TipTap nodes: text runs joined, blocks separated. */
+export declare function plainTextFromNodes(nodes: unknown[]): string;

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

@@ -0,0 +1,113 @@
+/**
+ * Pure text helpers for the EC-298 compare view — extracted so the fiddly bits
+ * (word-level LCS, format-agnostic "rich text" extraction) are unit-tested apart
+ * from the React surface.
+ */
+function tokenize(s) {
+    return s.split(/(\s+)/).filter((t) => t.length > 0);
+}
+/**
+ * Word-level LCS diff (prose, not code): tokens NOT on the longest common
+ * subsequence are marked — removed on the before side, added on the after side.
+ * Whitespace tokens participate, so spacing is preserved on render.
+ */
+export function wordDiff(before, after) {
+    const a = tokenize(before);
+    const b = tokenize(after);
+    // Bound the DP so a pathological pair can't stall the editor.
+    if (a.length + b.length > 4000) {
+        return {
+            before: a.map((text) => ({ text, changed: true })),
+            after: b.map((text) => ({ text, changed: true })),
+        };
+    }
+    const m = a.length;
+    const n = b.length;
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = m - 1; i >= 0; i--) {
+        for (let j = n - 1; j >= 0; j--) {
+            dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+    }
+    const beforeTokens = [];
+    const afterTokens = [];
+    let i = 0;
+    let j = 0;
+    while (i < m && j < n) {
+        if (a[i] === b[j]) {
+            beforeTokens.push({ text: a[i], changed: false });
+            afterTokens.push({ text: b[j], changed: false });
+            i++;
+            j++;
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            beforeTokens.push({ text: a[i], changed: true });
+            i++;
+        }
+        else {
+            afterTokens.push({ text: b[j], changed: true });
+            j++;
+        }
+    }
+    while (i < m)
+        beforeTokens.push({ text: a[i++], changed: true });
+    while (j < n)
+        afterTokens.push({ text: b[j++], changed: true });
+    return { before: beforeTokens, after: afterTokens };
+}
+/**
+ * A "rich text" value as readable text for the prose diff — FORMAT-AGNOSTIC, since
+ * the stored value can be anything the field's editor writes: a plain/HTML STRING
+ * (a simple text input), a TipTap `{version, doc}` tree, or a bare doc. We show
+ * whatever is entered rather than assuming a structure (EC-298).
+ */
+export function richTextToText(value) {
+    if (typeof value === 'string')
+        return looksLikeHtml(value) ? htmlToText(value) : value;
+    if (value && typeof value === 'object') {
+        const wrapper = value;
+        const doc = (wrapper.doc ?? wrapper);
+        if (Array.isArray(doc.content))
+            return plainTextFromNodes(doc.content);
+    }
+    return '';
+}
+export function looksLikeHtml(s) {
+    return /<[a-z!/][\s\S]*>/i.test(s);
+}
+/** Strip HTML to readable text, keeping block breaks so paragraphs still separate. */
+export function htmlToText(html) {
+    return html
+        .replace(/<\s*br\s*\/?>/gi, '\n')
+        .replace(/<\/(p|div|h[1-6]|blockquote)\s*>/gi, '\n\n')
+        .replace(/<\/(li|tr|ul|ol)\s*>/gi, '\n')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&amp;/gi, '&')
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&#39;/gi, "'")
+        .replace(/[ \t]+/g, ' ')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+}
+/** Plain text from ProseMirror/TipTap nodes: text runs joined, blocks separated. */
+export function plainTextFromNodes(nodes) {
+    const blockText = (node) => {
+        const parts = [];
+        const walk = (n) => {
+            if (!n || typeof n !== 'object')
+                return;
+            const rec = n;
+            if (typeof rec.text === 'string')
+                parts.push(rec.text);
+            if (Array.isArray(rec.content))
+                rec.content.forEach(walk);
+        };
+        walk(node);
+        return parts.join('');
+    };
+    return nodes.map(blockText).filter(Boolean).join('\n\n');
+}
+//# sourceMappingURL=version-compare-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version-compare-text.js","sourceRoot":"","sources":["../../../src/components/cms/version-compare-text.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Pure text helpers for the EC-298 compare view — extracted so the fiddly bits\n * (word-level LCS, format-agnostic \"rich text\" extraction) are unit-tested apart\n * from the React surface.\n */\n\nexport interface WordToken {\n  text: string\n  changed: boolean\n}\n\nfunction tokenize(s: string): string[] {\n  return s.split(/(\\s+)/).filter((t) => t.length > 0)\n}\n\n/**\n * Word-level LCS diff (prose, not code): tokens NOT on the longest common\n * subsequence are marked — removed on the before side, added on the after side.\n * Whitespace tokens participate, so spacing is preserved on render.\n */\nexport function wordDiff(before: string, after: string): { before: WordToken[]; after: WordToken[] } {\n  const a = tokenize(before)\n  const b = tokenize(after)\n  // Bound the DP so a pathological pair can't stall the editor.\n  if (a.length + b.length > 4000) {\n    return {\n      before: a.map((text) => ({ text, changed: true })),\n      after: b.map((text) => ({ text, changed: true })),\n    }\n  }\n  const m = a.length\n  const n = b.length\n  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0))\n  for (let i = m - 1; i >= 0; i--) {\n    for (let j = n - 1; j >= 0; j--) {\n      dp[i]![j] = a[i] === b[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!)\n    }\n  }\n  const beforeTokens: WordToken[] = []\n  const afterTokens: WordToken[] = []\n  let i = 0\n  let j = 0\n  while (i < m && j < n) {\n    if (a[i] === b[j]) {\n      beforeTokens.push({ text: a[i]!, changed: false })\n      afterTokens.push({ text: b[j]!, changed: false })\n      i++\n      j++\n    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {\n      beforeTokens.push({ text: a[i]!, changed: true })\n      i++\n    } else {\n      afterTokens.push({ text: b[j]!, changed: true })\n      j++\n    }\n  }\n  while (i < m) beforeTokens.push({ text: a[i++]!, changed: true })\n  while (j < n) afterTokens.push({ text: b[j++]!, changed: true })\n  return { before: beforeTokens, after: afterTokens }\n}\n\n/**\n * A \"rich text\" value as readable text for the prose diff — FORMAT-AGNOSTIC, since\n * the stored value can be anything the field's editor writes: a plain/HTML STRING\n * (a simple text input), a TipTap `{version, doc}` tree, or a bare doc. We show\n * whatever is entered rather than assuming a structure (EC-298).\n */\nexport function richTextToText(value: unknown): string {\n  if (typeof value === 'string') return looksLikeHtml(value) ? htmlToText(value) : value\n  if (value && typeof value === 'object') {\n    const wrapper = value as { doc?: unknown; content?: unknown }\n    const doc = (wrapper.doc ?? wrapper) as { content?: unknown }\n    if (Array.isArray(doc.content)) return plainTextFromNodes(doc.content)\n  }\n  return ''\n}\n\nexport function looksLikeHtml(s: string): boolean {\n  return /<[a-z!/][\\s\\S]*>/i.test(s)\n}\n\n/** Strip HTML to readable text, keeping block breaks so paragraphs still separate. */\nexport function htmlToText(html: string): string {\n  return html\n    .replace(/<\\s*br\\s*\\/?>/gi, '\\n')\n    .replace(/<\\/(p|div|h[1-6]|blockquote)\\s*>/gi, '\\n\\n')\n    .replace(/<\\/(li|tr|ul|ol)\\s*>/gi, '\\n')\n    .replace(/<[^>]+>/g, '')\n    .replace(/&nbsp;/gi, ' ')\n    .replace(/&amp;/gi, '&')\n    .replace(/&lt;/gi, '<')\n    .replace(/&gt;/gi, '>')\n    .replace(/&quot;/gi, '\"')\n    .replace(/&#39;/gi, \"'\")\n    .replace(/[ \\t]+/g, ' ')\n    .replace(/\\n{3,}/g, '\\n\\n')\n    .trim()\n}\n\n/** Plain text from ProseMirror/TipTap nodes: text runs joined, blocks separated. */\nexport function plainTextFromNodes(nodes: unknown[]): string {\n  const blockText = (node: unknown): string => {\n    const parts: string[] = []\n    const walk = (n: unknown) => {\n      if (!n || typeof n !== 'object') return\n      const rec = n as { text?: unknown; content?: unknown }\n      if (typeof rec.text === 'string') parts.push(rec.text)\n      if (Array.isArray(rec.content)) rec.content.forEach(walk)\n    }\n    walk(node)\n    return parts.join('')\n  }\n  return nodes.map(blockText).filter(Boolean).join('\\n\\n')\n}\n"]}

package/dist/components/cms/version-compare.d.ts

@@ -0,0 +1,12 @@
+/**
+ * EC-298 — the version compare view. Renders as the sticky **Compare** content tab
+ * (the Versions sidebar pane stays on as the navigator).
+ *
+ * A calm change-list grouped BY FIELD (a localized field's per-locale variants sit
+ * together): before | after across ONE continuous central divider. Text reads as a
+ * prose diff (changed words lit in place — rich text via its markdown projection so
+ * the content, not just "changed", is visible); assets as thumbnails; relations as
+ * titles. Each field/locale (and each block, at property level) restores back to the
+ * base version with a single ↩.
+ */
+export declare function VersionCompare(): import("react").JSX.Element | null;

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

@@ -0,0 +1,271 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, 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 { Badge, Button, Code, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { useOperationCache } from '@elytracms/studio/lib/query';
+import { localeChipLabel } from '@elytracms/studio/lib/locale';
+import { cn } from '@elytracms/studio/lib/utils';
+import { useCollectionView } from '../collection-view/collection-view-context';
+import { toRefArray } from './cell';
+import { richTextToText, wordDiff } from './version-compare-text';
+import { useDocumentEditor } from './document-editor-context';
+import { useDocumentVersionsQuery } from './use-document-versions';
+import { formatVersionTimestamp } from './versions-model';
+/**
+ * EC-298 — the version compare view. Renders as the sticky **Compare** content tab
+ * (the Versions sidebar pane stays on as the navigator).
+ *
+ * A calm change-list grouped BY FIELD (a localized field's per-locale variants sit
+ * together): before | after across ONE continuous central divider. Text reads as a
+ * prose diff (changed words lit in place — rich text via its markdown projection so
+ * the content, not just "changed", is visible); assets as thumbnails; relations as
+ * titles. Each field/locale (and each block, at property level) restores back to the
+ * base version with a single ↩.
+ */
+export function VersionCompare() {
+    const source = useCollectionView();
+    const { collection, docRef, draft, dirty, viewReadOnly, save, replaceDraft, compare, setCompareBase, setCompareTarget, } = useDocumentEditor();
+    const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef);
+    const cache = useOperationCache();
+    const [busy, setBusy] = useState(false);
+    const view = versionsQuery.data ?? null;
+    const versions = useMemo(() => view?.versions ?? [], [view]);
+    const baseRecord = compare ? versions.find((v) => v.version === compare.base) : undefined;
+    const targetSnapshot = compare?.target === 'draft'
+        ? draft
+        : versions.find((v) => v.version === compare?.target)?.snapshot;
+    const diff = useMemo(() => baseRecord && targetSnapshot
+        ? diffDocuments(collection, baseRecord.snapshot, targetSnapshot)
+        : { changes: [], unchangedCount: 0 }, [collection, baseRecord, targetSnapshot]);
+    const fieldOrder = useMemo(() => new Map(collection.fields.map((f, i) => [f.name, i])), [collection]);
+    const localeRank = useMemo(() => new Map(source.localeConfig.locales.map((l, i) => [l, i])), [source.localeConfig]);
+    const groups = useMemo(() => groupByField(diff.changes, fieldOrder, localeRank), [diff.changes, fieldOrder, localeRank]);
+    const restore = useCallback(async (scope) => {
+        if (!compare)
+            return;
+        setBusy(true);
+        try {
+            if (dirty)
+                save();
+            const restored = await source.versioning?.restore(docRef, compare.base, scope);
+            if (restored)
+                replaceDraft(restored);
+            await cache.invalidate(versionKey);
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [compare, dirty, save, source, docRef, replaceDraft, cache, versionKey]);
+    if (!compare)
+        return null;
+    if (view === null)
+        return _jsx(CompareNotice, { children: "Loading version history\u2026" });
+    if (!baseRecord || !targetSnapshot)
+        return _jsx(CompareNotice, { children: "That version is no longer available. Pick another to compare." });
+    const canRestore = compare.target === 'draft' && !viewReadOnly;
+    const targetLabel = compare.target === 'draft' ? 'Current draft' : `v${compare.target}`;
+    // Step the base through history, skipping the target so the sides never collapse.
+    const baseIndex = versions.findIndex((v) => v.version === compare.base);
+    const nextBaseFor = (dir) => {
+        let i = baseIndex + dir;
+        while (i >= 0 && i < versions.length && versions[i].version === compare.target)
+            i += dir;
+        return i >= 0 && i < versions.length ? versions[i].version : undefined;
+    };
+    const newerBase = nextBaseFor(-1); // versions are newest-first
+    const olderBase = nextBaseFor(1);
+    const baseOptions = versions
+        .filter((v) => v.version !== compare.target)
+        .map((v) => ({ value: v.version, label: `v${v.version}`, meta: formatVersionTimestamp(v.createdAt) }));
+    const targetOptions = [
+        { value: 'draft', label: 'Current draft', meta: dirty ? 'unsaved edits' : undefined },
+        ...versions
+            .filter((v) => v.version !== compare.base)
+            .map((v) => ({ value: v.version, label: `v${v.version}`, meta: formatVersionTimestamp(v.createdAt) })),
+    ];
+    return (_jsxs(Stack, { gap: "3", className: "mx-auto w-full max-w-5xl p-4 sm:p-6", children: [_jsxs(Row, { gap: "2", align: "center", wrap: true, className: "rounded-md border border-border/70 bg-muted/30 px-3 py-2", children: [_jsx(VersionMenu, { caption: "Base", current: `v${compare.base}`, meta: formatVersionTimestamp(baseRecord.createdAt), options: baseOptions, onSelect: (v) => setCompareBase(v) }), _jsx(ArrowRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx(VersionMenu, { caption: "Compare with", current: targetLabel, options: targetOptions, onSelect: (v) => setCompareTarget(v) }), _jsx(Spacer, {}), _jsxs(Row, { gap: "1", children: [_jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => newerBase !== undefined && setCompareBase(newerBase), disabled: newerBase === undefined, title: "Compare a newer version", "aria-label": "Compare a newer version", children: _jsx(ChevronLeft, {}) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => olderBase !== undefined && setCompareBase(olderBase), disabled: olderBase === undefined, title: "Compare an older version", "aria-label": "Compare an older version", children: _jsx(ChevronRight, {}) })] }), canRestore ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void restore({ kind: 'all' }), disabled: busy || diff.changes.length === 0, title: `Restore the whole document to v${compare.base}`, children: [_jsx(RotateCcw, {}), " Restore version"] })) : null] }), _jsxs(Text, { size: "xs", tone: "muted", className: "px-0.5", children: [diff.changes.length === 0
+                        ? 'No differences'
+                        : `${countLabel(diff.changes.length, 'change', 'changes')} · ${diff.unchangedCount} unchanged`, !canRestore && diff.changes.length > 0
+                        ? ' · comparing two past versions — set “Compare with” to Current draft to restore'
+                        : ''] }), diff.changes.length === 0 ? (_jsx(CompareNotice, { children: "These two versions are identical." })) : (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-border", "aria-hidden": true }), _jsx(TwoCol, { className: "px-0.5 pb-1", before: _jsxs(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: ["Before \u00B7 v", compare.base] }), after: _jsxs(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: ["After \u00B7 ", targetLabel] }) }), groups.map((group) => (_jsx(FieldGroup, { group: group, canRestore: canRestore, busy: busy, onRestore: restore }, group.field)))] }))] }));
+}
+/** A before | after grid; the continuous centre divider lives behind it (in the
+ *  parent), so the gap is where the two columns meet. */
+function TwoCol({ before, after, className }) {
+    return (_jsxs("div", { className: cn('grid grid-cols-2 gap-x-6', className), children: [_jsx("div", { className: "min-w-0", children: before }), _jsx("div", { className: "min-w-0", children: after })] }));
+}
+function VersionMenu({ caption, current, meta, options, onSelect, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", children: [_jsx(Text, { size: "xs", tone: "subtle", className: "uppercase tracking-wide", children: caption }), _jsx(Text, { size: "sm", weight: "medium", mono: true, children: current }), meta ? (_jsx(Text, { size: "xs", tone: "muted", className: "hidden sm:inline", children: meta })) : null, _jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-72 overflow-auto", children: options.map((o) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(o.value), className: "gap-2", children: [_jsx(Text, { size: "sm", weight: "medium", mono: o.value !== 'draft', children: o.label }), o.meta ? (_jsx(Text, { size: "xs", tone: "muted", children: o.meta })) : null] }, String(o.value)))) })] }));
+}
+function FieldGroup({ group, canRestore, busy, onRestore, }) {
+    // A plain (non-localized) field is a single entry — label + value inline. A
+    // localized field groups its locale variants under one label.
+    const single = group.entries.length === 1 && group.entries[0].locale === undefined;
+    if (single) {
+        const entry = group.entries[0];
+        return (_jsxs("div", { className: "border-t border-border/30 py-3", children: [_jsxs(Row, { gap: "2", align: "center", className: "mb-1.5", children: [_jsx(Text, { size: "sm", weight: "medium", className: "min-w-0 truncate", children: group.label }), _jsx(KindTag, { kind: entry.kind }), _jsx(Spacer, {}), canRestore ? (_jsx(RestoreIcon, { busy: busy, title: `Restore ${group.label}`, onClick: () => onRestore(fieldScope(entry)) })) : null] }), _jsx(EntryBody, { change: entry, canRestore: canRestore, busy: busy, onRestore: onRestore })] }));
+    }
+    return (_jsxs("div", { className: "border-t border-border/30 py-3", children: [_jsx(Text, { size: "sm", weight: "medium", className: "mb-2 block", children: group.label }), _jsx(Stack, { gap: "3", children: group.entries.map((entry) => (_jsxs("div", { children: [_jsxs(Row, { gap: "2", align: "center", className: "mb-1", children: [entry.locale ? (_jsx(Badge, { variant: "outline", className: "px-1 py-0 text-[0.6rem] uppercase tracking-wide text-muted-foreground", children: localeChipLabel(entry.locale) })) : null, _jsx(KindTag, { kind: entry.kind }), _jsx(Spacer, {}), canRestore ? (_jsx(RestoreIcon, { busy: busy, title: `Restore ${group.label}${entry.locale ? ` (${localeChipLabel(entry.locale)})` : ''}`, onClick: () => onRestore(fieldScope(entry)) })) : null] }), _jsx(EntryBody, { change: entry, canRestore: canRestore, busy: busy, onRestore: onRestore })] }, entry.locale ?? '__base__'))) })] }));
+}
+function EntryBody({ change, 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, 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);
+        const after = richTextToText(change.after);
+        if (before === after)
+            return _jsx(MutedNote, { children: before ? 'Text unchanged — formatting or whitespace differs.' : 'Content changed.' });
+        return _jsx(WordDiffCols, { before: before, after: after });
+    }
+    if (change.kind === 'changed' && typeof change.before === 'string' && typeof change.after === 'string') {
+        return _jsx(WordDiffCols, { before: change.before, after: change.after });
+    }
+    return (_jsx(TwoCol, { before: _jsx(SideValue, { value: change.before, other: change.after, typeHint: change.type }), after: _jsx(SideValue, { value: change.after, other: change.before, typeHint: change.type }) }));
+}
+function BlockSection({ block, 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: "Restore this block", onClick: onRestore }) : null] }), block.props && block.props.length > 0 ? (_jsx(Stack, { gap: "2", children: block.props.map((prop) => (_jsx(PropRow, { prop: prop }, prop.name))) })) : null, block.slotsChanged ? _jsx(MutedNote, { children: "Nested content changed." }) : null, block.kind !== 'changed' && !block.props?.length ? (_jsx(MutedNote, { children: block.kind === 'added' ? 'Block added.' : 'Block removed.' })) : null] }));
+}
+function PropRow({ prop }) {
+    const useWordDiff = prop.kind === 'changed' && typeof prop.before === 'string' && typeof prop.after === 'string';
+    return (_jsxs("div", { children: [_jsx(Text, { size: "xs", tone: "subtle", className: "mb-0.5 block uppercase tracking-wide", children: prettyName(prop.name) }), useWordDiff ? (_jsx(WordDiffCols, { before: String(prop.before), after: String(prop.after) })) : (_jsx(TwoCol, { before: _jsx(SideValue, { value: prop.before, other: prop.after }), after: _jsx(SideValue, { value: prop.after, other: prop.before }) }))] }));
+}
+/** One side of a non-text change — the value, or an "empty" placeholder. */
+function SideValue({ value, other, typeHint }) {
+    if (value === undefined || value === null || value === '') {
+        return (_jsx(Text, { size: "sm", tone: "subtle", className: "italic", children: "empty" }));
+    }
+    return _jsx(ValueView, { value: value, other: other, typeHint: typeHint });
+}
+/**
+ * Read-only value display, dispatching on the field type where known and on the
+ * self-describing value shape otherwise (block props carry no schema) — assets as
+ * thumbnails, relations as titles, everything else as calm text.
+ */
+function ValueView({ value, other, typeHint }) {
+    if (typeHint === 'asset' || isAssetNode(value))
+        return _jsx(AssetValue, { value: value });
+    if (typeHint === 'relation' || readDocumentRef(value))
+        return _jsx(RelationValue, { value: value, other: other });
+    if (typeHint === 'richText')
+        return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: richTextToText(value) || 'rich text' }));
+    if (typeHint === 'boolean' || typeof value === 'boolean')
+        return (_jsx(Text, { size: "sm", mono: true, children: value === true ? 'Yes' : 'No' }));
+    if (typeHint === 'date')
+        return (_jsx(Text, { size: "sm", mono: true, children: String(value).slice(0, 10) }));
+    if (typeof value === 'object')
+        return (_jsx(Text, { size: "sm", tone: "muted", children: Array.isArray(value) ? countLabel(value.length, 'item', 'items') : 'object' }));
+    return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: String(value) }));
+}
+function RelationValue({ value, other }) {
+    const source = useCollectionView();
+    const refs = toRefArray(value);
+    if (refs.length === 0)
+        return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: String(value) }));
+    const otherRefs = other !== undefined ? toRefArray(other) : [];
+    // Disambiguate a same-titled but different target (the "Ada → Ada" trap): show
+    // the id only when the titles would otherwise read identically.
+    const label = refs
+        .map((ref) => {
+        const title = source.titleOf(ref);
+        const collision = otherRefs.some((o) => o.id !== ref.id && source.titleOf(o) === title);
+        return collision ? `${title} · ${ref.id}` : title;
+    })
+        .join(', ');
+    return _jsx(Text, { size: "sm", children: label });
+}
+function AssetValue({ value }) {
+    const ids = (Array.isArray(value) ? value : [value])
+        .map(readAssetId)
+        .filter((id) => id !== undefined);
+    if (ids.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))) }));
+}
+/** 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. */
+function AssetThumb({ id }) {
+    const source = useCollectionView();
+    const assetCollectionId = source.assetCollectionId ?? 'asset';
+    const record = source.resolveAsset?.(id);
+    const label = record?.title ?? record?.filename ?? source.titleOf({ collection: assetCollectionId, id });
+    const isImage = record?.contentType?.startsWith('image/') ?? false;
+    const url = record?.url;
+    if (isImage && url && url.startsWith('http')) {
+        return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx("img", { src: url, alt: record?.alt ?? label, loading: "lazy", className: "size-12 shrink-0 rounded border border-border bg-muted object-cover" }), _jsx(Text, { size: "xs", tone: "muted", className: "min-w-0 truncate", children: label })] }));
+    }
+    return (_jsxs(Badge, { variant: "outline", children: [_jsx(ImageIcon, { className: "size-3" }), " ", label] }));
+}
+// --- Prose word diff --------------------------------------------------------------
+/** Prose-diff across the central divider, both sides from one LCS. */
+function WordDiffCols({ before, after }) {
+    const wd = useMemo(() => wordDiff(before, after), [before, after]);
+    return (_jsx(TwoCol, { before: _jsx(WordTokens, { tokens: wd.before, side: "before" }), after: _jsx(WordTokens, { tokens: wd.after, side: "after" }) }));
+}
+function WordTokens({ tokens, side }) {
+    return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words leading-relaxed", children: tokens.map((token, i) => token.changed ? (_jsx("mark", { className: cn('rounded-sm px-0.5', side === 'before'
+                ? 'bg-destructive/15 text-destructive line-through decoration-destructive/40'
+                : 'bg-success/20 text-foreground'), children: token.text }, i)) : (_jsx("span", { className: "text-muted-foreground", children: token.text }, i))) }));
+}
+// --- Small shared bits ------------------------------------------------------------
+/** A quiet "· new" / "· removed" tag; nothing for a plain change (implicit). */
+function KindTag({ kind }) {
+    if (kind === 'changed')
+        return null;
+    return (_jsxs(Text, { size: "xs", tone: "subtle", children: ["\u00B7 ", kind === 'added' ? 'new' : 'removed'] }));
+}
+function RestoreIcon({ busy, title, onClick }) {
+    return (_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: busy, title: title, "aria-label": title, onClick: onClick, children: _jsx(RotateCcw, {}) }));
+}
+function MutedNote({ children }) {
+    return (_jsx(Text, { size: "sm", tone: "muted", className: "italic", children: children }));
+}
+function CompareNotice({ children }) {
+    return (_jsx("div", { className: "mx-auto w-full max-w-5xl p-4 sm:p-6", children: _jsx("div", { className: "rounded-md border border-dashed border-border/70 px-4 py-8 text-center", children: _jsx(Text, { size: "sm", tone: "muted", children: children }) }) }));
+}
+function fieldScope(change) {
+    return { kind: 'field', field: change.field, ...(change.locale !== undefined ? { locale: change.locale } : {}) };
+}
+/**
+ * Group changes BY FIELD (a localized field's per-locale variants together),
+ * fields in schema order, locales in project order (base bucket first).
+ */
+function groupByField(changes, fieldOrder, localeRank) {
+    const map = new Map();
+    for (const change of changes) {
+        let group = map.get(change.field);
+        if (!group) {
+            group = { field: change.field, label: change.label, type: change.type, entries: [] };
+            map.set(change.field, group);
+        }
+        group.entries.push(change);
+    }
+    const groups = [...map.values()];
+    groups.sort((a, b) => (fieldOrder.get(a.field) ?? Number.MAX_SAFE_INTEGER) - (fieldOrder.get(b.field) ?? Number.MAX_SAFE_INTEGER));
+    for (const group of groups) {
+        group.entries.sort((a, b) => localeCompare(a.locale, b.locale, localeRank));
+    }
+    return groups;
+}
+function localeCompare(a, b, rank) {
+    if (a === b)
+        return 0;
+    if (a === undefined)
+        return -1; // base bucket first
+    if (b === undefined)
+        return 1;
+    return (rank.get(a) ?? 99) - (rank.get(b) ?? 99);
+}
+function countLabel(n, one, many) {
+    return `${n} ${n === 1 ? one : many}`;
+}
+/** camelCase / snake prop name → a readable label. */
+function prettyName(name) {
+    const spaced = name.replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2');
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+//# sourceMappingURL=version-compare.js.map