@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/README.md

@@ -6,7 +6,7 @@ React component library for building TetraScience applications.
 
 ## Version
 
-v0.5.0
+v1.0.0
 
 This library provides:
 
@@ -26,12 +26,17 @@ This library provides:
 
 | Library version | React | Node.js | TDP (server utilities) |
 | --------------- | ----- | ------- | ---------------------- |
+| v1.0.x          | 19+   | 18+     | v4.x+                  |
+| v0.7.x          | 19+   | 18+     | v4.x+                  |
+| v0.6.x          | 19+   | 18+     | v4.x+                  |
 | v0.5.x          | 19+   | 18+     | v4.x+                  |
 | v0.4.x          | 19+   | 18+     | v4.x+                  |
 
 > **Note:** The client-side components have no TDP version dependency.
 > The `/server` utilities (JWT auth, provider helpers) require a running TDP instance of v4.x or later.
 > Browser support follows React 19's matrix (modern evergreen browsers).
+>
+> As of v1.0.0, heavy dependencies are **optional peer dependencies**: install `plotly.js-dist` if you use the chart components, `@streamdown/mermaid` / `@streamdown/math` if you use the AI markdown components, `@rdkit/rdkit` if you use `MoleculeStructure`, and the provider SDKs (`@aws-sdk/client-athena`, `@databricks/sql`, `snowflake-sdk`) only for the `/server` utilities you use. Apps that don't use these components don't need to install them.
 
 ## Installation
 
