@shapesos/clay 0.17.0 → 0.19.0

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.cjs';
-export { ArtifactRefBlock, ArtifactRefBlockService, Block, BlockContext, BlockContextValue, BlockServices, TextBlockService, useBlockContext } from './blocks.cjs';
-export { A as ArtifactRefBlockRecord, B as BlockComponentProps, a as BlockRecord, b as BlockService, c as BlockType, T as TextBlockRecord, d as blockTypes } from './types-CW45GBXl.cjs';
+export { ArtifactRefBlock, ArtifactRefBlockService, Block, BlockContext, BlockContextValue, BlockServices, NotificationDraftBlock, NotificationDraftBlockService, TextBlockService, useBlockContext } from './blocks.cjs';
+export { A as ArtifactRefBlockRecord, B as BlockComponentProps, a as BlockRecord, b as BlockService, c as BlockType, N as NotificationChannel, d as NotificationDraftBlockRecord, e as NotificationDraftPayload, f as NotificationEmailType, g as NotificationRecipient, T as TextBlockRecord, h as blockTypes, n as notificationChannels, i as notificationEmailTypes } from './types-Bhg0_ES8.cjs';
 export { CHAT_STATUS, ChatStatus, MouseGrid, MouseGridProps, PromptInput, PromptInputFooter, PromptInputFooterProps, PromptInputMessage, PromptInputProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, Suggestion, SuggestionProps, Suggestions, SuggestionsProps } from './ai-elements.cjs';
-export { A as ArtifactCallbacksOf, a as ArtifactDataRow, b as ArtifactLabelsOf, c as ArtifactRecord, d as ArtifactService, e as ArtifactServiceProps, f as ArtifactType, B as BarChartConfig, C as ChartArtifactLabels, g as ChartArtifactRecord, h as ChartConfig, i as ChartStats, D as DEFAULT_CHART_ARTIFACT_LABELS, j as DEFAULT_TABLE_ARTIFACT_LABELS, L as LineChartConfig, P as PieChartConfig, T as TableArtifactLabels, k as TableArtifactRecord, l as TableColumn, m as TableConfig, n as TableRow, o as TableStats, p as artifactTypes } from './types-BzXPBy6s.cjs';
-export { ArtifactCopyAsImageButton, ArtifactCopyAsImageButtonProps, ArtifactDownloadButton, ArtifactDownloadButtonProps, ArtifactDownloadMenu, ArtifactDownloadMenuCsvAction, ArtifactDownloadMenuPngAction, ArtifactDownloadMenuProps, ArtifactServices, ChartArtifact, TableArtifact, artifactToClipboardText, isSafeDownloadUrl } from './artifacts.cjs';
+export { A as ArtifactCallbacksOf, a as ArtifactDataRow, b as ArtifactLabelsOf, c as ArtifactRecord, d as ArtifactService, e as ArtifactServiceProps, f as ArtifactType, B as BarChartConfig, C as ChartArtifactLabels, g as ChartArtifactRecord, h as ChartConfig, i as ChartStats, D as DEFAULT_CHART_ARTIFACT_LABELS, j as DEFAULT_DECK_ARTIFACT_LABELS, k as DEFAULT_TABLE_ARTIFACT_LABELS, l as DeckArtifactCallbacks, m as DeckArtifactLabels, n as DeckArtifactRecord, o as DeckBlock, p as DeckChartBlock, q as DeckConfig, r as DeckMeta, s as DeckSlide, t as DeckSlideKind, u as DeckStats, v as DeckTableBlock, w as DeckTextBlock, L as LineChartConfig, P as PieChartConfig, T as TableArtifactLabels, x as TableArtifactRecord, y as TableColumn, z as TableConfig, E as TableRow, F as TableStats, G as artifactTypes, H as deckBlockTypes, I as deckSlideKinds } from './types-DTdDFU3O.cjs';
+export { ArtifactCopyAsImageButton, ArtifactCopyAsImageButtonProps, ArtifactDownloadButton, ArtifactDownloadButtonProps, ArtifactDownloadMenu, ArtifactDownloadMenuCsvAction, ArtifactDownloadMenuPngAction, ArtifactDownloadMenuProps, ArtifactServices, ChartArtifact, DeckArtifact, TableArtifact, artifactToClipboardText, isSafeDownloadUrl } from './artifacts.cjs';
 export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, copyMessageText, useChatContext, useCopyToClipboard } from './chat.cjs';
 export { Icon, IconButton, IconButtonIntent, IconButtonProps, IconButtonSize, IconButtonVariant, IconProps } from './icon.cjs';
 export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.cjs';
