@atmos.build/ui 0.1.0

package/dist/components/combobox/compound.js

@@ -0,0 +1,151 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, } from 'react';
+import { Plus } from 'lucide-react';
+import { TerminalSpinner } from '../terminal-spinner.js';
+import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger, } from '../popover-stack.js';
+import { Kbd } from '../kbd.js';
+import { cn } from '../../lib/cn.js';
+import { CREATE_ROW, ComboboxProvider, useCombobox, } from './context.js';
+const PORTAL_MARKER = 'data-combobox-portal';
+function isInsidePickerPortal(node) {
+    let el = node instanceof Element ? node : node?.parentElement ?? null;
+    while (el) {
+        if (el.hasAttribute(PORTAL_MARKER))
+            return true;
+        el = el.parentElement;
+    }
+    return false;
+}
+export function ComboboxRoot(props) {
+    return (_jsx(ComboboxProvider, { ...props, children: _jsx(PopoverBridge, { children: props.children }) }));
+}
+function PopoverBridge({ children }) {
+    const { open, setOpen } = useCombobox();
+    return (_jsx(StackedPopover, { open: open, onOpenChange: setOpen, children: children }));
+}
+export function ComboboxTrigger({ asChild, children, className, ...rest }) {
+    const { open, mode } = useCombobox();
+    const inCreateMode = mode === 'create';
+    if (asChild) {
+        return (_jsx(StackedPopoverTrigger, { asChild: true, ...rest, children: children }));
+    }
+    return (_jsx(StackedPopoverTrigger, { asChild: true, ...rest, children: _jsx("div", { className: cn('inline-flex', className), "aria-haspopup": inCreateMode ? 'dialog' : 'listbox', "aria-expanded": open, children: children }) }));
+}
+export function ComboboxContent({ className, ...rest }) {
+    const { inputRef } = useCombobox();
+    return (_jsx(StackedPopoverContent, { className: cn('w-72 p-0 gap-0 overflow-hidden relative isolate', className), align: "start", onCloseAutoFocus: (e) => {
+            rest.onCloseAutoFocus?.(e);
+        }, onInteractOutside: (e) => {
+            if (isInsidePickerPortal(e.target)) {
+                e.preventDefault();
+                return;
+            }
+            rest.onInteractOutside?.(e);
+        }, onOpenAutoFocus: (e) => {
+            e.preventDefault();
+            inputRef.current?.focus();
+            rest.onOpenAutoFocus?.(e);
+        }, ...rest }));
+}
+export function ComboboxInput({ placeholder, triggerKey, loading, className }) {
+    const { listId, query, setQuery, activeId, inputRef, rowDomId, moveActive, selectActive, setOpen } = useCombobox();
+    const onKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            moveActive(1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            moveActive(-1);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            selectActive();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpen(false);
+        }
+    }, [moveActive, selectActive, setOpen]);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, [inputRef]);
+    return (_jsxs("div", { className: "flex items-center gap-2 px-2.5 pt-2.5 pb-1.5 border-b border-border/60", children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": true, "aria-activedescendant": activeId ? rowDomId(activeId) : undefined, value: query, placeholder: placeholder, onChange: (e) => setQuery(e.target.value), onKeyDown: onKeyDown, className: cn('flex-1 min-w-0 bg-transparent outline-none text-[13px] placeholder:text-muted-foreground/70', className) }), loading ? _jsx(TerminalSpinner, { tone: "muted", className: "shrink-0 text-[13px]" }) : null, triggerKey ? _jsx(Kbd, { className: "text-[10.5px] shrink-0", children: triggerKey }) : null] }));
+}
+export function ComboboxList({ children, className, label }) {
+    const { listId } = useCombobox();
+    return (_jsx("ul", { id: listId, role: "listbox", "aria-label": label ?? 'Search results', className: cn('max-h-[280px] overflow-y-auto py-1', className), children: children }));
+}
+export function ComboboxItem({ value, onSelect, selected = false, children, className, }) {
+    const { activeId, setActiveId, registerItem, rowDomId } = useCombobox();
+    const ref = useRef(null);
+    const active = activeId === value;
+    const onSelectRef = useRef(onSelect);
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        return registerItem({ value, element: el, onSelect: () => onSelectRef.current() });
+    }, [registerItem, value]);
+    const content = typeof children === 'function' ? children({ active, selected }) : children;
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+    _jsx("li", { ref: ref, id: rowDomId(value), role: "option", "aria-selected": selected, "data-active": active || undefined, onMouseEnter: () => setActiveId(value), onClick: () => onSelect(), className: cn('mx-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px] text-foreground flex items-center gap-2', active && 'bg-accent text-accent-foreground', className), children: content }));
+}
+export function ComboboxItemActions({ children, className }) {
+    const stop = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return (_jsx("span", { role: "button", tabIndex: -1, className: cn('ml-auto flex items-center', className), onClick: stop, onKeyDown: stop, onMouseDown: stop, onPointerDown: stop, children: children }));
+}
+export const comboboxPortalProps = { [PORTAL_MARKER]: '' };
+export function ComboboxEmpty({ children, pending, pendingText, className }) {
+    if (pending) {
+        return (_jsxs("li", { className: cn('flex items-center justify-center gap-2 px-3 py-6 text-[12px] text-muted-foreground', className), children: [_jsx(TerminalSpinner, { tone: "muted" }), pendingText] }));
+    }
+    return _jsx("li", { className: cn('px-3 py-6 text-center text-[12px] text-muted-foreground', className), children: children });
+}
+export function ComboboxCreate({ query, onCreate, label, className }) {
+    const { activeId, setActiveId, registerItem, rowDomId } = useCombobox();
+    const ref = useRef(null);
+    const active = activeId === CREATE_ROW;
+    const trimmedQuery = query.trim();
+    const onCreateRef = useRef(onCreate);
+    useEffect(() => {
+        onCreateRef.current = onCreate;
+    });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        return registerItem({ value: CREATE_ROW, element: el, onSelect: () => onCreateRef.current() });
+    }, [registerItem]);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+    _jsxs("li", { ref: ref, id: rowDomId(CREATE_ROW), role: "option", "aria-selected": active, "data-active": active || undefined, onMouseEnter: () => setActiveId(CREATE_ROW), onClick: () => onCreate(), className: cn('mx-1 mt-1 px-2 py-1.5 rounded-md cursor-pointer border-t border-border/60 pt-2 flex items-center gap-2 text-[13px]', active && 'bg-accent text-accent-foreground', className), children: [_jsx(Plus, { className: "size-3.5 text-muted-foreground", strokeWidth: 1.8, "aria-hidden": true }), _jsx("span", { className: "text-foreground", children: trimmedQuery.length > 0 ? (_jsxs(_Fragment, { children: [label, ": ", _jsxs("span", { className: "text-foreground/90", children: ["\"", query, "\""] })] })) : (label) })] }));
+}
+export function ComboboxAction({ value, onSelect, children, className, }) {
+    const { activeId, setActiveId, registerItem, rowDomId } = useCombobox();
+    const ref = useRef(null);
+    const active = activeId === value;
+    const onSelectRef = useRef(onSelect);
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        return registerItem({ value, element: el, onSelect: () => onSelectRef.current() });
+    }, [registerItem, value]);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+    _jsx("li", { ref: ref, id: rowDomId(value), role: "option", "aria-selected": active, "data-active": active || undefined, onMouseEnter: () => setActiveId(value), onClick: () => onSelect(), className: cn('mx-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px] text-foreground flex items-center gap-2', active && 'bg-accent text-accent-foreground', className), children: children }));
+}
+export function ComboboxGroup({ label, children, className }) {
+    return (_jsxs("li", { role: "presentation", className: className, children: [label ? (_jsx("div", { className: "px-3 pt-2 pb-1 text-[11px] font-medium text-muted-foreground", children: label })) : null, _jsx("ul", { role: "group", "aria-label": label, children: children })] }));
+}

