@principal-ade/panels 1.0.39

package/README.md

@@ -0,0 +1,360 @@
+# @principal-ade/panels
+
+A modern React panel layout component library built on top of `react-resizable-panels` with enhanced animations, TypeScript support, and common layout patterns.
+
+## Installation
+
+```bash
+npm install @principal-ade/panels
+```
+
+## Quick Start
+
+⚠️ **Important: You must import the CSS file for proper styling:**
+
+```tsx
+import { AnimatedResizableLayout } from '@principal-ade/panels';
+import '@principal-ade/panels/style.css';  // Required!
+
+function App() {
+  return (
+    <AnimatedResizableLayout
+      leftPanel={<div>Left Content</div>}
+      rightPanel={<div>Right Content</div>}
+      collapsibleSide="left"
+      showCollapseButton={true}
+    />
+  );
+}
+```
+
+## Current Implementation
+
+We currently have an `AnimatedResizableLayout` component that provides:
+- 2-panel horizontal layout (left/right)
+- Smooth collapse/expand animations using requestAnimationFrame
+- Collapsible panels on either side
+- Dark mode support
+- Custom collapse toggle button with directional icons
+- Animated opacity transitions for content
+- Proper handling of drag vs animation states
+- Callbacks for animation lifecycle events
+
+### Current Features in Detail
+
+#### Animation System
+- **Smooth transitions**: 300ms cubic-bezier easing by default
+- **RAF-based animations**: Custom requestAnimationFrame implementation for smooth 60fps animations
+- **Dual-state handling**: Distinguishes between user dragging and programmatic animations
+- **Content opacity fading**: Panel content fades during collapse/expand
+- **Handle visibility**: Resize handle hides when panel is collapsed
+
+#### Styling
+- Clean, minimal resize handles (8px width)
+- Hover states for interactive elements
+- Dark mode support via CSS media queries
+- Collapse toggle button with scaling animations on hover/active
+- Shadow effects for depth perception
+
+#### API
+- `leftPanel` / `rightPanel`: ReactNode content
+- `collapsibleSide`: 'left' | 'right'
+- `defaultSize`: Initial panel size (0-100)
+- `minSize`: Minimum size when expanded
+- `collapsed`: Initial collapsed state
+- `showCollapseButton`: Toggle button visibility
+- `animationDuration` / `animationEasing`: Customizable animations
+- Lifecycle callbacks: `onCollapseStart`, `onCollapseComplete`, `onExpandStart`, `onExpandComplete`
+
+## New Package Requirements
+
+### Core Components
+
+#### 1. `ThreePanelLayout`
+A horizontal 3-panel layout component with all panels resizable.
+
+```tsx
+interface ThreePanelLayoutProps {
+  leftPanel: ReactNode;
+  centerPanel: ReactNode;
+  rightPanel: ReactNode;
+
+  // Sizing
+  defaultSizes?: [number, number, number]; // Default: [25, 50, 25]
+  minSizes?: [number, number, number];     // Default: [10, 30, 10]
+
+  // Collapsible configuration
+  collapsiblePanels?: {
+    left?: boolean;
+    right?: boolean;
+    center?: boolean;  // Rarely used but supported
+  };
+
+  // Animation
+  animationDuration?: number;  // Default: 300
+  animationEasing?: string;     // Default: cubic-bezier
+
+  // Collapse state
+  collapsed?: {
+    left?: boolean;
+    right?: boolean;
+  };
+
+  // Controls
+  showCollapseButtons?: boolean;
+  collapseButtonPosition?: 'handle' | 'panel' | 'both';
+
+  // Styling
+  className?: string;
+  handleClassName?: string;
+  panelClassName?: string;
+  theme?: 'light' | 'dark' | 'auto';
+
+  // Callbacks
+  onPanelResize?: (sizes: [number, number, number]) => void;
+  onPanelCollapse?: (panel: 'left' | 'center' | 'right') => void;
+  onPanelExpand?: (panel: 'left' | 'center' | 'right') => void;
+
+  // Persistence
+  persistenceKey?: string;  // Save layout to localStorage
+}
+```
+
+#### 2. `TwoPanelLayout`
+A simplified 2-panel version using the native `react-resizable-panels` animations.
+
+```tsx
+interface TwoPanelLayoutProps {
+  leftPanel: ReactNode;
+  rightPanel: ReactNode;
+
+  orientation?: 'horizontal' | 'vertical';
+  defaultSize?: number;
+  minSize?: number;
+
+  collapsibleSide?: 'left' | 'right' | 'both';
+  collapsed?: 'left' | 'right' | null;
+
+  // Similar animation, styling, callback props as ThreePanelLayout
+}
+```
+
+#### 3. `AdaptiveLayout`
+A responsive layout that switches between layouts based on viewport size.
+
+```tsx
+interface AdaptiveLayoutProps {
+  panels: ReactNode[];
+
+  breakpoints?: {
+    mobile?: number;   // Default: 768
+    tablet?: number;   // Default: 1024
+    desktop?: number;  // Default: 1440
+  };
+
+  layouts?: {
+    mobile?: 'stack' | 'tabs' | 'drawer';
+    tablet?: 'two-panel' | 'drawer-main';
+    desktop?: 'three-panel' | 'two-panel';
+  };
+
+  // All other props from ThreePanelLayout
+}
+```
+
+### Features to Implement
+
+#### Must Have (v1.0)
+- [x] Smooth native animations using `react-resizable-panels` built-in transitions
+- [x] TypeScript definitions with strict typing
+- [x] 2-panel and 3-panel layouts
+- [x] Collapsible panels with animation
+- [x] Dark mode support
+- [x] Collapse/expand toggle buttons
+- [x] Keyboard accessibility (arrow keys for resize, space/enter for toggle)
+- [x] Proper ARIA labels
+- [x] Zero dependencies except `react-resizable-panels`
+- [x] < 10KB gzipped
+
+#### Nice to Have (v1.1+)
+- [ ] Persistence to localStorage
+- [ ] Drag handle customization
+- [ ] Custom collapse button components
+- [ ] Snap points for panel sizes
+- [ ] Double-click to reset panel size
+- [ ] Nested panel support
+- [ ] Vertical orientation support
+- [ ] Touch gesture support for mobile
+- [ ] Server-side rendering support
+- [ ] Presets (sidebar layouts, dashboard layouts, etc.)
+
+### Technical Requirements
+
+#### Build Setup
+```json
+{
+  "name": "@principal-ade/panels",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-resizable-panels": "^2.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+```
+
+#### Storybook Stories
+- Basic 2-panel layout
+- Basic 3-panel layout
+- Collapsible panels demo
+- Dark mode toggle
+- Animated collapse/expand
+- Responsive adaptive layout
+- Nested panels
+- Custom styling examples
+- Persistence demo
+- Accessibility demo
+
+### Migration Guide from Current Implementation
+
+#### Key Differences
+1. **Use native `react-resizable-panels` animations** instead of custom RAF implementation
+2. **Support 3 panels** out of the box
+3. **Simplified API** - less boilerplate needed
+4. **Better TypeScript support** with generics for panel content types
+5. **Built-in persistence** via localStorage
+6. **Responsive layouts** with AdaptiveLayout component
+
+#### Migration Steps
+```tsx
+// Old
+import { AnimatedResizableLayout } from './layout-components';
+
+<AnimatedResizableLayout
+  leftPanel={<Sidebar />}
+  rightPanel={<MainContent />}
+  collapsibleSide="left"
+  defaultSize={25}
+  showCollapseButton={true}
+/>
+
+// New
+import { TwoPanelLayout } from '@principal-ade/panels';
+
+<TwoPanelLayout
+  leftPanel={<Sidebar />}
+  rightPanel={<MainContent />}
+  collapsibleSide="left"
+  defaultSize={25}
+  showCollapseButtons={true}
+/>
+```
+
+### Example Usage
+
+#### Basic 3-Panel Layout
+```tsx
+import { ThreePanelLayout } from '@principal-ade/panels';
+
+function App() {
+  return (
+    <ThreePanelLayout
+      leftPanel={<Navigation />}
+      centerPanel={<MainContent />}
+      rightPanel={<Sidebar />}
+      defaultSizes={[20, 60, 20]}
+      collapsiblePanels={{ left: true, right: true }}
+      showCollapseButtons
+      theme="auto"
+      persistenceKey="app-layout"
+    />
+  );
+}
+```
+
+#### Responsive Adaptive Layout
+```tsx
+import { AdaptiveLayout } from '@principal-ade/panels';
+
+function App() {
+  return (
+    <AdaptiveLayout
+      panels={[<Nav />, <Main />, <Side />]}
+      layouts={{
+        mobile: 'drawer',
+        tablet: 'two-panel',
+        desktop: 'three-panel'
+      }}
+    />
+  );
+}
+```
+
+### Development Workflow
+
+1. **Setup**: Clone repo, install dependencies
+2. **Development**: Run Storybook for component development
+3. **Testing**: Unit tests with React Testing Library
+4. **Build**: Vite for bundling
+5. **Publish**: NPM with proper versioning
+
+### API Design Principles
+
+1. **Progressive disclosure**: Simple use cases should be simple
+2. **Sensible defaults**: Works well out of the box
+3. **Composition over configuration**: Prefer component composition
+4. **Type safety**: Full TypeScript support with inference
+5. **Performance**: Use native browser APIs and React features
+6. **Accessibility**: WCAG 2.1 AA compliance
+
+### Browser Support
+
+- Chrome/Edge 90+
+- Firefox 90+
+- Safari 14+
+- Mobile browsers (iOS Safari, Chrome Android)
+
+### License
+
+MIT
+
+---
+
+## Implementation Notes for Developer
+
+### Priority Order
+1. Start with `TwoPanelLayout` to replace current implementation
+2. Extend to `ThreePanelLayout` with similar API
+3. Add `AdaptiveLayout` for responsive designs
+4. Create comprehensive Storybook stories
+5. Add unit tests
+6. Setup CI/CD pipeline
+7. Publish to NPM
+
+### Key Technical Decisions
+- Use `react-resizable-panels` v2+ for native collapse animations
+- Avoid custom RAF logic - the library handles this now
+- Use CSS modules or styled-components for styling isolation
+- Implement with hooks only (no class components)
+- Use React.memo for performance optimization
+- Provide both controlled and uncontrolled modes
+
+### Testing Checklist
+- [ ] Keyboard navigation works
+- [ ] Screen readers announce panel states
+- [ ] Animations are smooth at 60fps
+- [ ] No memory leaks on unmount
+- [ ] Works with React 18 concurrent features
+- [ ] SSR compatible (no window references in initial render)
+- [ ] Touch gestures work on mobile
+- [ ] Resize observer cleanup
+- [ ] Dark mode transitions smoothly
+- [ ] localStorage persistence handles edge cases

