@ciridae/ui-agent 0.3.2 → 0.3.6

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

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { AgenticTranscriptSegment } from "./types";
+type TranscriptionProps = React.ComponentProps<"div"> & {
+    segments?: AgenticTranscriptSegment[];
+};
+type TranscriptionSegmentProps = React.ComponentProps<"div"> & {
+    segment?: AgenticTranscriptSegment;
+};
+type TranscriptionSpeakerProps = React.ComponentProps<"span">;
+type TranscriptionTextProps = React.ComponentProps<"p">;
+type TranscriptionTimestampProps = React.ComponentProps<"span">;
+type TranscriptionEmptyProps = React.ComponentProps<"div">;
+declare function Transcription({ children, className, segments, ...props }: TranscriptionProps): React.JSX.Element;
+declare function TranscriptionSegment({ children, className, segment, ...props }: TranscriptionSegmentProps): React.JSX.Element;
+declare function TranscriptionSpeaker({ className, ...props }: TranscriptionSpeakerProps): React.JSX.Element;
+declare function TranscriptionText({ className, ...props }: TranscriptionTextProps): React.JSX.Element;
+declare function TranscriptionTimestamp({ className, ...props }: TranscriptionTimestampProps): React.JSX.Element;
+declare function TranscriptionEmpty({ className, children, ...props }: TranscriptionEmptyProps): React.JSX.Element;
+export { Transcription, TranscriptionEmpty, TranscriptionSegment, TranscriptionSpeaker, TranscriptionText, TranscriptionTimestamp, };
+export type { TranscriptionEmptyProps, TranscriptionProps, TranscriptionSegmentProps, TranscriptionSpeakerProps, TranscriptionTextProps, TranscriptionTimestampProps, };

package/dist/components/agentic/transcription.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+function Transcription({ children, className, segments, ...props }) {
+    return (_jsx("div", { "data-slot": "transcription", className: cn("grid max-h-80 gap-2 overflow-auto rounded-lg border bg-card p-3", className), ...props, children: children ??
+            (segments && segments.length > 0 ? (segments.map((segment) => _jsx(TranscriptionSegment, { segment: segment }, segment.id))) : (_jsx(TranscriptionEmpty, {}))) }));
+}
+function TranscriptionSegment({ children, className, segment, ...props }) {
+    return (_jsx("div", { "data-role": segment?.role, "data-slot": "transcription-segment", "data-status": segment?.status, className: cn("grid gap-1 rounded-md px-2 py-1.5", "data-[role=assistant]:bg-muted/40 data-[status=error]:bg-destructive/5 data-[status=interim]:opacity-70", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx(TranscriptionSpeaker, { children: getSpeakerLabel(segment) }), segment?.createdAt ? (_jsx(TranscriptionTimestamp, { children: segment.createdAt })) : null] }), _jsx(TranscriptionText, { children: segment?.text }), segment?.status && segment.status !== "final" ? (_jsx(Badge, { className: "w-fit", variant: segment.status === "error" ? "destructive" : "outline", children: segment.status })) : null] })) }));
+}
+function TranscriptionSpeaker({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "transcription-speaker", className: cn("text-xs font-medium text-muted-foreground", className), ...props }));
+}
+function TranscriptionText({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "transcription-text", className: cn("text-sm leading-relaxed text-foreground", className), ...props }));
+}
+function TranscriptionTimestamp({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "transcription-timestamp", className: cn("font-mono text-xs text-muted-foreground tabular-nums", className), ...props }));
+}
+function TranscriptionEmpty({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "transcription-empty", className: cn("rounded-md bg-muted/40 p-4 text-sm text-muted-foreground", className), ...props, children: children ?? "No transcript yet" }));
+}
+function getSpeakerLabel(segment) {
+    if (!segment)
+        return "Speaker";
+    if (segment.role === "assistant")
+        return "Assistant";
+    if (segment.role === "system")
+        return "System";
+    return "You";
+}
+export { Transcription, TranscriptionEmpty, TranscriptionSegment, TranscriptionSpeaker, TranscriptionText, TranscriptionTimestamp, };

package/dist/components/agentic/use-controllable-state.d.ts

@@ -0,0 +1,6 @@
+declare function useControllableState<T>({ defaultValue, onChange, value, }: {
+    defaultValue: T;
+    onChange?: (value: T) => void;
+    value?: T;
+}): readonly [T, (nextValue: T) => void];
+export { useControllableState };

