admin-ui-starter-kit 0.7.0 → 0.7.1

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

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

package/dist/showcase/assets/ai-tool-call-6qESA6We.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{o as n,p as r}from"./section-C_rLy6Zn.js";import{t as i}from"./bot-BGQvS_p9.js";import{Dr as a,Er as o,r as s}from"./example-BsDQngs7.js";import{t as c}from"./chevron-down-mjLUdP6b.js";import{t as l}from"./circle-alert-DSpR2pdl.js";import{t as u}from"./circle-dot-DlYGMuaF.js";import{t as d}from"./rotate-ccw-Uau0Jm3_.js";import{t as f}from"./user-C7ORJkSr.js";import{t as p}from"./wrench-BzqNpztP.js";import{N as m,c as h,d as g,l as _,n as v}from"./index-B4sKWDcN.js";import{t as y}from"./icon-badge-ruuI6tt0.js";import{t as b}from"./textarea-DcCHHuP-.js";var x=_(`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=_(`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=g();function E({value:e,onVote:t,onSubmitComment:n,allowComment:i=!0,submitted:a=!1,className:o,strings:c}){let l=m(w,c),[u,d]=(0,C.useState)(null),[f,p]=(0,C.useState)(``),h=e??u,g=n=>{let r=h===n?null:n;e===void 0&&d(r),t?.(r)};return a?(0,T.jsxs)(`div`,{className:v(`ai-feedback--component`,`inline-flex items-center gap-2 rounded-full bg-success/10 px-3 py-1.5`,o),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:v(`ai-feedback--component inline-flex flex-col gap-2`,o),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)(s,{type:`button`,variant:`secondary`,buttonStyle:h===`up`?`solid`:`ghost`,size:`icon-small`,"aria-label":l.thumbsUpAria,"aria-pressed":h===`up`,onClick:()=>g(`up`),className:v(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-small`,"aria-label":l.thumbsDownAria,"aria-pressed":h===`down`,onClick:()=>g(`down`),className:v(h===`down`&&`text-destructive bg-destructive/15 hover:bg-destructive/20`),children:(0,T.jsx)(x,{className:`size-3.5`})})]}),!!i&&!!h&&(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)(s,{type:`button`,onClick:()=>{n?.(f,h),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:i,user:f,system:i};function A({role:e=`assistant`,avatar:t,avatarLabel:n,authorName:i,timestamp:o,children:c,plainText:l,loading:u=!1,onCopy:f,onRegenerate:p,className:h,strings:g}){let _=m(D,g),[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),f?.(),window.setTimeout(()=>b(!1),1500)},E=t??(0,T.jsx)(`span`,{"aria-label":n,className:v(`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:v(`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:[(i||o)&&(0,T.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[!!i&&(0,T.jsx)(r,{size:`xs`,weight:`medium`,children:i}),!!o&&(0,T.jsx)(r,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:o})]}),(0,T.jsx)(`div`,{className:v(`rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed`,x.bubble,u&&`animate-pulse`),children:c}),(f!==void 0||l||p)&&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-small`,"aria-label":_.copyAria,onClick:w,children:(0,T.jsx)(a,{className:`size-3.5`})}),y&&(0,T.jsx)(r,{size:`xs`,type:`success`,children:_.copied}),!!p&&(0,T.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":_.regenerateAria,onClick:p,children:(0,T.jsx)(d,{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:u},running:{variant:`primary`,icon:o},success:{variant:`success`},error:{variant:`error`,icon:l}};function N(e){return e<1e3?`${Math.round(e)}ms`:`${(e/1e3).toFixed(+(e<1e4))}s`}function P({name:e,status:t,icon:i=p,args:a,result:o,error:l,durationMs:u,defaultExpanded:d=!1,className:f,strings:g}){let _=m(j,g),[b,x]=(0,C.useState)(d),S={pending:_.pending,running:_.running,success:_.success,error:_.error},w=M[t].icon,E=!!(a||o||l);return(0,T.jsxs)(`div`,{className:v(`ai-tool-call--component`,`overflow-hidden rounded-lg border border-border/60 bg-card`,t===`error`&&`border-destructive/40 bg-destructive/5`,f),children:[(0,T.jsxs)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`default`,onClick:()=>E&&x(e=>!e),className:v(`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?_.collapse:_.expand:void 0,children:[(0,T.jsx)(y,{icon:i,tone:`muted`,size:`default`,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)(n,{variant:M[t].variant,className:`gap-1`,children:[!!w&&(0,T.jsx)(w,{className:v(`size-3`,t===`running`&&`animate-spin`)}),S[t]]}),!!u&&(0,T.jsxs)(r,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:[_.durationLabel,` `,N(u)]}),E&&(b?(0,T.jsx)(c,{className:`size-3.5 text-muted-foreground`}):(0,T.jsx)(h,{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:[!!a&&(0,T.jsx)(F,{label:_.args,children:a}),t===`error`&&l?(0,T.jsx)(F,{label:_.error,tone:`error`,children:l}):!!o&&(0,T.jsx)(F,{label:_.result,children:o})]})]})}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:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e}),(0,T.jsx)(`pre`,{tabIndex:0,className:v(`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};