@zvk/ui 0.1.0

package/dist/components/command/command.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog } from "../dialog/index.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { createCollection } from "../../internal/collection/index.js";
+import { commandItemMatches } from "./command-filter.js";
+const CommandContext = React.createContext(null);
+function useCommandContext(calledBy) {
+    const context = React.useContext(CommandContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used inside a <Command />`);
+    }
+    return context;
+}
+function textFromNode(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(textFromNode).join("");
+    }
+    return "";
+}
+function CommandRoot({ children, className, defaultValue = "", onItemSelect, onValueChange, ref, value, ...props }) {
+    const [query, setQuery] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const inputId = React.useId();
+    const listId = `${inputId}-list`;
+    const collectionRef = React.useRef(createCollection());
+    const [activeId, setActiveId] = React.useState();
+    const [version, setVersion] = React.useState(0);
+    const bumpVersion = React.useCallback(() => setVersion((current) => current + 1), []);
+    const visibleEnabledItems = React.useCallback(() => {
+        return collectionRef.current.items().filter((item) => item.data.visible && item.data.disabled !== true);
+    }, []);
+    const moveActive = React.useCallback((direction) => {
+        const visible = visibleEnabledItems();
+        if (visible.length === 0) {
+            setActiveId(undefined);
+            return;
+        }
+        if (direction === "first") {
+            setActiveId(visible[0]?.id);
+            return;
+        }
+        if (direction === "last") {
+            setActiveId(visible.at(-1)?.id);
+            return;
+        }
+        const currentIndex = activeId === undefined ? -1 : visible.findIndex((item) => item.id === activeId);
+        const nextIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1;
+        const wrapped = ((nextIndex % visible.length) + visible.length) % visible.length;
+        setActiveId(visible[wrapped]?.id);
+    }, [activeId, visibleEnabledItems]);
+    const selectItem = React.useCallback((id) => {
+        const item = collectionRef.current.items().find((record) => record.id === id)?.data;
+        if (!item || item.disabled === true || !item.visible) {
+            return;
+        }
+        item.onSelect?.(item.value);
+        onItemSelect?.(item.value);
+    }, [onItemSelect]);
+    const selectActive = React.useCallback(() => {
+        if (activeId !== undefined) {
+            selectItem(activeId);
+        }
+    }, [activeId, selectItem]);
+    const registerItem = React.useCallback((id, item) => {
+        collectionRef.current.register(id, item);
+        bumpVersion();
+    }, [bumpVersion]);
+    const unregisterItem = React.useCallback((id) => {
+        collectionRef.current.unregister(id);
+        bumpVersion();
+    }, [bumpVersion]);
+    React.useLayoutEffect(() => {
+        const visible = visibleEnabledItems();
+        if (visible.length === 0 && activeId !== undefined) {
+            setActiveId(undefined);
+            return;
+        }
+        if (activeId !== undefined && !visible.some((item) => item.id === activeId)) {
+            setActiveId(visible[0]?.id);
+        }
+    }, [activeId, query, version, visibleEnabledItems]);
+    const empty = collectionRef.current.items().some((item) => !item.data.visible) &&
+        !collectionRef.current.items().some((item) => item.data.visible);
+    return (_jsx(CommandContext.Provider, { value: {
+            activeId,
+            empty,
+            getItem: (id) => collectionRef.current.items().find((item) => item.id === id)?.data,
+            inputId,
+            listId,
+            moveActive,
+            query,
+            registerItem,
+            selectActive,
+            selectItem,
+            setQuery,
+            unregisterItem
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-command", className), children: children }) }));
+}
+function CommandInput({ className, onKeyDown, placeholder, ref, ...props }) {
+    const { activeId, inputId, listId, moveActive, query, selectActive, setQuery } = useCommandContext("Command.Input");
+    return (_jsx("input", { ...props, ref: ref, id: props.id ?? inputId, role: "searchbox", "aria-activedescendant": activeId, "aria-controls": listId, "aria-autocomplete": "list", className: cn("liano-command__input", className), onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                moveActive("next");
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                moveActive("previous");
+                return;
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                moveActive("first");
+                return;
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                moveActive("last");
+                return;
+            }
+            if (event.key === "Enter") {
+                event.preventDefault();
+                selectActive();
+            }
+        }), placeholder: placeholder, value: query }));
+}
+function CommandList({ className, ref, ...props }) {
+    const { listId } = useCommandContext("Command.List");
+    return _jsx("div", { ...props, ref: ref, id: props.id ?? listId, role: "listbox", className: cn("liano-command__list", className) });
+}
+function CommandEmpty({ className, ref, ...props }) {
+    const { empty } = useCommandContext("Command.Empty");
+    if (!empty) {
+        return null;
+    }
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-command__empty", className) });
+}
+function CommandGroup({ children, className, heading, ref, ...props }) {
+    const headingId = React.useId();
+    return (_jsxs("div", { ...props, ref: ref, role: "group", "aria-labelledby": heading ? headingId : undefined, className: cn("liano-command__group", className), children: [heading ? _jsx("div", { id: headingId, className: "liano-command__group-heading", children: heading }) : null, children] }));
+}
+function CommandItem({ children, className, disabled, keywords, onClick, onSelect, ref, value, ...props }) {
+    const context = useCommandContext("Command.Item");
+    const { activeId, query, registerItem, selectItem, unregisterItem } = context;
+    const generatedId = React.useId();
+    const id = props.id ?? generatedId;
+    const label = textFromNode(children) || value;
+    const visible = commandItemMatches({ label, value, keywords }, query);
+    const isActive = activeId === id;
+    React.useLayoutEffect(() => {
+        registerItem(id, {
+            disabled,
+            keywords,
+            label,
+            onSelect,
+            value,
+            visible
+        });
+        return () => unregisterItem(id);
+    }, [disabled, id, keywords, label, onSelect, registerItem, unregisterItem, value, visible]);
+    if (!visible) {
+        return null;
+    }
+    return (_jsx("div", { ...props, ref: ref, id: id, role: "option", "aria-disabled": disabled ? "true" : undefined, "aria-selected": isActive ? "true" : "false", className: cn("liano-command__item", className), "data-disabled": disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, onClick: composeEventHandlers(onClick, () => {
+            if (!disabled) {
+                selectItem(id);
+            }
+        }), children: children }));
+}
+function CommandSeparator({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-command__separator", className) });
+}
+export function CommandDialog({ children, className, closeOnSelect = false, commandLabel = "Command menu", onOpenChange, ...props }) {
+    const handleItemSelect = React.useCallback(() => {
+        if (closeOnSelect) {
+            onOpenChange?.(false);
+        }
+    }, [closeOnSelect, onOpenChange]);
+    return (_jsx(Dialog, { ...props, ...(onOpenChange ? { onOpenChange } : {}), children: _jsxs(Dialog.Content, { className: cn("liano-command-dialog", className), children: [_jsx(Dialog.Title, { className: "liano-command-dialog__title", children: commandLabel }), _jsx(Command, { onItemSelect: handleItemSelect, children: children })] }) }));
+}
+export const Command = Object.assign(CommandRoot, {
+    Dialog: CommandDialog,
+    Empty: CommandEmpty,
+    Group: CommandGroup,
+    Input: CommandInput,
+    Item: CommandItem,
+    List: CommandList,
+    Separator: CommandSeparator
+});

package/dist/components/command/index.d.ts

@@ -0,0 +1,2 @@
+export { Command, CommandDialog } from "./command.js";
+export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps } from "./command.js";

package/dist/components/command/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Command, CommandDialog } from "./command.js";

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+}
+export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    tone?: "default" | "danger";
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function ContextMenuRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, ...props }: ContextMenuProps): React.JSX.Element;
+declare function ContextMenuTrigger({ children, className, onContextMenu, onKeyDown, ref, ...props }: ContextMenuTriggerProps): React.JSX.Element;
+declare function ContextMenuContent({ children, className, onKeyDown, ref, style, ...props }: ContextMenuContentProps): React.JSX.Element | null;
+declare function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuItemProps): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ref, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
+type ContextMenuComponent = typeof ContextMenuRoot & {
+    Content: typeof ContextMenuContent;
+    Item: typeof ContextMenuItem;
+    Separator: typeof ContextMenuSeparator;
+    Trigger: typeof ContextMenuTrigger;
+};
+export declare const ContextMenu: ContextMenuComponent;
+export {};

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { createCollection } from "../../internal/collection/index.js";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { Portal } from "../../internal/portal/index.js";
+const ContextMenuContext = React.createContext(null);
+function useContextMenuContext(calledBy) {
+    const context = React.useContext(ContextMenuContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used inside a <ContextMenu />`);
+    }
+    return context;
+}
+function ContextMenuRoot({ children, className, defaultOpen = false, onOpenChange, open: openProp, ref, ...props }) {
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
+    const [point, setPoint] = React.useState({ x: 0, y: 0 });
+    const collectionRef = React.useRef(createCollection());
+    const restoreFocusRef = React.useRef(null);
+    const contentId = React.useId();
+    const close = React.useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const openAt = React.useCallback((nextPoint, restoreFocusTo) => {
+        restoreFocusRef.current = restoreFocusTo;
+        setPoint(nextPoint);
+        setOpen(true);
+    }, [setOpen]);
+    React.useEffect(() => {
+        if (open) {
+            return;
+        }
+        restoreFocusRef.current?.focus();
+    }, [open]);
+    const registerItem = React.useCallback((id, item) => {
+        collectionRef.current.register(id, item);
+    }, []);
+    const unregisterItem = React.useCallback((id) => {
+        collectionRef.current.unregister(id);
+    }, []);
+    const getItems = React.useCallback(() => collectionRef.current.items(), []);
+    const contextValue = React.useMemo(() => ({
+        close,
+        contentId,
+        getItems,
+        open,
+        openAt,
+        point,
+        registerItem,
+        unregisterItem
+    }), [close, contentId, getItems, open, openAt, point, registerItem, unregisterItem]);
+    return (_jsx(ContextMenuContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, className: cn("liano-context-menu", className), "data-state": open ? "open" : "closed", children: children }) }));
+}
+function ContextMenuTrigger({ children, className, onContextMenu, onKeyDown, ref, ...props }) {
+    const { contentId, open, openAt } = useContextMenuContext("ContextMenu.Trigger");
+    return (_jsx("span", { ...props, ref: ref, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-context-menu__trigger", className), "data-state": open ? "open" : "closed", onContextMenu: composeEventHandlers(onContextMenu, (event) => {
+            event.preventDefault();
+            openAt({ x: event.clientX, y: event.clientY }, document.activeElement instanceof HTMLElement ? document.activeElement : event.currentTarget);
+        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if ((event.shiftKey && event.key === "F10") || event.key === "ContextMenu") {
+                event.preventDefault();
+                const target = document.activeElement instanceof HTMLElement ? document.activeElement : event.currentTarget;
+                const rect = target.getBoundingClientRect();
+                openAt({ x: rect.left, y: rect.bottom }, target);
+            }
+        }), children: children }));
+}
+function focusItem(items, index) {
+    const enabled = items.filter((item) => item.data.disabled !== true && item.data.ref !== null);
+    if (enabled.length === 0) {
+        return;
+    }
+    const wrapped = ((index % enabled.length) + enabled.length) % enabled.length;
+    enabled[wrapped]?.data.ref?.focus();
+}
+function currentIndex(items) {
+    const enabled = items.filter((item) => item.data.disabled !== true && item.data.ref !== null);
+    return enabled.findIndex((item) => item.data.ref === document.activeElement);
+}
+function ContextMenuContent({ children, className, onKeyDown, ref, style, ...props }) {
+    const { close, contentId, getItems, open, point } = useContextMenuContext("ContextMenu.Content");
+    React.useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        queueMicrotask(() => focusItem(getItems(), 0));
+    }, [getItems, open]);
+    if (!open) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "menu", className: cn("liano-context-menu__content", className), style: { ...style, left: `${point.x}px`, top: `${point.y}px` }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                    const items = getItems();
+                    const index = currentIndex(items);
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        focusItem(items, index + 1);
+                        return;
+                    }
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        focusItem(items, index - 1);
+                        return;
+                    }
+                    if (event.key === "Escape") {
+                        close();
+                    }
+                }), children: children }) }) }));
+}
+function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
+    const { close, registerItem, unregisterItem } = useContextMenuContext("ContextMenu.Item");
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        return () => unregisterItem(itemId);
+    }, [disabled, itemId, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        close();
+    };
+    return (_jsx("button", { ...props, ref: (node) => {
+            itemRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": disabled ? "true" : undefined, className: cn("liano-context-menu__item", className), "data-disabled": disabled ? "true" : undefined, "data-tone": tone, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                select(event);
+            }
+        }), children: children }));
+}
+function ContextMenuSeparator({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-context-menu__separator", className) });
+}
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    Separator: ContextMenuSeparator,
+    Trigger: ContextMenuTrigger
+});

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

