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

package/dist/svelte/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/plugin-ui"),t=require("svelte/internal/client"),n=require("@embedpdf/core/svelte"),r=require("svelte");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}require("svelte/internal/disclose-version");const s=o(t),i=()=>n.usePlugin(e.UIPlugin.id),l=()=>n.useCapability(e.UIPlugin.id),u=e=>{const t=l();let n=s.state(null);const r=s.derived(e),o=s.derived(()=>t.provides&&s.get(r)?t.provides.forDocument(s.get(r)):null);return s.user_effect(()=>{const e=t.provides,o=s.get(r);if(!e||!o)return void s.set(n,null);const i=e.forDocument(o);s.set(n,i.getState(),!0);const l=i.onToolbarChanged(()=>{s.set(n,i.getState(),!0)}),u=i.onPanelChanged(()=>{s.set(n,i.getState(),!0)}),c=i.onModalChanged(()=>{s.set(n,i.getState(),!0)}),d=i.onMenuChanged(()=>{s.set(n,i.getState(),!0)});return()=>{l(),u(),c(),d()}}),{get provides(){return s.get(o)},get state(){return s.get(n)}}},c=Symbol("AnchorRegistry");function d(){const e=new Map;return{register(t,n,r){const o=`${t}:${n}`;e.set(o,r)},unregister(t,n){const r=`${t}:${n}`;e.delete(r)},getAnchor(t,n){const r=`${t}:${n}`;return e.get(r)||null}}}function a(){const e=d();return r.setContext(c,e),e}function p(){const e=r.getContext(c);if(!e)throw new Error("useAnchorRegistry must be used within UIProvider");return e}const g=Symbol("ComponentRegistry");function f(e={}){const t=new Map(Object.entries(e));return{register(e,n){t.set(e,n)},unregister(e){t.delete(e)},get:e=>t.get(e),has:e=>t.has(e),getRegisteredIds:()=>Array.from(t.keys())}}function v(e={}){const t=f(e);return r.setContext(g,t),t}function m(){const e=r.getContext(g);if(!e)throw new Error("useComponentRegistry must be used within UIProvider");return e}const h=Symbol("Renderers");function I(e){r.setContext(h,e)}function b(){const e=r.getContext(h);if(!e)throw new Error("useRenderers must be used within UIProvider");return e}function y(e,t){s.push(t,!0);let n=s.prop(t,"container",3,null);const r=u(()=>t.documentId),o=l(),i=p(),c=b(),d=s.derived(()=>{var e;const n=(null==(e=r.state)?void 0:e.openMenus)||{},o=Object.keys(n);if(0===o.length)return null;const s=o[0];if(!s)return null;const l=n[s];if(!l||!l.triggeredByItemId)return null;return{menuId:s,anchorEl:i.getAnchor(t.documentId,l.triggeredByItemId)}}),a=s.derived(()=>{var e;return null==(e=o.provides)?void 0:e.getSchema()}),g=s.derived(()=>{if(!s.get(d)||!s.get(a))return null;const e=s.get(a).menus[s.get(d).menuId];return e||(console.warn(`Menu "${s.get(d).menuId}" not found in schema`),null)}),f=()=>{var e;s.get(d)&&(null==(e=r.provides)||e.closeMenu(s.get(d).menuId))},v=c.menu;var m=s.comment(),h=s.first_child(m),I=e=>{v(e,{get schema(){return s.get(g)},get documentId(){return t.documentId},get anchorEl(){return s.get(d).anchorEl},onClose:f,get container(){return n()}})};s.if(h,e=>{s.get(d)&&s.get(g)&&v&&e(I)}),s.append(e,m),s.pop()}var S=s.from_html("<div><!></div>");function C(t,n){s.push(n,!0);let r=s.rest_props(n,["$$slots","$$events","$$legacy","children","class"]);const{plugin:o}=i(),{provides:u}=l();let c=s.state(s.proxy([])),d=s.state(null),a=null,p=null;s.user_effect(()=>{if(!s.get(d)||!o)return void(p=null);p=function(e){const t=e.getRootNode();return t instanceof ShadowRoot?t:document.head}(s.get(d));const t=p.querySelector(e.UI_SELECTORS.STYLES);if(t)return a=t,void(t.textContent=o.getStylesheet());const n=o.getStylesheet(),r=document.createElement("style");return r.setAttribute(e.UI_ATTRIBUTES.STYLES,""),r.textContent=n,p instanceof ShadowRoot?p.insertBefore(r,p.firstChild):p.appendChild(r),a=r,()=>{(null==a?void 0:a.parentNode)&&a.remove(),a=null,p=null}}),s.user_effect(()=>{if(o)return o.onStylesheetInvalidated(()=>{a&&(a.textContent=o.getStylesheet())})}),s.user_effect(()=>{if(u)return s.set(c,u.getDisabledCategories(),!0),u.onCategoryChanged(e=>{s.set(c,e.disabledCategories,!0)})});const g=s.derived(()=>s.get(c).length>0?s.get(c).join(" "):void 0);var f=S();s.attribute_effect(f,()=>({...r,[e.UI_ATTRIBUTES.ROOT]:"",...s.get(g)?{[e.UI_ATTRIBUTES.DISABLED_CATEGORIES]:s.get(g)}:{},class:n.class,[s.STYLE]:{"container-type":"inline-size"}}));var v=s.child(f),m=e=>{var t=s.comment(),r=s.first_child(t);s.snippet(r,()=>n.children),s.append(e,t)};s.if(v,e=>{n.children&&e(m)}),s.reset(f),s.bind_this(f,e=>s.set(d,e),()=>s.get(d)),s.append(t,f),s.pop()}var x=s.from_html("<!> <!>",1);exports.AutoMenuRenderer=y,exports.UIProvider=function(e,t){s.push(t,!0);let n=s.prop(t,"components",19,()=>({})),r=s.prop(t,"menuContainer",3,null),o=s.rest_props(t,["$$slots","$$events","$$legacy","children","documentId","components","renderers","menuContainer","class"]);a(),v(n()),I(t.renderers),C(e,s.spread_props({get class(){return t.class}},()=>o,{children:(e,n)=>{var o=x(),i=s.first_child(o);s.snippet(i,()=>t.children),y(s.sibling(i,2),{get documentId(){return t.documentId},get container(){return r()}}),s.append(e,o)},$$slots:{default:!0}})),s.pop()},exports.createAnchorRegistry=d,exports.createComponentRegistry=f,exports.provideAnchorRegistry=a,exports.provideComponentRegistry=v,exports.provideRenderers=I,exports.useAnchorRegistry=p,exports.useComponentRegistry=m,exports.useItemRenderer=function(){const e=m();return{getCustomComponent:t=>{const n=e.get(t);if(n)return n;console.error(`Component "${t}" not found in registry`)}}},exports.useRegisterAnchor=function(e,t){const n=p();let r=s.state(null);const o=s.derived(e),i=s.derived(t);return s.user_effect(()=>{const e=s.get(o),t=s.get(i),l=s.get(r);if(l&&e&&t)return n.register(e,t,l),()=>{n.unregister(e,t)}}),e=>(s.set(r,e,!0),{destroy(){s.set(r,null)}})},exports.useRenderers=b,exports.useSchemaRenderer=function(e){const t=b(),n=l(),r=u(e);return{getToolbarInfo:(o,s)=>{var i;const l=null==(i=n.provides)?void 0:i.getSchema(),u=e();if(!(l&&r.provides&&r.state&&u))return null;const c=`${o}-${s}`,d=r.state.activeToolbars[c];if(!d)return null;const a=l.toolbars[d.toolbarId];if(!a)return console.warn(`Toolbar "${d.toolbarId}" not found in schema`),null;const p=!a.permanent?()=>{var e;null==(e=r.provides)||e.closeToolbarSlot(o,s)}:void 0;return{renderer:t.toolbar,schema:a,documentId:u,isOpen:d.isOpen,onClose:p}},getPanelInfo:(o,s)=>{var i;const l=null==(i=n.provides)?void 0:i.getSchema(),u=e();if(!(l&&r.provides&&r.state&&u))return null;const c=`${o}-${s}`,d=r.state.activePanels[c];if(!d)return null;const a=l.panels[d.panelId];if(!a)return console.warn(`Panel "${d.panelId}" not found in schema`),null;return{renderer:t.panel,schema:a,documentId:u,isOpen:d.isOpen,onClose:()=>{var e;null==(e=r.provides)||e.closePanelSlot(o,s)}}},getActiveToolbars:()=>r.state?Object.entries(r.state.activeToolbars).map(([e,t])=>{const[n,r]=e.split("-");return{placement:n,slot:r,toolbarId:t.toolbarId,isOpen:t.isOpen}}):[],getActivePanels:()=>r.state?Object.entries(r.state.activePanels).map(([e,t])=>{const[n,r]=e.split("-");return{placement:n,slot:r,panelId:t.panelId,isOpen:t.isOpen}}):[]}},exports.useSelectionMenu=function(e,t){const n=l(),r=b(),o="function"==typeof e?e:()=>e,i=s.derived(o),u=s.derived(t),c=s.derived(()=>{var e;return null==(e=n.provides)?void 0:e.getSchema()}),d=s.derived(()=>{var e,t;return null==(t=null==(e=s.get(c))?void 0:e.selectionMenus)?void 0:t[s.get(i)]}),a=s.derived(()=>{if(!s.get(d))return;const e=s.get(d),t=s.get(u),n=r.selectionMenu;return r=>r.selected?{component:n,props:{schema:e,documentId:t,props:r}}:null});return{get renderFn(){return s.get(a)}}},exports.useUICapability=l,exports.useUIPlugin=i,exports.useUISchema=()=>{const e=l();return{get schema(){var t;return(null==(t=e.provides)?void 0:t.getSchema())??null}}},exports.useUIState=u,Object.keys(e).forEach(t=>{"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:()=>e[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/plugin-ui"),t=require("svelte/internal/client"),n=require("@embedpdf/core/svelte"),r=require("svelte");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}require("svelte/internal/disclose-version");const s=o(t),i=()=>n.usePlugin(e.UIPlugin.id),l=()=>n.useCapability(e.UIPlugin.id),u=e=>{const t=l();let n=s.state(null);const r=s.derived(e),o=s.derived(()=>t.provides&&s.get(r)?t.provides.forDocument(s.get(r)):null);return s.user_effect(()=>{const e=t.provides,o=s.get(r);if(!e||!o)return void s.set(n,null);const i=e.forDocument(o);s.set(n,i.getState(),!0);const l=i.onToolbarChanged(()=>{s.set(n,i.getState(),!0)}),u=i.onSidebarChanged(()=>{s.set(n,i.getState(),!0)}),d=i.onModalChanged(()=>{s.set(n,i.getState(),!0)}),c=i.onMenuChanged(()=>{s.set(n,i.getState(),!0)});return()=>{l(),u(),d(),c()}}),{get provides(){return s.get(o)},get state(){return s.get(n)}}},d=Symbol("ui-container");function c(e){r.setContext(d,e)}const a=Symbol("AnchorRegistry");function g(){const e=new Map;return{register(t,n,r){const o=`${t}:${n}`;e.set(o,r)},unregister(t,n){const r=`${t}:${n}`;e.delete(r)},getAnchor(t,n){const r=`${t}:${n}`;return e.get(r)||null}}}function p(){const e=g();return r.setContext(a,e),e}function v(){const e=r.getContext(a);if(!e)throw new Error("useAnchorRegistry must be used within UIProvider");return e}const f=Symbol("ComponentRegistry");function m(e={}){const t=new Map(Object.entries(e));return{register(e,n){t.set(e,n)},unregister(e){t.delete(e)},get:e=>t.get(e),has:e=>t.has(e),getRegisteredIds:()=>Array.from(t.keys())}}function h(e={}){const t=m(e);return r.setContext(f,t),t}function I(){const e=r.getContext(f);if(!e)throw new Error("useComponentRegistry must be used within UIProvider");return e}const b=Symbol("Renderers");function S(e){r.setContext(b,e)}function y(){const e=r.getContext(b);if(!e)throw new Error("useRenderers must be used within UIProvider");return e}function C(e,t){s.push(t,!0);let n=s.prop(t,"container",3,null);const r=u(()=>t.documentId),o=l(),i=v(),d=y(),c=s.derived(()=>{var e;const n=(null==(e=r.state)?void 0:e.openMenus)||{},o=Object.keys(n);if(0===o.length)return null;const s=o[0];if(!s)return null;const l=n[s];if(!l||!l.triggeredByItemId)return null;return{menuId:s,anchorEl:i.getAnchor(t.documentId,l.triggeredByItemId)}}),a=s.derived(()=>{var e;return null==(e=o.provides)?void 0:e.getSchema()}),g=s.derived(()=>{if(!s.get(c)||!s.get(a))return null;const e=s.get(a).menus[s.get(c).menuId];return e||(console.warn(`Menu "${s.get(c).menuId}" not found in schema`),null)}),p=()=>{var e;s.get(c)&&(null==(e=r.provides)||e.closeMenu(s.get(c).menuId))},f=d.menu;var m=s.comment(),h=s.first_child(m),I=e=>{f(e,{get schema(){return s.get(g)},get documentId(){return t.documentId},get anchorEl(){return s.get(c).anchorEl},onClose:p,get container(){return n()}})};s.if(h,e=>{s.get(c)&&s.get(g)&&f&&e(I)}),s.append(e,m),s.pop()}var x=s.from_html("<div><!></div>");function O(t,n){s.push(n,!0);let r=s.rest_props(n,["$$slots","$$events","$$legacy","children","class"]);const{plugin:o}=i(),{provides:u}=l();let d=s.state(s.proxy([])),a=s.state(s.proxy([])),g=s.state(null),p=null,v=null;c({getContainer:()=>s.get(g)}),s.user_effect(()=>{if(!s.get(g)||!o)return void(v=null);v=function(e){const t=e.getRootNode();return t instanceof ShadowRoot?t:document.head}(s.get(g));const t=v.querySelector(e.UI_SELECTORS.STYLES);if(t)return p=t,void(t.textContent=o.getStylesheet());const n=o.getStylesheet(),r=document.createElement("style");return r.setAttribute(e.UI_ATTRIBUTES.STYLES,""),r.textContent=n,v instanceof ShadowRoot?v.insertBefore(r,v.firstChild):v.appendChild(r),p=r,()=>{(null==p?void 0:p.parentNode)&&p.remove(),p=null,v=null}}),s.user_effect(()=>{if(o)return o.onStylesheetInvalidated(()=>{p&&(p.textContent=o.getStylesheet())})}),s.user_effect(()=>{if(u)return s.set(d,u.getDisabledCategories(),!0),s.set(a,u.getHiddenItems(),!0),u.onCategoryChanged(e=>{s.set(d,e.disabledCategories,!0),s.set(a,e.hiddenItems,!0)})});const f=s.derived(()=>s.get(d).length>0?s.get(d).join(" "):void 0),m=s.derived(()=>s.get(a).length>0?s.get(a).join(" "):void 0);var h=x();s.attribute_effect(h,()=>({...r,[e.UI_ATTRIBUTES.ROOT]:"",...s.get(f)?{[e.UI_ATTRIBUTES.DISABLED_CATEGORIES]:s.get(f)}:{},...s.get(m)?{[e.UI_ATTRIBUTES.HIDDEN_ITEMS]:s.get(m)}:{},class:n.class,[s.STYLE]:{"container-type":"inline-size"}}));var I=s.child(h),b=e=>{var t=s.comment(),r=s.first_child(t);s.snippet(r,()=>n.children),s.append(e,t)};s.if(I,e=>{n.children&&e(b)}),s.reset(h),s.bind_this(h,e=>s.set(g,e),()=>s.get(g)),s.append(t,h),s.pop()}var R=s.from_html("<!> <!>",1);exports.AutoMenuRenderer=C,exports.UIProvider=function(e,t){s.push(t,!0);let n=s.prop(t,"components",19,()=>({})),r=s.prop(t,"menuContainer",3,null),o=s.rest_props(t,["$$slots","$$events","$$legacy","children","documentId","components","renderers","menuContainer","class"]);p(),h(n()),S(t.renderers),O(e,s.spread_props({get class(){return t.class}},()=>o,{children:(e,n)=>{var o=R(),i=s.first_child(o);s.snippet(i,()=>t.children),C(s.sibling(i,2),{get documentId(){return t.documentId},get container(){return r()}}),s.append(e,o)},$$slots:{default:!0}})),s.pop()},exports.createAnchorRegistry=g,exports.createComponentRegistry=m,exports.provideAnchorRegistry=p,exports.provideComponentRegistry=h,exports.provideRenderers=S,exports.setUIContainerContext=c,exports.useAnchorRegistry=v,exports.useComponentRegistry=I,exports.useItemRenderer=function(){const e=I();return{getCustomComponent:t=>{const n=e.get(t);if(n)return n;console.error(`Component "${t}" not found in registry`)}}},exports.useRegisterAnchor=function(e,t){const n=v();let r=s.state(null);const o=s.derived(e),i=s.derived(t);return s.user_effect(()=>{const e=s.get(o),t=s.get(i),l=s.get(r);if(l&&e&&t)return n.register(e,t,l),()=>{n.unregister(e,t)}}),e=>(s.set(r,e,!0),{destroy(){s.set(r,null)}})},exports.useRenderers=y,exports.useSchemaRenderer=function(e){const t=y(),n=l(),r=u(e);return{getToolbarInfo:(o,s)=>{var i;const l=null==(i=n.provides)?void 0:i.getSchema(),u=e();if(!(l&&r.provides&&r.state&&u))return null;const d=`${o}-${s}`,c=r.state.activeToolbars[d];if(!c)return null;const a=l.toolbars[c.toolbarId];if(!a)return console.warn(`Toolbar "${c.toolbarId}" not found in schema`),null;const g=!a.permanent?()=>{var e;null==(e=r.provides)||e.closeToolbarSlot(o,s)}:void 0;return{renderer:t.toolbar,schema:a,documentId:u,isOpen:c.isOpen,onClose:g}},getSidebarInfo:(o,s)=>{var i,l;const u=null==(i=n.provides)?void 0:i.getSchema(),d=e();if(!(u&&r.provides&&r.state&&d))return null;const c=`${o}-${s}`,a=r.state.activeSidebars[c];if(!a)return null;const g=null==(l=u.sidebars)?void 0:l[a.sidebarId];if(!g)return console.warn(`Sidebar "${a.sidebarId}" not found in schema`),null;return{renderer:t.sidebar,schema:g,documentId:d,isOpen:a.isOpen,onClose:()=>{var e;null==(e=r.provides)||e.closeSidebarSlot(o,s)}}},getModalInfo:()=>{var o,s,i;const l=null==(o=n.provides)?void 0:o.getSchema(),u=e();if(!(l&&r.provides&&(null==(s=r.state)?void 0:s.activeModal)&&u))return null;const{modalId:d,isOpen:c}=r.state.activeModal,a=null==(i=l.modals)?void 0:i[d];if(!a)return console.warn(`Modal "${d}" not found in schema`),null;const g=t.modal;return g?{renderer:g,schema:a,documentId:u,isOpen:c,onClose:()=>{var e;null==(e=r.provides)||e.closeModal()},onExited:()=>{var e;null==(e=r.provides)||e.clearModal()}}:(console.warn("No modal renderer registered"),null)},getActiveToolbars:()=>r.state?Object.entries(r.state.activeToolbars).map(([e,t])=>{const[n,r]=e.split("-");return{placement:n,slot:r,toolbarId:t.toolbarId,isOpen:t.isOpen}}):[],getActiveSidebars:()=>r.state?Object.entries(r.state.activeSidebars).map(([e,t])=>{const[n,r]=e.split("-");return{placement:n,slot:r,sidebarId:t.sidebarId,isOpen:t.isOpen}}):[],getOverlaysInfo:()=>{var r;const o=null==(r=n.provides)?void 0:r.getSchema(),s=e();if(!(null==o?void 0:o.overlays)||!s)return[];const i=t.overlay;return i?Object.values(o.overlays).map(e=>({renderer:i,schema:e,documentId:s})):[]}}},exports.useSelectionMenu=function(e,t){const n=l(),r=y(),o="function"==typeof e?e:()=>e,i=s.derived(o),u=s.derived(t),d=s.derived(()=>{var e;return null==(e=n.provides)?void 0:e.getSchema()}),c=s.derived(()=>{var e,t;return null==(t=null==(e=s.get(d))?void 0:e.selectionMenus)?void 0:t[s.get(i)]}),a=s.derived(()=>{if(!s.get(c))return;const e=s.get(c),t=s.get(u),n=r.selectionMenu;return r=>r.selected?{component:n,props:{schema:e,documentId:t,props:r}}:null});return{get renderFn(){return s.get(a)}}},exports.useUICapability=l,exports.useUIContainer=function(){const e=r.getContext(d);if(!e)throw new Error("useUIContainer must be used within a UIProvider");return e},exports.useUIPlugin=i,exports.useUISchema=()=>{const e=l();return{get schema(){var t;return(null==(t=e.provides)?void 0:t.getSchema())??null}}},exports.useUIState=u,Object.keys(e).forEach(t=>{"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:()=>e[t]})});
 //# sourceMappingURL=index.cjs.map