package/dist/components/combobox/context.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode, type RefObject } from 'react';
+export declare const CREATE_ROW = "__create__";
+type RegisteredItem = {
+    value: string;
+    order: number;
+    onSelect: () => void;
+    element: HTMLElement;
+};
+export type ComboboxContextValue = {
+    listId: string;
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    mode: 'list' | 'create';
+    setMode: (next: 'list' | 'create') => void;
+    query: string;
+    setQuery: (next: string) => void;
+    debouncedQuery: string;
+    activeId: string | null;
+    setActiveId: (id: string | null) => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+    rowDomId: (value: string) => string;
+    registerItem: (item: Omit<RegisteredItem, 'order'>) => () => void;
+    selectActive: () => void;
+    moveActive: (delta: 1 | -1) => void;
+};
+export declare function useCombobox(): ComboboxContextValue;
+export type ComboboxProviderProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    resetOnClose?: boolean;
+    children: ReactNode;
+};
+export declare function ComboboxProvider({ open: openProp, onOpenChange, resetOnClose, children, }: ComboboxProviderProps): import("react").JSX.Element;
+export {};

package/dist/components/combobox/context.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+export const CREATE_ROW = '__create__';
+const ComboboxContext = createContext(null);
+export function useCombobox() {
+    const ctx = useContext(ComboboxContext);
+    if (!ctx) {
+        throw new Error('Combobox compound components must be used within <Combobox>');
+    }
+    return ctx;
+}
+export function ComboboxProvider({ open: openProp, onOpenChange, resetOnClose = true, children, }) {
+    const listId = useId();
+    const isControlled = openProp !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const [mode, setMode] = useState('list');
+    const [query, setQueryState] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+    const [activeOverride, setActiveOverride] = useState(null);
+    const inputRef = useRef(null);
+    const itemsRef = useRef(new Map());
+    const orderCounter = useRef(0);
+    const [orderedValues, setOrderedValues] = useState([]);
+    const syncOrder = useCallback(() => {
+        setOrderedValues(Array.from(itemsRef.current.values())
+            .sort((a, b) => a.order - b.order)
+            .map((i) => i.value));
+    }, []);
+    useEffect(() => {
+        const handle = setTimeout(() => setDebouncedQuery(query), 100);
+        return () => clearTimeout(handle);
+    }, [query]);
+    const reset = useCallback(() => {
+        setQueryState('');
+        setDebouncedQuery('');
+        setMode('list');
+        setActiveOverride(null);
+    }, []);
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (!next && resetOnClose)
+            reset();
+    }, [isControlled, onOpenChange, resetOnClose, reset]);
+    const setQuery = useCallback((next) => {
+        setQueryState(next);
+        setActiveOverride(null);
+    }, []);
+    const rowDomId = useCallback((value) => (value === CREATE_ROW ? `${listId}-create` : `${listId}-row-${value}`), [listId]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current.set(item.value, { ...item, order: orderCounter.current++ });
+        syncOrder();
+        return () => {
+            itemsRef.current.delete(item.value);
+            syncOrder();
+        };
+    }, [syncOrder]);
+    const activeId = activeOverride && orderedValues.includes(activeOverride)
+        ? activeOverride
+        : (orderedValues[0] ?? null);
+    const scrollActiveIntoView = useCallback((id) => {
+        if (!id)
+            return;
+        itemsRef.current.get(id)?.element.scrollIntoView({ block: 'nearest' });
+    }, []);
+    useEffect(() => {
+        scrollActiveIntoView(activeId);
+    }, [activeId, scrollActiveIntoView]);
+    const setActiveId = useCallback((id) => setActiveOverride(id), []);
+    const moveActive = useCallback((delta) => {
+        const values = Array.from(itemsRef.current.values())
+            .sort((a, b) => a.order - b.order)
+            .map((i) => i.value);
+        if (values.length === 0)
+            return;
+        setActiveOverride((prev) => {
+            const current = prev && values.includes(prev) ? prev : (values[0] ?? null);
+            const idx = current ? values.indexOf(current) : -1;
+            const next = (idx + delta + values.length) % values.length;
+            return values[next] ?? null;
+        });
+    }, []);
+    const selectActive = useCallback(() => {
+        if (!activeId)
+            return;
+        itemsRef.current.get(activeId)?.onSelect();
+    }, [activeId]);
+    const value = useMemo(() => ({
+        listId,
+        open,
+        setOpen,
+        mode,
+        setMode,
+        query,
+        setQuery,
+        debouncedQuery,
+        activeId,
+        setActiveId,
+        inputRef,
+        rowDomId,
+        registerItem,
+        selectActive,
+        moveActive,
+    }), [
+        listId,
+        open,
+        setOpen,
+        mode,
+        query,
+        setQuery,
+        debouncedQuery,
+        activeId,
+        setActiveId,
+        rowDomId,
+        registerItem,
+        selectActive,
+        moveActive,
+    ]);
+    return (_jsx(ComboboxContext.Provider, { value: value, children: children }));
+}

