@shapesos/clay 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -16342,9 +16342,16 @@ var require_lottie = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ArtifactDownloadButton: () => ArtifactDownloadButton,
+  ArtifactRefBlock: () => ArtifactRefBlock,
+  ArtifactRefBlockService: () => ArtifactRefBlockService,
+  ArtifactServices: () => ArtifactServices,
   BUTTON_INTENT: () => BUTTON_INTENT,
   BUTTON_SIZE: () => BUTTON_SIZE,
   BUTTON_VARIANT: () => BUTTON_VARIANT,
+  Block: () => Block,
+  BlockContext: () => BlockContext,
+  BlockServices: () => BlockServices,
   Button: () => Button2,
   ChatContext: () => ChatContext,
   ChatMessage: () => ChatMessage,
@@ -16356,16 +16363,25 @@ __export(src_exports, {
   KeyboardShortcut: () => KeyboardShortcut,
   Lottie: () => Lottie,
   MESSAGE_ROLE: () => MESSAGE_ROLE,
+  TableArtifact: () => TableArtifact,
   TextArea: () => TextArea,
+  TextBlockService: () => TextBlockService,
+  artifactToClipboardText: () => artifactToClipboardText,
+  artifactTypes: () => artifactTypes,
+  blockTypes: () => blockTypes,
   colors: () => colors,
   convertTableToCSV: () => convertTableToCSV,
+  copyMessageText: () => copyMessageText,
+  escapeCsvField: () => escapeCsvField,
   fontFamilies: () => fontFamilies,
+  isSafeDownloadUrl: () => isSafeDownloadUrl,
   markdownToPlainText: () => markdownToPlainText,
   mergeRefs: () => mergeRefs,
   parseMarkdownTable: () => parseMarkdownTable,
   typographyMixin: () => typographyMixin,
   typographyStyles: () => typographyStyles,
   typographyTypes: () => typographyTypes,
+  useBlockContext: () => useBlockContext,
   useChatContext: () => useChatContext,
   useCopyToClipboard: () => useCopyToClipboard
 });
@@ -16754,203 +16770,43 @@ function typographyMixin(type) {
   ].join(";\n  ");
 }
 
-// src/components/chat/chat-message-content/chat-message-content.tsx
-var import_react_markdown = __toESM(require("react-markdown"), 1);
-var import_remark_breaks = __toESM(require("remark-breaks"), 1);
-var import_remark_gfm = __toESM(require("remark-gfm"), 1);
-
-// src/components/chat/scrollable-table/scrollable-table.tsx
-var import_react2 = require("react");
+// src/components/blocks/types.ts
+var blockTypes = {
+  TEXT: "TEXT",
+  ARTIFACT_REF: "ARTIFACT_REF"
+};
 
-// src/components/chat/chat-context/chat-context.ts
-var import_react = require("react");
-var ChatContext = (0, import_react.createContext)(null);
-function useChatContext() {
-  const context = (0, import_react.useContext)(ChatContext);
-  if (!context) {
-    throw new Error("useChatContext must be used within a Chat.Root component");
-  }
-  return context;
-}
+// src/components/artifacts/types.ts
+var artifactTypes = {
+  TABLE: "TABLE"
+};
 