package/dist/svelte/index.cjs.map

@@ -1 +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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"}
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-ui.svelte.ts","../../src/svelte/hooks/use-ui-container.svelte.ts","../../src/svelte/registries/anchor-registry.svelte.ts","../../src/svelte/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, UIScope } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to get the raw UI plugin instance.\n */\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\n\n/**\n * Hook to get the UI plugin's capability API.\n */\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseUIStateReturn {\n  provides: UIScope | null;\n  state: UIDocumentState | null;\n}\n\n/**\n * Hook for UI state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useUIState = (getDocumentId: () => string | null): UseUIStateReturn => {\n  const capability = useUICapability();\n\n  let state = $state<UIDocumentState | null>(null);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = null;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Set initial state\n    state = scope.getState();\n\n    // Subscribe to all changes and update state\n    const unsubToolbar = scope.onToolbarChanged(() => {\n      state = scope.getState();\n    });\n    const unsubSidebar = scope.onSidebarChanged(() => {\n      state = scope.getState();\n    });\n    const unsubModal = scope.onModalChanged(() => {\n      state = scope.getState();\n    });\n    const unsubMenu = scope.onMenuChanged(() => {\n      state = scope.getState();\n    });\n\n    return () => {\n      unsubToolbar();\n      unsubSidebar();\n      unsubModal();\n      unsubMenu();\n    };\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n\n/**\n * Hook to get UI schema\n * Returns an object with a reactive getter for the schema\n */\nexport const useUISchema = () => {\n  const capability = useUICapability();\n\n  return {\n    get schema() {\n      return capability.provides?.getSchema() ?? null;\n    },\n  };\n};\n","import { getContext, setContext } from 'svelte';\n\nexport interface UIContainerContextValue {\n  /** Get the container element (may be null if not mounted) */\n  getContainer: () => HTMLDivElement | null;\n}\n\nconst UI_CONTAINER_KEY = Symbol('ui-container');\n\n/**\n * Set up the container context (called by UIRoot)\n */\nexport function setUIContainerContext(value: UIContainerContextValue): void {\n  setContext(UI_CONTAINER_KEY, value);\n}\n\n/**\n * Hook to access the UI container element.\n *\n * This provides access to the UIRoot container for:\n * - Container query based responsiveness\n * - Portaling elements to the root\n * - Measuring container dimensions\n *\n * @example\n * ```svelte\n * <script>\n *   import { useUIContainer } from '@embedpdf/plugin-ui/svelte';\n *   import { onMount, onDestroy } from 'svelte';\n *\n *   const { getContainer } = useUIContainer();\n *\n *   let observer;\n *\n *   onMount(() => {\n *     const container = getContainer();\n *     if (!container) return;\n *\n *     observer = new ResizeObserver(() => {\n *       console.log('Container width:', container.clientWidth);\n *     });\n *     observer.observe(container);\n *   });\n *\n *   onDestroy(() => observer?.disconnect());\n * </script>\n * ```\n */\nexport function useUIContainer(): UIContainerContextValue {\n  const context = getContext<UIContainerContextValue>(UI_CONTAINER_KEY);\n  if (!context) {\n    throw new Error('useUIContainer must be used within a UIProvider');\n  }\n  return context;\n}\n","import { getContext, setContext } from 'svelte';\n\n/**\n * Anchor Registry\n *\n * Tracks DOM elements for menu positioning.\n * Each anchor is scoped by documentId and itemId.\n */\nexport interface AnchorRegistry {\n  register(documentId: string, itemId: string, element: HTMLElement): void;\n  unregister(documentId: string, itemId: string): void;\n  getAnchor(documentId: string, itemId: string): HTMLElement | null;\n}\n\nconst ANCHOR_REGISTRY_KEY = Symbol('AnchorRegistry');\n\nexport function createAnchorRegistry(): AnchorRegistry {\n  const anchors = new Map<string, HTMLElement>();\n\n  return {\n    register(documentId: string, itemId: string, element: HTMLElement) {\n      const key = `${documentId}:${itemId}`;\n      anchors.set(key, element);\n    },\n\n    unregister(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      anchors.delete(key);\n    },\n\n    getAnchor(documentId: string, itemId: string) {\n      const key = `${documentId}:${itemId}`;\n      return anchors.get(key) || null;\n    },\n  };\n}\n\nexport function provideAnchorRegistry() {\n  const registry = createAnchorRegistry();\n  setContext(ANCHOR_REGISTRY_KEY, registry);\n  return registry;\n}\n\nexport function useAnchorRegistry(): AnchorRegistry {\n  const registry = getContext<AnchorRegistry>(ANCHOR_REGISTRY_KEY);\n  if (!registry) {\n    throw new Error('useAnchorRegistry must be used within UIProvider');\n  }\n  return registry;\n}\n","import { 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 { setUIContainerContext } from './hooks/use-ui-container.svelte';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type Props = HTMLAttributes<HTMLDivElement> & {\n    children?: Snippet;\n  };\n\n  let { children, class: className, ...restProps }: Props = $props();\n\n  const { plugin } = useUIPlugin();\n  const { provides } = useUICapability();\n\n  let disabledCategories = $state<string[]>([]);\n  let hiddenItems = $state<string[]>([]);\n  let rootElement: HTMLDivElement | null = $state(null);\n  let styleEl: HTMLStyleElement | null = null;\n  let styleTarget: HTMLElement | ShadowRoot | null = null;\n\n  // Provide container context for child components\n  setUIContainerContext({\n    getContainer: () => rootElement,\n  });\n\n  function getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {\n    const root = element.getRootNode();\n    if (root instanceof ShadowRoot) {\n      return root;\n    }\n    return document.head;\n  }\n\n  $effect(() => {\n    if (!rootElement || !plugin) {\n      styleTarget = null;\n      return;\n    }\n\n    styleTarget = getStyleTarget(rootElement);\n\n    const existingStyle = styleTarget.querySelector(UI_SELECTORS.STYLES) as HTMLStyleElement | null;\n\n    if (existingStyle) {\n      styleEl = existingStyle;\n      existingStyle.textContent = plugin.getStylesheet();\n      return;\n    }\n\n    const stylesheet = plugin.getStylesheet();\n    const newStyleEl = document.createElement('style');\n    newStyleEl.setAttribute(UI_ATTRIBUTES.STYLES, '');\n    newStyleEl.textContent = stylesheet;\n\n    if (styleTarget instanceof ShadowRoot) {\n      styleTarget.insertBefore(newStyleEl, styleTarget.firstChild);\n    } else {\n      styleTarget.appendChild(newStyleEl);\n    }\n\n    styleEl = newStyleEl;\n\n    return () => {\n      if (styleEl?.parentNode) {\n        styleEl.remove();\n      }\n      styleEl = null;\n      styleTarget = null;\n    };\n  });\n\n  $effect(() => {\n    if (!plugin) return;\n\n    return plugin.onStylesheetInvalidated(() => {\n      if (styleEl) {\n        styleEl.textContent = plugin.getStylesheet();\n      }\n    });\n  });\n\n  $effect(() => {\n    if (!provides) return;\n\n    disabledCategories = provides.getDisabledCategories();\n    hiddenItems = provides.getHiddenItems();\n\n    return provides.onCategoryChanged((event) => {\n      disabledCategories = event.disabledCategories;\n      hiddenItems = event.hiddenItems;\n    });\n  });\n\n  const disabledCategoriesAttr = $derived(\n    disabledCategories.length > 0 ? disabledCategories.join(' ') : undefined,\n  );\n\n  const hiddenItemsAttr = $derived(hiddenItems.length > 0 ? hiddenItems.join(' ') : undefined);\n</script>\n\n<div\n  bind:this={rootElement}\n  {...restProps}\n  {...{ [UI_ATTRIBUTES.ROOT]: '' }}\n  {...disabledCategoriesAttr ? { [UI_ATTRIBUTES.DISABLED_CATEGORIES]: disabledCategoriesAttr } : {}}\n  {...hiddenItemsAttr ? { [UI_ATTRIBUTES.HIDDEN_ITEMS]: hiddenItemsAttr } : {}}\n  class={className}\n  style:container-type=\"inline-size\"\n>\n  {#if children}\n    {@render children()}\n  {/if}\n</div>\n","<script lang=\"ts\">\n  import type { Component, Snippet } from 'svelte';\n  import { provideAnchorRegistry } from './registries/anchor-registry.svelte';\n  import { provideComponentRegistry } from './registries/component-registry.svelte';\n  import { provideRenderers } from './registries/renderers-registry.svelte';\n  import type { UIComponents, UIRenderers } from './types';\n  import AutoMenuRenderer from './auto-menu-renderer.svelte';\n  import UIRoot from './root.svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  /**\n   * UIProvider Props\n   */\n  type ProviderProps = HTMLAttributes<HTMLDivElement> & {\n    children: Snippet;\n\n    /**\n     * Document ID for this UI context\n     * Required for menu rendering\n     */\n    documentId: string;\n\n    /**\n     * Custom component registry\n     * Maps component IDs to components\n     */\n    components?: UIComponents;\n\n    /**\n     * REQUIRED: User-provided renderers\n     * These define how toolbars, panels, and menus are displayed\n     */\n    renderers: UIRenderers;\n\n    /**\n     * Optional: Container for menu portal\n     * Defaults to document.body\n     */\n    menuContainer?: HTMLElement | null;\n\n    class?: string;\n  };\n\n  let {\n    children,\n    documentId,\n    components = {},\n    renderers,\n    menuContainer = null,\n    class: className,\n    ...restProps\n  }: ProviderProps = $props();\n\n  /**\n   * UIProvider - Single provider for all UI plugin functionality\n   *\n   * Manages:\n   * - Anchor registry for menu positioning\n   * - Component registry for custom components\n   * - Renderers for toolbars, panels, and menus\n   * - Automatic menu rendering\n   *\n   * @example\n   * ```svelte\n   * <EmbedPDF {engine} {plugins}>\n   *   {#snippet children({ pluginsReady, activeDocumentId })}\n   *     {#if pluginsReady && activeDocumentId}\n   *       <UIProvider\n   *         documentId={activeDocumentId}\n   *         components={{\n   *           'thumbnail-panel': ThumbnailPanel,\n   *           'bookmark-panel': BookmarkPanel,\n   *         }}\n   *         renderers={{\n   *           toolbar: ToolbarRenderer,\n   *           panel: PanelRenderer,\n   *           menu: MenuRenderer,\n   *         }}\n   *       >\n   *         {#snippet children()}\n   *           <ViewerLayout />\n   *         {/snippet}\n   *       </UIProvider>\n   *     {/if}\n   *   {/snippet}\n   * </EmbedPDF>\n   * ```\n   */\n\n  // Provide all registries\n  provideAnchorRegistry();\n  provideComponentRegistry(components);\n  provideRenderers(renderers);\n</script>\n\n<UIRoot class={className} {...restProps}>\n  {@render children()}\n  <AutoMenuRenderer {documentId} container={menuContainer} />\n</UIRoot>\n","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, sidebars, and modals.\n * Always includes isOpen state so renderers can control animations.\n *\n * Use with Svelte's component binding to render toolbars and sidebars.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   const { getToolbarInfo, getSidebarInfo, getModalInfo } = useSchemaRenderer(() => documentId);\n *\n *   const topMainToolbar = $derived(getToolbarInfo('top', 'main'));\n *   const leftMainSidebar = $derived(getSidebarInfo('left', 'main'));\n *   const modal = $derived(getModalInfo());\n * </script>\n *\n * {#if topMainToolbar}\n *   {@const ToolbarRenderer = topMainToolbar.renderer}\n *   <ToolbarRenderer\n *     schema={topMainToolbar.schema}\n *     documentId={topMainToolbar.documentId}\n *     isOpen={topMainToolbar.isOpen}\n *     onClose={topMainToolbar.onClose}\n *   />\n * {/if}\n * ```\n */\nexport function useSchemaRenderer(getDocumentId: () => string | null) {\n  const renderers = useRenderers();\n  const capability = useUICapability();\n  const uiState = useUIState(getDocumentId);\n\n  return {\n    /**\n     * Get toolbar information by placement and slot\n     *\n     * @param placement - 'top' | 'bottom' | 'left' | 'right'\n     * @param slot - Slot name (e.g. 'main', 'secondary')\n     * @returns Toolbar info or null if no toolbar in slot\n     */\n    getToolbarInfo: (placement: 'top' | 'bottom' | 'left' | 'right', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const toolbarSlot = uiState.state.activeToolbars[slotKey];\n\n      // If no toolbar in this slot, nothing to render\n      if (!toolbarSlot) return null;\n\n      const toolbarSchema = schema.toolbars[toolbarSlot.toolbarId];\n      if (!toolbarSchema) {\n        console.warn(`Toolbar \"${toolbarSlot.toolbarId}\" not found in schema`);\n        return null;\n      }\n\n      // Check if toolbar is closable\n      const isClosable = !toolbarSchema.permanent;\n\n      const handleClose = isClosable\n        ? () => {\n            uiState.provides?.closeToolbarSlot(placement, slot);\n          }\n        : undefined;\n\n      return {\n        renderer: renderers.toolbar,\n        schema: toolbarSchema,\n        documentId,\n        isOpen: toolbarSlot.isOpen,\n        onClose: handleClose,\n      };\n    },\n\n    /**\n     * Get sidebar information by placement and slot\n     *\n     * @param placement - 'left' | 'right' | 'top' | 'bottom'\n     * @param slot - Slot name (e.g. 'main', 'secondary', 'inspector')\n     * @returns Sidebar info or null if no sidebar in slot\n     */\n    getSidebarInfo: (placement: 'left' | 'right' | 'top' | 'bottom', slot: string) => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state || !documentId) return null;\n\n      const slotKey = `${placement}-${slot}`;\n      const sidebarSlot = uiState.state.activeSidebars[slotKey];\n\n      // If no sidebar in this slot, nothing to render\n      if (!sidebarSlot) return null;\n\n      const sidebarSchema = schema.sidebars?.[sidebarSlot.sidebarId];\n      if (!sidebarSchema) {\n        console.warn(`Sidebar \"${sidebarSlot.sidebarId}\" not found in schema`);\n        return null;\n      }\n\n      const handleClose = () => {\n        uiState.provides?.closeSidebarSlot(placement, slot);\n      };\n\n      return {\n        renderer: renderers.sidebar,\n        schema: sidebarSchema,\n        documentId,\n        isOpen: sidebarSlot.isOpen,\n        onClose: handleClose,\n      };\n    },\n\n    /**\n     * Get modal information (if active)\n     *\n     * Supports animation lifecycle:\n     * - isOpen: true = visible\n     * - isOpen: false = animate out (modal still rendered)\n     * - onExited called after animation → modal removed\n     *\n     * @returns Modal info or null if no modal active\n     */\n    getModalInfo: () => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema || !uiState.provides || !uiState.state?.activeModal || !documentId) return null;\n\n      const { modalId, isOpen } = uiState.state.activeModal;\n\n      const modalSchema = schema.modals?.[modalId];\n      if (!modalSchema) {\n        console.warn(`Modal \"${modalId}\" not found in schema`);\n        return null;\n      }\n\n      const handleClose = () => {\n        uiState.provides?.closeModal();\n      };\n\n      const handleExited = () => {\n        uiState.provides?.clearModal();\n      };\n\n      const ModalRenderer = renderers.modal;\n      if (!ModalRenderer) {\n        console.warn('No modal renderer registered');\n        return null;\n      }\n\n      return {\n        renderer: ModalRenderer,\n        schema: modalSchema,\n        documentId,\n        isOpen,\n        onClose: handleClose,\n        onExited: handleExited,\n      };\n    },\n\n    /**\n     * Helper: Get all active toolbars for this document\n     * Useful for batch rendering or debugging\n     */\n    getActiveToolbars: () => {\n      if (!uiState.state) return [];\n      return Object.entries(uiState.state.activeToolbars).map(([slotKey, toolbarSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          toolbarId: toolbarSlot.toolbarId,\n          isOpen: toolbarSlot.isOpen,\n        };\n      });\n    },\n\n    /**\n     * Helper: Get all active sidebars for this document\n     * Useful for batch rendering or debugging\n     */\n    getActiveSidebars: () => {\n      if (!uiState.state) return [];\n      return Object.entries(uiState.state.activeSidebars).map(([slotKey, sidebarSlot]) => {\n        const [placement, slot] = slotKey.split('-');\n        return {\n          placement,\n          slot,\n          sidebarId: sidebarSlot.sidebarId,\n          isOpen: sidebarSlot.isOpen,\n        };\n      });\n    },\n\n    /**\n     * Get overlay information for all enabled overlays\n     *\n     * Overlays are floating components positioned over the document content.\n     * Unlike modals, multiple overlays can be visible and they don't block interaction.\n     *\n     * @example\n     * ```svelte\n     * <script lang=\"ts\">\n     *   const { getOverlaysInfo } = useSchemaRenderer(() => documentId);\n     *   const overlays = $derived(getOverlaysInfo());\n     * </script>\n     *\n     * {#each overlays as overlay (overlay.schema.id)}\n     *   {@const OverlayRenderer = overlay.renderer}\n     *   <OverlayRenderer schema={overlay.schema} documentId={overlay.documentId} />\n     * {/each}\n     * ```\n     */\n    getOverlaysInfo: () => {\n      const schema = capability.provides?.getSchema();\n      const documentId = getDocumentId();\n\n      if (!schema?.overlays || !documentId) return [];\n\n      const OverlayRenderer = renderers.overlay;\n      if (!OverlayRenderer) {\n        return [];\n      }\n\n      return Object.values(schema.overlays).map((overlaySchema) => ({\n        renderer: OverlayRenderer,\n        schema: overlaySchema,\n        documentId,\n      }));\n    },\n  };\n}\n\n// Import after definition to avoid circular dependency\nimport { useUIState } from './use-ui.svelte';\n","import type {\n  SelectionMenuPropsBase,\n  SelectionMenuRenderFn,\n  SelectionMenuRenderResult,\n} from '@embedpdf/utils/svelte';\nimport { useUICapability } from './use-ui.svelte';\nimport { useRenderers } from '../registries/renderers-registry.svelte';\n\n/**\n * Hook for schema-driven selection menus\n */\nexport function useSelectionMenu<TContext extends { type: string }>(\n  menuId: string | (() => string),\n  getDocumentId: () => string,\n) {\n  const uiCapability = useUICapability();\n  const renderers = useRenderers();\n\n  // Normalize menuId to always be a function, then make it reactive\n  const getMenuIdFn = typeof menuId === 'function' ? menuId : () => menuId;\n  const menuIdValue = $derived(getMenuIdFn());\n  const documentId = $derived(getDocumentId());\n  const schema = $derived(uiCapability.provides?.getSchema());\n  const menuSchema = $derived(schema?.selectionMenus?.[menuIdValue]);\n\n  const renderFn = $derived.by<SelectionMenuRenderFn<TContext> | undefined>(() => {\n    if (!menuSchema) return undefined;\n\n    const currentMenuSchema = menuSchema;\n    const currentDocumentId = documentId;\n    const SelectionMenuRenderer = renderers.selectionMenu;\n\n    return (props: SelectionMenuPropsBase<TContext>): SelectionMenuRenderResult | null => {\n      if (!props.selected) return null;\n\n      return {\n        component: SelectionMenuRenderer,\n        props: {\n          schema: currentMenuSchema,\n          documentId: currentDocumentId,\n          props,\n        },\n      };\n    };\n  });\n\n  return {\n    get renderFn() {\n      return renderFn;\n    },\n  };\n}\n"],"names":["useUIPlugin","usePlugin","UIPlugin","id","useUICapability","useCapability","useUIState","getDocumentId","capability","state","documentId","scopedProvides","$","derived","provides","forDocument","user_effect","docId","set","scope","getState","unsubToolbar","onToolbarChanged","unsubSidebar","onSidebarChanged","unsubModal","onModalChanged","unsubMenu","onMenuChanged","UI_CONTAINER_KEY","Symbol","setUIContainerContext","value","setContext","ANCHOR_REGISTRY_KEY","createAnchorRegistry","anchors","Map","register","itemId","element","key","unregister","delete","getAnchor","get","provideAnchorRegistry","registry","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","hiddenItems","rootElement","styleEl","styleTarget","getContainer","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","getHiddenItems","onCategoryChanged","event","disabledCategoriesAttr","join","hiddenItemsAttr","ROOT","DISABLED_CATEGORIES","HIDDEN_ITEMS","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","getSidebarInfo","sidebarSlot","activeSidebars","sidebarSchema","_b","sidebars","sidebarId","sidebar","closeSidebarSlot","getModalInfo","activeModal","modalId","modalSchema","_c","modals","ModalRenderer","modal","closeModal","onExited","clearModal","getActiveToolbars","map","split","getActiveSidebars","getOverlaysInfo","overlays","OverlayRenderer","overlay","values","overlaySchema","uiCapability","getMenuIdFn","menuIdValue","selectionMenus","renderFn","currentMenuSchema","currentDocumentId","SelectionMenuRenderer","selectionMenu","props","selected","context"],"mappings":"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"}

package/dist/svelte/index.js

@@ -23,7 +23,7 @@ const useUIState = (getDocumentId) => {
     const unsubToolbar = scope.onToolbarChanged(() => {
       $.set(state, scope.getState(), true);
     });
-    const unsubPanel = scope.onPanelChanged(() => {
+    const unsubSidebar = scope.onSidebarChanged(() => {
       $.set(state, scope.getState(), true);
     });
     const unsubModal = scope.onModalChanged(() => {
@@ -34,7 +34,7 @@ const useUIState = (getDocumentId) => {
     });
     return () => {
       unsubToolbar();
-      unsubPanel();
+      unsubSidebar();
       unsubModal();
       unsubMenu();
     };
@@ -57,6 +57,17 @@ const useUISchema = () => {
     }
   };
 };
+const UI_CONTAINER_KEY = Symbol("ui-container");
+function setUIContainerContext(value) {
+  setContext(UI_CONTAINER_KEY, value);
+}
+function useUIContainer() {
+  const context = getContext(UI_CONTAINER_KEY);
+  if (!context) {
+    throw new Error("useUIContainer must be used within a UIProvider");
+  }
+  return context;
+}
 const ANCHOR_REGISTRY_KEY = Symbol("AnchorRegistry");
 function createAnchorRegistry() {
   const anchors = /* @__PURE__ */ new Map();
@@ -227,37 +238,80 @@ function useSchemaRenderer(getDocumentId) {
       };
     },
     /**
-     * Get panel information by placement and slot
+     * Get sidebar 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
+     * @returns Sidebar info or null if no sidebar in slot
      */
-    getPanelInfo: (placement, slot) => {
-      var _a;
+    getSidebarInfo: (placement, slot) => {
+      var _a, _b;
       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`);
+      const sidebarSlot = uiState.state.activeSidebars[slotKey];
+      if (!sidebarSlot) return null;
+      const sidebarSchema = (_b = schema.sidebars) == null ? void 0 : _b[sidebarSlot.sidebarId];
+      if (!sidebarSchema) {
+        console.warn(`Sidebar "${sidebarSlot.sidebarId}" not found in schema`);
         return null;
       }
       const handleClose = () => {
         var _a2;
-        (_a2 = uiState.provides) == null ? void 0 : _a2.closePanelSlot(placement, slot);
+        (_a2 = uiState.provides) == null ? void 0 : _a2.closeSidebarSlot(placement, slot);
       };
       return {
-        renderer: renderers.panel,
-        schema: panelSchema,
+        renderer: renderers.sidebar,
+        schema: sidebarSchema,
         documentId,
-        isOpen: panelSlot.isOpen,
+        isOpen: sidebarSlot.isOpen,
         onClose: handleClose
       };
     },
+    /**
+     * Get modal information (if active)
+     *
+     * Supports animation lifecycle:
+     * - isOpen: true = visible
+     * - isOpen: false = animate out (modal still rendered)
+     * - onExited called after animation → modal removed
+     *
+     * @returns Modal info or null if no modal active
+     */
+    getModalInfo: () => {
+      var _a, _b, _c;
+      const schema = (_a = capability.provides) == null ? void 0 : _a.getSchema();
+      const documentId = getDocumentId();
+      if (!schema || !uiState.provides || !((_b = uiState.state) == null ? void 0 : _b.activeModal) || !documentId) return null;
+      const { modalId, isOpen } = uiState.state.activeModal;
+      const modalSchema = (_c = schema.modals) == null ? void 0 : _c[modalId];
+      if (!modalSchema) {
+        console.warn(`Modal "${modalId}" not found in schema`);
+        return null;
+      }
+      const handleClose = () => {
+        var _a2;
+        (_a2 = uiState.provides) == null ? void 0 : _a2.closeModal();
+      };
+      const handleExited = () => {
+        var _a2;
+        (_a2 = uiState.provides) == null ? void 0 : _a2.clearModal();
+      };
+      const ModalRenderer = renderers.modal;
+      if (!ModalRenderer) {
+        console.warn("No modal renderer registered");
+        return null;
+      }
+      return {
+        renderer: ModalRenderer,
+        schema: modalSchema,
+        documentId,
+        isOpen,
+        onClose: handleClose,
+        onExited: handleExited
+      };
+    },
     /**
      * Helper: Get all active toolbars for this document
      * Useful for batch rendering or debugging
@@ -275,20 +329,50 @@ function useSchemaRenderer(getDocumentId) {
       });
     },
     /**
-     * Helper: Get all active panels for this document
+     * Helper: Get all active sidebars for this document
      * Useful for batch rendering or debugging
      */
-    getActivePanels: () => {
+    getActiveSidebars: () => {
       if (!uiState.state) return [];
-      return Object.entries(uiState.state.activePanels).map(([slotKey, panelSlot]) => {
+      return Object.entries(uiState.state.activeSidebars).map(([slotKey, sidebarSlot]) => {
         const [placement, slot] = slotKey.split("-");
         return {
           placement,
           slot,
-          panelId: panelSlot.panelId,
-          isOpen: panelSlot.isOpen
+          sidebarId: sidebarSlot.sidebarId,
+          isOpen: sidebarSlot.isOpen
         };
       });
+    },
+    /**
+     * Get overlay information for all enabled overlays
+     *
+     * Overlays are floating components positioned over the document content.
+     * Unlike modals, multiple overlays can be visible and they don't block interaction.
+     *
+     * @example
+     * ```svelte
+     * <script lang="ts">
+     *   const { getOverlaysInfo } = useSchemaRenderer(() => documentId);
+     *   const overlays = $derived(getOverlaysInfo());
+     * <\/script>
+     *
+     * {#each overlays as overlay (overlay.schema.id)}
+     *   {@const OverlayRenderer = overlay.renderer}
+     *   <OverlayRenderer schema={overlay.schema} documentId={overlay.documentId} />
+     * {/each}
+     * ```
+     */
+    getOverlaysInfo: () => {
+      var _a;
+      const schema = (_a = capability.provides) == null ? void 0 : _a.getSchema();
+      const documentId = getDocumentId();
+      if (!(schema == null ? void 0 : schema.overlays) || !documentId) return [];
+      const OverlayRenderer = renderers.overlay;
+      if (!OverlayRenderer) {
+        return [];
+      }
+      return Object.values(schema.overlays).map((overlaySchema) => ({ renderer: OverlayRenderer, schema: overlaySchema, documentId }));
     }
   };
 }
@@ -402,9 +486,11 @@ function Root($$anchor, $$props) {
   const { plugin } = useUIPlugin();
   const { provides } = useUICapability();
   let disabledCategories = $.state($.proxy([]));
+  let hiddenItems = $.state($.proxy([]));
   let rootElement = $.state(null);
   let styleEl = null;
   let styleTarget = null;
+  setUIContainerContext({ getContainer: () => $.get(rootElement) });
   function getStyleTarget(element) {
     const root = element.getRootNode();
     if (root instanceof ShadowRoot) {
@@ -453,11 +539,14 @@ function Root($$anchor, $$props) {
   $.user_effect(() => {
     if (!provides) return;
     $.set(disabledCategories, provides.getDisabledCategories(), true);
+    $.set(hiddenItems, provides.getHiddenItems(), true);
     return provides.onCategoryChanged((event) => {
       $.set(disabledCategories, event.disabledCategories, true);
+      $.set(hiddenItems, event.hiddenItems, true);
     });
   });
   const disabledCategoriesAttr = $.derived(() => $.get(disabledCategories).length > 0 ? $.get(disabledCategories).join(" ") : void 0);
+  const hiddenItemsAttr = $.derived(() => $.get(hiddenItems).length > 0 ? $.get(hiddenItems).join(" ") : void 0);
   var div = root_1$1();
   $.attribute_effect(div, () => ({
     ...restProps,
@@ -465,6 +554,7 @@ function Root($$anchor, $$props) {
     ...$.get(disabledCategoriesAttr) ? {
       [UI_ATTRIBUTES.DISABLED_CATEGORIES]: $.get(disabledCategoriesAttr)
     } : {},
+    ...$.get(hiddenItemsAttr) ? { [UI_ATTRIBUTES.HIDDEN_ITEMS]: $.get(hiddenItemsAttr) } : {},
     class: $$props.class,
     [$.STYLE]: { "container-type": "inline-size" }
   }));
@@ -538,6 +628,7 @@ export {
   provideAnchorRegistry,
   provideComponentRegistry,
   provideRenderers,
+  setUIContainerContext,
   useAnchorRegistry,
   useComponentRegistry,
   useItemRenderer,
@@ -546,6 +637,7 @@ export {
   useSchemaRenderer,
   useSelectionMenu,
   useUICapability,
+  useUIContainer,
   useUIPlugin,
   useUISchema,
   useUIState