@shapesos/clay 0.11.0 → 0.12.0

package/dist/{chunk-BX5TCEPR.js → chunk-Z5JWF24N.js}

@@ -1,3 +1,8 @@
+import {
+  BarChart,
+  LineChart,
+  PieChart
+} from "./chunk-QXGYMDIA.js";
 import {
   Table,
   TableBody,
@@ -5,16 +10,38 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  cn,
   useScrollShadow
-} from "./chunk-L35M3OD5.js";
+} from "./chunk-4MZZH3WX.js";
+import {
+  cn
+} from "./chunk-P6GUNIAE.js";
 import {
   IconButton
 } from "./chunk-OBOXCBDL.js";
 
-// src/components/artifacts/types.ts
+// src/components/artifacts/artifact-base.ts
 var artifactTypes = {
-  TABLE: "TABLE"
+  TABLE: "TABLE",
+  CHART: "CHART"
+};
+
+// src/components/artifacts/chart-artifact/types.ts
+var DEFAULT_CHART_ARTIFACT_LABELS = {
+  download: "Download CSV",
+  unavailable: "Chart data is unavailable.",
+  loadError: "Couldn't load chart data.",
+  loading: "Loading chart\u2026",
+  empty: "No data to chart.",
+  othersCategoryLabels: ["Others", "Other"]
+};
+
+// src/components/artifacts/table-artifact/types.ts
+var DEFAULT_TABLE_ARTIFACT_LABELS = {
+  download: "Download CSV",
+  unavailable: "Table data is unavailable.",
+  loadError: "Couldn't load table data.",
+  loading: "Loading table\u2026",
+  empty: "No rows to display."
 };
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
@@ -116,7 +143,12 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/artifacts/artifact-download-button/artifact-download-button.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ArtifactDownloadButton({ href }) {
+var DEFAULT_LABEL = "Download CSV";
+function ArtifactDownloadButton({
+  href,
+  label = DEFAULT_LABEL,
+  onClick
+}) {
   if (!isSafeDownloadUrl(href)) return null;
   return /* @__PURE__ */ jsx2(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
@@ -126,12 +158,13 @@ function ArtifactDownloadButton({ href }) {
         href,
         download: true,
         rel: "noopener noreferrer",
+        onClick,
         icon: IconDownload,
         size: "small",
-        "aria-label": "Download artifact"
+        "aria-label": label
       }
     ) }),
-    /* @__PURE__ */ jsx2(TooltipContent, { children: "Download" })
+    /* @__PURE__ */ jsx2(TooltipContent, { children: label })
   ] }) });
 }
 function isSafeDownloadUrl(url) {
@@ -143,8 +176,8 @@ function isSafeDownloadUrl(url) {
   }
 }
 
-// src/components/artifacts/table-artifact/table-artifact.tsx
-import { useEffect as useEffect2 } from "react";
+// src/components/artifacts/chart-artifact/chart-artifact.tsx
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // src/components/ai-elements/artifact.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -160,7 +193,7 @@ var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ jsx3("p", { cla
 var ArtifactActions = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { className: cn("flex items-center gap-1", className), ...props });
 var ArtifactContent = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
 