@@ -12,6 +12,8 @@ export { TextArea } from './text-area.cjs';
 export { T as TextAreaProps } from './types-CMzZsL_J.cjs';
 export { MarkdownTable, convertTableToCSV, escapeCsvField, markdownToPlainText, mergeRefs, parseMarkdownTable } from './utils.cjs';
 export { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonIntent, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.cjs';
+export { Badge, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from './badge.cjs';
+export { CopyButton, CopyButtonProps } from './copy-button.cjs';
 export { C as ChartSeries, a as ChartVariant } from './types-B2aYk82c.cjs';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.js';
-export { ArtifactRefBlock, ArtifactRefBlockService, Block, BlockContext, BlockContextValue, BlockServices, TextBlockService, useBlockContext } from './blocks.js';
-export { A as ArtifactRefBlockRecord, B as BlockComponentProps, a as BlockRecord, b as BlockService, c as BlockType, T as TextBlockRecord, d as blockTypes } from './types-D1b8v7EY.js';
+export { ArtifactRefBlock, ArtifactRefBlockService, Block, BlockContext, BlockContextValue, BlockServices, NotificationDraftBlock, NotificationDraftBlockService, TextBlockService, useBlockContext } from './blocks.js';
+export { A as ArtifactRefBlockRecord, B as BlockComponentProps, a as BlockRecord, b as BlockService, c as BlockType, N as NotificationChannel, d as NotificationDraftBlockRecord, e as NotificationDraftPayload, f as NotificationEmailType, g as NotificationRecipient, T as TextBlockRecord, h as blockTypes, n as notificationChannels, i as notificationEmailTypes } from './types-orOQcI2z.js';
 export { CHAT_STATUS, ChatStatus, MouseGrid, MouseGridProps, PromptInput, PromptInputFooter, PromptInputFooterProps, PromptInputMessage, PromptInputProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, Suggestion, SuggestionProps, Suggestions, SuggestionsProps } from './ai-elements.js';
-export { A as ArtifactCallbacksOf, a as ArtifactDataRow, b as ArtifactLabelsOf, c as ArtifactRecord, d as ArtifactService, e as ArtifactServiceProps, f as ArtifactType, B as BarChartConfig, C as ChartArtifactLabels, g as ChartArtifactRecord, h as ChartConfig, i as ChartStats, D as DEFAULT_CHART_ARTIFACT_LABELS, j as DEFAULT_TABLE_ARTIFACT_LABELS, L as LineChartConfig, P as PieChartConfig, T as TableArtifactLabels, k as TableArtifactRecord, l as TableColumn, m as TableConfig, n as TableRow, o as TableStats, p as artifactTypes } from './types-GCkXbyFm.js';
-export { ArtifactCopyAsImageButton, ArtifactCopyAsImageButtonProps, ArtifactDownloadButton, ArtifactDownloadButtonProps, ArtifactDownloadMenu, ArtifactDownloadMenuCsvAction, ArtifactDownloadMenuPngAction, ArtifactDownloadMenuProps, ArtifactServices, ChartArtifact, TableArtifact, artifactToClipboardText, isSafeDownloadUrl } from './artifacts.js';
+export { A as ArtifactCallbacksOf, a as ArtifactDataRow, b as ArtifactLabelsOf, c as ArtifactRecord, d as ArtifactService, e as ArtifactServiceProps, f as ArtifactType, B as BarChartConfig, C as ChartArtifactLabels, g as ChartArtifactRecord, h as ChartConfig, i as ChartStats, D as DEFAULT_CHART_ARTIFACT_LABELS, j as DEFAULT_DECK_ARTIFACT_LABELS, k as DEFAULT_TABLE_ARTIFACT_LABELS, l as DeckArtifactCallbacks, m as DeckArtifactLabels, n as DeckArtifactRecord, o as DeckBlock, p as DeckChartBlock, q as DeckConfig, r as DeckMeta, s as DeckSlide, t as DeckSlideKind, u as DeckStats, v as DeckTableBlock, w as DeckTextBlock, L as LineChartConfig, P as PieChartConfig, T as TableArtifactLabels, x as TableArtifactRecord, y as TableColumn, z as TableConfig, E as TableRow, F as TableStats, G as artifactTypes, H as deckBlockTypes, I as deckSlideKinds } from './types-C8JtnwNY.js';
+export { ArtifactCopyAsImageButton, ArtifactCopyAsImageButtonProps, ArtifactDownloadButton, ArtifactDownloadButtonProps, ArtifactDownloadMenu, ArtifactDownloadMenuCsvAction, ArtifactDownloadMenuPngAction, ArtifactDownloadMenuProps, ArtifactServices, ChartArtifact, DeckArtifact, TableArtifact, artifactToClipboardText, isSafeDownloadUrl } from './artifacts.js';
 export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, copyMessageText, useChatContext, useCopyToClipboard } from './chat.js';
 export { Icon, IconButton, IconButtonIntent, IconButtonProps, IconButtonSize, IconButtonVariant, IconProps } from './icon.js';
 export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.js';
@@ -12,6 +12,8 @@ export { TextArea } from './text-area.js';
 export { T as TextAreaProps } from './types-CMzZsL_J.js';
 export { MarkdownTable, convertTableToCSV, escapeCsvField, markdownToPlainText, mergeRefs, parseMarkdownTable } from './utils.js';
 export { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonIntent, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.js';
+export { Badge, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from './badge.js';
+export { CopyButton, CopyButtonProps } from './copy-button.js';
 export { C as ChartSeries, a as ChartVariant } from './types-B2aYk82c.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -1,4 +1,3 @@
-import "./chunk-72TJUKMV.js";
 import {
   Lottie
 } from "./chunk-BIATJTD4.js";
@@ -7,7 +6,7 @@ import {
   IconCtrl,
   KEYBOARD_SHORTCUT_VARIANTS,
   KeyboardShortcut
-} from "./chunk-PGR2MDDU.js";
+} from "./chunk-W66OJM55.js";
 import {
   convertTableToCSV,
   escapeCsvField,
@@ -19,24 +18,35 @@ import {
   ChatMessage,
   MESSAGE_ROLE,
   copyMessageText,
-  useChatContext,
-  useCopyToClipboard
-} from "./chunk-B6GAPZ2R.js";
+  useChatContext
+} from "./chunk-FCSYVF4Z.js";
 import {
   BlockContext,
   useBlockContext
-} from "./chunk-JGMN6W72.js";
+} from "./chunk-2X4KUXYP.js";
 import {
   ArtifactRefBlock,
   ArtifactRefBlockService,
   Block,
   BlockServices,
+  NotificationDraftBlock,
+  NotificationDraftBlockService,
   TextBlockService,
-  blockTypes
-} from "./chunk-46ZYTBX5.js";
+  blockTypes,
+  notificationChannels,
+  notificationEmailTypes
+} from "./chunk-JMHE3Q5K.js";
+import {
+  CopyButton,
+  useCopyToClipboard
+} from "./chunk-EIAWZXE4.js";
+import "./chunk-72TJUKMV.js";
 import {
   markdownToPlainText
 } from "./chunk-NMKKU2UG.js";
