@kitn.ai/ui/dist/elements/pane.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{c as r,m as C,i as n,S as d,a as m,b as x,d as b,t as u,e as q,f as N,g as R,o as _,q as S,p as j}from"./chunks/define-CNSKFZCd.js";import{c as k}from"./chunks/cn-CU7UAWzk.js";import{I as D}from"./chunks/Icon-C2LTALdM.js";import{m as F,a as I}from"./chunks/minimize-2-3kCdE0q3.js";import{x as L}from"./chunks/x-Ckwicf6g.js";var O=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 3v18",key:"108xh3"}]],P=e=>r(D,C(e,{name:"Columns2",iconNode:O})),A=P,B=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M15 3v18",key:"14nvp0"}]],E=e=>r(D,C(e,{name:"PanelRight",iconNode:B})),G=E,H=u('<button type=button class="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-80 transition-colors hover:bg-hover hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'),J=u('<span class="flex shrink-0 items-center text-muted-foreground">'),K=u('<span class="truncate text-xs leading-tight text-muted-foreground">'),Q=u('<div part=footer class="shrink-0 border-t border-border">'),T=u('<div data-pane><div part=header class="flex shrink-0 items-center gap-2.5 border-b border-border px-3 py-2"><div class="flex min-w-0 flex-col"><span class="truncate text-sm font-medium leading-tight text-foreground"></span></div><div part=controls class="ml-auto flex shrink-0 items-center gap-0.5"></div></div><div part=body class="min-h-0 flex-1 overflow-y-auto"tabindex=0>'),U=u("<span aria-hidden=true>"),V=u("<span class=truncate>"),W=u('<span class="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground"><span class="relative flex size-2"><span aria-hidden=true>');const M={working:"bg-tool-blue",idle:"bg-muted-foreground",done:"bg-tool-green",error:"bg-tool-red",blocked:"bg-tool-amber"};function v(e){return(()=>{var l=H();return l.$$click=()=>{var o;return(o=e.onClick)==null?void 0:o.call(e)},n(l,()=>e.children),m(()=>b(l,"aria-label",e.label)),l})()}function X(e){return(()=>{var l=T(),o=l.firstChild,s=o.firstChild,p=s.firstChild,c=s.nextSibling,g=o.nextSibling;return n(o,r(d,{get when(){return e.leading},get children(){var t=J();return n(t,()=>e.leading),t}}),s),n(p,()=>e.title),n(s,r(d,{get when(){return e.subtitle},get children(){var t=K();return n(t,()=>e.subtitle),t}}),null),n(o,r(d,{get when(){return e.status},children:t=>(()=>{var a=W(),h=a.firstChild,f=h.firstChild;return n(h,r(d,{get when(){return t().pulse},get children(){var i=U();return m(()=>x(i,k("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden",M[t().tone]))),i}}),f),n(a,r(d,{get when(){return t().label},get children(){var i=V();return n(i,()=>t().label),i}}),null),m(i=>{var w=t().label?"status":void 0,z=t().label,y=k("relative inline-flex size-2 rounded-full",M[t().tone]);return w!==i.e&&b(a,"role",i.e=w),z!==i.t&&b(a,"aria-label",i.t=z),y!==i.a&&x(f,i.a=y),i},{e:void 0,t:void 0,a:void 0}),a})()}),c),n(c,()=>e.actions,null),n(c,r(d,{get when(){return e.onSplit},get children(){return r(v,{label:"Split pane",get onClick(){return e.onSplit},get children(){return r(A,{class:"size-4","aria-hidden":"true"})}})}}),null),n(c,r(d,{get when(){return e.onDock},get children(){return r(v,{label:"Dock pane",get onClick(){return e.onDock},get children(){return r(G,{class:"size-4","aria-hidden":"true"})}})}}),null),n(c,r(v,{get label(){return e.maximized?"Restore pane":"Maximize pane"},get onClick(){return e.onMaximize},get children(){return r(d,{get when(){return e.maximized},get fallback(){return r(I,{class:"size-4","aria-hidden":"true"})},get children(){return r(F,{class:"size-4","aria-hidden":"true"})}})}}),null),n(c,r(v,{label:"Close pane",get onClick(){return e.onClose},get children(){return r(L,{class:"size-4","aria-hidden":"true"})}}),null),n(g,()=>e.children),n(l,r(d,{get when(){return e.footer},get children(){var t=Q();return n(t,()=>e.footer),t}}),null),m(()=>x(l,k("flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-surface",e.focused?"border-ring ring-2 ring-inset ring-ring/35":"border-border",e.class))),l})()}q(["click"]);var $=u("<slot>");const Y=["leading","actions","footer"];N("kai-pane",{headline:"",subtitle:void 0,maximized:!1,focused:!1,showSplit:!1,showDock:!1,status:void 0},(e,{element:l,dispatch:o,flag:s})=>{const[p,c]=R({leading:!1,actions:!1,footer:!1});_(()=>{const t=()=>{const h={};for(const f of Y)h[f]=!!l.querySelector(`:scope > [slot="${f}"]`);c(h)};t();const a=new MutationObserver(t);a.observe(l,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}),j(()=>a.disconnect())});const g=t=>p()[t]?(()=>{var a=$();return b(a,"name",t),a._$owner=S(),a})():void 0;return r(X,{get title(){return e.headline},get subtitle(){return e.subtitle},get status(){return e.status},get focused(){return s("focused")},get maximized(){return s("maximized")},get leading(){return g("leading")},get actions(){return g("actions")},get footer(){return g("footer")},onMaximize:()=>o("kai-maximize",{maximized:!s("maximized")}),onClose:()=>o("kai-close"),get onSplit(){return s("showSplit")?()=>o("kai-split"):void 0},get onDock(){return s("showDock")?()=>o("kai-dock"):void 0},get children(){var t=$();return t._$owner=S(),t}})});