@shapesos/clay 0.18.0 → 0.19.1

package/dist/chunk-PISZYS2H.js

@@ -0,0 +1,406 @@
+import {
+  CopyButton
+} from "./chunk-EIAWZXE4.js";
+import {
+  markdownToPlainText
+} from "./chunk-NMKKU2UG.js";
+import {
+  ArtifactServices,
+  artifactToClipboardText
+} from "./chunk-63AGNGKG.js";
+import {
+  IconChevronDown,
+  IconFlask2Filled
+} from "./chunk-CSTCTO3B.js";
+import {
+  Badge
+} from "./chunk-EXRNGIQ2.js";
+import {
+  Icon
+} from "./chunk-OLJIJYB5.js";
+import {
+  typographyMixin,
+  typographyTypes
+} from "./chunk-UXT2H3FM.js";
+import {
+  colors
+} from "./chunk-SN3ORQSJ.js";
+import {
+  DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_ROW_CLASS,
+  DataTable,
+  TableCell,
+  TableHead,
+  TableRow
+} from "./chunk-HU5W7CGE.js";
+
+// src/components/blocks/types.ts
+var blockTypes = {
+  TEXT: "TEXT",
+  ARTIFACT_REF: "ARTIFACT_REF",
+  NOTIFICATION_DRAFT: "NOTIFICATION_DRAFT"
+};
+
+// src/components/blocks/artifact-ref-block/artifact-ref-block.tsx
+import { jsx } from "react/jsx-runtime";
+function ArtifactRefBlock({ block }) {
+  const { artifact, labels, callbacks } = block.payload;
+  const entry = ArtifactServices[artifact.type];
+  if (!entry) return null;
+  const Component = entry.Component;
+  return /* @__PURE__ */ jsx(Component, { artifact, labels, callbacks });
+}
+
+// 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/components/blocks/notification-draft-block/types.ts
+var notificationChannels = {
+  /** Branded email — renders a From/subject header. */
+  EMAIL: "email",
+  /** Slack DM — renders as a chat bubble, no subject. */
+  SLACK: "slack",
+  /** Microsoft Teams DM — renders as a chat bubble, no subject. */
+  TEAMS: "teams"
+};
+var notificationEmailTypes = {
+  /** Recipient's work email. */
+  WORK: "work",
+  /** Recipient's personal email. */
+  PERSONAL: "personal"
+};
+
+// src/components/blocks/notification-draft-block/notification-draft-block.tsx
+import { useState } from "react";
+
+// src/components/blocks/markdown/markdown.tsx
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// src/components/blocks/scrollable-table/scrollable-table-styles.ts
+import styled from "styled-components";
+var TableContainer = styled.div`
+  position: relative;
+  margin-block: 8px 16px;
+`;
+var TableScroll = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+// src/components/blocks/scrollable-table/scrollable-table.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ScrollableTable({ node: _node, ...props }) {
+  return /* @__PURE__ */ jsx2(TableContainer, { children: /* @__PURE__ */ jsx2(TableScroll, { children: /* @__PURE__ */ jsx2("table", { ...props }) }) });
+}
+
+// src/components/blocks/text-block/sanitize.ts
+function sanitize(text) {
+  return text.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
+import styled2 from "styled-components";
+var TextBlockWrapper = styled2.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;
+  }
+
+  & ul {
+    list-style-type: disc;
+  }
+
+  & ul ul {
+    list-style-type: circle;
+  }
+
+  & ul ul ul {
+    list-style-type: square;
+  }
+
+  & 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/markdown/markdown.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var markdownComponents = {
+  table: ((tableProps) => /* @__PURE__ */ jsx3(ScrollableTable, { ...tableProps }))
+};
+function Markdown({ children }) {
+  return /* @__PURE__ */ jsx3(TextBlockWrapper, { children: /* @__PURE__ */ jsx3(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], components: markdownComponents, children: sanitize(children) }) });
+}
+
+// src/components/blocks/notification-draft-block/to-text.ts
+function notificationDraftToText(payload) {
+  const { channel, subject, body } = payload;
+  const text = markdownToPlainText(body);
+  return channel === notificationChannels.EMAIL && subject ? `${subject}
+
+${text}` : text;
+}
+
+// src/components/blocks/notification-draft-block/notification-draft-block.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var CHIP_LIMIT = 3;
+var RECIPIENTS_MAX_HEIGHT = 320;
+function chipLabel(recipient) {
+  return recipient.name ?? recipient.email ?? recipient.employeeId;
+}
+function channelCellText(recipient) {
+  return recipient.fallback ? `${recipient.channelLabel} (fallback)` : recipient.channelLabel;
+}
+function FieldLabel({ children }) {
+  return /* @__PURE__ */ jsx4("span", { className: "text-geist-label-caption-medium tracking-wide text-brown-60", children });
+}
+function RecipientChips({ recipients }) {
+  const shown = recipients.slice(0, CHIP_LIMIT);
+  const overflow = recipients.length - shown.length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    shown.map((recipient) => /* @__PURE__ */ jsx4(Badge, { variant: "outline", children: chipLabel(recipient) }, recipient.employeeId)),
+    overflow > 0 && /* @__PURE__ */ jsx4(Badge, { variant: "subtle", children: `+${overflow}` })
+  ] });
+}
+function RecipientsTable({ recipients }) {
+  return /* @__PURE__ */ jsx4(
+    DataTable,
+    {
+      maxBodyHeight: RECIPIENTS_MAX_HEIGHT,
+      header: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+        /* @__PURE__ */ jsx4(TableHead, { scope: "col", className: DATA_TABLE_HEAD_CLASS, children: "Name" }),
+        /* @__PURE__ */ jsx4(TableHead, { scope: "col", className: DATA_TABLE_HEAD_CLASS, children: "Email" }),
+        /* @__PURE__ */ jsx4(TableHead, { scope: "col", className: DATA_TABLE_HEAD_CLASS, children: "Channel" })
+      ] }),
+      children: recipients.map((recipient) => /* @__PURE__ */ jsxs(TableRow, { className: DATA_TABLE_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx4(TableCell, { className: DATA_TABLE_CELL_CLASS, children: recipient.name ?? "\u2014" }),
+        /* @__PURE__ */ jsx4(TableCell, { className: DATA_TABLE_CELL_CLASS, children: recipient.email ?? "\u2014" }),
+        /* @__PURE__ */ jsx4(TableCell, { className: DATA_TABLE_CELL_CLASS, children: /* @__PURE__ */ jsx4(Badge, { tone: recipient.fallback ? "warning" : "neutral", variant: "subtle", children: channelCellText(recipient) }) })
+      ] }, recipient.employeeId))
+    }
+  );
+}
+function NotificationDraftBlock({ block }) {
+  const { channel, subject, body, recipients } = block.payload;
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const showSubject = channel === notificationChannels.EMAIL && subject;
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl border border-brown-30 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-b border-brown-30 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-geist-body-s-semi-bold text-brown-100", children: "Notification draft" }),
+          /* @__PURE__ */ jsxs(Badge, { tone: "violet", variant: "subtle", size: "sm", className: "gap-1 py-1", children: [
+            /* @__PURE__ */ jsx4(Icon, { icon: IconFlask2Filled, size: 12 }),
+            "Labs"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(CopyButton, { text: notificationDraftToText(block.payload), copyLabel: "Copy draft", copiedLabel: "Copied" })
+      ] }),
+      showSubject && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx4(FieldLabel, { children: "Title" }),
+        /* @__PURE__ */ jsx4("p", { className: "text-geist-body-s-medium text-brown-100", children: subject })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4(FieldLabel, { children: `Recipients (${recipients.length})` }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": detailsOpen,
+              onClick: () => setDetailsOpen((open) => !open),
+              className: "inline-flex items-center gap-1 text-geist-label-caption-medium text-brown-70 transition-colors hover:text-brown-100",
+              children: [
+                "Details",
+                /* @__PURE__ */ jsx4(Icon, { icon: IconChevronDown, size: 14, className: detailsOpen ? "rotate-180" : void 0 })
+              ]
+            }
+          )
+        ] }),
+        detailsOpen ? /* @__PURE__ */ jsx4(RecipientsTable, { recipients }) : /* @__PURE__ */ jsx4(RecipientChips, { recipients })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx4(Markdown, { children: body }) })
+  ] });
+}
+
+// src/components/blocks/block-services/notification-draft-block-service.ts
+var NotificationDraftBlockService = {
+  type: blockTypes.NOTIFICATION_DRAFT,
+  Component: NotificationDraftBlock,
+  /**
+   * Plain-text clipboard form of the drafted notification — shared with the in-block copy button
+   * via {@link notificationDraftToText} so both copy the same text.
+   */
+  toClipboardText: (block) => notificationDraftToText(block.payload)
+};
+
+// src/components/blocks/text-block/text-block.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TextBlock({ block }) {
+  return /* @__PURE__ */ jsx5(Markdown, { children: 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,
+  [blockTypes.NOTIFICATION_DRAFT]: NotificationDraftBlockService
+};
+
+// src/components/blocks/block/block.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Block({ block }) {
+  const service = BlockServices[block.type];
+  if (!service) return null;
+  const { Component } = service;
+  return /* @__PURE__ */ jsx6(Component, { block });
+}
+
+export {
+  blockTypes,
+  ArtifactRefBlock,
+  ArtifactRefBlockService,
+  notificationChannels,
+  notificationEmailTypes,
+  NotificationDraftBlock,
+  NotificationDraftBlockService,
+  TextBlockService,
+  BlockServices,
+  Block
+};
+//# sourceMappingURL=chunk-PISZYS2H.js.map

