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

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-ui.svelte.ts","../../src/svelte/registries/anchor-registry.svelte.ts","../../src/svelte/hooks/use-register-anchor.svelte.ts","../../src/svelte/registries/component-registry.svelte.ts","../../src/svelte/hooks/use-item-renderer.svelte.ts","../../src/svelte/registries/renderers-registry.svelte.ts","../../src/svelte/hooks/use-schema-renderer.svelte.ts","../../src/svelte/hooks/use-selection-menu.svelte.ts","../../src/svelte/auto-menu-renderer.svelte","../../src/svelte/root.svelte","../../src/svelte/provider.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { UIPlugin, UIDocumentState, UISchema, UIScope } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to get the raw UI plugin instance.\n */\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Hook to get the UI plugin's capability API.\n */\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseUIStateReturn {\n  provides: UIScope | null;\n  state: UIDocumentState | null;\n}\n\n/**\n * Hook for UI state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useUIState = (getDocumentId: () => string | null): UseUIStateReturn => {\n  const capability = useUICapability();\n\n  let state = $state<UIDocumentState | null>(null);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = null;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Set initial state\n    state = scope.getState();\n\n    // Subscribe to all changes and update state\n    const unsubToolbar = scope.onToolbarChanged(() => {\n      state = scope.getState();\n    });\n    const unsubPanel = scope.onPanelChanged(() => {\n      state = scope.getState();\n    });\n    const unsubModal = scope.onModalChanged(() => {\n      state = scope.getState();\n    });\n    const unsubMenu = scope.onMenuChanged(() => {\n      state = scope.getState();\n    });\n\n    return () => {\n      unsubToolbar();\n      unsubPanel();\n      unsubModal();\n      unsubMenu();\n    };\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n\n/**\n * Hook to get UI schema\n * Returns an object with a reactive getter for the schema\n */\nexport const useUISchema = () => {\n  const capability = useUICapability();\n\n  return {\n    get schema() {\n      return capability.provides?.getSchema() ?? null;\n    },\n  };\n};\n","import { getContext, setContext } from 'svelte';\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 ANCHOR_REGISTRY_KEY = Symbol('AnchorRegistry');\n\nexport function createAnchorRegistry(): AnchorRegistry {\n  const anchors = new Map<string, HTMLElement>();\n\n  return {\n    register(documentId: string, itemId: string, element: HTMLElement) {\n      const key = `${documentId}:${itemId}`;\n      anchors.set(key, element);\n    },\n\n    unregister(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      anchors.delete(key);\n    },\n\n    getAnchor(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      return anchors.get(key) || null;\n    },\n  };\n}\n\nexport function provideAnchorRegistry() {\n  const registry = createAnchorRegistry();\n  setContext(ANCHOR_REGISTRY_KEY, registry);\n  return registry;\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n  const registry = getContext<AnchorRegistry>(ANCHOR_REGISTRY_KEY);\n  if (!registry) {\n    throw new Error('useAnchorRegistry must be used within UIProvider');\n  }\n  return registry;\n}\n","import { onDestroy } from 'svelte';\nimport { useAnchorRegistry } from '../registries/anchor-registry.svelte';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param getDocumentId - Function returning document ID\n * @param getItemId - Function returning item ID (typically matches the toolbar/menu item ID)\n * @returns Function to attach to the element via use:action\n *\n * @example\n *\n * <script lang=\"ts\">\n *   const registerAnchor = useRegisterAnchor(() => documentId, () => 'zoom-button');\n * </script>\n *\n * <button use:registerAnchor>Zoom</button>\n *  */\nexport function useRegisterAnchor(getDocumentId: () => string | null, getItemId: () => string) {\n  const registry = useAnchorRegistry();\n  let currentElement = $state<HTMLElement | null>(null);\n\n  // Reactive values - these update when the functions return different values\n  const documentId = $derived(getDocumentId());\n  const itemId = $derived(getItemId());\n\n  // Re-register anchor when documentId, itemId, or element changes\n  $effect(() => {\n    const docId = documentId;\n    const item = itemId;\n    const element = currentElement;\n\n    // Only register if we have all required values\n    if (element && docId && item) {\n      registry.register(docId, item, element);\n\n      // Cleanup: unregister when effect re-runs or component unmounts\n      return () => {\n        registry.unregister(docId, item);\n      };\n    }\n  });\n\n  // Svelte action function\n  const action = (element: HTMLElement) => {\n    currentElement = element;\n\n    return {\n      destroy() {\n        // Clear the element reference when the action is destroyed\n        currentElement = null;\n      },\n    };\n  };\n\n  return action;\n}\n","import { getContext, setContext, type Component } from 'svelte';\nimport type { 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: Component<BaseComponentProps>): void;\n  unregister(id: string): void;\n  get(id: string): Component<BaseComponentProps> | undefined;\n  has(id: string): boolean;\n  getRegisteredIds(): string[];\n}\n\nconst COMPONENT_REGISTRY_KEY = Symbol('ComponentRegistry');\n\nexport function createComponentRegistry(\n  initialComponents: Record<string, Component<BaseComponentProps>> = {},\n): ComponentRegistry {\n  const components = new Map<string, Component<BaseComponentProps>>(\n    Object.entries(initialComponents),\n  );\n\n  return {\n    register(id: string, component: Component<BaseComponentProps>) {\n      components.set(id, component);\n    },\n\n    unregister(id: string) {\n      components.delete(id);\n    },\n\n    get(id: string) {\n      return components.get(id);\n    },\n\n    has(id: string) {\n      return components.has(id);\n    },\n\n    getRegisteredIds() {\n      return Array.from(components.keys());\n    },\n  };\n}\n\nexport function provideComponentRegistry(\n  initialComponents: Record<string, Component<BaseComponentProps>> = {},\n) {\n  const registry = createComponentRegistry(initialComponents);\n  setContext(COMPONENT_REGISTRY_KEY, registry);\n  return registry;\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n  const registry = getContext<ComponentRegistry>(COMPONENT_REGISTRY_KEY);\n  if (!registry) {\n    throw new Error('useComponentRegistry must be used within UIProvider');\n  }\n  return registry;\n}\n","import { useComponentRegistry } from '../registries/component-registry.svelte';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n  const componentRegistry = useComponentRegistry();\n\n  return {\n    /**\n     * Get a custom component by ID\n     *\n     * @param componentId - Component ID from schema\n     * @returns Component constructor or undefined if not found\n     *\n     * @example\n     * ```svelte\n     * <script lang=\"ts\">\n     *   const { getCustomComponent } = useItemRenderer();\n     *   const MyComponent = getCustomComponent('my-component-id');\n     * </script>\n     *\n     * {#if MyComponent}\n     *   <MyComponent {documentId} {...props} />\n     * {/if}\n     * ```\n     */\n    getCustomComponent: (componentId: string) => {\n      const Component = componentRegistry.get(componentId);\n\n      if (!Component) {\n        console.error(`Component \"${componentId}\" not found in registry`);\n        return undefined;\n      }\n\n      return Component;\n    },\n  };\n}\n","import { getContext, setContext } from 'svelte';\nimport type { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RENDERERS_KEY = Symbol('Renderers');\n\nexport function provideRenderers(renderers: UIRenderers) {\n  setContext(RENDERERS_KEY, renderers);\n}\n\nexport function useRenderers(): UIRenderers {\n  const renderers = getContext<UIRenderers>(RENDERERS_KEY);\n  if (!renderers) {\n    throw new Error('useRenderers must be used within UIProvider');\n  }\n  return renderers;\n}\n","import { useUICapability } from './use-ui.svelte';\nimport { useRenderers } from '../registries/renderers-registry.svelte';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides information about active toolbars and panels by placement+slot.\n * Always includes isOpen state so renderers can control animations.\n *\n * Use with Svelte's component binding to render toolbars and panels.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   const { getToolbarInfo, getPanelInfo } = useSchemaRenderer(() => documentId);\n *\n *   const topMainToolbar = $derived(getToolbarInfo('top', 'main'));\n *   const leftMainPanel = $derived(getPanelInfo('left', 'main'));\n * </script>\n *\n * {#if topMainToolbar}\n *   {@const ToolbarRenderer = topMainToolbar.renderer}\n *   <ToolbarRenderer\n *     schema={topMainToolbar.schema}\n *     documentId={topMainToolbar.documentId}\n *     isOpen={topMainToolbar.isOpen}\n *     onClose={topMainToolbar.onClose}\n *   />\n * {/if}\n * ```\n */\nexport function useSchemaRenderer(getDocumentId: () => string | null) {\n  const renderers = useRenderers();\n  const capability = useUICapability();\n  const uiState = useUIState(getDocumentId);\n\n  return {\n    /**\n     * Get toolbar information by placement and slot\n     *\n     * @param placement - 'top' | 'bottom' | 'left' | 'right'\n     * @param slot - Slot name (e.g. 'main', 'secondary')\n     * @returns Toolbar info or null if no toolbar in slot\n     */\n    getToolbarInfo: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const toolbarSlot = uiState.state.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            uiState.provides?.closeToolbarSlot(placement, slot);\n          }\n        : undefined;\n\n      return {\n        renderer: renderers.toolbar,\n        schema: toolbarSchema,\n        documentId,\n        isOpen: toolbarSlot.isOpen,\n        onClose: handleClose,\n      };\n    },\n\n    /**\n     * Get panel information by placement and slot\n     *\n     * @param placement - 'left' | 'right' | 'top' | 'bottom'\n     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n     * @returns Panel info or null if no panel in slot\n     */\n    getPanelInfo: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const panelSlot = uiState.state.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        uiState.provides?.closePanelSlot(placement, slot);\n      };\n\n      return {\n        renderer: renderers.panel,\n        schema: panelSchema,\n        documentId,\n        isOpen: panelSlot.isOpen,\n        onClose: handleClose,\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.state) return [];\n      return Object.entries(uiState.state.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.state) return [];\n      return Object.entries(uiState.state.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\n// Import after definition to avoid circular dependency\nimport { useUIState } from './use-ui.svelte';\n","import type {\n  SelectionMenuPropsBase,\n  SelectionMenuRenderFn,\n  SelectionMenuRenderResult,\n} from '@embedpdf/utils/svelte';\nimport { useUICapability } from './use-ui.svelte';\nimport { useRenderers } from '../registries/renderers-registry.svelte';\n\n/**\n * Hook for schema-driven selection menus\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n  menuId: string | (() => string),\n  getDocumentId: () => string,\n) {\n  const uiCapability = useUICapability();\n  const renderers = useRenderers();\n\n  // Normalize menuId to always be a function, then make it reactive\n  const getMenuIdFn = typeof menuId === 'function' ? menuId : () => menuId;\n  const menuIdValue = $derived(getMenuIdFn());\n  const documentId = $derived(getDocumentId());\n  const schema = $derived(uiCapability.provides?.getSchema());\n  const menuSchema = $derived(schema?.selectionMenus?.[menuIdValue]);\n\n  const renderFn = $derived.by<SelectionMenuRenderFn<TContext> | undefined>(() => {\n    if (!menuSchema) return undefined;\n\n    const currentMenuSchema = menuSchema;\n    const currentDocumentId = documentId;\n    const SelectionMenuRenderer = renderers.selectionMenu;\n\n    return (props: SelectionMenuPropsBase<TContext>): SelectionMenuRenderResult | null => {\n      if (!props.selected) return null;\n\n      return {\n        component: SelectionMenuRenderer,\n        props: {\n          schema: currentMenuSchema,\n          documentId: currentDocumentId,\n          props,\n        },\n      };\n    };\n  });\n\n  return {\n    get renderFn() {\n      return renderFn;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import { useUIState, useUICapability } from './hooks/use-ui.svelte';\n  import { useAnchorRegistry } from './registries/anchor-registry.svelte';\n  import { useRenderers } from './registries/renderers-registry.svelte';\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   */\n\n  interface Props {\n    documentId: string; // Which document's menus to render\n    container?: HTMLElement | null;\n  }\n\n  let { documentId, container = null }: Props = $props();\n\n  const uiState = useUIState(() => documentId);\n  const capability = useUICapability();\n  const anchorRegistry = useAnchorRegistry();\n  const renderers = useRenderers();\n\n  // Derived state for active menu\n  const activeMenu = $derived.by(() => {\n    const openMenus = uiState.state?.openMenus || {};\n    const openMenuIds = Object.keys(openMenus);\n\n    if (openMenuIds.length === 0) return null;\n\n    // Show the first open menu (in practice, should only be one)\n    const menuId = openMenuIds[0];\n    if (!menuId) return null;\n\n    const menuState = openMenus[menuId];\n    if (!menuState || !menuState.triggeredByItemId) return null;\n\n    // Look up anchor with documentId scope\n    const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n    return { menuId, anchorEl: anchor };\n  });\n\n  const schema = $derived(capability.provides?.getSchema());\n\n  const menuSchema = $derived.by(() => {\n    if (!activeMenu || !schema) return null;\n\n    const menuSchemaValue = schema.menus[activeMenu.menuId];\n    if (!menuSchemaValue) {\n      console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n      return null;\n    }\n\n    return menuSchemaValue;\n  });\n\n  const handleClose = () => {\n    if (activeMenu) {\n      uiState.provides?.closeMenu(activeMenu.menuId);\n    }\n  };\n\n  // Use the user-provided menu renderer\n  const MenuRenderer = renderers.menu;\n</script>\n\n{#if activeMenu && menuSchema && MenuRenderer}\n  <MenuRenderer\n    schema={menuSchema}\n    {documentId}\n    anchorEl={activeMenu.anchorEl}\n    onClose={handleClose}\n    {container}\n  />\n{/if}\n","<script lang=\"ts\">\n  import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\n  import { useUIPlugin, useUICapability } from './hooks/use-ui.svelte';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type Props = HTMLAttributes<HTMLDivElement> & {\n    children?: Snippet;\n  };\n\n  let { children, class: className, ...restProps }: Props = $props();\n\n  const { plugin } = useUIPlugin();\n  const { provides } = useUICapability();\n\n  let disabledCategories = $state<string[]>([]);\n  let rootElement: HTMLDivElement | null = $state(null);\n  let styleEl: HTMLStyleElement | null = null;\n  let styleTarget: HTMLElement | ShadowRoot | null = null;\n\n  function 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\n  $effect(() => {\n    if (!rootElement || !plugin) {\n      styleTarget = null;\n      return;\n    }\n\n    styleTarget = getStyleTarget(rootElement);\n\n    const existingStyle = styleTarget.querySelector(UI_SELECTORS.STYLES) as HTMLStyleElement | null;\n\n    if (existingStyle) {\n      styleEl = existingStyle;\n      existingStyle.textContent = plugin.getStylesheet();\n      return;\n    }\n\n    const stylesheet = plugin.getStylesheet();\n    const newStyleEl = document.createElement('style');\n    newStyleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n    newStyleEl.textContent = stylesheet;\n\n    if (styleTarget instanceof ShadowRoot) {\n      styleTarget.insertBefore(newStyleEl, styleTarget.firstChild);\n    } else {\n      styleTarget.appendChild(newStyleEl);\n    }\n\n    styleEl = newStyleEl;\n\n    return () => {\n      if (styleEl?.parentNode) {\n        styleEl.remove();\n      }\n      styleEl = null;\n      styleTarget = null;\n    };\n  });\n\n  $effect(() => {\n    if (!plugin) return;\n\n    return plugin.onStylesheetInvalidated(() => {\n      if (styleEl) {\n        styleEl.textContent = plugin.getStylesheet();\n      }\n    });\n  });\n\n  $effect(() => {\n    if (!provides) return;\n\n    disabledCategories = provides.getDisabledCategories();\n\n    return provides.onCategoryChanged((event) => {\n      disabledCategories = event.disabledCategories;\n    });\n  });\n\n  const disabledCategoriesAttr = $derived(\n    disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined,\n  );\n</script>\n\n<div\n  bind:this={rootElement}\n  {...restProps}\n  {...{ [UI_ATTRIBUTES.ROOT]: '' }}\n  {...disabledCategoriesAttr ? { [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr } : {}}\n  class={className}\n  style:container-type=\"inline-size\"\n>\n  {#if children}\n    {@render children()}\n  {/if}\n</div>\n","<script lang=\"ts\">\n  import type { Component, Snippet } from 'svelte';\n  import { provideAnchorRegistry } from './registries/anchor-registry.svelte';\n  import { provideComponentRegistry } from './registries/component-registry.svelte';\n  import { provideRenderers } from './registries/renderers-registry.svelte';\n  import type { UIComponents, UIRenderers } from './types';\n  import AutoMenuRenderer from './auto-menu-renderer.svelte';\n  import UIRoot from './root.svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  /**\n   * UIProvider Props\n   */\n  type ProviderProps = HTMLAttributes<HTMLDivElement> & {\n    children: Snippet;\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?: UIComponents;\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    class?: string;\n  };\n\n  let {\n    children,\n    documentId,\n    components = {},\n    renderers,\n    menuContainer = null,\n    class: className,\n    ...restProps\n  }: ProviderProps = $props();\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   * ```svelte\n   * <EmbedPDF {engine} {plugins}>\n   *   {#snippet children({ pluginsReady, activeDocumentId })}\n   *     {#if pluginsReady && 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   *         {#snippet children()}\n   *           <ViewerLayout />\n   *         {/snippet}\n   *       </UIProvider>\n   *     {/if}\n   *   {/snippet}\n   * </EmbedPDF>\n   * ```\n   */\n\n  // Provide all registries\n  provideAnchorRegistry();\n  provideComponentRegistry(components);\n  provideRenderers(renderers);\n</script>\n\n<UIRoot class={className} {...restProps}>\n  {@render children()}\n  <AutoMenuRenderer {documentId} container={menuContainer} />\n</UIRoot>\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-ui.svelte.ts","../../src/svelte/hooks/use-ui-container.svelte.ts","../../src/svelte/registries/anchor-registry.svelte.ts","../../src/svelte/hooks/use-register-anchor.svelte.ts","../../src/svelte/registries/component-registry.svelte.ts","../../src/svelte/hooks/use-item-renderer.svelte.ts","../../src/svelte/registries/renderers-registry.svelte.ts","../../src/svelte/hooks/use-schema-renderer.svelte.ts","../../src/svelte/hooks/use-selection-menu.svelte.ts","../../src/svelte/auto-menu-renderer.svelte","../../src/svelte/root.svelte","../../src/svelte/provider.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { UIPlugin, UIDocumentState, UIScope } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to get the raw UI plugin instance.\n */\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Hook to get the UI plugin's capability API.\n */\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseUIStateReturn {\n  provides: UIScope | null;\n  state: UIDocumentState | null;\n}\n\n/**\n * Hook for UI state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useUIState = (getDocumentId: () => string | null): UseUIStateReturn => {\n  const capability = useUICapability();\n\n  let state = $state<UIDocumentState | null>(null);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = null;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Set initial state\n    state = scope.getState();\n\n    // Subscribe to all changes and update state\n    const unsubToolbar = scope.onToolbarChanged(() => {\n      state = scope.getState();\n    });\n    const unsubSidebar = scope.onSidebarChanged(() => {\n      state = scope.getState();\n    });\n    const unsubModal = scope.onModalChanged(() => {\n      state = scope.getState();\n    });\n    const unsubMenu = scope.onMenuChanged(() => {\n      state = scope.getState();\n    });\n\n    return () => {\n      unsubToolbar();\n      unsubSidebar();\n      unsubModal();\n      unsubMenu();\n    };\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n\n/**\n * Hook to get UI schema\n * Returns an object with a reactive getter for the schema\n */\nexport const useUISchema = () => {\n  const capability = useUICapability();\n\n  return {\n    get schema() {\n      return capability.provides?.getSchema() ?? null;\n    },\n  };\n};\n","import { getContext, setContext } from 'svelte';\n\nexport interface UIContainerContextValue {\n  /** Get the container element (may be null if not mounted) */\n  getContainer: () => HTMLDivElement | null;\n}\n\nconst UI_CONTAINER_KEY = Symbol('ui-container');\n\n/**\n * Set up the container context (called by UIRoot)\n */\nexport function setUIContainerContext(value: UIContainerContextValue): void {\n  setContext(UI_CONTAINER_KEY, value);\n}\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 * ```svelte\n * <script>\n *   import { useUIContainer } from '@embedpdf/plugin-ui/svelte';\n *   import { onMount, onDestroy } from 'svelte';\n *\n *   const { getContainer } = useUIContainer();\n *\n *   let observer;\n *\n *   onMount(() => {\n *     const container = getContainer();\n *     if (!container) return;\n *\n *     observer = new ResizeObserver(() => {\n *       console.log('Container width:', container.clientWidth);\n *     });\n *     observer.observe(container);\n *   });\n *\n *   onDestroy(() => observer?.disconnect());\n * </script>\n * ```\n */\nexport function useUIContainer(): UIContainerContextValue {\n  const context = getContext<UIContainerContextValue>(UI_CONTAINER_KEY);\n  if (!context) {\n    throw new Error('useUIContainer must be used within a UIProvider');\n  }\n  return context;\n}\n","import { getContext, setContext } from 'svelte';\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 ANCHOR_REGISTRY_KEY = Symbol('AnchorRegistry');\n\nexport function createAnchorRegistry(): AnchorRegistry {\n  const anchors = new Map<string, HTMLElement>();\n\n  return {\n    register(documentId: string, itemId: string, element: HTMLElement) {\n      const key = `${documentId}:${itemId}`;\n      anchors.set(key, element);\n    },\n\n    unregister(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      anchors.delete(key);\n    },\n\n    getAnchor(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      return anchors.get(key) || null;\n    },\n  };\n}\n\nexport function provideAnchorRegistry() {\n  const registry = createAnchorRegistry();\n  setContext(ANCHOR_REGISTRY_KEY, registry);\n  return registry;\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n  const registry = getContext<AnchorRegistry>(ANCHOR_REGISTRY_KEY);\n  if (!registry) {\n    throw new Error('useAnchorRegistry must be used within UIProvider');\n  }\n  return registry;\n}\n","import { onDestroy } from 'svelte';\nimport { useAnchorRegistry } from '../registries/anchor-registry.svelte';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param getDocumentId - Function returning document ID\n * @param getItemId - Function returning item ID (typically matches the toolbar/menu item ID)\n * @returns Function to attach to the element via use:action\n *\n * @example\n *\n * <script lang=\"ts\">\n *   const registerAnchor = useRegisterAnchor(() => documentId, () => 'zoom-button');\n * </script>\n *\n * <button use:registerAnchor>Zoom</button>\n *  */\nexport function useRegisterAnchor(getDocumentId: () => string | null, getItemId: () => string) {\n  const registry = useAnchorRegistry();\n  let currentElement = $state<HTMLElement | null>(null);\n\n  // Reactive values - these update when the functions return different values\n  const documentId = $derived(getDocumentId());\n  const itemId = $derived(getItemId());\n\n  // Re-register anchor when documentId, itemId, or element changes\n  $effect(() => {\n    const docId = documentId;\n    const item = itemId;\n    const element = currentElement;\n\n    // Only register if we have all required values\n    if (element && docId && item) {\n      registry.register(docId, item, element);\n\n      // Cleanup: unregister when effect re-runs or component unmounts\n      return () => {\n        registry.unregister(docId, item);\n      };\n    }\n  });\n\n  // Svelte action function\n  const action = (element: HTMLElement) => {\n    currentElement = element;\n\n    return {\n      destroy() {\n        // Clear the element reference when the action is destroyed\n        currentElement = null;\n      },\n    };\n  };\n\n  return action;\n}\n","import { getContext, setContext, type Component } from 'svelte';\nimport type { 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: Component<BaseComponentProps>): void;\n  unregister(id: string): void;\n  get(id: string): Component<BaseComponentProps> | undefined;\n  has(id: string): boolean;\n  getRegisteredIds(): string[];\n}\n\nconst COMPONENT_REGISTRY_KEY = Symbol('ComponentRegistry');\n\nexport function createComponentRegistry(\n  initialComponents: Record<string, Component<BaseComponentProps>> = {},\n): ComponentRegistry {\n  const components = new Map<string, Component<BaseComponentProps>>(\n    Object.entries(initialComponents),\n  );\n\n  return {\n    register(id: string, component: Component<BaseComponentProps>) {\n      components.set(id, component);\n    },\n\n    unregister(id: string) {\n      components.delete(id);\n    },\n\n    get(id: string) {\n      return components.get(id);\n    },\n\n    has(id: string) {\n      return components.has(id);\n    },\n\n    getRegisteredIds() {\n      return Array.from(components.keys());\n    },\n  };\n}\n\nexport function provideComponentRegistry(\n  initialComponents: Record<string, Component<BaseComponentProps>> = {},\n) {\n  const registry = createComponentRegistry(initialComponents);\n  setContext(COMPONENT_REGISTRY_KEY, registry);\n  return registry;\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n  const registry = getContext<ComponentRegistry>(COMPONENT_REGISTRY_KEY);\n  if (!registry) {\n    throw new Error('useComponentRegistry must be used within UIProvider');\n  }\n  return registry;\n}\n","import { useComponentRegistry } from '../registries/component-registry.svelte';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n  const componentRegistry = useComponentRegistry();\n\n  return {\n    /**\n     * Get a custom component by ID\n     *\n     * @param componentId - Component ID from schema\n     * @returns Component constructor or undefined if not found\n     *\n     * @example\n     * ```svelte\n     * <script lang=\"ts\">\n     *   const { getCustomComponent } = useItemRenderer();\n     *   const MyComponent = getCustomComponent('my-component-id');\n     * </script>\n     *\n     * {#if MyComponent}\n     *   <MyComponent {documentId} {...props} />\n     * {/if}\n     * ```\n     */\n    getCustomComponent: (componentId: string) => {\n      const Component = componentRegistry.get(componentId);\n\n      if (!Component) {\n        console.error(`Component \"${componentId}\" not found in registry`);\n        return undefined;\n      }\n\n      return Component;\n    },\n  };\n}\n","import { getContext, setContext } from 'svelte';\nimport type { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RENDERERS_KEY = Symbol('Renderers');\n\nexport function provideRenderers(renderers: UIRenderers) {\n  setContext(RENDERERS_KEY, renderers);\n}\n\nexport function useRenderers(): UIRenderers {\n  const renderers = getContext<UIRenderers>(RENDERERS_KEY);\n  if (!renderers) {\n    throw new Error('useRenderers must be used within UIProvider');\n  }\n  return renderers;\n}\n","import { useUICapability } from './use-ui.svelte';\nimport { useRenderers } from '../registries/renderers-registry.svelte';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides information about active toolbars, sidebars, and modals.\n * Always includes isOpen state so renderers can control animations.\n *\n * Use with Svelte's component binding to render toolbars and sidebars.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   const { getToolbarInfo, getSidebarInfo, getModalInfo } = useSchemaRenderer(() => documentId);\n *\n *   const topMainToolbar = $derived(getToolbarInfo('top', 'main'));\n *   const leftMainSidebar = $derived(getSidebarInfo('left', 'main'));\n *   const modal = $derived(getModalInfo());\n * </script>\n *\n * {#if topMainToolbar}\n *   {@const ToolbarRenderer = topMainToolbar.renderer}\n *   <ToolbarRenderer\n *     schema={topMainToolbar.schema}\n *     documentId={topMainToolbar.documentId}\n *     isOpen={topMainToolbar.isOpen}\n *     onClose={topMainToolbar.onClose}\n *   />\n * {/if}\n * ```\n */\nexport function useSchemaRenderer(getDocumentId: () => string | null) {\n  const renderers = useRenderers();\n  const capability = useUICapability();\n  const uiState = useUIState(getDocumentId);\n\n  return {\n    /**\n     * Get toolbar information by placement and slot\n     *\n     * @param placement - 'top' | 'bottom' | 'left' | 'right'\n     * @param slot - Slot name (e.g. 'main', 'secondary')\n     * @returns Toolbar info or null if no toolbar in slot\n     */\n    getToolbarInfo: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const toolbarSlot = uiState.state.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            uiState.provides?.closeToolbarSlot(placement, slot);\n          }\n        : undefined;\n\n      return {\n        renderer: renderers.toolbar,\n        schema: toolbarSchema,\n        documentId,\n        isOpen: toolbarSlot.isOpen,\n        onClose: handleClose,\n      };\n    },\n\n    /**\n     * Get sidebar information by placement and slot\n     *\n     * @param placement - 'left' | 'right' | 'top' | 'bottom'\n     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n     * @returns Sidebar info or null if no sidebar in slot\n     */\n    getSidebarInfo: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const sidebarSlot = uiState.state.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        uiState.provides?.closeSidebarSlot(placement, slot);\n      };\n\n      return {\n        renderer: renderers.sidebar,\n        schema: sidebarSchema,\n        documentId,\n        isOpen: sidebarSlot.isOpen,\n        onClose: handleClose,\n      };\n    },\n\n    /**\n     * Get modal information (if active)\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     * @returns Modal info or null if no modal active\n     */\n    getModalInfo: () => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state?.activeModal || !documentId) return null;\n\n      const { modalId, isOpen } = uiState.state.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        uiState.provides?.closeModal();\n      };\n\n      const handleExited = () => {\n        uiState.provides?.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        renderer: ModalRenderer,\n        schema: modalSchema,\n        documentId,\n        isOpen,\n        onClose: handleClose,\n        onExited: handleExited,\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.state) return [];\n      return Object.entries(uiState.state.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.state) return [];\n      return Object.entries(uiState.state.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     * Get overlay information for 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     * ```svelte\n     * <script lang=\"ts\">\n     *   const { getOverlaysInfo } = useSchemaRenderer(() => documentId);\n     *   const overlays = $derived(getOverlaysInfo());\n     * </script>\n     *\n     * {#each overlays as overlay (overlay.schema.id)}\n     *   {@const OverlayRenderer = overlay.renderer}\n     *   <OverlayRenderer schema={overlay.schema} documentId={overlay.documentId} />\n     * {/each}\n     * ```\n     */\n    getOverlaysInfo: () => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema?.overlays || !documentId) return [];\n\n      const OverlayRenderer = renderers.overlay;\n      if (!OverlayRenderer) {\n        return [];\n      }\n\n      return Object.values(schema.overlays).map((overlaySchema) => ({\n        renderer: OverlayRenderer,\n        schema: overlaySchema,\n        documentId,\n      }));\n    },\n  };\n}\n\n// Import after definition to avoid circular dependency\nimport { useUIState } from './use-ui.svelte';\n","import type {\n  SelectionMenuPropsBase,\n  SelectionMenuRenderFn,\n  SelectionMenuRenderResult,\n} from '@embedpdf/utils/svelte';\nimport { useUICapability } from './use-ui.svelte';\nimport { useRenderers } from '../registries/renderers-registry.svelte';\n\n/**\n * Hook for schema-driven selection menus\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n  menuId: string | (() => string),\n  getDocumentId: () => string,\n) {\n  const uiCapability = useUICapability();\n  const renderers = useRenderers();\n\n  // Normalize menuId to always be a function, then make it reactive\n  const getMenuIdFn = typeof menuId === 'function' ? menuId : () => menuId;\n  const menuIdValue = $derived(getMenuIdFn());\n  const documentId = $derived(getDocumentId());\n  const schema = $derived(uiCapability.provides?.getSchema());\n  const menuSchema = $derived(schema?.selectionMenus?.[menuIdValue]);\n\n  const renderFn = $derived.by<SelectionMenuRenderFn<TContext> | undefined>(() => {\n    if (!menuSchema) return undefined;\n\n    const currentMenuSchema = menuSchema;\n    const currentDocumentId = documentId;\n    const SelectionMenuRenderer = renderers.selectionMenu;\n\n    return (props: SelectionMenuPropsBase<TContext>): SelectionMenuRenderResult | null => {\n      if (!props.selected) return null;\n\n      return {\n        component: SelectionMenuRenderer,\n        props: {\n          schema: currentMenuSchema,\n          documentId: currentDocumentId,\n          props,\n        },\n      };\n    };\n  });\n\n  return {\n    get renderFn() {\n      return renderFn;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import { useUIState, useUICapability } from './hooks/use-ui.svelte';\n  import { useAnchorRegistry } from './registries/anchor-registry.svelte';\n  import { useRenderers } from './registries/renderers-registry.svelte';\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   */\n\n  interface Props {\n    documentId: string; // Which document's menus to render\n    container?: HTMLElement | null;\n  }\n\n  let { documentId, container = null }: Props = $props();\n\n  const uiState = useUIState(() => documentId);\n  const capability = useUICapability();\n  const anchorRegistry = useAnchorRegistry();\n  const renderers = useRenderers();\n\n  // Derived state for active menu\n  const activeMenu = $derived.by(() => {\n    const openMenus = uiState.state?.openMenus || {};\n    const openMenuIds = Object.keys(openMenus);\n\n    if (openMenuIds.length === 0) return null;\n\n    // Show the first open menu (in practice, should only be one)\n    const menuId = openMenuIds[0];\n    if (!menuId) return null;\n\n    const menuState = openMenus[menuId];\n    if (!menuState || !menuState.triggeredByItemId) return null;\n\n    // Look up anchor with documentId scope\n    const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n    return { menuId, anchorEl: anchor };\n  });\n\n  const schema = $derived(capability.provides?.getSchema());\n\n  const menuSchema = $derived.by(() => {\n    if (!activeMenu || !schema) return null;\n\n    const menuSchemaValue = schema.menus[activeMenu.menuId];\n    if (!menuSchemaValue) {\n      console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n      return null;\n    }\n\n    return menuSchemaValue;\n  });\n\n  const handleClose = () => {\n    if (activeMenu) {\n      uiState.provides?.closeMenu(activeMenu.menuId);\n    }\n  };\n\n  // Use the user-provided menu renderer\n  const MenuRenderer = renderers.menu;\n</script>\n\n{#if activeMenu && menuSchema && MenuRenderer}\n  <MenuRenderer\n    schema={menuSchema}\n    {documentId}\n    anchorEl={activeMenu.anchorEl}\n    onClose={handleClose}\n    {container}\n  />\n{/if}\n","<script lang=\"ts\">\n  import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\n  import { useUIPlugin, useUICapability } from './hooks/use-ui.svelte';\n  import { setUIContainerContext } from './hooks/use-ui-container.svelte';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type Props = HTMLAttributes<HTMLDivElement> & {\n    children?: Snippet;\n  };\n\n  let { children, class: className, ...restProps }: Props = $props();\n\n  const { plugin } = useUIPlugin();\n  const { provides } = useUICapability();\n\n  let disabledCategories = $state<string[]>([]);\n  let hiddenItems = $state<string[]>([]);\n  let rootElement: HTMLDivElement | null = $state(null);\n  let styleEl: HTMLStyleElement | null = null;\n  let styleTarget: HTMLElement | ShadowRoot | null = null;\n\n  // Provide container context for child components\n  setUIContainerContext({\n    getContainer: () => rootElement,\n  });\n\n  function 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\n  $effect(() => {\n    if (!rootElement || !plugin) {\n      styleTarget = null;\n      return;\n    }\n\n    styleTarget = getStyleTarget(rootElement);\n\n    const existingStyle = styleTarget.querySelector(UI_SELECTORS.STYLES) as HTMLStyleElement | null;\n\n    if (existingStyle) {\n      styleEl = existingStyle;\n      existingStyle.textContent = plugin.getStylesheet();\n      return;\n    }\n\n    const stylesheet = plugin.getStylesheet();\n    const newStyleEl = document.createElement('style');\n    newStyleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n    newStyleEl.textContent = stylesheet;\n\n    if (styleTarget instanceof ShadowRoot) {\n      styleTarget.insertBefore(newStyleEl, styleTarget.firstChild);\n    } else {\n      styleTarget.appendChild(newStyleEl);\n    }\n\n    styleEl = newStyleEl;\n\n    return () => {\n      if (styleEl?.parentNode) {\n        styleEl.remove();\n      }\n      styleEl = null;\n      styleTarget = null;\n    };\n  });\n\n  $effect(() => {\n    if (!plugin) return;\n\n    return plugin.onStylesheetInvalidated(() => {\n      if (styleEl) {\n        styleEl.textContent = plugin.getStylesheet();\n      }\n    });\n  });\n\n  $effect(() => {\n    if (!provides) return;\n\n    disabledCategories = provides.getDisabledCategories();\n    hiddenItems = provides.getHiddenItems();\n\n    return provides.onCategoryChanged((event) => {\n      disabledCategories = event.disabledCategories;\n      hiddenItems = event.hiddenItems;\n    });\n  });\n\n  const disabledCategoriesAttr = $derived(\n    disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined,\n  );\n\n  const hiddenItemsAttr = $derived(hiddenItems.length > 0 ? hiddenItems.join(' ') : undefined);\n</script>\n\n<div\n  bind:this={rootElement}\n  {...restProps}\n  {...{ [UI_ATTRIBUTES.ROOT]: '' }}\n  {...disabledCategoriesAttr ? { [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr } : {}}\n  {...hiddenItemsAttr ? { [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr } : {}}\n  class={className}\n  style:container-type=\"inline-size\"\n>\n  {#if children}\n    {@render children()}\n  {/if}\n</div>\n","<script lang=\"ts\">\n  import type { Component, Snippet } from 'svelte';\n  import { provideAnchorRegistry } from './registries/anchor-registry.svelte';\n  import { provideComponentRegistry } from './registries/component-registry.svelte';\n  import { provideRenderers } from './registries/renderers-registry.svelte';\n  import type { UIComponents, UIRenderers } from './types';\n  import AutoMenuRenderer from './auto-menu-renderer.svelte';\n  import UIRoot from './root.svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  /**\n   * UIProvider Props\n   */\n  type ProviderProps = HTMLAttributes<HTMLDivElement> & {\n    children: Snippet;\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?: UIComponents;\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    class?: string;\n  };\n\n  let {\n    children,\n    documentId,\n    components = {},\n    renderers,\n    menuContainer = null,\n    class: className,\n    ...restProps\n  }: ProviderProps = $props();\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   * ```svelte\n   * <EmbedPDF {engine} {plugins}>\n   *   {#snippet children({ pluginsReady, activeDocumentId })}\n   *     {#if pluginsReady && 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   *         {#snippet children()}\n   *           <ViewerLayout />\n   *         {/snippet}\n   *       </UIProvider>\n   *     {/if}\n   *   {/snippet}\n   * </EmbedPDF>\n   * ```\n   */\n\n  // Provide all registries\n  provideAnchorRegistry();\n  provideComponentRegistry(components);\n  provideRenderers(renderers);\n</script>\n\n<UIRoot class={className} {...restProps}>\n  {@render children()}\n  <AutoMenuRenderer {documentId} container={menuContainer} />\n</UIRoot>\n"],"names":["_a"],"mappings":"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"}

package/dist/svelte/types.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'svelte';
-import { ToolbarSchema, PanelSchema, MenuSchema, SelectionMenuSchema } from '../lib';
+import { ToolbarSchema, SidebarSchema, ModalSchema, OverlaySchema, MenuSchema, SelectionMenuSchema } from '../lib';
 import { SelectionMenuPropsBase } from '@embedpdf/utils/svelte';
 export type { SelectionMenuPropsBase };
 export type UIComponents = Record<string, Component<BaseComponentProps>>;
@@ -23,17 +23,40 @@ export interface ToolbarRendererProps {
 }
 export type ToolbarRenderer = Component<ToolbarRendererProps>;
 /**
- * Props for panel renderer
+ * Props for sidebar renderer
  * The app provides a component matching this contract
  */
-export interface PanelRendererProps {
-    schema: PanelSchema;
+export interface SidebarRendererProps {
+    schema: SidebarSchema;
     documentId: string;
     isOpen: boolean;
     onClose: () => void;
     className?: string;
 }
-export type PanelRenderer = Component<PanelRendererProps>;
+export type SidebarRenderer = Component<SidebarRendererProps>;
+/**
+ * Props for modal renderer (with animation lifecycle support)
+ * The app provides a component matching this contract
+ */
+export interface ModalRendererProps {
+    schema: ModalSchema;
+    documentId: string;
+    isOpen: boolean;
+    onClose: () => void;
+    onExited: () => void;
+    className?: string;
+}
+export type ModalRenderer = Component<ModalRendererProps>;
+/**
+ * Props for overlay renderer
+ * The app provides a component matching this contract
+ */
+export interface OverlayRendererProps {
+    schema: OverlaySchema;
+    documentId: string;
+    className?: string;
+}
+export type OverlayRenderer = Component<OverlayRendererProps>;
 /**
  * Props for menu renderer
  * The app provides a component matching this contract
@@ -61,7 +84,9 @@ export type SelectionMenuRenderer = Component<SelectionMenuRendererProps>;
  */
 export interface UIRenderers {
     toolbar: ToolbarRenderer;
-    panel: PanelRenderer;
+    sidebar: SidebarRenderer;
+    modal?: ModalRenderer;
+    overlay?: OverlayRenderer;
     menu: MenuRenderer;
     selectionMenu: SelectionMenuRenderer;
 }

package/dist/vue/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/vue/hooks/use-schema-renderer.d.ts

@@ -2,7 +2,7 @@ import { VNode, MaybeRefOrGetter } from 'vue';
 /**
  * High-level composable 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.
@@ -25,9 +25,9 @@ export declare function useSchemaRenderer(documentId: MaybeRefOrGetter<string>):
      */
     renderToolbar: (placement: "top" | "bottom" | "left" | "right", slot: string) => VNode | 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'
@@ -35,11 +35,28 @@ export declare function useSchemaRenderer(documentId: MaybeRefOrGetter<string>):
      *
      * @example
      * ```vue
-     * <component :is="renderPanel('left', 'main')" />
-     * <component :is="renderPanel('right', 'main')" />
+     * <component :is="renderSidebar('left', 'main')" />
+     * <component :is="renderSidebar('right', 'main')" />
      * ```
      */
-    renderPanel: (placement: "left" | "right" | "top" | "bottom", slot: string) => VNode | null;
+    renderSidebar: (placement: "left" | "right" | "top" | "bottom", slot: string) => VNode | 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
+     * ```vue
+     * <component :is="renderModal()" />
+     * ```
+     */
+    renderModal: () => VNode | null;
     /**
      * Helper: Get all active toolbars for this document
      * Useful for batch rendering or debugging
@@ -51,13 +68,28 @@ export declare function useSchemaRenderer(documentId: MaybeRefOrGetter<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
+     * ```vue
+     * <div class="relative">
+     *   <slot />
+     *   <component :is="renderOverlays()" />
+     * </div>
+     * ```
+     */
+    renderOverlays: () => VNode[] | null;
 };

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

@@ -0,0 +1,39 @@
+import { Ref, InjectionKey } from 'vue';
+export interface UIContainerContextValue {
+    /** Reference to the UIRoot container element */
+    containerRef: Ref<HTMLDivElement | null>;
+    /** Get the container element (may be null if not mounted) */
+    getContainer: () => HTMLDivElement | null;
+}
+export declare const UI_CONTAINER_KEY: InjectionKey<UIContainerContextValue>;
+/**
+ * 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
+ * ```vue
+ * <script setup>
+ * import { useUIContainer } from '@embedpdf/plugin-ui/vue';
+ * import { onMounted, onUnmounted } from 'vue';
+ *
+ * const { containerRef, getContainer } = useUIContainer();
+ *
+ * onMounted(() => {
+ *   const container = getContainer();
+ *   if (!container) return;
+ *
+ *   const observer = new ResizeObserver(() => {
+ *     console.log('Container width:', container.clientWidth);
+ *   });
+ *   observer.observe(container);
+ *
+ *   onUnmounted(() => observer.disconnect());
+ * });
+ * </script>
+ * ```
+ */
+export declare function useUIContainer(): UIContainerContextValue;

package/dist/vue/hooks/use-ui.d.ts

@@ -15,13 +15,16 @@ export declare const useUIState: (documentId: MaybeRefOrGetter<string>) => {
                 readonly isOpen: boolean;
             };
         };
