@elytracms/studio 0.0.26 → 0.0.28

package/dist/components/cms/detail-editor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link, STUDIO_PROJECT_ROUTE, studioPath, useNavigate } from '@elytracms/studio/router';
-import { CircleAlert, CircleCheck, ExternalLink, Eye, EyeOff, History, Languages, Loader2, Lock, MoreHorizontal, Tag, Trash2, } from 'lucide-react';
+import { Check, CircleAlert, CircleCheck, ExternalLink, Eye, EyeOff, GitCompareArrows, History, Languages, Link2, Loader2, Lock, MoreHorizontal, Tag, Trash2, X, } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FIELD_WIDTH_SPANS, SIDEBAR_FIELD_GROUP, clearHiddenValues, documentKey, groupOrder, groupSectionOf, hasAliases, hiddenGroupNames, isBlocksField, isFieldHidden, isFieldLocalized, isSingleton, resolveDocumentForLocale, resolveDocumentTitle, resolveField, sidebarFields, titleFieldOf, staticFieldHidden, urlForDocument, } from '@elytracms/core/cms-core';
 import { blockRootsOf } from '@elytracms/core/project-graph';
@@ -13,33 +13,79 @@ import { parseDocumentFieldPath } from '@elytracms/studio/lib/references';
 import { FallbackChip, fallbackTitle } from './cell';
 import { FieldControl } from './field-control';
 import { CompositionFieldEditor } from '../builder/composition-field-editor';
-import { fieldLabel, useCms } from './cms-store';
+import { fieldLabel } from './cms-store';
+import { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source';
+import { CollectionViewProvider, useCollectionView } from '../collection-view/collection-view-context';
+import { resolveFieldAccess } from '@elytracms/studio/lib/collection-view/collection-view-source';
 import { DocStateBadge } from './doc-state';
+import { UnsavedChangesGuard } from '../guards';
 import { ReferenceConfirmDialog } from './reference-confirm';
 import { ReferencesPanel } from '../references/references-panel';
 import { InspectorSidebar } from '../inspector/inspector-sidebar';
 import { DocumentEditorProvider } from './document-editor-context';
 import { VersionsPane } from './versions-pane';
+import { VersionCompare } from './version-compare';
 import { IssuesPane } from './issues-pane';
 import { DetailsPane } from './details-pane';
 import { useSetBreadcrumb } from '../breadcrumb-context';
 import { resolveDeploymentFrontendUrl, resolveDeploymentRoutes } from '@elytracms/studio/lib/workspace';
 import { usePublishedDocuments } from '@elytracms/studio/lib/cms/published-documents';
+/** The conventional slug field name (mirrors `url-for-document`'s `SLUG_FIELD`). */
+const SLUG_FIELD = 'slug';
 export function DetailEditor({ projectId, collectionId, documentId, focusPath, }) {
-    const cms = useCms();
-    const collection = cms.getCollection(collectionId);
-    const doc = cms.getDocument({ collection: collectionId, id: documentId });
+    // AD-19: the edit shell is a portable surface over a CollectionViewSource, just
+    // like the list. `DetailEditor` is the CMS entry point — it builds the CMS source
+    // and hands it to the portable {@link PortableDetailEditor} so `EditorBody` (and
+    // the shared field controls / pickers) render over the source, never `useCms()`.
+    const source = useCmsCollectionViewSource(collectionId);
+    if (!source) {
+        return (_jsx(DocumentNotFound, { projectId: projectId, listPath: studioPath.cmsCollection(collectionId), label: collectionId }));
+    }
+    return (_jsx(PortableDetailEditor, { source: source, projectId: projectId, documentId: documentId, focusPath: focusPath }));
+}
+/**
+ * The portable edit shell (EC-240 / AD-19): resolve the record by id from ANY
+ * {@link CollectionViewSource}, then render the shared {@link EditorBody} over it.
+ * The CMS entry point ({@link DetailEditor}) and the users rail both mount this —
+ * routing (the "back to list" target, the not-found link) is rail-owned via
+ * `source.listPath`, so the shell never hard-codes the CMS route.
+ */
+export function PortableDetailEditor({ source, projectId, documentId, focusPath, }) {
+    const doc = source.get({ collection: source.collectionId, id: documentId });
     // EC-274: singleton opening is owned by `SingletonGate` (it resolves the lone
     // document and materializes it). The detail editor just renders the document it
     // is given by id — singletons need no special case here.
-    if (!collection || !doc) {
-        return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: "Document not found" }), _jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.cmsCollection(collectionId) }, className: "text-sm text-primary hover:underline", children: ["Back to ", collectionId] })] }) }));
+    if (!doc) {
+        return (_jsx(DocumentNotFound, { projectId: projectId, listPath: source.listPath, label: source.schema.form?.label ?? source.collectionId }));
     }
