canopycms 0.1.0 → 0.2.0-int.121

package/dist/editor/components/EditorHeader.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, Tooltip } from '@mantine/core';
 import { clientOperatingStrategy } from '../../operating-mode/client.js';
 import { isAdmin, isLockedOutOfBranch, isReviewer } from '../../authorization/helpers.js';
-import { branchStatusPresentation } from '../branch-status.js';
+import { branchBarStatusPresentation } from '../branch-status.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { SYSTEM_USER_ID } from '../../system-users.js';
 import { TopBar } from '../shell/TopBar.js';
-import { branchLockState } from './BranchLockBanner.js';
+import { describeBranchLock } from './BranchLockBanner.js';
 import { BranchPill } from './BranchPill.js';
 import { EntryBreadcrumb } from './EntryBreadcrumb.js';
 import { SaveSplitButton } from './SaveSplitButton.js';
@@ -14,24 +14,9 @@ import { SaveSplitButton } from './SaveSplitButton.js';
  * 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 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 = false, savedSignal, savedHere = false, entryListFailed = false, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, }) {
-    const { statusLocked, branchDataUnavailable } = branchLockState({
-        branchStatus,
-        branchReadOnly,
-        branchWriteBlocked,
-    });
-    // Why the branch takes no writes, with the way forward; shared by Save, Save all and the chip.
-    const branchLockReason = branchReadOnly
-        ? 'The base branch is read-only. Create a branch to make changes.'
-        : branchDataUnavailable
-            ? 'Branch details could not be loaded. Use "Switch branch…" to retry.'
-            : statusLocked
-                ? branchStatus === 'submitted'
-                    ? 'This branch is in review. Withdraw it to make changes.'
-                    : branchStatus === 'approved'
-                        ? 'This branch is approved. Withdraw it to make changes.'
-                        : `This branch is ${branchStatus}. Its content is read-only.`
-                : undefined;
+export function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving = false, savedSignal, savedHere = false, entryListFailed = false, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, }) {
+    // Shared by Save and Save all; set exactly when BranchLockBanner renders.
+    const branchLockReason = describeBranchLock({ branchStatus, branchReadOnly, branchWriteBlocked });
     const entryLockReason = entryReadOnly
         ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."
         : undefined;
@@ -42,7 +27,7 @@ export function EditorHeader({ currentEntry, branchName, operatingMode, busy, br
             : !currentEntry
                 ? 'Open an entry to save it.'
                 : (entryLockReason ?? (!hasUnsavedChanges ? 'No changes to save.' : '')));
-    const presentation = branchStatusPresentation(branchStatus, branchIsProtected);
+    const presentation = branchBarStatusPresentation(branchStatus, branchIsProtected);
     const status = !branchLoading &&
         clientOperatingStrategy(operatingMode ?? 'prod').supportsStatusBadge() &&
         presentation
@@ -52,16 +37,17 @@ export function EditorHeader({ currentEntry, branchName, operatingMode, busy, br
             testId: `header-status-badge-${branchIsProtected ? 'protected' : branchStatus}`,
         }
         : undefined;
-    return (_jsx(TopBar, { leading: _jsx(EntryBreadcrumb, { segments: breadcrumbSegments, entryLabel: currentEntry ? (currentEntry.label ?? currentEntry.slug) : undefined, entryDirty: hasUnsavedChanges, readOnlyReason: branchLoading
-                ? undefined
-                : currentEntry || branchName
-                    ? (branchLockReason ?? entryLockReason)
-                    : undefined, onAllContent: onNavigatorOpen, onCollection: onCollectionOpen, onRefresh: onFileReload, onDiscard: onFileDiscardDraft, 
+    return (_jsx(TopBar, { leading: _jsx(EntryBreadcrumb, { segments: breadcrumbSegments, entryLabel: currentEntry ? (currentEntry.label ?? currentEntry.slug) : undefined, entryDirty: hasUnsavedChanges, 
+            // BranchLockBanner already says why a locked branch is read-only, so the chip carries
+            // only the entry's own reason, even beside the banner: "Withdraw it" would not unlock it.
+            readOnlyReason: branchLoading ? undefined : currentEntry || branchName ? entryLockReason : undefined, onCollection: onCollectionOpen, onRefresh: onFileReload, onDiscard: onFileDiscardDraft, 
             // A path rule's refusal hides them, as the content tree hides that entry's "…" menu.
-            onRename: entryReadOnly ? undefined : onEntryRename, onDelete: entryReadOnly ? undefined : onEntryDelete, refreshBlockedReason: branchName ? undefined : 'Open a branch first.', discardBlockedReason: entryHasDraft ? undefined : 'This entry has no unsaved changes.', changeBlockedReason: branchLockReason ??
+            onRename: entryReadOnly ? undefined : onEntryRename, 
+            // An entry with a page has a preview `src`; one without changes only its slug.
+            entryNoPage: !!currentEntry && !currentEntry.previewSrc, onDelete: entryReadOnly ? undefined : onEntryDelete, refreshBlockedReason: branchName ? undefined : 'Open a branch first.', discardBlockedReason: entryHasDraft ? undefined : 'This entry has no unsaved changes.', changeBlockedReason: branchLockReason ??
                 (entryUnavailable
                     ? "This entry's content type isn't known to this editor version yet. Reload in a few minutes."
-                    : undefined), entryMenuRef: navigatorToggleRef, allContentRef: allContentRef }), trailing: _jsxs(_Fragment, { children: [_jsx(BranchPill, { branchName: branchName, loading: busy, status: status, unsavedCount: modifiedCount, unsavedEntries: editedFiles, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, onEntrySelect: onEntrySelect, pillRef: branchToggleRef }), _jsx(WorkflowButton, { branchName: branchName, busy: busy, branchStatus: branchStatus, userContext: userContext, branchCreatedBy: branchCreatedBy, branchAccess: branchAccess, branchIsProtected: branchIsProtected, onSubmit: onSubmit, onWithdraw: onWithdraw, savingAll: !!saveAllProgress }), _jsx(SaveSplitButton, { onSave: onSave, saveBlockedReason: saveBlockedReason, busy: busy, onSaveAll: onSaveAll, unsavedCount: modifiedCount, saveAllBlockedReason: branchLockReason ??
+                    : undefined), entryMenuRef: navigatorToggleRef }), trailing: _jsxs(_Fragment, { children: [_jsx(BranchPill, { branchName: branchName, loading: busy, status: status, unsavedCount: modifiedCount, unsavedEntries: editedFiles, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, onEntrySelect: onEntrySelect, pillRef: branchToggleRef }), _jsx(WorkflowButton, { branchName: branchName, busy: busy, branchStatus: branchStatus, userContext: userContext, branchCreatedBy: branchCreatedBy, branchAccess: branchAccess, branchIsProtected: branchIsProtected, onSubmit: onSubmit, onWithdraw: onWithdraw, savingAll: !!saveAllProgress }), _jsx(SaveSplitButton, { onSave: onSave, saveBlockedReason: saveBlockedReason, busy: busy, onSaveAll: onSaveAll, unsavedCount: modifiedCount, saveAllBlockedReason: branchLockReason ??
                         (!branchName
                             ? 'Open a branch first.'
                             : entryListFailed && modifiedCount > 0

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

@@ -1,13 +1,12 @@
 import { type ReactElement, type Ref } from 'react';
 import type { PaneArrangement } from '../shell/PaneLayout.js';
 export interface EditorRailProps {
-    siteTitle: string;
-    /** Opens the site's first entry, which is also what the editor opens with no entry asked for. */
-    onHomeOpen: () => void;
     contentPanelOpen: boolean;
     /** The content panel's element id, for `aria-controls`. */
     contentPanelId: string;
     onContentToggle: () => void;
+    /** The Content button, which takes focus when the open entry it was reached from is gone. */
+    contentToggleRef?: Ref<HTMLButtonElement>;
     onQuickOpen: () => void;
     /** The quick open shortcut as the platform writes it, such as "⌘P". */
     quickOpenShortcut: string;
@@ -46,4 +45,4 @@ export declare function SettingsMenu({ items, toggleRef, }: {
     toggleRef?: Ref<HTMLButtonElement>;
 }): import("react/jsx-runtime").JSX.Element | null;
 /** The editor's activity rail: what `ActivityRail` lays out, wired to the editor's surfaces. */
-export declare function EditorRail({ siteTitle, onHomeOpen, contentPanelOpen, contentPanelId, onContentToggle, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }: EditorRailProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorRail({ contentPanelOpen, contentPanelId, onContentToggle, contentToggleRef, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }: EditorRailProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EditorRail.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { ActionIcon, Menu, Stack, Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { ActionIcon, Menu, Stack, Tooltip, VisuallyHidden } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import { IconActivity, IconExternalLink, IconFiles, IconGitBranch, IconInfoCircle, IconLayoutColumns, IconLayoutRows, IconLogout, IconMessageCircle, IconPhoto, IconSearch, IconSettings, IconUserCircle, } from '@tabler/icons-react';
 import { ActivityRail, RailButton } from '../shell/ActivityRail.js';
@@ -40,9 +40,8 @@ function LayoutButton({ layout, onChange, blocked = false, }) {
                     setSwitchedTo(LAYOUTS[other].title);
                 } }), _jsx(VisuallyHidden, { role: "status", "data-testid": "rail-layout-status", children: switchedTo })] }));
 }
-const monogram = (title) => Array.from(title.trim())[0]?.toUpperCase() ?? '?';
 /** The editor's activity rail: what `ActivityRail` lays out, wired to the editor's surfaces. */
-export function EditorRail({ siteTitle, onHomeOpen, contentPanelOpen, contentPanelId, onContentToggle, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }) {
+export function EditorRail({ contentPanelOpen, contentPanelId, onContentToggle, contentToggleRef, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }) {
     const adminItems = [
         onPermissionManagerOpen && (_jsx(Menu.Item, { "data-testid": "settings-menu-permissions", onClick: onPermissionManagerOpen, children: "Manage permissions" }, "permissions")),
         onGroupManagerOpen && (_jsx(Menu.Item, { "data-testid": "settings-menu-groups", onClick: onGroupManagerOpen, children: "Manage groups" }, "groups")),
@@ -61,5 +60,5 @@ export function EditorRail({ siteTitle, onHomeOpen, contentPanelOpen, contentPan
         _jsxs(Menu.Item, { component: "a", href: ABOUT_URL, target: "_blank", rel: "noopener noreferrer", "data-testid": "settings-menu-about", leftSection: _jsx(IconInfoCircle, { size: 14 }), rightSection: _jsx(IconExternalLink, { size: 14, "aria-hidden": true }), children: ["About CanopyCMS", _jsx(VisuallyHidden, { component: "span", children: " (opens in a new tab)" })] }, "about"),
     ];
     const commentsLabel = unresolvedCommentCount > 0 ? `Comments, ${unresolvedCommentCount} unresolved` : 'Comments';
-    return (_jsx(ActivityRail, { top: _jsxs(_Fragment, { children: [_jsx(RailButton, { railId: "home", label: `Open the first entry of ${siteTitle}`, icon: _jsx(Text, { component: "span", fw: 700, size: "md", "aria-hidden": true, children: monogram(siteTitle) }), tinted: true, "data-testid": "rail-home-button", onClick: onHomeOpen }), _jsx(RailButton, { railId: "content", label: "Content", icon: _jsx(IconFiles, { size: 20 }), active: contentPanelOpen, "aria-expanded": contentPanelOpen, "aria-controls": contentPanelOpen ? contentPanelId : undefined, "data-testid": "content-panel-toggle", onClick: onContentToggle }), _jsx(RailButton, { railId: "search", label: EDITOR_ACTIONS.openEntry, shortcut: quickOpenShortcut, "aria-keyshortcuts": quickOpenKeys, icon: _jsx(IconSearch, { size: 20 }), "aria-haspopup": "dialog", "data-testid": "rail-search-button", onClick: onQuickOpen }), _jsx(RailButton, { railId: "branches", label: "Branches", icon: _jsx(IconGitBranch, { size: 20 }), active: branchesOpen, "aria-haspopup": "dialog", "data-testid": "rail-branches-button", onClick: onBranchesOpen }), onCommentsOpen && (_jsx(RailButton, { railId: "comments", label: commentsLabel, icon: _jsx(IconMessageCircle, { size: 20 }), active: commentsOpen, count: unresolvedCommentCount, countTestId: "comments-unresolved-count", "aria-haspopup": "dialog", "data-testid": "comments-button", onClick: onCommentsOpen })), _jsx(RailButton, { railId: "media", label: "Media library", icon: _jsx(IconPhoto, { size: 20 }), active: mediaLibraryOpen, "aria-haspopup": "dialog", "data-testid": "media-library-button", ref: mediaButtonRef, onClick: onMediaLibraryOpen })] }), bottom: _jsxs(_Fragment, { children: [_jsx(LayoutButton, { layout: layout, onChange: onLayoutChange, blocked: layoutBlocked }), _jsx(SettingsMenu, { items: settingsItems, toggleRef: settingsToggleRef })] }), account: AccountComponent ? (_jsx(AccountComponent, {})) : onAccountClick || onLogoutClick ? (_jsxs(Stack, { gap: 6, align: "center", children: [onAccountClick && (_jsx(Tooltip, { label: "Account", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Account", onClick: onAccountClick, children: _jsx(IconUserCircle, { size: 20 }) }) })), onLogoutClick && (_jsx(Tooltip, { label: "Sign out", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Sign out", onClick: onLogoutClick, children: _jsx(IconLogout, { size: 20 }) }) }))] })) : undefined }));
+    return (_jsx(ActivityRail, { top: _jsxs(_Fragment, { children: [_jsx(RailButton, { railId: "content", label: "Content", icon: _jsx(IconFiles, { size: 20 }), active: contentPanelOpen, "aria-expanded": contentPanelOpen, "aria-controls": contentPanelOpen ? contentPanelId : undefined, "data-testid": "content-panel-toggle", ref: contentToggleRef, onClick: onContentToggle }), _jsx(RailButton, { railId: "search", label: EDITOR_ACTIONS.openEntry, shortcut: quickOpenShortcut, "aria-keyshortcuts": quickOpenKeys, icon: _jsx(IconSearch, { size: 20 }), "aria-haspopup": "dialog", "data-testid": "rail-search-button", onClick: onQuickOpen }), _jsx(RailButton, { railId: "branches", label: "Branches", icon: _jsx(IconGitBranch, { size: 20 }), active: branchesOpen, "aria-haspopup": "dialog", "data-testid": "rail-branches-button", onClick: onBranchesOpen }), onCommentsOpen && (_jsx(RailButton, { railId: "comments", label: commentsLabel, icon: _jsx(IconMessageCircle, { size: 20 }), active: commentsOpen, count: unresolvedCommentCount, countTestId: "comments-unresolved-count", "aria-haspopup": "dialog", "data-testid": "comments-button", onClick: onCommentsOpen })), _jsx(RailButton, { railId: "media", label: "Media library", icon: _jsx(IconPhoto, { size: 20 }), active: mediaLibraryOpen, "aria-haspopup": "dialog", "data-testid": "media-library-button", ref: mediaButtonRef, onClick: onMediaLibraryOpen })] }), bottom: _jsxs(_Fragment, { children: [_jsx(LayoutButton, { layout: layout, onChange: onLayoutChange, blocked: layoutBlocked }), _jsx(SettingsMenu, { items: settingsItems, toggleRef: settingsToggleRef })] }), account: AccountComponent ? (_jsx(AccountComponent, {})) : onAccountClick || onLogoutClick ? (_jsxs(Stack, { gap: 6, align: "center", children: [onAccountClick && (_jsx(Tooltip, { label: "Account", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Account", onClick: onAccountClick, children: _jsx(IconUserCircle, { size: 20 }) }) })), onLogoutClick && (_jsx(Tooltip, { label: "Sign out", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Sign out", onClick: onLogoutClick, children: _jsx(IconLogout, { size: 20 }) }) }))] })) : undefined }));
 }

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

@@ -7,27 +7,26 @@ export interface EntryBreadcrumbProps {
     entryLabel: string | undefined;
     /** The open entry has unsaved changes. */
     entryDirty: boolean;
-    /** Why the open entry or its branch is read-only; set, the "Read-only" chip shows. */
+    /** Why the open entry is read-only; set, the "Read-only" chip shows. */
     readOnlyReason?: string;
-    onAllContent: () => void;
     onCollection: (collectionPath: string) => void;
     onRefresh: () => void;
     onDiscard: () => void;
-    /** With `onDelete`, offers "Rename…" and "Delete entry"; absent where a path rule refuses them. */
+    /** With `onDelete`, offers "Change URL…" and "Delete entry"; absent where a path rule refuses them. */
     onRename?: () => void;
+    /** The entry has no page on the site, so "Change URL…" reads "Change slug…". */
+    entryNoPage?: boolean;
     onDelete?: () => void;
     refreshBlockedReason?: string;
     discardBlockedReason?: string;
-    /** Why the entry can't be renamed or deleted now. */
+    /** Why the entry's URL can't be changed, or the entry deleted, now. */
     changeBlockedReason?: string;
     /** The entry menu's trigger, which stands in for a menu item that opened something. */
     entryMenuRef?: Ref<HTMLButtonElement>;
-    /** The "All content" crumb, where focus goes once the open entry is gone. */
-    allContentRef?: Ref<HTMLButtonElement>;
 }
 /**
- * Where the open entry sits: "All content" opens the content panel, a collection crumb reveals
- * that collection in it, and the entry's own crumb is current and opens the entry menu. Crumbs
- * shrink and truncate before the entry's own does.
+ * Where the open entry sits: a collection crumb reveals that collection in the content panel, and
+ * the entry's own crumb is current and opens the entry menu. Crumbs shrink and truncate before the
+ * entry's own does.
  */
-export declare function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onAllContent, onCollection, onRefresh, onDiscard, onRename, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, allContentRef, }: EntryBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onCollection, onRefresh, onDiscard, onRename, entryNoPage, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, }: EntryBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryBreadcrumb.js

@@ -7,6 +7,7 @@ import { IconChevronDown, IconChevronRight, IconLock } 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';
 /** Whether the element's text is cut short, kept current as it resizes. */
 function useTruncated(label) {
@@ -29,17 +30,17 @@ const crumbText = (label, ref) => (_jsx(Text, { ref: ref, span: true, inherit: t
 function CrumbTooltip({ label, truncated, children, }) {
     return (_jsx(Tooltip, { label: label, disabled: !truncated, events: { hover: true, focus: true, touch: false }, children: children }));
 }
-function CollectionCrumb({ label, onClick, buttonRef, }) {
+function CollectionCrumb({ label, onClick }) {
     const [ref, truncated] = useTruncated(label);
-    return (_jsx(CrumbTooltip, { label: label, truncated: truncated, children: _jsx(Button, { ref: buttonRef, variant: "subtle", color: "gray", size: "compact-sm", fw: 400, miw: 0, maw: 180, onClick: onClick, "data-testid": "breadcrumb-segment", styles: { label: { minWidth: 0 } }, children: crumbText(label, ref) }) }));
+    return (_jsx(CrumbTooltip, { label: label, truncated: truncated, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", fw: 400, miw: 0, maw: 180, onClick: onClick, "data-testid": "breadcrumb-segment", styles: { label: { minWidth: 0 } }, children: crumbText(label, ref) }) }));
 }
 const separator = (_jsx(IconChevronRight, { size: 14, "aria-hidden": "true", style: { flexShrink: 0, color: 'var(--mantine-color-dimmed)' } }));
 /**
- * Where the open entry sits: "All content" opens the content panel, a collection crumb reveals
- * that collection in it, and the entry's own crumb is current and opens the entry menu. Crumbs
- * shrink and truncate before the entry's own does.
+ * Where the open entry sits: a collection crumb reveals that collection in the content panel, and
+ * the entry's own crumb is current and opens the entry menu. Crumbs shrink and truncate before the
+ * entry's own does.
  */
-export function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onAllContent, onCollection, onRefresh, onDiscard, onRename, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, allContentRef, }) {
+export function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onCollection, onRefresh, onDiscard, onRename, entryNoPage = false, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, }) {
     const trigger = useRef(null);
     const triggerRef = useMergedRef(trigger, entryMenuRef);
     const menuFocus = useMenuItemFocusReturn(trigger);
@@ -48,9 +49,5 @@ export function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReas
                 // Clips crumbs that overflow, padded by the focus ring's reach so the ring is not clipped.
                 style: { flex: '0 1 auto', overflow: 'hidden', padding: 4, margin: -4 }, children: _jsxs(Group, { component: "ol", gap: 2, wrap: "nowrap", miw: 0, style: { listStyle: 'none', margin: 0, padding: 0 }, children: [segments.map((segment, index) => (_jsxs(Group, { component: "li", gap: 2, wrap: "nowrap", miw: 0, 
                             // Collections give up their width long before the entry's own crumb does.
-                            style: { flex: '0 100 auto' }, children: [index > 0 && separator, segment.folder ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, miw: 0, truncate: "end", children: segment.label })) : (_jsx(CollectionCrumb, { label: segment.label, buttonRef: index === 0 ? allContentRef : undefined, onClick: () => segment.collectionPath ? onCollection(segment.collectionPath) : onAllContent() }))] }, `${segment.label}-${index}`))), _jsxs(Group, { component: "li", gap: 2, wrap: "nowrap", miw: 64, style: { flex: '0 1 auto' }, children: [separator, entryLabel === undefined ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, "data-testid": "file-dropdown-button", children: "No entry open" })) : (_jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-start", ...menuFocus.menu, children: [_jsx(CrumbTooltip, { label: entryLabel, truncated: entryTruncated, children: _jsx(Menu.Target, { children: _jsxs(Button, { ref: triggerRef, variant: "subtle", color: "gray", size: "compact-sm", fw: 600, miw: 0, maw: "100%", "aria-current": "page", rightSection: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), "data-testid": "file-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [crumbText(entryLabel, entryLabelRef), entryDirty && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "span", "aria-hidden": "true", w: 8, h: 8, style: {
-                                                                        borderRadius: '50%',
-                                                                        flexShrink: 0,
-                                                                        background: 'var(--mantine-color-text)',
-                                                                    }, "data-testid": "entry-unsaved-dot" }), _jsx(VisuallyHidden, { component: "span", children: ", unsaved changes" })] }))] }) }) }), _jsxs(Menu.Dropdown, { ...menuFocus.dropdown, children: [_jsx(ReasonedMenuItem, { onClick: onRefresh, blockedReason: refreshBlockedReason, "data-testid": "refresh-entry-menu-item", children: EDITOR_ACTIONS.refreshFromServer }), _jsx(ReasonedMenuItem, { "data-testid": "discard-file-draft-menu-item", onClick: onDiscard, blockedReason: discardBlockedReason, children: "Discard changes" }), onRename && onDelete && (_jsxs(_Fragment, { children: [_jsx(Menu.Divider, {}), _jsx(ReasonedMenuItem, { onClick: onRename, blockedReason: changeBlockedReason, "data-testid": "entry-menu-rename", children: "Rename\u2026" }), _jsx(DestructiveMenuItem, { onClick: onDelete, blockedReason: changeBlockedReason, "data-testid": "entry-menu-delete", children: "Delete entry" })] }))] })] }))] })] }) }), readOnlyReason && (_jsx(Tooltip, { label: readOnlyReason, multiline: true, maw: 300, children: _jsxs(Badge, { variant: "light", color: "gray", radius: "sm", leftSection: _jsx(IconLock, { size: 12, "aria-hidden": "true" }), style: { flexShrink: 0, textTransform: 'none' }, "data-testid": "read-only-chip", children: ["Read-only", _jsxs(VisuallyHidden, { component: "span", children: [". ", readOnlyReason] })] }) }))] }));
+                            style: { flex: '0 100 auto' }, children: [index > 0 && separator, segment.folder ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, miw: 0, truncate: "end", children: segment.label })) : (_jsx(CollectionCrumb, { label: segment.label, onClick: () => onCollection(segment.collectionPath) }))] }, `${segment.label}-${index}`))), _jsxs(Group, { component: "li", gap: 2, wrap: "nowrap", miw: 64, style: { flex: '0 1 auto' }, children: [segments.length > 0 && separator, entryLabel === undefined ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, "data-testid": "file-dropdown-button", children: "No entry open" })) : (_jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-start", ...menuFocus.menu, children: [_jsx(CrumbTooltip, { label: entryLabel, truncated: entryTruncated, children: _jsx(Menu.Target, { children: _jsxs(Button, { ref: triggerRef, variant: "subtle", color: "gray", size: "compact-sm", fw: 600, miw: 0, maw: "100%", "aria-current": "page", rightSection: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), "data-testid": "file-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [crumbText(entryLabel, entryLabelRef), entryDirty && (_jsxs(_Fragment, { children: [_jsx(UnsavedMark, { "aria-hidden": "true", "data-testid": "entry-unsaved-dot" }), _jsx(VisuallyHidden, { component: "span", children: ", unsaved changes" })] }))] }) }) }), _jsxs(Menu.Dropdown, { ...menuFocus.dropdown, children: [_jsx(ReasonedMenuItem, { onClick: onRefresh, blockedReason: refreshBlockedReason, "data-testid": "refresh-entry-menu-item", children: EDITOR_ACTIONS.refreshFromServer }), _jsx(ReasonedMenuItem, { "data-testid": "discard-file-draft-menu-item", onClick: onDiscard, blockedReason: discardBlockedReason, children: "Discard changes" }), onRename && onDelete && (_jsxs(_Fragment, { children: [_jsx(Menu.Divider, {}), _jsxs(ReasonedMenuItem, { onClick: onRename, blockedReason: changeBlockedReason, "data-testid": "entry-menu-rename", children: [entryNoPage ? EDITOR_ACTIONS.changeSlug : EDITOR_ACTIONS.changeUrl, "\u2026"] }), _jsx(DestructiveMenuItem, { onClick: onDelete, blockedReason: changeBlockedReason, "data-testid": "entry-menu-delete", children: "Delete entry" })] }))] })] }))] })] }) }), readOnlyReason && (_jsx(Tooltip, { label: readOnlyReason, multiline: true, maw: 300, children: _jsxs(Badge, { variant: "light", color: "gray", radius: "sm", leftSection: _jsx(IconLock, { size: 12, "aria-hidden": "true" }), style: { flexShrink: 0, textTransform: 'none' }, "data-testid": "read-only-chip", children: ["Read-only", _jsxs(VisuallyHidden, { component: "span", children: [". ", readOnlyReason] })] }) }))] }));
 }

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

