canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/components/RelativeTime.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { formatRelativeTime } from '../relative-time.js';
+/** A relative label; the absolute date is a tooltip, and visually hidden text for a screen reader. */
+export const RelativeTime = ({ iso, prefix, size, c, fs }) => {
+    const absolute = new Date(iso);
+    const valid = !Number.isNaN(absolute.getTime());
+    return (_jsx(Tooltip, { label: valid ? absolute.toLocaleString() : '', disabled: !valid, children: _jsxs(Text, { component: "time", dateTime: iso, size: size, c: c, fs: fs, children: [prefix, formatRelativeTime(iso), valid && (_jsx(VisuallyHidden, { component: "span", children: `, ${absolute.toLocaleString()}` }))] }) }));
+};

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

@@ -13,5 +13,13 @@ export interface RenameEntryModalProps {
     isSaving?: boolean;
     /** Error message to display */
     error?: string | null;
+    /** A rename whose outcome is unknown, shown in yellow in place of `error` */
+    warning?: string | null;
+    /** Slugs held by the other entries of the collection; the entry's own slug is never a clash. */
+    existingSlugs?: ReadonlySet<string>;
+    /** The URL path the entry will be served at for a slug; undefined when it has no page. */
+    previewPath?: (slug: string) => string | undefined;
+    /** 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, }: RenameEntryModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function RenameEntryModal({ isOpen, entryLabel, 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,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
  */
 import { useState } from 'react';
 import { Modal, Stack, TextInput, Group, Button, Alert, Text } from '@mantine/core';
-import { IconAlertCircle } from '@tabler/icons-react';
-export function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onClose, isSaving = false, error = null, }) {
+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, }) {
     const [newSlug, setNewSlug] = useState(currentSlug);
-    const [validationError, setValidationError] = useState(null);
+    const [touched, setTouched] = useState(false);
     // Reset state when modal opens (adjust state during render instead of effect)
     const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
     const [prevSlug, setPrevSlug] = useState(currentSlug);
@@ -18,40 +20,26 @@ export function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onCl
         setPrevSlug(currentSlug);
         if (isOpen) {
             setNewSlug(currentSlug);
-            setValidationError(null);
+            setTouched(false);
         }
     }
-    const validateSlug = (slug) => {
-        if (!slug.trim()) {
-            return 'Slug cannot be empty';
-        }
-        if (slug.includes('/')) {
-            return 'Slug cannot contain slashes';
-        }
-        if (!/^[a-z0-9][-a-z0-9]*$/.test(slug)) {
-            return 'Slug must start with letter/number and contain only lowercase letters, numbers, and hyphens';
-        }
-        if (slug.length > 64) {
-            return 'Slug must be 64 characters or less';
-        }
-        return null;
-    };
-    const handleSlugChange = (value) => {
-        setNewSlug(value);
-        setValidationError(validateSlug(value));
-    };
-    const handleSave = async () => {
-        const validation = validateSlug(newSlug);
-        if (validation) {
-            setValidationError(validation);
+    const validationError = validateEntrySlug(newSlug, { existingSlugs, currentSlug });
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (isSaving)
+            return;
+        setTouched(true);
+        if (validationError)
             return;
-        }
         if (newSlug === currentSlug) {
             onClose();
             return;
         }
         await onSave(newSlug);
     };
-    const canSave = !validationError && newSlug.trim() !== '' && newSlug !== currentSlug && !isSaving;
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Rename Entry" }), size: "md", closeOnClickOutside: !isSaving, closeOnEscape: !isSaving, children: _jsxs(Stack, { gap: "md", "data-testid": "rename-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Renaming \"", entryLabel, "\""] }), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: newSlug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isSaving, "data-autofocus": true, "data-testid": "rename-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Current: ", _jsx("code", { children: currentSlug }), newSlug !== currentSlug && (_jsxs(_Fragment, { children: [' → ', "New: ", _jsx("code", { children: newSlug })] }))] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { onClick: handleSave, loading: isSaving, disabled: !canSave, "data-testid": "rename-entry-submit", children: "Rename" })] })] }) }));
+    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) => {
+                            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" })] })] }) }) }));
 }

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