-    return (_jsx(EditorBody, { projectId: projectId, collection: collection, doc: doc, focusPath: focusPath }, `${collectionId}/${documentId}`));
+    return (_jsx(CollectionViewProvider, { source: source, children: _jsx(EditorBody, { projectId: projectId, collection: source.schema, doc: doc, focusPath: focusPath }, `${source.collectionId}/${documentId}`) }));
+}
+/** The record-not-found state — a heading + a rail-owned "back to list" link. */
+function DocumentNotFound({ projectId, listPath, label, }) {
+    return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: "Not found" }), listPath !== undefined ? (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: listPath }, className: "text-sm text-primary hover:underline", children: ["Back to ", label] })) : null] }) }));
 }
 function EditorBody({ projectId, collection, doc, focusPath, }) {
-    const cms = useCms();
+    const source = useCollectionView();
     const navigate = useNavigate();
+    // AD-19: capability flags gate whole shell regions AND their method groups, so
+    // the SAME edit shell serves a non-publishing / non-versioned / single-locale
+    // rail (the users rail, EC-240) without a bespoke editor. A false flag hides its
+    // region entirely — no dead controls, no reads fired on that region's behalf.
+    const canPublish = source.capabilities.publish;
+    const canVersions = source.capabilities.versions;
+    const canLocales = source.capabilities.locales;
+    // References is the CMS content-graph surface (the reference index tracks the
+    // publishable document rail). A non-publishing rail (users, future redirects) is
+    // not part of that graph, so its References tab would be structurally empty —
+    // gate it off. A dedicated `references` capability can split this later if a
+    // non-publishing-but-referenceable rail appears (YAGNI today).
+    const showReferences = canPublish;
+    // Principal-based field access (EC-240, AD-18): `edit｜read｜hidden`, resolved
+    // per field for the current principal. Default-open — a source with no policy
+    // derives it from `isFieldReadOnly`. Access depends on the record's identity, not
+    // its edited values (content-conditional hiding is the separate `isHidden` axis),
+    // so it keys off the stable `doc`, never the live draft.
+    const accessOf = useCallback((field) => resolveFieldAccess(source, field, doc), [source, doc]);
     // EC-217: a singleton collection has no list — there is nowhere to go "back"
     // to, and its one document is fixed (never deleted). The header drops the
     // back-crumb/id line and the Delete action accordingly.
@@ -47,7 +93,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     const [draft, setDraft] = useState(() => structuredClone(doc));
     // The studio's ambient active locale (EC-176): the form displays and edits
     // exactly this locale — switched via the shared LocaleSwitcher, never per field.
-    const locale = cms.activeLocale;
+    const locale = source.activeLocale;
     // Bumped when a version restore replaces the draft out-of-band, to remount the
     // (uncontrolled) canvas editor from the restored value (EC-224).
     const [restoreNonce, setRestoreNonce] = useState(0);
@@ -59,7 +105,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // EC-226: the draft/published VIEW perspective. Draft = the editable working
     // draft; Published = the pinned published snapshot, rendered read-only. Only
     // meaningful when the document is published.
-    const published = cms.isPublished(ref);
+    const published = source.publishing?.isPublished(ref) ?? false;
     const [perspective, setPerspective] = useState('draft');
     const [publishedSnapshot, setPublishedSnapshot] = useState({ status: 'loading' });
     // Snap back to Draft if the document is unpublished while viewing Published.
@@ -70,10 +116,12 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // Load the pinned published snapshot when viewing Published (fresh each switch,
     // so it reflects the current pin after a re-publish). `loadDocumentVersions` is
     // a stable callback, so this only re-runs on a perspective/ref change.
-    const loadVersions = cms.loadDocumentVersions;
+    const loadVersions = source.versioning?.load;
     useEffect(() => {
         if (perspective !== 'published')
             return;
+        if (!loadVersions)
+            return;
         let cancelled = false;
         setPublishedSnapshot({ status: 'loading' });
         void (async () => {
@@ -96,38 +144,48 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     const viewDoc = viewReadOnly && publishedSnapshot.status === 'ready' ? publishedSnapshot.doc : draft;
     const publishedPending = viewReadOnly && publishedSnapshot.status !== 'ready';
     const dirty = JSON.stringify(draft) !== JSON.stringify(doc);
-    const schemaIssues = useMemo(() => cms.validate(draft), [cms, draft]);
+    const schemaIssues = useMemo(() => source.validate(draft), [source, draft]);
     // EC-300/AD-16: composition embeds (hard references) whose target isn't published
     // would render empty on the live site. Surface them as errors in the Issues panel,
     // but they DON'T gate the Publish button (schema errors do) — publishing is
     // confirm-through, so the editor can publish the page and the reusable together
     // knowingly. The publish guard below catches them.
-    const referenceIssues = useMemo(() => unpublishedEmbedIssues(collection, draft, cms), [collection, draft, cms]);
+    const referenceIssues = useMemo(() => unpublishedEmbedIssues(collection, draft, source), [collection, draft, source]);
     const issues = useMemo(() => [...schemaIssues, ...referenceIssues], [schemaIssues, referenceIssues]);
     const errorCount = schemaIssues.filter((i) => i.severity === 'error').length;
     const hasErrors = errorCount > 0;
     const hasUnpublishedRefs = referenceIssues.length > 0;
-    // --- Autosave (EC-225) -----------------------------------------------------
-    // The draft persists automatically 1s after the last edit; there is no manual
-    // Save button. Refs let the unmount flush read the latest values without
-    // re-subscribing the effects.
+    // --- Save mode (EC-225 autosave · EC-240 explicit) -------------------------
+    // A publishing rail AUTOSAVES: the draft persists 1s after the last edit and
+    // publish is the deliberate commit. A non-publishing rail (users, EC-240) has no
+    // publish step, so silent apply is the wrong default for authority data — it
+    // SAVES EXPLICITLY instead: edits stay in the draft until the Save button, and a
+    // navigation guard protects unsaved changes. (Role stays in `members`, applied
+    // on Save and enforced immediately — never behind a publish pointer.)
+    // Refs let the unmount flush read the latest values without re-subscribing.
+    const explicitSave = !canPublish;
     const draftRef = useRef(draft);
     draftRef.current = draft;
     const dirtyRef = useRef(dirty);
     dirtyRef.current = dirty;
-    const cmsRef = useRef(cms);
-    cmsRef.current = cms;
+    const sourceRef = useRef(source);
+    sourceRef.current = source;
+    const explicitSaveRef = useRef(explicitSave);
+    explicitSaveRef.current = explicitSave;
     useEffect(() => {
+        if (explicitSave)
+            return; // explicit rails persist only via the Save button
         if (!dirty)
             return;
-        const timer = window.setTimeout(() => cmsRef.current.saveDocument(draftRef.current), 1000);
+        const timer = window.setTimeout(() => sourceRef.current.save(draftRef.current), 1000);
         return () => window.clearTimeout(timer);
-    }, [dirty, draft]);
-    // Flush a still-pending edit on unmount (navigating away inside the debounce
-    // window) so nothing is lost. Unmount-only — refs carry the latest state.
+    }, [dirty, draft, explicitSave]);
+    // Flush a still-pending AUTOSAVE edit on unmount (navigating away inside the
+    // debounce window) so nothing is lost. Explicit rails never flush silently —
+    // their `UnsavedChangesGuard` catches the navigation instead. Unmount-only.
     useEffect(() => () => {
-        if (dirtyRef.current)
-            cmsRef.current.saveDocument(draftRef.current);
+        if (!explicitSaveRef.current && dirtyRef.current)
+            sourceRef.current.save(draftRef.current);
     }, []);
     const errorsByField = useMemo(() => {
         const map = new Map();
@@ -145,7 +203,9 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // (and loads) only when selected, and unmounts on leave, so normal editing
     // never triggers reference fetching. Appended after the collection's content tabs.
     const REFERENCES_TAB = 'references';
-    const editorTabs = [...tabs, REFERENCES_TAB];
+    // EC-298: the version-compare view is a sticky framework tab (kept open while
+    // you tab to the real fields; closed only by its ✕).
+    const COMPARE_TAB = 'compare';
     const [activeTab, setActiveTab] = useState(tabs[0]);
     // EC-285: the reserved `sidebar` group is document-level metadata (slug, author…)
     // — it renders in the Details inspector pane, not as a content tab, so it is
@@ -168,6 +228,33 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // `sidebar`-group field can open the Details pane (where it renders). Undefined
     // = uncontrolled (the sidebar defaults to its first pane).
     const [inspectorPaneId, setInspectorPaneId] = useState();
+    // EC-298: the open version comparison. The Compare tab is STICKY — opening it
+    // sets the selection and focuses the tab; tabbing to the real fields keeps it
+    // open (the selection persists) so an editor can flip between diff and fields;
+    // only its ✕ closes it. `activeTab === COMPARE_TAB` is when the diff is visible.
+    const [compare, setCompare] = useState(null);
+    const startCompare = useCallback((base) => {
+        setCompare({ base, target: 'draft' });
+        setActiveTab(COMPARE_TAB);
+        setInspectorPaneId('versions');
+    }, []);
+    const setCompareBase = useCallback((base) => {
+        setCompare((c) => (c ? { ...c, base } : { base, target: 'draft' }));
+    }, []);
+    const setCompareTarget = useCallback((target) => {
+        setCompare((c) => (c ? { ...c, target } : c));
+    }, []);
+    const exitCompare = useCallback(() => {
+        setCompare(null);
+        setActiveTab((prev) => (prev === COMPARE_TAB ? tabs[0] : prev));
+    }, [tabs]);
+    // A content tab (schema tab or References). Selecting one leaves the Compare
+    // view VISIBLE-wise but keeps the comparison open (sticky) — the diff is one
+    // click away on its still-present tab chip.
+    const renderContentTab = (tab) => {
+        const active = tab === activeTab;
+        return (_jsx("button", { type: "button", "aria-pressed": active, onClick: () => setActiveTab(tab), className: cn('rounded-md px-2.5 py-1 text-xs font-medium capitalize transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'), children: tab }, tab));
+    };
     // Focus a field by name: switch to its tab (and locale, when given), scroll the
     // control into view, and ring-highlight it. Shared by the reference deep-link
     // (`focusPath`, EC-172) and the Issues pane's jump-to-field (EC-283).
@@ -185,7 +272,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
             const fieldTabs = collection.form?.tabs ?? ['main'];
             setActiveTab(field.form?.tab ?? fieldTabs[0]);
         }
-        if (localeHint !== undefined && cms.localeConfig.locales.includes(localeHint)) {
+        if (localeHint !== undefined && source.localeConfig.locales.includes(localeHint)) {
             setStudioLocale(localeHint);
         }
         setHighlightedField(field.name);
@@ -200,7 +287,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
         }, 60);
         const clearTimer = window.setTimeout(() => setHighlightedField(null), 3200);
         focusTimersRef.current = [scrollTimer, clearTimer];
-    }, [collection, cms.localeConfig]);
+    }, [collection, source.localeConfig]);
     useEffect(() => () => focusTimersRef.current.forEach((t) => window.clearTimeout(t)), []);
     // Reference deep links (EC-172): `?field=<index path>` pinpoints the exact field.
     useEffect(() => {
@@ -221,7 +308,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
             const explicit = viewDoc.localized?.[locale]?.[field.name];
             if (explicit !== undefined)
                 return explicit;
-            return resolveField(collection, viewDoc, field.name, locale, cms.localeConfig).value;
+            return resolveField(collection, viewDoc, field.name, locale, source.localeConfig).value;
         }
         return viewDoc.values[field.name];
     }
