@principal-ade/panel-layouts 0.2.3 → 0.2.4

package/dist/index.d.ts

@@ -487,6 +487,36 @@ export declare interface OpenAITool {
 
 export { PanelBlurEventPayload }
 
+/**
+ * A button component for collapsing/expanding side panels.
+ *
+ * Shows appropriate icon based on panel state and side:
+ * - Left panel collapsed: PanelLeft icon (show panel)
+ * - Left panel expanded: PanelLeftClose icon (hide panel)
+ * - Right panel collapsed: PanelRight icon (show panel)
+ * - Right panel expanded: PanelRightClose icon (hide panel)
+ */
+export declare const PanelCollapseButton: default_2.FC<PanelCollapseButtonProps>;
+
+export declare interface PanelCollapseButtonProps {
+    /** Whether the panel is currently collapsed */
+    isCollapsed: boolean;
+    /** Callback when the button is clicked */
+    onToggle: () => void;
+    /** Which side the panel is on */
+    side?: 'left' | 'right';
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Additional inline styles */
+    style?: default_2.CSSProperties;
+    /** Keyboard shortcut hint to show in tooltip */
+    shortcutHint?: string;
+    /** Custom title/tooltip */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+}
+
 /**
  * Collapsed state for panels
  */
@@ -500,6 +530,102 @@ export declare interface PanelCollapsed {
  */
 export declare const panelCommands: Command[];
 
+/**
+ * A button component for opening panel configuration/layout settings.
+ */
+export declare const PanelConfigureButton: default_2.FC<PanelConfigureButtonProps>;
+
+export declare interface PanelConfigureButtonProps {
+    /** Callback when the button is clicked */
+    onConfigure: () => void;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Additional inline styles */
+    style?: default_2.CSSProperties;
+    /** Custom title/tooltip */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+}
+
+/**
+ * A unified panel controls component that provides buttons for:
+ * - Collapsing/expanding left and right sidebars
+ * - Switching/swapping panel positions
+ * - Opening panel configuration
+ *
+ * The buttons are rendered in order:
+ * 1. Left sidebar collapse button
+ * 2. Left-middle switch button
+ * 3. Configure panels button
+ * 4. Right-middle switch button
+ * 5. Right sidebar collapse button
+ *
+ * @example
+ * ```tsx
+ * <PanelControls
+ *   leftSidebarCollapsed={leftCollapsed}
+ *   onToggleLeftSidebar={() => setLeftCollapsed(!leftCollapsed)}
+ *   showLeftSidebarControl
+ *   rightSidebarCollapsed={rightCollapsed}
+ *   onToggleRightSidebar={() => setRightCollapsed(!rightCollapsed)}
+ *   showRightSidebarControl
+ *   onSwitchLeftMiddlePanels={handleSwitchLeftMiddle}
+ *   showSwitchLeftMiddle
+ *   onSwitchRightMiddlePanels={handleSwitchRightMiddle}
+ *   showSwitchRightMiddle
+ *   onConfigurePanels={() => setShowConfigModal(true)}
+ *   showConfigureButton
+ * />
+ * ```
+ */
+export declare const PanelControls: default_2.FC<PanelControlsProps>;
+
+export declare interface PanelControlsProps {
+    /** Left sidebar collapsed state */
+    leftSidebarCollapsed?: boolean;
+    /** Callback when left sidebar toggle is clicked */
+    onToggleLeftSidebar?: () => void;
+    /** Whether to show the left sidebar control */
+    showLeftSidebarControl?: boolean;
+    /** Right sidebar collapsed state */
+    rightSidebarCollapsed?: boolean;
+    /** Callback when right sidebar toggle is clicked */
+    onToggleRightSidebar?: () => void;
+    /** Whether to show the right sidebar control */
+    showRightSidebarControl?: boolean;
+    /** Callback when switch left-middle panels button is clicked */
+    onSwitchLeftMiddlePanels?: () => void;
+    /** Whether to show the switch left-middle button */
+    showSwitchLeftMiddle?: boolean;
+    /** Callback when switch right-middle panels button is clicked */
+    onSwitchRightMiddlePanels?: () => void;
+    /** Whether to show the switch right-middle button */
+    showSwitchRightMiddle?: boolean;
+    /** Callback when configure panels button is clicked */
+    onConfigurePanels?: () => void;
+    /** Whether to show the configure panels button */
+    showConfigureButton?: boolean;
+    /** Gap between buttons in pixels */
+    gap?: number;
+    /** Additional inline styles for the container */
+    style?: default_2.CSSProperties;
+    /** Custom class name for the container */
+    className?: string;
+    /** Icon size for all buttons */
+    iconSize?: number;
+    /** Props to pass to the left collapse button */
+    leftCollapseButtonProps?: Partial<Omit<PanelCollapseButtonProps, 'isCollapsed' | 'onToggle' | 'side'>>;
+    /** Props to pass to the right collapse button */
+    rightCollapseButtonProps?: Partial<Omit<PanelCollapseButtonProps, 'isCollapsed' | 'onToggle' | 'side'>>;
+    /** Props to pass to the left-middle switch button */
+    leftMiddleSwitchButtonProps?: Partial<Omit<PanelSwitchButtonProps, 'onSwitch' | 'variant'>>;
+    /** Props to pass to the right-middle switch button */
+    rightMiddleSwitchButtonProps?: Partial<Omit<PanelSwitchButtonProps, 'onSwitch' | 'variant'>>;
+    /** Props to pass to the configure button */
+    configureButtonProps?: Partial<Omit<PanelConfigureButtonProps, 'onConfigure'>>;
+}
+
 export { PanelDefinition }
 
 export { PanelDefinitionWithContent }
@@ -560,6 +686,29 @@ export { PanelSlot }
  */
 export declare type PanelSlotId = 'left' | 'middle' | 'right';
 
+/**
+ * A button component for switching/swapping panel positions.
+ *
+ * - left-middle: Shows ArrowLeftRight icon for swapping left and middle panels
+ * - right-middle: Shows ArrowRightLeft icon for swapping right and middle panels
+ */
+export declare const PanelSwitchButton: default_2.FC<PanelSwitchButtonProps>;
+
+export declare interface PanelSwitchButtonProps {
+    /** Callback when the button is clicked */
+    onSwitch: () => void;
+    /** Which panels are being switched */
+    variant?: 'left-middle' | 'right-middle';
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Additional inline styles */
+    style?: default_2.CSSProperties;
+    /** Custom title/tooltip */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+}
+
 /**
  * Storage adapter interface for persisting panel state
  * Implementations can use localStorage, Electron IPC, or remote storage