regular-layout 0.2.2 → 0.4.0

package/README.md

@@ -17,58 +17,146 @@
 
 
 
-A library for resizable & repositionable panel layouts, using
-[CSS `grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout).
+A library for resizable & repositionable panel layouts.
 
 - Zero depedencies, pure TypeScript, tiny.
 - Implemented as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components),
-  interoperable with any framework and fully customizable.
+  interoperable with any framework.
+- Zero DOM mutation at runtime, implemented entirely by generating using
+[CSS `grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout) rules.
+- Supports arbitrary theming via CSS [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) and [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::part).
+- Supports async-aware container rendering for smooth animations even when rendering ovvurs over an event loop boundary.
 - Covered in bees.
 
+## Demo
+
+<a href="https://texodus.github.io/regular-layout/"><img src="./examples/PREVIEW.png" /></a>
+
 ## Installation
 
 ```bash
 npm install regular-layout
 ```
 
-## Usage
+## Quick Start
 
-Add the `<regular-layout>` custom element to your HTML:
+Import the library and add `<regular-layout>` to your HTML. Children are
+matched to layout slots by their `name` attribute.
 
 ```html
+<script type="module" src="regular-layout/dist/index.js"></script>
+
 <regular-layout>
     <div name="main">Main content</div>
     <div name="sidebar">Sidebar content</div>
 </regular-layout>
 ```
 
-Create and manipulate layouts programmatically:
+For draggable, tabbed panels, use `<regular-layout-frame>`:
+
+```html
+<regular-layout>
+    <regular-layout-frame name="main">
+        Main content
+    </regular-layout-frame>
+    <regular-layout-frame name="sidebar">
+        Sidebar content
+    </regular-layout-frame>
+</regular-layout>
+```
+
+Panels must be added and remove programmatically (e.g they are not 
+auto-registered):
 
 ```javascript
-import "regular-layout/dist/index.js";
+const layout = document.querySelector("regular-layout");
 
-const layout = document.querySelector('regular-layout');
+// This adds the panel definition to the layout (and makes it visible via CSS),
+// but does not mutat the DOM.
+layout.insertPanel("main");
+layout.insertPanel("sidebar");
 
-// Add panels
-layout.insertPanel('main');
-layout.insertPanel('sidebar');
+// This removes the panel from the layout (and hides it via CSS) but does not
+// mutate the DOM.
+layout.removePanel("sidebar");
+```
 
-// Save layout state
+## Save/Restore
+
+Layout state serializes to a JSON tree of splits and tabs, which can be
+persisted and restored:
+
+```javascript
 const state = layout.save();
+localStorage.setItem("layout", JSON.stringify(state));
+
+// Later...
+layout.restore(JSON.parse(localStorage.getItem("layout")));
+```
 
-// Remove panels (this does not change the DOM, the element is unslotted).
-layout.removePanel('sidebar');
+`restore()` dispatches a cancelable `regular-layout-before-resize` event before
+applying the new state. Call `preventDefault()` to suspend the update, then
+`layout.resumeResize()` when ready:
 
-// Restore saved state
-layout.restore(state);
+```javascript
+layout.addEventListener("regular-layout-before-resize", (event) => {
+    event.preventDefault();
+    // ... prepare for resize ...
+    layout.resumeResize();
+});
 ```
 
