@atmos.build/ui 0.1.0

package/dist/components/form-dialog.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Button } from './button.js';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog.js';
+import { Kbd } from './kbd.js';
+import { Label } from './label.js';
+import { Switch } from './switch.js';
+import { cn } from '../lib/cn.js';
+export function FormDialog({ open, onOpenChange, title, description, onSubmit, submitLabel, labels, submitting = false, canSubmit = true, hideSubmit = false, footerLeft, children, contentClassName, 'data-testid': testId, }) {
+    const submitRef = useRef(() => undefined);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        submitRef.current = () => {
+            if (submitting || !canSubmit)
+                return;
+            onSubmit();
+        };
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.isComposing)
+                return;
+            if (e.key !== 'Enter' || (!e.metaKey && !e.ctrlKey) || e.shiftKey || e.altKey)
+                return;
+            const openDialogs = document.querySelectorAll('[data-atmos-form-dialog][data-state="open"]');
+            if (openDialogs.item(openDialogs.length - 1) !== contentRef.current)
+                return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            submitRef.current();
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [open]);
+    const onBodyKeyDown = (e) => {
+        if (e.key !== 'Enter' || e.shiftKey || e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        const target = e.target;
+        if (target.tagName === 'INPUT') {
+            e.preventDefault();
+            submitRef.current();
+        }
+    };
+    const submitDisabled = submitting || !canSubmit;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { ref: contentRef, "data-atmos-form-dialog": true, "data-testid": testId, closeLabel: labels.close, className: cn('gap-0 overflow-visible p-0', contentClassName ?? 'sm:max-w-[520px]'), children: [_jsxs("div", { className: "px-5 pt-4 pb-3", children: [_jsx(DialogTitle, { className: "font-heading text-[15px] leading-none font-medium", children: title }), description ? (_jsx(DialogDescription, { className: "text-muted-foreground mt-1 text-[12px]", children: description })) : (_jsx(DialogDescription, { className: "sr-only", children: title }))] }), _jsx("div", { className: "bg-border/60 h-px" }), _jsx("div", { className: "max-h-[60vh] overflow-y-auto px-5 py-4", role: "presentation", onKeyDown: onBodyKeyDown, children: children }), _jsx("div", { className: "bg-border/60 h-px" }), _jsxs("div", { className: "bg-muted/25 flex items-center gap-3 px-5 py-3", children: [footerLeft ? _jsx("div", { className: "flex items-center gap-2", children: footerLeft }) : null, _jsx("div", { className: "ml-auto flex items-center gap-2", children: hideSubmit ? (_jsx(Button, { size: "sm", onClick: () => onOpenChange(false), children: labels.close })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: labels.cancel }), _jsxs(Button, { size: "sm", onClick: () => submitRef.current(), disabled: submitDisabled, className: "gap-2", "data-testid": "form-dialog-submit", children: [submitting ? labels.saving : submitLabel, _jsx(Kbd, { className: "bg-primary-foreground/15 text-primary-foreground/90", children: "\u2318\u21B5" })] })] })) })] })] }) }));
+}
+export function FormDialogCreateMoreToggle({ checked, onCheckedChange, label, id = 'form-create-more', }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Switch, { id: id, size: "sm", checked: checked, onCheckedChange: onCheckedChange }), _jsx(Label, { htmlFor: id, className: "text-muted-foreground/90 cursor-pointer text-[11.5px]", children: label })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface FormulaEditorField {
+    slug: string;
+    name: string;
+    type: string;
+}
+export interface FormulaEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    fields: FormulaEditorField[];
+    ariaLabel: string;
+    placeholder: string;
+    fieldDetail: string;
+    operatorDetail: string;
+    functionDetail: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare function FormulaEditor({ value, onChange, fields, ariaLabel, placeholder, fieldDetail, operatorDetail, functionDetail, className, 'data-testid': testId, }: FormulaEditorProps): import("react").JSX.Element;

