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

package/dist/index.js

@@ -9,13 +9,13 @@ const manifest = {
   // Depends on commands
   optional: ["i18n"],
   defaultConfig: {
-    enabled: true,
     schema: {
       id: "empty",
       version: "1.0.0",
       toolbars: {},
       menus: {},
-      panels: {},
+      sidebars: {},
+      modals: {},
       selectionMenus: {}
     }
   }
@@ -24,15 +24,17 @@ const INIT_UI_STATE = "UI/INIT_STATE";
 const CLEANUP_UI_STATE = "UI/CLEANUP_STATE";
 const SET_ACTIVE_TOOLBAR = "UI/SET_ACTIVE_TOOLBAR";
 const CLOSE_TOOLBAR_SLOT = "UI/CLOSE_TOOLBAR_SLOT";
-const SET_ACTIVE_PANEL = "UI/SET_ACTIVE_PANEL";
-const CLOSE_PANEL_SLOT = "UI/CLOSE_PANEL_SLOT";
-const SET_PANEL_TAB = "UI/SET_PANEL_TAB";
+const SET_ACTIVE_SIDEBAR = "UI/SET_ACTIVE_SIDEBAR";
+const CLOSE_SIDEBAR_SLOT = "UI/CLOSE_SIDEBAR_SLOT";
+const SET_SIDEBAR_TAB = "UI/SET_SIDEBAR_TAB";
 const OPEN_MODAL = "UI/OPEN_MODAL";
 const CLOSE_MODAL = "UI/CLOSE_MODAL";
+const CLEAR_MODAL = "UI/CLEAR_MODAL";
 const OPEN_MENU = "UI/OPEN_MENU";
 const CLOSE_MENU = "UI/CLOSE_MENU";
 const CLOSE_ALL_MENUS = "UI/CLOSE_ALL_MENUS";
 const SET_DISABLED_CATEGORIES = "UI/SET_DISABLED_CATEGORIES";
+const SET_HIDDEN_ITEMS = "UI/SET_HIDDEN_ITEMS";
 const initUIState = (documentId, schema) => ({
   type: INIT_UI_STATE,
   payload: { documentId, schema }
@@ -49,17 +51,17 @@ const closeToolbarSlot = (documentId, placement, slot) => ({
   type: CLOSE_TOOLBAR_SLOT,
   payload: { documentId, placement, slot }
 });
-const setActivePanel = (documentId, placement, slot, panelId, activeTab) => ({
-  type: SET_ACTIVE_PANEL,
-  payload: { documentId, placement, slot, panelId, activeTab }
+const setActiveSidebar = (documentId, placement, slot, sidebarId, activeTab) => ({
+  type: SET_ACTIVE_SIDEBAR,
+  payload: { documentId, placement, slot, sidebarId, activeTab }
 });
-const closePanelSlot = (documentId, placement, slot) => ({
-  type: CLOSE_PANEL_SLOT,
+const closeSidebarSlot = (documentId, placement, slot) => ({
+  type: CLOSE_SIDEBAR_SLOT,
   payload: { documentId, placement, slot }
 });
-const setPanelTab = (documentId, panelId, tabId) => ({
-  type: SET_PANEL_TAB,
-  payload: { documentId, panelId, tabId }
+const setSidebarTab = (documentId, sidebarId, tabId) => ({
+  type: SET_SIDEBAR_TAB,
+  payload: { documentId, sidebarId, tabId }
 });
 const openModal = (documentId, modalId) => ({
   type: OPEN_MODAL,
@@ -69,6 +71,10 @@ const closeModal = (documentId) => ({
   type: CLOSE_MODAL,
   payload: { documentId }
 });
+const clearModal = (documentId) => ({
+  type: CLEAR_MODAL,
+  payload: { documentId }
+});
 const openMenu = (documentId, menuState) => ({
   type: OPEN_MENU,
   payload: { documentId, menuState }
@@ -85,13 +91,17 @@ const setDisabledCategories = (categories) => ({
   type: SET_DISABLED_CATEGORIES,
   payload: { categories }
 });
+const setHiddenItems = (hiddenItems) => ({
+  type: SET_HIDDEN_ITEMS,
+  payload: { hiddenItems }
+});
 function mergeUISchema(base, override) {
   return {
     ...base,
     ...override,
     toolbars: mergeToolbars(base.toolbars, override.toolbars),
     menus: mergeMenus(base.menus, override.menus),
-    panels: mergePanels(base.panels, override.panels)
+    sidebars: mergeSidebars(base.sidebars, override.sidebars)
   };
 }
 function mergeToolbars(base, override) {
@@ -127,7 +137,7 @@ function mergeMenus(base, override) {
   }
   return result;
 }
-function mergePanels(base, override) {
+function mergeSidebars(base, override) {
   if (!override) return base;
   const result = { ...base };
   for (const [id, panel] of Object.entries(override)) {
@@ -153,9 +163,9 @@ function removeFromSchema(schema, options) {
     result.menus = { ...result.menus };
     options.menus.forEach((id) => delete result.menus[id]);
   }
-  if (options.panels) {
-    result.panels = { ...result.panels };
-    options.panels.forEach((id) => delete result.panels[id]);
+  if (options.sidebars) {
+    result.sidebars = { ...result.sidebars };
+    options.sidebars.forEach((id) => delete result.sidebars[id]);
   }
   if (options.commands) {
     result.toolbars = removeCommandsFromToolbars(result.toolbars, options.commands);
@@ -321,14 +331,17 @@ const UI_ATTRIBUTES = {
   /** Item categories for category-based hiding */
   CATEGORIES: "data-epdf-cat",
   /** Disabled categories list on root element */
-  DISABLED_CATEGORIES: "data-epdf-dis"
+  DISABLED_CATEGORIES: "data-epdf-dis",
+  /** Hidden item IDs (computed from disabled categories) */
+  HIDDEN_ITEMS: "data-epdf-hid"
 };
 const UI_SELECTORS = {
   ROOT: `[${UI_ATTRIBUTES.ROOT}]`,
   STYLES: `[${UI_ATTRIBUTES.STYLES}]`,
   ITEM: (id) => `[${UI_ATTRIBUTES.ITEM}="${id}"]`,
   CATEGORIES: (category) => `[${UI_ATTRIBUTES.CATEGORIES}~="${category}"]`,
-  DISABLED_CATEGORY: (category) => `[${UI_ATTRIBUTES.DISABLED_CATEGORIES}~="${category}"]`
+  DISABLED_CATEGORY: (category) => `[${UI_ATTRIBUTES.DISABLED_CATEGORIES}~="${category}"]`,
+  HIDDEN_ITEM: (itemId) => `[${UI_ATTRIBUTES.HIDDEN_ITEMS}~="${itemId}"]`
 };
 const DEFAULT_CONFIG = {
   useContainerQueries: true
@@ -351,6 +364,20 @@ function extractCategories(schema) {
   const analysis = analyzeSchema(schema);
   return Array.from(analysis.categories).sort();
 }
+function extractItemCategories(schema) {
+  const analysis = analyzeSchema(schema);
+  return analysis.itemCategories;
+}
+function computeHiddenItems(itemCategories, disabledCategories) {
+  const disabledSet = new Set(disabledCategories);
+  const hiddenItems = [];
+  itemCategories.forEach((categories, itemId) => {
+    if (categories.some((cat) => disabledSet.has(cat))) {
+      hiddenItems.push(itemId);
+    }
+  });
+  return hiddenItems;
+}
 function getStylesheetConfig(config = {}) {
   return { ...DEFAULT_CONFIG, ...config };
 }
@@ -383,7 +410,7 @@ function analyzeSchema(schema, locale) {
       locale
     );
   }
-  for (const [panelId, panel] of Object.entries(schema.panels)) {
+  for (const [panelId, panel] of Object.entries(schema.sidebars)) {
     analyzePanel(panelId, panel, categories, itemCategories, dependencies);
   }
   for (const [selMenuId, selMenu] of Object.entries(schema.selectionMenus || {})) {
@@ -451,22 +478,25 @@ function computeMenuBreakpointVisibilities(menu, itemCategories, locale) {
       breakpointVisibilities.push({
         minWidth: bp.minWidth,
         maxWidth: bp.maxWidth,
+        visibleItemIds: visibleItems,
         visibleCategories: visibleCats
       });
     }
   } else {
+    const allItemIds = [];
     const allCats = /* @__PURE__ */ new Set();
-    collectAllMenuItemCategories(menu.items, itemCategories, allCats);
-    breakpointVisibilities.push({ visibleCategories: allCats });
+    collectAllMenuItemInfo(menu.items, itemCategories, allItemIds, allCats);
+    breakpointVisibilities.push({ visibleItemIds: allItemIds, visibleCategories: allCats });
   }
   return breakpointVisibilities;
 }
-function collectAllMenuItemCategories(items, itemCategories, result) {
+function collectAllMenuItemInfo(items, itemCategories, resultIds, resultCats) {
   for (const item of items) {
+    resultIds.push(item.id);
     const cats = itemCategories.get(item.id);
-    if (cats) cats.forEach((c) => result.add(c));
+    if (cats) cats.forEach((c) => resultCats.add(c));
     if (item.type === "section") {
-      collectAllMenuItemCategories(item.items, itemCategories, result);
+      collectAllMenuItemInfo(item.items, itemCategories, resultIds, resultCats);
     }
   }
 }
@@ -691,9 +721,9 @@ function generateSingleDependencyRules(dep, analysis, queryType, cfg) {
     if (breakpoints && breakpoints.length > 0) {
       rules.push(`/* "${dep.itemId}" depends on menu "${dep.dependsOnMenuId}" */`);
       for (const bp of breakpoints) {
-        if (bp.visibleCategories.size === 0) continue;
-        const categorySelectors = Array.from(bp.visibleCategories).sort().map((cat) => UI_SELECTORS.DISABLED_CATEGORY(cat)).join("");
-        const cssRule = `${UI_SELECTORS.ROOT}${categorySelectors} ${UI_SELECTORS.ITEM(dep.itemId)} {
+        if (bp.visibleItemIds.length === 0) continue;
+        const hiddenItemSelectors = bp.visibleItemIds.sort().map((id) => UI_SELECTORS.HIDDEN_ITEM(id)).join("");
+        const cssRule = `${UI_SELECTORS.ROOT}${hiddenItemSelectors} ${UI_SELECTORS.ITEM(dep.itemId)} {
   display: none !important;
 }`;
         const conditions = [];
@@ -710,18 +740,11 @@ function generateSingleDependencyRules(dep, analysis, queryType, cfg) {
     }
   }
   if ((_a = dep.dependsOnItemIds) == null ? void 0 : _a.length) {
-    const relevantCategories = /* @__PURE__ */ new Set();
-    for (const itemId of dep.dependsOnItemIds) {
-      const cats = analysis.itemCategories.get(itemId);
-      if (cats) cats.forEach((c) => relevantCategories.add(c));
-    }
-    if (relevantCategories.size > 0) {
-      const categorySelectors = Array.from(relevantCategories).sort().map((cat) => UI_SELECTORS.DISABLED_CATEGORY(cat)).join("");
-      rules.push(`/* "${dep.itemId}" depends on items: ${dep.dependsOnItemIds.join(", ")} */
-${UI_SELECTORS.ROOT}${categorySelectors} ${UI_SELECTORS.ITEM(dep.itemId)} {
+    rules.push(`/* "${dep.itemId}" depends on items: ${dep.dependsOnItemIds.join(", ")} */`);
+    const hiddenItemSelectors = dep.dependsOnItemIds.sort().map((id) => UI_SELECTORS.HIDDEN_ITEM(id)).join("");
+    rules.push(`${UI_SELECTORS.ROOT}${hiddenItemSelectors} ${UI_SELECTORS.ITEM(dep.itemId)} {
   display: none !important;
 }`);
-    }
   }
   return rules;
 }
@@ -745,10 +768,7 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
     this.categoryChanged$ = createBehaviorEmitter();
     this.stylesheetInvalidated$ = createEmitter();
     this.toolbarChanged$ = createScopedEmitter((documentId, data) => ({ documentId, ...data }), { cache: false });
-    this.panelChanged$ = createScopedEmitter(
-      (documentId, data) => ({ documentId, ...data }),
-      { cache: false }
-    );
+    this.sidebarChanged$ = createScopedEmitter((documentId, data) => ({ documentId, ...data }), { cache: false });
     this.modalChanged$ = createScopedEmitter(
       (documentId, data) => ({ documentId, ...data }),
       { cache: false }
@@ -759,8 +779,11 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
     );
     this.schema = config.schema;
     this.stylesheetConfig = config.stylesheetConfig || {};
+    this.itemCategories = extractItemCategories(this.schema);
     if ((_a = config.disabledCategories) == null ? void 0 : _a.length) {
       this.dispatch(setDisabledCategories(config.disabledCategories));
+      const hiddenItems = computeHiddenItems(this.itemCategories, config.disabledCategories);
+      this.dispatch(setHiddenItems(hiddenItems));
     }
     this.i18n = ((_b = registry.getPlugin("i18n")) == null ? void 0 : _b.provides()) ?? null;
     if (this.i18n) {
@@ -779,7 +802,7 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
       this.i18nCleanup = null;
     }
     this.toolbarChanged$.clear();
-    this.panelChanged$.clear();
+    this.sidebarChanged$.clear();
     this.modalChanged$.clear();
     this.menuChanged$.clear();
     this.stylesheetInvalidated$.clear();
@@ -791,7 +814,7 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
   onDocumentClosed(documentId) {
     this.dispatch(cleanupUIState(documentId));
     this.toolbarChanged$.clearScope(documentId);
-    this.panelChanged$.clearScope(documentId);
+    this.sidebarChanged$.clearScope(documentId);
     this.modalChanged$.clearScope(documentId);
     this.menuChanged$.clearScope(documentId);
   }
@@ -851,16 +874,22 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
     const current = new Set(this.state.disabledCategories);
     if (!current.has(category)) {
       current.add(category);
-      this.dispatch(setDisabledCategories(Array.from(current)));
-      this.categoryChanged$.emit({ disabledCategories: Array.from(current) });
+      const categories = Array.from(current);
+      this.dispatch(setDisabledCategories(categories));
+      const hiddenItems = computeHiddenItems(this.itemCategories, categories);
+      this.dispatch(setHiddenItems(hiddenItems));
+      this.categoryChanged$.emit({ disabledCategories: categories, hiddenItems });
     }
   }
   enableCategoryImpl(category) {
     const current = new Set(this.state.disabledCategories);
     if (current.has(category)) {
       current.delete(category);
-      this.dispatch(setDisabledCategories(Array.from(current)));
-      this.categoryChanged$.emit({ disabledCategories: Array.from(current) });
+      const categories = Array.from(current);
+      this.dispatch(setDisabledCategories(categories));
+      const hiddenItems = computeHiddenItems(this.itemCategories, categories);
+      this.dispatch(setHiddenItems(hiddenItems));
+      this.categoryChanged$.emit({ disabledCategories: categories, hiddenItems });
     }
   }
   toggleCategoryImpl(category) {
@@ -872,7 +901,9 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
   }
   setDisabledCategoriesImpl(categories) {
     this.dispatch(setDisabledCategories(categories));
-    this.categoryChanged$.emit({ disabledCategories: categories });
+    const hiddenItems = computeHiddenItems(this.itemCategories, categories);
+    this.dispatch(setHiddenItems(hiddenItems));
+    this.categoryChanged$.emit({ disabledCategories: categories, hiddenItems });
   }
   // ─────────────────────────────────────────────────────────
   // Capability
@@ -881,8 +912,8 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
     return {
       // Active document operations
       setActiveToolbar: (placement, slot, toolbarId, documentId) => this.setToolbarForDocument(placement, slot, toolbarId, documentId),
-      setActivePanel: (placement, slot, panelId, documentId, activeTab) => this.setPanelForDocument(placement, slot, panelId, documentId, activeTab),
-      togglePanel: (placement, slot, panelId, documentId, activeTab) => this.togglePanelForDocument(placement, slot, panelId, documentId, activeTab),
+      setActiveSidebar: (placement, slot, sidebarId, documentId, activeTab) => this.setSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
+      toggleSidebar: (placement, slot, sidebarId, documentId, activeTab) => this.toggleSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
       openModal: (modalId, documentId) => this.openModalForDocument(modalId, documentId),
       openMenu: (menuId, triggeredByCommandId, triggeredByItemId, documentId) => this.openMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
       toggleMenu: (menuId, triggeredByCommandId, triggeredByItemId, documentId) => this.toggleMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
@@ -900,9 +931,10 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
       setDisabledCategories: (categories) => this.setDisabledCategoriesImpl(categories),
       getDisabledCategories: () => this.state.disabledCategories,
       isCategoryDisabled: (category) => this.state.disabledCategories.includes(category),
+      getHiddenItems: () => this.state.hiddenItems,
       // Events
       onToolbarChanged: this.toolbarChanged$.onGlobal,
-      onPanelChanged: this.panelChanged$.onGlobal,
+      onSidebarChanged: this.sidebarChanged$.onGlobal,
       onModalChanged: this.modalChanged$.onGlobal,
       onMenuChanged: this.menuChanged$.onGlobal,
       onCategoryChanged: this.categoryChanged$.on
@@ -918,19 +950,21 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
       getActiveToolbar: (placement, slot) => this.getToolbarForDocument(placement, slot, documentId),
       closeToolbarSlot: (placement, slot) => this.closeToolbarForDocument(placement, slot, documentId),
       isToolbarOpen: (placement, slot, toolbarId) => this.isToolbarOpenForDocument(placement, slot, toolbarId, documentId),
-      // ───── Panels ─────
-      setActivePanel: (placement, slot, panelId, activeTab) => this.setPanelForDocument(placement, slot, panelId, documentId, activeTab),
-      getActivePanel: (placement, slot) => this.getPanelForDocument(placement, slot, documentId),
-      closePanelSlot: (placement, slot) => this.closePanelForDocument(placement, slot, documentId),
-      togglePanel: (placement, slot, panelId, activeTab) => this.togglePanelForDocument(placement, slot, panelId, documentId, activeTab),
-      isPanelOpen: (placement, slot, panelId) => this.isPanelOpenForDocument(placement, slot, panelId, documentId),
-      // ───── Panel tabs ─────
-      setPanelTab: (panelId, tabId) => this.setPanelTabForDocument(panelId, tabId, documentId),
-      getPanelTab: (panelId) => this.getPanelTabForDocument(panelId, documentId),
-      // ───── Modals ─────
+      // ───── Sidebars ─────
+      setActiveSidebar: (placement, slot, sidebarId, activeTab) => this.setSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
+      getActiveSidebar: (placement, slot) => this.getSidebarForDocument(placement, slot, documentId),
+      closeSidebarSlot: (placement, slot) => this.closeSidebarForDocument(placement, slot, documentId),
+      toggleSidebar: (placement, slot, sidebarId, activeTab) => this.toggleSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
+      isSidebarOpen: (placement, slot, sidebarId) => this.isSidebarOpenForDocument(placement, slot, sidebarId, documentId),
+      // ───── Sidebar tabs ─────
+      setSidebarTab: (sidebarId, tabId) => this.setSidebarTabForDocument(sidebarId, tabId, documentId),
+      getSidebarTab: (sidebarId) => this.getSidebarTabForDocument(sidebarId, documentId),
+      // ───── Modals (with animation lifecycle) ─────
       openModal: (modalId) => this.openModalForDocument(modalId, documentId),
       closeModal: () => this.closeModalForDocument(documentId),
+      clearModal: () => this.clearModalForDocument(documentId),
       getActiveModal: () => this.getActiveModalForDocument(documentId),
+      isModalOpen: () => this.isModalOpenForDocument(documentId),
       // ───── Menus ─────
       openMenu: (menuId, triggeredByCommandId, triggeredByItemId) => this.openMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
       closeMenu: (menuId) => this.closeMenuForDocument(menuId, documentId),
@@ -943,7 +977,7 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
       getState: () => this.getDocumentStateOrThrow(documentId),
       // ───── Scoped events ─────
       onToolbarChanged: this.toolbarChanged$.forScope(documentId),
-      onPanelChanged: this.panelChanged$.forScope(documentId),
+      onSidebarChanged: this.sidebarChanged$.forScope(documentId),
       onModalChanged: this.modalChanged$.forScope(documentId),
       onMenuChanged: this.menuChanged$.forScope(documentId)
     };
@@ -987,67 +1021,76 @@ const _UIPlugin = class _UIPlugin extends BasePlugin {
     return toolbarId ? toolbarSlot.toolbarId === toolbarId : true;
   }
   // ─────────────────────────────────────────────────────────
-  // Core Operations - Panels
+  // Core Operations - Sidebars
   // ─────────────────────────────────────────────────────────
-  setPanelForDocument(placement, slot, panelId, documentId, activeTab) {
+  setSidebarForDocument(placement, slot, sidebarId, documentId, activeTab) {
     const id = documentId ?? this.getActiveDocumentId();
-    this.dispatch(setActivePanel(id, placement, slot, panelId, activeTab));
-    this.panelChanged$.emit(id, { placement, slot, panelId });
+    this.dispatch(setActiveSidebar(id, placement, slot, sidebarId, activeTab));
+    this.sidebarChanged$.emit(id, { placement, slot, sidebarId });
   }
-  getPanelForDocument(placement, slot, documentId) {
+  getSidebarForDocument(placement, slot, documentId) {
     const slotKey = `${placement}-${slot}`;
-    const panelSlot = this.getDocumentStateOrThrow(documentId).activePanels[slotKey];
-    return (panelSlot == null ? void 0 : panelSlot.isOpen) ? panelSlot.panelId : null;
+    const sidebarSlot = this.getDocumentStateOrThrow(documentId).activeSidebars[slotKey];
+    return (sidebarSlot == null ? void 0 : sidebarSlot.isOpen) ? sidebarSlot.sidebarId : null;
   }
-  closePanelForDocument(placement, slot, documentId) {
+  closeSidebarForDocument(placement, slot, documentId) {
     const id = documentId ?? this.getActiveDocumentId();
-    this.dispatch(closePanelSlot(id, placement, slot));
-    this.panelChanged$.emit(id, { placement, slot, panelId: "" });
+    this.dispatch(closeSidebarSlot(id, placement, slot));
+    this.sidebarChanged$.emit(id, { placement, slot, sidebarId: "" });
   }
-  togglePanelForDocument(placement, slot, panelId, documentId, activeTab) {
+  toggleSidebarForDocument(placement, slot, sidebarId, documentId, activeTab) {
     const id = documentId ?? this.getActiveDocumentId();
     const slotKey = `${placement}-${slot}`;
-    const panelSlot = this.getDocumentStateOrThrow(id).activePanels[slotKey];
-    if ((panelSlot == null ? void 0 : panelSlot.panelId) === panelId && (panelSlot == null ? void 0 : panelSlot.isOpen)) {
-      this.dispatch(closePanelSlot(id, placement, slot));
-      this.panelChanged$.emit(id, { placement, slot, panelId: "" });
+    const sidebarSlot = this.getDocumentStateOrThrow(id).activeSidebars[slotKey];
+    if ((sidebarSlot == null ? void 0 : sidebarSlot.sidebarId) === sidebarId && (sidebarSlot == null ? void 0 : sidebarSlot.isOpen)) {
+      this.dispatch(closeSidebarSlot(id, placement, slot));
+      this.sidebarChanged$.emit(id, { placement, slot, sidebarId: "" });
     } else {
-      this.dispatch(setActivePanel(id, placement, slot, panelId, activeTab));
-      this.panelChanged$.emit(id, { placement, slot, panelId });
+      this.dispatch(setActiveSidebar(id, placement, slot, sidebarId, activeTab));
+      this.sidebarChanged$.emit(id, { placement, slot, sidebarId });
     }
   }
-  isPanelOpenForDocument(placement, slot, panelId, documentId) {
+  isSidebarOpenForDocument(placement, slot, sidebarId, documentId) {
     const slotKey = `${placement}-${slot}`;
-    const panelSlot = this.getDocumentStateOrThrow(documentId).activePanels[slotKey];
-    if (!panelSlot || !panelSlot.isOpen) return false;
-    return panelId ? panelSlot.panelId === panelId : true;
+    const sidebarSlot = this.getDocumentStateOrThrow(documentId).activeSidebars[slotKey];
+    if (!sidebarSlot || !sidebarSlot.isOpen) return false;
+    return sidebarId ? sidebarSlot.sidebarId === sidebarId : true;
   }
   // ─────────────────────────────────────────────────────────
-  // Core Operations - Panel Tabs
+  // Core Operations - Sidebar Tabs
   // ─────────────────────────────────────────────────────────
-  setPanelTabForDocument(panelId, tabId, documentId) {
+  setSidebarTabForDocument(sidebarId, tabId, documentId) {
     const id = documentId ?? this.getActiveDocumentId();
-    this.dispatch(setPanelTab(id, panelId, tabId));
+    this.dispatch(setSidebarTab(id, sidebarId, tabId));
   }
-  getPanelTabForDocument(panelId, documentId) {
-    return this.getDocumentStateOrThrow(documentId).panelTabs[panelId] ?? null;
+  getSidebarTabForDocument(sidebarId, documentId) {
+    return this.getDocumentStateOrThrow(documentId).sidebarTabs[sidebarId] ?? null;
   }
   // ─────────────────────────────────────────────────────────
-  // Core Operations - Modals
+  // Core Operations - Modals (with animation lifecycle)
   // ─────────────────────────────────────────────────────────
   openModalForDocument(modalId, documentId) {
     const id = documentId ?? this.getActiveDocumentId();
     this.dispatch(openModal(id, modalId));
-    this.modalChanged$.emit(id, { modalId });
+    this.modalChanged$.emit(id, { modalId, isOpen: true });
   }
   closeModalForDocument(documentId) {
     const id = documentId ?? this.getActiveDocumentId();
+    const currentModal = this.getDocumentStateOrThrow(id).activeModal;
     this.dispatch(closeModal(id));
-    this.modalChanged$.emit(id, { modalId: null });
+    this.modalChanged$.emit(id, { modalId: (currentModal == null ? void 0 : currentModal.modalId) ?? null, isOpen: false });
+  }
+  clearModalForDocument(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(clearModal(id));
   }
   getActiveModalForDocument(documentId) {
     return this.getDocumentStateOrThrow(documentId).activeModal;
   }
+  isModalOpenForDocument(documentId) {
+    const modal = this.getDocumentStateOrThrow(documentId).activeModal;
+    return (modal == null ? void 0 : modal.isOpen) ?? false;
+  }
   // ─────────────────────────────────────────────────────────
   // Core Operations - Menus
   // ─────────────────────────────────────────────────────────
@@ -1087,16 +1130,18 @@ _UIPlugin.id = "ui";
 let UIPlugin = _UIPlugin;
 const initialDocumentState = {
   activeToolbars: {},
-  activePanels: {},
+  activeSidebars: {},
   activeModal: null,
   openMenus: {},
-  panelTabs: {}
+  sidebarTabs: {}
 };
 const initialState = {
   documents: {},
-  disabledCategories: []
+  disabledCategories: [],
+  hiddenItems: []
 };
 const uiReducer = (state = initialState, action) => {
+  var _a;
   switch (action.type) {
     case INIT_UI_STATE: {
       const { documentId, schema } = action.payload;
@@ -1152,85 +1197,88 @@ const uiReducer = (state = initialState, action) => {
         }
       };
     }
-    case SET_ACTIVE_PANEL: {
-      const { documentId, placement, slot, panelId, activeTab } = action.payload;
-      const docState = state.documents[documentId] || initialDocumentState;
+    case CLOSE_TOOLBAR_SLOT: {
+      const { documentId, placement, slot } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
       const slotKey = `${placement}-${slot}`;
+      const toolbarSlot = docState.activeToolbars[slotKey];
+      if (!toolbarSlot) return state;
       return {
         ...state,
         documents: {
           ...state.documents,
           [documentId]: {
             ...docState,
-            activePanels: {
-              ...docState.activePanels,
+            activeToolbars: {
+              ...docState.activeToolbars,
               [slotKey]: {
-                panelId,
-                isOpen: true
-              }
-            },
-            ...activeTab && {
-              panelTabs: {
-                ...docState.panelTabs,
-                [panelId]: activeTab
+                ...toolbarSlot,
+                isOpen: false
+                // Keep toolbar, just close it
               }
             }
           }
         }
       };
     }
-    case CLOSE_PANEL_SLOT: {
-      const { documentId, placement, slot } = action.payload;
-      const docState = state.documents[documentId];
-      if (!docState) return state;
+    // ─────────────────────────────────────────────────────────
+    // Sidebar Actions
+    // ─────────────────────────────────────────────────────────
+    case SET_ACTIVE_SIDEBAR: {
+      const { documentId, placement, slot, sidebarId, activeTab } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
       const slotKey = `${placement}-${slot}`;
-      const panelSlot = docState.activePanels[slotKey];
-      if (!panelSlot) return state;
       return {
         ...state,
         documents: {
           ...state.documents,
           [documentId]: {
             ...docState,
-            activePanels: {
-              ...docState.activePanels,
+            activeSidebars: {
+              ...docState.activeSidebars,
               [slotKey]: {
-                ...panelSlot,
-                isOpen: false
-                // Keep panel, just close it
+                sidebarId,
+                isOpen: true
+              }
+            },
+            ...activeTab && {
+              sidebarTabs: {
+                ...docState.sidebarTabs,
+                [sidebarId]: activeTab
               }
             }
           }
         }
       };
     }
-    case CLOSE_TOOLBAR_SLOT: {
+    case CLOSE_SIDEBAR_SLOT: {
       const { documentId, placement, slot } = action.payload;
       const docState = state.documents[documentId];
       if (!docState) return state;
       const slotKey = `${placement}-${slot}`;
-      const toolbarSlot = docState.activeToolbars[slotKey];
-      if (!toolbarSlot) return state;
+      const sidebarSlot = docState.activeSidebars[slotKey];
+      if (!sidebarSlot) return state;
       return {
         ...state,
         documents: {
           ...state.documents,
           [documentId]: {
             ...docState,
-            activeToolbars: {
-              ...docState.activeToolbars,
+            activeSidebars: {
+              ...docState.activeSidebars,
               [slotKey]: {
-                ...toolbarSlot,
+                ...sidebarSlot,
                 isOpen: false
-                // Keep toolbar, just close it
+                // Keep sidebar, just close it
               }
             }
           }
         }
       };
     }
-    case SET_PANEL_TAB: {
-      const { documentId, panelId, tabId } = action.payload;
+    case SET_SIDEBAR_TAB: {
+      const { documentId, sidebarId, tabId } = action.payload;
       const docState = state.documents[documentId] || initialDocumentState;
       return {
         ...state,
@@ -1238,14 +1286,17 @@ const uiReducer = (state = initialState, action) => {
           ...state.documents,
           [documentId]: {
             ...docState,
-            panelTabs: {
-              ...docState.panelTabs,
-              [panelId]: tabId
+            sidebarTabs: {
+              ...docState.sidebarTabs,
+              [sidebarId]: tabId
             }
           }
         }
       };
     }
+    // ─────────────────────────────────────────────────────────
+    // Modal Actions (with animation lifecycle)
+    // ─────────────────────────────────────────────────────────
     case OPEN_MODAL: {
       const { documentId, modalId } = action.payload;
       const docState = state.documents[documentId] || initialDocumentState;
@@ -1255,7 +1306,10 @@ const uiReducer = (state = initialState, action) => {
           ...state.documents,
           [documentId]: {
             ...docState,
-            activeModal: modalId,
+            activeModal: {
+              modalId,
+              isOpen: true
+            },
             openMenus: {}
             // Close all menus when opening modal
           }
@@ -1263,9 +1317,29 @@ const uiReducer = (state = initialState, action) => {
       };
     }
     case CLOSE_MODAL: {
+      const { documentId } = action.payload;
+      const docState = state.documents[documentId];
+      if (!(docState == null ? void 0 : docState.activeModal)) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activeModal: {
+              ...docState.activeModal,
+              isOpen: false
+              // Keep modal for exit animation
+            }
+          }
+        }
+      };
+    }
+    case CLEAR_MODAL: {
       const { documentId } = action.payload;
       const docState = state.documents[documentId];
       if (!docState) return state;
+      if ((_a = docState.activeModal) == null ? void 0 : _a.isOpen) return state;
       return {
         ...state,
         documents: {
@@ -1277,6 +1351,9 @@ const uiReducer = (state = initialState, action) => {
         }
       };
     }
+    // ─────────────────────────────────────────────────────────
+    // Menu Actions
+    // ─────────────────────────────────────────────────────────
     case OPEN_MENU: {
       const { documentId, menuState } = action.payload;
       const docState = state.documents[documentId] || initialDocumentState;
@@ -1331,6 +1408,12 @@ const uiReducer = (state = initialState, action) => {
         disabledCategories: action.payload.categories
       };
     }
+    case SET_HIDDEN_ITEMS: {
+      return {
+        ...state,
+        hiddenItems: action.payload.hiddenItems
+      };
+    }
     default:
       return state;
   }
@@ -1355,15 +1438,15 @@ function isToolbarOpen(plugins, documentId, placement, slot, toolbarId) {
   if (!slotState || !slotState.isOpen) return false;
   return toolbarId ? slotState.toolbarId === toolbarId : true;
 }
-function selectPanelSlot(plugins, documentId, placement, slot) {
+function selectSidebarSlot(plugins, documentId, placement, slot) {
   const doc = selectUIDocumentState(plugins, documentId);
   if (!doc) return null;
-  return doc.activePanels[makeSlotKey(placement, slot)] ?? null;
+  return doc.activeSidebars[makeSlotKey(placement, slot)] ?? null;
 }
-function isPanelOpen(plugins, documentId, placement, slot, panelId) {
-  const slotState = selectPanelSlot(plugins, documentId, placement, slot);
+function isSidebarOpen(plugins, documentId, placement, slot, sidebarId) {
+  const slotState = selectSidebarSlot(plugins, documentId, placement, slot);
   if (!slotState || !slotState.isOpen) return false;
-  return panelId ? slotState.panelId === panelId : true;
+  return sidebarId ? slotState.sidebarId === sidebarId : true;
 }
 const UIPluginPackage = {
   manifest,
@@ -1373,36 +1456,41 @@ const UIPluginPackage = {
 };
 export {
   CLEANUP_UI_STATE,
+  CLEAR_MODAL,
   CLOSE_ALL_MENUS,
   CLOSE_MENU,
   CLOSE_MODAL,
-  CLOSE_PANEL_SLOT,
+  CLOSE_SIDEBAR_SLOT,
   CLOSE_TOOLBAR_SLOT,
   INIT_UI_STATE,
   OPEN_MENU,
   OPEN_MODAL,
-  SET_ACTIVE_PANEL,
+  SET_ACTIVE_SIDEBAR,
   SET_ACTIVE_TOOLBAR,
   SET_DISABLED_CATEGORIES,
-  SET_PANEL_TAB,
+  SET_HIDDEN_ITEMS,
+  SET_SIDEBAR_TAB,
   UIPlugin,
   UIPluginPackage,
   UI_ATTRIBUTES,
   UI_PLUGIN_ID,
   UI_SELECTORS,
   cleanupUIState,
+  clearModal,
   closeAllMenus,
   closeMenu,
   closeModal,
-  closePanelSlot,
+  closeSidebarSlot,
   closeToolbarSlot,
+  computeHiddenItems,
   extractCategories,
+  extractItemCategories,
   generateUIStylesheet,
   getItemResponsiveMetadata,
   getStylesheetConfig,
   getUIItemProps,
   initUIState,
-  isPanelOpen,
+  isSidebarOpen,
   isToolbarOpen,
   manifest,
   mergeUISchema,
@@ -1410,13 +1498,14 @@ export {
   openModal,
   removeFromSchema,
   resolveResponsiveMetadata,
-  selectPanelSlot,
+  selectSidebarSlot,
   selectToolbarSlot,
   selectUIDocumentState,
   selectUIState,
-  setActivePanel,
+  setActiveSidebar,
   setActiveToolbar,
   setDisabledCategories,
-  setPanelTab
+  setHiddenItems,
+  setSidebarTab
 };
 //# sourceMappingURL=index.js.map