regular-layout 0.0.2 → 0.2.0

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

@@ -1,7 +1,21 @@
-# `<regular-layout>`
+<br />
+<a href="https://perspective-dev.github.io">
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="./logo.svg">
+<img width="260" src="./logo.svg">
+</picture>
+<br/>
+<br/>
+<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/>
+</p>
+
 
-[![Build Status](https://img.shields.io/github/actions/workflow/status/texodus/regular-layout/build.yaml?event=push&style=for-the-badge)](https://github.com/texodus/regular-layout/actions/workflows/build.yaml)
-[![npm](https://img.shields.io/npm/v/regular-layout.svg?style=for-the-badge)](https://www.npmjs.com/package/regular-layout)
 
 A library for resizable & repositionable panel layouts, using
 [CSS `grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout).
@@ -23,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>
 ```
 
@@ -53,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 { 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;
@@ -17,15 +20,11 @@ declare global {
         addEventListener(name: "regular-layout-update", cb: (e: RegularLayoutEvent) => void, options?: {
             signal: AbortSignal;
         }): void;
-        removeEventListener(name: "regular-layout-update", cb: any): void;
+        addEventListener(name: "regular-layout-before-update", cb: (e: RegularLayoutEvent) => void, options?: {
+            signal: AbortSignal;
+        }): void;
+        removeEventListener(name: "regular-layout-update", cb: (e: RegularLayoutEvent) => void): void;
+        removeEventListener(name: "regular-layout-before-update", cb: (e: RegularLayoutEvent) => void): void;
     }
 }
-export interface RegularLayoutEvent extends CustomEvent {
-    detail: Layout;
-}
-export interface PerspectiveViewerElementExt {
-    addEventListener(name: "regular-layout-update", cb: (e: RegularLayoutEvent) => void, options?: {
-        signal: AbortSignal;
-    }): void;
-    removeEventListener(name: "regular-layout-update", cb: any): void;
-}
+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 @@
-var S="absolute";function*C(i){if(i.type==="split-panel")for(let t of i.children)yield*C(t);else yield*i.child}var g={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};function m(i,t){if(i.type==="child-panel"){if(i.child.includes(t)){let n=i.child.filter(l=>l!==t);return n.length===0?structuredClone(g):{type:"child-panel",child:n}}return structuredClone(i)}let o=structuredClone(i),r=o.children.findIndex(n=>n.type==="child-panel"?n.child.includes(t):!1);if(r!==-1){let n=o.children[r];if(n.child.length===1){let l=o.children.filter((u,h)=>h!==r),c=A(o.sizes,r);if(l.length===1)return l[0];o.children=l,o.sizes=c}else n.child.splice(n.child.indexOf(t),1),n.selected&&n.selected>=n.child.length&&n.selected--;return o}let e=!1,s=o.children.map(n=>{if(n.type==="split-panel"){let l=m(n,t);return l!==n&&(e=!0),l}return n});return e&&(o.children=s),o}function A(i,t){let o=[],r=i[t],e=0;for(let s=0;s<i.length;s++)s!==t&&(e+=i[s]);for(let s=0;s<i.length;s++)if(s!==t){let n=i[s]/e;o.push(i[s]+r*n)}return o}function D(i){if(i.length===0)return[];let t=i.sort((r,e)=>r-e),o=[t[0]];for(let r=1;r<t.length;r++)Math.abs(t[r]-o[o.length-1])>.001&&o.push(t[r]);return o}function P(i,t,o,r){if(i.type==="child-panel")return[o,r];if(i.orientation===t){let e=[o,r],s=o;for(let n=0;n<i.children.length;n++){let l=i.sizes[n],c=P(i.children[n],t,s,s+l*(r-o));e.push(...c),s=s+l*(r-o)}return D(e)}else{let e=[o,r];for(let s of i.children){let n=P(s,t,o,r);e.push(...n)}return D(e)}}function E(i,t){for(let o=0;o<i.length;o++)if(Math.abs(i[o]-t)<.001)return o;throw new Error(`Position ${t} not found in ${i}`)}function z(i,t,o,r,e,s,n){if(i.type==="child-panel"){let a=i.selected??0;return[{child:i.child[a],colStart:E(t,r),colEnd:E(t,e),rowStart:E(o,s),rowEnd:E(o,n)}]}let l=[],{children:c,sizes:u,orientation:h}=i;if(h==="horizontal"){let a=r;for(let d=0;d<c.length;d++){let _=a+u[d]*(e-r);l.push(...z(c[d],t,o,a,_,s,n)),a=_}}else{let a=s;for(let d=0;d<c.length;d++){let _=a+u[d]*(n-s);l.push(...z(c[d],t,o,r,e,a,_)),a=_}}return l}var O=(i,t)=>`:host { display: grid; gap: 0px; grid-template-rows: ${i}; grid-template-columns: ${t}; }`,T=(i,t,o)=>`:host ::slotted([slot=${i}]) { grid-column: ${o}; grid-row: ${t}; }`;function b(i,t=!1,o){if(o&&(i=m(i,o[0])),i.type==="child-panel"){let a=i.selected??0;return`${O("100%","100%")}
-${T(i.child[a],"1","1")}`}let r=P(i,"horizontal",0,1),e=[];for(let a=0;a<r.length-1;a++)e.push(r[a+1]-r[a]);let s=e.map(a=>`${t?Math.round(a*100):a*100}%`).join(" "),n=P(i,"vertical",0,1),l=[];for(let a=0;a<n.length-1;a++)l.push(n[a+1]-n[a]);let c=l.map(a=>`${t?Math.round(a*100):a*100}%`).join(" "),u=z(i,r,n,0,1,0,1),h=[O(c,s)];for(let a of u){let d=a.colEnd-a.colStart===1?`${a.colStart+1}`:`${a.colStart+1} / ${a.colEnd+1}`,_=a.rowEnd-a.rowStart===1?`${a.rowStart+1}`:`${a.rowStart+1} / ${a.rowEnd+1}`;h.push(`${T(a.child,_,d)}`),a.child===o?.[1]&&(h.push(`${T(o[0],_,d)}`),h.push(`:host ::slotted([slot=${o[0]}]) { z-index: 1; }`))}return h.join(`
-`)}function p(i,t,o,r=!0){return R(i,t,o,r)}var N={row_start:0,row_end:1,col_start:0,col_end:1};function R(i,t,o,r,e=null,s=structuredClone(N),n=[]){if(i<0||t<0||i>1||t>1)return null;if(o.type==="child-panel"){let l=o.selected??0,c=(i-s.col_start)/(s.col_end-s.col_start),u=(t-s.row_start)/(s.row_end-s.row_start);return{type:"layout-path",box:void 0,slot:o.child[l],panel:structuredClone(o),path:n,view_window:s,is_edge:!1,column_offset:c,row_offset:u,orientation:e||"horizontal"}}if(o.orientation==="vertical"){let l=s.row_start;for(let c=0;c<o.children.length;c++){let h=(s.row_end-s.row_start)*o.sizes[c]+l;if(r&&Math.abs(t-h)<.01)return{path:[...n,c],type:"vertical",view_window:{...s,row_start:l,row_end:h}};if(t>=l&&t<h)return R(i,t,o.children[c],r,"vertical",{...s,row_start:l,row_end:h},[...n,c]);l=h}}else{let l=s.col_start;for(let c=0;c<o.children.length;c++){let u=s.col_end-s.col_start,h=l+u*o.sizes[c];if(r&&Math.abs(i-h)<.01)return{path:[...n,c],type:"horizontal",view_window:{...s,col_start:l,col_end:h}};if(i>=l&&i<h)return R(i,t,o.children[c],r,"horizontal",{...s,col_start:l,col_end:h},[...n,c]);l=h}}return null}function f(i,t,o,r="horizontal",e){if(o.length===0){if(i.type==="child-panel")return{type:"child-panel",child:[t,...i.child]};{let h=[...i.children,{type:"child-panel",child:[t]}],a=h.length,d=Array(a).fill(1/a);return{...i,children:h,sizes:d}}}let[s,...n]=o;if(i.type==="child-panel")return f({type:"split-panel",orientation:r,children:[i],sizes:[1]},t,o,r,e);if(n.length===0||s===i.children.length){if(e&&i.children[s]?.type==="child-panel")return i.children[s].child.unshift(t),i;let h=[...i.children];h.splice(s,0,{type:"child-panel",child:[t]});let a=h.length,d=Array(a).fill(1/a);return{...i,children:h,sizes:d}}let l=i.children[s];if(l.type==="child-panel"&&n.length>0){let h=i.orientation==="horizontal"?"vertical":"horizontal",a=f(l,t,n,h,e),d=[...i.children];return d[s]=a,{...i,children:d}}let c=f(l,t,n,r,e),u=[...i.children];return u[s]=c,{...i,children:u}}function w(i,t,o){let r=structuredClone(i),e=r,s={horizontal:o,vertical:o};for(let n=0;n<t.length-1;n++)e.type==="split-panel"&&(s[e.orientation]/=e.sizes[t[n]],e=e.children[t[n]]);if(e.type==="split-panel"){let n=s[e.orientation],l=t[t.length-1];l<e.sizes.length-1&&(e.sizes=H(e.sizes,l,n))}return r}function H(i,t,o){let r=[...i],e=0;for(let n=0;n<=t;n++)e+=i[n];let s=0;for(let n=t+1;n<i.length;n++)s+=i[n];o=Math.sign(o)*Math.min(Math.abs(o),(1-.15)*(o>0?e:s));for(let n=0;n<=t;n++){let l=i[n]/e;r[n]=i[n]-o*l}for(let n=t+1;n<i.length;n++){let l=i[n]/s;r[n]=i[n]+o*l}return r}function $({view_window:{row_start:i,row_end:t,col_start:o,col_end:r},box:e}){let n=i*e.height+0,l=o*e.width+0/2,c=(t-i)*e.height-0,u=(r-o)*e.width-0;return`::slotted(:not([slot])){${`position:absolute!important;z-index:1;top:${n}px;left:${l}px;height:${c}px;width:${u}px;`}}`}function M(i,t,o,r,e){if(e.column_offset<.25||e.column_offset>1-.25){if(e.orientation==="horizontal"){let s=e.column_offset<.25;if(e.path.length===0){let l=f(o,r,[s?0:1]);s?e=p(i,t,l,!1):e={...p(i,t,l,!1),path:[0]}}else{let n=e.path.slice(0,-1),l=e.path[e.path.length-1],c=s?l:l+1,u=f(o,r,[...n,c]);s?e=p(i,t,u,!1):e={...p(i,t,u,!1),path:[...n,l]}}}else{let s=e.column_offset<.25?0:1,n=e.path,l=f(o,r,[...n,s],"horizontal");e=p(i,t,l,!1),e={...e,slot:r,path:[...n,s]}}e&&(e.is_edge=!0)}else if(e.row_offset<.25||e.row_offset>1-.25){if(e.orientation==="vertical"){let s=e.row_offset<.25;if(e.path.length===0){let l=f(o,r,[s?0:1]);s?e=p(i,t,l,!1):e={...p(i,t,l,!1),path:[0]}}else{let n=e.path.slice(0,-1),l=e.path[e.path.length-1],c=s?l:l+1,u=f(o,r,[...n,c]);s?e=p(i,t,u,!1):e={...p(i,t,u,!1),path:[...n,l]}}}else{let s=e.row_offset<.25?0:1,n=e.path,l=f(o,r,[...n,s],"vertical");e=p(i,t,l,!1),e={...e,slot:r,path:[...n,s]}}e&&(e.is_edge=!0)}return e}function x(i){if(i.type==="child-panel")return i;let t=[],o=[];for(let r=0;r<i.children.length;r++){let e=i.children[r],s=i.sizes[r],n=x(e);if(n.type==="split-panel"&&n.orientation===i.orientation)for(let l=0;l<n.children.length;l++)t.push(n.children[l]),o.push(n.sizes[l]*s);else t.push(n),o.push(s)}return t.length===1?t[0]:{type:"split-panel",orientation:i.orientation,children:t,sizes:o}}var L=class extends HTMLElement{_shadowRoot;_panel;_stylesheet;_dragPath;_slots;_unslotted_slot;constructor(){super(),this._panel=structuredClone(g),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,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this)}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,o,{slot:r},e=S){let s=this._panel;e==="absolute"&&(s=m(s,r),this._slots.get(r)?.assignedElements()[0]?.removeAttribute("slot"));let[n,l,c]=this.relativeCoordinates(t,o),u=p(n,l,s,!1);if(u){if(u=M(n,l,s,r,u),e==="interactive"){let a=m(this._panel,r);a=x(f(a,r,u.path));let d=b(a);this._stylesheet.replaceSync(d)}else if(e==="grid"){let a=[r,u.slot],d=b(this._panel,!1,a);this._stylesheet.replaceSync(d)}else if(e==="absolute"){let a=`${b(s)}
-${$({...u,box:c})}`;this._stylesheet.replaceSync(a)}}else{let a=`${b(s)}}`;this._stylesheet.replaceSync(a)}let h=new CustomEvent("regular-layout-update",{detail:s});this.dispatchEvent(h)}clearOverlayState(t,o,r,e=S){let s=this._panel;e==="absolute"&&(s=m(s,r.slot),this._unslotted_slot.assignedElements()[0]?.setAttribute("slot",r.slot));let[n,l,c]=this.relativeCoordinates(t,o),u=p(n,l,s,!1);u&&(u=M(n,l,s,r.slot,u));let{path:h,orientation:a}=u||r;this.restore(f(s,r.slot,h,a,!u?.is_edge))}insertPanel(t,o=[]){this.restore(f(this._panel,t,o))}removePanel(t){this.restore(m(this._panel,t))}getPanel(t,o=this._panel){if(o.type==="child-panel")return o.child.includes(t)?o:null;for(let r of o.children){let e=this.getPanel(t,r);if(e)return e}return null}calculateIntersect(t,o,r=!1){let[e,s,n]=this.relativeCoordinates(t,o),l=p(e,s,this._panel,r);return l?.type==="layout-path"?{...l,box:n}:null}clear(){this.restore(g)}restore(t,o=!1){this._panel=o?t:x(t);let r=b(t);this._stylesheet.replaceSync(r);let e=new Set(this._slots.keys());for(let n of C(t))if(e.delete(n),!this._slots.has(n)){let l=document.createElement("slot");l.setAttribute("name",n),this._shadowRoot.appendChild(l),this._slots.set(n,l)}for(let n of e){let l=this._slots.get(n);l&&(this._shadowRoot.removeChild(l),this._slots.delete(n))}let s=new CustomEvent("regular-layout-update",{detail:t});this.dispatchEvent(s)}save(){return structuredClone(this._panel)}relativeCoordinates(t,o){let r=this.getBoundingClientRect(),e=(t-r.left)/(r.right-r.left),s=(o-r.top)/(r.bottom-r.top);return[e,s,r]}onPointerDown(t){if(t.target===this){let[o,r]=this.relativeCoordinates(t.clientX,t.clientY),e=p(o,r,this._panel);e&&e.type!=="layout-path"&&(this._dragPath=[e,o,r],this.setPointerCapture(t.pointerId))}}onPointerMove(t){if(this._dragPath){let[o,r]=this.relativeCoordinates(t.clientX,t.clientY),e=this._panel,[{path:s,type:n},l,c]=this._dragPath,u=n==="horizontal"?l-o:c-r,h=w(e,s,u);this._stylesheet.replaceSync(b(h))}}onPointerUp(t){if(this._dragPath){this.releasePointerCapture(t.pointerId);let[o,r]=this.relativeCoordinates(t.clientX,t.clientY),e=this._panel,[{path:s},n,l]=this._dragPath;if(this._dragPath[0].type==="horizontal"){let c=w(e,s,n-o);this.restore(c,!0)}else{let c=w(e,s,l-r);this.restore(c,!0)}this._dragPath=void 0}}};var k=`
-:host{--titlebar--height:24px;box-sizing:border-box}
-:host([slot]){margin-top:calc(var(--titlebar--height) + 3px)!important;}
-:host([slot])::part(container){position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background-color:inherit;border-radius:inherit}
-:host([slot])::part(titlebar){height:var(--titlebar--height);margin-top:calc(0px - var(--titlebar--height));user-select: none;}
-:host([slot])::part(body){flex:1 1 auto;}
-`,Y='<slot part="container"><slot part="titlebar"></slot><slot part="body"><slot></slot></slot></slot>',v=class extends HTMLElement{_shadowRoot;_container_sheet;_layout;_header;_drag_state=null;_drag_moved=!1;_tab_to_index_map=new WeakMap;constructor(){super(),this._container_sheet=new CSSStyleSheet,this._container_sheet.replaceSync(k),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.adoptedStyleSheets=[this._container_sheet],this.drawTabs=this.drawTabs.bind(this),this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onPointerLost=this.onPointerLost.bind(this)}connectedCallback(){this._shadowRoot.innerHTML=Y,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)}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)}drawTabs(t){let o=this.getAttribute("slot");if(o){let r=this._layout.getPanel(o,t.detail);if(this._header.textContent="",!r)return;for(let e=0;e<(r?.child?.length||0);e++){let s=r?.child[e],n=document.createElement("div");this._tab_to_index_map.set(n,e),n.textContent=s||"",n.setAttribute("part",e===(r?.selected||0)?"tab active-tab":"tab");let l=e;e!==(r?.selected||0)&&n.addEventListener("pointerdown",c=>{r.selected=l,this._layout.restore(t.detail),c.preventDefault(),c.stopImmediatePropagation(),c.stopPropagation()}),this._header.appendChild(n)}}}onPointerDown=t=>{if(this._drag_state=this._layout.calculateIntersect(t.clientX,t.clientY),this._drag_state){let o=t.target;if(o.part.contains("tab")){let r=this._drag_state.path.length-1,e=this._tab_to_index_map.get(o);e&&(this._drag_state.path[r]=e)}this._header.setPointerCapture(t.pointerId)}};onPointerMove=t=>{this._drag_state&&(this._drag_moved=!0,this._layout.setOverlayState(t.clientX,t.clientY,this._drag_state))};onPointerUp=t=>{this._drag_state&&this._drag_moved&&this._layout.clearOverlayState(t.clientX,t.clientY,this._drag_state),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}};customElements.define("regular-layout",L);customElements.define("regular-layout-frame",v);export{L as RegularLayout,v as RegularLayoutFrame};
+var g={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};var D="regular-layout";var b="overlay";var V="absolute";function U(n,e){return(n.length===0||Math.abs(e-n[n.length-1])>.001)&&n.push(e),n}function W(n){return n.sort((t,o)=>t-o).reduce(U,[])}function x(n,e,t,o){if(n.type==="child-panel")return[t,o];let i=[t,o];if(n.orientation===e){let r=t,s=o-t;for(let a=0;a<n.children.length;a++){let h=n.sizes[a],c=r+h*s;i.push(...x(n.children[a],e,r,c)),r=c}}else for(let r of n.children)i.push(...x(r,e,t,o));return W(i)}function C(n,e){let t=n.findIndex(o=>Math.abs(o-e)<.001);return t===-1?0:t}function A(n,e,t,o,i,r,s){if(n.type==="child-panel"){let d=n.selected??0;return[{child:n.child[d],colStart:C(e,o),colEnd:C(e,i),rowStart:C(t,r),rowEnd:C(t,s)}]}let{children:a,sizes:h,orientation:c}=n,p=c==="horizontal",l=p?o:r,u=p?i-o:s-r,_=[];for(let d=0;d<a.length;d++){let y=l+h[d]*u;p?_.push(...A(a[d],e,t,l,y,r,s)):_.push(...A(a[d],e,t,o,i,l,y)),l=y}return _}var k=(n,e)=>`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${n};grid-template-columns:${e}}`,I=(n,e,t)=>`:host ::slotted([name="${n}"]){display:flex;grid-column:${t};grid-row:${e}}`;function v(n,e=!1,t){if(n.type==="child-panel"){let l=n.selected??0;return`${k("100%","100%")}
+${I(n.child[l],"1","1")}`}let o=l=>l.slice(0,-1).map((_,d)=>l[d+1]-_).map(_=>`${e?Math.round(_*100):_*100}fr`).join(" "),i=x(n,"horizontal",0,1),r=o(i),s=x(n,"vertical",0,1),a=o(s),h=(l,u)=>u-l===1?`${l+1}`:`${l+1} / ${u+1}`,c=A(n,i,s,0,1,0,1),p=[k(a,r)];for(let l of c){let u=h(l.colStart,l.colEnd),_=h(l.rowStart,l.rowEnd);p.push(I(l.child,_,u)),l.child===t?.[1]&&(p.push(I(t[0],_,u)),p.push(`:host ::slotted([name=${t[0]}]){z-index:1}`))}return p.join(`
+`)}var j={row_start:0,row_end:1,col_start:0,col_end:1};function L(n,e,t,o=null){return H(n,e,t,o)}function H(n,e,t,o,i=null,r=structuredClone(j),s=[]){if(n<0||e<0||n>1||e>1)return null;if(t.type==="child-panel"){let d=t.selected??0,y=r.col_end-r.col_start,O=r.row_end-r.row_start;return{type:"layout-path",layout:void 0,slot:t.child[d],path:s,view_window:r,is_edge:!1,column:n,row:e,column_offset:(n-r.col_start)/y,row_offset:(e-r.row_start)/O,orientation:i||"horizontal"}}let a=t.orientation==="vertical",h=a?e:n,c=a?"row_start":"col_start",p=a?"row_end":"col_end",l=a?o?.height:o?.width,u=r[c],_=r[p]-r[c];for(let d=0;d<t.children.length;d++){let y=u+_*t.sizes[d];if(o&&l){let O=6/l;if(Math.abs(h-y)<O)return{path:[...s,d],type:t.orientation,view_window:{...r,[c]:u,[p]:y}}}if(h>=u&&h<y)return H(n,e,t.children[d],o,t.orientation,{...r,[c]:u,[p]:y},[...s,d]);u=y}return null}function E(n,e){if(n.type==="child-panel"){if(n.child.includes(e)){let s=n.child.filter(a=>a!==e);return s.length===0?structuredClone(g):{type:"child-panel",child:s}}return structuredClone(n)}let t=structuredClone(n),o=t.children.findIndex(s=>s.type==="child-panel"?s.child.includes(e):!1);if(o!==-1){let s=t.children[o];if(s.child.length===1){let a=t.children.filter((c,p)=>p!==o),h=q(t.sizes,o);if(a.length===1)return a[0];t.children=a,t.sizes=h}else s.child.splice(s.child.indexOf(e),1),s.selected&&s.selected>=s.child.length&&s.selected--;return t}let i=!1,r=t.children.map(s=>{if(s.type==="split-panel"){let a=E(s,e);return a!==s&&(i=!0),a}return s});return i&&(t.children=r),t}function q(n,e){let t=[],o=n[e],i=0;for(let r=0;r<n.length;r++)r!==e&&(i+=n[r]);for(let r=0;r<n.length;r++)if(r!==e){let s=n[r]/i;t.push(n[r]+o*s)}return t}function m(n,e,t,o){let i=l=>({type:"child-panel",child:[l]});if(t.length===0){if(n.type==="child-panel")return{type:"child-panel",child:[e,...n.child]};if(o)return{type:"split-panel",orientation:o,children:[i(e),n],sizes:[.5,.5]};{let l=[...n.children,i(e)],u=[...n.sizes,1/(l.length-1)];return{...n,children:l,sizes:P(u)}}}let[r,...s]=t;if(o&&s.length===0){if(n.type==="split-panel"&&n.orientation===o){let u=[...n.children];u.splice(r,0,i(e));let _=[...n.sizes];return _.splice(r,0,1/(u.length-1)),{...n,children:u,sizes:P(_)}}let l=r===0?[i(e),n]:[n,i(e)];return{type:"split-panel",orientation:o,children:l,sizes:[.5,.5]}}if(n.type==="child-panel"){if(s.length===0&&o===void 0&&r>=0&&r<=n.child.length){let u=[...n.child];return u.splice(r,0,e),{...n,child:u}}return m({type:"split-panel",orientation:o||"horizontal",children:[n],sizes:[1]},e,t,o)}if(s.length===0||r===n.children.length){if(o&&n.children[r]){let _={type:"split-panel",orientation:o,children:[i(e),n.children[r]],sizes:[.5,.5]},d=[...n.children];return d[r]=_,{...n,children:d,sizes:P(n.sizes)}}let l=[...n.children];l.splice(r,0,i(e));let u=[...n.sizes];return u.splice(r,0,1/(l.length-1)),{...n,children:l,sizes:P(u)}}let a=n.children[r],h=a.type==="child-panel"&&s.length>0&&o!==void 0?n.orientation==="horizontal"?"vertical":"horizontal":o,c=m(a,e,s,h),p=[...n.children];return p[r]=c,{...n,children:p}}function P(n){let e=n.reduce((t,o)=>t+o,0);return n.map(t=>t/e)}function N(n,e,t){let o=structuredClone(n),i=o,r={horizontal:t,vertical:t};for(let s=0;s<e.length-1;s++)i.type==="split-panel"&&(r[i.orientation]/=i.sizes[e[s]],i=i.children[e[s]]);if(i.type==="split-panel"){let s=r[i.orientation],a=e[e.length-1];a<i.sizes.length-1&&(i.sizes=Z(i.sizes,a,s))}return o}function Z(n,e,t){let o=[...n],i=0;for(let s=0;s<=e;s++)i+=n[s];let r=0;for(let s=e+1;s<n.length;s++)r+=n[s];t=Math.sign(t)*Math.min(Math.abs(t),(1-.15)*(t>0?i:r));for(let s=0;s<=e;s++){let a=n[s]/i;o[s]=n[s]-t*a}for(let s=e+1;s<n.length;s++){let a=n[s]/r;o[s]=n[s]+t*a}return o}function G(n,e,t,o){if(!o)return`:host ::slotted([name="${n}"]){display:none;}`;let{view_window:{row_start:i,row_end:r,col_start:s,col_end:a}}=o,h=e.height-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom),c=e.width-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight),p=i*h+parseFloat(t.paddingTop),l=s*c+parseFloat(t.paddingLeft),u=(r-i)*h,_=(a-s)*c,d=`display:flex;position:absolute!important;z-index:1;top:${p}px;left:${l}px;height:${u}px;width:${_}px;`;return`::slotted([name="${n}"]){${d}}`}function $(n,e,t,o,i,r){if(n<.01)return T(t,o,i,[0],!0,"horizontal");if(n>1-.01)return T(t,o,i,i.path.length>0?i.path:[],!1,"horizontal");if(e<.01)return T(t,o,i,[0],!0,"vertical");if(e>1-.01)return T(t,o,i,[],!1,"vertical");let s=i.column_offset<.25||i.column_offset>1-.25,a=i.row_offset<.25||i.row_offset>1-.25;if(s&&a){let h=Math.abs(i.column_offset-.5),c=Math.abs(i.row_offset-.5),p=(r?.width||1)*(i.view_window.col_end-i.view_window.col_start),l=(r?.height||1)*(i.view_window.row_end-i.view_window.row_start),u=h*p>c*l;return z(t,o,i,u?i.column_offset<.25:i.row_offset<.25,u?"horizontal":"vertical")}return s?z(t,o,i,i.column_offset<.25,"horizontal"):a?z(t,o,i,i.row_offset<.25,"vertical"):{...i,path:[...i.path,0]}}function T(n,e,t,o,i,r){return z(n,e,{...t,path:o,orientation:r},i,r)}function z(n,e,t,o,i){let r;if(t.orientation===i)if(t.path.length===0)r=[o?0:1];else{let h=t.path[t.path.length-1];r=[...t.path.slice(0,-1),o?h:h+1]}else r=[...t.path,o?0:1];let s=m(n,e,r,i),a=K(s,r);return{...t,path:r,slot:t.slot,is_edge:!0,orientation:i,view_window:a}}function K(n,e){let t={row_start:0,row_end:1,col_start:0,col_end:1},o=n;for(let i of e){if(o.type==="child-panel")break;let r=Math.min(i,o.children.length-1),s=o.orientation==="vertical",a=s?"row_start":"col_start",h=s?"row_end":"col_end",c=t[h]-t[a],p=o.sizes.slice(0,r).reduce((l,u)=>l+u*c,t[a]);t={...t,[a]:p,[h]:p+c*o.sizes[r]},o=o.children[r]}return t}function F(n){if(n.type==="child-panel")return n.selected=n.selected||0,n;let e=[],t=[];for(let o=0;o<n.children.length;o++){let i=n.children[o],r=n.sizes[o],s=F(i);if(s.type==="split-panel"&&s.orientation===n.orientation)for(let a=0;a<s.children.length;a++)e.push(s.children[a]),t.push(s.sizes[a]*r);else e.push(s),t.push(r)}return e.length===1?e[0]:{type:"split-panel",orientation:n.orientation,children:e,sizes:t}}var w=class extends HTMLElement{_shadowRoot;_panel;_stylesheet;_cursor_stylesheet;_drag_target;_cursor_override;_dimensions;constructor(){super(),this._panel=structuredClone(g),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.innerHTML="<slot></slot>",this._stylesheet=new CSSStyleSheet,this._cursor_stylesheet=new CSSStyleSheet,this._cursor_override=!1,this._shadowRoot.adoptedStyleSheets=[this._stylesheet,this._cursor_stylesheet]}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=(e,t,o=!1)=>{let[i,r,s]=this.relativeCoordinates(e,t,!1),a=L(i,r,this._panel,o?s:null);return a?.type==="layout-path"?{...a,layout:this.save()}:null};setOverlayState=(e,t,{slot:o},i=b,r=V)=>{let s=E(this._panel,o);Array.from(this.children).find(d=>d.getAttribute("name")===o)?.classList.add(i);let[a,h,c,p]=this.relativeCoordinates(e,t,!1),l=L(a,h,s);if(l&&(l=$(a,h,s,o,l,c)),r==="grid"&&l){let d=[o,l?.slot],y=v(s,!1,d);this._stylesheet.replaceSync(y)}else if(r==="absolute"){let d=v(s),y=G(o,c,p,l);this._stylesheet.replaceSync([d,y].join(`
+`))}let u=`${D}-before-update`,_=new CustomEvent(u,{detail:s});this.dispatchEvent(_)};clearOverlayState=(e,t,o,i=b)=>{let r=this._panel;r=E(r,o.slot),Array.from(this.children).find(_=>_.getAttribute("name")===o.slot)?.classList.remove(i);let[s,a,h]=this.relativeCoordinates(e,t,!1),c=L(s,a,r);c&&(c=$(s,a,r,o.slot,c,h));let{path:p,orientation:l}=c||o,u=c?m(r,o.slot,p,c?.is_edge?l:void 0):o.layout;this.restore(u)};insertPanel=(e,t=[],o)=>{let i;typeof o=="boolean"&&o?i="horizontal":typeof o=="string"&&(i=o),this.restore(m(this._panel,e,t,i))};removePanel=e=>{this.restore(E(this._panel,e))};getPanel=(e,t=this._panel)=>{if(t.type==="child-panel")return t.child.includes(e)?t:null;for(let o of t.children){let i=this.getPanel(e,o);if(i)return i}return null};clear=()=>{this.restore(g)};restore=(e,t=!1)=>{this._panel=t?e:F(e);let o=v(this._panel);this._stylesheet.replaceSync(o);let i=`${D}-update`,r=new CustomEvent(i,{detail:this._panel});this.dispatchEvent(r)};save=()=>structuredClone(this._panel);relativeCoordinates=(e,t,o=!0)=>{(o||!this._dimensions)&&(this._dimensions={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let i=this._dimensions.box,r=this._dimensions.style,s=(e-i.left-parseFloat(r.paddingLeft))/(i.width-parseFloat(r.paddingLeft)-parseFloat(r.paddingRight)),a=(t-i.top-parseFloat(r.paddingTop))/(i.height-parseFloat(r.paddingTop)-parseFloat(r.paddingBottom));return[s,a,i,r]};onPointerDown=e=>{if(e.target===this){let[t,o,i]=this.relativeCoordinates(e.clientX,e.clientY),r=L(t,o,this._panel,i);r&&r.type!=="layout-path"&&(this._drag_target=[r,t,o],this.setPointerCapture(e.pointerId),e.preventDefault())}};onPointerMove=e=>{if(this._drag_target){let[t,o]=this.relativeCoordinates(e.clientX,e.clientY,!1),[{path:i,type:r},s,a]=this._drag_target,h=r==="horizontal"?s-t:a-o,c=N(this._panel,i,h);this._stylesheet.replaceSync(v(c))}else if(e.target===this){let[t,o,i]=this.relativeCoordinates(e.clientX,e.clientY,!1),r=L(t,o,this._panel,i);r?.type==="vertical"?(this._cursor_stylesheet.replaceSync(":host{cursor:row-resize"),this._cursor_override=!0):r?.type==="horizontal"&&(this._cursor_stylesheet.replaceSync(":host{cursor:col-resize"),this._cursor_override=!0)}else this._cursor_override&&(this._cursor_override=!1,this._cursor_stylesheet.replaceSync(""))};onPointerUp=e=>{if(this._drag_target){this.releasePointerCapture(e.pointerId);let[t,o]=this.relativeCoordinates(e.clientX,e.clientY,!1),[{path:i,type:r},s,a]=this._drag_target,h=r==="horizontal"?s-t:a-o,c=N(this._panel,i,h);this.restore(c,!0),this._drag_target=void 0}}};var Q=`
+: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;}
+`,tt=`
+	<div part="titlebar"></div>
+	<slot part="container"></slot>
+`,S=class extends HTMLElement{_shadowRoot;_container_sheet;_layout;_header;_drag_state=null;_drag_moved=!1;_tab_to_index_map=new WeakMap;constructor(){super(),this._container_sheet=new CSSStyleSheet,this._container_sheet.replaceSync(Q),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.adoptedStyleSheets=[this._container_sheet]}connectedCallback(){this._shadowRoot.innerHTML=tt,this._layout=this.parentElement,this._header=this._shadowRoot.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=e=>{e.target.part.contains("tab")&&(this._drag_state=this._layout.calculateIntersect(e.clientX,e.clientY),this._drag_state&&(this._header.setPointerCapture(e.pointerId),e.preventDefault()))};onPointerMove=e=>{if(this._drag_state){if(!this._drag_moved){let[t,o,i]=this._layout.relativeCoordinates(e.clientX,e.clientY),r=(t-this._drag_state.column)*i.width,s=(o-this._drag_state.row)*i.height;if(Math.sqrt(r*r+s*s)<=10)return}this._drag_moved=!0,this._layout.setOverlayState(e.clientX,e.clientY,this._drag_state,b)}};onPointerUp=e=>{this._drag_state&&this._drag_moved&&this._layout.clearOverlayState(e.clientX,e.clientY,this._drag_state,b),this._header.releasePointerCapture(e.pointerId),this._drag_state=null,this._drag_moved=!1};onPointerLost=e=>{this._drag_state&&this._layout.clearOverlayState(-1,-1,this._drag_state),this._header.releasePointerCapture(e.pointerId),this._drag_state=null,this._drag_moved=!1};drawTabs=e=>{let t=this.getAttribute("name");if(!t)return;let o=e.detail,i=this._layout.getPanel(t,o);i||(i={type:"child-panel",child:[t],selected:0});for(let s=0;s<i.child.length;s++)if(s>=this._header.children.length){let a=document.createElement("regular-layout-tab");a.populate(this._layout,i,s),this._header.appendChild(a),this._tab_to_index_map.set(a,s)}else this._header.children[s].populate(this._layout,i,s);let r=i.child.length;for(let s=this._header.children.length-1;s>=r;s--)this._header.removeChild(this._header.children[s])}};var M=class extends HTMLElement{_layout;_tab_panel;_index;populate=(e,t,o)=>{if(this._tab_panel){if(o===t.selected!=(o===this._tab_panel?.selected)||this._tab_panel?.child[o]!==t.child[o]){let s=t.selected===o,a=t.child[o];this.children[0].textContent=a,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 i=t.child[o],r=t.selected===o,s=r?"active-close close":"close";this.innerHTML=`<div part="title"></div><button part="${s}"></button>`,r?this.part.add("tab","active-tab"):this.part.add("tab"),this.addEventListener("pointerdown",this.onTabClick),this.children[0].textContent=i,this.children[1].addEventListener("pointerdown",this.onTabClose)}this._tab_panel=t,this._layout=e,this._index=o};onTabClose=e=>{this._tab_panel!==void 0&&this._index!==void 0&&this._layout?.removePanel(this._tab_panel.child[this._index])};onTabClick=e=>{if(this._tab_panel!==void 0&&this._index!==void 0&&this._index!==this._tab_panel.selected){let t=this._layout?.save(),o=this._layout?.getPanel(this._tab_panel.child[this._index],t);o&&t&&(o.selected=this._index,this._layout?.restore(t))}}};customElements.define("regular-layout",w);customElements.define("regular-layout-frame",S);customElements.define("regular-layout-tab",M);export{w as RegularLayout,S as RegularLayoutFrame};
 //# sourceMappingURL=index.js.map