canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/comments/use-tracked-writes.js

@@ -0,0 +1,53 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { notifications } from '@mantine/notifications';
+import { getErrorMessage } from '../../utils/error.js';
+import { MayHaveLandedError } from '../unanswered.js';
+/** Shown while a surface refuses to close because a comment write is still in flight. */
+export const CLOSE_WAITS_FOR_WRITE = 'Still saving… You can close this once it finishes.';
+/**
+ * Wraps a surface's comment writes: `inFlight` counts the unsettled ones, and a write that fails
+ * after the surface unmounted (the Branches drawer closed under the branch discussion, another
+ * entry or branch opened) still reports, as a toast, since nothing is left on screen to show the
+ * error. A wrapped write still rejects for its caller. `holdOpen()` is true while a write is in
+ * flight, and then sets `closeRefused` until the writes settle, which the API client's request
+ * deadline bounds, so a surface that refuses to close can say why.
+ */
+export function useTrackedWrites() {
+    const [inFlight, setInFlight] = useState(0);
+    const [closeRefused, setCloseRefused] = useState(false);
+    if (closeRefused && inFlight === 0)
+        setCloseRefused(false);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const track = (write) => async (...args) => {
+        setInFlight((n) => n + 1);
+        try {
+            await write(...args);
+        }
+        catch (err) {
+            if (!mountedRef.current) {
+                notifications.show({
+                    color: err instanceof MayHaveLandedError ? 'yellow' : 'red',
+                    message: getErrorMessage(err),
+                    autoClose: false,
+                });
+            }
+            throw err;
+        }
+        finally {
+            setInFlight((n) => n - 1);
+        }
+    };
+    const holdOpen = () => {
+        if (inFlight > 0)
+            setCloseRefused(true);
+        return inFlight > 0;
+    };
+    return { inFlight, track, holdOpen, closeRefused };
+}

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

@@ -0,0 +1,15 @@
+import type { UserSearchResult } from '../../auth/types.js';
+export interface BranchAccessListProps {
+    users?: readonly string[];
+    groups?: readonly string[];
+    /** ACL entries the server withheld from this viewer (`BranchListItem.withheldAccess`). */
+    withheldUsers?: number;
+    withheldGroups?: number;
+    getUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
+}
+/**
+ * A branch's access list as one line of text: the people the viewer's lookup names, the groups
+ * they may see, then "and N others" for the rest (docs/ux-guidelines.md, People). An unnamed
+ * person is counted, not shown as "Name unavailable".
+ */
+export declare function BranchAccessList({ users, groups, withheldUsers, withheldGroups, getUserMetadata, }: BranchAccessListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/components/BranchAccessList.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Skeleton, Text } from '@mantine/core';
+import { personName } from '../../auth/person-name.js';
+const count = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+/** The trailing count, after the names shown or standing alone. */
+const othersLabel = (people, groups, afterNames) => {
+    if (afterNames)
+        return `and ${count(people + groups, 'other', 'others')}`;
+    if (groups === 0)
+        return count(people, 'person', 'people');
+    if (people === 0)
+        return count(groups, 'group', 'groups');
+    return `${count(people, 'person', 'people')} and ${count(groups, 'group', 'groups')}`;
+};
+/**
+ * A branch's access list as one line of text: the people the viewer's lookup names, the groups
+ * they may see, then "and N others" for the rest (docs/ux-guidelines.md, People). An unnamed
+ * person is counted, not shown as "Name unavailable".
+ */
+export function BranchAccessList({ users = [], groups = [], withheldUsers = 0, withheldGroups = 0, getUserMetadata, }) {
+    const usersKey = users.join('\n');
+    // Tagged with what it answers, so a list or lookup that changed reads as still loading.
+    const [result, setResult] = useState();
+    useEffect(() => {
+        let current = true;
+        void Promise.all(usersKey
+            .split('\n')
+            .filter(Boolean)
+            .map((id) => getUserMetadata(id).catch(() => null))).then((records) => {
+            if (!current)
+                return;
+            setResult({
+                usersKey,
+                lookup: getUserMetadata,
+                named: records.filter((record) => !!record && personName(record.id, record.name) !== undefined),
+            });
+        });
+        return () => {
+            current = false;
+        };
+    }, [usersKey, getUserMetadata]);
+    const named = result?.usersKey === usersKey && result.lookup === getUserMetadata ? result.named : null;
+    if (users.length + groups.length + withheldUsers + withheldGroups === 0)
+        return null;
+    const otherPeople = named ? users.length - named.length + withheldUsers : 0;
+    const shown = [...(named ?? []).map((user) => personName(user.id, user.name) ?? ''), ...groups];
+    const others = otherPeople + withheldGroups > 0
+        ? othersLabel(otherPeople, withheldGroups, shown.length > 0)
+        : '';
+    return (_jsxs(Text, { size: "xs", c: "dimmed", "aria-busy": named === null || undefined, children: ['Access: ', named === null ? (_jsx(Skeleton, { component: "span", display: "inline-block", height: 10, width: 120 })) : ([shown.join(', '), others].filter(Boolean).join(' '))] }));
+}

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

@@ -0,0 +1,22 @@
+import type { BranchStatus } from '../../types.js';
+export interface BranchLockInput {
+    branchStatus: BranchStatus | undefined;
+    /** The protected base branch, read-only in prod. */
+    branchReadOnly?: boolean;
+    branchWriteBlocked?: boolean;
+}
+/**
+ * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
+ * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
+ * base-branch read-only takes precedence over a workflow status lock.
+ */
+export declare function branchLockState({ branchStatus, branchReadOnly, branchWriteBlocked, }: BranchLockInput): {
+    statusLocked: boolean;
+    branchDataUnavailable: boolean;
+};
+export interface BranchLockBannerProps extends BranchLockInput {
+    branchName: string;
+    onBranchManagerOpen: () => void;
+}
+/** The banner region's explanation of a read-only branch; not dismissible while it applies. */
+export declare function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }: BranchLockBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/components/BranchLockBanner.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Group, Text } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+/**
+ * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
+ * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
+ * base-branch read-only takes precedence over a workflow status lock.
+ */
+export function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
+    const statusLocked = branchWriteBlocked && !branchReadOnly;
+    // `branchStatus` can't describe the lock while branch data loads (undefined) or under version
+    // skew (an old server omits `branchWriteBlocked` but reports 'editing'), so both read as
+    // "details unavailable" rather than naming a status the lock contradicts.
+    const branchDataUnavailable = statusLocked && (branchStatus === undefined || branchStatus === 'editing');
+    return { statusLocked, branchDataUnavailable };
+}
+/** The banner region's explanation of a read-only branch; not dismissible while it applies. */
+export function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }) {
+    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
+    if (!lock.branchReadOnly && !statusLocked)
+        return null;
+    const [testId, message, action] = lock.branchReadOnly
+        ? [
+            'protected-branch-banner',
+            `You are viewing the protected base branch "${branchName}". Content is read-only — create a branch to make changes.`,
+            `${EDITOR_ACTIONS.newBranch}…`,
+        ]
+        : [
+            'status-locked-banner',
+            branchDataUnavailable
+                ? `Branch details for "${branchName}" could not be loaded, so content is locked until they arrive. Use Switch branch… to retry.`
+                : lock.branchStatus === 'submitted'
+                    ? `Branch "${branchName}" is submitted for review and locked for edits. Withdraw it from review to make changes.`
+                    : `Branch "${branchName}" is ${lock.branchStatus} — content is read-only.`,
+            `${EDITOR_ACTIONS.switchBranch}…`,
+        ];
+    return (_jsx(Box, { px: "md", py: "sm", children: _jsx(Alert, { icon: _jsx(IconLock, { size: 16 }), color: "yellow", variant: "light", "data-testid": testId, children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsx(Text, { size: "sm", children: message }), _jsx(Button, { variant: "default", onClick: onBranchManagerOpen, children: action })] }) }) }));
+}

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

