@ciridae/ui-agent 0.3.2 → 0.3.6

package/dist/components/agentic/breathing-grid-icon.css

@@ -0,0 +1,45 @@
+[data-slot="breathing-grid-icon"] > rect {
+	animation: ciridae-thinking-grid 1.35s var(--motion-ease-standard, ease-in-out) infinite;
+	opacity: 0.35;
+	transform-box: fill-box;
+	transform-origin: center;
+}
+
+[data-slot="breathing-grid-icon"] > rect:nth-child(2),
+[data-slot="breathing-grid-icon"] > rect:nth-child(4) {
+	animation-delay: 90ms;
+}
+
+[data-slot="breathing-grid-icon"] > rect:nth-child(3),
+[data-slot="breathing-grid-icon"] > rect:nth-child(5),
+[data-slot="breathing-grid-icon"] > rect:nth-child(7) {
+	animation-delay: 180ms;
+}
+
+[data-slot="breathing-grid-icon"] > rect:nth-child(6),
+[data-slot="breathing-grid-icon"] > rect:nth-child(8) {
+	animation-delay: 270ms;
+}
+
+[data-slot="breathing-grid-icon"] > rect:nth-child(9) {
+	animation-delay: 360ms;
+}
+
+@keyframes ciridae-thinking-grid {
+	0%,
+	100% {
+		opacity: 0.28;
+		transform: scale(0.68);
+	}
+
+	42% {
+		opacity: 0.94;
+		transform: scale(1);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-slot="breathing-grid-icon"] > rect {
+		animation: none;
+	}
+}

package/dist/components/agentic/breathing-grid-icon.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/dist/components/agentic/breathing-grid-icon.d.ts

@@ -0,0 +1,6 @@
+import type { AriaAttributes, ComponentProps } from "react";
+import "./breathing-grid-icon.css";
+type BreathingGridIconProps = Omit<ComponentProps<"svg">, "children" | "dangerouslySetInnerHTML" | "role" | keyof AriaAttributes>;
+declare function BreathingGridIcon({ className, ...props }: BreathingGridIconProps): import("@types/react").JSX.Element;
+export { BreathingGridIcon };
+export type { BreathingGridIconProps };

package/dist/components/agentic/breathing-grid-icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./breathing-grid-icon.css";
+import { cn } from "@ciridae/ui/utils";
+function BreathingGridIcon({ className, ...props }) {
+    return (_jsxs("svg", { ...props, "aria-hidden": "true", className: cn("size-4 shrink-0 text-muted-foreground/75", className), "data-slot": "breathing-grid-icon", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("rect", { height: "3", rx: "0.75", width: "3", x: "1", y: "1" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "6.5", y: "1" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "12", y: "1" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "1", y: "6.5" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "6.5", y: "6.5" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "12", y: "6.5" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "1", y: "12" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "6.5", y: "12" }), _jsx("rect", { height: "3", rx: "0.75", width: "3", x: "12", y: "12" })] }));
+}
+export { BreathingGridIcon };

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

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { type Edge as FlowEdge, type Node as FlowNode, type ReactFlowProps } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+type CanvasProps<NodeType extends FlowNode = FlowNode, EdgeType extends FlowEdge = FlowEdge> = ReactFlowProps<NodeType, EdgeType> & {
+    children?: ReactNode;
+    showBackground?: boolean;
+};
+declare function Canvas<NodeType extends FlowNode = FlowNode, EdgeType extends FlowEdge = FlowEdge>({ children, className, colorMode, deleteKeyCode, defaultMarkerColor, fitView, maxZoom, minZoom, proOptions, showBackground, style, ...props }: CanvasProps<NodeType, EdgeType>): import("@types/react").JSX.Element;
+export { Canvas };
+export type { CanvasProps };

