react-panel-layout 0.4.1 → 0.5.0

package/README.md

@@ -119,3 +119,294 @@ All available CSS variables are documented in [docs/design-tokens.md](./docs/des
 - Larger UI: Increase `--rpl-size-tab-font` and spacing variables
 - Light theme: Override color variables for light backgrounds
 - VS Code style: See examples in the design tokens documentation
+
+---
+
+## Grid Layout – Flexible Grid-Based Layouts
+
+`GridLayout` provides a declarative way to create complex grid-based layouts with resizable tracks and floating overlays.
+
+### Quick Start
+
+```tsx
+import { GridLayout } from "react-panel-layout";
+import type { PanelLayoutConfig, LayerDefinition } from "react-panel-layout";
+
+const config: PanelLayoutConfig = {
+  areas: [
+    ["cell1", "cell2"],
+    ["cell3", "cell4"],
+  ],
+  rows: [{ size: "1fr" }, { size: "1fr" }],
+  columns: [{ size: "1fr" }, { size: "1fr" }],
+  gap: "1rem",
+};
+
+const layers: LayerDefinition[] = [
+  { id: "cell1", component: <Cell1 />, gridArea: "cell1" },
+  { id: "cell2", component: <Cell2 />, gridArea: "cell2" },
+  { id: "cell3", component: <Cell3 />, gridArea: "cell3" },
+  { id: "cell4", component: <Cell4 />, gridArea: "cell4" },
+];
+
+<GridLayout config={config} layers={layers} />;
+```
+
+### PanelLayoutConfig
+
+Define your grid structure with the following properties:
+
+| Property  | Type           | Description                                   |
+|-----------|----------------|-----------------------------------------------|
+| `areas`   | `string[][]`   | Grid template areas (CSS grid-template-areas) |
+| `rows`    | `GridTrack[]`  | Row track definitions                         |
+| `columns` | `GridTrack[]`  | Column track definitions                      |
+| `gap`     | `string`       | Gap between grid cells (optional)             |
+
+### GridTrack
+
+Each track (row or column) can be configured with:
+
+```tsx
+type GridTrack = {
+  size: string;       // CSS size value: "1fr", "200px", "auto", etc.
+  resizable?: boolean; // Enable drag-to-resize
+  minSize?: number;    // Minimum size in pixels (when resizable)
+  maxSize?: number;    // Maximum size in pixels (when resizable)
+};
+```
+
+### Resizable Tracks
+
+Enable resizable sidebar columns or rows:
+
+```tsx
+const config: PanelLayoutConfig = {
+  areas: [
+    ["sidebar", "main", "inspector"],
+  ],
+  rows: [{ size: "1fr" }],
+  columns: [
+    { size: "250px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "300px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "4px",
+};
+```
+
+### LayerDefinition
+
+Each layer defines content to place in the grid or as a floating overlay:
+
+```tsx
+type LayerDefinition = {
+  id: string;                    // Unique identifier
+  component: React.ReactNode;    // Content to render
+  visible?: boolean;             // Show/hide the layer
+
+  // Grid positioning
+  gridArea?: string;             // Grid area name from config.areas
+  gridRow?: string;              // Explicit grid-row value
+  gridColumn?: string;           // Explicit grid-column value
+
+  // Floating positioning (for overlays)
+  position?: { top?, right?, bottom?, left? };
+  width?: string | number;
+  height?: string | number;
+  zIndex?: number;
+
+  // Floating behavior
+  floating?: {
+    draggable?: boolean;
+    resizable?: boolean;
+    constraints?: { minWidth?, maxWidth?, minHeight?, maxHeight? };
+  };
+
+  // Drawer behavior (slide-in panels)
+  drawer?: DrawerBehavior;
+};
+```
+
+### Floating Overlays
+
+Add draggable floating panels on top of the grid:
+
+```tsx
+const layers: LayerDefinition[] = [
+  // Grid-based layer
+  {
+    id: "canvas",
+    component: <Canvas />,
+    gridArea: "canvas",
+    zIndex: 0,
+  },
+  // Floating panel
+  {
+    id: "tools",
+    component: <ToolsPanel />,
+    position: { left: 20, top: 20 },
+    width: 200,
+    height: 250,
+    zIndex: 10,
+    floating: {
+      draggable: true,
+    },
+  },
+];
+```
+
+### IDE-Style Layout Example
+
+A complete IDE-style layout with toolbar, sidebar, main canvas, and floating panels:
+
+```tsx
+const config: PanelLayoutConfig = {
+  areas: [
+    ["toolbar", "toolbar", "toolbar"],
+    ["sidebar", "canvas", "inspector"],
+    ["statusbar", "statusbar", "statusbar"],
+  ],
+  rows: [
+    { size: "60px" },
+    { size: "1fr" },
+    { size: "30px" },
+  ],
+  columns: [
+    { size: "250px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "300px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "4px",
+};
+
+const layers: LayerDefinition[] = [
+  { id: "toolbar", component: <Toolbar />, gridArea: "toolbar", zIndex: 10 },
+  { id: "sidebar", component: <Sidebar />, gridArea: "sidebar" },
+  { id: "canvas", component: <Canvas />, gridArea: "canvas" },
+  { id: "inspector", component: <Inspector />, gridArea: "inspector" },
+  { id: "statusbar", component: <StatusBar />, gridArea: "statusbar", zIndex: 10 },
+  // Floating panel
+  {
+    id: "preview",
+    component: <Preview />,
+    position: { right: 20, top: 80 },
+    width: 300,
+    height: 400,
+    zIndex: 20,
+    floating: { draggable: true },
+  },
+];
+
+<GridLayout config={config} layers={layers} />;
+```
+
+---
+
+## Pivot – Headless Content Switching
+
+`usePivot` is a headless hook for building tabbed interfaces, content switchers, and navigation patterns. It handles state management and provides an `Outlet` component for rendering content with CSS transitions.
+
+### Quick Start
+
+```tsx
+import { usePivot } from "react-panel-layout/pivot";
+
+const items = [
+  { id: "home", label: "Home", content: <HomePage /> },
+  { id: "settings", label: "Settings", content: <SettingsPage /> },
+];
+
+function MyTabs() {
+  const { activeId, getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: "home",
+  });
+
+  return (
+    <div>
+      <nav>
+        {items.map((item) => (
+          <button key={item.id} {...getItemProps(item.id)}>
+            {item.label}
+          </button>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+### Transition Modes
+
+```tsx
+const { Outlet } = usePivot({
+  items,
+  transitionMode: "css",  // "css" (default) | "none"
+});
+```
+
+- `"css"` – Smooth opacity transitions via CSS design tokens (default)
+- `"none"` – Instant switch, uses React.Activity for memory optimization
+
+### Design Tokens
+
+Customize animations via CSS custom properties:
+
+```css
+/* Define enter/leave keyframes */
+@keyframes pivotEnter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pivotLeave {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Reference via design tokens */
+:root {
+  --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards;
+  --rpl-pivot-animation-leave: pivotLeave 150ms ease-out forwards;
+}
+```
+
+Example: Slide-up animation:
+```css
+@keyframes pivotSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pivotSlideOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+:root {
+  --rpl-pivot-animation-enter: pivotSlideIn 150ms ease-out forwards;
+  --rpl-pivot-animation-leave: pivotSlideOut 150ms ease-out forwards;
+}
+```
+
+### UsePivotOptions
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `items` | `PivotItem[]` | Array of content items |
+| `activeId` | `string` | Controlled active item ID |
+| `defaultActiveId` | `string` | Default active item (uncontrolled) |
+| `onActiveChange` | `(id) => void` | Callback when active item changes |
+| `transitionMode` | `"css" \| "none"` | Enable/disable CSS transitions |
+
+### UsePivotResult
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `activeId` | `string` | Current active item ID |
+| `setActiveId` | `(id) => void` | Change active item |
+| `isActive` | `(id) => boolean` | Check if item is active |
+| `getItemProps` | `(id) => props` | Get props for navigation elements |
+| `Outlet` | `React.FC` | Component that renders active content |

package/dist/FloatingPanelFrame-DDT6aING.js

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

package/dist/FloatingPanelFrame-DDT6aING.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelFrame-DDT6aING.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  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"],"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,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/FloatingPanelFrame-DrYwgI9f.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),P=require("react"),a=require("./styles-DcG3aIFx.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 o=A(P),O={display:"flex",flexDirection:"column",borderRadius:a.FLOATING_PANEL_BORDER_RADIUS,border:`1px solid ${a.FLOATING_PANEL_BORDER_COLOR}`,background:a.FLOATING_PANEL_SURFACE_COLOR,boxShadow:a.FLOATING_PANEL_SHADOW},g={display:"flex",alignItems:"center",gap:a.FLOATING_PANEL_GAP,padding:`${a.FLOATING_PANEL_HEADER_PADDING_Y} ${a.FLOATING_PANEL_HEADER_PADDING_X}`,borderBottom:`1px solid ${a.FLOATING_PANEL_BORDER_COLOR}`,background:a.FLOATING_PANEL_SURFACE_2_COLOR},u={fontWeight:600},m={marginLeft:"auto",color:a.FLOATING_PANEL_MUTED_FG_COLOR,fontSize:a.FLOATING_PANEL_META_FONT_SIZE},L={display:"flex",alignItems:"center",gap:a.FLOATING_PANEL_CONTROLS_GAP},y={padding:a.FLOATING_PANEL_CONTENT_PADDING,overflow:"auto"},r=o.forwardRef(function({style:t,...n},l){const i=o.useMemo(()=>({...O,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})}),c=({style:e,...t})=>{const n=o.useMemo(()=>({...g,...e}),[e]);return s.jsx("div",{style:n,...t})},_=({style:e,...t})=>{const n=o.useMemo(()=>({...u,...e}),[e]);return s.jsx("span",{style:n,...t})},d=({style:e,...t})=>{const n=o.useMemo(()=>({...m,...e}),[e]);return s.jsx("span",{style:n,...t})},F=({style:e,...t})=>{const n=o.useMemo(()=>({...L,...e}),[e]);return s.jsx("div",{style:n,...t})},N=o.forwardRef(function({style:t,...n},l){const i=o.useMemo(()=>({...y,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})});r.displayName="FloatingPanelFrame";c.displayName="FloatingPanelHeader";_.displayName="FloatingPanelTitle";d.displayName="FloatingPanelMeta";F.displayName="FloatingPanelControls";N.displayName="FloatingPanelContent";exports.FloatingPanelContent=N;exports.FloatingPanelControls=F;exports.FloatingPanelFrame=r;exports.FloatingPanelHeader=c;exports.FloatingPanelMeta=d;exports.FloatingPanelTitle=_;
+//# sourceMappingURL=FloatingPanelFrame-DrYwgI9f.cjs.map

package/dist/FloatingPanelFrame-DrYwgI9f.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelFrame-DrYwgI9f.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  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"],"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":"kYAmBMA,EAAkC,CACtC,QAAS,OACT,cAAe,SACf,aAAcC,EAAAA,6BACd,OAAQ,aAAaC,EAAAA,2BAA2B,GAChD,WAAYC,EAAAA,6BACZ,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/GridLayout-DC7fCmcI.cjs

@@ -0,0 +1,2 @@
+"use strict";const g=require("react/jsx-runtime"),$t=require("react"),H=require("./FloatingPanelFrame-DrYwgI9f.cjs"),v=require("./styles-DcG3aIFx.cjs"),Wt=require("react-dom"),Q=require("./usePivot-C8q0pMgW.cjs");function Yt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const i=Yt($t),Bt=()=>{const t=new Map;return e=>{if(!e)return;const n=t.get(e);if(n!==void 0)return n;const o=t.size;return t.set(e,o),o}},Xt=Bt(),K=new Map,Vt=t=>{const e=`ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Xt(t.root)}`;if(K.has(e))return K.get(e);const n=new class{#t=new Map;#e=new IntersectionObserver(o=>{o.forEach(r=>{const s=this.#t.get(r.target);s&&s(r)})},t);observe(o,r){return this.#t.set(o,r),this.#e.observe(o),()=>{this.#t.delete(o),this.#e.unobserve(o)}}};return K.set(e,n),n},dt=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function Zt(t,{threshold:e=0,rootMargin:n="0px",root:o=null}){const[r,s]=i.useState(null);return i.useEffect(()=>{const c=t.current;return c?Vt({threshold:e,rootMargin:n,root:o}).observe(c,a=>{s({isIntersecting:a.isIntersecting,boundingClientRect:a.boundingClientRect,intersectionRatio:a.intersectionRatio,intersectionRect:a.intersectionRect,rootBounds:a.rootBounds,target:a.target,time:a.time})}):void 0},[t,e,n,o]),i.useMemo(()=>({isIntersecting:r?.isIntersecting??!1,boundingClientRect:r?.boundingClientRect??dt,intersectionRatio:r?.intersectionRatio??0,intersectionRect:r?.intersectionRect??dt,rootBounds:r?.rootBounds??null,target:r?.target??t.current,time:r?.time??0}),[r,t])}const ft={position:"fixed",inset:0,background:v.COLOR_DRAWER_BACKDROP},Ut={willChange:"transform"},gt={left:{top:0,bottom:0,left:0,transform:"translateX(-100%)"},right:{top:0,bottom:0,right:0,transform:"translateX(100%)"},top:{top:0,left:0,right:0,transform:"translateY(-100%)"},bottom:{bottom:0,left:0,right:0,transform:"translateY(100%)"}},Kt=(t,e,n)=>{if(t==="none")return;const o=e??v.DRAWER_TRANSITION_DURATION,r=n??v.DRAWER_TRANSITION_EASING;return`transform ${o} ${r}`},qt=(t,e)=>t?e:!1,Jt={marginLeft:"auto",border:"none",background:"transparent",cursor:"pointer",fontSize:v.DRAWER_CLOSE_BUTTON_FONT_SIZE},Qt=({header:t,dismissible:e,onClose:n})=>{if(!t)return null;const o=t.showCloseButton??!0,r=qt(e,o);return g.jsx(i.Activity,{mode:t?"visible":"hidden",children:g.jsxs(H.FloatingPanelHeader,{style:{padding:`${v.DRAWER_HEADER_PADDING_Y} ${v.DRAWER_HEADER_PADDING_X}`,gap:v.DRAWER_HEADER_GAP},children:[g.jsx(i.Activity,{mode:t?"visible":"hidden",children:g.jsx(H.FloatingPanelTitle,{children:t.title})}),g.jsx(i.Activity,{mode:r?"visible":"hidden",children:g.jsx("button",{style:Jt,onClick:n,"aria-label":"Close drawer",type:"button",children:"×"})})]})})},te=({header:t,dismissible:e,onClose:n,chrome:o,children:r})=>o?g.jsxs(H.FloatingPanelFrame,{style:{height:"100%",borderRadius:0},children:[g.jsx(Qt,{header:t,dismissible:e,onClose:n}),g.jsx(H.FloatingPanelContent,{style:{padding:v.DRAWER_CONTENT_PADDING,flex:1,display:"flex",flexDirection:"column"},children:r})]}):g.jsx(g.Fragment,{children:r}),It=({id:t,config:e,isOpen:n,onClose:o,children:r,zIndex:s,width:c,height:u,position:a})=>{const{dismissible:l=!0,header:p,chrome:f=!0,inline:m=!1,transitionMode:b="css",transitionDuration:C,transitionEasing:R}=e,P=i.useCallback((D,L)=>D||(L?L.left!==void 0?"left":L.right!==void 0?"right":L.top!==void 0?"top":L.bottom!==void 0?"bottom":"right":"right"),[])(e.anchor,a),_={left:"translateX(0)",right:"translateX(0)",top:"translateY(0)",bottom:"translateY(0)"},N=i.useMemo(()=>{const D=Kt(b,C,R),L={...Ut,...m?{position:"absolute"}:{position:"fixed"},...gt[P],transform:n?_[P]:gt[P].transform,transition:D};return s!==void 0&&(L.zIndex=s),c!==void 0&&(L.width=typeof c=="number"?`${c}px`:c),u!==void 0&&(L.height=typeof u=="number"?`${u}px`:u),L},[u,m,n,P,C,R,b,c,s]),y=p?.title??e.ariaLabel??"Drawer",T=i.useMemo(()=>{const D=m?{...ft,position:"absolute"}:ft,L=b==="none"?void 0:`opacity ${C??"220ms"} ease`;return{...D,opacity:n?1:0,pointerEvents:n?"auto":"none",transition:L,zIndex:s!==void 0?s-1:void 0}},[m,n,C,b,s]);return g.jsxs(g.Fragment,{children:[g.jsx("div",{style:T,onClick:l?o:void 0}),g.jsx("div",{"data-layer-id":t,"data-placement":P,style:N,role:"dialog","aria-modal":l?!0:void 0,"aria-hidden":n?void 0:!0,"aria-label":y,children:g.jsx(te,{header:p,dismissible:l,onClose:o,chrome:f,children:r})})]})},ee=(t,e)=>new Promise(n=>{let o=!1;const r=()=>{o||(o=!0,t.removeEventListener("transitionend",s),n())},s=c=>{c.target===t&&r()};t.addEventListener("transitionend",s),setTimeout(r,e+50)}),tt=async(t,e,n,o)=>{switch(e){case"none":t();return;case"css":t(),n&&await ee(n,o);return}},ne=t=>{const[e,n]=i.useState({}),o=i.useRef(t);o.current=t;const r=i.useCallback(async(a,l,p)=>{const{mode:f="none",element:m,duration:b=300}=p??{};await tt(()=>{n(I=>I[a]===l?I:{...I,[a]:l})},f,m?.current,b);const R=o.current;l?R?.onOpen?.(a):R?.onClose?.(a),R?.onTransitionEnd?.(a,l)},[]),s=i.useCallback(a=>e[a]??!1,[e]),c=i.useCallback((a,l)=>r(a,!0,l),[r]),u=i.useCallback((a,l)=>r(a,!1,l),[r]);return{state:s,open:c,close:u}},oe=t=>{if(!t)return 300;const e=t.match(/(\d+)/);return e?parseInt(e[1],10):300},re=t=>{const[e,n]=i.useState(()=>{const a={};return t.forEach(l=>{l.drawer&&(a[l.id]=l.drawer.defaultOpen??!1)}),a}),o=i.useMemo(()=>{const a=new Map;return t.forEach(l=>a.set(l.id,l)),a},[t]),r=i.useCallback(async(a,l,p)=>{const f=o.get(a);if(!f?.drawer)return;const m=p?.mode??f.drawer.transitionMode??"css",b=p?.duration??oe(f.drawer.transitionDuration),C=p?.element?.current;await tt(()=>{f.drawer?.open===void 0&&n(I=>I[a]===l?I:{...I,[a]:l}),f.drawer?.onStateChange?.(l)},m,C,b)},[o]),s=i.useCallback(a=>{const l=o.get(a);return l?.drawer?.open!==void 0?l.drawer.open:e[a]??!1},[o,e]),c=i.useCallback((a,l)=>r(a,!0,l),[r]),u=i.useCallback((a,l)=>r(a,!1,l),[r]);return{state:s,open:c,close:u}},Lt=({layers:t})=>{const e=re(t),n=i.useMemo(()=>t.filter(r=>r.drawer),[t]),o=i.useMemo(()=>{const r=new Map;return n.forEach(s=>{r.set(s.id,()=>e.close(s.id))}),r},[n,e.close]);return g.jsx(g.Fragment,{children:n.map(r=>{if(!r.drawer)return null;const s=e.state(r.id),c=o.get(r.id);return c?g.jsx(It,{id:r.id,config:r.drawer,isOpen:s,onClose:c,zIndex:r.zIndex,width:r.width,height:r.height,position:r.position,children:r.component},r.id):null})})},Pt=i.createContext(null),se=({value:t,children:e})=>g.jsx(Pt.Provider,{value:t,children:e}),et=()=>{const t=i.useContext(Pt);if(!t)throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");return t},Dt=i.createContext(null),ie=()=>{const t=i.useContext(Dt);if(!t)throw new Error("usePanelSystem must be used within a PanelSystemProvider.");return t},ae=({config:t,layers:e,style:n,children:o})=>{const r=i.useMemo(()=>{const c=new Map;return e.forEach(u=>{c.set(u.id,u)}),c},[e]),s=i.useMemo(()=>({config:t,style:n,layers:{defs:e,layerById:r}}),[t,n,e,r]);return g.jsx(Dt.Provider,{value:s,children:o})},yt=i.createContext(null),Tt=({layerId:t,children:e})=>{const n=i.useMemo(()=>({layerId:t}),[t]);return g.jsx(yt.Provider,{value:n,children:e})},ce=()=>{const t=i.useContext(yt);if(!t)throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");return t},pt=(t,e,n)=>{if(typeof t=="number"&&Number.isFinite(t))return t;throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`)},_t=(t,e)=>{if(!t)throw new Error(`Popup layer "${e}" must define position (left/top).`);return{left:pt(t.left,"left",e),top:pt(t.top,"top",e)}},$=t=>`${Math.round(t)}`,G=t=>{if(t!==void 0)return t?"yes":"no"},ue=(t,e,n,o,r)=>{const s={},c=_t(e,t);if(typeof n!="number"||typeof o!="number")throw new Error(`Popup layer "${t}" requires numeric width/height.`);s.width=$(n),s.height=$(o),s.left=$(c.left),s.top=$(c.top);const u=r?.features;if(u){const a=G(u.toolbar),l=G(u.menubar),p=G(u.location),f=G(u.status),m=G(u.resizable),b=G(u.scrollbars);a!==void 0&&(s.toolbar=a),l!==void 0&&(s.menubar=l),p!==void 0&&(s.location=p),f!==void 0&&(s.status=f),m!==void 0&&(s.resizable=m),b!==void 0&&(s.scrollbars=b)}return Object.entries(s).map(([a,l])=>`${a}=${l}`).join(",")},ht=(t,e,n,o,r)=>{const s=_t(n,e);if(typeof o!="number"||typeof r!="number")throw new Error(`Popup layer "${e}" requires numeric width/height.`);t.moveTo(Math.round(s.left),Math.round(s.top)),t.resizeTo(Math.round(o),Math.round(r))},le=({layer:t})=>{const e=t.floating;if(!e)throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);if((e.mode??"embedded")!=="popup")throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);const o=i.useRef(null),r=i.useRef(null),[s,c]=i.useState(!1);return i.useEffect(()=>{if(typeof window>"u")return;const u=ue(t.id,t.position,t.width,t.height,e.popup),a=e.popup?.name??t.id,l=de(a,u,{position:t.position,size:{width:t.width,height:t.height}},e.popup);if(!l)throw new Error(`Failed to open popup window for layer "${t.id}".`);const p=l;r.current=p,e.popup?.focus!==!1&&p.focus(),p.document.title||(p.document.title=t.id),p.document.body.innerHTML="";const f=p.document.createElement("div");f.dataset.layerId=t.id,p.document.body.appendChild(f),o.current=f,c(!0),ht(p,t.id,t.position,t.width,t.height);const m=()=>{r.current=null,o.current=null,c(!1)};return p.addEventListener("beforeunload",m),()=>{p.removeEventListener("beforeunload",m),e.popup?.closeOnUnmount!==!1&&p.close(),r.current=null,o.current=null,c(!1)}},[e.popup?.closeOnUnmount,e.popup?.features?.location,e.popup?.features?.menubar,e.popup?.features?.resizable,e.popup?.features?.scrollbars,e.popup?.features?.status,e.popup?.features?.toolbar,e.popup?.focus,e.popup?.name,t.id]),i.useEffect(()=>{const u=r.current;u&&ht(u,t.id,t.position,t.width,t.height)},[t.position?.left,t.position?.top,t.height,t.width,t.id]),!s||!o.current?null:Wt.createPortal(g.jsx(Tt,{layerId:t.id,children:t.component}),o.current)},de=(t,e,n,o)=>{const r=o?.createWindow;return r?r({name:t,features:e,bounds:n}):window.open("",t,e)},fe={marginLeft:"auto",border:"none",background:"transparent",cursor:"pointer",fontSize:"1.25rem",padding:"0.25rem 0.5rem",lineHeight:1},ge=({onClick:t})=>g.jsx(H.FloatingPanelControls,{children:g.jsx("button",{style:fe,onClick:t,"aria-label":"Close window",type:"button","data-drag-ignore":"true",children:"×"})}),pe=({header:t,draggable:e,onClose:n})=>{if(!t)return null;const o=t.showCloseButton??!1,r=e?{"data-drag-handle":"true"}:{},s=e?"grab":void 0;return g.jsxs(H.FloatingPanelHeader,{...r,style:{cursor:s},children:[t.title?g.jsx(H.FloatingPanelTitle,{children:t.title}):null,o?g.jsx(ge,{onClick:n}):null]})},he=({header:t,draggable:e,chrome:n,onClose:o,children:r})=>n?g.jsxs(H.FloatingPanelFrame,{style:{height:"100%",width:"100%"},children:[g.jsx(pe,{header:t,draggable:e,onClose:o}),g.jsx(H.FloatingPanelContent,{style:{flex:1,display:"flex",flexDirection:"column"},children:r})]}):g.jsx(g.Fragment,{children:r}),nt=({id:t,config:e,onClose:n,children:o})=>{const r=e.chrome??!1,s=e.draggable??!1,c=e.header?.title??e.ariaLabel??"Floating window";return g.jsx("div",{"data-floating-window":t,role:"dialog","aria-label":c,style:{height:"100%",width:"100%"},children:g.jsx(he,{header:e.header,draggable:s,chrome:r,onClose:n,children:o})})};nt.displayName="FloatingWindow";const Mt={position:"absolute",pointerEvents:"auto",boxSizing:"border-box",background:"transparent",border:"none"},me={...Mt,width:v.GRID_LAYER_CORNER_HIT_SIZE,height:v.GRID_LAYER_CORNER_HIT_SIZE,zIndex:2},be={...Mt,zIndex:1},we={"top-left":{top:0,left:0,transform:"translate(-50%, -50%)",cursor:"nwse-resize"},"top-right":{top:0,right:0,transform:"translate(50%, -50%)",cursor:"nesw-resize"},"bottom-left":{bottom:0,left:0,transform:"translate(-50%, 50%)",cursor:"nesw-resize"},"bottom-right":{bottom:0,right:0,transform:"translate(50%, 50%)",cursor:"nwse-resize"}},Ee={left:{top:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:v.GRID_LAYER_CORNER_HIT_SIZE,left:0,width:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateX(-50%)",cursor:"ew-resize"},right:{top:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:v.GRID_LAYER_CORNER_HIT_SIZE,right:0,width:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateX(50%)",cursor:"ew-resize"},top:{left:v.GRID_LAYER_CORNER_HIT_SIZE,right:v.GRID_LAYER_CORNER_HIT_SIZE,top:0,height:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateY(-50%)",cursor:"ns-resize"},bottom:{left:v.GRID_LAYER_CORNER_HIT_SIZE,right:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:0,height:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateY(50%)",cursor:"ns-resize"}},ve=[{key:"top-left",variant:"corner",horizontal:"left",vertical:"top"},{key:"top-right",variant:"corner",horizontal:"right",vertical:"top"},{key:"bottom-left",variant:"corner",horizontal:"left",vertical:"bottom"},{key:"bottom-right",variant:"corner",horizontal:"right",vertical:"bottom"},{key:"left",variant:"edge",horizontal:"left"},{key:"right",variant:"edge",horizontal:"right"},{key:"top",variant:"edge",vertical:"top"},{key:"bottom",variant:"edge",vertical:"bottom"}],Se=({layerId:t,onPointerDown:e})=>g.jsx(g.Fragment,{children:ve.map(n=>{const o=n.variant==="corner"?me:be,r=n.variant==="corner"?we[n.key]:Ee[n.key],s={...o,...r},c=n.variant==="corner"?{"data-resize-corner":n.key}:{"data-resize-edge":n.key};return g.jsx("div",{role:"presentation","aria-hidden":"true",style:s,...c,"data-layer-id":t,onPointerDown:u=>e(n,u)},n.key)})}),Ce=({pivot:t})=>{const{Outlet:e}=Q.usePivot({items:t.items,activeId:t.activeId,defaultActiveId:t.defaultActiveId,onActiveChange:t.onActiveChange,transitionMode:t.transitionMode});return g.jsx(e,{})},Ht=i.memo(({layer:t,onClose:e})=>{const n=t.pivot?g.jsx(Ce,{pivot:t.pivot}):g.jsx(g.Fragment,{children:t.component});return t.floating?.chrome?g.jsx(nt,{id:t.id,config:t.floating,onClose:e,children:n}):n});Ht.displayName="LayerContentRenderer";const Nt=i.memo(({layerId:t,isResizable:e,onPointerDown:n})=>e?g.jsx(Se,{layerId:t,onPointerDown:n}):null);Nt.displayName="LayerResizeHandles";const Re=t=>t?"auto":"hidden",At=i.memo(({layer:t,handleLayerPointerDown:e})=>{const{getLayerRenderState:n}=et(),{style:o,isResizable:r,isResizing:s,onResizeHandlePointerDown:c}=n(t),u=i.useMemo(()=>{const p={};return t.gridArea&&(p.gridArea=t.gridArea),t.gridRow&&(p.gridRow=t.gridRow),t.gridColumn&&(p.gridColumn=t.gridColumn),p},[t.gridArea,t.gridRow,t.gridColumn]),a=i.useMemo(()=>{const p=Re(t.scrollable),f={...o,...u,minWidth:0,minHeight:0,overflow:p};return r?{...f,position:"relative"}:f},[o,u,r,t.scrollable]),l=i.useCallback(()=>{t.floating?.onClose?.()},[t.floating]);return g.jsxs("div",{"data-layer-id":t.id,"data-draggable":!!t.floating?.draggable,"data-resizable":r,"data-resizing":s,style:a,onPointerDown:e,children:[g.jsx(Tt,{layerId:t.id,children:g.jsx(Ht,{layer:t,onClose:l})}),g.jsx(Nt,{layerId:t.id,isResizable:r,onPointerDown:c})]})});At.displayName="EmbeddedLayer";const ze=({layers:t})=>{const{handleLayerPointerDown:e}=et();return g.jsx(g.Fragment,{children:t.map(n=>{const o=n.floating?.mode??"embedded";return n.floating&&o==="popup"?g.jsx(le,{layer:n},n.id):g.jsx(At,{layer:n,handleLayerPointerDown:e},n.id)})})};function k(t){const e=i.useRef(t);return e.current=t,i.useCallback((...n)=>{const o=e.current;if(o)return o(...n)},[])}function q(t,e){const n=k(e.onMove),o=k(e.onUp),r=k(e.onCancel);i.useEffect(()=>{if(t)return e.onMove&&document.addEventListener("pointermove",n,{passive:!1}),e.onUp&&document.addEventListener("pointerup",o),e.onCancel&&document.addEventListener("pointercancel",r),()=>{e.onMove&&document.removeEventListener("pointermove",n),e.onUp&&document.removeEventListener("pointerup",o),e.onCancel&&document.removeEventListener("pointercancel",r)}},[t,e.onMove,e.onUp,e.onCancel,n,o,r])}function xe(t,e,n){i.useEffect(()=>{const o=t.current;if(!(!e||!o||n===void 0))return o.setPointerCapture(n),()=>{o.hasPointerCapture&&o.hasPointerCapture(n)&&o.releasePointerCapture(n)}},[t,e,n])}function Ie(t,e,n=["pointerdown","pointermove","pointerup"]){i.useEffect(()=>{const o=t.current;if(!e||!o)return;const r=s=>{s.preventDefault()};return n.forEach(s=>{o.addEventListener(s,r,{passive:!1})}),()=>{n.forEach(s=>{o.removeEventListener(s,r)})}},[t,e,n])}function Le(t,e,n){const{onMove:o,onUp:r,onCancel:s,pointerId:c,capturePointer:u=!0,preventDefaults:a=!0}=n;q(e,{onMove:o,onUp:r,onCancel:s}),xe(t,e?u:!1,c),Ie(t,e?a:!1)}const kt=t=>{const e=i.useRef(null),n=i.useRef(null),o=i.useRef(0),[r,s]=i.useState(!1),c=k(f=>{t.onResize?.(f)}),u=i.useCallback(f=>t.axis==="x"?f.clientX:f.clientY,[t.axis]),a=i.useCallback(f=>{f.preventDefault(),e.current=f.currentTarget,n.current=f.pointerId,o.current=u(f),s(!0)},[u]),l=i.useCallback(f=>{const m=u(f),b=m-o.current;b!==0&&(o.current=m,c(b))},[u,c]),p=i.useCallback(()=>{s(!1),n.current=null},[]);return Le(e,r,{onMove:l,onUp:p,pointerId:n.current??void 0,capturePointer:!0,preventDefaults:!1}),{ref:e,onPointerDown:a,isDragging:r}},Pe=({element:t,component:e})=>i.forwardRef(({children:n,...o},r)=>t?i.cloneElement(t,{...o,ref:r},n??t.props.children):e?g.jsx(e,{...o,ref:r,children:n}):g.jsx("div",{...o,ref:r,children:n}));function jt({element:t,component:e}){return i.useMemo(()=>Pe({element:t,component:e}),[e,t])}const De={position:"absolute",zIndex:v.RESIZE_HANDLE_Z_INDEX},ye={vertical:{width:v.RESIZE_HANDLE_THICKNESS,height:"100%",top:0,cursor:"col-resize"},horizontal:{width:"100%",height:v.RESIZE_HANDLE_THICKNESS,left:0,cursor:"row-resize"}},Te={idle:v.COLOR_RESIZE_HANDLE_IDLE,hovered:v.COLOR_RESIZE_HANDLE_HOVER,dragging:v.COLOR_RESIZE_HANDLE_ACTIVE},Gt=({direction:t,onResize:e,component:n,element:o,children:r})=>{const s=t==="vertical"?"x":"y",{ref:c,isDragging:u,onPointerDown:a}=kt({axis:s,onResize:e}),[l,p]=i.useState(!1),f=i.useCallback(()=>{p(!0)},[]),m=i.useCallback(()=>{p(!1)},[]),b=jt({element:o,component:n}),C=i.useMemo(()=>u?"dragging":l?"hovered":"idle",[u,l]),R=i.useMemo(()=>({...De,...ye[t],backgroundColor:Te[C],touchAction:"none"}),[t,C]);return g.jsx(b,{ref:c,style:R,role:"separator","aria-orientation":t,"aria-hidden":void 0,"data-resize-handle":"true","data-direction":t,"data-is-dragging":u?"true":void 0,onPointerDown:a,onPointerEnter:f,onPointerLeave:m,children:r})},mt={position:"absolute",pointerEvents:"auto"},bt=({direction:t,trackIndex:e,align:n,gap:o,span:r,onResize:s})=>{const c=t==="col"?"vertical":"horizontal",u=i.useCallback(p=>{const f=n==="start"?-p:p;s(t,e,f)},[n,t,e,s]),a=i.useMemo(()=>t==="col"?{gridColumn:`${e+1} / ${e+2}`,gridRow:`${r.start} / ${r.end}`}:{gridRow:`${e+1} / ${e+2}`,gridColumn:`${r.start} / ${r.end}`},[t,e,r]),l=i.useMemo(()=>{const f=Math.max(0,o)/2+v.GRID_HANDLE_THICKNESS/2;return t==="col"?{...mt,width:v.GRID_HANDLE_THICKNESS,height:"100%",top:0,bottom:0,...n==="start"?{left:-f}:{right:-f}}:{...mt,width:"100%",height:v.GRID_HANDLE_THICKNESS,left:0,right:0,...n==="start"?{top:-f}:{bottom:-f}}},[n,t,o]);return g.jsx("div",{"data-resizable":"true",style:{...a,position:"relative",pointerEvents:"none"},children:g.jsx("div",{"data-direction":c,"data-align":n,"data-handle":"true",style:l,children:g.jsx(Gt,{direction:c,onResize:u})})})},_e=t=>{const e=new Map;t.forEach((o,r)=>{o.forEach((s,c)=>{if(!s||s===".")return;const u=e.get(s);if(u){const l={rowStart:Math.min(u.rowStart,r),rowEnd:Math.max(u.rowEnd,r),colStart:Math.min(u.colStart,c),colEnd:Math.max(u.colEnd,c)};e.set(s,l);return}const a={rowStart:r,rowEnd:r,colStart:c,colEnd:c};e.set(s,a)})});const n=new Map;return e.forEach((o,r)=>{const s=o.rowStart+1,c=o.rowEnd+2,u=o.colStart+1,a=o.colEnd+2,l={gridArea:r,gridRow:`${s} / ${c}`,gridColumn:`${u} / ${a}`};n.set(r,l)}),n},Me=(t,e)=>{if((t.positionMode??"grid")!=="grid")return t;const o=t.gridArea??t.id,r=e.get(o);if(!r)return t;const s=!t.gridArea,c=!t.gridRow,u=!t.gridColumn;return!s&&!c&&!u?t:{...t,gridArea:s?r.gridArea:t.gridArea,gridRow:c?r.gridRow:t.gridRow,gridColumn:u?r.gridColumn:t.gridColumn}},He=(t,e)=>{const n=i.useMemo(()=>_e(t.areas),[t.areas]),o=i.useMemo(()=>e.map(u=>Me(u,n)),[e,n]),r=i.useMemo(()=>o.filter(u=>u.visible!==!1),[o]),s=i.useMemo(()=>r.filter(u=>!u.drawer),[r]),c=i.useMemo(()=>{const u=new Map;return o.forEach(a=>{u.set(a.id,a)}),u},[o]);return{normalizedLayers:o,visibleLayers:r,regularLayers:s,layerById:c}},Ne=t=>{if(!t)return{rowGap:0,columnGap:0};const e=t.split(/\s+/).map(o=>o.trim()).filter(Boolean),n=o=>{const r=o.match(/^(-?\d+(?:\.\d+)?)px$/);return r?Number.parseFloat(r[1]):0};if(e.length===1){const o=n(e[0]);return{rowGap:o,columnGap:o}}return{rowGap:n(e[0]),columnGap:n(e[1])}},Ae=(t,e)=>{if(!t)return[];const n=getComputedStyle(t);return(e==="col"?n.gridTemplateColumns:n.gridTemplateRows).split(/\s+/).map(r=>parseFloat(r)).filter(r=>!Number.isNaN(r))},ot=(t,e=Number.NEGATIVE_INFINITY,n=Number.POSITIVE_INFINITY)=>Math.min(Math.max(t,e),n),ke=(t,e)=>typeof t!="number"||!Number.isFinite(t)?e:t,X=(t,e)=>`${t}-${e}`,je=(t,e,n,o)=>{const r=X(n,o),s=e[r];return s!==void 0?`minmax(${t.minSize??0}px, ${s}px)`:t.size},wt=(t,e,n)=>t.map((o,r)=>je(o,e,n,r)).join(" "),W=(t,e)=>t.reduce((n,o,r)=>(o.resizable&&o.size.endsWith("px")&&(n[X(e,r)]=parseInt(o.size,10)),n),{}),Ge=({trackSizes:t,track:e,direction:n,trackIndex:o,containerRef:r})=>{const s=X(n,o),c=t[s];if(c!==void 0)return c;const a=Ae(r?.current??null,n)[o];return a!==void 0&&a>0?a:e.size.endsWith("px")?Number.parseInt(e.size,10):300},Fe=(t,e)=>t.reduce((n,o,r)=>r===e?n:o.size.includes("fr")?n+100:n+(o.minSize??50),0),Oe=({track:t,tracks:e,trackIndex:n,direction:o,containerRef:r,gapSizes:s})=>{if(!r?.current)return t.maxSize;const c=o==="col"?r.current.offsetWidth:r.current.offsetHeight,u=Fe(e,n),a=e.length-1,l=o==="col"?s.columnGap:s.rowGap,p=a*l,f=c-u-p;return t.maxSize!==void 0?Math.min(t.maxSize,f):f},$e=(t,e,n)=>ot(t,e??Number.NEGATIVE_INFINITY,n??Number.POSITIVE_INFINITY),Et=(t,e)=>{const n=t.length,o=[];for(let c=0;c<n;c++){const u=t[c],a=u[e],l=u[e+1];a!==l&&o.push(c)}if(o.length===0)return{start:1,end:n+1};const r=Math.min(...o),s=Math.max(...o);return{start:r+1,end:s+2}},vt=(t,e)=>{const n=t[e],o=t[e+1],r=n?.length??0,s=[];for(let a=0;a<r;a++){const l=n?.[a],p=o?.[a];l!==p&&s.push(a)}if(s.length===0)return{start:1,end:r+1};const c=Math.min(...s),u=Math.max(...s);return{start:c+1,end:u+2}},We=(t,e)=>{if(t.length===0)return[];const n=e.length;if(t.length===1)return t[0]?.resizable?[{trackIndex:0,align:"end",span:{start:1,end:n+1}}]:[];const o=[];return Array.from({length:t.length-1},(s,c)=>c).forEach(s=>{const c=t[s];if(t[s+1]?.resizable){const a=Et(e,s);o.push({trackIndex:s+1,align:"start",span:a});return}if(c?.resizable){const a=Et(e,s);o.push({trackIndex:s,align:"end",span:a})}}),o},Ye=(t,e)=>{if(t.length===0)return[];const n=e[0]?.length??0;if(t.length===1)return t[0]?.resizable?[{trackIndex:0,align:"end",span:{start:1,end:n+1}}]:[];const o=[];return Array.from({length:t.length-1},(s,c)=>c).forEach(s=>{const c=t[s];if(t[s+1]?.resizable){const a=vt(e,s);o.push({trackIndex:s+1,align:"start",span:a});return}if(c?.resizable){const a=vt(e,s);o.push({trackIndex:s,align:"end",span:a})}}),o},Be=t=>t!==void 0?{gap:t}:{},Xe=(t,e)=>{const n=Object.keys(e),o={};for(const p of n)o[p]=t[p]??e[p];const r=Object.keys(t),s=r.length!==n.length,c=r.some(p=>!Object.prototype.hasOwnProperty.call(o,p)),u=s?!0:c,a=n.some(p=>t[p]!==o[p]);return(u?!0:a)?o:null},Ve=(t,e,n)=>{const[o,r]=i.useState(()=>({...W(t.columns,"col"),...W(t.rows,"row")}));Q.useIsomorphicLayoutEffect(()=>{const f={...W(t.columns,"col"),...W(t.rows,"row")};r(m=>Xe(m,f)??m)},[t.columns,t.rows]);const s=i.useMemo(()=>t.areas.map(f=>`"${f.join(" ")}"`).join(" "),[t.areas]),c=i.useMemo(()=>Ne(t.gap),[t.gap]),u=i.useMemo(()=>We(t.columns,t.areas),[t.columns,t.areas]),a=i.useMemo(()=>Ye(t.rows,t.areas),[t.rows,t.areas]),l=i.useMemo(()=>({...t.style,...e,gridTemplateAreas:s,gridTemplateRows:wt(t.rows,o,"row"),gridTemplateColumns:wt(t.columns,o,"col"),...Be(t.gap)}),[s,t.columns,t.gap,t.rows,t.style,e,o]),p=i.useCallback((f,m,b)=>{const C=f==="row"?t.rows:t.columns,R=C[m];if(!R||!R.resizable)return;const I=Ge({trackSizes:o,track:R,direction:f,trackIndex:m,containerRef:n}),P=Oe({track:R,tracks:C,trackIndex:m,direction:f,containerRef:n,gapSizes:c}),_=X(f,m);r(N=>{const y=I+b,T=$e(y,R.minSize,P);return{...N,[_]:T}})},[t.columns,t.rows,o,n,c]);return{columnHandles:u,rowHandles:a,gapSizes:c,gridStyle:l,handleResize:p}},Ze=t=>t.positionMode?t.positionMode:t.floating?(t.floating.mode??"embedded")==="embedded"?"absolute":"relative":"grid",Ue=t=>({position:t==="grid"?"relative":t}),Ke=(t,e)=>e!=="grid"?{}:{gridArea:t.gridArea,gridRow:t.gridRow,gridColumn:t.gridColumn},qe=t=>t?{top:t.top,right:t.right,bottom:t.bottom,left:t.left}:{},Je=t=>t!==void 0?{zIndex:t}:{},Qe=(t,e)=>({width:t,height:e}),tn=(t,e)=>t.pointerEvents!==void 0?typeof t.pointerEvents=="boolean"?{pointerEvents:t.pointerEvents?"auto":"none"}:{pointerEvents:t.pointerEvents}:e==="absolute"||e==="fixed"?{pointerEvents:"auto"}:{},en=t=>t.floating?t.floating.position??t.floating.defaultPosition??t.position:t.position,nn=t=>{if(t.floating){const e=t.floating.size??t.floating.defaultSize;if(e)return{width:e.width,height:e.height}}return{width:t.width,height:t.height}},on=t=>t.floating?.zIndex!==void 0?t.floating.zIndex:t.zIndex,rn=t=>{const e=Ze(t),n=en(t),o=nn(t),r=on(t);return{...t.style,...Ue(e),...Ke(t,e),...qe(n),...Je(r),...Qe(o.width,o.height),...tn(t,e)}},sn=t=>{const e=t.floating;return e?e.mode??"embedded":null},j=t=>sn(t)!=="embedded"?null:t.floating??null,St=t=>t instanceof HTMLElement?["INPUT","TEXTAREA","SELECT","BUTTON"].includes(t.tagName):!1,Ct=(t,e,n)=>{const o=e??Number.NEGATIVE_INFINITY,r=n??Number.POSITIVE_INFINITY;return ot(t,o,r)},Rt=(t,e,n)=>{if(typeof t=="number"&&Number.isFinite(t))return t;throw new Error(`Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`)},zt=t=>{const e=j(t);if(!e)throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);const n=e.position??e.defaultPosition??t.position;if(!n)throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);return{left:Rt(n.left,"left",t.id),top:Rt(n.top,"top",t.id)}},an=t=>{const e=j(t);return e?e.constraints??{}:{}},cn=(t,e,n)=>t?t==="left"?e-n:e+n:e,un=(t,e,n)=>t?t==="top"?e-n:e+n:e,ln=(t,e,n)=>!t||t==="right"?e:e+n,dn=(t,e,n)=>!t||t==="bottom"?e:e+n,J=(t,e)=>t?t.dataset.layerId===e?t:J(t.parentElement,e):null,rt=(t,e,n)=>!t||n?.(t)?null:e(t)?t:rt(t.parentElement,e,n),fn=t=>t instanceof HTMLElement?rt(t,e=>e.dataset.dragHandle==="true",e=>e.dataset.dragIgnore==="true"):null,xt=t=>t instanceof HTMLElement?rt(t,e=>e.dataset.resizeCorner!==void 0||e.dataset.resizeEdge!==void 0)!==null:!1,Y=t=>{const e=j(t);return e?e.resizable===!0:!1},B=t=>{if(!j(t))return null;const n=hn(t);if(!n)throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);return{width:n.width,height:n.height}},gn=(t,e,n)=>{const o=t.filter(Y).reduce((f,m)=>{if(n===m.id){const C=e[m.id];if(C)return f[m.id]=C,f}const b=B(m);return b&&(f[m.id]=b),f},{}),r=Object.keys(e),s=Object.keys(o),c=r.length!==s.length,u=r.some(f=>!Object.prototype.hasOwnProperty.call(o,f)),a=c?!0:u,l=s.some(f=>{const m=e[f],b=o[f];return!m||!b?!0:m.width!==b.width||m.height!==b.height});return{sizes:o,changed:a?!0:l}},pn=({layers:t,layerById:e,isRootLevel:n})=>{const[o,r]=i.useState(null),[s,c]=i.useState(null),[u,a]=i.useState({}),[l,p]=i.useState({}),f=i.useRef(null),m=i.useRef(null),b=k((h,d)=>{e.get(h)?.floating?.onMove?.(d)}),C=k((h,d)=>{e.get(h)?.floating?.onResize?.(d)});Q.useIsomorphicLayoutEffect(()=>{const{sizes:h,changed:d}=gn(t,l,s);d&&p(h)},[t,s]);const R=i.useCallback((h,d,w,E)=>{const S=zt(d),x=u[h]??{x:0,y:0},z={pointerStartX:E.clientX,pointerStartY:E.clientY,initialTranslationX:x.x,initialTranslationY:x.y,baseLeft:S.left,baseTop:S.top,layerId:h,pointerId:E.pointerId,target:w};if(z.target.setPointerCapture)try{z.target.setPointerCapture(z.pointerId)}catch{}f.current=z,r(h)},[u]),I=i.useCallback(h=>{const d=h.target,w=fn(d);if(!w)return;const E=w.closest("[data-layer-id]")?.getAttribute("data-layer-id");if(!E)return;const S=e.get(E);if(!S)return;const x=j(S);if(!(!x||x.draggable!==!0)&&!St(h.target)&&!xt(h.target)&&w){const z=J(w,E);if(!z)return;R(E,S,z,h);return}},[R,e]),P=i.useCallback((h,d)=>{const w=e.get(h),E=w?j(w):null;if(!w||!E||E.draggable!==!0||St(d.target)||xt(d.target))return;const S=J(d.currentTarget,h);S&&R(h,w,S,d)},[R,e]),_=i.useCallback((h,d,w)=>{const E=e.get(h);if(!E||!Y(E))return;const S=l[h]??B(E);if(!S)return;const x=zt(E),z=an(E),M=u[h]??{x:0,y:0};if(w.stopPropagation(),w.preventDefault(),w.currentTarget.setPointerCapture)try{w.currentTarget.setPointerCapture(w.pointerId)}catch{}m.current={layerId:h,pointerId:w.pointerId,horizontalEdge:d.horizontal,verticalEdge:d.vertical,startX:w.clientX,startY:w.clientY,startWidth:S.width,startHeight:S.height,startPosition:M,baseLeft:x.left,baseTop:x.top,minWidth:z.minWidth,maxWidth:z.maxWidth,minHeight:z.minHeight,maxHeight:z.maxHeight,target:w.currentTarget},c(h)},[e,u,l]),N=i.useCallback(h=>{const d=f.current;if(!d)return;const w=h.clientX-d.pointerStartX,E=h.clientY-d.pointerStartY,S={x:d.initialTranslationX+w,y:d.initialTranslationY+E};a(x=>({...x,[d.layerId]:S})),b(d.layerId,{left:d.baseLeft+S.x,top:d.baseTop+S.y})},[b]),y=i.useCallback(h=>{const d=m.current;if(!d||d.pointerId!==h.pointerId||!e.get(d.layerId))return;const E=h.clientX-d.startX,S=h.clientY-d.startY,x=cn(d.horizontalEdge,d.startWidth,E),z=un(d.verticalEdge,d.startHeight,S),M=Ct(x,d.minWidth,d.maxWidth),A=Ct(z,d.minHeight,d.maxHeight),F=d.startWidth-M,V=d.startHeight-A,ct=ln(d.horizontalEdge,d.startPosition.x,F),Ot=dn(d.verticalEdge,d.startPosition.y,V),Z=l[d.layerId],ut={width:M,height:A};(!Z||Z.width!==M||Z.height!==A)&&(p(U=>({...U,[d.layerId]:ut})),C(d.layerId,ut));const lt=u[d.layerId]??{x:0,y:0},O={x:ct,y:Ot};(lt.x!==O.x||lt.y!==O.y)&&(a(U=>({...U,[d.layerId]:O})),b(d.layerId,{left:d.baseLeft+O.x,top:d.baseTop+O.y}))},[e,u,l,b,C]),T=i.useCallback(h=>{const d=f.current;if(d){if(d.pointerId===h.pointerId&&d.target.releasePointerCapture)try{d.target.releasePointerCapture(d.pointerId)}catch{}f.current=null}r(null)},[]),D=i.useCallback(h=>{const d=m.current;if(d){if(d.pointerId===h.pointerId&&d.target.releasePointerCapture)try{d.target.releasePointerCapture(d.pointerId)}catch{}m.current=null}c(null)},[]);q(o!==null,{onMove:N,onUp:T,onCancel:T}),q(s!==null,{onMove:y,onUp:D,onCancel:D});const L=i.useCallback(h=>{const d=rn(h),w=j(h);if(!w||w.draggable!==!0)return d;const E=u[h.id],S=o===h.id,x=s===h.id,z=E?{transform:`translate(${E.x}px, ${E.y}px)`}:{},M=l[h.id],A=Y(h)?B(h):null,F=M??A,V=F?{width:`${F.width}px`,height:`${F.height}px`}:{};return{...d,...V,...z,...S||x?{cursor:"grabbing"}:{}}},[o,u,l,s]),st=i.useCallback(h=>{if(!Y(h))return{isResizable:!1};const w=l[h.id],E=B(h);return(w??E)!==null?{isResizable:!0,onPointerDown:(M,A)=>{_(h.id,M,A)}}:{isResizable:!1}},[_,l]),it=i.useCallback(h=>{const{isResizable:d,onPointerDown:w}=st(h),E=L(h),S=s===h.id;return{style:E,isResizable:d,isResizing:S,onResizeHandlePointerDown:(x,z)=>{w&&w(x,z)}}},[L,st,s]),at=i.useCallback(h=>({"data-drag-handle":"true",role:"button","aria-roledescription":"Drag handle","aria-label":"Drag layer",onPointerDown:d=>{P(h,d)}}),[P]);return{providerValue:i.useMemo(()=>({handleLayerPointerDown:I,getLayerRenderState:it,getLayerHandleProps:at,isRootLevel:n}),[at,it,I,n]),draggingLayerId:o,resizingLayerId:s}},hn=t=>{if(t.floating){const e=t.floating.size??t.floating.defaultSize;if(e)return{width:e.width,height:e.height}}if(typeof t.width=="number"&&typeof t.height=="number")return{width:t.width,height:t.height}},Ft={display:"grid",width:"100%",height:"100%",overflow:"hidden"},mn={touchAction:"none",WebkitTouchCallout:"none",WebkitUserSelect:"none",userSelect:"none"},bn={...Ft,height:"auto",minHeight:"100%"},wn=t=>t?bn:Ft,En=({config:t,layers:e,style:n,root:o=!1})=>{const r=i.useRef(null),{isIntersecting:s}=Zt(r,{threshold:0});return g.jsx(ae,{config:t,layers:e,style:n,children:g.jsx(vn,{gridRef:r,isIntersecting:s,isRoot:o})})},vn=({gridRef:t,isIntersecting:e,isRoot:n})=>{const{config:o,style:r,layers:s}=ie(),{normalizedLayers:c,visibleLayers:u,regularLayers:a,layerById:l}=He(o,s.defs),{columnHandles:p,rowHandles:f,gapSizes:m,gridStyle:b,handleResize:C}=Ve(o,r,t),{providerValue:R,draggingLayerId:I,resizingLayerId:P}=pn({layers:c,layerById:l,isRootLevel:n}),_=I?!0:!!P,N=i.useMemo(()=>({...wn(n),...b,..._?mn:{}}),[b,_,n]);return g.jsxs(g.Fragment,{children:[g.jsxs("div",{ref:t,style:N,"data-dragging":!!I,"data-resizing":!!P,"data-visible":e,children:[g.jsx(se,{value:R,children:g.jsx(ze,{layers:a})}),p.map(({trackIndex:y,align:T,span:D})=>g.jsx(bt,{direction:"col",trackIndex:y,align:T,gap:m.columnGap,span:D,onResize:C},`col-${y}:${T}`)),f.map(({trackIndex:y,align:T,span:D})=>g.jsx(bt,{direction:"row",trackIndex:y,align:T,gap:m.rowGap,span:D,onResize:C},`row-${y}:${T}`))]}),g.jsx(Lt,{layers:u})]})};exports.Drawer=It;exports.DrawerLayers=Lt;exports.FloatingWindow=nt;exports.GridLayout=En;exports.ResizeHandle=Gt;exports.clampNumber=ot;exports.runTransition=tt;exports.toFiniteNumberOr=ke;exports.useEffectEvent=k;exports.useElementComponentWrapper=jt;exports.useGridLayoutContext=et;exports.useLayerInstance=ce;exports.useResizeDrag=kt;exports.useTransitionState=ne;
+//# sourceMappingURL=GridLayout-DC7fCmcI.cjs.map