package/dist/components/agentic/use-controllable-state.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+function useControllableState({ defaultValue, onChange, value, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const setCurrentValue = React.useCallback((nextValue) => {
+        if (!isControlled)
+            setInternalValue(nextValue);
+        onChange?.(nextValue);
+    }, [isControlled, onChange]);
+    return [currentValue, setCurrentValue];
+}
+export { useControllableState };

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

@@ -0,0 +1,69 @@
+import * as React from "react";
+import type { AgenticVoiceOption } from "./types";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "@ciridae/ui/dialog";
+type VoiceSelectorContextValue = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setValue: (value: string | undefined) => void;
+    value: string | undefined;
+    voices: AgenticVoiceOption[];
+};
+type VoiceSelectorProps = React.ComponentProps<typeof Dialog> & {
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+    value?: string;
+    voices?: AgenticVoiceOption[];
+};
+type VoiceSelectorTriggerProps = React.ComponentProps<typeof DialogTrigger>;
+type VoiceSelectorContentProps = React.ComponentProps<typeof DialogContent> & {
+    title?: React.ReactNode;
+};
+type VoiceSelectorDialogProps = React.ComponentProps<typeof CommandDialog>;
+type VoiceSelectorInputProps = React.ComponentProps<typeof CommandInput>;
+type VoiceSelectorListProps = React.ComponentProps<typeof CommandList>;
+type VoiceSelectorEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type VoiceSelectorGroupProps = React.ComponentProps<typeof CommandGroup>;
+type VoiceSelectorItemProps = React.ComponentProps<typeof CommandItem> & {
+    voice?: AgenticVoiceOption;
+};
+type VoiceSelectorShortcutProps = React.ComponentProps<typeof CommandShortcut>;
+type VoiceSelectorSeparatorProps = React.ComponentProps<typeof CommandSeparator>;
+type VoiceSelectorMetadataProps = React.ComponentProps<"span"> & {
+    value?: string;
+};
+type VoiceSelectorNameProps = React.ComponentProps<"span">;
+type VoiceSelectorDescriptionProps = React.ComponentProps<"span">;
+type VoiceSelectorAttributesProps = React.ComponentProps<"div">;
+type VoiceSelectorBulletProps = React.ComponentProps<"span">;
+type VoiceSelectorValueProps = React.ComponentProps<"span"> & {
+    placeholder?: string;
+};
+type VoiceSelectorPreviewProps = Omit<React.ComponentProps<"button">, "children"> & {
+    loading?: boolean;
+    onPlay?: () => void;
+    playing?: boolean;
+};
+declare function VoiceSelector({ children, defaultOpen, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, voices, ...props }: VoiceSelectorProps): React.JSX.Element;
+declare function useVoiceSelector(): VoiceSelectorContextValue;
+declare function VoiceSelectorTrigger(props: VoiceSelectorTriggerProps): React.JSX.Element;
+declare function VoiceSelectorContent({ children, className, title, ...props }: VoiceSelectorContentProps): React.JSX.Element;
+declare function VoiceSelectorDialog(props: VoiceSelectorDialogProps): React.JSX.Element;
+declare function VoiceSelectorInput({ className, ...props }: VoiceSelectorInputProps): React.JSX.Element;
+declare function VoiceSelectorList(props: VoiceSelectorListProps): React.JSX.Element;
+declare function VoiceSelectorEmpty(props: VoiceSelectorEmptyProps): React.JSX.Element;
+declare function VoiceSelectorGroup(props: VoiceSelectorGroupProps): React.JSX.Element;
+declare function VoiceSelectorItem({ children, onSelect, value, voice, ...props }: VoiceSelectorItemProps): React.JSX.Element;
+declare function VoiceSelectorShortcut(props: VoiceSelectorShortcutProps): React.JSX.Element;
+declare function VoiceSelectorSeparator(props: VoiceSelectorSeparatorProps): React.JSX.Element;
+declare function VoiceSelectorGender({ className, value, ...props }: VoiceSelectorMetadataProps): React.JSX.Element;
+declare function VoiceSelectorAccent({ children, className, value, ...props }: VoiceSelectorMetadataProps): React.JSX.Element;
+declare function VoiceSelectorAge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function VoiceSelectorName({ className, ...props }: VoiceSelectorNameProps): React.JSX.Element;
+declare function VoiceSelectorDescription({ className, ...props }: VoiceSelectorDescriptionProps): React.JSX.Element;
+declare function VoiceSelectorAttributes({ className, ...props }: VoiceSelectorAttributesProps): React.JSX.Element;
+declare function VoiceSelectorBullet({ className, ...props }: VoiceSelectorBulletProps): React.JSX.Element;
+declare function VoiceSelectorValue({ className, placeholder, ...props }: VoiceSelectorValueProps): React.JSX.Element;
+declare function VoiceSelectorPreview({ className, loading, onClick, onPlay, playing, type, ...props }: VoiceSelectorPreviewProps): React.JSX.Element;
+export { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorAttributes, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorDialog, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorGroup, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorSeparator, VoiceSelectorShortcut, VoiceSelectorTrigger, VoiceSelectorValue, useVoiceSelector, };
+export type { VoiceSelectorAttributesProps, VoiceSelectorBulletProps, VoiceSelectorContentProps, VoiceSelectorDescriptionProps, VoiceSelectorDialogProps, VoiceSelectorEmptyProps, VoiceSelectorGroupProps, VoiceSelectorInputProps, VoiceSelectorItemProps, VoiceSelectorListProps, VoiceSelectorNameProps, VoiceSelectorPreviewProps, VoiceSelectorProps, VoiceSelectorSeparatorProps, VoiceSelectorShortcutProps, VoiceSelectorTriggerProps, VoiceSelectorValueProps, };

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { CircleSmallIcon, MarsIcon, PauseIcon, PlayIcon, TransgenderIcon, VenusAndMarsIcon, VenusIcon, } from "lucide-react";
+import * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@ciridae/ui/dialog";
+import { Spinner } from "@ciridae/ui/spinner";
+import { cn } from "@ciridae/ui/utils";
+import { useControllableState } from "./use-controllable-state";
+const VoiceSelectorContext = React.createContext(null);
+function VoiceSelector({ children, defaultOpen = false, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, voices = [], ...props }) {
+    const [value, setValue] = useControllableState({
+        defaultValue,
+        onChange: onValueChange,
+        value: valueProp,
+    });
+    const [open, setOpen] = useControllableState({
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+        value: openProp,
+    });
+    const contextValue = React.useMemo(() => ({ open, setOpen, setValue, value, voices }), [open, setOpen, setValue, value, voices]);
+    return (_jsx(VoiceSelectorContext.Provider, { value: contextValue, children: _jsx(Dialog, { onOpenChange: setOpen, open: open, ...props, children: children ?? _jsx(VoiceSelectorDefaultContent, {}) }) }));
+}
+function VoiceSelectorDefaultContent() {
+    const { voices } = useVoiceSelector();
+    return (_jsxs(_Fragment, { children: [_jsx(VoiceSelectorTrigger, { asChild: true, children: _jsx(Button, { className: "w-64 justify-between", variant: "outline", children: _jsx(VoiceSelectorValue, { className: "max-w-52 text-left" }) }) }), _jsxs(VoiceSelectorContent, { children: [_jsx(VoiceSelectorInput, { placeholder: "Search voices..." }), _jsxs(VoiceSelectorList, { children: [_jsx(VoiceSelectorEmpty, { children: "No voices found." }), _jsx(VoiceSelectorGroup, { heading: "Voices", children: voices.map((voice) => (_jsx(VoiceSelectorItem, { voice: voice }, voice.id))) })] })] })] }));
+}
+function useVoiceSelector() {
+    const context = React.useContext(VoiceSelectorContext);
+    if (!context)
+        throw new Error("VoiceSelector components must be used within VoiceSelector");
+    return context;
+}
+function VoiceSelectorTrigger(props) {
+    return _jsx(DialogTrigger, { ...props });
+}
+function VoiceSelectorContent({ children, className, title = "Voice selector", ...props }) {
+    return (_jsxs(DialogContent, { "aria-describedby": undefined, className: cn("overflow-hidden p-0 sm:max-w-xl", className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
+}
+function VoiceSelectorDialog(props) {
+    return _jsx(CommandDialog, { ...props });
+}
+function VoiceSelectorInput({ className, ...props }) {
+    return _jsx(CommandInput, { className: cn("h-auto py-3", className), ...props });
+}
+function VoiceSelectorList(props) {
+    return _jsx(CommandList, { ...props });
+}
+function VoiceSelectorEmpty(props) {
+    return _jsx(CommandEmpty, { ...props });
+}
+function VoiceSelectorGroup(props) {
+    return _jsx(CommandGroup, { ...props });
+}
+function VoiceSelectorItem({ children, onSelect, value, voice, ...props }) {
+    const { setOpen, setValue } = useVoiceSelector();
+    const itemValue = value ?? voice?.id;
+    return (_jsx(CommandItem, { onSelect: (currentValue) => {
+            setValue(itemValue ?? currentValue);
+            setOpen(false);
+            onSelect?.(currentValue);
+        }, value: itemValue, ...props, children: children ?? (voice ? _jsx(VoiceSelectorOption, { voice: voice }) : null) }));
+}
+function VoiceSelectorOption({ voice }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx(VoiceSelectorName, { children: voice.label }), _jsxs(VoiceSelectorAttributes, { children: [voice.gender ? _jsx(VoiceSelectorGender, { value: voice.gender }) : null, voice.accent ? _jsx(VoiceSelectorAccent, { value: voice.accent }) : null, voice.age ? _jsx(VoiceSelectorAge, { children: voice.age }) : null] }), voice.description ? (_jsx(VoiceSelectorDescription, { children: voice.description })) : null] }), voice.previewLabel ? (_jsx(VoiceSelectorShortcut, { children: voice.previewLabel })) : null] }));
+}
+function VoiceSelectorShortcut(props) {
+    return _jsx(CommandShortcut, { ...props });
+}
+function VoiceSelectorSeparator(props) {
+    return _jsx(CommandSeparator, { ...props });
+}
+function VoiceSelectorGender({ className, value, ...props }) {
+    return (_jsx("span", { className: cn("inline-flex items-center gap-1", className), ...props, children: _jsx(VoiceSelectorGenderIcon, { value: value }) }));
+}
+function VoiceSelectorAccent({ children, className, value, ...props }) {
+    return (_jsx("span", { className: cn("font-mono text-[0.6875rem] uppercase", className), ...props, children: children ?? value }));
+}
+function VoiceSelectorAge({ className, ...props }) {
+    return _jsx("span", { className: cn("text-[0.6875rem]", className), ...props });
+}
+function VoiceSelectorName({ className, ...props }) {
+    return _jsx("span", { className: cn("truncate font-medium", className), ...props });
+}
+function VoiceSelectorDescription({ className, ...props }) {
+    return _jsx("span", { className: cn("truncate text-xs text-muted-foreground", className), ...props });
+}
+function VoiceSelectorAttributes({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+function VoiceSelectorBullet({ className, ...props }) {
+    return (_jsx("span", { className: cn("text-muted-foreground", className), ...props, children: "-" }));
+}
+function VoiceSelectorValue({ className, placeholder = "Select voice", ...props }) {
+    const { value, voices } = useVoiceSelector();
+    const voice = voices.find((candidate) => candidate.id === value);
+    return (_jsx("span", { className: cn("truncate", className), ...props, children: voice?.label ?? placeholder }));
+}
+function VoiceSelectorPreview({ className, loading, onClick, onPlay, playing, type = "button", ...props }) {
+    const Icon = loading ? Spinner : playing ? PauseIcon : PlayIcon;
+    return (_jsx("button", { "aria-label": playing ? "Pause voice preview" : "Play voice preview", className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded-md border bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground", className), onClick: (event) => {
+            event.stopPropagation();
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                onPlay?.();
+        }, ...props, type: type, children: _jsx(Icon, { className: "size-3.5" }) }));
+}
+function VoiceSelectorGenderIcon({ value }) {
+    if (value === "male")
+        return _jsx(MarsIcon, { className: "size-3.5" });
+    if (value === "female")
+        return _jsx(VenusIcon, { className: "size-3.5" });
+    if (value === "transgender")
+        return _jsx(TransgenderIcon, { className: "size-3.5" });
+    if (value === "androgyne" || value === "intersex") {
+        return _jsx(VenusAndMarsIcon, { className: "size-3.5" });
+    }
+    return _jsx(CircleSmallIcon, { className: "size-3.5" });
+}
+export { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorAttributes, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorDialog, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorGroup, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorSeparator, VoiceSelectorShortcut, VoiceSelectorTrigger, VoiceSelectorValue, useVoiceSelector, };

package/dist/components/blocks/artifact-workbench.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+type ArtifactWorkbenchProps = React.ComponentProps<"div"> & {
+    code: string;
+    previewUrl: string;
+    title: string;
+};
+declare function ArtifactWorkbench({ className, code, previewUrl, title, ...props }: ArtifactWorkbenchProps): React.JSX.Element;
+export { ArtifactWorkbench };
+export type { ArtifactWorkbenchProps };

package/dist/components/blocks/artifact-workbench.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Artifact, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from "../agentic/artifact";
+import { CodeBlock, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle, } from "../agentic/code-block";
+import { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger, } from "../agentic/sandbox";
+import { WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, } from "../agentic/web-preview";
+import { cn } from "@ciridae/ui/utils";
+function ArtifactWorkbench({ className, code, previewUrl, title, ...props }) {
+    return (_jsxs("div", { "data-slot": "artifact-workbench", className: cn("grid w-full gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]", className), ...props, children: [_jsx(ArtifactWorkbenchPreviewPane, { previewUrl: previewUrl, title: title }), _jsx(ArtifactWorkbenchSourcePane, { code: code })] }));
+}
+function ArtifactWorkbenchPreviewPane({ previewUrl, title, }) {
+    return (_jsxs(Artifact, { children: [_jsx(ArtifactHeader, { children: _jsx(ArtifactWorkbenchTitle, { title: title }) }), _jsx(ArtifactContent, { children: _jsx(ArtifactWorkbenchWebPreview, { previewUrl: previewUrl }) })] }));
+}
+function ArtifactWorkbenchTitle({ title }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ArtifactTitle, { children: title }), _jsx(ArtifactDescription, { children: "Generated output preview." })] }));
+}
+function ArtifactWorkbenchWebPreview({ previewUrl }) {
+    return (_jsxs(WebPreview, { url: previewUrl, children: [_jsxs(WebPreviewNavigation, { children: [_jsx(WebPreviewNavigationButton, { action: "back" }), _jsx(WebPreviewNavigationButton, { action: "forward" }), _jsx(WebPreviewUrl, {})] }), _jsx(WebPreviewBody, {})] }));
+}
+function ArtifactWorkbenchSourcePane({ code }) {
+    return (_jsxs(Sandbox, { defaultOpen: true, children: [_jsx(SandboxHeader, { description: "Review generated source.", title: "Source" }), _jsx(SandboxContent, { children: _jsx(ArtifactWorkbenchSourceTabs, { code: code }) })] }));
+}
+function ArtifactWorkbenchSourceTabs({ code }) {
+    return (_jsxs(SandboxTabs, { defaultValue: "code", children: [_jsx(SandboxTabsBar, { children: _jsx(SandboxTabsList, { children: _jsx(SandboxTabsTrigger, { value: "code", children: "Code" }) }) }), _jsx(SandboxTabContent, { value: "code", children: _jsx(ArtifactWorkbenchCode, { code: code }) })] }));
+}
+function ArtifactWorkbenchCode({ code }) {
+    return (_jsxs(CodeBlock, { code: code, language: "tsx", children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { children: "component.tsx" }), _jsx(CodeBlockCopyButton, {})] }), _jsx(CodeBlockContent, {})] }));
+}
+export { ArtifactWorkbench };

