react-panel-layout 0.6.1 → 0.7.0

package/dist/components/window/drawerRevealAnimationUtils.d.ts

@@ -0,0 +1,212 @@
+/**
+ * @file Drawer reveal animation utilities
+ *
+ * Provides transform calculations for reveal-mode drawer animations.
+ * The reveal mode creates a "pull out" effect where:
+ * - Drawer slides from partially hidden (-30%) to fully visible (0%)
+ * - Content slides away to reveal the drawer behind it
+ */
+import type * as React from "react";
+import type { DrawerPlacement } from "./drawerStyles.js";
+/**
+ * Percentage offset for drawer when closed (creates "pull out" effect).
+ */
+export declare const DRAWER_CLOSED_OFFSET_PERCENT = 30;
+/**
+ * Default animation duration in milliseconds.
+ */
+export declare const DEFAULT_ANIMATION_DURATION = 300;
+/**
+ * Placement configuration for transforms.
+ */
+export type PlacementConfig = {
+    axis: "X" | "Y";
+    sign: 1 | -1;
+};
+/**
+ * Get placement configuration for a drawer placement.
+ */
+export declare function getPlacementConfig(placement: DrawerPlacement): PlacementConfig;
+/**
+ * Transform values for reveal drawer animation.
+ */
+export type RevealDrawerTransform = {
+    /** Drawer offset in percentage */
+    drawerOffsetPercent: number;
+    /** Content offset in pixels */
+    contentOffsetPx: number;
+};
+/**
+ * Compute progress from swipe displacement.
+ * Returns 0 (closed) to 1 (open).
+ *
+ * @param displacement - Current swipe displacement in pixels
+ * @param drawerSize - Size of the drawer in pixels
+ * @param isOpening - Whether the gesture is opening the drawer
+ * @param isClosing - Whether the gesture is closing the drawer
+ * @returns Progress value between 0 and 1
+ */
+export declare function computeSwipeProgress(displacement: number, drawerSize: number, isOpening: boolean, isClosing: boolean): number;
+/**
+ * Compute reveal drawer transforms from progress.
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param drawerSize - Size of the drawer in pixels
+ * @param placement - Drawer placement
+ * @returns Transform values for drawer and content
+ */
+export declare function computeRevealTransform(progress: number, drawerSize: number, placement: DrawerPlacement): RevealDrawerTransform;
+/**
+ * Build drawer transform string from progress.
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param placement - Drawer placement
+ * @returns CSS transform string
+ */
+export declare function buildDrawerTransformString(progress: number, placement: DrawerPlacement): string;
+/**
+ * Build content transform string from progress.
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param drawerSize - Size of the drawer in pixels
+ * @param placement - Drawer placement
+ * @returns CSS transform string
+ */
+export declare function buildContentTransformString(progress: number, drawerSize: number, placement: DrawerPlacement): string;
+/**
+ * Stacking context styles for content element.
+ * Applied during reveal animation to ensure proper z-index layering.
+ */
+export type StackingContextStyles = {
+    position: string;
+    zIndex: string;
+    background: string;
+};
+/**
+ * Default stacking context styles.
+ */
+export declare const STACKING_CONTEXT_STYLES: StackingContextStyles;
+/**
+ * Apply stacking context styles to an element.
+ */
+export declare function applyStackingContext(element: HTMLElement): void;
+/**
+ * Clear stacking context styles from an element.
+ */
+export declare function clearStackingContext(element: HTMLElement): void;
+/**
+ * Apply overflow hidden to body to prevent scrolling during drawer open.
+ * This prevents both horizontal and vertical scrolling of the body
+ * while the drawer is open or animating.
+ */
+export declare function applyOverflowHidden(): void;
+/**
+ * Clear overflow hidden from body.
+ */
+export declare function clearOverflowHidden(): void;
+/**
+ * Get the content element to transform.
+ *
+ * @param inline - Whether drawer is inline mode
+ * @param gridRef - Grid container ref for inline mode
+ * @returns The content element or null
+ */
+export declare function getContentElement(inline: boolean, gridRef?: React.RefObject<HTMLElement | null>): HTMLElement | null;
+/**
+ * Tracked position for drawer and content elements in pixels.
+ */
+export type RevealPositionPx = {
+    /** Drawer offset in pixels */
+    drawerPx: number;
+    /** Content offset in pixels */
+    contentPx: number;
+};
+/**
+ * Compute drawer offset in pixels from progress.
+ *
+ * For reveal mode, the drawer animates from an offset position to 0.
+ * The offset is DRAWER_CLOSED_OFFSET_PERCENT of the drawer's own size.
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param drawerSize - Drawer size in pixels
+ * @param placement - Drawer placement
+ * @returns Drawer offset in pixels
+ */
+export declare function computeDrawerOffsetPx(progress: number, drawerSize: number, placement: DrawerPlacement): number;
+/**
+ * Compute content offset in pixels from progress.
+ *
+ * Content moves from 0 (closed) to ±drawerSize (open).
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param drawerSize - Drawer size in pixels
+ * @param placement - Drawer placement
+ * @returns Content offset in pixels
+ */
+export declare function computeContentOffsetPx(progress: number, drawerSize: number, placement: DrawerPlacement): number;
+/**
+ * Compute both drawer and content offsets from progress.
+ *
+ * @param progress - Animation progress (0 = closed, 1 = open)
+ * @param drawerSize - Drawer size in pixels
+ * @param placement - Drawer placement
+ * @returns Position in pixels for both elements
+ */
+export declare function computePositionFromProgress(progress: number, drawerSize: number, placement: DrawerPlacement): RevealPositionPx;
+/**
+ * Compute target positions for open or closed state.
+ *
+ * @param isOpen - Whether target is the open state
+ * @param drawerSize - Drawer size in pixels
+ * @param placement - Drawer placement
+ * @returns Target positions in pixels
+ */
+export declare function computeTargetPosition(isOpen: boolean, drawerSize: number, placement: DrawerPlacement): RevealPositionPx;
+/**
+ * Compute position from swipe displacement.
+ *
+ * This is the main function for tracking position during swipe.
+ *
+ * @param displacement - Current swipe displacement in pixels
+ * @param drawerSize - Drawer size in pixels
+ * @param placement - Drawer placement
+ * @param isOpening - Whether opening via swipe
+ * @param isClosing - Whether closing via swipe
+ * @returns Current position in pixels
+ */
+export declare function computePositionFromDisplacement(displacement: number, drawerSize: number, placement: DrawerPlacement, isOpening: boolean, isClosing: boolean): RevealPositionPx;
+/**
+ * Build drawer transform string from pixel offset.
+ *
+ * @param drawerPx - Drawer offset in pixels
+ * @param placement - Drawer placement
+ * @returns CSS transform string
+ */
+export declare function buildDrawerTransformPx(drawerPx: number, placement: DrawerPlacement): string;
+/**
+ * Build content transform string from pixel offset.
+ *
+ * @param contentPx - Content offset in pixels
+ * @param placement - Drawer placement
+ * @returns CSS transform string
+ */
+export declare function buildContentTransformPx(contentPx: number, placement: DrawerPlacement): string;
+/**
+ * Show the drawer element.
+ */
+export declare function showDrawer(element: HTMLElement): void;
+/**
+ * Hide the drawer element.
+ */
+export declare function hideDrawer(element: HTMLElement): void;
+/**
+ * Clear drawer visibility styles.
+ */
+export declare function clearDrawerVisibility(element: HTMLElement): void;
+/**
+ * Apply stacking context styles with configurable background.
+ *
+ * @param element - Content element
+ * @param background - Background color (defaults to #fff)
+ */
+export declare function applyStackingContextWithBackground(element: HTMLElement, background?: string): void;

package/dist/components/window/drawerStyles.d.ts

@@ -29,6 +29,11 @@ export declare function getOpenTransform(placement: DrawerPlacement): string;
  * Get closed transform value.
  */
 export declare function getClosedTransform(placement: DrawerPlacement): string;
