@atmos.build/ui 0.1.0

package/dist/components/comment-pin.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Check, MessageSquare } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+// A comment pin — the small anchored marker that sits on a commented object (a
+// slide block, a whole slide) and, when activated, opens its thread. Generalised
+// as an atom so any anchored-thread surface (canvas objects, a map, a diff line)
+// reads as one system. Purely presentational + a button; positioning is the
+// caller's job.
+const commentPinVariants = cva('atmos-comment-pin inline-flex select-none cursor-pointer items-center justify-center gap-1 rounded-full rounded-bl-[4px] border shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        tone: {
+            open: 'border-border bg-card text-foreground hover:bg-muted',
+            resolved: 'border-border/60 bg-muted text-muted-foreground hover:bg-muted/80',
+        },
+        active: {
+            true: 'ring-2 ring-ring ring-offset-1 ring-offset-background',
+            false: '',
+        },
+        size: {
+            sm: 'h-5 min-w-5 px-1 text-[10.5px]',
+            default: 'h-6 min-w-6 px-1.5 text-[11px]',
+        },
+    },
+    defaultVariants: { tone: 'open', active: false, size: 'default' },
+});
+export function CommentPin({ className, count, resolved = false, active = false, size, tone, ...props }) {
+    const resolvedTone = tone ?? (resolved ? 'resolved' : 'open');
+    const iconClass = size === 'sm' ? 'size-3' : 'size-3.5';
+    return (_jsxs("button", { type: "button", "data-slot": "comment-pin", "data-resolved": resolved || undefined, "data-active": active || undefined, className: cn(commentPinVariants({ tone: resolvedTone, active, size, className })), ...props, children: [resolved ? (_jsx(Check, { className: iconClass, strokeWidth: 2, "aria-hidden": true })) : (_jsx(MessageSquare, { className: iconClass, strokeWidth: 1.75, "aria-hidden": true })), typeof count === 'number' && count > 0 ? (_jsx("span", { className: "font-mono tabular-nums leading-none", children: count })) : null] }));
+}
+export { commentPinVariants };

package/dist/components/confidence-meter.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ConfidenceLevel = 'low' | 'medium' | 'high';
+export declare function confidenceLevel(value: number): ConfidenceLevel;
+export interface ConfidenceMeterProps extends React.ComponentProps<'span'> {
+    value: number;
+    label: string;
+    showValue?: boolean;
+    showLabel?: boolean;
+    valueText?: string;
+}
+export declare function ConfidenceMeter({ value, label, showValue, showLabel, valueText, className, ...props }: ConfidenceMeterProps): React.JSX.Element;

package/dist/components/confidence-meter.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+export function confidenceLevel(value) {
+    if (value < 0.5)
+        return 'low';
+    if (value < 0.8)
+        return 'medium';
+    return 'high';
+}
+const FILLED_TONE = {
+    low: 'bg-warning-9',
+    medium: 'bg-muted-foreground/70',
+    high: 'bg-foreground/70',
+};
+const FILLED_BARS = { low: 1, medium: 2, high: 3 };
+export function ConfidenceMeter({ value, label, showValue = false, showLabel = false, valueText, className, ...props }) {
+    const clamped = Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
+    const level = confidenceLevel(clamped);
+    const filled = FILLED_BARS[level];
+    const pct = valueText ?? `${Math.round(clamped * 100)}%`;
+    return (_jsxs("span", { "data-slot": "confidence-meter", "data-level": level, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(clamped * 100), "aria-label": `${label} ${pct}`, title: `${label} ${pct}`, className: cn('inline-flex items-center gap-1.5', className), ...props, children: [showLabel ? _jsx("span", { className: "text-muted-foreground", children: label }) : null, _jsx("span", { "aria-hidden": true, className: "flex items-end gap-0.5", children: [0, 1, 2].map((index) => _jsx("span", { className: cn('w-0.5 rounded-full', index === 0 ? 'h-1.5' : index === 1 ? 'h-2' : 'h-2.5', index < filled ? FILLED_TONE[level] : 'bg-border') }, index)) }), showValue ? _jsx("span", { className: "font-mono text-[11px] tabular-nums text-muted-foreground", children: pct }) : null] }));
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+declare function ContextMenu({ onOpenChange, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>): React.JSX.Element;
+/**
+ * Publishes `data-context-menu-open` while its menu is open, which `data-state` cannot
+ * say on its own: a trigger that is also a hover-card or tooltip anchor wears
+ * `data-state="open"` for those too, so a row keyed off it lights up on hover. Selectable
+ * rows key their focus ring off this attribute instead, and so keep looking focused while
+ * the menu they opened holds focus in their place — off the trigger itself where the row
+ * is the trigger, and off `group/context-menu` where the trigger wraps it.
+ */
+declare function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React.JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): React.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): React.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): React.JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, };

