panelui-web 0.0.0-stage → 0.2.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/card/index.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Card — a surface that holds one thing: a plan, a setting, a summary.
+ *
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Card.Title>Storage</Card.Title>
+ *     <Card.Description>Northwind Studio workspace</Card.Description>
+ *     <Card.Action><Button variant="ghost">Manage</Button></Card.Action>
+ *   </Card.Header>
+ *   <Card.Content>…</Card.Content>
+ *   <Card.Footer variant="panel">…</Card.Footer>
+ * </Card>
+ * ```
+ *
+ * ## The padding is on the parts
+ *
+ * The card itself draws a surface and nothing inside it, and every part
+ * carries its own padding. That is what lets a picture reach the card's
+ * corners with nothing but `overflow-hidden` on the card, and what lets a
+ * footer be a band set into the bottom of it rather than one more row.
+ *
+ * ## The action sits beside the heading
+ *
+ * `Card.Action` is placed in the header's top trailing corner whatever order
+ * it is written in, and the title and description keep the rest of the width.
+ * A button that belongs to the whole card goes there; one that belongs to the
+ * content goes in the content.
+ *
+ * ## It renders on the server
+ *
+ * No state, no effects, no handlers of its own: everything that changes with
+ * `size` or with the parts present is done in CSS, so a page of cards costs no
+ * JavaScript.
+ */
+import type { ComponentProps } from 'react';
+export interface CardProps extends ComponentProps<'div'> {
+    /** `sm` tightens the padding and the title, for a card in a dense grid. Default `default`. */
+    size?: 'default' | 'sm';
+    /**
+     * The element to render. `article` for a card that stands on its own, `li`
+     * for one in a list, `section` for one that groups a part of a page.
+     */
+    as?: 'div' | 'article' | 'section' | 'li';
+}
+declare function CardRoot({ size, as: Element, className, ...props }: CardProps): import("react").JSX.Element;
+declare namespace CardRoot {
+    var displayName: string;
+}
+export interface CardHeaderProps extends ComponentProps<'div'> {
+}
+/** The title, the line under it, and the action beside them. */
+declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+export interface CardTitleProps extends ComponentProps<'h3'> {
+    /** The heading level, to fit the page around the card. Default `h3`. */
+    as?: 'h2' | 'h3' | 'h4' | 'div';
+}
+/** What the card is about. A heading, so the page outline includes it. */
+declare function CardTitle({ as: Element, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export interface CardDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under the title. */
+declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
+export interface CardActionProps extends ComponentProps<'div'> {
+}
+/** A control for the whole card, held in the header's top trailing corner. */
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
+export interface CardContentProps extends ComponentProps<'div'> {
+}
+/** The body. */
+declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
+export interface CardFooterProps extends ComponentProps<'div'> {
+    /**
+     * `plain` continues the card. `panel` is a darker band set into its bottom,
+     * for actions. Default `plain`.
+     */
+    variant?: 'plain' | 'panel';
+}
+/** The row at the bottom, usually the card's actions. */
+declare function CardFooter({ variant, className, ...props }: CardFooterProps): import("react").JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+};
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/components/card/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const cardVariants = tv({
+    slots: {
+        root: 'group/card flex flex-col rounded-2xl border bg-card text-card-foreground shadow-xs',
+        header: [
+            'grid auto-rows-min grid-cols-[minmax(0,1fr)] items-start gap-x-4 gap-y-1.5 p-6',
+            'has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',
+            'group-data-[size=sm]/card:gap-y-1 group-data-[size=sm]/card:p-4',
+        ],
+        title: 'text-lg font-semibold leading-tight tracking-[-0.01em] group-data-[size=sm]/card:text-base',
+        description: 'text-sm text-muted-foreground',
+        // Its own column, across both of the heading's rows, so a long title wraps
+        // beside it instead of underneath it.
+        action: 'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        // `first:` for a card with no header, which would otherwise start flush.
+        content: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+        footer: 'flex items-center gap-2',
+    },
+    variants: {
+        footer: {
+            /** Part of the card: same surface, continuing the content's padding. */
+            plain: {
+                footer: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+            },
+            /**
+             * A band set into the bottom of the card: a rule across its top, a step
+             * darker, and the card's own bottom corners. For a footer that is what
+             * somebody does with the card, not more of what it says.
+             */
+            panel: {
+                footer: 'mt-auto rounded-b-[calc(var(--radius-2xl)-1px)] border-t bg-muted/60 px-6 py-4 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:py-3',
+            },
+        },
+    },
+});
+function CardRoot({ size = 'default', as: Element = 'div', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card", "data-size": size, className: slots.root({ className }), ...props });
+}
+CardRoot.displayName = 'Card';
+/** The title, the line under it, and the action beside them. */
+function CardHeader({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-header", className: slots.header({ className }), ...props });
+}
+CardHeader.displayName = 'Card.Header';
+/** What the card is about. A heading, so the page outline includes it. */
+function CardTitle({ as: Element = 'h3', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card-title", className: slots.title({ className }), ...props });
+}
+CardTitle.displayName = 'Card.Title';
+/** A line under the title. */
+function CardDescription({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("p", { "data-slot": "card-description", className: slots.description({ className }), ...props });
+}
+CardDescription.displayName = 'Card.Description';
+/** A control for the whole card, held in the header's top trailing corner. */
+function CardAction({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-action", className: slots.action({ className }), ...props });
+}
+CardAction.displayName = 'Card.Action';
+/** The body. */
+function CardContent({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-content", className: slots.content({ className }), ...props });
+}
+CardContent.displayName = 'Card.Content';
+/** The row at the bottom, usually the card's actions. */
+function CardFooter({ variant = 'plain', className, ...props }) {
+    const slots = cardVariants({ footer: variant });
+    return _jsx("div", { "data-slot": "card-footer", className: slots.footer({ className }), ...props });
+}
+CardFooter.displayName = 'Card.Footer';
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Action: CardAction,
+    Content: CardContent,
+    Footer: CardFooter,
+});
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

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, };