admin-ui-starter-kit 0.5.0 → 0.6.2

package/dist/showcase/assets/ai-elements-BWraZPyC.js

@@ -0,0 +1,387 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-Dd6X6IKg.js";import{a as s,c,d as l,i as u,l as d,n as f,o as p,r as m,s as h,t as g,u as _}from"./ai-artifact-BaYtjrP5.js";import{t as v}from"./bot-DxRjlJlO.js";import{r as y,t as b}from"./example-Rrx9vj75.js";import{t as ee}from"./chevron-down-CBa5t2E0.js";import{t as te}from"./code-xml-q7JPxij0.js";import{t as ne}from"./cpu-CzkgJ-zb.js";import{t as x}from"./external-link-BkCjE03j.js";import{t as S}from"./file-text-Clv0qFr3.js";import{t as re}from"./file-BBUnjRPN.js";import{t as C}from"./folder-open-CuUaUrxa.js";import{t as ie}from"./globe-Byoz7QmA.js";import{t as ae}from"./package-BaQGBJmO.js";import{t as oe}from"./wrench-PjtfaRuJ.js";import{M as se,N as w,c as ce,d as le,l as ue,n as T}from"./index-o71HAmc3.js";import{t as E}from"./props-table-C6gPyO49.js";var D=ue(`folder`,[[`path`,{d:`M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z`,key:`1kt360`}]]),de={sourcePrefix:`Source`,openAria:`Open source {{n}}: {{title}}`},O=le();function k(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function A({index:e,title:t,url:n,onSelect:r,className:i,strings:o}){let s=se(de,o),c=k(s.openAria,{n:e,title:t??``}),l=t?`${s.sourcePrefix} ${e}: ${t}`:`${s.sourcePrefix} ${e}`,u=T(`inline-flex h-5 min-w-5 -translate-y-px items-center justify-center rounded px-1`,`align-middle text-xxs font-medium tabular-nums`,`bg-muted text-muted-foreground`,`hover:bg-primary/10 hover:text-primary`,`transition-colors duration-150`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,i);return n?(0,O.jsx)(`a`,{href:n,target:`_blank`,rel:`noopener noreferrer`,title:l,"aria-label":c,className:T(`ai-inline-citation--component`,u),children:(0,O.jsx)(a,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})}):r?(0,O.jsx)(y,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:r,title:l,"aria-label":c,className:T(`ai-inline-citation--component`,u),children:(0,O.jsx)(a,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})}):(0,O.jsx)(`span`,{title:l,"aria-label":c,className:T(`ai-inline-citation--component`,u),children:(0,O.jsx)(a,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})})}A.displayName=`AiInlineCitation`;var j={versionLabel:`Version`,licenseLabel:`License`,publishedLabel:`Published`,homepageAria:`Open homepage`,repositoryAria:`Open repository`,weeklyDownloadsLabel:`Weekly downloads`};function M({name:e,version:t,description:n,license:r,publishedAt:o,homepage:s,repository:c,weeklyDownloads:l,keywords:u,onSelect:d,className:f,strings:p}){let m=w(j,p);return(0,O.jsxs)(d?`button`:`div`,{...d?{type:`button`,onClick:d}:{},className:T(`ai-package-info--component`,`block w-full rounded-lg border border-border/60 bg-card text-left`,d&&`transition-[border-color,background] duration-150 hover:border-foreground/20 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,f),children:[(0,O.jsxs)(`div`,{className:`flex items-start gap-3 px-3.5 py-3`,children:[(0,O.jsx)(`span`,{"aria-hidden":!0,className:`inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground`,children:(0,O.jsx)(ae,{className:`size-4`})}),(0,O.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsx)(a,{weight:`semibold`,className:`truncate font-mono`,children:e}),!!t&&(0,O.jsxs)(i,{variant:`secondary`,className:`font-mono tabular-nums`,children:[`v`,t.replace(/^v/,``)]})]}),!!n&&(0,O.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-1 line-clamp-2`,children:n}),(r||o||l!==void 0)&&(0,O.jsxs)(`div`,{className:`mt-2 flex flex-wrap items-center gap-x-3 gap-y-1`,children:[!!r&&(0,O.jsx)(N,{label:m.licenseLabel,value:r}),!!o&&(0,O.jsx)(N,{label:m.publishedLabel,value:o}),l!==void 0&&(0,O.jsx)(N,{label:m.weeklyDownloadsLabel,value:String(l)})]}),!!u?.length&&(0,O.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1`,children:u.slice(0,6).map(e=>(0,O.jsx)(i,{variant:`secondary`,children:e},e))})]})]}),(s||c)&&(0,O.jsxs)(`div`,{className:`flex items-center gap-2 border-t border-border/60 bg-muted/20 px-3.5 py-2`,children:[!!s&&(0,O.jsxs)(`a`,{href:s,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),"aria-label":m.homepageAria,className:`inline-flex items-center gap-1 rounded text-muted-foreground hover:text-foreground`,children:[(0,O.jsx)(ie,{className:`size-3.5`}),(0,O.jsx)(a,{tag:`span`,size:`xxs`,weight:`medium`,children:`Homepage`}),(0,O.jsx)(x,{className:`size-3`})]}),!!s&&!!c&&(0,O.jsx)(`span`,{"aria-hidden":!0,className:`text-muted-foreground/40`,children:`·`}),!!c&&(0,O.jsxs)(`a`,{href:c,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),"aria-label":m.repositoryAria,className:`inline-flex items-center gap-1 rounded text-muted-foreground hover:text-foreground`,children:[(0,O.jsx)(te,{className:`size-3.5`}),(0,O.jsx)(a,{tag:`span`,size:`xxs`,weight:`medium`,children:`Repository`}),(0,O.jsx)(x,{className:`size-3`})]})]})]})}M.displayName=`AiPackageInfo`;function N({label:e,value:t}){return(0,O.jsxs)(`div`,{className:`inline-flex items-baseline gap-1`,children:[(0,O.jsx)(a,{size:`xxs`,type:`discrete`,children:e}),(0,O.jsx)(a,{size:`xxs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:t})]})}var fe={expandAria:`Expand directory`,collapseAria:`Collapse directory`,statusLabels:{added:`A`,modified:`M`,removed:`D`,renamed:`R`}},pe=t(n(),1),me={added:{row:`before:bg-success`,pill:`bg-success/15 text-success`},modified:{row:`before:bg-warning`,pill:`bg-warning/20 text-warning`},removed:{row:`before:bg-destructive`,pill:`bg-destructive/15 text-destructive`},renamed:{row:`before:bg-info`,pill:`bg-info/15 text-info`}};function he(e){let t=e.split(`.`).pop()?.toLowerCase()??``;return[`ts`,`tsx`,`js`,`jsx`,`mjs`,`cjs`,`json`,`css`,`scss`,`html`,`sh`,`py`,`rs`,`go`].includes(t)?l:[`md`,`mdx`,`txt`].includes(t)?S:re}function P({nodes:e,selectedId:t,onSelect:n,hideStatusLabels:r=!1,indent:i=14,className:a,strings:o}){let s=w(fe,o);return(0,O.jsx)(`div`,{className:T(`ai-file-tree--component`,`overflow-hidden rounded-lg border border-border/60 bg-card font-mono text-xs`,a),children:(0,O.jsx)(`ul`,{children:e.map(e=>(0,O.jsx)(F,{node:e,depth:0,selectedId:t,onSelect:n,hideStatusLabels:r,indent:i,strings:s},e.id))})})}P.displayName=`AiFileTree`;function F({node:e,depth:t,selectedId:n,onSelect:r,hideStatusLabels:i,indent:o,strings:s}){let[c,l]=(0,pe.useState)(e.defaultExpanded??t<1),u=e.kind===`directory`,d=n===e.id,f=e.status,p=f?me[f]:void 0,m=e.icon??(u?c?C:D:he(e.name)),h=()=>{u?l(e=>!e):r?.(e)},g=(0,O.jsxs)(O.Fragment,{children:[!!f&&!i&&(0,O.jsx)(`span`,{className:T(`inline-flex size-4 shrink-0 items-center justify-center rounded`,`text-xxs font-bold leading-none uppercase`,p?.pill),children:s.statusLabels[f]}),!!e.trailing&&(0,O.jsx)(a,{tag:`span`,size:`xxs`,type:`secondary`,className:`tabular-nums`,children:e.trailing})]});return(0,O.jsxs)(`li`,{children:[(0,O.jsxs)(y,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:h,"aria-expanded":u?c:void 0,"aria-label":u?c?s.collapseAria:s.expandAria:void 0,className:T(`ai-file-tree--row group relative h-auto w-full justify-start gap-1.5 rounded-none px-2 py-1 text-left font-mono text-xs`,`hover:bg-muted/40`,`focus-visible:ring-inset`,d&&`bg-primary/10`,!!f&&`before:absolute before:left-0 before:top-0 before:h-full before:w-0.5`,p?.row,f===`removed`&&`text-muted-foreground/80`),style:{paddingLeft:8+t*o},children:[u?c?(0,O.jsx)(ee,{className:`size-3.5 shrink-0 text-muted-foreground`}):(0,O.jsx)(ce,{className:`size-3.5 shrink-0 text-muted-foreground`}):(0,O.jsx)(`span`,{"aria-hidden":!0,className:`size-3.5 shrink-0`}),(0,O.jsx)(m,{className:T(`size-3.5 shrink-0`,u?`text-muted-foreground`:`text-muted-foreground/80`)}),(0,O.jsx)(`span`,{className:T(`flex-1 truncate`,f===`removed`&&`line-through`),children:e.name}),(0,O.jsx)(`span`,{className:`ml-auto flex items-center gap-1.5`,children:g})]}),u&&c&&!!e.children?.length&&(0,O.jsx)(`ul`,{children:e.children.map(e=>(0,O.jsx)(F,{node:e,depth:t+1,selectedId:n,onSelect:r,hideStatusLabels:i,indent:o,strings:s},e.id))})]})}var I=e({AiAgentExample:()=>z,AiArtifactExample:()=>q,AiAttachmentExample:()=>V,AiChainOfThoughtExample:()=>G,AiCodeBlockExample:()=>B,AiConfirmationExample:()=>X,AiFileTreeExample:()=>J,AiInlineCitationExample:()=>H,AiPackageInfoExample:()=>Y,AiReasoningExample:()=>W,AiShimmerExample:()=>R,AiSourcesExample:()=>U,AiTaskExample:()=>K}),L=`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}`,ge=`pnpm install admin-ui-starter-kit
+pnpm add -D tailwindcss@^4 @tailwindcss/vite`,_e=`data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%0A%09%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%2210%22%20fill%3D%22%23646cff%22%2F%3E%0A%09%3Cpath%20d%3D%22M10%209h20l-10%2022L10%209Z%22%20fill%3D%22%23fff%22%2F%3E%0A%09%3Cpath%20d%3D%22M20%209h10L20%2031V9Z%22%20fill%3D%22%23ffd62e%22%20opacity%3D%22.9%22%2F%3E%0A%3C%2Fsvg%3E%0A`;function R(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-3`,children:[(0,O.jsx)(_,{children:`Generating insights…`}),(0,O.jsx)(_,{paused:!0,children:`Paused`})]})})}function z(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-3`,children:[(0,O.jsx)(h,{name:`Atlas`,subtitle:`claude-4.7-1m`,status:`thinking`,icon:v}),(0,O.jsx)(h,{name:`Helios`,subtitle:`local · qwen-2.5-coder`,tone:`success`,status:`done`,variant:`card`,icon:ne}),(0,O.jsx)(h,{name:`Nova`,subtitle:`offline`,tone:`neutral`,status:`offline`,icon:v})]})})}function B(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-3`,children:[(0,O.jsx)(d,{code:L,language:`tsx`,filename:`Counter.tsx`,showLineNumbers:!0}),(0,O.jsx)(d,{code:ge,language:`shell`})]})})}function V(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,O.jsx)(c,{name:`quarterly-report.pdf`,meta:`2.4 MB · PDF`,kind:`document`,onOpen:()=>{},onRemove:()=>{}}),(0,O.jsx)(c,{name:`brand-mark.png`,meta:`312 KB · PNG`,kind:`image`,thumbnailUrl:`https://images.unsplash.com/photo-1520975918318-3a83a708bf26?w=80&h=80&fit=crop`,onOpen:()=>{}}),(0,O.jsx)(c,{name:`setup.sh`,meta:`Uploading… 60%`,kind:`code`,progress:.6}),(0,O.jsx)(c,{name:`readme.md`,meta:`Failed to upload`,kind:`document`,errored:!0,onRemove:()=>{}})]})})}function H(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(a,{children:[`The framework supports zero-config TypeScript out of the box`,(0,O.jsx)(A,{index:1,title:`Vite docs`,url:`https://vitejs.dev`}),`, and accepts arbitrary React components as plugins`,(0,O.jsx)(A,{index:2,title:`React reference`}),`, including compound components`,(0,O.jsx)(A,{index:3,onSelect:()=>{},title:`Custom hook patterns`}),`.`]})})}function U(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[(0,O.jsx)(s,{sources:[{id:`a`,title:`Vite — Next-gen tooling`,publisher:`vitejs.dev`,url:`https://vitejs.dev`,faviconUrl:_e},{id:`b`,title:`React documentation`,publisher:`react.dev`,url:`https://react.dev`},{id:`c`,title:`TypeScript Handbook`,publisher:`typescriptlang.org`,url:`https://www.typescriptlang.org/docs`}],defaultExpanded:!0}),(0,O.jsx)(s,{variant:`avatars`,sources:[{id:`a`,title:`Site A`},{id:`b`,title:`Site B`},{id:`c`,title:`Site C`},{id:`d`,title:`Site D`},{id:`e`,title:`Site E`},{id:`f`,title:`Site F`}]})]})})}function W(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-3`,children:[(0,O.jsx)(u,{streaming:!0,defaultExpanded:!0,children:`Looking at the schema, I need to:
+1. Group rows by booking date
+2. Sum totals per group
+3. Pull refund deltas from the parallel table…`}),(0,O.jsx)(u,{durationSeconds:3.6,children:`Resolved query plan: bookings JOIN refunds ON booking_id, GROUP BY date(created_at). Skipped index on customer_id (not needed for the daily aggregate).`})]})})}function G(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(m,{streaming:!0,steps:[{id:`1`,title:`Parse the prompt`,description:`Identify entities and intent.`,status:`completed`},{id:`2`,title:`Lookup product catalog`,description:`Fetch SKUs, pricing, and availability.`,status:`completed`},{id:`3`,title:`Reconcile with inventory`,description:`Cross-check on-hand vs. reserved.`,status:`active`},{id:`4`,title:`Generate draft response`,status:`pending`}]})})}function K(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(f,{density:`expanded`,task:{id:`root`,title:`Bootstrap a new Vite + React project`,status:`running`,rightSlot:`12.4s`,children:[{id:`1`,title:`Resolve template`,status:`completed`,rightSlot:`0.2s`},{id:`2`,title:`Install dependencies`,status:`completed`,rightSlot:`8.1s`,children:[{id:`2a`,title:`react @ 19.1.0`,status:`completed`},{id:`2b`,title:`vite @ 6.0.0`,status:`completed`},{id:`2c`,title:`typescript @ 5.5.3`,status:`completed`}]},{id:`3`,title:`Run dev server`,status:`running`,rightSlot:`4.1s`},{id:`4`,title:`Open browser`,status:`queued`},{id:`5`,title:`Cleanup tmp`,status:`skipped`}]}})})}function q(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(g,{title:`Counter.tsx`,subtitle:`React component · 12 lines`,icon:S,copyText:L,onOpen:()=>{},onDownload:()=>{},children:(0,O.jsx)(d,{code:L,language:`tsx`,hideHeader:!0})})})}function J(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(P,{nodes:[{id:`root`,name:`src`,kind:`directory`,defaultExpanded:!0,children:[{id:`app`,name:`app`,kind:`directory`,defaultExpanded:!0,children:[{id:`app/page.tsx`,name:`page.tsx`,kind:`file`,status:`modified`},{id:`app/layout.tsx`,name:`layout.tsx`,kind:`file`},{id:`app/route.ts`,name:`route.ts`,kind:`file`,status:`added`}]},{id:`components`,name:`components`,kind:`directory`,children:[{id:`card.tsx`,name:`Card.tsx`,kind:`file`},{id:`old-card.tsx`,name:`OldCard.tsx`,kind:`file`,status:`removed`}]},{id:`index.ts`,name:`index.ts`,kind:`file`,status:`renamed`}]}]})})}function Y(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(M,{name:`admin-ui-starter-kit`,version:`1.4.2`,description:`Composable React component library with shadcn primitives, base wrappers, and AI surfaces.`,license:`MIT`,publishedAt:`2 days ago`,weeklyDownloads:`1,240`,homepage:`https://example.com`,repository:`https://github.com/nicolasvlachos/admin-ui-starter-kit`,keywords:[`react`,`shadcn`,`tailwind`,`ai`,`components`]})})}function X(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,O.jsx)(p,{title:`Run npm install in the workspace?`,description:`The agent will execute pnpm install with the lockfile pinned to the current commit.`,icon:oe,tone:`info`}),(0,O.jsx)(p,{title:`Delete 4 obsolete branches`,description:`release/0.4, feat/old-router, fix/legacy-style, chore/unused-deps`,tone:`destructive`}),(0,O.jsx)(p,{title:`Publish v1.4.2 to npm`,tone:`primary`,status:`approved`})]})})}var Z=`import { Bot, Cpu, FileText, Wrench } from 'lucide-react';
+import {
+	AiAgent,
+	AiArtifact,
+	AiAttachment,
+	AiChainOfThought,
+	AiCodeBlock,
+	AiConfirmation,
+	AiFileTree,
+	AiInlineCitation,
+	AiPackageInfo,
+	AiReasoning,
+	AiShimmer,
+	AiSources,
+	AiTask,
+} from '@/components/composed/ai';
+import { Text } from '@/components/typography';
+
+const REACT_SAMPLE = \`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}\`;
+
+const SHELL_SAMPLE = \`pnpm install admin-ui-starter-kit
+pnpm add -D tailwindcss@^4 @tailwindcss/vite\`;
+
+const VITE_FAVICON = \`data:image/svg+xml,\${encodeURIComponent(\`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+	<rect width="40" height="40" rx="10" fill="#646cff"/>
+	<path d="M10 9h20l-10 22L10 9Z" fill="#fff"/>
+	<path d="M20 9h10L20 31V9Z" fill="#ffd62e" opacity=".9"/>
+</svg>
+\`)}\`;
+
+export function AiShimmerExample() {
+	return (
+		<>
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
+								<AiShimmer>Generating insights…</AiShimmer>
+								<AiShimmer paused>Paused</AiShimmer>
+							</div>
+		</>
+	);
+}
+
+export function AiAgentExample() {
+	return (
+		<>
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
+								<AiAgent name="Atlas" subtitle="claude-4.7-1m" status="thinking" icon={Bot} />
+								<AiAgent
+									name="Helios"
+									subtitle="local · qwen-2.5-coder"
+									tone="success"
+									status="done"
+									variant="card"
+									icon={Cpu}
+								/>
+								<AiAgent name="Nova" subtitle="offline" tone="neutral" status="offline" icon={Bot} />
+							</div>
+		</>
+	);
+}
+
+export function AiCodeBlockExample() {
+	return (
+		<>
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
+								<AiCodeBlock code={REACT_SAMPLE} language="tsx" filename="Counter.tsx" showLineNumbers />
+								<AiCodeBlock code={SHELL_SAMPLE} language="shell" />
+							</div>
+		</>
+	);
+}
+
+export function AiAttachmentExample() {
+	return (
+		<>
+			<div className="flex flex-wrap gap-2">
+								<AiAttachment
+									name="quarterly-report.pdf"
+									meta="2.4 MB · PDF"
+									kind="document"
+									onOpen={() => {}}
+									onRemove={() => {}}
+								/>
+								<AiAttachment
+									name="brand-mark.png"
+									meta="312 KB · PNG"
+									kind="image"
+									thumbnailUrl="https://images.unsplash.com/photo-1520975918318-3a83a708bf26?w=80&h=80&fit=crop"
+									onOpen={() => {}}
+								/>
+								<AiAttachment
+									name="setup.sh"
+									meta="Uploading… 60%"
+									kind="code"
+									progress={0.6}
+								/>
+								<AiAttachment
+									name="readme.md"
+									meta="Failed to upload"
+									kind="document"
+									errored
+									onRemove={() => {}}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function AiInlineCitationExample() {
+	return (
+		<>
+			<Text>
+								The framework supports zero-config TypeScript out of the box
+								<AiInlineCitation index={1} title="Vite docs" url="https://vitejs.dev" />, and
+								accepts arbitrary React components as plugins
+								<AiInlineCitation index={2} title="React reference" />, including
+								compound components
+								<AiInlineCitation index={3} onSelect={() => {}} title="Custom hook patterns" />.
+							</Text>
+		</>
+	);
+}
+
+export function AiSourcesExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+								<AiSources
+									sources={[
+										{
+											id: 'a',
+											title: 'Vite — Next-gen tooling',
+											publisher: 'vitejs.dev',
+											url: 'https://vitejs.dev',
+											faviconUrl: VITE_FAVICON,
+										},
+										{
+											id: 'b',
+											title: 'React documentation',
+											publisher: 'react.dev',
+											url: 'https://react.dev',
+										},
+										{
+											id: 'c',
+											title: 'TypeScript Handbook',
+											publisher: 'typescriptlang.org',
+											url: 'https://www.typescriptlang.org/docs',
+										},
+									]}
+									defaultExpanded
+								/>
+								<AiSources
+									variant="avatars"
+									sources={[
+										{ id: 'a', title: 'Site A' },
+										{ id: 'b', title: 'Site B' },
+										{ id: 'c', title: 'Site C' },
+										{ id: 'd', title: 'Site D' },
+										{ id: 'e', title: 'Site E' },
+										{ id: 'f', title: 'Site F' },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function AiReasoningExample() {
+	return (
+		<>
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
+								<AiReasoning streaming defaultExpanded>
+									{\`Looking at the schema, I need to:\\n1. Group rows by booking date\\n2. Sum totals per group\\n3. Pull refund deltas from the parallel table…\`}
+								</AiReasoning>
+								<AiReasoning durationSeconds={3.6}>
+									{\`Resolved query plan: bookings JOIN refunds ON booking_id, GROUP BY date(created_at). Skipped index on customer_id (not needed for the daily aggregate).\`}
+								</AiReasoning>
+							</div>
+		</>
+	);
+}
+
+export function AiChainOfThoughtExample() {
+	return (
+		<>
+			<AiChainOfThought
+								streaming
+								steps={[
+									{
+										id: '1',
+										title: 'Parse the prompt',
+										description: 'Identify entities and intent.',
+										status: 'completed',
+									},
+									{
+										id: '2',
+										title: 'Lookup product catalog',
+										description: 'Fetch SKUs, pricing, and availability.',
+										status: 'completed',
+									},
+									{
+										id: '3',
+										title: 'Reconcile with inventory',
+										description: 'Cross-check on-hand vs. reserved.',
+										status: 'active',
+									},
+									{
+										id: '4',
+										title: 'Generate draft response',
+										status: 'pending',
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiTaskExample() {
+	return (
+		<>
+			<AiTask
+								density="expanded"
+								task={{
+									id: 'root',
+									title: 'Bootstrap a new Vite + React project',
+									status: 'running',
+									rightSlot: '12.4s',
+									children: [
+										{ id: '1', title: 'Resolve template', status: 'completed', rightSlot: '0.2s' },
+										{
+											id: '2',
+											title: 'Install dependencies',
+											status: 'completed',
+											rightSlot: '8.1s',
+											children: [
+												{ id: '2a', title: 'react @ 19.1.0', status: 'completed' },
+												{ id: '2b', title: 'vite @ 6.0.0', status: 'completed' },
+												{ id: '2c', title: 'typescript @ 5.5.3', status: 'completed' },
+											],
+										},
+										{ id: '3', title: 'Run dev server', status: 'running', rightSlot: '4.1s' },
+										{ id: '4', title: 'Open browser', status: 'queued' },
+										{ id: '5', title: 'Cleanup tmp', status: 'skipped' },
+									],
+								}}
+							/>
+		</>
+	);
+}
+
+export function AiArtifactExample() {
+	return (
+		<>
+			<AiArtifact
+								title="Counter.tsx"
+								subtitle="React component · 12 lines"
+								icon={FileText}
+								copyText={REACT_SAMPLE}
+								onOpen={() => {}}
+								onDownload={() => {}}
+							>
+								<AiCodeBlock code={REACT_SAMPLE} language="tsx" hideHeader />
+							</AiArtifact>
+		</>
+	);
+}
+
+export function AiFileTreeExample() {
+	return (
+		<>
+			<AiFileTree
+								nodes={[
+									{
+										id: 'root',
+										name: 'src',
+										kind: 'directory',
+										defaultExpanded: true,
+										children: [
+											{
+												id: 'app',
+												name: 'app',
+												kind: 'directory',
+												defaultExpanded: true,
+												children: [
+													{
+														id: 'app/page.tsx',
+														name: 'page.tsx',
+														kind: 'file',
+														status: 'modified',
+													},
+													{ id: 'app/layout.tsx', name: 'layout.tsx', kind: 'file' },
+													{
+														id: 'app/route.ts',
+														name: 'route.ts',
+														kind: 'file',
+														status: 'added',
+													},
+												],
+											},
+											{
+												id: 'components',
+												name: 'components',
+												kind: 'directory',
+												children: [
+													{ id: 'card.tsx', name: 'Card.tsx', kind: 'file' },
+													{
+														id: 'old-card.tsx',
+														name: 'OldCard.tsx',
+														kind: 'file',
+														status: 'removed',
+													},
+												],
+											},
+											{ id: 'index.ts', name: 'index.ts', kind: 'file', status: 'renamed' },
+										],
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiPackageInfoExample() {
+	return (
+		<>
+			<AiPackageInfo
+								name="admin-ui-starter-kit"
+								version="1.4.2"
+								description="Composable React component library with shadcn primitives, base wrappers, and AI surfaces."
+								license="MIT"
+								publishedAt="2 days ago"
+								weeklyDownloads="1,240"
+								homepage="https://example.com"
+								repository="https://github.com/nicolasvlachos/admin-ui-starter-kit"
+								keywords={['react', 'shadcn', 'tailwind', 'ai', 'components']}
+							/>
+		</>
+	);
+}
+
+export function AiConfirmationExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-3">
+								<AiConfirmation
+									title="Run npm install in the workspace?"
+									description="The agent will execute pnpm install with the lockfile pinned to the current commit."
+									icon={Wrench}
+									tone="info"
+								/>
+								<AiConfirmation
+									title="Delete 4 obsolete branches"
+									description="release/0.4, feat/old-router, fix/legacy-style, chore/unused-deps"
+									tone="destructive"
+								/>
+								<AiConfirmation
+									title="Publish v1.4.2 to npm"
+									tone="primary"
+									status="approved"
+								/>
+							</div>
+		</>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return I||$(`Examples`,!1),z||$(`Examples.AiAgentExample`,!0),q||$(`Examples.AiArtifactExample`,!0),V||$(`Examples.AiAttachmentExample`,!0),G||$(`Examples.AiChainOfThoughtExample`,!0),B||$(`Examples.AiCodeBlockExample`,!0),X||$(`Examples.AiConfirmationExample`,!0),J||$(`Examples.AiFileTreeExample`,!0),H||$(`Examples.AiInlineCitationExample`,!0),Y||$(`Examples.AiPackageInfoExample`,!0),W||$(`Examples.AiReasoningExample`,!0),R||$(`Examples.AiShimmerExample`,!0),U||$(`Examples.AiSourcesExample`,!0),K||$(`Examples.AiTaskExample`,!0),(0,O.jsxs)(r,{title:`Composed · AI (elements)`,description:`Standalone surfaces ported from elements.ai-sdk.dev: shimmer, code-block, agent, package-info, reasoning, chain-of-thought, sources, inline-citation, task, artifact, file-tree, confirmation, attachment.`,layer:`composed`,status:`ready`,children:[(0,O.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(b,{name:`AiShimmerExample`,source:Z,children:(0,O.jsx)(R,{})}),(0,O.jsx)(b,{name:`AiAgentExample`,source:Z,children:(0,O.jsx)(z,{})}),(0,O.jsx)(b,{name:`AiCodeBlockExample`,source:Z,children:(0,O.jsx)(B,{})}),(0,O.jsx)(b,{name:`AiAttachmentExample`,source:Z,children:(0,O.jsx)(V,{})}),(0,O.jsx)(b,{name:`AiInlineCitationExample`,source:Z,children:(0,O.jsx)(H,{})}),(0,O.jsx)(b,{name:`AiSourcesExample`,source:Z,children:(0,O.jsx)(U,{})}),(0,O.jsx)(b,{name:`AiReasoningExample`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(b,{name:`AiChainOfThoughtExample`,source:Z,children:(0,O.jsx)(G,{})}),(0,O.jsx)(b,{name:`AiTaskExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(b,{name:`AiArtifactExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(b,{name:`AiFileTreeExample`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(b,{name:`AiPackageInfoExample`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(b,{name:`AiConfirmationExample`,source:Z,children:(0,O.jsx)(X,{})})]}),(0,O.jsxs)(o,{title:`API`,id:`api`,children:[(0,O.jsx)(t.h4,{children:`AiAgent`}),(0,O.jsx)(E,{component:`AiAgent`}),(0,O.jsx)(t.h4,{children:`AiArtifact`}),(0,O.jsx)(E,{component:`AiArtifact`}),(0,O.jsx)(t.h4,{children:`AiAttachment`}),(0,O.jsx)(E,{component:`AiAttachment`}),(0,O.jsx)(t.h4,{children:`AiChainOfThought`}),(0,O.jsx)(E,{component:`AiChainOfThought`}),(0,O.jsx)(t.h4,{children:`AiCodeBlock`}),(0,O.jsx)(E,{component:`AiCodeBlock`}),(0,O.jsx)(t.h4,{children:`AiConfirmation`}),(0,O.jsx)(E,{component:`AiConfirmation`}),(0,O.jsx)(t.h4,{children:`AiFileTree`}),(0,O.jsx)(E,{component:`AiFileTree`}),(0,O.jsx)(t.h4,{children:`AiInlineCitation`}),(0,O.jsx)(E,{component:`AiInlineCitation`}),(0,O.jsx)(t.h4,{children:`AiPackageInfo`}),(0,O.jsx)(E,{component:`AiPackageInfo`}),(0,O.jsx)(t.h4,{children:`AiReasoning`}),(0,O.jsx)(E,{component:`AiReasoning`}),(0,O.jsx)(t.h4,{children:`AiShimmer`}),(0,O.jsx)(E,{component:`AiShimmer`}),(0,O.jsx)(t.h4,{children:`AiSources`}),(0,O.jsx)(E,{component:`AiSources`}),(0,O.jsx)(t.h4,{children:`AiTask`}),(0,O.jsx)(E,{component:`AiTask`})]})]})}function ve(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ve as default};

package/dist/showcase/assets/ai-ewP8qLOJ.js

@@ -0,0 +1,207 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-Dd6X6IKg.js";import{t as s}from"./chart-column-CbUwWFn7.js";import{r as c,t as l}from"./example-Rrx9vj75.js";import{t as u}from"./chevron-down-CBa5t2E0.js";import{t as d}from"./cpu-CzkgJ-zb.js";import{t as f}from"./database-Ad0l2Bjl.js";import{t as p}from"./external-link-BkCjE03j.js";import{t as ee}from"./file-text-Clv0qFr3.js";import{t as te}from"./message-square-Cyrr-QgJ.js";import{t as m}from"./quote-BXTU9evS.js";import{t as ne}from"./refresh-cw-BpV3OG_s.js";import{t as h}from"./sparkles-Bc0I4qTf.js";import{n as g,r as re,t as _}from"./ai-tool-call-Da4srLLe.js";import{M as ie,N as v,a as ae,c as oe,d as se,l as ce,n as y}from"./index-o71HAmc3.js";import{t as b}from"./props-table-C6gPyO49.js";import{t as le}from"./icon-badge-GMIN-bca.js";import{t as x}from"./smart-card-BwSFemlj.js";import{t as ue}from"./separator-y9i6EG-N.js";import{a as de,c as S,i as C,n as fe,o as pe,r as w,t as T,u as E}from"./item-Oe2aHuvr.js";import{t as D}from"./inline-stat-CDQocPgN.js";var O=ce(`brain-circuit`,[[`path`,{d:`M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z`,key:`l5xja`}],[`path`,{d:`M9 13a4.5 4.5 0 0 0 3-4`,key:`10igwf`}],[`path`,{d:`M6.003 5.125A3 3 0 0 0 6.401 6.5`,key:`105sqy`}],[`path`,{d:`M3.477 10.896a4 4 0 0 1 .585-.396`,key:`ql3yin`}],[`path`,{d:`M6 18a4 4 0 0 1-1.967-.516`,key:`2e4loj`}],[`path`,{d:`M12 13h4`,key:`1ku699`}],[`path`,{d:`M12 18h6a2 2 0 0 1 2 2v1`,key:`105ag5`}],[`path`,{d:`M12 8h8`,key:`1lhi5i`}],[`path`,{d:`M16 8V5a2 2 0 0 1 2-2`,key:`u6izg6`}],[`circle`,{cx:`16`,cy:`13`,r:`.5`,key:`ry7gng`}],[`circle`,{cx:`18`,cy:`3`,r:`.5`,key:`1aiba7`}],[`circle`,{cx:`20`,cy:`21`,r:`.5`,key:`yhc1fs`}],[`circle`,{cx:`20`,cy:`8`,r:`.5`,key:`1e43v0`}]]),me={title:`AI Summary`,badgeLabel:`AI`,regenerate:`Regenerate`,confidenceLevels:{low:`low`,medium:`medium`,high:`high`}},he={title:`Classification`,complexityLabel:`Complexity`,flagsLabel:`Flags`,nextStepLabel:`Next Step`,confidencePrefix:`Confidence`,confidenceBands:{low:`Low`,medium:`Medium`,high:`High`}},k=se(),A={low:1,medium:2,high:3};function ge({level:e,label:t}){let n=A[e];return(0,k.jsxs)(`div`,{className:y(`ai-summary--confidence`,`flex items-center gap-1.5`),children:[(0,k.jsx)(`div`,{className:`flex items-center gap-0.5`,children:Array.from({length:3},(e,t)=>(0,k.jsx)(`div`,{className:y(`h-2.5 w-1 rounded-sm`,t<n?`bg-foreground/60`:`bg-muted-foreground/20`)},`bar-${String(t)}`))}),(0,k.jsx)(a,{size:`xs`,type:`secondary`,tag:`span`,className:`capitalize`,children:t})]})}function j({data:e,strings:t}){let n=v(me,t);return(0,k.jsx)(x,{icon:(0,k.jsx)(O,{className:`size-4`}),title:n.title,className:`ai-summary--component`,titleSuffix:(0,k.jsx)(i,{variant:`secondary`,children:n.badgeLabel}),footerText:(0,k.jsxs)(`div`,{className:`flex w-full items-center justify-between`,children:[(0,k.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,tag:`span`,children:e.generatedAt}),(0,k.jsx)(a,{size:`xs`,type:`discrete`,tag:`span`,children:e.model})]}),!!e.onRegenerate&&(0,k.jsxs)(c,{variant:`secondary`,buttonStyle:`ghost`,onClick:e.onRegenerate,children:[(0,k.jsx)(ne,{className:`mr-1 h-3 w-3`}),n.regenerate]})]}),children:(0,k.jsxs)(`div`,{className:`space-y-3`,children:[(0,k.jsx)(a,{size:`sm`,lineHeight:`relaxed`,children:e.summary}),e.entities.length>0&&(0,k.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:e.entities.map(e=>(0,k.jsx)(i,{variant:`secondary`,children:e},e))}),(0,k.jsx)(ge,{level:e.confidence,label:n.confidenceLevels[e.confidence]})]})})}function M({data:e,strings:t}){let n=v(he,t),r=e.confidence>=.9?n.confidenceBands.high:e.confidence>=.7?n.confidenceBands.medium:n.confidenceBands.low;return(0,k.jsx)(x,{icon:(0,k.jsx)(O,{className:`size-4`}),title:n.title,className:`ai-classification--component`,children:(0,k.jsxs)(`div`,{className:`space-y-3`,children:[(0,k.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,k.jsx)(i,{variant:`primary`,children:e.requestType}),(0,k.jsx)(i,{variant:e.urgencyVariant,children:e.urgency}),(0,k.jsx)(i,{variant:e.toneVariant,dot:!0,children:e.tone})]}),(0,k.jsx)(D,{label:n.complexityLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsxs)(`span`,{className:`flex items-center gap-1`,children:[Array.from({length:5},(t,n)=>(0,k.jsx)(`span`,{className:y(`h-1.5 w-3 rounded-sm`,n<e.complexityScore?`bg-foreground/60`:`bg-muted`)},`cx-${String(n)}`)),(0,k.jsxs)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`ml-1`,children:[String(e.complexityScore),`/5`]})]})}),e.flags.length>0&&(0,k.jsx)(D,{label:n.flagsLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsx)(`span`,{className:`flex gap-1`,children:e.flags.map(e=>(0,k.jsx)(i,{variant:`warning`,children:e},e))})}),(0,k.jsx)(D,{label:n.nextStepLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsx)(i,{variant:`info`,children:e.suggestedAction})}),(0,k.jsx)(a,{size:`sm`,lineHeight:`relaxed`,type:`secondary`,children:e.summary}),(0,k.jsx)(ue,{}),(0,k.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,k.jsxs)(i,{variant:`secondary`,children:[n.confidencePrefix,`: `,r]}),(0,k.jsx)(a,{size:`xs`,type:`discrete`,tag:`span`,children:e.model})]})]})})}var N={title:`AI Confidence`,confidenceLabel:`Overall`,factorsLabel:`Contributing factors`};function P(e){return e>=.85?{label:`High`,variant:`success`}:e>=.6?{label:`Medium`,variant:`warning`}:{label:`Low`,variant:`error`}}function F({score:e,model:t,factors:n,className:r,strings:o}){let s=v(N,o),c=Math.round(e*100),{label:l,variant:u}=P(e),d=2*Math.PI*24,f=d-c/100*d;return(0,k.jsxs)(x,{icon:(0,k.jsx)(h,{className:`size-4`}),title:s.title,titleSuffix:!!t&&(0,k.jsx)(i,{variant:`secondary`,size:`small`,children:t}),className:y(`ai-confidence--component`,r),children:[(0,k.jsxs)(`div`,{className:`grid gap-space-xl md:grid-cols-[auto_minmax(0,1fr)] md:items-center`,children:[(0,k.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,k.jsxs)(`svg`,{width:`56`,height:`56`,viewBox:`0 0 64 64`,"aria-hidden":`true`,children:[(0,k.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,className:`text-muted/60`}),(0,k.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,strokeLinecap:`round`,strokeDasharray:d,strokeDashoffset:f,transform:`rotate(-90 32 32)`,className:y(u===`success`&&`text-success`,u===`warning`&&`text-warning`,u===`error`&&`text-destructive`)})]}),(0,k.jsx)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center`,children:(0,k.jsxs)(a,{weight:`semibold`,className:`tabular-nums leading-none`,children:[c,`%`]})})]}),(0,k.jsxs)(`div`,{className:`grid min-w-0 gap-space-sm`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:s.confidenceLabel}),(0,k.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-space-sm`,children:[(0,k.jsx)(i,{variant:u,children:l}),!!t&&(0,k.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:t})]})]})]}),!!n&&n.length>0&&(0,k.jsxs)(`div`,{className:`mt-space-xl grid gap-space-md`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:s.factorsLabel}),n.map(e=>(0,k.jsxs)(`div`,{className:`grid gap-space-sm`,children:[(0,k.jsx)(D,{label:e.label,value:`${Math.round(e.score*100)}%`,mono:!0,labelClassName:`text-xs font-medium text-foreground`,valueClassName:`text-xs font-semibold`}),(0,k.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-muted/70`,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${Math.round(e.score*100)}%`}})})]},e.label))]})]})}F.displayName=`AiConfidenceCard`;var I={title:`Try asking`,hint:`Tap a prompt to start`};function L({suggestions:e,onPick:t,className:n,strings:r}){let i=v(I,r);return(0,k.jsx)(x,{icon:(0,k.jsx)(h,{className:`size-4`}),title:i.title,description:i.hint,className:y(`ai-prompt-suggestions--component`,n),children:(0,k.jsx)(`div`,{className:`grid grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-space-xl`,children:e.map(e=>{let n=e.icon;return(0,k.jsxs)(T,{variant:`outline`,render:(0,k.jsx)(`button`,{type:`button`,onClick:()=>t?.(e)}),className:y(`ai-prompt-suggestions--item h-full items-start gap-space-lg px-surface py-surface-sm transition-[border-color,background] duration-150`,`hover:border-foreground/20 hover:bg-muted/40`),children:[!!n&&(0,k.jsx)(S,{children:(0,k.jsx)(le,{icon:n,tone:`primary`,size:`default`,shape:`square`})}),(0,k.jsxs)(w,{className:`min-w-0 gap-space-sm`,children:[(0,k.jsx)(E,{children:e.label}),!!e.description&&(0,k.jsx)(C,{children:e.description})]})]},e.id)})})})}L.displayName=`AiPromptSuggestions`;var _e={title:`Token usage`,input:`Input`,output:`Output`,total:`Total`,cost:`Estimated cost`};function R({model:e,inputTokens:t,outputTokens:n,cost:r,maxTokens:o,className:s,strings:c}){let l=v(_e,c),u=t+n,f=o?Math.min(100,Math.round(u/o*100)):0;return(0,k.jsxs)(x,{icon:(0,k.jsx)(d,{className:`size-4`}),title:l.title,titleSuffix:!!e&&(0,k.jsx)(i,{variant:`secondary`,children:e}),className:y(`ai-token-usage--component`,s),children:[(0,k.jsx)(`div`,{className:`grid grid-cols-3 gap-2`,children:[{label:l.input,value:t},{label:l.output,value:n},{label:l.total,value:u}].map(e=>(0,k.jsxs)(`div`,{className:`rounded-md bg-muted/40 px-3 py-2`,children:[(0,k.jsx)(a,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),(0,k.jsx)(a,{size:`lg`,weight:`semibold`,className:`tabular-nums`,children:e.value.toLocaleString()})]},e.label))}),!!o&&(0,k.jsxs)(`div`,{className:`mt-3`,children:[(0,k.jsx)(D,{label:`${u.toLocaleString()} / ${o.toLocaleString()}`,value:`${f}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,k.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${f}%`}})})]}),!!r&&(0,k.jsx)(D,{className:`mt-3 rounded-md bg-primary/5 px-3 py-2`,label:l.cost,value:r,mono:!0,labelClassName:`text-xs`,valueClassName:`text-sm font-bold`})]})}R.displayName=`AiTokenUsageCard`;var ve={title:`Sources`,sourceCount:e=>e===1?`1 source`:`${e} sources`,expand:`Show sources`,collapse:`Hide sources`,visit:`Visit`,relevance:`Relevance`},z=t(n(),1);function B({sources:e,defaultExpanded:t=!1,maxCollapsedRows:n=0,className:r,strings:i}){let o=ie(ve,i),[s,l]=(0,z.useState)(t),d=s?e:e.slice(0,Math.max(0,n)),f=e.length-d.length;return(0,k.jsxs)(`div`,{className:y(`ai-citation--component`,`rounded-lg border border-border bg-card px-surface-sm py-surface-sm shadow-xs`,`space-y-space-lg`,r),children:[(0,k.jsxs)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>l(e=>!e),className:y(`ai-citation--trigger h-auto justify-start gap-space-sm rounded-md px-control py-row-y`,`text-muted-foreground hover:text-foreground hover:bg-muted/40`),"aria-expanded":s,"aria-label":s?o.collapse:o.expand,children:[(0,k.jsx)(m,{className:`size-3.5`}),(0,k.jsxs)(a,{size:`xs`,weight:`medium`,children:[o.title,` · `,o.sourceCount(e.length)]}),s?(0,k.jsx)(u,{className:`size-3.5`}):(0,k.jsx)(oe,{className:`size-3.5`})]}),(s||n>0)&&(0,k.jsxs)(pe,{children:[d.map((e,t)=>(0,k.jsx)(ye,{source:e,index:t+1,strings:o},e.id)),!s&&f>0&&(0,k.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`+`,f,` more`]})]})]})}B.displayName=`AiCitation`;function ye({source:e,index:t,strings:n}){let r=typeof e.relevance==`number`?Math.round(Math.max(0,Math.min(1,e.relevance))*100):null,i=e.url?`a`:`span`,o=e.url?{href:e.url,target:`_blank`,rel:`noopener noreferrer`}:{};return(0,k.jsxs)(T,{variant:`outline`,size:`small`,className:`items-start px-surface-sm py-surface-sm`,children:[(0,k.jsx)(S,{children:(0,k.jsx)(`span`,{className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-semibold text-muted-foreground tabular-nums`,children:t})}),(0,k.jsxs)(w,{children:[(0,k.jsx)(E,{className:`truncate`,children:(0,k.jsxs)(i,{...o,className:y(`truncate`,e.url&&`hover:text-primary hover:underline`),children:[e.title,!!e.url&&(0,k.jsx)(p,{className:`ml-1 inline size-3 align-baseline`})]})}),!!e.snippet&&(0,k.jsx)(C,{clamp:2,children:e.snippet}),(e.publisher||e.publishedAt)&&(0,k.jsxs)(de,{className:`mt-1 justify-start gap-1.5`,children:[!!e.publisher&&(0,k.jsx)(a,{size:`xxs`,type:`discrete`,children:e.publisher}),!!e.publisher&&!!e.publishedAt&&(0,k.jsx)(a,{size:`xxs`,type:`discrete`,children:`·`}),!!e.publishedAt&&(0,k.jsx)(a,{size:`xxs`,type:`discrete`,className:`tabular-nums`,children:e.publishedAt})]})]}),r!==null&&(0,k.jsxs)(fe,{className:`w-16 flex-col items-end gap-0.5`,children:[(0,k.jsxs)(a,{size:`xxs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:[r,`%`]}),(0,k.jsx)(`div`,{className:`h-1 w-full overflow-hidden rounded-full bg-muted`,"aria-label":n.relevance,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${r}%`}})})]})]})}var be=e({AIClassification:()=>H,AISummary:()=>V});function V(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(j,{data:{summary:`Customer requested a birthday experience booking for two adults near Los Angeles, preferring a weekend slot in early April.`,entities:[`Birthday`,`Outdoor`,`Los Angeles`,`2 Adults`],confidence:`high`,model:`Claude 3.5 Sonnet`,generatedAt:`Mar 27, 2026 — 14:32`,onRegenerate:()=>{}}})})}function H(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(M,{data:{requestType:`Product Inquiry`,urgency:`Medium`,urgencyVariant:`warning`,tone:`Professional`,toneVariant:`info`,flags:[`Gift Purchase`,`Wellness`],complexityScore:3,suggestedAction:`Auto-respond`,summary:`Standard product inquiry for a spa gift package.`,confidence:.92,model:`Claude 3.5 Sonnet`}})})}var xe=e({AiCitationExample:()=>J,AiConfidenceCardExample:()=>U,AiFeedbackExample:()=>Y,AiMessageBubbleExample:()=>K,AiPromptSuggestionsExample:()=>W,AiTokenUsageCardExample:()=>G,AiToolCallExample:()=>q});function U(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(F,{score:.84,model:`Claude 4.7`,factors:[{label:`Source quality`,score:.92},{label:`Context coverage`,score:.78},{label:`Prompt specificity`,score:.81}]})})}function W(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(L,{suggestions:[{id:`kpi`,label:`Summarise this month KPIs`,description:`Get a digest of revenue, orders, refunds.`,icon:s},{id:`invoice`,label:`Draft an overdue reminder`,description:`Polite + firm copy for unpaid invoices.`,icon:ee},{id:`lookup`,label:`Find similar customers`,description:`Pattern-match by spend and category.`,icon:ae},{id:`help`,label:`Answer a refund question`,description:`Explain refund policy in plain English.`,icon:te}],onPick:()=>{}})})}function G(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(R,{model:`Claude 4.7`,inputTokens:3240,outputTokens:812,cost:`$0.082`,maxTokens:2e4})})}function K(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,k.jsx)(g,{role:`user`,authorName:`You`,timestamp:`14:31`,children:`Can you summarise yesterday's bookings and flag anything unusual?`}),(0,k.jsx)(g,{role:`assistant`,authorName:`Claude 4.7`,timestamp:`14:31`,plainText:`You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand.`,onRegenerate:()=>{},children:`You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand.`})]})})}function q(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,k.jsx)(_,{name:`search_bookings`,status:`success`,durationMs:420,args:`{ from: '2026-04-01', to: '2026-04-28', status: 'paid' }`,result:`[ { id: 'B-1402', amount: 250.00, … }, …42 more ]`}),(0,k.jsx)(_,{name:`fetch_customer`,status:`running`,durationMs:120,icon:f}),(0,k.jsx)(_,{name:`send_email`,status:`error`,durationMs:2150,args:`{ to: 'maria@example.com', subject: '…' }`,error:`SMTP timeout after 2.0s. Retry suggested.`})]})})}function J(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(B,{defaultExpanded:!0,sources:[{id:`s1`,title:`Refund policy — Q2 2026 update`,url:`https://example.com/refund-policy`,snippet:`Refunds for bookings cancelled at least 48 hours in advance are processed within 5 business days.`,publisher:`Internal Wiki`,publishedAt:`Apr 12, 2026`,relevance:.93},{id:`s2`,title:`Customer service playbook`,url:`https://example.com/playbook`,snippet:`When a customer disputes a charge, acknowledge first, then check the booking record.`,publisher:`Operations`,publishedAt:`Mar 30, 2026`,relevance:.78},{id:`s3`,title:`Bookings API reference`,url:`https://example.com/api/bookings`,snippet:`GET /bookings/{id} returns the full booking record including refund history.`,publisher:`Engineering Docs`,publishedAt:`Feb 18, 2026`,relevance:.55}]})})}function Y(){let[e,t]=(0,z.useState)(null);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-border bg-card p-4`,children:(0,k.jsx)(re,{value:e,onVote:t})})})}var X=`import { AiSummaryBlock, AiClassificationPanel } from '@/components/composed/ai';
+
+export function AISummary() {
+	return (
+		<>
+			<AiSummaryBlock
+								data={{
+									summary: 'Customer requested a birthday experience booking for two adults near Los Angeles, preferring a weekend slot in early April.',
+									entities: ['Birthday', 'Outdoor', 'Los Angeles', '2 Adults'],
+									confidence: 'high',
+									model: 'Claude 3.5 Sonnet',
+									generatedAt: 'Mar 27, 2026 — 14:32',
+									onRegenerate: () => {},
+								}}
+							/>
+		</>
+	);
+}
+
+export function AIClassification() {
+	return (
+		<>
+			<AiClassificationPanel
+								data={{
+									requestType: 'Product Inquiry',
+									urgency: 'Medium',
+									urgencyVariant: 'warning',
+									tone: 'Professional',
+									toneVariant: 'info',
+									flags: ['Gift Purchase', 'Wellness'],
+									complexityScore: 3,
+									suggestedAction: 'Auto-respond',
+									summary: 'Standard product inquiry for a spa gift package.',
+									confidence: 0.92,
+									model: 'Claude 3.5 Sonnet',
+								}}
+							/>
+		</>
+	);
+}
+`,Z=`import { useState } from 'react';
+import { BarChart3, Database, FileText, MessageSquare, Search } from 'lucide-react';
+import {
+	AiCitation,
+	AiConfidenceCard,
+	AiFeedback,
+	AiMessageBubble,
+	AiPromptSuggestions,
+	AiTokenUsageCard,
+	AiToolCall,
+	type AiFeedbackVote,
+} from '@/components/composed/ai';
+
+export function AiConfidenceCardExample() {
+	return (
+		<>
+			<AiConfidenceCard
+								score={0.84}
+								model="Claude 4.7"
+								factors={[
+									{ label: 'Source quality', score: 0.92 },
+									{ label: 'Context coverage', score: 0.78 },
+									{ label: 'Prompt specificity', score: 0.81 },
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiPromptSuggestionsExample() {
+	return (
+		<>
+			<AiPromptSuggestions
+								suggestions={[
+									{ id: 'kpi', label: 'Summarise this month KPIs', description: 'Get a digest of revenue, orders, refunds.', icon: BarChart3 },
+									{ id: 'invoice', label: 'Draft an overdue reminder', description: 'Polite + firm copy for unpaid invoices.', icon: FileText },
+									{ id: 'lookup', label: 'Find similar customers', description: 'Pattern-match by spend and category.', icon: Search },
+									{ id: 'help', label: 'Answer a refund question', description: 'Explain refund policy in plain English.', icon: MessageSquare },
+								]}
+								onPick={() => {}}
+							/>
+		</>
+	);
+}
+
+export function AiTokenUsageCardExample() {
+	return (
+		<>
+			<AiTokenUsageCard
+								model="Claude 4.7"
+								inputTokens={3240}
+								outputTokens={812}
+								cost="$0.082"
+								maxTokens={20000}
+							/>
+		</>
+	);
+}
+
+export function AiMessageBubbleExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-3">
+								<AiMessageBubble
+									role="user"
+									authorName="You"
+									timestamp="14:31"
+								>
+									Can you summarise yesterday's bookings and flag anything unusual?
+								</AiMessageBubble>
+								<AiMessageBubble
+									role="assistant"
+									authorName="Claude 4.7"
+									timestamp="14:31"
+									plainText="You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand."
+									onRegenerate={() => {}}
+								>
+									You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed
+									(one for a cancellation, one duplicate). The Spa package saw 2× the usual
+									demand.
+								</AiMessageBubble>
+							</div>
+		</>
+	);
+}
+
+export function AiToolCallExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-2">
+								<AiToolCall
+									name="search_bookings"
+									status="success"
+									durationMs={420}
+									args="{ from: '2026-04-01', to: '2026-04-28', status: 'paid' }"
+									result="[ { id: 'B-1402', amount: 250.00, … }, …42 more ]"
+								/>
+								<AiToolCall
+									name="fetch_customer"
+									status="running"
+									durationMs={120}
+									icon={Database}
+								/>
+								<AiToolCall
+									name="send_email"
+									status="error"
+									durationMs={2150}
+									args="{ to: 'maria@example.com', subject: '…' }"
+									error="SMTP timeout after 2.0s. Retry suggested."
+								/>
+							</div>
+		</>
+	);
+}
+
+export function AiCitationExample() {
+	return (
+		<>
+			<AiCitation
+								defaultExpanded
+								sources={[
+									{
+										id: 's1',
+										title: 'Refund policy — Q2 2026 update',
+										url: 'https://example.com/refund-policy',
+										snippet:
+											'Refunds for bookings cancelled at least 48 hours in advance are processed within 5 business days.',
+										publisher: 'Internal Wiki',
+										publishedAt: 'Apr 12, 2026',
+										relevance: 0.93,
+									},
+									{
+										id: 's2',
+										title: 'Customer service playbook',
+										url: 'https://example.com/playbook',
+										snippet:
+											'When a customer disputes a charge, acknowledge first, then check the booking record.',
+										publisher: 'Operations',
+										publishedAt: 'Mar 30, 2026',
+										relevance: 0.78,
+									},
+									{
+										id: 's3',
+										title: 'Bookings API reference',
+										url: 'https://example.com/api/bookings',
+										snippet: 'GET /bookings/{id} returns the full booking record including refund history.',
+										publisher: 'Engineering Docs',
+										publishedAt: 'Feb 18, 2026',
+										relevance: 0.55,
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiFeedbackExample() {
+	const [vote, setVote] = useState<AiFeedbackVote>(null);
+	return (
+		<>
+			<div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4">
+								<AiFeedback value={vote} onVote={setVote} />
+							</div>
+		</>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return be||$(`Examples`,!1),H||$(`Examples.AIClassification`,!0),V||$(`Examples.AISummary`,!0),xe||$(`ExtraExamples`,!1),J||$(`ExtraExamples.AiCitationExample`,!0),U||$(`ExtraExamples.AiConfidenceCardExample`,!0),Y||$(`ExtraExamples.AiFeedbackExample`,!0),K||$(`ExtraExamples.AiMessageBubbleExample`,!0),W||$(`ExtraExamples.AiPromptSuggestionsExample`,!0),G||$(`ExtraExamples.AiTokenUsageCardExample`,!0),q||$(`ExtraExamples.AiToolCallExample`,!0),(0,k.jsxs)(r,{title:`Composed · AI`,description:`Summary block, classification panel, confidence card, prompt suggestions, usage card, message bubble, tool call, citation, and feedback.`,layer:`composed`,status:`ready`,children:[(0,k.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(l,{name:`AISummary`,source:X,children:(0,k.jsx)(V,{})}),(0,k.jsx)(l,{name:`AIClassification`,source:X,children:(0,k.jsx)(H,{})})]}),(0,k.jsxs)(o,{title:`Assistive surfaces`,id:`assistive-surfaces`,children:[(0,k.jsx)(l,{name:`AiConfidenceCardExample`,source:Z,children:(0,k.jsx)(U,{})}),(0,k.jsx)(l,{name:`AiPromptSuggestionsExample`,source:Z,children:(0,k.jsx)(W,{})}),(0,k.jsx)(l,{name:`AiTokenUsageCardExample`,source:Z,children:(0,k.jsx)(G,{})})]}),(0,k.jsxs)(o,{title:`Message surfaces`,id:`message-surfaces`,children:[(0,k.jsx)(l,{name:`AiMessageBubbleExample`,source:Z,children:(0,k.jsx)(K,{})}),(0,k.jsx)(l,{name:`AiToolCallExample`,source:Z,children:(0,k.jsx)(q,{})}),(0,k.jsx)(l,{name:`AiCitationExample`,source:Z,children:(0,k.jsx)(J,{})}),(0,k.jsx)(l,{name:`AiFeedbackExample`,source:Z,children:(0,k.jsx)(Y,{})})]}),(0,k.jsxs)(o,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`AiSummaryBlock`}),(0,k.jsx)(b,{component:`AiSummaryBlock`}),(0,k.jsx)(t.h4,{children:`AiClassificationPanel`}),(0,k.jsx)(b,{component:`AiClassificationPanel`}),(0,k.jsx)(t.h4,{children:`AiCitation`}),(0,k.jsx)(b,{component:`AiCitation`}),(0,k.jsx)(t.h4,{children:`AiConfidenceCard`}),(0,k.jsx)(b,{component:`AiConfidenceCard`}),(0,k.jsx)(t.h4,{children:`AiFeedback`}),(0,k.jsx)(b,{component:`AiFeedback`}),(0,k.jsx)(t.h4,{children:`AiMessageBubble`}),(0,k.jsx)(b,{component:`AiMessageBubble`}),(0,k.jsx)(t.h4,{children:`AiPromptSuggestions`}),(0,k.jsx)(b,{component:`AiPromptSuggestions`}),(0,k.jsx)(t.h4,{children:`AiTokenUsageCard`}),(0,k.jsx)(b,{component:`AiTokenUsageCard`}),(0,k.jsx)(t.h4,{children:`AiToolCall`}),(0,k.jsx)(b,{component:`AiToolCall`})]})]})}function Se(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Se as default};