package/dist/components/agentic/canvas.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, ReactFlow, } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useAgenticTheme } from "./theme";
+import { cn } from "@ciridae/ui/utils";
+const defaultDeleteKeyCode = ["Backspace", "Delete"];
+const workflowEdgeColor = "color-mix(in oklch, var(--foreground) 72%, transparent)";
+const workflowEdgeColorVariable = "var(--agentic-workflow-edge-color)";
+function Canvas({ children, className, colorMode, deleteKeyCode = defaultDeleteKeyCode, defaultMarkerColor, fitView = true, maxZoom = 1.5, minZoom = 0.35, proOptions = { hideAttribution: true }, showBackground = true, style, ...props }) {
+    const resolvedColorMode = useCanvasColorMode(colorMode);
+    const canvasStyle = {
+        "--agentic-workflow-edge-color": workflowEdgeColor,
+        ...style,
+    };
+    const markerColor = defaultMarkerColor === undefined ? workflowEdgeColorVariable : defaultMarkerColor;
+    return (_jsxs(ReactFlow, { colorMode: resolvedColorMode, deleteKeyCode: deleteKeyCode, defaultMarkerColor: markerColor, fitView: fitView, maxZoom: maxZoom, minZoom: minZoom, proOptions: proOptions, style: canvasStyle, "data-slot": "canvas", className: cn("min-h-80 w-full min-w-0 rounded-lg border bg-background text-foreground", "[&_.react-flow__pane]:cursor-grab [&_.react-flow__pane.react-flow__pane-dragging]:cursor-grabbing", className), ...props, children: [showBackground ? (_jsx(Background, { className: "text-border opacity-80", color: "currentColor", gap: 24, size: 1, variant: BackgroundVariant.Dots })) : null, children] }));
+}
+function useCanvasColorMode(colorMode) {
+    const documentTheme = useAgenticTheme();
+    return colorMode ?? documentTheme;
+}
+export { Canvas };

package/dist/components/agentic/code-block.js

@@ -3,7 +3,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { codeToHtml } from "shiki";
 import { Button } from "@ciridae/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@ciridae/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ciridae/ui/select";
 import { cn } from "@ciridae/ui/utils";
 import { css } from "@ciridae/ui/styled-system/css";
 import { copyToClipboard } from "./clipboard";

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

@@ -0,0 +1,57 @@
+import { FileIcon } from "lucide-react";
+import type * as React from "react";
+import { Avatar } from "@ciridae/ui/avatar";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent } from "@ciridae/ui/collapsible";
+type CommitProps = React.ComponentProps<typeof Collapsible> & {
+    hash?: string;
+};
+type CommitHeaderProps = React.ComponentProps<"div">;
+type CommitHashProps = React.ComponentProps<"span">;
+type CommitMessageProps = React.ComponentProps<"span">;
+type CommitMetadataProps = React.ComponentProps<"div">;
+type CommitSeparatorProps = React.ComponentProps<"span">;
+type CommitInfoProps = React.ComponentProps<"div">;
+type CommitAuthorProps = React.ComponentProps<"div">;
+type CommitAuthorAvatarProps = React.ComponentProps<typeof Avatar> & {
+    fallback?: string;
+    src?: string;
+};
+type CommitTimestampProps = React.ComponentProps<"time">;
+type CommitActionsProps = React.ComponentProps<"div">;
+type CommitCopyButtonProps = React.ComponentProps<typeof Button>;
+type CommitContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type CommitFilesProps = React.ComponentProps<"div">;
+type CommitFileProps = React.ComponentProps<"div">;
+type CommitFileInfoProps = React.ComponentProps<"div">;
+type CommitFileStatusProps = React.ComponentProps<"span"> & {
+    status?: "added" | "deleted" | "modified" | "renamed";
+};
+type CommitFileIconProps = React.ComponentProps<typeof FileIcon>;
+type CommitFilePathProps = React.ComponentProps<"span">;
+type CommitFileChangesProps = React.ComponentProps<"div">;
+type CommitFileAdditionsProps = React.ComponentProps<"span">;
+type CommitFileDeletionsProps = React.ComponentProps<"span">;
+declare function Commit({ children, className, defaultOpen, hash, ...props }: CommitProps): React.JSX.Element;
+declare function CommitHeader({ children, className, ...props }: CommitHeaderProps): React.JSX.Element;
+declare function CommitHash({ className, ...props }: CommitHashProps): React.JSX.Element;
+declare function CommitMessage({ className, ...props }: CommitMessageProps): React.JSX.Element;
+declare function CommitMetadata({ className, ...props }: CommitMetadataProps): React.JSX.Element;
+declare function CommitSeparator(props: CommitSeparatorProps): React.JSX.Element;
+declare function CommitInfo({ className, ...props }: CommitInfoProps): React.JSX.Element;
+declare function CommitAuthor({ className, ...props }: CommitAuthorProps): React.JSX.Element;
+declare function CommitAuthorAvatar({ fallback, src, ...props }: CommitAuthorAvatarProps): React.JSX.Element;
+declare function CommitTimestamp(props: CommitTimestampProps): React.JSX.Element;
+declare function CommitActions({ className, ...props }: CommitActionsProps): React.JSX.Element;
+declare function CommitCopyButton({ children, onClick, type, ...props }: CommitCopyButtonProps): React.JSX.Element;
+declare function CommitContent({ className, ...props }: CommitContentProps): React.JSX.Element;
+declare function CommitFiles({ className, ...props }: CommitFilesProps): React.JSX.Element;
+declare function CommitFile({ className, ...props }: CommitFileProps): React.JSX.Element;
+declare function CommitFileInfo({ className, ...props }: CommitFileInfoProps): React.JSX.Element;
+declare function CommitFileStatus({ className, status, ...props }: CommitFileStatusProps): React.JSX.Element;
+declare function CommitFileIcon(props: CommitFileIconProps): React.JSX.Element;
+declare function CommitFilePath({ className, ...props }: CommitFilePathProps): React.JSX.Element;
+declare function CommitFileChanges({ className, ...props }: CommitFileChangesProps): React.JSX.Element;
+declare function CommitFileAdditions({ className, ...props }: CommitFileAdditionsProps): React.JSX.Element;
+declare function CommitFileDeletions({ className, ...props }: CommitFileDeletionsProps): React.JSX.Element;
+export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFiles, CommitFileStatus, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp, };

