canopycms 0.2.0-int.121 → 0.3.0

package/dist/editor/shell/SidePanelHost.d.ts

@@ -17,8 +17,15 @@ export interface SidePanelHostProps {
      * focus in. Opening alone never does, as a panel also opens when stored state loads.
      */
     focusRequest?: number;
+    /**
+     * Escape from inside a docked panel closes it, as an overlay's always does. It also marks the
+     * panel, so a maximized preview's Escape leaves the key to it.
+     */
+    closeOnEscape?: boolean;
     /** Where focus goes when the panel closes with focus inside it. */
     returnFocusTo?: () => HTMLElement | null;
+    /** Focus landed on `target`, outside the panel and what it portals; dropping to nothing isn't. */
+    onFocusLeave?: (target: Element) => void;
     /** Controls beside the title, before the close button. */
     actions?: ReactNode;
     children: ReactNode;
@@ -29,9 +36,9 @@ export interface SidePanelHostProps {
  * A titled side panel, resizable from its inline-end edge. Docked, it pushes its neighbours aside
  * and opens and closes at once: a sliding width would reflow the preview's page on every frame.
  * As an overlay it covers the form pane only, so the preview stays in view, slides in and out as
- * the drawers do unless the user prefers reduced motion, and Escape closes it. A `focusRequest`
- * moves focus to its `data-autofocus` element, else to the panel; closing with focus inside
- * returns focus to `returnFocusTo`.
+ * the drawers do unless the user prefers reduced motion, and Escape closes it, as it does a docked
+ * panel given `closeOnEscape`. A `focusRequest` moves focus to its `data-autofocus` element, else
+ * to the panel; closing with focus inside returns focus to `returnFocusTo`.
  */
-export declare function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest, returnFocusTo, actions, children, id, 'data-testid': testId, }: SidePanelHostProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest, closeOnEscape, returnFocusTo, onFocusLeave, actions, children, id, 'data-testid': testId, }: SidePanelHostProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor/shell/SidePanelHost.js

@@ -49,17 +49,101 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
  * A titled side panel, resizable from its inline-end edge. Docked, it pushes its neighbours aside
  * and opens and closes at once: a sliding width would reflow the preview's page on every frame.
  * As an overlay it covers the form pane only, so the preview stays in view, slides in and out as
- * the drawers do unless the user prefers reduced motion, and Escape closes it. A `focusRequest`
- * moves focus to its `data-autofocus` element, else to the panel; closing with focus inside
- * returns focus to `returnFocusTo`.
+ * the drawers do unless the user prefers reduced motion, and Escape closes it, as it does a docked
+ * panel given `closeOnEscape`. A `focusRequest` moves focus to its `data-autofocus` element, else
+ * to the panel; closing with focus inside returns focus to `returnFocusTo`.
  */
