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

package/dist/chunk-AEUPMIPT.js

@@ -0,0 +1,577 @@
+import {
+  resolveOverlayPortalContainer
+} from "./chunk-TOOT6SZ2.js";
+
+// ../agent-ui/src/utils/chart-values.ts
+function resolveGaugeBounds(component) {
+  return {
+    maximum: component.max ?? (component.format?.style === "percent" ? 1 : 100),
+    minimum: component.min ?? 0
+  };
+}
+
+// ../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 { ChartColumn, Ellipsis, FileCode, FileText, LayoutCells, Picture } from "@gravity-ui/icons";
+import { Button, Dropdown, Label } from "@heroui/react";
+import { useCallback, useRef, useState } from "react";
+
+// ../agent-ui/src/components/data-visualization/charts/chart-table.ts
+function humanizeKey(key) {
+  const label = key.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+  return label ? `${label[0]?.toUpperCase()}${label.slice(1)}` : key;
+}
+function flattenSunburstRows(root) {
+  const rows = [];
+  const visit = (node, ancestors, depth) => {
+    const path = [...ancestors, node.label];
+    const childrenValue = node.children?.reduce(
+      (total, child) => total + visit(child, path, depth + 1),
+      0
+    );
+    const value = node.children?.length ? childrenValue ?? 0 : node.value ?? 0;
+    if (depth > 0) {
+      rows.push({ depth, id: node.id, label: node.label, path: path.join(" / "), value });
+    }
+    return value;
+  };
+  visit(root, [], 0);
+  return rows;
+}
+function chartToDataTable(component) {
+  const columns = [];
+  const seen = /* @__PURE__ */ new Set();
+  const addColumn = (column) => {
+    if (seen.has(column.key)) return;
+    seen.add(column.key);
+    columns.push(column);
+  };
+  const addKey = (key, format) => addColumn({ format, key, label: humanizeKey(key) });
+  switch (component.kind) {
+    case "line-chart":
+    case "area-chart":
+    case "bar-chart":
+    case "composed-chart":
+      addKey(component.xKey);
+      component.series.forEach(
+        (series) => addColumn({ format: series.format, key: series.dataKey, label: series.label })
+      );
+      break;
+    case "candlestick-chart":
+      addKey(component.xKey);
+      addKey(component.openKey, component.format);
+      addKey(component.highKey, component.format);
+      addKey(component.lowKey, component.format);
+      addKey(component.closeKey, component.format);
+      break;
+    case "funnel-chart":
+      addKey(component.labelKey);
+      addKey(component.valueKey, component.format);
+      break;
+    case "gauge-chart":
+      addKey("label");
+      addKey("value", component.format);
+      addKey("min", component.format);
+      addKey("max", component.format);
+      break;
+    case "pie-chart":
+    case "donut-chart":
+    case "radial-chart":
+      addKey(component.labelKey);
+      addKey(component.valueKey, component.format);
+      break;
+    case "radar-chart":
+      addKey(component.angleKey);
+      component.series.forEach(
+        (series) => addColumn({ format: series.format, key: series.dataKey, label: series.label })
+      );
+      break;
+    case "scatter-chart":
+      if (component.labelKey) addKey(component.labelKey);
+      if (component.groupKey) addKey(component.groupKey);
+      addKey(component.xKey, component.format);
+      addKey(component.yKey, component.format);
+      if (component.sizeKey) addKey(component.sizeKey, component.format);
+      break;
+    case "heatmap":
+      addKey(component.xKey);
+      addKey(component.yKey);
+      addKey(component.valueKey, component.format);
+      break;
+    case "sankey-chart":
+      addKey("source");
+      addKey("target");
+      addKey("value", component.format);
+      break;
+    case "sunburst-chart":
+      addKey("id");
+      addKey("label");
+      addKey("path");
+      addKey("depth");
+      addKey("value", component.format);
+      break;
+  }
+  let rows;
+  if (component.kind === "sankey-chart") {
+    const labels = new Map(component.nodes.map((node) => [node.id, node.label]));
+    rows = component.links.map((link) => ({
+      source: labels.get(link.source) ?? link.source,
+      target: labels.get(link.target) ?? link.target,
+      value: link.value
+    }));
+  } else if (component.kind === "gauge-chart") {
+    const { maximum, minimum } = resolveGaugeBounds(component);
+    rows = [
+      {
+        label: component.label,
+        max: maximum,
+        min: minimum,
+        value: component.value
+      }
+    ];
+  } else if (component.kind === "sunburst-chart") {
+    rows = flattenSunburstRows(component.data);
+  } else {
+    rows = component.data;
+  }
+  return {
+    columns,
+    description: component.description,
+    id: component.id,
+    kind: "data-table",
+    rows,
+    title: component.title,
+    variant: "secondary"
+  };
+}
+
+// ../agent-ui/src/components/component-actions/export-utils.ts
+var TABULAR_CHART_KINDS = /* @__PURE__ */ new Set([
+  "area-chart",
+  "bar-chart",
+  "candlestick-chart",
+  "composed-chart",
+  "donut-chart",
+  "funnel-chart",
+  "gauge-chart",
+  "heatmap",
+  "line-chart",
+  "pie-chart",
+  "radar-chart",
+  "radial-chart",
+  "sankey-chart",
+  "scatter-chart",
+  "sunburst-chart"
+]);
+function isTabularChart(component) {
+  return TABULAR_CHART_KINDS.has(component.kind);
+}
+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 (isTabularChart(component)) {
+    const table = chartToDataTable(component);
+    rows = table.rows;
+    keys = table.columns.map((column) => column.key);
+  }
+  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",
+  "--danger",
+  "--default-foreground",
+  "--focus",
+  "--foreground",
+  "--muted",
+  "--success",
+  "--surface",
+  "--surface-secondary",
+  "--warning"
+];
+var SVG_PRESENTATION_PROPERTIES = [
+  "color",
+  "display",
+  "dominant-baseline",
+  "fill",
+  "fill-opacity",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "letter-spacing",
+  "opacity",
+  "paint-order",
+  "shape-rendering",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "stroke-width",
+  "text-anchor",
+  "vector-effect",
+  "visibility"
+];
+function absoluteSvgLength(value) {
+  if (!value || value.trim().endsWith("%")) return 0;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+}
+function viewBoxDimensions(svg) {
+  const values = svg.getAttribute("viewBox")?.trim().split(/[ ,]+/).map(Number);
+  return {
+    height: values?.length === 4 && Number.isFinite(values[3]) ? Math.max(0, values[3]) : 0,
+    width: values?.length === 4 && Number.isFinite(values[2]) ? Math.max(0, values[2]) : 0
+  };
+}
+function inlineSvgPresentationStyles(source, clone) {
+  const sourceElements = [source, ...Array.from(source.querySelectorAll("*"))];
+  const cloneElements = [clone, ...Array.from(clone.querySelectorAll("*"))];
+  sourceElements.forEach((element, index) => {
+    const target = cloneElements[index];
+    if (!target) return;
+    const computed = getComputedStyle(element);
+    const declarations = SVG_PRESENTATION_PROPERTIES.flatMap((property) => {
+      const value = computed.getPropertyValue(property).trim();
+      return value ? [`${property}:${value}`] : [];
+    });
+    if (declarations.length === 0) return;
+    target.setAttribute(
+      "style",
+      [target.getAttribute("style"), ...declarations].filter(Boolean).join(";")
+    );
+  });
+}
+function serializeChartSvg(button) {
+  const card = button.closest('[data-slot="agent-ui-card"]');
+  const svg = card?.querySelector('[data-slot="agent-ui-chart"] svg');
+  if (!(card instanceof HTMLElement) || !(svg instanceof SVGElement)) return null;
+  const clone = svg.cloneNode(true);
+  const chartName = svg.closest('[data-slot="agent-ui-chart"]')?.getAttribute("aria-label")?.trim();
+  const bounds = svg.getBoundingClientRect();
+  const viewBox = viewBoxDimensions(svg);
+  const width = Math.max(
+    1,
+    Math.round(bounds.width || absoluteSvgLength(svg.getAttribute("width")) || viewBox.width)
+  );
+  const height = Math.max(
+    1,
+    Math.round(bounds.height || absoluteSvgLength(svg.getAttribute("height")) || viewBox.height)
+  );
+  const styles = getComputedStyle(card);
+  const variables = SVG_STYLE_TOKENS.flatMap((token) => {
+    const value = styles.getPropertyValue(token).trim();
+    return value ? [`${token}:${value}`] : [];
+  }).join(";");
+  inlineSvgPresentationStyles(svg, clone);
+  clone.removeAttribute("aria-hidden");
+  clone.setAttribute("role", "img");
+  if (chartName) {
+    const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    title.textContent = chartName;
+    clone.prepend(title);
+    clone.setAttribute("aria-label", chartName);
+  }
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  clone.setAttribute("height", String(height));
+  clone.setAttribute("width", String(width));
+  if (!clone.hasAttribute("viewBox")) clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  clone.setAttribute("style", [clone.getAttribute("style"), variables].filter(Boolean).join(";"));
+  return { height, markup: new XMLSerializer().serializeToString(clone), width };
+}
+async function exportPng(button, title) {
+  const serialized = serializeChartSvg(button);
+  if (!serialized || typeof Image === "undefined" || typeof URL.createObjectURL !== "function")
+    return;
+  const source = URL.createObjectURL(
+    new Blob([serialized.markup], { type: "image/svg+xml;charset=utf-8" })
+  );
+  const image = new Image();
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => {
+      URL.revokeObjectURL(source);
+      reject(new Error("Unable to render component image"));
+    };
+    image.src = source;
+  });
+  URL.revokeObjectURL(source);
+  const canvas = document.createElement("canvas");
+  const scale = Math.max(1, window.devicePixelRatio || 1);
+  canvas.width = serialized.width * scale;
+  canvas.height = serialized.height * scale;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  context.scale(scale, scale);
+  context.drawImage(image, 0, 0, serialized.width, serialized.height);
+  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 serialized = serializeChartSvg(button);
+    if (serialized)
+      download(serialized.markup, "image/svg+xml;charset=utf-8", filename(component.title, "svg"));
+  } else {
+    void exportPng(button, component.title).catch(() => void 0);
+  }
+}
+
+// ../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"
+};
+var FORMAT_ICONS = {
+  csv: FileText,
+  png: Picture,
+  svg: FileCode
+};
+function ComponentExportActions({
+  component,
+  formats = [],
+  onAction,
+  viewAction
+}) {
+  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));
+  const triggerLabel = viewAction ? `${supported.length > 0 ? "View and export" : "View"} options for ${component.title}` : `Export options for ${component.title}`;
+  if (supported.length === 0 && !viewAction) 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": triggerLabel,
+        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__ */ jsxs(
+      Dropdown.Menu,
+      {
+        onAction: (key) => {
+          if (key === "view") {
+            viewAction?.onAction();
+            setIsOpen(false);
+            return;
+          }
+          const format = key;
+          if (triggerRef.current) exportComponent(triggerRef.current, component, format);
+          onAction?.({ componentId: component.id, format, type: "export" });
+          setIsOpen(false);
+        },
+        children: [
+          viewAction ? /* @__PURE__ */ jsxs(Dropdown.Item, { id: "view", textValue: viewAction.label, children: [
+            viewAction.target === "table" ? /* @__PURE__ */ jsx(LayoutCells, { "aria-hidden": "true", className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx(ChartColumn, { "aria-hidden": "true", className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsx(Label, { children: viewAction.label })
+          ] }) : null,
+          supported.map((format) => {
+            const FormatIcon = FORMAT_ICONS[format];
+            return /* @__PURE__ */ jsxs(Dropdown.Item, { id: format, textValue: FORMAT_LABELS[format], children: [
+              /* @__PURE__ */ jsx(FormatIcon, { "aria-hidden": "true", className: "size-4 shrink-0" }),
+              /* @__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 {
+  resolveGaugeBounds,
+  componentActionFromSpec,
+  createComponentSelection,
+  formatNumber,
+  formatAxisValue,
+  formatCell,
+  chartToDataTable,
+  ComponentExportActions,
+  TrendChange,
+  CHART_COLOR_TOKENS,
+  resolveChartColor,
+  paletteChartColor
+};

package/dist/{chunk-RQCTC4JB.js → chunk-EXFDD3K3.js}

@@ -854,7 +854,7 @@ var LEGACY_AGENT_MODEL_IDS = {
 function resolveAgentModelId(value) {
   return LEGACY_AGENT_MODEL_IDS[value] ?? value;
 }
-var DEFAULT_AGENT_PICKER_MODEL_ID = "openai/gpt-5.6-luna";
+var DEFAULT_AGENT_PICKER_MODEL_ID = "google/gemini-3.6-flash";
 var AGENT_MODEL_OPTIONS = [
   {
     description: "Flagship model for coding, reasoning, and knowledge work",

package/dist/{chunk-GDDNN2XY.js → chunk-Y6Y6ILXP.js}

@@ -10,7 +10,7 @@ import {
   resolveOptions,
   scheduleIdleTask,
   writeAgentShellHandoff
-} from "./chunk-RQCTC4JB.js";
+} from "./chunk-EXFDD3K3.js";
 
 // src/embed/provider.tsx
 import {
@@ -512,7 +512,7 @@ var embedRuntimePromise;
 function loadEmbedRuntime() {
   embedRuntimePromise ??= import(
     /* webpackPrefetch: true */
-    "./embed-runtime-XOPQY7Z5.js"
+    "./embed-runtime-QOATFAS7.js"
   ).then(
     (module) => module.default
   );