react-panel-layout 0.2.0

package/dist/constants/styles.d.ts

@@ -0,0 +1,181 @@
+/**
+ * @file Style constants for library components
+ *
+ * These constants reference CSS variables defined in variables.css.
+ * This allows users to override theme values via CSS while maintaining
+ * type-safe constants in TypeScript.
+ *
+ * All CSS variables use the unified prefix: --rpl- (react-panel-layout)
+ * Users can override these via CSS variables (--rpl-*)
+ *
+ * @example
+ * // In your CSS:
+ * :root {
+ *   --rpl-color-primary: #ff0000;
+ * }
+ */
+/**
+ * Unified CSS variable prefix for all react-panel-layout variables
+ * All theme variables use this prefix: --rpl-*
+ */
+export declare const CSS_VAR_PREFIX = "rpl";
+/**
+ * Tab colors - used in TabBar component
+ */
+export declare const COLOR_TAB_FG = "var(--rpl-color-tab-fg)";
+export declare const COLOR_TAB_ACTIVE_BG = "var(--rpl-color-tab-active-bg)";
+export declare const COLOR_TABBAR_BG = "var(--rpl-color-tabbar-bg)";
+/**
+ * Panel colors - used in panel layouts
+ */
+export declare const COLOR_PANEL_BORDER = "var(--rpl-color-panel-border)";
+export declare const COLOR_PANEL_BG = "var(--rpl-color-panel-bg)";
+/**
+ * Primary color - used for resize handles, highlights
+ */
+export declare const COLOR_PRIMARY = "var(--rpl-color-primary)";
+export declare const COLOR_RESIZE_HANDLE_IDLE = "var(--rpl-color-resize-handle-idle)";
+export declare const COLOR_RESIZE_HANDLE_HOVER = "var(--rpl-color-resize-handle-hover)";
+export declare const COLOR_RESIZE_HANDLE_ACTIVE = "var(--rpl-color-resize-handle-active)";
+/**
+ * Drop suggestion overlay colors
+ */
+export declare const COLOR_DROP_SUGGEST_BORDER = "var(--rpl-color-drop-suggest-border)";
+export declare const COLOR_DROP_SUGGEST_BG = "var(--rpl-color-drop-suggest-bg)";
+/**
+ * Tab drag overlay colors
+ */
+export declare const COLOR_TABDRAG_BG = "var(--rpl-color-tabdrag-bg)";
+export declare const COLOR_TABDRAG_FG = "var(--rpl-color-tabdrag-fg)";
+export declare const COLOR_TABDRAG_BORDER = "var(--rpl-color-tabdrag-border)";
+export declare const COLOR_TABDRAG_SHADOW = "var(--rpl-color-tabdrag-shadow)";
+/**
+ * Insert guide colors
+ */
+export declare const COLOR_INSERT_GUIDE = "var(--rpl-color-insert-guide)";
+export declare const COLOR_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow)";
+/**
+ * Node editor / floating panel colors
+ * These are used by Drawer and FloatingPanelFrame components
+ */
+export declare const COLOR_NODE_EDITOR_SURFACE = "var(--rpl-color-surface)";
+export declare const COLOR_NODE_EDITOR_SURFACE_2 = "var(--rpl-color-surface-2)";
+export declare const COLOR_NODE_EDITOR_BORDER = "var(--rpl-color-border)";
+export declare const COLOR_NODE_EDITOR_MUTED_FG = "var(--rpl-color-muted-fg)";
+export declare const COLOR_NODE_EDITOR_CARD_SHADOW = "var(--rpl-shadow-card)";
+/**
+ * Tab sizing
+ */
+export declare const SIZE_TAB_FONT = "var(--rpl-size-tab-font)";
+export declare const SPACE_TAB_PADDING_Y = "var(--rpl-space-tab-padding-y)";
+export declare const SPACE_TAB_PADDING_X = "var(--rpl-space-tab-padding-x)";
+/**
+ * Tabbar spacing
+ */
+export declare const SPACE_TABBAR_GAP = "var(--rpl-space-tabbar-gap)";
+export declare const SPACE_TABBAR_PADDING_Y = "var(--rpl-space-tabbar-padding-y)";
+export declare const SPACE_TABBAR_PADDING_X = "var(--rpl-space-tabbar-padding-x)";
+/**
+ * Border radius (decorative, using CSS variables)
+ */
+export declare const RADIUS_TAB = "var(--rpl-radius-tab)";
+export declare const RADIUS_SUGGEST = "var(--rpl-radius-suggest)";
+/**
+ * Border widths
+ */
+export declare const SIZE_SUGGEST_BORDER = "var(--rpl-size-suggest-border)";
+/**
+ * Handle thicknesses
+ * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations
+ */
+export declare const SIZE_GRID_HANDLE_THICKNESS = 4;
+export declare const SIZE_RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness)";
+export declare const SIZE_SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness)";
+/**
+ * Drop suggest padding
+ */
+export declare const SPACE_DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding)";
+export declare const Z_OVERLAY = "var(--rpl-z-overlay)";
+export declare const Z_TABDRAG_OVERLAY = "var(--rpl-z-tabdrag-overlay)";
+export declare const Z_DIALOG_OVERLAY = "var(--rpl-z-dialog-overlay)";
+/**
+ * Resize Handle
+ */
+export declare const RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness)";
+export declare const RESIZE_HANDLE_Z_INDEX = "var(--rpl-z-resize-handle)";
+/**
+ * Grid Track Resize Handle
+ */
+export declare const GRID_HANDLE_THICKNESS = 4;
+/**
+ * Grid Layer Resize Handles
+ */
+export declare const GRID_LAYER_CORNER_HIT_SIZE = "var(--rpl-size-grid-layer-corner-hit)";
+export declare const GRID_LAYER_EDGE_HIT_THICKNESS = "var(--rpl-size-grid-layer-edge-hit-thickness)";
+/**
+ * Drop Suggest Overlay
+ */
+export declare const DROP_SUGGEST_Z_INDEX = "var(--rpl-z-overlay)";
+export declare const DROP_SUGGEST_BORDER_WIDTH = "var(--rpl-size-suggest-border)";
+export declare const DROP_SUGGEST_BORDER_RADIUS = "var(--rpl-radius-suggest)";
+export declare const DROP_SUGGEST_BORDER_COLOR = "var(--rpl-color-drop-suggest-border)";
+export declare const DROP_SUGGEST_BG_COLOR = "var(--rpl-color-drop-suggest-bg)";
+export declare const DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding)";
+export declare const DROP_SUGGEST_PADDING_PX = 6;
+/**
+ * Tab Drag Overlay
+ */
+export declare const TAB_DRAG_OVERLAY_Z_INDEX = "var(--rpl-z-tabdrag-overlay)";
+export declare const TAB_DRAG_PREVIEW_OFFSET_X = "var(--rpl-space-tab-drag-preview-offset-x)";
+export declare const TAB_DRAG_PREVIEW_OFFSET_Y = "var(--rpl-space-tab-drag-preview-offset-y)";
+export declare const TAB_DRAG_PREVIEW_BORDER_RADIUS = "var(--rpl-radius-tab-drag-preview)";
+export declare const TAB_DRAG_PREVIEW_PADDING_Y = "var(--rpl-space-tab-drag-preview-padding-y)";
+export declare const TAB_DRAG_PREVIEW_PADDING_X = "var(--rpl-space-tab-drag-preview-padding-x)";
+export declare const TAB_DRAG_PREVIEW_FONT_SIZE = "var(--rpl-size-tab-drag-preview-font)";
+export declare const TAB_DRAG_INSERT_GUIDE_WIDTH = "var(--rpl-size-tab-drag-insert-guide-width)";
+export declare const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = "var(--rpl-radius-tab-drag-insert-guide)";
+export declare const TAB_DRAG_PREVIEW_BG_COLOR = "var(--rpl-color-tabdrag-bg)";
+export declare const TAB_DRAG_PREVIEW_FG_COLOR = "var(--rpl-color-tabdrag-fg)";
+export declare const TAB_DRAG_PREVIEW_BORDER_COLOR = "var(--rpl-color-tabdrag-border)";
+export declare const TAB_DRAG_PREVIEW_SHADOW = "var(--rpl-color-tabdrag-shadow)";
+export declare const TAB_DRAG_INSERT_GUIDE_COLOR = "var(--rpl-color-insert-guide)";
+export declare const TAB_DRAG_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow)";
+/**
+ * Dialog Overlay
+ */
+export declare const DIALOG_OVERLAY_Z_INDEX = "var(--rpl-z-dialog-overlay)";
+/**
+ * Floating Panel Frame
+ */
+export declare const FLOATING_PANEL_BORDER_RADIUS = "var(--rpl-radius-floating-panel)";
+export declare const FLOATING_PANEL_GAP = "var(--rpl-space-floating-panel-gap)";
+export declare const FLOATING_PANEL_HEADER_PADDING_Y = "var(--rpl-space-floating-panel-header-padding-y)";
+export declare const FLOATING_PANEL_HEADER_PADDING_X = "var(--rpl-space-floating-panel-header-padding-x)";
+export declare const FLOATING_PANEL_CONTENT_PADDING = "var(--rpl-space-floating-panel-content-padding)";
+export declare const FLOATING_PANEL_META_FONT_SIZE = "var(--rpl-size-floating-panel-meta-font)";
+export declare const FLOATING_PANEL_CONTROLS_GAP = "var(--rpl-space-floating-panel-controls-gap)";
+export declare const FLOATING_PANEL_SURFACE_COLOR = "var(--rpl-color-surface)";
+export declare const FLOATING_PANEL_SURFACE_2_COLOR = "var(--rpl-color-surface-2)";
+export declare const FLOATING_PANEL_BORDER_COLOR = "var(--rpl-color-border)";
+export declare const FLOATING_PANEL_MUTED_FG_COLOR = "var(--rpl-color-muted-fg)";
+export declare const FLOATING_PANEL_SHADOW = "var(--rpl-shadow-card)";
+/**
+ * Drawer
+ */
+export declare const DRAWER_HEADER_PADDING_Y = "var(--rpl-space-drawer-header-padding-y)";
+export declare const DRAWER_HEADER_PADDING_X = "var(--rpl-space-drawer-header-padding-x)";
+export declare const DRAWER_HEADER_GAP = "var(--rpl-space-drawer-header-gap)";
+export declare const DRAWER_CONTENT_PADDING = "var(--rpl-space-drawer-content-padding)";
+export declare const DRAWER_CLOSE_BUTTON_FONT_SIZE = "var(--rpl-size-drawer-close-button-font)";
+export declare const DRAWER_SURFACE_COLOR = "var(--rpl-color-surface)";
+export declare const DRAWER_BORDER_COLOR = "var(--rpl-color-border)";
+export declare const DRAWER_SHADOW = "var(--rpl-shadow-card)";
+/**
+ * Split Handles
+ */
+export declare const SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness)";
+/**
+ * HorizontalDivider
+ */
+export declare const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width)";
+export declare const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset)";

