canopycms 0.1.0 → 0.2.0-int.119

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

package/dist/editor/components/UnsavedMark.js

@@ -0,0 +1,20 @@
+'use client';
+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.
+ * `--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 const UnsavedMark = forwardRef(function UnsavedMark(props, ref) {
+    return (_jsx(Box, { ref: ref, component: "span", ...props, style: {
+            display: 'inline-block',
+            flexShrink: 0,
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: 'var(--canopy-unsaved-mark, var(--mantine-color-brand-6))',
+        } }));
+});

package/dist/editor/components/UserBadge.js

@@ -29,11 +29,14 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
     // A light or outline badge tints its label with the badge colour, too faint for a name.
     const nameColor = inBadge && badgeVariant !== 'filled' ? 'var(--mantine-color-text)' : undefined;
     const wrap = (content, tooltip, personLabel) => {
-        const wrapped = inBadge ? (_jsx(Badge, { variant: badgeVariant, color: color, pr: onRemove ? 3 : 8, pl: 4, rightSection: onRemove ? (_jsx(Tooltip, { label: `Remove ${personLabel}`, position: "bottom", children: _jsx(ActionIcon, { size: "xs", radius: "xl", variant: "transparent", onClick: () => onRemove(userId), onMouseEnter: () => setOnRemoveButton(true), onMouseLeave: () => setOnRemoveButton(false), onFocus: () => setOnRemoveButton(true), onBlur: () => setOnRemoveButton(false), "aria-label": `Remove ${personLabel}`, style: { color: nameColor ?? 'var(--mantine-color-white)' }, children: _jsx(IconX, { size: 12, stroke: 2.5 }) }) })) : undefined, styles: {
+        const wrapped = inBadge ? (_jsx(Badge, { variant: badgeVariant, color: color, pr: onRemove ? 3 : 8, pl: 4, 
+            // A long name shrinks the badge to its container instead of wrapping inside its fixed height.
+            maw: "100%", rightSection: onRemove ? (_jsx(Tooltip, { label: `Remove ${personLabel}`, position: "bottom", children: _jsx(ActionIcon, { size: "xs", radius: "xl", variant: "transparent", onClick: () => onRemove(userId), onMouseEnter: () => setOnRemoveButton(true), onMouseLeave: () => setOnRemoveButton(false), onFocus: () => setOnRemoveButton(true), onBlur: () => setOnRemoveButton(false), "aria-label": `Remove ${personLabel}`, style: { color: nameColor ?? 'var(--mantine-color-white)' }, children: _jsx(IconX, { size: 12, stroke: 2.5 }) }) })) : undefined, styles: {
                 label: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: '4px',
+                    minWidth: 0,
                 },
             }, children: content })) : (content);
         return showEmailTooltip ? (_jsx(Tooltip, { label: tooltip, disabled: !tooltip || onRemoveButton, children: wrapped })) : (wrapped);
@@ -49,9 +52,9 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
         const describedWithEmail = emailDetail ? `${described}, ${emailDetail}` : described;
         // A filled badge keeps its white text; dimmed would not contrast with its fill.
         const fallbackColor = inBadge && badgeVariant === 'filled' ? undefined : 'dimmed';
-        const unavailableText = (_jsx(Text, { size: textSize, c: fallbackColor, fs: "italic", children: unavailable }));
+        const unavailableText = (_jsx(Text, { size: textSize, c: fallbackColor, fs: "italic", truncate: true, children: unavailable }));
         const hiddenDetail = `${revealIdOnFallback ? ` · ${userId}` : ''}${emailDetail ? `, ${emailDetail}` : ''}`;
-        return wrap(_jsxs(Group, { gap: 4, children: [_jsx(Avatar, { src: record?.avatarUrl, alt: "", size: avatarSize, color: "gray", "aria-hidden": true }), variant === 'avatar-only' ? (_jsx(VisuallyHidden, { component: "span", children: describedWithEmail })) : (_jsxs(_Fragment, { children: [variant === 'full' && record?.email ? (_jsxs("div", { children: [unavailableText, _jsx(Text, { size: "xs", c: "dimmed", children: record.email })] })) : (unavailableText), hiddenDetail && _jsx(VisuallyHidden, { component: "span", children: hiddenDetail })] }))] }), variant === 'avatar-only'
+        return wrap(_jsxs(Group, { gap: 4, wrap: "nowrap", miw: 0, children: [_jsx(Avatar, { src: record?.avatarUrl, alt: "", size: avatarSize, color: "gray", "aria-hidden": true }), variant === 'avatar-only' ? (_jsx(VisuallyHidden, { component: "span", children: describedWithEmail })) : (_jsxs(_Fragment, { children: [variant === 'full' && record?.email ? (_jsxs("div", { children: [unavailableText, _jsx(Text, { size: "xs", c: "dimmed", children: record.email })] })) : (unavailableText), hiddenDetail && _jsx(VisuallyHidden, { component: "span", children: hiddenDetail })] }))] }), variant === 'avatar-only'
             ? describedWithEmail
             : [revealIdOnFallback ? described : '', emailDetail].filter(Boolean).join(', '), described);
     }
@@ -89,23 +92,22 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
     const detail = showEmailTooltip && variant !== 'full' && userId !== 'anonymous' ? record.email : '';
     const detailText = detail ? (_jsx(VisuallyHidden, { component: "span", children: `, ${detail}` })) : null;
     const personLabel = userId === 'anonymous' ? 'Anonymous (Public)' : displayName;
+    // Alone, the avatar shows no name, so its tooltip gives it before the email. A name beside the
+    // avatar is cut with an ellipsis when long, so its tooltip gives the full name too; with no
+    // tooltip, the name carries it as a title.
+    const tooltip = variant === 'full' ? '' : [personLabel, detail].filter(Boolean).join(', ');
+    const nameTitle = showEmailTooltip && tooltip ? undefined : personLabel;
     const renderContent = () => {
         const avatar = renderAvatar();
         switch (variant) {
             case 'avatar-only':
                 return (_jsxs(Group, { gap: 0, children: [avatar, _jsx(VisuallyHidden, { component: "span", children: personLabel }), detailText] }));
             case 'full':
-                return (_jsxs(Group, { gap: 4, children: [avatar, _jsxs("div", { children: [_jsx(Text, { size: textSize, fw: 500, children: displayName }), _jsx(Text, { size: "xs", c: "dimmed", children: record.email })] })] }));
+                return (_jsxs(Group, { gap: 4, wrap: "nowrap", miw: 0, children: [avatar, _jsxs("div", { style: { minWidth: 0 }, children: [_jsx(Text, { size: textSize, fw: 500, truncate: true, title: displayName, children: displayName }), _jsx(Text, { size: "xs", c: "dimmed", truncate: true, title: record.email, children: record.email })] })] }));
             case 'avatar-name':
             default:
-                return (_jsxs(Group, { gap: 4, children: [avatar, _jsx(Text, { size: textSize, fw: 500, c: nameColor, children: personLabel }), detailText] }));
+                return (_jsxs(Group, { gap: 4, wrap: "nowrap", miw: 0, children: [avatar, _jsx(Text, { size: textSize, fw: 500, c: nameColor, truncate: true, title: nameTitle, children: personLabel }), detailText] }));
         }
     };
-    // Alone, the avatar shows no name, so its tooltip gives it before the email.
-    const tooltip = variant === 'full'
-        ? ''
-        : variant === 'avatar-only'
-            ? [personLabel, detail].filter(Boolean).join(', ')
-            : record.email;
     return wrap(renderContent(), tooltip, personLabel);
 };

package/dist/editor/copy.d.ts

@@ -13,6 +13,10 @@ export declare const EDITOR_ACTIONS: {
     readonly switchBranch: "Switch branch";
     readonly newBranch: "New branch";
     readonly remove: "Remove";
+    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

@@ -13,6 +13,10 @@ export const EDITOR_ACTIONS = {
     switchBranch: 'Switch branch',
     newBranch: 'New branch',
     remove: 'Remove',
+    restore: 'Restore',
     clear: 'Clear',
+    undoClear: 'Undo clear',
     openEntry: 'Open entry',
+    changeUrl: 'Change URL',
+    changeSlug: 'Change slug',
 };

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

@@ -31,6 +31,14 @@ type PreviewEntry = {
 export declare const buildPreviewRoute: (entry: PreviewEntry, { previewBaseByCollection, contentRoot }: PreviewContext & {
     contentRoot?: string;
 }) => string | undefined;
+/**
+ * The entry the editor opens when none is asked for: the one whose route is `/`, else the first
+ * with a preview, else the first. `routeFor` gives the route before any prefix or base path
+ * (`buildPreviewRoute`), so `previewPrefix` and `basePath` never hide the root page.
+ */
+export declare const resolveHomeEntry: <T extends {
+    previewSrc?: string;
+}>(entries: readonly T[], routeFor?: (entry: T) => string | undefined) => T | undefined;
 /**
  * Builds the preview iframe `src` for an entry: its route under `previewPrefix`, under the
  * deployment `basePath` (`CanopyClientConfig.basePath`, e.g. `/preview-123`), in the host's
@@ -67,19 +75,51 @@ export declare const buildCollectionLabels: (collections?: EditorCollection[]) =
  * untyped.
  */
 export declare const entryTypeLabel: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "collectionPath" | "entryType">) => string | undefined;
-/** An entry's navigator badge: "Missing" when its file is gone, else its type's label or name. */
+/**
+ * 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`).
+ */
+export declare const entryTypeLine: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "collectionPath" | "entryType">) => string | undefined;
+/**
+ * An entry's second line in the content tree: "Missing" when its file is gone, else its
+ * `entryTypeLine`, else its status read as words.
+ */
 export declare const entryStatusLabel: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "status" | "collectionPath" | "entryType">) => string | undefined;
