(() => {
  // src/ui/panel.ui.js
  var root = window;
  var panelNamespace = root.Panel ?? (root.Panel = {});
  var page = panelNamespace.ui ?? {};
  panelNamespace.ui = page;
  var core = panelNamespace.core;
  var Panel = core?.Panel;
  if (!Panel) throw new Error("加载 panel.ui.js 前必须先加载 Panel.core.Panel");
  var panelUtil = core?.util ?? Panel.util;
  var panelConfig = panelNamespace.config ?? null;
  var panelSelects = panelNamespace.selects ?? null;
  var panelActivationCode = panelNamespace.activationCode ?? "";
  var localStorageKey = panelNamespace.storageKey ?? "panel:data";
  var noop = () => {
  };
  var TestActionIds = Object.freeze(["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9"]);
  var getTestApi = () => panelNamespace.test ?? null;
  var resolveActionRunner = (action) => {
    if (!action || action === "invokeAction") return null;
    const panel = page.panel;
    if (panel && typeof panel[action] === "function") return () => panel.invokeAction(action);
    const handler = page[action];
    if (typeof handler === "function" && handler !== page.invokeAction) return () => handler();
    const testApi = getTestApi();
    if (testApi?.has?.(action) === true && typeof testApi.run === "function") return () => testApi.run(action);
    return null;
  };
  (() => {
    "use strict";
    const applyConfig = () => {
      if (panelConfig) {
        if (panelConfig.panel && panelConfig.panel.config) {
          page.panel.config = panelUtil.mergeDeep(page.panel.config, panelConfig.panel.config);
        }
        if (panelConfig.ui) {
          page.ui = panelUtil.mergeDeep(page.ui, panelConfig.ui);
        }
      }
    };
    const bindOnce = (element, type, handler) => element.addEventListener(type, handler);
    const unbindOnce = (element, type, handler) => element.removeEventListener(type, handler);
    const bindListOnce = (elements, type, handler) => {
      if (!elements?.length) return;
      for (let i = 0; i < elements.length; i++) bindOnce(elements[i], type, handler);
    };
    const unbindList = (elements, type, handler) => {
      if (!elements?.length) return;
      for (let i = 0; i < elements.length; i++) unbindOnce(elements[i], type, handler);
    };
    const closest = (target, selector) => target?.closest(selector) ?? null;
    const getData = (el, key) => el?.dataset?.[key] ?? null;
    const ensureHandler = (handlers, key, factory) => {
      if (!handlers[key]) handlers[key] = factory();
      return handlers[key];
    };
    const bindPanelHandlers = (panel, handlers, entries) => {
      if (!panel) return;
      for (let i = 0; i < entries.length; i++) {
        const [key, type, factory] = entries[i];
        bindOnce(panel, type, ensureHandler(handlers, key, factory));
      }
    };
    const unbindPanelHandlers = (panel, handlers, entries) => {
      if (!panel) return;
      for (let i = 0; i < entries.length; i++) {
        const [key, type] = entries[i];
        const handler = handlers[key];
        if (handler) unbindOnce(panel, type, handler);
      }
    };
    const scheduleRafTask = (tasks, key, handler) => {
      if (!tasks || tasks[key]) return;
      tasks[key] = requestAnimationFrame(() => {
        tasks[key] = 0;
        handler();
      });
    };
    const cancelRafTask = (tasks, key) => {
      if (!tasks || !tasks[key]) return;
      cancelAnimationFrame(tasks[key]);
      tasks[key] = 0;
    };
    const cancelAllRafTasks = (tasks) => {
      if (!tasks) return;
      for (const key in tasks) cancelRafTask(tasks, key);
    };
    const queryAll = (selector, root2 = document) => Array.from(root2.querySelectorAll(selector));
    const toastTypes = /* @__PURE__ */ new Set(["info", "success", "warning", "error"]);
    const shapeFormConfigs = Panel.uiShapeConfigs;
    const shapeFormMap = /* @__PURE__ */ new Map();
    for (let i = 0; i < shapeFormConfigs.length; i++) {
      const config = shapeFormConfigs[i];
      shapeFormMap.set(config.type, config);
    }
    const formActionSchemas = Panel.formActionSchemas || {};
    const renameConfigs = {
      layer: {
        stateKey: "layerState",
        listKey: "layerList",
        dataAttr: "layer-id",
        dataKey: "layerId",
        itemSelector: ".layer-item",
        nameSelector: ".layer-name",
        inputSelector: ".layer-input",
        getEntry: (id) => page.panel.getLayer(id),
        rename: (id, name) => page.panel.renameLayer(id, name, { history: true }),
        renderList: () => page.renderLayerList()
      },
      group: {
        stateKey: "groupState",
        listKey: "groupList",
        dataAttr: "group-id",
        dataKey: "groupId",
        itemSelector: ".group-item",
        nameSelector: ".group-name",
        inputSelector: ".group-input",
        getEntry: (id) => page.panel.getGroup(id),
        rename: (id, name) => page.panel.renameGroup(id, name, { history: true }),
        renderList: () => page.renderGroupList()
      }
    };
    const getRenameConfig = (type) => renameConfigs[type];
    const panelEventEntries = [["click", "Click"], ["dblclick", "DblClick"], ["keydown", "Keydown"], ["focusout", "FocusOut"]];
    const buildPanelHandlerEntries = (type) => {
      const entries = new Array(panelEventEntries.length);
      for (let i = 0; i < panelEventEntries.length; i++) {
        const [eventType, suffix] = panelEventEntries[i];
        entries[i] = [
          `${type}Panel${suffix}`,
          eventType,
          () => (event) => page.handleSettingsPanelEvent(type, eventType, event)
        ];
      }
      return entries;
    };
    const layerPanelHandlerEntries = buildPanelHandlerEntries("layer");
    const groupPanelHandlerEntries = buildPanelHandlerEntries("group");
    const formEventEntries = Object.freeze([
      ["input", "handleFormInput"],
      ["change", "handleFormChange"],
      ["click", "handleFormClick"]
    ]);
    const nodePositionNumberKeys = ["x", "y", "theta", "allowedDeviationXY", "allowedDeviationTheta"];
    const controlPointNumberKeys = ["x", "y", "weight"];
    const runCommandAction = (id) => {
      const run = resolveActionRunner(id);
      if (!run) return false;
      run();
      return true;
    };
    const getFormEventTargets = () => {
      const targets = [];
      const container = document.querySelector(".property");
      if (container) targets.push(container);
      const settingsPanel = document.getElementById("settingsPanel");
      if (settingsPanel && settingsPanel !== container) targets.push(settingsPanel);
      return targets;
    };
    const toggleFormEventTargets = (targets, method) => {
      if (!targets?.length) return;
      for (let i = 0; i < targets.length; i++) {
        const target = targets[i];
        if (!target) continue;
        for (let j = 0; j < formEventEntries.length; j++) {
          const [type, key] = formEventEntries[j];
          target[method](type, page[key]);
        }
      }
    };
    const dispatchPanelAction = (event, config) => {
      const actionEl = closest(event.target, config.actionSelector);
      if (!actionEl) return;
      const action = getData(actionEl, config.actionKey);
      const handler = config.handlers[action];
      if (!handler) return;
      const item = closest(actionEl, config.itemSelector);
      const payload = { action, item };
      payload[config.idKey] = getData(item, config.idKey);
      if (handler(payload) === true) config.refresh();
    };
    const startRenameFromAction = (type, item, targetId) => {
      if (!targetId) return false;
      const targetItem = item || page.getRenameListItem(type, targetId);
      if (!targetItem) return false;
      page.startRename(type, targetId, targetItem);
      return false;
    };
    const createRenameAction = (type, getActiveId) => (payload) => {
      const targetId = payload?.[`${type}Id`] || getActiveId();
      return startRenameFromAction(type, payload?.item, targetId);
    };
    const moveLayerAction = ({ action }) => {
      const activeId = page.panel.getActiveLayerId();
      if (!activeId) return false;
      page.panel.moveLayer(activeId, action, { history: true });
      return true;
    };
    const withLayerId = (layerId, handler) => {
      if (!layerId) return false;
      handler(layerId);
      return true;
    };
    const removeGroupAction = ({ groupId }) => {
      const targetId = groupId || page.panel.getActiveGroupId();
      if (!targetId) return false;
      return page.panel.removeGroupById(targetId, { history: true });
    };
    const layerActionHandlers = Object.freeze({
      add: () => {
        const layer = page.panel.addLayer(void 0, { history: true });
        if (layer) page.panel.setActiveLayer(layer.id);
        return true;
      },
      moveSelected: () => {
        const activeId = page.panel.getActiveLayerId();
        if (!activeId) {
          page.notify("未找到当前图层", "warning");
          return false;
        }
        const moved = page.panel.moveActiveShapesToLayer(activeId, { history: true });
        if (!moved) {
          page.notify("未选中可移动对象", "warning");
        }
        return true;
      },
      rename: createRenameAction("layer", () => page.panel.getActiveLayerId()),
      delete: () => {
        const activeId = page.panel.getActiveLayerId();
        if (!activeId) return false;
        const layers = page.panel.getLayers();
        const activeIndex = layers.findIndex((layer) => layer.id === activeId);
        let nextActiveId = null;
        if (activeIndex > 0) {
          nextActiveId = layers[activeIndex - 1]?.id ?? null;
        } else if (activeIndex === 0 && layers.length > 1) {
          nextActiveId = layers[1]?.id ?? null;
        }
        const removed = page.panel.removeLayer(activeId, { history: true });
        if (!removed) {
          page.notify("至少保留一个图层", "warning");
        }
        if (removed && nextActiveId) {
          page.panel.setActiveLayer(nextActiveId);
        }
        return true;
      },
      up: moveLayerAction,
      down: moveLayerAction,
      select: ({ layerId }) => withLayerId(layerId, (id) => page.panel.setActiveLayer(id)),
      visibility: ({ layerId }) => withLayerId(layerId, (id) => page.panel.toggleLayerVisibility(id, { history: true })),
      lock: ({ layerId }) => withLayerId(layerId, (id) => page.panel.toggleLayerLock(id, { history: true }))
    });
    const groupActionHandlers = Object.freeze({
      group: () => {
        page.panel.setGroup();
        return true;
      },
      ungroup: removeGroupAction,
      delete: removeGroupAction,
      rename: createRenameAction("group", () => page.panel.getActiveGroupId()),
      select: ({ groupId }) => {
        if (!groupId) return false;
        const shapes = page.panel.getGroupShapes(groupId);
        if (!Array.isArray(shapes) || shapes.length === 0) {
          page.panel.setActiveGroupId(groupId);
          page.panel.requestRender();
          return true;
        }
        page.panel.setActiveShapes(shapes);
        return true;
      }
    });
    const layerPanelDispatchConfig = Object.freeze({
      actionSelector: "[data-layer-action]",
      actionKey: "layerAction",
      itemSelector: ".layer-item",
      idKey: "layerId",
      handlers: layerActionHandlers,
      refresh: () => page.refreshLayerList()
    });
    const groupPanelDispatchConfig = Object.freeze({
      actionSelector: "[data-group-action]",
      actionKey: "groupAction",
      itemSelector: ".group-item",
      idKey: "groupId",
      handlers: groupActionHandlers,
      refresh: () => page.refreshGroupList()
    });
    const panelDispatchConfigs = Object.freeze({
      layer: layerPanelDispatchConfig,
      group: groupPanelDispatchConfig
    });
    const settingsPanelEventHandlers = Object.freeze({
      dblclick: "handleRenameDblClick",
      keydown: "handleRenameKeydown",
      focusout: "handleRenameFocusOut"
    });
    Object.assign(page, {
      canvas: {},
      panel: {
        config: {
          license: { activationCode: panelActivationCode },
          map: { base: { size: { w: 1e4, h: 1e4 } } },
          mode: "Edit",
          info: { enable: true }
        }
      },
      ui: {
        statusInterval: 1e3,
        statusTimer: null,
        pageReady: null,
        visibilityHandler: null,
        shapeBindingsReady: false,
        toolFilter: { group: "all" },
        toolFilterState: { text: null, group: null },
        els: {},
        formActionMap: /* @__PURE__ */ new Map(),
        formActionSchemaMap: /* @__PURE__ */ new Map(),
        formEventsBound: false,
        formEventTargets: [],
        multiSelectBound: false,
        rafTasks: {},
        formInputQueue: /* @__PURE__ */ new Map(),
        formInputList: [],
        formInputsCache: /* @__PURE__ */ new Map(),
        resizeObserver: null,
        defaultTheme: null,
        initialized: false,
        bound: false,
        handlers: {},
        dialogListeners: [],
        statusCache: {
          mapMeta: null,
          toggles: {}
        },
        searchState: {
          keyword: "",
          matches: [],
          index: 0
        },
        toastHost: null,
        settingsPanelOpen: false,
        layerState: {
          editingId: null
        },
        groupState: {
          editingId: null
        }
      },
      init: () => {
        if (page.ui.initialized) return;
        page.ui.initialized = true;
        page.canvas = document.getElementById("canvas");
        if (page.ui.defaultTheme) {
          page.applyUiTheme(page.ui.defaultTheme);
        }
        page.panel = new Panel(page.canvas, page.panel.config).init();
        page.bind();
        const panelTheme = page.panel.getTheme();
        const preferredTheme = page.ui.defaultTheme || panelTheme;
        page.applyUiTheme(preferredTheme);
        page.panel.setTheme(preferredTheme, { force: true });
        page.setMapRectForm(page.panel);
      },
      start: () => {
        applyConfig();
        page.init();
        const handlers = page.ui.handlers ?? (page.ui.handlers = {});
        if (!handlers.beforeUnload) {
          handlers.beforeUnload = () => page.destroy();
          window.addEventListener("beforeunload", handlers.beforeUnload);
        }
      },
      bind: () => {
        if (page.ui.bound) return;
        page.ui.bound = true;
        const handlers = page.ui.handlers ?? (page.ui.handlers = {});
        const onResize = ensureHandler(handlers, "resize", () => () => page.queueResize());
        window.addEventListener("resize", onResize);
        const searchButton = document.getElementById("buttonSearch");
        if (searchButton) {
          page.ui.els.searchButton = searchButton;
          const onSearchClick = ensureHandler(handlers, "searchClick", () => () => page.setSearch());
          bindOnce(searchButton, "click", onSearchClick);
        }
        const searchInput = document.getElementById("textSearch");
        if (searchInput) {
          page.ui.els.searchInput = searchInput;
          const onSearchKeydown = ensureHandler(handlers, "searchKeydown", () => (event) => {
            if (event.key === "Enter") {
              event.preventDefault();
              page.setSearch();
            }
          });
          bindOnce(searchInput, "keydown", onSearchKeydown);
        }
        page.bindCommandButtons();
        page.bindFormEvents();
        const panelActions = {
          panelThemeAction: (theme, preset, panel) => page.handleThemeChange(theme, preset, panel),
          panelActiveAction: (panel) => page.setMapRectForm(panel),
          panelPointerDownAction: (event) => page.setPointerDownAction(event),
          panelOpenMapAction: () => page.refreshLayerAndGroupList(),
          panelSaveMapAction: () => page.updateStatusBar(),
          panelAlertAction: (message, options) => page.alert(message, options),
          panelConfirmAction: (message, options) => page.confirm(message, options)
        };
        Object.assign(page.panel, panelActions);
        page.initShapeBindings();
        page.setMapRectPanel();
        page.setSettingsPanel();
        page.initPropertyTabs();
        page.initFormDefaults();
        page.initFormAccessibility();
        page.initDialogs();
        page.initUI();
        page.initResizeObserver();
        page.syncTestButtons();
      },
      bindCommandButtons: () => {
        const handlers = page.ui.handlers;
        const onCommandClick = ensureHandler(handlers, "commandClick", () => (event) => {
          const button = closest(event.target, ".command");
          if (!button) return;
          page.setButtonActive(button);
          runCommandAction(button.id);
        });
        if (!handlers.commandClickBound) {
          document.addEventListener("click", onCommandClick);
          handlers.commandClickBound = true;
        }
      },
      queueResize: () => {
        scheduleRafTask(page.ui.rafTasks, "resize", () => {
          page.panel.setResize();
        });
      },
      initResizeObserver: () => {
        if (page.ui.resizeObserver) return;
        const target = page.canvas.parentNode;
        page.ui.resizeObserver = new ResizeObserver(() => page.queueResize());
        page.ui.resizeObserver.observe(target);
      },
      initShapeBindings: () => {
        if (page.ui.shapeBindingsReady) return;
        page.ui.shapeBindingsReady = true;
        page.ui.formActionMap.clear();
        page.ui.formActionSchemaMap.clear();
        for (let i = 0; i < shapeFormConfigs.length; i++) {
          const config = shapeFormConfigs[i];
          page.panel[config.activeAction] = (shape) => page.setFormByType(config.type, shape);
          page.bindPanelInputsBySchema(config.tabId, config.type, config.panelHandler);
        }
      },
      cacheUI: () => {
        page.ui.toolFilterState = { text: null, group: null };
        const toolGroups = [];
        const toolGroupElements = queryAll(".toolbar .tool-group");
        for (let i = 0; i < toolGroupElements.length; i++) {
          const group = toolGroupElements[i];
          const title = group.dataset.title || "";
          const buttons = [];
          const groupButtons = queryAll("button", group);
          for (let j = 0; j < groupButtons.length; j++) {
            const button = groupButtons[j];
            buttons.push({
              el: button,
              search: `${button.textContent} ${button.id || ""} ${title}`.toLowerCase()
            });
          }
          toolGroups.push({
            el: group,
            key: group.dataset.group || "all",
            title,
            buttons
          });
        }
        const quickActions = [];
        const actionButtons = queryAll("[data-action]");
        for (let i = 0; i < actionButtons.length; i++) {
          const button = actionButtons[i];
          if (!closest(button, "dialog")) quickActions.push(button);
        }
        const testButtons = [];
        for (let i = 0; i < TestActionIds.length; i++) {
          const button = document.getElementById(TestActionIds[i]);
          if (button) testButtons.push(button);
        }
        page.ui.els = {
          appContainer: document.querySelector(".app-container"),
          toolbarPanel: document.querySelector(".toolbar.panel"),
          propertyPanel: document.querySelector(".property.panel"),
          toolSearch: document.getElementById("toolSearch"),
          toolClear: document.getElementById("clearToolSearch"),
          toolEmpty: document.getElementById("toolEmpty"),
          toolGroups,
          toolChips: queryAll(".toolbar-filters .chip"),
          switchButtons: queryAll(".command.switch"),
          quickActions,
          toggleButtons: queryAll("[data-toggle]"),
          searchClear: document.getElementById("buttonSearchClear"),
          searchInput: document.getElementById("textSearch"),
          themeSelect: document.querySelector('[data-theme-select="ui"]') || document.querySelector('[name="visual.theme"]'),
          mapMeta: document.getElementById("mapMeta"),
          propertyTitle: document.getElementById("titleProperty"),
          propertyTabs: queryAll(".property.panel .tabProperty"),
          layerPanel: document.getElementById("layerPanel"),
          layerList: document.getElementById("layerList"),
          groupPanel: document.getElementById("groupPanel"),
          groupList: document.getElementById("groupList"),
          settingsPanel: document.getElementById("settingsPanel"),
          settingsToggleButton: document.getElementById("toggleSettingsPanel") || document.querySelector('[data-action="toggleSettingsPanel"]'),
          testToolbar: document.getElementById("testToolbar"),
          testButtons
        };
      },
      syncTestButtons: () => {
        const els = page.ui.els;
        const buttons = els.testButtons ?? [];
        let visible = 0;
        for (let i = 0; i < buttons.length; i++) {
          const button = buttons[i];
          if (!button) continue;
          const available = Boolean(resolveActionRunner(button.id));
          button.hidden = !available;
          button.disabled = !available;
          button.classList.toggle("is-hidden", !available);
          if (available) visible += 1;
        }
        const toolbar = els.testToolbar;
        if (toolbar) {
          const hidden = visible === 0;
          toolbar.hidden = hidden;
          toolbar.classList.toggle("is-hidden", hidden);
        }
      },
      initUI: () => {
        page.cacheUI();
        page.syncTestButtons();
        page.initRenderSelects();
        page.bindQuickActions();
        page.initSettingsPanel();
        page.initDockablePanels();
        page.bindThemeSelect();
        page.bindSearchClear();
        page.bindToolFilter();
        page.updateStatusBar();
        page.startStatusTicker();
      },
      initDockablePanels: () => {
        const { toolbarPanel, propertyPanel } = page.ui.els;
        if (!toolbarPanel && !propertyPanel) return;
        const panels = [toolbarPanel, propertyPanel];
        for (let i = 0; i < panels.length; i++) {
          const panel = panels[i];
          if (!panel) continue;
          const toggle = panel.querySelector('[data-panel-action="collapse"]');
          if (toggle && !toggle.dataset.panelCollapseBound) {
            toggle.dataset.panelCollapseBound = "true";
            bindOnce(toggle, "click", () => page.togglePanelCollapse(panel));
          }
        }
        page.updatePanelDockWidths();
      },
      updatePanelDockWidths: () => {
        const { appContainer, toolbarPanel, propertyPanel } = page.ui.els;
        if (!appContainer) return;
        const collapseWidth = 52;
        if (toolbarPanel) {
          if (toolbarPanel.classList.contains("is-collapsed")) {
            appContainer.style.setProperty("--toolbar-width", `${collapseWidth}px`);
          } else {
            appContainer.style.removeProperty("--toolbar-width");
          }
        }
        if (propertyPanel) {
          if (propertyPanel.classList.contains("is-collapsed")) {
            appContainer.style.setProperty("--property-width", `${collapseWidth}px`);
          } else {
            appContainer.style.removeProperty("--property-width");
          }
        }
      },
      togglePanelCollapse: (panel, force) => {
        if (!panel) return;
        const next = typeof force === "boolean" ? force : !panel.classList.contains("is-collapsed");
        panel.classList.toggle("is-collapsed", next);
        const toggle = panel.querySelector('[data-panel-action="collapse"]');
        if (toggle) {
          toggle.setAttribute("aria-pressed", next ? "true" : "false");
          toggle.textContent = next ? "展开" : "收缩";
        }
        page.updatePanelDockWidths();
      },
      bindQuickActions: () => {
        const handlers = page.ui.handlers;
        const onQuickActionClick = ensureHandler(handlers, "quickActionClick", () => (event) => {
          const target = event.currentTarget;
          page.invokeAction(target.dataset.action);
        });
        bindListOnce(page.ui.els.quickActions, "click", onQuickActionClick);
      },
      initSettingsPanel: () => {
        const { settingsPanel, layerPanel, groupPanel } = page.ui.els;
        if (!settingsPanel) return;
        const handlers = page.ui.handlers;
        if (layerPanel) {
          bindPanelHandlers(layerPanel, handlers, layerPanelHandlerEntries);
        }
        if (groupPanel) {
          bindPanelHandlers(groupPanel, handlers, groupPanelHandlerEntries);
        }
        page.setSettingsPanelOpen(!settingsPanel.hidden);
      },
      initRenderSelects: () => {
        page.bindMultiSelectToggles();
        if (page.panel) page.setSettingsForm(page.panel);
      },
      bindMultiSelectToggles: () => {
        if (page.ui.multiSelectBound) return;
        page.ui.multiSelectBound = true;
        const handler = (event) => {
          const select = event.currentTarget;
          const option = closest(event.target, "option");
          if (!select || !option) return;
          event.preventDefault();
          option.selected = !option.selected;
          select.dispatchEvent(new Event("change", { bubbles: true }));
        };
        const selects = queryAll("select[multiple]");
        bindListOnce(selects, "mousedown", handler);
      },
      getRenameListItem: (type, id) => {
        if (!id) return null;
        const config = getRenameConfig(type);
        if (!config) return null;
        const list = page.ui.els[config.listKey];
        return list ? list.querySelector(`[data-${config.dataAttr}="${id}"]`) : null;
      },
      startRename: (type, id, item) => {
        const config = getRenameConfig(type);
        if (!config || !id || !item) return;
        const entry = config.getEntry(id);
        if (!entry) return;
        const state = page.ui[config.stateKey];
        if (state.editingId && state.editingId !== id) {
          page.cancelRename(type);
        }
        const input = item.querySelector(config.inputSelector);
        if (!input) return;
        state.editingId = id;
        item.classList.add("is-editing");
        input.value = entry.name || entry.id || "";
        input.focus();
        input.select();
      },
      commitRename: (type, id, input) => {
        const config = getRenameConfig(type);
        if (!config) return;
        const state = page.ui[config.stateKey];
        if (!id || state.editingId !== id) return;
        const raw = input ? input.value : "";
        const trimmed = raw.trim();
        state.editingId = null;
        const item = page.getRenameListItem(type, id);
        if (!trimmed) {
          if (item) item.classList.remove("is-editing");
          else config.renderList();
          return;
        }
        config.rename(id, trimmed);
        if (item) {
          const name = item.querySelector(config.nameSelector);
          const inputEl = item.querySelector(config.inputSelector);
          if (name) name.textContent = trimmed;
          if (inputEl) inputEl.value = trimmed;
          item.classList.remove("is-editing");
        } else {
          config.renderList();
        }
        page.updateStatusBar();
      },
      cancelRename: (type) => {
        const config = getRenameConfig(type);
        if (!config) return;
        const state = page.ui[config.stateKey];
        const editingId = state.editingId;
        if (!editingId) return;
        state.editingId = null;
        const item = page.getRenameListItem(type, editingId);
        if (item) item.classList.remove("is-editing");
        else config.renderList();
      },
      handleRenameDblClick: (type, event) => {
        const config = getRenameConfig(type);
        if (!config) return;
        const nameEl = closest(event.target, config.nameSelector);
        if (!nameEl) return;
        const item = closest(nameEl, config.itemSelector);
        if (!item) return;
        const targetId = getData(item, config.dataKey);
        if (!targetId) return;
        page.startRename(type, targetId, item);
      },
      handleRenameKeydown: (type, event) => {
        const config = getRenameConfig(type);
        if (!config) return;
        const input = closest(event.target, config.inputSelector);
        if (!input) return;
        const item = closest(input, config.itemSelector);
        if (!item) return;
        const targetId = getData(item, config.dataKey);
        if (!targetId) return;
        if (event.key === "Enter") {
          event.preventDefault();
          page.commitRename(type, targetId, input);
        } else if (event.key === "Escape") {
          event.preventDefault();
          page.cancelRename(type);
        }
      },
      handleRenameFocusOut: (type, event) => {
        const config = getRenameConfig(type);
        if (!config) return;
        const input = closest(event.target, config.inputSelector);
        if (!input) return;
        const item = closest(input, config.itemSelector);
        if (!item) return;
        const targetId = getData(item, config.dataKey);
        if (!targetId) return;
        const state = page.ui[config.stateKey];
        if (state.editingId === targetId) {
          page.commitRename(type, targetId, input);
        }
      },
      getSettingsPanelBody: () => {
        const panel = page.ui.els.settingsPanel;
        if (!panel) return null;
        const body = panel.querySelector(".panel-body");
        if (!body) return null;
        return body.querySelector(".tabProperty") || body;
      },
      withSettingsScroll: (action) => {
        if (typeof action !== "function") return;
        const body = page.getSettingsPanelBody();
        const prevScrollTop = body ? body.scrollTop : null;
        action();
        if (!body || prevScrollTop === null) return;
        const maxTop = Math.max(0, body.scrollHeight - body.clientHeight);
        body.scrollTop = Math.min(prevScrollTop, maxTop);
      },
      setSettingsPanelOpen: (open) => {
        const { settingsPanel, settingsToggleButton } = page.ui.els;
        if (!settingsPanel) return;
        const shouldOpen = Boolean(open);
        settingsPanel.hidden = !shouldOpen;
        page.ui.settingsPanelOpen = shouldOpen;
        if (settingsToggleButton) {
          settingsToggleButton.classList.toggle("active", shouldOpen);
          settingsToggleButton.setAttribute("aria-pressed", shouldOpen ? "true" : "false");
        }
        if (shouldOpen) {
          page.setSettingsForm(page.panel);
          page.refreshLayerAndGroupList();
        }
      },
      toggleSettingsPanel: () => {
        page.setSettingsPanelOpen(!page.ui.settingsPanelOpen);
      },
      setDeleteImage: () => page.panel.setDeleteImage({ force: true, history: true }),
      setReset: () => page.panel.setReset({ force: true, history: true }),
      handleSettingsPanelEvent: (type, eventType, event) => {
        const config = panelDispatchConfigs[type];
        if (!config) return;
        if (eventType === "click") {
          dispatchPanelAction(event, config);
          return;
        }
        const handler = settingsPanelEventHandlers[eventType];
        if (handler) page[handler](type, event);
      },
      createLayerItem: (layer, counts, activeId) => {
        const item = document.createElement("div");
        item.className = `layer-item${layer.id === activeId ? " is-active" : ""}`;
        item.dataset.layerId = layer.id;
        const visibility = document.createElement("button");
        visibility.type = "button";
        visibility.className = "action layer-toggle";
        visibility.dataset.layerAction = "visibility";
        visibility.setAttribute("aria-pressed", layer.visible ? "true" : "false");
        visibility.title = layer.visible ? "隐藏图层" : "显示图层";
        visibility.textContent = layer.visible ? "隐" : "显";
        const lock = document.createElement("button");
        lock.type = "button";
        lock.className = "action layer-toggle";
        lock.dataset.layerAction = "lock";
        lock.setAttribute("aria-pressed", layer.locked ? "true" : "false");
        lock.title = layer.locked ? "解锁图层" : "锁定图层";
        lock.textContent = layer.locked ? "解" : "锁";
        const name = document.createElement("button");
        name.type = "button";
        name.className = "layer-name";
        name.dataset.layerAction = "select";
        name.textContent = layer.name || layer.id;
        const count = document.createElement("span");
        count.className = "layer-count";
        count.textContent = String(counts.get(layer.id) ?? 0);
        const input = document.createElement("input");
        input.type = "text";
        input.className = "layer-input";
        input.setAttribute("aria-label", "图层名称");
        input.value = layer.name || layer.id || "";
        item.append(visibility, lock, name, count, input);
        return item;
      },
      buildSettingsCountMaps: () => {
        const layer = /* @__PURE__ */ new Map();
        const group = /* @__PURE__ */ new Map();
        const shapes = page.panel.allShapes;
        for (let i = 0; i < shapes.length; i++) {
          const shape = shapes[i];
          const layerId = page.panel.getShapeLayerId(shape);
          layer.set(layerId, (layer.get(layerId) ?? 0) + 1);
          const groupId = shape.groupId;
          if (groupId) group.set(groupId, (group.get(groupId) ?? 0) + 1);
        }
        return { layer, group };
      },
      buildShapeCountMap: (type) => {
        const counts = /* @__PURE__ */ new Map();
        const shapes = page.panel.allShapes;
        const isLayer = type === "layer";
        for (let i = 0; i < shapes.length; i++) {
          const shape = shapes[i];
          const key = isLayer ? page.panel.getShapeLayerId(shape) : shape.groupId;
          if (!isLayer && !key) continue;
          counts.set(key, (counts.get(key) ?? 0) + 1);
        }
        return counts;
      },
      renderSettingsByType: (type, options = {}) => {
        const isLayer = type === "layer";
        const list = isLayer ? page.ui.els.layerList : page.ui.els.groupList;
        if (!list) return;
        const entries = isLayer ? page.panel.getLayers() : page.panel.getGroups();
        const activeId = isLayer ? page.panel.getActiveLayerId() : page.panel.getActiveGroupId();
        const counts = options.counts ?? page.buildShapeCountMap(type);
        const state = isLayer ? page.ui.layerState : page.ui.groupState;
        const createItem = isLayer ? (layer) => page.createLayerItem(layer, counts, activeId) : (group) => page.createGroupItem(group, counts, activeId);
        page.renderSettingsList(list, state, entries, createItem, options);
      },
      renderLayerList: (options = {}) => page.renderSettingsByType("layer", options),
      refreshSettingsList: (renderList) => {
        page.withSettingsScroll(() => renderList({ preserveScroll: true }));
        page.updateStatusBar();
      },
      refreshSettingsByType: (type) => page.refreshSettingsList((options) => page.renderSettingsByType(type, options)),
      refreshLayerList: () => page.refreshSettingsByType("layer"),
      renderSettingsList: (list, state, entries, createItem, options = {}) => {
        if (!list) return;
        state.editingId = null;
        const preserveScroll = options.preserveScroll === true;
        const prevScrollTop = preserveScroll ? Number.isFinite(options.scrollTop) ? options.scrollTop : list.scrollTop : 0;
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < entries.length; i++) {
          fragment.appendChild(createItem(entries[i]));
        }
        list.replaceChildren(fragment);
        if (!preserveScroll) return;
        const maxTop = Math.max(0, list.scrollHeight - list.clientHeight);
        list.scrollTop = Math.min(prevScrollTop, maxTop);
      },
      createGroupItem: (group, counts, activeId) => {
        const item = document.createElement("div");
        item.className = `group-item${group.id === activeId ? " is-active" : ""}`;
        item.dataset.groupId = group.id;
        const name = document.createElement("button");
        name.type = "button";
        name.className = "group-name";
        name.dataset.groupAction = "select";
        name.textContent = group.name || group.id;
        const count = document.createElement("span");
        count.className = "group-count";
        count.textContent = String(counts.get(group.id) ?? 0);
        const input = document.createElement("input");
        input.type = "text";
        input.className = "group-input";
        input.setAttribute("aria-label", "组合名称");
        input.value = group.name || group.id || "";
        item.append(name, count, input);
        return item;
      },
      renderGroupList: (options = {}) => page.renderSettingsByType("group", options),
      refreshGroupList: () => page.refreshSettingsByType("group"),
      refreshLayerAndGroupList: () => {
        const counts = page.buildSettingsCountMaps();
        page.withSettingsScroll(() => {
          page.renderSettingsByType("layer", { preserveScroll: true, counts: counts.layer });
          page.renderSettingsByType("group", { preserveScroll: true, counts: counts.group });
        });
        page.updateStatusBar();
      },
      invokeAction: (action, options = {}) => {
        const run = resolveActionRunner(action);
        if (!run) return false;
        run();
        if (options.refresh === false) return true;
        if (page.ui.settingsPanelOpen) {
          page.refreshLayerAndGroupList();
        } else {
          page.updateStatusBar();
        }
        return true;
      },
      bindSearchClear: () => {
        const clearButton = page.ui.els.searchClear;
        const handlers = page.ui.handlers;
        const onSearchClearClick = ensureHandler(handlers, "searchClearClick", () => () => page.clearSearch());
        bindOnce(clearButton, "click", onSearchClearClick);
      },
      bindThemeSelect: () => {
        const themeSelect = page.ui.els.themeSelect;
        const handlers = page.ui.handlers;
        const onThemeSelectChange = ensureHandler(handlers, "themeSelectChange", () => (event) => {
          page.setSettingParam(event.currentTarget);
          page.updateStatusBar();
        });
        bindOnce(themeSelect, "change", onThemeSelectChange);
      },
      updateToolChipState: () => {
        const chips = page.ui.els.toolChips;
        for (let i = 0; i < chips.length; i++) {
          const chip = chips[i];
          chip.setAttribute("aria-pressed", chip.classList.contains("active") ? "true" : "false");
        }
      },
      getToolFilterContext: () => {
        const { toolSearch, toolEmpty, toolGroups } = page.ui.els;
        if (toolSearch && toolGroups?.length) return { toolSearch, toolEmpty, toolGroups };
        if (toolEmpty) toolEmpty.style.display = "none";
        return null;
      },
      scheduleToolFilter: () => {
        if (!page.getToolFilterContext()) return;
        scheduleRafTask(page.ui.rafTasks, "toolFilter", () => page.applyToolFilter());
      },
      queueFormInput: (input) => {
        const queue = page.ui.formInputQueue ?? (page.ui.formInputQueue = /* @__PURE__ */ new Map());
        queue.set(input, true);
        scheduleRafTask(page.ui.rafTasks, "formInput", () => page.flushFormInputs());
      },
      flushFormInputs: () => {
        const queue = page.ui.formInputQueue;
        if (!queue || queue.size === 0) return;
        const inputs = page.ui.formInputList ?? (page.ui.formInputList = []);
        inputs.length = 0;
        inputs.push(...queue.keys());
        queue.clear();
        page.panel.withBatch(() => {
          for (let i = 0; i < inputs.length; i++) {
            const input = inputs[i];
            if (input?.isConnected) page.dispatchFormInput(input);
          }
          inputs.length = 0;
        });
      },
      scheduleHistory: () => {
        if (page.panel.history?.enable === false) return;
        scheduleRafTask(page.ui.rafTasks, "history", () => page.panel.setHistory());
      },
      bindToolFilter: () => {
        const context = page.getToolFilterContext();
        if (!context) return;
        const { toolSearch } = context;
        const { toolClear, toolChips } = page.ui.els;
        const handlers = page.ui.handlers;
        const onToolSearchInput = ensureHandler(handlers, "toolSearchInput", () => () => page.scheduleToolFilter());
        const onToolClearClick = ensureHandler(handlers, "toolClearClick", () => () => {
          toolSearch.value = "";
          page.scheduleToolFilter();
          toolSearch.focus();
        });
        const onToolChipClick = ensureHandler(handlers, "toolChipClick", () => (event) => {
          const chip = event.currentTarget;
          for (let i = 0; i < toolChips.length; i++) toolChips[i].classList.remove("active");
          chip.classList.add("active");
          page.ui.toolFilter.group = chip.dataset.toolFilter || "all";
          page.updateToolChipState();
          page.scheduleToolFilter();
        });
        bindOnce(toolSearch, "input", onToolSearchInput);
        if (toolClear) bindOnce(toolClear, "click", onToolClearClick);
        bindListOnce(toolChips, "click", onToolChipClick);
        page.updateToolChipState();
        page.applyToolFilter();
      },
      applyToolFilter: () => {
        const context = page.getToolFilterContext();
        if (!context) return;
        const { toolSearch, toolEmpty, toolGroups } = context;
        const text = toolSearch.value.trim().toLowerCase();
        const activeGroup = page.ui.toolFilter.group;
        const filterState = page.ui.toolFilterState;
        if (filterState.text === text && filterState.group === activeGroup) return;
        filterState.text = text;
        filterState.group = activeGroup;
        let visibleGroups = 0;
        for (let i = 0; i < toolGroups.length; i++) {
          const group = toolGroups[i];
          if (activeGroup !== "all" && group.key !== activeGroup) {
            group.el.classList.add("is-hidden");
            continue;
          }
          let groupVisible = false;
          const buttons = group.buttons;
          for (let j = 0; j < buttons.length; j++) {
            const button = buttons[j];
            const matched = !text || button.search.includes(text);
            button.el.classList.toggle("is-hidden", !matched);
            if (matched) groupVisible = true;
          }
          group.el.classList.toggle("is-hidden", !groupVisible);
          if (groupVisible) visibleGroups += 1;
        }
        if (toolEmpty) {
          toolEmpty.style.display = visibleGroups === 0 ? "block" : "none";
        }
      },
      startStatusTicker: () => {
        if (!page.ui.visibilityHandler) {
          page.ui.visibilityHandler = () => {
            if (document.hidden) {
              page.stopStatusTicker();
            } else {
              page.startStatusTicker();
            }
          };
          document.addEventListener("visibilitychange", page.ui.visibilityHandler);
        }
        if (page.ui.statusTimer) return;
        page.updateStatusBar();
        page.ui.statusTimer = window.setInterval(() => page.updateStatusBar(), page.ui.statusInterval);
      },
      stopStatusTicker: () => {
        if (!page.ui.statusTimer) return;
        window.clearInterval(page.ui.statusTimer);
        page.ui.statusTimer = null;
      },
      destroy: () => {
        page.stopStatusTicker();
        getTestApi()?.stop?.();
        cancelAllRafTasks(page.ui.rafTasks);
        page.ui.rafTasks = {};
        if (page.ui.formInputQueue) {
          page.ui.formInputQueue.clear();
        }
        if (Array.isArray(page.ui.formInputList)) {
          page.ui.formInputList.length = 0;
        }
        if (page.ui.resizeObserver) {
          page.ui.resizeObserver.disconnect();
          page.ui.resizeObserver = null;
        }
        if (page.ui.visibilityHandler) {
          document.removeEventListener("visibilitychange", page.ui.visibilityHandler);
          page.ui.visibilityHandler = null;
        }
        const handlers = page.ui.handlers;
        if (handlers.resize) {
          window.removeEventListener("resize", handlers.resize);
        }
        if (handlers.commandClickBound && handlers.commandClick) {
          document.removeEventListener("click", handlers.commandClick);
          handlers.commandClickBound = false;
        }
        if (handlers.beforeUnload) {
          window.removeEventListener("beforeunload", handlers.beforeUnload);
          delete handlers.beforeUnload;
        }
        const els = page.ui.els;
        if (handlers.quickActionClick) {
          unbindList(els.quickActions, "click", handlers.quickActionClick);
        }
        const cleanupBindings = [
          [els.searchClear, "click", handlers.searchClearClick],
          [els.themeSelect, "change", handlers.themeSelectChange],
          [els.toolSearch, "input", handlers.toolSearchInput],
          [els.toolClear, "click", handlers.toolClearClick],
          [els.searchButton, "click", handlers.searchClick],
          [els.searchInput, "keydown", handlers.searchKeydown]
        ];
        for (let i = 0; i < cleanupBindings.length; i++) {
          const [element, type, handler] = cleanupBindings[i];
          unbindOnce(element, type, handler);
        }
        if (handlers.toolChipClick) {
          unbindList(els.toolChips, "click", handlers.toolChipClick);
        }
        unbindPanelHandlers(els.layerPanel, handlers, layerPanelHandlerEntries);
        unbindPanelHandlers(els.groupPanel, handlers, groupPanelHandlerEntries);
        if (page.ui.formEventsBound) toggleFormEventTargets(page.ui.formEventTargets, "removeEventListener");
        page.ui.formEventTargets = [];
        page.ui.formEventsBound = false;
        const dialogListeners = page.ui.dialogListeners;
        if (Array.isArray(dialogListeners) && dialogListeners.length) {
          for (let i = 0; i < dialogListeners.length; i++) {
            const entry = dialogListeners[i];
            if (!entry) continue;
            const element = entry.element;
            if (element) element.removeEventListener(entry.type, entry.handler, entry.options);
          }
          dialogListeners.length = 0;
        }
        if (page.dialogs) {
          page.dialogs = null;
        }
        page.ui.shapeBindingsReady = false;
        page.ui.formActionMap.clear();
        page.ui.formActionSchemaMap.clear();
        if (page.ui.toastHost) {
          page.ui.toastHost.remove();
          page.ui.toastHost = null;
        }
        page.ui.multiSelectBound = false;
        page.ui.els = {};
        page.panel.dispose();
        page.ui.bound = false;
        page.ui.initialized = false;
      },
      updateMapMeta: () => {
        const { mapMeta } = page.ui.els;
        if (!mapMeta) return;
        const size = page.panel.map.base.size;
        const text = `尺寸 ${size.w} x ${size.h}`;
        if (page.ui.statusCache.mapMeta === text) return;
        page.ui.statusCache.mapMeta = text;
        mapMeta.textContent = text;
      },
      updateToggleButtons: () => {
        const { toggleButtons } = page.ui.els;
        if (toggleButtons.length === 0) return;
        const cache = page.ui.statusCache.toggles ?? (page.ui.statusCache.toggles = {});
        const states = {
          grid: page.panel.grid.enable,
          info: page.panel.info.enable,
          area: page.panel.area.enable,
          zoom: page.panel.zoom.enable,
          carRoute: page.panel.carEdge.enable && page.panel.carNode.enable
        };
        for (let i = 0; i < toggleButtons.length; i++) {
          const button = toggleButtons[i];
          const key = button.dataset.toggle;
          const isActive = Boolean(states[key]);
          if (key && cache[key] === isActive) continue;
          button.classList.toggle("active", isActive);
          button.setAttribute("aria-pressed", isActive ? "true" : "false");
          if (key) cache[key] = isActive;
        }
      },
      updateStatusBar: () => {
        page.updateToggleButtons();
        page.updateMapMeta();
      },
      ensureToastHost: () => {
        if (page.ui.toastHost && page.ui.toastHost.isConnected) {
          return page.ui.toastHost;
        }
        let host = document.getElementById("toastStack");
        if (!host) {
          host = document.createElement("div");
          host.id = "toastStack";
          host.className = "toast-stack";
          host.setAttribute("aria-live", "polite");
          host.setAttribute("aria-relevant", "additions");
          document.body.appendChild(host);
        }
        page.ui.toastHost = host;
        return host;
      },
      notify: (message, type = "info", options = {}) => {
        const host = page.ensureToastHost();
        const toastType = toastTypes.has(type) ? type : "info";
        const toast = document.createElement("div");
        toast.className = `toast toast-${toastType}`;
        toast.setAttribute("role", toastType === "error" ? "alert" : "status");
        toast.setAttribute("aria-live", toastType === "error" ? "assertive" : "polite");
        const indicator = document.createElement("span");
        indicator.className = "toast-indicator";
        const text = document.createElement("div");
        text.className = "toast-text";
        text.textContent = String(message);
        const close = document.createElement("button");
        close.type = "button";
        close.className = "toast-close";
        close.setAttribute("aria-label", "关闭");
        close.textContent = "×";
        toast.append(indicator, text, close);
        host.appendChild(toast);
        requestAnimationFrame(() => toast.classList.add("show"));
        const duration = Number.isFinite(options && options.duration) ? options.duration : toastType === "error" ? 6e3 : 3200;
        let timer = null;
        const remove = () => {
          if (toast.dataset.state === "leaving") return;
          toast.dataset.state = "leaving";
          toast.classList.remove("show");
          window.setTimeout(() => toast.remove(), 200);
        };
        close.addEventListener("click", remove);
        if (duration > 0) {
          timer = window.setTimeout(remove, duration);
          toast.addEventListener("pointerenter", () => {
            if (timer) {
              window.clearTimeout(timer);
              timer = null;
            }
          });
          toast.addEventListener("pointerleave", () => {
            if (!timer) {
              timer = window.setTimeout(remove, duration);
            }
          });
        }
      },
      ensureConfirmDialog: () => {
        if (page.ui.confirmDialog && page.ui.confirmDialog.dialog) {
          return page.ui.confirmDialog;
        }
        const dialog = document.getElementById("dialogConfirm") || null;
        if (!dialog) return null;
        const messageEl = dialog.querySelector(".dialog-message") || dialog.querySelector('[data-role="message"]');
        const okButton = dialog.querySelector('[name="ok"]');
        const cancelButton = dialog.querySelector('[name="cancel"]');
        const state = { dialog, messageEl, okButton, cancelButton, resolving: false };
        page.ui.confirmDialog = state;
        return state;
      },
      alert: (message, options = {}) => {
        const type = options.type || "warning";
        page.notify(message, type, options);
        return true;
      },
      confirm: (message, options = {}) => {
        return new Promise((resolve) => {
          const fallback = () => {
            page.notify(message, options.type || "warning", options);
            resolve(false);
          };
          const state = page.ensureConfirmDialog();
          if (!state || typeof state.dialog.showModal !== "function") {
            fallback();
            return;
          }
          if (state.resolving) {
            state.dialog.close();
          }
          state.resolving = true;
          if (state.messageEl) {
            state.messageEl.textContent = String(message);
          }
          const okText = options.okText || "确定";
          const cancelText = options.cancelText || "取消";
          if (state.okButton) state.okButton.textContent = okText;
          if (state.cancelButton) state.cancelButton.textContent = cancelText;
          const onOk = () => {
            cleanup();
            if (state.dialog.open) state.dialog.close("ok");
            resolve(true);
          };
          const onCancel = () => {
            cleanup();
            if (state.dialog.open) state.dialog.close("cancel");
            resolve(false);
          };
          const onClose = () => {
            cleanup();
            resolve(false);
          };
          const cleanup = () => {
            state.resolving = false;
            if (state.okButton) state.okButton.removeEventListener("click", onOk);
            if (state.cancelButton) state.cancelButton.removeEventListener("click", onCancel);
            state.dialog.removeEventListener("close", onClose);
          };
          if (state.okButton) state.okButton.addEventListener("click", onOk, { once: true });
          if (state.cancelButton) state.cancelButton.addEventListener("click", onCancel, { once: true });
          state.dialog.addEventListener("close", onClose, { once: true });
          state.dialog.showModal();
          page.focusDialog(state.dialog);
        });
      },
      requireSelection: (state, message = "请先选择一条记录") => {
        if (!state || state.selected < 0 || state.selected >= state.list.length) {
          page.notify(message, "warning");
          return null;
        }
        return state.list[state.selected];
      },
      setMonitorButtonState: (isRunning) => {
        const button = page.ui.els.monitorButton || document.getElementById("buttonMonitor");
        if (!button) return;
        button.textContent = isRunning ? "停止监控" : "启动监控";
        button.setAttribute("aria-pressed", isRunning ? "true" : "false");
      },
      getTableTarget: (target) => typeof target === "string" ? document.getElementById(target) : target,
      syncTable: (target, rows, columns, buildRow) => {
        const tbody = page.getTableTarget(target);
        if (!tbody) return null;
        const list = Array.isArray(rows) ? rows : rows ? Object.values(rows) : [];
        if (!list.length) {
          tbody.replaceChildren();
          return tbody;
        }
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          const row = document.createElement("tr");
          if (typeof buildRow === "function") {
            buildRow(row, item, i);
          } else if (columns?.length) {
            for (let j = 0; j < columns.length; j++) {
              row.appendChild(page.createCell(item?.[columns[j]]));
            }
          }
          if (row.childNodes.length) fragment.appendChild(row);
        }
        tbody.replaceChildren(fragment);
        return tbody;
      },
      clearTable: (target) => {
        page.syncTable(target);
      },
      renderTable: (target, rows, columns) => {
        page.syncTable(target, rows, columns);
      },
      applyThemeOverride: () => {
        const theme = page.panel.getTheme();
        page.panel.setTheme(theme, { force: true, isPreserveStyle: false });
        page.updateStatusBar();
      },
      setPointerDownAction: (event) => {
        if (event.button === 2) {
          const setSelect = document.getElementById("setSelect");
          if (setSelect) page.setButtonActive(setSelect);
          page.panel.setSelect();
        }
      },
      getInputValue: (input) => {
        if (input.tagName === "SELECT" && input.multiple) {
          const options = input.selectedOptions;
          const values = new Array(options.length);
          for (let i = 0; i < options.length; i++) {
            values[i] = options[i].value;
          }
          return values;
        }
        if (input.type === "number") {
          const raw = input.valueAsNumber;
          if (!Number.isFinite(raw)) return null;
          let value = raw;
          const min = input.min === "" ? NaN : Number(input.min);
          const max = input.max === "" ? NaN : Number(input.max);
          if (Number.isFinite(min)) value = Math.max(value, min);
          if (Number.isFinite(max)) value = Math.min(value, max);
          return value;
        } else if (input.type === "checkbox") {
          return input.checked;
        } else {
          return input.value;
        }
      },
      setInputValue: (input, value) => {
        if (input.tagName === "SELECT" && input.multiple) {
          const valueSet = /* @__PURE__ */ new Set();
          if (Array.isArray(value)) {
            for (let i = 0; i < value.length; i++) {
              valueSet.add(String(value[i]));
            }
          }
          const options = input.options;
          for (let i = 0; i < options.length; i++) {
            const option = options[i];
            option.selected = valueSet.has(option.value);
          }
          return;
        }
        if (input.type === "number") {
          input.value = Number.isFinite(value) ? value : "";
        } else if (input.type === "checkbox") {
          input.checked = Boolean(value);
        } else {
          if (Array.isArray(value)) {
            const listMode = input.dataset && input.dataset.list;
            input.value = listMode === "lines" ? value.join("\n") : value.join(",");
          } else {
            input.value = value ?? "";
          }
        }
      },
      updateCountBadge: (input, value) => {
        if (!input || !input.dataset) return;
        const targetId = input.dataset.countTarget;
        if (!targetId) return;
        const target = document.getElementById(targetId);
        if (!target) return;
        const count = Array.isArray(value) ? value.length : 0;
        target.textContent = `${count} 项`;
      },
      applyUiTheme: (theme) => {
        const root2 = document.documentElement;
        if (root2.dataset.theme === theme) return theme;
        root2.dataset.theme = theme;
        return theme;
      },
      getCachedElements: (key, selector) => {
        const cached = page.ui.els[key];
        if (Array.isArray(cached)) return cached;
        const next = queryAll(selector);
        page.ui.els[key] = next;
        return next;
      },
      handleThemeChange: (theme, preset, panel) => {
        const applied = page.applyUiTheme(theme);
        const uiSelect = page.ui.els.themeSelect;
        if (uiSelect) page.setInputValue(uiSelect, applied);
      },
      setButtonActive: (button) => {
        if (!button || !button.classList.contains("switch")) return;
        const buttons = page.getCachedElements("switchButtons", ".command.switch");
        for (let i = 0; i < buttons.length; i++) buttons[i].classList.remove("active");
        button.classList.add("active");
      },
      setFormActive: (titleText, tabId) => {
        const title = page.ui.els.propertyTitle || document.getElementById("titleProperty");
        if (title) title.textContent = titleText;
        const tabs = page.getCachedElements("propertyTabs", ".property.panel .tabProperty");
        for (let i = 0; i < tabs.length; i++) tabs[i].hidden = true;
        const tab = document.getElementById(tabId);
        if (!tab) return;
        tab.hidden = false;
        page.setPropertyTab(tab, 0);
      },
      getFormInputs: (tabId) => {
        if (!tabId) return [];
        const cache = page.ui.formInputsCache ?? (page.ui.formInputsCache = /* @__PURE__ */ new Map());
        if (cache.has(tabId)) return cache.get(tabId);
        const list = queryAll(`#${tabId} .bind`);
        cache.set(tabId, list);
        return list;
      },
      cloneData: (value) => {
        return structuredClone(value);
      },
      ensureList: (value) => Array.isArray(value) ? value : [],
      getRuntimeSelectList: (key) => {
        return panelSelects?.[key] ?? [];
      },
      buildOptionEntries: (items, options) => {
        const config = options || {};
        const valueKey = config.valueKey || "value";
        const textKey = config.textKey || "text";
        const fallback = Array.isArray(config.fallback) ? config.fallback : [];
        const seen = /* @__PURE__ */ new Set();
        const entries = [];
        const appendItem = (item) => {
          let value;
          let text;
          if (typeof item === "string" || typeof item === "number") {
            value = String(item);
            text = String(item);
          } else if (item && typeof item === "object") {
            value = item[valueKey] ?? item.value ?? item.id ?? item.code ?? "";
            text = item[textKey] ?? item.text ?? item.name ?? value;
          } else {
            return;
          }
          if (value === "" && text === "") return;
          const key = String(value);
          if (seen.has(key)) return;
          seen.add(key);
          entries.push({ value: value ?? "", text: text ?? "" });
        };
        if (Array.isArray(items)) {
          for (let i = 0; i < items.length; i++) appendItem(items[i]);
        }
        if (fallback.length) {
          for (let i = 0; i < fallback.length; i++) appendItem(fallback[i]);
        }
        return entries;
      },
      createOption: (value, text) => {
        const option = document.createElement("option");
        option.value = value ?? "";
        option.textContent = text ?? "";
        return option;
      },
      syncOptionList: (target, items, options, keepValue = false, placeholder = null) => {
        if (!target) return null;
        const config = options || {};
        const entries = page.buildOptionEntries(items, config);
        const current = keepValue ? target.value : "";
        const currentText = String(current);
        const fragment = document.createDocumentFragment();
        if (placeholder !== null) fragment.appendChild(page.createOption("", placeholder));
        let hasCurrent = !current;
        for (let i = 0; i < entries.length; i++) {
          const entry = entries[i];
          fragment.appendChild(page.createOption(entry.value, entry.text));
          if (!hasCurrent && String(entry.value) === currentText) hasCurrent = true;
        }
        if (!hasCurrent) fragment.appendChild(page.createOption(current, current));
        target.replaceChildren(fragment);
        if (current) target.value = current;
        return target;
      },
      fillSelectOptions: (select, items, options) => {
        const config = options || {};
        return page.syncOptionList(select, items, config, true, config.placeholder ?? "");
      },
      fillDatalistOptions: (datalist, items, options) => {
        return page.syncOptionList(datalist, items, options);
      },
      fillSelectOrDatalist: (input, items, options) => {
        if (!input) return null;
        if (input.tagName === "SELECT") {
          return page.fillSelectOptions(input, items, options);
        }
        const listId = input.getAttribute("list");
        if (!listId) return null;
        const datalist = document.getElementById(listId);
        return page.fillDatalistOptions(datalist, items, options);
      },
      initActionFormSources: () => {
        const state = page.dialogs.actionForm;
        if (state.sourcesReady) return;
        state.sourcesReady = true;
        const form = page.getDialogForm(state);
        const actionSelect = form.querySelector('[name="actionType"]');
        const blockingSelect = form.querySelector('[name="blockingType"]');
        const actionList = page.getRuntimeSelectList("actionTypes");
        const blockingList = page.getRuntimeSelectList("blockingTypes");
        page.fillSelectOrDatalist(actionSelect, actionList, {
          valueKey: "code",
          textKey: "name",
          placeholder: "请选择",
          fallback: []
        });
        page.fillSelectOrDatalist(blockingSelect, blockingList, {
          valueKey: "code",
          textKey: "name",
          placeholder: "请选择",
          fallback: []
        });
        page.initActionParamKeySources();
      },
      initActionParamKeySources: () => {
        const state = page.dialogs.actionParameterForm;
        if (state.keysReady) return;
        state.keysReady = true;
        const form = page.getDialogForm(state);
        const keyInput = form.querySelector('[name="key"]');
        const keyList = page.getRuntimeSelectList("actionParamKeys");
        page.fillSelectOrDatalist(keyInput, keyList, { fallback: [] });
      },
      createId: () => page.panel.util.getGuid(),
      formatNumber: (value) => {
        const num = Number(value);
        return Number.isFinite(num) ? String(num) : "";
      },
      createCell: (value) => {
        const cell = document.createElement("td");
        cell.textContent = value ?? "";
        return cell;
      },
      getField: (scope, name) => scope?.querySelector(`[name="${name}"]`),
      getFieldText: (scope, name, trim = false) => {
        const value = page.getField(scope, name)?.value ?? "";
        return trim ? value.trim() : value;
      },
      setFieldText: (scope, name, value = "") => {
        const input = page.getField(scope, name);
        if (input) input.value = value ?? "";
      },
      getFieldNumber: (scope, name, fallback = 0) => {
        const value = page.getField(scope, name)?.valueAsNumber;
        return Number.isFinite(value) ? value : fallback;
      },
      setFieldNumber: (scope, name, value, fallback = 0) => {
        const input = page.getField(scope, name);
        if (input) input.value = Number.isFinite(value) ? value : fallback;
      },
      bindModalOkCancel: (dialog, onOk) => {
        const okButton = page.getField(dialog, "ok");
        const cancelButton = page.getField(dialog, "cancel");
        if (okButton) okButton.onclick = onOk;
        if (cancelButton) cancelButton.onclick = () => dialog.close();
      },
      createDialogState: (id, state = {}) => ({ dialog: document.getElementById(id), ...state }),
      createListDialogState: (id, render, state = {}) => ({
        dialog: document.getElementById(id),
        list: [],
        selected: -1,
        onSave: noop,
        onClose: noop,
        render,
        ...state
      }),
      getDialogRender: (state, render) => {
        if (typeof render === "function") return render;
        if (typeof state?.render === "function") return state.render;
        return noop;
      },
      getDialogPart: (state, key, selector) => {
        if (!state?.dialog) return null;
        const parts = state.parts ?? (state.parts = {});
        if (key in parts) return parts[key];
        const part = state.dialog.querySelector(selector);
        parts[key] = part;
        return part;
      },
      getDialogForm: (state) => page.getDialogPart(state, "form", "form"),
      getDialogTableBody: (state) => page.getDialogPart(state, "tbody", "tbody"),
      getDialogEmptyState: (state) => page.getDialogPart(state, "empty", ".dialog-empty"),
      bindDialogButton: (dialog, selector, handler) => {
        const button = dialog?.querySelector(selector);
        if (!button || typeof handler !== "function") return;
        page.bindDialogListener(button, "click", handler);
      },
      renderDialogTable: (state, buildRow) => {
        const tbody = page.getDialogTableBody(state);
        const empty = page.getDialogEmptyState(state);
        const list = page.ensureList(state.list);
        state.list = list;
        if (state.selected >= list.length) state.selected = -1;
        page.syncTable(tbody, list, null, (row, item, index) => {
          row.dataset.index = index;
          const isSelected = index === state.selected;
          row.classList.toggle("is-selected", isSelected);
          row.setAttribute("aria-selected", isSelected ? "true" : "false");
          row.tabIndex = isSelected ? 0 : -1;
          buildRow(row, item);
        });
        if (empty) empty.style.display = list.length ? "none" : "block";
      },
      bindDialogRowSelection: (state, render = state?.render) => {
        if (!state || !state.dialog) return;
        const tbody = page.getDialogTableBody(state);
        if (!tbody) return;
        const rerender = page.getDialogRender(state, render);
        page.bindDialogListener(tbody, "click", (event) => {
          const row = closest(event.target, "tr");
          if (!row) return;
          state.selected = Number(row.dataset.index);
          rerender();
        });
      },
      openListDialog: (state, list, onSave, onClose, render = state?.render) => {
        if (!state || !state.dialog) return;
        const rerender = page.getDialogRender(state, render);
        state.list = page.ensureList(page.cloneData(list));
        state.selected = -1;
        state.onSave = onSave || noop;
        if ("onClose" in state) state.onClose = onClose || noop;
        state.render = rerender;
        rerender();
        page.openDialog(state.dialog);
      },
      deleteSelectedDialogItem: (state, render = state?.render, message = "确定删除所选项吗？") => {
        if (!page.requireSelection(state)) return;
        const rerender = page.getDialogRender(state, render);
        page.confirm(message).then((ok) => {
          if (!ok) return;
          state.list.splice(state.selected, 1);
          state.selected = -1;
          rerender();
        });
      },
      saveDialogList: (dialog, state, closeValue = true) => {
        state.onSave(page.cloneData(state.list));
        dialog.close();
        if ("onClose" in state) state.onClose(closeValue);
      },
      closeDialogList: (dialog, state, closeValue = false) => {
        dialog.close();
        if ("onClose" in state) state.onClose(closeValue);
      },
      openListFormDialog: (dialog, openForm, mode, item, onSave, onRestore) => {
        dialog.close();
        const onClose = () => {
          onRestore();
          page.openDialog(dialog);
        };
        openForm(...mode == null ? [item, onSave, onClose] : [mode, item, onSave, onClose]);
      },
      renderKeyValueDialogList: (state) => {
        page.renderDialogTable(state, (row, item) => {
          row.append(
            page.createCell(item.key || ""),
            page.createCell(item.value || "")
          );
        });
      },
      editDialogListItem: (dialog, state, openForm, mode, onSave, onRestore) => {
        const item = page.requireSelection(state);
        if (!item) return;
        page.openListFormDialog(dialog, openForm, mode, page.cloneData(item), (updated) => {
          onSave(updated, state);
        }, onRestore);
      },
      bindListDialog: (state, options = {}) => {
        if (!state?.dialog) return;
        const dialog = state.dialog;
        const render = page.getDialogRender(state, options.render);
        state.render = render;
        page.bindDialogRowSelection(state, render);
        if (typeof options.add === "function") page.bindDialogButton(dialog, '[data-action="add"]', options.add);
        if (typeof options.edit === "function") page.bindDialogButton(dialog, '[data-action="edit"]', options.edit);
        if (typeof options.delete === "function") page.bindDialogButton(dialog, '[data-action="delete"]', options.delete);
        page.bindDialogButton(dialog, '[name="ok"]', options.ok || (() => page.saveDialogList(dialog, state, options.okCloseValue ?? true)));
        page.bindDialogButton(dialog, '[name="cancel"]', options.cancel || (() => page.closeDialogList(dialog, state, options.cancelCloseValue ?? false)));
        if (options.navigation !== false) page.bindDialogNavigation(state, render);
      },
      bindKeyValueListDialog: (state, openForm, render = state?.render) => {
        if (!state?.dialog) return;
        const dialog = state.dialog;
        const rerender = page.getDialogRender(state, render);
        page.bindListDialog(state, {
          render: rerender,
          add: () => {
            page.openListFormDialog(
              dialog,
              openForm,
              "add",
              { key: "", value: "" },
              (item) => {
                for (let i = 0; i < state.list.length; i++) {
                  if (state.list[i].key !== item.key) continue;
                  page.notify("添加项重复", "warning");
                  return;
                }
                state.list.push(item);
              },
              rerender
            );
          },
          edit: () => {
            page.editDialogListItem(
              dialog,
              state,
              openForm,
              "edit",
              (updated) => {
                state.list[state.selected] = updated;
              },
              rerender
            );
          },
          delete: () => {
            page.deleteSelectedDialogItem(state, rerender);
          }
        });
      },
      captureFocus: () => {
        const active = document.activeElement;
        if (active && active !== document.body) {
          page.ui.lastActiveElement = active;
        }
      },
      restoreFocus: () => {
        const lastActive = page.ui.lastActiveElement;
        if (lastActive) lastActive.focus();
        page.ui.lastActiveElement = null;
      },
      focusDialog: (dialog) => {
        if (!dialog) return;
        const focusTarget = dialog.querySelector("[autofocus]") || dialog.querySelector("input, select, textarea, button, [tabindex]");
        if (focusTarget) {
          focusTarget.focus();
          return;
        }
        dialog.focus();
      },
      openDialog: (dialog) => {
        if (!dialog || typeof dialog.showModal !== "function") return;
        page.captureFocus();
        dialog.showModal();
        page.focusDialog(dialog);
      },
      bindDialogListener: (element, type, handler, options) => {
        if (!element || typeof element.addEventListener !== "function" || typeof handler !== "function") return;
        element.addEventListener(type, handler, options);
        page.ui.dialogListeners.push({ element, type, handler, options });
      },
      bindDialogNavigation: (state, render = state?.render) => {
        const dialog = state.dialog;
        const rerender = page.getDialogRender(state, render);
        page.bindDialogListener(dialog, "keydown", (event) => {
          const key = event.key;
          const tag = event.target.tagName;
          if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
          if (key === "Enter") {
            const editButton = dialog.querySelector('[data-action="edit"]');
            if (editButton && state.selected >= 0) {
              event.preventDefault();
              editButton.click();
            }
            return;
          }
          if (key === "Delete" || key === "Backspace") {
            const deleteButton = dialog.querySelector('[data-action="delete"]');
            if (deleteButton && state.selected >= 0) {
              event.preventDefault();
              deleteButton.click();
            }
            return;
          }
          if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End") return;
          const list = page.ensureList(state.list);
          if (!list.length) return;
          event.preventDefault();
          let next = state.selected;
          if (!Number.isFinite(next) || next < 0) next = 0;
          if (key === "ArrowDown") next = Math.min(list.length - 1, next + 1);
          if (key === "ArrowUp") next = Math.max(0, next - 1);
          if (key === "Home") next = 0;
          if (key === "End") next = list.length - 1;
          if (next === state.selected) return;
          state.selected = next;
          rerender();
          const row = dialog.querySelector(`tbody tr[data-index="${next}"]`);
          if (row) row.focus();
        });
      },
      initPropertyTabs: () => {
        const panels = document.querySelectorAll(".tabProperty");
        for (let i = 0; i < panels.length; i++) {
          const panel = panels[i];
          const forms = panel.querySelectorAll(":scope > form");
          if (forms.length <= 1) continue;
          const header = document.createElement("div");
          header.className = "property-tab-header";
          for (let index = 0; index < forms.length; index++) {
            const form = forms[index];
            const legend = form.querySelector("legend");
            const label = legend ? legend.textContent.trim() : `Tab ${index + 1}`;
            const button = document.createElement("button");
            button.type = "button";
            button.className = "property-tab-button";
            button.textContent = label;
            button.addEventListener("click", () => page.setPropertyTab(panel, index));
            header.appendChild(button);
          }
          panel.insertBefore(header, panel.firstChild);
          page.setPropertyTab(panel, 0);
        }
      },
      initFormDefaults: () => {
        const alphaInputs = document.querySelectorAll('input[name$="globalAlpha"]');
        for (let i = 0; i < alphaInputs.length; i++) {
          const input = alphaInputs[i];
          if (!input.step || input.step === "any") {
            input.step = "0.01";
          }
        }
        const numberInputs = document.querySelectorAll('input[type="number"]');
        for (let i = 0; i < numberInputs.length; i++) {
          const input = numberInputs[i];
          if (!input.inputMode) {
            input.inputMode = "decimal";
          }
        }
      },
      initFormAccessibility: () => {
        const labels = document.querySelectorAll("label[for]");
        for (let i = 0; i < labels.length; i++) {
          const label = labels[i];
          const key = label.getAttribute("for");
          if (!key) continue;
          const scope = closest(label, "div") || label.parentElement;
          let field = scope ? scope.querySelector(`[name="${key}"]`) : document.querySelector(`[name="${key}"]`);
          if (!field && scope) {
            const candidates = scope.querySelectorAll("input, select, textarea, button");
            if (candidates.length === 1) {
              field = candidates[0];
            }
          }
          if (!field) continue;
          if (field.id) {
            label.setAttribute("for", field.id);
          } else {
            const tab = closest(label, ".tabProperty");
            const prefix = tab && tab.id ? `${tab.id}-` : "";
            const baseId = `${prefix}${key}`.replace(/\s+/g, "-");
            let id = baseId;
            let counter = 1;
            while (document.getElementById(id)) {
              id = `${baseId}-${counter}`;
              counter += 1;
            }
            field.id = id;
            label.setAttribute("for", id);
          }
        }
      },
      setPropertyTab: (panel, index) => {
        if (!panel) return;
        const forms = panel.querySelectorAll(":scope > form");
        const buttons = panel.querySelectorAll(":scope > .property-tab-header .property-tab-button");
        for (let i = 0; i < forms.length; i++) {
          forms[i].classList.toggle("active", i === index);
        }
        for (let i = 0; i < buttons.length; i++) {
          buttons[i].classList.toggle("active", i === index);
        }
      },
      getFormActionKey: (shapeType, name) => `${shapeType || "settings"}:${name || ""}`,
      registerFormAction: (shapeType, name, action) => {
        if (!name || typeof action !== "function") return;
        page.ui.formActionMap.set(page.getFormActionKey(shapeType, name), action);
      },
      getBindInput: (target) => {
        if (!target) return null;
        const input = target.classList && target.classList.contains("bind") ? target : closest(target, ".bind");
        if (!input) return null;
        const host = closest(input, ".property") || closest(input, "#settingsPanel");
        return host ? input : null;
      },
      dispatchFormInput: (input) => {
        if (input.dataset.setting === "true") {
          page.setSettingParam(input);
          return;
        }
        const shapeType = input.dataset.shapeType;
        if (shapeType) {
          page.setInputParam(input, shapeType);
        }
      },
      handleFormInput: (event) => {
        const input = page.getBindInput(event.target);
        if (!input) return;
        if (input.tagName === "SELECT") return;
        page.queueFormInput(input);
      },
      handleFormChange: (event) => {
        const input = page.getBindInput(event.target);
        if (!input) return;
        page.scheduleHistory();
        if (input.tagName === "SELECT") {
          page.dispatchFormInput(input);
        }
      },
      handleFormClick: (event) => {
        const input = page.getBindInput(event.target);
        if (!input) return;
        const action = page.ui.formActionMap.get(page.getFormActionKey(input.dataset.shapeType, input.name));
        if (action) {
          event.preventDefault();
          action(input.dataset.shapeType);
        }
      },
      bindFormEvents: () => {
        if (page.ui.formEventsBound) return;
        const targets = getFormEventTargets();
        if (!targets.length) return;
        toggleFormEventTargets(targets, "addEventListener");
        page.ui.formEventTargets = targets;
        page.ui.formEventsBound = true;
      },
      bindPanelAction: (input, shapeType, actionMap) => {
        input.dataset.shapeType = shapeType;
        const action = actionMap && actionMap[input.name];
        if (action) {
          page.registerFormAction(shapeType, input.name, action);
        }
      },
      setInputParam: (input, shapeType) => {
        const value = page.getInputValue(input);
        if (input.type === "number" && value === null) return;
        if (shapeType === "MapRect") {
          page.panel.setPanelValue(input.name, value);
        } else {
          page.panel.setActiveShapeValue(input.name, value, shapeType);
        }
      },
      setSettingParam: (input) => {
        const value = page.getInputValue(input);
        if (input.type === "number" && value === null) return;
        if (input.name === "visual.theme") {
          page.panel.setTheme(value, { force: true });
          return;
        }
        page.panel.setPanelValue(input.name, value);
        if (input.name === "visual.render.cull") {
          const isOff = value === false || value === "off" || value === "false";
          if (isOff) {
            page.panel.setPanelValue("visual.render.cullThreshold", 0);
            page.panel.setPanelValue("visual.render.cullPadding", 0);
            const thresholdField = page.getSettingsField("visual.render.cullThreshold");
            const paddingField = page.getSettingsField("visual.render.cullPadding");
            if (thresholdField) page.setInputValue(thresholdField, 0);
            if (paddingField) page.setInputValue(paddingField, 0);
          }
        }
        const isVisual = input.name && input.name.startsWith("visual.");
        const isRender = input.name && input.name.startsWith("visual.render.");
        if (isVisual && !isRender) {
          page.panel.applyVisualSettings();
          page.updateSettingsState();
          return;
        }
        if (isVisual || input.name && input.name.startsWith("history.")) {
          page.updateSettingsState();
        }
      },
      setInputForm: (input, shape, key) => {
        const value = page.panel.getDeepValue(shape, key);
        page.setInputValue(input, value);
        page.updateCountBadge(input, value);
      },
      setForm: (titleText, tabId, shape) => {
        page.setFormActive(titleText, tabId);
        const inputs = page.getFormInputs(tabId);
        for (let i = 0; i < inputs.length; i++) {
          const input = inputs[i];
          page.setInputForm(input, shape, input.name);
        }
      },
      setFormByType: (shapeType, shape) => {
        const config = shapeFormMap.get(shapeType);
        if (!config) return;
        page.setForm(config.title, config.tabId, shape);
      },
      setSettingsForm: (panel) => {
        if (!panel) return;
        const inputs = page.getFormInputs("tabSettings");
        for (let i = 0; i < inputs.length; i++) {
          const input = inputs[i];
          page.setInputForm(input, panel, input.name);
        }
        page.updateSettingsState();
      },
      setMapRectForm: (panel) => {
        page.setForm("：地图 [ 矩形 ]", "tabMapRect", panel);
      },
      bindFormActionsBySchema: (input, shapeType, schemaName) => {
        const actionMap = page.getFormSchemaActions(schemaName);
        page.bindPanelAction(input, shapeType, actionMap);
      },
      bindPanelInputsBySchema: (tabId, shapeType, schemaName) => {
        page.bindPanelInputs(tabId, (input) => page.bindFormActionsBySchema(input, shapeType, schemaName), shapeType);
      },
      getFormSchemaActions: (schemaName) => {
        const cache = page.ui.formActionSchemaMap ?? (page.ui.formActionSchemaMap = /* @__PURE__ */ new Map());
        if (cache.has(schemaName)) return cache.get(schemaName);
        const schema = formActionSchemas[schemaName];
        const actionMap = {};
        if (schema && typeof schema === "object") {
          for (const name in schema) {
            if (!Object.prototype.hasOwnProperty.call(schema, name)) continue;
            const handler = page[schema[name]];
            if (typeof handler === "function") actionMap[name] = handler;
          }
        }
        cache.set(schemaName, actionMap);
        return actionMap;
      },
      setSettingsEvent: (input) => {
        input.dataset.setting = "true";
      },
      bindPanelInputs: (tabId, handler, shapeType) => {
        const inputs = page.getFormInputs(tabId);
        for (let i = 0; i < inputs.length; i++) {
          const input = inputs[i];
          if (shapeType) input.dataset.shapeType = shapeType;
          handler(input, shapeType);
        }
      },
      setMapRectPanel: () => {
        page.bindPanelInputsBySchema("tabMapRect", "MapRect", "setMapEvent");
      },
      setSettingsPanel: () => {
        page.bindPanelInputs("tabSettings", page.setSettingsEvent);
      },
      getSettingsField: (name) => {
        return document.querySelector(`#tabSettings [name="${name}"]`);
      },
      updateSettingsState: () => {
        const guides = page.panel.visual?.guides ?? {};
        const setDisabled = (name, disabled) => {
          const field = page.getSettingsField(name);
          if (field) field.disabled = Boolean(disabled);
        };
        setDisabled("visual.guides.groupBounds", !guides.enable);
        setDisabled("visual.guides.align", !guides.enable);
        const snapDisabled = !guides.snapEnable;
        setDisabled("visual.guides.snapGrid", snapDisabled);
        setDisabled("visual.guides.snapMapBounds", snapDisabled);
        setDisabled("visual.guides.snapDistribution", snapDisabled);
        setDisabled("visual.guides.snapTolerance", snapDisabled);
        const render = page.panel.visual?.render ?? {};
        const mode = typeof render.mode === "string" ? render.mode.toLowerCase() : "";
        const isAuto = mode === "auto";
        setDisabled("visual.render.boost", !isAuto);
        const cullMode = render.cull;
        const cullDisabled = cullMode === false || cullMode === "off" || cullMode === "false";
        setDisabled("visual.render.cullThreshold", cullDisabled);
        setDisabled("visual.render.cullPadding", cullDisabled);
        const dynamicDisabled = render.dynamic === false;
        setDisabled("visual.render.segmented", dynamicDisabled);
        setDisabled("visual.render.segmentMax", dynamicDisabled || render.segmented === false);
        setDisabled("visual.render.dynamicKinds", dynamicDisabled);
        setDisabled("visual.render.dynamicTypes", dynamicDisabled);
        const historyEnabled = page.panel.history?.enable !== false;
        setDisabled("history.max", !historyEnabled);
        setDisabled("history.fastPatch", !historyEnabled);
      },
      clearSearch: () => {
        const input = page.ui.els.searchInput;
        input.value = "";
        input.focus();
        const state = page.ui.searchState;
        state.keyword = "";
        state.matches = [];
        state.index = 0;
      },
      setSearch: () => {
        const input = page.ui.els.searchInput;
        const search = input.value.trim();
        if (!search) {
          page.notify("请输入编码名称", "warning");
          input.focus();
          return;
        }
        const keyword = search.toLowerCase();
        const matches = [];
        const shapes = page.panel.allShapes;
        for (const shape of shapes) {
          if (!page.panel.isPlane(shape)) continue;
          const code = String(shape.code && shape.code.text ? shape.code.text : "").toLowerCase();
          const name = String(shape.name && shape.name.text ? shape.name.text : "").toLowerCase();
          if (code.includes(keyword) || name.includes(keyword)) {
            matches.push(shape);
          }
        }
        if (matches.length === 0) {
          page.notify("未搜索到对象", "warning");
          const state2 = page.ui.searchState;
          state2.keyword = keyword;
          state2.matches = [];
          state2.index = 0;
          return;
        }
        const state = page.ui.searchState;
        let nextIndex = 0;
        if (state.keyword === keyword && Array.isArray(state.matches) && state.matches.length) {
          nextIndex = (state.index + 1) % matches.length;
        }
        state.keyword = keyword;
        state.matches = matches;
        state.index = nextIndex;
        const focusShape = matches[nextIndex];
        page.panel.setActiveShapes(matches);
        page.panel.setView(focusShape);
        page.notify(`找到 ${matches.length} 个对象，定位第${nextIndex + 1} 个`, "info", { duration: 2200 });
      },
      setOpenDatabase: () => {
        try {
          const data = localStorage.getItem(localStorageKey);
          if (!data) {
            page.notify("本地存储中未找到地图数据。", "warning");
            return false;
          }
          const parsed = JSON.parse(data);
          if (!parsed || typeof parsed !== "object") throw new Error("本地存储数据无效");
          page.panel.setData(parsed);
          page.panel.setScalingAdapt();
          page.updateStatusBar();
          page.notify("已从本地存储加载地图数据。", "success");
          return true;
        } catch {
          page.notify("从本地存储加载地图数据失败。", "error");
          return false;
        }
      },
      setSaveDatabase: () => {
        try {
          const data = JSON.stringify(page.panel.getData({ clone: false }));
          localStorage.setItem(localStorageKey, data);
          page.notify("已将地图数据保存到本地存储。", "success");
          return true;
        } catch {
          page.notify("保存地图数据到本地存储失败。", "error");
          return false;
        }
      },
      initDialogs: () => {
        if (page.dialogs) return;
        page.dialogs = {
          actions: page.createListDialogState("dialogActions", page.renderActionsList),
          actionForm: page.createDialogState("dialogActionForm", { item: null, onSave: noop, onClose: noop, parameters: [] }),
          actionParameters: page.createListDialogState("dialogActionParameters", page.renderActionParametersList),
          actionParameterForm: page.createDialogState("dialogActionParameterForm", { item: null, onSave: noop, onClose: noop, isEdit: false }),
          extends: page.createListDialogState("dialogExtends", page.renderExtendsList),
          extendForm: page.createDialogState("dialogExtendForm", { item: null, onSave: noop, onClose: noop, isEdit: false }),
          controlPoints: page.createListDialogState("dialogControlPoints", page.renderControlPointsList),
          controlPointForm: page.createDialogState("dialogControlPointForm", { item: null, onSave: noop, onClose: noop }),
          nodeIds: page.createListDialogState("dialogNodeIds", page.renderNodeIdsList)
        };
        const dialogs = document.querySelectorAll("dialog");
        for (let i = 0; i < dialogs.length; i++) {
          const dialog = dialogs[i];
          page.bindDialogListener(dialog, "cancel", (event) => {
            event.preventDefault();
            const cancelButton = dialog.querySelector('[name="cancel"]');
            if (cancelButton) {
              cancelButton.click();
              return;
            }
            dialog.close();
          });
          page.bindDialogListener(dialog, "close", () => page.restoreFocus());
        }
        const actionsState = page.dialogs.actions;
        const actionsDialog = actionsState.dialog;
        if (actionsDialog) {
          page.bindListDialog(actionsState, {
            add: () => {
              page.openListFormDialog(
                actionsDialog,
                page.openActionForm,
                "add",
                { actionId: page.createId(), actionParameters: [] },
                (item) => {
                  actionsState.list.push(item);
                },
                actionsState.render
              );
            },
            edit: () => {
              page.editDialogListItem(
                actionsDialog,
                actionsState,
                page.openActionForm,
                "edit",
                (updated) => {
                  actionsState.list[actionsState.selected] = updated;
                },
                actionsState.render
              );
            },
            delete: () => {
              page.deleteSelectedDialogItem(actionsState);
            }
          });
        }
        const actionFormDialog = page.dialogs.actionForm.dialog;
        if (actionFormDialog) {
          page.initActionFormSources();
          const actionFormState = page.dialogs.actionForm;
          const form = page.getDialogForm(actionFormState);
          page.bindDialogListener(page.getField(actionFormDialog, "ok"), "click", () => {
            if (!form.reportValidity()) return;
            const state = actionFormState;
            const item = state.item || {};
            item.actionType = page.getFieldText(form, "actionType", true);
            item.actionDescription = page.getFieldText(form, "actionDescription");
            item.blockingType = page.getFieldText(form, "blockingType", true);
            item.sortNumber = page.getFieldNumber(form, "sortNumber", 0);
            item.actionParameters = page.cloneData(state.parameters);
            if (!item.actionId) item.actionId = page.createId();
            state.onSave(item);
            actionFormDialog.close();
            state.onClose(true);
          });
          page.bindDialogListener(page.getField(actionFormDialog, "cancel"), "click", () => {
            const state = actionFormState;
            actionFormDialog.close();
            state.onClose(false);
          });
          page.bindDialogListener(page.getField(actionFormDialog, "actionParameters"), "click", () => {
            const state = actionFormState;
            page.captureActionForm();
            actionFormDialog.close();
            page.openActionParametersDialog(state.parameters, (updated) => {
              state.parameters = updated;
            }, () => {
              state.item.actionParameters = state.parameters;
              page.openActionForm(state.mode, state.item, state.onSave, state.onClose);
            });
          });
        }
        const actionParamsDialog = page.dialogs.actionParameters.dialog;
        if (actionParamsDialog) {
          page.bindKeyValueListDialog(page.dialogs.actionParameters, page.openActionParameterForm);
        }
        const actionParamFormDialog = page.dialogs.actionParameterForm.dialog;
        if (actionParamFormDialog) {
          page.initActionParamKeySources();
          page.bindKeyValueForm("actionParameterForm");
        }
        const extendsDialog = page.dialogs.extends.dialog;
        if (extendsDialog) {
          page.bindKeyValueListDialog(page.dialogs.extends, page.openExtendForm);
        }
        const extendFormDialog = page.dialogs.extendForm.dialog;
        if (extendFormDialog) {
          page.bindKeyValueForm("extendForm");
        }
        const controlPointsState = page.dialogs.controlPoints;
        const controlPointsDialog = controlPointsState.dialog;
        if (controlPointsDialog) {
          page.bindListDialog(controlPointsState, {
            edit: () => {
              page.editDialogListItem(
                controlPointsDialog,
                controlPointsState,
                page.openControlPointForm,
                null,
                (updated) => {
                  controlPointsState.list[controlPointsState.selected] = updated;
                },
                controlPointsState.render
              );
            }
          });
        }
        const controlPointFormDialog = page.dialogs.controlPointForm.dialog;
        if (controlPointFormDialog) {
          const controlPointFormState = page.dialogs.controlPointForm;
          const form = page.getDialogForm(controlPointFormState);
          page.bindDialogListener(page.getField(controlPointFormDialog, "ok"), "click", () => {
            if (!form.reportValidity()) return;
            const state = controlPointFormState;
            const item = state.item || {};
            item.weight = page.getFieldNumber(form, "weight", 0);
            state.onSave(item);
            controlPointFormDialog.close();
            state.onClose(true);
          });
          page.bindDialogListener(page.getField(controlPointFormDialog, "cancel"), "click", () => {
            const state = controlPointFormState;
            controlPointFormDialog.close();
            state.onClose(false);
          });
        }
        const nodeIdsDialog = page.dialogs.nodeIds.dialog;
        if (nodeIdsDialog) {
          page.bindDialogButton(nodeIdsDialog, '[name="ok"]', () => nodeIdsDialog.close());
          page.bindDialogButton(nodeIdsDialog, '[name="cancel"]', () => nodeIdsDialog.close());
        }
      },
      openActionsDialog: (list, onSave) => {
        page.openListDialog(page.dialogs.actions, list, onSave);
      },
      renderActionsList: () => {
        const state = page.dialogs.actions;
        page.renderDialogTable(state, (row, item) => {
          row.append(
            page.createCell(item.actionType || ""),
            page.createCell(item.blockingType || ""),
            page.createCell(page.formatNumber(item.sortNumber))
          );
        });
      },
      openActionForm: (mode, item, onSave, onClose) => {
        const state = page.dialogs.actionForm;
        state.mode = mode;
        state.item = page.cloneData(item) || {};
        state.onSave = onSave || noop;
        state.onClose = onClose || noop;
        state.parameters = page.ensureList(state.item.actionParameters);
        const form = page.getDialogForm(state);
        page.setFieldText(form, "actionType", state.item.actionType);
        page.setFieldText(form, "actionDescription", state.item.actionDescription);
        page.setFieldText(form, "blockingType", state.item.blockingType);
        page.setFieldNumber(form, "sortNumber", Number(state.item.sortNumber), 0);
        page.setFieldText(form, "actionId", state.item.actionId);
        page.updateActionParameterCount();
        page.openDialog(state.dialog);
      },
      updateActionParameterCount: () => {
        const state = page.dialogs.actionForm;
        const count = page.ensureList(state.parameters).length;
        const countEl = page.getDialogPart(state, "actionParametersCount", "#actionParametersCount");
        if (countEl) countEl.textContent = `${count} 项`;
      },
      captureActionForm: () => {
        const state = page.dialogs.actionForm;
        if (!state.item) return;
        const form = page.getDialogForm(state);
        state.item.actionType = page.getFieldText(form, "actionType", true);
        state.item.actionDescription = page.getFieldText(form, "actionDescription");
        state.item.blockingType = page.getFieldText(form, "blockingType", true);
        state.item.sortNumber = page.getFieldNumber(form, "sortNumber", 0);
        state.item.actionId = page.getFieldText(form, "actionId");
      },
      openActionParametersDialog: (list, onSave, onClose) => {
        page.openListDialog(page.dialogs.actionParameters, list, onSave, onClose);
      },
      renderActionParametersList: () => {
        page.renderKeyValueDialogList(page.dialogs.actionParameters);
      },
      openKeyValueForm: (stateKey, mode, item, onSave, onClose) => {
        const state = page.dialogs[stateKey];
        if (!state || !state.dialog) return;
        state.isEdit = mode === "edit";
        state.item = page.cloneData(item) || {};
        state.onSave = onSave || noop;
        state.onClose = onClose || noop;
        const form = page.getDialogForm(state);
        if (!form) return;
        const keyInput = form.querySelector('[name="key"]');
        const valueInput = form.querySelector('[name="value"]');
        keyInput.value = state.item.key || "";
        keyInput.disabled = state.isEdit;
        valueInput.value = state.item.value || "";
        page.openDialog(state.dialog);
      },
      bindKeyValueForm: (stateKey) => {
        const state = page.dialogs[stateKey];
        if (!state || !state.dialog) return;
        const dialog = state.dialog;
        const form = page.getDialogForm(state);
        if (!form) return;
        page.bindDialogListener(page.getField(dialog, "ok"), "click", () => {
          if (!form.reportValidity()) return;
          const item = state.item || {};
          item.key = form.querySelector('[name="key"]').value.trim();
          item.value = form.querySelector('[name="value"]').value;
          state.onSave(item);
          dialog.close();
          state.onClose(true);
        });
        page.bindDialogListener(page.getField(dialog, "cancel"), "click", () => {
          dialog.close();
          state.onClose(false);
        });
      },
      openActionParameterForm: (mode, item, onSave, onClose) => {
        page.openKeyValueForm("actionParameterForm", mode, item, onSave, onClose);
      },
      openExtendsDialog: (list, onSave) => {
        page.openListDialog(page.dialogs.extends, list, onSave);
      },
      renderExtendsList: () => {
        page.renderKeyValueDialogList(page.dialogs.extends);
      },
      openExtendForm: (mode, item, onSave, onClose) => {
        page.openKeyValueForm("extendForm", mode, item, onSave, onClose);
      },
      openControlPointsDialog: (list, onSave, onClose) => {
        page.openListDialog(page.dialogs.controlPoints, list, onSave, onClose);
      },
      renderControlPointsList: () => {
        const state = page.dialogs.controlPoints;
        page.renderDialogTable(state, (row, item) => {
          row.append(
            page.createCell(page.formatNumber(item.x)),
            page.createCell(page.formatNumber(item.y)),
            page.createCell(page.formatNumber(item.weight))
          );
        });
      },
      openNodeIdsDialog: (list) => {
        page.openListDialog(page.dialogs.nodeIds, list);
      },
      renderNodeIdsList: () => {
        const state = page.dialogs.nodeIds;
        if (!state || !state.dialog) return;
        page.renderDialogTable(state, (row, item) => {
          const index = Number(row.dataset.index) + 1;
          row.append(
            page.createCell(String(index)),
            page.createCell(item == null ? "" : String(item))
          );
        });
      },
      updateNodeIdsCount: (shapeType, list) => {
        const config = shapeFormMap.get(shapeType);
        if (!config) return;
        const input = document.querySelector(`#${config.tabId} [name="data.nodeIds"]`);
        if (!input) return;
        page.updateCountBadge(input, list);
      },
      openControlPointForm: (item, onSave, onClose) => {
        const state = page.dialogs.controlPointForm;
        state.item = page.cloneData(item) || {};
        state.onSave = onSave || noop;
        state.onClose = onClose || noop;
        const form = page.getDialogForm(state);
        for (let i = 0; i < controlPointNumberKeys.length; i++) {
          const key = controlPointNumberKeys[i];
          page.setFieldNumber(form, key, Number(state.item[key]), 0);
        }
        page.openDialog(state.dialog);
      },
      setNodeIdsList: (shapeType) => {
        const shape = page.panel.getActiveShapeLast(false);
        if (!shape) return;
        if (shapeType && shapeType.startsWith("Zone")) {
          page.panel.setZoneNodes(shape);
        }
        const nodeIds = page.cloneData(page.panel.getDeepValue(shape, "data.nodeIds")) || [];
        page.updateNodeIdsCount(shapeType, nodeIds);
        page.openNodeIdsDialog(nodeIds);
      },
      setNodePosition: (shapeType) => {
        const shape = page.panel.getActiveShapeLast(false);
        if (!shape) return;
        const data = page.cloneData(page.panel.getDeepValue(shape, "data.nodePosition")) || {};
        const dialog = document.getElementById("dialogNodePosition");
        if (!dialog) return;
        page.bindModalOkCancel(dialog, () => {
          for (let i = 0; i < nodePositionNumberKeys.length; i++) {
            const key = nodePositionNumberKeys[i];
            data[key] = page.getFieldNumber(dialog, key, 0);
          }
          data.mapId = page.getFieldText(dialog, "mapId");
          data.mapDescription = page.getFieldText(dialog, "mapDescription");
          page.panel.setActiveShapeValue("data.nodePosition", data, shapeType);
          page.scheduleHistory();
          dialog.close();
        });
        for (let i = 0; i < nodePositionNumberKeys.length; i++) {
          const key = nodePositionNumberKeys[i];
          page.setFieldNumber(dialog, key, data[key], 0);
        }
        page.setFieldText(dialog, "mapId", data.mapId);
        page.setFieldText(dialog, "mapDescription", data.mapDescription);
        page.openDialog(dialog);
      },
      setTrajectory: (shapeType) => {
        const shape = page.panel.getActiveShapeLast(false);
        if (!shape) return;
        const data = page.cloneData(page.panel.getDeepValue(shape, "data.trajectory")) || {};
        data.controlPoints = page.ensureList(data.controlPoints);
        const dialog = document.getElementById("dialogTrajectory");
        if (!dialog) return;
        page.bindModalOkCancel(dialog, () => {
          data.degree = page.getFieldNumber(dialog, "degree", 0);
          const knotInput = page.getFieldText(dialog, "knotVector");
          const knotParts = knotInput.split(/[\s,]+/);
          const knots = [];
          for (let i = 0; i < knotParts.length; i++) {
            const parsed = Number(knotParts[i]);
            if (Number.isFinite(parsed)) knots.push(parsed);
          }
          data.knotVector = knots.length ? knots : [0];
          page.panel.setActiveShapeValue("data.trajectory", data, shapeType);
          page.scheduleHistory();
          dialog.close();
        });
        const controlPointsButton = dialog.querySelector('[name="controlPoints"]');
        if (controlPointsButton) {
          controlPointsButton.onclick = () => {
            dialog.close();
            page.openControlPointsDialog(data.controlPoints, (updated) => {
              data.controlPoints = updated;
            }, () => {
              page.setFieldNumber(dialog, "degree", data.degree, 0);
              page.setFieldText(dialog, "knotVector", Array.isArray(data.knotVector) ? data.knotVector.join(",") : data.knotVector);
              page.openDialog(dialog);
            });
          };
        }
        page.setFieldNumber(dialog, "degree", data.degree, 0);
        page.setFieldText(dialog, "knotVector", Array.isArray(data.knotVector) ? data.knotVector.join(",") : data.knotVector);
        page.openDialog(dialog);
      },
      setActions: (shapeType) => {
        const shape = page.panel.getActiveShapeLast(false);
        if (!shape) return;
        const actions = page.cloneData(page.panel.getDeepValue(shape, "data.actions")) || [];
        page.openActionsDialog(actions, (updated) => {
          page.panel.setActiveShapeValue("data.actions", updated, shapeType);
          page.scheduleHistory();
        });
      },
      setExtends: (shapeType) => {
        if (shapeType === "MapRect") {
          const extendsList2 = page.cloneData(page.panel.map.extends) || [];
          page.openExtendsDialog(extendsList2, (updated) => {
            page.panel.setPanelValue("map.extends", updated);
            page.scheduleHistory();
          });
          return;
        }
        const shape = page.panel.getActiveShapeLast(false);
        if (!shape) return;
        const extendsList = page.cloneData(page.panel.getDeepValue(shape, "extends")) || [];
        page.openExtendsDialog(extendsList, (updated) => {
          page.panel.setActiveShapeValue("extends", updated, shapeType);
          page.scheduleHistory();
        });
      },
      applyImageSource: (shapeType, src, options = {}) => {
        const isMap = shapeType === "MapRect";
        if (isMap) {
          if (options.clear) {
            page.panel.setDeleteImage({ force: true });
          } else {
            page.panel.withBatch(() => {
              page.panel.setPanelValue("map.image.enable", true);
              if (options.dataUrl) page.panel.setPanelValue("map.image._dataUrl", options.dataUrl);
              page.panel.setPanelValue("map.image._sharedObjectUrl", false);
              page.panel.setPanelValue("map.image.src", src);
            });
          }
        } else if (options.clear) {
          page.panel.setActiveShapeAssign({
            image: { src: "", image: new Image(), _src: "", _resolvedSrc: "", _dataUrl: "", _objectUrl: "", _sharedObjectUrl: false }
          }, shapeType);
        } else {
          const image = { enable: true, src, _sharedObjectUrl: false };
          if (options.dataUrl) image._dataUrl = options.dataUrl;
          page.panel.setActiveShapeAssign({ image }, shapeType);
        }
        const tabId = isMap ? "tabMapRect" : shapeFormMap.get(shapeType)?.tabId;
        if (tabId) {
          const srcName = isMap ? "map.image.src" : "image.src";
          const srcInput = document.querySelector(`#${tabId} [name="${srcName}"]`);
          if (srcInput) page.setInputValue(srcInput, src || "");
          if (!options.clear) {
            const enableName = isMap ? "map.image.enable" : "image.enable";
            const enableInput = document.querySelector(`#${tabId} [name="${enableName}"]`);
            if (enableInput) page.setInputValue(enableInput, true);
          }
        }
        page.scheduleHistory();
      },
      setImagePick: (shapeType) => {
        panelUtil.update(["jpg", "jpeg", "png", "webp", "gif", "svg"]).then((file) => {
          const objectUrl = URL.createObjectURL(file);
          return panelUtil.readImage(file).then((dataUrl) => {
            page.applyImageSource(shapeType, objectUrl, { dataUrl });
          }).catch(() => {
            panelUtil.revokeObjectUrl(objectUrl);
          });
        }).catch(() => {
        });
      },
      setImageClear: (shapeType) => {
        page.applyImageSource(shapeType, "", { clear: true });
      }
    });
    panelNamespace.ui = page;
    page.start();
    if (typeof page.ui.pageReady === "function") {
      page.ui.pageReady(page);
    }
  })();
})();