@sincpro/web-ui 0.2.0 → 1.0.0

package/dist/components/navigation/CommandPalette.js

@@ -1,114 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { commandMatches, groupCommands, } from "./commands.js";
-import { AriaLocale } from "../../foundations/aria.js";
-import { useUiCopy } from "../../foundations/copy.js";
-import { tv } from "../../foundations/variants.js";
-import { Search, X } from "lucide-react";
-import { useEffect, useMemo } from "react";
-import { Autocomplete, Button as AriaButton, Dialog, Header, Input, Keyboard, Menu, MenuItem, MenuSection, Modal, ModalOverlay, SearchField, useFilter, } from "react-aria-components";
-/* ==================================================================== *
- *  COMMAND PALETTE — ⌘K, type three letters, Enter.
- *
- *  An ERP has a hundred screens and twenty «new» buttons, and the people who
- *  use it all day stop wanting to look for any of them: they know the name of
- *  what they want. The palette is the shortest path from knowing the name to
- *  being there — one key to open, a few letters, Enter — without leaving the
- *  keyboard and without knowing in which menu of which module it lives.
- *
- *      ┌──────────────────────────────────────────────┐
- *      │ 🔍 fact                                    ✕ │
- *      ├──────────────────────────────────────────────┤
- *      │ IR A…                                        │
- *      │ ▌🧾 Facturas                                 │  ← Enter runs it
- *      │ CREAR…                                       │
- *      │   ＋ Nueva factura                       ⌘N  │
- *      └──────────────────────────────────────────────┘
- *
- *  React Aria's `Autocomplete` drives it: focus stays in the search box while
- *  the arrows walk the list (virtual focus), the first match is highlighted as
- *  you type so Enter always does something, and the modal traps focus, closes
- *  on Escape and on a click outside, and gives the focus back.
- *
- *  The match is the locale's (`useFilter` inside `AriaLocale`): «facturacion»
- *  finds «Facturación» because nobody types the accent when they are in a hurry.
- * ==================================================================== */
-const overlay = tv({
-    base: "fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-scrim/40 px-4 pt-24 transition-opacity duration-(--duration-quick) ease-(--ease-out)",
-    variants: {
-        isEntering: { true: "opacity-0" },
-        isExiting: { true: "opacity-0" },
-    },
-});
-const surface = tv({
-    base: "w-full max-w-xl overflow-hidden rounded-panel border border-line-strong bg-surface text-ink shadow-window outline-0 transition-[opacity,translate] duration-(--duration-quick) ease-(--ease-out) forced-colors:bg-[Canvas]",
-    variants: {
-        isEntering: { true: "-translate-y-1 opacity-0" },
-        isExiting: { true: "opacity-0" },
-    },
-});
-const item = tv({
-    base: "flex cursor-default items-center gap-2 rounded-control px-2 py-1.5 text-meta text-ink outline-0 select-none",
-    variants: {
-        isFocused: {
-            true: "bg-primary/8 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
-        },
-        isPressed: { true: "bg-primary/12" },
-        isDisabled: { true: "text-muted forced-colors:text-[GrayText]" },
-    },
-});
-/**
- * The search box and the list, without the modal around them.
- *
- * Context: split out so the filtering can be rendered on its own — in a test, with a query
- * already typed — since the modal is a portal that only exists in a browser.
- */
-export function CommandSearch({ commands, onRun, query, onQueryChange, placeholder, }) {
-    const copy = useUiCopy();
-    const { contains } = useFilter({ sensitivity: "base" });
-    const byId = useMemo(() => new Map(commands.map((c) => [c.id, c])), [commands]);
-    const groups = useMemo(() => groupCommands(commands), [commands]);
-    const hint = placeholder ?? copy.search.placeholder;
-    return (_jsxs(Autocomplete, { ...(query === undefined ? {} : { inputValue: query }), ...(onQueryChange === undefined ? {} : { onInputChange: onQueryChange }), filter: (_text, input, node) => {
-            const command = byId.get(String(node.key));
-            return command === undefined || commandMatches(command, input, contains);
-        }, children: [_jsxs(SearchField, { "aria-label": hint, autoFocus: true, className: "group flex items-center gap-2 border-b border-line px-3", children: [_jsx(Search, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true }), _jsx(Input, { placeholder: hint, className: "h-(--size-control-lg) min-w-0 flex-1 bg-transparent text-body text-ink outline-0 placeholder:text-muted [&::-webkit-search-cancel-button]:hidden" }), _jsx(AriaButton, { className: "inline-flex shrink-0 items-center justify-center rounded-mark p-1 text-muted transition-colors duration-(--duration-instant) group-empty:invisible hover:bg-ink/6 hover:text-ink pressed:bg-ink/10", children: _jsx(X, { className: "size-(--size-icon-md)", strokeWidth: 2, "aria-hidden": true }) })] }), _jsx(Menu, { "aria-label": hint, onAction: (key) => onRun(String(key)), renderEmptyState: () => (_jsx("p", { className: "px-3 py-6 text-center text-meta text-muted italic", children: copy.menu.empty })), className: "max-h-96 overflow-y-auto p-1 outline-0", children: groups.map((group) => (_jsxs(MenuSection, { id: group.section ?? "-", className: "not-first:mt-1", children: [group.section === undefined ? null : (_jsx(Header, { className: "px-2 pt-2 pb-1 text-micro font-medium text-muted", children: group.section })), group.commands.map((command) => {
-                            const Icon = command.icon;
-                            return (_jsxs(MenuItem, { id: command.id, textValue: command.label, className: item, children: [_jsx("span", { className: "flex size-(--size-icon-md) shrink-0 items-center justify-center text-muted", children: Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md)", strokeWidth: 2, "aria-hidden": true })) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.label }), command.shortcut === undefined ? null : (_jsx(Keyboard, { className: "shrink-0 rounded-mark border border-line px-1.5 font-sans text-micro text-muted tabular-nums", children: command.shortcut }))] }, command.id));
-                        })] }, group.section ?? ""))) })] }));
-}
-/**
- * A modal search over everything the app can do — go to a screen, create a record — opened
- * with ⌘K (Ctrl+K) and run with Enter.
- *
- * Context: it is controlled (`open`, `onOpenChange`) and does not bind the shortcut itself,
- * because an app has ONE palette and many screens: the key is bound once, where the palette
- * lives, with `useCommandPaletteShortcut`. Running a command closes it — the palette is a
- * path, not a place to stay.
- */
-export function CommandPalette({ open, onOpenChange, commands, onRun, placeholder, }) {
-    const copy = useUiCopy();
-    return (_jsx(AriaLocale, { children: _jsx(ModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: true, className: overlay, children: _jsx(Modal, { className: surface, children: _jsx(Dialog, { "aria-label": placeholder ?? copy.search.placeholder, className: "outline-0", children: _jsx(CommandSearch, { commands: commands, onRun: (id) => {
-                            onOpenChange(false);
-                            onRun(id);
-                        }, ...(placeholder === undefined ? {} : { placeholder }) }) }) }) }) }));
-}
-/**
- * Binds ⌘K (Ctrl+K on Windows and Linux) to open the palette, anywhere in the page.
- *
- * Context: both modifiers are accepted on every platform. Telling them apart by the user
- * agent guesses wrong on a Mac with a PC keyboard, and the cost of accepting both is that
- * Ctrl+K on a Mac — «delete to the end of the line» in a text box — opens the palette.
- */
-export function useCommandPaletteShortcut(setOpen) {
-    useEffect(() => {
-        const onKey = (e) => {
-            if (e.key.toLowerCase() !== "k" || !(e.metaKey || e.ctrlKey) || e.altKey)
-                return;
-            e.preventDefault();
-            setOpen(true);
-        };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
-    }, [setOpen]);
-}

package/dist/components/navigation/commands.d.ts

@@ -1,30 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-/** Something the palette can run: go to a screen, create a record, open a report. */
-export interface PaletteCommand {
-    id: string;
-    label: string;
-    /** The heading it is listed under: «Ir a…», «Crear…». Commands without one go first,
-     *  without a heading. */
-    section?: string;
-    icon?: LucideIcon;
-    /** The key that runs it without the palette, as it should be read: «⌘N», «Alt+F». It is
-     *  only drawn — the palette is where the shortcut gets learned, not where it is bound. */
-    shortcut?: string;
-    /** Other words that should find it: «factura» finds «Nueva venta» when the people who use
-     *  it call it that. */
-    keywords?: readonly string[];
-}
-/** The commands under each heading, headings in the order they first appear. */
-export declare function groupCommands(commands: readonly PaletteCommand[]): {
-    section: string | undefined;
-    commands: PaletteCommand[];
-}[];
-/**
- * Whether a command answers a query. `contains` is the locale's comparison — React Aria's
- * `useFilter` in the palette — so «facturacion» finds «Facturación» and an uppercase query
- * finds a lowercase label.
- *
- * Every word of the query has to appear, in any order, in the label or the keywords:
- * «nueva fac» finds «Nueva factura», and so does «factura nueva».
- */
-export declare function commandMatches(command: PaletteCommand, query: string, contains: (text: string, part: string) => boolean): boolean;

package/dist/components/navigation/commands.js

@@ -1,30 +0,0 @@
-/** The commands under each heading, headings in the order they first appear. */
-export function groupCommands(commands) {
-    const groups = new Map();
-    /* The commands with no heading are listed first, wherever they were written. */
-    if (commands.some((c) => c.section === undefined))
-        groups.set(undefined, []);
-    for (const command of commands) {
-        const group = groups.get(command.section);
-        if (group === undefined)
-            groups.set(command.section, [command]);
-        else
-            group.push(command);
-    }
-    return [...groups].map(([section, list]) => ({ section, commands: list }));
-}
-/**
- * Whether a command answers a query. `contains` is the locale's comparison — React Aria's
- * `useFilter` in the palette — so «facturacion» finds «Facturación» and an uppercase query
- * finds a lowercase label.
- *
- * Every word of the query has to appear, in any order, in the label or the keywords:
- * «nueva fac» finds «Nueva factura», and so does «factura nueva».
- */
-export function commandMatches(command, query, contains) {
-    const words = query.trim().split(/\s+/).filter(Boolean);
-    if (words.length === 0)
-        return true;
-    const haystack = [command.label, ...(command.keywords ?? [])].join(" ");
-    return words.every((word) => contains(haystack, word));
-}

package/dist/primitives/dialog/Drill.d.ts

@@ -1,90 +0,0 @@
-import { type DialogContext, type DialogWidth } from "./Dialog.js";
-import { type ReactNode, type RefObject } from "react";
-/** Where the drill was opened from: the page's record. The first crumb of the trail. */
-export type DrillOrigin = DialogContext;
-/** Which contexts are open, in order, and the ways to move between them. */
-export interface DrillState {
-    /** The ids of the open contexts, from the first opened to the one in front. */
-    readonly path: readonly string[];
-    /** One level deeper. An id already on the path goes back to it instead: a product
-     *  that leads to its supplier that leads to the same product is a loop, not depth. */
-    open: (id: string) => void;
-    /** Up one level. On the first one, it closes. */
-    back: () => void;
-    /** Back to the context with this id, closing the ones in front of it. */
-    to: (id: string) => void;
-    /** Close every level: back to the page. */
-    close: () => void;
-    /** Internal: the control that opened each level, where focus returns when the level
-     *  above it closes. Written by `open`, read by `Drill`. */
-    readonly focusMarks: RefObject<(HTMLElement | null)[]>;
-}
-/** One level deeper: push the id — or, when it is already open, go back to it. Internal,
- *  exported for the test. */
-export declare function openPath(path: readonly string[], id: string): readonly string[];
-/** Back to the context with this id; an id not on the path changes nothing. */
-export declare function toPath(path: readonly string[], id: string): readonly string[];
-/** The written contexts that are open, in the order of the path. A context on the path
- *  that is not written is skipped: there is nothing to draw for it. */
-export declare function framesOf(children: ReactNode, path: readonly string[]): DrillContextProps[];
-/** The state of a `Drill`: the path of open contexts. Pass it to `<Drill state={…}>` and
- *  call `open(id)` from wherever the context is opened — a relation's «Abrir», a
- *  `Picker`'s open button, a rail action, a line's cell. */
-export declare function useDrill(initial?: readonly string[]): DrillState;
-export interface DrillContextProps {
-    /** What `open(id)` names. Unique inside the drill. */
-    id: string;
-    /** The context's name: the title while it is in front, its crumb when it is behind.
-     *  Short — «Línea 3», «Impresora térmica 80 mm», «Registrar pago». */
-    title: string;
-    /** One sentence under the title; also the dialog's description while in front. */
-    subtitle?: string;
-    /** This context's actions — Cancel and ONE primary. Drawn only while it is in front. */
-    footer?: ReactNode;
-    /** No padding of its own: for a child that is already a surface with its own margins
-     *  (a `Record`). A form or a wizard keeps the padding. */
-    flush?: boolean;
-    children: ReactNode;
-}
-export interface DrillProps {
-    state: DrillState;
-    /** The page's record, as the first crumb: «pedido · S00142». Pressing it closes. */
-    origin?: DrillOrigin;
-    /** One width for every level: a window that changes width at each step jumps under the
-     *  pointer. `lg` by default — a record with pages and lines needs it. */
-    width?: DialogWidth;
-    /** The `Drill.Context`s. Which ones are open is the state's path. */
-    children: ReactNode;
-}
-/**
- * The inside of the window: the trail, the context in front (and the ones behind it,
- * hidden), and the footer of the one in front.
- *
- * Internal — exported only so a test can read its markup, which the modal (a portal)
- * does not produce on the server.
- */
-export declare function DrillSurface({ frames, origin, onBack, onTo, onClose, focusMarks, }: {
-    frames: readonly DrillContextProps[];
-    origin?: DrillOrigin;
-    onBack: () => void;
-    onTo: (id: string) => void;
-    onClose: () => void;
-    focusMarks?: RefObject<(HTMLElement | null)[]>;
-}): import("react").JSX.Element | null;
-/**
- * ONE dialog that holds a stack of contexts opened from a record — and from each other —
- * with a trail back to the page. See the header of this file.
- *
- *     const drill = useDrill();
- *     …<RelationValue name={product} onOpen={() => drill.open("product")} />…
- *     <Drill state={drill} origin={{ kind: "pedido", label: "S00142" }}>
- *       <Drill.Context id="product" title={product} flush>
- *         <Record identity={…}>…</Record>
- *       </Drill.Context>
- *       <Drill.Context id="supplier" title={supplier} footer={…}>…</Drill.Context>
- *     </Drill>
- */
-export declare function Drill({ state, origin, width, children }: DrillProps): import("react").JSX.Element;
-export declare namespace Drill {
-    var Context: ((props: DrillContextProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"context">;
-}

package/dist/primitives/dialog/Drill.js

@@ -1,172 +0,0 @@
-"use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { flatten, propsOf, slot, slotOf } from "../../foundations/slots.js";
-import { cn, focusRing, tv } from "../../foundations/variants.js";
-import { IconButton } from "../button/Button.js";
-import { dialogStyles, } from "./Dialog.js";
-import { ArrowLeft, ChevronRight, X } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
-import { useKeyboard } from "react-aria";
-import { Dialog as AriaDialog, Heading, Link, Modal, ModalOverlay, } from "react-aria-components";
-function focused() {
-    if (typeof document === "undefined")
-        return null;
-    return document.activeElement instanceof HTMLElement ? document.activeElement : null;
-}
-/** One level deeper: push the id — or, when it is already open, go back to it. Internal,
- *  exported for the test. */
-export function openPath(path, id) {
-    const at = path.indexOf(id);
-    return at === -1 ? [...path, id] : path.slice(0, at + 1);
-}
-/** Back to the context with this id; an id not on the path changes nothing. */
-export function toPath(path, id) {
-    const at = path.indexOf(id);
-    return at === -1 ? path : path.slice(0, at + 1);
-}
-/** The written contexts that are open, in the order of the path. A context on the path
- *  that is not written is skipped: there is nothing to draw for it. */
-export function framesOf(children, path) {
-    const written = flatten(children)
-        .filter((node) => slotOf(node) === "context")
-        .map((node) => propsOf(node))
-        .filter((props) => props !== undefined);
-    return path
-        .map((id) => written.find((context) => context.id === id))
-        .filter((frame) => frame !== undefined);
-}
-/** The state of a `Drill`: the path of open contexts. Pass it to `<Drill state={…}>` and
- *  call `open(id)` from wherever the context is opened — a relation's «Abrir», a
- *  `Picker`'s open button, a rail action, a line's cell. */
-export function useDrill(initial = []) {
-    const [path, setPath] = useState(initial);
-    const focusMarks = useRef([]);
-    return {
-        path,
-        open: (id) => {
-            if (!path.includes(id))
-                focusMarks.current[path.length] = focused();
-            setPath(openPath(path, id));
-        },
-        back: () => setPath(path.slice(0, -1)),
-        to: (id) => setPath(toPath(path, id)),
-        close: () => setPath([]),
-        focusMarks,
-    };
-}
-const crumb = tv({
-    extend: focusRing,
-    base: "block max-w-(--container-crumb) min-w-0 cursor-pointer truncate rounded-mark text-muted transition-colors duration-(--duration-instant) hover:text-ink hover:underline hover:underline-offset-4",
-});
-/**
- * The inside of the window: the trail, the context in front (and the ones behind it,
- * hidden), and the footer of the one in front.
- *
- * Internal — exported only so a test can read its markup, which the modal (a portal)
- * does not produce on the server.
- */
-export function DrillSurface({ frames, origin, onBack, onTo, onClose, focusMarks, }) {
-    const copy = useUiCopy();
-    const depth = frames.length;
-    const top = frames[depth - 1];
-    const parent = depth > 1 ? frames[depth - 2] : undefined;
-    const bodies = useRef(new Map());
-    const was = useRef(depth);
-    const subtitleId = useId();
-    const { keyboardProps } = useKeyboard({
-        onKeyDown: (e) => {
-            if (e.key !== "Escape") {
-                e.continuePropagation();
-                return;
-            }
-            if (depth > 1)
-                onBack();
-            else
-                onClose();
-        },
-    });
-    /* Focus follows the level. Down: into the new context, so the keyboard does not stay on
-       a control that is now hidden. Up: back to what opened the level that closed. */
-    const topId = top?.id;
-    useEffect(() => {
-        const before = was.current;
-        was.current = depth;
-        if (before === depth || depth === 0 || topId === undefined)
-            return;
-        const box = bodies.current.get(topId);
-        if (depth > before) {
-            box?.focus();
-            return;
-        }
-        const mark = focusMarks?.current[depth];
-        (mark?.isConnected === true ? mark : box)?.focus();
-    }, [depth, topId, focusMarks]);
-    if (top === undefined)
-        return null;
-    const trail = [
-        ...(origin === undefined
-            ? []
-            : [
-                {
-                    key: "\u0000origin",
-                    label: (_jsxs(_Fragment, { children: [origin.kind === undefined ? null : (_jsxs("span", { className: "font-medium", children: [origin.kind, " "] })), _jsx("span", { className: "text-ink", children: origin.label })] })),
-                    onPress: onClose,
-                },
-            ]),
-        ...frames.slice(0, -1).map((frame) => ({
-            key: frame.id,
-            label: frame.title,
-            onPress: () => onTo(frame.id),
-        })),
-    ];
-    return (_jsx(AriaDialog, { ...(top.subtitle === undefined ? {} : { "aria-describedby": subtitleId }), className: "flex max-h-[inherit] min-h-0 flex-1 flex-col outline-0", children: _jsxs("div", { ...keyboardProps, className: "flex max-h-[inherit] min-h-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex shrink-0 items-start gap-2 border-b border-line px-4 py-3", children: [parent === undefined ? null : (_jsx("span", { className: "-ml-1.5 shrink-0", children: _jsx(IconButton, { icon: ArrowLeft, label: fillCopy(copy.drill.back, { name: parent.title }), onClick: onBack }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [trail.length === 0 ? null : (
-                                /* Where this was opened from, small and on top — the same place `Dialog`
-                                   says what it is about. Every crumb is a way back; the one in front is
-                                   not a crumb, it is the title. */
-                                _jsx("nav", { "aria-label": copy.drill.trail, className: "mb-0.5 flex min-w-0", children: _jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5 text-micro", children: trail.map((one, i) => (_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [i === 0 ? null : (_jsx(ChevronRight, { className: "size-(--size-icon-sm) shrink-0 text-line-strong", strokeWidth: 2, "aria-hidden": true })), _jsx(Link, { onPress: one.onPress, className: ({ isFocusVisible }) => crumb({ isFocusVisible }), children: one.label })] }, one.key))) }) })), _jsx(Heading, { slot: "title", className: "truncate text-title font-semibold text-ink", children: top.title }), top.subtitle === undefined ? null : (_jsx("p", { id: subtitleId, className: "mt-1 max-w-prose text-meta text-muted", children: top.subtitle }))] }), _jsx(IconButton, { icon: X, label: copy.shell.close, onClick: onClose })] }), frames.map((frame) => {
-                    const front = frame.id === top.id;
-                    return (
-                    /* Each level scrolls on its own and the ones behind are `hidden`, not gone:
-                       their state — a half-typed payment, the open tab of a product — is still
-                       there when the level above closes. */
-                    _jsx("div", { ref: (node) => {
-                            if (node === null)
-                                bodies.current.delete(frame.id);
-                            else
-                                bodies.current.set(frame.id, node);
-                        }, hidden: !front, tabIndex: -1, "data-drill-context": frame.id, className: cn("min-h-0 flex-1 overflow-y-auto outline-0", frame.flush !== true && "px-4 py-4", front && frame.footer === undefined && "max-sm:safe-bottom"), children: frame.children }, frame.id));
-                }), top.footer === undefined ? null : (_jsx("footer", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-3 max-sm:safe-bottom", children: top.footer }))] }) }));
-}
-/** One context of a drill: a title, what goes inside, and its own footer. It does not
- *  draw where it is written — the `Drill` draws it when its id is on the path. */
-const DrillContextSlot = slot("context", (_props) => null);
-/**
- * ONE dialog that holds a stack of contexts opened from a record — and from each other —
- * with a trail back to the page. See the header of this file.
- *
- *     const drill = useDrill();
- *     …<RelationValue name={product} onOpen={() => drill.open("product")} />…
- *     <Drill state={drill} origin={{ kind: "pedido", label: "S00142" }}>
- *       <Drill.Context id="product" title={product} flush>
- *         <Record identity={…}>…</Record>
- *       </Drill.Context>
- *       <Drill.Context id="supplier" title={supplier} footer={…}>…</Drill.Context>
- *     </Drill>
- */
-export function Drill({ state, origin, width = "lg", children }) {
-    /* While the window fades out the path is already empty: it keeps drawing the last levels
-       it had, so the content does not vanish before the window does. */
-    const [lastPath, setLastPath] = useState(state.path);
-    if (state.path.length > 0 && state.path !== lastPath)
-        setLastPath(state.path);
-    const path = state.path.length > 0 ? state.path : lastPath;
-    const frames = framesOf(children, path);
-    return (_jsx(ModalOverlay, { isOpen: state.path.length > 0, onOpenChange: (next) => {
-            if (!next)
-                state.close();
-        }, isDismissable: true, 
-        /* Escape is ours: up one level, not out of everything. See the header. */
-        isKeyboardDismissDisabled: true, className: dialogStyles.overlay, children: _jsx(Modal, { className: (s) => dialogStyles.modal({ ...s, width }), children: _jsx(DrillSurface, { frames: frames, ...(origin === undefined ? {} : { origin }), onBack: state.back, onTo: state.to, onClose: state.close, focusMarks: state.focusMarks }) }) }));
-}
-Drill.Context = DrillContextSlot;