canopycms 0.2.0 → 0.3.1

package/dist/editor/components/BranchLockBanner.js

@@ -1,66 +0,0 @@
-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.
- */
-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 };
-}
-/**
- * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
- * @internal Exported for tests.
- */
-export function branchLockBannerShown(lock) {
-    return !!lock.branchReadOnly || branchLockState(lock).statusLocked;
-}
-/**
- * Why the branch takes no writes, with the way forward; undefined when it does take them. The
- * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
- */
-export function describeBranchLock(lock) {
-    if (!branchLockBannerShown(lock))
-        return undefined;
-    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
-    if (lock.branchReadOnly)
-        return 'The base branch is read-only. Create a branch to make changes.';
-    if (branchDataUnavailable)
-        return 'Branch details could not be loaded. Use "Switch branch…" to retry.';
-    if (!statusLocked)
-        return undefined;
-    if (lock.branchStatus === 'submitted')
-        return 'This branch is in review. Withdraw it to make changes.';
-    if (lock.branchStatus === 'approved')
-        return 'This branch is approved. Withdraw it to make changes.';
-    return `This branch is ${lock.branchStatus}. Its content is read-only.`;
-}
-/** The banner region's explanation of a read-only branch; not dismissible while it applies. */
-export function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }) {
-    const { branchDataUnavailable } = branchLockState(lock);
-    if (!branchLockBannerShown(lock))
-        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/QuickOpenPalette.d.ts

@@ -1,28 +0,0 @@
-/** @internal Exported for tests. Marks an overlay Mod+P may open over: the palette's own closing dialog. */
-export declare const QUICK_OPEN_REPLACES_ATTR = "data-quick-open-replaces";
-/** One option: an entry, with the type and route its second line shows. */
-export interface QuickOpenEntry {
-    path: string;
-    label: string;
-    /** The entry's title, matched by the search where the label is a singleton's type label. */
-    title?: string;
-    slug?: string;
-    collectionPath?: string;
-    collectionName?: string;
-    /** The entry's type (`entryTypeLine`); absent for a singleton, whose label already names it. */
-    typeLabel?: string;
-    /** The entry's route on the site (`buildPreviewRoute`); absent when it has no page. */
-    route?: string;
-}
-export interface QuickOpenPaletteProps {
-    opened: boolean;
-    onOpen: () => void;
-    onClose: () => void;
-    entries: ReadonlyArray<QuickOpenEntry>;
-    /** Display name for a collection heading; the collection's own name when absent, none when ''. */
-    collectionLabel?: (collectionPath: string) => string | undefined;
-    onSelect: (path: string) => void;
-    /** Names the element that takes focus after the palette closes, for a caller that unmounted the opener. */
-    returnFocusTo?: () => HTMLElement | null;
-}
-export declare function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionLabel, onSelect, returnFocusTo, }: QuickOpenPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/QuickOpenPalette.js