package/dist/components/combobox/create-step.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { type ComboboxLabels } from './types.js';
+export interface ComboboxCreateStepContext<TItem> {
+    query: string;
+    onCreated: (item: TItem) => void;
+    onCancel: () => void;
+}
+export declare function ComboboxCreateStep({ label, children, labels: labelsProp, }: {
+    label: string;
+    children: ReactNode;
+    labels?: Partial<ComboboxLabels>;
+}): import("react").JSX.Element;

package/dist/components/combobox/create-step.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_COMBOBOX_LABELS } from './types.js';
+export function ComboboxCreateStep({ label, children, labels: labelsProp, }) {
+    const labels = { ...DEFAULT_COMBOBOX_LABELS, ...labelsProp };
+    const noun = label.replace(/^create\s+/i, '');
+    return (_jsxs("div", { role: "form", "aria-label": labels.createForm(noun), children: [_jsx("div", { className: "px-3 pt-3 pb-1.5 text-[12px] font-medium text-muted-foreground", children: labels.creatingHeader(noun.toLowerCase()) }), _jsx("div", { className: "px-3 pb-3", children: children })] }));
+}

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,10 @@
+export { Combobox } from './combobox.js';
+export type { ComboboxProps, UseItemsResult } from './combobox.js';
+export { InlineCreateForm } from './inline-create-form.js';
+export type { InlineCreateFormProps } from './inline-create-form.js';
+export { ComboboxCreateStep } from './create-step.js';
+export type { ComboboxCreateStepContext } from './create-step.js';
+export { ComboboxRoot, ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxItem, ComboboxItemActions, ComboboxEmpty, ComboboxCreate, ComboboxAction, ComboboxGroup, comboboxPortalProps, } from './compound.js';
+export type { ComboboxRootProps, ComboboxTriggerProps, ComboboxContentProps, ComboboxInputProps, ComboboxListProps, ComboboxItemProps, ComboboxItemActionsProps, ComboboxEmptyProps, ComboboxCreateProps, ComboboxActionProps, ComboboxGroupProps, } from './compound.js';
+export { useCombobox, CREATE_ROW } from './context.js';
+export type { ComboboxContextValue } from './context.js';

