canopycms 0.1.0 → 0.2.0-int.119

package/dist/editor/FormRenderer.js

@@ -35,6 +35,7 @@ import { FormExpansionContext } from './fields/form-expansion.js';
 import { FormHeader } from './FormHeader.js';
 import { buildFormOutline, hasCollapsibleList } from './form-outline.js';
 import { findFieldTarget, focusFieldTarget } from './field-target.js';
+import { canRestoreRemoval, movedThreadsNote, openThreadsWithin, removalAnchors, restoreRemoval, } from './undo-removal.js';
 import { schemaLabel } from './schema-label.js';
 /**
  * How an Undo toast names a removed object-list item: by its title field or first non-empty
@@ -94,7 +95,7 @@ const FieldBoundary = ({ canopyPath, resetKey, update, build, fallback }) => {
             setGeneration(liveGeneration.current);
         }, fallback: fallback, children: _jsx(FieldControl, { build: () => build(guardedUpdate) }) }));
 };
-export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, conflictNotice = false, fieldErrors, format, readOnly = false, onRemoved, onGetUserMetadata, header, notice, commentBlockedReason, removedItemFieldLabel, }) => {
+export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, conflictNotice = false, fieldErrors, format, readOnly = false, onRemoved, savedValue, onGetUserMetadata, header, notice, commentBlockedReason, removedItemFieldLabel, }) => {
     const emit = readOnly ? noop : onChange;
     const formRef = useRef(null);
     const customTypes = new Set(Object.keys(customRenderers ?? {}));
@@ -109,6 +110,50 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
         return Object.keys(fieldErrors ?? {}).some((key) => key === row || key.startsWith(`${row}.`) || key.startsWith(`${row}[`));
     };
     const [formComments] = useState(createFormComments);
+    // An object's Undo clear lasts while it can put the object back where it was (checked by
+    // `canRestoreRemoval`), and ends with the entry, the branch, a save or a discard. It has no
+    // timer: it stays in the form for as long as the object is left unedited.
+    const [cleared, setCleared] = useState({
+        scope: boundaryResetKey,
+        savedValue,
+        byPath: {},
+    });
+    const clearScope = !readOnly && value !== savedValue ? boundaryResetKey : undefined;
+    const clearsLive = cleared.scope === clearScope && cleared.savedValue === savedValue;
+    const offeredClears = Object.fromEntries(Object.entries(clearsLive ? cleared.byPath : {}).filter(([, clear]) => canRestoreRemoval(fields, value, clear.removal)));
+    if (Object.keys(offeredClears).length !== Object.keys(cleared.byPath).length) {
+        setCleared({ scope: boundaryResetKey, savedValue, byPath: offeredClears });
+    }
+    const clearObject = (path, previous, label, update) => {
+        const removal = { kind: 'value', path, value: previous, label: `"${label}"` };
+        // Taken from the value this render shows, which the clear has not reached yet.
+        const anchors = removalAnchors(fields, value, removal);
+        // Open threads keyed to items inside it leave their fields for the entry's thread list.
+        const moved = currentEntryPath ? openThreadsWithin(comments, currentEntryPath, path) : 0;
+        update(undefined);
+        setCleared((prev) => ({
+            scope: boundaryResetKey,
+            savedValue,
+            byPath: {
+                ...(prev.scope === boundaryResetKey && prev.savedValue === savedValue ? prev.byPath : {}),
+                [normalizeCanopyPath(path)]: {
+                    removal: { ...removal, anchors },
+                    note: movedThreadsNote(moved),
+                },
+            },
+        }));
+    };
+    // Puts the object back into the value as it is now, so edits made elsewhere since are kept.
+    const undoClear = (canopyPath) => {
+        const clear = offeredClears[canopyPath];
+        const restored = clear ? restoreRemoval(fields, value, clear.removal) : undefined;
+        setCleared((prev) => {
+            const { [canopyPath]: _undone, ...rest } = prev.byPath;
+            return { ...prev, byPath: rest };
+        });
+        if (restored)
+            emit(restored);
+    };
     // The field last focused on one entry is never offered on the next.
     useEffect(() => formComments.noteFocus(undefined), [formComments, boundaryResetKey]);
     // Wraps the rendered control in an error boundary, and with an inline validation message
@@ -237,23 +282,13 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         }) }, fieldKey(path)));
                 }
                 // A non-list object has no list item to remove, so its only way back to `undefined` is
-                // the Clear button (`onRemove`): shown only for an optional field that has a value.
-                // Reset to `undefined`, never `{}`, which `isEmptyForRequired` (entry-validator.ts) reads
-                // as present. The label is "Clear" (docs/ux-guidelines.md, Vocabulary), and it offers Undo.
+                // Clear (`onClear`): offered only for an optional field that has a value. Reset to
+                // `undefined`, never `{}`, which `isEmptyForRequired` (entry-validator.ts) reads as
+                // present. The label is "Clear" (docs/ux-guidelines.md, Vocabulary), and it offers Undo.
                 const hasValue = currentValue !== undefined && currentValue !== null;
                 const canClear = !readOnly && objectField.required !== true && hasValue;
-                return wrapWithComments(_jsx(ObjectField, { label: label, required: objectField.required, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear
-                        ? () => {
-                            update(undefined);
-                            onRemoved?.({
-                                kind: 'value',
-                                path,
-                                value: currentValue,
-                                label: `"${label}"`,
-                                action: 'clear',
-                            });
-                        }
-                        : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                const clear = offeredClears[canopyPath];
+                return wrapWithComments(_jsx(ObjectField, { label: label, required: objectField.required, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onClear: canClear ? () => clearObject(path, currentValue, label, update) : undefined, onUndoClear: clear ? () => undoClear(canopyPath) : undefined, clearNote: clear?.note, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             }
             case 'code':
                 return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));

package/dist/editor/PreviewFrame.d.ts

@@ -4,13 +4,18 @@ export interface PreviewMarks {
     count: number;
     paths?: string[];
 }
+/**
+ * What a page's handshake says of the site's header and footer: its ready message says it renders
+ * them for `chrome=1` or that it does not, or no ready message came in `READY_TIMEOUT_MS`.
+ */
+export type SiteChromeSupport = 'supported' | 'unsupported' | 'unanswered';
 /**
  * Lightweight iframe wrapper to keep the preview in sync with form state.
  * It posts the latest draft data to the iframe after load and when data changes. A progress bar
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
- * to reload the preview.
+ * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }: {
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, busy, }: {
     src: string;
     path: string;
     data?: unknown;
@@ -37,4 +42,8 @@ export declare const PreviewFrame: ({ src, path, data, isLoading, className, sty
     iframeStyle?: CSSProperties;
     /** Replaces the chip's Retry, for a host whose own reload control remounts the frame. */
     onReload?: () => void;