+/**
+ * Get reveal mode transform based on open state.
+ * When closed, drawer is partially hidden. When open, fully visible.
+ */
+export declare function getRevealTransform(placement: DrawerPlacement, isOpen: boolean): string;
 /**
  * Compute CSS transition value.
  */

package/dist/components/window/useDrawerSwipeTransform.d.ts

@@ -1,7 +1,10 @@
 /**
- * @file Hook for applying real-time transform during drawer swipe gestures.
+ * @file Hook for applying real-time transform during drawer swipe gestures (backward-compatible wrapper).
  *
- * Handles DOM manipulation for smooth swipe animations.
+ * This hook is a thin wrapper around useDrawerTransform with mode="overlay".
+ * For new code, prefer using useDrawerTransform directly.
+ *
+ * @deprecated Use useDrawerTransform with mode="overlay" instead.
  */
 import * as React from "react";
 import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
@@ -14,10 +17,13 @@ type UseDrawerSwipeTransformOptions = {
     displacement: number;
     isOpening: boolean;
     isClosing: boolean;
+    isOpen: boolean;
     enabled: boolean;
 };
 /**
  * Apply real-time transform to drawer and backdrop during swipe.
+ *
+ * @deprecated Use useDrawerTransform with mode="overlay" instead.
  */
 export declare function useDrawerSwipeTransform(options: UseDrawerSwipeTransformOptions): void;
 export {};

package/dist/components/window/useDrawerTransform.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @file Unified hook for drawer transform animations.
+ *
+ * This hook provides a single interface for both reveal and overlay drawer modes.
+ * It uses a strategy pattern internally to handle mode-specific position calculations
+ * and DOM operations while sharing the common state machine logic.
+ */
+import * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+/**
+ * Drawer animation mode.
+ */
+export type DrawerMode = "reveal" | "overlay";
+/**
+ * Phase of drawer animation lifecycle.
+ */
+export type DrawerAnimationPhase = "idle" | "opening" | "open" | "closing" | "closed";
+/**
+ * Options for useDrawerTransform hook.
+ */
+export type UseDrawerTransformOptions = {
+    /** Animation mode */
+    mode: DrawerMode;
+    /** Ref to the drawer element */
+    drawerRef: React.RefObject<HTMLElement | null>;
+    /** Ref to the content element (reveal mode) */
+    contentRef?: React.RefObject<HTMLElement | null>;
+    /** Ref to the backdrop element (overlay mode) */
+    backdropRef?: React.RefObject<HTMLElement | null>;
+    /** Drawer placement */
+    placement: DrawerPlacement;
+    /** Drawer size in pixels */
+    drawerSize: number;
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Current swipe state */
+    swipeState: ContinuousOperationState;
+    /** Current swipe displacement */
+    displacement: number;
+    /** Whether opening via swipe */
+    isOpening: boolean;
+    /** Whether closing via swipe */
+    isClosing: boolean;
+    /** Whether this hook is enabled */
+    enabled: boolean;
+    /** Whether drawer is inline (affects content element for reveal mode) */
+    inline?: boolean;
+    /** Grid container ref for inline mode (reveal mode) */
+    gridRef?: React.RefObject<HTMLElement | null>;
+    /** Content background color (reveal mode) */
+    contentBackground?: string;
+};
+/**
+ * Result from useDrawerTransform hook.
+ */
+export type UseDrawerTransformResult = {
+    /** Current animation phase */
+    phase: DrawerAnimationPhase;
+    /** Whether any animation is running */
+    isAnimating: boolean;
+};
+/**
+ * Unified hook for drawer transform animations.
+ *
+ * Supports both reveal and overlay modes through a strategy pattern.
+ */
+export declare function useDrawerTransform(options: UseDrawerTransformOptions): UseDrawerTransformResult;