@@ -1,71 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Mod+P palette: type part of an entry's title or slug, pick it with the keyboard or mouse. */
-import { useEffect, useMemo, useState } from 'react';
-import { Combobox, Highlight, Modal, ScrollArea, Text, TextInput, useCombobox } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
-import { IconSearch } from '@tabler/icons-react';
-import { filterEntries, groupEntriesByCollection } from '../entry-search.js';
-import { modKeyLabel } from '../platform.js';
-import { EDITOR_ACTIONS } from '../copy.js';
-import { FOCUS_RETURN_ATTR, focusIfIdle } from '../utils/focus-return.js';
-/** @internal Exported for tests. Marks an overlay Mod+P may open over: the palette's own closing dialog. */
-export const QUICK_OPEN_REPLACES_ATTR = 'data-quick-open-replaces';
-/**
- * True while a modal or drawer (not a popover) is open that `QUICK_OPEN_REPLACES_ATTR` doesn't mark.
- * Overlays stack in DOM order and the palette's portal precedes the editor's other dialogs, so it
- * would open hidden under them and take the keyboard from the one in use.
- */
-const otherOverlayOpen = () => Array.from(document.querySelectorAll('[role="dialog"][aria-modal="true"]')).some((dialog) => !dialog.closest(`[${QUICK_OPEN_REPLACES_ATTR}]`));
-/** Options rendered at once; the rest are reached by typing more. */
-const MAX_OPTIONS = 50;
-/** An option's second line: its type and its route, whichever it has. */
-const detailLine = (entry) => [entry.typeLabel, entry.route].filter(Boolean).join(' · ');
-export function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionLabel, onSelect, returnFocusTo, }) {
-    // `[]` ignores no tags and `true` fires from contenteditable, so the shortcut works from inside
-    // a text field or the MDX editor.
-    useHotkeys([
-        [
-            'mod+P',
-            (event) => {
-                // Mantine's `mod` is Ctrl or ⌘ everywhere; on macOS Ctrl+P moves the caret up a line.
-                if (modKeyLabel() === '⌘' && !event.metaKey)
-                    return;
-                // Keeps the browser's print dialog shut, even when the palette can't open.
-                event.preventDefault();
-                if (!otherOverlayOpen())
-                    onOpen();
-            },
-            { preventDefault: false },
-        ],
-    ], [], true);
-    const [query, setQuery] = useState('');
-    const [wasOpened, setWasOpened] = useState(opened);
-    if (opened !== wasOpened) {
-        setWasOpened(opened);
-        if (!opened)
-            setQuery('');
-    }
-    // Always open: the options are the palette's body, not a dropdown below a field.
-    const combobox = useCombobox({ opened: true });
-    const { selectFirstOption } = combobox;
-    const matches = useMemo(() => filterEntries(entries, query), [entries, query]);
-    const shown = useMemo(() => matches.slice(0, MAX_OPTIONS), [matches]);
-    const groups = useMemo(() => groupEntriesByCollection(shown, collectionLabel), [shown, collectionLabel]);
-    // Enter right after typing opens the best match, so the first option is always armed. Deferred
-    // a tick: on opening, the modal's portal and the options list mount after this effect.
-    useEffect(() => {
-        if (!opened)
-            return;
-        const timer = setTimeout(selectFirstOption, 0);
-        return () => clearTimeout(timer);
-    }, [opened, query, selectFirstOption]);
-    const handleSubmit = (path) => {
-        onSelect(path);
-        onClose();
-    };
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: EDITOR_ACTIONS.openEntry, size: "lg", yOffset: "10vh", returnFocus: !returnFocusTo, onExitTransitionEnd: () => returnFocusTo && focusIfIdle(returnFocusTo()), [QUICK_OPEN_REPLACES_ATTR]: true, [FOCUS_RETURN_ATTR]: true, children: _jsxs(Combobox, { store: combobox, onOptionSubmit: handleSubmit, children: [_jsx(Combobox.EventsTarget, { withExpandedAttribute: true, "data-mantine-stop-propagation": false, children: _jsx(TextInput, { role: "combobox", "aria-label": "Search entries", "aria-autocomplete": "list", placeholder: "Type an entry title or slug", leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), value: query, onChange: (event) => setQuery(event.currentTarget.value), "data-autofocus": true, "data-testid": "quick-open-input" }) }), _jsx(Combobox.Options, { mt: "sm", "aria-label": "Entries", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "scroll", scrollbars: "y", children: matches.length === 0 ? (_jsxs(Text, { size: "sm", c: "dimmed", p: "xs", "data-testid": "quick-open-empty", children: ["No entries match \u201C", query, "\u201D."] })) : (groups.map((group, index) => (_jsx(Combobox.Group, { label: group.heading || undefined, children: group.entries.map((entry) => {
-                                const detail = detailLine(entry);
-                                return (_jsxs(Combobox.Option, { value: entry.path, "data-testid": "quick-open-option", children: [_jsx(Highlight, { highlight: query.trim(), size: "sm", children: entry.label }), detail && (_jsx(Text, { size: "xs", "data-testid": "quick-open-option-detail", children: detail }))] }, entry.path));
-                            }) }, index)))) }) }), matches.length > MAX_OPTIONS && (_jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: ["Showing ", MAX_OPTIONS, " of ", matches.length, ". Keep typing to narrow the list."] }))] }) }));
-}

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

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

package/dist/editor/components/SaveSplitButton.js

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