@@ -0,0 +1,2 @@
+export { ContextMenu } from "./context-menu.js";
+export type { ContextMenuContentProps, ContextMenuItemProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu.js";

package/dist/components/context-menu/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ContextMenu } from "./context-menu.js";

package/dist/components/conversation/conversation.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+export type ConversationMessageRole = "user" | "assistant" | "system";
+export type ConversationToolStatus = "pending" | "running" | "success" | "error";
+export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ConversationListProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    role: ConversationMessageRole;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ConversationSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ConversationReasoningProps extends Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+    title?: React.ReactNode;
+    ref?: React.Ref<HTMLDetailsElement>;
+}
+export interface ConversationToolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    status?: ConversationToolStatus;
+    title?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ConversationPromptInputProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    ref?: React.Ref<HTMLFormElement>;
+}
+export interface ConversationPromptInputTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}
+export interface ConversationPromptInputSubmitProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    loading?: boolean;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+declare function ConversationRoot({ className, ref, ...props }: ConversationProps): React.JSX.Element;
+declare function ConversationList({ className, ref, ...props }: ConversationListProps): React.JSX.Element;
+declare function ConversationMessage({ className, ref, role, ...props }: ConversationMessageProps): React.JSX.Element;
+declare function ConversationMessageAvatar({ className, ref, ...props }: ConversationSlotProps): React.JSX.Element;
+declare function ConversationMessageContent({ className, ref, ...props }: ConversationSlotProps): React.JSX.Element;
+declare function ConversationResponse({ className, ref, ...props }: ConversationSlotProps): React.JSX.Element;
+declare function ConversationReasoning({ children, className, ref, title, ...props }: ConversationReasoningProps): React.JSX.Element;
+declare function ConversationTool({ children, className, ref, status, title, ...props }: ConversationToolProps): React.JSX.Element;
+declare function ConversationPromptInput({ className, ref, ...props }: ConversationPromptInputProps): React.JSX.Element;
+declare function ConversationPromptInputTextarea({ className, ref, rows, ...props }: ConversationPromptInputTextareaProps): React.JSX.Element;
+declare function ConversationPromptInputSubmit({ className, disabled, loading, ref, type, ...props }: ConversationPromptInputSubmitProps): React.JSX.Element;
+export declare const Conversation: typeof ConversationRoot & {
+    List: typeof ConversationList;
+    Message: typeof ConversationMessage;
+    MessageAvatar: typeof ConversationMessageAvatar;
+    MessageContent: typeof ConversationMessageContent;
+    Response: typeof ConversationResponse;
+    Reasoning: typeof ConversationReasoning;
+    Tool: typeof ConversationTool;
+    PromptInput: typeof ConversationPromptInput;
+    PromptInputTextarea: typeof ConversationPromptInputTextarea;
+    PromptInputSubmit: typeof ConversationPromptInputSubmit;
+};
+export {};

