@elytracms/studio 0.0.38 → 0.0.39

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+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';
@@ -8,9 +8,11 @@ import { useOperationCache } from '@elytracms/studio/lib/query';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { localeChipLabel } from '@elytracms/studio/lib/locale';
 import { cn } from '@elytracms/studio/lib/utils';
+import { readDiffViewMode, storeDiffViewMode } from '@elytracms/studio/lib/diff-view-preference';
 import { useCollectionView } from '../collection-view/collection-view-context';
+import { fieldLabel } from './cms-store';
 import { toRefArray } from './cell';
-import { richTextToText, wordDiff } from './version-compare-text';
+import { DIFF_TRUNCATE_THRESHOLD, mergeWordDiff, richTextToText, truncateText, truncateTokens, wordDiff, } from './version-compare-text';
 import { useDocumentEditor } from './document-editor-context';
 import { useDocumentVersionsQuery } from './use-document-versions';
 import { formatVersionTimestamp } from './versions-model';
@@ -19,11 +21,15 @@ import { formatVersionTimestamp } from './versions-model';
  * (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 ↩.
+ * together): a left **descriptor lane** (EC-317 — field label + locale) identifies
+ * each row, next to its before | after value (or one merged **unified** lane —
+ * a persisted transient view preference, EC-317). Text reads as a prose diff
+ * (changed words lit in place — rich text via its markdown projection); assets as
+ * thumbnails; relations as titles. A value past a length threshold collapses
+ * behind a per-row "Show more" (+ a global "Expand/Collapse all") — presentation
+ * only, the semantic/identity diff underneath (EC-298) is never touched. Rows
+ * zebra-stripe for scanability. Each field/locale (and each block, at property
+ * level) restores back to the base version with a single ↩.
  */
 export function VersionCompare() {
     const source = useCollectionView();
@@ -31,18 +37,63 @@ export function VersionCompare() {
     const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef);
     const cache = useOperationCache();
     const [busy, setBusy] = useState(false);
+    // EC-317 — the unified/side-by-side toggle is a transient, personal-local view
+    // preference (same class as the theme/rail prefs): read once at mount, written
+    // back on every change, never round-tripped through the project graph.
+    const [mode, setModeState] = useState(() => readDiffViewMode());
+    const setMode = useCallback((next) => {
+        setModeState(next);
+        storeDiffViewMode(next);
+    }, []);
+    // EC-317 — long-value truncation state: an `expandAll` flag plus per-row
+    // overrides. Presentation-only (never recomputes the diff), reset is implicit
+    // (in-session state, like the rest of the compare selection).
+    const [expandAll, setExpandAll] = useState(false);
+    const [expandedRows, setExpandedRows] = useState(() => new Set());
+    const toggleExpand = useCallback((id) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }, []);
+    const isExpanded = useCallback((id) => expandAll || expandedRows.has(id), [expandAll, expandedRows]);
+    const toggleExpandAll = useCallback(() => {
+        setExpandAll((prev) => {
+            const next = !prev;
+            // Collapsing all clears per-row overrides too, so "Collapse all" always
+            // means "everything is collapsed" rather than "back to before I expanded".
+            if (!next)
+                setExpandedRows(new Set());
+            return next;
+        });
+    }, []);
+    const diffDisplay = useMemo(() => ({ mode, expandAll, isExpanded, toggleExpand }), [mode, expandAll, isExpanded, toggleExpand]);
     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 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 fieldByName = useMemo(() => new Map(collection.fields.map((f) => [f.name, f])), [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]);
