@kitn.ai/ui/dist/elements/command.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{i as u,c,F as $,S as f,a as x,d as g,b as R,t as m,e as S,f as A,r as E,g as D,j as w,h as q,l as N}from"./chunks/define-CNSKFZCd.js";import{c as F}from"./chunks/cn-CU7UAWzk.js";import{r as H}from"./chunks/icon-CAyRqVrg.js";import{K}from"./chunks/kbd-DbyVrlnU.js";var O=m("<div>"),T=m('<div class="px-3 py-4 text-center text-sm text-muted-foreground select-none">'),U=m('<div class="px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground select-none">'),B=m('<span class="min-w-0 truncate text-muted-foreground">'),M=m('<button role=option><span class="font-medium whitespace-nowrap shrink-0">'),Q=m('<span part=shortcut class="ml-auto shrink-0 pl-3">');function W(s){const d=()=>s.groups.some(l=>l.items.length>0);return(()=>{var l=O();return u(l,c(f,{get when(){return d()},get fallback(){return(()=>{var o=T();return u(o,()=>s.emptyLabel??"No results"),o})()},get children(){return c($,{get each(){return s.groups},children:o=>c(f,{get when(){return o.items.length>0},get children(){return[c(f,{get when(){return o.group},get children(){var i=U();return u(i,()=>o.group),i}}),c($,{get each(){return o.items},children:i=>(()=>{var a=M(),p=a.firstChild;return a.$$click=()=>s.onSelect(i.id),a.$$mousedown=r=>r.preventDefault(),u(a,c(f,{get when(){return i.icon},children:r=>H(r(),{imgClass:"size-4 shrink-0 rounded object-cover",spanClass:"flex size-4 shrink-0 items-center justify-center text-sm",ariaHidden:!0})}),p),u(p,()=>i.label),u(a,c(f,{get when(){return i.description},get children(){var r=B();return u(r,()=>i.description),r}}),null),u(a,c(f,{get when(){return i.shortcut},children:r=>(()=>{var v=Q();return u(v,c(K,{get keys(){return r()},platform:"auto",size:"sm"})),v})()}),null),x(r=>{var v=i.id===s.activeId,b=F("flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors",i.id===s.activeId?"bg-muted text-foreground":"text-foreground hover:bg-muted");return v!==r.e&&g(a,"aria-selected",r.e=v),b!==r.t&&R(a,r.t=b),r},{e:void 0,t:void 0}),a})()})]}})})}})),x(o=>{var i=d()?"listbox":void 0,a=d()?s.ariaLabel??"Command palette":void 0,p=s.id;return i!==o.e&&g(l,"role",o.e=i),a!==o.t&&g(l,"aria-label",o.t=a),p!==o.a&&g(l,"id",o.a=p),o},{e:void 0,t:void 0,a:void 0}),l})()}S(["mousedown","click"]);var _=m('<div class="flex flex-col overflow-hidden"><div class="border-b border-border px-3 py-2"><input type=text role=combobox aria-expanded=true aria-haspopup=listbox aria-autocomplete=list class="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none"></div><div class="overflow-y-auto max-h-[320px]">');A("kai-command",{items:void 0,placeholder:void 0,emptyLabel:void 0},(s,{dispatch:d,element:l,expose:o})=>{const i=E(),[a,p]=D(""),[r,v]=D(void 0),b=()=>s.items??[],y=w(()=>{const e=a().toLowerCase();return e?b().filter(t=>{var n;return t.label.toLowerCase().includes(e)||(((n=t.description)==null?void 0:n.toLowerCase().includes(e))??!1)}):b()}),j=w(()=>{const e=[];for(const t of y()){let n=e.find(h=>h.group===t.group);n||(n={group:t.group,items:[]},e.push(n)),n.items.push({id:t.id,label:t.label,icon:t.icon,description:t.description,shortcut:t.shortcut})}return e}),k=w(()=>y().map(e=>e.id));q(()=>{const e=k(),t=r();(!t||!e.includes(t))&&v(e[0])}),q(N(r,(e,t)=>{e!==t&&d("kai-active-change",{id:e})}));function C(e){d("kai-select",{id:e})}function z(e){const t=e.currentTarget.value;p(t),d("kai-query-change",{value:t})}function I(e){const t=k();if(!t.length)return;const n=r(),h=n!==void 0?t.indexOf(n):-1;if(e.key==="ArrowDown")e.preventDefault(),v(t[(h+1)%t.length]);else if(e.key==="ArrowUp")e.preventDefault(),v(t[(h-1+t.length)%t.length]);else if(e.key==="Enter"){e.preventDefault();const L=r();L!==void 0&&C(L)}else e.key==="Escape"&&(e.preventDefault(),p(""),d("kai-query-change",{value:""}))}return o({focus:e=>{var t,n;return(n=(t=l.shadowRoot)==null?void 0:t.querySelector('input[role="combobox"], input'))==null?void 0:n.focus(e)},blur:()=>{var e,t;return(t=(e=l.shadowRoot)==null?void 0:e.querySelector('input[role="combobox"], input'))==null?void 0:t.blur()},clear:()=>{p(""),d("kai-query-change",{value:""})}}),(()=>{var e=_(),t=e.firstChild,n=t.firstChild,h=t.nextSibling;return n.$$keydown=I,n.$$input=z,g(n,"aria-controls",i),u(h,c(W,{id:i,ariaLabel:"Results",get groups(){return j()},get activeId(){return r()},onSelect:C,get emptyLabel(){return s.emptyLabel??"No results"}})),x(()=>g(n,"placeholder",s.placeholder??"Search\u2026")),x(()=>n.value=a()),e})()}),S(["input","keydown"]);