@ciridae/ui-agent 0.3.2 → 0.3.6

package/dist/components/agentic/message.d.ts

@@ -1,8 +1,8 @@
 import type * as React from "react";
 import { Streamdown } from "streamdown";
-import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, type MessageBranchContentProps, type MessageBranchNextProps, type MessageBranchPageProps, type MessageBranchPreviousProps, type MessageBranchProps, type MessageBranchSelectorProps } from "@ciridae/ui-agent/message-branch";
-import type { AgenticMessageRole } from "@ciridae/ui-agent/types";
-import "@ciridae/ui-agent/message-response.css";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, type MessageBranchContentProps, type MessageBranchNextProps, type MessageBranchPageProps, type MessageBranchPreviousProps, type MessageBranchProps, type MessageBranchSelectorProps } from "./message-branch";
+import type { AgenticMessageRole } from "./types";
+import "./message-response.css";
 import { Button } from "@ciridae/ui/button";
 type MessageProps = React.ComponentProps<"div"> & {
     role: AgenticMessageRole;
@@ -23,7 +23,7 @@ declare function Message({ className, role, ...props }: MessageProps): React.JSX
 declare function MessageContent({ className, variant, ...props }: MessageContentProps): React.JSX.Element;
 declare function MessageActions({ className, ...props }: MessageActionsProps): React.JSX.Element;
 declare function MessageAction({ children, label, tooltip, variant, size, ...props }: MessageActionProps): React.JSX.Element;
-declare const MessageResponse: React.MemoExoticComponent<({ animated, className, components, isStreaming, plugins, ...props }: MessageResponseProps) => React.JSX.Element>;
+declare const MessageResponse: React.MemoExoticComponent<({ animated, className, components, controls, icons, isAnimating, isStreaming, mermaid: mermaidOptions, plugins, prefix, translations, ...props }: MessageResponseProps) => React.JSX.Element>;
 declare function MessageToolbar({ className, ...props }: MessageToolbarProps): React.JSX.Element;
 export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };
 export type { MessageActionProps, MessageActionsProps, MessageBranchContentProps, MessageBranchNextProps, MessageBranchPageProps, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelectorProps, MessageContentProps, MessageProps, MessageResponseProps, MessageToolbarProps, };

package/dist/components/agentic/message.js

@@ -5,16 +5,19 @@ import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
 import { createContext, memo, useContext, useEffect, useMemo, useState } from "react";
 import { bundledLanguages } from "shiki";
-import { Streamdown } from "streamdown";
-import { CodeBlock, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle, } from "@ciridae/ui-agent/code-block";
-import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, } from "@ciridae/ui-agent/message-branch";
-import "@ciridae/ui-agent/message-response.css";
+import { Streamdown, useIsCodeFenceIncomplete, } from "streamdown";
+import { CodeBlock, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle, } from "./code-block";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, } from "./message-branch";
+import "./message-response.css";
 import { Button } from "@ciridae/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
 import { cn } from "@ciridae/ui/utils";
 import { css, cva } from "@ciridae/ui/styled-system/css";
 const MessageResponseStreamingContext = createContext(false);
 const streamdownPlugins = { cjk, code, math, mermaid };
+const MessageResponseRendererOptionsContext = createContext({
+    plugins: streamdownPlugins,
+});
 const messageResponseComponents = {
     code: MessageResponseCode,
 };
@@ -138,22 +141,59 @@ function MessageAction({ children, label, tooltip, variant = "ghost", size = "ic
         return button;
     return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
 }
-const MessageResponse = memo(function MessageResponse({ animated, className, components, isStreaming = false, plugins, ...props }) {
+const MessageResponse = memo(function MessageResponse({ animated, className, components, controls, icons, isAnimating = false, isStreaming = false, mermaid: mermaidOptions, plugins, prefix, translations, ...props }) {
     const prefersReducedMotion = usePrefersReducedMotion();
+    const isActivelyStreaming = isAnimating || isStreaming;
     const resolvedAnimation = animated === true ? messageResponseAnimation : animated;
     const resolvedComponents = useMemo(() => ({ ...messageResponseComponents, ...components }), [components]);
     const resolvedPlugins = useMemo(() => ({ ...streamdownPlugins, ...plugins }), [plugins]);
-    return (_jsx(MessageResponseStreamingContext.Provider, { value: isStreaming, children: _jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), components: resolvedComponents, plugins: resolvedPlugins, ...props }) }));
+    const rendererOptions = useMemo(() => ({
+        controls,
+        icons,
+        mermaid: mermaidOptions,
+        plugins: resolvedPlugins,
+        prefix,
+        translations,
+    }), [controls, icons, mermaidOptions, prefix, resolvedPlugins, translations]);
+    return (_jsx(MessageResponseStreamingContext.Provider, { value: isActivelyStreaming, children: _jsx(MessageResponseRendererOptionsContext.Provider, { value: rendererOptions, children: _jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), components: resolvedComponents, controls: controls, icons: icons, isAnimating: isActivelyStreaming, mermaid: mermaidOptions, plugins: resolvedPlugins, prefix: prefix, translations: translations, ...props }) }) }));
 });
 MessageResponse.displayName = "MessageResponse";
