@shapesos/clay 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/README.md +60 -0
  2. package/dist/artifacts.cjs +1467 -0
  3. package/dist/artifacts.cjs.map +1 -0
  4. package/dist/artifacts.d.cts +89 -0
  5. package/dist/artifacts.d.ts +89 -0
  6. package/dist/artifacts.js +33 -0
  7. package/dist/blocks.cjs +1418 -68
  8. package/dist/blocks.cjs.map +1 -1
  9. package/dist/blocks.css +2 -0
  10. package/dist/blocks.d.cts +36 -11
  11. package/dist/blocks.d.ts +36 -11
  12. package/dist/blocks.js +18 -5
  13. package/dist/button.d.cts +2 -2
  14. package/dist/button.d.ts +2 -2
  15. package/dist/chart.cjs +594 -0
  16. package/dist/chart.cjs.map +1 -0
  17. package/dist/chart.d.cts +439 -0
  18. package/dist/chart.d.ts +439 -0
  19. package/dist/chart.js +32 -0
  20. package/dist/chart.js.map +1 -0
  21. package/dist/chat.cjs +1462 -312
  22. package/dist/chat.cjs.map +1 -1
  23. package/dist/chat.d.cts +28 -10
  24. package/dist/chat.d.ts +28 -10
  25. package/dist/chat.js +10 -3
  26. package/dist/{chunk-R3BGPOAM.js → chunk-36CB624W.js} +53 -45
  27. package/dist/chunk-36CB624W.js.map +1 -0
  28. package/dist/chunk-4MZZH3WX.js +93 -0
  29. package/dist/chunk-4MZZH3WX.js.map +1 -0
  30. package/dist/chunk-AQEJRMRN.js +1 -0
  31. package/dist/chunk-AQEJRMRN.js.map +1 -0
  32. package/dist/{chunk-WS4IPADR.js → chunk-FFX3CAOX.js} +41 -109
  33. package/dist/chunk-FFX3CAOX.js.map +1 -0
  34. package/dist/chunk-JGMN6W72.js +12 -0
  35. package/dist/chunk-JGMN6W72.js.map +1 -0
  36. package/dist/{chunk-27GJUWVN.js → chunk-JJUIBBBU.js} +14 -8
  37. package/dist/chunk-JJUIBBBU.js.map +1 -0
  38. package/dist/{chunk-MLCRDVQ2.js → chunk-OBOXCBDL.js} +13 -5
  39. package/dist/chunk-OBOXCBDL.js.map +1 -0
  40. package/dist/chunk-P6GUNIAE.js +11 -0
  41. package/dist/chunk-P6GUNIAE.js.map +1 -0
  42. package/dist/chunk-QXGYMDIA.js +477 -0
  43. package/dist/chunk-QXGYMDIA.js.map +1 -0
  44. package/dist/chunk-Z5JWF24N.js +719 -0
  45. package/dist/chunk-Z5JWF24N.js.map +1 -0
  46. package/dist/icon.cjs +12 -4
  47. package/dist/icon.cjs.map +1 -1
  48. package/dist/icon.d.cts +19 -6
  49. package/dist/icon.d.ts +19 -6
  50. package/dist/icon.js +1 -1
  51. package/dist/index.cjs +1520 -332
  52. package/dist/index.cjs.map +1 -1
  53. package/dist/index.d.cts +7 -4
  54. package/dist/index.d.ts +7 -4
  55. package/dist/index.js +58 -25
  56. package/dist/lottie.d.cts +2 -2
  57. package/dist/lottie.d.ts +2 -2
  58. package/dist/table.cjs +142 -0
  59. package/dist/table.cjs.map +1 -0
  60. package/dist/table.d.cts +44 -0
  61. package/dist/table.d.ts +44 -0
  62. package/dist/table.js +25 -0
  63. package/dist/table.js.map +1 -0
  64. package/dist/text-area.d.cts +2 -2
  65. package/dist/text-area.d.ts +2 -2
  66. package/dist/types-B2aYk82c.d.cts +29 -0
  67. package/dist/types-B2aYk82c.d.ts +29 -0
  68. package/dist/types-C0BvwliI.d.cts +332 -0
  69. package/dist/types-C5bFH4v3.d.ts +332 -0
  70. package/dist/types-DCutaXjZ.d.cts +83 -0
  71. package/dist/types-uPfn67Dc.d.ts +83 -0
  72. package/dist/utils.cjs +14 -7
  73. package/dist/utils.cjs.map +1 -1
  74. package/dist/utils.d.cts +18 -1
  75. package/dist/utils.d.ts +18 -1
  76. package/dist/utils.js +6 -4
  77. package/package.json +41 -4
  78. package/dist/chunk-27GJUWVN.js.map +0 -1
  79. package/dist/chunk-MLCRDVQ2.js.map +0 -1
  80. package/dist/chunk-OKPNST44.js +0 -1
  81. package/dist/chunk-R3BGPOAM.js.map +0 -1
  82. package/dist/chunk-WS4IPADR.js.map +0 -1
  83. package/dist/types-Q9aqd9nq.d.cts +0 -34
  84. package/dist/types-Q9aqd9nq.d.ts +0 -34
  85. /package/dist/{chunk-OKPNST44.js.map → artifacts.js.map} +0 -0
package/dist/blocks.cjs CHANGED
@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/components/blocks/index.ts
31
31
  var blocks_exports = {};
32
32
  __export(blocks_exports, {
33
+ ArtifactRefBlock: () => ArtifactRefBlock,
34
+ ArtifactRefBlockService: () => ArtifactRefBlockService,
33
35
  Block: () => Block,
34
36
  BlockContext: () => BlockContext,
35
37
  BlockServices: () => BlockServices,
@@ -39,20 +41,168 @@ __export(blocks_exports, {
39
41
  });
40
42
  module.exports = __toCommonJS(blocks_exports);
41
43
 
42
- // src/components/blocks/text-block/text-block.tsx
43
- var import_react_markdown = __toESM(require("react-markdown"), 1);
44
- var import_remark_breaks = __toESM(require("remark-breaks"), 1);
45
- var import_remark_gfm = __toESM(require("remark-gfm"), 1);
44
+ // src/components/blocks/types.ts
45
+ var blockTypes = {
46
+ TEXT: "TEXT",
47
+ ARTIFACT_REF: "ARTIFACT_REF"
48
+ };
46
49
 
47
- // src/components/blocks/block-context/block-context.tsx
48
- var import_react = require("react");
49
- var BlockContext = (0, import_react.createContext)(null);
50
- function useBlockContext() {
51
- return (0, import_react.useContext)(BlockContext) ?? {};
50
+ // src/components/artifacts/artifact-base.ts
51
+ var artifactTypes = {
52
+ TABLE: "TABLE",
53
+ CHART: "CHART"
54
+ };
55
+
56
+ // src/components/artifacts/chart-artifact/types.ts
57
+ var DEFAULT_CHART_ARTIFACT_LABELS = {
58
+ download: "Download CSV",
59
+ unavailable: "Chart data is unavailable.",
60
+ loadError: "Couldn't load chart data.",
61
+ loading: "Loading chart\u2026",
62
+ empty: "No data to chart.",
63
+ othersCategoryLabels: ["Others", "Other"]
64
+ };
65
+
66
+ // src/components/artifacts/table-artifact/types.ts
67
+ var DEFAULT_TABLE_ARTIFACT_LABELS = {
68
+ download: "Download CSV",
69
+ unavailable: "Table data is unavailable.",
70
+ loadError: "Couldn't load table data.",
71
+ loading: "Loading table\u2026",
72
+ empty: "No rows to display."
73
+ };
74
+
75
+ // src/components/artifacts/chart-artifact/chart-artifact.tsx
76
+ var import_react9 = require("react");
77
+
78
+ // src/lib/utils.ts
79
+ var import_clsx = require("clsx");
80
+ var import_tailwind_merge = require("tailwind-merge");
81
+ function cn(...inputs) {
82
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
52
83
  }
53
84
 
54
- // src/components/blocks/scrollable-table/scrollable-table-styles.ts
85
+ // src/components/ai-elements/artifact.tsx
86
+ var import_jsx_runtime = require("react/jsx-runtime");
87
+ var Artifact = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
88
+ "div",
89
+ {
90
+ className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className),
91
+ ...props
92
+ }
93
+ );
94
+ var ArtifactHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex items-center justify-between border-b bg-muted/50 px-4 py-3", className), ...props });
95
+ var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("font-medium text-foreground text-sm", className), ...props });
96
+ var ArtifactActions = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex items-center gap-1", className), ...props });
97
+ var ArtifactContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
98
+
99
+ // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
100
+ var import_react = require("react");
101
+
102
+ // node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
103
+ var defaultAttributes = {
104
+ outline: {
105
+ xmlns: "http://www.w3.org/2000/svg",
106
+ width: 24,
107
+ height: 24,
108
+ viewBox: "0 0 24 24",
109
+ fill: "none",
110
+ stroke: "currentColor",
111
+ strokeWidth: 2,
112
+ strokeLinecap: "round",
113
+ strokeLinejoin: "round"
114
+ },
115
+ filled: {
116
+ xmlns: "http://www.w3.org/2000/svg",
117
+ width: 24,
118
+ height: 24,
119
+ viewBox: "0 0 24 24",
120
+ fill: "currentColor",
121
+ stroke: "none"
122
+ }
123
+ };
124
+
125
+ // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
126
+ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
127
+ const Component = (0, import_react.forwardRef)(
128
+ ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
129
+ "svg",
130
+ {
131
+ ref,
132
+ ...defaultAttributes[type],
133
+ width: size,
134
+ height: size,
135
+ className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
136
+ ...type === "filled" ? {
137
+ fill: color
138
+ } : {
139
+ strokeWidth: stroke,
140
+ stroke: color
141
+ },
142
+ ...rest
143
+ },
144
+ [
145
+ title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
146
+ ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
147
+ ...Array.isArray(children) ? children : [children]
148
+ ]
149
+ )
150
+ );
151
+ Component.displayName = `${iconNamePascal}`;
152
+ return Component;
153
+ };
154
+
155
+ // node_modules/@tabler/icons-react/dist/esm/icons/IconDownload.mjs
156
+ var __iconNode = [["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" }]];
157
+ var IconDownload = createReactComponent("outline", "download", "Download", __iconNode);
158
+
159
+ // src/components/icon-button/icon-button.tsx
160
+ var import_react3 = require("react");
161
+
162
+ // src/components/icon/icon.tsx
163
+ var import_react2 = require("react");
164
+
165
+ // src/components/icon/icon-styles.ts
55
166
  var import_styled_components = __toESM(require("styled-components"), 1);