-Create repositionable panels using `<regular-layout-frame>`:
+The `restore()` API can also be used as an alternative to 
+`insertPanel`/`removePanel` for initializing a `<regular-layout>`.
+
+## Theming
+
+Themes are plain CSS files that style the layout and its `::part()` selectors,
+scoped by a class on `<regular-layout>`. Apply a theme by adding its stylesheet
+and setting the class:
 
 ```html
-<regular-layout>
-    <regular-layout-frame name="main">
-        Main content
-    </regular-layout-frame>
+<link rel="stylesheet" href="regular-layout/themes/chicago.css">
+
+<regular-layout class="chicago">
+    ...
 </regular-layout>
-```
+```
+
+`<regular-layout-frame>` exposes these CSS parts:
+
+| Part | Description |
+|------|-------------|
+| `titlebar` | Tab bar container |
+| `tab` | Individual tab |
+| `active-tab` | Currently selected tab |
+| `close` | Close button |
+| `active-close` | Close button on the active tab |
+| `container` | Content area |
+
+```css
+regular-layout.mytheme regular-layout-frame::part(titlebar) {
+    background: #333;
+}
+
+regular-layout.mytheme regular-layout-frame::part(active-tab) {
+    background: #fff;
+    color: #000;
+}
+```
+
+See [the example `themes/`](./themes) directory for examples of how to write a
+complete theme for `<regular-layout>` and `regular-layout-frame>`.
+
+## Events
+
+| Event | Detail | Cancelable | Description |
+|-------|--------|------------|-------------|
+| `regular-layout-before-resize` | `{ calculatePresizePaths() }` | Yes | Fired before any layout change. Cancel to suspend until `resumeResize()`. |
+| `regular-layout-update` | `Layout` | No | Fired after layout state is updated. |
+
+```javascript
+layout.addEventListener("regular-layout-update", (event) => {
+    console.log("New layout:", event.detail);
+});
+```

package/dist/{layout → core}/types.d.ts

@@ -32,7 +32,7 @@ export interface ViewWindow {
  * opposite `orientation` as its parent.
  */
 export interface SplitLayout {
-    type: "split-panel";
+    type: "split-layout";
     children: Layout[];
     sizes: number[];
     orientation: Orientation;
@@ -41,17 +41,21 @@ export interface SplitLayout {
  * A leaf panel node that contains a single named child element.
  */
 export interface TabLayout {
-    type: "child-panel";
+    type: "tab-layout";
     tabs: string[];
     selected?: number;
 }
+/**
+ * Represents a panel location relative to a `Layout` struct.
+ */
+export type LayoutPathTraversal = number[];
 /**
  * Represents a draggable divider between two panels in the layout.
  *
  * Used for hit detection.
  */
 export interface LayoutDivider {
-    path: number[];
+    path: LayoutPathTraversal;
     view_window: ViewWindow;
     type: Orientation;
 }
@@ -61,7 +65,7 @@ export interface LayoutDivider {
 export interface LayoutPath {
     type: "layout-path";
     slot: string;
-    path: number[];
+    path: LayoutPathTraversal;
     view_window: ViewWindow;
     column: number;
     row: number;
@@ -71,6 +75,12 @@ export interface LayoutPath {
     is_edge: boolean;
     layout: Layout;
 }
+/**
+ * The detail payload of the `regular-layout-before-resize` event.
+ */
+export interface PresizeDetail {
+    calculatePresizePaths(): Record<string, LayoutPath>;
+}
 /**
  * An empty `Layout` with no panels.
  */

package/dist/extensions.d.ts

@@ -1,6 +1,6 @@
 import { RegularLayout } from "./regular-layout.ts";
 import { RegularLayoutFrame } from "./regular-layout-frame.ts";
-import type { Layout } from "./layout/types.ts";
+import type { Layout, PresizeDetail } from "./core/types.ts";
 import { RegularLayoutTab } from "./regular-layout-tab.ts";
 declare global {
     interface Document {
@@ -23,8 +23,13 @@ declare global {
         addEventListener(name: "regular-layout-before-update", cb: (e: RegularLayoutEvent) => void, options?: {
             signal: AbortSignal;
         }): void;
+        addEventListener(name: "regular-layout-before-resize", cb: (e: RegularLayoutPresizeEvent) => 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;
+        removeEventListener(name: "regular-layout-before-resize", cb: (e: RegularLayoutPresizeEvent) => void): void;
     }
 }
 export type RegularLayoutEvent = CustomEvent<Layout>;
+export type RegularLayoutPresizeEvent = CustomEvent<PresizeDetail>;

package/dist/index.d.ts

@@ -47,7 +47,8 @@
  *
  * @packageDocumentation
  */
-export type * from "./layout/types.ts";
+export type * from "./core/types.ts";
 export { RegularLayout } from "./regular-layout.ts";
 export { RegularLayoutFrame } from "./regular-layout-frame.ts";
+export type * from "./extensions.ts";
 import "./extensions.ts";

package/dist/index.js

@@ -1,7 +1,7 @@
-var b={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};var _=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,e,t){return(e.length===0||Math.abs(t-e[e.length-1])>r.GRID_TRACK_COLLAPSE_TOLERANCE)&&e.push(t),e}function V(r,e){return e.sort((n,o)=>n-o).reduce(H.bind(void 0,r),[])}function R(r,e,t,n,o){if(r.type==="child-panel")return[t,n];let i=[t,n];if(r.orientation===e){let s=t,a=n-t;for(let c=0;c<r.children.length;c++){let d=r.sizes[c],h=s+d*a;i.push(...R(r.children[c],e,s,h,o)),s=h}}else for(let s of r.children)i.push(...R(s,e,t,n,o));return V(o,i)}function C(r,e,t){let n=e.findIndex(o=>Math.abs(o-t)<r.GRID_TRACK_COLLAPSE_TOLERANCE);return n===-1?0:n}function M(r,e,t,n,o,i,s,a){if(r.type==="child-panel"){let m=r.selected??0;return[{child:r.tabs[m],colStart:C(a,e,n),colEnd:C(a,e,o),rowStart:C(a,t,i),rowEnd:C(a,t,s)}]}let{children:c,sizes:d,orientation:h}=r,l=h==="horizontal",u=l?n:i,p=l?o-n:s-i,f=[];for(let m=0;m<c.length;m++){let E=u+d[m]*p;l?f.push(...M(c[m],e,t,u,E,i,s,a)):f.push(...M(c[m],e,t,n,o,u,E,a)),u=E}return f}var x=(r,e)=>`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${r};grid-template-columns:${e}}`,A=(r,e,t,n)=>`:host ::slotted([${r.CHILD_ATTRIBUTE_NAME}="${e}"]){display:flex;grid-column:${n};grid-row:${t}}`;function v(r,e,t=_){if(r.type==="child-panel"){let l=r.selected??0;return[x("100%","100%"),A(t,r.tabs[l],"1","1")].join(`
-`)}let n=l=>l.slice(0,-1).map((p,f)=>l[f+1]-p).map(p=>`${t.SHOULD_ROUND?Math.round(p*100):p*100}fr`).join(" "),o=R(r,"horizontal",0,1,t),i=n(o),s=R(r,"vertical",0,1,t),a=n(s),c=(l,u)=>u-l===1?`${l+1}`:`${l+1} / ${u+1}`,d=M(r,o,s,0,1,0,1,t),h=[x(a,i)];for(let l of d){let u=c(l.colStart,l.colEnd),p=c(l.rowStart,l.rowEnd);h.push(A(t,l.child,p,u)),l.child===e?.[1]&&(h.push(A(t,e[0],p,u)),h.push(`:host ::slotted([${t.CHILD_ATTRIBUTE_NAME}=${e[0]}]){z-index:1}`))}return h.join(`
-`)}var F={row_start:0,row_end:1,col_start:0,col_end:1};function y(r,e,t,n=null){return U(r,e,t,n)}function U(r,e,t,n,o=null,i=structuredClone(F),s=[]){if(r<0||e<0||r>1||e>1)return null;if(t.type==="child-panel"){let f=t.selected??0,m=i.col_end-i.col_start,E=i.row_end-i.row_start;return{type:"layout-path",layout:t,slot:t.tabs[f],path:s,view_window:i,is_edge:!1,column:r,row:e,column_offset:(r-i.col_start)/m,row_offset:(e-i.row_start)/E,orientation:o||"horizontal"}}let a=t.orientation==="vertical",c=a?e:r,d=a?"row_start":"col_start",h=a?"row_end":"col_end",l=a?n?.rect?.height:n?.rect?.width,u=i[d],p=i[h]-i[d];for(let f=0;f<t.children.length;f++){let m=u+p*t.sizes[f];if(n&&l){let E=n.size/l;if(Math.abs(c-m)<E)return{path:[...s,f],type:t.orientation,view_window:{...i,[d]:u,[h]:m}}}if(c>=u&&c<m)return U(r,e,t.children[f],n,t.orientation,{...i,[d]:u,[h]:m},[...s,f]);u=m}return null}function T(r,e){if(r.type==="child-panel"){if(r.tabs.includes(e)){let s=r.tabs.filter(a=>a!==e);return s.length===0?structuredClone(b):{type:"child-panel",tabs:s}}return structuredClone(r)}let t=structuredClone(r),n=t.children.findIndex(s=>s.type==="child-panel"?s.tabs.includes(e):!1);if(n!==-1){let s=t.children[n];if(s.tabs.length===1){let a=t.children.filter((d,h)=>h!==n),c=$(t.sizes,n);if(a.length===1)return a[0];t.children=a,t.sizes=c}else s.tabs.splice(s.tabs.indexOf(e),1),s.selected&&s.selected>=s.tabs.length&&s.selected--;return t}let o=!1,i=t.children.map(s=>{if(s.type==="split-panel"){let a=T(s,e);return a!==s&&(o=!0),a}return s});return o&&(t.children=i),t}function $(r,e){let t=[],n=r[e],o=0;for(let i=0;i<r.length;i++)i!==e&&(o+=r[i]);for(let i=0;i<r.length;i++)if(i!==e){let s=r[i]/o;t.push(r[i]+n*s)}return t}function L(r,e,t,n){let o=l=>({type:"child-panel",tabs:[l]});if(t.length===0){if(r.type==="child-panel")return{type:"child-panel",tabs:[e,...r.tabs]};if(n)return{type:"split-panel",orientation:n,children:[o(e),r],sizes:[.5,.5]};{let l=[...r.children,o(e)],u=[...r.sizes,1/(l.length-1)];return{...r,children:l,sizes:P(u)}}}let[i,...s]=t;if(n&&s.length===0){if(r.type==="split-panel"&&r.orientation===n){let u=[...r.children];u.splice(i,0,o(e));let p=[...r.sizes];return p.splice(i,0,1/(u.length-1)),{...r,children:u,sizes:P(p)}}let l=i===0?[o(e),r]:[r,o(e)];return{type:"split-panel",orientation:n,children:l,sizes:[.5,.5]}}if(r.type==="child-panel"){if(s.length===0&&n===void 0&&i>=0&&i<=r.tabs.length){let u=[...r.tabs];return u.splice(i,0,e),{...r,tabs:u}}return L({type:"split-panel",orientation:n||"horizontal",children:[r],sizes:[1]},e,t,n)}if(s.length===0||i===r.children.length){if(n&&r.children[i]){let p={type:"split-panel",orientation:n,children:[o(e),r.children[i]],sizes:[.5,.5]},f=[...r.children];return f[i]=p,{...r,children:f,sizes:P(r.sizes)}}let l=[...r.children];l.splice(i,0,o(e));let u=[...r.sizes];return u.splice(i,0,1/(l.length-1)),{...r,children:l,sizes:P(u)}}let a=r.children[i],c=a.type==="child-panel"&&s.length>0&&n!==void 0?r.orientation==="horizontal"?"vertical":"horizontal":n,d=L(a,e,s,c),h=[...r.children];return h[i]=d,{...r,children:h}}function P(r){let e=r.reduce((t,n)=>t+n,0);return r.map(t=>t/e)}function I(r,e,t,n=_){let o=structuredClone(r),i=o,s={horizontal:t||0,vertical:t||0};for(let a=0;a<e.length-1;a++)i.type==="split-panel"&&(s[i.orientation]/=i.sizes[e[a]],i=i.children[e[a]]);if(i.type==="split-panel")if(t===void 0)i.sizes=i.sizes.map(a=>1/i.sizes.length);else{let a=s[i.orientation],c=e[e.length-1];c<i.sizes.length-1&&(i.sizes=Y(n,i.sizes,c,a))}return o}function Y(r,e,t,n){let o=[...e],i=0;for(let a=0;a<=t;a++)i+=e[a];let s=0;for(let a=t+1;a<e.length;a++)s+=e[a];n=Math.sign(n)*Math.min(Math.abs(n),(1-r.MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD)*(n>0?i:s));for(let a=0;a<=t;a++){let c=e[a]/i;o[a]=e[a]-n*c}for(let a=t+1;a<e.length;a++){let c=e[a]/s;o[a]=e[a]+n*c}return o}function G(r,e,t,n,o=_){if(!n)return`:host ::slotted([${o.CHILD_ATTRIBUTE_NAME}="${r}"]){display:none;}`;let{view_window:{row_start:i,row_end:s,col_start:a,col_end:c}}=n,d=e.height-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom),h=e.width-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight),l=i*d+parseFloat(t.paddingTop),u=a*h+parseFloat(t.paddingLeft),p=(s-i)*d,f=(c-a)*h,m=`display:flex;position:absolute!important;z-index:1;top:${l}px;left:${u}px;height:${p}px;width:${f}px;`;return`::slotted([${o.CHILD_ATTRIBUTE_NAME}="${r}"]){${m}}`}function z(r,e,t,n,o,i,s=_){if(r<s.SPLIT_ROOT_EDGE_TOLERANCE)return D(t,n,o,[0],!0,"horizontal");if(r>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return D(t,n,o,o.path.length>0?o.path:[1],!1,"horizontal");if(e<s.SPLIT_ROOT_EDGE_TOLERANCE)return D(t,n,o,[0],!0,"vertical");if(e>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return D(t,n,o,o.path.length>0?o.path:[1],!1,"vertical");let a=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(a&&c){let d=Math.abs(o.column_offset-.5),h=Math.abs(o.row_offset-.5),l=(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=l/2-d*l<u/2-h*u;return w(t,n,o,p?o.column_offset<s.SPLIT_EDGE_TOLERANCE:o.row_offset<s.SPLIT_EDGE_TOLERANCE,p?"horizontal":"vertical")}return a?w(t,n,o,o.column_offset<s.SPLIT_EDGE_TOLERANCE,"horizontal"):c?w(t,n,o,o.row_offset<s.SPLIT_EDGE_TOLERANCE,"vertical"):{...o,path:[...o.path,0]}}function D(r,e,t,n,o,i){return w(r,e,{...t,path:n,orientation:i},o,i)}function w(r,e,t,n,o){let i;if(t.orientation===o)if(t.path.length===0)i=[n?0:1];else{let c=t.path[t.path.length-1];i=[...t.path.slice(0,-1),n?c:c+1]}else i=[...t.path,n?0:1];let s=L(r,e,i,o),a=k(s,i);return{...t,path:i,slot:t.slot,is_edge:!0,orientation:o,view_window:a}}function k(r,e){let t={row_start:0,row_end:1,col_start:0,col_end:1},n=r;for(let o of e){if(n.type==="child-panel")break;let i=Math.min(o,n.children.length-1),s=n.orientation==="vertical",a=s?"row_start":"col_start",c=s?"row_end":"col_end",d=t[c]-t[a],h=n.sizes.slice(0,i).reduce((l,u)=>l+u*d,t[a]);t={...t,[a]:h,[c]:h+d*n.sizes[i]},n=n.children[i]}return t}function N(r){if(r.type==="child-panel")return r.selected=r.selected||0,r;let e=[],t=[];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 a=0;a<s.children.length;a++)e.push(s.children[a]),t.push(s.sizes[a]*i);else e.push(s),t.push(i)}return e.length===1?e[0]:{type:"split-panel",orientation:r.orientation,children:e,sizes:t}}var g=class extends HTMLElement{s;n;c;u;h;a;d;t;constructor(){super(),this.t=_,this.n=structuredClone(b),this.s=this.attachShadow({mode:"open"}),this.s.innerHTML="<slot></slot>",this.c=new CSSStyleSheet,this.u=new CSSStyleSheet,this.a=!1,this.s.adoptedStyleSheets=[this.c,this.u]}connectedCallback(){this.addEventListener("dblclick",this.onDblClick),this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointermove",this.onPointerMove)}disconnectedCallback(){this.removeEventListener("dblclick",this.onDblClick),this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointermove",this.onPointerMove)}calculateIntersect=e=>{let[t,n,o]=this.relativeCoordinates(e,!1);return y(t,n,this.n)};setOverlayState=(e,{slot:t},n=this.t.OVERLAY_CLASSNAME,o=this.t.OVERLAY_DEFAULT)=>{let i=T(this.n,t),s=`:scope > [${this.t.CHILD_ATTRIBUTE_NAME}="${t}"]`,a=this.querySelector(s);a&&a.classList.add(n);let[c,d,h,l]=this.relativeCoordinates(e,!0),u=y(c,d,i);if(u&&(u=z(c,d,i,t,u,h,this.t)),o==="grid"&&u){let m=[t,u?.slot],E=v(i,m,this.t);this.c.replaceSync(E)}else if(o==="absolute"){let m=v(i,void 0,this.t),E=G(t,h,l,u,this.t);this.c.replaceSync([m,E].join(`
-`))}let p=`${this.t.CUSTOM_EVENT_NAME_PREFIX}-before-update`,f=new CustomEvent(p,{detail:i});this.dispatchEvent(f)};clearOverlayState=(e,{slot:t,layout:n},o=this.t.OVERLAY_CLASSNAME)=>{let i=this.n;i=T(i,t);let s=`:scope > [${this.t.CHILD_ATTRIBUTE_NAME}="${t}"]`,a=this.querySelector(s);if(a&&a.classList.remove(o),e===null){this.restore(n);return}let[c,d,h]=this.relativeCoordinates(e,!1),l=y(c,d,i);if(l&&(l=z(c,d,i,t,l,h,this.t)),l){let u=l?.is_edge?l.orientation:void 0,p=L(i,t,l.path,u);this.restore(p)}else this.restore(n)};insertPanel=(e,t=[],n)=>{let o;typeof n=="boolean"&&n?o="horizontal":typeof n=="string"&&(o=n),this.restore(L(this.n,e,t,o))};removePanel=e=>{this.restore(T(this.n,e))};getPanel=(e,t=this.n)=>{if(t.type==="child-panel")return t.tabs.includes(e)?t:null;for(let n of t.children){let o=this.getPanel(e,n);if(o)return o}return null};clear=()=>{this.restore(b)};restore=(e,t=!1)=>{this.n=t?e:N(e);let n=v(this.n,void 0,this.t);this.c.replaceSync(n);let o=`${this.t.CUSTOM_EVENT_NAME_PREFIX}-update`,i=new CustomEvent(o,{detail:this.n});this.dispatchEvent(i)};save=()=>structuredClone(this.n);restorePhysics(e){this.t=Object.freeze({...this.t,...e})}savePhysics(){return this.t}relativeCoordinates=(e,t=!0)=>{(t||!this.d)&&(this.d={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let n=this.d.box,o=this.d.style,i=(e.clientX-n.left-parseFloat(o.paddingLeft))/(n.width-parseFloat(o.paddingLeft)-parseFloat(o.paddingRight)),s=(e.clientY-n.top-parseFloat(o.paddingTop))/(n.height-parseFloat(o.paddingTop)-parseFloat(o.paddingBottom));return[i,s,n,o]};diffCoordinates=(e,t)=>{let[n,o,i]=this.relativeCoordinates(e,!1),s=(n-t.column)*i.width,a=(o-t.row)*i.height;return Math.sqrt(s**2+a**2)};onDblClick=e=>{let[t,n,o]=this.relativeCoordinates(e,!1),i=y(t,n,this.n,{rect:o,size:this.t.GRID_DIVIDER_SIZE});if(i?.type==="horizontal"||i?.type==="vertical"){let s=I(this.n,i.path,void 0);this.restore(s,!0)}};onPointerDown=e=>{if(!this.t.GRID_DIVIDER_CHECK_TARGET||e.target===this){let[t,n,o]=this.relativeCoordinates(e),i=this.t.GRID_DIVIDER_SIZE,s=y(t,n,this.n,{rect:o,size:i});s&&s.type!=="layout-path"&&(this.h=[s,t,n],this.setPointerCapture(e.pointerId),e.preventDefault())}};onPointerMove=e=>{if(this.h){let[s,a]=this.relativeCoordinates(e,!1),[{path:c,type:d},h,l]=this.h,u=d==="horizontal"?h-s:l-a,p=I(this.n,c,u);this.c.replaceSync(v(p,void 0,this.t))}if(this.t.GRID_DIVIDER_CHECK_TARGET&&e.target!==this){this.a&&(this.a=!1,this.u.replaceSync(""));return}let[t,n,o]=this.relativeCoordinates(e,!1),i=y(t,n,this.n,{rect:o,size:this.t.GRID_DIVIDER_SIZE});i?.type==="vertical"?(this.u.replaceSync(":host{cursor:row-resize"),this.a=!0):i?.type==="horizontal"?(this.u.replaceSync(":host{cursor:col-resize"),this.a=!0):this.a&&(this.a=!1,this.u.replaceSync(""))};onPointerUp=e=>{if(this.h){this.releasePointerCapture(e.pointerId);let[t,n]=this.relativeCoordinates(e,!1),[{path:o,type:i},s,a]=this.h,c=i==="horizontal"?s-t:a-n,d=I(this.n,o,c);this.restore(d,!0),this.h=void 0}}};var B=`
+var g={type:"split-layout",orientation:"horizontal",sizes:[],children:[]};var _=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:.33,SPLIT_ROOT_EDGE_TOLERANCE:.03,GRID_TRACK_COLLAPSE_TOLERANCE:.001,OVERLAY_DEFAULT:"absolute",GRID_DIVIDER_SIZE:6,GRID_DIVIDER_CHECK_TARGET:!0});function X(r,t,e){return(t.length===0||Math.abs(e-t[t.length-1])>r.GRID_TRACK_COLLAPSE_TOLERANCE)&&t.push(e),t}function K(r,t){return t.sort((o,i)=>o-i).reduce(X.bind(void 0,r),[])}function C(r,t,e,o,i){if(r.type==="tab-layout")return[e,o];let n=[e,o];if(r.orientation===t){let s=e,a=o-e;for(let l=0;l<r.children.length;l++){let y=r.sizes[l],h=s+y*a;n.push(...C(r.children[l],t,s,h,i)),s=h}}else for(let s of r.children)n.push(...C(s,t,e,o,i));return K(i,n)}function S(r,t,e){let o=t.findIndex(i=>Math.abs(i-e)<r.GRID_TRACK_COLLAPSE_TOLERANCE);return o===-1?0:o}function U(r,t,e,o,i,n,s,a){if(r.type==="tab-layout"){let f=r.selected??0;return[{child:r.tabs[f],colStart:S(a,t,o),colEnd:S(a,t,i),rowStart:S(a,e,n),rowEnd:S(a,e,s)}]}let{children:l,sizes:y,orientation:h}=r,c=h==="horizontal",u=c?o:n,d=c?i-o:s-n,p=[];for(let f=0;f<l.length;f++){let m=u+y[f]*d;c?p.push(...U(l[f],t,e,u,m,n,s,a)):p.push(...U(l[f],t,e,o,i,u,m,a)),u=m}return p}var V=(r,t)=>`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${r};grid-template-columns:${t}}`,N=(r,t,e,o)=>`:host ::slotted([${r.CHILD_ATTRIBUTE_NAME}="${t}"]){display:flex;grid-column:${o};grid-row:${e}}`;function v(r,t,e=_){if(r.type==="tab-layout"){let c=r.selected??0;return[V("100%","100%"),N(e,r.tabs[c],"1","1")].join(`
+`)}let o=c=>c.slice(0,-1).map((d,p)=>c[p+1]-d).map(d=>`${e.SHOULD_ROUND?Math.round(d*100):d*100}fr`).join(" "),i=C(r,"horizontal",0,1,e),n=o(i),s=C(r,"vertical",0,1,e),a=o(s),l=(c,u)=>u-c===1?`${c+1}`:`${c+1} / ${u+1}`,y=U(r,i,s,0,1,0,1,e),h=[V(a,n)];for(let c of y){let u=l(c.colStart,c.colEnd),d=l(c.rowStart,c.rowEnd);h.push(N(e,c.child,d,u)),c.child===t?.[1]&&(h.push(N(e,t[0],d,u)),h.push(`:host ::slotted([${e.CHILD_ATTRIBUTE_NAME}=${t[0]}]){z-index:1}`))}return h.join(`
+`)}var Z={row_start:0,row_end:1,col_start:0,col_end:1};function L(r,t,e,o=null){return F(r,t,e,o)}function F(r,t,e,o,i=null,n=structuredClone(Z),s=[]){if(r<0||t<0||r>1||t>1)return null;if(e.type==="tab-layout"){let p=e.selected??0,f=n.col_end-n.col_start,m=n.row_end-n.row_start;return{type:"layout-path",layout:e,slot:e.tabs[p],path:s,view_window:n,is_edge:!1,column:r,row:t,column_offset:(r-n.col_start)/f,row_offset:(t-n.row_start)/m,orientation:i||"horizontal"}}let a=e.orientation==="vertical",l=a?t:r,y=a?"row_start":"col_start",h=a?"row_end":"col_end",c=a?o?.rect?.height:o?.rect?.width,u=n[y],d=n[h]-n[y];for(let p=0;p<e.children.length;p++){let f=u+d*e.sizes[p];if(o&&c){let m=o.size/c;if(Math.abs(l-f)<m)return{path:[...s,p],type:e.orientation,view_window:{...n,[y]:u,[h]:f}}}if(l>=u&&(l<f||p===e.children.length-1))return F(r,t,e.children[p],o,e.orientation,{...n,[y]:u,[h]:f},[...s,p]);u=f}return null}function b(r,t){if(r.type==="tab-layout"){if(r.tabs.includes(t)){let s=r.tabs.filter(a=>a!==t);return s.length===0?structuredClone(g):{type:"tab-layout",tabs:s}}return structuredClone(r)}let e=structuredClone(r),o=e.children.findIndex(s=>s.type==="tab-layout"?s.tabs.includes(t):!1);if(o!==-1){let s=e.children[o];if(s.tabs.length===1){let a=e.children.filter((y,h)=>h!==o),l=j(e.sizes,o);if(a.length===1)return a[0];e.children=a,e.sizes=l}else s.tabs.splice(s.tabs.indexOf(t),1),s.selected&&s.selected>=s.tabs.length&&s.selected--;return e}let i=!1,n=e.children.map(s=>{if(s.type==="split-layout"){let a=b(s,t);return a!==s&&(i=!0),a}return s});return i&&(e.children=n),e}function j(r,t){let e=[],o=r[t],i=0;for(let n=0;n<r.length;n++)n!==t&&(i+=r[n]);for(let n=0;n<r.length;n++)if(n!==t){let s=r[n]/i;e.push(r[n]+o*s)}return e}function E(r,t,e,o){let i=c=>({type:"tab-layout",tabs:[c]});if(e.length===0){if(r.type==="tab-layout")return{type:"tab-layout",tabs:[t,...r.tabs]};if(o)return{type:"split-layout",orientation:o,children:[i(t),r],sizes:[.5,.5]};{let c=[...r.children,i(t)],u=[...r.sizes,1/(c.length-1)];return{...r,children:c,sizes:R(u)}}}let[n,...s]=e;if(o&&s.length===0){if(r.type==="split-layout"&&r.orientation===o){let u=[...r.children];u.splice(n,0,i(t));let d=[...r.sizes];return d.splice(n,0,1/(u.length-1)),{...r,children:u,sizes:R(d)}}let c=n===0?[i(t),r]:[r,i(t)];return{type:"split-layout",orientation:o,children:c,sizes:[.5,.5]}}if(r.type==="tab-layout"){if(s.length===0&&o===void 0&&n>=0&&n<=r.tabs.length){let u=[...r.tabs];return u.splice(n,0,t),{...r,tabs:u}}return E({type:"split-layout",orientation:o||"horizontal",children:[r],sizes:[1]},t,e,o)}if(s.length===0||n===r.children.length){if(o&&r.children[n]){let d={type:"split-layout",orientation:o,children:[i(t),r.children[n]],sizes:[.5,.5]},p=[...r.children];return p[n]=d,{...r,children:p,sizes:R(r.sizes)}}let c=[...r.children];c.splice(n,0,i(t));let u=[...r.sizes];return u.splice(n,0,1/(c.length-1)),{...r,children:c,sizes:R(u)}}let a=r.children[n],l=a.type==="tab-layout"&&s.length>0&&o!==void 0?r.orientation==="horizontal"?"vertical":"horizontal":o,y=E(a,t,s,l),h=[...r.children];return h[n]=y,{...r,children:h}}function R(r){let t=r.reduce((e,o)=>e+o,0);return r.map(e=>e/t)}function w(r,t,e,o=_){let i=structuredClone(r),n=i,s={horizontal:e||0,vertical:e||0};for(let a=0;a<t.length-1;a++)n.type==="split-layout"&&(s[n.orientation]/=n.sizes[t[a]],n=n.children[t[a]]);if(n.type==="split-layout")if(e===void 0)n.sizes=n.sizes.map(a=>1/n.sizes.length);else{let a=s[n.orientation],l=t[t.length-1];l<n.sizes.length-1&&(n.sizes=Q(o,n.sizes,l,a))}return i}function Q(r,t,e,o){let i=[...t],n=0;for(let a=0;a<=e;a++)n+=t[a];let s=0;for(let a=e+1;a<t.length;a++)s+=t[a];o=Math.sign(o)*Math.min(Math.abs(o),(1-r.MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD)*(o>0?n:s));for(let a=0;a<=e;a++){let l=t[a]/n;i[a]=t[a]-o*l}for(let a=e+1;a<t.length;a++){let l=t[a]/s;i[a]=t[a]+o*l}return i}function H(r,t,e,o){let i=parseFloat(e.paddingLeft),n=parseFloat(e.paddingTop),s=t.width-i-parseFloat(e.paddingRight),a=t.height-n-parseFloat(e.paddingBottom),l=i+r.col_start*s,y=n+r.row_start*a,h=(r.col_end-r.col_start)*s,c=(r.row_end-r.row_start)*a;if(o){let u=parseFloat(o.marginTop),d=parseFloat(o.marginRight),p=parseFloat(o.marginBottom),f=parseFloat(o.marginLeft);h-=f+d,c-=u+p}return{x:l,y,width:h,height:c}}function $(r,t,e,o,i=_,n){if(!o)return`:host ::slotted([${i.CHILD_ATTRIBUTE_NAME}="${r}"]){display:none;}`;let s=H(o.view_window,t,e,n),a=`display:flex;position:absolute!important;z-index:1;top:${s.y}px;left:${s.x}px;height:${s.height}px;width:${s.width}px;`;return`::slotted([${i.CHILD_ATTRIBUTE_NAME}="${r}"]){${a}}`}function D(r){if(r.type==="tab-layout")return r.selected=r.selected||0,r;let t=[],e=[];for(let o=0;o<r.children.length;o++){let i=r.children[o],n=r.sizes[o],s=D(i);if(s.type==="split-layout"&&s.orientation===r.orientation)for(let a=0;a<s.children.length;a++)t.push(s.children[a]),e.push(s.sizes[a]*n);else t.push(s),e.push(n)}return t.length===1?t[0]:{type:"split-layout",orientation:r.orientation,children:t,sizes:e}}function Y(r,t){return k(r,t,[])}function k(r,t,e){if(t.type==="tab-layout")return t.tabs.includes(r)?e:null;for(let o=0;o<t.children.length;o++){let i=k(r,t.children[o],[...e,o]);if(i)return i}return null}function B(r){let t={};return W(r,t,[],null,{row_start:0,row_end:1,col_start:0,col_end:1}),t}function W(r,t,e,o,i){if(r.type==="tab-layout"){let h=r.selected??0,c=r.tabs[h],u=(i.col_start+i.col_end)/2,d=(i.row_start+i.row_end)/2;t[c]={type:"layout-path",layout:r,slot:c,path:e,view_window:i,is_edge:!1,column:u,row:d,column_offset:.5,row_offset:.5,orientation:o||"horizontal"};return}let n=r.orientation==="vertical",s=n?"row_start":"col_start",a=n?"row_end":"col_end",l=i[s],y=i[a]-i[s];for(let h=0;h<r.children.length;h++){let c=l+y*r.sizes[h],u={...i,[s]:l,[a]:c};W(r.children[h],t,[...e,h],r.orientation,u),l=c}}var I=class{constructor(t,e){this.E=t;this.L=e}#o=!1;#t=null;#e=null;async run(t,e){if(this.#o){this.#t={layout:t,fn:e};return}this.#o=!0;try{for(await this.#n(t,e);this.#t;){let{layout:o,fn:i}=this.#t;this.#t=null,await this.#n(o,i)}}finally{this.#o=!1}}resume(){if(this.#e){let t=this.#e;this.#e=null,t()}}async#n(t,e){let o={calculatePresizePaths:()=>B(t)},i=new CustomEvent(this.L,{cancelable:!0,detail:o});this.E.dispatchEvent(i)||await new Promise(s=>{this.#e=s}),e()}};function G(r,t,e,o,i,n,s=_){if(r<s.SPLIT_ROOT_EDGE_TOLERANCE)return O(e,o,i,[0],!0,"horizontal");if(r>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return O(e,o,i,i.path.length>0?i.path:[1],!1,"horizontal");if(t<s.SPLIT_ROOT_EDGE_TOLERANCE)return O(e,o,i,[0],!0,"vertical");if(t>1-s.SPLIT_ROOT_EDGE_TOLERANCE)return O(e,o,i,i.path.length>0?i.path:[1],!1,"vertical");let a=i.column_offset<s.SPLIT_EDGE_TOLERANCE||i.column_offset>1-s.SPLIT_EDGE_TOLERANCE,l=i.row_offset<s.SPLIT_EDGE_TOLERANCE||i.row_offset>1-s.SPLIT_EDGE_TOLERANCE;if(a&&l){let y=Math.abs(i.column_offset-.5),h=Math.abs(i.row_offset-.5),c=(n?.width||1)*(i.view_window.col_end-i.view_window.col_start),u=(n?.height||1)*(i.view_window.row_end-i.view_window.row_start),d=c/2-y*c<u/2-h*u;return A(e,o,i,d?i.column_offset<s.SPLIT_EDGE_TOLERANCE:i.row_offset<s.SPLIT_EDGE_TOLERANCE,d?"horizontal":"vertical")}return a?A(e,o,i,i.column_offset<s.SPLIT_EDGE_TOLERANCE,"horizontal"):l?A(e,o,i,i.row_offset<s.SPLIT_EDGE_TOLERANCE,"vertical"):{...i,path:[...i.path,0]}}function O(r,t,e,o,i,n){return A(r,t,{...e,path:o,orientation:n},i,n)}function A(r,t,e,o,i){let n;if(e.orientation===i)if(e.path.length===0)n=[o?0:1];else{let l=e.path[e.path.length-1];n=[...e.path.slice(0,-1),o?l:l+1]}else n=[...e.path,o?0:1];let s=E(r,t,n,i),a=J(s,n);return{...e,path:n,slot:e.slot,is_edge:!0,orientation:i,view_window:a}}function J(r,t){let e={row_start:0,row_end:1,col_start:0,col_end:1},o=r;for(let i of t){if(o.type==="tab-layout")break;let n=Math.min(i,o.children.length-1),s=o.orientation==="vertical",a=s?"row_start":"col_start",l=s?"row_end":"col_end",y=e[l]-e[a],h=o.sizes.slice(0,n).reduce((c,u)=>c+u*y,e[a]);e={...e,[a]:h,[l]:h+y*o.sizes[n]},o=o.children[n]}return e}var z=class{constructor(t){this.p=t}async set(t,{slot:e},o=this.p.physics.OVERLAY_CLASSNAME,i=this.p.physics.OVERLAY_DEFAULT){let n=this.p,s=b(n.panel,e),a=`:scope > [${n.physics.CHILD_ATTRIBUTE_NAME}="${e}"]`,l=n.querySelector(a);l&&l.classList.add(o);let[y,h,c,u]=n.relativeCoordinates(t,!0),d=L(y,h,s);console.log(h,y,d),d&&(d=G(y,h,s,e,d,c,n.physics)),await n.presizeQueue.run(s,()=>{if(i==="grid"&&d){let m=[e,d?.slot],x=v(s,m,n.physics);n.stylesheet.replaceSync(x)}else if(i==="absolute"){let m=v(s,void 0,n.physics);for(;l?.tagName==="SLOT"&&l;)l=l.assignedElements()[0];let x=l?getComputedStyle(l):void 0,q=$(e,c,u,d,n.physics,x);n.stylesheet.replaceSync([m,q].join(`
+`))}});let p=`${n.physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`,f=new CustomEvent(p,{detail:s});n.dispatchEvent(f)}async clear(t,{slot:e,layout:o},i=this.p.physics.OVERLAY_CLASSNAME){let n=this.p,s=b(n.panel,e),a=`:scope > [${n.physics.CHILD_ATTRIBUTE_NAME}="${e}"]`,l=n.querySelector(a);if(t===null){await n.restore(o);return}let[y,h,c]=n.relativeCoordinates(t,!1),u=L(y,h,s);if(u&&(u=G(y,h,s,e,u,c,n.physics)),u){let d=u?.is_edge?u.orientation:void 0,p=E(s,e,u.path,d);await n.restore(p)}else await n.restore(o);l&&l.classList.remove(i)}};var T=class extends HTMLElement{s;e;u;h;d;l;a;o;f;m;constructor(){super(),this.o=_,this.e=structuredClone(g),this.s=this.attachShadow({mode:"open"}),this.s.innerHTML="<slot></slot>",this.u=new CSSStyleSheet,this.h=new CSSStyleSheet,this.l=!1;let t=`${this.o.CUSTOM_EVENT_NAME_PREFIX}-before-resize`;this.f=new I(this,t),this.m=new z(this.create_overlay_host()),this.s.adoptedStyleSheets=[this.u,this.h]}connectedCallback(){this.addEventListener("dblclick",this.onDblClick),this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointermove",this.onPointerMove)}disconnectedCallback(){this.removeEventListener("dblclick",this.onDblClick),this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointermove",this.onPointerMove)}calculateIntersect=t=>{let[e,o,i]=this.relativeCoordinates(t,!1);return L(e,o,this.e)};calculatePath=t=>Y(t,this.e);setOverlayState=async(t,e,o,i)=>{await this.m.set(t,e,o,i)};clearOverlayState=async(t,e,o)=>{await this.m.clear(t,e,o)};insertPanel=async(t,e=[],o)=>{let i;typeof o=="boolean"&&o?i="horizontal":typeof o=="string"&&(i=o),await this.restore(E(this.e,t,e,i))};removePanel=async t=>{await this.restore(b(this.e,t))};getPanel=(t,e=this.e)=>{if(e.type==="tab-layout")return e.tabs.includes(t)?e:null;for(let o of e.children){let i=this.getPanel(t,o);if(i)return i}return null};clear=async()=>{await this.restore(g)};restoreSync=(t,e=!1)=>{this.e=e?t:D(t);let o=v(this.e,void 0,this.o);this.u.replaceSync(o);let i=`${this.o.CUSTOM_EVENT_NAME_PREFIX}-update`,n=new CustomEvent(i,{detail:this.e});this.dispatchEvent(n)};restore=async(t,e=!1)=>{let o=e?t:D(t);await this.f.run(o,()=>{this.e=o;let i=v(this.e,void 0,this.o);this.u.replaceSync(i);let n=`${this.o.CUSTOM_EVENT_NAME_PREFIX}-update`,s=new CustomEvent(n,{detail:this.e});this.dispatchEvent(s)})};resumeResize=()=>{this.f.resume()};save=()=>structuredClone(this.e);restorePhysics(t){this.o=Object.freeze({...this.o,...t})}savePhysics(){return this.o}relativeCoordinates=(t,e=!0)=>{(e||!this.a)&&(this.a={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let o=this.a.box,i=this.a.style,n=parseFloat(i.paddingLeft),s=parseFloat(i.paddingTop),a=o.width-n-parseFloat(i.paddingRight),l=o.height-s-parseFloat(i.paddingBottom),y=t.clientX-o.left-n,h=t.clientY-o.top-s,c=Math.max(0,Math.min(1,y/a)),u=Math.max(0,Math.min(1,h/l));return[c,u,o,i]};realCoordinates=(t,e)=>{this.a||(this.a={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let o=this.a.box,i=this.a.style,n;e&&(n=getComputedStyle(e));let s=H(t,o,i,n);return new DOMRect(o.left+s.x,o.top+s.y,s.width,s.height)};diffCoordinates=(t,e)=>{let[o,i,n]=this.relativeCoordinates(t,!1),s=(o-e.column)*n.width,a=(i-e.row)*n.height;return Math.sqrt(s**2+a**2)};create_overlay_host(){let t=this;return{get panel(){return t.e},get physics(){return t.o},get stylesheet(){return t.u},get presizeQueue(){return t.f},relativeCoordinates:(e,o)=>t.relativeCoordinates(e,o),restore:(e,o)=>t.restore(e,o),querySelector:e=>t.querySelector(e),dispatchEvent:e=>t.dispatchEvent(e)}}onDblClick=async t=>{let[e,o,i]=this.relativeCoordinates(t,!1),n=L(e,o,this.e,{rect:i,size:this.o.GRID_DIVIDER_SIZE});if(n?.type==="horizontal"||n?.type==="vertical"){let s=w(this.e,n.path,void 0);await this.restore(s,!0)}};onPointerDown=t=>{if(!this.o.GRID_DIVIDER_CHECK_TARGET||t.target===this){let[e,o,i]=this.relativeCoordinates(t),n=this.o.GRID_DIVIDER_SIZE,s=L(e,o,this.e,{rect:i,size:n});s&&s.type!=="layout-path"&&(this.d=[s,e,o],this.setPointerCapture(t.pointerId),t.preventDefault())}};onPointerMove=async t=>{if(this.d){let[s,a]=this.relativeCoordinates(t,!1),[{path:l,type:y},h,c]=this.d,u=y==="horizontal"?h-s:c-a,d=w(this.e,l,u);await this.f.run(d,()=>{this.u.replaceSync(v(d,void 0,this.o))})}if(this.o.GRID_DIVIDER_CHECK_TARGET&&t.target!==this){this.l&&(this.l=!1,this.h.replaceSync(""));return}let[e,o,i]=this.relativeCoordinates(t,!1),n=L(e,o,this.e,{rect:i,size:this.o.GRID_DIVIDER_SIZE});n?.type==="vertical"?(this.h.replaceSync(":host{cursor:row-resize"),this.l=!0):n?.type==="horizontal"?(this.h.replaceSync(":host{cursor:col-resize"),this.l=!0):this.l&&(this.l=!1,this.h.replaceSync(""))};onPointerUp=async t=>{if(this.d){this.releasePointerCapture(t.pointerId);let[e,o]=this.relativeCoordinates(t,!1),[{path:i,type:n},s,a]=this.d,l=n==="horizontal"?s-e:a-o,y=w(this.e,i,l);await this.restore(y,!0),this.d=void 0}}};var tt=`
 :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}
@@ -9,8 +9,8 @@ var b={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};var _=O
 :host::part(close){align-self:stretch}
 :host::slotted{flex:1 1 auto;}
 :host regular-layout-tab{width:0px;}
-`,W=`
+`,et=`
 	<div part="titlebar"></div>
-	<slot part="container"></slot>
-`,S=class extends HTMLElement{s;p;e;o;i=null;f=new WeakMap;connectedCallback(){this.p??=new CSSStyleSheet,this.p.replaceSync(B),this.s??=this.attachShadow({mode:"open"}),this.s.adoptedStyleSheets=[this.p],this.s.innerHTML=W,this.e=this.parentElement,this.o=this.s.children[0],this.o.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointercancel",this.onPointerCancel),this.addEventListener("lostpointercapture",this.onPointerLost),this.e.addEventListener("regular-layout-update",this.drawTabs),this.e.addEventListener("regular-layout-before-update",this.drawTabs)}disconnectedCallback(){this.o.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointermove",this.onPointerMove),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointercancel",this.onPointerUp),this.removeEventListener("lostpointercapture",this.onPointerLost),this.e.removeEventListener("regular-layout-update",this.drawTabs),this.e.removeEventListener("regular-layout-before-update",this.drawTabs)}onPointerDown=e=>{if(e.target.part.contains("tab")){let n=this.e.calculateIntersect(e);n?(this.i={path:n},this.setPointerCapture(e.pointerId),e.preventDefault()):this.i=null}};onPointerMove=e=>{if(this.i){let t=this.e.savePhysics();if(!this.i.moved&&this.e.diffCoordinates(e,this.i.path)<=t.MIN_DRAG_DISTANCE)return;this.i.moved=!0,this.e.setOverlayState(e,this.i.path)}};onPointerUp=e=>{this.i?.moved&&this.e.clearOverlayState(e,this.i.path)};onPointerCancel=e=>{this.i?.moved&&this.e.clearOverlayState(null,this.i.path)};onPointerLost=e=>{this.releasePointerCapture(e.pointerId),this.i=null};drawTabs=e=>{let t=this.e.savePhysics().CHILD_ATTRIBUTE_NAME,n=this.getAttribute(t);if(!n)return;let o=e.detail,i=this.e.getPanel(n,o);i||(i={type:"child-panel",tabs:[n],selected:0});for(let a=0;a<i.tabs.length;a++)if(a>=this.o.children.length){let c=document.createElement("regular-layout-tab");c.populate(this.e,i,a),this.o.appendChild(c),this.f.set(c,a)}else this.o.children[a].populate(this.e,i,a);let s=i.tabs.length;for(let a=this.o.children.length-1;a>=s;a--)this.o.removeChild(this.o.children[a])}};var O=class extends HTMLElement{e;r;l;populate=(e,t,n)=>{if(this.r){if(n===t.selected!=(n===this.r?.selected)||this.r?.tabs[n]!==t.tabs[n]){let s=t.selected===n,a=t.tabs[n];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 o=t.tabs[n],i=t.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=t,this.e=e,this.l=n};onTabClose=e=>{this.r!==void 0&&this.l!==void 0&&this.e?.removePanel(this.r.tabs[this.l])};onTabClick=e=>{if(this.r!==void 0&&this.l!==void 0&&this.l!==this.r.selected){let t=this.e?.save(),n=this.e?.getPanel(this.r.tabs[this.l],t);n&&t&&(n.selected=this.l,this.e?.restore(t))}}};customElements.define("regular-layout",g);customElements.define("regular-layout-frame",S);customElements.define("regular-layout-tab",O);export{g as RegularLayout,S as RegularLayoutFrame};
+	<div part="container"><slot></slot></div>
+`,P=class extends HTMLElement{s;_;t;r;n=null;v=new WeakMap;connectedCallback(){this._??=new CSSStyleSheet,this._.replaceSync(tt),this.s??=this.attachShadow({mode:"open"}),this.s.adoptedStyleSheets=[this._],this.s.innerHTML=et,this.t=this.parentElement,this.r=this.s.children[0],this.r.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointercancel",this.onPointerCancel),this.addEventListener("lostpointercapture",this.onPointerLost),this.t.addEventListener("regular-layout-update",this.drawTabs),this.t.addEventListener("regular-layout-before-update",this.drawTabs)}disconnectedCallback(){this.r.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointermove",this.onPointerMove),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointercancel",this.onPointerUp),this.removeEventListener("lostpointercapture",this.onPointerLost),this.t.removeEventListener("regular-layout-update",this.drawTabs),this.t.removeEventListener("regular-layout-before-update",this.drawTabs)}onPointerDown=t=>{if(t.target.part.contains("tab")){let o=this.t.calculateIntersect(t);o?(this.n={path:o},this.setPointerCapture(t.pointerId),t.preventDefault()):this.n=null}};onPointerMove=t=>{if(this.n){let e=this.t.savePhysics();if(!this.n.moved&&this.t.diffCoordinates(t,this.n.path)<=e.MIN_DRAG_DISTANCE)return;this.n.moved=!0,this.t.setOverlayState(t,this.n.path)}};onPointerUp=t=>{this.n?.moved&&this.t.clearOverlayState(t,this.n.path)};onPointerCancel=t=>{this.n?.moved&&this.t.clearOverlayState(null,this.n.path)};onPointerLost=t=>{this.releasePointerCapture(t.pointerId),this.n=null};drawTabs=t=>{let e=this.t.savePhysics().CHILD_ATTRIBUTE_NAME,o=this.getAttribute(e);if(!o)return;let i=t.detail,n=this.t.getPanel(o,i);n||(n={type:"tab-layout",tabs:[o],selected:0});for(let a=0;a<n.tabs.length;a++)if(a>=this.r.children.length){let l=document.createElement("regular-layout-tab");l.populate(this.t,n,a),this.r.appendChild(l),this.v.set(l,a)}else this.r.children[a].populate(this.t,n,a);let s=n.tabs.length;for(let a=this.r.children.length-1;a>=s;a--)this.r.removeChild(this.r.children[a])}};var M=class extends HTMLElement{t;i;c;populate=(t,e,o)=>{if(this.i){if(o===e.selected!=(o===this.i?.selected)||this.i?.tabs[o]!==e.tabs[o]){let s=e.selected===o,a=e.tabs[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=e.tabs[o],n=e.selected===o,s=n?"active-close close":"close";this.innerHTML=`<div part="title"></div><button part="${s}"></button>`,n?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.i=e,this.t=t,this.c=o};onTabClose=t=>{this.i!==void 0&&this.c!==void 0&&this.t?.removePanel(this.i.tabs[this.c])};onTabClick=t=>{if(this.i!==void 0&&this.c!==void 0&&this.c!==this.i.selected){let e=this.t?.save(),o=this.t?.getPanel(this.i.tabs[this.c],e);o&&e&&(o.selected=this.c,this.t?.restore(e))}}};customElements.define("regular-layout",T);customElements.define("regular-layout-frame",P);customElements.define("regular-layout-tab",M);export{T as RegularLayout,P as RegularLayoutFrame};
 //# sourceMappingURL=index.js.map