@shapesos/clay 0.18.0 → 0.19.0

package/dist/chunk-EXRNGIQ2.js

@@ -0,0 +1,41 @@
+import {
+  cn
+} from "./chunk-P6GUNIAE.js";
+
+// src/components/badge/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var BASE = "inline-flex items-center whitespace-nowrap rounded-full";
+var SIZES = {
+  // `sm` is a uniform scale-down of `md` (text 10/12 of caption): padding and line-height keep
+  // md's proportions (caption is 12px text on a 16px line = 1.333 ratio) so the pill shape matches.
+  md: "px-2.5 py-0.5 text-geist-label-caption-medium",
+  sm: "px-2 py-0.5 text-[11px]/[1.333] font-medium"
+};
+var SUBTLE = {
+  neutral: "bg-brown-20 text-brown-70",
+  warning: "bg-orange-50 text-orange-600",
+  violet: "bg-violet-50 text-violet-600"
+};
+var OUTLINE = {
+  neutral: "border border-brown-30 bg-white text-brown-100",
+  warning: "border border-orange-200 bg-white text-orange-600",
+  violet: "border border-violet-400 bg-white text-violet-600"
+};
+var VARIANTS = {
+  subtle: SUBTLE,
+  outline: OUTLINE
+};
+function Badge({
+  variant = "subtle",
+  tone = "neutral",
+  size = "md",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn(BASE, SIZES[size], VARIANTS[variant][tone], className), children });
+}
+
+export {
+  Badge
+};
+//# sourceMappingURL=chunk-EXRNGIQ2.js.map

package/dist/chunk-EXRNGIQ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Fill treatment of the badge. */\nexport type BadgeVariant = \"subtle\" | \"outline\";\n\n/** Semantic color of the badge. */\nexport type BadgeTone = \"neutral\" | \"warning\" | \"violet\";\n\n/** Overall size — `md` (default) or a more compact `sm` for eyebrow-style tags. */\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport interface BadgeProps {\n  /** Fill treatment. `subtle` = tinted background, `outline` = bordered on white. Default `subtle`. */\n  variant?: BadgeVariant;\n  /** Semantic color. `neutral` = brown, `warning` = orange, `violet` = violet. Default `neutral`. */\n  tone?: BadgeTone;\n  /** Size. `md` (12px text) or `sm` (10px text, tighter padding). Default `md`. */\n  size?: BadgeSize;\n  /** Extra classes merged after the variant/tone classes (last-wins via tailwind-merge). */\n  className?: string;\n  /** Badge label content. */\n  children: ReactNode;\n}\n\nconst BASE = \"inline-flex items-center whitespace-nowrap rounded-full\";\n\n/** Padding + text size per size. Kept as one class each so there is a single font-size utility (deterministic override). */\nconst SIZES: Record<BadgeSize, string> = {\n  // `sm` is a uniform scale-down of `md` (text 10/12 of caption): padding and line-height keep\n  // md's proportions (caption is 12px text on a 16px line = 1.333 ratio) so the pill shape matches.\n  md: \"px-2.5 py-0.5 text-geist-label-caption-medium\",\n  sm: \"px-2 py-0.5 text-[11px]/[1.333] font-medium\",\n};\n\n/** Tinted background — low-emphasis tag. */\nconst SUBTLE: Record<BadgeTone, string> = {\n  neutral: \"bg-brown-20 text-brown-70\",\n  warning: \"bg-orange-50 text-orange-600\",\n  violet: \"bg-violet-50 text-violet-600\",\n};\n\n/** Bordered on white — reads as a discrete chip. */\nconst OUTLINE: Record<BadgeTone, string> = {\n  neutral: \"border border-brown-30 bg-white text-brown-100\",\n  warning: \"border border-orange-200 bg-white text-orange-600\",\n  violet: \"border border-violet-400 bg-white text-violet-600\",\n};\n\nconst VARIANTS: Record<BadgeVariant, Record<BadgeTone, string>> = {\n  subtle: SUBTLE,\n  outline: OUTLINE,\n};\n\n/**\n * Small pill for labels, counts, and status tags — recipient chips, \"+N\" overflow, \"Email\n * (fallback)\" tags, \"Labs\". Presentational only; on clay tokens. Compose the label at the call\n * site.\n */\nexport function Badge({\n  variant = \"subtle\",\n  tone = \"neutral\",\n  size = \"md\",\n  className,\n  children,\n}: BadgeProps): ReactNode {\n  return <span className={cn(BASE, SIZES[size], VARIANTS[variant][tone], className)}>{children}</span>;\n}\n"],"mappings":";;;;;AAmES;AAzCT,IAAM,OAAO;AAGb,IAAM,QAAmC;AAAA;AAAA;AAAA,EAGvC,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,SAAoC;AAAA,EACxC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAGA,IAAM,UAAqC;AAAA,EACzC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,IAAM,WAA4D;AAAA,EAChE,QAAQ;AAAA,EACR,SAAS;AACX;AAOO,SAAS,MAAM;AAAA,EACpB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA0B;AACxB,SAAO,oBAAC,UAAK,WAAW,GAAG,MAAM,MAAM,IAAI,GAAG,SAAS,OAAO,EAAE,IAAI,GAAG,SAAS,GAAI,UAAS;AAC/F;","names":[]}

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

