@shapesos/clay 0.10.0 → 0.12.0

package/dist/chunk-Z5JWF24N.js

@@ -0,0 +1,719 @@
+import {
+  BarChart,
+  LineChart,
+  PieChart
+} from "./chunk-QXGYMDIA.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useScrollShadow
+} from "./chunk-4MZZH3WX.js";
+import {
+  cn
+} from "./chunk-P6GUNIAE.js";
+import {
+  IconButton
+} from "./chunk-OBOXCBDL.js";
+
+// src/components/artifacts/artifact-base.ts
+var artifactTypes = {
+  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
+import { forwardRef, createElement } from "react";
+
+// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
+var defaultAttributes = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+
+// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
+var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+  const Component = forwardRef(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes[type],
+        width: size,
+        height: size,
+        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
+        ...type === "filled" ? {
+          fill: color
+        } : {
+          strokeWidth: stroke,
+          stroke: color
+        },
+        ...rest
+      },
+      [
+        title && createElement("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
+  );
+  Component.displayName = `${iconNamePascal}`;
+  return Component;
+};
+
+// node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
+var __iconNode = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
+var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
+
+// node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
+var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
+var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
+
+// node_modules/@tabler/icons-react/dist/esm/icons/IconDownload.mjs
+var __iconNode3 = [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 11l5 5l5 -5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]];
+var IconDownload = createReactComponent("outline", "download", "Download", __iconNode3);
+
+// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
+var __iconNode4 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
+var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode4);
+
+// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
+var __iconNode5 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
+var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode5);
+
+// src/components/ui/tooltip.tsx
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/artifacts/artifact-download-button/artifact-download-button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+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(
+      IconButton,
+      {
+        as: "a",
+        href,
+        download: true,
+        rel: "noopener noreferrer",
+        onClick,
+        icon: IconDownload,
+        size: "small",
+        "aria-label": label
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(TooltipContent, { children: label })
+  ] }) });
+}
+function isSafeDownloadUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
+// 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";
+var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className),
+    ...props
+  }
+);
+var ArtifactHeader = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { className: cn("flex items-center justify-between border-b bg-muted/50 px-4 py-3", className), ...props });
+var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ jsx3("p", { className: cn("font-medium text-foreground text-sm", className), ...props });
+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/status-message.tsx
+import { createElement as createElement2 } from "react";
+function StatusMessage({ $tone, children }) {
+  return createElement2(
+    "div",
+    {
+      className: `py-6 px-2 text-center text-sm font-medium leading-5 ${$tone === "error" ? "text-red-600" : "text-brown-70"}`
+    },
+    children
+  );
+}
+
+// src/components/artifacts/chart-artifact/chart-variant-services/constants.ts
+var VARIANT_CHART_HEIGHT = "100%";
+
+// 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
+    }
+  );
+}
+
+// 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 pieColumnKeys(config) {
+  return [config.categoryKey, config.valueKey];
+}
+
+// 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;
+}
+
+// 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;
+}
+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/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/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, {
+    header: true,
+    skipEmptyLines: true,
+    dynamicTyping: false
+  });
+  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) {
+      const value = rawRow[column.key];
+      row[column.key] = value === void 0 || value === "" ? null : value;
+    }
+    return row;
+  });
+}
+
+// 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).join("|");
+}
+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 safeUrl = presignedUrl && isSafeDownloadUrl(presignedUrl) ? presignedUrl : null;
+  const cacheKey = safeUrl ? `${safeUrl}::${colsKey}` : null;
+  const [state, setState] = useState(INITIAL_INTERNAL);
+  useEffect(() => {
+    if (!safeUrl) return;
+    const controller = new AbortController();
+    fetch(safeUrl, {
+      signal: controller.signal,
+      headers: { Accept: "text/csv" },
+      // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
+      // omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
+      // session cookies or auth headers.
+      credentials: "omit"
+    }).then(async (response) => {
+      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 = parse(text, columns);
+        setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
+      } catch (parseError) {
+        const err = parseError instanceof Error ? parseError : new Error(String(parseError));
+        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;
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error(`[ArtifactData] Fetch failed [${scrubUrl(safeUrl)}]:`, err.message);
+      setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [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;
+  const candidate = config;
+  if (!Array.isArray(candidate.columns)) return false;
+  if (candidate.columns.length === 0) return false;
+  return candidate.columns.every(isValidTableColumn);
+}
+function isValidTableColumn(column) {
+  if (!column || typeof column !== "object") return false;
+  const candidate = column;
+  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
+  if (typeof candidate.label !== "string") return false;
+  return true;
+}
+
+// src/components/artifacts/table-artifact/table-artifact.tsx
+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;
+function TableArtifact({ artifact, labels, callbacks }) {
+  const validConfig = isValidTableConfig(artifact.config);
+  const validColumns = validConfig ? artifact.config.columns : null;
+  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__ */ 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__ */ 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__ */ 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__ */ jsx10(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ jsx10(
+        TableArtifactContent,
+        {
+          columns: validColumns,
+          data,
+          knownRowCount: artifact.config.stats?.rowCount,
+          maxShimmerRows: MAX_SHIMMER_ROWS,
+          maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
+          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();
+  return trimmedTitle || "Table";
+}
+
+// src/components/artifacts/artifact-services/table-artifact-service.ts
+var TableArtifactService = {
+  type: artifactTypes.TABLE,
+  Component: TableArtifact,
+  toClipboardText: tableArtifactToClipboardText
+};
+
+// src/components/artifacts/artifact-services/index.ts
+var ArtifactServices = {
+  [artifactTypes.TABLE]: TableArtifactService,
+  [artifactTypes.CHART]: ChartArtifactService
+};
+function artifactToClipboardText(artifact) {
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) {
+    return `[Artifact: ${artifact.title ?? artifact.type}]`;
+  }
+  return entry.toClipboardText(artifact);
+}
+
+export {
+  artifactTypes,
+  DEFAULT_CHART_ARTIFACT_LABELS,
+  DEFAULT_TABLE_ARTIFACT_LABELS,
+  IconCheck,
+  IconCopy,
+  IconThumbDown,
+  IconThumbUp,
+  ArtifactDownloadButton,
+  isSafeDownloadUrl,
+  ChartArtifact,
+  TableArtifact,
+  ArtifactServices,
+  artifactToClipboardText
+};
+/*! Bundled license information:
+
+@tabler/icons-react/dist/esm/defaultAttributes.mjs:
+@tabler/icons-react/dist/esm/createReactComponent.mjs:
+@tabler/icons-react/dist/esm/icons/IconCheck.mjs:
+@tabler/icons-react/dist/esm/icons/IconCopy.mjs:
+@tabler/icons-react/dist/esm/icons/IconDownload.mjs:
+@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
+@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
+@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
+  (**
+   * @license @tabler/icons-react v3.37.1 - MIT
+   *
+   * This source code is licensed under the MIT license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
+//# sourceMappingURL=chunk-Z5JWF24N.js.map