@kitn.ai/ui/dist/elements/pane-group.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 l,c as d,F as I,a as p,b as h,t as y,u as L,S as $,d as x,e as O,f as U,g as B,h as G,q as P}from"./chunks/define-CNSKFZCd.js";import{c as m}from"./chunks/cn-CU7UAWzk.js";import{e as J}from"./chunks/ellipsis-CUiEJ6R1.js";import{x as K}from"./chunks/x-Ckwicf6g.js";var R=y("<span>"),N=y("<button type=button part=menu aria-haspopup=menu>"),Q=y("<button type=button part=close>"),V=y('<div><button type=button part=tab class="flex cursor-pointer items-center gap-1.5 py-1 pl-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"><span class="relative flex size-[18px] shrink-0"aria-hidden=true><span></span></span><span class="max-w-[8rem] truncate font-medium"></span></button><span class="ml-0.5 flex shrink-0 items-center pr-1">'),W=y('<div data-pane-group><div part=tabs role=group aria-label="Open panes"class="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-border px-1.5 py-1"></div><div part=body role=tabpanel class="min-h-0 flex-1 overflow-y-auto">');const _={working:"bg-tool-blue",idle:"bg-muted-foreground",done:"bg-tool-green",error:"bg-tool-red",blocked:"bg-tool-amber"},X={working:"text-white",idle:"text-background",done:"text-white",error:"text-white",blocked:"text-white"},Y={working:"text-tool-blue",idle:"text-muted-foreground",done:"text-tool-green",error:"text-tool-red",blocked:"text-tool-amber"};function Z(a){const b=()=>a.tabs??[],w=()=>{var i;return a.active??((i=b()[0])==null?void 0:i.id)},T=()=>{var i;const r=w();return r!==void 0&&b().some(t=>t.id===r)?r:(i=b()[0])==null?void 0:i.id},C={},f=i=>{var r;return(r=a.onTabChange)==null?void 0:r.call(a,i)},A=(i,r)=>{var t;if(i.currentTarget!==i.target)return;const n=b();if(n.length===0)return;const k=n.findIndex(u=>u.id===r.id);let c;switch(i.key){case"ArrowRight":case"ArrowDown":c=n[(k+1)%n.length];break;case"ArrowLeft":case"ArrowUp":c=n[(k-1+n.length)%n.length];break;case"Home":c=n[0];break;case"End":c=n[n.length-1];break;case"Enter":case" ":i.preventDefault(),f(r.id);return;default:return}c&&(i.preventDefault(),f(c.id),(t=C[c.id])==null||t.focus())},z=i=>{const r=()=>i.tab,t=()=>{var u;return((u=r().status)==null?void 0:u.tone)??"idle"},n=()=>r().id===w(),k=()=>r().number??i.index+1,c=()=>n()||!!r().needsAttention||t()==="error";return(()=>{var u=V(),g=u.firstChild,S=g.firstChild,j=S.firstChild,H=S.nextSibling,D=g.nextSibling;return g.$$keydown=e=>A(e,r()),g.$$click=()=>f(r().id),L(e=>{C[r().id]=e},g),l(S,d($,{get when(){var e;return(e=r().status)==null?void 0:e.pulse},get children(){var e=R();return p(()=>h(e,m("absolute inset-0 animate-ping rounded opacity-60 motion-reduce:hidden",_[t()]))),e}}),j),l(j,k),l(H,()=>r().name),l(g,d($,{get when(){var e;return(e=r().status)==null?void 0:e.label},get children(){var e=R();return l(e,()=>r().status.label),p(()=>h(e,m("truncate text-[10px] font-medium",Y[t()],c()?"inline":"hidden group-hover/tab:inline"))),e}}),null),l(D,d($,{get when(){return a.onTabMenu},get children(){var e=N();return e.$$click=o=>{var s;o.stopPropagation(),(s=a.onTabMenu)==null||s.call(a,r().id)},l(e,d(J,{class:"size-3.5","aria-hidden":"true"})),p(o=>{var s=`${r().name} tab actions`,v=m("flex size-5 items-center justify-center rounded text-muted-foreground transition-colors","hover:bg-surface-sunken hover:text-foreground","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",n()?"opacity-100":"opacity-0 group-hover/tab:opacity-100");return s!==o.e&&x(e,"aria-label",o.e=s),v!==o.t&&h(e,o.t=v),o},{e:void 0,t:void 0}),e}}),null),l(D,d($,{get when(){return a.onTabClose},get children(){var e=Q();return e.$$click=o=>{var s;o.stopPropagation(),(s=a.onTabClose)==null||s.call(a,r().id)},l(e,d(K,{class:"size-3.5","aria-hidden":"true"})),p(o=>{var s=`Close ${r().name}`,v=m("flex size-5 items-center justify-center rounded text-muted-foreground transition-colors","hover:bg-surface-sunken hover:text-foreground","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",n()?"opacity-100":"opacity-0 group-hover/tab:opacity-100");return s!==o.e&&x(e,"aria-label",o.e=s),v!==o.t&&h(e,o.t=v),o},{e:void 0,t:void 0}),e}}),null),p(e=>{var o=m("group/tab relative flex shrink-0 items-center rounded-md text-xs",n()?"bg-background text-foreground shadow-sm ring-1 ring-border":"text-muted-foreground hover:bg-hover hover:text-foreground",r().needsAttention&&!n()&&"ring-1 ring-tool-amber/50"),s=n()?"":void 0,v=r().needsAttention?"":void 0,E=r().id===T()?0:-1,M=n()?"true":void 0,q=m("relative flex size-[18px] items-center justify-center rounded text-[11px] font-bold leading-none tabular-nums",_[t()],X[t()]);return o!==e.e&&h(u,e.e=o),s!==e.t&&x(u,"data-active",e.t=s),v!==e.a&&x(u,"data-needs-attention",e.a=v),E!==e.o&&x(g,"tabindex",e.o=E),M!==e.i&&x(g,"aria-current",e.i=M),q!==e.n&&h(j,e.n=q),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0}),u})()};return(()=>{var i=W(),r=i.firstChild,t=r.nextSibling;return l(r,d(I,{get each(){return b()},children:(n,k)=>d(z,{tab:n,get index(){return k()}})})),l(t,()=>a.children),p(()=>h(i,m("flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-surface",a.focused?"border-ring ring-2 ring-inset ring-ring/35":"border-border",a.class))),i})()}O(["click","keydown"]);var F=y("<slot>");U("kai-pane-group",{tabs:void 0,active:void 0,focused:!1},(a,{element:b,dispatch:w,flag:T,expose:C})=>{const f=()=>a.tabs??[],[A,z]=B(a.active),i=()=>{var t;return a.active??A()??((t=f()[0])==null?void 0:t.id)},r=t=>{z(t),w("kai-tab-change",{id:t})};return G(()=>{const t=i();t!=null&&b.setAttribute("active",t)}),C({select:t=>{f().some(n=>n.id===t)&&r(t)},focus:()=>{var t,n;(n=(t=b.shadowRoot)==null?void 0:t.querySelector('[part="tab"][tabindex="0"]'))==null||n.focus()}}),d(Z,{get tabs(){return f()},get active(){return i()},get focused(){return T("focused")},onTabChange:r,onTabClose:t=>w("kai-tab-close",{id:t}),onTabMenu:t=>w("kai-tab-menu",{id:t}),get children(){return[d($,{get when(){return i()},children:t=>(()=>{var n=F();return n._$owner=P(),p(()=>x(n,"name",t())),n})()}),(()=>{var t=F();return t._$owner=P(),t})()]}})});