package/dist/components/blocks/tool-approval-panel.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import type { AgenticApproval, AgenticToolPart } from "../agentic/types";
+type ToolApprovalPanelProps = React.ComponentProps<"div"> & {
+    approval?: AgenticApproval;
+    onApprove?: () => void;
+    onReject?: () => void;
+    tool: AgenticToolPart;
+};
+declare function ToolApprovalPanel({ approval, className, onApprove, onReject, tool, ...props }: ToolApprovalPanelProps): React.JSX.Element;
+export { ToolApprovalPanel };
+export type { ToolApprovalPanelProps };

package/dist/components/blocks/tool-approval-panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApprovalRequest, ApprovalRequestAction, ApprovalRequestActions, ApprovalRequestDescription, ApprovalRequestPending, ApprovalRequestTitle, } from "../agentic/approval-request";
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "../agentic/tool";
+import { cn } from "@ciridae/ui/utils";
+function ToolApprovalPanel({ approval, className, onApprove, onReject, tool, ...props }) {
+    return (_jsx("div", { "data-slot": "tool-approval-panel", className: cn("grid gap-3", className), ...props, children: _jsxs(Tool, { defaultOpen: true, children: [_jsx(ToolHeader, { state: tool.state, title: tool.toolName, type: tool.type }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: tool.input }), _jsx(ToolApprovalPanelRequest, { approval: approval, onApprove: onApprove, onReject: onReject, state: tool.state }), _jsx(ToolOutput, { errorText: tool.errorText, output: tool.output })] })] }) }));
+}
+function ToolApprovalPanelRequest({ approval, onApprove, onReject, state, }) {
+    return (_jsx(ApprovalRequest, { approval: approval, state: state, children: _jsxs(ApprovalRequestPending, { children: [_jsx(ApprovalRequestTitle, { children: "Approve this tool call?" }), _jsx(ApprovalRequestDescription, { children: "Review the requested parameters before the host app continues." }), _jsxs(ApprovalRequestActions, { children: [_jsx(ApprovalRequestAction, { variant: "outline", onClick: onReject, children: "Reject" }), _jsx(ApprovalRequestAction, { onClick: onApprove, children: "Approve" })] })] }) }));
+}
+export { ToolApprovalPanel };

