@shapesos/clay 0.9.0 → 0.11.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.
- package/README.md +46 -1
- package/dist/artifacts.cjs +741 -0
- package/dist/artifacts.cjs.map +1 -0
- package/dist/artifacts.d.cts +56 -0
- package/dist/artifacts.d.ts +56 -0
- package/dist/artifacts.js +23 -0
- package/dist/artifacts.js.map +1 -0
- package/dist/blocks.cjs +1282 -0
- package/dist/blocks.cjs.map +1 -0
- package/dist/blocks.css +2 -0
- package/dist/blocks.d.cts +41 -0
- package/dist/blocks.d.ts +41 -0
- package/dist/blocks.js +31 -0
- package/dist/blocks.js.map +1 -0
- package/dist/button.d.cts +2 -2
- package/dist/button.d.ts +2 -2
- package/dist/chat.cjs +755 -281
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.d.cts +31 -10
- package/dist/chat.d.ts +31 -10
- package/dist/chat.js +8 -3
- package/dist/chunk-BX5TCEPR.js +436 -0
- package/dist/chunk-BX5TCEPR.js.map +1 -0
- package/dist/chunk-JGMN6W72.js +12 -0
- package/dist/chunk-JGMN6W72.js.map +1 -0
- package/dist/{chunk-27GJUWVN.js → chunk-JJUIBBBU.js} +14 -8
- package/dist/chunk-JJUIBBBU.js.map +1 -0
- package/dist/chunk-L35M3OD5.js +99 -0
- package/dist/chunk-L35M3OD5.js.map +1 -0
- package/dist/chunk-MEJESPTZ.js +1 -0
- package/dist/chunk-MEJESPTZ.js.map +1 -0
- package/dist/chunk-MXOPG747.js +238 -0
- package/dist/chunk-MXOPG747.js.map +1 -0
- package/dist/{chunk-MLCRDVQ2.js → chunk-OBOXCBDL.js} +13 -5
- package/dist/chunk-OBOXCBDL.js.map +1 -0
- package/dist/chunk-OUW6PUEB.js +223 -0
- package/dist/chunk-OUW6PUEB.js.map +1 -0
- package/dist/{chunk-TDMJUF4A.js → chunk-WPQQVKWY.js} +4 -4
- package/dist/icon.cjs +12 -4
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +19 -6
- package/dist/icon.d.ts +19 -6
- package/dist/icon.js +1 -1
- package/dist/index.cjs +789 -273
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -3
- package/dist/index.d.ts +7 -3
- package/dist/index.js +61 -21
- package/dist/lottie.d.cts +2 -2
- package/dist/lottie.d.ts +2 -2
- package/dist/table.cjs +142 -0
- package/dist/table.cjs.map +1 -0
- package/dist/table.d.cts +44 -0
- package/dist/table.d.ts +44 -0
- package/dist/table.js +24 -0
- package/dist/table.js.map +1 -0
- package/dist/text-area.d.cts +2 -2
- package/dist/text-area.d.ts +2 -2
- package/dist/text-area.js +2 -2
- package/dist/types-3Gzk7cRt.d.cts +121 -0
- package/dist/types-3Gzk7cRt.d.ts +121 -0
- package/dist/types-C9XX-Uhk.d.ts +68 -0
- package/dist/types-DuuRI4ll.d.cts +68 -0
- package/dist/utils.cjs +14 -7
- package/dist/utils.cjs.map +1 -1
- package/dist/utils.d.cts +18 -1
- package/dist/utils.d.ts +18 -1
- package/dist/utils.js +6 -4
- package/package.json +34 -4
- package/dist/chunk-27GJUWVN.js.map +0 -1
- package/dist/chunk-A77BGJH4.js +0 -458
- package/dist/chunk-A77BGJH4.js.map +0 -1
- package/dist/chunk-MLCRDVQ2.js.map +0 -1
- /package/dist/{chunk-TDMJUF4A.js.map → chunk-WPQQVKWY.js.map} +0 -0
package/dist/blocks.cjs
ADDED
|
@@ -0,0 +1,1282 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/blocks/index.ts
|
|
31
|
+
var blocks_exports = {};
|
|
32
|
+
__export(blocks_exports, {
|
|
33
|
+
ArtifactRefBlock: () => ArtifactRefBlock,
|
|
34
|
+
ArtifactRefBlockService: () => ArtifactRefBlockService,
|
|
35
|
+
Block: () => Block,
|
|
36
|
+
BlockContext: () => BlockContext,
|
|
37
|
+
BlockServices: () => BlockServices,
|
|
38
|
+
TextBlockService: () => TextBlockService,
|
|
39
|
+
blockTypes: () => blockTypes,
|
|
40
|
+
useBlockContext: () => useBlockContext
|
|
41
|
+
});
|
|
42
|
+
module.exports = __toCommonJS(blocks_exports);
|
|
43
|
+
|
|
44
|
+
// src/components/blocks/types.ts
|
|
45
|
+
var blockTypes = {
|
|
46
|
+
TEXT: "TEXT",
|
|
47
|
+
ARTIFACT_REF: "ARTIFACT_REF"
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// src/components/artifacts/types.ts
|
|
51
|
+
var artifactTypes = {
|
|
52
|
+
TABLE: "TABLE"
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// src/components/artifacts/table-artifact/table-artifact.tsx
|
|
56
|
+
var import_react7 = require("react");
|
|
57
|
+
|
|
58
|
+
// src/lib/utils.ts
|
|
59
|
+
var import_clsx = require("clsx");
|
|
60
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
61
|
+
function cn(...inputs) {
|
|
62
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// src/components/ai-elements/artifact.tsx
|
|
66
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
67
|
+
var Artifact = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className),
|
|
71
|
+
...props
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
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 });
|
|
75
|
+
var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("font-medium text-foreground text-sm", className), ...props });
|
|
76
|
+
var ArtifactActions = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex items-center gap-1", className), ...props });
|
|
77
|
+
var ArtifactContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
|
|
78
|
+
|
|
79
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
80
|
+
var import_react = require("react");
|
|
81
|
+
|
|
82
|
+
// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
|
|
83
|
+
var defaultAttributes = {
|
|
84
|
+
outline: {
|
|
85
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
86
|
+
width: 24,
|
|
87
|
+
height: 24,
|
|
88
|
+
viewBox: "0 0 24 24",
|
|
89
|
+
fill: "none",
|
|
90
|
+
stroke: "currentColor",
|
|
91
|
+
strokeWidth: 2,
|
|
92
|
+
strokeLinecap: "round",
|
|
93
|
+
strokeLinejoin: "round"
|
|
94
|
+
},
|
|
95
|
+
filled: {
|
|
96
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
97
|
+
width: 24,
|
|
98
|
+
height: 24,
|
|
99
|
+
viewBox: "0 0 24 24",
|
|
100
|
+
fill: "currentColor",
|
|
101
|
+
stroke: "none"
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
106
|
+
var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
107
|
+
const Component = (0, import_react.forwardRef)(
|
|
108
|
+
({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
|
|
109
|
+
"svg",
|
|
110
|
+
{
|
|
111
|
+
ref,
|
|
112
|
+
...defaultAttributes[type],
|
|
113
|
+
width: size,
|
|
114
|
+
height: size,
|
|
115
|
+
className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
|
|
116
|
+
...type === "filled" ? {
|
|
117
|
+
fill: color
|
|
118
|
+
} : {
|
|
119
|
+
strokeWidth: stroke,
|
|
120
|
+
stroke: color
|
|
121
|
+
},
|
|
122
|
+
...rest
|
|
123
|
+
},
|
|
124
|
+
[
|
|
125
|
+
title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
|
|
126
|
+
...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
|
|
127
|
+
...Array.isArray(children) ? children : [children]
|
|
128
|
+
]
|
|
129
|
+
)
|
|
130
|
+
);
|
|
131
|
+
Component.displayName = `${iconNamePascal}`;
|
|
132
|
+
return Component;
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconDownload.mjs
|
|
136
|
+
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" }]];
|
|
137
|
+
var IconDownload = createReactComponent("outline", "download", "Download", __iconNode);
|
|
138
|
+
|
|
139
|
+
// src/components/icon-button/icon-button.tsx
|
|
140
|
+
var import_react3 = require("react");
|
|
141
|
+
|
|
142
|
+
// src/components/icon/icon.tsx
|
|
143
|
+
var import_react2 = require("react");
|
|
144
|
+
|
|
145
|
+
// src/components/icon/icon-styles.ts
|
|
146
|
+
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
147
|
+
var STROKE_WIDTH_BY_SIZE = {
|
|
148
|
+
12: 1.4,
|
|
149
|
+
14: 1.4,
|
|
150
|
+
16: 1.8,
|
|
151
|
+
18: 1.8,
|
|
152
|
+
20: 1.8,
|
|
153
|
+
24: 1.8
|
|
154
|
+
};
|
|
155
|
+
var DEFAULT_STROKE_WIDTH = 1.8;
|
|
156
|
+
function getStrokeWidth(size) {
|
|
157
|
+
return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
|
|
158
|
+
}
|
|
159
|
+
var IconWrapper = import_styled_components.default.span`
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
justify-content: center;
|
|
163
|
+
color: ${({ $color }) => $color ?? "currentColor"};
|
|
164
|
+
flex-shrink: 0;
|
|
165
|
+
`;
|
|
166
|
+
|
|
167
|
+
// src/components/icon/icon.tsx
|
|
168
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
169
|
+
var DEFAULT_SIZE = 16;
|
|
170
|
+
var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
|
|
171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
172
|
+
IconWrapper,
|
|
173
|
+
{
|
|
174
|
+
ref,
|
|
175
|
+
className,
|
|
176
|
+
$color: color,
|
|
177
|
+
"aria-label": ariaLabel,
|
|
178
|
+
role: ariaLabel ? "img" : void 0,
|
|
179
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
|
|
180
|
+
}
|
|
181
|
+
);
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
// src/components/icon-button/icon-button-styles.ts
|
|
185
|
+
var import_styled_components2 = __toESM(require("styled-components"), 1);
|
|
186
|
+
|
|
187
|
+
// src/tokens/colors.ts
|
|
188
|
+
var colors = {
|
|
189
|
+
// White
|
|
190
|
+
white: "#FFFFFF",
|
|
191
|
+
"white-alpha-85": "rgba(255, 255, 255, 0.85)",
|
|
192
|
+
"white-alpha-40": "rgba(255, 255, 255, 0.40)",
|
|
193
|
+
// Brown
|
|
194
|
+
"brown-10": "#FAF9F8",
|
|
195
|
+
"brown-20": "#F5F3F0",
|
|
196
|
+
"brown-30": "#EEEBE5",
|
|
197
|
+
"brown-40": "#E6E2DA",
|
|
198
|
+
"brown-50": "#CFCBC4",
|
|
199
|
+
"brown-60": "#A19E99",
|
|
200
|
+
"brown-70": "#73716D",
|
|
201
|
+
"brown-80": "#5C5A57",
|
|
202
|
+
"brown-90": "#2E2D2C",
|
|
203
|
+
"brown-100": "#171716",
|
|
204
|
+
"brown-alpha-12": "rgba(23, 23, 22, 0.12)",
|
|
205
|
+
"brown-alpha-20": "rgba(23, 23, 22, 0.20)",
|
|
206
|
+
"brown-alpha-55": "rgba(23, 23, 22, 0.55)",
|
|
207
|
+
"brown-alpha-70": "rgba(23, 23, 22, 0.70)",
|
|
208
|
+
"brown-alpha-80": "rgba(23, 23, 22, 0.80)",
|
|
209
|
+
"brown-alpha-90": "rgba(23, 23, 22, 0.90)",
|
|
210
|
+
// Fuchsia
|
|
211
|
+
"fuchsia-50": "#FAF5FF",
|
|
212
|
+
"fuchsia-300": "#F0ABFC",
|
|
213
|
+
"fuchsia-500": "#D946EF",
|
|
214
|
+
"fuchsia-600": "#C026D3",
|
|
215
|
+
"fuchsia-800": "#86198F",
|
|
216
|
+
// Pink
|
|
217
|
+
"pink-50": "#FDF2F8",
|
|
218
|
+
"pink-400": "#F472B6",
|
|
219
|
+
"pink-600": "#DB2777",
|
|
220
|
+
"pink-800": "#9D174D",
|
|
221
|
+
// Violet
|
|
222
|
+
"violet-50": "#F5F3FF",
|
|
223
|
+
"violet-400": "#A78BFA",
|
|
224
|
+
"violet-600": "#7C3AED",
|
|
225
|
+
"violet-800": "#5B21B6",
|
|
226
|
+
// Indigo
|
|
227
|
+
"indigo-50": "#EEF2FF",
|
|
228
|
+
"indigo-400": "#818CF8",
|
|
229
|
+
"indigo-500": "#6366F1",
|
|
230
|
+
"indigo-600": "#4F46E5",
|
|
231
|
+
"indigo-800": "#3730A3",
|
|
232
|
+
// Cyan
|
|
233
|
+
"cyan-50": "#E7FEFF",
|
|
234
|
+
"cyan-300": "#67E8F9",
|
|
235
|
+
"cyan-600": "#0891B2",
|
|
236
|
+
"cyan-900": "#164E63",
|
|
237
|
+
// Teal
|
|
238
|
+
"teal-50": "#EBFDF9",
|
|
239
|
+
"teal-300": "#5EEAD4",
|
|
240
|
+
"teal-600": "#0D9488",
|
|
241
|
+
// Rose
|
|
242
|
+
"rose-400": "#FB7185",
|
|
243
|
+
// Purple
|
|
244
|
+
"purple-400": "#C084FC",
|
|
245
|
+
// Blue
|
|
246
|
+
"blue-50": "#EFF6FF",
|
|
247
|
+
"blue-100": "#DBEAFE",
|
|
248
|
+
"blue-300": "#93C5FD",
|
|
249
|
+
"blue-400": "#60A5FA",
|
|
250
|
+
"blue-600": "#2563EB",
|
|
251
|
+
"blue-800": "#1E40AF",
|
|
252
|
+
// Sky
|
|
253
|
+
"sky-300": "#7DD3FC",
|
|
254
|
+
// Green
|
|
255
|
+
"green-50": "#ECF9F0",
|
|
256
|
+
"green-100": "#D4F1D9",
|
|
257
|
+
"green-400": "#3DC269",
|
|
258
|
+
"green-700": "#277C43",
|
|
259
|
+
"green-800": "#1C5930",
|
|
260
|
+
// Orange
|
|
261
|
+
"orange-50": "#FFF7ED",
|
|
262
|
+
"orange-100": "#FFEDD5",
|
|
263
|
+
"orange-200": "#FED7AA",
|
|
264
|
+
"orange-500": "#F97316",
|
|
265
|
+
"orange-600": "#EA580C",
|
|
266
|
+
// Red
|
|
267
|
+
"red-50": "#FEF2F2",
|
|
268
|
+
"red-100": "#FEE2E2",
|
|
269
|
+
"red-200": "#FECACA",
|
|
270
|
+
"red-400": "#F7776C",
|
|
271
|
+
"red-500": "#EF4444",
|
|
272
|
+
"red-600": "#DC2626"
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
// src/components/icon-button/icon-button-styles.ts
|
|
276
|
+
var PADDING = {
|
|
277
|
+
short: {
|
|
278
|
+
small: "4px",
|
|
279
|
+
medium: "6px"
|
|
280
|
+
},
|
|
281
|
+
long: {
|
|
282
|
+
small: "4px 6px",
|
|
283
|
+
medium: "6px 10px"
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
var BORDER_RADIUS = {
|
|
287
|
+
small: 6,
|
|
288
|
+
medium: 10
|
|
289
|
+
};
|
|
290
|
+
var Button = import_styled_components2.default.button`
|
|
291
|
+
display: inline-flex;
|
|
292
|
+
align-items: center;
|
|
293
|
+
justify-content: center;
|
|
294
|
+
padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
|
|
295
|
+
border: none;
|
|
296
|
+
border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
|
|
297
|
+
background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
|
|
298
|
+
color: ${colors["brown-100"]};
|
|
299
|
+
cursor: pointer;
|
|
300
|
+
transition: background-color 100ms ease;
|
|
301
|
+
|
|
302
|
+
&:hover {
|
|
303
|
+
background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
&:active {
|
|
307
|
+
background: ${colors["brown-40"]};
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
&:disabled {
|
|
311
|
+
color: ${colors["brown-50"]};
|
|
312
|
+
background: transparent;
|
|
313
|
+
cursor: not-allowed;
|
|
314
|
+
}
|
|
315
|
+
`;
|
|
316
|
+
|
|
317
|
+
// src/components/icon-button/icon-button.tsx
|
|
318
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
319
|
+
var ICON_SIZE_BY_BUTTON_SIZE = {
|
|
320
|
+
small: 16,
|
|
321
|
+
medium: 20
|
|
322
|
+
};
|
|
323
|
+
var IconButton = (0, import_react3.forwardRef)(function IconButton2({
|
|
324
|
+
icon,
|
|
325
|
+
size = "small",
|
|
326
|
+
variant = "short",
|
|
327
|
+
isSelected = false,
|
|
328
|
+
disabled = false,
|
|
329
|
+
onClick,
|
|
330
|
+
className,
|
|
331
|
+
id,
|
|
332
|
+
as,
|
|
333
|
+
"aria-label": ariaLabel,
|
|
334
|
+
...rest
|
|
335
|
+
}, ref) {
|
|
336
|
+
const isNativeButton = as === void 0 || as === "button";
|
|
337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
338
|
+
Button,
|
|
339
|
+
{
|
|
340
|
+
ref,
|
|
341
|
+
className,
|
|
342
|
+
id,
|
|
343
|
+
as,
|
|
344
|
+
$size: size,
|
|
345
|
+
$variant: variant,
|
|
346
|
+
$isSelected: isSelected,
|
|
347
|
+
disabled,
|
|
348
|
+
onClick: disabled ? void 0 : onClick,
|
|
349
|
+
"aria-label": ariaLabel,
|
|
350
|
+
...isNativeButton ? { type: "button" } : {},
|
|
351
|
+
...rest,
|
|
352
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
|
|
353
|
+
}
|
|
354
|
+
);
|
|
355
|
+
});
|
|
356
|
+
|
|
357
|
+
// src/components/ui/tooltip.tsx
|
|
358
|
+
var React = __toESM(require("react"), 1);
|
|
359
|
+
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
360
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
361
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
362
|
+
var Tooltip = TooltipPrimitive.Root;
|
|
363
|
+
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
364
|
+
var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
365
|
+
TooltipPrimitive.Content,
|
|
366
|
+
{
|
|
367
|
+
ref,
|
|
368
|
+
sideOffset,
|
|
369
|
+
className: cn(
|
|
370
|
+
"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]",
|
|
371
|
+
className
|
|
372
|
+
),
|
|
373
|
+
...props
|
|
374
|
+
}
|
|
375
|
+
));
|
|
376
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
377
|
+
|
|
378
|
+
// src/components/artifacts/artifact-download-button/artifact-download-button.tsx
|
|
379
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
380
|
+
function ArtifactDownloadButton({ href }) {
|
|
381
|
+
if (!isSafeDownloadUrl(href)) return null;
|
|
382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
|
|
383
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
384
|
+
IconButton,
|
|
385
|
+
{
|
|
386
|
+
as: "a",
|
|
387
|
+
href,
|
|
388
|
+
download: true,
|
|
389
|
+
rel: "noopener noreferrer",
|
|
390
|
+
icon: IconDownload,
|
|
391
|
+
size: "small",
|
|
392
|
+
"aria-label": "Download artifact"
|
|
393
|
+
}
|
|
394
|
+
) }),
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { children: "Download" })
|
|
396
|
+
] }) });
|
|
397
|
+
}
|
|
398
|
+
function isSafeDownloadUrl(url) {
|
|
399
|
+
try {
|
|
400
|
+
const parsed = new URL(url);
|
|
401
|
+
return parsed.protocol === "https:" || parsed.protocol === "http:";
|
|
402
|
+
} catch {
|
|
403
|
+
return false;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// src/components/ui/table.tsx
|
|
408
|
+
var React2 = __toESM(require("react"), 1);
|
|
409
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
410
|
+
var Table = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) }));
|
|
411
|
+
Table.displayName = "Table";
|
|
412
|
+
var TableHeader = React2.forwardRef(
|
|
413
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
|
|
414
|
+
);
|
|
415
|
+
TableHeader.displayName = "TableHeader";
|
|
416
|
+
var TableBody = React2.forwardRef(
|
|
417
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
|
|
418
|
+
);
|
|
419
|
+
TableBody.displayName = "TableBody";
|
|
420
|
+
var TableFooter = React2.forwardRef(
|
|
421
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
|
|
422
|
+
);
|
|
423
|
+
TableFooter.displayName = "TableFooter";
|
|
424
|
+
var TableRow = React2.forwardRef(
|
|
425
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
426
|
+
"tr",
|
|
427
|
+
{
|
|
428
|
+
ref,
|
|
429
|
+
className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
|
|
430
|
+
...props
|
|
431
|
+
}
|
|
432
|
+
)
|
|
433
|
+
);
|
|
434
|
+
TableRow.displayName = "TableRow";
|
|
435
|
+
var TableHead = React2.forwardRef(
|
|
436
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
437
|
+
"th",
|
|
438
|
+
{
|
|
439
|
+
ref,
|
|
440
|
+
className: cn(
|
|
441
|
+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
442
|
+
className
|
|
443
|
+
),
|
|
444
|
+
...props
|
|
445
|
+
}
|
|
446
|
+
)
|
|
447
|
+
);
|
|
448
|
+
TableHead.displayName = "TableHead";
|
|
449
|
+
var TableCell = React2.forwardRef(
|
|
450
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
|
|
451
|
+
);
|
|
452
|
+
TableCell.displayName = "TableCell";
|
|
453
|
+
var TableCaption = React2.forwardRef(
|
|
454
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
|
|
455
|
+
);
|
|
456
|
+
TableCaption.displayName = "TableCaption";
|
|
457
|
+
|
|
458
|
+
// src/components/table/use-scroll-shadow.ts
|
|
459
|
+
var import_react4 = require("react");
|
|
460
|
+
function useScrollShadow() {
|
|
461
|
+
const targetRef = (0, import_react4.useRef)(null);
|
|
462
|
+
const [isScrolled, setIsScrolled] = (0, import_react4.useState)(false);
|
|
463
|
+
(0, import_react4.useEffect)(() => {
|
|
464
|
+
const target = targetRef.current;
|
|
465
|
+
if (!target) return;
|
|
466
|
+
let scrollContainer = target;
|
|
467
|
+
while (scrollContainer) {
|
|
468
|
+
const overflowY = getComputedStyle(scrollContainer).overflowY;
|
|
469
|
+
if (overflowY === "auto" || overflowY === "scroll") break;
|
|
470
|
+
scrollContainer = scrollContainer.parentElement;
|
|
471
|
+
}
|
|
472
|
+
if (!scrollContainer) return;
|
|
473
|
+
setIsScrolled(scrollContainer.scrollTop > 0);
|
|
474
|
+
const handleScroll = () => {
|
|
475
|
+
if (!scrollContainer) return;
|
|
476
|
+
setIsScrolled(scrollContainer.scrollTop > 0);
|
|
477
|
+
};
|
|
478
|
+
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
|
|
479
|
+
return () => scrollContainer.removeEventListener("scroll", handleScroll);
|
|
480
|
+
}, []);
|
|
481
|
+
return { targetRef, isScrolled };
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
// src/components/artifacts/table-artifact/table-artifact-styles.ts
|
|
485
|
+
var import_react5 = require("react");
|
|
486
|
+
function StatusMessage({ $tone, children }) {
|
|
487
|
+
return (0, import_react5.createElement)(
|
|
488
|
+
"div",
|
|
489
|
+
{
|
|
490
|
+
className: `py-6 px-2 text-center text-sm font-medium leading-5 ${$tone === "error" ? "text-red-600" : "text-brown-70"}`
|
|
491
|
+
},
|
|
492
|
+
children
|
|
493
|
+
);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
|
|
497
|
+
var TABLE_STATUS = {
|
|
498
|
+
LOADING: "loading",
|
|
499
|
+
READY: "ready",
|
|
500
|
+
ERROR: "error",
|
|
501
|
+
UNAVAILABLE: "unavailable"
|
|
502
|
+
};
|
|
503
|
+
|
|
504
|
+
// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
|
|
505
|
+
function formatCell(row, column) {
|
|
506
|
+
return row[column.key] ?? "";
|
|
507
|
+
}
|
|
508
|
+
var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
|
|
509
|
+
var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
|
|
510
|
+
var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
|
|
511
|
+
var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
|
|
512
|
+
var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
|
|
513
|
+
|
|
514
|
+
// src/components/artifacts/table-artifact/table-artifact-content.tsx
|
|
515
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
516
|
+
function TableArtifactContent({
|
|
517
|
+
columns,
|
|
518
|
+
data,
|
|
519
|
+
knownRowCount,
|
|
520
|
+
maxShimmerRows,
|
|
521
|
+
maxBodyHeight,
|
|
522
|
+
unavailableMessage
|
|
523
|
+
}) {
|
|
524
|
+
if (data.status === TABLE_STATUS.ERROR) {
|
|
525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "error", children: "Couldn't load table data." });
|
|
526
|
+
}
|
|
527
|
+
if (data.status === TABLE_STATUS.UNAVAILABLE) {
|
|
528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: unavailableMessage });
|
|
529
|
+
}
|
|
530
|
+
if (data.status === TABLE_STATUS.LOADING) {
|
|
531
|
+
if (typeof knownRowCount === "number" && knownRowCount > 0) {
|
|
532
|
+
const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
|
|
533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
|
|
534
|
+
}
|
|
535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: "Loading table\u2026" });
|
|
536
|
+
}
|
|
537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: data.rows.length === 0 ? renderEmptyRow(columns.length) : renderDataRows(columns, data.rows) });
|
|
538
|
+
}
|
|
539
|
+
function ArtifactTable({ columns, maxBodyHeight, children }) {
|
|
540
|
+
const { targetRef, isScrolled } = useScrollShadow();
|
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: targetRef, className: "overscroll-none", style: { maxHeight: maxBodyHeight, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Table, { containerClassName: "overflow-visible", children: [
|
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
543
|
+
TableHeader,
|
|
544
|
+
{
|
|
545
|
+
"data-scrolled": isScrolled ? "true" : void 0,
|
|
546
|
+
className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
|
|
547
|
+
style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
|
|
548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: "hover:bg-transparent", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableHead, { scope: "col", className: HEAD_CLASS, children: column.label }, column.key)) })
|
|
549
|
+
}
|
|
550
|
+
),
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBody, { children })
|
|
552
|
+
] }) });
|
|
553
|
+
}
|
|
554
|
+
function renderShimmerRows(columns, count) {
|
|
555
|
+
return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: ROW_CLASSES, "aria-hidden": "true", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { className: CELL_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block h-3 w-3/4 animate-pulse rounded bg-muted-foreground/20" }) }, column.key)) }, `shimmer-${index}`));
|
|
556
|
+
}
|
|
557
|
+
function renderDataRows(columns, rows) {
|
|
558
|
+
return rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: DATA_ROW_CLASSES, children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { className: CELL_CLASS, children: formatCell(row, column) }, column.key)) }, index));
|
|
559
|
+
}
|
|
560
|
+
function renderEmptyRow(colSpan) {
|
|
561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { colSpan, className: "py-6 text-center text-sm text-muted-foreground", children: "No rows to display." }) });
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
// src/components/artifacts/table-artifact/use-table-artifact-data.ts
|
|
565
|
+
var import_react6 = require("react");
|
|
566
|
+
|
|
567
|
+
// src/components/artifacts/table-artifact/parse-csv.ts
|
|
568
|
+
var import_papaparse = __toESM(require("papaparse"), 1);
|
|
569
|
+
function parseCsv(text, columns) {
|
|
570
|
+
const result = import_papaparse.default.parse(text, {
|
|
571
|
+
header: true,
|
|
572
|
+
skipEmptyLines: true,
|
|
573
|
+
dynamicTyping: false
|
|
574
|
+
});
|
|
575
|
+
const csvHeaders = new Set(result.meta?.fields ?? []);
|
|
576
|
+
const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
|
|
577
|
+
return result.data.map((rawRow) => {
|
|
578
|
+
const row = {};
|
|
579
|
+
for (const column of presentColumns) {
|
|
580
|
+
const value = rawRow[column.key];
|
|
581
|
+
row[column.key] = value === void 0 || value === "" ? null : value;
|
|
582
|
+
}
|
|
583
|
+
return row;
|
|
584
|
+
});
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
// src/components/artifacts/table-artifact/use-table-artifact-data.ts
|
|
588
|
+
var LOADING = { status: "loading", rows: null, error: null };
|
|
589
|
+
var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
|
|
590
|
+
var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
|
|
591
|
+
function columnsFingerprint(columns) {
|
|
592
|
+
return columns.map((c) => `${c.key}:${c.type ?? "string"}`).join("|");
|
|
593
|
+
}
|
|
594
|
+
function useTableArtifactData(presignedUrl, columns) {
|
|
595
|
+
const colsKey = (0, import_react6.useMemo)(() => columnsFingerprint(columns), [columns]);
|
|
596
|
+
const cacheKey = presignedUrl ? `${presignedUrl}::${colsKey}` : null;
|
|
597
|
+
const [state, setState] = (0, import_react6.useState)(INITIAL_INTERNAL);
|
|
598
|
+
(0, import_react6.useEffect)(() => {
|
|
599
|
+
if (!presignedUrl) return;
|
|
600
|
+
const controller = new AbortController();
|
|
601
|
+
fetch(presignedUrl, {
|
|
602
|
+
signal: controller.signal,
|
|
603
|
+
headers: { Accept: "text/csv" },
|
|
604
|
+
// Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
|
|
605
|
+
// omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
|
|
606
|
+
// session cookies or auth headers.
|
|
607
|
+
credentials: "omit"
|
|
608
|
+
}).then(async (response) => {
|
|
609
|
+
if (!response.ok) throw new Error(`Failed to load table data (${response.status})`);
|
|
610
|
+
return response.text();
|
|
611
|
+
}).then((text) => {
|
|
612
|
+
if (controller.signal.aborted) return;
|
|
613
|
+
try {
|
|
614
|
+
const rows = parseCsv(text, columns);
|
|
615
|
+
setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
|
|
616
|
+
} catch (parseError) {
|
|
617
|
+
console.error("[TableArtifact] CSV parse failed", parseError);
|
|
618
|
+
const err = parseError instanceof Error ? parseError : new Error(String(parseError));
|
|
619
|
+
setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
|
|
620
|
+
}
|
|
621
|
+
}).catch((error) => {
|
|
622
|
+
if (controller.signal.aborted) return;
|
|
623
|
+
console.error("[TableArtifact] Fetch failed", error);
|
|
624
|
+
const err = error instanceof Error ? error : new Error(String(error));
|
|
625
|
+
setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
|
|
626
|
+
});
|
|
627
|
+
return () => {
|
|
628
|
+
controller.abort();
|
|
629
|
+
};
|
|
630
|
+
}, [presignedUrl, colsKey]);
|
|
631
|
+
if (!presignedUrl) return UNAVAILABLE;
|
|
632
|
+
if (state.cacheKey !== cacheKey) return LOADING;
|
|
633
|
+
return state.data;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
// src/components/artifacts/table-artifact/validate.ts
|
|
637
|
+
function isValidTableConfig(config) {
|
|
638
|
+
if (!config || typeof config !== "object") return false;
|
|
639
|
+
const candidate = config;
|
|
640
|
+
if (!Array.isArray(candidate.columns)) return false;
|
|
641
|
+
if (candidate.columns.length === 0) return false;
|
|
642
|
+
return candidate.columns.every(isValidTableColumn);
|
|
643
|
+
}
|
|
644
|
+
function isValidTableColumn(column) {
|
|
645
|
+
if (!column || typeof column !== "object") return false;
|
|
646
|
+
const candidate = column;
|
|
647
|
+
if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
|
|
648
|
+
if (typeof candidate.label !== "string") return false;
|
|
649
|
+
return true;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
// src/components/artifacts/table-artifact/table-artifact.tsx
|
|
653
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
654
|
+
var TITLE_CLASSES = "text-sm font-semibold text-foreground";
|
|
655
|
+
var TABLE_MAX_BODY_HEIGHT = 480;
|
|
656
|
+
var MAX_SHIMMER_ROWS = 10;
|
|
657
|
+
var MSG_UNAVAILABLE = "Table data is unavailable.";
|
|
658
|
+
function TableArtifact({ artifact }) {
|
|
659
|
+
const validConfig = isValidTableConfig(artifact.config);
|
|
660
|
+
const validColumns = validConfig ? artifact.config.columns : null;
|
|
661
|
+
(0, import_react7.useEffect)(() => {
|
|
662
|
+
if (validConfig) return;
|
|
663
|
+
console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
|
|
664
|
+
}, [validConfig]);
|
|
665
|
+
const data = useTableArtifactData(
|
|
666
|
+
validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
|
|
667
|
+
validColumns ?? []
|
|
668
|
+
);
|
|
669
|
+
const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
|
|
670
|
+
if (!validConfig || !validColumns) {
|
|
671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
|
|
673
|
+
artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
|
|
674
|
+
presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl }) }) : null
|
|
675
|
+
] }),
|
|
676
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactContent, { className: "p-0 overflow-auto", style: { maxHeight: TABLE_MAX_BODY_HEIGHT }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusMessage, { $tone: "info", children: MSG_UNAVAILABLE }) })
|
|
677
|
+
] });
|
|
678
|
+
}
|
|
679
|
+
return (
|
|
680
|
+
// The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
|
|
681
|
+
// Disable the outer overflow container so only one scroll context exists — this prevents
|
|
682
|
+
// double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
|
|
684
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
|
|
685
|
+
artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl ?? "" }) })
|
|
687
|
+
] }),
|
|
688
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
689
|
+
TableArtifactContent,
|
|
690
|
+
{
|
|
691
|
+
columns: validColumns,
|
|
692
|
+
data,
|
|
693
|
+
knownRowCount: artifact.config.stats?.rowCount,
|
|
694
|
+
maxShimmerRows: MAX_SHIMMER_ROWS,
|
|
695
|
+
maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
|
|
696
|
+
unavailableMessage: MSG_UNAVAILABLE
|
|
697
|
+
}
|
|
698
|
+
) })
|
|
699
|
+
] })
|
|
700
|
+
);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
// src/components/artifacts/table-artifact/to-clipboard-text.ts
|
|
704
|
+
function tableArtifactToClipboardText(artifact) {
|
|
705
|
+
const trimmedTitle = artifact.title?.trim();
|
|
706
|
+
return trimmedTitle || "Table";
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
// src/components/artifacts/artifact-services/table-artifact-service.ts
|
|
710
|
+
var TableArtifactService = {
|
|
711
|
+
type: artifactTypes.TABLE,
|
|
712
|
+
Component: TableArtifact,
|
|
713
|
+
toClipboardText: tableArtifactToClipboardText
|
|
714
|
+
};
|
|
715
|
+
|
|
716
|
+
// src/components/artifacts/artifact-services/index.ts
|
|
717
|
+
var ArtifactServices = {
|
|
718
|
+
[artifactTypes.TABLE]: TableArtifactService
|
|
719
|
+
};
|
|
720
|
+
function artifactToClipboardText(artifact) {
|
|
721
|
+
const entry = ArtifactServices[artifact.type];
|
|
722
|
+
if (!entry) {
|
|
723
|
+
return `[Artifact: ${artifact.title ?? artifact.type}]`;
|
|
724
|
+
}
|
|
725
|
+
return entry.toClipboardText(artifact);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
// src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
|
|
729
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
730
|
+
function ArtifactRefBlock({ block }) {
|
|
731
|
+
const { artifact } = block.payload;
|
|
732
|
+
const entry = ArtifactServices[artifact.type];
|
|
733
|
+
if (!entry) return null;
|
|
734
|
+
const { Component } = entry;
|
|
735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { artifact });
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
// src/components/blocks/block-services/artifact-ref-block-service.ts
|
|
739
|
+
var ArtifactRefBlockService = {
|
|
740
|
+
type: blockTypes.ARTIFACT_REF,
|
|
741
|
+
Component: ArtifactRefBlock,
|
|
742
|
+
/**
|
|
743
|
+
* Delegates to the registered artifact component's `toClipboardText`. Falls back to
|
|
744
|
+
* `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type
|
|
745
|
+
* has no registered component, so copy never silently produces an empty string.
|
|
746
|
+
*/
|
|
747
|
+
toClipboardText: (block) => artifactToClipboardText(block.payload.artifact)
|
|
748
|
+
};
|
|
749
|
+
|
|
750
|
+
// src/utils/markdown-to-plain-text.ts
|
|
751
|
+
var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
|
|
752
|
+
var PLACEHOLDER_SUFFIX = "\u200B\u200B";
|
|
753
|
+
var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
|
|
754
|
+
function stripInlineMarks(text) {
|
|
755
|
+
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");
|
|
756
|
+
}
|
|
757
|
+
function markdownToPlainText(markdown) {
|
|
758
|
+
if (!markdown) return "";
|
|
759
|
+
const inlineCodeSnippets = [];
|
|
760
|
+
let result = markdown.replace(/^<!--[\s\S]*?--!?>\n?/gm, "").replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
|
|
761
|
+
inlineCodeSnippets.push(code);
|
|
762
|
+
return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
|
|
763
|
+
}).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "");
|
|
764
|
+
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();
|
|
765
|
+
result = result.replace(PLACEHOLDER_REGEX, (_match, index) => inlineCodeSnippets[Number(index)]);
|
|
766
|
+
return result;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
// src/components/blocks/text-block/text-block.tsx
|
|
770
|
+
var import_react_markdown = __toESM(require("react-markdown"), 1);
|
|
771
|
+
var import_remark_breaks = __toESM(require("remark-breaks"), 1);
|
|
772
|
+
var import_remark_gfm = __toESM(require("remark-gfm"), 1);
|
|
773
|
+
|
|
774
|
+
// src/components/blocks/scrollable-table/scrollable-table-styles.ts
|
|
775
|
+
var import_styled_components3 = __toESM(require("styled-components"), 1);
|
|
776
|
+
var TableContainer = import_styled_components3.default.div`
|
|
777
|
+
position: relative;
|
|
778
|
+
margin-block: 8px 16px;
|
|
779
|
+
`;
|
|
780
|
+
var TableScroll = import_styled_components3.default.div`
|
|
781
|
+
width: 100%;
|
|
782
|
+
overflow-x: auto;
|
|
783
|
+
overflow-y: hidden;
|
|
784
|
+
`;
|
|
785
|
+
|
|
786
|
+
// src/components/blocks/scrollable-table/scrollable-table.tsx
|
|
787
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
788
|
+
function ScrollableTable({ node: _node, ...props }) {
|
|
789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("table", { ...props }) }) });
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
// src/components/blocks/text-block/sanitize.ts
|
|
793
|
+
function sanitize(text) {
|
|
794
|
+
return text.split("\n").filter((line) => {
|
|
795
|
+
const t = line.trim();
|
|
796
|
+
return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
|
|
797
|
+
}).join("\n");
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
// src/components/blocks/text-block/text-block-styles.ts
|
|
801
|
+
var import_styled_components4 = __toESM(require("styled-components"), 1);
|
|
802
|
+
|
|
803
|
+
// src/tokens/typography.ts
|
|
804
|
+
var fontFamilies = {
|
|
805
|
+
/** Geist — primary UI font for body text, labels, headings, and display. */
|
|
806
|
+
GEIST: "Geist",
|
|
807
|
+
/** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
|
|
808
|
+
CRIMSON_PRO: "Crimson Pro"
|
|
809
|
+
};
|
|
810
|
+
var typographyTypes = {
|
|
811
|
+
// Geist Label Caption (12px)
|
|
812
|
+
GEIST_LABEL_CAPTION_REGULAR: "GEIST_LABEL_CAPTION_REGULAR",
|
|
813
|
+
GEIST_LABEL_CAPTION_MEDIUM: "GEIST_LABEL_CAPTION_MEDIUM",
|
|
814
|
+
GEIST_LABEL_CAPTION_SEMI_BOLD: "GEIST_LABEL_CAPTION_SEMI_BOLD",
|
|
815
|
+
// Geist Body Extra Small (14px)
|
|
816
|
+
GEIST_BODY_XS_REGULAR: "GEIST_BODY_XS_REGULAR",
|
|
817
|
+
GEIST_BODY_XS_MEDIUM: "GEIST_BODY_XS_MEDIUM",
|
|
818
|
+
GEIST_BODY_XS_BOLD: "GEIST_BODY_XS_BOLD",
|
|
819
|
+
// Geist Body Small (16px)
|
|
820
|
+
GEIST_BODY_S_REGULAR: "GEIST_BODY_S_REGULAR",
|
|
821
|
+
GEIST_BODY_S_MEDIUM: "GEIST_BODY_S_MEDIUM",
|
|
822
|
+
GEIST_BODY_S_SEMI_BOLD: "GEIST_BODY_S_SEMI_BOLD",
|
|
823
|
+
GEIST_BODY_S_BOLD: "GEIST_BODY_S_BOLD",
|
|
824
|
+
// Geist Body Medium (18px)
|
|
825
|
+
GEIST_BODY_M_LIGHT: "GEIST_BODY_M_LIGHT",
|
|
826
|
+
GEIST_BODY_M_REGULAR: "GEIST_BODY_M_REGULAR",
|
|
827
|
+
GEIST_BODY_M_MEDIUM: "GEIST_BODY_M_MEDIUM",
|
|
828
|
+
GEIST_BODY_M_SEMI_BOLD: "GEIST_BODY_M_SEMI_BOLD",
|
|
829
|
+
// Geist Body Large (20px)
|
|
830
|
+
GEIST_BODY_L_REGULAR: "GEIST_BODY_L_REGULAR",
|
|
831
|
+
GEIST_BODY_L_MEDIUM: "GEIST_BODY_L_MEDIUM",
|
|
832
|
+
GEIST_BODY_L_SEMI_BOLD: "GEIST_BODY_L_SEMI_BOLD",
|
|
833
|
+
GEIST_BODY_L_BOLD: "GEIST_BODY_L_BOLD",
|
|
834
|
+
// Geist Heading Small (24px)
|
|
835
|
+
GEIST_HEADING_S_REGULAR: "GEIST_HEADING_S_REGULAR",
|
|
836
|
+
GEIST_HEADING_S_MEDIUM: "GEIST_HEADING_S_MEDIUM",
|
|
837
|
+
GEIST_HEADING_S_BOLD: "GEIST_HEADING_S_BOLD",
|
|
838
|
+
// Geist Heading Medium (28px)
|
|
839
|
+
GEIST_HEADING_M_BOLD: "GEIST_HEADING_M_BOLD",
|
|
840
|
+
// Geist Heading Large (32px)
|
|
841
|
+
GEIST_HEADING_L_REGULAR: "GEIST_HEADING_L_REGULAR",
|
|
842
|
+
GEIST_HEADING_L_MEDIUM: "GEIST_HEADING_L_MEDIUM",
|
|
843
|
+
GEIST_HEADING_L_SEMI_BOLD: "GEIST_HEADING_L_SEMI_BOLD",
|
|
844
|
+
GEIST_HEADING_L_BOLD: "GEIST_HEADING_L_BOLD",
|
|
845
|
+
// Geist Display Large (36px)
|
|
846
|
+
GEIST_DISPLAY_L_MEDIUM: "GEIST_DISPLAY_L_MEDIUM",
|
|
847
|
+
// Crimson Pro Body Small (16px)
|
|
848
|
+
CRIMSON_PRO_BODY_S_LIGHT: "CRIMSON_PRO_BODY_S_LIGHT",
|
|
849
|
+
// Crimson Pro Body Medium (18px)
|
|
850
|
+
CRIMSON_PRO_BODY_M_LIGHT: "CRIMSON_PRO_BODY_M_LIGHT",
|
|
851
|
+
// Crimson Pro Heading Medium (24px)
|
|
852
|
+
CRIMSON_PRO_HEADING_M_MEDIUM: "CRIMSON_PRO_HEADING_M_MEDIUM",
|
|
853
|
+
// Crimson Pro Display Extra Large (46px)
|
|
854
|
+
CRIMSON_PRO_DISPLAY_XL_REGULAR: "CRIMSON_PRO_DISPLAY_XL_REGULAR"
|
|
855
|
+
};
|
|
856
|
+
var typographyStyles = {
|
|
857
|
+
// Geist Label Caption (12px)
|
|
858
|
+
[typographyTypes.GEIST_LABEL_CAPTION_REGULAR]: {
|
|
859
|
+
fontFamily: fontFamilies.GEIST,
|
|
860
|
+
fontSize: 12,
|
|
861
|
+
fontWeight: 400,
|
|
862
|
+
lineHeight: 16
|
|
863
|
+
},
|
|
864
|
+
[typographyTypes.GEIST_LABEL_CAPTION_MEDIUM]: {
|
|
865
|
+
fontFamily: fontFamilies.GEIST,
|
|
866
|
+
fontSize: 12,
|
|
867
|
+
fontWeight: 500,
|
|
868
|
+
lineHeight: 16
|
|
869
|
+
},
|
|
870
|
+
[typographyTypes.GEIST_LABEL_CAPTION_SEMI_BOLD]: {
|
|
871
|
+
fontFamily: fontFamilies.GEIST,
|
|
872
|
+
fontSize: 12,
|
|
873
|
+
fontWeight: 600,
|
|
874
|
+
lineHeight: 16
|
|
875
|
+
},
|
|
876
|
+
// Geist Body Extra Small (14px)
|
|
877
|
+
[typographyTypes.GEIST_BODY_XS_REGULAR]: {
|
|
878
|
+
fontFamily: fontFamilies.GEIST,
|
|
879
|
+
fontSize: 14,
|
|
880
|
+
fontWeight: 400,
|
|
881
|
+
lineHeight: 20
|
|
882
|
+
},
|
|
883
|
+
[typographyTypes.GEIST_BODY_XS_MEDIUM]: {
|
|
884
|
+
fontFamily: fontFamilies.GEIST,
|
|
885
|
+
fontSize: 14,
|
|
886
|
+
fontWeight: 500,
|
|
887
|
+
lineHeight: 20
|
|
888
|
+
},
|
|
889
|
+
[typographyTypes.GEIST_BODY_XS_BOLD]: {
|
|
890
|
+
fontFamily: fontFamilies.GEIST,
|
|
891
|
+
fontSize: 14,
|
|
892
|
+
fontWeight: 600,
|
|
893
|
+
lineHeight: 20
|
|
894
|
+
},
|
|
895
|
+
// Geist Body Small (16px)
|
|
896
|
+
[typographyTypes.GEIST_BODY_S_REGULAR]: {
|
|
897
|
+
fontFamily: fontFamilies.GEIST,
|
|
898
|
+
fontSize: 16,
|
|
899
|
+
fontWeight: 400,
|
|
900
|
+
lineHeight: 24,
|
|
901
|
+
letterSpacing: -0.08
|
|
902
|
+
},
|
|
903
|
+
[typographyTypes.GEIST_BODY_S_MEDIUM]: {
|
|
904
|
+
fontFamily: fontFamilies.GEIST,
|
|
905
|
+
fontSize: 16,
|
|
906
|
+
fontWeight: 500,
|
|
907
|
+
lineHeight: 24,
|
|
908
|
+
letterSpacing: -0.08
|
|
909
|
+
},
|
|
910
|
+
[typographyTypes.GEIST_BODY_S_SEMI_BOLD]: {
|
|
911
|
+
fontFamily: fontFamilies.GEIST,
|
|
912
|
+
fontSize: 16,
|
|
913
|
+
fontWeight: 600,
|
|
914
|
+
lineHeight: 24,
|
|
915
|
+
letterSpacing: -0.08
|
|
916
|
+
},
|
|
917
|
+
[typographyTypes.GEIST_BODY_S_BOLD]: {
|
|
918
|
+
fontFamily: fontFamilies.GEIST,
|
|
919
|
+
fontSize: 16,
|
|
920
|
+
fontWeight: 700,
|
|
921
|
+
lineHeight: 24,
|
|
922
|
+
letterSpacing: -0.08
|
|
923
|
+
},
|
|
924
|
+
// Geist Body Medium (18px)
|
|
925
|
+
[typographyTypes.GEIST_BODY_M_LIGHT]: {
|
|
926
|
+
fontFamily: fontFamilies.GEIST,
|
|
927
|
+
fontSize: 18,
|
|
928
|
+
fontWeight: 300,
|
|
929
|
+
lineHeight: 28,
|
|
930
|
+
letterSpacing: -0.09
|
|
931
|
+
},
|
|
932
|
+
[typographyTypes.GEIST_BODY_M_REGULAR]: {
|
|
933
|
+
fontFamily: fontFamilies.GEIST,
|
|
934
|
+
fontSize: 18,
|
|
935
|
+
fontWeight: 400,
|
|
936
|
+
lineHeight: 28,
|
|
937
|
+
letterSpacing: -0.09
|
|
938
|
+
},
|
|
939
|
+
[typographyTypes.GEIST_BODY_M_MEDIUM]: {
|
|
940
|
+
fontFamily: fontFamilies.GEIST,
|
|
941
|
+
fontSize: 18,
|
|
942
|
+
fontWeight: 500,
|
|
943
|
+
lineHeight: 28,
|
|
944
|
+
letterSpacing: -0.09
|
|
945
|
+
},
|
|
946
|
+
[typographyTypes.GEIST_BODY_M_SEMI_BOLD]: {
|
|
947
|
+
fontFamily: fontFamilies.GEIST,
|
|
948
|
+
fontSize: 18,
|
|
949
|
+
fontWeight: 600,
|
|
950
|
+
lineHeight: 28,
|
|
951
|
+
letterSpacing: -0.09
|
|
952
|
+
},
|
|
953
|
+
// Geist Body Large (20px)
|
|
954
|
+
[typographyTypes.GEIST_BODY_L_REGULAR]: {
|
|
955
|
+
fontFamily: fontFamilies.GEIST,
|
|
956
|
+
fontSize: 20,
|
|
957
|
+
fontWeight: 400,
|
|
958
|
+
lineHeight: 30,
|
|
959
|
+
letterSpacing: -0.2
|
|
960
|
+
},
|
|
961
|
+
[typographyTypes.GEIST_BODY_L_MEDIUM]: {
|
|
962
|
+
fontFamily: fontFamilies.GEIST,
|
|
963
|
+
fontSize: 20,
|
|
964
|
+
fontWeight: 500,
|
|
965
|
+
lineHeight: 30,
|
|
966
|
+
letterSpacing: -0.2
|
|
967
|
+
},
|
|
968
|
+
[typographyTypes.GEIST_BODY_L_SEMI_BOLD]: {
|
|
969
|
+
fontFamily: fontFamilies.GEIST,
|
|
970
|
+
fontSize: 20,
|
|
971
|
+
fontWeight: 600,
|
|
972
|
+
lineHeight: 30,
|
|
973
|
+
letterSpacing: -0.2
|
|
974
|
+
},
|
|
975
|
+
[typographyTypes.GEIST_BODY_L_BOLD]: {
|
|
976
|
+
fontFamily: fontFamilies.GEIST,
|
|
977
|
+
fontSize: 20,
|
|
978
|
+
fontWeight: 700,
|
|
979
|
+
lineHeight: 30,
|
|
980
|
+
letterSpacing: -0.2
|
|
981
|
+
},
|
|
982
|
+
// Geist Heading Small (24px)
|
|
983
|
+
[typographyTypes.GEIST_HEADING_S_REGULAR]: {
|
|
984
|
+
fontFamily: fontFamilies.GEIST,
|
|
985
|
+
fontSize: 24,
|
|
986
|
+
fontWeight: 400,
|
|
987
|
+
lineHeight: 32,
|
|
988
|
+
letterSpacing: -0.48
|
|
989
|
+
},
|
|
990
|
+
[typographyTypes.GEIST_HEADING_S_MEDIUM]: {
|
|
991
|
+
fontFamily: fontFamilies.GEIST,
|
|
992
|
+
fontSize: 24,
|
|
993
|
+
fontWeight: 500,
|
|
994
|
+
lineHeight: 32,
|
|
995
|
+
letterSpacing: -0.48
|
|
996
|
+
},
|
|
997
|
+
[typographyTypes.GEIST_HEADING_S_BOLD]: {
|
|
998
|
+
fontFamily: fontFamilies.GEIST,
|
|
999
|
+
fontSize: 24,
|
|
1000
|
+
fontWeight: 700,
|
|
1001
|
+
lineHeight: 32,
|
|
1002
|
+
letterSpacing: -0.48
|
|
1003
|
+
},
|
|
1004
|
+
// Geist Heading Medium (28px)
|
|
1005
|
+
[typographyTypes.GEIST_HEADING_M_BOLD]: {
|
|
1006
|
+
fontFamily: fontFamilies.GEIST,
|
|
1007
|
+
fontSize: 28,
|
|
1008
|
+
fontWeight: 700,
|
|
1009
|
+
lineHeight: 36,
|
|
1010
|
+
letterSpacing: -0.6
|
|
1011
|
+
},
|
|
1012
|
+
// Geist Heading Large (32px)
|
|
1013
|
+
[typographyTypes.GEIST_HEADING_L_REGULAR]: {
|
|
1014
|
+
fontFamily: fontFamilies.GEIST,
|
|
1015
|
+
fontSize: 32,
|
|
1016
|
+
fontWeight: 400,
|
|
1017
|
+
lineHeight: 40,
|
|
1018
|
+
letterSpacing: -0.64
|
|
1019
|
+
},
|
|
1020
|
+
[typographyTypes.GEIST_HEADING_L_MEDIUM]: {
|
|
1021
|
+
fontFamily: fontFamilies.GEIST,
|
|
1022
|
+
fontSize: 32,
|
|
1023
|
+
fontWeight: 500,
|
|
1024
|
+
lineHeight: 40,
|
|
1025
|
+
letterSpacing: -0.64
|
|
1026
|
+
},
|
|
1027
|
+
[typographyTypes.GEIST_HEADING_L_SEMI_BOLD]: {
|
|
1028
|
+
fontFamily: fontFamilies.GEIST,
|
|
1029
|
+
fontSize: 32,
|
|
1030
|
+
fontWeight: 600,
|
|
1031
|
+
lineHeight: 40,
|
|
1032
|
+
letterSpacing: -0.64
|
|
1033
|
+
},
|
|
1034
|
+
[typographyTypes.GEIST_HEADING_L_BOLD]: {
|
|
1035
|
+
fontFamily: fontFamilies.GEIST,
|
|
1036
|
+
fontSize: 32,
|
|
1037
|
+
fontWeight: 700,
|
|
1038
|
+
lineHeight: 40,
|
|
1039
|
+
letterSpacing: -0.64
|
|
1040
|
+
},
|
|
1041
|
+
// Geist Display Large (36px)
|
|
1042
|
+
[typographyTypes.GEIST_DISPLAY_L_MEDIUM]: {
|
|
1043
|
+
fontFamily: fontFamilies.GEIST,
|
|
1044
|
+
fontSize: 36,
|
|
1045
|
+
fontWeight: 500,
|
|
1046
|
+
lineHeight: 44,
|
|
1047
|
+
letterSpacing: -0.72
|
|
1048
|
+
},
|
|
1049
|
+
// Crimson Pro Body Small (16px)
|
|
1050
|
+
[typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {
|
|
1051
|
+
fontFamily: fontFamilies.CRIMSON_PRO,
|
|
1052
|
+
fontSize: 16,
|
|
1053
|
+
fontWeight: 300,
|
|
1054
|
+
lineHeight: 20,
|
|
1055
|
+
letterSpacing: -0.32,
|
|
1056
|
+
fontStyle: "italic"
|
|
1057
|
+
},
|
|
1058
|
+
// Crimson Pro Body Medium (18px)
|
|
1059
|
+
[typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {
|
|
1060
|
+
fontFamily: fontFamilies.CRIMSON_PRO,
|
|
1061
|
+
fontSize: 18,
|
|
1062
|
+
fontWeight: 300,
|
|
1063
|
+
lineHeight: 28,
|
|
1064
|
+
letterSpacing: 0,
|
|
1065
|
+
fontStyle: "italic"
|
|
1066
|
+
},
|
|
1067
|
+
// Crimson Pro Heading Medium (24px)
|
|
1068
|
+
[typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {
|
|
1069
|
+
fontFamily: fontFamilies.CRIMSON_PRO,
|
|
1070
|
+
fontSize: 24,
|
|
1071
|
+
fontWeight: 400,
|
|
1072
|
+
lineHeight: 32,
|
|
1073
|
+
letterSpacing: -0.48,
|
|
1074
|
+
fontStyle: "italic"
|
|
1075
|
+
},
|
|
1076
|
+
// Crimson Pro Display Extra Large (46px)
|
|
1077
|
+
[typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {
|
|
1078
|
+
fontFamily: fontFamilies.CRIMSON_PRO,
|
|
1079
|
+
fontSize: 46,
|
|
1080
|
+
fontWeight: 400,
|
|
1081
|
+
lineHeight: 54,
|
|
1082
|
+
letterSpacing: -1.38,
|
|
1083
|
+
fontStyle: "italic"
|
|
1084
|
+
}
|
|
1085
|
+
};
|
|
1086
|
+
function typographyMixin(type) {
|
|
1087
|
+
const style = typographyStyles[type];
|
|
1088
|
+
return [
|
|
1089
|
+
`font-family: "${style.fontFamily}", sans-serif`,
|
|
1090
|
+
`font-size: ${style.fontSize}px`,
|
|
1091
|
+
`font-weight: ${style.fontWeight}`,
|
|
1092
|
+
`line-height: ${style.lineHeight}px`,
|
|
1093
|
+
`letter-spacing: ${style.letterSpacing != null ? `${style.letterSpacing}px` : "inherit"}`,
|
|
1094
|
+
`font-style: ${style.fontStyle ?? "normal"}`
|
|
1095
|
+
].join(";\n ");
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
// src/components/blocks/text-block/text-block-styles.ts
|
|
1099
|
+
var TextBlockWrapper = import_styled_components4.default.div`
|
|
1100
|
+
${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
|
|
1101
|
+
color: ${colors["brown-100"]};
|
|
1102
|
+
word-break: break-word;
|
|
1103
|
+
|
|
1104
|
+
& h1 {
|
|
1105
|
+
${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
|
|
1106
|
+
margin-block: 20px;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
& h2 {
|
|
1110
|
+
${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
|
|
1111
|
+
margin-block: 12px;
|
|
1112
|
+
}
|
|
1113
|
+
|
|
1114
|
+
& h3,
|
|
1115
|
+
& h4,
|
|
1116
|
+
& h5,
|
|
1117
|
+
& h6 {
|
|
1118
|
+
${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
|
|
1119
|
+
margin-block: 8px;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
& strong {
|
|
1123
|
+
${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
& p {
|
|
1127
|
+
margin-block: 0px;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
& p + p {
|
|
1131
|
+
margin-block: 8px 0px;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
& ul,
|
|
1135
|
+
& ol {
|
|
1136
|
+
margin-block: 16px;
|
|
1137
|
+
padding-left: 20px;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
& li + li {
|
|
1141
|
+
margin-block: 4px;
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
& ol {
|
|
1145
|
+
list-style-type: decimal;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
& ol ol {
|
|
1149
|
+
list-style-type: lower-alpha;
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
& ol ol ol {
|
|
1153
|
+
list-style-type: lower-roman;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
& a {
|
|
1157
|
+
color: inherit;
|
|
1158
|
+
text-decoration-line: underline;
|
|
1159
|
+
text-decoration-style: dotted;
|
|
1160
|
+
text-decoration-thickness: auto;
|
|
1161
|
+
text-underline-offset: auto;
|
|
1162
|
+
text-underline-position: from-font;
|
|
1163
|
+
transition: color 75ms ease-in-out;
|
|
1164
|
+
|
|
1165
|
+
&:hover {
|
|
1166
|
+
color: ${colors["blue-600"]};
|
|
1167
|
+
}
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
& hr {
|
|
1171
|
+
border: none;
|
|
1172
|
+
border-top: 1px solid ${colors["brown-40"]};
|
|
1173
|
+
margin-block: 20px;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
& table {
|
|
1177
|
+
margin: 0;
|
|
1178
|
+
width: 100%;
|
|
1179
|
+
border-collapse: collapse;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
& th,
|
|
1183
|
+
& td {
|
|
1184
|
+
border: none;
|
|
1185
|
+
border-bottom: 1px solid ${colors["brown-40"]};
|
|
1186
|
+
text-align: left;
|
|
1187
|
+
}
|
|
1188
|
+
|
|
1189
|
+
& th {
|
|
1190
|
+
${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
|
|
1191
|
+
padding: 8px;
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
& td {
|
|
1195
|
+
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
1196
|
+
padding: 16px 8px;
|
|
1197
|
+
min-width: 150px;
|
|
1198
|
+
width: 1%;
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
& td strong {
|
|
1202
|
+
font-weight: inherit;
|
|
1203
|
+
font-size: inherit;
|
|
1204
|
+
line-height: inherit;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
& blockquote {
|
|
1208
|
+
margin-block: 4px;
|
|
1209
|
+
margin-inline: 0px;
|
|
1210
|
+
padding-left: 16px;
|
|
1211
|
+
border-left: 4px solid ${colors["brown-40"]};
|
|
1212
|
+
color: ${colors["brown-80"]};
|
|
1213
|
+
}
|
|
1214
|
+
`;
|
|
1215
|
+
|
|
1216
|
+
// src/components/blocks/text-block/text-block.tsx
|
|
1217
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1218
|
+
var markdownComponents = {
|
|
1219
|
+
table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollableTable, { ...tableProps }))
|
|
1220
|
+
};
|
|
1221
|
+
function TextBlock({ block }) {
|
|
1222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1225
|
+
// src/components/blocks/block-services/text-block-service.ts
|
|
1226
|
+
var TextBlockService = {
|
|
1227
|
+
type: blockTypes.TEXT,
|
|
1228
|
+
Component: TextBlock,
|
|
1229
|
+
/**
|
|
1230
|
+
* Converts the block's markdown source to plain text so the final clipboard value is clean
|
|
1231
|
+
* when pasted into tools that don't render markdown. Each block type owns its own clipboard
|
|
1232
|
+
* conversion so `useCopyToClipboard` can write text verbatim without a second pass.
|
|
1233
|
+
*/
|
|
1234
|
+
toClipboardText: (block) => markdownToPlainText(block.payload.text)
|
|
1235
|
+
};
|
|
1236
|
+
|
|
1237
|
+
// src/components/blocks/block-services/index.ts
|
|
1238
|
+
var BlockServices = {
|
|
1239
|
+
[blockTypes.TEXT]: TextBlockService,
|
|
1240
|
+
[blockTypes.ARTIFACT_REF]: ArtifactRefBlockService
|
|
1241
|
+
};
|
|
1242
|
+
|
|
1243
|
+
// src/components/blocks/block/block.tsx
|
|
1244
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1245
|
+
function Block({ block }) {
|
|
1246
|
+
const service = BlockServices[block.type];
|
|
1247
|
+
if (!service) return null;
|
|
1248
|
+
const { Component } = service;
|
|
1249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, { block });
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
// src/components/blocks/block-context/block-context.tsx
|
|
1253
|
+
var import_react8 = require("react");
|
|
1254
|
+
var BlockContext = (0, import_react8.createContext)(null);
|
|
1255
|
+
function useBlockContext() {
|
|
1256
|
+
return (0, import_react8.useContext)(BlockContext) ?? {};
|
|
1257
|
+
}
|
|
1258
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1259
|
+
0 && (module.exports = {
|
|
1260
|
+
ArtifactRefBlock,
|
|
1261
|
+
ArtifactRefBlockService,
|
|
1262
|
+
Block,
|
|
1263
|
+
BlockContext,
|
|
1264
|
+
BlockServices,
|
|
1265
|
+
TextBlockService,
|
|
1266
|
+
blockTypes,
|
|
1267
|
+
useBlockContext
|
|
1268
|
+
});
|
|
1269
|
+
/*! Bundled license information:
|
|
1270
|
+
|
|
1271
|
+
@tabler/icons-react/dist/esm/defaultAttributes.mjs:
|
|
1272
|
+
@tabler/icons-react/dist/esm/createReactComponent.mjs:
|
|
1273
|
+
@tabler/icons-react/dist/esm/icons/IconDownload.mjs:
|
|
1274
|
+
@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
|
|
1275
|
+
(**
|
|
1276
|
+
* @license @tabler/icons-react v3.37.1 - MIT
|
|
1277
|
+
*
|
|
1278
|
+
* This source code is licensed under the MIT license.
|
|
1279
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
1280
|
+
*)
|
|
1281
|
+
*/
|
|
1282
|
+
//# sourceMappingURL=blocks.cjs.map
|