/** * Focus Highlight Config Utility * * Creates a Puck config wrapper that adds visual focus highlighting * to show which components other actors are viewing or editing. * * IMPORTANT: This utility supports two modes: * 1. Context-based (preferred): Create config once, use FocusHighlightProvider to update highlights * 2. Direct focusMap (legacy): Pass focusMap directly, config recreated on each change * * The context-based approach prevents Puck re-renders when focus regions change. */ import type { FocusHighlight } from './focusRegionMap.js'; /** * Puck Config structure (flexible to accept Puck's Config type) */ export type PuckConfig = Record; /** * Creates a Puck config with focus highlight wrappers. * * When used with FocusHighlightProvider (context mode), the config only needs * to be created once - highlights update via context without config recreation. * * When used without FocusHighlightProvider (legacy mode), pass focusMap directly * but this will cause config recreation on every focusMap change. * * @param config - The original Puck config * @param focusMap - Optional static focusMap for legacy mode (prefer using context instead) * @returns A new config with wrapped render functions that add focus highlighting * * @example Context mode (preferred - no flicker): * ```tsx * // Create config once with no focusMap * const highlightedConfig = useMemo( * () => createFocusHighlightConfig(baseConfig), * [baseConfig] * ); * * // Wrap Puck with provider that can update without config recreation * * * * ``` * * @example Legacy mode (may cause flicker): * ```tsx * const focusMap = createFocusRegionMap(puckData, otherActors); * const highlightedConfig = createFocusHighlightConfig(baseConfig, focusMap); * * * ``` */ export declare function createFocusHighlightConfig(config: PuckConfig, focusMap?: Map): PuckConfig;