@kitn.ai/ui/dist/elements/tasks.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 xe,s as ke,r as ye,j as R,g as we,h as B,l as _,o as Ce,c as u,E as Se,S as k,n as G,i as g,u as Ie,a as T,b as D,d as m,F as W,t as y,e as Ee,f as Re}from"./chunks/define-CNSKFZCd.js";import{c as U}from"./chunks/cn-CU7UAWzk.js";import{B as ue}from"./chunks/button-DBDZebGr.js";import{P as $e}from"./chunks/progress-bar-Dwbiyv3s.js";import{C as X}from"./chunks/card-YfCyI4fH.js";import{u as Te,a as Ve,D as ze}from"./chunks/use-card-resolution-M36zVciB.js";import{e as Ae}from"./chunks/card-routing-C986KuUA.js";import{x as Le}from"./chunks/x-Ckwicf6g.js";import{c as Ne}from"./chunks/check-fhmRksq_.js";import{c as je}from"./chunks/circle-check-CJV-3Rem.js";import{c as De}from"./chunks/circle-B4fTe9v6.js";var Ue=y('<p class="pt-1 text-xs text-muted-foreground">Up to <!> selected.'),qe=y('<div role=group><div class="divide-y divide-border overflow-hidden rounded-lg border border-input">'),Be=y("<span class=sr-only>"),Me=y('<div class="flex w-full flex-wrap items-center justify-between gap-2"><span aria-live=polite class="text-xs text-muted-foreground"> selected</span><div class="ml-auto flex items-center gap-2">'),Fe=y("<label><input type=checkbox class=kai-checkbox><span>Select all"),ce=y('<span class="text-xs font-normal text-muted-foreground">'),Pe=y('<label><input type=checkbox class="kai-checkbox mt-0.5"><span class="flex flex-col gap-0.5"><span>'),Oe=y('<div class="flex items-center justify-between gap-3"><span class="text-sm font-medium text-foreground"></span><span aria-live=polite class="shrink-0 text-sm font-medium tabular-nums text-muted-foreground"> / '),_e=y('<p class="text-xs text-muted-foreground">Up to <!> selected.'),Ge=y('<div><ul class="flex flex-col gap-1">'),He=y('<div class="grid grid-rows-[0fr] group-hover:grid-rows-[1fr] group-focus-within:grid-rows-[1fr] motion-safe:transition-[grid-template-rows] motion-safe:duration-200"><span class="overflow-hidden text-xs font-normal text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 motion-safe:transition-opacity">'),Je=y('<li><label><input type=checkbox class=sr-only><span aria-hidden=true></span><span class="flex min-w-0 flex-col gap-0.5"><span>'),Ke=y('<ul class="list-disc pl-5 text-sm text-foreground">'),Qe=y('<div class="flex flex-col gap-2"><p class="flex items-center gap-2 text-sm font-medium text-foreground"><span>Selected <!> of '),We=y('<p class="text-sm text-muted-foreground">None selected'),Xe=y("<li>");const Ye="tasks";function Ze(e){if(!Array.isArray(e)||e.length===0)return{tasks:[],error:"This card couldn't be displayed."};const n=new Set,t=[];for(const a of e){if(!a||typeof a!="object")continue;const d=a;if(!(typeof d.id!="string"||d.id.length===0)&&!(typeof d.label!="string"||d.label.length===0)){if(n.has(d.id)){console.warn(`[kai-tasks] duplicate task id "${d.id}" ignored`);continue}n.add(d.id),t.push({id:d.id,label:d.label,description:typeof d.description=="string"?d.description:void 0,checked:d.checked===!0,disabled:d.disabled===!0})}}return t.length===0?{tasks:[],error:"This card couldn't be displayed."}:{tasks:t}}function et(e){return e.filter(n=>n.checked).map(n=>n.id)}function ge(e,n){return e.filter(t=>n.has(t.id)).map(t=>t.id)}function H(e){return e.filter(n=>!n.disabled).map(n=>n.id)}function tt(e,n){const t=H(e);if(t.length===0)return"unchecked";const a=t.filter(d=>n.has(d)).length;return a===0?"unchecked":a===t.length?"checked":"indeterminate"}function rt(e,n){if(e.selectAll!==!0)return!1;const t=H(n).length;return!(e.max!==void 0&&t>e.max)}function it(e){return e.mode==="progress"}function nt(e,n){return{done:e.filter(t=>n.has(t.id)).length,total:e.length}}function he(e,n){const t=e.min??(e.allowEmpty?0:1);return!(n<t||e.max!==void 0&&n>e.max)}function Y(e,n){return e.max!==void 0&&n>=e.max}function at(e,n){if(he(e,n))return;const t=e.min??(e.allowEmpty?0:1);if(n<t)return`Select at least ${t}.`;if(e.max!==void 0&&n>e.max)return`Select at most ${e.max}.`}const dt={tasks:[]};function st(e){const n=xe({cardId:"kai-tasks"},e),[t]=ke(n,["data","cardId","heading","host","hostElement","class","resolution","value","defaultValue","disabled","readonly","onValueChange","controllerRef"]),a=Te(),d=ye(),l=r=>{const o=t.host??a;o?o.emit(r):t.hostElement&&Ae(t.hostElement,r)},h=R(()=>{var r;return Ze((r=t.data)==null?void 0:r.tasks)}),w=R(()=>h().error===void 0),C=R(()=>h().error??""),v=R(()=>h().tasks),x=R(()=>t.data??dt),[I,A]=we(new Set),s=Ve({prop:()=>t.resolution,data:()=>t.data}),V=r=>{const o=new Set(v().map(i=>i.id));return r.filter(i=>o.has(i))};B(_(()=>t.data,()=>{const r=t.value??t.defaultValue??et(v());A(new Set(V(r)))})),B(_(()=>t.value,r=>{r&&A(new Set(V(r)))},{defer:!0})),B(_(I,r=>{var o;(o=t.onValueChange)==null||o.call(t,{value:ge(v(),r)})},{defer:!0})),B(_(w,r=>{l(r?{kind:"ready",cardId:t.cardId}:{kind:"error",cardId:t.cardId,message:C()})}));const $=()=>t.disabled===!0,S=()=>t.readonly===!0,L=R(()=>I().size),N=R(()=>it(x())),M=R(()=>nt(v(),I())),P=()=>x().confirmLabel??"Confirm",j=R(()=>tt(v(),I())),O=R(()=>rt(x(),v())),q=R(()=>at(x(),L())),J=R(()=>he(x(),L())&&!s.isResolved()&&!$()&&!S()),Z=(r,o,i)=>{if(i){if(Y(x(),r.size)&&!r.has(o))return r;r.add(o)}else r.delete(o);return r},K=(r,o)=>{s.isResolved()||$()||S()||A(Z(new Set(I()),r,o))},ee=r=>{if(s.isResolved()||$()||S())return;const o=new Set(I());for(const i of H(v()))r?o.add(i):o.delete(i);A(o)},Q=()=>{if(!J())return;const r={selected:ge(v(),I())};l({kind:"submit",cardId:t.cardId,data:r}),s.setLocal({kind:"submit",data:r})},te=()=>{s.isResolved()||(l({kind:"dismiss",cardId:t.cardId}),s.setLocal({kind:"dismissed"}))},re=()=>l({kind:"reopen",cardId:t.cardId});Ce(()=>{var r;(r=t.controllerRef)==null||r.call(t,{select:o=>{if(s.isResolved()||$()||S())return;if(o===void 0){ee(!0);return}const i=new Set,f=new Set(H(v()));for(const c of V(o))f.has(c)&&Z(i,c,!0);A(i)},toggle:(o,i)=>{const f=i??!I().has(o);K(o,f)},send:()=>Q(),focus:o=>{var i,f;const c=(((i=t.hostElement)==null?void 0:i.shadowRoot)??document).querySelector('[role="group"]');(f=c?.querySelector('input[type="checkbox"]')??c)==null||f.focus(o)},dismiss:()=>te(),reopen:()=>re()})}),B(()=>{var r;const o=t.hostElement;o&&(((r=s.resolution())==null?void 0:r.kind)==="submit"?o.setAttribute("data-kai-resolved","submitted"):o.removeAttribute("data-kai-resolved"))});const fe=R(()=>{var r;const o=s.resolution();if(!o||o.kind!=="submit")return;const i=(r=o.data)==null?void 0:r.selected,f=Array.isArray(i)?i:[],c=v(),p=c.filter(E=>f.includes(E.id)).map(E=>E.label);return{count:p.length,total:c.length,labels:p}}),ie=`kai-tl-reason-${d}`,ve=`kai-tl-count-${d}`,me=`kai-tl-progress-${d}`,pe=`kai-tl-heading-${d}`,ne=()=>{var r;return t.heading??((r=t.data)==null?void 0:r.heading)};return u(k,{get when(){return w()},get fallback(){return u(X,{get heading(){return t.heading},get errorMessage(){return C()}})},get children(){return u(Se,{fallback:()=>(l({kind:"error",cardId:t.cardId,message:"The card failed to render."}),u(X,{get heading(){return t.heading},errorMessage:"The card failed to render."})),get children(){return u(k,{get when(){return!s.isDeferred()},get fallback(){return u(ze,{type:Ye,get title(){var r;return t.heading??((r=t.data)==null?void 0:r.heading)},onReopen:re})},get children(){return u(X,{get heading(){return G(()=>!!N())()?void 0:ne()},get actions(){return G(()=>!!(N()||s.isResolved()||S()))()?void 0:(()=>{var r=Me(),o=r.firstChild,i=o.firstChild,f=o.nextSibling;return g(r,u(k,{get when(){var c;return((c=t.data)==null?void 0:c.dismissible)===!0},get children(){return u(ue,{type:"button",variant:"ghost",size:"icon-sm","aria-label":"Dismiss",onClick:te,get children(){return u(Le,{size:16,"aria-hidden":"true"})}})}}),o),m(o,"id",ve),g(o,L,i),g(f,u(k,{get when(){return q()},get children(){var c=Be();return m(c,"id",ie),g(c,q),c}}),null),g(f,u(ue,{type:"button",get disabled(){return!J()},get"aria-describedby"(){return q()?ie:void 0},onClick:Q,get children(){return P()}}),null),r})()},get children(){return u(k,{get when(){return!s.isResolved()},get fallback(){return u(lt,{get summary(){return fe()},get optimistic(){return s.isOptimistic()}})},get children(){return[u(k,{get when(){return N()},get children(){return u(ot,{get heading(){return ne()},headingId:pe,countId:me,get done(){return M().done},get total(){return M().total},get tasks(){return v()},uid:d,isChecked:r=>I().has(r),isBlocked:r=>$()||r.disabled===!0||!I().has(r.id)&&Y(x(),L()),onToggle:(r,o)=>K(r,o),get groupClass(){return t.class},get maxNote(){return G(()=>x().max!==void 0)()?x().max:void 0},get readonly(){return S()}})}}),u(k,{get when(){return!N()},get children(){var r=qe(),o=r.firstChild;return r.$$keydown=i=>{i.key!=="Enter"||i.target.tagName==="INPUT"||J()&&Q()},g(o,u(k,{get when(){return O()},get children(){return(()=>{const i=()=>j()==="indeterminate";return(()=>{var f=Fe(),c=f.firstChild;return c.addEventListener("change",p=>ee(p.currentTarget.checked)),Ie(p=>{B(()=>{p.indeterminate=i()})},c),T(p=>{var E=U("flex items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors",S()?"cursor-default":"cursor-pointer",j()==="checked"?"bg-accent text-accent-foreground":S()?"text-foreground":"text-foreground hover:bg-muted/50"),z=$()||S(),F=i()?"mixed":j()==="checked";return E!==p.e&&D(f,p.e=E),z!==p.t&&(c.disabled=p.t=z),F!==p.a&&m(c,"aria-checked",p.a=F),p},{e:void 0,t:void 0,a:void 0}),T(()=>c.checked=j()==="checked"),f})()})()}}),null),g(o,u(W,{get each(){return v()},children:i=>{const f=()=>I().has(i.id),c=()=>$()||i.disabled||!f()&&Y(x(),L()),p=`kai-tl-desc-${d}-${i.id}`;return(()=>{var E=Pe(),z=E.firstChild,F=z.nextSibling,be=F.firstChild;return z.addEventListener("change",b=>K(i.id,b.currentTarget.checked)),g(be,()=>i.label),g(F,u(k,{get when(){return i.description},get children(){var b=ce();return m(b,"id",p),g(b,()=>i.description),b}}),null),T(b=>{var ae=U("flex items-start gap-3 px-3 py-2.5 text-sm transition-colors",S()?"cursor-default":c()?"cursor-not-allowed opacity-60":"cursor-pointer hover:bg-muted/50",f()&&!c()?"bg-accent font-medium text-accent-foreground":"text-foreground"),de=i.id,se=c()||S(),oe=c()?"true":void 0,le=i.description?p:void 0;return ae!==b.e&&D(E,b.e=ae),de!==b.t&&m(E,"data-task-id",b.t=de),se!==b.a&&(z.disabled=b.a=se),oe!==b.o&&m(z,"aria-disabled",b.o=oe),le!==b.i&&m(z,"aria-describedby",b.i=le),b},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),T(()=>z.checked=f()),E})()}}),null),g(r,u(k,{get when(){return x().max!==void 0},get children(){var i=Ue(),f=i.firstChild,c=f.nextSibling;return c.nextSibling,g(i,()=>x().max,c),i}}),null),T(i=>{var f,c=t.heading??((f=t.data)==null?void 0:f.heading)??"Tasks",p=S()?"true":void 0,E=U("flex flex-col",t.class);return c!==i.e&&m(r,"aria-label",i.e=c),p!==i.t&&m(r,"aria-readonly",i.t=p),E!==i.a&&D(r,i.a=E),i},{e:void 0,t:void 0,a:void 0}),r}})]}})}})}})}})}})}function ot(e){return(()=>{var n=Ge(),t=n.firstChild;return g(n,u(k,{get when(){return e.heading},get children(){var a=Oe(),d=a.firstChild,l=d.nextSibling,h=l.firstChild;return g(d,()=>e.heading),g(l,()=>e.done,h),g(l,()=>e.total,null),T(w=>{var C=e.headingId,v=e.countId;return C!==w.e&&m(d,"id",w.e=C),v!==w.t&&m(l,"id",w.t=v),w},{e:void 0,t:void 0}),a}}),t),g(n,u($e,{get value(){return e.done},get max(){return e.total},tone:"success",get"aria-labelledby"(){return G(()=>!!e.heading)()?e.headingId:void 0},get"aria-label"(){return e.heading?void 0:"Task progress"}}),t),g(t,u(W,{get each(){return e.tasks},children:a=>{const d=()=>e.isChecked(a.id),l=()=>e.isBlocked(a),h=`kai-tl-pdesc-${e.uid}-${a.id}`;return(()=>{var w=Je(),C=w.firstChild,v=C.firstChild,x=v.nextSibling,I=x.nextSibling,A=I.firstChild;return v.addEventListener("change",s=>e.onToggle(a.id,s.currentTarget.checked)),g(x,u(k,{get when(){return d()},get fallback(){return u(De,{size:18})},get children(){return u(je,{size:18,class:"text-foreground"})}})),g(A,()=>a.label),g(I,u(k,{get when(){return a.description},get children(){return u(k,{get when(){return d()},get fallback(){return(()=>{var s=ce();return m(s,"id",h),g(s,()=>a.description),s})()},get children(){var s=He(),V=s.firstChild;return m(V,"id",h),g(V,()=>a.description),s}})}}),null),T(s=>{var V=U("group flex items-start gap-3 rounded-lg px-2.5 py-2 text-sm transition-colors",!e.readonly&&"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",e.readonly?"cursor-default":l()?"cursor-not-allowed opacity-60":"cursor-pointer hover:bg-muted/50"),$=a.id,S=!e.readonly&&d()?0:void 0,L=d()?a.label:void 0,N=d()&&a.description?h:void 0,M=l()||e.readonly,P=l()?"true":void 0,j=a.description?h:void 0,O=U("mt-0.5 shrink-0 text-muted-foreground",d()&&"motion-safe:transition-transform motion-safe:group-hover:scale-110"),q=U("font-medium text-foreground",d()&&"line-through opacity-70 motion-safe:transition-opacity motion-safe:group-hover:opacity-100");return V!==s.e&&D(C,s.e=V),$!==s.t&&m(C,"data-task-id",s.t=$),S!==s.a&&m(C,"tabindex",s.a=S),L!==s.o&&m(C,"aria-label",s.o=L),N!==s.i&&m(C,"aria-describedby",s.i=N),M!==s.n&&(v.disabled=s.n=M),P!==s.s&&m(v,"aria-disabled",s.s=P),j!==s.h&&m(v,"aria-describedby",s.h=j),O!==s.r&&D(x,s.r=O),q!==s.d&&D(A,s.d=q),s},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0}),T(()=>v.checked=d()),w})()}})),g(n,u(k,{get when(){return e.maxNote!==void 0},get children(){var a=_e(),d=a.firstChild,l=d.nextSibling;return l.nextSibling,g(a,()=>e.maxNote,l),a}}),null),T(a=>{var d=U("flex flex-col gap-3",e.groupClass),l=e.heading?e.headingId:void 0,h=e.heading?void 0:"Checklist";return d!==a.e&&D(n,a.e=d),l!==a.t&&m(t,"aria-labelledby",a.t=l),h!==a.a&&m(t,"aria-label",a.a=h),a},{e:void 0,t:void 0,a:void 0}),n})()}function lt(e){return(()=>{var n=Qe(),t=n.firstChild,a=t.firstChild,d=a.firstChild,l=d.nextSibling;return l.nextSibling,g(t,u(Ne,{size:16,"aria-hidden":"true"}),a),g(a,()=>e.summary.count,l),g(a,()=>e.summary.total,null),g(n,u(k,{get when(){return e.summary.labels.length>0},get fallback(){return We()},get children(){var h=Ke();return g(h,u(W,{get each(){return e.summary.labels},children:w=>(()=>{var C=Xe();return g(C,w),C})()})),h}}),null),T(()=>m(n,"role",e.optimistic?"status":void 0)),n})()}Ee(["keydown"]),Re("kai-tasks",{data:void 0,cardId:void 0,heading:void 0,resolution:void 0,value:void 0,defaultValue:void 0,disabled:!1,readonly:!1},(e,{element:n,dispatch:t,flag:a,expose:d})=>{let l;return d({select:h=>l?.select(h),toggle:(h,w)=>l?.toggle(h,w),send:()=>l?.send(),focus:h=>l?.focus(h),dismiss:()=>l?.dismiss(),reopen:()=>l?.reopen()}),u(st,{get data(){return e.data},get cardId(){return e.cardId??(n.id||"kai-tasks")},get heading(){return e.heading},get resolution(){return e.resolution},get value(){return e.value},get defaultValue(){return e.defaultValue},get disabled(){return a("disabled")},get readonly(){return a("readonly")},onValueChange:h=>t("kai-value-change",h),controllerRef:h=>l=h,hostElement:n})});