@kitn.ai/ui/dist/elements/resizable.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{f as X,g as Z,o as ee,i as te,c as $,S as ie,q as G,a as O,d as m,G as ne,F as ae,z as oe,h as j,t as b,p as se,l as re}from"./chunks/define-CNSKFZCd.js";import{c as de,n as q,b as le}from"./chunks/resizable-Bq_eHxUm.js";var ce=b("<style>:host{display:block;height:100%}"),ue=b("<div data-resizable-root style=display:flex;width:100%;height:100%>"),me=b('<div data-panel style="display:grid;grid-template-rows:minmax(0, 1fr);grid-template-columns:minmax(0, 1fr);min-width:0;min-height:0;overflow:hidden"><slot>'),he=b("<style>:host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:auto}"),fe=b('<div style="display:grid;grid-template-rows:minmax(0, 1fr);grid-template-columns:minmax(0, 1fr);width:100%;height:100%;min-width:0;min-height:0"><slot>');const ve="kai-maximize-intent",pe="kai-maximize-state",y=3;function F(h){if(h===void 0||h==="")return{};const s=h.trim();return s.endsWith("px")?{pxAttr:String(parseFloat(s))}:s.endsWith("%")?{pctAttr:String(parseFloat(s))}:Number.isFinite(Number(s))?{pctAttr:s}:{}}X("kai-resizable",{orientation:"horizontal",maximizedIndex:null},(h,{element:s,dispatch:p})=>{const[u,M]=Z([]),g=()=>h.orientation==="vertical"?"vertical":"horizontal";function A(){const t=Array.from(s.children).filter(e=>e.tagName.toLowerCase()==="kai-resizable-item");t.length>y&&console.warn(`<kai-resizable>: only the first ${y} <kai-resizable-item> children are laid out (got ${t.length}). Nest <kai-resizable> for more.`);const i=t.slice(0,y).map(e=>{e.hasAttribute("data-kai-default-size")||e.setAttribute("data-kai-default-size",e.getAttribute("size")??"");const a=e.getAttribute("data-kai-default-size")||void 0,o=e.hasAttribute("collapsed")&&e.getAttribute("collapsed")!=="false";return{el:e,size:e.getAttribute("size")??void 0,defaultSize:a,min:e.getAttribute("min")??void 0,max:e.getAttribute("max")??void 0,locked:e.hasAttribute("locked")&&e.getAttribute("locked")!=="false",hidden:e.hidden||e.hasAttribute("hidden")&&e.getAttribute("hidden")!=="false",collapsed:o}});let n=0;for(const e of i)e.hidden||e.collapsed?e.el.removeAttribute("slot"):(e.el.setAttribute("slot",`p${n}`),n++);for(const e of t.slice(y))e.removeAttribute("slot");D(u(),i)&&M(i)}function D(t,i){if(t.length!==i.length)return!0;for(let n=0;n<t.length;n++){const e=t[n],a=i[n];if(e.el!==a.el||e.size!==a.size||e.min!==a.min||e.max!==a.max||e.locked!==a.locked||e.hidden!==a.hidden||e.collapsed!==a.collapsed)return!0}return!1}const x=()=>u().filter(t=>!t.hidden&&!t.collapsed);function C(){return x().map(t=>{var i;const n=((i=t.el.assignedSlot)==null?void 0:i.closest("[data-panel]"))??t.el,e=n.parentElement,a=g()==="horizontal"?"width":"height",o=e?e.getBoundingClientRect()[a]:0,d=n.getBoundingClientRect()[a];return o>0?Math.round(d/o*100):0})}function k(){p("kai-change",{sizes:C()})}let I=!1;function J(){const t=x(),i=C();t.length===i.length&&(I=!0,t.forEach((n,e)=>{const a=i[e];Number.isFinite(a)&&a>0&&n.el.setAttribute("size",`${a}%`)}),queueMicrotask(()=>{I=!1}))}const[w,L]=Z(null);let z=!1;function Q(t){let i=t instanceof Element?t:t?.parentElement??null;const n=u().map(e=>e.el);for(;i;){if(i instanceof HTMLElement&&n.includes(i))return i;i=i.parentElement??i.getRootNode().host??null}return null}function U(t){return{size:t.getAttribute("size"),hidden:t.hidden||t.hasAttribute("hidden")&&t.getAttribute("hidden")!=="false",locked:t.hasAttribute("locked")&&t.getAttribute("locked")!=="false"}}function E(t,i,n){n?t.setAttribute(i,""):t.removeAttribute(i)}function N(t){const i=u(),n=i.findIndex(c=>c.el===t);if(n<0)return;const e=w();if(e){if(e.item===t)return;v()}z=!0;const a=C();let o=0;const d=i.map(c=>{const f=U(c.el);if(!f.hidden){const l=a[o++];Number.isFinite(l)&&l>0&&c.el.setAttribute("size",`${l}%`)}return{el:c.el,size:c.el.getAttribute("size"),hidden:f.hidden,locked:f.locked}});i.forEach((c,f)=>{f===n?(c.el.removeAttribute("size"),c.el.removeAttribute("locked"),E(c.el,"hidden",!1)):E(c.el,"hidden",!0)}),L({item:t,saved:d}),s.setAttribute("data-maximized",""),t.setAttribute("data-maximized-panel",""),A(),k(),queueMicrotask(()=>{z=!1}),t.dispatchEvent(new CustomEvent("kai-maximize-state",{detail:{maximized:!0},bubbles:!1,composed:!0})),p("kai-maximize-change",{maximized:!0,index:n})}function v(){const t=w();if(!t)return;z=!0;for(const n of t.saved)n.el.isConnected&&(n.size===null?n.el.removeAttribute("size"):n.el.setAttribute("size",n.size),E(n.el,"hidden",n.hidden),E(n.el,"locked",n.locked),n.el.removeAttribute("data-maximized-panel"));const i=t.item;L(null),s.removeAttribute("data-maximized"),A(),k(),queueMicrotask(()=>{z=!1}),s.dispatchEvent(new CustomEvent("kai-maximize-state",{detail:{maximized:!1},bubbles:!1,composed:!0})),i?.dispatchEvent(new CustomEvent("kai-maximize-state",{detail:{maximized:!1},bubbles:!1,composed:!0})),p("kai-maximize-change",{maximized:!1,index:null})}ee(()=>{A();const t=a=>{const o=a;a.stopPropagation();const d=Q(o.target);d&&(o.detail.requested?N(d):v())};s.addEventListener("kai-maximize-intent",t);const i=a=>{a.key!=="Escape"||!w()||(a.stopPropagation(),v())};s.addEventListener("keydown",i,!0);const n=new MutationObserver(()=>{if(I)return;A();const a=w();if(a){const o=a.item,d=o.isConnected&&s.contains(o),c=d&&!(o.hidden||o.hasAttribute("hidden"))&&!(o.hasAttribute("collapsed")&&o.getAttribute("collapsed")!=="false");if(!d||!c){v();return}}z||queueMicrotask(k)});n.observe(s,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["size","locked","min","max","hidden","collapsed"]}),se(()=>{n.disconnect(),s.removeEventListener("kai-maximize-intent",t),s.removeEventListener("keydown",i,!0)});const e=s;e.maximize=a=>{var o;const d=(o=u()[a])==null?void 0:o.el;d&&N(d)},e.restore=()=>v(),j(re(()=>h.maximizedIndex,a=>{var o;if(a==null)v();else{const d=(o=u()[a])==null?void 0:o.el;d&&N(d)}},{defer:!0}))});const V=()=>g()==="horizontal";return[ce(),(()=>{var t=ue();return te(t,$(ae,{get each(){return x()},children:(i,n)=>{const e=F(i.min),a=F(i.max),o=F(i.defaultSize),d=de(q(i.size),q(i.min),q(i.max)),c=()=>x()[n()-1],f=()=>{var l;return!!(i.locked||(l=c())!=null&&l.locked)};return[$(ie,{get when(){return n()>0},get children(){return $(le,{withHandle:!0,get orientation(){return g()},get static(){return f()},onPanelResize:()=>{J(),queueMicrotask(k)}})}}),(()=>{var l=me(),S=l.firstChild;return S._$owner=G(),O(r=>{var _=i.locked?"":void 0,T=e.pxAttr,R=e.pctAttr,P=a.pxAttr,B=a.pctAttr,H=o.pxAttr,K=o.pctAttr,Y={...d!==void 0?{"flex-basis":d,"flex-grow":"0","flex-shrink":"0"}:{flex:"1 1 0%"}},W=`p${n()}`;return _!==r.e&&m(l,"data-locked",r.e=_),T!==r.t&&m(l,"data-min-size",r.t=T),R!==r.a&&m(l,"data-min-size-pct",r.a=R),P!==r.o&&m(l,"data-max-size",r.o=P),B!==r.i&&m(l,"data-max-size-pct",r.i=B),H!==r.n&&m(l,"data-default-size",r.n=H),K!==r.s&&m(l,"data-default-size-pct",r.s=K),r.h=ne(l,Y,r.h),W!==r.r&&m(S,"name",r.r=W),r},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0}),l})()]}})),O(i=>{var n=g(),e=V()?"row":"column";return n!==i.e&&m(t,"data-orientation",i.e=n),e!==i.t&&oe(t,"flex-direction",i.t=e),i},{e:void 0,t:void 0}),t})()]}),X("kai-resizable-item",{size:void 0,min:void 0,max:void 0,locked:!1,hidden:!1,collapsed:!1},(h,{element:s,flag:p})=>(j(()=>{s.toggleAttribute("collapsed",p("collapsed"))}),[he(),(()=>{var u=fe(),M=u.firstChild;return M._$owner=G(),u})()]));export{ve as KAI_MAXIMIZE_INTENT,pe as KAI_MAXIMIZE_STATE};