package/dist/chunk-PISZYS2H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/blocks/types.ts","../src/components/blocks/artifact-ref-block/artifact-ref-block.tsx","../src/components/blocks/block-services/artifact-ref-block-service.ts","../src/components/blocks/notification-draft-block/types.ts","../src/components/blocks/notification-draft-block/notification-draft-block.tsx","../src/components/blocks/markdown/markdown.tsx","../src/components/blocks/scrollable-table/scrollable-table-styles.ts","../src/components/blocks/scrollable-table/scrollable-table.tsx","../src/components/blocks/text-block/sanitize.ts","../src/components/blocks/text-block/text-block-styles.ts","../src/components/blocks/notification-draft-block/to-text.ts","../src/components/blocks/block-services/notification-draft-block-service.ts","../src/components/blocks/text-block/text-block.tsx","../src/components/blocks/block-services/text-block-service.ts","../src/components/blocks/block-services/index.ts","../src/components/blocks/block/block.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\n\nimport type { ArtifactCallbacksOf, ArtifactLabelsOf, ArtifactRecord } from \"@/components/artifacts/types\";\nimport type { NotificationDraftBlockRecord } from \"./notification-draft-block/types\";\n\n/** Block-type discriminator constants. Mirrors the wire shape from io-server / shapes-agent. */\nexport const blockTypes = {\n  TEXT: \"TEXT\",\n  ARTIFACT_REF: \"ARTIFACT_REF\",\n  NOTIFICATION_DRAFT: \"NOTIFICATION_DRAFT\",\n} as const;\n\n/** Discriminator for content blocks. */\nexport type BlockType = (typeof blockTypes)[keyof typeof blockTypes];\n\n/** Plain-text content block — rendered as Markdown. */\nexport interface TextBlockRecord {\n  /** Block-type discriminator. */\n  type: typeof blockTypes.TEXT;\n  /** Type-specific data; kept as `payload` to match the wire shape 1:1. */\n  payload: {\n    /** The Markdown source for this text segment. */\n    text: string;\n  };\n}\n\n/**\n * Reference-to-an-artifact content block — dispatched to the per-type artifact component.\n *\n * The artifact-domain types (`ArtifactRecord`, `TableArtifactRecord`, etc.) live in\n * `@/components/artifacts/types` so the artifact layer can be consumed independently of the\n * block layer (e.g. by a future surface that renders an artifact outside chat). The block layer\n * imports them here to wrap an artifact in an `ARTIFACT_REF` block.\n *\n * `ArtifactRefBlockRecord` is a *distributed* union over `ArtifactRecord` branches — TS narrows\n * `labels` and `callbacks` to the slice matching `artifact.type` via `ArtifactLabelsOf<T>` /\n * `ArtifactCallbacksOf<T>`. Without this distribution, `Partial<ChartLabels | TableLabels>`\n * collapses to `Partial<ChartLabels> | Partial<TableLabels>` and TS accepts chart-only keys on\n * a TABLE block's payload (the discriminator becomes load-bearing only at runtime, not in the\n * type system).\n */\nexport type ArtifactRefBlockRecord = ArtifactRecord extends infer TArtifact\n  ? TArtifact extends ArtifactRecord\n    ? {\n        /** Block-type discriminator. */\n        type: typeof blockTypes.ARTIFACT_REF;\n        /** Type-specific data; kept as `payload` to match the wire shape 1:1. */\n        payload: {\n          /** The artifact's stable identifier, used for keying / future cross-message reuse. */\n          artifactId: string;\n          /** Inlined artifact metadata — clients fetch the underlying data via `artifact.protectedAsset.presignedUrl`. */\n          artifact: TArtifact;\n          /**\n           * Optional consumer-supplied labels for the rendered artifact's action buttons + status\n           * messages — a flat slice narrowed by `artifact.type`. NOT a wire field; the consumer\n           * constructs this from their i18n layer when materialising the block-record from the\n           * server payload, then passes the augmented block to `<Block>`. The dispatcher forwards\n           * the slice directly to the matching renderer — no per-type key wrapping (the block\n           * already carries the discriminator).\n           *\n           * TS catches cross-type assignments here: `block.payload.labels = { downloadCsv: 'X' }`\n           * on a `TableArtifactRecord`-typed block is a type error because `downloadCsv` isn't a\n           * `TableArtifactLabels` key.\n           */\n          labels?: Partial<ArtifactLabelsOf<TArtifact>>;\n          /**\n           * Optional side-effect callbacks for actions on the rendered artifact (e.g. `onDownload`).\n           * Flat slice narrowed by `artifact.type` via `ArtifactCallbacksOf<T>`. NOT a wire field\n           * — the consumer wires this once to bridge artifact actions to their analytics /\n           * observability layer.\n           */\n          callbacks?: Partial<ArtifactCallbacksOf<TArtifact>>;\n        };\n      }\n    : never\n  : never;\n\n/** Discriminated union of all supported content blocks. Additive — new types extend this union. */\nexport type BlockRecord = TextBlockRecord | ArtifactRefBlockRecord | NotificationDraftBlockRecord;\n\n/** Props every concrete block component receives from the dispatcher. */\nexport interface BlockComponentProps<TBlock extends BlockRecord = BlockRecord> {\n  /** The block to render. */\n  block: TBlock;\n}\n\n/** Per-block-type service — registry entry that pairs a discriminator with its concrete component. */\nexport interface BlockService<TBlock extends BlockRecord = BlockRecord> {\n  /** Discriminator value this service handles. */\n  type: BlockType;\n  /** React component that renders a block of this type. */\n  Component: ComponentType<BlockComponentProps<TBlock>>;\n  /**\n   * Returns a plain-text or markdown string representation of this block suitable for clipboard\n   * copy. Called by `copyMessageText` when the user clicks \"copy message\".\n   *\n   * - `TextBlockService`: returns `block.payload.text` verbatim (markdown preserved).\n   * - `ArtifactRefBlockService`: delegates to `ArtifactServices[artifact.type].toClipboardText`.\n   *   Falls back to `[Artifact: <title>]` when the artifact type has no registered component.\n   *\n   * Optional so external `BlockService` implementors don't break on upgrade — when omitted, the\n   * aggregator treats the block as contributing the empty string (silently skipped). Implementations\n   * must be pure, synchronous functions — no async, no hooks, no side effects.\n   */\n  toClipboardText?: (block: TBlock) => string;\n}\n","import type { ComponentType, ReactNode } from \"react\";\n\nimport { ArtifactServices } from \"@/components/artifacts/artifact-services\";\nimport type { ArtifactRefBlockRecord, BlockComponentProps } from \"../types\";\n\n/**\n * Renders an `ARTIFACT_REF` block by dispatching the inlined artifact to its per-type component.\n *\n * The cast at the seam is necessary because the registry-based dispatch can't statically prove\n * type-T narrowing — but it's not hiding a bug. `ArtifactRefBlockRecord` is a distributed union\n * over `ArtifactRecord` branches (see `blocks/types.ts`), so TS catches wrong-shape labels at the\n * consumer's construction site: a chart-labels bag assigned to a TABLE block's payload is a type\n * error there, not silently forwarded to the wrong renderer here.\n *\n * Unknown artifact types render as `null` — the map only contains types we know how to render,\n * so an older clay client receiving a future artifact type degrades silently rather than\n * crashing the chat.\n */\nexport function ArtifactRefBlock({ block }: BlockComponentProps<ArtifactRefBlockRecord>): ReactNode {\n  const { artifact, labels, callbacks } = block.payload;\n  const entry = ArtifactServices[artifact.type];\n  if (!entry) return null;\n  // The registry stores `ArtifactService<ArtifactRecord>` (the union), so `entry.Component` is\n  // `ComponentType<ArtifactServiceProps<ArtifactRecord>>`. The labels/callbacks props in the\n  // narrower per-type `ArtifactServiceProps<TArtifact>` are `Partial<ArtifactLabelsOf<TArtifact>>`\n  // which the union doesn't satisfy positionally. Cast forwards the values verbatim — the\n  // runtime invariant is provably correct because the distributed `ArtifactRefBlockRecord` type\n  // enforces it at construction.\n  const Component = entry.Component as ComponentType<{\n    artifact: typeof artifact;\n    labels?: typeof labels;\n    callbacks?: typeof callbacks;\n  }>;\n  return <Component artifact={artifact} labels={labels} callbacks={callbacks} />;\n}\n","import { artifactToClipboardText } from \"@/components/artifacts/artifact-services\";\nimport { ArtifactRefBlock } from \"../artifact-ref-block/artifact-ref-block\";\nimport { blockTypes } from \"../types\";\nimport type { ArtifactRefBlockRecord, BlockService } from \"../types\";\n\nexport const ArtifactRefBlockService: BlockService<ArtifactRefBlockRecord> = {\n  type: blockTypes.ARTIFACT_REF,\n  Component: ArtifactRefBlock,\n  /**\n   * Delegates to the registered artifact component's `toClipboardText`. Falls back to\n   * `[Artifact: <title>]` via `artifactToClipboardText`'s own fallback when the artifact type\n   * has no registered component, so copy never silently produces an empty string.\n   */\n  toClipboardText: (block) => artifactToClipboardText(block.payload.artifact),\n};\n","import { blockTypes } from \"../types\";\n\n/** Delivery channel the drafted notification targets. */\nexport const notificationChannels = {\n  /** Branded email — renders a From/subject header. */\n  EMAIL: \"email\",\n  /** Slack DM — renders as a chat bubble, no subject. */\n  SLACK: \"slack\",\n  /** Microsoft Teams DM — renders as a chat bubble, no subject. */\n  TEAMS: \"teams\",\n} as const;\n\n/** One of the supported notification channels. */\nexport type NotificationChannel = (typeof notificationChannels)[keyof typeof notificationChannels];\n\n/** Which recipient address the email is sent to (email channel only). */\nexport const notificationEmailTypes = {\n  /** Recipient's work email. */\n  WORK: \"work\",\n  /** Recipient's personal email. */\n  PERSONAL: \"personal\",\n} as const;\n\n/** One of the supported email address types. */\nexport type NotificationEmailType = (typeof notificationEmailTypes)[keyof typeof notificationEmailTypes];\n\n/**\n * A single resolved recipient of the drafted notification — the block's one source of recipient\n * truth. The summary chips and the detail table are both projected from this (count, chip labels,\n * and fallback count are all derived, never transmitted separately).\n */\nexport interface NotificationRecipient {\n  /** Stable employee identifier — used as the React key. */\n  employeeId: string;\n  /** Display name; falls back to `email` for the chip label when absent. */\n  name?: string | null;\n  /** Resolved delivery address (work or personal, already resolved server-side). */\n  email?: string | null;\n  /**\n   * Human-readable label for the channel this recipient is reached on (e.g. \"Email\", \"Slack\").\n   * Client-provided so clay isn't limited to a fixed channel set and holds no channel copy of its\n   * own — the consumer passes whatever label fits its use case in the payload.\n   */\n  channelLabel: string;\n  /** Whether this recipient is unreachable on the chosen channel and falls back to email. */\n  fallback: boolean;\n}\n\n/**\n * Wire payload for a drafted notification preview — populated by the agent from the\n * `validate_send_notification` dry-run. Presentation only: this block previews what will be\n * sent, it is NOT the approval/confirmation control.\n */\nexport interface NotificationDraftPayload {\n  /** Delivery channel; drives whether a subject title is shown (email only). */\n  channel: NotificationChannel;\n  /** Which address the email is sent to. Email channel only; ignored otherwise. */\n  emailType?: NotificationEmailType;\n  /** Email subject line. Email channel only; absent for slack/teams. */\n  subject?: string;\n  /** Message body (markdown source). Rendered as markdown, identical to chat assistant text. */\n  body: string;\n  /** Resolved From display name, e.g. \"Acme HR via Shapes\". Email channel only. */\n  fromDisplay?: string;\n  /**\n   * Every resolved recipient. Clay derives the count, the summary chips (`name ?? email`, with a\n   * \"+N\" overflow), and the fallback count from this single array.\n   */\n  recipients: NotificationRecipient[];\n}\n\n/** A NOTIFICATION_DRAFT content block — wraps a {@link NotificationDraftPayload}. */\nexport interface NotificationDraftBlockRecord {\n  /** Block-type discriminator. */\n  type: typeof blockTypes.NOTIFICATION_DRAFT;\n  /** Type-specific data; kept as `payload` to match the wire shape 1:1. */\n  payload: NotificationDraftPayload;\n}\n","import type { ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport { IconChevronDown, IconFlask2Filled } from \"@tabler/icons-react\";\n\nimport { Badge } from \"@/components/badge\";\nimport { CopyButton } from \"@/components/copy-button\";\nimport { Icon } from \"@/components/icon\";\nimport {\n  DataTable,\n  DATA_TABLE_CELL_CLASS,\n  DATA_TABLE_HEAD_CLASS,\n  DATA_TABLE_ROW_CLASS,\n  TableCell,\n  TableHead,\n  TableRow,\n} from \"@/components/table\";\nimport { Markdown } from \"../markdown/markdown\";\nimport type { BlockComponentProps } from \"../types\";\nimport { notificationDraftToText } from \"./to-text\";\nimport { type NotificationDraftBlockRecord, type NotificationRecipient, notificationChannels } from \"./types\";\n\n/** Number of recipient chips shown before collapsing the rest into a \"+N\" overflow chip. */\nconst CHIP_LIMIT = 3;\n\n/** Max recipient-table height (px) before it scrolls, engaging the sticky header + scroll shadow. */\nconst RECIPIENTS_MAX_HEIGHT = 320;\n\n/** Chip label for a recipient — name, falling back to email, then the id. */\nfunction chipLabel(recipient: NotificationRecipient): string {\n  return recipient.name ?? recipient.email ?? recipient.employeeId;\n}\n\n/** Channel cell text — the client-provided channel label, marked when it's a fallback. */\nfunction channelCellText(recipient: NotificationRecipient): string {\n  return recipient.fallback ? `${recipient.channelLabel} (fallback)` : recipient.channelLabel;\n}\n\n/** Small muted form-field caption sitting tightly above the value it labels. */\nfunction FieldLabel({ children }: { children: string }): ReactNode {\n  return <span className=\"text-geist-label-caption-medium tracking-wide text-brown-60\">{children}</span>;\n}\n\n/** Collapsed summary: the first few recipients as chips with a \"+N\" overflow. */\nfunction RecipientChips({ recipients }: { recipients: NotificationRecipient[] }): ReactNode {\n  const shown = recipients.slice(0, CHIP_LIMIT);\n  const overflow = recipients.length - shown.length;\n  return (\n    <div className=\"flex flex-wrap items-center gap-1.5\">\n      {shown.map((recipient) => (\n        <Badge key={recipient.employeeId} variant=\"outline\">\n          {chipLabel(recipient)}\n        </Badge>\n      ))}\n      {overflow > 0 && <Badge variant=\"subtle\">{`+${overflow}`}</Badge>}\n    </div>\n  );\n}\n\n/** Expanded detail: one row per recipient with name, email, and resolved channel (fallback tagged). */\nfunction RecipientsTable({ recipients }: { recipients: NotificationRecipient[] }): ReactNode {\n  return (\n    <DataTable\n      maxBodyHeight={RECIPIENTS_MAX_HEIGHT}\n      header={\n        <TableRow className=\"hover:bg-transparent\">\n          <TableHead scope=\"col\" className={DATA_TABLE_HEAD_CLASS}>\n            Name\n          </TableHead>\n          <TableHead scope=\"col\" className={DATA_TABLE_HEAD_CLASS}>\n            Email\n          </TableHead>\n          <TableHead scope=\"col\" className={DATA_TABLE_HEAD_CLASS}>\n            Channel\n          </TableHead>\n        </TableRow>\n      }\n    >\n      {recipients.map((recipient) => (\n        <TableRow key={recipient.employeeId} className={DATA_TABLE_ROW_CLASS}>\n          <TableCell className={DATA_TABLE_CELL_CLASS}>{recipient.name ?? \"—\"}</TableCell>\n          <TableCell className={DATA_TABLE_CELL_CLASS}>{recipient.email ?? \"—\"}</TableCell>\n          <TableCell className={DATA_TABLE_CELL_CLASS}>\n            <Badge tone={recipient.fallback ? \"warning\" : \"neutral\"} variant=\"subtle\">\n              {channelCellText(recipient)}\n            </Badge>\n          </TableCell>\n        </TableRow>\n      ))}\n    </DataTable>\n  );\n}\n\n/**\n * Preview of a drafted notification — one uniform card for every channel. Header carries a \"Labs\"\n * badge (experimental) and a copy-to-clipboard button; the body renders as markdown. Recipients are\n * a single source of truth shown two ways, never both at once: collapsed as summary chips, or\n * expanded (via the \"Details\" toggle) as a Name / Email / Channel table matching the table artifact.\n * The only cross-channel difference is a bold subject title, shown for email. Presentation only.\n */\nexport function NotificationDraftBlock({ block }: BlockComponentProps<NotificationDraftBlockRecord>): ReactNode {\n  const { channel, subject, body, recipients } = block.payload;\n  const [detailsOpen, setDetailsOpen] = useState(false);\n  // Subject is the sole cross-channel difference — email only (§16); slack/teams have no subject line.\n  const showSubject = channel === notificationChannels.EMAIL && subject;\n\n  return (\n    <div className=\"overflow-hidden rounded-2xl border border-brown-30 bg-white\">\n      <div className=\"flex flex-col gap-3 border-b border-brown-30 px-4 py-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-geist-body-s-semi-bold text-brown-100\">Notification draft</span>\n            <Badge tone=\"violet\" variant=\"subtle\" size=\"sm\" className=\"gap-1 py-1\">\n              <Icon icon={IconFlask2Filled} size={12} />\n              Labs\n            </Badge>\n          </div>\n          <CopyButton text={notificationDraftToText(block.payload)} copyLabel=\"Copy draft\" copiedLabel=\"Copied\" />\n        </div>\n\n        {showSubject && (\n          <div className=\"flex flex-col gap-0.5\">\n            <FieldLabel>Title</FieldLabel>\n            <p className=\"text-geist-body-s-medium text-brown-100\">{subject}</p>\n          </div>\n        )}\n\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <FieldLabel>{`Recipients (${recipients.length})`}</FieldLabel>\n            <button\n              type=\"button\"\n              aria-expanded={detailsOpen}\n              onClick={() => setDetailsOpen((open) => !open)}\n              className=\"inline-flex items-center gap-1 text-geist-label-caption-medium text-brown-70 transition-colors hover:text-brown-100\"\n            >\n              Details\n              <Icon icon={IconChevronDown} size={14} className={detailsOpen ? \"rotate-180\" : undefined} />\n            </button>\n          </div>\n          {detailsOpen ? <RecipientsTable recipients={recipients} /> : <RecipientChips recipients={recipients} />}\n        </div>\n      </div>\n\n      <div className=\"px-4 py-3\">\n        <Markdown>{body}</Markdown>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkGfm from \"remark-gfm\";\n\nimport { ScrollableTable } from \"../scrollable-table/scrollable-table\";\nimport { sanitize } from \"../text-block/sanitize\";\nimport { TextBlockWrapper } from \"../text-block/text-block-styles\";\n\nconst markdownComponents = {\n  table: ((tableProps: { node?: unknown; children?: ReactNode }) => (\n    <ScrollableTable {...tableProps} />\n  )) as React.ComponentType<unknown>,\n};\n\n/**\n * Shared markdown renderer for chat content blocks — GFM (tables, strikethrough) + single-newline\n * line breaks, tables wrapped in a scrollable container, prose typography from `TextBlockWrapper`.\n * The single source of the markdown setup so every block (TextBlock, NotificationDraftBlock) renders\n * assistant text identically.\n */\nexport function Markdown({ children }: { children: string }): ReactNode {\n  return (\n    <TextBlockWrapper>\n      <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>\n        {sanitize(children)}\n      </ReactMarkdown>\n    </TextBlockWrapper>\n  );\n}\n","import styled from \"styled-components\";\n\nexport const TableContainer = styled.div`\n  position: relative;\n  margin-block: 8px 16px;\n`;\n\nexport const TableScroll = styled.div`\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n`;\n","import { type ReactNode } from \"react\";\n\nimport { TableContainer, TableScroll } from \"./scrollable-table-styles\";\n\n/** Props for the ScrollableTable component. */\ninterface ScrollableTableProps {\n  /** Unused node prop from react-markdown. */\n  node?: unknown;\n  /** Table children elements. */\n  children?: ReactNode;\n}\n\n/** Renders a markdown table inside a horizontally scrollable wrapper. Read-only — actions live on artifact-tables. */\nexport function ScrollableTable({ node: _node, ...props }: ScrollableTableProps): ReactNode {\n  return (\n    <TableContainer>\n      <TableScroll>\n        <table {...props} />\n      </TableScroll>\n    </TableContainer>\n  );\n}\n","// Strips io-server's `<!-- table-title: ... -->` HTML-comment metadata before rendering.\n// The marker is emitted by the server's CSV-export pipeline so the export button can label\n// the file; it has no place in the visual output. If the server-side format changes\n// (prefix, spacing, closing-tag style), this filter silently stops matching and the\n// raw HTML comment leaks into rendered Markdown — keep this contract aligned with io-server.\nexport function sanitize(text: string): string {\n  return text\n    .split(\"\\n\")\n    .filter((line) => {\n      const t = line.trim();\n      return !(t.startsWith(\"<!-- table-title:\") && t.endsWith(\"-->\"));\n    })\n    .join(\"\\n\");\n}\n","import styled from \"styled-components\";\n\nimport { colors } from \"@/tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"@/tokens/typography\";\n\nexport const TextBlockWrapper = styled.div`\n  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n  color: ${colors[\"brown-100\"]};\n  word-break: break-word;\n\n  & h1 {\n    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};\n    margin-block: 20px;\n  }\n\n  & h2 {\n    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};\n    margin-block: 12px;\n  }\n\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};\n    margin-block: 8px;\n  }\n\n  & strong {\n    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};\n  }\n\n  & p {\n    margin-block: 0px;\n  }\n\n  & p + p {\n    margin-block: 8px 0px;\n  }\n\n  & ul,\n  & ol {\n    margin-block: 16px;\n    padding-left: 20px;\n  }\n\n  & li + li {\n    margin-block: 4px;\n  }\n\n  & ul {\n    list-style-type: disc;\n  }\n\n  & ul ul {\n    list-style-type: circle;\n  }\n\n  & ul ul ul {\n    list-style-type: square;\n  }\n\n  & ol {\n    list-style-type: decimal;\n  }\n\n  & ol ol {\n    list-style-type: lower-alpha;\n  }\n\n  & ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  & a {\n    color: inherit;\n    text-decoration-line: underline;\n    text-decoration-style: dotted;\n    text-decoration-thickness: auto;\n    text-underline-offset: auto;\n    text-underline-position: from-font;\n    transition: color 75ms ease-in-out;\n\n    &:hover {\n      color: ${colors[\"blue-600\"]};\n    }\n  }\n\n  & hr {\n    border: none;\n    border-top: 1px solid ${colors[\"brown-40\"]};\n    margin-block: 20px;\n  }\n\n  & table {\n    margin: 0;\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  & th,\n  & td {\n    border: none;\n    border-bottom: 1px solid ${colors[\"brown-40\"]};\n    text-align: left;\n  }\n\n  & th {\n    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};\n    padding: 8px;\n  }\n\n  & td {\n    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n    padding: 16px 8px;\n    min-width: 150px;\n    width: 1%;\n  }\n\n  & td strong {\n    font-weight: inherit;\n    font-size: inherit;\n    line-height: inherit;\n  }\n\n  & blockquote {\n    margin-block: 4px;\n    margin-inline: 0px;\n    padding-left: 16px;\n    border-left: 4px solid ${colors[\"brown-40\"]};\n    color: ${colors[\"brown-80\"]};\n  }\n`;\n","import { markdownToPlainText } from \"@/utils/markdown-to-plain-text\";\nimport { notificationChannels } from \"./types\";\nimport type { NotificationDraftPayload } from \"./types\";\n\n/**\n * Plain-text projection of a drafted notification: subject + body for email (which has a subject),\n * body alone for slack/teams. The body is markdown (§16), so it's run through `markdownToPlainText`\n * — matching `TextBlockService.toClipboardText` — so a copied draft never carries `**`, list\n * markers, etc. into plain-text paste targets. Shared by the block-service's `toClipboardText` and\n * the in-block copy button so both copy the same text.\n */\nexport function notificationDraftToText(payload: NotificationDraftPayload): string {\n  const { channel, subject, body } = payload;\n  const text = markdownToPlainText(body);\n  return channel === notificationChannels.EMAIL && subject ? `${subject}\\n\\n${text}` : text;\n}\n","import { NotificationDraftBlock } from \"../notification-draft-block/notification-draft-block\";\nimport { notificationDraftToText } from \"../notification-draft-block/to-text\";\nimport type { NotificationDraftBlockRecord } from \"../notification-draft-block/types\";\nimport { blockTypes } from \"../types\";\nimport type { BlockService } from \"../types\";\n\nexport const NotificationDraftBlockService: BlockService<NotificationDraftBlockRecord> = {\n  type: blockTypes.NOTIFICATION_DRAFT,\n  Component: NotificationDraftBlock,\n  /**\n   * Plain-text clipboard form of the drafted notification — shared with the in-block copy button\n   * via {@link notificationDraftToText} so both copy the same text.\n   */\n  toClipboardText: (block) => notificationDraftToText(block.payload),\n};\n","import type { ReactNode } from \"react\";\n\nimport { Markdown } from \"../markdown/markdown\";\nimport type { BlockComponentProps, TextBlockRecord } from \"../types\";\n\n/** Renders a TEXT block as Markdown with GFM (tables, strikethrough) and line breaks. */\nexport function TextBlock({ block }: BlockComponentProps<TextBlockRecord>): ReactNode {\n  return <Markdown>{block.payload.text}</Markdown>;\n}\n","import { markdownToPlainText } from \"@/utils/markdown-to-plain-text\";\nimport { TextBlock } from \"../text-block/text-block\";\nimport { blockTypes } from \"../types\";\nimport type { BlockService, TextBlockRecord } from \"../types\";\n\nexport const TextBlockService: BlockService<TextBlockRecord> = {\n  type: blockTypes.TEXT,\n  Component: TextBlock,\n  /**\n   * Converts the block's markdown source to plain text so the final clipboard value is clean\n   * when pasted into tools that don't render markdown. Each block type owns its own clipboard\n   * conversion so `useCopyToClipboard` can write text verbatim without a second pass.\n   */\n  toClipboardText: (block) => markdownToPlainText(block.payload.text),\n};\n","import { blockTypes, type BlockService, type BlockType } from \"../types\";\nimport { ArtifactRefBlockService } from \"./artifact-ref-block-service\";\nimport { NotificationDraftBlockService } from \"./notification-draft-block-service\";\nimport { TextBlockService } from \"./text-block-service\";\n\n// `BlockService<TBlock>` is invariant on `TBlock` via React's `ComponentType` (props are\n// contravariant). The concrete services overlap structurally with the base `BlockService` type\n// enough for a direct `as BlockService` cast. The registry dispatches by runtime discriminator —\n// `BlockServices[block.type]` always resolves to the matching concrete service — so the cast is sound.\nexport const BlockServices: Record<BlockType, BlockService> = {\n  [blockTypes.TEXT]: TextBlockService as BlockService,\n  [blockTypes.ARTIFACT_REF]: ArtifactRefBlockService as BlockService,\n  [blockTypes.NOTIFICATION_DRAFT]: NotificationDraftBlockService as BlockService,\n};\n","import type { ReactNode } from \"react\";\n\nimport { BlockServices } from \"../block-services\";\nimport type { BlockRecord } from \"../types\";\n\n/** Props for the Block dispatcher. */\ninterface BlockProps {\n  /** The block to render. Dispatched to the registered concrete component for its `type`. */\n  block: BlockRecord;\n}\n\n/**\n * Dispatches a single block to its registered concrete component. Unknown types render as a no-op.\n *\n * Generic by design: per-block-type extras (e.g. localized artifact labels for `ARTIFACT_REF`)\n * live on the block's `payload`, not as sibling props here. That keeps the dispatcher's contract\n * shallow — third-party `BlockService` implementors only need to handle `{ block }` — and lets\n * the consumer materialise a fully-decorated block once (from the server payload + their i18n\n * layer) instead of threading sibling props through every dispatch site.\n */\nexport function Block({ block }: BlockProps): ReactNode {\n  const service = BlockServices[block.type];\n  if (!service) return null;\n  const { Component } = service;\n  return <Component block={block} />;\n}\n"],"mappings":"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","names":["jsx","styled","styled","jsx","jsx","jsx","jsx"]}

