canopycms 0.1.0 → 0.2.0-int.121

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));

package/dist/editor/components/BranchLockBanner.d.ts

@@ -6,14 +6,15 @@ export interface BranchLockInput {
     branchWriteBlocked?: boolean;
 }
 /**
- * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
- * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
- * base-branch read-only takes precedence over a workflow status lock.
+ * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
+ * @internal Exported for tests.
  */
-export declare function branchLockState({ branchStatus, branchReadOnly, branchWriteBlocked, }: BranchLockInput): {
-    statusLocked: boolean;
-    branchDataUnavailable: boolean;
-};
+export declare function branchLockBannerShown(lock: BranchLockInput): boolean;
+/**
+ * Why the branch takes no writes, with the way forward; undefined when it does take them. The
+ * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
+ */
+export declare function describeBranchLock(lock: BranchLockInput): string | undefined;
 export interface BranchLockBannerProps extends BranchLockInput {
     branchName: string;
     onBranchManagerOpen: () => void;

package/dist/editor/components/BranchLockBanner.js

@@ -7,7 +7,7 @@ import { EDITOR_ACTIONS } from '../copy.js';
  * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
  * base-branch read-only takes precedence over a workflow status lock.
  */
-export function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
+function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
     const statusLocked = branchWriteBlocked && !branchReadOnly;
     // `branchStatus` can't describe the lock while branch data loads (undefined) or under version
     // skew (an old server omits `branchWriteBlocked` but reports 'editing'), so both read as
@@ -15,10 +15,37 @@ export function branchLockState({ branchStatus, branchReadOnly = false, branchWr
     const branchDataUnavailable = statusLocked && (branchStatus === undefined || branchStatus === 'editing');
     return { statusLocked, branchDataUnavailable };
 }
+/**
+ * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
+ * @internal Exported for tests.
+ */
+export function branchLockBannerShown(lock) {
+    return !!lock.branchReadOnly || branchLockState(lock).statusLocked;
+}
+/**
+ * Why the branch takes no writes, with the way forward; undefined when it does take them. The
+ * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
+ */
+export function describeBranchLock(lock) {
+    if (!branchLockBannerShown(lock))
+        return undefined;
+    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
+    if (lock.branchReadOnly)
+        return 'The base branch is read-only. Create a branch to make changes.';
+    if (branchDataUnavailable)
+        return 'Branch details could not be loaded. Use "Switch branch…" to retry.';
+    if (!statusLocked)
+        return undefined;
+    if (lock.branchStatus === 'submitted')
+        return 'This branch is in review. Withdraw it to make changes.';
+    if (lock.branchStatus === 'approved')
+        return 'This branch is approved. Withdraw it to make changes.';
+    return `This branch is ${lock.branchStatus}. Its content is read-only.`;
+}
 /** The banner region's explanation of a read-only branch; not dismissible while it applies. */
 export function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }) {
-    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
-    if (!lock.branchReadOnly && !statusLocked)
+    const { branchDataUnavailable } = branchLockState(lock);
+    if (!branchLockBannerShown(lock))
         return null;
     const [testId, message, action] = lock.branchReadOnly
         ? [

package/dist/editor/components/BranchPill.d.ts

@@ -4,7 +4,7 @@ export interface BranchPillProps {
     branchName: string;
     /** The editor is busy; with no branch name yet, that is the branch list loading. */
     loading: boolean;
-    /** The status label ("Editing", "In review", "Protected"), when the mode shows one. */
+    /** The status label ("In review", "Protected"), set only for a status worth a place in the bar. */
     status?: {
         label: string;
         testId: string;
@@ -25,8 +25,9 @@ export interface BranchPillProps {
     pillRef?: Ref<HTMLButtonElement>;
 }
 /**
- * The branch's name, status and unsaved count. Its menu holds the branch actions and lists the
- * unsaved entries, each opening that entry. Below `sm` it is the branch icon and the count, its
- * name then in its Tooltip, accessible name and menu label: the row's actions must not clip.
+ * The branch's name, status and unsaved count: the unsaved mark and a number. Its menu holds the
+ * branch actions and lists the unsaved entries, each opening that entry. Below `sm` it is the
+ * branch icon and the count, its name then in its Tooltip, accessible name and menu label: the
+ * row's actions must not clip.
  */
 export declare function BranchPill({ branchName, loading, status, unsavedCount: unsaved, unsavedEntries, onSwitchBranch, onRefreshBranch, onDiscardAll, onEntrySelect, pillRef, }: BranchPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/BranchPill.js

@@ -7,12 +7,14 @@ import { IconChevronDown, IconGitBranch } from '@tabler/icons-react';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { DestructiveMenuItem } from './DestructiveMenuItem.js';
 import { ReasonedMenuItem } from './ReasonedMenuItem.js';
+import { UnsavedMark } from './UnsavedMark.js';
 import { useMenuItemFocusReturn } from '../utils/focus-return.js';
 const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`;
 /**
- * The branch's name, status and unsaved count. Its menu holds the branch actions and lists the
- * unsaved entries, each opening that entry. Below `sm` it is the branch icon and the count, its
- * name then in its Tooltip, accessible name and menu label: the row's actions must not clip.
+ * The branch's name, status and unsaved count: the unsaved mark and a number. Its menu holds the
+ * branch actions and lists the unsaved entries, each opening that entry. Below `sm` it is the
+ * branch icon and the count, its name then in its Tooltip, accessible name and menu label: the
+ * row's actions must not clip.
  */
 export function BranchPill({ branchName, loading, status, unsavedCount: unsaved, unsavedEntries, onSwitchBranch, onRefreshBranch, onDiscardAll, onEntrySelect, pillRef, }) {
     const trigger = useRef(null);
@@ -23,11 +25,7 @@ export function BranchPill({ branchName, loading, status, unsavedCount: unsaved,
     const name = branchName || (loading ? 'Loading branches…' : 'No branch open');
     return (_jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", ...menuFocus.menu, children: [_jsx(Tooltip, { label: status ? `${name} · ${status.label}` : name, disabled: wide, events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsxs(Button, { ref: triggerRef, variant: "default", size: "sm", miw: 0, px: { base: 8, sm: 14 }, 
                         // The count is the bar's one branch-wide unsaved signal: the row wraps before it clips.
-                        style: { flexShrink: 0 }, leftSection: _jsx(IconGitBranch, { size: 16, "aria-hidden": "true" }), rightSection: wide ? _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) : undefined, loading: !branchName && loading, "data-testid": "branch-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [_jsx(Text, { span: true, inherit: true, truncate: "end", maw: 200, visibleFrom: "sm", children: name }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "sm", children: name }), branchName && status && (_jsxs(Text, { span: true, size: "xs", c: "dimmed", visibleFrom: "md", style: { flexShrink: 0 }, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), _jsx("span", { "data-testid": status.testId, "data-status": status.value, children: status.label })] })), unsaved > 0 && (_jsxs(Text, { span: true, size: "xs", fw: 600, px: 6, style: {
-                                    flexShrink: 0,
-                                    borderRadius: 'var(--mantine-radius-xl)',
-                                    background: 'var(--canopy-count-bg)',
-                                }, "data-testid": "branch-unsaved-count", children: [unsaved, _jsx(Box, { component: "span", visibleFrom: "sm", children: ' unsaved' }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "sm", children: ' unsaved' })] }))] }) }) }), _jsxs(Menu.Dropdown, { "data-testid": "branch-menu", ...menuFocus.dropdown, children: [branchName && status && (_jsx(Menu.Label, { hiddenFrom: "md", children: `${branchName} · ${status.label}` })), _jsx(Menu.Item, { onClick: onSwitchBranch, "data-testid": "manage-branches-menu-item", children: `${EDITOR_ACTIONS.switchBranch}…` }), _jsx(ReasonedMenuItem, { onClick: onRefreshBranch, blockedReason: noBranch, "data-testid": "refresh-branch-menu-item", children: "Refresh branch" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Unsaved changes" }), unsavedEntries.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", px: "sm", py: 6, "data-testid": "edited-entries-empty", children: unsaved === 0 ? 'No unsaved changes on this branch.' : 'Loading their names…' })) : (unsavedEntries.map((entry) => (_jsx(Menu.Item, { onClick: () => onEntrySelect(entry.path), children: entry.label }, entry.path)))), _jsx(Menu.Divider, {}), _jsx(DestructiveMenuItem, { "data-testid": "discard-all-drafts-menu-item", onClick: onDiscardAll, blockedReason: noBranch ?? (unsaved === 0 ? 'Nothing to discard.' : undefined), children: unsaved > 0
+                        style: { flexShrink: 0 }, leftSection: _jsx(IconGitBranch, { size: 16, "aria-hidden": "true" }), rightSection: wide ? _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) : undefined, loading: !branchName && loading, "data-testid": "branch-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [_jsx(Text, { span: true, inherit: true, truncate: "end", maw: 200, visibleFrom: "sm", children: name }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "sm", children: name }), branchName && status && (_jsxs(Text, { span: true, size: "xs", c: "dimmed", visibleFrom: "md", style: { flexShrink: 0 }, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), _jsx("span", { "data-testid": status.testId, "data-status": status.value, children: status.label })] })), unsaved > 0 && (_jsxs(Box, { component: "span", display: "inline-flex", style: { alignItems: 'center', gap: 4, flexShrink: 0 }, "data-testid": "branch-unsaved-count", children: [_jsx(UnsavedMark, { "aria-hidden": "true" }), _jsx(Text, { span: true, size: "xs", fw: 600, "aria-hidden": "true", children: unsaved }), _jsx(VisuallyHidden, { component: "span", children: `, ${plural(unsaved, 'entry', 'entries')} with unsaved changes` })] }))] }) }) }), _jsxs(Menu.Dropdown, { "data-testid": "branch-menu", ...menuFocus.dropdown, children: [branchName && status && (_jsx(Menu.Label, { hiddenFrom: "md", children: `${branchName} · ${status.label}` })), _jsx(Menu.Item, { onClick: onSwitchBranch, "data-testid": "manage-branches-menu-item", children: `${EDITOR_ACTIONS.switchBranch}…` }), _jsx(ReasonedMenuItem, { onClick: onRefreshBranch, blockedReason: noBranch, "data-testid": "refresh-branch-menu-item", children: "Refresh branch" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Unsaved changes" }), unsavedEntries.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", px: "sm", py: 6, "data-testid": "edited-entries-empty", children: unsaved === 0 ? 'No unsaved changes on this branch.' : 'Loading their names…' })) : (unsavedEntries.map((entry) => (_jsx(Menu.Item, { onClick: () => onEntrySelect(entry.path), children: entry.label }, entry.path)))), _jsx(Menu.Divider, {}), _jsx(DestructiveMenuItem, { "data-testid": "discard-all-drafts-menu-item", onClick: onDiscardAll, blockedReason: noBranch ?? (unsaved === 0 ? 'Nothing to discard.' : undefined), children: unsaved > 0
                             ? `Discard all changes (${plural(unsaved, 'entry', 'entries')})`
                             : 'Discard all changes' })] })] }));
 }

package/dist/editor/components/BranchRowLock.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * The lock a navigator row shows in the slot its "…" menu would fill, on a branch that takes no
+ * writes. It matches the menu button's footprint so rows do not shift between branches, and takes
+ * the menu's name; the reason is its Tooltip and its description. It stays `aria-disabled` rather
+ * than `disabled`, so the reason opens on keyboard focus and touch too. Space is stopped here: the
+ * tree would read it as expand/collapse.
+ */
+export declare const BranchRowLock: React.FC<{
+    label: string;
+    reason: string;
+}>;

package/dist/editor/components/BranchRowLock.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { ActionIcon, Tooltip, VisuallyHidden } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+/**
+ * The lock a navigator row shows in the slot its "…" menu would fill, on a branch that takes no
+ * writes. It matches the menu button's footprint so rows do not shift between branches, and takes
+ * the menu's name; the reason is its Tooltip and its description. It stays `aria-disabled` rather
+ * than `disabled`, so the reason opens on keyboard focus and touch too. Space is stopped here: the
+ * tree would read it as expand/collapse.
+ */
+export const BranchRowLock = ({ label, reason }) => {
+    const reasonId = useId();
+    return (_jsx(Tooltip, { label: reason, withinPortal: true, position: "bottom-end", multiline: true, w: 240, events: { hover: true, focus: true, touch: true }, children: _jsxs(ActionIcon, { size: "xs", variant: "transparent", c: "dimmed", "aria-disabled": true, "aria-label": label, "aria-describedby": reasonId, "data-testid": "branch-lock", style: { cursor: 'default' }, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                if (event.nativeEvent.code === 'Space')
+                    event.stopPropagation();
+            }, children: [_jsx(IconLock, { size: 14, "aria-hidden": true }), _jsx(VisuallyHidden, { component: "span", id: reasonId, children: reason })] }) }));
+};

package/dist/editor/components/BranchesDrawer.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, Text, Title } from '@mantine/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayDrawer } from '../shell/OverlayHeader.js';
 import { focusReturnProps } from '../utils/focus-return.js';
-export const BranchesDrawer = ({ opened, onClose, confirmOpen, returnFocusTo, children, }) => (_jsx(Drawer, { opened: opened, onClose: onClose, closeOnEscape: !confirmOpen, position: "right", title: _jsxs("div", { children: [_jsx(Title, { order: 4, children: "Branches" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Manage access, status, and lifecycle" })] }), padding: "md", size: 420, overlayProps: { blur: 2 }, ...focusReturnProps(returnFocusTo), children: children }));
+export const BranchesDrawer = ({ opened, onClose, confirmOpen, returnFocusTo, children, }) => (_jsx(OverlayDrawer, { opened: opened, onClose: onClose, closeOnEscape: !confirmOpen, position: "right", title: "Branches", size: 420, ...focusReturnProps(returnFocusTo), children: children }));

package/dist/editor/components/EditorHeader.d.ts

@@ -20,8 +20,6 @@ export interface EditorHeaderProps {
     }>;
     /** Entries with unsaved changes on the branch. */
     modifiedCount: number;
-    /** Opens the content panel. */
-    onNavigatorOpen: () => void;
     /** Opens the content panel on a collection. */
     onCollectionOpen: (collectionPath: string) => void;
     /** The entry menu's trigger. */
@@ -31,12 +29,10 @@ export interface EditorHeaderProps {
     /** Replaces the open entry with the server's copy. */
     onFileReload: () => void;
     onFileDiscardDraft: () => void;
-    /** Opens the open entry's rename dialog. */
+    /** Opens the open entry's "Change URL" dialog. */
     onEntryRename: () => void;
     /** Asks to delete the open entry. */
     onEntryDelete: () => void;
-    /** The "All content" crumb. */
-    allContentRef?: Ref<HTMLButtonElement>;
     onEntrySelect: (path: LogicalPath) => void;
     /** Re-reads the branch and its entry list, keeping drafts. */
     onBranchReloadData: () => void;
@@ -98,4 +94,4 @@ export interface EditorHeaderProps {
  * The top bar's contents: the breadcrumb with the entry menu and "Read-only" chip, then the branch
  * pill, Submit or Withdraw, and Save with Save all.
  */
-export declare function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onNavigatorOpen, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, allContentRef, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving, savedSignal, savedHere, entryListFailed, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, branchReadOnly, branchWriteBlocked, branchLoading, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving, savedSignal, savedHere, entryListFailed, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, branchReadOnly, branchWriteBlocked, branchLoading, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;