@@ -1,13 +1,16 @@
 import {
   Block,
   BlockServices
-} from "./chunk-7MY4X4YL.js";
+} from "./chunk-JMHE3Q5K.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-FCSYVF4Z.js.map

package/dist/chunk-FCSYVF4Z.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"]}

package/dist/{chunk-4MZZH3WX.js → chunk-HU5W7CGE.js}

@@ -79,6 +79,36 @@ function useScrollShadow() {
   return { targetRef, isScrolled };
 }
 
+// src/components/table/data-table.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DATA_TABLE_HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+var DATA_TABLE_CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+var DATA_TABLE_ROW_CLASS = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+var DATA_TABLE_SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+function DataTable({ header, children, maxBodyHeight, className }) {
+  const { targetRef, isScrolled } = useScrollShadow();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: targetRef,
+      className: cn("overscroll-none", className),
+      style: maxBodyHeight !== void 0 ? { maxHeight: maxBodyHeight, overflowY: "auto" } : void 0,
+      children: /* @__PURE__ */ jsxs(Table, { containerClassName: "overflow-visible", children: [
+        /* @__PURE__ */ jsx2(
+          TableHeader,
+          {
+            "data-scrolled": isScrolled ? "true" : void 0,
+            className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
+            style: isScrolled ? { boxShadow: DATA_TABLE_SCROLL_SHADOW } : void 0,
+            children: header
+          }
+        ),
+        /* @__PURE__ */ jsx2(TableBody, { children })
+      ] })
+    }
+  );
+}
+
 export {
   Table,
   TableHeader,
@@ -88,6 +118,11 @@ export {
   TableHead,
   TableCell,
   TableCaption,
-  useScrollShadow
+  useScrollShadow,
+  DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_ROW_CLASS,
+  DATA_TABLE_SCROLL_SHADOW,
+  DataTable
 };
-//# sourceMappingURL=chunk-4MZZH3WX.js.map
+//# sourceMappingURL=chunk-HU5W7CGE.js.map

package/dist/chunk-HU5W7CGE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/table.tsx","../src/components/table/use-scroll-shadow.ts","../src/components/table/data-table.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Extension of shadcn's `Table` registry component: exposes `containerClassName` so callers can\n * override the wrapping `<div>`'s default `overflow-auto`. We need this for sticky-header support\n * (sticky uses the nearest overflow ancestor as its containing block — when the actual scroll\n * container is one level out, the inner overflow-auto needs to be neutralised with\n * `overflow-visible` so sticky aligns with the real scrolling parent). */\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }\n>(({ className, containerClassName, ...props }, ref) => (\n  <div className={cn(\"relative w-full overflow-auto\", containerClassName)}>\n    <table ref={ref} className={cn(\"w-full caption-bottom text-sm\", className)} {...props} />\n  </div>\n));\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n);\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn(\"[&_tr:last-child]:border-0\", className)} {...props} />\n  )\n);\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tfoot ref={ref} className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)} {...props} />\n  )\n);\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\", className)}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => (\n    <th\n      ref={ref}\n      className={cn(\n        \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => (\n    <td ref={ref} className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)} {...props} />\n  )\n);\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n  ({ className, ...props }, ref) => (\n    <caption ref={ref} className={cn(\"mt-4 text-sm text-muted-foreground\", className)} {...props} />\n  )\n);\nTableCaption.displayName = \"TableCaption\";\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n","import { useEffect, useRef, useState, type RefObject } from \"react\";\n\n/**\n * Tracks whether a scroll container has scrolled past its top edge, for sticky-header shadow effects.\n *\n * Returns `targetRef` (attach to the scroll container itself or any element inside it) and\n * `isScrolled` (true once the container's `scrollTop > 0`). On mount the hook walks up the DOM\n * from the target to find the nearest overflow ancestor (or uses the target itself if it already\n * has `overflowY: auto | scroll`), then listens to its `scroll` event.\n *\n * Used to surface a subtle \"scroll lift\" shadow under sticky headers so users know there is\n * content hidden above.\n *\n * **Why a scroll listener and not a sentinel + IntersectionObserver:** an earlier version used a\n * 1px sentinel as the first child of the scroll container. The sentinel's height pushed the thead\n * down by one pixel in normal flow, and as soon as the user scrolled the thead snapped up to its\n * sticky position — a visible 1px jitter. A scroll listener has no layout footprint.\n *\n * `passive: true` so the listener doesn't block native scroll smoothness; we never call\n * `preventDefault`.\n */\nexport function useScrollShadow(): {\n  targetRef: RefObject<HTMLDivElement | null>;\n  isScrolled: boolean;\n} {\n  const targetRef = useRef<HTMLDivElement>(null);\n  const [isScrolled, setIsScrolled] = useState(false);\n\n  useEffect(() => {\n    const target = targetRef.current;\n    if (!target) return;\n\n    let scrollContainer: HTMLElement | null = target;\n    while (scrollContainer) {\n      const overflowY = getComputedStyle(scrollContainer).overflowY;\n      if (overflowY === \"auto\" || overflowY === \"scroll\") break;\n      scrollContainer = scrollContainer.parentElement;\n    }\n    if (!scrollContainer) return;\n\n    setIsScrolled(scrollContainer.scrollTop > 0);\n\n    const handleScroll = () => {\n      if (!scrollContainer) return;\n      setIsScrolled(scrollContainer.scrollTop > 0);\n    };\n    scrollContainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => scrollContainer.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  return { targetRef, isScrolled };\n}\n","import type { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Table, TableBody, TableHeader } from \"@/components/ui/table\";\nimport { useScrollShadow } from \"./use-scroll-shadow\";\n\n/**\n * Header cell class — compact, left-aligned, non-wrapping. Apply to each `<TableHead>` composed at\n * the call site so every clay data table shares one header treatment.\n */\nexport const DATA_TABLE_HEAD_CLASS = \"h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left\";\n\n/** Body cell class — roomy padding, top-aligned, left-aligned, min width so columns don't collapse. */\nexport const DATA_TABLE_CELL_CLASS = \"p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left\";\n\n/**\n * Data-row class matching the frosted-glass card scheme: `border-b-brown-30` overrides shadcn's\n * default `--color-border` (brown-40) with the lighter brown-30; hover lifts to opaque `bg-secondary`.\n */\nexport const DATA_TABLE_ROW_CLASS = \"border-b-brown-30 bg-background/70 hover:bg-secondary\";\n\n/** Layered drop-shadow for the scroll-lift effect on the sticky header. */\nexport const DATA_TABLE_SCROLL_SHADOW = \"0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)\";\n\nexport interface DataTableProps {\n  /**\n   * Header row content — typically a single `<TableRow>` of `<TableHead>` cells (use\n   * `DATA_TABLE_HEAD_CLASS`). Rendered inside the sticky, frosted `<TableHeader>` shell.\n   */\n  header: ReactNode;\n  /** Body rows composed at the call site (`<TableRow>`/`<TableCell>`). */\n  children: ReactNode;\n  /** Max body height (px) before vertical scroll engages. Omit for no cap (grows to content). */\n  maxBodyHeight?: number;\n  /** Extra classes for the scroll container. */\n  className?: string;\n}\n\n/**\n * Shared styled-table shell — the scroll container, sticky frosted (`bg-background/70\n * backdrop-blur-lg`) header, and scroll-lift shadow (via {@link useScrollShadow}) that give clay\n * data tables (table artifact, notification-draft recipients) one consistent look. Callers compose\n * the header cells and body rows at the call site; this is only the shell.\n */\nexport function DataTable({ header, children, maxBodyHeight, className }: DataTableProps): ReactNode {\n  const { targetRef, isScrolled } = useScrollShadow();\n  return (\n    <div\n      ref={targetRef}\n      className={cn(\"overscroll-none\", className)}\n      style={maxBodyHeight !== undefined ? { maxHeight: maxBodyHeight, overflowY: \"auto\" } : undefined}\n    >\n      <Table containerClassName=\"overflow-visible\">\n        <TableHeader\n          data-scrolled={isScrolled ? \"true\" : undefined}\n          className=\"sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow\"\n          style={isScrolled ? { boxShadow: DATA_TABLE_SCROLL_SHADOW } : undefined}\n        >\n          {header}\n        </TableHeader>\n        <TableBody>{children}</TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx"]}

package/dist/chunk-JMHE3Q5K.js

@@ -0,0 +1,406 @@
+import {
+  CopyButton
+} from "./chunk-EIAWZXE4.js";
+import {
+  markdownToPlainText
+} from "./chunk-NMKKU2UG.js";
+import {
+  Badge
+} from "./chunk-EXRNGIQ2.js";
+import {
+  ArtifactServices,
+  artifactToClipboardText
+} from "./chunk-DC5KYT2G.js";
+import {
+  IconChevronDown,
+  IconFlask2Filled
+} from "./chunk-CSTCTO3B.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-JMHE3Q5K.js.map