regular-layout 0.0.1

package/LICENSE.md

@@ -0,0 +1,194 @@
+Apache License
+==============
+
+_Version 2.0, January 2004_  
+_&lt;<http://www.apache.org/licenses/>&gt;_
+
+### Terms and Conditions for use, reproduction, and distribution
+
+#### 1. Definitions
+
+“License” shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+“Licensor” shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+“Legal Entity” shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, “control” means **(i)** the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
+outstanding shares, or **(iii)** beneficial ownership of such entity.
+
+“You” (or “Your”) shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+“Source” form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+“Object” form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+“Work” shall mean the work of authorship, whether in Source or Object form, made
+available under the License, as indicated by a copyright notice that is included
+in or attached to the work (an example is provided in the Appendix below).
+
+“Derivative Works” shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+“Contribution” shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work
+by the copyright owner or by an individual or Legal Entity authorized to submit
+on behalf of the copyright owner. For the purposes of this definition,
+“submitted” means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems, and
+issue tracking systems that are managed by, or on behalf of, the Licensor for
+the purpose of discussing and improving the Work, but excluding communication
+that is conspicuously marked or otherwise designated in writing by the copyright
+owner as “Not a Contribution.”
+
+“Contributor” shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+#### 2. Grant of Copyright License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the Work and such
+Derivative Works in Source or Object form.
+
+#### 3. Grant of Patent License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
+irrevocable (except as stated in this section) patent license to make, have
+made, use, offer to sell, sell, import, and otherwise transfer the Work, where
+such license applies only to those patent claims licensable by such Contributor
+that are necessarily infringed by their Contribution(s) alone or by combination
+of their Contribution(s) with the Work to which such Contribution(s) was
+submitted. If You institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work or a
+Contribution incorporated within the Work constitutes direct or contributory
+patent infringement, then any patent licenses granted to You under this License
+for that Work shall terminate as of the date such litigation is filed.
+
+#### 4. Redistribution
+
+You may reproduce and distribute copies of the Work or Derivative Works thereof
+in any medium, with or without modifications, and in Source or Object form,
+provided that You meet the following conditions:
+
+* **(a)** You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+* **(b)** You must cause any modified files to carry prominent notices stating that You
+changed the files; and
+* **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
+all copyright, patent, trademark, and attribution notices from the Source form
+of the Work, excluding those notices that do not pertain to any part of the
+Derivative Works; and
+* **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
+Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the
+Derivative Works; within the Source form or documentation, if provided along
+with the Derivative Works; or, within a display generated by the Derivative
+Works, if and wherever such third-party notices normally appear. The contents of
+the NOTICE file are for informational purposes only and do not modify the
+License. You may add Your own attribution notices within Derivative Works that
+You distribute, alongside or as an addendum to the NOTICE text from the Work,
+provided that such additional attribution notices cannot be construed as
+modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+#### 5. Submission of Contributions
+
+Unless You explicitly state otherwise, any Contribution intentionally submitted
+for inclusion in the Work by You to the Licensor shall be under the terms and
+conditions of this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify the terms of
+any separate license agreement you may have executed with Licensor regarding
+such Contributions.
+
+#### 6. Trademarks
+
+This License does not grant permission to use the trade names, trademarks,
+service marks, or product names of the Licensor, except as required for
+reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+#### 7. Disclaimer of Warranty
+
+Unless required by applicable law or agreed to in writing, Licensor provides the
+Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
+including, without limitation, any warranties or conditions of TITLE,
+NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
+solely responsible for determining the appropriateness of using or
+redistributing the Work and assume any risks associated with Your exercise of
+permissions under this License.
+
+#### 8. Limitation of Liability
+
+In no event and under no legal theory, whether in tort (including negligence),
+contract, or otherwise, unless required by applicable law (such as deliberate
+and grossly negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special, incidental,
+or consequential damages of any character arising as a result of this License or
+out of the use or inability to use the Work (including but not limited to
+damages for loss of goodwill, work stoppage, computer failure or malfunction, or
+any and all other commercial damages or losses), even if such Contributor has
+been advised of the possibility of such damages.
+
+#### 9. Accepting Warranty or Additional Liability
+
+While redistributing the Work or Derivative Works thereof, You may choose to
+offer, and charge a fee for, acceptance of support, warranty, indemnity, or
+other liability obligations and/or rights consistent with this License. However,
+in accepting such obligations, You may act only on Your own behalf and on Your
+sole responsibility, not on behalf of any other Contributor, and only if You
+agree to indemnify, defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason of your
+accepting any such warranty or additional liability.
+
+_END OF TERMS AND CONDITIONS_
+
+### APPENDIX: How to apply the Apache License to your work
+
+To apply the Apache License to your work, attach the following boilerplate
+notice, with the fields enclosed by brackets `[]` replaced with your own
+identifying information. (Don't include the brackets!) The text should be
+enclosed in the appropriate comment syntax for the file format. We also
+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]
+    
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    
+      http://www.apache.org/licenses/LICENSE-2.0
+    
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.

package/README.md

@@ -0,0 +1,55 @@
+# `<regular-layout>`
+
+A library for resizable panel layouts using CSS `grid`.
+
+- 7kb, zero dependencies
+- Web Component
+- 
+
+## Installation
+
+```bash
+npm install regular-layout
+```
+
+## Usage
+
+Add the `<regular-layout>` custom element to your HTML:
+
+```html
+<regular-layout>
+    <div slot="main">Main content</div>
+    <div slot="sidebar">Sidebar content</div>
+</regular-layout>
+```
+
+Create and manipulate layouts programmatically:
+
+```javascript
+import "regular-layout/dist/index.js";
+
+const layout = document.querySelector('regular-layout');
+
+// Add panels
+layout.insertPanel('main');
+layout.insertPanel('sidebar');
+
+// Save layout state
+const state = layout.save();
+
+// Remove panels (this does not change the DOM, the element is unslotted).
+layout.removePanel('sidebar');
+
+// Restore saved state
+layout.restore(state);
+```
+
+Create repositionable panels using `<regular-layout-frame>`:
+
+```html
+<regular-layout>
+    <regular-layout-frame slot="main">
+        Main content
+    </regular-layout-frame>
+</regular-layout>
+```

package/dist/common/calculate_intersect.d.ts

@@ -0,0 +1,18 @@
+import type { LayoutPath, LayoutDivider, Layout } from "./layout_config.ts";
+/**
+ * Determines which panel or divider is located at a given position in the
+ * layout.
+ *
+ * @param row - Vertical position as a fraction (0-1) of the container
+ * height
+ * @param column - Horizontal position as a fraction (0-1) of the
+ * container width
+ * @param layout - The layout tree to search
+ * @param check_dividers - Whether `LayoutDivider` intersection should be
+ * checked, which oyu may not want for e.g. `drop` actions.
+ * @returns The panel path if over a panel, a divider if over a resizable
+ * boundary, or null if outside all panels
+ */
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers: false): LayoutPath;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers: true): LayoutPath | null | LayoutDivider;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: boolean): LayoutPath | null | LayoutDivider;