package/dist/components/context-menu.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import { CheckIcon, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const ContextMenuOpenContext = React.createContext(false);
+function ContextMenu({ onOpenChange, ...props }) {
+    const [open, setOpen] = React.useState(false);
+    return (_jsx(ContextMenuOpenContext.Provider, { value: open, children: _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", onOpenChange: (next) => {
+                setOpen(next);
+                onOpenChange?.(next);
+            }, ...props }) }));
+}
+/**
+ * Publishes `data-context-menu-open` while its menu is open, which `data-state` cannot
+ * say on its own: a trigger that is also a hover-card or tooltip anchor wears
+ * `data-state="open"` for those too, so a row keyed off it lights up on hover. Selectable
+ * rows key their focus ring off this attribute instead, and so keep looking focused while
+ * the menu they opened holds focus in their place — off the trigger itself where the row
+ * is the trigger, and off `group/context-menu` where the trigger wraps it.
+ */
+function ContextMenuTrigger({ className, ...props }) {
+    const open = React.useContext(ContextMenuOpenContext);
+    return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", "data-context-menu-open": open ? '' : undefined, className: cn('group/context-menu', className), ...props }));
+}
+function ContextMenuContent({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn('bg-popover text-popover-foreground ring-foreground/10 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 z-50 w-max max-w-[calc(100vw-2rem)] min-w-32 overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100', className), ...props }) }));
+}
+function ContextMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/context-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground 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-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_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": "context-menu-checkbox-item-indicator", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn('text-muted-foreground/70 px-1.5 py-1 text-[10.5px] font-medium tracking-[0.04em] data-inset:pl-7', className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn('text-muted-foreground/60 ml-auto pl-4 font-mono text-[10.5px] tracking-widest', className), ...props }));
+}
+function ContextMenuSub({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Sub, { "data-slot": "context-menu-sub", ...props });
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.SubTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRight, { className: "text-muted-foreground/70 ml-auto size-3.5" })] }));
+}
+function ContextMenuSubContent({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-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 z-50 w-max max-w-[calc(100vw-2rem)] min-w-32 overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100', className), ...props }) }));
+}
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, };

package/dist/components/copy-button.d.ts

@@ -0,0 +1,12 @@
+import { type IconButtonProps } from './icon-button.js';
+export interface CopyButtonProps extends Omit<IconButtonProps, 'children' | 'tooltip'> {
+    /** The text put on the clipboard. */
+    value: string;
+    /** Names what is copied — "Copy access target". Used as tooltip and accessible name. */
+    label: string;
+    /** Shown in the tooltip while the check mark is up. */
+    copiedLabel?: string;
+    onCopied?: () => void;
+    onCopyFailed?: (error: unknown) => void;
+}
+export declare function CopyButton({ value, label, copiedLabel, onCopied, onCopyFailed, size, ...props }: CopyButtonProps): import("react").JSX.Element;

package/dist/components/copy-button.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { IconButton } from './icon-button.js';
+const COPIED_FEEDBACK_MS = 1500;
+export function CopyButton({ value, label, copiedLabel = label, onCopied, onCopyFailed, size = 'xs', ...props }) {
+    const [copied, setCopied] = useState(false);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const feedbackTimer = useRef(undefined);
+    useEffect(() => () => clearTimeout(feedbackTimer.current), []);
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+        }
+        catch (error) {
+            onCopyFailed?.(error);
+            return;
+        }
+        setCopied(true);
+        // The press itself closed the tooltip, and the confirmation is what it has to say.
+        setTooltipOpen(true);
+        clearTimeout(feedbackTimer.current);
+        feedbackTimer.current = setTimeout(() => {
+            setCopied(false);
+            // Held open by us, not by the pointer, so nothing else would take it back down.
+            setTooltipOpen(false);
+        }, COPIED_FEEDBACK_MS);
+        onCopied?.();
+    }
+    return (_jsx(IconButton, { size: size, "aria-label": label, tooltip: copied ? copiedLabel : label, tooltipOpen: tooltipOpen, onTooltipOpenChange: setTooltipOpen, onClick: () => void copy(), ...props, children: copied ? _jsx(Check, { "aria-hidden": true }) : _jsx(Copy, { "aria-hidden": true }) }));
+}