@@ -0,0 +1,5 @@
+/**
+ * Says a preview link's page has no entry, so it went to a new tab: once the editor is in view, as
+ * the toast's timer runs while hidden. A blocked tab's note stays, linking the page for a new click.
+ */
+export declare const showPreviewLinkOutcome: (href: string, path: string, opened: boolean) => void;

package/dist/editor/components/PreviewLinkToast.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Anchor } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+/**
+ * Says a preview link's page has no entry, so it went to a new tab: once the editor is in view, as
+ * the toast's timer runs while hidden. A blocked tab's note stays, linking the page for a new click.
+ */
+export const showPreviewLinkOutcome = (href, path, opened) => {
+    if (!opened) {
+        notifications.show({
+            color: 'yellow',
+            autoClose: false,
+            message: (_jsxs(_Fragment, { children: [path, " has no entry here, and your browser blocked the new tab.", ' ', _jsxs(Anchor, { href: href, target: "_blank", rel: "noopener noreferrer", children: ["Open ", path] })] })),
+        });
+        return;
+    }
+    const show = () => notifications.show({
+        color: 'blue',
+        message: `${path} has no entry here, so it opened in a new tab.`,
+    });
+    setTimeout(() => {
+        if (document.visibilityState === 'visible')
+            return show();
+        const onVisible = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            document.removeEventListener('visibilitychange', onVisible);
+            show();
+        };
+        document.addEventListener('visibilitychange', onVisible);
+    }, 300);
+};

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

