canopycms 0.2.0 → 0.3.1

package/dist/editor/components/EntrySaveButton.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { Box, Button, Loader, Tooltip, VisuallyHidden } from '@mantine/core';
+import { useReducedMotion } from '@mantine/hooks';
+import { IconCheck, IconLoader2 } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+const KEPT_HINT = 'Unsaved changes are kept on this device until you save.';
+const SAVE_ALL_WAIT = 'Wait for Save all to finish.';
+const SAVED_SHOWN_MS = 2000;
+// Below `sm` the status words are visually hidden, so Save keeps its own width beside an icon.
+const LABEL_TEXT_CLASS = 'canopy-save-label-text';
+const LABEL_STYLES = `
+@media (max-width: 47.99em) {
+  .${LABEL_TEXT_CLASS} {
+    position: absolute; width: 1px; height: 1px; overflow: hidden;
+    clip: rect(0 0 0 0); white-space: nowrap;
+  }
+}
+`;
+/**
+ * Every label in one grid cell, only `shown` visible, so the button keeps the widest one's width
+ * and the header never shifts.
+ */
+function SaveLabels({ shown, spinner }) {
+    const labels = {
+        save: EDITOR_ACTIONS.save,
+        saving: (_jsxs(_Fragment, { children: [_jsx(Box, { component: "span", display: "inline-flex", w: 14, children: shown === 'saving' &&
+                        (spinner ? (_jsx(Loader, { size: 14, color: "currentColor" })) : (_jsx(IconLoader2, { size: 14, "aria-hidden": "true" }))) }), _jsx("span", { className: LABEL_TEXT_CLASS, children: "Saving\u2026" })] })),
+        saved: (_jsxs(_Fragment, { children: [_jsx(IconCheck, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: LABEL_TEXT_CLASS, children: "Saved" })] })),
+    };
+    return (_jsx(Box, { component: "span", pos: "relative", style: { display: 'inline-grid' }, children: Object.keys(labels).map((key) => (_jsx(Box, { component: "span", "aria-hidden": key === shown ? undefined : true, style: {
+                gridArea: '1 / 1',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                visibility: key === shown ? 'visible' : 'hidden',
+            }, children: labels[key] }, key))) }));
+}
+/**
+ * The open entry's Save, reading "Saving…" then "Saved" as a save lands. While the entry has
+ * unsaved changes, its Tooltip and description say they are kept on this device.
+ */
+export function EntrySaveButton({ onSave, saveBlockedReason, busy, saveAllRunning, saving = false, savedSignal, savedHere = false, entryDirty, draftStorageFailed, }) {
+    const keptHintId = useId();
+    const reducedMotion = useReducedMotion();
+    // Each landed Save shows "Saved" once, as it lands and only on its own entry: one that landed
+    // before mount or while another entry was open shows nothing later.
+    const [seenSignal, setSeenSignal] = useState(savedSignal ?? 0);
+    const [flashing, setFlashing] = useState();
+    // Leaving the saved entry ends its "Saved", so a quick return doesn't show or announce it again.
+    const [wasHere, setWasHere] = useState(savedHere);
+    if (wasHere !== savedHere) {
+        setWasHere(savedHere);
+        if (!savedHere)
+            setFlashing(undefined);
+    }
+    // Save all ends any "Saved", so a run that finishes within its window doesn't bring it back.
+    const [wasRunning, setWasRunning] = useState(saveAllRunning);
+    if (wasRunning !== saveAllRunning) {
+        setWasRunning(saveAllRunning);
+        if (saveAllRunning)
+            setFlashing(undefined);
+    }
+    if (savedSignal !== undefined && savedSignal > seenSignal) {
+        setSeenSignal(savedSignal);
+        setFlashing(savedHere && !saveAllRunning ? savedSignal : undefined);
+    }
+    useEffect(() => {
+        if (flashing === undefined)
+            return;
+        const timer = setTimeout(() => setFlashing(undefined), SAVED_SHOWN_MS);
+        return () => clearTimeout(timer);
+    }, [flashing]);
+    // Blocked, Save stays focusable (`aria-disabled`, not `disabled`), so its reason opens on focus.
+    const saveBlocked = !!saveBlockedReason || busy || saveAllRunning;
+    const label = saving
+        ? 'saving'
+        : flashing !== undefined &&
+            flashing === savedSignal &&
+            savedHere &&
+            !entryDirty &&
+            !saveAllRunning
+            ? 'saved'
+            : 'save';
+    // A "Saving…" or "Saved" label stays readable: disabled styling takes it under 4.5:1.
+    const saveGreyed = saveBlocked && label === 'save';
+    const blockedReason = saveAllRunning ? SAVE_ALL_WAIT : saveBlockedReason;
+    // Why Save is blocked, else where unsaved changes are held; a blocked Save's reason leads.
+    const keptHint = entryDirty && !draftStorageFailed && !blockedReason ? KEPT_HINT : '';
+    const saveTooltip = blockedReason || keptHint;
+    return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { role: "status", children: label === 'saved' ? 'Saved' : '' }), keptHint && (_jsx("span", { hidden: true, id: keptHintId, children: keptHint })), _jsx("style", { children: LABEL_STYLES }), _jsx(Tooltip, { label: saveTooltip, 
+                // Not beside "Saving…" or "Saved", nor while busy, except Save all's wait: its reloads flip `busy`.
+                disabled: !saveTooltip || label !== 'save' || (busy && !saveAllRunning), multiline: true, maw: 280, 
+                // Down, away from the top bar, whose Save all a reason opening upward would cover.
+                position: "bottom-end", children: _jsx(Button, { "data-testid": "save-button", variant: "filled", size: "sm", style: { flexShrink: 0 }, onClick: () => {
+                        if (!saveBlocked)
+                            onSave();
+                    }, "data-disabled": saveGreyed ? true : undefined, "aria-disabled": saveBlocked ? true : undefined, ...(keptHint ? { 'aria-describedby': keptHintId } : {}), children: _jsx(SaveLabels, { shown: label, spinner: !reducedMotion }) }) })] }));
+}

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