-// src/components/artifacts/table-artifact/table-artifact-styles.ts
+// src/components/artifacts/status-message.tsx
 import { createElement as createElement2 } from "react";
 function StatusMessage({ $tone, children }) {
   return createElement2(
@@ -172,78 +205,136 @@ function StatusMessage({ $tone, children }) {
   );
 }
 
-// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
-var TABLE_STATUS = {
-  LOADING: "loading",
-  READY: "ready",
-  ERROR: "error",
-  UNAVAILABLE: "unavailable"
-};
+// src/components/artifacts/chart-artifact/chart-variant-services/constants.ts
+var VARIANT_CHART_HEIGHT = "100%";
 
-// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
-function formatCell(row, column) {
-  return row[column.key] ?? "";
+// src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-component.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function BarChartVariantComponent({ config, rows }) {
+  return /* @__PURE__ */ jsx4(
+    BarChart,
+    {
+      data: rows,
+      xKey: config.xKey,
+      series: config.series,
+      stacked: config.stacked,
+      height: VARIANT_CHART_HEIGHT
+    }
+  );
 }
-var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
-var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
-var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
-var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
-var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
 
-// src/components/artifacts/table-artifact/table-artifact-content.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function TableArtifactContent({
-  columns,
-  data,
-  knownRowCount,
-  maxShimmerRows,
-  maxBodyHeight,
-  unavailableMessage
-}) {
-  if (data.status === TABLE_STATUS.ERROR) {
-    return /* @__PURE__ */ jsx4(StatusMessage, { $tone: "error", children: "Couldn't load table data." });
-  }
-  if (data.status === TABLE_STATUS.UNAVAILABLE) {
-    return /* @__PURE__ */ jsx4(StatusMessage, { $tone: "info", children: unavailableMessage });
-  }
-  if (data.status === TABLE_STATUS.LOADING) {
-    if (typeof knownRowCount === "number" && knownRowCount > 0) {
-      const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
-      return /* @__PURE__ */ jsx4(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
-    }
-    return /* @__PURE__ */ jsx4(StatusMessage, { $tone: "info", children: "Loading table\u2026" });
-  }
-  return /* @__PURE__ */ jsx4(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length) : renderDataRows(columns, data.rows) });
+// src/components/artifacts/chart-artifact/chart-variant-services/shared-column-keys.ts
+function seriesBasedColumnKeys(config) {
+  return [config.xKey, ...config.series.map((s) => s.key)];
 }
-function ArtifactTable({ columns, maxBodyHeight, children }) {
-  const { targetRef, isScrolled } = useScrollShadow();
-  return /* @__PURE__ */ jsx4("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ jsxs2(Table, { containerClassName: "overflow-visible", children: [
-    /* @__PURE__ */ jsx4(
-      TableHeader,
-      {
-        "data-scrolled": isScrolled ? "true" : void 0,
-        className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
-        style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
-        children: /* @__PURE__ */ jsx4(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ jsx4(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
-      }
-    ),
-    /* @__PURE__ */ jsx4(TableBody, { children })
-  ] }) });
+function pieColumnKeys(config) {
+  return [config.categoryKey, config.valueKey];
 }
-function renderShimmerRows(columns, count) {
-  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx4(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ jsx4(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ jsx4("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
+
+// src/components/artifacts/chart-artifact/chart-variant-services/shared-validators.ts
+function isValidChartSeries(series) {
+  if (!series || typeof series !== "object") return false;
+  const candidate = series;
+  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
+  if (typeof candidate.label !== "string") return false;
+  return true;
 }
-function renderDataRows(columns, rows) {
-  return rows.map((row, index) => /* @__PURE__ */ jsx4(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ jsx4(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
+
+// src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-service.tsx
+function isValidBarChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "BAR") return false;
+  if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
+  if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
+  if (!candidate.series.every(isValidChartSeries)) return false;
+  return true;
 }
-function renderEmptyRow(colSpan) {
-  return /* @__PURE__ */ jsx4(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx4(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: "No rows to display." }) });
+var BarChartVariantService = {
+  variant: "BAR",
+  isValidConfig: isValidBarChartConfig,
+  columnKeys: seriesBasedColumnKeys,
+  Component: BarChartVariantComponent
+};
+
+// src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-component.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function LineChartVariantComponent({ config, rows }) {
+  return /* @__PURE__ */ jsx5(LineChart, { data: rows, xKey: config.xKey, series: config.series, height: VARIANT_CHART_HEIGHT });
 }
 
-// src/components/artifacts/table-artifact/use-table-artifact-data.ts
-import { useEffect, useMemo, useState } from "react";
+// src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-service.tsx
+function isValidLineChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "LINE") return false;
+  if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
+  if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
+  if (!candidate.series.every(isValidChartSeries)) return false;
+  return true;
+}
+var LineChartVariantService = {
+  variant: "LINE",
+  isValidConfig: isValidLineChartConfig,
+  columnKeys: seriesBasedColumnKeys,
+  Component: LineChartVariantComponent
+};
+
+// src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-component.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function PieChartVariantComponent({
+  config,
+  rows,
+  labels
+}) {
+  return /* @__PURE__ */ jsx6(
+    PieChart,
+    {
+      data: rows,
+      categoryKey: config.categoryKey,
+      valueKey: config.valueKey,
+      othersCategoryLabels: labels.othersCategoryLabels,
+      height: VARIANT_CHART_HEIGHT
+    }
+  );
+}
 