@@ -1,12 +1,18 @@
 /** @internal Exported for tests. Marks an overlay Mod+P may open over: the palette's own closing dialog. */
 export declare const QUICK_OPEN_REPLACES_ATTR = "data-quick-open-replaces";
-/** @internal Exported for tests and stories. */
+/** One option: an entry, with the type and route its second line shows. */
 export interface QuickOpenEntry {
     path: string;
     label: string;
+    /** The entry's title, matched by the search where the label is a singleton's type label. */
+    title?: string;
     slug?: string;
     collectionPath?: string;
     collectionName?: string;
+    /** The entry's type (`entryTypeLine`); absent for a singleton, whose label already names it. */
+    typeLabel?: string;
+    /** The entry's route on the site (`buildPreviewRoute`); absent when it has no page. */
+    route?: string;
 }
 export interface QuickOpenPaletteProps {
     opened: boolean;

package/dist/editor/components/QuickOpenPalette.js

@@ -19,6 +19,8 @@ export const QUICK_OPEN_REPLACES_ATTR = 'data-quick-open-replaces';
 const otherOverlayOpen = () => Array.from(document.querySelectorAll('[role="dialog"][aria-modal="true"]')).some((dialog) => !dialog.closest(`[${QUICK_OPEN_REPLACES_ATTR}]`));
 /** Options rendered at once; the rest are reached by typing more. */
 const MAX_OPTIONS = 50;
+/** An option's second line: its type and its route, whichever it has. */
+const detailLine = (entry) => [entry.typeLabel, entry.route].filter(Boolean).join(' · ');
 export function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionLabel, onSelect, returnFocusTo, }) {
     // `[]` ignores no tags and `true` fires from contenteditable, so the shortcut works from inside
     // a text field or the MDX editor.
@@ -62,5 +64,8 @@ export function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionL
         onSelect(path);
         onClose();
     };
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: EDITOR_ACTIONS.openEntry, size: "lg", yOffset: "10vh", returnFocus: !returnFocusTo, onExitTransitionEnd: () => returnFocusTo && focusIfIdle(returnFocusTo()), [QUICK_OPEN_REPLACES_ATTR]: true, [FOCUS_RETURN_ATTR]: true, children: _jsxs(Combobox, { store: combobox, onOptionSubmit: handleSubmit, children: [_jsx(Combobox.EventsTarget, { withExpandedAttribute: true, "data-mantine-stop-propagation": false, children: _jsx(TextInput, { role: "combobox", "aria-label": "Search entries", "aria-autocomplete": "list", placeholder: "Type an entry title or slug", leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), value: query, onChange: (event) => setQuery(event.currentTarget.value), "data-autofocus": true, "data-testid": "quick-open-input" }) }), _jsx(Combobox.Options, { mt: "sm", "aria-label": "Entries", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "scroll", scrollbars: "y", children: matches.length === 0 ? (_jsxs(Text, { size: "sm", c: "dimmed", p: "xs", "data-testid": "quick-open-empty", children: ["No entries match \u201C", query, "\u201D."] })) : (groups.map((group, index) => (_jsx(Combobox.Group, { label: group.heading || undefined, children: group.entries.map((entry) => (_jsxs(Combobox.Option, { value: entry.path, "data-testid": "quick-open-option", children: [_jsx(Highlight, { highlight: query.trim(), size: "sm", children: entry.label }), entry.slug && _jsx(Text, { size: "xs", children: entry.slug })] }, entry.path))) }, index)))) }) }), matches.length > MAX_OPTIONS && (_jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: ["Showing ", MAX_OPTIONS, " of ", matches.length, ". Keep typing to narrow the list."] }))] }) }));
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: EDITOR_ACTIONS.openEntry, size: "lg", yOffset: "10vh", returnFocus: !returnFocusTo, onExitTransitionEnd: () => returnFocusTo && focusIfIdle(returnFocusTo()), [QUICK_OPEN_REPLACES_ATTR]: true, [FOCUS_RETURN_ATTR]: true, children: _jsxs(Combobox, { store: combobox, onOptionSubmit: handleSubmit, children: [_jsx(Combobox.EventsTarget, { withExpandedAttribute: true, "data-mantine-stop-propagation": false, children: _jsx(TextInput, { role: "combobox", "aria-label": "Search entries", "aria-autocomplete": "list", placeholder: "Type an entry title or slug", leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), value: query, onChange: (event) => setQuery(event.currentTarget.value), "data-autofocus": true, "data-testid": "quick-open-input" }) }), _jsx(Combobox.Options, { mt: "sm", "aria-label": "Entries", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "scroll", scrollbars: "y", children: matches.length === 0 ? (_jsxs(Text, { size: "sm", c: "dimmed", p: "xs", "data-testid": "quick-open-empty", children: ["No entries match \u201C", query, "\u201D."] })) : (groups.map((group, index) => (_jsx(Combobox.Group, { label: group.heading || undefined, children: group.entries.map((entry) => {
+                                const detail = detailLine(entry);
+                                return (_jsxs(Combobox.Option, { value: entry.path, "data-testid": "quick-open-option", children: [_jsx(Highlight, { highlight: query.trim(), size: "sm", children: entry.label }), detail && (_jsx(Text, { size: "xs", "data-testid": "quick-open-option-detail", children: detail }))] }, entry.path));
+                            }) }, index)))) }) }), matches.length > MAX_OPTIONS && (_jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: ["Showing ", MAX_OPTIONS, " of ", matches.length, ". Keep typing to narrow the list."] }))] }) }));
 }

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