+    // EC-317 zebra striping: a running index across every rendered row (not reset
+    // per field group), so consecutive groups keep alternating rather than each
+    // restarting on the same shade.
+    const groupRows = useMemo(() => {
+        let rowIndex = 0;
+        return groups.map((group) => {
+            const zebraStart = rowIndex;
+            rowIndex += group.entries.length;
+            return { group, field: fieldByName.get(group.field), zebraStart };
+        });
+    }, [groups, fieldByName]);
     const restore = useCallback(async (scope) => {
         if (!compare)
             return;
@@ -90,79 +141,129 @@ export function VersionCompare() {
             .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: translate('cms.version.baseCaption'), 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: translate('cms.version.compareWithCaption'), 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: translate('cms.version.compareNewer'), "aria-label": translate('cms.version.compareNewer'), children: _jsx(ChevronLeft, {}) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => olderBase !== undefined && setCompareBase(olderBase), disabled: olderBase === undefined, title: translate('cms.version.compareOlder'), "aria-label": translate('cms.version.compareOlder'), children: _jsx(ChevronRight, {}) })] }), canRestore ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void restore({ kind: 'all' }), disabled: busy || diff.changes.length === 0, title: translate('cms.version.restoreWholeTitle', { version: compare.base }), children: [_jsx(RotateCcw, {}), " ", translate('cms.version.restoreVersion')] })) : null] }), _jsxs(Text, { size: "xs", tone: "muted", className: "px-0.5", children: [diff.changes.length === 0
+    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: translate('cms.version.baseCaption'), 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: translate('cms.version.compareWithCaption'), 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: translate('cms.version.compareNewer'), "aria-label": translate('cms.version.compareNewer'), children: _jsx(ChevronLeft, {}) }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => olderBase !== undefined && setCompareBase(olderBase), disabled: olderBase === undefined, title: translate('cms.version.compareOlder'), "aria-label": translate('cms.version.compareOlder'), children: _jsx(ChevronRight, {}) })] }), canRestore ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void restore({ kind: 'all' }), disabled: busy || diff.changes.length === 0, title: translate('cms.version.restoreWholeTitle', { version: compare.base }), children: [_jsx(RotateCcw, {}), " ", translate('cms.version.restoreVersion')] })) : null] }), diff.changes.length > 0 ? (_jsxs(Row, { gap: "2", align: "center", justify: "between", wrap: true, className: "px-0.5", children: [_jsx(DiffViewToggle, { mode: mode, onChange: setMode }), _jsx(Button, { variant: "ghost", size: "sm", onClick: toggleExpandAll, children: translate(expandAll ? 'cms.field.collapseAll' : 'cms.field.expandAll') })] })) : null, _jsxs(Text, { size: "xs", tone: "muted", className: "px-0.5", children: [diff.changes.length === 0
                         ? translate('cms.version.noDifferences')
-                        : 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') })) : (_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: _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 }) }) }), groups.map((group) => (_jsx(FieldGroup, { group: group, canRestore: canRestore, busy: busy, onRestore: restore }, group.field)))] }))] }));
+                        : 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)))] }) }))] }));
 }
-/** A before | after grid; the continuous centre divider lives behind it (in the
- *  parent), so the gap is where the two columns meet. */
+const DiffDisplayContext = createContext(null);
+function useDiffDisplay() {
+    const ctx = useContext(DiffDisplayContext);
+    if (!ctx)
+        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). */
 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 })] }));
