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

package/dist/index.js

@@ -1,744 +1,1369 @@
-import { BasePlugin, arePropsEqual } from "@embedpdf/core";
-class UIComponent {
-  constructor(componentConfig, registry) {
-    this.children = [];
-    this.updateCallbacks = [];
-    this.hadUpdateBeforeListeners = false;
-    this.componentConfig = componentConfig;
-    const props = componentConfig.props || {};
-    if (typeof props === "function") {
-      const initialProps = props(componentConfig.initialState);
-      this.props = { ...initialProps, id: componentConfig.id };
-    } else {
-      this.props = { ...props, id: componentConfig.id };
+import { BasePlugin, createBehaviorEmitter, createEmitter, createScopedEmitter } from "@embedpdf/core";
+const UI_PLUGIN_ID = "ui";
+const manifest = {
+  id: UI_PLUGIN_ID,
+  name: "UI Plugin",
+  version: "1.0.0",
+  provides: ["ui"],
+  requires: ["commands"],
+  // Depends on commands
+  optional: ["i18n"],
+  defaultConfig: {
+    enabled: true,
+    schema: {
+      id: "empty",
+      version: "1.0.0",
+      toolbars: {},
+      menus: {},
+      panels: {},
+      selectionMenus: {}
     }
-    this.type = componentConfig.type;
-    this.registry = registry;
-  }
-  addChild(id, child, priority = 0, className) {
-    this.children.push({ id, component: child, priority, className });
-    this.sortChildren();
-  }
-  // Helper to sort children by priority
-  sortChildren() {
-    this.children.sort((a, b) => a.priority - b.priority);
-  }
-  removeChild(child) {
-    this.children = this.children.filter((c) => c.component !== child);
   }
-  clearChildren() {
-    this.children = [];
-  }
-  get getRenderType() {
-    return this.componentConfig.render || this.type;
-  }
-  getRenderer() {
-    return this.registry[this.getRenderType];
-  }
-  getChildren() {
-    return this.children;
+};
+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 OPEN_MODAL = "UI/OPEN_MODAL";
+const CLOSE_MODAL = "UI/CLOSE_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 initUIState = (documentId, schema) => ({
+  type: INIT_UI_STATE,
+  payload: { documentId, schema }
+});
+const cleanupUIState = (documentId) => ({
+  type: CLEANUP_UI_STATE,
+  payload: { documentId }
+});
+const setActiveToolbar = (documentId, placement, slot, toolbarId) => ({
+  type: SET_ACTIVE_TOOLBAR,
+  payload: { documentId, placement, slot, toolbarId }
+});
+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 closePanelSlot = (documentId, placement, slot) => ({
+  type: CLOSE_PANEL_SLOT,
+  payload: { documentId, placement, slot }
+});
+const setPanelTab = (documentId, panelId, tabId) => ({
+  type: SET_PANEL_TAB,
+  payload: { documentId, panelId, tabId }
+});
+const openModal = (documentId, modalId) => ({
+  type: OPEN_MODAL,
+  payload: { documentId, modalId }
+});
+const closeModal = (documentId) => ({
+  type: CLOSE_MODAL,
+  payload: { documentId }
+});
+const openMenu = (documentId, menuState) => ({
+  type: OPEN_MENU,
+  payload: { documentId, menuState }
+});
+const closeMenu = (documentId, menuId) => ({
+  type: CLOSE_MENU,
+  payload: { documentId, menuId }
+});
+const closeAllMenus = (documentId) => ({
+  type: CLOSE_ALL_MENUS,
+  payload: { documentId }
+});
+const setDisabledCategories = (categories) => ({
+  type: SET_DISABLED_CATEGORIES,
+  payload: { categories }
+});
+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)
+  };
+}
+function mergeToolbars(base, override) {
+  if (!override) return base;
+  const result = { ...base };
+  for (const [id, toolbar] of Object.entries(override)) {
+    if (result[id]) {
+      result[id] = {
+        ...result[id],
+        ...toolbar,
+        items: toolbar.items ?? result[id].items,
+        responsive: toolbar.responsive ?? result[id].responsive
+      };
+    } else {
+      result[id] = toolbar;
+    }
   }
-  // Optionally, a component can provide a function to extend the context for its children.
-  // For instance, a header could supply a "direction" based on its position.
-  getChildContext(context) {
-    const childContextProp = this.componentConfig.getChildContext;
-    if (typeof childContextProp === "function") {
-      return { ...context, ...childContextProp(this.props) };
-    } else if (childContextProp && typeof childContextProp === "object") {
-      return { ...context, ...childContextProp };
+  return result;
+}
+function mergeMenus(base, override) {
+  if (!override) return base;
+  const result = { ...base };
+  for (const [id, menu] of Object.entries(override)) {
+    if (result[id]) {
+      result[id] = {
+        ...result[id],
+        ...menu,
+        items: menu.items ?? result[id].items
+      };
+    } else {
+      result[id] = menu;
     }
-    return context;
   }
-  update(newProps) {
-    const { id, ...otherProps } = newProps;
-    this.props = { ...this.props, ...otherProps };
-    if (this.updateCallbacks.length === 0) {
-      this.hadUpdateBeforeListeners = true;
+  return result;
+}
+function mergePanels(base, override) {
+  if (!override) return base;
+  const result = { ...base };
+  for (const [id, panel] of Object.entries(override)) {
+    if (result[id]) {
+      result[id] = {
+        ...result[id],
+        ...panel,
+        content: panel.content ?? result[id].content
+      };
+    } else {
+      result[id] = panel;
     }
-    this.notifyUpdate();
   }
-  onUpdate(callback) {
-    this.updateCallbacks.push(callback);
-    return this.hadUpdateBeforeListeners;
+  return result;
+}
+function removeFromSchema(schema, options) {
+  const result = { ...schema };
+  if (options.toolbars) {
+    result.toolbars = { ...result.toolbars };
+    options.toolbars.forEach((id) => delete result.toolbars[id]);
   }
-  offUpdate(callback) {
-    this.updateCallbacks = this.updateCallbacks.filter((cb) => cb !== callback);
+  if (options.menus) {
+    result.menus = { ...result.menus };
+    options.menus.forEach((id) => delete result.menus[id]);
   }
-  notifyUpdate() {
-    this.updateCallbacks.forEach((cb) => cb());
+  if (options.panels) {
+    result.panels = { ...result.panels };
+    options.panels.forEach((id) => delete result.panels[id]);
   }
+  if (options.commands) {
+    result.toolbars = removeCommandsFromToolbars(result.toolbars, options.commands);
+    result.menus = removeCommandsFromMenus(result.menus, options.commands);
+  }
+  return result;
 }
-const UI_INIT_COMPONENTS = "UI_INIT_COMPONENTS";
-const UI_SET_HEADER_VISIBLE = "UI_SET_HEADER_VISIBLE";
-const UI_TOGGLE_PANEL = "UI_TOGGLE_PANEL";
-const UI_SHOW_COMMAND_MENU = "UI_SHOW_COMMAND_MENU";
-const UI_HIDE_COMMAND_MENU = "UI_HIDE_COMMAND_MENU";
-const UI_UPDATE_COMPONENT_STATE = "UI_UPDATE_COMPONENT_STATE";
-const uiInitComponents = (state) => ({
-  type: UI_INIT_COMPONENTS,
-  payload: state
-});
-const uiTogglePanel = (payload) => ({
-  type: UI_TOGGLE_PANEL,
-  payload
-});
-const uiSetHeaderVisible = (payload) => ({
-  type: UI_SET_HEADER_VISIBLE,
-  payload
-});
-const uiShowCommandMenu = (payload) => ({
-  type: UI_SHOW_COMMAND_MENU,
-  payload
-});
-const uiHideCommandMenu = (payload) => ({
-  type: UI_HIDE_COMMAND_MENU,
-  payload
-});
-const uiUpdateComponentState = (payload) => ({
-  type: UI_UPDATE_COMPONENT_STATE,
-  payload
-});
-const initialState = {
-  panel: {},
-  header: {},
-  groupedItems: {},
-  divider: {},
-  iconButton: {},
-  tabButton: {},
-  selectButton: {},
-  custom: {},
-  floating: {},
-  commandMenu: {}
-};
-const uiReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case UI_INIT_COMPONENTS:
-      return {
-        ...state,
-        ...action.payload
-      };
-    case UI_TOGGLE_PANEL: {
-      const prevPanel = state.panel[action.payload.id] || {};
-      const { open: nextOpen, visibleChild: nextVisibleChild } = action.payload;
-      const prevVisibleChild = prevPanel.visibleChild;
-      let open = prevPanel.open;
-      let visibleChild = prevPanel.visibleChild;
-      if (nextVisibleChild === prevVisibleChild) {
-        open = nextOpen !== void 0 ? nextOpen : !prevPanel.open;
-      } else {
-        visibleChild = nextVisibleChild;
-        open = true;
-      }
-      return {
-        ...state,
-        panel: {
-          ...state.panel,
-          [action.payload.id]: {
-            ...prevPanel,
-            open,
-            visibleChild
-          }
+function removeCommandsFromToolbars(toolbars, commandIds) {
+  const result = {};
+  for (const [id, toolbar] of Object.entries(toolbars)) {
+    result[id] = {
+      ...toolbar,
+      items: toolbar.items.filter((item) => {
+        if (item.type === "command-button") {
+          return !commandIds.includes(item.commandId);
         }
-      };
-    }
-    case UI_SET_HEADER_VISIBLE:
-      return {
-        ...state,
-        header: {
-          ...state.header,
-          [action.payload.id]: {
-            ...state.header[action.payload.id],
-            visible: action.payload.visible,
-            visibleChild: action.payload.visibleChild
-          }
+        if (item.type === "group") {
+          return item.items.some(
+            (child) => child.type === "command-button" ? !commandIds.includes(child.commandId) : true
+          );
         }
-      };
-    case UI_SHOW_COMMAND_MENU:
-      return {
-        ...state,
-        commandMenu: {
-          ...state.commandMenu,
-          [action.payload.id]: {
-            activeCommand: action.payload.commandId,
-            triggerElement: action.payload.triggerElement,
-            position: action.payload.position,
-            open: true,
-            flatten: action.payload.flatten
-          }
+        if (item.type === "tab-group") {
+          return item.tabs.some((tab) => !commandIds.includes(tab.commandId));
         }
-      };
-    case UI_HIDE_COMMAND_MENU:
-      return {
-        ...state,
-        commandMenu: {
-          ...state.commandMenu,
-          [action.payload.id]: {
-            ...state.commandMenu[action.payload.id],
-            open: false,
-            activeCommand: null,
-            triggerElement: void 0,
-            position: void 0,
-            flatten: false
-          }
+        return true;
+      })
+    };
+  }
+  return result;
+}
+function removeCommandsFromMenus(menus, commandIds) {
+  const result = {};
+  for (const [id, menu] of Object.entries(menus)) {
+    result[id] = {
+      ...menu,
+      items: menu.items.filter((item) => {
+        if (item.type === "command") {
+          return !commandIds.includes(item.commandId);
         }
-      };
-    case UI_UPDATE_COMPONENT_STATE: {
-      const { componentType, componentId, patch } = action.payload;
-      if (!state[componentType] || !state[componentType][componentId]) return state;
-      const current = state[componentType][componentId];
-      const filteredPatch = Object.fromEntries(Object.entries(patch).filter(([k]) => k in current));
-      if (Object.keys(filteredPatch).length === 0) return state;
-      return {
-        ...state,
-        [componentType]: {
-          ...state[componentType],
-          [componentId]: {
-            ...current,
-            ...filteredPatch
-          }
+        if (item.type === "section") {
+          return item.items.some(
+            (child) => child.type === "command" ? !commandIds.includes(child.commandId) : true
+          );
         }
-      };
-    }
-    default:
-      return state;
+        return true;
+      })
+    };
   }
-};
-function defineComponent() {
-  return (c) => c;
+  return result;
 }
-function createEventController() {
-  const eventMap = /* @__PURE__ */ new Map();
-  return {
-    emit(eventType, data) {
-      const callbacks = eventMap.get(eventType);
-      if (callbacks) {
-        callbacks.forEach((callback) => callback(data));
+function resolveResponsiveMetadata(schema, currentLocale) {
+  var _a;
+  if (!((_a = schema.responsive) == null ? void 0 : _a.breakpoints)) {
+    return null;
+  }
+  const effectiveBreakpoints = applyLocaleOverrides(
+    schema.responsive.breakpoints,
+    schema.responsive.localeOverrides,
+    currentLocale
+  );
+  const items = /* @__PURE__ */ new Map();
+  const breakpoints = /* @__PURE__ */ new Map();
+  for (const [breakpointId, config] of Object.entries(effectiveBreakpoints)) {
+    breakpoints.set(breakpointId, {
+      minWidth: config.minWidth,
+      maxWidth: config.maxWidth
+    });
+  }
+  const allItemIds = /* @__PURE__ */ new Set();
+  const collectItemIds = (items2) => {
+    items2.forEach((item) => {
+      allItemIds.add(item.id);
+      if (item.type === "group" && item.items) {
+        collectItemIds(item.items);
       }
-    },
-    on(eventType, callback) {
-      if (!eventMap.has(eventType)) {
-        eventMap.set(eventType, /* @__PURE__ */ new Set());
+      if (item.type === "tab-group" && item.tabs) {
+        collectItemIds(item.tabs);
       }
-      const callbacks = eventMap.get(eventType);
-      callbacks.add(callback);
-      return () => this.off(eventType, callback);
-    },
-    off(eventType, callback) {
-      const callbacks = eventMap.get(eventType);
-      if (callbacks) {
-        callbacks.delete(callback);
-        if (callbacks.size === 0) {
-          eventMap.delete(eventType);
-        }
+      if (item.type === "section" && item.items) {
+        collectItemIds(item.items);
       }
-    }
+    });
   };
+  collectItemIds(schema.items);
+  for (const itemId of allItemIds) {
+    const rules = [];
+    let defaultVisible = true;
+    const sortedBreakpoints = Array.from(Object.entries(effectiveBreakpoints)).sort((a, b) => {
+      const aMin = a[1].minWidth ?? 0;
+      const bMin = b[1].minWidth ?? 0;
+      return aMin - bMin;
+    });
+    sortedBreakpoints.forEach(([breakpointId, config], index) => {
+      var _a2, _b;
+      const isHidden = (_a2 = config.hide) == null ? void 0 : _a2.includes(itemId);
+      const isShown = (_b = config.show) == null ? void 0 : _b.includes(itemId);
+      if (!isHidden && !isShown) {
+        return;
+      }
+      rules.push({
+        breakpointId,
+        minWidth: config.minWidth,
+        maxWidth: config.maxWidth,
+        visible: isShown || !isHidden,
+        priority: index
+      });
+      if (index === 0) {
+        defaultVisible = isShown || !isHidden;
+      }
+    });
+    if (rules.length > 0) {
+      items.set(itemId, {
+        itemId,
+        shouldRender: true,
+        // Always render for SSR
+        visibilityRules: rules,
+        defaultVisible
+      });
+    }
+  }
+  return { items, breakpoints };
 }
-function resolveMenuItem(item, state) {
-  const dyn = (v) => typeof v === "function" ? v(state) : v;
-  if (item.type === "group") {
-    return {
-      ...item,
-      label: dyn(item.label) ?? ""
+function applyLocaleOverrides(baseBreakpoints, localeOverrides, currentLocale) {
+  if (!currentLocale || !(localeOverrides == null ? void 0 : localeOverrides.groups)) {
+    return baseBreakpoints;
+  }
+  const matchingGroup = localeOverrides.groups.find(
+    (group) => group.locales.includes(currentLocale)
+  );
+  if (!matchingGroup) {
+    return baseBreakpoints;
+  }
+  const effective = {};
+  for (const [breakpointId, baseRule] of Object.entries(baseBreakpoints)) {
+    const override = matchingGroup.breakpoints[breakpointId];
+    if (!override) {
+      effective[breakpointId] = baseRule;
+      continue;
+    }
+    effective[breakpointId] = {
+      // Width constraints never change!
+      minWidth: baseRule.minWidth,
+      maxWidth: baseRule.maxWidth,
+      // Merge hide lists (base + additional) or use replacement
+      hide: override.replaceHide ? override.replaceHide : [...baseRule.hide || [], ...override.hide || []],
+      // Merge show lists (base + additional) or use replacement
+      show: override.replaceShow ? override.replaceShow : [...baseRule.show || [], ...override.show || []]
     };
   }
-  return {
-    ...item,
-    icon: dyn(item.icon) ?? "",
-    iconProps: dyn(item.iconProps) ?? {},
-    label: dyn(item.label) ?? "",
-    visible: dyn(item.visible) ?? true,
-    active: dyn(item.active) ?? false,
-    disabled: dyn(item.disabled) ?? false
-  };
+  return effective;
+}
+function getItemResponsiveMetadata(itemId, schema, currentLocale) {
+  const metadata = resolveResponsiveMetadata(schema, currentLocale);
+  return (metadata == null ? void 0 : metadata.items.get(itemId)) ?? null;
+}
+const UI_ATTRIBUTES = {
+  /** Root element marker */
+  ROOT: "data-epdf",
+  /** Style element marker for deduplication */
+  STYLES: "data-epdf-s",
+  /** Item ID for responsive and dependency rules */
+  ITEM: "data-epdf-i",
+  /** Item categories for category-based hiding */
+  CATEGORIES: "data-epdf-cat",
+  /** Disabled categories list on root element */
+  DISABLED_CATEGORIES: "data-epdf-dis"
+};
+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}"]`
+};
+const DEFAULT_CONFIG = {
+  useContainerQueries: true
+};
+function generateUIStylesheet(schema, options = {}) {
+  const cfg = { ...DEFAULT_CONFIG, ...options.config };
+  const locale = options.locale;
+  const analysis = analyzeSchema(schema, locale);
+  const sections = [];
+  sections.push(generateHeader(locale));
+  const responsiveCSS = generateResponsiveRules(analysis, cfg);
+  if (responsiveCSS) sections.push(responsiveCSS);
+  const categoryCSS = generateCategoryRules(analysis);
+  if (categoryCSS) sections.push(categoryCSS);
+  const dependencyCSS = generateDependencyRules(analysis, cfg);
+  if (dependencyCSS) sections.push(dependencyCSS);
+  return sections.filter((s) => s.trim()).join("\n\n");
 }
-function isActive(item, state) {
-  const resolved = resolveMenuItem(item, state);
-  if (resolved.type === "group") {
-    return false;
+function extractCategories(schema) {
+  const analysis = analyzeSchema(schema);
+  return Array.from(analysis.categories).sort();
+}
+function getStylesheetConfig(config = {}) {
+  return { ...DEFAULT_CONFIG, ...config };
+}
+function analyzeSchema(schema, locale) {
+  const categories = /* @__PURE__ */ new Set();
+  const itemCategories = /* @__PURE__ */ new Map();
+  const dependencies = [];
+  const menuBreakpoints = /* @__PURE__ */ new Map();
+  const responsiveItems = /* @__PURE__ */ new Map();
+  for (const [menuId, menu] of Object.entries(schema.menus)) {
+    analyzeMenu(
+      menuId,
+      menu,
+      categories,
+      itemCategories,
+      dependencies,
+      menuBreakpoints,
+      responsiveItems,
+      locale
+    );
+  }
+  for (const [toolbarId, toolbar] of Object.entries(schema.toolbars)) {
+    analyzeToolbar(
+      toolbarId,
+      toolbar,
+      categories,
+      itemCategories,
+      dependencies,
+      responsiveItems,
+      locale
+    );
   }
-  return resolved.active ? true : false;
+  for (const [panelId, panel] of Object.entries(schema.panels)) {
+    analyzePanel(panelId, panel, categories, itemCategories, dependencies);
+  }
+  for (const [selMenuId, selMenu] of Object.entries(schema.selectionMenus || {})) {
+    analyzeSelectionMenu(
+      selMenuId,
+      selMenu,
+      categories,
+      itemCategories,
+      dependencies,
+      responsiveItems,
+      locale
+    );
+  }
+  return { categories, itemCategories, dependencies, menuBreakpoints, responsiveItems };
 }
-function isVisible(item, state) {
-  const resolved = resolveMenuItem(item, state);
-  if (resolved.type === "group") {
-    return false;
+function analyzeMenu(menuId, menu, categories, itemCategories, dependencies, menuBreakpoints, responsiveItems, locale) {
+  collectCategoriesAndDependency(
+    menuId,
+    menu.categories,
+    menu.visibilityDependsOn,
+    categories,
+    itemCategories,
+    dependencies
+  );
+  analyzeMenuItems(menu.items, categories, itemCategories, dependencies);
+  const metadata = resolveResponsiveMetadata(menu, locale);
+  if (metadata) {
+    metadata.items.forEach((itemMeta, itemId) => {
+      responsiveItems.set(itemId, itemMeta);
+    });
   }
-  return resolved.visible ? true : false;
+  const breakpointVisibilities = computeMenuBreakpointVisibilities(menu, itemCategories, locale);
+  menuBreakpoints.set(menuId, breakpointVisibilities);
 }
-function isDisabled(item, state) {
-  const resolved = resolveMenuItem(item, state);
-  if (resolved.type === "group") {
-    return false;
+function analyzeMenuItems(items, categories, itemCategories, dependencies) {
+  for (const item of items) {
+    collectCategoriesAndDependency(
+      item.id,
+      item.categories,
+      item.visibilityDependsOn,
+      categories,
+      itemCategories,
+      dependencies
+    );
+    if (item.type === "section") {
+      analyzeMenuItems(item.items, categories, itemCategories, dependencies);
+    }
   }
-  return resolved.disabled ? true : false;
 }
-function getIconProps(item, state) {
-  const resolved = resolveMenuItem(item, state);
-  if (resolved.type === "group") {
-    return {};
+function computeMenuBreakpointVisibilities(menu, itemCategories, locale) {
+  var _a;
+  const breakpointVisibilities = [];
+  const metadata = resolveResponsiveMetadata(menu, locale);
+  if (((_a = menu.responsive) == null ? void 0 : _a.breakpoints) && metadata) {
+    const sortedBreakpoints = Array.from(metadata.breakpoints.entries()).sort(
+      (a, b) => (a[1].minWidth ?? 0) - (b[1].minWidth ?? 0)
+    );
+    for (const [_bpId, bp] of sortedBreakpoints) {
+      const visibleItems = computeVisibleItemsAtBreakpoint(metadata, bp);
+      const visibleCats = /* @__PURE__ */ new Set();
+      for (const itemId of visibleItems) {
+        const cats = itemCategories.get(itemId);
+        if (cats) cats.forEach((c) => visibleCats.add(c));
+      }
+      breakpointVisibilities.push({
+        minWidth: bp.minWidth,
+        maxWidth: bp.maxWidth,
+        visibleCategories: visibleCats
+      });
+    }
+  } else {
+    const allCats = /* @__PURE__ */ new Set();
+    collectAllMenuItemCategories(menu.items, itemCategories, allCats);
+    breakpointVisibilities.push({ visibleCategories: allCats });
   }
-  return resolved.iconProps ?? {};
+  return breakpointVisibilities;
 }
-const _MenuManager = class _MenuManager {
-  constructor(items = {}, pluginRegistry) {
-    this.registry = {};
-    this.shortcutMap = {};
-    this.eventController = createEventController();
-    this.pluginRegistry = pluginRegistry;
-    this.registerItems(items);
-    this.setupKeyboardListeners();
+function collectAllMenuItemCategories(items, itemCategories, result) {
+  for (const item of items) {
+    const cats = itemCategories.get(item.id);
+    if (cats) cats.forEach((c) => result.add(c));
+    if (item.type === "section") {
+      collectAllMenuItemCategories(item.items, itemCategories, result);
+    }
   }
-  /**
-   * Get the current state of the plugin registry
-   */
-  get state() {
-    return this.pluginRegistry.getStore().getState();
+}
+function computeVisibleItemsAtBreakpoint(metadata, targetBp) {
+  const visible = [];
+  metadata.items.forEach((itemMeta, itemId) => {
+    let isVisible = itemMeta.defaultVisible;
+    for (const rule of itemMeta.visibilityRules) {
+      const ruleApplies = (rule.minWidth === void 0 || targetBp.minWidth !== void 0 && targetBp.minWidth >= rule.minWidth) && (rule.maxWidth === void 0 || targetBp.maxWidth !== void 0 && targetBp.maxWidth <= rule.maxWidth);
+      if (ruleApplies) {
+        isVisible = rule.visible;
+      }
+    }
+    if (isVisible) {
+      visible.push(itemId);
+    }
+  });
+  return visible;
+}
+function analyzeToolbar(toolbarId, toolbar, categories, itemCategories, dependencies, responsiveItems, locale) {
+  collectCategoriesAndDependency(
+    toolbarId,
+    toolbar.categories,
+    toolbar.visibilityDependsOn,
+    categories,
+    itemCategories,
+    dependencies
+  );
+  const metadata = resolveResponsiveMetadata(toolbar, locale);
+  if (metadata) {
+    metadata.items.forEach((itemMeta, itemId) => {
+      responsiveItems.set(itemId, itemMeta);
+    });
   }
-  /**
-   * Register a single menu item
-   */
-  registerItem(item) {
-    if (this.registry[item.id]) {
-      console.warn(`Menu item with ID ${item.id} already exists and will be overwritten`);
+  analyzeToolbarItems(toolbar.items, categories, itemCategories, dependencies);
+}
+function analyzeToolbarItems(items, categories, itemCategories, dependencies) {
+  for (const item of items) {
+    collectCategoriesAndDependency(
+      item.id,
+      item.categories,
+      item.visibilityDependsOn,
+      categories,
+      itemCategories,
+      dependencies
+    );
+    if (item.type === "group" && item.items) {
+      analyzeToolbarItems(item.items, categories, itemCategories, dependencies);
     }
-    this.registry[item.id] = item;
-    if ("shortcut" in item && item.shortcut) {
-      this.shortcutMap[this.normalizeShortcut(item.shortcut)] = item.id;
+    if (item.type === "tab-group" && item.tabs) {
+      analyzeTabItems(item.tabs, categories, itemCategories, dependencies);
     }
   }
-  /**
-   * Register multiple menu items at once
-   */
-  registerItems(items) {
-    Object.values(items).forEach((item) => {
-      this.registerItem(item);
-    });
+}
+function analyzeTabItems(tabs, categories, itemCategories, dependencies) {
+  for (const tab of tabs) {
+    collectCategoriesAndDependency(
+      tab.id,
+      tab.categories,
+      tab.visibilityDependsOn,
+      categories,
+      itemCategories,
+      dependencies
+    );
   }
-  /**
-   * Resolve a menu item by ID
-   */
-  resolve(id) {
-    const raw = this.registry[id];
-    return resolveMenuItem(raw, this.state);
+}
+function analyzePanel(panelId, panel, categories, itemCategories, dependencies) {
+  collectCategoriesAndDependency(
+    panelId,
+    panel.categories,
+    panel.visibilityDependsOn,
+    categories,
+    itemCategories,
+    dependencies
+  );
+  if (panel.content.type === "tabs") {
+    for (const tab of panel.content.tabs) {
+      collectCategoriesAndDependency(
+        tab.id,
+        tab.categories,
+        tab.visibilityDependsOn,
+        categories,
+        itemCategories,
+        dependencies
+      );
+    }
   }
-  /**
-   * Get a menu item by ID with type information
-   */
-  getMenuItem(id) {
-    const item = this.resolve(id);
-    if (!item) return void 0;
-    return {
-      item,
-      isGroup: item.type === "group",
-      isMenu: item.type === "menu",
-      isAction: item.type === "action"
-    };
+}
+function analyzeSelectionMenu(selMenuId, selMenu, categories, itemCategories, dependencies, responsiveItems, locale) {
+  collectCategoriesAndDependency(
+    selMenuId,
+    selMenu.categories,
+    selMenu.visibilityDependsOn,
+    categories,
+    itemCategories,
+    dependencies
+  );
+  if (selMenu.responsive) {
+    const metadata = resolveResponsiveMetadata(selMenu, locale);
+    if (metadata) {
+      metadata.items.forEach((itemMeta, itemId) => {
+        responsiveItems.set(itemId, itemMeta);
+      });
+    }
   }
-  /**
-   * Get a action by ID (only returns Action type items)
-   */
-  getAction(id) {
-    const resolved = this.getMenuItem(id);
-    if (!resolved || !resolved.isAction) return void 0;
-    return resolved.item;
+  analyzeSelectionMenuItems(selMenu.items, categories, itemCategories, dependencies);
+}
+function analyzeSelectionMenuItems(items, categories, itemCategories, dependencies) {
+  for (const item of items) {
+    collectCategoriesAndDependency(
+      item.id,
+      item.categories,
+      item.visibilityDependsOn,
+      categories,
+      itemCategories,
+      dependencies
+    );
+    if (item.type === "group" && item.items) {
+      analyzeSelectionMenuItems(item.items, categories, itemCategories, dependencies);
+    }
   }
-  /**
-   * Get menu or action by ID
-   */
-  getMenuOrAction(id) {
-    const resolved = this.getMenuItem(id);
-    if (!resolved) return void 0;
-    return resolved.item;
+}
+function collectCategoriesAndDependency(itemId, itemCats, visibilityDep, categories, itemCategories, dependencies) {
+  var _a;
+  if (itemCats == null ? void 0 : itemCats.length) {
+    itemCats.forEach((c) => categories.add(c));
+    itemCategories.set(itemId, itemCats);
   }
-  /**
-   * Get all registered menu items
-   */
-  getAllItems() {
-    return { ...this.registry };
+  if (visibilityDep && (visibilityDep.menuId || ((_a = visibilityDep.itemIds) == null ? void 0 : _a.length))) {
+    dependencies.push({
+      itemId,
+      dependsOnMenuId: visibilityDep.menuId,
+      dependsOnItemIds: visibilityDep.itemIds
+    });
   }
-  /**
-   * Get menu items by their IDs
-   */
-  getItemsByIds(ids) {
-    return ids.map((id) => this.resolve(id)).filter((item) => item !== void 0);
+}
+function generateHeader(locale) {
+  const localeInfo = locale ? ` (locale: ${locale})` : "";
+  return `/* ═══════════════════════════════════════════════════════════════════════════ */
+/* EmbedPDF UI Stylesheet - Auto-generated${localeInfo}                         */
+/* DO NOT EDIT MANUALLY - This file is generated from your UI schema            */
+/* ═══════════════════════════════════════════════════════════════════════════ */`;
+}
+function generateResponsiveRules(analysis, cfg) {
+  const rules = [];
+  const queryType = cfg.useContainerQueries ? "@container" : "@media";
+  const processedItems = /* @__PURE__ */ new Set();
+  analysis.responsiveItems.forEach((itemMeta, itemId) => {
+    if (processedItems.has(itemId)) return;
+    processedItems.add(itemId);
+    const itemRules = generateItemResponsiveRules(itemId, itemMeta, queryType);
+    if (itemRules) rules.push(itemRules);
+  });
+  if (rules.length === 0) return "";
+  return `/* ─── Responsive Visibility Rules ─── */
+/* Items show/hide based on container width */
+
+${rules.join("\n\n")}`;
+}
+function generateItemResponsiveRules(itemId, metadata, queryType, cfg) {
+  if (metadata.visibilityRules.length === 0) return null;
+  const rules = [];
+  const selector = UI_SELECTORS.ITEM(itemId);
+  if (!metadata.defaultVisible) {
+    rules.push(`${selector} { display: none; }`);
   }
-  /**
-   * Get child items for a given menu ID
-   * If flatten is true, it will recursively include submenu children but not groups
-   */
-  getChildItems(menuId, options = {}) {
-    var _a;
-    const item = this.resolve(menuId);
-    if (!item || !("children" in item) || !((_a = item.children) == null ? void 0 : _a.length)) {
-      return [];
-    }
-    const children = this.getItemsByIds(item.children);
-    if (!options.flatten) {
-      return children;
-    }
-    const flattened = [];
-    for (const child of children) {
-      if (child.type === "group") {
-        flattened.push(child);
-      } else if (child.type === "menu") {
-        const menuChildren = this.getChildItems(child.id, { flatten: true });
-        flattened.push(...menuChildren);
-      } else {
-        flattened.push(child);
+  for (const rule of metadata.visibilityRules) {
+    const conditions = [];
+    if (rule.minWidth !== void 0) {
+      conditions.push(`(min-width: ${rule.minWidth}px)`);
+    }
+    if (rule.maxWidth !== void 0) {
+      conditions.push(`(max-width: ${rule.maxWidth}px)`);
+    }
+    if (conditions.length > 0) {
+      const display = rule.visible ? "flex" : "none";
+      rules.push(`${queryType} ${conditions.join(" and ")} {
+  ${selector} { display: ${display}; }
+}`);
+    }
+  }
+  return rules.length > 0 ? rules.join("\n") : null;
+}
+function generateCategoryRules(analysis, cfg) {
+  if (analysis.categories.size === 0) return "";
+  const rules = [];
+  const sortedCategories = Array.from(analysis.categories).sort();
+  for (const category of sortedCategories) {
+    rules.push(
+      `${UI_SELECTORS.ROOT}[${UI_ATTRIBUTES.DISABLED_CATEGORIES}~="${category}"] [${UI_ATTRIBUTES.CATEGORIES}~="${category}"] {
+  display: none !important;
+}`
+    );
+  }
+  return `/* ─── Category Visibility Rules ─── */
+/* Items hide when ANY of their categories is disabled */
+/* Use: data-disabled-categories="category1 category2" on root element */
+
+${rules.join("\n\n")}`;
+}
+function generateDependencyRules(analysis, cfg) {
+  if (analysis.dependencies.length === 0) return "";
+  const rules = [];
+  const queryType = cfg.useContainerQueries ? "@container" : "@media";
+  for (const dep of analysis.dependencies) {
+    const depRules = generateSingleDependencyRules(dep, analysis, queryType);
+    if (depRules.length > 0) {
+      rules.push(...depRules);
+    }
+  }
+  if (rules.length === 0) return "";
+  return `/* ─── Dependency Visibility Rules ─── */
+/* Container elements hide when all their dependencies are hidden */
+
+${rules.join("\n\n")}`;
+}
+function generateSingleDependencyRules(dep, analysis, queryType, cfg) {
+  var _a;
+  const rules = [];
+  if (dep.dependsOnMenuId) {
+    const breakpoints = analysis.menuBreakpoints.get(dep.dependsOnMenuId);
+    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)} {
+  display: none !important;
+}`;
+        const conditions = [];
+        if (bp.minWidth !== void 0) conditions.push(`(min-width: ${bp.minWidth}px)`);
+        if (bp.maxWidth !== void 0) conditions.push(`(max-width: ${bp.maxWidth}px)`);
+        if (conditions.length > 0) {
+          rules.push(`${queryType} ${conditions.join(" and ")} {
+  ${cssRule}
+}`);
+        } else {
+          rules.push(cssRule);
+        }
       }
     }
-    return flattened;
   }
-  /**
-   * Execute a command by ID
-   */
-  executeCommand(id, options = {}) {
-    var _a;
-    const resolved = this.getMenuItem(id);
-    if (!resolved) {
-      console.warn(`Menu item '${id}' not found`);
-      return;
-    }
-    if (resolved.item.type === "group") {
-      console.warn(`Cannot execute group '${id}'`);
-      return;
-    }
-    const { item } = resolved;
-    if (item.disabled) {
-      console.warn(`Menu item '${id}' is disabled`);
-      return;
-    }
-    if (resolved.isAction) {
-      item.action(this.pluginRegistry, this.state);
-      this.eventController.emit(_MenuManager.EVENTS.COMMAND_EXECUTED, {
-        command: item,
-        source: options.source || "api"
-      });
-    } else if ("children" in item && ((_a = item.children) == null ? void 0 : _a.length)) {
-      this.handleSubmenu(item, options);
+  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)} {
+  display: none !important;
+}`);
     }
   }
-  /**
-   * Execute a command from a keyboard shortcut
-   */
-  executeShortcut(shortcut) {
-    const normalizedShortcut = this.normalizeShortcut(shortcut);
-    const itemId = this.shortcutMap[normalizedShortcut];
-    if (itemId) {
-      this.executeCommand(itemId, { source: "shortcut" });
-      this.eventController.emit(_MenuManager.EVENTS.SHORTCUT_EXECUTED, {
-        shortcut: normalizedShortcut,
-        itemId
+  return rules;
+}
+function getUIItemProps(item, extra) {
+  var _a;
+  const props = {
+    [UI_ATTRIBUTES.ITEM]: item.id,
+    [UI_ATTRIBUTES.CATEGORIES]: ((_a = item.categories) == null ? void 0 : _a.join(" ")) || void 0,
+    ...extra
+  };
+  return props;
+}
+const _UIPlugin = class _UIPlugin extends BasePlugin {
+  constructor(id, registry, config) {
+    var _a, _b;
+    super(id, registry);
+    this.cachedStylesheet = null;
+    this.cachedLocale = null;
+    this.i18n = null;
+    this.i18nCleanup = null;
+    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.modalChanged$ = createScopedEmitter(
+      (documentId, data) => ({ documentId, ...data }),
+      { cache: false }
+    );
+    this.menuChanged$ = createScopedEmitter(
+      (documentId, data) => ({ documentId, ...data }),
+      { cache: false }
+    );
+    this.schema = config.schema;
+    this.stylesheetConfig = config.stylesheetConfig || {};
+    if ((_a = config.disabledCategories) == null ? void 0 : _a.length) {
+      this.dispatch(setDisabledCategories(config.disabledCategories));
+    }
+    this.i18n = ((_b = registry.getPlugin("i18n")) == null ? void 0 : _b.provides()) ?? null;
+    if (this.i18n) {
+      this.i18nCleanup = this.i18n.onLocaleChange(({ currentLocale }) => {
+        this.handleLocaleChange(currentLocale);
       });
-      return true;
+      this.cachedLocale = this.i18n.getLocale();
     }
-    return false;
   }
-  /**
-   * Subscribe to menu events
-   */
-  on(eventType, callback) {
-    return this.eventController.on(eventType, callback);
+  async initialize() {
+    this.logger.info("UIPlugin", "Initialize", "UI plugin initialized");
+  }
+  async destroy() {
+    if (this.i18nCleanup) {
+      this.i18nCleanup();
+      this.i18nCleanup = null;
+    }
+    this.toolbarChanged$.clear();
+    this.panelChanged$.clear();
+    this.modalChanged$.clear();
+    this.menuChanged$.clear();
+    this.stylesheetInvalidated$.clear();
+    super.destroy();
+  }
+  onDocumentLoadingStarted(documentId) {
+    this.dispatch(initUIState(documentId, this.schema));
+  }
+  onDocumentClosed(documentId) {
+    this.dispatch(cleanupUIState(documentId));
+    this.toolbarChanged$.clearScope(documentId);
+    this.panelChanged$.clearScope(documentId);
+    this.modalChanged$.clearScope(documentId);
+    this.menuChanged$.clearScope(documentId);
   }
   /**
-   * Remove an event subscription
+   * Handle locale changes from i18n plugin.
+   * Invalidates stylesheet and emits change event.
    */
-  off(eventType, callback) {
-    this.eventController.off(eventType, callback);
+  handleLocaleChange(newLocale) {
+    if (this.cachedLocale === newLocale) return;
+    this.logger.debug(
+      "UIPlugin",
+      "LocaleChange",
+      `Locale changed: ${this.cachedLocale} -> ${newLocale}`
+    );
+    this.cachedLocale = newLocale;
+    this.invalidateStylesheet();
+    this.stylesheetInvalidated$.emit();
   }
   /**
-   * Handle a menu item that has children (showing a submenu)
+   * Get the generated CSS stylesheet.
+   * Automatically regenerates if locale has changed.
+   * This is pure logic - DOM injection is handled by framework layer.
    */
-  handleSubmenu(menuItem, options) {
-    this.eventController.emit(_MenuManager.EVENTS.MENU_REQUESTED, {
-      menuId: menuItem.id,
-      triggerElement: options.triggerElement,
-      position: options.position,
-      flatten: options.flatten || false
+  getStylesheet() {
+    var _a;
+    const currentLocale = ((_a = this.i18n) == null ? void 0 : _a.getLocale()) ?? null;
+    if (this.cachedStylesheet && this.cachedLocale === currentLocale) {
+      return this.cachedStylesheet;
+    }
+    this.cachedStylesheet = generateUIStylesheet(this.schema, {
+      config: this.stylesheetConfig,
+      locale: currentLocale ?? void 0
     });
+    this.cachedLocale = currentLocale;
+    return this.cachedStylesheet;
   }
   /**
-   * Set up keyboard listeners for shortcuts
+   * Get the current locale (if i18n is available)
    */
-  setupKeyboardListeners() {
-    if (typeof window === "undefined") return;
-    const handleKeyDown = (event) => {
-      const target = event.target;
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
-        return;
-      }
-      const shortcut = this.buildShortcutString(event);
-      if (shortcut && this.executeShortcut(shortcut)) {
-        event.preventDefault();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
+  getLocale() {
+    var _a;
+    return ((_a = this.i18n) == null ? void 0 : _a.getLocale()) ?? null;
   }
   /**
-   * Convert a KeyboardEvent to a shortcut string
+   * Regenerate stylesheet (call after schema changes)
    */
-  buildShortcutString(event) {
-    const modifiers = [];
-    if (event.ctrlKey) modifiers.push("Ctrl");
-    if (event.shiftKey) modifiers.push("Shift");
-    if (event.altKey) modifiers.push("Alt");
-    if (event.metaKey) modifiers.push("Meta");
-    const key = event.key;
-    const isModifier = ["Control", "Shift", "Alt", "Meta"].includes(key);
-    if (!isModifier) {
-      const displayKey = key.length === 1 ? key.toUpperCase() : key;
-      return [...modifiers, displayKey].join("+");
+  invalidateStylesheet() {
+    this.cachedStylesheet = null;
+  }
+  onStylesheetInvalidated(listener) {
+    return this.stylesheetInvalidated$.on(listener);
+  }
+  // ─────────────────────────────────────────────────────────
+  // Category Management
+  // ─────────────────────────────────────────────────────────
+  disableCategoryImpl(category) {
+    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) });
     }
-    return null;
   }
-  /**
-   * Normalize a shortcut string for consistent comparison
-   */
-  normalizeShortcut(shortcut) {
-    return shortcut.split("+").map((part) => part.trim()).join("+");
+  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) });
+    }
   }
-  /**
-   * Get capabilities for the MenuManager
-   */
-  capabilities() {
+  toggleCategoryImpl(category) {
+    if (this.state.disabledCategories.includes(category)) {
+      this.enableCategoryImpl(category);
+    } else {
+      this.disableCategoryImpl(category);
+    }
+  }
+  setDisabledCategoriesImpl(categories) {
+    this.dispatch(setDisabledCategories(categories));
+    this.categoryChanged$.emit({ disabledCategories: categories });
+  }
+  // ─────────────────────────────────────────────────────────
+  // Capability
+  // ─────────────────────────────────────────────────────────
+  buildCapability() {
     return {
-      registerItem: this.registerItem.bind(this),
-      registerItems: this.registerItems.bind(this),
-      executeCommand: this.executeCommand.bind(this),
-      getAction: this.getAction.bind(this),
-      getMenuOrAction: this.getMenuOrAction.bind(this),
-      getChildItems: this.getChildItems.bind(this),
-      getItemsByIds: this.getItemsByIds.bind(this),
-      getAllItems: this.getAllItems.bind(this)
+      // 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),
+      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),
+      // Document-scoped operations
+      forDocument: (documentId) => this.createUIScope(documentId),
+      // Schema
+      getSchema: () => this.schema,
+      mergeSchema: (partial) => {
+        this.schema = mergeUISchema(this.schema, partial);
+      },
+      // Category management
+      disableCategory: (category) => this.disableCategoryImpl(category),
+      enableCategory: (category) => this.enableCategoryImpl(category),
+      toggleCategory: (category) => this.toggleCategoryImpl(category),
+      setDisabledCategories: (categories) => this.setDisabledCategoriesImpl(categories),
+      getDisabledCategories: () => this.state.disabledCategories,
+      isCategoryDisabled: (category) => this.state.disabledCategories.includes(category),
+      // Events
+      onToolbarChanged: this.toolbarChanged$.onGlobal,
+      onPanelChanged: this.panelChanged$.onGlobal,
+      onModalChanged: this.modalChanged$.onGlobal,
+      onMenuChanged: this.menuChanged$.onGlobal,
+      onCategoryChanged: this.categoryChanged$.on
     };
   }
-};
-_MenuManager.EVENTS = {
-  COMMAND_EXECUTED: "menu:command_executed",
-  MENU_REQUESTED: "menu:requested",
-  SHORTCUT_EXECUTED: "menu:shortcut_executed"
-};
-let MenuManager = _MenuManager;
-const _UIPlugin = class _UIPlugin extends BasePlugin {
-  // Add this
-  constructor(id, registry, config) {
-    super(id, registry);
-    this.componentRenderers = {};
-    this.components = {};
-    this.mapStateCallbacks = {};
-    this.globalStoreSubscription = () => {
+  // ─────────────────────────────────────────────────────────
+  // Document Scoping
+  // ─────────────────────────────────────────────────────────
+  createUIScope(documentId) {
+    return {
+      // ───── Toolbars ─────
+      setActiveToolbar: (placement, slot, toolbarId) => this.setToolbarForDocument(placement, slot, toolbarId, documentId),
+      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 ─────
+      openModal: (modalId) => this.openModalForDocument(modalId, documentId),
+      closeModal: () => this.closeModalForDocument(documentId),
+      getActiveModal: () => this.getActiveModalForDocument(documentId),
+      // ───── Menus ─────
+      openMenu: (menuId, triggeredByCommandId, triggeredByItemId) => this.openMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
+      closeMenu: (menuId) => this.closeMenuForDocument(menuId, documentId),
+      toggleMenu: (menuId, triggeredByCommandId, triggeredByItemId) => this.toggleMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
+      closeAllMenus: () => this.closeAllMenusForDocument(documentId),
+      isMenuOpen: (menuId) => this.isMenuOpenForDocument(menuId, documentId),
+      getOpenMenus: () => this.getOpenMenusForDocument(documentId),
+      // ───── Schema & state ─────
+      getSchema: () => this.schema,
+      getState: () => this.getDocumentStateOrThrow(documentId),
+      // ───── Scoped events ─────
+      onToolbarChanged: this.toolbarChanged$.forScope(documentId),
+      onPanelChanged: this.panelChanged$.forScope(documentId),
+      onModalChanged: this.modalChanged$.forScope(documentId),
+      onMenuChanged: this.menuChanged$.forScope(documentId)
     };
-    this.config = config;
-    this.menuManager = new MenuManager(config.menuItems || {}, this.registry);
-    this.setupCommandEventHandlers();
-    this.globalStoreSubscription = this.registry.getStore().subscribe((_action, newState) => {
-      this.onGlobalStoreChange(newState);
-    });
   }
-  async initialize() {
-    this.buildComponents();
-    this.linkGroupedItems();
-    this.setInitialStateUIComponents();
-  }
-  // Set up handlers for command events
-  setupCommandEventHandlers() {
-    this.menuManager.on(MenuManager.EVENTS.MENU_REQUESTED, (data) => {
-      var _a;
-      const { menuId, triggerElement, position, flatten } = data;
-      const isOpen = ((_a = this.state.commandMenu.commandMenu) == null ? void 0 : _a.activeCommand) === menuId;
-      if (isOpen) {
-        return this.dispatch(uiHideCommandMenu({ id: "commandMenu" }));
-      }
-      this.dispatch(
-        uiShowCommandMenu({
-          id: "commandMenu",
-          commandId: menuId,
-          triggerElement,
-          position,
-          flatten
-        })
-      );
-    });
-    this.menuManager.on(MenuManager.EVENTS.COMMAND_EXECUTED, (data) => {
-      this.logger.debug("UIPlugin", "CommandExecuted", `Command executed: ${data.command.id}`, {
-        commandId: data.command.id,
-        source: data.source
-      });
-    });
+  // ─────────────────────────────────────────────────────────
+  // State Helpers
+  // ─────────────────────────────────────────────────────────
+  getDocumentState(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    return this.state.documents[id] ?? null;
   }
-  addComponent(id, componentConfig) {
-    if (this.components[id]) {
-      this.logger.warn(
-        "UIPlugin",
-        "ComponentAlreadyExists",
-        `Component with ID ${id} already exists and will be overwritten`
-      );
-    }
-    const component = new UIComponent(componentConfig, this.componentRenderers);
-    this.components[id] = component;
-    if (typeof componentConfig.mapStateToProps === "function") {
-      this.mapStateCallbacks[id] = componentConfig.mapStateToProps;
+  getDocumentStateOrThrow(documentId) {
+    const state = this.getDocumentState(documentId);
+    if (!state) {
+      throw new Error(`UI state not found for document: ${documentId ?? "active"}`);
     }
-    return component;
+    return state;
   }
-  buildComponents() {
-    Object.entries(this.config.components).forEach(([id, componentConfig]) => {
-      this.addComponent(id, componentConfig);
-    });
+  // ─────────────────────────────────────────────────────────
+  // Core Operations - Toolbars
+  // ─────────────────────────────────────────────────────────
+  setToolbarForDocument(placement, slot, toolbarId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(setActiveToolbar(id, placement, slot, toolbarId));
+    this.toolbarChanged$.emit(id, { placement, slot, toolbarId });
   }
-  linkGroupedItems() {
-    Object.values(this.components).forEach((component) => {
-      var _a;
-      if (isItemWithSlots(component)) {
-        const props = component.componentConfig;
-        (_a = props.slots) == null ? void 0 : _a.forEach((slot) => {
-          const child = this.components[slot.componentId];
-          if (child) {
-            component.addChild(slot.componentId, child, slot.priority, slot.className);
-          } else {
-            this.logger.warn(
-              "UIPlugin",
-              "ChildComponentNotFound",
-              `Child component ${slot.componentId} not found for GroupedItems ${props.id}`
-            );
-          }
-        });
-      }
-    });
+  getToolbarForDocument(placement, slot, documentId) {
+    const slotKey = `${placement}-${slot}`;
+    const toolbarSlot = this.getDocumentStateOrThrow(documentId).activeToolbars[slotKey];
+    return (toolbarSlot == null ? void 0 : toolbarSlot.isOpen) ? toolbarSlot.toolbarId : null;
   }
-  setInitialStateUIComponents() {
-    const defaultState = initialState;
-    Object.entries(this.config.components).forEach(([componentId, definition]) => {
-      if (definition.initialState) {
-        defaultState[definition.type][componentId] = definition.initialState;
-      } else {
-        defaultState[definition.type][componentId] = {};
-      }
-    });
-    this.dispatch(uiInitComponents(defaultState));
-  }
-  onGlobalStoreChange(state) {
-    for (const [id, uiComponent] of Object.entries(this.components)) {
-      const mapFn = this.mapStateCallbacks[id];
-      if (!mapFn) continue;
-      const { id: _id, ...ownProps } = uiComponent.props;
-      const partial = mapFn(state, ownProps);
-      const merged = { ...ownProps, ...partial };
-      if (!arePropsEqual(ownProps, merged)) {
-        uiComponent.update(partial);
-      }
-    }
+  closeToolbarForDocument(placement, slot, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(closeToolbarSlot(id, placement, slot));
+    this.toolbarChanged$.emit(id, { placement, slot, toolbarId: "" });
   }
-  addSlot(parentId, slotId, priority, className) {
-    const parentComponent = this.components[parentId];
-    if (!parentComponent) {
-      this.logger.error(
-        "UIPlugin",
-        "ParentComponentNotFound",
-        `Parent component ${parentId} not found`
-      );
-      return;
-    }
-    if (!isItemWithSlots(parentComponent)) {
-      this.logger.error(
-        "UIPlugin",
-        "ParentComponentDoesNotSupportSlots",
-        `Parent component ${parentId} does not support slots`
-      );
-      return;
-    }
-    const childComponent = this.components[slotId];
-    if (!childComponent) {
-      this.logger.error(
-        "UIPlugin",
-        "ChildComponentNotFound",
-        `Child component ${slotId} not found`
-      );
-      return;
+  isToolbarOpenForDocument(placement, slot, toolbarId, documentId) {
+    const slotKey = `${placement}-${slot}`;
+    const toolbarSlot = this.getDocumentStateOrThrow(documentId).activeToolbars[slotKey];
+    if (!toolbarSlot || !toolbarSlot.isOpen) return false;
+    return toolbarId ? toolbarSlot.toolbarId === toolbarId : true;
+  }
+  // ─────────────────────────────────────────────────────────
+  // Core Operations - Panels
+  // ─────────────────────────────────────────────────────────
+  setPanelForDocument(placement, slot, panelId, documentId, activeTab) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(setActivePanel(id, placement, slot, panelId, activeTab));
+    this.panelChanged$.emit(id, { placement, slot, panelId });
+  }
+  getPanelForDocument(placement, slot, documentId) {
+    const slotKey = `${placement}-${slot}`;
+    const panelSlot = this.getDocumentStateOrThrow(documentId).activePanels[slotKey];
+    return (panelSlot == null ? void 0 : panelSlot.isOpen) ? panelSlot.panelId : null;
+  }
+  closePanelForDocument(placement, slot, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(closePanelSlot(id, placement, slot));
+    this.panelChanged$.emit(id, { placement, slot, panelId: "" });
+  }
+  togglePanelForDocument(placement, slot, panelId, 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: "" });
+    } else {
+      this.dispatch(setActivePanel(id, placement, slot, panelId, activeTab));
+      this.panelChanged$.emit(id, { placement, slot, panelId });
     }
-    const parentChildren = parentComponent.getChildren();
-    let slotPriority = priority;
-    if (slotPriority === void 0) {
-      const maxPriority = parentChildren.length > 0 ? Math.max(...parentChildren.map((child) => child.priority)) : 0;
-      slotPriority = maxPriority + 10;
+  }
+  isPanelOpenForDocument(placement, slot, panelId, documentId) {
+    const slotKey = `${placement}-${slot}`;
+    const panelSlot = this.getDocumentStateOrThrow(documentId).activePanels[slotKey];
+    if (!panelSlot || !panelSlot.isOpen) return false;
+    return panelId ? panelSlot.panelId === panelId : true;
+  }
+  // ─────────────────────────────────────────────────────────
+  // Core Operations - Panel Tabs
+  // ─────────────────────────────────────────────────────────
+  setPanelTabForDocument(panelId, tabId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(setPanelTab(id, panelId, tabId));
+  }
+  getPanelTabForDocument(panelId, documentId) {
+    return this.getDocumentStateOrThrow(documentId).panelTabs[panelId] ?? null;
+  }
+  // ─────────────────────────────────────────────────────────
+  // Core Operations - Modals
+  // ─────────────────────────────────────────────────────────
+  openModalForDocument(modalId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(openModal(id, modalId));
+    this.modalChanged$.emit(id, { modalId });
+  }
+  closeModalForDocument(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(closeModal(id));
+    this.modalChanged$.emit(id, { modalId: null });
+  }
+  getActiveModalForDocument(documentId) {
+    return this.getDocumentStateOrThrow(documentId).activeModal;
+  }
+  // ─────────────────────────────────────────────────────────
+  // Core Operations - Menus
+  // ─────────────────────────────────────────────────────────
+  openMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(openMenu(id, { menuId, triggeredByCommandId, triggeredByItemId }));
+    this.menuChanged$.emit(id, { menuId, isOpen: true });
+  }
+  closeMenuForDocument(menuId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(closeMenu(id, menuId));
+    this.menuChanged$.emit(id, { menuId, isOpen: false });
+  }
+  toggleMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const isOpen = !!this.getDocumentStateOrThrow(id).openMenus[menuId];
+    if (isOpen) {
+      this.dispatch(closeMenu(id, menuId));
+      this.menuChanged$.emit(id, { menuId, isOpen: false });
+    } else {
+      this.dispatch(openMenu(id, { menuId, triggeredByCommandId, triggeredByItemId }));
+      this.menuChanged$.emit(id, { menuId, isOpen: true });
     }
-    parentComponent.addChild(slotId, childComponent, slotPriority, className);
   }
-  buildCapability() {
-    return {
-      registerComponentRenderer: (type, renderer) => {
-        this.componentRenderers[type] = renderer;
-      },
-      getComponent: (id) => {
-        return this.components[id];
-      },
-      registerComponent: this.addComponent.bind(this),
-      getCommandMenu: () => Object.values(this.components).find((component) => isCommandMenuComponent(component)),
-      hideCommandMenu: () => this.cooldownDispatch(uiHideCommandMenu({ id: "commandMenu" }), 100),
-      getFloatingComponents: (scrollerPosition) => Object.values(this.components).filter((component) => isFloatingComponent(component)).filter(
-        (component) => !scrollerPosition || component.props.scrollerPosition === scrollerPosition
-      ),
-      getHeadersByPlacement: (placement) => Object.values(this.components).filter((component) => isHeaderComponent(component)).filter((component) => component.props.placement === placement),
-      getPanelsByLocation: (location) => Object.values(this.components).filter((component) => isPanelComponent(component)).filter((component) => component.props.location === location),
-      addSlot: this.addSlot.bind(this),
-      togglePanel: (payload) => {
-        this.dispatch(uiTogglePanel(payload));
-      },
-      setHeaderVisible: (payload) => {
-        this.dispatch(uiSetHeaderVisible(payload));
-      },
-      updateComponentState: (payload) => {
-        this.dispatch(uiUpdateComponentState(payload));
-      },
-      ...this.menuManager.capabilities()
-    };
+  closeAllMenusForDocument(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.dispatch(closeAllMenus(id));
   }
-  async destroy() {
-    this.globalStoreSubscription();
-    this.components = {};
-    this.componentRenderers = {};
-    this.mapStateCallbacks = {};
+  isMenuOpenForDocument(menuId, documentId) {
+    return !!this.getDocumentStateOrThrow(documentId).openMenus[menuId];
+  }
+  getOpenMenusForDocument(documentId) {
+    return Object.values(this.getDocumentStateOrThrow(documentId).openMenus);
   }
 };
 _UIPlugin.id = "ui";
 let UIPlugin = _UIPlugin;
-function isItemWithSlots(component) {
-  return isGroupedItemsComponent(component) || isHeaderComponent(component) || isPanelComponent(component) || isFloatingComponent(component) || isCustomComponent(component);
-}
-function isGroupedItemsComponent(component) {
-  return component.type === "groupedItems";
+const initialDocumentState = {
+  activeToolbars: {},
+  activePanels: {},
+  activeModal: null,
+  openMenus: {},
+  panelTabs: {}
+};
+const initialState = {
+  documents: {},
+  disabledCategories: []
+};
+const uiReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case INIT_UI_STATE: {
+      const { documentId, schema } = action.payload;
+      const activeToolbars = {};
+      Object.values(schema.toolbars).forEach((toolbar) => {
+        if (toolbar.permanent && toolbar.position) {
+          const slotKey = `${toolbar.position.placement}-${toolbar.position.slot}`;
+          activeToolbars[slotKey] = {
+            toolbarId: toolbar.id,
+            isOpen: true
+            // Permanent toolbars are always open
+          };
+        }
+      });
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...initialDocumentState,
+            activeToolbars
+            // Initialize with permanent toolbars
+          }
+        }
+      };
+    }
+    case CLEANUP_UI_STATE: {
+      const { documentId } = action.payload;
+      const { [documentId]: removed, ...remaining } = state.documents;
+      return {
+        ...state,
+        documents: remaining
+      };
+    }
+    case SET_ACTIVE_TOOLBAR: {
+      const { documentId, placement, slot, toolbarId } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
+      const slotKey = `${placement}-${slot}`;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activeToolbars: {
+              ...docState.activeToolbars,
+              [slotKey]: {
+                toolbarId,
+                isOpen: true
+              }
+            }
+          }
+        }
+      };
+    }
+    case SET_ACTIVE_PANEL: {
+      const { documentId, placement, slot, panelId, activeTab } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
+      const slotKey = `${placement}-${slot}`;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activePanels: {
+              ...docState.activePanels,
+              [slotKey]: {
+                panelId,
+                isOpen: true
+              }
+            },
+            ...activeTab && {
+              panelTabs: {
+                ...docState.panelTabs,
+                [panelId]: activeTab
+              }
+            }
+          }
+        }
+      };
+    }
+    case CLOSE_PANEL_SLOT: {
+      const { documentId, placement, slot } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      const slotKey = `${placement}-${slot}`;
+      const panelSlot = docState.activePanels[slotKey];
+      if (!panelSlot) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activePanels: {
+              ...docState.activePanels,
+              [slotKey]: {
+                ...panelSlot,
+                isOpen: false
+                // Keep panel, just close it
+              }
+            }
+          }
+        }
+      };
+    }
+    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,
+            activeToolbars: {
+              ...docState.activeToolbars,
+              [slotKey]: {
+                ...toolbarSlot,
+                isOpen: false
+                // Keep toolbar, just close it
+              }
+            }
+          }
+        }
+      };
+    }
+    case SET_PANEL_TAB: {
+      const { documentId, panelId, tabId } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            panelTabs: {
+              ...docState.panelTabs,
+              [panelId]: tabId
+            }
+          }
+        }
+      };
+    }
+    case OPEN_MODAL: {
+      const { documentId, modalId } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activeModal: modalId,
+            openMenus: {}
+            // Close all menus when opening modal
+          }
+        }
+      };
+    }
+    case CLOSE_MODAL: {
+      const { documentId } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            activeModal: null
+          }
+        }
+      };
+    }
+    case OPEN_MENU: {
+      const { documentId, menuState } = action.payload;
+      const docState = state.documents[documentId] || initialDocumentState;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            openMenus: {
+              // Close other menus, open this one
+              [menuState.menuId]: menuState
+            }
+          }
+        }
+      };
+    }
+    case CLOSE_MENU: {
+      const { documentId, menuId } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      const { [menuId]: removed, ...remainingMenus } = docState.openMenus;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            openMenus: remainingMenus
+          }
+        }
+      };
+    }
+    case CLOSE_ALL_MENUS: {
+      const { documentId } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            openMenus: {}
+          }
+        }
+      };
+    }
+    case SET_DISABLED_CATEGORIES: {
+      return {
+        ...state,
+        disabledCategories: action.payload.categories
+      };
+    }
+    default:
+      return state;
+  }
+};
+function selectUIState(plugins) {
+  return plugins["ui"] ?? null;
 }
-function isHeaderComponent(component) {
-  return component.type === "header";
+function selectUIDocumentState(plugins, documentId) {
+  const ui = selectUIState(plugins);
+  return (ui == null ? void 0 : ui.documents[documentId]) ?? null;
 }
-function isPanelComponent(component) {
-  return component.type === "panel";
+function makeSlotKey(placement, slot) {
+  return `${placement}-${slot}`;
 }
-function isFloatingComponent(component) {
-  return component.type === "floating";
+function selectToolbarSlot(plugins, documentId, placement, slot) {
+  const doc = selectUIDocumentState(plugins, documentId);
+  if (!doc) return null;
+  return doc.activeToolbars[makeSlotKey(placement, slot)] ?? null;
 }
-function isCommandMenuComponent(component) {
-  return component.type === "commandMenu";
+function isToolbarOpen(plugins, documentId, placement, slot, toolbarId) {
+  const slotState = selectToolbarSlot(plugins, documentId, placement, slot);
+  if (!slotState || !slotState.isOpen) return false;
+  return toolbarId ? slotState.toolbarId === toolbarId : true;
 }
-function isCustomComponent(component) {
-  return component.type === "custom";
+function selectPanelSlot(plugins, documentId, placement, slot) {
+  const doc = selectUIDocumentState(plugins, documentId);
+  if (!doc) return null;
+  return doc.activePanels[makeSlotKey(placement, slot)] ?? null;
 }
-const UI_PLUGIN_ID = "ui";
-const manifest = {
-  id: UI_PLUGIN_ID,
-  name: "UI Plugin",
-  version: "1.0.0",
-  provides: ["ui"],
-  requires: [],
-  optional: [],
-  defaultConfig: {
-    enabled: true,
-    components: {}
-  }
-};
-function hasActive(command) {
-  return "active" in command;
+function isPanelOpen(plugins, documentId, placement, slot, panelId) {
+  const slotState = selectPanelSlot(plugins, documentId, placement, slot);
+  if (!slotState || !slotState.isOpen) return false;
+  return panelId ? slotState.panelId === panelId : true;
 }
 const UIPluginPackage = {
   manifest,
@@ -747,18 +1372,51 @@ const UIPluginPackage = {
   initialState
 };
 export {
-  UIComponent,
+  CLEANUP_UI_STATE,
+  CLOSE_ALL_MENUS,
+  CLOSE_MENU,
+  CLOSE_MODAL,
+  CLOSE_PANEL_SLOT,
+  CLOSE_TOOLBAR_SLOT,
+  INIT_UI_STATE,
+  OPEN_MENU,
+  OPEN_MODAL,
+  SET_ACTIVE_PANEL,
+  SET_ACTIVE_TOOLBAR,
+  SET_DISABLED_CATEGORIES,
+  SET_PANEL_TAB,
   UIPlugin,
   UIPluginPackage,
+  UI_ATTRIBUTES,
   UI_PLUGIN_ID,
-  createEventController,
-  defineComponent,
-  getIconProps,
-  hasActive,
-  isActive,
-  isDisabled,
-  isVisible,
+  UI_SELECTORS,
+  cleanupUIState,
+  closeAllMenus,
+  closeMenu,
+  closeModal,
+  closePanelSlot,
+  closeToolbarSlot,
+  extractCategories,
+  generateUIStylesheet,
+  getItemResponsiveMetadata,
+  getStylesheetConfig,
+  getUIItemProps,
+  initUIState,
+  isPanelOpen,
+  isToolbarOpen,
   manifest,
-  resolveMenuItem
+  mergeUISchema,
+  openMenu,
+  openModal,
+  removeFromSchema,
+  resolveResponsiveMetadata,
+  selectPanelSlot,
+  selectToolbarSlot,
+  selectUIDocumentState,
+  selectUIState,
+  setActivePanel,
+  setActiveToolbar,
+  setDisabledCategories,
+  setPanelTab
 };
 //# sourceMappingURL=index.js.map