-export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest = 0, returnFocusTo, actions, children, id, 'data-testid': testId, }) {
+export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest = 0, closeOnEscape = false, returnFocusTo, onFocusLeave, actions, children, id, 'data-testid': testId, }) {
     const fallbackId = useId();
     const panelId = id ?? fallbackId;
     const titleId = `${panelId}-title`;
     // State, not a ref: an overlay's section mounts a frame after `opened`, as its slide starts.
     const [panel, setPanel] = useState(null);
     const focusInside = useRef(false);
+    // Drops a leave the watcher below has not reported yet; the panel's own `onFocus` runs it.
+    const cancelFocusLeave = useRef(undefined);
+    const onFocusLeaveRef = useRef(onFocusLeave);
+    useEffect(() => {
+        onFocusLeaveRef.current = onFocusLeave;
+    });
+    const watchFocus = opened && !!onFocusLeave;
+    // Watched on the document, not the panel's blur: focus can drop to nothing first (a click on
+    // text, or on a button in Safari) and then land elsewhere with no blur left to report it.
+    useEffect(() => {
+        if (!watchFocus || !panel)
+            return;
+        let timer;
+        let pressing = false;
+        let pending = null;
+        let frame = null;
+        const report = (target) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => onFocusLeaveRef.current?.(target), 0);
+        };
+        // A caller that closes the panel reflows what the press landed on, losing its click, so a
+        // press waits for its release. The 0ms timer then runs after the click.
+        const leave = (target) => {
+            if (pressing)
+                pending = target;
+            else
+                report(target);
+        };
+        const release = () => {
+            pressing = false;
+            if (pending)
+                report(pending);
+            pending = null;
+        };
+        const onPointerDown = (event) => {
+            if (event.button === 0)
+                pressing = true;
+        };
+        // A press inside a frame never reaches this document, so a frame's leave waits for the pointer
+        // to come back anywhere but the panel, which it may be reaching for; a release outside the
+        // window shows here as a move with no button held.
+        const onPointerMove = (event) => {
+            if (pressing && event.buttons === 0)
+                release();
+            if (!frame || (event.target instanceof Node && panel.contains(event.target)))
+                return;
+            leave(frame);
+            frame = null;
+        };
+        // Captured, so it runs before React's bubbling `onFocus`, which cancels it for a portaled descendant.
+        const onFocusIn = (event) => {
+            if (event.target instanceof Element && !panel.contains(event.target))
+                leave(event.target);
+        };
+        // Focus moving into a frame, such as the preview, reaches this document only as a blur.
+        const onWindowBlur = () => setTimeout(() => {
+            const active = document.activeElement;
+            if (active instanceof HTMLIFrameElement && !panel.contains(active))
+                frame = active;
+        }, 0);
+        cancelFocusLeave.current = () => {
+            clearTimeout(timer);
+            pending = null;
+            frame = null;
+        };
+        const listeners = [
+            [document, 'pointerdown', onPointerDown],
+            [document, 'pointerup', release],
+            [document, 'pointercancel', release],
+            [document, 'pointermove', onPointerMove],
+            [document, 'focusin', onFocusIn],
+            [window, 'blur', onWindowBlur],
+        ];
+        for (const [target, type, listener] of listeners) {
+            target.addEventListener(type, listener, true);
+        }
+        return () => {
+            for (const [target, type, listener] of listeners) {
+                target.removeEventListener(type, listener, true);
+            }
+            clearTimeout(timer);
+            cancelFocusLeave.current = undefined;
+        };
+    }, [watchFocus, panel]);
     const closingWithFocus = useRef(false);
     const wasOpened = useRef(opened);
     const servedFocusRequest = useRef(focusRequest);
@@ -126,11 +210,14 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         wasOpened.current = opened;
     }, [opened, returnFocusTo]);
     // On the window, not the panel: a dialog portalled from the panel would bubble its Escape here