+import {
+  Badge
+} from "./chunk-EXRNGIQ2.js";
 import {
   CHAT_STATUS,
   MouseGrid,
@@ -47,10 +57,10 @@ import {
   PromptInputTools,
   Suggestion,
   Suggestions
-} from "./chunk-4VE6ZXXW.js";
+} from "./chunk-MQP57DOP.js";
 import {
   TextArea
-} from "./chunk-7OYIDM42.js";
+} from "./chunk-XKURJ72I.js";
 import {
   mergeRefs
 } from "./chunk-KNYB3RL7.js";
@@ -60,8 +70,8 @@ import {
   BUTTON_VARIANT,
   Button,
   ICON_POSITION
-} from "./chunk-B4U37WIH.js";
-import "./chunk-RSRNSWJN.js";
+} from "./chunk-CFCLVJIO.js";
+import "./chunk-BHHJOG5X.js";
 import {
   ArtifactCopyAsImageButton,
   ArtifactDownloadButton,
@@ -69,20 +79,25 @@ import {
   ArtifactServices,
   ChartArtifact,
   DEFAULT_CHART_ARTIFACT_LABELS,
+  DEFAULT_DECK_ARTIFACT_LABELS,
   DEFAULT_TABLE_ARTIFACT_LABELS,
+  DeckArtifact,
   TableArtifact,
   artifactToClipboardText,
   artifactTypes,
+  deckBlockTypes,
+  deckSlideKinds,
   isSafeDownloadUrl
-} from "./chunk-6YZ65KPW.js";
+} from "./chunk-DC5KYT2G.js";
+import "./chunk-CSTCTO3B.js";
 import {
   IconButton
-} from "./chunk-PYDVANWI.js";
+} from "./chunk-E36VI2HA.js";
 import "./chunk-LXYCT4YO.js";
 import {
   Icon
 } from "./chunk-OLJIJYB5.js";