@@ -1,8 +1,13 @@
+import type { EntryNameSource } from '../editor-utils.js';
 export interface RenameEntryModalProps {
     /** Whether the modal is open */
     isOpen: boolean;
     /** Current entry label for display */
     entryLabel: string;
+    /** Where the entry's name comes from (`entryNameSource`); a title field when absent. */
+    nameSource?: EntryNameSource;
+    /** The entry has a page on the site; without one, the dialog changes only its slug. */
+    hasPage?: boolean;
     /** Current slug value */
     currentSlug: string;
     /** Called when save is clicked */
@@ -22,4 +27,4 @@ export interface RenameEntryModalProps {
     /** Where focus goes once it closes; Mantine's default, the element focused at open, without it. */
     returnFocusTo?: () => HTMLElement | null;
 }
-export declare function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onClose, isSaving, error, warning, existingSlugs, previewPath, returnFocusTo, }: RenameEntryModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function RenameEntryModal({ isOpen, entryLabel, nameSource, hasPage, currentSlug, onSave, onClose, isSaving, error, warning, existingSlugs, previewPath, returnFocusTo, }: RenameEntryModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/RenameEntryModal.js

@@ -1,15 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Allows changing the slug (middle segment) of an entry filename.
- * The content ID is preserved, so drafts and references remain intact.
+ * "Change URL", or "Change slug" for an entry with no page: changes an entry's slug, the middle
+ * segment of its file name, which sets its URL. Whether its name changes with it depends on where
+ * the name comes from (`entryNameSource`). The content ID is preserved, so drafts and references
+ * remain intact.
  */
 import { useState } from 'react';
 import { Modal, Stack, TextInput, Group, Button, Alert, Text } from '@mantine/core';
 import { IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
 import { validateEntrySlug } from '../slug.js';
 import { focusReturnProps } from '../utils/focus-return.js';
-export function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onClose, isSaving = false, error = null, warning = null, existingSlugs, previewPath, returnFocusTo, }) {
+import { EDITOR_ACTIONS } from '../copy.js';
+/** What the dialog says it changes, and whether the entry's name changes with it. */
+const nameHelp = (entryLabel, source, hasPage) => {
+    const changes = `This changes the ${hasPage ? 'URL' : 'slug'} of “${entryLabel}”`;
+    if (source?.from === 'type')
+        return `${changes}, not its name, which is its type's.`;
+    if (source?.from === 'slug') {
+        return `${changes}, and its name with it: with no title, its name follows the ${hasPage ? 'URL' : 'slug'}.`;
+    }
+    const field = source?.fieldLabel ? `“${source.fieldLabel}” field` : 'title field';
+    return `${changes}, not its name, which comes from its ${field}. Edit that field in the form to change the name.`;
+};
+export function RenameEntryModal({ isOpen, entryLabel, nameSource, hasPage = true, currentSlug, onSave, onClose, isSaving = false, error = null, warning = null, existingSlugs, previewPath, returnFocusTo, }) {
     const [newSlug, setNewSlug] = useState(currentSlug);
     const [touched, setTouched] = useState(false);
     // Reset state when modal opens (adjust state during render instead of effect)
@@ -38,8 +52,9 @@ export function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onCl
         await onSave(newSlug);
     };
     const slugPath = previewPath?.(newSlug || 'your-slug');
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Rename entry" }), size: "md", closeOnClickOutside: !isSaving, closeOnEscape: !isSaving, ...focusReturnProps(returnFocusTo), children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsxs(Stack, { gap: "md", "data-testid": "rename-entry-modal", children: [warning ? (_jsx(Alert, { icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", variant: "light", children: warning })) : (error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error }))), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Renaming \u201C", entryLabel, "\u201D"] }), _jsx(TextInput, { label: "Slug", description: slugPath ? `URL path: ${slugPath}` : 'Lowercase letters, numbers and hyphens', value: newSlug, onChange: (e) => {
+    const action = hasPage ? EDITOR_ACTIONS.changeUrl : EDITOR_ACTIONS.changeSlug;
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: action }), size: "md", closeOnClickOutside: !isSaving, closeOnEscape: !isSaving, ...focusReturnProps(returnFocusTo), children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsxs(Stack, { gap: "md", "data-testid": "rename-entry-modal", children: [warning ? (_jsx(Alert, { icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", variant: "light", children: warning })) : (error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error }))), _jsx(Text, { size: "sm", c: "dimmed", "data-testid": "change-url-help", children: nameHelp(entryLabel, nameSource, hasPage) }), _jsx(TextInput, { label: "Slug", description: slugPath ? `URL path: ${slugPath}` : 'Lowercase letters, numbers and hyphens', value: newSlug, onChange: (e) => {
                             setNewSlug(e.currentTarget.value);
                             setTouched(true);
-                        }, error: touched ? validationError : null, placeholder: "my-entry-slug", required: true, disabled: isSaving, "data-autofocus": true, "data-testid": "rename-slug-input" }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { size: "sm", type: "submit", loading: isSaving, disabled: newSlug === currentSlug, "data-testid": "rename-entry-submit", children: "Rename" })] })] }) }) }));
+                        }, error: touched ? validationError : null, placeholder: "my-entry-slug", required: true, disabled: isSaving, "data-autofocus": true, "data-testid": "rename-slug-input" }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { size: "sm", type: "submit", loading: isSaving, disabled: newSlug === currentSlug, "data-testid": "rename-entry-submit", children: action })] })] }) }) }));
 }

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

