react-panel-layout 0.4.1 → 0.5.0

package/dist/modules/grid/GridLayoutContext.d.ts

@@ -27,6 +27,11 @@ export type GridLayoutContextValue = {
     handleLayerPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
     getLayerRenderState: (layer: LayerDefinition) => GridLayerRenderState;
     getLayerHandleProps: (layerId: string) => GridLayerHandleProps;
+    /**
+     * Whether the GridLayout is mounted at root level.
+     * When true, scrollable layers should delegate to browser's native scroll.
+     */
+    isRootLevel: boolean;
 };
 export declare const GridLayoutProvider: React.FC<React.PropsWithChildren<{
     value: GridLayoutContextValue;

package/dist/modules/grid/resizeHandles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Resize handle configuration computation for grid tracks.
+ */
+import type { GridTrack } from "../../types";
+export type TrackHandleConfig = {
+    trackIndex: number;
+    align: "start" | "end";
+    span: {
+        start: number;
+        end: number;
+    };
+};
+export declare const computeColumnResizeHandles: (tracks: GridTrack[], areas: string[][]) => TrackHandleConfig[];
+export declare const computeRowResizeHandles: (tracks: GridTrack[], areas: string[][]) => TrackHandleConfig[];

package/dist/modules/grid/trackUtils.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file Grid track sizing utilities.
+ */
+import type * as React from "react";
+import type { GridTrack } from "../../types";
+import { type GridDirection, type ParsedGap } from "../../utils/css";
+export type TrackDirection = GridDirection;
+export declare const createTrackKey: (direction: TrackDirection, index: number) => string;
+export declare const getTrackSize: (track: GridTrack, trackSizes: Record<string, number>, direction: TrackDirection, index: number) => string;
+export declare const buildTrackTemplateString: (tracks: GridTrack[], trackSizes: Record<string, number>, direction: TrackDirection) => string;
+export declare const extractInitialTrackSizes: (tracks: GridTrack[], direction: TrackDirection) => Record<string, number>;
+export type ResolveTrackSizeParams = {
+    trackSizes: Record<string, number>;
+    track: GridTrack;
+    direction: TrackDirection;
+    trackIndex: number;
+    containerRef: React.RefObject<HTMLElement | null> | undefined;
+};
+export declare const resolveCurrentTrackSize: ({ trackSizes, track, direction, trackIndex, containerRef, }: ResolveTrackSizeParams) => number;
+export type EffectiveMaxSizeParams = {
+    track: GridTrack;
+    tracks: GridTrack[];
+    trackIndex: number;
+    direction: TrackDirection;
+    containerRef: React.RefObject<HTMLElement | null> | undefined;
+    gapSizes: ParsedGap;
+};
+export declare const calculateEffectiveMaxSize: ({ track, tracks, trackIndex, direction, containerRef, gapSizes, }: EffectiveMaxSizeParams) => number | undefined;
+export declare const applyTrackConstraints: (size: number, minSize?: number, maxSize?: number) => number;

package/dist/modules/grid/useGridTracks.d.ts

@@ -3,24 +3,15 @@
  */
 import * as React from "react";
 import type { PanelLayoutConfig } from "../../types";
-export type TrackHandleConfig = {
-    trackIndex: number;
-    align: "start" | "end";
-    span: {
-        start: number;
-        end: number;
-    };
-};
-type ParsedGap = {
-    rowGap: number;
-    columnGap: number;
-};
-type TrackDirection = "row" | "col";
-export declare const useGridTracks: (config: PanelLayoutConfig, styleProp?: React.CSSProperties) => {
+import { type ParsedGap } from "../../utils/css";
+import { type TrackDirection } from "./trackUtils";
+import { type TrackHandleConfig } from "./resizeHandles";
+export type { TrackHandleConfig } from "./resizeHandles";
+export type { TrackDirection } from "./trackUtils";
+export declare const useGridTracks: (config: PanelLayoutConfig, styleProp?: React.CSSProperties, containerRef?: React.RefObject<HTMLElement | null>) => {
     columnHandles: TrackHandleConfig[];
     rowHandles: TrackHandleConfig[];
     gapSizes: ParsedGap;
     gridStyle: React.CSSProperties;
     handleResize: (direction: TrackDirection, trackIndex: number, delta: number) => void;
 };
-export {};

package/dist/modules/grid/useLayerInteractions.d.ts

@@ -3,8 +3,9 @@ import type { GridLayoutContextValue } from "./GridLayoutContext";
 type UseLayerInteractionsArgs = {
     layers: LayerDefinition[];
     layerById: Map<string, LayerDefinition>;
+    isRootLevel: boolean;
 };
-export declare const useLayerInteractions: ({ layers, layerById, }: UseLayerInteractionsArgs) => {
+export declare const useLayerInteractions: ({ layers, layerById, isRootLevel, }: UseLayerInteractionsArgs) => {
     providerValue: GridLayoutContextValue;
     draggingLayerId: string | null;
     resizingLayerId: string | null;

package/dist/modules/panels/rendering/ContentRegistry.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @file Registry for panel content instances.
+ * Manages component lifecycle to preserve state across tab switches and panel moves.
+ *
+ * ## Architecture
+ *
+ * This module solves the problem of preserving React component state when panels
+ * move between different container elements (groups).
+ *
+ * ### The Problem
+ * React portals remount their content when the container element changes.
+ * This is React's intentional behavior, but it causes state loss when panels move.
+ *
+ * ### The Solution
+ * 1. Create a stable wrapper element per panel (outside React's tree management)
+ * 2. Use createPortal to render React content INTO the wrapper
+ * 3. Move the wrapper between containers using appendChild
+ *
+ * This works because:
+ * - React only manages content INSIDE the wrapper (via portal)
+ * - React doesn't track the wrapper's position in DOM
+ * - Moving the wrapper doesn't trigger React reconciliation
+ *
+ * ### DOM API Usage
+ * - document.createElement: Creates wrapper element (once per panel)
+ * - appendChild: Moves wrapper to target container
+ * - removeChild: Cleans up wrapper on unmount
+ *
+ * These are the minimum DOM APIs required. React features handle everything else.
+ */
+import * as React from "react";
+import type { PanelId, GroupId, TabDefinition } from "../state/types";
+type PanelPlacement = {
+    groupId: GroupId;
+    isActive: boolean;
+};
+type ContentRegistryContextValue = {
+    registerContentContainer: (groupId: GroupId, element: HTMLElement | null) => void;
+};
+export declare const useContentRegistry: () => ContentRegistryContextValue;
+type ContentRegistryProviderProps = React.PropsWithChildren<{
+    panels: Record<PanelId, TabDefinition>;
+    placements: Record<PanelId, PanelPlacement>;
+}>;
+/**
+ * Provider that manages panel content lifecycle.
+ * Caches rendered content per panel to preserve React element identity.
+ */
+export declare const ContentRegistryProvider: React.FC<ContentRegistryProviderProps>;
+export {};

package/dist/modules/panels/rendering/RenderContext.d.ts

@@ -12,6 +12,7 @@ export type PanelRenderContextValue = {
     onStartTabDrag: (tabId: PanelId, groupId: GroupId, e: React.PointerEvent) => void;
     onStartContentDrag: (groupId: GroupId, e: React.PointerEvent<HTMLDivElement>) => void;
     doubleClickToAdd?: boolean;
+    registerContentContainer: (groupId: GroupId, element: HTMLElement | null) => void;
 };
 export declare const usePanelRenderContext: () => PanelRenderContextValue;
 export declare const PanelRenderProvider: React.FC<React.PropsWithChildren<{

package/dist/modules/panels/state/types.d.ts

@@ -35,8 +35,8 @@ export type PanelSplitLimits = number | RowsColsSplitLimits | LegacySplitLimits;
 export type TabDefinition = {
     id: PanelId;
     title: string;
-    /** Render function to avoid remount on move */
-    render: () => React.ReactNode;
+    /** Render function receives panel id to enable proper keying */
+    render: (id: PanelId) => React.ReactNode;
 };
 export type GroupModel = {
     id: GroupId;

package/dist/modules/pivot/PivotContent.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file PivotContent component for rendering pivot items with CSS animations.
+ *
+ * Override via CSS custom properties:
+ * - --rpl-pivot-animation-enter: Animation when becoming active
+ * - --rpl-pivot-animation-leave: Animation when becoming inactive
+ *
+ * User defines @keyframes in their CSS and references via these tokens.
+ * Example:
+ *   @keyframes pivotEnter {
+ *     from { opacity: 0; }
+ *     to { opacity: 1; }
+ *   }
+ *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }
+ */
+import * as React from "react";
+export type PivotContentProps = {
+    id: string;
+    isActive: boolean;
+    transitionMode: "css" | "none";
+    children: React.ReactNode;
+};
+/**
+ * Renders pivot content with CSS animation support.
+ *
+ * When transitionMode="css": Applies enter/leave animations.
+ * When transitionMode="none": Uses React.Activity for memory optimization.
+ */
+export declare const PivotContent: React.FC<PivotContentProps>;

package/dist/modules/pivot/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Pivot - Headless content switching system
+ */
+export { usePivot } from "./usePivot";
+export type { PivotItem, UsePivotOptions, UsePivotResult, PivotItemProps } from "./types";

package/dist/modules/pivot/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @file Type definitions for the Pivot headless component system.
+ * Pivot manages content switching within a scope without providing UI.
+ */
+import type * as React from "react";
+/**
+ * A single content item that can be displayed in a Pivot.
+ */
+export type PivotItem<TId extends string = string> = {
+    /** Unique identifier for this content item */
+    id: TId;
+    /** Human-readable label (optional - for tab titles, menu items, etc.) */
+    label?: string;
+    /** The actual content to render when this item is active */
+    content: React.ReactNode;
+    /** Whether this item can be selected (defaults to true) */
+    disabled?: boolean;
+};
+/**
+ * Props for the usePivot hook.
+ */
+export type UsePivotOptions<TId extends string = string> = {
+    /** Array of content items to manage */
+    items: ReadonlyArray<PivotItem<TId>>;
+    /** Currently active item ID (controlled mode) */
+    activeId?: TId;
+    /** Default active item ID (uncontrolled mode) */
+    defaultActiveId?: TId;
+    /** Callback when active item changes */
+    onActiveChange?: (id: TId) => void;
+    /**
+     * Transition mode for content switching.
+     * - "css" (default) uses CSS transitions with design tokens.
+     * - "none" disables transitions (uses React.Activity for memory optimization).
+     */
+    transitionMode?: "css" | "none";
+};
+/**
+ * Props object returned by getItemProps for navigation elements.
+ */
+export type PivotItemProps = {
+    "data-pivot-item": string;
+    "data-active": "true" | "false";
+    "aria-selected": boolean;
+    tabIndex: number;
+    onClick: () => void;
+};
+/**
+ * Result from usePivot hook.
+ */
+export type UsePivotResult<TId extends string = string> = {
+    /** Current active item ID */
+    activeId: TId;
+    /** Function to change the active item */
+    setActiveId: (id: TId) => void;
+    /** Helper to check if an item is active */
+    isActive: (id: TId) => boolean;
+    /** Function to get props for navigation items (buttons, links, etc.) */
+    getItemProps: (id: TId) => PivotItemProps;
+    /** Outlet component that renders the active content (react-router style) */
+    Outlet: React.FC;
+};

package/dist/modules/pivot/usePivot.d.ts

@@ -0,0 +1,28 @@
+import type { UsePivotOptions, UsePivotResult } from "./types";
+/**
+ * Headless hook for managing content switching within a scope.
+ * Provides behavior only - UI is fully customizable.
+ *
+ * @example
+ * ```tsx
+ * const { activeId, getItemProps, Outlet } = usePivot({
+ *   items: [
+ *     { id: 'home', label: 'Home', content: <HomePage /> },
+ *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }
+ *   ],
+ *   defaultActiveId: 'home'
+ * });
+ *
+ * return (
+ *   <div>
+ *     <nav>
+ *       {items.map((item) => (
+ *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>
+ *       ))}
+ *     </nav>
+ *     <Outlet />
+ *   </div>
+ * );
+ * ```
+ */
+export declare function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId>;

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

@@ -0,0 +1,9 @@
+import type { LayerDefinition, WindowPosition, WindowSize } from "../../types";
+export declare const useFloatingState: (layers: LayerDefinition[]) => {
+    getPosition: (layerId: string) => WindowPosition;
+    getSize: (layerId: string) => WindowSize;
+    getZIndex: (layerId: string) => number | undefined;
+    updatePosition: (layerId: string, position: WindowPosition) => void;
+    updateSize: (layerId: string, size: WindowSize) => void;
+    close: (layerId: string) => void;
+};

package/dist/pivot/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Pivot entry point - Headless content switching
+ *
+ * Import via: import { usePivot } from "react-panel-layout/pivot";
+ */
+export { usePivot } from "../modules/pivot";
+export type { PivotItem, UsePivotOptions, UsePivotResult, PivotItemProps } from "../modules/pivot";
+export type { PivotBehavior, PivotBehaviorItem } from "../types";

package/dist/pivot.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePivot-C8q0pMgW.cjs");exports.usePivot=e.usePivot;
+//# sourceMappingURL=pivot.cjs.map

package/dist/pivot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pivot.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/pivot.js

@@ -0,0 +1,5 @@
+import { u as r } from "./usePivot-z9gumDf-.js";
+export {
+  r as usePivot
+};
+//# sourceMappingURL=pivot.js.map

package/dist/pivot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pivot.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/styles-DcG3aIFx.cjs

@@ -0,0 +1,2 @@
+"use strict";const _="var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.12))",E="var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))",R="var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))",A="var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))",D="var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))",O="var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))",r="var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))",I="var(--rpl-color-surface, #fff)",N="var(--rpl-color-surface-2, #fafafa)",T="var(--rpl-color-border, #e5e7eb)",a="var(--rpl-color-muted-fg, #6b7280)",S="var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))",o="var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))",s="var(--rpl-drawer-transition-duration, 220ms)",n="var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))",G="var(--rpl-pivot-animation-enter, none)",L="var(--rpl-pivot-animation-leave, none)",t="var(--rpl-radius-suggest, 6px)",e="var(--rpl-size-suggest-border, 2px)";const p="var(--rpl-size-resize-handle-thickness, 4px)",c="var(--rpl-size-split-handle-thickness, 6px)",l="var(--rpl-z-overlay, 9998)",P="var(--rpl-z-tabdrag-overlay, 9999)",i=p,C="var(--rpl-z-resize-handle, 1000)",d=4,H="var(--rpl-size-grid-layer-corner-hit, 14px)",v="var(--rpl-size-grid-layer-edge-hit-thickness, 12px)",g=l,F=e,U=t,B=A,W=D,Z=6,x=P,b="var(--rpl-space-tab-drag-preview-offset-x, 12px)",V="var(--rpl-space-tab-drag-preview-offset-y, 12px)",f="var(--rpl-size-tab-drag-insert-guide-width, 2px)",h="var(--rpl-radius-tab-drag-insert-guide, 1px)",z=O,u=r,X="var(--rpl-radius-floating-panel, 8px)",w="var(--rpl-space-floating-panel-gap, 8px)",K="var(--rpl-space-floating-panel-header-padding-y, 8px)",Y="var(--rpl-space-floating-panel-header-padding-x, 12px)",M="var(--rpl-space-floating-panel-content-padding, 12px)",y="var(--rpl-size-floating-panel-meta-font, 12px)",m="var(--rpl-space-floating-panel-controls-gap, 6px)",k=I,j=N,q=T,J=a,Q=S,$="var(--rpl-space-drawer-header-padding-y, 10px)",__="var(--rpl-space-drawer-header-padding-x, 12px)",E_="var(--rpl-space-drawer-header-gap, 8px)",R_="var(--rpl-space-drawer-content-padding, 12px)",A_="var(--rpl-size-drawer-close-button-font, 18px)",D_=c,O_="var(--rpl-size-horizontal-divider-width, 4px)";exports.COLOR_DRAWER_BACKDROP=o;exports.COLOR_RESIZE_HANDLE_ACTIVE=R;exports.COLOR_RESIZE_HANDLE_HOVER=E;exports.COLOR_RESIZE_HANDLE_IDLE=_;exports.CSS_VAR_PREFIX="rpl";exports.DRAWER_CLOSE_BUTTON_FONT_SIZE=A_;exports.DRAWER_CONTENT_PADDING=R_;exports.DRAWER_HEADER_GAP=E_;exports.DRAWER_HEADER_PADDING_X=__;exports.DRAWER_HEADER_PADDING_Y=$;exports.DRAWER_TRANSITION_DURATION=s;exports.DRAWER_TRANSITION_EASING=n;exports.DROP_SUGGEST_BG_COLOR=W;exports.DROP_SUGGEST_BORDER_COLOR=B;exports.DROP_SUGGEST_BORDER_RADIUS=U;exports.DROP_SUGGEST_BORDER_WIDTH=F;exports.DROP_SUGGEST_PADDING_PX=Z;exports.DROP_SUGGEST_Z_INDEX=g;exports.FLOATING_PANEL_BORDER_COLOR=q;exports.FLOATING_PANEL_BORDER_RADIUS=X;exports.FLOATING_PANEL_CONTENT_PADDING=M;exports.FLOATING_PANEL_CONTROLS_GAP=m;exports.FLOATING_PANEL_GAP=w;exports.FLOATING_PANEL_HEADER_PADDING_X=Y;exports.FLOATING_PANEL_HEADER_PADDING_Y=K;exports.FLOATING_PANEL_META_FONT_SIZE=y;exports.FLOATING_PANEL_MUTED_FG_COLOR=J;exports.FLOATING_PANEL_SHADOW=Q;exports.FLOATING_PANEL_SURFACE_2_COLOR=j;exports.FLOATING_PANEL_SURFACE_COLOR=k;exports.GRID_HANDLE_THICKNESS=d;exports.GRID_LAYER_CORNER_HIT_SIZE=H;exports.GRID_LAYER_EDGE_HIT_THICKNESS=v;exports.HORIZONTAL_DIVIDER_WIDTH=O_;exports.PIVOT_ANIMATION_ENTER=G;exports.PIVOT_ANIMATION_LEAVE=L;exports.RESIZE_HANDLE_THICKNESS=i;exports.RESIZE_HANDLE_Z_INDEX=C;exports.SPLIT_HANDLE_THICKNESS=D_;exports.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS=h;exports.TAB_DRAG_INSERT_GUIDE_COLOR=z;exports.TAB_DRAG_INSERT_GUIDE_SHADOW=u;exports.TAB_DRAG_INSERT_GUIDE_WIDTH=f;exports.TAB_DRAG_OVERLAY_Z_INDEX=x;exports.TAB_DRAG_PREVIEW_OFFSET_X=b;exports.TAB_DRAG_PREVIEW_OFFSET_Y=V;
+//# sourceMappingURL=styles-DcG3aIFx.cjs.map

package/dist/styles-DcG3aIFx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-DcG3aIFx.cjs","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * These constants reference CSS variables defined in variables.css.\n * This allows users to override theme values via CSS while maintaining\n * type-safe constants in TypeScript.\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n * Users can override these via CSS variables (--rpl-*)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = 'rpl';\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg, #d5d7de)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg, #2b2d35)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg, #1e1f24)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg, #0b0b0c)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary, #2196f3)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.12))\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg, #e9ebf0)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface, #fff)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2, #fafafa)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border, #e5e7eb)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg, #6b7280)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))\";\nexport const COLOR_DRAWER_BACKDROP = \"var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))\";\n\n/**\n * Drawer transitions\n */\nexport const DRAWER_TRANSITION_DURATION = \"var(--rpl-drawer-transition-duration, 220ms)\";\nexport const DRAWER_TRANSITION_EASING = \"var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Pivot animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Enter: Applied when content becomes active\n * - Leave: Applied when content becomes inactive\n */\nexport const PIVOT_ANIMATION_ENTER = \"var(--rpl-pivot-animation-enter, none)\";\nexport const PIVOT_ANIMATION_LEAVE = \"var(--rpl-pivot-animation-leave, none)\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font, 12px)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y, 4px)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x, 8px)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap, 6px)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y, 4px)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x, 6px)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab, 4px)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest, 6px)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border, 2px)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness, 4px)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness, 6px)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding, 6px)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay, 9998)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay, 9999)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay, 10000)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle, 1000)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit, 14px)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness, 12px)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x, 12px)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y, 12px)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview, 6px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y, 4px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x, 8px)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font, 12px)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width, 2px)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide, 1px)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel, 8px)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x, 12px)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding, 12px)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font, 12px)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap, 6px)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y, 10px)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x, 12px)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap, 8px)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding, 12px)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font, 18px)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width, 4px)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset, 4px)\";\n"],"names":["COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","COLOR_DRAWER_BACKDROP","DRAWER_TRANSITION_DURATION","DRAWER_TRANSITION_EASING","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","DRAWER_CLOSE_BUTTON_FONT_SIZE","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"aAgDO,MAAMA,EAA2B,iEAC3BC,EAA4B,iEAC5BC,EAA6B,kEAK7BC,EAA4B,gEAC5BC,EAAwB,6DAaxBC,EAAqB,2DACrBC,EAA4B,2EAM5BC,EAA4B,iCAC5BC,EAA8B,sCAC9BC,EAA2B,mCAC3BC,EAA6B,qCAC7BC,EAAgC,yDAChCC,EAAwB,uDAKxBC,EAA6B,+CAC7BC,EAA2B,sEAQ3BC,EAAwB,yCACxBC,EAAwB,yCAwBxBC,EAAiB,iCAKjBC,EAAsB,sCAO5B,MAAMC,EAA+B,+CAC/BC,EAA8B,8CAW9BC,EAAY,6BACZC,EAAoB,qCAUpBC,EAA0BJ,EAC1BK,EAAwB,mCAKxBC,EAAwB,EAKxBC,EAA6B,8CAC7BC,EAAgC,sDAKhCC,EAAuBP,EACvBQ,EAA4BX,EAC5BY,EAA6Bb,EAC7Bc,EAA4B5B,EAC5B6B,EAAwB5B,EAExB6B,EAA0B,EAK1BC,EAA2BZ,EAC3Ba,EAA4B,mDAC5BC,EAA4B,mDAK5BC,EAA8B,mDAC9BC,EAAsC,+CAKtCC,EAA8BlC,EAC9BmC,EAA+BlC,EAU/BmC,EAA+B,wCAC/BC,EAAqB,2CACrBC,EAAkC,wDAClCC,EAAkC,yDAClCC,EAAiC,wDACjCC,EAAgC,iDAChCC,EAA8B,oDAC9BC,EAA+BzC,EAC/B0C,EAAiCzC,EACjC0C,EAA8BzC,EAC9B0C,EAAgCzC,EAChC0C,EAAwBzC,EAKxB0C,EAA0B,iDAC1BC,GAA0B,iDAC1BC,GAAoB,0CACpBC,GAAyB,gDACzBC,GAAgC,iDAQhCC,GAAyBtC,EAKzBuC,GAA2B"}

package/dist/styles-w0ZixggV.js

@@ -0,0 +1,51 @@
+const I = "rpl", l = "var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.12))", N = "var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))", T = "var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))", a = "var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))", _ = "var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))", r = "var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))", s = "var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))", E = "var(--rpl-color-surface, #fff)", o = "var(--rpl-color-surface-2, #fafafa)", R = "var(--rpl-color-border, #e5e7eb)", n = "var(--rpl-color-muted-fg, #6b7280)", e = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))", S = "var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))", i = "var(--rpl-drawer-transition-duration, 220ms)", G = "var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))", L = "var(--rpl-pivot-animation-enter, none)", d = "var(--rpl-pivot-animation-leave, none)", t = "var(--rpl-radius-suggest, 6px)", O = "var(--rpl-size-suggest-border, 2px)";
+const D = "var(--rpl-size-resize-handle-thickness, 4px)", p = "var(--rpl-size-split-handle-thickness, 6px)", A = "var(--rpl-z-overlay, 9998)", c = "var(--rpl-z-tabdrag-overlay, 9999)", v = D, g = "var(--rpl-z-resize-handle, 1000)", C = 4, P = "var(--rpl-size-grid-layer-corner-hit, 14px)", H = "var(--rpl-size-grid-layer-edge-hit-thickness, 12px)", x = A, U = O, F = t, b = a, f = _, h = 6, B = c, z = "var(--rpl-space-tab-drag-preview-offset-x, 12px)", Z = "var(--rpl-space-tab-drag-preview-offset-y, 12px)", u = "var(--rpl-size-tab-drag-insert-guide-width, 2px)", W = "var(--rpl-radius-tab-drag-insert-guide, 1px)", w = r, V = s, K = "var(--rpl-radius-floating-panel, 8px)", y = "var(--rpl-space-floating-panel-gap, 8px)", X = "var(--rpl-space-floating-panel-header-padding-y, 8px)", Y = "var(--rpl-space-floating-panel-header-padding-x, 12px)", m = "var(--rpl-space-floating-panel-content-padding, 12px)", M = "var(--rpl-size-floating-panel-meta-font, 12px)", k = "var(--rpl-space-floating-panel-controls-gap, 6px)", j = E, q = o, J = R, Q = n, $ = e, aa = "var(--rpl-space-drawer-header-padding-y, 10px)", _a = "var(--rpl-space-drawer-header-padding-x, 12px)", ra = "var(--rpl-space-drawer-header-gap, 8px)", sa = "var(--rpl-space-drawer-content-padding, 12px)", Ea = "var(--rpl-size-drawer-close-button-font, 18px)", oa = p, Ra = "var(--rpl-size-horizontal-divider-width, 4px)";
+export {
+  f as A,
+  U as B,
+  S as C,
+  i as D,
+  b as E,
+  $ as F,
+  H as G,
+  Ra as H,
+  h as I,
+  Z as J,
+  V as K,
+  w as L,
+  W as M,
+  u as N,
+  B as O,
+  L as P,
+  I as Q,
+  v as R,
+  oa as S,
+  z as T,
+  j as a,
+  J as b,
+  K as c,
+  q as d,
+  X as e,
+  Y as f,
+  y as g,
+  M as h,
+  Q as i,
+  k as j,
+  m as k,
+  d as l,
+  G as m,
+  sa as n,
+  ra as o,
+  aa as p,
+  _a as q,
+  Ea as r,
+  P as s,
+  T as t,
+  N as u,
+  l as v,
+  g as w,
+  C as x,
+  x as y,
+  F as z
+};
+//# sourceMappingURL=styles-w0ZixggV.js.map