-/** One crumb before the entry's own: "All content", a collection, or a folder of a nested slug. */
-export interface BreadcrumbSegment {
+/**
+ * Where an entry's name comes from, which "Change URL" explains. The title chain is the server's
+ * (`resolveEntryTitle`): a non-empty title-field value, else a non-empty string `title` or `name`
+ * value whatever its field's type, else the type's label, else the slug. A labelled singleton is
+ * named by its type whatever its title. `fieldLabel` is absent when no field of that name is in the
+ * schema.
+ */
+export type EntryNameSource = {
+    from: 'type';
+} | {
+    from: 'title';
+    fieldLabel?: string;
+} | {
+    from: 'slug';
+};
+/**
+ * `data` is the entry's value where it is at hand; without it, a schema with a title field, or a
+ * `title` or `name` field, is taken to name the entry from it.
+ */
+export declare const entryNameSource: (collections: EditorCollection[] | undefined, entry: Pick<EditorEntry, "collectionPath" | "entryType" | "schema">, data?: Record<string, unknown>) => EntryNameSource;
+/** One crumb before the entry's own: a collection, or a folder of a nested slug. */
+export type BreadcrumbSegment = {
+    label: string;
+    /** The collection the crumb reveals in the content panel. */
+    collectionPath: string;
+    folder?: undefined;
+} | {
     label: string;
-    /** The collection the crumb opens in the content panel; absent on "All content" and slug folders. */
-    collectionPath?: string;
     /** A slug folder, which is not a node of the content tree, so it navigates nowhere. */
-    folder?: true;
-}
+    folder: true;
+    collectionPath?: undefined;
+};
 /**
- * Builds breadcrumb segments for an entry based on its collection hierarchy, starting with
- * "All content". The first path part is skipped as the content root, which the tree does not show.
+ * Builds breadcrumb segments for an entry based on its collection hierarchy. The first path part
+ * is skipped as the content root, which the tree does not show, so a root entry has none.
  */
 export declare const buildBreadcrumbSegments: (currentEntry: EditorEntry | undefined, collectionLabels: Map<string, string>) => BreadcrumbSegment[];
 /**

package/dist/editor/editor-utils.js

@@ -1,7 +1,8 @@
 // Import directly from normalize to avoid pulling in server-only branch.ts
 import { normalizeFilesystemPath } from '../paths/normalize.js';
-import { humanizeName } from './schema-label.js';
+import { humanizeName, schemaLabel } from './schema-label.js';
 import { computeEntryUrl, isIndexSlug } from '../utils/entry-url.js';
+import { titleFieldPath } from '../utils/title-field.js';
 import { isDataOnlyFormat } from '../utils/format.js';
 import { isAbsoluteUrl, joinUrlPrefix, matchTrailingSlash, readTrailingSlashEnv, stripTrailingSlashes, } from '../utils/url-prefix.js';
 /**
@@ -67,6 +68,18 @@ export const buildPreviewRoute = (entry, { previewBaseByCollection, contentRoot
     const trimmed = stripTrailingSlashes(basePathPart);
     return `${encoded ? `${trimmed}/${encoded}` : basePathPart || '/'}${suffix}`;
 };
+/** Whether a `buildPreviewRoute` route is the site's root page: `/`, with any query or fragment. */
+const isHomeRoute = (route) => route !== undefined &&
+    !isAbsoluteUrl(route) &&
+    stripTrailingSlashes(splitPathSuffix(route)[0]) === '';
+/**
+ * The entry the editor opens when none is asked for: the one whose route is `/`, else the first
+ * with a preview, else the first. `routeFor` gives the route before any prefix or base path
+ * (`buildPreviewRoute`), so `previewPrefix` and `basePath` never hide the root page.
+ */
+export const resolveHomeEntry = (entries, routeFor) => (routeFor && entries.find((entry) => isHomeRoute(routeFor(entry)))) ||
+    entries.find((entry) => entry.previewSrc) ||
+    entries[0];
 /**
  * Builds the preview iframe `src` for an entry: its route under `previewPrefix`, under the
  * deployment `basePath` (`CanopyClientConfig.basePath`, e.g. `/preview-123`), in the host's
@@ -129,11 +142,18 @@ export const buildWritePayload = (entry, value) => {
         body: typeof body === 'string' ? body : '',
     };
 };
+/**
+ * The label an entry of this type goes by when the type allows only one entry (`maxItems: 1`):
+ * the type's own, as "Site settings" names the site's one settings entry. Undefined for any other
+ * type, and for an unlabelled one, whose entry keeps its title.
+ */
+const singletonLabel = (type) => type.maxItems === 1 && type.label ? type.label : undefined;
 export const buildEntriesFromListResponse = ({ response, resolvePreviewSrc, flatSchema, }) => {
     return response.entries.map((entry) => {
         // Resolve schema from flatSchema using parentPath + name
         let schema = [];
         let unavailable;
+        let typeName;
         if (entry.collectionPath && entry.entryType) {
             const entryTypeItem = flatSchema.find((item) => item.type === 'entry-type' &&
                 item.parentPath === entry.collectionPath &&
@@ -141,12 +161,14 @@ export const buildEntriesFromListResponse = ({ response, resolvePreviewSrc, flat
             if (entryTypeItem && entryTypeItem.type === 'entry-type') {
                 schema = entryTypeItem.schema;
                 unavailable = entryTypeItem.unavailable;
+                typeName = singletonLabel(entryTypeItem);
             }
         }
         return {
             path: entry.logicalPath,
             contentId: entry.contentId,
-            label: entry.title || entry.slug || entry.collectionName || entry.collectionPath,
+            label: typeName || entry.title || entry.slug || entry.collectionName || entry.collectionPath,
+            ...(entry.title && { title: entry.title }),
             status: entry.exists === false ? 'missing' : (entry.entryType ?? 'entry'),
             schema: schema,
             previewSrc: resolvePreviewSrc(entry),
@@ -176,13 +198,7 @@ export const buildCollectionLabels = (collections) => {
     walk(collections);
     return map;
 };
-/**
- * An entry's type as its collection labels it, else its name read as words; undefined when
- * untyped.
- */
-export const entryTypeLabel = (collections, entry) => {
-    if (!entry.entryType)
-        return undefined;
+const findEntryType = (collections, entry) => {
     const find = (nodes) => {
         for (const c of nodes) {
             if (c.path === entry.collectionPath)
@@ -194,21 +210,106 @@ export const entryTypeLabel = (collections, entry) => {
         return undefined;
     };
     const collection = collections ? find(collections) : undefined;
-    const type = collection?.entryTypes?.find((t) => t.name === entry.entryType);
-    return type?.label ?? humanizeName(entry.entryType);
+    return collection?.entryTypes?.find((t) => t.name === entry.entryType);
+};
+/**
+ * An entry's type as its collection labels it, else its name read as words; undefined when
+ * untyped.
+ */
+export const entryTypeLabel = (collections, entry) => {
+    if (!entry.entryType)
+        return undefined;
+    return findEntryType(collections, entry)?.label ?? humanizeName(entry.entryType);
 };
-/** An entry's navigator badge: "Missing" when its file is gone, else its type's label or name. */
+/**
+ * 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`).
+ */
+export const entryTypeLine = (collections, entry) => {
+    const type = findEntryType(collections, entry);
+    return type && singletonLabel(type) ? undefined : entryTypeLabel(collections, entry);
+};
+/**
+ * An entry's second line in the content tree: "Missing" when its file is gone, else its
+ * `entryTypeLine`, else its status read as words.
+ */
 export const entryStatusLabel = (collections, entry) => {
     if (entry.status === 'missing')
         return 'Missing';
-    return entryTypeLabel(collections, entry) ?? (entry.status && humanizeName(entry.status));
+    if (entry.entryType)
+        return entryTypeLine(collections, entry);
+    return entry.status && humanizeName(entry.status);
+};
+/**
+ * `data` is the entry's value where it is at hand; without it, a schema with a title field, or a
+ * `title` or `name` field, is taken to name the entry from it.
+ */
+export const entryNameSource = (collections, entry, data) => {
+    const type = findEntryType(collections, entry);
+    if (type && singletonLabel(type))
+        return { from: 'type' };
+    const titlePath = titleFieldPath(entry.schema);
+    if (data) {
+        const plain = data.title ?? data.name;
+        const plainName = isNonEmptyString(plain) ? (data.title != null ? 'title' : 'name') : undefined;
+        if (titlePath && isNonEmptyString(valueAt(data, titlePath))) {
+            return { from: 'title', fieldLabel: pathLabel(entry.schema, titlePath) };
+        }
+        if (plainName)
+            return { from: 'title', fieldLabel: pathLabel(entry.schema, [plainName]) };
+    }
+    else {
+        if (titlePath)
+            return { from: 'title', fieldLabel: pathLabel(entry.schema, titlePath) };
+        const named = ['title', 'name'].find((name) => findField(entry.schema, name));
+        if (named)
+            return { from: 'title', fieldLabel: pathLabel(entry.schema, [named]) };
+    }
+    if (type?.label)
+        return { from: 'type' };
+    return { from: 'slug' };
+};
+const isNonEmptyString = (value) => typeof value === 'string' && value !== '';
+/** The value at a data `path`, through nested objects. */
+const valueAt = (data, path) => path.reduce((value, key) => value && typeof value === 'object' && !Array.isArray(value)
+    ? value[key]
+    : undefined, data);
+/**
+ * The label of the field at a data `path`, with its enclosing objects' labels before it
+ * ("Hero › Heading"); undefined when the schema has no such field.
+ */
+const pathLabel = (schema, path) => {
+    const labels = [];
+    let fields = schema;
+    for (const name of path) {
+        const field = fields && findField(fields, name);
+        if (!field)
+            return undefined;
+        labels.push(schemaLabel(field));
+        fields = field.type === 'object' && 'fields' in field && !field.list ? field.fields : undefined;
+    }
+    return labels.join(' › ');
+};
+const isInlineGroup = (field) => field.type === 'group';
+/** The field named `name` among `fields`, looking through inline groups, which hold no data. */
+const findField = (fields, name) => {
+    for (const field of fields) {
+        if (isInlineGroup(field)) {
+            const inner = findField(field.fields, name);
+            if (inner)
+                return inner;
+        }
+        else if (field.name === name)
+            return field;
+    }
+    return undefined;
 };
 /**
- * Builds breadcrumb segments for an entry based on its collection hierarchy, starting with
- * "All content". The first path part is skipped as the content root, which the tree does not show.
+ * Builds breadcrumb segments for an entry based on its collection hierarchy. The first path part
+ * is skipped as the content root, which the tree does not show, so a root entry has none.
  */
 export const buildBreadcrumbSegments = (currentEntry, collectionLabels) => {
-    const segments = [{ label: 'All content' }];
+    const segments = [];
     if (!currentEntry)
         return segments;
     if (currentEntry.collectionPath) {

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

@@ -1,12 +1,14 @@
 /** Entry search shared by the navigator filter and the quick-open palette. */
 export interface SearchableEntry {
     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 and slug; an empty query matches everything. */
-export declare function matchesEntryQuery(entry: Pick<SearchableEntry, 'label' | 'slug'>, query: string): boolean;
+/** 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;

package/dist/editor/entry-search.js

@@ -1,11 +1,10 @@
 /** Entry search shared by the navigator filter and the quick-open palette. */
-/** Case-insensitive substring match over label and slug; an empty query matches everything. */
+/** Case-insensitive substring match over label, title and slug; an empty query matches everything. */
 export function matchesEntryQuery(entry, query) {
     const needle = query.trim().toLowerCase();
     if (!needle)
         return true;
-    return (entry.label.toLowerCase().includes(needle) ||
-        (entry.slug?.toLowerCase().includes(needle) ?? false));
+    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));

package/dist/editor/fields/FieldLabel.d.ts

@@ -18,7 +18,7 @@ export interface FieldLabelProps {
     labelId?: string;
     /** Slot right after the label text, for the field's comment control. */
     commentControl?: React.ReactNode;
-    /** Right-aligned slot for field actions (Expand all, Clear). */
+    /** Right-aligned slot for field actions (Expand all, an object's "…" menu). */
     actions?: React.ReactNode;
 }
 export declare const FieldLabel: React.FC<FieldLabelProps>;

package/dist/editor/fields/ObjectField.d.ts

@@ -11,7 +11,18 @@ export interface ObjectFieldProps {
     renderField: RenderField;
     path: Array<string | number>;
     dataCanopyField?: string;
-    /** Set, shows a gray "Clear" resetting the field to `undefined`; omitted for list items. */
-    onRemove?: () => void;
+    /** Set, a "…" menu offers Clear, resetting the field to `undefined`; omitted for list items. */
+    onClear?: () => void;
+    /** Set, an "Undo clear" button stands in the label row in place of the "…" menu. */
+    onUndoClear?: () => void;
+    /** Said with the Undo, such as where the object's comment threads went. */
+    clearNote?: string;
 }
+/**
+ * An object field's group of fields. Its Clear is an Undo-instead-of-confirm removal
+ * (docs/ux-guidelines.md, Destructive actions) whose Undo stays in the label row, where the clear
+ * happened, with no timer, until the caller drops `onUndoClear`. FormRenderer drops it once it
+ * can no longer put the object back where it was, another entry or branch opens, or the entry is
+ * saved or its draft discarded.
+ */
 export declare const ObjectField: React.FC<ObjectFieldProps>;