@@ -61,6 +66,33 @@ function App() {
 }
 ```
 
+Only need a handful of components? Every one is also importable individually — see [Per-Component Imports](#per-component-imports) below.
+
+### Per-Component Imports
+
+Every component is also reachable at its own subpath, grouped by category:
+`ui/*`, `composed/*`, `charts/*`, `ai/*`, `utils/*`:
+
+```tsx
+import { Button } from "@tetrascience-npm/tetrascience-react-ui/ui/button";
+import { StatCard } from "@tetrascience-npm/tetrascience-react-ui/composed/StatCard";
+import { AreaPlot } from "@tetrascience-npm/tetrascience-react-ui/charts/AreaPlot";
+```
+
+Importing this way only pulls in that component's own module graph — the main
+`@tetrascience-npm/tetrascience-react-ui` import still works exactly as
+before and pulls in everything. The difference matters most for **Jest**,
+which has no tree-shaking and re-evaluates the full import graph on every
+test file: a full-barrel import costs ~1.2s of module evaluation per test
+file; a single-component subpath costs ~0.1s. For a production bundler
+(Vite, webpack 5) the difference is smaller since unused components are
+already tree-shaken from the main import.
+
+The subpath name always matches the component's directory/file under
+`src/components/<category>/` — check [DESIGN.md](./DESIGN.md) or the
+[Storybook](https://ts-lib-ui-kit-storybook.vercel.app/) sidebar for the
+exact name.
+
 ## Styling & CSS
 
 This library uses **Tailwind CSS 4** with design tokens defined as CSS custom properties (oklch color space). All CSS files are declared as [`sideEffects`](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) in `package.json`, so bundlers will preserve them while still tree-shaking unused JavaScript.
@@ -94,7 +126,7 @@ Dark mode is supported via the `.dark` class on a parent element. See [THEMING.m
 
 shadcn/ui components built on Radix UI with Tailwind CSS and CVA variants:
 
-Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CodeEditor, Collapsible, ComboBox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Field, HoverCard, Input, InputGroup, InputOTP, Item, KBD, Label, MenuBar, NavigationMenu, RadioGroup, ResizablePanel, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, TetraScience Icon, Toggle, ToggleGroup, Tooltip
+Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CodeEditor, Collapsible, ComboBox, Command, ContextMenu, Dialog, DropdownMenu, Field, HoverCard, Input, InputGroup, Item, KBD, Label, MenuBar, NavigationMenu, RadioGroup, ResizablePanel, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, TetraScience Icon, Toggle, ToggleGroup, Tooltip
 
 ### Composed Components (`composed/`)
 
@@ -157,7 +189,7 @@ Use `ProcessFlow` from `@tetrascience-npm/tetrascience-react-ui` for multi-step
 
 Plotly.js-based data visualisations:
 
-AreaGraph, BarGraph, Boxplot, Chromatogram, ChromatogramChart, DotPlot, Heatmap, Histogram, LineGraph, PieChart, PlateMap, ScatterGraph
+AreaPlot, BarChart, BoxPlot, Chromatogram, StackedChromatogram, Electropherogram, Histogram, LinePlot, PieChart, PlateMap, ScatterPlot, ScatterPlotInteractive
 
 ## Server Utilities
 
@@ -363,9 +395,31 @@ Full TypeScript support with exported types:
 
 ```tsx
 import { Button } from "@tetrascience-npm/tetrascience-react-ui";
-import type { ButtonProps, BarGraphProps, BarDataSeries } from "@tetrascience-npm/tetrascience-react-ui";
+import type { ButtonProps, BarChartProps, BarDataSeries } from "@tetrascience-npm/tetrascience-react-ui";
 ```
 
+## Testing your app with Jest
+
+The kit ships dual ESM + CJS output, so Jest's CommonJS runtime can load every component directly — no need to mock the package. What Jest *can't* load are a few third-party dependencies that publish ESM-only (the streamdown/markdown stack, shiki, `use-stick-to-bottom`, `react-resizable-panels`) and optional peers you may not have installed (`plotly.js-dist`, `@rdkit/rdkit`). The kit ships a single setup file that stubs exactly those, plus the jsdom shims Radix-based components need (ResizeObserver, matchMedia, pointer capture, …).
+
+Add one line to `jest.config.js`:
+
+```js
+module.exports = {
+  testEnvironment: "jsdom",
+  setupFiles: ["@tetrascience-npm/tetrascience-react-ui/jest-setup"],
+};
+```
+
+Requires Jest ≥ 28 (package `exports` support) and `jest-environment-jsdom`. To override any stub, register your own mock — `jest.mock("<module>", …)` in a test file or a later setup file replaces the kit's registration. If Jest runs with `injectGlobals: false`, import `installUiKitJestMocks` / `installUiKitDomShims` from the same module and call them from your own setup file with the `jest` object.
+
+What the stubs do:
+
+- **Charts** render their containers; Plotly calls resolve against an inert stub (jsdom has no WebGL). Assert on props/behavior, not pixels — visual assertions belong in a real browser.
+- **`MessageResponse` / `Reasoning`** render the markdown source as plain text, so text-content assertions work without transpiling the markdown ecosystem.
+- **`CodeBlock`** renders unhighlighted code lines. Only the languages the kit ships by default are covered — a grammar you add yourself via `registerCodeBlockLanguage` isn't mockable by this setup file, since it isn't known ahead of time.
+- **`MoleculeStructure`** resolves against a stub that always returns a valid, empty-SVG molecule. For real assertions (invalid-SMILES handling, actual rendered markup), use the kit's own override hook instead of relying on the stub: `configureRDKit({ importFactory: () => Promise.resolve(myFakeRDKitModule) })`, exported alongside `MoleculeStructure`.
+
 ## Examples
 
 This repository uses component driven development with Storybook. To see the examples run the following.

package/dist/ai/attachments.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("lucide-react"),u=require("react"),A=require("../ui/button.cjs"),h=require("../ui/hover-card.cjs"),i=require("../lib/utils.cjs"),y={audio:a.Music2Icon,document:a.FileTextIcon,image:a.ImageIcon,source:a.GlobeIcon,unknown:a.PaperclipIcon,video:a.VideoIcon},x=e=>{if(e.type==="source-document")return"source";const t=e.mediaType??"";return t.startsWith("image/")?"image":t.startsWith("video/")?"video":t.startsWith("audio/")?"audio":t.startsWith("application/")||t.startsWith("text/")?"document":"unknown"},v=e=>{if(e.type==="source-document")return e.title||e.filename||"Source";const t=x(e);return e.filename||(t==="image"?"Image":"Attachment")},j=(e,t,r)=>r?n.jsx("img",{alt:t||"Image",className:"size-full object-cover",height:96,src:e,width:96}):n.jsx("img",{alt:t||"Image",className:"size-full rounded object-cover",height:20,src:e,width:20}),p=u.createContext(null),f=u.createContext(null),b=()=>u.useContext(p)??{variant:"grid"},m=()=>{const e=u.useContext(f);if(!e)throw new Error("Attachment components must be used within <Attachment>");return e},I=({variant:e="grid",className:t,children:r,...o})=>{const s=u.useMemo(()=>({variant:e}),[e]);return n.jsx(p.Provider,{value:s,children:n.jsx("div",{className:i.cn("flex items-start",e==="list"?"flex-col gap-2":"flex-wrap gap-2",e==="grid"&&"ml-auto w-fit",t),...o,children:r})})},w=({data:e,onRemove:t,className:r,children:o,...s})=>{const{variant:c}=b(),l=x(e),d=u.useMemo(()=>({data:e,mediaCategory:l,onRemove:t,variant:c}),[e,l,t,c]);return n.jsx(f.Provider,{value:d,children:n.jsx("div",{className:i.cn("group relative",c==="grid"&&"size-24 overflow-hidden rounded-lg",c==="inline"&&["flex h-8 cursor-pointer select-none items-center gap-1.5","rounded-md border border-border px-1.5","font-medium text-sm transition-all","hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"],c==="list"&&["flex w-full items-center gap-3 rounded-lg border p-3","hover:bg-accent/50"],r),...s,children:o})})},z=({fallbackIcon:e,className:t,...r})=>{const{data:o,mediaCategory:s,variant:c}=m(),l=c==="inline"?"size-3":"size-4",d=g=>n.jsx(g,{className:i.cn(l,"text-muted-foreground")}),C=()=>{if(s==="image"&&o.type==="file"&&o.url)return j(o.url,o.filename,c==="grid");if(s==="video"&&o.type==="file"&&o.url)return n.jsx("video",{className:"size-full object-cover",muted:!0,src:o.url});const g=y[s];return e??d(g)};return n.jsx("div",{className:i.cn("flex shrink-0 items-center justify-center overflow-hidden",c==="grid"&&"size-full bg-muted",c==="inline"&&"size-5 rounded bg-background",c==="list"&&"size-12 rounded bg-muted",t),...r,children:C()})},N=({showMediaType:e=!1,className:t,...r})=>{const{data:o,variant:s}=m(),c=v(o);return s==="grid"?null:n.jsxs("div",{className:i.cn("min-w-0 flex-1",t),...r,children:[n.jsx("span",{className:"block truncate",children:c}),e&&o.mediaType&&n.jsx("span",{className:"block truncate text-muted-foreground text-xs",children:o.mediaType})]})},k=({label:e="Remove",className:t,children:r,...o})=>{const{onRemove:s,variant:c}=m(),l=u.useCallback(d=>{d.stopPropagation(),s?.()},[s]);return s?n.jsxs(A.Button,{"aria-label":e,className:i.cn(c==="grid"&&["absolute top-2 right-2 size-6 rounded-full p-0","bg-background/80 backdrop-blur-sm","opacity-0 transition-opacity group-hover:opacity-100","hover:bg-background","[&>svg]:size-3"],c==="inline"&&["size-5 rounded p-0","opacity-0 transition-opacity group-hover:opacity-100","[&>svg]:size-2.5"],c==="list"&&["size-8 shrink-0 rounded p-0","[&>svg]:size-4"],t),onClick:l,type:"button",variant:"ghost",...o,children:[r??n.jsx(a.XIcon,{}),n.jsx("span",{className:"sr-only",children:e})]}):null},H=({openDelay:e=0,closeDelay:t=0,...r})=>n.jsx(h.HoverCard,{closeDelay:t,openDelay:e,...r}),T=e=>n.jsx(h.HoverCardTrigger,{...e}),P=({align:e="start",className:t,...r})=>n.jsx(h.HoverCardContent,{align:e,className:i.cn("w-auto p-2",t),...r}),q=({className:e,children:t,...r})=>n.jsx("div",{className:i.cn("flex items-center justify-center p-4 text-muted-foreground text-sm",e),...r,children:t??"No attachments"});exports.Attachment=w;exports.AttachmentEmpty=q;exports.AttachmentHoverCard=H;exports.AttachmentHoverCardContent=P;exports.AttachmentHoverCardTrigger=T;exports.AttachmentInfo=N;exports.AttachmentPreview=z;exports.AttachmentRemove=k;exports.Attachments=I;exports.getAttachmentLabel=v;exports.getMediaCategory=x;exports.useAttachmentContext=m;exports.useAttachmentsContext=b;
+//# sourceMappingURL=attachments.cjs.map

package/dist/ai/attachments.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachments.cjs","sources":["../../src/components/ai/attachments.tsx"],"sourcesContent":["import {\n  FileTextIcon,\n  GlobeIcon,\n  ImageIcon,\n  Music2Icon,\n  PaperclipIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { createContext, useCallback, useContext, useMemo } from \"react\";\n\nimport type { FileUIPart, SourceDocumentUIPart } from \"ai\";\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { cn } from \"@/lib/utils\";\n\n\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AttachmentData =\n  | (FileUIPart & { id: string })\n  | (SourceDocumentUIPart & { id: string });\n\nexport type AttachmentMediaCategory =\n  | \"image\"\n  | \"video\"\n  | \"audio\"\n  | \"document\"\n  | \"source\"\n  | \"unknown\";\n\nexport type AttachmentVariant = \"grid\" | \"inline\" | \"list\";\n\nconst mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {\n  audio: Music2Icon,\n  document: FileTextIcon,\n  image: ImageIcon,\n  source: GlobeIcon,\n  unknown: PaperclipIcon,\n  video: VideoIcon,\n};\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\nexport const getMediaCategory = (\n  data: AttachmentData\n): AttachmentMediaCategory => {\n  if (data.type === \"source-document\") {\n    return \"source\";\n  }\n\n  const mediaType = data.mediaType ?? \"\";\n\n  if (mediaType.startsWith(\"image/\")) {\n    return \"image\";\n  }\n  if (mediaType.startsWith(\"video/\")) {\n    return \"video\";\n  }\n  if (mediaType.startsWith(\"audio/\")) {\n    return \"audio\";\n  }\n  if (mediaType.startsWith(\"application/\") || mediaType.startsWith(\"text/\")) {\n    return \"document\";\n  }\n\n  return \"unknown\";\n};\n\nexport const getAttachmentLabel = (data: AttachmentData): string => {\n  if (data.type === \"source-document\") {\n    return data.title || data.filename || \"Source\";\n  }\n\n  const category = getMediaCategory(data);\n  return data.filename || (category === \"image\" ? \"Image\" : \"Attachment\");\n};\n\nconst renderAttachmentImage = (\n  url: string,\n  filename: string | undefined,\n  isGrid: boolean\n) =>\n  isGrid ? (\n    <img\n      alt={filename || \"Image\"}\n      className=\"size-full object-cover\"\n      height={96}\n      src={url}\n      width={96}\n    />\n  ) : (\n    <img\n      alt={filename || \"Image\"}\n      className=\"size-full rounded object-cover\"\n      height={20}\n      src={url}\n      width={20}\n    />\n  );\n\n// ============================================================================\n// Contexts\n// ============================================================================\n\ninterface AttachmentsContextValue {\n  variant: AttachmentVariant;\n}\n\nconst AttachmentsContext = createContext<AttachmentsContextValue | null>(null);\n\ninterface AttachmentContextValue {\n  data: AttachmentData;\n  mediaCategory: AttachmentMediaCategory;\n  onRemove?: () => void;\n  variant: AttachmentVariant;\n}\n\nconst AttachmentContext = createContext<AttachmentContextValue | null>(null);\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\nexport const useAttachmentsContext = () =>\n  useContext(AttachmentsContext) ?? { variant: \"grid\" as const };\n\nexport const useAttachmentContext = () => {\n  const ctx = useContext(AttachmentContext);\n  if (!ctx) {\n    throw new Error(\"Attachment components must be used within <Attachment>\");\n  }\n  return ctx;\n};\n\n// ============================================================================\n// Attachments - Container\n// ============================================================================\n\nexport type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: AttachmentVariant;\n};\n\nexport const Attachments = ({\n  variant = \"grid\",\n  className,\n  children,\n  ...props\n}: AttachmentsProps) => {\n  const contextValue = useMemo(() => ({ variant }), [variant]);\n\n  return (\n    <AttachmentsContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"flex items-start\",\n          variant === \"list\" ? \"flex-col gap-2\" : \"flex-wrap gap-2\",\n          variant === \"grid\" && \"ml-auto w-fit\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </AttachmentsContext.Provider>\n  );\n};\n\n// ============================================================================\n// Attachment - Item\n// ============================================================================\n\nexport type AttachmentProps = HTMLAttributes<HTMLDivElement> & {\n  data: AttachmentData;\n  onRemove?: () => void;\n};\n\nexport const Attachment = ({\n  data,\n  onRemove,\n  className,\n  children,\n  ...props\n}: AttachmentProps) => {\n  const { variant } = useAttachmentsContext();\n  const mediaCategory = getMediaCategory(data);\n\n  const contextValue = useMemo<AttachmentContextValue>(\n    () => ({ data, mediaCategory, onRemove, variant }),\n    [data, mediaCategory, onRemove, variant]\n  );\n\n  return (\n    <AttachmentContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group relative\",\n          variant === \"grid\" && \"size-24 overflow-hidden rounded-lg\",\n          variant === \"inline\" && [\n            \"flex h-8 cursor-pointer select-none items-center gap-1.5\",\n            \"rounded-md border border-border px-1.5\",\n            \"font-medium text-sm transition-all\",\n            \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n          ],\n          variant === \"list\" && [\n            \"flex w-full items-center gap-3 rounded-lg border p-3\",\n            \"hover:bg-accent/50\",\n          ],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </AttachmentContext.Provider>\n  );\n};\n\n// ============================================================================\n// AttachmentPreview - Media preview\n// ============================================================================\n\nexport type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {\n  fallbackIcon?: ReactNode;\n};\n\nexport const AttachmentPreview = ({\n  fallbackIcon,\n  className,\n  ...props\n}: AttachmentPreviewProps) => {\n  const { data, mediaCategory, variant } = useAttachmentContext();\n\n  const iconSize = variant === \"inline\" ? \"size-3\" : \"size-4\";\n\n  const renderIcon = (Icon: typeof ImageIcon) => (\n    <Icon className={cn(iconSize, \"text-muted-foreground\")} />\n  );\n\n  const renderContent = () => {\n    if (mediaCategory === \"image\" && data.type === \"file\" && data.url) {\n      return renderAttachmentImage(data.url, data.filename, variant === \"grid\");\n    }\n\n    if (mediaCategory === \"video\" && data.type === \"file\" && data.url) {\n      return <video className=\"size-full object-cover\" muted src={data.url} />;\n    }\n\n    const Icon = mediaCategoryIcons[mediaCategory];\n    return fallbackIcon ?? renderIcon(Icon);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex shrink-0 items-center justify-center overflow-hidden\",\n        variant === \"grid\" && \"size-full bg-muted\",\n        variant === \"inline\" && \"size-5 rounded bg-background\",\n        variant === \"list\" && \"size-12 rounded bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\n// ============================================================================\n// AttachmentInfo - Name and type display\n// ============================================================================\n\nexport type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {\n  showMediaType?: boolean;\n};\n\nexport const AttachmentInfo = ({\n  showMediaType = false,\n  className,\n  ...props\n}: AttachmentInfoProps) => {\n  const { data, variant } = useAttachmentContext();\n  const label = getAttachmentLabel(data);\n\n  if (variant === \"grid\") {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"min-w-0 flex-1\", className)} {...props}>\n      <span className=\"block truncate\">{label}</span>\n      {showMediaType && data.mediaType && (\n        <span className=\"block truncate text-muted-foreground text-xs\">\n          {data.mediaType}\n        </span>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// AttachmentRemove - Remove button\n// ============================================================================\n\nexport type AttachmentRemoveProps = ComponentProps<typeof Button> & {\n  label?: string;\n};\n\nexport const AttachmentRemove = ({\n  label = \"Remove\",\n  className,\n  children,\n  ...props\n}: AttachmentRemoveProps) => {\n  const { onRemove, variant } = useAttachmentContext();\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onRemove?.();\n    },\n    [onRemove]\n  );\n\n  if (!onRemove) {\n    return null;\n  }\n\n  return (\n    <Button\n      aria-label={label}\n      className={cn(\n        variant === \"grid\" && [\n          \"absolute top-2 right-2 size-6 rounded-full p-0\",\n          \"bg-background/80 backdrop-blur-sm\",\n          \"opacity-0 transition-opacity group-hover:opacity-100\",\n          \"hover:bg-background\",\n          \"[&>svg]:size-3\",\n        ],\n        variant === \"inline\" && [\n          \"size-5 rounded p-0\",\n          \"opacity-0 transition-opacity group-hover:opacity-100\",\n          \"[&>svg]:size-2.5\",\n        ],\n        variant === \"list\" && [\"size-8 shrink-0 rounded p-0\", \"[&>svg]:size-4\"],\n        className\n      )}\n      onClick={handleClick}\n      type=\"button\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <XIcon />}\n      <span className=\"sr-only\">{label}</span>\n    </Button>\n  );\n};\n\n// ============================================================================\n// AttachmentHoverCard - Hover preview\n// ============================================================================\n\nexport type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;\n\nexport const AttachmentHoverCard = ({\n  openDelay = 0,\n  closeDelay = 0,\n  ...props\n}: AttachmentHoverCardProps) => (\n  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\n\nexport type AttachmentHoverCardTriggerProps = ComponentProps<\n  typeof HoverCardTrigger\n>;\n\nexport const AttachmentHoverCardTrigger = (\n  props: AttachmentHoverCardTriggerProps\n) => <HoverCardTrigger {...props} />;\n\nexport type AttachmentHoverCardContentProps = ComponentProps<\n  typeof HoverCardContent\n>;\n\nexport const AttachmentHoverCardContent = ({\n  align = \"start\",\n  className,\n  ...props\n}: AttachmentHoverCardContentProps) => (\n  <HoverCardContent\n    align={align}\n    className={cn(\"w-auto p-2\", className)}\n    {...props}\n  />\n);\n\n// ============================================================================\n// AttachmentEmpty - Empty state\n// ============================================================================\n\nexport type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AttachmentEmpty = ({\n  className,\n  children,\n  ...props\n}: AttachmentEmptyProps) => (\n  <div\n    className={cn(\n      \"flex items-center justify-center p-4 text-muted-foreground text-sm\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? \"No attachments\"}\n  </div>\n);\n"],"names":["mediaCategoryIcons","Music2Icon","FileTextIcon","ImageIcon","GlobeIcon","PaperclipIcon","VideoIcon","getMediaCategory","data","mediaType","getAttachmentLabel","category","renderAttachmentImage","url","filename","isGrid","jsx","AttachmentsContext","createContext","AttachmentContext","useAttachmentsContext","useContext","useAttachmentContext","ctx","Attachments","variant","className","children","props","contextValue","useMemo","cn","Attachment","onRemove","mediaCategory","AttachmentPreview","fallbackIcon","iconSize","renderIcon","Icon","renderContent","AttachmentInfo","showMediaType","label","jsxs","AttachmentRemove","handleClick","useCallback","e","Button","XIcon","AttachmentHoverCard","openDelay","closeDelay","HoverCard","AttachmentHoverCardTrigger","HoverCardTrigger","AttachmentHoverCardContent","align","HoverCardContent","AttachmentEmpty"],"mappings":"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"}

package/dist/ai/attachments.js

@@ -0,0 +1,224 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { XIcon as y, VideoIcon as C, PaperclipIcon as A, GlobeIcon as z, ImageIcon as I, FileTextIcon as w, Music2Icon as N } from "lucide-react";
+import { createContext as g, useMemo as h, useCallback as k, useContext as p } from "react";
+import { Button as j } from "../ui/button.js";
+import { HoverCard as T, HoverCardContent as H, HoverCardTrigger as P } from "../ui/hover-card.js";
+import { cn as s } from "../lib/utils.js";
+const W = {
+  audio: N,
+  document: w,
+  image: I,
+  source: z,
+  unknown: A,
+  video: C
+}, f = (e) => {
+  if (e.type === "source-document")
+    return "source";
+  const t = e.mediaType ?? "";
+  return t.startsWith("image/") ? "image" : t.startsWith("video/") ? "video" : t.startsWith("audio/") ? "audio" : t.startsWith("application/") || t.startsWith("text/") ? "document" : "unknown";
+}, M = (e) => {
+  if (e.type === "source-document")
+    return e.title || e.filename || "Source";
+  const t = f(e);
+  return e.filename || (t === "image" ? "Image" : "Attachment");
+}, V = (e, t, r) => r ? /* @__PURE__ */ i(
+  "img",
+  {
+    alt: t || "Image",
+    className: "size-full object-cover",
+    height: 96,
+    src: e,
+    width: 96
+  }
+) : /* @__PURE__ */ i(
+  "img",
+  {
+    alt: t || "Image",
+    className: "size-full rounded object-cover",
+    height: 20,
+    src: e,
+    width: 20
+  }
+), v = g(null), x = g(null), E = () => p(v) ?? { variant: "grid" }, u = () => {
+  const e = p(x);
+  if (!e)
+    throw new Error("Attachment components must be used within <Attachment>");
+  return e;
+}, X = ({
+  variant: e = "grid",
+  className: t,
+  children: r,
+  ...n
+}) => {
+  const c = h(() => ({ variant: e }), [e]);
+  return /* @__PURE__ */ i(v.Provider, { value: c, children: /* @__PURE__ */ i(
+    "div",
+    {
+      className: s(
+        "flex items-start",
+        e === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+        e === "grid" && "ml-auto w-fit",
+        t
+      ),
+      ...n,
+      children: r
+    }
+  ) });
+}, q = ({
+  data: e,
+  onRemove: t,
+  className: r,
+  children: n,
+  ...c
+}) => {
+  const { variant: o } = E(), a = f(e), l = h(
+    () => ({ data: e, mediaCategory: a, onRemove: t, variant: o }),
+    [e, a, t, o]
+  );
+  return /* @__PURE__ */ i(x.Provider, { value: l, children: /* @__PURE__ */ i(
+    "div",
+    {
+      className: s(
+        "group relative",
+        o === "grid" && "size-24 overflow-hidden rounded-lg",
+        o === "inline" && [
+          "flex h-8 cursor-pointer select-none items-center gap-1.5",
+          "rounded-md border border-border px-1.5",
+          "font-medium text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+        ],
+        o === "list" && [
+          "flex w-full items-center gap-3 rounded-lg border p-3",
+          "hover:bg-accent/50"
+        ],
+        r
+      ),
+      ...c,
+      children: n
+    }
+  ) });
+}, D = ({
+  fallbackIcon: e,
+  className: t,
+  ...r
+}) => {
+  const { data: n, mediaCategory: c, variant: o } = u(), a = o === "inline" ? "size-3" : "size-4", l = (d) => /* @__PURE__ */ i(d, { className: s(a, "text-muted-foreground") }), b = () => {
+    if (c === "image" && n.type === "file" && n.url)
+      return V(n.url, n.filename, o === "grid");
+    if (c === "video" && n.type === "file" && n.url)
+      return /* @__PURE__ */ i("video", { className: "size-full object-cover", muted: !0, src: n.url });
+    const d = W[c];
+    return e ?? l(d);
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: s(
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        o === "grid" && "size-full bg-muted",
+        o === "inline" && "size-5 rounded bg-background",
+        o === "list" && "size-12 rounded bg-muted",
+        t
+      ),
+      ...r,
+      children: b()
+    }
+  );
+}, J = ({
+  showMediaType: e = !1,
+  className: t,
+  ...r
+}) => {
+  const { data: n, variant: c } = u(), o = M(n);
+  return c === "grid" ? null : /* @__PURE__ */ m("div", { className: s("min-w-0 flex-1", t), ...r, children: [
+    /* @__PURE__ */ i("span", { className: "block truncate", children: o }),
+    e && n.mediaType && /* @__PURE__ */ i("span", { className: "block truncate text-muted-foreground text-xs", children: n.mediaType })
+  ] });
+}, K = ({
+  label: e = "Remove",
+  className: t,
+  children: r,
+  ...n
+}) => {
+  const { onRemove: c, variant: o } = u(), a = k(
+    (l) => {
+      l.stopPropagation(), c?.();
+    },
+    [c]
+  );
+  return c ? /* @__PURE__ */ m(
+    j,
+    {
+      "aria-label": e,
+      className: s(
+        o === "grid" && [
+          "absolute top-2 right-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3"
+        ],
+        o === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5"
+        ],
+        o === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        t
+      ),
+      onClick: a,
+      type: "button",
+      variant: "ghost",
+      ...n,
+      children: [
+        r ?? /* @__PURE__ */ i(y, {}),
+        /* @__PURE__ */ i("span", { className: "sr-only", children: e })
+      ]
+    }
+  ) : null;
+}, O = ({
+  openDelay: e = 0,
+  closeDelay: t = 0,
+  ...r
+}) => /* @__PURE__ */ i(T, { closeDelay: t, openDelay: e, ...r }), Q = (e) => /* @__PURE__ */ i(P, { ...e }), U = ({
+  align: e = "start",
+  className: t,
+  ...r
+}) => /* @__PURE__ */ i(
+  H,
+  {
+    align: e,
+    className: s("w-auto p-2", t),
+    ...r
+  }
+), Y = ({
+  className: e,
+  children: t,
+  ...r
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: s(
+      "flex items-center justify-center p-4 text-muted-foreground text-sm",
+      e
+    ),
+    ...r,
+    children: t ?? "No attachments"
+  }
+);
+export {
+  q as Attachment,
+  Y as AttachmentEmpty,
+  O as AttachmentHoverCard,
+  U as AttachmentHoverCardContent,
+  Q as AttachmentHoverCardTrigger,
+  J as AttachmentInfo,
+  D as AttachmentPreview,
+  K as AttachmentRemove,
+  X as Attachments,
+  M as getAttachmentLabel,
+  f as getMediaCategory,
+  u as useAttachmentContext,
+  E as useAttachmentsContext
+};
+//# sourceMappingURL=attachments.js.map