167
+ var STROKE_WIDTH_BY_SIZE = {
168
+ 12: 1.4,
169
+ 14: 1.4,
170
+ 16: 1.8,
171
+ 18: 1.8,
172
+ 20: 1.8,
173
+ 24: 1.8
174
+ };
175
+ var DEFAULT_STROKE_WIDTH = 1.8;
176
+ function getStrokeWidth(size) {
177
+ return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
178
+ }
179
+ var IconWrapper = import_styled_components.default.span`
180
+ display: inline-flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ color: ${({ $color }) => $color ?? "currentColor"};
184
+ flex-shrink: 0;
185
+ `;
186
+
187
+ // src/components/icon/icon.tsx
188
+ var import_jsx_runtime2 = require("react/jsx-runtime");
189
+ var DEFAULT_SIZE = 16;
190
+ var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
191
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
192
+ IconWrapper,
193
+ {
194
+ ref,
195
+ className,
196
+ $color: color,
197
+ "aria-label": ariaLabel,
198
+ role: ariaLabel ? "img" : void 0,
199
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
200
+ }
201
+ );
202
+ });
203
+
204
+ // src/components/icon-button/icon-button-styles.ts
205
+ var import_styled_components2 = __toESM(require("styled-components"), 1);
56
206
 
57
207
  // src/tokens/colors.ts