@@ -0,0 +1,9 @@
+export interface RetryToastMessageProps {
+    /** What failed, in plain words. */
+    message: string;
+    onRetry: () => void;
+    /** The button's label, when the way forward is not a plain retry. */
+    actionLabel?: string;
+}
+/** The body of an error toast whose failure the user can try again from the toast. */
+export declare function RetryToastMessage({ message, onRetry, actionLabel, }: RetryToastMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/RetryToastMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Group, Text } from '@mantine/core';
+/** The body of an error toast whose failure the user can try again from the toast. */
+export function RetryToastMessage({ message, onRetry, actionLabel = 'Retry', }) {
+    return (_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", children: [_jsx(Text, { size: "sm", miw: 0, children: message }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onRetry, children: actionLabel })] }));
+}

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

@@ -0,0 +1,25 @@
+import type { LogicalPath } from '../../paths/types.js';
+import { type SaveAllResult } from '../hooks/save-all.js';
+interface SaveAllResultMessageProps {
+    result: SaveAllResult;
+    onOpenEntry: (path: LogicalPath) => void;
+    /** Runs Save all again over whatever is still unsaved. */
+    onRetry: () => void;
+}
+/**
+ * Names every entry Save all could not save, each opening that entry, with its reason and a
+ * warning or error mark. "Try again" is offered only when a failure is one a retry can pass.
+ * @internal Exported for stories.
+ */
+export declare function SaveAllResultMessage({ result, onOpenEntry, onRetry }: SaveAllResultMessageProps): import("react/jsx-runtime").JSX.Element;
+type Actions = Omit<SaveAllResultMessageProps, 'result'>;
+/**
+ * Reports a finished Save all in one toast. Partly failed, it stays until dismissed: yellow when
+ * nothing failed for good, else red, each entry marked by its own severity.
+ */
+export declare function showSaveAllResult(result: SaveAllResult, actions: Actions): void;
+/** Takes an entry out of the result on screen, and the toast down with its last entry. */
+export declare function settleSaveAllEntry(contentId: string): void;
+/** Takes a partly failed result down, as when the branch it belongs to is left. */
+export declare function clearSaveAllResult(): void;
+export {};

package/dist/editor/components/SaveAllResult.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Box, Button, Group, List, Stack, Text, VisuallyHidden } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconAlertTriangle, IconCircleX } from '@tabler/icons-react';
+import { SAVE_ALL_RESULT_TOAST_ID, } from '../hooks/save-all.js';
+import { getNotificationDuration } from '../utils/env.js';
+const entries = (count) => `${count} ${count === 1 ? 'entry' : 'entries'}`;
+/** Nothing is lost yet: no answer, or a change made elsewhere. */
+const isWarning = (failure) => failure.kind === 'unanswered' || failure.kind === 'conflict';
+/**
+ * Names every entry Save all could not save, each opening that entry, with its reason and a
+ * warning or error mark. "Try again" is offered only when a failure is one a retry can pass.
+ * @internal Exported for stories.
+ */
+export function SaveAllResultMessage({ result, onOpenEntry, onRetry }) {
+    const retryable = result.failed.some((failure) => failure.kind === 'error' || failure.retryable);
+    return (_jsxs(Stack, { gap: 6, "data-testid": "save-all-result", children: [result.saved.length > 0 && _jsx(Text, { size: "sm", children: `${entries(result.saved.length)} saved.` }), _jsx(List, { size: "sm", spacing: 6, listStyleType: "none", pl: 0, children: result.failed.map((failure) => (_jsx(List.Item, { "data-testid": "save-all-failure", children: _jsxs(Group, { gap: 6, wrap: "nowrap", align: "flex-start", children: [_jsx(Box, { component: "span", display: "inline-flex", mt: 2, "aria-hidden": "true", c: isWarning(failure) ? 'var(--mantine-color-text)' : 'var(--canopy-danger-text)', children: isWarning(failure) ? _jsx(IconAlertTriangle, { size: 16 }) : _jsx(IconCircleX, { size: 16 }) }), _jsxs("div", { children: [_jsx(VisuallyHidden, { component: "span", children: isWarning(failure) ? 'Warning: ' : 'Error: ' }), _jsx(Anchor, { component: "button", type: "button", size: "sm", fw: 600, onClick: () => onOpenEntry(failure.path), children: failure.label }), _jsx(Text, { size: "sm", span: true, children: `: ${failure.reason}` }), failure.recreate && (_jsx(Button, { display: "block", mt: 4, size: "compact-xs", variant: "default", onClick: failure.recreate, children: "Save as new entry" }))] })] }) }, failure.contentId))) }), _jsx(Text, { size: "sm", children: result.failed.length === 1
+                    ? 'Its unsaved changes are kept.'
+                    : 'Their unsaved changes are kept.' }), retryable && (_jsx(Button, { size: "compact-sm", variant: "default", w: "fit-content", onClick: onRetry, children: "Try again" }))] }));
+}
+// The result on screen, so an entry settled elsewhere (saved, refreshed, discarded) leaves it.
+let shown;
+const renderFailures = (result, actions, update) => {
+    const data = {
+        id: SAVE_ALL_RESULT_TOAST_ID,
+        // An unanswered save may have landed, so "not saved" would claim more than is known.
+        title: `${result.failed.length === result.total
+            ? entries(result.total)
+            : `${result.failed.length} of ${entries(result.total)}`} ${result.failed.some((failure) => failure.kind === 'unanswered') ? 'may not have saved' : 'not saved'}`,
+        message: _jsx(SaveAllResultMessage, { result: result, ...actions }),
+        color: result.failed.every(isWarning) ? 'yellow' : 'red',
+        autoClose: false,
+        withCloseButton: true,
+        onClose: () => {
+            shown = undefined;
+        },
+    };
+    if (update)
+        notifications.update(data);
+    else
+        notifications.show(data);
+};
+/**
+ * Reports a finished Save all in one toast. Partly failed, it stays until dismissed: yellow when
+ * nothing failed for good, else red, each entry marked by its own severity.
+ */
+export function showSaveAllResult(result, actions) {
+    shown = undefined;
+    notifications.hide(SAVE_ALL_RESULT_TOAST_ID);
+    if (result.total === 0 || result.failed.length === 0) {
+        notifications.show({
+            id: SAVE_ALL_RESULT_TOAST_ID,
+            // An empty run found every change already on the server, or settled meanwhile.
+            message: result.total === 0 ? 'No changes to save' : `${entries(result.saved.length)} saved`,
+            color: result.total === 0 ? 'blue' : 'green',
+            autoClose: getNotificationDuration(4000),
+            withCloseButton: true,
+        });
+        return;
+    }
+    shown = { result, actions };
+    renderFailures(result, actions, false);
+}
+/** Takes an entry out of the result on screen, and the toast down with its last entry. */
+export function settleSaveAllEntry(contentId) {
+    if (!shown)
+        return;
+    const failed = shown.result.failed.filter((failure) => failure.contentId !== contentId);
+    if (failed.length === shown.result.failed.length)
+        return;
+    if (failed.length === 0) {
+        clearSaveAllResult();
+        return;
+    }
+    // Settled, the entry is no longer part of the run the title counts.
+    shown = { ...shown, result: { ...shown.result, failed, total: shown.result.total - 1 } };
+    renderFailures(shown.result, shown.actions, true);
+}
+/** Takes a partly failed result down, as when the branch it belongs to is left. */
+export function clearSaveAllResult() {
+    if (!shown)
+        return;
+    shown = undefined;
+    notifications.hide(SAVE_ALL_RESULT_TOAST_ID);
+}

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

