admin-ui-starter-kit 0.1.3 → 0.1.4

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

@@ -0,0 +1,379 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,gr as a,hr as o,mr as s,t as c}from"./example-C6-_Sy6B.js";import{a as l,c as u,d,i as f,l as p,n as m,o as h,r as g,s as _,t as ee,u as v}from"./ai-artifact-CQL5krnJ.js";import{t as y}from"./bot-Bcx5mNAQ.js";import{t as te}from"./chevron-down-x7TQsvYY.js";import{t as ne}from"./chevron-right-CDDMIkYP.js";import{t as re}from"./code-xml-BVYp_JDX.js";import{t as b}from"./cpu-D52NjUWq.js";import{t as x}from"./external-link-Bg-_8Uq7.js";import{t as S}from"./file-text-BIi71mZ1.js";import{t as C}from"./file-4pOq58jl.js";import{t as ie}from"./folder-open-zMXBpVNs.js";import{t as ae}from"./globe-47T22W56.js";import{t as oe}from"./package-CUNvdlBi.js";import{t as w}from"./wrench-1Ra9xb3d.js";import{D as T,E,a as se,r as ce}from"./index-B8DVXCmf.js";import{t as D}from"./props-table-CM_1cocj.js";var le=ce(`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`}]]),ue={sourcePrefix:`Source`,openAria:`Open source {{n}}: {{title}}`},O=se();function de(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function k({index:e,title:t,url:n,onSelect:a,className:o,strings:s}){let c=E(ue,s),l=de(c.openAria,{n:e,title:t??``}),u=t?`${c.sourcePrefix} ${e}: ${t}`:`${c.sourcePrefix} ${e}`,d=i(`inline-flex h-[1.25em] min-w-[1.25em] -translate-y-px items-center justify-center rounded px-1`,`align-middle text-[0.75em] 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`,o);return n?(0,O.jsx)(`a`,{href:n,target:`_blank`,rel:`noopener noreferrer`,title:u,"aria-label":l,className:i(`ai-inline-citation--component`,d),children:(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})}):a?(0,O.jsx)(`button`,{type:`button`,onClick:a,title:u,"aria-label":l,className:i(`ai-inline-citation--component`,d),children:(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})}):(0,O.jsx)(`span`,{title:u,"aria-label":l,className:i(`ai-inline-citation--component`,d),children:(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})})}k.displayName=`AiInlineCitation`;var fe={versionLabel:`Version`,licenseLabel:`License`,publishedLabel:`Published`,homepageAria:`Open homepage`,repositoryAria:`Open repository`,weeklyDownloadsLabel:`Weekly downloads`};function A({name:e,version:t,description:n,license:o,publishedAt:s,homepage:c,repository:l,weeklyDownloads:u,keywords:d,onSelect:f,className:p,strings:m}){let h=T(fe,m);return(0,O.jsxs)(f?`button`:`div`,{...f?{type:`button`,onClick:f}:{},className:i(`ai-package-info--component`,`block w-full rounded-lg border border-border/60 bg-card text-left`,f&&`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`,p),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)(oe,{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)(r,{weight:`semibold`,className:`truncate font-mono`,children:e}),!!t&&(0,O.jsxs)(a,{variant:`secondary`,className:`font-mono tabular-nums`,children:[`v`,t.replace(/^v/,``)]})]}),!!n&&(0,O.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1 line-clamp-2`,children:n}),(o||s||u!==void 0)&&(0,O.jsxs)(`div`,{className:`mt-2 flex flex-wrap items-center gap-x-3 gap-y-1`,children:[!!o&&(0,O.jsx)(j,{label:h.licenseLabel,value:o}),!!s&&(0,O.jsx)(j,{label:h.publishedLabel,value:s}),u!==void 0&&(0,O.jsx)(j,{label:h.weeklyDownloadsLabel,value:String(u)})]}),!!d?.length&&(0,O.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1`,children:d.slice(0,6).map(e=>(0,O.jsx)(a,{variant:`secondary`,children:e},e))})]})]}),(c||l)&&(0,O.jsxs)(`div`,{className:`flex items-center gap-2 border-t border-border/60 bg-muted/20 px-3.5 py-2`,children:[!!c&&(0,O.jsxs)(`a`,{href:c,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),"aria-label":h.homepageAria,className:`inline-flex items-center gap-1 rounded text-muted-foreground hover:text-foreground`,children:[(0,O.jsx)(ae,{className:`size-3.5`}),(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,children:`Homepage`}),(0,O.jsx)(x,{className:`size-3`})]}),!!c&&!!l&&(0,O.jsx)(`span`,{"aria-hidden":!0,className:`text-muted-foreground/40`,children:`·`}),!!l&&(0,O.jsxs)(`a`,{href:l,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),"aria-label":h.repositoryAria,className:`inline-flex items-center gap-1 rounded text-muted-foreground hover:text-foreground`,children:[(0,O.jsx)(re,{className:`size-3.5`}),(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,children:`Repository`}),(0,O.jsx)(x,{className:`size-3`})]})]})]})}A.displayName=`AiPackageInfo`;function j({label:e,value:t}){return(0,O.jsxs)(`div`,{className:`inline-flex items-baseline gap-1`,children:[(0,O.jsx)(r,{size:`xxs`,type:`discrete`,children:e}),(0,O.jsx)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:t})]})}var pe={expandAria:`Expand directory`,collapseAria:`Collapse directory`,statusLabels:{added:`A`,modified:`M`,removed:`D`,renamed:`R`}},me=t(n(),1),M={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)?d:[`md`,`mdx`,`txt`].includes(t)?S:C}function N({nodes:e,selectedId:t,onSelect:n,hideStatusLabels:r=!1,indent:a=14,className:o,strings:s}){let c=T(pe,s);return(0,O.jsx)(`div`,{className:i(`ai-file-tree--component`,`overflow-hidden rounded-lg border border-border/60 bg-card font-mono text-xs`,o),children:(0,O.jsx)(`ul`,{children:e.map(e=>(0,O.jsx)(P,{node:e,depth:0,selectedId:t,onSelect:n,hideStatusLabels:r,indent:a,strings:c},e.id))})})}N.displayName=`AiFileTree`;function P({node:e,depth:t,selectedId:n,onSelect:a,hideStatusLabels:o,indent:s,strings:c}){let[l,u]=(0,me.useState)(e.defaultExpanded??t<1),d=e.kind===`directory`,f=n===e.id,p=e.status,m=p?M[p]:void 0,h=e.icon??(d?l?ie:le:he(e.name)),g=()=>{d?u(e=>!e):a?.(e)},_=(0,O.jsxs)(O.Fragment,{children:[!!p&&!o&&(0,O.jsx)(`span`,{className:i(`inline-flex size-4 shrink-0 items-center justify-center rounded`,`text-[length:var(--text-xxs)] font-bold leading-none uppercase`,m?.pill),children:c.statusLabels[p]}),!!e.trailing&&(0,O.jsx)(r,{tag:`span`,size:`xxs`,type:`secondary`,className:`tabular-nums`,children:e.trailing})]});return(0,O.jsxs)(`li`,{children:[(0,O.jsxs)(`button`,{type:`button`,onClick:g,"aria-expanded":d?l:void 0,"aria-label":d?l?c.collapseAria:c.expandAria:void 0,className:i(`group relative flex w-full items-center gap-1.5 px-2 py-1 text-left`,`hover:bg-muted/40`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40`,f&&`bg-primary/10`,!!p&&`before:absolute before:left-0 before:top-0 before:h-full before:w-0.5`,m?.row,p===`removed`&&`text-muted-foreground/80`),style:{paddingLeft:8+t*s},children:[d?l?(0,O.jsx)(te,{className:`size-3.5 shrink-0 text-muted-foreground`}):(0,O.jsx)(ne,{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)(h,{className:i(`size-3.5 shrink-0`,d?`text-muted-foreground`:`text-muted-foreground/80`)}),(0,O.jsx)(`span`,{className:i(`flex-1 truncate`,p===`removed`&&`line-through`),children:e.name}),(0,O.jsx)(`span`,{className:`ml-auto flex items-center gap-1.5`,children:_})]}),d&&l&&!!e.children?.length&&(0,O.jsx)(`ul`,{children:e.children.map(e=>(0,O.jsx)(P,{node:e,depth:t+1,selectedId:n,onSelect:a,hideStatusLabels:o,indent:s,strings:c},e.id))})]})}var F=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}),I=`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}`,L=`pnpm install admin-ui-starter-kit
+pnpm add -D tailwindcss@^4 @tailwindcss/vite`;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)(v,{children:`Generating insights…`}),(0,O.jsx)(v,{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)(_,{name:`Atlas`,subtitle:`claude-4.7-1m`,status:`thinking`,icon:y}),(0,O.jsx)(_,{name:`Helios`,subtitle:`local · qwen-2.5-coder`,tone:`success`,status:`done`,variant:`card`,icon:b}),(0,O.jsx)(_,{name:`Nova`,subtitle:`offline`,tone:`neutral`,status:`offline`,icon:y})]})})}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)(p,{code:I,language:`tsx`,filename:`Counter.tsx`,showLineNumbers:!0}),(0,O.jsx)(p,{code:L,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)(u,{name:`quarterly-report.pdf`,meta:`2.4 MB · PDF`,kind:`document`,onOpen:()=>{},onRemove:()=>{}}),(0,O.jsx)(u,{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)(u,{name:`setup.sh`,meta:`Uploading… 60%`,kind:`code`,progress:.6}),(0,O.jsx)(u,{name:`readme.md`,meta:`Failed to upload`,kind:`document`,errored:!0,onRemove:()=>{}})]})})}function H(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(r,{children:[`The framework supports zero-config TypeScript out of the box`,(0,O.jsx)(k,{index:1,title:`Vite docs`,url:`https://vitejs.dev`}),`, and accepts arbitrary React components as plugins`,(0,O.jsx)(k,{index:2,title:`React reference`}),`, including compound components`,(0,O.jsx)(k,{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)(l,{sources:[{id:`a`,title:`Vite — Next-gen tooling`,publisher:`vitejs.dev`,url:`https://vitejs.dev`,faviconUrl:`https://vitejs.dev/logo.svg`},{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)(l,{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)(f,{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)(f,{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)(g,{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)(m,{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)(ee,{title:`Counter.tsx`,subtitle:`React component · 12 lines`,icon:S,copyText:I,onOpen:()=>{},onDownload:()=>{},children:(0,O.jsx)(p,{code:I,language:`tsx`,hideHeader:!0})})})}function J(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(N,{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)(A,{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)(h,{title:`Run npm install in the workspace?`,description:`The agent will execute pnpm install with the lockfile pinned to the current commit.`,icon:w,tone:`info`}),(0,O.jsx)(h,{title:`Delete 4 obsolete branches`,description:`release/0.4, feat/old-router, fix/legacy-style, chore/unused-deps`,tone:`destructive`}),(0,O.jsx)(h,{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\`;
+
+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: 'https://vitejs.dev/logo.svg',
+										},
+										{
+											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 F||$(`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)(o,{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)(s,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(c,{name:`AiShimmerExample`,source:Z,children:(0,O.jsx)(R,{})}),(0,O.jsx)(c,{name:`AiAgentExample`,source:Z,children:(0,O.jsx)(z,{})}),(0,O.jsx)(c,{name:`AiCodeBlockExample`,source:Z,children:(0,O.jsx)(B,{})}),(0,O.jsx)(c,{name:`AiAttachmentExample`,source:Z,children:(0,O.jsx)(V,{})}),(0,O.jsx)(c,{name:`AiInlineCitationExample`,source:Z,children:(0,O.jsx)(H,{})}),(0,O.jsx)(c,{name:`AiSourcesExample`,source:Z,children:(0,O.jsx)(U,{})}),(0,O.jsx)(c,{name:`AiReasoningExample`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(c,{name:`AiChainOfThoughtExample`,source:Z,children:(0,O.jsx)(G,{})}),(0,O.jsx)(c,{name:`AiTaskExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(c,{name:`AiArtifactExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(c,{name:`AiFileTreeExample`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(c,{name:`AiPackageInfoExample`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(c,{name:`AiConfirmationExample`,source:Z,children:(0,O.jsx)(X,{})})]}),(0,O.jsxs)(s,{title:`API`,id:`api`,children:[(0,O.jsx)(t.h4,{children:`AiAgent`}),(0,O.jsx)(D,{component:`AiAgent`}),(0,O.jsx)(t.h4,{children:`AiArtifact`}),(0,O.jsx)(D,{component:`AiArtifact`}),(0,O.jsx)(t.h4,{children:`AiAttachment`}),(0,O.jsx)(D,{component:`AiAttachment`}),(0,O.jsx)(t.h4,{children:`AiChainOfThought`}),(0,O.jsx)(D,{component:`AiChainOfThought`}),(0,O.jsx)(t.h4,{children:`AiCodeBlock`}),(0,O.jsx)(D,{component:`AiCodeBlock`}),(0,O.jsx)(t.h4,{children:`AiConfirmation`}),(0,O.jsx)(D,{component:`AiConfirmation`}),(0,O.jsx)(t.h4,{children:`AiFileTree`}),(0,O.jsx)(D,{component:`AiFileTree`}),(0,O.jsx)(t.h4,{children:`AiInlineCitation`}),(0,O.jsx)(D,{component:`AiInlineCitation`}),(0,O.jsx)(t.h4,{children:`AiPackageInfo`}),(0,O.jsx)(D,{component:`AiPackageInfo`}),(0,O.jsx)(t.h4,{children:`AiReasoning`}),(0,O.jsx)(D,{component:`AiReasoning`}),(0,O.jsx)(t.h4,{children:`AiShimmer`}),(0,O.jsx)(D,{component:`AiShimmer`}),(0,O.jsx)(t.h4,{children:`AiSources`}),(0,O.jsx)(D,{component:`AiSources`}),(0,O.jsx)(t.h4,{children:`AiTask`}),(0,O.jsx)(D,{component:`AiTask`})]})]})}function ge(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{ge as default};

package/dist/showcase/assets/ai-new-CgL5NeVs.js

@@ -0,0 +1,167 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,gr as a,hr as o,mr as s,t as c}from"./example-C6-_Sy6B.js";import{t as l}from"./chart-column-6Tn3WAT9.js";import{t as u}from"./chevron-down-x7TQsvYY.js";import{t as d}from"./chevron-right-CDDMIkYP.js";import{t as f}from"./cpu-D52NjUWq.js";import{t as p}from"./database-DeGR0hed.js";import{t as ee}from"./external-link-Bg-_8Uq7.js";import{t as te}from"./file-text-BIi71mZ1.js";import{t as m}from"./message-square-DGTAjNJG.js";import{t as ne}from"./quote-vjygm2-7.js";import{t as h}from"./sparkles-BEa1AgNq.js";import{n as g,r as _,t as v}from"./ai-tool-call-D9AsaWJF.js";import{D as y,E as re,a as b,n as ie}from"./index-B8DVXCmf.js";import{t as x}from"./props-table-CM_1cocj.js";import{t as ae}from"./icon-badge-Bcm8TlJi.js";import{t as S}from"./smart-card-7szg_qSt.js";import{t as C}from"./inline-stat-D0sE-A4C.js";import{a as oe,c as w,i as T,n as E,o as D,r as O,t as k,u as A}from"./item-CMRbW6s-.js";var j={title:`AI Confidence`,confidenceLabel:`Overall`,factorsLabel:`Contributing factors`},M=b();function N(e){return e>=.85?{label:`High`,variant:`success`}:e>=.6?{label:`Medium`,variant:`warning`}:{label:`Low`,variant:`error`}}function P({score:e,model:t,factors:n,className:o,strings:s}){let c=y(j,s),l=Math.round(e*100),{label:u,variant:d}=N(e),f=2*Math.PI*24,p=f-l/100*f;return(0,M.jsxs)(S,{icon:(0,M.jsx)(h,{className:`size-4`}),title:c.title,titleSuffix:!!t&&(0,M.jsx)(a,{variant:`secondary`,children:t}),className:i(`ai-confidence--component`,o),children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,M.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,M.jsxs)(`svg`,{width:`64`,height:`64`,viewBox:`0 0 64 64`,children:[(0,M.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,className:`text-muted/40`}),(0,M.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,strokeLinecap:`round`,strokeDasharray:f,strokeDashoffset:p,transform:`rotate(-90 32 32)`,className:i(d===`success`&&`text-success`,d===`warning`&&`text-success`,d===`error`&&`text-destructive`)})]}),(0,M.jsx)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center`,children:(0,M.jsxs)(r,{weight:`semibold`,className:`tabular-nums leading-none`,children:[l,`%`]})})]}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:c.confidenceLabel}),(0,M.jsx)(a,{variant:d,className:`mt-1`,children:u})]})]}),!!n&&n.length>0&&(0,M.jsxs)(`div`,{className:`mt-3 space-y-2`,children:[(0,M.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:c.factorsLabel}),n.map(e=>(0,M.jsxs)(`div`,{children:[(0,M.jsx)(C,{label:e.label,value:`${Math.round(e.score*100)}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,M.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,M.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${Math.round(e.score*100)}%`}})})]},e.label))]})]})}P.displayName=`AiConfidenceCard`;var F={title:`Try asking`,hint:`Tap a prompt to start`};function I({suggestions:e,onPick:t,className:n,strings:a}){let o=y(F,a);return(0,M.jsx)(S,{icon:(0,M.jsx)(h,{className:`size-4`}),title:o.title,description:o.hint,className:i(`ai-prompt-suggestions--component`,n),children:(0,M.jsx)(`div`,{className:`grid grid-cols-1 gap-2 sm:grid-cols-2`,children:e.map(e=>{let n=e.icon;return(0,M.jsxs)(`button`,{type:`button`,onClick:()=>t?.(e),className:i(`flex items-start gap-3 rounded-lg border border-border bg-card p-3 text-left transition-[border-color,background] duration-150`,`hover:border-foreground/20 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none`),children:[!!n&&(0,M.jsx)(ae,{icon:n,tone:`primary`,size:`sm`,shape:`square`}),(0,M.jsxs)(`div`,{className:`min-w-0`,children:[(0,M.jsx)(r,{weight:`semibold`,children:e.label}),!!e.description&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-0.5 line-clamp-2`,children:e.description})]})]},e.id)})})})}I.displayName=`AiPromptSuggestions`;var L={title:`Token usage`,input:`Input`,output:`Output`,total:`Total`,cost:`Estimated cost`};function R({model:e,inputTokens:t,outputTokens:n,cost:o,maxTokens:s,className:c,strings:l}){let u=y(L,l),d=t+n,p=s?Math.min(100,Math.round(d/s*100)):0;return(0,M.jsxs)(S,{icon:(0,M.jsx)(f,{className:`size-4`}),title:u.title,titleSuffix:!!e&&(0,M.jsx)(a,{variant:`secondary`,children:e}),className:i(`ai-token-usage--component`,c),children:[(0,M.jsx)(`div`,{className:`grid grid-cols-3 gap-2`,children:[{label:u.input,value:t},{label:u.output,value:n},{label:u.total,value:d}].map(e=>(0,M.jsxs)(`div`,{className:`rounded-md bg-muted/40 px-3 py-2`,children:[(0,M.jsx)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),(0,M.jsx)(r,{size:`lg`,weight:`semibold`,className:`tabular-nums`,children:e.value.toLocaleString()})]},e.label))}),!!s&&(0,M.jsxs)(`div`,{className:`mt-3`,children:[(0,M.jsx)(C,{label:`${d.toLocaleString()} / ${s.toLocaleString()}`,value:`${p}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,M.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,M.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${p}%`}})})]}),!!o&&(0,M.jsx)(C,{className:`mt-3 rounded-md bg-primary/5 px-3 py-2`,label:u.cost,value:o,mono:!0,labelClassName:`text-xs`,valueClassName:`text-sm font-bold`})]})}R.displayName=`AiTokenUsageCard`;var z={title:`Sources`,sourceCount:e=>e===1?`1 source`:`${e} sources`,expand:`Show sources`,collapse:`Hide sources`,visit:`Visit`,relevance:`Relevance`},B=t(n(),1);function V({sources:e,defaultExpanded:t=!1,maxCollapsedRows:n=0,className:a,strings:o}){let s=re(z,o),[c,l]=(0,B.useState)(t),f=c?e:e.slice(0,Math.max(0,n)),p=e.length-f.length;return(0,M.jsxs)(`div`,{className:i(`ai-citation--component`,`space-y-2`,a),children:[(0,M.jsxs)(`button`,{type:`button`,onClick:()=>l(e=>!e),className:i(`inline-flex items-center gap-1.5 rounded-md px-2 py-1 -mx-2`,`text-muted-foreground hover:text-foreground hover:bg-muted/40`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),"aria-expanded":c,"aria-label":c?s.collapse:s.expand,children:[(0,M.jsx)(ne,{className:`size-3.5`}),(0,M.jsxs)(r,{size:`xs`,weight:`medium`,children:[s.title,` · `,s.sourceCount(e.length)]}),c?(0,M.jsx)(u,{className:`size-3.5`}):(0,M.jsx)(d,{className:`size-3.5`})]}),(c||n>0)&&(0,M.jsxs)(D,{children:[f.map((e,t)=>(0,M.jsx)(H,{source:e,index:t+1,strings:s},e.id)),!c&&p>0&&(0,M.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`+`,p,` more`]})]})]})}V.displayName=`AiCitation`;function H({source:e,index:t,strings:n}){let a=typeof e.relevance==`number`?Math.round(Math.max(0,Math.min(1,e.relevance))*100):null,o=e.url?`a`:`span`,s=e.url?{href:e.url,target:`_blank`,rel:`noopener noreferrer`}:{};return(0,M.jsxs)(k,{variant:`outline`,size:`xs`,className:`items-start`,children:[(0,M.jsx)(w,{children:(0,M.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,M.jsxs)(O,{children:[(0,M.jsx)(A,{className:`truncate`,children:(0,M.jsxs)(o,{...s,className:i(`truncate`,e.url&&`hover:text-primary hover:underline`),children:[e.title,!!e.url&&(0,M.jsx)(ee,{className:`ml-1 inline size-3 align-baseline`})]})}),!!e.snippet&&(0,M.jsx)(T,{clamp:2,children:e.snippet}),(e.publisher||e.publishedAt)&&(0,M.jsxs)(oe,{className:`mt-1 justify-start gap-1.5`,children:[!!e.publisher&&(0,M.jsx)(r,{size:`xxs`,type:`discrete`,children:e.publisher}),!!e.publisher&&!!e.publishedAt&&(0,M.jsx)(r,{size:`xxs`,type:`discrete`,children:`·`}),!!e.publishedAt&&(0,M.jsx)(r,{size:`xxs`,type:`discrete`,className:`tabular-nums`,children:e.publishedAt})]})]}),a!==null&&(0,M.jsxs)(E,{className:`w-16 flex-col items-end gap-0.5`,children:[(0,M.jsxs)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:[a,`%`]}),(0,M.jsx)(`div`,{className:`h-1 w-full overflow-hidden rounded-full bg-muted`,"aria-label":n.relevance,children:(0,M.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${a}%`}})})]})]})}var U=e({AiCitationExample:()=>Y,AiConfidenceCardExample:()=>W,AiFeedbackExample:()=>X,AiMessageBubbleExample:()=>q,AiPromptSuggestionsExample:()=>G,AiTokenUsageCardExample:()=>K,AiToolCallExample:()=>J});function W(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(P,{score:.84,model:`Claude 4.7`,factors:[{label:`Source quality`,score:.92},{label:`Context coverage`,score:.78},{label:`Prompt specificity`,score:.81}]})})}function G(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(I,{suggestions:[{id:`kpi`,label:`Summarise this month KPIs`,description:`Get a digest of revenue, orders, refunds.`,icon:l},{id:`invoice`,label:`Draft an overdue reminder`,description:`Polite + firm copy for unpaid invoices.`,icon:te},{id:`lookup`,label:`Find similar customers`,description:`Pattern-match by spend and category.`,icon:ie},{id:`help`,label:`Answer a refund question`,description:`Explain refund policy in plain English.`,icon:m}],onPick:()=>{}})})}function K(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(R,{model:`Claude 4.7`,inputTokens:3240,outputTokens:812,cost:`$0.082`,maxTokens:2e4})})}function q(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,M.jsx)(g,{role:`user`,authorName:`You`,timestamp:`14:31`,children:`Can you summarise yesterday's bookings and flag anything unusual?`}),(0,M.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 J(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,M.jsx)(v,{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,M.jsx)(v,{name:`fetch_customer`,status:`running`,durationMs:120,icon:p}),(0,M.jsx)(v,{name:`send_email`,status:`error`,durationMs:2150,args:`{ to: 'maria@example.com', subject: '…' }`,error:`SMTP timeout after 2.0s. Retry suggested.`})]})})}function Y(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(V,{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 X(){let[e,t]=(0,B.useState)(null);return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-border bg-card p-4`,children:(0,M.jsx)(_,{value:e,onVote:t})})})}var 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 U||$(`Examples`,!1),Y||$(`Examples.AiCitationExample`,!0),W||$(`Examples.AiConfidenceCardExample`,!0),X||$(`Examples.AiFeedbackExample`,!0),q||$(`Examples.AiMessageBubbleExample`,!0),G||$(`Examples.AiPromptSuggestionsExample`,!0),K||$(`Examples.AiTokenUsageCardExample`,!0),J||$(`Examples.AiToolCallExample`,!0),(0,M.jsxs)(o,{title:`Composed · AI (extras)`,description:`Confidence dial, prompt suggestions, token usage card, message bubble, tool call, citation, feedback.`,layer:`composed`,status:`ready`,children:[(0,M.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,M.jsx)(c,{name:`AiConfidenceCardExample`,source:Z,children:(0,M.jsx)(W,{})}),(0,M.jsx)(c,{name:`AiPromptSuggestionsExample`,source:Z,children:(0,M.jsx)(G,{})}),(0,M.jsx)(c,{name:`AiTokenUsageCardExample`,source:Z,children:(0,M.jsx)(K,{})}),(0,M.jsx)(c,{name:`AiMessageBubbleExample`,source:Z,children:(0,M.jsx)(q,{})}),(0,M.jsx)(c,{name:`AiToolCallExample`,source:Z,children:(0,M.jsx)(J,{})}),(0,M.jsx)(c,{name:`AiCitationExample`,source:Z,children:(0,M.jsx)(Y,{})}),(0,M.jsx)(c,{name:`AiFeedbackExample`,source:Z,children:(0,M.jsx)(X,{})})]}),(0,M.jsxs)(s,{title:`API`,id:`api`,children:[(0,M.jsx)(t.h4,{children:`AiCitation`}),(0,M.jsx)(x,{component:`AiCitation`}),(0,M.jsx)(t.h4,{children:`AiConfidenceCard`}),(0,M.jsx)(x,{component:`AiConfidenceCard`}),(0,M.jsx)(t.h4,{children:`AiFeedback`}),(0,M.jsx)(x,{component:`AiFeedback`}),(0,M.jsx)(t.h4,{children:`AiMessageBubble`}),(0,M.jsx)(x,{component:`AiMessageBubble`}),(0,M.jsx)(t.h4,{children:`AiPromptSuggestions`}),(0,M.jsx)(x,{component:`AiPromptSuggestions`}),(0,M.jsx)(t.h4,{children:`AiTokenUsageCard`}),(0,M.jsx)(x,{component:`AiTokenUsageCard`}),(0,M.jsx)(t.h4,{children:`AiToolCall`}),(0,M.jsx)(x,{component:`AiToolCall`})]})]})}function se(e={}){let{wrapper:t}=e.components||{};return t?(0,M.jsx)(t,{...e,children:(0,M.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};

package/dist/showcase/assets/ai-tool-call-D9AsaWJF.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Cr as n,Or as r,Tr as i,gr as a,kr as o,r as s}from"./example-C6-_Sy6B.js";import{t as c}from"./bot-Bcx5mNAQ.js";import{t as l}from"./chevron-down-x7TQsvYY.js";import{t as u}from"./chevron-right-CDDMIkYP.js";import{t as d}from"./circle-alert-DJevf3tT.js";import{t as f}from"./circle-dot-BEVVQjgN.js";import{t as p}from"./rotate-ccw-B4Wi4ws7.js";import{t as m}from"./user-CGcV8Ppb.js";import{t as h}from"./wrench-1Ra9xb3d.js";import{D as g,a as _,r as v}from"./index-B8DVXCmf.js";import{t as y}from"./icon-badge-Bcm8TlJi.js";import{t as b}from"./textarea-CV5gNzXf.js";var x=v(`thumbs-down`,[[`path`,{d:`M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z`,key:`m61m77`}],[`path`,{d:`M17 14V2`,key:`8ymqnk`}]]),S=v(`thumbs-up`,[[`path`,{d:`M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z`,key:`emmmcr`}],[`path`,{d:`M7 10v12`,key:`1qc93n`}]]),C=e(t(),1),w={prompt:`Was this helpful?`,thumbsUpAria:`Mark as helpful`,thumbsDownAria:`Mark as not helpful`,commentPlaceholder:`Tell us more (optional)`,submit:`Send feedback`,thanks:`Thanks for your feedback.`},T=_();function E({value:e,onVote:t,onSubmitComment:r,allowComment:a=!0,submitted:o=!1,className:c,strings:l}){let u=g(w,l),[d,f]=(0,C.useState)(null),[p,m]=(0,C.useState)(``),h=e??d,_=n=>{let r=h===n?null:n;e===void 0&&f(r),t?.(r)};return o?(0,T.jsxs)(`div`,{className:i(`ai-feedback--component`,`inline-flex items-center gap-2 rounded-full bg-success/10 px-3 py-1.5`,c),children:[(0,T.jsx)(S,{className:`size-3.5 text-success`}),(0,T.jsx)(n,{size:`xs`,type:`success`,weight:`medium`,children:u.thanks})]}):(0,T.jsxs)(`div`,{className:i(`inline-flex flex-col gap-2`,c),children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsx)(n,{size:`xs`,type:`secondary`,children:u.prompt}),(0,T.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:h===`up`?`solid`:`ghost`,size:`icon-xs`,"aria-label":u.thumbsUpAria,"aria-pressed":h===`up`,onClick:()=>_(`up`),className:i(h===`up`&&`text-success bg-success/15 hover:bg-success/20`),children:(0,T.jsx)(S,{className:`size-3.5`})}),(0,T.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:h===`down`?`solid`:`ghost`,size:`icon-xs`,"aria-label":u.thumbsDownAria,"aria-pressed":h===`down`,onClick:()=>_(`down`),className:i(h===`down`&&`text-destructive bg-destructive/15 hover:bg-destructive/20`),children:(0,T.jsx)(x,{className:`size-3.5`})})]}),!!a&&!!h&&(0,T.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,T.jsx)(b,{value:p,onChange:e=>m(e.target.value),placeholder:u.commentPlaceholder,minRows:2}),(0,T.jsx)(`div`,{className:`flex justify-end`,children:(0,T.jsx)(s,{type:`button`,onClick:()=>{r?.(p,h),m(``)},disabled:!p.trim(),children:u.submit})})]})]})}E.displayName=`AiFeedback`;var D={copyAria:`Copy message`,copied:`Copied`,regenerateAria:`Regenerate response`},O={assistant:{wrap:`flex-row`,avatar:`bg-primary/15 text-primary`,bubble:`bg-card border border-border/60`},user:{wrap:`flex-row-reverse text-right`,avatar:`bg-muted text-foreground`,bubble:`bg-primary text-primary-foreground`},system:{wrap:`flex-row`,avatar:`bg-muted text-muted-foreground`,bubble:`bg-muted/40 border border-dashed border-border/60`}},k={assistant:c,user:m,system:c};function A({role:e=`assistant`,avatar:t,avatarLabel:r,authorName:a,timestamp:c,children:l,plainText:u,loading:d=!1,onCopy:f,onRegenerate:m,className:h,strings:_}){let v=g(D,_),[y,b]=(0,C.useState)(!1),x=O[e],S=k[e],w=()=>{let e=u??(typeof l==`string`?l:``);e&&typeof navigator<`u`&&navigator.clipboard&&navigator.clipboard.writeText(e),b(!0),f?.(),window.setTimeout(()=>b(!1),1500)},E=t??(0,T.jsx)(`span`,{"aria-label":r,className:i(`inline-flex size-7 shrink-0 items-center justify-center rounded-full`,x.avatar),children:(0,T.jsx)(S,{className:`size-3.5`})});return(0,T.jsxs)(`div`,{className:i(`ai-message-bubble--component`,`flex w-full items-start gap-2`,x.wrap,h),children:[E,(0,T.jsxs)(`div`,{className:`flex max-w-[80%] flex-col gap-1`,children:[(a||c)&&(0,T.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[!!a&&(0,T.jsx)(n,{size:`xs`,weight:`medium`,children:a}),!!c&&(0,T.jsx)(n,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:c})]}),(0,T.jsx)(`div`,{className:i(`rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed`,x.bubble,d&&`animate-pulse`),children:l}),(f!==void 0||u||m)&&e===`assistant`&&(0,T.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,T.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"aria-label":v.copyAria,onClick:w,children:(0,T.jsx)(o,{className:`size-3.5`})}),y&&(0,T.jsx)(n,{size:`xxs`,type:`success`,children:v.copied}),!!m&&(0,T.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"aria-label":v.regenerateAria,onClick:m,children:(0,T.jsx)(p,{className:`size-3.5`})})]})]})]})}A.displayName=`AiMessageBubble`;var j={pending:`Queued`,running:`Running`,success:`Success`,error:`Failed`,expand:`Show details`,collapse:`Hide details`,args:`Arguments`,result:`Result`,durationLabel:`Took`},M={pending:{variant:`secondary`,icon:f},running:{variant:`primary`,icon:r},success:{variant:`success`},error:{variant:`error`,icon:d}};function N(e){return e<1e3?`${Math.round(e)}ms`:`${(e/1e3).toFixed(+(e<1e4))}s`}function P({name:e,status:t,icon:r=h,args:o,result:s,error:c,durationMs:d,defaultExpanded:f=!1,className:p,strings:m}){let _=g(j,m),[v,b]=(0,C.useState)(f),x={pending:_.pending,running:_.running,success:_.success,error:_.error},S=M[t].icon,w=!!(o||s||c);return(0,T.jsxs)(`div`,{className:i(`ai-tool-call--component`,`overflow-hidden rounded-lg border border-border/60 bg-card`,t===`error`&&`border-destructive/40 bg-destructive/5`,p),children:[(0,T.jsxs)(`button`,{type:`button`,onClick:()=>w&&b(e=>!e),className:i(`flex w-full items-center gap-2 px-3 py-2 text-left`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,w?`cursor-pointer hover:bg-muted/40`:`cursor-default`),"aria-expanded":w?v:void 0,"aria-label":w?v?_.collapse:_.expand:void 0,children:[(0,T.jsx)(y,{icon:r,tone:`muted`,size:`sm`,shape:`square`}),(0,T.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,T.jsx)(n,{weight:`medium`,className:`truncate font-mono`,children:e})}),(0,T.jsxs)(a,{variant:M[t].variant,className:`gap-1`,children:[!!S&&(0,T.jsx)(S,{className:i(`size-3`,t===`running`&&`animate-spin`)}),x[t]]}),!!d&&(0,T.jsxs)(n,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:[_.durationLabel,` `,N(d)]}),w&&(v?(0,T.jsx)(l,{className:`size-3.5 text-muted-foreground`}):(0,T.jsx)(u,{className:`size-3.5 text-muted-foreground`}))]}),!!v&&w&&(0,T.jsxs)(`div`,{className:`border-t border-border/60 bg-muted/20 px-3 py-2 space-y-2`,children:[!!o&&(0,T.jsx)(F,{label:_.args,children:o}),t===`error`&&c?(0,T.jsx)(F,{label:_.error,tone:`error`,children:c}):!!s&&(0,T.jsx)(F,{label:_.result,children:s})]})]})}P.displayName=`AiToolCall`;function F({label:e,children:t,tone:r=`neutral`}){return(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(n,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e}),(0,T.jsx)(`pre`,{className:i(`overflow-x-auto rounded-md bg-card px-2.5 py-2 font-mono text-xs leading-relaxed`,r===`error`&&`text-destructive bg-destructive/5`),children:t})]})}export{A as n,E as r,P as t};