58
208
  var colors = {
@@ -142,54 +292,229 @@ var colors = {
142
292
  "red-600": "#DC2626"
143
293
  };
144
294
 
145
- // src/components/blocks/scrollable-table/scrollable-table-styles.ts
146
- var TableContainer = import_styled_components.default.div`
147
- position: relative;
148
- margin-block: 8px 16px;
149
- `;
150
- var TableScroll = import_styled_components.default.div`
151
- width: 100%;
152
- overflow-x: auto;
153
- overflow-y: hidden;
154
- `;
155
- var TableActionsWrapper = import_styled_components.default.div`
156
- display: flex;
157
- justify-content: flex-start;
158
- margin-block: 8px 0;
159
- `;
160
- var TableActionsDivider = import_styled_components.default.div`
161
- height: 1px;
162
- background: ${colors["brown-40"]};
163
- margin-block: 8px 0;
295
+ // src/components/icon-button/icon-button-styles.ts
296
+ var PADDING = {
297
+ short: {
298
+ small: "4px",
299
+ medium: "6px"
300
+ },
301
+ long: {
302
+ small: "4px 6px",
303
+ medium: "6px 10px"
304
+ }
305
+ };
306
+ var BORDER_RADIUS = {
307
+ small: 6,
308
+ medium: 10
309
+ };
310
+ var Button = import_styled_components2.default.button`
311
+ display: inline-flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
315
+ border: none;
316
+ border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
317
+ background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
318
+ color: ${colors["brown-100"]};
319
+ cursor: pointer;
320
+ transition: background-color 100ms ease;
321
+
322
+ &:hover {
323
+ background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
324
+ }
325
+
326
+ &:active {
327
+ background: ${colors["brown-40"]};
328
+ }
329
+
330
+ &:disabled {
331
+ color: ${colors["brown-50"]};
332
+ background: transparent;
333
+ cursor: not-allowed;
334
+ }
164
335
  `;
165
336
 
166
- // src/components/blocks/scrollable-table/scrollable-table.tsx
167
- var import_jsx_runtime = require("react/jsx-runtime");
168
- function ScrollableTable({ node: _node, counter, ...props }) {
169
- const currentIndex = counter ? counter.value : 0;
170
- if (counter) {
171
- counter.value += 1;
172
- }
173
- const { TableActions } = useBlockContext();
174
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableContainer, { children: [
175
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) }),
176
- TableActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
177
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActions, { tableIndex: currentIndex }) }),
178
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsDivider, {})
179
- ] })
180
- ] });
337
+ // src/components/icon-button/icon-button.tsx
338
+ var import_jsx_runtime3 = require("react/jsx-runtime");
339
+ var ICON_SIZE_BY_BUTTON_SIZE = {
340
+ small: 16,
341
+ medium: 20
342
+ };
343
+ var IconButton = (0, import_react3.forwardRef)(function IconButton2({
344
+ icon,
345
+ size = "small",
346
+ variant = "short",
347
+ isSelected = false,
348
+ disabled = false,
349
+ onClick,
350
+ className,
351
+ id,
352
+ as,
353
+ "aria-label": ariaLabel,
354
+ ...rest
355
+ }, ref) {
356
+ const isNativeButton = as === void 0 || as === "button";
357
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
358
+ Button,
359
+ {
360
+ ref,
361
+ className,
362
+ id,
363
+ as,
364
+ $size: size,
365
+ $variant: variant,
366
+ $isSelected: isSelected,
367
+ disabled,
368
+ onClick: disabled ? void 0 : onClick,
369
+ "aria-label": ariaLabel,
370
+ ...isNativeButton ? { type: "button" } : {},
371
+ ...rest,
372
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
373
+ }
374
+ );
375
+ });
376
+
377
+ // src/components/ui/tooltip.tsx
378
+ var React = __toESM(require("react"), 1);
379
+ var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
380
+ var import_jsx_runtime4 = require("react/jsx-runtime");
381
+ var TooltipProvider = TooltipPrimitive.Provider;
382
+ var Tooltip = TooltipPrimitive.Root;
383
+ var TooltipTrigger = TooltipPrimitive.Trigger;
384
+ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
385
+ TooltipPrimitive.Content,
386
+ {
387
+ ref,
388
+ sideOffset,
389
+ className: cn(
390
+ "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]",
391
+ className
392
+ ),
393
+ ...props
394
+ }
395
+ ));
396
+ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
397
+
398
+ // src/components/artifacts/artifact-download-button/artifact-download-button.tsx
399
+ var import_jsx_runtime5 = require("react/jsx-runtime");
400
+ var DEFAULT_LABEL = "Download CSV";
401
+ function ArtifactDownloadButton({
402
+ href,
403
+ label = DEFAULT_LABEL,
404
+ onClick
405
+ }) {
406
+ if (!isSafeDownloadUrl(href)) return null;
407
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
408
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
409
+ IconButton,
410
+ {
411
+ as: "a",
412
+ href,
413
+ download: true,
414
+ rel: "noopener noreferrer",
415
+ onClick,
416
+ icon: IconDownload,
417
+ size: "small",
418
+ "aria-label": label
419
+ }
420
+ ) }),
421
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { children: label })
422
+ ] }) });
423
+ }
424
+ function isSafeDownloadUrl(url) {
425
+ try {
426
+ const parsed = new URL(url);
427
+ return parsed.protocol === "https:" || parsed.protocol === "http:";
428
+ } catch {
429
+ return false;
430
+ }
181
431
  }
182
432
 
183
- // src/components/blocks/text-block/sanitize.ts
184
- function sanitize(text) {
185
- return text.split("\n").filter((line) => {
186
- const t = line.trim();
187
- return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
188
- }).join("\n");
433
+ // src/components/artifacts/status-message.tsx
434
+ var import_react4 = require("react");
435
+ function StatusMessage({ $tone, children }) {
436
+ return (0, import_react4.createElement)(
437
+ "div",
438
+ {
439
+ className: `py-6 px-2 text-center text-sm font-medium leading-5 ${$tone === "error" ? "text-red-600" : "text-brown-70"}`
440
+ },
441
+ children
442
+ );
189
443
  }
190
444
 
191
- // src/components/blocks/text-block/text-block-styles.ts
192
- var import_styled_components2 = __toESM(require("styled-components"), 1);
445
+ // src/components/chart/bar-chart/bar-chart.tsx
446
+ var import_react5 = require("react");
447
+ var import_recharts2 = require("recharts");
448
+
449
+ // src/components/chart/chart-container.tsx
450
+ var import_recharts = require("recharts");
451
+ var import_jsx_runtime6 = require("react/jsx-runtime");
452
+ function ChartContainer({
453
+ children,
454
+ height = 320,
455
+ width = "100%",
456
+ className,
457
+ style
458
+ }) {
459
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("text-xs text-foreground", className), style: { width, height, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children }) });
460
+ }
461
+
462
+ // src/components/chart/chart-legend-content.tsx
463
+ var import_jsx_runtime7 = require("react/jsx-runtime");
464
+ function ChartLegendContent({ payload, className, iconType = "square" }) {
465
+ if (!payload || payload.length === 0) return null;
466
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
467
+ "ul",
468
+ {
469
+ className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-brown-80", className),
470
+ children: payload.map((entry, i) => {
471
+ const swatchColor = typeof entry.color === "string" ? entry.color : "transparent";
472
+ const label = entry.value !== void 0 ? String(entry.value) : "";
473
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "flex items-center gap-1.5", children: [
474
+ iconType === "square" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatchColor } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-[3px] w-4 shrink-0 rounded-full", style: { background: swatchColor } }),
475
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
476
+ ] }, `${label}-${i}`);
477
+ })
478
+ }
479
+ );
480
+ }
481
+
482
+ // src/components/chart/chart-tooltip-content.tsx
483
+ var import_jsx_runtime8 = require("react/jsx-runtime");
484
+ function ChartTooltipContent({
485
+ active,
486
+ payload,
487
+ label,
488
+ className,
489
+ showLabel = true,
490
+ formatValue
491
+ }) {
492
+ if (!active || !payload || payload.length === 0) return null;
493
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
494
+ "div",
495
+ {
496
+ className: cn(
497
+ "rounded-lg border border-brown-40 bg-brown-10 px-3 py-2 text-xs shadow-sm",
498
+ "min-w-32 text-foreground",
499
+ className
500
+ ),
501
+ children: [
502
+ showLabel && label !== void 0 && label !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mb-1.5 font-medium text-brown-90", children: String(label) }) : null,
503
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-1", children: payload.map((entry, i) => {
504
+ const name = entry.name !== void 0 ? String(entry.name) : "";
505
+ const rawValue = entry.value;
506
+ const display = formatValue ? formatValue(rawValue, name) : rawValue === void 0 ? "" : String(rawValue);
507
+ const swatch = typeof entry.color === "string" ? entry.color : "transparent";
508
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "flex items-center gap-2", children: [
509
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatch } }),
510
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-brown-70", children: name }),
511
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-auto font-semibold tabular-nums text-brown-90", children: display })
512
+ ] }, `${name}-${i}`);
513
+ }) })
514
+ ]
515
+ }
516
+ );
517
+ }
193
518
 
194
519
  // src/tokens/typography.ts
195
520
  var fontFamilies = {
@@ -486,8 +811,1010 @@ function typographyMixin(type) {
486
811
  ].join(";\n ");
487
812
  }
488
813
 
814
+ // src/components/chart/chart-palette.ts
815
+ var CHART_PALETTE = [
816
+ colors["blue-600"],
817
+ // #2563EB — primary
818
+ colors["blue-400"],
819
+ // #60A5FA — mid
820
+ colors["blue-300"],
821
+ // #93C5FD — light
822
+ colors["blue-100"],
823
+ // #DBEAFE — very light
824
+ colors["indigo-400"],
825
+ // #818CF8
826
+ colors["indigo-500"],
827
+ // #6366F1
828
+ colors["indigo-600"],
829
+ // #4F46E5
830
+ colors["indigo-800"],
831
+ // #3730A3
832
+ colors["blue-800"]
833
+ // #1E40AF — deepest
834
+ ];
835
+ var OTHERS_SLICE_COLOR = colors["brown-60"];
836
+ var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
837
+ function isOthersCategory(value, labels) {
838
+ if (value === null || value === void 0) return false;
839
+ if (labels.length === 0) return false;
840
+ const normalized = String(value).trim().toLowerCase();
841
+ for (const label of labels) {
842
+ if (normalized === label.toLowerCase()) return true;
843
+ }
844
+ return false;
845
+ }
846
+ function colorForSeriesIndex(index, palette = CHART_PALETTE) {
847
+ return palette[index % palette.length] ?? CHART_PALETTE[0];
848
+ }
849
+
850
+ // src/components/chart/chart-styles.ts
851
+ var GRID_STROKE = colors["brown-40"];
852
+ var AXIS_STROKE = colors["brown-50"];
853
+ var AXIS_TICK_STYLE = {
854
+ fill: colors["brown-70"],
855
+ fontSize: 12,
856
+ fontWeight: 500
857
+ };
858
+ var CHART_VALUE_LABEL_STYLE = {
859
+ fill: colors["brown-70"],
860
+ fontSize: 12,
861
+ fontWeight: 500
862
+ };
863
+ var BAR_TOOLTIP_CURSOR_FILL = colors["brown-alpha-12"];
864
+ var LINE_ACTIVE_DOT_STROKE = colors["brown-10"];
865
+ var CHART_MARGIN = { top: 8, right: 16, left: 0, bottom: 4 };
866
+ var PIE_CHART_MARGIN = { top: 0, right: 24, left: 24, bottom: 4 };
867
+ var CHART_AXIS_PROPS = {
868
+ stroke: AXIS_STROKE,
869
+ tick: AXIS_TICK_STYLE,
870
+ tickLine: false,
871
+ axisLine: false
872
+ };
873
+ var CHART_GRID_PROPS = {
874
+ stroke: GRID_STROKE,
875
+ strokeDasharray: "3 3",
876
+ vertical: false
877
+ };
878
+
879
+ // src/components/chart/chart-tick-utils.ts
880
+ function maxTickCharsByCategoryCount(n) {
881
+ if (n <= 5) return 24;
882
+ if (n <= 8) return 14;
883
+ if (n <= 12) return 10;
884
+ if (n <= 16) return 7;
885
+ return 5;
886
+ }
887
+ function truncateLabel(value, maxChars) {
888
+ const s = String(value ?? "");
889
+ if (s.length <= maxChars) return s;
890
+ return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
891
+ }
892
+ function evenlyDistributedVisibleIndices(n, target) {
893
+ if (n <= target) {
894
+ return new Set(Array.from({ length: n }, (_, i) => i));
895
+ }
896
+ const set = /* @__PURE__ */ new Set();
897
+ const step = (n - 1) / (target - 1);
898
+ for (let i = 0; i < target; i++) {
899
+ set.add(Math.round(i * step));
900
+ }
901
+ return set;
902
+ }
903
+ function defaultBarTickFormatter(categoryCount) {
904
+ const max = maxTickCharsByCategoryCount(categoryCount);
905
+ return (value) => truncateLabel(value, max);
906
+ }
907
+ function defaultLineChartTickFormatter(categoryCount, visibleIndices) {
908
+ const max = maxTickCharsByCategoryCount(visibleIndices.size || categoryCount);
909
+ return (value, index) => {
910
+ if (!visibleIndices.has(index)) return "";
911
+ return truncateLabel(value, max);
912
+ };
913
+ }
914
+
915
+ // src/components/chart/coerce-numeric.ts
916
+ function coerceNumericColumns(rows, numericKeys) {
917
+ return rows.map((row) => {
918
+ const out = { ...row };
919
+ for (const k of numericKeys) {
920
+ const v = out[k];
921
+ if (v == null) continue;
922
+ const n = Number(v);
923
+ out[k] = Number.isFinite(n) ? n : NaN;
924
+ }
925
+ return out;
926
+ });
927
+ }
928
+
929
+ // src/components/chart/bar-chart/bar-chart.tsx
930
+ var import_jsx_runtime9 = require("react/jsx-runtime");
931
+ function BarChart({
932
+ data,
933
+ xKey,
934
+ series,
935
+ stacked = false,
936
+ height = 320,
937
+ width = "100%",
938
+ className,
939
+ palette = CHART_PALETTE,
940
+ showTooltip = true,
941
+ showLegend,
942
+ showGrid = true,
943
+ showXAxis = true,
944
+ showYAxis = true,
945
+ showValueLabels,
946
+ xAxisInterval = 0,
947
+ xAxisAngle,
948
+ xAxisTickFormatter
949
+ }) {
950
+ const seriesKeys = (0, import_react5.useMemo)(() => series.map((s) => s.key), [series]);
951
+ const coercedData = (0, import_react5.useMemo)(
952
+ () => coerceNumericColumns(data, seriesKeys),
953
+ [data, seriesKeys]
954
+ );
955
+ const resolvedShowLegend = showLegend ?? series.length > 1;
956
+ const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
957
+ const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
958
+ const resolvedTickFormatter = (0, import_react5.useMemo)(
959
+ () => xAxisTickFormatter ?? defaultBarTickFormatter(coercedData.length),
960
+ [xAxisTickFormatter, coercedData.length]
961
+ );
962
+ const angledLabelPad = resolvedAngle === 0 ? 0 : Math.min(Math.abs(resolvedAngle) * 0.7, 40);
963
+ const chartMargin = { ...CHART_MARGIN, bottom: CHART_MARGIN.bottom + angledLabelPad };
964
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_recharts2.BarChart, { data: coercedData, margin: chartMargin, barCategoryGap: "22%", children: [
965
+ showGrid ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
966
+ showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
967
+ import_recharts2.XAxis,
968
+ {
969
+ dataKey: xKey,
970
+ ...CHART_AXIS_PROPS,
971
+ interval: xAxisInterval,
972
+ angle: resolvedAngle,
973
+ textAnchor: resolvedAngle !== 0 ? "end" : "middle",
974
+ tickMargin: resolvedAngle === 0 ? 8 : 12,
975
+ height: resolvedAngle !== 0 ? 60 : void 0,
976
+ tickFormatter: resolvedTickFormatter
977
+ }
978
+ ) : null,
979
+ showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
980
+ showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartTooltipContent, {}) }) : null,
981
+ resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
982
+ import_recharts2.Legend,
983
+ {
984
+ verticalAlign: "top",
985
+ align: "center",
986
+ wrapperStyle: { top: 0 },
987
+ itemSorter: null,
988
+ content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartLegendContent, { iconType: "square" })
989
+ }
990
+ ) : null,
991
+ series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
992
+ import_recharts2.Bar,
993
+ {
994
+ dataKey: s.key,
995
+ name: s.label,
996
+ fill: colorForSeriesIndex(i, palette),
997
+ stackId: stacked ? "default" : s.key,
998
+ radius: barRadius(stacked, i, series.length),
999
+ children: resolvedShowValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_recharts2.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
1000
+ },
1001
+ s.key
1002
+ ))
1003
+ ] }) });
1004
+ }
1005
+ function barRadius(stacked, seriesIndex, seriesCount) {
1006
+ if (!stacked) return [6, 6, 0, 0];
1007
+ const isTopSegment = seriesIndex === seriesCount - 1;
1008
+ return isTopSegment ? [6, 6, 0, 0] : [0, 0, 0, 0];
1009
+ }
1010
+
1011
+ // src/components/artifacts/chart-artifact/chart-variant-services/constants.ts
1012
+ var VARIANT_CHART_HEIGHT = "100%";
1013
+
1014
+ // src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-component.tsx
1015
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1016
+ function BarChartVariantComponent({ config, rows }) {
1017
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1018
+ BarChart,
1019
+ {
1020
+ data: rows,
1021
+ xKey: config.xKey,
1022
+ series: config.series,
1023
+ stacked: config.stacked,
1024
+ height: VARIANT_CHART_HEIGHT
1025
+ }
1026
+ );
1027
+ }
1028
+
1029
+ // src/components/artifacts/chart-artifact/chart-variant-services/shared-column-keys.ts
1030
+ function seriesBasedColumnKeys(config) {
1031
+ return [config.xKey, ...config.series.map((s) => s.key)];
1032
+ }
1033
+ function pieColumnKeys(config) {
1034
+ return [config.categoryKey, config.valueKey];
1035
+ }
1036
+
1037
+ // src/components/artifacts/chart-artifact/chart-variant-services/shared-validators.ts
1038
+ function isValidChartSeries(series) {
1039
+ if (!series || typeof series !== "object") return false;
1040
+ const candidate = series;
1041
+ if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
1042
+ if (typeof candidate.label !== "string") return false;
1043
+ return true;
1044
+ }
1045
+
1046
+ // src/components/artifacts/chart-artifact/chart-variant-services/bar-chart-variant-service.tsx
1047
+ function isValidBarChartConfig(config) {
1048
+ if (!config || typeof config !== "object") return false;
1049
+ const candidate = config;
1050
+ if (candidate.variant !== "BAR") return false;
1051
+ if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
1052
+ if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
1053
+ if (!candidate.series.every(isValidChartSeries)) return false;
1054
+ return true;
1055
+ }
1056
+ var BarChartVariantService = {
1057
+ variant: "BAR",
1058
+ isValidConfig: isValidBarChartConfig,
1059
+ columnKeys: seriesBasedColumnKeys,
1060
+ Component: BarChartVariantComponent
1061
+ };
1062
+
1063
+ // src/components/chart/line-chart/line-chart.tsx
1064
+ var import_react6 = require("react");
1065
+ var import_recharts3 = require("recharts");
1066
+ var import_jsx_runtime11 = require("react/jsx-runtime");
1067
+ var TARGET_VISIBLE_LABELS = 5;
1068
+ function LineChart({
1069
+ data,
1070
+ xKey,
1071
+ series,
1072
+ smooth = true,
1073
+ showDots = true,
1074
+ strokeWidth = 2,
1075
+ height = 320,
1076
+ width = "100%",
1077
+ className,
1078
+ palette = CHART_PALETTE,
1079
+ showTooltip = true,
1080
+ showLegend,
1081
+ showGrid = true,
1082
+ showXAxis = true,
1083
+ showYAxis = true,
1084
+ showValueLabels = false,
1085
+ xAxisInterval = 0,
1086
+ xAxisAngle = 0,
1087
+ xAxisTickFormatter
1088
+ }) {
1089
+ const seriesKeys = (0, import_react6.useMemo)(() => series.map((s) => s.key), [series]);
1090
+ const coercedData = (0, import_react6.useMemo)(
1091
+ () => coerceNumericColumns(data, seriesKeys),
1092
+ [data, seriesKeys]
1093
+ );
1094
+ const lineType = smooth ? "monotone" : "linear";
1095
+ const resolvedShowLegend = showLegend ?? series.length > 1;
1096
+ const resolvedTickFormatter = (0, import_react6.useMemo)(() => {
1097
+ if (xAxisTickFormatter) return xAxisTickFormatter;
1098
+ const visible = evenlyDistributedVisibleIndices(coercedData.length, TARGET_VISIBLE_LABELS);
1099
+ return defaultLineChartTickFormatter(coercedData.length, visible);
1100
+ }, [xAxisTickFormatter, coercedData.length]);
1101
+ const angledLabelPad = xAxisAngle === 0 ? 0 : Math.min(Math.abs(xAxisAngle) * 0.7, 40);
1102
+ const chartMargin = { ...CHART_MARGIN, right: CHART_MARGIN.right + 16, bottom: CHART_MARGIN.bottom + angledLabelPad };
1103
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_recharts3.LineChart, { data: coercedData, margin: chartMargin, children: [
1104
+ showGrid ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
1105
+ showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1106
+ import_recharts3.XAxis,
1107
+ {
1108
+ dataKey: xKey,
1109
+ ...CHART_AXIS_PROPS,
1110
+ interval: xAxisInterval,
1111
+ angle: xAxisAngle,
1112
+ textAnchor: xAxisAngle !== 0 ? "end" : "middle",
1113
+ tickMargin: xAxisAngle === 0 ? 8 : 12,
1114
+ height: xAxisAngle !== 0 ? 60 : void 0,
1115
+ tickFormatter: resolvedTickFormatter
1116
+ }
1117
+ ) : null,
1118
+ showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
1119
+ showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartTooltipContent, {}) }) : null,
1120
+ resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1121
+ import_recharts3.Legend,
1122
+ {
1123
+ verticalAlign: "top",
1124
+ align: "center",
1125
+ wrapperStyle: { top: 0 },
1126
+ itemSorter: null,
1127
+ content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartLegendContent, { iconType: "line" })
1128
+ }
1129
+ ) : null,
1130
+ series.map((s, i) => {
1131
+ const color = colorForSeriesIndex(i, palette);
1132
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1133
+ import_recharts3.Line,
1134
+ {
1135
+ type: lineType,
1136
+ dataKey: s.key,
1137
+ name: s.label,
1138
+ stroke: color,
1139
+ strokeWidth,
1140
+ dot: showDots ? { r: 3, fill: color, stroke: color, strokeWidth: 0 } : false,
1141
+ activeDot: { r: 5, fill: color, stroke: LINE_ACTIVE_DOT_STROKE, strokeWidth: 2 },
1142
+ children: showValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts3.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
1143
+ },
1144
+ s.key
1145
+ );
1146
+ })
1147
+ ] }) });
1148
+ }
1149
+
1150
+ // src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-component.tsx
1151
+ var import_jsx_runtime12 = require("react/jsx-runtime");
1152
+ function LineChartVariantComponent({ config, rows }) {
1153
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LineChart, { data: rows, xKey: config.xKey, series: config.series, height: VARIANT_CHART_HEIGHT });
1154
+ }
1155
+
1156
+ // src/components/artifacts/chart-artifact/chart-variant-services/line-chart-variant-service.tsx
1157
+ function isValidLineChartConfig(config) {
1158
+ if (!config || typeof config !== "object") return false;
1159
+ const candidate = config;
1160
+ if (candidate.variant !== "LINE") return false;
1161
+ if (typeof candidate.xKey !== "string" || candidate.xKey.length === 0) return false;
1162
+ if (!Array.isArray(candidate.series) || candidate.series.length === 0) return false;
1163
+ if (!candidate.series.every(isValidChartSeries)) return false;
1164
+ return true;
1165
+ }
1166
+ var LineChartVariantService = {
1167
+ variant: "LINE",
1168
+ isValidConfig: isValidLineChartConfig,
1169
+ columnKeys: seriesBasedColumnKeys,
1170
+ Component: LineChartVariantComponent
1171
+ };
1172
+
1173
+ // src/components/chart/pie-chart/pie-chart.tsx
1174
+ var import_react7 = require("react");
1175
+ var import_recharts4 = require("recharts");
1176
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1177
+ function PieChart({
1178
+ data,
1179
+ categoryKey,
1180
+ valueKey,
1181
+ height = 320,
1182
+ width = "100%",
1183
+ className,
1184
+ palette = CHART_PALETTE,
1185
+ showLabels = true,
1186
+ showTooltip = true,
1187
+ showLegend = true,
1188
+ innerRadius = 0,
1189
+ outerRadius = "68%",
1190
+ othersCategoryLabels = DEFAULT_OTHERS_CATEGORY_LABELS
1191
+ }) {
1192
+ const { orderedData, sliceColors } = (0, import_react7.useMemo)(() => {
1193
+ const coerced = coerceNumericColumns(data, [valueKey]);
1194
+ const namedRows = [];
1195
+ const namedColors = [];
1196
+ const othersRows = [];
1197
+ const othersColors = [];
1198
+ for (const row of coerced) {
1199
+ if (isOthersCategory(row[categoryKey], othersCategoryLabels)) {
1200
+ othersRows.push(row);
1201
+ othersColors.push(OTHERS_SLICE_COLOR);
1202
+ } else {
1203
+ namedRows.push(row);
1204
+ namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
1205
+ }
1206
+ }
1207
+ return {
1208
+ orderedData: [...namedRows, ...othersRows],
1209
+ sliceColors: [...namedColors, ...othersColors]
1210
+ };
1211
+ }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
1212
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_recharts4.PieChart, { margin: PIE_CHART_MARGIN, children: [
1213
+ showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartTooltipContent, {}) }) : null,
1214
+ showLegend ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1215
+ import_recharts4.Legend,
1216
+ {
1217
+ verticalAlign: "top",
1218
+ align: "center",
1219
+ wrapperStyle: { top: 0 },
1220
+ itemSorter: null,
1221
+ content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartLegendContent, { iconType: "square" })
1222
+ }
1223
+ ) : null,
1224
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1225
+ import_recharts4.Pie,
1226
+ {
1227
+ data: orderedData,
1228
+ dataKey: valueKey,
1229
+ nameKey: categoryKey,
1230
+ cx: "50%",
1231
+ cy: "52%",
1232
+ startAngle: 90,
1233
+ endAngle: -270,
1234
+ innerRadius,
1235
+ outerRadius,
1236
+ label: showLabels ? (entry) => {
1237
+ const v = entry.value;
1238
+ if (v === void 0 || v === null) return null;
1239
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1240
+ "text",
1241
+ {
1242
+ x: entry.x,
1243
+ y: entry.y,
1244
+ fill: CHART_VALUE_LABEL_STYLE.fill,
1245
+ fontSize: CHART_VALUE_LABEL_STYLE.fontSize,
1246
+ fontWeight: CHART_VALUE_LABEL_STYLE.fontWeight,
1247
+ textAnchor: entry.textAnchor,
1248
+ dominantBaseline: "central",
1249
+ children: String(v)
1250
+ }
1251
+ );
1252
+ } : false,
1253
+ labelLine: false,
1254
+ stroke: "none",
1255
+ strokeWidth: 0,
1256
+ children: orderedData.map((_row, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts4.Cell, { fill: sliceColors[i] }, i))
1257
+ }
1258
+ )
1259
+ ] }) });
1260
+ }
1261
+
1262
+ // src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-component.tsx
1263
+ var import_jsx_runtime14 = require("react/jsx-runtime");
1264
+ function PieChartVariantComponent({
1265
+ config,
1266
+ rows,
1267
+ labels
1268
+ }) {
1269
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1270
+ PieChart,
1271
+ {
1272
+ data: rows,
1273
+ categoryKey: config.categoryKey,
1274
+ valueKey: config.valueKey,
1275
+ othersCategoryLabels: labels.othersCategoryLabels,
1276
+ height: VARIANT_CHART_HEIGHT
1277
+ }
1278
+ );
1279
+ }
1280
+
1281
+ // src/components/artifacts/chart-artifact/chart-variant-services/pie-chart-variant-service.tsx
1282
+ function isValidPieChartConfig(config) {
1283
+ if (!config || typeof config !== "object") return false;
1284
+ const candidate = config;
1285
+ if (candidate.variant !== "PIE") return false;
1286
+ if (typeof candidate.categoryKey !== "string" || candidate.categoryKey.length === 0) return false;
1287
+ if (typeof candidate.valueKey !== "string" || candidate.valueKey.length === 0) return false;
1288
+ if (!Array.isArray(candidate.series)) return false;
1289
+ return true;
1290
+ }
1291
+ var PieChartVariantService = {
1292
+ variant: "PIE",
1293
+ isValidConfig: isValidPieChartConfig,
1294
+ columnKeys: pieColumnKeys,
1295
+ Component: PieChartVariantComponent
1296
+ };
1297
+
1298
+ // src/components/artifacts/chart-artifact/chart-variant-services/index.ts
1299
+ var ChartVariantServices = {
1300
+ LINE: LineChartVariantService,
1301
+ BAR: BarChartVariantService,
1302
+ PIE: PieChartVariantService
1303
+ };
1304
+
1305
+ // src/components/artifacts/chart-artifact/chart-artifact-content.tsx
1306
+ var import_jsx_runtime15 = require("react/jsx-runtime");
1307
+ function ChartArtifactContent({ config, rows, labels }) {
1308
+ const service = ChartVariantServices[config.variant];
1309
+ if (!service) {
1310
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
1311
+ }
1312
+ const Component = service.Component;
1313
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component, { config, rows, labels });
1314
+ }
1315
+
1316
+ // src/components/artifacts/parse-csv.ts
1317
+ var import_papaparse = __toESM(require("papaparse"), 1);
1318
+ function parseCsv(text, columns) {
1319
+ const result = import_papaparse.default.parse(text, {
1320
+ header: true,
1321
+ skipEmptyLines: true,
1322
+ dynamicTyping: false
1323
+ });
1324
+ const csvHeaders = new Set(result.meta?.fields ?? []);
1325
+ const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
1326
+ if (presentColumns.length === 0) return [];
1327
+ return result.data.map((rawRow) => {
1328
+ const row = {};
1329
+ for (const column of presentColumns) {
1330
+ const value = rawRow[column.key];
1331
+ row[column.key] = value === void 0 || value === "" ? null : value;
1332
+ }
1333
+ return row;
1334
+ });
1335
+ }
1336
+
1337
+ // src/components/artifacts/use-rows-artifact-data.ts
1338
+ var import_react8 = require("react");
1339
+ var LOADING = { status: "loading", rows: null, error: null };
1340
+ var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
1341
+ var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
1342
+ function columnsFingerprint(columns) {
1343
+ return columns.map((c) => c.key).join("|");
1344
+ }
1345
+ function scrubUrl(url) {
1346
+ const q = url.indexOf("?");
1347
+ return q === -1 ? url : `${url.slice(0, q)}?<redacted>`;
1348
+ }
1349
+ function useRowsArtifactData(presignedUrl, columns, parse) {
1350
+ const colsKey = (0, import_react8.useMemo)(() => columnsFingerprint(columns), [columns]);
1351
+ const safeUrl = presignedUrl && isSafeDownloadUrl(presignedUrl) ? presignedUrl : null;
1352
+ const cacheKey = safeUrl ? `${safeUrl}::${colsKey}` : null;
1353
+ const [state, setState] = (0, import_react8.useState)(INITIAL_INTERNAL);
1354
+ (0, import_react8.useEffect)(() => {
1355
+ if (!safeUrl) return;
1356
+ const controller = new AbortController();
1357
+ fetch(safeUrl, {
1358
+ signal: controller.signal,
1359
+ headers: { Accept: "text/csv" },
1360
+ // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
1361
+ // omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
1362
+ // session cookies or auth headers.
1363
+ credentials: "omit"
1364
+ }).then(async (response) => {
1365
+ if (!response.ok) throw new Error(`Failed to load artifact data (${response.status})`);
1366
+ return response.text();
1367
+ }).then((text) => {
1368
+ if (controller.signal.aborted) return;
1369
+ try {
1370
+ const rows = parse(text, columns);
1371
+ setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
1372
+ } catch (parseError) {
1373
+ const err = parseError instanceof Error ? parseError : new Error(String(parseError));
1374
+ console.error("[ArtifactData] CSV parse failed:", err.message);
1375
+ setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
1376
+ }
1377
+ }).catch((error) => {
1378
+ if (controller.signal.aborted) return;
1379
+ const err = error instanceof Error ? error : new Error(String(error));
1380
+ console.error(`[ArtifactData] Fetch failed [${scrubUrl(safeUrl)}]:`, err.message);
1381
+ setState({ cacheKey: `${safeUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
1382
+ });
1383
+ return () => {
1384
+ controller.abort();
1385
+ };
1386
+ }, [safeUrl, colsKey]);
1387
+ if (!safeUrl) return UNAVAILABLE;
1388
+ if (state.cacheKey !== cacheKey) return LOADING;
1389
+ return state.data;
1390
+ }
1391
+
1392
+ // src/components/artifacts/chart-artifact/use-chart-artifact-data.ts
1393
+ function useChartArtifactData(presignedUrl, config) {
1394
+ const service = ChartVariantServices[config.variant];
1395
+ const keys = service ? service.columnKeys(config) : [];
1396
+ const columns = keys.map((key) => ({ key }));
1397
+ return useRowsArtifactData(presignedUrl, columns, parseCsv);
1398
+ }
1399
+
1400
+ // src/components/artifacts/chart-artifact/validate.ts
1401
+ function isValidChartConfig(config) {
1402
+ if (!config || typeof config !== "object") return false;
1403
+ const variant = config.variant;
1404
+ if (typeof variant !== "string") return false;
1405
+ const service = ChartVariantServices[variant];
1406
+ if (!service) return false;
1407
+ return service.isValidConfig(config);
1408
+ }
1409
+
1410
+ // src/components/artifacts/chart-artifact/chart-artifact.tsx
1411
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1412
+ var TITLE_CLASSES = "text-sm font-semibold text-foreground";
1413
+ var CHART_HEIGHT = 320;
1414
+ function ChartArtifact({ artifact, labels, callbacks }) {
1415
+ const validConfig = isValidChartConfig(artifact.config);
1416
+ (0, import_react9.useEffect)(() => {
1417
+ if (validConfig) return;
1418
+ console.warn("[clay] ChartArtifact: malformed `config` \u2014 skipping render.");
1419
+ }, [validConfig]);
1420
+ const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
1421
+ const resolvedLabels = (0, import_react9.useMemo)(
1422
+ () => ({ ...DEFAULT_CHART_ARTIFACT_LABELS, ...labels?.[artifactTypes.CHART] ?? {} }),
1423
+ [labels]
1424
+ );
1425
+ const data = useChartArtifactData(
1426
+ validConfig ? presignedUrl : null,
1427
+ validConfig ? artifact.config : { variant: "LINE", series: [], xKey: "x" }
1428
+ );
1429
+ const onDownload = callbacks?.[artifactTypes.CHART]?.onDownload;
1430
+ const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
1431
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
1432
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
1433
+ artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", {}),
1434
+ presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactDownloadButton, { href: presignedUrl, label: resolvedLabels.download, onClick: handleDownloadClick }) }) : null
1435
+ ] }),
1436
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1437
+ ArtifactContent,
1438
+ {
1439
+ className: "p-4 overflow-visible flex flex-none items-center justify-center",
1440
+ style: { height: CHART_HEIGHT },
1441
+ children: renderBody(validConfig, artifact, data, resolvedLabels)
1442
+ }
1443
+ )
1444
+ ] });
1445
+ }
1446
+ function renderBody(validConfig, artifact, data, labels) {
1447
+ if (!validConfig) {
1448
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
1449
+ }
1450
+ if (data.status === "error") {
1451
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "error", children: labels.loadError });
1452
+ }
1453
+ if (data.status === "unavailable") {
1454
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
1455
+ }
1456
+ if (data.status === "loading") {
1457
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.loading });
1458
+ }
1459
+ if (data.rows.length === 0) {
1460
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatusMessage, { $tone: "info", children: labels.empty });
1461
+ }
1462
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartArtifactContent, { config: artifact.config, rows: data.rows, labels });
1463
+ }
1464
+
1465
+ // src/components/artifacts/chart-artifact/to-clipboard-text.ts
1466
+ function chartArtifactToClipboardText(artifact) {
1467
+ const trimmedTitle = artifact.title?.trim();
1468
+ return trimmedTitle || "Chart";
1469
+ }
1470
+
1471
+ // src/components/artifacts/artifact-services/chart-artifact-service.ts
1472
+ var ChartArtifactService = {
1473
+ type: artifactTypes.CHART,
1474
+ Component: ChartArtifact,
1475
+ toClipboardText: chartArtifactToClipboardText
1476
+ };
1477
+
1478
+ // src/components/artifacts/table-artifact/table-artifact.tsx
1479
+ var import_react11 = require("react");
1480
+
1481
+ // src/components/ui/table.tsx
1482
+ var React2 = __toESM(require("react"), 1);
1483
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1484
+ var Table = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) }));
1485
+ Table.displayName = "Table";
1486
+ var TableHeader = React2.forwardRef(
1487
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
1488
+ );
1489
+ TableHeader.displayName = "TableHeader";
1490
+ var TableBody = React2.forwardRef(
1491
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
1492
+ );
1493
+ TableBody.displayName = "TableBody";
1494
+ var TableFooter = React2.forwardRef(
1495
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
1496
+ );
1497
+ TableFooter.displayName = "TableFooter";
1498
+ var TableRow = React2.forwardRef(
1499
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1500
+ "tr",
1501
+ {
1502
+ ref,
1503
+ className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
1504
+ ...props
1505
+ }
1506
+ )
1507
+ );
1508
+ TableRow.displayName = "TableRow";
1509
+ var TableHead = React2.forwardRef(
1510
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1511
+ "th",
1512
+ {
1513
+ ref,
1514
+ className: cn(
1515
+ "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
1516
+ className
1517
+ ),
1518
+ ...props
1519
+ }
1520
+ )
1521
+ );
1522
+ TableHead.displayName = "TableHead";
1523
+ var TableCell = React2.forwardRef(
1524
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
1525
+ );
1526
+ TableCell.displayName = "TableCell";
1527
+ var TableCaption = React2.forwardRef(
1528
+ ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
1529
+ );
1530
+ TableCaption.displayName = "TableCaption";
1531
+
1532
+ // src/components/table/use-scroll-shadow.ts
1533
+ var import_react10 = require("react");
1534
+ function useScrollShadow() {
1535
+ const targetRef = (0, import_react10.useRef)(null);
1536
+ const [isScrolled, setIsScrolled] = (0, import_react10.useState)(false);
1537
+ (0, import_react10.useEffect)(() => {
1538
+ const target = targetRef.current;
1539
+ if (!target) return;
1540
+ let scrollContainer = target;
1541
+ while (scrollContainer) {
1542
+ const overflowY = getComputedStyle(scrollContainer).overflowY;
1543
+ if (overflowY === "auto" || overflowY === "scroll") break;
1544
+ scrollContainer = scrollContainer.parentElement;
1545
+ }
1546
+ if (!scrollContainer) return;
1547
+ setIsScrolled(scrollContainer.scrollTop > 0);
1548
+ const handleScroll = () => {
1549
+ if (!scrollContainer) return;
1550
+ setIsScrolled(scrollContainer.scrollTop > 0);
1551
+ };
1552
+ scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
1553
+ return () => scrollContainer.removeEventListener("scroll", handleScroll);
1554
+ }, []);
1555
+ return { targetRef, isScrolled };
1556
+ }
1557
+
1558
+ // src/components/artifacts/table-artifact/table-artifact-content.constants.ts
1559
+ var TABLE_STATUS = {
1560
+ LOADING: "loading",
1561
+ READY: "ready",
1562
+ ERROR: "error",
1563
+ UNAVAILABLE: "unavailable"
1564
+ };
1565
+
1566
+ // src/components/artifacts/table-artifact/table-artifact-content.utils.ts
1567
+ function formatCell(row, column) {
1568
+ return row[column.key] ?? "";
1569
+ }
1570
+ var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
1571
+ var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
1572
+ var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
1573
+ var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
1574
+ var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
1575
+
1576
+ // src/components/artifacts/table-artifact/table-artifact-content.tsx
1577
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1578
+ function TableArtifactContent({
1579
+ columns,
1580
+ data,
1581
+ knownRowCount,
1582
+ maxShimmerRows,
1583
+ maxBodyHeight,
1584
+ labels
1585
+ }) {
1586
+ if (data.status === TABLE_STATUS.ERROR) {
1587
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "error", children: labels.loadError });
1588
+ }
1589
+ if (data.status === TABLE_STATUS.UNAVAILABLE) {
1590
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "info", children: labels.unavailable });
1591
+ }
1592
+ if (data.status === TABLE_STATUS.LOADING) {
1593
+ if (typeof knownRowCount === "number" && knownRowCount > 0) {
1594
+ const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
1595
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
1596
+ }
1597
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusMessage, { $tone: "info", children: labels.loading });
1598
+ }
1599
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length, labels.empty) : renderDataRows(columns, data.rows) });
1600
+ }
1601
+ function ArtifactTable({ columns, maxBodyHeight, children }) {
1602
+ const { targetRef, isScrolled } = useScrollShadow();
1603
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Table, { containerClassName: "overflow-visible", children: [
1604
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1605
+ TableHeader,
1606
+ {
1607
+ "data-scrolled": isScrolled ? "true" : void 0,
1608
+ className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
1609
+ style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
1610
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
1611
+ }
1612
+ ),
1613
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableBody, { children })
1614
+ ] }) });
1615
+ }
1616
+ function renderShimmerRows(columns, count) {
1617
+ return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
1618
+ }
1619
+ function renderDataRows(columns, rows) {
1620
+ return rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
1621
+ }
1622
+ function renderEmptyRow(colSpan, emptyMessage) {
1623
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) });
1624
+ }
1625
+
1626
+ // src/components/artifacts/table-artifact/use-table-artifact-data.ts
1627
+ function useTableArtifactData(presignedUrl, columns) {
1628
+ return useRowsArtifactData(presignedUrl, columns, parseCsv);
1629
+ }
1630
+
1631
+ // src/components/artifacts/table-artifact/validate.ts
1632
+ function isValidTableConfig(config) {
1633
+ if (!config || typeof config !== "object") return false;
1634
+ const candidate = config;
1635
+ if (!Array.isArray(candidate.columns)) return false;
1636
+ if (candidate.columns.length === 0) return false;
1637
+ return candidate.columns.every(isValidTableColumn);
1638
+ }
1639
+ function isValidTableColumn(column) {
1640
+ if (!column || typeof column !== "object") return false;
1641
+ const candidate = column;
1642
+ if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
1643
+ if (typeof candidate.label !== "string") return false;
1644
+ return true;
1645
+ }
1646
+
1647
+ // src/components/artifacts/table-artifact/table-artifact.tsx
1648
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1649
+ var TITLE_CLASSES2 = "text-sm font-semibold text-foreground";
1650
+ var TABLE_MAX_BODY_HEIGHT = 480;
1651
+ var MAX_SHIMMER_ROWS = 10;
1652
+ function TableArtifact({ artifact, labels, callbacks }) {
1653
+ const validConfig = isValidTableConfig(artifact.config);
1654
+ const validColumns = validConfig ? artifact.config.columns : null;
1655
+ (0, import_react11.useEffect)(() => {
1656
+ if (validConfig) return;
1657
+ console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
1658
+ }, [validConfig]);
1659
+ const resolvedLabels = (0, import_react11.useMemo)(
1660
+ () => ({ ...DEFAULT_TABLE_ARTIFACT_LABELS, ...labels?.[artifactTypes.TABLE] ?? {} }),
1661
+ [labels]
1662
+ );
1663
+ const data = useTableArtifactData(
1664
+ validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
1665
+ validColumns ?? []
1666
+ );
1667
+ const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
1668
+ const onDownload = callbacks?.[artifactTypes.TABLE]?.onDownload;
1669
+ const handleDownloadClick = onDownload ? () => onDownload(artifact) : void 0;
1670
+ if (!validConfig || !validColumns) {
1671
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
1672
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
1673
+ artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
1674
+ presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1675
+ ArtifactDownloadButton,
1676
+ {
1677
+ href: presignedUrl,
1678
+ label: resolvedLabels.download,
1679
+ onClick: handleDownloadClick
1680
+ }
1681
+ ) }) : null
1682
+ ] }),
1683
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusMessage, { $tone: "info", children: resolvedLabels.unavailable }) })
1684
+ ] });
1685
+ }
1686
+ return (
1687
+ // The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
1688
+ // Disable the outer overflow container so only one scroll context exists — this prevents
1689
+ // double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
1690
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
1691
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
1692
+ artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactTitle, { className: TITLE_CLASSES2, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
1693
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1694
+ ArtifactDownloadButton,
1695
+ {
1696
+ href: presignedUrl ?? "",
1697
+ label: resolvedLabels.download,
1698
+ onClick: handleDownloadClick
1699
+ }
1700
+ ) })
1701
+ ] }),
1702
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1703
+ TableArtifactContent,
1704
+ {
1705
+ columns: validColumns,
1706
+ data,
1707
+ knownRowCount: artifact.config.stats?.rowCount,
1708
+ maxShimmerRows: MAX_SHIMMER_ROWS,
1709
+ maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
1710
+ labels: resolvedLabels
1711
+ }
1712
+ ) })
1713
+ ] })
1714
+ );
1715
+ }
1716
+
1717
+ // src/components/artifacts/table-artifact/to-clipboard-text.ts
1718
+ function tableArtifactToClipboardText(artifact) {
1719
+ const trimmedTitle = artifact.title?.trim();
1720
+ return trimmedTitle || "Table";
1721
+ }
1722
+
1723
+ // src/components/artifacts/artifact-services/table-artifact-service.ts
1724
+ var TableArtifactService = {
1725
+ type: artifactTypes.TABLE,
1726
+ Component: TableArtifact,
1727
+ toClipboardText: tableArtifactToClipboardText
1728
+ };
1729
+
1730
+ // src/components/artifacts/artifact-services/index.ts
1731
+ var ArtifactServices = {
1732
+ [artifactTypes.TABLE]: TableArtifactService,
1733
+ [artifactTypes.CHART]: ChartArtifactService
1734
+ };
1735
+ function artifactToClipboardText(artifact) {
1736
+ const entry = ArtifactServices[artifact.type];
1737
+ if (!entry) {
1738
+ return `[Artifact: ${artifact.title ?? artifact.type}]`;
1739
+ }
1740
+ return entry.toClipboardText(artifact);
1741
+ }
1742
+
1743
+ // src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
1744
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1745
+ function ArtifactRefBlock({ block }) {
1746
+ const { artifact, labels, callbacks } = block.payload;
1747
+ const entry = ArtifactServices[artifact.type];
1748
+ if (!entry) return null;
1749
+ const { Component } = entry;
1750
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Component, { artifact, labels, callbacks });
1751
+ }
1752
+
1753
+ // src/components/blocks/block-services/artifact-ref-block-service.ts
1754
+ var ArtifactRefBlockService = {
1755
+ type: blockTypes.ARTIFACT_REF,
1756
+ Component: ArtifactRefBlock,
1757
+ /**
1758
+ * Delegates to the registered artifact component's `toClipboardText`. Falls back to
1759
+ * `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type
1760
+ * has no registered component, so copy never silently produces an empty string.
1761
+ */
1762
+ toClipboardText: (block) => artifactToClipboardText(block.payload.artifact)
1763
+ };
1764
+
1765
+ // src/utils/markdown-to-plain-text.ts
1766
+ var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
1767
+ var PLACEHOLDER_SUFFIX = "\u200B\u200B";
1768
+ var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
1769
+ function stripInlineMarks(text) {
1770
+ return text.replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_(.+?)_/g, "$1").replace(/~~(.+?)~~/g, "$1");
1771
+ }
1772
+ function markdownToPlainText(markdown) {
1773
+ if (!markdown) return "";
1774
+ const inlineCodeSnippets = [];
1775
+ let result = markdown.replace(/^<!--[\s\S]*?--!?>\n?/gm, "").replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
1776
+ inlineCodeSnippets.push(code);
1777
+ return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
1778
+ }).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "");
1779
+ result = stripInlineMarks(result).replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>\s?/gm, "").replace(/^\|[-:\s|]+\|\s*$/gm, "").replace(/^\|\s?/gm, "").replace(/\s?\|$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
1780
+ result = result.replace(PLACEHOLDER_REGEX, (_match, index) => inlineCodeSnippets[Number(index)]);
1781
+ return result;
1782
+ }
1783
+
1784
+ // src/components/blocks/text-block/text-block.tsx
1785
+ var import_react_markdown = __toESM(require("react-markdown"), 1);
1786
+ var import_remark_breaks = __toESM(require("remark-breaks"), 1);
1787
+ var import_remark_gfm = __toESM(require("remark-gfm"), 1);
1788
+
1789
+ // src/components/blocks/scrollable-table/scrollable-table-styles.ts
1790
+ var import_styled_components3 = __toESM(require("styled-components"), 1);
1791
+ var TableContainer = import_styled_components3.default.div`
1792
+ position: relative;
1793
+ margin-block: 8px 16px;
1794
+ `;
1795
+ var TableScroll = import_styled_components3.default.div`
1796
+ width: 100%;
1797
+ overflow-x: auto;
1798
+ overflow-y: hidden;
1799
+ `;
1800
+
1801
+ // src/components/blocks/scrollable-table/scrollable-table.tsx
1802
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1803
+ function ScrollableTable({ node: _node, ...props }) {
1804
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("table", { ...props }) }) });
1805
+ }
1806
+
1807
+ // src/components/blocks/text-block/sanitize.ts
1808
+ function sanitize(text) {
1809
+ return text.split("\n").filter((line) => {
1810
+ const t = line.trim();
1811
+ return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
1812
+ }).join("\n");
1813
+ }
1814
+
489
1815
  // src/components/blocks/text-block/text-block-styles.ts
