panelui-web 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# panelui-web
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+PanelUI for the web: animated, data-rich React components, styled with Tailwind CSS on the
+tokens a shadcn project already defines.
+
+Documentation: [panelui.dev/docs/web](https://panelui.dev/docs/web)
+
+## Two ways to use it
+
+**Copy a component into your project** with the shadcn CLI. The source lands in
+`components/panelui/` and is yours to edit:
+
+```bash
+npx shadcn@latest add https://panelui.dev/r/web/planet.json
+```
+
+**Or install the package** and import from it:
+
+```bash
+npm install panelui-web
+```
+
+```css
+/* app/globals.css — let Tailwind see the classes the package uses */
+@import "tailwindcss";
+@source "../node_modules/panelui-web/dist";
+```
+
+```tsx
+import { Planet } from 'panelui-web/planet';
+```
+
+Both read the same source, so a component looks and behaves the same either way.
+
+## Requirements
+
+- React 18 or newer
+- Tailwind CSS 4
+- The shadcn theme tokens (`--background`, `--foreground`, `--card`, `--muted`, `--border`,
+  `--primary` and their `-foreground` pairs). `npx shadcn@latest init` writes them.
+
+## License
+
+MIT

package/dist/components/bar-picker/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * BarPicker — a short run of values as columns of lights, one column picked.
+ *
+ * ```tsx
+ * <BarPicker data={week} value={day} onValueChange={setDay} />
+ * ```
+ *
+ * ## A column is a stack of lights
+ *
+ * Each value is drawn as a column of segments, lit from the bottom up to the
+ * value, the way a level meter shows loudness. The unlit segments stay as
+ * faint outlines of themselves, so every column is the same height and how
+ * full it is can be judged against its own top without an axis.
+ *
+ * ## The picked column is the bright one
+ *
+ * It is lit at full strength with a glow on its highest segment, and it is
+ * wider than the others. The rest are the same colour, held back. Picking
+ * another column lights it from the bottom, one segment after the next.
+ *
+ * ## A choice, not a chart
+ *
+ * It behaves like a row of radio buttons. Exactly one column is picked, and
+ * the arrow keys walk along the row. The figure for the picked column is
+ * yours to show beside it, large: a column of eight lights cannot be read to
+ * the unit, but one number can.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+export interface BarPickerBar {
+    /** Written under the column: "Mon", "W3". Keep it to a few characters. */
+    label: ReactNode;
+    value: number;
+    /** The long form, for a screen reader: "Monday". Defaults to the label. */
+    name?: string;
+}
+/** Which of the theme's roles the lights are drawn in. */
+export type BarPickerColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface BarPickerProps extends Omit<ComponentProps<'div'>, 'children' | 'onChange' | 'defaultValue' | 'color'> {
+    /** The columns, left to right. */
+    data: BarPickerBar[];
+    /** The value a fully lit column stands for. Defaults to the largest in `data`. */
+    max?: number;
+    /** The index of the picked column, when the caller holds it. */
+    value?: number;
+    /** The index picked to begin with, when the caller does not hold it. */
+    defaultValue?: number;
+    /** Called with the index of a column when it is picked. */
+    onValueChange?: (index: number) => void;
+    /** How many lights a column is made of. */
+    segments?: number;
+    /** Which of the theme's roles the lights are drawn in. */
+    color?: BarPickerColor;
+    /** Writes a value for a screen reader: "17 deploys". */
+    formatValue?: (value: number) => string;
+    /** What a screen reader calls the row. */
+    label?: string;
+}
+export declare function BarPicker({ data, max, value, defaultValue, onValueChange, segments, color, formatValue, label, className, ...props }: BarPickerProps): import("react").JSX.Element;
+export declare namespace BarPicker {
+    var displayName: string;
+}

package/dist/components/bar-picker/index.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BarPicker — a short run of values as columns of lights, one column picked.
+ *
+ * ```tsx
+ * <BarPicker data={week} value={day} onValueChange={setDay} />
+ * ```
+ *
+ * ## A column is a stack of lights
+ *
+ * Each value is drawn as a column of segments, lit from the bottom up to the
+ * value, the way a level meter shows loudness. The unlit segments stay as
+ * faint outlines of themselves, so every column is the same height and how
+ * full it is can be judged against its own top without an axis.
+ *
+ * ## The picked column is the bright one
+ *
+ * It is lit at full strength with a glow on its highest segment, and it is
+ * wider than the others. The rest are the same colour, held back. Picking
+ * another column lights it from the bottom, one segment after the next.
+ *
+ * ## A choice, not a chart
+ *
+ * It behaves like a row of radio buttons. Exactly one column is picked, and
+ * the arrow keys walk along the row. The figure for the picked column is
+ * yours to show beside it, large: a column of eight lights cannot be read to
+ * the unit, but one number can.
+ */
+import { useEffect, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const barPickerVariants = tv({
+    slots: {
+        root: 'flex w-full items-end gap-1.5',
+        column: 'group flex min-w-0 cursor-pointer flex-col items-stretch gap-2.5 rounded-lg outline-none transition-[flex-grow] duration-500 ease-[cubic-bezier(0.34,1.4,0.64,1)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background motion-reduce:transition-none',
+        // Stacked from the bottom, so the first segment in the markup is the
+        // lowest light.
+        stack: 'flex h-28 flex-col-reverse gap-[3px]',
+        segment: 'min-h-0 flex-1 rounded-[5px] transition-[background-color,box-shadow,opacity] duration-300 motion-reduce:transition-none',
+        label: 'truncate text-center text-xs text-muted-foreground transition-colors',
+    },
+    variants: {
+        color: {
+            primary: { root: '[--pu-color:var(--primary)]' },
+            info: { root: '[--pu-color:var(--info)]' },
+            success: { root: '[--pu-color:var(--success)]' },
+            warning: { root: '[--pu-color:var(--warning)]' },
+            destructive: { root: '[--pu-color:var(--destructive)]' },
+        },
+        selected: {
+            true: { column: 'flex-[1.5]', label: 'font-medium text-foreground' },
+            false: { column: 'flex-1' },
+        },
+        /** What one segment is doing. */
+        light: {
+            off: { segment: 'bg-muted' },
+            // Lit in a column that is not picked: the colour, held back.
+            dim: {
+                segment: 'bg-[color-mix(in_oklab,var(--pu-color)_26%,transparent)] group-hover:bg-[color-mix(in_oklab,var(--pu-color)_48%,transparent)]',
+            },
+            on: { segment: 'bg-[var(--pu-color)]' },
+            // The highest light of the picked column.
+            peak: {
+                segment: 'bg-[var(--pu-color)] shadow-[0_0_16px_color-mix(in_oklab,var(--pu-color)_65%,transparent)]',
+            },
+        },
+    },
+});
+/** Milliseconds between one light of a column coming on and the next. */
+const STAGGER = 32;
+export function BarPicker({ data, max, value, defaultValue = 0, onValueChange, segments = 8, color = 'primary', formatValue = (bar) => String(bar), label = 'Values', className, ...props }) {
+    const slots = barPickerVariants({ color });
+    const [internal, setInternal] = useState(defaultValue);
+    const picked = clampIndex(value ?? internal, data.length);
+    const refs = useRef([]);
+    // The columns start dark and light up once mounted, so they are seen
+    // arriving.
+    const [lit, setLit] = useState(false);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setLit(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const count = Math.max(1, Math.round(segments));
+    const ceiling = max ?? Math.max(1, ...data.map((bar) => bar.value));
+    const pick = (index) => {
+        if (value === undefined)
+            setInternal(index);
+        onValueChange?.(index);
+    };
+    const onKeyDown = (event, index) => {
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = rtl ? -1 : 1;
+        const moves = {
+            ArrowLeft: index - forward,
+            ArrowRight: index + forward,
+            ArrowDown: index - 1,
+            ArrowUp: index + 1,
+            Home: 0,
+            End: data.length - 1,
+        };
+        const target = moves[event.key];
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        // Round the ends, as a radio group does.
+        const next = (target + data.length) % data.length;
+        refs.current[next]?.focus();
+        pick(next);
+    };
+    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: slots.root({ className }), ...props, children: data.map((bar, index) => {
+            const selected = index === picked;
+            const part = barPickerVariants({ selected });
+            const name = bar.name ?? (typeof bar.label === 'string' ? bar.label : `Bar ${index + 1}`);
+            // How many lights the value reaches. Any value above zero lights at
+            // least one, so a small value is a mark and not an empty column.
+            const share = Math.min(1, Math.max(0, bar.value / ceiling));
+            const reached = !lit || bar.value <= 0 ? 0 : Math.max(1, Math.round(share * count));
+            return (_jsxs("button", { ref: (node) => {
+                    refs.current[index] = node;
+                }, type: "button", role: "radio", "aria-checked": selected, "aria-label": `${name}: ${formatValue(bar.value)}`, tabIndex: selected ? 0 : -1, onClick: () => pick(index), onKeyDown: (event) => onKeyDown(event, index), className: part.column(), children: [_jsx("span", { className: slots.stack(), children: Array.from({ length: count }, (_, level) => {
+                            const on = level < reached;
+                            const light = !on ? 'off' : !selected ? 'dim' : level === reached - 1 ? 'peak' : 'on';
+                            return (_jsx("span", { className: barPickerVariants({ light }).segment(), style: {
+                                    // Bottom first, so a column is seen filling upwards.
+                                    transitionDelay: on ? `${level * STAGGER}ms` : undefined,
+                                    // The picked column brightens towards its top.
+                                    opacity: light === 'on'
+                                        ? Number((0.5 + 0.5 * ((level + 1) / reached)).toFixed(3))
+                                        : undefined,
+                                } }, level));
+                        }) }), _jsx("span", { "aria-hidden": "true", className: part.label(), children: bar.label })] }, index));
+        }) }));
+}
+BarPicker.displayName = 'BarPicker';
+function clampIndex(index, length) {
+    if (length === 0)
+        return 0;
+    return Math.min(length - 1, Math.max(0, index));
+}