package/dist/{chunk-CATIRDZP.js → chunk-PWSEEUVL.js}

@@ -1,13 +1,16 @@
 import {
   Block,
   BlockServices
-} from "./chunk-7MY4X4YL.js";
+} from "./chunk-PISZYS2H.js";
+import {
+  useCopyToClipboard
+} from "./chunk-EIAWZXE4.js";
 import {
   IconCheck,
   IconCopy,
   IconThumbDown,
   IconThumbUp
-} from "./chunk-QR4VBGK4.js";
+} from "./chunk-CSTCTO3B.js";
 import {
   IconButton
 } from "./chunk-E36VI2HA.js";
@@ -37,7 +40,7 @@ function copyMessageText(message) {
 }
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback } from "react";
 
 // src/components/chat/chat-context/chat-context.ts
 import { createContext, useContext } from "react";
@@ -50,42 +53,6 @@ function useChatContext() {
   return context;
 }
 
-// src/components/chat/hooks/use-copy-to-clipboard.ts
-import { useState, useCallback, useRef, useEffect } from "react";
-
-// src/utils/clipboard.ts
-function copyToClipboard(text, options) {
-  navigator.clipboard.writeText(text).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] = useState(false);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  const copy = useCallback((text) => {
-    copyToClipboard(text, {
-      onSuccess: () => {
-        setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          setIsCopied(false);
-          timeoutRef.current = null;
-        }, RESET_DELAY_MS);
-      }
-    });
-  }, []);
-  return { isCopied, copy };
-}
-
 // src/components/chat/constants.ts
 var MESSAGE_ROLE = {
   USER: "user",
@@ -115,14 +82,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function ChatMessageActions({ className, messageId, content, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = useCallback2(() => {
+  const handleCopy = useCallback(() => {
     copy(content);
     onCopyMessage?.(messageId);
   }, [content, messageId, copy, onCopyMessage]);
-  const handleThumbUp = useCallback2(() => {
+  const handleThumbUp = useCallback(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = useCallback2(() => {
+  const handleThumbDown = useCallback(() => {
     onThumbDownClick?.(messageId, isHelpful === false ? null : false);
   }, [messageId, isHelpful, onThumbDownClick]);
   const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
@@ -216,8 +183,7 @@ export {
   copyMessageText,
   ChatContext,
   useChatContext,
-  useCopyToClipboard,
   MESSAGE_ROLE,
   ChatMessage
 };
-//# sourceMappingURL=chunk-CATIRDZP.js.map
+//# sourceMappingURL=chunk-PWSEEUVL.js.map

package/dist/chunk-PWSEEUVL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/chat-message/chat-message.tsx","../src/components/chat/hooks/copy-message-text.ts","../src/components/chat/chat-message-actions/chat-message-actions.tsx","../src/components/chat/chat-context/chat-context.ts","../src/components/chat/constants.ts","../src/components/chat/chat-message-actions/chat-message-actions-styles.ts","../src/components/chat/chat-message/chat-message-styles.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Block } from \"@/components/blocks/block\";\nimport { copyMessageText } from \"../hooks/copy-message-text\";\nimport type { ChatMessage as ChatMessageType } from \"../types\";\nimport { ChatMessageActions } from \"../chat-message-actions/chat-message-actions\";\nimport { MessageRow, MessageBubble, MessageContainer } from \"./chat-message-styles\";\n\ninterface ChatMessageProps {\n  message: ChatMessageType;\n}\n\nexport function ChatMessage({ message }: ChatMessageProps) {\n  // Aggregate per-block clipboard text so the copy button produces richer output than the\n  // server-supplied `fallbackText` (which is typically \"[table: Title]\" for artifact blocks).\n  // `useMemo` keeps the string stable across re-renders that don't change the blocks array.\n  const clipboardText = useMemo(() => copyMessageText(message), [message]);\n\n  return (\n    <MessageRow $role={message.role} role=\"article\" aria-label={`${message.role} message`}>\n      <MessageContainer $role={message.role}>\n        <MessageBubble $role={message.role} data-testid=\"message-bubble\">\n          {message.blocks.map((block, index) => (\n            <Block key={index} block={block} />\n          ))}\n        </MessageBubble>\n        <ChatMessageActions\n          messageId={message.id}\n          content={clipboardText}\n          role={message.role}\n          isHelpful={message.isHelpful}\n        />\n      </MessageContainer>\n    </MessageRow>\n  );\n}\n","import { BlockServices } from \"@/components/blocks/block-services\";\nimport type { ChatMessage } from \"../types\";\n\n/**\n * Aggregates the clipboard text for all blocks in a message.\n *\n * Iterates `message.blocks` in order, calls `BlockServices[block.type].toClipboardText(block)`\n * for each, and joins the results with `\"\\n\\n\"` so multi-block messages have a blank line between\n * each section (matching the visual gap rendered between blocks in the chat UI).\n *\n * Block-type-specific behaviour:\n * - `TEXT` blocks: markdown stripped to plain text via `markdownToPlainText`.\n * - `ARTIFACT_REF` blocks: delegates to the registered artifact component's `toClipboardText`\n *   (e.g. the artifact title as plain text for table artifacts).\n * - Unknown block types: silently skipped (no registered service → no contribution to output).\n *\n * Falls back to `message.fallbackText` only when every block produces an empty string — this\n * guards against edge cases (empty message, all-unknown block types) while still preferring\n * the richer per-block text in the normal case.\n *\n * @param message  The chat message whose blocks should be aggregated.\n * @returns        A string suitable for writing to the system clipboard.\n */\nexport function copyMessageText(message: ChatMessage): string {\n  const parts: string[] = [];\n\n  for (const block of message.blocks) {\n    const service = BlockServices[block.type];\n    if (!service) continue;\n    // `toClipboardText` is optional on the BlockService interface — external implementors may\n    // omit it. Skip silently when absent (contributes \"\" to the aggregated output).\n    if (!service.toClipboardText) continue;\n    // The registry is keyed by BlockType and each service's toClipboardText is typed to its\n    // concrete TBlock. The cast is safe because BlockServices[block.type] is always the matching\n    // service for block.type — same soundness argument as the registry's own type erasure.\n    const text = (service as { toClipboardText: (b: typeof block) => string }).toClipboardText(block);\n    if (text) parts.push(text);\n  }\n\n  if (parts.length === 0) return message.fallbackText;\n  return parts.join(\"\\n\\n\");\n}\n","import { useCallback } from \"react\";\nimport { IconCopy, IconCheck, IconThumbUp, IconThumbDown } from \"@tabler/icons-react\";\n\nimport { IconButton } from \"../../icon-button/icon-button\";\nimport { useChatContext } from \"../chat-context/chat-context\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\nimport { ActionsContainer, AnimatedAction } from \"./chat-message-actions-styles\";\n\ninterface ChatMessageActionsProps {\n  className?: string;\n  messageId: string;\n  content: string;\n  role: MessageRole;\n  isHelpful?: boolean | null;\n}\n\nexport function ChatMessageActions({ className, messageId, content, role, isHelpful }: ChatMessageActionsProps) {\n  const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();\n  const { isCopied, copy } = useCopyToClipboard();\n\n  const handleCopy = useCallback(() => {\n    copy(content);\n    onCopyMessage?.(messageId);\n  }, [content, messageId, copy, onCopyMessage]);\n\n  const handleThumbUp = useCallback(() => {\n    onThumbUpClick?.(messageId, isHelpful === true ? null : true);\n  }, [messageId, isHelpful, onThumbUpClick]);\n\n  const handleThumbDown = useCallback(() => {\n    onThumbDownClick?.(messageId, isHelpful === false ? null : false);\n  }, [messageId, isHelpful, onThumbDownClick]);\n\n  const isAssistant = role === MESSAGE_ROLE.ASSISTANT;\n  const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);\n\n  return (\n    <ActionsContainer $role={role} className={className}>\n      <IconButton\n        icon={isCopied ? IconCheck : IconCopy}\n        onClick={handleCopy}\n        aria-label={isCopied ? \"Copied\" : \"Copy message\"}\n      />\n\n      {hasFeedback && (\n        <AnimatedAction $visible={isHelpful !== false}>\n          <IconButton\n            icon={IconThumbUp}\n            onClick={handleThumbUp}\n            isSelected={isHelpful === true}\n            aria-label=\"Good response\"\n          />\n        </AnimatedAction>\n      )}\n\n      {hasFeedback && (\n        <AnimatedAction $visible={isHelpful !== true}>\n          <IconButton\n            icon={IconThumbDown}\n            onClick={handleThumbDown}\n            isSelected={isHelpful === false}\n            aria-label=\"Bad response\"\n          />\n        </AnimatedAction>\n      )}\n    </ActionsContainer>\n  );\n}\n","import { createContext, useContext } from \"react\";\nimport type { ChatContextValue } from \"../types\";\n\nexport const ChatContext = createContext<ChatContextValue | null>(null);\n\nexport function useChatContext(): ChatContextValue {\n  const context = useContext(ChatContext);\n  if (!context) {\n    throw new Error(\"useChatContext must be used within a Chat.Root component\");\n  }\n  return context;\n}\n","export const MESSAGE_ROLE = {\n  USER: \"user\",\n  ASSISTANT: \"assistant\",\n} as const;\n","import styled from \"styled-components\";\n\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\n\nconst FADE_DURATION_MS = 150;\nconst ANIMATE_DURATION_MS = 200;\n\nexport const ActionsContainer = styled.div<{ $role: MessageRole }>`\n  display: flex;\n  opacity: ${({ $role }) => ($role === MESSAGE_ROLE.ASSISTANT ? 1 : 0)};\n  pointer-events: ${({ $role }) => ($role === MESSAGE_ROLE.ASSISTANT ? \"auto\" : \"none\")};\n  transition: opacity ${FADE_DURATION_MS}ms ease;\n`;\n\nexport const AnimatedAction = styled.div<{ $visible: boolean }>`\n  display: flex;\n  overflow: hidden;\n  max-width: ${({ $visible }) => ($visible ? \"40px\" : \"0\")};\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;\n`;\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../../tokens/typography\";\nimport { ActionsContainer } from \"../chat-message-actions/chat-message-actions-styles\";\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\n\nexport const MessageRow = styled.div<{ $role: MessageRole }>`\n  display: flex;\n  justify-content: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"flex-end\" : \"flex-start\")};\n\n  &:hover ${ActionsContainer} {\n    opacity: 1;\n    pointer-events: auto;\n  }\n`;\n\nexport const MessageContainer = styled.div<{ $role: MessageRole }>`\n  display: flex;\n  flex-direction: column;\n  align-items: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"flex-end\" : \"flex-start\")};\n  max-width: 90%;\n  width: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"auto\" : \"100%\")};\n  gap: 12px;\n`;\n\nexport const MessageBubble = styled.div<{ $role: MessageRole }>`\n  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n  color: ${colors[\"brown-100\"]};\n  background: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? colors.white : \"transparent\")};\n  padding: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"12px 16px\" : \"0\")};\n  border-radius: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"16px\" : \"0\")};\n  max-width: 100%;\n  width: 100%;\n  min-width: 0;\n  /* Vertical rhythm between consecutive blocks — renderer-owned, not agent-emitted.\n   * Industry standard (Claude, ChatGPT, Vercel AI Elements): the chat renderer applies\n   * spacing via CSS; agents emit semantic blocks only. Value matches the MessageContainer\n   * gap. TODO: replace 12px with a clay spacing token when a spacing scale is added. */\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n"],"mappings":"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","names":["styled","styled","jsx","jsxs"]}