@atmos.build/ui 0.1.0

package/dist/components/detail-top-bar.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export interface DetailBreadcrumbItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    current?: boolean;
+    onSelect?: () => void;
+    ariaLabel?: string;
+    title?: string;
+    className?: string;
+    truncate?: 'end' | 'middle';
+    /** Sits beside this segment rather than at the end of the trail, for state that belongs to this segment alone. */
+    trailing?: ReactNode;
+}
+export interface DetailBreadcrumbProps {
+    items: DetailBreadcrumbItem[];
+    ariaLabel: string;
+    className?: string;
+    separator?: ReactNode;
+    collapseMiddle?: boolean;
+    tailItems?: number;
+    collapsedAriaLabel?: string;
+    dataTestId?: string;
+}
+export interface DetailTopBarProps {
+    title?: ReactNode;
+    trail?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    leftClassName?: string;
+    actionsClassName?: string;
+    chromeFont?: string;
+    headingFont?: string;
+    dataTestId?: string;
+    /**
+     * The trailing fade only reads as a soft edge when content actually scrolls up under the bar.
+     * Above fixed chrome — a toolbar, a canvas, an embedded frame — it washes over something that
+     * never moves, so those surfaces turn it off.
+     */
+    fade?: boolean;
+}
+export declare function DetailTopBar({ title, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade, }: DetailTopBarProps): import("react").JSX.Element;
+export declare function DetailBreadcrumb({ items, ariaLabel, className, separator, collapseMiddle, tailItems, collapsedAriaLabel, dataTestId, }: DetailBreadcrumbProps): import("react").JSX.Element;
+export declare const COLLAPSED_BREADCRUMB_TEST_ID = "detail-breadcrumb-collapsed";
+export declare function detailTopBarButtonClass(className?: string, opts?: {
+    iconOnly?: boolean;
+}): string;