package/dist/components/command-dock/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * CommandDock — a small button that opens into a place to ask for something,
+ * with the answer arriving under it a row at a time.
+ *
+ * ```tsx
+ * <CommandDock onSubmit={ask}>
+ *   <CommandDock.Trigger>Ask</CommandDock.Trigger>
+ *   <CommandDock.Panel>
+ *     <CommandDock.Input placeholder="What do you want to find?" />
+ *     <CommandDock.Results>
+ *       {rows.map((row) => <CommandDock.Row key={row.id}>{row.text}</CommandDock.Row>)}
+ *     </CommandDock.Results>
+ *   </CommandDock.Panel>
+ * </CommandDock>
+ * ```
+ *
+ * ## One surface that opens
+ *
+ * The button and the panel are the same surface. Closed, it is a pill as
+ * wide as its label. Opened, it widens, the label fades into a field in the
+ * same place, and it grows downwards as rows arrive. Closing runs the same
+ * steps backwards: the rows fold up, then it narrows. Nothing appears from
+ * elsewhere, so it is clear what was pressed and where the answer belongs.
+ *
+ * ## It runs nothing
+ *
+ * The dock does not know where answers come from. `onSubmit` is handed what
+ * was typed, and the rows are whatever you render. A row that mounts slides
+ * in after the one before it, so rows added one by one read as an answer
+ * being written, whether they come from a search, a model or a list you
+ * already had.
+ *
+ * ## Closing
+ *
+ * Escape closes it and gives focus back to where it was, and so does a press
+ * anywhere outside it.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+export interface CommandDockProps extends Omit<ComponentProps<'div'>, 'onSubmit' | 'defaultValue'> {
+    /** Whether it is open, when the caller holds that. */
+    open?: boolean;
+    /** Whether it starts open, when the caller does not. */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** What is typed in the field, when the caller holds it. */
+    value?: string;
+    /** Called with what is typed, each time it changes. */
+    onValueChange?: (value: string) => void;
+    /** Called with what was typed when it is sent. */
+    onSubmit?: (value: string) => void;
+    /** While true, the field cannot be sent again and `CommandDock.Status` is shown. */
+    busy?: boolean;
+    /** How wide it is while closed, as a CSS length. */
+    closedWidth?: string;
+}
+declare function CommandDockRoot({ open: controlledOpen, defaultOpen, onOpenChange, value: controlledValue, onValueChange, onSubmit, busy, closedWidth, className, style, children, ...props }: CommandDockProps): import("react").JSX.Element;
+declare namespace CommandDockRoot {
+    var displayName: string;
+}
+export interface CommandDockTriggerProps extends ComponentProps<'button'> {
+}
+/** The closed form: a button that opens the dock. */
+declare function CommandDockTrigger({ className, onClick, ...props }: CommandDockTriggerProps): import("react").JSX.Element;
+declare namespace CommandDockTrigger {
+    var displayName: string;
+}
+export interface CommandDockPanelProps extends ComponentProps<'div'> {
+}
+/** The open form: the field, and the rows under it. */
+declare function CommandDockPanel({ className, ...props }: CommandDockPanelProps): import("react").JSX.Element;
+declare namespace CommandDockPanel {
+    var displayName: string;
+}
+export interface CommandDockInputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'type'> {
+    /** What a screen reader calls the send button. */
+    submitLabel?: string;
+}
+/** The field, with a button to send what is in it. Enter sends too. */
+declare function CommandDockInput({ className, submitLabel, 'aria-label': ariaLabel, ...props }: CommandDockInputProps): import("react").JSX.Element;
+declare namespace CommandDockInput {
+    var displayName: string;
+}
+export interface CommandDockResultsProps extends ComponentProps<'div'> {
+    /** What a screen reader calls the list of rows. */
+    label?: string;
+}
+/** Where the rows go. It takes no room until there is something in it. */
+declare function CommandDockResults({ className, label, children, ...props }: CommandDockResultsProps): import("react").JSX.Element;
+declare namespace CommandDockResults {
+    var displayName: string;
+}
+export interface CommandDockRowProps extends ComponentProps<'div'> {
+    /** Called when the row is pressed. Passing this makes the row a button. */
+    onSelect?: () => void;
+}
+/** One row of the answer. It slides in when it is added. */
+declare function CommandDockRow({ className, onSelect, children, ...props }: CommandDockRowProps): import("react").JSX.Element;
+declare namespace CommandDockRow {
+    var displayName: string;
+}
+export interface CommandDockStatusProps extends ComponentProps<'div'> {
+    children?: ReactNode;
+}
+/** Shown under the rows while `busy`: three dots, and words if you give it some. */
+declare function CommandDockStatus({ className, children, ...props }: CommandDockStatusProps): import("react").JSX.Element;
+declare namespace CommandDockStatus {
+    var displayName: string;
+}
+export declare const CommandDock: typeof CommandDockRoot & {
+    Trigger: typeof CommandDockTrigger;
+    Panel: typeof CommandDockPanel;
+    Input: typeof CommandDockInput;
+    Results: typeof CommandDockResults;
+    Row: typeof CommandDockRow;
+    Status: typeof CommandDockStatus;
+};
+export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, };

