@vadimcomanescu/nadicode-design-system 2.0.0

package/dist/chunk-UN2SJ42K.js

@@ -0,0 +1,118 @@
+import { Label } from './chunk-LIBXYD5Q.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { use } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { FormProvider, Controller, useFormContext } from 'react-hook-form';
+import { jsx } from 'react/jsx-runtime';
+
+var Form = FormProvider;
+var FormFieldContext = React.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = use(FormFieldContext);
+  const itemContext = use(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React.createContext(
+  {}
+);
+function FormItem({
+  className,
+  ref,
+  ...props
+}) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+}
+function FormLabel({
+  className,
+  ref,
+  ...props
+}) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({
+  ref,
+  ...props
+}) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormDescription({
+  className,
+  ref,
+  ...props
+}) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-text-tertiary", className),
+      ...props
+    }
+  );
+}
+function FormMessage({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/chunk-UWHKZX4Y.js

@@ -0,0 +1,99 @@
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './chunk-WSU2PCA2.js';
+import * as React from 'react';
+import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function BarChart({
+  data,
+  config,
+  indexKey,
+  bars,
+  stacked = false,
+  layout = "horizontal",
+  gradient = false,
+  className,
+  showLegend = true,
+  showYAxis = false,
+  yAxisWidth = 40
+}) {
+  const barKeys = React.useMemo(() => bars || Object.keys(config).filter((key) => key !== indexKey), [bars, config, indexKey]);
+  return /* @__PURE__ */ jsx(ChartContainer, { config, className, children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data,
+      layout,
+      margin: {
+        top: 5,
+        right: 10,
+        left: 10,
+        bottom: 0
+      },
+      children: [
+        !!gradient && /* @__PURE__ */ jsx("defs", { children: barKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", { id: `fill-${key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: `var(--color-${key})`, stopOpacity: 1 }),
+          /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: `var(--color-${key})`, stopOpacity: 0.3 })
+        ] }, key)) }),
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "var(--color-border)", strokeOpacity: 0.4, strokeDasharray: "4 4" }),
+        layout === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: indexKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              minTickGap: 32,
+              tickFormatter: (value) => {
+                if (value instanceof Date) return value.toLocaleDateString();
+                return `${value}`;
+              }
+            }
+          ),
+          !!showYAxis && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              width: yAxisWidth,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              stroke: "var(--color-text-secondary)"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true }),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              dataKey: indexKey,
+              type: "category",
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 10,
+              width: 100
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            cursor: { fill: "var(--color-surface-hover)", opacity: 0.5 },
+            content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "dot" })
+          }
+        ),
+        barKeys.map((key) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: key,
+            fill: gradient ? `url(#fill-${key})` : `var(--color-${key})`,
+            stackId: stacked ? "a" : void 0,
+            radius: stacked ? [0, 0, 0, 0] : [4, 4, 0, 0]
+          },
+          key
+        )),
+        !!showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) })
+      ]
+    }
+  ) });
+}
+
+export { BarChart };

package/dist/chunk-UYT33NG6.js

@@ -0,0 +1,23 @@
+import { cn } from './chunk-QYZT24TS.js';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { jsx } from 'react/jsx-runtime';
+
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverContent({ className, align = "center", sideOffset = 4, ref, ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 max-h-[min(var(--radix-popover-content-available-height),_24rem)] overflow-y-auto rounded-md glass-panel p-4 text-text-primary shadow-md outline-none focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/chunk-V6WNRZT3.js

@@ -0,0 +1,43 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PATH_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, ease: "linear", opacity: { duration: 0.1 } }
+  }
+};
+var SECOND_PATH_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, delay: 0.1, ease: "linear", opacity: { duration: 0.1, delay: 0.1 } }
+  }
+};
+function ArrowUpIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M12 19V5", initial: "normal", variants: PATH_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "m5 12 7-7 7 7", initial: "normal", variants: SECOND_PATH_VARIANTS })
+  ] }) });
+}
+
+export { ArrowUpIcon };

package/dist/chunk-VCCI3NRD.js