package/dist/components/blocks/voice-agent-panel.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { AgenticAudioSource, AgenticMicOption, AgenticSpeechStatus, AgenticTranscriptSegment, AgenticVoiceOption } from "../agentic/types";
+type VoiceAgentPanelProps = React.ComponentProps<"div"> & {
+    audio?: AgenticAudioSource;
+    mics?: AgenticMicOption[];
+    selectedMicId?: string;
+    selectedVoiceId?: string;
+    status?: AgenticSpeechStatus;
+    transcript?: AgenticTranscriptSegment[];
+    voices?: AgenticVoiceOption[];
+};
+declare function VoiceAgentPanel({ audio, className, mics, selectedMicId, selectedVoiceId, status, transcript, voices, ...props }: VoiceAgentPanelProps): React.JSX.Element;
+export { VoiceAgentPanel };
+export type { VoiceAgentPanelProps };

package/dist/components/blocks/voice-agent-panel.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AudioPlayer } from "../agentic/audio-player";
+import { MicSelector } from "../agentic/mic-selector";
+import { Persona } from "../agentic/persona";
+import { SpeechInput } from "../agentic/speech-input";
+import { Transcription } from "../agentic/transcription";
+import { VoiceSelector } from "../agentic/voice-selector";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+const defaultMics = [
+    { id: "studio", label: "Studio mic", description: "Noise reduction on" },
+    { id: "system", label: "System input", description: "Default device" },
+];
+const defaultVoices = [
+    { id: "calm", label: "Calm operator", description: "Measured and concise" },
+    { id: "bright", label: "Bright guide", description: "Higher energy" },
+];
+const defaultTranscript = [
+    {
+        id: "user-1",
+        role: "user",
+        status: "final",
+        text: "Summarize the approval risk before we let the agent update files.",
+        createdAt: "00:04",
+    },
+    {
+        id: "assistant-1",
+        role: "assistant",
+        status: "final",
+        text: "The tool request is limited to a component preview update. No runtime integration or backend state is involved.",
+        createdAt: "00:10",
+    },
+];
+function VoiceAgentPanel({ audio = {
+    description: "Latest assistant turn",
+    duration: "0:18",
+    title: "Voice response",
+}, className, mics = defaultMics, selectedMicId = "studio", selectedVoiceId = "calm", status = "listening", transcript = defaultTranscript, voices = defaultVoices, ...props }) {
+    const [resolvedMicId, setResolvedMicId] = React.useState(selectedMicId);
+    const [resolvedVoiceId, setResolvedVoiceId] = React.useState(selectedVoiceId);
+    React.useEffect(() => setResolvedMicId(selectedMicId), [selectedMicId]);
+    React.useEffect(() => setResolvedVoiceId(selectedVoiceId), [selectedVoiceId]);
+    return (_jsxs("div", { "data-slot": "voice-agent-panel", className: cn("grid w-full min-w-0 gap-4 rounded-lg border bg-background p-4", className), ...props, children: [_jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium", children: "Voice agent" }), _jsx(Badge, { variant: "outline", children: status })] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Review voice state, transcript, persona, and playback controls." })] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(MicSelector, { value: resolvedMicId, onValueChange: setResolvedMicId, mics: mics }), _jsx(VoiceSelector, { value: resolvedVoiceId, onValueChange: setResolvedVoiceId, voices: voices })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(14rem,18rem)_minmax(0,1fr)]", children: [_jsxs("div", { className: "grid gap-3", children: [_jsx(VoiceAgentPresence, { status: status }), _jsx(SpeechInput, { status: status })] }), _jsxs("div", { className: "grid min-w-0 gap-3", children: [_jsx(Transcription, { segments: transcript }), _jsx(AudioPlayer, { ...audio })] })] })] }));
+}
+function VoiceAgentPresence({ status }) {
+    return (_jsxs("div", { className: "grid justify-items-center gap-3 rounded-lg border bg-card p-4 text-center", children: [_jsx(Persona, { className: "size-40", state: getPersonaState(status) }), _jsxs("div", { className: "grid gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Operations copilot" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Focused on decisions, blockers, and next actions." })] })] }));
+}
+function getPersonaState(status) {
+    if (status === "listening")
+        return "listening";
+    if (status === "processing")
+        return "thinking";
+    if (status === "speaking")
+        return "speaking";
+    if (status === "error")
+        return "asleep";
+    return "idle";
+}
+export { VoiceAgentPanel };

package/dist/components/blocks/workflow-canvas-panel.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import type { Edge as FlowEdge, Node as FlowNode } from "@xyflow/react";
+type WorkflowNodeData = {
+    description: string;
+    status: "queued" | "running" | "complete" | "review";
+    title: string;
+    [key: string]: unknown;
+};
+type WorkflowNode = FlowNode<WorkflowNodeData, "workflow">;
+type WorkflowCanvasPanelProps = React.ComponentProps<"div"> & {
+    description?: string;
+    edges?: FlowEdge[];
+    nodes?: WorkflowNode[];
+    title?: string;
+};
+declare function WorkflowCanvasPanel({ className, description, edges, nodes, title, ...props }: WorkflowCanvasPanelProps): React.JSX.Element;
+export { WorkflowCanvasPanel };
+export type { WorkflowCanvasPanelProps };

package/dist/components/blocks/workflow-canvas-panel.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GitBranchIcon, Maximize2Icon } from "lucide-react";
+import { MarkerType, useEdgesState, useNodesState } from "@xyflow/react";
+import { useEffect } from "react";
+import { Canvas } from "../agentic/canvas";
+import { Connection } from "../agentic/connection";
+import { Controls } from "../agentic/controls";
+import { Edge } from "../agentic/edge";
+import { Node, NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle, } from "../agentic/node";
+import { Panel } from "../agentic/panel";
+import { Toolbar } from "../agentic/toolbar";
+import { Badge } from "@ciridae/ui/badge";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+const nodeTypes = { workflow: WorkflowCanvasPanelNode };
+const edgeTypes = { animated: Edge.Animated };
+const defaultNodes = [
+    {
+        id: "prompt",
+        type: "workflow",
+        position: { x: 0, y: 80 },
+        data: {
+            description: "Collect user goal and files.",
+            status: "complete",
+            title: "Prompt intake",
+        },
+    },
+    {
+        id: "plan",
+        type: "workflow",
+        position: { x: 320, y: 0 },
+        data: {
+            description: "Draft steps and dependencies.",
+            status: "complete",
+            title: "Plan",
+        },
+    },
+    {
+        id: "approval",
+        type: "workflow",
+        position: { x: 320, y: 180 },
+        data: {
+            description: "Request approval for a file edit.",
+            status: "review",
+            title: "Tool approval",
+        },
+    },
+    {
+        id: "artifact",
+        type: "workflow",
+        position: { x: 650, y: 80 },
+        data: {
+            description: "Generate preview and source.",
+            status: "running",
+            title: "Artifact",
+        },
+    },
+];
+const defaultEdges = [
+    {
+        id: "prompt-plan",
+        source: "prompt",
+        target: "plan",
+        type: "animated",
+        markerEnd: { type: MarkerType.ArrowClosed },
+    },
+    {
+        id: "prompt-approval",
+        source: "prompt",
+        target: "approval",
+        type: "animated",
+        markerEnd: { type: MarkerType.ArrowClosed },
+    },
+    {
+        id: "plan-artifact",
+        source: "plan",
+        target: "artifact",
+        type: "animated",
+        markerEnd: { type: MarkerType.ArrowClosed },
+    },
+    {
+        id: "approval-artifact",
+        source: "approval",
+        target: "artifact",
+        type: "animated",
+        markerEnd: { type: MarkerType.ArrowClosed },
+    },
+];
+function WorkflowCanvasPanel({ className, description = "UI-only agent workflow map.", edges = defaultEdges, nodes = defaultNodes, title = "Agent workflow", ...props }) {
+    const [flowNodes, setFlowNodes, onNodesChange] = useNodesState(nodes);
+    const [flowEdges, setFlowEdges, onEdgesChange] = useEdgesState(edges);
+    useEffect(() => {
+        setFlowNodes(nodes);
+    }, [nodes, setFlowNodes]);
+    useEffect(() => {
+        setFlowEdges(edges);
+    }, [edges, setFlowEdges]);
+    return (_jsx("div", { "data-slot": "workflow-canvas-panel", className: cn("grid h-full min-h-[30rem] w-full min-w-0 gap-3", className), ...props, children: _jsxs(Canvas, { className: "h-full w-full min-w-0", connectionLineComponent: Connection, edgeTypes: edgeTypes, edges: flowEdges, fitViewOptions: { padding: 0.28 }, nodeTypes: nodeTypes, nodes: flowNodes, onEdgesChange: onEdgesChange, onNodesChange: onNodesChange, children: [_jsx(Controls, {}), _jsx(Panel, { position: "top-left", children: _jsx(WorkflowCanvasPanelSummary, { description: description, title: title }) })] }) }));
+}
+function WorkflowCanvasPanelSummary({ description, title, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GitBranchIcon, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: title }), _jsx("div", { className: "text-xs text-muted-foreground", children: description })] })] }));
+}
+function WorkflowCanvasPanelNode({ data, id, selected }) {
+    return (_jsxs(Node, { "data-selected": selected ? "true" : undefined, children: [_jsx(Toolbar, { isVisible: true, nodeId: id, children: _jsx(Button, { "aria-label": `Open ${data.title}`, size: "icon", type: "button", variant: "ghost", children: _jsx(Maximize2Icon, { "aria-hidden": "true", className: "size-4" }) }) }), _jsxs(NodeHeader, { children: [_jsx(NodeTitle, { children: data.title }), _jsx(NodeAction, { children: _jsx(Badge, { variant: data.status === "review" ? "outline" : "secondary", children: data.status }) }), _jsx(NodeDescription, { children: data.description })] }), _jsx(NodeContent, { children: _jsx("div", { className: "rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: "Host apps own execution and persistence." }) }), _jsxs(NodeFooter, { children: [_jsx("span", { children: "UI only" }), _jsx("span", { className: "font-mono", children: id })] })] }));
+}
+export { WorkflowCanvasPanel };

package/dist/entries/agent-card.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-card";

package/dist/entries/agent-card.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-card";

package/dist/entries/agent-composer.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-composer";

package/dist/entries/agent-composer.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-composer";

package/dist/entries/agent-context.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-context";

package/dist/entries/agent-context.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-context";

package/dist/entries/agent-plan.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-plan";

package/dist/entries/agent-plan.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-plan";

package/dist/entries/agent-queue.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-queue";

package/dist/entries/agent-queue.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-queue";

package/dist/entries/agent-task.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-task";

package/dist/entries/agent-task.js

@@ -0,0 +1 @@
+export * from "../components/agentic/agent-task";

package/dist/entries/agentic-types.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/types";

package/dist/entries/agentic-types.js

@@ -0,0 +1 @@
+export * from "../components/agentic/types";

package/dist/entries/approval-request.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/approval-request";

package/dist/entries/approval-request.js

@@ -0,0 +1 @@
+export * from "../components/agentic/approval-request";

package/dist/entries/artifact-workbench.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/artifact-workbench";

package/dist/entries/artifact-workbench.js

@@ -0,0 +1 @@
+export * from "../components/blocks/artifact-workbench";

package/dist/entries/artifact.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/artifact";

package/dist/entries/artifact.js

@@ -0,0 +1 @@
+export * from "../components/agentic/artifact";

package/dist/entries/assistant-mark-icon.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/assistant-mark-icon";

package/dist/entries/assistant-mark-icon.js

@@ -0,0 +1 @@
+export * from "../components/agentic/assistant-mark-icon";

package/dist/entries/attachments-actions.d.ts

@@ -0,0 +1 @@
+export * from "../components/agentic/attachments-actions";

package/dist/entries/attachments-actions.js

@@ -0,0 +1 @@
+export * from "../components/agentic/attachments-actions";