package/dist/components/agentic/commit.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, CopyIcon, FileIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@ciridae/ui/avatar";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+import { copyToClipboard } from "./clipboard";
+const CommitContext = createContext({ hash: "" });
+function Commit({ children, className, defaultOpen = true, hash = "", ...props }) {
+    const contextValue = useMemo(() => ({ hash }), [hash]);
+    return (_jsx(CommitContext.Provider, { value: contextValue, children: _jsx(Collapsible, { "data-slot": "commit", className: cn("rounded-lg border bg-card", className), defaultOpen: defaultOpen, ...props, children: children }) }));
+}
+function CommitHeader({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "commit-header", className: cn("flex w-full items-center justify-between gap-3 px-3 py-2 text-left", className), ...props, children: [children, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { "aria-label": "Toggle commit details", className: "group/commit-toggle shrink-0", size: "icon", type: "button", variant: "ghost", children: _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 transition-transform group-data-[state=open]/commit-toggle:rotate-180" }) }) })] }));
+}
+function CommitHash({ className, ...props }) {
+    const { hash } = useContext(CommitContext);
+    return (_jsx("span", { "data-slot": "commit-hash", className: cn("font-mono text-xs text-muted-foreground", className), ...props, children: props.children ?? hash.slice(0, 7) }));
+}
+function CommitMessage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "commit-message", className: cn("truncate text-sm font-medium", className), ...props }));
+}
+function CommitMetadata({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-metadata", className: cn("flex flex-wrap items-center gap-2 text-xs text-muted-foreground", className), ...props }));
+}
+function CommitSeparator(props) {
+    return (_jsx("span", { "aria-hidden": "true", "data-slot": "commit-separator", ...props, children: "/" }));
+}
+function CommitInfo({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-info", className: cn("min-w-0 flex-1 space-y-1", className), ...props }));
+}
+function CommitAuthor({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-author", className: cn("inline-flex items-center gap-1.5", className), ...props }));
+}
+function CommitAuthorAvatar({ fallback = "A", src, ...props }) {
+    return (_jsxs(Avatar, { "data-slot": "commit-author-avatar", ...props, children: [src ? _jsx(AvatarImage, { alt: "", src: src }) : null, _jsx(AvatarFallback, { children: fallback })] }));
+}
+function CommitTimestamp(props) {
+    return _jsx("time", { "data-slot": "commit-timestamp", ...props });
+}
+function CommitActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-actions", className: cn("flex shrink-0 items-center gap-1", className), ...props }));
+}
+function CommitCopyButton({ children, onClick, type = "button", ...props }) {
+    const { hash } = useContext(CommitContext);
+    const [copied, setCopied] = useState(false);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { "aria-label": copied ? "Copied" : "Copy commit hash", size: "icon", variant: "ghost", ...props, type: type, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                void copyToClipboard(hash, setCopied);
+        }, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function CommitContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "commit-content", className: cn("border-t p-3", className), ...props }));
+}
+function CommitFiles({ className, ...props }) {
+    return _jsx("div", { "data-slot": "commit-files", className: cn("grid gap-1", className), ...props });
+}
+function CommitFile({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-file", className: cn("flex min-w-0 items-center justify-between gap-3 rounded-md px-2 py-1 text-sm hover:bg-muted", className), ...props }));
+}
+function CommitFileInfo({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-file-info", className: cn("flex min-w-0 items-center gap-2", className), ...props }));
+}
+function CommitFileStatus({ className, status = "modified", ...props }) {
+    return (_jsx("span", { "data-slot": "commit-file-status", className: cn("text-meta text-muted-foreground", className), ...props, children: status }));
+}
+function CommitFileIcon(props) {
+    return _jsx(FileIcon, { "aria-hidden": "true", "data-slot": "commit-file-icon", ...props });
+}
+function CommitFilePath({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "commit-file-path", className: cn("truncate font-mono text-xs", className), ...props }));
+}
+function CommitFileChanges({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "commit-file-changes", className: cn("flex shrink-0 items-center gap-2 font-mono text-xs", className), ...props }));
+}
+function CommitFileAdditions({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "commit-file-additions", className: cn("text-foreground", className), ...props }));
+}
+function CommitFileDeletions({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "commit-file-deletions", className: cn("text-muted-foreground", className), ...props }));
+}
+export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFiles, CommitFileStatus, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp, };

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