-// src/components/chat/scrollable-table/scrollable-table-styles.ts
-var import_styled_components = __toESM(require("styled-components"), 1);
-var TableContainer = import_styled_components.default.div`
-  position: relative;
-  margin-block: 8px 16px;
-`;
-var TableScroll = import_styled_components.default.div`
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-var TableActionsWrapper = import_styled_components.default.div`
-  display: flex;
-  justify-content: flex-start;
-  margin-block: 8px 0;
-`;
-var TableActionsDivider = import_styled_components.default.div`
-  height: 1px;
-  background: ${colors["brown-40"]};
-  margin-block: 8px 0;
-`;
+// src/components/artifacts/table-artifact/table-artifact.tsx
+var import_react7 = require("react");
 
-// src/components/chat/scrollable-table/scrollable-table.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ScrollableTable({ node: _node, messageId, counter, ...props }) {
-  const currentIndex = counter ? counter.value : 0;
-  if (counter) {
-    counter.value += 1;
-  }
-  const context = (0, import_react2.useContext)(ChatContext);
-  const TableActions = context?.TableActions;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) }),
-    TableActions && messageId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActions, { messageId, tableIndex: currentIndex }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsDivider, {})
-    ] })
-  ] });
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/chat/chat-message-content/chat-message-content-styles.ts
-var import_styled_components2 = __toESM(require("styled-components"), 1);
-var ContentWrapper = import_styled_components2.default.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
-  color: ${colors["brown-100"]};
-  word-break: break-word;
-
-  & h1 {
-    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
-    margin-block: 20px;
-  }
-
-  & h2 {
-    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
-    margin-block: 12px;
-  }
-
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
-    margin-block: 8px;
-  }
-
-  & strong {
-    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
-  }
-
-  & p {
-    margin-block: 0px;
-  }
-
-  & p + p {
-    margin-block: 8px 0px;
-  }
-
-  & ul,
-  & ol {
-    margin-block: 16px;
-    padding-left: 20px;
-  }
-
-  & li + li {
-    margin-block: 4px;
-  }
-
-  & ol {
-    list-style-type: decimal;
-  }
-
-  & ol ol {
-    list-style-type: lower-alpha;
-  }
-
-  & ol ol ol {
-    list-style-type: lower-roman;
-  }
-
-  & a {
-    color: inherit;
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-    text-decoration-thickness: auto;
-    text-underline-offset: auto;
-    text-underline-position: from-font;
-    transition: color 75ms ease-in-out;
-
-    &:hover {
-      color: ${colors["blue-600"]};
-    }
-  }
-
-  & hr {
-    border: none;
-    border-top: 1px solid ${colors["brown-40"]};
-    margin-block: 20px;
-  }
-
-  & table {
-    margin: 0;
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  & th,
-  & td {
-    border: none;
-    border-bottom: 1px solid ${colors["brown-40"]};
-    text-align: left;
-  }
-
-  & th {
-    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
-    padding: 8px;
-  }
-
-  & td {
-    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-    padding: 16px 8px;
-    min-width: 150px;
-    width: 1%;
-  }
-
-  & td strong {
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  & blockquote {
-    margin-block: 4px;
-    margin-inline: 0px;
-    padding-left: 16px;
-    border-left: 4px solid ${colors["brown-40"]};
-    color: ${colors["brown-80"]};
+// src/components/ai-elements/artifact.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Artifact = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className),
+    ...props
   }
-`;
-
-// src/components/chat/chat-message-content/chat-message-content.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ChatMessageContent({ content: content2, messageId }) {
-  const counter = { value: 0 };
-  const sanitizedContent = content2.split("\n").filter((line) => {
-    const t = line.trim();
-    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
-  }).join("\n");
-  const markdownComponents = {
-    table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollableTable, { ...tableProps, messageId, counter }))
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitizedContent }) });
-}
-
-// src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_react6 = require("react");
+);
+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 });
+var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("font-medium text-foreground text-sm", className), ...props });
+var ArtifactActions = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex items-center gap-1", className), ...props });
+var ArtifactContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-var import_react3 = require("react");
+var import_react = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
 var defaultAttributes = {
@@ -16977,8 +16833,8 @@ var defaultAttributes = {
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
 var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = (0, import_react3.forwardRef)(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react3.createElement)(
+  const Component = (0, import_react.forwardRef)(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
       "svg",
       {
         ref,
@@ -16995,8 +16851,8 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
         ...rest
       },
       [
-        title && (0, import_react3.createElement)("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
+        title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     )
@@ -17013,19 +16869,26 @@ var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
 var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
 var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
 
+// node_modules/@tabler/icons-react/dist/esm/icons/IconDownload.mjs
+var __iconNode3 = [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 11l5 5l5 -5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]];
+var IconDownload = createReactComponent("outline", "download", "Download", __iconNode3);
+
 // node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
-var __iconNode3 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
-var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode3);
+var __iconNode4 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
+var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode4);
 
 // node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
-var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
-var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
+var __iconNode5 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
+var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode5);
+
+// src/components/icon-button/icon-button.tsx
+var import_react3 = require("react");
 
 // src/components/icon/icon.tsx
-var import_react4 = require("react");
+var import_react2 = require("react");
 
 // src/components/icon/icon-styles.ts
-var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_styled_components = __toESM(require("styled-components"), 1);
 var STROKE_WIDTH_BY_SIZE = {
   12: 1.4,
   14: 1.4,
@@ -17038,7 +16901,7 @@ var DEFAULT_STROKE_WIDTH = 1.8;
 function getStrokeWidth(size) {
   return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
 }
-var IconWrapper = import_styled_components3.default.span`
+var IconWrapper = import_styled_components.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17047,10 +16910,10 @@ var IconWrapper = import_styled_components3.default.span`
 `;
 
 // src/components/icon/icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 16;
-var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     IconWrapper,
     {
       ref,
@@ -17058,13 +16921,13 @@ var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, s
       $color: color,
       "aria-label": ariaLabel,
       role: ariaLabel ? "img" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
     }
   );
 });
 
 // src/components/icon-button/icon-button-styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_styled_components2 = __toESM(require("styled-components"), 1);
 var PADDING = {
   short: {
     small: "4px",
@@ -17079,7 +16942,7 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
-var Button = import_styled_components4.default.button`
+var Button = import_styled_components2.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17107,12 +16970,12 @@ var Button = import_styled_components4.default.button`
 `;
 
 // src/components/icon-button/icon-button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ICON_SIZE_BY_BUTTON_SIZE = {
   small: 16,
   medium: 20
 };
-function IconButton({
+var IconButton = (0, import_react3.forwardRef)(function IconButton2({
   icon,
   size = "small",
   variant = "short",
@@ -17122,11 +16985,14 @@ function IconButton({
   className,
   id,
   as,
-  "aria-label": ariaLabel
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const isNativeButton = as === void 0 || as === "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     {
+      ref,
       className,
       id,
       as,
@@ -17136,22 +17002,406 @@ function IconButton({
       disabled,
       onClick: disabled ? void 0 : onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
+      ...isNativeButton ? { type: "button" } : {},
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
     }
   );
+});
+
+// src/components/ui/tooltip.tsx
+var React = __toESM(require("react"), 1);
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/artifacts/artifact-download-button/artifact-download-button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ArtifactDownloadButton({ href }) {
+  if (!isSafeDownloadUrl(href)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      IconButton,
+      {
+        as: "a",
+        href,
+        download: true,
+        rel: "noopener noreferrer",
+        icon: IconDownload,
+        size: "small",
+        "aria-label": "Download artifact"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { children: "Download" })
+  ] }) });
+}
+function isSafeDownloadUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:";
+  } catch {
+    return false;
+  }
 }
 
