@kitn.ai/ui/dist/elements/confirm-card.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{m as N,s as O,j as m,h as T,l as F,o as H,c as o,E as L,S as v,i as c,a as $,b as U,d as z,F as G,u as A,t as h,e as J,f as K}from"./chunks/define-CNSKFZCd.js";import{c as P}from"./chunks/cn-CU7UAWzk.js";import{B as j}from"./chunks/button-DBDZebGr.js";import{C as x}from"./chunks/card-YfCyI4fH.js";import{u as Q,a as V,D as W}from"./chunks/use-card-resolution-M36zVciB.js";import{e as X}from"./chunks/card-routing-C986KuUA.js";import{t as Y}from"./chunks/triangle-alert-B07fX3Q8.js";import{c as Z}from"./chunks/check-fhmRksq_.js";import{x as _}from"./chunks/x-Ckwicf6g.js";var ee=h('<div class="flex items-center gap-2 text-sm font-medium text-destructive dark:text-red-400"><span>Heads up'),te=h('<p class="text-sm font-semibold text-foreground">'),re=h('<p class="text-sm text-foreground">'),ae=h("<div>"),ne=h('<div class="flex w-full flex-wrap items-center justify-between gap-2"><div class="ml-auto flex flex-wrap items-center gap-2">'),ie=h('<div class="ml-auto flex items-center gap-2 text-sm font-medium text-foreground"><span>');const oe="confirm",de=new Set(["primary","default","destructive"]);function se(d){switch(d){case"primary":return"default";case"destructive":return"destructive";case"default":case void 0:return"outline";default:return console.warn(`[kai-confirm] unknown action style "${d}"; using default`),"outline"}}function le(d){if(!Array.isArray(d)||d.length===0)return{actions:[],error:"This card couldn't be displayed."};const l=new Set,r=[];for(const g of d){if(!g||typeof g!="object")continue;const a=g;if(typeof a.id!="string"||a.id.length===0||typeof a.label!="string"||a.label.length===0)continue;if(l.has(a.id)){console.warn(`[kai-confirm] duplicate action id "${a.id}" ignored`);continue}l.add(a.id);const s=de.has(a.style)?a.style:void 0;a.style!==void 0&&s===void 0&&console.warn(`[kai-confirm] unknown action style "${String(a.style)}"; using default`),r.push({id:a.id,label:a.label,style:s,payload:a.payload,default:a.default===!0})}return r.length===0?{actions:[],error:"This card couldn't be displayed."}:{actions:r}}function ue(d){var l;return(l=d.find(r=>r.default))==null?void 0:l.id}function ce(d){const l=N({cardId:"kai-confirm",autofocus:!1},d),[r]=O(l,["data","cardId","heading","host","hostElement","autofocus","class","resolution","controllerRef"]),g=Q(),a=e=>{const i=r.host??g;i?i.emit(e):r.hostElement&&X(r.hostElement,e)},s=m(()=>{var e;return le((e=r.data)==null?void 0:e.actions)}),I=m(()=>s().error===void 0),E=m(()=>s().error??""),p=m(()=>s().actions),q=()=>{var e;return((e=r.data)==null?void 0:e.tone)??"default"},D=()=>q()==="danger",k=m(()=>ue(p())),f=V({prop:()=>r.resolution,data:()=>r.data}),M=m(()=>{const e=f.resolution();if(!e||e.kind!=="action")return;const i=p().find(t=>t.id===e.action);return{label:i?.label??e.action}});T(F(I,e=>{a(e?{kind:"ready",cardId:r.cardId}:{kind:"error",cardId:r.cardId,message:E()})}));const b=e=>{f.isResolved()||(a({kind:"action",cardId:r.cardId,action:e.id,...e.payload!==void 0?{payload:e.payload}:{}}),f.setLocal({kind:"action",action:e.id,...e.payload!==void 0?{payload:e.payload}:{}}))},R=()=>{f.isResolved()||(a({kind:"dismiss",cardId:r.cardId}),f.setLocal({kind:"dismissed"}))},C=()=>a({kind:"reopen",cardId:r.cardId});let S,y;const B=()=>y?y.querySelector('button[data-kai-default="true"]')??y.querySelector("button[data-action-id]"):null;return H(()=>{var e;(e=r.controllerRef)==null||e.call(r,{focus:i=>{var t;return(t=B())==null?void 0:t.focus(i)},confirm:i=>{const t=p(),n=i??k();if(n===void 0)return;const u=t.find(w=>w.id===n);u&&b(u)},dismiss:()=>R(),reopen:()=>C()})}),T(()=>{const e=r.hostElement;if(!e)return;const i=f.resolution();i&&i.kind==="action"?e.setAttribute("data-kai-resolved",i.action):e.removeAttribute("data-kai-resolved")}),o(v,{get when(){return I()},get fallback(){return o(x,{get heading(){return r.heading},get errorMessage(){return E()}})},get children(){return o(L,{fallback:()=>(a({kind:"error",cardId:r.cardId,message:"The card failed to render."}),o(x,{get heading(){return r.heading},errorMessage:"The card failed to render."})),get children(){return o(v,{get when(){return!f.isDeferred()},get fallback(){return o(W,{type:oe,get title(){return r.heading},onReopen:C})},get children(){return o(x,{get heading(){return r.heading},get actions(){return o(v,{get when(){return!f.isResolved()},get fallback(){return(()=>{var e=ie(),i=e.firstChild;return c(e,o(Z,{size:16,"aria-hidden":"true"}),i),c(i,()=>{var t;return(t=M())==null?void 0:t.label}),$(()=>z(e,"role",f.isOptimistic()?"status":void 0)),e})()},get children(){var e=ne(),i=e.firstChild;c(e,o(v,{get when(){var n;return((n=r.data)==null?void 0:n.dismissible)===!0},get children(){return o(j,{type:"button",variant:"ghost",size:"icon-sm","aria-label":"Dismiss",onClick:R,get children(){return o(_,{size:16,"aria-hidden":"true"})}})}}),i);var t=y;return typeof t=="function"?A(t,i):y=i,c(i,o(G,{get each(){return p()},children:n=>o(j,{type:"button",get variant(){return se(n.style)},get"data-action-id"(){return n.id},get"data-kai-default"(){return n.default?"true":void 0},ref:u=>{r.autofocus&&n.id===k()&&queueMicrotask(()=>u.focus())},onClick:()=>b(n),get children(){return n.label}})})),e}})},get children(){var e=ae();e.$$keydown=t=>{if(t.key!=="Enter"||t.target.tagName==="BUTTON")return;const n=k();if(n===void 0)return;const u=p().find(w=>w.id===n);u&&b(u)};var i=S;return typeof i=="function"?A(i,e):S=e,c(e,o(v,{get when(){return D()},get children(){var t=ee(),n=t.firstChild;return c(t,o(Y,{size:16,class:"shrink-0","aria-hidden":"true"}),n),t}}),null),c(e,o(v,{get when(){var t;return(t=r.data)==null?void 0:t.heading},get children(){var t=te();return c(t,()=>{var n;return(n=r.data)==null?void 0:n.heading}),t}}),null),c(e,o(v,{get when(){var t;return(t=r.data)==null?void 0:t.body},get children(){var t=re();return c(t,()=>{var n;return(n=r.data)==null?void 0:n.body}),t}}),null),$(t=>{var n=P("flex flex-col gap-2",r.class),u=k()!==void 0?0:void 0;return n!==t.e&&U(e,t.e=n),u!==t.t&&z(e,"tabindex",t.t=u),t},{e:void 0,t:void 0}),e}})}})}})}})}J(["keydown"]),K("kai-confirm",{data:void 0,cardId:void 0,heading:void 0,autofocus:!1,resolution:void 0},(d,{element:l,flag:r,expose:g})=>{let a;return g({focus:s=>a?.focus(s),confirm:s=>a?.confirm(s),dismiss:()=>a?.dismiss(),reopen:()=>a?.reopen()}),o(ce,{get data(){return d.data},get cardId(){return d.cardId??(l.id||"kai-confirm")},get heading(){return d.heading},get autofocus(){return r("autofocus")},get resolution(){return d.resolution},controllerRef:s=>a=s,hostElement:l})});