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

package/dist/svelte/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-ui.svelte.ts","../../src/svelte/registries/anchor-registry.svelte.ts","../../src/svelte/registries/component-registry.svelte.ts","../../src/svelte/registries/renderers-registry.svelte.ts","../../src/svelte/auto-menu-renderer.svelte","../../src/svelte/root.svelte","../../src/svelte/provider.svelte","../../src/svelte/hooks/use-item-renderer.svelte.ts","../../src/svelte/hooks/use-register-anchor.svelte.ts","../../src/svelte/hooks/use-schema-renderer.svelte.ts","../../src/svelte/hooks/use-selection-menu.svelte.ts"],"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 { 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 { 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","<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","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 { 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 { 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"],"names":["useUIPlugin","usePlugin","UIPlugin","id","useUICapability","useCapability","useUIState","getDocumentId","capability","state","documentId","scopedProvides","$","derived","provides","forDocument","user_effect","docId","set","scope","getState","unsubToolbar","onToolbarChanged","unsubPanel","onPanelChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","ANCHOR_REGISTRY_KEY","Symbol","createAnchorRegistry","anchors","Map","register","itemId","element","key","unregister","delete","getAnchor","get","provideAnchorRegistry","registry","setContext","useAnchorRegistry","getContext","Error","COMPONENT_REGISTRY_KEY","createComponentRegistry","initialComponents","components","Object","entries","component","has","getRegisteredIds","Array","from","keys","provideComponentRegistry","useComponentRegistry","RENDERERS_KEY","provideRenderers","renderers","useRenderers","container","uiState","$$props","anchorRegistry","activeMenu","openMenus","_a","openMenuIds","length","menuId","menuState","triggeredByItemId","anchorEl","schema","getSchema","menuSchema","menuSchemaValue","menus","console","warn","handleClose","closeMenu","MenuRenderer","menu","$$render","consequent","restProps","rest_props","plugin","disabledCategories","proxy","rootElement","styleEl","styleTarget","root","getRootNode","ShadowRoot","document","head","getStyleTarget","existingStyle","querySelector","UI_SELECTORS","STYLES","textContent","getStylesheet","stylesheet","newStyleEl","createElement","setAttribute","UI_ATTRIBUTES","insertBefore","firstChild","appendChild","parentNode","remove","onStylesheetInvalidated","getDisabledCategories","onCategoryChanged","event","disabledCategoriesAttr","join","ROOT","DISABLED_CATEGORIES","bind_this","div","$$value","prop","menuContainer","componentRegistry","getCustomComponent","componentId","Component","error","getItemId","currentElement","item","destroy","getToolbarInfo","placement","slot","slotKey","toolbarSlot","activeToolbars","toolbarSchema","toolbars","toolbarId","permanent","closeToolbarSlot","renderer","toolbar","isOpen","onClose","getPanelInfo","panelSlot","activePanels","panelSchema","panels","panelId","panel","closePanelSlot","getActiveToolbars","map","split","getActivePanels","uiCapability","getMenuIdFn","menuIdValue","selectionMenus","renderFn","currentMenuSchema","currentDocumentId","SelectionMenuRenderer","selectionMenu","props","selected"],"mappings":"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"}

package/dist/svelte/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../lib';
+export * from './hooks';
+export * from './registries';
+export * from './types';
+export { default as UIProvider } from './provider.svelte';
+export { default as AutoMenuRenderer } from './auto-menu-renderer.svelte';

package/dist/svelte/index.js

@@ -0,0 +1,553 @@
+import { UIPlugin, UI_SELECTORS, UI_ATTRIBUTES } from "@embedpdf/plugin-ui";
+export * from "@embedpdf/plugin-ui";
+import * as $ from "svelte/internal/client";
+import { usePlugin, useCapability } from "@embedpdf/core/svelte";
+import { setContext, getContext } from "svelte";
+import "svelte/internal/disclose-version";
+const useUIPlugin = () => usePlugin(UIPlugin.id);
+const useUICapability = () => useCapability(UIPlugin.id);
+const useUIState = (getDocumentId) => {
+  const capability = useUICapability();
+  let state = $.state(null);
+  const documentId = $.derived(getDocumentId);
+  const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
+  $.user_effect(() => {
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      $.set(state, null);
+      return;
+    }
+    const scope = provides.forDocument(docId);
+    $.set(state, scope.getState(), true);
+    const unsubToolbar = scope.onToolbarChanged(() => {
+      $.set(state, scope.getState(), true);
+    });
+    const unsubPanel = scope.onPanelChanged(() => {
+      $.set(state, scope.getState(), true);
+    });
+    const unsubModal = scope.onModalChanged(() => {
+      $.set(state, scope.getState(), true);
+    });
+    const unsubMenu = scope.onMenuChanged(() => {
+      $.set(state, scope.getState(), true);
+    });
+    return () => {
+      unsubToolbar();
+      unsubPanel();
+      unsubModal();
+      unsubMenu();
+    };
+  });
+  return {
+    get provides() {
+      return $.get(scopedProvides);
+    },
+    get state() {
+      return $.get(state);
+    }
+  };
+};
+const useUISchema = () => {
+  const capability = useUICapability();
+  return {
+    get schema() {
+      var _a;
+      return ((_a = capability.provides) == null ? void 0 : _a.getSchema()) ?? null;
+    }
+  };
+};
+const ANCHOR_REGISTRY_KEY = Symbol("AnchorRegistry");
+function createAnchorRegistry() {
+  const anchors = /* @__PURE__ */ new Map();
+  return {
+    register(documentId, itemId, element) {
+      const key = `${documentId}:${itemId}`;
+      anchors.set(key, element);
+    },
+    unregister(documentId, itemId) {
+      const key = `${documentId}:${itemId}`;
+      anchors.delete(key);
+    },
+    getAnchor(documentId, itemId) {
+      const key = `${documentId}:${itemId}`;
+      return anchors.get(key) || null;
+    }
+  };
+}
+function provideAnchorRegistry() {
+  const registry = createAnchorRegistry();
+  setContext(ANCHOR_REGISTRY_KEY, registry);
+  return registry;
+}
+function useAnchorRegistry() {
+  const registry = getContext(ANCHOR_REGISTRY_KEY);
+  if (!registry) {
+    throw new Error("useAnchorRegistry must be used within UIProvider");
+  }
+  return registry;
+}
+function useRegisterAnchor(getDocumentId, getItemId) {
+  const registry = useAnchorRegistry();
+  let currentElement = $.state(null);
+  const documentId = $.derived(getDocumentId);
+  const itemId = $.derived(getItemId);
+  $.user_effect(() => {
+    const docId = $.get(documentId);
+    const item = $.get(itemId);
+    const element = $.get(currentElement);
+    if (element && docId && item) {
+      registry.register(docId, item, element);
+      return () => {
+        registry.unregister(docId, item);
+      };
+    }
+  });
+  const action = (element) => {
+    $.set(currentElement, element, true);
+    return {
+      destroy() {
+        $.set(currentElement, null);
+      }
+    };
+  };
+  return action;
+}
+const COMPONENT_REGISTRY_KEY = Symbol("ComponentRegistry");
+function createComponentRegistry(initialComponents = {}) {
+  const components = new Map(Object.entries(initialComponents));
+  return {
+    register(id, component) {
+      components.set(id, component);
+    },
+    unregister(id) {
+      components.delete(id);
+    },
+    get(id) {
+      return components.get(id);
+    },
+    has(id) {
+      return components.has(id);
+    },
+    getRegisteredIds() {
+      return Array.from(components.keys());
+    }
+  };
+}
+function provideComponentRegistry(initialComponents = {}) {
+  const registry = createComponentRegistry(initialComponents);
+  setContext(COMPONENT_REGISTRY_KEY, registry);
+  return registry;
+}
+function useComponentRegistry() {
+  const registry = getContext(COMPONENT_REGISTRY_KEY);
+  if (!registry) {
+    throw new Error("useComponentRegistry must be used within UIProvider");
+  }
+  return registry;
+}
+function useItemRenderer() {
+  const componentRegistry = useComponentRegistry();
+  return {
+    /**
+     * Get a custom component by ID
+     *
+     * @param componentId - Component ID from schema
+     * @returns Component constructor or undefined if not found
+     *
+     * @example
+     * ```svelte
+     * <script lang="ts">
+     *   const { getCustomComponent } = useItemRenderer();
+     *   const MyComponent = getCustomComponent('my-component-id');
+     * <\/script>
+     *
+     * {#if MyComponent}
+     *   <MyComponent {documentId} {...props} />
+     * {/if}
+     * ```
+     */
+    getCustomComponent: (componentId) => {
+      const Component = componentRegistry.get(componentId);
+      if (!Component) {
+        console.error(`Component "${componentId}" not found in registry`);
+        return void 0;
+      }
+      return Component;
+    }
+  };
+}
+const RENDERERS_KEY = Symbol("Renderers");
+function provideRenderers(renderers) {
+  setContext(RENDERERS_KEY, renderers);
+}
+function useRenderers() {
+  const renderers = getContext(RENDERERS_KEY);
+  if (!renderers) {
+    throw new Error("useRenderers must be used within UIProvider");
+  }
+  return renderers;
+}
+function useSchemaRenderer(getDocumentId) {
+  const renderers = useRenderers();
+  const capability = useUICapability();
+  const uiState = useUIState(getDocumentId);
+  return {
+    /**
+     * Get toolbar information by placement and slot
+     *
+     * @param placement - 'top' | 'bottom' | 'left' | 'right'
+     * @param slot - Slot name (e.g. 'main', 'secondary')
+     * @returns Toolbar info or null if no toolbar in slot
+     */
+    getToolbarInfo: (placement, slot) => {
+      var _a;
+      const schema = (_a = capability.provides) == null ? void 0 : _a.getSchema();
+      const documentId = getDocumentId();
+      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;
+      const slotKey = `${placement}-${slot}`;
+      const toolbarSlot = uiState.state.activeToolbars[slotKey];
+      if (!toolbarSlot) return null;
+      const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];
+      if (!toolbarSchema) {
+        console.warn(`Toolbar "${toolbarSlot.toolbarId}" not found in schema`);
+        return null;
+      }
+      const isClosable = !toolbarSchema.permanent;
+      const handleClose = isClosable ? () => {
+        var _a2;
+        (_a2 = uiState.provides) == null ? void 0 : _a2.closeToolbarSlot(placement, slot);
+      } : void 0;
+      return {
+        renderer: renderers.toolbar,
+        schema: toolbarSchema,
+        documentId,
+        isOpen: toolbarSlot.isOpen,
+        onClose: handleClose
+      };
+    },
+    /**
+     * Get panel information by placement and slot
+     *
+     * @param placement - 'left' | 'right' | 'top' | 'bottom'
+     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')
+     * @returns Panel info or null if no panel in slot
+     */
+    getPanelInfo: (placement, slot) => {
+      var _a;
+      const schema = (_a = capability.provides) == null ? void 0 : _a.getSchema();
+      const documentId = getDocumentId();
+      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;
+      const slotKey = `${placement}-${slot}`;
+      const panelSlot = uiState.state.activePanels[slotKey];
+      if (!panelSlot) return null;
+      const panelSchema = schema.panels[panelSlot.panelId];
+      if (!panelSchema) {
+        console.warn(`Panel "${panelSlot.panelId}" not found in schema`);
+        return null;
+      }
+      const handleClose = () => {
+        var _a2;
+        (_a2 = uiState.provides) == null ? void 0 : _a2.closePanelSlot(placement, slot);
+      };
+      return {
+        renderer: renderers.panel,
+        schema: panelSchema,
+        documentId,
+        isOpen: panelSlot.isOpen,
+        onClose: handleClose
+      };
+    },
+    /**
+     * Helper: Get all active toolbars for this document
+     * Useful for batch rendering or debugging
+     */
+    getActiveToolbars: () => {
+      if (!uiState.state) return [];
+      return Object.entries(uiState.state.activeToolbars).map(([slotKey, toolbarSlot]) => {
+        const [placement, slot] = slotKey.split("-");
+        return {
+          placement,
+          slot,
+          toolbarId: toolbarSlot.toolbarId,
+          isOpen: toolbarSlot.isOpen
+        };
+      });
+    },
+    /**
+     * Helper: Get all active panels for this document
+     * Useful for batch rendering or debugging
+     */
+    getActivePanels: () => {
+      if (!uiState.state) return [];
+      return Object.entries(uiState.state.activePanels).map(([slotKey, panelSlot]) => {
+        const [placement, slot] = slotKey.split("-");
+        return {
+          placement,
+          slot,
+          panelId: panelSlot.panelId,
+          isOpen: panelSlot.isOpen
+        };
+      });
+    }
+  };
+}
+function useSelectionMenu(menuId, getDocumentId) {
+  const uiCapability = useUICapability();
+  const renderers = useRenderers();
+  const getMenuIdFn = typeof menuId === "function" ? menuId : () => menuId;
+  const menuIdValue = $.derived(getMenuIdFn);
+  const documentId = $.derived(getDocumentId);
+  const schema = $.derived(() => {
+    var _a;
+    return (_a = uiCapability.provides) == null ? void 0 : _a.getSchema();
+  });
+  const menuSchema = $.derived(() => {
+    var _a, _b;
+    return (_b = (_a = $.get(schema)) == null ? void 0 : _a.selectionMenus) == null ? void 0 : _b[$.get(menuIdValue)];
+  });
+  const renderFn = $.derived(() => {
+    if (!$.get(menuSchema)) return void 0;
+    const currentMenuSchema = $.get(menuSchema);
+    const currentDocumentId = $.get(documentId);
+    const SelectionMenuRenderer = renderers.selectionMenu;
+    return (props) => {
+      if (!props.selected) return null;
+      return {
+        component: SelectionMenuRenderer,
+        props: {
+          schema: currentMenuSchema,
+          documentId: currentDocumentId,
+          props
+        }
+      };
+    };
+  });
+  return {
+    get renderFn() {
+      return $.get(renderFn);
+    }
+  };
+}
+function Auto_menu_renderer($$anchor, $$props) {
+  $.push($$props, true);
+  let container = $.prop($$props, "container", 3, null);
+  const uiState = useUIState(() => $$props.documentId);
+  const capability = useUICapability();
+  const anchorRegistry = useAnchorRegistry();
+  const renderers = useRenderers();
+  const activeMenu = $.derived(() => {
+    var _a;
+    const openMenus = ((_a = uiState.state) == null ? void 0 : _a.openMenus) || {};
+    const openMenuIds = Object.keys(openMenus);
+    if (openMenuIds.length === 0) return null;
+    const menuId = openMenuIds[0];
+    if (!menuId) return null;
+    const menuState = openMenus[menuId];
+    if (!menuState || !menuState.triggeredByItemId) return null;
+    const anchor = anchorRegistry.getAnchor($$props.documentId, menuState.triggeredByItemId);
+    return { menuId, anchorEl: anchor };
+  });
+  const schema = $.derived(() => {
+    var _a;
+    return (_a = capability.provides) == null ? void 0 : _a.getSchema();
+  });
+  const menuSchema = $.derived(() => {
+    if (!$.get(activeMenu) || !$.get(schema)) return null;
+    const menuSchemaValue = $.get(schema).menus[$.get(activeMenu).menuId];
+    if (!menuSchemaValue) {
+      console.warn(`Menu "${$.get(activeMenu).menuId}" not found in schema`);
+      return null;
+    }
+    return menuSchemaValue;
+  });
+  const handleClose = () => {
+    var _a;
+    if ($.get(activeMenu)) {
+      (_a = uiState.provides) == null ? void 0 : _a.closeMenu($.get(activeMenu).menuId);
+    }
+  };
+  const MenuRenderer = renderers.menu;
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      MenuRenderer($$anchor2, {
+        get schema() {
+          return $.get(menuSchema);
+        },
+        get documentId() {
+          return $$props.documentId;
+        },
+        get anchorEl() {
+          return $.get(activeMenu).anchorEl;
+        },
+        onClose: handleClose,
+        get container() {
+          return container();
+        }
+      });
+    };
+    $.if(node, ($$render) => {
+      if ($.get(activeMenu) && $.get(menuSchema) && MenuRenderer) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_1$1 = $.from_html(`<div><!></div>`);
+function Root($$anchor, $$props) {
+  $.push($$props, true);
+  let restProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children", "class"]);
+  const { plugin } = useUIPlugin();
+  const { provides } = useUICapability();
+  let disabledCategories = $.state($.proxy([]));
+  let rootElement = $.state(null);
+  let styleEl = null;
+  let styleTarget = null;
+  function getStyleTarget(element) {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+      return root;
+    }
+    return document.head;
+  }
+  $.user_effect(() => {
+    if (!$.get(rootElement) || !plugin) {
+      styleTarget = null;
+      return;
+    }
+    styleTarget = getStyleTarget($.get(rootElement));
+    const existingStyle = styleTarget.querySelector(UI_SELECTORS.STYLES);
+    if (existingStyle) {
+      styleEl = existingStyle;
+      existingStyle.textContent = plugin.getStylesheet();
+      return;
+    }
+    const stylesheet = plugin.getStylesheet();
+    const newStyleEl = document.createElement("style");
+    newStyleEl.setAttribute(UI_ATTRIBUTES.STYLES, "");
+    newStyleEl.textContent = stylesheet;
+    if (styleTarget instanceof ShadowRoot) {
+      styleTarget.insertBefore(newStyleEl, styleTarget.firstChild);
+    } else {
+      styleTarget.appendChild(newStyleEl);
+    }
+    styleEl = newStyleEl;
+    return () => {
+      if (styleEl == null ? void 0 : styleEl.parentNode) {
+        styleEl.remove();
+      }
+      styleEl = null;
+      styleTarget = null;
+    };
+  });
+  $.user_effect(() => {
+    if (!plugin) return;
+    return plugin.onStylesheetInvalidated(() => {
+      if (styleEl) {
+        styleEl.textContent = plugin.getStylesheet();
+      }
+    });
+  });
+  $.user_effect(() => {
+    if (!provides) return;
+    $.set(disabledCategories, provides.getDisabledCategories(), true);
+    return provides.onCategoryChanged((event) => {
+      $.set(disabledCategories, event.disabledCategories, true);
+    });
+  });
+  const disabledCategoriesAttr = $.derived(() => $.get(disabledCategories).length > 0 ? $.get(disabledCategories).join(" ") : void 0);
+  var div = root_1$1();
+  $.attribute_effect(div, () => ({
+    ...restProps,
+    ...{ [UI_ATTRIBUTES.ROOT]: "" },
+    ...$.get(disabledCategoriesAttr) ? {
+      [UI_ATTRIBUTES.DISABLED_CATEGORIES]: $.get(disabledCategoriesAttr)
+    } : {},
+    class: $$props.class,
+    [$.STYLE]: { "container-type": "inline-size" }
+  }));
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_1 = $.first_child(fragment);
+      $.snippet(node_1, () => $$props.children);
+      $.append($$anchor2, fragment);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.children) $$render(consequent);
+    });
+  }
+  $.reset(div);
+  $.bind_this(div, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root_1 = $.from_html(`<!> <!>`, 1);
+function Provider($$anchor, $$props) {
+  $.push($$props, true);
+  let components = $.prop($$props, "components", 19, () => ({})), menuContainer = $.prop($$props, "menuContainer", 3, null), restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "children",
+    "documentId",
+    "components",
+    "renderers",
+    "menuContainer",
+    "class"
+  ]);
+  provideAnchorRegistry();
+  provideComponentRegistry(components());
+  provideRenderers($$props.renderers);
+  Root($$anchor, $.spread_props(
+    {
+      get class() {
+        return $$props.class;
+      }
+    },
+    () => restProps,
+    {
+      children: ($$anchor2, $$slotProps) => {
+        var fragment_1 = root_1();
+        var node = $.first_child(fragment_1);
+        $.snippet(node, () => $$props.children);
+        var node_1 = $.sibling(node, 2);
+        Auto_menu_renderer(node_1, {
+          get documentId() {
+            return $$props.documentId;
+          },
+          get container() {
+            return menuContainer();
+          }
+        });
+        $.append($$anchor2, fragment_1);
+      },
+      $$slots: { default: true }
+    }
+  ));
+  $.pop();
+}
+export {
+  Auto_menu_renderer as AutoMenuRenderer,
+  Provider as UIProvider,
+  createAnchorRegistry,
+  createComponentRegistry,
+  provideAnchorRegistry,
+  provideComponentRegistry,
+  provideRenderers,
+  useAnchorRegistry,
+  useComponentRegistry,
+  useItemRenderer,
+  useRegisterAnchor,
+  useRenderers,
+  useSchemaRenderer,
+  useSelectionMenu,
+  useUICapability,
+  useUIPlugin,
+  useUISchema,
+  useUIState
+};
+//# sourceMappingURL=index.js.map