@@ -0,0 +1,3 @@
+import type { ConnectionLineComponentProps, Node as FlowNode } from "@xyflow/react";
+declare function Connection<NodeType extends FlowNode = FlowNode>({ fromX, fromY, toX, toY, }: ConnectionLineComponentProps<NodeType>): import("@types/react").JSX.Element;
+export { Connection };

package/dist/components/agentic/connection.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const half = 0.5;
+function Connection({ fromX, fromY, toX, toY, }) {
+    const centerX = fromX + (toX - fromX) * half;
+    const path = `M ${fromX} ${fromY} C ${centerX} ${fromY}, ${centerX} ${toY}, ${toX} ${toY}`;
+    return (_jsx("path", { className: "fill-none stroke-foreground/70", d: path, "data-slot": "connection", strokeDasharray: "4 4", strokeLinecap: "round", strokeWidth: 1.5 }));
+}
+export { Connection };

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

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

package/dist/components/agentic/controls.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import { cn } from "@ciridae/ui/utils";
+function Controls({ className, ...props }) {
+    return (_jsx(ControlsPrimitive, { "data-slot": "controls", className: cn("overflow-hidden rounded-lg border bg-card p-1 shadow-xs", "[&>button]:size-7 [&>button]:border-0! [&>button]:bg-transparent! [&>button]:text-foreground", "[&>button]:hover:bg-secondary! [&>button>svg]:max-h-4 [&>button>svg]:max-w-4", className), ...props }));
+}
+export { Controls };

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 import { StickToBottom } from "use-stick-to-bottom";
-import type { AgenticMessage } from "@ciridae/ui-agent/types";
+import type { AgenticMessage } from "./types";
 import { Button } from "@ciridae/ui/button";
 type ConversationProps = React.ComponentProps<typeof StickToBottom>;
 type ConversationContentProps = React.ComponentProps<typeof StickToBottom.Content>;

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

@@ -0,0 +1,8 @@
+import type { EdgeProps } from "@xyflow/react";
+declare function Temporary({ id, markerEnd, sourcePosition, sourceX, sourceY, style, targetPosition, targetX, targetY, }: EdgeProps): import("@types/react").JSX.Element;
+declare function Animated({ id, markerEnd, source, style, target }: EdgeProps): import("@types/react").JSX.Element | null;
+declare const Edge: {
+    Animated: typeof Animated;
+    Temporary: typeof Temporary;
+};
+export { Edge };