-function MessageResponseCode({ children, className, "data-block": dataBlock, ...props }) {
+function MessageResponseCode({ children, className, "data-block": dataBlock, node, ...props }) {
     const isStreaming = useContext(MessageResponseStreamingContext);
+    const rendererOptions = useContext(MessageResponseRendererOptionsContext);
+    const isIncomplete = useIsCodeFenceIncomplete();
     if (!dataBlock) {
         return (_jsx("code", { className: className, ...props, children: children }));
     }
     const language = getCodeLanguage(className);
     const codeText = getCodeText(children);
-    return (_jsxs(CodeBlock, { code: codeText, language: language, className: messageResponseCodeBlockClassName, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { className: messageResponseCodeTitleClassName, children: language }), _jsx(CodeBlockCopyButton, { size: "icon-sm" })] }), _jsx(CodeBlockContent, { streaming: isStreaming })] }));
+    const meta = typeof node?.properties?.metastring === "string" ? node.properties.metastring : undefined;
+    if (language === "mermaid" && !isIncomplete && canRenderMermaid(rendererOptions.plugins)) {
+        return _jsx(MessageResponseMermaid, { code: codeText, meta: meta });
+    }
+    return (_jsxs(CodeBlock, { code: codeText, language: language, className: messageResponseCodeBlockClassName, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { className: messageResponseCodeTitleClassName, children: language }), _jsx(CodeBlockCopyButton, { size: "icon-sm" })] }), _jsx(CodeBlockContent, { streaming: isStreaming || isIncomplete })] }));
+}
+function MessageResponseMermaid({ code, meta }) {
+    const { controls, icons, mermaid: mermaidOptions, plugins, prefix, translations, } = useContext(MessageResponseRendererOptionsContext);
+    return (_jsx(Streamdown, { className: "agentic-message-response", controls: controls, icons: icons, mermaid: mermaidOptions, mode: "static", plugins: plugins, prefix: prefix, translations: translations, children: createMermaidMarkdown(code, meta) }));
+}
+function canRenderMermaid(plugins) {
+    if (plugins.mermaid)
+        return true;
+    return Boolean(plugins.renderers?.some(({ language }) => Array.isArray(language) ? language.includes("mermaid") : language === "mermaid"));
+}
+function createMermaidMarkdown(code, meta) {
+    // CommonMark forbids backticks in the info string of a backtick fence, so
+    // metadata carrying one (possible with tilde-fenced input) needs a tilde fence.
+    const fenceCharacter = meta?.includes("`") ? "~" : "`";
+    const longestFenceRun = code
+        .match(fenceCharacter === "~" ? /~+/g : /`+/g)
+        ?.reduce((longest, run) => {
+        return Math.max(longest, run.length);
+    }, 0);
+    const fence = fenceCharacter.repeat(Math.max(3, (longestFenceRun ?? 0) + 1));
+    const info = meta === undefined ? "mermaid" : `mermaid ${meta}`;
+    return `${fence}${info}\n${code}\n${fence}`;
 }
 function getCodeLanguage(className) {
     const language = className?.match(/language-([^\s]+)/)?.[1];

package/dist/components/agentic/mic-selector.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import type { AgenticMicOption } from "./types";
+import { CommandEmpty, CommandInput, CommandItem, CommandList } from "@ciridae/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@ciridae/ui/popover";
+type MicSelectorContextValue = {
+    data: AgenticMicOption[];
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setValue: (value: string | undefined) => void;
+    setWidth: (width: number) => void;
+    value: string | undefined;
+    width: number;
+};
+type MicSelectorProps = React.ComponentProps<typeof Popover> & {
+    defaultValue?: string;
+    mics?: AgenticMicOption[];
+    onValueChange?: (value: string | undefined) => void;
+    value?: string;
+};
+type MicSelectorTriggerProps = React.ComponentProps<typeof PopoverTrigger>;
+type MicSelectorContentProps = React.ComponentProps<typeof PopoverContent> & {
+    popoverOptions?: React.ComponentProps<typeof PopoverContent>;
+};
+type MicSelectorInputProps = React.ComponentProps<typeof CommandInput>;
+type MicSelectorListProps = Omit<React.ComponentProps<typeof CommandList>, "children"> & {
+    children: (mics: AgenticMicOption[]) => React.ReactNode;
+};
+type MicSelectorEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type MicSelectorItemProps = React.ComponentProps<typeof CommandItem> & {
+    mic?: AgenticMicOption;
+};
+type MicSelectorLabelProps = React.ComponentProps<"span"> & {
+    mic: AgenticMicOption;
+};
+type MicSelectorValueProps = React.ComponentProps<"span"> & {
+    placeholder?: string;
+};
+declare function MicSelector({ children, defaultOpen, defaultValue, mics, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }: MicSelectorProps): React.JSX.Element;
+declare function useMicSelector(): MicSelectorContextValue;
+declare function useAudioDevices({ enabled }?: {
+    enabled?: boolean;
+}): {
+    devices: AgenticMicOption[];
+    error: string | null;
+    hasPermission: boolean;
+    loadDevices: () => Promise<void>;
+    loading: boolean;
+};
+declare function MicSelectorTrigger({ children, ...props }: MicSelectorTriggerProps): React.JSX.Element;
+declare function MicSelectorContent({ className, popoverOptions, style, ...props }: MicSelectorContentProps): React.JSX.Element;
+declare function MicSelectorInput(props: MicSelectorInputProps): React.JSX.Element;
+declare function MicSelectorList({ children, ...props }: MicSelectorListProps): React.JSX.Element;
+declare function MicSelectorEmpty({ children, ...props }: MicSelectorEmptyProps): React.JSX.Element;
+declare function MicSelectorItem({ children, mic, onSelect, value, ...props }: MicSelectorItemProps): React.JSX.Element;
+declare function MicSelectorLabel({ className, mic, ...props }: MicSelectorLabelProps): React.JSX.Element;
+declare function MicSelectorValue({ className, placeholder, ...props }: MicSelectorValueProps): React.JSX.Element;
+export { MicSelector, MicSelectorContent, MicSelectorEmpty, MicSelectorInput, MicSelectorItem, MicSelectorLabel, MicSelectorList, MicSelectorTrigger, MicSelectorValue, useAudioDevices, useMicSelector, };
+export type { MicSelectorContentProps, MicSelectorEmptyProps, MicSelectorInputProps, MicSelectorItemProps, MicSelectorLabelProps, MicSelectorListProps, MicSelectorProps, MicSelectorTriggerProps, MicSelectorValueProps, };

package/dist/components/agentic/mic-selector.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { ChevronsUpDownIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@ciridae/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@ciridae/ui/popover";
+import { cn } from "@ciridae/ui/utils";
+import { useControllableState } from "./use-controllable-state";
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+const MicSelectorContext = React.createContext(null);
+function MicSelector({ children, defaultOpen = false, defaultValue, mics, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }) {
+    const [value, setValue] = useControllableState({
+        defaultValue,
+        onChange: onValueChange,
+        value: valueProp,
+    });
+    const [open, setOpen] = useControllableState({
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+        value: openProp,
+    });
+    const [width, setWidth] = React.useState(200);
+    const audioDevices = useAudioDevices({ enabled: !mics });
+    const { devices: detectedMics, hasPermission, loadDevices, loading: devicesLoading, } = audioDevices;
+    const attemptedPermissionRef = React.useRef(false);
+    React.useEffect(() => {
+        if (open && !mics && !hasPermission && !devicesLoading && !attemptedPermissionRef.current) {
+            attemptedPermissionRef.current = true;
+            void loadDevices();
+        }
+    }, [devicesLoading, hasPermission, loadDevices, mics, open]);
+    React.useEffect(() => {
+        if (!open)
+            attemptedPermissionRef.current = false;
+    }, [open]);
+    const contextValue = React.useMemo(() => ({
+        data: mics ?? detectedMics,
+        open,
+        setOpen,
+        setValue,
+        setWidth,
+        value,
+        width,
+    }), [detectedMics, mics, open, setOpen, setValue, value, width]);
+    return (_jsx(MicSelectorContext.Provider, { value: contextValue, children: _jsx(Popover, { onOpenChange: setOpen, open: open, ...props, children: children ?? _jsx(MicSelectorDefaultContent, {}) }) }));
+}
+function MicSelectorDefaultContent() {
+    return (_jsxs(_Fragment, { children: [_jsx(MicSelectorTrigger, { asChild: true, children: _jsxs(Button, { className: "w-64 justify-between", variant: "outline", children: [_jsx(MicSelectorValue, { className: "max-w-52 text-left" }), _jsx(ChevronsUpDownIcon, { className: "size-4 opacity-60" })] }) }), _jsxs(MicSelectorContent, { children: [_jsx(MicSelectorInput, { placeholder: "Search microphones..." }), _jsx(MicSelectorList, { children: (devices) => (_jsxs(_Fragment, { children: [_jsx(MicSelectorEmpty, { children: "No microphone found." }), devices.map((mic) => (_jsx(MicSelectorItem, { mic: mic }, mic.id)))] })) })] })] }));
+}
+function useMicSelector() {
+    const context = React.useContext(MicSelectorContext);
+    if (!context)
+        throw new Error("MicSelector components must be used within MicSelector");
+    return context;
+}
+function useAudioDevices({ enabled = true } = {}) {
+    const [devices, setDevices] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [hasPermission, setHasPermission] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const loadDevicesWithoutPermission = React.useCallback(async () => {
+        if (!enabled || !navigator.mediaDevices?.enumerateDevices)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            const deviceList = await navigator.mediaDevices.enumerateDevices();
+            setDevices(deviceList.filter(isAudioInput).map(mediaDeviceToMicOption));
+        }
+        catch (caughtError) {
+            setError(caughtError instanceof Error ? caughtError.message : "Failed to get audio devices");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [enabled]);
+    const loadDevices = React.useCallback(async () => {
+        if (!enabled || !navigator.mediaDevices?.getUserMedia)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            for (const track of stream.getTracks())
+                track.stop();
+            const deviceList = await navigator.mediaDevices.enumerateDevices();
+            setDevices(deviceList.filter(isAudioInput).map(mediaDeviceToMicOption));
+            setHasPermission(true);
+        }
+        catch (caughtError) {
+            setError(caughtError instanceof Error ? caughtError.message : "Failed to get audio devices");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [enabled]);
+    React.useEffect(() => {
+        void loadDevicesWithoutPermission();
+    }, [loadDevicesWithoutPermission]);
+    React.useEffect(() => {
+        if (!enabled || !navigator.mediaDevices?.addEventListener)
+            return;
+        const handleDeviceChange = () => {
+            void (hasPermission ? loadDevices() : loadDevicesWithoutPermission());
+        };
+        navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+        return () => navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+    }, [enabled, hasPermission, loadDevices, loadDevicesWithoutPermission]);
+    return { devices, error, hasPermission, loadDevices, loading };
+}
+function MicSelectorTrigger({ children, ...props }) {
+    const { setWidth } = useMicSelector();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            if (entry?.target instanceof HTMLElement)
+                setWidth(entry.target.offsetWidth);
+        });
+        resizeObserver.observe(ref.current);
+        return () => resizeObserver.disconnect();
+    }, [setWidth]);
+    return (_jsx(PopoverTrigger, { ref: ref, ...props, children: children }));
+}
+function MicSelectorContent({ className, popoverOptions, style, ...props }) {
+    const { width } = useMicSelector();
+    const { className: popoverClassName, style: popoverStyle, ...popoverContentOptions } = popoverOptions ?? {};
+    return (_jsx(PopoverContent, { align: "start", ...popoverContentOptions, ...props, className: cn("p-0", popoverClassName, className), style: { ...popoverStyle, ...style, width }, children: _jsx(Command, { children: props.children }) }));
+}
+function MicSelectorInput(props) {
+    return _jsx(CommandInput, { ...props });
+}
+function MicSelectorList({ children, ...props }) {
+    const { data } = useMicSelector();
+    return _jsx(CommandList, { ...props, children: children(data) });
+}
+function MicSelectorEmpty({ children = "No microphone found.", ...props }) {
+    return _jsx(CommandEmpty, { ...props, children: children });
+}
+function MicSelectorItem({ children, mic, onSelect, value, ...props }) {
+    const { setOpen, setValue } = useMicSelector();
+    const itemValue = value ?? mic?.id;
+    return (_jsx(CommandItem, { onSelect: (currentValue) => {
+            setValue(itemValue ?? currentValue);
+            setOpen(false);
+            onSelect?.(currentValue);
+        }, value: itemValue, ...props, children: children ?? (mic ? _jsx(MicSelectorLabel, { mic: mic }) : null) }));
+}
+function MicSelectorLabel({ className, mic, ...props }) {
+    const matches = mic.label.match(deviceIdRegex);
+    const deviceId = matches?.[1];
+    const name = deviceId ? mic.label.replace(deviceIdRegex, "").trim() : mic.label;
+    return (_jsxs("span", { className: cn("grid min-w-0 gap-0.5", className), ...props, children: [_jsx("span", { className: "truncate", children: name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: mic.description ?? (deviceId ? `Device ${deviceId}` : "Audio input") })] }));
+}
+function MicSelectorValue({ className, placeholder = "Select microphone...", ...props }) {
+    const { data, value } = useMicSelector();
+    const currentDevice = data.find((device) => device.id === value);
+    return (_jsx("span", { className: cn("truncate", className), ...props, children: currentDevice?.label ?? placeholder }));
+}
+function isAudioInput(device) {
+    return device.kind === "audioinput";
+}
+function mediaDeviceToMicOption(device) {
+    return {
+        description: device.groupId ? `Group ${device.groupId.slice(0, 8)}` : undefined,
+        id: device.deviceId,
+        label: device.label || "Microphone",
+        mediaType: device.kind,
+    };
+}
+export { MicSelector, MicSelectorContent, MicSelectorEmpty, MicSelectorInput, MicSelectorItem, MicSelectorLabel, MicSelectorList, MicSelectorTrigger, MicSelectorValue, useAudioDevices, useMicSelector, };

package/dist/components/agentic/node.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+import { Position } from "@xyflow/react";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ciridae/ui/card";
+type NodeProps = React.ComponentProps<typeof Card> & {
+    handles?: {
+        source?: boolean;
+        target?: boolean;
+    };
+    sourcePosition?: Position;
+    targetPosition?: Position;
+};
+type NodeHeaderProps = React.ComponentProps<typeof CardHeader>;
+type NodeTitleProps = React.ComponentProps<typeof CardTitle>;
+type NodeDescriptionProps = React.ComponentProps<typeof CardDescription>;
+type NodeActionProps = React.ComponentProps<typeof CardAction>;
+type NodeContentProps = React.ComponentProps<typeof CardContent>;
+type NodeFooterProps = React.ComponentProps<typeof CardFooter>;
+declare function Node({ children, className, handles, sourcePosition, targetPosition, ...props }: NodeProps): React.JSX.Element;
+declare function NodeHeader({ className, ...props }: NodeHeaderProps): React.JSX.Element;
+declare function NodeTitle(props: NodeTitleProps): React.JSX.Element;
+declare function NodeDescription(props: NodeDescriptionProps): React.JSX.Element;
+declare function NodeAction(props: NodeActionProps): React.JSX.Element;
+declare function NodeContent({ className, ...props }: NodeContentProps): React.JSX.Element;
+declare function NodeFooter({ className, ...props }: NodeFooterProps): React.JSX.Element;
+export { Node, NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle };
+export type { NodeActionProps, NodeContentProps, NodeDescriptionProps, NodeFooterProps, NodeHeaderProps, NodeProps, NodeTitleProps, };

package/dist/components/agentic/node.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@ciridae/ui/card";
+import { cn } from "@ciridae/ui/utils";
+function Node({ children, className, handles = { source: true, target: true }, sourcePosition = Position.Right, targetPosition = Position.Left, ...props }) {
+    return (_jsxs(Card, { "data-slot": "node", className: cn("relative min-w-60 gap-3 py-4 shadow-xs", "data-[selected=true]:border-ring data-[selected=true]:ring-2 data-[selected=true]:ring-ring/20", className), ...props, children: [handles.target ? _jsx(NodeHandle, { position: targetPosition, type: "target" }) : null, children, handles.source ? _jsx(NodeHandle, { position: sourcePosition, type: "source" }) : null] }));
+}
+function NodeHandle({ position, type }) {
+    return (_jsx(Handle, { className: "size-2.5! border-2! border-background! bg-foreground!", position: position, type: type }));
+}
+function NodeHeader({ className, ...props }) {
+    return _jsx(CardHeader, { className: cn("gap-1 px-4", className), ...props });
+}
+function NodeTitle(props) {
+    return _jsx(CardTitle, { ...props });
+}
+function NodeDescription(props) {
+    return _jsx(CardDescription, { ...props });
+}
+function NodeAction(props) {
+    return _jsx(CardAction, { ...props });
+}
+function NodeContent({ className, ...props }) {
+    return _jsx(CardContent, { className: cn("px-4 text-sm", className), ...props });
+}
+function NodeFooter({ className, ...props }) {
+    return (_jsx(CardFooter, { className: cn("items-center justify-between px-4 text-xs", className), ...props }));
+}
+export { Node, NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle };

package/dist/components/agentic/open-in-chat.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+type OpenInChatProps = React.ComponentProps<typeof Button> & {
+    label?: string;
+    metadataLabel?: string;
+};
+declare function OpenInChat({ children, className, label, metadataLabel, size, type, variant, ...props }: OpenInChatProps): React.JSX.Element;
+export { OpenInChat };
+export type { OpenInChatProps };

package/dist/components/agentic/open-in-chat.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageSquareTextIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+function OpenInChat({ children, className, label = "Open in chat", metadataLabel, size = "sm", type = "button", variant = "outline", ...props }) {
+    return (_jsx(Button, { "data-slot": "open-in-chat", className: cn("max-w-full justify-start", className), size: size, type: type, variant: variant, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(MessageSquareTextIcon, { "aria-hidden": "true", className: "size-4" }), _jsx("span", { className: "truncate", children: label }), metadataLabel ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: metadataLabel })) : null] })) }));
+}
+export { OpenInChat };

package/dist/components/agentic/package-info.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+import { Badge } from "@ciridae/ui/badge";
+type PackageChangeType = "added" | "major" | "minor" | "patch" | "removed";
+type PackageInfoProps = React.ComponentProps<"div"> & {
+    changeType?: PackageChangeType;
+    name: string;
+    version?: string;
+};
+type PackageInfoHeaderProps = React.ComponentProps<"div">;
+type PackageInfoNameProps = React.ComponentProps<"div">;
+type PackageInfoChangeTypeProps = React.ComponentProps<typeof Badge>;
+type PackageInfoVersionProps = React.ComponentProps<"div">;
+type PackageInfoDescriptionProps = React.ComponentProps<"p">;
+type PackageInfoContentProps = React.ComponentProps<"div">;
+type PackageInfoDependenciesProps = React.ComponentProps<"div">;
+type PackageInfoDependencyProps = React.ComponentProps<"div"> & {
+    name: string;
+    version?: string;
+};
+declare function PackageInfo({ children, className, changeType, name, version, ...props }: PackageInfoProps): React.JSX.Element;
+declare function PackageInfoHeader({ className, ...props }: PackageInfoHeaderProps): React.JSX.Element;
+declare function PackageInfoName({ className, ...props }: PackageInfoNameProps): React.JSX.Element;
+declare function PackageInfoChangeType({ children, variant, ...props }: PackageInfoChangeTypeProps): React.JSX.Element | null;
+declare function PackageInfoVersion({ className, ...props }: PackageInfoVersionProps): React.JSX.Element;
+declare function PackageInfoDescription({ className, ...props }: PackageInfoDescriptionProps): React.JSX.Element;
+declare function PackageInfoContent({ className, ...props }: PackageInfoContentProps): React.JSX.Element;
+declare function PackageInfoDependencies({ className, ...props }: PackageInfoDependenciesProps): React.JSX.Element;
+declare function PackageInfoDependency({ children, className, name, version, ...props }: PackageInfoDependencyProps): React.JSX.Element;
+export { PackageInfo, PackageInfoChangeType, PackageInfoContent, PackageInfoDependencies, PackageInfoDependency, PackageInfoDescription, PackageInfoHeader, PackageInfoName, PackageInfoVersion, };
+export type { PackageChangeType, PackageInfoChangeTypeProps, PackageInfoContentProps, PackageInfoDependenciesProps, PackageInfoDependencyProps, PackageInfoDescriptionProps, PackageInfoHeaderProps, PackageInfoNameProps, PackageInfoProps, PackageInfoVersionProps, };

package/dist/components/agentic/package-info.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PackageIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+const PackageInfoContext = createContext({ name: "" });
+function usePackageInfo() {
+    return useContext(PackageInfoContext);
+}
+function PackageInfo({ children, className, changeType, name, version, ...props }) {
+    const contextValue = useMemo(() => ({ changeType, name, version }), [changeType, name, version]);
+    return (_jsx(PackageInfoContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "package-info", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props, children: children }) }));
+}
+function PackageInfoHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "package-info-header", className: cn("flex min-w-0 items-start justify-between gap-3", className), ...props }));
+}
+function PackageInfoName({ className, ...props }) {
+    const { name } = usePackageInfo();
+    return (_jsxs("div", { "data-slot": "package-info-name", className: cn("flex min-w-0 items-center gap-2 text-sm font-medium", className), ...props, children: [_jsx(PackageIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: props.children ?? name })] }));
+}
+function PackageInfoChangeType({ children, variant = "outline", ...props }) {
+    const { changeType } = usePackageInfo();
+    const label = children ?? changeType;
+    if (!label)
+        return null;
+    return (_jsx(Badge, { "data-slot": "package-info-change-type", variant: variant, ...props, children: label }));
+}
+function PackageInfoVersion({ className, ...props }) {
+    const { version } = usePackageInfo();
+    return (_jsx("div", { "data-slot": "package-info-version", className: cn("font-mono text-xs text-muted-foreground", className), ...props, children: props.children ?? version }));
+}
+function PackageInfoDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "package-info-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function PackageInfoContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "package-info-content", className: cn("grid gap-3", className), ...props });
+}
+function PackageInfoDependencies({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "package-info-dependencies", className: cn("grid gap-1", className), ...props }));
+}
+function PackageInfoDependency({ children, className, name, version, ...props }) {
+    return (_jsxs("div", { "data-slot": "package-info-dependency", className: cn("flex min-w-0 items-center justify-between gap-3 rounded-md bg-muted/40 px-2 py-1 text-sm", className), ...props, children: [_jsx("span", { className: "truncate font-mono text-xs", children: children ?? name }), version ? (_jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: version })) : null] }));
+}
+export { PackageInfo, PackageInfoChangeType, PackageInfoContent, PackageInfoDependencies, PackageInfoDependency, PackageInfoDescription, PackageInfoHeader, PackageInfoName, PackageInfoVersion, };

package/dist/components/agentic/panel.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+type PanelProps = React.ComponentProps<typeof PanelPrimitive>;
+declare function Panel({ className, ...props }: PanelProps): React.JSX.Element;
+export { Panel };
+export type { PanelProps };

package/dist/components/agentic/panel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+import { cn } from "@ciridae/ui/utils";
+function Panel({ className, ...props }) {
+    return (_jsx(PanelPrimitive, { "data-slot": "panel", className: cn("rounded-lg border bg-card p-2 text-card-foreground shadow-xs", className), ...props }));
+}
+export { Panel };

package/dist/components/agentic/persona.d.ts

@@ -0,0 +1,16 @@
+import type { RiveParameters } from "@rive-app/react-webgl2";
+import type * as React from "react";
+type PersonaState = "idle" | "listening" | "thinking" | "speaking" | "asleep";
+type PersonaContainerProps = Omit<React.ComponentProps<"div">, "onLoad" | "onLoadError" | "onPause" | "onPlay" | "onReady" | "onStop">;
+type PersonaProps = PersonaContainerProps & {
+    onLoad?: RiveParameters["onLoad"];
+    onLoadError?: RiveParameters["onLoadError"];
+    onPause?: RiveParameters["onPause"];
+    onPlay?: RiveParameters["onPlay"];
+    onReady?: () => void;
+    onStop?: RiveParameters["onStop"];
+    state?: PersonaState;
+};
+declare const Persona: React.MemoExoticComponent<({ className, onLoad, onLoadError, onPause, onPlay, onReady, onStop, state, ...props }: PersonaProps) => React.JSX.Element>;
+export { Persona };
+export type { PersonaProps, PersonaState };