490
- var TextBlockWrapper = import_styled_components2.default.div`
1816
+ var import_styled_components4 = __toESM(require("styled-components"), 1);
1817
+ var TextBlockWrapper = import_styled_components4.default.div`
491
1818
  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
492
1819
  color: ${colors["brown-100"]};
493
1820
  word-break: break-word;
@@ -605,41 +1932,51 @@ var TextBlockWrapper = import_styled_components2.default.div`
605
1932
  `;
606
1933
 
607
1934
  // src/components/blocks/text-block/text-block.tsx
608
- var import_jsx_runtime2 = require("react/jsx-runtime");
1935
+ var import_jsx_runtime22 = require("react/jsx-runtime");
1936
+ var markdownComponents = {
1937
+ table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScrollableTable, { ...tableProps }))
1938
+ };
609
1939
  function TextBlock({ block }) {
610
- const counter = { value: 0 };
611
- const markdownComponents = {
612
- table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollableTable, { ...tableProps, counter }))
613
- };
614
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
1940
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
615
1941
  }
616
1942
 
617
- // src/components/blocks/types.ts
618
- var blockTypes = {
619
- TEXT: "TEXT"
620
- };
621
-
622
1943
  // src/components/blocks/block-services/text-block-service.ts
623
1944
  var TextBlockService = {
624
1945
  type: blockTypes.TEXT,
625
- Component: TextBlock
1946
+ Component: TextBlock,
1947
+ /**
1948
+ * Converts the block's markdown source to plain text so the final clipboard value is clean
1949
+ * when pasted into tools that don't render markdown. Each block type owns its own clipboard
1950
+ * conversion so `useCopyToClipboard` can write text verbatim without a second pass.
1951
+ */
1952
+ toClipboardText: (block) => markdownToPlainText(block.payload.text)
626
1953
  };
