regular-layout 0.1.0 → 0.2.1

package/LICENSE.md

@@ -179,7 +179,7 @@ recommend that a file or class name and description of purpose be included on
 the same “printed page” as the copyright notice for easier identification within
 third-party archives.
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright 2026, Regular Layout Authors
     
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

package/README.md

@@ -7,9 +7,9 @@
 </picture>
 <br/>
 <br/>
-<a href="https://www.npmjs.com/package/regular-table"><img alt="NPM Version" src="https://img.shields.io/github/actions/workflow/status/texodus/regular-layout/build.yaml?event=push&style=flat-square"></a>
-<a href="https://www.npmjs.com/package/regular-table"><img alt="NPM Version" src="https://img.shields.io/npm/v/regular-layout.svg?color=brightgreen&style=flat-square"></a>
-<a href="https://www.npmjs.com/package/regular-table"><img alt="Bundlephobia (Minified)" src="https://img.shields.io/bundlephobia/min/regular-layout?style=flat-square"></a>
+<a href="https://github.com/texodus/regular-layout/actions"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/texodus/regular-layout/build.yaml?event=push&style=flat-square"></a>
+<a href="https://www.npmjs.com/package/regular-layout"><img alt="NPM Version" src="https://img.shields.io/npm/v/regular-layout.svg?color=brightgreen&style=flat-square"></a>
+<a href="https://bundlephobia.com/package/regular-layout"><img alt="Bundlephobia (Minified)" src="https://img.shields.io/bundlephobia/min/regular-layout?style=flat-square"></a>
 <!-- <a href="https://www.npmjs.com/package/regular-table"><img alt="Bundlephobia (Minzipped)" src="https://img.shields.io/bundlephobia/minzip/regular-layout?style=flat-square"></a> -->
 <br/>
 <br/>
@@ -37,8 +37,8 @@ Add the `<regular-layout>` custom element to your HTML:
 
 ```html
 <regular-layout>
-    <div slot="main">Main content</div>
-    <div slot="sidebar">Sidebar content</div>
+    <div name="main">Main content</div>
+    <div name="sidebar">Sidebar content</div>
 </regular-layout>
 ```
 
@@ -67,7 +67,7 @@ Create repositionable panels using `<regular-layout-frame>`:
 
 ```html
 <regular-layout>
-    <regular-layout-frame slot="main">
+    <regular-layout-frame name="main">
         Main content
     </regular-layout-frame>
 </regular-layout>

package/dist/extensions.d.ts

@@ -1,13 +1,16 @@
 import { RegularLayout } from "./regular-layout.ts";
 import { RegularLayoutFrame } from "./regular-layout-frame.ts";
-import type { Layout } from "./common/layout_config.ts";
+import type { Layout } from "./layout/types.ts";
+import { RegularLayoutTab } from "./regular-layout-tab.ts";
 declare global {
     interface Document {
         createElement(tagName: "regular-layout", options?: ElementCreationOptions): RegularLayout;
         createElement(tagName: "regular-layout-frame", options?: ElementCreationOptions): RegularLayoutFrame;
+        createElement(tagName: "regular-layout-tab", options?: ElementCreationOptions): RegularLayoutTab;
         querySelector<E extends Element = Element>(selectors: string): E | null;
         querySelector(selectors: "regular-layout"): RegularLayout | null;
         querySelector(selectors: "regular-layout-frame"): RegularLayoutFrame | null;
+        querySelector(selectors: "regular-layout-tab"): RegularLayoutTab | null;
     }
     interface CustomElementRegistry {
         get(tagName: "regular-layout"): typeof RegularLayout;
@@ -24,6 +27,4 @@ declare global {
         removeEventListener(name: "regular-layout-before-update", cb: (e: RegularLayoutEvent) => void): void;
     }
 }
-export interface RegularLayoutEvent extends CustomEvent {
-    detail: Layout;
-}
+export type RegularLayoutEvent = CustomEvent<Layout>;

package/dist/index.d.ts

@@ -8,8 +8,8 @@
  *
  * ```html
  * <regular-layout>
