@heroui/agent 0.2.0-beta.1

package/dist/chunk-3FG5NRTX.js

@@ -0,0 +1,9 @@
+// ../agent-ui/src/utils/classnames.ts
+function mergeClassNames(...values) {
+  const className = values.filter(Boolean).join(" ");
+  return className || void 0;
+}
+
+export {
+  mergeClassNames
+};

package/dist/chunk-CU6MPKAJ.js

@@ -0,0 +1,359 @@
+import {
+  mergeClassNames
+} from "./chunk-3FG5NRTX.js";
+
+// ../agent-ui/src/components/component-renderer/component-skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function skeletonCategory(kind) {
+  if (kind === "dashboard" || kind === "product-signals" || kind === "card" || kind === "col" || kind === "grid" || kind === "item-card" || kind === "item-card-group" || kind === "row")
+    return "dashboard";
+  if (kind === "metric-grid" || kind === "kpi-grid") return "metrics";
+  if (kind === "map") return "map";
+  if (kind === "data-table") return "table";
+  if (kind === "record-card" || kind === "channel-message" || kind === "create-event" || kind === "enable-notification" || kind === "event-session" || kind === "flight-tracker" || kind === "player-card" || kind === "playlist" || kind === "purchase-complete" || kind === "purchase-items" || kind === "ride-status" || kind === "view-event" || kind === "weather-current" || kind === "weather-forecast")
+    return "record";
+  return "chart";
+}
+function ComponentSkeleton({ className, kind, title }) {
+  const category = skeletonCategory(kind);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-busy": "true",
+      "aria-label": title ? `Loading ${title}` : "Loading data view",
+      className: mergeClassNames("aui-skeleton", className),
+      "data-component-kind": kind,
+      "data-skeleton-category": category,
+      "data-slot": "agent-ui-skeleton",
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "aui-skeleton__header", "data-slot": "agent-ui-skeleton-header" }),
+        /* @__PURE__ */ jsx("div", { className: "aui-skeleton__content", "data-slot": "agent-ui-skeleton-content", children: category === "metrics" || category === "dashboard" ? Array.from({ length: category === "dashboard" ? 2 : 4 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "aui-skeleton__panel" }, index)) : category === "table" || category === "record" ? Array.from({ length: category === "table" ? 5 : 4 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "aui-skeleton__row" }, index)) : /* @__PURE__ */ jsx("span", { className: "aui-skeleton__chart" }) }),
+        /* @__PURE__ */ jsx("span", { className: "aui-sr-only", "data-slot": "agent-ui-skeleton-label", children: "Loading data view\u2026" })
+      ]
+    }
+  );
+}
+
+// ../agent-ui/src/components/display-information/scroll-shadow/scroll-shadow.tsx
+import { useCallback, useEffect, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ScrollShadow({
+  children,
+  className,
+  offset = 0,
+  size = 32,
+  style,
+  ...props
+}) {
+  const ref = useRef(null);
+  const previousVisibility = useRef(null);
+  const frame = useRef(null);
+  const updateVisibility = useCallback(() => {
+    const element = ref.current;
+    if (!element) return;
+    const hasScrollBefore = element.scrollLeft > offset;
+    const hasScrollAfter = element.scrollLeft + element.clientWidth + offset < element.scrollWidth;
+    const visibility = hasScrollBefore && hasScrollAfter ? "both" : hasScrollBefore ? "left" : hasScrollAfter ? "right" : "none";
+    if (previousVisibility.current === visibility) return;
+    previousVisibility.current = visibility;
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null;
+      delete element.dataset["leftScroll"];
+      delete element.dataset["rightScroll"];
+      delete element.dataset["leftRightScroll"];
+      if (visibility === "both") element.dataset["leftRightScroll"] = "true";
+      else if (visibility !== "none") element.dataset[`${visibility}Scroll`] = "true";
+    });
+  }, [offset]);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    updateVisibility();
+    element.addEventListener("scroll", updateVisibility, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateVisibility);
+    observer?.observe(element);
+    return () => {
+      element.removeEventListener("scroll", updateVisibility);
+      observer?.disconnect();
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+      frame.current = null;
+      previousVisibility.current = null;
+    };
+  }, [updateVisibility]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: mergeClassNames("aui-scroll-shadow", className),
+      "data-slot": "agent-ui-scroll-shadow",
+      style: { "--scroll-shadow-size": `${size}px`, ...style },
+      ...props,
+      children
+    }
+  );
+}
+
+// ../agent-ui/src/utils/inline-markdown.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var INLINE_TOKEN = /(\*\*[^*\n]+\*\*|\*[^*\s][^*\n]*\*|_[^_\s][^_\n]*_|`[^`\n]+`|\[[^\]\n]+\]\([^\s)\n]+\))/g;
+var LINK_TOKEN = /^\[([^\]]+)\]\(([^\s)]+)\)$/;
+var BARE_DOMAIN = /^(?:[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?\.)+[a-z]{2,63}(?::\d{1,5})?(?:[/?#][^\s]*)?$/i;
+function resolveLinkHref(target) {
+  const href = /^https?:\/\//i.test(target) ? target : BARE_DOMAIN.test(target) ? `https://${target}` : void 0;
+  if (!href) return void 0;
+  try {
+    const url = new URL(href);
+    return url.protocol === "http:" || url.protocol === "https:" ? href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function renderInlineMarkdown(text) {
+  const parts = text.split(INLINE_TOKEN);
+  if (parts.length === 1) return text;
+  const occurrences = /* @__PURE__ */ new Map();
+  return parts.map((part) => {
+    const occurrence = (occurrences.get(part) ?? 0) + 1;
+    const key = `${part}:${occurrence}`;
+    occurrences.set(part, occurrence);
+    if (part.startsWith("**") && part.endsWith("**") && part.length > 4)
+      return /* @__PURE__ */ jsx3("strong", { children: part.slice(2, -2) }, key);
+    if (part.startsWith("*") && part.endsWith("*") && part.length > 2)
+      return /* @__PURE__ */ jsx3("em", { children: part.slice(1, -1) }, key);
+    if (part.startsWith("_") && part.endsWith("_") && part.length > 2)
+      return /* @__PURE__ */ jsx3("em", { children: part.slice(1, -1) }, key);
+    if (part.startsWith("`") && part.endsWith("`") && part.length > 2)
+      return /* @__PURE__ */ jsx3("code", { children: part.slice(1, -1) }, key);
+    const link = LINK_TOKEN.exec(part);
+    const target = link?.[2];
+    const href = target ? resolveLinkHref(target) : void 0;
+    if (link && href)
+      return /* @__PURE__ */ jsx3("a", { href, rel: "noopener noreferrer", target: "_blank", children: link[1] }, key);
+    return part;
+  });
+}
+
+// ../agent-ui/src/components/actions/action-button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ActionButton({
+  className,
+  size = "sm",
+  variant = "secondary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: mergeClassNames("aui-button", className),
+      "data-size": size,
+      "data-slot": "agent-ui-action-button",
+      "data-variant": variant,
+      type: "button",
+      ...props
+    }
+  );
+}
+
+// ../agent-ui/src/components/display-information/code-block.tsx
+import { Button } from "@heroui/react";
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var COPY_RESET_DELAY = 2e3;
+var DEFAULT_DARK_THEME = "github-dark";
+var DEFAULT_LIGHT_THEME = "github-light";
+var languageLoaders = {
+  bash: () => import("shiki/langs/bash.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  shellscript: () => import("shiki/langs/shellscript.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs")
+};
+var highlighters = /* @__PURE__ */ new Map();
+function normalizeLanguage(language) {
+  const aliases = {
+    js: "javascript",
+    md: "markdown",
+    py: "python",
+    sh: "shellscript",
+    shell: "shellscript",
+    ts: "typescript"
+  };
+  const normalized = language.toLowerCase();
+  if (normalized in languageLoaders) return normalized;
+  return aliases[normalized] ?? null;
+}
+async function createLanguageHighlighter(language) {
+  const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, lightTheme, darkTheme, grammar] = await Promise.all([
+    import("shiki/core"),
+    import("shiki/engine/javascript"),
+    import("shiki/themes/github-light.mjs"),
+    import("shiki/themes/github-dark.mjs"),
+    languageLoaders[language]()
+  ]);
+  return createHighlighterCore({
+    engine: createJavaScriptRegexEngine(),
+    langs: [grammar.default],
+    themes: [lightTheme.default, darkTheme.default]
+  });
+}
+async function highlightCode(code, language) {
+  const normalized = normalizeLanguage(language);
+  if (!normalized) return null;
+  const existing = highlighters.get(normalized);
+  const highlighterPromise = existing ?? createLanguageHighlighter(normalized);
+  if (!existing) highlighters.set(normalized, highlighterPromise);
+  const highlighter = await highlighterPromise;
+  return highlighter.codeToHtml(code, {
+    defaultColor: false,
+    lang: normalized,
+    themes: { dark: DEFAULT_DARK_THEME, light: DEFAULT_LIGHT_THEME }
+  });
+}
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.append(textarea);
+    textarea.select();
+    try {
+      return document.execCommand?.("copy") ?? false;
+    } catch {
+      return false;
+    } finally {
+      textarea.remove();
+    }
+  }
+}
+function CodeGlyph() {
+  return /* @__PURE__ */ jsx5("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx5(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M10.218 3.216a.75.75 0 0 0-1.436-.431l-3 10a.75.75 0 0 0 1.436.43zM4.53 4.97a.75.75 0 0 1 0 1.06L2.56 8l1.97 1.97a.75.75 0 0 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0m6.94 6.06a.75.75 0 0 1 0-1.06L13.44 8l-1.97-1.97a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}
+function CopyGlyph() {
+  return /* @__PURE__ */ jsx5("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx5(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M12 2.5H8A1.5 1.5 0 0 0 6.5 4v1H8a3 3 0 0 1 3 3v1.5h1A1.5 1.5 0 0 0 13.5 8V4A1.5 1.5 0 0 0 12 2.5M11 11h1a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H4a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3zM4 6.5h4A1.5 1.5 0 0 1 9.5 8v4A1.5 1.5 0 0 1 8 13.5H4A1.5 1.5 0 0 1 2.5 12V8A1.5 1.5 0 0 1 4 6.5",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx5("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx5(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}
+function CodeBlock({ code, language = "text" }) {
+  const highlightKey = `${language}:${code}`;
+  const [highlighted, setHighlighted] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const resetTimeout = useRef2(null);
+  useEffect2(() => {
+    let cancelled = false;
+    async function highlight() {
+      try {
+        const html = await highlightCode(code, language);
+        if (!cancelled) setHighlighted(html ? { html, key: highlightKey } : null);
+      } catch {
+        if (!cancelled) setHighlighted(null);
+      }
+    }
+    void highlight();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, highlightKey, language]);
+  useEffect2(
+    () => () => {
+      if (resetTimeout.current !== null) window.clearTimeout(resetTimeout.current);
+    },
+    []
+  );
+  const copy = async () => {
+    if (await copyText(code)) {
+      setCopied(true);
+      if (resetTimeout.current !== null) window.clearTimeout(resetTimeout.current);
+      resetTimeout.current = window.setTimeout(() => {
+        setCopied(false);
+        resetTimeout.current = null;
+      }, COPY_RESET_DELAY);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "aui-code", "data-slot": "agent-ui-code-block", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "aui-code__header", "data-slot": "agent-ui-code-header", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "aui-code__language", children: [
+        /* @__PURE__ */ jsx5(CodeGlyph, {}),
+        /* @__PURE__ */ jsx5("span", { children: language.toUpperCase() })
+      ] }),
+      /* @__PURE__ */ jsx5(
+        Button,
+        {
+          isIconOnly: true,
+          "aria-label": copied ? "Code copied" : "Copy code",
+          className: "aui-code__copy",
+          "data-slot": "agent-ui-code-copy",
+          size: "sm",
+          variant: "ghost",
+          onPress: copy,
+          children: /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              className: "aui-code__copy-swap",
+              "data-copied": copied || void 0,
+              "data-slot": "agent-ui-code-copy-icon",
+              children: [
+                /* @__PURE__ */ jsx5("span", { className: "aui-code__copy-icon aui-code__copy-icon--copy", children: /* @__PURE__ */ jsx5(CopyGlyph, {}) }),
+                /* @__PURE__ */ jsx5("span", { className: "aui-code__copy-icon aui-code__copy-icon--check", children: /* @__PURE__ */ jsx5(CheckGlyph, {}) })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    highlighted?.key === highlightKey ? /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "aui-code__content",
+        dangerouslySetInnerHTML: { __html: highlighted.html },
+        "data-slot": "agent-ui-code"
+      }
+    ) : /* @__PURE__ */ jsx5("div", { className: "aui-code__content", "data-slot": "agent-ui-code", children: /* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("code", { children: code }) }) })
+  ] });
+}
+
+export {
+  ActionButton,
+  ComponentSkeleton,
+  ScrollShadow,
+  renderInlineMarkdown,
+  CodeBlock
+};

package/dist/chunk-DW4AQRM5.js

@@ -0,0 +1,297 @@
+import {
+  resolveOverlayPortalContainer
+} from "./chunk-TOOT6SZ2.js";
+
+// ../agent-ui/src/types.ts
+function componentActionFromSpec(componentId, action) {
+  if (action.toolCall) {
+    return {
+      actionId: action.id,
+      args: action.toolCall.arguments,
+      componentId,
+      label: action.label,
+      prompt: action.prompt,
+      toolName: action.toolCall.name,
+      type: "tool"
+    };
+  }
+  if (action.prompt) {
+    return { componentId, label: action.label, prompt: action.prompt, type: "followup" };
+  }
+  return null;
+}
+function createComponentSelection(component, datum) {
+  return { componentId: component.id, componentTitle: component.title, datum };
+}
+
+// ../agent-ui/src/utils/formatters.ts
+var numberFormatters = /* @__PURE__ */ new Map();
+function supportedLocale(locale) {
+  try {
+    return Intl.NumberFormat.supportedLocalesOf([locale])[0] ?? "en";
+  } catch {
+    return "en";
+  }
+}
+function formatNumber(value, format, locale = "en") {
+  const resolvedLocale = supportedLocale(locale);
+  if (!format) return value.toLocaleString(resolvedLocale);
+  const options = {
+    ...format.style === "currency" ? { currency: format.currency, style: "currency" } : {},
+    ...format.style === "percent" ? { style: "percent" } : {},
+    ...format.style === "percent" && format.maximumFractionDigits !== void 0 ? { maximumFractionDigits: format.maximumFractionDigits } : {},
+    ...format.style !== "percent" && format.compact ? { notation: "compact" } : {}
+  };
+  const cacheKey = `${resolvedLocale}:${JSON.stringify(options)}`;
+  let formatter = numberFormatters.get(cacheKey);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(resolvedLocale, options);
+    numberFormatters.set(cacheKey, formatter);
+  }
+  return formatter.format(value);
+}
+function formatAxisValue(value, locale = "en") {
+  const resolvedLocale = supportedLocale(locale);
+  const absolute = Math.abs(value);
+  if (absolute >= 1e6)
+    return `${(value / 1e6).toLocaleString(resolvedLocale, { maximumFractionDigits: 1 })}M`;
+  if (absolute >= 1e3)
+    return `${(value / 1e3).toLocaleString(resolvedLocale, { maximumFractionDigits: 1 })}K`;
+  return value.toLocaleString(resolvedLocale, { maximumFractionDigits: 1 });
+}
+function formatDelta(value, options = {}, locale = "en") {
+  const formatter = new Intl.NumberFormat(supportedLocale(locale), {
+    maximumFractionDigits: options.maximumFractionDigits ?? 2,
+    signDisplay: "always",
+    style: options.style === "percent" ? "percent" : "decimal"
+  });
+  return formatter.format(value);
+}
+function formatCell(value, format, locale = "en") {
+  return typeof value === "number" ? formatNumber(value, format, locale) : String(value ?? "");
+}
+
+// ../agent-ui/src/components/component-actions/export-actions.tsx
+import { Ellipsis } from "@gravity-ui/icons";
+import { Button, Dropdown, Label } from "@heroui/react";
+import { useCallback, useRef, useState } from "react";
+
+// ../agent-ui/src/components/component-actions/export-utils.ts
+function filename(title, extension) {
+  const stem = title.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 80);
+  return `${stem || "agent-ui"}.${extension}`;
+}
+function download(data, type, name) {
+  if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") return;
+  const url = URL.createObjectURL(new Blob([data], { type }));
+  const anchor = document.createElement("a");
+  anchor.download = name;
+  anchor.href = url;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+function csvCell(value) {
+  const text = String(value ?? "");
+  return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+}
+function componentToCsv(component) {
+  let rows;
+  let keys;
+  if (component.kind === "data-table") {
+    rows = component.rows;
+    keys = component.columns.map((column) => column.key);
+  } else if (component.kind === "line-chart" || component.kind === "area-chart" || component.kind === "bar-chart" || component.kind === "composed-chart" || component.kind === "pie-chart" || component.kind === "donut-chart" || component.kind === "radar-chart" || component.kind === "radial-chart" || component.kind === "scatter-chart" || component.kind === "heatmap") {
+    rows = component.data;
+    keys = [...new Set(rows.flatMap((row) => Object.keys(row)))];
+  }
+  if (!rows || !keys?.length) return null;
+  return [
+    keys.map(csvCell).join(","),
+    ...rows.map((row) => keys.map((key) => csvCell(row[key])).join(","))
+  ].join("\n");
+}
+var SVG_STYLE_TOKENS = [
+  "--accent",
+  "--border",
+  "--chart-1",
+  "--chart-2",
+  "--chart-3",
+  "--chart-4",
+  "--chart-5",
+  "--foreground",
+  "--muted",
+  "--surface"
+];
+function svgMarkup(button) {
+  const card = button.closest('[data-slot="agent-ui-card"]');
+  const svg = card?.querySelector("svg");
+  if (!(card instanceof HTMLElement) || !(svg instanceof SVGElement)) return null;
+  const clone = svg.cloneNode(true);
+  const styles = getComputedStyle(card);
+  const variables = SVG_STYLE_TOKENS.map((token) => `${token}:${styles.getPropertyValue(token)}`).filter((entry) => !entry.endsWith(":")).join(";");
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  clone.setAttribute("style", [clone.getAttribute("style"), variables].filter(Boolean).join(";"));
+  return new XMLSerializer().serializeToString(clone);
+}
+async function exportPng(button, title) {
+  const markup = svgMarkup(button);
+  if (!markup || typeof Image === "undefined" || typeof URL.createObjectURL !== "function") return;
+  const source = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }));
+  const image = new Image();
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error("Unable to render component image"));
+    image.src = source;
+  });
+  const canvas = document.createElement("canvas");
+  const scale = Math.max(1, window.devicePixelRatio || 1);
+  canvas.width = Math.max(1, image.width) * scale;
+  canvas.height = Math.max(1, image.height) * scale;
+  const context = canvas.getContext("2d");
+  context?.scale(scale, scale);
+  context?.drawImage(image, 0, 0);
+  URL.revokeObjectURL(source);
+  const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (blob) download(blob, "image/png", filename(title, "png"));
+}
+function exportComponent(button, component, format) {
+  if (format === "csv") {
+    const csv = componentToCsv(component);
+    if (csv) download(csv, "text/csv;charset=utf-8", filename(component.title, "csv"));
+  } else if (format === "svg") {
+    const markup = svgMarkup(button);
+    if (markup) download(markup, "image/svg+xml;charset=utf-8", filename(component.title, "svg"));
+  } else {
+    void exportPng(button, component.title);
+  }
+}
+
+// ../agent-ui/src/components/component-actions/export-actions.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FORMAT_LABELS = {
+  csv: "Export as CSV",
+  png: "Export as PNG",
+  svg: "Export as SVG"
+};
+function ComponentExportActions({
+  component,
+  formats = [],
+  onAction
+}) {
+  const triggerRef = useRef(null);
+  const [portalContainer, setPortalContainer] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const pointerOpenAt = useRef(0);
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen && Date.now() - pointerOpenAt.current < 350) return;
+    setIsOpen(nextOpen);
+  };
+  const captureTrigger = useCallback((node) => {
+    triggerRef.current = node;
+    setPortalContainer(resolveOverlayPortalContainer(node));
+  }, []);
+  const supported = formats.filter((format) => format !== "csv" || componentToCsv(component));
+  if (supported.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "aui-export-actions", "data-slot": "agent-ui-export-actions", children: /* @__PURE__ */ jsxs(Dropdown, { isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: captureTrigger,
+        isIconOnly: true,
+        "aria-label": `Export options for ${component.title}`,
+        size: "sm",
+        variant: "ghost",
+        onPointerDown: () => {
+          pointerOpenAt.current = Date.now();
+        },
+        children: /* @__PURE__ */ jsx(Ellipsis, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Dropdown.Popover, { placement: "bottom end", UNSTABLE_portalContainer: portalContainer, children: /* @__PURE__ */ jsx(
+      Dropdown.Menu,
+      {
+        onAction: (key) => {
+          const format = key;
+          if (triggerRef.current) exportComponent(triggerRef.current, component, format);
+          onAction?.({ componentId: component.id, format, type: "export" });
+          setIsOpen(false);
+        },
+        children: supported.map((format) => /* @__PURE__ */ jsx(Dropdown.Item, { id: format, textValue: FORMAT_LABELS[format], children: /* @__PURE__ */ jsx(Label, { children: FORMAT_LABELS[format] }) }, format))
+      }
+    ) })
+  ] }) });
+}
+
+// ../agent-ui/src/components/data-visualization/trend-change/trend-change.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TrendArrow({ direction }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "aui-change__indicator",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      children: direction === "up" ? /* @__PURE__ */ jsx2("path", { d: "M12 19V5m-5 5 5-5 5 5" }) : /* @__PURE__ */ jsx2("path", { d: "M12 5v14m5-5-5 5-5-5" })
+    }
+  );
+}
+function TrendChange({ slot, value }) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: "aui-change",
+      "data-slot": slot,
+      "data-trend": value > 0 ? "up" : value < 0 ? "down" : "neutral",
+      children: [
+        value === 0 ? null : /* @__PURE__ */ jsx2(TrendArrow, { direction: value > 0 ? "up" : "down" }),
+        formatDelta(value),
+        "%"
+      ]
+    }
+  );
+}
+
+// ../agent-ui/src/components/data-visualization/charts/chart-colors.ts
+var COLORS = [
+  "var(--chart-3, var(--accent))",
+  "var(--chart-1, oklch(from var(--accent) calc(l - 0.24) c h))",
+  "var(--chart-4, oklch(from var(--accent) calc(l + 0.12) c h))",
+  "var(--chart-2, oklch(from var(--accent) calc(l - 0.12) c h))",
+  "var(--chart-5, oklch(from var(--accent) calc(l + 0.24) c h))"
+];
+var CHART_COLOR_TOKENS = {
+  accent: "var(--accent)",
+  "chart-1": "var(--chart-1, oklch(from var(--accent) calc(l - 0.24) c h))",
+  "chart-2": "var(--chart-2, oklch(from var(--accent) calc(l - 0.12) c h))",
+  "chart-3": "var(--chart-3, var(--accent))",
+  "chart-4": "var(--chart-4, oklch(from var(--accent) calc(l + 0.12) c h))",
+  "chart-5": "var(--chart-5, oklch(from var(--accent) calc(l + 0.24) c h))",
+  danger: "var(--danger)",
+  default: "var(--default-foreground, var(--foreground))",
+  success: "var(--success)",
+  warning: "var(--warning)"
+};
+function resolveChartColor(color, index) {
+  return color ? CHART_COLOR_TOKENS[color] : COLORS[index % COLORS.length];
+}
+function paletteChartColor(index) {
+  return COLORS[index % COLORS.length];
+}
+
+export {
+  componentActionFromSpec,
+  createComponentSelection,
+  formatNumber,
+  formatAxisValue,
+  formatCell,
+  ComponentExportActions,
+  TrendChange,
+  CHART_COLOR_TOKENS,
+  resolveChartColor,
+  paletteChartColor
+};