627
1954
 
628
1955
  // src/components/blocks/block-services/index.ts
629
1956
  var BlockServices = {
630
- [TextBlockService.type]: TextBlockService
1957
+ [blockTypes.TEXT]: TextBlockService,
1958
+ [blockTypes.ARTIFACT_REF]: ArtifactRefBlockService
631
1959
  };
632
1960
 
633
1961
  // src/components/blocks/block/block.tsx
634
- var import_jsx_runtime3 = require("react/jsx-runtime");
1962
+ var import_jsx_runtime23 = require("react/jsx-runtime");
635
1963
  function Block({ block }) {
636
1964
  const service = BlockServices[block.type];
637
1965
  if (!service) return null;
638
1966
  const { Component } = service;
639
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { block });
1967
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, { block });
1968
+ }
1969
+
1970
+ // src/components/blocks/block-context/block-context.tsx
1971
+ var import_react12 = require("react");
1972
+ var BlockContext = (0, import_react12.createContext)(null);
1973
+ function useBlockContext() {
1974
+ return (0, import_react12.useContext)(BlockContext) ?? {};
640
1975
  }
641
1976
  // Annotate the CommonJS export names for ESM import in node:
642
1977
  0 && (module.exports = {
1978
+ ArtifactRefBlock,
1979
+ ArtifactRefBlockService,
643
1980
  Block,
644
1981
  BlockContext,
645
1982
  BlockServices,
@@ -647,4 +1984,17 @@ function Block({ block }) {
647
1984
  blockTypes,
648
1985
  useBlockContext
649
1986
  });
1987
+ /*! Bundled license information:
1988
+
1989
+ @tabler/icons-react/dist/esm/defaultAttributes.mjs:
1990
+ @tabler/icons-react/dist/esm/createReactComponent.mjs:
1991
+ @tabler/icons-react/dist/esm/icons/IconDownload.mjs:
1992
+ @tabler/icons-react/dist/esm/tabler-icons-react.mjs:
1993
+ (**
1994
+ * @license @tabler/icons-react v3.37.1 - MIT
1995
+ *
1996
+ * This source code is licensed under the MIT license.
1997
+ * See the LICENSE file in the root directory of this source tree.
1998
+ *)
1999
+ */
650
2000
  //# sourceMappingURL=blocks.cjs.map