package/dist/components/AnimatedResizableLayout.d.ts

@@ -0,0 +1,42 @@
+import { default as React, ReactNode } from 'react';
+import { Theme } from '@principal-ade/industry-theme';
+export interface AnimatedResizableLayoutProps {
+    /** Content for the left panel */
+    leftPanel: ReactNode;
+    /** Content for the right panel */
+    rightPanel: ReactNode;
+    /** Which side is collapsible */
+    collapsibleSide?: 'left' | 'right';
+    /** Default size of the collapsible panel (0-100) */
+    defaultSize?: number;
+    /** Minimum size of the collapsible panel when expanded (0-100) */
+    minSize?: number;
+    /** CSS class for the layout container */
+    className?: string;
+    /** Whether the panel is initially collapsed */
+    collapsed?: boolean;
+    /** Additional styles to apply to the container */
+    style?: React.CSSProperties;
+    /** Whether to show the collapse/expand toggle button */
+    showCollapseButton?: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation easing function */
+    animationEasing?: string;
+    /** Callback fired when collapse starts */
+    onCollapseStart?: () => void;
+    /** Callback fired when collapse completes */
+    onCollapseComplete?: () => void;
+    /** Callback fired when expand starts */
+    onExpandStart?: () => void;
+    /** Callback fired when expand completes */
+    onExpandComplete?: () => void;
+    /** Theme object for customizing colors */
+    theme: Theme;
+}
+/**
+ * AnimatedResizableLayout - Combines react-resizable-panels with smooth animations
+ * Supports both manual dragging to resize AND smooth animations for collapse/expand
+ */
+export declare const AnimatedResizableLayout: React.FC<AnimatedResizableLayoutProps>;
+//# sourceMappingURL=AnimatedResizableLayout.d.ts.map

package/dist/components/AnimatedResizableLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedResizableLayout.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedResizableLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAOnF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,WAAW,4BAA4B;IAC3C,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IAErB,kCAAkC;IAClC,UAAU,EAAE,SAAS,CAAC;IAEtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA2Q1E,CAAC"}

package/dist/components/AnimatedVerticalLayout.d.ts

@@ -0,0 +1,59 @@
+import { default as React, ReactNode } from 'react';
+import { Theme } from '@principal-ade/industry-theme';
+export interface AnimatedVerticalLayoutProps {
+    /** Content for the top panel */
+    topPanel: ReactNode;
+    /** Content for the bottom panel */
+    bottomPanel: ReactNode;
+    /** Which panels are collapsible */
+    collapsiblePanels?: {
+        top?: boolean;
+        bottom?: boolean;
+    };
+    /** Default sizes for each panel (0-100) */
+    defaultSizes?: {
+        top: number;
+        bottom: number;
+    };
+    /** Minimum sizes for each panel when expanded (0-100) */
+    minSizes?: {
+        top: number;
+        bottom: number;
+    };
+    /** CSS class for the layout container */
+    className?: string;
+    /** Initial collapsed state for panels */
+    collapsed?: {
+        top?: boolean;
+        bottom?: boolean;
+    };
+    /** Additional styles to apply to the container */
+    style?: React.CSSProperties;
+    /** Whether to show the collapse/expand toggle buttons */
+    showCollapseButtons?: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation easing function */
+    animationEasing?: string;
+    /** Theme object for customizing colors */
+    theme: Theme;
+    /** Callbacks for panel events */
+    onTopCollapseStart?: () => void;
+    onTopCollapseComplete?: () => void;
+    onTopExpandStart?: () => void;
+    onTopExpandComplete?: () => void;
+    onBottomCollapseStart?: () => void;
+    onBottomCollapseComplete?: () => void;
+    onBottomExpandStart?: () => void;
+    onBottomExpandComplete?: () => void;
+    onPanelResize?: (sizes: {
+        top: number;
+        bottom: number;
+    }) => void;
+}
+/**
+ * AnimatedVerticalLayout - Vertical version with both panels independently collapsible
+ * Supports both manual dragging to resize AND smooth animations for collapse/expand
+ */
+export declare const AnimatedVerticalLayout: React.FC<AnimatedVerticalLayoutProps>;
+//# sourceMappingURL=AnimatedVerticalLayout.d.ts.map

package/dist/components/AnimatedVerticalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedVerticalLayout.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedVerticalLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAOnF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IAC1C,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IAEpB,mCAAmC;IACnC,WAAW,EAAE,SAAS,CAAC;IAEvB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE;QAClB,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IAEF,2CAA2C;IAC3C,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,yDAAyD;IACzD,QAAQ,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yCAAyC;IACzC,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IAEF,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC;IAEb,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAuYxE,CAAC"}

package/dist/components/ConfigurablePanelLayout.d.ts

@@ -0,0 +1,87 @@
+import { default as React, ReactNode } from 'react';
+import { Theme } from '@principal-ade/industry-theme';
+import { PanelLayout } from './PanelConfigurator';
+export interface PanelDefinitionWithContent {
+    id: string;
+    label: string;
+    content: ReactNode;
+    preview?: ReactNode;
+    icon?: ReactNode;
+}
+export interface ConfigurablePanelLayoutProps {
+    /** Available panels with their content */
+    panels: PanelDefinitionWithContent[];
+    /** Current layout configuration - omit or set positions to null/undefined for two-panel layouts */
+    layout: PanelLayout;
+    /** Custom data attributes for slot identification (for edit mode) */
+    slotDataAttributes?: {
+        left?: Record<string, string>;
+        middle?: Record<string, string>;
+        right?: Record<string, string>;
+    };
+    /** Which panels are collapsible - only specify for active panels */
+    collapsiblePanels?: {
+        left?: boolean;
+        middle?: boolean;
+        right?: boolean;
+    };
+    /** Default sizes for each panel (0-100, should sum to 100 for active panels) - only specify for active panels */
+    defaultSizes?: {
+        left?: number;
+        middle?: number;
+        right?: number;
+    };
+    /** Minimum sizes for each panel when expanded (0-100) - only specify for active panels */
+    minSizes?: {
+        left?: number;
+        middle?: number;
+        right?: number;
+    };
+    /** CSS class for the layout container */
+    className?: string;
+    /** Initial collapsed state for panels */
+    collapsed?: {
+        left?: boolean;
+        middle?: boolean;
+        right?: boolean;
+    };
+    /** Additional styles to apply to the container */
+    style?: React.CSSProperties;
+    /** Whether to show collapse/expand toggle buttons */
+    showCollapseButtons?: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation easing function */
+    animationEasing?: string;
+    /** Theme object for customizing colors */
+    theme: Theme;
+    /** Callbacks for panel events */
+    onLeftCollapseStart?: () => void;
+    onLeftCollapseComplete?: () => void;
+    onLeftExpandStart?: () => void;
+    onLeftExpandComplete?: () => void;
+    onMiddleCollapseStart?: () => void;
+    onMiddleCollapseComplete?: () => void;
+    onMiddleExpandStart?: () => void;
+    onMiddleExpandComplete?: () => void;
+    onRightCollapseStart?: () => void;
+    onRightCollapseComplete?: () => void;
+    onRightExpandStart?: () => void;
+    onRightExpandComplete?: () => void;
+    onPanelResize?: (sizes: {
+        left: number;
+        middle: number;
+        right: number;
+    }) => void;
+}
+/**
+ * ConfigurablePanelLayout - A flexible panel layout that supports 2 or 3 panels
+ *
+ * Supports both two-panel and three-panel layouts:
+ * - For two panels: omit or set unused positions to null/undefined (e.g., { left: 'panel1', right: 'panel2' })
+ * - For three panels: define all positions (e.g., { left: 'panel1', middle: 'panel2', right: 'panel3' })
+ *
+ * The component automatically adjusts sizing and behavior based on active panels.
+ */
+export declare const ConfigurablePanelLayout: React.FC<ConfigurablePanelLayoutProps>;
+//# sourceMappingURL=ConfigurablePanelLayout.d.ts.map

package/dist/components/ConfigurablePanelLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurablePanelLayout.d.ts","sourceRoot":"","sources":["../../src/components/ConfigurablePanelLayout.tsx"],"names":[],"mappings":"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"}

package/dist/components/EditableConfigurablePanelLayout.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ConfigurablePanelLayoutProps } from './ConfigurablePanelLayout';
+import { PanelLayout, PanelDefinition } from './PanelConfigurator';
+export interface EditableConfigurablePanelLayoutProps extends ConfigurablePanelLayoutProps {
+    /** Whether edit mode is enabled (controlled) */
+    isEditMode: boolean;
+    /** Callback when layout changes in edit mode */
+    onLayoutChange?: (layout: PanelLayout) => void;
+    /** Available panels for drag-and-drop */
+    availablePanels?: PanelDefinition[];
+}
+/**
+ * EditableConfigurablePanelLayout - Wrapper component that adds iPhone-style edit mode
+ * Allows dragging entire slot sections (left/middle/right) to rearrange them
+ */
+export declare const EditableConfigurablePanelLayout: React.FC<EditableConfigurablePanelLayoutProps>;
+//# sourceMappingURL=EditableConfigurablePanelLayout.d.ts.map

package/dist/components/EditableConfigurablePanelLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableConfigurablePanelLayout.d.ts","sourceRoot":"","sources":["../../src/components/EditableConfigurablePanelLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAa3E,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,oCAAqC,SAAQ,4BAA4B;IACxF,gDAAgD;IAChD,UAAU,EAAE,OAAO,CAAC;IAEpB,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAE/C,yCAAyC;IACzC,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;CACrC;AAgED;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAAE,CAAC,oCAAoC,CA+H1F,CAAC"}

package/dist/components/PanelConfigurator.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { Theme } from '@principal-ade/industry-theme';
+export interface PanelDefinition {
+    id: string;
+    label: string;
+    preview?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export type PanelSlot = string | null | PanelGroup;
+export interface PanelGroup {
+    type: 'tabs' | 'tiles';
+    panels: string[];
+    config?: TabsConfig | TilesConfig;
+}
+export interface TabsConfig {
+    defaultActiveTab?: number;
+    tabPosition?: 'top' | 'bottom' | 'left' | 'right';
+    centered?: boolean;
+    hideTabList?: boolean;
+    activeTabIndex?: number;
+    onTabChange?: (index: number) => void;
+}
+export interface TilesConfig {
+    direction?: 'horizontal' | 'vertical' | 'grid';
+    columns?: number;
+    rows?: number;
+    tileSizes?: number[];
+}
+export interface PanelLayout {
+    left?: PanelSlot;
+    middle?: PanelSlot;
+    right?: PanelSlot;
+}
+export interface PanelConfiguratorProps {
+    /** Available panels that can be placed in slots */
+    availablePanels: PanelDefinition[];
+    /** Current layout configuration */
+    currentLayout: PanelLayout;
+    /** Callback when layout changes */
+    onChange: (layout: PanelLayout) => void;
+    /** Optional class name for the container */
+    className?: string;
+    /** Optional theme override (uses context theme by default) */
+    theme?: Theme;
+}
+/**
+ * PanelConfigurator - Interactive UI for configuring panel layout
+ *
+ * Interaction modes:
+ * - Click slot → click panel: Assigns panel to slot
+ * - Click panel → click slot: Assigns panel to slot
+ * - Click slot → click slot: Swaps their content
+ */
+export declare const PanelConfigurator: React.FC<PanelConfiguratorProps>;
+//# sourceMappingURL=PanelConfigurator.d.ts.map

package/dist/components/PanelConfigurator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelConfigurator.d.ts","sourceRoot":"","sources":["../../src/components/PanelConfigurator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAY,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,IAAI,GACJ,UAAU,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,UAAU;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,mDAAmD;IACnD,eAAe,EAAE,eAAe,EAAE,CAAC;IAEnC,mCAAmC;IACnC,aAAa,EAAE,WAAW,CAAC;IAE3B,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAExC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAkBD;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAua9D,CAAC"}

package/dist/components/ResponsiveConfigurablePanelLayout.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ConfigurablePanelLayoutProps } from './ConfigurablePanelLayout';
+import { SnapCarouselProps } from './SnapCarousel';
+export interface ResponsiveConfigurablePanelLayoutProps extends ConfigurablePanelLayoutProps {
+    /**
+     * Media query used to determine when to switch to the mobile carousel layout.
+     * Defaults to `(max-width: 768px)`.
+     */
+    mobileBreakpoint?: string;
+    /**
+     * Additional props passed to the SnapCarousel when the mobile layout is active.
+     * The `panels` and `theme` props are managed by this component.
+     */
+    mobileCarouselProps?: Omit<SnapCarouselProps, 'panels' | 'theme'>;
+}
+/**
+ * ResponsiveConfigurablePanelLayout - Renders ConfigurablePanelLayout on desktop widths
+ * and automatically swaps to a SnapCarousel-powered experience on mobile.
+ */
+export declare const ResponsiveConfigurablePanelLayout: React.FC<ResponsiveConfigurablePanelLayoutProps>;
+//# sourceMappingURL=ResponsiveConfigurablePanelLayout.d.ts.map

package/dist/components/ResponsiveConfigurablePanelLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveConfigurablePanelLayout.d.ts","sourceRoot":"","sources":["../../src/components/ResponsiveConfigurablePanelLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAGlG,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,MAAM,WAAW,sCAAuC,SAAQ,4BAA4B;IAC1F;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAC;CACnE;AAED;;;GAGG;AACH,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAAE,CAAC,sCAAsC,CAsE9F,CAAC"}