react-panel-layout 0.2.0

package/dist/modules/resizer/useResizeDrag.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file Shared logic for draggable resize handles.
+ */
+import * as React from "react";
+export type ResizeDragAxis = "x" | "y";
+export type UseResizeDragOptions = {
+    /** Axis along which the drag should compute deltas */
+    axis: ResizeDragAxis;
+    /** Callback invoked with the delta value when dragging */
+    onResize?: (delta: number) => void;
+};
+export type UseResizeDragResult<TElement extends HTMLElement> = {
+    /** Ref to attach to the draggable element */
+    ref: React.RefObject<TElement | null>;
+    /** Pointer down handler to initiate dragging */
+    onPointerDown: (event: React.PointerEvent<TElement>) => void;
+    /** Whether a drag interaction is currently active */
+    isDragging: boolean;
+};
+/**
+ * Provides unified pointer handling for resize-capable UI elements.
+ *
+ * @param options - Configuration for the drag interaction.
+ * @returns Handlers and state for wiring into a draggable element.
+ */
+export declare const useResizeDrag: <TElement extends HTMLElement = HTMLElement>(options: UseResizeDragOptions) => UseResizeDragResult<TElement>;

package/dist/modules/window/useDrawerState.d.ts

@@ -0,0 +1,6 @@
+import type { LayerDefinition } from "../../types";
+export declare const useDrawerState: (layers: LayerDefinition[]) => {
+    state: (layerId: string) => boolean;
+    open: (layerId: string) => void;
+    close: (layerId: string) => void;
+};

package/dist/styles-BMEhL6I0.cjs

@@ -0,0 +1,2 @@
+"use strict";const D="var(--rpl-color-resize-handle-idle)",A="var(--rpl-color-resize-handle-hover)",O="var(--rpl-color-resize-handle-active)",I="var(--rpl-color-drop-suggest-border)",r="var(--rpl-color-drop-suggest-bg)",N="var(--rpl-color-insert-guide)",S="var(--rpl-color-insert-guide-shadow)",_="var(--rpl-color-surface)",T="var(--rpl-color-surface-2)",E="var(--rpl-color-border)",L="var(--rpl-color-muted-fg)",R="var(--rpl-shadow-card)",s="var(--rpl-radius-suggest)",G="var(--rpl-size-suggest-border)";const a="var(--rpl-size-resize-handle-thickness)",o="var(--rpl-size-split-handle-thickness)",t="var(--rpl-z-overlay)",n="var(--rpl-z-tabdrag-overlay)",e=a,c="var(--rpl-z-resize-handle)",l=4,p="var(--rpl-size-grid-layer-corner-hit)",P="var(--rpl-size-grid-layer-edge-hit-thickness)",C=t,H=G,d=s,i=I,F=r,U=6,v=n,g="var(--rpl-space-tab-drag-preview-offset-x)",B="var(--rpl-space-tab-drag-preview-offset-y)",W="var(--rpl-size-tab-drag-insert-guide-width)",Z="var(--rpl-radius-tab-drag-insert-guide)",h=N,z=S,V="var(--rpl-radius-floating-panel)",X="var(--rpl-space-floating-panel-gap)",f="var(--rpl-space-floating-panel-header-padding-y)",u="var(--rpl-space-floating-panel-header-padding-x)",Y="var(--rpl-space-floating-panel-content-padding)",K="var(--rpl-size-floating-panel-meta-font)",w="var(--rpl-space-floating-panel-controls-gap)",b=_,y=T,M=E,k=L,x=R,m="var(--rpl-space-drawer-header-padding-y)",j="var(--rpl-space-drawer-header-padding-x)",q="var(--rpl-space-drawer-header-gap)",J="var(--rpl-space-drawer-content-padding)",Q="var(--rpl-size-drawer-close-button-font)",$=_,__=E,E_=R,R_=o,D_="var(--rpl-size-horizontal-divider-width)";exports.COLOR_RESIZE_HANDLE_ACTIVE=O;exports.COLOR_RESIZE_HANDLE_HOVER=A;exports.COLOR_RESIZE_HANDLE_IDLE=D;exports.CSS_VAR_PREFIX="rpl";exports.DRAWER_BORDER_COLOR=__;exports.DRAWER_CLOSE_BUTTON_FONT_SIZE=Q;exports.DRAWER_CONTENT_PADDING=J;exports.DRAWER_HEADER_GAP=q;exports.DRAWER_HEADER_PADDING_X=j;exports.DRAWER_HEADER_PADDING_Y=m;exports.DRAWER_SHADOW=E_;exports.DRAWER_SURFACE_COLOR=$;exports.DROP_SUGGEST_BG_COLOR=F;exports.DROP_SUGGEST_BORDER_COLOR=i;exports.DROP_SUGGEST_BORDER_RADIUS=d;exports.DROP_SUGGEST_BORDER_WIDTH=H;exports.DROP_SUGGEST_PADDING_PX=U;exports.DROP_SUGGEST_Z_INDEX=C;exports.FLOATING_PANEL_BORDER_COLOR=M;exports.FLOATING_PANEL_BORDER_RADIUS=V;exports.FLOATING_PANEL_CONTENT_PADDING=Y;exports.FLOATING_PANEL_CONTROLS_GAP=w;exports.FLOATING_PANEL_GAP=X;exports.FLOATING_PANEL_HEADER_PADDING_X=u;exports.FLOATING_PANEL_HEADER_PADDING_Y=f;exports.FLOATING_PANEL_META_FONT_SIZE=K;exports.FLOATING_PANEL_MUTED_FG_COLOR=k;exports.FLOATING_PANEL_SHADOW=x;exports.FLOATING_PANEL_SURFACE_2_COLOR=y;exports.FLOATING_PANEL_SURFACE_COLOR=b;exports.GRID_HANDLE_THICKNESS=l;exports.GRID_LAYER_CORNER_HIT_SIZE=p;exports.GRID_LAYER_EDGE_HIT_THICKNESS=P;exports.HORIZONTAL_DIVIDER_WIDTH=D_;exports.RESIZE_HANDLE_THICKNESS=e;exports.RESIZE_HANDLE_Z_INDEX=c;exports.SPLIT_HANDLE_THICKNESS=R_;exports.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS=Z;exports.TAB_DRAG_INSERT_GUIDE_COLOR=h;exports.TAB_DRAG_INSERT_GUIDE_SHADOW=z;exports.TAB_DRAG_INSERT_GUIDE_WIDTH=W;exports.TAB_DRAG_OVERLAY_Z_INDEX=v;exports.TAB_DRAG_PREVIEW_OFFSET_X=g;exports.TAB_DRAG_PREVIEW_OFFSET_Y=B;
+//# sourceMappingURL=styles-BMEhL6I0.cjs.map

