@kitn.ai/ui/dist/elements/cards.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{c as o,i as l,t as m,f as x,g as b,h as v,l as C,o as f,F as I,D as w,S,p as A}from"./chunks/define-CNSKFZCd.js";import{e as E,C as k,r as L}from"./chunks/card-routing-C986KuUA.js";import{C as U}from"./chunks/card-YfCyI4fH.js";import{t as $}from"./chunks/triangle-alert-B07fX3Q8.js";import"./form.js";import"./confirm-card.js";import"./tasks.js";import"./choice.js";import"./link-preview.js";import"./embed.js";const g={form:"kai-form",confirm:"kai-confirm",tasks:"kai-tasks",choice:"kai-choice",link:"kai-link-preview",embed:"kai-embed"};function D(e){return e?{...g,...e}:{...g}}var F=m('<div role=alert class="flex items-center gap-2 p-4 text-sm text-muted-foreground"><span>Unsupported card type: <code class=font-mono>');function R(e){return o(U,{get children(){var t=F(),s=t.firstChild,d=s.firstChild,c=d.nextSibling;return l(t,o($,{class:"size-4 shrink-0 text-destructive dark:text-red-400","aria-hidden":"true"}),s),l(c,()=>e.type),t}})}var q=m('<div class="flex flex-col gap-3">');function z(e){switch(e.kind){case"action":return{kind:"action",action:e.action,payload:e.payload};case"submit":return{kind:"submit",data:e.data};case"dismiss":return{kind:"dismissed"};default:return}}function N(e){let t;return v(()=>{t&&(t.data=e.envelope.data,t.cardId=e.envelope.id,e.envelope.title!=null&&(t.heading=e.envelope.title),t.resolution=e.envelope.resolution,t.setAttribute("theme",e.theme),t.setAttribute("data-card-id",e.envelope.id))}),f(()=>{e.tag||e.emit({kind:"error",cardId:e.envelope.id,message:`Unsupported card type: ${e.envelope.type}`})}),o(S,{get when(){return e.tag},get fallback(){return o(R,{get type(){return e.envelope.type},get cardId(){return e.envelope.id}})},children:s=>o(w,{get component(){return s()},ref(d){var c=t;typeof c=="function"?c(d):t=d}})})}x("kai-cards",{cards:void 0,types:void 0,policy:void 0},(e,{element:t,dispatch:s,expose:d})=>{const[c,p]=b(e.cards??[]);v(C(()=>e.cards,r=>p(r??[]),{defer:!0})),f(()=>{const r=a=>{const i=a.detail;L(e.policy??{},i);const n=z(i);n&&s("kai-card-resolved",{cardId:i.cardId,resolution:n})};t.addEventListener(k,r),A(()=>t.removeEventListener(k,r))});const u=(r,a)=>p(i=>i.some(n=>n.id===r)?i.map(n=>n.id===r?{...n,resolution:a}:n):i);d({resolve:(r,a)=>u(r,a),dismiss:r=>u(r,{kind:"dismissed"}),getCard:r=>{var a;return((a=t.shadowRoot)==null?void 0:a.querySelector(`[data-card-id="${CSS.escape(r)}"]`))??null}});const h=()=>e.theme??"auto",y=()=>D(e.types);return(()=>{var r=q();return l(r,o(I,{get each(){return c()},children:a=>o(N,{envelope:a,get tag(){return y()[a.type]},get theme(){return h()},emit:i=>E(t,i)})})),r})()});