package/dist/components/combobox/index.js

@@ -0,0 +1,5 @@
+export { Combobox } from './combobox.js';
+export { InlineCreateForm } from './inline-create-form.js';
+export { ComboboxCreateStep } from './create-step.js';
+export { ComboboxRoot, ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxItem, ComboboxItemActions, ComboboxEmpty, ComboboxCreate, ComboboxAction, ComboboxGroup, comboboxPortalProps, } from './compound.js';
+export { useCombobox, CREATE_ROW } from './context.js';

package/dist/components/combobox/inline-create-form.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export type InlineCreateFormProps<TValues, TItem> = {
+    initialValues: TValues;
+    submit: (values: TValues) => Promise<TItem>;
+    onCreated: (item: TItem) => void;
+    onCancel: () => void;
+    children: (api: {
+        values: TValues;
+        setValues: (next: TValues | ((prev: TValues) => TValues)) => void;
+        submitting: boolean;
+        error: string | null;
+    }) => ReactNode;
+    submitLabel?: string;
+    cancelLabel?: string;
+    canSubmit?: (values: TValues) => boolean;
+    className?: string;
+    labels?: {
+        create: string;
+        cancel: string;
+        createFailed: string;
+        saving: string;
+    };
+};
+export declare function InlineCreateForm<TValues, TItem>(props: InlineCreateFormProps<TValues, TItem>): ReactNode;

