rectflow 0.1.0 → 0.2.0

package/README.md

@@ -18,6 +18,7 @@ Rectflow lets you define rows, columns, gaps, and named areas — then calculate
 
 -   Automatic DOM creation for missing areas
 -   Resize-aware (re-layout on container resize)
+-   Interactive area resizing using draggable gutters
 -   CDN-ready bundle + npm package
 
 ---
@@ -50,29 +51,52 @@ import { Rectflow } from 'rectflow'
 ### HTML
 
 ```html
-<div class="main"></div>
+<div id="container"></div>
 ```
 
+### CSS
+
+```css
+#container {
+    width: 100vw;
+    height: 100vh;
+}
+```
+
+⚠️ Important:
+If the container does not have a defined height, Rectflow will not be able to calculate or render the layout correctly.
+
 ### JavaScript
 
 ```ts
-const mainElem = document.querySelector('.main')
+const containerElem = document.getElementById('container')
 
 const rectflow = new Rectflow({
-    container: mainElem,
+    container: containerElem,
     layout: {
-        rows: '50px auto 50px',
-        columns: '50px auto 100px',
-        gap: 5,
+        rows: '60px auto 60px',
+        columns: '60px 240px auto 60px',
+        gap: 6,
         areas: [
-            ['tool tool tool'], 
-            ['drawing chart widget'], 
-            ['drawing base widget']
+            ['A A A A'],
+            ['B E C D'],
+            ['B E F D'],
         ],
-    },
+        resize: {
+            handles: [
+                { between: ['C', 'F'] },
+                { between: ['E', 'C'] },
+            ],
+            gutter: {
+                size: 4,
+                style: {
+                    hoverColor: 'rgba(0, 0, 0, 0.1)',
+                }
+            },
+        }
+    }
 })
 
-rectflow.layout()
 ```
 
 ---
@@ -118,20 +142,17 @@ This makes rapid prototyping easy.
 
 ## 🔁 Resize Handling
 
-Rectflow listens to container resize events and automatically recalculates layout:
-
--   Uses `ResizeObserver`
--   Re-applies positions when size changes
+Rectflow automatically recalculates the layout when the container size changes.
 
-No manual resize handling required.
+It also supports **interactive resizing of individual areas** using draggable gutters, allowing users to dynamically adjust the layout at runtime.
 
 ---
 
 ## ⚙️ API Reference
 
-### `new Rectflow(config)`
+### `new Rectflow(options)`
 
-#### config
+#### options
 
 ```ts
 {
@@ -139,34 +160,47 @@ No manual resize handling required.
     layout: {
         rows: string
         columns: string
-        gap?: number
         areas: string[][]
+        gap?: number
+        resize: {
+            handles: {
+                between: string[]
+            }[]
+            gutter: {
+                size: number
+                color?: string
+                hoverColor?: string
+                activeColor?: string
+            }
+        }
     }
 }
 ```
 
----
+Resize handles are automatically resolved as horizontal or vertical based on the shared boundary between areas.
+
 
-### `registerArea(name, element)`
+### `getArea(name)`
 
-Registers an existing DOM element for an area.
+Returns the HTML element for a given area and lets you perform your own custom logic on it.
 
 ```ts
-rectflow.registerArea('chart', chartElement)
+rectflow.getArea('A')
 ```
 
+---
+## 🚫 Non-Goals
 ---
 
-### `layout()`
+Rectflow is not intended to:
 
-Calculates layout and applies styles.
+- Replace CSS Grid for static layouts
+- Handle animations or transitions
+- Manage application state
 
-```ts
-rectflow.layout()
-```
+It focuses solely on **layout calculation and positioning**.
 
 ---
-
 ## 📄 License
 
 MIT
@@ -178,8 +212,9 @@ MIT
 Inspired by:
 
 -   CSS Grid
--   Game UI layout systems
 -   Charting & trading platforms
+-   Game UI layout systems
+-   Code Editors
 -   Dashboards
 
 ---