package/dist/components/window/useRevealDrawerTransform.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @file Hook for managing reveal-mode drawer transform (backward-compatible wrapper).
+ *
+ * This hook is a thin wrapper around useDrawerTransform with mode="reveal".
+ * For new code, prefer using useDrawerTransform directly.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+import * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+import { type DrawerAnimationPhase, type UseDrawerTransformResult } from "./useDrawerTransform.js";
+/**
+ * Phase of reveal drawer animation lifecycle.
+ * @deprecated Use DrawerAnimationPhase from useDrawerTransform.ts
+ */
+export type RevealDrawerAnimationPhase = DrawerAnimationPhase;
+/**
+ * Options for useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformOptions = {
+    /** Ref to the drawer element */
+    drawerRef: React.RefObject<HTMLElement | null>;
+    /** Drawer placement */
+    placement: DrawerPlacement;
+    /** Drawer size in pixels */
+    drawerSize: number;
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Current swipe state */
+    swipeState: ContinuousOperationState;
+    /** Current swipe displacement */
+    displacement: number;
+    /** Whether opening via swipe */
+    isOpening: boolean;
+    /** Whether closing via swipe */
+    isClosing: boolean;
+    /** Whether this hook is enabled */
+    enabled: boolean;
+    /** Whether drawer is inline (affects target element) */
+    inline: boolean;
+    /** Grid container ref for inline mode */
+    gridRef?: React.RefObject<HTMLElement | null>;
+    /** Content background color for stacking context */
+    contentBackground?: string;
+};
+/**
+ * Result from useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformResult = UseDrawerTransformResult;
+/**
+ * Hook for managing reveal-mode drawer transform.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+export declare function useRevealDrawerTransform(options: UseRevealDrawerTransformOptions): UseRevealDrawerTransformResult;

package/dist/config.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),v=require("react"),b=require("./GridLayout-DKTg_N61.cjs");require("./FloatingPanelFrame-CEmXDvUA.cjs");require("./FloatingWindow-DMwyK0eK.cjs");function E(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const s=E(v),C=r=>{const t=z(r);if(t==="grid"&&!r.area)throw new Error(`PanelRoute ${r.id} must specify 'area' for grid placement.`);return{id:r.id,component:r.element,visible:r.visible,gridArea:r.area,positionMode:t,position:r.position,zIndex:r.zIndex,width:r.width,height:r.height,pointerEvents:r.pointerEvents,style:r.style,drawer:r.drawer,floating:r.floating,pivot:r.pivot,backdropStyle:r.backdropStyle}},z=r=>r.positionMode?r.positionMode:r.floating?"absolute":(r.drawer,"grid"),P=r=>{const t=[],n=i=>{t.push(i),i.children&&i.children.forEach(e=>n(e))};return r.forEach(i=>n(i)),t},I=r=>{const t=new Set;r.forEach(n=>{if(t.has(n.id))throw new Error(`Duplicate PanelRoute id detected: ${n.id}`);t.add(n.id)})},A=r=>{const t=P(r);return I(t),t.map(n=>C(n))},p=()=>null,x=()=>null,a=(r,t)=>s.isValidElement(r)?r.type===t:!1,d=r=>{const t=[],n=i=>{if(!(i==null||typeof i=="boolean")){if(Array.isArray(i)){i.forEach(n);return}if(a(i,p)){const e=i.props;if(!e.id)throw new Error("<Panel> requires an 'id' prop.");if(e.type==="grid"){if(!e.area)throw new Error(`<Panel id="${e.id}"> requires an explicit 'area' prop when type="grid".`);t.push({id:e.id,area:e.area,element:e.children??null,visible:e.visible,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style});return}if(e.type==="floating"){if(!e.position)throw new Error(`<Panel id="${e.id}"> requires a 'position' prop when type="floating".`);if(e.width===void 0||e.height===void 0)throw new Error(`<Panel id="${e.id}"> requires 'width' and 'height' when type="floating".`);t.push({id:e.id,element:e.children??null,visible:e.visible??!0,positionMode:"absolute",position:e.position,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,floating:{mode:"embedded",draggable:e.draggable,resizable:e.resizable}});return}if(e.type==="drawer"){t.push({id:e.id,element:e.children??null,visible:e.visible??!0,positionMode:"relative",position:e.position,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,drawer:e.drawer,backdropStyle:e.backdropStyle});return}if(e.type==="pivot"){if(!e.area)throw new Error(`<Panel id="${e.id}"> requires an explicit 'area' prop when type="pivot".`);const o=$(e.children);if(o.length===0)throw new Error(`<Panel id="${e.id}"> requires at least one <PivotItem> child when type="pivot".`);t.push({id:e.id,area:e.area,element:null,visible:e.visible,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,pivot:{items:o,activeId:e.activeId,defaultActiveId:e.defaultActiveId,onActiveChange:e.onActiveChange}});return}throw new Error("<Panel> has unsupported type.")}if(s.isValidElement(i)){if(i.type===s.Fragment){n(i.props.children);return}return}}};return n(r),t},R=({config:r,style:t,children:n})=>{const i=s.useMemo(()=>d(n),[n]),e=s.useMemo(()=>A(i),[i]),o=s.useMemo(()=>{if(r)return r;const l=m(n);if(!l)throw new Error("Panel requires either 'config' prop or a JSX config (<Config><Rows/><Columns/><Areas/></Config>). ");return l},[n,r]);return y.jsx(b.GridLayout,{config:o,layers:e,style:t})},h=()=>null,q=()=>null,S=()=>null,f=()=>null,w=()=>null,g=()=>null,u=(r,t)=>{const n=[],i=e=>{if(!(e==null||typeof e=="boolean")){if(Array.isArray(e)){e.forEach(i);return}if(a(e,t)){const o=e.props;if(!o.size)throw new Error("Row/Col requires 'size' property.");n.push({size:o.size,resizable:o.resizable,minSize:o.minSize,maxSize:o.maxSize});return}s.isValidElement(e)&&i(e.props.children)}};return i(r),n},M=r=>{const t=c(r,h);if(!t)return null;const n=t.props,i=u(t.props.children,f),e=u(t.props.children,w),o=c(t.props.children,g),l=o?o.props.matrix:void 0;return{gap:n.gap,style:n.style,rows:i,columns:e,areas:l}},c=(r,t)=>{const n=i=>{if(i==null||typeof i=="boolean")return null;if(Array.isArray(i)){for(const e of i){const o=n(e);if(o)return o}return null}return a(i,t)?i:s.isValidElement(i)?n(i.props.children):null};return n(r)},$=r=>{const t=[],n=i=>{if(!(i==null||typeof i=="boolean")){if(Array.isArray(i)){i.forEach(n);return}if(a(i,x)){const e=i.props;if(!e.id)throw new Error("<PivotItem> requires an 'id' prop.");t.push({id:e.id,label:e.label,content:e.children??null,disabled:e.disabled});return}s.isValidElement(i)&&i.type===s.Fragment&&n(i.props.children)}};return n(r),t},m=r=>{const t=M(r);if(!t)return null;if(!t.rows||t.rows.length===0)throw new Error("Config must include at least one <Row size=...> inside <Config>.");if(!t.columns||t.columns.length===0)throw new Error("Config must include at least one <Col size=...> inside <Config>.");if(!t.areas||t.areas.length===0)throw new Error("Config must include <Areas matrix={...}> inside <Config>.");const n=t.areas.length,i=t.areas[0]?.length??0;if(n!==t.rows.length)throw new Error(`Areas row count (${n}) must match Rows count (${t.rows.length}).`);if(i!==t.columns.length)throw new Error(`Areas column count (${i}) must match Columns count (${t.columns.length}).`);return{areas:t.areas,rows:t.rows,columns:t.columns,gap:t.gap,style:t.style}};exports.Areas=g;exports.Col=w;exports.Columns=S;exports.Config=h;exports.Panel=p;exports.PanelLayout=R;exports.Row=f;exports.Rows=q;exports.buildConfigFromChildren=m;exports.buildRoutesFromChildren=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),v=require("react"),b=require("./GridLayout-DNOClFzz.cjs");require("react-dom");require("./FloatingPanelFrame-CEmXDvUA.cjs");require("./FloatingWindow-Cvyokf0m.cjs");function E(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const s=E(v),C=t=>{const r=z(t);if(r==="grid"&&!t.area)throw new Error(`PanelRoute ${t.id} must specify 'area' for grid placement.`);return{id:t.id,component:t.element,visible:t.visible,gridArea:t.area,positionMode:r,position:t.position,zIndex:t.zIndex,width:t.width,height:t.height,pointerEvents:t.pointerEvents,style:t.style,drawer:t.drawer,floating:t.floating,pivot:t.pivot,backdropStyle:t.backdropStyle}},z=t=>t.positionMode?t.positionMode:t.floating?"absolute":(t.drawer,"grid"),P=t=>{const r=[],n=i=>{r.push(i),i.children&&i.children.forEach(e=>n(e))};return t.forEach(i=>n(i)),r},I=t=>{const r=new Set;t.forEach(n=>{if(r.has(n.id))throw new Error(`Duplicate PanelRoute id detected: ${n.id}`);r.add(n.id)})},A=t=>{const r=P(t);return I(r),r.map(n=>C(n))},p=()=>null,x=()=>null,a=(t,r)=>s.isValidElement(t)?t.type===r:!1,d=t=>{const r=[],n=i=>{if(!(i==null||typeof i=="boolean")){if(Array.isArray(i)){i.forEach(n);return}if(a(i,p)){const e=i.props;if(!e.id)throw new Error("<Panel> requires an 'id' prop.");if(e.type==="grid"){if(!e.area)throw new Error(`<Panel id="${e.id}"> requires an explicit 'area' prop when type="grid".`);r.push({id:e.id,area:e.area,element:e.children??null,visible:e.visible,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style});return}if(e.type==="floating"){if(!e.position)throw new Error(`<Panel id="${e.id}"> requires a 'position' prop when type="floating".`);if(e.width===void 0||e.height===void 0)throw new Error(`<Panel id="${e.id}"> requires 'width' and 'height' when type="floating".`);r.push({id:e.id,element:e.children??null,visible:e.visible??!0,positionMode:"absolute",position:e.position,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,floating:{mode:"embedded",draggable:e.draggable,resizable:e.resizable}});return}if(e.type==="drawer"){r.push({id:e.id,element:e.children??null,visible:e.visible??!0,positionMode:"relative",position:e.position,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,drawer:e.drawer,backdropStyle:e.backdropStyle});return}if(e.type==="pivot"){if(!e.area)throw new Error(`<Panel id="${e.id}"> requires an explicit 'area' prop when type="pivot".`);const o=$(e.children);if(o.length===0)throw new Error(`<Panel id="${e.id}"> requires at least one <PivotItem> child when type="pivot".`);r.push({id:e.id,area:e.area,element:null,visible:e.visible,zIndex:e.zIndex,width:e.width,height:e.height,pointerEvents:e.pointerEvents,style:e.style,pivot:{items:o,activeId:e.activeId,defaultActiveId:e.defaultActiveId,onActiveChange:e.onActiveChange}});return}throw new Error("<Panel> has unsupported type.")}if(s.isValidElement(i)){if(i.type===s.Fragment){n(i.props.children);return}return}}};return n(t),r},R=({config:t,style:r,children:n})=>{const i=s.useMemo(()=>d(n),[n]),e=s.useMemo(()=>A(i),[i]),o=s.useMemo(()=>{if(t)return t;const l=m(n);if(!l)throw new Error("Panel requires either 'config' prop or a JSX config (<Config><Rows/><Columns/><Areas/></Config>). ");return l},[n,t]);return y.jsx(b.GridLayout,{config:o,layers:e,style:r})},h=()=>null,q=()=>null,S=()=>null,f=()=>null,w=()=>null,g=()=>null,u=(t,r)=>{const n=[],i=e=>{if(!(e==null||typeof e=="boolean")){if(Array.isArray(e)){e.forEach(i);return}if(a(e,r)){const o=e.props;if(!o.size)throw new Error("Row/Col requires 'size' property.");n.push({size:o.size,resizable:o.resizable,minSize:o.minSize,maxSize:o.maxSize});return}s.isValidElement(e)&&i(e.props.children)}};return i(t),n},M=t=>{const r=c(t,h);if(!r)return null;const n=r.props,i=u(r.props.children,f),e=u(r.props.children,w),o=c(r.props.children,g),l=o?o.props.matrix:void 0;return{gap:n.gap,style:n.style,rows:i,columns:e,areas:l}},c=(t,r)=>{const n=i=>{if(i==null||typeof i=="boolean")return null;if(Array.isArray(i)){for(const e of i){const o=n(e);if(o)return o}return null}return a(i,r)?i:s.isValidElement(i)?n(i.props.children):null};return n(t)},$=t=>{const r=[],n=i=>{if(!(i==null||typeof i=="boolean")){if(Array.isArray(i)){i.forEach(n);return}if(a(i,x)){const e=i.props;if(!e.id)throw new Error("<PivotItem> requires an 'id' prop.");r.push({id:e.id,label:e.label,content:e.children??null,disabled:e.disabled});return}s.isValidElement(i)&&i.type===s.Fragment&&n(i.props.children)}};return n(t),r},m=t=>{const r=M(t);if(!r)return null;if(!r.rows||r.rows.length===0)throw new Error("Config must include at least one <Row size=...> inside <Config>.");if(!r.columns||r.columns.length===0)throw new Error("Config must include at least one <Col size=...> inside <Config>.");if(!r.areas||r.areas.length===0)throw new Error("Config must include <Areas matrix={...}> inside <Config>.");const n=r.areas.length,i=r.areas[0]?.length??0;if(n!==r.rows.length)throw new Error(`Areas row count (${n}) must match Rows count (${r.rows.length}).`);if(i!==r.columns.length)throw new Error(`Areas column count (${i}) must match Columns count (${r.columns.length}).`);return{areas:r.areas,rows:r.rows,columns:r.columns,gap:r.gap,style:r.style}};exports.Areas=g;exports.Col=w;exports.Columns=S;exports.Config=h;exports.Panel=p;exports.PanelLayout=R;exports.Row=f;exports.Rows=q;exports.buildConfigFromChildren=m;exports.buildRoutesFromChildren=d;
 //# sourceMappingURL=config.cjs.map

package/dist/config.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"config.cjs","sources":["../src/config/panelRouter.tsx","../src/config/PanelContentDeclaration.tsx"],"sourcesContent":["/**\n * @file Router-like builder for GridLayout\n *\n * Provides a React Router–style configuration API to declare panel layers.\n * Converts route objects to the existing GridLayout props without magic.\n */\nimport * as React from \"react\";\nimport type {\n  DrawerBehavior,\n  FloatingBehavior,\n  LayerDefinition,\n  LayerPositionMode,\n  PanelLayoutConfig,\n  PanelLayoutProps,\n  PivotBehavior,\n  WindowPosition,\n} from \"../types\";\nimport { GridLayout } from \"../components/grid/GridLayout\";\n\nexport type PanelRoute = {\n  /** Unique id for the layer. Required. */\n  id: string;\n  /** React node to render for this layer. Required. */\n  element: React.ReactNode;\n  /** Visibility flag. Defaults to visible. */\n  visible?: boolean;\n\n  /**\n   * Grid placement key. When using `positionMode: 'grid'` (default), this must be provided.\n   * Using `area` mirrors React Router's route path intent but for grid cells.\n   */\n  area?: string;\n\n  /** Explicit positioning mode; defaults to 'grid' unless floating/drawer implies otherwise. */\n  positionMode?: LayerPositionMode;\n  /** Offsets when using non-grid modes. */\n  position?: WindowPosition;\n  /** Optional stacking order. */\n  zIndex?: number;\n  /** Optional dimensions; required for resizable/draggable floating layers. */\n  width?: number | string;\n  height?: number | string;\n  /** Pointer events control. */\n  pointerEvents?: boolean | \"auto\" | \"none\";\n  /** Optional style overrides. */\n  style?: React.CSSProperties;\n  /** Optional backdrop style (drawer). */\n  backdropStyle?: React.CSSProperties;\n\n  /** Drawer behavior for mobile-friendly panels. */\n  drawer?: DrawerBehavior;\n  /** Floating window configuration. */\n  floating?: FloatingBehavior;\n  /** Pivot behavior for content switching. */\n  pivot?: PivotBehavior;\n\n  /**\n   * Optional child declarations; purely a grouping convenience.\n   * Children are flattened; no implicit inheritance.\n   */\n  children?: PanelRoute[];\n};\n\nconst toLayer = (route: PanelRoute): LayerDefinition => {\n  const inferredMode: LayerPositionMode = resolveRoutePositionMode(route);\n\n  if (inferredMode === \"grid\") {\n    if (!route.area) {\n      throw new Error(`PanelRoute ${route.id} must specify 'area' for grid placement.`);\n    }\n  }\n\n  return {\n    id: route.id,\n    component: route.element,\n    visible: route.visible,\n    gridArea: route.area,\n    positionMode: inferredMode,\n    position: route.position,\n    zIndex: route.zIndex,\n    width: route.width,\n    height: route.height,\n    pointerEvents: route.pointerEvents,\n    style: route.style,\n    drawer: route.drawer,\n    floating: route.floating,\n    pivot: route.pivot,\n    backdropStyle: route.backdropStyle,\n  } satisfies LayerDefinition;\n};\n\nconst resolveRoutePositionMode = (route: PanelRoute): LayerPositionMode => {\n  if (route.positionMode) {\n    return route.positionMode;\n  }\n  if (route.floating) {\n    // Embedded => absolute, Popup => relative (handled by renderer); keep explicitness here.\n    return \"absolute\";\n  }\n  if (route.drawer) {\n    return \"grid\";\n  }\n  return \"grid\";\n};\n\nconst flattenRoutes = (routes: PanelRoute[]): PanelRoute[] => {\n  const result: PanelRoute[] = [];\n  const walk = (node: PanelRoute): void => {\n    result.push(node);\n    if (node.children) {\n      node.children.forEach((child) => walk(child));\n    }\n  };\n  routes.forEach((r) => walk(r));\n  return result;\n};\n\nconst validateUniqueIds = (routes: PanelRoute[]): void => {\n  const seen = new Set<string>();\n  routes.forEach((r) => {\n    if (seen.has(r.id)) {\n      throw new Error(`Duplicate PanelRoute id detected: ${r.id}`);\n    }\n    seen.add(r.id);\n  });\n};\n\nexport const buildLayersFromRoutes = (routes: PanelRoute[]): LayerDefinition[] => {\n  const flat = flattenRoutes(routes);\n  validateUniqueIds(flat);\n  return flat.map((r) => toLayer(r));\n};\n\nexport const createPanelLayoutFromRoutes = (input: {\n  config: PanelLayoutConfig;\n  routes: PanelRoute[];\n  style?: React.CSSProperties;\n}): PanelLayoutProps => {\n  const layers = buildLayersFromRoutes(input.routes);\n  return {\n    config: input.config,\n    layers,\n  };\n};\n\nexport type PanelLayoutRouterProps = {\n  config: PanelLayoutConfig;\n  routes: PanelRoute[];\n  style?: React.CSSProperties;\n};\n\nexport const PanelLayoutRouter: React.FC<PanelLayoutRouterProps> = ({ config, routes, style }) => {\n  const layers = React.useMemo(() => buildLayersFromRoutes(routes), [routes]);\n  return <GridLayout config={config} layers={layers} style={style} />;\n};\n","/**\n * @file PanelContentDeclaration (JSX DSL for content configuration ONLY)\n *\n * IMPORTANT: This file declares a JSX DSL to configure panel \"content\" and layout\n * tracks. It does NOT implement grid rendering, resizing, dragging, or drawers.\n * Those behaviors live in the existing layout/rendering modules. Keep this file\n * limited to declaration and conversion into GridLayout props.\n *\n * Usage (content declaration):\n * <PanelLayout>\n *   <Config>\n *     <Rows>...</Rows>\n *     <Columns>...</Columns>\n *     <Areas matrix={...}/>\n *   </Config>\n *   <Panel type=\"grid\" id=\"main\" area=\"main\">...</Panel>\n *   <Panel type=\"floating\" id=\"preview\" position={{ left: 0, top: 0 }} width={300} height={200} />\n *   <Panel type=\"drawer\" id=\"nav\" drawer={{ defaultOpen: true }} position={{ left: 0 }} />\n * </PanelLayout>\n */\nimport * as React from \"react\";\nimport { GridLayout } from \"../components/grid/GridLayout\";\nimport type { DrawerBehavior, GridTrack, PanelLayoutConfig, WindowPosition } from \"../types\";\nimport type { PanelRoute } from \"./panelRouter\";\nimport { buildLayersFromRoutes } from \"./panelRouter\";\n\nexport type PanelRootProps = {\n  config?: PanelLayoutConfig;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\n// Unified child declaration: <Panel type=\"grid\" .../> or <Panel type=\"floating\" .../>...\ntype PanelCommonProps = {\n  id: string;\n  visible?: boolean;\n  zIndex?: number;\n  width?: number | string;\n  height?: number | string;\n  pointerEvents?: boolean | \"auto\" | \"none\";\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nexport type PanelProps =\n  | (PanelCommonProps & { type: \"grid\"; area: string })\n  | (PanelCommonProps & {\n      type: \"floating\";\n      position: WindowPosition;\n      width: number | string;\n      height: number | string;\n      draggable?: boolean;\n      resizable?: boolean;\n    })\n  | (PanelCommonProps & {\n      type: \"drawer\";\n      drawer: DrawerBehavior;\n      position?: WindowPosition;\n      backdropStyle?: React.CSSProperties;\n    })\n  | (Omit<PanelCommonProps, \"children\"> & {\n      type: \"pivot\";\n      area: string;\n      /** Currently active item ID (controlled mode) */\n      activeId?: string;\n      /** Default active item ID (uncontrolled mode) */\n      defaultActiveId?: string;\n      /** Callback when active item changes */\n      onActiveChange?: (id: string) => void;\n      children?: React.ReactNode;\n    });\n\nexport const Panel: React.FC<PanelProps> = () => null;\n\n/**\n * PivotItem declaration for use inside <Panel type=\"pivot\">\n */\nexport type PivotItemDeclProps = {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n};\n\nexport const PivotItem: React.FC<PivotItemDeclProps> = () => null;\n\nconst isElementOf = <P,>(element: unknown, component: React.FC<P>): element is React.ReactElement<P> => {\n  if (!React.isValidElement<P>(element)) {\n    return false;\n  }\n  return element.type === component;\n};\n\nexport const buildRoutesFromChildren = (children: React.ReactNode): PanelRoute[] => {\n  const routes: PanelRoute[] = [];\n\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    // Unified <Panel type=\"...\" />\n    if (isElementOf(node, Panel)) {\n      const props = node.props as PanelProps;\n      if (!props.id) {\n        throw new Error(\"<Panel> requires an 'id' prop.\");\n      }\n      if (props.type === \"grid\") {\n        if (!props.area) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires an explicit 'area' prop when type=\"grid\".`);\n        }\n        routes.push({\n          id: props.id,\n          area: props.area,\n          element: props.children ?? null,\n          visible: props.visible,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n        });\n        return;\n      }\n      if (props.type === \"floating\") {\n        if (!props.position) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires a 'position' prop when type=\"floating\".`);\n        }\n        if (props.width === undefined || props.height === undefined) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires 'width' and 'height' when type=\"floating\".`);\n        }\n        routes.push({\n          id: props.id,\n          element: props.children ?? null,\n          visible: props.visible ?? true,\n          positionMode: \"absolute\",\n          position: props.position,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          floating: { mode: \"embedded\", draggable: props.draggable, resizable: props.resizable },\n        });\n        return;\n      }\n      if (props.type === \"drawer\") {\n        routes.push({\n          id: props.id,\n          element: props.children ?? null,\n          visible: props.visible ?? true,\n          positionMode: \"relative\",\n          position: props.position,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          drawer: props.drawer,\n          backdropStyle: props.backdropStyle,\n        });\n        return;\n      }\n      if (props.type === \"pivot\") {\n        if (!props.area) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires an explicit 'area' prop when type=\"pivot\".`);\n        }\n        const pivotItems = collectPivotItems(props.children);\n        if (pivotItems.length === 0) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires at least one <PivotItem> child when type=\"pivot\".`);\n        }\n        routes.push({\n          id: props.id,\n          area: props.area,\n          element: null,\n          visible: props.visible,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          pivot: {\n            items: pivotItems,\n            activeId: props.activeId,\n            defaultActiveId: props.defaultActiveId,\n            onActiveChange: props.onActiveChange,\n          },\n        });\n        return;\n      }\n      // unknown type -> error for explicitness\n      throw new Error(\"<Panel> has unsupported type.\");\n    }\n\n    if (React.isValidElement(node)) {\n      if (node.type === React.Fragment) {\n        const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n        visit(el.props.children);\n        return;\n      }\n      // Unknown element: ignore quietly to allow comments/wrappers.\n      return;\n    }\n    // Primitive nodes (string/number) are ignored.\n  };\n\n  visit(children);\n  return routes;\n};\n\n// Root container renamed to PanelLayout to avoid name collision with child <Panel/>\nexport const PanelLayout: React.FC<PanelRootProps> = ({ config, style, children }) => {\n  const routes = React.useMemo(() => buildRoutesFromChildren(children), [children]);\n  const layers = React.useMemo(() => buildLayersFromRoutes(routes), [routes]);\n  const derivedConfig = React.useMemo(() => {\n    if (config) {\n      return config;\n    }\n    const built = buildConfigFromChildren(children);\n    if (!built) {\n      throw new Error(\"Panel requires either 'config' prop or a JSX config (<Config><Rows/><Columns/><Areas/></Config>). \");\n    }\n    return built;\n  }, [children, config]);\n  return <GridLayout config={derivedConfig} layers={layers} style={style} />;\n};\n\n// =============================\n// JSX Config Declarations\n// =============================\n\nexport type ConfigProps = {\n  gap?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nexport const Config: React.FC<ConfigProps> = () => {\n  return null;\n};\n\nexport const Rows: React.FC<{ children?: React.ReactNode }> = () => {\n  return null;\n};\n\nexport const Columns: React.FC<{ children?: React.ReactNode }> = () => {\n  return null;\n};\n\nexport type RowProps = GridTrack;\nexport const Row: React.FC<RowProps> = () => {\n  return null;\n};\n\nexport type ColumnProps = GridTrack;\nexport const Col: React.FC<ColumnProps> = () => {\n  return null;\n};\n\nexport type AreasProps = {\n  matrix: string[][];\n};\nexport const Areas: React.FC<AreasProps> = () => {\n  return null;\n};\n\ntype CollectedConfig = {\n  gap?: string;\n  style?: React.CSSProperties;\n  rows?: GridTrack[];\n  columns?: GridTrack[];\n  areas?: string[][];\n};\n\nconst collectTracks = <P extends GridTrack>(children: React.ReactNode, marker: React.FC<P>): GridTrack[] => {\n  const result: GridTrack[] = [];\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    if (isElementOf(node, marker)) {\n      const props = node.props as P;\n      if (!props.size) {\n        throw new Error(\"Row/Col requires 'size' property.\");\n      }\n      result.push({\n        size: props.size,\n        resizable: props.resizable,\n        minSize: props.minSize,\n        maxSize: props.maxSize,\n      });\n      return;\n    }\n    if (React.isValidElement(node)) {\n      const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n      visit(el.props.children);\n    }\n  };\n  visit(children);\n  return result;\n};\n\nconst collectConfigBlock = (children: React.ReactNode): CollectedConfig | null => {\n  const node = findFirst(children, Config);\n  if (!node) {\n    return null;\n  }\n  const props = node.props as ConfigProps;\n  const rows = collectTracks(node.props.children, Row);\n  const columns = collectTracks(node.props.children, Col);\n  const areasNode = findFirst(node.props.children, Areas);\n  const areas = areasNode ? (areasNode.props as AreasProps).matrix : undefined;\n  return {\n    gap: props.gap,\n    style: props.style,\n    rows,\n    columns,\n    areas,\n  };\n};\n\nconst findFirst = <P,>(children: React.ReactNode, marker: React.FC<P>): React.ReactElement<P> | null => {\n  const visit = (node: React.ReactNode): React.ReactElement<P> | null => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return null;\n    }\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        const found = visit(item);\n        if (found) {\n          return found;\n        }\n      }\n      return null;\n    }\n    if (isElementOf(node, marker)) {\n      return node as React.ReactElement<P>;\n    }\n    if (React.isValidElement(node)) {\n      const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n      return visit(el.props.children);\n    }\n    return null;\n  };\n  return visit(children);\n};\n\ntype CollectedPivotItem = {\n  id: string;\n  label?: string;\n  content: React.ReactNode;\n  disabled?: boolean;\n};\n\nconst collectPivotItems = (children: React.ReactNode): CollectedPivotItem[] => {\n  const items: CollectedPivotItem[] = [];\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    if (isElementOf(node, PivotItem)) {\n      const props = node.props as PivotItemDeclProps;\n      if (!props.id) {\n        throw new Error(\"<PivotItem> requires an 'id' prop.\");\n      }\n      items.push({\n        id: props.id,\n        label: props.label,\n        content: props.children ?? null,\n        disabled: props.disabled,\n      });\n      return;\n    }\n    if (React.isValidElement(node)) {\n      if (node.type === React.Fragment) {\n        const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n        visit(el.props.children);\n      }\n    }\n  };\n  visit(children);\n  return items;\n};\n\nexport const buildConfigFromChildren = (children: React.ReactNode): PanelLayoutConfig | null => {\n  const collected = collectConfigBlock(children);\n  if (!collected) {\n    return null;\n  }\n  if (!collected.rows || collected.rows.length === 0) {\n    throw new Error(\"Config must include at least one <Row size=...> inside <Config>.\");\n  }\n  if (!collected.columns || collected.columns.length === 0) {\n    throw new Error(\"Config must include at least one <Col size=...> inside <Config>.\");\n  }\n  if (!collected.areas || collected.areas.length === 0) {\n    throw new Error(\"Config must include <Areas matrix={...}> inside <Config>.\");\n  }\n\n  const rowCount = collected.areas.length;\n  const colCount = collected.areas[0]?.length ?? 0;\n  if (rowCount !== collected.rows.length) {\n    throw new Error(`Areas row count (${rowCount}) must match Rows count (${collected.rows.length}).`);\n  }\n  if (colCount !== collected.columns.length) {\n    throw new Error(`Areas column count (${colCount}) must match Columns count (${collected.columns.length}).`);\n  }\n\n  return {\n    areas: collected.areas,\n    rows: collected.rows,\n    columns: collected.columns,\n    gap: collected.gap,\n    style: collected.style,\n  } satisfies PanelLayoutConfig;\n};\n"],"names":["toLayer","route","inferredMode","resolveRoutePositionMode","flattenRoutes","routes","result","walk","node","child","r","validateUniqueIds","seen","buildLayersFromRoutes","flat","Panel","PivotItem","isElementOf","element","component","React","buildRoutesFromChildren","children","visit","props","pivotItems","collectPivotItems","PanelLayout","config","style","layers","derivedConfig","built","buildConfigFromChildren","jsx","GridLayout","Config","Rows","Columns","Row","Col","Areas","collectTracks","marker","collectConfigBlock","findFirst","rows","columns","areasNode","areas","item","found","items","collected","rowCount","colCount"],"mappings":"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"}
+{"version":3,"file":"config.cjs","sources":["../src/config/panelRouter.tsx","../src/config/PanelContentDeclaration.tsx"],"sourcesContent":["/**\n * @file Router-like builder for GridLayout\n *\n * Provides a React Router–style configuration API to declare panel layers.\n * Converts route objects to the existing GridLayout props without magic.\n */\nimport * as React from \"react\";\nimport type {\n  DrawerBehavior,\n  FloatingBehavior,\n  LayerDefinition,\n  LayerPositionMode,\n  PanelLayoutConfig,\n  PanelLayoutProps,\n  PivotBehavior,\n  WindowPosition,\n} from \"../types\";\nimport { GridLayout } from \"../components/grid/GridLayout\";\n\nexport type PanelRoute = {\n  /** Unique id for the layer. Required. */\n  id: string;\n  /** React node to render for this layer. Required. */\n  element: React.ReactNode;\n  /** Visibility flag. Defaults to visible. */\n  visible?: boolean;\n\n  /**\n   * Grid placement key. When using `positionMode: 'grid'` (default), this must be provided.\n   * Using `area` mirrors React Router's route path intent but for grid cells.\n   */\n  area?: string;\n\n  /** Explicit positioning mode; defaults to 'grid' unless floating/drawer implies otherwise. */\n  positionMode?: LayerPositionMode;\n  /** Offsets when using non-grid modes. */\n  position?: WindowPosition;\n  /** Optional stacking order. */\n  zIndex?: number;\n  /** Optional dimensions; required for resizable/draggable floating layers. */\n  width?: number | string;\n  height?: number | string;\n  /** Pointer events control. */\n  pointerEvents?: boolean | \"auto\" | \"none\";\n  /** Optional style overrides. */\n  style?: React.CSSProperties;\n  /** Optional backdrop style (drawer). */\n  backdropStyle?: React.CSSProperties;\n\n  /** Drawer behavior for mobile-friendly panels. */\n  drawer?: DrawerBehavior;\n  /** Floating window configuration. */\n  floating?: FloatingBehavior;\n  /** Pivot behavior for content switching. */\n  pivot?: PivotBehavior;\n\n  /**\n   * Optional child declarations; purely a grouping convenience.\n   * Children are flattened; no implicit inheritance.\n   */\n  children?: PanelRoute[];\n};\n\nconst toLayer = (route: PanelRoute): LayerDefinition => {\n  const inferredMode: LayerPositionMode = resolveRoutePositionMode(route);\n\n  if (inferredMode === \"grid\") {\n    if (!route.area) {\n      throw new Error(`PanelRoute ${route.id} must specify 'area' for grid placement.`);\n    }\n  }\n\n  return {\n    id: route.id,\n    component: route.element,\n    visible: route.visible,\n    gridArea: route.area,\n    positionMode: inferredMode,\n    position: route.position,\n    zIndex: route.zIndex,\n    width: route.width,\n    height: route.height,\n    pointerEvents: route.pointerEvents,\n    style: route.style,\n    drawer: route.drawer,\n    floating: route.floating,\n    pivot: route.pivot,\n    backdropStyle: route.backdropStyle,\n  } satisfies LayerDefinition;\n};\n\nconst resolveRoutePositionMode = (route: PanelRoute): LayerPositionMode => {\n  if (route.positionMode) {\n    return route.positionMode;\n  }\n  if (route.floating) {\n    // Embedded => absolute, Popup => relative (handled by renderer); keep explicitness here.\n    return \"absolute\";\n  }\n  if (route.drawer) {\n    return \"grid\";\n  }\n  return \"grid\";\n};\n\nconst flattenRoutes = (routes: PanelRoute[]): PanelRoute[] => {\n  const result: PanelRoute[] = [];\n  const walk = (node: PanelRoute): void => {\n    result.push(node);\n    if (node.children) {\n      node.children.forEach((child) => walk(child));\n    }\n  };\n  routes.forEach((r) => walk(r));\n  return result;\n};\n\nconst validateUniqueIds = (routes: PanelRoute[]): void => {\n  const seen = new Set<string>();\n  routes.forEach((r) => {\n    if (seen.has(r.id)) {\n      throw new Error(`Duplicate PanelRoute id detected: ${r.id}`);\n    }\n    seen.add(r.id);\n  });\n};\n\nexport const buildLayersFromRoutes = (routes: PanelRoute[]): LayerDefinition[] => {\n  const flat = flattenRoutes(routes);\n  validateUniqueIds(flat);\n  return flat.map((r) => toLayer(r));\n};\n\nexport const createPanelLayoutFromRoutes = (input: {\n  config: PanelLayoutConfig;\n  routes: PanelRoute[];\n  style?: React.CSSProperties;\n}): PanelLayoutProps => {\n  const layers = buildLayersFromRoutes(input.routes);\n  return {\n    config: input.config,\n    layers,\n  };\n};\n\nexport type PanelLayoutRouterProps = {\n  config: PanelLayoutConfig;\n  routes: PanelRoute[];\n  style?: React.CSSProperties;\n};\n\nexport const PanelLayoutRouter: React.FC<PanelLayoutRouterProps> = ({ config, routes, style }) => {\n  const layers = React.useMemo(() => buildLayersFromRoutes(routes), [routes]);\n  return <GridLayout config={config} layers={layers} style={style} />;\n};\n","/**\n * @file PanelContentDeclaration (JSX DSL for content configuration ONLY)\n *\n * IMPORTANT: This file declares a JSX DSL to configure panel \"content\" and layout\n * tracks. It does NOT implement grid rendering, resizing, dragging, or drawers.\n * Those behaviors live in the existing layout/rendering modules. Keep this file\n * limited to declaration and conversion into GridLayout props.\n *\n * Usage (content declaration):\n * <PanelLayout>\n *   <Config>\n *     <Rows>...</Rows>\n *     <Columns>...</Columns>\n *     <Areas matrix={...}/>\n *   </Config>\n *   <Panel type=\"grid\" id=\"main\" area=\"main\">...</Panel>\n *   <Panel type=\"floating\" id=\"preview\" position={{ left: 0, top: 0 }} width={300} height={200} />\n *   <Panel type=\"drawer\" id=\"nav\" drawer={{ defaultOpen: true }} position={{ left: 0 }} />\n * </PanelLayout>\n */\nimport * as React from \"react\";\nimport { GridLayout } from \"../components/grid/GridLayout\";\nimport type { DrawerBehavior, GridTrack, PanelLayoutConfig, WindowPosition } from \"../types\";\nimport type { PanelRoute } from \"./panelRouter\";\nimport { buildLayersFromRoutes } from \"./panelRouter\";\n\nexport type PanelRootProps = {\n  config?: PanelLayoutConfig;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\n// Unified child declaration: <Panel type=\"grid\" .../> or <Panel type=\"floating\" .../>...\ntype PanelCommonProps = {\n  id: string;\n  visible?: boolean;\n  zIndex?: number;\n  width?: number | string;\n  height?: number | string;\n  pointerEvents?: boolean | \"auto\" | \"none\";\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nexport type PanelProps =\n  | (PanelCommonProps & { type: \"grid\"; area: string })\n  | (PanelCommonProps & {\n      type: \"floating\";\n      position: WindowPosition;\n      width: number | string;\n      height: number | string;\n      draggable?: boolean;\n      resizable?: boolean;\n    })\n  | (PanelCommonProps & {\n      type: \"drawer\";\n      drawer: DrawerBehavior;\n      position?: WindowPosition;\n      backdropStyle?: React.CSSProperties;\n    })\n  | (Omit<PanelCommonProps, \"children\"> & {\n      type: \"pivot\";\n      area: string;\n      /** Currently active item ID (controlled mode) */\n      activeId?: string;\n      /** Default active item ID (uncontrolled mode) */\n      defaultActiveId?: string;\n      /** Callback when active item changes */\n      onActiveChange?: (id: string) => void;\n      children?: React.ReactNode;\n    });\n\nexport const Panel: React.FC<PanelProps> = () => null;\n\n/**\n * PivotItem declaration for use inside <Panel type=\"pivot\">\n */\nexport type PivotItemDeclProps = {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n};\n\nexport const PivotItem: React.FC<PivotItemDeclProps> = () => null;\n\nconst isElementOf = <P,>(element: unknown, component: React.FC<P>): element is React.ReactElement<P> => {\n  if (!React.isValidElement<P>(element)) {\n    return false;\n  }\n  return element.type === component;\n};\n\nexport const buildRoutesFromChildren = (children: React.ReactNode): PanelRoute[] => {\n  const routes: PanelRoute[] = [];\n\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    // Unified <Panel type=\"...\" />\n    if (isElementOf(node, Panel)) {\n      const props = node.props as PanelProps;\n      if (!props.id) {\n        throw new Error(\"<Panel> requires an 'id' prop.\");\n      }\n      if (props.type === \"grid\") {\n        if (!props.area) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires an explicit 'area' prop when type=\"grid\".`);\n        }\n        routes.push({\n          id: props.id,\n          area: props.area,\n          element: props.children ?? null,\n          visible: props.visible,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n        });\n        return;\n      }\n      if (props.type === \"floating\") {\n        if (!props.position) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires a 'position' prop when type=\"floating\".`);\n        }\n        if (props.width === undefined || props.height === undefined) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires 'width' and 'height' when type=\"floating\".`);\n        }\n        routes.push({\n          id: props.id,\n          element: props.children ?? null,\n          visible: props.visible ?? true,\n          positionMode: \"absolute\",\n          position: props.position,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          floating: { mode: \"embedded\", draggable: props.draggable, resizable: props.resizable },\n        });\n        return;\n      }\n      if (props.type === \"drawer\") {\n        routes.push({\n          id: props.id,\n          element: props.children ?? null,\n          visible: props.visible ?? true,\n          positionMode: \"relative\",\n          position: props.position,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          drawer: props.drawer,\n          backdropStyle: props.backdropStyle,\n        });\n        return;\n      }\n      if (props.type === \"pivot\") {\n        if (!props.area) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires an explicit 'area' prop when type=\"pivot\".`);\n        }\n        const pivotItems = collectPivotItems(props.children);\n        if (pivotItems.length === 0) {\n          throw new Error(`<Panel id=\"${props.id}\"> requires at least one <PivotItem> child when type=\"pivot\".`);\n        }\n        routes.push({\n          id: props.id,\n          area: props.area,\n          element: null,\n          visible: props.visible,\n          zIndex: props.zIndex,\n          width: props.width,\n          height: props.height,\n          pointerEvents: props.pointerEvents,\n          style: props.style,\n          pivot: {\n            items: pivotItems,\n            activeId: props.activeId,\n            defaultActiveId: props.defaultActiveId,\n            onActiveChange: props.onActiveChange,\n          },\n        });\n        return;\n      }\n      // unknown type -> error for explicitness\n      throw new Error(\"<Panel> has unsupported type.\");\n    }\n\n    if (React.isValidElement(node)) {\n      if (node.type === React.Fragment) {\n        const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n        visit(el.props.children);\n        return;\n      }\n      // Unknown element: ignore quietly to allow comments/wrappers.\n      return;\n    }\n    // Primitive nodes (string/number) are ignored.\n  };\n\n  visit(children);\n  return routes;\n};\n\n// Root container renamed to PanelLayout to avoid name collision with child <Panel/>\nexport const PanelLayout: React.FC<PanelRootProps> = ({ config, style, children }) => {\n  const routes = React.useMemo(() => buildRoutesFromChildren(children), [children]);\n  const layers = React.useMemo(() => buildLayersFromRoutes(routes), [routes]);\n  const derivedConfig = React.useMemo(() => {\n    if (config) {\n      return config;\n    }\n    const built = buildConfigFromChildren(children);\n    if (!built) {\n      throw new Error(\"Panel requires either 'config' prop or a JSX config (<Config><Rows/><Columns/><Areas/></Config>). \");\n    }\n    return built;\n  }, [children, config]);\n  return <GridLayout config={derivedConfig} layers={layers} style={style} />;\n};\n\n// =============================\n// JSX Config Declarations\n// =============================\n\nexport type ConfigProps = {\n  gap?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nexport const Config: React.FC<ConfigProps> = () => {\n  return null;\n};\n\nexport const Rows: React.FC<{ children?: React.ReactNode }> = () => {\n  return null;\n};\n\nexport const Columns: React.FC<{ children?: React.ReactNode }> = () => {\n  return null;\n};\n\nexport type RowProps = GridTrack;\nexport const Row: React.FC<RowProps> = () => {\n  return null;\n};\n\nexport type ColumnProps = GridTrack;\nexport const Col: React.FC<ColumnProps> = () => {\n  return null;\n};\n\nexport type AreasProps = {\n  matrix: string[][];\n};\nexport const Areas: React.FC<AreasProps> = () => {\n  return null;\n};\n\ntype CollectedConfig = {\n  gap?: string;\n  style?: React.CSSProperties;\n  rows?: GridTrack[];\n  columns?: GridTrack[];\n  areas?: string[][];\n};\n\nconst collectTracks = <P extends GridTrack>(children: React.ReactNode, marker: React.FC<P>): GridTrack[] => {\n  const result: GridTrack[] = [];\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    if (isElementOf(node, marker)) {\n      const props = node.props as P;\n      if (!props.size) {\n        throw new Error(\"Row/Col requires 'size' property.\");\n      }\n      result.push({\n        size: props.size,\n        resizable: props.resizable,\n        minSize: props.minSize,\n        maxSize: props.maxSize,\n      });\n      return;\n    }\n    if (React.isValidElement(node)) {\n      const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n      visit(el.props.children);\n    }\n  };\n  visit(children);\n  return result;\n};\n\nconst collectConfigBlock = (children: React.ReactNode): CollectedConfig | null => {\n  const node = findFirst(children, Config);\n  if (!node) {\n    return null;\n  }\n  const props = node.props as ConfigProps;\n  const rows = collectTracks(node.props.children, Row);\n  const columns = collectTracks(node.props.children, Col);\n  const areasNode = findFirst(node.props.children, Areas);\n  const areas = areasNode ? (areasNode.props as AreasProps).matrix : undefined;\n  return {\n    gap: props.gap,\n    style: props.style,\n    rows,\n    columns,\n    areas,\n  };\n};\n\nconst findFirst = <P,>(children: React.ReactNode, marker: React.FC<P>): React.ReactElement<P> | null => {\n  const visit = (node: React.ReactNode): React.ReactElement<P> | null => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return null;\n    }\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        const found = visit(item);\n        if (found) {\n          return found;\n        }\n      }\n      return null;\n    }\n    if (isElementOf(node, marker)) {\n      return node as React.ReactElement<P>;\n    }\n    if (React.isValidElement(node)) {\n      const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n      return visit(el.props.children);\n    }\n    return null;\n  };\n  return visit(children);\n};\n\ntype CollectedPivotItem = {\n  id: string;\n  label?: string;\n  content: React.ReactNode;\n  disabled?: boolean;\n};\n\nconst collectPivotItems = (children: React.ReactNode): CollectedPivotItem[] => {\n  const items: CollectedPivotItem[] = [];\n  const visit = (node: React.ReactNode): void => {\n    if (node === null || node === undefined || typeof node === \"boolean\") {\n      return;\n    }\n    if (Array.isArray(node)) {\n      node.forEach(visit);\n      return;\n    }\n    if (isElementOf(node, PivotItem)) {\n      const props = node.props as PivotItemDeclProps;\n      if (!props.id) {\n        throw new Error(\"<PivotItem> requires an 'id' prop.\");\n      }\n      items.push({\n        id: props.id,\n        label: props.label,\n        content: props.children ?? null,\n        disabled: props.disabled,\n      });\n      return;\n    }\n    if (React.isValidElement(node)) {\n      if (node.type === React.Fragment) {\n        const el = node as React.ReactElement<{ children?: React.ReactNode }>;\n        visit(el.props.children);\n      }\n    }\n  };\n  visit(children);\n  return items;\n};\n\nexport const buildConfigFromChildren = (children: React.ReactNode): PanelLayoutConfig | null => {\n  const collected = collectConfigBlock(children);\n  if (!collected) {\n    return null;\n  }\n  if (!collected.rows || collected.rows.length === 0) {\n    throw new Error(\"Config must include at least one <Row size=...> inside <Config>.\");\n  }\n  if (!collected.columns || collected.columns.length === 0) {\n    throw new Error(\"Config must include at least one <Col size=...> inside <Config>.\");\n  }\n  if (!collected.areas || collected.areas.length === 0) {\n    throw new Error(\"Config must include <Areas matrix={...}> inside <Config>.\");\n  }\n\n  const rowCount = collected.areas.length;\n  const colCount = collected.areas[0]?.length ?? 0;\n  if (rowCount !== collected.rows.length) {\n    throw new Error(`Areas row count (${rowCount}) must match Rows count (${collected.rows.length}).`);\n  }\n  if (colCount !== collected.columns.length) {\n    throw new Error(`Areas column count (${colCount}) must match Columns count (${collected.columns.length}).`);\n  }\n\n  return {\n    areas: collected.areas,\n    rows: collected.rows,\n    columns: collected.columns,\n    gap: collected.gap,\n    style: collected.style,\n  } satisfies PanelLayoutConfig;\n};\n"],"names":["toLayer","route","inferredMode","resolveRoutePositionMode","flattenRoutes","routes","result","walk","node","child","r","validateUniqueIds","seen","buildLayersFromRoutes","flat","Panel","PivotItem","isElementOf","element","component","React","buildRoutesFromChildren","children","visit","props","pivotItems","collectPivotItems","PanelLayout","config","style","layers","derivedConfig","built","buildConfigFromChildren","jsx","GridLayout","Config","Rows","Columns","Row","Col","Areas","collectTracks","marker","collectConfigBlock","findFirst","rows","columns","areasNode","areas","item","found","items","collected","rowCount","colCount"],"mappings":"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"}

