@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/clock.js

@@ -0,0 +1,31 @@
+export function realClock() {
+    const repeats = new Set();
+    return {
+        every(ms, run) {
+            const id = setInterval(run, ms);
+            repeats.add(run);
+            return () => {
+                clearInterval(id);
+                repeats.delete(run);
+            };
+        },
+        tick() {
+            for (const run of [...repeats])
+                run();
+        }
+    };
+}
+export function manualClock() {
+    const repeats = new Set();
+    return {
+        every(_ms, run) {
+            const entry = () => run();
+            repeats.add(entry);
+            return () => repeats.delete(entry);
+        },
+        tick() {
+            for (const run of [...repeats])
+                run();
+        }
+    };
+}

package/dist/components/AppFrame.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { MenuEntry } from './MenuItems.tsx';
+import type { SidebarLink } from './Sidebar.tsx';
+type AppFrameProps = {
+    links: readonly SidebarLink[];
+    workspaceMenu?: readonly MenuEntry[];
+    isSidebarToggled: boolean;
+    onToggleSidebar: () => void;
+    onCloseSidebar: () => void;
+    onSearch?: () => void;
+    children: ReactNode;
+};
+export declare function AppFrame({ links, workspaceMenu, isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }: AppFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/AppFrame.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { useModel } from "../hooks/appContext.js";
+import { FrameContext } from "./frame.js";
+import { Scrim } from "./Scrim.js";
+import { Sidebar } from "./Sidebar.js";
+import { useAnimatesOnChange } from "../hooks/useAnimatesOnChange.js";
+export function AppFrame({ links, workspaceMenu = [], isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }) {
+    const appSettings = useModel('appSettings');
+    const account = useModel('account');
+    const menu = account.user === null
+        ? workspaceMenu
+        : [
+            ...workspaceMenu,
+            ...(workspaceMenu.length > 0 ? ['separator'] : []),
+            { id: 'signOut', label: 'Log out', onSelect: account.signOut }
+        ];
+    const isSidebarAnimating = useAnimatesOnChange(isSidebarToggled, SIDEBAR_ANIMATION_MS);
+    return (_jsx(FrameContext, { value: { onToggleSidebar }, children: _jsxs("div", { ...stylex.props(styles.frame), children: [_jsx(Sidebar, { workspace: appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
+                        ? undefined
+                        : () => {
+                            onCloseSidebar();
+                            onSearch();
+                        } }), _jsx(Scrim, { label: "Close sidebar", isOpen: isSidebarToggled, isAnimating: isSidebarAnimating, onClose: onCloseSidebar }), _jsx("main", { ...stylex.props(styles.panel, isSidebarToggled && styles.panelAlone), children: children })] }) }));
+}
+const SIDEBAR_ANIMATION_MS = 400;
+const styles = stylex.create({
+    frame: {
+        display: 'flex',
+        height: '100%',
+        backgroundColor: colors.shell
+    },
+    panel: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0,
+        marginBlock: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        },
+        marginInlineEnd: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        },
+        overflow: 'hidden',
+        backgroundColor: colors.containerRecessed,
+        borderRadius: {
+            default: radii.xxxl,
+            [breakpoints.compact]: 0
+        },
+        boxShadow: {
+            default: shadows.default,
+            [breakpoints.compact]: null
+        }
+    },
+    panelAlone: {
+        marginInlineStart: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        }
+    }
+});

package/dist/components/AppearancePicker.d.ts

@@ -0,0 +1 @@
+export declare function AppearancePicker(): import("react").JSX.Element;

package/dist/components/AppearancePicker.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModel } from "../hooks/appContext.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+export function AppearancePicker() {
+    const account = useModel('account');
+    return (_jsx(SegmentedControl, { label: "Appearance", value: account.appearance, options: options, onChange: (appearance) => account.setAppearance({ appearance }) }));
+}
+const options = [
+    { value: 'system', label: 'System' },
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' }
+];

package/dist/components/Avatar.d.ts

@@ -0,0 +1,9 @@
+import type { Placement } from './Placement.ts';
+type AvatarProps = {
+    name: string;
+    imageUrl?: string | null;
+    size?: 'sm' | 'md' | 'lg';
+    style?: Placement;
+};
+export declare function Avatar({ name, imageUrl, size, style }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/Avatar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontSizes, fontWeights, lineHeights, radii } from "../theme/tokens.stylex.js";
+export function Avatar({ name, imageUrl = null, size = 'md', style }) {
+    return (_jsxs(BaseAvatar.Root, { className: stylex.props(styles.avatar, sizes[size], style).className, children: [imageUrl === null ? null : (_jsx(BaseAvatar.Image, { src: imageUrl, alt: "", className: stylex.props(styles.image).className })), _jsx(BaseAvatar.Fallback, { className: stylex.props(styles.fallback).className, children: initialsOf(name) })] }));
+}
+function initialsOf(name) {
+    return name
+        .split(/\s+/)
+        .filter((word) => word !== '')
+        .slice(0, 2)
+        .map((word) => word.charAt(0).toUpperCase())
+        .join('');
+}
+const styles = stylex.create({
+    avatar: {
+        position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
+        overflow: 'hidden',
+        fontWeight: fontWeights.semimedium,
+        outlineWidth: borders.hairline,
+        outlineStyle: 'solid',
+        outlineColor: colors.borderDefault,
+        outlineOffset: `calc(-1 * ${borders.hairline})`,
+        backgroundColor: colors.component,
+        borderRadius: radii.full
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+    },
+    fallback: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        color: colors.secondaryForeground
+    }
+});
+const sizes = stylex.create({
+    sm: {
+        width: lineHeights.caption,
+        height: lineHeights.caption,
+        fontSize: fontSizes.captionXs,
+        lineHeight: lineHeights.captionXs
+    },
+    md: {
+        width: lineHeights.bodySm,
+        height: lineHeights.bodySm,
+        fontSize: fontSizes.captionXs,
+        lineHeight: lineHeights.captionXs
+    },
+    lg: {
+        width: lineHeights.body,
+        height: lineHeights.body,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.caption
+    }
+});