@@ -24,7 +24,8 @@ export interface SaveSplitButtonProps {
     draftStorageFailed: boolean;
 }
 /**
- * The unsaved indicator, then Save with a caret offering "Save all". The indicator is icon-only
- * below `lg`, its text then its Tooltip and accessible name.
+ * Save with a caret offering "Save all". While the open entry has unsaved changes, Save's Tooltip
+ * and description say they are kept on this device. Only when keeping them failed does the bar
+ * carry a warning before Save, icon-only below `lg`, its text then its Tooltip and accessible name.
  */
 export declare function SaveSplitButton({ onSave, saveBlockedReason, busy, onSaveAll, unsavedCount, saveAllBlockedReason, saveAllProgress, saving, savedSignal, savedHere, entryDirty, draftStorageFailed, }: SaveSplitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/SaveSplitButton.js

@@ -1,13 +1,24 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { Box, Button, Loader, Menu, Text, Tooltip, VisuallyHidden } from '@mantine/core';
 import { useReducedMotion } from '@mantine/hooks';
-import { IconAlertTriangle, IconCheck, IconChevronDown, IconCircleDot, IconLoader2, } from '@tabler/icons-react';
+import { IconAlertTriangle, IconCheck, IconChevronDown, IconLoader2 } from '@tabler/icons-react';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { ReasonedMenuItem } from './ReasonedMenuItem.js';
 import { useMenuItemFocusReturn } from '../utils/focus-return.js';
+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.";
+const KEPT_HINT = 'Unsaved changes are kept on this device until you save.';
+// Visually hidden, as Mantine's VisuallyHidden, for a region that must stay mounted.
+const HIDDEN_STYLE = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+};
 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';
