@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.108.1 → 0.7.0-beta.129.1

package/README.md

@@ -6,7 +6,7 @@ React component library for building TetraScience applications.
 
 ## Version
 
-v0.5.0
+v0.7.0
 
 This library provides:
 
@@ -26,12 +26,16 @@ This library provides:
 
 | Library version | React | Node.js | TDP (server utilities) |
 | --------------- | ----- | ------- | ---------------------- |
+| 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 v0.7.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
 
@@ -157,7 +161,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,7 +367,7 @@ 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";
 ```
 
 ## Examples

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("lucide-react"),i=require("../ui/collapsible.cjs"),s=require("../../lib/utils.cjs"),h=({className:t,defaultOpen:a=!0,...o})=>e.jsx(i.Collapsible,{className:s.cn("overflow-hidden rounded-lg text-sm",t),defaultOpen:a,...o}),c=({className:t,children:a,title:o="Chain of Thought",icon:r,isStreaming:n=!1,...p})=>e.jsx(i.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(l.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(l.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"})]})}),u=({className:t,...a})=>e.jsx(i.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(l.SearchIcon,{className:"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground"}),image:e.jsx(l.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/70",children:o})]});h.displayName="ChainOfThought";c.displayName="ChainOfThoughtTrigger";u.displayName="ChainOfThoughtContent";d.displayName="ChainOfThoughtStep";g.displayName="ChainOfThoughtSources";m.displayName="ChainOfThoughtSource";f.displayName="ChainOfThoughtImage";exports.ChainOfThought=h;exports.ChainOfThoughtContent=u;exports.ChainOfThoughtImage=f;exports.ChainOfThoughtSource=m;exports.ChainOfThoughtSources=g;exports.ChainOfThoughtStep=d;exports.ChainOfThoughtTrigger=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("lucide-react"),i=require("../ui/collapsible.cjs"),s=require("../../lib/utils.cjs"),h=({className:t,defaultOpen:a=!0,...o})=>e.jsx(i.Collapsible,{className:s.cn("overflow-hidden rounded-lg text-sm",t),defaultOpen:a,...o}),c=({className:t,children:a,title:o="Chain of Thought",icon:r,isStreaming:n=!1,...p})=>e.jsx(i.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(l.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(l.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"})]})}),u=({className:t,...a})=>e.jsx(i.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(l.SearchIcon,{className:"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground"}),image:e.jsx(l.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";c.displayName="ChainOfThoughtTrigger";u.displayName="ChainOfThoughtContent";d.displayName="ChainOfThoughtStep";g.displayName="ChainOfThoughtSources";m.displayName="ChainOfThoughtSource";f.displayName="ChainOfThoughtImage";exports.ChainOfThought=h;exports.ChainOfThoughtContent=u;exports.ChainOfThoughtImage=f;exports.ChainOfThoughtSource=m;exports.ChainOfThoughtSources=g;exports.ChainOfThoughtStep=d;exports.ChainOfThoughtTrigger=c;
 //# sourceMappingURL=chain-of-thought.cjs.map

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

@@ -1 +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/70\">\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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"}
+{"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":"mNAiBaA,EAAiB,CAAC,CAC7B,UAAAC,EACA,YAAAC,EAAc,GACd,GAAGC,CACL,IACEC,EAAAA,IAACC,EAAAA,YAAA,CACC,UAAWC,EAAAA,GAAG,qCAAsCL,CAAS,EAC7D,YAAAC,EACC,GAAGC,CAAA,CACN,EAcWI,EAAwB,CAAC,CACpC,UAAAN,EACA,SAAAO,EACA,MAAAC,EAAQ,mBACR,KAAAC,EACA,YAAAC,EAAc,GACd,GAAGR,CACL,IACEC,EAAAA,IAACQ,EAAAA,mBAAA,CACC,UAAWN,EAAAA,GACT,6GACAL,CAAA,EAED,GAAGE,EAEH,YACCU,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAJ,GAAQN,EAAAA,IAACW,EAAAA,MAAA,CAAM,UAAU,8BAAA,CAA+B,EACzDF,EAAAA,KAAC,OAAA,CAAK,UAAU,sCACb,SAAA,CAAAJ,EACAE,GACCP,EAAAA,IAAC,OAAA,CAAK,UAAU,gDAAA,CAAiD,CAAA,EAErE,EACAA,EAAAA,IAACY,EAAAA,cAAA,CACC,UAAU,yLACV,YAAU,qBAAA,CAAA,CACZ,CAAA,CACF,CAAA,CAEJ,EASWC,EAAwB,CAAC,CACpC,UAAAhB,EACA,GAAGE,CACL,IACEC,EAAAA,IAACc,EAAAA,mBAAA,CACC,UAAWZ,EAAAA,GACT,kCACA,+DACA,6DACA,+EACAL,CAAA,EAED,GAAGE,CAAA,CACN,EAoBIgB,EAA2D,CAC/D,OACEf,EAAAA,IAAC,OAAA,CAAK,UAAU,qEAAA,CAAsE,EAExF,OAAQA,EAAAA,IAACgB,EAAAA,WAAA,CAAW,UAAU,yDAAA,CAA0D,EACxF,MAAOhB,EAAAA,IAACiB,EAAAA,UAAA,CAAU,UAAU,gDAAA,CAAiD,CAC/E,EAEaC,EAAqB,CAAC,CACjC,QAAAC,EAAU,SACV,UAAAtB,EACA,SAAAO,EACA,GAAGL,CACL,IAA+B,CAC7B,MAAMO,EACJ,OAAOa,GAAY,SACfJ,EAAWI,CAAoC,EAC/CA,EAEN,OACEV,EAAAA,KAAC,MAAA,CACC,UAAWP,EAAAA,GAAG,+CAAgDL,CAAS,EACtE,GAAGE,EAEJ,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAiB,SAAAM,EAAK,EACtCN,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAkC,SAAAI,CAAA,CAAS,CAAA,CAAA,CAAA,CAGjE,EAQagB,EAAwB,CAAC,CACpC,UAAAvB,EACA,GAAGE,CACL,IACEC,EAAAA,IAAC,MAAA,CACC,UAAWE,EAAAA,GACT,oFACAL,CAAA,EAED,GAAGE,CAAA,CACN,EAKWsB,EAAuB,CAAC,CACnC,UAAAxB,EACA,SAAAO,EACA,GAAGL,CACL,IACEC,EAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,GACT,wIACAH,EAAM,MAAQ,8DACdF,CAAA,EAEF,IAAI,aACJ,OAAO,SACN,GAAGE,EAEH,SAAAK,CAAA,CACH,EAaWkB,EAAsB,CAAC,CAClC,IAAAC,EACA,IAAAC,EAAM,GACN,QAAAC,EACA,UAAA5B,EACA,GAAGE,CACL,IACEU,EAAAA,KAAC,SAAA,CACC,UAAWP,EAAAA,GAAG,8CAA+CL,CAAS,EACrE,GAAGE,EAEJ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,IAAAwB,EAAU,UAAU,+BAA+B,IAAAD,EAAU,EACjEE,GACCzB,EAAAA,IAAC,aAAA,CAAW,UAAU,0DACnB,SAAAyB,CAAA,CACH,CAAA,CAAA,CAEJ,EAGF7B,EAAe,YAAc,iBAC7BO,EAAsB,YAAc,wBACpCU,EAAsB,YAAc,wBACpCK,EAAmB,YAAc,qBACjCE,EAAsB,YAAc,wBACpCC,EAAqB,YAAc,uBACnCC,EAAoB,YAAc"}

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

@@ -122,7 +122,7 @@ const x = ({
     ...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/70", children: o })
+      o && /* @__PURE__ */ t("figcaption", { className: "border-t px-3 py-2 text-xs italic text-muted-foreground", children: o })
     ]
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"chain-of-thought.js","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/70\">\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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"}
+{"version":3,"file":"chain-of-thought.js","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/components/ai/confirmation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("motion/react"),i=require("react"),b=require("../ui/button.cjs"),j=require("../ui/code-block.cjs"),v=require("../ui/kbd.cjs"),r=require("../../lib/utils.cjs"),d=i.createContext(null),a=()=>{const e=i.useContext(d);if(!e)throw new Error("Confirmation components must be used within Confirmation");return e},g=1500,h=({className:e,approval:n,state:t,children:m,...c})=>{const f=i.useMemo(()=>({approval:n,state:t}),[n,t]),[p,C]=i.useState(!0),u=n?.approved===!0&&(t==="approval-responded"||t==="output-available"||t==="output-denied");if(i.useEffect(()=>{if(u){const s=setTimeout(()=>C(!1),g);return()=>clearTimeout(s)}},[u]),!n||t==="input-streaming"||t==="input-available")return null;const x=Object.fromEntries(Object.entries(c).filter(([s])=>s.startsWith("data-")||s.startsWith("aria-")));return o.jsx(d.Provider,{value:f,children:o.jsx(l.AnimatePresence,{children:p&&o.jsx(l.motion.div,{...x,className:r.cn("flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-sm",e),exit:{opacity:0,scale:.96},id:c.id,style:c.style,transition:{duration:.5,ease:"easeOut"},children:m})})})},q=({className:e,children:n,...t})=>o.jsx("h3",{className:r.cn("font-semibold text-base text-foreground",e),...t,children:n}),A=({className:e,children:n,...t})=>o.jsx(j.CodeBlock,{className:r.cn(e),...t,language:"bash",code:n?.toString()??""}),y=({children:e})=>{const{state:n}=a();return n!=="approval-requested"?null:o.jsx(o.Fragment,{children:e})},E=({children:e})=>{const{approval:n,state:t}=a();return!n?.approved||t!=="approval-responded"&&t!=="output-denied"&&t!=="output-available"?null:o.jsx(o.Fragment,{children:e})},N=({children:e})=>{const{approval:n,state:t}=a();return n?.approved!==!1||t!=="approval-responded"&&t!=="output-denied"&&t!=="output-available"?null:o.jsx(o.Fragment,{children:e})},R=({className:e,...n})=>{const{state:t}=a();return t!=="approval-requested"?null:o.jsx("div",{className:r.cn("flex items-center justify-between gap-2",e),...n})},S=({className:e,size:n="sm",...t})=>o.jsx(b.Button,{className:r.cn("gap-1.5",e),size:n,type:"button",...t}),T=({className:e,...n})=>o.jsx(v.Kbd,{className:r.cn("ml-0.5",e),...n});exports.Confirmation=h;exports.ConfirmationAccepted=E;exports.ConfirmationAction=S;exports.ConfirmationActions=R;exports.ConfirmationCode=A;exports.ConfirmationRejected=N;exports.ConfirmationRequest=y;exports.ConfirmationShortcut=T;exports.ConfirmationTitle=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("motion/react"),r=require("react"),b=require("../ui/button.cjs"),j=require("../ui/code-block.cjs"),v=require("../ui/kbd.cjs"),i=require("../../lib/utils.cjs"),d=r.createContext(null),a=()=>{const e=r.useContext(d);if(!e)throw new Error("Confirmation components must be used within Confirmation");return e},g=1500,h=({className:e,approval:n,state:t,children:m,...c})=>{const f=r.useMemo(()=>({approval:n,state:t}),[n,t]),[p,C]=r.useState(!0),u=n?.approved===!0&&(t==="approval-responded"||t==="output-available"||t==="output-denied");if(r.useEffect(()=>{if(u){const s=setTimeout(()=>C(!1),g);return()=>clearTimeout(s)}},[u]),!n||t==="input-streaming"||t==="input-available")return null;const x=Object.fromEntries(Object.entries(c).filter(([s])=>s.startsWith("data-")||s.startsWith("aria-")));return o.jsx(d.Provider,{value:f,children:o.jsx(l.AnimatePresence,{children:p&&o.jsx(l.motion.div,{...x,className:i.cn("flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-elevation-3",e),exit:{opacity:0,scale:.96},id:c.id,style:c.style,transition:{duration:.5,ease:"easeOut"},children:m})})})},q=({className:e,children:n,...t})=>o.jsx("h3",{className:i.cn("font-semibold text-base text-foreground",e),...t,children:n}),A=({className:e,children:n,...t})=>o.jsx(j.CodeBlock,{className:i.cn(e),...t,language:"bash",code:n?.toString()??""}),y=({children:e})=>{const{state:n}=a();return n!=="approval-requested"?null:o.jsx(o.Fragment,{children:e})},E=({children:e})=>{const{approval:n,state:t}=a();return!n?.approved||t!=="approval-responded"&&t!=="output-denied"&&t!=="output-available"?null:o.jsx(o.Fragment,{children:e})},N=({children:e})=>{const{approval:n,state:t}=a();return n?.approved!==!1||t!=="approval-responded"&&t!=="output-denied"&&t!=="output-available"?null:o.jsx(o.Fragment,{children:e})},R=({className:e,...n})=>{const{state:t}=a();return t!=="approval-requested"?null:o.jsx("div",{className:i.cn("flex items-center justify-between gap-2",e),...n})},S=({className:e,size:n="sm",...t})=>o.jsx(b.Button,{className:i.cn("gap-1.5",e),size:n,type:"button",...t}),T=({className:e,...n})=>o.jsx(v.Kbd,{className:i.cn("ml-0.5",e),...n});exports.Confirmation=h;exports.ConfirmationAccepted=E;exports.ConfirmationAction=S;exports.ConfirmationActions=R;exports.ConfirmationCode=A;exports.ConfirmationRejected=N;exports.ConfirmationRequest=y;exports.ConfirmationShortcut=T;exports.ConfirmationTitle=q;
 //# sourceMappingURL=confirmation.cjs.map

package/dist/components/ai/confirmation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation.cjs","sources":["../../../src/components/ai/confirmation.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"motion/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\n\nimport type { ToolUIPart } from \"ai\";\nimport type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { cn } from \"@/lib/utils\";\n\n\ntype ToolUIPartApproval =\n  | { id: string; approved?: never; reason?: never }\n  | { id: string; approved: boolean; reason?: string }\n  | { id: string; approved: true; reason?: string }\n  | { id: string; approved: false; reason?: string }\n  | undefined;\n\ninterface ConfirmationContextValue {\n  approval: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n}\n\nconst ConfirmationContext = createContext<ConfirmationContextValue | null>(null);\n\nconst useConfirmation = () => {\n  const context = useContext(ConfirmationContext);\n  if (!context) {\n    throw new Error(\"Confirmation components must be used within Confirmation\");\n  }\n  return context;\n};\n\n// ---------------------------------------------------------------------------\n// Confirmation (root)\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationProps = ComponentProps<\"div\"> & {\n  approval?: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n};\n\nconst ACCEPTED_HIDE_DELAY = 1500;\n\nexport const Confirmation = ({\n  className,\n  approval,\n  state,\n  children,\n  ...props\n}: ConfirmationProps) => {\n  const contextValue = useMemo(() => ({ approval, state }), [approval, state]);\n  const [visible, setVisible] = useState(true);\n\n  const isAccepted =\n    approval?.approved === true &&\n    (state === \"approval-responded\" ||\n      state === \"output-available\" ||\n      state === \"output-denied\");\n\n  useEffect(() => {\n    if (isAccepted) {\n      const timer = setTimeout(() => setVisible(false), ACCEPTED_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isAccepted]);\n\n  if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n    return null;\n  }\n\n  // Pass through data-* and aria-* only; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <ConfirmationContext.Provider value={contextValue}>\n      <AnimatePresence>\n        {visible && (\n          <motion.div\n            {...passthroughProps}\n            className={cn(\n              \"flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-sm\",\n              className\n            )}\n            exit={{ opacity: 0, scale: 0.96 }}\n            id={props.id}\n            style={props.style}\n            transition={{ duration: 0.5, ease: \"easeOut\" }}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ConfirmationContext.Provider>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationTitle\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationTitleProps = PropsWithChildren<ComponentProps<\"h3\">>;\n\nexport const ConfirmationTitle = ({\n  className,\n  children,\n  ...props\n}: ConfirmationTitleProps) => (\n  <h3\n    className={cn(\"font-semibold text-base text-foreground\", className)}\n    {...props}\n  >\n    {children}\n  </h3>\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationCode — monospace command/code block\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationCodeProps = ComponentProps<typeof CodeBlock>;\n\nexport const ConfirmationCode = ({\n  className,\n  children,\n  ...props\n}: ConfirmationCodeProps) => (\n  <CodeBlock className={cn(className)} {...props} language=\"bash\" code={children?.toString() ?? ''} />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationRequest / Accepted / Rejected — conditional renderers\n// ---------------------------------------------------------------------------\n\nexport const ConfirmationRequest = ({ children }: { children?: ReactNode }) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return <>{children}</>;\n};\n\nexport const ConfirmationAccepted = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    !approval?.approved ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\nexport const ConfirmationRejected = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    approval?.approved !== false ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationActions — deny left, allow buttons right\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({\n  className,\n  ...props\n}: ConfirmationActionsProps) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return (\n    <div\n      className={cn(\"flex items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationAction — individual button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionProps = ComponentProps<typeof Button>;\n\nexport const ConfirmationAction = ({\n  className,\n  size = \"sm\",\n  ...props\n}: ConfirmationActionProps) => (\n  <Button\n    className={cn(\"gap-1.5\", className)}\n    size={size}\n    type=\"button\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationShortcut — keyboard shortcut label inside a button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationShortcutProps = ComponentProps<typeof Kbd>;\n\nexport const ConfirmationShortcut = ({\n  className,\n  ...props\n}: ConfirmationShortcutProps) => (\n  <Kbd className={cn(\"ml-0.5\", className)} {...props} />\n);\n"],"names":["ConfirmationContext","createContext","useConfirmation","context","useContext","ACCEPTED_HIDE_DELAY","Confirmation","className","approval","state","children","props","contextValue","useMemo","visible","setVisible","useState","isAccepted","useEffect","timer","passthroughProps","k","jsx","AnimatePresence","motion","cn","ConfirmationTitle","ConfirmationCode","CodeBlock","ConfirmationRequest","ConfirmationAccepted","ConfirmationRejected","ConfirmationActions","ConfirmationAction","size","Button","ConfirmationShortcut","Kbd"],"mappings":"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"}
+{"version":3,"file":"confirmation.cjs","sources":["../../../src/components/ai/confirmation.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"motion/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\n\nimport type { ToolUIPart } from \"ai\";\nimport type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { cn } from \"@/lib/utils\";\n\n\ntype ToolUIPartApproval =\n  | { id: string; approved?: never; reason?: never }\n  | { id: string; approved: boolean; reason?: string }\n  | { id: string; approved: true; reason?: string }\n  | { id: string; approved: false; reason?: string }\n  | undefined;\n\ninterface ConfirmationContextValue {\n  approval: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n}\n\nconst ConfirmationContext = createContext<ConfirmationContextValue | null>(null);\n\nconst useConfirmation = () => {\n  const context = useContext(ConfirmationContext);\n  if (!context) {\n    throw new Error(\"Confirmation components must be used within Confirmation\");\n  }\n  return context;\n};\n\n// ---------------------------------------------------------------------------\n// Confirmation (root)\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationProps = ComponentProps<\"div\"> & {\n  approval?: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n};\n\nconst ACCEPTED_HIDE_DELAY = 1500;\n\nexport const Confirmation = ({\n  className,\n  approval,\n  state,\n  children,\n  ...props\n}: ConfirmationProps) => {\n  const contextValue = useMemo(() => ({ approval, state }), [approval, state]);\n  const [visible, setVisible] = useState(true);\n\n  const isAccepted =\n    approval?.approved === true &&\n    (state === \"approval-responded\" ||\n      state === \"output-available\" ||\n      state === \"output-denied\");\n\n  useEffect(() => {\n    if (isAccepted) {\n      const timer = setTimeout(() => setVisible(false), ACCEPTED_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isAccepted]);\n\n  if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n    return null;\n  }\n\n  // Pass through data-* and aria-* only; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <ConfirmationContext.Provider value={contextValue}>\n      <AnimatePresence>\n        {visible && (\n          <motion.div\n            {...passthroughProps}\n            className={cn(\n              \"flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-elevation-3\",\n              className\n            )}\n            exit={{ opacity: 0, scale: 0.96 }}\n            id={props.id}\n            style={props.style}\n            transition={{ duration: 0.5, ease: \"easeOut\" }}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ConfirmationContext.Provider>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationTitle\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationTitleProps = PropsWithChildren<ComponentProps<\"h3\">>;\n\nexport const ConfirmationTitle = ({\n  className,\n  children,\n  ...props\n}: ConfirmationTitleProps) => (\n  <h3\n    className={cn(\"font-semibold text-base text-foreground\", className)}\n    {...props}\n  >\n    {children}\n  </h3>\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationCode — monospace command/code block\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationCodeProps = ComponentProps<typeof CodeBlock>;\n\nexport const ConfirmationCode = ({\n  className,\n  children,\n  ...props\n}: ConfirmationCodeProps) => (\n  <CodeBlock className={cn(className)} {...props} language=\"bash\" code={children?.toString() ?? ''} />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationRequest / Accepted / Rejected — conditional renderers\n// ---------------------------------------------------------------------------\n\nexport const ConfirmationRequest = ({ children }: { children?: ReactNode }) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return <>{children}</>;\n};\n\nexport const ConfirmationAccepted = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    !approval?.approved ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\nexport const ConfirmationRejected = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    approval?.approved !== false ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationActions — deny left, allow buttons right\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({\n  className,\n  ...props\n}: ConfirmationActionsProps) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return (\n    <div\n      className={cn(\"flex items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationAction — individual button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionProps = ComponentProps<typeof Button>;\n\nexport const ConfirmationAction = ({\n  className,\n  size = \"sm\",\n  ...props\n}: ConfirmationActionProps) => (\n  <Button\n    className={cn(\"gap-1.5\", className)}\n    size={size}\n    type=\"button\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationShortcut — keyboard shortcut label inside a button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationShortcutProps = ComponentProps<typeof Kbd>;\n\nexport const ConfirmationShortcut = ({\n  className,\n  ...props\n}: ConfirmationShortcutProps) => (\n  <Kbd className={cn(\"ml-0.5\", className)} {...props} />\n);\n"],"names":["ConfirmationContext","createContext","useConfirmation","context","useContext","ACCEPTED_HIDE_DELAY","Confirmation","className","approval","state","children","props","contextValue","useMemo","visible","setVisible","useState","isAccepted","useEffect","timer","passthroughProps","k","jsx","AnimatePresence","motion","cn","ConfirmationTitle","ConfirmationCode","CodeBlock","ConfirmationRequest","ConfirmationAccepted","ConfirmationRejected","ConfirmationActions","ConfirmationAction","size","Button","ConfirmationShortcut","Kbd"],"mappings":"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"}

package/dist/components/ai/confirmation.js

@@ -33,7 +33,7 @@ const l = x(null), a = () => {
     {
       ...C,
       className: r(
-        "flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-sm",
+        "flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-elevation-3",
         e
       ),
       exit: { opacity: 0, scale: 0.96 },

package/dist/components/ai/confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation.js","sources":["../../../src/components/ai/confirmation.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"motion/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\n\nimport type { ToolUIPart } from \"ai\";\nimport type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { cn } from \"@/lib/utils\";\n\n\ntype ToolUIPartApproval =\n  | { id: string; approved?: never; reason?: never }\n  | { id: string; approved: boolean; reason?: string }\n  | { id: string; approved: true; reason?: string }\n  | { id: string; approved: false; reason?: string }\n  | undefined;\n\ninterface ConfirmationContextValue {\n  approval: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n}\n\nconst ConfirmationContext = createContext<ConfirmationContextValue | null>(null);\n\nconst useConfirmation = () => {\n  const context = useContext(ConfirmationContext);\n  if (!context) {\n    throw new Error(\"Confirmation components must be used within Confirmation\");\n  }\n  return context;\n};\n\n// ---------------------------------------------------------------------------\n// Confirmation (root)\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationProps = ComponentProps<\"div\"> & {\n  approval?: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n};\n\nconst ACCEPTED_HIDE_DELAY = 1500;\n\nexport const Confirmation = ({\n  className,\n  approval,\n  state,\n  children,\n  ...props\n}: ConfirmationProps) => {\n  const contextValue = useMemo(() => ({ approval, state }), [approval, state]);\n  const [visible, setVisible] = useState(true);\n\n  const isAccepted =\n    approval?.approved === true &&\n    (state === \"approval-responded\" ||\n      state === \"output-available\" ||\n      state === \"output-denied\");\n\n  useEffect(() => {\n    if (isAccepted) {\n      const timer = setTimeout(() => setVisible(false), ACCEPTED_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isAccepted]);\n\n  if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n    return null;\n  }\n\n  // Pass through data-* and aria-* only; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <ConfirmationContext.Provider value={contextValue}>\n      <AnimatePresence>\n        {visible && (\n          <motion.div\n            {...passthroughProps}\n            className={cn(\n              \"flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-sm\",\n              className\n            )}\n            exit={{ opacity: 0, scale: 0.96 }}\n            id={props.id}\n            style={props.style}\n            transition={{ duration: 0.5, ease: \"easeOut\" }}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ConfirmationContext.Provider>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationTitle\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationTitleProps = PropsWithChildren<ComponentProps<\"h3\">>;\n\nexport const ConfirmationTitle = ({\n  className,\n  children,\n  ...props\n}: ConfirmationTitleProps) => (\n  <h3\n    className={cn(\"font-semibold text-base text-foreground\", className)}\n    {...props}\n  >\n    {children}\n  </h3>\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationCode — monospace command/code block\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationCodeProps = ComponentProps<typeof CodeBlock>;\n\nexport const ConfirmationCode = ({\n  className,\n  children,\n  ...props\n}: ConfirmationCodeProps) => (\n  <CodeBlock className={cn(className)} {...props} language=\"bash\" code={children?.toString() ?? ''} />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationRequest / Accepted / Rejected — conditional renderers\n// ---------------------------------------------------------------------------\n\nexport const ConfirmationRequest = ({ children }: { children?: ReactNode }) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return <>{children}</>;\n};\n\nexport const ConfirmationAccepted = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    !approval?.approved ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\nexport const ConfirmationRejected = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    approval?.approved !== false ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationActions — deny left, allow buttons right\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({\n  className,\n  ...props\n}: ConfirmationActionsProps) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return (\n    <div\n      className={cn(\"flex items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationAction — individual button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionProps = ComponentProps<typeof Button>;\n\nexport const ConfirmationAction = ({\n  className,\n  size = \"sm\",\n  ...props\n}: ConfirmationActionProps) => (\n  <Button\n    className={cn(\"gap-1.5\", className)}\n    size={size}\n    type=\"button\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationShortcut — keyboard shortcut label inside a button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationShortcutProps = ComponentProps<typeof Kbd>;\n\nexport const ConfirmationShortcut = ({\n  className,\n  ...props\n}: ConfirmationShortcutProps) => (\n  <Kbd className={cn(\"ml-0.5\", className)} {...props} />\n);\n"],"names":["ConfirmationContext","createContext","useConfirmation","context","useContext","ACCEPTED_HIDE_DELAY","Confirmation","className","approval","state","children","props","contextValue","useMemo","visible","setVisible","useState","isAccepted","useEffect","timer","passthroughProps","k","jsx","AnimatePresence","motion","cn","ConfirmationTitle","ConfirmationCode","CodeBlock","ConfirmationRequest","ConfirmationAccepted","ConfirmationRejected","ConfirmationActions","ConfirmationAction","size","Button","ConfirmationShortcut","Kbd"],"mappings":"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"}
+{"version":3,"file":"confirmation.js","sources":["../../../src/components/ai/confirmation.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"motion/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\n\nimport type { ToolUIPart } from \"ai\";\nimport type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { cn } from \"@/lib/utils\";\n\n\ntype ToolUIPartApproval =\n  | { id: string; approved?: never; reason?: never }\n  | { id: string; approved: boolean; reason?: string }\n  | { id: string; approved: true; reason?: string }\n  | { id: string; approved: false; reason?: string }\n  | undefined;\n\ninterface ConfirmationContextValue {\n  approval: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n}\n\nconst ConfirmationContext = createContext<ConfirmationContextValue | null>(null);\n\nconst useConfirmation = () => {\n  const context = useContext(ConfirmationContext);\n  if (!context) {\n    throw new Error(\"Confirmation components must be used within Confirmation\");\n  }\n  return context;\n};\n\n// ---------------------------------------------------------------------------\n// Confirmation (root)\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationProps = ComponentProps<\"div\"> & {\n  approval?: ToolUIPartApproval;\n  state: ToolUIPart[\"state\"];\n};\n\nconst ACCEPTED_HIDE_DELAY = 1500;\n\nexport const Confirmation = ({\n  className,\n  approval,\n  state,\n  children,\n  ...props\n}: ConfirmationProps) => {\n  const contextValue = useMemo(() => ({ approval, state }), [approval, state]);\n  const [visible, setVisible] = useState(true);\n\n  const isAccepted =\n    approval?.approved === true &&\n    (state === \"approval-responded\" ||\n      state === \"output-available\" ||\n      state === \"output-denied\");\n\n  useEffect(() => {\n    if (isAccepted) {\n      const timer = setTimeout(() => setVisible(false), ACCEPTED_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isAccepted]);\n\n  if (!approval || state === \"input-streaming\" || state === \"input-available\") {\n    return null;\n  }\n\n  // Pass through data-* and aria-* only; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <ConfirmationContext.Provider value={contextValue}>\n      <AnimatePresence>\n        {visible && (\n          <motion.div\n            {...passthroughProps}\n            className={cn(\n              \"flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-elevation-3\",\n              className\n            )}\n            exit={{ opacity: 0, scale: 0.96 }}\n            id={props.id}\n            style={props.style}\n            transition={{ duration: 0.5, ease: \"easeOut\" }}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ConfirmationContext.Provider>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationTitle\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationTitleProps = PropsWithChildren<ComponentProps<\"h3\">>;\n\nexport const ConfirmationTitle = ({\n  className,\n  children,\n  ...props\n}: ConfirmationTitleProps) => (\n  <h3\n    className={cn(\"font-semibold text-base text-foreground\", className)}\n    {...props}\n  >\n    {children}\n  </h3>\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationCode — monospace command/code block\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationCodeProps = ComponentProps<typeof CodeBlock>;\n\nexport const ConfirmationCode = ({\n  className,\n  children,\n  ...props\n}: ConfirmationCodeProps) => (\n  <CodeBlock className={cn(className)} {...props} language=\"bash\" code={children?.toString() ?? ''} />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationRequest / Accepted / Rejected — conditional renderers\n// ---------------------------------------------------------------------------\n\nexport const ConfirmationRequest = ({ children }: { children?: ReactNode }) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return <>{children}</>;\n};\n\nexport const ConfirmationAccepted = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    !approval?.approved ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\nexport const ConfirmationRejected = ({ children }: { children?: ReactNode }) => {\n  const { approval, state } = useConfirmation();\n  if (\n    approval?.approved !== false ||\n    (state !== \"approval-responded\" &&\n      state !== \"output-denied\" &&\n      state !== \"output-available\")\n  ) {\n    return null;\n  }\n  return <>{children}</>;\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationActions — deny left, allow buttons right\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionsProps = ComponentProps<\"div\">;\n\nexport const ConfirmationActions = ({\n  className,\n  ...props\n}: ConfirmationActionsProps) => {\n  const { state } = useConfirmation();\n  if (state !== \"approval-requested\") return null;\n  return (\n    <div\n      className={cn(\"flex items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ConfirmationAction — individual button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationActionProps = ComponentProps<typeof Button>;\n\nexport const ConfirmationAction = ({\n  className,\n  size = \"sm\",\n  ...props\n}: ConfirmationActionProps) => (\n  <Button\n    className={cn(\"gap-1.5\", className)}\n    size={size}\n    type=\"button\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ConfirmationShortcut — keyboard shortcut label inside a button\n// ---------------------------------------------------------------------------\n\nexport type ConfirmationShortcutProps = ComponentProps<typeof Kbd>;\n\nexport const ConfirmationShortcut = ({\n  className,\n  ...props\n}: ConfirmationShortcutProps) => (\n  <Kbd className={cn(\"ml-0.5\", className)} {...props} />\n);\n"],"names":["ConfirmationContext","createContext","useConfirmation","context","useContext","ACCEPTED_HIDE_DELAY","Confirmation","className","approval","state","children","props","contextValue","useMemo","visible","setVisible","useState","isAccepted","useEffect","timer","passthroughProps","k","jsx","AnimatePresence","motion","cn","ConfirmationTitle","ConfirmationCode","CodeBlock","ConfirmationRequest","ConfirmationAccepted","ConfirmationRejected","ConfirmationActions","ConfirmationAction","size","Button","ConfirmationShortcut","Kbd"],"mappings":";;;;;;;AAyBA,MAAMA,IAAsBC,EAA+C,IAAI,GAEzEC,IAAkB,MAAM;AAC5B,QAAMC,IAAUC,EAAWJ,CAAmB;AAC9C,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,0DAA0D;AAE5E,SAAOA;AACT,GAWME,IAAsB,MAEfC,IAAe,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAyB;AACvB,QAAMC,IAAeC,EAAQ,OAAO,EAAE,UAAAL,GAAU,OAAAC,MAAU,CAACD,GAAUC,CAAK,CAAC,GACrE,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAI,GAErCC,IACJT,GAAU,aAAa,OACtBC,MAAU,wBACTA,MAAU,sBACVA,MAAU;AASd,MAPAS,EAAU,MAAM;AACd,QAAID,GAAY;AACd,YAAME,IAAQ,WAAW,MAAMJ,EAAW,EAAK,GAAGV,CAAmB;AACrE,aAAO,MAAM,aAAac,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAACF,CAAU,CAAC,GAEX,CAACT,KAAYC,MAAU,qBAAqBA,MAAU;AACxD,WAAO;AAKT,QAAMW,IAAmB,OAAO;AAAA,IAC9B,OAAO,QAAQT,CAAK,EAAE,OAAO,CAAC,CAACU,CAAC,MAAMA,EAAE,WAAW,OAAO,KAAKA,EAAE,WAAW,OAAO,CAAC;AAAA,EAAA;AAGtF,SACE,gBAAAC,EAACtB,EAAoB,UAApB,EAA6B,OAAOY,GACnC,UAAA,gBAAAU,EAACC,KACE,UAAAT,KACC,gBAAAQ;AAAA,IAACE,EAAO;AAAA,IAAP;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK;AAAA,QACT;AAAA,QACAlB;AAAA,MAAA;AAAA,MAEF,MAAM,EAAE,SAAS,GAAG,OAAO,KAAA;AAAA,MAC3B,IAAII,EAAM;AAAA,MACV,OAAOA,EAAM;AAAA,MACb,YAAY,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,MAElC,UAAAD;AAAA,IAAA;AAAA,EAAA,GAGP,EAAA,CACF;AAEJ,GAQagB,IAAoB,CAAC;AAAA,EAChC,WAAAnB;AAAA,EACA,UAAAG;AAAA,EACA,GAAGC;AACL,MACE,gBAAAW;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWG,EAAG,2CAA2ClB,CAAS;AAAA,IACjE,GAAGI;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH,GASWiB,IAAmB,CAAC;AAAA,EAC/B,WAAApB;AAAA,EACA,UAAAG;AAAA,EACA,GAAGC;AACL,MACE,gBAAAW,EAACM,GAAA,EAAU,WAAWH,EAAGlB,CAAS,GAAI,GAAGI,GAAO,UAAS,QAAO,MAAMD,GAAU,SAAA,KAAc,GAAA,CAAI,GAOvFmB,IAAsB,CAAC,EAAE,UAAAnB,QAAyC;AAC7E,QAAM,EAAE,OAAAD,EAAA,IAAUP,EAAA;AAClB,SAAIO,MAAU,uBAA6B,8BACjC,UAAAC,GAAS;AACrB,GAEaoB,IAAuB,CAAC,EAAE,UAAApB,QAAyC;AAC9E,QAAM,EAAE,UAAAF,GAAU,OAAAC,EAAA,IAAUP,EAAA;AAC5B,SACE,CAACM,GAAU,YACVC,MAAU,wBACTA,MAAU,mBACVA,MAAU,qBAEL,8BAEC,UAAAC,GAAS;AACrB,GAEaqB,IAAuB,CAAC,EAAE,UAAArB,QAAyC;AAC9E,QAAM,EAAE,UAAAF,GAAU,OAAAC,EAAA,IAAUP,EAAA;AAC5B,SACEM,GAAU,aAAa,MACtBC,MAAU,wBACTA,MAAU,mBACVA,MAAU,qBAEL,8BAEC,UAAAC,GAAS;AACrB,GAQasB,IAAsB,CAAC;AAAA,EAClC,WAAAzB;AAAA,EACA,GAAGI;AACL,MAAgC;AAC9B,QAAM,EAAE,OAAAF,EAAA,IAAUP,EAAA;AAClB,SAAIO,MAAU,uBAA6B,OAEzC,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG,EAAG,2CAA2ClB,CAAS;AAAA,MACjE,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,GAQasB,IAAqB,CAAC;AAAA,EACjC,WAAA1B;AAAA,EACA,MAAA2B,IAAO;AAAA,EACP,GAAGvB;AACL,MACE,gBAAAW;AAAA,EAACa;AAAA,EAAA;AAAA,IACC,WAAWV,EAAG,WAAWlB,CAAS;AAAA,IAClC,MAAA2B;AAAA,IACA,MAAK;AAAA,IACJ,GAAGvB;AAAA,EAAA;AACN,GASWyB,IAAuB,CAAC;AAAA,EACnC,WAAA7B;AAAA,EACA,GAAGI;AACL,MACE,gBAAAW,EAACe,KAAI,WAAWZ,EAAG,UAAUlB,CAAS,GAAI,GAAGI,EAAA,CAAO;"}

package/dist/components/ai/context.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("react"),b=require("../ui/button.cjs"),p=require("../ui/hover-card.cjs"),k=require("../ui/progress.cjs"),i=require("../../lib/utils.cjs"),S=100,g=10,h=24,l=12,j=2,U=.75,I=.9,T=e=>e>=I?"danger":e>=U?"warning":"normal",C={normal:"text-muted-foreground",warning:"text-amber-500",danger:"text-destructive"},O={normal:"",warning:"[&_[data-slot=progress-indicator]]:bg-amber-500",danger:"[&_[data-slot=progress-indicator]]:bg-destructive"},N=new Intl.NumberFormat("en-US",{currency:"USD",style:"currency"}),x=e=>e===void 0?void 0:N.format(e),y=f.createContext(null),u=()=>{const e=f.useContext(y);if(!e)throw new Error("Context components must be used within Context");return e},R=({usedTokens:e,maxTokens:n,usage:s,cost:o,...c})=>{const r=f.useMemo(()=>({cost:o,maxTokens:n,usage:s,usedTokens:e}),[o,n,s,e]);return t.jsx(y.Provider,{value:r,children:t.jsx(p.HoverCard,{closeDelay:0,openDelay:0,...c})})},D=()=>{const{usedTokens:e,maxTokens:n}=u(),s=2*Math.PI*g,o=e/n,c=s*(1-o);return t.jsxs("svg",{"aria-label":"Model context usage",height:"20",role:"img",style:{color:"currentcolor"},viewBox:`0 0 ${h} ${h}`,width:"20",children:[t.jsx("circle",{cx:l,cy:l,fill:"none",opacity:"0.25",r:g,stroke:"currentColor",strokeWidth:j}),t.jsx("circle",{cx:l,cy:l,fill:"none",opacity:"0.7",r:g,stroke:"currentColor",strokeDasharray:`${s} ${s}`,strokeDashoffset:c,strokeLinecap:"round",strokeWidth:j,style:{transform:"rotate(-90deg)",transformOrigin:"center"}})]})},F=({children:e,showPercentage:n=!1,...s})=>{const{usedTokens:o,maxTokens:c}=u(),r=o/c,a=T(r),m=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"}).format(r);return t.jsx(p.HoverCardTrigger,{asChild:!0,children:e??t.jsxs(b.Button,{type:"button",variant:"ghost",...s,children:[n?t.jsx("span",{className:i.cn("font-medium",C[a]),children:m}):null,t.jsx("span",{className:C[a],children:t.jsx(D,{})})]})})},_=({className:e,...n})=>t.jsx(p.HoverCardContent,{className:i.cn("min-w-60 divide-y overflow-hidden p-0",e),...n}),E=({children:e,className:n,...s})=>{const{usedTokens:o,maxTokens:c}=u(),r=o/c,a=T(r),m=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"}).format(r),v=new Intl.NumberFormat("en-US",{notation:"compact"}).format(o),w=new Intl.NumberFormat("en-US",{notation:"compact"}).format(c);return t.jsx("div",{className:i.cn("w-full space-y-2 p-3",n),...s,children:e??t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"flex items-center justify-between gap-3 text-xs",children:[t.jsx("p",{className:i.cn(C[a]),children:m}),t.jsxs("p",{className:"font-mono text-muted-foreground",children:[v," / ",w]})]}),t.jsx("div",{className:"space-y-2",children:t.jsx(k.Progress,{className:i.cn("bg-muted",O[a]),value:r*S})})]})})},P=({children:e,className:n,...s})=>t.jsx("div",{className:i.cn("w-full p-3",n),...s,children:e}),H=({children:e,className:n,...s})=>{const{cost:o}=u(),c=o?.total===void 0?"—":N.format(o.total);return t.jsx("div",{className:i.cn("flex w-full items-center justify-between gap-3 bg-muted/50 p-3 text-xs",n),...s,children:e??t.jsxs(t.Fragment,{children:[t.jsx("span",{className:"text-muted-foreground",children:"Total cost"}),t.jsx("span",{children:c})]})})},d=({tokens:e,costText:n})=>t.jsxs("span",{children:[e===void 0?"—":new Intl.NumberFormat("en-US",{notation:"compact"}).format(e),n?t.jsxs("span",{className:"ml-2 text-muted-foreground",children:["• ",n]}):null]}),A=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.inputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.input);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Input"}),t.jsx(d,{costText:a,tokens:r})]})},q=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.outputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.output);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Output"}),t.jsx(d,{costText:a,tokens:r})]})},M=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.reasoningTokens??0;if(n)return n;if(!r)return null;const a=x(c?.reasoning);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Reasoning"}),t.jsx(d,{costText:a,tokens:r})]})},W=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.cachedInputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.cache);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Cache"}),t.jsx(d,{costText:a,tokens:r})]})};exports.Context=R;exports.ContextCacheUsage=W;exports.ContextContent=_;exports.ContextContentBody=P;exports.ContextContentFooter=H;exports.ContextContentHeader=E;exports.ContextInputUsage=A;exports.ContextOutputUsage=q;exports.ContextReasoningUsage=M;exports.ContextTrigger=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("react"),b=require("../ui/button.cjs"),p=require("../ui/hover-card.cjs"),k=require("../ui/progress.cjs"),i=require("../../lib/utils.cjs"),S=100,g=10,h=24,l=12,j=2,U=.75,I=.9,T=e=>e>=I?"danger":e>=U?"warning":"normal",C={normal:"text-muted-foreground",warning:"text-warning",danger:"text-destructive"},O={normal:"",warning:"[&_[data-slot=progress-indicator]]:bg-warning",danger:"[&_[data-slot=progress-indicator]]:bg-destructive"},N=new Intl.NumberFormat("en-US",{currency:"USD",style:"currency"}),x=e=>e===void 0?void 0:N.format(e),w=f.createContext(null),u=()=>{const e=f.useContext(w);if(!e)throw new Error("Context components must be used within Context");return e},R=({usedTokens:e,maxTokens:n,usage:s,cost:o,...c})=>{const r=f.useMemo(()=>({cost:o,maxTokens:n,usage:s,usedTokens:e}),[o,n,s,e]);return t.jsx(w.Provider,{value:r,children:t.jsx(p.HoverCard,{closeDelay:0,openDelay:0,...c})})},D=()=>{const{usedTokens:e,maxTokens:n}=u(),s=2*Math.PI*g,o=e/n,c=s*(1-o);return t.jsxs("svg",{"aria-label":"Model context usage",height:"20",role:"img",style:{color:"currentcolor"},viewBox:`0 0 ${h} ${h}`,width:"20",children:[t.jsx("circle",{cx:l,cy:l,fill:"none",opacity:"0.25",r:g,stroke:"currentColor",strokeWidth:j}),t.jsx("circle",{cx:l,cy:l,fill:"none",opacity:"0.7",r:g,stroke:"currentColor",strokeDasharray:`${s} ${s}`,strokeDashoffset:c,strokeLinecap:"round",strokeWidth:j,style:{transform:"rotate(-90deg)",transformOrigin:"center"}})]})},F=({children:e,showPercentage:n=!1,...s})=>{const{usedTokens:o,maxTokens:c}=u(),r=o/c,a=T(r),m=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"}).format(r);return t.jsx(p.HoverCardTrigger,{asChild:!0,children:e??t.jsxs(b.Button,{type:"button",variant:"ghost",...s,children:[n?t.jsx("span",{className:i.cn("font-medium",C[a]),children:m}):null,t.jsx("span",{className:C[a],children:t.jsx(D,{})})]})})},_=({className:e,...n})=>t.jsx(p.HoverCardContent,{className:i.cn("min-w-60 divide-y overflow-hidden p-0",e),...n}),E=({children:e,className:n,...s})=>{const{usedTokens:o,maxTokens:c}=u(),r=o/c,a=T(r),m=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"}).format(r),y=new Intl.NumberFormat("en-US",{notation:"compact"}).format(o),v=new Intl.NumberFormat("en-US",{notation:"compact"}).format(c);return t.jsx("div",{className:i.cn("w-full space-y-2 p-3",n),...s,children:e??t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"flex items-center justify-between gap-3 text-xs",children:[t.jsx("p",{className:i.cn(C[a]),children:m}),t.jsxs("p",{className:"font-mono text-muted-foreground",children:[y," / ",v]})]}),t.jsx("div",{className:"space-y-2",children:t.jsx(k.Progress,{"aria-label":"Context window usage",className:i.cn("bg-muted",O[a]),value:r*S})})]})})},P=({children:e,className:n,...s})=>t.jsx("div",{className:i.cn("w-full p-3",n),...s,children:e}),H=({children:e,className:n,...s})=>{const{cost:o}=u(),c=o?.total===void 0?"—":N.format(o.total);return t.jsx("div",{className:i.cn("flex w-full items-center justify-between gap-3 bg-muted/50 p-3 text-xs",n),...s,children:e??t.jsxs(t.Fragment,{children:[t.jsx("span",{className:"text-muted-foreground",children:"Total cost"}),t.jsx("span",{children:c})]})})},d=({tokens:e,costText:n})=>t.jsxs("span",{children:[e===void 0?"—":new Intl.NumberFormat("en-US",{notation:"compact"}).format(e),n?t.jsxs("span",{className:"ml-2 text-muted-foreground",children:["• ",n]}):null]}),A=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.inputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.input);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Input"}),t.jsx(d,{costText:a,tokens:r})]})},q=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.outputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.output);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Output"}),t.jsx(d,{costText:a,tokens:r})]})},M=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.reasoningTokens??0;if(n)return n;if(!r)return null;const a=x(c?.reasoning);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Reasoning"}),t.jsx(d,{costText:a,tokens:r})]})},W=({className:e,children:n,...s})=>{const{usage:o,cost:c}=u(),r=o?.cachedInputTokens??0;if(n)return n;if(!r)return null;const a=x(c?.cache);return t.jsxs("div",{className:i.cn("flex items-center justify-between text-xs",e),...s,children:[t.jsx("span",{className:"text-muted-foreground",children:"Cache"}),t.jsx(d,{costText:a,tokens:r})]})};exports.Context=R;exports.ContextCacheUsage=W;exports.ContextContent=_;exports.ContextContentBody=P;exports.ContextContentFooter=H;exports.ContextContentHeader=E;exports.ContextInputUsage=A;exports.ContextOutputUsage=q;exports.ContextReasoningUsage=M;exports.ContextTrigger=F;
 //# sourceMappingURL=context.cjs.map

package/dist/components/ai/context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","sources":["../../../src/components/ai/context.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nimport type { LanguageModelUsage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { cn } from \"@/lib/utils\";\n\n\nconst PERCENT_MAX = 100;\nconst ICON_RADIUS = 10;\nconst ICON_VIEWBOX = 24;\nconst ICON_CENTER = 12;\nconst ICON_STROKE_WIDTH = 2;\nconst WARN_THRESHOLD = 0.75;\nconst DANGER_THRESHOLD = 0.9;\n\ntype UsageStatus = \"normal\" | \"warning\" | \"danger\";\n\nconst getUsageStatus = (pct: number): UsageStatus => {\n  if (pct >= DANGER_THRESHOLD) return \"danger\";\n  if (pct >= WARN_THRESHOLD) return \"warning\";\n  return \"normal\";\n};\n\nconst STATUS_TEXT: Record<UsageStatus, string> = {\n  normal: \"text-muted-foreground\",\n  warning: \"text-amber-500\",\n  danger: \"text-destructive\",\n};\n\nconst STATUS_PROGRESS: Record<UsageStatus, string> = {\n  normal: \"\",\n  warning: \"[&_[data-slot=progress-indicator]]:bg-amber-500\",\n  danger: \"[&_[data-slot=progress-indicator]]:bg-destructive\",\n};\n\nconst USD_FORMAT = new Intl.NumberFormat(\"en-US\", {\n  currency: \"USD\",\n  style: \"currency\",\n});\n\nconst formatUSD = (value: number | undefined): string | undefined =>\n  value === undefined ? undefined : USD_FORMAT.format(value);\n\nexport interface CostBreakdown {\n  total?: number;\n  input?: number;\n  output?: number;\n  reasoning?: number;\n  cache?: number;\n}\n\ninterface ContextSchema {\n  usedTokens: number;\n  maxTokens: number;\n  usage?: LanguageModelUsage;\n  cost?: CostBreakdown;\n}\n\nconst ContextContext = createContext<ContextSchema | null>(null);\n\nconst useContextValue = () => {\n  const context = useContext(ContextContext);\n\n  if (!context) {\n    throw new Error(\"Context components must be used within Context\");\n  }\n\n  return context;\n};\n\nexport type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;\n\nexport const Context = ({\n  usedTokens,\n  maxTokens,\n  usage,\n  cost,\n  ...props\n}: ContextProps) => {\n  const contextValue = useMemo(\n    () => ({ cost, maxTokens, usage, usedTokens }),\n    [cost, maxTokens, usage, usedTokens]\n  );\n\n  return (\n    <ContextContext.Provider value={contextValue}>\n      <HoverCard closeDelay={0} openDelay={0} {...props} />\n    </ContextContext.Provider>\n  );\n};\n\nconst ContextIcon = () => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const circumference = 2 * Math.PI * ICON_RADIUS;\n  const usedPercent = usedTokens / maxTokens;\n  const dashOffset = circumference * (1 - usedPercent);\n\n  return (\n    <svg\n      aria-label=\"Model context usage\"\n      height=\"20\"\n      role=\"img\"\n      style={{ color: \"currentcolor\" }}\n      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}\n      width=\"20\"\n    >\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.25\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeWidth={ICON_STROKE_WIDTH}\n      />\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.7\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeDasharray={`${circumference} ${circumference}`}\n        strokeDashoffset={dashOffset}\n        strokeLinecap=\"round\"\n        strokeWidth={ICON_STROKE_WIDTH}\n        style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n      />\n    </svg>\n  );\n};\n\nexport type ContextTriggerProps = ComponentProps<typeof Button> & {\n  showPercentage?: boolean;\n};\n\nexport const ContextTrigger = ({\n  children,\n  showPercentage = false,\n  ...props\n}: ContextTriggerProps) => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const usedPercent = usedTokens / maxTokens;\n  const status = getUsageStatus(usedPercent);\n  const renderedPercent = new Intl.NumberFormat(\"en-US\", {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  }).format(usedPercent);\n\n  return (\n    <HoverCardTrigger asChild>\n      {children ?? (\n        <Button type=\"button\" variant=\"ghost\" {...props}>\n          {showPercentage ? (\n            <span className={cn(\"font-medium\", STATUS_TEXT[status])}>\n              {renderedPercent}\n            </span>\n          ) : null}\n          <span className={STATUS_TEXT[status]}>\n            <ContextIcon />\n          </span>\n        </Button>\n      )}\n    </HoverCardTrigger>\n  );\n};\n\nexport type ContextContentProps = ComponentProps<typeof HoverCardContent>;\n\nexport const ContextContent = ({\n  className,\n  ...props\n}: ContextContentProps) => (\n  <HoverCardContent\n    className={cn(\"min-w-60 divide-y overflow-hidden p-0\", className)}\n    {...props}\n  />\n);\n\nexport type ContextContentHeaderProps = ComponentProps<\"div\">;\n\nexport const ContextContentHeader = ({\n  children,\n  className,\n  ...props\n}: ContextContentHeaderProps) => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const usedPercent = usedTokens / maxTokens;\n  const status = getUsageStatus(usedPercent);\n  const displayPct = new Intl.NumberFormat(\"en-US\", {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  }).format(usedPercent);\n  const used = new Intl.NumberFormat(\"en-US\", {\n    notation: \"compact\",\n  }).format(usedTokens);\n  const total = new Intl.NumberFormat(\"en-US\", {\n    notation: \"compact\",\n  }).format(maxTokens);\n\n  return (\n    <div className={cn(\"w-full space-y-2 p-3\", className)} {...props}>\n      {children ?? (\n        <>\n          <div className=\"flex items-center justify-between gap-3 text-xs\">\n            <p className={cn(STATUS_TEXT[status])}>{displayPct}</p>\n            <p className=\"font-mono text-muted-foreground\">\n              {used} / {total}\n            </p>\n          </div>\n          <div className=\"space-y-2\">\n            <Progress\n              className={cn(\"bg-muted\", STATUS_PROGRESS[status])}\n              value={usedPercent * PERCENT_MAX}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type ContextContentBodyProps = ComponentProps<\"div\">;\n\nexport const ContextContentBody = ({\n  children,\n  className,\n  ...props\n}: ContextContentBodyProps) => (\n  <div className={cn(\"w-full p-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type ContextContentFooterProps = ComponentProps<\"div\">;\n\nexport const ContextContentFooter = ({\n  children,\n  className,\n  ...props\n}: ContextContentFooterProps) => {\n  const { cost } = useContextValue();\n  const totalCost = cost?.total === undefined ? \"—\" : USD_FORMAT.format(cost.total);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-between gap-3 bg-muted/50 p-3 text-xs\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <span className=\"text-muted-foreground\">Total cost</span>\n          <span>{totalCost}</span>\n        </>\n      )}\n    </div>\n  );\n};\n\nconst TokensWithCost = ({\n  tokens,\n  costText,\n}: {\n  tokens?: number;\n  costText?: string;\n}) => (\n  <span>\n    {tokens === undefined\n      ? \"—\"\n      : new Intl.NumberFormat(\"en-US\", {\n          notation: \"compact\",\n        }).format(tokens)}\n    {costText ? (\n      <span className=\"ml-2 text-muted-foreground\">• {costText}</span>\n    ) : null}\n  </span>\n);\n\nexport type ContextInputUsageProps = ComponentProps<\"div\">;\n\nexport const ContextInputUsage = ({\n  className,\n  children,\n  ...props\n}: ContextInputUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const inputTokens = usage?.inputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!inputTokens) {\n    return null;\n  }\n\n  const inputCostText = formatUSD(cost?.input);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Input</span>\n      <TokensWithCost costText={inputCostText} tokens={inputTokens} />\n    </div>\n  );\n};\n\nexport type ContextOutputUsageProps = ComponentProps<\"div\">;\n\nexport const ContextOutputUsage = ({\n  className,\n  children,\n  ...props\n}: ContextOutputUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const outputTokens = usage?.outputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!outputTokens) {\n    return null;\n  }\n\n  const outputCostText = formatUSD(cost?.output);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Output</span>\n      <TokensWithCost costText={outputCostText} tokens={outputTokens} />\n    </div>\n  );\n};\n\nexport type ContextReasoningUsageProps = ComponentProps<\"div\">;\n\nexport const ContextReasoningUsage = ({\n  className,\n  children,\n  ...props\n}: ContextReasoningUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const reasoningTokens = usage?.reasoningTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!reasoningTokens) {\n    return null;\n  }\n\n  const reasoningCostText = formatUSD(cost?.reasoning);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Reasoning</span>\n      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />\n    </div>\n  );\n};\n\nexport type ContextCacheUsageProps = ComponentProps<\"div\">;\n\nexport const ContextCacheUsage = ({\n  className,\n  children,\n  ...props\n}: ContextCacheUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const cacheTokens = usage?.cachedInputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!cacheTokens) {\n    return null;\n  }\n\n  const cacheCostText = formatUSD(cost?.cache);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Cache</span>\n      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />\n    </div>\n  );\n};\n"],"names":["PERCENT_MAX","ICON_RADIUS","ICON_VIEWBOX","ICON_CENTER","ICON_STROKE_WIDTH","WARN_THRESHOLD","DANGER_THRESHOLD","getUsageStatus","pct","STATUS_TEXT","STATUS_PROGRESS","USD_FORMAT","formatUSD","value","ContextContext","createContext","useContextValue","context","useContext","Context","usedTokens","maxTokens","usage","cost","props","contextValue","useMemo","jsx","HoverCard","ContextIcon","circumference","usedPercent","dashOffset","jsxs","ContextTrigger","children","showPercentage","status","renderedPercent","HoverCardTrigger","Button","cn","ContextContent","className","HoverCardContent","ContextContentHeader","displayPct","used","total","Fragment","Progress","ContextContentBody","ContextContentFooter","totalCost","TokensWithCost","tokens","costText","ContextInputUsage","inputTokens","inputCostText","ContextOutputUsage","outputTokens","outputCostText","ContextReasoningUsage","reasoningTokens","reasoningCostText","ContextCacheUsage","cacheTokens","cacheCostText"],"mappings":"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"}
+{"version":3,"file":"context.cjs","sources":["../../../src/components/ai/context.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nimport type { LanguageModelUsage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { cn } from \"@/lib/utils\";\n\n\nconst PERCENT_MAX = 100;\nconst ICON_RADIUS = 10;\nconst ICON_VIEWBOX = 24;\nconst ICON_CENTER = 12;\nconst ICON_STROKE_WIDTH = 2;\nconst WARN_THRESHOLD = 0.75;\nconst DANGER_THRESHOLD = 0.9;\n\ntype UsageStatus = \"normal\" | \"warning\" | \"danger\";\n\nconst getUsageStatus = (pct: number): UsageStatus => {\n  if (pct >= DANGER_THRESHOLD) return \"danger\";\n  if (pct >= WARN_THRESHOLD) return \"warning\";\n  return \"normal\";\n};\n\nconst STATUS_TEXT: Record<UsageStatus, string> = {\n  normal: \"text-muted-foreground\",\n  warning: \"text-warning\",\n  danger: \"text-destructive\",\n};\n\nconst STATUS_PROGRESS: Record<UsageStatus, string> = {\n  normal: \"\",\n  warning: \"[&_[data-slot=progress-indicator]]:bg-warning\",\n  danger: \"[&_[data-slot=progress-indicator]]:bg-destructive\",\n};\n\nconst USD_FORMAT = new Intl.NumberFormat(\"en-US\", {\n  currency: \"USD\",\n  style: \"currency\",\n});\n\nconst formatUSD = (value: number | undefined): string | undefined =>\n  value === undefined ? undefined : USD_FORMAT.format(value);\n\nexport interface CostBreakdown {\n  total?: number;\n  input?: number;\n  output?: number;\n  reasoning?: number;\n  cache?: number;\n}\n\ninterface ContextSchema {\n  usedTokens: number;\n  maxTokens: number;\n  usage?: LanguageModelUsage;\n  cost?: CostBreakdown;\n}\n\nconst ContextContext = createContext<ContextSchema | null>(null);\n\nconst useContextValue = () => {\n  const context = useContext(ContextContext);\n\n  if (!context) {\n    throw new Error(\"Context components must be used within Context\");\n  }\n\n  return context;\n};\n\nexport type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;\n\nexport const Context = ({\n  usedTokens,\n  maxTokens,\n  usage,\n  cost,\n  ...props\n}: ContextProps) => {\n  const contextValue = useMemo(\n    () => ({ cost, maxTokens, usage, usedTokens }),\n    [cost, maxTokens, usage, usedTokens]\n  );\n\n  return (\n    <ContextContext.Provider value={contextValue}>\n      <HoverCard closeDelay={0} openDelay={0} {...props} />\n    </ContextContext.Provider>\n  );\n};\n\nconst ContextIcon = () => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const circumference = 2 * Math.PI * ICON_RADIUS;\n  const usedPercent = usedTokens / maxTokens;\n  const dashOffset = circumference * (1 - usedPercent);\n\n  return (\n    <svg\n      aria-label=\"Model context usage\"\n      height=\"20\"\n      role=\"img\"\n      style={{ color: \"currentcolor\" }}\n      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}\n      width=\"20\"\n    >\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.25\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeWidth={ICON_STROKE_WIDTH}\n      />\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.7\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeDasharray={`${circumference} ${circumference}`}\n        strokeDashoffset={dashOffset}\n        strokeLinecap=\"round\"\n        strokeWidth={ICON_STROKE_WIDTH}\n        style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n      />\n    </svg>\n  );\n};\n\nexport type ContextTriggerProps = ComponentProps<typeof Button> & {\n  showPercentage?: boolean;\n};\n\nexport const ContextTrigger = ({\n  children,\n  showPercentage = false,\n  ...props\n}: ContextTriggerProps) => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const usedPercent = usedTokens / maxTokens;\n  const status = getUsageStatus(usedPercent);\n  const renderedPercent = new Intl.NumberFormat(\"en-US\", {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  }).format(usedPercent);\n\n  return (\n    <HoverCardTrigger asChild>\n      {children ?? (\n        <Button type=\"button\" variant=\"ghost\" {...props}>\n          {showPercentage ? (\n            <span className={cn(\"font-medium\", STATUS_TEXT[status])}>\n              {renderedPercent}\n            </span>\n          ) : null}\n          <span className={STATUS_TEXT[status]}>\n            <ContextIcon />\n          </span>\n        </Button>\n      )}\n    </HoverCardTrigger>\n  );\n};\n\nexport type ContextContentProps = ComponentProps<typeof HoverCardContent>;\n\nexport const ContextContent = ({\n  className,\n  ...props\n}: ContextContentProps) => (\n  <HoverCardContent\n    className={cn(\"min-w-60 divide-y overflow-hidden p-0\", className)}\n    {...props}\n  />\n);\n\nexport type ContextContentHeaderProps = ComponentProps<\"div\">;\n\nexport const ContextContentHeader = ({\n  children,\n  className,\n  ...props\n}: ContextContentHeaderProps) => {\n  const { usedTokens, maxTokens } = useContextValue();\n  const usedPercent = usedTokens / maxTokens;\n  const status = getUsageStatus(usedPercent);\n  const displayPct = new Intl.NumberFormat(\"en-US\", {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  }).format(usedPercent);\n  const used = new Intl.NumberFormat(\"en-US\", {\n    notation: \"compact\",\n  }).format(usedTokens);\n  const total = new Intl.NumberFormat(\"en-US\", {\n    notation: \"compact\",\n  }).format(maxTokens);\n\n  return (\n    <div className={cn(\"w-full space-y-2 p-3\", className)} {...props}>\n      {children ?? (\n        <>\n          <div className=\"flex items-center justify-between gap-3 text-xs\">\n            <p className={cn(STATUS_TEXT[status])}>{displayPct}</p>\n            <p className=\"font-mono text-muted-foreground\">\n              {used} / {total}\n            </p>\n          </div>\n          <div className=\"space-y-2\">\n            <Progress\n              aria-label=\"Context window usage\"\n              className={cn(\"bg-muted\", STATUS_PROGRESS[status])}\n              value={usedPercent * PERCENT_MAX}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type ContextContentBodyProps = ComponentProps<\"div\">;\n\nexport const ContextContentBody = ({\n  children,\n  className,\n  ...props\n}: ContextContentBodyProps) => (\n  <div className={cn(\"w-full p-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type ContextContentFooterProps = ComponentProps<\"div\">;\n\nexport const ContextContentFooter = ({\n  children,\n  className,\n  ...props\n}: ContextContentFooterProps) => {\n  const { cost } = useContextValue();\n  const totalCost = cost?.total === undefined ? \"—\" : USD_FORMAT.format(cost.total);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-between gap-3 bg-muted/50 p-3 text-xs\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <span className=\"text-muted-foreground\">Total cost</span>\n          <span>{totalCost}</span>\n        </>\n      )}\n    </div>\n  );\n};\n\nconst TokensWithCost = ({\n  tokens,\n  costText,\n}: {\n  tokens?: number;\n  costText?: string;\n}) => (\n  <span>\n    {tokens === undefined\n      ? \"—\"\n      : new Intl.NumberFormat(\"en-US\", {\n          notation: \"compact\",\n        }).format(tokens)}\n    {costText ? (\n      <span className=\"ml-2 text-muted-foreground\">• {costText}</span>\n    ) : null}\n  </span>\n);\n\nexport type ContextInputUsageProps = ComponentProps<\"div\">;\n\nexport const ContextInputUsage = ({\n  className,\n  children,\n  ...props\n}: ContextInputUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const inputTokens = usage?.inputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!inputTokens) {\n    return null;\n  }\n\n  const inputCostText = formatUSD(cost?.input);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Input</span>\n      <TokensWithCost costText={inputCostText} tokens={inputTokens} />\n    </div>\n  );\n};\n\nexport type ContextOutputUsageProps = ComponentProps<\"div\">;\n\nexport const ContextOutputUsage = ({\n  className,\n  children,\n  ...props\n}: ContextOutputUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const outputTokens = usage?.outputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!outputTokens) {\n    return null;\n  }\n\n  const outputCostText = formatUSD(cost?.output);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Output</span>\n      <TokensWithCost costText={outputCostText} tokens={outputTokens} />\n    </div>\n  );\n};\n\nexport type ContextReasoningUsageProps = ComponentProps<\"div\">;\n\nexport const ContextReasoningUsage = ({\n  className,\n  children,\n  ...props\n}: ContextReasoningUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const reasoningTokens = usage?.reasoningTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!reasoningTokens) {\n    return null;\n  }\n\n  const reasoningCostText = formatUSD(cost?.reasoning);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Reasoning</span>\n      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />\n    </div>\n  );\n};\n\nexport type ContextCacheUsageProps = ComponentProps<\"div\">;\n\nexport const ContextCacheUsage = ({\n  className,\n  children,\n  ...props\n}: ContextCacheUsageProps) => {\n  const { usage, cost } = useContextValue();\n  const cacheTokens = usage?.cachedInputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!cacheTokens) {\n    return null;\n  }\n\n  const cacheCostText = formatUSD(cost?.cache);\n\n  return (\n    <div\n      className={cn(\"flex items-center justify-between text-xs\", className)}\n      {...props}\n    >\n      <span className=\"text-muted-foreground\">Cache</span>\n      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />\n    </div>\n  );\n};\n"],"names":["PERCENT_MAX","ICON_RADIUS","ICON_VIEWBOX","ICON_CENTER","ICON_STROKE_WIDTH","WARN_THRESHOLD","DANGER_THRESHOLD","getUsageStatus","pct","STATUS_TEXT","STATUS_PROGRESS","USD_FORMAT","formatUSD","value","ContextContext","createContext","useContextValue","context","useContext","Context","usedTokens","maxTokens","usage","cost","props","contextValue","useMemo","jsx","HoverCard","ContextIcon","circumference","usedPercent","dashOffset","jsxs","ContextTrigger","children","showPercentage","status","renderedPercent","HoverCardTrigger","Button","cn","ContextContent","className","HoverCardContent","ContextContentHeader","displayPct","used","total","Fragment","Progress","ContextContentBody","ContextContentFooter","totalCost","TokensWithCost","tokens","costText","ContextInputUsage","inputTokens","inputCostText","ContextOutputUsage","outputTokens","outputCostText","ContextReasoningUsage","reasoningTokens","reasoningCostText","ContextCacheUsage","cacheTokens","cacheCostText"],"mappings":"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"}