@eclipse-lyra/core 0.0.0

package/dist/resizable-grid-BRH3MyZK.js

@@ -0,0 +1,3813 @@
+import { css, html, render, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { l as rootContext, f as activeTasksSignal, i as createLogger, j as defaultLogger, t as toastError, u as uiContext, m as toastInfo, T as TOPIC_COMMAND_REGISTERED, g as commandRegistry, L as LyraWidget, b as TOPIC_CONTRIBUTEIONS_CHANGED, h as contributionRegistry, p as partDirtySignal, d as activePartSignal } from "./icon-DN6fp0dg.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { publish, subscribe } from "./core/events.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { when } from "lit/directives/when.js";
+import { repeat } from "lit/directives/repeat.js";
+import { marked } from "marked";
+const TOOLBAR_MAIN = "app-toolbars-main";
+const TOOLBAR_MAIN_RIGHT = "app-toolbars-main-right";
+const TOOLBAR_MAIN_CENTER = "app-toolbars-main-center";
+const TOOLBAR_BOTTOM = "app-toolbars-bottom";
+const TOOLBAR_BOTTOM_CENTER = "app-toolbars-bottom-center";
+const TOOLBAR_BOTTOM_END = "app-toolbars-bottom-end";
+const SYSTEM_VIEWS = "system-views";
+const EDITOR_AREA_MAIN = "editor-area-main";
+const SIDEBAR_MAIN = "sidebar-main";
+const SIDEBAR_MAIN_BOTTOM = "sidebar-main-bottom";
+const SIDEBAR_AUXILIARY = "sidebar-auxiliary";
+const PANEL_BOTTOM = "panel-bottom";
+const COMMAND_SAVE = "command-save";
+const HIDE_DOT_RESOURCE = false;
+var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
+  MouseButton2[MouseButton2["LEFT"] = 0] = "LEFT";
+  MouseButton2[MouseButton2["MIDDLE"] = 1] = "MIDDLE";
+  MouseButton2[MouseButton2["RIGHT"] = 2] = "RIGHT";
+  MouseButton2[MouseButton2["BACK"] = 3] = "BACK";
+  MouseButton2[MouseButton2["FORWARD"] = 4] = "FORWARD";
+  return MouseButton2;
+})(MouseButton || {});
+const constants = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  COMMAND_SAVE,
+  EDITOR_AREA_MAIN,
+  HIDE_DOT_RESOURCE,
+  MouseButton,
+  PANEL_BOTTOM,
+  SIDEBAR_AUXILIARY,
+  SIDEBAR_MAIN,
+  SIDEBAR_MAIN_BOTTOM,
+  SYSTEM_VIEWS,
+  TOOLBAR_BOTTOM,
+  TOOLBAR_BOTTOM_CENTER,
+  TOOLBAR_BOTTOM_END,
+  TOOLBAR_MAIN,
+  TOOLBAR_MAIN_CENTER,
+  TOOLBAR_MAIN_RIGHT
+}, Symbol.toStringTag, { value: "Module" }));
+const DB_NAME = "eclipse-lyra-persistence";
+const STORE_NAME = "keyval";
+const DB_VERSION = 1;
+let dbPromise = null;
+function getDB() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, DB_VERSION);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result);
+      request.onupgradeneeded = (e) => {
+        e.target.result.createObjectStore(STORE_NAME);
+      };
+    });
+  }
+  return dbPromise;
+}
+class PersistenceService {
+  async persistObject(key, value) {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const req = tx.objectStore(STORE_NAME).put(value, key);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  }
+  async getObject(key) {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const req = tx.objectStore(STORE_NAME).get(key);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+}
+const persistenceService = new PersistenceService();
+rootContext.put("persistenceService", persistenceService);
+const SETTINGS_FILE_PATH = ".geospace/settings.json";
+const DIALOG_SETTINGS_KEY = "dialogSettings";
+const TOPIC_SETTINGS_CHANGED = "events/settings/changed";
+function mergeSchemaProperties(target, source) {
+  if (!source) return;
+  for (const [key, value] of Object.entries(source)) {
+    if (value && typeof value === "object") {
+      const existing = target[key];
+      if (existing?.properties && value.properties) {
+        mergeSchemaProperties(existing.properties, value.properties);
+      } else {
+        target[key] = { ...value, properties: value.properties ? { ...value.properties } : void 0 };
+      }
+    }
+  }
+}
+class SettingsService {
+  constructor() {
+    this.mergedSchema = { type: "object", properties: {} };
+  }
+  async checkSettings() {
+    if (!this.appSettings) {
+      this.appSettings = await persistenceService.getObject(SETTINGS_FILE_PATH);
+      if (!this.appSettings) {
+        this.appSettings = {};
+        await persistenceService.persistObject(SETTINGS_FILE_PATH, this.appSettings);
+      }
+      publish(TOPIC_SETTINGS_CHANGED, this.appSettings);
+    }
+  }
+  /**
+   * Register a JSON Schema for settings. Top-level keys of `schema.properties` become categories.
+   * Consumers can pass schemas produced by Zod (e.g. zod-to-json-schema) or hand-written JSON Schema.
+   */
+  registerSchema(schema) {
+    const props = schema.properties ?? (schema.type === "object" ? {} : void 0);
+    if (props) {
+      if (!this.mergedSchema.properties) this.mergedSchema.properties = {};
+      mergeSchemaProperties(this.mergedSchema.properties, props);
+    }
+  }
+  getCategories() {
+    const props = this.mergedSchema.properties;
+    if (!props) return [];
+    return Object.entries(props).filter(([, s]) => s && typeof s === "object").map(([id, schema]) => ({
+      id,
+      label: schema.title ?? id,
+      order: typeof schema.order === "number" ? schema.order : 0,
+      schema
+    })).sort((a, b) => a.order - b.order);
+  }
+  getSchemaForCategory(categoryId) {
+    return this.mergedSchema.properties?.[categoryId];
+  }
+  /**
+   * Resolve a dotted key (e.g. "editor.fontSize") to the JSON Schema fragment for that path.
+   */
+  getSchemaForSettingKey(dottedKey) {
+    const parts = dottedKey.split(".").filter(Boolean);
+    if (parts.length === 0) return this.mergedSchema;
+    let current = this.mergedSchema;
+    for (const part of parts) {
+      current = current?.properties?.[part];
+      if (!current) return void 0;
+    }
+    return current;
+  }
+  traversePath(obj, pathParts, createIfMissing) {
+    if (pathParts.length === 0) return null;
+    let current = obj;
+    const lastIndex = pathParts.length - 1;
+    for (let i = 0; i < lastIndex; i++) {
+      const part = pathParts[i];
+      if (current[part] === void 0) {
+        if (!createIfMissing) return null;
+        current[part] = {};
+      }
+      if (current[part] === null || typeof current[part] !== "object") return null;
+      current = current[part];
+    }
+    return { parent: current, key: pathParts[lastIndex] };
+  }
+  async getAt(path) {
+    await this.checkSettings();
+    const parts = path.split(".").filter(Boolean);
+    if (parts.length === 0) return this.appSettings;
+    const result = this.traversePath(this.appSettings, parts, false);
+    if (!result) return void 0;
+    return result.parent[result.key];
+  }
+  async setAt(path, value) {
+    await this.checkSettings();
+    const parts = path.split(".").filter(Boolean);
+    if (parts.length === 0) return;
+    const result = this.traversePath(this.appSettings, parts, true);
+    if (!result) return;
+    result.parent[result.key] = value;
+    await persistenceService.persistObject(SETTINGS_FILE_PATH, this.appSettings);
+    publish(TOPIC_SETTINGS_CHANGED, this.appSettings);
+  }
+  async get(key) {
+    await this.checkSettings();
+    return this.appSettings[key];
+  }
+  async set(key, value) {
+    await this.checkSettings();
+    this.appSettings[key] = value;
+    await persistenceService.persistObject(SETTINGS_FILE_PATH, this.appSettings);
+    publish(TOPIC_SETTINGS_CHANGED, this.appSettings);
+  }
+  async getAll() {
+    await this.checkSettings();
+    return this.appSettings;
+  }
+  async setAll(settings) {
+    this.appSettings = settings;
+    await persistenceService.persistObject(SETTINGS_FILE_PATH, this.appSettings);
+    publish(TOPIC_SETTINGS_CHANGED, this.appSettings);
+  }
+  async getDialogSetting(key) {
+    await this.checkSettings();
+    const dialogSettings = this.appSettings[DIALOG_SETTINGS_KEY] || {};
+    return dialogSettings[key];
+  }
+  async setDialogSetting(key, value) {
+    await this.checkSettings();
+    const dialogSettings = this.appSettings[DIALOG_SETTINGS_KEY] || {};
+    dialogSettings[key] = value;
+    this.appSettings[DIALOG_SETTINGS_KEY] = dialogSettings;
+    await persistenceService.persistObject(SETTINGS_FILE_PATH, this.appSettings);
+    publish(TOPIC_SETTINGS_CHANGED, this.appSettings);
+  }
+}
+const appSettings = new SettingsService();
+rootContext.put("appSettings", appSettings);
+class TaskService {
+  constructor() {
+    this.tasks = [];
+    this.updateCounter = 0;
+  }
+  notifyUpdate() {
+    this.updateCounter++;
+    activeTasksSignal.set(this.updateCounter);
+  }
+  run(name, task) {
+    const progressMonitor = this.createProgressMonitor(name);
+    try {
+      this.tasks.push(progressMonitor);
+      this.notifyUpdate();
+      task(progressMonitor);
+    } finally {
+      this.tasks.splice(this.tasks.indexOf(progressMonitor), 1);
+      this.notifyUpdate();
+    }
+  }
+  async runAsync(name, task) {
+    const progressMonitor = this.createProgressMonitor(name);
+    this.tasks.push(progressMonitor);
+    this.notifyUpdate();
+    return task(progressMonitor).finally(() => {
+      this.tasks.splice(this.tasks.indexOf(progressMonitor), 1);
+      this.notifyUpdate();
+    });
+  }
+  createProgressMonitor(name) {
+    const monitor = {
+      name,
+      message: "",
+      currentStep: 0,
+      totalSteps: -1,
+      // -1 indicates indefinite progress
+      progress: -1
+      // -1 means use step-based calculation
+    };
+    return new Proxy(monitor, {
+      set: (target, prop, value) => {
+        target[prop] = value;
+        this.notifyUpdate();
+        return true;
+      }
+    });
+  }
+  getActiveTasks() {
+    return this.tasks;
+  }
+}
+const taskService = new TaskService();
+rootContext.put("taskService", taskService);
+const logger$2 = createLogger("EsmShService");
+const _EsmShService = class _EsmShService {
+  isEsmShUrl(url) {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.hostname === "esm.sh" || urlObj.hostname === "raw.esm.sh";
+    } catch {
+      return false;
+    }
+  }
+  isSourceIdentifier(source) {
+    if (this.isEsmShUrl(source)) {
+      return false;
+    }
+    if (this.isHttpUrl(source)) {
+      return false;
+    }
+    return this.parseSource(source) !== null;
+  }
+  isHttpUrl(url) {
+    try {
+      const parsed = new URL(url);
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  }
+  parseSource(source) {
+    if (!source || typeof source !== "string") {
+      return null;
+    }
+    source = source.trim();
+    if (this.isHttpUrl(source)) {
+      return null;
+    }
+    if (source.startsWith(_EsmShService.GITHUB_PREFIX)) {
+      return this.parseGitHubSource(source);
+    }
+    if (source.startsWith(_EsmShService.JSR_PREFIX)) {
+      return this.parseJsrSource(source);
+    }
+    if (source.startsWith(_EsmShService.PR_PREFIX)) {
+      return this.parsePrSource(source);
+    }
+    return this.parseNpmSource(source);
+  }
+  parseGitHubSource(source) {
+    const withoutPrefix = source.substring(_EsmShService.GITHUB_PREFIX.length);
+    const parts = withoutPrefix.split("/");
+    if (parts.length < 2) {
+      return null;
+    }
+    const owner = parts[0];
+    const repoWithRef = parts[1];
+    let repo;
+    let version;
+    let path;
+    const refMatch = repoWithRef.match(/^(.+?)(@(.+))?$/);
+    if (!refMatch) {
+      return null;
+    }
+    repo = refMatch[1];
+    version = refMatch[3];
+    if (parts.length > 2) {
+      path = parts.slice(2).join("/");
+    }
+    return {
+      type: "github",
+      owner,
+      repo,
+      version,
+      path
+    };
+  }
+  parseJsrSource(source) {
+    const withoutPrefix = source.substring(_EsmShService.JSR_PREFIX.length);
+    if (!withoutPrefix.startsWith("@")) {
+      return null;
+    }
+    const parts = withoutPrefix.split("/");
+    if (parts.length < 2) {
+      return null;
+    }
+    const scope = parts[0];
+    const packageWithVersion = parts[1];
+    let packageName;
+    let version;
+    let path;
+    const versionMatch = packageWithVersion.match(/^(.+?)(@(.+))?$/);
+    if (!versionMatch) {
+      return null;
+    }
+    packageName = `${scope}/${versionMatch[1]}`;
+    version = versionMatch[3];
+    if (parts.length > 2) {
+      path = parts.slice(2).join("/");
+    }
+    return {
+      type: "jsr",
+      package: packageName,
+      version,
+      path
+    };
+  }
+  parsePrSource(source) {
+    const withoutPrefix = source.substring(_EsmShService.PR_PREFIX.length);
+    const parts = withoutPrefix.split("/");
+    if (parts.length < 2) {
+      return null;
+    }
+    const owner = parts[0];
+    const repoWithCommit = parts[1];
+    let repo;
+    let commit;
+    const commitMatch = repoWithCommit.match(/^(.+?)@(.+)$/);
+    if (commitMatch) {
+      repo = commitMatch[1];
+      commit = commitMatch[2];
+    } else {
+      repo = repoWithCommit;
+    }
+    return {
+      type: "pr",
+      owner,
+      repo,
+      commit
+    };
+  }
+  parseNpmSource(source) {
+    const parts = source.split("/");
+    const firstPart = parts[0];
+    let packageName;
+    let version;
+    let path;
+    const versionMatch = firstPart.match(/^(.+?)(@(.+))?$/);
+    if (!versionMatch) {
+      return null;
+    }
+    packageName = versionMatch[1];
+    version = versionMatch[3];
+    if (parts.length > 1) {
+      path = parts.slice(1).join("/");
+    }
+    return {
+      type: "npm",
+      package: packageName,
+      version,
+      path
+    };
+  }
+  buildEsmShUrl(source, options) {
+    let url = _EsmShService.ESM_SH_BASE;
+    switch (source.type) {
+      case "npm":
+        url += `/${source.package}`;
+        if (source.version) {
+          url += `@${source.version}`;
+        }
+        if (source.path) {
+          url += `/${source.path}`;
+        }
+        break;
+      case "github":
+        url += `/${_EsmShService.GITHUB_PREFIX}${source.owner}/${source.repo}`;
+        if (source.version) {
+          url += `@${source.version}`;
+        }
+        if (source.path) {
+          url += `/${source.path}`;
+        }
+        break;
+      case "jsr":
+        url += `/${_EsmShService.JSR_PREFIX}${source.package}`;
+        if (source.version) {
+          url += `@${source.version}`;
+        }
+        if (source.path) {
+          url += `/${source.path}`;
+        }
+        break;
+      case "pr":
+        url += `/${_EsmShService.PR_PREFIX}${source.owner}/${source.repo}`;
+        if (source.commit) {
+          url += `@${source.commit}`;
+        }
+        break;
+    }
+    const queryParams = [];
+    if (options?.deps) {
+      const depsString = Object.entries(options.deps).map(([pkg, version]) => `${pkg}@${version}`).join(",");
+      queryParams.push(`deps=${encodeURIComponent(depsString)}`);
+    }
+    if (options?.target) {
+      queryParams.push(`target=${encodeURIComponent(options.target)}`);
+    }
+    if (options?.dev) {
+      queryParams.push("dev");
+    }
+    if (options?.bundle === false) {
+      queryParams.push("bundle=false");
+    } else if (options?.bundle === true) {
+      queryParams.push("bundle");
+    }
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+    return url;
+  }
+  normalizeToEsmSh(source, options) {
+    if (this.isEsmShUrl(source)) {
+      return source;
+    }
+    if (this.isHttpUrl(source)) {
+      return source;
+    }
+    const parsed = this.parseSource(source);
+    if (!parsed) {
+      logger$2.warn(`Could not parse source identifier: ${source}`);
+      return source;
+    }
+    return this.buildEsmShUrl(parsed, options);
+  }
+  extractPackageName(source) {
+    const parsed = this.parseSource(source);
+    if (!parsed) {
+      return null;
+    }
+    switch (parsed.type) {
+      case "npm":
+        return parsed.package || null;
+      case "github":
+        return `${parsed.owner}/${parsed.repo}`;
+      case "jsr":
+        return parsed.package || null;
+      case "pr":
+        return `${parsed.owner}/${parsed.repo}`;
+    }
+  }
+  isGitHubUrl(url) {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.hostname === "github.com" || urlObj.hostname === "www.github.com";
+    } catch {
+      return url.startsWith("https://github.com/") || url.startsWith("http://github.com/");
+    }
+  }
+  convertGitHubUrlToSource(githubUrl) {
+    try {
+      const urlObj = new URL(githubUrl);
+      const pathParts = urlObj.pathname.split("/").filter((p) => p);
+      if (pathParts.length < 2) {
+        throw new Error("Invalid GitHub URL format");
+      }
+      const owner = pathParts[0];
+      let repo = pathParts[1].replace(/\.git$/, "");
+      let ref2;
+      let filePath;
+      if (pathParts.length > 2) {
+        if (pathParts[2] === "blob" || pathParts[2] === "tree") {
+          ref2 = pathParts[3] || "main";
+          if (pathParts[2] === "blob" && pathParts.length > 4) {
+            filePath = pathParts.slice(4).join("/");
+          }
+        } else if (pathParts[2] === "commit") {
+          ref2 = pathParts[3];
+        } else {
+          filePath = pathParts.slice(2).join("/");
+        }
+      }
+      let ghUrl = `${_EsmShService.GITHUB_PREFIX}${owner}/${repo}`;
+      if (ref2) {
+        ghUrl += `@${ref2}`;
+      }
+      if (filePath) {
+        ghUrl += `/${filePath}`;
+      }
+      return ghUrl;
+    } catch {
+      const urlMatch = githubUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/);
+      if (urlMatch) {
+        return `${_EsmShService.GITHUB_PREFIX}${urlMatch[1]}/${urlMatch[2].replace(/\.git$/, "")}`;
+      }
+      return githubUrl;
+    }
+  }
+  async fetchGitHubPackageJson(source) {
+    if (source.type !== "github") {
+      throw new Error("Source must be a GitHub source");
+    }
+    const owner = source.owner;
+    const repo = source.repo;
+    const ref2 = source.version || "main";
+    const packageJsonUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${ref2}/package.json`;
+    const response = await fetch(packageJsonUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch package.json: ${response.statusText}`);
+    }
+    return await response.json();
+  }
+};
+_EsmShService.ESM_SH_BASE = "https://esm.sh";
+_EsmShService.GITHUB_PREFIX = "gh/";
+_EsmShService.JSR_PREFIX = "jsr/";
+_EsmShService.PR_PREFIX = "pr/";
+let EsmShService = _EsmShService;
+const esmShService = new EsmShService();
+rootContext.put("esmShService", esmShService);
+const TOPIC_EXTENSIONS_CHANGED = "events/extensionsregistry/extensionsConfigChanged";
+const KEY_EXTENSIONS_CONFIG = "extensions";
+const KEY_EXTERNAL_EXTENSIONS = "extensions.external";
+class ExtensionRegistry {
+  constructor() {
+    this.extensions = {};
+    this.loadedExtensions = /* @__PURE__ */ new Set();
+    this.loadingPromises = /* @__PURE__ */ new Map();
+    subscribe(TOPIC_SETTINGS_CHANGED, () => {
+      this.extensionsSettings = void 0;
+      this.checkExtensionsConfig().then();
+    });
+    this.loadPersistedExternalExtensions().then(() => {
+      this.checkExtensionsConfig().then(async () => {
+        const loadPromises = this.extensionsSettings?.filter((setting) => this.isEnabled(setting.id)).map(
+          (setting) => this.load(setting.id).catch((e) => {
+            toastError("Extension could not be loaded: " + e.message);
+          })
+        ) || [];
+        await Promise.all(loadPromises);
+      });
+    });
+  }
+  async loadPersistedExternalExtensions() {
+    try {
+      const persisted = await appSettings.get(KEY_EXTERNAL_EXTENSIONS);
+      if (persisted && Array.isArray(persisted)) {
+        persisted.forEach((ext) => {
+          this.extensions[ext.id] = ext;
+        });
+        defaultLogger.debug(`Loaded ${persisted.length} persisted external extensions`);
+      }
+    } catch (error) {
+      defaultLogger.error(`Failed to load persisted external extensions: ${error}`);
+    }
+  }
+  async savePersistedExternalExtensions() {
+    try {
+      const externalExtensions = Object.values(this.extensions).filter((ext) => ext.external);
+      await appSettings.set(KEY_EXTERNAL_EXTENSIONS, externalExtensions);
+    } catch (error) {
+      defaultLogger.error(`Failed to save persisted external extensions: ${error}`);
+    }
+  }
+  async checkExtensionsConfig() {
+    if (!this.extensionsSettings) {
+      this.extensionsSettings = await appSettings.get(KEY_EXTENSIONS_CONFIG);
+      if (!this.extensionsSettings) {
+        await appSettings.set(KEY_EXTENSIONS_CONFIG, []);
+        this.extensionsSettings = await appSettings.get(KEY_EXTENSIONS_CONFIG);
+      }
+      publish(TOPIC_EXTENSIONS_CHANGED, this.extensionsSettings);
+    }
+  }
+  registerExtension(extension) {
+    this.extensions[extension.id] = extension;
+    if (extension.external) {
+      this.savePersistedExternalExtensions().catch((err) => {
+        defaultLogger.error(`Failed to persist external extension: ${err}`);
+      });
+    }
+    publish(TOPIC_EXTENSIONS_CHANGED, this.extensionsSettings);
+  }
+  /**
+   * Load an extension from a URL and register it.
+   * The module at the URL must export a default function that receives uiContext.
+   * The extension will register its contributions when loaded.
+   * 
+   * Supports:
+   * - Direct URLs (http/https)
+   * - esm.sh URLs
+   * - Source identifiers (npm packages, GitHub repos, JSR packages, PR packages)
+   *   Examples: 'react@18', 'gh/user/repo', 'jsr/@std/encoding@1.0.0', 'pr/owner/repo@commit'
+   * 
+   * @param url - URL or source identifier to the extension module
+   * @param extensionId - Optional extension ID. If not provided, generates one from the URL.
+   * @returns Promise that resolves to the extension ID when the extension is loaded
+   */
+  async loadExtensionFromUrl(url, extensionId) {
+    defaultLogger.info(`Loading extension from URL: ${url}...`);
+    try {
+      let finalUrl = url;
+      let extensionName = `Extension from ${url}`;
+      if (esmShService.isSourceIdentifier(url)) {
+        const packageName = esmShService.extractPackageName(url);
+        if (packageName) {
+          extensionName = `Extension: ${packageName}`;
+        }
+        finalUrl = esmShService.normalizeToEsmSh(url);
+        defaultLogger.debug(`Converted source identifier to esm.sh URL: ${url} -> ${finalUrl}`);
+      }
+      const id = extensionId || `url:${finalUrl}`;
+      if (this.isEnabled(id)) {
+        defaultLogger.info(`Extension from URL ${finalUrl} is already enabled`);
+        return id;
+      }
+      if (!this.extensions[id]) {
+        const extension = {
+          id,
+          name: extensionName,
+          description: `Extension loaded from: ${url}`,
+          url: finalUrl
+        };
+        this.registerExtension(extension);
+        defaultLogger.info(`Registered extension from URL: ${id}`);
+      }
+      this.enable(id, false);
+      defaultLogger.info(`Successfully enabled extension from URL: ${finalUrl}`);
+      return id;
+    } catch (error) {
+      defaultLogger.error(`Failed to load extension from URL ${url}: ${error}`);
+      throw error;
+    }
+  }
+  getExtensions() {
+    return Object.values(this.extensions);
+  }
+  isEnabled(extensionId) {
+    this.checkExtensionsConfig();
+    return !!this.extensionsSettings?.find((setting) => setting.id === extensionId && setting.enabled);
+  }
+  isLoaded(extensionId) {
+    return this.loadedExtensions.has(extensionId);
+  }
+  enable(extensionId, informUser = false) {
+    if (this.isEnabled(extensionId)) {
+      return;
+    }
+    defaultLogger.debug(`Loading extension: ${extensionId}`);
+    this.load(extensionId).then(() => {
+      this.updateEnablement(extensionId, true, informUser);
+    }).catch((_e) => {
+      defaultLogger.error(`Could not load extension: ${extensionId}: ${_e}`);
+    });
+  }
+  /**
+   * Loads an extension and all its dependencies.
+   * 
+   * Features:
+   * - Automatically loads all dependencies recursively before loading the extension
+   * - Ensures each extension is loaded only once (idempotent)
+   * - Dependencies are loaded in the order they are declared
+   * - If an extension is already being loaded, waits for that load to complete
+   * - Detects circular dependencies in the dependency chain
+   * 
+   * @param extensionId - The ID of the extension to load
+   * @param loadingChain - Internal parameter to track the dependency chain for circular detection
+   * @throws Error if the extension is not found or if a circular dependency is detected
+   * 
+   * @example
+   * ```typescript
+   * // This will automatically load @eclipse-lyra/extension-python-runtime first
+   * await extensionRegistry.load('@eclipse-lyra/extension-notebook')
+   * ```
+   */
+  async load(extensionId, loadingChain = []) {
+    if (this.loadedExtensions.has(extensionId)) {
+      return;
+    }
+    const existingPromise = this.loadingPromises.get(extensionId);
+    if (existingPromise) {
+      return existingPromise;
+    }
+    if (loadingChain.includes(extensionId)) {
+      const chain = [...loadingChain, extensionId].join(" → ");
+      throw new Error(`Circular dependency detected: ${chain}`);
+    }
+    const extension = this.extensions[extensionId];
+    if (!extension) {
+      throw new Error("Extension not found: " + extensionId);
+    }
+    const loadingPromise = (async () => {
+      try {
+        if (extension.dependencies && extension.dependencies.length > 0) {
+          defaultLogger.debug(`Loading dependencies for ${extensionId}: ${extension.dependencies.join(", ")}`);
+          const newChain = [...loadingChain, extensionId];
+          for (const depId of extension.dependencies) {
+            await this.load(depId, newChain);
+            if (!this.isEnabled(depId)) {
+              await this.updateEnablementAsync(depId, true, false);
+              defaultLogger.debug(`Auto-enabled dependency: ${depId}`);
+            }
+          }
+        }
+        const module = await taskService.runAsync("Loading extension: " + extension.name, async () => {
+          if (extension.loader) {
+            return extension.loader();
+          } else if (extension.url) {
+            let finalUrl = extension.url;
+            if (esmShService.isSourceIdentifier(extension.url)) {
+              finalUrl = esmShService.normalizeToEsmSh(extension.url);
+              defaultLogger.debug(`Normalized extension URL: ${extension.url} -> ${finalUrl}`);
+            }
+            return import(
+              /* @vite-ignore */
+              finalUrl
+            );
+          }
+        });
+        this.loadedExtensions.add(extensionId);
+        if (module?.default instanceof Function) {
+          defaultLogger.debug(`Executing extension function for: ${extensionId}`);
+          try {
+            module?.default(uiContext.getProxy());
+            defaultLogger.debug(`Extension function executed successfully: ${extensionId}`);
+          } catch (error) {
+            defaultLogger.error(`Error executing extension function for ${extensionId}: ${error}`);
+            throw error;
+          }
+        } else {
+          defaultLogger.warn(`Extension ${extensionId} does not export a default function`);
+        }
+        defaultLogger.debug(`Extension loaded: ${extensionId}`);
+      } catch (error) {
+        this.loadedExtensions.delete(extensionId);
+        throw error;
+      } finally {
+        this.loadingPromises.delete(extensionId);
+      }
+    })();
+    this.loadingPromises.set(extensionId, loadingPromise);
+    return loadingPromise;
+  }
+  disable(extensionId, informUser = false) {
+    if (!this.isEnabled(extensionId)) {
+      return;
+    }
+    this.updateEnablement(extensionId, false, informUser);
+  }
+  updateEnablement(extensionId, enabled, informUser) {
+    this.checkExtensionsConfig().then(() => {
+      const extension = this.extensionsSettings?.find((e) => e.id == extensionId);
+      if (extension) {
+        extension.enabled = enabled;
+      } else {
+        this.extensionsSettings?.push({ id: extensionId, enabled });
+      }
+      appSettings.set(KEY_EXTENSIONS_CONFIG, this.extensionsSettings).then(() => {
+        if (informUser) {
+          const extObj = this.extensions[extensionId];
+          if (enabled) {
+            toastInfo(extObj.name + " enabled.");
+          } else {
+            toastInfo(extObj.name + " disabled  - Please restart to take effect");
+          }
+        }
+        publish(TOPIC_EXTENSIONS_CHANGED, this.extensionsSettings);
+      });
+    });
+  }
+  async updateEnablementAsync(extensionId, enabled, informUser) {
+    await this.checkExtensionsConfig();
+    const extension = this.extensionsSettings?.find((e) => e.id == extensionId);
+    if (extension) {
+      extension.enabled = enabled;
+    } else {
+      this.extensionsSettings?.push({ id: extensionId, enabled });
+    }
+    await appSettings.set(KEY_EXTENSIONS_CONFIG, this.extensionsSettings);
+    if (informUser) {
+      const extObj = this.extensions[extensionId];
+      if (enabled) {
+        toastInfo(extObj.name + " enabled.");
+      } else {
+        toastInfo(extObj.name + " disabled  - Please restart to take effect");
+      }
+    }
+    publish(TOPIC_EXTENSIONS_CHANGED, this.extensionsSettings);
+  }
+}
+defaultLogger.debug("ExtensionRegistry initializing...");
+const extensionRegistry = new ExtensionRegistry();
+rootContext.put("extensionRegistry", extensionRegistry);
+defaultLogger.debug("ExtensionRegistry initialized");
+const MODIFIER_FIELDS = ["alt", "ctrl", "meta", "shift"];
+const MODIFIER_ALIASES = {
+  CTRL: "ctrl",
+  CONTROL: "ctrl",
+  ALT: "alt",
+  OPTION: "alt",
+  SHIFT: "shift",
+  META: "meta",
+  CMD: "meta",
+  COMMAND: "meta",
+  WIN: "meta",
+  WINDOWS: "meta"
+};
+const MODIFIER_DISPLAY = {
+  ctrl: "Ctrl",
+  alt: "Alt",
+  shift: "Shift",
+  meta: "Cmd"
+};
+const KEY_NORMALIZE = {
+  SPACE: " ",
+  ESC: "ESCAPE",
+  RETURN: "ENTER",
+  LEFT: "ARROWLEFT",
+  RIGHT: "ARROWRIGHT",
+  UP: "ARROWUP",
+  DOWN: "ARROWDOWN",
+  DEL: "DELETE",
+  INS: "INSERT",
+  PAGEUP: "PAGEUP",
+  PAGEDOWN: "PAGEDOWN"
+};
+const KNOWN_MODIFIERS = new Set(Object.keys(MODIFIER_ALIASES));
+function normalizeKey(key) {
+  return KEY_NORMALIZE[key] ?? key;
+}
+class KeyBindingManager {
+  constructor() {
+    this.bindings = /* @__PURE__ */ new Map();
+    this.enabled = true;
+    document.addEventListener("keydown", this.handleKeyDown.bind(this), true);
+    this.registerExistingCommandBindings();
+    subscribe(TOPIC_COMMAND_REGISTERED, (command) => {
+      if (command.keyBinding) {
+        this.registerKeyBinding(command.id, command.keyBinding);
+      }
+    });
+  }
+  registerExistingCommandBindings() {
+    const commands = commandRegistry.listCommands();
+    Object.values(commands).forEach((command) => {
+      if (command.keyBinding) {
+        this.registerKeyBinding(command.id, command.keyBinding);
+      }
+    });
+  }
+  /**
+   * Parse a key binding string like "CTRL+SHIFT+P" or "ALT+S"
+   */
+  parseKeyBinding(keyBindingString) {
+    if (!keyBindingString || keyBindingString.trim() === "") {
+      return null;
+    }
+    const parts = keyBindingString.toUpperCase().split("+").map((p) => p.trim());
+    if (parts.length === 0) {
+      return null;
+    }
+    const key = parts[parts.length - 1];
+    const modifiers = parts.slice(0, -1);
+    if (parts.length === 1 && KNOWN_MODIFIERS.has(key)) {
+      return null;
+    }
+    const binding = { ctrl: false, alt: false, shift: false, meta: false };
+    for (const modifier of modifiers) {
+      const field = MODIFIER_ALIASES[modifier];
+      if (field === void 0) return null;
+      binding[field] = true;
+    }
+    binding.key = normalizeKey(key);
+    return binding;
+  }
+  /**
+   * Create a unique key for a binding
+   */
+  getBindingKey(binding) {
+    const parts = [...MODIFIER_FIELDS.filter((f) => binding[f]), binding.key.toUpperCase()];
+    return parts.join("+");
+  }
+  /**
+   * Register a key binding for a command
+   */
+  registerKeyBinding(commandId, keyBindingString) {
+    const binding = this.parseKeyBinding(keyBindingString);
+    if (!binding) {
+      defaultLogger.error(`Invalid key binding: ${keyBindingString}`);
+      return false;
+    }
+    binding.commandId = commandId;
+    const bindingKey = this.getBindingKey(binding);
+    if (!this.bindings.has(bindingKey)) {
+      this.bindings.set(bindingKey, []);
+    }
+    const existing = this.bindings.get(bindingKey);
+    const sameCommand = existing.find((b) => b.commandId === commandId);
+    if (sameCommand) {
+      defaultLogger.error(`Key binding ${keyBindingString} already registered for command ${commandId}`);
+      return false;
+    }
+    const otherCommand = existing.find((b) => b.commandId !== commandId);
+    if (otherCommand) {
+      defaultLogger.warn(`Key binding ${keyBindingString} already used by command ${otherCommand.commandId}; refusing for ${commandId}`);
+      return false;
+    }
+    existing.push(binding);
+    defaultLogger.debug(`Key binding registered: ${keyBindingString} -> ${commandId}`);
+    return true;
+  }
+  /**
+   * Unregister a key binding
+   */
+  unregisterKeyBinding(commandId, keyBindingString) {
+    if (keyBindingString) {
+      const binding = this.parseKeyBinding(keyBindingString);
+      if (binding) {
+        const bindingKey = this.getBindingKey(binding);
+        const bindings = this.bindings.get(bindingKey);
+        if (bindings) {
+          const filtered = bindings.filter((b) => b.commandId !== commandId);
+          if (filtered.length === 0) {
+            this.bindings.delete(bindingKey);
+          } else {
+            this.bindings.set(bindingKey, filtered);
+          }
+        }
+      }
+    } else {
+      for (const [key, bindings] of this.bindings.entries()) {
+        const filtered = bindings.filter((b) => b.commandId !== commandId);
+        if (filtered.length === 0) {
+          this.bindings.delete(key);
+        } else {
+          this.bindings.set(key, filtered);
+        }
+      }
+    }
+  }
+  /**
+   * Get all key bindings for a command
+   */
+  getKeyBindingsForCommand(commandId) {
+    const result = [];
+    for (const bindings of this.bindings.values()) {
+      for (const binding of bindings) {
+        if (binding.commandId === commandId) {
+          result.push(this.formatKeyBinding(binding));
+        }
+      }
+    }
+    return result.sort();
+  }
+  /**
+   * Format a key binding for display
+   */
+  formatKeyBinding(binding) {
+    const parts = MODIFIER_FIELDS.filter((f) => binding[f]).map((f) => MODIFIER_DISPLAY[f]);
+    const key = binding.key.length === 1 ? binding.key.toUpperCase() : binding.key.charAt(0).toUpperCase() + binding.key.slice(1).toLowerCase();
+    parts.push(key);
+    return parts.join("+");
+  }
+  /**
+   * Handle keyboard events
+   */
+  handleKeyDown(event) {
+    if (!this.enabled) {
+      return;
+    }
+    const eventBinding = {
+      commandId: "",
+      key: normalizeKey(event.key.toUpperCase()),
+      ctrl: event.ctrlKey,
+      alt: event.altKey,
+      shift: event.shiftKey,
+      meta: event.metaKey
+    };
+    const bindingKey = this.getBindingKey(eventBinding);
+    const bindings = this.bindings.get(bindingKey);
+    if (bindings && bindings.length > 0) {
+      const binding = bindings[0];
+      try {
+        event.preventDefault();
+        event.stopPropagation();
+        const context = commandRegistry.createExecutionContext({});
+        commandRegistry.execute(binding.commandId, context);
+        defaultLogger.debug(`Executed command via key binding: ${binding.commandId}`);
+      } catch (error) {
+        defaultLogger.error(`Failed to execute command ${binding.commandId}: ${error.message}`);
+      }
+    }
+  }
+  /**
+   * Enable or disable key binding handling
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+  }
+  /**
+   * Check if key binding handling is enabled
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+  /**
+   * Get all registered key bindings
+   */
+  getAllBindings() {
+    const copy = /* @__PURE__ */ new Map();
+    for (const [key, bindings] of this.bindings) {
+      copy.set(key, [...bindings]);
+    }
+    return copy;
+  }
+  /**
+   * Clear all key bindings
+   */
+  clearAll() {
+    this.bindings.clear();
+  }
+}
+const keyBindingManager = new KeyBindingManager();
+rootContext.put("keyBindingManager", keyBindingManager);
+class LyraElement extends LyraWidget {
+  constructor() {
+    super(...arguments);
+    this.settingsKey = null;
+  }
+  /**
+   * Builds a unique DOM tree path for this element.
+   * Uses id attribute if available, otherwise builds a path based on tag names and indices.
+   * Useful for generating unique settings keys.
+   * 
+   * @returns A string representing the DOM path, or null if path cannot be determined
+   */
+  buildDOMTreePath() {
+    const pathParts = [];
+    let current = this;
+    while (current && current !== document.body && current !== document.documentElement) {
+      const id = current.getAttribute("id");
+      if (id) {
+        pathParts.unshift(`#${id}`);
+        break;
+      }
+      const tagName = current.tagName.toLowerCase();
+      const parent = current.parentElement;
+      if (!parent) {
+        break;
+      }
+      const siblings = Array.from(parent.children).filter(
+        (child) => child.tagName.toLowerCase() === tagName
+      );
+      const index = siblings.indexOf(current);
+      if (index >= 0) {
+        pathParts.unshift(`${tagName}:${index}`);
+      } else {
+        pathParts.unshift(tagName);
+      }
+      current = parent;
+    }
+    return pathParts.length > 0 ? pathParts.join(" > ") : null;
+  }
+  /**
+   * Initializes the settings key for this element using the element's tag name.
+   * Called automatically on first access via getDialogSetting() or setDialogSetting().
+   */
+  initializeSettingsKey() {
+    if (!this.settingsKey) {
+      const prefix = this.tagName.toLowerCase();
+      const id = this.getAttribute("id");
+      if (id) {
+        this.settingsKey = `${prefix}:${id}`;
+        return;
+      }
+      const path = this.buildDOMTreePath();
+      if (path) {
+        this.settingsKey = `${prefix}:${path}`;
+      }
+    }
+  }
+  /**
+   * Gets a dialog setting value for this element.
+   * Automatically initializes the settings key on first access if not already set.
+   * 
+   * @returns The persisted setting value, or undefined if not found
+   */
+  async getDialogSetting() {
+    this.initializeSettingsKey();
+    if (!this.settingsKey) {
+      return void 0;
+    }
+    return await appSettings.getDialogSetting(this.settingsKey);
+  }
+  /**
+   * Saves a dialog setting value for this element.
+   * Automatically initializes the settings key on first access if not already set.
+   * 
+   * @param value - The value to persist
+   */
+  async setDialogSetting(value) {
+    this.initializeSettingsKey();
+    if (!this.settingsKey) {
+      return;
+    }
+    await appSettings.setDialogSetting(this.settingsKey, value);
+  }
+}
+const _LyraDialogContent = class _LyraDialogContent extends LyraElement {
+  dispose() {
+  }
+  getResult() {
+    return void 0;
+  }
+  renderMessage(message, markdown = false) {
+    if (markdown) {
+      const htmlContent = marked.parse(message, { async: false });
+      return html`<div class="dialog-message" style="white-space: normal;">${unsafeHTML(htmlContent)}</div>`;
+    }
+    return html`<div class="dialog-message" style="white-space: pre-line;">${message}</div>`;
+  }
+};
+_LyraDialogContent.styles = [
+  css`
+            .dialog-message {
+                margin-bottom: 0.5rem;
+                color: var(--wa-color-text-normal);
+            }
+        `
+];
+let LyraDialogContent = _LyraDialogContent;
+const logger$1 = createLogger("DialogService");
+const DIALOG_CONTRIBUTION_TARGET = "dialogs";
+const OK_BUTTON = {
+  id: "ok",
+  label: "OK",
+  variant: "primary"
+};
+const CANCEL_BUTTON = {
+  id: "cancel",
+  label: "Cancel",
+  variant: "default"
+};
+const CLOSE_BUTTON = {
+  id: "close",
+  label: "Close",
+  variant: "default"
+};
+let dialogContainer = null;
+function getDialogContainer() {
+  if (!dialogContainer || !document.body.contains(dialogContainer)) {
+    dialogContainer = document.createElement("div");
+    dialogContainer.id = "global-dialog-container";
+    document.body.appendChild(dialogContainer);
+  }
+  return dialogContainer;
+}
+class DialogService {
+  constructor() {
+    this.contributions = /* @__PURE__ */ new Map();
+    this.loadContributions();
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (event.target === DIALOG_CONTRIBUTION_TARGET) {
+        this.loadContributions();
+      }
+    });
+  }
+  loadContributions() {
+    const contributions = contributionRegistry.getContributions(DIALOG_CONTRIBUTION_TARGET);
+    this.contributions.clear();
+    for (const contribution of contributions) {
+      if (!contribution.id) {
+        logger$1.warn("Dialog contribution missing id, skipping");
+        continue;
+      }
+      if (!contribution.component) {
+        logger$1.warn(`Dialog contribution "${contribution.id}" has no component function, skipping`);
+        continue;
+      }
+      if (!contribution.onButton) {
+        logger$1.warn(`Dialog contribution "${contribution.id}" has no onButton callback, skipping`);
+        continue;
+      }
+      this.contributions.set(contribution.id, contribution);
+      logger$1.debug(`Loaded dialog contribution: ${contribution.id}`);
+    }
+    logger$1.info(`Loaded ${this.contributions.size} dialog contributions`);
+  }
+  async open(dialogId, state2) {
+    const contribution = this.contributions.get(dialogId);
+    if (!contribution) {
+      logger$1.error(`Dialog "${dialogId}" not found`);
+      throw new Error(`Dialog "${dialogId}" not found`);
+    }
+    return new Promise((resolve) => {
+      const container = getDialogContainer();
+      let isOpen = true;
+      let dialogContentElement = null;
+      const cleanup = async () => {
+        if (!isOpen) return;
+        isOpen = false;
+        if (dialogContentElement) {
+          try {
+            await dialogContentElement.dispose();
+          } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            logger$1.error(`Error disposing dialog content for "${dialogId}": ${errorMessage}`);
+          }
+        }
+        try {
+          const result = dialogContentElement ? dialogContentElement.getResult() : void 0;
+          await contribution.onButton("close", result, stateWithClose);
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          logger$1.error(`Error executing close callback for dialog "${dialogId}": ${errorMessage}`);
+        }
+        render(html``, container);
+        resolve();
+      };
+      const handleButtonClick = async (buttonId) => {
+        try {
+          const result = dialogContentElement ? dialogContentElement.getResult() : void 0;
+          const shouldClose = await contribution.onButton(buttonId, result, stateWithClose);
+          if (shouldClose !== false) {
+            cleanup();
+          }
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          logger$1.error(`Error executing button callback for dialog "${dialogId}": ${errorMessage}`);
+          cleanup();
+        }
+      };
+      const buttons = contribution.buttons && contribution.buttons.length > 0 ? contribution.buttons : [OK_BUTTON];
+      if (state2 && typeof state2 === "object") {
+        state2.close = cleanup;
+      }
+      const stateWithClose = { ...state2, close: cleanup };
+      const template = html`
+                <wa-dialog label="${contribution.label || dialogId}" open @wa-request-close=${cleanup}>
+                    <style>
+                        .dialog-service-content {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 1rem;
+                            padding: 1rem;
+                            min-width: 400px;
+                        }
+                        
+                        .dialog-service-footer {
+                            display: flex;
+                            gap: 0.5rem;
+                            justify-content: flex-end;
+                            margin-top: 1rem;
+                            padding-top: 1rem;
+                            border-top: 1px solid var(--wa-color-neutral-20);
+                        }
+
+                        :host-context(.wa-light) .dialog-service-footer {
+                            border-top-color: var(--wa-color-neutral-80);
+                        }
+                    </style>
+                    
+                    <div class="dialog-service-content" 
+                         @dialog-ok=${() => {
+        const okButton = buttons.find((b) => b.id === "ok");
+        if (okButton) {
+          handleButtonClick(okButton.id);
+        }
+      }}
+                         @dialog-cancel=${() => {
+        const cancelButton = buttons.find((b) => b.id === "cancel");
+        if (cancelButton) {
+          handleButtonClick(cancelButton.id);
+        } else {
+          cleanup();
+        }
+      }}>
+                        ${contribution.component(state2)}
+                        
+                        <div class="dialog-service-footer">
+                            ${buttons.map((button) => html`
+                                <wa-button 
+                                    variant="${button.variant || "default"}"
+                                    ?disabled=${button.disabled}
+                                    @click=${() => handleButtonClick(button.id)}
+                                >
+                                    ${button.label}
+                                </wa-button>
+                            `)}
+                        </div>
+                    </div>
+                </wa-dialog>
+            `;
+      render(template, container);
+      (async () => {
+        const allElements = Array.from(container.querySelectorAll("*"));
+        for (const element of allElements) {
+          if (element instanceof LyraDialogContent) {
+            await element.updateComplete;
+            dialogContentElement = element;
+            break;
+          }
+        }
+      })();
+    });
+  }
+  getDialogIds() {
+    return Array.from(this.contributions.keys());
+  }
+  hasDialog(dialogId) {
+    return this.contributions.has(dialogId);
+  }
+}
+const dialogService = new DialogService();
+rootContext.put("dialogService", dialogService);
+class LyraContainer extends LyraElement {
+}
+var __defProp$9 = Object.defineProperty;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$9(target, key, result);
+  return result;
+};
+class LyraPart extends LyraContainer {
+  constructor() {
+    super(...arguments);
+    this.dirty = false;
+    this.isEditor = false;
+  }
+  getCommandStack() {
+    return this.commandStack;
+  }
+  /**
+   * Override this method to provide toolbar content for this part.
+   * This is a lightweight alternative to registering toolbar contributions
+   * for actions that are scoped to this part instance.
+   * 
+   * IMPORTANT: Event handlers MUST use arrow functions to preserve the component's 'this' context.
+   * The toolbar template is rendered in a different component (lyra-toolbar), so direct method 
+   * references lose their binding.
+   * 
+   * ✅ Correct:
+   *   @click=${() => this.myMethod()}
+   *   @click=${(e) => this.handleClick(e)}
+   * 
+   * ❌ Wrong (this will be bound to the toolbar, not your component):
+   *   @click=${this.myMethod}
+   * 
+   * Example:
+   * ```typescript
+   * protected renderToolbar() {
+   *     return html`
+   *         <wa-button @click=${() => this.save()} title="Save">
+   *             <wa-icon name="save"></wa-icon>
+   *         </wa-button>
+   *     `;
+   * }
+   * ```
+   * 
+   * @returns TemplateResult with toolbar items, or nothing if no toolbar needed
+   */
+  renderToolbar() {
+    return nothing;
+  }
+  /**
+   * Call this method to update the toolbar when the component's state changes.
+   * This triggers a re-render of the toolbar with the latest content from renderToolbar().
+   */
+  updateToolbar() {
+    this.dispatchEvent(new CustomEvent("part-toolbar-changed", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Override this method to provide context menu content for this part.
+   * This is a lightweight alternative to registering context menu contributions
+   * for actions that are scoped to this part instance.
+   * 
+   * IMPORTANT: Event handlers MUST use arrow functions to preserve the component's 'this' context.
+   * The context menu is rendered in a different component (contextmenu), so direct method 
+   * references lose their binding.
+   * 
+   * ✅ Correct:
+   *   @click=${() => this.myMethod()}
+   *   @click=${(e) => this.handleClick(e)}
+   * 
+   * ❌ Wrong (this will be bound to the context menu, not your component):
+   *   @click=${this.myMethod}
+   * 
+   * Example:
+   * ```typescript
+   * protected renderContextMenu() {
+   *     return html`
+   *         <wa-dropdown-item @click=${() => this.open()}>
+   *             <wa-icon name="folder-open"></wa-icon>
+   *             Open
+   *         </wa-dropdown-item>
+   *         <wa-divider></wa-divider>
+   *         <wa-dropdown-item @click=${() => this.delete()}>
+   *             <wa-icon name="trash"></wa-icon>
+   *             Delete
+   *         </wa-dropdown-item>
+   *     `;
+   * }
+   * ```
+   * 
+   * @returns TemplateResult with context menu items, or nothing if no context menu needed
+   */
+  renderContextMenu() {
+    return nothing;
+  }
+  /**
+   * Call this method to update the context menu when the component's state changes.
+   * This triggers a re-render of the context menu with the latest content from renderContextMenu().
+   */
+  updateContextMenu() {
+    this.dispatchEvent(new CustomEvent("part-contextmenu-changed", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("dirty")) {
+      const dirty = _changedProperties.get("dirty");
+      if (dirty !== void 0) {
+        this.dispatchEvent(new CustomEvent("dirty", { detail: this.dirty, bubbles: true }));
+      }
+    }
+  }
+  doClose() {
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  close() {
+    this.doClose();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  save() {
+  }
+  isDirty() {
+    return this.dirty;
+  }
+  markDirty(dirty) {
+    this.dirty = dirty;
+    partDirtySignal.set(null);
+    partDirtySignal.set(this);
+    activePartSignal.set(null);
+    activePartSignal.set(this);
+  }
+}
+__decorateClass$9([
+  property()
+], LyraPart.prototype, "dirty");
+const logger = createLogger("AppLoader");
+function getErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function extractLastPathSegment(urlString) {
+  try {
+    const url = new URL(urlString);
+    const pathSegments = url.pathname.split("/").filter(Boolean);
+    return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : void 0;
+  } catch {
+    const pathSegments = urlString.split("/").filter(Boolean);
+    return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : void 0;
+  }
+}
+function extractAppIdFromPath() {
+  const pathname = window.location.pathname;
+  const pathSegments = pathname.split("/").filter(Boolean);
+  if (pathSegments.length === 0) {
+    return void 0;
+  }
+  const firstSegment = pathSegments[0];
+  if (!firstSegment || firstSegment === "index.html" || firstSegment.endsWith(".html")) {
+    return void 0;
+  }
+  return firstSegment;
+}
+const _AppLoaderService = class _AppLoaderService {
+  constructor() {
+    this.apps = /* @__PURE__ */ new Map();
+    this.started = false;
+    this.container = document.body;
+    this.systemRequiredExtensions = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Register an application with the framework.
+   * Optionally starts the apploader automatically after registration.
+   * 
+   * @param app - Application definition
+   * @param options - Optional configuration for registration and auto-starting
+   */
+  registerApp(app, options) {
+    if (this.apps.has(app.id)) {
+      logger.warn(`App '${app.id}' is already registered. Overwriting.`);
+    }
+    this.apps.set(app.id, app);
+    logger.info(`Registered app: ${app.name} (${app.id}) v${app.version}`);
+    if (options?.defaultAppId) {
+      this.defaultAppId = options.defaultAppId;
+    }
+    if (options?.container) {
+      this.container = options.container;
+    }
+    if (options?.autoStart && !this.started) {
+      this.start();
+    }
+  }
+  registerSystemRequiredExtension(extensionId) {
+    this.systemRequiredExtensions.add(extensionId);
+  }
+  /**
+   * Load an application definition from a URL.
+   * The module at the URL must export an AppDefinition as the default export.
+   * 
+   * @param url - URL to the app definition module
+   * @returns Promise that resolves to the loaded AppDefinition
+   */
+  async loadAppFromUrl(url) {
+    logger.info(`Loading app from URL: ${url}...`);
+    try {
+      const module = await import(
+        /* @vite-ignore */
+        url
+      );
+      if (!module.default) {
+        throw new Error(`Module at ${url} does not have a default export`);
+      }
+      const app = module.default;
+      if (!app.id || !app.name || !app.version) {
+        throw new Error(`Module at ${url} does not export a valid AppDefinition`);
+      }
+      logger.info(`Successfully loaded app definition from URL: ${app.name} (${app.id})`);
+      return app;
+    } catch (error) {
+      logger.error(`Failed to load app from URL ${url}: ${getErrorMessage(error)}`);
+      throw error;
+    }
+  }
+  /**
+   * Start the application loader.
+   * Checks URL parameters for app=URL, loads that extension or app if found.
+   * URL parameter has higher precedence than defaultAppId.
+   * Then loads the default app or first registered app.
+   * This method is idempotent - calling it multiple times only starts once.
+   */
+  async start() {
+    if (this.started) {
+      logger.debug("AppLoader already started");
+      return;
+    }
+    this.started = true;
+    logger.info("Starting AppLoader...");
+    const urlParams = new URLSearchParams(window.location.search);
+    const appUrl = urlParams.get("app");
+    const appIdFromUrl = urlParams.get("appId");
+    const appIdFromPath = extractAppIdFromPath();
+    const appsBeforeExtension = this.apps.size;
+    let appIdFromAppUrl;
+    if (appUrl) {
+      appIdFromAppUrl = extractLastPathSegment(appUrl);
+      if (appIdFromAppUrl) {
+        logger.info(`Extracted app ID from URL path: ${appIdFromAppUrl}`);
+      }
+    }
+    if (appIdFromPath) {
+      logger.info(`Extracted app ID from current page path: ${appIdFromPath}`);
+    }
+    if (appUrl) {
+      try {
+        logger.info(`URL parameter 'app' found: ${appUrl}, attempting to load extension or app`);
+        try {
+          await extensionRegistry.loadExtensionFromUrl(appUrl);
+          logger.info(`Successfully loaded extension from URL: ${appUrl}`);
+        } catch (extensionError) {
+          logger.info(`Failed to load as extension, trying as app definition: ${getErrorMessage(extensionError)}`);
+          try {
+            const app = await this.loadAppFromUrl(appUrl);
+            this.registerApp(app);
+            await this.loadApp(app.id, this.container);
+            logger.info(`Successfully loaded app from URL: ${appUrl}`);
+            return;
+          } catch (appError) {
+            logger.error(`Failed to load from URL as both extension and app: ${getErrorMessage(appError)}`);
+            throw appError;
+          }
+        }
+      } catch (error) {
+        logger.error(`Failed to load from URL parameter, falling back to default app: ${getErrorMessage(error)}`);
+      }
+    }
+    const appToLoad = await this.selectAppToLoad({
+      appIdFromUrl,
+      appIdFromPath,
+      appIdFromAppUrl,
+      appsBeforeExtension
+    });
+    if (!appToLoad) {
+      throw new Error("No apps registered");
+    }
+    await this.loadApp(appToLoad, this.container);
+  }
+  /**
+   * Load and initialize an application.
+   * 
+   * @param appId - Application identifier (must be already registered)
+   * @param container - Optional DOM element to render into (if provided, auto-renders after loading)
+   * @returns Promise that resolves when app is initialized and rendered
+   */
+  async loadApp(appId, container) {
+    const app = this.apps.get(appId);
+    if (!app) {
+      throw new Error(`App '${appId}' not found. Make sure it's registered.`);
+    }
+    logger.info(`Loading app: ${app.name}...`);
+    if (this.currentApp) {
+      logger.info(`Disposing current app: ${this.currentApp.name}`);
+      if (this.currentApp.dispose) {
+        await this.currentApp.dispose();
+      }
+      if (this.currentApp.extensions && this.currentApp.extensions.length > 0) {
+        logger.info(`Disabling ${this.currentApp.extensions.length} extensions...`);
+        this.currentApp.extensions.forEach((extId) => {
+          extensionRegistry.disable(extId);
+        });
+      }
+    }
+    if (app.contributions) {
+      logger.info("Registering app contributions...");
+      if (app.contributions.ui) {
+        app.contributions.ui.forEach((contribution) => {
+          const target = contribution.target;
+          if (target) {
+            contributionRegistry.registerContribution(target, contribution);
+          }
+        });
+        logger.info(`Registered ${app.contributions.ui.length} UI contributions`);
+      }
+      if (app.contributions.extensions) {
+        app.contributions.extensions.forEach((extension) => {
+          extensionRegistry.registerExtension(extension);
+        });
+        logger.info(`Registered ${app.contributions.extensions.length} app extensions`);
+      }
+    }
+    const extensionsSet = new Set(app.extensions || []);
+    this.systemRequiredExtensions.forEach((extId) => extensionsSet.add(extId));
+    app.extensions = Array.from(extensionsSet);
+    if (app.extensions.length > 0) {
+      logger.info(`Enabling ${app.extensions.length} extensions...`);
+      app.extensions.forEach((extId) => {
+        extensionRegistry.enable(extId);
+      });
+    }
+    if (app.initialize) {
+      logger.info(`Initializing ${app.name}...`);
+      await app.initialize();
+    }
+    this.currentApp = app;
+    logger.info(`App ${app.name} loaded successfully`);
+    this.updateDocumentMetadata(app);
+    if (container) {
+      this.renderApp(container);
+    }
+    window.dispatchEvent(new CustomEvent("app-loaded", { detail: { appId: app.id } }));
+  }
+  /**
+   * Updates document title and favicon from app metadata
+   */
+  updateDocumentMetadata(app) {
+    document.title = app.name;
+    if (app.metadata?.favicon) {
+      const faviconPath = app.metadata.favicon;
+      let link = document.querySelector("link[rel*='icon']");
+      if (!link) {
+        link = document.createElement("link");
+        link.rel = "icon";
+        document.head.appendChild(link);
+      }
+      link.type = "image/svg+xml";
+      link.href = faviconPath;
+    }
+  }
+  /**
+   * Render the current application to the DOM.
+   * 
+   * @param container - DOM element to render into
+   */
+  renderApp(container) {
+    if (!this.currentApp) {
+      throw new Error("No app loaded. Call loadApp() first.");
+    }
+    const r = this.currentApp.render;
+    if (typeof r === "string") {
+      const el = document.createElement(r);
+      container.innerHTML = "";
+      container.appendChild(el);
+    } else if (r && typeof r === "object" && "tag" in r) {
+      const el = document.createElement(r.tag);
+      for (const [key, value] of Object.entries(r.attributes ?? {})) {
+        el.setAttribute(key, value);
+      }
+      container.innerHTML = "";
+      container.appendChild(el);
+    } else if (typeof r === "function") {
+      const template = r();
+      render(template, container);
+    } else {
+      render(html`<lyra-standard-layout></lyra-standard-layout>`, container);
+    }
+    logger.info(`Rendered ${this.currentApp.name}`);
+  }
+  /**
+   * Get the currently loaded application.
+   */
+  getCurrentApp() {
+    return this.currentApp;
+  }
+  /**
+   * Get all registered applications.
+   */
+  getRegisteredApps() {
+    return Array.from(this.apps.values());
+  }
+  /**
+   * Get the preferred app ID from settings.
+   */
+  async getPreferredAppId() {
+    try {
+      return await appSettings.get(_AppLoaderService.PREFERRED_APP_KEY);
+    } catch (error) {
+      logger.debug(`Failed to get preferred app ID from settings: ${getErrorMessage(error)}`);
+      return void 0;
+    }
+  }
+  /**
+   * Set the preferred app ID and persist it to settings.
+   */
+  async setPreferredAppId(appId) {
+    if (!this.apps.has(appId)) {
+      throw new Error(`App '${appId}' not found. Make sure it's registered.`);
+    }
+    try {
+      await appSettings.set(_AppLoaderService.PREFERRED_APP_KEY, appId);
+      this.defaultAppId = appId;
+      logger.info(`Set preferred app to: ${appId}`);
+    } catch (error) {
+      logger.error(`Failed to persist preferred app ID: ${getErrorMessage(error)}`);
+      throw error;
+    }
+  }
+  /**
+   * Select which app to load based on priority:
+   * 1. appId URL parameter (?appId=...)
+   * 2. App ID from current page URL path (/geospace)
+   * 3. App ID extracted from app URL parameter (?app=...)
+   * 4. App registered by extension
+   * 5. Preferred app ID from settings
+   * 6. Default app ID
+   * 7. First registered app
+   */
+  async selectAppToLoad(options) {
+    const { appIdFromUrl, appIdFromPath, appIdFromAppUrl, appsBeforeExtension } = options;
+    if (appIdFromUrl) {
+      if (this.apps.has(appIdFromUrl)) {
+        logger.info(`Loading app specified by URL parameter 'appId': ${appIdFromUrl}`);
+        return appIdFromUrl;
+      }
+      logger.warn(`App ID '${appIdFromUrl}' from URL parameter not found`);
+    }
+    if (appIdFromPath) {
+      if (this.apps.has(appIdFromPath)) {
+        logger.info(`Loading app from URL path: ${appIdFromPath}`);
+        return appIdFromPath;
+      }
+      logger.debug(`App ID '${appIdFromPath}' from URL path not found, continuing search`);
+    }
+    if (appIdFromAppUrl) {
+      if (this.apps.has(appIdFromAppUrl)) {
+        logger.info(`Loading app using ID extracted from app URL path: ${appIdFromAppUrl}`);
+        return appIdFromAppUrl;
+      }
+    }
+    if (this.apps.size > appsBeforeExtension) {
+      const newlyRegisteredApps = Array.from(this.apps.values()).slice(appsBeforeExtension);
+      if (newlyRegisteredApps.length > 0) {
+        const app = newlyRegisteredApps[0];
+        logger.info(`Loading app registered by extension: ${app.name} (${app.id})`);
+        return app.id;
+      }
+    }
+    const preferredAppId = await this.getPreferredAppId();
+    if (preferredAppId && this.apps.has(preferredAppId)) {
+      logger.info(`Loading preferred app from settings: ${preferredAppId}`);
+      return preferredAppId;
+    }
+    if (this.defaultAppId) {
+      if (this.apps.has(this.defaultAppId)) {
+        return this.defaultAppId;
+      }
+      logger.warn(`Default app '${this.defaultAppId}' not found`);
+    }
+    const registeredApps = this.getRegisteredApps();
+    if (registeredApps.length > 0) {
+      const app = registeredApps[0];
+      logger.info(`Loading first registered app: ${app.name} (${app.id})`);
+      return app.id;
+    }
+    return void 0;
+  }
+};
+_AppLoaderService.PREFERRED_APP_KEY = "preferredAppId";
+let AppLoaderService = _AppLoaderService;
+const appLoaderService = new AppLoaderService();
+rootContext.put("appLoaderService", appLoaderService);
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+let LyraPromptDialogContent = class extends LyraDialogContent {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.defaultValue = "";
+    this.markdown = false;
+    this.inputValue = "";
+  }
+  async firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.inputValue = this.defaultValue;
+    await this.updateComplete;
+    const input = this.shadowRoot?.querySelector("wa-input");
+    if (input) {
+      const inputEl = input.shadowRoot?.querySelector("input");
+      if (inputEl) {
+        inputEl.focus();
+        inputEl.select();
+      }
+    }
+  }
+  getResult() {
+    return this.inputValue;
+  }
+  handleInput(e) {
+    this.inputValue = e.target.value;
+  }
+  handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent("dialog-ok", { bubbles: true, composed: true }));
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent("dialog-cancel", { bubbles: true, composed: true }));
+    }
+  }
+  render() {
+    return html`
+            ${this.renderMessage(this.message, this.markdown)}
+            <wa-input
+                value="${this.inputValue}"
+                @input=${this.handleInput}
+                @keydown=${this.handleKeyDown}
+                autofocus
+            ></wa-input>
+        `;
+  }
+};
+LyraPromptDialogContent.styles = [
+  ...LyraDialogContent.styles,
+  css`
+            wa-input {
+                width: 100%;
+            }
+        `
+];
+__decorateClass$8([
+  property({ type: String })
+], LyraPromptDialogContent.prototype, "message", 2);
+__decorateClass$8([
+  property({ type: String, attribute: "default-value" })
+], LyraPromptDialogContent.prototype, "defaultValue", 2);
+__decorateClass$8([
+  property({ type: Boolean })
+], LyraPromptDialogContent.prototype, "markdown", 2);
+__decorateClass$8([
+  state()
+], LyraPromptDialogContent.prototype, "inputValue", 2);
+LyraPromptDialogContent = __decorateClass$8([
+  customElement("lyra-prompt-dialog-content")
+], LyraPromptDialogContent);
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+  id: "prompt",
+  label: "Input",
+  buttons: [OK_BUTTON, CANCEL_BUTTON],
+  component: (state2) => {
+    if (!state2) {
+      return html`<div>Error: No prompt dialog state</div>`;
+    }
+    return html`
+            <lyra-prompt-dialog-content 
+                .message="${state2.message}"
+                .defaultValue="${state2.defaultValue}"
+                .markdown="${state2.markdown}"
+            ></lyra-prompt-dialog-content>
+        `;
+  },
+  onButton: async (id, result, state2) => {
+    if (!state2) {
+      return true;
+    }
+    if (id === "ok") {
+      state2.resolve(result || "");
+    } else {
+      state2.resolve(null);
+    }
+    return true;
+  }
+});
+async function promptDialog(message, defaultValue = "", markdown = false) {
+  return new Promise((resolve) => {
+    dialogService.open("prompt", {
+      message,
+      defaultValue,
+      markdown,
+      resolve
+    });
+  });
+}
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+let LyraInfoDialogContent = class extends LyraDialogContent {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.markdown = false;
+  }
+  render() {
+    return html`
+            ${this.renderMessage(this.message, this.markdown)}
+        `;
+  }
+};
+__decorateClass$7([
+  property({ type: String })
+], LyraInfoDialogContent.prototype, "message", 2);
+__decorateClass$7([
+  property({ type: Boolean })
+], LyraInfoDialogContent.prototype, "markdown", 2);
+LyraInfoDialogContent = __decorateClass$7([
+  customElement("lyra-info-dialog-content")
+], LyraInfoDialogContent);
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+  id: "info",
+  label: "Information",
+  buttons: [OK_BUTTON],
+  component: (state2) => {
+    if (!state2) {
+      return html`<div>Error: No info dialog state</div>`;
+    }
+    return html`
+            <lyra-info-dialog-content 
+                .message="${state2.message}"
+                .markdown="${state2.markdown}"
+            ></lyra-info-dialog-content>
+        `;
+  },
+  onButton: async (id, result, state2) => {
+    if (!state2) {
+      return true;
+    }
+    if (state2.resolve) {
+      state2.resolve();
+    }
+    return true;
+  }
+});
+async function infoDialog(title, message, markdown = false) {
+  return new Promise((resolve) => {
+    dialogService.open("info", {
+      title,
+      message,
+      markdown,
+      resolve
+    });
+  });
+}
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$6(target, key, result);
+  return result;
+};
+let LyraConfirmDialogContent = class extends LyraDialogContent {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.markdown = false;
+  }
+  getResult() {
+    return false;
+  }
+  render() {
+    return html`
+            ${this.renderMessage(this.message, this.markdown)}
+        `;
+  }
+};
+__decorateClass$6([
+  property({ type: String })
+], LyraConfirmDialogContent.prototype, "message", 2);
+__decorateClass$6([
+  property({ type: Boolean })
+], LyraConfirmDialogContent.prototype, "markdown", 2);
+LyraConfirmDialogContent = __decorateClass$6([
+  customElement("lyra-confirm-dialog-content")
+], LyraConfirmDialogContent);
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+  id: "confirm",
+  label: "Confirm",
+  buttons: [OK_BUTTON, CANCEL_BUTTON],
+  component: (state2) => {
+    if (!state2) {
+      return html`<div>Error: No confirm dialog state</div>`;
+    }
+    return html`
+            <lyra-confirm-dialog-content 
+                .message="${state2.message}"
+                .markdown="${state2.markdown}"
+            ></lyra-confirm-dialog-content>
+        `;
+  },
+  onButton: async (id, result, state2) => {
+    if (!state2) {
+      return true;
+    }
+    if (id === "ok") {
+      state2.resolve(true);
+    } else {
+      state2.resolve(false);
+    }
+    return true;
+  }
+});
+async function confirmDialog(message, markdown = false) {
+  return new Promise((resolve) => {
+    dialogService.open("confirm", {
+      message,
+      markdown,
+      resolve
+    });
+  });
+}
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+let LyraNavigableInfoDialogContent = class extends LyraDialogContent {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.message = "";
+    this.markdown = false;
+    this.actions = [];
+    this.currentTitle = "";
+    this.currentMessage = "";
+    this.dialogElement = null;
+  }
+  async firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.currentTitle = this.title;
+    this.currentMessage = this.message;
+    await this.updateComplete;
+    const dialog = this.closest("wa-dialog");
+    if (dialog) {
+      this.dialogElement = dialog;
+      this.updateDialogLabel();
+    }
+    const contentContainer = this.closest(".dialog-service-content");
+    if (contentContainer) {
+      const footer = contentContainer.parentElement?.querySelector(".dialog-service-footer");
+      if (footer) {
+        footer.style.display = "none";
+      }
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("title")) {
+      this.currentTitle = this.title;
+      this.updateDialogLabel();
+    }
+    if (changedProperties.has("message")) {
+      this.currentMessage = this.message;
+    }
+  }
+  updateDialogLabel() {
+    if (this.dialogElement) {
+      this.dialogElement.setAttribute("label", this.currentTitle);
+    }
+  }
+  updateDialog(newTitle, newMessage, newActions) {
+    this.currentTitle = newTitle;
+    this.currentMessage = newMessage;
+    this.actions = [...newActions];
+    this.updateDialogLabel();
+    this.requestUpdate();
+  }
+  handleActionClick(action) {
+    action.callback();
+  }
+  handleClose() {
+    const dialog = this.closest("wa-dialog");
+    if (dialog && this.resolveCallback) {
+      this.resolveCallback();
+    }
+  }
+  render() {
+    const leftActions = this.actions.filter((a) => a.label !== "Close");
+    const rightActions = this.actions.filter((a) => a.label === "Close");
+    return html`
+            <div class="dialog-content">
+                <wa-scroller class="dialog-scroller">
+                    ${this.renderMessage(this.currentMessage, this.markdown)}
+                </wa-scroller>
+                
+                <div class="dialog-actions">
+                    <div class="dialog-actions-left">
+                        ${leftActions.map((action) => html`
+                            <wa-button 
+                                variant="${action.variant || "default"}"
+                                ?disabled=${action.disabled}
+                                @click=${() => this.handleActionClick(action)}
+                            >
+                                ${action.label}
+                            </wa-button>
+                        `)}
+                    </div>
+                    <div class="dialog-actions-right">
+                        ${rightActions.map((action) => html`
+                            <wa-button 
+                                variant="${action.variant || "primary"}"
+                                @click=${() => {
+      this.handleActionClick(action);
+      this.handleClose();
+    }}
+                            >
+                                ${action.label}
+                            </wa-button>
+                        `)}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+LyraNavigableInfoDialogContent.styles = [
+  ...LyraDialogContent.styles,
+  css`
+            :host {
+                display: block;
+            }
+
+            :host-context(.dialog-service-content) {
+                padding: 0;
+            }
+            
+            .dialog-content {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                min-width: 400px;
+                max-width: 600px;
+                height: 500px;
+                padding: 1rem;
+            }
+            
+            .dialog-scroller {
+                flex: 1;
+                overflow-y: auto;
+            }
+            
+            .dialog-actions {
+                display: flex;
+                gap: 0.5rem;
+                justify-content: space-between;
+                margin-top: 0.5rem;
+            }
+            
+            .dialog-actions-left,
+            .dialog-actions-right {
+                display: flex;
+                gap: 0.5rem;
+            }
+        `
+];
+__decorateClass$5([
+  property({ type: String })
+], LyraNavigableInfoDialogContent.prototype, "title", 2);
+__decorateClass$5([
+  property({ type: String })
+], LyraNavigableInfoDialogContent.prototype, "message", 2);
+__decorateClass$5([
+  property({ type: Boolean })
+], LyraNavigableInfoDialogContent.prototype, "markdown", 2);
+__decorateClass$5([
+  state()
+], LyraNavigableInfoDialogContent.prototype, "actions", 2);
+__decorateClass$5([
+  state()
+], LyraNavigableInfoDialogContent.prototype, "currentTitle", 2);
+__decorateClass$5([
+  state()
+], LyraNavigableInfoDialogContent.prototype, "currentMessage", 2);
+LyraNavigableInfoDialogContent = __decorateClass$5([
+  customElement("lyra-navigable-info-dialog-content")
+], LyraNavigableInfoDialogContent);
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+  id: "navigable-info",
+  label: "Information",
+  buttons: [CLOSE_BUTTON],
+  component: (state2) => {
+    if (!state2) {
+      return html`<div>Error: No navigable info dialog state</div>`;
+    }
+    const componentHtml = html`
+            <lyra-navigable-info-dialog-content 
+                .title="${state2.title}"
+                .message="${state2.message}"
+                .markdown="${state2.markdown}"
+            ></lyra-navigable-info-dialog-content>
+        `;
+    (async () => {
+      const element = document.querySelector("lyra-navigable-info-dialog-content");
+      if (element) {
+        await element.updateComplete;
+        element.actions = state2.actions || [];
+        element.resolveCallback = state2.resolve;
+        if (state2.updateDialogRef) {
+          state2.updateDialogRef.current = (newTitle, newMessage, newActions) => {
+            element.updateDialog(newTitle, newMessage, newActions);
+          };
+        }
+      }
+    })();
+    return componentHtml;
+  },
+  onButton: async (id, result, state2) => {
+    if (!state2) {
+      return false;
+    }
+    if (id === "close" && state2.resolve) {
+      state2.resolve();
+      return true;
+    }
+    return false;
+  }
+});
+async function navigableInfoDialog(title, message, actions, markdown = false) {
+  return new Promise((resolve) => {
+    const updateDialogRef = {};
+    dialogService.open("navigable-info", {
+      title,
+      message,
+      actions,
+      markdown,
+      resolve,
+      updateDialogRef
+    });
+    const updateDialog = (newTitle, newMessage, newActions) => {
+      if (updateDialogRef.current) {
+        updateDialogRef.current(newTitle, newMessage, newActions);
+      }
+    };
+    actions.updateDialog = updateDialog;
+  });
+}
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+const RESIZE_DEBOUNCE_MS = 150;
+function renderButtonGroup(slotName, orientation, contributions, isToolbarItem, contributionCreator) {
+  const slot = slotName ?? "default";
+  const label = `Toolbar ${slot}`;
+  const items = contributions.filter((c) => c.slot === slotName && isToolbarItem(c));
+  const slotHtml = slotName === "start" ? html`<slot name="start"></slot>` : slotName === "end" ? html`<slot name="end"></slot>` : html`<slot></slot>`;
+  return html`
+        <wa-button-group orientation=${orientation} label=${label}>
+            ${slotHtml}
+            ${items.map(contributionCreator)}
+        </wa-button-group>
+    `;
+}
+let LyraToolbar = class extends LyraElement {
+  constructor() {
+    super(...arguments);
+    this.position = "start";
+    this.orientation = "horizontal";
+    this.align = "start";
+    this.size = "small";
+    this.isEditor = false;
+    this.partToolbarContent = void 0;
+    this.partToolbarRenderer = void 0;
+    this.contributions = [];
+    this.compact = false;
+    this.resizeObserver = null;
+    this.resizeDebounceTimer = null;
+    this.overflowCheckScheduled = false;
+    this.onResize = () => {
+      if (this.resizeDebounceTimer !== null) clearTimeout(this.resizeDebounceTimer);
+      this.resizeDebounceTimer = setTimeout(() => {
+        this.resizeDebounceTimer = null;
+        this.updateCompactFromSpace();
+      }, RESIZE_DEBOUNCE_MS);
+    };
+  }
+  updateCompactFromSpace() {
+    const toolbarItems = this.shadowRoot?.querySelector(".toolbar-items");
+    if (!toolbarItems) return;
+    const trimmed = toolbarItems.scrollWidth > toolbarItems.clientWidth;
+    if (this.compact !== trimmed) {
+      this.compact = trimmed;
+      this.requestUpdate();
+    }
+  }
+  scheduleOverflowCheck() {
+    if (this.overflowCheckScheduled) return;
+    this.overflowCheckScheduled = true;
+    requestAnimationFrame(() => {
+      this.overflowCheckScheduled = false;
+      this.updateCompactFromSpace();
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(this.onResize);
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.resizeDebounceTimer !== null) {
+      clearTimeout(this.resizeDebounceTimer);
+      this.resizeDebounceTimer = null;
+    }
+    super.disconnectedCallback();
+  }
+  updated(changedProperties) {
+    super.updated?.(changedProperties);
+    if (!this.compact) this.scheduleOverflowCheck();
+  }
+  doBeforeUI() {
+    const id = this.getAttribute("id");
+    if (id) {
+      this.loadContributions(id);
+    }
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (!id) return;
+      const shouldReload = this.matchesTarget(id, event.target);
+      if (shouldReload) {
+        this.loadContributions(id);
+        this.requestUpdate();
+      }
+    });
+  }
+  matchesTarget(id, target) {
+    if (target === id) return true;
+    if (!id.includes(":")) return false;
+    const [prefix] = id.split(":");
+    if (target === `${prefix}:*`) return true;
+    const targetParts = target.split(":");
+    if (targetParts.length === 2) {
+      const categoryToken = targetParts[1];
+      if (categoryToken === "system.editors" || categoryToken === ".system.editors") {
+        return this.isEditor && id.startsWith(`${prefix}:`);
+      }
+    }
+    return false;
+  }
+  loadContributions(id) {
+    const specific = contributionRegistry.getContributions(id);
+    if (!id.includes(":")) {
+      this.contributions = specific;
+      return;
+    }
+    const [prefix] = id.split(":");
+    const wildcardId = `${prefix}:*`;
+    const wildcard = contributionRegistry.getContributions(wildcardId);
+    const categoryMatches = [];
+    if (this.isEditor) {
+      const allCategories = ["system.editors", ".system.editors"];
+      for (const category of allCategories) {
+        const categoryId = `${prefix}:${category}`;
+        const matches = contributionRegistry.getContributions(categoryId);
+        categoryMatches.push(...matches);
+      }
+    }
+    this.contributions = [...wildcard, ...categoryMatches, ...specific];
+  }
+  isToolbarItem(contribution) {
+    return "command" in contribution || "html" in contribution;
+  }
+  contributionCreator(contribution) {
+    if ("command" in contribution) {
+      const commandContribution = contribution;
+      const showLabel = !this.compact && !!commandContribution.showLabel;
+      return html`
+                <wa-button @click=${() => this.executeCommand(commandContribution.command, commandContribution.params || {})}
+                           title=${commandContribution.label}
+                           ?disabled="${commandContribution.disabled?.get()}"
+                           appearance="plain" size=${this.size}>
+                    <wa-icon name=${commandContribution.icon} label="${commandContribution.label}"></wa-icon>
+                    ${showLabel ? commandContribution.label : ""}
+                </wa-button>
+            `;
+    }
+    if ("html" in contribution) {
+      const contents = contribution.html;
+      if (contents instanceof Function) {
+        return contents();
+      }
+      return unsafeHTML(contents);
+    }
+    return html`<span>unknown contribution type: ${typeof contribution}</span>`;
+  }
+  render() {
+    const partContent = this.partToolbarRenderer ? this.partToolbarRenderer() : this.partToolbarContent ? this.partToolbarContent : "";
+    const flexDir = this.orientation === "vertical" ? "column" : "row";
+    const alignMap = { start: "flex-start", center: "center", end: "flex-end" };
+    const bindCreator = this.contributionCreator.bind(this);
+    const bindIsItem = this.isToolbarItem.bind(this);
+    return html`
+            <div class="toolbar-items" style=${styleMap({
+      "flex-direction": flexDir,
+      "align-items": alignMap[this.align],
+      "justify-content": this.position
+    })}>
+                ${renderButtonGroup("start", this.orientation, this.contributions, bindIsItem, bindCreator)}
+                ${partContent}
+                ${renderButtonGroup(void 0, this.orientation, this.contributions, bindIsItem, bindCreator)}
+                ${renderButtonGroup("end", this.orientation, this.contributions, bindIsItem, bindCreator)}
+            </div>
+        `;
+  }
+};
+LyraToolbar.styles = css`
+        :host {
+            display: flex;
+            flex-direction: row;
+            --wa-form-control-padding-inline: var(--wa-space-2xs);
+        }
+
+        :host([orientation="vertical"]) {
+            flex-direction: column;
+        }
+
+        .toolbar-items {
+            display: flex;
+            flex: 1;
+            gap: var(--wa-space-2xs);
+        }
+    `;
+__decorateClass$4([
+  property()
+], LyraToolbar.prototype, "position", 2);
+__decorateClass$4([
+  property({ reflect: true })
+], LyraToolbar.prototype, "orientation", 2);
+__decorateClass$4([
+  property({ reflect: true })
+], LyraToolbar.prototype, "align", 2);
+__decorateClass$4([
+  property({ reflect: true })
+], LyraToolbar.prototype, "size", 2);
+__decorateClass$4([
+  property({ type: Boolean, attribute: "is-editor" })
+], LyraToolbar.prototype, "isEditor", 2);
+__decorateClass$4([
+  property({ attribute: false })
+], LyraToolbar.prototype, "partToolbarContent", 2);
+__decorateClass$4([
+  property({ attribute: false })
+], LyraToolbar.prototype, "partToolbarRenderer", 2);
+__decorateClass$4([
+  state()
+], LyraToolbar.prototype, "contributions", 2);
+__decorateClass$4([
+  state()
+], LyraToolbar.prototype, "compact", 2);
+LyraToolbar = __decorateClass$4([
+  customElement("lyra-toolbar")
+], LyraToolbar);
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+let LyraCommand = class extends LyraWidget {
+  constructor() {
+    super(...arguments);
+    this.cmd = "";
+    this.title = "";
+    this.label = false;
+    this.disabled = false;
+    this.appearance = "plain";
+    this.variant = "neutral";
+    this.size = "small";
+    this.params = {};
+    this.placement = "bottom-start";
+    this.dropdownContributions = [];
+  }
+  handleClick(event) {
+    if (this.disabled) return;
+    if (event) {
+      event.stopPropagation();
+    }
+    if (this.action) {
+      this.action(event);
+      return;
+    }
+    if (this.cmd) {
+      const dropdown = this.closest("wa-dropdown");
+      if (dropdown && dropdown.open !== void 0) {
+        dropdown.open = false;
+      }
+      this.executeCommand(this.cmd, this.params);
+    }
+  }
+  handleSelect(event) {
+    const dropdown = event.target;
+    if (dropdown && dropdown.open !== void 0) {
+      dropdown.open = false;
+    }
+  }
+  isInDropdown() {
+    return !!this.closest("wa-dropdown, wa-dropdown-menu");
+  }
+  getKeybinding() {
+    if (!this.cmd || this.action) return null;
+    const keybindings = keyBindingManager.getKeyBindingsForCommand(this.cmd);
+    return keybindings.length > 0 ? keybindings[0] : null;
+  }
+  doBeforeUI() {
+    if (this.dropdown) {
+      this.loadDropdownContributions();
+      subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+        if (this.dropdown && event.target === this.dropdown) {
+          this.dropdownContributions = event.contributions;
+          this.requestUpdate();
+        }
+      });
+    }
+  }
+  loadDropdownContributions() {
+    if (!this.dropdown) return;
+    this.dropdownContributions = contributionRegistry.getContributions(this.dropdown);
+    this.requestUpdate();
+  }
+  renderContribution(contribution) {
+    if ("command" in contribution) {
+      const commandContribution = contribution;
+      const disabled = commandContribution.disabled?.get();
+      return html`
+                <lyra-command 
+                    cmd="${commandContribution.command}"
+                    icon="${commandContribution.icon || ""}"
+                    .params=${commandContribution.params || {}}
+                    ?disabled="${disabled}">
+                    ${commandContribution.label}
+                </lyra-command>
+            `;
+    }
+    if ("html" in contribution) {
+      const htmlContribution = contribution;
+      const contents = htmlContribution.html;
+      if (contents instanceof Function) {
+        return contents();
+      }
+      return unsafeHTML(contents);
+    }
+    return nothing;
+  }
+  render() {
+    const keybinding = this.getKeybinding();
+    if (this.isInDropdown()) {
+      return html`
+                <wa-dropdown-item 
+                    ?disabled=${this.disabled}
+                    @click=${(e) => this.handleClick(e)}>
+                    <lyra-icon name="${this.icon}" label="${this.title}" slot="icon"></lyra-icon>
+                    <slot></slot>
+                    ${keybinding ? html`<span class="keybinding">${keybinding}</span>` : ""}
+                </wa-dropdown-item>
+            `;
+    }
+    if (this.dropdown) {
+      return html`
+                <wa-dropdown 
+                    placement=${this.placement}
+                    @wa-select=${(e) => this.handleSelect(e)}>
+                    <wa-button 
+                        slot="trigger"
+                        appearance=${this.appearance}
+                        variant=${this.variant}
+                        size=${this.size}
+                        ?disabled=${this.disabled}
+                        with-caret
+                        title=${keybinding ? `${this.title} (${keybinding})` : this.title}>
+                        <lyra-icon slot="start" name="${this.icon}" label="${this.title}"></lyra-icon>
+                        <slot></slot>
+                        ${this.label ? this.title : nothing}
+                    </wa-button>
+                    
+                    ${this.title ? html`
+                        <h6 style="padding: var(--wa-space-xs) var(--wa-space-s); margin: 0; color: var(--wa-color-neutral-50); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
+                            ${this.title}
+                        </h6>
+                    ` : nothing}
+                    
+                    ${this.dropdownContributions.map((c) => this.renderContribution(c))}
+                    
+                    ${this.cmd ? html`
+                        <wa-divider></wa-divider>
+                        <lyra-command 
+                            cmd="${this.cmd}"
+                            icon="${this.icon || ""}"
+                            .params=${this.params}
+                            ?disabled=${this.disabled}>
+                            <slot></slot>
+                            ${this.title}
+                        </lyra-command>
+                    ` : nothing}
+                </wa-dropdown>
+            `;
+    }
+    return html`
+            <wa-button
+                appearance=${this.appearance}
+                variant=${this.variant}
+                size=${this.size}
+                ?disabled=${this.disabled}
+                title=${keybinding ? `${this.title} (${keybinding})` : this.title}
+                @click=${(e) => this.handleClick(e)}>
+                <lyra-icon slot="start" name="${this.icon}" label="${this.title}"></lyra-icon>
+                <slot></slot>
+            </wa-button>
+        `;
+  }
+};
+LyraCommand.styles = css`
+        :host {
+            display: inline-block;
+        }
+
+        .keybinding {
+            margin-left: auto;
+            padding: 2px 6px;
+            background: var(--wa-color-neutral-15);
+            border: 1px solid var(--wa-color-neutral-25);
+            border-radius: 3px;
+            font-size: 10px;
+            font-family: monospace;
+            opacity: 0.7;
+        }
+
+        :host-context(.wa-light) .keybinding {
+            background: var(--wa-color-neutral-85);
+            border: 1px solid var(--wa-color-neutral-75);
+        }
+    `;
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "cmd", 2);
+__decorateClass$3([
+  property({ type: Object, attribute: false })
+], LyraCommand.prototype, "action", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "title", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "label", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "icon", 2);
+__decorateClass$3([
+  property({ type: Boolean })
+], LyraCommand.prototype, "disabled", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "appearance", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "variant", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "size", 2);
+__decorateClass$3([
+  property({ type: Object, attribute: false })
+], LyraCommand.prototype, "params", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "dropdown", 2);
+__decorateClass$3([
+  property()
+], LyraCommand.prototype, "placement", 2);
+__decorateClass$3([
+  state()
+], LyraCommand.prototype, "dropdownContributions", 2);
+LyraCommand = __decorateClass$3([
+  customElement("lyra-command")
+], LyraCommand);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+let LyraContextMenu = class extends LyraElement {
+  constructor() {
+    super(...arguments);
+    this.isEditor = false;
+    this.partContextMenuRenderer = void 0;
+    this.contributions = [];
+    this.isOpen = false;
+    this.position = { x: 0, y: 0 };
+    this.anchorRef = createRef();
+    this.dropdownRef = createRef();
+    this.boundHandleDocumentPointerDown = this.handleDocumentPointerDown.bind(this);
+  }
+  /**
+   * "Click outside to close" runs in capture phase before the target's click.
+   * We use composedPath() so hits inside the menu still count as inside:
+   * - Clicks on items (e.g. command / wa-dropdown-item) or their icon/label
+   *   are inside shadow roots; contains(target) can miss those.
+   * - composedPath() is the path from target to root crossing shadow boundaries,
+   *   so if the dropdown is in the path, the click was inside the menu and we
+   *   do not close (so the item's click can run). We only close when the click
+   *   is truly outside (dropdown not in path). Submenus: same idea, skip close
+   *   when any node in the path has part="submenu".
+   */
+  handleDocumentPointerDown(e) {
+    if (!this.isOpen) return;
+    const path = e.composedPath();
+    if (this.dropdownRef.value && path.includes(this.dropdownRef.value)) return;
+    if (path.some((el) => el.getAttribute?.("part") === "submenu")) return;
+    this.onClose();
+  }
+  doBeforeUI() {
+    const id = this.getAttribute("id");
+    if (id) {
+      this.loadContributions(id);
+    }
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (!id) return;
+      const shouldReload = this.matchesTarget(id, event.target);
+      if (shouldReload) {
+        this.loadContributions(id);
+        this.requestUpdate();
+      }
+    });
+  }
+  matchesTarget(id, target) {
+    if (target === id) return true;
+    if (!id.includes(":")) return false;
+    const [prefix] = id.split(":");
+    if (target === `${prefix}:*`) return true;
+    const targetParts = target.split(":");
+    if (targetParts.length === 2) {
+      const categoryToken = targetParts[1];
+      if (categoryToken === "system.editors" || categoryToken === ".system.editors") {
+        return this.isEditor && id.startsWith(`${prefix}:`);
+      }
+    }
+    return false;
+  }
+  loadContributions(id) {
+    const specific = contributionRegistry.getContributions(id);
+    if (!id.includes(":")) {
+      this.contributions = specific;
+      return;
+    }
+    const [prefix] = id.split(":");
+    const wildcardId = `${prefix}:*`;
+    const wildcard = contributionRegistry.getContributions(wildcardId);
+    const categoryMatches = [];
+    if (this.isEditor) {
+      const allCategories = ["system.editors", ".system.editors"];
+      for (const category of allCategories) {
+        const categoryId = `${prefix}:${category}`;
+        const matches = contributionRegistry.getContributions(categoryId);
+        categoryMatches.push(...matches);
+      }
+    }
+    this.contributions = [...wildcard, ...categoryMatches, ...specific];
+  }
+  /**
+   * Gets the element at the given point, traversing shadow DOM boundaries recursively.
+   * This is necessary because elementFromPoint() doesn't penetrate shadow roots.
+   */
+  getElementFromPoint(x, y) {
+    let element = document.elementFromPoint(x, y);
+    if (!element) return null;
+    while (element) {
+      const shadowRoot = element.shadowRoot;
+      if (shadowRoot) {
+        const shadowElement = shadowRoot.elementFromPoint(x, y);
+        if (shadowElement && shadowElement !== element) {
+          element = shadowElement;
+          continue;
+        }
+      }
+      break;
+    }
+    return element;
+  }
+  /**
+   * Triggers a click on the element under the cursor to update selection before showing context menu.
+   */
+  triggerClickUnderCursor(mouseEvent) {
+    const elementUnderCursor = this.getElementFromPoint(mouseEvent.clientX, mouseEvent.clientY);
+    if (elementUnderCursor) {
+      const clickEvent = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        clientX: mouseEvent.clientX,
+        clientY: mouseEvent.clientY,
+        screenX: mouseEvent.screenX,
+        screenY: mouseEvent.screenY,
+        button: 0,
+        buttons: 0,
+        detail: 1,
+        which: 1
+      });
+      elementUnderCursor.dispatchEvent(clickEvent);
+    }
+  }
+  show(position, mouseEvent) {
+    if (mouseEvent) {
+      this.triggerClickUnderCursor(mouseEvent);
+    }
+    this.position = position;
+    this.isOpen = true;
+    this.updateComplete.then(() => {
+      document.addEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
+    });
+  }
+  onClose() {
+    this.isOpen = false;
+    document.removeEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
+  }
+  renderContribution(contribution) {
+    if ("command" in contribution) {
+      const commandContribution = contribution;
+      const disabled = commandContribution.disabled?.get();
+      return html`
+                <lyra-command
+                    cmd="${commandContribution.command}"
+                    icon="${commandContribution.icon ?? ""}"
+                    .params=${commandContribution.params ?? {}}
+                    ?disabled="${disabled}">
+                    ${commandContribution.label}
+                </lyra-command>
+            `;
+    } else if ("html" in contribution) {
+      const contents = contribution.html;
+      if (contents instanceof Function) {
+        return contents();
+      }
+      return unsafeHTML(contents);
+    }
+    return nothing;
+  }
+  render() {
+    if (!this.isOpen) return nothing;
+    const partContent = this.partContextMenuRenderer ? this.partContextMenuRenderer() : nothing;
+    return html`
+            <wa-dropdown
+                ${ref(this.dropdownRef)}
+                ?open=${this.isOpen}
+                @wa-after-hide=${this.onClose}>
+                
+                <div 
+                    slot="trigger"
+                    ${ref(this.anchorRef)}
+                    style="position: fixed; 
+                           left: ${this.position.x}px; 
+                           top: ${this.position.y}px; 
+                           width: 1px; 
+                           height: 1px; 
+                           pointer-events: none;">
+                </div>
+                
+                ${partContent}
+                ${this.contributions.map((c) => this.renderContribution(c))}
+            </wa-dropdown>
+        `;
+  }
+};
+LyraContextMenu.styles = css`
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+            z-index: 10000;
+        }
+
+        wa-dropdown {
+            pointer-events: auto;
+            min-width: 200px;
+        }
+        
+        wa-dropdown::part(menu) {
+            min-width: 200px;
+        }
+    `;
+__decorateClass$2([
+  property({ type: Boolean, attribute: "is-editor" })
+], LyraContextMenu.prototype, "isEditor", 2);
+__decorateClass$2([
+  property({ attribute: false })
+], LyraContextMenu.prototype, "partContextMenuRenderer", 2);
+__decorateClass$2([
+  state()
+], LyraContextMenu.prototype, "contributions", 2);
+__decorateClass$2([
+  state()
+], LyraContextMenu.prototype, "isOpen", 2);
+__decorateClass$2([
+  state()
+], LyraContextMenu.prototype, "position", 2);
+LyraContextMenu = __decorateClass$2([
+  customElement("lyra-contextmenu")
+], LyraContextMenu);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+let LyraTabs = class extends LyraContainer {
+  constructor() {
+    super(...arguments);
+    this.placement = "top";
+    this.contributions = [];
+    this.tabGroup = createRef();
+    this.containerId = null;
+    this.resizeObservers = /* @__PURE__ */ new WeakMap();
+  }
+  // ============= Lifecycle Methods =============
+  doBeforeUI() {
+    this.containerId = this.getAttribute("id");
+    if (!this.containerId) {
+      throw new Error("lyra-tabs requires an 'id' attribute to function");
+    }
+    this.loadAndResolveContributions();
+  }
+  doInitUI() {
+    this.updateComplete.then(() => {
+      this.activateNextAvailableTab();
+      if (!this.tabGroup.value) return;
+      this.tabGroup.value.addEventListener("wa-tab-show", (event) => {
+        const tabPanel = this.getTabPanel(event.detail.name);
+        if (tabPanel) {
+          this.updateToolbarFromComponent(tabPanel);
+          requestAnimationFrame(() => {
+            this.updateToolbarHeightVariable(tabPanel);
+            this.setupToolbarResizeObserver(tabPanel);
+          });
+          this.dispatchEvent(new CustomEvent("tab-shown", { detail: tabPanel }));
+        }
+      });
+      this.tabGroup.value.addEventListener("part-toolbar-changed", (event) => {
+        const component = event.target;
+        const tabPanel = component.closest("wa-tab-panel");
+        if (tabPanel) {
+          this.updateToolbarFromComponent(tabPanel);
+          requestAnimationFrame(() => this.updateToolbarHeightVariable(tabPanel));
+        }
+      });
+      this.tabGroup.value.addEventListener("part-contextmenu-changed", (event) => {
+        const component = event.target;
+        const tabPanel = component.closest("wa-tab-panel");
+        if (tabPanel) {
+          this.updateContextMenuFromComponent(tabPanel);
+        }
+      });
+      this.tabGroup.value.addEventListener("click", (event) => {
+        const target = event.target;
+        const tab = target.closest("wa-tab");
+        if (tab) {
+          const panelName = tab.getAttribute("panel");
+          if (panelName) {
+            const tabPanel2 = this.getTabPanel(panelName);
+            if (tabPanel2) {
+              const contentDiv2 = tabPanel2.querySelector(".tab-content");
+              if (contentDiv2 && contentDiv2.firstElementChild) {
+                const part = contentDiv2.firstElementChild;
+                if (part instanceof LyraPart) {
+                  activePartSignal.set(part);
+                }
+              }
+            }
+          }
+          return;
+        }
+        const scroller = target.closest("wa-scroller.tab-content");
+        if (!scroller) return;
+        const tabPanel = scroller.closest("wa-tab-panel");
+        if (!tabPanel) return;
+        const contentDiv = tabPanel.querySelector(".tab-content");
+        if (contentDiv && contentDiv.firstElementChild) {
+          const part = contentDiv.firstElementChild;
+          if (part instanceof LyraPart) {
+            activePartSignal.set(part);
+          }
+        }
+      });
+      this.tabGroup.value.addEventListener("contextmenu", (event) => {
+        const mouseEvent = event;
+        const scroller = mouseEvent.target.closest("wa-scroller.tab-content");
+        if (!scroller) return;
+        mouseEvent.preventDefault();
+        const tabPanel = scroller.closest("wa-tab-panel");
+        if (!tabPanel) return;
+        requestAnimationFrame(() => {
+          this.updateContextMenuFromComponent(tabPanel);
+          const contextMenu = tabPanel.querySelector("lyra-contextmenu");
+          if (contextMenu) {
+            contextMenu.show({ x: mouseEvent.clientX, y: mouseEvent.clientY }, mouseEvent);
+          }
+        });
+      });
+    });
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (!this.containerId || event.target !== this.containerId) return;
+      this.loadAndResolveContributions();
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        this.activateNextAvailableTab();
+      });
+    });
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("contributions")) {
+      const isEditorArea = this.containerId === EDITOR_AREA_MAIN;
+      this.contributions.forEach((contribution) => {
+        const tabPanel = this.getTabPanel(contribution.name);
+        if (!tabPanel) return;
+        const contentDiv = tabPanel.querySelector(".tab-content");
+        if (contentDiv && contentDiv.firstElementChild) {
+          const part = contentDiv.firstElementChild;
+          if (part instanceof LyraPart) {
+            part.tabContribution = contribution;
+            part.isEditor = isEditorArea;
+          }
+        }
+        requestAnimationFrame(() => this.updateToolbarHeightVariable(tabPanel));
+      });
+    }
+  }
+  // ============= Public API Methods =============
+  has(key) {
+    if (!this.tabGroup.value) return false;
+    return !!this.getTabPanel(key);
+  }
+  activate(key) {
+    if (!this.tabGroup.value) return;
+    this.tabGroup.value.setAttribute("active", key);
+  }
+  getActiveEditor() {
+    if (!this.tabGroup.value) return null;
+    return this.tabGroup.value.getAttribute("active");
+  }
+  open(contribution) {
+    const existing = this.contributions.find((c) => c.name === contribution.name);
+    if (existing) {
+      this.activate(contribution.name);
+      return;
+    }
+    this.contributions.push(contribution);
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.activate(contribution.name);
+      const tabPanel = this.getTabPanel(contribution.name);
+      if (tabPanel) {
+        const contentDiv = tabPanel.querySelector(".tab-content");
+        if (contentDiv && contentDiv.firstElementChild) {
+          const part = contentDiv.firstElementChild;
+          if (part instanceof LyraPart) {
+            part.tabContribution = contribution;
+            part.isEditor = this.containerId === EDITOR_AREA_MAIN;
+          }
+        }
+        requestAnimationFrame(() => {
+          this.updateToolbarFromComponent(tabPanel);
+          this.updateToolbarHeightVariable(tabPanel);
+          this.setupToolbarResizeObserver(tabPanel);
+        });
+      }
+    });
+  }
+  handleTabAuxClick(event, contribution) {
+    if (event.button === MouseButton.MIDDLE && contribution.closable) {
+      this.closeTab(event, contribution.name);
+    }
+  }
+  async closeTab(event, tabName) {
+    event.stopPropagation();
+    if (this.isDirty(tabName) && !await confirmDialog("Unsaved changes will be lost: Do you really want to close?")) {
+      return;
+    }
+    const tabPanel = this.getTabPanel(tabName);
+    if (!tabPanel) return;
+    const contribution = this.contributions.find((c) => c.name === tabName);
+    if (!contribution) return;
+    this.cleanupTabInstance(tabPanel);
+    const index = this.contributions.indexOf(contribution);
+    if (index > -1) {
+      this.contributions.splice(index, 1);
+    }
+    this.dispatchEvent(new CustomEvent("tab-closed", { detail: tabPanel }));
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.activateNextAvailableTab();
+    });
+  }
+  markDirty(name, dirty) {
+    const tab = this.getTab(name);
+    tab.classList.toggle("part-dirty", dirty);
+  }
+  isDirty(name) {
+    const tab = this.getTab(name);
+    return tab.classList.contains("part-dirty");
+  }
+  // ============= Private Helper Methods =============
+  /**
+   * Loads tab contributions from the registry.
+   */
+  loadAndResolveContributions() {
+    if (!this.containerId) return;
+    this.contributions = contributionRegistry.getContributions(this.containerId);
+    this.requestUpdate();
+  }
+  /**
+   * Cleans up a tab instance when the tab is closed.
+   * 
+   * Cleanup Process:
+   * 1. Disconnect ResizeObserver if one exists
+   * 2. Call component's close() method if available (disposes resources)
+   * 3. DOM element is removed by caller (closeTab method)
+   */
+  cleanupTabInstance(tabPanel) {
+    const observer = this.resizeObservers.get(tabPanel);
+    if (observer) {
+      observer.disconnect();
+      this.resizeObservers.delete(tabPanel);
+    }
+    const contentDiv = tabPanel.querySelector(".tab-content");
+    if (contentDiv && contentDiv.firstElementChild) {
+      const component = contentDiv.firstElementChild;
+      if ("close" in component && typeof component.close === "function") {
+        component.close();
+      }
+    }
+  }
+  activateNextAvailableTab() {
+    if (!this.tabGroup.value) return;
+    const allRemainingTabs = this.tabGroup.value.querySelectorAll("wa-tab");
+    if (allRemainingTabs.length > 0) {
+      const newActive = allRemainingTabs.item(0).getAttribute("panel");
+      if (newActive) {
+        this.tabGroup.value.setAttribute("active", newActive);
+      }
+    } else {
+      this.tabGroup.value.removeAttribute("active");
+    }
+  }
+  getTabPanel(name) {
+    if (!this.tabGroup.value) return null;
+    return this.tabGroup.value.querySelector(`wa-tab-panel[name='${name}']`);
+  }
+  getTab(name) {
+    if (!this.tabGroup.value) return null;
+    return this.tabGroup.value.querySelector(`wa-tab[panel='${name}']`);
+  }
+  /**
+   * Updates the toolbar for a tab panel by querying the component for its toolbar content.
+   * This allows LyraPart components to provide their own toolbar items directly.
+   */
+  updateToolbarFromComponent(tabPanel) {
+    const contentDiv = tabPanel.querySelector(".tab-content");
+    if (!contentDiv || !contentDiv.firstElementChild) return;
+    const component = contentDiv.firstElementChild;
+    if (!(component instanceof LyraPart)) return;
+    if (!component["renderToolbar"]) return;
+    const toolbar = tabPanel.querySelector("lyra-toolbar");
+    if (toolbar) {
+      toolbar.partToolbarRenderer = () => component["renderToolbar"]();
+      toolbar.requestUpdate();
+    }
+  }
+  /**
+   * Updates the context menu for a tab panel by querying the component for its context menu content.
+   * This allows LyraPart components to provide their own context menu items directly.
+   */
+  updateContextMenuFromComponent(tabPanel) {
+    const contentDiv = tabPanel.querySelector(".tab-content");
+    if (!contentDiv || !contentDiv.firstElementChild) return;
+    const component = contentDiv.firstElementChild;
+    if (!(component instanceof LyraPart)) return;
+    if (!component["renderContextMenu"]) return;
+    const contextMenu = tabPanel.querySelector("lyra-contextmenu");
+    if (contextMenu) {
+      contextMenu.partContextMenuRenderer = () => component["renderContextMenu"]();
+      contextMenu.requestUpdate();
+    }
+  }
+  /**
+   * Updates the toolbar height CSS variable for calc() positioning.
+   */
+  updateToolbarHeightVariable(tabPanel) {
+    const toolbar = tabPanel.querySelector(".tab-toolbar");
+    if (!toolbar) return;
+    const toolbarHeight = toolbar.offsetHeight;
+    tabPanel.style.setProperty("--toolbar-height", `${toolbarHeight}px`);
+  }
+  /**
+   * Sets up a ResizeObserver to update toolbar height variable when toolbar size changes.
+   * Reuses existing observer if one already exists for this tab panel.
+   */
+  setupToolbarResizeObserver(tabPanel) {
+    if (this.resizeObservers.has(tabPanel)) return;
+    const toolbar = tabPanel.querySelector(".tab-toolbar");
+    if (!toolbar) return;
+    const observer = new ResizeObserver(() => {
+      this.updateToolbarHeightVariable(tabPanel);
+    });
+    observer.observe(toolbar);
+    this.resizeObservers.set(tabPanel, observer);
+  }
+  // ============= Render Method =============
+  render() {
+    const currentApp = appLoaderService.getCurrentApp();
+    return html`
+            <wa-tab-group ${ref(this.tabGroup)} placement=${this.placement}>
+                ${when(
+      this.contributions.length === 0,
+      () => html`
+                        <div class="empty-state">
+                            ${when(
+        currentApp,
+        () => html`
+                                    <div class="empty-content">
+                                        <h2 class="empty-title">${currentApp.name}</h2>
+                                        ${when(
+          currentApp.description,
+          () => html`<p class="empty-description">${currentApp.description}</p>`
+        )}
+                                    </div>
+                                `,
+        () => html`
+                                    <wa-icon name="folder-open" class="empty-icon"></wa-icon>
+                                `
+      )}
+                        </div>
+                    `,
+      () => repeat(
+        this.contributions,
+        (c) => c.name,
+        (c) => html`
+                            <wa-tab panel="${c.name}"
+                                    @auxclick="${(e) => this.handleTabAuxClick(e, c)}">
+                                <lyra-icon name="${c.icon}"></lyra-icon>
+                                ${c.label}
+                                ${when(c.closable, () => html`
+                                    <wa-icon name="xmark" label="Close"  @click="${(e) => this.closeTab(e, c.name)}"></wa-icon>
+                                `)}
+                            </wa-tab>
+                            <wa-tab-panel name="${c.name}">
+                                ${when(c.toolbar !== false, () => html`
+                                    <lyra-toolbar id="toolbar:${c.editorId ?? c.name}"
+                                               class="tab-toolbar"
+                                               ?is-editor="${this.containerId === EDITOR_AREA_MAIN}"></lyra-toolbar>
+                                `)}
+                                <wa-scroller class="tab-content" orientation="vertical">
+                                    ${c.component ? c.component(c.name) : nothing}
+                                </wa-scroller>
+                                ${when(c.contextMenu !== false, () => html`
+                                    <lyra-contextmenu id="contextmenu:${c.name}"
+                                                   ?is-editor="${this.containerId === EDITOR_AREA_MAIN}"></lyra-contextmenu>
+                                `)}
+                            </wa-tab-panel>
+                        `
+      )
+    )}
+            </wa-tab-group>
+        `;
+  }
+};
+LyraTabs.styles = css`
+        :host {
+            height: 100%;
+            width: 100%;
+        }
+
+        wa-tab-group {
+            height: 100%;
+            width: 100%;
+        }
+
+        wa-tab-group::part(base) {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            height: 100%;
+            width: 100%;
+        }
+
+        wa-tab-panel[active] {
+            display: grid;
+            grid-template-rows: minmax(0, 1fr);
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .tab-content {
+            position: absolute;
+            top: calc(var(--toolbar-height, 0px));
+            right: 0;
+            left: 0;
+            height: calc(100% - var(--toolbar-height, 0px));
+        }
+
+        wa-tab::part(base) {
+            padding: 3px 0.5rem;
+        }
+
+        wa-tab-panel {
+            --padding: 0px;
+        }
+
+        .part-dirty::part(base) {
+            font-style: italic;
+            color: var(--wa-color-danger-fill-loud)
+        }
+
+        .empty-state {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            grid-row: 2;
+        }
+
+        .empty-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 2rem;
+            gap: 0.75rem;
+            opacity: 0.3;
+        }
+
+        .empty-title {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: var(--wa-color-text-quiet);
+        }
+
+        .empty-description {
+            margin: 0;
+            font-size: 1rem;
+            color: var(--wa-color-text-quiet);
+            max-width: 500px;
+        }
+
+        .empty-icon {
+            font-size: 6rem;
+            opacity: 0.2;
+            color: var(--wa-color-text-quiet);
+        }
+    `;
+__decorateClass$1([
+  property({ reflect: true })
+], LyraTabs.prototype, "placement", 2);
+__decorateClass$1([
+  state()
+], LyraTabs.prototype, "contributions", 2);
+LyraTabs = __decorateClass$1([
+  customElement("lyra-tabs")
+], LyraTabs);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LyraResizableGrid = class extends LyraElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.gridSizes = [];
+    this.gridChildren = [];
+    this.resizing = null;
+    this.resizeOverlay = null;
+    this.childrenLoaded = false;
+    this.childStylesApplied = false;
+    this.settingsLoaded = false;
+    this.handleResize = (e) => {
+      if (!this.resizing) return;
+      const currentPos = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPos - this.resizing.startPos;
+      const newSizes = [...this.resizing.startSizes];
+      newSizes[this.resizing.handleIndex] += delta;
+      newSizes[this.resizing.handleIndex + 1] -= delta;
+      const containerSize = this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
+      const minSize = containerSize * 0.05;
+      if (newSizes[this.resizing.handleIndex] >= minSize && newSizes[this.resizing.handleIndex + 1] >= minSize) {
+        this.resizing.currentSizes = newSizes;
+        const gridTemplate = newSizes.map((size, index) => {
+          const percent = size / containerSize * 100;
+          const sizeStr = `${percent.toFixed(2)}%`;
+          if (index === newSizes.length - 1) {
+            return sizeStr;
+          }
+          return `${sizeStr} 4px`;
+        }).join(" ");
+        if (this.orientation === "horizontal") {
+          this.style.gridTemplateColumns = gridTemplate;
+        } else {
+          this.style.gridTemplateRows = gridTemplate;
+        }
+      }
+    };
+    this.stopResize = async () => {
+      if (this.resizing?.currentSizes) {
+        const containerSize = this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
+        this.gridSizes = this.resizing.currentSizes.map((size) => {
+          const percent = size / containerSize * 100;
+          return `${percent.toFixed(2)}%`;
+        });
+        await this.saveSizes();
+        this.requestUpdate();
+      }
+      if (this.resizeOverlay) {
+        document.body.removeChild(this.resizeOverlay);
+        this.resizeOverlay = null;
+      }
+      this.resizing = null;
+      document.removeEventListener("mousemove", this.handleResize);
+      document.removeEventListener("mouseup", this.stopResize);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  // ============= Lifecycle Methods =============
+  doBeforeUI() {
+    if (!this.childrenLoaded) {
+      this.mutationObserver = new MutationObserver(() => {
+        if (!this.childrenLoaded) {
+          this.loadChildren();
+        }
+      });
+      this.mutationObserver.observe(this, { childList: true, subtree: false });
+      this.loadChildren();
+    }
+  }
+  async loadChildren() {
+    const potentialChildren = Array.from(this.children).filter(
+      (child) => child.tagName !== "STYLE" && child.tagName !== "SCRIPT" && !child.classList.contains("resize-handle")
+    );
+    if (potentialChildren.length === 0) {
+      return;
+    }
+    this.childrenLoaded = true;
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = void 0;
+    }
+    this.gridChildren = potentialChildren;
+    if (!this.settingsLoaded) {
+      this.settingsLoaded = true;
+      const persisted = await this.getDialogSetting();
+      if (persisted && Array.isArray(persisted.sizes) && persisted.sizes.length === this.gridChildren.length) {
+        this.gridSizes = persisted.sizes;
+        this.requestUpdate();
+        return;
+      }
+    }
+    if (this.sizes) {
+      this.gridSizes = this.sizes.split(",").map((s) => s.trim());
+    } else {
+      const equalSize = `${100 / this.gridChildren.length}%`;
+      this.gridSizes = this.gridChildren.map(() => equalSize);
+    }
+    this.requestUpdate();
+  }
+  async saveSizes() {
+    if (this.gridSizes.length === 0) {
+      return;
+    }
+    await this.setDialogSetting({
+      sizes: this.gridSizes,
+      orientation: this.orientation
+    });
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("gridChildren") && !this.childStylesApplied && this.gridChildren.length > 0) {
+      this.childStylesApplied = true;
+      this.gridChildren.forEach((child, index) => {
+        child.style.overflow = "hidden";
+        child.style.height = "100%";
+        child.style.width = "100%";
+        child.style.gridColumn = this.orientation === "horizontal" ? `${index * 2 + 1}` : "1";
+        child.style.gridRow = this.orientation === "vertical" ? `${index * 2 + 1}` : "1";
+        child.style.display = "flex";
+        child.style.flexDirection = "column";
+      });
+    }
+  }
+  // ============= Resize Handling Methods =============
+  startResize(e, handleIndex) {
+    e.preventDefault();
+    if (handleIndex >= this.gridChildren.length - 1) return;
+    const startPos = this.orientation === "horizontal" ? e.clientX : e.clientY;
+    const containerSize = this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
+    const startSizes = this.gridSizes.map((size) => {
+      if (size.endsWith("%")) {
+        return parseFloat(size) / 100 * containerSize;
+      } else if (size.endsWith("px")) {
+        return parseFloat(size);
+      } else {
+        return parseFloat(size);
+      }
+    });
+    this.resizing = {
+      handleIndex,
+      startPos,
+      startSizes
+    };
+    this.resizeOverlay = document.createElement("div");
+    this.resizeOverlay.style.position = "fixed";
+    this.resizeOverlay.style.top = "0";
+    this.resizeOverlay.style.left = "0";
+    this.resizeOverlay.style.width = "100%";
+    this.resizeOverlay.style.height = "100%";
+    this.resizeOverlay.style.zIndex = "9999";
+    this.resizeOverlay.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    document.body.appendChild(this.resizeOverlay);
+    document.addEventListener("mousemove", this.handleResize);
+    document.addEventListener("mouseup", this.stopResize);
+    document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  }
+  // ============= Render Methods =============
+  render() {
+    if (this.gridChildren.length === 0 || this.gridSizes.length === 0) {
+      return nothing;
+    }
+    const gridTemplate = this.gridSizes.flatMap((size, index) => {
+      if (index === this.gridSizes.length - 1) {
+        return [size];
+      }
+      return [size, "1px"];
+    }).join(" ");
+    this.style.display = "grid";
+    if (this.orientation === "horizontal") {
+      this.style.gridTemplateColumns = gridTemplate;
+      this.style.gridTemplateRows = "100%";
+    } else {
+      this.style.gridTemplateColumns = "100%";
+      this.style.gridTemplateRows = gridTemplate;
+    }
+    this.style.overflow = "hidden";
+    return html`
+            <style>
+                .resize-handle {
+                    position: relative;
+                    z-index: 10;
+                    background-color: var(--wa-color-neutral-border-quiet);
+                    transition: background-color var(--wa-transition-fast);
+                }
+                
+                .resize-handle:hover {
+                    background-color: var(--wa-color-brand-fill-normal);
+                }
+            </style>
+            
+            ${this.gridChildren.map((_, index) => {
+      if (index < this.gridChildren.length - 1) {
+        const gridCol = this.orientation === "horizontal" ? `${index * 2 + 2}` : "1";
+        const gridRow = this.orientation === "vertical" ? `${index * 2 + 2}` : "1";
+        return html`
+                        <div 
+                            class="resize-handle"
+                            style="
+                                cursor: ${this.orientation === "horizontal" ? "col-resize" : "row-resize"};
+                                grid-column: ${gridCol};
+                                grid-row: ${gridRow};
+                            "
+                            @mousedown=${(e) => this.startResize(e, index)}
+                        ></div>
+                    `;
+      }
+      return nothing;
+    })}
+        `;
+  }
+  // ============= Cleanup Methods =============
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizing) {
+      this.stopResize();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = void 0;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.height = "100%";
+    this.style.width = "100%";
+  }
+};
+__decorateClass([
+  property()
+], LyraResizableGrid.prototype, "orientation", 2);
+__decorateClass([
+  property()
+], LyraResizableGrid.prototype, "sizes", 2);
+__decorateClass([
+  state()
+], LyraResizableGrid.prototype, "gridSizes", 2);
+__decorateClass([
+  state()
+], LyraResizableGrid.prototype, "gridChildren", 2);
+LyraResizableGrid = __decorateClass([
+  customElement("lyra-resizable-grid")
+], LyraResizableGrid);
+export {
+  COMMAND_SAVE as C,
+  DIALOG_CONTRIBUTION_TARGET as D,
+  EDITOR_AREA_MAIN as E,
+  HIDE_DOT_RESOURCE as H,
+  LyraContainer as L,
+  MouseButton as M,
+  PANEL_BOTTOM as P,
+  SIDEBAR_AUXILIARY as S,
+  TOOLBAR_BOTTOM as T,
+  LyraDialogContent as a,
+  LyraElement as b,
+  LyraPart as c,
+  SIDEBAR_MAIN as d,
+  SIDEBAR_MAIN_BOTTOM as e,
+  SYSTEM_VIEWS as f,
+  TOOLBAR_BOTTOM_CENTER as g,
+  TOOLBAR_BOTTOM_END as h,
+  TOOLBAR_MAIN as i,
+  TOOLBAR_MAIN_CENTER as j,
+  TOOLBAR_MAIN_RIGHT as k,
+  TOPIC_SETTINGS_CHANGED as l,
+  appLoaderService as m,
+  appSettings as n,
+  confirmDialog as o,
+  esmShService as p,
+  extensionRegistry as q,
+  infoDialog as r,
+  navigableInfoDialog as s,
+  persistenceService as t,
+  promptDialog as u,
+  taskService as v,
+  TOPIC_EXTENSIONS_CHANGED as w,
+  CLOSE_BUTTON as x,
+  dialogService as y,
+  constants as z
+};
+//# sourceMappingURL=resizable-grid-BRH3MyZK.js.map