canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/PreviewFrame.js

@@ -0,0 +1,215 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
+/**
+ * How long after the iframe's `load` the preview has to send its ready message before the frame
+ * says live updates are off. Ready can also arrive before `load`, which waits for images too.
+ */
+const READY_TIMEOUT_MS = 5000;
+const LIVE_UPDATES_OFF_HELP = "The preview didn't connect, so your edits won't show in it until it reconnects. Retry reloads the preview; your edits are kept.";
+const visuallyHidden = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0,
+};
+const isMarkPaths = (paths) => Array.isArray(paths) &&
+    paths.length <= MARK_REPORT_LIMITS.paths &&
+    paths.every((path) => typeof path === 'string' && path.length <= MARK_REPORT_LIMITS.pathLength);
+const sendDraftUpdate = (iframe, message, targetOrigin) => {
+    if (!iframe?.contentWindow)
+        return;
+    const target = targetOrigin ?? resolveMessageOrigin(iframe.src);
+    if (isOpaqueOrigin(target))
+        return;
+    iframe.contentWindow.postMessage(message, target);
+};
+/**
+ * Lightweight iframe wrapper to keep the preview in sync with form state.
+ * It posts the latest draft data to the iframe after load and when data changes. A progress bar
+ * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
+ * to reload the preview.
+ */
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }) => {
+    const iframeRef = useRef(null);
+    // Pin the preview origin from the src prop: outbound messages target it (never '*'),
+    // and inbound messages must come from it. An iframe that navigates cross-origin
+    // silently stops participating in the bridge.
+    const previewOrigin = resolveMessageOrigin(src);
+    // Only the ready message clears the progress bar: `onLoad` can post the draft before the
+    // preview's listener exists, so only the re-post that ready triggers is sure to land.
+    const [handshake, setHandshake] = useState('waiting');
+    const [loaded, setLoaded] = useState(false);
+    // Retry and a new src each mount a fresh iframe rather than navigating the old one, so a late
+    // ready from the page it replaces fails the source check, and a late load has no handler.
+    const [retries, setRetries] = useState(0);
+    // A new src is a new page, with a handshake of its own.
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setHandshake('waiting');
+        setLoaded(false);
+    }
+    useEffect(() => {
+        if (!loaded || handshake !== 'waiting')
+            return;
+        // Functional, so a ready batched into the same render as this callback still wins.
+        const timer = setTimeout(() => setHandshake((current) => (current === 'waiting' ? 'missing' : current)), READY_TIMEOUT_MS);
+        return () => clearTimeout(timer);
+    }, [loaded, handshake]);
+    const retry = () => {
+        setHandshake('waiting');
+        setLoaded(false);
+        setRetries((count) => count + 1);
+    };
+    const hasDraft = data !== undefined;
+    const syncPending = hasDraft && handshake === 'waiting';
+    const liveUpdatesOff = hasDraft && handshake === 'missing';
+    // Inject the progress bar keyframe animation once per page.
+    useEffect(() => {
+        const styleId = 'canopycms-preview-sync-style';
+        if (!document.getElementById(styleId)) {
+            const el = document.createElement('style');
+            el.id = styleId;
+            el.textContent = `@keyframes canopy-preview-sync { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }`;
+            document.head.appendChild(el);
+        }
+    }, []);
+    const post = () => {
+        if (data === undefined)
+            return;
+        const sameOrigin = previewOrigin === window.location.origin;
+        sendDraftUpdate(iframeRef.current, {
+            type: CANOPY_PREVIEW_MESSAGE,
+            path,
+            data,
+            isLoading,
+            ...(assetBase !== undefined && sameOrigin ? { assetBase } : {}),
+        }, previewOrigin);
+    };
+    const postHighlight = () => {
+        if (!iframeRef.current?.contentWindow)
+            return;
+        if (isOpaqueOrigin(previewOrigin))
+            return;
+        const msg = {
+            type: CANOPY_PREVIEW_HIGHLIGHT,
+            enabled: Boolean(highlightEnabled),
+        };
+        iframeRef.current.contentWindow.postMessage(msg, previewOrigin);
+    };
+    // Keep refs pointing at the latest closures so the message handler below never goes stale.
+    const postRef = useRef(post);
+    const postHighlightRef = useRef(postHighlight);
+    const onPreviewErrorRef = useRef(onPreviewError);
+    const onMarksRef = useRef(onMarks);
+    useEffect(() => {
+        postRef.current = post;
+        postHighlightRef.current = postHighlight;
+        onPreviewErrorRef.current = onPreviewError;
+        onMarksRef.current = onMarks;
+    });
+    useEffect(() => {
+        post();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
+    }, [data, isLoading]);
+    useEffect(() => {
+        postHighlight();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- postHighlight is tracked via ref
+    }, [highlightEnabled]);
+    // When the preview page's React effects have run and its message listener is ready,
+    // it sends CANOPY_PREVIEW_READY. We respond with the current data so the preview
+    // receives the draft even if it wasn't ready when onLoad fired.
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (!iframeRef.current || event.source !== iframeRef.current.contentWindow)
+                return;
+            // Source check alone is insufficient if the iframe navigated cross-origin.
+            if (isOpaqueOrigin(previewOrigin) || event.origin !== previewOrigin)
+                return;
+            const type = event.data?.type;
+            if (type === CANOPY_PREVIEW_READY) {
+                postRef.current();
+                postHighlightRef.current();
+                setHandshake('ready');
+            }
+            else if (type === CANOPY_PREVIEW_ERROR) {
+                const msg = event.data;
+                // Shape-check the payload: an adopter passing an Error object (instead of
+                // err.message) must not crash the editor when rendered as a React child.
+                if (msg.message != null && typeof msg.message !== 'string')
+                    return;
+                const fieldPath = typeof msg.fieldPath === 'string' ? msg.fieldPath : undefined;
+                onPreviewErrorRef.current?.(msg.message == null
+                    ? null
+                    : { message: msg.message, ...(fieldPath ? { fieldPath } : {}) });
+            }
+            else if (type === CANOPY_PREVIEW_MARKS) {
+                const { count, paths } = event.data;
+                if (typeof count === 'number' && Number.isInteger(count) && count >= 0) {
+                    onMarksRef.current?.({ count, ...(isMarkPaths(paths) ? { paths } : {}) });
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [previewOrigin]);
+    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', ...style }, children: [syncPending && (_jsx("div", { role: "progressbar", "aria-label": "Connecting to the preview", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: 3,
+                    zIndex: 1,
+                    overflow: 'hidden',
+                }, children: _jsx("div", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        height: '100%',
+                        width: '40%',
+                        background: 'var(--mantine-color-blue-filled, #228be6)',
+                        borderRadius: '0 2px 2px 0',
+                        animation: 'canopy-preview-sync 1.5s ease-in-out infinite',
+                    } }) })), _jsx("div", { role: "status", style: { position: 'absolute', top: 8, right: 8, zIndex: 1 }, children: liveUpdatesOff && (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        padding: '2px 4px 2px 10px',
+                        borderRadius: 999,
+                        border: '1px solid var(--mantine-color-default-border)',
+                        background: 'var(--mantine-color-body)',
+                        boxShadow: 'var(--mantine-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.1))',
+                        color: 'var(--mantine-color-dimmed)',
+                        fontFamily: 'var(--mantine-font-family, inherit)',
+                        fontSize: 12,
+                        lineHeight: '20px',
+                    }, children: [_jsx("span", { title: LIVE_UPDATES_OFF_HELP, children: "Live updates off" }), _jsx("span", { style: visuallyHidden, children: LIVE_UPDATES_OFF_HELP }), _jsx("button", { type: "button", onClick: onReload ?? retry, title: "Reload the preview", style: {
+                                border: 'none',
+                                borderRadius: 999,
+                                padding: '0 8px',
+                                background: 'transparent',
+                                color: 'var(--mantine-color-blue-filled, #228be6)',
+                                font: 'inherit',
+                                fontWeight: 600,
+                                cursor: 'pointer',
+                            }, children: "Retry" })] })) }), _jsx("iframe", { ref: iframeRef, src: src, title: "Live preview", style: {
+                    display: 'block',
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                    ...iframeStyle,
+                }, onLoad: () => {
+                    post();
+                    postHighlight();
+                    setLoaded(true);
+                } }, `${retries}:${src}`)] }));
+};

