react-panel-layout 0.4.1 → 0.4.2

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/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

@@ -58,6 +58,32 @@ export type FloatingWindowConfig = {
     onResize?: (size: WindowSize) => void;
     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;
@@ -127,6 +153,7 @@ export type LayerDefinition = {
     backdropStyle?: React.CSSProperties;
     drawer?: DrawerBehavior;
     floating?: FloatingWindowConfig;
+    pivot?: PivotBehavior;
     style?: React.CSSProperties;
 };
 export type PanelLayoutProps = {

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

package/dist/usePivot-C8q0pMgW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-C8q0pMgW.cjs","sources":["../src/hooks/useIsomorphicLayoutEffect.ts","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file useIsomorphicLayoutEffect - SSR-safe version of useLayoutEffect\n *\n * Uses useLayoutEffect on the client and useEffect on the server to avoid warnings\n * during server-side rendering (e.g., with Next.js)\n */\nimport * as React from \"react\";\n\n/**\n * Check if we're running in a browser environment\n */\nconst isBrowser = typeof window !== \"undefined\" && typeof window.document !== \"undefined\";\n\n/**\n * SSR-safe version of useLayoutEffect\n *\n * - Client: Uses useLayoutEffect for synchronous layout updates\n * - Server: Uses useEffect to avoid SSR warnings\n *\n * @example\n * ```tsx\n * useIsomorphicLayoutEffect(() => {\n *   // This runs synchronously after DOM mutations on the client\n *   // but safely falls back to useEffect on the server\n *   measureElement();\n * }, [deps]);\n * ```\n */\nexport const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n","/**\n * @file PivotContent component for rendering pivot items with CSS animations.\n *\n * Override via CSS custom properties:\n * - --rpl-pivot-animation-enter: Animation when becoming active\n * - --rpl-pivot-animation-leave: Animation when becoming inactive\n *\n * User defines @keyframes in their CSS and references via these tokens.\n * Example:\n *   @keyframes pivotEnter {\n *     from { opacity: 0; }\n *     to { opacity: 1; }\n *   }\n *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }\n */\nimport * as React from \"react\";\nimport { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from \"../../constants/styles\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\n\nexport type PivotContentProps = {\n  id: string;\n  isActive: boolean;\n  transitionMode: \"css\" | \"none\";\n  children: React.ReactNode;\n};\n\nconst baseStyle: React.CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n};\n\n/**\n * Renders pivot content with CSS animation support.\n *\n * When transitionMode=\"css\": Applies enter/leave animations.\n * When transitionMode=\"none\": Uses React.Activity for memory optimization.\n */\nexport const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const prevActiveRef = React.useRef(isActive);\n\n  // Restart animation on state change by removing and re-adding animation\n  useIsomorphicLayoutEffect(() => {\n    if (transitionMode !== \"css\" || !ref.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const wasActive = prevActiveRef.current;\n    prevActiveRef.current = isActive;\n\n    // Only restart if state actually changed\n    if (wasActive === isActive) {\n      return;\n    }\n\n    // Force animation restart: remove animation, trigger reflow, re-add\n    el.style.animation = \"none\";\n    void el.offsetHeight; // Force reflow\n    el.style.animation = \"\";\n  }, [isActive, transitionMode]);\n\n  const style = React.useMemo<React.CSSProperties>(() => {\n    const s: React.CSSProperties = {\n      ...baseStyle,\n      pointerEvents: isActive ? \"auto\" : \"none\",\n      opacity: isActive ? 1 : 0,\n    };\n\n    if (transitionMode === \"css\") {\n      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;\n    }\n\n    return s;\n  }, [isActive, transitionMode]);\n\n  const content = (\n    <div ref={ref} data-pivot-content={id} data-active={isActive ? \"true\" : \"false\"} style={style}>\n      {children}\n    </div>\n  );\n\n  if (transitionMode === \"none\") {\n    return <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>{content}</React.Activity>;\n  }\n\n  return content;\n});\n","/**\n * @file Headless hook for managing Pivot (content switching) behavior.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\n\n/**\n * Context for sharing pivot state with Outlet component.\n * Uses a ref-based approach to avoid re-creating the Outlet component.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n};\n\nconst PivotOutletContext = React.createContext<PivotOutletContextValue | null>(null);\n\n/**\n * Stable Outlet component that subscribes to state changes.\n * This prevents remounting when activeId changes.\n */\nconst PivotOutletInner: React.FC = React.memo(() => {\n  const ctx = React.useContext(PivotOutletContext);\n  if (!ctx) {\n    throw new Error(\"PivotOutlet must be used within usePivot\");\n  }\n\n  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);\n\n  React.useEffect(() => {\n    return ctx.subscribe(forceUpdate);\n  }, [ctx]);\n\n  const { items, activeId, transitionMode } = ctx.getState();\n\n  return (\n    <>\n      {items.map((item) => (\n        <PivotContent key={item.id} id={item.id} isActive={item.id === activeId} transitionMode={transitionMode}>\n          {item.content}\n        </PivotContent>\n      ))}\n    </>\n  );\n});\n\n/**\n * Headless hook for managing content switching within a scope.\n * Provides behavior only - UI is fully customizable.\n *\n * @example\n * ```tsx\n * const { activeId, getItemProps, Outlet } = usePivot({\n *   items: [\n *     { id: 'home', label: 'Home', content: <HomePage /> },\n *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }\n *   ],\n *   defaultActiveId: 'home'\n * });\n *\n * return (\n *   <div>\n *     <nav>\n *       {items.map((item) => (\n *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>\n *       ))}\n *     </nav>\n *     <Outlet />\n *   </div>\n * );\n * ```\n */\nexport function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId> {\n  const { items, activeId: controlledActiveId, defaultActiveId, onActiveChange, transitionMode = \"css\" } = options;\n\n  const isControlled = controlledActiveId !== undefined;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState<TId>(() => {\n    if (defaultActiveId !== undefined) {\n      return defaultActiveId;\n    }\n    const firstEnabled = items.find((item) => item.disabled !== true);\n    if (!firstEnabled) {\n      throw new Error(\"usePivot: No enabled items provided\");\n    }\n    return firstEnabled.id;\n  });\n\n  const activeId = isControlled ? controlledActiveId : uncontrolledActiveId;\n\n  const setActiveId = React.useCallback(\n    (id: TId) => {\n      const target = items.find((item) => item.id === id);\n      if (!target) {\n        return;\n      }\n      if (target.disabled) {\n        return;\n      }\n      if (!isControlled) {\n        setUncontrolledActiveId(id);\n      }\n      onActiveChange?.(id);\n    },\n    [items, isControlled, onActiveChange],\n  );\n\n  const isActive = React.useCallback((id: TId): boolean => id === activeId, [activeId]);\n\n  const getItemProps = React.useCallback(\n    (id: TId): PivotItemProps => ({\n      \"data-pivot-item\": id,\n      \"data-active\": (id === activeId ? \"true\" : \"false\") as \"true\" | \"false\",\n      \"aria-selected\": id === activeId,\n      tabIndex: id === activeId ? 0 : -1,\n      onClick: () => {\n        setActiveId(id);\n      },\n    }),\n    [activeId, setActiveId],\n  );\n\n  const containerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      position: \"relative\",\n      width: \"100%\",\n      height: \"100%\",\n    }),\n    [],\n  );\n\n  // Store state in a ref for stable getState function\n  const stateRef = React.useRef({\n    items,\n    activeId,\n    transitionMode,\n  });\n\n  // Update ref when state changes\n  stateRef.current = {\n    items,\n    activeId,\n    transitionMode,\n  };\n\n  // Subscribers for state changes\n  const subscribersRef = React.useRef(new Set<() => void>());\n\n  // Notify subscribers when activeId changes\n  React.useEffect(() => {\n    subscribersRef.current.forEach((callback) => callback());\n  }, [activeId, transitionMode]);\n\n  // Stable context value (never changes)\n  const contextValue = React.useMemo<PivotOutletContextValue>(\n    () => ({\n      getState: () => stateRef.current,\n      subscribe: (callback) => {\n        subscribersRef.current.add(callback);\n        return () => subscribersRef.current.delete(callback);\n      },\n    }),\n    [],\n  );\n\n  // Stable Outlet component (reference never changes)\n  const Outlet = React.useMemo(() => {\n    const OutletComponent: React.FC = () => (\n      <PivotOutletContext.Provider value={contextValue}>\n        <div style={containerStyle} data-pivot-container>\n          <PivotOutletInner />\n        </div>\n      </PivotOutletContext.Provider>\n    );\n    OutletComponent.displayName = \"PivotOutlet\";\n    return OutletComponent;\n  }, [contextValue, containerStyle]);\n\n  return { activeId, setActiveId, isActive, getItemProps, Outlet };\n}\n"],"names":["isBrowser","useIsomorphicLayoutEffect","React","baseStyle","PivotContent","id","isActive","transitionMode","children","ref","prevActiveRef","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","content","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","options","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","contextValue","Outlet","OutletComponent"],"mappings":"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"}