-// src/components/artifacts/table-artifact/parse-csv.ts
+// src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-service.tsx
+function isValidPieChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (candidate.variant !== "PIE") return false;
+  if (typeof candidate.categoryKey !== "string" || candidate.categoryKey.length === 0) return false;
+  if (typeof candidate.valueKey !== "string" || candidate.valueKey.length === 0) return false;
+  if (!Array.isArray(candidate.series)) return false;
+  return true;
+}
+var PieChartVariantService = {
+  variant: "PIE",
+  isValidConfig: isValidPieChartConfig,
+  columnKeys: pieColumnKeys,
+  Component: PieChartVariantComponent
+};
+
+// src/components/artifacts/chart-artifact/chart-variant-services/index.ts
+var ChartVariantServices = {
+  LINE: LineChartVariantService,
+  BAR: BarChartVariantService,
+  PIE: PieChartVariantService
+};
+
+// src/components/artifacts/chart-artifact/chart-artifact-content.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ChartArtifactContent({ config, rows, labels }) {
+  const service = ChartVariantServices[config.variant];
+  if (!service) {
+    return /* @__PURE__ */ jsx7(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  const Component = service.Component;
+  return /* @__PURE__ */ jsx7(Component, { config, rows, labels });
+}
+
+// src/components/artifacts/parse-csv.ts
 import Papa from "papaparse";
 function parseCsv(text, columns) {
   const result = Papa.parse(text, {
@@ -253,6 +344,7 @@ function parseCsv(text, columns) {
   });
   const csvHeaders = new Set(result.meta?.fields ?? []);
   const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
+  if (presentColumns.length === 0) return [];
   return result.data.map((rawRow) => {
     const row = {};
     for (const column of presentColumns) {
@@ -263,21 +355,27 @@ function parseCsv(text, columns) {
   });
 }
 
-// src/components/artifacts/table-artifact/use-table-artifact-data.ts
+// src/components/artifacts/use-rows-artifact-data.ts
+import { useEffect, useMemo, useState } from "react";
 var LOADING = { status: "loading", rows: null, error: null };
 var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
 var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
 function columnsFingerprint(columns) {
-  return columns.map((c) => `${c.key}:${c.type ?? "string"}`).join("|");
+  return columns.map((c) => c.key).join("|");
 }
-function useTableArtifactData(presignedUrl, columns) {
+function scrubUrl(url) {
+  const q = url.indexOf("?");
+  return q === -1 ? url : `${url.slice(0, q)}?<redacted>`;
+}
+function useRowsArtifactData(presignedUrl, columns, parse) {
   const colsKey = useMemo(() => columnsFingerprint(columns), [columns]);
-  const cacheKey = presignedUrl ? `${presignedUrl}::${colsKey}` : null;
+  const safeUrl = presignedUrl && isSafeDownloadUrl(presignedUrl) ? presignedUrl : null;
+  const cacheKey = safeUrl ? `${safeUrl}::${colsKey}` : null;
   const [state, setState] = useState(INITIAL_INTERNAL);
   useEffect(() => {
-    if (!presignedUrl) return;
+    if (!safeUrl) return;
     const controller = new AbortController();
-    fetch(presignedUrl, {
+    fetch(safeUrl, {
       signal: controller.signal,
       headers: { Accept: "text/csv" },
       // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
@@ -285,33 +383,182 @@ function useTableArtifactData(presignedUrl, columns) {
       // session cookies or auth headers.
       credentials: "omit"
     }).then(async (response) => {
-      if (!response.ok) throw new Error(`Failed to load table data (${response.status})`);
+      if (!response.ok) throw new Error(`Failed to load artifact data (${response.status})`);
       return response.text();
     }).then((text) => {
       if (controller.signal.aborted) return;
       try {
-        const rows = parseCsv(text, columns);
-        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
+        const rows = parse(text, columns);
+        setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
       } catch (parseError) {
-        console.error("[TableArtifact] CSV parse failed", parseError);
         const err = parseError instanceof Error ? parseError : new Error(String(parseError));
-        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+        console.error("[ArtifactData] CSV parse failed:", err.message);
+        setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
       }
     }).catch((error) => {
       if (controller.signal.aborted) return;
-      console.error("[TableArtifact] Fetch failed", error);
       const err = error instanceof Error ? error : new Error(String(error));
-      setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+      console.error(`[ArtifactData] Fetch failed [${scrubUrl(safeUrl)}]:`, err.message);
+      setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
     });
     return () => {
       controller.abort();
     };
-  }, [presignedUrl, colsKey]);
-  if (!presignedUrl) return UNAVAILABLE;
+  }, [safeUrl, colsKey]);
+  if (!safeUrl) return UNAVAILABLE;
   if (state.cacheKey !== cacheKey) return LOADING;
   return state.data;
 }
 
+// src/components/artifacts/chart-artifact/use-chart-artifact-data.ts
+function useChartArtifactData(presignedUrl, config) {
+  const service = ChartVariantServices[config.variant];
+  const keys = service ? service.columnKeys(config) : [];
+  const columns = keys.map((key) => ({ key }));
+  return useRowsArtifactData(presignedUrl, columns, parseCsv);
+}
+
+// src/components/artifacts/chart-artifact/validate.ts
+function isValidChartConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const variant = config.variant;
+  if (typeof variant !== "string") return false;
+  const service = ChartVariantServices[variant];
+  if (!service) return false;
+  return service.isValidConfig(config);
+}
+
+// src/components/artifacts/chart-artifact/chart-artifact.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var TITLE_CLASSES = "text-sm font-semibold text-foreground";
+var CHART_HEIGHT = 320;
+function ChartArtifact({ artifact, labels, callbacks }) {
+  const validConfig = isValidChartConfig(artifact.config);
+  useEffect2(() => {
+    if (validConfig) return;
+    console.warn("[clay] ChartArtifact: malformed `config` \u2014 skipping render.");
+  }, [validConfig]);
+  const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
+  const resolvedLabels = useMemo2(
+    () => ({ ...DEFAULT_CHART_ARTIFACT_LABELS, ...labels?.[artifactTypes.CHART] ?? {} }),
+    [labels]
+  );
+  const data = useChartArtifactData(
+    validConfig ? presignedUrl : null,
+    validConfig ? artifact.config : { variant: "LINE", series: [], xKey: "x" }
+  );
+  const onDownload = callbacks?.[artifactTypes.CHART]?.onDownload;
+  const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
+  return /* @__PURE__ */ jsxs2(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+    /* @__PURE__ */ jsxs2(ArtifactHeader, { className: "bg-background/70", children: [
+      artifact.title ? /* @__PURE__ */ jsx8(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ jsx8("span", {}),
+      presignedUrl ? /* @__PURE__ */ jsx8(ArtifactActions, { children: /* @__PURE__ */ jsx8(ArtifactDownloadButton, { href: presignedUrl, label: resolvedLabels.download, onClick: handleDownloadClick }) }) : null
+    ] }),
+    /* @__PURE__ */ jsx8(
+      ArtifactContent,
+      {
+        className: "p-4 overflow-visible flex flex-none items-center justify-center",
+        style: { height: CHART_HEIGHT },
+        children: renderBody(validConfig, artifact, data, resolvedLabels)
+      }
+    )
+  ] });
+}
+function renderBody(validConfig, artifact, data, labels) {
+  if (!validConfig) {
+    return /* @__PURE__ */ jsx8(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === "error") {
+    return /* @__PURE__ */ jsx8(StatusMessage, { $tone: "error", children: labels.loadError });
+  }
+  if (data.status === "unavailable") {
+    return /* @__PURE__ */ jsx8(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === "loading") {
+    return /* @__PURE__ */ jsx8(StatusMessage, { $tone: "info", children: labels.loading });
+  }
+  if (data.rows.length === 0) {
+    return /* @__PURE__ */ jsx8(StatusMessage, { $tone: "info", children: labels.empty });
+  }
+  return /* @__PURE__ */ jsx8(ChartArtifactContent, { config: artifact.config, rows: data.rows, labels });
+}
+
+// src/components/artifacts/table-artifact/table-artifact.tsx
+import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+
+// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
+var TABLE_STATUS = {
+  LOADING: "loading",
+  READY: "ready",
+  ERROR: "error",
+  UNAVAILABLE: "unavailable"
+};
+
+// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
+function formatCell(row, column) {
+  return row[column.key] ?? "";
+}
+var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
+var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+
+// src/components/artifacts/table-artifact/table-artifact-content.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableArtifactContent({
+  columns,
+  data,
+  knownRowCount,
+  maxShimmerRows,
+  maxBodyHeight,
+  labels
+}) {
+  if (data.status === TABLE_STATUS.ERROR) {
+    return /* @__PURE__ */ jsx9(StatusMessage, { $tone: "error", children: labels.loadError });
+  }
+  if (data.status === TABLE_STATUS.UNAVAILABLE) {
+    return /* @__PURE__ */ jsx9(StatusMessage, { $tone: "info", children: labels.unavailable });
+  }
+  if (data.status === TABLE_STATUS.LOADING) {
+    if (typeof knownRowCount === "number" && knownRowCount > 0) {
+      const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
+      return /* @__PURE__ */ jsx9(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
+    }
+    return /* @__PURE__ */ jsx9(StatusMessage, { $tone: "info", children: labels.loading });
+  }
+  return /* @__PURE__ */ jsx9(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length, labels.empty) : renderDataRows(columns, data.rows) });
+}
+function ArtifactTable({ columns, maxBodyHeight, children }) {
+  const { targetRef, isScrolled } = useScrollShadow();
+  return /* @__PURE__ */ jsx9("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ jsxs3(Table, { containerClassName: "overflow-visible", children: [
+    /* @__PURE__ */ jsx9(
+      TableHeader,
+      {
+        "data-scrolled": isScrolled ? "true" : void 0,
+        className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
+        style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
+        children: /* @__PURE__ */ jsx9(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ jsx9(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
+      }
+    ),
+    /* @__PURE__ */ jsx9(TableBody, { children })
+  ] }) });
+}
+function renderShimmerRows(columns, count) {
+  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx9(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ jsx9(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ jsx9("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
+}
+function renderDataRows(columns, rows) {
+  return rows.map((row, index) => /* @__PURE__ */ jsx9(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ jsx9(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
+}
+function renderEmptyRow(colSpan, emptyMessage) {
+  return /* @__PURE__ */ jsx9(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx9(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) });
+}
+
+// src/components/artifacts/table-artifact/use-table-artifact-data.ts
+function useTableArtifactData(presignedUrl, columns) {
+  return useRowsArtifactData(presignedUrl, columns, parseCsv);
+}
+
 // src/components/artifacts/table-artifact/validate.ts
 function isValidTableConfig(config) {
   if (!config || typeof config !== "object") return false;
@@ -329,42 +576,61 @@ function isValidTableColumn(column) {
 }
 
 // src/components/artifacts/table-artifact/table-artifact.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var TITLE_CLASSES = "text-sm font-semibold text-foreground";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var TITLE_CLASSES2 = "text-sm font-semibold text-foreground";
 var TABLE_MAX_BODY_HEIGHT = 480;
 var MAX_SHIMMER_ROWS = 10;
-var MSG_UNAVAILABLE = "Table data is unavailable.";
-function TableArtifact({ artifact }) {
+function TableArtifact({ artifact, labels, callbacks }) {
   const validConfig = isValidTableConfig(artifact.config);
   const validColumns = validConfig ? artifact.config.columns : null;
-  useEffect2(() => {
+  useEffect3(() => {
     if (validConfig) return;
     console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
   }, [validConfig]);
+  const resolvedLabels = useMemo3(
+    () => ({ ...DEFAULT_TABLE_ARTIFACT_LABELS, ...labels?.[artifactTypes.TABLE] ?? {} }),
+    [labels]
+  );
   const data = useTableArtifactData(
     validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
     validColumns ?? []
   );
   const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
+  const onDownload = callbacks?.[artifactTypes.TABLE]?.onDownload;
+  const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
   if (!validConfig || !validColumns) {
-    return /* @__PURE__ */ jsxs3(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
-      /* @__PURE__ */ jsxs3(ArtifactHeader, { className: "bg-background/70", children: [
-        artifact.title ? /* @__PURE__ */ jsx5(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ jsx5("span", {}),
-        presignedUrl ? /* @__PURE__ */ jsx5(ArtifactActions, { children: /* @__PURE__ */ jsx5(ArtifactDownloadButton, { href: presignedUrl }) }) : null
+    return /* @__PURE__ */ jsxs4(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ jsxs4(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ jsx10(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ jsx10("span", {}),
+        presignedUrl ? /* @__PURE__ */ jsx10(ArtifactActions, { children: /* @__PURE__ */ jsx10(
+          ArtifactDownloadButton,
+          {
+            href: presignedUrl,
+            label: resolvedLabels.download,
+            onClick: handleDownloadClick
+          }
+        ) }) : null
       ] }),
-      /* @__PURE__ */ jsx5(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ jsx5(StatusMessage, { $tone: "info", children: MSG_UNAVAILABLE }) })
+      /* @__PURE__ */ jsx10(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ jsx10(StatusMessage, { $tone: "info", children: resolvedLabels.unavailable }) })
     ] });
   }
   return (
     // The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
     // Disable the outer overflow container so only one scroll context exists — this prevents
     // double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
-    /* @__PURE__ */ jsxs3(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
-      /* @__PURE__ */ jsxs3(ArtifactHeader, { className: "bg-background/70", children: [
-        artifact.title ? /* @__PURE__ */ jsx5(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ jsx5("span", {}),
-        /* @__PURE__ */ jsx5(ArtifactActions, { children: /* @__PURE__ */ jsx5(ArtifactDownloadButton, { href: presignedUrl ?? "" }) })
+    /* @__PURE__ */ jsxs4(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ jsxs4(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ jsx10(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ jsx10("span", {}),
+        /* @__PURE__ */ jsx10(ArtifactActions, { children: /* @__PURE__ */ jsx10(
+          ArtifactDownloadButton,
+          {
+            href: presignedUrl ?? "",
+            label: resolvedLabels.download,
+            onClick: handleDownloadClick
+          }
+        ) })
       ] }),
-      /* @__PURE__ */ jsx5(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx10(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ jsx10(
         TableArtifactContent,
         {
           columns: validColumns,
@@ -372,13 +638,26 @@ function TableArtifact({ artifact }) {
           knownRowCount: artifact.config.stats?.rowCount,
           maxShimmerRows: MAX_SHIMMER_ROWS,
           maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
-          unavailableMessage: MSG_UNAVAILABLE
+          labels: resolvedLabels
         }
       ) })
     ] })
   );
 }
 
+// src/components/artifacts/chart-artifact/to-clipboard-text.ts
+function chartArtifactToClipboardText(artifact) {
+  const trimmedTitle = artifact.title?.trim();
+  return trimmedTitle || "Chart";
+}
+
+// src/components/artifacts/artifact-services/chart-artifact-service.ts
+var ChartArtifactService = {
+  type: artifactTypes.CHART,
+  Component: ChartArtifact,
+  toClipboardText: chartArtifactToClipboardText
+};
+
 // src/components/artifacts/table-artifact/to-clipboard-text.ts
 function tableArtifactToClipboardText(artifact) {
   const trimmedTitle = artifact.title?.trim();
@@ -394,7 +673,8 @@ var TableArtifactService = {
 
 // src/components/artifacts/artifact-services/index.ts
 var ArtifactServices = {
-  [artifactTypes.TABLE]: TableArtifactService
+  [artifactTypes.TABLE]: TableArtifactService,
+  [artifactTypes.CHART]: ChartArtifactService
 };
 function artifactToClipboardText(artifact) {
   const entry = ArtifactServices[artifact.type];
@@ -406,12 +686,15 @@ function artifactToClipboardText(artifact) {
 
 export {
   artifactTypes,
+  DEFAULT_CHART_ARTIFACT_LABELS,
+  DEFAULT_TABLE_ARTIFACT_LABELS,
   IconCheck,
   IconCopy,
   IconThumbDown,
   IconThumbUp,
   ArtifactDownloadButton,
   isSafeDownloadUrl,
+  ChartArtifact,
   TableArtifact,
   ArtifactServices,
   artifactToClipboardText
@@ -433,4 +716,4 @@ export {
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-BX5TCEPR.js.map
+//# sourceMappingURL=chunk-Z5JWF24N.js.map