package/dist/config.js

@@ -1,8 +1,9 @@
 import { jsx as u } from "react/jsx-runtime";
 import * as s from "react";
-import { G as d } from "./GridLayout-UWNxXw77.js";
+import { G as d } from "./GridLayout-B4aCqSyd.js";
+import "react-dom";
 import "./FloatingPanelFrame-3eU9AwPo.js";
-import "./FloatingWindow-CUXnEtrb.js";
+import "./FloatingWindow-Bw2djgpz.js";
 const h = (i) => {
   const r = f(i);
   if (r === "grid" && !i.area)
@@ -140,7 +141,7 @@ const h = (i) => {
     }
   };
   return n(i), r;
-}, S = ({ config: i, style: r, children: n }) => {
+}, k = ({ config: i, style: r, children: n }) => {
   const t = s.useMemo(() => E(n), [n]), e = s.useMemo(() => g(t), [t]), o = s.useMemo(() => {
     if (i)
       return i;
@@ -150,7 +151,7 @@ const h = (i) => {
     return l;
   }, [n, i]);
   return /* @__PURE__ */ u(d, { config: o, layers: e, style: r });
-}, b = () => null, k = () => null, F = () => null, z = () => null, C = () => null, I = () => null, p = (i, r) => {
+}, b = () => null, F = () => null, V = () => null, z = () => null, C = () => null, I = () => null, p = (i, r) => {
   const n = [], t = (e) => {
     if (!(e == null || typeof e == "boolean")) {
       if (Array.isArray(e)) {
@@ -249,12 +250,12 @@ const h = (i) => {
 export {
   I as Areas,
   C as Col,
-  F as Columns,
+  V as Columns,
   b as Config,
   v as Panel,
-  S as PanelLayout,
+  k as PanelLayout,
   z as Row,
-  k as Rows,
+  F as Rows,
   P as buildConfigFromChildren,
   E as buildRoutesFromChildren
 };