canopycms 0.2.0-int.121 → 0.3.0

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 }) })] })] })] }));
-}