package/dist/components/command-dock/index.js

@@ -0,0 +1,239 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CommandDock — a small button that opens into a place to ask for something,
+ * with the answer arriving under it a row at a time.
+ *
+ * ```tsx
+ * <CommandDock onSubmit={ask}>
+ *   <CommandDock.Trigger>Ask</CommandDock.Trigger>
+ *   <CommandDock.Panel>
+ *     <CommandDock.Input placeholder="What do you want to find?" />
+ *     <CommandDock.Results>
+ *       {rows.map((row) => <CommandDock.Row key={row.id}>{row.text}</CommandDock.Row>)}
+ *     </CommandDock.Results>
+ *   </CommandDock.Panel>
+ * </CommandDock>
+ * ```
+ *
+ * ## One surface that opens
+ *
+ * The button and the panel are the same surface. Closed, it is a pill as
+ * wide as its label. Opened, it widens, the label fades into a field in the
+ * same place, and it grows downwards as rows arrive. Closing runs the same
+ * steps backwards: the rows fold up, then it narrows. Nothing appears from
+ * elsewhere, so it is clear what was pressed and where the answer belongs.
+ *
+ * ## It runs nothing
+ *
+ * The dock does not know where answers come from. `onSubmit` is handed what
+ * was typed, and the rows are whatever you render. A row that mounts slides
+ * in after the one before it, so rows added one by one read as an answer
+ * being written, whether they come from a search, a model or a list you
+ * already had.
+ *
+ * ## Closing
+ *
+ * Escape closes it and gives focus back to where it was, and so does a press
+ * anywhere outside it.
+ */
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const commandDockVariants = tv({
+    slots: {
+        root: 'relative flex w-full justify-center',
+        /*
+         * The widths are both real lengths, so the change between them can be
+         * animated; `auto` cannot. The easing has no overshoot: a surface this
+         * size that bounces as it closes reads as a mistake.
+         */
+        surface: 'overflow-hidden border bg-card text-card-foreground shadow-sm transition-[width,border-radius,box-shadow] duration-[400ms] ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+        // The label keeps its row whether or not it can be seen, so the surface
+        // is never shorter than one row and never jumps as the two trade places.
+        trigger: 'flex h-11 w-full cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-4 text-sm font-medium outline-none transition-[opacity,background-color] duration-200 hover:bg-accent focus-visible:bg-accent [&_svg]:size-4 [&_svg]:shrink-0',
+        // Pulled up over the label's row: the field sits exactly where the label
+        // was, and the two fade through each other.
+        panel: '-mt-11 flex flex-col',
+        form: 'flex h-11 items-center gap-2 pe-1.5 ps-4 transition-opacity duration-200 motion-reduce:transition-none',
+        input: 'h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+        submit: 'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground outline-none transition-[opacity,scale] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card active:scale-95 disabled:cursor-default disabled:opacity-30 [&_svg]:size-4',
+        // Two rows of a grid, the second going from no height to its own, which
+        // is how the panel grows to whatever the rows come to.
+        results: 'grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none',
+        resultsClip: 'min-h-0 overflow-hidden',
+        resultsInner: 'flex flex-col gap-0.5 border-t p-1.5',
+        row: 'flex items-center gap-3 rounded-xl px-2.5 py-2 text-sm transition-[opacity,translate] duration-300 ease-out starting:translate-y-1.5 starting:opacity-0 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',
+        status: 'flex items-center gap-2 px-2.5 py-2 text-sm text-muted-foreground',
+        dots: 'flex gap-1',
+        dot: 'size-1 animate-pulse rounded-full bg-muted-foreground',
+    },
+    variants: {
+        /*
+         * Opening and closing are the same steps in opposite orders. Opening, the
+         * surface widens and the rows follow it down. Closing, the rows fold up
+         * first and the surface narrows after them, so what is seen is one thing
+         * putting itself away and not two things changing at once.
+         */
+        open: {
+            true: {
+                // One length, not a width and a limit on it: a change of width is
+                // animated from the width as written, and `100%` with a `max-width`
+                // would start the closing from the full width of whatever it is in.
+                surface: 'w-[min(100%,28rem)] rounded-3xl shadow-lg',
+                trigger: 'pointer-events-none opacity-0',
+                form: 'opacity-100 delay-150',
+            },
+            false: {
+                surface: 'w-[var(--pu-closed)] rounded-[1.375rem] delay-200',
+                trigger: 'opacity-100 delay-300',
+                form: 'pointer-events-none opacity-0',
+            },
+        },
+        filled: {
+            true: { results: 'grid-rows-[1fr] delay-200' },
+            false: { results: 'grid-rows-[0fr]' },
+        },
+        interactive: {
+            true: { row: 'cursor-pointer hover:bg-accent focus-visible:bg-accent focus-visible:outline-none' },
+        },
+    },
+});
+const CommandDockContext = createContext(null);
+function useDock(part) {
+    const dock = useContext(CommandDockContext);
+    if (!dock)
+        throw new Error(`${part} must be used inside a <CommandDock>.`);
+    return dock;
+}
+function CommandDockRoot({ open: controlledOpen, defaultOpen = false, onOpenChange, value: controlledValue, onValueChange, onSubmit, busy = false, closedWidth = '9rem', className, style, children, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [internalValue, setInternalValue] = useState('');
+    const open = controlledOpen ?? internalOpen;
+    const value = controlledValue ?? internalValue;
+    const root = useRef(null);
+    const panelId = useId();
+    const slots = commandDockVariants({ open });
+    const setOpen = useCallback((next) => {
+        if (controlledOpen === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [controlledOpen, onOpenChange]);
+    const setValue = useCallback((next) => {
+        if (controlledValue === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [controlledValue, onValueChange]);
+    const submit = useCallback(() => {
+        const text = value.trim();
+        if (text && !busy)
+            onSubmit?.(text);
+    }, [value, busy, onSubmit]);
+    // A press outside closes it. Escape does too, and puts focus back on the
+    // surface so the next key goes somewhere sensible.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!root.current?.contains(event.target))
+                setOpen(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || !root.current?.contains(document.activeElement))
+                return;
+            setOpen(false);
+            requestAnimationFrame(() => root.current?.querySelector('[data-dock-trigger]')?.focus());
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open, setOpen]);
+    const context = useMemo(() => ({ open, setOpen, value, setValue, submit, busy, panelId }), [open, setOpen, value, setValue, submit, busy, panelId]);
+    return (_jsx(CommandDockContext.Provider, { value: context, children: _jsx("div", { ref: root, className: slots.root({ className }), ...props, children: _jsx("div", { "data-open": open ? '' : undefined, className: slots.surface(), style: { ['--pu-closed']: closedWidth, ...style }, children: children }) }) }));
+}
+CommandDockRoot.displayName = 'CommandDock';
+/** Keeps an element out of the tab order and the accessibility tree while it cannot be seen. */
+function useInert(inert) {
+    const ref = useRef(null);
+    // Before anything else runs: the field asks for focus as the dock opens,
+    // and an element inside something still inert cannot take it.
+    useLayoutEffect(() => {
+        // Set on the element, not passed as a prop: how a boolean `inert` prop is
+        // written to the page differs between React versions.
+        ref.current?.toggleAttribute('inert', inert);
+    }, [inert]);
+    return ref;
+}
+/** The closed form: a button that opens the dock. */
+function CommandDockTrigger({ className, onClick, ...props }) {
+    const dock = useDock('CommandDock.Trigger');
+    const ref = useInert(dock.open);
+    return (_jsx("button", { ref: ref, type: "button", "data-dock-trigger": "", "aria-expanded": dock.open, "aria-controls": dock.panelId, className: commandDockVariants({ open: dock.open }).trigger({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                dock.setOpen(true);
+        }, ...props }));
+}
+CommandDockTrigger.displayName = 'CommandDock.Trigger';
+/** The open form: the field, and the rows under it. */
+function CommandDockPanel({ className, ...props }) {
+    const dock = useDock('CommandDock.Panel');
+    // Kept in the page while closed, so it can be seen folding away. Inert, so
+    // nothing in it can be reached while it cannot be seen.
+    const ref = useInert(!dock.open);
+    return (_jsx("div", { ref: ref, id: dock.panelId, "data-open": dock.open ? '' : undefined, className: commandDockVariants().panel({ className }), ...props }));
+}
+CommandDockPanel.displayName = 'CommandDock.Panel';
+/** The field, with a button to send what is in it. Enter sends too. */
+function CommandDockInput({ className, submitLabel = 'Send', 'aria-label': ariaLabel = 'Ask', ...props }) {
+    const dock = useDock('CommandDock.Input');
+    const slots = commandDockVariants({ open: dock.open });
+    const field = useRef(null);
+    // It is opened in order to type in it. Asked for without scrolling: the
+    // surface is still on its way to its size, and the page should not chase it.
+    useEffect(() => {
+        if (dock.open)
+            field.current?.focus({ preventScroll: true });
+    }, [dock.open]);
+    const send = (event) => {
+        event.preventDefault();
+        dock.submit();
+    };
+    return (_jsxs("form", { role: "search", className: slots.form(), onSubmit: send, children: [_jsx("input", { ref: field, type: "text", "aria-label": ariaLabel, value: dock.value, onChange: (event) => dock.setValue(event.target.value), className: slots.input({ className }), ...props }), _jsx("button", { type: "submit", "aria-label": submitLabel, disabled: dock.busy || dock.value.trim() === '', className: slots.submit(), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }) })] }));
+}
+CommandDockInput.displayName = 'CommandDock.Input';
+/** Where the rows go. It takes no room until there is something in it. */
+function CommandDockResults({ className, label = 'Results', children, ...props }) {
+    const dock = useDock('CommandDock.Results');
+    const rows = Array.isArray(children) ? children.flat().filter(Boolean).length : children ? 1 : 0;
+    // Closed, it folds away whatever it holds.
+    const filled = dock.open && (rows > 0 || dock.busy);
+    const slots = commandDockVariants({ filled });
+    return (_jsx("div", { className: slots.results(), children: _jsx("div", { className: slots.resultsClip(), children: _jsx("div", { role: "list", "aria-label": label, "aria-live": "polite", className: slots.resultsInner({ className }), ...props, children: children }) }) }));
+}
+CommandDockResults.displayName = 'CommandDock.Results';
+/** One row of the answer. It slides in when it is added. */
+function CommandDockRow({ className, onSelect, children, ...props }) {
+    const slots = commandDockVariants({ interactive: onSelect !== undefined });
+    return (_jsx("div", { role: "listitem", ...props, children: onSelect ? (_jsx("button", { type: "button", onClick: onSelect, className: slots.row({ className: ['w-full text-start', className] }), children: children })) : (_jsx("div", { className: slots.row({ className }), children: children })) }));
+}
+CommandDockRow.displayName = 'CommandDock.Row';
+/** Shown under the rows while `busy`: three dots, and words if you give it some. */
+function CommandDockStatus({ className, children = 'Working', ...props }) {
+    const slots = commandDockVariants();
+    return (_jsxs("div", { role: "status", className: slots.status({ className }), ...props, children: [_jsxs("span", { "aria-hidden": "true", className: slots.dots(), children: [_jsx("span", { className: slots.dot() }), _jsx("span", { className: slots.dot({ className: '[animation-delay:150ms]' }) }), _jsx("span", { className: slots.dot({ className: '[animation-delay:300ms]' }) })] }), children] }));
+}
+CommandDockStatus.displayName = 'CommandDock.Status';
+export const CommandDock = Object.assign(CommandDockRoot, {
+    Trigger: CommandDockTrigger,
+    Panel: CommandDockPanel,
+    Input: CommandDockInput,
+    Results: CommandDockResults,
+    Row: CommandDockRow,
+    Status: CommandDockStatus,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, };