package/dist/usePivot-z9gumDf-.js

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

package/dist/usePivot-z9gumDf-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-z9gumDf-.js","sources":["../src/hooks/useIsomorphicLayoutEffect.ts","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file useIsomorphicLayoutEffect - SSR-safe version of useLayoutEffect\n *\n * Uses useLayoutEffect on the client and useEffect on the server to avoid warnings\n * during server-side rendering (e.g., with Next.js)\n */\nimport * as React from \"react\";\n\n/**\n * Check if we're running in a browser environment\n */\nconst isBrowser = typeof window !== \"undefined\" && typeof window.document !== \"undefined\";\n\n/**\n * SSR-safe version of useLayoutEffect\n *\n * - Client: Uses useLayoutEffect for synchronous layout updates\n * - Server: Uses useEffect to avoid SSR warnings\n *\n * @example\n * ```tsx\n * useIsomorphicLayoutEffect(() => {\n *   // This runs synchronously after DOM mutations on the client\n *   // but safely falls back to useEffect on the server\n *   measureElement();\n * }, [deps]);\n * ```\n */\nexport const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n","/**\n * @file PivotContent component for rendering pivot items with CSS animations.\n *\n * Override via CSS custom properties:\n * - --rpl-pivot-animation-enter: Animation when becoming active\n * - --rpl-pivot-animation-leave: Animation when becoming inactive\n *\n * User defines @keyframes in their CSS and references via these tokens.\n * Example:\n *   @keyframes pivotEnter {\n *     from { opacity: 0; }\n *     to { opacity: 1; }\n *   }\n *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }\n */\nimport * as React from \"react\";\nimport { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from \"../../constants/styles\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\n\nexport type PivotContentProps = {\n  id: string;\n  isActive: boolean;\n  transitionMode: \"css\" | \"none\";\n  children: React.ReactNode;\n};\n\nconst baseStyle: React.CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n};\n\n/**\n * Renders pivot content with CSS animation support.\n *\n * When transitionMode=\"css\": Applies enter/leave animations.\n * When transitionMode=\"none\": Uses React.Activity for memory optimization.\n */\nexport const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const prevActiveRef = React.useRef(isActive);\n\n  // Restart animation on state change by removing and re-adding animation\n  useIsomorphicLayoutEffect(() => {\n    if (transitionMode !== \"css\" || !ref.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const wasActive = prevActiveRef.current;\n    prevActiveRef.current = isActive;\n\n    // Only restart if state actually changed\n    if (wasActive === isActive) {\n      return;\n    }\n\n    // Force animation restart: remove animation, trigger reflow, re-add\n    el.style.animation = \"none\";\n    void el.offsetHeight; // Force reflow\n    el.style.animation = \"\";\n  }, [isActive, transitionMode]);\n\n  const style = React.useMemo<React.CSSProperties>(() => {\n    const s: React.CSSProperties = {\n      ...baseStyle,\n      pointerEvents: isActive ? \"auto\" : \"none\",\n      opacity: isActive ? 1 : 0,\n    };\n\n    if (transitionMode === \"css\") {\n      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;\n    }\n\n    return s;\n  }, [isActive, transitionMode]);\n\n  const content = (\n    <div ref={ref} data-pivot-content={id} data-active={isActive ? \"true\" : \"false\"} style={style}>\n      {children}\n    </div>\n  );\n\n  if (transitionMode === \"none\") {\n    return <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>{content}</React.Activity>;\n  }\n\n  return content;\n});\n","/**\n * @file Headless hook for managing Pivot (content switching) behavior.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\n\n/**\n * Context for sharing pivot state with Outlet component.\n * Uses a ref-based approach to avoid re-creating the Outlet component.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n};\n\nconst PivotOutletContext = React.createContext<PivotOutletContextValue | null>(null);\n\n/**\n * Stable Outlet component that subscribes to state changes.\n * This prevents remounting when activeId changes.\n */\nconst PivotOutletInner: React.FC = React.memo(() => {\n  const ctx = React.useContext(PivotOutletContext);\n  if (!ctx) {\n    throw new Error(\"PivotOutlet must be used within usePivot\");\n  }\n\n  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);\n\n  React.useEffect(() => {\n    return ctx.subscribe(forceUpdate);\n  }, [ctx]);\n\n  const { items, activeId, transitionMode } = ctx.getState();\n\n  return (\n    <>\n      {items.map((item) => (\n        <PivotContent key={item.id} id={item.id} isActive={item.id === activeId} transitionMode={transitionMode}>\n          {item.content}\n        </PivotContent>\n      ))}\n    </>\n  );\n});\n\n/**\n * Headless hook for managing content switching within a scope.\n * Provides behavior only - UI is fully customizable.\n *\n * @example\n * ```tsx\n * const { activeId, getItemProps, Outlet } = usePivot({\n *   items: [\n *     { id: 'home', label: 'Home', content: <HomePage /> },\n *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }\n *   ],\n *   defaultActiveId: 'home'\n * });\n *\n * return (\n *   <div>\n *     <nav>\n *       {items.map((item) => (\n *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>\n *       ))}\n *     </nav>\n *     <Outlet />\n *   </div>\n * );\n * ```\n */\nexport function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId> {\n  const { items, activeId: controlledActiveId, defaultActiveId, onActiveChange, transitionMode = \"css\" } = options;\n\n  const isControlled = controlledActiveId !== undefined;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState<TId>(() => {\n    if (defaultActiveId !== undefined) {\n      return defaultActiveId;\n    }\n    const firstEnabled = items.find((item) => item.disabled !== true);\n    if (!firstEnabled) {\n      throw new Error(\"usePivot: No enabled items provided\");\n    }\n    return firstEnabled.id;\n  });\n\n  const activeId = isControlled ? controlledActiveId : uncontrolledActiveId;\n\n  const setActiveId = React.useCallback(\n    (id: TId) => {\n      const target = items.find((item) => item.id === id);\n      if (!target) {\n        return;\n      }\n      if (target.disabled) {\n        return;\n      }\n      if (!isControlled) {\n        setUncontrolledActiveId(id);\n      }\n      onActiveChange?.(id);\n    },\n    [items, isControlled, onActiveChange],\n  );\n\n  const isActive = React.useCallback((id: TId): boolean => id === activeId, [activeId]);\n\n  const getItemProps = React.useCallback(\n    (id: TId): PivotItemProps => ({\n      \"data-pivot-item\": id,\n      \"data-active\": (id === activeId ? \"true\" : \"false\") as \"true\" | \"false\",\n      \"aria-selected\": id === activeId,\n      tabIndex: id === activeId ? 0 : -1,\n      onClick: () => {\n        setActiveId(id);\n      },\n    }),\n    [activeId, setActiveId],\n  );\n\n  const containerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      position: \"relative\",\n      width: \"100%\",\n      height: \"100%\",\n    }),\n    [],\n  );\n\n  // Store state in a ref for stable getState function\n  const stateRef = React.useRef({\n    items,\n    activeId,\n    transitionMode,\n  });\n\n  // Update ref when state changes\n  stateRef.current = {\n    items,\n    activeId,\n    transitionMode,\n  };\n\n  // Subscribers for state changes\n  const subscribersRef = React.useRef(new Set<() => void>());\n\n  // Notify subscribers when activeId changes\n  React.useEffect(() => {\n    subscribersRef.current.forEach((callback) => callback());\n  }, [activeId, transitionMode]);\n\n  // Stable context value (never changes)\n  const contextValue = React.useMemo<PivotOutletContextValue>(\n    () => ({\n      getState: () => stateRef.current,\n      subscribe: (callback) => {\n        subscribersRef.current.add(callback);\n        return () => subscribersRef.current.delete(callback);\n      },\n    }),\n    [],\n  );\n\n  // Stable Outlet component (reference never changes)\n  const Outlet = React.useMemo(() => {\n    const OutletComponent: React.FC = () => (\n      <PivotOutletContext.Provider value={contextValue}>\n        <div style={containerStyle} data-pivot-container>\n          <PivotOutletInner />\n        </div>\n      </PivotOutletContext.Provider>\n    );\n    OutletComponent.displayName = \"PivotOutlet\";\n    return OutletComponent;\n  }, [contextValue, containerStyle]);\n\n  return { activeId, setActiveId, isActive, getItemProps, Outlet };\n}\n"],"names":["isBrowser","useIsomorphicLayoutEffect","React","baseStyle","PivotContent","id","isActive","transitionMode","children","ref","prevActiveRef","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","content","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","options","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","contextValue","Outlet","OutletComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,6 +30,11 @@
       "import": "./dist/floating.js",
       "require": "./dist/floating.cjs"
     },
+    "./pivot": {
+      "types": "./dist/pivot/index.d.ts",
+      "import": "./dist/pivot.js",
+      "require": "./dist/pivot.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [