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

package/dist/react/index.js

@@ -1,8 +1,8 @@
 import { useCapability, usePlugin } from "@embedpdf/core/react";
 import { UIPlugin, UI_SELECTORS, UI_ATTRIBUTES } from "@embedpdf/plugin-ui";
 export * from "@embedpdf/plugin-ui";
-import { useState, useEffect, createContext, useRef, useCallback, useContext, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, createContext, useContext, useRef, useCallback, useMemo } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 const useUICapability = () => useCapability(UIPlugin.id);
 const useUIPlugin = () => usePlugin(UIPlugin.id);
 const useUIState = (documentId) => {
@@ -13,12 +13,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();
     };
@@ -29,6 +29,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());
@@ -191,9 +199,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'
@@ -201,33 +209,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
       );
     },
     /**
@@ -247,20 +304,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
+      )) });
     }
   };
 }
@@ -349,17 +437,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;
       }
@@ -409,28 +507,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,
@@ -449,6 +552,7 @@ export {
   AnchorRegistryProvider,
   ComponentRegistryProvider,
   RenderersProvider,
+  UIContainerContext,
   UIProvider,
   useAnchorRegistry,
   useComponentRegistry,
@@ -458,6 +562,7 @@ export {
   useSchemaRenderer,
   useSelectionMenu,
   useUICapability,
+  useUIContainer,
   useUIPlugin,
   useUISchema,
   useUIState

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/registries/component-registry.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.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 { 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 { 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 { 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 { 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 { 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","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"],"names":["schema","disabledCategories"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-ui-container.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/registries/component-registry.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.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 { 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 { 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 { 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 { 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 { 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","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"],"names":["schema","disabledCategories","hiddenItems"],"mappings":";;;;;AAKO,MAAM,kBAAkB,MAAM,cAAwB,SAAS,EAAE;AACjE,MAAM,cAAc,MAAM,UAAoB,SAAS,EAAE;AAKzD,MAAM,aAAa,CAAC,eAAuB;AAChD,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC,IAAI;AAE/D,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AAEf,UAAM,QAAQ,SAAS,YAAY,UAAU;AAC7C,aAAS,MAAM,UAAU;AAGzB,UAAM,eAAe,MAAM,iBAAiB,MAAM,SAAS,MAAM,SAAA,CAAU,CAAC;AAC5E,UAAM,eAAe,MAAM,iBAAiB,MAAM,SAAS,MAAM,SAAA,CAAU,CAAC;AAC5E,UAAM,aAAa,MAAM,eAAe,MAAM,SAAS,MAAM,SAAA,CAAU,CAAC;AACxE,UAAM,YAAY,MAAM,cAAc,MAAM,SAAS,MAAM,SAAA,CAAU,CAAC;AAEtE,WAAO,MAAM;AACX,mBAAA;AACA,mBAAA;AACA,iBAAA;AACA,gBAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,SAAO;AACT;AAKO,MAAM,cAAc,MAAuB;AAChD,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,UAAO,qCAAU,gBAAe;AAClC;ACnCO,MAAM,qBAAqB,cAA8C,IAAI;AAgC7E,SAAS,iBAA0C;AACxD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AChCA,MAAM,wBAAwB,cAAqC,IAAI;AAEhE,SAAS,uBAAuB,EAAE,YAAqC;AAC5E,QAAM,aAAa,OAAiC,oBAAI,KAAK;AAE7D,QAAM,WAA2B;AAAA,IAC/B,UAAU,YAAY,CAAC,YAAoB,QAAgB,YAAyB;AAClF,YAAM,MAAM,GAAG,UAAU,IAAI,MAAM;AACnC,iBAAW,QAAQ,IAAI,KAAK,OAAO;AAAA,IACrC,GAAG,CAAA,CAAE;AAAA,IAEL,YAAY,YAAY,CAAC,YAAoB,WAAmB;AAC9D,YAAM,MAAM,GAAG,UAAU,IAAI,MAAM;AACnC,iBAAW,QAAQ,OAAO,GAAG;AAAA,IAC/B,GAAG,CAAA,CAAE;AAAA,IAEL,WAAW,YAAY,CAAC,YAAoB,WAAmB;AAC7D,YAAM,MAAM,GAAG,UAAU,IAAI,MAAM;AACnC,aAAO,WAAW,QAAQ,IAAI,GAAG,KAAK;AAAA,IACxC,GAAG,CAAA,CAAE;AAAA,EAAA;AAGP,6BACG,sBAAsB,UAAtB,EAA+B,OAAO,UAAW,UAAS;AAE/D;AAEO,SAAS,oBAAoC;AAClD,QAAM,UAAU,WAAW,qBAAqB;AAChD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;AC7BO,SAAS,kBACd,YACA,QACuC;AACvC,QAAM,WAAW,kBAAA;AACjB,QAAM,aAAa,OAA2B,IAAI;AAClD,QAAM,gBAAgB,OAAO,UAAU;AACvC,QAAM,YAAY,OAAO,MAAM;AAG/B,gBAAc,UAAU;AACxB,YAAU,UAAU;AAGpB,SAAO;AAAA,IACL,CAAC,YAAgC;AAE/B,YAAM,kBAAkB,WAAW;AAGnC,iBAAW,UAAU;AAGrB,UAAI,SAAS;AAEX,YAAI,YAAY,iBAAiB;AAC/B,mBAAS,SAAS,cAAc,SAAS,UAAU,SAAS,OAAO;AAAA,QACrE;AAAA,MACF,WAAW,iBAAiB;AAE1B,iBAAS,WAAW,cAAc,SAAS,UAAU,OAAO;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA;AAAA,EAAA;AAEb;ACrCA,MAAM,2BAA2B,cAAwC,IAAI;AAOtE,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA,oBAAoB,CAAA;AACtB,GAAmC;AACjC,QAAM,gBAAgB;AAAA,IACpB,IAAI,IAAI,OAAO,QAAQ,iBAAiB,CAAC;AAAA,EAAA;AAG3C,QAAM,WAA8B;AAAA,IAClC,UAAU,YAAY,CAAC,IAAY,cAAiD;AAClF,oBAAc,QAAQ,IAAI,IAAI,SAAS;AAAA,IACzC,GAAG,CAAA,CAAE;AAAA,IAEL,YAAY,YAAY,CAAC,OAAe;AACtC,oBAAc,QAAQ,OAAO,EAAE;AAAA,IACjC,GAAG,CAAA,CAAE;AAAA,IAEL,KAAK,YAAY,CAAC,OAAe;AAC/B,aAAO,cAAc,QAAQ,IAAI,EAAE;AAAA,IACrC,GAAG,CAAA,CAAE;AAAA,IAEL,KAAK,YAAY,CAAC,OAAe;AAC/B,aAAO,cAAc,QAAQ,IAAI,EAAE;AAAA,IACrC,GAAG,CAAA,CAAE;AAAA,IAEL,kBAAkB,YAAY,MAAM;AAClC,aAAO,MAAM,KAAK,cAAc,QAAQ,MAAM;AAAA,IAChD,GAAG,CAAA,CAAE;AAAA,EAAA;AAGP,6BACG,yBAAyB,UAAzB,EAAkC,OAAO,UACvC,UACH;AAEJ;AAEO,SAAS,uBAA0C;AACxD,QAAM,UAAU,WAAW,wBAAwB;AACnD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;AC9DO,SAAS,kBAAkB;AAChC,QAAM,oBAAoB,qBAAA;AAE1B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,uBAAuB,CAAC,aAAqB,YAAoB,UAAgB;AAC/E,YAAM,YAAY,kBAAkB,IAAI,WAAW;AAEnD,UAAI,CAAC,WAAW;AACd,gBAAQ,MAAM,cAAc,WAAW,yBAAyB;AAChE,eAAO;AAAA,MACT;AAEA,iCAAQ,WAAA,EAAU,YAAyB,GAAI,SAAS,CAAA,GAAK;AAAA,IAC/D;AAAA,EAAA;AAEJ;ACnBA,MAAM,mBAAmB,cAAkC,IAAI;AAOxD,SAAS,kBAAkB,EAAE,UAAU,aAAqC;AACjF,6BAAQ,iBAAiB,UAAjB,EAA0B,OAAO,WAAY,UAAS;AAChE;AAEO,SAAS,eAA4B;AAC1C,QAAM,UAAU,WAAW,gBAAgB;AAC3C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,6CAA6C;AAAA,EAC/D;AACA,SAAO;AACT;ACfO,SAAS,kBAAkB,YAAoB;AACpD,QAAM,YAAY,aAAA;AAClB,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,SAAS,qCAAU;AACzB,QAAM,UAAU,WAAW,UAAU;AAErC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeL,eAAe,CAAC,WAAgD,SAAiB;AAC/E,UAAI,CAAC,UAAU,CAAC,YAAY,CAAC,QAAS,QAAO;AAE7C,YAAM,UAAU,GAAG,SAAS,IAAI,IAAI;AACpC,YAAM,cAAc,QAAQ,eAAe,OAAO;AAGlD,UAAI,CAAC,YAAa,QAAO;AAEzB,YAAM,gBAAgB,OAAO,SAAS,YAAY,SAAS;AAC3D,UAAI,CAAC,eAAe;AAClB,gBAAQ,KAAK,YAAY,YAAY,SAAS,uBAAuB;AACrE,eAAO;AAAA,MACT;AAGA,YAAM,aAAa,CAAC,cAAc;AAElC,YAAM,cAAc,aAChB,MAAM;AACJ,iBAAS,YAAY,UAAU,EAAE,iBAAiB,WAAW,IAAI;AAAA,MACnE,IACA;AAEJ,YAAM,kBAAkB,UAAU;AAGlC,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ;AAAA,UACR;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,SAAS;AAAA,QAAA;AAAA,QAJJ,YAAY;AAAA,MAAA;AAAA,IAOvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,eAAe,CAAC,WAAgD,SAAiB;;AAC/E,UAAI,CAAC,UAAU,CAAC,YAAY,CAAC,QAAS,QAAO;AAC7C,YAAM,UAAU,GAAG,SAAS,IAAI,IAAI;AACpC,YAAM,cAAc,QAAQ,eAAe,OAAO;AAGlD,UAAI,CAAC,YAAa,QAAO;AAEzB,YAAM,iBAAgB,YAAO,aAAP,mBAAkB,YAAY;AACpD,UAAI,CAAC,eAAe;AAClB,gBAAQ,KAAK,YAAY,YAAY,SAAS,uBAAuB;AACrE,eAAO;AAAA,MACT;AAEA,YAAM,cAAc,MAAM;AACxB,iBAAS,YAAY,UAAU,EAAE,iBAAiB,WAAW,IAAI;AAAA,MACnE;AAEA,YAAM,kBAAkB,UAAU;AAIlC,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ;AAAA,UACR;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,SAAS;AAAA,QAAA;AAAA,QAJJ,YAAY;AAAA,MAAA;AAAA,IAOvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBA,aAAa,MAAM;;AACjB,UAAI,CAAC,UAAU,CAAC,YAAY,EAAC,mCAAS,aAAa,QAAO;AAE1D,YAAM,EAAE,SAAS,OAAA,IAAW,QAAQ;AAEpC,YAAM,eAAc,YAAO,WAAP,mBAAgB;AACpC,UAAI,CAAC,aAAa;AAChB,gBAAQ,KAAK,UAAU,OAAO,uBAAuB;AACrD,eAAO;AAAA,MACT;AAEA,YAAM,cAAc,MAAM;AACxB,iBAAS,YAAY,UAAU,EAAE,WAAA;AAAA,MACnC;AAEA,YAAM,eAAe,MAAM;AACzB,iBAAS,YAAY,UAAU,EAAE,WAAA;AAAA,MACnC;AAEA,YAAM,gBAAgB,UAAU;AAChC,UAAI,CAAC,eAAe;AAClB,gBAAQ,KAAK,8BAA8B;AAC3C,eAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,UAAU;AAAA,QAAA;AAAA,QALL;AAAA,MAAA;AAAA,IAQX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAmB,MAAM;AACvB,UAAI,CAAC,QAAS,QAAO,CAAA;AACrB,aAAO,OAAO,QAAQ,QAAQ,cAAc,EAAE,IAAI,CAAC,CAAC,SAAS,WAAW,MAAM;AAC5E,cAAM,CAAC,WAAW,IAAI,IAAI,QAAQ,MAAM,GAAG;AAC3C,eAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,YAAY;AAAA,UACvB,QAAQ,YAAY;AAAA,QAAA;AAAA,MAExB,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAmB,MAAM;AACvB,UAAI,CAAC,QAAS,QAAO,CAAA;AACrB,aAAO,OAAO,QAAQ,QAAQ,cAAc,EAAE,IAAI,CAAC,CAAC,SAAS,WAAW,MAAM;AAC5E,cAAM,CAAC,WAAW,IAAI,IAAI,QAAQ,MAAM,GAAG;AAC3C,eAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,YAAY;AAAA,UACvB,QAAQ,YAAY;AAAA,QAAA;AAAA,MAExB,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBA,gBAAgB,MAAM;AACpB,UAAI,EAAC,iCAAQ,aAAY,CAAC,SAAU,QAAO;AAE3C,YAAM,kBAAkB,UAAU;AAClC,UAAI,CAAC,iBAAiB;AACpB,eAAO;AAAA,MACT;AAEA,YAAM,WAAW,OAAO,OAAO,OAAO,QAAQ;AAC9C,UAAI,SAAS,WAAW,EAAG,QAAO;AAElC,aACE,oBAAA,UAAA,EACG,UAAA,SAAS,IAAI,CAAC,kBACb;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ;AAAA,UACR;AAAA,QAAA;AAAA,QAFK,cAAc;AAAA,MAAA,CAItB,GACH;AAAA,IAEJ;AAAA,EAAA;AAEJ;ACvOO,SAAS,iBACd,QACA,YAC6C;;AAC7C,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,YAAY,aAAA;AAElB,QAAM,WAAW;AAAA,IACf,CAAC,UAA4C;;AAC3C,YAAMA,UAAS,qCAAU;AACzB,YAAM,cAAaA,MAAAA,mCAAQ,mBAARA,gBAAAA,IAAyB;AAE5C,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AAEA,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACT;AAEA,YAAM,wBAAwB,UAAU;AAExC,aAAO,oBAAC,uBAAA,EAAsB,QAAQ,YAAY,YAAwB,OAAc;AAAA,IAC1F;AAAA,IACA,CAAC,UAAU,WAAW,QAAQ,UAAU;AAAA,EAAA;AAI1C,QAAM,SAAS,qCAAU;AACzB,MAAI,GAAC,sCAAQ,mBAAR,mBAAyB,UAAS;AACrC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AC5BO,SAAS,iBAAiB,EAAE,WAAW,cAAqC;AACjF,QAAM,UAAU,WAAW,UAAU;AACrC,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,iBAAiB,kBAAA;AACvB,QAAM,YAAY,aAAA;AAElB,QAAM,CAAC,YAAY,aAAa,IAAI,SAG1B,IAAI;AAEd,QAAM,aAAY,mCAAS,cAAa,CAAA;AACxC,QAAM,SAAS,qCAAU;AAGzB,YAAU,MAAM;AACd,UAAM,cAAc,OAAO,KAAK,SAAS;AAEzC,QAAI,YAAY,SAAS,GAAG;AAE1B,YAAM,SAAS,YAAY,CAAC;AAC5B,UAAI,CAAC,QAAQ;AACX,sBAAc,IAAI;AAClB;AAAA,MACF;AAEA,YAAM,YAAY,UAAU,MAAM;AAClC,UAAI,aAAa,UAAU,mBAAmB;AAE5C,cAAM,SAAS,eAAe,UAAU,YAAY,UAAU,iBAAiB;AAC/E,sBAAc,EAAE,QAAQ,UAAU,OAAA,CAAQ;AAAA,MAC5C,OAAO;AACL,sBAAc,IAAI;AAAA,MACpB;AAAA,IACF,OAAO;AACL,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,WAAW,gBAAgB,UAAU,CAAC;AAE1C,QAAM,cAAc,MAAM;AACxB,QAAI,YAAY;AACd,2CAAU,YAAY,YAAY,UAAU,WAAW;AAAA,IACzD;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,CAAC,QAAQ;AAC1B,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,OAAO,MAAM,WAAW,MAAM;AACjD,MAAI,CAAC,YAAY;AACf,YAAQ,KAAK,SAAS,WAAW,MAAM,uBAAuB;AAC9D,WAAO;AAAA,EACT;AAGA,QAAM,eAAe,UAAU;AAE/B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,SAAS;AAAA,MACT;AAAA,IAAA;AAAA,EAAA;AAGN;ACpEA,SAAS,eAAe,SAAgD;AACtE,QAAM,OAAO,QAAQ,YAAA;AACrB,MAAI,gBAAgB,YAAY;AAC9B,WAAO;AAAA,EACT;AACA,SAAO,SAAS;AAClB;AAYO,SAAS,OAAO,EAAE,UAAU,OAAO,GAAG,aAA0B;AACrE,QAAM,EAAE,OAAA,IAAW,YAAA;AACnB,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAA,CAAE;AACzE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAmB,CAAA,CAAE;AAC3D,QAAM,aAAa,OAAgC,IAAI;AACvD,QAAM,iBAAiB,OAAwC,IAAI;AACnE,QAAM,qBAAqB,OAA8B,IAAI;AAC7D,QAAM,eAAe,OAAuB,IAAI;AAGhD,QAAM,wBAAwB;AAAA,IAC5B,OAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,aAAa;AAAA,IAAA;AAAA,IAEnC,CAAA;AAAA,EAAC;AAKH,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAmC;AAClC,YAAM,kBAAkB,mBAAmB;AAG3C,yBAAmB,UAAU;AAC5B,mBAAqB,UAAU;AAIhC,UAAI,CAAC,SAAS;AACZ;AAAA,MACF;AAGA,UAAI,YAAY,mBAAmB,QAAQ;AACzC,cAAM,cAAc,eAAe,OAAO;AAC1C,uBAAe,UAAU;AAGzB,cAAM,gBAAgB,YAAY;AAAA,UAChC,aAAa;AAAA,QAAA;AAGf,YAAI,eAAe;AACjB,qBAAW,UAAU;AAErB,wBAAc,cAAc,OAAO,cAAA;AACnC;AAAA,QACF;AAGA,cAAM,aAAa,OAAO,cAAA;AAC1B,cAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,gBAAQ,aAAa,cAAc,QAAQ,EAAE;AAC7C,gBAAQ,cAAc;AAEtB,YAAI,uBAAuB,YAAY;AAErC,sBAAY,aAAa,SAAS,YAAY,UAAU;AAAA,QAC1D,OAAO;AACL,sBAAY,YAAY,OAAO;AAAA,QACjC;AAEA,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAIT,YAAU,MAAM;AACd,WAAO,MAAM;;AAGX,YAAI,gBAAW,YAAX,mBAAoB,eAAc,CAAC,mBAAmB,SAAS;AACjE,mBAAW,QAAQ,OAAA;AAAA,MACrB;AACA,iBAAW,UAAU;AACrB,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,WAAO,OAAO,wBAAwB,MAAM;AAE1C,UAAI,WAAW,SAAS;AACtB,mBAAW,QAAQ,cAAc,OAAO,cAAA;AAAA,MAC1C;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAGX,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AAEf,0BAAsB,SAAS,uBAAuB;AACtD,mBAAe,SAAS,gBAAgB;AAExC,WAAO,SAAS,kBAAkB,CAAC,EAAE,oBAAAC,qBAAoB,aAAAC,mBAAkB;AACzE,4BAAsBD,mBAAkB;AACxC,qBAAeC,YAAW;AAAA,IAC5B,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,yBAAyB;AAAA,IAC7B,MAAO,mBAAmB,SAAS,IAAI,mBAAmB,KAAK,GAAG,IAAI;AAAA,IACtE,CAAC,kBAAkB;AAAA,EAAA;AAIrB,QAAM,kBAAkB;AAAA,IACtB,MAAO,YAAY,SAAS,IAAI,YAAY,KAAK,GAAG,IAAI;AAAA,IACxD,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,OAAO,EAAE,eAAe,cAAA;AAC9B,QAAI,SAAS,OAAO,UAAU,UAAU;AACtC,aAAO,EAAE,GAAG,MAAM,GAAG,MAAA;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY;AAAA,IAChB,CAAC,cAAc,IAAI,GAAG;AAAA,IACtB,CAAC,cAAc,mBAAmB,GAAG;AAAA,IACrC,CAAC,cAAc,YAAY,GAAG;AAAA,EAAA;AAGhC,6BACG,mBAAmB,UAAnB,EAA4B,OAAO,uBAClC,UAAA,oBAAC,OAAA,EAAI,KAAK,iBAAkB,GAAG,WAAY,GAAG,WAAW,OAAO,eAC7D,UACH,GACF;AAEJ;ACnGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,aAAa,CAAA;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,oBAAC,wBAAA,EACC,UAAA,oBAAC,2BAAA,EAA0B,mBAAmB,YAC5C,UAAA,oBAAC,mBAAA,EAAkB,WACjB,UAAA,qBAAC,QAAA,EAAQ,GAAG,WACT,UAAA;AAAA,IAAA;AAAA,IAED,oBAAC,kBAAA,EAAiB,YAAwB,WAAW,cAAA,CAAe;AAAA,EAAA,GACtE,EAAA,CACF,GACF,GACF;AAEJ;"}

package/dist/shared/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './use-ui';
+export * from './use-ui-container';
 export * from './use-register-anchor';
 export * from './use-item-renderer';
 export * from './use-schema-renderer';

package/dist/shared/hooks/use-schema-renderer.d.ts

@@ -1,7 +1,7 @@
 /**
  * High-level hook for rendering UI from schema
  *
- * Provides simple functions to render toolbars and panels by placement+slot.
+ * Provides simple functions to render toolbars, sidebars, and modals.
  * Always passes isOpen state to renderers so they can control animations.
  *
  * Automatically subscribes to UI state changes for the given document.
@@ -23,9 +23,9 @@ export declare function useSchemaRenderer(documentId: string): {
      */
     renderToolbar: (placement: "top" | "bottom" | "left" | "right", slot: string) => import("react/jsx-runtime").JSX.Element | null;
     /**
-     * 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'
@@ -33,11 +33,28 @@ export declare function useSchemaRenderer(documentId: string): {
      *
      * @example
      * ```tsx
-     * {renderPanel('left', 'main')}
-     * {renderPanel('right', 'main')}
+     * {renderSidebar('left', 'main')}
+     * {renderSidebar('right', 'main')}
      * ```
      */