@@ -5,7 +5,7 @@ export interface NoEditPermissionNoticeProps {
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
  * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
- * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * or protected branch instead says so in the branch bar's status over a read-only form, the rule
  * `contentReadOnly` in `Editor.tsx` holds.
  */
 export declare function NoEditPermissionNotice({ entryLabel }: NoEditPermissionNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/NoEditPermissionNotice.js

@@ -3,7 +3,7 @@ import { Text } from '@mantine/core';
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
  * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
- * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * or protected branch instead says so in the branch bar's status over a read-only form, the rule
  * `contentReadOnly` in `Editor.tsx` holds.
  */
 export function NoEditPermissionNotice({ entryLabel }) {

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

@@ -4,6 +4,8 @@ export interface RetryToastMessageProps {
     onRetry: () => void;
     /** The button's label, when the way forward is not a plain retry. */
     actionLabel?: string;
+    /** A developer diagnostic, shown only once "Details" is opened. */
+    details?: string;
 }
 /** The body of an error toast whose failure the user can try again from the toast. */
-export declare function RetryToastMessage({ message, onRetry, actionLabel, }: RetryToastMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function RetryToastMessage({ message, onRetry, actionLabel, details, }: RetryToastMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/RetryToastMessage.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Group, Text } from '@mantine/core';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Anchor, Button, Code, Group, Stack, Text } from '@mantine/core';
 /** The body of an error toast whose failure the user can try again from the toast. */
-export function RetryToastMessage({ message, onRetry, actionLabel = 'Retry', }) {
-    return (_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", children: [_jsx(Text, { size: "sm", miw: 0, children: message }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onRetry, children: actionLabel })] }));
+export function RetryToastMessage({ message, onRetry, actionLabel = 'Retry', details, }) {
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const detailsId = useId();
+    return (_jsxs(Stack, { gap: 4, children: [_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", children: [_jsx(Text, { size: "sm", miw: 0, children: message }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onRetry, children: actionLabel })] }), details && (_jsxs(_Fragment, { children: [_jsx(Anchor, { component: "button", type: "button", size: "xs", style: { alignSelf: 'flex-start' }, "aria-expanded": detailsOpen, "aria-controls": detailsOpen ? detailsId : undefined, onClick: () => setDetailsOpen((open) => !open), children: "Details" }), detailsOpen && (_jsx(Code, { id: detailsId, block: true, style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: details }))] }))] }));
 }

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

@@ -0,0 +1,25 @@
+import React, { type ReactNode, type Ref } from 'react';
+import type { SaveAllProgress } from '../hooks/save-all.js';
+export interface SaveAllButtonProps {
+    onSaveAll: () => void;
+    /** Entries on the branch with unsaved changes; the branch bar shows the count. */
+    unsavedCount: number;
+    /** Why Save all can't act now, other than its own run, a save in flight or nothing unsaved. */
+    blockedReason?: string;
+    /** Set while Save all runs. */
+    saveAllProgress: SaveAllProgress | null;
+    /** A single Save is in flight, on any entry; Save all can't start beside it. */
+    singleSaving: boolean;
+    /** The editor is loading or saving. */
+    busy: boolean;
+    /** A caret menu joined to the button, making it a split button. */
+    caret?: ReactNode;
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+/** Saves every unsaved entry on the branch; the result is a toast (`SaveAllResult`). */
+export declare function SaveAllButton({ onSaveAll, unsavedCount, blockedReason, saveAllProgress, singleSaving, busy, caret, buttonRef, }: SaveAllButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const HIDDEN_STYLE: React.CSSProperties;
+/** Unsaved changes live only in this tab. Icon-only below `lg`, its text then its Tooltip. */
+export declare function DraftStorageWarning({ shown }: {
+    shown: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/SaveAllButton.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Button, Loader, Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { useReducedMotion } from '@mantine/hooks';
+import { IconAlertTriangle, IconLoader2 } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+/**
+ * Every label in one grid cell, only `shown` visible, so the button keeps the widest one's width
+ * and the top bar doesn't shift as the count or progress changes.
+ */
+function SaveAllLabels({ shown, labels }) {
+    return (_jsx(Box, { component: "span", style: { display: 'inline-grid', fontVariantNumeric: 'tabular-nums' }, children: labels.map((label, index) => (_jsx(Box, { component: "span", "aria-hidden": index === shown ? undefined : true, style: {
+                gridArea: '1 / 1',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                visibility: index === shown ? 'visible' : 'hidden',
+            }, children: label }, index))) }));
+}
+/** Saves every unsaved entry on the branch; the result is a toast (`SaveAllResult`). */
+export function SaveAllButton({ onSaveAll, unsavedCount, blockedReason, saveAllProgress, singleSaving, busy, caret, buttonRef, }) {
+    const reducedMotion = useReducedMotion();
+    // A running Save all shows only its progress: a lock arriving mid-run would grey it.
+    const reason = saveAllProgress
+        ? undefined
+        : (blockedReason ??
+            (singleSaving
+                ? 'Wait for the save to finish.'
+                : unsavedCount === 0
+                    ? 'No entry on this branch has unsaved changes.'
+                    : busy
+                        ? 'Wait for the current save or load to finish.'
+                        : undefined));
+    // Blocked, it stays focusable (`aria-disabled`, not `disabled`), so its reason opens on focus.
+    const blocked = !!reason || !!saveAllProgress;
+    // The branch's largest count yet sizes the progress, so the width grows only as a digit is added.
+    const count = Math.max(unsavedCount, saveAllProgress?.total ?? 0, 1);
+    const [widest, setWidest] = useState(count);
+    if (count > widest)
+        setWidest(count);
+    const progress = (done, total) => (_jsxs(_Fragment, { children: [_jsx(Box, { component: "span", display: "inline-flex", w: 14, children: saveAllProgress &&
+                    (reducedMotion ? (_jsx(IconLoader2, { size: 14, "aria-hidden": "true" })) : (_jsx(Loader, { size: 14, color: "currentColor" }))) }), `${Math.min(done + 1, total)} of ${total}…`] }));
+    // Progress reads "2 of 3…" beside the spinner.
+    const labels = [
+        EDITOR_ACTIONS.saveAll,
+        saveAllProgress ? progress(saveAllProgress.done, saveAllProgress.total) : progress(0, 1),
+        progress(widest, widest),
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { role: "status", children: saveAllProgress
+                    ? `Saving ${saveAllProgress.total} ${saveAllProgress.total === 1 ? 'entry' : 'entries'}…`
+                    : '' }), _jsxs(Button.Group, { style: { flexShrink: 0 }, renderRoot: (props) => (_jsx("div", { ...props, role: caret ? 'group' : undefined, "aria-label": caret ? 'Save all and branch actions' : undefined })), children: [_jsx(Tooltip, { label: reason, disabled: !reason, multiline: true, maw: 300, 
+                        // Beside its button, in the bar's free middle, so it covers neither the entry's Save
+                        // below nor a stacked row of the bar; below when the left edge has no room for it.
+                        position: "left", middlewares: { flip: { fallbackPlacements: ['bottom-end'] }, shift: true }, children: _jsx(Button, { ref: buttonRef, "data-testid": "save-all-button", 
+                            // The open entry's Save is the editor's one filled primary.
+                            variant: "light", size: "sm", style: { flexShrink: 0 }, onClick: () => {
+                                if (!blocked)
+                                    onSaveAll();
+                            }, "data-disabled": reason ? true : undefined, "aria-disabled": blocked ? true : undefined, "aria-label": saveAllProgress
+                                ? `Saving ${Math.min(saveAllProgress.done + 1, saveAllProgress.total)} of ${saveAllProgress.total}…`
+                                : undefined, children: _jsx(SaveAllLabels, { shown: saveAllProgress ? 1 : 0, labels: labels }) }) }), caret] })] }));
+}
+const STORAGE_FAILED_TEXT = 'Unsaved · not kept on this device';
+const STORAGE_FAILED_HINT = "Save before you leave or reload, or they'll be lost.";
+// Visually hidden, as Mantine's VisuallyHidden, for a region that must stay mounted.
+export const HIDDEN_STYLE = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+};
+/** Unsaved changes live only in this tab. Icon-only below `lg`, its text then its Tooltip. */
+export function DraftStorageWarning({ shown }) {
+    return (
+    // Always mounted so the warning is announced; visible, at a fixed width, only when shown.
+    _jsx(Box, { role: "status", ta: "right", w: { base: 20, lg: 112 }, style: shown ? { flexShrink: 0 } : HIDDEN_STYLE, children: shown && (_jsx(Tooltip, { label: `${STORAGE_FAILED_TEXT}. ${STORAGE_FAILED_HINT}`, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", lh: 1.2, c: "var(--canopy-danger-text)", "data-testid": "unsaved-indicator", children: [_jsx(Box, { component: "span", visibleFrom: "lg", children: STORAGE_FAILED_TEXT }), _jsx(Box, { component: "span", hiddenFrom: "lg", display: "inline-flex", "aria-hidden": "true", children: _jsx(IconAlertTriangle, { size: 18 }) }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "lg", children: STORAGE_FAILED_TEXT }), _jsxs(VisuallyHidden, { component: "span", children: [". ", STORAGE_FAILED_HINT] })] }) })) }));
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ElementProps } from '@mantine/core';
 /**
- * The editor's one "unsaved" mark, a dot, in the breadcrumb, the branch pill and the content tree.
+ * The editor's one "unsaved" mark, a dot.
  * `--canopy-unsaved-mark` is the brand colour at 3:1 on the shell's surfaces in either scheme.
  * The caller says whether it is named (`role="img"` and a label) or decoration (`aria-hidden`).
  * It forwards its ref, so a Tooltip can wrap it.

package/dist/editor/components/UnsavedMark.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Box } from '@mantine/core';
 /**
- * The editor's one "unsaved" mark, a dot, in the breadcrumb, the branch pill and the content tree.
+ * The editor's one "unsaved" mark, a dot.
  * `--canopy-unsaved-mark` is the brand colour at 3:1 on the shell's surfaces in either scheme.
  * The caller says whether it is named (`role="img"` and a label) or decoration (`aria-hidden`).
  * It forwards its ref, so a Tooltip can wrap it.

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

@@ -1,3 +1,3 @@
-export * from './BranchLockBanner.js';
 export * from './EditorHeader.js';
 export * from './EditorRail.js';
+export * from './EntryHeader.js';

package/dist/editor/components/index.js

@@ -1,3 +1,3 @@
-export * from './BranchLockBanner.js';
 export * from './EditorHeader.js';
 export * from './EditorRail.js';
+export * from './EntryHeader.js';

package/dist/editor/copy.d.ts

@@ -16,7 +16,6 @@ export declare const EDITOR_ACTIONS: {
     readonly restore: "Restore";
     readonly clear: "Clear";
     readonly undoClear: "Undo clear";
-    readonly openEntry: "Open entry";
     readonly changeUrl: "Change URL";
     readonly changeSlug: "Change slug";
 };

package/dist/editor/copy.js

@@ -16,7 +16,6 @@ export const EDITOR_ACTIONS = {
     restore: 'Restore',
     clear: 'Clear',
     undoClear: 'Undo clear',
-    openEntry: 'Open entry',
     changeUrl: 'Change URL',
     changeSlug: 'Change slug',
 };

package/dist/editor/editor-utils.d.ts

@@ -76,8 +76,8 @@ export declare const buildCollectionLabels: (collections?: EditorCollection[]) =
  */
 export declare const entryTypeLabel: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "collectionPath" | "entryType">) => string | undefined;
 /**
- * The type shown under an entry's label, in the content tree and quick open: `entryTypeLabel`,
- * except for a singleton, whose label already is its type's (`singletonLabel`).
+ * The type shown under an entry's label in the content tree: `entryTypeLabel`, except for a
+ * singleton, whose label already is its type's (`singletonLabel`). @internal Exported for tests.
  */
 export declare const entryTypeLine: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "collectionPath" | "entryType">) => string | undefined;
 /**

package/dist/editor/editor-utils.js

@@ -222,8 +222,8 @@ export const entryTypeLabel = (collections, entry) => {
     return findEntryType(collections, entry)?.label ?? humanizeName(entry.entryType);
 };
 /**
- * The type shown under an entry's label, in the content tree and quick open: `entryTypeLabel`,
- * except for a singleton, whose label already is its type's (`singletonLabel`).
+ * The type shown under an entry's label in the content tree: `entryTypeLabel`, except for a
+ * singleton, whose label already is its type's (`singletonLabel`). @internal Exported for tests.
  */
 export const entryTypeLine = (collections, entry) => {
     const type = findEntryType(collections, entry);

package/dist/editor/entry-search.d.ts

@@ -1,22 +1,16 @@
-/** Entry search shared by the navigator filter and the quick-open palette. */
-export interface SearchableEntry {
+/** Entry search and the detail line shared by the content tree's rows. */
+/** Case-insensitive substring match over label, title and slug; an empty query matches everything. */
+export declare function matchesEntryQuery(entry: {
     label: string;
     /** The entry's title, when its label is something else (a singleton's type label). */
     title?: string;
     slug?: string;
-    collectionPath?: string;
-    collectionName?: string;
-}
-/** Case-insensitive substring match over label, title and slug; an empty query matches everything. */
-export declare function matchesEntryQuery(entry: Pick<SearchableEntry, 'label' | 'title' | 'slug'>, query: string): boolean;
-export declare function filterEntries<T extends SearchableEntry>(entries: readonly T[], query: string): T[];
-export interface EntryGroup<T> {
-    heading: string;
-    entries: T[];
-}
+}, query: string): boolean;
 /**
- * Groups entries by collection, in first-seen order, each under its display heading:
- * `labelFor(collectionPath)`, else the collection name or path, else `Root`. Two collections
- * that share a heading stay separate groups.
+ * An entry's detail line, "type · route", with whichever of the two it has: a singleton's label
+ * already names its type, and an entry with no page has no route.
  */
-export declare function groupEntriesByCollection<T extends SearchableEntry>(entries: readonly T[], labelFor?: (collectionPath: string) => string | undefined): EntryGroup<T>[];
+export declare const entryDetailLine: ({ typeLabel, route, }: {
+    typeLabel?: string;
+    route?: string;
+}) => string;

package/dist/editor/entry-search.js

@@ -1,4 +1,4 @@
-/** Entry search shared by the navigator filter and the quick-open palette. */
+/** Entry search and the detail line shared by the content tree's rows. */
 /** Case-insensitive substring match over label, title and slug; an empty query matches everything. */
 export function matchesEntryQuery(entry, query) {
     const needle = query.trim().toLowerCase();
@@ -6,28 +6,8 @@ export function matchesEntryQuery(entry, query) {
         return true;
     return [entry.label, entry.title, entry.slug].some((text) => text?.toLowerCase().includes(needle));
 }
-export function filterEntries(entries, query) {
-    return entries.filter((entry) => matchesEntryQuery(entry, query));
-}
 /**
- * Groups entries by collection, in first-seen order, each under its display heading:
- * `labelFor(collectionPath)`, else the collection name or path, else `Root`. Two collections
- * that share a heading stay separate groups.
+ * An entry's detail line, "type · route", with whichever of the two it has: a singleton's label
+ * already names its type, and an entry with no page has no route.
  */
-export function groupEntriesByCollection(entries, labelFor) {
-    const groups = new Map();
-    for (const entry of entries) {
-        const key = entry.collectionPath ?? entry.collectionName ?? '';
-        const group = groups.get(key);
-        if (group) {
-            group.entries.push(entry);
-            continue;
-        }
-        const heading = (entry.collectionPath ? labelFor?.(entry.collectionPath) : undefined) ??
-            entry.collectionName ??
-            entry.collectionPath ??
-            'Root';
-        groups.set(key, { heading, entries: [entry] });
-    }
-    return [...groups.values()];
-}
+export const entryDetailLine = ({ typeLabel, route, }) => [typeLabel, route].filter(Boolean).join(' · ');

package/dist/editor/hooks/useBranchManager.d.ts

@@ -55,7 +55,7 @@ interface BranchSummary {
     /**
      * Server-computed: content writes are rejected, because the branch is the
      * read-only base branch OR its status is past 'editing'. `readOnly` still
-     * says WHICH, for banner copy.
+     * says WHICH, for the status copy.
      */
     writeBlocked: boolean;
     /**
@@ -90,10 +90,14 @@ export interface UseBranchManagerReturn {
     currentBranch: BranchListItem | undefined;
     /** The listing failed and nothing earlier stands in for it. */
     branchesLoadFailed: boolean;
+    /** A listing has arrived, so a branch missing from it is not still loading. */
+    branchesLoaded: boolean;
     /** Shows a branch the server just created before any listing includes it. */
     addCreatedBranch: (branch: BranchListItem) => void;
-    handleSubmit: (branchName: string) => Promise<void>;
-    handleWithdraw: (branchName: string) => Promise<void>;
+    /** Confirms first; the dialog returns focus to `returnFocusTo()` when given, else its opener. */
+    handleSubmit: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
+    /** Confirms first; the dialog returns focus to `returnFocusTo()` when given, else its opener. */
+    handleWithdraw: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
     handleRequestChanges: (branchName: string) => Promise<void>;
     handleDelete: (branchName: string) => Promise<void>;
     handleReloadBranchData: () => Promise<void>;

package/dist/editor/hooks/useBranchManager.js

@@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
 import { Alert, Stack, Text } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { openConfirm } from '../utils/confirm-modal.js';
+import { focusReturnProps } from '../utils/focus-return.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { notifications } from '@mantine/notifications';
 import { useApiClient } from '../context/index.js';
@@ -71,7 +72,7 @@ const confirmModalHandlers = (onConfirm, onDismiss) => {
  * With `unsaved` edits on the branch, the dialog says they are left out: a submit sends only what
  * is saved, and the branch is read-only in review, so they wait as drafts until it is editable.
  */
-const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss) => {
+const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss, returnFocusTo) => {
     const leftOut = unsaved && unsaved.count > 0 ? unsaved : undefined;
     openConfirm({
         title: EDITOR_ACTIONS.submitForReview,
@@ -82,6 +83,7 @@ const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss) => {
         },
         confirmProps: { color: 'brand', 'data-testid': 'confirm-submit-branch' },
         ...confirmModalHandlers(onConfirm, onDismiss),
+        ...focusReturnProps(returnFocusTo),
     });
 };
 /**
@@ -102,7 +104,7 @@ export function withdrawPullRequestBullet(pr) {
         return `Leave the merged ${label} as it is`;
     return `Convert ${label} to a draft`;
 }
-const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss) => {
+const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss, returnFocusTo) => {
     const bullets = [
         withdrawPullRequestBullet(pr),
         'Change the branch status back to "editing"',
@@ -114,6 +116,7 @@ const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss) => {
         labels: { confirm: EDITOR_ACTIONS.withdrawFromReview, cancel: 'Cancel' },
         confirmProps: { color: 'orange', 'data-testid': 'confirm-withdraw-branch' },
         ...confirmModalHandlers(onConfirm, onDismiss),
+        ...focusReturnProps(returnFocusTo),
     });
 };
 const showRequestChangesConfirmation = (branchName, onConfirm, onDismiss) => {
@@ -317,11 +320,11 @@ export function useBranchManager(options) {
                 // (see Editor.tsx's `branchContentLocked` for the full rationale, which
                 // applies identically here).
                 isProtected: b.isProtected ?? true,
-                // NOT flipped to `?? true`: `readOnly` only selects WHICH lock banner
-                // to show (base-branch read-only vs. status lock) once something is
+                // NOT flipped to `?? true`: `readOnly` only selects WHICH lock the status
+                // names (base-branch read-only vs. status lock) once something is
                 // already known to be locked via `writeBlocked`/`submitBlocked` --
                 // it never gates a write by itself. Defaulting it true on missing data
-                // would mislabel a status lock as a base-branch lock (wrong banner
+                // would mislabel a status lock as a base-branch lock (wrong status
                 // copy), not under-lock anything, so `?? false` stays correct here.
                 readOnly: b.readOnly ?? false,
                 writeBlocked: b.writeBlocked ?? true,
@@ -407,7 +410,7 @@ export function useBranchManager(options) {
         }
         notifications.show({ message: err instanceof Error ? err.message : fallback, color: 'red' });
     };
-    const handleSubmit = (requested) => {
+    const handleSubmit = (requested, returnFocusTo) => {
         const branchNameToSubmit = listedName(requested);
         return singleFlight('submit', branchNameToSubmit, async () => {
             // Drafts belong to the open branch, so only its submit can leave edits behind. Without
@@ -464,11 +467,11 @@ export function useBranchManager(options) {
                 }, 
                 // Dismissal is not an error: the call sites log rejections to the console. Settled
                 // once, by onCancel OR onClose, so an Escape/overlay dismissal can't leave this pending.
-                () => resolve());
+                () => resolve(), returnFocusTo);
             });
         });
     };
-    const handleWithdraw = (requested) => {
+    const handleWithdraw = (requested, returnFocusTo) => {
         const branchNameToWithdraw = listedName(requested);
         return singleFlight('withdraw', branchNameToWithdraw, () => new Promise((resolve, reject) => {
             showWithdrawConfirmation(branchNameToWithdraw, pullRequestOf(branchNameToWithdraw), async () => {
@@ -491,7 +494,7 @@ export function useBranchManager(options) {
                 finally {
                     options.setBusy(false);
                 }
-            }, () => resolve());
+            }, () => resolve(), returnFocusTo);
         }));
     };
     const handleRequestChanges = (branchNameForChanges) => singleFlight('request-changes', branchNameForChanges, () => new Promise((resolve) => {
@@ -605,6 +608,7 @@ export function useBranchManager(options) {
         branchSummaries,
         currentBranch,
         branchesLoadFailed: !!branchesError && !branchesData,
+        branchesLoaded: !!branchesData,
         addCreatedBranch,
         handleSubmit,
         handleWithdraw,

package/dist/editor/hooks/useEntryManager.d.ts

@@ -3,6 +3,7 @@ import type { EditorEntry, EditorCollection } from '../Editor.js';
 import type { LogicalPath } from '../../paths/types.js';
 import type { FormValue } from '../FormRenderer.js';
 import type { EntryFieldError } from '../../validation/entry-validator.js';
+import type { BranchBarStatus } from '../branch-lock.js';
 /** @internal Exported for tests. */
 export declare const RESTORED_ENTRY_GONE_MESSAGE = "The entry you returned to is no longer on this branch, so the home page opened.";
 /** @internal Exported for tests. */
@@ -39,6 +40,8 @@ export interface UseEntryManagerOptions {
     /** An entry's route on the site (`buildPreviewRoute`), which picks the home page to open first. */
     resolvePreviewRoute?: (entry: EditorEntry) => string | undefined;
     setBusy: (busy: boolean) => void;
+    /** The bar's row: a failed load is toasted after 'loading' ends, and never on 'not-available'. */
+    branchBarState?: BranchBarStatus['value'];
     /** Switches to the branch a Back or Forward reached; rejects when the switch does not happen. */
     switchBranch?: (branch: string) => Promise<void>;
     /** Called when a Back or Forward has opened another entry. */

package/dist/editor/hooks/useEntryManager.js

@@ -11,6 +11,7 @@ import { entriesKey, fetchEntriesAndSchema } from './useEntriesData.js';
 import { RetryToastMessage } from '../components/RetryToastMessage.js';
 import { isGatewayFailure, isUnanswered, MayHaveLandedError, UnansweredError } from '../unanswered.js';
 import { sanitizeBranchName } from '../../paths/branch-name.js';
+import { isApiTimeoutError } from '../../api/client.js';
 import { markEditorHistoryStart, recordHistoryMove, undoHistoryMove, writeEditorUrl, } from './editor-history.js';
 const ENTRIES_LOAD_FAILED_TOAST_ID = 'canopy-entries-load-failed';
 /** @internal Exported for tests. */
@@ -706,12 +707,14 @@ export function useEntryManager(options) {
     // to a branch that fails again still reports.
     const notifiedErrorBranchRef = useRef(null);
     useEffect(() => {
-        if (!entriesError || !options.branchName) {
+        if (!entriesError || !options.branchName || options.branchBarState === 'not-available') {
             if (notifiedErrorBranchRef.current !== null)
                 notifications.hide(ENTRIES_LOAD_FAILED_TOAST_ID);
             notifiedErrorBranchRef.current = null;
             return;
         }
+        if (options.branchBarState === 'loading')
+            return;
         if (notifiedErrorBranchRef.current === options.branchName)
             return;
         const branch = options.branchName;
@@ -722,8 +725,12 @@ export function useEntryManager(options) {
         notifications.show({
             id: ENTRIES_LOAD_FAILED_TOAST_ID,
             title: 'Could not load content',
+            // A timeout's message is written for people; any other is a diagnostic, kept for Details.
             message: createElement(RetryToastMessage, {
-                message: getErrorMessage(entriesError),
+                message: isApiTimeoutError(entriesError)
+                    ? entriesError.message
+                    : "The editor couldn't fetch this branch's entries.",
+                details: isApiTimeoutError(entriesError) ? undefined : getErrorMessage(entriesError),
                 onRetry: () => {
                     notifications.hide(ENTRIES_LOAD_FAILED_TOAST_ID);
                     notifiedErrorBranchRef.current = null;
@@ -733,7 +740,7 @@ export function useEntryManager(options) {
             color: 'red',
             autoClose: false,
         });
-    }, [entriesError, options.branchName]);
+    }, [entriesError, options.branchName, options.branchBarState]);
     // Validate selected entry when entries change
     useEffect(() => {
         if (selectedPath)

package/dist/editor/shell/ActivityRail.d.ts

@@ -26,10 +26,14 @@ export interface RailButtonProps extends Omit<ComponentPropsWithoutRef<'button'>
     shortcut?: string;
     /** A count badge, hidden at zero; the label should say it too. */
     count?: number;
+    /** A mark at the button's top-right corner, such as an unsaved dot; the label should say it too. */
+    corner?: ReactNode;
     countTestId?: string;
     tooltipDisabled?: boolean;
     /** Disables the button, which stays focusable, and its tooltip gives this reason instead. */
     disabledReason?: string;
 }
+/** Sets the buttons after it apart. It carries no `data-rail-item`, so the arrow keys skip it. */
+export declare function RailDivider(): import("react/jsx-runtime").JSX.Element;
 /** A rail button: icon only, named by `label`, which its tooltip repeats on hover and focus. */
 export declare const RailButton: React.ForwardRefExoticComponent<RailButtonProps & React.RefAttributes<HTMLButtonElement>>;