package/dist/components/detail-top-bar.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { collapseMiddleItems, collapsedMiddleItems } from './detail-breadcrumb-utils.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { MiddleTruncate } from './middle-truncate.js';
+import { StickyHeaderFade } from './sticky-header-fade.js';
+export function DetailTopBar({ title, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade = true, }) {
+    return (_jsxs("div", { className: cn('bg-background/95 sticky top-0 z-50 flex h-10 items-center justify-between gap-3 px-3 backdrop-blur', chromeFont, className), "data-slot": "detail-top-bar", "data-testid": dataTestId, children: [_jsxs("div", { className: cn('flex min-w-0 flex-1 items-center gap-3 overflow-hidden', contentClassName), children: [_jsx("div", { className: cn('flex min-w-0 flex-1 items-center overflow-hidden', leftClassName), children: trail ?? (_jsx("h1", { className: cn('text-foreground min-w-0 truncate text-[13px] leading-5 font-medium', headingFont), children: title })) }), meta ? (_jsx("div", { className: "text-muted-foreground min-w-0 shrink truncate font-mono text-[11.5px]", children: meta })) : null] }), actions ? (_jsx("div", { className: cn('flex shrink-0 items-center gap-1', actionsClassName), children: actions })) : null, fade ? _jsx(StickyHeaderFade, { "data-slot": "detail-top-bar-fade" }) : null] }));
+}
+export function DetailBreadcrumb({ items, ariaLabel, className, separator = '/', collapseMiddle = false, tailItems = 2, collapsedAriaLabel, dataTestId, }) {
+    const collapsedItems = collapseMiddle ? collapsedMiddleItems(items, tailItems) : [];
+    const visibleItems = collapseMiddle
+        ? collapseMiddleItems(items, { id: COLLAPSED_BREADCRUMB_ID, label: ELLIPSIS }, tailItems)
+        : items;
+    return (_jsx("nav", { "aria-label": ariaLabel, className: cn('flex w-full min-w-0 items-center gap-2 text-[13px]', className), "data-slot": "detail-breadcrumb", "data-testid": dataTestId, children: visibleItems.map((item, index) => (_jsxs("span", { className: cn('flex min-w-0 items-center gap-2', item.current && 'flex-1'), "data-current": item.current || undefined, children: [index > 0 ? (_jsx("span", { className: "text-muted-foreground/45 shrink-0", "aria-hidden": true, children: separator })) : null, item.id === COLLAPSED_BREADCRUMB_ID ? (_jsx(CollapsedBreadcrumbMenu, { items: collapsedItems, ariaLabel: collapsedAriaLabel })) : (_jsx(DetailBreadcrumbItemView, { item: item })), item.trailing ? (_jsx("span", { className: "flex shrink-0 items-center", children: item.trailing })) : null] }, item.id))) }));
+}
+function DetailBreadcrumbItemView({ item }) {
+    const content = (_jsxs(_Fragment, { children: [item.icon, item.truncate === 'middle' && typeof item.label === 'string' ? (_jsx(MiddleTruncate, { text: item.label, className: "min-w-0 flex-1" })) : (_jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }))] }));
+    const className = cn('flex min-w-0 items-center gap-1.5 rounded-sm transition-colors', item.current && 'flex-1', item.current
+        ? 'text-foreground font-medium'
+        : 'text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', !item.current && item.onSelect && 'cursor-pointer', item.className);
+    if (!item.current && item.onSelect) {
+        return (_jsx("button", { type: "button", onClick: item.onSelect, className: className, "aria-label": item.ariaLabel, title: item.title, children: content }));
+    }
+    return (_jsx("span", { className: className, title: item.title, children: content }));
+}
+/**
+ * The segments the trail had to drop are not gone, only folded: the ellipsis opens them in
+ * path order so a reader can step back out to any ancestor without retyping the path.
+ */
+function CollapsedBreadcrumbMenu({ items, ariaLabel, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", className: "text-muted-foreground hover:text-foreground shrink-0 text-[13px] font-normal", "aria-label": ariaLabel, "data-testid": COLLAPSED_BREADCRUMB_TEST_ID, children: ELLIPSIS }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-w-72 min-w-44", children: items.map((item) => (_jsxs(DropdownMenuItem, { onSelect: item.onSelect, disabled: !item.onSelect, children: [item.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label })] }, item.id))) })] }));
+}
+const ELLIPSIS = '…';
+export const COLLAPSED_BREADCRUMB_TEST_ID = 'detail-breadcrumb-collapsed';
+const COLLAPSED_BREADCRUMB_ID = '__detail-breadcrumb-collapsed__';
+export function detailTopBarButtonClass(className, opts = {}) {
+    return cn('inline-flex h-7 shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-[12px] text-muted-foreground transition-colors', 'hover:border-border/60 hover:bg-muted/50 hover:text-foreground', 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-none', 'disabled:pointer-events-none disabled:opacity-45', opts.iconOnly ? 'w-7 px-0' : 'gap-1.5 px-2', className);
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, blur, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay> & {
+    blur?: boolean;
+}): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, closeLabel, overlayBlur, overlayClassName, onInteractOutside, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    closeLabel?: string;
+    overlayBlur?: boolean;
+    overlayClassName?: string;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialog.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, blur = true, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 motion-reduce:animate-none', blur && 'supports-backdrop-filter:backdrop-blur-xs', className), ...props }));
+}
+function isInteractionInsidePopper(target) {
+    return target instanceof Element && target.closest('[data-radix-popper-content-wrapper]') !== null;
+}
+function dismissPopoverWithoutClosing(onInteractOutside) {
+    return (event) => {
+        if (isInteractionInsidePopper(event.detail.originalEvent.target)) {
+            event.preventDefault();
+            return;
+        }
+        onInteractOutside?.(event);
+    };
+}
+function DialogContent({ className, children, showCloseButton = true, closeLabel = 'Close', overlayBlur = true, overlayClassName, onInteractOutside, ...props }) {
+    const handleInteractOutside = dismissPopoverWithoutClosing(onInteractOutside);
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, { blur: overlayBlur, className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl p-4 text-sm ring-1 duration-100 outline-none motion-reduce:animate-none sm:max-w-sm', className), onInteractOutside: handleInteractOutside, ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": closeLabel, className: "hover:bg-muted focus-visible:ring-ring/50 absolute top-3 right-3 z-10 inline-flex size-8 items-center justify-center rounded-md transition-colors outline-none focus-visible:ring-1 sm:size-auto sm:hover:bg-transparent", children: [_jsx(X, { className: "text-muted-foreground size-4 sm:hidden", "aria-hidden": true }), _jsx("kbd", { className: "border-border/60 bg-muted/50 text-muted-foreground/85 hover:bg-muted hover:text-foreground hidden h-[18px] min-w-[18px] cursor-pointer items-center justify-center rounded-md border px-1.5 font-mono text-[10px] leading-none transition-colors sm:inline-flex", children: "esc" }), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn('bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end', className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('font-heading text-base leading-none font-medium', className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from '../lib/cn.js';
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
+}
+function DropdownMenuTrigger({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+}
+function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, align: align, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-max min-w-32 max-w-[calc(100vw-2rem)] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("z-50 w-max min-w-32 max-w-[calc(100vw-2rem)] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/editable-doc-title.d.ts

@@ -0,0 +1,17 @@
+export interface EditableDocTitleHandle {
+    focus: () => void;
+    focusEnd: () => void;
+    select: () => void;
+}
+export interface EditableDocTitleProps {
+    value: string;
+    placeholder: string;
+    ariaLabel: string;
+    onCommit: (next: string) => void;
+    onEnter?: () => void;
+    headingFont?: string;
+    className?: string;
+    dataTestId?: string;
+    readOnly?: boolean;
+}
+export declare const EditableDocTitle: import("react").ForwardRefExoticComponent<EditableDocTitleProps & import("react").RefAttributes<EditableDocTitleHandle>>;

package/dist/components/editable-doc-title.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, forwardRef, } from 'react';
+import { cn } from '../lib/cn.js';
+import { useFlushOnHide } from '../hooks/use-flush-on-hide.js';
+function fitHeightToContent(el) {
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+}
+function useAutosizeTextArea() {
+    const ref = useRef(null);
+    const rafRef = useRef(0);
+    const fit = useCallback(() => {
+        if (ref.current)
+            fitHeightToContent(ref.current);
+    }, []);
+    const scheduleFit = useCallback(() => {
+        if (rafRef.current)
+            return;
+        if (typeof requestAnimationFrame === 'undefined') {
+            fit();
+            return;
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = 0;
+            fit();
+        });
+    }, [fit]);
+    useLayoutEffect(() => {
+        fit();
+    }, [fit]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        let lastWidth = el.clientWidth;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width;
+            if (width === lastWidth)
+                return;
+            lastWidth = width ?? lastWidth;
+            fitHeightToContent(el);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => () => {
+        if (!rafRef.current)
+            return;
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = 0;
+    }, []);
+    return { ref, fit, scheduleFit };
+}
+export const EditableDocTitle = forwardRef(function EditableDocTitle({ value, placeholder, ariaLabel, onCommit, onEnter, headingFont, className, dataTestId, readOnly = false, }, ref) {
+    const draftRef = useRef(value);
+    const committedValueRef = useRef(value);
+    const dirtyRef = useRef(false);
+    const { ref: inputRef, fit, scheduleFit } = useAutosizeTextArea();
+    useEffect(() => {
+        committedValueRef.current = value;
+        if (dirtyRef.current)
+            return;
+        draftRef.current = value;
+        const input = inputRef.current;
+        if (!input || input.value === value)
+            return;
+        input.value = value;
+        fit();
+    }, [fit, inputRef, value]);
+    useEffect(() => {
+        if (!readOnly)
+            return;
+        dirtyRef.current = false;
+        draftRef.current = committedValueRef.current;
+        if (inputRef.current)
+            inputRef.current.value = committedValueRef.current;
+        fit();
+    }, [fit, inputRef, readOnly]);
+    useImperativeHandle(ref, () => ({
+        focus: () => inputRef.current?.focus(),
+        focusEnd: () => {
+            const input = inputRef.current;
+            if (!input)
+                return;
+            const end = input.value.length;
+            input.focus();
+            input.setSelectionRange(end, end);
+        },
+        select: () => {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        },
+    }), [inputRef]);
+    const reset = () => {
+        dirtyRef.current = false;
+        draftRef.current = committedValueRef.current;
+        if (inputRef.current)
+            inputRef.current.value = committedValueRef.current;
+        fit();
+    };
+    const commit = () => {
+        if (readOnly) {
+            reset();
+            return;
+        }
+        const trimmed = draftRef.current.trim();
+        if (!trimmed) {
+            reset();
+            return;
+        }
+        dirtyRef.current = false;
+        draftRef.current = trimmed;
+        if (inputRef.current && inputRef.current.value !== trimmed)
+            inputRef.current.value = trimmed;
+        fit();
+        if (trimmed !== committedValueRef.current) {
+            committedValueRef.current = trimmed;
+            onCommit(trimmed);
+        }
+    };
+    useFlushOnHide(() => {
+        if (readOnly)
+            return;
+        const trimmed = draftRef.current.trim();
+        if (trimmed && trimmed !== committedValueRef.current)
+            onCommit(trimmed);
+    });
+    return (_jsx("textarea", { ref: inputRef, rows: 1, defaultValue: value, readOnly: readOnly, onChange: (e) => {
+            draftRef.current = e.target.value;
+            dirtyRef.current = true;
+            scheduleFit();
+        }, onBlur: commit, onKeyDown: (e) => {
+            if (readOnly)
+                return;
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                inputRef.current?.blur();
+                onEnter?.();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                reset();
+                inputRef.current?.blur();
+            }
+        }, "aria-label": ariaLabel, placeholder: placeholder, className: cn('w-full resize-none overflow-hidden border-0 bg-transparent outline-none focus:ring-0', 'text-[28px] leading-tight tracking-tight', 'placeholder:text-muted-foreground/55', headingFont ?? 'font-semibold', className), "data-testid": dataTestId }));
+});