package/dist/common/calculate_split.d.ts

@@ -0,0 +1,2 @@
+import { type Layout, type LayoutPath } from "./layout_config";
+export declare function calculate_split(col: number, row: number, panel: Layout, slot: string, config: LayoutPath): LayoutPath;

package/dist/common/flatten.d.ts

@@ -0,0 +1,13 @@
+import type { Layout } from "./layout_config.ts";
+/**
+ * Flattens the layout tree by merging parent and child split panels that have
+ * the same orientation and type.
+ *
+ * When a split panel contains a child split panel with the same orientation,
+ * they are merged into a single split panel. The sizes array is scaled
+ * correctly to maintain proportions.
+ *
+ * @param layout - The layout tree to flatten
+ * @returns A new flattened layout tree (original is not mutated).
+ */
+export declare function flatten(layout: Layout): Layout;

package/dist/common/generate_grid.d.ts

@@ -0,0 +1,32 @@
+import { type Layout } from "./layout_config.ts";
+/**
+ * Generates CSS Grid styles to render a layout tree.
+ * Creates grid-template-rows, grid-template-columns, and positioning rules for
+ * all child panels.
+ *
+ * @param layout - The layout tree to convert to CSS
+ * @param round - If true, rounds percentages to whole numbers. Useful for
+ * avoiding sub-pixel rendering issues. Defaults to false.
+ * @returns CSS string containing :host and ::slotted rules implementing the
+ * layout.
+ *
+ * @example
+ * ```typescript
+ * const layout = {
+ *   type: "split-panel",
+ *   orientation: "horizontal",
+ *   children: [
+ *     { type: "child-panel", child: "sidebar" },
+ *     { type: "child-panel", child: "main" }
+ *   ],
+ *   sizes: [0.25, 0.75]
+ * };
+ *
+ * const css = create_css_grid_layout(layout);
+ * // Returns CSS like:
+ * // :host { display: grid; grid-template-columns: 25% 75%; ... }
+ * // :host ::slotted([slot=sidebar]) { grid-column: 1; grid-row: 1; }
+ * // :host ::slotted([slot=main]) { grid-column: 2; grid-row: 1; }
+ * ```
+ */
+export declare function create_css_grid_layout(layout: Layout, round?: boolean, overlay?: [string, string]): string;

