admin-ui-starter-kit 0.6.9 → 0.7.0

package/dist/showcase/assets/admin-CRVq1bj-.js

@@ -0,0 +1,140 @@
+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-DLqBJGPH.js";import{r as s,t as c}from"./example-DDhaO2UY.js";import{t as l}from"./key-round-B_fKEPa6.js";import{t as u}from"./message-square-CYSVV7nZ.js";import{t as d}from"./pencil-Db0qlNpO.js";import{t as f}from"./plus-CaAfJIjc.js";import{t as p}from"./settings-GFwewlvm.js";import{t as m}from"./shield-alert-dlgSUsVl.js";import{t as h}from"./shield-NNzIJA-o.js";import{t as ee}from"./trash-2-DZ5FSAFb.js";import{t as g}from"./zap-_0WPgXWT.js";import{N as _,d as v,n as y}from"./index-DSBghWdd.js";import{t as b}from"./props-table-CzpevabQ.js";import{t as x}from"./icon-badge-CrSkFExw.js";import{i as S,n as te,r as C,t as w}from"./alert-BQucj-0f.js";import{t as T}from"./smart-card-BA097ZGN.js";import{c as E,i as D,n as O,o as k,r as A,t as j,u as M}from"./item-D5xwkRvf.js";import{t as ne}from"./checkbox-CJg8G3-s.js";import{t as re}from"./input-Bq9vs-9_.js";import{n as N}from"./switch-Cv_v9byU.js";import{n as ie}from"./form-field-CpRcKtwS.js";import{t as P}from"./copyable-8_0ImOB2.js";import{t as ae}from"./api-key-list-DuoC5nyO.js";var F=v();function I({members:e,className:t}){return(0,F.jsx)(k,{className:y(`team-member--component`,t),children:e.map(e=>(0,F.jsxs)(j,{children:[(0,F.jsx)(E,{children:(0,F.jsx)(x,{tone:`primary`,solid:!0,size:`default`,children:(0,F.jsx)(a,{size:`xs`,weight:`semibold`,className:`text-inherit`,children:e.initials})})}),(0,F.jsxs)(A,{children:[(0,F.jsx)(M,{children:e.name}),(0,F.jsx)(D,{clamp:1,children:e.role})]}),(0,F.jsxs)(O,{children:[(0,F.jsx)(i,{variant:`secondary`,children:e.dept}),(0,F.jsx)(a,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:e.active})]})]},e.name))})}I.displayName=`TeamMemberRow`;var L={statusInStock:`In Stock`,statusLowStock:`Low Stock`,statusCritical:`Critical`,variantLabel:`Variant`,unitsAvailable:`units available`,reorderAtLabel:`Reorder at`,lastRestockedLabel:`Last restocked`},R={editRole:`Edit Role`,formatMemberCount:e=>`${e} members`};function z({roleName:e,description:t,memberCount:n,sections:r,onEdit:o,className:c,strings:l}){let u=_(R,l);return(0,F.jsxs)(T,{title:e,description:t,headerEnd:n!==void 0&&(0,F.jsx)(i,{variant:`info`,children:u.formatMemberCount(n)}),className:y(`role-permission--component`,c),children:[(0,F.jsx)(`div`,{className:`mt-5 space-y-4`,children:r.map(e=>(0,F.jsxs)(`div`,{children:[(0,F.jsx)(a,{size:`xs`,weight:`medium`,className:`uppercase tracking-wider text-muted-foreground`,children:e.name}),(0,F.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-2`,children:e.permissions.map(e=>(0,F.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,F.jsx)(`span`,{className:y(`size-2.5 rounded-full`,e.active?`bg-success`:`bg-muted`)}),(0,F.jsx)(a,{size:`xs`,className:e.active?`text-foreground`:`text-muted-foreground`,children:e.label})]},e.label))})]},e.name))}),!!o&&(0,F.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,icon:d,className:`mt-5`,onClick:o,children:u.editRole})]})}z.displayName=`RolePermissionCard`;function B({conversations:e,className:t}){return(0,F.jsx)(k,{className:y(`conversation-row--component`,t),children:e.map(e=>(0,F.jsxs)(j,{className:`cursor-pointer`,children:[(0,F.jsx)(E,{children:(0,F.jsx)(x,{tone:`primary`,size:`default`,children:(0,F.jsx)(a,{size:`xs`,weight:`semibold`,className:`text-inherit`,children:e.initials})})}),(0,F.jsxs)(A,{children:[(0,F.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,F.jsx)(M,{children:e.name}),(0,F.jsx)(a,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:e.time})]}),(0,F.jsx)(D,{clamp:1,children:e.preview})]}),!!e.unread&&(0,F.jsx)(O,{children:(0,F.jsx)(x,{tone:`primary`,solid:!0,size:`small`,children:(0,F.jsx)(a,{size:`xs`,weight:`bold`,className:`text-inherit tabular-nums`,children:e.unread})})})]},e.name))})}B.displayName=`RecentConversationRow`;var V=t(n(),1);function H({settings:e,values:t,onChange:n,className:r}){let[i,a]=(0,V.useState)(()=>{let t={};for(let n of e)t[n.key]=n.defaultValue??!1;return t}),o=n!==void 0,s=o&&t?t:i,c=(e,t)=>{o&&n?n(e,t):a(n=>({...n,[e]:t}))};return(0,F.jsx)(T,{className:y(`settings-toggle--component`,r),children:(0,F.jsx)(k,{children:e.map(e=>{let t=e.icon,n=s[e.key]??!1;return(0,F.jsxs)(j,{children:[(0,F.jsx)(E,{variant:`icon`,className:`bg-muted text-muted-foreground rounded-full size-9`,children:(0,F.jsx)(t,{})}),(0,F.jsxs)(A,{children:[(0,F.jsx)(M,{children:e.name}),(0,F.jsx)(D,{children:e.desc})]}),(0,F.jsx)(O,{children:(0,F.jsx)(N,{"aria-label":e.name,checked:n,onCheckedChange:t=>c(e.key,t)})})]},e.key)})})})}H.displayName=`SettingsToggleRow`;function U({productName:e,variant:t,stock:n,reorderLevel:r,maxStock:o,lastRestocked:s,className:c,strings:l}){let u=_(L,l),d=Math.round(n/o*100),f=n<=r,p=n<=r*.5,m=p?`error`:f?`warning`:`success`,h=p?u.statusCritical:f?u.statusLowStock:u.statusInStock;return(0,F.jsxs)(T,{className:y(`inventory-level--component`,c),children:[(0,F.jsxs)(j,{size:`small`,children:[(0,F.jsxs)(A,{children:[(0,F.jsx)(M,{children:e}),!!t&&(0,F.jsxs)(D,{clamp:1,children:[u.variantLabel,`: `,t]})]}),(0,F.jsx)(O,{children:(0,F.jsx)(i,{variant:m,children:h})})]}),(0,F.jsx)(a,{weight:`semibold`,className:`tabular-nums tracking-tight`,children:n}),(0,F.jsx)(a,{size:`xs`,type:`secondary`,children:u.unitsAvailable}),(0,F.jsxs)(`div`,{className:`mt-4 space-y-2`,children:[(0,F.jsx)(`div`,{className:`h-1.5 overflow-hidden rounded-full bg-muted`,children:(0,F.jsx)(`div`,{className:y(`h-full rounded-full transition-all`,p?`bg-destructive`:f?`bg-warning`:`bg-success`),style:{width:`${d}%`}})}),(0,F.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,F.jsxs)(a,{size:`xs`,type:`secondary`,children:[u.reorderAtLabel,`: `,(0,F.jsx)(a,{tag:`span`,weight:`medium`,className:`tabular-nums`,children:r})]}),!!s&&(0,F.jsxs)(a,{size:`xs`,type:`secondary`,children:[u.lastRestockedLabel,`: `,s]})]})]})]})}U.displayName=`InventoryLevelCard`;function W(e,t){if(!e)return null;let{label:n,icon:r,variant:i=t,...a}=e;return(0,F.jsxs)(s,{...a,variant:i,children:[!!r&&(0,F.jsx)(r,{className:`size-4`}),n]})}function oe({icon:e,title:t,description:n,primaryAction:r,secondaryAction:i,actions:a,disabled:o=!1,className:s}){return(0,F.jsxs)(j,{"data-component":`action-row`,"data-slot":`action-row`,className:y(`action-row--component`,o&&`opacity-60`,s),children:[!!e&&(0,F.jsx)(E,{variant:`icon`,children:(0,F.jsx)(x,{icon:e,tone:`muted`,shape:`square`,size:`default`})}),(0,F.jsxs)(A,{children:[(0,F.jsx)(M,{children:t}),!!n&&(0,F.jsx)(D,{children:n})]}),(0,F.jsx)(O,{className:`flex-wrap justify-end`,children:a??(0,F.jsxs)(F.Fragment,{children:[W(i,`secondary`),W(r,`primary`)]})})]})}function se({title:e,description:t,actions:n,children:r,rows:i,padding:a=`default`,surface:o=`card`,className:s,contentClassName:c}){return(0,F.jsxs)(T,{"data-component":`action-list`,"data-slot":`action-list`,title:e,description:t,headerAction:n,padding:a,surface:o,className:y(`action-list--component`,s),contentClassName:y(`action-list--content grid gap-2`,c),children:[i?.map((e,t)=>(0,F.jsx)(oe,{...e},t)),r]})}function ce({title:e,description:t,confirmation:n,action:r,icon:i=m,padding:o=`default`,surface:s=`card`,className:c}){return(0,F.jsxs)(T,{"data-component":`sensitive-action-card`,"data-slot":`sensitive-action-card`,padding:o,surface:s,className:y(`sensitive-action-card--component border-destructive/30`,c),contentClassName:`sensitive-action-card--content grid gap-3`,children:[(0,F.jsxs)(`div`,{className:`flex min-w-0 items-start gap-3`,children:[(0,F.jsx)(x,{icon:i,tone:`destructive`,shape:`square`,size:`default`}),(0,F.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,F.jsx)(a,{weight:`semibold`,children:e}),!!t&&(0,F.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:t})]}),!!r&&(0,F.jsx)(`div`,{className:`shrink-0`,children:r})]}),!!n&&(0,F.jsx)(w,{variant:`destructive`,role:`note`,className:`sensitive-action-card--confirmation`,children:(0,F.jsx)(C,{children:n})})]})}var le={title:`Secret created`,description:`Copy this value now. It may not be shown again.`,copySuccess:`Secret copied`};function ue({value:e,displayValue:t,title:n,description:r,action:i,className:a,strings:o}){let s=_(le,o);return(0,F.jsxs)(w,{"data-component":`copyable-secret-alert`,"data-slot":`copyable-secret-alert`,variant:`success`,className:y(`copyable-secret-alert--component`,a),children:[(0,F.jsx)(l,{className:`size-4`}),(0,F.jsx)(S,{children:n??s.title}),(0,F.jsx)(C,{children:(0,F.jsxs)(`span`,{className:`grid gap-2`,children:[(0,F.jsx)(`span`,{children:r??s.description}),(0,F.jsx)(P,{value:e,displayValue:t??e,mono:!0,truncate:!0,className:`copyable-secret-alert--value max-w-full rounded-md bg-background px-2 py-1`,successMessage:s.copySuccess})]})}),!!i&&(0,F.jsx)(te,{children:i})]})}var de={title:`API tokens`,description:`Create and revoke access tokens.`,nameLabel:`Token name`,namePlaceholder:`Production deploy key`,abilitiesLabel:`Abilities`,create:`Create token`,revokeAll:`Revoke all`,createdTitle:`Token created`,createdDescription:`Copy this token now. It will not be shown again.`};function fe({tokens:e,abilities:t=[],createdToken:n,name:r,defaultName:i=``,onNameChange:o,selectedAbilities:c,defaultSelectedAbilities:l=[],onSelectedAbilitiesChange:u,onCreateToken:d,onRevokeToken:p,onRevokeAllTokens:m,onAfterMutate:h,onError:g,isCreating:v=!1,isRevokingAll:b=!1,disabled:x=!1,className:S,strings:te}){let C=_(de,te),w=r!==void 0,E=c!==void 0,[D,O]=(0,V.useState)(i),[k,A]=(0,V.useState)([...l]),[j,M]=(0,V.useState)(null),N=w?r:D,P=(0,V.useMemo)(()=>E?[...c]:k,[k,E,c]),I=v||j===`create`,L=b||j===`revoke-all`,R=(0,V.useCallback)(e=>{w||O(e),o?.(e)},[w,o]),z=(0,V.useCallback)(e=>{E||A(e),u?.(e)},[E,u]),B=(0,V.useCallback)((e,t)=>{z(t===!0?Array.from(new Set([...P,e])):P.filter(t=>t!==e))},[P,z]),H=(0,V.useCallback)(async(e,t,n)=>{M(e);try{await t(),h?.({type:e,payload:n})}catch(t){g?.(t,{phase:e})}finally{M(null)}},[h,g]),U=(0,V.useCallback)(()=>{if(!d)return;let e={name:N,abilities:P};H(`create`,()=>d(e),e)},[d,P,N,H]),W=(0,V.useCallback)((e,t)=>{p&&H(`revoke`,()=>p(e,t),t)},[p,H]),oe=(0,V.useCallback)(()=>{m&&H(`revoke-all`,m)},[m,H]);return(0,F.jsxs)(T,{"data-component":`api-token-manager`,"data-slot":`api-token-manager`,title:C.title,description:C.description,headerAction:m?(0,F.jsxs)(s,{type:`button`,variant:`error`,buttonStyle:`outline`,loading:L,disabled:x||e.length===0,onClick:oe,children:[(0,F.jsx)(ee,{className:`size-4`}),C.revokeAll]}):void 0,className:y(`api-token-manager--component`,S),contentClassName:`api-token-manager--content grid gap-4`,children:[!!n&&(0,F.jsx)(ue,{value:n.value,displayValue:n.displayValue,title:n.name??C.createdTitle,description:C.createdDescription}),(0,F.jsxs)(`div`,{className:`api-token-manager--form grid gap-3 rounded-lg border border-border/70 bg-muted/20 p-3`,children:[(0,F.jsx)(ie,{label:C.nameLabel,children:(0,F.jsx)(re,{value:N,placeholder:C.namePlaceholder,onChange:e=>R(e.currentTarget.value),disabled:x||I})}),t.length>0&&(0,F.jsxs)(`div`,{className:`api-token-manager--abilities grid gap-2`,children:[(0,F.jsx)(a,{size:`xs`,weight:`semibold`,children:C.abilitiesLabel}),(0,F.jsx)(`div`,{className:`grid gap-2 sm:grid-cols-2`,children:t.map(e=>(0,F.jsxs)(`label`,{className:`flex min-w-0 items-start gap-2 rounded-md border border-border/70 bg-background px-3 py-2`,children:[(0,F.jsx)(ne,{checked:P.includes(e.id),disabled:x||I||e.disabled,onCheckedChange:t=>B(e.id,t)}),(0,F.jsxs)(`span`,{className:`grid min-w-0 gap-0.5`,children:[(0,F.jsx)(a,{tag:`span`,weight:`medium`,children:e.label}),!!e.description&&(0,F.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,children:e.description})]})]},e.id))})]}),(0,F.jsx)(`div`,{className:`flex justify-end`,children:(0,F.jsxs)(s,{type:`button`,variant:`primary`,loading:I,disabled:x||!d||N.trim().length===0,onClick:U,children:[(0,F.jsx)(f,{className:`size-4`}),C.create]})})]}),(0,F.jsx)(ae,{items:e,onDelete:p?W:void 0})]})}fe.displayName=`ApiTokenManager`;var pe=e({ActionSurfaces:()=>X,InventoryLevel:()=>Y,RecentConversations:()=>q,RolePermissions:()=>K,SettingsToggles:()=>J,TeamMembers:()=>G,TokenManager:()=>Z});function G(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(T,{children:(0,F.jsx)(I,{members:[{initials:`EM`,name:`Emma Garcia`,role:`Product Manager`,dept:`Operations`,active:`2h ago`},{initials:`SP`,name:`Daniel Smith`,role:`Lead Developer`,dept:`Engineering`,active:`15m ago`},{initials:`ID`,name:`David Williams`,role:`Designer`,dept:`Design`,active:`1d ago`}]})})})}function K(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(z,{roleName:`Editor`,description:`Can manage content and view users.`,memberCount:12,sections:[{name:`Content`,permissions:[{label:`Create`,active:!0},{label:`Read`,active:!0},{label:`Update`,active:!0},{label:`Delete`,active:!1}]},{name:`Users`,permissions:[{label:`Invite`,active:!0},{label:`View`,active:!0},{label:`Edit`,active:!1},{label:`Remove`,active:!1}]}],onEdit:()=>{}})})}function q(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(T,{children:(0,F.jsx)(B,{conversations:[{initials:`EM`,name:`Emma Garcia`,preview:`Thanks for the quick response! I wanted to ask about the delivery timeline...`,time:`2m`,unread:3},{initials:`SP`,name:`Daniel Smith`,preview:`The new product photos look great. Can we schedule a meeting...`,time:`15m`,unread:0},{initials:`NK`,name:`Nadia Kowalski`,preview:`I noticed the voucher codes are not applying correctly...`,time:`1h`,unread:1}]})})})}function J(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(H,{settings:[{key:`notifications`,icon:u,name:`Push Notifications`,desc:`Receive alerts for new orders and messages`,defaultValue:!0},{key:`twoFactor`,icon:h,name:`Two-Factor Auth`,desc:`Add an extra layer of security`},{key:`darkMode`,icon:p,name:`Dark Mode`,desc:`Use dark theme across all admin pages`,defaultValue:!0},{key:`analytics`,icon:g,name:`Usage Analytics`,desc:`Help us improve by sharing anonymous usage data`,defaultValue:!0}]})})}function Y(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(U,{productName:`Luxury Gift Basket`,variant:`Large / Gold`,stock:23,reorderLevel:20,maxStock:100,lastRestocked:`Mar 15`})})}function X(){return(0,F.jsxs)(`div`,{className:`grid gap-4`,children:[(0,F.jsx)(se,{title:`Security actions`,description:`Rows standardize settings, security, and show-card action surfaces.`,rows:[{icon:h,title:`Require two-factor authentication`,description:`Ask all admins to enroll before their next session.`,primaryAction:{label:`Require 2FA`,onClick:()=>{}},secondaryAction:{label:`Preview policy`,variant:`secondary`,onClick:()=>{}}},{icon:u,title:`Notify account owners`,description:`Send a summary before applying the change.`,primaryAction:{label:`Send notice`,variant:`secondary`,onClick:()=>{}}}]}),(0,F.jsx)(ce,{title:`Disable workspace`,description:`Suspends access for every member and pauses background jobs.`,confirmation:`The consumer app owns the confirmation dialog and mutation callback.`,action:(0,F.jsx)(s,{variant:`error`,buttonStyle:`outline`,children:`Disable`})}),(0,F.jsx)(ue,{value:`sk_live_x9K2...`})]})}function Z(){return(0,F.jsx)(fe,{tokens:[{id:`prod`,name:`Production`,value:`sk_prod_123`,displayValue:`••••123`},{id:`dev`,name:`Development`,value:`sk_dev_456`,displayValue:`••••456`}],abilities:[{id:`read`,label:`Read records`,description:`List and inspect resources.`},{id:`write`,label:`Write records`,description:`Create and update resources.`},{id:`delete`,label:`Delete records`,description:`Remove resources through callbacks.`}],createdToken:{value:`sk_new_789`,displayValue:`sk_new_789`},onCreateToken:()=>{},onRevokeToken:()=>{},onRevokeAllTokens:()=>{}})}var Q=`import { MessageSquare, Shield, Settings, Zap } from 'lucide-react';
+import { TeamMemberRow } from '@/components/composed/admin/team-member';
+import { RolePermissionCard } from '@/components/composed/admin/role-permission';
+import { RecentConversationRow } from '@/components/composed/admin/conversation-row';
+import { SettingsToggleRow } from '@/components/composed/admin/settings-toggle';
+import { InventoryLevelCard } from '@/components/composed/admin/inventory-level';
+import {
+	ActionList,
+	ApiTokenManager,
+	CopyableSecretAlert,
+	SensitiveActionCard,
+} from '@/components/composed/admin';
+import { SmartCard } from '@/components/base/cards';
+import { Button } from '@/components/base/buttons';
+
+export function TeamMembers() {
+	return (
+		<>
+			<SmartCard>
+								<TeamMemberRow
+									members={[
+										{ initials: 'EM', name: 'Emma Garcia', role: 'Product Manager', dept: 'Operations', active: '2h ago' },
+										{ initials: 'SP', name: 'Daniel Smith', role: 'Lead Developer', dept: 'Engineering', active: '15m ago' },
+										{ initials: 'ID', name: 'David Williams', role: 'Designer', dept: 'Design', active: '1d ago' },
+									]}
+								/>
+							</SmartCard>
+		</>
+	);
+}
+
+export function RolePermissions() {
+	return (
+		<>
+			<RolePermissionCard
+								roleName="Editor"
+								description="Can manage content and view users."
+								memberCount={12}
+								sections={[
+									{ name: 'Content', permissions: [{ label: 'Create', active: true }, { label: 'Read', active: true }, { label: 'Update', active: true }, { label: 'Delete', active: false }] },
+									{ name: 'Users', permissions: [{ label: 'Invite', active: true }, { label: 'View', active: true }, { label: 'Edit', active: false }, { label: 'Remove', active: false }] },
+								]}
+								onEdit={() => {}}
+							/>
+		</>
+	);
+}
+
+export function RecentConversations() {
+	return (
+		<>
+			<SmartCard>
+								<RecentConversationRow
+									conversations={[
+										{ initials: 'EM', name: 'Emma Garcia', preview: 'Thanks for the quick response! I wanted to ask about the delivery timeline...', time: '2m', unread: 3 },
+										{ initials: 'SP', name: 'Daniel Smith', preview: 'The new product photos look great. Can we schedule a meeting...', time: '15m', unread: 0 },
+										{ initials: 'NK', name: 'Nadia Kowalski', preview: 'I noticed the voucher codes are not applying correctly...', time: '1h', unread: 1 },
+									]}
+								/>
+							</SmartCard>
+		</>
+	);
+}
+
+export function SettingsToggles() {
+	return (
+		<>
+			<SettingsToggleRow
+								settings={[
+									{ key: 'notifications', icon: MessageSquare, name: 'Push Notifications', desc: 'Receive alerts for new orders and messages', defaultValue: true },
+									{ key: 'twoFactor', icon: Shield, name: 'Two-Factor Auth', desc: 'Add an extra layer of security' },
+									{ key: 'darkMode', icon: Settings, name: 'Dark Mode', desc: 'Use dark theme across all admin pages', defaultValue: true },
+									{ key: 'analytics', icon: Zap, name: 'Usage Analytics', desc: 'Help us improve by sharing anonymous usage data', defaultValue: true },
+								]}
+							/>
+		</>
+	);
+}
+
+export function InventoryLevel() {
+	return (
+		<>
+			<InventoryLevelCard productName="Luxury Gift Basket" variant="Large / Gold" stock={23} reorderLevel={20} maxStock={100} lastRestocked="Mar 15" />
+		</>
+	);
+}
+
+export function ActionSurfaces() {
+	return (
+		<div className="grid gap-4">
+			<ActionList
+				title="Security actions"
+				description="Rows standardize settings, security, and show-card action surfaces."
+				rows={[
+					{
+						icon: Shield,
+						title: 'Require two-factor authentication',
+						description: 'Ask all admins to enroll before their next session.',
+						primaryAction: { label: 'Require 2FA', onClick: () => {} },
+						secondaryAction: { label: 'Preview policy', variant: 'secondary', onClick: () => {} },
+					},
+					{
+						icon: MessageSquare,
+						title: 'Notify account owners',
+						description: 'Send a summary before applying the change.',
+						primaryAction: { label: 'Send notice', variant: 'secondary', onClick: () => {} },
+					},
+				]}
+			/>
+			<SensitiveActionCard
+				title="Disable workspace"
+				description="Suspends access for every member and pauses background jobs."
+				confirmation="The consumer app owns the confirmation dialog and mutation callback."
+				action={<Button variant="error" buttonStyle="outline">Disable</Button>}
+			/>
+			<CopyableSecretAlert value="sk_live_x9K2..." />
+		</div>
+	);
+}
+
+export function TokenManager() {
+	return (
+		<ApiTokenManager
+			tokens={[
+				{ id: 'prod', name: 'Production', value: 'sk_prod_123', displayValue: '••••123' },
+				{ id: 'dev', name: 'Development', value: 'sk_dev_456', displayValue: '••••456' },
+			]}
+			abilities={[
+				{ id: 'read', label: 'Read records', description: 'List and inspect resources.' },
+				{ id: 'write', label: 'Write records', description: 'Create and update resources.' },
+				{ id: 'delete', label: 'Delete records', description: 'Remove resources through callbacks.' },
+			]}
+			createdToken={{ value: 'sk_new_789', displayValue: 'sk_new_789' }}
+			onCreateToken={() => {}}
+			onRevokeToken={() => {}}
+			onRevokeAllTokens={() => {}}
+		/>
+	);
+}
+`;function me(e){let t={h4:`h4`,...e.components};return pe||$(`Examples`,!1),X||$(`Examples.ActionSurfaces`,!0),Y||$(`Examples.InventoryLevel`,!0),q||$(`Examples.RecentConversations`,!0),K||$(`Examples.RolePermissions`,!0),J||$(`Examples.SettingsToggles`,!0),G||$(`Examples.TeamMembers`,!0),Z||$(`Examples.TokenManager`,!0),(0,F.jsxs)(r,{title:`Composed · Admin`,description:`Team list, permissions, conversations, settings, inventory.`,layer:`composed`,status:`ready`,children:[(0,F.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,F.jsx)(c,{name:`TeamMembers`,source:Q,children:(0,F.jsx)(G,{})}),(0,F.jsx)(c,{name:`RolePermissions`,source:Q,children:(0,F.jsx)(K,{})}),(0,F.jsx)(c,{name:`RecentConversations`,source:Q,children:(0,F.jsx)(q,{})}),(0,F.jsx)(c,{name:`SettingsToggles`,source:Q,children:(0,F.jsx)(J,{})}),(0,F.jsx)(c,{name:`InventoryLevel`,source:Q,children:(0,F.jsx)(Y,{})}),(0,F.jsx)(c,{name:`ActionSurfaces`,source:Q,children:(0,F.jsx)(X,{})}),(0,F.jsx)(c,{name:`TokenManager`,source:Q,children:(0,F.jsx)(Z,{})})]}),(0,F.jsxs)(o,{title:`API`,id:`api`,children:[(0,F.jsx)(t.h4,{children:`TeamMemberRow`}),(0,F.jsx)(b,{component:`TeamMemberRow`}),(0,F.jsx)(t.h4,{children:`RolePermissionCard`}),(0,F.jsx)(b,{component:`RolePermissionCard`}),(0,F.jsx)(t.h4,{children:`RecentConversationRow`}),(0,F.jsx)(b,{component:`RecentConversationRow`}),(0,F.jsx)(t.h4,{children:`SettingsToggleRow`}),(0,F.jsx)(b,{component:`SettingsToggleRow`}),(0,F.jsx)(t.h4,{children:`InventoryLevelCard`}),(0,F.jsx)(b,{component:`InventoryLevelCard`}),(0,F.jsx)(t.h4,{children:`ActionList`}),(0,F.jsx)(b,{component:`ActionList`}),(0,F.jsx)(t.h4,{children:`ActionRow`}),(0,F.jsx)(b,{component:`ActionRow`}),(0,F.jsx)(t.h4,{children:`SensitiveActionCard`}),(0,F.jsx)(b,{component:`SensitiveActionCard`}),(0,F.jsx)(t.h4,{children:`CopyableSecretAlert`}),(0,F.jsx)(b,{component:`CopyableSecretAlert`}),(0,F.jsx)(t.h4,{children:`ApiTokenManager`}),(0,F.jsx)(b,{component:`ApiTokenManager`})]})]})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,F.jsx)(t,{...e,children:(0,F.jsx)(me,{...e})}):me(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{he as default};

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

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

package/dist/showcase/assets/ai-artifact-DnSz7Xj1.js

@@ -0,0 +1,2 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{o as n,p as r}from"./section-DLqBJGPH.js";import{t as i}from"./bot-DbSsnrvR.js";import{t as a}from"./brain-B69nRyRF.js";import{Dr as o,Er as s,Or as c,r as l}from"./example-DDhaO2UY.js";import{t as u}from"./chevron-down-CjLLqYjs.js";import{t as d}from"./circle-alert-DX4Q8Agf.js";import{t as f}from"./circle-x-BpB4A5gs.js";import{t as p}from"./circle-B9E-rFdh.js";import{t as m}from"./download-YQyeAxpe.js";import{t as h}from"./external-link-CANOM2jg.js";import{t as g}from"./file-text-BzM5AARd.js";import{t as _}from"./globe-pWzZwcAv.js";import{t as v}from"./image-BXWnqpeJ.js";import{t as y}from"./shield-check-CkqmRaJd.js";import{t as b}from"./video-BObmzTOM.js";import{t as x}from"./x-DVQ0XpIT.js";import{M as S,N as C,c as w,d as ee,l as T,n as E}from"./index-DSBghWdd.js";import{t as D}from"./icon-badge-CrSkFExw.js";var O=T(`archive`,[[`rect`,{width:`20`,height:`5`,x:`2`,y:`3`,rx:`1`,key:`1wp1u1`}],[`path`,{d:`M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8`,key:`1s80jp`}],[`path`,{d:`M10 12h4`,key:`a56b0p`}]]),k=T(`audio-lines`,[[`path`,{d:`M2 10v3`,key:`1fnikh`}],[`path`,{d:`M6 6v11`,key:`11sgs0`}],[`path`,{d:`M10 3v18`,key:`yhl04a`}],[`path`,{d:`M14 8v7`,key:`3a1oy3`}],[`path`,{d:`M18 5v13`,key:`123xd1`}],[`path`,{d:`M22 10v3`,key:`154ddg`}]]),te=T(`circle-minus`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M8 12h8`,key:`1wcyev`}]]),A=T(`file-code`,[[`path`,{d:`M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z`,key:`1oefj6`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`M10 12.5 8 15l2 2.5`,key:`1tg20x`}],[`path`,{d:`m14 12.5 2 2.5-2 2.5`,key:`yinavb`}]]),j=e(t(),1),M=ee();function N({children:e=`Thinking…`,paused:t=!1,duration:n=2.4,className:i}){if(t)return(0,M.jsx)(r,{type:`secondary`,className:E(`ai-shimmer--component`,i),children:e});let a={"--ai-shimmer-duration":`${n}s`};return(0,M.jsx)(`span`,{"data-ai-shimmer":!0,role:`status`,"aria-live":`polite`,className:E(`inline-block bg-clip-text text-sm font-medium text-transparent`,`bg-[linear-gradient(110deg,var(--ai-shimmer-base)_30%,var(--ai-shimmer-highlight)_50%,var(--ai-shimmer-base)_70%)]`,`bg-[length:200%_100%]`,`animate-[ai-shimmer-sweep_var(--ai-shimmer-duration,2.4s)_linear_infinite]`,i),style:a,children:e})}N.displayName=`AiShimmer`;var P={copy:`Copy`,copied:`Copied`,copyAria:`Copy code`,defaultLanguageLabel:`Code`};function F({code:e,language:t,filename:n,showLineNumbers:i=!1,highlightLines:a,hideHeader:s=!1,maxHeight:u,headerActions:d,onCopy:f,className:p,strings:m}){let h=C(P,m),[g,_]=(0,j.useState)(!1),v=(0,j.useMemo)(()=>e.split(`
+`),[e]),y=(0,j.useMemo)(()=>new Set(a??[]),[a]),b=()=>{typeof navigator<`u`&&navigator.clipboard&&navigator.clipboard.writeText(e),_(!0),f?.(),window.setTimeout(()=>_(!1),1500)},x=n||t||h.defaultLanguageLabel;return(0,M.jsxs)(`div`,{className:E(`ai-code-block--component`,`w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-border/60 bg-card`,p),children:[!s&&(0,M.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 border-b border-border/60 bg-muted/30 px-3 py-1.5`,children:[(0,M.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`min-w-0 truncate font-mono uppercase tracking-wider`,children:x}),!!n&&!!t&&(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(`span`,{"aria-hidden":!0,className:`text-muted-foreground/60`,children:`·`}),(0,M.jsx)(r,{size:`xs`,type:`discrete`,className:`font-mono lowercase`,children:t})]}),(0,M.jsxs)(`div`,{className:`ml-auto flex shrink-0 items-center gap-1`,children:[d,(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":h.copyAria,onClick:b,children:g?(0,M.jsx)(c,{className:`size-3.5 text-success`}):(0,M.jsx)(o,{className:`size-3.5`})})]})]}),(0,M.jsx)(`div`,{className:`min-w-0 max-w-full overflow-auto`,tabIndex:0,style:u===void 0?void 0:{maxHeight:typeof u==`number`?`${u}px`:u},children:(0,M.jsx)(`pre`,{className:`m-0 px-3 py-2.5 font-mono text-xs leading-relaxed`,children:i?(0,M.jsx)(`table`,{className:`w-full border-collapse`,children:(0,M.jsx)(`tbody`,{children:v.map((e,t)=>{let n=t+1;return(0,M.jsxs)(`tr`,{className:E(y.has(n)&&`bg-primary/10`),children:[(0,M.jsx)(`td`,{className:E(`select-none pr-3 text-right tabular-nums text-muted-foreground/70`,`w-9 min-w-9`),children:n}),(0,M.jsx)(`td`,{className:`whitespace-pre`,children:e||` `})]},t)})})}):(0,M.jsx)(`code`,{className:`block whitespace-pre`,children:e})})})]})}F.displayName=`AiCodeBlock`;var ne={removeAria:`Remove attachment`,openAria:`Open attachment`,uploadProgressAria:`Upload progress`},re={image:v,document:g,audio:k,video:b,code:A,archive:O,generic:g};function I({name:e,meta:t,kind:n=`generic`,icon:i,thumbnailUrl:a,progress:o,errored:s=!1,onOpen:c,onRemove:u,className:f,strings:p}){let m=C(ne,p),h=i??re[n],g=!s&&typeof o==`number`&&o>=0&&o<1,_=(0,M.jsxs)(M.Fragment,{children:[a?(0,M.jsx)(`span`,{"aria-hidden":!0,className:`size-9 shrink-0 overflow-hidden rounded-md bg-muted`,style:{backgroundImage:`url(${a})`,backgroundSize:`cover`,backgroundPosition:`center`}}):(0,M.jsx)(`span`,{"aria-hidden":!0,className:E(`inline-flex size-9 shrink-0 items-center justify-center rounded-md`,s?`bg-destructive/10 text-destructive`:`bg-muted text-muted-foreground`),children:s?(0,M.jsx)(d,{className:`size-4`}):(0,M.jsx)(h,{className:`size-4`})}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsx)(r,{weight:`medium`,className:`block truncate`,children:e}),!!t&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`block truncate tabular-nums`,children:t}),g&&(0,M.jsx)(`div`,{className:`mt-1 h-1 overflow-hidden rounded-full bg-muted`,"aria-label":m.uploadProgressAria,children:(0,M.jsx)(`div`,{className:`h-full rounded-full bg-primary transition-[width] duration-150`,style:{width:`${Math.round((o??0)*100)}%`}})})]})]});return(0,M.jsxs)(`div`,{className:E(`ai-attachment--component`,`group inline-flex max-w-full items-center gap-2.5 rounded-lg border border-border/60 bg-card px-2.5 py-2`,s&&`border-destructive/40 bg-destructive/5`,f),children:[c?(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`default`,onClick:c,"aria-label":m.openAria,className:E(`h-auto min-w-0 flex-1 justify-start gap-2.5 rounded-md px-0 py-0 text-left`),children:_}):(0,M.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2.5`,children:_}),!!u&&(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":m.removeAria,onClick:u,className:`opacity-60 group-hover:opacity-100`,children:(0,M.jsx)(x,{className:`size-3.5`})})]})}I.displayName=`AiAttachment`;var ie={statusLabels:{idle:`Idle`,thinking:`Thinking`,working:`Working`,done:`Done`,error:`Error`,offline:`Offline`}},ae={primary:`bg-primary/15 text-primary`,success:`bg-success/15 text-success`,warning:`bg-warning/20 text-warning`,destructive:`bg-destructive/15 text-destructive`,info:`bg-info/15 text-info`,neutral:`bg-muted text-muted-foreground`},L={idle:`secondary`,thinking:`primary`,working:`primary`,done:`success`,error:`error`,offline:`secondary`};function R({name:e,icon:t,avatar:a,subtitle:o,tone:s=`primary`,status:c,variant:l=`inline`,trailing:u,className:d,strings:f}){let p=C(ie,f),m=t??i,h=l===`card`?`size-9`:`size-7`,g=l===`card`?`size-4`:`size-3.5`,_=a??(0,M.jsx)(`span`,{"aria-hidden":!0,className:E(`inline-flex shrink-0 items-center justify-center rounded-full`,h,ae[s]),children:(0,M.jsx)(m,{className:g})}),v=!!c&&(0,M.jsxs)(n,{variant:L[c],className:`gap-1`,children:[(0,M.jsx)(`span`,{"aria-hidden":!0,className:E(`inline-block size-1.5 rounded-full`,c===`thinking`||c===`working`?`animate-pulse bg-current`:`bg-current`)}),p.statusLabels[c]]});return l===`card`?(0,M.jsxs)(`div`,{className:E(`ai-agent--component`,`flex items-center gap-3 rounded-lg border border-border/60 bg-card px-3 py-2.5`,d),children:[_,(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,M.jsx)(r,{weight:`semibold`,className:`truncate`,children:e}),v]}),!!o&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-0.5 line-clamp-1`,children:o})]}),!!u&&(0,M.jsx)(`div`,{className:`ml-auto flex items-center gap-1`,children:u})]}):(0,M.jsxs)(`div`,{className:E(`inline-flex items-center gap-2`,d),children:[_,(0,M.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,M.jsx)(r,{size:`xs`,weight:`medium`,className:`truncate`,children:e}),!!o&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:o}),v]}),!!u&&(0,M.jsx)(`div`,{className:`ml-1 flex items-center gap-1`,children:u})]})}R.displayName=`AiAgent`;var z={approve:`Approve`,reject:`Reject`,pending:`Awaiting your approval`,approved:`Approved`,rejected:`Rejected`},B={neutral:{ring:`border-border/60 bg-card`,icon:`muted`},destructive:{ring:`border-destructive/40 bg-destructive/5`,icon:`destructive`},warning:{ring:`border-warning/40 bg-warning/5`,icon:`warning`},info:{ring:`border-info/40 bg-info/5`,icon:`info`},primary:{ring:`border-primary/40 bg-primary/5`,icon:`primary`}};function V({title:e,description:t,icon:n,tone:i=`neutral`,status:a=`pending`,onApprove:o,onReject:s,approveLabel:u,rejectLabel:d,details:f,className:p,strings:m}){let h=C(z,m),g=n??y,_=B[i];return(0,M.jsxs)(`div`,{role:`region`,"aria-live":`polite`,className:E(`ai-confirmation--component`,`rounded-lg border px-3 py-2.5`,_.ring,p),children:[(0,M.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,M.jsx)(D,{icon:g,tone:_.icon,size:`default`,shape:`square`}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsx)(r,{weight:`semibold`,children:e}),!!t&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:t}),!!f&&(0,M.jsx)(`div`,{className:`mt-2`,children:f})]})]}),a===`pending`?(0,M.jsxs)(`div`,{className:`mt-3 flex items-center justify-between gap-2 border-t border-border/60 pt-2.5`,children:[(0,M.jsx)(r,{size:`xs`,type:`secondary`,children:h.pending}),(0,M.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,M.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:s,children:[(0,M.jsx)(x,{className:`size-3.5`}),d??h.reject]}),(0,M.jsxs)(l,{type:`button`,variant:i===`destructive`?`error`:`primary`,onClick:o,children:[(0,M.jsx)(c,{className:`size-3.5`}),u??h.approve]})]})]}):(0,M.jsx)(`div`,{className:`mt-3 flex items-center gap-2 border-t border-border/60 pt-2.5`,children:a===`approved`?(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(c,{className:`size-3.5 text-success`}),(0,M.jsx)(r,{size:`xs`,type:`success`,weight:`medium`,children:h.approved})]}):(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(x,{className:`size-3.5 text-muted-foreground`}),(0,M.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,children:h.rejected})]})})]})}V.displayName=`AiConfirmation`;var H={title:`{{count}} sources`,expand:`Show all sources`,collapse:`Hide sources`,visit:`Visit source`};function U(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function W({sources:e,variant:t=`list`,maxAvatars:n=5,defaultExpanded:i=!1,onSelect:a,className:o,strings:s}){let c=S(H,s),[d,f]=(0,j.useState)(i),p=U(c.title,{count:e.length});if(t===`avatars`)return(0,M.jsx)(G,{sources:e,max:n,title:p,onSelect:a,className:E(`ai-sources--component`,o)});let m=d?e:e.slice(0,0);return(0,M.jsxs)(`div`,{className:E(`ai-sources--component rounded-lg border border-border/60 bg-card`,o),children:[(0,M.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`default`,onClick:()=>f(e=>!e),"aria-expanded":d,"aria-label":d?c.collapse:c.expand,className:E(`ai-sources--trigger h-auto w-full justify-start gap-2 px-3 py-2 text-left`,`rounded-lg hover:bg-muted/40`),children:[(0,M.jsx)(K,{sources:e.slice(0,4)}),(0,M.jsx)(r,{size:`xs`,weight:`medium`,className:`flex-1`,children:p}),d?(0,M.jsx)(u,{className:`size-3.5 text-muted-foreground`}):(0,M.jsx)(w,{className:`size-3.5 text-muted-foreground`})]}),d&&(0,M.jsx)(`ol`,{className:`border-t border-border/60 px-2 py-2 space-y-0.5`,children:m.map((e,t)=>(0,M.jsx)(oe,{source:e,index:t+1,onSelect:a?()=>a(e,t):void 0,visitLabel:c.visit},e.id))})]})}W.displayName=`AiSources`;function G({sources:e,max:t,title:n,onSelect:i,className:a}){let o=e.slice(0,t),s=e.length-o.length;return(0,M.jsxs)(`div`,{className:E(`inline-flex items-center gap-2`,a),children:[(0,M.jsx)(K,{sources:o,onSelect:i}),(0,M.jsx)(r,{size:`xs`,type:`secondary`,children:n}),s>0&&(0,M.jsxs)(r,{size:`xs`,type:`discrete`,className:`tabular-nums`,children:[`+`,s]})]})}function K({sources:e,onSelect:t}){return(0,M.jsx)(`div`,{className:`flex -space-x-1.5`,children:e.map((e,n)=>{let r=(0,M.jsx)(`span`,{"aria-hidden":!0,title:typeof e.title==`string`?e.title:void 0,className:`inline-flex size-5 items-center justify-center overflow-hidden rounded-full border border-card bg-muted text-muted-foreground ring-1 ring-border/60`,children:(0,M.jsx)(q,{src:e.faviconUrl})},e.id);return t?(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:()=>t(e,n),className:`size-5 rounded-full p-0`,children:r},e.id):r})})}function q({src:e}){let[t,n]=(0,j.useState)(!1);return(0,j.useEffect)(()=>{n(!1)},[e]),!e||t?(0,M.jsx)(_,{className:`size-3`}):(0,M.jsx)(`img`,{src:e,alt:``,className:`size-full object-cover`,onError:()=>n(!0)})}function oe({source:e,index:t,onSelect:n,visitLabel:i}){return(0,M.jsx)(`li`,{children:(0,M.jsxs)(e.url&&!n?`a`:n?`button`:`span`,{...e.url&&!n?{href:e.url,target:`_blank`,rel:`noopener noreferrer`}:n?{type:`button`,onClick:n}:{},className:E(`group flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-left`,(e.url||n)&&`hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),"aria-label":e.url?i:void 0,children:[(0,M.jsx)(`span`,{className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground tabular-nums`,children:t}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsxs)(r,{weight:`medium`,className:`truncate`,children:[e.title,!!e.url&&(0,M.jsx)(h,{className:`ml-1 inline size-3 text-muted-foreground/70 align-baseline`})]}),!!e.publisher&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:e.publisher}),!!e.snippet&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1 line-clamp-2`,children:e.snippet})]})]})})}var se={thinking:`Thinking…`,thoughtFor:`Thought for {{seconds}}s`,thoughtDone:`Reasoning complete`,expandAria:`Expand reasoning`,collapseAria:`Collapse reasoning`};function ce(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function J({children:e,streaming:t=!1,durationSeconds:n,expandWhileStreaming:i=!0,defaultExpanded:o=!1,expanded:s,onExpandedChange:c,className:d,strings:f}){let p=C(se,f),[m,h]=(0,j.useState)(o),g=s??m,_=e=>{s===void 0&&h(e),c?.(e)};(0,j.useEffect)(()=>{t&&i&&!g&&_(!0),!t&&i&&g&&!o&&s===void 0&&_(!1)},[t]);let v=t?(0,M.jsx)(N,{children:p.thinking}):n===void 0?(0,M.jsx)(r,{weight:`medium`,children:p.thoughtDone}):(0,M.jsx)(r,{weight:`medium`,children:ce(p.thoughtFor,{seconds:n.toFixed(1)})});return(0,M.jsxs)(`div`,{className:E(`ai-reasoning--component`,`overflow-hidden rounded-lg border border-border/60 bg-muted/20`,d),children:[(0,M.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`default`,onClick:()=>_(!g),"aria-expanded":g,"aria-label":g?p.collapseAria:p.expandAria,className:E(`ai-reasoning--trigger h-auto w-full justify-start gap-2 rounded-none px-3 py-2 text-left`,`hover:bg-muted/30`),children:[(0,M.jsx)(a,{className:`size-3.5 text-muted-foreground`}),(0,M.jsx)(`div`,{className:`flex-1`,children:v}),g?(0,M.jsx)(u,{className:`size-3.5 text-muted-foreground`}):(0,M.jsx)(w,{className:`size-3.5 text-muted-foreground`})]}),g&&(0,M.jsx)(`div`,{className:`border-t border-border/60 px-3 py-2.5`,children:typeof e==`string`?(0,M.jsx)(r,{type:`secondary`,lineHeight:`relaxed`,className:`whitespace-pre-wrap`,children:e}):(0,M.jsx)(`div`,{className:`whitespace-pre-wrap`,children:e})})]})}J.displayName=`AiReasoning`;var le={title:`Reasoning`,streamingHint:`Working through the steps…`},ue={pending:{icon:p,iconCls:`text-muted-foreground/60`,ring:`border-border/60 bg-card`},active:{icon:s,iconCls:`text-primary`,ring:`border-primary/40 bg-primary/5`,spin:!0},completed:{icon:c,iconCls:`text-success-foreground`,ring:`border-success/40 bg-success`},failed:{icon:d,iconCls:`text-destructive-foreground`,ring:`border-destructive/40 bg-destructive`}};function Y({steps:e,hideHeader:t=!1,streaming:n=!1,className:i,strings:a}){let o=C(le,a);return(0,M.jsxs)(`div`,{className:E(`ai-chain-of-thought--component`,`rounded-lg border border-border/60 bg-card`,i),children:[!t&&(0,M.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border/60 px-3 py-2`,children:[(0,M.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:o.title}),n&&(0,M.jsx)(N,{className:`ml-auto !text-xs`,children:o.streamingHint})]}),(0,M.jsx)(`ol`,{className:`relative px-3 py-3`,children:e.map((t,n)=>{let i=t.status??`pending`,a=ue[i],o=t.icon??a.icon;return(0,M.jsxs)(`li`,{className:`relative flex gap-3 pb-3 last:pb-0`,children:[n!==e.length-1&&(0,M.jsx)(`span`,{"aria-hidden":!0,className:`absolute bottom-0 left-[11px] top-[26px] w-px bg-border/60`}),(0,M.jsx)(`span`,{"aria-hidden":!0,className:E(`relative z-[1] mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full border`,a.ring),children:(0,M.jsx)(o,{className:E(`size-3`,a.iconCls,a.spin&&`animate-spin`)})}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsx)(r,{weight:i===`active`?`semibold`:`medium`,className:E(i===`pending`&&`text-muted-foreground`),children:t.title}),!!t.description&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:t.description}),!!t.body&&(0,M.jsx)(`div`,{className:`mt-2`,children:t.body})]})]},t.id)})})]})}Y.displayName=`AiChainOfThought`;var de={statusLabels:{queued:`Queued`,running:`Running`,completed:`Done`,failed:`Failed`,cancelled:`Cancelled`,skipped:`Skipped`},collapseSubtasks:`Collapse subtasks`,expandSubtasks:`Expand subtasks`},fe={queued:{icon:p,cls:`text-muted-foreground/60`},running:{icon:s,cls:`text-primary`,spin:!0},completed:{icon:c,cls:`text-success`},failed:{icon:d,cls:`text-destructive`},cancelled:{icon:f,cls:`text-muted-foreground`},skipped:{icon:te,cls:`text-muted-foreground`}},X={queued:`secondary`,running:`primary`,completed:`success`,failed:`error`,cancelled:`secondary`,skipped:`secondary`};function Z({task:e,density:t=`compact`,indent:n=18,className:r,strings:i}){let a=C(de,i);return(0,M.jsx)(`div`,{className:E(`ai-task--component`,`rounded-lg border border-border/60 bg-card`,r),children:(0,M.jsx)(Q,{item:e,depth:0,density:t,indent:n,strings:a})})}Z.displayName=`AiTask`;function Q({item:e,depth:t,density:i,indent:a,strings:o}){let s=e.status??`queued`,c=fe[s],d=e.icon??c.icon,f=!!e.children?.length,[p,m]=(0,j.useState)(i===`expanded`||t===0);return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsxs)(`div`,{className:E(`flex items-start gap-2 px-3 py-2`,t>0&&`border-t border-border/60`),style:{paddingLeft:12+t*a},children:[f?(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:()=>m(e=>!e),"aria-expanded":p,"aria-label":p?o.collapseSubtasks:o.expandSubtasks,className:`-ml-1 mt-0.5 size-4 rounded p-0 text-muted-foreground hover:text-foreground`,children:p?(0,M.jsx)(u,{className:`size-3.5`}):(0,M.jsx)(w,{className:`size-3.5`})}):(0,M.jsx)(`span`,{"aria-hidden":!0,className:`mt-0.5 size-4`}),(0,M.jsx)(d,{className:E(`mt-[3px] size-3.5 shrink-0`,c.cls,c.spin&&`animate-spin`)}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,M.jsx)(r,{weight:s===`running`?`semibold`:`medium`,className:E(`flex-1 truncate`,s===`queued`&&`text-muted-foreground`,s===`cancelled`&&`line-through text-muted-foreground`,s===`skipped`&&`text-muted-foreground/70`),children:e.title}),(0,M.jsx)(n,{variant:X[s],children:o.statusLabels[s]}),!!e.rightSlot&&(0,M.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,className:`tabular-nums`,children:e.rightSlot})]}),!!e.body&&(0,M.jsx)(`div`,{className:`mt-2`,children:e.body})]})]}),f&&p&&(0,M.jsx)(`div`,{children:e.children.map(e=>(0,M.jsx)(Q,{item:e,depth:t+1,density:i,indent:a,strings:o},e.id))})]})}var pe={openAria:`Open artifact`,copy:`Copy`,copied:`Copied`,copyAria:`Copy artifact`,downloadAria:`Download artifact`,expandAria:`Expand artifact`};function $({title:e,subtitle:t,icon:n,copyText:i,children:a,collapsed:s=!1,onOpen:u,actions:d,onDownload:f,className:p,strings:_}){let v=C(pe,_),y=n??g,[b,x]=(0,j.useState)(!1);return(0,M.jsxs)(`div`,{className:E(`ai-artifact--component`,`overflow-hidden rounded-lg border border-border/60 bg-card`,p),children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-3 border-b border-border/60 bg-muted/20 px-3 py-2`,children:[(0,M.jsx)(D,{icon:y,tone:`muted`,size:`default`,shape:`square`}),(0,M.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,M.jsx)(r,{weight:`semibold`,className:`truncate`,children:e}),!!t&&(0,M.jsx)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:t})]}),(0,M.jsxs)(`div`,{className:`flex items-center gap-1`,children:[d?.map(e=>{let t=e.icon;return(0,M.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:e.onSelect,children:[!!t&&(0,M.jsx)(t,{className:`size-3.5`}),e.label]},e.id)}),!!i&&(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":v.copyAria,onClick:()=>{i&&(typeof navigator<`u`&&navigator.clipboard&&navigator.clipboard.writeText(i),x(!0),window.setTimeout(()=>x(!1),1500))},children:b?(0,M.jsx)(c,{className:`size-3.5 text-success`}):(0,M.jsx)(o,{className:`size-3.5`})}),!!f&&(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":v.downloadAria,onClick:f,children:(0,M.jsx)(m,{className:`size-3.5`})}),!!u&&(0,M.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":v.openAria,onClick:u,children:(0,M.jsx)(h,{className:`size-3.5`})})]})]}),!s&&!!a&&(0,M.jsx)(`div`,{className:`bg-card`,children:a})]})}$.displayName=`AiArtifact`;export{W as a,I as c,A as d,J as i,F as l,Z as n,V as o,Y as r,R as s,$ as t,N as u};