- *   <regular-layout-frame slot="sidebar">Sidebar content</regular-layout-frame>
- *   <regular-layout-frame slot="main">Main content</regular-layout-frame>
+ *   <regular-layout-frame name="sidebar">Sidebar content</regular-layout-frame>
+ *   <regular-layout-frame name="main">Main content</regular-layout-frame>
  * </regular-layout>
  * ```
  *
@@ -47,7 +47,7 @@
  *
  * @packageDocumentation
  */
-export type { LayoutPath, Layout, LayoutDivider, } from "./common/layout_config.ts";
+export type * from "./layout/types.ts";
 export { RegularLayout } from "./regular-layout.ts";
 export { RegularLayoutFrame } from "./regular-layout-frame.ts";
 import "./extensions.ts";

package/dist/index.js

@@ -1,11 +1,16 @@
-function*C(r){if(r.type==="split-panel")for(let t of r.children)yield*C(t);else yield r.child[r.selected||0]}var b={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};var m="overlay";var x="absolute";function y(r,t){if(r.type==="child-panel"){if(r.child.includes(t)){let o=r.child.filter(a=>a!==t);return o.length===0?structuredClone(b):{type:"child-panel",child:o}}return structuredClone(r)}let e=structuredClone(r),i=e.children.findIndex(o=>o.type==="child-panel"?o.child.includes(t):!1);if(i!==-1){let o=e.children[i];if(o.child.length===1){let a=e.children.filter((h,c)=>c!==i),u=H(e.sizes,i);if(a.length===1)return a[0];e.children=a,e.sizes=u}else o.child.splice(o.child.indexOf(t),1),o.selected&&o.selected>=o.child.length&&o.selected--;return e}let n=!1,s=e.children.map(o=>{if(o.type==="split-panel"){let a=y(o,t);return a!==o&&(n=!0),a}return o});return n&&(e.children=s),e}function H(r,t){let e=[],i=r[t],n=0;for(let s=0;s<r.length;s++)s!==t&&(n+=r[s]);for(let s=0;s<r.length;s++)if(s!==t){let o=r[s]/n;e.push(r[s]+i*o)}return e}function D(r){if(r.length===0)return[];let t=r.sort((i,n)=>i-n),e=[t[0]];for(let i=1;i<t.length;i++)Math.abs(t[i]-e[e.length-1])>.001&&e.push(t[i]);return e}function S(r,t,e,i){if(r.type==="child-panel")return[e,i];if(r.orientation===t){let n=[e,i],s=e;for(let o=0;o<r.children.length;o++){let a=r.sizes[o],u=S(r.children[o],t,s,s+a*(i-e));n.push(...u),s=s+a*(i-e)}return D(n)}else{let n=[e,i];for(let s of r.children){let o=S(s,t,e,i);n.push(...o)}return D(n)}}function P(r,t){for(let e=0;e<r.length;e++)if(Math.abs(r[e]-t)<.001)return e;throw new Error(`Position ${t} not found in ${r}`)}function M(r,t,e,i,n,s,o){if(r.type==="child-panel"){let l=r.selected??0;return[{child:r.child[l],colStart:P(t,i),colEnd:P(t,n),rowStart:P(e,s),rowEnd:P(e,o)}]}let a=[],{children:u,sizes:h,orientation:c}=r;if(c==="horizontal"){let l=i;for(let d=0;d<u.length;d++){let p=l+h[d]*(n-i);a.push(...M(u[d],t,e,l,p,s,o)),l=p}}else{let l=s;for(let d=0;d<u.length;d++){let p=l+h[d]*(o-s);a.push(...M(u[d],t,e,i,n,l,p)),l=p}}return a}var A=(r,t)=>`:host { display: grid; gap: 0px; grid-template-rows: ${r}; grid-template-columns: ${t}; }`,T=(r,t,e)=>`:host ::slotted([slot=${r}]) { grid-column: ${e}; grid-row: ${t}; }`;function g(r,t=!1,e){if(e&&(r=y(r,e[0])),r.type==="child-panel"){let l=r.selected??0;return`${A("100%","100%")}
-${T(r.child[l],"1","1")}`}let i=S(r,"horizontal",0,1),n=[];for(let l=0;l<i.length-1;l++)n.push(i[l+1]-i[l]);let s=n.map(l=>`${t?Math.round(l*100):l*100}%`).join(" "),o=S(r,"vertical",0,1),a=[];for(let l=0;l<o.length-1;l++)a.push(o[l+1]-o[l]);let u=a.map(l=>`${t?Math.round(l*100):l*100}%`).join(" "),h=M(r,i,o,0,1,0,1),c=[A(u,s)];for(let l of h){let d=l.colEnd-l.colStart===1?`${l.colStart+1}`:`${l.colStart+1} / ${l.colEnd+1}`,p=l.rowEnd-l.rowStart===1?`${l.rowStart+1}`:`${l.rowStart+1} / ${l.rowEnd+1}`;c.push(`${T(l.child,p,d)}`),l.child===e?.[1]&&(c.push(`${T(e[0],p,d)}`),c.push(`:host ::slotted([slot=${e[0]}]) { z-index: 1; }`))}return c.join(`
-`)}function f(r,t,e,i=!0){return R(r,t,e,i)}var k={row_start:0,row_end:1,col_start:0,col_end:1};function R(r,t,e,i,n=null,s=structuredClone(k),o=[]){if(r<0||t<0||r>1||t>1)return null;if(e.type==="child-panel"){let a=e.selected??0,u=(r-s.col_start)/(s.col_end-s.col_start),h=(t-s.row_start)/(s.row_end-s.row_start);return{type:"layout-path",box:void 0,slot:e.child[a],panel:structuredClone(e),path:o,view_window:s,is_edge:!1,column:r,row:t,column_offset:u,row_offset:h,orientation:n||"horizontal"}}if(e.orientation==="vertical"){let a=s.row_start;for(let u=0;u<e.children.length;u++){let c=(s.row_end-s.row_start)*e.sizes[u]+a;if(i&&Math.abs(t-c)<.01)return{path:[...o,u],type:"vertical",view_window:{...s,row_start:a,row_end:c}};if(t>=a&&t<c)return R(r,t,e.children[u],i,"vertical",{...s,row_start:a,row_end:c},[...o,u]);a=c}}else{let a=s.col_start;for(let u=0;u<e.children.length;u++){let h=s.col_end-s.col_start,c=a+h*e.sizes[u];if(i&&Math.abs(r-c)<.01)return{path:[...o,u],type:"horizontal",view_window:{...s,col_start:a,col_end:c}};if(r>=a&&r<c)return R(r,t,e.children[u],i,"horizontal",{...s,col_start:a,col_end:c},[...o,u]);a=c}}return null}function _(r,t,e,i="horizontal",n){if(e.length===0){if(r.type==="child-panel")return{type:"child-panel",child:[t,...r.child]};{let c=[...r.children,{type:"child-panel",child:[t]}],l=c.length,d=Array(l).fill(1/l);return{...r,children:c,sizes:d}}}let[s,...o]=e;if(r.type==="child-panel")return _({type:"split-panel",orientation:i,children:[r],sizes:[1]},t,e,i,n);if(o.length===0||s===r.children.length){if(n&&r.children[s]?.type==="child-panel")return r.children[s].child.unshift(t),r.children[s].selected=0,r;let c=[...r.children];c.splice(s,0,{type:"child-panel",child:[t]});let l=c.length,d=Array(l).fill(1/l);return{...r,children:c,sizes:d}}let a=r.children[s];if(a.type==="child-panel"&&o.length>0){let c=r.orientation==="horizontal"?"vertical":"horizontal",l=_(a,t,o,c,n),d=[...r.children];return d[s]=l,{...r,children:d}}let u=_(a,t,o,i,n),h=[...r.children];return h[s]=u,{...r,children:h}}function w(r,t,e){let i=structuredClone(r),n=i,s={horizontal:e,vertical:e};for(let o=0;o<t.length-1;o++)n.type==="split-panel"&&(s[n.orientation]/=n.sizes[t[o]],n=n.children[t[o]]);if(n.type==="split-panel"){let o=s[n.orientation],a=t[t.length-1];a<n.sizes.length-1&&(n.sizes=U(n.sizes,a,o))}return i}function U(r,t,e){let i=[...r],n=0;for(let o=0;o<=t;o++)n+=r[o];let s=0;for(let o=t+1;o<r.length;o++)s+=r[o];e=Math.sign(e)*Math.min(Math.abs(e),(1-.15)*(e>0?n:s));for(let o=0;o<=t;o++){let a=r[o]/n;i[o]=r[o]-e*a}for(let o=t+1;o<r.length;o++){let a=r[o]/s;i[o]=r[o]+e*a}return i}function $(r,{view_window:{row_start:t,row_end:e,col_start:i,col_end:n},box:s}){let a=t*s.height+0,u=i*s.width+0/2,h=(e-t)*s.height-0,c=(n-i)*s.width-0,l=`position:absolute!important;z-index:1;top:${a}px;left:${u}px;height:${h}px;width:${c}px;`;return`::slotted([slot="${r}"]){${l}}`}function z(r,t,e,i,n){let s=n.column_offset<.25||n.column_offset>1-.25,o=n.row_offset<.25||n.row_offset>1-.25;return s?N(r,t,e,i,n,n.column_offset,"horizontal"):o?N(r,t,e,i,n,n.row_offset,"vertical"):n}function N(r,t,e,i,n,s,o){let a=s<.25;if(n.orientation===o)if(n.path.length===0){let h=_(e,i,[a?0:1]);n=f(r,t,h,!1)}else{let u=n.path.slice(0,-1),h=n.path[n.path.length-1],c=a?h:h+1,l=_(e,i,[...u,c]);n=f(r,t,l,!1)}else{let u=[...n.path,a?0:1],h=_(e,i,u,o);n=f(r,t,h,!1)}return n.is_edge=!0,n}function O(r){if(r.type==="child-panel")return r.selected=r.selected||0,r;let t=[],e=[];for(let i=0;i<r.children.length;i++){let n=r.children[i],s=r.sizes[i],o=O(n);if(o.type==="split-panel"&&o.orientation===r.orientation)for(let a=0;a<o.children.length;a++)t.push(o.children[a]),e.push(o.sizes[a]*s);else t.push(o),e.push(s)}return t.length===1?t[0]:{type:"split-panel",orientation:r.orientation,children:t,sizes:e}}var v=class extends HTMLElement{_shadowRoot;_panel;_stylesheet;_dragPath;_slots;_unslotted_slot;constructor(){super(),this._panel=structuredClone(b),this._stylesheet=new CSSStyleSheet,this._unslotted_slot=document.createElement("slot"),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.adoptedStyleSheets=[this._stylesheet],this._shadowRoot.appendChild(this._unslotted_slot),this._slots=new Map}connectedCallback(){this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointermove",this.onPointerMove)}disconnectedCallback(){this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointermove",this.onPointerMove)}setOverlayState=(t,e,{slot:i},n=m,s=x)=>{let o=this._panel;s==="absolute"&&(o=y(o,i),this.updateSlots(o,i),this._slots.get(i)?.assignedElements()[0]?.classList.add(n));let[a,u,h]=this.relativeCoordinates(t,e),c=f(a,u,o,!1);if(c){if(c=z(a,u,o,i,c),s==="grid"){let d=[i,c.slot],p=g(this._panel,!1,d);this._stylesheet.replaceSync(p)}else if(s==="absolute"){let d=g(o),p=$(i,{...c,box:h});this._stylesheet.replaceSync([d,p].join(`
-`))}}else{let d=`${g(o)}}`;this._stylesheet.replaceSync(d)}let l=new CustomEvent("regular-layout-before-update",{detail:o});this.dispatchEvent(l)};clearOverlayState=(t,e,i,n=m,s=x)=>{let o=this._panel;s==="absolute"&&(o=y(o,i.slot),this._slots.get(i.slot)?.assignedElements()[0]?.classList.remove(n));let[a,u,h]=this.relativeCoordinates(t,e),c=f(a,u,o,!1);c&&(c=z(a,u,o,i.slot,c));let{path:l,orientation:d}=c||i;this.restore(_(o,i.slot,l,d,!c?.is_edge))};insertPanel=(t,e=[])=>{this.restore(_(this._panel,t,e))};removePanel=t=>{this.restore(y(this._panel,t))};getPanel=(t,e=this._panel)=>{if(e.type==="child-panel")return e.child.includes(t)?e:null;for(let i of e.children){let n=this.getPanel(t,i);if(n)return n}return null};calculateIntersect=(t,e,i=!1)=>{let[n,s,o]=this.relativeCoordinates(t,e),a=f(n,s,this._panel,i);return a?.type==="layout-path"?{...a,box:o}:null};clear=()=>{this.restore(b)};restore=(t,e=!1)=>{this._panel=e?t:O(t);let i=g(this._panel);this._stylesheet.replaceSync(i),this.updateSlots(this._panel);let n=new CustomEvent("regular-layout-update",{detail:this._panel});this.dispatchEvent(n)};save=()=>structuredClone(this._panel);relativeCoordinates=(t,e)=>{let i=this.getBoundingClientRect(),n=(t-i.left)/(i.right-i.left),s=(e-i.top)/(i.bottom-i.top);return[n,s,i]};updateSlots=(t,e)=>{let i=new Set(this._slots.keys());e&&i.delete(e);for(let n of C(t))if(i.delete(n),!this._slots.has(n)){let s=document.createElement("slot");s.setAttribute("name",n),this._shadowRoot.appendChild(s),this._slots.set(n,s)}for(let n of i){let s=this._slots.get(n);s&&(this._shadowRoot.removeChild(s),this._slots.delete(n))}};onPointerDown=t=>{if(t.target===this){let[e,i]=this.relativeCoordinates(t.clientX,t.clientY),n=f(e,i,this._panel);n&&n.type!=="layout-path"&&(this._dragPath=[n,e,i],this.setPointerCapture(t.pointerId),t.preventDefault())}};onPointerMove=t=>{if(this._dragPath){let[e,i]=this.relativeCoordinates(t.clientX,t.clientY),n=this._panel,[{path:s,type:o},a,u]=this._dragPath,h=o==="horizontal"?a-e:u-i,c=w(n,s,h);this._stylesheet.replaceSync(g(c))}};onPointerUp=t=>{if(this._dragPath){this.releasePointerCapture(t.pointerId);let[e,i]=this.relativeCoordinates(t.clientX,t.clientY),n=this._panel,[{path:s},o,a]=this._dragPath;if(this._dragPath[0].type==="horizontal"){let u=w(n,s,o-e);this.restore(u,!0)}else{let u=w(n,s,a-i);this.restore(u,!0)}this._dragPath=void 0}}};var G=r=>`
-:host{--titlebar--height:24px;box-sizing:border-box}
-:host(:not(.${r})){margin-top:calc(var(--titlebar--height) + 3px)!important;}
-:host(:not(.${r}))::part(container){position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background-color:inherit;border-radius:inherit}
-:host(:not(.${r}))::part(titlebar){height:var(--titlebar--height);margin-top:calc(0px - var(--titlebar--height));user-select: none;}
-:host(:not(.${r}))::part(body){flex:1 1 auto;}
-`,W='<slot part="container"><slot part="titlebar"></slot><slot part="body"><slot></slot></slot></slot>',E=class extends HTMLElement{_shadowRoot;_container_sheet;_layout;_header;_drag_state=null;_drag_moved=!1;_tab_to_index_map=new WeakMap;_tab_panel_state=null;constructor(){super(),this._container_sheet=new CSSStyleSheet,this._container_sheet.replaceSync(G(m)),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.adoptedStyleSheets=[this._container_sheet]}connectedCallback(){this._shadowRoot.innerHTML=W,this._layout=this.parentElement,this._header=this._shadowRoot.children[0].children[0],this._header.addEventListener("pointerdown",this.onPointerDown),this._header.addEventListener("pointermove",this.onPointerMove),this._header.addEventListener("pointerup",this.onPointerUp),this._header.addEventListener("lostpointercapture",this.onPointerLost),this._layout.addEventListener("regular-layout-update",this.drawTabs),this._layout.addEventListener("regular-layout-before-update",this.drawTabs)}disconnectedCallback(){this._header.removeEventListener("pointerdown",this.onPointerDown),this._header.removeEventListener("pointermove",this.onPointerMove),this._header.removeEventListener("pointerup",this.onPointerUp),this._header.removeEventListener("lostpointercapture",this.onPointerLost),this._layout.removeEventListener("regular-layout-update",this.drawTabs),this._layout.removeEventListener("regular-layout-before-update",this.drawTabs)}onPointerDown=t=>{let e=t.target;if(e.part.contains("tab")&&(this._drag_state=this._layout.calculateIntersect(t.clientX,t.clientY),this._drag_state)){this._header.setPointerCapture(t.pointerId),t.preventDefault();let i=this._drag_state.path.length-1,n=this._tab_to_index_map.get(e);n&&(this._drag_state.path[i]=n)}};onPointerMove=t=>{if(this._drag_state){if(!this._drag_moved){let[e,i,n]=this._layout.relativeCoordinates(t.clientX,t.clientY),s=(e-this._drag_state.column)*n.width,o=(i-this._drag_state.row)*n.height;if(Math.sqrt(s*s+o*o)<=10)return}this._drag_moved=!0,this._layout.setOverlayState(t.clientX,t.clientY,this._drag_state,m)}};onPointerUp=t=>{this._drag_state&&this._drag_moved&&this._layout.clearOverlayState(t.clientX,t.clientY,this._drag_state,m),this._header.releasePointerCapture(t.pointerId),this._drag_state=null,this._drag_moved=!1};onPointerLost=t=>{this._drag_state&&this._layout.clearOverlayState(-1,-1,this._drag_state),this._header.releasePointerCapture(t.pointerId),this._drag_state=null,this._drag_moved=!1};drawTabs=t=>{let e=this.assignedSlot;if(!e)return;let i=t.detail,n=this._layout.getPanel(e.name,i);if(!n)return;for(let o=0;o<n.child.length;o++)if(o>=this._header.children.length){let a=this.createTab(n,o);this._header.appendChild(a)}else{let a=o===n.selected!=(o===this._tab_panel_state?.selected),u=this._header.children[o];if(a||this._tab_panel_state?.child[o]!==n.child[o]){let c=this.createTab(n,o);this._header.replaceChild(c,u)}}let s=n.child.length;for(let o=this._header.children.length-1;o>=s;o--)this._header.removeChild(this._header.children[o]);this._tab_panel_state=n};createTab=(t,e)=>{let i=t.selected||0,n=document.createElement("div");return this._tab_to_index_map.set(n,e),n.textContent=t.child[e]||"",e===i?n.setAttribute("part","tab active-tab"):(n.setAttribute("part","tab"),n.addEventListener("pointerdown",s=>this.onTabClick(t,e))),n};onTabClick=(t,e)=>{let i=this._layout.save(),n=this._layout.getPanel(t.child[e],i);n&&(n.selected=e,this._layout.restore(i))}};customElements.define("regular-layout",v);customElements.define("regular-layout-frame",E);export{v as RegularLayout,E as RegularLayoutFrame};
+var b={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};var y=Object.freeze({CUSTOM_EVENT_NAME_PREFIX:"regular-layout",CHILD_ATTRIBUTE_NAME:"name",MIN_DRAG_DISTANCE:10,SHOULD_ROUND:!1,OVERLAY_CLASSNAME:"overlay",MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD:.15,SPLIT_EDGE_TOLERANCE:.25,SPLIT_ROOT_EDGE_TOLERANCE:.01,GRID_TRACK_COLLAPSE_TOLERANCE:.001,OVERLAY_DEFAULT:"absolute",GRID_DIVIDER_SIZE:6,GRID_DIVIDER_CHECK_TARGET:!0});function H(r,t,e){return(t.length===0||Math.abs(e-t[t.length-1])>r.GRID_TRACK_COLLAPSE_TOLERANCE)&&t.push(e),t}function V(r,t){return t.sort((n,o)=>n-o).reduce(H.bind(void 0,r),[])}function C(r,t,e,n,o){if(r.type==="child-panel")return[e,n];let i=[e,n];if(r.orientation===t){let s=e,l=n-e;for(let c=0;c<r.children.length;c++){let h=r.sizes[c],d=s+h*l;i.push(...C(r.children[c],t,s,d,o)),s=d}}else for(let s of r.children)i.push(...C(s,t,e,n,o));return V(o,i)}function R(r,t,e){let n=t.findIndex(o=>Math.abs(o-e)<r.GRID_TRACK_COLLAPSE_TOLERANCE);return n===-1?0:n}function O(r,t,e,n,o,i,s,l){if(r.type==="child-panel"){let m=r.selected??0;return[{child:r.child[m],colStart:R(l,t,n),colEnd:R(l,t,o),rowStart:R(l,e,i),rowEnd:R(l,e,s)}]}let{children:c,sizes:h,orientation:d}=r,a=d==="horizontal",u=a?n:i,p=a?o-n:s-i,f=[];for(let m=0;m<c.length;m++){let E=u+h[m]*p;a?f.push(...O(c[m],t,e,u,E,i,s,l)):f.push(...O(c[m],t,e,n,o,u,E,l)),u=E}return f}var x=(r,t)=>`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${r};grid-template-columns:${t}}`,A=(r,t,e,n)=>`:host ::slotted([${r.CHILD_ATTRIBUTE_NAME}="${t}"]){display:flex;grid-column:${n};grid-row:${e}}`;function T(r,t,e=y){if(r.type==="child-panel"){let a=r.selected??0;return[x("100%","100%"),A(e,r.child[a],"1","1")].join(`
+`)}let n=a=>a.slice(0,-1).map((p,f)=>a[f+1]-p).map(p=>`${e.SHOULD_ROUND?Math.round(p*100):p*100}fr`).join(" "),o=C(r,"horizontal",0,1,e),i=n(o),s=C(r,"vertical",0,1,e),l=n(s),c=(a,u)=>u-a===1?`${a+1}`:`${a+1} / ${u+1}`,h=O(r,o,s,0,1,0,1,e),d=[x(l,i)];for(let a of h){let u=c(a.colStart,a.colEnd),p=c(a.rowStart,a.rowEnd);d.push(A(e,a.child,p,u)),a.child===t?.[1]&&(d.push(A(e,t[0],p,u)),d.push(`:host ::slotted([${e.CHILD_ATTRIBUTE_NAME}=${t[0]}]){z-index:1}`))}return d.join(`
+`)}var F={row_start:0,row_end:1,col_start:0,col_end:1};function L(r,t,e,n=null){return U(r,t,e,n)}function U(r,t,e,n,o=null,i=structuredClone(F),s=[]){if(r<0||t<0||r>1||t>1)return null;if(e.type==="child-panel"){let f=e.selected??0,m=i.col_end-i.col_start,E=i.row_end-i.row_start;return{type:"layout-path",layout:void 0,slot:e.child[f],path:s,view_window:i,is_edge:!1,column:r,row:t,column_offset:(r-i.col_start)/m,row_offset:(t-i.row_start)/E,orientation:o||"horizontal"}}let l=e.orientation==="vertical",c=l?t:r,h=l?"row_start":"col_start",d=l?"row_end":"col_end",a=l?n?.rect?.height:n?.rect?.width,u=i[h],p=i[d]-i[h];for(let f=0;f<e.children.length;f++){let m=u+p*e.sizes[f];if(n&&a){let E=n.size/a;if(Math.abs(c-m)<E)return{path:[...s,f],type:e.orientation,view_window:{...i,[h]:u,[d]:m}}}if(c>=u&&c<m)return U(r,t,e.children[f],n,e.orientation,{...i,[h]:u,[d]:m},[...s,f]);u=m}return null}function v(r,t){if(r.type==="child-panel"){if(r.child.includes(t)){let s=r.child.filter(l=>l!==t);return s.length===0?structuredClone(b):{type:"child-panel",child:s}}return structuredClone(r)}let e=structuredClone(r),n=e.children.findIndex(s=>s.type==="child-panel"?s.child.includes(t):!1);if(n!==-1){let s=e.children[n];if(s.child.length===1){let l=e.children.filter((h,d)=>d!==n),c=Y(e.sizes,n);if(l.length===1)return l[0];e.children=l,e.sizes=c}else s.child.splice(s.child.indexOf(t),1),s.selected&&s.selected>=s.child.length&&s.selected--;return e}let o=!1,i=e.children.map(s=>{if(s.type==="split-panel"){let l=v(s,t);return l!==s&&(o=!0),l}return s});return o&&(e.children=i),e}function Y(r,t){let e=[],n=r[t],o=0;for(let i=0;i<r.length;i++)i!==t&&(o+=r[i]);for(let i=0;i<r.length;i++)if(i!==t){let s=r[i]/o;e.push(r[i]+n*s)}return e}function _(r,t,e,n){let o=a=>({type:"child-panel",child:[a]});if(e.length===0){if(r.type==="child-panel")return{type:"child-panel",child:[t,...r.child]};if(n)return{type:"split-panel",orientation:n,children:[o(t),r],sizes:[.5,.5]};{let a=[...r.children,o(t)],u=[...r.sizes,1/(a.length-1)];return{...r,children:a,sizes:I(u)}}}let[i,...s]=e;if(n&&s.length===0){if(r.type==="split-panel"&&r.orientation===n){let u=[...r.children];u.splice(i,0,o(t));let p=[...r.sizes];return p.splice(i,0,1/(u.length-1)),{...r,children:u,sizes:I(p)}}let a=i===0?[o(t),r]:[r,o(t)];return{type:"split-panel",orientation:n,children:a,sizes:[.5,.5]}}if(r.type==="child-panel"){if(s.length===0&&n===void 0&&i>=0&&i<=r.child.length){let u=[...r.child];return u.splice(i,0,t),{...r,child:u}}return _({type:"split-panel",orientation:n||"horizontal",children:[r],sizes:[1]},t,e,n)}if(s.length===0||i===r.children.length){if(n&&r.children[i]){let p={type:"split-panel",orientation:n,children:[o(t),r.children[i]],sizes:[.5,.5]},f=[...r.children];return f[i]=p,{...r,children:f,sizes:I(r.sizes)}}let a=[...r.children];a.splice(i,0,o(t));let u=[...r.sizes];return u.splice(i,0,1/(a.length-1)),{...r,children:a,sizes:I(u)}}let l=r.children[i],c=l.type==="child-panel"&&s.length>0&&n!==void 0?r.orientation==="horizontal"?"vertical":"horizontal":n,h=_(l,t,s,c),d=[...r.children];return d[i]=h,{...r,children:d}}function I(r){let t=r.reduce((e,n)=>e+n,0);return r.map(e=>e/t)}function M(r,t,e,n=y){let o=structuredClone(r),i=o,s={horizontal:e,vertical:e};for(let l=0;l<t.length-1;l++)i.type==="split-panel"&&(s[i.orientation]/=i.sizes[t[l]],i=i.children[t[l]]);if(i.type==="split-panel"){let l=s[i.orientation],c=t[t.length-1];c<i.sizes.length-1&&(i.sizes=$(n,i.sizes,c,l))}return o}function $(r,t,e,n){let o=[...t],i=0;for(let l=0;l<=e;l++)i+=t[l];let s=0;for(let l=e+1;l<t.length;l++)s+=t[l];n=Math.sign(n)*Math.min(Math.abs(n),(1-r.MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD)*(n>0?i:s));for(let l=0;l<=e;l++){let c=t[l]/i;o[l]=t[l]-n*c}for(let l=e+1;l<t.length;l++){let c=t[l]/s;o[l]=t[l]+n*c}return o}function G(r,t,e,n,o=y){if(!n)return`:host ::slotted([${o.CHILD_ATTRIBUTE_NAME}="${r}"]){display:none;}`;let{view_window:{row_start:i,row_end:s,col_start:l,col_end:c}}=n,h=t.height-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom),d=t.width-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight),a=i*h+parseFloat(e.paddingTop),u=l*d+parseFloat(e.paddingLeft),p=(s-i)*h,f=(c-l)*d,m=`display:flex;position:absolute!important;z-index:1;top:${a}px;left:${u}px;height:${p}px;width:${f}px;`;return`::slotted([${o.CHILD_ATTRIBUTE_NAME}="${r}"]){${m}}`}function z(r,t,e,n,o,i,s=y){if(r<s.SPLIT_ROOT_EDGE_TOLERANCE)return D(e,n,o,[0],!0,"horizontal");if(r>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return D(e,n,o,o.path.length>0?o.path:[1],!1,"horizontal");if(t<s.SPLIT_ROOT_EDGE_TOLERANCE)return D(e,n,o,[0],!0,"vertical");if(t>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return D(e,n,o,o.path.length>0?o.path:[1],!1,"vertical");let l=o.column_offset<s.SPLIT_EDGE_TOLERANCE||o.column_offset>1-s.SPLIT_EDGE_TOLERANCE,c=o.row_offset<s.SPLIT_EDGE_TOLERANCE||o.row_offset>1-s.SPLIT_EDGE_TOLERANCE;if(l&&c){let h=Math.abs(o.column_offset-.5),d=Math.abs(o.row_offset-.5),a=(i?.width||1)*(o.view_window.col_end-o.view_window.col_start),u=(i?.height||1)*(o.view_window.row_end-o.view_window.row_start),p=h*a>d*u;return P(e,n,o,p?o.column_offset<s.SPLIT_EDGE_TOLERANCE:o.row_offset<s.SPLIT_EDGE_TOLERANCE,p?"horizontal":"vertical")}return l?P(e,n,o,o.column_offset<s.SPLIT_EDGE_TOLERANCE,"horizontal"):c?P(e,n,o,o.row_offset<s.SPLIT_EDGE_TOLERANCE,"vertical"):{...o,path:[...o.path,0]}}function D(r,t,e,n,o,i){return P(r,t,{...e,path:n,orientation:i},o,i)}function P(r,t,e,n,o){let i;if(e.orientation===o)if(e.path.length===0)i=[n?0:1];else{let c=e.path[e.path.length-1];i=[...e.path.slice(0,-1),n?c:c+1]}else i=[...e.path,n?0:1];let s=_(r,t,i,o),l=B(s,i);return{...e,path:i,slot:e.slot,is_edge:!0,orientation:o,view_window:l}}function B(r,t){let e={row_start:0,row_end:1,col_start:0,col_end:1},n=r;for(let o of t){if(n.type==="child-panel")break;let i=Math.min(o,n.children.length-1),s=n.orientation==="vertical",l=s?"row_start":"col_start",c=s?"row_end":"col_end",h=e[c]-e[l],d=n.sizes.slice(0,i).reduce((a,u)=>a+u*h,e[l]);e={...e,[l]:d,[c]:d+h*n.sizes[i]},n=n.children[i]}return e}function N(r){if(r.type==="child-panel")return r.selected=r.selected||0,r;let t=[],e=[];for(let n=0;n<r.children.length;n++){let o=r.children[n],i=r.sizes[n],s=N(o);if(s.type==="split-panel"&&s.orientation===r.orientation)for(let l=0;l<s.children.length;l++)t.push(s.children[l]),e.push(s.sizes[l]*i);else t.push(s),e.push(i)}return t.length===1?t[0]:{type:"split-panel",orientation:r.orientation,children:t,sizes:e}}var g=class extends HTMLElement{s;i;c;u;h;l;p;t;constructor(){super(),this.t=y,this.i=structuredClone(b),this.s=this.attachShadow({mode:"open"}),this.s.innerHTML="<slot></slot>",this.c=new CSSStyleSheet,this.u=new CSSStyleSheet,this.l=!1,this.s.adoptedStyleSheets=[this.c,this.u]}connectedCallback(){this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointermove",this.onPointerMove)}disconnectedCallback(){this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointermove",this.onPointerMove)}calculateIntersect=(t,e,n=!1)=>{let[o,i,s]=this.relativeCoordinates(t,e,!1),l=L(o,i,this.i,n?{rect:s,size:this.t.GRID_DIVIDER_SIZE}:null);return l?.type==="layout-path"?{...l,layout:this.save()}:null};setOverlayState=(t,e,{slot:n},o=this.t.OVERLAY_CLASSNAME,i=this.t.OVERLAY_DEFAULT)=>{let s=v(this.i,n);Array.from(this.children).find(f=>f.getAttribute(this.t.CHILD_ATTRIBUTE_NAME)===n)?.classList.add(o);let[l,c,h,d]=this.relativeCoordinates(t,e,!1),a=L(l,c,s);if(a&&(a=z(l,c,s,n,a,h,this.t)),i==="grid"&&a){let f=[n,a?.slot],m=T(s,f,this.t);this.c.replaceSync(m)}else if(i==="absolute"){let f=T(s,void 0,this.t),m=G(n,h,d,a,this.t);this.c.replaceSync([f,m].join(`
+`))}let u=`${this.t.CUSTOM_EVENT_NAME_PREFIX}-before-update`,p=new CustomEvent(u,{detail:s});this.dispatchEvent(p)};clearOverlayState=(t,e,n,o=this.t.OVERLAY_CLASSNAME)=>{let i=this.i;i=v(i,n.slot),Array.from(this.children).find(p=>p.getAttribute(this.t.CHILD_ATTRIBUTE_NAME)===n.slot)?.classList.remove(o);let[s,l,c]=this.relativeCoordinates(t,e,!1),h=L(s,l,i);h&&(h=z(s,l,i,n.slot,h,c,this.t));let{path:d,orientation:a}=h||n,u=h?_(i,n.slot,d,h?.is_edge?a:void 0):n.layout;this.restore(u)};insertPanel=(t,e=[],n)=>{let o;typeof n=="boolean"&&n?o="horizontal":typeof n=="string"&&(o=n),this.restore(_(this.i,t,e,o))};removePanel=t=>{this.restore(v(this.i,t))};getPanel=(t,e=this.i)=>{if(e.type==="child-panel")return e.child.includes(t)?e:null;for(let n of e.children){let o=this.getPanel(t,n);if(o)return o}return null};clear=()=>{this.restore(b)};restore=(t,e=!1)=>{this.i=e?t:N(t);let n=T(this.i,void 0,this.t);this.c.replaceSync(n);let o=`${this.t.CUSTOM_EVENT_NAME_PREFIX}-update`,i=new CustomEvent(o,{detail:this.i});this.dispatchEvent(i)};save=()=>structuredClone(this.i);restorePhysics(t){this.t=Object.freeze({...this.t,...t})}savePhysics(){return this.t}relativeCoordinates=(t,e,n=!0)=>{(n||!this.p)&&(this.p={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let o=this.p.box,i=this.p.style,s=(t-o.left-parseFloat(i.paddingLeft))/(o.width-parseFloat(i.paddingLeft)-parseFloat(i.paddingRight)),l=(e-o.top-parseFloat(i.paddingTop))/(o.height-parseFloat(i.paddingTop)-parseFloat(i.paddingBottom));return[s,l,o,i]};onPointerDown=t=>{if(!this.t.GRID_DIVIDER_CHECK_TARGET||t.target===this){let[e,n,o]=this.relativeCoordinates(t.clientX,t.clientY),i=L(e,n,this.i,{rect:o,size:this.t.GRID_DIVIDER_SIZE});i&&i.type!=="layout-path"&&(this.h=[i,e,n],this.setPointerCapture(t.pointerId),t.preventDefault())}};onPointerMove=t=>{if(this.h){let[s,l]=this.relativeCoordinates(t.clientX,t.clientY,!1),[{path:c,type:h},d,a]=this.h,u=h==="horizontal"?d-s:a-l,p=M(this.i,c,u);this.c.replaceSync(T(p,void 0,this.t))}if(this.t.GRID_DIVIDER_CHECK_TARGET&&t.target!==this){this.l&&(this.l=!1,this.u.replaceSync(""));return}let[e,n,o]=this.relativeCoordinates(t.clientX,t.clientY,!1),i=L(e,n,this.i,{rect:o,size:this.t.GRID_DIVIDER_SIZE});i?.type==="vertical"?(this.u.replaceSync(":host{cursor:row-resize"),this.l=!0):i?.type==="horizontal"?(this.u.replaceSync(":host{cursor:col-resize"),this.l=!0):this.l&&(this.l=!1,this.u.replaceSync(""))};onPointerUp=t=>{if(this.h){this.releasePointerCapture(t.pointerId);let[e,n]=this.relativeCoordinates(t.clientX,t.clientY,!1),[{path:o,type:i},s,l]=this.h,c=i==="horizontal"?s-e:l-n,h=M(this.i,o,c);this.restore(h,!0),this.h=void 0}}};var k=`
+:host{box-sizing:border-box;flex-direction:column}
+:host::part(titlebar){display:flex;height:24px;user-select:none;overflow:hidden}
+:host::part(container){flex:1 1 auto}
+:host::part(title){flex:1 1 auto;pointer-events:none}
+:host::part(close){align-self:stretch}
+:host::slotted{flex:1 1 auto;}
+:host regular-layout-tab{width:0px;}
+`,W=`
+	<div part="titlebar"></div>
+	<slot part="container"></slot>
+`,S=class extends HTMLElement{s;f;e;n;o=null;d=!1;m=new WeakMap;constructor(){super(),this.f=new CSSStyleSheet,this.f.replaceSync(k),this.s=this.attachShadow({mode:"open"}),this.s.adoptedStyleSheets=[this.f]}connectedCallback(){this.s.innerHTML=W,this.e=this.parentElement,this.n=this.s.children[0],this.n.addEventListener("pointerdown",this.onPointerDown),this.n.addEventListener("pointermove",this.onPointerMove),this.n.addEventListener("pointerup",this.onPointerUp),this.n.addEventListener("lostpointercapture",this.onPointerLost),this.e.addEventListener("regular-layout-update",this.drawTabs),this.e.addEventListener("regular-layout-before-update",this.drawTabs)}disconnectedCallback(){this.n.removeEventListener("pointerdown",this.onPointerDown),this.n.removeEventListener("pointermove",this.onPointerMove),this.n.removeEventListener("pointerup",this.onPointerUp),this.n.removeEventListener("lostpointercapture",this.onPointerLost),this.e.removeEventListener("regular-layout-update",this.drawTabs),this.e.removeEventListener("regular-layout-before-update",this.drawTabs)}onPointerDown=t=>{t.target.part.contains("tab")&&(this.o=this.e.calculateIntersect(t.clientX,t.clientY),this.o&&(this.n.setPointerCapture(t.pointerId),t.preventDefault()))};onPointerMove=t=>{if(this.o){let e=this.e.savePhysics();if(!this.d){let[n,o,i]=this.e.relativeCoordinates(t.clientX,t.clientY),s=(n-this.o.column)*i.width,l=(o-this.o.row)*i.height;if(Math.sqrt(s*s+l*l)<=e.MIN_DRAG_DISTANCE)return}this.d=!0,this.e.setOverlayState(t.clientX,t.clientY,this.o,e.OVERLAY_CLASSNAME)}};onPointerUp=t=>{this.o&&this.d&&this.e.clearOverlayState(t.clientX,t.clientY,this.o),this.n.releasePointerCapture(t.pointerId),this.o=null,this.d=!1};onPointerLost=t=>{this.o&&this.e.clearOverlayState(-1,-1,this.o),this.n.releasePointerCapture(t.pointerId),this.o=null,this.d=!1};drawTabs=t=>{let e=this.getAttribute(this.e.savePhysics().CHILD_ATTRIBUTE_NAME);if(!e)return;let n=t.detail,o=this.e.getPanel(e,n);o||(o={type:"child-panel",child:[e],selected:0});for(let s=0;s<o.child.length;s++)if(s>=this.n.children.length){let l=document.createElement("regular-layout-tab");l.populate(this.e,o,s),this.n.appendChild(l),this.m.set(l,s)}else this.n.children[s].populate(this.e,o,s);let i=o.child.length;for(let s=this.n.children.length-1;s>=i;s--)this.n.removeChild(this.n.children[s])}};var w=class extends HTMLElement{e;r;a;populate=(t,e,n)=>{if(this.r){if(n===e.selected!=(n===this.r?.selected)||this.r?.child[n]!==e.child[n]){let s=e.selected===n,l=e.child[n];this.children[0].textContent=l,s?(this.children[1].part.add("active-close"),this.part.add("active-tab")):(this.children[1].part.remove("active-close"),this.part.remove("active-tab"))}}else{let o=e.child[n],i=e.selected===n,s=i?"active-close close":"close";this.innerHTML=`<div part="title"></div><button part="${s}"></button>`,i?this.part.add("tab","active-tab"):this.part.add("tab"),this.addEventListener("pointerdown",this.onTabClick),this.children[0].textContent=o,this.children[1].addEventListener("pointerdown",this.onTabClose)}this.r=e,this.e=t,this.a=n};onTabClose=t=>{this.r!==void 0&&this.a!==void 0&&this.e?.removePanel(this.r.child[this.a])};onTabClick=t=>{if(this.r!==void 0&&this.a!==void 0&&this.a!==this.r.selected){let e=this.e?.save(),n=this.e?.getPanel(this.r.child[this.a],e);n&&e&&(n.selected=this.a,this.e?.restore(e))}}};customElements.define("regular-layout",g);customElements.define("regular-layout-frame",S);customElements.define("regular-layout-tab",w);export{g as RegularLayout,S as RegularLayoutFrame};
 //# sourceMappingURL=index.js.map