@elytracms/studio 0.0.45 → 0.0.46

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

@@ -1,42 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { ArrowRight, ChevronDown, ChevronLeft, ChevronRight, Image as ImageIcon, RotateCcw } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { ArrowRight, ChevronDown, ChevronLeft, ChevronRight, RotateCcw } from 'lucide-react';
 import { diffDocuments } from '@elytracms/core/content';
-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 { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 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-labels';
-import { toRefArray } from './cell';
-import { DIFF_TRUNCATE_THRESHOLD, mergeWordDiff, richTextToText, truncateText, truncateTokens, wordDiff, } from './version-compare-text';
+import { DocumentDiffView } from './document-diff-view';
 import { useDocumentEditor } from './document-editor-context';
 import { useDocumentVersionsQuery } from './use-document-versions';
 import { useRestoreVersion } from './use-restore-version';
 import { formatVersionTimestamp } from './versions-model';
 /**
- * EC-298 — the version compare view. Renders as the sticky **Compare** content tab
- * (the Versions sidebar pane stays on as the navigator).
- *
- * A calm change-list grouped BY FIELD (a localized field's per-locale variants sit
- * together): 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 ↩.
+ * EC-298/317 — the version compare view: the sticky **Compare** content tab. This
+ * shell owns the version SELECTION chrome (the two re-pickable sides, the base
+ * stepper, restore-whole); the change-list itself is drawn by the shared
+ * {@link DocumentDiffView} (EC-317 descriptor lane, unified/side-by-side toggle,
+ * truncation, zebra) — the same renderer the EC-199 AI proposal review reuses, so
+ * there is exactly one diff renderer. Each field/locale (and block) restores back to
+ * the base version with a single ↩ (wired through `DocumentDiffView`'s `restore`).
  */
 export function VersionCompare() {
     const source = useCollectionView();
     const { collection, docRef, draft, dirty, viewReadOnly, save, replaceDraft, compare, setCompareBase, setCompareTarget, } = useDocumentEditor();
     const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef);
-    // EC-325 — the shared restore sequence (flush → restore → replaceDraft →
-    // invalidate). `busy` gates the restore controls below while it round-trips.
+    // EC-325 — the shared restore sequence (flush → restore → replaceDraft → invalidate).
     const { restore: restoreVersion, busy } = useRestoreVersion({
         source,
         docRef,
@@ -45,41 +32,6 @@ export function VersionCompare() {
         save,
         replaceDraft,
     });
-    // 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;
@@ -87,21 +39,6 @@ export function VersionCompare() {
     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;
@@ -138,300 +75,22 @@ 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] }), 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') })) : (_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. 0.0.41:
- *  a third slim column holds the field-row restore action — see {@link FieldRow}. */
-const DIFF_ROW_GRID = 'grid grid-cols-[7.5rem_1fr_1.75rem] items-start gap-x-4';
-/** A before | after grid with a clear central divider (0.0.39: a full-height ruled
- *  gutter — the same proportions in every row type, so the before/after split reads
- *  consistently across field rows, block-prop rows and word diffs). The columns keep
- *  a symmetric inset off the divider so values never touch it. */
-function TwoCol({ before, after, className }) {
-    return (_jsxs("div", { className: cn('relative grid grid-cols-2 gap-x-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] }));
+    const columnHeaders = {
+        unified: translate('cms.version.unifiedCaption', { base: compare.base, target: targetLabel }),
+        before: translate('cms.version.beforeVersion', { version: compare.base }),
+        after: translate('cms.version.afterTarget', { target: targetLabel }),
+    };
+    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(_Fragment, { children: [_jsx(Text, { size: "xs", tone: "muted", className: "px-0.5", children: translate('cms.version.noDifferences') }), _jsx(CompareNotice, { children: translate('cms.version.versionsIdentical') })] })) : (_jsx(DocumentDiffView, { diff: diff, collection: collection, columnHeaders: columnHeaders, restore: {
+                    baseVersion: compare.base,
+                    canRestore,
+                    busy,
+                    onRestore: (scope) => void restore(scope),
+                }, summaryHint: !canRestore ? translate('cms.version.comparingPastVersionsHint') : undefined }))] }));
 }
 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)))) })] }));
 }