+    /** Called with what the page's handshake says of the site's header and footer. */
+    onSiteChrome?: (support: SiteChromeSupport) => void;
+    /** The editor is loading the next page's data: this page stays in view, dimmed and inert. */
+    busy?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
 /**
  * How long after the iframe's `load` the preview has to send its ready message before the frame
@@ -34,9 +34,9 @@ const sendDraftUpdate = (iframe, message, targetOrigin) => {
  * Lightweight iframe wrapper to keep the preview in sync with form state.
  * It posts the latest draft data to the iframe after load and when data changes. A progress bar
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
- * to reload the preview.
+ * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }) => {
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, busy = false, }) => {
     const iframeRef = useRef(null);
     // Pin the preview origin from the src prop: outbound messages target it (never '*'),
     // and inbound messages must come from it. An iframe that navigates cross-origin
@@ -71,6 +71,10 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const hasDraft = data !== undefined;
     const syncPending = hasDraft && handshake === 'waiting';
     const liveUpdatesOff = hasDraft && handshake === 'missing';
+    // React 18 has no `inert` prop, so it is set on the DOM.
+    useLayoutEffect(() => {
+        iframeRef.current?.toggleAttribute('inert', busy);
+    }, [busy, retries, src]);
     // Inject the progress bar keyframe animation once per page.
     useEffect(() => {
         const styleId = 'canopycms-preview-sync-style';
@@ -109,12 +113,18 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const postHighlightRef = useRef(postHighlight);
     const onPreviewErrorRef = useRef(onPreviewError);
     const onMarksRef = useRef(onMarks);
+    const onSiteChromeRef = useRef(onSiteChrome);
     useEffect(() => {
         postRef.current = post;
         postHighlightRef.current = postHighlight;
         onPreviewErrorRef.current = onPreviewError;
         onMarksRef.current = onMarks;
+        onSiteChromeRef.current = onSiteChrome;
     });
+    useEffect(() => {
+        if (handshake === 'missing')
+            onSiteChromeRef.current?.('unanswered');
+    }, [handshake]);
     useEffect(() => {
         post();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
@@ -138,6 +148,9 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                 postRef.current();
                 postHighlightRef.current();
                 setHandshake('ready');
+                onSiteChromeRef.current?.(event.data.siteChrome === true
+                    ? 'supported'
+                    : 'unsupported');
             }
             else if (type === CANOPY_PREVIEW_ERROR) {
                 const msg = event.data;
@@ -160,7 +173,7 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, [previewOrigin]);
-    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', ...style }, children: [syncPending && (_jsx("div", { role: "progressbar", "aria-label": "Connecting to the preview", style: {
+    return (_jsxs("div", { className: className, "aria-busy": busy || undefined, style: { position: 'relative', overflow: 'hidden', ...style }, children: [(syncPending || busy) && (_jsx("div", { role: "progressbar", "aria-label": busy ? 'Loading the entry' : 'Connecting to the preview', style: {
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -207,6 +220,9 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     height: '100%',
                     border: 'none',
                     ...iframeStyle,
+                    // Eased, so a page that arrives at once barely dims.
+                    transition: 'opacity 150ms',
+                    ...(busy ? { opacity: 0.5 } : {}),
                 }, onLoad: () => {
                     post();
                     postHighlight();

package/dist/editor/PreviewPane.d.ts

@@ -5,9 +5,16 @@ import type { InexactMark } from './preview-marks.js';
 import type { PaneArrangement } from './shell/PaneLayout.js';
 import { type PreviewMount } from './preview-path.js';
 export interface PreviewPaneProps {
+    /** The open entry's page. */
     src: string;
     /** The page's path for the bridge and the toolbar; defaults to `src`. */
     path?: string;