package/dist/floating/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Entry point for floating panel frame components.
+ *
+ * Consumers should import from 'react-panel-layout/floating' to keep these
+ * decorative helpers separate from the core layout system.
+ */
+export { FloatingPanelFrame, FloatingPanelHeader, FloatingPanelTitle, FloatingPanelMeta, FloatingPanelControls, FloatingPanelContent, } from "../components/paneling/FloatingPanelFrame";
+export type { FloatingPanelFrameProps, FloatingPanelHeaderProps, FloatingPanelTitleProps, FloatingPanelMetaProps, FloatingPanelControlsProps, FloatingPanelContentProps, } from "../components/paneling/FloatingPanelFrame";

package/dist/floating.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),N=require("react"),o=require("./styles-BMEhL6I0.cjs");function A(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=A(N),g={display:"flex",flexDirection:"column",borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,border:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_COLOR,overflow:"hidden",boxShadow:o.FLOATING_PANEL_SHADOW},u={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_GAP,padding:`${o.FLOATING_PANEL_HEADER_PADDING_Y} ${o.FLOATING_PANEL_HEADER_PADDING_X}`,borderBottom:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_2_COLOR},O={fontWeight:600},m={marginLeft:"auto",color:o.FLOATING_PANEL_MUTED_FG_COLOR,fontSize:o.FLOATING_PANEL_META_FONT_SIZE},y={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_CONTROLS_GAP},L={padding:o.FLOATING_PANEL_CONTENT_PADDING,overflow:"auto"},r=a.forwardRef(function({style:t,...n},l){const i=a.useMemo(()=>({...g,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})}),c=({style:e,...t})=>{const n=a.useMemo(()=>({...u,...e}),[e]);return s.jsx("div",{style:n,...t})},d=({style:e,...t})=>{const n=a.useMemo(()=>({...O,...e}),[e]);return s.jsx("span",{style:n,...t})},_=({style:e,...t})=>{const n=a.useMemo(()=>({...m,...e}),[e]);return s.jsx("span",{style:n,...t})},F=({style:e,...t})=>{const n=a.useMemo(()=>({...y,...e}),[e]);return s.jsx("div",{style:n,...t})},P=a.forwardRef(function({style:t,...n},l){const i=a.useMemo(()=>({...L,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})});r.displayName="FloatingPanelFrame";c.displayName="FloatingPanelHeader";d.displayName="FloatingPanelTitle";_.displayName="FloatingPanelMeta";F.displayName="FloatingPanelControls";P.displayName="FloatingPanelContent";exports.FloatingPanelContent=P;exports.FloatingPanelControls=F;exports.FloatingPanelFrame=r;exports.FloatingPanelHeader=c;exports.FloatingPanelMeta=_;exports.FloatingPanelTitle=d;
+//# sourceMappingURL=floating.cjs.map

package/dist/floating.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.cjs","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst frameStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n  overflow: \"hidden\",\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, ...props },\n  ref,\n) {\n  const combinedStyle = React.useMemo(() => ({ ...frameStyle, ...propStyle }), [propStyle]);\n  return <div ref={ref} style={combinedStyle} {...props} />;\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\n\n"],"names":["frameStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SHADOW","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","props","ref","combinedStyle","FloatingPanelHeader","jsx","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent"],"mappings":"qcAmBMA,EAAkC,CACtC,QAAS,OACT,cAAe,SACf,aAAcC,EAAAA,6BACd,OAAQ,aAAaC,EAAAA,2BAA2B,GAChD,WAAYC,EAAAA,6BACZ,SAAU,SACV,UAAWC,EAAAA,qBACb,EAEMC,EAAmC,CACvC,QAAS,OACT,WAAY,SACZ,IAAKC,EAAAA,mBACL,QAAS,GAAGC,EAAAA,+BAA+B,IAAIC,EAAAA,+BAA+B,GAC9E,aAAc,aAAaN,EAAAA,2BAA2B,GACtD,WAAYO,EAAAA,8BACd,EAEMC,EAAkC,CACtC,WAAY,GACd,EAEMC,EAAiC,CACrC,WAAY,OACZ,MAAOC,EAAAA,8BACP,SAAUC,EAAAA,6BACZ,EAEMC,EAAqC,CACzC,QAAS,OACT,WAAY,SACZ,IAAKC,EAAAA,2BACP,EAEMC,EAAoC,CACxC,QAASC,EAAAA,+BACT,SAAU,MACZ,EAMaC,EAAqBC,EAAM,WAAoD,SAC1F,CAAE,MAAOC,EAAW,GAAGC,CAAA,EACvBC,EACA,CACA,MAAMC,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGnB,EAAY,GAAGoB,CAAA,GAAc,CAACA,CAAS,CAAC,EACxF,aAAQ,MAAA,CAAI,IAAAE,EAAU,MAAOC,EAAgB,GAAGF,EAAO,CACzD,CAAC,EAMYG,EAA0D,CAAC,CAAE,MAAOJ,EAAW,GAAGC,KAAY,CACzG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGd,EAAa,GAAGe,CAAA,GAAc,CAACA,CAAS,CAAC,EACzF,OAAOK,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAgB,GAAGF,EAAO,CAC/C,EAMaK,EAAwD,CAAC,CAAE,MAAON,EAAW,GAAGC,KAAY,CACvG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGT,EAAY,GAAGU,CAAA,GAAc,CAACA,CAAS,CAAC,EACxF,OAAOK,EAAAA,IAAC,OAAA,CAAK,MAAOF,EAAgB,GAAGF,EAAO,CAChD,EAMaM,EAAsD,CAAC,CAAE,MAAOP,EAAW,GAAGC,KAAY,CACrG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGR,EAAW,GAAGS,CAAA,GAAc,CAACA,CAAS,CAAC,EACvF,OAAOK,EAAAA,IAAC,OAAA,CAAK,MAAOF,EAAgB,GAAGF,EAAO,CAChD,EAMaO,EAA8D,CAAC,CAAE,MAAOR,EAAW,GAAGC,KAAY,CAC7G,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGL,EAAe,GAAGM,CAAA,GAAc,CAACA,CAAS,CAAC,EAC3F,OAAOK,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAgB,GAAGF,EAAO,CAC/C,EAMaQ,EAAuBV,EAAM,WACxC,SAA8B,CAAE,MAAOC,EAAW,GAAGC,CAAA,EAASC,EAAK,CACjE,MAAMC,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGH,EAAc,GAAGI,CAAA,GAAc,CAACA,CAAS,CAAC,EAC1F,aAAQ,MAAA,CAAI,IAAAE,EAAU,MAAOC,EAAgB,GAAGF,EAAO,CACzD,CACF,EAEAH,EAAmB,YAAc,qBACjCM,EAAoB,YAAc,sBAClCE,EAAmB,YAAc,qBACjCC,EAAkB,YAAc,oBAChCC,EAAsB,YAAc,wBACpCC,EAAqB,YAAc"}

package/dist/floating.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "react";
+import { F as r, z as d, A as i, B as _, E as N, I as A, J as c, K as m, L as F, M as L, N as P, O } from "./styles-BnvLfp6e.js";
+const y = {
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: _,
+  border: `1px solid ${i}`,
+  background: d,
+  overflow: "hidden",
+  boxShadow: r
+}, E = {
+  display: "flex",
+  alignItems: "center",
+  gap: m,
+  padding: `${A} ${c}`,
+  borderBottom: `1px solid ${i}`,
+  background: N
+}, g = {
+  fontWeight: 600
+}, u = {
+  marginLeft: "auto",
+  color: L,
+  fontSize: F
+}, I = {
+  display: "flex",
+  alignItems: "center",
+  gap: P
+}, T = {
+  padding: O,
+  overflow: "auto"
+}, f = a.forwardRef(function({ style: t, ...n }, l) {
+  const s = a.useMemo(() => ({ ...y, ...t }), [t]);
+  return /* @__PURE__ */ o("div", { ref: l, style: s, ...n });
+}), G = ({ style: e, ...t }) => {
+  const n = a.useMemo(() => ({ ...E, ...e }), [e]);
+  return /* @__PURE__ */ o("div", { style: n, ...t });
+}, R = ({ style: e, ...t }) => {
+  const n = a.useMemo(() => ({ ...g, ...e }), [e]);
+  return /* @__PURE__ */ o("span", { style: n, ...t });
+}, D = ({ style: e, ...t }) => {
+  const n = a.useMemo(() => ({ ...u, ...e }), [e]);
+  return /* @__PURE__ */ o("span", { style: n, ...t });
+}, S = ({ style: e, ...t }) => {
+  const n = a.useMemo(() => ({ ...I, ...e }), [e]);
+  return /* @__PURE__ */ o("div", { style: n, ...t });
+}, C = a.forwardRef(
+  function({ style: t, ...n }, l) {
+    const s = a.useMemo(() => ({ ...T, ...t }), [t]);
+    return /* @__PURE__ */ o("div", { ref: l, style: s, ...n });
+  }
+);
+f.displayName = "FloatingPanelFrame";
+G.displayName = "FloatingPanelHeader";
+R.displayName = "FloatingPanelTitle";
+D.displayName = "FloatingPanelMeta";
+S.displayName = "FloatingPanelControls";
+C.displayName = "FloatingPanelContent";
+export {
+  C as FloatingPanelContent,
+  S as FloatingPanelControls,
+  f as FloatingPanelFrame,
+  G as FloatingPanelHeader,
+  D as FloatingPanelMeta,
+  R as FloatingPanelTitle
+};
+//# sourceMappingURL=floating.js.map

package/dist/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst frameStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n  overflow: \"hidden\",\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, ...props },\n  ref,\n) {\n  const combinedStyle = React.useMemo(() => ({ ...frameStyle, ...propStyle }), [propStyle]);\n  return <div ref={ref} style={combinedStyle} {...props} />;\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\n\n"],"names":["frameStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SHADOW","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","props","ref","combinedStyle","FloatingPanelHeader","jsx","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent"],"mappings":";;;AAmBA,MAAMA,IAAkC;AAAA,EACtC,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAcC;AAAA,EACd,QAAQ,aAAaC,CAA2B;AAAA,EAChD,YAAYC;AAAA,EACZ,UAAU;AAAA,EACV,WAAWC;AACb,GAEMC,IAAmC;AAAA,EACvC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAKC;AAAA,EACL,SAAS,GAAGC,CAA+B,IAAIC,CAA+B;AAAA,EAC9E,cAAc,aAAaN,CAA2B;AAAA,EACtD,YAAYO;AACd,GAEMC,IAAkC;AAAA,EACtC,YAAY;AACd,GAEMC,IAAiC;AAAA,EACrC,YAAY;AAAA,EACZ,OAAOC;AAAA,EACP,UAAUC;AACZ,GAEMC,IAAqC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAKC;AACP,GAEMC,IAAoC;AAAA,EACxC,SAASC;AAAA,EACT,UAAU;AACZ,GAMaC,IAAqBC,EAAM,WAAoD,SAC1F,EAAE,OAAOC,GAAW,GAAGC,EAAA,GACvBC,GACA;AACA,QAAMC,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGnB,GAAY,GAAGoB,EAAA,IAAc,CAACA,CAAS,CAAC;AACxF,2BAAQ,OAAA,EAAI,KAAAE,GAAU,OAAOC,GAAgB,GAAGF,GAAO;AACzD,CAAC,GAMYG,IAA0D,CAAC,EAAE,OAAOJ,GAAW,GAAGC,QAAY;AACzG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGd,GAAa,GAAGe,EAAA,IAAc,CAACA,CAAS,CAAC;AACzF,SAAO,gBAAAK,EAAC,OAAA,EAAI,OAAOF,GAAgB,GAAGF,GAAO;AAC/C,GAMaK,IAAwD,CAAC,EAAE,OAAON,GAAW,GAAGC,QAAY;AACvG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGT,GAAY,GAAGU,EAAA,IAAc,CAACA,CAAS,CAAC;AACxF,SAAO,gBAAAK,EAAC,QAAA,EAAK,OAAOF,GAAgB,GAAGF,GAAO;AAChD,GAMaM,IAAsD,CAAC,EAAE,OAAOP,GAAW,GAAGC,QAAY;AACrG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGR,GAAW,GAAGS,EAAA,IAAc,CAACA,CAAS,CAAC;AACvF,SAAO,gBAAAK,EAAC,QAAA,EAAK,OAAOF,GAAgB,GAAGF,GAAO;AAChD,GAMaO,IAA8D,CAAC,EAAE,OAAOR,GAAW,GAAGC,QAAY;AAC7G,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGL,GAAe,GAAGM,EAAA,IAAc,CAACA,CAAS,CAAC;AAC3F,SAAO,gBAAAK,EAAC,OAAA,EAAI,OAAOF,GAAgB,GAAGF,GAAO;AAC/C,GAMaQ,IAAuBV,EAAM;AAAA,EACxC,SAA8B,EAAE,OAAOC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACjE,UAAMC,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGH,GAAc,GAAGI,EAAA,IAAc,CAACA,CAAS,CAAC;AAC1F,6BAAQ,OAAA,EAAI,KAAAE,GAAU,OAAOC,GAAgB,GAAGF,GAAO;AAAA,EACzD;AACF;AAEAH,EAAmB,cAAc;AACjCM,EAAoB,cAAc;AAClCE,EAAmB,cAAc;AACjCC,EAAkB,cAAc;AAChCC,EAAsB,cAAc;AACpCC,EAAqB,cAAc;"}

