@kitn.ai/ui/dist/elements/prompt-dock.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 p,c as u,a as l,b as v,S as h,z as d,t as c,f as $,g as C,o as S,q as x,d as _,p as q}from"./chunks/define-CNSKFZCd.js";import{c as f}from"./chunks/cn-CU7UAWzk.js";var L=c("<div part=top>"),M=c("<div part=bottom>"),O=c("<div data-prompt-dock part=tray>");const w="px-3 py-2 text-sm leading-snug text-muted-foreground";function z(r){const a=()=>r.frame??"inset",e=()=>r.appearance??"soft",m=()=>e()==="soft"||e()==="filled",i=()=>e()==="soft"||e()==="outlined";return(()=>{var o=O();return p(o,u(h,{get when(){return r.top},get children(){var t=L();return p(t,()=>r.top),l(()=>v(t,f(w,r.topClass))),t}}),null),p(o,()=>r.children,null),p(o,u(h,{get when(){return r.bottom},get children(){var t=M();return p(t,()=>r.bottom),l(()=>v(t,f(w,r.bottomClass))),t}}),null),l(t=>{var n=f("flex flex-col gap-1.5",r.class),s=m()?"var(--kai-prompt-dock-surface, var(--color-surface-sunken))":"transparent",g=i()?"1px solid var(--kai-prompt-dock-border, var(--color-border))":"0",b=e()==="plain"?"0":"var(--kai-prompt-dock-radius, 1.25rem)",k=a()==="none"?"0":a()==="edge"?"var(--kai-prompt-dock-inset, 0.375rem) 0":"var(--kai-prompt-dock-inset, 0.375rem)";return n!==t.e&&v(o,t.e=n),s!==t.t&&d(o,"background",t.t=s),g!==t.a&&d(o,"border",t.a=g),b!==t.o&&d(o,"border-radius",t.o=b),k!==t.i&&d(o,"padding",t.i=k),t},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),o})()}var y=c("<slot>");const A=["top","bottom"];$("kai-prompt-dock",{frame:"inset",appearance:"soft"},(r,{element:a})=>{const[e,m]=C({top:!1,bottom:!1});S(()=>{const o=()=>{const n={};for(const s of A)n[s]=!!a.querySelector(`:scope > [slot="${s}"]`);m(n)};o();const t=new MutationObserver(o);t.observe(a,{childList:!0}),q(()=>t.disconnect())});const i=o=>e()[o]?(()=>{var t=y();return _(t,"name",o),t._$owner=x(),t})():void 0;return u(z,{get frame(){return r.frame},get appearance(){return r.appearance},get top(){return i("top")},get bottom(){return i("bottom")},get children(){var o=y();return o._$owner=x(),o}})});