@embedpdf/plugin-ui 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/preact/index.cjs +1 -1
  2. package/dist/preact/index.cjs.map +1 -1
  3. package/dist/preact/index.js +39 -43
  4. package/dist/preact/index.js.map +1 -1
  5. package/dist/react/index.cjs +1 -1
  6. package/dist/react/index.cjs.map +1 -1
  7. package/dist/react/index.js +39 -43
  8. package/dist/react/index.js.map +1 -1
  9. package/package.json +12 -12
package/dist/preact/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),n=require("@embedpdf/plugin-ui"),t=require("preact"),r=require("preact/hooks"),o=require("preact/jsx-runtime"),s=()=>e.useCapability(n.UIPlugin.id),u=()=>e.usePlugin(n.UIPlugin.id),l=e=>{const{provides:n}=s(),[t,o]=r.useState(null);return r.useEffect(()=>{if(!n)return;const t=n.forDocument(e);o(t.getState());const r=t.onToolbarChanged(()=>o(t.getState())),s=t.onSidebarChanged(()=>o(t.getState())),u=t.onModalChanged(()=>o(t.getState())),l=t.onMenuChanged(()=>o(t.getState()));return()=>{r(),s(),u(),l()}},[n,e]),t},c=t.createContext(null);const i=t.createContext(null);function d({children:e}){const n=r.useRef(new Map),t={register:r.useCallback((e,t,r)=>{const o=`${e}:${t}`;n.current.set(o,r)},[]),unregister:r.useCallback((e,t)=>{const r=`${e}:${t}`;n.current.delete(r)},[]),getAnchor:r.useCallback((e,t)=>{const r=`${e}:${t}`;return n.current.get(r)||null},[])};return o.jsx(i.Provider,{value:t,children:e})}function a(){const e=r.useContext(i);if(!e)throw new Error("useAnchorRegistry must be used within UIProvider");return e}const f=t.createContext(null);function m({children:e,initialComponents:n={}}){const t=r.useRef(new Map(Object.entries(n))),s={register:r.useCallback((e,n)=>{t.current.set(e,n)},[]),unregister:r.useCallback(e=>{t.current.delete(e)},[]),get:r.useCallback(e=>t.current.get(e),[]),has:r.useCallback(e=>t.current.has(e),[]),getRegisteredIds:r.useCallback(()=>Array.from(t.current.keys()),[])};return o.jsx(f.Provider,{value:s,children:e})}function p(){const e=r.useContext(f);if(!e)throw new Error("useComponentRegistry must be used within UIProvider");return e}const h=t.createContext(null);function g({children:e,renderers:n}){return o.jsx(h.Provider,{value:n,children:e})}function v(){const e=r.useContext(h);if(!e)throw new Error("useRenderers must be used within UIProvider");return e}function b({container:e,documentId:n}){const t=l(n),{provides:u}=s(),c=a(),i=v(),[d,f]=r.useState(null),m=(null==t?void 0:t.openMenus)||{},p=null==u?void 0:u.getSchema();r.useEffect(()=>{const e=Object.keys(m);if(e.length>0){const t=e[0];if(!t)return void f(null);const r=m[t];if(r&&r.triggeredByItemId){const e=c.getAnchor(n,r.triggeredByItemId);f({menuId:t,anchorEl:e})}else f(null)}else f(null)},[m,c,n]);if(!d||!p)return null;const h=p.menus[d.menuId];if(!h)return console.warn(`Menu "${d.menuId}" not found in schema`),null;const g=i.menu;return o.jsx(g,{schema:h,documentId:n,anchorEl:d.anchorEl,onClose:()=>{d&&(null==u||u.forDocument(n).closeMenu(d.menuId))},container:e})}function I({children:e,style:t,...l}){const{plugin:i}=u(),{provides:d}=s(),[a,f]=r.useState([]),[m,p]=r.useState([]),h=r.useRef(null),g=r.useRef(null),v=r.useRef(null),b=r.useRef(null),I=r.useMemo(()=>({containerRef:b,getContainer:()=>b.current}),[]),C=r.useCallback(e=>{const t=v.current;if(v.current=e,b.current=e,e&&e!==t&&i){const t=function(e){const n=e.getRootNode();return n instanceof ShadowRoot?n:document.head}(e);g.current=t;const r=t.querySelector(n.UI_SELECTORS.STYLES);if(r)return h.current=r,void(r.textContent=i.getStylesheet());const o=i.getStylesheet(),s=document.createElement("style");s.setAttribute(n.UI_ATTRIBUTES.STYLES,""),s.textContent=o,t instanceof ShadowRoot?t.insertBefore(s,t.firstChild):t.appendChild(s),h.current=s}},[i]);r.useEffect(()=>()=>{var e;(null==(e=h.current)?void 0:e.parentNode)&&!v.current&&h.current.remove(),h.current=null,g.current=null},[]),r.useEffect(()=>{if(i)return i.onStylesheetInvalidated(()=>{h.current&&(h.current.textContent=i.getStylesheet())})},[i]),r.useEffect(()=>{if(d)return f(d.getDisabledCategories()),p(d.getHiddenItems()),d.onCategoryChanged(({disabledCategories:e,hiddenItems:n})=>{f(e),p(n)})},[d]);const x=r.useMemo(()=>a.length>0?a.join(" "):void 0,[a]),S=r.useMemo(()=>m.length>0?m.join(" "):void 0,[m]),y=r.useMemo(()=>{const e={containerType:"inline-size"};return t&&"object"==typeof t?{...e,...t}:e},[t]),R={[n.UI_ATTRIBUTES.ROOT]:"",[n.UI_ATTRIBUTES.DISABLED_CATEGORIES]:x,[n.UI_ATTRIBUTES.HIDDEN_ITEMS]:S};return o.jsx(c.Provider,{value:I,children:o.jsx("div",{ref:C,...R,...l,style:y,children:e})})}exports.AnchorRegistryProvider=d,exports.ComponentRegistryProvider=m,exports.RenderersProvider=g,exports.UIContainerContext=c,exports.UIProvider=function({children:e,documentId:n,components:t={},renderers:r,menuContainer:s,...u}){return o.jsx(d,{children:o.jsx(m,{initialComponents:t,children:o.jsx(g,{renderers:r,children:o.jsxs(I,{...u,children:[e,o.jsx(b,{documentId:n,container:s})]})})})})},exports.useAnchorRegistry=a,exports.useComponentRegistry=p,exports.useItemRenderer=function(){const e=p();return{renderCustomComponent:(n,t,r)=>{const s=e.get(n);return s?o.jsx(s,{documentId:t,...r||{}}):(console.error(`Component "${n}" not found in registry`),null)}}},exports.useRegisterAnchor=function(e,n){const t=a(),o=r.useRef(null),s=r.useRef(e),u=r.useRef(n);return s.current=e,u.current=n,r.useCallback(e=>{const n=o.current;o.current=e,e?e!==n&&t.register(s.current,u.current,e):n&&t.unregister(s.current,u.current)},[t])},exports.useRenderers=v,exports.useSchemaRenderer=function(e){const n=v(),{provides:t}=s(),r=null==t?void 0:t.getSchema(),u=l(e);return{renderToolbar:(s,l)=>{if(!r||!t||!u)return null;const c=`${s}-${l}`,i=u.activeToolbars[c];if(!i)return null;const d=r.toolbars[i.toolbarId];if(!d)return console.warn(`Toolbar "${i.toolbarId}" not found in schema`),null;const a=!d.permanent?()=>{t.forDocument(e).closeToolbarSlot(s,l)}:void 0,f=n.toolbar;return o.jsx(f,{schema:d,documentId:e,isOpen:i.isOpen,onClose:a},i.toolbarId)},renderSidebar:(s,l)=>{var c;if(!r||!t||!u)return null;const i=`${s}-${l}`,d=u.activeSidebars[i];if(!d)return null;const a=null==(c=r.sidebars)?void 0:c[d.sidebarId];if(!a)return console.warn(`Sidebar "${d.sidebarId}" not found in schema`),null;const f=n.sidebar;return o.jsx(f,{schema:a,documentId:e,isOpen:d.isOpen,onClose:()=>{t.forDocument(e).closeSidebarSlot(s,l)}},d.sidebarId)},renderModal:()=>{var s;if(!r||!t||!(null==u?void 0:u.activeModal))return null;const{modalId:l,isOpen:c}=u.activeModal,i=null==(s=r.modals)?void 0:s[l];if(!i)return console.warn(`Modal "${l}" not found in schema`),null;const d=n.modal;return d?o.jsx(d,{schema:i,documentId:e,isOpen:c,onClose:()=>{t.forDocument(e).closeModal()},onExited:()=>{t.forDocument(e).clearModal()}},l):(console.warn("No modal renderer registered"),null)},getActiveToolbars:()=>u?Object.entries(u.activeToolbars).map(([e,n])=>{const[t,r]=e.split("-");return{placement:t,slot:r,toolbarId:n.toolbarId,isOpen:n.isOpen}}):[],getActiveSidebars:()=>u?Object.entries(u.activeSidebars).map(([e,n])=>{const[t,r]=e.split("-");return{placement:t,slot:r,sidebarId:n.sidebarId,isOpen:n.isOpen}}):[],renderOverlays:()=>{if(!(null==r?void 0:r.overlays)||!t)return null;const s=n.overlay;if(!s)return null;const u=Object.values(r.overlays);return 0===u.length?null:o.jsx(o.Fragment,{children:u.map(n=>o.jsx(s,{schema:n,documentId:e},n.id))})}}},exports.useSelectionMenu=function(e,n){var t;const{provides:u}=s(),l=v(),c=r.useCallback(t=>{var r;const s=null==u?void 0:u.getSchema(),c=null==(r=null==s?void 0:s.selectionMenus)?void 0:r[e];if(!c)return null;if(!t.selected)return null;const i=l.selectionMenu;return o.jsx(i,{schema:c,documentId:n,props:t})},[u,l,e,n]),i=null==u?void 0:u.getSchema();if(null==(t=null==i?void 0:i.selectionMenus)?void 0:t[e])return c},exports.useUICapability=s,exports.useUIContainer=function(){const e=r.useContext(c);if(!e)throw new Error("useUIContainer must be used within a UIProvider");return e},exports.useUIPlugin=u,exports.useUISchema=()=>{const{provides:e}=s();return(null==e?void 0:e.getSchema())??null},exports.useUIState=l,Object.keys(n).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})});
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),n=require("@embedpdf/plugin-ui"),t=require("preact"),r=require("preact/hooks"),o=require("preact/jsx-runtime"),s=()=>e.useCapability(n.UIPlugin.id),u=()=>e.usePlugin(n.UIPlugin.id),l=e=>{const{provides:n}=s(),[t,o]=r.useState(null);return r.useEffect(()=>{if(!n)return;const t=n.forDocument(e);o(t.getState());const r=t.onToolbarChanged(()=>o(t.getState())),s=t.onSidebarChanged(()=>o(t.getState())),u=t.onModalChanged(()=>o(t.getState())),l=t.onMenuChanged(()=>o(t.getState()));return()=>{r(),s(),u(),l()}},[n,e]),t},c=t.createContext(null);const i=t.createContext(null);function a({children:e}){const n=r.useRef(new Map),t={register:r.useCallback((e,t,r)=>{const o=`${e}:${t}`;n.current.set(o,r)},[]),unregister:r.useCallback((e,t)=>{const r=`${e}:${t}`;n.current.delete(r)},[]),getAnchor:r.useCallback((e,t)=>{const r=`${e}:${t}`;return n.current.get(r)||null},[])};return o.jsx(i.Provider,{value:t,children:e})}function d(){const e=r.useContext(i);if(!e)throw new Error("useAnchorRegistry must be used within UIProvider");return e}const m=t.createContext(null);function f({children:e,initialComponents:n={}}){const t=r.useRef(new Map(Object.entries(n))),s={register:r.useCallback((e,n)=>{t.current.set(e,n)},[]),unregister:r.useCallback(e=>{t.current.delete(e)},[]),get:r.useCallback(e=>t.current.get(e),[]),has:r.useCallback(e=>t.current.has(e),[]),getRegisteredIds:r.useCallback(()=>Array.from(t.current.keys()),[])};return o.jsx(m.Provider,{value:s,children:e})}function p(){const e=r.useContext(m);if(!e)throw new Error("useComponentRegistry must be used within UIProvider");return e}const h=t.createContext(null);function g({children:e,renderers:n}){return o.jsx(h.Provider,{value:n,children:e})}function b(){const e=r.useContext(h);if(!e)throw new Error("useRenderers must be used within UIProvider");return e}function v({container:e,documentId:n}){const t=l(n),{provides:u}=s(),c=d(),i=b(),[a,m]=r.useState(null),f=(null==t?void 0:t.openMenus)||{},p=null==u?void 0:u.getSchema();r.useEffect(()=>{const e=Object.keys(f);if(e.length>0){const t=e[0];if(!t)return void m(null);const r=f[t];if(r&&r.triggeredByItemId){const e=c.getAnchor(n,r.triggeredByItemId);m({menuId:t,anchorEl:e})}else m(null)}else m(null)},[f,c,n]);if(!a||!p)return null;const h=p.menus[a.menuId];if(!h)return console.warn(`Menu "${a.menuId}" not found in schema`),null;const g=i.menu;return o.jsx(g,{schema:h,documentId:n,anchorEl:a.anchorEl,onClose:()=>{a&&(null==u||u.forDocument(n).closeMenu(a.menuId))},container:e})}function I({children:e,style:t,...l}){const{plugin:i}=u(),{provides:a}=s(),[d,m]=r.useState([]),[f,p]=r.useState([]),h=r.useRef(null),g=r.useRef(null),b=r.useRef(null),v=r.useRef(null),I=r.useMemo(()=>({containerRef:v,getContainer:()=>v.current}),[]),x=r.useCallback(e=>{const t=b.current;if(b.current=e,v.current=e,e&&e!==t&&i){const t=function(e){const n=e.getRootNode();return n instanceof ShadowRoot?n:document.head}(e);g.current=t;const r=t.querySelector(n.UI_SELECTORS.STYLES);if(r)return h.current=r,void(r.textContent=i.getStylesheet());const o=i.getStylesheet(),s=document.createElement("style");s.setAttribute(n.UI_ATTRIBUTES.STYLES,""),s.textContent=o,t instanceof ShadowRoot?t.insertBefore(s,t.firstChild):t.appendChild(s),h.current=s}},[i]);r.useEffect(()=>()=>{var e;(null==(e=h.current)?void 0:e.parentNode)&&!b.current&&h.current.remove(),h.current=null,g.current=null},[]),r.useEffect(()=>{if(i)return i.onStylesheetInvalidated(()=>{h.current&&(h.current.textContent=i.getStylesheet())})},[i]),r.useEffect(()=>{if(a)return m(a.getDisabledCategories()),p(a.getHiddenItems()),a.onCategoryChanged(({disabledCategories:e,hiddenItems:n})=>{m(e),p(n)})},[a]);const C=r.useMemo(()=>d.length>0?d.join(" "):void 0,[d]),S=r.useMemo(()=>f.length>0?f.join(" "):void 0,[f]),y=r.useMemo(()=>{const e={containerType:"inline-size"};return t&&"object"==typeof t?{...e,...t}:e},[t]),j={[n.UI_ATTRIBUTES.ROOT]:"",[n.UI_ATTRIBUTES.DISABLED_CATEGORIES]:C,[n.UI_ATTRIBUTES.HIDDEN_ITEMS]:S};return o.jsx(c.Provider,{value:I,children:o.jsx("div",{ref:x,...j,...l,style:y,children:e})})}exports.AnchorRegistryProvider=a,exports.ComponentRegistryProvider=f,exports.RenderersProvider=g,exports.UIContainerContext=c,exports.UIProvider=function({children:e,documentId:n,components:t={},renderers:r,menuContainer:s,...u}){return o.jsx(a,{children:o.jsx(f,{initialComponents:t,children:o.jsx(g,{renderers:r,children:o.jsxs(I,{...u,children:[e,o.jsx(v,{documentId:n,container:s})]})})})})},exports.useAnchorRegistry=d,exports.useComponentRegistry=p,exports.useItemRenderer=function(){const e=p();return{renderCustomComponent:(n,t,r)=>{const s=e.get(n);return s?o.jsx(s,{documentId:t,...r||{}}):(console.error(`Component "${n}" not found in registry`),null)}}},exports.useRegisterAnchor=function(e,n){const t=d(),o=r.useRef(null),s=r.useRef(e),u=r.useRef(n);return s.current=e,u.current=n,r.useCallback(e=>{const n=o.current;o.current=e,e?e!==n&&t.register(s.current,u.current,e):n&&t.unregister(s.current,u.current)},[t])},exports.useRenderers=b,exports.useSchemaRenderer=function(e){const n=b(),{provides:r}=s(),u=null==r?void 0:r.getSchema(),c=l(e);return{renderToolbar:(s,l)=>{const i=`${s}-${l}`;if(!u||!r||!c)return null;const a=c.activeToolbars[i],d=a?u.toolbars[a.toolbarId]:null;a&&!d&&console.warn(`Toolbar "${a.toolbarId}" not found in schema`);const m=!!d&&!d.permanent?()=>r.forDocument(e).closeToolbarSlot(s,l):void 0,f=n.toolbar;return o.jsx(t.Fragment,{children:a&&d&&o.jsx(f,{schema:d,documentId:e,isOpen:a.isOpen,onClose:m})},`toolbar-slot-${i}`)},renderSidebar:(s,l)=>{var i;const a=`${s}-${l}`;if(!u||!r||!c)return null;const d=c.activeSidebars[a],m=d?null==(i=u.sidebars)?void 0:i[d.sidebarId]:null;d&&!m&&console.warn(`Sidebar "${d.sidebarId}" not found in schema`);const f=n.sidebar;return o.jsx(t.Fragment,{children:d&&m&&o.jsx(f,{schema:m,documentId:e,isOpen:d.isOpen,onClose:()=>{r.forDocument(e).closeSidebarSlot(s,l)}})},`sidebar-slot-${a}`)},renderModal:()=>{var s;if(!u||!r||!c)return null;const l=n.modal;if(!l)return null;const i=c.activeModal,a=i?null==(s=u.modals)?void 0:s[i.modalId]:null;i&&!a&&console.warn(`Modal "${i.modalId}" not found in schema`);return o.jsx(t.Fragment,{children:i&&a&&o.jsx(l,{schema:a,documentId:e,isOpen:i.isOpen,onClose:()=>{r.forDocument(e).closeModal()},onExited:()=>{r.forDocument(e).clearModal()}})},"modal-slot")},getActiveToolbars:()=>c?Object.entries(c.activeToolbars).map(([e,n])=>{const[t,r]=e.split("-");return{placement:t,slot:r,toolbarId:n.toolbarId,isOpen:n.isOpen}}):[],getActiveSidebars:()=>c?Object.entries(c.activeSidebars).map(([e,n])=>{const[t,r]=e.split("-");return{placement:t,slot:r,sidebarId:n.sidebarId,isOpen:n.isOpen}}):[],renderOverlays:()=>{if(!u||!r)return null;const s=n.overlay;if(!s)return null;const l=u.overlays?Object.values(u.overlays):[];return o.jsx(t.Fragment,{children:l.map(n=>o.jsx(s,{schema:n,documentId:e},n.id))},"overlays-slot")}}},exports.useSelectionMenu=function(e,n){var t;const{provides:u}=s(),l=b(),c=r.useCallback(t=>{var r;const s=null==u?void 0:u.getSchema(),c=null==(r=null==s?void 0:s.selectionMenus)?void 0:r[e];if(!c)return null;if(!t.selected)return null;const i=l.selectionMenu;return o.jsx(i,{schema:c,documentId:n,props:t})},[u,l,e,n]),i=null==u?void 0:u.getSchema();if(null==(t=null==i?void 0:i.selectionMenus)?void 0:t[e])return c},exports.useUICapability=s,exports.useUIContainer=function(){const e=r.useContext(c);if(!e)throw new Error("useUIContainer must be used within a UIProvider");return e},exports.useUIPlugin=u,exports.useUISchema=()=>{const{provides:e}=s();return(null==e?void 0:e.getSchema())??null},exports.useUIState=l,Object.keys(n).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})});
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/preact/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-ui-container.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/registries/component-registry.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { UIPlugin } from '@embedpdf/plugin-ui';\nimport { useState, useEffect } from '@framework';\nimport { UIDocumentState, UISchema } from '@embedpdf/plugin-ui';\n\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Get UI state for a document\n */\nexport const useUIState = (documentId: string) => {\n const { provides } = useUICapability();\n const [state, setState] = useState<UIDocumentState | null>(null);\n\n useEffect(() => {\n if (!provides) return;\n\n const scope = provides.forDocument(documentId);\n setState(scope.getState());\n\n // Subscribe to changes\n const unsubToolbar = scope.onToolbarChanged(() => setState(scope.getState()));\n const unsubSidebar = scope.onSidebarChanged(() => setState(scope.getState()));\n const unsubModal = scope.onModalChanged(() => setState(scope.getState()));\n const unsubMenu = scope.onMenuChanged(() => setState(scope.getState()));\n\n return () => {\n unsubToolbar();\n unsubSidebar();\n unsubModal();\n unsubMenu();\n };\n }, [provides, documentId]);\n\n return state;\n};\n\n/**\n * Get UI schema\n */\nexport const useUISchema = (): UISchema | null => {\n const { provides } = useUICapability();\n return provides?.getSchema() ?? null;\n};\n","import { createContext, useContext, RefObject } from '@framework';\n\nexport interface UIContainerContextValue {\n /** Reference to the UIRoot container element */\n containerRef: RefObject<HTMLDivElement>;\n /** Get the container element (may be null if not mounted) */\n getContainer: () => HTMLDivElement | null;\n}\n\nexport const UIContainerContext = createContext<UIContainerContextValue | null>(null);\n\n/**\n * Hook to access the UI container element.\n *\n * This provides access to the UIRoot container for:\n * - Container query based responsiveness\n * - Portaling elements to the root\n * - Measuring container dimensions\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { containerRef, getContainer } = useUIContainer();\n *\n * // Use containerRef for ResizeObserver\n * useEffect(() => {\n * const container = getContainer();\n * if (!container) return;\n *\n * const observer = new ResizeObserver(() => {\n * console.log('Container width:', container.clientWidth);\n * });\n * observer.observe(container);\n * return () => observer.disconnect();\n * }, [getContainer]);\n *\n * // Or portal to the container\n * return createPortal(<Modal />, getContainer()!);\n * }\n * ```\n */\nexport function useUIContainer(): UIContainerContextValue {\n const context = useContext(UIContainerContext);\n if (!context) {\n throw new Error('useUIContainer must be used within a UIProvider');\n }\n return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ReactNode } from '@framework';\n\n/**\n * Anchor Registry\n *\n * Tracks DOM elements for menu positioning.\n * Each anchor is scoped by documentId and itemId.\n */\nexport interface AnchorRegistry {\n register(documentId: string, itemId: string, element: HTMLElement): void;\n unregister(documentId: string, itemId: string): void;\n getAnchor(documentId: string, itemId: string): HTMLElement | null;\n}\n\nconst AnchorRegistryContext = createContext<AnchorRegistry | null>(null);\n\nexport function AnchorRegistryProvider({ children }: { children: ReactNode }) {\n const anchorsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n const registry: AnchorRegistry = {\n register: useCallback((documentId: string, itemId: string, element: HTMLElement) => {\n const key = `${documentId}:${itemId}`;\n anchorsRef.current.set(key, element);\n }, []),\n\n unregister: useCallback((documentId: string, itemId: string) => {\n const key = `${documentId}:${itemId}`;\n anchorsRef.current.delete(key);\n }, []),\n\n getAnchor: useCallback((documentId: string, itemId: string) => {\n const key = `${documentId}:${itemId}`;\n return anchorsRef.current.get(key) || null;\n }, []),\n };\n\n return (\n <AnchorRegistryContext.Provider value={registry}>{children}</AnchorRegistryContext.Provider>\n );\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n const context = useContext(AnchorRegistryContext);\n if (!context) {\n throw new Error('useAnchorRegistry must be used within UIProvider');\n }\n return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ComponentType, ReactNode } from '@framework';\nimport { BaseComponentProps } from '../types';\n\n/**\n * Component Registry\n *\n * Stores custom components that can be referenced in the UI schema.\n */\nexport interface ComponentRegistry {\n register(id: string, component: ComponentType<BaseComponentProps>): void;\n unregister(id: string): void;\n get(id: string): ComponentType<BaseComponentProps> | undefined;\n has(id: string): boolean;\n getRegisteredIds(): string[];\n}\n\nconst ComponentRegistryContext = createContext<ComponentRegistry | null>(null);\n\nexport interface ComponentRegistryProviderProps {\n children: ReactNode;\n initialComponents?: Record<string, ComponentType<BaseComponentProps>>;\n}\n\nexport function ComponentRegistryProvider({\n children,\n initialComponents = {},\n}: ComponentRegistryProviderProps) {\n const componentsRef = useRef<Map<string, ComponentType<BaseComponentProps>>>(\n new Map(Object.entries(initialComponents)),\n );\n\n const registry: ComponentRegistry = {\n register: useCallback((id: string, component: ComponentType<BaseComponentProps>) => {\n componentsRef.current.set(id, component);\n }, []),\n\n unregister: useCallback((id: string) => {\n componentsRef.current.delete(id);\n }, []),\n\n get: useCallback((id: string) => {\n return componentsRef.current.get(id);\n }, []),\n\n has: useCallback((id: string) => {\n return componentsRef.current.has(id);\n }, []),\n\n getRegisteredIds: useCallback(() => {\n return Array.from(componentsRef.current.keys());\n }, []),\n };\n\n return (\n <ComponentRegistryContext.Provider value={registry}>\n {children}\n </ComponentRegistryContext.Provider>\n );\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n const context = useContext(ComponentRegistryContext);\n if (!context) {\n throw new Error('useComponentRegistry must be used within UIProvider');\n }\n return context;\n}\n","import { createContext, useContext } from '@framework';\nimport type { ReactNode } from '@framework';\nimport { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RenderersContext = createContext<UIRenderers | null>(null);\n\nexport interface RenderersProviderProps {\n children: ReactNode;\n renderers: UIRenderers;\n}\n\nexport function RenderersProvider({ children, renderers }: RenderersProviderProps) {\n return <RenderersContext.Provider value={renderers}>{children}</RenderersContext.Provider>;\n}\n\nexport function useRenderers(): UIRenderers {\n const context = useContext(RenderersContext);\n if (!context) {\n throw new Error('useRenderers must be used within UIProvider');\n }\n return context;\n}\n","import { useState, useEffect } from '@framework';\nimport { useUIState, useUICapability } from './hooks/use-ui';\nimport { useAnchorRegistry } from './registries/anchor-registry';\nimport { useRenderers } from './registries/renderers-registry';\n\n/**\n * Automatically renders menus when opened\n *\n * This component:\n * 1. Listens to UI plugin state for open menus\n * 2. Looks up anchor elements from the anchor registry\n * 3. Renders menus using the user-provided menu renderer\n */\nexport interface AutoMenuRendererProps {\n container?: HTMLElement | null;\n documentId: string; // Which document's menus to render\n}\n\nexport function AutoMenuRenderer({ container, documentId }: AutoMenuRendererProps) {\n const uiState = useUIState(documentId);\n const { provides } = useUICapability();\n const anchorRegistry = useAnchorRegistry();\n const renderers = useRenderers();\n\n const [activeMenu, setActiveMenu] = useState<{\n menuId: string;\n anchorEl: HTMLElement | null;\n } | null>(null);\n\n const openMenus = uiState?.openMenus || {};\n const schema = provides?.getSchema();\n\n // Update active menu when state changes\n useEffect(() => {\n const openMenuIds = Object.keys(openMenus);\n\n if (openMenuIds.length > 0) {\n // Show the first open menu (in practice, should only be one)\n const menuId = openMenuIds[0];\n if (!menuId) {\n setActiveMenu(null);\n return;\n }\n\n const menuState = openMenus[menuId];\n if (menuState && menuState.triggeredByItemId) {\n // Look up anchor with documentId scope\n const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n setActiveMenu({ menuId, anchorEl: anchor });\n } else {\n setActiveMenu(null);\n }\n } else {\n setActiveMenu(null);\n }\n }, [openMenus, anchorRegistry, documentId]);\n\n const handleClose = () => {\n if (activeMenu) {\n provides?.forDocument(documentId).closeMenu(activeMenu.menuId);\n }\n };\n\n if (!activeMenu || !schema) {\n return null;\n }\n\n const menuSchema = schema.menus[activeMenu.menuId];\n if (!menuSchema) {\n console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n return null;\n }\n\n // Use the user-provided menu renderer\n const MenuRenderer = renderers.menu;\n\n return (\n <MenuRenderer\n schema={menuSchema}\n documentId={documentId}\n anchorEl={activeMenu.anchorEl}\n onClose={handleClose}\n container={container}\n />\n );\n}\n","import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\nimport { useUICapability, useUIPlugin } from './hooks/use-ui';\nimport { UIContainerContext, UIContainerContextValue } from './hooks/use-ui-container';\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n ReactNode,\n HTMLAttributes,\n} from '@framework';\n\n/**\n * Find the style injection target for an element.\n * Returns the shadow root if inside one, otherwise document.head.\n */\nfunction getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {\n const root = element.getRootNode();\n if (root instanceof ShadowRoot) {\n return root;\n }\n return document.head;\n}\n\ninterface UIRootProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\n/**\n * Internal component that handles:\n * 1. Injecting the generated stylesheet (into shadow root or document.head)\n * 2. Managing the data-disabled-categories attribute\n * 3. Updating styles on locale changes\n */\nexport function UIRoot({ children, style, ...restProps }: UIRootProps) {\n const { plugin } = useUIPlugin();\n const { provides } = useUICapability();\n const [disabledCategories, setDisabledCategories] = useState<string[]>([]);\n const [hiddenItems, setHiddenItems] = useState<string[]>([]);\n const styleElRef = useRef<HTMLStyleElement | null>(null);\n const styleTargetRef = useRef<HTMLElement | ShadowRoot | null>(null);\n const previousElementRef = useRef<HTMLDivElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Create container context value (memoized to prevent unnecessary re-renders)\n const containerContextValue = useMemo<UIContainerContextValue>(\n () => ({\n containerRef,\n getContainer: () => containerRef.current,\n }),\n [],\n );\n\n // Callback ref that handles style injection when element mounts\n // Handles React Strict Mode by tracking previous element\n const rootRefCallback = useCallback(\n (element: HTMLDivElement | null) => {\n const previousElement = previousElementRef.current;\n\n // Update refs\n previousElementRef.current = element;\n (containerRef as any).current = element;\n\n // If element is null (unmount), don't do anything yet\n // React Strict Mode will remount, so we'll handle cleanup in useEffect\n if (!element) {\n return;\n }\n\n // If element changed (or is new) and plugin is available, inject styles\n if (element !== previousElement && plugin) {\n const styleTarget = getStyleTarget(element);\n styleTargetRef.current = styleTarget;\n\n // Check if styles already exist in this target\n const existingStyle = styleTarget.querySelector(\n UI_SELECTORS.STYLES,\n ) as HTMLStyleElement | null;\n\n if (existingStyle) {\n styleElRef.current = existingStyle;\n // Update content in case locale changed\n existingStyle.textContent = plugin.getStylesheet();\n return;\n }\n\n // Create and inject stylesheet\n const stylesheet = plugin.getStylesheet();\n const styleEl = document.createElement('style');\n styleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n styleEl.textContent = stylesheet;\n\n if (styleTarget instanceof ShadowRoot) {\n // For shadow root, prepend before other content\n styleTarget.insertBefore(styleEl, styleTarget.firstChild);\n } else {\n styleTarget.appendChild(styleEl);\n }\n\n styleElRef.current = styleEl;\n }\n },\n [plugin],\n );\n\n // Cleanup on actual unmount (not Strict Mode remount)\n useEffect(() => {\n return () => {\n // Only cleanup if we're actually unmounting (not just Strict Mode)\n // The style element will be reused if component remounts\n if (styleElRef.current?.parentNode && !previousElementRef.current) {\n styleElRef.current.remove();\n }\n styleElRef.current = null;\n styleTargetRef.current = null;\n };\n }, []);\n\n // Subscribe to stylesheet invalidation (locale changes, schema merges)\n useEffect(() => {\n if (!plugin) return;\n\n return plugin.onStylesheetInvalidated(() => {\n // Update the style element content\n if (styleElRef.current) {\n styleElRef.current.textContent = plugin.getStylesheet();\n }\n });\n }, [plugin]);\n\n // Subscribe to category and hidden items changes\n useEffect(() => {\n if (!provides) return;\n\n setDisabledCategories(provides.getDisabledCategories());\n setHiddenItems(provides.getHiddenItems());\n\n return provides.onCategoryChanged(({ disabledCategories, hiddenItems }) => {\n setDisabledCategories(disabledCategories);\n setHiddenItems(hiddenItems);\n });\n }, [provides]);\n\n // Build the disabled categories attribute value\n const disabledCategoriesAttr = useMemo(\n () => (disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined),\n [disabledCategories],\n );\n\n // Build the hidden items attribute value\n const hiddenItemsAttr = useMemo(\n () => (hiddenItems.length > 0 ? hiddenItems.join(' ') : undefined),\n [hiddenItems],\n );\n\n const combinedStyle = useMemo(() => {\n const base = { containerType: 'inline-size' as const };\n if (style && typeof style === 'object') {\n return { ...base, ...style };\n }\n return base;\n }, [style]);\n\n const rootProps = {\n [UI_ATTRIBUTES.ROOT]: '',\n [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr,\n [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr,\n };\n\n return (\n <UIContainerContext.Provider value={containerContextValue}>\n <div ref={rootRefCallback} {...rootProps} {...restProps} style={combinedStyle}>\n {children}\n </div>\n </UIContainerContext.Provider>\n );\n}\n","import type { ReactNode, ComponentType, HTMLAttributes } from '@framework';\nimport { AnchorRegistryProvider } from './registries/anchor-registry';\nimport { ComponentRegistryProvider } from './registries/component-registry';\nimport { RenderersProvider } from './registries/renderers-registry';\nimport { BaseComponentProps, UIRenderers } from './types';\nimport { AutoMenuRenderer } from './auto-menu-renderer';\nimport { UIRoot } from './root';\n\n/**\n * UIProvider Props\n */\nexport interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Document ID for this UI context\n * Required for menu rendering\n */\n documentId: string;\n\n /**\n * Custom component registry\n * Maps component IDs to components\n */\n components?: Record<string, ComponentType<BaseComponentProps>>;\n\n /**\n * REQUIRED: User-provided renderers\n * These define how toolbars, panels, and menus are displayed\n */\n renderers: UIRenderers;\n\n /**\n * Optional: Container for menu portal\n * Defaults to document.body\n */\n menuContainer?: HTMLElement | null;\n}\n\n/**\n * UIProvider - Single provider for all UI plugin functionality\n *\n * Manages:\n * - Anchor registry for menu positioning\n * - Component registry for custom components\n * - Renderers for toolbars, panels, and menus\n * - Automatic menu rendering\n *\n * @example\n * ```tsx\n * <EmbedPDF engine={engine} plugins={plugins}>\n * {({ pluginsReady }) => (\n * pluginsReady && (\n * <DocumentContext>\n * {({ activeDocumentId }) => (\n * activeDocumentId && (\n * <UIProvider\n * documentId={activeDocumentId}\n * components={{\n * 'thumbnail-panel': ThumbnailPanel,\n * 'bookmark-panel': BookmarkPanel,\n * }}\n * renderers={{\n * toolbar: ToolbarRenderer,\n * panel: PanelRenderer,\n * menu: MenuRenderer,\n * }}\n * >\n * <ViewerLayout />\n * </UIProvider>\n * )\n * )}\n * </DocumentContext>\n * )\n * )}\n * </EmbedPDF>\n * ```\n */\nexport function UIProvider({\n children,\n documentId,\n components = {},\n renderers,\n menuContainer,\n ...restProps\n}: UIProviderProps) {\n return (\n <AnchorRegistryProvider>\n <ComponentRegistryProvider initialComponents={components}>\n <RenderersProvider renderers={renderers}>\n <UIRoot {...restProps}>\n {children}\n {/* Automatically render menus for this document */}\n <AutoMenuRenderer documentId={documentId} container={menuContainer} />\n </UIRoot>\n </RenderersProvider>\n </ComponentRegistryProvider>\n </AnchorRegistryProvider>\n );\n}\n","import { useComponentRegistry } from '../registries/component-registry';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n const componentRegistry = useComponentRegistry();\n\n return {\n /**\n * Render a custom component by ID\n *\n * @param componentId - Component ID from schema\n * @param documentId - Document ID\n * @param props - Additional props to pass to component\n * @returns Rendered component or null if not found\n */\n renderCustomComponent: (componentId: string, documentId: string, props?: any) => {\n const Component = componentRegistry.get(componentId);\n\n if (!Component) {\n console.error(`Component \"${componentId}\" not found in registry`);\n return null;\n }\n\n return <Component documentId={documentId} {...(props || {})} />;\n },\n };\n}\n","import { useCallback, useRef } from '@framework';\nimport { useAnchorRegistry } from '../registries/anchor-registry';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param documentId - Document ID\n * @param itemId - Item ID (typically matches the toolbar/menu item ID)\n * @returns Ref callback to attach to the element\n *\n * @example\n * ```tsx\n * function ZoomButton({ documentId }: Props) {\n * const anchorRef = useRegisterAnchor(documentId, 'zoom-button');\n *\n * return <button ref={anchorRef}>Zoom</button>;\n * }\n * ```\n */\nexport function useRegisterAnchor(\n documentId: string,\n itemId: string,\n): (element: HTMLElement | null) => void {\n const registry = useAnchorRegistry();\n const elementRef = useRef<HTMLElement | null>(null);\n const documentIdRef = useRef(documentId);\n const itemIdRef = useRef(itemId);\n\n // Keep refs in sync\n documentIdRef.current = documentId;\n itemIdRef.current = itemId;\n\n // Return stable callback that uses refs\n return useCallback(\n (element: HTMLElement | null) => {\n // Store previous element\n const previousElement = elementRef.current;\n\n // Update ref\n elementRef.current = element;\n\n // Handle registration/unregistration\n if (element) {\n // Register new element\n if (element !== previousElement) {\n registry.register(documentIdRef.current, itemIdRef.current, element);\n }\n } else if (previousElement) {\n // Element is now null, but we had one before - unregister\n registry.unregister(documentIdRef.current, itemIdRef.current);\n }\n },\n [registry], // Only depend on registry!\n );\n}\n","import { useUICapability, useUIState } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides simple functions to render toolbars, sidebars, and modals.\n * Always passes isOpen state to renderers so they can control animations.\n *\n * Automatically subscribes to UI state changes for the given document.\n */\nexport function useSchemaRenderer(documentId: string) {\n const renderers = useRenderers();\n const { provides } = useUICapability();\n const schema = provides?.getSchema();\n const uiState = useUIState(documentId); // Subscribe to state changes\n\n return {\n /**\n * Render a toolbar by placement and slot\n *\n * Always renders with isOpen state when toolbar exists in slot.\n *\n * @param placement - 'top' | 'bottom' | 'left' | 'right'\n * @param slot - Slot name (e.g. 'main', 'secondary')\n *\n * @example\n * ```tsx\n * {renderToolbar('top', 'main')}\n * {renderToolbar('top', 'secondary')}\n * ```\n */\n renderToolbar: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n if (!schema || !provides || !uiState) return null;\n\n const slotKey = `${placement}-${slot}`;\n const toolbarSlot = uiState.activeToolbars[slotKey];\n\n // If no toolbar in this slot, nothing to render\n if (!toolbarSlot) return null;\n\n const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];\n if (!toolbarSchema) {\n console.warn(`Toolbar \"${toolbarSlot.toolbarId}\" not found in schema`);\n return null;\n }\n\n // Check if toolbar is closable\n const isClosable = !toolbarSchema.permanent;\n\n const handleClose = isClosable\n ? () => {\n provides.forDocument(documentId).closeToolbarSlot(placement, slot);\n }\n : undefined;\n\n const ToolbarRenderer = renderers.toolbar;\n\n // ALWAYS render, pass isOpen state\n return (\n <ToolbarRenderer\n key={toolbarSlot.toolbarId}\n schema={toolbarSchema}\n documentId={documentId}\n isOpen={toolbarSlot.isOpen}\n onClose={handleClose}\n />\n );\n },\n\n /**\n * Render a sidebar by placement and slot\n *\n * ALWAYS renders (when sidebar exists in slot) with isOpen state.\n * Your renderer controls whether to display or animate.\n *\n * @param placement - 'left' | 'right' | 'top' | 'bottom'\n * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n *\n * @example\n * ```tsx\n * {renderSidebar('left', 'main')}\n * {renderSidebar('right', 'main')}\n * ```\n */\n renderSidebar: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n if (!schema || !provides || !uiState) return null;\n const slotKey = `${placement}-${slot}`;\n const sidebarSlot = uiState.activeSidebars[slotKey];\n\n // If no sidebar in this slot, nothing to render\n if (!sidebarSlot) return null;\n\n const sidebarSchema = schema.sidebars?.[sidebarSlot.sidebarId];\n if (!sidebarSchema) {\n console.warn(`Sidebar \"${sidebarSlot.sidebarId}\" not found in schema`);\n return null;\n }\n\n const handleClose = () => {\n provides.forDocument(documentId).closeSidebarSlot(placement, slot);\n };\n\n const SidebarRenderer = renderers.sidebar;\n\n // ALWAYS render, pass isOpen state\n // Your renderer decides whether to return null or animate\n return (\n <SidebarRenderer\n key={sidebarSlot.sidebarId}\n schema={sidebarSchema}\n documentId={documentId}\n isOpen={sidebarSlot.isOpen}\n onClose={handleClose}\n />\n );\n },\n\n /**\n * Render the active modal (if any)\n *\n * Only one modal can be active at a time.\n * Modals are defined in schema.modals.\n *\n * Supports animation lifecycle:\n * - isOpen: true = visible\n * - isOpen: false = animate out (modal still rendered)\n * - onExited called after animation → modal removed\n *\n * @example\n * ```tsx\n * {renderModal()}\n * ```\n */\n renderModal: () => {\n if (!schema || !provides || !uiState?.activeModal) return null;\n\n const { modalId, isOpen } = uiState.activeModal;\n\n const modalSchema = schema.modals?.[modalId];\n if (!modalSchema) {\n console.warn(`Modal \"${modalId}\" not found in schema`);\n return null;\n }\n\n const handleClose = () => {\n provides.forDocument(documentId).closeModal();\n };\n\n const handleExited = () => {\n provides.forDocument(documentId).clearModal();\n };\n\n const ModalRenderer = renderers.modal;\n if (!ModalRenderer) {\n console.warn('No modal renderer registered');\n return null;\n }\n\n return (\n <ModalRenderer\n key={modalId}\n schema={modalSchema}\n documentId={documentId}\n isOpen={isOpen}\n onClose={handleClose}\n onExited={handleExited}\n />\n );\n },\n\n /**\n * Helper: Get all active toolbars for this document\n * Useful for batch rendering or debugging\n */\n getActiveToolbars: () => {\n if (!uiState) return [];\n return Object.entries(uiState.activeToolbars).map(([slotKey, toolbarSlot]) => {\n const [placement, slot] = slotKey.split('-');\n return {\n placement,\n slot,\n toolbarId: toolbarSlot.toolbarId,\n isOpen: toolbarSlot.isOpen,\n };\n });\n },\n\n /**\n * Helper: Get all active sidebars for this document\n * Useful for batch rendering or debugging\n */\n getActiveSidebars: () => {\n if (!uiState) return [];\n return Object.entries(uiState.activeSidebars).map(([slotKey, sidebarSlot]) => {\n const [placement, slot] = slotKey.split('-');\n return {\n placement,\n slot,\n sidebarId: sidebarSlot.sidebarId,\n isOpen: sidebarSlot.isOpen,\n };\n });\n },\n\n /**\n * Render all enabled overlays\n *\n * Overlays are floating components positioned over the document content.\n * Unlike modals, multiple overlays can be visible and they don't block interaction.\n *\n * @example\n * ```tsx\n * <div className=\"relative\">\n * {children}\n * {renderOverlays()}\n * </div>\n * ```\n */\n renderOverlays: () => {\n if (!schema?.overlays || !provides) return null;\n\n const OverlayRenderer = renderers.overlay;\n if (!OverlayRenderer) {\n return null;\n }\n\n const overlays = Object.values(schema.overlays);\n if (overlays.length === 0) return null;\n\n return (\n <>\n {overlays.map((overlaySchema) => (\n <OverlayRenderer\n key={overlaySchema.id}\n schema={overlaySchema}\n documentId={documentId}\n />\n ))}\n </>\n );\n },\n };\n}\n","import { useCallback } from '@framework';\nimport { SelectionMenuPropsBase, SelectionMenuRenderFn } from '@embedpdf/utils/@framework';\nimport { useUICapability } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * Creates a render function for a selection menu from the schema\n *\n * @param menuId - The selection menu ID from schema\n * @param documentId - Document ID\n * @returns A render function compatible with layer selectionMenu props\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n menuId: string,\n documentId: string,\n): SelectionMenuRenderFn<TContext> | undefined {\n const { provides } = useUICapability();\n const renderers = useRenderers();\n\n const renderFn = useCallback(\n (props: SelectionMenuPropsBase<TContext>) => {\n const schema = provides?.getSchema();\n const menuSchema = schema?.selectionMenus?.[menuId];\n\n if (!menuSchema) {\n return null;\n }\n\n if (!props.selected) {\n return null;\n }\n\n const SelectionMenuRenderer = renderers.selectionMenu;\n\n return <SelectionMenuRenderer schema={menuSchema} documentId={documentId} props={props} />;\n },\n [provides, renderers, menuId, documentId],\n );\n\n // Return undefined if schema doesn't have this menu\n const schema = provides?.getSchema();\n if (!schema?.selectionMenus?.[menuId]) {\n return undefined;\n }\n\n return renderFn;\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","useUIPlugin","usePlugin","useUIState","documentId","provides","state","setState","useState","useEffect","scope","forDocument","getState","unsubToolbar","onToolbarChanged","unsubSidebar","onSidebarChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","UIContainerContext","createContext","AnchorRegistryContext","AnchorRegistryProvider","children","anchorsRef","useRef","Map","registry","register","useCallback","itemId","element","key","current","set","unregister","delete","getAnchor","get","Provider","value","useAnchorRegistry","context","useContext","Error","ComponentRegistryContext","ComponentRegistryProvider","initialComponents","componentsRef","Object","entries","component","has","getRegisteredIds","Array","from","keys","useComponentRegistry","RenderersContext","RenderersProvider","renderers","useRenderers","AutoMenuRenderer","container","uiState","anchorRegistry","activeMenu","setActiveMenu","openMenus","schema","getSchema","openMenuIds","length","menuId","menuState","triggeredByItemId","anchor","anchorEl","menuSchema","menus","console","warn","MenuRenderer","menu","jsx","onClose","closeMenu","UIRoot","style","restProps","plugin","disabledCategories","setDisabledCategories","hiddenItems","setHiddenItems","styleElRef","styleTargetRef","previousElementRef","containerRef","containerContextValue","useMemo","getContainer","rootRefCallback","previousElement","styleTarget","root","getRootNode","ShadowRoot","document","head","getStyleTarget","existingStyle","querySelector","UI_SELECTORS","STYLES","textContent","getStylesheet","stylesheet","styleEl","createElement","setAttribute","UI_ATTRIBUTES","insertBefore","firstChild","appendChild","_a","parentNode","remove","onStylesheetInvalidated","getDisabledCategories","getHiddenItems","onCategoryChanged","disabledCategoriesAttr","join","hiddenItemsAttr","combinedStyle","base","containerType","rootProps","ROOT","DISABLED_CATEGORIES","HIDDEN_ITEMS","ref","components","menuContainer","jsxs","componentRegistry","renderCustomComponent","componentId","props","Component","error","elementRef","documentIdRef","itemIdRef","renderToolbar","placement","slot","slotKey","toolbarSlot","activeToolbars","toolbarSchema","toolbars","toolbarId","handleClose","permanent","closeToolbarSlot","ToolbarRenderer","toolbar","isOpen","renderSidebar","sidebarSlot","activeSidebars","sidebarSchema","sidebars","sidebarId","SidebarRenderer","sidebar","closeSidebarSlot","renderModal","activeModal","modalId","modalSchema","modals","ModalRenderer","modal","closeModal","onExited","clearModal","getActiveToolbars","map","split","getActiveSidebars","renderOverlays","overlays","OverlayRenderer","overlay","values","Fragment","overlaySchema","renderFn","selectionMenus","selected","SelectionMenuRenderer","selectionMenu"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-ui-container.ts","../../src/shared/registries/anchor-registry.tsx","../../src/shared/registries/component-registry.tsx","../../src/shared/registries/renderers-registry.tsx","../../src/shared/auto-menu-renderer.tsx","../../src/shared/root.tsx","../../src/shared/provider.tsx","../../src/shared/hooks/use-item-renderer.tsx","../../src/shared/hooks/use-register-anchor.ts","../../src/shared/hooks/use-schema-renderer.tsx","../../src/shared/hooks/use-selection-menu.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { UIPlugin } from '@embedpdf/plugin-ui';\nimport { useState, useEffect } from '@framework';\nimport { UIDocumentState, UISchema } from '@embedpdf/plugin-ui';\n\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Get UI state for a document\n */\nexport const useUIState = (documentId: string) => {\n const { provides } = useUICapability();\n const [state, setState] = useState<UIDocumentState | null>(null);\n\n useEffect(() => {\n if (!provides) return;\n\n const scope = provides.forDocument(documentId);\n setState(scope.getState());\n\n // Subscribe to changes\n const unsubToolbar = scope.onToolbarChanged(() => setState(scope.getState()));\n const unsubSidebar = scope.onSidebarChanged(() => setState(scope.getState()));\n const unsubModal = scope.onModalChanged(() => setState(scope.getState()));\n const unsubMenu = scope.onMenuChanged(() => setState(scope.getState()));\n\n return () => {\n unsubToolbar();\n unsubSidebar();\n unsubModal();\n unsubMenu();\n };\n }, [provides, documentId]);\n\n return state;\n};\n\n/**\n * Get UI schema\n */\nexport const useUISchema = (): UISchema | null => {\n const { provides } = useUICapability();\n return provides?.getSchema() ?? null;\n};\n","import { createContext, useContext, RefObject } from '@framework';\n\nexport interface UIContainerContextValue {\n /** Reference to the UIRoot container element */\n containerRef: RefObject<HTMLDivElement>;\n /** Get the container element (may be null if not mounted) */\n getContainer: () => HTMLDivElement | null;\n}\n\nexport const UIContainerContext = createContext<UIContainerContextValue | null>(null);\n\n/**\n * Hook to access the UI container element.\n *\n * This provides access to the UIRoot container for:\n * - Container query based responsiveness\n * - Portaling elements to the root\n * - Measuring container dimensions\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { containerRef, getContainer } = useUIContainer();\n *\n * // Use containerRef for ResizeObserver\n * useEffect(() => {\n * const container = getContainer();\n * if (!container) return;\n *\n * const observer = new ResizeObserver(() => {\n * console.log('Container width:', container.clientWidth);\n * });\n * observer.observe(container);\n * return () => observer.disconnect();\n * }, [getContainer]);\n *\n * // Or portal to the container\n * return createPortal(<Modal />, getContainer()!);\n * }\n * ```\n */\nexport function useUIContainer(): UIContainerContextValue {\n const context = useContext(UIContainerContext);\n if (!context) {\n throw new Error('useUIContainer must be used within a UIProvider');\n }\n return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ReactNode } from '@framework';\n\n/**\n * Anchor Registry\n *\n * Tracks DOM elements for menu positioning.\n * Each anchor is scoped by documentId and itemId.\n */\nexport interface AnchorRegistry {\n register(documentId: string, itemId: string, element: HTMLElement): void;\n unregister(documentId: string, itemId: string): void;\n getAnchor(documentId: string, itemId: string): HTMLElement | null;\n}\n\nconst AnchorRegistryContext = createContext<AnchorRegistry | null>(null);\n\nexport function AnchorRegistryProvider({ children }: { children: ReactNode }) {\n const anchorsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n const registry: AnchorRegistry = {\n register: useCallback((documentId: string, itemId: string, element: HTMLElement) => {\n const key = `${documentId}:${itemId}`;\n anchorsRef.current.set(key, element);\n }, []),\n\n unregister: useCallback((documentId: string, itemId: string) => {\n const key = `${documentId}:${itemId}`;\n anchorsRef.current.delete(key);\n }, []),\n\n getAnchor: useCallback((documentId: string, itemId: string) => {\n const key = `${documentId}:${itemId}`;\n return anchorsRef.current.get(key) || null;\n }, []),\n };\n\n return (\n <AnchorRegistryContext.Provider value={registry}>{children}</AnchorRegistryContext.Provider>\n );\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n const context = useContext(AnchorRegistryContext);\n if (!context) {\n throw new Error('useAnchorRegistry must be used within UIProvider');\n }\n return context;\n}\n","import { createContext, useContext, useRef, useCallback } from '@framework';\nimport type { ComponentType, ReactNode } from '@framework';\nimport { BaseComponentProps } from '../types';\n\n/**\n * Component Registry\n *\n * Stores custom components that can be referenced in the UI schema.\n */\nexport interface ComponentRegistry {\n register(id: string, component: ComponentType<BaseComponentProps>): void;\n unregister(id: string): void;\n get(id: string): ComponentType<BaseComponentProps> | undefined;\n has(id: string): boolean;\n getRegisteredIds(): string[];\n}\n\nconst ComponentRegistryContext = createContext<ComponentRegistry | null>(null);\n\nexport interface ComponentRegistryProviderProps {\n children: ReactNode;\n initialComponents?: Record<string, ComponentType<BaseComponentProps>>;\n}\n\nexport function ComponentRegistryProvider({\n children,\n initialComponents = {},\n}: ComponentRegistryProviderProps) {\n const componentsRef = useRef<Map<string, ComponentType<BaseComponentProps>>>(\n new Map(Object.entries(initialComponents)),\n );\n\n const registry: ComponentRegistry = {\n register: useCallback((id: string, component: ComponentType<BaseComponentProps>) => {\n componentsRef.current.set(id, component);\n }, []),\n\n unregister: useCallback((id: string) => {\n componentsRef.current.delete(id);\n }, []),\n\n get: useCallback((id: string) => {\n return componentsRef.current.get(id);\n }, []),\n\n has: useCallback((id: string) => {\n return componentsRef.current.has(id);\n }, []),\n\n getRegisteredIds: useCallback(() => {\n return Array.from(componentsRef.current.keys());\n }, []),\n };\n\n return (\n <ComponentRegistryContext.Provider value={registry}>\n {children}\n </ComponentRegistryContext.Provider>\n );\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n const context = useContext(ComponentRegistryContext);\n if (!context) {\n throw new Error('useComponentRegistry must be used within UIProvider');\n }\n return context;\n}\n","import { createContext, useContext } from '@framework';\nimport type { ReactNode } from '@framework';\nimport { UIRenderers } from '../types';\n\n/**\n * Renderers Registry\n *\n * Provides access to user-supplied renderers (toolbar, panel, menu).\n */\nconst RenderersContext = createContext<UIRenderers | null>(null);\n\nexport interface RenderersProviderProps {\n children: ReactNode;\n renderers: UIRenderers;\n}\n\nexport function RenderersProvider({ children, renderers }: RenderersProviderProps) {\n return <RenderersContext.Provider value={renderers}>{children}</RenderersContext.Provider>;\n}\n\nexport function useRenderers(): UIRenderers {\n const context = useContext(RenderersContext);\n if (!context) {\n throw new Error('useRenderers must be used within UIProvider');\n }\n return context;\n}\n","import { useState, useEffect } from '@framework';\nimport { useUIState, useUICapability } from './hooks/use-ui';\nimport { useAnchorRegistry } from './registries/anchor-registry';\nimport { useRenderers } from './registries/renderers-registry';\n\n/**\n * Automatically renders menus when opened\n *\n * This component:\n * 1. Listens to UI plugin state for open menus\n * 2. Looks up anchor elements from the anchor registry\n * 3. Renders menus using the user-provided menu renderer\n */\nexport interface AutoMenuRendererProps {\n container?: HTMLElement | null;\n documentId: string; // Which document's menus to render\n}\n\nexport function AutoMenuRenderer({ container, documentId }: AutoMenuRendererProps) {\n const uiState = useUIState(documentId);\n const { provides } = useUICapability();\n const anchorRegistry = useAnchorRegistry();\n const renderers = useRenderers();\n\n const [activeMenu, setActiveMenu] = useState<{\n menuId: string;\n anchorEl: HTMLElement | null;\n } | null>(null);\n\n const openMenus = uiState?.openMenus || {};\n const schema = provides?.getSchema();\n\n // Update active menu when state changes\n useEffect(() => {\n const openMenuIds = Object.keys(openMenus);\n\n if (openMenuIds.length > 0) {\n // Show the first open menu (in practice, should only be one)\n const menuId = openMenuIds[0];\n if (!menuId) {\n setActiveMenu(null);\n return;\n }\n\n const menuState = openMenus[menuId];\n if (menuState && menuState.triggeredByItemId) {\n // Look up anchor with documentId scope\n const anchor = anchorRegistry.getAnchor(documentId, menuState.triggeredByItemId);\n setActiveMenu({ menuId, anchorEl: anchor });\n } else {\n setActiveMenu(null);\n }\n } else {\n setActiveMenu(null);\n }\n }, [openMenus, anchorRegistry, documentId]);\n\n const handleClose = () => {\n if (activeMenu) {\n provides?.forDocument(documentId).closeMenu(activeMenu.menuId);\n }\n };\n\n if (!activeMenu || !schema) {\n return null;\n }\n\n const menuSchema = schema.menus[activeMenu.menuId];\n if (!menuSchema) {\n console.warn(`Menu \"${activeMenu.menuId}\" not found in schema`);\n return null;\n }\n\n // Use the user-provided menu renderer\n const MenuRenderer = renderers.menu;\n\n return (\n <MenuRenderer\n schema={menuSchema}\n documentId={documentId}\n anchorEl={activeMenu.anchorEl}\n onClose={handleClose}\n container={container}\n />\n );\n}\n","import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';\nimport { useUICapability, useUIPlugin } from './hooks/use-ui';\nimport { UIContainerContext, UIContainerContextValue } from './hooks/use-ui-container';\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n ReactNode,\n HTMLAttributes,\n} from '@framework';\n\n/**\n * Find the style injection target for an element.\n * Returns the shadow root if inside one, otherwise document.head.\n */\nfunction getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {\n const root = element.getRootNode();\n if (root instanceof ShadowRoot) {\n return root;\n }\n return document.head;\n}\n\ninterface UIRootProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\n/**\n * Internal component that handles:\n * 1. Injecting the generated stylesheet (into shadow root or document.head)\n * 2. Managing the data-disabled-categories attribute\n * 3. Updating styles on locale changes\n */\nexport function UIRoot({ children, style, ...restProps }: UIRootProps) {\n const { plugin } = useUIPlugin();\n const { provides } = useUICapability();\n const [disabledCategories, setDisabledCategories] = useState<string[]>([]);\n const [hiddenItems, setHiddenItems] = useState<string[]>([]);\n const styleElRef = useRef<HTMLStyleElement | null>(null);\n const styleTargetRef = useRef<HTMLElement | ShadowRoot | null>(null);\n const previousElementRef = useRef<HTMLDivElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Create container context value (memoized to prevent unnecessary re-renders)\n const containerContextValue = useMemo<UIContainerContextValue>(\n () => ({\n containerRef,\n getContainer: () => containerRef.current,\n }),\n [],\n );\n\n // Callback ref that handles style injection when element mounts\n // Handles React Strict Mode by tracking previous element\n const rootRefCallback = useCallback(\n (element: HTMLDivElement | null) => {\n const previousElement = previousElementRef.current;\n\n // Update refs\n previousElementRef.current = element;\n (containerRef as any).current = element;\n\n // If element is null (unmount), don't do anything yet\n // React Strict Mode will remount, so we'll handle cleanup in useEffect\n if (!element) {\n return;\n }\n\n // If element changed (or is new) and plugin is available, inject styles\n if (element !== previousElement && plugin) {\n const styleTarget = getStyleTarget(element);\n styleTargetRef.current = styleTarget;\n\n // Check if styles already exist in this target\n const existingStyle = styleTarget.querySelector(\n UI_SELECTORS.STYLES,\n ) as HTMLStyleElement | null;\n\n if (existingStyle) {\n styleElRef.current = existingStyle;\n // Update content in case locale changed\n existingStyle.textContent = plugin.getStylesheet();\n return;\n }\n\n // Create and inject stylesheet\n const stylesheet = plugin.getStylesheet();\n const styleEl = document.createElement('style');\n styleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n styleEl.textContent = stylesheet;\n\n if (styleTarget instanceof ShadowRoot) {\n // For shadow root, prepend before other content\n styleTarget.insertBefore(styleEl, styleTarget.firstChild);\n } else {\n styleTarget.appendChild(styleEl);\n }\n\n styleElRef.current = styleEl;\n }\n },\n [plugin],\n );\n\n // Cleanup on actual unmount (not Strict Mode remount)\n useEffect(() => {\n return () => {\n // Only cleanup if we're actually unmounting (not just Strict Mode)\n // The style element will be reused if component remounts\n if (styleElRef.current?.parentNode && !previousElementRef.current) {\n styleElRef.current.remove();\n }\n styleElRef.current = null;\n styleTargetRef.current = null;\n };\n }, []);\n\n // Subscribe to stylesheet invalidation (locale changes, schema merges)\n useEffect(() => {\n if (!plugin) return;\n\n return plugin.onStylesheetInvalidated(() => {\n // Update the style element content\n if (styleElRef.current) {\n styleElRef.current.textContent = plugin.getStylesheet();\n }\n });\n }, [plugin]);\n\n // Subscribe to category and hidden items changes\n useEffect(() => {\n if (!provides) return;\n\n setDisabledCategories(provides.getDisabledCategories());\n setHiddenItems(provides.getHiddenItems());\n\n return provides.onCategoryChanged(({ disabledCategories, hiddenItems }) => {\n setDisabledCategories(disabledCategories);\n setHiddenItems(hiddenItems);\n });\n }, [provides]);\n\n // Build the disabled categories attribute value\n const disabledCategoriesAttr = useMemo(\n () => (disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined),\n [disabledCategories],\n );\n\n // Build the hidden items attribute value\n const hiddenItemsAttr = useMemo(\n () => (hiddenItems.length > 0 ? hiddenItems.join(' ') : undefined),\n [hiddenItems],\n );\n\n const combinedStyle = useMemo(() => {\n const base = { containerType: 'inline-size' as const };\n if (style && typeof style === 'object') {\n return { ...base, ...style };\n }\n return base;\n }, [style]);\n\n const rootProps = {\n [UI_ATTRIBUTES.ROOT]: '',\n [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr,\n [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr,\n };\n\n return (\n <UIContainerContext.Provider value={containerContextValue}>\n <div ref={rootRefCallback} {...rootProps} {...restProps} style={combinedStyle}>\n {children}\n </div>\n </UIContainerContext.Provider>\n );\n}\n","import type { ReactNode, ComponentType, HTMLAttributes } from '@framework';\nimport { AnchorRegistryProvider } from './registries/anchor-registry';\nimport { ComponentRegistryProvider } from './registries/component-registry';\nimport { RenderersProvider } from './registries/renderers-registry';\nimport { BaseComponentProps, UIRenderers } from './types';\nimport { AutoMenuRenderer } from './auto-menu-renderer';\nimport { UIRoot } from './root';\n\n/**\n * UIProvider Props\n */\nexport interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Document ID for this UI context\n * Required for menu rendering\n */\n documentId: string;\n\n /**\n * Custom component registry\n * Maps component IDs to components\n */\n components?: Record<string, ComponentType<BaseComponentProps>>;\n\n /**\n * REQUIRED: User-provided renderers\n * These define how toolbars, panels, and menus are displayed\n */\n renderers: UIRenderers;\n\n /**\n * Optional: Container for menu portal\n * Defaults to document.body\n */\n menuContainer?: HTMLElement | null;\n}\n\n/**\n * UIProvider - Single provider for all UI plugin functionality\n *\n * Manages:\n * - Anchor registry for menu positioning\n * - Component registry for custom components\n * - Renderers for toolbars, panels, and menus\n * - Automatic menu rendering\n *\n * @example\n * ```tsx\n * <EmbedPDF engine={engine} plugins={plugins}>\n * {({ pluginsReady }) => (\n * pluginsReady && (\n * <DocumentContext>\n * {({ activeDocumentId }) => (\n * activeDocumentId && (\n * <UIProvider\n * documentId={activeDocumentId}\n * components={{\n * 'thumbnail-panel': ThumbnailPanel,\n * 'bookmark-panel': BookmarkPanel,\n * }}\n * renderers={{\n * toolbar: ToolbarRenderer,\n * panel: PanelRenderer,\n * menu: MenuRenderer,\n * }}\n * >\n * <ViewerLayout />\n * </UIProvider>\n * )\n * )}\n * </DocumentContext>\n * )\n * )}\n * </EmbedPDF>\n * ```\n */\nexport function UIProvider({\n children,\n documentId,\n components = {},\n renderers,\n menuContainer,\n ...restProps\n}: UIProviderProps) {\n return (\n <AnchorRegistryProvider>\n <ComponentRegistryProvider initialComponents={components}>\n <RenderersProvider renderers={renderers}>\n <UIRoot {...restProps}>\n {children}\n {/* Automatically render menus for this document */}\n <AutoMenuRenderer documentId={documentId} container={menuContainer} />\n </UIRoot>\n </RenderersProvider>\n </ComponentRegistryProvider>\n </AnchorRegistryProvider>\n );\n}\n","import { useComponentRegistry } from '../registries/component-registry';\n\n/**\n * Helper utilities for building renderers\n */\nexport function useItemRenderer() {\n const componentRegistry = useComponentRegistry();\n\n return {\n /**\n * Render a custom component by ID\n *\n * @param componentId - Component ID from schema\n * @param documentId - Document ID\n * @param props - Additional props to pass to component\n * @returns Rendered component or null if not found\n */\n renderCustomComponent: (componentId: string, documentId: string, props?: any) => {\n const Component = componentRegistry.get(componentId);\n\n if (!Component) {\n console.error(`Component \"${componentId}\" not found in registry`);\n return null;\n }\n\n return <Component documentId={documentId} {...(props || {})} />;\n },\n };\n}\n","import { useCallback, useRef } from '@framework';\nimport { useAnchorRegistry } from '../registries/anchor-registry';\n\n/**\n * Register a DOM element as an anchor for menus\n *\n * @param documentId - Document ID\n * @param itemId - Item ID (typically matches the toolbar/menu item ID)\n * @returns Ref callback to attach to the element\n *\n * @example\n * ```tsx\n * function ZoomButton({ documentId }: Props) {\n * const anchorRef = useRegisterAnchor(documentId, 'zoom-button');\n *\n * return <button ref={anchorRef}>Zoom</button>;\n * }\n * ```\n */\nexport function useRegisterAnchor(\n documentId: string,\n itemId: string,\n): (element: HTMLElement | null) => void {\n const registry = useAnchorRegistry();\n const elementRef = useRef<HTMLElement | null>(null);\n const documentIdRef = useRef(documentId);\n const itemIdRef = useRef(itemId);\n\n // Keep refs in sync\n documentIdRef.current = documentId;\n itemIdRef.current = itemId;\n\n // Return stable callback that uses refs\n return useCallback(\n (element: HTMLElement | null) => {\n // Store previous element\n const previousElement = elementRef.current;\n\n // Update ref\n elementRef.current = element;\n\n // Handle registration/unregistration\n if (element) {\n // Register new element\n if (element !== previousElement) {\n registry.register(documentIdRef.current, itemIdRef.current, element);\n }\n } else if (previousElement) {\n // Element is now null, but we had one before - unregister\n registry.unregister(documentIdRef.current, itemIdRef.current);\n }\n },\n [registry], // Only depend on registry!\n );\n}\n","import { Fragment } from '@framework';\nimport { useUICapability, useUIState } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * High-level hook for rendering UI from schema\n *\n * Provides simple functions to render toolbars, sidebars, and modals.\n * Always passes isOpen state to renderers so they can control animations.\n *\n * Automatically subscribes to UI state changes for the given document.\n */\nexport function useSchemaRenderer(documentId: string) {\n const renderers = useRenderers();\n const { provides } = useUICapability();\n const schema = provides?.getSchema();\n const uiState = useUIState(documentId); // Subscribe to state changes\n\n return {\n /**\n * Render a toolbar by placement and slot\n *\n * Always renders with isOpen state when toolbar exists in slot.\n *\n * @param placement - 'top' | 'bottom' | 'left' | 'right'\n * @param slot - Slot name (e.g. 'main', 'secondary')\n *\n * @example\n * ```tsx\n * {renderToolbar('top', 'main')}\n * {renderToolbar('top', 'secondary')}\n * ```\n */\n renderToolbar: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n const slotKey = `${placement}-${slot}`;\n\n if (!schema || !provides || !uiState) {\n return null;\n }\n\n const toolbarSlot = uiState.activeToolbars[slotKey];\n const toolbarSchema = toolbarSlot ? schema.toolbars[toolbarSlot.toolbarId] : null;\n\n if (toolbarSlot && !toolbarSchema) {\n console.warn(`Toolbar \"${toolbarSlot.toolbarId}\" not found in schema`);\n }\n\n const isClosable = toolbarSchema ? !toolbarSchema.permanent : false;\n const handleClose = isClosable\n ? () => provides.forDocument(documentId).closeToolbarSlot(placement, slot)\n : undefined;\n\n const ToolbarRenderer = renderers.toolbar;\n\n // Always return the same element type (div) with stable key\n return (\n <Fragment key={`toolbar-slot-${slotKey}`}>\n {toolbarSlot && toolbarSchema && (\n <ToolbarRenderer\n schema={toolbarSchema}\n documentId={documentId}\n isOpen={toolbarSlot.isOpen}\n onClose={handleClose}\n />\n )}\n </Fragment>\n );\n },\n\n /**\n * Render a sidebar by placement and slot\n *\n * ALWAYS renders (when sidebar exists in slot) with isOpen state.\n * Your renderer controls whether to display or animate.\n *\n * @param placement - 'left' | 'right' | 'top' | 'bottom'\n * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n *\n * @example\n * ```tsx\n * {renderSidebar('left', 'main')}\n * {renderSidebar('right', 'main')}\n * ```\n */\n renderSidebar: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n const slotKey = `${placement}-${slot}`;\n\n if (!schema || !provides || !uiState) {\n return null;\n }\n\n const sidebarSlot = uiState.activeSidebars[slotKey];\n const sidebarSchema = sidebarSlot ? schema.sidebars?.[sidebarSlot.sidebarId] : null;\n\n if (sidebarSlot && !sidebarSchema) {\n console.warn(`Sidebar \"${sidebarSlot.sidebarId}\" not found in schema`);\n }\n\n const handleClose = () => {\n provides.forDocument(documentId).closeSidebarSlot(placement, slot);\n };\n\n const SidebarRenderer = renderers.sidebar;\n\n // Always return the same element type (Fragment) with stable key\n return (\n <Fragment key={`sidebar-slot-${slotKey}`}>\n {sidebarSlot && sidebarSchema && (\n <SidebarRenderer\n schema={sidebarSchema}\n documentId={documentId}\n isOpen={sidebarSlot.isOpen}\n onClose={handleClose}\n />\n )}\n </Fragment>\n );\n },\n\n /**\n * Render the active modal (if any)\n *\n * Only one modal can be active at a time.\n * Modals are defined in schema.modals.\n *\n * Supports animation lifecycle:\n * - isOpen: true = visible\n * - isOpen: false = animate out (modal still rendered)\n * - onExited called after animation → modal removed\n *\n * @example\n * ```tsx\n * {renderModal()}\n * ```\n */\n renderModal: () => {\n if (!schema || !provides || !uiState) {\n return null;\n }\n\n const ModalRenderer = renderers.modal;\n if (!ModalRenderer) {\n return null;\n }\n\n const activeModal = uiState.activeModal;\n const modalSchema = activeModal ? schema.modals?.[activeModal.modalId] : null;\n\n if (activeModal && !modalSchema) {\n console.warn(`Modal \"${activeModal.modalId}\" not found in schema`);\n }\n\n const handleClose = () => {\n provides.forDocument(documentId).closeModal();\n };\n\n const handleExited = () => {\n provides.forDocument(documentId).clearModal();\n };\n\n // Always return the same element type (Fragment) with stable key\n return (\n <Fragment key=\"modal-slot\">\n {activeModal && modalSchema && (\n <ModalRenderer\n schema={modalSchema}\n documentId={documentId}\n isOpen={activeModal.isOpen}\n onClose={handleClose}\n onExited={handleExited}\n />\n )}\n </Fragment>\n );\n },\n\n /**\n * Helper: Get all active toolbars for this document\n * Useful for batch rendering or debugging\n */\n getActiveToolbars: () => {\n if (!uiState) return [];\n return Object.entries(uiState.activeToolbars).map(([slotKey, toolbarSlot]) => {\n const [placement, slot] = slotKey.split('-');\n return {\n placement,\n slot,\n toolbarId: toolbarSlot.toolbarId,\n isOpen: toolbarSlot.isOpen,\n };\n });\n },\n\n /**\n * Helper: Get all active sidebars for this document\n * Useful for batch rendering or debugging\n */\n getActiveSidebars: () => {\n if (!uiState) return [];\n return Object.entries(uiState.activeSidebars).map(([slotKey, sidebarSlot]) => {\n const [placement, slot] = slotKey.split('-');\n return {\n placement,\n slot,\n sidebarId: sidebarSlot.sidebarId,\n isOpen: sidebarSlot.isOpen,\n };\n });\n },\n\n /**\n * Render all enabled overlays\n *\n * Overlays are floating components positioned over the document content.\n * Unlike modals, multiple overlays can be visible and they don't block interaction.\n *\n * @example\n * ```tsx\n * <div className=\"relative\">\n * {children}\n * {renderOverlays()}\n * </div>\n * ```\n */\n renderOverlays: () => {\n if (!schema || !provides) {\n return null;\n }\n\n const OverlayRenderer = renderers.overlay;\n if (!OverlayRenderer) {\n return null;\n }\n\n const overlays = schema.overlays ? Object.values(schema.overlays) : [];\n\n // Always return the same element type (Fragment) with stable key\n return (\n <Fragment key=\"overlays-slot\">\n {overlays.map((overlaySchema) => (\n <OverlayRenderer\n key={overlaySchema.id}\n schema={overlaySchema}\n documentId={documentId}\n />\n ))}\n </Fragment>\n );\n },\n };\n}\n","import { useCallback } from '@framework';\nimport { SelectionMenuPropsBase, SelectionMenuRenderFn } from '@embedpdf/utils/@framework';\nimport { useUICapability } from './use-ui';\nimport { useRenderers } from '../registries/renderers-registry';\n\n/**\n * Creates a render function for a selection menu from the schema\n *\n * @param menuId - The selection menu ID from schema\n * @param documentId - Document ID\n * @returns A render function compatible with layer selectionMenu props\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n menuId: string,\n documentId: string,\n): SelectionMenuRenderFn<TContext> | undefined {\n const { provides } = useUICapability();\n const renderers = useRenderers();\n\n const renderFn = useCallback(\n (props: SelectionMenuPropsBase<TContext>) => {\n const schema = provides?.getSchema();\n const menuSchema = schema?.selectionMenus?.[menuId];\n\n if (!menuSchema) {\n return null;\n }\n\n if (!props.selected) {\n return null;\n }\n\n const SelectionMenuRenderer = renderers.selectionMenu;\n\n return <SelectionMenuRenderer schema={menuSchema} documentId={documentId} props={props} />;\n },\n [provides, renderers, menuId, documentId],\n );\n\n // Return undefined if schema doesn't have this menu\n const schema = provides?.getSchema();\n if (!schema?.selectionMenus?.[menuId]) {\n return undefined;\n }\n\n return renderFn;\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","useUIPlugin","usePlugin","useUIState","documentId","provides","state","setState","useState","useEffect","scope","forDocument","getState","unsubToolbar","onToolbarChanged","unsubSidebar","onSidebarChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","UIContainerContext","createContext","AnchorRegistryContext","AnchorRegistryProvider","children","anchorsRef","useRef","Map","registry","register","useCallback","itemId","element","key","current","set","unregister","delete","getAnchor","get","Provider","value","useAnchorRegistry","context","useContext","Error","ComponentRegistryContext","ComponentRegistryProvider","initialComponents","componentsRef","Object","entries","component","has","getRegisteredIds","Array","from","keys","useComponentRegistry","RenderersContext","RenderersProvider","renderers","useRenderers","AutoMenuRenderer","container","uiState","anchorRegistry","activeMenu","setActiveMenu","openMenus","schema","getSchema","openMenuIds","length","menuId","menuState","triggeredByItemId","anchor","anchorEl","menuSchema","menus","console","warn","MenuRenderer","menu","jsx","onClose","closeMenu","UIRoot","style","restProps","plugin","disabledCategories","setDisabledCategories","hiddenItems","setHiddenItems","styleElRef","styleTargetRef","previousElementRef","containerRef","containerContextValue","useMemo","getContainer","rootRefCallback","previousElement","styleTarget","root","getRootNode","ShadowRoot","document","head","getStyleTarget","existingStyle","querySelector","UI_SELECTORS","STYLES","textContent","getStylesheet","stylesheet","styleEl","createElement","setAttribute","UI_ATTRIBUTES","insertBefore","firstChild","appendChild","_a","parentNode","remove","onStylesheetInvalidated","getDisabledCategories","getHiddenItems","onCategoryChanged","disabledCategoriesAttr","join","hiddenItemsAttr","combinedStyle","base","containerType","rootProps","ROOT","DISABLED_CATEGORIES","HIDDEN_ITEMS","ref","components","menuContainer","jsxs","componentRegistry","renderCustomComponent","componentId","props","Component","error","elementRef","documentIdRef","itemIdRef","renderToolbar","placement","slot","slotKey","toolbarSlot","activeToolbars","toolbarSchema","toolbars","toolbarId","handleClose","permanent","closeToolbarSlot","ToolbarRenderer","toolbar","Fragment","isOpen","renderSidebar","sidebarSlot","activeSidebars","sidebarSchema","sidebars","sidebarId","SidebarRenderer","sidebar","closeSidebarSlot","renderModal","ModalRenderer","modal","activeModal","modalSchema","modals","modalId","closeModal","onExited","clearModal","getActiveToolbars","map","split","getActiveSidebars","renderOverlays","OverlayRenderer","overlay","overlays","values","overlaySchema","renderFn","selectionMenus","selected","SelectionMenuRenderer","selectionMenu"],"mappings":"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"}
package/dist/preact/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { useCapability, usePlugin } from "@embedpdf/core/preact";
2
2
  import { UIPlugin, UI_SELECTORS, UI_ATTRIBUTES } from "@embedpdf/plugin-ui";
3
3
  export * from "@embedpdf/plugin-ui";
4
- import { createContext } from "preact";
4
+ import { createContext, Fragment } from "preact";
5
5
  import { useState, useEffect, useContext, useRef, useCallback, useMemo } from "preact/hooks";
6
- import { jsx, Fragment, jsxs } from "preact/jsx-runtime";
6
+ import { jsx, jsxs } from "preact/jsx-runtime";
7
7
  const useUICapability = () => useCapability(UIPlugin.id);
8
8
  const useUIPlugin = () => usePlugin(UIPlugin.id);
9
9
  const useUIState = (documentId) => {
@@ -174,30 +174,27 @@ function useSchemaRenderer(documentId) {
174
174
  * ```
175
175
  */
176
176
  renderToolbar: (placement, slot) => {
177
- if (!schema || !provides || !uiState) return null;
178
177
  const slotKey = `${placement}-${slot}`;
178
+ if (!schema || !provides || !uiState) {
179
+ return null;
180
+ }
179
181
  const toolbarSlot = uiState.activeToolbars[slotKey];
180
- if (!toolbarSlot) return null;
181
- const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];
182
- if (!toolbarSchema) {
182
+ const toolbarSchema = toolbarSlot ? schema.toolbars[toolbarSlot.toolbarId] : null;
183
+ if (toolbarSlot && !toolbarSchema) {
183
184
  console.warn(`Toolbar "${toolbarSlot.toolbarId}" not found in schema`);
184
- return null;
185
185
  }
186
- const isClosable = !toolbarSchema.permanent;
187
- const handleClose = isClosable ? () => {
188
- provides.forDocument(documentId).closeToolbarSlot(placement, slot);
189
- } : void 0;
186
+ const isClosable = toolbarSchema ? !toolbarSchema.permanent : false;
187
+ const handleClose = isClosable ? () => provides.forDocument(documentId).closeToolbarSlot(placement, slot) : void 0;
190
188
  const ToolbarRenderer = renderers.toolbar;
191
- return /* @__PURE__ */ jsx(
189
+ return /* @__PURE__ */ jsx(Fragment, { children: toolbarSlot && toolbarSchema && /* @__PURE__ */ jsx(
192
190
  ToolbarRenderer,
193
191
  {
194
192
  schema: toolbarSchema,
195
193
  documentId,
196
194
  isOpen: toolbarSlot.isOpen,
197
195
  onClose: handleClose
198
- },
199
- toolbarSlot.toolbarId
200
- );
196
+ }
197
+ ) }, `toolbar-slot-${slotKey}`);
201
198
  },
202
199
  /**
203
200
  * Render a sidebar by placement and slot
@@ -216,29 +213,28 @@ function useSchemaRenderer(documentId) {
216
213
  */
217
214
  renderSidebar: (placement, slot) => {
218
215
  var _a;
219
- if (!schema || !provides || !uiState) return null;
220
216
  const slotKey = `${placement}-${slot}`;
217
+ if (!schema || !provides || !uiState) {
218
+ return null;
219
+ }
221
220
  const sidebarSlot = uiState.activeSidebars[slotKey];
222
- if (!sidebarSlot) return null;
223
- const sidebarSchema = (_a = schema.sidebars) == null ? void 0 : _a[sidebarSlot.sidebarId];
224
- if (!sidebarSchema) {
221
+ const sidebarSchema = sidebarSlot ? (_a = schema.sidebars) == null ? void 0 : _a[sidebarSlot.sidebarId] : null;
222
+ if (sidebarSlot && !sidebarSchema) {
225
223
  console.warn(`Sidebar "${sidebarSlot.sidebarId}" not found in schema`);
226
- return null;
227
224
  }
228
225
  const handleClose = () => {
229
226
  provides.forDocument(documentId).closeSidebarSlot(placement, slot);
230
227
  };
231
228
  const SidebarRenderer = renderers.sidebar;
232
- return /* @__PURE__ */ jsx(
229
+ return /* @__PURE__ */ jsx(Fragment, { children: sidebarSlot && sidebarSchema && /* @__PURE__ */ jsx(
233
230
  SidebarRenderer,
234
231
  {
235
232
  schema: sidebarSchema,
236
233
  documentId,
237
234
  isOpen: sidebarSlot.isOpen,
238
235
  onClose: handleClose
239
- },
240
- sidebarSlot.sidebarId
241
- );
236
+ }
237
+ ) }, `sidebar-slot-${slotKey}`);
242
238
  },
243
239
  /**
244
240
  * Render the active modal (if any)
@@ -258,35 +254,34 @@ function useSchemaRenderer(documentId) {
258
254
  */
259
255
  renderModal: () => {
260
256
  var _a;
261
- if (!schema || !provides || !(uiState == null ? void 0 : uiState.activeModal)) return null;
262
- const { modalId, isOpen } = uiState.activeModal;
263
- const modalSchema = (_a = schema.modals) == null ? void 0 : _a[modalId];
264
- if (!modalSchema) {
265
- console.warn(`Modal "${modalId}" not found in schema`);
257
+ if (!schema || !provides || !uiState) {
266
258
  return null;
267
259
  }
260
+ const ModalRenderer = renderers.modal;
261
+ if (!ModalRenderer) {
262
+ return null;
263
+ }
264
+ const activeModal = uiState.activeModal;
265
+ const modalSchema = activeModal ? (_a = schema.modals) == null ? void 0 : _a[activeModal.modalId] : null;
266
+ if (activeModal && !modalSchema) {
267
+ console.warn(`Modal "${activeModal.modalId}" not found in schema`);
268
+ }
268
269
  const handleClose = () => {
269
270
  provides.forDocument(documentId).closeModal();
270
271
  };
271
272
  const handleExited = () => {
272
273
  provides.forDocument(documentId).clearModal();
273
274
  };
274
- const ModalRenderer = renderers.modal;
275
- if (!ModalRenderer) {
276
- console.warn("No modal renderer registered");
277
- return null;
278
- }
279
- return /* @__PURE__ */ jsx(
275
+ return /* @__PURE__ */ jsx(Fragment, { children: activeModal && modalSchema && /* @__PURE__ */ jsx(
280
276
  ModalRenderer,
281
277
  {
282
278
  schema: modalSchema,
283
279
  documentId,
284
- isOpen,
280
+ isOpen: activeModal.isOpen,
285
281
  onClose: handleClose,
286
282
  onExited: handleExited
287
- },
288
- modalId
289
- );
283
+ }
284
+ ) }, "modal-slot");
290
285
  },
291
286
  /**
292
287
  * Helper: Get all active toolbars for this document
@@ -335,13 +330,14 @@ function useSchemaRenderer(documentId) {
335
330
  * ```
336
331
  */
337
332
  renderOverlays: () => {
338
- if (!(schema == null ? void 0 : schema.overlays) || !provides) return null;
333
+ if (!schema || !provides) {
334
+ return null;
335
+ }
339
336
  const OverlayRenderer = renderers.overlay;
340
337
  if (!OverlayRenderer) {
341
338
  return null;
342
339
  }
343
- const overlays = Object.values(schema.overlays);
344
- if (overlays.length === 0) return null;
340
+ const overlays = schema.overlays ? Object.values(schema.overlays) : [];
345
341
  return /* @__PURE__ */ jsx(Fragment, { children: overlays.map((overlaySchema) => /* @__PURE__ */ jsx(
346
342
  OverlayRenderer,
347
343
  {
@@ -349,7 +345,7 @@ function useSchemaRenderer(documentId) {
349
345
  documentId
350
346
  },
351
347
  overlaySchema.id
352
- )) });
348
+ )) }, "overlays-slot");
353
349
  }
354
350
  };
355
351
  }