-// src/components/chat/hooks/use-copy-to-clipboard.ts
+// src/components/ui/table.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+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 }) }));
+Table.displayName = "Table";
+var TableHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React2.forwardRef(
+  ({ 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 })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "tr",
+    {
+      ref,
+      className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/components/table/use-scroll-shadow.ts
+var import_react4 = require("react");
+function useScrollShadow() {
+  const targetRef = (0, import_react4.useRef)(null);
+  const [isScrolled, setIsScrolled] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    const target = targetRef.current;
+    if (!target) return;
+    let scrollContainer = target;
+    while (scrollContainer) {
+      const overflowY = getComputedStyle(scrollContainer).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll") break;
+      scrollContainer = scrollContainer.parentElement;
+    }
+    if (!scrollContainer) return;
+    setIsScrolled(scrollContainer.scrollTop > 0);
+    const handleScroll = () => {
+      if (!scrollContainer) return;
+      setIsScrolled(scrollContainer.scrollTop > 0);
+    };
+    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollContainer.removeEventListener("scroll", handleScroll);
+  }, []);
+  return { targetRef, isScrolled };
+}
+
+// src/components/artifacts/table-artifact/table-artifact-styles.ts
 var import_react5 = require("react");
+function StatusMessage({ $tone, children }) {
+  return (0, import_react5.createElement)(
+    "div",
+    {
+      className: `py-6 px-2 text-center text-sm font-medium leading-5 ${$tone === "error" ? "text-red-600" : "text-brown-70"}`
+    },
+    children
+  );
+}
 