-import "./chunk-PUVZ2S3F.js";
+import "./chunk-G4NXVFXU.js";
 import "./chunk-C77QMQNT.js";
 import {
   fontFamilies,
@@ -92,8 +107,8 @@ import {
 } from "./chunk-UXT2H3FM.js";
 import {
   colors
-} from "./chunk-JF3P66JF.js";
-import "./chunk-4MZZH3WX.js";
+} from "./chunk-SN3ORQSJ.js";
+import "./chunk-HU5W7CGE.js";
 import "./chunk-P6GUNIAE.js";
 import "./chunk-5WRI5ZAA.js";
 export {
@@ -106,6 +121,7 @@ export {
   BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
+  Badge,
   Block,
   BlockContext,
   BlockServices,
@@ -114,8 +130,11 @@ export {
   ChartArtifact,
   ChatContext,
   ChatMessage,
+  CopyButton,
   DEFAULT_CHART_ARTIFACT_LABELS,
+  DEFAULT_DECK_ARTIFACT_LABELS,
   DEFAULT_TABLE_ARTIFACT_LABELS,
+  DeckArtifact,
   ICON_POSITION,
   Icon,
   IconButton,
@@ -125,6 +144,8 @@ export {
   Lottie,
   MESSAGE_ROLE,
   MouseGrid,
+  NotificationDraftBlock,
+  NotificationDraftBlockService,
   PromptInput,
   PromptInputFooter,
   PromptInputSubmit,
@@ -141,11 +162,15 @@ export {
   colors,
   convertTableToCSV,
   copyMessageText,
+  deckBlockTypes,
+  deckSlideKinds,
   escapeCsvField,
   fontFamilies,
   isSafeDownloadUrl,
   markdownToPlainText,
   mergeRefs,
+  notificationChannels,
+  notificationEmailTypes,
   parseMarkdownTable,
   typographyMixin,
   typographyStyles,

package/dist/keyboard-shortcut.cjs

@@ -166,7 +166,9 @@ var colors = {
   "red-200": "#FECACA",
   "red-400": "#F7776C",
   "red-500": "#EF4444",
-  "red-600": "#DC2626"
+  "red-600": "#DC2626",
+  // Deck
+  "deck-canvas": "#faf8f5"
 };
 
 // src/components/keyboard-shortcut/types.ts

package/dist/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/keyboard-shortcut/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/tokens/colors.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["export { KeyboardShortcut } from \"./keyboard-shortcut\";\nexport { IconCtrl } from \"./icons/icon-ctrl\";\nexport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nexport type { KeyboardShortcutProps, KeyIcon, KeyboardShortcutVariant } from \"./types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <IconWrapper\n      ref={ref}\n      className={className}\n      $color={color}\n      aria-label={ariaLabel}\n      role={ariaLabel ? \"img\" : undefined}\n    >\n      <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n    </IconWrapper>\n  );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n  12: 1.4,\n  14: 1.4,\n  16: 1.8,\n  18: 1.8,\n  20: 1.8,\n  24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $color }) => $color ?? \"currentColor\"};\n  flex-shrink: 0;\n`;\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\n// Fixed-color treatments (default) — tuned for dark surfaces / app chrome.\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid ${colors[\"white-alpha-40\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: ${colors[\"brown-80\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n};\n\n// `adaptive` treatments — border/fill + glyph follow the surrounding text color (currentColor) so\n// the chip reads on any surface (light or dark). Selected when the `adaptive` prop is set.\nconst adaptiveStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid color-mix(in oklch, currentColor 40%, transparent);\n    color: currentColor;\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: color-mix(in oklch, currentColor 12%, transparent);\n    color: currentColor;\n  `,\n};\n\nexport const Wrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant; $adaptive: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  border-radius: 6px;\n  ${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};\n`;\n","export const colors = {\n  // White\n  white: \"#FFFFFF\",\n  \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n  \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n  // Brown\n  \"brown-10\": \"#FAF9F8\",\n  \"brown-20\": \"#F5F3F0\",\n  \"brown-30\": \"#EEEBE5\",\n  \"brown-40\": \"#E6E2DA\",\n  \"brown-50\": \"#CFCBC4\",\n  \"brown-60\": \"#A19E99\",\n  \"brown-70\": \"#73716D\",\n  \"brown-80\": \"#5C5A57\",\n  \"brown-90\": \"#2E2D2C\",\n  \"brown-100\": \"#171716\",\n  \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n  \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n  \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n  \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n  \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n  \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n  // Fuchsia\n  \"fuchsia-50\": \"#FAF5FF\",\n  \"fuchsia-300\": \"#F0ABFC\",\n  \"fuchsia-500\": \"#D946EF\",\n  \"fuchsia-600\": \"#C026D3\",\n  \"fuchsia-800\": \"#86198F\",\n\n  // Pink\n  \"pink-50\": \"#FDF2F8\",\n  \"pink-400\": \"#F472B6\",\n  \"pink-600\": \"#DB2777\",\n  \"pink-800\": \"#9D174D\",\n\n  // Violet\n  \"violet-50\": \"#F5F3FF\",\n  \"violet-400\": \"#A78BFA\",\n  \"violet-600\": \"#7C3AED\",\n  \"violet-800\": \"#5B21B6\",\n\n  // Indigo\n  \"indigo-50\": \"#EEF2FF\",\n  \"indigo-400\": \"#818CF8\",\n  \"indigo-500\": \"#6366F1\",\n  \"indigo-600\": \"#4F46E5\",\n  \"indigo-800\": \"#3730A3\",\n\n  // Cyan\n  \"cyan-50\": \"#E7FEFF\",\n  \"cyan-300\": \"#67E8F9\",\n  \"cyan-600\": \"#0891B2\",\n  \"cyan-900\": \"#164E63\",\n\n  // Teal\n  \"teal-50\": \"#EBFDF9\",\n  \"teal-300\": \"#5EEAD4\",\n  \"teal-600\": \"#0D9488\",\n\n  // Rose\n  \"rose-400\": \"#FB7185\",\n\n  // Purple\n  \"purple-400\": \"#C084FC\",\n\n  // Blue\n  \"blue-50\": \"#EFF6FF\",\n  \"blue-100\": \"#DBEAFE\",\n  \"blue-300\": \"#93C5FD\",\n  \"blue-400\": \"#60A5FA\",\n  \"blue-600\": \"#2563EB\",\n  \"blue-800\": \"#1E40AF\",\n\n  // Sky\n  \"sky-300\": \"#7DD3FC\",\n\n  // Green\n  \"green-50\": \"#ECF9F0\",\n  \"green-100\": \"#D4F1D9\",\n  \"green-400\": \"#3DC269\",\n  \"green-700\": \"#277C43\",\n  \"green-800\": \"#1C5930\",\n\n  // Orange\n  \"orange-50\": \"#FFF7ED\",\n  \"orange-100\": \"#FFEDD5\",\n  \"orange-200\": \"#FED7AA\",\n  \"orange-500\": \"#F97316\",\n  \"orange-600\": \"#EA580C\",\n\n  // Red\n  \"red-50\": \"#FEF2F2\",\n  \"red-100\": \"#FEE2E2\",\n  \"red-200\": \"#FECACA\",\n  \"red-400\": \"#F7776C\",\n  \"red-500\": \"#EF4444\",\n  \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import type { ComponentType, SVGProps } from \"react\";\n\n/** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\n/** Available visual variants for the keyboard shortcut display. */\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n  /** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */\n  OUTLINED: \"outlined\",\n  /** Filled keys with a solid background — for emphasis. */\n  FILLED: \"filled\",\n} as const;\n\n/** Visual variant for the KeyboardShortcut component. */\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\n/** Props for the KeyboardShortcut display component. */\nexport interface KeyboardShortcutProps {\n  /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */\n  keys: KeyIcon[];\n  /** Visual style variant. @default \"outlined\" */\n  variant?: KeyboardShortcutVariant;\n  /**\n   * When true, the border + glyph (outlined) or fill + glyph (filled) follow the surrounding text\n   * color (`currentColor`) instead of fixed tokens, so the chip reads on any surface — light or\n   * dark. Use on surfaces where the fixed-color variants wouldn't read (e.g. a prompt-launcher hero\n   * on a light backdrop). @default false\n   */\n  adaptive?: boolean;\n  /** Additional CSS class name. */\n  className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n  keys,\n  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n  adaptive = false,\n  className,\n}: KeyboardShortcutProps): ReactElement {\n  return (\n    <Wrapper className={className}>\n      {keys.map((KeyComponent, index) => (\n        <Key key={index} $variant={variant} $adaptive={adaptive}>\n          <Icon icon={KeyComponent} size={12} />\n        </Key>\n      ))}\n    </Wrapper>\n  );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n  const { width = 24, height = 24, ...rest } = props;\n\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        dominantBaseline=\"central\"\n        textAnchor=\"middle\"\n        fill=\"currentColor\"\n        fontFamily=\"Geist, sans-serif\"\n        fontWeight={300}\n        fontSize={14}\n      >\n        Ctrl\n      </text>\n    </svg>\n  );\n}\n"],"mappings":"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","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/components/keyboard-shortcut/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/tokens/colors.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["export { KeyboardShortcut } from \"./keyboard-shortcut\";\nexport { IconCtrl } from \"./icons/icon-ctrl\";\nexport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nexport type { KeyboardShortcutProps, KeyIcon, KeyboardShortcutVariant } from \"./types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <IconWrapper\n      ref={ref}\n      className={className}\n      $color={color}\n      aria-label={ariaLabel}\n      role={ariaLabel ? \"img\" : undefined}\n    >\n      <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n    </IconWrapper>\n  );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n  12: 1.4,\n  14: 1.4,\n  16: 1.8,\n  18: 1.8,\n  20: 1.8,\n  24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $color }) => $color ?? \"currentColor\"};\n  flex-shrink: 0;\n`;\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\n// Fixed-color treatments (default) — tuned for dark surfaces / app chrome.\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid ${colors[\"white-alpha-40\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: ${colors[\"brown-80\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n};\n\n// `adaptive` treatments — border/fill + glyph follow the surrounding text color (currentColor) so\n// the chip reads on any surface (light or dark). Selected when the `adaptive` prop is set.\nconst adaptiveStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid color-mix(in oklch, currentColor 40%, transparent);\n    color: currentColor;\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: color-mix(in oklch, currentColor 12%, transparent);\n    color: currentColor;\n  `,\n};\n\nexport const Wrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant; $adaptive: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  border-radius: 6px;\n  ${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};\n`;\n","export const colors = {\n  // White\n  white: \"#FFFFFF\",\n  \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n  \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n  // Brown\n  \"brown-10\": \"#FAF9F8\",\n  \"brown-20\": \"#F5F3F0\",\n  \"brown-30\": \"#EEEBE5\",\n  \"brown-40\": \"#E6E2DA\",\n  \"brown-50\": \"#CFCBC4\",\n  \"brown-60\": \"#A19E99\",\n  \"brown-70\": \"#73716D\",\n  \"brown-80\": \"#5C5A57\",\n  \"brown-90\": \"#2E2D2C\",\n  \"brown-100\": \"#171716\",\n  \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n  \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n  \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n  \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n  \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n  \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n  // Fuchsia\n  \"fuchsia-50\": \"#FAF5FF\",\n  \"fuchsia-300\": \"#F0ABFC\",\n  \"fuchsia-500\": \"#D946EF\",\n  \"fuchsia-600\": \"#C026D3\",\n  \"fuchsia-800\": \"#86198F\",\n\n  // Pink\n  \"pink-50\": \"#FDF2F8\",\n  \"pink-400\": \"#F472B6\",\n  \"pink-600\": \"#DB2777\",\n  \"pink-800\": \"#9D174D\",\n\n  // Violet\n  \"violet-50\": \"#F5F3FF\",\n  \"violet-400\": \"#A78BFA\",\n  \"violet-600\": \"#7C3AED\",\n  \"violet-800\": \"#5B21B6\",\n\n  // Indigo\n  \"indigo-50\": \"#EEF2FF\",\n  \"indigo-400\": \"#818CF8\",\n  \"indigo-500\": \"#6366F1\",\n  \"indigo-600\": \"#4F46E5\",\n  \"indigo-800\": \"#3730A3\",\n\n  // Cyan\n  \"cyan-50\": \"#E7FEFF\",\n  \"cyan-300\": \"#67E8F9\",\n  \"cyan-600\": \"#0891B2\",\n  \"cyan-900\": \"#164E63\",\n\n  // Teal\n  \"teal-50\": \"#EBFDF9\",\n  \"teal-300\": \"#5EEAD4\",\n  \"teal-600\": \"#0D9488\",\n\n  // Rose\n  \"rose-400\": \"#FB7185\",\n\n  // Purple\n  \"purple-400\": \"#C084FC\",\n\n  // Blue\n  \"blue-50\": \"#EFF6FF\",\n  \"blue-100\": \"#DBEAFE\",\n  \"blue-300\": \"#93C5FD\",\n  \"blue-400\": \"#60A5FA\",\n  \"blue-600\": \"#2563EB\",\n  \"blue-800\": \"#1E40AF\",\n\n  // Sky\n  \"sky-300\": \"#7DD3FC\",\n\n  // Green\n  \"green-50\": \"#ECF9F0\",\n  \"green-100\": \"#D4F1D9\",\n  \"green-400\": \"#3DC269\",\n  \"green-700\": \"#277C43\",\n  \"green-800\": \"#1C5930\",\n\n  // Orange\n  \"orange-50\": \"#FFF7ED\",\n  \"orange-100\": \"#FFEDD5\",\n  \"orange-200\": \"#FED7AA\",\n  \"orange-500\": \"#F97316\",\n  \"orange-600\": \"#EA580C\",\n\n  // Red\n  \"red-50\": \"#FEF2F2\",\n  \"red-100\": \"#FEE2E2\",\n  \"red-200\": \"#FECACA\",\n  \"red-400\": \"#F7776C\",\n  \"red-500\": \"#EF4444\",\n  \"red-600\": \"#DC2626\",\n\n  // Deck\n  \"deck-canvas\": \"#faf8f5\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import type { ComponentType, SVGProps } from \"react\";\n\n/** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\n/** Available visual variants for the keyboard shortcut display. */\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n  /** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */\n  OUTLINED: \"outlined\",\n  /** Filled keys with a solid background — for emphasis. */\n  FILLED: \"filled\",\n} as const;\n\n/** Visual variant for the KeyboardShortcut component. */\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\n/** Props for the KeyboardShortcut display component. */\nexport interface KeyboardShortcutProps {\n  /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */\n  keys: KeyIcon[];\n  /** Visual style variant. @default \"outlined\" */\n  variant?: KeyboardShortcutVariant;\n  /**\n   * When true, the border + glyph (outlined) or fill + glyph (filled) follow the surrounding text\n   * color (`currentColor`) instead of fixed tokens, so the chip reads on any surface — light or\n   * dark. Use on surfaces where the fixed-color variants wouldn't read (e.g. a prompt-launcher hero\n   * on a light backdrop). @default false\n   */\n  adaptive?: boolean;\n  /** Additional CSS class name. */\n  className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n  keys,\n  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n  adaptive = false,\n  className,\n}: KeyboardShortcutProps): ReactElement {\n  return (\n    <Wrapper className={className}>\n      {keys.map((KeyComponent, index) => (\n        <Key key={index} $variant={variant} $adaptive={adaptive}>\n          <Icon icon={KeyComponent} size={12} />\n        </Key>\n      ))}\n    </Wrapper>\n  );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n  const { width = 24, height = 24, ...rest } = props;\n\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        dominantBaseline=\"central\"\n        textAnchor=\"middle\"\n        fill=\"currentColor\"\n        fontFamily=\"Geist, sans-serif\"\n        fontWeight={300}\n        fontSize={14}\n      >\n        Ctrl\n      </text>\n    </svg>\n  );\n}\n"],"mappings":"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","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime"]}

package/dist/keyboard-shortcut.js

@@ -2,9 +2,9 @@ import {
   IconCtrl,
   KEYBOARD_SHORTCUT_VARIANTS,
   KeyboardShortcut
-} from "./chunk-PGR2MDDU.js";
+} from "./chunk-W66OJM55.js";
 import "./chunk-OLJIJYB5.js";
-import "./chunk-JF3P66JF.js";
+import "./chunk-SN3ORQSJ.js";
 import "./chunk-5WRI5ZAA.js";
 export {
   IconCtrl,

package/dist/table.cjs

@@ -30,6 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/table/index.ts
 var table_exports = {};
 __export(table_exports, {
+  DATA_TABLE_CELL_CLASS: () => DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_HEAD_CLASS: () => DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_ROW_CLASS: () => DATA_TABLE_ROW_CLASS,
+  DATA_TABLE_SCROLL_SHADOW: () => DATA_TABLE_SCROLL_SHADOW,
+  DataTable: () => DataTable,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCaption: () => TableCaption,
@@ -127,8 +132,43 @@ function useScrollShadow() {
   }, []);
   return { targetRef, isScrolled };
 }
+
+// src/components/table/data-table.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: targetRef,
+      className: cn("overscroll-none", className),
+      style: maxBodyHeight !== void 0 ? { maxHeight: maxBodyHeight, overflowY: "auto" } : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Table, { containerClassName: "overflow-visible", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          TableHeader,
+          {
+            "data-scrolled": isScrolled ? "true" : void 0,
+            className: "sticky top-0 z-10 bg-background/70 backdrop-blur-lg transition-shadow",
+            style: isScrolled ? { boxShadow: DATA_TABLE_SCROLL_SHADOW } : void 0,
+            children: header
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children })
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_ROW_CLASS,
+  DATA_TABLE_SCROLL_SHADOW,
+  DataTable,
   Table,
   TableBody,
   TableCaption,

package/dist/table.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/table/index.ts","../src/components/ui/table.tsx","../src/lib/utils.ts","../src/components/table/use-scroll-shadow.ts"],"sourcesContent":["/**\n * Public clay table primitives — shadcn-style compound components.\n *\n * Consumers compose tables at the call site from these parts (no wrapper, no smart `Table`):\n *\n * ```tsx\n * import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@shapesos/clay/table\";\n *\n * <Table>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Name</TableHead>\n *       <TableHead>Count</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     {rows.map((row) => (\n *       <TableRow key={row.id}>\n *         <TableCell>{row.name}</TableCell>\n *         <TableCell>{row.count}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n * </Table>\n * ```\n *\n * `Table` extends shadcn's primitive with a `containerClassName` prop so callers can override the\n * wrapping `<div>`'s `overflow-auto` — needed when the table sits inside an outer scroll container\n * (e.g. an artifact card) and you want the sticky-header containing block to align with that\n * outer container.\n *\n * **Style note:** these primitives use Tailwind v4 + the clay theme tokens (`bg-muted`,\n * `text-muted-foreground`, `border-border`, etc.). Consumers must import the compiled stylesheet\n * alongside the JS:\n *\n * ```ts\n * import \"@shapesos/clay/blocks/styles.css\";\n * ```\n *\n * (The stylesheet name is `blocks/styles.css` for historical reasons — it's the single bundle\n * that compiles all clay-side Tailwind output, including the table primitives.)\n */\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nexport { useScrollShadow } from \"./use-scroll-shadow\";\n","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 { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Combines class names using clsx and tailwind-merge — the standard shadcn/ui helper.\n * Tailwind classes that conflict (e.g. `p-2 p-4`) get merged so the last one wins.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/table/index.ts","../src/components/ui/table.tsx","../src/lib/utils.ts","../src/components/table/use-scroll-shadow.ts","../src/components/table/data-table.tsx"],"sourcesContent":["/**\n * Public clay table primitives — shadcn-style compound components.\n *\n * Consumers compose tables at the call site from these parts (no wrapper, no smart `Table`):\n *\n * ```tsx\n * import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"@shapesos/clay/table\";\n *\n * <Table>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Name</TableHead>\n *       <TableHead>Count</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     {rows.map((row) => (\n *       <TableRow key={row.id}>\n *         <TableCell>{row.name}</TableCell>\n *         <TableCell>{row.count}</TableCell>\n *       </TableRow>\n *     ))}\n *   </TableBody>\n * </Table>\n * ```\n *\n * `Table` extends shadcn's primitive with a `containerClassName` prop so callers can override the\n * wrapping `<div>`'s `overflow-auto` — needed when the table sits inside an outer scroll container\n * (e.g. an artifact card) and you want the sticky-header containing block to align with that\n * outer container.\n *\n * **Style note:** these primitives use Tailwind v4 + the clay theme tokens (`bg-muted`,\n * `text-muted-foreground`, `border-border`, etc.). Consumers must import the compiled stylesheet\n * alongside the JS:\n *\n * ```ts\n * import \"@shapesos/clay/blocks/styles.css\";\n * ```\n *\n * (The stylesheet name is `blocks/styles.css` for historical reasons — it's the single bundle\n * that compiles all clay-side Tailwind output, including the table primitives.)\n */\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nexport { useScrollShadow } from \"./use-scroll-shadow\";\nexport {\n  DataTable,\n  DATA_TABLE_CELL_CLASS,\n  DATA_TABLE_HEAD_CLASS,\n  DATA_TABLE_ROW_CLASS,\n  DATA_TABLE_SCROLL_SHADOW,\n} from \"./data-table\";\nexport type { DataTableProps } from \"./data-table\";\n","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 { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Combines class names using clsx and tailwind-merge — the standard shadcn/ui helper.\n * Tailwind classes that conflict (e.g. `p-2 p-4`) get merged so the last one wins.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\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":["import_jsx_runtime"]}

package/dist/table.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RefObject } from 'react';
+import { RefObject, ReactNode } from 'react';
 
 /** Extension of shadcn's `Table` registry component: exposes `containerClassName` so callers can
  * override the wrapping `<div>`'s default `overflow-auto`. We need this for sticky-header support
@@ -41,4 +41,39 @@ declare function useScrollShadow(): {
     isScrolled: boolean;
 };
 
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, useScrollShadow };
+/**
+ * Header cell class — compact, left-aligned, non-wrapping. Apply to each `<TableHead>` composed at
+ * the call site so every clay data table shares one header treatment.
+ */
+declare const DATA_TABLE_HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+/** Body cell class — roomy padding, top-aligned, left-aligned, min width so columns don't collapse. */
+declare const DATA_TABLE_CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+/**
+ * Data-row class matching the frosted-glass card scheme: `border-b-brown-30` overrides shadcn's
+ * default `--color-border` (brown-40) with the lighter brown-30; hover lifts to opaque `bg-secondary`.
+ */
+declare const DATA_TABLE_ROW_CLASS = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+/** Layered drop-shadow for the scroll-lift effect on the sticky header. */
+declare const DATA_TABLE_SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+interface DataTableProps {
+    /**
+     * Header row content — typically a single `<TableRow>` of `<TableHead>` cells (use
+     * `DATA_TABLE_HEAD_CLASS`). Rendered inside the sticky, frosted `<TableHeader>` shell.
+     */
+    header: ReactNode;
+    /** Body rows composed at the call site (`<TableRow>`/`<TableCell>`). */
+    children: ReactNode;
+    /** Max body height (px) before vertical scroll engages. Omit for no cap (grows to content). */
+    maxBodyHeight?: number;
+    /** Extra classes for the scroll container. */
+    className?: string;
+}
+/**
+ * Shared styled-table shell — the scroll container, sticky frosted (`bg-background/70
+ * backdrop-blur-lg`) header, and scroll-lift shadow (via {@link useScrollShadow}) that give clay
+ * data tables (table artifact, notification-draft recipients) one consistent look. Callers compose
+ * the header cells and body rows at the call site; this is only the shell.
+ */
+declare function DataTable({ header, children, maxBodyHeight, className }: DataTableProps): ReactNode;
+
+export { DATA_TABLE_CELL_CLASS, DATA_TABLE_HEAD_CLASS, DATA_TABLE_ROW_CLASS, DATA_TABLE_SCROLL_SHADOW, DataTable, type DataTableProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, useScrollShadow };

package/dist/table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RefObject } from 'react';
+import { RefObject, ReactNode } from 'react';
 
 /** Extension of shadcn's `Table` registry component: exposes `containerClassName` so callers can
  * override the wrapping `<div>`'s default `overflow-auto`. We need this for sticky-header support
@@ -41,4 +41,39 @@ declare function useScrollShadow(): {
     isScrolled: boolean;
 };
 
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, useScrollShadow };
+/**
+ * Header cell class — compact, left-aligned, non-wrapping. Apply to each `<TableHead>` composed at
+ * the call site so every clay data table shares one header treatment.
+ */
+declare const DATA_TABLE_HEAD_CLASS = "h-auto py-2 px-4 text-xs font-medium text-foreground whitespace-nowrap text-left";
+/** Body cell class — roomy padding, top-aligned, left-aligned, min width so columns don't collapse. */
+declare const DATA_TABLE_CELL_CLASS = "p-4 text-sm font-normal text-foreground align-top min-w-[150px] text-left";
+/**
+ * Data-row class matching the frosted-glass card scheme: `border-b-brown-30` overrides shadcn's
+ * default `--color-border` (brown-40) with the lighter brown-30; hover lifts to opaque `bg-secondary`.
+ */
+declare const DATA_TABLE_ROW_CLASS = "border-b-brown-30 bg-background/70 hover:bg-secondary";
+/** Layered drop-shadow for the scroll-lift effect on the sticky header. */
+declare const DATA_TABLE_SCROLL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.01), 0 6px 12px -2px rgb(0 0 0 / 0.03)";
+interface DataTableProps {
+    /**
+     * Header row content — typically a single `<TableRow>` of `<TableHead>` cells (use
+     * `DATA_TABLE_HEAD_CLASS`). Rendered inside the sticky, frosted `<TableHeader>` shell.
+     */
+    header: ReactNode;
+    /** Body rows composed at the call site (`<TableRow>`/`<TableCell>`). */
+    children: ReactNode;
+    /** Max body height (px) before vertical scroll engages. Omit for no cap (grows to content). */
+    maxBodyHeight?: number;
+    /** Extra classes for the scroll container. */
+    className?: string;
+}
+/**
+ * Shared styled-table shell — the scroll container, sticky frosted (`bg-background/70
+ * backdrop-blur-lg`) header, and scroll-lift shadow (via {@link useScrollShadow}) that give clay
+ * data tables (table artifact, notification-draft recipients) one consistent look. Callers compose
+ * the header cells and body rows at the call site; this is only the shell.
+ */
+declare function DataTable({ header, children, maxBodyHeight, className }: DataTableProps): ReactNode;
+
+export { DATA_TABLE_CELL_CLASS, DATA_TABLE_HEAD_CLASS, DATA_TABLE_ROW_CLASS, DATA_TABLE_SCROLL_SHADOW, DataTable, type DataTableProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, useScrollShadow };

package/dist/table.js

@@ -1,4 +1,9 @@
 import {
+  DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_ROW_CLASS,
+  DATA_TABLE_SCROLL_SHADOW,
+  DataTable,
   Table,
   TableBody,
   TableCaption,
@@ -8,10 +13,15 @@ import {
   TableHeader,
   TableRow,
   useScrollShadow
-} from "./chunk-4MZZH3WX.js";
+} from "./chunk-HU5W7CGE.js";
 import "./chunk-P6GUNIAE.js";
 import "./chunk-5WRI5ZAA.js";
 export {
+  DATA_TABLE_CELL_CLASS,
+  DATA_TABLE_HEAD_CLASS,
+  DATA_TABLE_ROW_CLASS,
+  DATA_TABLE_SCROLL_SHADOW,
+  DataTable,
   Table,
   TableBody,
   TableCaption,

package/dist/text-area.cjs

@@ -138,7 +138,9 @@ var colors = {
   "red-200": "#FECACA",
   "red-400": "#F7776C",
   "red-500": "#EF4444",
-  "red-600": "#DC2626"
+  "red-600": "#DC2626",
+  // Deck
+  "deck-canvas": "#faf8f5"
 };
 
 // src/tokens/typography.ts