package/dist/components/date-picker.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type FormatDateTime } from '../lib/date-time-format.js';
+export interface DatePickerProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    fromDate?: string;
+    locale?: string;
+    format?: FormatDateTime;
+    'aria-label'?: string;
+    closeOnSelect?: boolean;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    size?: 'sm' | 'default';
+}
+export declare function DatePicker({ value, onChange, placeholder, disabled, fromDate, locale, format, 'aria-label': ariaLabel, closeOnSelect, align, className, size, }: DatePickerProps): import("react").JSX.Element;
+export interface DatePickerPopoverProps {
+    value: string | null;
+    onSelect: (date: string | null) => void;
+    children: ReactNode;
+    align?: 'start' | 'center' | 'end';
+    locale?: string;
+    format?: FormatDateTime;
+    closeOnSelect?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function DatePickerPopover({ value, onSelect, children, align, locale, format, closeOnSelect, open: openProp, onOpenChange, }: DatePickerPopoverProps): import("react").JSX.Element;

package/dist/components/date-picker.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, } from 'react';
+import { CalendarIcon } from 'lucide-react';
+import { Calendar } from './calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { PickerField } from './picker-field.js';
+import { parseLooseDate } from '../lib/parse-loose.js';
+import { cn } from '../lib/cn.js';
+import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+function ymd(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+function parseCivilDate(value) {
+    if (!value)
+        return null;
+    const [y, m, d] = value.split('-').map(Number);
+    if (!y || !m || !d)
+        return null;
+    return new Date(y, m - 1, d);
+}
+export function DatePicker({ value, onChange, placeholder, disabled, fromDate, locale, format, 'aria-label': ariaLabel, closeOnSelect = true, align = 'start', className, size = 'default', }) {
+    const resolvedLocale = locale ?? 'en';
+    const [open, setOpen] = useState(false);
+    const [typed, setTyped] = useState(null);
+    const today = useMemo(() => {
+        const d = new Date();
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    }, []);
+    const preview = useMemo(() => (typed ? parseLooseDate(typed, today) : null), [typed, today]);
+    const display = useMemo(() => {
+        const parsed = parseCivilDate(value);
+        if (!parsed)
+            return '';
+        return resolveDateTimeFormat(format, resolvedLocale)(parsed, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }, [value, format, resolvedLocale]);
+    const beforeMin = (next) => Boolean(fromDate && next < fromDate);
+    const commit = (next) => {
+        setTyped(null);
+        onChange(next);
+    };
+    const handleSelect = (next) => {
+        if (next && beforeMin(next))
+            return;
+        commit(next ?? undefined);
+        if (next && closeOnSelect)
+            setOpen(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        if (preview) {
+            const next = ymd(preview);
+            if (beforeMin(next))
+                return;
+            commit(next);
+            setOpen(false);
+        }
+    };
+    const gridValue = preview ? ymd(preview) : (value ?? null);
+    return (_jsx(PickerField, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                setTyped(null);
+        }, display: display, typed: typed, onTypedChange: setTyped, onInputKeyDown: handleKeyDown, placeholder: placeholder, parseState: typed ? (preview ? 'ok' : 'unparseable') : 'empty', icon: _jsx(CalendarIcon, { className: "size-4", strokeWidth: 1.8 }), disabled: disabled, size: size, align: align, "aria-label": ariaLabel, className: cn('w-[160px]', className), contentClassName: "p-3", children: _jsx(Calendar, { value: gridValue, locale: resolvedLocale, format: format, typeable: false, minDate: fromDate, onSelect: handleSelect }, gridValue ? gridValue.slice(0, 7) : 'none') }));
+}
+export function DatePickerPopover({ value, onSelect, children, align = 'start', locale, format, closeOnSelect = true, open: openProp, onOpenChange, }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const setOpen = (next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { align: align, sideOffset: 6, className: "w-auto p-3", "data-testid": "date-picker-popover", children: _jsx(Calendar, { value: value, locale: locale, format: format, autoFocusInput: true, onSelect: (next) => {
+                        onSelect(next);
+                        if (closeOnSelect)
+                            setOpen(false);
+                    } }) })] }));
+}

package/dist/components/date-tile.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type FormatDateTime } from '../lib/date-time-format.js';
+type DateTileSize = 'sm' | 'md';
+export interface DateTileProps extends Omit<React.ComponentProps<'time'>, 'children'> {
+    date: Date | string | null | undefined;
+    locale?: string;
+    format?: FormatDateTime;
+    size?: DateTileSize;
+}
+export declare function DateTile({ date, locale, format, size, className, ...props }: DateTileProps): React.JSX.Element;
+export {};