package/dist/rectflow.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class g{constructor(e){this.config=e}compute(e){const t=this.parseTracks(this.config.rows,e.height),r=this.parseTracks(this.config.columns,e.width),i=this.config.gap??0,n=this.accumulate(t,i),a=this.accumulate(r,i),l=this.normalizeAreas(this.config.areas),h={};for(let s=0;s<l.length;s++)for(let o=0;o<l[s].length;o++){const u=l[s][o];if(u!==".")if(!h[u])h[u]={x:a[o],y:n[s],width:r[o],height:t[s]};else{const c=h[u];a[o]+r[o]>c.x+c.width&&(c.width=a[o]+r[o]-c.x),n[s]+t[s]>c.y+c.height&&(c.height=n[s]+t[s]-c.y)}}return h}normalizeAreas(e){return e.map(t=>t.length===1?t[0].trim().split(/\s+/):t)}parseTracks(e,t){const r=e.split(/\s+/),i=this.config.gap??0;let n=0,a=0;for(const s of r)s.endsWith("px")?n+=parseFloat(s):s.endsWith("fr")?a+=parseFloat(s):s==="auto"&&(a+=1);const l=t-n-(r.length-1)*i,h=a>0?l/a:0;return r.map(s=>s.endsWith("px")?parseFloat(s):s.endsWith("fr")?parseFloat(s)*h:s==="auto"?h:0)}accumulate(e,t){const r=[];let i=0;for(const n of e)r.push(i),i+=n+t;return r}}class d{constructor(e){this.config=e,this.engine=new g(e.layout)}areas=new Map;engine;registerArea(e,t){const r=this.areas.get(e);r?.auto&&r.elem.remove(),t.style.position="absolute",this.areas.set(e,{elem:t,auto:!1})}layout(){const e={x:0,y:0,width:this.config.container.clientWidth,height:this.config.container.clientHeight},t=this.engine.compute(e);for(const r in t){const i=this.ensureArea(r),n=t[r];Object.assign(i.style,{left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,height:`${n.height}px`})}}ensureArea(e){function t(){return`hsl(${Math.floor(Math.random()*360)}, 70%, 70%)`}const r=this.areas.get(e);if(r)return r.elem;const i=document.createElement("div");return i.dataset.rectflowArea=e,i.style.background=t(),i.style.position="absolute",this.config.container.appendChild(i),this.areas.set(e,{elem:i,auto:!0}),i}clearArea(){this.areas.clear()}}class p{areaRenderer;observer;constructor(e){e.container.style.position="relative",this.areaRenderer=new d(e),this.observer=new ResizeObserver(()=>this.layout()),this.observer.observe(e.container)}registerArea(e,t){this.areaRenderer.registerArea(e,t)}layout(){this.areaRenderer.layout()}destroy(){this.observer.disconnect(),this.areaRenderer.clearArea()}}exports.Rectflow=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class L{layoutAreas;cells=[];boxes={};horizontalBoundary=[];verticalBoundary=[];constructor(t){this.layoutAreas=t.options.layout.areas}calculate(){this.cells=[],this.boxes={},this.horizontalBoundary=[],this.verticalBoundary=[],this.buildCells(),this.calculateBoxes(),this.computeHorizontalBoundaries(),this.computeVerticalBoundaries()}buildCells(){for(let t=0;t<this.layoutAreas.length;t++)for(let e=0;e<this.layoutAreas[t].length;e++)this.cells.push({area:this.layoutAreas[t][e],row:t,col:e})}calculateBoxes(){for(const t of this.cells)if(!this.boxes[t.area])this.boxes[t.area]={area:t.area,rowStart:t.row,rowEnd:t.row,colStart:t.col,colEnd:t.col};else{const e=this.boxes[t.area];e.rowStart=Math.min(e.rowStart,t.row),e.rowEnd=Math.max(e.rowEnd,t.row),e.colStart=Math.min(e.colStart,t.col),e.colEnd=Math.max(e.colEnd,t.col)}}computeBoundaries(t,e,o,s,i){const r=[];let n=1/0,a=-1/0;for(const l of t)n=Math.min(n,l[s]),a=Math.max(a,l[i]);const d=new Set;for(const l of t)d.add(l[e]);for(const l of d){let f=null;for(let p=n;p<=a;p++){const y=t.find(m=>m[e]===l&&p>=m[s]&&p<=m[i])?.area,v=t.find(m=>m[o]===l+1&&p>=m[s]&&p<=m[i])?.area;if(!y||!v||y===v){f&&(r.push(f),f=null);continue}f||(f={first:[],second:[]}),f.first.includes(y)||f.first.push(y),f.second.includes(v)||f.second.push(v)}f&&r.push(f)}return r}computeHorizontalBoundaries(){this.horizontalBoundary=this.computeBoundaries(Object.values(this.boxes),"rowEnd","rowStart","colStart","colEnd")}computeVerticalBoundaries(){this.verticalBoundary=this.computeBoundaries(Object.values(this.boxes),"colEnd","colStart","rowStart","rowEnd")}}class w{x;y;width;height;constructor(t){this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height}moveX(t){this.x+=t}resizeWidth(t){this.width+=t}growFromLeft(t){this.x-=t,this.width+=t}shrinkFromLeft(t){this.x+=t,this.width-=t}growFromRight(t){this.width+=t}shrinkFromRight(t){this.width-=t}moveY(t){this.y+=t}resizeHeight(t){this.height+=t}growFromTop(t){this.y-=t,this.height+=t}shrinkFromTop(t){this.y+=t,this.height-=t}growFromBottom(t){this.height+=t}shrinkFromBottom(t){this.height-=t}clone(){return new w({x:this.x,y:this.y,width:this.width,height:this.height})}}class I{unit;baseValue;size=0;delta=0;min=0;max=1/0;constructor(t,e){this.unit=t,this.baseValue=e}effectiveSize(){return Math.max(this.min,Math.min(this.size+this.delta,this.max))}clampDelta(t){const e=this.effectiveSize();return t>0?Math.min(t,this.max-e):Math.max(t,this.min-e)}applyDelta(t){this.delta+=t}}class O{constructor(t){this.context=t}computedRect={};rowTracks=[];colTracks=[];tracksBuilt=!1;tracksResolved=!1;calculate(){this.initTracks(),this.computedRect={};const t=this.context.options.container,e=this.context.options.layout,o=this.context.areaTopology.boxes,s=e.gap??0;this.tracksResolved?(this.scaleTracks(this.rowTracks,t.clientHeight,s),this.scaleTracks(this.colTracks,t.clientWidth,s)):(this.resolveTracks(this.rowTracks,t.clientHeight,s),this.resolveTracks(this.colTracks,t.clientWidth,s),this.tracksResolved=!0);const i=this.accumulateTracks(this.rowTracks,s),r=this.accumulateTracks(this.colTracks,s);for(const n in o){const a=o[n],d=r[a.colStart],l=i[a.rowStart];let f=0;for(let y=a.colStart;y<=a.colEnd;y++)f+=this.colTracks[y].effectiveSize(),y<a.colEnd&&(f+=s);let p=0;for(let y=a.rowStart;y<=a.rowEnd;y++)p+=this.rowTracks[y].effectiveSize(),y<a.rowEnd&&(p+=s);this.computedRect[n]=new w({x:d,y:l,width:f,height:p})}}initTracks(){if(this.tracksBuilt)return;const t=this.context.options.layout;this.rowTracks=this.buildTracks(t.rows),this.colTracks=this.buildTracks(t.columns),this.tracksBuilt=!0,this.tracksResolved=!1}buildTracks(t){return t.split(/\s+/).map(e=>{if(e.endsWith("px"))return new I("px",parseFloat(e));if(e.endsWith("fr"))return new I("fr",parseFloat(e));if(e==="auto")return new I("auto",1);throw new Error(`Invalid track: ${e}`)})}resolveTracks(t,e,o){const s=o*(t.length-1),i=e-s;let r=0,n=0;for(const l of t)l.unit==="px"?r+=l.baseValue:l.unit==="fr"?n+=l.baseValue:l.unit==="auto"&&(n+=1);const a=Math.max(0,i-r),d=n>0?a/n:0;for(const l of t)l.size===0&&(l.unit==="px"?l.size=l.baseValue:l.unit==="fr"?l.size=l.baseValue*d:l.unit==="auto"&&(l.size=d))}accumulateTracks(t,e){const o=[];let s=0;for(const i of t)o.push(s),s+=i.effectiveSize()+e;return o}scaleTracks(t,e,o){const s=o*(t.length-1),i=e-s,r=t.filter(f=>f.unit==="px").reduce((f,p)=>f+p.effectiveSize(),0),n=t.filter(f=>f.unit!=="px"),a=n.reduce((f,p)=>f+p.effectiveSize(),0);if(a===0)return;const l=Math.max(0,i-r)/a;for(const f of n)f.size*=l,f.delta*=l}resizeRow(t,e){const o=this.rowTracks[t],s=this.rowTracks[t+1];if(!o||!s)return 0;const i=o.clampDelta(e),r=-s.clampDelta(-e),n=Math.abs(i)<Math.abs(r)?i:r;return n===0?0:(o.applyDelta(n),s.applyDelta(-n),n)}resizeColumn(t,e){const o=this.colTracks[t],s=this.colTracks[t+1];if(!o||!s)return 0;const i=o.clampDelta(e),r=-s.clampDelta(-e),n=Math.abs(i)<Math.abs(r)?i:r;return n===0?0:(o.applyDelta(n),s.applyDelta(-n),n)}}class x{elem;rect;constructor(t){this.elem=document.createElement("div"),this.elem.style.position="absolute",t instanceof w?this.rect=t:this.rect=new w(t),this.applyRect()}update(t){t instanceof w?this.rect=t:this.rect=new w(t),this.applyRect()}applyRect(){this.style({left:`${this.rect.x}px`,top:`${this.rect.y}px`,width:`${this.rect.width}px`,height:`${this.rect.height}px`})}style(t){Object.assign(this.elem.style,t)}mount(t){this.elem.parentElement||t.appendChild(this.elem)}remove(){this.elem.remove()}}class R extends x{constructor(t,e){super(e),this.name=t}isArea(t){return this.name===t}}class N{constructor(t){this.context=t}areas={};apply(){const t=this.context.options.container,e=this.context.layoutEngine.computedRect;for(const o in this.areas)e[o]||(this.areas[o].remove(),delete this.areas[o]);for(const o in e){const s=e[o];let i=this.areas[o];i?i.update(s):(i=new R(o,s),this.areas[o]=i,i.elem.style.overflow="hidden",i.elem.dataset.rectflowArea=o,i.elem.style.background="white",i.mount(t))}}getView(t){return this.areas[t]}getAreaElement(t){return this.areas[t].elem}clear(){Object.values(this.areas).forEach(t=>t.remove()),this.areas={}}}class D extends x{state="idle";config;direction;boundary;constructor(t,e){super(e),this.config=t.config,this.direction=t.direction,this.boundary=t.boundary,this.init()}init(){const t=this.elem;t.style.cursor=this.direction==="horizontal"?"row-resize":"col-resize",t.style.transition="background 0.2s",t.style.borderRadius="3px",this.applyIdleStyle()}setState(t){if(this.state!==t)switch(this.state=t,t){case"idle":this.applyIdleStyle();break;case"hover":this.applyHoverStyle();break;case"active":this.applyActiveStyle();break}}applyIdleStyle(){this.elem.style.background=this.config.style?.color}applyHoverStyle(){console.log("hover"),this.elem.style.background=this.config.style?.hoverColor??"red"}applyActiveStyle(){this.elem.style.background=this.config.style?.activeColor}}class k{constructor(t){this.context=t,this.areaTopology=t.areaTopology,this.gutter=t.options.layout.resize?.gutter,this.layoutGap=t.options.layout.gap??0,this.initHandles()}areaTopology;handles;gutter;layoutGap;horizontalGutters=new Map;verticalGutters=new Map;resizeObserver;initHandles(){const t=this.context.options.layout.resize?.handles;t&&(this.handles=t.map(e=>{const[o,s]=e.between;return{between:[o,s],min:e.min,max:e.max}}))}apply(){this.resizeObserver||this.addContainerResize(),this.handles.length>0&&(this.createHorizontalGutters(),this.createVerticalGutters())}addContainerResize(){const t=this.context.options.container;this.resizeObserver=new ResizeObserver(()=>{this.context.onLayoutChange?.()}),this.resizeObserver.observe(t)}getBoundary(t,e){const[o,s]=t.between;for(const i of e)if(i.first.includes(o)&&i.second.includes(s)||i.first.includes(s)&&i.second.includes(o))return i}getBoundaryKey(t){return t.first.join("|")+"::"+t.second.join("|")}createHorizontalGutters(){const t=this.context.layoutEngine.computedRect,e=new Set;for(const o of this.handles){const s=this.getBoundary(o,this.areaTopology.horizontalBoundary);if(!s)continue;const i=this.getBoundaryKey(s);e.add(i);let r={...this.computeGutterSpan(s,"x")};const n=s.first[0],a=t[n];r.y=a.y+a.height+this.layoutGap/2-this.gutter.size/2,r.height=this.gutter.size,this.createOrUpdateGutterView(this.horizontalGutters,i,r,"horizontal",s)}this.cleanupInactiveGutters(this.horizontalGutters,e)}createVerticalGutters(){const t=this.context.layoutEngine.computedRect,e=new Set;for(const o of this.handles){const s=this.getBoundary(o,this.areaTopology.verticalBoundary);if(!s)continue;const i=this.getBoundaryKey(s);e.add(i);let r={...this.computeGutterSpan(s,"y")};const n=s.first[0],a=t[n];r.x=a.x+a.width+this.layoutGap/2-this.gutter.size/2,r.width=this.gutter.size,this.createOrUpdateGutterView(this.verticalGutters,i,r,"vertical",s)}this.cleanupInactiveGutters(this.verticalGutters,e)}createOrUpdateGutterView(t,e,o,s,i){let r=t.get(e);r?r.update(new w(o)):(r=new D({config:this.context.options.layout.resize?.gutter,direction:s,boundary:i},new w(o)),r.mount(this.context.options.container),t.set(e,r),this.attachGutterDrag(r,i,s))}cleanupInactiveGutters(t,e){for(const[o,s]of t)e.has(o)||(s.remove(),t.delete(o))}getRowIndexFromBoundary(t){const e=t.first[0];return this.context.areaTopology.boxes[e].rowEnd}getColIndexFromBoundary(t){const e=t.first[0];return this.context.areaTopology.boxes[e].colEnd}attachGutterDrag(t,e,o){let s=0,i=!1,r=!1,n=null,a=!1;const d=this.context.options.layout.resize?.gutter?.delay,l=g=>o==="horizontal"?g.clientY:g.clientX,f=g=>{if(!r)return;const b=l(g)-s;if(b===0)return;let A=0;if(o==="horizontal"){const T=this.getRowIndexFromBoundary(e);A=this.context.layoutEngine.resizeRow(T,b)}else{const T=this.getColIndexFromBoundary(e);A=this.context.layoutEngine.resizeColumn(T,b)}A!==0&&(s+=A,this.context.onLayoutChange?.())},p=g=>{g.preventDefault(),r=!0,s=l(g),n!==null&&(clearTimeout(n),n=null),a=!1,t.setState("active"),document.addEventListener("mousemove",f),document.addEventListener("mouseup",y)},y=()=>{r=!1,i&&a?t.setState("hover"):t.setState("idle"),document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",y)},v=()=>{i=!0,a=!1,n=window.setTimeout(()=>{!r&&i&&(t.setState("hover"),a=!0)},d)},m=()=>{i=!1,n!==null&&(clearTimeout(n),n=null),a=!1,r||t.setState("idle")};t.elem.addEventListener("mouseenter",v),t.elem.addEventListener("mouseleave",m),t.elem.addEventListener("mousedown",p)}computeGutterSpan(t,e){const o=t.first;let s=1/0,i=-1/0;for(const r of o){const{x:n,y:a,width:d,height:l}=this.context.layoutEngine.computedRect[r];e==="x"?(s=Math.min(s,n),i=Math.max(i,n+d)):(s=Math.min(s,a),i=Math.max(i,a+l))}return e==="x"?{x:s,width:i-s}:{y:s,height:i-s}}relayoutGutters(){for(const t of this.horizontalGutters.values()){const e=t.boundary,o=this.computeGutterSpan(e,"x");t.rect.x=o.x,t.rect.width=o.width;const s=this.context.areaRenderer.getView(e.first[0]).rect;t.rect.y=s.y+s.height+this.layoutGap/2-this.gutter.size/2,t.applyRect()}for(const t of this.verticalGutters.values()){const e=t.boundary,o=this.computeGutterSpan(e,"y");t.rect.y=o.y,t.rect.height=o.height;const s=this.context.areaRenderer.getView(e.first[0]).rect;t.rect.x=s.x+s.width+this.layoutGap/2-this.gutter.size/2,t.applyRect()}}}const E={layout:{gap:0,areas:[],resize:{handles:[],gutter:{size:6,delay:150,style:{color:"transparent",hoverColor:"rgba(0,0,0,0.2)",activeColor:"rgba(0,0,0,0.45)"}}}},strict:!0};class c extends Error{code;constructor(t,e){super(`[Rectflow] ${t}`),this.name="RectflowError",this.code=e}}var h=(u=>(u.CONTAINER_NOT_FOUND="CONTAINER_NOT_FOUND",u.INVALID_CONTAINER="INVALID_CONTAINER",u.INVALID_GRID_CONFIG="INVALID_GRID_CONFIG",u.INVALID_GRID_AREAS="INVALID_GRID_AREAS",u.COMPUTE_FAILED="COMPUTE_FAILED",u.INVALID_LAYOUT="INVALID_LAYOUT",u))(h||{});function z(u,t){if(t==null)return structuredClone(u);if(typeof u!="object"||u===null)return t;const e=structuredClone(u);for(const o in t){const s=t[o],i=e[o];s!==null&&typeof s=="object"&&!Array.isArray(s)?e[o]=z(i,s):s!==void 0&&(e[o]=s)}return e}class S{options;resolve(t){return this.options=t,this.normalizeContainer(),this.normalizeAreas(),this.normalizeGutter(),this.validateContainer(),this.validateRowsCols(),this.validateAreas(),this.validateResizeHandles(),this.validateGutter(),z(E,t)}normalizeContainer(){const t=this.options.container;if(typeof t=="string"){const e=document.querySelector(t);if(!e)throw new c(`Container selector "${t}" does not match any element in HTML`,h.CONTAINER_NOT_FOUND);this.options.container=e}}normalizeAreas(){const{areas:t}=this.options.layout;if(!t)throw new c("layout.areas is required",h.INVALID_LAYOUT);if(!Array.isArray(t))throw new c("layout.areas must be an array of rows (string[][])",h.INVALID_LAYOUT);this.options.layout.areas=t.map((e,o)=>{if(!Array.isArray(e))throw new c(`layout.areas[${o}] must be an array`,h.INVALID_LAYOUT);if(e.length===1){const s=e[0];if(typeof s!="string")throw new c(`layout.areas[${o}][0] must be a string`,h.INVALID_LAYOUT);const i=s.trim().split(/\s+/);if(i.length===0||i.some(r=>!r))throw new c(`layout.areas[${o}] contains invalid area names`,h.INVALID_LAYOUT);return i}return e.map((s,i)=>{if(typeof s!="string")throw new c(`layout.areas[${o}][${i}] must be a string`,h.INVALID_LAYOUT);if(!s.trim())throw new c(`layout.areas[${o}][${i}] cannot be empty`,h.INVALID_LAYOUT);return s.trim()})})}normalizeGutter(){if(!this.options.layout.resize)return;typeof this.options.layout.resize.gutter=="number"&&(this.options.layout.resize.gutter={size:6})}validateContainer(){const t=this.options.container;if(!t)throw new c("Container is null or undefined",h.CONTAINER_NOT_FOUND);if(!(t instanceof HTMLElement))throw new c("Provided container is not a valid HTMLElement",h.INVALID_CONTAINER)}validateRowsCols(){const t=(e,o)=>{if(e==null)throw new c(`layout.${o} is required`,h.INVALID_LAYOUT);if(typeof e!="string")throw new c(`layout.${o} must be a string`,h.INVALID_LAYOUT);if(!e.trim())throw new c(`layout.${o} cannot be empty`,h.INVALID_LAYOUT);const s=/^(auto|\d+(\.\d+)?(px|fr))$/,i=e.trim().split(/\s+/);for(const r of i)if(!s.test(r))throw new c(`Invalid layout.${o} track value "${r}". Allowed values: px (e.g. 60px), fr (e.g. 1fr), or auto.`,h.INVALID_LAYOUT)};t(this.options.layout.rows,"rows"),t(this.options.layout.columns,"columns")}validateAreas(){const t=this.options.layout.areas,e=this.options.layout.rows,o=this.options.layout.columns,s=e.trim().split(/\s+/).length,i=o.trim().split(/\s+/).length;if(t.length!==s)throw new c(`Areas row count (${t.length}) does not match rows definition (${s})`,h.INVALID_LAYOUT);for(let r=0;r<t.length;r++){const n=t[r];if(n.length!==i)throw new c(`Areas column count mismatch at row ${r}. Expected ${i}, got ${n.length}`,h.INVALID_LAYOUT)}}validateResizeHandles(){const t=this.options.layout.resize;if(!t||!t.handles)return;const{handles:e}=t;if(!Array.isArray(e))throw new c("resize.handles must be an array",h.INVALID_LAYOUT);function o(i){const r=new Set;for(const n of i)for(const a of n)r.add(a);return r}const s=o(this.options.layout.areas);e.forEach((i,r)=>{if(typeof i!="object"||i===null)throw new c(`resize.handles[${r}] must be an object`,h.INVALID_LAYOUT);if(!("between"in i))throw new c(`resize.handles[${r}] is missing required property "between"`,h.INVALID_LAYOUT);const n=i.between;if(!Array.isArray(n))throw new c(`resize.handles[${r}].between must be an array`,h.INVALID_LAYOUT);if(n.length!==2)throw new c(`resize.handles[${r}].between must contain exactly 2 area names`,h.INVALID_LAYOUT);const[a,d]=n;if(typeof a!="string"||typeof d!="string")throw new c(`resize.handles[${r}].between values must be strings`,h.INVALID_LAYOUT);if(!a.trim()||!d.trim())throw new c(`resize.handles[${r}].between cannot contain empty strings`,h.INVALID_LAYOUT);if(a===d)throw new c(`resize.handles[${r}].between must reference two different areas`,h.INVALID_LAYOUT);if(!s.has(a)||!s.has(d))throw new c(`resize.handles[${r}] references unknown areas: ${a}, ${d}`,h.INVALID_LAYOUT)})}validateGutter(){const t=this.options.layout.resize;if(!t||t.gutter==null)return;const{gutter:e}=t;if(typeof e=="number"){if(!Number.isFinite(e)||e<0)throw new c("resize.gutter must be a non-negative number",h.INVALID_LAYOUT);return}if(typeof e!="object")throw new c("resize.gutter must be a number or an object",h.INVALID_LAYOUT);const{size:o,delay:s,style:i}=e;if(s!==void 0&&(typeof s!="number"||!Number.isFinite(s)||s<0))throw new c("resize.gutter.delay must be a non-negative number",h.INVALID_LAYOUT);if(o!==void 0&&(typeof o!="number"||!Number.isFinite(o)||o<0))throw new c("resize.gutter.size must be a non-negative number",h.INVALID_LAYOUT);function r(a){const d=new Option().style;return d.color=a,d.color!==""}const n=(a,d)=>{if(typeof a!="string")throw new c(`${d} must be a string`,h.INVALID_LAYOUT);if(!r(a))throw new c(`${d} is not a valid CSS color`,h.INVALID_LAYOUT)};if(i!==void 0){if(typeof i!="object"||i===null)throw new c("resize.gutter.style must be an object",h.INVALID_LAYOUT);const{color:a,hoverColor:d,activeColor:l}=i;a!==void 0&&n(a,"resize.gutter.style.color"),d!==void 0&&n(d,"resize.gutter.style.hoverColor"),l!==void 0&&n(l,"resize.gutter.style.activeColor")}}}class V{_options;resolver;constructor(t,e=new S){this.resolver=e,this._options=Object.freeze(this.resolver.resolve(t))}get options(){return this._options}}class _{optionsStore;areaTopology;layoutEngine;areaRenderer;resizeManager;onLayoutChange;constructor(t){this.optionsStore=new V(t),this.areaTopology=new L(this),this.layoutEngine=new O(this),this.areaRenderer=new N(this),this.resizeManager=new k(this)}get options(){return this.optionsStore.options}}const C=(u,t=!0)=>{if(t)throw u;u instanceof c?console.error(u.message,u.code):console.error("[Rectflow] Unknown error",u)};class G{context;constructor(t){this.context=new _(t);const{container:e}=this.context.options;e.style.position="absolute",this.context.onLayoutChange=()=>{this.context.layoutEngine.calculate(),this.context.areaRenderer.apply(),this.context.resizeManager.relayoutGutters()};try{this.initLayout(),this.applyLayout()}catch(o){C(o,this.context.options.strict)}}initLayout(){this.context.areaTopology.calculate(),this.context.layoutEngine.initTracks()}applyLayout(){this.context.areaTopology.calculate(),this.context.layoutEngine.calculate(),this.context.areaRenderer.apply(),this.context.resizeManager.apply()}getArea(t){return this.context.areaRenderer.getAreaElement(t)}}exports.Rectflow=G;

package/dist/rectflow.es.js

@@ -1,105 +1,750 @@
-class g {
-  constructor(e) {
-    this.config = e;
-  }
-  compute(e) {
-    const t = this.parseTracks(this.config.rows, e.height), r = this.parseTracks(this.config.columns, e.width), i = this.config.gap ?? 0, n = this.accumulate(t, i), a = this.accumulate(r, i), l = this.normalizeAreas(this.config.areas), h = {};
-    for (let s = 0; s < l.length; s++)
-      for (let o = 0; o < l[s].length; o++) {
-        const u = l[s][o];
-        if (u !== ".")
-          if (!h[u])
-            h[u] = {
-              x: a[o],
-              y: n[s],
-              width: r[o],
-              height: t[s]
-            };
-          else {
-            const c = h[u];
-            a[o] + r[o] > c.x + c.width && (c.width = a[o] + r[o] - c.x), n[s] + t[s] > c.y + c.height && (c.height = n[s] + t[s] - c.y);
-          }
-      }
-    return h;
+class L {
+  layoutAreas;
+  cells = [];
+  boxes = {};
+  horizontalBoundary = [];
+  verticalBoundary = [];
+  constructor(t) {
+    this.layoutAreas = t.options.layout.areas;
+  }
+  calculate() {
+    this.cells = [], this.boxes = {}, this.horizontalBoundary = [], this.verticalBoundary = [], this.buildCells(), this.calculateBoxes(), this.computeHorizontalBoundaries(), this.computeVerticalBoundaries();
   }
-  normalizeAreas(e) {
-    return e.map((t) => t.length === 1 ? t[0].trim().split(/\s+/) : t);
+  buildCells() {
+    for (let t = 0; t < this.layoutAreas.length; t++)
+      for (let e = 0; e < this.layoutAreas[t].length; e++)
+        this.cells.push({
+          area: this.layoutAreas[t][e],
+          row: t,
+          col: e
+        });
   }
-  parseTracks(e, t) {
-    const r = e.split(/\s+/), i = this.config.gap ?? 0;
-    let n = 0, a = 0;
-    for (const s of r)
-      s.endsWith("px") ? n += parseFloat(s) : s.endsWith("fr") ? a += parseFloat(s) : s === "auto" && (a += 1);
-    const l = t - n - (r.length - 1) * i, h = a > 0 ? l / a : 0;
-    return r.map((s) => s.endsWith("px") ? parseFloat(s) : s.endsWith("fr") ? parseFloat(s) * h : s === "auto" ? h : 0);
+  calculateBoxes() {
+    for (const t of this.cells)
+      if (!this.boxes[t.area])
+        this.boxes[t.area] = {
+          area: t.area,
+          rowStart: t.row,
+          rowEnd: t.row,
+          colStart: t.col,
+          colEnd: t.col
+        };
+      else {
+        const e = this.boxes[t.area];
+        e.rowStart = Math.min(e.rowStart, t.row), e.rowEnd = Math.max(e.rowEnd, t.row), e.colStart = Math.min(e.colStart, t.col), e.colEnd = Math.max(e.colEnd, t.col);
+      }
   }
-  accumulate(e, t) {
+  computeBoundaries(t, e, o, s, i) {
     const r = [];
-    let i = 0;
-    for (const n of e)
-      r.push(i), i += n + t;
+    let n = 1 / 0, a = -1 / 0;
+    for (const l of t)
+      n = Math.min(n, l[s]), a = Math.max(a, l[i]);
+    const d = /* @__PURE__ */ new Set();
+    for (const l of t) d.add(l[e]);
+    for (const l of d) {
+      let f = null;
+      for (let p = n; p <= a; p++) {
+        const y = t.find(
+          (m) => m[e] === l && p >= m[s] && p <= m[i]
+        )?.area, v = t.find(
+          (m) => m[o] === l + 1 && p >= m[s] && p <= m[i]
+        )?.area;
+        if (!y || !v || y === v) {
+          f && (r.push(f), f = null);
+          continue;
+        }
+        f || (f = { first: [], second: [] }), f.first.includes(y) || f.first.push(y), f.second.includes(v) || f.second.push(v);
+      }
+      f && r.push(f);
+    }
     return r;
   }
+  computeHorizontalBoundaries() {
+    this.horizontalBoundary = this.computeBoundaries(
+      Object.values(this.boxes),
+      "rowEnd",
+      "rowStart",
+      "colStart",
+      "colEnd"
+    );
+  }
+  computeVerticalBoundaries() {
+    this.verticalBoundary = this.computeBoundaries(
+      Object.values(this.boxes),
+      "colEnd",
+      "colStart",
+      "rowStart",
+      "rowEnd"
+    );
+  }
 }
-class p {
-  constructor(e) {
-    this.config = e, this.engine = new g(e.layout);
-  }
-  areas = /* @__PURE__ */ new Map();
-  engine;
-  registerArea(e, t) {
-    const r = this.areas.get(e);
-    r?.auto && r.elem.remove(), t.style.position = "absolute", this.areas.set(e, {
-      elem: t,
-      auto: !1
+class w {
+  x;
+  y;
+  width;
+  height;
+  constructor(t) {
+    this.x = t.x, this.y = t.y, this.width = t.width, this.height = t.height;
+  }
+  moveX(t) {
+    this.x += t;
+  }
+  resizeWidth(t) {
+    this.width += t;
+  }
+  growFromLeft(t) {
+    this.x -= t, this.width += t;
+  }
+  shrinkFromLeft(t) {
+    this.x += t, this.width -= t;
+  }
+  growFromRight(t) {
+    this.width += t;
+  }
+  shrinkFromRight(t) {
+    this.width -= t;
+  }
+  moveY(t) {
+    this.y += t;
+  }
+  resizeHeight(t) {
+    this.height += t;
+  }
+  growFromTop(t) {
+    this.y -= t, this.height += t;
+  }
+  shrinkFromTop(t) {
+    this.y += t, this.height -= t;
+  }
+  growFromBottom(t) {
+    this.height += t;
+  }
+  shrinkFromBottom(t) {
+    this.height -= t;
+  }
+  clone() {
+    return new w({
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
     });
   }
-  layout() {
-    const e = {
-      x: 0,
-      y: 0,
-      width: this.config.container.clientWidth,
-      height: this.config.container.clientHeight
-    }, t = this.engine.compute(e);
-    for (const r in t) {
-      const i = this.ensureArea(r), n = t[r];
-      Object.assign(i.style, {
-        left: `${n.x}px`,
-        top: `${n.y}px`,
-        width: `${n.width}px`,
-        height: `${n.height}px`
+}
+class I {
+  unit;
+  baseValue;
+  size = 0;
+  delta = 0;
+  min = 0;
+  max = 1 / 0;
+  constructor(t, e) {
+    this.unit = t, this.baseValue = e;
+  }
+  effectiveSize() {
+    return Math.max(this.min, Math.min(this.size + this.delta, this.max));
+  }
+  clampDelta(t) {
+    const e = this.effectiveSize();
+    return t > 0 ? Math.min(t, this.max - e) : Math.max(t, this.min - e);
+  }
+  applyDelta(t) {
+    this.delta += t;
+  }
+}
+class O {
+  constructor(t) {
+    this.context = t;
+  }
+  computedRect = {};
+  rowTracks = [];
+  colTracks = [];
+  tracksBuilt = !1;
+  tracksResolved = !1;
+  // public setLayout(layout: LayoutConfig) {
+  //     this.context.options
+  //     this.context.options.layout = layout
+  //     this.tracksBuilt = false
+  //     this.tracksResolved = false
+  //     this.calculate()
+  // }
+  calculate() {
+    this.initTracks(), this.computedRect = {};
+    const t = this.context.options.container, e = this.context.options.layout, o = this.context.areaTopology.boxes, s = e.gap ?? 0;
+    this.tracksResolved ? (this.scaleTracks(this.rowTracks, t.clientHeight, s), this.scaleTracks(this.colTracks, t.clientWidth, s)) : (this.resolveTracks(this.rowTracks, t.clientHeight, s), this.resolveTracks(this.colTracks, t.clientWidth, s), this.tracksResolved = !0);
+    const i = this.accumulateTracks(this.rowTracks, s), r = this.accumulateTracks(this.colTracks, s);
+    for (const n in o) {
+      const a = o[n], d = r[a.colStart], l = i[a.rowStart];
+      let f = 0;
+      for (let y = a.colStart; y <= a.colEnd; y++)
+        f += this.colTracks[y].effectiveSize(), y < a.colEnd && (f += s);
+      let p = 0;
+      for (let y = a.rowStart; y <= a.rowEnd; y++)
+        p += this.rowTracks[y].effectiveSize(), y < a.rowEnd && (p += s);
+      this.computedRect[n] = new w({ x: d, y: l, width: f, height: p });
+    }
+  }
+  initTracks() {
+    if (this.tracksBuilt) return;
+    const t = this.context.options.layout;
+    this.rowTracks = this.buildTracks(t.rows), this.colTracks = this.buildTracks(t.columns), this.tracksBuilt = !0, this.tracksResolved = !1;
+  }
+  buildTracks(t) {
+    return t.split(/\s+/).map((e) => {
+      if (e.endsWith("px")) return new I("px", parseFloat(e));
+      if (e.endsWith("fr")) return new I("fr", parseFloat(e));
+      if (e === "auto") return new I("auto", 1);
+      throw new Error(`Invalid track: ${e}`);
+    });
+  }
+  resolveTracks(t, e, o) {
+    const s = o * (t.length - 1), i = e - s;
+    let r = 0, n = 0;
+    for (const l of t)
+      l.unit === "px" ? r += l.baseValue : l.unit === "fr" ? n += l.baseValue : l.unit === "auto" && (n += 1);
+    const a = Math.max(0, i - r), d = n > 0 ? a / n : 0;
+    for (const l of t)
+      l.size === 0 && (l.unit === "px" ? l.size = l.baseValue : l.unit === "fr" ? l.size = l.baseValue * d : l.unit === "auto" && (l.size = d));
+  }
+  accumulateTracks(t, e) {
+    const o = [];
+    let s = 0;
+    for (const i of t)
+      o.push(s), s += i.effectiveSize() + e;
+    return o;
+  }
+  scaleTracks(t, e, o) {
+    const s = o * (t.length - 1), i = e - s, r = t.filter((f) => f.unit === "px").reduce((f, p) => f + p.effectiveSize(), 0), n = t.filter((f) => f.unit !== "px"), a = n.reduce((f, p) => f + p.effectiveSize(), 0);
+    if (a === 0) return;
+    const l = Math.max(0, i - r) / a;
+    for (const f of n)
+      f.size *= l, f.delta *= l;
+  }
+  resizeRow(t, e) {
+    const o = this.rowTracks[t], s = this.rowTracks[t + 1];
+    if (!o || !s) return 0;
+    const i = o.clampDelta(e), r = -s.clampDelta(-e), n = Math.abs(i) < Math.abs(r) ? i : r;
+    return n === 0 ? 0 : (o.applyDelta(n), s.applyDelta(-n), n);
+  }
+  resizeColumn(t, e) {
+    const o = this.colTracks[t], s = this.colTracks[t + 1];
+    if (!o || !s) return 0;
+    const i = o.clampDelta(e), r = -s.clampDelta(-e), n = Math.abs(i) < Math.abs(r) ? i : r;
+    return n === 0 ? 0 : (o.applyDelta(n), s.applyDelta(-n), n);
+  }
+}
+class x {
+  elem;
+  rect;
+  constructor(t) {
+    this.elem = document.createElement("div"), this.elem.style.position = "absolute", t instanceof w ? this.rect = t : this.rect = new w(t), this.applyRect();
+  }
+  update(t) {
+    t instanceof w ? this.rect = t : this.rect = new w(t), this.applyRect();
+  }
+  applyRect() {
+    this.style({
+      left: `${this.rect.x}px`,
+      top: `${this.rect.y}px`,
+      width: `${this.rect.width}px`,
+      height: `${this.rect.height}px`
+    });
+  }
+  style(t) {
+    Object.assign(this.elem.style, t);
+  }
+  mount(t) {
+    this.elem.parentElement || t.appendChild(this.elem);
+  }
+  remove() {
+    this.elem.remove();
+  }
+}
+class N extends x {
+  constructor(t, e) {
+    super(e), this.name = t;
+  }
+  isArea(t) {
+    return this.name === t;
+  }
+}
+class R {
+  constructor(t) {
+    this.context = t;
+  }
+  areas = {};
+  apply() {
+    const t = this.context.options.container, e = this.context.layoutEngine.computedRect;
+    for (const o in this.areas)
+      e[o] || (this.areas[o].remove(), delete this.areas[o]);
+    for (const o in e) {
+      const s = e[o];
+      let i = this.areas[o];
+      i ? i.update(s) : (i = new N(o, s), this.areas[o] = i, i.elem.style.overflow = "hidden", i.elem.dataset.rectflowArea = o, i.elem.style.background = "white", i.mount(t));
+    }
+  }
+  getView(t) {
+    return this.areas[t];
+  }
+  getAreaElement(t) {
+    return this.areas[t].elem;
+  }
+  clear() {
+    Object.values(this.areas).forEach((t) => t.remove()), this.areas = {};
+  }
+}
+class D extends x {
+  state = "idle";
+  config;
+  direction;
+  boundary;
+  constructor(t, e) {
+    super(e), this.config = t.config, this.direction = t.direction, this.boundary = t.boundary, this.init();
+  }
+  init() {
+    const t = this.elem;
+    t.style.cursor = this.direction === "horizontal" ? "row-resize" : "col-resize", t.style.transition = "background 0.2s", t.style.borderRadius = "3px", this.applyIdleStyle();
+  }
+  setState(t) {
+    if (this.state !== t)
+      switch (this.state = t, t) {
+        case "idle":
+          this.applyIdleStyle();
+          break;
+        case "hover":
+          this.applyHoverStyle();
+          break;
+        case "active":
+          this.applyActiveStyle();
+          break;
+      }
+  }
+  applyIdleStyle() {
+    this.elem.style.background = this.config.style?.color;
+  }
+  applyHoverStyle() {
+    console.log("hover"), this.elem.style.background = this.config.style?.hoverColor ?? "red";
+  }
+  applyActiveStyle() {
+    this.elem.style.background = this.config.style?.activeColor;
+  }
+}
+class k {
+  constructor(t) {
+    this.context = t, this.areaTopology = t.areaTopology, this.gutter = t.options.layout.resize?.gutter, this.layoutGap = t.options.layout.gap ?? 0, this.initHandles();
+  }
+  areaTopology;
+  handles;
+  gutter;
+  layoutGap;
+  horizontalGutters = /* @__PURE__ */ new Map();
+  verticalGutters = /* @__PURE__ */ new Map();
+  resizeObserver;
+  initHandles() {
+    const t = this.context.options.layout.resize?.handles;
+    t && (this.handles = t.map((e) => {
+      const [o, s] = e.between;
+      return {
+        between: [o, s],
+        min: e.min,
+        max: e.max
+      };
+    }));
+  }
+  apply() {
+    this.resizeObserver || this.addContainerResize(), this.handles.length > 0 && (this.createHorizontalGutters(), this.createVerticalGutters());
+  }
+  addContainerResize() {
+    const t = this.context.options.container;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.context.onLayoutChange?.();
+    }), this.resizeObserver.observe(t);
+  }
+  getBoundary(t, e) {
+    const [o, s] = t.between;
+    for (const i of e)
+      if (i.first.includes(o) && i.second.includes(s) || i.first.includes(s) && i.second.includes(o))
+        return i;
+  }
+  getBoundaryKey(t) {
+    return t.first.join("|") + "::" + t.second.join("|");
+  }
+  createHorizontalGutters() {
+    const t = this.context.layoutEngine.computedRect, e = /* @__PURE__ */ new Set();
+    for (const o of this.handles) {
+      const s = this.getBoundary(o, this.areaTopology.horizontalBoundary);
+      if (!s) continue;
+      const i = this.getBoundaryKey(s);
+      e.add(i);
+      let r = { ...this.computeGutterSpan(s, "x") };
+      const n = s.first[0], a = t[n];
+      r.y = a.y + a.height + this.layoutGap / 2 - this.gutter.size / 2, r.height = this.gutter.size, this.createOrUpdateGutterView(this.horizontalGutters, i, r, "horizontal", s);
+    }
+    this.cleanupInactiveGutters(this.horizontalGutters, e);
+  }
+  createVerticalGutters() {
+    const t = this.context.layoutEngine.computedRect, e = /* @__PURE__ */ new Set();
+    for (const o of this.handles) {
+      const s = this.getBoundary(o, this.areaTopology.verticalBoundary);
+      if (!s) continue;
+      const i = this.getBoundaryKey(s);
+      e.add(i);
+      let r = { ...this.computeGutterSpan(s, "y") };
+      const n = s.first[0], a = t[n];
+      r.x = a.x + a.width + this.layoutGap / 2 - this.gutter.size / 2, r.width = this.gutter.size, this.createOrUpdateGutterView(this.verticalGutters, i, r, "vertical", s);
+    }
+    this.cleanupInactiveGutters(this.verticalGutters, e);
+  }
+  createOrUpdateGutterView(t, e, o, s, i) {
+    let r = t.get(e);
+    r ? r.update(new w(o)) : (r = new D(
+      {
+        config: this.context.options.layout.resize?.gutter,
+        direction: s,
+        boundary: i
+      },
+      new w(o)
+    ), r.mount(this.context.options.container), t.set(e, r), this.attachGutterDrag(r, i, s));
+  }
+  cleanupInactiveGutters(t, e) {
+    for (const [o, s] of t)
+      e.has(o) || (s.remove(), t.delete(o));
+  }
+  getRowIndexFromBoundary(t) {
+    const e = t.first[0];
+    return this.context.areaTopology.boxes[e].rowEnd;
+  }
+  getColIndexFromBoundary(t) {
+    const e = t.first[0];
+    return this.context.areaTopology.boxes[e].colEnd;
+  }
+  attachGutterDrag(t, e, o) {
+    let s = 0, i = !1, r = !1, n = null, a = !1;
+    const d = this.context.options.layout.resize?.gutter?.delay, l = (g) => o === "horizontal" ? g.clientY : g.clientX, f = (g) => {
+      if (!r) return;
+      const b = l(g) - s;
+      if (b === 0) return;
+      let A = 0;
+      if (o === "horizontal") {
+        const T = this.getRowIndexFromBoundary(e);
+        A = this.context.layoutEngine.resizeRow(T, b);
+      } else {
+        const T = this.getColIndexFromBoundary(e);
+        A = this.context.layoutEngine.resizeColumn(T, b);
+      }
+      A !== 0 && (s += A, this.context.onLayoutChange?.());
+    }, p = (g) => {
+      g.preventDefault(), r = !0, s = l(g), n !== null && (clearTimeout(n), n = null), a = !1, t.setState("active"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", y);
+    }, y = () => {
+      r = !1, i && a ? t.setState("hover") : t.setState("idle"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", y);
+    }, v = () => {
+      i = !0, a = !1, n = window.setTimeout(() => {
+        !r && i && (t.setState("hover"), a = !0);
+      }, d);
+    }, m = () => {
+      i = !1, n !== null && (clearTimeout(n), n = null), a = !1, r || t.setState("idle");
+    };
+    t.elem.addEventListener("mouseenter", v), t.elem.addEventListener("mouseleave", m), t.elem.addEventListener("mousedown", p);
+  }
+  computeGutterSpan(t, e) {
+    const o = t.first;
+    let s = 1 / 0, i = -1 / 0;
+    for (const r of o) {
+      const { x: n, y: a, width: d, height: l } = this.context.layoutEngine.computedRect[r];
+      e === "x" ? (s = Math.min(s, n), i = Math.max(i, n + d)) : (s = Math.min(s, a), i = Math.max(i, a + l));
+    }
+    return e === "x" ? { x: s, width: i - s } : { y: s, height: i - s };
+  }
+  relayoutGutters() {
+    for (const t of this.horizontalGutters.values()) {
+      const e = t.boundary, o = this.computeGutterSpan(e, "x");
+      t.rect.x = o.x, t.rect.width = o.width;
+      const s = this.context.areaRenderer.getView(e.first[0]).rect;
+      t.rect.y = s.y + s.height + this.layoutGap / 2 - this.gutter.size / 2, t.applyRect();
+    }
+    for (const t of this.verticalGutters.values()) {
+      const e = t.boundary, o = this.computeGutterSpan(e, "y");
+      t.rect.y = o.y, t.rect.height = o.height;
+      const s = this.context.areaRenderer.getView(e.first[0]).rect;
+      t.rect.x = s.x + s.width + this.layoutGap / 2 - this.gutter.size / 2, t.applyRect();
+    }
+  }
+}
+const E = {
+  layout: {
+    gap: 0,
+    areas: [],
+    resize: {
+      handles: [],
+      gutter: {
+        size: 6,
+        delay: 150,
+        style: {
+          color: "transparent",
+          hoverColor: "rgba(0,0,0,0.2)",
+          activeColor: "rgba(0,0,0,0.45)"
+        }
+      }
+    }
+  },
+  strict: !0
+};
+class c extends Error {
+  code;
+  constructor(t, e) {
+    super(`[Rectflow] ${t}`), this.name = "RectflowError", this.code = e;
+  }
+}
+var h = /* @__PURE__ */ ((u) => (u.CONTAINER_NOT_FOUND = "CONTAINER_NOT_FOUND", u.INVALID_CONTAINER = "INVALID_CONTAINER", u.INVALID_GRID_CONFIG = "INVALID_GRID_CONFIG", u.INVALID_GRID_AREAS = "INVALID_GRID_AREAS", u.COMPUTE_FAILED = "COMPUTE_FAILED", u.INVALID_LAYOUT = "INVALID_LAYOUT", u))(h || {});
+function z(u, t) {
+  if (t == null)
+    return structuredClone(u);
+  if (typeof u != "object" || u === null)
+    return t;
+  const e = structuredClone(u);
+  for (const o in t) {
+    const s = t[o], i = e[o];
+    s !== null && typeof s == "object" && !Array.isArray(s) ? e[o] = z(i, s) : s !== void 0 && (e[o] = s);
+  }
+  return e;
+}
+class S {
+  options;
+  resolve(t) {
+    return this.options = t, this.normalizeContainer(), this.normalizeAreas(), this.normalizeGutter(), this.validateContainer(), this.validateRowsCols(), this.validateAreas(), this.validateResizeHandles(), this.validateGutter(), z(E, t);
+  }
+  normalizeContainer() {
+    const t = this.options.container;
+    if (typeof t == "string") {
+      const e = document.querySelector(t);
+      if (!e)
+        throw new c(
+          `Container selector "${t}" does not match any element in HTML`,
+          h.CONTAINER_NOT_FOUND
+        );
+      this.options.container = e;
+    }
+  }
+  normalizeAreas() {
+    const { areas: t } = this.options.layout;
+    if (!t)
+      throw new c("layout.areas is required", h.INVALID_LAYOUT);
+    if (!Array.isArray(t))
+      throw new c("layout.areas must be an array of rows (string[][])", h.INVALID_LAYOUT);
+    this.options.layout.areas = t.map((e, o) => {
+      if (!Array.isArray(e))
+        throw new c(`layout.areas[${o}] must be an array`, h.INVALID_LAYOUT);
+      if (e.length === 1) {
+        const s = e[0];
+        if (typeof s != "string")
+          throw new c(`layout.areas[${o}][0] must be a string`, h.INVALID_LAYOUT);
+        const i = s.trim().split(/\s+/);
+        if (i.length === 0 || i.some((r) => !r))
+          throw new c(
+            `layout.areas[${o}] contains invalid area names`,
+            h.INVALID_LAYOUT
+          );
+        return i;
+      }
+      return e.map((s, i) => {
+        if (typeof s != "string")
+          throw new c(
+            `layout.areas[${o}][${i}] must be a string`,
+            h.INVALID_LAYOUT
+          );
+        if (!s.trim())
+          throw new c(
+            `layout.areas[${o}][${i}] cannot be empty`,
+            h.INVALID_LAYOUT
+          );
+        return s.trim();
       });
+    });
+  }
+  normalizeGutter() {
+    if (!this.options.layout.resize) return;
+    typeof this.options.layout.resize.gutter == "number" && (this.options.layout.resize.gutter = { size: 6 });
+  }
+  validateContainer() {
+    const t = this.options.container;
+    if (!t)
+      throw new c("Container is null or undefined", h.CONTAINER_NOT_FOUND);
+    if (!(t instanceof HTMLElement))
+      throw new c("Provided container is not a valid HTMLElement", h.INVALID_CONTAINER);
+  }
+  validateRowsCols() {
+    const t = (e, o) => {
+      if (e == null)
+        throw new c(`layout.${o} is required`, h.INVALID_LAYOUT);
+      if (typeof e != "string")
+        throw new c(`layout.${o} must be a string`, h.INVALID_LAYOUT);
+      if (!e.trim())
+        throw new c(`layout.${o} cannot be empty`, h.INVALID_LAYOUT);
+      const s = /^(auto|\d+(\.\d+)?(px|fr))$/, i = e.trim().split(/\s+/);
+      for (const r of i)
+        if (!s.test(r))
+          throw new c(
+            `Invalid layout.${o} track value "${r}". Allowed values: px (e.g. 60px), fr (e.g. 1fr), or auto.`,
+            h.INVALID_LAYOUT
+          );
+    };
+    t(this.options.layout.rows, "rows"), t(this.options.layout.columns, "columns");
+  }
+  validateAreas() {
+    const t = this.options.layout.areas, e = this.options.layout.rows, o = this.options.layout.columns, s = e.trim().split(/\s+/).length, i = o.trim().split(/\s+/).length;
+    if (t.length !== s)
+      throw new c(
+        `Areas row count (${t.length}) does not match rows definition (${s})`,
+        h.INVALID_LAYOUT
+      );
+    for (let r = 0; r < t.length; r++) {
+      const n = t[r];
+      if (n.length !== i)
+        throw new c(
+          `Areas column count mismatch at row ${r}. Expected ${i}, got ${n.length}`,
+          h.INVALID_LAYOUT
+        );
     }
   }
-  ensureArea(e) {
-    function t() {
-      return `hsl(${Math.floor(Math.random() * 360)}, 70%, 70%)`;
+  validateResizeHandles() {
+    const t = this.options.layout.resize;
+    if (!t || !t.handles) return;
+    const { handles: e } = t;
+    if (!Array.isArray(e))
+      throw new c("resize.handles must be an array", h.INVALID_LAYOUT);
+    function o(i) {
+      const r = /* @__PURE__ */ new Set();
+      for (const n of i)
+        for (const a of n)
+          r.add(a);
+      return r;
+    }
+    const s = o(this.options.layout.areas);
+    e.forEach((i, r) => {
+      if (typeof i != "object" || i === null)
+        throw new c(`resize.handles[${r}] must be an object`, h.INVALID_LAYOUT);
+      if (!("between" in i))
+        throw new c(
+          `resize.handles[${r}] is missing required property "between"`,
+          h.INVALID_LAYOUT
+        );
+      const n = i.between;
+      if (!Array.isArray(n))
+        throw new c(`resize.handles[${r}].between must be an array`, h.INVALID_LAYOUT);
+      if (n.length !== 2)
+        throw new c(
+          `resize.handles[${r}].between must contain exactly 2 area names`,
+          h.INVALID_LAYOUT
+        );
+      const [a, d] = n;
+      if (typeof a != "string" || typeof d != "string")
+        throw new c(
+          `resize.handles[${r}].between values must be strings`,
+          h.INVALID_LAYOUT
+        );
+      if (!a.trim() || !d.trim())
+        throw new c(
+          `resize.handles[${r}].between cannot contain empty strings`,
+          h.INVALID_LAYOUT
+        );
+      if (a === d)
+        throw new c(
+          `resize.handles[${r}].between must reference two different areas`,
+          h.INVALID_LAYOUT
+        );
+      if (!s.has(a) || !s.has(d))
+        throw new c(
+          `resize.handles[${r}] references unknown areas: ${a}, ${d}`,
+          h.INVALID_LAYOUT
+        );
+    });
+  }
+  validateGutter() {
+    const t = this.options.layout.resize;
+    if (!t || t.gutter == null) return;
+    const { gutter: e } = t;
+    if (typeof e == "number") {
+      if (!Number.isFinite(e) || e < 0)
+        throw new c("resize.gutter must be a non-negative number", h.INVALID_LAYOUT);
+      return;
+    }
+    if (typeof e != "object")
+      throw new c("resize.gutter must be a number or an object", h.INVALID_LAYOUT);
+    const { size: o, delay: s, style: i } = e;
+    if (s !== void 0 && (typeof s != "number" || !Number.isFinite(s) || s < 0))
+      throw new c("resize.gutter.delay must be a non-negative number", h.INVALID_LAYOUT);
+    if (o !== void 0 && (typeof o != "number" || !Number.isFinite(o) || o < 0))
+      throw new c("resize.gutter.size must be a non-negative number", h.INVALID_LAYOUT);
+    function r(a) {
+      const d = new Option().style;
+      return d.color = a, d.color !== "";
+    }
+    const n = (a, d) => {
+      if (typeof a != "string")
+        throw new c(`${d} must be a string`, h.INVALID_LAYOUT);
+      if (!r(a))
+        throw new c(`${d} is not a valid CSS color`, h.INVALID_LAYOUT);
+    };
+    if (i !== void 0) {
+      if (typeof i != "object" || i === null)
+        throw new c("resize.gutter.style must be an object", h.INVALID_LAYOUT);
+      const { color: a, hoverColor: d, activeColor: l } = i;
+      a !== void 0 && n(a, "resize.gutter.style.color"), d !== void 0 && n(d, "resize.gutter.style.hoverColor"), l !== void 0 && n(l, "resize.gutter.style.activeColor");
     }
-    const r = this.areas.get(e);
-    if (r) return r.elem;
-    const i = document.createElement("div");
-    return i.dataset.rectflowArea = e, i.style.background = t(), i.style.position = "absolute", this.config.container.appendChild(i), this.areas.set(e, { elem: i, auto: !0 }), i;
   }
-  clearArea() {
-    this.areas.clear();
+}
+class V {
+  _options;
+  resolver;
+  constructor(t, e = new S()) {
+    this.resolver = e, this._options = Object.freeze(this.resolver.resolve(t));
+  }
+  get options() {
+    return this._options;
   }
 }
-class d {
+class _ {
+  optionsStore;
+  areaTopology;
+  layoutEngine;
   areaRenderer;
-  observer;
-  constructor(e) {
-    e.container.style.position = "relative", this.areaRenderer = new p(e), this.observer = new ResizeObserver(() => this.layout()), this.observer.observe(e.container);
+  resizeManager;
+  onLayoutChange;
+  constructor(t) {
+    this.optionsStore = new V(t), this.areaTopology = new L(this), this.layoutEngine = new O(this), this.areaRenderer = new R(this), this.resizeManager = new k(this);
+  }
+  get options() {
+    return this.optionsStore.options;
+  }
+}
+const C = (u, t = !0) => {
+  if (t) throw u;
+  u instanceof c ? console.error(u.message, u.code) : console.error("[Rectflow] Unknown error", u);
+};
+class U {
+  context;
+  constructor(t) {
+    this.context = new _(t);
+    const { container: e } = this.context.options;
+    e.style.position = "absolute", this.context.onLayoutChange = () => {
+      this.context.layoutEngine.calculate(), this.context.areaRenderer.apply(), this.context.resizeManager.relayoutGutters();
+    };
+    try {
+      this.initLayout(), this.applyLayout();
+    } catch (o) {
+      C(o, this.context.options.strict);
+    }
   }
-  registerArea(e, t) {
-    this.areaRenderer.registerArea(e, t);
+  initLayout() {
+    this.context.areaTopology.calculate(), this.context.layoutEngine.initTracks();
   }
-  layout() {
-    this.areaRenderer.layout();
+  applyLayout() {
+    this.context.areaTopology.calculate(), this.context.layoutEngine.calculate(), this.context.areaRenderer.apply(), this.context.resizeManager.apply();
   }
-  destroy() {
-    this.observer.disconnect(), this.areaRenderer.clearArea();
+  getArea(t) {
+    return this.context.areaRenderer.getAreaElement(t);
   }
 }
 export {
-  d as Rectflow
+  U as Rectflow
 };

package/dist/rectflow.umd.js

@@ -1 +1 @@
-(function(l,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(l=typeof globalThis<"u"?globalThis:l||self,u(l.Rectflow={}))})(this,(function(l){"use strict";class u{constructor(e){this.config=e}compute(e){const t=this.parseTracks(this.config.rows,e.height),r=this.parseTracks(this.config.columns,e.width),i=this.config.gap??0,n=this.accumulate(t,i),a=this.accumulate(r,i),f=this.normalizeAreas(this.config.areas),h={};for(let s=0;s<f.length;s++)for(let o=0;o<f[s].length;o++){const d=f[s][o];if(d!==".")if(!h[d])h[d]={x:a[o],y:n[s],width:r[o],height:t[s]};else{const c=h[d];a[o]+r[o]>c.x+c.width&&(c.width=a[o]+r[o]-c.x),n[s]+t[s]>c.y+c.height&&(c.height=n[s]+t[s]-c.y)}}return h}normalizeAreas(e){return e.map(t=>t.length===1?t[0].trim().split(/\s+/):t)}parseTracks(e,t){const r=e.split(/\s+/),i=this.config.gap??0;let n=0,a=0;for(const s of r)s.endsWith("px")?n+=parseFloat(s):s.endsWith("fr")?a+=parseFloat(s):s==="auto"&&(a+=1);const f=t-n-(r.length-1)*i,h=a>0?f/a:0;return r.map(s=>s.endsWith("px")?parseFloat(s):s.endsWith("fr")?parseFloat(s)*h:s==="auto"?h:0)}accumulate(e,t){const r=[];let i=0;for(const n of e)r.push(i),i+=n+t;return r}}class p{constructor(e){this.config=e,this.engine=new u(e.layout)}areas=new Map;engine;registerArea(e,t){const r=this.areas.get(e);r?.auto&&r.elem.remove(),t.style.position="absolute",this.areas.set(e,{elem:t,auto:!1})}layout(){const e={x:0,y:0,width:this.config.container.clientWidth,height:this.config.container.clientHeight},t=this.engine.compute(e);for(const r in t){const i=this.ensureArea(r),n=t[r];Object.assign(i.style,{left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,height:`${n.height}px`})}}ensureArea(e){function t(){return`hsl(${Math.floor(Math.random()*360)}, 70%, 70%)`}const r=this.areas.get(e);if(r)return r.elem;const i=document.createElement("div");return i.dataset.rectflowArea=e,i.style.background=t(),i.style.position="absolute",this.config.container.appendChild(i),this.areas.set(e,{elem:i,auto:!0}),i}clearArea(){this.areas.clear()}}class m{areaRenderer;observer;constructor(e){e.container.style.position="relative",this.areaRenderer=new p(e),this.observer=new ResizeObserver(()=>this.layout()),this.observer.observe(e.container)}registerArea(e,t){this.areaRenderer.registerArea(e,t)}layout(){this.areaRenderer.layout()}destroy(){this.observer.disconnect(),this.areaRenderer.clearArea()}}l.Rectflow=m,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+(function(v,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(v=typeof globalThis<"u"?globalThis:v||self,b(v.Rectflow={}))})(this,(function(v){"use strict";class b{layoutAreas;cells=[];boxes={};horizontalBoundary=[];verticalBoundary=[];constructor(t){this.layoutAreas=t.options.layout.areas}calculate(){this.cells=[],this.boxes={},this.horizontalBoundary=[],this.verticalBoundary=[],this.buildCells(),this.calculateBoxes(),this.computeHorizontalBoundaries(),this.computeVerticalBoundaries()}buildCells(){for(let t=0;t<this.layoutAreas.length;t++)for(let e=0;e<this.layoutAreas[t].length;e++)this.cells.push({area:this.layoutAreas[t][e],row:t,col:e})}calculateBoxes(){for(const t of this.cells)if(!this.boxes[t.area])this.boxes[t.area]={area:t.area,rowStart:t.row,rowEnd:t.row,colStart:t.col,colEnd:t.col};else{const e=this.boxes[t.area];e.rowStart=Math.min(e.rowStart,t.row),e.rowEnd=Math.max(e.rowEnd,t.row),e.colStart=Math.min(e.colStart,t.col),e.colEnd=Math.max(e.colEnd,t.col)}}computeBoundaries(t,e,o,s,i){const r=[];let n=1/0,a=-1/0;for(const l of t)n=Math.min(n,l[s]),a=Math.max(a,l[i]);const d=new Set;for(const l of t)d.add(l[e]);for(const l of d){let f=null;for(let y=n;y<=a;y++){const p=t.find(w=>w[e]===l&&y>=w[s]&&y<=w[i])?.area,A=t.find(w=>w[o]===l+1&&y>=w[s]&&y<=w[i])?.area;if(!p||!A||p===A){f&&(r.push(f),f=null);continue}f||(f={first:[],second:[]}),f.first.includes(p)||f.first.push(p),f.second.includes(A)||f.second.push(A)}f&&r.push(f)}return r}computeHorizontalBoundaries(){this.horizontalBoundary=this.computeBoundaries(Object.values(this.boxes),"rowEnd","rowStart","colStart","colEnd")}computeVerticalBoundaries(){this.verticalBoundary=this.computeBoundaries(Object.values(this.boxes),"colEnd","colStart","rowStart","rowEnd")}}class m{x;y;width;height;constructor(t){this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height}moveX(t){this.x+=t}resizeWidth(t){this.width+=t}growFromLeft(t){this.x-=t,this.width+=t}shrinkFromLeft(t){this.x+=t,this.width-=t}growFromRight(t){this.width+=t}shrinkFromRight(t){this.width-=t}moveY(t){this.y+=t}resizeHeight(t){this.height+=t}growFromTop(t){this.y-=t,this.height+=t}shrinkFromTop(t){this.y+=t,this.height-=t}growFromBottom(t){this.height+=t}shrinkFromBottom(t){this.height-=t}clone(){return new m({x:this.x,y:this.y,width:this.width,height:this.height})}}class I{unit;baseValue;size=0;delta=0;min=0;max=1/0;constructor(t,e){this.unit=t,this.baseValue=e}effectiveSize(){return Math.max(this.min,Math.min(this.size+this.delta,this.max))}clampDelta(t){const e=this.effectiveSize();return t>0?Math.min(t,this.max-e):Math.max(t,this.min-e)}applyDelta(t){this.delta+=t}}class R{constructor(t){this.context=t}computedRect={};rowTracks=[];colTracks=[];tracksBuilt=!1;tracksResolved=!1;calculate(){this.initTracks(),this.computedRect={};const t=this.context.options.container,e=this.context.options.layout,o=this.context.areaTopology.boxes,s=e.gap??0;this.tracksResolved?(this.scaleTracks(this.rowTracks,t.clientHeight,s),this.scaleTracks(this.colTracks,t.clientWidth,s)):(this.resolveTracks(this.rowTracks,t.clientHeight,s),this.resolveTracks(this.colTracks,t.clientWidth,s),this.tracksResolved=!0);const i=this.accumulateTracks(this.rowTracks,s),r=this.accumulateTracks(this.colTracks,s);for(const n in o){const a=o[n],d=r[a.colStart],l=i[a.rowStart];let f=0;for(let p=a.colStart;p<=a.colEnd;p++)f+=this.colTracks[p].effectiveSize(),p<a.colEnd&&(f+=s);let y=0;for(let p=a.rowStart;p<=a.rowEnd;p++)y+=this.rowTracks[p].effectiveSize(),p<a.rowEnd&&(y+=s);this.computedRect[n]=new m({x:d,y:l,width:f,height:y})}}initTracks(){if(this.tracksBuilt)return;const t=this.context.options.layout;this.rowTracks=this.buildTracks(t.rows),this.colTracks=this.buildTracks(t.columns),this.tracksBuilt=!0,this.tracksResolved=!1}buildTracks(t){return t.split(/\s+/).map(e=>{if(e.endsWith("px"))return new I("px",parseFloat(e));if(e.endsWith("fr"))return new I("fr",parseFloat(e));if(e==="auto")return new I("auto",1);throw new Error(`Invalid track: ${e}`)})}resolveTracks(t,e,o){const s=o*(t.length-1),i=e-s;let r=0,n=0;for(const l of t)l.unit==="px"?r+=l.baseValue:l.unit==="fr"?n+=l.baseValue:l.unit==="auto"&&(n+=1);const a=Math.max(0,i-r),d=n>0?a/n:0;for(const l of t)l.size===0&&(l.unit==="px"?l.size=l.baseValue:l.unit==="fr"?l.size=l.baseValue*d:l.unit==="auto"&&(l.size=d))}accumulateTracks(t,e){const o=[];let s=0;for(const i of t)o.push(s),s+=i.effectiveSize()+e;return o}scaleTracks(t,e,o){const s=o*(t.length-1),i=e-s,r=t.filter(f=>f.unit==="px").reduce((f,y)=>f+y.effectiveSize(),0),n=t.filter(f=>f.unit!=="px"),a=n.reduce((f,y)=>f+y.effectiveSize(),0);if(a===0)return;const l=Math.max(0,i-r)/a;for(const f of n)f.size*=l,f.delta*=l}resizeRow(t,e){const o=this.rowTracks[t],s=this.rowTracks[t+1];if(!o||!s)return 0;const i=o.clampDelta(e),r=-s.clampDelta(-e),n=Math.abs(i)<Math.abs(r)?i:r;return n===0?0:(o.applyDelta(n),s.applyDelta(-n),n)}resizeColumn(t,e){const o=this.colTracks[t],s=this.colTracks[t+1];if(!o||!s)return 0;const i=o.clampDelta(e),r=-s.clampDelta(-e),n=Math.abs(i)<Math.abs(r)?i:r;return n===0?0:(o.applyDelta(n),s.applyDelta(-n),n)}}class L{elem;rect;constructor(t){this.elem=document.createElement("div"),this.elem.style.position="absolute",t instanceof m?this.rect=t:this.rect=new m(t),this.applyRect()}update(t){t instanceof m?this.rect=t:this.rect=new m(t),this.applyRect()}applyRect(){this.style({left:`${this.rect.x}px`,top:`${this.rect.y}px`,width:`${this.rect.width}px`,height:`${this.rect.height}px`})}style(t){Object.assign(this.elem.style,t)}mount(t){this.elem.parentElement||t.appendChild(this.elem)}remove(){this.elem.remove()}}class N extends L{constructor(t,e){super(e),this.name=t}isArea(t){return this.name===t}}class D{constructor(t){this.context=t}areas={};apply(){const t=this.context.options.container,e=this.context.layoutEngine.computedRect;for(const o in this.areas)e[o]||(this.areas[o].remove(),delete this.areas[o]);for(const o in e){const s=e[o];let i=this.areas[o];i?i.update(s):(i=new N(o,s),this.areas[o]=i,i.elem.style.overflow="hidden",i.elem.dataset.rectflowArea=o,i.elem.style.background="white",i.mount(t))}}getView(t){return this.areas[t]}getAreaElement(t){return this.areas[t].elem}clear(){Object.values(this.areas).forEach(t=>t.remove()),this.areas={}}}class k extends L{state="idle";config;direction;boundary;constructor(t,e){super(e),this.config=t.config,this.direction=t.direction,this.boundary=t.boundary,this.init()}init(){const t=this.elem;t.style.cursor=this.direction==="horizontal"?"row-resize":"col-resize",t.style.transition="background 0.2s",t.style.borderRadius="3px",this.applyIdleStyle()}setState(t){if(this.state!==t)switch(this.state=t,t){case"idle":this.applyIdleStyle();break;case"hover":this.applyHoverStyle();break;case"active":this.applyActiveStyle();break}}applyIdleStyle(){this.elem.style.background=this.config.style?.color}applyHoverStyle(){console.log("hover"),this.elem.style.background=this.config.style?.hoverColor??"red"}applyActiveStyle(){this.elem.style.background=this.config.style?.activeColor}}class E{constructor(t){this.context=t,this.areaTopology=t.areaTopology,this.gutter=t.options.layout.resize?.gutter,this.layoutGap=t.options.layout.gap??0,this.initHandles()}areaTopology;handles;gutter;layoutGap;horizontalGutters=new Map;verticalGutters=new Map;resizeObserver;initHandles(){const t=this.context.options.layout.resize?.handles;t&&(this.handles=t.map(e=>{const[o,s]=e.between;return{between:[o,s],min:e.min,max:e.max}}))}apply(){this.resizeObserver||this.addContainerResize(),this.handles.length>0&&(this.createHorizontalGutters(),this.createVerticalGutters())}addContainerResize(){const t=this.context.options.container;this.resizeObserver=new ResizeObserver(()=>{this.context.onLayoutChange?.()}),this.resizeObserver.observe(t)}getBoundary(t,e){const[o,s]=t.between;for(const i of e)if(i.first.includes(o)&&i.second.includes(s)||i.first.includes(s)&&i.second.includes(o))return i}getBoundaryKey(t){return t.first.join("|")+"::"+t.second.join("|")}createHorizontalGutters(){const t=this.context.layoutEngine.computedRect,e=new Set;for(const o of this.handles){const s=this.getBoundary(o,this.areaTopology.horizontalBoundary);if(!s)continue;const i=this.getBoundaryKey(s);e.add(i);let r={...this.computeGutterSpan(s,"x")};const n=s.first[0],a=t[n];r.y=a.y+a.height+this.layoutGap/2-this.gutter.size/2,r.height=this.gutter.size,this.createOrUpdateGutterView(this.horizontalGutters,i,r,"horizontal",s)}this.cleanupInactiveGutters(this.horizontalGutters,e)}createVerticalGutters(){const t=this.context.layoutEngine.computedRect,e=new Set;for(const o of this.handles){const s=this.getBoundary(o,this.areaTopology.verticalBoundary);if(!s)continue;const i=this.getBoundaryKey(s);e.add(i);let r={...this.computeGutterSpan(s,"y")};const n=s.first[0],a=t[n];r.x=a.x+a.width+this.layoutGap/2-this.gutter.size/2,r.width=this.gutter.size,this.createOrUpdateGutterView(this.verticalGutters,i,r,"vertical",s)}this.cleanupInactiveGutters(this.verticalGutters,e)}createOrUpdateGutterView(t,e,o,s,i){let r=t.get(e);r?r.update(new m(o)):(r=new k({config:this.context.options.layout.resize?.gutter,direction:s,boundary:i},new m(o)),r.mount(this.context.options.container),t.set(e,r),this.attachGutterDrag(r,i,s))}cleanupInactiveGutters(t,e){for(const[o,s]of t)e.has(o)||(s.remove(),t.delete(o))}getRowIndexFromBoundary(t){const e=t.first[0];return this.context.areaTopology.boxes[e].rowEnd}getColIndexFromBoundary(t){const e=t.first[0];return this.context.areaTopology.boxes[e].colEnd}attachGutterDrag(t,e,o){let s=0,i=!1,r=!1,n=null,a=!1;const d=this.context.options.layout.resize?.gutter?.delay,l=g=>o==="horizontal"?g.clientY:g.clientX,f=g=>{if(!r)return;const x=l(g)-s;if(x===0)return;let T=0;if(o==="horizontal"){const z=this.getRowIndexFromBoundary(e);T=this.context.layoutEngine.resizeRow(z,x)}else{const z=this.getColIndexFromBoundary(e);T=this.context.layoutEngine.resizeColumn(z,x)}T!==0&&(s+=T,this.context.onLayoutChange?.())},y=g=>{g.preventDefault(),r=!0,s=l(g),n!==null&&(clearTimeout(n),n=null),a=!1,t.setState("active"),document.addEventListener("mousemove",f),document.addEventListener("mouseup",p)},p=()=>{r=!1,i&&a?t.setState("hover"):t.setState("idle"),document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",p)},A=()=>{i=!0,a=!1,n=window.setTimeout(()=>{!r&&i&&(t.setState("hover"),a=!0)},d)},w=()=>{i=!1,n!==null&&(clearTimeout(n),n=null),a=!1,r||t.setState("idle")};t.elem.addEventListener("mouseenter",A),t.elem.addEventListener("mouseleave",w),t.elem.addEventListener("mousedown",y)}computeGutterSpan(t,e){const o=t.first;let s=1/0,i=-1/0;for(const r of o){const{x:n,y:a,width:d,height:l}=this.context.layoutEngine.computedRect[r];e==="x"?(s=Math.min(s,n),i=Math.max(i,n+d)):(s=Math.min(s,a),i=Math.max(i,a+l))}return e==="x"?{x:s,width:i-s}:{y:s,height:i-s}}relayoutGutters(){for(const t of this.horizontalGutters.values()){const e=t.boundary,o=this.computeGutterSpan(e,"x");t.rect.x=o.x,t.rect.width=o.width;const s=this.context.areaRenderer.getView(e.first[0]).rect;t.rect.y=s.y+s.height+this.layoutGap/2-this.gutter.size/2,t.applyRect()}for(const t of this.verticalGutters.values()){const e=t.boundary,o=this.computeGutterSpan(e,"y");t.rect.y=o.y,t.rect.height=o.height;const s=this.context.areaRenderer.getView(e.first[0]).rect;t.rect.x=s.x+s.width+this.layoutGap/2-this.gutter.size/2,t.applyRect()}}}const S={layout:{gap:0,areas:[],resize:{handles:[],gutter:{size:6,delay:150,style:{color:"transparent",hoverColor:"rgba(0,0,0,0.2)",activeColor:"rgba(0,0,0,0.45)"}}}},strict:!0};class c extends Error{code;constructor(t,e){super(`[Rectflow] ${t}`),this.name="RectflowError",this.code=e}}var h=(u=>(u.CONTAINER_NOT_FOUND="CONTAINER_NOT_FOUND",u.INVALID_CONTAINER="INVALID_CONTAINER",u.INVALID_GRID_CONFIG="INVALID_GRID_CONFIG",u.INVALID_GRID_AREAS="INVALID_GRID_AREAS",u.COMPUTE_FAILED="COMPUTE_FAILED",u.INVALID_LAYOUT="INVALID_LAYOUT",u))(h||{});function O(u,t){if(t==null)return structuredClone(u);if(typeof u!="object"||u===null)return t;const e=structuredClone(u);for(const o in t){const s=t[o],i=e[o];s!==null&&typeof s=="object"&&!Array.isArray(s)?e[o]=O(i,s):s!==void 0&&(e[o]=s)}return e}class V{options;resolve(t){return this.options=t,this.normalizeContainer(),this.normalizeAreas(),this.normalizeGutter(),this.validateContainer(),this.validateRowsCols(),this.validateAreas(),this.validateResizeHandles(),this.validateGutter(),O(S,t)}normalizeContainer(){const t=this.options.container;if(typeof t=="string"){const e=document.querySelector(t);if(!e)throw new c(`Container selector "${t}" does not match any element in HTML`,h.CONTAINER_NOT_FOUND);this.options.container=e}}normalizeAreas(){const{areas:t}=this.options.layout;if(!t)throw new c("layout.areas is required",h.INVALID_LAYOUT);if(!Array.isArray(t))throw new c("layout.areas must be an array of rows (string[][])",h.INVALID_LAYOUT);this.options.layout.areas=t.map((e,o)=>{if(!Array.isArray(e))throw new c(`layout.areas[${o}] must be an array`,h.INVALID_LAYOUT);if(e.length===1){const s=e[0];if(typeof s!="string")throw new c(`layout.areas[${o}][0] must be a string`,h.INVALID_LAYOUT);const i=s.trim().split(/\s+/);if(i.length===0||i.some(r=>!r))throw new c(`layout.areas[${o}] contains invalid area names`,h.INVALID_LAYOUT);return i}return e.map((s,i)=>{if(typeof s!="string")throw new c(`layout.areas[${o}][${i}] must be a string`,h.INVALID_LAYOUT);if(!s.trim())throw new c(`layout.areas[${o}][${i}] cannot be empty`,h.INVALID_LAYOUT);return s.trim()})})}normalizeGutter(){if(!this.options.layout.resize)return;typeof this.options.layout.resize.gutter=="number"&&(this.options.layout.resize.gutter={size:6})}validateContainer(){const t=this.options.container;if(!t)throw new c("Container is null or undefined",h.CONTAINER_NOT_FOUND);if(!(t instanceof HTMLElement))throw new c("Provided container is not a valid HTMLElement",h.INVALID_CONTAINER)}validateRowsCols(){const t=(e,o)=>{if(e==null)throw new c(`layout.${o} is required`,h.INVALID_LAYOUT);if(typeof e!="string")throw new c(`layout.${o} must be a string`,h.INVALID_LAYOUT);if(!e.trim())throw new c(`layout.${o} cannot be empty`,h.INVALID_LAYOUT);const s=/^(auto|\d+(\.\d+)?(px|fr))$/,i=e.trim().split(/\s+/);for(const r of i)if(!s.test(r))throw new c(`Invalid layout.${o} track value "${r}". Allowed values: px (e.g. 60px), fr (e.g. 1fr), or auto.`,h.INVALID_LAYOUT)};t(this.options.layout.rows,"rows"),t(this.options.layout.columns,"columns")}validateAreas(){const t=this.options.layout.areas,e=this.options.layout.rows,o=this.options.layout.columns,s=e.trim().split(/\s+/).length,i=o.trim().split(/\s+/).length;if(t.length!==s)throw new c(`Areas row count (${t.length}) does not match rows definition (${s})`,h.INVALID_LAYOUT);for(let r=0;r<t.length;r++){const n=t[r];if(n.length!==i)throw new c(`Areas column count mismatch at row ${r}. Expected ${i}, got ${n.length}`,h.INVALID_LAYOUT)}}validateResizeHandles(){const t=this.options.layout.resize;if(!t||!t.handles)return;const{handles:e}=t;if(!Array.isArray(e))throw new c("resize.handles must be an array",h.INVALID_LAYOUT);function o(i){const r=new Set;for(const n of i)for(const a of n)r.add(a);return r}const s=o(this.options.layout.areas);e.forEach((i,r)=>{if(typeof i!="object"||i===null)throw new c(`resize.handles[${r}] must be an object`,h.INVALID_LAYOUT);if(!("between"in i))throw new c(`resize.handles[${r}] is missing required property "between"`,h.INVALID_LAYOUT);const n=i.between;if(!Array.isArray(n))throw new c(`resize.handles[${r}].between must be an array`,h.INVALID_LAYOUT);if(n.length!==2)throw new c(`resize.handles[${r}].between must contain exactly 2 area names`,h.INVALID_LAYOUT);const[a,d]=n;if(typeof a!="string"||typeof d!="string")throw new c(`resize.handles[${r}].between values must be strings`,h.INVALID_LAYOUT);if(!a.trim()||!d.trim())throw new c(`resize.handles[${r}].between cannot contain empty strings`,h.INVALID_LAYOUT);if(a===d)throw new c(`resize.handles[${r}].between must reference two different areas`,h.INVALID_LAYOUT);if(!s.has(a)||!s.has(d))throw new c(`resize.handles[${r}] references unknown areas: ${a}, ${d}`,h.INVALID_LAYOUT)})}validateGutter(){const t=this.options.layout.resize;if(!t||t.gutter==null)return;const{gutter:e}=t;if(typeof e=="number"){if(!Number.isFinite(e)||e<0)throw new c("resize.gutter must be a non-negative number",h.INVALID_LAYOUT);return}if(typeof e!="object")throw new c("resize.gutter must be a number or an object",h.INVALID_LAYOUT);const{size:o,delay:s,style:i}=e;if(s!==void 0&&(typeof s!="number"||!Number.isFinite(s)||s<0))throw new c("resize.gutter.delay must be a non-negative number",h.INVALID_LAYOUT);if(o!==void 0&&(typeof o!="number"||!Number.isFinite(o)||o<0))throw new c("resize.gutter.size must be a non-negative number",h.INVALID_LAYOUT);function r(a){const d=new Option().style;return d.color=a,d.color!==""}const n=(a,d)=>{if(typeof a!="string")throw new c(`${d} must be a string`,h.INVALID_LAYOUT);if(!r(a))throw new c(`${d} is not a valid CSS color`,h.INVALID_LAYOUT)};if(i!==void 0){if(typeof i!="object"||i===null)throw new c("resize.gutter.style must be an object",h.INVALID_LAYOUT);const{color:a,hoverColor:d,activeColor:l}=i;a!==void 0&&n(a,"resize.gutter.style.color"),d!==void 0&&n(d,"resize.gutter.style.hoverColor"),l!==void 0&&n(l,"resize.gutter.style.activeColor")}}}class _{_options;resolver;constructor(t,e=new V){this.resolver=e,this._options=Object.freeze(this.resolver.resolve(t))}get options(){return this._options}}class C{optionsStore;areaTopology;layoutEngine;areaRenderer;resizeManager;onLayoutChange;constructor(t){this.optionsStore=new _(t),this.areaTopology=new b(this),this.layoutEngine=new R(this),this.areaRenderer=new D(this),this.resizeManager=new E(this)}get options(){return this.optionsStore.options}}const G=(u,t=!0)=>{if(t)throw u;u instanceof c?console.error(u.message,u.code):console.error("[Rectflow] Unknown error",u)};class U{context;constructor(t){this.context=new C(t);const{container:e}=this.context.options;e.style.position="absolute",this.context.onLayoutChange=()=>{this.context.layoutEngine.calculate(),this.context.areaRenderer.apply(),this.context.resizeManager.relayoutGutters()};try{this.initLayout(),this.applyLayout()}catch(o){G(o,this.context.options.strict)}}initLayout(){this.context.areaTopology.calculate(),this.context.layoutEngine.initTracks()}applyLayout(){this.context.areaTopology.calculate(),this.context.layoutEngine.calculate(),this.context.areaRenderer.apply(),this.context.resizeManager.apply()}getArea(t){return this.context.areaRenderer.getAreaElement(t)}}v.Rectflow=U,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rectflow",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "type": "module",
     "description": "Absolute-position layout engine with grid-like DSL",
     "main": "./dist/rectflow.cjs.js",
@@ -26,6 +26,14 @@
         "panel"
     ],
     "author": "Danish Ahmed Khan",
+    "homepage": "https://github.com/DanishAhmedKhan/rectflow",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/DanishAhmedKhan/rectflow"
+    },
+    "bugs": {
+        "url": "https://github.com/DanishAhmedKhan/rectflow/issues"
+    },
     "license": "MIT",
     "devDependencies": {
         "@types/node": "^25.0.3",

package/dist/AreaRenderer.d.ts

@@ -1,11 +0,0 @@
-import type { RectflowConfig } from './Rectflow';
-export declare class AreaRenderer {
-    private readonly config;
-    private areas;
-    private engine;
-    constructor(config: RectflowConfig);
-    registerArea(name: string, elem: HTMLElement): void;
-    layout(): void;
-    private ensureArea;
-    clearArea(): void;
-}

package/dist/Grid.d.ts

@@ -1,16 +0,0 @@
-export type AreaName = string;
-export type TrackSize = number | `${number}px` | `${number}fr` | 'auto';
-export type GridAreas = string[][];
-export interface GridConfig {
-    rows: string;
-    columns: string;
-    gap?: number;
-    areas: GridAreas;
-}
-export interface Rect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export type ComputedLayout = Record<AreaName, Rect>;

package/dist/LayoutEngine.d.ts

@@ -1,9 +0,0 @@
-import type { Rect, ComputedLayout, GridConfig } from './Grid';
-export declare class LayoutEngine {
-    private config;
-    constructor(config: GridConfig);
-    compute(container: Rect): ComputedLayout;
-    private normalizeAreas;
-    private parseTracks;
-    private accumulate;
-}

package/dist/Rectflow.d.ts

@@ -1,13 +0,0 @@
-import type { GridConfig } from './Grid';
-export type RectflowConfig = {
-    container: HTMLElement;
-    layout: GridConfig;
-};
-export declare class Rectflow {
-    private areaRenderer;
-    private observer;
-    constructor(config: RectflowConfig);
-    registerArea(area: string, elem: HTMLElement): void;
-    layout(): void;
-    destroy(): void;
-}

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './Rectflow';