@@ -0,0 +1,392 @@
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var NODE_W = 140;
+var NODE_H = 36;
+var LAYER_GAP_X = 168;
+var NODE_GAP_Y = 72;
+var SVG_PADDING = 16;
+var EDGE_TURN_X = 28;
+var NODE_TYPE_LABELS = {
+  llm: "LLM",
+  tool: "Tool",
+  human: "Human",
+  conditional: "Conditional",
+  default: "Step"
+};
+function getTypeAccent(type) {
+  switch (type) {
+    case "llm":
+      return "var(--color-info)";
+    case "tool":
+      return "var(--color-warning)";
+    case "human":
+      return "var(--color-text-secondary)";
+    case "conditional":
+      return "var(--color-accent)";
+    default:
+      return "var(--color-border)";
+  }
+}
+function getNodeVisual(type, status) {
+  if (status === "error") {
+    return {
+      accent: "var(--color-destructive)",
+      fill: "rgb(var(--color-destructive) / 0.14)",
+      stroke: "rgb(var(--color-destructive) / 0.7)",
+      radius: 6
+    };
+  }
+  const accentVar = getTypeAccent(type);
+  const accentColor = `rgb(${accentVar})`;
+  switch (status) {
+    case "active":
+      return {
+        accent: accentVar,
+        fill: `rgb(${accentVar} / 0.16)`,
+        stroke: accentColor,
+        radius: type === "tool" ? 4 : type === "human" ? 18 : type === "conditional" ? 2 : 10,
+        dashArray: type === "conditional" ? "4 3" : void 0
+      };
+    case "done":
+      return {
+        accent: accentVar,
+        fill: `rgb(${accentVar} / 0.1)`,
+        stroke: `rgb(${accentVar} / 0.55)`,
+        radius: type === "tool" ? 4 : type === "human" ? 18 : type === "conditional" ? 2 : 10,
+        dashArray: type === "conditional" ? "4 3" : void 0
+      };
+    default:
+      return {
+        accent: accentVar,
+        fill: type === "default" ? "rgb(var(--color-muted))" : `rgb(${accentVar} / 0.06)`,
+        stroke: type === "default" ? "rgb(var(--color-border))" : `rgb(${accentVar} / 0.36)`,
+        radius: type === "tool" ? 4 : type === "human" ? 18 : type === "conditional" ? 2 : 10,
+        dashArray: type === "conditional" ? "4 3" : void 0
+      };
+  }
+}
+function getNodeFilterId(type) {
+  switch (type) {
+    case "llm":
+      return "glow-llm";
+    case "tool":
+      return "glow-tool";
+    case "human":
+      return "glow-human";
+    case "conditional":
+      return "glow-conditional";
+    default:
+      return "glow-default";
+  }
+}
+var svgEdgeStyle = {
+  pending: { stroke: "rgb(var(--color-border))" },
+  active: { stroke: "rgb(var(--color-accent))" },
+  done: { stroke: "rgb(var(--color-success) / 0.4)" },
+  error: { stroke: "rgb(var(--color-destructive) / 0.4)" }
+};
+function NodeTypeIcon({ type, x, y }) {
+  const style = { fill: "rgb(var(--color-text-tertiary))" };
+  switch (type) {
+    case "llm":
+      return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 4, style });
+    case "tool":
+      return /* @__PURE__ */ jsx("rect", { x: x - 4, y: y - 4, width: 8, height: 8, rx: 1, style });
+    case "human":
+      return /* @__PURE__ */ jsx("circle", { cx: x, cy: y - 2, r: 3, style: { fill: "none", stroke: "rgb(var(--color-text-tertiary))", strokeWidth: 1 } });
+    case "conditional":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: `${x},${y - 5} ${x + 5},${y} ${x},${y + 5} ${x - 5},${y}`,
+          style
+        }
+      );
+    default:
+      return null;
+  }
+}
+function WorkflowLegend({ nodeTypes }) {
+  return /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2 px-4 pb-2", children: nodeTypes.map((type) => {
+    const visual = getNodeVisual(type, "done");
+    const itemStyle = {
+      borderColor: visual.stroke,
+      backgroundColor: visual.fill,
+      borderRadius: `${visual.radius}px`,
+      color: "rgb(var(--color-text-secondary))"
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-2 border px-2.5 py-2 text-[10px] font-medium uppercase tracking-[0.18em]",
+        style: itemStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2.5 w-2.5 border",
+              style: {
+                backgroundColor: visual.fill,
+                borderColor: visual.stroke,
+                borderRadius: `${Math.min(visual.radius, 4)}px`
+              },
+              "aria-hidden": "true"
+            }
+          ),
+          NODE_TYPE_LABELS[type]
+        ]
+      },
+      type
+    );
+  }) });
+}
+function WorkflowGraph({ className, nodes, edges, ref, ...props }) {
+  const layers = React.useMemo(() => {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const inDegree = /* @__PURE__ */ new Map();
+    const adj = /* @__PURE__ */ new Map();
+    for (const n of nodes) {
+      inDegree.set(n.id, 0);
+      adj.set(n.id, []);
+    }
+    for (const e of edges) {
+      adj.get(e.from)?.push(e.to);
+      inDegree.set(e.to, (inDegree.get(e.to) ?? 0) + 1);
+    }
+    const result = [];
+    let queue = nodes.filter((n) => (inDegree.get(n.id) ?? 0) === 0);
+    const visited = /* @__PURE__ */ new Set();
+    while (queue.length > 0) {
+      result.push(queue);
+      const next = [];
+      for (const node of queue) {
+        visited.add(node.id);
+        for (const childId of adj.get(node.id) ?? []) {
+          const deg = (inDegree.get(childId) ?? 1) - 1;
+          inDegree.set(childId, deg);
+          if (deg === 0 && !visited.has(childId)) {
+            const child = nodeMap.get(childId);
+            if (child) next.push(child);
+          }
+        }
+      }
+      queue = next;
+    }
+    return result;
+  }, [nodes, edges]);
+  const positions = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const maxNodesInLayer = Math.max(...layers.map((layer) => layer.length), 1);
+    layers.forEach((layer, li) => {
+      const offsetY = (maxNodesInLayer - layer.length) * NODE_GAP_Y / 2;
+      layer.forEach((node, ni) => {
+        map.set(node.id, {
+          x: li * LAYER_GAP_X,
+          y: offsetY + ni * NODE_GAP_Y
+        });
+      });
+    });
+    return map;
+  }, [layers]);
+  const nodeById = React.useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const presentNodeTypes = React.useMemo(() => {
+    const types = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      if (node.type && node.type !== "default") {
+        types.add(node.type);
+      }
+    }
+    return Array.from(types);
+  }, [nodes]);
+  const { svgWidth, svgHeight } = React.useMemo(() => {
+    const maxNodesInLayer = Math.max(...layers.map((l) => l.length));
+    return {
+      svgWidth: (layers.length - 1) * LAYER_GAP_X + NODE_W + 32,
+      svgHeight: (maxNodesInLayer - 1) * NODE_GAP_Y + NODE_H + 32
+    };
+  }, [layers]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("overflow-x-auto", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: svgHeight,
+            viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "h-auto min-w-full overflow-visible",
+            role: "img",
+            "aria-label": "Workflow graph",
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsx("filter", { id: "glow-default", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "rgb(var(--color-accent))", floodOpacity: "0.3" }) }),
+                /* @__PURE__ */ jsx("filter", { id: "glow-llm", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "rgb(var(--color-info))", floodOpacity: "0.28" }) }),
+                /* @__PURE__ */ jsx("filter", { id: "glow-tool", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "rgb(var(--color-warning))", floodOpacity: "0.3" }) }),
+                /* @__PURE__ */ jsx("filter", { id: "glow-human", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "rgb(var(--color-text-secondary))", floodOpacity: "0.24" }) }),
+                /* @__PURE__ */ jsx("filter", { id: "glow-conditional", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "rgb(var(--color-accent))", floodOpacity: "0.3" }) })
+              ] }),
+              edges.map((edge) => {
+                const from = positions.get(edge.from);
+                const to = positions.get(edge.to);
+                if (!from || !to) return null;
+                const x1 = from.x + NODE_W + SVG_PADDING;
+                const y1 = from.y + NODE_H / 2 + SVG_PADDING;
+                const x2 = to.x + SVG_PADDING;
+                const y2 = to.y + NODE_H / 2 + SVG_PADDING;
+                const turnX = x1 + Math.max((x2 - x1) / 2, EDGE_TURN_X);
+                const labelX = y1 === y2 ? (x1 + x2) / 2 : turnX + 4;
+                const labelY = y1 === y2 ? y1 - 6 : Math.min(y1, y2) - 8;
+                const sourceNode = nodeById.get(edge.from);
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: `M ${x1} ${y1} L ${turnX} ${y1} L ${turnX} ${y2} L ${x2} ${y2}`,
+                      fill: "none",
+                      strokeWidth: 1.5,
+                      style: svgEdgeStyle[sourceNode?.status ?? "pending"],
+                      className: "transition-colors"
+                    }
+                  ),
+                  edge.label && /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: labelX,
+                      y: labelY,
+                      textAnchor: y1 === y2 ? "middle" : "start",
+                      className: "text-[10px]",
+                      style: { fill: "rgb(var(--color-text-tertiary))" },
+                      children: edge.label
+                    }
+                  )
+                ] }, `${edge.from}-${edge.to}`);
+              }),
+              nodes.map((node) => {
+                const pos = positions.get(node.id);
+                if (!pos) return null;
+                const x = pos.x + SVG_PADDING;
+                const y = pos.y + SVG_PADDING;
+                const nodeType = node.type ?? "default";
+                const hasIcon = nodeType !== "default";
+                const visual = getNodeVisual(nodeType, node.status);
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  node.detail && /* @__PURE__ */ jsx("title", { children: node.detail }),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x,
+                      y,
+                      width: NODE_W,
+                      height: NODE_H,
+                      rx: visual.radius,
+                      fill: visual.fill,
+                      stroke: visual.stroke,
+                      strokeDasharray: visual.dashArray,
+                      strokeWidth: 1,
+                      filter: node.status === "active" ? `url(#${getNodeFilterId(nodeType)})` : void 0,
+                      className: "transition-colors",
+                      "data-workflow-node": "",
+                      "data-node-type": nodeType,
+                      "data-node-status": node.status
+                    }
+                  ),
+                  nodeType !== "default" && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x,
+                      y,
+                      width: 4,
+                      height: NODE_H,
+                      rx: Math.min(visual.radius, 3),
+                      fill: `rgb(${visual.accent})`,
+                      opacity: node.status === "pending" ? 0.65 : 1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  nodeType === "tool" && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: `M ${x + NODE_W - 18} ${y} L ${x + NODE_W} ${y} L ${x + NODE_W} ${y + 18}`,
+                      fill: `rgb(${visual.accent} / 0.18)`,
+                      stroke: `rgb(${visual.accent} / 0.5)`,
+                      strokeWidth: 1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  nodeType === "llm" && /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x + NODE_W - 12,
+                      cy: y + 10,
+                      r: 3,
+                      fill: `rgb(${visual.accent} / 0.7)`,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  nodeType === "human" && /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x + NODE_W - 12,
+                      cy: y + NODE_H / 2,
+                      r: 5,
+                      fill: "none",
+                      stroke: `rgb(${visual.accent} / 0.65)`,
+                      strokeWidth: 1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  nodeType === "conditional" && /* @__PURE__ */ jsx(
+                    "polygon",
+                    {
+                      points: `${x + NODE_W - 12},${y + 7} ${x + NODE_W - 7},${y + 12} ${x + NODE_W - 12},${y + 17} ${x + NODE_W - 17},${y + 12}`,
+                      fill: `rgb(${visual.accent} / 0.3)`,
+                      stroke: `rgb(${visual.accent} / 0.55)`,
+                      strokeWidth: 1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  hasIcon && /* @__PURE__ */ jsx(NodeTypeIcon, { type: nodeType, x: x + 8, y: y + NODE_H / 2 }),
+                  /* @__PURE__ */ jsxs(
+                    "text",
+                    {
+                      x: x + (hasIcon ? 24 : NODE_W / 2),
+                      y: y + NODE_H / 2 + 4,
+                      textAnchor: hasIcon ? "start" : "middle",
+                      className: "text-xs font-medium",
+                      style: { fill: "rgb(var(--color-text-primary))" },
+                      children: [
+                        node.label.length > 15 ? node.label.slice(0, 14) + "..." : node.label,
+                        /* @__PURE__ */ jsx("title", { children: node.label })
+                      ]
+                    }
+                  ),
+                  node.status === "done" && node.duration != null && /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: x + NODE_W - 6,
+                      y: y + NODE_H / 2 + 3,
+                      textAnchor: "end",
+                      className: "text-[10px]",
+                      style: { fill: "rgb(var(--color-text-tertiary))" },
+                      children: node.duration < 1e3 ? `${node.duration}ms` : `${(node.duration / 1e3).toFixed(1)}s`
+                    }
+                  )
+                ] }, node.id);
+              })
+            ]
+          }
+        ),
+        presentNodeTypes.length > 0 && /* @__PURE__ */ jsx(WorkflowLegend, { nodeTypes: presentNodeTypes })
+      ]
+    }
+  );
+}
+
+export { WorkflowGraph };