admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -0,0 +1,387 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.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-CUAlhcSX.js";import{t as y}from"./bot-5Ro5Dayc.js";import{t as te}from"./chevron-down-CSn8HCwf.js";import{t as ne}from"./chevron-right-d-umkBru.js";import{t as re}from"./code-xml-SoYTMEdm.js";import{t as ie}from"./cpu-DjJeD_0Z.js";import{t as b}from"./external-link-DuJlM_H4.js";import{t as x}from"./file-text-D3AE37vP.js";import{t as S}from"./file-Dc5UHkfE.js";import{t as C}from"./folder-open-Dp0sceCi.js";import{t as ae}from"./globe-BJHI134i.js";import{t as oe}from"./package-0ZgMoFm1.js";import{t as se}from"./wrench-gaXnvr_b.js";import{O as ce,a as w,k as T,n as E,s as le}from"./index-Cz4UGUT2.js";import{t as D}from"./props-table-BR-KjRNe.js";var ue=w(`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 fe(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:i,className:a,strings:s}){let c=ce(de,s),l=fe(c.openAria,{n:e,title:t??``}),u=t?`${c.sourcePrefix} ${e}: ${t}`:`${c.sourcePrefix} ${e}`,d=E(`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`,a);return n?(0,O.jsx)(`a`,{href:n,target:`_blank`,rel:`noopener noreferrer`,title:u,"aria-label":l,className:E(`ai-inline-citation--component`,d),children:(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`leading-none`,children:e})}):i?(0,O.jsx)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:i,title:u,"aria-label":l,className:E(`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:E(`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 pe={versionLabel:`Version`,licenseLabel:`License`,publishedLabel:`Published`,homepageAria:`Open homepage`,repositoryAria:`Open repository`,weeklyDownloadsLabel:`Weekly downloads`};function A({name:e,version:t,description:n,license:i,publishedAt:a,homepage:o,repository:s,weeklyDownloads:l,keywords:u,onSelect:d,className:f,strings:p}){let m=T(pe,p);return(0,O.jsxs)(d?`button`:`div`,{...d?{type:`button`,onClick:d}:{},className:E(`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)(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)(c,{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}),(i||a||l!==void 0)&&(0,O.jsxs)(`div`,{className:`mt-2 flex flex-wrap items-center gap-x-3 gap-y-1`,children:[!!i&&(0,O.jsx)(j,{label:m.licenseLabel,value:i}),!!a&&(0,O.jsx)(j,{label:m.publishedLabel,value:a}),l!==void 0&&(0,O.jsx)(j,{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)(c,{variant:`secondary`,children:e},e))})]})]}),(o||s)&&(0,O.jsxs)(`div`,{className:`flex items-center gap-2 border-t border-border/60 bg-muted/20 px-3.5 py-2`,children:[!!o&&(0,O.jsxs)(`a`,{href:o,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)(ae,{className:`size-3.5`}),(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,children:`Homepage`}),(0,O.jsx)(b,{className:`size-3`})]}),!!o&&!!s&&(0,O.jsx)(`span`,{"aria-hidden":!0,className:`text-muted-foreground/40`,children:`·`}),!!s&&(0,O.jsxs)(`a`,{href:s,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)(re,{className:`size-3.5`}),(0,O.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,children:`Repository`}),(0,O.jsx)(b,{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 me={expandAria:`Expand directory`,collapseAria:`Collapse directory`,statusLabels:{added:`A`,modified:`M`,removed:`D`,renamed:`R`}},he=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 N(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)?x:S}function P({nodes:e,selectedId:t,onSelect:n,hideStatusLabels:r=!1,indent:i=14,className:a,strings:o}){let s=T(me,o);return(0,O.jsx)(`div`,{className:E(`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:i,hideStatusLabels:a,indent:s,strings:c}){let[l,u]=(0,he.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?C:ue:N(e.name)),g=()=>{d?u(e=>!e):i?.(e)},_=(0,O.jsxs)(O.Fragment,{children:[!!p&&!a&&(0,O.jsx)(`span`,{className:E(`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)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:g,"aria-expanded":d?l:void 0,"aria-label":d?l?c.collapseAria:c.expandAria:void 0,className:E(`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`,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:E(`size-3.5 shrink-0`,d?`text-muted-foreground`:`text-muted-foreground/80`)}),(0,O.jsx)(`span`,{className:E(`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)(F,{node:e,depth:t+1,selectedId:n,onSelect:i,hideStatusLabels:a,indent:s,strings:c},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)(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:ie}),(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:L,language:`tsx`,filename:`Counter.tsx`,showLineNumbers:!0}),(0,O.jsx)(p,{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)(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:_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)(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:x,copyText:L,onOpen:()=>{},onDownload:()=>{},children:(0,O.jsx)(p,{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)(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:se,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\`;
+
+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)(i,{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)(a,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(s,{name:`AiShimmerExample`,source:Z,children:(0,O.jsx)(R,{})}),(0,O.jsx)(s,{name:`AiAgentExample`,source:Z,children:(0,O.jsx)(z,{})}),(0,O.jsx)(s,{name:`AiCodeBlockExample`,source:Z,children:(0,O.jsx)(B,{})}),(0,O.jsx)(s,{name:`AiAttachmentExample`,source:Z,children:(0,O.jsx)(V,{})}),(0,O.jsx)(s,{name:`AiInlineCitationExample`,source:Z,children:(0,O.jsx)(H,{})}),(0,O.jsx)(s,{name:`AiSourcesExample`,source:Z,children:(0,O.jsx)(U,{})}),(0,O.jsx)(s,{name:`AiReasoningExample`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(s,{name:`AiChainOfThoughtExample`,source:Z,children:(0,O.jsx)(G,{})}),(0,O.jsx)(s,{name:`AiTaskExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(s,{name:`AiArtifactExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(s,{name:`AiFileTreeExample`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(s,{name:`AiPackageInfoExample`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(s,{name:`AiConfirmationExample`,source:Z,children:(0,O.jsx)(X,{})})]}),(0,O.jsxs)(a,{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 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-new-PG02TWQq.js

@@ -0,0 +1,167 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./chart-column-DjAyOA-t.js";import{t as u}from"./chevron-down-CSn8HCwf.js";import{t as d}from"./chevron-right-d-umkBru.js";import{t as f}from"./cpu-DjJeD_0Z.js";import{t as p}from"./database-BVwSMeGM.js";import{t as m}from"./external-link-DuJlM_H4.js";import{t as ee}from"./file-text-D3AE37vP.js";import{t as te}from"./message-square-B0RnrJV6.js";import{t as ne}from"./quote-CN-Sodsj.js";import{t as h}from"./sparkles-DFJmoAFP.js";import{n as g,r as _,t as v}from"./ai-tool-call-BaJx1rR4.js";import{O as re,i as ie,k as y,n as b,s as ae}from"./index-Cz4UGUT2.js";import{t as x}from"./props-table-BR-KjRNe.js";import{t as oe}from"./icon-badge-CxvxB8Vd.js";import{t as S}from"./smart-card-B4P_C0nk.js";import{t as C}from"./inline-stat-DqI70yoJ.js";import{a as w,c as T,i as E,n as D,o as O,r as k,t as A,u as j}from"./item-CbiuwbAN.js";var M={title:`AI Confidence`,confidenceLabel:`Overall`,factorsLabel:`Contributing factors`},N=ae();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:i,strings:a}){let o=y(M,a),s=Math.round(e*100),{label:l,variant:u}=P(e),d=2*Math.PI*24,f=d-s/100*d;return(0,N.jsxs)(S,{icon:(0,N.jsx)(h,{className:`size-4`}),title:o.title,titleSuffix:!!t&&(0,N.jsx)(c,{variant:`secondary`,children:t}),className:b(`ai-confidence--component`,i),children:[(0,N.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,N.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,N.jsxs)(`svg`,{width:`64`,height:`64`,viewBox:`0 0 64 64`,children:[(0,N.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,className:`text-muted/40`}),(0,N.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:b(u===`success`&&`text-success`,u===`warning`&&`text-warning`,u===`error`&&`text-destructive`)})]}),(0,N.jsx)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center`,children:(0,N.jsxs)(r,{weight:`semibold`,className:`tabular-nums leading-none`,children:[s,`%`]})})]}),(0,N.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,N.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:o.confidenceLabel}),(0,N.jsx)(c,{variant:u,className:`mt-1`,children:l})]})]}),!!n&&n.length>0&&(0,N.jsxs)(`div`,{className:`mt-3 space-y-2`,children:[(0,N.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:o.factorsLabel}),n.map(e=>(0,N.jsxs)(`div`,{children:[(0,N.jsx)(C,{label:e.label,value:`${Math.round(e.score*100)}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,N.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,N.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=y(I,r);return(0,N.jsx)(S,{icon:(0,N.jsx)(h,{className:`size-4`}),title:i.title,description:i.hint,className:b(`ai-prompt-suggestions--component`,n),children:(0,N.jsx)(`div`,{className:`grid grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-2`,children:e.map(e=>{let n=e.icon;return(0,N.jsxs)(A,{variant:`outline`,render:(0,N.jsx)(`button`,{type:`button`,onClick:()=>t?.(e)}),className:b(`ai-prompt-suggestions--item h-full items-start transition-[border-color,background] duration-150`,`hover:border-foreground/20 hover:bg-muted/40`),children:[!!n&&(0,N.jsx)(T,{children:(0,N.jsx)(oe,{icon:n,tone:`primary`,size:`sm`,shape:`square`})}),(0,N.jsxs)(k,{className:`min-w-0`,children:[(0,N.jsx)(j,{children:e.label}),!!e.description&&(0,N.jsx)(E,{children:e.description})]})]},e.id)})})})}L.displayName=`AiPromptSuggestions`;var R={title:`Token usage`,input:`Input`,output:`Output`,total:`Total`,cost:`Estimated cost`};function z({model:e,inputTokens:t,outputTokens:n,cost:i,maxTokens:a,className:o,strings:s}){let l=y(R,s),u=t+n,d=a?Math.min(100,Math.round(u/a*100)):0;return(0,N.jsxs)(S,{icon:(0,N.jsx)(f,{className:`size-4`}),title:l.title,titleSuffix:!!e&&(0,N.jsx)(c,{variant:`secondary`,children:e}),className:b(`ai-token-usage--component`,o),children:[(0,N.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,N.jsxs)(`div`,{className:`rounded-md bg-muted/40 px-3 py-2`,children:[(0,N.jsx)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),(0,N.jsx)(r,{size:`lg`,weight:`semibold`,className:`tabular-nums`,children:e.value.toLocaleString()})]},e.label))}),!!a&&(0,N.jsxs)(`div`,{className:`mt-3`,children:[(0,N.jsx)(C,{label:`${u.toLocaleString()} / ${a.toLocaleString()}`,value:`${d}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,N.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,N.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${d}%`}})})]}),!!i&&(0,N.jsx)(C,{className:`mt-3 rounded-md bg-primary/5 px-3 py-2`,label:l.cost,value:i,mono:!0,labelClassName:`text-xs`,valueClassName:`text-sm font-bold`})]})}z.displayName=`AiTokenUsageCard`;var B={title:`Sources`,sourceCount:e=>e===1?`1 source`:`${e} sources`,expand:`Show sources`,collapse:`Hide sources`,visit:`Visit`,relevance:`Relevance`},V=t(n(),1);function H({sources:e,defaultExpanded:t=!1,maxCollapsedRows:n=0,className:i,strings:a}){let s=re(B,a),[c,l]=(0,V.useState)(t),f=c?e:e.slice(0,Math.max(0,n)),p=e.length-f.length;return(0,N.jsxs)(`div`,{className:b(`ai-citation--component`,`space-y-2`,i),children:[(0,N.jsxs)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:()=>l(e=>!e),className:b(`ai-citation--trigger h-auto -mx-2 justify-start gap-1.5 rounded-md px-2 py-1`,`text-muted-foreground hover:text-foreground hover:bg-muted/40`),"aria-expanded":c,"aria-label":c?s.collapse:s.expand,children:[(0,N.jsx)(ne,{className:`size-3.5`}),(0,N.jsxs)(r,{size:`xs`,weight:`medium`,children:[s.title,` · `,s.sourceCount(e.length)]}),c?(0,N.jsx)(u,{className:`size-3.5`}):(0,N.jsx)(d,{className:`size-3.5`})]}),(c||n>0)&&(0,N.jsxs)(O,{children:[f.map((e,t)=>(0,N.jsx)(U,{source:e,index:t+1,strings:s},e.id)),!c&&p>0&&(0,N.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`+`,p,` more`]})]})]})}H.displayName=`AiCitation`;function U({source:e,index:t,strings:n}){let i=typeof e.relevance==`number`?Math.round(Math.max(0,Math.min(1,e.relevance))*100):null,a=e.url?`a`:`span`,o=e.url?{href:e.url,target:`_blank`,rel:`noopener noreferrer`}:{};return(0,N.jsxs)(A,{variant:`outline`,size:`xs`,className:`items-start`,children:[(0,N.jsx)(T,{children:(0,N.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,N.jsxs)(k,{children:[(0,N.jsx)(j,{className:`truncate`,children:(0,N.jsxs)(a,{...o,className:b(`truncate`,e.url&&`hover:text-primary hover:underline`),children:[e.title,!!e.url&&(0,N.jsx)(m,{className:`ml-1 inline size-3 align-baseline`})]})}),!!e.snippet&&(0,N.jsx)(E,{clamp:2,children:e.snippet}),(e.publisher||e.publishedAt)&&(0,N.jsxs)(w,{className:`mt-1 justify-start gap-1.5`,children:[!!e.publisher&&(0,N.jsx)(r,{size:`xxs`,type:`discrete`,children:e.publisher}),!!e.publisher&&!!e.publishedAt&&(0,N.jsx)(r,{size:`xxs`,type:`discrete`,children:`·`}),!!e.publishedAt&&(0,N.jsx)(r,{size:`xxs`,type:`discrete`,className:`tabular-nums`,children:e.publishedAt})]})]}),i!==null&&(0,N.jsxs)(D,{className:`w-16 flex-col items-end gap-0.5`,children:[(0,N.jsxs)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:[i,`%`]}),(0,N.jsx)(`div`,{className:`h-1 w-full overflow-hidden rounded-full bg-muted`,"aria-label":n.relevance,children:(0,N.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${i}%`}})})]})]})}var se=e({AiCitationExample:()=>Y,AiConfidenceCardExample:()=>W,AiFeedbackExample:()=>X,AiMessageBubbleExample:()=>q,AiPromptSuggestionsExample:()=>G,AiTokenUsageCardExample:()=>K,AiToolCallExample:()=>J});function W(){return(0,N.jsx)(N.Fragment,{children:(0,N.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 G(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(L,{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:ee},{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:te}],onPick:()=>{}})})}function K(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(z,{model:`Claude 4.7`,inputTokens:3240,outputTokens:812,cost:`$0.082`,maxTokens:2e4})})}function q(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,N.jsx)(g,{role:`user`,authorName:`You`,timestamp:`14:31`,children:`Can you summarise yesterday's bookings and flag anything unusual?`}),(0,N.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,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,N.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,N.jsx)(v,{name:`fetch_customer`,status:`running`,durationMs:120,icon:p}),(0,N.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,N.jsx)(N.Fragment,{children:(0,N.jsx)(H,{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,V.useState)(null);return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-border bg-card p-4`,children:(0,N.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 se||$(`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,N.jsxs)(i,{title:`Composed · AI (extras)`,description:`Confidence dial, prompt suggestions, token usage card, message bubble, tool call, citation, feedback.`,layer:`composed`,status:`ready`,children:[(0,N.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,N.jsx)(s,{name:`AiConfidenceCardExample`,source:Z,children:(0,N.jsx)(W,{})}),(0,N.jsx)(s,{name:`AiPromptSuggestionsExample`,source:Z,children:(0,N.jsx)(G,{})}),(0,N.jsx)(s,{name:`AiTokenUsageCardExample`,source:Z,children:(0,N.jsx)(K,{})}),(0,N.jsx)(s,{name:`AiMessageBubbleExample`,source:Z,children:(0,N.jsx)(q,{})}),(0,N.jsx)(s,{name:`AiToolCallExample`,source:Z,children:(0,N.jsx)(J,{})}),(0,N.jsx)(s,{name:`AiCitationExample`,source:Z,children:(0,N.jsx)(Y,{})}),(0,N.jsx)(s,{name:`AiFeedbackExample`,source:Z,children:(0,N.jsx)(X,{})})]}),(0,N.jsxs)(a,{title:`API`,id:`api`,children:[(0,N.jsx)(t.h4,{children:`AiCitation`}),(0,N.jsx)(x,{component:`AiCitation`}),(0,N.jsx)(t.h4,{children:`AiConfidenceCard`}),(0,N.jsx)(x,{component:`AiConfidenceCard`}),(0,N.jsx)(t.h4,{children:`AiFeedback`}),(0,N.jsx)(x,{component:`AiFeedback`}),(0,N.jsx)(t.h4,{children:`AiMessageBubble`}),(0,N.jsx)(x,{component:`AiMessageBubble`}),(0,N.jsx)(t.h4,{children:`AiPromptSuggestions`}),(0,N.jsx)(x,{component:`AiPromptSuggestions`}),(0,N.jsx)(t.h4,{children:`AiTokenUsageCard`}),(0,N.jsx)(x,{component:`AiTokenUsageCard`}),(0,N.jsx)(t.h4,{children:`AiToolCall`}),(0,N.jsx)(x,{component:`AiToolCall`})]})]})}function ce(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.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{ce as default};

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

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Ar as n,Er as r,kr as i,r as a,yr as o}from"./example-BIrQab7K.js";import{t as s}from"./bot-5Ro5Dayc.js";import{t as c}from"./chevron-down-CSn8HCwf.js";import{t as l}from"./chevron-right-d-umkBru.js";import{t as u}from"./circle-alert-ysbx8rsZ.js";import{t as d}from"./circle-dot-CvoDXS-W.js";import{t as f}from"./rotate-ccw-7aUlKQpX.js";import{t as p}from"./user-Bqmz8M16.js";import{t as m}from"./wrench-gaXnvr_b.js";import{a as h,k as g,n as _,s as v}from"./index-Cz4UGUT2.js";import{t as y}from"./icon-badge-CxvxB8Vd.js";import{t as b}from"./textarea-BGHGV17m.js";var x=h(`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=h(`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=v();function E({value:e,onVote:t,onSubmitComment:n,allowComment:i=!0,submitted:o=!1,className:s,strings:c}){let l=g(w,c),[u,d]=(0,C.useState)(null),[f,p]=(0,C.useState)(``),m=e??u,h=n=>{let r=m===n?null:n;e===void 0&&d(r),t?.(r)};return o?(0,T.jsxs)(`div`,{className:_(`ai-feedback--component`,`inline-flex items-center gap-2 rounded-full bg-success/10 px-3 py-1.5`,s),children:[(0,T.jsx)(S,{className:`size-3.5 text-success`}),(0,T.jsx)(r,{size:`xs`,type:`success`,weight:`medium`,children:l.thanks})]}):(0,T.jsxs)(`div`,{className:_(`inline-flex flex-col gap-2`,s),children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:l.prompt}),(0,T.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:m===`up`?`solid`:`ghost`,size:`icon-xs`,"aria-label":l.thumbsUpAria,"aria-pressed":m===`up`,onClick:()=>h(`up`),className:_(m===`up`&&`text-success bg-success/15 hover:bg-success/20`),children:(0,T.jsx)(S,{className:`size-3.5`})}),(0,T.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:m===`down`?`solid`:`ghost`,size:`icon-xs`,"aria-label":l.thumbsDownAria,"aria-pressed":m===`down`,onClick:()=>h(`down`),className:_(m===`down`&&`text-destructive bg-destructive/15 hover:bg-destructive/20`),children:(0,T.jsx)(x,{className:`size-3.5`})})]}),!!i&&!!m&&(0,T.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,T.jsx)(b,{value:f,onChange:e=>p(e.target.value),placeholder:l.commentPlaceholder,minRows:2}),(0,T.jsx)(`div`,{className:`flex justify-end`,children:(0,T.jsx)(a,{type:`button`,onClick:()=>{n?.(f,m),p(``)},disabled:!f.trim(),children:l.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:s,user:p,system:s};function A({role:e=`assistant`,avatar:t,avatarLabel:i,authorName:o,timestamp:s,children:c,plainText:l,loading:u=!1,onCopy:d,onRegenerate:p,className:m,strings:h}){let v=g(D,h),[y,b]=(0,C.useState)(!1),x=O[e],S=k[e],w=()=>{let e=l??(typeof c==`string`?c:``);e&&typeof navigator<`u`&&navigator.clipboard&&navigator.clipboard.writeText(e),b(!0),d?.(),window.setTimeout(()=>b(!1),1500)},E=t??(0,T.jsx)(`span`,{"aria-label":i,className:_(`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:_(`ai-message-bubble--component`,`flex w-full items-start gap-2`,x.wrap,m),children:[E,(0,T.jsxs)(`div`,{className:`flex max-w-[80%] flex-col gap-1`,children:[(o||s)&&(0,T.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[!!o&&(0,T.jsx)(r,{size:`xs`,weight:`medium`,children:o}),!!s&&(0,T.jsx)(r,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:s})]}),(0,T.jsx)(`div`,{className:_(`rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed`,x.bubble,u&&`animate-pulse`),children:c}),(d!==void 0||l||p)&&e===`assistant`&&(0,T.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,T.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"aria-label":v.copyAria,onClick:w,children:(0,T.jsx)(n,{className:`size-3.5`})}),y&&(0,T.jsx)(r,{size:`xxs`,type:`success`,children:v.copied}),!!p&&(0,T.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,"aria-label":v.regenerateAria,onClick:p,children:(0,T.jsx)(f,{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:d},running:{variant:`primary`,icon:i},success:{variant:`success`},error:{variant:`error`,icon:u}};function N(e){return e<1e3?`${Math.round(e)}ms`:`${(e/1e3).toFixed(+(e<1e4))}s`}function P({name:e,status:t,icon:n=m,args:i,result:s,error:u,durationMs:d,defaultExpanded:f=!1,className:p,strings:h}){let v=g(j,h),[b,x]=(0,C.useState)(f),S={pending:v.pending,running:v.running,success:v.success,error:v.error},w=M[t].icon,E=!!(i||s||u);return(0,T.jsxs)(`div`,{className:_(`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)(a,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,onClick:()=>E&&x(e=>!e),className:_(`ai-tool-call--trigger h-auto w-full justify-start gap-2 rounded-none px-3 py-2 text-left`,E?`cursor-pointer hover:bg-muted/40`:`cursor-default`),"aria-expanded":E?b:void 0,"aria-label":E?b?v.collapse:v.expand:void 0,children:[(0,T.jsx)(y,{icon:n,tone:`muted`,size:`sm`,shape:`square`}),(0,T.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,T.jsx)(r,{weight:`medium`,className:`truncate font-mono`,children:e})}),(0,T.jsxs)(o,{variant:M[t].variant,className:`gap-1`,children:[!!w&&(0,T.jsx)(w,{className:_(`size-3`,t===`running`&&`animate-spin`)}),S[t]]}),!!d&&(0,T.jsxs)(r,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:[v.durationLabel,` `,N(d)]}),E&&(b?(0,T.jsx)(c,{className:`size-3.5 text-muted-foreground`}):(0,T.jsx)(l,{className:`size-3.5 text-muted-foreground`}))]}),!!b&&E&&(0,T.jsxs)(`div`,{className:`border-t border-border/60 bg-muted/20 px-3 py-2 space-y-2`,children:[!!i&&(0,T.jsx)(F,{label:v.args,children:i}),t===`error`&&u?(0,T.jsx)(F,{label:v.error,tone:`error`,children:u}):!!s&&(0,T.jsx)(F,{label:v.result,children:s})]})]})}P.displayName=`AiToolCall`;function F({label:e,children:t,tone:n=`neutral`}){return(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e}),(0,T.jsx)(`pre`,{tabIndex:0,className:_(`overflow-x-auto rounded-md bg-card px-2.5 py-2 font-mono text-xs leading-relaxed`,n===`error`&&`text-destructive bg-destructive/5`),children:t})]})}export{A as n,E as r,P as t};