@elytracms/studio 0.0.38 → 0.0.40

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

@@ -55,6 +55,84 @@ export function wordDiff(before, after) {
         afterTokens.push({ text: b[j++], changed: true });
     return { before: beforeTokens, after: afterTokens };
 }
+/**
+ * Merge a {@link wordDiff} pair into ONE reading lane (EC-317 unified view) —
+ * a single stream of `same` / `removed` / `added` tokens instead of two
+ * columns. Sound by construction: `wordDiff` pushes an `unchanged` token to
+ * BOTH sides in the SAME loop iteration (so the Nth unchanged token in
+ * `before` and the Nth unchanged token in `after` are always the same anchor),
+ * and every stretch between two anchors is a contiguous `changed` run on
+ * either side (possibly empty on one, or both — a pure add/remove — or both
+ * nonempty — a replace). Walking both arrays in lockstep and draining each
+ * side's changed run between anchors reconstructs that reading order exactly.
+ */
+export function mergeWordDiff(before, after) {
+    const merged = [];
+    let i = 0;
+    let j = 0;
+    while (i < before.length && j < after.length) {
+        if (!before[i].changed && !after[j].changed) {
+            merged.push({ text: before[i].text, kind: 'same' });
+            i++;
+            j++;
+            continue;
+        }
+        while (i < before.length && before[i].changed) {
+            merged.push({ text: before[i].text, kind: 'removed' });
+            i++;
+        }
+        while (j < after.length && after[j].changed) {
+            merged.push({ text: after[j].text, kind: 'added' });
+            j++;
+        }
+    }
+    // A trailing changed run on whichever side still has tokens once the other
+    // is exhausted (wordDiff's own trailing while-loops produce exactly this).
+    while (i < before.length)
+        merged.push({ text: before[i++].text, kind: 'removed' });
+    while (j < after.length)
+        merged.push({ text: after[j++].text, kind: 'added' });
+    return merged;
+}
+/**
+ * A sensible default length threshold (characters) past which the EC-317
+ * compare view collapses a value behind a per-row "Show more" — long enough to
+ * read a couple of sentences at a glance, short enough that a full rich-text
+ * body doesn't dominate the change-list.
+ */
+export const DIFF_TRUNCATE_THRESHOLD = 400;
+/**
+ * Collapse a plain text value for display (EC-317) — presentation only, never
+ * touching the semantic/identity diff underneath: the caller always has the
+ * full string, this just decides how much of it to render.
+ */
+export function truncateText(text, expanded, threshold = DIFF_TRUNCATE_THRESHOLD) {
+    const isLong = text.length > threshold;
+    if (expanded || !isLong)
+        return { shown: text, isLong };
+    return { shown: `${text.slice(0, threshold).trimEnd()}…`, isLong };
+}
+/**
+ * The token-array counterpart of {@link truncateText} — used for word-diff /
+ * merged-diff token streams so a collapsed row still ends on a whole token
+ * (never mid-word) and the change markers (`changed`/`kind`) it slices off
+ * are simply not rendered, not recomputed.
+ */
+export function truncateTokens(tokens, expanded, threshold = DIFF_TRUNCATE_THRESHOLD) {
+    const totalLength = tokens.reduce((sum, token) => sum + token.text.length, 0);
+    const isLong = totalLength > threshold;
+    if (expanded || !isLong)
+        return { shown: [...tokens], isLong };
+    const shown = [];
+    let used = 0;
+    for (const token of tokens) {
+        if (used >= threshold)
+            break;
+        shown.push(token);
+        used += token.text.length;
+    }
+    return { shown, isLong };
+}
 /**
  * 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

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

@@ -1 +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"]}
+{"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\n/** A token in the EC-317 unified (single-lane) prose diff: `same` reads plain,\n *  `removed`/`added` are the struck/highlighted halves of a changed run. */\nexport interface MergedDiffToken {\n  text: string\n  kind: 'same' | 'removed' | 'added'\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 * Merge a {@link wordDiff} pair into ONE reading lane (EC-317 unified view) —\n * a single stream of `same` / `removed` / `added` tokens instead of two\n * columns. Sound by construction: `wordDiff` pushes an `unchanged` token to\n * BOTH sides in the SAME loop iteration (so the Nth unchanged token in\n * `before` and the Nth unchanged token in `after` are always the same anchor),\n * and every stretch between two anchors is a contiguous `changed` run on\n * either side (possibly empty on one, or both — a pure add/remove — or both\n * nonempty — a replace). Walking both arrays in lockstep and draining each\n * side's changed run between anchors reconstructs that reading order exactly.\n */\nexport function mergeWordDiff(before: WordToken[], after: WordToken[]): MergedDiffToken[] {\n  const merged: MergedDiffToken[] = []\n  let i = 0\n  let j = 0\n  while (i < before.length && j < after.length) {\n    if (!before[i]!.changed && !after[j]!.changed) {\n      merged.push({ text: before[i]!.text, kind: 'same' })\n      i++\n      j++\n      continue\n    }\n    while (i < before.length && before[i]!.changed) {\n      merged.push({ text: before[i]!.text, kind: 'removed' })\n      i++\n    }\n    while (j < after.length && after[j]!.changed) {\n      merged.push({ text: after[j]!.text, kind: 'added' })\n      j++\n    }\n  }\n  // A trailing changed run on whichever side still has tokens once the other\n  // is exhausted (wordDiff's own trailing while-loops produce exactly this).\n  while (i < before.length) merged.push({ text: before[i++]!.text, kind: 'removed' })\n  while (j < after.length) merged.push({ text: after[j++]!.text, kind: 'added' })\n  return merged\n}\n\n/**\n * A sensible default length threshold (characters) past which the EC-317\n * compare view collapses a value behind a per-row \"Show more\" — long enough to\n * read a couple of sentences at a glance, short enough that a full rich-text\n * body doesn't dominate the change-list.\n */\nexport const DIFF_TRUNCATE_THRESHOLD = 400\n\n/**\n * Collapse a plain text value for display (EC-317) — presentation only, never\n * touching the semantic/identity diff underneath: the caller always has the\n * full string, this just decides how much of it to render.\n */\nexport function truncateText(\n  text: string,\n  expanded: boolean,\n  threshold = DIFF_TRUNCATE_THRESHOLD,\n): { shown: string; isLong: boolean } {\n  const isLong = text.length > threshold\n  if (expanded || !isLong) return { shown: text, isLong }\n  return { shown: `${text.slice(0, threshold).trimEnd()}…`, isLong }\n}\n\n/**\n * The token-array counterpart of {@link truncateText} — used for word-diff /\n * merged-diff token streams so a collapsed row still ends on a whole token\n * (never mid-word) and the change markers (`changed`/`kind`) it slices off\n * are simply not rendered, not recomputed.\n */\nexport function truncateTokens<T extends { text: string }>(\n  tokens: readonly T[],\n  expanded: boolean,\n  threshold = DIFF_TRUNCATE_THRESHOLD,\n): { shown: T[]; isLong: boolean } {\n  const totalLength = tokens.reduce((sum, token) => sum + token.text.length, 0)\n  const isLong = totalLength > threshold\n  if (expanded || !isLong) return { shown: [...tokens], isLong }\n  const shown: T[] = []\n  let used = 0\n  for (const token of tokens) {\n    if (used >= threshold) break\n    shown.push(token)\n    used += token.text.length\n  }\n  return { shown, isLong }\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

@@ -3,10 +3,14 @@
  * (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 declare function VersionCompare(): import("react").JSX.Element | null;

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

@@ -1,16 +1,18 @@
 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';
+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';
 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,139 @@ 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)))] }))] }));
-}
-/** A before | after grid; the continuous centre divider lives behind it (in the
- *  parent), so the gap is where the two columns meet. */
+                        : 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, baseVersion: compare.base, canRestore: canRestore, busy: busy, onRestore: restore }, group.field)))] }) }))] }));
+}
+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 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('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-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
+ * 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__'))) })] }));
-}
-function EntryBody({ change, canRestore, busy, onRestore, }) {
+/** 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 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, 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 ?? '_'}`;
+            // 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 items-start justify-between gap-1", children: [_jsx("div", { className: "min-w-0", children: descriptor }), restore ? _jsx("div", { className: "shrink-0", children: restore }) : null] }), _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, 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, 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);
         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, 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 }, 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 }) {
+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 +286,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();
@@ -196,13 +311,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. */
@@ -219,16 +350,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 }) {