package/dist/components/combobox/inline-create-form.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, } from 'react';
+import { Button } from '../button.js';
+import { cn } from '../../lib/cn.js';
+export function InlineCreateForm(props) {
+    const labels = props.labels ?? { create: 'Create', cancel: 'Cancel', createFailed: 'Could not create item', saving: 'Saving…' };
+    const { initialValues, submit, onCreated, onCancel, children, submitLabel = labels.create, cancelLabel = labels.cancel, canSubmit, className, } = props;
+    const [values, setValues] = useState(initialValues);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const allowSubmit = !submitting && (canSubmit ? canSubmit(values) : true);
+    const doSubmit = useCallback(async () => {
+        if (!allowSubmit)
+            return;
+        setSubmitting(true);
+        setError(null);
+        try {
+            const item = await submit(values);
+            onCreated(item);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : labels.createFailed);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [allowSubmit, submit, values, onCreated, labels.createFailed]);
+    const onFormSubmit = (e) => {
+        e.preventDefault();
+        void doSubmit();
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            onCancel();
+        }
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Esc cancel is a usability affordance for the popover host
+    _jsxs("form", { onSubmit: onFormSubmit, onKeyDown: onKeyDown, className: cn('flex flex-col gap-2.5', className), noValidate: true, children: [children({ values, setValues, submitting, error }), error && (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1 text-[11.5px] text-destructive", children: error })), _jsxs("div", { className: "flex items-center justify-end gap-1.5 pt-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "xs", onClick: onCancel, disabled: submitting, children: cancelLabel }), _jsx(Button, { type: "submit", size: "xs", disabled: !allowSubmit, children: submitting ? labels.saving : submitLabel })] })] }));
+}

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import type { ComboboxCreateStepContext } from './create-step.js';
+export type UseItemsResult<TItem> = {
+    data: TItem[] | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    refetch?: () => void;
+};
+export interface ComboboxLabels {
+    searchPlaceholder: string;
+    typeToSearch: string;
+    noMatches: string;
+    loadFailed: string;
+    retry: string;
+    searchResults: string;
+    createForm: (label: string) => string;
+    creatingHeader: (label: string) => string;
+}
+export declare const DEFAULT_COMBOBOX_LABELS: ComboboxLabels;
+export type ComboboxProps<TItem> = {
+    value: string | null;
+    onSelect: (item: TItem) => void;
+    useItems: (query: string) => UseItemsResult<TItem>;
+    getId: (item: TItem) => string;
+    getLabel?: (item: TItem) => string;
+    renderItem: (item: TItem, opts: {
+        active: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    /**
+     * Optional section heading per item. When consecutive items resolve to
+     * different sections, a divider plus the new section's heading is rendered
+     * before the item; `undefined` items form the headingless leading section.
+     */
+    getSection?: (item: TItem) => string | undefined;
+    createLabel: string;
+    renderCreateStep?: (ctx: ComboboxCreateStepContext<TItem>) => ReactNode;
+    CreateForm?: (props: {
+        initialValue: string;
+        onCreated: (item: TItem) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+    onQuickCreate?: (query: string) => void;
+    children: ReactNode;
+    emptyText?: string;
+    loadingText?: string;
+    placeholder?: string;
+    triggerKey?: string;
+    allowCreate?: boolean;
+    showCreateWhenEmpty?: boolean;
+    createLabelWhenEmpty?: string;
+    contentClassName?: string;
+    triggerClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<ComboboxLabels>;
+};

package/dist/components/combobox/types.js

@@ -0,0 +1,10 @@
+export const DEFAULT_COMBOBOX_LABELS = {
+    searchPlaceholder: 'Search…',
+    typeToSearch: 'Type to search',
+    noMatches: 'No matches',
+    loadFailed: 'Could not load results',
+    retry: 'Retry',
+    searchResults: 'Search results',
+    createForm: (label) => `Create ${label}`,
+    creatingHeader: (label) => `Creating ${label}`,
+};

package/dist/components/command.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog, DialogContent } from './dialog.js';
+export type CommandDialogLayout = 'standard' | 'browser' | 'wide-preview';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, contentProps, layout, ...props }: React.ComponentProps<typeof Dialog> & {
+    title: string;
+    description: string;
+    className?: string;
+    showCloseButton?: boolean;
+    contentProps?: React.ComponentProps<typeof DialogContent>;
+    layout?: CommandDialogLayout;
+}): React.JSX.Element;
+declare function CommandInput({ className, variant, loading, leading, trailing, ...props }: React.ComponentProps<typeof CommandPrimitive.Input> & {
+    variant?: 'boxed' | 'inline' | 'footer';
+    loading?: boolean;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+}): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, children, showCheck, ...props }: React.ComponentProps<typeof CommandPrimitive.Item> & {
+    showCheck?: boolean;
+}): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export interface CommandHint {
+    keys: string[];
+    label: string;
+}
+declare function CommandHints({ hints, className, children, ...props }: React.ComponentProps<'div'> & {
+    hints: readonly CommandHint[];
+}): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandHints, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/command.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/cn.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.js';
+import { SearchIcon, CheckIcon } from 'lucide-react';
+import { Kbd, KbdGroup } from './kbd.js';
+import { TerminalSpinner } from './terminal-spinner.js';
+const commandDialogLayoutClassName = {
+    standard: 'sm:max-w-[40rem]',
+    browser: 'sm:max-w-[35rem]',
+    'wide-preview': 'sm:max-w-[55rem]',
+};
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
+            'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
+            'block-start': 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+            'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+        },
+    },
+    defaultVariants: { align: 'inline-start' },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "button", tabIndex: 0, "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (event) => {
+            if (event.target.closest('button'))
+                return;
+            event.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, onKeyDown: (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            event.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1', className), ...props }));
+}
+function CommandDialog({ title, description, children, className, showCloseButton = false, contentProps, layout = 'standard', ...props }) {
+    const { className: contentClassName, ...resolvedContentProps } = contentProps ?? {};
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { ...resolvedContentProps, "data-layout": layout, className: cn('atmos-blur-surface border-border/70 gap-0 overflow-hidden rounded-xl! border p-0 shadow-2xl', commandDialogLayoutClassName[layout], contentClassName, className), showCloseButton: showCloseButton, children: children })] }));
+}
+function CommandInput({ className, variant = 'boxed', loading = false, leading, trailing, ...props }) {
+    if (variant === 'inline' || variant === 'footer') {
+        return (_jsxs("div", { "data-slot": "command-input-wrapper", className: cn('border-border/60 flex min-h-11 items-center gap-2 px-3 py-2.5', variant === 'footer' ? 'border-t' : 'border-b'), children: [leading ? _jsx("div", { className: "flex shrink-0 items-center", children: leading }) : null, _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground/70 min-w-0 flex-1 bg-transparent text-sm leading-none outline-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), trailing ? _jsx("div", { className: "flex shrink-0 items-center", children: trailing }) : null, loading ? _jsx(TerminalSpinner, { tone: "muted", className: "shrink-0 text-[14px]" }) : null] }));
+    }
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "px-2 pt-1 pb-1", children: _jsxs(InputGroup, { className: "border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(InputGroupAddon, { children: leading ?? _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('min-w-0 flex-1 bg-transparent px-1.5 text-[13px] outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), loading ? (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(TerminalSpinner, { tone: "muted", className: "text-[14px]" }) })) : null, trailing ? _jsx(InputGroupAddon, { align: "inline-end", children: trailing }) : null] }) }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", onWheel: (event) => event.stopPropagation(), onTouchMove: (event) => event.stopPropagation(), className: cn('no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain outline-none', className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn('py-6 text-center text-sm', className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('bg-border -mx-1 h-px', className), ...props }));
+}
+function CommandItem({ className, children, showCheck = true, ...props }) {
+    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:*:[svg]:text-foreground relative flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, showCheck ? (_jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })) : null] }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground group-data-[selected=true]/command-item:text-foreground ml-auto text-xs tracking-widest', className), ...props }));
+}
+function CommandHints({ hints, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-hints", className: cn('border-border/60 flex items-center justify-between border-t px-3 py-2', className), ...props, children: [_jsx("div", { className: "text-muted-foreground/85 flex items-center gap-3 font-mono text-[10.5px]", children: hints.map((hint) => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(KbdGroup, { children: hint.keys.map((key) => (_jsx(Kbd, { className: "h-4 min-w-4 px-1 font-mono text-[9px]", children: key }, key))) }), _jsx("span", { children: hint.label })] }, hint.label))) }), children] }));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandHints, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/comment-pin.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const commentPinVariants: (props?: ({
+    tone?: "open" | "resolved" | null | undefined;
+    active?: boolean | null | undefined;
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CommentPinProps extends Omit<React.ComponentProps<'button'>, 'children'>, VariantProps<typeof commentPinVariants> {
+    count?: number;
+    resolved?: boolean;
+}
+export declare function CommentPin({ className, count, resolved, active, size, tone, ...props }: CommentPinProps): React.JSX.Element;
+export { commentPinVariants };