@embedpdf/plugin-ui 2.0.0-next.1 → 2.0.0-next.2

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/registries/component-registry.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { UIPlugin } from '@embedpdf/plugin-ui';\nimport { useState, useEffect } from '@framework';\nimport { UIDocumentState, UISchema } from '@embedpdf/plugin-ui';\n\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Get UI state for a document\n */\nexport const useUIState = (documentId: string) => {\n  const { provides } = useUICapability();\n  const [state, setState] = useState<UIDocumentState | null>(null);\n\n  useEffect(() => {\n    if (!provides) return;\n\n    const scope = provides.forDocument(documentId);\n    setState(scope.getState());\n\n    // Subscribe to changes\n    const unsubToolbar = scope.onToolbarChanged(() => setState(scope.getState()));\n    const unsubPanel = scope.onPanelChanged(() => setState(scope.getState()));\n    const unsubModal = scope.onModalChanged(() => setState(scope.getState()));\n    const unsubMenu = scope.onMenuChanged(() => setState(scope.getState()));\n\n    return () => {\n      unsubToolbar();\n      unsubPanel();\n      unsubModal();\n      unsubMenu();\n    };\n  }, [provides, documentId]);\n\n  return state;\n};\n\n/**\n * Get UI schema\n */\nexport const useUISchema = (): UISchema | null => {\n  const { provides } = useUICapability();\n  return provides?.getSchema() ?? null;\n};\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ReactNode } from '@framework';\n\n/**\n * Anchor Registry\n *\n * Tracks DOM elements for menu positioning.\n * Each anchor is scoped by documentId and itemId.\n */\nexport interface AnchorRegistry {\n  register(documentId: string, itemId: string, element: HTMLElement): void;\n  unregister(documentId: string, itemId: string): void;\n  getAnchor(documentId: string, itemId: string): HTMLElement | null;\n}\n\nconst AnchorRegistryContext = createContext<AnchorRegistry | null>(null);\n\nexport function AnchorRegistryProvider({ children }: { children: ReactNode }) {\n  const anchorsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n  const registry: AnchorRegistry = {\n    register: useCallback((documentId: string, itemId: string, element: HTMLElement) => {\n      const key = `${documentId}:${itemId}`;\n      anchorsRef.current.set(key, element);\n    }, []),\n\n    unregister: useCallback((documentId: string, itemId: string) => {\n      const key = `${documentId}:${itemId}`;\n      anchorsRef.current.delete(key);\n    }, []),\n\n    getAnchor: useCallback((documentId: string, itemId: string) => {\n      const key = `${documentId}:${itemId}`;\n      return anchorsRef.current.get(key) || null;\n    }, []),\n  };\n\n  return (\n    <AnchorRegistryContext.Provider value={registry}>{children}</AnchorRegistryContext.Provider>\n  );\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n  const context = useContext(AnchorRegistryContext);\n  if (!context) {\n    throw new Error('useAnchorRegistry must be used within UIProvider');\n  }\n  return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ComponentType, ReactNode } from '@framework';\nimport { BaseComponentProps } from '../types';\n\n/**\n * Component Registry\n *\n * Stores custom components that can be referenced in the UI schema.\n */\nexport interface ComponentRegistry {\n  register(id: string, component: ComponentType<BaseComponentProps>): void;\n  unregister(id: string): void;\n  get(id: string): ComponentType<BaseComponentProps> | undefined;\n  has(id: string): boolean;\n  getRegisteredIds(): string[];\n}\n\nconst ComponentRegistryContext = createContext<ComponentRegistry | null>(null);\n\nexport interface ComponentRegistryProviderProps {\n  children: ReactNode;\n  initialComponents?: Record<string, ComponentType<BaseComponentProps>>;\n}\n\nexport function ComponentRegistryProvider({\n  children,\n  initialComponents = {},\n}: ComponentRegistryProviderProps) {\n  const componentsRef = useRef<Map<string, ComponentType<BaseComponentProps>>>(\n    new Map(Object.entries(initialComponents)),\n  );\n\n  const registry: ComponentRegistry = {\n    register: useCallback((id: string, component: ComponentType<BaseComponentProps>) => {\n      componentsRef.current.set(id, component);\n    }, []),\n\n    unregister: useCallback((id: string) => {\n      componentsRef.current.delete(id);\n    }, []),\n\n    get: useCallback((id: string) => {\n      return componentsRef.current.get(id);\n    }, []),\n\n    has: useCallback((id: string) => {\n      return componentsRef.current.has(id);\n    }, []),\n\n    getRegisteredIds: useCallback(() => {\n      return Array.from(componentsRef.current.keys());\n    }, []),\n  };\n\n  return (\n    <ComponentRegistryContext.Provider value={registry}>\n      {children}\n    </ComponentRegistryContext.Provider>\n  );\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n  const context = useContext(ComponentRegistryContext);\n  if (!context) {\n    throw new Error('useComponentRegistry must be used within UIProvider');\n  }\n  return context;\n}\n","import { createContext, useContext } from '@framework';\nimport type { ReactNode } from '@framework';\nimport { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RenderersContext = createContext<UIRenderers | null>(null);\n\nexport interface RenderersProviderProps {\n  children: ReactNode;\n  renderers: UIRenderers;\n}\n\nexport function RenderersProvider({ children, renderers }: RenderersProviderProps) {\n  return <RenderersContext.Provider value={renderers}>{children}</RenderersContext.Provider>;\n}\n\nexport function useRenderers(): UIRenderers {\n  const context = useContext(RenderersContext);\n  if (!context) {\n    throw new Error('useRenderers must be used within UIProvider');\n  }\n  return context;\n}\n","import { useState, useEffect } from '@framework';\nimport { useUIState, useUICapability } from './hooks/use-ui';\nimport { useAnchorRegistry } from './registries/anchor-registry';\nimport { useRenderers } from './registries/renderers-registry';\n\n/**\n * Automatically renders menus when opened\n *\n * This component:\n * 1. Listens to UI plugin state for open menus\n * 2. Looks up anchor elements from the anchor registry\n * 3. Renders menus using the user-provided menu renderer\n */\nexport interface AutoMenuRendererProps {\n  container?: HTMLElement | null;\n  documentId: string; // Which document's menus to render\n}\n\nexport function AutoMenuRenderer({ container, documentId }: AutoMenuRendererProps) {\n  const uiState = useUIState(documentId);\n  const { provides } = useUICapability();\n  const anchorRegistry = useAnchorRegistry();\n  const renderers = useRenderers();\n\n  const [activeMenu, setActiveMenu] = useState<{\n    menuId: string;\n    anchorEl: HTMLElement | null;\n  } | null>(null);\n\n  const openMenus = uiState?.openMenus || {};\n  const schema = provides?.getSchema();\n\n  // Update active menu when state changes\n  useEffect(() => {\n    const openMenuIds = Object.keys(openMenus);\n\n    if (openMenuIds.length > 0) {\n      // Show the first open menu (in practice, should only be one)\n      const menuId = openMenuIds[0];\n      if (!menuId) {\n        setActiveMenu(null);\n        return;\n      }\n\n      const menuState = openMenus[menuId];\n      if (menuState && menuState.triggeredByItemId) {\n        // Look up anchor with documentId scope\n        const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n        setActiveMenu({ menuId, anchorEl: anchor });\n      } else {\n        setActiveMenu(null);\n      }\n    } else {\n      setActiveMenu(null);\n    }\n  }, [openMenus, anchorRegistry, documentId]);\n\n  const handleClose = () => {\n    if (activeMenu) {\n      provides?.forDocument(documentId).closeMenu(activeMenu.menuId);\n    }\n  };\n\n  if (!activeMenu || !schema) {\n    return null;\n  }\n\n  const menuSchema = schema.menus[activeMenu.menuId];\n  if (!menuSchema) {\n    console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n    return null;\n  }\n\n  // Use the user-provided menu renderer\n  const MenuRenderer = renderers.menu;\n\n  return (\n    <MenuRenderer\n      schema={menuSchema}\n      documentId={documentId}\n      anchorEl={activeMenu.anchorEl}\n      onClose={handleClose}\n      container={container}\n    />\n  );\n}\n","import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\nimport { useUICapability, useUIPlugin } from './hooks/use-ui';\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  ReactNode,\n  HTMLAttributes,\n} from '@framework';\n\n/**\n * Find the style injection target for an element.\n * Returns the shadow root if inside one, otherwise document.head.\n */\nfunction getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {\n  const root = element.getRootNode();\n  if (root instanceof ShadowRoot) {\n    return root;\n  }\n  return document.head;\n}\n\ninterface UIRootProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * Internal component that handles:\n * 1. Injecting the generated stylesheet (into shadow root or document.head)\n * 2. Managing the data-disabled-categories attribute\n * 3. Updating styles on locale changes\n */\nexport function UIRoot({ children, ...restProps }: UIRootProps) {\n  const { plugin } = useUIPlugin();\n  const { provides } = useUICapability();\n  const [disabledCategories, setDisabledCategories] = useState<string[]>([]);\n  const styleElRef = useRef<HTMLStyleElement | null>(null);\n  const styleTargetRef = useRef<HTMLElement | ShadowRoot | null>(null);\n  const previousElementRef = useRef<HTMLDivElement | null>(null);\n\n  // Callback ref that handles style injection when element mounts\n  // Handles React Strict Mode by tracking previous element\n  const rootRefCallback = useCallback(\n    (element: HTMLDivElement | null) => {\n      const previousElement = previousElementRef.current;\n\n      // Update ref\n      previousElementRef.current = element;\n\n      // If element is null (unmount), don't do anything yet\n      // React Strict Mode will remount, so we'll handle cleanup in useEffect\n      if (!element) {\n        return;\n      }\n\n      // If element changed (or is new) and plugin is available, inject styles\n      if (element !== previousElement && plugin) {\n        const styleTarget = getStyleTarget(element);\n        styleTargetRef.current = styleTarget;\n\n        // Check if styles already exist in this target\n        const existingStyle = styleTarget.querySelector(\n          UI_SELECTORS.STYLES,\n        ) as HTMLStyleElement | null;\n\n        if (existingStyle) {\n          styleElRef.current = existingStyle;\n          // Update content in case locale changed\n          existingStyle.textContent = plugin.getStylesheet();\n          return;\n        }\n\n        // Create and inject stylesheet\n        const stylesheet = plugin.getStylesheet();\n        const styleEl = document.createElement('style');\n        styleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n        styleEl.textContent = stylesheet;\n\n        if (styleTarget instanceof ShadowRoot) {\n          // For shadow root, prepend before other content\n          styleTarget.insertBefore(styleEl, styleTarget.firstChild);\n        } else {\n          styleTarget.appendChild(styleEl);\n        }\n\n        styleElRef.current = styleEl;\n      }\n    },\n    [plugin],\n  );\n\n  // Cleanup on actual unmount (not Strict Mode remount)\n  useEffect(() => {\n    return () => {\n      // Only cleanup if we're actually unmounting (not just Strict Mode)\n      // The style element will be reused if component remounts\n      if (styleElRef.current?.parentNode && !previousElementRef.current) {\n        styleElRef.current.remove();\n      }\n      styleElRef.current = null;\n      styleTargetRef.current = null;\n    };\n  }, []);\n\n  // Subscribe to stylesheet invalidation (locale changes, schema merges)\n  useEffect(() => {\n    if (!plugin) return;\n\n    return plugin.onStylesheetInvalidated(() => {\n      // Update the style element content\n      if (styleElRef.current) {\n        styleElRef.current.textContent = plugin.getStylesheet();\n      }\n    });\n  }, [plugin]);\n\n  // Subscribe to category changes\n  useEffect(() => {\n    if (!provides) return;\n\n    setDisabledCategories(provides.getDisabledCategories());\n\n    return provides.onCategoryChanged(({ disabledCategories }) => {\n      setDisabledCategories(disabledCategories);\n    });\n  }, [provides]);\n\n  // Build the disabled categories attribute value\n  const disabledCategoriesAttr = useMemo(\n    () => (disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined),\n    [disabledCategories],\n  );\n\n  const rootProps = {\n    [UI_ATTRIBUTES.ROOT]: '',\n    [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr,\n  };\n\n  return (\n    <div\n      ref={rootRefCallback}\n      {...rootProps}\n      {...restProps}\n      style={{ containerType: 'inline-size', ...restProps.style }}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode, ComponentType, HTMLAttributes } from '@framework';\nimport { AnchorRegistryProvider } from './registries/anchor-registry';\nimport { ComponentRegistryProvider } from './registries/component-registry';\nimport { RenderersProvider } from './registries/renderers-registry';\nimport { BaseComponentProps, UIRenderers } from './types';\nimport { AutoMenuRenderer } from './auto-menu-renderer';\nimport { UIRoot } from './root';\n\n/**\n * UIProvider Props\n */\nexport interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n\n  /**\n   * Document ID for this UI context\n   * Required for menu rendering\n   */\n  documentId: string;\n\n  /**\n   * Custom component registry\n   * Maps component IDs to components\n   */\n  components?: Record<string, ComponentType<BaseComponentProps>>;\n\n  /**\n   * REQUIRED: User-provided renderers\n   * These define how toolbars, panels, and menus are displayed\n   */\n  renderers: UIRenderers;\n\n  /**\n   * Optional: Container for menu portal\n   * Defaults to document.body\n   */\n  menuContainer?: HTMLElement | null;\n}\n\n/**\n * UIProvider - Single provider for all UI plugin functionality\n *\n * Manages:\n * - Anchor registry for menu positioning\n * - Component registry for custom components\n * - Renderers for toolbars, panels, and menus\n * - Automatic menu rendering\n *\n * @example\n * ```tsx\n * <EmbedPDF engine={engine} plugins={plugins}>\n *   {({ pluginsReady }) => (\n *     pluginsReady && (\n *       <DocumentContext>\n *         {({ activeDocumentId }) => (\n *           activeDocumentId && (\n *             <UIProvider\n *               documentId={activeDocumentId}\n *               components={{\n *                 'thumbnail-panel': ThumbnailPanel,\n *                 'bookmark-panel': BookmarkPanel,\n *               }}\n *               renderers={{\n *                 toolbar: ToolbarRenderer,\n *                 panel: PanelRenderer,\n *                 menu: MenuRenderer,\n *               }}\n *             >\n *               <ViewerLayout />\n *             </UIProvider>\n *           )\n *         )}\n *       </DocumentContext>\n *     )\n *   )}\n * </EmbedPDF>\n * ```\n */\nexport function UIProvider({\n  children,\n  documentId,\n  components = {},\n  renderers,\n  menuContainer,\n  ...restProps\n}: UIProviderProps) {\n  return (\n    <AnchorRegistryProvider>\n      <ComponentRegistryProvider initialComponents={components}>\n        <RenderersProvider renderers={renderers}>\n          <UIRoot {...restProps}>\n            {children}\n            {/* Automatically render menus for this document */}\n            <AutoMenuRenderer documentId={documentId} container={menuContainer} />\n          </UIRoot>\n        </RenderersProvider>\n      </ComponentRegistryProvider>\n    </AnchorRegistryProvider>\n  );\n}\n","import { useComponentRegistry } from '../registries/component-registry';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n  const componentRegistry = useComponentRegistry();\n\n  return {\n    /**\n     * Render a custom component by ID\n     *\n     * @param componentId - Component ID from schema\n     * @param documentId - Document ID\n     * @param props - Additional props to pass to component\n     * @returns Rendered component or null if not found\n     */\n    renderCustomComponent: (componentId: string, documentId: string, props?: any) => {\n      const Component = componentRegistry.get(componentId);\n\n      if (!Component) {\n        console.error(`Component \"${componentId}\" not found in registry`);\n        return null;\n      }\n\n      return <Component documentId={documentId} {...(props || {})} />;\n    },\n  };\n}\n","import { useCallback, useRef } from '@framework';\nimport { useAnchorRegistry } from '../registries/anchor-registry';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param documentId - Document ID\n * @param itemId - Item ID (typically matches the toolbar/menu item ID)\n * @returns Ref callback to attach to the element\n *\n * @example\n * ```tsx\n * function ZoomButton({ documentId }: Props) {\n *   const anchorRef = useRegisterAnchor(documentId, 'zoom-button');\n *\n *   return <button ref={anchorRef}>Zoom</button>;\n * }\n * ```\n */\nexport function useRegisterAnchor(\n  documentId: string,\n  itemId: string,\n): (element: HTMLElement | null) => void {\n  const registry = useAnchorRegistry();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const documentIdRef = useRef(documentId);\n  const itemIdRef = useRef(itemId);\n\n  // Keep refs in sync\n  documentIdRef.current = documentId;\n  itemIdRef.current = itemId;\n\n  // Return stable callback that uses refs\n  return useCallback(\n    (element: HTMLElement | null) => {\n      // Store previous element\n      const previousElement = elementRef.current;\n\n      // Update ref\n      elementRef.current = element;\n\n      // Handle registration/unregistration\n      if (element) {\n        // Register new element\n        if (element !== previousElement) {\n          registry.register(documentIdRef.current, itemIdRef.current, element);\n        }\n      } else if (previousElement) {\n        // Element is now null, but we had one before - unregister\n        registry.unregister(documentIdRef.current, itemIdRef.current);\n      }\n    },\n    [registry], // Only depend on registry!\n  );\n}\n","import { useUICapability, useUIState } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides simple functions to render toolbars and panels by placement+slot.\n * Always passes isOpen state to renderers so they can control animations.\n *\n * Automatically subscribes to UI state changes for the given document.\n */\nexport function useSchemaRenderer(documentId: string) {\n  const renderers = useRenderers();\n  const { provides } = useUICapability();\n  const schema = provides?.getSchema();\n  const uiState = useUIState(documentId); // Subscribe to state changes\n\n  return {\n    /**\n     * Render a toolbar by placement and slot\n     *\n     * Always renders with isOpen state when toolbar exists in slot.\n     *\n     * @param placement - 'top' | 'bottom' | 'left' | 'right'\n     * @param slot - Slot name (e.g. 'main', 'secondary')\n     *\n     * @example\n     * ```tsx\n     * {renderToolbar('top', 'main')}\n     * {renderToolbar('top', 'secondary')}\n     * ```\n     */\n    renderToolbar: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n      if (!schema || !provides || !uiState) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const toolbarSlot = uiState.activeToolbars[slotKey];\n\n      // If no toolbar in this slot, nothing to render\n      if (!toolbarSlot) return null;\n\n      const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];\n      if (!toolbarSchema) {\n        console.warn(`Toolbar \"${toolbarSlot.toolbarId}\" not found in schema`);\n        return null;\n      }\n\n      // Check if toolbar is closable\n      const isClosable = !toolbarSchema.permanent;\n\n      const handleClose = isClosable\n        ? () => {\n            provides.forDocument(documentId).closeToolbarSlot(placement, slot);\n          }\n        : undefined;\n\n      const ToolbarRenderer = renderers.toolbar;\n\n      // ALWAYS render, pass isOpen state\n      return (\n        <ToolbarRenderer\n          key={toolbarSlot.toolbarId}\n          schema={toolbarSchema}\n          documentId={documentId}\n          isOpen={toolbarSlot.isOpen}\n          onClose={handleClose}\n        />\n      );\n    },\n\n    /**\n     * Render a panel by placement and slot\n     *\n     * ALWAYS renders (when panel exists in slot) with isOpen state.\n     * Your renderer controls whether to display or animate.\n     *\n     * @param placement - 'left' | 'right' | 'top' | 'bottom'\n     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n     *\n     * @example\n     * ```tsx\n     * {renderPanel('left', 'main')}\n     * {renderPanel('right', 'main')}\n     * ```\n     */\n    renderPanel: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n      if (!schema || !provides || !uiState) return null;\n      const slotKey = `${placement}-${slot}`;\n      const panelSlot = uiState.activePanels[slotKey];\n\n      // If no panel in this slot, nothing to render\n      if (!panelSlot) return null;\n\n      const panelSchema = schema.panels[panelSlot.panelId];\n      if (!panelSchema) {\n        console.warn(`Panel \"${panelSlot.panelId}\" not found in schema`);\n        return null;\n      }\n\n      const handleClose = () => {\n        provides.forDocument(documentId).closePanelSlot(placement, slot);\n      };\n\n      const PanelRenderer = renderers.panel;\n\n      // ALWAYS render, pass isOpen state\n      // Your renderer decides whether to return null or animate\n      return (\n        <PanelRenderer\n          key={panelSlot.panelId}\n          schema={panelSchema}\n          documentId={documentId}\n          isOpen={panelSlot.isOpen}\n          onClose={handleClose}\n        />\n      );\n    },\n\n    /**\n     * Helper: Get all active toolbars for this document\n     * Useful for batch rendering or debugging\n     */\n    getActiveToolbars: () => {\n      if (!uiState) return [];\n      return Object.entries(uiState.activeToolbars).map(([slotKey, toolbarSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          toolbarId: toolbarSlot.toolbarId,\n          isOpen: toolbarSlot.isOpen,\n        };\n      });\n    },\n\n    /**\n     * Helper: Get all active panels for this document\n     * Useful for batch rendering or debugging\n     */\n    getActivePanels: () => {\n      if (!uiState) return [];\n      return Object.entries(uiState.activePanels).map(([slotKey, panelSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          panelId: panelSlot.panelId,\n          isOpen: panelSlot.isOpen,\n        };\n      });\n    },\n  };\n}\n","import { useCallback } from '@framework';\nimport { SelectionMenuPropsBase, SelectionMenuRenderFn } from '@embedpdf/utils/@framework';\nimport { useUICapability } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * Creates a render function for a selection menu from the schema\n *\n * @param menuId - The selection menu ID from schema\n * @param documentId - Document ID\n * @returns A render function compatible with layer selectionMenu props\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n  menuId: string,\n  documentId: string,\n): SelectionMenuRenderFn<TContext> | undefined {\n  const { provides } = useUICapability();\n  const renderers = useRenderers();\n\n  const renderFn = useCallback(\n    (props: SelectionMenuPropsBase<TContext>) => {\n      const schema = provides?.getSchema();\n      const menuSchema = schema?.selectionMenus?.[menuId];\n\n      if (!menuSchema) {\n        return null;\n      }\n\n      if (!props.selected) {\n        return null;\n      }\n\n      const SelectionMenuRenderer = renderers.selectionMenu;\n\n      return <SelectionMenuRenderer schema={menuSchema} documentId={documentId} props={props} />;\n    },\n    [provides, renderers, menuId, documentId],\n  );\n\n  // Return undefined if schema doesn't have this menu\n  const schema = provides?.getSchema();\n  if (!schema?.selectionMenus?.[menuId]) {\n    return undefined;\n  }\n\n  return renderFn;\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","useUIPlugin","usePlugin","useUIState","documentId","provides","state","setState","useState","useEffect","scope","forDocument","getState","unsubToolbar","onToolbarChanged","unsubPanel","onPanelChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","AnchorRegistryContext","createContext","AnchorRegistryProvider","children","anchorsRef","useRef","Map","registry","register","useCallback","itemId","element","key","current","set","unregister","delete","getAnchor","get","Provider","value","useAnchorRegistry","context","useContext","Error","ComponentRegistryContext","ComponentRegistryProvider","initialComponents","componentsRef","Object","entries","component","has","getRegisteredIds","Array","from","keys","useComponentRegistry","RenderersContext","RenderersProvider","renderers","useRenderers","AutoMenuRenderer","container","uiState","anchorRegistry","activeMenu","setActiveMenu","openMenus","schema","getSchema","openMenuIds","length","menuId","menuState","triggeredByItemId","anchor","anchorEl","menuSchema","menus","console","warn","MenuRenderer","menu","jsx","onClose","closeMenu","UIRoot","restProps","plugin","disabledCategories","setDisabledCategories","styleElRef","styleTargetRef","previousElementRef","rootRefCallback","previousElement","styleTarget","root","getRootNode","ShadowRoot","document","head","getStyleTarget","existingStyle","querySelector","UI_SELECTORS","STYLES","textContent","getStylesheet","stylesheet","styleEl","createElement","setAttribute","UI_ATTRIBUTES","insertBefore","firstChild","appendChild","_a","parentNode","remove","onStylesheetInvalidated","getDisabledCategories","onCategoryChanged","disabledCategoriesAttr","useMemo","join","rootProps","ROOT","DISABLED_CATEGORIES","ref","style","containerType","components","menuContainer","jsxs","componentRegistry","renderCustomComponent","componentId","props","Component","error","elementRef","documentIdRef","itemIdRef","renderToolbar","placement","slot","slotKey","toolbarSlot","activeToolbars","toolbarSchema","toolbars","toolbarId","handleClose","permanent","closeToolbarSlot","ToolbarRenderer","toolbar","isOpen","renderPanel","panelSlot","activePanels","panelSchema","panels","panelId","PanelRenderer","panel","closePanelSlot","getActiveToolbars","map","split","getActivePanels","renderFn","selectionMenus","selected","SelectionMenuRenderer","selectionMenu"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-ui-container.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/registries/component-registry.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { UIPlugin } from '@embedpdf/plugin-ui';\nimport { useState, useEffect } from '@framework';\nimport { UIDocumentState, UISchema } from '@embedpdf/plugin-ui';\n\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Get UI state for a document\n */\nexport const useUIState = (documentId: string) => {\n  const { provides } = useUICapability();\n  const [state, setState] = useState<UIDocumentState | null>(null);\n\n  useEffect(() => {\n    if (!provides) return;\n\n    const scope = provides.forDocument(documentId);\n    setState(scope.getState());\n\n    // Subscribe to changes\n    const unsubToolbar = scope.onToolbarChanged(() => setState(scope.getState()));\n    const unsubSidebar = scope.onSidebarChanged(() => setState(scope.getState()));\n    const unsubModal = scope.onModalChanged(() => setState(scope.getState()));\n    const unsubMenu = scope.onMenuChanged(() => setState(scope.getState()));\n\n    return () => {\n      unsubToolbar();\n      unsubSidebar();\n      unsubModal();\n      unsubMenu();\n    };\n  }, [provides, documentId]);\n\n  return state;\n};\n\n/**\n * Get UI schema\n */\nexport const useUISchema = (): UISchema | null => {\n  const { provides } = useUICapability();\n  return provides?.getSchema() ?? null;\n};\n","import { createContext, useContext, RefObject } from '@framework';\n\nexport interface UIContainerContextValue {\n  /** Reference to the UIRoot container element */\n  containerRef: RefObject<HTMLDivElement>;\n  /** Get the container element (may be null if not mounted) */\n  getContainer: () => HTMLDivElement | null;\n}\n\nexport const UIContainerContext = createContext<UIContainerContextValue | null>(null);\n\n/**\n * Hook to access the UI container element.\n *\n * This provides access to the UIRoot container for:\n * - Container query based responsiveness\n * - Portaling elements to the root\n * - Measuring container dimensions\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { containerRef, getContainer } = useUIContainer();\n *\n *   // Use containerRef for ResizeObserver\n *   useEffect(() => {\n *     const container = getContainer();\n *     if (!container) return;\n *\n *     const observer = new ResizeObserver(() => {\n *       console.log('Container width:', container.clientWidth);\n *     });\n *     observer.observe(container);\n *     return () => observer.disconnect();\n *   }, [getContainer]);\n *\n *   // Or portal to the container\n *   return createPortal(<Modal />, getContainer()!);\n * }\n * ```\n */\nexport function useUIContainer(): UIContainerContextValue {\n  const context = useContext(UIContainerContext);\n  if (!context) {\n    throw new Error('useUIContainer must be used within a UIProvider');\n  }\n  return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ReactNode } from '@framework';\n\n/**\n * Anchor Registry\n *\n * Tracks DOM elements for menu positioning.\n * Each anchor is scoped by documentId and itemId.\n */\nexport interface AnchorRegistry {\n  register(documentId: string, itemId: string, element: HTMLElement): void;\n  unregister(documentId: string, itemId: string): void;\n  getAnchor(documentId: string, itemId: string): HTMLElement | null;\n}\n\nconst AnchorRegistryContext = createContext<AnchorRegistry | null>(null);\n\nexport function AnchorRegistryProvider({ children }: { children: ReactNode }) {\n  const anchorsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n  const registry: AnchorRegistry = {\n    register: useCallback((documentId: string, itemId: string, element: HTMLElement) => {\n      const key = `${documentId}:${itemId}`;\n      anchorsRef.current.set(key, element);\n    }, []),\n\n    unregister: useCallback((documentId: string, itemId: string) => {\n      const key = `${documentId}:${itemId}`;\n      anchorsRef.current.delete(key);\n    }, []),\n\n    getAnchor: useCallback((documentId: string, itemId: string) => {\n      const key = `${documentId}:${itemId}`;\n      return anchorsRef.current.get(key) || null;\n    }, []),\n  };\n\n  return (\n    <AnchorRegistryContext.Provider value={registry}>{children}</AnchorRegistryContext.Provider>\n  );\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n  const context = useContext(AnchorRegistryContext);\n  if (!context) {\n    throw new Error('useAnchorRegistry must be used within UIProvider');\n  }\n  return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ComponentType, ReactNode } from '@framework';\nimport { BaseComponentProps } from '../types';\n\n/**\n * Component Registry\n *\n * Stores custom components that can be referenced in the UI schema.\n */\nexport interface ComponentRegistry {\n  register(id: string, component: ComponentType<BaseComponentProps>): void;\n  unregister(id: string): void;\n  get(id: string): ComponentType<BaseComponentProps> | undefined;\n  has(id: string): boolean;\n  getRegisteredIds(): string[];\n}\n\nconst ComponentRegistryContext = createContext<ComponentRegistry | null>(null);\n\nexport interface ComponentRegistryProviderProps {\n  children: ReactNode;\n  initialComponents?: Record<string, ComponentType<BaseComponentProps>>;\n}\n\nexport function ComponentRegistryProvider({\n  children,\n  initialComponents = {},\n}: ComponentRegistryProviderProps) {\n  const componentsRef = useRef<Map<string, ComponentType<BaseComponentProps>>>(\n    new Map(Object.entries(initialComponents)),\n  );\n\n  const registry: ComponentRegistry = {\n    register: useCallback((id: string, component: ComponentType<BaseComponentProps>) => {\n      componentsRef.current.set(id, component);\n    }, []),\n\n    unregister: useCallback((id: string) => {\n      componentsRef.current.delete(id);\n    }, []),\n\n    get: useCallback((id: string) => {\n      return componentsRef.current.get(id);\n    }, []),\n\n    has: useCallback((id: string) => {\n      return componentsRef.current.has(id);\n    }, []),\n\n    getRegisteredIds: useCallback(() => {\n      return Array.from(componentsRef.current.keys());\n    }, []),\n  };\n\n  return (\n    <ComponentRegistryContext.Provider value={registry}>\n      {children}\n    </ComponentRegistryContext.Provider>\n  );\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n  const context = useContext(ComponentRegistryContext);\n  if (!context) {\n    throw new Error('useComponentRegistry must be used within UIProvider');\n  }\n  return context;\n}\n","import { createContext, useContext } from '@framework';\nimport type { ReactNode } from '@framework';\nimport { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RenderersContext = createContext<UIRenderers | null>(null);\n\nexport interface RenderersProviderProps {\n  children: ReactNode;\n  renderers: UIRenderers;\n}\n\nexport function RenderersProvider({ children, renderers }: RenderersProviderProps) {\n  return <RenderersContext.Provider value={renderers}>{children}</RenderersContext.Provider>;\n}\n\nexport function useRenderers(): UIRenderers {\n  const context = useContext(RenderersContext);\n  if (!context) {\n    throw new Error('useRenderers must be used within UIProvider');\n  }\n  return context;\n}\n","import { useState, useEffect } from '@framework';\nimport { useUIState, useUICapability } from './hooks/use-ui';\nimport { useAnchorRegistry } from './registries/anchor-registry';\nimport { useRenderers } from './registries/renderers-registry';\n\n/**\n * Automatically renders menus when opened\n *\n * This component:\n * 1. Listens to UI plugin state for open menus\n * 2. Looks up anchor elements from the anchor registry\n * 3. Renders menus using the user-provided menu renderer\n */\nexport interface AutoMenuRendererProps {\n  container?: HTMLElement | null;\n  documentId: string; // Which document's menus to render\n}\n\nexport function AutoMenuRenderer({ container, documentId }: AutoMenuRendererProps) {\n  const uiState = useUIState(documentId);\n  const { provides } = useUICapability();\n  const anchorRegistry = useAnchorRegistry();\n  const renderers = useRenderers();\n\n  const [activeMenu, setActiveMenu] = useState<{\n    menuId: string;\n    anchorEl: HTMLElement | null;\n  } | null>(null);\n\n  const openMenus = uiState?.openMenus || {};\n  const schema = provides?.getSchema();\n\n  // Update active menu when state changes\n  useEffect(() => {\n    const openMenuIds = Object.keys(openMenus);\n\n    if (openMenuIds.length > 0) {\n      // Show the first open menu (in practice, should only be one)\n      const menuId = openMenuIds[0];\n      if (!menuId) {\n        setActiveMenu(null);\n        return;\n      }\n\n      const menuState = openMenus[menuId];\n      if (menuState && menuState.triggeredByItemId) {\n        // Look up anchor with documentId scope\n        const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n        setActiveMenu({ menuId, anchorEl: anchor });\n      } else {\n        setActiveMenu(null);\n      }\n    } else {\n      setActiveMenu(null);\n    }\n  }, [openMenus, anchorRegistry, documentId]);\n\n  const handleClose = () => {\n    if (activeMenu) {\n      provides?.forDocument(documentId).closeMenu(activeMenu.menuId);\n    }\n  };\n\n  if (!activeMenu || !schema) {\n    return null;\n  }\n\n  const menuSchema = schema.menus[activeMenu.menuId];\n  if (!menuSchema) {\n    console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n    return null;\n  }\n\n  // Use the user-provided menu renderer\n  const MenuRenderer = renderers.menu;\n\n  return (\n    <MenuRenderer\n      schema={menuSchema}\n      documentId={documentId}\n      anchorEl={activeMenu.anchorEl}\n      onClose={handleClose}\n      container={container}\n    />\n  );\n}\n","import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\nimport { useUICapability, useUIPlugin } from './hooks/use-ui';\nimport { UIContainerContext, UIContainerContextValue } from './hooks/use-ui-container';\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  ReactNode,\n  HTMLAttributes,\n} from '@framework';\n\n/**\n * Find the style injection target for an element.\n * Returns the shadow root if inside one, otherwise document.head.\n */\nfunction getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {\n  const root = element.getRootNode();\n  if (root instanceof ShadowRoot) {\n    return root;\n  }\n  return document.head;\n}\n\ninterface UIRootProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * Internal component that handles:\n * 1. Injecting the generated stylesheet (into shadow root or document.head)\n * 2. Managing the data-disabled-categories attribute\n * 3. Updating styles on locale changes\n */\nexport function UIRoot({ children, style, ...restProps }: UIRootProps) {\n  const { plugin } = useUIPlugin();\n  const { provides } = useUICapability();\n  const [disabledCategories, setDisabledCategories] = useState<string[]>([]);\n  const [hiddenItems, setHiddenItems] = useState<string[]>([]);\n  const styleElRef = useRef<HTMLStyleElement | null>(null);\n  const styleTargetRef = useRef<HTMLElement | ShadowRoot | null>(null);\n  const previousElementRef = useRef<HTMLDivElement | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Create container context value (memoized to prevent unnecessary re-renders)\n  const containerContextValue = useMemo<UIContainerContextValue>(\n    () => ({\n      containerRef,\n      getContainer: () => containerRef.current,\n    }),\n    [],\n  );\n\n  // Callback ref that handles style injection when element mounts\n  // Handles React Strict Mode by tracking previous element\n  const rootRefCallback = useCallback(\n    (element: HTMLDivElement | null) => {\n      const previousElement = previousElementRef.current;\n\n      // Update refs\n      previousElementRef.current = element;\n      (containerRef as any).current = element;\n\n      // If element is null (unmount), don't do anything yet\n      // React Strict Mode will remount, so we'll handle cleanup in useEffect\n      if (!element) {\n        return;\n      }\n\n      // If element changed (or is new) and plugin is available, inject styles\n      if (element !== previousElement && plugin) {\n        const styleTarget = getStyleTarget(element);\n        styleTargetRef.current = styleTarget;\n\n        // Check if styles already exist in this target\n        const existingStyle = styleTarget.querySelector(\n          UI_SELECTORS.STYLES,\n        ) as HTMLStyleElement | null;\n\n        if (existingStyle) {\n          styleElRef.current = existingStyle;\n          // Update content in case locale changed\n          existingStyle.textContent = plugin.getStylesheet();\n          return;\n        }\n\n        // Create and inject stylesheet\n        const stylesheet = plugin.getStylesheet();\n        const styleEl = document.createElement('style');\n        styleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n        styleEl.textContent = stylesheet;\n\n        if (styleTarget instanceof ShadowRoot) {\n          // For shadow root, prepend before other content\n          styleTarget.insertBefore(styleEl, styleTarget.firstChild);\n        } else {\n          styleTarget.appendChild(styleEl);\n        }\n\n        styleElRef.current = styleEl;\n      }\n    },\n    [plugin],\n  );\n\n  // Cleanup on actual unmount (not Strict Mode remount)\n  useEffect(() => {\n    return () => {\n      // Only cleanup if we're actually unmounting (not just Strict Mode)\n      // The style element will be reused if component remounts\n      if (styleElRef.current?.parentNode && !previousElementRef.current) {\n        styleElRef.current.remove();\n      }\n      styleElRef.current = null;\n      styleTargetRef.current = null;\n    };\n  }, []);\n\n  // Subscribe to stylesheet invalidation (locale changes, schema merges)\n  useEffect(() => {\n    if (!plugin) return;\n\n    return plugin.onStylesheetInvalidated(() => {\n      // Update the style element content\n      if (styleElRef.current) {\n        styleElRef.current.textContent = plugin.getStylesheet();\n      }\n    });\n  }, [plugin]);\n\n  // Subscribe to category and hidden items changes\n  useEffect(() => {\n    if (!provides) return;\n\n    setDisabledCategories(provides.getDisabledCategories());\n    setHiddenItems(provides.getHiddenItems());\n\n    return provides.onCategoryChanged(({ disabledCategories, hiddenItems }) => {\n      setDisabledCategories(disabledCategories);\n      setHiddenItems(hiddenItems);\n    });\n  }, [provides]);\n\n  // Build the disabled categories attribute value\n  const disabledCategoriesAttr = useMemo(\n    () => (disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined),\n    [disabledCategories],\n  );\n\n  // Build the hidden items attribute value\n  const hiddenItemsAttr = useMemo(\n    () => (hiddenItems.length > 0 ? hiddenItems.join(' ') : undefined),\n    [hiddenItems],\n  );\n\n  const combinedStyle = useMemo(() => {\n    const base = { containerType: 'inline-size' as const };\n    if (style && typeof style === 'object') {\n      return { ...base, ...style };\n    }\n    return base;\n  }, [style]);\n\n  const rootProps = {\n    [UI_ATTRIBUTES.ROOT]: '',\n    [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr,\n    [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr,\n  };\n\n  return (\n    <UIContainerContext.Provider value={containerContextValue}>\n      <div ref={rootRefCallback} {...rootProps} {...restProps} style={combinedStyle}>\n        {children}\n      </div>\n    </UIContainerContext.Provider>\n  );\n}\n","import type { ReactNode, ComponentType, HTMLAttributes } from '@framework';\nimport { AnchorRegistryProvider } from './registries/anchor-registry';\nimport { ComponentRegistryProvider } from './registries/component-registry';\nimport { RenderersProvider } from './registries/renderers-registry';\nimport { BaseComponentProps, UIRenderers } from './types';\nimport { AutoMenuRenderer } from './auto-menu-renderer';\nimport { UIRoot } from './root';\n\n/**\n * UIProvider Props\n */\nexport interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n\n  /**\n   * Document ID for this UI context\n   * Required for menu rendering\n   */\n  documentId: string;\n\n  /**\n   * Custom component registry\n   * Maps component IDs to components\n   */\n  components?: Record<string, ComponentType<BaseComponentProps>>;\n\n  /**\n   * REQUIRED: User-provided renderers\n   * These define how toolbars, panels, and menus are displayed\n   */\n  renderers: UIRenderers;\n\n  /**\n   * Optional: Container for menu portal\n   * Defaults to document.body\n   */\n  menuContainer?: HTMLElement | null;\n}\n\n/**\n * UIProvider - Single provider for all UI plugin functionality\n *\n * Manages:\n * - Anchor registry for menu positioning\n * - Component registry for custom components\n * - Renderers for toolbars, panels, and menus\n * - Automatic menu rendering\n *\n * @example\n * ```tsx\n * <EmbedPDF engine={engine} plugins={plugins}>\n *   {({ pluginsReady }) => (\n *     pluginsReady && (\n *       <DocumentContext>\n *         {({ activeDocumentId }) => (\n *           activeDocumentId && (\n *             <UIProvider\n *               documentId={activeDocumentId}\n *               components={{\n *                 'thumbnail-panel': ThumbnailPanel,\n *                 'bookmark-panel': BookmarkPanel,\n *               }}\n *               renderers={{\n *                 toolbar: ToolbarRenderer,\n *                 panel: PanelRenderer,\n *                 menu: MenuRenderer,\n *               }}\n *             >\n *               <ViewerLayout />\n *             </UIProvider>\n *           )\n *         )}\n *       </DocumentContext>\n *     )\n *   )}\n * </EmbedPDF>\n * ```\n */\nexport function UIProvider({\n  children,\n  documentId,\n  components = {},\n  renderers,\n  menuContainer,\n  ...restProps\n}: UIProviderProps) {\n  return (\n    <AnchorRegistryProvider>\n      <ComponentRegistryProvider initialComponents={components}>\n        <RenderersProvider renderers={renderers}>\n          <UIRoot {...restProps}>\n            {children}\n            {/* Automatically render menus for this document */}\n            <AutoMenuRenderer documentId={documentId} container={menuContainer} />\n          </UIRoot>\n        </RenderersProvider>\n      </ComponentRegistryProvider>\n    </AnchorRegistryProvider>\n  );\n}\n","import { useComponentRegistry } from '../registries/component-registry';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n  const componentRegistry = useComponentRegistry();\n\n  return {\n    /**\n     * Render a custom component by ID\n     *\n     * @param componentId - Component ID from schema\n     * @param documentId - Document ID\n     * @param props - Additional props to pass to component\n     * @returns Rendered component or null if not found\n     */\n    renderCustomComponent: (componentId: string, documentId: string, props?: any) => {\n      const Component = componentRegistry.get(componentId);\n\n      if (!Component) {\n        console.error(`Component \"${componentId}\" not found in registry`);\n        return null;\n      }\n\n      return <Component documentId={documentId} {...(props || {})} />;\n    },\n  };\n}\n","import { useCallback, useRef } from '@framework';\nimport { useAnchorRegistry } from '../registries/anchor-registry';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param documentId - Document ID\n * @param itemId - Item ID (typically matches the toolbar/menu item ID)\n * @returns Ref callback to attach to the element\n *\n * @example\n * ```tsx\n * function ZoomButton({ documentId }: Props) {\n *   const anchorRef = useRegisterAnchor(documentId, 'zoom-button');\n *\n *   return <button ref={anchorRef}>Zoom</button>;\n * }\n * ```\n */\nexport function useRegisterAnchor(\n  documentId: string,\n  itemId: string,\n): (element: HTMLElement | null) => void {\n  const registry = useAnchorRegistry();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const documentIdRef = useRef(documentId);\n  const itemIdRef = useRef(itemId);\n\n  // Keep refs in sync\n  documentIdRef.current = documentId;\n  itemIdRef.current = itemId;\n\n  // Return stable callback that uses refs\n  return useCallback(\n    (element: HTMLElement | null) => {\n      // Store previous element\n      const previousElement = elementRef.current;\n\n      // Update ref\n      elementRef.current = element;\n\n      // Handle registration/unregistration\n      if (element) {\n        // Register new element\n        if (element !== previousElement) {\n          registry.register(documentIdRef.current, itemIdRef.current, element);\n        }\n      } else if (previousElement) {\n        // Element is now null, but we had one before - unregister\n        registry.unregister(documentIdRef.current, itemIdRef.current);\n      }\n    },\n    [registry], // Only depend on registry!\n  );\n}\n","import { useUICapability, useUIState } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides simple functions to render toolbars, sidebars, and modals.\n * Always passes isOpen state to renderers so they can control animations.\n *\n * Automatically subscribes to UI state changes for the given document.\n */\nexport function useSchemaRenderer(documentId: string) {\n  const renderers = useRenderers();\n  const { provides } = useUICapability();\n  const schema = provides?.getSchema();\n  const uiState = useUIState(documentId); // Subscribe to state changes\n\n  return {\n    /**\n     * Render a toolbar by placement and slot\n     *\n     * Always renders with isOpen state when toolbar exists in slot.\n     *\n     * @param placement - 'top' | 'bottom' | 'left' | 'right'\n     * @param slot - Slot name (e.g. 'main', 'secondary')\n     *\n     * @example\n     * ```tsx\n     * {renderToolbar('top', 'main')}\n     * {renderToolbar('top', 'secondary')}\n     * ```\n     */\n    renderToolbar: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n      if (!schema || !provides || !uiState) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const toolbarSlot = uiState.activeToolbars[slotKey];\n\n      // If no toolbar in this slot, nothing to render\n      if (!toolbarSlot) return null;\n\n      const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];\n      if (!toolbarSchema) {\n        console.warn(`Toolbar \"${toolbarSlot.toolbarId}\" not found in schema`);\n        return null;\n      }\n\n      // Check if toolbar is closable\n      const isClosable = !toolbarSchema.permanent;\n\n      const handleClose = isClosable\n        ? () => {\n            provides.forDocument(documentId).closeToolbarSlot(placement, slot);\n          }\n        : undefined;\n\n      const ToolbarRenderer = renderers.toolbar;\n\n      // ALWAYS render, pass isOpen state\n      return (\n        <ToolbarRenderer\n          key={toolbarSlot.toolbarId}\n          schema={toolbarSchema}\n          documentId={documentId}\n          isOpen={toolbarSlot.isOpen}\n          onClose={handleClose}\n        />\n      );\n    },\n\n    /**\n     * Render a sidebar by placement and slot\n     *\n     * ALWAYS renders (when sidebar exists in slot) with isOpen state.\n     * Your renderer controls whether to display or animate.\n     *\n     * @param placement - 'left' | 'right' | 'top' | 'bottom'\n     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n     *\n     * @example\n     * ```tsx\n     * {renderSidebar('left', 'main')}\n     * {renderSidebar('right', 'main')}\n     * ```\n     */\n    renderSidebar: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n      if (!schema || !provides || !uiState) return null;\n      const slotKey = `${placement}-${slot}`;\n      const sidebarSlot = uiState.activeSidebars[slotKey];\n\n      // If no sidebar in this slot, nothing to render\n      if (!sidebarSlot) return null;\n\n      const sidebarSchema = schema.sidebars?.[sidebarSlot.sidebarId];\n      if (!sidebarSchema) {\n        console.warn(`Sidebar \"${sidebarSlot.sidebarId}\" not found in schema`);\n        return null;\n      }\n\n      const handleClose = () => {\n        provides.forDocument(documentId).closeSidebarSlot(placement, slot);\n      };\n\n      const SidebarRenderer = renderers.sidebar;\n\n      // ALWAYS render, pass isOpen state\n      // Your renderer decides whether to return null or animate\n      return (\n        <SidebarRenderer\n          key={sidebarSlot.sidebarId}\n          schema={sidebarSchema}\n          documentId={documentId}\n          isOpen={sidebarSlot.isOpen}\n          onClose={handleClose}\n        />\n      );\n    },\n\n    /**\n     * Render the active modal (if any)\n     *\n     * Only one modal can be active at a time.\n     * Modals are defined in schema.modals.\n     *\n     * Supports animation lifecycle:\n     * - isOpen: true = visible\n     * - isOpen: false = animate out (modal still rendered)\n     * - onExited called after animation → modal removed\n     *\n     * @example\n     * ```tsx\n     * {renderModal()}\n     * ```\n     */\n    renderModal: () => {\n      if (!schema || !provides || !uiState?.activeModal) return null;\n\n      const { modalId, isOpen } = uiState.activeModal;\n\n      const modalSchema = schema.modals?.[modalId];\n      if (!modalSchema) {\n        console.warn(`Modal \"${modalId}\" not found in schema`);\n        return null;\n      }\n\n      const handleClose = () => {\n        provides.forDocument(documentId).closeModal();\n      };\n\n      const handleExited = () => {\n        provides.forDocument(documentId).clearModal();\n      };\n\n      const ModalRenderer = renderers.modal;\n      if (!ModalRenderer) {\n        console.warn('No modal renderer registered');\n        return null;\n      }\n\n      return (\n        <ModalRenderer\n          key={modalId}\n          schema={modalSchema}\n          documentId={documentId}\n          isOpen={isOpen}\n          onClose={handleClose}\n          onExited={handleExited}\n        />\n      );\n    },\n\n    /**\n     * Helper: Get all active toolbars for this document\n     * Useful for batch rendering or debugging\n     */\n    getActiveToolbars: () => {\n      if (!uiState) return [];\n      return Object.entries(uiState.activeToolbars).map(([slotKey, toolbarSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          toolbarId: toolbarSlot.toolbarId,\n          isOpen: toolbarSlot.isOpen,\n        };\n      });\n    },\n\n    /**\n     * Helper: Get all active sidebars for this document\n     * Useful for batch rendering or debugging\n     */\n    getActiveSidebars: () => {\n      if (!uiState) return [];\n      return Object.entries(uiState.activeSidebars).map(([slotKey, sidebarSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          sidebarId: sidebarSlot.sidebarId,\n          isOpen: sidebarSlot.isOpen,\n        };\n      });\n    },\n\n    /**\n     * Render all enabled overlays\n     *\n     * Overlays are floating components positioned over the document content.\n     * Unlike modals, multiple overlays can be visible and they don't block interaction.\n     *\n     * @example\n     * ```tsx\n     * <div className=\"relative\">\n     *   {children}\n     *   {renderOverlays()}\n     * </div>\n     * ```\n     */\n    renderOverlays: () => {\n      if (!schema?.overlays || !provides) return null;\n\n      const OverlayRenderer = renderers.overlay;\n      if (!OverlayRenderer) {\n        return null;\n      }\n\n      const overlays = Object.values(schema.overlays);\n      if (overlays.length === 0) return null;\n\n      return (\n        <>\n          {overlays.map((overlaySchema) => (\n            <OverlayRenderer\n              key={overlaySchema.id}\n              schema={overlaySchema}\n              documentId={documentId}\n            />\n          ))}\n        </>\n      );\n    },\n  };\n}\n","import { useCallback } from '@framework';\nimport { SelectionMenuPropsBase, SelectionMenuRenderFn } from '@embedpdf/utils/@framework';\nimport { useUICapability } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * Creates a render function for a selection menu from the schema\n *\n * @param menuId - The selection menu ID from schema\n * @param documentId - Document ID\n * @returns A render function compatible with layer selectionMenu props\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n  menuId: string,\n  documentId: string,\n): SelectionMenuRenderFn<TContext> | undefined {\n  const { provides } = useUICapability();\n  const renderers = useRenderers();\n\n  const renderFn = useCallback(\n    (props: SelectionMenuPropsBase<TContext>) => {\n      const schema = provides?.getSchema();\n      const menuSchema = schema?.selectionMenus?.[menuId];\n\n      if (!menuSchema) {\n        return null;\n      }\n\n      if (!props.selected) {\n        return null;\n      }\n\n      const SelectionMenuRenderer = renderers.selectionMenu;\n\n      return <SelectionMenuRenderer schema={menuSchema} documentId={documentId} props={props} />;\n    },\n    [provides, renderers, menuId, documentId],\n  );\n\n  // Return undefined if schema doesn't have this menu\n  const schema = provides?.getSchema();\n  if (!schema?.selectionMenus?.[menuId]) {\n    return undefined;\n  }\n\n  return renderFn;\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","useUIPlugin","usePlugin","useUIState","documentId","provides","state","setState","useState","useEffect","scope","forDocument","getState","unsubToolbar","onToolbarChanged","unsubSidebar","onSidebarChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","UIContainerContext","createContext","AnchorRegistryContext","AnchorRegistryProvider","children","anchorsRef","useRef","Map","registry","register","useCallback","itemId","element","key","current","set","unregister","delete","getAnchor","get","Provider","value","useAnchorRegistry","context","useContext","Error","ComponentRegistryContext","ComponentRegistryProvider","initialComponents","componentsRef","Object","entries","component","has","getRegisteredIds","Array","from","keys","useComponentRegistry","RenderersContext","RenderersProvider","renderers","useRenderers","AutoMenuRenderer","container","uiState","anchorRegistry","activeMenu","setActiveMenu","openMenus","schema","getSchema","openMenuIds","length","menuId","menuState","triggeredByItemId","anchor","anchorEl","menuSchema","menus","console","warn","MenuRenderer","menu","jsx","onClose","closeMenu","UIRoot","style","restProps","plugin","disabledCategories","setDisabledCategories","hiddenItems","setHiddenItems","styleElRef","styleTargetRef","previousElementRef","containerRef","containerContextValue","useMemo","getContainer","rootRefCallback","previousElement","styleTarget","root","getRootNode","ShadowRoot","document","head","getStyleTarget","existingStyle","querySelector","UI_SELECTORS","STYLES","textContent","getStylesheet","stylesheet","styleEl","createElement","setAttribute","UI_ATTRIBUTES","insertBefore","firstChild","appendChild","_a","parentNode","remove","onStylesheetInvalidated","getDisabledCategories","getHiddenItems","onCategoryChanged","disabledCategoriesAttr","join","hiddenItemsAttr","combinedStyle","base","containerType","rootProps","ROOT","DISABLED_CATEGORIES","HIDDEN_ITEMS","ref","components","menuContainer","jsxs","componentRegistry","renderCustomComponent","componentId","props","Component","error","elementRef","documentIdRef","itemIdRef","renderToolbar","placement","slot","slotKey","toolbarSlot","activeToolbars","toolbarSchema","toolbars","toolbarId","handleClose","permanent","closeToolbarSlot","ToolbarRenderer","toolbar","isOpen","renderSidebar","sidebarSlot","activeSidebars","sidebarSchema","sidebars","sidebarId","SidebarRenderer","sidebar","closeSidebarSlot","renderModal","activeModal","modalId","modalSchema","modals","ModalRenderer","modal","closeModal","onExited","clearModal","getActiveToolbars","map","split","getActiveSidebars","renderOverlays","overlays","OverlayRenderer","overlay","values","Fragment","overlaySchema","renderFn","selectionMenus","selected","SelectionMenuRenderer","selectionMenu"],"mappings":"wOAKaA,EAAkB,IAAMC,gBAAwBC,EAAAA,SAASC,IACzDC,EAAc,IAAMC,YAAoBH,EAAAA,SAASC,IAKjDG,EAAcC,IACzB,MAAMC,SAAEA,GAAaR,KACdS,EAAOC,GAAYC,EAAAA,SAAiC,MAsB3D,OApBAC,EAAAA,UAAU,KACR,IAAKJ,EAAU,OAEf,MAAMK,EAAQL,EAASM,YAAYP,GACnCG,EAASG,EAAME,YAGf,MAAMC,EAAeH,EAAMI,iBAAiB,IAAMP,EAASG,EAAME,aAC3DG,EAAeL,EAAMM,iBAAiB,IAAMT,EAASG,EAAME,aAC3DK,EAAaP,EAAMQ,eAAe,IAAMX,EAASG,EAAME,aACvDO,EAAYT,EAAMU,cAAc,IAAMb,EAASG,EAAME,aAE3D,MAAO,KACLC,IACAE,IACAE,IACAE,MAED,CAACd,EAAUD,IAEPE,GC1BIe,EAAqBC,EAAAA,cAA8C,MCMhF,MAAMC,EAAwBD,EAAAA,cAAqC,MAE5D,SAASE,GAAuBC,SAAEA,IACvC,MAAMC,EAAaC,EAAAA,OAAiC,IAAIC,KAElDC,EAA2B,CAC/BC,SAAUC,EAAAA,YAAY,CAAC3B,EAAoB4B,EAAgBC,KACzD,MAAMC,EAAM,GAAG9B,KAAc4B,IAC7BN,EAAWS,QAAQC,IAAIF,EAAKD,IAC3B,IAEHI,WAAYN,EAAAA,YAAY,CAAC3B,EAAoB4B,KAC3C,MAAME,EAAM,GAAG9B,KAAc4B,IAC7BN,EAAWS,QAAQG,OAAOJ,IACzB,IAEHK,UAAWR,EAAAA,YAAY,CAAC3B,EAAoB4B,KAC1C,MAAME,EAAM,GAAG9B,KAAc4B,IAC7B,OAAON,EAAWS,QAAQK,IAAIN,IAAQ,MACrC,KAGL,aACGX,EAAsBkB,SAAtB,CAA+BC,MAAOb,EAAWJ,YAEtD,CAEO,SAASkB,IACd,MAAMC,EAAUC,EAAAA,WAAWtB,GAC3B,IAAKqB,EACH,MAAM,IAAIE,MAAM,oDAElB,OAAOF,CACT,CC/BA,MAAMG,EAA2BzB,EAAAA,cAAwC,MAOlE,SAAS0B,GAA0BvB,SACxCA,EAAAwB,kBACAA,EAAoB,CAAA,IAEpB,MAAMC,EAAgBvB,EAAAA,OACpB,IAAIC,IAAIuB,OAAOC,QAAQH,KAGnBpB,EAA8B,CAClCC,SAAUC,EAAAA,YAAY,CAAC/B,EAAYqD,KACjCH,EAAcf,QAAQC,IAAIpC,EAAIqD,IAC7B,IAEHhB,WAAYN,EAAAA,YAAa/B,IACvBkD,EAAcf,QAAQG,OAAOtC,IAC5B,IAEHwC,IAAKT,EAAAA,YAAa/B,GACTkD,EAAcf,QAAQK,IAAIxC,GAChC,IAEHsD,IAAKvB,EAAAA,YAAa/B,GACTkD,EAAcf,QAAQmB,IAAItD,GAChC,IAEHuD,iBAAkBxB,EAAAA,YAAY,IACrByB,MAAMC,KAAKP,EAAcf,QAAQuB,QACvC,KAGL,aACGX,EAAyBN,SAAzB,CAAkCC,MAAOb,EACvCJ,YAGP,CAEO,SAASkC,IACd,MAAMf,EAAUC,EAAAA,WAAWE,GAC3B,IAAKH,EACH,MAAM,IAAIE,MAAM,uDAElB,OAAOF,CACT,CC1DA,MAAMgB,EAAmBtC,EAAAA,cAAkC,MAOpD,SAASuC,GAAkBpC,SAAEA,EAAAqC,UAAUA,IAC5C,aAAQF,EAAiBnB,SAAjB,CAA0BC,MAAOoB,EAAYrC,YACvD,CAEO,SAASsC,IACd,MAAMnB,EAAUC,EAAAA,WAAWe,GAC3B,IAAKhB,EACH,MAAM,IAAIE,MAAM,+CAElB,OAAOF,CACT,CCRO,SAASoB,GAAiBC,UAAEA,EAAA7D,WAAWA,IAC5C,MAAM8D,EAAU/D,EAAWC,IACrBC,SAAEA,GAAaR,IACfsE,EAAiBxB,IACjBmB,EAAYC,KAEXK,EAAYC,GAAiB7D,EAAAA,SAG1B,MAEJ8D,GAAY,MAAAJ,OAAA,EAAAA,EAASI,YAAa,CAAA,EAClCC,EAAS,MAAAlE,OAAA,EAAAA,EAAUmE,YAGzB/D,EAAAA,UAAU,KACR,MAAMgE,EAActB,OAAOO,KAAKY,GAEhC,GAAIG,EAAYC,OAAS,EAAG,CAE1B,MAAMC,EAASF,EAAY,GAC3B,IAAKE,EAEH,YADAN,EAAc,MAIhB,MAAMO,EAAYN,EAAUK,GAC5B,GAAIC,GAAaA,EAAUC,kBAAmB,CAE5C,MAAMC,EAASX,EAAe5B,UAAUnC,EAAYwE,EAAUC,mBAC9DR,EAAc,CAAEM,SAAQI,SAAUD,GACpC,MACET,EAAc,KAElB,MACEA,EAAc,OAEf,CAACC,EAAWH,EAAgB/D,IAQ/B,IAAKgE,IAAeG,EAClB,OAAO,KAGT,MAAMS,EAAaT,EAAOU,MAAMb,EAAWO,QAC3C,IAAKK,EAEH,OADAE,QAAQC,KAAK,SAASf,EAAWO,+BAC1B,KAIT,MAAMS,EAAetB,EAAUuB,KAE/B,OACEC,EAAAA,IAACF,EAAA,CACCb,OAAQS,EACR5E,aACA2E,SAAUX,EAAWW,SACrBQ,QAxBgB,KACdnB,IACF,MAAA/D,GAAAA,EAAUM,YAAYP,GAAYoF,UAAUpB,EAAWO,UAuBvDV,aAGN,CClDO,SAASwB,GAAOhE,SAAEA,EAAAiE,MAAUA,KAAUC,IAC3C,MAAMC,OAAEA,GAAW3F,KACbI,SAAEA,GAAaR,KACdgG,EAAoBC,GAAyBtF,EAAAA,SAAmB,KAChEuF,EAAaC,GAAkBxF,EAAAA,SAAmB,IACnDyF,EAAatE,EAAAA,OAAgC,MAC7CuE,EAAiBvE,EAAAA,OAAwC,MACzDwE,EAAqBxE,EAAAA,OAA8B,MACnDyE,EAAezE,EAAAA,OAAuB,MAGtC0E,EAAwBC,EAAAA,QAC5B,KAAA,CACEF,eACAG,aAAc,IAAMH,EAAajE,UAEnC,IAKIqE,EAAkBzE,EAAAA,YACrBE,IACC,MAAMwE,EAAkBN,EAAmBhE,QAQ3C,GALAgE,EAAmBhE,QAAUF,EAC5BmE,EAAqBjE,QAAUF,EAI3BA,GAKDA,IAAYwE,GAAmBb,EAAQ,CACzC,MAAMc,EAvDd,SAAwBzE,GACtB,MAAM0E,EAAO1E,EAAQ2E,cACrB,OAAID,aAAgBE,WACXF,EAEFG,SAASC,IAClB,CAiD4BC,CAAe/E,GACnCiE,EAAe/D,QAAUuE,EAGzB,MAAMO,EAAgBP,EAAYQ,cAChCC,eAAaC,QAGf,GAAIH,EAIF,OAHAhB,EAAW9D,QAAU8E,OAErBA,EAAcI,YAAczB,EAAO0B,iBAKrC,MAAMC,EAAa3B,EAAO0B,gBACpBE,EAAUV,SAASW,cAAc,SACvCD,EAAQE,aAAaC,gBAAcP,OAAQ,IAC3CI,EAAQH,YAAcE,EAElBb,aAAuBG,WAEzBH,EAAYkB,aAAaJ,EAASd,EAAYmB,YAE9CnB,EAAYoB,YAAYN,GAG1BvB,EAAW9D,QAAUqF,CACvB,GAEF,CAAC5B,IAIHnF,EAAAA,UAAU,IACD,YAGD,OAAAsH,IAAW5F,cAAX,EAAA4F,EAAoBC,cAAe7B,EAAmBhE,SACxD8D,EAAW9D,QAAQ8F,SAErBhC,EAAW9D,QAAU,KACrB+D,EAAe/D,QAAU,MAE1B,IAGH1B,EAAAA,UAAU,KACR,GAAKmF,EAEL,OAAOA,EAAOsC,wBAAwB,KAEhCjC,EAAW9D,UACb8D,EAAW9D,QAAQkF,YAAczB,EAAO0B,oBAG3C,CAAC1B,IAGJnF,EAAAA,UAAU,KACR,GAAKJ,EAKL,OAHAyF,EAAsBzF,EAAS8H,yBAC/BnC,EAAe3F,EAAS+H,kBAEjB/H,EAASgI,kBAAkB,EAAGxC,mBAAAA,EAAoBE,YAAAA,MACvDD,EAAsBD,GACtBG,EAAeD,MAEhB,CAAC1F,IAGJ,MAAMiI,EAAyBhC,EAAAA,QAC7B,IAAOT,EAAmBnB,OAAS,EAAImB,EAAmB0C,KAAK,UAAO,EACtE,CAAC1C,IAIG2C,EAAkBlC,EAAAA,QACtB,IAAOP,EAAYrB,OAAS,EAAIqB,EAAYwC,KAAK,UAAO,EACxD,CAACxC,IAGG0C,EAAgBnC,EAAAA,QAAQ,KAC5B,MAAMoC,EAAO,CAAEC,cAAe,eAC9B,OAAIjD,GAA0B,iBAAVA,EACX,IAAKgD,KAAShD,GAEhBgD,GACN,CAAChD,IAEEkD,EAAY,CAChB,CAACjB,EAAAA,cAAckB,MAAO,GACtB,CAAClB,EAAAA,cAAcmB,qBAAsBR,EACrC,CAACX,EAAAA,cAAcoB,cAAeP,GAGhC,aACGnH,EAAmBoB,SAAnB,CAA4BC,MAAO2D,EAClC5E,SAAA6D,EAAAA,IAAC,MAAA,CAAI0D,IAAKxC,KAAqBoC,KAAejD,EAAWD,MAAO+C,EAC7DhH,cAIT,kJCnGO,UAAoBA,SACzBA,EAAArB,WACAA,EAAA6I,WACAA,EAAa,CAAA,EAAAnF,UACbA,EAAAoF,cACAA,KACGvD,IAEH,OACEL,EAAAA,IAAC9D,EAAA,CACCC,WAAA6D,IAACtC,EAAA,CAA0BC,kBAAmBgG,EAC5CxH,WAAA6D,IAACzB,EAAA,CAAkBC,YACjBrC,SAAA0H,EAAAA,KAAC1D,EAAA,IAAWE,EACTlE,SAAA,CAAAA,IAED6D,IAACtB,EAAA,CAAiB5D,aAAwB6D,UAAWiF,YAMjE,qFC9FO,WACL,MAAME,EAAoBzF,IAE1B,MAAO,CASL0F,sBAAuB,CAACC,EAAqBlJ,EAAoBmJ,KAC/D,MAAMC,EAAYJ,EAAkB5G,IAAI8G,GAExC,OAAKE,QAKGA,EAAA,CAAUpJ,gBAA6BmJ,GAAS,CAAA,KAJtDrE,QAAQuE,MAAM,cAAcH,4BACrB,OAMf,4BCTO,SACLlJ,EACA4B,GAEA,MAAMH,EAAWc,IACX+G,EAAa/H,EAAAA,OAA2B,MACxCgI,EAAgBhI,EAAAA,OAAOvB,GACvBwJ,EAAYjI,EAAAA,OAAOK,GAOzB,OAJA2H,EAAcxH,QAAU/B,EACxBwJ,EAAUzH,QAAUH,EAGbD,EAAAA,YACJE,IAEC,MAAMwE,EAAkBiD,EAAWvH,QAGnCuH,EAAWvH,QAAUF,EAGjBA,EAEEA,IAAYwE,GACd5E,EAASC,SAAS6H,EAAcxH,QAASyH,EAAUzH,QAASF,GAErDwE,GAET5E,EAASQ,WAAWsH,EAAcxH,QAASyH,EAAUzH,UAGzD,CAACN,GAEL,mDC3CO,SAA2BzB,GAChC,MAAM0D,EAAYC,KACZ1D,SAAEA,GAAaR,IACf0E,EAAS,MAAAlE,OAAA,EAAAA,EAAUmE,YACnBN,EAAU/D,EAAWC,GAE3B,MAAO,CAeLyJ,cAAe,CAACC,EAAgDC,KAC9D,IAAKxF,IAAWlE,IAAa6D,EAAS,OAAO,KAE7C,MAAM8F,EAAU,GAAGF,KAAaC,IAC1BE,EAAc/F,EAAQgG,eAAeF,GAG3C,IAAKC,EAAa,OAAO,KAEzB,MAAME,EAAgB5F,EAAO6F,SAASH,EAAYI,WAClD,IAAKF,EAEH,OADAjF,QAAQC,KAAK,YAAY8E,EAAYI,kCAC9B,KAIT,MAEMC,GAFcH,EAAcI,UAG9B,KACElK,EAASM,YAAYP,GAAYoK,iBAAiBV,EAAWC,SAE/D,EAEEU,EAAkB3G,EAAU4G,QAGlC,OACEpF,EAAAA,IAACmF,EAAA,CAEClG,OAAQ4F,EACR/J,aACAuK,OAAQV,EAAYU,OACpBpF,QAAS+E,GAJJL,EAAYI,YAwBvBO,cAAe,CAACd,EAAgDC,WAC9D,IAAKxF,IAAWlE,IAAa6D,EAAS,OAAO,KAC7C,MAAM8F,EAAU,GAAGF,KAAaC,IAC1Bc,EAAc3G,EAAQ4G,eAAed,GAG3C,IAAKa,EAAa,OAAO,KAEzB,MAAME,EAAgB,OAAAhD,EAAAxD,EAAOyG,eAAP,EAAAjD,EAAkB8C,EAAYI,WACpD,IAAKF,EAEH,OADA7F,QAAQC,KAAK,YAAY0F,EAAYI,kCAC9B,KAGT,MAIMC,EAAkBpH,EAAUqH,QAIlC,OACE7F,EAAAA,IAAC4F,EAAA,CAEC3G,OAAQwG,EACR3K,aACAuK,OAAQE,EAAYF,OACpBpF,QAdgB,KAClBlF,EAASM,YAAYP,GAAYgL,iBAAiBtB,EAAWC,KAStDc,EAAYI,YAyBvBI,YAAa,WACX,IAAK9G,IAAWlE,KAAa,MAAA6D,OAAA,EAAAA,EAASoH,aAAa,OAAO,KAE1D,MAAMC,QAAEA,EAAAZ,OAASA,GAAWzG,EAAQoH,YAE9BE,EAAc,OAAAzD,EAAAxD,EAAOkH,aAAP,EAAA1D,EAAgBwD,GACpC,IAAKC,EAEH,OADAtG,QAAQC,KAAK,UAAUoG,0BAChB,KAGT,MAQMG,EAAgB5H,EAAU6H,MAChC,OAAKD,EAMHpG,EAAAA,IAACoG,EAAA,CAECnH,OAAQiH,EACRpL,aACAuK,SACApF,QApBgB,KAClBlF,EAASM,YAAYP,GAAYwL,cAoB/BC,SAjBiB,KACnBxL,EAASM,YAAYP,GAAY0L,eAW1BP,IANPrG,QAAQC,KAAK,gCACN,OAmBX4G,kBAAmB,IACZ7H,EACEf,OAAOC,QAAQc,EAAQgG,gBAAgB8B,IAAI,EAAEhC,EAASC,MAC3D,MAAOH,EAAWC,GAAQC,EAAQiC,MAAM,KACxC,MAAO,CACLnC,YACAC,OACAM,UAAWJ,EAAYI,UACvBM,OAAQV,EAAYU,UAPH,GAgBvBuB,kBAAmB,IACZhI,EACEf,OAAOC,QAAQc,EAAQ4G,gBAAgBkB,IAAI,EAAEhC,EAASa,MAC3D,MAAOf,EAAWC,GAAQC,EAAQiC,MAAM,KACxC,MAAO,CACLnC,YACAC,OACAkB,UAAWJ,EAAYI,UACvBN,OAAQE,EAAYF,UAPH,GA0BvBwB,eAAgB,KACd,KAAK,MAAA5H,OAAA,EAAAA,EAAQ6H,YAAa/L,EAAU,OAAO,KAE3C,MAAMgM,EAAkBvI,EAAUwI,QAClC,IAAKD,EACH,OAAO,KAGT,MAAMD,EAAWjJ,OAAOoJ,OAAOhI,EAAO6H,UACtC,OAAwB,IAApBA,EAAS1H,OAAqB,KAGhCY,EAAAA,IAAAkH,EAAAA,SAAA,CACG/K,SAAA2K,EAASJ,IAAKS,GACbnH,EAAAA,IAAC+G,EAAA,CAEC9H,OAAQkI,EACRrM,cAFKqM,EAAczM,QASjC,2BCvOO,SACL2E,EACAvE,SAEA,MAAMC,SAAEA,GAAaR,IACfiE,EAAYC,IAEZ2I,EAAW3K,EAAAA,YACdwH,UACC,MAAMhF,EAAS,MAAAlE,OAAA,EAAAA,EAAUmE,YACnBQ,EAAaT,OAAAA,EAAAA,MAAAA,OAAAA,EAAAA,EAAQoI,uBAARpI,EAAyBI,GAE5C,IAAKK,EACH,OAAO,KAGT,IAAKuE,EAAMqD,SACT,OAAO,KAGT,MAAMC,EAAwB/I,EAAUgJ,cAExC,OAAOxH,EAAAA,IAACuH,EAAA,CAAsBtI,OAAQS,EAAY5E,aAAwBmJ,WAE5E,CAAClJ,EAAUyD,EAAWa,EAAQvE,IAI1BmE,EAAS,MAAAlE,OAAA,EAAAA,EAAUmE,YACzB,GAAK,OAAAuD,EAAA,MAAAxD,OAAA,EAAAA,EAAQoI,qBAAR,EAAA5E,EAAyBpD,GAI9B,OAAO+H,CACT,mDVLO,WACL,MAAM9J,EAAUC,EAAAA,WAAWxB,GAC3B,IAAKuB,EACH,MAAM,IAAIE,MAAM,mDAElB,OAAOF,CACT,4CDN2B,KACzB,MAAMvC,SAAEA,GAAaR,IACrB,aAAOQ,WAAUmE,cAAe"}

package/dist/preact/index.js

@@ -2,8 +2,8 @@ import { useCapability, usePlugin } from "@embedpdf/core/preact";
 import { UIPlugin, UI_SELECTORS, UI_ATTRIBUTES } from "@embedpdf/plugin-ui";
 export * from "@embedpdf/plugin-ui";
 import { createContext } from "preact";
-import { useState, useEffect, useRef, useCallback, useContext, useMemo } from "preact/hooks";
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { useState, useEffect, useContext, useRef, useCallback, useMemo } from "preact/hooks";
+import { jsx, Fragment, jsxs } from "preact/jsx-runtime";
 const useUICapability = () => useCapability(UIPlugin.id);
 const useUIPlugin = () => usePlugin(UIPlugin.id);
 const useUIState = (documentId) => {
@@ -14,12 +14,12 @@ const useUIState = (documentId) => {
     const scope = provides.forDocument(documentId);
     setState(scope.getState());
     const unsubToolbar = scope.onToolbarChanged(() => setState(scope.getState()));
-    const unsubPanel = scope.onPanelChanged(() => setState(scope.getState()));
+    const unsubSidebar = scope.onSidebarChanged(() => setState(scope.getState()));
     const unsubModal = scope.onModalChanged(() => setState(scope.getState()));
     const unsubMenu = scope.onMenuChanged(() => setState(scope.getState()));
     return () => {
       unsubToolbar();
-      unsubPanel();
+      unsubSidebar();
       unsubModal();
       unsubMenu();
     };
@@ -30,6 +30,14 @@ const useUISchema = () => {
   const { provides } = useUICapability();
   return (provides == null ? void 0 : provides.getSchema()) ?? null;
 };
+const UIContainerContext = createContext(null);
+function useUIContainer() {
+  const context = useContext(UIContainerContext);
+  if (!context) {
+    throw new Error("useUIContainer must be used within a UIProvider");
+  }
+  return context;
+}
 const AnchorRegistryContext = createContext(null);
 function AnchorRegistryProvider({ children }) {
   const anchorsRef = useRef(/* @__PURE__ */ new Map());
@@ -192,9 +200,9 @@ function useSchemaRenderer(documentId) {
       );
     },
     /**
-     * Render a panel by placement and slot
+     * Render a sidebar by placement and slot
      *
-     * ALWAYS renders (when panel exists in slot) with isOpen state.
+     * ALWAYS renders (when sidebar exists in slot) with isOpen state.
      * Your renderer controls whether to display or animate.
      *
      * @param placement - 'left' | 'right' | 'top' | 'bottom'
@@ -202,33 +210,82 @@ function useSchemaRenderer(documentId) {
      *
      * @example
      * ```tsx
-     * {renderPanel('left', 'main')}
-     * {renderPanel('right', 'main')}
+     * {renderSidebar('left', 'main')}
+     * {renderSidebar('right', 'main')}
      * ```
      */
-    renderPanel: (placement, slot) => {
+    renderSidebar: (placement, slot) => {
+      var _a;
       if (!schema || !provides || !uiState) return null;
       const slotKey = `${placement}-${slot}`;
-      const panelSlot = uiState.activePanels[slotKey];
-      if (!panelSlot) return null;
-      const panelSchema = schema.panels[panelSlot.panelId];
-      if (!panelSchema) {
-        console.warn(`Panel "${panelSlot.panelId}" not found in schema`);
+      const sidebarSlot = uiState.activeSidebars[slotKey];
+      if (!sidebarSlot) return null;
+      const sidebarSchema = (_a = schema.sidebars) == null ? void 0 : _a[sidebarSlot.sidebarId];
+      if (!sidebarSchema) {
+        console.warn(`Sidebar "${sidebarSlot.sidebarId}" not found in schema`);
         return null;
       }
       const handleClose = () => {
-        provides.forDocument(documentId).closePanelSlot(placement, slot);
+        provides.forDocument(documentId).closeSidebarSlot(placement, slot);
       };
-      const PanelRenderer = renderers.panel;
+      const SidebarRenderer = renderers.sidebar;
       return /* @__PURE__ */ jsx(
-        PanelRenderer,
+        SidebarRenderer,
         {
-          schema: panelSchema,
+          schema: sidebarSchema,
           documentId,
-          isOpen: panelSlot.isOpen,
+          isOpen: sidebarSlot.isOpen,
           onClose: handleClose
         },
-        panelSlot.panelId
+        sidebarSlot.sidebarId
+      );
+    },
+    /**
+     * Render the active modal (if any)
+     *
+     * Only one modal can be active at a time.
+     * Modals are defined in schema.modals.
+     *
+     * Supports animation lifecycle:
+     * - isOpen: true = visible
+     * - isOpen: false = animate out (modal still rendered)
+     * - onExited called after animation → modal removed
+     *
+     * @example
+     * ```tsx
+     * {renderModal()}
+     * ```
+     */
+    renderModal: () => {
+      var _a;
+      if (!schema || !provides || !(uiState == null ? void 0 : uiState.activeModal)) return null;
+      const { modalId, isOpen } = uiState.activeModal;
+      const modalSchema = (_a = schema.modals) == null ? void 0 : _a[modalId];
+      if (!modalSchema) {
+        console.warn(`Modal "${modalId}" not found in schema`);
+        return null;
+      }
+      const handleClose = () => {
+        provides.forDocument(documentId).closeModal();
+      };
+      const handleExited = () => {
+        provides.forDocument(documentId).clearModal();
+      };
+      const ModalRenderer = renderers.modal;
+      if (!ModalRenderer) {
+        console.warn("No modal renderer registered");
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ModalRenderer,
+        {
+          schema: modalSchema,
+          documentId,
+          isOpen,
+          onClose: handleClose,
+          onExited: handleExited
+        },
+        modalId
       );
     },
     /**
@@ -248,20 +305,51 @@ function useSchemaRenderer(documentId) {
       });
     },
     /**
-     * Helper: Get all active panels for this document
+     * Helper: Get all active sidebars for this document
      * Useful for batch rendering or debugging
      */
-    getActivePanels: () => {
+    getActiveSidebars: () => {
       if (!uiState) return [];
-      return Object.entries(uiState.activePanels).map(([slotKey, panelSlot]) => {
+      return Object.entries(uiState.activeSidebars).map(([slotKey, sidebarSlot]) => {
         const [placement, slot] = slotKey.split("-");
         return {
           placement,
           slot,
-          panelId: panelSlot.panelId,
-          isOpen: panelSlot.isOpen
+          sidebarId: sidebarSlot.sidebarId,
+          isOpen: sidebarSlot.isOpen
         };
       });
+    },
+    /**
+     * Render all enabled overlays
+     *
+     * Overlays are floating components positioned over the document content.
+     * Unlike modals, multiple overlays can be visible and they don't block interaction.
+     *
+     * @example
+     * ```tsx
+     * <div className="relative">
+     *   {children}
+     *   {renderOverlays()}
+     * </div>
+     * ```
+     */
+    renderOverlays: () => {
+      if (!(schema == null ? void 0 : schema.overlays) || !provides) return null;
+      const OverlayRenderer = renderers.overlay;
+      if (!OverlayRenderer) {
+        return null;
+      }
+      const overlays = Object.values(schema.overlays);
+      if (overlays.length === 0) return null;
+      return /* @__PURE__ */ jsx(Fragment, { children: overlays.map((overlaySchema) => /* @__PURE__ */ jsx(
+        OverlayRenderer,
+        {
+          schema: overlaySchema,
+          documentId
+        },
+        overlaySchema.id
+      )) });
     }
   };
 }
@@ -350,17 +438,27 @@ function getStyleTarget(element) {
   }
   return document.head;
 }
-function UIRoot({ children, ...restProps }) {
+function UIRoot({ children, style, ...restProps }) {
   const { plugin } = useUIPlugin();
   const { provides } = useUICapability();
   const [disabledCategories, setDisabledCategories] = useState([]);
+  const [hiddenItems, setHiddenItems] = useState([]);
   const styleElRef = useRef(null);
   const styleTargetRef = useRef(null);
   const previousElementRef = useRef(null);
+  const containerRef = useRef(null);
+  const containerContextValue = useMemo(
+    () => ({
+      containerRef,
+      getContainer: () => containerRef.current
+    }),
+    []
+  );
   const rootRefCallback = useCallback(
     (element) => {
       const previousElement = previousElementRef.current;
       previousElementRef.current = element;
+      containerRef.current = element;
       if (!element) {
         return;
       }
@@ -410,28 +508,33 @@ function UIRoot({ children, ...restProps }) {
   useEffect(() => {
     if (!provides) return;
     setDisabledCategories(provides.getDisabledCategories());
-    return provides.onCategoryChanged(({ disabledCategories: disabledCategories2 }) => {
+    setHiddenItems(provides.getHiddenItems());
+    return provides.onCategoryChanged(({ disabledCategories: disabledCategories2, hiddenItems: hiddenItems2 }) => {
       setDisabledCategories(disabledCategories2);
+      setHiddenItems(hiddenItems2);
     });
   }, [provides]);
   const disabledCategoriesAttr = useMemo(
     () => disabledCategories.length > 0 ? disabledCategories.join(" ") : void 0,
     [disabledCategories]
   );
+  const hiddenItemsAttr = useMemo(
+    () => hiddenItems.length > 0 ? hiddenItems.join(" ") : void 0,
+    [hiddenItems]
+  );
+  const combinedStyle = useMemo(() => {
+    const base = { containerType: "inline-size" };
+    if (style && typeof style === "object") {
+      return { ...base, ...style };
+    }
+    return base;
+  }, [style]);
   const rootProps = {
     [UI_ATTRIBUTES.ROOT]: "",
-    [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr
+    [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr,
+    [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr
   };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: rootRefCallback,
-      ...rootProps,
-      ...restProps,
-      style: { containerType: "inline-size", ...restProps.style },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(UIContainerContext.Provider, { value: containerContextValue, children: /* @__PURE__ */ jsx("div", { ref: rootRefCallback, ...rootProps, ...restProps, style: combinedStyle, children }) });
 }
 function UIProvider({
   children,
@@ -450,6 +553,7 @@ export {
   AnchorRegistryProvider,
   ComponentRegistryProvider,
   RenderersProvider,
+  UIContainerContext,
   UIProvider,
   useAnchorRegistry,
   useComponentRegistry,
@@ -459,6 +563,7 @@ export {
   useSchemaRenderer,
   useSelectionMenu,
   useUICapability,
+  useUIContainer,
   useUIPlugin,
   useUISchema,
   useUIState