package/dist/components/agentic/edge.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath, getSimpleBezierPath, Position, useInternalNode, } from "@xyflow/react";
+function Temporary({ id, markerEnd, sourcePosition, sourceX, sourceY, style, targetPosition, targetX, targetY, }) {
+    const [edgePath] = getSimpleBezierPath({
+        sourcePosition,
+        sourceX,
+        sourceY,
+        targetPosition,
+        targetX,
+        targetY,
+    });
+    return _jsx(WorkflowBaseEdge, { id: id, markerEnd: markerEnd, path: edgePath, style: style });
+}
+function Animated({ id, markerEnd, source, style, target }) {
+    const sourceNode = useInternalNode(source);
+    const targetNode = useInternalNode(target);
+    if (!(sourceNode && targetNode))
+        return null;
+    const { sourcePos, sx, sy, targetPos, tx, ty } = getEdgeParams(sourceNode, targetNode);
+    const [edgePath] = getBezierPath({
+        sourcePosition: sourcePos,
+        sourceX: sx,
+        sourceY: sy,
+        targetPosition: targetPos,
+        targetX: tx,
+        targetY: ty,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(WorkflowBaseEdge, { id: id, markerEnd: markerEnd, path: edgePath, style: style }), _jsx("circle", { className: "fill-foreground/70 motion-reduce:hidden", r: "3", children: _jsx("animateMotion", { dur: "2.4s", path: edgePath, repeatCount: "indefinite" }) })] }));
+}
+function WorkflowBaseEdge({ className, id, markerEnd, path, style, }) {
+    return (_jsx(BaseEdge, { className: className, id: id, markerEnd: markerEnd, path: path, style: {
+            stroke: "var(--agentic-workflow-edge-color, color-mix(in oklch, var(--foreground) 72%, transparent))",
+            strokeWidth: 1.5,
+            ...style,
+        } }));
+}
+function getEdgeParams(source, target) {
+    const sourcePos = Position.Right;
+    const targetPos = Position.Left;
+    const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+    const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+    return { sourcePos, sx, sy, targetPos, tx, ty };
+}
+function getHandleCoordsByPosition(node, handlePosition) {
+    const handleType = handlePosition === Position.Left ? "target" : "source";
+    const handle = node.internals.handleBounds?.[handleType]?.find((candidate) => candidate.position === handlePosition);
+    if (!handle)
+        return [node.internals.positionAbsolute.x, node.internals.positionAbsolute.y];
+    let offsetX = handle.width / 2;
+    let offsetY = handle.height / 2;
+    if (handlePosition === Position.Left)
+        offsetX = 0;
+    if (handlePosition === Position.Right)
+        offsetX = handle.width;
+    if (handlePosition === Position.Top)
+        offsetY = 0;
+    if (handlePosition === Position.Bottom)
+        offsetY = handle.height;
+    return [
+        node.internals.positionAbsolute.x + handle.x + offsetX,
+        node.internals.positionAbsolute.y + handle.y + offsetY,
+    ];
+}
+const Edge = { Animated, Temporary };
+export { Edge };

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

