@asharca/ui 0.1.0

package/dist/ConversationSidebar.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import { Bot, ChevronRight, MessageSquare, Pencil, Plus, Trash2, } from 'lucide-react';
+import { IconButton, SearchInput } from "./Controls.js";
+import { SidebarActionRail } from "./Sidebar.js";
+export const conversationSidebarDefaultLabels = {
+    groups: 'Assistants',
+    searchPlaceholder: 'Search assistants and conversations',
+    clearSearch: 'Clear search',
+    newGroup: 'New assistant',
+    newConversation: 'New conversation',
+    untitledConversation: 'New conversation',
+    noGroups: 'No assistants yet.',
+    noConversations: 'No conversations yet.',
+    noResults: 'No matching assistants or conversations.',
+    renameConversation: 'Rename conversation',
+    deleteConversation: 'Delete conversation',
+    showConversations: 'Show conversations',
+    hideConversations: 'Hide conversations',
+};
+function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export function ConversationSidebar({ groups, activeGroupId, activeConversationId, labels: labelsOverride, className, onSelectGroup, onSelectConversation, onCreateGroup, onCreateConversation, onRenameConversation, onDeleteConversation, }) {
+    const labels = Object.assign(Object.assign({}, conversationSidebarDefaultLabels), labelsOverride);
+    const controlsId = useId();
+    const [query, setQuery] = useState('');
+    const [collapsedGroupIds, setCollapsedGroupIds] = useState(() => new Set());
+    const needle = query.trim().toLocaleLowerCase();
+    const visibleGroups = useMemo(() => groups.flatMap((group) => {
+        if (!needle)
+            return [{ group, conversations: group.conversations }];
+        if (group.name.toLocaleLowerCase().includes(needle)) {
+            return [{ group, conversations: group.conversations }];
+        }
+        const conversations = group.conversations.filter((conversation) => ((conversation.title || labels.untitledConversation).toLocaleLowerCase().includes(needle)));
+        return conversations.length ? [{ group, conversations }] : [];
+    }), [groups, labels.untitledConversation, needle]);
+    function toggleGroup(groupId) {
+        setCollapsedGroupIds((current) => {
+            const next = new Set(current);
+            if (next.has(groupId))
+                next.delete(groupId);
+            else
+                next.add(groupId);
+            return next;
+        });
+    }
+    return (_jsxs("aside", { "aria-label": labels.groups, "data-chat-ui": "conversation-sidebar", className: cx('flex h-full min-h-0 flex-col overflow-hidden bg-background p-1.5 text-foreground', className), children: [_jsx("div", { className: "shrink-0 px-0.5", children: _jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery(''), label: labels.searchPlaceholder, clearLabel: labels.clearSearch, placeholder: labels.searchPlaceholder, controlSize: "sm", "data-chat-ui": "sidebar-search", className: "h-7 rounded-full border-0 bg-muted/70 text-[11px] focus:ring-1 focus:ring-brand/35" }) }), _jsxs("div", { className: "mt-2 min-h-0 flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex h-8 items-center justify-between px-2.5", children: [_jsx("p", { className: "truncate text-xs font-medium text-muted-foreground", children: labels.groups }), onCreateGroup ? (_jsx(IconButton, { icon: _jsx(Plus, { className: "size-3.5" }), label: labels.newGroup, size: "sm", variant: "ghost", onClick: onCreateGroup, className: "min-h-6 w-6 shrink-0 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground" })) : null] }), _jsx("ul", { children: visibleGroups.map(({ group, conversations }, index) => {
+                            const expanded = Boolean(needle) || !collapsedGroupIds.has(group.id);
+                            const groupControlsId = `${controlsId}-group-${index}`;
+                            const selectedGroup = group.id === activeGroupId
+                                || group.conversations.some((conversation) => conversation.id === activeConversationId);
+                            const groupIdentity = (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-background text-muted-foreground", children: _jsx(Bot, { className: "size-3.5" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: group.name })] }));
+                            return (_jsxs("li", { className: "py-0.5", "data-chat-ui": "sidebar-group", children: [_jsxs("div", { className: cx('group group/sidebar-group flex h-8 min-w-0 items-center gap-1.5 rounded-lg px-1.5 transition-colors', selectedGroup
+                                            ? 'bg-muted text-foreground'
+                                            : 'text-foreground/80 hover:bg-muted/60 hover:text-foreground'), children: [onSelectGroup ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onSelectGroup(group), "aria-current": group.id === activeGroupId ? 'page' : undefined, className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 text-left text-[13px]", children: groupIdentity }), _jsx(IconButton, { icon: _jsx(ChevronRight, { className: cx('size-3.5 transition-transform', expanded && 'rotate-90') }), label: `${expanded ? labels.hideConversations : labels.showConversations}: ${group.name}`, size: "sm", variant: "ghost", "aria-expanded": expanded, "aria-controls": groupControlsId, onClick: () => toggleGroup(group.id), className: "-ml-1.5 hidden min-h-6 w-6 shrink-0 rounded-md text-muted-foreground group-hover:flex group-has-[:focus-visible]:flex group-has-data-[state=open]:flex hover:bg-background hover:text-foreground" })] })) : (_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": groupControlsId, onClick: () => toggleGroup(group.id), className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 text-left text-[13px]", children: [groupIdentity, _jsx("span", { "aria-hidden": "true", className: "-ml-1.5 hidden size-6 shrink-0 items-center justify-center text-muted-foreground group-hover:flex group-has-[:focus-visible]:flex group-has-data-[state=open]:flex", children: _jsx(ChevronRight, { className: cx('size-3.5 transition-transform', expanded && 'rotate-90') }) })] })), onCreateConversation ? (_jsx(SidebarActionRail, { hasLeadingSlot: true, revealOnCellFocus: true, children: _jsx(IconButton, { icon: _jsx(Plus, { className: "size-3.5" }), label: `${labels.newConversation}: ${group.name}`, size: "sm", variant: "ghost", onClick: () => onCreateConversation(group), title: labels.newConversation, className: "min-h-6 w-6 shrink-0 rounded-md text-muted-foreground hover:bg-background hover:text-foreground" }) })) : null] }), expanded ? (_jsx("ul", { id: groupControlsId, className: "ml-4 py-0.5 pl-1", children: conversations.length ? conversations.map((conversation) => {
+                                            const title = conversation.title || labels.untitledConversation;
+                                            const selected = conversation.id === activeConversationId;
+                                            const hasActions = Boolean(onRenameConversation || onDeleteConversation);
+                                            return (_jsx("li", { className: "relative py-0.5", "data-chat-ui": "sidebar-conversation", children: _jsxs("div", { className: cx('group group/sidebar-conversation flex h-8 min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors', selected
+                                                        ? 'bg-muted font-medium text-foreground'
+                                                        : 'text-foreground/75 hover:bg-muted/60 hover:text-foreground'), children: [_jsxs("button", { type: "button", disabled: conversation.disabled, onClick: () => onSelectConversation(conversation, group), "aria-current": selected ? 'page' : undefined, title: title, className: "flex h-full min-w-0 flex-1 items-center gap-1.5 text-left text-[13px] disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(MessageSquare, { className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), conversation.meta ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0", children: conversation.meta })) : null] }), hasActions ? (_jsxs(SidebarActionRail, { active: conversation.deleting, children: [onRenameConversation ? (_jsx(IconButton, { icon: _jsx(Pencil, { className: "size-3" }), label: `${labels.renameConversation}: ${title}`, size: "sm", variant: "ghost", onClick: () => onRenameConversation(conversation, group), title: labels.renameConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-foreground" })) : null, onDeleteConversation ? (_jsx(IconButton, { icon: _jsx(Trash2, { className: "size-3" }), label: `${labels.deleteConversation}: ${title}`, size: "sm", variant: "ghost", loading: conversation.deleting, disabled: conversation.deleting, onClick: () => onDeleteConversation(conversation, group), title: labels.deleteConversation, className: "min-h-6 w-6 rounded-md text-muted-foreground hover:bg-background hover:text-destructive" })) : null] })) : null] }) }, conversation.id));
+                                        }) : (_jsx("li", { className: "flex h-8 items-center px-2 text-xs text-muted-foreground", children: labels.noConversations })) })) : null] }, group.id));
+                        }) }), !visibleGroups.length ? (_jsx("p", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: needle ? labels.noResults : labels.noGroups })) : null] })] }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,9 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: import("react").FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/Dialog.js

@@ -0,0 +1,35 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogOverlay = forwardRef(function DialogOverlay(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "dialog-overlay", className: `fixed inset-0 z-50 bg-black/50 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const DialogContent = forwardRef(function DialogContent(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Content, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "dialog-content", className: `fixed inset-x-4 top-1/2 z-50 grid max-h-[calc(100dvh-2rem)] -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border bg-card p-5 text-card-foreground shadow-xl sm:left-1/2 sm:right-auto sm:w-full sm:max-w-lg sm:-translate-x-1/2 sm:p-6 ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const DialogTitle = forwardRef(function DialogTitle(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Title, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "dialog-title", className: `text-lg font-semibold leading-none tracking-tight ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});
+export const DialogDescription = forwardRef(function DialogDescription(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Description, Object.assign({}, props, { ref: ref, "data-toolplane-ui": "dialog-description", className: `text-sm text-muted-foreground ${className !== null && className !== void 0 ? className : ''}`.trim() })));
+});

package/dist/Feedback.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type FeedbackTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+export type BadgeProps = ComponentPropsWithoutRef<'span'> & {
+    tone?: FeedbackTone;
+};
+export declare function Badge({ className, tone, ...props }: BadgeProps): import("react").JSX.Element;
+export type StatusBadgeProps = Omit<BadgeProps, 'children'> & {
+    appearance?: 'badge' | 'plain';
+    dot?: boolean;
+    dotClassName?: string;
+    label: ReactNode;
+};
+export declare function StatusBadge({ appearance, className, dot, dotClassName, label, tone, ...props }: StatusBadgeProps): import("react").JSX.Element;
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+export type AlertProps = ComponentPropsWithoutRef<'div'> & {
+    tone?: AlertTone;
+};
+export declare function Alert({ className, role, tone, ...props }: AlertProps): import("react").JSX.Element;
+export type SpinnerProps = ComponentPropsWithoutRef<'span'> & {
+    label?: string;
+};
+export declare function Spinner({ className, label, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/Feedback.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from 'lucide-react';
+function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+const badgeTones = {
+    neutral: 'bg-muted text-muted-foreground',
+    brand: 'bg-brand-soft text-accent-foreground',
+    success: 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-300',
+    warning: 'bg-amber-500/14 text-amber-700 dark:text-amber-300',
+    danger: 'bg-red-500/12 text-red-700 dark:text-red-300',
+};
+export function Badge(_a) {
+    var { className, tone = 'neutral' } = _a, props = __rest(_a, ["className", "tone"]);
+    return (_jsx("span", Object.assign({ "data-toolplane-ui": "badge", "data-tone": tone }, props, { className: cx('inline-flex min-h-5 items-center gap-1.5 rounded px-2 py-0.5 text-[11px] font-semibold', badgeTones[tone], className) })));
+}
+export function StatusBadge(_a) {
+    var { appearance = 'badge', className, dot = true, dotClassName, label, tone = 'neutral' } = _a, props = __rest(_a, ["appearance", "className", "dot", "dotClassName", "label", "tone"]);
+    if (appearance === 'plain') {
+        return (_jsxs("span", Object.assign({}, props, { "data-toolplane-ui": "status-badge", "data-tone": tone, className: cx('inline-flex items-center gap-2 text-sm text-muted-foreground', className), children: [dot ? _jsx("span", { "aria-hidden": "true", className: cx('size-2 rounded-full bg-current', dotClassName) }) : null, label] })));
+    }
+    return (_jsxs(Badge, Object.assign({}, props, { tone: tone, className: className, "data-toolplane-ui": "status-badge", children: [dot ? _jsx("span", { "aria-hidden": "true", className: cx('size-1.5 rounded-full bg-current', dotClassName) }) : null, label] })));
+}
+const alertTones = {
+    info: 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-200',
+    success: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200',
+    warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200',
+    danger: 'border-red-200 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200',
+};
+export function Alert(_a) {
+    var { className, role, tone = 'info' } = _a, props = __rest(_a, ["className", "role", "tone"]);
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "alert", "data-tone": tone, role: role !== null && role !== void 0 ? role : (tone === 'danger' ? 'alert' : 'status'), className: cx('rounded-md border px-4 py-3 text-sm', alertTones[tone], className) })));
+}
+export function Spinner(_a) {
+    var { className, label } = _a, props = __rest(_a, ["className", "label"]);
+    return (_jsxs("span", Object.assign({}, props, { "data-toolplane-ui": "spinner", role: label ? 'status' : undefined, "aria-hidden": label ? undefined : true, className: cx('inline-flex items-center gap-2', className), children: [_jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }), label ? _jsx("span", { className: "sr-only", children: label }) : null] })));
+}

package/dist/Forms.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+export type SubmitButtonProps = {
+    children?: ReactNode;
+    className?: string;
+    pendingLabel?: string;
+    savedLabel?: string;
+    flash?: boolean;
+    error?: string | boolean | null;
+    disabled?: boolean;
+    ariaLabel?: string;
+    title?: string;
+};
+export declare function SubmitButton({ children, className, pendingLabel, savedLabel, flash, error, disabled, ariaLabel, title, }: SubmitButtonProps): import("react").JSX.Element;
+export type ConfirmSubmitButtonProps = {
+    triggerLabel: ReactNode;
+    triggerAriaLabel?: string;
+    triggerTitle?: string;
+    confirmLabel: ReactNode;
+    cancelLabel: ReactNode;
+    prompt: ReactNode;
+    pendingLabel?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    confirmClassName?: string;
+    cancelClassName?: string;
+    promptClassName?: string;
+};
+export declare function ConfirmSubmitButton({ triggerLabel, triggerAriaLabel, triggerTitle, confirmLabel, cancelLabel, prompt, pendingLabel, disabled, className, triggerClassName, confirmClassName, cancelClassName, promptClassName, }: ConfirmSubmitButtonProps): import("react").JSX.Element;
+export type CopyButtonProps = {
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+    failedLabel?: string;
+    className?: string;
+    iconOnly?: boolean;
+};
+export declare function CopyButton({ text, label, copiedLabel, failedLabel, className, iconOnly, }: CopyButtonProps): import("react").JSX.Element;

package/dist/Forms.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { useFormStatus } from 'react-dom';
+import { Check, Copy, Loader2 } from 'lucide-react';
+export function SubmitButton({ children = 'Save', className, pendingLabel = 'Saving…', savedLabel = 'Saved', flash = true, error, disabled = false, ariaLabel, title, }) {
+    const { pending } = useFormStatus();
+    const [justSaved, setJustSaved] = useState(false);
+    const wasPending = useRef(pending);
+    useEffect(() => {
+        if (flash && wasPending.current && !pending && !error) {
+            setJustSaved(true);
+            const timeout = setTimeout(() => setJustSaved(false), 1600);
+            wasPending.current = pending;
+            return () => clearTimeout(timeout);
+        }
+        wasPending.current = pending;
+    }, [pending, error, flash]);
+    return (_jsx("button", { type: "submit", disabled: pending || disabled, "aria-busy": pending, "aria-disabled": disabled || undefined, "aria-label": ariaLabel, title: title, "data-toolplane-ui": "submit-button", className: `${className !== null && className !== void 0 ? className : ''} disabled:opacity-70 ${pending ? 'cursor-wait' : 'disabled:cursor-not-allowed'}`, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [pending ? (_jsx(Loader2, { "aria-hidden": "true", className: "size-3.5 animate-spin" })) : justSaved ? (_jsx(Check, { "aria-hidden": "true", className: "size-3.5" })) : null, pending ? pendingLabel : justSaved ? savedLabel : children] }) }));
+}
+export function ConfirmSubmitButton({ triggerLabel, triggerAriaLabel, triggerTitle, confirmLabel, cancelLabel, prompt, pendingLabel, disabled = false, className = 'items-center', triggerClassName = 'ui-button-secondary', confirmClassName = 'ui-button-primary', cancelClassName = 'ui-button-ghost', promptClassName = 'text-sm text-muted-foreground', }) {
+    const [confirming, setConfirming] = useState(false);
+    const { pending } = useFormStatus();
+    const triggerRef = useRef(null);
+    const confirmRef = useRef(null);
+    const restoreTriggerFocus = useRef(false);
+    const wasPending = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (confirming) {
+            (_a = confirmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (restoreTriggerFocus.current) {
+            restoreTriggerFocus.current = false;
+            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [confirming]);
+    useEffect(() => {
+        if (pending) {
+            wasPending.current = true;
+            return;
+        }
+        if (!wasPending.current)
+            return;
+        wasPending.current = false;
+        restoreTriggerFocus.current = true;
+        setConfirming(false);
+    }, [pending]);
+    function cancelConfirmation() {
+        restoreTriggerFocus.current = true;
+        setConfirming(false);
+    }
+    return (_jsx("span", { "data-toolplane-ui": "confirm-submit-button", className: `inline-flex flex-wrap gap-2 ${className}`, children: confirming ? (_jsxs(_Fragment, { children: [_jsx("span", { className: promptClassName, children: prompt }), _jsx("button", { ref: confirmRef, type: "submit", disabled: disabled || pending, "aria-busy": pending, "data-toolplane-ui": "confirm-submit-confirm", className: `${confirmClassName} disabled:cursor-wait disabled:opacity-70`, children: pending ? pendingLabel !== null && pendingLabel !== void 0 ? pendingLabel : confirmLabel : confirmLabel }), _jsx("button", { type: "button", disabled: disabled || pending, onClick: cancelConfirmation, "data-toolplane-ui": "confirm-submit-cancel", className: `${cancelClassName} disabled:cursor-wait disabled:opacity-70`, children: cancelLabel })] })) : (_jsx("button", { ref: triggerRef, type: "button", disabled: disabled || pending, onClick: () => setConfirming(true), "aria-label": triggerAriaLabel, title: triggerTitle, "data-toolplane-ui": "confirm-submit-trigger", className: `${triggerClassName} disabled:cursor-not-allowed disabled:opacity-60`, children: triggerLabel })) }));
+}
+export function CopyButton({ text, label = 'Copy', copiedLabel = 'Copied', failedLabel = 'Copy failed', className, iconOnly = false, }) {
+    const [status, setStatus] = useState('idle');
+    const resetTimeout = useRef(null);
+    const statusLabel = status === 'copied'
+        ? copiedLabel
+        : status === 'failed'
+            ? failedLabel
+            : label;
+    useEffect(() => () => {
+        if (resetTimeout.current)
+            clearTimeout(resetTimeout.current);
+    }, []);
+    async function copy() {
+        let success = false;
+        try {
+            await Promise.race([
+                navigator.clipboard.writeText(text),
+                new Promise((_, reject) => {
+                    setTimeout(() => reject(new Error('Clipboard write timed out.')), 500);
+                }),
+            ]);
+            success = true;
+        }
+        catch (_a) {
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.readOnly = true;
+            textarea.style.position = 'fixed';
+            textarea.style.left = '-9999px';
+            textarea.style.top = '0';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            textarea.setSelectionRange(0, textarea.value.length);
+            success = document.execCommand('copy');
+            textarea.remove();
+        }
+        setStatus(success ? 'copied' : 'failed');
+        if (resetTimeout.current)
+            clearTimeout(resetTimeout.current);
+        resetTimeout.current = setTimeout(() => setStatus('idle'), 1500);
+    }
+    return (_jsxs("button", { type: "button", onClick: copy, "aria-label": iconOnly ? statusLabel : undefined, title: iconOnly ? statusLabel : undefined, "data-toolplane-ui": "copy-button", className: className !== null && className !== void 0 ? className : 'inline-flex h-9 items-center gap-1.5 rounded-md border border-zinc-200 px-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800', children: [status === 'copied' ? (_jsx(Check, { "aria-hidden": "true", className: "size-4" })) : (_jsx(Copy, { "aria-hidden": "true", className: "size-4" })), iconOnly ? _jsx("span", { className: "sr-only", "aria-live": "polite", children: statusLabel }) : statusLabel] }));
+}

package/dist/Layout.d.ts

@@ -0,0 +1,73 @@
+import type { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactNode } from 'react';
+export type PageProps = ComponentPropsWithoutRef<'main'> & {
+    as?: 'div' | 'main';
+};
+export declare function Page({ as: Component, className, ...props }: PageProps): import("react").JSX.Element;
+export type PageHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & {
+    actions?: ReactNode;
+    back?: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    title: ReactNode;
+};
+export declare function PageHeader({ actions, back, className, description, meta, title, ...props }: PageHeaderProps): import("react").JSX.Element;
+export type ToolbarProps = ComponentPropsWithoutRef<'div'> & {
+    actions?: ReactNode;
+};
+export declare function Toolbar({ actions, children, className, ...props }: ToolbarProps): import("react").JSX.Element;
+export type SectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    actions?: ReactNode;
+    count?: number;
+    title: ReactNode;
+};
+export declare function Section({ actions, children, className, count, title, ...props }: SectionProps): import("react").JSX.Element;
+export type PanelTone = 'default' | 'danger';
+export type PanelHeaderPresentation = 'muted' | 'bordered';
+export type PanelProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    actions?: ReactNode;
+    bodyClassName?: string;
+    description?: ReactNode;
+    headerPresentation?: PanelHeaderPresentation;
+    padded?: boolean;
+    title: ReactNode;
+    tone?: PanelTone;
+};
+export declare function Panel({ actions, bodyClassName, children, className, description, headerPresentation, padded, title, tone, ...props }: PanelProps): import("react").JSX.Element;
+type Icon = ComponentType<{
+    className?: string;
+}>;
+export type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
+    actions?: ReactNode;
+    description?: ReactNode;
+    icon?: Icon;
+    title?: ReactNode;
+};
+export declare function EmptyState({ actions, children, className, description, icon: IconComponent, title, ...props }: EmptyStateProps): import("react").JSX.Element;
+export type DataTableHeader = {
+    align?: 'left' | 'right';
+    className?: string;
+    colSpan?: number;
+    label?: ReactNode;
+};
+export type DataTableProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode;
+    headers: readonly DataTableHeader[];
+    label?: string;
+    minWidth?: string;
+    panel?: boolean;
+    tableClassName?: string;
+};
+export declare function DataTable({ children, className, headers, label, minWidth, panel, tableClassName, ...props }: DataTableProps): import("react").JSX.Element;
+export type EntityProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
+    description?: ReactNode;
+    initials?: string;
+    mono?: boolean;
+    title: ReactNode;
+};
+export declare function Entity({ className, description, initials, mono, title, ...props }: EntityProps): import("react").JSX.Element;
+export type CardProps = ComponentPropsWithoutRef<'div'> & {
+    muted?: boolean;
+    padded?: boolean;
+};
+export declare function Card({ className, muted, padded, ...props }: CardProps): import("react").JSX.Element;
+export {};

package/dist/Layout.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export function Page(_a) {
+    var { as: Component = 'main', className } = _a, props = __rest(_a, ["as", "className"]);
+    return (_jsx(Component, Object.assign({}, props, { "data-toolplane-ui": "page", className: cx('ui-page space-y-5', className) })));
+}
+export function PageHeader(_a) {
+    var { actions, back, className, description, meta, title } = _a, props = __rest(_a, ["actions", "back", "className", "description", "meta", "title"]);
+    return (_jsxs("header", Object.assign({}, props, { "data-toolplane-ui": "page-header", className: cx('space-y-3', className), children: [back, _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground [text-wrap:balance]", children: title }), meta ? _jsx("span", { className: "text-sm font-medium text-muted-foreground", children: meta }) : null] }), description ? (_jsx("div", { className: "mt-1 max-w-3xl text-sm text-muted-foreground [text-wrap:pretty]", children: description })) : null] }), actions ? _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null] })] })));
+}
+export function Toolbar(_a) {
+    var { actions, children, className } = _a, props = __rest(_a, ["actions", "children", "className"]);
+    return (_jsxs("div", Object.assign({}, props, { "data-toolplane-ui": "toolbar", className: cx('flex flex-wrap items-center justify-between gap-3', className), children: [children ? _jsx("div", { className: "min-w-0", children: children }) : _jsx("span", {}), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] })));
+}
+export function Section(_a) {
+    var { actions, children, className, count, title } = _a, props = __rest(_a, ["actions", "children", "className", "count", "title"]);
+    return (_jsxs("section", Object.assign({}, props, { "data-toolplane-ui": "section", className: className, children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsxs("h2", { className: "text-sm font-semibold text-foreground", children: [title, typeof count === 'number' ? (_jsxs("span", { className: "ml-1.5 font-normal text-muted-foreground", children: ["(", count, ")"] })) : null] }), actions ? _jsx("div", { className: "flex items-center gap-2", children: actions }) : null] }), children] })));
+}
+export function Panel(_a) {
+    var { actions, bodyClassName, children, className, description, headerPresentation = 'muted', padded = true, title, tone = 'default' } = _a, props = __rest(_a, ["actions", "bodyClassName", "children", "className", "description", "headerPresentation", "padded", "title", "tone"]);
+    const danger = tone === 'danger';
+    const bordered = headerPresentation === 'bordered';
+    return (_jsxs("section", Object.assign({}, props, { "data-toolplane-ui": "panel", "data-tone": tone, className: cx('ui-panel overflow-hidden', danger && 'ui-panel-danger', className), children: [_jsxs("div", { className: cx('flex items-center justify-between gap-3 px-5 py-3.5', bordered && 'min-h-14 border-b', bordered && (danger ? 'border-red-100 dark:border-red-500/20' : 'border-border'), !bordered && (danger ? 'bg-red-500/5' : 'bg-muted/25')), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: cx('text-sm font-semibold', danger ? 'text-red-700 dark:text-red-400' : 'text-foreground'), children: title }), description ? _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "shrink-0", children: actions }) : null] }), _jsx("div", { className: cx(padded && 'px-5 py-5', bodyClassName), children: children })] })));
+}
+export function EmptyState(_a) {
+    var { actions, children, className, description, icon: IconComponent, title } = _a, props = __rest(_a, ["actions", "children", "className", "description", "icon", "title"]);
+    return (_jsxs("div", Object.assign({}, props, { "data-toolplane-ui": "empty-state", className: cx('ui-empty', className), children: [IconComponent ? _jsx(IconComponent, { className: "mb-3 size-8 text-muted-foreground" }) : null, title ? _jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }) : null, description ? (_jsx("div", { className: cx('text-sm text-muted-foreground', Boolean(title) && 'mt-1'), children: description })) : null, children ? _jsx("div", { className: "mt-6 w-full", children: children }) : null, actions ? _jsx("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: actions }) : null] })));
+}
+export function DataTable(_a) {
+    var { children, className, headers, label, minWidth = '40rem', panel = true, tableClassName } = _a, props = __rest(_a, ["children", "className", "headers", "label", "minWidth", "panel", "tableClassName"]);
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "data-table", role: label ? 'region' : undefined, "aria-label": label, tabIndex: label ? 0 : undefined, className: cx(panel && 'ui-panel', 'relative overflow-x-auto overscroll-x-contain focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', className), children: _jsxs("table", { className: cx('ui-table', tableClassName), style: { minWidth }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((header, index) => (_jsx("th", { scope: "col", colSpan: header.colSpan, className: cx('px-4 py-3 font-medium', header.align === 'right' && 'text-right', header.className), children: header.label }, index))) }) }), _jsx("tbody", { className: "divide-y divide-border", children: children })] }) })));
+}
+export function Entity(_a) {
+    var { className, description, initials, mono = false, title } = _a, props = __rest(_a, ["className", "description", "initials", "mono", "title"]);
+    return (_jsxs("div", Object.assign({}, props, { "data-toolplane-ui": "entity", className: cx('flex min-w-0 items-center gap-3', className), children: [initials ? (_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-md border border-border bg-muted/45 text-[11px] font-bold text-muted-foreground", children: initials.slice(0, 2).toUpperCase() })) : null, _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: cx('block truncate font-semibold text-foreground', mono && 'font-mono text-[13px]'), children: title }), description ? _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: description }) : null] })] })));
+}
+export function Card(_a) {
+    var { className, muted = false, padded = true } = _a, props = __rest(_a, ["className", "muted", "padded"]);
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "card", className: cx(muted ? 'ui-panel-muted' : 'ui-panel', padded && 'p-5', className) })));
+}

package/dist/MermaidAssistantText.d.ts

@@ -0,0 +1 @@
+export default function MermaidAssistantText(): import("react").JSX.Element;

package/dist/MermaidAssistantText.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StreamdownTextPrimitive } from '@assistant-ui/react-streamdown';
+import { code } from '@streamdown/code';
+import { mermaid } from '@streamdown/mermaid';
+import remarkBreaks from 'remark-breaks';
+import { defaultRemarkPlugins } from 'streamdown';
+const plugins = { code, mermaid };
+const remarkPlugins = [...Object.values(defaultRemarkPlugins), remarkBreaks];
+export default function MermaidAssistantText() {
+    return (_jsx(StreamdownTextPrimitive, { plugins: plugins, remarkPlugins: remarkPlugins, mermaid: { config: { securityLevel: 'strict' } }, linkSafety: { enabled: true }, security: {
+            allowedProtocols: ['http', 'https', 'mailto'],
+            allowDataImages: false,
+        }, className: "space-y-2 [&_li]:my-0.5 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-1 [&_pre]:my-2 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5" }));
+}

package/dist/Navigation.d.ts

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode } from 'react';
+export type ChipProps = ComponentPropsWithoutRef<'span'> & {
+    active?: boolean;
+    asChild?: boolean;
+};
+export declare function Chip({ active, asChild, className, ...props }: ChipProps): import("react").JSX.Element;
+export type TabListProps = ComponentPropsWithoutRef<'div'> & {
+    label: string;
+    navigation?: boolean;
+};
+export declare function TabList({ className, label, navigation, ...props }: TabListProps): import("react").JSX.Element;
+export type NavigationTabsProps = ComponentPropsWithoutRef<'nav'> & {
+    contentClassName?: string;
+};
+export declare function NavigationTabs({ children, className, contentClassName, ...props }: NavigationTabsProps): import("react").JSX.Element;
+export type BreadcrumbsProps = ComponentPropsWithoutRef<'nav'>;
+export declare function Breadcrumbs({ 'aria-label': ariaLabel, children, className, ...props }: BreadcrumbsProps): import("react").JSX.Element;
+export type BreadcrumbItemProps = ComponentPropsWithoutRef<'li'> & {
+    current?: boolean;
+    separator?: ReactNode;
+};
+export declare function BreadcrumbItem({ children, className, current, separator, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+export type TabProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    count?: number;
+    current?: boolean;
+    navigation?: boolean;
+};
+export declare function Tab({ asChild, children, className, count, current, navigation, type, ...props }: TabProps): import("react").JSX.Element;
+export type TabPanelProps = ComponentPropsWithoutRef<'div'> & {
+    current?: boolean;
+};
+export declare function TabPanel({ className, current, ...props }: TabPanelProps): import("react").JSX.Element;
+export type PaginationProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
+    next?: ReactNode;
+    previous?: ReactNode;
+    summary: ReactNode;
+};
+export declare function Pagination({ className, next, previous, summary, ...props }: PaginationProps): import("react").JSX.Element;

package/dist/Navigation.js

@@ -0,0 +1,60 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from 'radix-ui';
+function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export function Chip(_a) {
+    var { active = false, asChild = false, className } = _a, props = __rest(_a, ["active", "asChild", "className"]);
+    const Component = asChild ? Slot.Root : 'span';
+    return (_jsx(Component, Object.assign({}, props, { "data-toolplane-ui": "chip", "data-active": active || undefined, className: cx('ui-chip', active && 'ui-chip-active', className) })));
+}
+export function TabList(_a) {
+    var { className, label, navigation = false } = _a, props = __rest(_a, ["className", "label", "navigation"]);
+    const classes = cx('inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-xl bg-muted p-1 ring-1 ring-border/70', className);
+    if (navigation) {
+        return (_jsx("nav", Object.assign({}, props, { "aria-label": label, "data-toolplane-ui": "tab-list", className: classes })));
+    }
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "tab-list", role: "tablist", "aria-label": label, className: classes })));
+}
+export function NavigationTabs(_a) {
+    var { children, className, contentClassName } = _a, props = __rest(_a, ["children", "className", "contentClassName"]);
+    return (_jsx("nav", Object.assign({}, props, { "data-toolplane-ui": "navigation-tabs", className: cx('max-w-full overflow-x-auto pb-1', className), children: _jsx("div", { className: cx('inline-flex min-w-max items-center gap-1 rounded-xl bg-muted p-1 ring-1 ring-border/70', contentClassName), children: children }) })));
+}
+export function Breadcrumbs(_a) {
+    var { 'aria-label': ariaLabel = 'Breadcrumb', children, className } = _a, props = __rest(_a, ['aria-label', "children", "className"]);
+    return (_jsx("nav", Object.assign({}, props, { "aria-label": ariaLabel, "data-toolplane-ui": "breadcrumbs", className: cx('min-w-0 overflow-hidden', className), children: _jsx("ol", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: children }) })));
+}
+export function BreadcrumbItem(_a) {
+    var { children, className, current = false, separator } = _a, props = __rest(_a, ["children", "className", "current", "separator"]);
+    return (_jsxs("li", Object.assign({}, props, { className: cx('flex min-w-0 items-center gap-2', className), children: [separator ? _jsx("span", { "aria-hidden": "true", className: "shrink-0 text-muted-foreground/55", children: separator }) : null, _jsx("span", { "aria-current": current ? 'page' : undefined, className: cx('truncate', current ? 'text-muted-foreground' : 'font-semibold text-foreground'), children: children })] })));
+}
+export function Tab(_a) {
+    var { asChild = false, children, className, count, current = false, navigation = false, type = 'button' } = _a, props = __rest(_a, ["asChild", "children", "className", "count", "current", "navigation", "type"]);
+    const classes = cx('inline-flex shrink-0 items-center gap-1.5 rounded-lg px-4 py-1.5 text-sm font-medium transition-colors', current
+        ? 'bg-background text-foreground shadow-sm ring-1 ring-border/60'
+        : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground', className);
+    if (asChild) {
+        return (_jsx(Slot.Root, Object.assign({}, props, { "data-toolplane-ui": "tab", "data-current": current || undefined, role: navigation ? undefined : 'tab', "aria-current": navigation && current ? 'page' : undefined, "aria-selected": navigation ? undefined : current, className: classes, children: children })));
+    }
+    return (_jsxs("button", Object.assign({}, props, { type: type, "data-toolplane-ui": "tab", "data-current": current || undefined, role: navigation ? undefined : 'tab', "aria-current": navigation && current ? 'page' : undefined, "aria-selected": navigation ? undefined : current, className: classes, children: [children, typeof count === 'number' ? (_jsx("span", { className: "text-muted-foreground/70", children: count })) : null] })));
+}
+export function TabPanel(_a) {
+    var { className, current = false } = _a, props = __rest(_a, ["className", "current"]);
+    return (_jsx("div", Object.assign({}, props, { "data-toolplane-ui": "tab-panel", role: "tabpanel", hidden: !current, className: className })));
+}
+export function Pagination(_a) {
+    var { className, next, previous, summary } = _a, props = __rest(_a, ["className", "next", "previous", "summary"]);
+    return (_jsxs("nav", Object.assign({}, props, { "data-toolplane-ui": "pagination", className: cx('flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between', className), children: [_jsx("span", { children: summary }), _jsxs("div", { className: "flex gap-2", children: [previous, next] })] })));
+}