package/dist/editor/PreviewPane.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { PreviewWidth } from './hooks/useEditorLayout.js';
+import { type PreviewMarks } from './PreviewFrame.js';
+import type { InexactMark } from './preview-marks.js';
+import type { PaneArrangement } from './shell/PaneLayout.js';
+import { type PreviewMount } from './preview-path.js';
+export interface PreviewPaneProps {
+    src: string;
+    /** The page's path for the bridge and the toolbar; defaults to `src`. */
+    path?: string;
+    /** Where the preview routes are mounted; the toolbar's path leaves out the `previewPrefix`. */
+    mount?: PreviewMount;
+    data?: unknown;
+    isLoading?: unknown;
+    highlightEnabled?: boolean;
+    assetBase?: string;
+    onPreviewError?: (error: {
+        message: string;
+        fieldPath?: string;
+    } | null) => void;
+    onMarks?: (marks: PreviewMarks) => void;
+    previewWidth: PreviewWidth;
+    onPreviewWidthChange: (width: PreviewWidth) => void;
+    /** Shown between the toolbar and the preview, such as a preview error. */
+    notice?: ReactNode;
+    /** With `onHighlightToggle`, the toolbar shows the highlight toggle. */
+    onHighlightToggle?: () => void;
+    /** The page marked nothing while highlighting; see `usePreviewMarks`. */
+    marksNothing?: boolean;
+    /** Marks naming no field of the entry, counted in the toolbar only with `showMarkDiagnostics`. */
+    inexactMarks?: readonly InexactMark[];
+    /** Admins only: diagnostics of the site's markup are no editor's to act on. */
+    showMarkDiagnostics?: boolean;
+    /** Shapes the size readout shown while the divider is dragged. */
+    layout?: PaneArrangement;
+    /** With `onMaximizedChange`, the toolbar offers Maximize, and Esc restores. */
+    maximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** A drag of the preview/form divider is under way: the preview shows its size over itself. */
+    resizing?: boolean;
+}
+/**
+ * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
+ * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
+ * down to fit a narrower pane.
+ */
+export declare const PreviewPane: ({ src, path, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewPane.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ActionIcon, Box, Group, Select, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { useClipboard, useElementSize, useWindowEvent } from '@mantine/hooks';
+import { IconCheck, IconExternalLink, IconRefresh } from '@tabler/icons-react';
+import { PreviewFrame } from './PreviewFrame.js';
+import { HighlightToggle, MaximizeToggle, UnmappedMarksChip } from './PreviewToolbarTools.js';
+import { displayPreviewPath } from './preview-path.js';
+import { computePreviewViewport, formatPreviewWidthReadout, PREVIEW_DEVICE_WIDTHS, } from './preview-scale.js';
+const WIDTH_OPTIONS = [
+    { value: 'fit', label: 'Fit', detail: 'Pane width' },
+    { value: 'desktop', label: 'Desktop', detail: `${PREVIEW_DEVICE_WIDTHS.desktop} px` },
+    { value: 'tablet', label: 'Tablet', detail: `${PREVIEW_DEVICE_WIDTHS.tablet} px` },
+    { value: 'mobile', label: 'Mobile', detail: `${PREVIEW_DEVICE_WIDTHS.mobile} px` },
+];
+const isPreviewWidth = (value) => WIDTH_OPTIONS.some((option) => option.value === value);
+const TEXT_INPUT_TYPES = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
+const hasTextToClear = (element) => ((element instanceof HTMLInputElement && TEXT_INPUT_TYPES.has(element.type)) ||
+    element instanceof HTMLTextAreaElement) &&
+    !element.readOnly &&
+    element.value !== '';
+const RELOAD_LABEL = 'Reload preview';
+const OPEN_SAVED_LABEL = 'Open saved version in a new tab';
+/**
+ * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
+ * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
+ * down to fit a narrower pane.
+ */
+export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, ...frameProps }) => {
+    const { ref: viewportRef, width, height } = useElementSize();
+    const rootRef = useRef(null);
+    const maximizeRef = useRef(null);
+    const restoreRef = useRef(null);
+    // Maximize and Restore swap places, so focus follows to the other. Restoring by other means,
+    // such as a preview click that focuses a form field, leaves focus where that put it.
+    const wasMaximized = useRef(maximized);
+    useLayoutEffect(() => {
+        if (maximized && !wasMaximized.current)
+            restoreRef.current?.focus();
+        if (!maximized && wasMaximized.current && document.activeElement === document.body) {
+            maximizeRef.current?.focus();
+        }
+        wasMaximized.current = maximized;
+    }, [maximized]);
+    // Escape from the editor's shell, or with focus nowhere, restores: a drawer or modal outside it
+    // closes on its own Escape, an open popup marks its owner, and a text field with text keeps it.
+    // Captured, because an open tooltip's dismiss stops the key on the document. A key inside the
+    // preview frame never reaches this window.
+    useWindowEvent('keydown', (event) => {
+        if (!maximized || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLElement))
+            return;
+        const inEditor = rootRef.current?.closest('[data-canopy-shell]')?.contains(target);
+        if (target !== document.body && !(inEditor ?? rootRef.current?.contains(target)))
+            return;
+        if (target.isContentEditable || hasTextToClear(target))
+            return;
+        if (target.closest('[data-mantine-stop-propagation="true"], [aria-haspopup][aria-expanded="true"]'))
+            return;
+        event.preventDefault();
+        onMaximizedChange?.(false);
+    }, { capture: true });
+    const clipboard = useClipboard({ timeout: 2000 });
+    const reloadButtonRef = useRef(null);
+    // A dismissed notice takes its focused Close button with it; the toolbar takes the focus back.
+    // Focus anywhere else, such as a form field while a draft starts compiling, stays put.
+    const hadNotice = useRef(false);
+    useEffect(() => {
+        if (hadNotice.current && !notice && document.activeElement === document.body) {
+            reloadButtonRef.current?.focus();
+        }
+        hadNotice.current = Boolean(notice);
+    }, [notice]);
+    // Reloading remounts the frame for a fresh handshake. It drops a reported error too: a page
+    // that reports draft errors reports it again once the reloaded page renders the draft.
+    const [reloads, setReloads] = useState(0);
+    const reload = () => {
+        setReloads((count) => count + 1);
+        frameProps.onPreviewError?.(null);
+    };
+    const shownPath = displayPreviewPath(path, mount);
+    const viewport = computePreviewViewport(previewWidth, width, height);
+    const iframeStyle = previewWidth === 'fit'
+        ? undefined
+        : {
+            inset: 'auto',
+            top: 0,
+            left: viewport.offsetX,
+            width: viewport.frameWidth,
+            height: viewport.frameHeight,
+            transform: `scale(${viewport.scale})`,
+            transformOrigin: '0 0',
+            background: 'var(--mantine-color-body)',
+            boxShadow: '0 0 0 1px var(--mantine-color-default-border)',
+        };
+    const copyStatus = clipboard.copied
+        ? 'Path copied'
+        : clipboard.error
+            ? "Couldn't copy the path"
+            : '';
+    const copyLabel = `Copy path ${shownPath}`;
+    return (_jsxs(Box, { ref: rootRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            border: '1px solid var(--mantine-color-default-border)',
+        }, children: [_jsxs(Group, { role: "group", "aria-label": "Preview toolbar", "data-testid": "preview-toolbar", gap: 6, px: 6, style: {
+                    // Wraps to a second row, rather than clipping, in a pane too narrow for one.
+                    minHeight: 32,
+                    rowGap: 2,
+                    paddingBlock: 2,
+                    flex: '0 0 auto',
+                    borderBottom: '1px solid var(--mantine-color-default-border)',
+                    background: 'var(--mantine-color-body)',
+                }, children: [_jsx(Tooltip, { label: copyStatus || copyLabel, multiline: true, maw: 360, style: { overflowWrap: 'anywhere' }, children: _jsx(UnstyledButton, { onClick: () => clipboard.copy(shownPath), "aria-label": copyLabel, style: { flex: '1 1 80px', minWidth: 0, borderRadius: 4, padding: '2px 4px' }, children: _jsx(Text, { component: "span", size: "xs", ff: "monospace", truncate: "end", display: "block", children: shownPath }) }) }), _jsx(VisuallyHidden, { role: "status", children: copyStatus }), _jsx(Select, { "aria-label": "Preview width", data: WIDTH_OPTIONS, value: previewWidth, onChange: (value) => {
+                            if (isPreviewWidth(value))
+                                onPreviewWidthChange(value);
+                        }, allowDeselect: false, size: "xs", w: 96, style: { flexShrink: 0 }, styles: { input: { height: 24, minHeight: 24 } }, comboboxProps: { width: 170, position: 'bottom-end' }, renderOption: ({ option, checked }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", w: "100%", children: [_jsx(IconCheck, { "aria-hidden": true, size: 14, style: { visibility: checked ? 'visible' : 'hidden' } }), _jsx("span", { style: { flex: 1 }, children: option.label }), _jsx(Text, { component: "span", size: "xs", children: WIDTH_OPTIONS.find((o) => o.value === option.value)?.detail })] })) }), width > 0 && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "preview-width-readout", style: { flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, children: formatPreviewWidthReadout(viewport) })), (onHighlightToggle || (showMarkDiagnostics && inexactMarks.length > 0)) && (_jsxs(Group, { gap: 6, wrap: "nowrap", children: [onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: src, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [_jsx(PreviewFrame, { src: src, path: path, ...frameProps, onReload: () => {
+                            // Retry goes with the frame it sits in; the toolbar's reload offers the same action.
+                            reload();
+                            reloadButtonRef.current?.focus();
+                        }, iframeStyle: iframeStyle, style: {
+                            position: 'absolute',
+                            inset: 0,
+                            background: previewWidth === 'fit' ? undefined : 'var(--canopy-surface-muted)',
+                        } }, reloads), resizing && width > 0 && (_jsx(Box, { "aria-hidden": true, "data-testid": "preview-resize-readout", style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            padding: '6px 12px',
+                            borderRadius: 6,
+                            background: 'var(--mantine-color-body)',
+                            color: 'var(--mantine-color-text)',
+                            boxShadow: 'var(--mantine-shadow-md)',
+                            fontSize: 'var(--mantine-font-size-lg)',
+                            fontWeight: 600,
+                            fontVariantNumeric: 'tabular-nums',
+                            pointerEvents: 'none',
+                        }, children: layout === 'stacked'
+                            ? `${Math.round(width)} × ${Math.round(height)} px`
+                            : `${Math.round(width)} px` }))] })] }));
+};