@@ -0,0 +1,43 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+type EffortSelectorValue = "auto" | "low" | "medium" | "high" | "xhigh";
+type EffortSelectorOption = {
+    label: string;
+    shortLabel: string;
+    value: EffortSelectorValue;
+};
+type EffortSelectorProps = Omit<React.ComponentProps<typeof Button>, "onChange" | "onClick" | "value"> & {
+    onValueChange: (value: EffortSelectorValue) => void;
+    showLabel?: boolean;
+    value: EffortSelectorValue;
+};
+type EffortSelectorIconProps = React.ComponentProps<"span"> & {
+    value: EffortSelectorValue;
+};
+declare const EFFORT_SELECTOR_OPTIONS: readonly [{
+    readonly value: "auto";
+    readonly label: "Auto";
+    readonly shortLabel: "";
+}, {
+    readonly value: "low";
+    readonly label: "Low";
+    readonly shortLabel: "Low";
+}, {
+    readonly value: "medium";
+    readonly label: "Medium";
+    readonly shortLabel: "Medium";
+}, {
+    readonly value: "high";
+    readonly label: "High";
+    readonly shortLabel: "High";
+}, {
+    readonly value: "xhigh";
+    readonly label: "Extra High";
+    readonly shortLabel: "Extra High";
+}];
+declare function EffortSelector({ className, disabled, onValueChange, showLabel, value, variant, ...props }: EffortSelectorProps): React.JSX.Element;
+declare function EffortSelectorIcon({ className, value, ...props }: EffortSelectorIconProps): React.JSX.Element;
+declare function getEffortSelectorOption(value: string | null | undefined): EffortSelectorOption;
+declare function getNextEffortValue(value: EffortSelectorValue): "medium" | "auto" | "low" | "high" | "xhigh";
+export { EFFORT_SELECTOR_OPTIONS, EffortSelector, EffortSelectorIcon, getEffortSelectorOption, getNextEffortValue, };
+export type { EffortSelectorOption, EffortSelectorProps, EffortSelectorValue };

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+const EFFORT_SELECTOR_OPTIONS = [
+    { value: "auto", label: "Auto", shortLabel: "" },
+    { value: "low", label: "Low", shortLabel: "Low" },
+    { value: "medium", label: "Medium", shortLabel: "Medium" },
+    { value: "high", label: "High", shortLabel: "High" },
+    { value: "xhigh", label: "Extra High", shortLabel: "Extra High" },
+];
+function EffortSelector({ className, disabled, onValueChange, showLabel = true, value, variant = "ghost", ...props }) {
+    const selectedOption = getEffortSelectorOption(value);
+    return (_jsxs(Button, { "aria-label": `Effort: ${selectedOption.label}. Click to change.`, className: cn("h-7 w-auto justify-start gap-1 rounded-md px-1.5 text-xs", className), "data-slot": "effort-selector", disabled: disabled, onClick: () => onValueChange(getNextEffortValue(value)), title: `Effort: ${selectedOption.label}`, type: "button", variant: variant, ...props, children: [_jsx(EffortSelectorIcon, { value: value }), showLabel && selectedOption.shortLabel ? (_jsx("span", { className: "min-w-0 flex-none truncate text-left", "data-slot": "effort-selector-label", children: selectedOption.shortLabel })) : null] }));
+}
+function EffortSelectorIcon({ className, value, ...props }) {
+    const activeBars = getActiveBarCount(value);
+    return (_jsx("span", { "aria-hidden": "true", className: cn("flex size-4 shrink-0 items-end justify-center gap-0.5 text-muted-foreground", className), "data-slot": "effort-selector-icon", ...props, children: [1, 2, 3, 4].map((bar) => (_jsx("span", { className: cn("w-0.5 rounded-full bg-current transition-opacity", getBarHeightClassName(bar), bar <= activeBars ? "opacity-100" : "opacity-30") }, bar))) }));
+}
+function getEffortSelectorOption(value) {
+    return (EFFORT_SELECTOR_OPTIONS.find((option) => option.value === value) ?? EFFORT_SELECTOR_OPTIONS[0]);
+}
+function getNextEffortValue(value) {
+    const selectedIndex = EFFORT_SELECTOR_OPTIONS.findIndex((option) => option.value === value);
+    const nextIndex = (selectedIndex + 1) % EFFORT_SELECTOR_OPTIONS.length;
+    return EFFORT_SELECTOR_OPTIONS[nextIndex].value;
+}
+function getActiveBarCount(value) {
+    if (value === "auto")
+        return 0;
+    if (value === "low")
+        return 1;
+    if (value === "medium")
+        return 2;
+    if (value === "high")
+        return 3;
+    return 4;
+}
+function getBarHeightClassName(bar) {
+    if (bar === 1)
+        return "h-2";
+    if (bar === 2)
+        return "h-2.5";
+    if (bar === 3)
+        return "h-3";
+    return "h-3.5";
+}
+export { EFFORT_SELECTOR_OPTIONS, EffortSelector, EffortSelectorIcon, getEffortSelectorOption, getNextEffortValue, };