-// src/utils/clipboard.ts
-function copyToClipboard(text2, options) {
-  navigator.clipboard.writeText(text2).then(
-    () => options?.onSuccess?.(),
-    (error) => options?.onFailure?.(error)
+// src/components/artifacts/table-artifact/table-artifact-content.constants.ts
+var TABLE_STATUS = {
+  LOADING: "loading",
+  READY: "ready",
+  ERROR: "error",
+  UNAVAILABLE: "unavailable"
+};
+
+// src/components/artifacts/table-artifact/table-artifact-content.utils.ts
+function formatCell(row, column) {
+  return row[column.key] ?? "";
+}
+var HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+var CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+var ROW_CLASSES = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+var DATA_ROW_CLASSES = `${ROW_CLASSES} animate-in fade-in duration-300`;
+var SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+
+// src/components/artifacts/table-artifact/table-artifact-content.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TableArtifactContent({
+  columns,
+  data: data2,
+  knownRowCount,
+  maxShimmerRows,
+  maxBodyHeight,
+  unavailableMessage
+}) {
+  if (data2.status === TABLE_STATUS.ERROR) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "error", children: "Couldn't load table data." });
+  }
+  if (data2.status === TABLE_STATUS.UNAVAILABLE) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: unavailableMessage });
+  }
+  if (data2.status === TABLE_STATUS.LOADING) {
+    if (typeof knownRowCount === "number" && knownRowCount > 0) {
+      const shimmerCount = Math.min(knownRowCount, maxShimmerRows);
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: renderShimmerRows(columns, shimmerCount) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusMessage, { $tone: "info", children: "Loading table\u2026" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArtifactTable, { columns, maxBodyHeight, children: data2.rows.length === 0 ? renderEmptyRow(columns.length) : renderDataRows(columns, data2.rows) });
+}
+function ArtifactTable({ columns, maxBodyHeight, children }) {
+  const { targetRef, isScrolled } = useScrollShadow();
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      TableHeader,
+      {
+        "data-scrolled": isScrolled ? "true" : void 0,
+        className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
+        style: isScrolled ? { boxShadow: SCROLL_SHADOW } : void 0,
+        children: /* @__PURE__ */ (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)) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBody, { children })
+  ] }) });
+}
+function renderShimmerRows(columns, count) {
+  return Array.from({ length: count }).map((_, index2) => /* @__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-${index2}`));
+}
+function renderDataRows(columns, rows) {
+  return rows.map((row, index2) => /* @__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)) }, index2));
+}
+function renderEmptyRow(colSpan) {
+  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." }) });
+}
+
+// src/components/artifacts/table-artifact/use-table-artifact-data.ts
+var import_react6 = require("react");
+
+// src/components/artifacts/table-artifact/parse-csv.ts
+var import_papaparse = __toESM(require("papaparse"), 1);
+function parseCsv(text2, columns) {
+  const result = import_papaparse.default.parse(text2, {
+    header: true,
+    skipEmptyLines: true,
+    dynamicTyping: false
+  });
+  const csvHeaders = new Set(result.meta?.fields ?? []);
+  const presentColumns = columns.filter((col) => csvHeaders.has(col.key));
+  return result.data.map((rawRow) => {
+    const row = {};
+    for (const column of presentColumns) {
+      const value2 = rawRow[column.key];
+      row[column.key] = value2 === void 0 || value2 === "" ? null : value2;
+    }
+    return row;
+  });
+}
+
+// src/components/artifacts/table-artifact/use-table-artifact-data.ts
+var LOADING = { status: "loading", rows: null, error: null };
+var UNAVAILABLE = { status: "unavailable", rows: null, error: null };
+var INITIAL_INTERNAL = { cacheKey: null, data: LOADING };
+function columnsFingerprint(columns) {
+  return columns.map((c) => `${c.key}:${c.type ?? "string"}`).join("|");
+}
+function useTableArtifactData(presignedUrl, columns) {
+  const colsKey = (0, import_react6.useMemo)(() => columnsFingerprint(columns), [columns]);
+  const cacheKey = presignedUrl ? `${presignedUrl}::${colsKey}` : null;
+  const [state, setState] = (0, import_react6.useState)(INITIAL_INTERNAL);
+  (0, import_react6.useEffect)(() => {
+    if (!presignedUrl) return;
+    const controller = new AbortController();
+    fetch(presignedUrl, {
+      signal: controller.signal,
+      headers: { Accept: "text/csv" },
+      // Presigned URLs are cross-origin S3 in production and don't need credentials. Explicit
+      // omit so a same-origin URL (compromised payload, local dev) can't accidentally receive
+      // session cookies or auth headers.
+      credentials: "omit"
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(`Failed to load table data (${response.status})`);
+      return response.text();
+    }).then((text2) => {
+      if (controller.signal.aborted) return;
+      try {
+        const rows = parseCsv(text2, columns);
+        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "ready", rows, error: null } });
+      } catch (parseError) {
+        console.error("[TableArtifact] CSV parse failed", parseError);
+        const err = parseError instanceof Error ? parseError : new Error(String(parseError));
+        setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+      }
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      console.error("[TableArtifact] Fetch failed", error);
+      const err = error instanceof Error ? error : new Error(String(error));
+      setState({ cacheKey: `${presignedUrl}::${colsKey}`, data: { status: "error", rows: null, error: err } });
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [presignedUrl, colsKey]);
+  if (!presignedUrl) return UNAVAILABLE;
+  if (state.cacheKey !== cacheKey) return LOADING;
+  return state.data;
+}
+
+// src/components/artifacts/table-artifact/validate.ts
+function isValidTableConfig(config) {
+  if (!config || typeof config !== "object") return false;
+  const candidate = config;
+  if (!Array.isArray(candidate.columns)) return false;
+  if (candidate.columns.length === 0) return false;
+  return candidate.columns.every(isValidTableColumn);
+}
+function isValidTableColumn(column) {
+  if (!column || typeof column !== "object") return false;
+  const candidate = column;
+  if (typeof candidate.key !== "string" || candidate.key.length === 0) return false;
+  if (typeof candidate.label !== "string") return false;
+  return true;
+}
+
+// src/components/artifacts/table-artifact/table-artifact.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TITLE_CLASSES = "text-sm font-semibold text-foreground";
+var TABLE_MAX_BODY_HEIGHT = 480;
+var MAX_SHIMMER_ROWS = 10;
+var MSG_UNAVAILABLE = "Table data is unavailable.";
+function TableArtifact({ artifact }) {
+  const validConfig = isValidTableConfig(artifact.config);
+  const validColumns = validConfig ? artifact.config.columns : null;
+  (0, import_react7.useEffect)(() => {
+    if (validConfig) return;
+    console.warn("[clay] TableArtifact: malformed `config` \u2014 skipping render.");
+  }, [validConfig]);
+  const data2 = useTableArtifactData(
+    validConfig ? artifact.protectedAsset?.presignedUrl ?? null : null,
+    validColumns ?? []
   );
+  const presignedUrl = artifact.protectedAsset?.presignedUrl ?? null;
+  if (!validConfig || !validColumns) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
+        presignedUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl }) }) : null
+      ] }),
+      /* @__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 }) })
+    ] });
+  }
+  return (
+    // The table body owns its own scroll container (`ArtifactTable` inside `TableArtifactContent`).
+    // Disable the outer overflow container so only one scroll context exists — this prevents
+    // double-scroll nesting and lets `useScrollShadow` find the correct scroll ancestor.
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Artifact, { className: "shadow-none w-full rounded-2xl bg-background/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ArtifactHeader, { className: "bg-background/70", children: [
+        artifact.title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactTitle, { className: TITLE_CLASSES, children: artifact.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactActions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactDownloadButton, { href: presignedUrl ?? "" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArtifactContent, { className: "p-0 overflow-visible", style: { maxHeight: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        TableArtifactContent,
+        {
+          columns: validColumns,
+          data: data2,
+          knownRowCount: artifact.config.stats?.rowCount,
+          maxShimmerRows: MAX_SHIMMER_ROWS,
+          maxBodyHeight: TABLE_MAX_BODY_HEIGHT,
+          unavailableMessage: MSG_UNAVAILABLE
+        }
+      ) })
+    ] })
+  );
+}
+
+// src/components/artifacts/table-artifact/to-clipboard-text.ts
+function tableArtifactToClipboardText(artifact) {
+  const trimmedTitle = artifact.title?.trim();
+  return trimmedTitle || "Table";
+}
+
+// src/components/artifacts/artifact-services/table-artifact-service.ts
+var TableArtifactService = {
+  type: artifactTypes.TABLE,
+  Component: TableArtifact,
+  toClipboardText: tableArtifactToClipboardText
+};
+
+// src/components/artifacts/artifact-services/index.ts
+var ArtifactServices = {
+  [artifactTypes.TABLE]: TableArtifactService
+};
+function artifactToClipboardText(artifact) {
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) {
+    return `[Artifact: ${artifact.title ?? artifact.type}]`;
+  }
+  return entry.toClipboardText(artifact);
+}
+
+// src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ArtifactRefBlock({ block }) {
+  const { artifact } = block.payload;
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) return null;
+  const { Component } = entry;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { artifact });
 }
 
+// src/components/blocks/block-services/artifact-ref-block-service.ts
+var ArtifactRefBlockService = {
+  type: blockTypes.ARTIFACT_REF,
+  Component: ArtifactRefBlock,
+  /**
+   * Delegates to the registered artifact component's `toClipboardText`. Falls back to
+   * `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type
+   * has no registered component, so copy never silently produces an empty string.
+   */
+  toClipboardText: (block) => artifactToClipboardText(block.payload.artifact)
+};
+
 // src/utils/markdown-to-plain-text.ts
 var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
 var PLACEHOLDER_SUFFIX = "\u200B\u200B";
@@ -17171,18 +17421,253 @@ function markdownToPlainText(markdown) {
   return result;
 }
 
+// src/components/blocks/text-block/text-block.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_breaks = __toESM(require("remark-breaks"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+
+// src/components/blocks/scrollable-table/scrollable-table-styles.ts
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var TableContainer = import_styled_components3.default.div`
+  position: relative;
+  margin-block: 8px 16px;
+`;
+var TableScroll = import_styled_components3.default.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+// src/components/blocks/scrollable-table/scrollable-table.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ScrollableTable({ node: _node, ...props }) {
+  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 }) }) });
+}
+
+// src/components/blocks/text-block/sanitize.ts
+function sanitize(text2) {
+  return text2.split("\n").filter((line) => {
+    const t = line.trim();
+    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
+  }).join("\n");
+}
+
+// src/components/blocks/text-block/text-block-styles.ts
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var TextBlockWrapper = import_styled_components4.default.div`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
+  color: ${colors["brown-100"]};
+  word-break: break-word;
+
+  & h1 {
+    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
+    margin-block: 20px;
+  }
+
+  & h2 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
+    margin-block: 12px;
+  }
+
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
+    margin-block: 8px;
+  }
+
+  & strong {
+    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
+  }
+
+  & p {
+    margin-block: 0px;
+  }
+
+  & p + p {
+    margin-block: 8px 0px;
+  }
+
+  & ul,
+  & ol {
+    margin-block: 16px;
+    padding-left: 20px;
+  }
+
+  & li + li {
+    margin-block: 4px;
+  }
+
+  & ol {
+    list-style-type: decimal;
+  }
+
+  & ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  & ol ol ol {
+    list-style-type: lower-roman;
+  }
+
+  & a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+    transition: color 75ms ease-in-out;
+
+    &:hover {
+      color: ${colors["blue-600"]};
+    }
+  }
+
+  & hr {
+    border: none;
+    border-top: 1px solid ${colors["brown-40"]};
+    margin-block: 20px;
+  }
+
+  & table {
+    margin: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  & th,
+  & td {
+    border: none;
+    border-bottom: 1px solid ${colors["brown-40"]};
+    text-align: left;
+  }
+
+  & th {
+    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
+    padding: 8px;
+  }
+
+  & td {
+    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+    padding: 16px 8px;
+    min-width: 150px;
+    width: 1%;
+  }
+
+  & td strong {
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  & blockquote {
+    margin-block: 4px;
+    margin-inline: 0px;
+    padding-left: 16px;
+    border-left: 4px solid ${colors["brown-40"]};
+    color: ${colors["brown-80"]};
+  }
+`;
+
+// src/components/blocks/text-block/text-block.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var markdownComponents = {
+  table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollableTable, { ...tableProps }))
+};
+function TextBlock({ block }) {
+  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) }) });
+}
+
+// src/components/blocks/block-services/text-block-service.ts
+var TextBlockService = {
+  type: blockTypes.TEXT,
+  Component: TextBlock,
+  /**
+   * Converts the block's markdown source to plain text so the final clipboard value is clean
+   * when pasted into tools that don't render markdown. Each block type owns its own clipboard
+   * conversion so `useCopyToClipboard` can write text verbatim without a second pass.
+   */
+  toClipboardText: (block) => markdownToPlainText(block.payload.text)
+};
+
+// src/components/blocks/block-services/index.ts
+var BlockServices = {
+  [blockTypes.TEXT]: TextBlockService,
+  [blockTypes.ARTIFACT_REF]: ArtifactRefBlockService
+};
+
+// src/components/blocks/block/block.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Block({ block }) {
+  const service = BlockServices[block.type];
+  if (!service) return null;
+  const { Component } = service;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, { block });
+}
+
+// src/components/blocks/block-context/block-context.tsx
+var import_react8 = require("react");
+var BlockContext = (0, import_react8.createContext)(null);
+function useBlockContext() {
+  return (0, import_react8.useContext)(BlockContext) ?? {};
+}
+
+// src/components/chat/chat-message/chat-message.tsx
+var import_react12 = require("react");
+
+// src/components/chat/hooks/copy-message-text.ts
+function copyMessageText(message) {
+  const parts = [];
+  for (const block of message.blocks) {
+    const service = BlockServices[block.type];
+    if (!service) continue;
+    if (!service.toClipboardText) continue;
+    const text2 = service.toClipboardText(block);
+    if (text2) parts.push(text2);
+  }
+  if (parts.length === 0) return message.fallbackText;
+  return parts.join("\n\n");
+}
+
+// src/components/chat/chat-message-actions/chat-message-actions.tsx
+var import_react11 = require("react");
+
+// src/components/chat/chat-context/chat-context.ts
+var import_react9 = require("react");
+var ChatContext = (0, import_react9.createContext)(null);
+function useChatContext() {
+  const context = (0, import_react9.useContext)(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a Chat.Root component");
+  }
+  return context;
+}
+
+// src/components/chat/hooks/use-copy-to-clipboard.ts
+var import_react10 = require("react");
+
+// src/utils/clipboard.ts
+function copyToClipboard(text2, options) {
+  navigator.clipboard.writeText(text2).then(
+    () => options?.onSuccess?.(),
+    (error) => options?.onFailure?.(error)
+  );
+}
+
 // src/components/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