-    renderPanel: (placement: "left" | "right" | "top" | "bottom", slot: string) => import("react/jsx-runtime").JSX.Element | null;
+    renderSidebar: (placement: "left" | "right" | "top" | "bottom", slot: string) => import("react/jsx-runtime").JSX.Element | null;
+    /**
+     * 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: () => import("react/jsx-runtime").JSX.Element | null;
     /**
      * Helper: Get all active toolbars for this document
      * Useful for batch rendering or debugging
@@ -49,13 +66,28 @@ export declare function useSchemaRenderer(documentId: string): {
         isOpen: boolean;
     }[];
     /**
-     * Helper: Get all active panels for this document
+     * Helper: Get all active sidebars for this document
      * Useful for batch rendering or debugging
      */
-    getActivePanels: () => {
+    getActiveSidebars: () => {
         placement: string;
         slot: string;
-        panelId: string;
+        sidebarId: string;
         isOpen: boolean;
     }[];
+    /**
+     * 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: () => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/shared/hooks/use-ui-container.d.ts

@@ -0,0 +1,39 @@
+import { RefObject } from '../../react/adapter.ts';
+export interface UIContainerContextValue {
+    /** Reference to the UIRoot container element */
+    containerRef: RefObject<HTMLDivElement>;
+    /** Get the container element (may be null if not mounted) */
+    getContainer: () => HTMLDivElement | null;
+}
+export declare const UIContainerContext: import('react').Context<UIContainerContextValue | null>;
+/**
+ * Hook to access the UI container element.
+ *
+ * This provides access to the UIRoot container for:
+ * - Container query based responsiveness
+ * - Portaling elements to the root
+ * - Measuring container dimensions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { containerRef, getContainer } = useUIContainer();
+ *
+ *   // Use containerRef for ResizeObserver
+ *   useEffect(() => {
+ *     const container = getContainer();
+ *     if (!container) return;
+ *
+ *     const observer = new ResizeObserver(() => {
+ *       console.log('Container width:', container.clientWidth);
+ *     });
+ *     observer.observe(container);
+ *     return () => observer.disconnect();
+ *   }, [getContainer]);
+ *
+ *   // Or portal to the container
+ *   return createPortal(<Modal />, getContainer()!);
+ * }
+ * ```
+ */
+export declare function useUIContainer(): UIContainerContextValue;

package/dist/shared/root.d.ts

@@ -8,5 +8,5 @@ interface UIRootProps extends HTMLAttributes<HTMLDivElement> {
  * 2. Managing the data-disabled-categories attribute
  * 3. Updating styles on locale changes
  */
-export declare function UIRoot({ children, ...restProps }: UIRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function UIRoot({ children, style, ...restProps }: UIRootProps): import("react/jsx-runtime").JSX.Element;
 export {};