+    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 })] }));
+}
+/**
+ * Mode-aware value display (EC-317): side-by-side keeps the before | after
+ * columns; unified stacks a single "− before" / "+ after" pair in one lane,
+ * omitting whichever side doesn't exist (`added`/`removed` kind).
+ */
+function DiffColumns({ before, after, kind }) {
+    const { mode } = useDiffDisplay();
+    if (mode === 'unified') {
+        return (_jsxs(Stack, { gap: "1", children: [kind !== 'added' ? _jsx(UnifiedLine, { tone: "removed", children: before }) : null, kind !== 'removed' ? _jsx(UnifiedLine, { tone: "added", children: after }) : null] }));
+    }
+    return _jsx(TwoCol, { before: before, after: after });
+}
+function UnifiedLine({ tone, children }) {
+    return (_jsxs(Row, { gap: "2", align: "start", className: cn('rounded-sm px-1.5 py-1', tone === 'removed' ? 'bg-destructive/10' : 'bg-success/10'), children: [_jsx(Text, { size: "xs", mono: true, "aria-hidden": true, className: cn('mt-0.5 shrink-0 select-none', tone === 'removed' ? 'text-destructive' : 'text-success'), children: tone === 'removed' ? '−' : '+' }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+}
+/** Wraps truncatable content with its per-row "Show more"/"Show less" control —
+ *  hidden while the global "expand all" is active (nothing left to toggle). */
+function ExpandToggle({ id, isLong, expanded, children, }) {
+    const { expandAll, toggleExpand } = useDiffDisplay();
+    return (_jsxs("div", { children: [children, isLong && !expandAll ? (_jsx(Button, { variant: "link", size: "sm", className: "h-auto p-0 text-xs", onClick: () => toggleExpand(id), children: expanded ? translate('cms.version.showLess') : translate('cms.version.showMore') })) : null] }));
 }
 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: translate('cms.version.restoreField', { field: 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: entry.locale
-                                        ? translate('cms.version.restoreFieldLocale', {
-                                            field: group.label,
-                                            locale: localeChipLabel(entry.locale),
-                                        })
-                                        : translate('cms.version.restoreField', { field: group.label }), onClick: () => onRestore(fieldScope(entry)) })) : null] }), _jsx(EntryBody, { change: entry, canRestore: canRestore, busy: busy, onRestore: onRestore })] }, entry.locale ?? '__base__'))) })] }));
+/** The unified/side-by-side segmented toggle (EC-317) — same pill language as
+ *  the header's `ViewTabs`/locale switcher, so it reads as one lens control. */
+function DiffViewToggle({ mode, onChange }) {
+    return (_jsxs(Row, { gap: "px", className: "rounded-md bg-muted/50 p-0.5", role: "group", "aria-label": translate('cms.version.viewModeAriaLabel'), "data-testid": "diff-view-toggle", children: [_jsx(DiffViewOption, { active: mode === 'sideBySide', label: translate('cms.version.viewSideBySide'), onClick: () => onChange('sideBySide') }), _jsx(DiffViewOption, { active: mode === 'unified', label: translate('cms.version.viewUnified'), onClick: () => onChange('unified') })] }));
 }