package/dist/components/empty-state.d.ts

@@ -0,0 +1,12 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+    /** Spins the icon, for a state the surface is waiting on rather than one it has settled in. */
+    busy?: boolean;
+}
+export declare function EmptyState({ icon: Icon, title, description, action, className, busy, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/empty-state.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function EmptyState({ icon: Icon, title, description, action, className, busy, }) {
+    return (_jsxs("div", { role: "status", className: cn('flex flex-col items-center justify-center gap-2 py-10 px-6 text-center', className), children: [Icon ? (_jsx(Icon, { className: cn('size-6 text-muted-foreground/60', busy && 'animate-spin motion-reduce:animate-none'), strokeWidth: 1.5, "aria-hidden": true })) : null, _jsx("div", { className: "text-[13px] font-medium text-foreground", children: title }), description ? (_jsx("div", { className: "text-[12px] text-muted-foreground max-w-[36ch]", children: description })) : null, action ? _jsx("div", { className: "mt-2", children: action }) : null] }));
+}

package/dist/components/filter-condition-editor.d.ts

@@ -0,0 +1,18 @@
+import { type FilterEditorCtx, type FilterEditorLabels } from './view-query-controls.js';
+import { type FilterCondition, type FilterValue } from '../lib/view-query/index.js';
+export interface FilterConditionEditorProps {
+    condition: FilterCondition;
+    ctx: FilterEditorCtx;
+    labels: FilterEditorLabels;
+    onChange: (next: FilterCondition) => void;
+}
+/** One clause as a stacked form: the field it reads, its verb, then a value editor per kind. */
+export declare function FilterConditionEditor({ condition, ctx, labels, onChange, }: FilterConditionEditorProps): React.ReactElement | null;
+export interface FilterValueEditorProps {
+    condition: FilterCondition;
+    ctx: FilterEditorCtx;
+    labels: FilterEditorLabels;
+    onChange: (value: FilterValue) => void;
+}
+/** The value half of a clause, shaped by the field's kind and the chosen verb. */
+export declare function FilterValueEditor({ condition, ctx, labels, onChange, }: FilterValueEditorProps): React.ReactElement | null;

package/dist/components/filter-condition-editor.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from './button.js';
+import { DatePickerPopover } from './date-picker.js';
+import { Input } from './input.js';
+import { MultiCombobox } from './multi-combobox.js';
+import { PropertySelector } from './property-selector.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select.js';
+import { filterEditorOptions, } from './view-query-controls.js';
+import { defaultValueFor, } from '../lib/view-query/index.js';
+import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+import { cn } from '../lib/cn.js';
+/** One clause as a stacked form: the field it reads, its verb, then a value editor per kind. */
+export function FilterConditionEditor({ condition, ctx, labels, onChange, }) {
+    const meta = ctx.registry.meta[condition.field];
+    if (!meta)
+        return null;
+    const fieldLabel = ctx.fieldLabel(condition.field);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-foreground/80 text-[11px] font-medium", children: fieldLabel }), _jsx(FilterChoiceSelect, { value: condition.operator, options: meta.operators.map((operator) => ({
+                    id: operator,
+                    label: ctx.operatorLabel(operator),
+                })), label: fieldLabel, onChange: (next) => onChange({
+                    ...condition,
+                    operator: next,
+                    value: defaultValueFor(meta, next),
+                }) }), _jsx(FilterValueEditor, { condition: condition, ctx: ctx, labels: labels, onChange: (value) => onChange({ ...condition, value }) })] }));
+}
+/** The value half of a clause, shaped by the field's kind and the chosen verb. */
+export function FilterValueEditor({ condition, ctx, labels, onChange, }) {
+    const { operator, value } = condition;
+    const meta = ctx.registry.meta[condition.field];
+    if (!meta || operator === 'is_set' || operator === 'is_not_set')
+        return null;
+    if (meta.kind === 'text') {
+        return (_jsx(Input, { type: "text", value: value.kind === 'text' ? value.text : '', onChange: (event) => onChange({ kind: 'text', text: event.target.value }), placeholder: labels.valuePlaceholder, "aria-label": labels.filterValue, className: "h-7 text-[12px]" }));
+    }
+    if (meta.kind === 'number') {
+        const n = value.kind === 'number' ? value.n : (meta.defaultNumber ?? 0);
+        const scale = filterEditorOptions(ctx, condition.field);
+        if (scale.length === 0) {
+            return (_jsx(Input, { type: "number", value: n, onChange: (event) => onChange({ kind: 'number', n: Number(event.target.value) }), "aria-label": labels.filterValue, className: "h-7 text-[12px]" }));
+        }
+        return (_jsx(FilterChoiceSelect, { value: String(n), options: scale, label: labels.filterValue, onChange: (next) => onChange({ kind: 'number', n: Number(next) }) }));
+    }
+    if (meta.kind === 'boolean') {
+        return (_jsx(FilterChoiceSelect, { value: String(value.kind === 'boolean' ? value.value : true), options: [
+                { id: 'true', label: labels.booleanTrue },
+                { id: 'false', label: labels.booleanFalse },
+            ], label: labels.filterValue, onChange: (next) => onChange({ kind: 'boolean', value: next === 'true' }) }));
+    }
+    if (meta.kind === 'date') {
+        if (operator === 'within_next' || operator === 'within_last') {
+            return (_jsx(Input, { type: "number", min: 0, value: value.kind === 'relative_days' ? value.days : 7, onChange: (event) => onChange({ kind: 'relative_days', days: Math.max(0, Number(event.target.value)) }), "aria-label": labels.relativeDays, className: "h-7 text-[12px]" }));
+        }
+        if (operator === 'between') {
+            const range = value.kind === 'date_range' ? value : { from: null, to: null };
+            return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(FilterDateField, { value: range.from, label: labels.filterValue, format: ctx.format, onChange: (iso) => onChange({ kind: 'date_range', from: iso, to: range.to }) }), _jsx("span", { className: "text-muted-foreground text-[11px]", children: "\u2192" }), _jsx(FilterDateField, { value: range.to, label: labels.filterValue, format: ctx.format, onChange: (iso) => onChange({ kind: 'date_range', from: range.from, to: iso }) })] }));
+        }
+        return (_jsx(FilterDateField, { value: value.kind === 'date' ? value.iso : null, label: labels.filterValue, format: ctx.format, onChange: (iso) => onChange({ kind: 'date', iso }) }));
+    }
+    return (_jsx(FilterOptionPicker, { options: filterEditorOptions(ctx, condition.field), values: value.kind === 'ids' ? value.ids : [], multiple: operator === 'is_any_of' || operator === 'is_none_of', labels: labels, onChange: (ids) => onChange({ kind: 'ids', ids }) }));
+}
+function FilterChoiceSelect({ value, options, label, onChange, }) {
+    return (_jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": label, className: "w-full text-[12px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.id, className: "text-[12px]", children: option.label }, option.id))) })] }));
+}
+const filterOptionListClass = '[&_input]:text-[12px] [&_[role=option]]:min-h-7 [&_[role=option]]:rounded-md [&_[role=option]]:px-1.5 [&_[role=option]]:py-1 [&_[role=option]]:text-[12px]';
+function FilterOptionPicker({ options, values, multiple, labels, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const selected = values
+        .map((id) => options.find((option) => option.id === id)?.label)
+        .filter((label) => Boolean(label));
+    const summary = selected.length === 0
+        ? labels.emptyFilterValue
+        : selected.length === 1
+            ? (selected[0] ?? labels.emptyFilterValue)
+            : `${selected[0]} +${selected.length - 1}`;
+    const trigger = (_jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": labels.filterValue, className: "border-border/60 text-foreground/90 min-h-7 w-full justify-start px-2 text-[12px] font-normal", children: _jsx("span", { className: "truncate", children: summary }) }));
+    if (multiple) {
+        return (_jsx(MultiCombobox, { open: open, onOpenChange: setOpen, triggerAsChild: true, items: [...options], values: values, onChange: onChange, searchPlaceholder: labels.searchValues, contentClassName: cn('w-[240px]', filterOptionListClass), children: trigger }));
+    }
+    return (_jsx(PropertySelector, { open: open, onOpenChange: setOpen, items: options.map((option) => ({ ...option, selected: values[0] === option.id })), onSelect: (option) => onChange(values[0] === option.id ? [] : [option.id]), searchPlaceholder: labels.searchValues, labels: { noMatches: labels.noValues }, contentClassName: cn('w-[240px]', filterOptionListClass), "aria-label": labels.filterValue, children: trigger }));
+}
+function FilterDateField({ value, label, format, onChange, }) {
+    const day = value ? value.slice(0, 10) : null;
+    const civil = parseCivilDay(day);
+    return (_jsx(DatePickerPopover, { value: day, format: format, onSelect: (next) => onChange(next ? new Date(`${next}T00:00:00Z`).toISOString() : null), children: _jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": label, className: "border-border/60 text-foreground/90 min-w-[96px] justify-start px-2 text-[12px] font-normal", children: civil
+                ? resolveDateTimeFormat(format, undefined)(civil, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                })
+                : '—' }) }));
+}
+function parseCivilDay(day) {
+    if (!day)
+        return null;
+    const [year, month, date] = day.split('-').map(Number);
+    if (!year || !month || !date)
+        return null;
+    return new Date(year, month - 1, date);
+}

package/dist/components/form-dialog.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export interface FormDialogLabels {
+    cancel: string;
+    close: string;
+    saving: string;
+}
+export interface FormDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    onSubmit: () => void;
+    submitLabel: string;
+    labels: FormDialogLabels;
+    submitting?: boolean;
+    canSubmit?: boolean;
+    /** Render a single "Close" action instead of Cancel + submit (e.g. a read-only view). */
+    hideSubmit?: boolean;
+    footerLeft?: ReactNode;
+    children: ReactNode;
+    contentClassName?: string;
+    'data-testid'?: string;
+}
+export declare function FormDialog({ open, onOpenChange, title, description, onSubmit, submitLabel, labels, submitting, canSubmit, hideSubmit, footerLeft, children, contentClassName, 'data-testid': testId, }: FormDialogProps): import("react").JSX.Element;
+export declare function FormDialogCreateMoreToggle({ checked, onCheckedChange, label, id, }: {
+    checked: boolean;
+    onCheckedChange: (next: boolean) => void;
+    label: string;
+    id?: string;
+}): import("react").JSX.Element;