@@ -249,7 +336,9 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // draft changes, so a field shows/hides live as the editor types.
     const conditionValues = { ...draft.values, ...(draft.localized?.[locale] ?? {}) };
     const isHidden = (field) => isFieldHidden(field, { values: conditionValues });
-    const visibleSidebarFields = sidebarFieldDefs.filter((f) => !isHidden(f));
+    // Visible = not content-hidden AND not principal-hidden (EC-240 access === 'hidden').
+    const isFieldShown = (field) => !isHidden(field) && accessOf(field) !== 'hidden';
+    const visibleSidebarFields = sidebarFieldDefs.filter(isFieldShown);
     // EC-306: presentational group sections hidden right now (static or predicate) —
     // skipped entirely, like a hidden field. Recomputed live as the draft changes.
     const hiddenGroups = hiddenGroupNames(collection, { values: conditionValues });
@@ -261,15 +350,20 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     function renderFieldRow(field) {
         if (isHidden(field))
             return null;
-        // Field-level read-only (the Lock badge) vs the view-level read-only
-        // (Published perspective) — the control honors both.
-        const fieldLevelReadOnly = cms.isFieldReadOnly(field);
+        // EC-240: principal-based access. `hidden` drops the row entirely (this
+        // principal can't see the field); `read` renders it read-only. Distinct from
+        // the content-conditional `isHidden` above and the view-level read-only
+        // (Published perspective) — the control honors all three.
+        const access = accessOf(field);
+        if (access === 'hidden')
+            return null;
+        const fieldLevelReadOnly = access === 'read';
         const fieldReadOnly = viewReadOnly || fieldLevelReadOnly;
         const localized = isFieldLocalized(collection, field.name);
         // Fallback visibility (EC-176): the control DISPLAYS the fallback value, and
         // this marker says so on the exact field.
         const fallback = localized
-            ? displayedFieldFallback(collection, viewDoc, field.name, locale, cms.localeConfig)
+            ? displayedFieldFallback(collection, viewDoc, field.name, locale, source.localeConfig)
             : null;
         // The variant was created in this editing session (the saved document doesn't
         // have it yet): editing a fallback-shown value is an explicit translation act.
@@ -278,10 +372,10 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
             localized &&
             hasLocaleVariant(draft, field.name, locale) &&
             !hasLocaleVariant(doc, field.name, locale);
-        return (_jsx(Field, { className: cn('rounded-md transition-shadow', highlightedField === field.name && 'bg-primary/5 p-2 ring-2 ring-primary/70'), label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: fieldLabel(field) }), field.validation?.required ? _jsx("span", { className: "text-destructive", children: "*" }) : null, localized ? _jsx(Badge, { variant: "outline", children: locale }) : null, fallback ? (_jsxs(Badge, { variant: "warning", title: fallbackTitle(fallback), "data-testid": `field-fallback-${field.name}`, children: ["showing ", localeChipLabel(fallback.sourceLocale)] })) : null, newlyTranslated ? (_jsxs(Badge, { variant: "success", "data-testid": `field-translated-${field.name}`, children: [_jsx(Languages, { className: "size-3" }), " translated to ", localeChipLabel(locale)] })) : null, fieldLevelReadOnly ? (_jsxs(Badge, { variant: "outline", children: [_jsx(Lock, { className: "size-3" }), " read-only"] })) : null, _jsx(Spacer, {})] }), htmlFor: `f-${field.name}`, hint: fallback ? (_jsxs(_Fragment, { children: ["Showing the ", localeChipLabel(fallback.sourceLocale), " (fallback) value \u2014 edit to translate to ", localeChipLabel(locale), ". Clearing the ", localeChipLabel(locale), " text falls back again."] })) : (field.form?.description), error: fieldReadOnly ? undefined : errorsByField.get(field.name), children: _jsx(FieldControl, { id: `f-${field.name}`, field: field, value: getValue(field), onChange: (v) => setValue(field, v), readOnly: fieldReadOnly }) }, field.name));
+        return (_jsxs(Field, { className: cn('rounded-md transition-shadow', highlightedField === field.name && 'bg-primary/5 p-2 ring-2 ring-primary/70'), label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: fieldLabel(field) }), field.validation?.required ? _jsx("span", { className: "text-destructive", children: "*" }) : null, localized ? _jsx(Badge, { variant: "outline", children: locale }) : null, fallback ? (_jsxs(Badge, { variant: "warning", title: fallbackTitle(fallback), "data-testid": `field-fallback-${field.name}`, children: ["showing ", localeChipLabel(fallback.sourceLocale)] })) : null, newlyTranslated ? (_jsxs(Badge, { variant: "success", "data-testid": `field-translated-${field.name}`, children: [_jsx(Languages, { className: "size-3" }), " translated to ", localeChipLabel(locale)] })) : null, fieldLevelReadOnly ? (_jsxs(Badge, { variant: "outline", children: [_jsx(Lock, { className: "size-3" }), " read-only"] })) : null, _jsx(Spacer, {})] }), htmlFor: `f-${field.name}`, hint: fallback ? (_jsxs(_Fragment, { children: ["Showing the ", localeChipLabel(fallback.sourceLocale), " (fallback) value \u2014 edit to translate to ", localeChipLabel(locale), ". Clearing the ", localeChipLabel(locale), " text falls back again."] })) : (field.form?.description), error: fieldReadOnly ? undefined : errorsByField.get(field.name), children: [_jsx(FieldControl, { id: `f-${field.name}`, field: field, value: getValue(field), onChange: (v) => setValue(field, v), readOnly: fieldReadOnly }), field.name === SLUG_FIELD && routableCollection ? _jsx(PathPreview, { url: draftUrl }) : null] }, field.name));
     }
     function save() {
-        cms.saveDocument(draft);
+        source.save(draft);
     }
     // EC-224: a version restore swaps the working draft for an older snapshot; the
     // open editor adopts it so the form/canvas re-render from the restored content