-/** 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: [_jsx("div", { className: "min-w-0", children: descriptor }), _jsx("div", { className: "min-w-0", children: children }), _jsx("div", { className: "flex justify-end", children: restore })] }));
-}
-/** The descriptor lane's content (EC-317): field label always, locale chip only
- *  when this row is a localized variant, plus the quiet added/removed kind tag. */
-function FieldDescriptor({ label, locale, kind }) {
-    return (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "sm", weight: "medium", className: "min-w-0 truncate", children: label }), _jsxs(Row, { gap: "1", wrap: true, children: [locale ? (_jsx(Badge, { variant: "outline", className: "px-1 py-0 text-[0.6rem] uppercase tracking-wide text-muted-foreground", children: localeChipLabel(locale) })) : null, _jsx(KindTag, { kind: kind })] })] }));
-}
-function EntryBody({ change, rowId, baseVersion, canRestore, busy, onRestore, }) {
-    const localeScope = change.locale !== undefined ? { locale: change.locale } : {};
-    if (change.blocks) {
-        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, { id: rowId, before: before, after: after });
-    }
-    if (change.kind === 'changed' && typeof change.before === 'string' && typeof change.after === 'string') {
-        return _jsx(WordDiffCols, { id: rowId, before: change.before, after: change.after });
-    }
-    return (_jsx(DiffColumns, { kind: change.kind, before: _jsx(SideValue, { value: change.before, other: change.after, typeHint: change.type, id: `${rowId}|before` }), after: _jsx(SideValue, { value: change.after, other: change.before, typeHint: change.type, id: `${rowId}|after` }) }));
-}
-function BlockSection({ block, rowId, baseVersion, canRestore, busy, onRestore, }) {
-    const name = block.componentId.split('.').pop() ?? block.componentId;
-    // 0.0.39: each block is its own owned row — a header band (block name + id + kind,
-    // restore right-aligned) over the prop changes, indented under it with a left rail
-    // so the nesting (field → block → props) reads at a glance.
-    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-border/60", children: [_jsxs(Row, { gap: "2", align: "center", className: "border-b border-border/50 bg-muted/30 px-2 py-1.5", children: [_jsx(Text, { size: "xs", weight: "semibold", className: "min-w-0 truncate", children: name }), _jsx(Code, { tone: "muted", children: block.componentId }), _jsx(KindTag, { kind: block.kind }), _jsx(Spacer, {}), canRestore ? (_jsx(RestoreIcon, { busy: busy, title: translate('cms.version.restoreBlock', { version: baseVersion }), onClick: onRestore })) : null] }), _jsxs("div", { className: "px-2 py-2", children: [block.props && block.props.length > 0 ? (_jsx(Stack, { gap: "3", className: "border-l-2 border-border/50 pl-3", children: block.props.map((prop) => (_jsx(PropRow, { prop: prop, rowId: `${rowId}|prop:${prop.name}` }, prop.name))) })) : null, block.slotsChanged ? _jsx(MutedNote, { children: translate('cms.version.nestedContentChanged') }) : null, block.kind !== 'changed' && !block.props?.length ? (_jsx(MutedNote, { children: block.kind === 'added' ? translate('cms.version.blockAdded') : translate('cms.version.blockRemoved') })) : null] })] }));
-}
-function PropRow({ prop, rowId }) {
-    const useWordDiff = prop.kind === 'changed' && typeof prop.before === 'string' && typeof prop.after === 'string';
-    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, 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, 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 (EC-317: the
- * plain-text fallback truncates past the shared length threshold).
- */
-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))
-        return _jsx(RelationValue, { value: value, other: other });
-    if (typeHint === 'richText')
-        return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: richTextToText(value) || translate('cms.version.richText') }));
-    if (typeHint === 'boolean' || typeof value === 'boolean')
-        return (_jsx(Text, { size: "sm", mono: true, children: value === true ? translate('common.yes') : translate('common.no') }));
-    if (typeHint === 'date')
-        return (_jsx(Text, { size: "sm", mono: true, children: String(value).slice(0, 10) }));
-    if (typeof value === 'object')
-        return (_jsx(Text, { size: "sm", tone: "muted", children: Array.isArray(value)
-                ? translate(value.length === 1 ? 'cms.version.itemCount.one' : 'cms.version.itemCount.other', {
-                    count: value.length,
-                })
-                : translate('cms.version.objectValue') }));
-    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();
-    const refs = toRefArray(value);
-    if (refs.length === 0)
-        return (_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: String(value) }));
-    const otherRefs = other !== undefined ? toRefArray(other) : [];
-    // Disambiguate a same-titled but different target (the "Ada → Ada" trap): show
-    // the id only when the titles would otherwise read identically.
-    const label = refs
-        .map((ref) => {
-        const title = source.titleOf(ref);
-        const collision = otherRefs.some((o) => o.id !== ref.id && source.titleOf(o) === title);
-        return collision ? `${title} · ${ref.id}` : title;
-    })
-        .join(', ');
-    return _jsx(Text, { size: "sm", children: label });
-}
-/**
- * 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 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: 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. */
-function AssetThumb({ id }) {
-    const source = useCollectionView();
-    const assetCollectionId = source.assetCollectionId ?? 'asset';
-    const record = source.resolveAsset?.(id);
-    const label = record?.title ?? record?.filename ?? source.titleOf({ collection: assetCollectionId, id });
-    const isImage = record?.contentType?.startsWith('image/') ?? false;
-    const url = record?.url;
-    if (isImage && url && url.startsWith('http')) {
-        return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx("img", { src: url, alt: record?.alt ?? label, loading: "lazy", className: "size-12 shrink-0 rounded border border-border bg-muted object-cover" }), _jsx(Text, { size: "xs", tone: "muted", className: "min-w-0 truncate", children: label })] }));
-    }
-    return (_jsxs(Badge, { variant: "outline", children: [_jsx(ImageIcon, { className: "size-3" }), " ", label] }));
-}
-// --- Prose word diff --------------------------------------------------------------
-/**
- * Prose diff across 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]);
-    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 }) {
-    if (kind === 'changed')
-        return null;
-    return (_jsxs(Text, { size: "xs", tone: "subtle", children: ["\u00B7 ", kind === 'added' ? translate('cms.version.kindNew') : translate('cms.version.kindRemoved')] }));
-}
-function RestoreIcon({ busy, title, onClick }) {
-    return (_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: busy, title: title, "aria-label": title, onClick: onClick, children: _jsx(RotateCcw, {}) }));
-}
-function MutedNote({ children }) {
-    return (_jsx(Text, { size: "sm", tone: "muted", className: "italic", children: children }));
-}
 function CompareNotice({ children }) {
     return (_jsx("div", { className: "mx-auto w-full max-w-5xl p-4 sm:p-6", children: _jsx("div", { className: "rounded-md border border-dashed border-border/70 px-4 py-8 text-center", children: _jsx(Text, { size: "sm", tone: "muted", children: children }) }) }));
 }
-function fieldScope(change) {
-    return { kind: 'field', field: change.field, ...(change.locale !== undefined ? { locale: change.locale } : {}) };
-}
-/**
- * Group changes BY FIELD (a localized field's per-locale variants together),
- * fields in schema order, locales in project order (base bucket first).
- */
-function groupByField(changes, fieldOrder, localeRank) {
-    const map = new Map();
-    for (const change of changes) {
-        let group = map.get(change.field);
-        if (!group) {
-            group = { field: change.field, label: change.label, type: change.type, entries: [] };
-            map.set(change.field, group);
-        }
-        group.entries.push(change);
-    }
-    const groups = [...map.values()];
-    groups.sort((a, b) => (fieldOrder.get(a.field) ?? Number.MAX_SAFE_INTEGER) - (fieldOrder.get(b.field) ?? Number.MAX_SAFE_INTEGER));
-    for (const group of groups) {
-        group.entries.sort((a, b) => localeCompare(a.locale, b.locale, localeRank));
-    }
-    return groups;
-}
-function localeCompare(a, b, rank) {
-    if (a === b)
-        return 0;
-    if (a === undefined)
-        return -1; // base bucket first
-    if (b === undefined)
-        return 1;
-    return (rank.get(a) ?? 99) - (rank.get(b) ?? 99);
-}
-/** camelCase / snake prop name → a readable label. */
-function prettyName(name) {
-    const spaced = name.replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2');
-    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-}
 //# sourceMappingURL=version-compare.js.map