@@ -0,0 +1,32 @@
+import { type Ref } from 'react';
+import type { LogicalPath } from '../../paths/types.js';
+export interface BranchPillProps {
+    branchName: string;
+    /** The editor is busy; with no branch name yet, that is the branch list loading. */
+    loading: boolean;
+    /** The status label ("Editing", "In review", "Protected"), when the mode shows one. */
+    status?: {
+        label: string;
+        testId: string;
+        value: string;
+    };
+    /** How many entries on the branch have unsaved changes, counting any the list can't name yet. */
+    unsavedCount: number;
+    /** The listed entries with unsaved changes. */
+    unsavedEntries: Array<{
+        path: LogicalPath;
+        label: string;
+    }>;
+    onSwitchBranch: () => void;
+    onRefreshBranch: () => void;
+    onDiscardAll: () => void;
+    onEntrySelect: (path: LogicalPath) => void;
+    /** The pill, which stands in for a menu item that opened something. */
+    pillRef?: Ref<HTMLButtonElement>;
+}
+/**
+ * The branch's name, status and unsaved count. Its menu holds the branch actions and lists the
+ * unsaved entries, each opening that entry. Below `sm` it is the branch icon and the count, its
+ * name then in its Tooltip, accessible name and menu label: the row's actions must not clip.
+ */
+export declare function BranchPill({ branchName, loading, status, unsavedCount: unsaved, unsavedEntries, onSwitchBranch, onRefreshBranch, onDiscardAll, onEntrySelect, pillRef, }: BranchPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/BranchPill.js

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface BranchesDrawerProps {
+    opened: boolean;
+    onClose: () => void;
+    /** A confirm opened from inside is on screen: the drawer yields Escape to it (Mantine listens for Escape on window, capture phase). */
+    confirmOpen: boolean;
+    /** Names the element that takes focus after the drawer closes, for an opener that unmounted (a menu item). */
+    returnFocusTo?: () => HTMLElement | null;
+    children: React.ReactNode;
+}
+export declare const BranchesDrawer: React.FC<BranchesDrawerProps>;

package/dist/editor/components/BranchesDrawer.js

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

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface ConfirmDeleteModalProps {
     isOpen: boolean;
     title: string;
@@ -6,9 +7,13 @@ export interface ConfirmDeleteModalProps {
     onConfirm: () => void;
     onClose: () => void;
     loading?: boolean;
+    /** Rendered between the message and the buttons. */
+    children?: ReactNode;
+    /** Where focus goes once it closes; Mantine's default, the element focused at open, without it. */
+    returnFocusTo?: () => HTMLElement | null;
 }
 /**
  * Confirmation modal for delete operations.
  * Provides a clear warning UI with red/danger theme.
  */
-export declare function ConfirmDeleteModal({ isOpen, title, message, confirmLabel, onConfirm, onClose, loading, }: ConfirmDeleteModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDeleteModal({ isOpen, title, message, confirmLabel, onConfirm, onClose, loading, children, returnFocusTo, }: ConfirmDeleteModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ConfirmDeleteModal.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, Button, Text, Group, Stack } from '@mantine/core';
+import { focusReturnProps } from '../utils/focus-return.js';
 /**
  * Confirmation modal for delete operations.
  * Provides a clear warning UI with red/danger theme.
  */
-export function ConfirmDeleteModal({ isOpen, title, message, confirmLabel = 'Delete', onConfirm, onClose, loading = false, }) {
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: title, centered: true, size: "md", children: _jsxs(Stack, { gap: "md", "data-testid": "confirm-delete-modal", children: [_jsx(Text, { size: "sm", children: message }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "default", onClick: onClose, disabled: loading, children: "Cancel" }), _jsx(Button, { color: "red", onClick: onConfirm, loading: loading, "data-testid": "confirm-delete-submit", children: confirmLabel })] })] }) }));
+export function ConfirmDeleteModal({ isOpen, title, message, confirmLabel = 'Delete', onConfirm, onClose, loading = false, children, returnFocusTo, }) {
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: title, centered: true, size: "md", closeButtonProps: { disabled: loading }, closeOnEscape: !loading, closeOnClickOutside: !loading, ...focusReturnProps(returnFocusTo), children: _jsxs(Stack, { gap: "md", "data-testid": "confirm-delete-modal", children: [_jsx(Text, { size: "sm", children: message }), children, _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, disabled: loading, children: "Cancel" }), _jsx(Button, { size: "sm", color: "red", onClick: onConfirm, loading: loading, "data-testid": "confirm-delete-submit", children: confirmLabel })] })] }) }));
 }

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ReasonedMenuItemProps } from './ReasonedMenuItem.js';
+/**
+ * A menu item that deletes or removes. Mantine inlines a red item's text at red.6 (3.3:1 on
+ * white), out of the theme's reach, so it takes `--canopy-danger-text`.
+ */
+export declare const DestructiveMenuItem: React.FC<Omit<ReasonedMenuItemProps, 'color'>>;