package/dist/editor/PreviewToolbarTools.d.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'react';
+import type { InexactMark } from './preview-marks.js';
+export interface HighlightToggleProps {
+    enabled: boolean;
+    onToggle: () => void;
+    /** The page reported marking nothing while highlighting. */
+    marksNothing?: boolean;
+}
+/** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
+export declare function HighlightToggle({ enabled, onToggle, marksNothing }: HighlightToggleProps): import("react/jsx-runtime").JSX.Element;
+/** The admin's count of preview marks that name no field of the entry; see `findInexactMarks`. */
+export declare function UnmappedMarksChip({ marks }: {
+    marks: readonly InexactMark[];
+}): import("react/jsx-runtime").JSX.Element | null;
+export interface MaximizeToggleProps {
+    maximized: boolean;
+    onChange: (maximized: boolean) => void;
+    maximizeRef?: Ref<HTMLButtonElement>;
+    restoreRef?: Ref<HTMLButtonElement>;
+}
+/** An icon to maximize; once maximized, a labelled Restore, which Esc also does. */
+export declare function MaximizeToggle({ maximized, onChange, maximizeRef, restoreRef, }: MaximizeToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewToolbarTools.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { IconArrowsMaximize, IconArrowsMinimize, IconMarquee } from '@tabler/icons-react';
+const HIGHLIGHT_LABEL = 'Highlight fields in the preview';
+const NOTHING_MARKED_NOTE = "This page marks no editable elements, so nothing can be highlighted or clicked to focus. The site's developer can mark them with fieldProps.";
+/** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
+export function HighlightToggle({ enabled, onToggle, marksNothing = false }) {
+    const noteId = useId();
+    const showNote = enabled && marksNothing;
+    return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: HIGHLIGHT_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": HIGHLIGHT_LABEL, "aria-describedby": showNote ? noteId : undefined, "data-testid": "toggle-highlights-button", onClick: onToggle, children: _jsx(IconMarquee, { size: 16 }) }) }), showNote && (_jsx(Tooltip, { label: NOTHING_MARKED_NOTE, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'nowrap' }, children: ["Nothing to highlight", _jsx(VisuallyHidden, { id: noteId, children: NOTHING_MARKED_NOTE })] }) }))] }));
+}
+const LISTED = 3;
+// Module-level, so React never re-calls it on a re-render and pulls focus back while closing.
+const focusOnMount = (node) => node?.focus();
+const markList = (marks) => marks
+    .slice(0, LISTED)
+    .map((mark) => mark.path || '""')
+    .join(', ');
+/** The admin's count of preview marks that name no field of the entry; see `findInexactMarks`. */
+export function UnmappedMarksChip({ marks }) {
+    const [opened, setOpened] = useState(false);
+    const chipRef = useRef(null);
+    // Focus moves to Close as the dropdown mounts. Close and Escape hand it back to the chip; focus
+    // leaving otherwise, Tab included, just closes it, so there is no focus trap.
+    // Closed when the marks run out, so their return never reopens it and takes focus.
+    if (marks.length === 0) {
+        if (opened)
+            setOpened(false);
+        return null;
+    }
+    const one = marks.length === 1;
+    const closeToChip = () => {
+        setOpened(false);
+        chipRef.current?.focus();
+    };
+    return (_jsxs(Popover, { opened: opened, onChange: setOpened, closeOnEscape: false, width: 300, position: "bottom-end", withArrow: true, shadow: "md", children: [_jsx(Popover.Target, { children: _jsxs(UnstyledButton, { ref: chipRef, "data-testid": "preview-unmapped-chip", 
+                    // A controlled Popover's target toggles nothing itself.
+                    // Pressed while open, it keeps focus in the dropdown, whose blur would close it first
+                    // and let this click reopen it.
+                    onMouseDown: (event) => {
+                        if (opened)
+                            event.preventDefault();
+                    }, onClick: () => (opened ? closeToChip() : setOpened(true)), style: {
+                        flexShrink: 0,
+                        borderRadius: 999,
+                        minHeight: 24,
+                        padding: '0 8px',
+                        fontSize: 'var(--mantine-font-size-xs)',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                        color: 'var(--mantine-color-text)',
+                        background: 'var(--canopy-count-bg-orange)',
+                    }, children: [marks.length, " unmapped", _jsxs(VisuallyHidden, { children: [" preview ", one ? 'mark' : 'marks'] })] }) }), _jsx(Popover.Dropdown, { onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        closeToChip();
+                }, onBlur: (event) => {
+                    // Not when the window itself loses focus, such as to the browser's console.
+                    if (document.hasFocus() && !event.currentTarget.contains(event.relatedTarget)) {
+                        setOpened(false);
+                    }
+                }, children: _jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", fw: 600, children: "Unmapped preview marks" }), _jsxs(Text, { size: "sm", children: [one
+                                    ? "One element on this page carries a field mark that doesn't match a field of this entry: "
+                                    : `${marks.length} elements on this page carry field marks that don't match a field of this entry: `, _jsx(Text, { component: "span", ff: "monospace", size: "xs", style: { overflowWrap: 'anywhere' }, children: markList(marks) }), marks.length > LISTED ? `, and ${marks.length - LISTED} more` : '', ".", ' ', one
+                                    ? "It's outlined, and clicking it focuses its nearest field, if it has one."
+                                    : "They're outlined, and clicking one focuses its nearest field, if it has one."] }), _jsxs(Text, { size: "sm", children: ["The browser console names the nearest field of ", one ? 'it' : 'each', ", for the site's developer to correct in its fieldProps."] }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { ref: focusOnMount, size: "compact-sm", variant: "default", onClick: closeToChip, children: "Close" }) })] }) })] }));
+}
+const MAXIMIZE_LABEL = 'Maximize preview';
+/** An icon to maximize; once maximized, a labelled Restore, which Esc also does. */
+export function MaximizeToggle({ maximized, onChange, maximizeRef, restoreRef, }) {
+    return maximized ? (_jsx(Tooltip, { label: "Show the form again \u00B7 Esc", children: _jsx(Button, { ref: restoreRef, size: "compact-sm", variant: "default", leftSection: _jsx(IconArrowsMinimize, { size: 14 }), "aria-keyshortcuts": "Escape", "data-testid": "preview-restore-button", onClick: () => onChange(false), children: "Restore" }) })) : (_jsx(Tooltip, { label: MAXIMIZE_LABEL, children: _jsx(ActionIcon, { ref: maximizeRef, variant: "subtle", size: "md", "aria-label": MAXIMIZE_LABEL, "data-testid": "preview-maximize-button", onClick: () => onChange(true), children: _jsx(IconArrowsMaximize, { size: 16 }) }) }));
+}

package/dist/editor/admin/SystemHealthPanel.d.ts

@@ -1,5 +1,6 @@
 export interface SystemHealthPanelProps {
     opened: boolean;
     onClose: () => void;
+    returnFocusTo?: () => HTMLElement | null;
 }
-export declare function SystemHealthPanel({ opened, onClose }: SystemHealthPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function SystemHealthPanel({ opened, onClose, returnFocusTo }: SystemHealthPanelProps): import("react/jsx-runtime").JSX.Element;