package/dist/hooks/useCSSMatrix.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @file useCSSMatrix - Efficient CSS matrix transformation hook with incremental updates
+ */
+import { type CSSMatrix } from '../utils/CSSMatrix';
+/**
+ * Matrix operation types
+ */
+export type MatrixOperation = ['translate', number?, number?, number?] | ['translate3d', number, number, number] | ['translateX', number] | ['translateY', number] | ['translateZ', number] | ['scale', number?, number?, number?] | ['scale3d', number, number, number] | ['scaleX', number] | ['scaleY', number] | ['scaleZ', number] | ['rotateX', number] | ['rotateY', number] | ['rotateZ', number] | ['rotate', number, number, number, number] | ['rotate3d', number, number, number, number] | ['skew', number?, number?] | ['skewX', number] | ['skewY', number] | ['perspective', number];
+/**
+ * Efficient CSS matrix transformation hook with incremental updates
+ *
+ * Constructs a computation tree and only recalculates from the point of change,
+ * caching intermediate results for optimal performance.
+ *
+ * @param operations - Array of matrix operations to apply
+ * @returns CSS transform string (matrix3d format)
+ *
+ * @example
+ * ```tsx
+ * const transform = useCSSMatrix([
+ *   ['translate', 100, 50],
+ *   ['rotateZ', angle],
+ *   ['scale', 2, 2]
+ * ]);
+ * return <div style={{ transform }} />;
+ * ```
+ */
+export declare const useCSSMatrix: (operations: MatrixOperation[]) => string;
+/**
+ * Hook variant that returns the CSSMatrix object instead of CSS string
+ *
+ * Useful when you need access to the raw matrix values or want to
+ * apply additional operations.
+ *
+ * @param operations - Array of matrix operations to apply
+ * @returns CSSMatrix object
+ *
+ * @example
+ * ```tsx
+ * const matrixObj = useCSSMatrixObject([
+ *   ['translate', 100, 50],
+ *   ['rotateZ', angle]
+ * ]);
+ * const values = matrixObj.toArray();
+ * ```
+ */
+export declare const useCSSMatrixObject: (operations: MatrixOperation[]) => CSSMatrix;

package/dist/hooks/useClonedElementPreview.d.ts

@@ -0,0 +1,7 @@
+export declare const useClonedElementPreview: (sourceEl: HTMLElement | null) => {
+    html: string | null;
+    size: {
+        width: number;
+        height: number;
+    } | null;
+};

package/dist/hooks/useDocumentPointerEvents.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file Hooks for managing document-level pointer events with proper cleanup
+ */
+import * as React from "react";
+export type UseDocumentPointerEventsOptions = {
+    onMove?: (e: PointerEvent) => void;
+    onUp?: (e: PointerEvent) => void;
+    onCancel?: (e: PointerEvent) => void;
+};
+/**
+ * Custom hook for managing document-level pointer events with proper cleanup
+ * This pattern is commonly used for drag operations that need to continue
+ * even when the pointer moves outside the original element
+ */
+export declare function useDocumentPointerEvents(enabled: boolean, handlers: UseDocumentPointerEventsOptions): void;
+/**
+ * Hook for capturing pointer during drag operations
+ * This ensures that pointer events are delivered to the capturing element
+ * even when the pointer moves outside its boundaries
+ */
+export declare function usePointerCapture(elementRef: React.RefObject<HTMLElement | null>, enabled: boolean, pointerId?: number): void;
+/**
+ * Hook for preventing default pointer events during operations
+ * Useful for preventing text selection, context menus, etc. during drag operations
+ */
+export declare function usePreventPointerDefaults(elementRef: React.RefObject<HTMLElement | null>, enabled: boolean, events?: string[]): void;
+/**
+ * Hook that combines multiple pointer event patterns for drag operations
+ */
+export declare function useDragPointerEvents(elementRef: React.RefObject<HTMLElement | null>, enabled: boolean, options: {
+    onMove?: (e: PointerEvent) => void;
+    onUp?: (e: PointerEvent) => void;
+    onCancel?: (e: PointerEvent) => void;
+    pointerId?: number;
+    capturePointer?: boolean;
+    preventDefaults?: boolean;
+}): void;

package/dist/hooks/useEffectEvent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Extract event handlers from Effects to avoid unnecessary re-runs
+ *
+ * @example
+ * ```tsx
+ * function Component({ onEvent }) {
+ *   const onEventHandler = useEffectEvent(onEvent);
+ *
+ *   React.useEffect(() => {
+ *     // onEventHandler is stable, but always calls the latest onEvent
+ *     const cleanup = subscribe(onEventHandler);
+ *     return cleanup;
+ *   }, []); // No need to include onEvent in dependencies
+ * }
+ * ```
+ */
+export declare function useEffectEvent<Args extends unknown[], Return>(fn: ((...args: Args) => Return) | undefined): (...args: Args) => Return | undefined;

package/dist/hooks/useElementComponentWrapper.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Hook for building wrapper components that accept either an element or a component override.
+ */
+import * as React from "react";
+type WrapperProps = React.HTMLAttributes<HTMLDivElement>;
+type UseElementComponentWrapperOptions = {
+    element?: React.ReactElement<WrapperProps>;
+    component?: React.ComponentType<WrapperProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }>;
+};
+type WrapperComponent = React.ForwardRefExoticComponent<React.PropsWithChildren<WrapperProps> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Memoizes a wrapper component that can render either a provided element, a provided component, or a default tag.
+ * @returns Wrapper component honoring the overrides.
+ */
+export declare function useElementComponentWrapper({ element, component, }: UseElementComponentWrapperOptions): WrapperComponent;
+export {};

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file Shared useIntersectionObserver hook with cached observer instances.
+ */
+import * as React from "react";
+/**
+ * Observe intersection changes for a given element reference using shared observers.
+ *
+ * @param ref - Ref holding the element to observe.
+ * @param options - Intersection observer configuration.
+ * @returns Latest intersection entry snapshot with sensible defaults.
+ */
+export declare function useIntersectionObserver<T extends HTMLElement>(ref: React.RefObject<T | null>, { threshold, rootMargin, root }: IntersectionObserverInit): {
+    readonly boundingClientRect: DOMRectReadOnly;
+    readonly intersectionRatio: number;
+    readonly intersectionRect: DOMRectReadOnly;
+    readonly isIntersecting: boolean;
+    readonly rootBounds: DOMRectReadOnly | null;
+    readonly target: Element | null;
+    readonly time: DOMHighResTimeStamp;
+};

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file useIsomorphicLayoutEffect - SSR-safe version of useLayoutEffect
+ *
+ * Uses useLayoutEffect on the client and useEffect on the server to avoid warnings
+ * during server-side rendering (e.g., with Next.js)
+ */
+import * as React from "react";
+/**
+ * SSR-safe version of useLayoutEffect
+ *
+ * - Client: Uses useLayoutEffect for synchronous layout updates
+ * - Server: Uses useEffect to avoid SSR warnings
+ *
+ * @example
+ * ```tsx
+ * useIsomorphicLayoutEffect(() => {
+ *   // This runs synchronously after DOM mutations on the client
+ *   // but safely falls back to useEffect on the server
+ *   measureElement();
+ * }, [deps]);
+ * ```
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file Shared useResizeObserver hook with cached observer instances.
+ */
+import * as React from "react";
+/**
+ * Observe size changes for a given element reference using shared resize observers.
+ *
+ * @param ref - Ref holding the element whose size to monitor.
+ * @param options - Resize observer configuration.
+ * @returns Latest resize entry and a derived DOMRect snapshot.
+ */
+export declare function useResizeObserver<T extends HTMLElement>(ref: React.RefObject<T | null>, { box }: ResizeObserverOptions): {
+    entry: ResizeObserverEntry | null;
+    rect: DOMRectReadOnly | null;
+};