package/dist/editor/components/DestructiveMenuItem.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReasonedMenuItem } from './ReasonedMenuItem.js';
+/**
+ * A menu item that deletes or removes. Mantine inlines a red item's text at red.6 (3.3:1 on
+ * white), out of the theme's reach, so it takes `--canopy-danger-text`.
+ */
+export const DestructiveMenuItem = (props) => (_jsx(ReasonedMenuItem, { color: "red", c: "var(--canopy-danger-text)", ...props }));

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type CanopyThemeOptions } from '../theme.js';
+/**
+ * The editor's URL opening no entry, keeping the branch: an empty `entry` shows the navigator
+ * rather than the first entry, which may be the one that crashed.
+ * @internal Exported for tests.
+ */
+export declare const entriesUrl: (href: string) => string;
+/**
+ * The last resort when the editor itself throws while rendering. It brings its own theme
+ * provider, the editor's having gone with the crash. Edits made before the crash are in the
+ * browser's draft store, so a reload offers them; the edit whose render crashed is not.
+ */
+export declare const EditorCrashBoundary: React.FC<{
+    themeOptions?: CanopyThemeOptions;
+    children: React.ReactNode;
+}>;

package/dist/editor/components/EditorCrashScreen.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Center, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { IconAlertTriangle, IconArrowLeft, IconRefresh } from '@tabler/icons-react';
+import { CanopyCMSProvider } from '../theme.js';
+import { CopyErrorDetailsButton, EditorErrorBoundary } from './EditorErrorBoundary.js';
+/**
+ * The editor's URL opening no entry, keeping the branch: an empty `entry` shows the navigator
+ * rather than the first entry, which may be the one that crashed.
+ * @internal Exported for tests.
+ */
+export const entriesUrl = (href) => {
+    const url = new URL(href);
+    url.searchParams.set('entry', '');
+    return url.toString();
+};
+/**
+ * The last resort when the editor itself throws while rendering. It brings its own theme
+ * provider, the editor's having gone with the crash. Edits made before the crash are in the
+ * browser's draft store, so a reload offers them; the edit whose render crashed is not.
+ */
+export const EditorCrashBoundary = ({ themeOptions, children }) => (_jsx(EditorErrorBoundary, { context: { boundary: 'editor' }, fallback: (caught) => (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(Center, { mih: "100vh", p: "md", "data-testid": "editor-crash-screen", children: _jsx(Paper, { withBorder: true, p: "xl", maw: 560, children: _jsxs(Stack, { gap: "md", children: [_jsxs(Group, { gap: "sm", children: [_jsx(IconAlertTriangle, { size: 24, color: "var(--canopy-danger-text)" }), _jsx(Title, { order: 3, children: "The editor stopped working" })] }), _jsx(Text, { size: "sm", children: "Something went wrong while showing this page. Unsaved changes made before the error are kept in this browser and come back when the editor opens again." }), _jsx(Text, { size: "sm", children: "Reload to try again. If it happens again on the same entry, go back to the list of entries and copy the error details for whoever looks after the site." }), _jsxs(Group, { gap: "sm", children: [_jsx(Button, { size: "sm", leftSection: _jsx(IconRefresh, { size: 16 }), onClick: () => window.location.reload(), children: "Reload" }), _jsx(Button, { size: "sm", variant: "default", leftSection: _jsx(IconArrowLeft, { size: 16 }), onClick: () => window.location.assign(entriesUrl(window.location.href)), children: "Back to entries" }), _jsx(CopyErrorDetailsButton, { caught: caught, size: "sm" })] })] }) }) }) })), children: children }));

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type EditorErrorContext } from '../utils/editor-errors.js';
+export interface CaughtEditorError {
+    error: unknown;
+    context: EditorErrorContext;
+}
+interface EditorErrorBoundaryProps {
+    context: Omit<EditorErrorContext, 'componentStack'>;
+    /** A change shows the children again, without remounting healthy ones. */
+    resetKey?: string;
+    fallback: (caught: CaughtEditorError) => React.ReactNode;
+    /** Runs after the error is reported. */
+    onCaught?: (caught: CaughtEditorError) => void;
+    children: React.ReactNode;
+}
+interface EditorErrorBoundaryState {
+    error: {
+        value: unknown;
+        componentStack?: string;
+    } | null;
+    /** The `resetKey` the boundary last rendered under. */
+    renderedUnder: string | undefined;
+}
+/** Catches errors thrown while rendering its children and reports each through `reportEditorError`. */
+export declare class EditorErrorBoundary extends React.Component<EditorErrorBoundaryProps, EditorErrorBoundaryState> {
+    state: EditorErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): Partial<EditorErrorBoundaryState>;
+    static getDerivedStateFromProps(props: EditorErrorBoundaryProps, state: EditorErrorBoundaryState): Partial<EditorErrorBoundaryState> | null;
+    componentDidCatch(error: unknown, info: React.ErrorInfo): void;
+    private caught;
+    render(): React.ReactNode;
+}
+/** Copies the sanitised details of a caught error, for the author to pass on. */
+export declare const CopyErrorDetailsButton: React.FC<{
+    caught: CaughtEditorError;
+    size?: 'xs' | 'sm';
+}>;
+export {};