package/dist/styles-BMEhL6I0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-BMEhL6I0.cjs","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * These constants reference CSS variables defined in variables.css.\n * This allows users to override theme values via CSS while maintaining\n * type-safe constants in TypeScript.\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n * Users can override these via CSS variables (--rpl-*)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = 'rpl';\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border)\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle)\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover)\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active)\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border)\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg)\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg)\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border)\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow)\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide)\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow)\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card)\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset)\";\n"],"names":["COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","DRAWER_CLOSE_BUTTON_FONT_SIZE","DRAWER_SURFACE_COLOR","DRAWER_BORDER_COLOR","DRAWER_SHADOW","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"aAgDO,MAAMA,EAA2B,sCAC3BC,EAA4B,uCAC5BC,EAA6B,wCAK7BC,EAA4B,uCAC5BC,EAAwB,mCAaxBC,EAAqB,gCACrBC,EAA4B,uCAM5BC,EAA4B,2BAC5BC,EAA8B,6BAC9BC,EAA2B,0BAC3BC,EAA6B,4BAC7BC,EAAgC,yBAwBhCC,EAAiB,4BAKjBC,EAAsB,iCAO5B,MAAMC,EAA+B,0CAC/BC,EAA8B,yCAW9BC,EAAY,uBACZC,EAAoB,+BAUpBC,EAA0BJ,EAC1BK,EAAwB,6BAKxBC,EAAwB,EAKxBC,EAA6B,wCAC7BC,EAAgC,gDAKhCC,EAAuBP,EACvBQ,EAA4BX,EAC5BY,EAA6Bb,EAC7Bc,EAA4BvB,EAC5BwB,EAAwBvB,EAExBwB,EAA0B,EAK1BC,EAA2BZ,EAC3Ba,EAA4B,6CAC5BC,EAA4B,6CAK5BC,EAA8B,8CAC9BC,EAAsC,0CAKtCC,EAA8B7B,EAC9B8B,EAA+B7B,EAU/B8B,EAA+B,mCAC/BC,EAAqB,sCACrBC,EAAkC,mDAClCC,EAAkC,mDAClCC,EAAiC,kDACjCC,EAAgC,2CAChCC,EAA8B,+CAC9BC,EAA+BpC,EAC/BqC,EAAiCpC,EACjCqC,EAA8BpC,EAC9BqC,EAAgCpC,EAChCqC,EAAwBpC,EAKxBqC,EAA0B,2CAC1BC,EAA0B,2CAC1BC,EAAoB,qCACpBC,EAAyB,0CACzBC,EAAgC,2CAChCC,EAAuB9C,EACvB+C,GAAsB7C,EACtB8C,GAAgB5C,EAKhB6C,GAAyBzC,EAKzB0C,GAA2B"}

package/dist/styles-BnvLfp6e.js

@@ -0,0 +1,49 @@
+const l = "rpl", S = "var(--rpl-color-resize-handle-idle)", N = "var(--rpl-color-resize-handle-hover)", p = "var(--rpl-color-resize-handle-active)", r = "var(--rpl-color-drop-suggest-border)", E = "var(--rpl-color-drop-suggest-bg)", R = "var(--rpl-color-insert-guide)", o = "var(--rpl-color-insert-guide-shadow)", _ = "var(--rpl-color-surface)", D = "var(--rpl-color-surface-2)", s = "var(--rpl-color-border)", t = "var(--rpl-color-muted-fg)", a = "var(--rpl-shadow-card)", O = "var(--rpl-radius-suggest)", n = "var(--rpl-size-suggest-border)";
+const e = "var(--rpl-size-resize-handle-thickness)", A = "var(--rpl-size-split-handle-thickness)", c = "var(--rpl-z-overlay)", I = "var(--rpl-z-tabdrag-overlay)", T = e, L = "var(--rpl-z-resize-handle)", G = 4, d = "var(--rpl-size-grid-layer-corner-hit)", i = "var(--rpl-size-grid-layer-edge-hit-thickness)", v = c, C = n, g = O, H = r, P = E, U = 6, F = I, h = "var(--rpl-space-tab-drag-preview-offset-x)", B = "var(--rpl-space-tab-drag-preview-offset-y)", Z = "var(--rpl-size-tab-drag-insert-guide-width)", z = "var(--rpl-radius-tab-drag-insert-guide)", W = R, f = o, u = "var(--rpl-radius-floating-panel)", w = "var(--rpl-space-floating-panel-gap)", b = "var(--rpl-space-floating-panel-header-padding-y)", K = "var(--rpl-space-floating-panel-header-padding-x)", V = "var(--rpl-space-floating-panel-content-padding)", y = "var(--rpl-size-floating-panel-meta-font)", X = "var(--rpl-space-floating-panel-controls-gap)", Y = _, x = D, k = s, M = t, m = a, j = "var(--rpl-space-drawer-header-padding-y)", q = "var(--rpl-space-drawer-header-padding-x)", J = "var(--rpl-space-drawer-header-gap)", Q = "var(--rpl-space-drawer-content-padding)", $ = "var(--rpl-size-drawer-close-button-font)", __ = _, s_ = s, a_ = a, r_ = A, E_ = "var(--rpl-size-horizontal-divider-width)";
+export {
+  k as A,
+  u as B,
+  p as C,
+  v as D,
+  x as E,
+  m as F,
+  i as G,
+  E_ as H,
+  b as I,
+  K as J,
+  w as K,
+  y as L,
+  M,
+  X as N,
+  V as O,
+  T as R,
+  r_ as S,
+  h as T,
+  N as a,
+  S as b,
+  g as c,
+  P as d,
+  C as e,
+  H as f,
+  U as g,
+  B as h,
+  f as i,
+  W as j,
+  z as k,
+  Z as l,
+  F as m,
+  l as n,
+  a_ as o,
+  __ as p,
+  Q as q,
+  s_ as r,
+  J as s,
+  j as t,
+  q as u,
+  $ as v,
+  d as w,
+  L as x,
+  G as y,
+  Y as z
+};
+//# sourceMappingURL=styles-BnvLfp6e.js.map

package/dist/styles-BnvLfp6e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-BnvLfp6e.js","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * These constants reference CSS variables defined in variables.css.\n * This allows users to override theme values via CSS while maintaining\n * type-safe constants in TypeScript.\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n * Users can override these via CSS variables (--rpl-*)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = 'rpl';\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border)\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle)\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover)\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active)\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border)\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg)\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg)\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border)\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow)\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide)\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow)\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card)\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset)\";\n"],"names":["CSS_VAR_PREFIX","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","DRAWER_CLOSE_BUTTON_FONT_SIZE","DRAWER_SURFACE_COLOR","DRAWER_BORDER_COLOR","DRAWER_SHADOW","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"AAyBO,MAAMA,IAAiB,OAuBjBC,IAA2B,uCAC3BC,IAA4B,wCAC5BC,IAA6B,yCAK7BC,IAA4B,wCAC5BC,IAAwB,oCAaxBC,IAAqB,iCACrBC,IAA4B,wCAM5BC,IAA4B,4BAC5BC,IAA8B,8BAC9BC,IAA2B,2BAC3BC,IAA6B,6BAC7BC,IAAgC,0BAwBhCC,IAAiB,6BAKjBC,IAAsB;AAO5B,MAAMC,IAA+B,2CAC/BC,IAA8B,0CAW9BC,IAAY,wBACZC,IAAoB,gCAUpBC,IAA0BJ,GAC1BK,IAAwB,8BAKxBC,IAAwB,GAKxBC,IAA6B,yCAC7BC,IAAgC,iDAKhCC,IAAuBP,GACvBQ,IAA4BX,GAC5BY,IAA6Bb,GAC7Bc,IAA4BvB,GAC5BwB,IAAwBvB,GAExBwB,IAA0B,GAK1BC,IAA2BZ,GAC3Ba,IAA4B,8CAC5BC,IAA4B,8CAK5BC,IAA8B,+CAC9BC,IAAsC,2CAKtCC,IAA8B7B,GAC9B8B,IAA+B7B,GAU/B8B,IAA+B,oCAC/BC,IAAqB,uCACrBC,IAAkC,oDAClCC,IAAkC,oDAClCC,IAAiC,mDACjCC,IAAgC,4CAChCC,IAA8B,gDAC9BC,IAA+BpC,GAC/BqC,IAAiCpC,GACjCqC,IAA8BpC,GAC9BqC,IAAgCpC,GAChCqC,IAAwBpC,GAKxBqC,IAA0B,4CAC1BC,IAA0B,4CAC1BC,IAAoB,sCACpBC,IAAyB,2CACzBC,IAAgC,4CAChCC,KAAuB9C,GACvB+C,KAAsB7C,GACtB8C,KAAgB5C,GAKhB6C,KAAyBzC,GAKzB0C,KAA2B;"}

package/dist/types.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @file Unified public type definitions for the panel layout system.
+ * Single source of truth for grid, window, and drawer related types.
+ */
+import * as React from "react";
+export type Position = {
+    x: number;
+    y: number;
+};
+export type WindowOffset = number | string;
+export type WindowPosition = {
+    top?: WindowOffset;
+    right?: WindowOffset;
+    bottom?: WindowOffset;
+    left?: WindowOffset;
+};
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+export type WindowBounds = {
+    position?: WindowPosition;
+    size: WindowSize;
+};
+export type WindowConstraints = {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+};
+export type PopupWindowFeatures = {
+    toolbar?: boolean;
+    menubar?: boolean;
+    location?: boolean;
+    status?: boolean;
+    resizable?: boolean;
+    scrollbars?: boolean;
+};
+export type PopupWindowOptions = {
+    name?: string;
+    features?: PopupWindowFeatures;
+    focus?: boolean;
+    closeOnUnmount?: boolean;
+    createWindow?: (config: PopupWindowFactoryConfig) => Window | null;
+};
+export type PopupWindowFactoryConfig = {
+    name: string;
+    features: string;
+    bounds: WindowBounds;
+};
+export type FloatingWindowMode = "embedded" | "popup";
+export type FloatingWindowConfig = {
+    mode?: FloatingWindowMode;
+    draggable?: boolean;
+    resizable?: boolean;
+    constraints?: WindowConstraints;
+    onMove?: (position: WindowPosition) => void;
+    onResize?: (size: WindowSize) => void;
+    popup?: PopupWindowOptions;
+};
+export type DrawerBehavior = {
+    /** Optional controlled state */
+    defaultOpen?: boolean;
+    open?: boolean;
+    /** Whether clicking backdrop dismisses the drawer */
+    dismissible?: boolean;
+    onStateChange?: (open: boolean) => void;
+    header?: {
+        title?: string;
+        showCloseButton?: boolean;
+    };
+};
+export type GridTrack = {
+    size: string;
+    resizable?: boolean;
+    minSize?: number;
+    maxSize?: number;
+};
+export type PanelLayoutConfig = {
+    areas: string[][];
+    rows: GridTrack[];
+    columns: GridTrack[];
+    gap?: string;
+    style?: React.CSSProperties;
+};
+export type LayerPositionMode = "grid" | "absolute" | "relative" | "fixed";
+export type LayerDefinition = {
+    id: string;
+    component: React.ReactNode;
+    visible?: boolean;
+    gridArea?: string;
+    gridRow?: string;
+    gridColumn?: string;
+    /**
+     * Positioning mode: when omitted, derived automatically.
+     * If `floating` is present, behaves as absolute (embedded) or relative (popup).
+     */
+    positionMode?: LayerPositionMode;
+    /** Absolute/fixed offsets when positionMode !== 'grid'. */
+    position?: WindowPosition;
+    zIndex?: number;
+    width?: string | number;
+    height?: string | number;
+    pointerEvents?: boolean | "auto" | "none";
+    /** Optional backdrop style (used by DrawerBehaviour) */
+    backdropStyle?: React.CSSProperties;
+    drawer?: DrawerBehavior;
+    floating?: FloatingWindowConfig;
+    style?: React.CSSProperties;
+};
+export type PanelLayoutProps = {
+    config: PanelLayoutConfig;
+    layers: LayerDefinition[];
+};

package/dist/utils/CSSMatrix.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file CSSMatrix - Immutable 4x4 matrix for CSS 3D transforms
+ *
+ * Each operation returns a new instance, preserving the original matrix.
+ *
+ * @example
+ * const mtrx = matrix().translate(0, 10);
+ * const a = mtrx.rotateX(Math.PI / 2);
+ * const b = mtrx.rotateY(Math.PI);
+ * // a and b are independent transformations from mtrx
+ */
+/**
+ * Matrix type with transformation methods
+ */
+export type CSSMatrix = {
+    readonly translate: (x?: number, y?: number, z?: number) => CSSMatrix;
+    readonly translate3d: (x: number, y: number, z: number) => CSSMatrix;
+    readonly translateX: (x: number) => CSSMatrix;
+    readonly translateY: (y: number) => CSSMatrix;
+    readonly translateZ: (z: number) => CSSMatrix;
+    readonly scale: (x?: number, y?: number, z?: number) => CSSMatrix;
+    readonly scale3d: (x: number, y: number, z: number) => CSSMatrix;
+    readonly scaleX: (x: number) => CSSMatrix;
+    readonly scaleY: (y: number) => CSSMatrix;
+    readonly scaleZ: (z: number) => CSSMatrix;
+    readonly rotateX: (angle: number) => CSSMatrix;
+    readonly rotateY: (angle: number) => CSSMatrix;
+    readonly rotateZ: (angle: number) => CSSMatrix;
+    readonly rotate: (angle: number, x: number, y: number, z: number) => CSSMatrix;
+    readonly rotate3d: (x: number, y: number, z: number, angle: number) => CSSMatrix;
+    readonly skew: (angleX?: number, angleY?: number) => CSSMatrix;
+    readonly skewX: (angle: number) => CSSMatrix;
+    readonly skewY: (angle: number) => CSSMatrix;
+    readonly perspective: (distance: number) => CSSMatrix;
+    readonly toCSS: () => string;
+    readonly toArray: () => readonly number[];
+    readonly toString: () => string;
+};
+/**
+ * Factory function to create a new identity matrix
+ */
+export declare const matrix: () => CSSMatrix;

package/dist/utils/dialogUtils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Dialog positioning utilities
+ */
+export type ViewportInfo = {
+    width: number;
+    height: number;
+};
+/**
+ * Get viewport dimensions
+ */
+export declare const getViewportInfo: () => ViewportInfo;
+/**
+ * Calculate context menu position to keep it within viewport
+ */
+export declare const calculateContextMenuPosition: (anchorX: number, anchorY: number, menuWidth: number, menuHeight: number, viewport: ViewportInfo) => {
+    x: number;
+    y: number;
+};

package/dist/utils/math.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Primitive math helpers shared across modules.
+ */
+export declare const clampNumber: (value: number, min?: number, max?: number) => number;
+export declare const toFiniteNumberOr: (value: number | undefined, fallback: number) => number;

package/dist/utils/polyfills/createDialogPolyfill.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Dialog polyfill for browsers that don't support <dialog> element natively
+ */
+/**
+ * Ensure dialog polyfill is loaded if needed
+ * This is a placeholder - in production you might want to use a real polyfill like dialog-polyfill
+ */
+export declare const ensureDialogPolyfill: () => void;

package/dist/utils/typedActions.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file Utilities for defining typed action creators and reducer handler maps without external dependencies.
+ */
+export type AnyAction = {
+    type: string;
+};
+export type AnyActionCreator = {
+    (...args: any[]): AnyAction;
+    readonly type: string;
+};
+type PayloadCreator = (...args: any[]) => any;
+type ActionFromPayload<Type extends string, Creator extends PayloadCreator> = ReturnType<Creator> extends undefined | void ? {
+    type: Type;
+} : {
+    type: Type;
+    payload: Exclude<ReturnType<Creator>, undefined>;
+};
+/**
+ * Creates a typed action creator with an attached literal `type` property.
+ */
+export declare function createAction<Type extends string>(type: Type): (() => {
+    type: Type;
+}) & {
+    readonly type: Type;
+};
+export declare function createAction<Type extends string, Creator extends PayloadCreator>(type: Type, payloadCreator: Creator): ((...args: Parameters<Creator>) => ActionFromPayload<Type, Creator>) & {
+    readonly type: Type;
+};
+export type ActionCreatorsMap = Record<string, AnyActionCreator>;
+export type ActionUnion<Creators extends ActionCreatorsMap> = ReturnType<Creators[keyof Creators]>;
+export type CaseReducer<State, Action extends AnyAction, Extra> = (state: State, action: Action, extra: Extra) => State;
+export type BoundActionCreators<Creators extends ActionCreatorsMap> = {
+    [Key in keyof Creators]: (...args: Parameters<Creators[Key]>) => ReturnType<Creators[Key]>;
+};
+export declare const bindActionCreators: <Creators extends ActionCreatorsMap>(creators: Creators, dispatch: (action: ActionUnion<Creators>) => unknown) => BoundActionCreators<Creators>;
+export declare const createActionHandlerMap: <State, Creators extends ActionCreatorsMap, Extra = undefined>(creators: Creators, handlers: { [Key in keyof Creators]?: CaseReducer<State, ReturnType<Creators[Key]>, Extra>; }) => Record<string, CaseReducer<State, ReturnType<Creators[keyof Creators]>, Extra>>;
+export {};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "react-panel-layout",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "packageManager": "bun@1.3.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/trkbt10/react-panel-layout.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./config": {
+      "types": "./dist/config/index.d.ts",
+      "import": "./dist/config.js",
+      "require": "./dist/config.cjs"
+    },
+    "./floating": {
+      "types": "./dist/floating/index.d.ts",
+      "import": "./dist/floating.js",
+      "require": "./dist/floating.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.demo.config.ts",
+    "build": "vite build --config vite.config.ts && tsc -p tsconfig.build.json",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite preview --config vite.demo.config.ts --outDir dist-demo",
+    "clean": "rimraf dist dist-demo",
+    "lint": "eslint ./src",
+    "format": "prettier --write ./src && eslint ./src --fix",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test:cov": "vitest run --coverage",
+    "test": "vitest --run"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.9.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/coverage-v8": "^4.0.3",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsdoc": "^61.1.9",
+    "jsdom": "^27.0.1",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.9.4",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.3"
+  },
+  "dependencies": {}
+}