package/dist/common/generate_overlay.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutPath } from "./layout_config";
+export declare function updateOverlaySheet({ view_window: { row_start, row_end, col_start, col_end }, box, }: LayoutPath<DOMRect>): string;

package/dist/common/insert_child.d.ts

@@ -0,0 +1,15 @@
+import type { Layout } from "./layout_config.ts";
+/**
+ * Inserts a new child panel into the layout tree at a specified location.
+ * Creates a split panel if necessary and redistributes sizes equally among all
+ * children.
+ *
+ * @param panel - The root layout tree to insert into
+ * @param child - Unique identifier for the new child panel
+ * @param path - Array of indices defining where to insert. Empty array inserts
+ * at root level.
+ * @param orientation - Orientation for newly created split panels. Defaults to
+ * "horizontal".
+ * @returns A new layout tree with the child inserted (original is not mutated).
+ */
+export declare function insert_child(panel: Layout, child: string, path: number[], orientation?: "horizontal" | "vertical"): Layout;

package/dist/common/layout_config.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The percentage of the maximum resize distance that will be clamped.
+ *
+ */
+export declare const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
+/**
+ * Threshold from panel edge that is considered a split vs drop action.
+ */
+export declare const SPLIT_EDGE_TOLERANCE = 0.15;
+/**
+ * Tolerance threshold for considering two grid track positions as identical.
+ *
+ * When collecting and deduplicating track positions, any positions closer than
+ * this value are treated as the same position to avoid redundant grid tracks.
+ */
+export declare const GRID_TRACK_COLLAPSE_TOLERANCE = 0.0001;
+/**
+ * The representation of a CSS grid, in JSON form.
+ */
+export type Layout = SplitLayout | TabLayout;
+/**
+ * The orientation (of a `SplitPanel`).
+ */
+export type Orientation = "horizontal" | "vertical";
+/**
+ * A logical rectange in percent-coordinates (of a (1, 1) square).
+ */
+export interface ViewWindow {
+    row_start: number;
+    row_end: number;
+    col_start: number;
+    col_end: number;
+}
+/**
+ * A split panel that divides space among multiple child layouts
+ * .
+ * Child panels are arranged either horizontally (side by side) or vertically
+ * (stacked), via the `orientation` property `"horizzontal"` and `"vertical"`
+ * (respectively).
+ */
+export interface SplitLayout {
+    type: "split-panel";
+    children: Layout[];
+    sizes: number[];
+    orientation: Orientation;
+}
+/**
+ * A leaf panel node that contains a single named child element.
+ */
+export interface TabLayout {
+    type: "child-panel";
+    child: string;
+}
+/**
+ * Represents a draggable divider between two panels in the layout.
+ *
+ * Used for hit detection.
+ */
+export interface LayoutDivider {
+    path: number[];
+    view_window: ViewWindow;
+    type: Orientation;
+}
+/**
+ * Represents a panel location result from hit detection.
+ *
+ * Contains both the panel identifier and its grid position in relative units.
+ * The generic parameter `T` allows DOM-only properties (e.g. `DOMRect`) to be
+ * shared in this cross-platform module.
+ */
+export interface LayoutPath<T = undefined> {
+    type: "layout-path";
+    slot: string;
+    path: number[];
+    view_window: ViewWindow;
+    column_offset: number;
+    row_offset: number;
+    orientation: Orientation;
+    box: T;
+}
+/**
+ * Recursively iterates over all child panel names in the layout tree, yielding
+ * panel names in depth-first order.
+ *
+ * @param panel - The layout tree to iterate over
+ * @returns Generator yielding child panel names
+ */
+export declare function iter_panel_children(panel: Layout): Generator<string>;
+/**
+ * An empty `Layout` with no panels.
+ */
+export declare const EMPTY_PANEL: Layout;

