@atmos.build/ui 0.1.0

package/dist/components/side-panel.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentType, type ComponentPropsWithoutRef, type ElementRef, type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from 'react';
+import { Button } from './button.js';
+import { Separator } from './separator.js';
+import { CollapsibleSectionHeader } from './collapsible-section-header.js';
+import { type IconButtonProps } from './icon-button.js';
+import { type PanelHeaderProps } from './panel-header.js';
+interface SidePanelScrollPort {
+    element: HTMLElement | null;
+}
+export type SidePanelScrollProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * The single scroll port for a side panel. Wrapping a panel in one moves its whole contents —
+ * actions, section labels and rows alike — past whatever the shell pins above it, instead of
+ * leaving each list to scroll inside its own well below fixed chrome.
+ */
+export declare function SidePanelScroll({ className, ...props }: SidePanelScrollProps): import("react").JSX.Element;
+/** The element a panel actually scrolls in, for readers that must measure or listen to it. */
+export declare function useSidePanelScrollPort(): SidePanelScrollPort | null;
+export type SidePanelProps = ComponentPropsWithoutRef<'div'>;
+export declare const SidePanel: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+export type SidePanelHeaderProps = PanelHeaderProps;
+export declare function SidePanelHeader({ className, ...props }: SidePanelHeaderProps): import("react").JSX.Element;
+export interface SidePanelSectionLabelProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    label: ReactNode;
+    actions?: ReactNode;
+    labelClassName?: string;
+}
+export declare function SidePanelSectionLabel({ label, actions, labelClassName, className, ...props }: SidePanelSectionLabelProps): import("react").JSX.Element;
+export type SidePanelActionBarProps = ComponentPropsWithoutRef<'div'>;
+export declare const SidePanelActionBar: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+export interface SidePanelBodyProps extends ComponentPropsWithoutRef<'div'> {
+    scroll?: boolean;
+}
+export declare const SidePanelBody: ForwardRefExoticComponent<SidePanelBodyProps & RefAttributes<HTMLDivElement>>;
+export interface SidePanelFooterProps extends ComponentPropsWithoutRef<'div'> {
+    chromeFont?: string;
+}
+export declare const SidePanelFooter: ForwardRefExoticComponent<SidePanelFooterProps & RefAttributes<HTMLDivElement>>;
+export interface SidePanelSectionProps extends ComponentPropsWithoutRef<'section'> {
+    spacing?: 'none' | 'compact' | 'default';
+    /** Names the section so this browser reopens it the way its reader left it. */
+    sectionId?: string;
+    defaultOpen?: boolean;
+}
+export declare const SidePanelSection: ForwardRefExoticComponent<SidePanelSectionProps & RefAttributes<HTMLElement>>;
+type OmitEach<Member, Keys extends PropertyKey> = Member extends unknown ? Omit<Member, Keys> : never;
+export type SidePanelSectionHeaderProps = OmitEach<ComponentPropsWithoutRef<typeof CollapsibleSectionHeader>, 'open' | 'onToggle'> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare function SidePanelSectionHeader({ open, onOpenChange, labelClassName, className, ...props }: SidePanelSectionHeaderProps): import("react").JSX.Element;
+export interface SidePanelSectionPlaceholderProps extends ComponentPropsWithoutRef<'div'> {
+    chromeFont?: string;
+}
+export declare const SidePanelSectionPlaceholder: ForwardRefExoticComponent<SidePanelSectionPlaceholderProps & RefAttributes<HTMLDivElement>>;
+export interface SidePanelSectionBodyProps extends Omit<ComponentPropsWithoutRef<'div'>, 'placeholder'> {
+    open?: boolean;
+    isEmpty?: boolean;
+    placeholder?: ReactNode;
+    placeholderClassName?: string;
+    contentClassName?: string;
+    chromeFont?: string;
+}
+export declare const SidePanelSectionBody: ForwardRefExoticComponent<SidePanelSectionBodyProps & RefAttributes<HTMLDivElement>>;
+export interface SidePanelItemClassOptions {
+    active?: boolean;
+    className?: string;
+}
+export declare function sidePanelItemClassName({ active, className, }?: SidePanelItemClassOptions): string;
+export interface SidePanelItemProps extends ComponentPropsWithoutRef<'button'> {
+    active?: boolean;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare const SidePanelItem: ForwardRefExoticComponent<SidePanelItemProps & RefAttributes<HTMLButtonElement>>;
+export type SidePanelActionListProps = ComponentPropsWithoutRef<'div'>;
+export declare const SidePanelActionList: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+export type SidePanelSeparatorProps = ComponentPropsWithoutRef<typeof Separator>;
+export declare const SidePanelSeparator: ForwardRefExoticComponent<SidePanelSeparatorProps & RefAttributes<ElementRef<typeof Separator>>>;
+type SidePanelActionIcon = ComponentType<{
+    className?: string;
+    strokeWidth?: number;
+    'aria-hidden'?: boolean;
+}>;
+export interface SidePanelActionButtonProps extends Omit<ComponentPropsWithoutRef<typeof Button>, 'children'> {
+    icon: SidePanelActionIcon;
+    /** Set on an action that names a destination the panel is currently showing. */
+    active?: boolean;
+    children: ReactNode;
+}
+export declare const SidePanelActionButton: ForwardRefExoticComponent<SidePanelActionButtonProps & RefAttributes<HTMLButtonElement>>;
+export type SidePanelIconButtonProps = IconButtonProps;
+export declare function SidePanelIconButton({ tooltip, title, 'aria-label': ariaLabel, ...props }: SidePanelIconButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/side-panel.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, forwardRef, useContext, useMemo, useState, } from 'react';
+import { Button } from './button.js';
+import { Separator } from './separator.js';
+import { cn } from '../lib/cn.js';
+import { CollapsibleSectionContent, CollapsibleSectionHeader } from './collapsible-section-header.js';
+import { useDisclosureState } from '../lib/disclosure-state.js';
+import { IconButton } from './icon-button.js';
+import { PanelHeader } from './panel-header.js';
+import { sidePanelRowClassName } from './side-panel-tokens.js';
+import { NavigableList, NavigableListItem } from './navigable-list.js';
+const SidePanelScrollContext = createContext(null);
+/**
+ * The single scroll port for a side panel. Wrapping a panel in one moves its whole contents —
+ * actions, section labels and rows alike — past whatever the shell pins above it, instead of
+ * leaving each list to scroll inside its own well below fixed chrome.
+ */
+export function SidePanelScroll({ className, ...props }) {
+    const [element, setElement] = useState(null);
+    const port = useMemo(() => ({ element }), [element]);
+    return (_jsx(SidePanelScrollContext.Provider, { value: port, children: _jsx("div", { ref: setElement, "data-slot": "side-panel-scroll", className: cn('relative min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain', className), ...props }) }));
+}
+/** The element a panel actually scrolls in, for readers that must measure or listen to it. */
+export function useSidePanelScrollPort() {
+    return useContext(SidePanelScrollContext);
+}
+export const SidePanel = forwardRef(function SidePanel({ className, ...props }, ref) {
+    const scrolledByShell = useContext(SidePanelScrollContext) !== null;
+    return (_jsx("div", { ref: ref, "data-slot": "side-panel", className: cn(scrolledByShell ? 'block' : 'flex h-full min-h-0 flex-col overflow-hidden', className), ...props }));
+});
+export function SidePanelHeader({ className, ...props }) {
+    return _jsx(PanelHeader, { "data-slot": "side-panel-header", className: className, ...props });
+}
+export function SidePanelSectionLabel({ label, actions, labelClassName, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "side-panel-section-label", className: cn('text-muted-foreground/75 flex h-7 shrink-0 items-center px-3 text-[11px] font-medium', className), ...props, children: [_jsx("span", { className: cn('min-w-0 flex-1 truncate', labelClassName), children: label }), actions ? _jsx("div", { className: "-mr-1 ml-auto flex items-center gap-0.5", children: actions }) : null] }));
+}
+export const SidePanelActionBar = forwardRef(function SidePanelActionBar({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "side-panel-action-bar", className: cn('flex items-center gap-0.5', className), ...props }));
+});
+export const SidePanelBody = forwardRef(function SidePanelBody({ className, scroll = true, ...props }, ref) {
+    const scrolledByShell = useContext(SidePanelScrollContext) !== null;
+    return (_jsx(NavigableList, { asChild: true, children: _jsx("div", { ref: ref, "data-slot": "side-panel-body", "data-navigable-list": true, className: cn('min-h-0 min-w-0 flex-1 px-1 pb-2', scroll && !scrolledByShell && 'overflow-y-auto overscroll-contain', className), ...props }) }));
+});
+export const SidePanelFooter = forwardRef(function SidePanelFooter({ className, chromeFont, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "side-panel-footer", className: cn('border-border/40 text-muted-foreground/80 flex h-7 shrink-0 items-center border-t px-3 font-mono text-[10.5px] tabular-nums', chromeFont, className), ...props }));
+});
+const SidePanelSectionContext = createContext(null);
+/**
+ * A header or body reads the state its enclosing section keeps, unless the call site drives
+ * the section itself and passes `open` in.
+ */
+function useSidePanelSectionDisclosure({ open, onOpenChange, }) {
+    const section = useContext(SidePanelSectionContext);
+    return {
+        open: open ?? section?.open ?? true,
+        setOpen: onOpenChange ?? section?.setOpen ?? (() => { }),
+    };
+}
+export const SidePanelSection = forwardRef(function SidePanelSection({ className, spacing = 'default', sectionId, defaultOpen = true, children, ...props }, ref) {
+    const { open, setOpen } = useDisclosureState(sectionId, defaultOpen);
+    const disclosure = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+    return (_jsx(SidePanelSectionContext.Provider, { value: disclosure, children: _jsx("section", { ref: ref, "data-slot": "side-panel-section", "data-section-id": sectionId, className: cn(spacing === 'compact' && 'mt-3', spacing === 'default' && 'mt-4', className), ...props, children: children }) }));
+});
+/**
+ * A section's own inset matches the one SidePanelSectionBody puts around its rows, so a
+ * header and the rows it heads share a left edge instead of stepping by a hair.
+ */
+const sectionHeaderInsetClassName = 'mx-0.5 w-[calc(100%-0.25rem)]';
+export function SidePanelSectionHeader({ open, onOpenChange, labelClassName, className, ...props }) {
+    const section = useSidePanelSectionDisclosure({ open, onOpenChange });
+    return (_jsx(CollapsibleSectionHeader, { open: section.open, onToggle: () => section.setOpen(!section.open), labelClassName: labelClassName, className: cn(sectionHeaderInsetClassName, className), ...props }));
+}
+export const SidePanelSectionPlaceholder = forwardRef(function SidePanelSectionPlaceholder({ className, chromeFont, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "side-panel-section-placeholder", className: cn('text-muted-foreground/60 px-4 py-1 text-[11px]', chromeFont, className), ...props }));
+});
+export const SidePanelSectionBody = forwardRef(function SidePanelSectionBody({ className, open, children, isEmpty, placeholder, placeholderClassName, contentClassName, chromeFont, ...props }, ref) {
+    const showPlaceholder = placeholder !== undefined && (isEmpty ?? Children.toArray(children).length === 0);
+    const section = useSidePanelSectionDisclosure({ open });
+    return (_jsx(CollapsibleSectionContent, { ref: ref, "data-slot": "side-panel-section-body", open: section.open, className: contentClassName, innerClassName: cn('space-y-0.5 p-0.5', className), ...props, children: showPlaceholder ? (_jsx(SidePanelSectionPlaceholder, { className: placeholderClassName, chromeFont: chromeFont, children: placeholder })) : (children) }));
+});
+export function sidePanelItemClassName({ active, className, } = {}) {
+    return sidePanelRowClassName({
+        selected: active,
+        className: cn('group/side-panel-item pr-2 pl-0', className),
+    });
+}
+export const SidePanelItem = forwardRef(function SidePanelItem({ active, leading, trailing, children, className, onContextMenu, ...props }, ref) {
+    return (_jsx(NavigableListItem, { active: active, children: _jsxs("button", { ref: ref, type: "button", "aria-current": active ? 'page' : undefined, onContextMenu: (event) => {
+                event.currentTarget.focus({ preventScroll: true });
+                onContextMenu?.(event);
+            }, className: sidePanelItemClassName({ active, className: cn('px-2', className) }), ...props, children: [leading ? (_jsx("span", { "data-slot": "side-panel-item-leading", className: "inline-flex size-4 shrink-0 items-center justify-center", children: leading })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: children }), trailing ? (_jsx("span", { "data-slot": "side-panel-item-trailing", className: "ml-auto shrink-0", children: trailing })) : null] }) }));
+});
+export const SidePanelActionList = forwardRef(function SidePanelActionList({ className, ...props }, ref) {
+    return (_jsx(NavigableList, { asChild: true, children: _jsx("div", { ref: ref, "data-slot": "side-panel-action-list", "data-navigable-list": true, className: cn('space-y-0.5', className), ...props }) }));
+});
+export const SidePanelSeparator = forwardRef(function SidePanelSeparator({ className, ...props }, ref) {
+    return (_jsx(Separator, { ref: ref, "data-slot": "side-panel-separator", className: cn('bg-border/50 my-1.5 w-full shrink-0', className), ...props }));
+});
+export const SidePanelActionButton = forwardRef(function SidePanelActionButton({ icon: Icon, active, children, className, variant = 'ghost', ...props }, ref) {
+    return (_jsx(NavigableListItem, { active: active, children: _jsxs(Button, { ref: ref, type: "button", variant: variant, "aria-current": active ? 'page' : undefined, className: cn(sidePanelRowClassName({ selected: active }), 'justify-start font-normal [&_svg]:size-3.5', className), ...props, children: [_jsx(Icon, { className: "size-3.5 shrink-0", strokeWidth: 1.7, "aria-hidden": true }), _jsx("span", { className: "truncate", children: children })] }) }));
+});
+export function SidePanelIconButton({ tooltip, title, 'aria-label': ariaLabel, ...props }) {
+    const fallbackLabel = typeof title === 'string' ? title : undefined;
+    return (_jsx(IconButton, { size: "sm", tooltip: tooltip ?? fallbackLabel, "aria-label": ariaLabel ?? fallbackLabel, ...props }));
+}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
+}
+export { Skeleton };

