UNPKG

@kitn.ai/ui

Version:

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

66 lines (65 loc) 21.4 kB
import{g as _,r as Ye,j as J,h as de,o as ue,l as Ne,i as E,u as De,a as q,d as L,b as V,z as Z,c as O,F as $e,S as z,t as S,p as Je,e as Ve}from"./define-CNSKFZCd.js";import{c as Q}from"./cn-CU7UAWzk.js";import{u as Ze,c as Qe,a as et}from"./overlay-B1-MBI6h.js";function I(t){if(t==null)return[];if(typeof t=="string")return t.length?[{type:"text",text:t}]:[];const n=[];for(const l of t)if(l.type==="text"){if(!l.text)continue;const i=n[n.length-1];i&&i.type==="text"?n[n.length-1]={type:"text",text:i.text+l.text}:n.push({type:"text",text:l.text})}else n.push({type:"entity",entity:l.entity});return n}function ee(t,n){let l="";for(const i of t)i.type==="text"?l+=i.text:l+=i.entity.promptText??i.entity.label;return l}function pe(t){return t.filter(n=>n.type==="entity").map(n=>n.entity)}function te(t){return t.every(n=>n.type==="text"&&n.text.length===0)}const C="\u200B",fe="data-kai-entity",he=new WeakMap;function P(t){return!!t&&t.nodeType===1&&t.hasAttribute(fe)}function ne(t){return t.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_TEXT,{acceptNode(n){let l=n.parentElement;for(;l&&l!==t;){if(l.hasAttribute(fe))return NodeFilter.FILTER_REJECT;l=l.parentElement}return NodeFilter.FILTER_ACCEPT}})}function tt(t){switch(t){case"skill":return"/";case"agent":return"@";default:return""}}function Le(t){const n=l=>`<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${l}</svg>`;switch(t){case"agent":return n('<rect x="4" y="8" width="16" height="12" rx="3"/><path d="M12 4.5V8M9.5 13.5v1.5M14.5 13.5v1.5"/><circle cx="12" cy="3" r="1.2"/>');case"plugin":return n('<path d="M9 2v4M15 2v4M6 6h12v5a6 6 0 0 1-12 0zM12 17v5"/>');default:return""}}function Oe(t,n,l){const i=t.createElement("span");i.setAttribute(fe,""),i.setAttribute("contenteditable","false"),i.dataset.kind=n.kind,i.dataset.id=n.id,i.className="kai-composer-pill";const u=tt(n.kind);if(u){const s=t.createElement("span");s.className="kai-composer-pill-sigil",s.setAttribute("aria-hidden","true"),s.textContent=u,i.appendChild(s)}else{const s=n.icon??l?.[n.kind];if(s){const p=t.createElement("img");p.src=s,p.alt="",p.className="kai-composer-pill-icon",i.appendChild(p)}else{const p=Le(n.kind);if(p){const h=t.createElement("span");h.className="kai-composer-pill-icon kai-composer-pill-glyph",h.setAttribute("aria-hidden","true"),h.innerHTML=p,i.appendChild(h)}}}return i.appendChild(t.createTextNode(n.label)),he.set(i,n),i}function N(t){const n=[],l=t.childNodes;return l.forEach((i,u)=>{if(P(i)){const s=he.get(i),p=i;n.push({type:"entity",entity:s??{kind:p.dataset.kind??"",id:p.dataset.id??"",label:p.textContent??""}})}else if(i.nodeType===1&&i.tagName==="BR"){if(u===l.length-1)return;n.push({type:"text",text:` `})}else i.nodeType===3&&n.push({type:"text",text:(i.textContent??"").split(C).join("")})}),I(n)}function re(t,n,l=document,i){t.textContent="";for(const u of n)u.type==="text"?t.appendChild(l.createTextNode(u.text)):(t.appendChild(Oe(l,u.entity,i)),t.appendChild(l.createTextNode(C)))}function nt(t,n,l){if(n<0||n>t.length)return null;for(let i=n-1;i>=0;i--){const u=t[i];if(/\s/.test(u))return null;if(l.includes(u))return i===0||/\s/.test(t[i-1])?{char:u,query:t.slice(i+1,n),start:i}:null}return null}function rt(t,n,l){if(!l.length)return null;const i=l.map(p=>p.char),u=nt(t,n,i);if(!u)return null;const s=l.find(p=>p.char===u.char);return s?{def:s,query:u.query,start:u.start}:null}function ot(t){return t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function it(t,n){const l=[];for(const s of n){let p,h;typeof s=="string"?(p=new RegExp(ot(s),"gi"),h=void 0):(p=new RegExp(s.pattern,s.flags??"gi"),h=s.class),p.lastIndex=0;let v;for(;(v=p.exec(t))!==null;){const x=v.index,f=x+v[0].length;if(f===x){p.lastIndex=x+1;continue}l.push({start:x,end:f,class:h})}}l.sort((s,p)=>s.start-p.start);const i=[];let u=-1;for(const s of l)s.start>=u&&(i.push(s),u=s.end);return i}function lt(){try{return typeof CSS<"u"&&typeof CSS.highlights<"u"&&typeof Highlight<"u"}catch{return!1}}const at="kai-composer-highlight";function st(t,n,l,i=at){if(!lt())return;const u=CSS.highlights;if(n.length===0){u.delete(i);return}const s=[];let p=0;const h=t.ownerDocument,v=ne(t);let x=v.nextNode();for(;x;){const w=x.textContent??"",g=[];for(let k=0;k<w.length;k++)w[k]!==l&&g.push(k);if(g.length>0){const k=new Int32Array(g.length);for(let m=0;m<g.length;m++)k[m]=g[m];s.push({node:x,strippedStart:p,strippedToRaw:k}),p+=g.length}x=v.nextNode()}function f(w){let g=0,k=s.length-1;for(;g<=k;){const m=g+k>>1,R=s[m],T=R.strippedStart+R.strippedToRaw.length;if(w<R.strippedStart)k=m-1;else if(w>=T)g=m+1;else{const oe=w-R.strippedStart;return{node:R.node,rawOffset:R.strippedToRaw[oe]}}}if(s.length>0){const m=s[s.length-1];if(w-m.strippedStart===m.strippedToRaw.length)return{node:m.node,rawOffset:m.strippedToRaw[m.strippedToRaw.length-1]+1}}return null}const b=[];for(const w of n){const g=f(w.start),k=f(w.end);if(!g||!k)continue;const m=h.createRange();m.setStart(g.node,g.rawOffset),m.setEnd(k.node,k.rawOffset),b.push(m)}if(b.length===0){u.delete(i);return}const D=new Highlight(...b);u.set(i,D)}function ct(t,n=200){let l=[t],i=0;return{record(u,s){if(s&&i===l.length-1){l[i]=u;return}l=l.slice(0,i+1),l.push(u),l.length>n?l.shift():i++},undo(){return i===0?null:(i--,l[i])},redo(){return i>=l.length-1?null:(i++,l[i])},reset(u){l=[u],i=0},canUndo(){return i>0},canRedo(){return i<l.length-1},size(){return l.length}}}var dt=S("<style>"),ut=S(`<style> .kai-composer-pill { display: inline-flex; align-items: center; gap: 0.2rem; /* middle (not baseline): a flex pill's baseline differs with/without an icon, which misaligns adjacent pills \u2014 middle aligns them consistently. */ vertical-align: middle; height: 1.5em; /* Asymmetric margin: a roomier trailing gap (so typed text isn't flush after a pill) + a smaller leading gap. */ margin: 0 0.3rem 0 0.1rem; border-radius: 0.375rem; font-weight: 500; white-space: nowrap; user-select: none; cursor: default; box-sizing: border-box; line-height: 1; } /* Skills + agents: LIGHT \u2014 decorated inline text led by a sigil, NOT a chip. A distinct colour per kind (overridable); the sigil is dimmer than the label. (A GUI affords this richer-but-light look; a CLI can't.) */ .kai-composer-pill[data-kind="skill"], .kai-composer-pill[data-kind="agent"] { padding: 0 0.1rem; background: transparent; /* Read like a command, not a title \u2014 lowercase the DISPLAY only; the entity label + emitted payload keep the consumer's original casing. */ text-transform: lowercase; } .kai-composer-pill[data-kind="skill"] { color: var(--kai-pill-skill, #2563eb); } .kai-composer-pill[data-kind="agent"] { color: var(--kai-pill-agent, #7c3aed); } /* Brighter hues on dark so they don't muddy against a dark field. The consumer's --kai-pill-* override still wins (it's the var value); only the FALLBACK shifts per scheme. */ @media (prefers-color-scheme: dark) { .kai-composer-pill[data-kind="skill"] { color: var(--kai-pill-skill, #6ea8fe); } .kai-composer-pill[data-kind="agent"] { color: var(--kai-pill-agent, #c4a7fc); } } .kai-composer-pill-sigil { opacity: 0.6; font-weight: 600; } /* Plugins (and any other/unknown kind): the richer CHIP \u2014 background + icon \u2014 so a composite bundle reads differently at a glance. */ .kai-composer-pill:not([data-kind="skill"]):not([data-kind="agent"]) { padding: 0 0.4rem; background-color: color-mix(in srgb, currentColor 10%, transparent); } /* Selected (caret arrowed onto the pill): a highlight box, like Claude Code web. Tinted by the pill's own colour via currentColor. */ .kai-composer-pill[data-selected] { background-color: color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); } /* Fixed height + an icon never taller than the box \u2192 iconed and iconless pills are exactly the same height (no baseline shift in the line). */ .kai-composer-pill-icon { width: 1em; height: 1em; flex-shrink: 0; } img.kai-composer-pill-icon { border-radius: 9999px; object-fit: cover; } .kai-composer-pill-glyph { display: inline-flex; align-items: center; justify-content: center; opacity: 0.8; } .kai-composer-pill-glyph svg { width: 1em; height: 1em; display: block; } /* The editable is the containing block for the placeholder pseudo-element. */ [data-kai-composer-editable] { position: relative; } /* Placeholder via pseudo-element \u2014 exempt from axe color-contrast like a native &lt;textarea> placeholder. position:absolute (with auto offsets = its static text-origin spot) takes it OUT of flow, so the caret sits at the START of the field instead of after the placeholder text. */ [data-kai-composer-editable].kai-composer-empty::before { content: attr(data-placeholder); position: absolute; color: var(--color-muted-foreground, #9ca3af); pointer-events: none; } `),pt=S("<div class=relative><div data-kai-composer-editable role=textbox aria-multiline=true>"),ft=S("<div role=listbox aria-label=Suggestions style=position:fixed>"),ht=S('<div class="px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground select-none">'),gt=S('<span class="text-muted-foreground truncate min-w-0">'),mt=S('<button role=option><span class="font-medium whitespace-nowrap shrink-0">'),yt=S('<span class="kai-composer-pill-glyph w-4 h-4 shrink-0"aria-hidden=true>'),kt=S('<img alt class="w-4 h-4 rounded object-cover shrink-0">'),vt=S("<div>");function A(t){var n;const l=t.getRootNode();return typeof ShadowRoot<"u"&&l instanceof ShadowRoot&&typeof l.getSelection=="function"?l.getSelection():((n=t.ownerDocument)==null?void 0:n.getSelection())??null}function Ie(t){let n="";const l=ne(t);let i=l.nextNode();for(;i;)n+=(i.textContent??"").split(C).join(""),i=l.nextNode();return n}function ge(t){const n=A(t);if(!n||n.rangeCount===0)return 0;const l=n.getRangeAt(0);if(!l.collapsed)return 0;const{startContainer:i,startOffset:u}=l;let s=0;const p=ne(t);let h=p.nextNode();for(;h;){if(h===i){const v=(h.textContent??"").slice(0,u);return s+=v.split(C).join("").length,s}s+=(h.textContent??"").split(C).join("").length,h=p.nextNode()}return s}function xt(t){const n=t.ownerDocument,l=A(t);if(!l||l.rangeCount===0)return null;const i=l.getRangeAt(0).cloneRange();i.collapse(!0);const u=i.getClientRects();if(u.length>0&&(u[0].width>0||u[0].height>0))return u[0];const s=n.createElement("span");s.textContent="\u200B",s.style.position="absolute",s.style.visibility="hidden",i.insertNode(s);const p=s.getBoundingClientRect();return s.remove(),p.width>0||p.height>0?p:null}function bt(t,n){const l=A(t);if(!l)return;const i=t.ownerDocument.createRange(),u=ne(t);let s=n,p=u.nextNode(),h=!1;for(;p;){const v=p.textContent??"",x=v.split(C).join("").length;if(s<=x){let f=0,b=0;for(;f<v.length&&b<s;)v[f]!==C&&b++,f++;for(;f<v.length&&v[f]===C;)f++;i.setStart(p,f),h=!0;break}s-=x,p=u.nextNode()}h?i.collapse(!0):(i.selectNodeContents(t),i.collapse(!1)),l.removeAllRanges(),l.addRange(i)}function wt(t){let n;const[l,i]=_(),u=`kai-composer-highlight-${Ye()}`,[s,p]=_(te(I(t.value))),[h,v]=_(null),x=e=>{const r=h();r&&r!==e&&r.removeAttribute("data-selected"),e.setAttribute("data-selected",""),v(e)},f=()=>{const e=h();e&&(e.removeAttribute("data-selected"),v(null))},b=ct({doc:I(t.value),caret:0});let D=0;const w=500,[g,k]=_(null),[m,R]=_(0),T=J(()=>{const e=g();if(!(e!=null&&e.def.items))return[];const r=new Set(pe(N(n)).map(o=>`${o.kind}:${o.id}`)),a=e.query.toLowerCase();return e.def.items.filter(o=>{var c;const d=o.kind??e.def.kind;return r.has(`${d}:${o.id}`)?!1:a===""?!0:o.label.toLowerCase().includes(a)||(((c=o.description)==null?void 0:c.toLowerCase().includes(a))??!1)})}),oe=J(()=>{const e=[];return T().forEach((r,a)=>{let o=e.find(c=>c.group===r.group);o||(o={group:r.group,items:[]},e.push(o)),o.items.push({item:r,index:a})}),e}),ie=J(()=>T().length>0),me=e=>{var r;return e.kind??((r=g())==null?void 0:r.def.kind)??""},Be=e=>{var r;return e.icon??((r=t.kindIcons)==null?void 0:r[me(e)])};de(()=>{const e=T().length;m()>=e&&R(Math.max(0,e-1))});const Me=J(()=>{const e=g();if(!e)return;const r=e.caretRect;return{getBoundingClientRect:()=>r}}),{pos:ye,hidden:je}=Ze(Me,l,{placement:"bottom-start",gutter:4}),{present:qe,state:Ke,setRef:Fe}=Qe(ie);et({enabled:ie,onDismiss:()=>B(),refs:()=>[n,l()]});function B(){var e;g()&&(k(null),(e=t.onTriggerClose)==null||e.call(t))}const M=()=>{const e=N(n);return{doc:e,text:ee(e),entities:pe(e)}};function X(){const e=t.highlights,r=e!=null&&e.length?it(Ie(n),e):[];st(n,r,C,u)}ue(()=>{re(n,I(t.value),n.ownerDocument,t.kindIcons),p(te(N(n))),X(),b.reset({doc:N(n),caret:0})}),de(Ne(()=>t.value,e=>{ee(I(e))!==ee(N(n))&&(f(),re(n,I(e),n.ownerDocument,t.kindIcons),p(te(N(n))),X(),b.reset({doc:N(n),caret:0}))},{defer:!0})),de(Ne(()=>t.highlights,()=>X(),{defer:!0}));function ke(){var e;const r=t.triggers;if(!(r!=null&&r.length)){g()&&B();return}const a=Ie(n),o=ge(n),c=rt(a,o,r);if(c){const d=xt(n);if(d){const y=g();k({def:c.def,query:c.query,start:c.start,caretRect:d}),(!y||y.def.char!==c.def.char||y.query!==c.query)&&((e=t.onTrigger)==null||e.call(t,{char:c.def.char,query:c.query,rect:d}))}}else g()&&B()}const U=e=>{var r;p(te(e.doc)),(r=t.onChange)==null||r.call(t,e),ke(),X()},He=()=>{f();const e=M();U(e);const r=Date.now();b.record({doc:e.doc,caret:ge(n)},r-D<w),D=r},ve=()=>{const e=M();U(e),b.record({doc:e.doc,caret:ge(n)},!1),D=0},xe=e=>{f(),re(n,e.doc,n.ownerDocument,t.kindIcons),bt(n,e.caret),U(M()),D=0},_e=()=>{const e=b.undo();e&&xe(e)},be=()=>{const e=b.redo();e&&xe(e)};let le=!1;const ze=e=>{var r;le=!0,(r=t.onFocus)==null||r.call(t,e)},Pe=e=>{var r;le=!1,f(),(r=t.onBlur)==null||r.call(t,e)};ue(()=>{const e=()=>{le&&ke()};document.addEventListener("selectionchange",e),Je(()=>document.removeEventListener("selectionchange",e))}),ue(()=>{var e;(e=t.controllerRef)==null||e.call(t,{focus:r=>n.focus(r),blur:()=>n.blur(),clear:()=>{f(),re(n,[],n.ownerDocument,t.kindIcons),U(M()),b.reset({doc:N(n),caret:0}),D=0},send:()=>{var r;return(r=t.onSubmit)==null?void 0:r.call(t,M())},insertEntity:r=>Ce(r)})});function we(e){const r=g();if(!r)return;const a={kind:e.kind??r.def.kind,id:e.id,label:e.label,icon:e.icon,promptText:e.promptText,data:e.data};Ce(a,{deleteBefore:1+r.query.length}),B()}const Ce=(e,r)=>{var a;const o=n.ownerDocument,c=A(n);if(!c||c.rangeCount===0)return;const d=c.getRangeAt(0);if(r!=null&&r.deleteBefore&&d.collapsed){let G=r.deleteBefore,j=d.startContainer,H=d.startOffset;for(;G>0&&j&&j.nodeType===3;){const Ge=j.textContent??"";for(;H>0&&G>0;)H--,Ge[H]!==C&&G--;if(G>0){const Y=j.previousSibling;if(Y&&Y.nodeType===3)j=Y,H=(Y.textContent??"").length;else break}}const ce=o.createRange();ce.setStart(j,H),ce.setEnd(d.startContainer,d.startOffset),ce.deleteContents()}const y=c.getRangeAt(0);y.collapsed||y.deleteContents();const $=Oe(o,e,t.kindIcons),F=o.createTextNode(C);y.insertNode(F),y.insertNode($);const se=o.createRange();se.setStartAfter(F),se.collapse(!0),c.removeAllRanges(),c.addRange(se),(a=t.onEntityAdd)==null||a.call(t,e),ve()},W=e=>(e??"").split("").every(r=>r===C),K=e=>!!e&&e.nodeType===Node.TEXT_NODE&&W(e.textContent),Re=e=>{const{startContainer:r,startOffset:a}=e;if(r===n){let o=a-1;for(;K(n.childNodes[o]);)o--;const c=n.childNodes[o];return P(c)?c:null}if(r.nodeType===Node.TEXT_NODE){if(!W((r.textContent??"").slice(0,a)))return null;let o=r.previousSibling;for(;K(o);)o=o.previousSibling;return P(o)?o:null}return null},Te=e=>{const{startContainer:r,startOffset:a}=e;if(r===n){let o=a;for(;K(n.childNodes[o]);)o++;const c=n.childNodes[o];return P(c)?c:null}if(r.nodeType===Node.TEXT_NODE){if(!W((r.textContent??"").slice(a)))return null;let o=r.nextSibling;for(;K(o);)o=o.nextSibling;return P(o)?o:null}return null},Se=e=>{var r;const a=he.get(e),o=e.nextSibling;o?.nodeType===Node.TEXT_NODE&&W(o.textContent)&&o.remove(),e.remove(),a&&((r=t.onEntityRemove)==null||r.call(t,a)),ve()},Xe=e=>{const r=A(n);if(!r)return;const a=n.ownerDocument.createRange();a.setStartBefore(e),a.collapse(!0),r.removeAllRanges(),r.addRange(a)},Ae=e=>{const r=A(n);if(!r)return;let a=e;for(;K(a.nextSibling);)a=a.nextSibling;const o=n.ownerDocument.createRange();o.setStartAfter(a),o.collapse(!0),r.removeAllRanges(),r.addRange(o)},Ue=e=>{var r;if((e.metaKey||e.ctrlKey)&&(e.key==="z"||e.key==="Z")){e.preventDefault(),e.shiftKey?be():_e();return}if((e.metaKey||e.ctrlKey)&&(e.key==="y"||e.key==="Y")){e.preventDefault(),be();return}if(ie()&&T().length>0){if(e.key==="ArrowDown"){e.preventDefault(),R(o=>(o+1)%T().length);return}if(e.key==="ArrowUp"){e.preventDefault(),R(o=>(o-1+T().length)%T().length);return}if(e.key==="Enter"||e.key==="Tab"){const o=T();if(o.length>0){e.preventDefault(),e.stopPropagation(),we(o[m()]);return}}if(e.key==="Escape"){e.preventDefault(),B();return}}else if(g()&&e.key==="Escape"){e.preventDefault(),B();return}const a=h();if(a&&a.isConnected){if(e.key==="ArrowLeft"){e.preventDefault(),Xe(a),f();return}if(e.key==="ArrowRight"){e.preventDefault(),Ae(a),f();return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault();const o=a.previousSibling;f(),Se(a);const c=A(n);if(c){const d=n.ownerDocument.createRange();o&&o.isConnected?d.setStartAfter(o):d.setStart(n,0),d.collapse(!0),c.removeAllRanges(),c.addRange(d)}return}if(e.key==="Escape"){e.preventDefault(),f();return}if(e.key==="Shift"||e.key==="Meta"||e.key==="Control"||e.key==="Alt")return;Ae(a),f()}if(!h()&&(e.key==="ArrowLeft"||e.key==="ArrowRight")&&!e.shiftKey&&!e.metaKey&&!e.ctrlKey&&!e.altKey){const o=A(n);if(o&&o.rangeCount>0){const c=o.getRangeAt(0);if(c.collapsed){const d=e.key==="ArrowLeft"?Re(c):Te(c);if(d){e.preventDefault(),x(d);return}}}}if(e.key==="Backspace"||e.key==="Delete"){const o=A(n);if(!o||o.rangeCount===0)return;const c=o.getRangeAt(0);if(!c.collapsed)return;const d=e.key==="Backspace"?Re(c):Te(c);if(d){e.preventDefault(),Se(d);return}}if(e.key==="Enter"&&!e.shiftKey&&t.submitOnEnter!==!1){if(e.preventDefault(),t.disabled||t.loading)return;(r=t.onSubmit)==null||r.call(t,M())}},ae=()=>t.maxHeight??240,We=()=>t.editableClass??"text-foreground min-h-[44px] w-full overflow-y-auto outline-none whitespace-pre-wrap break-words",Ee=[(()=>{var e=dt();return E(e,`::highlight(${u}) { background-color: color-mix(in srgb, var(--color-primary, #6366f1) 22%, transparent); }`),e})(),ut(),(()=>{var e=pt(),r=e.firstChild;return r.addEventListener("blur",Pe),r.addEventListener("focus",ze),r.$$mousedown=f,r.$$keydown=Ue,r.$$input=He,De(a=>{var o;n=a,(o=t.editableRef)==null||o.call(t,a)},r),q(a=>{var o=t.placeholder??"",c=t.disabled?!1:"plaintext-only",d=t.ariaLabel||t.placeholder||"Message input",y=Q(We(),s()&&t.placeholder?"kai-composer-empty":""),$=typeof ae()=="number"?`${ae()}px`:String(ae());return o!==a.e&&L(r,"data-placeholder",a.e=o),c!==a.t&&L(r,"contenteditable",a.t=c),d!==a.a&&L(r,"aria-label",a.a=d),y!==a.o&&V(r,a.o=y),$!==a.i&&Z(r,"max-height",a.i=$),a},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),e})(),O(z,{get when(){return qe()},get children(){var e=ft();return De(r=>{i(r),Fe(r)},e),E(e,O($e,{get each(){return oe()},children:r=>[O(z,{get when(){return r.group},get children(){var a=ht();return E(a,()=>r.group),a}}),O($e,{get each(){return r.items},children:a=>(()=>{var o=mt(),c=o.firstChild;return o.$$click=d=>{d.preventDefault(),we(a.item)},o.$$mousedown=d=>d.preventDefault(),o.addEventListener("mouseenter",()=>R(a.index)),E(o,O(z,{get when(){return Be(a.item)},get fallback(){return O(z,{get when(){return Le(me(a.item))},children:d=>(()=>{var y=yt();return q(()=>y.innerHTML=d()),y})()})},children:d=>(()=>{var y=kt();return q(()=>L(y,"src",d())),y})()}),c),E(c,()=>a.item.label),E(o,O(z,{get when(){return a.item.description},get children(){var d=gt();return E(d,()=>a.item.description),d}}),null),q(d=>{var y=m()===a.index,$=a.index,F=Q("w-full flex items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors",m()===a.index?"bg-muted text-foreground":"text-foreground hover:bg-muted");return y!==d.e&&L(o,"aria-selected",d.e=y),$!==d.t&&L(o,"data-index",d.t=$),F!==d.a&&V(o,d.a=F),d},{e:void 0,t:void 0,a:void 0}),o})()})]})),q(r=>{var a=Ke(),o=Q("absolute z-50 min-w-[240px] max-w-[420px] max-h-[320px] overflow-y-auto rounded-lg bg-card shadow-lg py-1","border border-border"),c=`${ye().x}px`,d=`${ye().y}px`,y=je()?"hidden":"visible";return a!==r.e&&L(e,"data-state",r.e=a),o!==r.t&&V(e,r.t=o),c!==r.a&&Z(e,"left",r.a=c),d!==r.o&&Z(e,"top",r.o=d),y!==r.i&&Z(e,"visibility",r.i=y),r},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),e}})];return t.bare?Ee:(()=>{var e=vt();return E(e,Ee),q(()=>V(e,Q("kai-composer relative rounded-xl bg-surface p-2",t.disabled&&"cursor-not-allowed opacity-60"))),e})()}Ve(["input","keydown","mousedown","click"]);export{wt as C,pe as e,I as n,ee as s};