package/dist/common/redistribute_panel_sizes.d.ts

@@ -0,0 +1,19 @@
+import { type Layout } from "./layout_config.ts";
+/**
+ * Adjusts panel sizes during a drag operation on a divider.
+ *
+ * The `delta` is distributed proportionally among affected panels, maintaining
+ * the sum:
+ *
+ * - Panels before and including the path index shrink by delta.
+ * - Panels after the path index grow by delta.
+ *
+ * @param panel - The root layout tree to modify.
+ * @param path - Path to the divider being dragged (identifies which split panel
+ * to resize).
+ * @param delta - Amount to resize, as a fraction (0-1). Positive values grow
+ * panels before the divider, negative values shrink them.
+ * @returns A new layout tree with updated sizes (original is not mutated).
+ * ```
+ */
+export declare function redistribute_panel_sizes(panel: Layout, path: number[], delta: number): Layout;

package/dist/common/remove_child.d.ts

@@ -0,0 +1,13 @@
+import type { Layout } from "./layout_config.ts";
+/**
+ * Removes a child panel from the layout tree by its name.
+ *
+ * Redistributes the removed panel's space proportionally among remaining
+ * siblings. Automatically collapses split panels when only one child remains.
+ *
+ * @param panel - The root layout tree to remove from.
+ * @param child - Name of the child panel to remove.
+ * @returns A new layout tree with the child removed (original is not mutated).
+ * Returns `EMPTY_PANEL` if the last panel is removed.
+ */
+export declare function remove_child(panel: Layout, child: string): Layout;

package/dist/extensions.d.ts