@@ -0,0 +1,30 @@
+import type { SaveAllProgress } from '../hooks/save-all.js';
+export interface SaveSplitButtonProps {
+    onSave: () => void;
+    /** Why Save can't act now; empty when it can. */
+    saveBlockedReason: string;
+    /** The editor is loading or saving: Save waits without a reason. */
+    busy: boolean;
+    onSaveAll: () => void;
+    /** Entries on the branch with unsaved changes. */
+    unsavedCount: number;
+    /** Why Save all can't act now, other than nothing being unsaved. */
+    saveAllBlockedReason?: string;
+    /** Set while Save all runs. */
+    saveAllProgress: SaveAllProgress | null;
+    /** A Save of the open entry is in flight. */
+    saving?: boolean;
+    /** Rises each time a single Save lands, whichever entry it saved. */
+    savedSignal?: number;
+    /** The last Save that landed saved the open entry. */
+    savedHere?: boolean;
+    /** The open entry has unsaved changes. */
+    entryDirty: boolean;
+    /** Writing drafts to localStorage failed, so they live only in this tab. */
+    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.
+ */
+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

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, 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 { EDITOR_ACTIONS } from '../copy.js';
+import { ReasonedMenuItem } from './ReasonedMenuItem.js';
+import { useMenuItemFocusReturn } from '../utils/focus-return.js';
+const STORAGE_FAILED_HINT = "Save before you leave or reload, or they'll be lost.";
+const SAVED_SHOWN_MS = 2000;
+// Below `sm` the status words are visually hidden, so Save keeps its own width beside an icon.
+const LABEL_TEXT_CLASS = 'canopy-save-label-text';
+const LABEL_STYLES = `
+@media (max-width: 47.99em) {
+  .${LABEL_TEXT_CLASS} {
+    position: absolute; width: 1px; height: 1px; overflow: hidden;
+    clip: rect(0 0 0 0); white-space: nowrap;
+  }
+}
+`;
+/**
+ * Every label in one grid cell, only `shown` visible, so the button keeps the widest one's width
+ * and the top bar never shifts.
+ */
+function SaveLabels({ shown, spinner }) {
+    const labels = {
+        save: EDITOR_ACTIONS.save,
+        saving: (_jsxs(_Fragment, { children: [_jsx(Box, { component: "span", display: "inline-flex", w: 14, children: shown === 'saving' &&
+                        (spinner ? (_jsx(Loader, { size: 14, color: "currentColor" })) : (_jsx(IconLoader2, { size: 14, "aria-hidden": "true" }))) }), _jsx("span", { className: LABEL_TEXT_CLASS, children: "Saving\u2026" })] })),
+        saved: (_jsxs(_Fragment, { children: [_jsx(IconCheck, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: LABEL_TEXT_CLASS, children: "Saved" })] })),
+    };
+    return (_jsx(Box, { component: "span", pos: "relative", style: { display: 'inline-grid' }, children: Object.keys(labels).map((key) => (_jsx(Box, { component: "span", "aria-hidden": key === shown ? undefined : true, style: {
+                gridArea: '1 / 1',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                visibility: key === shown ? 'visible' : 'hidden',
+            }, children: labels[key] }, key))) }));
+}
+/**
+ * The 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.
+ */
+export function SaveSplitButton({ onSave, saveBlockedReason, busy, onSaveAll, unsavedCount, saveAllBlockedReason, saveAllProgress, saving = false, savedSignal, savedHere = false, entryDirty, draftStorageFailed, }) {
+    const caret = useRef(null);
+    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
+    // before mount or while another entry was open shows nothing later.
+    const [seenSignal, setSeenSignal] = useState(savedSignal ?? 0);
+    const [flashing, setFlashing] = useState();
+    // Leaving the saved entry ends its "Saved", so a quick return doesn't show or announce it again.
+    const [wasHere, setWasHere] = useState(savedHere);
+    if (wasHere !== savedHere) {
+        setWasHere(savedHere);
+        if (!savedHere)
+            setFlashing(undefined);
+    }
+    if (savedSignal !== undefined && savedSignal > seenSignal) {
+        setSeenSignal(savedSignal);
+        setFlashing(savedHere ? savedSignal : undefined);
+    }
+    useEffect(() => {
+        if (flashing === undefined)
+            return;
+        const timer = setTimeout(() => setFlashing(undefined), SAVED_SHOWN_MS);
+        return () => clearTimeout(timer);
+    }, [flashing]);
+    // Blocked, Save stays focusable (`aria-disabled`, not `disabled`), so its reason opens on focus.
+    const saveBlocked = !!saveBlockedReason || busy || !!saveAllProgress;
+    const label = saving
+        ? 'saving'
+        : flashing !== undefined &&
+            flashing === savedSignal &&
+            savedHere &&
+            !entryDirty &&
+            !saveAllProgress
+            ? '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
+                    ? `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, 
+                        // 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: () => {
+                                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, 
+                                        // 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
+                                            ? `${EDITOR_ACTIONS.saveAll} is already running.`
+                                            : unsavedCount === 0
+                                                ? 'No entry on this branch has unsaved changes.'
+                                                : busy
+                                                    ? 'Wait for the current save or load to finish.'
+                                                    : undefined), children: unsavedCount > 0
+                                        ? `${EDITOR_ACTIONS.saveAll} (${unsavedCount})`
+                                        : EDITOR_ACTIONS.saveAll }) })] })] })] }));
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface StagedChangesDrawerProps {
+    opened: boolean;
+    /** 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;
+    /** Whether the viewer may save; without it the save bar never renders. */
+    canEdit: boolean;
+    saveLabel: string;
+    onSave: () => void;
+    onDiscard: () => void;
+    /** A modal of the panel's own is open: the drawer yields Escape to it (Mantine listens for Escape on window, capture phase). */
+    childModalOpen?: boolean;
+    /** Runs once the close transition has finished; see `useOpeningKey`. */
+    onExited?: () => void;
+    /** Names the element that takes focus after the drawer closes, for an opener that unmounted (a menu item). */
+    returnFocusTo?: () => HTMLElement | null;
+    children: React.ReactNode;
+}
+/**
+ * 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
+ * reopen during the close transition cancels it, so that opening keeps the previous state.
+ */
+export declare function useOpeningKey(): {
+    key: number;
+    onExited: () => void;
+};
+/**
+ * The drawer shell for an admin panel that stages edits and saves them as one batch
+ * (groups, permissions). Staged edits exist only in the panel's state, so the shell keeps
+ * 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 declare const StagedChangesDrawer: React.FC<StagedChangesDrawerProps>;

package/dist/editor/components/StagedChangesDrawer.js

@@ -0,0 +1,92 @@
+'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 { openConfirm } from '../utils/confirm-modal.js';
+import { focusReturnProps, rememberOpener, returnTarget } from '../utils/focus-return.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
+ * reopen during the close transition cancels it, so that opening keeps the previous state.
+ */
+export function useOpeningKey() {
+    const [key, onExited] = useReducer((n) => n + 1, 0);
+    return { key, onExited };
+}
+/** Asks the browser to confirm a reload or navigation, for exactly as long as `isDirty` holds. */
+function useBeforeUnloadWhileDirty(isDirty) {
+    useEffect(() => {
+        if (!isDirty)
+            return;
+        const handler = (event) => {
+            event.preventDefault();
+            // Chrome before 119 shows the prompt only when returnValue is set.
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', handler);
+        return () => window.removeEventListener('beforeunload', handler);
+    }, [isDirty]);
+}
+/**
+ * The drawer shell for an admin panel that stages edits and saves them as one batch
+ * (groups, permissions). Staged edits exist only in the panel's state, so the shell keeps
+ * 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, }) => {
+    // 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.
+    const confirmOpenRef = useRef(false);
+    const titleRef = useRef(null);
+    useBeforeUnloadWhileDirty(isDirty);
+    const confirmDiscard = useCallback((body, onConfirm, focusReturn = {}) => {
+        confirmOpenRef.current = true;
+        openConfirm({
+            ...focusReturn,
+            title: 'Discard unsaved changes?',
+            children: _jsx(Text, { size: "sm", children: body }),
+            labels: { confirm: 'Discard changes', cancel: 'Keep editing' },
+            confirmProps: { color: 'red' },
+            onConfirm,
+            // Mantine calls onClose for every exit, the confirm included.
+            onClose: () => {
+                confirmOpenRef.current = false;
+            },
+        });
+    }, []);
+    const requestClose = useCallback(() => {
+        // The save is already on its way to the server; discarding now could not stop it.
+        if (isSaving || confirmOpenRef.current)
+            return;
+        if (!isDirty) {
+            onClose();
+            return;
+        }
+        confirmDiscard('Closing now drops the changes you have not saved.', () => {
+            onDiscard();
+            onClose();
+        });
+    }, [isDirty, isSaving, onClose, onDiscard, confirmDiscard]);
+    const requestDiscard = useCallback(() => {
+        if (isSaving || confirmOpenRef.current)
+            return;
+        // Kept, the changes keep the save bar and its button; discarded, both go, and the title stands in.
+        const opener = rememberOpener();
+        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: () => {
+            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 && (
+            // 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: {
+                    position: 'sticky',
+                    bottom: 0,
+                    zIndex: 1,
+                    background: 'var(--mantine-color-body)',
+                    borderTop: '1px solid var(--mantine-color-default-border)',
+                }, children: [_jsx(Text, { size: "sm", c: "dimmed", children: "Changes take effect only after you save." }), _jsxs(Group, { gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", color: "neutral", onClick: requestDiscard, disabled: isSaving, children: "Discard changes" }), _jsx(Button, { size: "sm", onClick: onSave, loading: isSaving, disabled: isSaving, children: saveLabel })] })] }))] }));
+};

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

@@ -0,0 +1,6 @@
+export interface UnavailableEntryNoticeProps {
+    /** Registry keys the entry's type names; empty when only the 503 flagged it. */
+    schemaRefs: readonly string[];
+}
+/** Stands in for the form of an entry whose type the running code cannot resolve. */
+export declare function UnavailableEntryNotice({ schemaRefs }: UnavailableEntryNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/UnavailableEntryNotice.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { UnavailableTypeMessage } from './UnavailableTypeMessage.js';
+/** Stands in for the form of an entry whose type the running code cannot resolve. */
+export function UnavailableEntryNotice({ schemaRefs }) {
+    return (_jsx("div", { style: { padding: 'var(--mantine-spacing-md)' }, "data-testid": "unavailable-entry-notice", children: _jsx(Alert, { color: "yellow", icon: _jsx(IconAlertCircle, { size: 16 }), title: "This entry can't be edited yet", children: _jsx(UnavailableTypeMessage, { schemaRefs: schemaRefs }) }) }));
+}

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

@@ -0,0 +1,6 @@
+export interface UnavailableTypeMessageProps {
+    /** Registry keys the unavailable entry types name. */
+    schemaRefs: readonly string[];
+}
+/** The shared "this editor version doesn't know this content type" text, refs in a code style. */
+export declare function UnavailableTypeMessage({ schemaRefs }: UnavailableTypeMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/UnavailableTypeMessage.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Code } from '@mantine/core';
+import { unavailableTypeMessageParts } from '../unavailable-entry-type.js';
+/** The shared "this editor version doesn't know this content type" text, refs in a code style. */
+export function UnavailableTypeMessage({ schemaRefs }) {
+    const { before, after } = unavailableTypeMessageParts(schemaRefs);
+    return (_jsxs(_Fragment, { children: [before, schemaRefs.map((ref, i) => (_jsxs("span", { children: [i > 0 && ', ', _jsx(Code, { children: ref })] }, ref))), after] }));
+}

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

@@ -0,0 +1,18 @@
+export interface UndoToastMessageProps {
+    /** Names what was removed: `"Branch-aware" from Features`, `item 2 from Features`, `"SEO"`. */
+    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;
+    /**
+     * Called when keyboard focus reaches the toast. Mantine pauses its timer on hover only, so the
+     * caller stops it here or the toast can close under the focused Undo.
+     */
+    onHold?: () => void;
+    /** 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;

package/dist/editor/components/UndoToastMessage.js

@@ -0,0 +1,10 @@
+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'];
+    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" })] }));
+}

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

@@ -1,15 +1,11 @@
 import type { UserSearchResult } from '../../auth/types.js';
 import type { CanopyUserId } from '../../types.js';
 export interface UserBadgeProps {
-    /** User ID to display */
     userId: CanopyUserId;
-    /** Function to fetch user metadata by ID */
     getUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
-    /** Display mode */
     variant?: 'avatar-only' | 'avatar-name' | 'full';
     /** Show email tooltip on hover (default: true) */
     showEmailTooltip?: boolean;
-    /** Optional removal button */
     onRemove?: (userId: CanopyUserId) => void;
     /** Color theme (for Badge wrapper) */
     color?: string;
@@ -19,9 +15,10 @@ export interface UserBadgeProps {
     badgeVariant?: 'filled' | 'light' | 'outline';
     /** Always show Badge wrapper (even without onRemove) */
     showBadge?: boolean;
-    /** Loading state override */
     loading?: boolean;
     /** Cached user data to avoid fetching (e.g., from search results) */
     cachedUser?: UserSearchResult;
+    /** Admin-only surfaces: a person with no name to show has their id in the tooltip, remove label and hidden text. */
+    revealIdOnFallback?: boolean;
 }
 export declare const UserBadge: React.FC<UserBadgeProps>;