package/dist/ai/attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachments.js","sources":["../../src/components/ai/attachments.tsx"],"sourcesContent":["import {\n  FileTextIcon,\n  GlobeIcon,\n  ImageIcon,\n  Music2Icon,\n  PaperclipIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { createContext, useCallback, useContext, useMemo } from \"react\";\n\nimport type { FileUIPart, SourceDocumentUIPart } from \"ai\";\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { cn } from \"@/lib/utils\";\n\n\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AttachmentData =\n  | (FileUIPart & { id: string })\n  | (SourceDocumentUIPart & { id: string });\n\nexport type AttachmentMediaCategory =\n  | \"image\"\n  | \"video\"\n  | \"audio\"\n  | \"document\"\n  | \"source\"\n  | \"unknown\";\n\nexport type AttachmentVariant = \"grid\" | \"inline\" | \"list\";\n\nconst mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {\n  audio: Music2Icon,\n  document: FileTextIcon,\n  image: ImageIcon,\n  source: GlobeIcon,\n  unknown: PaperclipIcon,\n  video: VideoIcon,\n};\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\nexport const getMediaCategory = (\n  data: AttachmentData\n): AttachmentMediaCategory => {\n  if (data.type === \"source-document\") {\n    return \"source\";\n  }\n\n  const mediaType = data.mediaType ?? \"\";\n\n  if (mediaType.startsWith(\"image/\")) {\n    return \"image\";\n  }\n  if (mediaType.startsWith(\"video/\")) {\n    return \"video\";\n  }\n  if (mediaType.startsWith(\"audio/\")) {\n    return \"audio\";\n  }\n  if (mediaType.startsWith(\"application/\") || mediaType.startsWith(\"text/\")) {\n    return \"document\";\n  }\n\n  return \"unknown\";\n};\n\nexport const getAttachmentLabel = (data: AttachmentData): string => {\n  if (data.type === \"source-document\") {\n    return data.title || data.filename || \"Source\";\n  }\n\n  const category = getMediaCategory(data);\n  return data.filename || (category === \"image\" ? \"Image\" : \"Attachment\");\n};\n\nconst renderAttachmentImage = (\n  url: string,\n  filename: string | undefined,\n  isGrid: boolean\n) =>\n  isGrid ? (\n    <img\n      alt={filename || \"Image\"}\n      className=\"size-full object-cover\"\n      height={96}\n      src={url}\n      width={96}\n    />\n  ) : (\n    <img\n      alt={filename || \"Image\"}\n      className=\"size-full rounded object-cover\"\n      height={20}\n      src={url}\n      width={20}\n    />\n  );\n\n// ============================================================================\n// Contexts\n// ============================================================================\n\ninterface AttachmentsContextValue {\n  variant: AttachmentVariant;\n}\n\nconst AttachmentsContext = createContext<AttachmentsContextValue | null>(null);\n\ninterface AttachmentContextValue {\n  data: AttachmentData;\n  mediaCategory: AttachmentMediaCategory;\n  onRemove?: () => void;\n  variant: AttachmentVariant;\n}\n\nconst AttachmentContext = createContext<AttachmentContextValue | null>(null);\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\nexport const useAttachmentsContext = () =>\n  useContext(AttachmentsContext) ?? { variant: \"grid\" as const };\n\nexport const useAttachmentContext = () => {\n  const ctx = useContext(AttachmentContext);\n  if (!ctx) {\n    throw new Error(\"Attachment components must be used within <Attachment>\");\n  }\n  return ctx;\n};\n\n// ============================================================================\n// Attachments - Container\n// ============================================================================\n\nexport type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: AttachmentVariant;\n};\n\nexport const Attachments = ({\n  variant = \"grid\",\n  className,\n  children,\n  ...props\n}: AttachmentsProps) => {\n  const contextValue = useMemo(() => ({ variant }), [variant]);\n\n  return (\n    <AttachmentsContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"flex items-start\",\n          variant === \"list\" ? \"flex-col gap-2\" : \"flex-wrap gap-2\",\n          variant === \"grid\" && \"ml-auto w-fit\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </AttachmentsContext.Provider>\n  );\n};\n\n// ============================================================================\n// Attachment - Item\n// ============================================================================\n\nexport type AttachmentProps = HTMLAttributes<HTMLDivElement> & {\n  data: AttachmentData;\n  onRemove?: () => void;\n};\n\nexport const Attachment = ({\n  data,\n  onRemove,\n  className,\n  children,\n  ...props\n}: AttachmentProps) => {\n  const { variant } = useAttachmentsContext();\n  const mediaCategory = getMediaCategory(data);\n\n  const contextValue = useMemo<AttachmentContextValue>(\n    () => ({ data, mediaCategory, onRemove, variant }),\n    [data, mediaCategory, onRemove, variant]\n  );\n\n  return (\n    <AttachmentContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group relative\",\n          variant === \"grid\" && \"size-24 overflow-hidden rounded-lg\",\n          variant === \"inline\" && [\n            \"flex h-8 cursor-pointer select-none items-center gap-1.5\",\n            \"rounded-md border border-border px-1.5\",\n            \"font-medium text-sm transition-all\",\n            \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n          ],\n          variant === \"list\" && [\n            \"flex w-full items-center gap-3 rounded-lg border p-3\",\n            \"hover:bg-accent/50\",\n          ],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </AttachmentContext.Provider>\n  );\n};\n\n// ============================================================================\n// AttachmentPreview - Media preview\n// ============================================================================\n\nexport type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {\n  fallbackIcon?: ReactNode;\n};\n\nexport const AttachmentPreview = ({\n  fallbackIcon,\n  className,\n  ...props\n}: AttachmentPreviewProps) => {\n  const { data, mediaCategory, variant } = useAttachmentContext();\n\n  const iconSize = variant === \"inline\" ? \"size-3\" : \"size-4\";\n\n  const renderIcon = (Icon: typeof ImageIcon) => (\n    <Icon className={cn(iconSize, \"text-muted-foreground\")} />\n  );\n\n  const renderContent = () => {\n    if (mediaCategory === \"image\" && data.type === \"file\" && data.url) {\n      return renderAttachmentImage(data.url, data.filename, variant === \"grid\");\n    }\n\n    if (mediaCategory === \"video\" && data.type === \"file\" && data.url) {\n      return <video className=\"size-full object-cover\" muted src={data.url} />;\n    }\n\n    const Icon = mediaCategoryIcons[mediaCategory];\n    return fallbackIcon ?? renderIcon(Icon);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex shrink-0 items-center justify-center overflow-hidden\",\n        variant === \"grid\" && \"size-full bg-muted\",\n        variant === \"inline\" && \"size-5 rounded bg-background\",\n        variant === \"list\" && \"size-12 rounded bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\n// ============================================================================\n// AttachmentInfo - Name and type display\n// ============================================================================\n\nexport type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {\n  showMediaType?: boolean;\n};\n\nexport const AttachmentInfo = ({\n  showMediaType = false,\n  className,\n  ...props\n}: AttachmentInfoProps) => {\n  const { data, variant } = useAttachmentContext();\n  const label = getAttachmentLabel(data);\n\n  if (variant === \"grid\") {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"min-w-0 flex-1\", className)} {...props}>\n      <span className=\"block truncate\">{label}</span>\n      {showMediaType && data.mediaType && (\n        <span className=\"block truncate text-muted-foreground text-xs\">\n          {data.mediaType}\n        </span>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// AttachmentRemove - Remove button\n// ============================================================================\n\nexport type AttachmentRemoveProps = ComponentProps<typeof Button> & {\n  label?: string;\n};\n\nexport const AttachmentRemove = ({\n  label = \"Remove\",\n  className,\n  children,\n  ...props\n}: AttachmentRemoveProps) => {\n  const { onRemove, variant } = useAttachmentContext();\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onRemove?.();\n    },\n    [onRemove]\n  );\n\n  if (!onRemove) {\n    return null;\n  }\n\n  return (\n    <Button\n      aria-label={label}\n      className={cn(\n        variant === \"grid\" && [\n          \"absolute top-2 right-2 size-6 rounded-full p-0\",\n          \"bg-background/80 backdrop-blur-sm\",\n          \"opacity-0 transition-opacity group-hover:opacity-100\",\n          \"hover:bg-background\",\n          \"[&>svg]:size-3\",\n        ],\n        variant === \"inline\" && [\n          \"size-5 rounded p-0\",\n          \"opacity-0 transition-opacity group-hover:opacity-100\",\n          \"[&>svg]:size-2.5\",\n        ],\n        variant === \"list\" && [\"size-8 shrink-0 rounded p-0\", \"[&>svg]:size-4\"],\n        className\n      )}\n      onClick={handleClick}\n      type=\"button\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <XIcon />}\n      <span className=\"sr-only\">{label}</span>\n    </Button>\n  );\n};\n\n// ============================================================================\n// AttachmentHoverCard - Hover preview\n// ============================================================================\n\nexport type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;\n\nexport const AttachmentHoverCard = ({\n  openDelay = 0,\n  closeDelay = 0,\n  ...props\n}: AttachmentHoverCardProps) => (\n  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\n\nexport type AttachmentHoverCardTriggerProps = ComponentProps<\n  typeof HoverCardTrigger\n>;\n\nexport const AttachmentHoverCardTrigger = (\n  props: AttachmentHoverCardTriggerProps\n) => <HoverCardTrigger {...props} />;\n\nexport type AttachmentHoverCardContentProps = ComponentProps<\n  typeof HoverCardContent\n>;\n\nexport const AttachmentHoverCardContent = ({\n  align = \"start\",\n  className,\n  ...props\n}: AttachmentHoverCardContentProps) => (\n  <HoverCardContent\n    align={align}\n    className={cn(\"w-auto p-2\", className)}\n    {...props}\n  />\n);\n\n// ============================================================================\n// AttachmentEmpty - Empty state\n// ============================================================================\n\nexport type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AttachmentEmpty = ({\n  className,\n  children,\n  ...props\n}: AttachmentEmptyProps) => (\n  <div\n    className={cn(\n      \"flex items-center justify-center p-4 text-muted-foreground text-sm\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? \"No attachments\"}\n  </div>\n);\n"],"names":["mediaCategoryIcons","Music2Icon","FileTextIcon","ImageIcon","GlobeIcon","PaperclipIcon","VideoIcon","getMediaCategory","data","mediaType","getAttachmentLabel","category","renderAttachmentImage","url","filename","isGrid","jsx","AttachmentsContext","createContext","AttachmentContext","useAttachmentsContext","useContext","useAttachmentContext","ctx","Attachments","variant","className","children","props","contextValue","useMemo","cn","Attachment","onRemove","mediaCategory","AttachmentPreview","fallbackIcon","iconSize","renderIcon","Icon","renderContent","AttachmentInfo","showMediaType","label","jsxs","AttachmentRemove","handleClick","useCallback","e","Button","XIcon","AttachmentHoverCard","openDelay","closeDelay","HoverCard","AttachmentHoverCardTrigger","HoverCardTrigger","AttachmentHoverCardContent","align","HoverCardContent","AttachmentEmpty"],"mappings":"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"}