+    /**
+     * The open entry's data is still loading, so `data` is not its draft yet. The page framed last
+     * stays in view, dimmed, until it arrives; with none framed yet, the viewport holds a skeleton.
+     * The toolbar already names the open entry.
+     */
+    pending?: boolean;
     /** Where the preview routes are mounted; the toolbar's path leaves out the `previewPrefix`. */
     mount?: PreviewMount;
     data?: unknown;
@@ -38,10 +45,17 @@ export interface PreviewPaneProps {
     onMaximizedChange?: (maximized: boolean) => void;
     /** A drag of the preview/form divider is under way: the preview shows its size over itself. */
     resizing?: boolean;
+    /** The site's header and footer are asked for, by `chrome=1` on a `previewPrefix` page. */
+    siteChrome?: boolean;
+    /**
+     * With it, the toolbar offers the site header and footer toggle once the page says it can show
+     * them, and whenever `siteChrome` is on, so it can always be turned off.
+     */
+    onSiteChromeChange?: (siteChrome: boolean) => void;
 }
 /**
  * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
  * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
  * down to fit a narrower pane.
  */
-export declare const PreviewPane: ({ src, path, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreviewPane: ({ src, path, pending, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, siteChrome, onSiteChromeChange, data, isLoading, onMarks, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewPane.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { ActionIcon, Box, Group, Select, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { ActionIcon, Box, Group, Select, Skeleton, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
 import { useClipboard, useElementSize, useWindowEvent } from '@mantine/hooks';
 import { IconCheck, IconExternalLink, IconRefresh } from '@tabler/icons-react';
 import { PreviewFrame } from './PreviewFrame.js';
-import { HighlightToggle, MaximizeToggle, UnmappedMarksChip } from './PreviewToolbarTools.js';
-import { displayPreviewPath } from './preview-path.js';
+import { HighlightToggle, MaximizeToggle, SiteChromeToggle, UnmappedMarksChip, } from './PreviewToolbarTools.js';
+import { PANE_HEADER_HEIGHT } from './pane-header.js';
+import { displayPreviewPath, siteChromeSrc } from './preview-path.js';
 import { computePreviewViewport, formatPreviewWidthReadout, PREVIEW_DEVICE_WIDTHS, } from './preview-scale.js';
 const WIDTH_OPTIONS = [
     { value: 'fit', label: 'Fit', detail: 'Pane width' },
@@ -27,7 +28,7 @@ const OPEN_SAVED_LABEL = 'Open saved version in a new tab';
  * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
  * down to fit a narrower pane.
  */
-export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, ...frameProps }) => {
+export const PreviewPane = ({ src, path = src, pending = false, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, siteChrome = false, onSiteChromeChange, data, isLoading, onMarks, ...frameProps }) => {
     const { ref: viewportRef, width, height } = useElementSize();
     const rootRef = useRef(null);
     const maximizeRef = useRef(null);
@@ -74,13 +75,51 @@ export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWid
         }
         hadNotice.current = Boolean(notice);
     }, [notice]);
+    // Pages asked for the header and footer stopped connecting, such as when the site's layout
+    // throws: for the rest of the session pages are framed without them, so drafts still show.
+    // `trying` until a page without them connects, which confirms the header and footer were the
+    // cause; a site that never connects at all is not blamed on them. The toggle and Reload retry.
+    const [chromeFallback, setChromeFallback] = useState('off');
     // Reloading remounts the frame for a fresh handshake. It drops a reported error too: a page
     // that reports draft errors reports it again once the reloaded page renders the draft.
     const [reloads, setReloads] = useState(0);
     const reload = () => {
         setReloads((count) => count + 1);
+        setChromeFallback('off');
         frameProps.onPreviewError?.(null);
     };
+    // Whether the page framed last said it renders the site's header and footer. Kept across
+    // pages, so the toggle stays put while the next page connects.
+    const [chromeSupported, setChromeSupported] = useState(false);
+    const chromeSrc = siteChromeSrc(src, mount);
+    // Also what "Open saved version" opens, so it shows what the frame shows.
+    const liveSrc = siteChrome && chromeSrc && chromeFallback === 'off' ? chromeSrc : src;
+    // The frame changes page only once the open entry's data is in, so one render hands the new
+    // page its own draft: no draft is ever posted to the page of another entry. A reload or the
+    // toggle waits for that page too, since the held page has no draft to render.
+    const live = { page: src, src: liveSrc, path, key: reloads };
+    const [framed, setFramed] = useState(pending ? null : live);
+    if (!pending &&
+        (framed?.src !== live.src ||
+            framed.page !== src ||
+            framed.path !== path ||
+            framed.key !== reloads)) {
+        setFramed(live);
+    }
+    const frame = pending ? framed : live;
+    const onSiteChrome = (support) => {
+        setChromeSupported(support === 'supported');
+        if (!frame)
+            return;
+        const withChrome = frame.src !== frame.page;
+        if (support === 'unanswered' && withChrome)
+            setChromeFallback('trying');
+        if (support !== 'unanswered' && !withChrome) {
+            setChromeFallback((current) => (current === 'trying' ? 'confirmed' : current));
+        }
+    };
+    // Shown while on even without support, so a page that never connects can still turn it off.
+    const showChromeToggle = Boolean(onSiteChromeChange && chromeSrc && (chromeSupported || siteChrome));
     const shownPath = displayPreviewPath(path, mount);
     const viewport = computePreviewViewport(previewWidth, width, height);
     const iframeStyle = previewWidth === 'fit'
@@ -109,8 +148,9 @@ export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWid
             height: '100%',
             border: '1px solid var(--mantine-color-default-border)',
         }, children: [_jsxs(Group, { role: "group", "aria-label": "Preview toolbar", "data-testid": "preview-toolbar", gap: 6, px: 6, style: {
-                    // Wraps to a second row, rather than clipping, in a pane too narrow for one.
-                    minHeight: 32,
+                    // Wraps to a second row, rather than clipping, in a pane too narrow for one. The pane's
+                    // own top border makes up the last pixel, so this bar ends level with the form header.
+                    minHeight: PANE_HEADER_HEIGHT - 1,
                     rowGap: 2,
                     paddingBlock: 2,
                     flex: '0 0 auto',
@@ -119,7 +159,14 @@ export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWid
                 }, children: [_jsx(Tooltip, { label: copyStatus || copyLabel, multiline: true, maw: 360, style: { overflowWrap: 'anywhere' }, children: _jsx(UnstyledButton, { onClick: () => clipboard.copy(shownPath), "aria-label": copyLabel, style: { flex: '1 1 80px', minWidth: 0, borderRadius: 4, padding: '2px 4px' }, children: _jsx(Text, { component: "span", size: "xs", ff: "monospace", truncate: "end", display: "block", children: shownPath }) }) }), _jsx(VisuallyHidden, { role: "status", children: copyStatus }), _jsx(Select, { "aria-label": "Preview width", data: WIDTH_OPTIONS, value: previewWidth, onChange: (value) => {
                             if (isPreviewWidth(value))
                                 onPreviewWidthChange(value);
-                        }, allowDeselect: false, size: "xs", w: 96, style: { flexShrink: 0 }, styles: { input: { height: 24, minHeight: 24 } }, comboboxProps: { width: 170, position: 'bottom-end' }, renderOption: ({ option, checked }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", w: "100%", children: [_jsx(IconCheck, { "aria-hidden": true, size: 14, style: { visibility: checked ? 'visible' : 'hidden' } }), _jsx("span", { style: { flex: 1 }, children: option.label }), _jsx(Text, { component: "span", size: "xs", children: WIDTH_OPTIONS.find((o) => o.value === option.value)?.detail })] })) }), width > 0 && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "preview-width-readout", style: { flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, children: formatPreviewWidthReadout(viewport) })), (onHighlightToggle || (showMarkDiagnostics && inexactMarks.length > 0)) && (_jsxs(Group, { gap: 6, wrap: "nowrap", children: [onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: src, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [_jsx(PreviewFrame, { src: src, path: path, ...frameProps, onReload: () => {
+                        }, allowDeselect: false, size: "xs", w: 96, style: { flexShrink: 0 }, styles: { input: { height: 24, minHeight: 24 } }, comboboxProps: { width: 170, position: 'bottom-end' }, renderOption: ({ option, checked }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", w: "100%", children: [_jsx(IconCheck, { "aria-hidden": true, size: 14, style: { visibility: checked ? 'visible' : 'hidden' } }), _jsx("span", { style: { flex: 1 }, children: option.label }), _jsx(Text, { component: "span", size: "xs", children: WIDTH_OPTIONS.find((o) => o.value === option.value)?.detail })] })) }), width > 0 && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "preview-width-readout", style: { flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, children: formatPreviewWidthReadout(viewport) })), (onHighlightToggle ||
+                        showChromeToggle ||
+                        (showMarkDiagnostics && inexactMarks.length > 0)) && (_jsxs(Group, { gap: 6, wrap: "nowrap", children: [showChromeToggle && onSiteChromeChange && (_jsx(SiteChromeToggle, { enabled: siteChrome, failed: chromeFallback === 'confirmed', onToggle: () => {
+                                    setChromeFallback('off');
+                                    onSiteChromeChange(!siteChrome);
+                                } })), onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: liveSrc, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [frame ? (_jsx(PreviewFrame, { src: frame.src, path: frame.path, ...frameProps, 
+                        // A held page gets no draft and its reports go nowhere: it belongs to another entry.
+                        data: pending ? undefined : data, isLoading: pending ? undefined : isLoading, onMarks: pending ? undefined : onMarks, onPreviewError: pending ? undefined : frameProps.onPreviewError, busy: pending, onSiteChrome: onSiteChrome, onReload: () => {
                             // Retry goes with the frame it sits in; the toolbar's reload offers the same action.
                             reload();
                             reloadButtonRef.current?.focus();
@@ -127,7 +174,7 @@ export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWid
                             position: 'absolute',
                             inset: 0,
                             background: previewWidth === 'fit' ? undefined : 'var(--canopy-surface-muted)',
-                        } }, reloads), resizing && width > 0 && (_jsx(Box, { "aria-hidden": true, "data-testid": "preview-resize-readout", style: {
+                        } }, frame.key)) : (_jsx(Box, { "aria-busy": "true", pos: "absolute", inset: 0, "data-testid": "preview-loading-skeleton", children: _jsx(Skeleton, { h: "100%", radius: 0 }) })), resizing && width > 0 && (_jsx(Box, { "aria-hidden": true, "data-testid": "preview-resize-readout", style: {
                             position: 'absolute',
                             top: '50%',
                             left: '50%',

package/dist/editor/PreviewToolbarTools.d.ts

@@ -8,6 +8,14 @@ export interface HighlightToggleProps {
 }
 /** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
 export declare function HighlightToggle({ enabled, onToggle, marksNothing }: HighlightToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface SiteChromeToggleProps {
+    enabled: boolean;
+    onToggle: () => void;
+    /** On, but pages with the header and footer don't connect while pages without them do. */
+    failed?: boolean;
+}
+/** Shows and hides the site's header and footer; says so when the site couldn't show them. */
+export declare function SiteChromeToggle({ enabled, onToggle, failed }: SiteChromeToggleProps): import("react/jsx-runtime").JSX.Element;
 /** The admin's count of preview marks that name no field of the entry; see `findInexactMarks`. */
 export declare function UnmappedMarksChip({ marks }: {
     marks: readonly InexactMark[];

package/dist/editor/PreviewToolbarTools.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
 import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
-import { IconArrowsMaximize, IconArrowsMinimize, IconMarquee } from '@tabler/icons-react';
+import { IconArrowsMaximize, IconArrowsMinimize, IconLayoutNavbar, IconMarquee, } from '@tabler/icons-react';
 const HIGHLIGHT_LABEL = 'Highlight fields in the preview';
 const NOTHING_MARKED_NOTE = "This page marks no editable elements, so nothing can be highlighted or clicked to focus. The site's developer can mark them with fieldProps.";
 /** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
@@ -11,6 +11,14 @@ export function HighlightToggle({ enabled, onToggle, marksNothing = false }) {
     const showNote = enabled && marksNothing;
     return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: HIGHLIGHT_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": HIGHLIGHT_LABEL, "aria-describedby": showNote ? noteId : undefined, "data-testid": "toggle-highlights-button", onClick: onToggle, children: _jsx(IconMarquee, { size: 16 }) }) }), showNote && (_jsx(Tooltip, { label: NOTHING_MARKED_NOTE, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'nowrap' }, children: ["Nothing to highlight", _jsx(VisuallyHidden, { id: noteId, children: NOTHING_MARKED_NOTE })] }) }))] }));
 }
+const SITE_CHROME_LABEL = 'Show site header and footer';
+const SITE_CHROME_FAILED_NOTE = "The site couldn't show its header and footer, so the preview shows pages without them. Turn this off and on, or reload the preview, to try again.";
+/** Shows and hides the site's header and footer; says so when the site couldn't show them. */
+export function SiteChromeToggle({ enabled, onToggle, failed = false }) {
+    const noteId = useId();
+    const showNote = enabled && failed;
+    return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: SITE_CHROME_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": SITE_CHROME_LABEL, "aria-describedby": showNote ? noteId : undefined, "data-testid": "toggle-site-chrome-button", onClick: onToggle, children: _jsx(IconLayoutNavbar, { size: 16 }) }) }), showNote && (_jsx(Tooltip, { label: SITE_CHROME_FAILED_NOTE, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'nowrap' }, children: ["Header and footer unavailable", _jsx(VisuallyHidden, { id: noteId, children: SITE_CHROME_FAILED_NOTE })] }) }))] }));
+}
 const LISTED = 3;
 // Module-level, so React never re-calls it on a re-render and pulls focus back while closing.
 const focusOnMount = (node) => node?.focus();

package/dist/editor/branch-status.d.ts

@@ -15,3 +15,9 @@ export declare const BRANCH_STATUS_PRESENTATION: Record<BranchStatus, BranchStat
  * Returns undefined when there is nothing to show.
  */
 export declare function branchStatusPresentation(status: string | undefined, isProtected?: boolean): BranchStatusPresentation | undefined;
+/**
+ * The status the top bar shows: only one that tells the user something, so not 'editing', the
+ * state every branch starts in. The Branches drawer shows every status through
+ * `branchStatusPresentation`.
+ */
+export declare function branchBarStatusPresentation(status: string | undefined, isProtected?: boolean): BranchStatusPresentation | undefined;

package/dist/editor/branch-status.js

@@ -27,3 +27,13 @@ export function branchStatusPresentation(status, isProtected = false) {
         return BRANCH_STATUS_PRESENTATION[status];
     return { label: status, color: 'gray', variant: 'light' };
 }
+/**
+ * The status the top bar shows: only one that tells the user something, so not 'editing', the
+ * state every branch starts in. The Branches drawer shows every status through
+ * `branchStatusPresentation`.
+ */
+export function branchBarStatusPresentation(status, isProtected = false) {
+    if (!isProtected && status === 'editing')
+        return undefined;
+    return branchStatusPresentation(status, isProtected);
+}

package/dist/editor/comments/BranchComments.d.ts

@@ -12,15 +12,13 @@ export interface BranchCommentsProps {
     onAddComment: (text: string, type: 'field' | 'entry' | 'branch', entryPath?: string, canopyPath?: string, threadId?: string) => Promise<void>;
     /** Handler to resolve a thread */
     onResolveThread: (threadId: string) => Promise<void>;
-    /** Auto-focus and expand */
-    autoFocus?: boolean;
     /** Thread ID to highlight and scroll to */
     highlightThreadId?: string;
     /** Optional function to fetch user metadata for displaying user badges */
     onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
 }
 /**
- * Branch-level comments section displayed at the top of BranchManager.
- * Uses ThreadCarousel for navigation.
+ * The branch's existing discussion threads, at the top of BranchManager, in a ThreadCarousel.
+ * It renders nothing without one: a new branch comment starts in the Comments drawer.
  */
 export declare const BranchComments: React.FC<BranchCommentsProps>;

package/dist/editor/comments/BranchComments.js

@@ -1,21 +1,17 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { Box, Button } from '@mantine/core';
+import { useMemo } from 'react';
 import { ThreadCarousel } from './ThreadCarousel.js';
 /**
- * Branch-level comments section displayed at the top of BranchManager.
- * Uses ThreadCarousel for navigation.
+ * The branch's existing discussion threads, at the top of BranchManager, in a ThreadCarousel.
+ * It renders nothing without one: a new branch comment starts in the Comments drawer.
  */
-export const BranchComments = ({ comments, currentUserId, canResolve, onAddComment, onResolveThread, autoFocus, highlightThreadId, onGetUserMetadata, }) => {
-    const [showCarousel, setShowCarousel] = useState(false);
+export const BranchComments = ({ comments, currentUserId, canResolve, onAddComment, onResolveThread, highlightThreadId, onGetUserMetadata, }) => {
     const branchThreads = useMemo(() => comments.filter((t) => t.type === 'branch'), [comments]);
-    const shouldShowCarousel = branchThreads.length > 0 || showCarousel || autoFocus;
     const handleAddComment = async (text, threadId) => {
         await onAddComment(text, 'branch', undefined, undefined, threadId);
     };
-    if (!shouldShowCarousel) {
-        return (_jsx(Box, { children: _jsx(Button, { variant: "subtle", color: "gray", onClick: () => setShowCarousel(true), style: { fontSize: '0.75rem', height: '1.5rem' }, children: "New branch comment" }) }));
-    }
-    return (_jsx(ThreadCarousel, { threads: branchThreads, label: "Branch discussion", contextType: "branch", currentUserId: currentUserId, canResolve: canResolve, onAddComment: handleAddComment, onResolveThread: onResolveThread, autoFocus: autoFocus, autoOpenNewThread: showCarousel && branchThreads.length === 0, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetUserMetadata }));
+    if (branchThreads.length === 0)
+        return null;
+    return (_jsx(ThreadCarousel, { threads: branchThreads, label: "Branch discussion", contextType: "branch", currentUserId: currentUserId, canResolve: canResolve, onAddComment: handleAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetUserMetadata }));
 };

package/dist/editor/comments/ThreadCarousel.d.ts

@@ -35,19 +35,13 @@ export interface ThreadCarouselProps {
     currentUserId: string;
     /** Whether the user may resolve any thread; a thread's own author always may resolve it. */
     canResolve: boolean;
-    /** Handler to add a new comment (creates new thread or adds to existing) */
-    onAddComment: (text: string, threadId?: string) => Promise<void>;
+    /** Handler to reply to a thread; new threads start in the Comments drawer. */
+    onAddComment: (text: string, threadId: string) => Promise<void>;
     /** Handler to resolve a thread */
     onResolveThread: (threadId: string) => Promise<void>;
-    /** Auto-focus and expand (from preview click) */
-    autoFocus?: boolean;
-    /** Auto-open new thread box */
-    autoOpenNewThread?: boolean;
     /** Thread ID to highlight and scroll to */
     highlightThreadId?: string;
     /** Optional function to fetch user metadata for displaying user badges */
     onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
-    /** Called when the user cancels the new-thread box (e.g. so a wrapper can collapse an empty carousel) */
-    onCancelNewThread?: () => void;
 }
 export declare const ThreadCarousel: React.FC<ThreadCarouselProps>;

package/dist/editor/comments/ThreadCarousel.js

@@ -1,20 +1,15 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useRef } from 'react';
-import { ActionIcon, Button, Group, Paper, Stack, Text, Textarea, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Paper, Stack, Text, Tooltip } from '@mantine/core';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { InlineCommentThread } from './InlineCommentThread.js';
 import { useTrackedWrites } from './use-tracked-writes.js';
-import { CommentWriteAlert, toCommentWriteFailure, } from './CommentWriteAlert.js';
-export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, currentUserId, canResolve, onAddComment, onResolveThread, autoFocus, autoOpenNewThread, highlightThreadId, onGetUserMetadata, onCancelNewThread, }) => {
+export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, currentUserId, canResolve, onAddComment, onResolveThread, highlightThreadId, onGetUserMetadata, }) => {
     const [currentIndex, setCurrentIndex] = useState(0);
-    const [showNewThreadBox, setShowNewThreadBox] = useState(false);
-    const [newThreadText, setNewThreadText] = useState('');
-    const [isSubmitting, setIsSubmitting] = useState(false);
     const [carouselHeight, setCarouselHeight] = useState(400);
     const [isResizing, setIsResizing] = useState(false);
     const [highlightedThreadId, setHighlightedThreadId] = useState(undefined);
-    const [error, setError] = useState(null);
     const scrollContainerRef = useRef(null);
     const resizeStartY = useRef(0);
     const resizeStartHeight = useRef(0);
@@ -24,17 +19,6 @@ export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, cu
         }
         return a.resolved ? 1 : -1;
     }), [threads]);
-    useEffect(() => {
-        if (autoFocus && sortedThreads.length > 0) {
-            const firstUnresolved = sortedThreads.find((t) => !t.resolved);
-            if (firstUnresolved) {
-                const index = sortedThreads.findIndex((t) => t.id === firstUnresolved.id);
-                setCurrentIndex(index);
-                scrollToIndex(index);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex is stable
-    }, [autoFocus, sortedThreads]);
     useEffect(() => {
         if (highlightThreadId && sortedThreads.length > 0) {
             const threadIndex = sortedThreads.findIndex((t) => t.id === highlightThreadId);
@@ -50,11 +34,6 @@ export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, cu
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex is stable
     }, [highlightThreadId, sortedThreads]);
-    useEffect(() => {
-        if (autoOpenNewThread) {
-            setShowNewThreadBox(true);
-        }
-    }, [autoOpenNewThread]);
     useEffect(() => {
         const handleMouseMove = (e) => {
             if (!isResizing)
@@ -119,32 +98,8 @@ export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, cu
     const resolveThread = track(onResolveThread);
     // A resolved thread's controls unmount with the focused button, so focus lands here.
     const labelRef = useRef(null);
-    const handleCreateNewThread = async () => {
-        if (!newThreadText.trim())
-            return;
-        setIsSubmitting(true);
-        setError(null);
-        try {
-            await addComment(newThreadText);
-            setNewThreadText('');
-            setShowNewThreadBox(false);
-        }
-        catch (err) {
-            setError(toCommentWriteFailure(err));
-        }
-        finally {
-            setIsSubmitting(false);
-        }
-    };
     const unresolvedCount = sortedThreads.filter((t) => !t.resolved).length;
-    return (_jsx(Paper, { p: "sm", bg: "var(--mantine-color-default-hover)", style: { marginTop: 8 }, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", align: "center", children: [_jsxs(Group, { gap: "xs", children: [_jsxs(Text, { ref: labelRef, size: "sm", fw: 600, tabIndex: -1, children: [label, sortedThreads.length > 0 && ` (${sortedThreads.length})`] }), unresolvedCount > 0 && (_jsxs(Text, { size: "xs", c: "orange", fw: 600, children: [unresolvedCount, " unresolved"] }))] }), _jsxs(Group, { gap: "xs", children: [sortedThreads.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: "Previous thread", children: _jsx(ActionIcon, { variant: "subtle", onClick: handlePrevious, disabled: currentIndex === 0, "aria-label": "Previous thread", children: _jsx(IconChevronLeft, { size: 16, "aria-hidden": true }) }) }), _jsxs(Text, { size: "xs", fw: 500, children: [currentIndex + 1, "/", sortedThreads.length] }), _jsx(Tooltip, { label: "Next thread", children: _jsx(ActionIcon, { variant: "subtle", onClick: handleNext, disabled: currentIndex === sortedThreads.length - 1, "aria-label": "Next thread", children: _jsx(IconChevronRight, { size: 16, "aria-hidden": true }) }) }), _jsx("div", { style: {
-                                                width: 1,
-                                                height: 16,
-                                                background: 'var(--mantine-color-default-border)',
-                                            } })] })), _jsx(Button, { variant: "light", onClick: () => setShowNewThreadBox(!showNewThreadBox), children: "+ New" })] })] }), error && _jsx(CommentWriteAlert, { failure: error, onClose: () => setError(null) }), showNewThreadBox && (_jsx(Paper, { withBorder: true, p: "sm", bg: "var(--mantine-color-body)", children: _jsxs(Stack, { gap: "xs", children: [_jsx(Textarea, { placeholder: "Start a new thread...", value: newThreadText, onChange: (e) => setNewThreadText(e.target.value), minRows: 2, disabled: isSubmitting, autoFocus: true, "data-testid": "new-thread-textarea" }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { onClick: handleCreateNewThread, loading: isSubmitting, disabled: !newThreadText.trim(), "data-testid": "create-thread-button", children: "Create Thread" }), _jsx(Button, { variant: "subtle", onClick: () => {
-                                            setShowNewThreadBox(false);
-                                            onCancelNewThread?.();
-                                        }, children: "Cancel" })] })] }) })), sortedThreads.length > 0 && (_jsxs("div", { style: {
+    return (_jsx(Paper, { p: "sm", bg: "var(--mantine-color-default-hover)", style: { marginTop: 8 }, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", align: "center", children: [_jsxs(Group, { gap: "xs", children: [_jsxs(Text, { ref: labelRef, size: "sm", fw: 600, tabIndex: -1, children: [label, sortedThreads.length > 0 && ` (${sortedThreads.length})`] }), unresolvedCount > 0 && (_jsxs(Text, { size: "xs", c: "orange", fw: 600, children: [unresolvedCount, " unresolved"] }))] }), _jsx(Group, { gap: "xs", children: sortedThreads.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: "Previous thread", children: _jsx(ActionIcon, { variant: "subtle", onClick: handlePrevious, disabled: currentIndex === 0, "aria-label": "Previous thread", children: _jsx(IconChevronLeft, { size: 16, "aria-hidden": true }) }) }), _jsxs(Text, { size: "xs", fw: 500, children: [currentIndex + 1, "/", sortedThreads.length] }), _jsx(Tooltip, { label: "Next thread", children: _jsx(ActionIcon, { variant: "subtle", onClick: handleNext, disabled: currentIndex === sortedThreads.length - 1, "aria-label": "Next thread", children: _jsx(IconChevronRight, { size: 16, "aria-hidden": true }) }) })] })) })] }), sortedThreads.length > 0 && (_jsxs("div", { style: {
                         position: 'relative',
                         width: '100%',
                     }, children: [_jsxs("div", { ref: scrollContainerRef, style: {
@@ -206,5 +161,5 @@ export const ThreadCarousel = ({ threads, label = 'Comments', contextType: _, cu
                                     height: 3,
                                     borderRadius: 2,
                                     background: 'var(--mantine-color-dimmed)',
-                                } }) })] })), sortedThreads.length === 0 && !showNewThreadBox && (_jsx(Text, { size: "xs", c: "dimmed", ta: "center", py: "xs", children: "No comments yet. Click \"+ New\" to start a thread." }))] }) }));
+                                } }) })] }))] }) }));
 };

package/dist/editor/comments/ThreadReplyControls.js

@@ -76,8 +76,11 @@ export const ThreadReplyControls = ({ thread, onAddReply, onResolve, focusAfterR
                 setReplyText('');
             }
             await onResolve();
-            if (focusAfterResolve)
-                moveFocusIfUnmoved(origin, focusAfterResolve());
+            // After the commit that settles the write, so focus never lands on a control that still
+            // reads as busy.
+            if (focusAfterResolve) {
+                requestAnimationFrame(() => setTimeout(() => moveFocusIfUnmoved(origin, focusAfterResolve()), 0));
+            }
         }
         catch (err) {
             setError(toCommentWriteFailure(err));