@@ -0,0 +1,15 @@
+import { RegularLayout } from "./regular-layout.ts";
+import { RegularLayoutFrame } from "./regular-layout-frame.ts";
+declare global {
+    interface Document {
+        createElement(tagName: "regular-layout", options?: ElementCreationOptions): RegularLayout;
+        createElement(tagName: "regular-layout-frame", options?: ElementCreationOptions): RegularLayoutFrame;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelector(selectors: "regular-layout"): RegularLayout | null;
+        querySelector(selectors: "regular-layout-frame"): RegularLayoutFrame | null;
+    }
+    interface CustomElementRegistry {
+        get(tagName: "regular-layout"): typeof RegularLayout;
+        get(tagName: "regular-layout-frame"): typeof RegularLayoutFrame;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Regular Layout - Resizable Panel Layout System
+ *
+ * A Web Component library for creating resizable, re-arrangeable layouts using
+ * CSS `grid`.
+ *
+ * ## Basic Usage
+ *
+ * ```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>
+ * ```
+ *
+ * ```typescript
+ * import { RegularLayout } from 'regular-layout';
+ *
+ * const layout = document.querySelector('regular-layout');
+ *
+ * // Insert panels into the grid layout.
+ * layout.insertPanel('sidebar', [0]);
+ * layout.insertPanel('main', [1]);
+ *
+ * // Remove a panel (DOM child remains connected, but not slotted).
+ * layout.removePanel('sidebar');
+ *
+ * // Save current layout state.
+ * const state = layout.save();
+ * localStorage.setItem('layout', JSON.stringify(state));
+ *
+ * // Restore layout later.
+ * const savedState = JSON.parse(localStorage.getItem('layout'));
+ * layout.restore(savedState);
+ * ```
+ *
+ * ## Core Components
+ *
+ * - {@link RegularLayout}: The main `<regular-layout>` custom element.
+ * - {@link RegularLayoutFrame}: Optional frame component with titlebar support.
+ *
+ * ## Type Definitions
+ *
+ * - {@link Layout}: The layout tree structure for panel configuration.
+ * - {@link LayoutPath}: Information about a panel's position and viewport.
+ * - {@link LayoutDivider}: Information about a resizable divider.
+ *
+ * @packageDocumentation
+ */
+export type { LayoutPath, Layout, LayoutDivider, } from "./common/layout_config.ts";
+export { RegularLayout } from "./regular-layout.ts";
+export { RegularLayoutFrame } from "./regular-layout-frame.ts";
+import "./extensions.ts";

package/dist/index.js

@@ -0,0 +1,11 @@
+function*C(o){if(o.type==="split-panel")for(let t of o.children)yield*C(t);else yield o.child}var P={type:"split-panel",orientation:"horizontal",sizes:[],children:[]};function f(o,t){if(o.type==="child-panel")return structuredClone(P);let e=structuredClone(o),s=e.children.findIndex(i=>i.type==="child-panel"?i.child===t:!1);if(s!==-1){let i=e.children.filter((h,u)=>u!==s),l=$(e.sizes,s);return i.length===1?i[0]:(e.children=i,e.sizes=l,e)}let r=!1,n=e.children.map(i=>{if(i.type==="split-panel"){let l=f(i,t);return l!==i&&(r=!0),l}return i});return r&&(e.children=n),e}function $(o,t){let e=[],s=o[t],r=0;for(let n=0;n<o.length;n++)n!==t&&(r+=o[n]);for(let n=0;n<o.length;n++)if(n!==t){let i=o[n]/r;e.push(o[n]+s*i)}return e}function T(o){if(o.length===0)return[];let t=o.sort((s,r)=>s-r),e=[t[0]];for(let s=1;s<t.length;s++)Math.abs(t[s]-e[e.length-1])>1e-4&&e.push(t[s]);return e}function E(o,t,e,s){if(o.type==="child-panel")return[e,s];if(o.orientation===t){let r=[e,s],n=e;for(let i=0;i<o.children.length;i++){let l=o.sizes[i],h=E(o.children[i],t,n,n+l*(s-e));r.push(...h),n=n+l*(s-e)}return T(r)}else{let r=[e,s];for(let n of o.children){let i=E(n,t,e,s);r.push(...i)}return T(r)}}function v(o,t){for(let e=0;e<o.length;e++)if(Math.abs(o[e]-t)<1e-4)return e;throw new Error(`Position ${t} not found in ${o}`)}function z(o,t,e,s,r,n,i){if(o.type==="child-panel")return[{child:o.child,colStart:v(t,s),colEnd:v(t,r),rowStart:v(e,n),rowEnd:v(e,i)}];let l=[],{children:h,sizes:u,orientation:c}=o;if(c==="horizontal"){let a=s;for(let p=0;p<h.length;p++){let _=a+u[p]*(r-s);l.push(...z(h[p],t,e,a,_,n,i)),a=_}}else{let a=n;for(let p=0;p<h.length;p++){let _=a+u[p]*(i-n);l.push(...z(h[p],t,e,s,r,a,_)),a=_}}return l}var D=(o,t)=>`:host { display: grid; gap: 0px; grid-template-rows: ${o}; grid-template-columns: ${t}; }`,x=(o,t,e)=>`:host ::slotted([slot=${o}]) { grid-column: ${e}; grid-row: ${t}; }`;function y(o,t=!1,e){if(e&&(o=f(o,e[0])),o.type==="child-panel")return`${D("100%","100%")}
+${x(o.child,"1","1")}`;let s=E(o,"horizontal",0,1),r=[];for(let a=0;a<s.length-1;a++)r.push(s[a+1]-s[a]);let n=r.map(a=>`${t?Math.round(a*100):a*100}%`).join(" "),i=E(o,"vertical",0,1),l=[];for(let a=0;a<i.length-1;a++)l.push(i[a+1]-i[a]);let h=l.map(a=>`${t?Math.round(a*100):a*100}%`).join(" "),u=z(o,s,i,0,1,0,1),c=[D(h,n)];for(let a of u){let p=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}`;c.push(`${x(a.child,_,p)}`),a.child===e?.[1]&&(c.push(`${x(e[0],_,p)}`),c.push(`:host ::slotted([slot=${e[0]}]) { z-index: 1; }`))}return c.join(`
+`)}function m(o,t,e,s=!0){return R(o,t,e,s)}var N={row_start:0,row_end:1,col_start:0,col_end:1};function R(o,t,e,s,r="horizontal",n=structuredClone(N),i=[]){if(e.type==="child-panel")return{type:"layout-path",box:void 0,slot:e.child,path:i,view_window:n,column_offset:(o-n.col_start)/(n.col_end-n.col_start),row_offset:(t-n.row_start)/(n.row_end-n.row_start),orientation:r};if(e.orientation==="vertical"){let l=n.row_start;for(let h=0;h<e.children.length;h++){let c=(n.row_end-n.row_start)*e.sizes[h]+l;if(s&&Math.abs(t-c)<.01)return{path:[...i,h],type:"vertical",view_window:{...n,row_start:l,row_end:c}};if(t>=l&&t<c)return R(o,t,e.children[h],s,"vertical",{...n,row_start:l,row_end:c},[...i,h]);l=c}}else{let l=n.col_start;for(let h=0;h<e.children.length;h++){let u=n.col_end-n.col_start,c=l+u*e.sizes[h];if(s&&Math.abs(o-c)<.01)return{path:[...i,h],type:"horizontal",view_window:{...n,col_start:l,col_end:c}};if(o>=l&&o<c)return R(o,t,e.children[h],s,"horizontal",{...n,col_start:l,col_end:c},[...i,h]);l=c}}return null}function d(o,t,e,s="horizontal"){if(e.length===0){if(o.type==="child-panel")return{type:"split-panel",orientation:s,children:[o,{type:"child-panel",child:t}],sizes:[.5,.5]};{let u=[...o.children,{type:"child-panel",child:t}],c=u.length,a=Array(c).fill(1/c);return{...o,children:u,sizes:a}}}let[r,...n]=e;if(o.type==="child-panel")return d({type:"split-panel",orientation:s,children:[o],sizes:[1]},t,e,s);if(n.length===0||r===o.children.length){let u=[...o.children];u.splice(r,0,{type:"child-panel",child:t});let c=u.length,a=Array(c).fill(1/c);return{...o,children:u,sizes:a}}let i=o.children[r];if(i.type==="child-panel"&&n.length>0){let u=o.orientation==="horizontal"?"vertical":"horizontal",c=d(i,t,n,u),a=[...o.children];return a[r]=c,{...o,children:a}}let l=d(i,t,n,s),h=[...o.children];return h[r]=l,{...o,children:h}}function S(o,t,e){let s=structuredClone(o),r=s,n={horizontal:e,vertical:e};for(let i=0;i<t.length-1;i++)r.type==="split-panel"&&(n[r.orientation]/=r.sizes[t[i]],r=r.children[t[i]]);if(r.type==="split-panel"){let i=n[r.orientation],l=t[t.length-1];r.sizes=H(r.sizes,l,i)}return s}function H(o,t,e){let s=[...o],r=0;for(let i=0;i<=t;i++)r+=o[i];let n=0;for(let i=t+1;i<o.length;i++)n+=o[i];e=Math.sign(e)*Math.min(Math.abs(e),(1-.15)*(e>0?r:n));for(let i=0;i<=t;i++){let l=o[i]/r;s[i]=o[i]-e*l}for(let i=t+1;i<o.length;i++){let l=o[i]/n;s[i]=o[i]+e*l}return s}function O({view_window:{row_start:o,row_end:t,col_start:e,col_end:s},box:r}){let i=o*r.height+0,l=e*r.width+0/2,h=(t-o)*r.height-0,u=(s-e)*r.width-0;return`::slotted(:not([slot])){${`position:absolute!important;z-index:1;top:${i}px;left:${l}px;height:${h}px;width:${u}px;`}}`}function M(o,t,e,s,r){if(r.column_offset<.15||r.column_offset>1-.15)if(r.orientation==="vertical"){let n=d(e,s,[...r.path,r.column_offset<.15?0:1]);r=m(o,t,n,!1)}else{let n=d(e,s,r.path);r=m(o,t,n,!1)}if(r.row_offset<.15&&r.row_offset<r.column_offset||r.row_offset>1-.15&&r.row_offset>r.column_offset)if(r.orientation==="horizontal"){let n=d(e,s,[...r.path,r.row_offset<.15?0:1]);r=m(o,t,n,!1)}else{let n=d(e,s,r.path);r=m(o,t,n,!1)}return r}function w(o){if(o.type==="child-panel")return o;let t=[],e=[];for(let s=0;s<o.children.length;s++){let r=o.children[s],n=o.sizes[s],i=w(r);if(i.type==="split-panel"&&i.orientation===o.orientation)for(let l=0;l<i.children.length;l++)t.push(i.children[l]),e.push(i.sizes[l]*n);else t.push(i),e.push(n)}return{type:"split-panel",orientation:o.orientation,children:t,sizes:e}}var I="absolute",L=class extends HTMLElement{_shadowRoot;_panel;_stylesheet;_dragPath;_slots;_unslotted_slot;constructor(){super(),this._panel=structuredClone(P),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,e,{slot:s},r=I){let n=this._panel;r==="absolute"&&(n=f(n,s),this._slots.get(s)?.assignedElements()[0]?.removeAttribute("slot"));let[i,l,h]=this.relativeCoordinates(t,e),u=m(i,l,n,!1);if(u&&(u=M(i,l,n,s,u)),u){if(r==="interactive"){let c=f(this._panel,s);c=w(d(c,s,u.path));let a=y(c);this._stylesheet.replaceSync(a)}else if(r==="grid"){let c=[s,u.slot],a=y(this._panel,!1,c);this._stylesheet.replaceSync(a)}else if(r==="absolute"){let c=`${y(n)}
+${O({...u,box:h})}`;this._stylesheet.replaceSync(c)}}}clearOverlayState(t,e,s,r=I){let n=this._panel;r==="absolute"&&(n=f(n,s.slot),this._unslotted_slot.assignedElements()[0]?.setAttribute("slot",s.slot));let[i,l,h]=this.relativeCoordinates(t,e),u=m(i,l,n,!1);u&&(u=M(i,l,n,s.slot,u));let{path:c}=u||s;this.removePanel(s.slot),this.insertPanel(s.slot,c)}insertPanel(t,e=[]){this.restore(d(this._panel,t,e))}removePanel(t){this.restore(f(this._panel,t))}calculateIntersect(t,e,s=!1){let[r,n,i]=this.relativeCoordinates(t,e),l=m(r,n,this._panel,s);return l?.type==="layout-path"?{...l,box:i}:null}restore(t,e=!1){this._panel=e?t:w(t);let s=y(t);this._stylesheet.replaceSync(s);let r=new Set(this._slots.keys());for(let n of C(t))if(r.delete(n),!this._slots.has(n)){let i=document.createElement("slot");i.setAttribute("name",n),this._shadowRoot.appendChild(i),this._slots.set(n,i)}for(let n of r){let i=this._slots.get(n);i&&(this._shadowRoot.removeChild(i),this._slots.delete(n))}}save(){return structuredClone(this._panel)}relativeCoordinates(t,e){let s=this.getBoundingClientRect(),r=(t-s.left)/(s.right-s.left),n=(e-s.top)/(s.bottom-s.top);return[r,n,s]}onPointerDown(t){let[e,s]=this.relativeCoordinates(t.clientX,t.clientY),r=m(e,s,this._panel);r&&r.type!=="layout-path"&&(this._dragPath=[r,e,s],this.setPointerCapture(t.pointerId),t.preventDefault(),t.stopImmediatePropagation())}onPointerMove(t){if(this._dragPath){let[e,s]=this.relativeCoordinates(t.clientX,t.clientY),r=this._panel,[{path:n,type:i},l,h]=this._dragPath,u=i==="horizontal"?l-e:h-s,c=S(r,n,u);this._stylesheet.replaceSync(y(c))}}onPointerUp(t){if(this._dragPath){this.releasePointerCapture(t.pointerId);let[e,s]=this.relativeCoordinates(t.clientX,t.clientY),r=this._panel,[{path:n},i,l]=this._dragPath;if(this._dragPath[0].type==="horizontal"){let h=S(r,n,i-e);this.restore(h,!0)}else{let h=S(r,n,l-s);this.restore(h,!0)}this._dragPath=void 0}}};var Y=`
+: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(-2px - var(--titlebar--height));user-select: none;}
+:host([slot])::part(body){flex:1 1 auto;}
+`,g=class extends HTMLElement{_shadowRoot;_container_sheet;_layout;_header;_drag_state=null;constructor(){super(),this._container_sheet=new CSSStyleSheet,this._container_sheet.replaceSync(Y),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.adoptedStyleSheets=[this._container_sheet],this._shadowRoot.innerHTML='<slot part="container"><slot part="titlebar">header</slot><slot part="body"><slot></slot></slot></slot>',this._layout=this.parentElement,this._header=this._shadowRoot.children[0].children[0]}connectedCallback(){this._header.addEventListener("pointerdown",this.onPointerDown),this._header.addEventListener("pointermove",this.onPointerMove),this._header.addEventListener("pointerup",this.onPointerUp)}disconnectedCallback(){this._header.removeEventListener("pointerdown",this.onPointerDown),this._header.removeEventListener("pointermove",this.onPointerMove),this._header.removeEventListener("pointerup",this.onPointerUp)}onPointerDown=t=>{this._drag_state=this._layout.calculateIntersect(t.clientX,t.clientY),this._drag_state&&(this._header.setPointerCapture(t.pointerId),t.preventDefault(),t.stopImmediatePropagation())};onPointerMove=t=>{this._drag_state&&this._layout.setOverlayState(t.clientX,t.clientY,this._drag_state)};onPointerUp=t=>{this._drag_state&&(this._layout.clearOverlayState(t.clientX,t.clientY,this._drag_state),this._header.releasePointerCapture(t.pointerId),this._drag_state=null)}};customElements.define("regular-layout-frame",g);customElements.define("regular-layout",L);export{L as RegularLayout,g as RegularLayoutFrame};
+//# sourceMappingURL=index.js.map