package/dist/components/agentic/environment-variables.d.ts

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { Button } from "@ciridae/ui/button";
+import { Switch } from "@ciridae/ui/switch";
+type EnvironmentVariablesProps = React.ComponentProps<"div"> & {
+    defaultRevealed?: boolean;
+};
+type EnvironmentVariablesHeaderProps = React.ComponentProps<"div">;
+type EnvironmentVariablesTitleProps = React.ComponentProps<"h3">;
+type EnvironmentVariablesToggleProps = React.ComponentProps<typeof Switch>;
+type EnvironmentVariablesContentProps = React.ComponentProps<"div">;
+type EnvironmentVariableGroupProps = React.ComponentProps<"div">;
+type EnvironmentVariableProps = React.ComponentProps<"div"> & {
+    value: string;
+};
+type EnvironmentVariableNameProps = React.ComponentProps<"span">;
+type EnvironmentVariableValueProps = React.ComponentProps<"span">;
+type EnvironmentVariableCopyButtonProps = React.ComponentProps<typeof Button>;
+type EnvironmentVariableRequiredProps = React.ComponentProps<typeof Badge>;
+declare function EnvironmentVariables({ children, className, defaultRevealed, ...props }: EnvironmentVariablesProps): React.JSX.Element;
+declare function EnvironmentVariablesHeader({ className, ...props }: EnvironmentVariablesHeaderProps): React.JSX.Element;
+declare function EnvironmentVariablesTitle({ className, ...props }: EnvironmentVariablesTitleProps): React.JSX.Element;
+declare function EnvironmentVariablesToggle(props: EnvironmentVariablesToggleProps): React.JSX.Element;
+declare function EnvironmentVariablesContent({ className, ...props }: EnvironmentVariablesContentProps): React.JSX.Element;
+declare function EnvironmentVariableGroup({ className, ...props }: EnvironmentVariableGroupProps): React.JSX.Element;
+declare function EnvironmentVariable({ children, className, value, ...props }: EnvironmentVariableProps): React.JSX.Element;
+declare function EnvironmentVariableName({ className, ...props }: EnvironmentVariableNameProps): React.JSX.Element;
+declare function EnvironmentVariableValue({ className, ...props }: EnvironmentVariableValueProps): React.JSX.Element;
+declare function EnvironmentVariableCopyButton({ children, onClick, type, ...props }: EnvironmentVariableCopyButtonProps): React.JSX.Element;
+declare function EnvironmentVariableRequired({ children, variant, ...props }: EnvironmentVariableRequiredProps): React.JSX.Element;
+export { EnvironmentVariable, EnvironmentVariableCopyButton, EnvironmentVariableGroup, EnvironmentVariableName, EnvironmentVariableRequired, EnvironmentVariableValue, EnvironmentVariables, EnvironmentVariablesContent, EnvironmentVariablesHeader, EnvironmentVariablesTitle, EnvironmentVariablesToggle, };
+export type { EnvironmentVariableCopyButtonProps, EnvironmentVariableGroupProps, EnvironmentVariableNameProps, EnvironmentVariableProps, EnvironmentVariableRequiredProps, EnvironmentVariableValueProps, EnvironmentVariablesContentProps, EnvironmentVariablesHeaderProps, EnvironmentVariablesProps, EnvironmentVariablesTitleProps, EnvironmentVariablesToggleProps, };