package/dist/components/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type BadgeProps = {
+    children: ReactNode;
+    variant?: 'primary' | 'tertiary' | 'outline' | 'transparent';
+    tone?: 'neutral' | 'brand' | 'danger';
+    size?: 'sm' | 'md';
+    style?: Placement;
+};
+export declare function Badge({ children, variant, tone, size, style }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/Badge.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, controls, fontSizes, lineHeights, radii, space } from "../theme/tokens.stylex.js";
+export function Badge({ children, variant = 'tertiary', tone = 'neutral', size = 'md', style }) {
+    return (_jsx("span", { ...stylex.props(styles.badge, sizes[size], looks[`${variant}${toneKeys[tone]}`], style), children: children }));
+}
+const toneKeys = {
+    neutral: 'Neutral',
+    brand: 'Brand',
+    danger: 'Danger'
+};
+const styles = stylex.create({
+    badge: {
+        display: 'inline-flex',
+        flexShrink: 0,
+        gap: space.xs,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingInline: controls.paddingXs,
+        borderRadius: radii.sm
+    }
+});
+const sizes = stylex.create({
+    sm: {
+        height: lineHeights.caption,
+        fontSize: fontSizes.captionBase,
+        lineHeight: lineHeights.caption
+    },
+    md: {
+        height: lineHeights.bodySm,
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption
+    }
+});
+const looks = stylex.create({
+    primaryNeutral: {
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid
+    },
+    primaryBrand: {
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid
+    },
+    primaryDanger: {
+        color: colors.onDangerSolidForeground,
+        backgroundColor: colors.dangerSolid
+    },
+    tertiaryNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: colors.component
+    },
+    tertiaryBrand: {
+        color: colors.onBrandSubtleForeground,
+        backgroundColor: colors.brandSubtle
+    },
+    tertiaryDanger: {
+        color: colors.dangerText,
+        backgroundColor: colors.dangerSubtleHover
+    },
+    outlineNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.borderDefault}`
+    },
+    outlineBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.brandBorderDefault}`
+    },
+    outlineDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}`
+    },
+    transparentNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent'
+    }
+});

package/dist/components/Button.d.ts

@@ -0,0 +1,24 @@
+import type { AppPath } from '../registered.ts';
+import type { ReactNode } from 'react';
+import type { IconName } from './icons.ts';
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type ButtonProps = {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
+    tone?: 'neutral' | 'brand' | 'danger';
+    size?: Size;
+    to?: AppPath;
+    href?: string;
+    icon?: IconName;
+    trailingIcon?: IconName;
+    shortcut?: readonly string[];
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    isPending?: boolean;
+    isFullWidth?: boolean;
+    onClick?: () => void;
+    style?: Placement;
+};
+export declare function Button({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import { Link as RouterLink } from 'react-router';
+import * as stylex from '@stylexjs/stylex';
+import { colors, controls, fontWeights, motion, shadows } from "../theme/tokens.stylex.js";
+import { controlSizes, focusRing } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact, textOf } from "./interaction.js";
+import { Kbd } from "./Kbd.js";
+import { Spinner } from "./Spinner.js";
+export function Button({ children, variant = 'primary', tone = 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
+    const isDisabled = disabled || isPending;
+    const report = () => {
+        interact({ primitive: 'Button', event: 'click', label: textOf(children) });
+        onClick?.();
+    };
+    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
+    const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut), children: children }), trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
+    }
+    if (to !== undefined) {
+        return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
+    }
+    return (_jsx(BaseButton, { type: type, disabled: isDisabled, focusableWhenDisabled: true, "aria-busy": isPending || undefined, onClick: report, className: className, children: content }));
+}
+const toneKeys = {
+    neutral: 'Neutral',
+    brand: 'Brand',
+    danger: 'Danger'
+};
+const styles = stylex.create({
+    button: {
+        position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 0,
+        fontWeight: fontWeights.medium,
+        whiteSpace: 'nowrap',
+        textDecoration: 'none',
+        touchAction: 'manipulation',
+        outlineOffset: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color, transform'
+    },
+    fullWidth: {
+        justifyContent: 'flex-start',
+        width: '100%'
+    },
+    stack: {
+        display: 'grid',
+        flexGrow: 1,
+        gridTemplateColumns: 'minmax(0, 1fr)',
+        gap: 'inherit',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        overflow: 'clip'
+    },
+    content: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        gap: 'inherit',
+        alignItems: 'center',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    hidden: {
+        opacity: 0,
+        transform: 'translateY(24px)'
+    },
+    pending: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'none'
+    },
+    label: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    labelBeforeShortcut: {
+        flexGrow: 1,
+        textAlign: 'start'
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    disabledTransparent: {
+        backgroundColor: 'transparent'
+    }
+});
+const leadingIconSizes = stylex.create({
+    xs: { paddingInlineStart: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineStart: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineStart: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineStart: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineStart: `calc(${controls.paddingXl} - 4px)` }
+});
+const trailingIconSizes = stylex.create({
+    xs: { paddingInlineEnd: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineEnd: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineEnd: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineEnd: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineEnd: `calc(${controls.paddingXl} - 4px)` }
+});
+const looks = stylex.create({
+    primaryNeutral: {
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid
+    },
+    primaryBrand: {
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid
+    },
+    primaryDanger: {
+        color: colors.onDangerSolidForeground,
+        backgroundColor: colors.dangerSolid
+    },
+    secondaryNeutral: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryBrand: {
+        color: colors.brandForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    tertiaryNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: colors.component
+    },
+    tertiaryBrand: {
+        color: colors.onBrandSubtleForeground,
+        backgroundColor: colors.brandSubtle
+    },
+    tertiaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.dangerSubtle
+    },
+    transparentNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent'
+    }
+});
+const hovers = stylex.create({
+    primaryNeutral: {
+        backgroundColor: {
+            default: colors.invertedSolid,
+            ':hover': colors.invertedSolidHover,
+            ':active': colors.invertedSolidActive
+        }
+    },
+    primaryBrand: {
+        backgroundColor: {
+            default: colors.brandSolid,
+            ':hover': colors.brandSolidHover,
+            ':active': colors.brandSolidActive
+        }
+    },
+    primaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSolid,
+            ':hover': colors.dangerSolidHover,
+            ':active': colors.dangerSolidActive
+        }
+    },
+    secondaryNeutral: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryBrand: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryDanger: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    tertiaryNeutral: {
+        backgroundColor: {
+            default: colors.component,
+            ':hover': colors.componentHover,
+            ':active': colors.componentActive
+        }
+    },
+    tertiaryBrand: {
+        backgroundColor: {
+            default: colors.brandSubtle,
+            ':hover': colors.brandSubtleHover
+        }
+    },
+    tertiaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSubtle,
+            ':hover': colors.dangerSubtleHover,
+            ':active': colors.dangerSubtleActive
+        }
+    },
+    transparentNeutral: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentBrand: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentDanger: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.dangerSubtleHover
+        }
+    }
+});

package/dist/components/Card.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type CardProps = {
+    children: ReactNode;
+    surface?: 'subtle' | 'strong' | 'container';
+    padding?: CardPadding;
+    paddingBlock?: CardPadding;
+    style?: Placement;
+};
+export declare function Card({ children, surface, padding, paddingBlock, style }: CardProps): import("react").JSX.Element;
+export {};

package/dist/components/Card.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, style }) {
+    return (_jsx("div", { ...stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], style), children: children }));
+}
+const styles = stylex.create({
+    card: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        borderRadius: radii.xxl,
+        boxShadow: shadows.default
+    }
+});
+const surfaces = stylex.create({
+    subtle: {
+        backgroundColor: colors.componentOnContainerSubtle
+    },
+    strong: {
+        backgroundColor: colors.componentOnContainerStrong
+    },
+    container: {
+        backgroundColor: colors.container
+    }
+});
+const paddings = stylex.create({
+    none: { padding: 0 },
+    sm: { padding: space.sm },
+    md: { padding: space.md },
+    lg: { padding: space.lg }
+});
+const paddingBlocks = stylex.create({
+    none: { paddingBlock: 0 },
+    sm: { paddingBlock: space.sm },
+    md: { paddingBlock: space.md },
+    lg: { paddingBlock: space.lg }
+});

package/dist/components/CommandMenu.d.ts

@@ -0,0 +1,23 @@
+import type { IconName } from './icons.ts';
+export type CommandMenuItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly group: string;
+    readonly icon: IconName;
+    readonly keys: readonly string[];
+    readonly isDanger: boolean;
+};
+type CommandMenuProps = {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    query: string;
+    onQueryChange: (query: string) => void;
+    results: readonly CommandMenuItem[];
+    highlighted: string | null;
+    onHighlight: (id: string) => void;
+    onMove: (by: 1 | -1) => void;
+    onRun: (id: string) => void;
+    onSubmit: () => void;
+};
+export declare function CommandMenu({ isOpen, onOpenChange, query, onQueryChange, results, highlighted, onHighlight, onMove, onRun, onSubmit }: CommandMenuProps): import("react").JSX.Element;
+export {};