package/dist/components/sortable.d.ts

@@ -0,0 +1,65 @@
+import '../lib/react-19-jsx.js';
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useDraggable, useDroppable, useSensor, useSensors, type DragEndEvent, type DragOverEvent, type DragStartEvent } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+export type DragHandleProps = Record<string, unknown>;
+/**
+ * The drag preview positions itself against the viewport, so any ancestor that establishes a
+ * containing block — a transform, a filter, `backdrop-blur`, a centered Radix dialog — drags it
+ * off toward that ancestor's corner instead of keeping it under the pointer. Rendering it into
+ * the body is what keeps the preview honest, so every sortable surface goes through here.
+ */
+export declare function DragPreview({ dropAnimation, className, children, }: {
+    dropAnimation?: React.ComponentProps<typeof DragOverlay>['dropAnimation'];
+    className?: string;
+    children: ReactNode;
+}): React.JSX.Element;
+export interface ReorderDetail {
+    beforeId: string | null;
+    afterId: string | null;
+    fromIndex: number;
+    toIndex: number;
+    nextIds: string[];
+}
+interface SortableRenderArgs {
+    dragHandleProps: DragHandleProps;
+    isDragging: boolean;
+    overlay: boolean;
+}
+export interface SortableListProps<T> {
+    items: T[];
+    keyOf: (item: T) => string;
+    onReorder: (movedId: string, detail: ReorderDetail) => void;
+    renderItem: (item: T, args: SortableRenderArgs) => ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    handle?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function SortableList<T>({ items, keyOf, onReorder, renderItem, orientation, handle, disabled, className, }: SortableListProps<T>): React.JSX.Element;
+export declare function useSortableHandle(id: string, options?: {
+    disabled?: boolean;
+}): {
+    setNodeRef: (node: HTMLElement | null) => void;
+    attributes: import("@dnd-kit/core").DraggableAttributes;
+    listeners: import("@dnd-kit/core/dist/hooks/utilities").SyntheticListenerMap | undefined;
+    style: React.CSSProperties;
+    isDragging: boolean;
+};
+export declare const useSortableRow: typeof useSortableHandle;
+export declare function SortableItem({ id, disabled, className, children, }: {
+    id: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}): React.JSX.Element;
+export declare const SortableRow: typeof SortableItem;
+export declare const DragHandle: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    dragHandleProps?: DragHandleProps;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { DndContext, KeyboardSensor, PointerSensor, SortableContext, arrayMove, closestCenter, sortableKeyboardCoordinates, useDraggable, useDroppable, useSensor, useSensors, verticalListSortingStrategy, };
+export type { DragEndEvent, DragOverEvent, DragStartEvent };
+export declare function reorderById<T extends {
+    id: string;
+}>(items: T[], movedId: string, beforeId: string | null): T[];

package/dist/components/sortable.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../lib/react-19-jsx.js';
+import * as React from 'react';
+import {} from 'react';
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useDraggable, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
+import { GripVertical } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+/**
+ * The drag preview positions itself against the viewport, so any ancestor that establishes a
+ * containing block — a transform, a filter, `backdrop-blur`, a centered Radix dialog — drags it
+ * off toward that ancestor's corner instead of keeping it under the pointer. Rendering it into
+ * the body is what keeps the preview honest, so every sortable surface goes through here.
+ */
+export function DragPreview({ dropAnimation = null, className, children, }) {
+    const overlay = (_jsx(DragOverlay, { dropAnimation: dropAnimation, className: cn('cursor-grabbing', className), children: children }));
+    return typeof document === 'undefined' ? overlay : createPortal(overlay, document.body);
+}
+export function SortableList({ items, keyOf, onReorder, renderItem, orientation = 'vertical', handle = false, disabled = false, className, }) {
+    const ids = React.useMemo(() => items.map(keyOf), [items, keyOf]);
+    const [activeId, setActiveId] = React.useState(null);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const strategy = orientation === 'horizontal' ? horizontalListSortingStrategy : verticalListSortingStrategy;
+    function handleStart(event) {
+        setActiveId(String(event.active.id));
+    }
+    function handleEnd(event) {
+        setActiveId(null);
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const from = ids.indexOf(String(active.id));
+        const to = ids.indexOf(String(over.id));
+        if (from < 0 || to < 0)
+            return;
+        const nextIds = arrayMove(ids, from, to);
+        const pos = nextIds.indexOf(String(active.id));
+        onReorder(String(active.id), {
+            beforeId: pos > 0 ? (nextIds[pos - 1] ?? null) : null,
+            afterId: pos < nextIds.length - 1 ? (nextIds[pos + 1] ?? null) : null,
+            fromIndex: from,
+            toIndex: to,
+            nextIds,
+        });
+    }
+    const activeItem = activeId == null ? null : (items.find((item) => keyOf(item) === activeId) ?? null);
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleStart, onDragEnd: handleEnd, onDragCancel: () => setActiveId(null), children: [_jsx(SortableContext, { items: ids, strategy: strategy, disabled: disabled, children: _jsx("div", { className: className, "data-slot": "sortable-list", "data-orientation": orientation, children: items.map((item) => (_jsx(SortableListItem, { id: keyOf(item), item: item, renderItem: renderItem, handle: handle, disabled: disabled }, keyOf(item)))) }) }), _jsx(DragPreview, { children: activeItem
+                    ? renderItem(activeItem, { dragHandleProps: {}, isDragging: true, overlay: true })
+                    : null })] }));
+}
+function SortableListItem({ id, item, renderItem, handle, disabled, }) {
+    const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+        id,
+        disabled,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : undefined,
+        zIndex: isDragging ? 10 : undefined,
+        outline: isDragging ? 'none' : undefined,
+        position: 'relative',
+    };
+    const dragHandleProps = { ...attributes, ...listeners };
+    return (_jsx("div", { ref: setNodeRef, style: style, "data-slot": "sortable-item", ...(handle ? {} : dragHandleProps), children: renderItem(item, {
+            dragHandleProps: handle ? dragHandleProps : {},
+            isDragging,
+            overlay: false,
+        }) }));
+}
+export function useSortableHandle(id, options) {
+    const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+        id,
+        disabled: options?.disabled,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : undefined,
+        zIndex: isDragging ? 10 : undefined,
+        outline: isDragging ? 'none' : undefined,
+        position: 'relative',
+    };
+    return { setNodeRef, attributes, listeners, style, isDragging };
+}
+export const useSortableRow = useSortableHandle;
+export function SortableItem({ id, disabled, className, children, }) {
+    const { setNodeRef, attributes, listeners, style } = useSortableHandle(id, { disabled });
+    return (_jsx("div", { ref: setNodeRef, style: style, "data-slot": "sortable-item", className: className, ...attributes, ...listeners, children: children }));
+}
+export const SortableRow = SortableItem;
+export const DragHandle = React.forwardRef(function DragHandle({ className, dragHandleProps, 'aria-label': ariaLabel = 'Drag to reorder', ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", "data-slot": "drag-handle", "aria-label": ariaLabel, className: cn('inline-flex items-center justify-center rounded-md outline-none', 'text-muted-foreground/60 size-4 cursor-grab opacity-0', 'transition-opacity group-hover:opacity-100 focus-visible:opacity-100', 'focus-visible:ring-ring/50 focus-visible:ring-2 active:cursor-grabbing', className), ...dragHandleProps, ...props, children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }));
+});
+export { DndContext, KeyboardSensor, PointerSensor, SortableContext, arrayMove, closestCenter, sortableKeyboardCoordinates, useDraggable, useDroppable, useSensor, useSensors, verticalListSortingStrategy, };
+export function reorderById(items, movedId, beforeId) {
+    const moved = items.find((i) => i.id === movedId);
+    if (!moved)
+        return items;
+    const without = items.filter((i) => i.id !== movedId);
+    if (beforeId == null)
+        return [moved, ...without];
+    const idx = without.findIndex((i) => i.id === beforeId);
+    if (idx < 0)
+        return items;
+    return [...without.slice(0, idx + 1), moved, ...without.slice(idx + 1)];
+}

package/dist/components/spec-strip.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface SpecStripItem {
+    icon: React.ReactNode;
+    label: string;
+    value: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+export interface SpecStripProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    items: SpecStripItem[];
+}
+/**
+ * A machine's fixed shape — cores, memory, disk — as one line of specification.
+ *
+ * Deliberately flat: no fill, no card. The filled tiles in this system mean a measurement
+ * that moves, so a shape that never changes must not borrow their treatment or the fill
+ * stops meaning anything.
+ */
+export declare function SpecStrip({ items, className, ...props }: SpecStripProps): React.JSX.Element;

package/dist/components/spec-strip.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { Separator } from './separator.js';
+/**
+ * A machine's fixed shape — cores, memory, disk — as one line of specification.
+ *
+ * Deliberately flat: no fill, no card. The filled tiles in this system mean a measurement
+ * that moves, so a shape that never changes must not borrow their treatment or the fill
+ * stops meaning anything.
+ */
+export function SpecStrip({ items, className, ...props }) {
+    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
+}

package/dist/components/speech-playback.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export type SpeechPlaybackState = 'idle' | 'buffering' | 'streaming' | 'speaking' | 'paused' | 'completed' | 'error';
+export interface SpeechPlaybackLabels {
+    pause: string;
+    resume: string;
+    cancel: string;
+    retry: string;
+    progress: (played: string, duration: string) => string;
+}
+export interface SpeechPlaybackProps extends Omit<React.ComponentProps<'section'>, 'children'> {
+    state: SpeechPlaybackState;
+    ariaLabel: string;
+    statusLabel: string;
+    labels: SpeechPlaybackLabels;
+    text?: React.ReactNode;
+    analyser?: AnalyserNode | null;
+    playedMs?: number;
+    durationMs?: number;
+    formatTime?: (milliseconds: number) => string;
+    onPause?: () => void;
+    onResume?: () => void;
+    onCancel?: () => void;
+    onRetry?: () => void;
+}
+export declare function SpeechPlayback({ state, ariaLabel, statusLabel, labels, text, analyser, playedMs, durationMs, formatTime, onPause, onResume, onCancel, onRetry, className, ...props }: SpeechPlaybackProps): React.JSX.Element;

package/dist/components/speech-playback.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Pause, Play, RotateCcw, Square } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { VoiceLine } from './voice-line.js';
+const VOICE_STATE = {
+    idle: 'idle',
+    buffering: 'generating',
+    streaming: 'speaking',
+    speaking: 'speaking',
+    paused: 'idle',
+    completed: 'idle',
+    error: 'reprompt',
+};
+export function SpeechPlayback({ state, ariaLabel, statusLabel, labels, text, analyser = null, playedMs = 0, durationMs = 0, formatTime, onPause, onResume, onCancel, onRetry, className, ...props }) {
+    const active = state === 'streaming' || state === 'speaking';
+    const pausable = active && Boolean(onPause);
+    const resumable = state === 'paused' && Boolean(onResume);
+    const cancellable = (state === 'buffering' ||
+        state === 'streaming' ||
+        state === 'speaking' ||
+        state === 'paused') &&
+        Boolean(onCancel);
+    const safeDuration = Math.max(0, durationMs);
+    const safePlayed = Math.max(0, Math.min(playedMs, safeDuration || playedMs));
+    const progress = safeDuration > 0 ? safePlayed / safeDuration : 0;
+    const playedText = formatTime?.(safePlayed);
+    const durationText = formatTime?.(safeDuration);
+    const progressLabel = playedText !== undefined && durationText !== undefined
+        ? labels.progress(playedText, durationText)
+        : undefined;
+    return (_jsxs("section", { "data-slot": "speech-playback", "data-state": state, "aria-label": ariaLabel, className: cn('border-border bg-card overflow-hidden rounded-xl border', className), ...props, children: [_jsx(VoiceLine, { state: VOICE_STATE[state], who: statusLabel, caption: text, partial: state === 'streaming', analyser: analyser, active: active, className: "rounded-none border-0 bg-transparent shadow-none ring-0" }), progressLabel ? (_jsxs("div", { className: "px-4 pb-3", children: [_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": Math.round(safeDuration), "aria-valuenow": Math.round(safePlayed), "aria-label": progressLabel, className: "bg-muted h-1 overflow-hidden rounded-full", children: _jsx("div", { className: "bg-primary h-full origin-left rounded-full transition-transform motion-reduce:transition-none", style: { transform: `scaleX(${progress})` } }) }), _jsxs("div", { className: "text-muted-foreground mt-1.5 flex justify-between font-mono text-[11px] tabular-nums", children: [_jsx("span", { children: playedText }), _jsx("span", { children: durationText })] })] })) : null, pausable || resumable || cancellable || (state === 'error' && onRetry) ? (_jsxs("div", { className: "border-border/70 flex justify-end gap-1 border-t px-3 py-2", children: [pausable ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onPause, children: [_jsx(Pause, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.pause] })) : null, resumable ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onResume, children: [_jsx(Play, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.resume] })) : null, cancellable ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: [_jsx(Square, { className: "size-3", strokeWidth: 1.5, "aria-hidden": true }), labels.cancel] })) : null, state === 'error' && onRetry ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [_jsx(RotateCcw, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.retry] })) : null] })) : null] }));
+}

package/dist/components/sql-editor.d.ts

@@ -0,0 +1,13 @@
+export interface SqlEditorSchemaObject {
+    slug?: unknown;
+    attributes?: readonly unknown[];
+}
+export interface SqlEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    schema: SqlEditorSchemaObject[];
+    placeholder?: string;
+    bodyFont?: string;
+    params?: string[];
+}
+export declare function SqlEditor({ value, onChange, schema, placeholder, params }: SqlEditorProps): import("react").JSX.Element;