package/dist/components/agentic/environment-variables.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { Button } from "@ciridae/ui/button";
+import { Switch } from "@ciridae/ui/switch";
+import { cn } from "@ciridae/ui/utils";
+import { copyToClipboard } from "./clipboard";
+const EnvironmentVariablesContext = createContext(null);
+const EnvironmentVariableContext = createContext({ value: "" });
+function useEnvironmentVariables() {
+    const context = useContext(EnvironmentVariablesContext);
+    if (!context)
+        throw new Error("EnvironmentVariables components must be used within EnvironmentVariables");
+    return context;
+}
+function EnvironmentVariables({ children, className, defaultRevealed = false, ...props }) {
+    const [revealed, setRevealed] = useState(defaultRevealed);
+    const contextValue = useMemo(() => ({ revealed, setRevealed }), [revealed]);
+    return (_jsx(EnvironmentVariablesContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "environment-variables", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props, children: children }) }));
+}
+function EnvironmentVariablesHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "environment-variables-header", className: cn("flex items-center justify-between gap-3", className), ...props }));
+}
+function EnvironmentVariablesTitle({ className, ...props }) {
+    return (_jsx("h3", { "data-slot": "environment-variables-title", className: cn("text-sm font-medium", className), ...props }));
+}
+function EnvironmentVariablesToggle(props) {
+    const { revealed, setRevealed } = useEnvironmentVariables();
+    return (_jsx(Switch, { checked: revealed, "data-slot": "environment-variables-toggle", onCheckedChange: setRevealed, ...props }));
+}
+function EnvironmentVariablesContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "environment-variables-content", className: cn("grid gap-2", className), ...props }));
+}
+function EnvironmentVariableGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "environment-variable-group", className: cn("grid gap-2", className), ...props }));
+}
+function EnvironmentVariable({ children, className, value, ...props }) {
+    const contextValue = useMemo(() => ({ value }), [value]);
+    return (_jsx(EnvironmentVariableContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "environment-variable", className: cn("grid gap-1 rounded-md border bg-muted/30 p-2", className), ...props, children: children }) }));
+}
+function EnvironmentVariableName({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "environment-variable-name", className: cn("font-mono text-xs font-medium", className), ...props }));
+}
+function EnvironmentVariableValue({ className, ...props }) {
+    const { revealed } = useEnvironmentVariables();
+    const { value } = useContext(EnvironmentVariableContext);
+    return (_jsx("span", { "data-slot": "environment-variable-value", className: cn("font-mono text-xs break-all text-muted-foreground", className), ...props, children: props.children ?? (revealed ? value : maskValue(value)) }));
+}
+function EnvironmentVariableCopyButton({ children, onClick, type = "button", ...props }) {
+    const { value } = useContext(EnvironmentVariableContext);
+    const [copied, setCopied] = useState(false);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { "aria-label": copied ? "Copied" : "Copy variable", size: "icon", variant: "ghost", ...props, type: type, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                void copyToClipboard(value, setCopied);
+        }, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function EnvironmentVariableRequired({ children = "required", variant = "outline", ...props }) {
+    return (_jsx(Badge, { "data-slot": "environment-variable-required", variant: variant, ...props, children: children }));
+}
+function maskValue(value) {
+    return value.length > 0 ? "••••••••••••" : "";
+}
+export { EnvironmentVariable, EnvironmentVariableCopyButton, EnvironmentVariableGroup, EnvironmentVariableName, EnvironmentVariableRequired, EnvironmentVariableValue, EnvironmentVariables, EnvironmentVariablesContent, EnvironmentVariablesHeader, EnvironmentVariablesTitle, EnvironmentVariablesToggle, };

package/dist/components/agentic/jsx-preview.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { type TProps as JsxParserProps } from "react-jsx-parser";
+type JSXPreviewProps = React.ComponentProps<"div"> & {
+    bindings?: JsxParserProps["bindings"];
+    components?: JsxParserProps["components"];
+    jsx: string;
+    onError?: (error: Error) => void;
+};
+type JSXPreviewContentProps = Omit<React.ComponentProps<"div">, "children">;
+type JSXPreviewErrorProps = React.ComponentProps<"div"> & {
+    fallback?: React.ReactNode;
+};
+declare function JSXPreview({ bindings, children, className, components, jsx, onError, ...props }: JSXPreviewProps): React.JSX.Element;
+declare function JSXPreviewContent({ className, onError, ...props }: JSXPreviewContentProps & {
+    onError?: (error: Error) => void;
+}): React.JSX.Element;
+declare function JSXPreviewError({ className, fallback, ...props }: JSXPreviewErrorProps): React.JSX.Element | null;
+export { JSXPreview, JSXPreviewContent, JSXPreviewError };
+export type { JSXPreviewContentProps, JSXPreviewErrorProps, JSXPreviewProps };

package/dist/components/agentic/jsx-preview.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from "lucide-react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import JsxParser from "react-jsx-parser";
+import { cn } from "@ciridae/ui/utils";
+const JSXPreviewContext = createContext(null);
+function useJSXPreview() {
+    const context = useContext(JSXPreviewContext);
+    if (!context)
+        throw new Error("JSXPreview components must be used within JSXPreview");
+    return context;
+}
+function JSXPreview({ bindings, children, className, components, jsx, onError, ...props }) {
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setError(null);
+    }, [jsx]);
+    const contextValue = useMemo(() => ({ bindings, components, error, jsx, setError }), [bindings, components, error, jsx]);
+    return (_jsx(JSXPreviewContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "jsx-preview", className: cn("relative rounded-lg border bg-card p-4", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(JSXPreviewContent, { onError: onError }), _jsx(JSXPreviewError, {})] })) }) }));
+}
+function JSXPreviewContent({ className, onError, ...props }) {
+    const { bindings, components, jsx, setError } = useJSXPreview();
+    return (_jsx("div", { "data-slot": "jsx-preview-content", className: cn("min-h-40", className), ...props, children: _jsx(JsxParser, { allowUnknownElements: false, bindings: bindings, blacklistedAttrs: [/^on.+/i, "style"], blacklistedTags: ["script", "style", "iframe"], components: components, componentsOnly: true, jsx: jsx, onError: (error) => {
+                setError(error);
+                onError?.(error);
+            }, renderInWrapper: false, showWarnings: false }) }));
+}
+function JSXPreviewError({ className, fallback, ...props }) {
+    const { error } = useJSXPreview();
+    if (!error)
+        return null;
+    return (_jsxs("div", { "data-slot": "jsx-preview-error", className: cn("mt-3 flex gap-2 rounded-md border p-3 text-sm text-muted-foreground", className), ...props, children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive" }), _jsx("div", { className: "min-w-0", children: fallback ?? error.message })] }));
+}
+export { JSXPreview, JSXPreviewContent, JSXPreviewError };