package/dist/styles-w0ZixggV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-w0ZixggV.js","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * These constants reference CSS variables defined in variables.css.\n * This allows users to override theme values via CSS while maintaining\n * type-safe constants in TypeScript.\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n * Users can override these via CSS variables (--rpl-*)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = 'rpl';\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg, #d5d7de)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg, #2b2d35)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg, #1e1f24)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg, #0b0b0c)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary, #2196f3)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.12))\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg, #e9ebf0)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface, #fff)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2, #fafafa)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border, #e5e7eb)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg, #6b7280)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))\";\nexport const COLOR_DRAWER_BACKDROP = \"var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))\";\n\n/**\n * Drawer transitions\n */\nexport const DRAWER_TRANSITION_DURATION = \"var(--rpl-drawer-transition-duration, 220ms)\";\nexport const DRAWER_TRANSITION_EASING = \"var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Pivot animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Enter: Applied when content becomes active\n * - Leave: Applied when content becomes inactive\n */\nexport const PIVOT_ANIMATION_ENTER = \"var(--rpl-pivot-animation-enter, none)\";\nexport const PIVOT_ANIMATION_LEAVE = \"var(--rpl-pivot-animation-leave, none)\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font, 12px)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y, 4px)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x, 8px)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap, 6px)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y, 4px)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x, 6px)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab, 4px)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest, 6px)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border, 2px)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness, 4px)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness, 6px)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding, 6px)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay, 9998)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay, 9999)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay, 10000)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle, 1000)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit, 14px)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness, 12px)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x, 12px)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y, 12px)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview, 6px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y, 4px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x, 8px)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font, 12px)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width, 2px)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide, 1px)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel, 8px)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x, 12px)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding, 12px)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font, 12px)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap, 6px)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y, 10px)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x, 12px)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap, 8px)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding, 12px)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font, 18px)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width, 4px)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset, 4px)\";\n"],"names":["CSS_VAR_PREFIX","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","COLOR_DRAWER_BACKDROP","DRAWER_TRANSITION_DURATION","DRAWER_TRANSITION_EASING","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","DRAWER_CLOSE_BUTTON_FONT_SIZE","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"AAyBO,MAAMA,IAAiB,OAuBjBC,IAA2B,kEAC3BC,IAA4B,kEAC5BC,IAA6B,mEAK7BC,IAA4B,iEAC5BC,IAAwB,8DAaxBC,IAAqB,4DACrBC,IAA4B,4EAM5BC,IAA4B,kCAC5BC,IAA8B,uCAC9BC,IAA2B,oCAC3BC,IAA6B,sCAC7BC,IAAgC,0DAChCC,IAAwB,wDAKxBC,IAA6B,gDAC7BC,IAA2B,uEAQ3BC,IAAwB,0CACxBC,IAAwB,0CAwBxBC,IAAiB,kCAKjBC,IAAsB;AAO5B,MAAMC,IAA+B,gDAC/BC,IAA8B,+CAW9BC,IAAY,8BACZC,IAAoB,sCAUpBC,IAA0BJ,GAC1BK,IAAwB,oCAKxBC,IAAwB,GAKxBC,IAA6B,+CAC7BC,IAAgC,uDAKhCC,IAAuBP,GACvBQ,IAA4BX,GAC5BY,IAA6Bb,GAC7Bc,IAA4B5B,GAC5B6B,IAAwB5B,GAExB6B,IAA0B,GAK1BC,IAA2BZ,GAC3Ba,IAA4B,oDAC5BC,IAA4B,oDAK5BC,IAA8B,oDAC9BC,IAAsC,gDAKtCC,IAA8BlC,GAC9BmC,IAA+BlC,GAU/BmC,IAA+B,yCAC/BC,IAAqB,4CACrBC,IAAkC,yDAClCC,IAAkC,0DAClCC,IAAiC,yDACjCC,IAAgC,kDAChCC,IAA8B,qDAC9BC,IAA+BzC,GAC/B0C,IAAiCzC,GACjC0C,IAA8BzC,GAC9B0C,IAAgCzC,GAChC0C,IAAwBzC,GAKxB0C,KAA0B,kDAC1BC,KAA0B,kDAC1BC,KAAoB,2CACpBC,KAAyB,iDACzBC,KAAgC,kDAQhCC,KAAyBtC,GAKzBuC,KAA2B;"}