package/dist/components/date-tile.js

@@ -0,0 +1,16 @@
+'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 { resolveDateTimeFormat } from '../lib/date-time-format.js';
+const sizeBox = { sm: 'size-10 rounded-md', md: 'size-12 rounded-lg' };
+const dayText = { sm: 'text-[14px]', md: 'text-[16px]' };
+export function DateTile({ date, locale, format, size = 'md', className, ...props }) {
+    const value = typeof date === 'string' ? new Date(date) : date;
+    const valid = value != null && !Number.isNaN(value.getTime());
+    const fmt = resolveDateTimeFormat(format, locale);
+    const weekday = valid ? fmt(value, { weekday: 'short' }) : '';
+    const day = valid ? fmt(value, { day: 'numeric' }) : '–';
+    const month = valid ? fmt(value, { month: 'short' }) : '';
+    return (_jsxs("time", { "data-slot": "date-tile", "data-size": size, dateTime: valid ? value.toISOString() : undefined, className: cn('flex shrink-0 flex-col items-center justify-center gap-px border border-border/60 bg-background text-center leading-none shadow-xs', sizeBox[size], className), ...props, children: [_jsx("span", { className: "font-mono text-[9px] text-muted-foreground/70", children: weekday }), _jsx("span", { className: cn('font-semibold tabular-nums text-foreground', dayText[size]), children: day }), _jsx("span", { className: "font-mono text-[9px] text-muted-foreground/70", children: month })] }));
+}

package/dist/components/date-time-picker.d.ts

@@ -0,0 +1,25 @@
+import { type FormatDateTime } from '../lib/date-time-format.js';
+export interface DateTimePickerLabels {
+    placeholder: string;
+    preview: (when: string) => string;
+    timeAria: string;
+}
+export interface DateTimePickerProps {
+    value: Date | null;
+    onChange: (next: Date | null) => void;
+    mode?: 'datetime' | 'time';
+    step?: number;
+    minDate?: string;
+    placeholder?: string;
+    locale?: string;
+    format?: FormatDateTime;
+    parseTimeZone?: string;
+    align?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    className?: string;
+    size?: 'sm' | 'default';
+    'aria-label'?: string;
+    labels?: Partial<DateTimePickerLabels>;
+}
+export declare function civilDateForTimeZone(instant: Date, timeZone?: string): Date;
+export declare function DateTimePicker({ value, onChange, mode, step, minDate, placeholder, locale, format, parseTimeZone, align, disabled, className, size, 'aria-label': ariaLabel, labels: labelsProp, }: DateTimePickerProps): import("react").JSX.Element;