package/dist/index.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("./GridLayout-Dx3Qofl0.cjs"),f=require("react/jsx-runtime"),Tt=require("react"),C=require("./styles-BMEhL6I0.cjs");function Gt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const l=Gt(Tt),St=t=>{const e=t==="drag"?C.COLOR_RESIZE_HANDLE_ACTIVE:t==="hover"?C.COLOR_RESIZE_HANDLE_HOVER:C.COLOR_RESIZE_HANDLE_IDLE;return{width:C.HORIZONTAL_DIVIDER_WIDTH,cursor:"col-resize",position:"relative",userSelect:"none",backgroundColor:e}},Et=({onResize:t,component:e,element:r})=>{const{ref:n,isDragging:o,onPointerDown:s}=S.useResizeDrag({axis:"x",onResize:t}),[a,i]=l.useState(!1),c={ref:n,style:St(o?"drag":a?"hover":"idle"),role:"separator","aria-orientation":"vertical","data-dragging":o?"true":void 0,onPointerDown:s,onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1)};return r?l.cloneElement(r,c):e?f.jsx(e,{...c}):f.jsx("div",{...c})},Rt=()=>{const{layerId:t}=S.useLayerInstance(),{getLayerHandleProps:e}=S.useGridLayoutContext();return l.useMemo(()=>e(t),[e,t])},it=l.createContext(null),Pt=()=>{const t=l.useContext(it);if(!t)throw new Error("useKeybindings must be used within KeybindingsProvider");return t},Ct=t=>{const e=[];t.metaKey&&e.push("Mod"),t.ctrlKey&&e.push("Ctrl"),t.altKey&&e.push("Alt"),t.shiftKey&&e.push("Shift");const r=t.key.length===1?t.key.toUpperCase():t.key;return e.push(r),e.join("-")},Dt=({children:t,configure:e})=>{const r=l.useRef({}),n=l.useCallback((a,i)=>{r.current={...r.current,[a]:i}},[]),o=l.useCallback(a=>{const i={...r.current};delete i[a],r.current=i},[]);l.useEffect(()=>{const a=i=>{const c=Ct(i),u=r.current[c];u&&u(i)};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[]);const s=l.useMemo(()=>({register:n,unregister:o}),[n,o]);return l.useEffect(()=>{e&&e(s)},[s,e]),f.jsx(it.Provider,{value:s,children:t})},jt=(t,e)=>{t.register("Mod-\\",r=>{r.preventDefault(),e.splitFocused("vertical")}),t.register("Mod-Shift-\\",r=>{r.preventDefault(),e.splitFocused("horizontal")});for(const r of[1,2,3,4,5,6,7,8,9])t.register(`Mod-${String(r)}`,n=>{n.preventDefault(),e.focusGroupIndex(r)});t.register("Alt-ArrowRight",r=>{r.preventDefault(),e.focusNextGroup()}),t.register("Alt-ArrowLeft",r=>{r.preventDefault(),e.focusPrevGroup()})},At=t=>t.type==="group",at=(t,e={x:0,y:0,w:100,h:100})=>{const r=new Map,n=(o,s)=>{if(At(o)){r.set(o.groupId,s);return}if(o.direction==="vertical"){const c=s.w*o.ratio,u=s.w-c;n(o.a,{x:s.x,y:s.y,w:c,h:s.h}),n(o.b,{x:s.x+c,y:s.y,w:u,h:s.h});return}const a=s.h*o.ratio,i=s.h-a;n(o.a,{x:s.x,y:s.y,w:s.w,h:a}),n(o.b,{x:s.x,y:s.y+a,w:s.w,h:i})};return n(t,e),r},_t=(t,e)=>{const r=at(t.tree),n={areas:[["root"]],rows:[{size:"1fr"}],columns:[{size:"1fr"}],gap:"0px",style:{position:"relative"}},o=Array.from(r.entries()).map(([s,a])=>{const i={position:"absolute",left:`${a.x}%`,top:`${a.y}%`,width:`${a.w}%`,height:`${a.h}%`,overflow:"hidden",display:"flex",flexDirection:"column"};return{id:s,positionMode:"absolute",style:i,component:e(s)}});return{config:n,layers:o}},kt=(t,e,r)=>{const n=at(t.tree),o=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.x,m.x+m.w]))).sort((m,x)=>m-x),s=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.y,m.y+m.h]))).sort((m,x)=>m-x),a=o.slice(1).map((m,x)=>`${m-o[x]}fr`),i=s.slice(1).map((m,x)=>`${m-s[x]}fr`),c=a.map(m=>({size:m,resizable:r})),u=i.map(m=>({size:m,resizable:r})),d=(m,x,b,w)=>{for(const[g,I]of n.entries())if(m>=I.x&&x<=I.x+I.w&&b>=I.y&&w<=I.y+I.h)return g;return"."},h=[];for(let m=0;m<s.length-1;m+=1){const x=[];for(let b=0;b<o.length-1;b+=1)x.push(d(o[b],o[b+1],s[m],s[m+1]));h.push(x)}const v={areas:h,rows:u,columns:c,gap:"0px"},y=Array.from(n.keys()).map(m=>({id:m,gridArea:m,component:e(m)}));return{config:v,layers:y}},ct=l.createContext(null),Ot=()=>{const t=l.useContext(ct);if(!t)throw new Error("usePanelRenderContext must be used within PanelRenderProvider");return t},Mt=({value:t,children:e})=>f.jsx(ct.Provider,{value:t,children:e}),ut=l.createContext(null),lt=()=>{const t=l.useContext(ut);if(!t)throw new Error("useDomRegistry must be used within DomRegistryProvider");return t},Nt=({children:t})=>{const e=l.useRef(new Map),r=l.useCallback(c=>{const u=e.current.get(c);if(u)return u;const d={group:null,tabbar:null,content:null};return e.current.set(c,d),d},[]),n=l.useCallback((c,u)=>{const d=r(c);if(d.group=u,u===null){const h=e.current.get(c);(h?h.tabbar===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),o=l.useCallback((c,u)=>{const d=r(c);if(d.tabbar=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),s=l.useCallback((c,u)=>{const d=r(c);if(d.content=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.tabbar===null:!1)&&e.current.delete(c)}},[r]),a=l.useCallback(()=>e.current,[]),i=l.useMemo(()=>({setGroupEl:n,setTabbarEl:o,setContentEl:s,getAll:a}),[n,o,s,a]);return f.jsx(ut.Provider,{value:i,children:t})},Lt={display:"flex",flexDirection:"column",width:"100%",height:"100%"},Bt={flex:"1 1 auto",minWidth:0,minHeight:0,position:"relative",overflow:"hidden"};function Ht(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}function $t(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}const zt=({group:t,tabbar:e,content:r,onContentPointerDown:n,groupRef:o,contentRef:s,component:a,element:i,contentComponent:c,contentElement:u})=>{const d={ref:o,style:Lt,"data-group-id":t.id},v=Ht(u,c,{ref:s,style:Bt,"data-dnd-zone":"content",onPointerDown:n},r),y=f.jsxs(f.Fragment,{children:[e,v]});return $t(i,a,d,y)},dt=l.memo(zt,(t,e)=>t.group.id!==e.group.id||t.group.activeTabId!==e.group.activeTabId||t.group.tabs.length!==e.group.tabs.length?!1:t.group.tabs===e.group.tabs);dt.displayName="PanelGroupView";const V=(t,e,r)=>{const n=t.left,o=t.top,s=t.width,a=t.height,i=e-n,c=r-o,u=s/3,d=a/3;return i>u&&i<s-u&&c>d&&c<a-d?"center":i<c&&i<s-i&&c<a-c?"left":s-i<c&&s-i<i&&c<a-c?"right":c<i&&c<a-c&&i<s-i?"top":"bottom"};function _(t,e){if(!e){const n=(()=>({type:t}));return Object.defineProperty(n,"type",{value:t,writable:!1,enumerable:!0}),n}const r=((...n)=>{const o=e(...n);return typeof o>"u"?{type:t}:{type:t,payload:o}});return Object.defineProperty(r,"type",{value:t,writable:!1,enumerable:!0}),r}const Xt=(t,e)=>{const r={};return Object.keys(t).forEach(n=>{const o=t[n];r[n]=((...s)=>{const a=o(...s);return e(a),a})}),r},pt=(t,e)=>{const r={};return Object.keys(e).forEach(n=>{const o=e[n];if(!o)return;const s=t[n];if(!s)throw new Error(`Missing action creator for key "${String(n)}"`);r[s.type]=o}),r},ft={phase:{kind:"idle"},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null},A={startContent:_("START_CONTENT",t=>t),startTab:_("START_TAB",t=>t),setSuggest:_("SET_SUGGEST",t=>t),setPointer:_("SET_POINTER",t=>t),setTabbarHover:_("SET_TABBAR_HOVER",t=>t),reset:_("RESET")},Ft=pt(A,{startContent:(t,e)=>({phase:{kind:"content",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null}),startTab:(t,e)=>({phase:{kind:"tab",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:e.payload.element}),setSuggest:(t,e)=>({...t,suggest:e.payload}),setPointer:(t,e)=>({...t,pointer:e.payload}),setTabbarHover:(t,e)=>({...t,tabbarHover:e.payload}),reset:()=>ft}),Yt=(t,e)=>{const r=Ft[e.type];return r?r(t,e,void 0):t},bt=l.createContext(null),U=()=>{const t=l.useContext(bt);if(!t)throw new Error("usePanelInteractions must be used within InteractionsProvider");return t},Vt=({containerRef:t,dragThresholdPx:e,onCommitContentDrop:r,onCommitTabDrop:n,isContentZoneAllowed:o,children:s})=>{const[a,i]=l.useReducer(Yt,ft),c=lt(),u=l.useCallback(()=>{const b=Array.from(c.getAll().entries()),w=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),g=b.map(([p,T])=>({gid:p,el:T.tabbar})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),I=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()}));return{groups:w,tabbars:g,contents:I}},[c]),d=S.useEffectEvent(b=>{if(!t.current)return;const g=b.clientX,I=b.clientY,p=a.phase;if(p.kind==="idle")return;const T=Math.abs(g-p.startX),R=Math.abs(I-p.startY);if(T<e&&R<e){a.phase.kind==="content"&&i(A.setSuggest(null)),i(A.setPointer(null)),i(A.setTabbarHover(null));return}if(i(A.setPointer({x:g,y:I})),p.kind==="content"){const E=p.cache.groups.find(({rect:G})=>g>=G.left&&g<=G.right&&I>=G.top&&I<=G.bottom);if(!E){i(A.setSuggest(null));return}const D=V(E.rect,g,I);if(o&&!o({targetGroupId:E.gid,zone:D})){i(A.setSuggest(null));return}i(A.setSuggest({rect:E.rect,zone:D}));return}if(p.kind==="tab"){const E=p.cache.tabbars.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(E){const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(H=>H.getBoundingClientRect()),j=k.map(H=>H.left+H.width/2),M=j.findIndex(H=>g<H),N=M===-1?j.length:M,yt=k.length===0?E.rect.left+8:N===0?k[0].left:N===k.length?k[k.length-1].right:(k[N-1].right+k[N].left)/2;i(A.setTabbarHover({groupId:E.gid,index:N,rect:E.rect,insertX:yt}))}else i(A.setTabbarHover(null));const D=p.cache.contents.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(!D){i(A.setSuggest(null));return}const G=V(D.rect,g,I);if(o&&!o({targetGroupId:D.gid,zone:G})){i(A.setSuggest(null));return}i(A.setSuggest({rect:D.rect,zone:G}))}}),h=S.useEffectEvent(b=>{const w=t.current,g=a;if(i(A.reset()),!w)return;const I=b.clientX,p=b.clientY;if(g.phase.kind==="idle")return;const T=Math.abs(I-g.phase.startX),R=Math.abs(p-g.phase.startY);if(!(T<e&&R<e)){if(g.phase.kind==="content"){const E=g.phase.cache.groups.find(({rect:P})=>I>=P.left&&I<=P.right&&p>=P.top&&p<=P.bottom);if(!E)return;const D=E.gid??null;if(!D)return;const G=V(E.rect,I,p);if(o&&!o({targetGroupId:D,zone:G}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:D,zone:G});return}if(g.phase.kind==="tab"){const E=g.phase.cache.tabbars.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(E){const G=E.gid;if(!G)return;const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(N=>{const Z=N.getBoundingClientRect();return Z.left+Z.width/2}),j=k.findIndex(N=>I<N),M=j===-1?k.length:j;n({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,targetIndex:M});return}const D=g.phase.cache.contents.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(D){const G=D.gid??null;if(!G)return;const P=V(D.rect,I,p);if(o&&!o({targetGroupId:G,zone:P}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,zone:P})}}}}),v=S.useEffectEvent(()=>{i(A.reset())});l.useEffect(()=>{if(a.phase.kind!=="idle")return window.addEventListener("pointermove",d),window.addEventListener("pointerup",h,{once:!0}),window.addEventListener("pointercancel",v,{once:!0}),()=>{window.removeEventListener("pointermove",d),window.removeEventListener("pointerup",h),window.removeEventListener("pointercancel",v)}},[a.phase.kind]);const y=l.useCallback((b,w,g)=>{if(g.button!==0)return;g.currentTarget.setPointerCapture(g.pointerId);const I=u();i(A.startContent({x:g.clientX,y:g.clientY,groupId:b,tabId:w,cache:I}))},[u]),m=l.useCallback((b,w,g)=>{if(g.button!==0)return;const I=g.currentTarget;I&&I.setPointerCapture(g.pointerId);const p=u();i(A.startTab({x:g.clientX,y:g.clientY,groupId:w,tabId:b,cache:p,element:I}))},[u]),x=l.useMemo(()=>({suggest:a.suggest,isTabDragging:a.phase.kind==="tab",draggingTabId:a.phase.kind==="tab"?a.phase.tabId:null,dragPointer:a.pointer,tabbarHover:a.tabbarHover,draggingTabElement:a.draggingTabElement,onStartContentDrag:y,onStartTabDrag:m}),[a.suggest,a.pointer,a.tabbarHover,a.phase,a.draggingTabElement,y,m]);return f.jsx(bt.Provider,{value:x,children:s})},et={display:"inline-flex",alignItems:"center",userSelect:"none"},qt=({groupId:t,tab:e,active:r,dragging:n,onClickTab:o,onStartDrag:s,onCloseTab:a,tabComponent:i,tabElement:c,onDoubleClick:u})=>{const d=l.useEffectEvent(()=>{o(e.id)}),h=l.useEffectEvent(x=>{s&&x.button===0&&s(e.id,t,x)}),v=()=>{const x=!!a;return f.jsx(l.Activity,{mode:x?"visible":"hidden",children:f.jsx("button",{type:"button","aria-label":`Close tab ${e.title}`,onClick:b=>{a&&(b.stopPropagation(),a(t,e.id))},style:{marginLeft:6},tabIndex:x?void 0:-1,disabled:!x,"aria-hidden":x?void 0:!0,children:"×"})})},y={role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:d,onPointerDown:h,onDoubleClick:u,"data-tab-id":e.id,"data-active":r?"true":"false","data-dragging":n?"true":"false",children:f.jsxs(f.Fragment,{children:[f.jsx("span",{children:e.title}),v()]})},m={type:"button",role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:()=>{o(e.id)},onPointerDown:x=>{s&&x.button===0&&s(e.id,t,x)},onDoubleClick:u,children:f.jsx("span",{children:e.title})};return c?c(m):i?f.jsx(i,{...m}):f.jsx("div",{...y})},Kt={display:"flex",alignItems:"center"},Ut={flex:"1 1 auto",alignSelf:"stretch"},Wt=({group:t,onClickTab:e,onStartDrag:r,rootRef:n,component:o,element:s,tabComponent:a,tabElement:i,onAddTab:c,onCloseTab:u,doubleClickToAdd:d})=>{const{isTabDragging:h,draggingTabId:v}=U(),y=l.useRef(null),m=l.useCallback(p=>{if(y.current=p,!!n){if(typeof n=="function"){n(p);return}try{n.current=p}catch{}}},[n]),x=l.useEffectEvent(p=>{const T=y.current??p.currentTarget;if(!T)return;const R=Array.from(T.querySelectorAll('[role="tab"]'));if(R.length===0)return;const E=j=>{const M=Math.max(0,Math.min(j,R.length-1)),N=R[M];N&&N.focus()},D=document.activeElement,G=D?R.indexOf(D):R.findIndex(j=>j.getAttribute("data-tab-id")===t.activeTabId);if(p.key==="ArrowRight"){p.preventDefault();const j=G>=0?G+1:0;E(j>=R.length?0:j);return}if(p.key==="ArrowLeft"){p.preventDefault();const j=G>=0?G-1:R.length-1;E(j<0?R.length-1:j);return}if(p.key==="Home"){p.preventDefault(),E(0);return}if(p.key==="End"){p.preventDefault(),E(R.length-1);return}if(p.key==="Enter"||p.key===" "){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&e(M);return}if(p.key==="Delete"||p.key==="Backspace"){if(u){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&u(t.id,M)}return}const P=(p.ctrlKey?1:0)+(p.metaKey?1:0)>0,k=typeof p.key=="string"?p.key.toLowerCase():"";if(P&&k==="t"){c&&(p.preventDefault(),c(t.id));return}});l.useEffect(()=>{const p=y.current;if(!p)return;const T=p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);if(T===document.activeElement)return;!p.contains(document.activeElement)&&T&&T.focus()},[t.activeTabId]);const b={style:Kt,role:"tablist","data-tabbar":"true","data-group-id":t.id,"data-dragging":h?"true":"false",onKeyDown:x},w=S.useElementComponentWrapper({element:s,component:o}),g=()=>c?f.jsx("button",{type:"button","aria-label":"Add tab",onClick:()=>{c(t.id)},children:"+"}):null,I=l.useCallback(()=>{d&&c&&c(t.id)},[d,c,t.id]);return f.jsxs(w,{...b,ref:m,onDoubleClick:I,children:[t.tabs.map((p,T)=>f.jsx(qt,{groupId:t.id,tab:p,active:t.activeTabId===p.id,dragging:v===p.id,onClickTab:e,onStartDrag:r,onCloseTab:u,tabComponent:a,tabElement:i,onDoubleClick:R=>R.stopPropagation()},`${t.id}:${p.id}:${T}`)),f.jsx("span",{style:Ut}),g()]})},Zt=({id:t,TabBarComponent:e,PanelGroupComponent:r})=>{const{getGroup:n,getGroupContent:o,onClickTab:s,onAddTab:a,onCloseTab:i,onStartContentDrag:c,onStartTabDrag:u,doubleClickToAdd:d}=Ot(),{setGroupEl:h,setTabbarEl:v,setContentEl:y}=lt(),m=l.useCallback(T=>{h(t,T)},[t,h]),x=l.useCallback(T=>{y(t,T)},[t,y]),b=l.useCallback(T=>{v(t,T)},[t,v]),w=n(t);if(!w)return null;const g=o(t),I=e??Wt,p=r??(T=>f.jsx(dt,{...T}));return f.jsx(p,{group:w,tabbar:f.jsx(I,{rootRef:b,group:w,onClickTab:T=>s(t,T),onAddTab:a,onCloseTab:i,onStartDrag:(T,R,E)=>u(T,R,E),doubleClickToAdd:d}),content:g,groupRef:m,contentRef:x,onContentPointerDown:T=>c(t,T)})},Jt=(t,e)=>{const r=new Array(16);for(let n=0;n<4;n++)for(let o=0;o<4;o++)r[n*4+o]=t[0+o]*e[n*4+0]+t[4+o]*e[n*4+1]+t[8+o]*e[n*4+2]+t[12+o]*e[n*4+3];return r},q=t=>{if(t.length!==16)throw new Error("Matrix must have exactly 16 values");const e=Object.freeze([...t]),r=n=>{const o=Jt(e,n);return q(o)};return Object.freeze({translate:(n=0,o=0,s=0)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translate3d:(n,o,s)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translateX:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,0,0,1]),translateY:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,n,0,1]),translateZ:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,0,n,1]),scale:(n=1,o=1,s=1)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scale3d:(n,o,s)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scaleX:n=>r([n,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),scaleY:n=>r([1,0,0,0,0,n,0,0,0,0,1,0,0,0,0,1]),scaleZ:n=>r([1,0,0,0,0,1,0,0,0,0,n,0,0,0,0,1]),rotateX:n=>{const o=Math.cos(n),s=Math.sin(n);return r([1,0,0,0,0,o,s,0,0,-s,o,0,0,0,0,1])},rotateY:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,0,-s,0,0,1,0,0,s,0,o,0,0,0,0,1])},rotateZ:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,s,0,0,-s,o,0,0,0,0,1,0,0,0,0,1])},rotate:(n,o,s,a)=>{const i=Math.sqrt(o*o+s*s+a*a);if(i===0)return q(e);o/=i,s/=i,a/=i;const c=Math.cos(n),u=Math.sin(n),d=1-c;return r([d*o*o+c,d*o*s+u*a,d*o*a-u*s,0,d*o*s-u*a,d*s*s+c,d*s*a+u*o,0,d*o*a+u*s,d*s*a-u*o,d*a*a+c,0,0,0,0,1])},rotate3d:(n,o,s,a)=>{const i=Math.sqrt(n*n+o*o+s*s);if(i===0)return q(e);n/=i,o/=i,s/=i;const c=Math.cos(a),u=Math.sin(a),d=1-c;return r([d*n*n+c,d*n*o+u*s,d*n*s-u*o,0,d*n*o-u*s,d*o*o+c,d*o*s+u*n,0,d*n*s+u*o,d*o*s-u*n,d*s*s+c,0,0,0,0,1])},skew:(n=0,o=0)=>{const s=Math.tan(n),a=Math.tan(o);return r([1,a,0,0,s,1,0,0,0,0,1,0,0,0,0,1])},skewX:n=>{const o=Math.tan(n);return r([1,0,0,0,o,1,0,0,0,0,1,0,0,0,0,1])},skewY:n=>{const o=Math.tan(n);return r([1,o,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},perspective:n=>{if(n===0)throw new Error("Perspective distance cannot be zero");return r([1,0,0,0,0,1,0,0,0,0,1,-1/n,0,0,0,1])},toCSS:()=>`matrix3d(${e.join(", ")})`,toArray:()=>e,toString:()=>[`[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,`[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,`[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,`[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`].join(`
+`)})},Qt=()=>q([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),te={position:"fixed",inset:0,pointerEvents:"none",zIndex:C.DROP_SUGGEST_Z_INDEX},ee={position:"absolute",border:`${C.DROP_SUGGEST_BORDER_WIDTH} dashed ${C.DROP_SUGGEST_BORDER_COLOR}`,background:C.DROP_SUGGEST_BG_COLOR,borderRadius:C.DROP_SUGGEST_BORDER_RADIUS,transformOrigin:"top left"},L=(t,e)=>e<=0?0:S.clampNumber(t/e,0),re=(t,e,r)=>{const{width:n,height:o}=t,s=r/2,a=n>0?n:1,i=o>0?o:1,c={translateX:r,translateY:r,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},u={translateX:r,translateY:r,scaleX:L(S.clampNumber(n/2-r*1.5,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},d={translateX:n/2+s,translateY:r,scaleX:L(S.clampNumber(n/2-r*1.5,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},h={translateX:r,translateY:r,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o/2-r*1.5,0),i)},v={translateX:r,translateY:o/2+s,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o/2-r*1.5,0),i)},y={center:c,left:u,right:d,top:h,bottom:v},{translateX:m,translateY:x,scaleX:b,scaleY:w}=y[e];return Qt().translate(m,x,0).scale(b,w,1).toCSS()},ne=(t,e)=>{const r=C.DROP_SUGGEST_PADDING_PX;return{...ee,left:t.left,top:t.top,width:t.width,height:t.height,transform:re(t,e,r)}},oe=({suggest:t})=>{if(!t)return null;const{rect:e,zone:r}=t,n=ne(e,r);return f.jsx("div",{style:te,children:f.jsx("div",{style:n})})},se=typeof window<"u"&&typeof document<"u",ie=t=>{const[e,r]=l.useState(null),[n,o]=l.useState(null);return S.useIsomorphicLayoutEffect(()=>{if(!se||!t){r(null),o(null);return}const s=t.getBoundingClientRect();r({width:s.width,height:s.height}),o(t.outerHTML)},[t]),{html:n,size:e}},ae={position:"fixed",inset:0,pointerEvents:"none",zIndex:C.TAB_DRAG_OVERLAY_Z_INDEX},ce={position:"absolute",width:C.TAB_DRAG_INSERT_GUIDE_WIDTH,borderRadius:C.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS,background:C.TAB_DRAG_INSERT_GUIDE_COLOR,boxShadow:C.TAB_DRAG_INSERT_GUIDE_SHADOW},ue=()=>{const{isTabDragging:t,draggingTabId:e,dragPointer:r,tabbarHover:n,draggingTabElement:o}=U(),{html:s,size:a}=ie(o),i=r!==null&&e!==null,c=l.useMemo(()=>{if(!(!i||!r))return{position:"absolute",left:r.x,top:r.y,transform:`translate(${C.TAB_DRAG_PREVIEW_OFFSET_X}, ${C.TAB_DRAG_PREVIEW_OFFSET_Y})`,pointerEvents:"none"}},[i,r]),u=l.useMemo(()=>{if(!(!c||!o))return a?{...c,width:a.width,height:a.height}:c},[c,o,a]),d=l.useMemo(()=>{if(n)return{...ce,left:n.insertX,top:n.rect.top+4,height:Math.max(0,n.rect.height-8)}},[n]);return t?f.jsxs("div",{style:ae,children:[f.jsx(l.Activity,{mode:u?"visible":"hidden",children:f.jsx("div",{style:u,children:f.jsx("div",{style:{width:"100%",height:"100%",pointerEvents:"none"},dangerouslySetInnerHTML:{__html:s??""}})})}),f.jsx(l.Activity,{mode:d?"visible":"hidden",children:f.jsx("div",{style:d})})]}):null},O=t=>t.type==="group",X=(t,e=[])=>{if(O(t))return[...e,t.groupId];const r=X(t.a,e);return X(t.b,r)},W=(t,e)=>e.reduce((r,n)=>O(r)?r:r[n],t),F=(t,e,r)=>{if(e.length===0)return r;const[n,...o]=e;return O(t)?t:n==="a"?{...t,a:F(t.a,o,r)}:{...t,b:F(t.b,o,r)}},K=(t,e,r=[])=>{if(O(t))return t.groupId===e?{splitPath:null,side:null}:null;if(O(t.a)&&t.a.groupId===e)return{splitPath:r,side:"a"};if(O(t.b)&&t.b.groupId===e)return{splitPath:r,side:"b"};const n=K(t.a,e,[...r,"a"]);return n||K(t.b,e,[...r,"b"])},gt=(t,e,r,n)=>{const o=n(),s=K(t,e),a={type:"split",direction:r,ratio:.5,a:{type:"group",groupId:e},b:{type:"group",groupId:o}};if(!s||s.splitPath===null)return{tree:a,newGroupId:o};const i=s.splitPath,c=W(t,i);if(O(c))return{tree:a,newGroupId:o};const u=s.side==="a"?{...c,a}:{...c,b:a};return{tree:F(t,i,u),newGroupId:o}},le=(t,e)=>{const r=K(t,e);if(!r||r.splitPath===null)return{tree:t,survivorGroupId:e};const n=r.splitPath,o=W(t,n);if(O(o))return{tree:t,survivorGroupId:e};const s=r.side==="a"?o.b:o.a,a=F(t,n,s),i=O(s)?s.groupId:X(s)[0]??null;return{tree:a,survivorGroupId:i}},de=(t,e,r)=>{const n=W(t,e);if(O(n))return t;const o={...n,ratio:S.clampNumber(r,.05,.95)};return F(t,e,o)},J=t=>{if(Object.keys(t.groups).filter(o=>t.groups[o].tabIds.length===0).length===0)return t;const n=(o,s)=>{const a=o.groups[s];if(!a||a.tabs.length>0||Object.keys(o.groups).length<=1)return o;const{tree:c,survivorGroupId:u}=le(o.tree,s),{[s]:d,...h}=o.groups,v=X(c),y=o.focusedGroupId===s?u??v[0]??null:o.focusedGroupId;return{...o,tree:c,groups:h,groupOrder:v,focusedGroupId:y}};return t.groupOrder.reduce((o,s)=>n(o,s),t)},pe=t=>({id:t,tabIds:[],tabs:[],activeTabId:null}),rt=(t,e,r,n)=>{const o={...t.groups},s=o[e];if(!s)throw new Error(`Group ${e} does not exist.`);const a={...t.panels,[r.id]:r},i=[...s.tabIds,r.id],c=n?r.id:s.activeTabId??r.id,u=i.map(h=>a[h]),d={...s,tabIds:i,tabs:u,activeTabId:c};return o[e]=d,{...t,panels:a,groups:o}},fe=(t,e,r)=>{const n={...t.groups},o=n[e];if(!o)throw new Error(`Group ${e} does not exist.`);const s=o.tabIds.filter(c=>c!==r),a=s.map(c=>t.panels[c]),i=o.activeTabId===r?s[0]??null:o.activeTabId;return n[e]={...o,tabIds:s,tabs:a,activeTabId:i},{...t,groups:n}},nt=(t,e,r,n,o)=>{const s=t.groups[e],a=t.groups[r];if(!s||!a)throw new Error("moveTab: source or target group is missing.");const i={...t.groups},c=s.tabIds.filter(h=>h!==n),u=[...a.tabIds.filter(h=>h!==n),n],d=s.activeTabId===n?c[0]??null:s.activeTabId;return i[e]={...s,tabIds:c,tabs:c.map(h=>t.panels[h]),activeTabId:d},i[r]={...a,tabIds:u,tabs:u.map(h=>t.panels[h]),activeTabId:n},{...t,groups:i}},ht=(t,e,r)=>{const n=t.groups[e];if(!n)throw new Error(`setActiveTab: group ${e} not found.`);if(!n.tabIds.some(s=>s===r))throw new Error(`setActiveTab: tab ${r} not found in group ${e}.`);const o={...t.groups,[e]:{...n,activeTabId:r}};return{...t,groups:o,focusedGroupId:e}},ot=(t,e,r,n,o)=>{const s=t.groups[e];if(!s)throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);const a={...t.panels,[r.id]:r},i=s.tabIds.slice(),c=Math.max(0,Math.min(n,i.length));i.splice(c,0,r.id);const u=i.map(v=>a[v]),d=o?r.id:s.activeTabId??r.id,h={...t.groups,[e]:{...s,tabIds:i,tabs:u,activeTabId:d}};return{...t,panels:a,groups:h}},B=(t,e)=>{if(!t.groups[e])throw new Error(`setFocusedGroup: group ${e} not found.`);return{...t,focusedGroupId:e}},be=(t,e)=>{const r=e-1,n=t.groupOrder[r];return n?B(t,n):t},ge=t=>{const e=t.groupOrder,r=t.focusedGroupId;if(!r){const s=e[0];return s?B(t,s):t}const n=e.indexOf(r),o=e[(n+1)%e.length];return B(t,o)},he=t=>{const e=t.groupOrder,r=t.focusedGroupId;if(!r){const s=e[e.length-1];return s?B(t,s):t}const n=e.indexOf(r),o=e[(n-1+e.length)%e.length];return B(t,o)},mt=(t,e,r,n)=>{const{tree:o,newGroupId:s}=gt(t.tree,e,r,n),a={...t.groups,[s]:pe(s)},i=X(o);return{...t,tree:o,groups:a,groupOrder:i,focusedGroupId:s}},me=t=>{const r={type:"group",groupId:"g_1"},n=Object.fromEntries(t.map(i=>[i.id,i])),s={g_1:{id:"g_1",tabIds:t.map(i=>i.id),tabs:t,activeTabId:t[0]?.id??null}};return{tree:r,panels:n,groups:s,groupOrder:["g_1"],focusedGroupId:"g_1"}},ve=l.createContext(null),Ie=({value:t,children:e})=>f.jsx(ve.Provider,{value:t,children:e}),vt=l.createContext(null),xe=()=>{const t=l.useContext(vt);if(!t)throw new Error("useTree must be used within TreeProvider");return t},we=({value:t,children:e})=>f.jsx(vt.Provider,{value:t,children:e}),ye=l.createContext(null),Te=({value:t,children:e})=>f.jsx(ye.Provider,{value:t,children:e}),$=t=>{const e=S.toFiniteNumberOr(t,Number.POSITIVE_INFINITY);return S.clampNumber(e,1)},Ge=t=>typeof t=="object"&&t!==null,Se=t=>Ge(t)?"rows"in t?!0:"cols"in t:!1,It=t=>{if(!t)return{rows:Number.POSITIVE_INFINITY,cols:Number.POSITIVE_INFINITY};if(typeof t=="number"){const r=$(t);return{rows:r,cols:r}}if(Se(t))return{rows:$(t.rows),cols:$(t.cols)};const e=t;return{rows:$(e.maxHorizontal),cols:$(e.maxVertical)}},Q=t=>{if(O(t))return{horizontal:1,vertical:1};const e=Q(t.a),r=Q(t.b);return t.direction==="horizontal"?{horizontal:e.horizontal+r.horizontal,vertical:Math.max(e.vertical,r.vertical)}:{horizontal:Math.max(e.horizontal,r.horizontal),vertical:e.vertical+r.vertical}},Ee=(t,e,r)=>{const{tree:n}=gt(t,e,r,()=>"__preview__");return n},tt=(t,e,r,n)=>{if(!Number.isFinite(n.rows)&&!Number.isFinite(n.cols))return!0;const o=Ee(t,e,r),s=Q(o);return!(s.horizontal>n.rows||s.vertical>n.cols)},xt={splitFocused:_("panelState/splitFocused",t=>({direction:t})),focusGroupIndex:_("panelState/focusGroupIndex",t=>({index1Based:t})),focusNextGroup:_("panelState/focusNextGroup"),focusPrevGroup:_("panelState/focusPrevGroup"),setActiveTab:_("panelState/setActiveTab",(t,e)=>({groupId:t,tabId:e})),addTab:_("panelState/addTab",t=>t),addNewTab:_("panelState/addNewTab",t=>t),removeTab:_("panelState/removeTab",(t,e)=>({groupId:t,tabId:e})),contentDrop:_("panelState/contentDrop",t=>t),tabDrop:_("panelState/tabDrop",t=>t),adjustSplitRatio:_("panelState/adjustSplitRatio",t=>t)},Re=(t,e,r)=>{const n=t.groups[e.fromGroupId],o=t.groups[e.targetGroupId];if(!n||!o||!n.tabs.find(h=>h.id===e.tabId))return t;if(e.zone==="center"&&e.fromGroupId===e.targetGroupId)return ht(t,e.fromGroupId,e.tabId);if(e.zone==="center"){const h=nt(t,e.fromGroupId,e.targetGroupId,e.tabId);return B(h,e.targetGroupId)}const a=e.zone==="left"||e.zone==="right"?"vertical":"horizontal";if(!tt(t.tree,e.targetGroupId,a,r.splitLimits))return t;const i=r.createGroupId(),c=mt(t,e.targetGroupId,a,()=>i),u=e.zone==="left"||e.zone==="top"?e.targetGroupId:i,d=nt(c,e.fromGroupId,u,e.tabId);return B(d,u)},Pe=(t,e)=>{const r=t.groups[e.fromGroupId],n=t.groups[e.targetGroupId];if(!r||!n||!t.panels[e.tabId])return t;if(e.fromGroupId===e.targetGroupId){const v=r.tabIds.filter(w=>w!==e.tabId),y=Math.max(0,Math.min(e.targetIndex,v.length)),m=v.slice(0,y).concat([e.tabId],v.slice(y)),x=m.map(w=>t.panels[w]).filter(Boolean),b={...t.groups,[e.fromGroupId]:{...r,tabIds:m,tabs:x}};return{...t,groups:b}}const s={...t.groups},a=r.tabIds.filter(v=>v!==e.tabId),i=a.map(v=>t.panels[v]);s[e.fromGroupId]={...r,tabIds:a,tabs:i,activeTabId:r.activeTabId===e.tabId?i[0]?.id??null:r.activeTabId};const c=n.tabIds.filter(v=>v!==e.tabId),u=Math.max(0,Math.min(e.targetIndex,c.length)),d=c.slice(0,u).concat([e.tabId],c.slice(u)),h=d.map(v=>t.panels[v]).filter(Boolean);return s[e.targetGroupId]={...n,tabIds:d,tabs:h,activeTabId:e.tabId},{...t,groups:s,focusedGroupId:e.targetGroupId}},Ce=pt(xt,{splitFocused:(t,e,r)=>{const n=t.focusedGroupId??t.groupOrder[0]??null;return!n||!tt(t.tree,n,e.payload.direction,r.splitLimits)?t:mt(t,n,e.payload.direction,r.createGroupId)},focusGroupIndex:(t,e)=>be(t,e.payload.index1Based),focusNextGroup:t=>ge(t),focusPrevGroup:t=>he(t),setActiveTab:(t,e)=>ht(t,e.payload.groupId,e.payload.tabId),addTab:(t,e)=>{const{groupId:r,tab:n,index:o,makeActive:s}=e.payload;return typeof o=="number"?ot(t,r,n,o,s??!0):rt(t,r,n,s??!0)},addNewTab:(t,e,r)=>{if(!r.createPanelId)throw new Error("addNewTab requires PanelSystemProvider.createPanelId");const o={id:r.createPanelId(),title:e.payload.title,render:()=>e.payload.title},{groupId:s,index:a,makeActive:i}=e.payload;return typeof a=="number"?ot(t,s,o,a,i??!0):rt(t,s,o,i??!0)},removeTab:(t,e)=>fe(t,e.payload.groupId,e.payload.tabId),contentDrop:(t,e,r)=>Re(t,e.payload,r),tabDrop:(t,e)=>Pe(t,e.payload),adjustSplitRatio:(t,e)=>{const r=W(t.tree,e.payload.path);if(O(r))return t;const n=de(t.tree,e.payload.path,r.ratio+e.payload.deltaRatio);return{...t,tree:n}}}),st=(t,e,r)=>{const n=Ce[e.type];if(!n)return t;const o=n(t,e,r);return J(o)},wt=l.createContext(null),Y=()=>{const t=l.useContext(wt);if(!t)throw new Error("usePanelSystem must be used within PanelSystemProvider");return t},De=({initialState:t,createGroupId:e,createPanelId:r,state:n,onStateChange:o,splitLimits:s,children:a})=>{const i=l.useMemo(()=>J(t),[t]),c=l.useMemo(()=>It(s),[s]),u=l.useRef({createGroupId:e,splitLimits:c,createPanelId:r});u.current.createGroupId=e,u.current.splitLimits=c,u.current.createPanelId=r;const[d,h]=l.useReducer((T,R)=>st(T,R,u.current),i),v=l.useMemo(()=>n?J(n):d,[n,d]),y=l.useRef(v);y.current=v;const m=n!==void 0,x=l.useCallback(T=>{if(m){const R=st(y.current,T,u.current);o?.(R);return}h(T)},[m,o,h]),b=l.useMemo(()=>Xt(xt,x),[x]),w=l.useMemo(()=>({setActiveTab:b.setActiveTab,tabDrop:b.tabDrop}),[b]),g=l.useMemo(()=>({adjustSplitRatio:b.adjustSplitRatio}),[b]),I=l.useMemo(()=>({focusGroupIndex:b.focusGroupIndex,focusNextGroup:b.focusNextGroup,focusPrevGroup:b.focusPrevGroup}),[b]),p=l.useMemo(()=>({state:v,dispatch:x,actions:b}),[v,x,b]);return f.jsx(wt.Provider,{value:p,children:f.jsx(Ie,{value:w,children:f.jsx(we,{value:g,children:f.jsx(Te,{value:I,children:a})})})})},je=()=>{const{actions:t}=Y();return l.useMemo(()=>({splitFocused:e=>{t.splitFocused(e)},focusGroupIndex:e=>{t.focusGroupIndex(e)},focusNextGroup:()=>{t.focusNextGroup()},focusPrevGroup:()=>{t.focusPrevGroup()},closeFocusedGroup:()=>{}}),[t])},Ae=()=>{const{actions:t}=Y(),e=l.useCallback(({fromGroupId:n,tabId:o,targetGroupId:s,zone:a})=>{t.contentDrop({fromGroupId:n,tabId:o,targetGroupId:s,zone:a})},[t]),r=l.useCallback(({fromGroupId:n,tabId:o,targetGroupId:s,targetIndex:a})=>{t.tabDrop({fromGroupId:n,tabId:o,targetGroupId:s,targetIndex:a})},[t]);return{onCommitContentDrop:e,onCommitTabDrop:r}},_e=()=>{const t=Pt(),e=je();return l.useEffect(()=>{jt(t,e)},[t,e]),null},ke=({children:t,emptyContentComponent:e,doubleClickToAdd:r})=>{const n=U(),{state:o,actions:s}=Y(),a=l.useCallback(()=>l.createElement("div",{style:{color:"#888",fontSize:12,padding:12}},"No tabs"),[]),i=e??a,c=l.useCallback(b=>{const w=o.groups[b];if(!w)return null;const g=w.tabIds.map(I=>o.panels[I]).filter(Boolean);return{...w,tabs:g}},[o.groups,o.panels]),u=l.useCallback(b=>{const w=o.groups[b];if(!w)return f.jsx(i,{});const g=w.activeTabId;if(!g)return f.jsx(i,{});const I=o.panels[g];return I?I.render():f.jsx(i,{})},[o.groups,o.panels,i]),d=l.useCallback((b,w)=>{s.setActiveTab(b,w)},[s]),h=l.useCallback(b=>{s.addNewTab({groupId:b,title:"New Tab",makeActive:!0})},[s]),v=l.useCallback((b,w)=>{s.removeTab(b,w)},[s]),y=l.useCallback((b,w,g)=>{s.setActiveTab(w,b),n.onStartTabDrag(b,w,g)},[s,n]),m=l.useCallback((b,w)=>{const g=o.groups[b];!g||!g.activeTabId||n.onStartContentDrag(b,g.activeTabId,w)},[o.groups,n]),x=l.useMemo(()=>({getGroup:c,getGroupContent:u,onClickTab:d,onAddTab:h,onCloseTab:v,onStartTabDrag:y,onStartContentDrag:m,doubleClickToAdd:r}),[c,u,d,h,v,y,m,r]);return f.jsx(Mt,{value:x,children:t})},z=(t,e,r,n)=>{if(O(t))return n;const o=t.direction,s=o==="vertical"?r.x+r.w*t.ratio:r.y+r.h*t.ratio;if(n.push({path:e,direction:o,parentRect:r,linePos:s}),o==="vertical"){const c=r.w*t.ratio,u=r.w-c;return z(t.a,[...e,"a"],{x:r.x,y:r.y,w:c,h:r.h},n),z(t.b,[...e,"b"],{x:r.x+c,y:r.y,w:u,h:r.h},n),n}const a=r.h*t.ratio,i=r.h-a;return z(t.a,[...e,"a"],{x:r.x,y:r.y,w:r.w,h:a},n),z(t.b,[...e,"b"],{x:r.x,y:r.y+a,w:r.w,h:i},n),n},Oe=({containerRef:t})=>{const{state:e}=Y(),{adjustSplitRatio:r}=xe(),n=l.useMemo(()=>z(e.tree,[],{x:0,y:0,w:100,h:100},[]),[e.tree]),[o,s]=l.useState(null);if(l.useLayoutEffect(()=>{const i=t.current;if(!i)return;const c=()=>{const y=i.getBoundingClientRect();s({left:y.left,top:y.top,width:y.width,height:y.height})};c();function u(){try{const y=window.ResizeObserver;return typeof y=="function"?y:null}catch{return null}}const d=u(),h=d?new d(()=>c()):null;h&&h.observe(i);const v=()=>c();return window.addEventListener("scroll",v,!0),()=>{window.removeEventListener("scroll",v,!0),h&&h.disconnect()}},[t,e.tree]),!o)return null;const a=(i,c)=>{const u={left:o.left+o.width*i.parentRect.x/100,top:o.top+o.height*i.parentRect.y/100,width:o.width*i.parentRect.w/100,height:o.height*i.parentRect.h/100},d=C.SPLIT_HANDLE_THICKNESS;if(i.direction==="vertical"){const m=u.left+u.width*(i.linePos-i.parentRect.x)/i.parentRect.w,x={position:"fixed",left:`calc(${Math.round(m)}px - ${d} / 2)`,top:Math.round(u.top),width:d,height:Math.round(u.height),cursor:"col-resize",pointerEvents:"auto"},b=w=>{const g=o.width*i.parentRect.w/100,I=g===0?0:w/g;r({path:i.path,deltaRatio:I})};return f.jsx("div",{style:x,children:f.jsx(S.ResizeHandle,{direction:"vertical",onResize:b})},`split-${c}`)}const h=u.top+u.height*(i.linePos-i.parentRect.y)/i.parentRect.h,v={position:"fixed",left:Math.round(u.left),top:`calc(${Math.round(h)}px - ${d} / 2)`,width:Math.round(u.width),height:d,cursor:"row-resize",pointerEvents:"auto"},y=m=>{const x=o.height*i.parentRect.h/100,b=x===0?0:m/x;r({path:i.path,deltaRatio:b})};return f.jsx("div",{style:v,children:f.jsx(S.ResizeHandle,{direction:"horizontal",onResize:y})},`split-${c}`)};return f.jsx("div",{style:{position:"fixed",inset:0,pointerEvents:"none"},children:n.map((i,c)=>a(i,c))})},Me={position:"relative",display:"flex",width:"100%",height:"100%"},Ne=({state:t,layoutMode:e,gridTracksInteractive:r,view:n,tabBarComponent:o,panelGroupComponent:s})=>{const a=c=>{if(n){const u=n;return f.jsx(u,{groupId:c})}return f.jsx(Zt,{id:c,TabBarComponent:o,PanelGroupComponent:s})};if(e==="grid"){const c=kt(t,a,!!r);return f.jsx(S.GridLayout,{config:c.config,layers:c.layers})}const i=_t(t,a);return f.jsx(S.GridLayout,{config:i.config,layers:i.layers})},Le=({containerRef:t,layoutMode:e,gridTracksInteractive:r,dragThresholdPx:n,view:o,style:s,className:a,tabBarComponent:i,panelGroupComponent:c,splitLimits:u,emptyContentComponent:d,doubleClickToAdd:h})=>{const{state:v}=Y(),{onCommitContentDrop:y,onCommitTabDrop:m}=Ae(),x=l.useMemo(()=>({...Me,...s}),[s]),b=l.useCallback(({targetGroupId:w,zone:g})=>{if(g==="center")return!0;const I=g==="left"||g==="right"?"vertical":"horizontal";return tt(v.tree,w,I,u)},[v.tree,u]);return f.jsx(Nt,{children:f.jsxs(Vt,{containerRef:t,dragThresholdPx:n,onCommitContentDrop:y,onCommitTabDrop:m,isContentZoneAllowed:b,children:[f.jsx(ke,{emptyContentComponent:d,doubleClickToAdd:h,children:f.jsx("div",{ref:t,className:a,style:x,children:f.jsx(Ne,{state:v,layoutMode:e,gridTracksInteractive:r,view:o,tabBarComponent:i,panelGroupComponent:c})})}),f.jsx(Oe,{containerRef:t}),f.jsx(Be,{})]})})},Be=()=>{const t=U();return f.jsxs(f.Fragment,{children:[f.jsx(oe,{suggest:t.suggest}),f.jsx(ue,{})]})},He=({initialState:t,createGroupId:e,createPanelId:r,layoutMode:n,gridTracksInteractive:o,dragThresholdPx:s,view:a,emptyContentComponent:i,state:c,onStateChange:u,className:d,style:h,tabBarComponent:v,panelGroupComponent:y,splitLimits:m,doubleClickToAdd:x})=>{if(!t)throw new Error("PanelSystem requires initialState.");if(!e)throw new Error("PanelSystem requires explicit createGroupId function.");if(!n)throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");if(n==="grid"&&o===void 0)throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");if(s===void 0)throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");const b=l.useRef(null),w=l.useMemo(()=>It(m),[m]);return f.jsx(De,{initialState:t,createGroupId:e,createPanelId:r,state:c,onStateChange:u,splitLimits:m,children:f.jsxs(Dt,{children:[f.jsx(_e,{}),f.jsx(Le,{containerRef:b,layoutMode:n,gridTracksInteractive:o,dragThresholdPx:s,view:a,style:h,className:d,tabBarComponent:v,panelGroupComponent:y,splitLimits:w,emptyContentComponent:i,doubleClickToAdd:x})]})})};exports.Drawer=S.Drawer;exports.DrawerLayers=S.DrawerLayers;exports.GridLayout=S.GridLayout;exports.ResizeHandle=S.ResizeHandle;exports.CSS_VAR_PREFIX=C.CSS_VAR_PREFIX;exports.HorizontalDivider=Et;exports.PanelSystem=He;exports.buildInitialState=me;exports.useLayerDragHandle=Rt;
+//# sourceMappingURL=index.cjs.map