-function EntryBody({ change, canRestore, busy, onRestore, }) {
+function DiffViewOption({ active, label, onClick }) {
+    return (_jsx("button", { type: "button", "aria-pressed": active, "data-testid": `diff-view-option-${active ? 'active' : 'inactive'}`, onClick: onClick, className: cn('rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors', active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'), children: label }));
+}
+/**
+ * One field's diff rows (EC-317: each locale variant is its own zebra-striped
+ * row with a descriptor lane — label reused from the studio's EC-241
+ * `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, }) {
+    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__'));
+        }) }));
+}
+/** 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 })] }));
+}
+/** 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, }) {
     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))) }));
+        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))) }));
     }
     if (change.type === 'richText') {
         const before = richTextToText(change.before);
         const after = richTextToText(change.after);
         if (before === after)
-            return (_jsx(MutedNote, { children: before
-                    ? translate('cms.version.textUnchanged')
-                    : translate('cms.version.contentChanged') }));
-        return _jsx(WordDiffCols, { before: before, after: after });
+            return (_jsx(MutedNote, { children: before ? translate('cms.version.textUnchanged') : translate('cms.version.contentChanged') }));
+        return _jsx(WordDiffCols, { id: rowId, 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(WordDiffCols, { id: rowId, 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 }) }));
+    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, canRestore, busy, onRestore, }) {
+function BlockSection({ block, rowId, 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 }, 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] }));
+    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] }));
 }
-function PropRow({ prop }) {
+function PropRow({ prop, rowId }) {
     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 }) }))] }));
+    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, { id: rowId, before: String(prop.before), after: String(prop.after) })) : (_jsx(DiffColumns, { kind: prop.kind, before: _jsx(SideValue, { value: prop.before, other: prop.after, id: `${rowId}|before` }), after: _jsx(SideValue, { value: prop.after, other: prop.before, id: `${rowId}|after` }) }))] }));
 }
 /** One side of a non-text change — the value, or an "empty" placeholder. */
-function SideValue({ value, other, typeHint }) {
+function SideValue({ value, other, typeHint, id, }) {
     if (value === undefined || value === null || value === '') {
         return (_jsx(Text, { size: "sm", tone: "subtle", className: "italic", children: translate('cms.version.emptyValue') }));
     }
-    return _jsx(ValueView, { value: value, other: other, typeHint: typeHint });
+    return _jsx(ValueView, { value: value, other: other, typeHint: typeHint, id: id });
 }
 /**
  * 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.
+ * thumbnails, relations as titles, everything else as calm text (EC-317: the
+ * plain-text fallback truncates past the shared length threshold).
  */
-function ValueView({ value, other, typeHint }) {
+function ValueView({ value, other, typeHint, id, }) {
+    // Called unconditionally up front (rules-of-hooks) even though only the plain-
+    // text fallback branch below needs it — the early returns above it don't hook.
+    const { isExpanded } = useDiffDisplay();
     if (typeHint === 'asset' || isAssetNode(value))
         return _jsx(AssetValue, { value: value });
     if (typeHint === 'relation' || readDocumentRef(value))
@@ -175,9 +276,13 @@ function ValueView({ value, other, typeHint }) {
         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)
-                ? translate(value.length === 1 ? 'cms.version.itemCount.one' : 'cms.version.itemCount.other', { count: value.length })
+                ? translate(value.length === 1 ? 'cms.version.itemCount.one' : 'cms.version.itemCount.other', {
+                    count: value.length,
+                })
                 : translate('cms.version.objectValue') }));
-    return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: String(value) }));
+    const expanded = isExpanded(id);
+    const { shown, isLong } = truncateText(String(value), expanded);
+    return (_jsx(ExpandToggle, { id: id, isLong: isLong, expanded: expanded, children: _jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: shown }) }));
 }
 function RelationValue({ value, other }) {
     const source = useCollectionView();
@@ -197,9 +302,7 @@ function RelationValue({ value, other }) {
     return _jsx(Text, { size: "sm", children: label });
 }
 function AssetValue({ value }) {
-    const ids = (Array.isArray(value) ? value : [value])
-        .map(readAssetId)
-        .filter((id) => id !== undefined);
+    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))) }));
@@ -219,16 +322,38 @@ function AssetThumb({ id }) {
     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 }) {
+/**
+ * Prose diff across a row (EC-317): side-by-side reads as two word-diffed
+ * columns; unified merges into ONE reading lane (`mergeWordDiff`). Either way,
+ * a value past the length threshold collapses behind the row's expand control
+ * — the full `wordDiff`/`mergeWordDiff` computation underneath is untouched.
+ */
+function WordDiffCols({ id, before, after }) {
+    const { mode, isExpanded } = useDiffDisplay();
+    const expanded = isExpanded(id);
     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" }) }));
+    const merged = useMemo(() => mergeWordDiff(wd.before, wd.after), [wd]);
+    if (mode === 'unified') {
+        const { shown, isLong } = truncateTokens(merged, expanded, DIFF_TRUNCATE_THRESHOLD);
+        return (_jsx(ExpandToggle, { id: id, isLong: isLong, expanded: expanded, children: _jsx(UnifiedWordTokens, { tokens: shown }) }));
+    }
+    const beforeSlice = truncateTokens(wd.before, expanded, DIFF_TRUNCATE_THRESHOLD);
+    const afterSlice = truncateTokens(wd.after, expanded, DIFF_TRUNCATE_THRESHOLD);
+    const isLong = beforeSlice.isLong || afterSlice.isLong;
+    return (_jsx(ExpandToggle, { id: id, isLong: isLong, expanded: expanded, children: _jsx(TwoCol, { before: _jsx(WordTokens, { tokens: beforeSlice.shown, side: "before" }), after: _jsx(WordTokens, { tokens: afterSlice.shown, 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))) }));
 }
+/** The unified lane's merged token stream — same marks as `WordTokens`, one
+ *  continuous reading order instead of two columns. */
+function UnifiedWordTokens({ tokens }) {
+    return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words leading-relaxed", children: tokens.map((token, i) => token.kind === 'same' ? (_jsx("span", { className: "text-muted-foreground", children: token.text }, i)) : (_jsx("mark", { className: cn('rounded-sm px-0.5', token.kind === 'removed'
+                ? 'bg-destructive/15 text-destructive line-through decoration-destructive/40'
+                : 'bg-success/20 text-foreground'), children: token.text }, i))) }));
+}
 // --- Small shared bits ------------------------------------------------------------
 /** A quiet "· new" / "· removed" tag; nothing for a plain change (implicit). */
 function KindTag({ kind }) {