react-panel-layout 0.4.2 → 0.5.1

package/dist/{styles-DcG3aIFx.cjs.map → styles-CA2_zLZt.js.map}

@@ -1 +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"}
+{"version":3,"file":"styles-CA2_zLZt.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.0))\";\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_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-floating-panel-close-button-font, 1.25rem)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_PADDING =\n  \"var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)\";\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_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","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","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"AAyBO,MAAMA,IAAiB,OAuBjBC,IAA2B,iEAC3BC,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,IAAwC,6DACxCC,IACX,wEACWC,IAA+B3C,GAC/B4C,IAAiC3C,GACjC4C,IAA8B3C,GAC9B4C,KAAgC3C,GAChC4C,KAAwB3C,GAKxB4C,KAA0B,kDAC1BC,KAA0B,kDAC1BC,KAAoB,2CACpBC,KAAyB,iDASzBC,KAAyBvC,GAKzBwC,KAA2B;"}

package/dist/styles-PsqGOEJP.cjs

@@ -0,0 +1,2 @@
+"use strict";const _="var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))",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))",L="var(--rpl-drawer-transition-duration, 220ms)",n="var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))",s="var(--rpl-pivot-animation-enter, none)",G="var(--rpl-pivot-animation-leave, none)",e="var(--rpl-radius-suggest, 6px)",t="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)",F=l,g=t,U=e,B=A,Z=D,W=6,x=P,b="var(--rpl-space-tab-drag-preview-offset-x, 12px)",f="var(--rpl-space-tab-drag-preview-offset-y, 12px)",V="var(--rpl-size-tab-drag-insert-guide-width, 2px)",h="var(--rpl-radius-tab-drag-insert-guide, 1px)",u=O,z=r,X="var(--rpl-radius-floating-panel, 8px)",K="var(--rpl-space-floating-panel-gap, 8px)",Y="var(--rpl-space-floating-panel-header-padding-y, 8px)",w="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)",y="var(--rpl-space-floating-panel-controls-gap, 6px)",k="var(--rpl-size-floating-panel-close-button-font, 1.25rem)",j="var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)",q=I,J=N,Q=T,$=a,__=S,E_="var(--rpl-space-drawer-header-padding-y, 10px)",R_="var(--rpl-space-drawer-header-padding-x, 12px)",A_="var(--rpl-space-drawer-header-gap, 8px)",D_="var(--rpl-space-drawer-content-padding, 12px)",O_=c,r_="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_CONTENT_PADDING=D_;exports.DRAWER_HEADER_GAP=A_;exports.DRAWER_HEADER_PADDING_X=R_;exports.DRAWER_HEADER_PADDING_Y=E_;exports.DRAWER_TRANSITION_DURATION=L;exports.DRAWER_TRANSITION_EASING=n;exports.DROP_SUGGEST_BG_COLOR=Z;exports.DROP_SUGGEST_BORDER_COLOR=B;exports.DROP_SUGGEST_BORDER_RADIUS=U;exports.DROP_SUGGEST_BORDER_WIDTH=g;exports.DROP_SUGGEST_PADDING_PX=W;exports.DROP_SUGGEST_Z_INDEX=F;exports.FLOATING_PANEL_BORDER_COLOR=Q;exports.FLOATING_PANEL_BORDER_RADIUS=X;exports.FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE=k;exports.FLOATING_PANEL_CLOSE_BUTTON_PADDING=j;exports.FLOATING_PANEL_CONTENT_PADDING=M;exports.FLOATING_PANEL_CONTROLS_GAP=y;exports.FLOATING_PANEL_GAP=K;exports.FLOATING_PANEL_HEADER_PADDING_X=w;exports.FLOATING_PANEL_HEADER_PADDING_Y=Y;exports.FLOATING_PANEL_META_FONT_SIZE=m;exports.FLOATING_PANEL_MUTED_FG_COLOR=$;exports.FLOATING_PANEL_SHADOW=__;exports.FLOATING_PANEL_SURFACE_2_COLOR=J;exports.FLOATING_PANEL_SURFACE_COLOR=q;exports.GRID_HANDLE_THICKNESS=d;exports.GRID_LAYER_CORNER_HIT_SIZE=H;exports.GRID_LAYER_EDGE_HIT_THICKNESS=v;exports.HORIZONTAL_DIVIDER_WIDTH=r_;exports.PIVOT_ANIMATION_ENTER=s;exports.PIVOT_ANIMATION_LEAVE=G;exports.RESIZE_HANDLE_THICKNESS=i;exports.RESIZE_HANDLE_Z_INDEX=C;exports.SPLIT_HANDLE_THICKNESS=O_;exports.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS=h;exports.TAB_DRAG_INSERT_GUIDE_COLOR=u;exports.TAB_DRAG_INSERT_GUIDE_SHADOW=z;exports.TAB_DRAG_INSERT_GUIDE_WIDTH=V;exports.TAB_DRAG_OVERLAY_Z_INDEX=x;exports.TAB_DRAG_PREVIEW_OFFSET_X=b;exports.TAB_DRAG_PREVIEW_OFFSET_Y=f;
+//# sourceMappingURL=styles-PsqGOEJP.cjs.map

package/dist/styles-PsqGOEJP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-PsqGOEJP.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.0))\";\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_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-floating-panel-close-button-font, 1.25rem)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_PADDING =\n  \"var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)\";\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_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","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","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"aAgDO,MAAMA,EAA2B,gEAC3BC,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,EAAwC,4DACxCC,EACX,uEACWC,EAA+B3C,EAC/B4C,EAAiC3C,EACjC4C,EAA8B3C,EAC9B4C,EAAgC3C,EAChC4C,GAAwB3C,EAKxB4C,GAA0B,iDAC1BC,GAA0B,iDAC1BC,GAAoB,0CACpBC,GAAyB,gDASzBC,GAAyBvC,EAKzBwC,GAA2B"}

package/dist/types.d.ts

@@ -49,13 +49,61 @@ 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 = {
@@ -90,6 +138,12 @@ export type DrawerBehavior = {
     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.
@@ -143,18 +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/useIsomorphicLayoutEffect-DGRNF4Lf.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react");function u(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const n=u(r),f=typeof window<"u"&&typeof window.document<"u",s=f?n.useLayoutEffect:n.useEffect;exports.useIsomorphicLayoutEffect=s;
+//# sourceMappingURL=useIsomorphicLayoutEffect-DGRNF4Lf.cjs.map

package/dist/useIsomorphicLayoutEffect-DGRNF4Lf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect-DGRNF4Lf.cjs","sources":["../src/hooks/useIsomorphicLayoutEffect.ts"],"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"],"names":["isBrowser","useIsomorphicLayoutEffect","React"],"mappings":"gUAWMA,EAAY,OAAO,OAAW,KAAe,OAAO,OAAO,SAAa,IAiBjEC,EAA4BD,EAAYE,EAAM,gBAAkBA,EAAM"}

package/dist/useIsomorphicLayoutEffect-DhmEnmZ_.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const o = typeof window < "u" && typeof window.document < "u", t = o ? e.useLayoutEffect : e.useEffect;
+export {
+  t as u
+};
+//# sourceMappingURL=useIsomorphicLayoutEffect-DhmEnmZ_.js.map

package/dist/useIsomorphicLayoutEffect-DhmEnmZ_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect-DhmEnmZ_.js","sources":["../src/hooks/useIsomorphicLayoutEffect.ts"],"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"],"names":["isBrowser","useIsomorphicLayoutEffect","React"],"mappings":";AAWA,MAAMA,IAAY,OAAO,SAAW,OAAe,OAAO,OAAO,WAAa,KAiBjEC,IAA4BD,IAAYE,EAAM,kBAAkBA,EAAM;"}

package/dist/usePivot-BS-DGfwd.cjs

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

package/dist/usePivot-BS-DGfwd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-BS-DGfwd.cjs","sources":["../src/hooks/useContentCache.tsx","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\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 *\n * Includes content caching to preserve React component state across re-renders.\n * This is essential for maintaining internal state when parent components\n * re-create the items array.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\nimport { useContentCache } from \"../../hooks/useContentCache\";\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 * Includes content cache to preserve component state.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n  /**\n   * Get cached content for an item. Returns the same ReactNode reference\n   * for the same item ID to prevent remounting on parent re-renders.\n   */\n  getCachedContent: (itemId: string) => React.ReactNode | null;\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 * Uses cached content to preserve component state across re-renders.\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          {ctx.getCachedContent(item.id)}\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  // Content resolver for useContentCache\n  const resolveContent = React.useCallback(\n    (itemId: string): React.ReactNode | null => {\n      const item = stateRef.current.items.find((i) => i.id === itemId);\n      return item?.content ?? null;\n    },\n    [],\n  );\n\n  // Valid IDs for cache cleanup (cast to string[] for useContentCache compatibility)\n  const validIds = React.useMemo((): readonly string[] => items.map((i) => i.id), [items]);\n\n  // Use shared content cache hook\n  const { getCachedContent } = useContentCache({\n    resolveContent,\n    validIds,\n  });\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      getCachedContent,\n    }),\n    [getCachedContent],\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":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_","baseStyle","PivotContent","isActive","transitionMode","children","ref","prevActiveRef","useIsomorphicLayoutEffect","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","itemId","i","contextValue","Outlet","OutletComponent"],"mappings":"wbAsEO,SAASA,EACdC,EAC4B,CAC5B,KAAM,CAAE,eAAAC,EAAgB,SAAAC,CAAA,EAAaF,EAM/BG,EAAWC,EAAM,OAAqC,IAAI,GAAK,EAO/DC,EAAoBD,EAAM,OAAOH,CAAc,EACrDI,EAAkB,QAAUJ,EAO5B,MAAMK,EAAmBF,EAAM,YAAaG,GAAoC,CAC9E,MAAMC,EAASL,EAAS,QAAQ,IAAII,CAAE,EACtC,GAAIC,IAAW,OACb,OAAOA,EAGT,MAAMC,EAAUJ,EAAkB,QAAQE,CAAE,EAC5C,OAAAJ,EAAS,QAAQ,IAAII,EAAIE,CAAO,EACzBA,CACT,EAAG,CAAA,CAAE,EAKCC,EAAaN,EAAM,YAAY,IAAY,CAC/CD,EAAS,QAAQ,MAAA,CACnB,EAAG,CAAA,CAAE,EAMLC,OAAAA,EAAM,UAAU,IAAM,CACpB,MAAMO,EAAkB,IAAI,IAAYT,CAAQ,EAChDC,EAAS,QAAQ,QAAQ,CAACS,EAAGL,IAAO,CAC7BI,EAAgB,IAAIJ,CAAE,GACzBJ,EAAS,QAAQ,OAAOI,CAAE,CAE9B,CAAC,CACH,EAAG,CAACL,CAAQ,CAAC,EAEN,CAAE,iBAAAI,EAAkB,WAAAI,CAAA,CAC7B,CCpGA,MAAMG,EAAiC,CACrC,SAAU,WACV,MAAO,EACP,MAAO,OACP,OAAQ,MACV,EAQaC,EAA4CV,EAAM,KAAK,CAAC,CAAE,GAAAG,EAAI,SAAAQ,EAAU,eAAAC,EAAgB,SAAAC,KAAe,CAClH,MAAMC,EAAMd,EAAM,OAAuB,IAAI,EACvCe,EAAgBf,EAAM,OAAOW,CAAQ,EAG3CK,EAAAA,0BAA0B,IAAM,CAC9B,GAAIJ,IAAmB,OAAS,CAACE,EAAI,QACnC,OAGF,MAAMG,EAAKH,EAAI,QACTI,EAAYH,EAAc,QAChCA,EAAc,QAAUJ,EAGpBO,IAAcP,IAKlBM,EAAG,MAAM,UAAY,OAChBA,EAAG,aACRA,EAAG,MAAM,UAAY,GACvB,EAAG,CAACN,EAAUC,CAAc,CAAC,EAE7B,MAAMO,EAAQnB,EAAM,QAA6B,IAAM,CACrD,MAAMoB,EAAyB,CAC7B,GAAGX,EACH,cAAeE,EAAW,OAAS,OACnC,QAASA,EAAW,EAAI,CAAA,EAG1B,OAAIC,IAAmB,QACrBQ,EAAE,UAAYT,EAAWU,EAAAA,sBAAwBC,EAAAA,uBAG5CF,CACT,EAAG,CAACT,EAAUC,CAAc,CAAC,EAEvBP,EACJkB,EAAAA,IAAC,MAAA,CAAI,IAAAT,EAAU,qBAAoBX,EAAI,cAAaQ,EAAW,OAAS,QAAS,MAAAQ,EAC9E,SAAAN,CAAA,CACH,EAGF,OAAID,IAAmB,OACdW,MAACvB,EAAM,SAAN,CAAe,KAAMW,EAAW,UAAY,SAAW,SAAAN,EAAQ,EAGlEA,CACT,CAAC,EC1DKmB,EAAqBxB,EAAM,cAA8C,IAAI,EAO7EyB,EAA6BzB,EAAM,KAAK,IAAM,CAClD,MAAM0B,EAAM1B,EAAM,WAAWwB,CAAkB,EAC/C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,0CAA0C,EAG5D,KAAM,CAAA,CAAGC,CAAW,EAAI3B,EAAM,WAAY4B,GAAMA,EAAI,EAAG,CAAC,EAExD5B,EAAM,UAAU,IACP0B,EAAI,UAAUC,CAAW,EAC/B,CAACD,CAAG,CAAC,EAER,KAAM,CAAE,MAAAG,EAAO,SAAAC,EAAU,eAAAlB,CAAA,EAAmBc,EAAI,SAAA,EAEhD,OACEH,EAAAA,IAAAQ,EAAAA,SAAA,CACG,WAAM,IAAKC,GACVT,EAAAA,IAACb,EAAA,CAA2B,GAAIsB,EAAK,GAAI,SAAUA,EAAK,KAAOF,EAAU,eAAAlB,EACtE,SAAAc,EAAI,iBAAiBM,EAAK,EAAE,CAAA,EADZA,EAAK,EAExB,CACD,CAAA,CACH,CAEJ,CAAC,EA4BM,SAASC,EAAsCrC,EAAoD,CACxG,KAAM,CAAE,MAAAiC,EAAO,SAAUK,EAAoB,gBAAAC,EAAiB,eAAAC,EAAgB,eAAAxB,EAAiB,OAAUhB,EAEnGyC,EAAeH,IAAuB,OAEtC,CAACI,EAAsBC,CAAuB,EAAIvC,EAAM,SAAc,IAAM,CAChF,GAAImC,IAAoB,OACtB,OAAOA,EAET,MAAMK,EAAeX,EAAM,KAAMG,GAASA,EAAK,WAAa,EAAI,EAChE,GAAI,CAACQ,EACH,MAAM,IAAI,MAAM,qCAAqC,EAEvD,OAAOA,EAAa,EACtB,CAAC,EAEKV,EAAWO,EAAeH,EAAqBI,EAE/CG,EAAczC,EAAM,YACvBG,GAAY,CACX,MAAMuC,EAASb,EAAM,KAAMG,GAASA,EAAK,KAAO7B,CAAE,EAC7CuC,IAGDA,EAAO,WAGNL,GACHE,EAAwBpC,CAAE,EAE5BiC,IAAiBjC,CAAE,GACrB,EACA,CAAC0B,EAAOQ,EAAcD,CAAc,CAAA,EAGhCzB,EAAWX,EAAM,YAAaG,GAAqBA,IAAO2B,EAAU,CAACA,CAAQ,CAAC,EAE9Ea,EAAe3C,EAAM,YACxBG,IAA6B,CAC5B,kBAAmBA,EACnB,cAAgBA,IAAO2B,EAAW,OAAS,QAC3C,gBAAiB3B,IAAO2B,EACxB,SAAU3B,IAAO2B,EAAW,EAAI,GAChC,QAAS,IAAM,CACbW,EAAYtC,CAAE,CAChB,CAAA,GAEF,CAAC2B,EAAUW,CAAW,CAAA,EAGlBG,EAAsC5C,EAAM,QAChD,KAAO,CACL,SAAU,WACV,MAAO,OACP,OAAQ,MAAA,GAEV,CAAA,CAAC,EAIG6C,EAAW7C,EAAM,OAAO,CAC5B,MAAA6B,EACA,SAAAC,EACA,eAAAlB,CAAA,CACD,EAGDiC,EAAS,QAAU,CACjB,MAAAhB,EACA,SAAAC,EACA,eAAAlB,CAAA,EAIF,MAAMkC,EAAiB9C,EAAM,OAAO,IAAI,GAAiB,EAGzDA,EAAM,UAAU,IAAM,CACpB8C,EAAe,QAAQ,QAASC,GAAaA,GAAU,CACzD,EAAG,CAACjB,EAAUlB,CAAc,CAAC,EAG7B,MAAMf,EAAiBG,EAAM,YAC1BgD,GACcH,EAAS,QAAQ,MAAM,KAAMI,GAAMA,EAAE,KAAOD,CAAM,GAClD,SAAW,KAE1B,CAAA,CAAC,EAIGlD,EAAWE,EAAM,QAAQ,IAAyB6B,EAAM,IAAKoB,GAAMA,EAAE,EAAE,EAAG,CAACpB,CAAK,CAAC,EAGjF,CAAE,iBAAA3B,CAAA,EAAqBP,EAAgB,CAC3C,eAAAE,EACA,SAAAC,CAAA,CACD,EAGKoD,EAAelD,EAAM,QACzB,KAAO,CACL,SAAU,IAAM6C,EAAS,QACzB,UAAYE,IACVD,EAAe,QAAQ,IAAIC,CAAQ,EAC5B,IAAMD,EAAe,QAAQ,OAAOC,CAAQ,GAErD,iBAAA7C,CAAA,GAEF,CAACA,CAAgB,CAAA,EAIbiD,EAASnD,EAAM,QAAQ,IAAM,CACjC,MAAMoD,EAA4B,IAChC7B,EAAAA,IAACC,EAAmB,SAAnB,CAA4B,MAAO0B,EAClC,SAAA3B,MAAC,MAAA,CAAI,MAAOqB,EAAgB,uBAAoB,GAC9C,SAAArB,EAAAA,IAACE,EAAA,CAAA,CAAiB,EACpB,EACF,EAEF,OAAA2B,EAAgB,YAAc,cACvBA,CACT,EAAG,CAACF,EAAcN,CAAc,CAAC,EAEjC,MAAO,CAAE,SAAAd,EAAU,YAAAW,EAAa,SAAA9B,EAAU,aAAAgC,EAAc,OAAAQ,CAAA,CAC1D"}

package/dist/usePivot-BvOGxLQQ.js

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

package/dist/usePivot-BvOGxLQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivot-BvOGxLQQ.js","sources":["../src/hooks/useContentCache.tsx","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\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 *\n * Includes content caching to preserve React component state across re-renders.\n * This is essential for maintaining internal state when parent components\n * re-create the items array.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\nimport { useContentCache } from \"../../hooks/useContentCache\";\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 * Includes content cache to preserve component state.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n  /**\n   * Get cached content for an item. Returns the same ReactNode reference\n   * for the same item ID to prevent remounting on parent re-renders.\n   */\n  getCachedContent: (itemId: string) => React.ReactNode | null;\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 * Uses cached content to preserve component state across re-renders.\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          {ctx.getCachedContent(item.id)}\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  // Content resolver for useContentCache\n  const resolveContent = React.useCallback(\n    (itemId: string): React.ReactNode | null => {\n      const item = stateRef.current.items.find((i) => i.id === itemId);\n      return item?.content ?? null;\n    },\n    [],\n  );\n\n  // Valid IDs for cache cleanup (cast to string[] for useContentCache compatibility)\n  const validIds = React.useMemo((): readonly string[] => items.map((i) => i.id), [items]);\n\n  // Use shared content cache hook\n  const { getCachedContent } = useContentCache({\n    resolveContent,\n    validIds,\n  });\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      getCachedContent,\n    }),\n    [getCachedContent],\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":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_","baseStyle","PivotContent","isActive","transitionMode","children","ref","prevActiveRef","useIsomorphicLayoutEffect","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","itemId","i","contextValue","Outlet","OutletComponent"],"mappings":"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"}

package/dist/utils/css.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file Generic CSS parsing and measurement utilities.
+ */
+export type ParsedGap = {
+    rowGap: number;
+    columnGap: number;
+};
+/**
+ * Parses a CSS gap value string into row and column gap numbers.
+ * Supports single value (applied to both) or two values (row column).
+ * Only handles px units; other units return 0.
+ */
+export declare const parseGapValue: (gapValue?: string) => ParsedGap;
+export type GridDirection = "col" | "row";
+/**
+ * Measures actual rendered grid track sizes from computed style.
+ * Returns pixel values parsed from gridTemplateColumns or gridTemplateRows.
+ */
+export declare const measureGridTrackSizes: (containerEl: HTMLElement | null, direction: GridDirection) => number[];

package/package.json

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

package/dist/FloatingPanelFrame-SOrLGjZd.js

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

package/dist/FloatingPanelFrame-SOrLGjZd.js.map

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