package/dist/ai/chain-of-thought.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lucide-react"),l=require("../ui/collapsible.cjs"),s=require("../lib/utils.cjs"),h=({className:t,defaultOpen:a=!0,...o})=>e.jsx(l.Collapsible,{className:s.cn("overflow-hidden rounded-lg text-sm",t),defaultOpen:a,...o}),u=({className:t,children:a,title:o="Chain of Thought",icon:r,isStreaming:n=!1,...p})=>e.jsx(l.CollapsibleTrigger,{className:s.cn("group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",t),...p,children:a??e.jsxs(e.Fragment,{children:[r??e.jsx(i.Brain,{className:"size-4 text-muted-foreground"}),e.jsxs("span",{className:"flex-1 text-left items-center gap-2",children:[o,n&&e.jsx("span",{className:"size-1.5 animate-pulse rounded-full bg-primary"})]}),e.jsx(i.ChevronUpIcon,{className:"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180","data-slot":"collapsible-chevron"})]})}),c=({className:t,...a})=>e.jsx(l.CollapsibleContent,{className:s.cn("flex flex-col gap-2.5 pb-4 pt-3","data-[state=closed]:animate-out data-[state=open]:animate-in","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",t),...a}),x={bullet:e.jsx("span",{className:"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50"}),search:e.jsx(i.SearchIcon,{className:"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground"}),image:e.jsx(i.ImageIcon,{className:"mt-0.5 size-3.5 shrink-0 text-muted-foreground"})},d=({variant:t="bullet",className:a,children:o,...r})=>{const n=typeof t=="string"?x[t]:t;return e.jsxs("div",{className:s.cn("flex items-start gap-2 text-muted-foreground",a),...r,children:[e.jsx("span",{className:"flex shrink-0",children:n}),e.jsx("span",{className:"min-w-0 flex-1 leading-relaxed",children:o})]})},g=({className:t,...a})=>e.jsx("div",{className:s.cn("ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3",t),...a}),m=({className:t,children:a,...o})=>e.jsx("a",{className:s.cn("inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors",o.href&&"cursor-pointer hover:bg-accent hover:text-accent-foreground",t),rel:"noreferrer",target:"_blank",...o,children:a}),f=({src:t,alt:a="",caption:o,className:r,...n})=>e.jsxs("figure",{className:s.cn("ml-[22px] overflow-hidden rounded-lg border",r),...n,children:[e.jsx("img",{alt:a,className:"max-h-64 w-full object-cover",src:t}),o&&e.jsx("figcaption",{className:"border-t px-3 py-2 text-xs italic text-muted-foreground",children:o})]});h.displayName="ChainOfThought";u.displayName="ChainOfThoughtTrigger";c.displayName="ChainOfThoughtContent";d.displayName="ChainOfThoughtStep";g.displayName="ChainOfThoughtSources";m.displayName="ChainOfThoughtSource";f.displayName="ChainOfThoughtImage";exports.ChainOfThought=h;exports.ChainOfThoughtContent=c;exports.ChainOfThoughtImage=f;exports.ChainOfThoughtSource=m;exports.ChainOfThoughtSources=g;exports.ChainOfThoughtStep=d;exports.ChainOfThoughtTrigger=u;
+//# sourceMappingURL=chain-of-thought.cjs.map

package/dist/ai/chain-of-thought.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chain-of-thought.cjs","sources":["../../src/components/ai/chain-of-thought.tsx"],"sourcesContent":["import { Brain, ChevronUpIcon, ImageIcon, SearchIcon } from \"lucide-react\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n// ---------------------------------------------------------------------------\n// ChainOfThought (root)\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtProps = ComponentProps<typeof Collapsible>;\n\nexport const ChainOfThought = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible\n    className={cn(\"overflow-hidden rounded-lg text-sm\", className)}\n    defaultOpen={defaultOpen}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtTrigger\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  title?: string;\n  icon?: ReactNode;\n  /** When true, renders a subtle animated dot next to the title. */\n  isStreaming?: boolean;\n};\n\nexport const ChainOfThoughtTrigger = ({\n  className,\n  children,\n  title = \"Chain of Thought\",\n  icon,\n  isStreaming = false,\n  ...props\n}: ChainOfThoughtTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon ?? <Brain className=\"size-4 text-muted-foreground\" />}\n        <span className=\"flex-1 text-left items-center gap-2\">\n          {title}\n          {isStreaming && (\n            <span className=\"size-1.5 animate-pulse rounded-full bg-primary\" />\n          )}\n        </span>\n        <ChevronUpIcon\n          className=\"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180\"\n          data-slot=\"collapsible-chevron\"\n        />\n      </>\n    )}\n  </CollapsibleTrigger>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtContent\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = ({\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"flex flex-col gap-2.5 pb-4 pt-3\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtStep\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtStepVariant = \"bullet\" | \"search\" | \"image\";\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  /**\n   * Visual prefix for the step.\n   * - `\"bullet\"` — small dot (default, plain reasoning text)\n   * - `\"search\"` — magnifying-glass (web search / tool call)\n   * - `\"image\"` — image icon (image fetch / vision step)\n   * - ReactNode — custom icon\n   */\n  variant?: ChainOfThoughtStepVariant | ReactNode;\n};\n\nconst STEP_ICONS: Record<ChainOfThoughtStepVariant, ReactNode> = {\n  bullet: (\n    <span className=\"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50\" />\n  ),\n  search: <SearchIcon className=\"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground\" />,\n  image: <ImageIcon className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground\" />,\n};\n\nexport const ChainOfThoughtStep = ({\n  variant = \"bullet\",\n  className,\n  children,\n  ...props\n}: ChainOfThoughtStepProps) => {\n  const icon =\n    typeof variant === \"string\"\n      ? STEP_ICONS[variant as ChainOfThoughtStepVariant]\n      : variant;\n\n  return (\n    <div\n      className={cn(\"flex items-start gap-2 text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"flex shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1 leading-relaxed\">{children}</span>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtSources — inline chip group with left bar\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtSourcesProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSources = ({\n  className,\n  ...props\n}: ChainOfThoughtSourcesProps) => (\n  <div\n    className={cn(\n      \"ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSourceProps = ComponentProps<\"a\">;\n\nexport const ChainOfThoughtSource = ({\n  className,\n  children,\n  ...props\n}: ChainOfThoughtSourceProps) => (\n  <a\n    className={cn(\n      \"inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors\",\n      props.href && \"cursor-pointer hover:bg-accent hover:text-accent-foreground\",\n      className\n    )}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    {...props}\n  >\n    {children}\n  </a>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtImage — inline image with optional caption\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"figure\"> & {\n  src: string;\n  alt?: string;\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = ({\n  src,\n  alt = \"\",\n  caption,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\"ml-[22px] overflow-hidden rounded-lg border\", className)}\n    {...props}\n  >\n    <img alt={alt} className=\"max-h-64 w-full object-cover\" src={src} />\n    {caption && (\n      <figcaption className=\"border-t px-3 py-2 text-xs italic text-muted-foreground\">\n        {caption}\n      </figcaption>\n    )}\n  </figure>\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtTrigger.displayName = \"ChainOfThoughtTrigger\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSources.displayName = \"ChainOfThoughtSources\";\nChainOfThoughtSource.displayName = \"ChainOfThoughtSource\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"names":["ChainOfThought","className","defaultOpen","props","jsx","Collapsible","cn","ChainOfThoughtTrigger","children","title","icon","isStreaming","CollapsibleTrigger","jsxs","Fragment","Brain","ChevronUpIcon","ChainOfThoughtContent","CollapsibleContent","STEP_ICONS","SearchIcon","ImageIcon","ChainOfThoughtStep","variant","ChainOfThoughtSources","ChainOfThoughtSource","ChainOfThoughtImage","src","alt","caption"],"mappings":"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"}