-  const timeoutRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [isCopied, setIsCopied] = (0, import_react10.useState)(false);
+  const timeoutRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, []);
-  const copy = (0, import_react5.useCallback)((text2) => {
-    copyToClipboard(markdownToPlainText(text2), {
+  const copy = (0, import_react10.useCallback)((text2) => {
+    copyToClipboard(text2, {
       onSuccess: () => {
         setIsCopied(true);
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -17221,24 +17706,24 @@ var AnimatedAction = import_styled_components5.default.div`
 `;
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = (0, import_react6.useCallback)(() => {
+  const handleCopy = (0, import_react11.useCallback)(() => {
     copy(content2);
     onCopyMessage?.(messageId);
   }, [content2, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react6.useCallback)(() => {
+  const handleThumbUp = (0, import_react11.useCallback)(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react6.useCallback)(() => {
+  const handleThumbDown = (0, import_react11.useCallback)(() => {
     onThumbDownClick?.(messageId, isHelpful === false ? null : false);
   }, [messageId, isHelpful, onThumbDownClick]);
   const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
   const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ActionsContainer, { $role: role, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       IconButton,
       {
         icon: isCopied ? IconCheck : IconCopy,
@@ -17246,7 +17731,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -17255,7 +17740,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": "Good response"
       }
     ) }),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -17293,19 +17778,28 @@ var MessageBubble = import_styled_components6.default.div`
   padding: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "12px 16px" : "0"};
   border-radius: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "16px" : "0"};
   max-width: 100%;
+  width: 100%;
   min-width: 0;
+  /* Vertical rhythm between consecutive blocks — renderer-owned, not agent-emitted.
+   * Industry standard (Claude, ChatGPT, Vercel AI Elements): the chat renderer applies
+   * spacing via CSS; agents emit semantic blocks only. Value matches the MessageContainer
+   * gap. TODO: replace 12px with a clay spacing token when a spacing scale is added. */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 `;
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatMessageContent, { content: message.content, messageId: message.id }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const clipboardText = (0, import_react12.useMemo)(() => copyMessageText(message), [message]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContainer, { $role: message.role, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageBubble, { $role: message.role, "data-testid": "message-bubble", children: message.blocks.map((block, index2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Block, { block }, index2)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ChatMessageActions,
       {
         messageId: message.id,
-        content: message.content,
+        content: clipboardText,
         role: message.role,
         isHelpful: message.isHelpful
       }
@@ -17350,20 +17844,20 @@ var Key = import_styled_components7.default.kbd`
 `;
 
 // src/components/keyboard-shortcut/keyboard-shortcut.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function KeyboardShortcut({
   keys,
   variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
 }
 
 // src/components/keyboard-shortcut/icons/icon-ctrl.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function IconCtrl(props) {
   const { width: width2 = 24, height: height2 = 24, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "text",
     {
       x: "50%",
@@ -17380,7 +17874,7 @@ function IconCtrl(props) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_react8 = require("react");
+var import_react14 = require("react");
 
 // src/components/lottie/lottie-styles.ts
 var import_styled_components8 = __toESM(require("styled-components"), 1);
@@ -17396,7 +17890,7 @@ var LottieContainer = import_styled_components8.default.div`
 `;
 
 // src/components/lottie/use-lottie.ts
-var import_react7 = require("react");
+var import_react13 = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
   animationData: animationData2,
@@ -17411,17 +17905,17 @@ function useLottie({
   onLoopComplete,
   onEnterFrame
 }) {
-  const containerRef = (0, import_react7.useRef)(null);
-  const animationRef = (0, import_react7.useRef)(null);
-  const onAnimationLoadedRef = (0, import_react7.useRef)(onAnimationLoaded);
-  const onCompleteRef = (0, import_react7.useRef)(onComplete);
-  const onLoopCompleteRef = (0, import_react7.useRef)(onLoopComplete);
-  const onEnterFrameRef = (0, import_react7.useRef)(onEnterFrame);
+  const containerRef = (0, import_react13.useRef)(null);
+  const animationRef = (0, import_react13.useRef)(null);
+  const onAnimationLoadedRef = (0, import_react13.useRef)(onAnimationLoaded);
+  const onCompleteRef = (0, import_react13.useRef)(onComplete);
+  const onLoopCompleteRef = (0, import_react13.useRef)(onLoopComplete);
+  const onEnterFrameRef = (0, import_react13.useRef)(onEnterFrame);
   onAnimationLoadedRef.current = onAnimationLoaded;
   onCompleteRef.current = onComplete;
   onLoopCompleteRef.current = onLoopComplete;
   onEnterFrameRef.current = onEnterFrame;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!containerRef.current) return;
     const anim = import_lottie_web.default.loadAnimation({
       container: containerRef.current,
@@ -17513,8 +18007,8 @@ function createLottieRef(animationRef) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Lottie = (0, import_react8.forwardRef)(function Lottie2({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Lottie = (0, import_react14.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
   loop,
@@ -17544,8 +18038,8 @@ var Lottie = (0, import_react8.forwardRef)(function Lottie2({
     onLoopComplete,
     onEnterFrame
   });
-  (0, import_react8.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  (0, import_react14.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -17559,7 +18053,7 @@ var Lottie = (0, import_react8.forwardRef)(function Lottie2({
 });
 
 // src/components/text-area/text-area.tsx
-var import_react9 = require("react");
+var import_react15 = require("react");
 
 // src/utils/merge-refs.ts
 function mergeRefs(...refs) {
@@ -17599,23 +18093,23 @@ var StyledTextArea = import_styled_components9.default.textarea`
 `;
 
 // src/components/text-area/text-area.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextArea = (0, import_react9.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
-  const internalRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useLayoutEffect)(() => {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TextArea = (0, import_react15.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
+  const internalRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useLayoutEffect)(() => {
     const el = internalRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.height = `${el.scrollHeight}px`;
     }
   }, [value2]);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react15.useCallback)(
     (e) => {
       onChange(e.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     StyledTextArea,
     {
       ref: mergeRefs(internalRef, externalRef),
@@ -17685,21 +18179,26 @@ function parseMarkdownTable(markdown, tableIndex = 0) {
   return null;
 }
 
-// src/utils/convert-table-to-csv.ts
-function escapeField(field) {
-  if (field.includes(",") || field.includes('"') || field.includes("\n") || field.includes("\r")) {
-    return `"${field.replace(/"/g, '""')}"`;
+// src/utils/escape-csv-field.ts
+var FORMULA_TRIGGERS = /* @__PURE__ */ new Set(["=", "+", "@", "	", "\r"]);
+function escapeCsvField(field) {
+  const needsNeutralise = field.length > 0 && FORMULA_TRIGGERS.has(field[0]);
+  const safeField = needsNeutralise ? `	${field}` : field;
+  if (needsNeutralise || safeField.includes(",") || safeField.includes('"') || safeField.includes("\n") || safeField.includes("\r")) {
+    return `"${safeField.replace(/"/g, '""')}"`;
   }
-  return field;
+  return safeField;
 }
+
+// src/utils/convert-table-to-csv.ts
 function convertTableToCSV(table) {
-  const headerRow = table.columns.map(escapeField).join(",");
-  const dataRows = table.rows.map((row) => row.map(escapeField).join(","));
+  const headerRow = table.columns.map(escapeCsvField).join(",");
+  const dataRows = table.rows.map((row) => row.map(escapeCsvField).join(","));
   return [headerRow, ...dataRows].join("\r\n");
 }
 
 // src/components/button/button.tsx
-var import_react10 = require("react");
+var import_react16 = require("react");
 
 // src/components/button/button-styles.ts
 var import_styled_components10 = __toESM(require("styled-components"), 1);
@@ -17821,8 +18320,8 @@ var StyledButton = import_styled_components10.default.button`
 `;
 
 // src/components/button/button.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Button2 = (0, import_react10.forwardRef)(function Button3({
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Button2 = (0, import_react16.forwardRef)(function Button3({
   children,
   variant = BUTTON_VARIANT.SOLID,
   intent = BUTTON_INTENT.PRIMARY,
@@ -17834,8 +18333,8 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
   className,
   "aria-label": ariaLabel
 }, ref) {
-  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, size: 16 }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     StyledButton,
     {
       ref,
@@ -17849,7 +18348,7 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
       "aria-label": ariaLabel,
       children: [
         iconPosition === ICON_POSITION.LEADING && iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children }),
         iconPosition === ICON_POSITION.TRAILING && iconElement
       ]
     }
@@ -17857,9 +18356,16 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ArtifactDownloadButton,
+  ArtifactRefBlock,
+  ArtifactRefBlockService,
+  ArtifactServices,
   BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
+  Block,
+  BlockContext,
+  BlockServices,
   Button,
   ChatContext,
   ChatMessage,
@@ -17871,16 +18377,25 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
   KeyboardShortcut,
   Lottie,
   MESSAGE_ROLE,
+  TableArtifact,
   TextArea,
+  TextBlockService,
+  artifactToClipboardText,
+  artifactTypes,
+  blockTypes,
   colors,
   convertTableToCSV,
+  copyMessageText,
+  escapeCsvField,
   fontFamilies,
+  isSafeDownloadUrl,
   markdownToPlainText,
   mergeRefs,
   parseMarkdownTable,
   typographyMixin,
   typographyStyles,
   typographyTypes,
+  useBlockContext,
   useChatContext,
   useCopyToClipboard
 });
@@ -17900,6 +18415,7 @@ lottie-web/build/player/lottie.js:
 @tabler/icons-react/dist/esm/createReactComponent.mjs:
 @tabler/icons-react/dist/esm/icons/IconCheck.mjs:
 @tabler/icons-react/dist/esm/icons/IconCopy.mjs:
+@tabler/icons-react/dist/esm/icons/IconDownload.mjs:
 @tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
 @tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
 @tabler/icons-react/dist/esm/tabler-icons-react.mjs: