@principal-ade/panel-layouts 0.1.6 → 0.2.0

package/dist/index.d.ts

@@ -3,8 +3,11 @@ import { EditableConfigurablePanelLayout } from '@principal-ade/panels';
 import { EditableConfigurablePanelLayoutProps } from '@principal-ade/panels';
 import { mapThemeToPanelVars } from '@principal-ade/panels';
 import { mapThemeToTabVars } from '@principal-ade/panels';
+import { PanelBlurEventPayload } from '@principal-ade/panel-framework-core';
 import { PanelDefinition } from '@principal-ade/panels';
 import { PanelDefinitionWithContent } from '@principal-ade/panels';
+import { PanelEventEmitter } from '@principal-ade/panel-framework-core';
+import { PanelFocusEventPayload } from '@principal-ade/panel-framework-core';
 import { PanelGroup } from '@principal-ade/panels';
 import { PanelLayout } from '@principal-ade/panels';
 import { PanelSlot } from '@principal-ade/panels';
@@ -97,6 +100,8 @@ export { mapThemeToPanelVars }
 
 export { mapThemeToTabVars }
 
+export { PanelBlurEventPayload }
+
 /**
  * Collapsed state for panels
  */
@@ -123,6 +128,8 @@ export declare interface PanelFocusActions {
     focusPrevious: () => void;
 }
 
+export { PanelFocusEventPayload }
+
 /**
  * Focus state for the panel layout
  */
@@ -281,6 +288,35 @@ export declare interface UpdateWorkspaceOptions {
  */
 export declare function usePanelFocus(options?: UsePanelFocusOptions): UsePanelFocusReturn;
 
+/**
+ * Hook for panels to listen to focus events from the framework
+ *
+ * This is a convenience hook that panels can use to respond to focus changes
+ * from keyboard shortcuts, mouse clicks, or programmatic navigation.
+ *
+ * @param panelId - The ID of this panel (from panel metadata)
+ * @param events - Event emitter from PanelComponentProps
+ * @param onFocus - Callback when this panel receives focus
+ * @param onBlur - Optional callback when this panel loses focus
+ *
+ * @example
+ * ```typescript
+ * function TerminalPanel({ context, actions, events }: PanelComponentProps) {
+ *   const xtermRef = useRef<Terminal>();
+ *
+ *   usePanelFocusListener(
+ *     'terminal',
+ *     events,
+ *     () => xtermRef.current?.focus(),
+ *     () => xtermRef.current?.blur()
+ *   );
+ *
+ *   return <div id="xterm-container" />;
+ * }
+ * ```
+ */
+export declare function usePanelFocusListener(panelId: string, events: PanelEventEmitter, onFocus: () => void, onBlur?: () => void): void;
+
 export declare interface UsePanelFocusOptions {
     /** Initial focused panel (optional) */
     initialFocus?: PanelSlotId | null;
@@ -290,6 +326,10 @@ export declare interface UsePanelFocusOptions {
     panelType?: 'two-panel' | 'three-panel';
     /** Callback when focus changes */
     onFocusChange?: (panel: PanelSlotId | null) => void;
+    /** Event emitter from panel framework (optional, for focus events) */
+    events?: PanelEventEmitter;
+    /** Function to map panel slot to panel ID (optional, required for event emission) */
+    getPanelId?: (slot: PanelSlotId) => string | undefined;
 }
 
 export declare interface UsePanelFocusReturn extends PanelFocusState, PanelFocusActions {