package/dist/components/date-time-picker.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState, } from 'react';
+import { CalendarClock, Clock } from 'lucide-react';
+import { Calendar } from './calendar.js';
+import { PickerField } from './picker-field.js';
+import { TimeColumn, buildTimeSlots, useTimeNavigation } from './time-column.js';
+import { parseLooseDateTime } from '../lib/parse-loose-datetime.js';
+import { parseLooseTime } from '../lib/parse-loose-time.js';
+import { cn } from '../lib/cn.js';
+import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+const DEFAULT_LABELS = {
+    placeholder: 'Choose a date and time',
+    preview: (when) => `Preview: ${when}`,
+    timeAria: 'Choose a time',
+};
+function ymd(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+function minutesOf(d) {
+    return d.getHours() * 60 + d.getMinutes();
+}
+function fromYmd(value) {
+    const [y, m, d] = value.split('-').map(Number);
+    if (!y || !m || !d)
+        return null;
+    return new Date(y, m - 1, d);
+}
+function compose(day, minutes) {
+    return new Date(day.getFullYear(), day.getMonth(), day.getDate(), Math.floor(minutes / 60), minutes % 60, 0, 0);
+}
+export function civilDateForTimeZone(instant, timeZone) {
+    if (!timeZone)
+        return instant;
+    try {
+        const parts = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hourCycle: 'h23',
+        }).formatToParts(instant);
+        const value = (type) => Number(parts.find((p) => p.type === type)?.value);
+        const year = value('year');
+        const month = value('month');
+        const day = value('day');
+        const hour = value('hour');
+        const minute = value('minute');
+        const second = value('second');
+        if (!year || !month || !day || Number.isNaN(hour) || Number.isNaN(minute))
+            return instant;
+        return new Date(year, month - 1, day, hour, minute, Number.isNaN(second) ? 0 : second, 0);
+    }
+    catch {
+        return instant;
+    }
+}
+export function DateTimePicker({ value, onChange, mode = 'datetime', step = 15, minDate, placeholder, locale, format, parseTimeZone, align = 'start', disabled, className, size = 'sm', 'aria-label': ariaLabel, labels: labelsProp, }) {
+    const labels = { ...DEFAULT_LABELS, ...labelsProp };
+    const resolvedLocale = locale ?? 'en';
+    const listboxId = useId();
+    const [open, setOpen] = useState(false);
+    const [typed, setTyped] = useState(null);
+    const carrier = () => value ?? civilDateForTimeZone(new Date(), parseTimeZone);
+    const preview = useMemo(() => {
+        if (!typed)
+            return null;
+        if (mode === 'time') {
+            const parsed = parseLooseTime(typed);
+            if (!parsed)
+                return null;
+            return compose(carrier(), parsed.hour * 60 + parsed.minute);
+        }
+        return parseLooseDateTime(typed, civilDateForTimeZone(new Date(), parseTimeZone));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [typed, mode, value, parseTimeZone]);
+    const fmt = useMemo(() => {
+        const boundFormat = resolveDateTimeFormat(format, resolvedLocale);
+        const options = mode === 'time'
+            ? { hour: 'numeric', minute: '2-digit' }
+            : {
+                weekday: 'short',
+                month: 'short',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit',
+            };
+        return (d) => boundFormat(d, options);
+    }, [format, resolvedLocale, mode]);
+    const display = value ? fmt(value) : '';
+    const previewLabel = preview ? fmt(preview) : null;
+    const gridValue = preview ? ymd(preview) : value ? ymd(value) : null;
+    const columnMinutes = preview ? minutesOf(preview) : value ? minutesOf(value) : null;
+    const slots = useMemo(() => buildTimeSlots(step, 0, 24 * 60 - 1), [step]);
+    const { active, setActive, move } = useTimeNavigation({
+        slots,
+        selectedMinutes: value ? minutesOf(value) : null,
+    });
+    const optionId = (minutes) => `${listboxId}-opt-${minutes}`;
+    const commit = (next) => {
+        setTyped(null);
+        setActive(null);
+        onChange(next);
+    };
+    const pickDay = (day) => {
+        if (!day) {
+            commit(null);
+            return;
+        }
+        const d = fromYmd(day);
+        if (!d)
+            return;
+        commit(compose(d, columnMinutes ?? 9 * 60));
+    };
+    const pickTime = (minutes) => {
+        commit(compose(value ?? carrier(), minutes));
+        if (mode === 'time')
+            setOpen(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'ArrowDown' || (e.ctrlKey && (e.key === 'n' || e.key === 'N'))) {
+            e.preventDefault();
+            setTyped(null);
+            move(1);
+        }
+        else if (e.key === 'ArrowUp' || (e.ctrlKey && (e.key === 'p' || e.key === 'P'))) {
+            e.preventDefault();
+            setTyped(null);
+            move(-1);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (preview) {
+                commit(preview);
+                setOpen(false);
+            }
+            else if (active !== null) {
+                pickTime(active);
+                setOpen(false);
+            }
+        }
+    };
+    return (_jsxs(PickerField, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next) {
+                setTyped(null);
+                setActive(null);
+            }
+        }, display: display, typed: typed, onTypedChange: setTyped, onInputKeyDown: handleKeyDown, placeholder: placeholder ?? labels.placeholder, parseState: typed ? (preview ? 'ok' : 'unparseable') : 'empty', icon: mode === 'time' ? (_jsx(Clock, { className: "size-3.5", strokeWidth: 1.8 })) : (_jsx(CalendarClock, { className: "size-3.5", strokeWidth: 1.8 })), disabled: disabled, size: size, align: align, "aria-label": ariaLabel, className: cn(mode === 'time' ? 'w-[116px]' : 'w-[212px]', className), listboxId: listboxId, activeDescendantId: active !== null ? optionId(active) : undefined, children: [previewLabel ? (_jsx("p", { className: "text-muted-foreground border-border/60 border-b px-3 py-1.5 text-[11px] tabular-nums", children: labels.preview(previewLabel) })) : null, _jsxs("div", { className: "flex items-stretch", children: [mode !== 'time' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-2.5", children: _jsx(Calendar, { value: gridValue, locale: resolvedLocale, format: format, typeable: false, minDate: minDate, onSelect: pickDay, className: "w-[244px]" }, gridValue ? gridValue.slice(0, 7) : 'none') }), _jsx("div", { className: "bg-border/60 w-px self-stretch" })] })), _jsx(TimeColumn, { id: listboxId, optionId: optionId, slots: slots, selectedMinutes: columnMinutes, activeMinutes: active, onPick: pickTime, locale: resolvedLocale, format: format, "aria-label": labels.timeAria })] })] }));
+}

package/dist/components/detail-breadcrumb-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function collapseMiddleItems<T>(items: readonly T[], collapsedItem: T, tailItems?: number): T[];
+export declare function collapsedMiddleItems<T>(items: readonly T[], tailItems?: number): T[];

package/dist/components/detail-breadcrumb-utils.js

@@ -0,0 +1,18 @@
+// Folding one segment away buys no room — the ellipsis is as wide as the name it hides.
+const MIN_COLLAPSED_ITEMS = 2;
+function collapsedRange(count, tailItems) {
+    const start = 1;
+    const end = count - Math.max(0, tailItems);
+    return end - start < MIN_COLLAPSED_ITEMS ? null : { start, end };
+}
+export function collapseMiddleItems(items, collapsedItem, tailItems = 2) {
+    const range = collapsedRange(items.length, tailItems);
+    const root = items[0];
+    if (!range || root === undefined)
+        return [...items];
+    return [root, collapsedItem, ...items.slice(range.end)];
+}
+export function collapsedMiddleItems(items, tailItems = 2) {
+    const range = collapsedRange(items.length, tailItems);
+    return range ? items.slice(range.start, range.end) : [];
+}

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface DetailNavBarLabels {
+    breadcrumb: string;
+    back?: string;
+    previous: string;
+    next: string;
+}
+export interface DetailNavBarCrumb {
+    label: ReactNode;
+    icon?: ReactNode;
+}
+export interface DetailNavBarProps {
+    labels: DetailNavBarLabels;
+    origin?: DetailNavBarCrumb & {
+        onSelect?: () => void;
+    };
+    current: DetailNavBarCrumb;
+    position?: ReactNode;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    canGoPrevious?: boolean;
+    canGoNext?: boolean;
+    actions?: ReactNode;
+    chromeFont?: string;
+    className?: string;
+    dataTestId?: string;
+}
+export declare function DetailNavBar({ labels, origin, current, position, onPrevious, onNext, canGoPrevious, canGoNext, actions, chromeFont, className, dataTestId, }: DetailNavBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronUp } from 'lucide-react';
+import { DetailBreadcrumb, DetailTopBar } from './detail-top-bar.js';
+import { IconButton } from './icon-button.js';
+export function DetailNavBar({ labels, origin, current, position, onPrevious, onNext, canGoPrevious = false, canGoNext = false, actions, chromeFont, className, dataTestId = 'detail-nav-bar', }) {
+    const items = [];
+    if (origin) {
+        const goesBack = Boolean(origin.onSelect);
+        items.push({
+            id: 'origin',
+            label: origin.label,
+            icon: goesBack ? _jsx(ChevronLeft, { className: "size-3.5 shrink-0", "aria-hidden": true }) : origin.icon,
+            onSelect: origin.onSelect,
+            ariaLabel: goesBack ? labels.back : undefined,
+            title: goesBack ? labels.back : undefined,
+        });
+    }
+    items.push({
+        id: 'current',
+        label: current.label,
+        icon: current.icon,
+        current: true,
+        className: 'font-normal',
+    });
+    const navigable = Boolean(onPrevious || onNext);
+    return (_jsx(DetailTopBar, { chromeFont: chromeFont, className: className, dataTestId: dataTestId, trail: _jsx(DetailBreadcrumb, { ariaLabel: labels.breadcrumb, items: items }), actions: _jsxs(_Fragment, { children: [actions, position ? (_jsx("span", { className: "text-muted-foreground/70 min-w-12 px-1 text-center font-mono text-[11px] tabular-nums", "data-testid": "detail-nav-position", children: position })) : null, navigable ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { tooltip: labels.previous, "aria-label": labels.previous, disabled: !canGoPrevious, onClick: onPrevious, "data-testid": "detail-nav-previous", children: _jsx(ChevronUp, {}) }), _jsx(IconButton, { tooltip: labels.next, "aria-label": labels.next, disabled: !canGoNext, onClick: onNext, "data-testid": "detail-nav-next", children: _jsx(ChevronDown, {}) })] })) : null] }) }));
+}