package/dist/editor/components/EditorErrorBoundary.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Button, CopyButton } from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { formatErrorDetails, reportEditorError, } from '../utils/editor-errors.js';
+/** Catches errors thrown while rendering its children and reports each through `reportEditorError`. */
+export class EditorErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null, renderedUnder: this.props.resetKey };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: { value: error } };
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (props.resetKey === state.renderedUnder)
+            return null;
+        return { error: null, renderedUnder: props.resetKey };
+    }
+    componentDidCatch(error, info) {
+        const caught = this.caught({ value: error, componentStack: info.componentStack ?? undefined });
+        reportEditorError(error, caught.context);
+        this.setState({ error: { value: error, componentStack: caught.context.componentStack } });
+        this.props.onCaught?.(caught);
+    }
+    caught(error) {
+        return {
+            error: error.value,
+            context: { ...this.props.context, componentStack: error.componentStack },
+        };
+    }
+    render() {
+        return this.state.error
+            ? this.props.fallback(this.caught(this.state.error))
+            : this.props.children;
+    }
+}
+/** Copies the sanitised details of a caught error, for the author to pass on. */
+export const CopyErrorDetailsButton = ({ caught, size = 'xs' }) => (_jsx(CopyButton, { value: formatErrorDetails(caught.error, caught.context), children: ({ copied, copy }) => (_jsx(Button, { size: size, variant: "light", color: copied ? 'teal' : 'gray', leftSection: copied ? _jsx(IconCheck, { size: 14 }) : _jsx(IconCopy, { size: 14 }), onClick: copy, "data-testid": "copy-error-details", children: copied ? 'Copied' : 'Copy error details' })) }));