package/dist/components/formula-editor.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { autocompletion, moveCompletionSelection } from '@codemirror/autocomplete';
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { Prec } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { tags } from '@lezer/highlight';
+import { cn } from '../lib/cn.js';
+const functions = [
+    ['sum', 'sum(a, b)'],
+    ['avg', 'avg(a, b)'],
+    ['mean', 'mean(a, b)'],
+    ['min', 'min(a, b)'],
+    ['max', 'max(a, b)'],
+    ['count', 'count(a, b)'],
+    ['abs', 'abs(a)'],
+    ['round', 'round(a, digits)'],
+];
+const language = StreamLanguage.define({
+    token(stream) {
+        if (stream.match(/[0-9]+(?:\.[0-9]+)?/))
+            return 'number';
+        if (stream.match(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/))
+            return 'string';
+        if (stream.match(/(?:sum|avg|mean|min|max|count|abs|round)\b/i))
+            return 'keyword';
+        if (stream.match(/[A-Za-z_][A-Za-z0-9_]*/))
+            return 'variableName';
+        if (stream.match(/[+\-*/(),]/))
+            return 'operator';
+        stream.next();
+        return null;
+    },
+});
+const highlighting = HighlightStyle.define([
+    {
+        tag: [tags.keyword, tags.function(tags.variableName)],
+        color: 'var(--cm-function)',
+        fontWeight: '600',
+    },
+    { tag: tags.number, color: 'var(--cm-number)' },
+    { tag: [tags.string, tags.special(tags.string)], color: 'var(--cm-string)' },
+    { tag: [tags.variableName, tags.name], color: 'var(--cm-name)', fontWeight: '600' },
+    {
+        tag: [tags.operator, tags.punctuation, tags.separator, tags.paren],
+        color: 'var(--cm-operator)',
+    },
+]);
+const theme = EditorView.theme({
+    '&': {
+        color: 'var(--popover-foreground)',
+        backgroundColor: 'transparent',
+        fontSize: '12.5px',
+        minHeight: '84px',
+    },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': { fontFamily: 'var(--font-mono, ui-monospace, monospace)', lineHeight: '1.55' },
+    '.cm-content': { caretColor: 'var(--foreground)', minHeight: '84px', padding: '8px 10px' },
+    '.cm-placeholder': { color: 'var(--muted-foreground)' },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--foreground)' },
+    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: 'color-mix(in oklch, var(--primary) 22%, transparent)',
+    },
+    '.cm-activeLine': { backgroundColor: 'color-mix(in oklch, var(--muted) 42%, transparent)' },
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        backgroundColor: 'var(--popover)',
+        color: 'var(--popover-foreground)',
+        boxShadow: '0 12px 32px -12px rgb(0 0 0 / 0.28)',
+        padding: '4px',
+        overflow: 'hidden',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+        fontFamily: 'inherit',
+        fontSize: '12.5px',
+        maxHeight: '15rem',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '7px',
+        padding: '4px 8px',
+        borderRadius: 'var(--radius-sm)',
+        color: 'var(--popover-foreground)',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+        backgroundColor: 'var(--accent)',
+        color: 'var(--accent-foreground)',
+    },
+    '.cm-completionMatchedText': { textDecoration: 'none', fontWeight: '600', color: 'inherit' },
+    '.cm-completionDetail': {
+        marginLeft: 'auto',
+        fontStyle: 'normal',
+        fontFamily: 'var(--font-mono)',
+        fontSize: '10.5px',
+        color: 'var(--muted-foreground)',
+    },
+});
+const completionKeys = Prec.high(keymap.of([
+    { key: 'Ctrl-n', run: moveCompletionSelection(true) },
+    { key: 'Ctrl-p', run: moveCompletionSelection(false) },
+]));
+export function FormulaEditor({ value, onChange, fields, ariaLabel, placeholder, fieldDetail, operatorDetail, functionDetail, className, 'data-testid': testId, }) {
+    const extensions = useMemo(() => {
+        const options = [
+            ...functions.map(([label, info]) => ({
+                label,
+                apply: `${label}()`,
+                info,
+                type: 'function',
+                detail: functionDetail,
+            })),
+            ...fields.map((field) => ({
+                label: field.slug,
+                type: 'property',
+                detail: field.name || fieldDetail,
+                info: field.type,
+            })),
+            ...['+', '-', '*', '/', '(', ')'].map((label) => ({
+                label,
+                type: 'operator',
+                detail: operatorDetail,
+            })),
+        ];
+        return [
+            language,
+            syntaxHighlighting(highlighting),
+            completionKeys,
+            EditorView.lineWrapping,
+            EditorView.contentAttributes.of({ 'aria-label': ariaLabel }),
+            autocompletion({
+                icons: true,
+                override: [
+                    (context) => {
+                        const word = context.matchBefore(/[A-Za-z0-9_+\-*/()]*/);
+                        if (!word || (word.from === word.to && !context.explicit))
+                            return null;
+                        return { from: word.from, options, validFor: /^[A-Za-z0-9_+\-*/()]*$/ };
+                    },
+                ],
+            }),
+            theme,
+        ];
+    }, [ariaLabel, fieldDetail, fields, functionDetail, operatorDetail]);
+    return (_jsx("div", { "data-slot": "formula-editor", "data-testid": testId, className: cn('border-input bg-background focus-within:border-ring focus-within:ring-ring/50 overflow-hidden rounded-lg border focus-within:ring-3', className), children: _jsx(CodeMirror, { value: value, onChange: onChange, extensions: extensions, placeholder: placeholder, theme: "none", basicSetup: {
+                lineNumbers: false,
+                foldGutter: false,
+                autocompletion: false,
+                highlightActiveLineGutter: false,
+            }, "aria-label": ariaLabel }) }));
+}