package/dist/ai/chain-of-thought.js

@@ -0,0 +1,145 @@
+import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { Brain as c, ChevronUpIcon as m, ImageIcon as h, SearchIcon as u } from "lucide-react";
+import { Collapsible as g, CollapsibleContent as f, CollapsibleTrigger as p } from "../ui/collapsible.js";
+import { cn as r } from "../lib/utils.js";
+const x = ({
+  className: e,
+  defaultOpen: a = !0,
+  ...o
+}) => /* @__PURE__ */ t(
+  g,
+  {
+    className: r("overflow-hidden rounded-lg text-sm", e),
+    defaultOpen: a,
+    ...o
+  }
+), N = ({
+  className: e,
+  children: a,
+  title: o = "Chain of Thought",
+  icon: s,
+  isStreaming: n = !1,
+  ...i
+}) => /* @__PURE__ */ t(
+  p,
+  {
+    className: r(
+      "group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+      e
+    ),
+    ...i,
+    children: a ?? /* @__PURE__ */ l(d, { children: [
+      s ?? /* @__PURE__ */ t(c, { className: "size-4 text-muted-foreground" }),
+      /* @__PURE__ */ l("span", { className: "flex-1 text-left items-center gap-2", children: [
+        o,
+        n && /* @__PURE__ */ t("span", { className: "size-1.5 animate-pulse rounded-full bg-primary" })
+      ] }),
+      /* @__PURE__ */ t(
+        m,
+        {
+          className: "size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180",
+          "data-slot": "collapsible-chevron"
+        }
+      )
+    ] })
+  }
+), C = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ t(
+  f,
+  {
+    className: r(
+      "flex flex-col gap-2.5 pb-4 pt-3",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
+      e
+    ),
+    ...a
+  }
+), b = {
+  bullet: /* @__PURE__ */ t("span", { className: "mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
+  search: /* @__PURE__ */ t(u, { className: "mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground" }),
+  image: /* @__PURE__ */ t(h, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" })
+}, T = ({
+  variant: e = "bullet",
+  className: a,
+  children: o,
+  ...s
+}) => {
+  const n = typeof e == "string" ? b[e] : e;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: r("flex items-start gap-2 text-muted-foreground", a),
+      ...s,
+      children: [
+        /* @__PURE__ */ t("span", { className: "flex shrink-0", children: n }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 leading-relaxed", children: o })
+      ]
+    }
+  );
+}, y = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: r(
+      "ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3",
+      e
+    ),
+    ...a
+  }
+), O = ({
+  className: e,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ t(
+  "a",
+  {
+    className: r(
+      "inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors",
+      o.href && "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+      e
+    ),
+    rel: "noreferrer",
+    target: "_blank",
+    ...o,
+    children: a
+  }
+), v = ({
+  src: e,
+  alt: a = "",
+  caption: o,
+  className: s,
+  ...n
+}) => /* @__PURE__ */ l(
+  "figure",
+  {
+    className: r("ml-[22px] overflow-hidden rounded-lg border", s),
+    ...n,
+    children: [
+      /* @__PURE__ */ t("img", { alt: a, className: "max-h-64 w-full object-cover", src: e }),
+      o && /* @__PURE__ */ t("figcaption", { className: "border-t px-3 py-2 text-xs italic text-muted-foreground", children: o })
+    ]
+  }
+);
+x.displayName = "ChainOfThought";
+N.displayName = "ChainOfThoughtTrigger";
+C.displayName = "ChainOfThoughtContent";
+T.displayName = "ChainOfThoughtStep";
+y.displayName = "ChainOfThoughtSources";
+O.displayName = "ChainOfThoughtSource";
+v.displayName = "ChainOfThoughtImage";
+export {
+  x as ChainOfThought,
+  C as ChainOfThoughtContent,
+  v as ChainOfThoughtImage,
+  O as ChainOfThoughtSource,
+  y as ChainOfThoughtSources,
+  T as ChainOfThoughtStep,
+  N as ChainOfThoughtTrigger
+};
+//# sourceMappingURL=chain-of-thought.js.map