@@ -40,11 +51,13 @@ function SaveLabels({ shown, spinner }) {
             }, children: labels[key] }, key))) }));
 }
 /**
- * The unsaved indicator, then Save with a caret offering "Save all". The indicator is icon-only
- * below `lg`, its text then its Tooltip and accessible name.
+ * Save with a caret offering "Save all". While the open entry has unsaved changes, Save's Tooltip
+ * and description say they are kept on this device. Only when keeping them failed does the bar
+ * carry a warning before Save, icon-only below `lg`, its text then its Tooltip and accessible name.
  */
 export function SaveSplitButton({ onSave, saveBlockedReason, busy, onSaveAll, unsavedCount, saveAllBlockedReason, saveAllProgress, saving = false, savedSignal, savedHere = false, entryDirty, draftStorageFailed, }) {
     const caret = useRef(null);
+    const keptHintId = useId();
     const menuFocus = useMenuItemFocusReturn(caret);
     const reducedMotion = useReducedMotion();
     // Each landed Save shows "Saved" once, as it lands and only on its own entry: one that landed
@@ -80,20 +93,20 @@ export function SaveSplitButton({ onSave, saveBlockedReason, busy, onSaveAll, un
             ? 'saved'
             : 'save';
     const saveGreyed = saveBlocked && !saveAllProgress && label === 'save';
-    const indicatorText = draftStorageFailed
-        ? 'Unsaved · not kept on this device'
-        : 'Unsaved · kept on this device';
-    const indicatorColor = draftStorageFailed ? 'var(--canopy-danger-text)' : 'dimmed';
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { role: "status", ta: "right", w: { base: 20, lg: 112 }, style: { flexShrink: 0 }, children: entryDirty && (_jsx(Tooltip, { label: draftStorageFailed ? `${indicatorText}. ${STORAGE_FAILED_HINT}` : indicatorText, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", lh: 1.2, c: indicatorColor, "data-testid": "unsaved-indicator", children: [_jsx(Box, { component: "span", visibleFrom: "lg", children: indicatorText }), _jsx(Box, { component: "span", hiddenFrom: "lg", display: "inline-flex", "aria-hidden": "true", children: draftStorageFailed ? _jsx(IconAlertTriangle, { size: 18 }) : _jsx(IconCircleDot, { size: 18 }) }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "lg", children: indicatorText }), draftStorageFailed && (_jsxs(VisuallyHidden, { component: "span", children: [". ", STORAGE_FAILED_HINT] }))] }) })) }), _jsx(VisuallyHidden, { role: "status", children: saveAllProgress
+    const storageWarning = entryDirty && draftStorageFailed;
+    // Why Save is blocked, else where unsaved changes are held; a blocked Save's reason leads.
+    const keptHint = entryDirty && !draftStorageFailed && !saveBlockedReason ? KEPT_HINT : '';
+    const saveTooltip = saveBlockedReason || keptHint;
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { role: "status", ta: "right", w: { base: 20, lg: 112 }, style: storageWarning ? { flexShrink: 0 } : HIDDEN_STYLE, children: storageWarning && (_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] })] }) })) }), _jsx(VisuallyHidden, { role: "status", children: saveAllProgress
                     ? `Saving ${saveAllProgress.total} ${saveAllProgress.total === 1 ? 'entry' : 'entries'}…`
                     : label === 'saved'
                         ? 'Saved'
-                        : '' }), _jsx("style", { children: LABEL_STYLES }), _jsxs(Button.Group, { style: { flexShrink: 0 }, children: [_jsx(Tooltip, { label: saveBlockedReason, 
+                        : '' }), keptHint && (_jsx("span", { hidden: true, id: keptHintId, children: keptHint })), _jsx("style", { children: LABEL_STYLES }), _jsxs(Button.Group, { style: { flexShrink: 0 }, children: [_jsx(Tooltip, { label: saveTooltip, 
                         // Not beside "Saving…" or "Saved", which already say what happened.
-                        disabled: !saveBlockedReason || busy || label !== 'save', multiline: true, maw: 280, children: _jsx(Button, { "data-testid": "save-button", variant: "filled", size: "sm", leftSection: saveAllProgress && !reducedMotion ? (_jsx(Loader, { size: 14, color: "currentColor" })) : undefined, onClick: () => {
+                        disabled: !saveTooltip || busy || label !== 'save', multiline: true, maw: 280, children: _jsx(Button, { "data-testid": "save-button", variant: "filled", size: "sm", leftSection: saveAllProgress && !reducedMotion ? (_jsx(Loader, { size: 14, color: "currentColor" })) : undefined, onClick: () => {
                                 if (!saveBlocked)
                                     onSave();
-                            }, "data-disabled": saveGreyed ? true : undefined, "aria-disabled": saveBlocked ? true : undefined, children: saveAllProgress ? (`Saving ${Math.min(saveAllProgress.done + 1, saveAllProgress.total)} of ${saveAllProgress.total}…`) : (_jsx(SaveLabels, { shown: label, spinner: !reducedMotion })) }) }), _jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", ...menuFocus.menu, children: [_jsx(Tooltip, { label: "Save options", events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsx(Button, { ref: caret, 
+                            }, "data-disabled": saveGreyed ? true : undefined, "aria-disabled": saveBlocked ? true : undefined, ...(keptHint ? { 'aria-describedby': keptHintId } : {}), children: saveAllProgress ? (`Saving ${Math.min(saveAllProgress.done + 1, saveAllProgress.total)} of ${saveAllProgress.total}…`) : (_jsx(SaveLabels, { shown: label, spinner: !reducedMotion })) }) }), _jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", ...menuFocus.menu, children: [_jsx(Tooltip, { label: "Save options", events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsx(Button, { ref: caret, 
                                         // Light beside a greyed Save, so a blocked split button shows no filled half.
                                         variant: saveGreyed ? 'light' : 'filled', size: "sm", px: 8, "aria-label": "Save options", "data-testid": "save-options-button", style: { borderInlineStart: '1px solid var(--mantine-color-body)' }, children: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) }) }) }), _jsx(Menu.Dropdown, { ...menuFocus.dropdown, children: _jsx(ReasonedMenuItem, { "data-testid": "save-all-menu-item", onClick: onSaveAll, blockedReason: saveAllBlockedReason ??
                                         (saveAllProgress

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

@@ -4,7 +4,6 @@ export interface StagedChangesDrawerProps {
     /** Closes the drawer. Called directly when clean, only after a confirmed discard when dirty, and never while saving. */
     onClose: () => void;
     title: string;
-    description: string;
     size: number;
     isDirty: boolean;
     isSaving: boolean;

package/dist/editor/components/StagedChangesDrawer.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useReducer, useRef } from 'react';
-import { Badge, Button, Drawer, Fieldset, Group, Text, Title } from '@mantine/core';
+import { Badge, Button, Fieldset, Group, Text } from '@mantine/core';
 import { openConfirm } from '../utils/confirm-modal.js';
 import { focusReturnProps, rememberOpener, returnTarget } from '../utils/focus-return.js';
+import { OverlayDrawer } from '../shell/OverlayHeader.js';
 /**
  * A key that changes each time the drawer finishes closing. A panel keyed with it, and passing
  * `onExited` through, gets fresh state for each opening, as the drawer's own children do. A
@@ -33,7 +34,7 @@ function useBeforeUnloadWhileDirty(isDirty) {
  * them from being lost unnoticed: a title badge and a sticky save bar while dirty, a
  * discard confirm on close and on the save bar's Discard changes, and a `beforeunload` prompt.
  */
-export const StagedChangesDrawer = ({ opened, onClose, title, description, size, isDirty, isSaving, canEdit, saveLabel, onSave, onDiscard, childModalOpen = false, onExited, returnFocusTo, children, }) => {
+export const StagedChangesDrawer = ({ opened, onClose, title, size, isDirty, isSaving, canEdit, saveLabel, onSave, onDiscard, childModalOpen = false, onExited, returnFocusTo, children, }) => {
     // A ref, not state: @mantine/modals runs the confirm's onClose inside its reducer, during
     // render, where setting another component's state draws a React warning. While the confirm is open the
     // drawer still hears Escape, so requestClose must ignore it.
@@ -76,10 +77,10 @@ export const StagedChangesDrawer = ({ opened, onClose, title, description, size,
         confirmDiscard('Discarding drops the changes you have not saved.', onDiscard, focusReturnProps(() => returnTarget(opener, () => titleRef.current)));
     }, [isSaving, onDiscard, confirmDiscard]);
     const { onExitTransitionEnd: returnFocus, ...focusReturn } = focusReturnProps(returnFocusTo);
-    return (_jsxs(Drawer, { opened: opened, onClose: requestClose, closeOnEscape: !childModalOpen, ...focusReturn, onExitTransitionEnd: () => {
+    return (_jsxs(OverlayDrawer, { opened: opened, onClose: requestClose, closeOnEscape: !childModalOpen, ...focusReturn, onExitTransitionEnd: () => {
             returnFocus?.();
             onExited?.();
-        }, position: "right", title: _jsxs("div", { children: [_jsxs(Group, { gap: "xs", children: [_jsx(Title, { order: 4, ref: titleRef, tabIndex: -1, children: title }), isDirty && (_jsx(Badge, { color: "orange", variant: "light", children: "Unsaved changes" }))] }), _jsx(Text, { size: "xs", c: "dimmed", children: description })] }), padding: "md", size: size, overlayProps: { blur: 2 }, children: [_jsx(Fieldset, { variant: "unstyled", disabled: isSaving, "aria-busy": isSaving, children: children }), canEdit && isDirty && (
+        }, position: "right", title: title, titleRef: titleRef, titleTabIndex: -1, adornment: isDirty && (_jsx(Badge, { color: "orange", variant: "light", children: "Unsaved changes" })), size: size, children: [_jsx(Fieldset, { variant: "unstyled", disabled: isSaving, "aria-busy": isSaving, children: children }), canEdit && isDirty && (
             // The drawer's content box is the scroll container, so a sticky bar stays in view
             // however long the panel's list grows.
             _jsxs(Group, { justify: "space-between", py: "sm", gap: "sm", style: {

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

@@ -1,8 +1,6 @@
 export interface UndoToastMessageProps {
-    /** Names what was removed: `"Branch-aware" from Features`, `item 2 from Features`, `"SEO"`. */
+    /** Names what was removed: `"Branch-aware" from Features`, `item 2 from Features`, `the image from Hero image`. */
     label: string;
-    /** `clear` for an optional object's Clear. */
-    action?: 'remove' | 'clear';
     /** A sentence after the message, such as where the item's comments went. */
     note?: string;
     onUndo: () => void;
@@ -14,5 +12,8 @@ export interface UndoToastMessageProps {
     /** Called when focus leaves the toast, so its timer can run again. */
     onRelease?: () => void;
 }
-/** The body of the toast a form Remove or Clear raises in place of a confirmation. */
-export declare function UndoToastMessage({ label, action, note, onUndo, onHold, onRelease, }: UndoToastMessageProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The body of the toast a form Remove raises in place of a confirmation. An object's Clear offers
+ * its Undo in the form instead (`ObjectField`), since the object stays where it was.
+ */
+export declare function UndoToastMessage({ label, note, onUndo, onHold, onRelease, }: UndoToastMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/UndoToastMessage.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Group, Text } from '@mantine/core';
-/** The body of the toast a form Remove or Clear raises in place of a confirmation. */
-export function UndoToastMessage({ label, action = 'remove', note, onUndo, onHold, onRelease, }) {
-    const [done, doing] = action === 'clear' ? ['Cleared', 'clearing'] : ['Removed', 'removing'];
+/**
+ * The body of the toast a form Remove raises in place of a confirmation. An object's Clear offers
+ * its Undo in the form instead (`ObjectField`), since the object stays where it was.
+ */
+export function UndoToastMessage({ label, note, onUndo, onHold, onRelease, }) {
     return (_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", onFocus: onHold, onBlur: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget))
                 onRelease?.();
-        }, children: [_jsx(Text, { size: "sm", miw: 0, children: note ? `${done} ${label}. ${note}` : `${done} ${label}` }), _jsx(Button, { size: "compact-sm", variant: "subtle", style: { flexShrink: 0 }, onClick: onUndo, "aria-label": `Undo ${doing} ${label}`, children: "Undo" })] }));
+        }, children: [_jsx(Text, { size: "sm", miw: 0, children: note ? `Removed ${label}. ${note}` : `Removed ${label}` }), _jsx(Button, { size: "compact-sm", variant: "subtle", style: { flexShrink: 0 }, onClick: onUndo, "aria-label": `Undo removing ${label}`, children: "Undo" })] }));
 }

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

@@ -0,0 +1,9 @@
+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.
+ * `--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.
+ */
+export declare const UnsavedMark: React.ForwardRefExoticComponent<Omit<ElementProps<"span">, "color" | "style"> & React.RefAttributes<HTMLSpanElement>>;