@@ -326,7 +420,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
             id: 'details',
             label: 'Details',
             icon: _jsx(Tag, { className: "size-3.5" }),
-            render: () => (_jsx(DetailsPane, { collection: collection, doc: draft, siblings: cms.documentsOf(collection.id), readOnly: viewReadOnly, fields: visibleSidebarFields, renderField: renderFieldRow, onAliasChange: (alias) => setDraft((d) => {
+            render: () => (_jsx(DetailsPane, { collection: collection, doc: draft, siblings: source.documents(), readOnly: viewReadOnly, fields: visibleSidebarFields, renderField: renderFieldRow, onAliasChange: (alias) => setDraft((d) => {
                     const next = { ...d };
                     if (alias === undefined)
                         delete next.alias;
@@ -336,9 +430,13 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                 }) })),
         }
         : null;
-    const trailingPanes = detailsPane
-        ? [detailsPane, versionsPane, issuesPane]
-        : [versionsPane, issuesPane];
+    // Versions is capability-gated (AD-19): a non-versioned rail (users) never mounts
+    // the pane, so no version read fires on its records.
+    const trailingPanes = [
+        ...(detailsPane ? [detailsPane] : []),
+        ...(canVersions ? [versionsPane] : []),
+        issuesPane,
+    ];
     // EC-268: the Publish button is its own indicator — pending while the publish
     // round-trips, a brief success, and an error toast if it rejects at transport.
     const [publishState, setPublishState] = useState('idle');
@@ -367,16 +465,16 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
         if (cleaned !== draft)
             setDraft(cleaned);
         if (cleaned !== draft || dirty)
-            cms.saveDocument(cleaned);
+            source.save(cleaned);
         // Publish snapshots the draft as a version and pins it (EC-224). The live
         // row stays a continuous draft — published-ness is the version pointer
-        // (`cms.isPublished`). Pre-gated by `disabled={hasErrors}`; the optimistic
+        // (`source.publishing.isPublished`). Pre-gated by `disabled={hasErrors}`; the optimistic
         // flip reconciles against the backend (EC-225), so a logical rejection the
         // gate doesn't cover (schema divergence) self-corrects the badge. A hard
         // failure (transport) rejects the flush — surface it loudly (EC-268).
         setPublishState('pending');
         try {
-            await cms.publishDocument(ref);
+            await source.publishing?.publish(ref);
             setPublishState('success');
             setTimeout(() => setPublishState('idle'), 1800);
         }
@@ -388,26 +486,28 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     function handleConfirmedAction() {
         if (confirmAction === 'unpublish') {
             setConfirmAction(null);
-            void cms.unpublishDocument(ref);
+            void source.publishing?.unpublish(ref);
             return;
         }
         if (confirmAction === 'delete') {
             setConfirmAction(null);
-            cms.deleteDocument(ref);
+            source.remove(ref);
+            // Return to the rail's list (rail-owned `listPath`), or the project index if
+            // the rail has no list surface (AD-19 — never a hard-coded CMS route).
             void navigate({
                 to: STUDIO_PROJECT_ROUTE,
-                params: { projectId, _splat: studioPath.cmsCollection(collection.id) },
+                params: { projectId, _splat: source.listPath ?? studioPath.index() },
             });
         }
     }
     // While the published snapshot is pending, don't derive the title from the
     // draft (it must not read as the published title) — fall back to the id.
-    const title = publishedPending ? '' : primaryTitle(viewDoc, collection, locale, cms.localeConfig);
+    const title = publishedPending ? '' : primaryTitle(viewDoc, collection, locale, source.localeConfig);
     // EC-242: the untranslated-title chip applies only to a field-backed title; a
     // function title pattern has no single source field to mark as a fallback.
     const titleFallback = publishedPending || typeof collection.titleField === 'function'
         ? null
-        : displayedFieldFallback(collection, viewDoc, titleFieldOf(collection)?.name ?? 'title', locale, cms.localeConfig);
+        : displayedFieldFallback(collection, viewDoc, titleFieldOf(collection)?.name ?? 'title', locale, source.localeConfig);
     // EC-214: the document is the active record — contribute the collection (a
     // link back to its list) and the document title to the global header
     // breadcrumb, replacing the editor's own back-link + collection/id line. A
@@ -415,18 +515,21 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // title tracks the live draft so a rename updates the crumb immediately.
     const breadcrumbItems = useMemo(() => {
         const collectionLabel = collection.form?.label ?? collection.id;
-        if (singleton)
+        // A singleton (no list) or a rail with no list surface contributes a single,
+        // non-linked crumb; otherwise the collection crumb links back to its list via
+        // the rail-owned `listPath` (never a hard-coded CMS route — AD-19).
+        if (singleton || source.listPath === undefined)
             return [{ label: collectionLabel }];
-        const docTitle = primaryTitle(draft, collection, locale, cms.localeConfig) || doc.id;
+        const docTitle = primaryTitle(draft, collection, locale, source.localeConfig) || doc.id;
         return [
             {
                 label: collectionLabel,
                 to: STUDIO_PROJECT_ROUTE,
-                params: { projectId, _splat: studioPath.cmsCollection(collection.id) },
+                params: { projectId, _splat: source.listPath },
             },
             { label: docTitle },
         ];
-    }, [singleton, collection, draft, locale, cms.localeConfig, doc.id, projectId]);
+    }, [singleton, collection, draft, locale, source.localeConfig, source.listPath, doc.id, projectId]);
     useSetBreadcrumb(breadcrumbItems);
     // EC-205/EC-216: the LIVE URL derives strictly from PUBLISHED data — the
     // document's pinned published snapshot and its published ancestors — never the
@@ -434,7 +537,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // pool is exactly what the live site serves, so a published doc resolves to the
     // URL visitors actually get; `undefined` until the doc is published (and the
     // pool has loaded). The collection being routable gates the disabled hint below.
-    const publishedDocs = usePublishedDocuments(cms.projectId, collection.id);
+    const publishedDocs = usePublishedDocuments(source.projectId, collection.id);
     const routableCollection = useMemo(() => resolveDeploymentRoutes().some((route) => route.document?.collection === collection.id), [collection.id]);
     const liveUrl = useMemo(() => {
         const published = publishedDocs.byId.get(doc.id);
@@ -443,9 +546,24 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
         return urlForDocument({
             routes: resolveDeploymentRoutes(),
             frontendUrl: resolveDeploymentFrontendUrl(),
-            localeConfig: cms.localeConfig,
+            localeConfig: source.localeConfig,
         }, collection, published, { siblings: [...publishedDocs.byId.values()], locale });
-    }, [publishedDocs, collection, doc.id, locale, cms.localeConfig]);
+    }, [publishedDocs, collection, doc.id, locale, source.localeConfig]);
+    // EC-246d: the DRAFT path — derived from the current edit (slug + parent chain),
+    // not the published pool — so the slug field shows the URL forming live, before
+    // the first publish. Read-only: the slug is the single editable source, the path
+    // is always derived (never a second stored field). `undefined` until a slug
+    // resolves a route (a fresh hierarchy page with no slug has no path yet).
+    const draftUrl = useMemo(() => urlForDocument({ routes: resolveDeploymentRoutes(), localeConfig: source.localeConfig }, collection, viewDoc, { siblings: source.documents(), locale }), [collection, viewDoc, locale, source]);
+    // EC-240: hide the tab bar when there is nothing to navigate — a single content
+    // tab with no References/Compare (the users rail). When framework tabs ARE
+    // present we KEEP the content tab(s) so there is always a way back to the form;
+    // only a genuinely single-tab surface drops them. And drop the whole lens row
+    // when it would be empty (no tabs to show, no locale/perspective controls), so a
+    // bare rail (users) shows no orphaned row.
+    const hasFrameworkTabs = showReferences || compare !== null;
+    const showContentTabs = tabs.length > 1 || hasFrameworkTabs;
+    const showLensRow = showContentTabs || canLocales || canPublish;
     return (_jsx(DocumentEditorProvider, { value: {
             projectId,
             collection,
@@ -456,17 +574,37 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
             viewReadOnly,
             save,
             replaceDraft,
-        }, children: _jsxs("div", { className: cn('flex h-full min-h-0 flex-col', viewReadOnly && 'bg-info/[0.04]'), children: [_jsxs("div", { className: "shrink-0 border-b border-border px-4 py-3 sm:px-6", children: [_jsxs(Row, { gap: "3", children: [_jsxs(Row, { gap: "2", align: "center", className: "min-w-0", children: [_jsx(Heading, { level: 1, size: "h2", className: "truncate", children: singleton ? collection.form?.label ?? collection.id : title || doc.id }), singleton ? null : _jsx(FallbackChip, { fallback: titleFallback, testId: "doc-title-fallback" })] }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", className: "whitespace-nowrap", "data-testid": "autosave-status", children: cms.persistError ? 'Save failed' : dirty ? 'Saving…' : 'Saved' }), _jsx(DocStateBadge, { published: cms.isPublished(ref) }), routableCollection ? (liveUrl?.href ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", title: `Open ${liveUrl.path}`, children: _jsxs("a", { href: liveUrl.href, target: "_blank", rel: "noreferrer", "data-testid": "view-live", children: [_jsx(ExternalLink, {}), " View live"] }) })) : (_jsxs(Button, { variant: "outline", size: "sm", disabled: true, "data-testid": "view-live-disabled", title: publishedDocs.status === 'loading'
+            compare,
+            compareActive: activeTab === COMPARE_TAB,
+            startCompare,
+            setCompareBase,
+            setCompareTarget,
+            exitCompare,
+        }, children: _jsxs("div", { className: cn('flex h-full min-h-0 flex-col', viewReadOnly && 'bg-info/[0.04]'), children: [_jsxs("div", { className: "shrink-0 border-b border-border px-4 py-3 sm:px-6", children: [_jsxs(Row, { gap: "3", children: [_jsxs(Row, { gap: "2", align: "center", className: "min-w-0", children: [_jsx(Heading, { level: 1, size: "h2", className: "truncate", children: singleton ? collection.form?.label ?? collection.id : title || doc.id }), singleton ? null : _jsx(FallbackChip, { fallback: titleFallback, testId: "doc-title-fallback" })] }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", className: "whitespace-nowrap", "data-testid": "autosave-status", children: source.lastError
+                                        ? 'Save failed'
+                                        : explicitSave
+                                            ? dirty
+                                                ? 'Unsaved changes'
+                                                : 'Saved'
+                                            : dirty
+                                                ? 'Saving…'
+                                                : 'Saved' }), canPublish ? _jsx(DocStateBadge, { published: published }) : null, routableCollection ? (liveUrl?.href ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", title: `Open ${liveUrl.path}`, children: _jsxs("a", { href: liveUrl.href, target: "_blank", rel: "noreferrer", "data-testid": "view-live", children: [_jsx(ExternalLink, {}), " View live"] }) })) : (_jsxs(Button, { variant: "outline", size: "sm", disabled: true, "data-testid": "view-live-disabled", title: publishedDocs.status === 'loading'
                                         ? 'Loading the live URL…'
-                                        : !cms.isPublished(ref)
+                                        : !published
                                             ? 'Publish to view the live page'
-                                            : 'Set frontendUrl in elytra.config.ts to enable', children: [_jsx(ExternalLink, {}), " View live"] }))) : null, _jsx(Button, { size: "sm", onClick: handlePublish, disabled: hasErrors || viewReadOnly || publishState === 'pending', title: viewReadOnly
+                                            : 'Set frontendUrl in elytra.config.ts to enable', children: [_jsx(ExternalLink, {}), " View live"] }))) : null, canPublish ? (_jsx(Button, { size: "sm", onClick: handlePublish, disabled: hasErrors || viewReadOnly || publishState === 'pending', title: viewReadOnly
                                         ? 'Switch to Draft to publish'
                                         : hasErrors
                                             ? `Fix ${errorCount} ${errorCount === 1 ? 'issue' : 'issues'} to publish`
-                                            : undefined, children: publishState === 'pending' ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "animate-spin" }), " Publishing\u2026"] })) : publishState === 'success' ? (_jsxs(_Fragment, { children: [_jsx(CircleCheck, {}), " Published"] })) : (_jsxs(_Fragment, { children: [_jsx(Eye, {}), " Publish"] })) }), cms.isPublished(ref) || !singleton ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "More actions", children: _jsx(MoreHorizontal, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [cms.isPublished(ref) ? (_jsxs(DropdownMenuItem, { onClick: () => setConfirmAction('unpublish'), children: [_jsx(EyeOff, {}), " Unpublish"] })) : null, singleton ? null : (_jsxs(DropdownMenuItem, { "data-testid": "doc-delete", className: "text-destructive", onClick: () => setConfirmAction('delete'), children: [_jsx(Trash2, {}), " Delete"] }))] })] })) : null] }), _jsxs(Row, { gap: "3", className: "mt-3", wrap: true, children: [_jsx(LocaleSwitcher, {}), _jsx(Row, { gap: "1", children: editorTabs.map((tab) => (_jsx("button", { type: "button", "aria-pressed": tab === activeTab, onClick: () => setActiveTab(tab), className: cn('rounded-md px-2.5 py-1 text-xs font-medium capitalize transition-colors', tab === activeTab ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'), children: tab }, tab))) }), _jsx(Spacer, {}), _jsxs(Row, { gap: "px", className: "rounded-md bg-muted/60 p-0.5", children: [_jsx(PerspectiveButton, { label: "Draft", active: perspective === 'draft', onClick: () => setPerspective('draft') }), _jsx(PerspectiveButton, { label: "Published", active: perspective === 'published', accent: "info", disabled: !published, title: published ? undefined : 'Publish this document to view its published version', onClick: () => setPerspective('published') })] })] })] }), viewReadOnly ? (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-info/30 bg-info/10 px-4 py-1.5 text-info sm:px-6", "data-testid": "published-view-banner", children: [_jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsx(Text, { size: "xs", className: "text-info", children: "Viewing the published version \u2014 read-only." }), _jsx(Spacer, {}), _jsx("button", { type: "button", onClick: () => setPerspective('draft'), className: "text-xs font-medium underline-offset-2 hover:underline", children: "Switch to Draft" })] })) : null, publishedPending ? (_jsx("div", { className: "grid min-h-0 flex-1 place-items-center p-8", children: _jsx(Text, { size: "sm", tone: "muted", children: publishedSnapshot.status === 'loading'
+                                            : undefined, children: publishState === 'pending' ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "animate-spin" }), " Publishing\u2026"] })) : publishState === 'success' ? (_jsxs(_Fragment, { children: [_jsx(CircleCheck, {}), " Published"] })) : (_jsxs(_Fragment, { children: [_jsx(Eye, {}), " Publish"] })) })) : null, explicitSave ? (_jsxs(Button, { size: "sm", onClick: save, disabled: !dirty, "data-testid": "doc-save", children: [_jsx(Check, {}), " Save"] })) : null, published || !singleton ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "More actions", children: _jsx(MoreHorizontal, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [published ? (_jsxs(DropdownMenuItem, { onClick: () => setConfirmAction('unpublish'), children: [_jsx(EyeOff, {}), " Unpublish"] })) : null, singleton ? null : (_jsxs(DropdownMenuItem, { "data-testid": "doc-delete", className: "text-destructive", onClick: () => setConfirmAction('delete'), children: [_jsx(Trash2, {}), " Delete"] }))] })] })) : null] }), showLensRow ? (_jsxs(Row, { gap: "3", className: "mt-3", wrap: true, children: [_jsxs(Row, { gap: "1", align: "center", children: [showContentTabs ? tabs.map((tab) => renderContentTab(tab)) : null, showReferences ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true }), renderContentTab(REFERENCES_TAB)] })) : null, compare ? (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors', activeTab === COMPARE_TAB
+                                                ? 'bg-accent text-accent-foreground'
+                                                : 'text-muted-foreground hover:bg-muted'), children: [_jsxs("button", { type: "button", onClick: () => setActiveTab(COMPARE_TAB), "aria-pressed": activeTab === COMPARE_TAB, className: "inline-flex items-center gap-1", children: [_jsx(GitCompareArrows, { className: "size-3", "aria-hidden": true }), " Compare"] }), _jsx("button", { type: "button", onClick: exitCompare, "aria-label": "Close compare", className: "ml-0.5 rounded p-0.5 hover:bg-background/40", children: _jsx(X, { className: "size-3" }) })] })) : null] }), _jsx(Spacer, {}), canLocales ? _jsx(LocaleSwitcher, {}) : null, canPublish ? (_jsxs(Row, { gap: "px", className: "rounded-md bg-muted/60 p-0.5", children: [_jsx(PerspectiveButton, { label: "Draft", active: perspective === 'draft', onClick: () => setPerspective('draft') }), _jsx(PerspectiveButton, { label: "Published", active: perspective === 'published', accent: "info", disabled: !published, title: published ? undefined : 'Publish this document to view its published version', onClick: () => setPerspective('published') })] })) : null] })) : null] }), viewReadOnly ? (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-info/30 bg-info/10 px-4 py-1.5 text-info sm:px-6", "data-testid": "published-view-banner", children: [_jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsx(Text, { size: "xs", className: "text-info", children: "Viewing the published version \u2014 read-only." }), _jsx(Spacer, {}), _jsx("button", { type: "button", onClick: () => setPerspective('draft'), className: "text-xs font-medium underline-offset-2 hover:underline", children: "Switch to Draft" })] })) : null, publishedPending ? (_jsx("div", { className: "grid min-h-0 flex-1 place-items-center p-8", children: _jsx(Text, { size: "sm", tone: "muted", children: publishedSnapshot.status === 'loading'
                             ? 'Loading the published version…'
-                            : 'No published version found for this document.' }) })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), onChange: (v) => setValue(canvasField, v), readOnly: viewReadOnly || cms.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${restoreNonce}:${perspective}`) })) : activeTab === REFERENCES_TAB ? (
+                            : 'No published version found for this document.' }) })) : activeTab === COMPARE_TAB && compare ? (
+                // EC-298: the version compare view takes over the main area, with the
+                // shared inspector (Versions pane) staying on as the navigator — an
+                // in-app surface, not a modal, so arbitrary versions can be browsed.
+                _jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(VersionCompare, {}) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), onChange: (v) => setValue(canvasField, v), readOnly: viewReadOnly || source.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${restoreNonce}:${perspective}`) })) : activeTab === REFERENCES_TAB ? (
                 // EC-269: mounted only while this tab is active → reference data loads on
                 // demand and is torn down on leave (no fetching during normal editing).
                 _jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, source: { type: 'document', id: documentKey(ref) }, target: { type: 'document', id: documentKey(ref) } }) }) }) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(Stack, { gap: "6", children: groups.map((group) => {
@@ -474,14 +612,18 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                                         // entirely (its fields are also exempt from validation).
                                         if (hiddenGroups.has(group.name))
                                             return null;
-                                        // EC-273: drop a fieldset whose every field is conditionally hidden,
-                                        // so the form never shows an empty section header.
-                                        const visible = group.fields.filter((f) => !isHidden(f));
+                                        // EC-273/EC-240: drop a fieldset whose every field is hidden — whether
+                                        // content-conditionally or for this principal — so the form never
+                                        // shows an empty section header.
+                                        const visible = group.fields.filter(isFieldShown);
                                         if (visible.length === 0)
                                             return null;
                                         const section = group.section;
                                         return (_jsx(CollapsibleSection, { collapsible: section?.collapsible, defaultOpen: section?.defaultOpen, title: _jsx(Text, { size: "sm", weight: "semibold", className: section?.title ? undefined : 'capitalize', children: section?.title ?? group.name }), children: _jsx("div", { className: "grid grid-cols-1 gap-4 p-4 md:grid-cols-12", children: visible.map((field) => (_jsx("div", { className: cn('col-span-1', fieldWidthColSpan(field.form?.width)), children: renderFieldRow(field) }, field.name))) }) }, group.name));
-                                    }) }) }) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })), confirmAction !== null ? (_jsx(ReferenceConfirmDialog, { projectId: projectId, action: confirmAction, targets: confirmTargets, open: true, onOpenChange: (open) => {
+                                    }) }) }) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })), explicitSave ? (_jsx(UnsavedChangesGuard, { when: dirty, onSave: () => {
+                        save();
+                        return true;
+                    }, description: "You have unsaved changes to this record. Save them before leaving, or discard them." })) : null, confirmAction !== null ? (_jsx(ReferenceConfirmDialog, { projectId: projectId, action: confirmAction, targets: confirmTargets, open: true, onOpenChange: (open) => {
                         if (!open)
                             setConfirmAction(null);
                     }, onConfirm: handleConfirmedAction })) : null, _jsx(Dialog, { open: publishConfirm, onOpenChange: (open) => { if (!open)
@@ -498,8 +640,8 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
  * confirm-through (not blocked), so these feed the Issues panel + the publish
  * confirmation, never the button's disabled gate. No reuse capability → none.
  */
-function unpublishedEmbedIssues(collection, draft, cms) {
-    const capability = resolveReuseCapability(getStudioRegistry().registry.list(), cms.collections);
+function unpublishedEmbedIssues(collection, draft, source) {
+    const capability = resolveReuseCapability(getStudioRegistry().registry.list(), source.collections);
     if (!capability)
         return [];
     const issues = [];
@@ -512,21 +654,21 @@ function unpublishedEmbedIssues(collection, draft, cms) {
             if (seen.has(key))
                 continue;
             seen.add(key);
-            const exists = cms.getDocument(ref) !== undefined;
-            if (exists && cms.isPublished(ref))
+            const exists = source.get(ref) !== undefined;
+            if (exists && (source.publishing?.isPublished(ref) ?? false))
                 continue;
-            issues.push(unpublishedEmbedIssue(collection, draft, field.name, ref, exists, cms));
+            issues.push(unpublishedEmbedIssue(collection, draft, field.name, ref, exists, source));
         }
     }
     return issues;
 }
 /** One unpublished/missing reuse-embed issue (EC-300). */
-function unpublishedEmbedIssue(collection, draft, field, ref, exists, cms) {
+function unpublishedEmbedIssue(collection, draft, field, ref, exists, source) {
     return {
         code: exists ? 'unpublished-relation-target' : 'unknown-relation-target',
         severity: 'error',
         message: exists
-            ? `Embeds the reusable “${cms.titleOf(ref)}”, which isn’t published — it will be empty on the live site until you publish it.`
+            ? `Embeds the reusable “${source.titleOf(ref)}”, which isn’t published — it will be empty on the live site until you publish it.`
             : `Embeds a reusable that no longer exists (“${ref.id}”) — fix or remove the embed.`,
         path: [field],
         collectionId: collection.id,
@@ -546,6 +688,16 @@ function PerspectiveButton({ label, active, accent, disabled, title, onClick, })
                 : 'bg-background text-foreground shadow-sm'
             : 'text-muted-foreground hover:text-foreground'), children: label }));
 }
+/**
+ * EC-246d: the slug's derived route path, shown read-only directly under the slug
+ * input. The slug is the single editable source; the path is composed by the route
+ * resolver (`urlForDocument`) from slug + parent chain and never stored. Draft-aware,
+ * so it updates as the editor types. Until a slug resolves a route (a fresh
+ * hierarchy page), a hint explains where the URL comes from.
+ */
+function PathPreview({ url }) {
+    return (_jsxs(Row, { gap: "1", className: "text-xs text-muted-foreground", "data-testid": "slug-path-preview", children: [_jsx(Link2, { className: "size-3 shrink-0", "aria-hidden": true }), url ? (_jsxs(Text, { as: "span", size: "xs", tone: "muted", className: "min-w-0 truncate", title: url.path, children: ["Served at ", _jsx("span", { className: "font-medium text-foreground/80", children: url.path })] })) : (_jsx(Text, { as: "span", size: "xs", tone: "muted", children: "The URL is derived from the slug (and parent) \u2014 set a slug to define it." }))] }));
+}
 function groupFields(fields, collection) {
     const order = groupOrder(collection.form);
     const byGroup = new Map();