-    // through React, so only a key from inside the panel's own DOM closes it.
+    // through React, so only a key from inside the panel's own DOM closes it. An Escape that ends
+    // an IME composition only cancels the composition; Safari reports it as keyCode 229.
     useWindowEvent('keydown', (event) => {
         if (opened &&
-            mode === 'overlay' &&
+            (mode === 'overlay' || closeOnEscape) &&
             event.key === 'Escape' &&
+            !event.isComposing &&
+            event.keyCode !== 229 &&
             !event.defaultPrevented &&
             event.target instanceof Node &&
             panel?.contains(event.target)) {
@@ -209,8 +296,9 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         background: 'var(--mantine-color-body)',
         paddingInlineEnd: DIVIDER_WIDTH_PX,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), _jsx(Transition, { mounted: opened, transition: rtl ? 'slide-left' : 'slide-right', duration: overlay && !reduceMotion ? SLIDE_MS : 0, children: (transitionStyles) => (_jsxs("section", { ref: setPanel, id: panelId, "aria-labelledby": titleId, tabIndex: -1, "data-testid": testId, "data-panel-mode": mode, [FOCUS_RETURN_ATTR]: opened ? undefined : '', style: { ...style, ...transitionStyles }, onFocus: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), _jsx(Transition, { mounted: opened, transition: rtl ? 'slide-left' : 'slide-right', duration: overlay && !reduceMotion ? SLIDE_MS : 0, children: (transitionStyles) => (_jsxs("section", { ref: setPanel, id: panelId, "aria-labelledby": titleId, tabIndex: -1, "data-testid": testId, "data-panel-mode": mode, "data-mantine-stop-propagation": closeOnEscape ? 'true' : undefined, [FOCUS_RETURN_ATTR]: opened ? undefined : '', style: { ...style, ...transitionStyles }, onFocus: () => {
                         focusInside.current = true;
+                        cancelFocusLeave.current?.();
                     }, onBlur: (event) => {
                         if (!event.currentTarget.contains(event.relatedTarget))
                             focusInside.current = false;

package/dist/editor/shell/TopBar.d.ts

@@ -1,12 +1,12 @@
 import { type ReactNode } from 'react';
 export interface TopBarProps {
-    /** Where you are: the breadcrumb and anything that describes the open entry. */
+    /** The branch, at the bar's inline start. */
     leading: ReactNode;
-    /** What you can do: the branch and the actions on it. */
+    /** The actions on the branch, at its inline end. */
     trailing: ReactNode;
 }
 /**
- * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
- * above `trailing`, which wraps rather than clip a control. Layout only.
+ * The shell's top bar, the branch bar: one 48px row while both sides fit. Narrower, `trailing`
+ * controls that don't fit beside the branch wrap to a second row at the inline end. Layout only.
  */
 export declare function TopBar({ leading, trailing }: TopBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/shell/TopBar.js

@@ -4,12 +4,15 @@ import { Box, Group } from '@mantine/core';
 import { SHELL_REGION_BORDER } from './EditorShell.js';
 const TOP_BAR_HEIGHT = 48;
 /**
- * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
- * above `trailing`, which wraps rather than clip a control. Layout only.
+ * The shell's top bar, the branch bar: one 48px row while both sides fit. Narrower, `trailing`
+ * controls that don't fit beside the branch wrap to a second row at the inline end. Layout only.
  */
 export function TopBar({ leading, trailing }) {
     return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", px: "sm", py: 6, mih: TOP_BAR_HEIGHT, style: {
             borderBottom: SHELL_REGION_BORDER,
             background: 'var(--mantine-color-body)',
-        }, children: [_jsx(Box, { flex: { base: '1 0 100%', md: '1 1 0%' }, miw: 0, children: leading }), _jsx(Group, { gap: 6, wrap: "wrap", align: "center", justify: "flex-end", flex: { base: '1 0 100%', md: '0 1 auto' }, miw: 0, children: trailing })] }));
+        }, children: [_jsx(Box, { flex: "0 1 auto", miw: 0, children: leading }), _jsx(Group, { gap: 6, wrap: "wrap", align: "center", justify: "flex-end", 
+                // It shares the pill's row while its widest control fits there, and then only the controls
+                // that don't fit wrap, still at the end; narrower, it takes a row of its own.
+                flex: "1 1 0%", miw: "min-content", children: trailing })] }));
 }

package/dist/editor/theme.js

@@ -320,7 +320,11 @@ const canopyCssVariablesResolver = (theme) => ({
  * Switch thumbs, white text on the primary colour (moved to the fill), and dimmed text Mantine
  * draws itself (a blocked menu item, a combobox's empty message, outside days). Outside days lose
  * Mantine's half opacity, under 4.5:1. The crop box and its handles sit on an arbitrary image, where
- * no single colour holds 3:1, so they take a white and black pair.
+ * no single colour holds 3:1, so they take a white and black pair. A navigator row's lock is
+ * drawn only while its row is hovered, focused (Mantine's Tree focuses the `li` around the row, on click and arrow keys), has focus
+ * within, or is selected. It hides by opacity alone, so it keeps its place and stays in the tab order
+ * and the accessibility tree; while hidden it takes no pointer events, so a tap on its slot reaches
+ * the row.
  */
 const CANOPY_STYLES = `
 .mantine-Checkbox-input:not(:checked, :disabled, [data-indeterminate], [data-error]),
@@ -353,6 +357,23 @@ const CANOPY_STYLES = `
   outline: 2px solid var(--mantine-color-white);
   box-shadow: 0 0 0 4px var(--mantine-color-black);
 }
+[data-nav-row] [data-row-lock] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+[data-nav-row]:hover [data-row-lock],
+[data-nav-row]:focus-within [data-row-lock],
+[role='treeitem']:focus > [data-nav-row] [data-row-lock],
+[data-nav-row][data-nav-selected] [data-row-lock] {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-nav-row] [data-row-lock] {
+    transition: none;
+  }
+}
 [data-combobox-selected] {
   --mantine-primary-color-filled: var(--canopy-primary-fill);
 }

package/dist/editor/utils/focus-return.d.ts

@@ -6,9 +6,11 @@ import { type MouseEvent, type RefObject } from 'react';
  */
 export declare const FOCUS_RETURN_ATTR = "data-focus-return";
 /**
- * Focuses `target` unless the user has moved focus on: nothing is focused, or focus is inside an
- * overlay `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
+ * The user has not moved focus on: nothing is focused, or focus is inside an overlay
+ * `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
  */
+export declare function focusIsIdle(): boolean;
+/** Focuses `target` while `focusIsIdle`. */
 export declare function focusIfIdle(target: HTMLElement | null): void;
 /**
  * Run by `useMenuItemFocusReturn` when its menu has closed after an item acted: focuses the menu's
@@ -54,3 +56,9 @@ export declare function useFocusAfterRemove<L extends HTMLElement = HTMLDivEleme
     listRef: RefObject<L>;
     focusAfterRemove: (index: number, fallback: RefObject<HTMLElement | null>) => void;
 };
+/**
+ * Refs for `slots` controls that come and go by turns. Focus dropped by one leaving the page, or by
+ * its menu, moves to its slot's newcomer, else the first slot filled (`target`, which a dialog may
+ * return focus to too); a StrictMode re-attach stays.
+ */
+export declare function useFocusHandOff(slots: number): [Array<(el: HTMLButtonElement | null) => void>, (slot: number) => HTMLButtonElement | null];

package/dist/editor/utils/focus-return.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 /**
  * Mantine's own `returnFocus` records the focused element at open, and a menu item has unmounted
  * with its menu by close, so an overlay opened from one returns focus here instead.
@@ -6,14 +6,17 @@ import { useEffect, useRef, useState } from 'react';
  */
 export const FOCUS_RETURN_ATTR = 'data-focus-return';
 /**
- * Focuses `target` unless the user has moved focus on: nothing is focused, or focus is inside an
- * overlay `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
+ * The user has not moved focus on: nothing is focused, or focus is inside an overlay
+ * `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
  */
-export function focusIfIdle(target) {
+export function focusIsIdle() {
     const active = document.activeElement;
-    if (!active || active === document.body || active.closest(`[${FOCUS_RETURN_ATTR}]`)) {
+    return !active || active === document.body || !!active.closest(`[${FOCUS_RETURN_ATTR}]`);
+}
+/** Focuses `target` while `focusIsIdle`. */
+export function focusIfIdle(target) {
+    if (focusIsIdle())
         target?.focus({ preventScroll: true });
-    }
 }
 /**
  * Run by `useMenuItemFocusReturn` when its menu has closed after an item acted: focuses the menu's
@@ -104,3 +107,34 @@ export function useFocusAfterRemove() {
         focusAfterRemove: (index, fallback) => setPending({ index, fallback }),
     };
 }
+/** `el` has focus, or the open menu it controls (`aria-controls`) does. */
+function holdsFocus(el) {
+    const active = document.activeElement;
+    const menuId = el.getAttribute('aria-controls');
+    return active === el || (!!menuId && !!document.getElementById(menuId)?.contains(active));
+}
+/**
+ * Refs for `slots` controls that come and go by turns. Focus dropped by one leaving the page, or by
+ * its menu, moves to its slot's newcomer, else the first slot filled (`target`, which a dialog may
+ * return focus to too); a StrictMode re-attach stays.
+ */
+export function useFocusHandOff(slots) {
+    const controls = useRef([]);
+    const outgoing = useRef(undefined);
+    const target = useCallback((slot) => controls.current[slot] ?? controls.current.find(Boolean) ?? null, []);
+    const refs = useMemo(() => Array.from({ length: slots }, (_, slot) => (el) => {
+        const current = controls.current[slot];
+        if (!el && current && holdsFocus(current))
+            outgoing.current = { el: current, slot };
+        controls.current[slot] = el;
+    }), [slots]);
+    useLayoutEffect(() => {
+        const left = outgoing.current;
+        outgoing.current = undefined;
+        const active = document.activeElement;
+        if (!left || left.el.isConnected || (active && active !== document.body))
+            return;
+        target(left.slot)?.focus({ preventScroll: true });
+    });
+    return [refs, target];
+}

package/dist/operating-mode/client-safe-strategy.d.ts

@@ -7,7 +7,6 @@ import type { OperatingMode, ClientSafeStrategy } from './types.js';
 export declare class ProdClientSafeStrategy implements ClientSafeStrategy {
     readonly mode: OperatingMode;
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     getPermissionsFileName(): string;
@@ -18,7 +17,6 @@ export declare class ProdClientSafeStrategy implements ClientSafeStrategy {
 export declare class DevClientSafeStrategy implements ClientSafeStrategy {
     readonly mode: OperatingMode;
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     getPermissionsFileName(): string;
@@ -31,8 +29,5 @@ export declare class DevClientSafeStrategy implements ClientSafeStrategy {
  * call inline — `clientOperatingStrategy(mode).supportsBranching()`.
  */
 export declare function clientOperatingStrategy(mode: OperatingMode): ClientSafeStrategy;
-/**
- * Mainly for testing.
- * @internal Exported for tests.
- */
+/** @internal Exported for tests. */
 export declare function clearClientStrategyCache(): void;

package/dist/operating-mode/client-safe-strategy.js

@@ -10,9 +10,6 @@ export class ProdClientSafeStrategy {
     supportsBranching() {
         return true;
     }
-    supportsStatusBadge() {
-        return true;
-    }
     supportsComments() {
         return true;
     }
@@ -39,9 +36,6 @@ export class DevClientSafeStrategy {
     supportsBranching() {
         return true;
     }
-    supportsStatusBadge() {
-        return true;
-    }
     supportsComments() {
         return true;
     }
@@ -87,10 +81,7 @@ export function clientOperatingStrategy(mode) {
     clientStrategyCache.set(mode, strategy);
     return strategy;
 }
-/**
- * Mainly for testing.
- * @internal Exported for tests.
- */
+/** @internal Exported for tests. */
 export function clearClientStrategyCache() {
     clientStrategyCache.clear();
 }

package/dist/operating-mode/types.d.ts

@@ -31,16 +31,13 @@ export interface ClientSafeStrategy {
     readonly mode: OperatingMode;
     /** Whether this mode supports multiple branch workspaces */
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     /** Get the permissions file name (e.g., 'permissions.json' or 'permissions.local.json') */
     getPermissionsFileName(): string;
     /** Get the groups file name (e.g., 'groups.json' or 'groups.local.json') */
     getGroupsFileName(): string;
-    /** Whether git commits should be made in this mode */
     shouldCommit(): boolean;
-    /** Whether git pushes should be made in this mode */
     shouldPush(): boolean;
 }
 /** The full strategy, including Node.js APIs. Server-side imports only. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const CANOPYCMS_VERSION = "0.2.0-int.121";
+export declare const CANOPYCMS_VERSION = "0.3.0";

package/dist/version.js

@@ -1,3 +1,3 @@
 // Generated by scripts/bump-version.mjs, its only writer. The package builds with plain
 // tsc (rootDir: src), so src/ cannot import ../package.json; version.test.ts keeps the two equal.
-export const CANOPYCMS_VERSION = '0.2.0-int.121';
+export const CANOPYCMS_VERSION = '0.3.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "//": "@codemirror/language, @lezer/highlight: workaround — @mdxeditor/editor uses cm6-theme-basic-light which peer-requires these but mdxeditor doesn't declare them as dependencies",
   "name": "canopycms",
-  "version": "0.2.0-int.121",
+  "version": "0.3.0",
   "description": "CanopyCMS core package: schema-driven content, branch-aware editing, and editor UI for Next.js.",
   "license": "MIT",
   "repository": {

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

@@ -1,23 +0,0 @@
-import type { BranchStatus } from '../../types.js';
-export interface BranchLockInput {
-    branchStatus: BranchStatus | undefined;
-    /** The protected base branch, read-only in prod. */
-    branchReadOnly?: boolean;
-    branchWriteBlocked?: boolean;
-}
-/**
- * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
- * @internal Exported for tests.
- */
-export declare function branchLockBannerShown(lock: BranchLockInput): boolean;
-/**
- * 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 declare function describeBranchLock(lock: BranchLockInput): string | undefined;
-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

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