@heroui/agent 0.2.0-beta.1 → 0.2.0-beta.2

package/dist/chart-content-USUK4ZM5.js

@@ -0,0 +1,2696 @@
+"use client";
+import {
+  ComponentExportActions,
+  TrendChange,
+  createComponentSelection,
+  formatAxisValue,
+  formatNumber,
+  paletteChartColor,
+  resolveChartColor,
+  resolveGaugeBounds
+} from "./chunk-AEUPMIPT.js";
+import {
+  Card
+} from "./chunk-TOOT6SZ2.js";
+import {
+  mergeClassNames
+} from "./chunk-3FG5NRTX.js";
+
+// ../agent-ui/src/components/data-visualization/charts/chart-content.tsx
+import { useId, useMemo as useMemo2, useState as useState2 } from "react";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  Cell,
+  Label,
+  Line,
+  Pie,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadialBar,
+  AreaChart as RechartsAreaChart,
+  BarChart as RechartsBarChart,
+  ComposedChart as RechartsComposedChart,
+  LineChart as RechartsLineChart,
+  PieChart as RechartsPieChart,
+  RadarChart as RechartsRadarChart,
+  RadialBarChart as RechartsRadialBarChart,
+  ScatterChart as RechartsScatterChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Sankey,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis
+} from "recharts";
+
+// ../agent-ui/src/components/data-visualization/segment/segment.tsx
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SegmentContext = createContext(null);
+function SegmentRoot({
+  children,
+  className,
+  defaultSelectedKey,
+  isDisabled = false,
+  onSelectionChange,
+  selectedKey,
+  size = "md",
+  variant = "default",
+  ...props
+}) {
+  const [uncontrolledKey, setUncontrolledKey] = useState(defaultSelectedKey);
+  const activeKey = selectedKey ?? uncontrolledKey;
+  const select = useCallback(
+    (key) => {
+      if (isDisabled || key === activeKey) return;
+      if (selectedKey === void 0) setUncontrolledKey(key);
+      onSelectionChange?.(key);
+    },
+    [activeKey, isDisabled, onSelectionChange, selectedKey]
+  );
+  const context = useMemo(
+    () => ({ isDisabled, select, selectedKey: activeKey }),
+    [activeKey, isDisabled, select]
+  );
+  return /* @__PURE__ */ jsx(SegmentContext, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClassNames("aui-segment", className),
+      "data-disabled": isDisabled || void 0,
+      "data-size": size,
+      "data-slot": "agent-ui-segment",
+      "data-variant": variant,
+      role: "group",
+      ...props,
+      children
+    }
+  ) });
+}
+function SegmentItem({
+  children,
+  className,
+  disabled,
+  id,
+  onClick,
+  ...props
+}) {
+  const context = useContext(SegmentContext);
+  if (!context) throw new Error("Segment.Item must be rendered inside Segment.");
+  const isDisabled = context.isDisabled || disabled;
+  const isSelected = context.selectedKey === id;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-pressed": isSelected,
+      className: mergeClassNames("aui-segment__item", className),
+      "data-selected": isSelected,
+      "data-slot": "agent-ui-segment-item",
+      disabled: isDisabled,
+      type: "button",
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) context.select(id);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "aui-segment__indicator" }),
+        /* @__PURE__ */ jsx("span", { className: "aui-segment__label", children })
+      ]
+    }
+  );
+}
+function SegmentSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: mergeClassNames("aui-segment__separator", className),
+      "data-slot": "agent-ui-segment-separator",
+      ...props
+    }
+  );
+}
+
+// ../agent-ui/src/components/data-visualization/segment/index.ts
+var Segment = Object.assign(SegmentRoot, {
+  Item: SegmentItem,
+  Root: SegmentRoot,
+  Separator: SegmentSeparator
+});
+
+// ../agent-ui/src/components/data-visualization/charts/bar-radius.ts
+var FULL_RADIUS = [4, 4, 4, 4];
+var LEFT_RADIUS = [4, 0, 0, 4];
+var NO_RADIUS = [0, 0, 0, 0];
+var RIGHT_RADIUS = [0, 4, 4, 0];
+var TOP_RADIUS = [4, 4, 0, 0];
+function getBarRadius({
+  dataKey,
+  horizontal,
+  stacked,
+  visibleStackKeys
+}) {
+  if (!stacked) return horizontal ? RIGHT_RADIUS : TOP_RADIUS;
+  const index = visibleStackKeys.indexOf(dataKey);
+  if (index < 0) return NO_RADIUS;
+  if (horizontal && visibleStackKeys.length === 1) return FULL_RADIUS;
+  if (horizontal && index === 0) return LEFT_RADIUS;
+  if (horizontal && index === visibleStackKeys.length - 1) return RIGHT_RADIUS;
+  if (!horizontal && index === visibleStackKeys.length - 1) return TOP_RADIUS;
+  return NO_RADIUS;
+}
+
+// ../agent-ui/src/components/data-visualization/charts/candlestick-geometry.ts
+var MAX_X_LABELS = 6;
+var MIN_X_LABELS = 2;
+var TARGET_Y_TICKS = 5;
+var X_LABEL_SPACING = 72;
+function candlestickGeometry(points, { height, margins, width }) {
+  if (points.length === 0 || !validLayout(width, height, margins)) return null;
+  if (!points.every(validPoint)) return null;
+  const bounds = {
+    bottom: height - margins.bottom,
+    height: height - margins.top - margins.bottom,
+    left: margins.left,
+    right: width - margins.right,
+    top: margins.top,
+    width: width - margins.left - margins.right
+  };
+  if (bounds.width < 1 || bounds.height < 1) return null;
+  const dataMinimum = Math.min(...points.map((point2) => point2.low));
+  const dataMaximum = Math.max(...points.map((point2) => point2.high));
+  const expanded = expandFlatDomain(dataMinimum, dataMaximum);
+  if (!expanded) return null;
+  const tickValues = niceTicks(expanded[0], expanded[1]);
+  const yDomain = [tickValues[0], tickValues.at(-1)];
+  const yRange = yDomain[1] - yDomain[0];
+  if (!Number.isFinite(yRange) || yRange <= 0) return null;
+  const y = (value) => bounds.top + (yDomain[1] - value) / yRange * bounds.height;
+  const slotWidth = bounds.width / points.length;
+  const bodyWidth = Math.max(1, Math.min(14, slotWidth * 0.62));
+  const candles = points.map((point2, index) => {
+    const x = bounds.left + slotWidth * (index + 0.5);
+    const openY = y(point2.open);
+    const closeY = y(point2.close);
+    const bodyCenter = (openY + closeY) / 2;
+    const bodyHeight = Math.max(1, Math.abs(closeY - openY));
+    const bodyY = clamp(bodyCenter - bodyHeight / 2, bounds.top, bounds.bottom - bodyHeight);
+    return {
+      body: { height: bodyHeight, width: bodyWidth, x: x - bodyWidth / 2, y: bodyY },
+      direction: point2.close > point2.open ? "up" : point2.close < point2.open ? "down" : "flat",
+      index,
+      label: point2.label,
+      wick: { bottom: y(point2.low), top: y(point2.high), x },
+      x
+    };
+  });
+  return {
+    bounds,
+    candles,
+    xLabelIndices: sparseLabelIndices(points.length, bounds.width),
+    yDomain,
+    yTicks: tickValues.map((value) => ({ value, y: y(value) }))
+  };
+}
+function clamp(value, minimum, maximum) {
+  return Math.min(Math.max(value, minimum), maximum);
+}
+function cleanNumber(value) {
+  const clean = Number(value.toPrecision(12));
+  return Object.is(clean, -0) ? 0 : clean;
+}
+function expandFlatDomain(minimum, maximum) {
+  if (maximum > minimum) return [minimum, maximum];
+  const padding = minimum === 0 ? 1 : Math.abs(minimum) * 0.05;
+  const lower = minimum - padding;
+  const upper = maximum + padding;
+  return Number.isFinite(lower) && Number.isFinite(upper) && upper > lower ? [lower, upper] : null;
+}
+function niceTicks(minimum, maximum) {
+  const range = maximum - minimum;
+  const rawStep = range / (TARGET_Y_TICKS - 1);
+  const exponent = Math.floor(Math.log10(rawStep));
+  const candidates = [];
+  const seenSteps = /* @__PURE__ */ new Set();
+  for (let power = exponent - 2; power <= exponent + 2; power += 1) {
+    for (const multiplier of [1, 2, 2.5, 5, 10]) {
+      const step = cleanNumber(multiplier * 10 ** power);
+      if (!Number.isFinite(step) || step <= 0 || seenSteps.has(step)) continue;
+      seenSteps.add(step);
+      const start = Math.floor(minimum / step) * step;
+      const end = Math.ceil(maximum / step) * step;
+      const count = Math.round((end - start) / step) + 1;
+      if (count < 4 || count > 6) continue;
+      const ticks = Array.from({ length: count }, (_, index) => cleanNumber(start + index * step));
+      const padding = Math.max(0, end - start - range) / range;
+      const score = Math.abs(count - TARGET_Y_TICKS) * 100 + padding + Math.abs(Math.log10(step / rawStep)) * 0.01;
+      candidates.push({ score, ticks });
+    }
+  }
+  candidates.sort((left, right) => left.score - right.score);
+  return candidates[0]?.ticks ?? Array.from(
+    { length: TARGET_Y_TICKS },
+    (_, index) => cleanNumber(minimum + range * index / (TARGET_Y_TICKS - 1))
+  );
+}
+function sparseLabelIndices(count, plotWidth) {
+  if (count === 1) return [0];
+  const target = Math.min(
+    count,
+    MAX_X_LABELS,
+    Math.max(MIN_X_LABELS, Math.floor(plotWidth / X_LABEL_SPACING) + 1)
+  );
+  if (target === count) return Array.from({ length: count }, (_, index) => index);
+  return Array.from(
+    { length: target },
+    (_, index) => Math.round(index * (count - 1) / (target - 1))
+  );
+}
+function validLayout(width, height, margins) {
+  return Number.isFinite(width) && width > 0 && Number.isFinite(height) && height > 0 && Object.values(margins).every((margin) => Number.isFinite(margin) && margin >= 0);
+}
+function validPoint(point2) {
+  const values = [point2.open, point2.high, point2.low, point2.close];
+  return values.every(Number.isFinite) && point2.high >= Math.max(point2.open, point2.close, point2.low) && point2.low <= Math.min(point2.open, point2.close, point2.high);
+}
+
+// ../agent-ui/src/components/data-visualization/charts/gauge-geometry.ts
+var MAX_GAUGE_NOTCH_COUNT = 512;
+var DEFAULT_ARC_END_ANGLE = 405;
+var DEFAULT_ARC_START_ANGLE = 135;
+var COORDINATE_SCALE = 1e3;
+var ANGLE_SCALE = 1e6;
+function normalizeGaugeProgress(value, min, max) {
+  if (![value, min, max].every(Number.isFinite) || min === max) return 0;
+  const progress = (value - min) / (max - min);
+  return Math.min(1, Math.max(0, progress));
+}
+function arcGaugeGeometry(options) {
+  const {
+    centerX,
+    centerY,
+    count,
+    endAngle = DEFAULT_ARC_END_ANGLE,
+    height,
+    max,
+    min,
+    notchLength: requestedNotchLength,
+    notchWidth: requestedNotchWidth,
+    padding = 0,
+    radius: requestedRadius,
+    startAngle = DEFAULT_ARC_START_ANGLE,
+    value,
+    width
+  } = options;
+  if (!validDimensions(width, height) || !validNotchCount(count) || !finiteOptional(centerX, centerY, requestedNotchLength, requestedNotchWidth, requestedRadius) || ![endAngle, padding, startAngle].every(Number.isFinite) || padding < 0 || requestedNotchLength !== void 0 && requestedNotchLength <= 0 || requestedNotchWidth !== void 0 && requestedNotchWidth <= 0 || requestedRadius !== void 0 && requestedRadius <= 0) {
+    return null;
+  }
+  const resolvedCenterX = centerX ?? width / 2;
+  const resolvedCenterY = centerY ?? height / 2;
+  if (resolvedCenterX < 0 || resolvedCenterX > width || resolvedCenterY < 0 || resolvedCenterY > height) {
+    return null;
+  }
+  const maximumRadius = Math.min(resolvedCenterX, width - resolvedCenterX, resolvedCenterY, height - resolvedCenterY) - padding;
+  if (maximumRadius <= 0) return null;
+  const radius = Math.min(requestedRadius ?? maximumRadius, maximumRadius);
+  const notchLength = Math.min(requestedNotchLength ?? Math.max(2, radius * 0.16), radius);
+  const notchWidth = Math.min(requestedNotchWidth ?? Math.max(1, radius * 0.035), radius * 2);
+  if (notchLength <= 0 || notchWidth <= 0) return null;
+  const center = point(resolvedCenterX, resolvedCenterY);
+  const progress = normalizeGaugeProgress(value, min, max);
+  const notches = Array.from({ length: count }, (_, index) => {
+    const position = count === 1 ? 0.5 : index / (count - 1);
+    const threshold = (index + 1) / count;
+    const angle = startAngle + (endAngle - startAngle) * position;
+    const radians = angle * Math.PI / 180;
+    const radialX = Math.cos(radians);
+    const radialY = Math.sin(radians);
+    const tangentX = -radialY;
+    const tangentY = radialX;
+    const innerRadius = radius - notchLength;
+    const halfWidth = notchWidth / 2;
+    const inner = point(
+      resolvedCenterX + radialX * innerRadius,
+      resolvedCenterY + radialY * innerRadius
+    );
+    const outer = point(resolvedCenterX + radialX * radius, resolvedCenterY + radialY * radius);
+    const innerStart = point(inner.x - tangentX * halfWidth, inner.y - tangentY * halfWidth);
+    const outerStart = point(outer.x - tangentX * halfWidth, outer.y - tangentY * halfWidth);
+    const outerEnd = point(outer.x + tangentX * halfWidth, outer.y + tangentY * halfWidth);
+    const innerEnd = point(inner.x + tangentX * halfWidth, inner.y + tangentY * halfWidth);
+    return {
+      active: progress >= threshold,
+      angle: round(angle, ANGLE_SCALE),
+      index,
+      inner,
+      outer,
+      path: `M ${pointText(innerStart)} L ${pointText(outerStart)} L ${pointText(outerEnd)} L ${pointText(innerEnd)} Z`,
+      position: round(position, ANGLE_SCALE),
+      threshold: round(threshold, ANGLE_SCALE)
+    };
+  });
+  return {
+    center,
+    notchLength: round(notchLength),
+    notchWidth: round(notchWidth),
+    notches,
+    progress,
+    radius: round(radius)
+  };
+}
+function linearGaugeGeometry(options) {
+  const {
+    count,
+    gap = 2,
+    height,
+    inset = 0,
+    max,
+    min,
+    orientation = "horizontal",
+    value,
+    width
+  } = options;
+  if (!validDimensions(width, height) || !validNotchCount(count) || ![gap, inset].every(Number.isFinite) || gap < 0 || inset < 0) {
+    return null;
+  }
+  const innerHeight = height - inset * 2;
+  const innerWidth = width - inset * 2;
+  if (innerHeight <= 0 || innerWidth <= 0) return null;
+  const primaryLength = orientation === "horizontal" ? innerWidth : innerHeight;
+  const availableLength = primaryLength - gap * (count - 1);
+  const notchLength = availableLength / count;
+  if (!Number.isFinite(notchLength) || notchLength <= 0) return null;
+  const progress = normalizeGaugeProgress(value, min, max);
+  const notches = Array.from({ length: count }, (_, index) => {
+    const threshold = (index + 1) / count;
+    if (orientation === "horizontal") {
+      return {
+        active: progress >= threshold,
+        height: round(innerHeight),
+        index,
+        threshold: round(threshold, ANGLE_SCALE),
+        width: round(notchLength),
+        x: round(inset + index * (notchLength + gap)),
+        y: round(inset)
+      };
+    }
+    return {
+      active: progress >= threshold,
+      height: round(notchLength),
+      index,
+      threshold: round(threshold, ANGLE_SCALE),
+      width: round(innerWidth),
+      x: round(inset),
+      y: round(height - inset - notchLength - index * (notchLength + gap))
+    };
+  });
+  return { notches, orientation, progress };
+}
+function finiteOptional(...values) {
+  return values.every((value) => value === void 0 || Number.isFinite(value));
+}
+function point(x, y) {
+  return { x: round(x), y: round(y) };
+}
+function pointText(value) {
+  return `${value.x} ${value.y}`;
+}
+function round(value, scale = COORDINATE_SCALE) {
+  const rounded = Math.round(value * scale) / scale;
+  return Object.is(rounded, -0) ? 0 : rounded;
+}
+function validDimensions(width, height) {
+  return [width, height].every(Number.isFinite) && width > 0 && height > 0;
+}
+function validNotchCount(count) {
+  return Number.isInteger(count) && count >= 1 && count <= MAX_GAUGE_NOTCH_COUNT;
+}
+
+// ../agent-ui/src/components/data-visualization/charts/sunburst-geometry.ts
+var FULL_TURN = 360;
+var MIN_SPAN = 1e-6;
+var PATH_PRECISION = 1e6;
+function sunburstGeometry(root, options) {
+  if (!root) return [];
+  const weightedRoot = rollUp(root, /* @__PURE__ */ new Set());
+  const innerRadius = finiteOr(options.innerRadius, 0);
+  const outerRadius = finiteOr(options.outerRadius, 0);
+  const maxDepth = normalizeMaxDepth(options.maxDepth);
+  const startAngle = finiteOr(options.startAngle, -90);
+  const requestedEnd = finiteOr(options.endAngle, startAngle + FULL_TURN);
+  const span = Math.min(requestedEnd - startAngle, FULL_TURN);
+  if (!weightedRoot || weightedRoot.value <= 0 || maxDepth === 0 || innerRadius < 0 || outerRadius <= innerRadius || span <= MIN_SPAN) {
+    return [];
+  }
+  const visibleDepth = deepestVisibleDepth(weightedRoot.children, 1, maxDepth);
+  if (visibleDepth === 0) return [];
+  const context = {
+    arcs: [],
+    centerX: finiteOr(options.centerX, 0),
+    centerY: finiteOr(options.centerY, 0),
+    gapAngle: Math.max(0, finiteOr(options.gapAngle, 0)),
+    innerRadius,
+    maxDepth,
+    ringWidth: (outerRadius - innerRadius) / visibleDepth
+  };
+  appendLevel(weightedRoot.children, startAngle, startAngle + span, 1, [weightedRoot.id], context);
+  return context.arcs;
+}
+function rollUp(node, ancestors) {
+  if (ancestors.has(node)) return null;
+  ancestors.add(node);
+  const sourceChildren = Array.isArray(node.children) ? node.children : [];
+  const children = sourceChildren.map((child) => rollUp(child, ancestors)).filter((child) => child !== null);
+  ancestors.delete(node);
+  const value = sourceChildren.length > 0 ? children.reduce((total, child) => total + child.value, 0) : positiveValue(node.value);
+  return { children, id: node.id, label: node.label, value };
+}
+function deepestVisibleDepth(nodes, depth, maxDepth) {
+  if (depth > maxDepth) return 0;
+  let deepest = 0;
+  for (const node of nodes) {
+    if (node.value <= 0) continue;
+    deepest = Math.max(deepest, depth);
+    if (depth < maxDepth) {
+      deepest = Math.max(deepest, deepestVisibleDepth(node.children, depth + 1, maxDepth));
+    }
+  }
+  return deepest;
+}
+function appendLevel(nodes, parentStart, parentEnd, depth, parentPath, context) {
+  if (depth > context.maxDepth) return;
+  const visibleNodes = nodes.filter((node) => node.value > 0);
+  const total = visibleNodes.reduce((sum, node) => sum + node.value, 0);
+  if (total <= 0) return;
+  let cursor = parentStart;
+  for (const [index, node] of visibleNodes.entries()) {
+    const allocationEnd = index === visibleNodes.length - 1 ? parentEnd : cursor + (parentEnd - parentStart) * node.value / total;
+    const [startAngle, endAngle] = insetGap(cursor, allocationEnd, context.gapAngle);
+    const innerRadius = context.innerRadius + (depth - 1) * context.ringWidth;
+    const outerRadius = innerRadius + context.ringWidth;
+    const path = [...parentPath, node.id];
+    context.arcs.push({
+      d: annularArcPath({
+        centerX: context.centerX,
+        centerY: context.centerY,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        startAngle
+      }),
+      depth,
+      endAngle,
+      id: node.id,
+      innerRadius,
+      label: node.label,
+      outerRadius,
+      path,
+      startAngle,
+      value: node.value
+    });
+    appendLevel(node.children, cursor, allocationEnd, depth + 1, path, context);
+    cursor = allocationEnd;
+  }
+}
+function insetGap(start, end, requestedGap) {
+  const span = end - start;
+  const gap = Math.min(requestedGap, Math.max(0, span - MIN_SPAN));
+  return [start + gap / 2, end - gap / 2];
+}
+function annularArcPath(options) {
+  const span = options.endAngle - options.startAngle;
+  if (span >= FULL_TURN - MIN_SPAN) return fullRingPath(options);
+  const outerStart = pointAt(options, options.outerRadius, options.startAngle);
+  const outerEnd = pointAt(options, options.outerRadius, options.endAngle);
+  const largeArc = span > 180 ? 1 : 0;
+  const outer = `M ${pointText2(outerStart)} A ${numberText(options.outerRadius)} ${numberText(options.outerRadius)} 0 ${largeArc} 1 ${pointText2(outerEnd)}`;
+  if (options.innerRadius <= 0) {
+    return `${outer} L ${numberText(options.centerX)} ${numberText(options.centerY)} Z`;
+  }
+  const innerEnd = pointAt(options, options.innerRadius, options.endAngle);
+  const innerStart = pointAt(options, options.innerRadius, options.startAngle);
+  return `${outer} L ${pointText2(innerEnd)} A ${numberText(options.innerRadius)} ${numberText(options.innerRadius)} 0 ${largeArc} 0 ${pointText2(innerStart)} Z`;
+}
+function fullRingPath(options) {
+  const middleAngle = options.startAngle + 180;
+  const outerStart = pointAt(options, options.outerRadius, options.startAngle);
+  const outerMiddle = pointAt(options, options.outerRadius, middleAngle);
+  const outer = `M ${pointText2(outerStart)} A ${numberText(options.outerRadius)} ${numberText(options.outerRadius)} 0 0 1 ${pointText2(outerMiddle)} A ${numberText(options.outerRadius)} ${numberText(options.outerRadius)} 0 0 1 ${pointText2(outerStart)}`;
+  if (options.innerRadius <= 0) return `${outer} Z`;
+  const innerStart = pointAt(options, options.innerRadius, options.startAngle);
+  const innerMiddle = pointAt(options, options.innerRadius, middleAngle);
+  return `${outer} L ${pointText2(innerStart)} A ${numberText(options.innerRadius)} ${numberText(options.innerRadius)} 0 0 0 ${pointText2(innerMiddle)} A ${numberText(options.innerRadius)} ${numberText(options.innerRadius)} 0 0 0 ${pointText2(innerStart)} Z`;
+}
+function pointAt(options, radius, angle) {
+  const radians = angle * Math.PI / 180;
+  return {
+    x: options.centerX + Math.cos(radians) * radius,
+    y: options.centerY + Math.sin(radians) * radius
+  };
+}
+function pointText2(point2) {
+  return `${numberText(point2.x)} ${numberText(point2.y)}`;
+}
+function numberText(value) {
+  const rounded = Math.round(value * PATH_PRECISION) / PATH_PRECISION;
+  return String(Object.is(rounded, -0) ? 0 : rounded);
+}
+function finiteOr(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function positiveValue(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+function normalizeMaxDepth(value) {
+  if (value === void 0 || value === Number.POSITIVE_INFINITY) return Number.POSITIVE_INFINITY;
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.floor(value));
+}
+
+// ../agent-ui/src/components/data-visualization/charts/chart-content.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function nextRovingMarkIndex(key, current, count) {
+  if (count < 1) return null;
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  if (key === "ArrowRight" || key === "ArrowDown") return (current + 1) % count;
+  if (key === "ArrowLeft" || key === "ArrowUp") return (current - 1 + count) % count;
+  return null;
+}
+function focusSvgMark(event, slot, index) {
+  const marks = event.currentTarget.ownerSVGElement?.querySelectorAll(
+    `[data-slot="${slot}"]`
+  );
+  const mark = marks?.item(index);
+  if (mark && typeof mark.focus === "function") mark.focus();
+}
+function ChartLegend({
+  activeKeys,
+  ariaLabel,
+  items,
+  onToggle
+}) {
+  const interactive = onToggle != null && items.length > 1;
+  const hasValues = items.some((item) => item.value != null);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: mergeClassNames("aui-legend", hasValues ? "aui-legend--values" : void 0),
+      "data-slot": "agent-ui-chart-legend",
+      role: interactive ? "group" : "list",
+      children: items.map((item) => {
+        const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "aui-legend__dot",
+              "data-slot": "agent-ui-chart-legend-indicator",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "aui-legend__label", children: item.label }),
+          item.value != null ? /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: item.value }) : null
+        ] });
+        return interactive ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            "aria-pressed": activeKeys?.has(item.id) ?? true,
+            className: "aui-legend__button",
+            "data-slot": "agent-ui-chart-legend-item",
+            type: "button",
+            onClick: () => onToggle(item.id),
+            children: content
+          },
+          item.id
+        ) : /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "aui-legend__item",
+            "data-slot": "agent-ui-chart-legend-item",
+            role: "listitem",
+            children: content
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+function ChartTooltipContent({
+  className,
+  id,
+  items,
+  label,
+  placement,
+  style,
+  visuallyHiddenFromAssistiveTechnology
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-hidden": visuallyHiddenFromAssistiveTechnology || void 0,
+      className: mergeClassNames("aui-chart-tooltip", className),
+      "data-placement": placement,
+      "data-slot": "agent-ui-chart-tooltip",
+      id,
+      role: "tooltip",
+      style,
+      children: [
+        label !== void 0 && label !== "" ? /* @__PURE__ */ jsx2("div", { className: "aui-chart-tooltip__header", "data-slot": "agent-ui-chart-tooltip-header", children: label }) : null,
+        items.map((item) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "aui-chart-tooltip__item",
+            "data-slot": "agent-ui-chart-tooltip-item",
+            children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "aui-chart-tooltip__indicator",
+                  "data-slot": "agent-ui-chart-tooltip-indicator",
+                  style: { backgroundColor: item.color }
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { className: "aui-chart-tooltip__label", "data-slot": "agent-ui-chart-tooltip-label", children: item.label }),
+              /* @__PURE__ */ jsx2("span", { className: "aui-chart-tooltip__value", "data-slot": "agent-ui-chart-tooltip-value", children: item.value })
+            ]
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+}
+function ComponentTooltip({
+  active,
+  indicatorColor,
+  label,
+  payload,
+  series
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsx2(
+    ChartTooltipContent,
+    {
+      label,
+      items: payload.map((entry, index) => {
+        const format = series?.find((item) => item.dataKey === entry.dataKey)?.format;
+        return {
+          color: indicatorColor?.(entry, index) ?? entry.stroke ?? entry.color ?? entry.fill ?? entry.payload?.fill ?? paletteChartColor(index),
+          id: String(entry.dataKey ?? entry.name ?? `series-${index}`),
+          label: entry.name ?? entry.dataKey,
+          value: typeof entry.value === "number" ? formatNumber(entry.value, format) : entry.value
+        };
+      })
+    }
+  );
+}
+function SvgChartTooltip({ state }) {
+  if (!state) return null;
+  return /* @__PURE__ */ jsx2(
+    ChartTooltipContent,
+    {
+      visuallyHiddenFromAssistiveTechnology: true,
+      className: "aui-chart-tooltip--floating",
+      items: state.items,
+      label: state.label,
+      placement: state.placement,
+      style: { left: state.anchorX, top: state.anchorY }
+    }
+  );
+}
+function positionSvgChartTooltip(event, point2, content) {
+  const svg = event.currentTarget.ownerSVGElement;
+  const chart = svg?.parentElement;
+  if (!svg || !chart) {
+    return { ...content, anchorX: 0, anchorY: 0, placement: "bottom" };
+  }
+  const chartBounds = chart.getBoundingClientRect();
+  let anchorX = chartBounds.width / 2;
+  let anchorY = chartBounds.height / 2;
+  const matrix = typeof svg.getScreenCTM === "function" ? svg.getScreenCTM() : null;
+  if (matrix) {
+    anchorX = matrix.a * point2.x + matrix.c * point2.y + matrix.e - chartBounds.left;
+    anchorY = matrix.b * point2.x + matrix.d * point2.y + matrix.f - chartBounds.top;
+  } else {
+    const svgBounds = svg.getBoundingClientRect();
+    const viewBox = svg.getAttribute("viewBox")?.trim().split(/[ ,]+/).map(Number);
+    if (viewBox?.length === 4 && viewBox.every(Number.isFinite) && viewBox[2] > 0 && viewBox[3] > 0 && svgBounds.width > 0 && svgBounds.height > 0) {
+      const scale = Math.min(svgBounds.width / viewBox[2], svgBounds.height / viewBox[3]);
+      const renderedWidth = viewBox[2] * scale;
+      const renderedHeight = viewBox[3] * scale;
+      anchorX = svgBounds.left - chartBounds.left + (svgBounds.width - renderedWidth) / 2 + (point2.x - viewBox[0]) * scale;
+      anchorY = svgBounds.top - chartBounds.top + (svgBounds.height - renderedHeight) / 2 + (point2.y - viewBox[1]) * scale;
+    }
+  }
+  const horizontalInset = Math.min(95, chartBounds.width / 2);
+  anchorX = Math.min(
+    Math.max(anchorX, horizontalInset),
+    Math.max(horizontalInset, chartBounds.width - horizontalInset)
+  );
+  anchorY = Math.min(Math.max(anchorY, 0), chartBounds.height);
+  return {
+    ...content,
+    anchorX,
+    anchorY,
+    placement: anchorY < 92 ? "bottom" : "top"
+  };
+}
+function LiveLineDot({
+  color,
+  cx,
+  cy,
+  index,
+  lastIndex
+}) {
+  if (index !== lastIndex || cx === void 0 || cy === void 0) return null;
+  return /* @__PURE__ */ jsxs2("g", { "aria-hidden": "true", "data-slot": "agent-ui-chart-live-point", children: [
+    /* @__PURE__ */ jsx2("circle", { className: "aui-chart-live-point__pulse", cx, cy, fill: color, r: "7" }),
+    /* @__PURE__ */ jsx2("circle", { className: "aui-chart-live-point__core", cx, cy, fill: color, r: "3.5" })
+  ] });
+}
+function datumAtActiveIndex(rows, activeIndex) {
+  const index = typeof activeIndex === "number" ? Number(activeIndex) : Number(activeIndex ?? NaN);
+  return Number.isInteger(index) ? rows[index] : void 0;
+}
+function CartesianChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  type,
+  viewAction
+}) {
+  const gradientPrefix = useId().replaceAll(":", "");
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const ranges = component.ranges ?? [];
+  const fallbackRangeId = ranges.find((range) => range.id === component.defaultRangeId)?.id ?? ranges.at(-1)?.id;
+  const [selectedRangeId, setSelectedRangeId] = useState2(fallbackRangeId);
+  const activeRange = ranges.find((range) => range.id === selectedRangeId) ?? ranges.find((range) => range.id === fallbackRangeId);
+  const seriesKeys = useMemo2(
+    () => new Set(component.series.map((item) => item.dataKey)),
+    [component.series]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((dataKey) => seriesKeys.has(dataKey)));
+    return reconciled.size < component.series.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.series.length, hidden, seriesKeys]);
+  const normalizedData = useMemo2(
+    () => component.data.map(
+      (datum) => Object.fromEntries(
+        Object.entries(datum).map(([key, value]) => [
+          key,
+          typeof value === "number" || typeof value === "string" ? value : String(value ?? "")
+        ])
+      )
+    ),
+    [component.data]
+  );
+  const rangedData = activeRange?.maxItems ? normalizedData.slice(-activeRange.maxItems) : normalizedData;
+  const data = component.kind === "line-chart" && component.mode === "live" ? rangedData.slice(-(component.windowSize ?? 30)) : rangedData;
+  const primarySeries = component.series[0];
+  const summary = (() => {
+    if (!component.showSummary || !primarySeries || data.length === 0) return null;
+    const first = Number(data[0]?.[primarySeries.dataKey]);
+    const latest = Number(data.at(-1)?.[primarySeries.dataKey]);
+    if (!Number.isFinite(first) || !Number.isFinite(latest)) return null;
+    return {
+      change: first === 0 ? void 0 : (latest - first) / Math.abs(first) * 100,
+      // The headline value stays exact even when the axis format is compact.
+      format: primarySeries.format && primarySeries.format.style !== "percent" ? { ...primarySeries.format, compact: false } : primarySeries.format,
+      label: primarySeries.label,
+      value: latest
+    };
+  })();
+  const horizontalBars = type === "bar" && component.kind === "bar-chart" && component.layout === "horizontal";
+  const isComposed = component.kind === "composed-chart";
+  const visibleBarKeys = component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey);
+  const visibleComposedStackedBarKeys = isComposed ? component.series.filter((item) => item.type === "bar" && item.stacked && !activeHidden.has(item.dataKey)).map((item) => item.dataKey) : [];
+  const leftFormat = isComposed ? component.series.find((item) => item.axis !== "right")?.format : component.series[0]?.format;
+  const rightFormat = isComposed ? component.series.find((item) => item.axis === "right")?.format : void 0;
+  const hasRightAxis = isComposed && component.series.some((item) => item.axis === "right");
+  const formatChartAxis = (value, format = leftFormat) => format ? formatNumber(value, format) : formatAxisValue(value);
+  const lineMode = component.kind === "line-chart" ? component.mode ?? "standard" : "standard";
+  const lineBaseline = component.kind === "line-chart" ? component.baseline ?? 0 : 0;
+  const primaryValues = primarySeries ? data.flatMap((datum) => {
+    const value = Number(datum[primarySeries.dataKey]);
+    return Number.isFinite(value) ? [value] : [];
+  }) : [];
+  const lineMinimum = Math.min(lineBaseline, ...primaryValues);
+  const lineMaximum = Math.max(lineBaseline, ...primaryValues);
+  const profitLossOffset = lineMaximum === lineMinimum ? 50 : (lineMaximum - lineBaseline) / (lineMaximum - lineMinimum) * 100;
+  const positiveLineColor = resolveChartColor(
+    component.kind === "line-chart" ? component.positiveColor ?? "success" : "success",
+    0
+  );
+  const negativeLineColor = resolveChartColor(
+    component.kind === "line-chart" ? component.negativeColor ?? "danger" : "danger",
+    1
+  );
+  const liveValue = lineMode === "live" && primarySeries ? Number(data.at(-1)?.[primarySeries.dataKey]) : void 0;
+  const activeSeriesKeys = new Set(
+    component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey)
+  );
+  const legend = lineMode === "profit-loss" ? /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      ariaLabel: "Chart direction",
+      items: [
+        {
+          color: positiveLineColor,
+          id: "positive",
+          label: "Above baseline"
+        },
+        {
+          color: negativeLineColor,
+          id: "negative",
+          label: "Below baseline"
+        }
+      ]
+    }
+  ) : /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeSeriesKeys,
+      ariaLabel: "Chart series",
+      items: component.series.map((item, index) => ({
+        color: resolveChartColor(item.color, index),
+        id: item.dataKey,
+        label: item.label
+      })),
+      onToggle: component.series.length > 1 ? (dataKey) => setHidden(() => {
+        const next = new Set(activeHidden);
+        const visible = component.series.length - next.size;
+        if (next.has(dataKey)) next.delete(dataKey);
+        else if (visible > 1) next.add(dataKey);
+        return next;
+      }) : void 0
+    }
+  );
+  const axes = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
+    horizontalBars ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(XAxis, { tickFormatter: (value) => formatChartAxis(value), type: "number" }),
+      /* @__PURE__ */ jsx2(YAxis, { dataKey: component.xKey, type: "category", width: 88 })
+    ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        XAxis,
+        {
+          dataKey: component.xKey,
+          interval: "preserveStartEnd",
+          minTickGap: 28,
+          tickMargin: 10
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        YAxis,
+        {
+          domain: type === "line" ? ["auto", "auto"] : void 0,
+          tickFormatter: (value) => formatChartAxis(value),
+          width: "auto",
+          yAxisId: isComposed ? "left" : void 0
+        }
+      ),
+      hasRightAxis ? /* @__PURE__ */ jsx2(
+        YAxis,
+        {
+          orientation: "right",
+          tickFormatter: (value) => formatChartAxis(value, rightFormat),
+          width: "auto",
+          yAxisId: "right"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx2(
+      Tooltip,
+      {
+        isAnimationActive: false,
+        content: /* @__PURE__ */ jsx2(
+          ComponentTooltip,
+          {
+            series: component.series,
+            indicatorColor: lineMode === "profit-loss" ? (entry) => {
+              const value = Number(entry.value);
+              return Number.isFinite(value) ? value >= lineBaseline ? positiveLineColor : negativeLineColor : void 0;
+            } : void 0
+          }
+        )
+      }
+    )
+  ] });
+  const common = {
+    data,
+    margin: { bottom: 2, left: 8, right: hasRightAxis ? 8 : 12, top: 8 },
+    // Taken from the chart rather than each Bar or Line so one handler covers
+    // every cartesian type, and so clicking anywhere in a category selects it
+    // instead of only the few pixels the mark occupies.
+    ...onSelect && {
+      onClick: (state) => {
+        const datum = datumAtActiveIndex(data, state.activeIndex);
+        if (datum) onSelect(createComponentSelection(component, datum));
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        summary || ranges.length > 0 || lineMode === "live" ? /* @__PURE__ */ jsxs2("div", { className: "aui-chart-toolbar", "data-slot": "agent-ui-chart-toolbar", children: [
+          summary ? /* @__PURE__ */ jsxs2("div", { className: "aui-chart-summary", "data-slot": "agent-ui-chart-summary", children: [
+            /* @__PURE__ */ jsx2("span", { className: "aui-chart-summary__label", children: summary.label }),
+            /* @__PURE__ */ jsxs2("div", { className: "aui-chart-summary__value-row", children: [
+              /* @__PURE__ */ jsx2("strong", { className: "aui-chart-summary__value", children: formatNumber(summary.value, summary.format) }),
+              summary.change !== void 0 ? /* @__PURE__ */ jsx2(TrendChange, { value: summary.change }) : null,
+              activeRange ? /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "aui-chart-summary__range",
+                  "data-slot": "agent-ui-chart-summary-range",
+                  children: activeRange.label
+                }
+              ) : null
+            ] })
+          ] }) : null,
+          lineMode === "live" ? /* @__PURE__ */ jsxs2("span", { className: "aui-chart-live", "data-slot": "agent-ui-chart-live", children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "aui-chart-live__dot" }),
+            "Live",
+            primarySeries && Number.isFinite(liveValue) ? /* @__PURE__ */ jsx2("span", { className: "aui-chart-accessible-value", children: `Latest ${primarySeries.label}: ${formatNumber(liveValue, primarySeries.format)}` }) : null
+          ] }) : null,
+          ranges.length > 0 ? /* @__PURE__ */ jsx2(
+            Segment,
+            {
+              "aria-label": "Chart range",
+              className: "aui-chart-ranges",
+              selectedKey: activeRange?.id,
+              variant: "text",
+              onSelectionChange: setSelectedRangeId,
+              children: ranges.map((range) => /* @__PURE__ */ jsx2(Segment.Item, { id: range.id, children: range.label }, range.id))
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} chart`,
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            className: mergeClassNames(
+              `aui-chart aui-chart--${type}`,
+              lineMode === "live" ? "aui-chart--live" : void 0,
+              lineMode === "profit-loss" ? "aui-chart--profit-loss" : void 0
+            ),
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 220, width: "100%", children: type === "composed" && component.kind === "composed-chart" ? /* @__PURE__ */ jsxs2(RechartsComposedChart, { accessibilityLayer: true, ...common, children: [
+              /* @__PURE__ */ jsx2("defs", { children: component.series.map((item, index) => /* @__PURE__ */ jsxs2(
+                "linearGradient",
+                {
+                  id: `${gradientPrefix}-${index}`,
+                  x1: "0",
+                  x2: "0",
+                  y1: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.18
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.02
+                      }
+                    )
+                  ]
+                },
+                item.dataKey
+              )) }),
+              axes,
+              component.series.map((item, index) => {
+                const color = resolveChartColor(item.color, index);
+                const yAxisId = item.axis ?? "left";
+                if (item.type === "area") {
+                  return /* @__PURE__ */ jsx2(
+                    Area,
+                    {
+                      dataKey: item.dataKey,
+                      dot: false,
+                      fill: `url(#${gradientPrefix}-${index})`,
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      stackId: item.stacked ? "area-stack" : void 0,
+                      stroke: color,
+                      strokeWidth: 2,
+                      type: "monotone",
+                      yAxisId
+                    },
+                    item.dataKey
+                  );
+                }
+                if (item.type === "bar") {
+                  return /* @__PURE__ */ jsx2(
+                    Bar,
+                    {
+                      dataKey: item.dataKey,
+                      fill: color,
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      stackId: item.stacked ? "bar-stack" : void 0,
+                      yAxisId,
+                      radius: getBarRadius({
+                        dataKey: item.dataKey,
+                        horizontal: false,
+                        stacked: Boolean(item.stacked),
+                        visibleStackKeys: visibleComposedStackedBarKeys
+                      })
+                    },
+                    item.dataKey
+                  );
+                }
+                return /* @__PURE__ */ jsx2(
+                  Line,
+                  {
+                    dataKey: item.dataKey,
+                    dot: false,
+                    hide: activeHidden.has(item.dataKey),
+                    isAnimationActive: false,
+                    name: item.label,
+                    stroke: color,
+                    strokeWidth: 2,
+                    type: "monotone",
+                    yAxisId
+                  },
+                  item.dataKey
+                );
+              })
+            ] }) : type === "line" ? /* @__PURE__ */ jsxs2(RechartsLineChart, { accessibilityLayer: true, ...common, children: [
+              lineMode === "profit-loss" && component.kind === "line-chart" ? /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: `${gradientPrefix}-profit-loss`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx2("stop", { offset: `${profitLossOffset}%`, stopColor: positiveLineColor }),
+                /* @__PURE__ */ jsx2("stop", { offset: `${profitLossOffset}%`, stopColor: negativeLineColor })
+              ] }) }) : null,
+              axes,
+              lineMode === "profit-loss" ? /* @__PURE__ */ jsx2(ReferenceLine, { stroke: "var(--border)", strokeDasharray: "4 4", y: lineBaseline }) : null,
+              component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                Line,
+                {
+                  dataKey: item.dataKey,
+                  hide: activeHidden.has(item.dataKey),
+                  isAnimationActive: false,
+                  name: item.label,
+                  strokeWidth: 2,
+                  type: "monotone",
+                  dot: lineMode === "live" ? /* @__PURE__ */ jsx2(
+                    LiveLineDot,
+                    {
+                      color: resolveChartColor(item.color, index),
+                      lastIndex: data.length - 1
+                    }
+                  ) : false,
+                  stroke: lineMode === "profit-loss" ? `url(#${gradientPrefix}-profit-loss)` : resolveChartColor(item.color, index)
+                },
+                item.dataKey
+              ))
+            ] }) : type === "area" ? /* @__PURE__ */ jsxs2(RechartsAreaChart, { accessibilityLayer: true, ...common, children: [
+              /* @__PURE__ */ jsx2("defs", { children: component.series.map((item, index) => /* @__PURE__ */ jsxs2(
+                "linearGradient",
+                {
+                  id: `${gradientPrefix}-${index}`,
+                  x1: "0",
+                  x2: "0",
+                  y1: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.2
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.01
+                      }
+                    )
+                  ]
+                },
+                item.dataKey
+              )) }),
+              axes,
+              component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                Area,
+                {
+                  dataKey: item.dataKey,
+                  dot: false,
+                  fill: `url(#${gradientPrefix}-${index})`,
+                  hide: activeHidden.has(item.dataKey),
+                  isAnimationActive: false,
+                  name: item.label,
+                  stroke: resolveChartColor(item.color, index),
+                  strokeWidth: 2,
+                  type: "monotone",
+                  stackId: component.kind === "area-chart" && component.stacked ? "stack" : void 0
+                },
+                item.dataKey
+              ))
+            ] }) : /* @__PURE__ */ jsxs2(
+              RechartsBarChart,
+              {
+                accessibilityLayer: true,
+                ...common,
+                layout: horizontalBars ? "vertical" : "horizontal",
+                children: [
+                  axes,
+                  component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                    Bar,
+                    {
+                      dataKey: item.dataKey,
+                      fill: resolveChartColor(item.color, index),
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      radius: getBarRadius({
+                        dataKey: item.dataKey,
+                        horizontal: horizontalBars,
+                        stacked: component.kind === "bar-chart" && Boolean(component.stacked),
+                        visibleStackKeys: visibleBarKeys
+                      }),
+                      stackId: component.kind === "bar-chart" && component.stacked ? "stack" : void 0
+                    },
+                    item.dataKey
+                  ))
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function LineChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "line" });
+}
+function AreaChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "area" });
+}
+function BarChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "bar" });
+}
+function ComposedChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "composed" });
+}
+function ProportionalChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  variant,
+  viewAction
+}) {
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const labels = useMemo2(
+    () => new Set(component.data.map((datum) => String(datum[component.labelKey] ?? ""))),
+    [component.data, component.labelKey]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((label) => labels.has(label)));
+    return reconciled.size < component.data.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.data.length, hidden, labels]);
+  const data = component.data.flatMap((datum, index) => {
+    const name = String(datum[component.labelKey] ?? "");
+    return activeHidden.has(name) ? [] : [
+      {
+        color: resolveChartColor(component.colors?.[name], index),
+        name,
+        original: datum,
+        value: Number(datum[component.valueKey] ?? 0)
+      }
+    ];
+  });
+  const total = data.reduce((sum, datum) => sum + datum.value, 0);
+  const activeCategoryKeys = new Set(
+    component.data.map((datum) => String(datum[component.labelKey] ?? "")).filter((label) => !activeHidden.has(label))
+  );
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeCategoryKeys,
+      ariaLabel: "Chart categories",
+      items: component.data.map((datum, index) => {
+        const label = String(datum[component.labelKey] ?? "");
+        return {
+          color: resolveChartColor(component.colors?.[label], index),
+          id: label,
+          label,
+          value: formatNumber(Number(datum[component.valueKey] ?? 0), component.format)
+        };
+      }),
+      onToggle: (label) => setHidden(() => {
+        const next = new Set(activeHidden);
+        if (next.has(label)) next.delete(label);
+        else if (next.size < component.data.length - 1) next.add(label);
+        return next;
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} ${variant} chart`,
+            className: "aui-chart aui-chart--pie",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 220, width: "100%", children: /* @__PURE__ */ jsxs2(RechartsPieChart, { accessibilityLayer: true, children: [
+              /* @__PURE__ */ jsxs2(
+                Pie,
+                {
+                  cx: "50%",
+                  cy: "50%",
+                  data,
+                  dataKey: "value",
+                  innerRadius: variant === "donut" ? 58 : 0,
+                  isAnimationActive: false,
+                  nameKey: "name",
+                  outerRadius: 88,
+                  paddingAngle: 0,
+                  strokeWidth: 0,
+                  onClick: (_, index) => {
+                    const datum = data[index]?.original;
+                    if (datum) onSelect?.(createComponentSelection(component, datum));
+                  },
+                  children: [
+                    data.map((entry) => /* @__PURE__ */ jsx2(Cell, { fill: entry.color }, entry.name)),
+                    variant === "donut" ? /* @__PURE__ */ jsx2(
+                      Label,
+                      {
+                        className: "aui-donut-total",
+                        position: "center",
+                        value: formatNumber(total, component.format)
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: [{ dataKey: "value", format: component.format }] }),
+                  isAnimationActive: false
+                }
+              )
+            ] }) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function PieChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(ProportionalChartComponentContent, { ...props, variant: "pie" });
+}
+function DonutChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(ProportionalChartComponentContent, { ...props, variant: "donut" });
+}
+function RadarChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  viewAction
+}) {
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const seriesKeys = useMemo2(
+    () => new Set(component.series.map((item) => item.dataKey)),
+    [component.series]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((dataKey) => seriesKeys.has(dataKey)));
+    return reconciled.size < component.series.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.series.length, hidden, seriesKeys]);
+  const activeSeriesKeys = new Set(
+    component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey)
+  );
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeSeriesKeys,
+      ariaLabel: "Chart series",
+      items: component.series.map((item, index) => ({
+        color: resolveChartColor(item.color, index),
+        id: item.dataKey,
+        label: item.label
+      })),
+      onToggle: component.series.length > 1 ? (dataKey) => setHidden(() => {
+        const next = new Set(activeHidden);
+        const visible = component.series.length - next.size;
+        if (next.has(dataKey)) next.delete(dataKey);
+        else if (visible > 1) next.add(dataKey);
+        return next;
+      }) : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} radar chart`,
+            className: "aui-chart aui-chart--radar",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 240, width: "100%", children: /* @__PURE__ */ jsxs2(
+              RechartsRadarChart,
+              {
+                data: component.data,
+                margin: { bottom: 8, left: 20, right: 20, top: 8 },
+                children: [
+                  /* @__PURE__ */ jsx2(PolarGrid, {}),
+                  /* @__PURE__ */ jsx2(PolarAngleAxis, { dataKey: component.angleKey }),
+                  /* @__PURE__ */ jsx2(PolarRadiusAxis, { axisLine: false, tick: false }),
+                  component.series.map(
+                    (item, index) => activeHidden.has(item.dataKey) ? null : /* @__PURE__ */ jsx2(
+                      Radar,
+                      {
+                        dataKey: item.dataKey,
+                        fill: resolveChartColor(item.color, index),
+                        fillOpacity: 0.12,
+                        isAnimationActive: false,
+                        name: item.label,
+                        stroke: resolveChartColor(item.color, index),
+                        strokeWidth: 2
+                      },
+                      item.dataKey
+                    )
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Tooltip,
+                    {
+                      content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: component.series }),
+                      isAnimationActive: false
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function RadialChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const data = component.data.map((datum, index) => ({
+    ...datum,
+    fill: resolveChartColor(component.colors?.[String(datum[component.labelKey] ?? "")], index)
+  }));
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      ariaLabel: "Chart categories",
+      items: component.data.map((datum, index) => {
+        const label = String(datum[component.labelKey] ?? "");
+        return {
+          color: resolveChartColor(component.colors?.[label], index),
+          id: `${label}-${index}`,
+          label,
+          value: formatNumber(Number(datum[component.valueKey] ?? 0), component.format)
+        };
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} radial chart`,
+            className: "aui-chart aui-chart--radial",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 230, width: "100%", children: /* @__PURE__ */ jsxs2(
+              RechartsRadialBarChart,
+              {
+                cx: "50%",
+                cy: "50%",
+                data,
+                endAngle: component.endAngle ?? -270,
+                innerRadius: "24%",
+                outerRadius: "92%",
+                startAngle: component.startAngle ?? 90,
+                children: [
+                  /* @__PURE__ */ jsx2(PolarAngleAxis, { domain: [0, component.maxValue ?? "auto"], tick: false, type: "number" }),
+                  /* @__PURE__ */ jsx2(
+                    RadialBar,
+                    {
+                      background: true,
+                      dataKey: component.valueKey,
+                      isAnimationActive: false,
+                      name: component.labelKey,
+                      onClick: (datum) => onSelect?.(createComponentSelection(component, datum))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Tooltip,
+                    {
+                      isAnimationActive: false,
+                      content: /* @__PURE__ */ jsx2(
+                        ComponentTooltip,
+                        {
+                          series: [{ dataKey: component.valueKey, format: component.format }]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function ScatterChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const groups = useMemo2(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const datum of component.data) {
+      const label = component.groupKey ? String(datum[component.groupKey] ?? "Other") : component.title;
+      const entries = grouped.get(label) ?? [];
+      entries.push(datum);
+      grouped.set(label, entries);
+    }
+    return [...grouped.entries()];
+  }, [component.data, component.groupKey, component.title]);
+  const series = [
+    { dataKey: component.xKey, format: component.format },
+    { dataKey: component.yKey, format: component.format },
+    ...component.sizeKey ? [{ dataKey: component.sizeKey, format: component.format }] : []
+  ];
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      ariaLabel: "Chart groups",
+      items: groups.map(([label], index) => ({
+        color: resolveChartColor(component.colors?.[label], index),
+        id: label,
+        label
+      }))
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} scatter chart`,
+            className: "aui-chart aui-chart--scatter",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 240, width: "100%", children: /* @__PURE__ */ jsxs2(RechartsScatterChart, { accessibilityLayer: true, margin: { bottom: 8, left: 0, right: 8, top: 8 }, children: [
+              /* @__PURE__ */ jsx2(CartesianGrid, {}),
+              /* @__PURE__ */ jsx2(
+                XAxis,
+                {
+                  dataKey: component.xKey,
+                  name: component.xKey,
+                  tickFormatter: (value) => formatAxisValue(value),
+                  type: "number"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                YAxis,
+                {
+                  dataKey: component.yKey,
+                  name: component.yKey,
+                  tickFormatter: (value) => formatAxisValue(value),
+                  type: "number",
+                  width: 42
+                }
+              ),
+              component.sizeKey ? /* @__PURE__ */ jsx2(ZAxis, { dataKey: component.sizeKey, range: [48, 320], type: "number" }) : null,
+              /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  content: /* @__PURE__ */ jsx2(ComponentTooltip, { series }),
+                  cursor: { strokeDasharray: "4 4" },
+                  isAnimationActive: false
+                }
+              ),
+              groups.map(([label, data], index) => /* @__PURE__ */ jsx2(
+                Scatter,
+                {
+                  data,
+                  fill: resolveChartColor(component.colors?.[label], index),
+                  isAnimationActive: false,
+                  name: label,
+                  onClick: (point2) => {
+                    const datum = "payload" in point2 ? point2.payload : point2;
+                    onSelect?.(createComponentSelection(component, datum));
+                  }
+                },
+                label
+              ))
+            ] }) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function HeatmapComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const [focusedCell, setFocusedCell] = useState2(0);
+  const xValues = [...new Set(component.data.map((datum) => String(datum[component.xKey] ?? "")))];
+  const yValues = [...new Set(component.data.map((datum) => String(datum[component.yKey] ?? "")))];
+  const values = component.data.map((datum) => Number(datum[component.valueKey] ?? 0));
+  const minimum = Math.min(...values);
+  const maximum = Math.max(...values);
+  const range = maximum - minimum || 1;
+  const width = 420;
+  const left = 84;
+  const top = 28;
+  const right = 8;
+  const bottom = 44;
+  const cellWidth = (width - left - right) / Math.max(1, xValues.length);
+  const cellHeight = Math.max(26, Math.min(44, 230 / Math.max(1, yValues.length)));
+  const height = top + yValues.length * cellHeight + bottom;
+  const dataByCoordinate = new Map(
+    component.data.map((datum) => [
+      `${String(datum[component.xKey] ?? "")}\0${String(datum[component.yKey] ?? "")}`,
+      datum
+    ])
+  );
+  const cellIndexByCoordinate = new Map(
+    [...dataByCoordinate.keys()].map((coordinate, index) => [coordinate, index])
+  );
+  const rovingCell = Math.min(focusedCell, Math.max(0, dataByCoordinate.size - 1));
+  const heatmapColor = resolveChartColor(component.color, 0);
+  const legend = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-label": "Heatmap intensity",
+      className: "aui-legend aui-legend--scale",
+      "data-slot": "agent-ui-chart-legend",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: formatNumber(minimum, component.format) }),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "aui-legend__scale",
+            style: {
+              background: `linear-gradient(90deg, color-mix(in srgb, ${heatmapColor} 8%, transparent), ${heatmapColor})`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: formatNumber(maximum, component.format) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} heatmap`,
+            className: "aui-chart aui-chart--heatmap",
+            "data-slot": "agent-ui-chart",
+            role: onSelect ? "group" : "img",
+            children: /* @__PURE__ */ jsxs2(
+              "svg",
+              {
+                "aria-hidden": onSelect ? void 0 : true,
+                preserveAspectRatio: "xMidYMid meet",
+                viewBox: `0 0 ${width} ${height}`,
+                children: [
+                  xValues.map((label, index) => /* @__PURE__ */ jsx2(
+                    "text",
+                    {
+                      className: "aui-heatmap__axis",
+                      textAnchor: "middle",
+                      x: left + index * cellWidth + cellWidth / 2,
+                      y: height - 14,
+                      children: label
+                    },
+                    label
+                  )),
+                  yValues.map((label, row) => /* @__PURE__ */ jsxs2("g", { children: [
+                    /* @__PURE__ */ jsx2(
+                      "text",
+                      {
+                        className: "aui-heatmap__axis",
+                        dominantBaseline: "middle",
+                        textAnchor: "end",
+                        x: left - 8,
+                        y: top + row * cellHeight + cellHeight / 2,
+                        children: label
+                      }
+                    ),
+                    xValues.map((xLabel, column) => {
+                      const coordinate = `${xLabel}\0${label}`;
+                      const datum = dataByCoordinate.get(coordinate);
+                      const markIndex = cellIndexByCoordinate.get(coordinate);
+                      const value = Number(datum?.[component.valueKey] ?? 0);
+                      const opacity = datum ? 0.14 + (value - minimum) / range * 0.76 : 0.04;
+                      return /* @__PURE__ */ jsxs2(
+                        "g",
+                        {
+                          className: "aui-heatmap__cell",
+                          "data-slot": datum ? "agent-ui-heatmap-cell" : void 0,
+                          role: datum && onSelect ? "button" : void 0,
+                          tabIndex: datum && onSelect && markIndex !== void 0 ? markIndex === rovingCell ? 0 : -1 : void 0,
+                          onClick: () => {
+                            if (datum) onSelect?.(createComponentSelection(component, datum));
+                          },
+                          onFocus: () => {
+                            if (markIndex !== void 0) setFocusedCell(markIndex);
+                          },
+                          onKeyDown: (event) => {
+                            if (!datum || !onSelect || markIndex === void 0) return;
+                            const nextIndex = nextRovingMarkIndex(
+                              event.key,
+                              markIndex,
+                              dataByCoordinate.size
+                            );
+                            if (nextIndex !== null) {
+                              event.preventDefault();
+                              setFocusedCell(nextIndex);
+                              focusSvgMark(event, "agent-ui-heatmap-cell", nextIndex);
+                              return;
+                            }
+                            if (event.key !== "Enter" && event.key !== " ") return;
+                            event.preventDefault();
+                            onSelect(createComponentSelection(component, datum));
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "rect",
+                              {
+                                fill: heatmapColor,
+                                fillOpacity: opacity,
+                                height: Math.max(1, cellHeight - 3),
+                                rx: 6,
+                                width: Math.max(1, cellWidth - 3),
+                                x: left + column * cellWidth + 1.5,
+                                y: top + row * cellHeight + 1.5
+                              }
+                            ),
+                            datum ? /* @__PURE__ */ jsx2("title", { children: `${label}, ${xLabel}: ${formatNumber(value, component.format)}` }) : null
+                          ]
+                        },
+                        xLabel
+                      );
+                    })
+                  ] }, label))
+                ]
+              }
+            )
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function CandlestickChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const [focusedCandle, setFocusedCandle] = useState2(0);
+  const [focusedTooltip, setFocusedTooltip] = useState2(null);
+  const [hoveredTooltip, setHoveredTooltip] = useState2(null);
+  const tooltip = hoveredTooltip ?? focusedTooltip;
+  const width = 420;
+  const height = 260;
+  const points = component.data.map((datum) => ({
+    close: Number(datum[component.closeKey]),
+    high: Number(datum[component.highKey]),
+    label: String(datum[component.xKey] ?? ""),
+    low: Number(datum[component.lowKey]),
+    open: Number(datum[component.openKey])
+  }));
+  const geometry = candlestickGeometry(points, {
+    height,
+    margins: { bottom: 34, left: 58, right: 8, top: 10 },
+    width
+  });
+  const upColor = resolveChartColor(component.upColor ?? "success", 0);
+  const downColor = resolveChartColor(component.downColor ?? "danger", 1);
+  const flatColor = resolveChartColor("default", 2);
+  const rovingCandle = Math.min(focusedCandle, component.data.length - 1);
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-label": `${component.title} candlestick chart`,
+            className: "aui-chart aui-chart--candlestick",
+            "data-slot": "agent-ui-chart",
+            role: "group",
+            children: [
+              /* @__PURE__ */ jsxs2("svg", { preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${width} ${height}`, children: [
+                geometry?.yTicks.map((tick) => /* @__PURE__ */ jsxs2("g", { children: [
+                  /* @__PURE__ */ jsx2(
+                    "line",
+                    {
+                      className: "aui-chart-grid-line",
+                      x1: geometry.bounds.left,
+                      x2: geometry.bounds.right,
+                      y1: tick.y,
+                      y2: tick.y
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "text",
+                    {
+                      className: "aui-chart-axis-label",
+                      dominantBaseline: "middle",
+                      textAnchor: "end",
+                      x: geometry.bounds.left - 9,
+                      y: tick.y,
+                      children: component.format ? formatNumber(tick.value, component.format) : formatAxisValue(tick.value)
+                    }
+                  )
+                ] }, tick.value)),
+                geometry?.candles.map((candle) => {
+                  const datum = component.data[candle.index];
+                  const point2 = points[candle.index];
+                  const color = candle.direction === "up" ? upColor : candle.direction === "down" ? downColor : flatColor;
+                  const tooltipContent = {
+                    items: [
+                      {
+                        color,
+                        id: "open",
+                        label: "Open",
+                        value: formatNumber(point2.open, component.format)
+                      },
+                      {
+                        color,
+                        id: "high",
+                        label: "High",
+                        value: formatNumber(point2.high, component.format)
+                      },
+                      { color, id: "low", label: "Low", value: formatNumber(point2.low, component.format) },
+                      {
+                        color,
+                        id: "close",
+                        label: "Close",
+                        value: formatNumber(point2.close, component.format)
+                      }
+                    ],
+                    label: candle.label
+                  };
+                  return /* @__PURE__ */ jsxs2(
+                    "g",
+                    {
+                      "aria-label": `${candle.label}: open ${formatNumber(point2.open, component.format)}, high ${formatNumber(point2.high, component.format)}, low ${formatNumber(point2.low, component.format)}, close ${formatNumber(point2.close, component.format)}`,
+                      className: "aui-chart-mark",
+                      "data-slot": "agent-ui-candlestick",
+                      role: datum && onSelect ? "button" : "img",
+                      tabIndex: candle.index === rovingCandle ? 0 : -1,
+                      onBlur: () => setFocusedTooltip(null),
+                      onPointerLeave: () => setHoveredTooltip(null),
+                      onClick: datum && onSelect ? () => onSelect(createComponentSelection(component, datum)) : void 0,
+                      onFocus: (event) => {
+                        setFocusedCandle(candle.index);
+                        setFocusedTooltip(
+                          positionSvgChartTooltip(
+                            event,
+                            { x: candle.x, y: Math.min(candle.wick.top, candle.body.y) },
+                            tooltipContent
+                          )
+                        );
+                      },
+                      onKeyDown: (event) => {
+                        const nextIndex = nextRovingMarkIndex(
+                          event.key,
+                          candle.index,
+                          geometry.candles.length
+                        );
+                        if (nextIndex !== null) {
+                          event.preventDefault();
+                          setFocusedCandle(nextIndex);
+                          focusSvgMark(event, "agent-ui-candlestick", nextIndex);
+                          return;
+                        }
+                        if (!datum || !onSelect) return;
+                        if (event.key !== "Enter" && event.key !== " ") return;
+                        event.preventDefault();
+                        onSelect(createComponentSelection(component, datum));
+                      },
+                      onPointerEnter: (event) => {
+                        setHoveredTooltip(
+                          positionSvgChartTooltip(
+                            event,
+                            { x: candle.x, y: Math.min(candle.wick.top, candle.body.y) },
+                            tooltipContent
+                          )
+                        );
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          "line",
+                          {
+                            stroke: color,
+                            strokeWidth: 1.5,
+                            x1: candle.wick.x,
+                            x2: candle.wick.x,
+                            y1: candle.wick.top,
+                            y2: candle.wick.bottom
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "rect",
+                          {
+                            fill: color,
+                            height: candle.body.height,
+                            rx: Math.min(2, candle.body.width / 2),
+                            width: candle.body.width,
+                            x: candle.body.x,
+                            y: candle.body.y
+                          }
+                        )
+                      ]
+                    },
+                    `${candle.label}-${candle.index}`
+                  );
+                }),
+                geometry?.xLabelIndices.map((index) => {
+                  const candle = geometry.candles[index];
+                  return candle ? /* @__PURE__ */ jsx2(
+                    "text",
+                    {
+                      className: "aui-chart-axis-label",
+                      textAnchor: "middle",
+                      x: candle.x,
+                      y: height - 10,
+                      children: candle.label
+                    },
+                    `${candle.label}-${index}`
+                  ) : null;
+                })
+              ] }),
+              /* @__PURE__ */ jsx2(SvgChartTooltip, { state: tooltip })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ChartLegend,
+          {
+            ariaLabel: "Price direction",
+            items: [
+              { color: upColor, id: "up", label: "Close above open" },
+              { color: downColor, id: "down", label: "Close below open" }
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FunnelChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const [focusedStage, setFocusedStage] = useState2(0);
+  const [focusedTooltip, setFocusedTooltip] = useState2(null);
+  const [hoveredTooltip, setHoveredTooltip] = useState2(null);
+  const tooltip = hoveredTooltip ?? focusedTooltip;
+  const width = 640;
+  const height = 250;
+  const plotTop = 12;
+  const plotBottom = 238;
+  const plotLeft = 22;
+  const plotRight = 618;
+  const vertical = (component.orientation ?? "vertical") === "vertical";
+  const values = component.data.map((datum) => Math.max(0, Number(datum[component.valueKey] ?? 0)));
+  const maximum = Math.max(...values, 1);
+  const firstValue = values[0] ?? 0;
+  const rovingStage = Math.min(focusedStage, component.data.length - 1);
+  const stageSize = vertical ? (plotBottom - plotTop) / component.data.length : (plotRight - plotLeft) / component.data.length;
+  const pointsForStage = (index) => {
+    const currentRatio = (values[index] ?? 0) / maximum;
+    const nextRatio = (values[index + 1] ?? values[index] ?? 0) / maximum;
+    if (vertical) {
+      const y1 = plotTop + stageSize * index;
+      const y2 = plotTop + stageSize * (index + 1) - 3;
+      const topWidth = Math.max(8, currentRatio * (plotRight - plotLeft));
+      const bottomWidth = Math.max(8, nextRatio * (plotRight - plotLeft));
+      const center2 = width / 2;
+      return `${center2 - topWidth / 2},${y1} ${center2 + topWidth / 2},${y1} ${center2 + bottomWidth / 2},${y2} ${center2 - bottomWidth / 2},${y2}`;
+    }
+    const x1 = plotLeft + stageSize * index;
+    const x2 = plotLeft + stageSize * (index + 1) - 3;
+    const startHeight = Math.max(8, currentRatio * (plotBottom - plotTop));
+    const endHeight = Math.max(8, nextRatio * (plotBottom - plotTop));
+    const center = height / 2;
+    return `${x1},${center - startHeight / 2} ${x2},${center - endHeight / 2} ${x2},${center + endHeight / 2} ${x1},${center + startHeight / 2}`;
+  };
+  const legend = component.data.map((datum, index) => {
+    const label = String(datum[component.labelKey] ?? "");
+    const value = values[index] ?? 0;
+    const percentage = firstValue > 0 ? value / firstValue : 0;
+    return {
+      color: resolveChartColor(component.colors?.[label], index),
+      id: `${label}-${index}`,
+      label,
+      value: component.showPercentages ? `${formatNumber(value, component.format)} \xB7 ${formatNumber(percentage, { maximumFractionDigits: 1, style: "percent" })}` : formatNumber(value, component.format)
+    };
+  });
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-label": `${component.title} funnel chart`,
+            "data-slot": "agent-ui-chart",
+            role: "group",
+            className: mergeClassNames(
+              "aui-chart aui-chart--funnel",
+              vertical ? "aui-chart--funnel-vertical" : "aui-chart--funnel-horizontal"
+            ),
+            children: [
+              /* @__PURE__ */ jsx2("svg", { preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${width} ${height}`, children: component.data.map((datum, index) => {
+                const label = String(datum[component.labelKey] ?? "");
+                const color = resolveChartColor(component.colors?.[label], index);
+                const value = values[index] ?? 0;
+                const percentage = firstValue > 0 ? value / firstValue : 0;
+                const tooltipContent = {
+                  items: [
+                    {
+                      color,
+                      id: "value",
+                      label: "Value",
+                      value: formatNumber(value, component.format)
+                    },
+                    ...component.showPercentages ? [
+                      {
+                        color,
+                        id: "conversion",
+                        label: "From first stage",
+                        value: formatNumber(percentage, {
+                          maximumFractionDigits: 1,
+                          style: "percent"
+                        })
+                      }
+                    ] : []
+                  ],
+                  label
+                };
+                const tooltipPoint = vertical ? { x: width / 2, y: plotTop + stageSize * index } : { x: plotLeft + stageSize * (index + 0.5), y: plotTop };
+                return /* @__PURE__ */ jsx2(
+                  "g",
+                  {
+                    "aria-label": `${label}: ${formatNumber(values[index] ?? 0, component.format)}`,
+                    className: "aui-chart-mark",
+                    "data-slot": "agent-ui-funnel-stage",
+                    role: onSelect ? "button" : "img",
+                    tabIndex: index === rovingStage ? 0 : -1,
+                    onBlur: () => setFocusedTooltip(null),
+                    onPointerLeave: () => setHoveredTooltip(null),
+                    onClick: onSelect ? () => onSelect(createComponentSelection(component, datum)) : void 0,
+                    onFocus: (event) => {
+                      setFocusedStage(index);
+                      setFocusedTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+                    },
+                    onKeyDown: (event) => {
+                      const nextIndex = nextRovingMarkIndex(event.key, index, component.data.length);
+                      if (nextIndex !== null) {
+                        event.preventDefault();
+                        setFocusedStage(nextIndex);
+                        focusSvgMark(event, "agent-ui-funnel-stage", nextIndex);
+                        return;
+                      }
+                      if (!onSelect) return;
+                      if (event.key !== "Enter" && event.key !== " ") return;
+                      event.preventDefault();
+                      onSelect(createComponentSelection(component, datum));
+                    },
+                    onPointerEnter: (event) => {
+                      setHoveredTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+                    },
+                    children: /* @__PURE__ */ jsx2("polygon", { fill: color, points: pointsForStage(index) })
+                  },
+                  `${label}-${index}`
+                );
+              }) }),
+              /* @__PURE__ */ jsx2(SvgChartTooltip, { state: tooltip })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(ChartLegend, { ariaLabel: "Funnel stages", items: legend })
+      ]
+    }
+  );
+}
+function GaugeChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const [focusedTooltip, setFocusedTooltip] = useState2(null);
+  const [hoveredTooltip, setHoveredTooltip] = useState2(null);
+  const tooltip = hoveredTooltip ?? focusedTooltip;
+  const { maximum, minimum } = resolveGaugeBounds(component);
+  const notches = component.notches ?? 30;
+  const color = resolveChartColor(component.color, 0);
+  const valueLabel = formatNumber(component.value, component.format);
+  const selection = { label: component.label, max: maximum, min: minimum, value: component.value };
+  const orientation = component.orientation ?? "arc";
+  const tooltipContent = {
+    items: [
+      { color, id: "value", label: "Value", value: valueLabel },
+      {
+        color,
+        id: "range",
+        label: "Range",
+        value: `${formatNumber(minimum, component.format)} \u2013 ${formatNumber(maximum, component.format)}`
+      }
+    ],
+    label: component.label
+  };
+  const tooltipPoint = orientation === "arc" ? { x: 240, y: 4 } : { x: 280, y: 34 };
+  const markProps = {
+    "aria-label": `${component.label}: ${valueLabel}`,
+    onBlur: () => setFocusedTooltip(null),
+    onClick: onSelect ? () => onSelect(createComponentSelection(component, selection)) : void 0,
+    onFocus: (event) => {
+      setFocusedTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+    },
+    onKeyDown: (event) => {
+      if (!onSelect || event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      onSelect(createComponentSelection(component, selection));
+    },
+    onPointerEnter: (event) => {
+      setHoveredTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+    },
+    onPointerLeave: () => setHoveredTooltip(null),
+    role: onSelect ? "button" : "img",
+    tabIndex: 0
+  };
+  const arc = orientation === "arc" ? arcGaugeGeometry({
+    centerX: 240,
+    centerY: 126,
+    count: notches,
+    height: 240,
+    max: maximum,
+    min: minimum,
+    padding: 12,
+    radius: 104,
+    value: component.value,
+    width: 480
+  }) : null;
+  const linear = orientation === "linear" ? linearGaugeGeometry({
+    count: notches,
+    gap: 3,
+    height: 24,
+    max: maximum,
+    min: minimum,
+    value: component.value,
+    width: 520
+  }) : null;
+  return /* @__PURE__ */ jsx2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "aria-label": `${component.title} gauge chart`,
+          className: `aui-chart aui-chart--gauge aui-chart--gauge-${orientation}`,
+          "data-slot": "agent-ui-chart",
+          role: "group",
+          children: [
+            orientation === "arc" ? /* @__PURE__ */ jsx2("svg", { preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 480 240", children: /* @__PURE__ */ jsxs2("g", { className: "aui-chart-mark", "data-slot": "agent-ui-gauge", ...markProps, children: [
+              arc?.notches.map((notch) => /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  className: "aui-gauge__notch",
+                  d: notch.path,
+                  "data-active": notch.active,
+                  fill: notch.active ? color : "var(--surface-secondary)"
+                },
+                notch.index
+              )),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__value", textAnchor: "middle", x: "240", y: "126", children: valueLabel }),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__label", textAnchor: "middle", x: "240", y: "150", children: component.label }),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__bound", textAnchor: "end", x: "154", y: "220", children: formatNumber(minimum, component.format) }),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__bound", textAnchor: "start", x: "326", y: "220", children: formatNumber(maximum, component.format) })
+            ] }) }) : /* @__PURE__ */ jsx2("svg", { preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 560 130", children: /* @__PURE__ */ jsxs2("g", { className: "aui-chart-mark", "data-slot": "agent-ui-gauge", ...markProps, children: [
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__label", x: "20", y: "24", children: component.label }),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__value", textAnchor: "end", x: "540", y: "24", children: valueLabel }),
+              linear?.notches.map((notch) => /* @__PURE__ */ jsx2(
+                "rect",
+                {
+                  className: "aui-gauge__notch",
+                  "data-active": notch.active,
+                  fill: notch.active ? color : "var(--surface-secondary)",
+                  height: notch.height,
+                  rx: Math.min(3, notch.width / 2),
+                  width: notch.width,
+                  x: 20 + notch.x,
+                  y: 44 + notch.y
+                },
+                notch.index
+              )),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__bound", x: "20", y: "96", children: formatNumber(minimum, component.format) }),
+              /* @__PURE__ */ jsx2("text", { className: "aui-gauge__bound", textAnchor: "end", x: "540", y: "96", children: formatNumber(maximum, component.format) })
+            ] }) }),
+            /* @__PURE__ */ jsx2(SvgChartTooltip, { state: tooltip })
+          ]
+        }
+      )
+    }
+  );
+}
+function sunburstNodeValue(node) {
+  return node.children?.length ? node.children.reduce((sum, child) => sum + sunburstNodeValue(child), 0) : node.value ?? 0;
+}
+function SunburstChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const [focusedArc, setFocusedArc] = useState2(0);
+  const [focusedTooltip, setFocusedTooltip] = useState2(null);
+  const [hoveredTooltip, setHoveredTooltip] = useState2(null);
+  const tooltip = hoveredTooltip ?? focusedTooltip;
+  const width = 360;
+  const height = 250;
+  const arcs = sunburstGeometry(component.data, {
+    centerX: width / 2,
+    centerY: height / 2,
+    gapAngle: 1.1,
+    innerRadius: 34,
+    maxDepth: 4,
+    outerRadius: 112
+  });
+  const nodeById = /* @__PURE__ */ new Map();
+  const colorById = /* @__PURE__ */ new Map();
+  let colorIndex = 0;
+  const indexNodes = (node, isRoot = false) => {
+    nodeById.set(node.id, node);
+    if (!isRoot) {
+      colorById.set(node.id, resolveChartColor(node.color, colorIndex));
+      colorIndex += 1;
+    }
+    node.children?.forEach((child) => indexNodes(child));
+  };
+  indexNodes(component.data, true);
+  const total = sunburstNodeValue(component.data);
+  const rovingArc = Math.min(focusedArc, Math.max(0, arcs.length - 1));
+  const topLevelItems = (component.data.children ?? []).map((node) => ({
+    color: colorById.get(node.id) ?? resolveChartColor(node.color, 0),
+    id: node.id,
+    label: node.label,
+    value: formatNumber(sunburstNodeValue(node), component.format)
+  }));
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-label": `${component.title} sunburst chart`,
+            className: "aui-chart aui-chart--sunburst",
+            "data-slot": "agent-ui-chart",
+            role: "group",
+            children: [
+              /* @__PURE__ */ jsxs2("svg", { preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${width} ${height}`, children: [
+                arcs.map((arc, index) => {
+                  const color = colorById.get(arc.id) ?? resolveChartColor(void 0, arc.depth);
+                  const pathLabels = arc.path.map((id) => nodeById.get(id)?.label ?? id);
+                  const middleAngle = (arc.startAngle + arc.endAngle) / 2 * (Math.PI / 180);
+                  const middleRadius = (arc.innerRadius + arc.outerRadius) / 2;
+                  const tooltipContent = {
+                    items: [
+                      {
+                        color,
+                        id: "value",
+                        label: "Value",
+                        value: formatNumber(arc.value, component.format)
+                      },
+                      {
+                        color,
+                        id: "share",
+                        label: "Share of total",
+                        value: formatNumber(total > 0 ? arc.value / total : 0, {
+                          maximumFractionDigits: 1,
+                          style: "percent"
+                        })
+                      }
+                    ],
+                    label: pathLabels.join(" / ")
+                  };
+                  const tooltipPoint = {
+                    x: width / 2 + Math.cos(middleAngle) * middleRadius,
+                    y: height / 2 + Math.sin(middleAngle) * middleRadius
+                  };
+                  const selectableDatum = {
+                    depth: arc.depth,
+                    id: arc.id,
+                    label: arc.label,
+                    path: pathLabels.join(" / "),
+                    value: arc.value
+                  };
+                  return /* @__PURE__ */ jsx2(
+                    "g",
+                    {
+                      "aria-label": `${pathLabels.join(", ")}: ${formatNumber(arc.value, component.format)}`,
+                      className: "aui-chart-mark",
+                      "data-slot": "agent-ui-sunburst-segment",
+                      role: onSelect ? "button" : "img",
+                      tabIndex: index === rovingArc ? 0 : -1,
+                      onBlur: () => setFocusedTooltip(null),
+                      onPointerLeave: () => setHoveredTooltip(null),
+                      onClick: onSelect ? () => onSelect(createComponentSelection(component, selectableDatum)) : void 0,
+                      onFocus: (event) => {
+                        setFocusedArc(index);
+                        setFocusedTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+                      },
+                      onKeyDown: (event) => {
+                        const nextIndex = nextRovingMarkIndex(event.key, index, arcs.length);
+                        if (nextIndex !== null) {
+                          event.preventDefault();
+                          setFocusedArc(nextIndex);
+                          focusSvgMark(event, "agent-ui-sunburst-segment", nextIndex);
+                          return;
+                        }
+                        if (!onSelect) return;
+                        if (event.key !== "Enter" && event.key !== " ") return;
+                        event.preventDefault();
+                        onSelect(createComponentSelection(component, selectableDatum));
+                      },
+                      onPointerEnter: (event) => {
+                        setHoveredTooltip(positionSvgChartTooltip(event, tooltipPoint, tooltipContent));
+                      },
+                      children: /* @__PURE__ */ jsx2("path", { className: "aui-sunburst__arc", d: arc.d, fill: color })
+                    },
+                    arc.id
+                  );
+                }),
+                /* @__PURE__ */ jsx2(
+                  "text",
+                  {
+                    className: "aui-sunburst__total",
+                    textAnchor: "middle",
+                    x: width / 2,
+                    y: height / 2 - 2,
+                    children: formatNumber(total, component.format)
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "text",
+                  {
+                    className: "aui-sunburst__root",
+                    textAnchor: "middle",
+                    x: width / 2,
+                    y: height / 2 + 16,
+                    children: component.data.label
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx2(SvgChartTooltip, { state: tooltip })
+            ]
+          }
+        ),
+        topLevelItems.length ? /* @__PURE__ */ jsx2(ChartLegend, { ariaLabel: "Top-level categories", items: topLevelItems }) : null
+      ]
+    }
+  );
+}
+function SankeyNode({ height, index, payload, width, x, y }) {
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        className: "aui-sankey__node",
+        fill: paletteChartColor(index),
+        height,
+        rx: 4,
+        width,
+        x,
+        y
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "text",
+      {
+        className: "aui-sankey__label",
+        dominantBaseline: "middle",
+        x: x + width + 7,
+        y: y + height / 2,
+        children: payload.name
+      }
+    )
+  ] });
+}
+function SankeyLink({
+  chartId,
+  index,
+  linkWidth,
+  payload,
+  sourceControlX,
+  sourceX,
+  sourceY,
+  targetControlX,
+  targetX,
+  targetY
+}) {
+  const half = Math.max(1, linkWidth) / 2;
+  const path = `M${sourceX},${sourceY - half} C${sourceControlX},${sourceY - half} ${targetControlX},${targetY - half} ${targetX},${targetY - half} L${targetX},${targetY + half} C${targetControlX},${targetY + half} ${sourceControlX},${sourceY + half} ${sourceX},${sourceY + half} Z`;
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsxs2("defs", { children: [
+      /* @__PURE__ */ jsxs2("linearGradient", { id: `${chartId}-link-${index}`, x1: "0", x2: "1", children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "var(--chart-3, var(--accent))", stopOpacity: 0.2 }),
+        /* @__PURE__ */ jsx2(
+          "stop",
+          {
+            offset: "50%",
+            stopColor: "var(--chart-4, oklch(from var(--accent) calc(l + 0.12) c h))",
+            stopOpacity: 0.55
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "stop",
+          {
+            offset: "100%",
+            stopColor: "var(--chart-1, oklch(from var(--accent) calc(l - 0.24) c h))",
+            stopOpacity: 0.25
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("filter", { height: "180%", id: `${chartId}-glow-${index}`, width: "180%", x: "-40%", y: "-40%", children: /* @__PURE__ */ jsx2("feGaussianBlur", { stdDeviation: "2.5" }) })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        fill: `url(#${chartId}-link-${index})`,
+        filter: `url(#${chartId}-glow-${index})`,
+        opacity: 0.35
+      }
+    ),
+    /* @__PURE__ */ jsx2("path", { d: path, fill: `url(#${chartId}-link-${index})`, opacity: 0.8 }),
+    /* @__PURE__ */ jsx2("title", { children: `${payload.source.name} \u2192 ${payload.target.name}: ${payload.value}` })
+  ] });
+}
+function SankeyChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  viewAction
+}) {
+  const chartId = useId().replaceAll(":", "");
+  const nodeIndex = new Map(component.nodes.map((node, index) => [node.id, index]));
+  const data = {
+    links: component.links.flatMap((link) => {
+      const source = nodeIndex.get(link.source);
+      const target = nodeIndex.get(link.target);
+      return source === void 0 || target === void 0 ? [] : [{ source, target, value: link.value }];
+    }),
+    nodes: component.nodes.map((node) => ({ name: node.label }))
+  };
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length || viewAction ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          viewAction,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} sankey chart`,
+            className: "aui-chart aui-chart--sankey aui-sankey",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 260, width: "100%", children: /* @__PURE__ */ jsx2(
+              Sankey,
+              {
+                data,
+                link: (props) => /* @__PURE__ */ jsx2(SankeyLink, { ...props, chartId }),
+                linkCurvature: 0.55,
+                margin: { bottom: 12, left: 8, right: 92, top: 12 },
+                node: (props) => /* @__PURE__ */ jsx2(SankeyNode, { ...props }),
+                nodePadding: 18,
+                nodeWidth: 12,
+                onClick: (item, type) => onSelect?.(
+                  createComponentSelection(component, {
+                    element: type,
+                    index: item.index,
+                    value: "payload" in item ? item.payload.value : void 0
+                  })
+                ),
+                children: /* @__PURE__ */ jsx2(
+                  Tooltip,
+                  {
+                    content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: [{ dataKey: "value", format: component.format }] }),
+                    isAnimationActive: false
+                  }
+                )
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": "Chart encoding",
+            className: "aui-legend",
+            "data-slot": "agent-ui-chart-legend",
+            role: "list",
+            children: /* @__PURE__ */ jsxs2("span", { className: "aui-legend__item", "data-slot": "agent-ui-chart-legend-item", role: "listitem", children: [
+              /* @__PURE__ */ jsx2("span", { className: "aui-legend__flow" }),
+              /* @__PURE__ */ jsx2("span", { className: "aui-legend__label", children: "Flow volume" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AreaChartComponentContent,
+  BarChartComponentContent,
+  CandlestickChartComponentContent,
+  ComposedChartComponentContent,
+  DonutChartComponentContent,
+  FunnelChartComponentContent,
+  GaugeChartComponentContent,
+  HeatmapComponentContent,
+  LineChartComponentContent,
+  PieChartComponentContent,
+  RadarChartComponentContent,
+  RadialChartComponentContent,
+  SankeyChartComponentContent,
+  ScatterChartComponentContent,
+  SunburstChartComponentContent
+};