package/dist/components/conversation/conversation.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function ConversationRoot({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation", className) });
+}
+function ConversationList({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Conversation", className: cn("liano-conversation__list", className), role: "log" }));
+}
+function ConversationMessage({ className, ref, role, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message", className), "data-role": role }));
+}
+function ConversationMessageAvatar({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message-avatar", className) });
+}
+function ConversationMessageContent({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message-content", className) });
+}
+function ConversationResponse({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__response", className) });
+}
+function ConversationReasoning({ children, className, ref, title = "Reasoning", ...props }) {
+    return (_jsxs("details", { ...props, ref: ref, className: cn("liano-conversation__reasoning", className), children: [_jsx("summary", { className: "liano-conversation__reasoning-summary", children: title }), _jsx("div", { className: "liano-conversation__reasoning-content", children: children })] }));
+}
+function ConversationTool({ children, className, ref, status = "pending", title, ...props }) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-conversation__tool", className), "data-status": status, children: [title ? _jsx("div", { className: "liano-conversation__tool-title", children: title }) : null, children ? _jsx("div", { className: "liano-conversation__tool-content", children: children }) : null] }));
+}
+function ConversationPromptInput({ className, ref, ...props }) {
+    return _jsx("form", { ...props, ref: ref, className: cn("liano-conversation__prompt-input", className) });
+}
+function ConversationPromptInputTextarea({ className, ref, rows = 3, ...props }) {
+    return (_jsx("textarea", { ...props, ref: ref, className: cn("liano-conversation__prompt-textarea", className), rows: rows }));
+}
+function ConversationPromptInputSubmit({ className, disabled, loading = false, ref, type = "submit", ...props }) {
+    const isDisabled = disabled || loading;
+    return (_jsx("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("liano-conversation__prompt-submit", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, disabled: isDisabled, type: type }));
+}
+export const Conversation = Object.assign(ConversationRoot, {
+    List: ConversationList,
+    Message: ConversationMessage,
+    MessageAvatar: ConversationMessageAvatar,
+    MessageContent: ConversationMessageContent,
+    Response: ConversationResponse,
+    Reasoning: ConversationReasoning,
+    Tool: ConversationTool,
+    PromptInput: ConversationPromptInput,
+    PromptInputTextarea: ConversationPromptInputTextarea,
+    PromptInputSubmit: ConversationPromptInputSubmit
+});

package/dist/components/conversation/index.d.ts

@@ -0,0 +1,2 @@
+export { Conversation } from "./conversation.js";
+export type { ConversationListProps, ConversationMessageProps, ConversationMessageRole, ConversationPromptInputProps, ConversationPromptInputSubmitProps, ConversationPromptInputTextareaProps, ConversationProps, ConversationReasoningProps, ConversationSlotProps, ConversationToolProps, ConversationToolStatus } from "./conversation.js";

package/dist/components/conversation/index.js

@@ -0,0 +1 @@
+export { Conversation } from "./conversation.js";

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type CopyStatus = "idle" | "copied" | "error";
+export type CopyButtonSize = "sm" | "md";
+export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onCopy"> {
+    value: string;
+    copiedLabel?: React.ReactNode;
+    idleLabel?: React.ReactNode;
+    errorLabel?: React.ReactNode;
+    resetDelay?: number;
+    onCopy?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+    size?: CopyButtonSize;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface CopyableTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    label?: React.ReactNode;
+    truncate?: boolean;
+    copyLabel?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function CopyButton({ className, copiedLabel, disabled, errorLabel, idleLabel, onClick, onCopy, onCopyError, ref, resetDelay, size, type, value, ...props }: CopyButtonProps): React.JSX.Element;
+export declare function CopyableText({ className, copyLabel, label, ref, truncate, value, ...props }: CopyableTextProps): React.JSX.Element;

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function getClipboard() {
+    return typeof navigator === "undefined" ? undefined : navigator.clipboard;
+}
+export function CopyButton({ className, copiedLabel = "Copied", disabled, errorLabel = "Copy failed", idleLabel = "Copy", onClick, onCopy, onCopyError, ref, resetDelay = 2000, size = "sm", type = "button", value, ...props }) {
+    const [status, setStatus] = React.useState("idle");
+    const resetTimer = React.useRef(undefined);
+    React.useEffect(() => {
+        return () => {
+            if (resetTimer.current !== undefined) {
+                clearTimeout(resetTimer.current);
+            }
+        };
+    }, []);
+    const scheduleReset = React.useCallback(() => {
+        if (resetTimer.current !== undefined) {
+            clearTimeout(resetTimer.current);
+        }
+        resetTimer.current = setTimeout(() => setStatus("idle"), resetDelay);
+    }, [resetDelay]);
+    async function handleClick(event) {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        try {
+            const clipboard = getClipboard();
+            if (!clipboard?.writeText) {
+                throw new Error("Clipboard API is unavailable.");
+            }
+            await clipboard.writeText(value);
+            setStatus("copied");
+            onCopy?.(value);
+            scheduleReset();
+        }
+        catch (error) {
+            setStatus("error");
+            onCopyError?.(error);
+            scheduleReset();
+        }
+    }
+    const label = status === "copied" ? copiedLabel : status === "error" ? errorLabel : idleLabel;
+    return (_jsx("button", { ...props, ref: ref, className: cn("liano-copy-button", className), "data-size": size, "data-status": status, disabled: disabled, onClick: handleClick, type: type, children: label }));
+}
+export function CopyableText({ className, copyLabel, label, ref, truncate, value, ...props }) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-copyable-text", className), children: [label ? _jsx("span", { className: "liano-copyable-text__label", children: label }) : null, _jsx("code", { className: "liano-copyable-text__value", "data-truncate": truncate ? "true" : undefined, children: value }), _jsx(CopyButton, { idleLabel: copyLabel ?? "Copy", value: value })] }));
+}

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

@@ -0,0 +1,2 @@
+export { CopyButton, CopyableText } from "./copy-button.js";
+export type { CopyButtonProps, CopyButtonSize, CopyStatus, CopyableTextProps } from "./copy-button.js";

package/dist/components/copy-button/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { CopyButton, CopyableText } from "./copy-button.js";