package/dist/components/hover-card.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
+/**
+ * Always a `group/hover-card`, so anything inside the trigger can react to the card
+ * being open — a sidebar row staying lit while its card shows, for instance.
+ */
+declare function HoverCardTrigger({ className, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
+/**
+ * Defaults to the right of its trigger and flips to whichever side has room, so the
+ * same card works against a left rail, a right inspector, or a viewport edge.
+ *
+ * Sized to its longest row rather than to a column width: a card of short values reads
+ * as a small label beside the thing it describes instead of a mostly-empty panel. The
+ * floor only keeps a one-word card from being narrower than the eye reads as a card,
+ * and the ceiling is where a long value starts wrapping instead of pushing on.
+ */
+declare function HoverCardContent({ className, side, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
+export interface HoverCardHeaderProps extends React.ComponentProps<'div'> {
+    icon?: React.ReactNode;
+    /**
+     * A second line under the title — who owns the thing and how it stands. The icon
+     * grows to an avatar and centres across both lines, so one mark identifies the pair
+     * rather than each line carrying its own.
+     */
+    subtitle?: React.ReactNode;
+    /** Trailing slot for a single affordance — the pin toggle in the reference design. */
+    action?: React.ReactNode;
+}
+declare function HoverCardHeader({ className, icon, subtitle, action, children, ...props }: HoverCardHeaderProps): React.JSX.Element;
+export interface HoverCardMetaProps extends React.ComponentProps<'div'> {
+    icon?: React.ReactNode;
+    /** Metadata the design system sets in Geist Mono — paths, ids, versions. */
+    mono?: boolean;
+    /**
+     * Let a long value wrap onto further lines instead of truncating. A file path is
+     * only useful whole, so the card grows rather than hiding where the work happens.
+     */
+    wrap?: boolean;
+}
+declare function HoverCardMeta({ className, icon, mono, wrap, children, ...props }: HoverCardMetaProps): React.JSX.Element;
+/**
+ * Padded slot for content that is not a row — a meter, a chart, a short paragraph —
+ * so it lines up with the rows above it without every consumer re-deriving the inset.
+ */
+declare function HoverCardBlock({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function HoverCardSeparator({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export interface HoverCardActionProps extends React.ComponentProps<'button'> {
+    icon?: React.ReactNode;
+}
+declare function HoverCardAction({ className, icon, children, ...props }: HoverCardActionProps): React.JSX.Element;
+export { HoverCard, HoverCardAction, HoverCardBlock, HoverCardContent, HoverCardHeader, HoverCardMeta, HoverCardSeparator, HoverCardTrigger, };

package/dist/components/hover-card.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import { cn } from '../lib/cn.js';
+function HoverCard({ openDelay = 320, closeDelay = 120, ...props }) {
+    return (_jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", openDelay: openDelay, closeDelay: closeDelay, ...props }));
+}
+/**
+ * Always a `group/hover-card`, so anything inside the trigger can react to the card
+ * being open — a sidebar row staying lit while its card shows, for instance.
+ */
+function HoverCardTrigger({ className, ...props }) {
+    return (_jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", className: cn('group/hover-card', className), ...props }));
+}
+/**
+ * Defaults to the right of its trigger and flips to whichever side has room, so the
+ * same card works against a left rail, a right inspector, or a viewport edge.
+ *
+ * Sized to its longest row rather than to a column width: a card of short values reads
+ * as a small label beside the thing it describes instead of a mostly-empty panel. The
+ * floor only keeps a one-word card from being narrower than the eye reads as a card,
+ * and the ceiling is where a long value starts wrapping instead of pushing on.
+ */
+function HoverCardContent({ className, side = 'right', align = 'start', sideOffset = 4, collisionPadding = 8, ...props }) {
+    return (_jsx(HoverCardPrimitive.Portal, { children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, 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 flex w-max max-w-[26rem] min-w-36 origin-(--radix-hover-card-content-transform-origin) flex-col gap-px rounded-lg p-1 shadow-md ring-1 outline-hidden duration-100', className), ...props }) }));
+}
+const rowClassName = 'flex min-h-7 w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-[12.5px] [&_svg]:size-3.5 [&_svg]:shrink-0';
+function HoverCardIcon({ className, children }) {
+    return (_jsx("span", { "data-slot": "hover-card-icon", className: cn('text-muted-foreground/80 inline-flex size-3.5 shrink-0 items-center justify-center', className), "aria-hidden": true, children: children }));
+}
+function HoverCardHeader({ className, icon, subtitle, action, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "hover-card-header", className: cn(rowClassName, subtitle && 'gap-2.5', className), ...props, children: [icon ? (_jsx(HoverCardIcon, { className: subtitle ? 'size-7' : undefined, children: icon })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate font-medium", children: children }), subtitle ? (_jsx("span", { className: "text-muted-foreground block truncate text-[11.5px]", children: subtitle })) : null] }), action ? _jsx("span", { className: "ml-auto shrink-0", children: action }) : null] }));
+}
+function HoverCardMeta({ className, icon, mono, wrap, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "hover-card-meta", className: cn(rowClassName, 'text-muted-foreground', wrap && 'items-start', className), ...props, children: [icon ? _jsx(HoverCardIcon, { className: wrap ? 'mt-0.5' : undefined, children: icon }) : null, _jsx("span", { className: cn('min-w-0 flex-1', wrap ? 'break-all whitespace-normal' : 'truncate', mono && 'font-mono text-[11.5px]'), children: children })] }));
+}
+/**
+ * Padded slot for content that is not a row — a meter, a chart, a short paragraph —
+ * so it lines up with the rows above it without every consumer re-deriving the inset.
+ */
+function HoverCardBlock({ className, ...props }) {
+    return _jsx("div", { "data-slot": "hover-card-block", className: cn('px-1.5 py-1.5', className), ...props });
+}
+function HoverCardSeparator({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "hover-card-separator", role: "separator", className: cn('bg-border/60 my-1 h-px w-full shrink-0', className), ...props }));
+}
+function HoverCardAction({ className, icon, children, ...props }) {
+    return (_jsxs("button", { "data-slot": "hover-card-action", type: "button", className: cn(rowClassName, 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 cursor-pointer outline-hidden transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50', className), ...props, children: [icon ? _jsx(HoverCardIcon, { children: icon }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: children })] }));
+}
+export { HoverCard, HoverCardAction, HoverCardBlock, HoverCardContent, HoverCardHeader, HoverCardMeta, HoverCardSeparator, HoverCardTrigger, };

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

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+type IconButtonSize = 'xs' | 'sm' | 'md' | 'card';
+type IconButtonTone = 'muted' | 'danger';
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: IconButtonSize;
+    tone?: IconButtonTone;
+    reveal?: boolean;
+    tooltip?: ReactNode;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** Takes the tooltip over from hover — a press closes an uncontrolled one. */
+    tooltipOpen?: boolean;
+    onTooltipOpenChange?: (open: boolean) => void;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/icon-button.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button } from './button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+import { cn } from '../lib/cn.js';
+const sizeMap = { xs: 'icon-xs', sm: 'icon-sm', md: 'icon', card: 'icon-xs' };
+const toneClass = {
+    muted: 'hover:bg-muted/50 hover:text-foreground',
+    danger: 'hover:bg-destructive/10 hover:text-destructive',
+};
+export const IconButton = forwardRef(function IconButton({ size = 'sm', tone = 'muted', reveal = false, tooltip, tooltipSide = 'top', tooltipOpen, onTooltipOpenChange, className, type = 'button', ...props }, ref) {
+    const button = (_jsx(Button, { ref: ref, type: type, variant: "ghost", size: sizeMap[size], className: cn('text-muted-foreground/70', toneClass[tone], size === 'card' && 'size-6 rounded-md hover:bg-muted/70', reveal &&
+            'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100', className), ...props }));
+    if (tooltip == null)
+        return button;
+    return (_jsxs(Tooltip, { open: tooltipOpen, onOpenChange: onTooltipOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { variant: "compact", side: tooltipSide, children: tooltip })] }));
+});

package/dist/components/inline-alert.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type InlineAlertTone = 'error' | 'warning' | 'info';
+export interface InlineAlertProps {
+    tone?: InlineAlertTone;
+    children: ReactNode;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    className?: string;
+}
+export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, }: InlineAlertProps): import("react").JSX.Element;
+export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): import("react").JSX.Element;

package/dist/components/inline-alert.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Info, X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+const toneClass = {
+    error: 'border-destructive/30 bg-destructive/10 text-destructive',
+    warning: 'border-warning/30 bg-warning/15 text-warning',
+    info: 'border-info/30 bg-info/15 text-info',
+};
+export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, }) {
+    const Icon = tone === 'info' ? Info : AlertTriangle;
+    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
+}
+export function InlineNotice({ tone = 'info', children, className, }) {
+    return (_jsx(InlineAlert, { tone: tone, className: className, children: children }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from '../lib/cn.js';
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Input };

package/dist/components/kanban-board.d.ts

@@ -0,0 +1,27 @@
+import '../lib/react-19-jsx.js';
+import type { ReactNode } from 'react';
+import { type DragHandleProps } from './sortable.js';
+export interface KanbanColumn {
+    id: string;
+    title: string;
+}
+export interface KanbanCardRenderArgs {
+    isDragging: boolean;
+    dragHandleProps: DragHandleProps;
+}
+export interface KanbanColumnRenderArgs {
+    children: ReactNode;
+    isOver: boolean;
+}
+export interface KanbanBoardProps<T> {
+    columns: KanbanColumn[];
+    items: T[];
+    keyOf: (item: T) => string;
+    columnOf: (item: T) => string;
+    onMove: (itemId: string, toColumnId: string, toIndex: number) => void;
+    renderColumn: (column: KanbanColumn, args: KanbanColumnRenderArgs) => ReactNode;
+    renderCard: (item: T, args: KanbanCardRenderArgs) => ReactNode;
+    collisionStrategy?: 'kanban';
+    className?: string;
+}
+export declare function KanbanBoard<T>({ columns, items, keyOf, columnOf, onMove, renderColumn, renderCard, className, }: KanbanBoardProps<T>): import("react").JSX.Element;

package/dist/components/kanban-board.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../lib/react-19-jsx.js';
+import { useCallback, useMemo, useState } from 'react';
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DragPreview } from './sortable.js';
+const CARD_PREFIX = 'kcard::';
+const COLUMN_PREFIX = 'kcol::';
+function makeCardId(columnId, itemId) {
+    return `${CARD_PREFIX}${columnId}::${itemId}`;
+}
+function parseCardId(raw) {
+    if (!raw.startsWith(CARD_PREFIX))
+        return null;
+    const rest = raw.slice(CARD_PREFIX.length);
+    const separator = rest.lastIndexOf('::');
+    if (separator < 0)
+        return null;
+    return {
+        columnId: rest.slice(0, separator),
+        itemId: rest.slice(separator + 2),
+    };
+}
+function makeColumnId(columnId) {
+    return `${COLUMN_PREFIX}${columnId}`;
+}
+function parseColumnId(raw) {
+    return raw.startsWith(COLUMN_PREFIX) ? raw.slice(COLUMN_PREFIX.length) : null;
+}
+export function KanbanBoard({ columns, items, keyOf, columnOf, onMove, renderColumn, renderCard, className, }) {
+    const [activeCardId, setActiveCardId] = useState(null);
+    const [overColumnId, setOverColumnId] = useState(null);
+    const itemsByColumn = useMemo(() => {
+        const map = new Map();
+        for (const column of columns)
+            map.set(column.id, []);
+        for (const item of items) {
+            const columnId = columnOf(item);
+            const list = map.get(columnId);
+            if (list)
+                list.push(item);
+            else
+                map.set(columnId, [item]);
+        }
+        return map;
+    }, [columns, items, columnOf]);
+    const itemsById = useMemo(() => {
+        const map = new Map();
+        for (const item of items)
+            map.set(keyOf(item), item);
+        return map;
+    }, [items, keyOf]);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const collisionDetection = useCallback((args) => {
+        const pointerHits = pointerWithin(args);
+        if (pointerHits.length > 0) {
+            const column = pointerHits.find((hit) => String(hit.id).startsWith(COLUMN_PREFIX));
+            return column ? [column] : pointerHits;
+        }
+        const intersections = rectIntersection(args);
+        if (intersections.length > 0)
+            return intersections;
+        return closestCenter(args);
+    }, []);
+    function handleStart(event) {
+        setActiveCardId(String(event.active.id));
+    }
+    function handleOver(event) {
+        const { over } = event;
+        if (!over) {
+            setOverColumnId(null);
+            return;
+        }
+        const overId = String(over.id);
+        const columnId = parseColumnId(overId);
+        if (columnId) {
+            setOverColumnId(columnId);
+            return;
+        }
+        const card = parseCardId(overId);
+        setOverColumnId(card ? card.columnId : null);
+    }
+    function handleEnd(event) {
+        setActiveCardId(null);
+        setOverColumnId(null);
+        const { active, over } = event;
+        if (!over)
+            return;
+        const activeId = String(active.id);
+        const overId = String(over.id);
+        const parsed = parseCardId(activeId);
+        if (!parsed)
+            return;
+        let targetColumnId = parseColumnId(overId);
+        let overItemId = null;
+        if (!targetColumnId) {
+            const overCard = parseCardId(overId);
+            if (overCard) {
+                targetColumnId = overCard.columnId;
+                overItemId = overCard.itemId;
+            }
+        }
+        if (!targetColumnId)
+            return;
+        const targetList = (itemsByColumn.get(targetColumnId) ?? []).filter((item) => keyOf(item) !== parsed.itemId);
+        let toIndex;
+        if (overItemId && overItemId !== parsed.itemId) {
+            const overIndex = targetList.findIndex((item) => keyOf(item) === overItemId);
+            toIndex = overIndex < 0 ? targetList.length : overIndex;
+        }
+        else {
+            toIndex = targetList.length;
+        }
+        if (targetColumnId === parsed.columnId && activeId === overId)
+            return;
+        onMove(parsed.itemId, targetColumnId, toIndex);
+    }
+    const activeItemId = activeCardId ? (parseCardId(activeCardId)?.itemId ?? null) : null;
+    const activeItem = activeItemId ? (itemsById.get(activeItemId) ?? null) : null;
+    return (_jsx("div", { "data-slot": "kanban-board", className: className ?? 'min-h-0 flex-1 overflow-x-auto overflow-y-hidden', children: _jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: handleStart, onDragOver: handleOver, onDragEnd: handleEnd, onDragCancel: () => {
+                setActiveCardId(null);
+                setOverColumnId(null);
+            }, children: [_jsx("div", { className: "flex h-full min-w-max gap-3", children: columns.map((column) => {
+                        const columnItems = itemsByColumn.get(column.id) ?? [];
+                        return (_jsx(KanbanColumnDroppable, { column: column, isOver: overColumnId === column.id, renderColumn: renderColumn, children: _jsx(SortableContext, { items: columnItems.map((item) => makeCardId(column.id, keyOf(item))), strategy: verticalListSortingStrategy, children: columnItems.map((item) => (_jsx(KanbanCard, { id: makeCardId(column.id, keyOf(item)), item: item, renderCard: renderCard }, keyOf(item)))) }) }, column.id));
+                    }) }), _jsx(DragPreview, { children: activeItem ? renderCard(activeItem, { isDragging: true, dragHandleProps: {} }) : null })] }) }));
+}
+function KanbanColumnDroppable({ column, isOver: isOverColumn, renderColumn, children, }) {
+    const { setNodeRef, isOver } = useDroppable({ id: makeColumnId(column.id) });
+    return (_jsx("div", { ref: setNodeRef, className: "flex h-full flex-col", children: renderColumn(column, { children, isOver: isOver || isOverColumn }) }));
+}
+function KanbanCard({ id, item, renderCard, }) {
+    const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+        id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : 1,
+    };
+    const dragHandleProps = { ...attributes, ...listeners };
+    return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, "aria-roledescription": "draggable card", children: renderCard(item, { isDragging, dragHandleProps }) }));
+}

package/dist/components/kbd.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+export declare function Kbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
+export declare function KbdGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/components/kbd.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+export function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*="size-"])]:size-3', className), ...props }));
+}
+export function KbdGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-1', className), ...props });
+}

package/dist/components/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from '../lib/cn.js';
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+export { Label };

package/dist/components/markdown-editor/index.d.ts

@@ -0,0 +1,4 @@
+export { MarkdownEditor, markdownToHtml, serializeMarkdown } from './markdown-editor.js';
+export type { MarkdownEditorProps } from './markdown-editor.js';
+export { VimExtension, type VimExtensionOptions, type VimMode } from './vim.js';
+export type { TiptapNode } from './serialize.js';

package/dist/components/markdown-editor/index.js

@@ -0,0 +1,2 @@
+export { MarkdownEditor, markdownToHtml, serializeMarkdown } from './markdown-editor.js';
+export { VimExtension } from './vim.js';