-        readonly activePanels: {
+        readonly activeSidebars: {
             readonly [x: string]: {
-                readonly panelId: string;
+                readonly sidebarId: string;
                 readonly isOpen: boolean;
             };
         };
-        readonly activeModal: string | null;
+        readonly activeModal: {
+            readonly modalId: string;
+            readonly isOpen: boolean;
+        } | null;
         readonly openMenus: {
             readonly [x: string]: {
                 readonly menuId: string;
@@ -29,7 +32,7 @@ export declare const useUIState: (documentId: MaybeRefOrGetter<string>) => {
                 readonly triggeredByItemId?: string | undefined;
             };
         };
-        readonly panelTabs: {
+        readonly sidebarTabs: {
             readonly [x: string]: string;
         };
     } | null, {
@@ -39,13 +42,16 @@ export declare const useUIState: (documentId: MaybeRefOrGetter<string>) => {
                 readonly isOpen: boolean;
             };
         };
-        readonly activePanels: {
+        readonly activeSidebars: {
             readonly [x: string]: {
-                readonly panelId: string;
+                readonly sidebarId: string;
                 readonly isOpen: boolean;
             };
         };
-        readonly activeModal: string | null;
+        readonly activeModal: {
+            readonly modalId: string;
+            readonly isOpen: boolean;
+        } | null;
         readonly openMenus: {
             readonly [x: string]: {
                 readonly menuId: string;
@@ -53,7 +59,7 @@ export declare const useUIState: (documentId: MaybeRefOrGetter<string>) => {
                 readonly triggeredByItemId?: string | undefined;
             };
         };
-        readonly panelTabs: {
+        readonly sidebarTabs: {
             readonly [x: string]: string;
         };
     } | null>>;
@@ -370,15 +376,14 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             } | undefined;
         };
     };
-    readonly panels: {
+    readonly sidebars: {
         readonly [x: string]: {
             readonly id: string;
-            readonly type: "sidebar" | "overlay" | "modal" | "popover";
-            readonly position?: {
+            readonly position: {
                 readonly placement: "left" | "right" | "top" | "bottom";
-                readonly slot?: string | undefined;
+                readonly slot: string;
                 readonly order?: number | undefined;
-            } | undefined;
+            };
             readonly content: {
                 readonly type: "tabs";
                 readonly tabs: readonly {
@@ -403,11 +408,46 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             };
             readonly collapsible?: boolean | undefined;
             readonly defaultOpen?: boolean | undefined;
-            readonly closeOnClickOutside?: boolean | undefined;
             readonly width?: string | undefined;
             readonly height?: string | undefined;
             readonly minWidth?: string | undefined;
             readonly minHeight?: string | undefined;
+            readonly categories?: readonly string[] | undefined;
+            readonly visibilityDependsOn?: {
+                readonly menuId?: string | undefined;
+                readonly itemIds?: readonly string[] | undefined;
+            } | undefined;
+        };
+    };
+    readonly modals: {
+        readonly [x: string]: {
+            readonly id: string;
+            readonly content: {
+                readonly type: "tabs";
+                readonly tabs: readonly {
+                    readonly id: string;
+                    readonly labelKey?: string | undefined;
+                    readonly label?: string | undefined;
+                    readonly icon?: string | undefined;
+                    readonly componentId: string;
+                    readonly categories?: readonly string[] | undefined;
+                    readonly visibilityDependsOn?: {
+                        readonly menuId?: string | undefined;
+                        readonly itemIds?: readonly string[] | undefined;
+                    } | undefined;
+                }[];
+                readonly defaultTab?: string | undefined;
+            } | {
+                readonly type: "component";
+                readonly componentId: string;
+                readonly props?: {
+                    readonly [x: string]: any;
+                } | undefined;
+            };
+            readonly closeOnClickOutside?: boolean | undefined;
+            readonly closeOnEscape?: boolean | undefined;
+            readonly width?: string | undefined;
+            readonly height?: string | undefined;
             readonly maxWidth?: string | undefined;
             readonly maxHeight?: string | undefined;
             readonly categories?: readonly string[] | undefined;
@@ -417,6 +457,33 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             } | undefined;
         };
     };
+    readonly overlays?: {
+        readonly [x: string]: {
+            readonly id: string;
+            readonly position: {
+                readonly anchor: import('../../lib').OverlayAnchor;
+                readonly offset?: {
+                    readonly top?: string | undefined;
+                    readonly right?: string | undefined;
+                    readonly bottom?: string | undefined;
+                    readonly left?: string | undefined;
+                } | undefined;
+            };
+            readonly content: {
+                readonly type: "component";
+                readonly componentId: string;
+                readonly props?: {
+                    readonly [x: string]: any;
+                } | undefined;
+            };
+            readonly defaultEnabled?: boolean | undefined;
+            readonly categories?: readonly string[] | undefined;
+            readonly visibilityDependsOn?: {
+                readonly menuId?: string | undefined;
+                readonly itemIds?: readonly string[] | undefined;
+            } | undefined;
+        };
+    } | undefined;
     readonly selectionMenus: {
         readonly [x: string]: {
             readonly id: string;
@@ -808,15 +875,14 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             } | undefined;
         };
     };
-    readonly panels: {
+    readonly sidebars: {
         readonly [x: string]: {
             readonly id: string;
-            readonly type: "sidebar" | "overlay" | "modal" | "popover";
-            readonly position?: {
+            readonly position: {
                 readonly placement: "left" | "right" | "top" | "bottom";
-                readonly slot?: string | undefined;
+                readonly slot: string;
                 readonly order?: number | undefined;
-            } | undefined;
+            };
             readonly content: {
                 readonly type: "tabs";
                 readonly tabs: readonly {
@@ -841,11 +907,46 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             };
             readonly collapsible?: boolean | undefined;
             readonly defaultOpen?: boolean | undefined;
-            readonly closeOnClickOutside?: boolean | undefined;
             readonly width?: string | undefined;
             readonly height?: string | undefined;
             readonly minWidth?: string | undefined;
             readonly minHeight?: string | undefined;
+            readonly categories?: readonly string[] | undefined;
+            readonly visibilityDependsOn?: {
+                readonly menuId?: string | undefined;
+                readonly itemIds?: readonly string[] | undefined;
+            } | undefined;
+        };
+    };
+    readonly modals: {
+        readonly [x: string]: {
+            readonly id: string;
+            readonly content: {
+                readonly type: "tabs";
+                readonly tabs: readonly {
+                    readonly id: string;
+                    readonly labelKey?: string | undefined;
+                    readonly label?: string | undefined;
+                    readonly icon?: string | undefined;
+                    readonly componentId: string;
+                    readonly categories?: readonly string[] | undefined;
+                    readonly visibilityDependsOn?: {
+                        readonly menuId?: string | undefined;
+                        readonly itemIds?: readonly string[] | undefined;
+                    } | undefined;
+                }[];
+                readonly defaultTab?: string | undefined;
+            } | {
+                readonly type: "component";
+                readonly componentId: string;
+                readonly props?: {
+                    readonly [x: string]: any;
+                } | undefined;
+            };
+            readonly closeOnClickOutside?: boolean | undefined;
+            readonly closeOnEscape?: boolean | undefined;
+            readonly width?: string | undefined;
+            readonly height?: string | undefined;
             readonly maxWidth?: string | undefined;
             readonly maxHeight?: string | undefined;
             readonly categories?: readonly string[] | undefined;
@@ -855,6 +956,33 @@ export declare const useUISchema: () => Readonly<import('vue').Ref<{
             } | undefined;
         };
     };
+    readonly overlays?: {
+        readonly [x: string]: {
+            readonly id: string;
+            readonly position: {
+                readonly anchor: import('../../lib').OverlayAnchor;
+                readonly offset?: {
+                    readonly top?: string | undefined;
+                    readonly right?: string | undefined;
+                    readonly bottom?: string | undefined;
+                    readonly left?: string | undefined;
+                } | undefined;
+            };
+            readonly content: {
+                readonly type: "component";
+                readonly componentId: string;
+                readonly props?: {
+                    readonly [x: string]: any;
+                } | undefined;
+            };
+            readonly defaultEnabled?: boolean | undefined;
+            readonly categories?: readonly string[] | undefined;
+            readonly visibilityDependsOn?: {
+                readonly menuId?: string | undefined;
+                readonly itemIds?: readonly string[] | undefined;
+            } | undefined;
+        };
+    } | undefined;
     readonly selectionMenus: {
         readonly [x: string]: {
             readonly id: string;