package/dist/types.d.ts

@@ -49,21 +49,101 @@ export type PopupWindowFactoryConfig = {
     bounds: WindowBounds;
 };
 export type FloatingWindowMode = "embedded" | "popup";
-export type FloatingWindowConfig = {
-    mode?: FloatingWindowMode;
+export type FloatingHeaderConfig = {
+    /** Header title text */
+    title?: string;
+    /** Show close button (requires onClose callback) */
+    showCloseButton?: boolean;
+};
+export type FloatingBehavior = {
+    /** Controlled position - when defined, component uses this value directly */
+    position?: WindowPosition;
+    /** Initial position for uncontrolled mode */
+    defaultPosition?: WindowPosition;
+    /** Controlled size - when defined, component uses this value directly */
+    size?: WindowSize;
+    /** Initial size for uncontrolled mode */
+    defaultSize?: WindowSize;
+    /** Z-index for stacking order */
+    zIndex?: number;
+    /** Enable drag-to-move functionality */
     draggable?: boolean;
+    /** Enable resize handles */
     resizable?: boolean;
+    /** Size constraints for resizing */
     constraints?: WindowConstraints;
+    /** Called when position changes (drag/move) */
     onMove?: (position: WindowPosition) => void;
+    /** Called when size changes (resize) */
     onResize?: (size: WindowSize) => void;
+    /** Called when close button is clicked */
+    onClose?: () => void;
+    /**
+     * Use built-in chrome (FloatingPanelFrame with border, shadow, background).
+     * When true and header is provided, header auto-enables drag handle.
+     * Defaults to false.
+     */
+    chrome?: boolean;
+    /**
+     * Header configuration (renders header when provided).
+     * When chrome is true and header is provided, header becomes the drag handle.
+     */
+    header?: FloatingHeaderConfig;
+    /** Accessible label when header.title is not provided */
+    ariaLabel?: string;
+    /**
+     * Transition mode for position/size changes.
+     * - "css" uses CSS transitions.
+     * - "none" disables transitions.
+     */
+    transitionMode?: "css" | "none";
+    /** Override transition duration (e.g., "200ms") */
+    transitionDuration?: string;
+    /** Override transition easing (e.g., "ease-out") */
+    transitionEasing?: string;
+    /** Display mode: "embedded" (default) or "popup" (browser window) */
+    mode?: FloatingWindowMode;
+    /** Popup-specific options when mode is "popup" */
     popup?: PopupWindowOptions;
 };
+export type PivotBehaviorItem = {
+    /** Unique identifier for this content item */
+    id: string;
+    /** Human-readable label (optional) */
+    label?: string;
+    /** The actual content to render when this item is active */
+    content: React.ReactNode;
+    /** Whether this item can be selected */
+    disabled?: boolean;
+};
+export type PivotBehavior = {
+    /** Array of content items to switch between */
+    items: PivotBehaviorItem[];
+    /** Currently active item ID (controlled mode) */
+    activeId?: string;
+    /** Default active item ID (uncontrolled mode) */
+    defaultActiveId?: string;
+    /** Callback when active item changes */
+    onActiveChange?: (id: string) => void;
+    /**
+     * Transition mode for content switching.
+     * - "css" (default) uses CSS transitions via design tokens.
+     * - "none" disables transitions (uses React.Activity for memory optimization).
+     */
+    transitionMode?: "css" | "none";
+};
 export type DrawerBehavior = {
     /** Optional controlled state */
     defaultOpen?: boolean;
     open?: boolean;
     /** Whether clicking backdrop dismisses the drawer */
     dismissible?: boolean;
+    /**
+     * Anchor edge for the drawer.
+     * - "left", "right", "top", "bottom"
+     * - When not specified, inferred from position prop
+     */
+    anchor?: "left" | "right" | "top" | "bottom";
     /**
      * Transition mode for drawer visibility.
      * - "css" (default) uses CSS transform transitions.
@@ -117,17 +197,39 @@ export type LayerDefinition = {
      * If `floating` is present, behaves as absolute (embedded) or relative (popup).
      */
     positionMode?: LayerPositionMode;
-    /** Absolute/fixed offsets when positionMode !== 'grid'. */
+    /**
+     * Position offsets for non-floating layers (drawer, absolute positioned).
+     * For floating layers, use `floating.position` or `floating.defaultPosition` instead.
+     */
     position?: WindowPosition;
+    /**
+     * Stacking order for non-floating layers.
+     * For floating layers, use `floating.zIndex` instead.
+     */
     zIndex?: number;
+    /**
+     * Width for non-floating layers.
+     * For floating layers, use `floating.size` or `floating.defaultSize` instead.
+     */
     width?: string | number;
+    /**
+     * Height for non-floating layers.
+     * For floating layers, use `floating.size` or `floating.defaultSize` instead.
+     */
     height?: string | number;
     pointerEvents?: boolean | "auto" | "none";
     /** Optional backdrop style (used by DrawerBehaviour) */
     backdropStyle?: React.CSSProperties;
     drawer?: DrawerBehavior;
-    floating?: FloatingWindowConfig;
+    /** Floating window behavior configuration */
+    floating?: FloatingBehavior;
+    pivot?: PivotBehavior;
     style?: React.CSSProperties;
+    /**
+     * When true, enables scrolling within this panel (overflow: auto).
+     * When false or omitted, content overflow is hidden (default behavior).
+     */
+    scrollable?: boolean;
 };
 export type PanelLayoutProps = {
     config: PanelLayoutConfig;

package/dist/usePivot-C8q0pMgW.cjs

@@ -0,0 +1,2 @@
+"use strict";const d=require("react/jsx-runtime"),j=require("react"),y=require("./styles-DcG3aIFx.cjs");function R(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const u=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(e,o,u.get?u:{enumerable:!0,get:()=>s[o]})}}return e.default=s,Object.freeze(e)}const n=R(j),C=typeof window<"u"&&typeof window.document<"u",w=C?n.useLayoutEffect:n.useEffect,N={position:"absolute",inset:0,width:"100%",height:"100%"},S=n.memo(({id:s,isActive:e,transitionMode:o,children:u})=>{const i=n.useRef(null),r=n.useRef(e);w(()=>{if(o!=="css"||!i.current)return;const a=i.current,c=r.current;r.current=e,c!==e&&(a.style.animation="none",a.offsetHeight,a.style.animation="")},[e,o]);const l=n.useMemo(()=>{const a={...N,pointerEvents:e?"auto":"none",opacity:e?1:0};return o==="css"&&(a.animation=e?y.PIVOT_ANIMATION_ENTER:y.PIVOT_ANIMATION_LEAVE),a},[e,o]),f=d.jsx("div",{ref:i,"data-pivot-content":s,"data-active":e?"true":"false",style:l,children:u});return o==="none"?d.jsx(n.Activity,{mode:e?"visible":"hidden",children:f}):f}),E=n.createContext(null),A=n.memo(()=>{const s=n.useContext(E);if(!s)throw new Error("PivotOutlet must be used within usePivot");const[,e]=n.useReducer(r=>r+1,0);n.useEffect(()=>s.subscribe(e),[s]);const{items:o,activeId:u,transitionMode:i}=s.getState();return d.jsx(d.Fragment,{children:o.map(r=>d.jsx(S,{id:r.id,isActive:r.id===u,transitionMode:i,children:r.content},r.id))})});function _(s){const{items:e,activeId:o,defaultActiveId:u,onActiveChange:i,transitionMode:r="css"}=s,l=o!==void 0,[f,a]=n.useState(()=>{if(u!==void 0)return u;const t=e.find(v=>v.disabled!==!0);if(!t)throw new Error("usePivot: No enabled items provided");return t.id}),c=l?o:f,m=n.useCallback(t=>{const v=e.find(x=>x.id===t);v&&(v.disabled||(l||a(t),i?.(t)))},[e,l,i]),O=n.useCallback(t=>t===c,[c]),P=n.useCallback(t=>({"data-pivot-item":t,"data-active":t===c?"true":"false","aria-selected":t===c,tabIndex:t===c?0:-1,onClick:()=>{m(t)}}),[c,m]),b=n.useMemo(()=>({position:"relative",width:"100%",height:"100%"}),[]),h=n.useRef({items:e,activeId:c,transitionMode:r});h.current={items:e,activeId:c,transitionMode:r};const p=n.useRef(new Set);n.useEffect(()=>{p.current.forEach(t=>t())},[c,r]);const I=n.useMemo(()=>({getState:()=>h.current,subscribe:t=>(p.current.add(t),()=>p.current.delete(t))}),[]),g=n.useMemo(()=>{const t=()=>d.jsx(E.Provider,{value:I,children:d.jsx("div",{style:b,"data-pivot-container":!0,children:d.jsx(A,{})})});return t.displayName="PivotOutlet",t},[I,b]);return{activeId:c,setActiveId:m,isActive:O,getItemProps:P,Outlet:g}}exports.useIsomorphicLayoutEffect=w;exports.usePivot=_;
+//# sourceMappingURL=usePivot-C8q0pMgW.cjs.map