@eclipse-docks/core 0.7.127 → 0.7.130

package/dist/{parts-CRVxaDd-.js → parts-CAt8aeU8.js}

@@ -2,18 +2,18 @@ import { n as defaultLogger, o as rootContext, s as uiContext, t as createLogger
 import { T as toastInfo, _ as getContributionDisabled, a as TOPIC_COMMAND_REGISTERED, f as activeTasksSignal, g as contributionRegistry, h as TOPIC_CONTRIBUTEIONS_CHANGED, l as activeEditorSignal, n as watchSignal, o as commandRegistry, p as partDirtySignal, t as DocksWidget, u as activePartSignal, v as getContributionVisible, w as toastError, x as contributionTargetMappingRegistry, y as readReactiveBoolean } from "./widget-BqQtioK1.js";
 import { n as subscribe, t as publish } from "./events-B_ZxkU_G.js";
 import { a as File, i as Directory, l as TOPIC_WORKSPACE_CHANGED, m as persistenceService, o as FileContentType, p as workspaceService } from "./fs-access-DTXPsV1W.js";
-import "./webawesome-Y1_HnKa_.js";
+import "./webawesome-BGXn04Mw.js";
 import { css, html, nothing, render } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 import { customElement, property, state } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { when } from "lit/directives/when.js";
 import { repeat } from "lit/directives/repeat.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -45,6 +45,7 @@ var EDITOR_AREA_MAIN = "editor-area-main";
 var SIDEBAR_MAIN = "sidebar-main";
 var SIDEBAR_MAIN_BOTTOM = "sidebar-main-bottom";
 var SIDEBAR_AUXILIARY = "sidebar-auxiliary";
+var SIDEBAR_AUXILIARY_BOTTOM = "sidebar-auxiliary-bottom";
 var PANEL_BOTTOM = "panel-bottom";
 //#endregion
 //#region src/core/constants.ts
@@ -56,6 +57,7 @@ var constants_exports = /* @__PURE__ */ __exportAll({
 	MouseButton: () => MouseButton,
 	PANEL_BOTTOM: () => PANEL_BOTTOM,
 	SIDEBAR_AUXILIARY: () => SIDEBAR_AUXILIARY,
+	SIDEBAR_AUXILIARY_BOTTOM: () => SIDEBAR_AUXILIARY_BOTTOM,
 	SIDEBAR_MAIN: () => SIDEBAR_MAIN,
 	SIDEBAR_MAIN_BOTTOM: () => SIDEBAR_MAIN_BOTTOM,
 	SIDEBAR_MAIN_TOOLBAR: () => SIDEBAR_MAIN_TOOLBAR,
@@ -271,7 +273,7 @@ var taskService = new TaskService();
 rootContext.put("taskService", taskService);
 //#endregion
 //#region src/core/esmsh-service.ts
-var logger$3 = createLogger("EsmShService");
+var logger$4 = createLogger("EsmShService");
 var esmShService = new class EsmShService {
 	static {
 		this.ESM_SH_BASE = "https://esm.sh";
@@ -435,7 +437,7 @@ var esmShService = new class EsmShService {
 		if (this.isHttpUrl(source)) return source;
 		const parsed = this.parseSource(source);
 		if (!parsed) {
-			logger$3.warn(`Could not parse source identifier: ${source}`);
+			logger$4.warn(`Could not parse source identifier: ${source}`);
 			return source;
 		}
 		return this.buildEsmShUrl(parsed, options);
@@ -1080,7 +1082,7 @@ var DocksDialogContent = class extends DocksElement {
 };
 //#endregion
 //#region src/core/dialogservice.ts
-var logger$2 = createLogger("DialogService");
+var logger$3 = createLogger("DialogService");
 var DIALOG_CONTRIBUTION_TARGET = "dialogs";
 var OK_BUTTON = {
 	id: "ok",
@@ -1106,6 +1108,20 @@ function getDialogContainer() {
 	}
 	return dialogContainer;
 }
+function findWaDialog(root) {
+	if (root instanceof Element && root.tagName.toLowerCase() === "wa-dialog") return root;
+	const children = root instanceof Document || root instanceof DocumentFragment || root instanceof Element ? Array.from(root.children) : root instanceof ShadowRoot ? Array.from(root.children) : [];
+	for (const child of children) {
+		if (child instanceof Element && child.tagName.toLowerCase() === "wa-dialog") return child;
+		if (child instanceof Element && child.shadowRoot) {
+			const nested = findWaDialog(child.shadowRoot);
+			if (nested) return nested;
+		}
+		const nested = findWaDialog(child);
+		if (nested) return nested;
+	}
+	return null;
+}
 var DialogService = class {
 	constructor() {
 		this.contributions = /* @__PURE__ */ new Map();
@@ -1126,15 +1142,15 @@ var DialogService = class {
 		this.contributions.clear();
 		for (const contribution of contributions) {
 			if (!contribution.id) {
-				logger$2.warn("Dialog contribution missing id, skipping");
+				logger$3.warn("Dialog contribution missing id, skipping");
 				continue;
 			}
 			if (!contribution.component) {
-				logger$2.warn(`Dialog contribution "${contribution.id}" has no component function, skipping`);
+				logger$3.warn(`Dialog contribution "${contribution.id}" has no component function, skipping`);
 				continue;
 			}
-			if (!contribution.onButton) {
-				logger$2.warn(`Dialog contribution "${contribution.id}" has no onButton callback, skipping`);
+			if (!contribution.onButton && !contribution.selfContained) {
+				logger$3.warn(`Dialog contribution "${contribution.id}" has no onButton callback, skipping`);
 				continue;
 			}
 			this.contributions.set(contribution.id, contribution);
@@ -1143,50 +1159,68 @@ var DialogService = class {
 	async open(dialogId, state) {
 		const contribution = this.contributions.get(dialogId);
 		if (!contribution) {
-			logger$2.error(`Dialog "${dialogId}" not found`);
+			logger$3.error(`Dialog "${dialogId}" not found`);
 			throw new Error(`Dialog "${dialogId}" not found`);
 		}
 		return new Promise((resolve) => {
 			const container = getDialogContainer();
-			let isOpen = true;
+			let closed = false;
 			let dialogContentElement = null;
 			const cleanup = async () => {
-				if (!isOpen) return;
-				isOpen = false;
+				if (closed) return;
+				closed = true;
 				if (dialogContentElement) try {
 					await dialogContentElement.dispose();
 				} catch (error) {
 					const errorMessage = error instanceof Error ? error.message : String(error);
-					logger$2.error(`Error disposing dialog content for "${dialogId}": ${errorMessage}`);
+					logger$3.error(`Error disposing dialog content for "${dialogId}": ${errorMessage}`);
 				}
 				try {
 					const result = dialogContentElement ? dialogContentElement.getResult() : void 0;
-					await contribution.onButton("close", result, stateWithClose);
+					if (contribution.onButton) await contribution.onButton("close", result, stateWithClose);
 				} catch (error) {
 					const errorMessage = error instanceof Error ? error.message : String(error);
-					logger$2.error(`Error executing close callback for dialog "${dialogId}": ${errorMessage}`);
+					logger$3.error(`Error executing close callback for dialog "${dialogId}": ${errorMessage}`);
 				}
 				render(html``, container);
 				resolve();
 			};
+			const closeDialog = () => {
+				if (closed) return;
+				const dialog = findWaDialog(container);
+				if (dialog && dialog.open !== false) {
+					dialog.open = false;
+					return;
+				}
+				cleanup();
+			};
+			const handleAfterHide = () => {
+				cleanup();
+			};
 			const handleButtonClick = async (buttonId) => {
+				if (!contribution.onButton) return;
 				try {
 					const result = dialogContentElement ? dialogContentElement.getResult() : void 0;
-					if (await contribution.onButton(buttonId, result, stateWithClose) !== false) cleanup();
+					if (await contribution.onButton(buttonId, result, stateWithClose) !== false) closeDialog();
 				} catch (error) {
 					const errorMessage = error instanceof Error ? error.message : String(error);
-					logger$2.error(`Error executing button callback for dialog "${dialogId}": ${errorMessage}`);
-					cleanup();
+					logger$3.error(`Error executing button callback for dialog "${dialogId}": ${errorMessage}`);
+					closeDialog();
 				}
 			};
 			const buttons = contribution.buttons && contribution.buttons.length > 0 ? contribution.buttons : [OK_BUTTON];
-			if (state && typeof state === "object") state.close = cleanup;
 			const stateWithClose = {
 				...state,
-				close: cleanup
+				close: closeDialog,
+				onAfterHide: handleAfterHide
 			};
-			render(html`
-                <wa-dialog label="${state && typeof state === "object" && typeof state.label === "string" ? state.label : contribution.label || dialogId}" open @wa-request-close=${cleanup}>
+			if (state && typeof state === "object") {
+				state.close = closeDialog;
+				state.onAfterHide = handleAfterHide;
+			}
+			const dialogLabel = state && typeof state === "object" && typeof state.label === "string" ? state.label : contribution.label || dialogId;
+			render(contribution.selfContained ? contribution.component(stateWithClose) : html`
+                <wa-dialog label="${dialogLabel}" open @wa-after-hide=${handleAfterHide}>
                     <style>
                         .dialog-service-content {
                             display: flex;
@@ -1218,13 +1252,14 @@ var DialogService = class {
                          @dialog-cancel=${() => {
 				const cancelButton = buttons.find((b) => b.id === "cancel");
 				if (cancelButton) handleButtonClick(cancelButton.id);
-				else cleanup();
+				else closeDialog();
 			}}>
                         ${contribution.component(state)}
                         
                         <div class="dialog-service-footer">
                             ${buttons.map((button) => html`
                                 <wa-button 
+                                    data-dialog-button="${button.id}"
                                     variant="${button.variant || "default"}"
                                     ?disabled=${button.disabled}
                                     @click=${() => handleButtonClick(button.id)}
@@ -1747,7 +1782,7 @@ async function deleteIndexedDbWorkspaceData(directory) {
 }
 //#endregion
 //#region src/core/marketplaceregistry.ts
-var logger$1 = createLogger("MarketplaceRegistry");
+var logger$2 = createLogger("MarketplaceRegistry");
 var TOPIC_MARKETPLACE_CHANGED = "events/marketplaceregistry/changed";
 var KEY_CATALOG_URLS = "marketplace.catalogUrls";
 var MarketplaceRegistry = class {
@@ -1756,7 +1791,7 @@ var MarketplaceRegistry = class {
 		this.loadingPromises = /* @__PURE__ */ new Map();
 		this.loadCatalogUrls().then(() => {
 			this.refreshCatalogs().catch((err) => {
-				logger$1.error(`Failed to refresh catalogs on init: ${err.message}`);
+				logger$2.error(`Failed to refresh catalogs on init: ${err.message}`);
 			});
 		});
 	}
@@ -1765,7 +1800,7 @@ var MarketplaceRegistry = class {
 			const urls = await appSettings.get(KEY_CATALOG_URLS);
 			this.catalogUrls = Array.isArray(urls) ? urls : [];
 		} catch (error) {
-			logger$1.error(`Failed to load catalog URLs: ${error}`);
+			logger$2.error(`Failed to load catalog URLs: ${error}`);
 			this.catalogUrls = [];
 		}
 	}
@@ -1779,28 +1814,28 @@ var MarketplaceRegistry = class {
 	async addCatalogUrl(url) {
 		if (!this.isValidUrl(url)) throw new Error(`Invalid catalog URL: ${url}`);
 		if (this.catalogUrls.includes(url)) {
-			logger$1.debug(`Catalog URL already exists: ${url}`);
+			logger$2.debug(`Catalog URL already exists: ${url}`);
 			return;
 		}
 		this.catalogUrls.push(url);
 		await this.saveCatalogUrls();
-		logger$1.debug(`Added catalog URL: ${url}`);
+		logger$2.debug(`Added catalog URL: ${url}`);
 		try {
 			await this.refreshCatalogs();
 		} catch (error) {
-			logger$1.warn(`Failed to refresh catalogs immediately after adding: ${error}`);
+			logger$2.warn(`Failed to refresh catalogs immediately after adding: ${error}`);
 		}
 	}
 	async addCatalogUrls(urls) {
 		let added = 0;
 		for (const url of urls) {
 			if (!this.isValidUrl(url)) {
-				logger$1.warn(`Skipping invalid catalog URL: ${url}`);
+				logger$2.warn(`Skipping invalid catalog URL: ${url}`);
 				continue;
 			}
 			if (this.catalogUrls.includes(url)) continue;
 			this.catalogUrls.push(url);
-			logger$1.debug(`Added catalog URL: ${url}`);
+			logger$2.debug(`Added catalog URL: ${url}`);
 			added++;
 		}
 		if (added === 0) return;
@@ -1808,7 +1843,7 @@ var MarketplaceRegistry = class {
 		try {
 			await this.refreshCatalogs();
 		} catch (error) {
-			logger$1.warn(`Failed to refresh catalogs after adding URLs: ${error}`);
+			logger$2.warn(`Failed to refresh catalogs after adding URLs: ${error}`);
 		}
 	}
 	async removeCatalogUrl(url) {
@@ -1816,7 +1851,7 @@ var MarketplaceRegistry = class {
 		if (index === -1) return;
 		this.catalogUrls.splice(index, 1);
 		await this.saveCatalogUrls();
-		logger$1.info(`Removed catalog URL: ${url}`);
+		logger$2.info(`Removed catalog URL: ${url}`);
 	}
 	getCatalogUrls() {
 		return [...this.catalogUrls];
@@ -1847,7 +1882,7 @@ var MarketplaceRegistry = class {
 					extensions: data.extensions || []
 				};
 			} catch (error) {
-				logger$1.error(`Failed to fetch catalog from ${url}: ${error}`);
+				logger$2.error(`Failed to fetch catalog from ${url}: ${error}`);
 				throw error;
 			} finally {
 				this.loadingPromises.delete(url);
@@ -1858,7 +1893,7 @@ var MarketplaceRegistry = class {
 	}
 	async refreshCatalogs() {
 		const promises = this.catalogUrls.map((url) => this.fetchCatalog(url).catch((error) => {
-			logger$1.warn(`Failed to refresh catalog ${url}: ${error.message}`);
+			logger$2.warn(`Failed to refresh catalog ${url}: ${error.message}`);
 			return null;
 		}));
 		const catalogs = await Promise.allSettled(promises);
@@ -1878,8 +1913,8 @@ var MarketplaceRegistry = class {
 				});
 			}
 		});
-		logger$1.debug(`Refreshed ${this.catalogUrls.length} catalogs, ${registeredCount} extensions registered`);
-		if (registeredCount > 0) logger$1.info(`Marketplace: ${registeredCount} new extension(s) available`);
+		logger$2.debug(`Refreshed ${this.catalogUrls.length} catalogs, ${registeredCount} extensions registered`);
+		if (registeredCount > 0) logger$2.info(`Marketplace: ${registeredCount} new extension(s) available`);
 		publish(TOPIC_MARKETPLACE_CHANGED, { type: "refreshed" });
 	}
 	getMarketplaceExtension(extensionId) {
@@ -1908,16 +1943,10 @@ rootContext.put("marketplaceRegistry", marketplaceRegistry);
 * - Application: App-specific code, gs-* components, contributions
 * - App Loader: Bridge between framework and application
 */
-var logger = createLogger("AppLoader");
+var logger$1 = createLogger("AppLoader");
 function getLayoutIdFromApp(app) {
-	if (!app) return "standard";
-	const l = app.layout ?? app.layoutId;
-	return typeof l === "object" ? l.id : l ?? "standard";
-}
-function propsToAttributes(props) {
-	const out = {};
-	for (const [k, v] of Object.entries(props)) out[k] = typeof v === "boolean" ? v ? "true" : "false" : v;
-	return out;
+	const layout = app?.layout ?? "standard";
+	return typeof layout === "object" ? layout.id : layout;
 }
 /**
 * Extracts error message from an error object.
@@ -1946,9 +1975,6 @@ var appLoaderService = new class AppLoaderService {
 	static {
 		this.PREFERRED_APP_KEY = "preferredAppName";
 	}
-	static {
-		this.PREFERRED_LAYOUT_KEY = "preferredLayoutId";
-	}
 	/**
 	* Register an application with the framework.
 	* Optionally starts the apploader automatically after registration.
@@ -1967,7 +1993,8 @@ var appLoaderService = new class AppLoaderService {
 		}
 		app.name = app.name ?? "app";
 		app.version = app.version ?? "0.0.0";
-		if (this.apps.has(app.name)) logger.warn(`App '${app.name}' is already registered. Overwriting.`);
+		app.layout = app.layout ?? "standard";
+		if (this.apps.has(app.name)) logger$1.warn(`App '${app.name}' is already registered. Overwriting.`);
 		if (app.marketplaceCatalogUrls?.length) marketplaceRegistry.addCatalogUrls(app.marketplaceCatalogUrls).catch(() => {});
 		this.apps.set(app.name, app);
 		if (options?.defaultAppName) this.defaultAppName = options.defaultAppName;
@@ -1984,13 +2011,13 @@ var appLoaderService = new class AppLoaderService {
 	*/
 	async start() {
 		if (this.started) {
-			logger.debug("AppLoader already started");
+			logger$1.debug("AppLoader already started");
 			return;
 		}
 		this.started = true;
 		const appIdFromUrl = new URLSearchParams(window.location.search).get("appId");
 		const appIdFromPath = extractAppIdFromPath();
-		if (appIdFromPath) logger.info(`Extracted app ID from current page path: ${appIdFromPath}`);
+		if (appIdFromPath) logger$1.info(`Extracted app ID from current page path: ${appIdFromPath}`);
 		const appToLoad = await this.selectAppToLoad({
 			appIdFromUrl,
 			appIdFromPath
@@ -2018,10 +2045,10 @@ var appLoaderService = new class AppLoaderService {
 		if (!app) throw new Error(`App '${appName}' not found. Make sure it's registered.`);
 		this.dispatchLoadProgress("Starting…");
 		if (this.currentApp) {
-			logger.info(`Disposing current app: ${this.currentApp.name}`);
+			logger$1.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...`);
+				logger$1.info(`Disabling ${this.currentApp.extensions.length} extensions...`);
 				this.currentApp.extensions.forEach((extId) => {
 					extensionRegistry.disable(extId);
 				});
@@ -2037,19 +2064,19 @@ var appLoaderService = new class AppLoaderService {
 			});
 		}
 		if (app.contributions) {
-			logger.info("Registering app contributions...");
+			logger$1.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`);
+				logger$1.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`);
+				logger$1.info(`Registered ${app.contributions.extensions.length} app extensions`);
 			}
 		}
 		const extensionsSet = new Set(app.extensions || []);
@@ -2058,19 +2085,18 @@ var appLoaderService = new class AppLoaderService {
 		if (app.extensions.length > 0) {
 			this.dispatchLoadProgress("Enabling extensions…");
 			await Promise.all(app.extensions.map((extId) => extensionRegistry.enableAsync(extId).catch((e) => {
-				logger.error(`Failed to load extension ${extId}: ${getErrorMessage(e)}`);
+				logger$1.error(`Failed to load extension ${extId}: ${getErrorMessage(e)}`);
 			})));
 		}
 		this.dispatchLoadProgress("Loading extensions…");
 		await extensionRegistry.loadEnabledExtensions();
 		if (app.initialize) {
 			this.dispatchLoadProgress("Initializing…");
-			logger.info(`Initializing ${app.name}...`);
+			logger$1.info(`Initializing ${app.name}...`);
 			await app.initialize();
 		}
 		this.currentApp = app;
-		logger.info(`App ${app.name} loaded successfully`);
-		this.preferredLayoutId = await this.getPreferredLayoutId();
+		logger$1.info(`App ${app.name} loaded successfully`);
 		this.updateDocumentMetadata(app);
 		if (container) {
 			this.dispatchLoadProgress("Rendering layout…");
@@ -2103,19 +2129,17 @@ var appLoaderService = new class AppLoaderService {
 	*/
 	renderApp(container) {
 		if (!this.currentApp) throw new Error("No app loaded. Call loadApp() first.");
-		const layoutId = this.preferredLayoutId ?? getLayoutIdFromApp(this.currentApp);
+		const layoutId = getLayoutIdFromApp(this.currentApp);
 		const layouts = contributionRegistry.getContributions(SYSTEM_LAYOUTS);
 		let layout = layouts.find((c) => c.id === layoutId);
 		if (!layout) {
-			logger.warn(`Layout '${layoutId}' not found, falling back to 'standard'`);
+			logger$1.warn(`Layout '${layoutId}' not found, falling back to 'standard'`);
 			layout = layouts.find((c) => c.id === "standard");
 		}
 		if (!layout) throw new Error(`No layout found for layoutId '${layoutId}' and no 'standard' layout registered.`);
 		const r = layout.component;
 		let effectiveAttributes = {};
 		if (r && typeof r === "object" && "tag" in r && r.attributes) effectiveAttributes = { ...r.attributes };
-		const appLayout = this.currentApp?.layout;
-		if (typeof appLayout === "object" && appLayout.id === layoutId && appLayout.props) Object.assign(effectiveAttributes, propsToAttributes(appLayout.props));
 		container.innerHTML = "";
 		if (typeof r === "string") {
 			const el = document.createElement(r);
@@ -2128,7 +2152,7 @@ var appLoaderService = new class AppLoaderService {
 		} else if (typeof r === "function") render(r(), container);
 		else throw new Error(`Layout '${layout.id}' has invalid component.`);
 		if (layout.onShow) requestAnimationFrame(() => {
-			Promise.resolve(layout.onShow()).catch((err) => logger.error(`Layout onShow failed for '${layout.id}': ${getErrorMessage(err)}`));
+			Promise.resolve(layout.onShow()).catch((err) => logger$1.error(`Layout onShow failed for '${layout.id}': ${getErrorMessage(err)}`));
 		});
 	}
 	/**
@@ -2150,7 +2174,7 @@ var appLoaderService = new class AppLoaderService {
 		try {
 			return await appSettings.get(AppLoaderService.PREFERRED_APP_KEY);
 		} catch (error) {
-			logger.debug(`Failed to get preferred app ID from settings: ${getErrorMessage(error)}`);
+			logger$1.debug(`Failed to get preferred app ID from settings: ${getErrorMessage(error)}`);
 			return;
 		}
 	}
@@ -2162,9 +2186,9 @@ var appLoaderService = new class AppLoaderService {
 		try {
 			await appSettings.set(AppLoaderService.PREFERRED_APP_KEY, appId);
 			this.defaultAppName = appId;
-			logger.info(`Set preferred app to: ${appId}`);
+			logger$1.info(`Set preferred app to: ${appId}`);
 		} catch (error) {
-			logger.error(`Failed to persist preferred app: ${getErrorMessage(error)}`);
+			logger$1.error(`Failed to persist preferred app: ${getErrorMessage(error)}`);
 			throw error;
 		}
 	}
@@ -2172,28 +2196,7 @@ var appLoaderService = new class AppLoaderService {
 		return contributionRegistry.getContributions(SYSTEM_LAYOUTS);
 	}
 	getCurrentLayoutId() {
-		return this.preferredLayoutId ?? getLayoutIdFromApp(this.currentApp);
-	}
-	async getPreferredLayoutId() {
-		try {
-			return await appSettings.get(AppLoaderService.PREFERRED_LAYOUT_KEY);
-		} catch (error) {
-			logger.debug(`Failed to get preferred layout ID: ${getErrorMessage(error)}`);
-			return;
-		}
-	}
-	async setPreferredLayoutId(layoutId) {
-		if (!this.getRegisteredLayouts().some((l) => l.id === layoutId)) throw new Error(`Layout '${layoutId}' not found.`);
-		try {
-			await appSettings.set(AppLoaderService.PREFERRED_LAYOUT_KEY, layoutId);
-			this.preferredLayoutId = layoutId;
-			logger.info(`Set preferred layout to: ${layoutId}`);
-			if (this.currentApp && this.container) this.renderApp(this.container);
-			window.dispatchEvent(new CustomEvent("layout-changed", { detail: { layoutId } }));
-		} catch (error) {
-			logger.error(`Failed to persist preferred layout: ${getErrorMessage(error)}`);
-			throw error;
-		}
+		return getLayoutIdFromApp(this.currentApp);
 	}
 	/**
 	* Select which app to load based on priority:
@@ -2208,26 +2211,26 @@ var appLoaderService = new class AppLoaderService {
 		if (appIdFromUrl) {
 			const name = this.findAppNameBySegment(appIdFromUrl) ?? appIdFromUrl;
 			if (this.apps.has(name)) {
-				logger.info(`Loading app specified by URL parameter 'appId': ${name}`);
+				logger$1.info(`Loading app specified by URL parameter 'appId': ${name}`);
 				return name;
 			}
-			logger.warn(`App '${appIdFromUrl}' from URL parameter not found`);
+			logger$1.warn(`App '${appIdFromUrl}' from URL parameter not found`);
 		}
 		if (appIdFromPath) {
 			const name = this.findAppNameBySegment(appIdFromPath);
 			if (name) {
-				logger.info(`Loading app from URL path: ${appIdFromPath}`);
+				logger$1.info(`Loading app from URL path: ${appIdFromPath}`);
 				return name;
 			}
-			logger.debug(`App for path '${appIdFromPath}' not found, continuing search`);
+			logger$1.debug(`App for path '${appIdFromPath}' not found, continuing search`);
 		}
 		const preferred = await this.getPreferredAppId();
 		if (preferred && this.apps.has(preferred)) {
-			logger.info(`Loading preferred app from settings: ${preferred}`);
+			logger$1.info(`Loading preferred app from settings: ${preferred}`);
 			return preferred;
 		}
 		if (this.defaultAppName && this.apps.has(this.defaultAppName)) return this.defaultAppName;
-		if (this.defaultAppName) logger.warn(`Default app '${this.defaultAppName}' not found`);
+		if (this.defaultAppName) logger$1.warn(`Default app '${this.defaultAppName}' not found`);
 		const registeredApps = this.getRegisteredApps();
 		if (registeredApps.length > 0) return registeredApps[0].name;
 	}
@@ -2642,7 +2645,9 @@ var DocksNavigableInfoDialogContent = class DocksNavigableInfoDialogContent exte
 		action.callback();
 	}
 	handleClose() {
-		if (this.closest("wa-dialog") && this.resolveCallback) this.resolveCallback();
+		if (this.resolveCallback) this.resolveCallback();
+		const dialog = this.closest("wa-dialog");
+		if (dialog && dialog.open !== false) dialog.open = false;
 	}
 	static {
 		this.styles = [...DocksDialogContent.styles, css`
@@ -2983,85 +2988,641 @@ function filebrowserDialog(mode = "either") {
 	});
 }
 //#endregion
-//#region src/dialogs/version-info-dialog.ts
-var CLOSE_PRIMARY = {
-	...CLOSE_BUTTON,
-	variant: "primary"
-};
-var DocksVersionInfoDialogContent = class DocksVersionInfoDialogContent extends DocksDialogContent {
-	static {
-		this.styles = [...DocksDialogContent.styles, css`
-            :host {
-                display: block;
-            }
-
-            .dialog-body {
-                display: flex;
-                flex-direction: column;
-                gap: 0.75rem;
-                min-width: 32rem;
-                height: 600px;
-            }
-
-            .dialog-body docks-tabs {
-                flex: 1;
-                min-height: 0;
-            }
-        `];
+//#region src/core/contribution-names.ts
+var VIEW_FILEBROWSER = "view.filebrowser";
+var VIEW_LOG_TERMINAL = "view.logTerminal";
+var TOOLBAR_INFO = "toolbar.info";
+var TOOLBAR_FAST_VIEWS = "toolbar.fastViews";
+var TOOLBAR_LANGUAGE_SELECTOR = "toolbar.languageSelector";
+/** Main toolbar (right): layout picker (`docks-layout-switcher`). */
+var TOOLBAR_LAYOUT_SWITCHER = "toolbar.layoutSwitcher";
+/** Main toolbar (right): dark/light theme toggle (`switch_theme`). */
+var TOOLBAR_THEME_SWITCHER = "toolbar.themeSwitcher";
+/** Main toolbar (right): document fullscreen toggle (`fullscreen`). */
+var TOOLBAR_FULLSCREEN = "toolbar.fullscreen";
+/** Bottom-center toolbar: focused part title / active part indicator (`docks-part-name`). */
+var TOOLBAR_ACTIVE_PART_NAME = "toolbar.activePartName";
+/** Bottom-center toolbar: background tasks / progress (`docks-tasks`). */
+var TOOLBAR_TASKS = "toolbar.tasks";
+/** Main sidebar header toolbar: open extensions (`open_extensions` command). */
+var SIDEBAR_TOOLBAR_EXTENSIONS = "sidebar.toolbar.extensions";
+/** Default file-type → icon mappings on `system.icons`. */
+var SYSTEM_DEFAULT_FILE_ICONS = "system.icons.default";
+var ABOUT_TAB_RELEASE = "about.tab.release";
+var ABOUT_TAB_PACKAGES = "about.tab.packages";
+var ABOUT_TAB_ATTRIBUTIONS = "about.tab.attributions";
+var ATTRIBUTION_ECLIPSE_DOCKS = "attribution.eclipse-docks";
+var CTXMENU_FILEBROWSER_RENAME = "contextmenu.filebrowser.rename";
+var CTXMENU_FILEBROWSER_DELETE = "contextmenu.filebrowser.delete";
+//#endregion
+//#region src/parts/container.ts
+var DocksContainer = class extends DocksElement {};
+//#endregion
+//#region src/parts/part.ts
+var DocksPart = class DocksPart extends DocksContainer {
+	constructor(..._args) {
+		super(..._args);
+		this.scrollMode = "scroller";
+		this.dirty = false;
+		this.isEditor = false;
+		this.embedded = false;
+		this.onContentContextMenu = async (event) => {
+			const contextMenu = this.renderRoot.querySelector("docks-contextmenu");
+			if (!contextMenu) return;
+			if (await contextMenu.show({
+				x: event.clientX,
+				y: event.clientY
+			}, event)) event.preventDefault();
+		};
 	}
-	firstUpdated(changed) {
-		super.firstUpdated(changed);
-		const dialog = this.closest("wa-dialog");
-		if (dialog) {
-			dialog.style.setProperty("--width", "600px");
-			dialog.setAttribute("light-dismiss", "");
+	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 (docks-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;
+	}
+	/**
+	* Activates the tab that contains this part by walking up the DOM to the first
+	* docks-tabs ancestor and activating the tab panel that contains this part.
+	* Crosses Shadow DOM boundaries (e.g. wa-tab-group) via getRootNode().host.
+	* No-op if this part is not inside a docks-tabs / wa-tab-panel.
+	*/
+	activateContainingTab() {
+		let el = this;
+		let panelName = null;
+		let tabsEl = null;
+		while (el) {
+			const tag = el.tagName?.toLowerCase();
+			if (tag === "wa-tab-panel") panelName = el.getAttribute("name");
+			if (tag === "docks-tabs") {
+				tabsEl = el;
+				break;
+			}
+			const parent = el.parentElement;
+			if (parent) el = parent;
+			else {
+				const root = el.getRootNode();
+				el = root instanceof ShadowRoot ? root.host : null;
+			}
 		}
+		if (tabsEl && panelName != null && panelName !== "") tabsEl.activate(panelName);
+	}
+	/**
+	* 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;
+	}
+	renderContent() {
+		return nothing;
+	}
+	/** Part-level toolbar contributions (`toolbar:${partId}`). */
+	getToolbarTarget() {
+		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
+		return contributionKey ? `toolbar:${contributionKey}` : void 0;
+	}
+	/** Part-level context-menu contributions (`contextmenu:${partId}`). */
+	getContextMenuTarget() {
+		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
+		return contributionKey ? `contextmenu:${contributionKey}` : void 0;
+	}
+	syncIsEditorCapability() {
+		const next = this.save !== DocksPart.prototype.save;
+		if (next === this.isEditor) return;
+		this.isEditor = next;
+	}
+	maybeActivateForCoupledEditors() {
+		const coupled = this.tabContribution?.coupledEditors;
+		if (!coupled?.length) return;
+		const active = activeEditorSignal.get();
+		if (!(active instanceof DocksPart)) return;
+		const editorId = active.tabContribution?.editorId;
+		if (!editorId || !coupled.includes(editorId)) return;
+		this.activateContainingTab();
 	}
 	render() {
-		const app = appLoaderService.getCurrentApp();
+		const toolbarTarget = this.getToolbarTarget();
+		const contextMenuTarget = this.getContextMenuTarget();
+		const toolbarEnabled = this.tabContribution?.toolbar !== false;
+		const contextMenuEnabled = this.tabContribution?.contextMenu !== false;
+		const scrollMode = this.scrollMode;
+		const scopeTokens = this.isEditor ? ["system.editors", ".system.editors"] : [];
+		const content = this.renderContent();
+		const contentNode = scrollMode === "scroller" ? html`
+                <wa-scroller class="part-content-scroll" orientation="vertical">
+                    <div class="part-content-inner">${content}</div>
+                </wa-scroller>
+            ` : html`<div class="part-content-inner">${content}</div>`;
 		return html`
-            <div class="dialog-body">
-                ${app?.description ? html`<small>${app.description}</small>` : ""}
-                <docks-tabs id=${ABOUT_TABS}></docks-tabs>
+            <div class="part-shell">
+                ${toolbarEnabled ? html`
+                    <docks-toolbar
+                        class="part-toolbar"
+                        id=${ifDefined(toolbarTarget)}
+                        .scopeTokens=${scopeTokens}
+                        .partToolbarRenderer=${() => this.renderToolbar()}>
+                    </docks-toolbar>
+                ` : nothing}
+                <div class="part-content ${scrollMode === "native" ? "native-scroll" : ""}" @contextmenu=${contextMenuEnabled ? this.onContentContextMenu : void 0}>
+                    ${contentNode}
+                </div>
+                ${contextMenuEnabled ? html`
+                    <docks-contextmenu
+                        id=${ifDefined(contextMenuTarget)}
+                        .scopeTokens=${scopeTokens}
+                        .partContextMenuRenderer=${() => this.renderContextMenu()}>
+                    </docks-contextmenu>
+                ` : nothing}
             </div>
         `;
 	}
-};
-DocksVersionInfoDialogContent = _decorate([customElement("docks-version-info-dialog-content")], DocksVersionInfoDialogContent);
-contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
-	id: "version-info",
-	label: "About",
-	buttons: [CLOSE_PRIMARY],
-	component: () => html`<docks-version-info-dialog-content></docks-version-info-dialog-content>`,
-	onButton: async () => true
-});
-function versionInfoDialog() {
-	const app = appLoaderService.getCurrentApp();
-	return dialogService.open("version-info", { label: `About ${app?.name ?? ""} - ${app?.version ?? "0.0.0"}` });
-}
-//#endregion
-//#region src/core/dropdown-menu-utils.ts
-function isOpenDropdown(element) {
-	if (element.localName !== "wa-dropdown") return false;
-	const dropdown = element;
-	return dropdown.open === true || dropdown.hasAttribute("open");
-}
-function elementsFromEventPath(event) {
-	const fromComposedPath = event.composedPath().filter((node) => node instanceof Element);
-	if (fromComposedPath.length > 0) return fromComposedPath;
-	if (!(event.target instanceof Element)) return [];
-	const path = [];
-	let current = event.target;
-	while (current) {
-		path.push(current);
-		const root = current.getRootNode();
-		if (root instanceof ShadowRoot) {
-			current = root.host;
-			continue;
-		}
-		current = current.parentElement;
-	}
-	return path;
+	updated(_changedProperties) {
+		super.updated(_changedProperties);
+		this.syncIsEditorCapability();
+		if (_changedProperties.has("tabContribution")) this.maybeActivateForCoupledEditors();
+		if (_changedProperties.has("dirty")) {
+			if (_changedProperties.get("dirty") !== void 0) this.dispatchEvent(new CustomEvent("dirty", {
+				detail: this.dirty,
+				bubbles: true
+			}));
+		}
+	}
+	doClose() {}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	close() {
+		this.doClose();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncIsEditorCapability();
+		queueMicrotask(() => this.syncIsEditorCapability());
+		this.watch(activeEditorSignal, () => this.maybeActivateForCoupledEditors());
+	}
+	save() {}
+	isDirty() {
+		return this.dirty;
+	}
+	markDirty(dirty) {
+		this.dirty = dirty;
+		partDirtySignal.set(null);
+		partDirtySignal.set(this);
+		activePartSignal.set(null);
+		activePartSignal.set(this);
+	}
+	static {
+		this.baseStyles = css`
+        :host {
+            display: block;
+        }
+
+        .part-shell {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            height: 100%;
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .part-content {
+            min-height: 0;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .part-content.native-scroll {
+            overflow: auto;
+        }
+
+        .part-content-scroll {
+            width: 100%;
+            height: 100%;
+        }
+
+        .part-content-inner {
+            height: 100%;
+            min-height: 100%;
+        }
+
+        :host([embedded]) {
+            height: auto;
+        }
+
+        :host([embedded]) .part-shell {
+            height: auto;
+            overflow: visible;
+            grid-template-rows: auto;
+        }
+
+        :host([embedded]) .part-content {
+            overflow: visible;
+            min-height: 0;
+        }
+
+        :host([embedded]) .part-content-inner {
+            height: auto;
+            min-height: 0;
+        }
+
+        .part-toolbar {
+            min-height: 0;
+        }
+    `;
+	}
+	static finalizeStyles(styles) {
+		const own = super.finalizeStyles(styles);
+		return [DocksPart.baseStyles, ...own];
+	}
+};
+_decorate([property()], DocksPart.prototype, "dirty", void 0);
+_decorate([property({ attribute: false })], DocksPart.prototype, "tabContribution", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: false
+})], DocksPart.prototype, "isEditor", void 0);
+_decorate([property({
+	type: Boolean,
+	reflect: true
+})], DocksPart.prototype, "embedded", void 0);
+//#endregion
+//#region src/components/release-history.ts
+var logger = createLogger("ReleaseHistory");
+async function loadReleases(releaseHistory) {
+	if (!releaseHistory) return [];
+	if (typeof releaseHistory !== "function") return releaseHistory;
+	try {
+		return await releaseHistory();
+	} catch (error) {
+		logger.error(`Failed to load release history from app: ${error instanceof Error ? error.message : String(error)}`);
+		return [];
+	}
+}
+function semverEqual(a, b) {
+	return a.replace(/^v/i, "") === b.replace(/^v/i, "");
+}
+function isNewerThan(releaseTag, currentVersion) {
+	const currentParts = currentVersion.replace(/^v/i, "").split(".").map(Number);
+	const releaseParts = releaseTag.replace(/^v/i, "").split(".").map(Number);
+	for (let i = 0; i < Math.max(currentParts.length, releaseParts.length); i++) {
+		const current = currentParts[i] || 0;
+		const releasePart = releaseParts[i] || 0;
+		if (releasePart > current) return true;
+		if (releasePart < current) return false;
+	}
+	return false;
+}
+var DocksReleaseHistory = class DocksReleaseHistory extends DocksPart {
+	constructor(..._args) {
+		super(..._args);
+		this.scrollMode = "none";
+		this.appVersion = "0.0.0";
+		this.releases = [];
+		this.currentReleaseIndex = 0;
+	}
+	static {
+		this.styles = [css`
+            .release-panel {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                padding: 0.75rem;
+                box-sizing: border-box;
+            }
+
+            .release-body {
+                white-space: normal;
+            }
+        `];
+	}
+	doInitUI() {
+		this.load();
+	}
+	async load() {
+		const app = appLoaderService.getCurrentApp();
+		this.appVersion = app?.version ?? "0.0.0";
+		this.releases = await loadReleases(app?.releaseHistory);
+		const currentIndex = this.releases.findIndex((release) => semverEqual(release.tag_name, this.appVersion));
+		this.currentReleaseIndex = currentIndex >= 0 ? currentIndex : 0;
+		this.notifyChanged();
+	}
+	getNavState() {
+		return {
+			hasMultiple: this.releases.length > 1,
+			atOldest: this.currentReleaseIndex >= this.releases.length - 1,
+			atNewest: this.currentReleaseIndex <= 0
+		};
+	}
+	showOlder() {
+		if (this.currentReleaseIndex < this.releases.length - 1) {
+			this.currentReleaseIndex += 1;
+			this.notifyChanged();
+		}
+	}
+	showNewer() {
+		if (this.currentReleaseIndex > 0) {
+			this.currentReleaseIndex -= 1;
+			this.notifyChanged();
+		}
+	}
+	notifyChanged() {
+		this.dispatchEvent(new CustomEvent("release-history-changed", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	renderContent() {
+		const release = this.releases[this.currentReleaseIndex];
+		if (!release) return html`<div class="release-panel">No release history available.</div>`;
+		const isCurrent = semverEqual(release.tag_name, this.appVersion);
+		const showUpdateHint = !isCurrent && isNewerThan(release.tag_name, this.appVersion);
+		const bodyHtml = release.body ? parseMarkdownHtml(release.body) : "";
+		return html`
+            <div class="release-panel">
+                <p>
+                    <strong>Version:</strong> ${release.tag_name}${isCurrent ? " (Current)" : ""}
+                </p>
+                <p>
+                    <strong>Released:</strong>
+                    <wa-format-date
+                        .date=${release.published_at}
+                        month="short"
+                        day="numeric"
+                        year="numeric"
+                    ></wa-format-date>
+                </p>
+                ${showUpdateHint ? html`
+                        <wa-callout variant="warning">
+                            <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
+                            A newer release is available than the version you are running.
+                            Use <strong>Update Available</strong> in the toolbar when it appears.
+                        </wa-callout>
+                    ` : ""}
+                ${bodyHtml ? html`<div class="release-body">${unsafeHTML(bodyHtml)}</div>` : ""}
+            </div>
+        `;
+	}
+};
+_decorate([state()], DocksReleaseHistory.prototype, "appVersion", void 0);
+_decorate([state()], DocksReleaseHistory.prototype, "releases", void 0);
+_decorate([state()], DocksReleaseHistory.prototype, "currentReleaseIndex", void 0);
+DocksReleaseHistory = _decorate([customElement("docks-release-history")], DocksReleaseHistory);
+//#endregion
+//#region src/dialogs/version-info-dialog.ts
+var EMPTY_NAV = {
+	hasMultiple: false,
+	atOldest: true,
+	atNewest: true
+};
+var DocksVersionInfoDialog = class DocksVersionInfoDialog extends DocksDialogContent {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.activeTab = null;
+		this.releaseNav = EMPTY_NAV;
+		this.onReleaseHistoryChanged = () => {
+			this.syncReleaseNav();
+		};
+	}
+	static {
+		this.styles = [...DocksDialogContent.styles, css`
+            :host {
+                display: block;
+            }
+
+            wa-dialog {
+                --width: 600px;
+            }
+
+            wa-dialog::part(body) {
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+                overflow: hidden;
+            }
+
+            .dialog-body {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+                min-width: 32rem;
+                height: min(70vh, 36rem);
+                min-height: min(70vh, 36rem);
+                overflow: hidden;
+            }
+
+            .dialog-body docks-tabs {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow: hidden;
+            }
+
+            .dialog-footer {
+                display: flex;
+                gap: 0.5rem;
+                justify-content: flex-end;
+                width: 100%;
+            }
+        `];
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		this.addEventListener("release-history-changed", this.onReleaseHistoryChanged);
+		this.updateComplete.then(() => {
+			this.attachTabListener();
+			this.syncActiveTab();
+			this.syncReleaseNav();
+		});
+	}
+	disconnectedCallback() {
+		this.removeEventListener("release-history-changed", this.onReleaseHistoryChanged);
+		super.disconnectedCallback();
+	}
+	attachTabListener() {
+		const tabGroup = this.getAboutTabs()?.shadowRoot?.querySelector("wa-tab-group");
+		if (!tabGroup || tabGroup.hasAttribute("data-version-info-listener")) return;
+		tabGroup.setAttribute("data-version-info-listener", "");
+		tabGroup.addEventListener("wa-tab-show", (event) => {
+			const name = event.detail?.name;
+			if (name) this.activeTab = name;
+		});
+	}
+	getAboutTabs() {
+		return this.renderRoot.querySelector("docks-tabs");
+	}
+	getReleaseHistory() {
+		const part = this.getAboutTabs()?.getTabPart(ABOUT_TAB_RELEASE);
+		return part instanceof DocksReleaseHistory ? part : null;
+	}
+	syncActiveTab() {
+		const tabGroup = this.getAboutTabs()?.shadowRoot?.querySelector("wa-tab-group");
+		this.activeTab = tabGroup?.getAttribute("active") || tabGroup?.active || null;
+	}
+	syncReleaseNav() {
+		this.releaseNav = this.getReleaseHistory()?.getNavState() ?? EMPTY_NAV;
+	}
+	handleClose() {
+		const dialog = this.renderRoot.querySelector("wa-dialog");
+		if (dialog && dialog.open !== false) {
+			dialog.open = false;
+			return;
+		}
+		this.close?.();
+	}
+	handleAfterHide() {
+		this.onAfterHide?.();
+	}
+	showOlderRelease() {
+		this.getReleaseHistory()?.showOlder();
+	}
+	showNewerRelease() {
+		this.getReleaseHistory()?.showNewer();
+	}
+	render() {
+		const app = appLoaderService.getCurrentApp();
+		const showReleaseNav = this.activeTab === "about.tab.release" && this.releaseNav.hasMultiple;
+		return html`
+            <wa-dialog
+                label=${this.label}
+                open
+                light-dismiss
+                with-footer
+                @wa-after-hide=${this.handleAfterHide}
+            >
+                <div class="dialog-body">
+                    ${app?.description ? html`<small>${app.description}</small>` : ""}
+                    <docks-tabs id=${ABOUT_TABS} fill-height></docks-tabs>
+                </div>
+                <div slot="footer" class="dialog-footer">
+                    ${showReleaseNav ? html`
+                            <wa-button
+                                variant="default"
+                                ?disabled=${this.releaseNav.atOldest}
+                                @click=${this.showOlderRelease}
+                            >
+                                ← Previous
+                            </wa-button>
+                            <wa-button
+                                variant="default"
+                                ?disabled=${this.releaseNav.atNewest}
+                                @click=${this.showNewerRelease}
+                            >
+                                Next →
+                            </wa-button>
+                        ` : nothing}
+                    <wa-button variant="primary" @click=${this.handleClose}>Close</wa-button>
+                </div>
+            </wa-dialog>
+        `;
+	}
+};
+_decorate([property({ type: String })], DocksVersionInfoDialog.prototype, "label", void 0);
+_decorate([property({ attribute: false })], DocksVersionInfoDialog.prototype, "close", void 0);
+_decorate([property({ attribute: false })], DocksVersionInfoDialog.prototype, "onAfterHide", void 0);
+_decorate([state()], DocksVersionInfoDialog.prototype, "activeTab", void 0);
+_decorate([state()], DocksVersionInfoDialog.prototype, "releaseNav", void 0);
+DocksVersionInfoDialog = _decorate([customElement("docks-version-info-dialog")], DocksVersionInfoDialog);
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+	id: "version-info",
+	label: "About",
+	selfContained: true,
+	component: (state) => html`
+        <docks-version-info-dialog
+            .label=${state?.label ?? ""}
+            .close=${state?.close}
+            .onAfterHide=${state?.onAfterHide}
+        ></docks-version-info-dialog>
+    `
+});
+function versionInfoDialog() {
+	const app = appLoaderService.getCurrentApp();
+	return dialogService.open("version-info", { label: `About ${app?.name ?? ""} - ${app?.version ?? "0.0.0"}` });
+}
+//#endregion
+//#region src/core/dropdown-menu-utils.ts
+function isOpenDropdown(element) {
+	if (element.localName !== "wa-dropdown") return false;
+	const dropdown = element;
+	return dropdown.open === true || dropdown.hasAttribute("open");
+}
+function elementsFromEventPath(event) {
+	const fromComposedPath = event.composedPath().filter((node) => node instanceof Element);
+	if (fromComposedPath.length > 0) return fromComposedPath;
+	if (!(event.target instanceof Element)) return [];
+	const path = [];
+	let current = event.target;
+	while (current) {
+		path.push(current);
+		const root = current.getRootNode();
+		if (root instanceof ShadowRoot) {
+			current = root.host;
+			continue;
+		}
+		current = current.parentElement;
+	}
+	return path;
 }
 function elementTargetsOpenDropdown(element) {
 	if (isOpenDropdown(element)) return true;
@@ -3358,21 +3919,36 @@ DocksToolbar = _decorate([customElement("docks-toolbar")], DocksToolbar);
 * A part can expose both surfaces with the same part id but different prefixes, registering
 * different contributions on each. Feature-scoped targets (e.g. `filebrowser.create`) may also
 * be referenced explicitly from either surface when several controls share the same item set.
+*
+* Command-backed items rely on the parent {@link https://webawesome.com/docs/components/dropdown | wa-dropdown}
+* `wa-select` event (see {@link handleDropdownWaSelect}) so the popup closes cleanly before
+* native dialogs such as `showDirectoryPicker` open.
 */
-function closeParentDropdown(event) {
-	const dropdown = event.target?.closest("wa-dropdown");
-	if (dropdown && dropdown.open !== void 0) dropdown.open = false;
+function parseDropdownItemParams(item) {
+	const raw = item.getAttribute("data-params");
+	if (!raw) return {};
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return {};
+	}
+}
+function getDropdownItemCommand(item) {
+	return item.getAttribute("data-cmd") || item.getAttribute("value") || void 0;
+}
+/** Handles `wa-select` from a parent `wa-dropdown` and runs the backing command. */
+function handleDropdownWaSelect(event) {
+	const item = event.detail?.item;
+	if (!item || item.disabled || item.hasAttribute("disabled")) return;
+	const cmd = getDropdownItemCommand(item);
+	if (!cmd) return;
+	commandRegistry.execute(cmd, commandRegistry.createExecutionContext(parseDropdownItemParams(item)));
 }
-function onDropdownItemClick(options) {
+function onDropdownActionClick(options) {
 	return (event) => {
 		if (readReactiveBoolean(options.disabled, false)) return;
 		event.stopPropagation();
-		closeParentDropdown(event);
-		if (options.action) {
-			options.action(event);
-			return;
-		}
-		if (options.cmd) commandRegistry.execute(options.cmd, commandRegistry.createExecutionContext(options.params ?? {}));
+		options.action?.(event);
 	};
 }
 function keybindingDetails(cmd) {
@@ -3384,12 +3960,16 @@ function keybindingDetails(cmd) {
 /** Renders a native {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}. */
 function renderDropdownItem(options) {
 	const iconSpec = options.icon ?? "";
+	const paramsJson = options.params && Object.keys(options.params).length > 0 ? JSON.stringify(options.params) : void 0;
 	return html`
         <wa-dropdown-item
             slot=${options.slot ?? nothing}
             variant=${options.variant ?? "default"}
+            value=${options.cmd ?? nothing}
+            data-cmd=${options.cmd ?? nothing}
+            data-params=${paramsJson ?? nothing}
             ?disabled=${readReactiveBoolean(options.disabled, false)}
-            @click=${onDropdownItemClick(options)}>
+            @click=${options.action ? onDropdownActionClick(options) : nothing}>
             ${iconSpec ? icon(iconSpec, {
 		label: options.title ?? options.label,
 		slot: "icon"
@@ -3567,385 +4147,118 @@ var DocksContextMenu = class DocksContextMenu extends DocksElement {
 		}
 		return element;
 	}
-	getHostPart() {
-		const root = this.getRootNode();
-		if (root instanceof ShadowRoot && root.host instanceof HTMLElement) return root.host;
-		return null;
-	}
-	/**
-	* 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);
-		}
-	}
-	/** Opens the menu at `position`. Returns false when there is nothing to show (no thin empty panel). */
-	async show(position, mouseEvent) {
-		if (!this.hasMenuBody()) return false;
-		if (mouseEvent) {
-			this.triggerClickUnderCursor(mouseEvent);
-			await this.getHostPart()?.updateComplete;
-		}
-		if (this.isOpen) {
-			this.isOpen = false;
-			await this.updateComplete;
-		}
-		this.menuPosition = position;
-		this.isOpen = true;
-		await this.updateComplete;
-		this.syncVirtualPopupAnchor();
-		document.addEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
-		return true;
-	}
-	/** Points wa-dropdown's internal wa-popup at the pointer via a VirtualElement anchor. */
-	syncVirtualPopupAnchor() {
-		const popup = this.dropdownRef.value?.shadowRoot?.querySelector("wa-popup");
-		if (!popup) return;
-		popup.anchor = this.virtualAnchor;
-		popup.reposition();
-	}
-	onClose() {
-		if (!this.isOpen) return;
-		this.isOpen = false;
-		document.removeEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has("isOpen") && this.isOpen) this.syncVirtualPopupAnchor();
-	}
-	renderContribution(contribution) {
-		return renderDropdownContribution(contribution);
-	}
-	render() {
-		const partContent = this.partContextMenuRenderer ? this.partContextMenuRenderer() : nothing;
-		return html`
-            <wa-dropdown
-                ${ref(this.dropdownRef)}
-                ?open=${this.isOpen}
-                @submenu-opening=${this.handleSubmenuOpening}
-                @wa-after-hide=${this.onClose}>
-                <span slot="trigger" hidden aria-hidden="true"></span>
-                
-                ${partContent}
-                ${this.contributions.map((c) => this.renderContribution(c))}
-            </wa-dropdown>
-        `;
-	}
-	static {
-		this.styles = css`
-        :host {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 0;
-            height: 0;
-            pointer-events: none;
-            z-index: 10000;
-        }
-
-        wa-dropdown {
-            pointer-events: none;
-            min-width: 200px;
-        }
-
-        wa-dropdown:state(open) {
-            pointer-events: auto;
-        }
-        
-        wa-dropdown::part(menu) {
-            min-width: 200px;
-        }
-    `;
-	}
-};
-_decorate([property({ attribute: false })], DocksContextMenu.prototype, "scopeTokens", void 0);
-_decorate([property({ attribute: false })], DocksContextMenu.prototype, "partContextMenuRenderer", void 0);
-_decorate([state()], DocksContextMenu.prototype, "contributions", void 0);
-_decorate([state()], DocksContextMenu.prototype, "isOpen", void 0);
-DocksContextMenu = _decorate([customElement("docks-contextmenu")], DocksContextMenu);
-//#endregion
-//#region src/parts/container.ts
-var DocksContainer = class extends DocksElement {};
-//#endregion
-//#region src/parts/part.ts
-var DocksPart = class DocksPart extends DocksContainer {
-	constructor(..._args) {
-		super(..._args);
-		this.scrollMode = "scroller";
-		this.dirty = false;
-		this.isEditor = false;
-		this.onContentContextMenu = async (event) => {
-			const contextMenu = this.renderRoot.querySelector("docks-contextmenu");
-			if (!contextMenu) return;
-			if (await contextMenu.show({
-				x: event.clientX,
-				y: event.clientY
-			}, event)) event.preventDefault();
-		};
-	}
-	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 (docks-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;
-	}
-	/**
-	* Activates the tab that contains this part by walking up the DOM to the first
-	* docks-tabs ancestor and activating the tab panel that contains this part.
-	* Crosses Shadow DOM boundaries (e.g. wa-tab-group) via getRootNode().host.
-	* No-op if this part is not inside a docks-tabs / wa-tab-panel.
-	*/
-	activateContainingTab() {
-		let el = this;
-		let panelName = null;
-		let tabsEl = null;
-		while (el) {
-			const tag = el.tagName?.toLowerCase();
-			if (tag === "wa-tab-panel") panelName = el.getAttribute("name");
-			if (tag === "docks-tabs") {
-				tabsEl = el;
-				break;
-			}
-			const parent = el.parentElement;
-			if (parent) el = parent;
-			else {
-				const root = el.getRootNode();
-				el = root instanceof ShadowRoot ? root.host : null;
-			}
-		}
-		if (tabsEl && panelName != null && panelName !== "") tabsEl.activate(panelName);
-	}
-	/**
-	* 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;
-	}
-	renderContent() {
-		return nothing;
-	}
-	/** Part-level toolbar contributions (`toolbar:${partId}`). */
-	getToolbarTarget() {
-		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
-		return contributionKey ? `toolbar:${contributionKey}` : void 0;
-	}
-	/** Part-level context-menu contributions (`contextmenu:${partId}`). */
-	getContextMenuTarget() {
-		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
-		return contributionKey ? `contextmenu:${contributionKey}` : void 0;
-	}
-	syncIsEditorCapability() {
-		const next = this.save !== DocksPart.prototype.save;
-		if (next === this.isEditor) return;
-		this.isEditor = next;
-	}
-	maybeActivateForCoupledEditors() {
-		const coupled = this.tabContribution?.coupledEditors;
-		if (!coupled?.length) return;
-		const active = activeEditorSignal.get();
-		if (!(active instanceof DocksPart)) return;
-		const editorId = active.tabContribution?.editorId;
-		if (!editorId || !coupled.includes(editorId)) return;
-		this.activateContainingTab();
-	}
-	render() {
-		const toolbarTarget = this.getToolbarTarget();
-		const contextMenuTarget = this.getContextMenuTarget();
-		const toolbarEnabled = this.tabContribution?.toolbar !== false;
-		const contextMenuEnabled = this.tabContribution?.contextMenu !== false;
-		const scrollMode = this.scrollMode;
-		const scopeTokens = this.isEditor ? ["system.editors", ".system.editors"] : [];
-		const content = this.renderContent();
-		const contentNode = scrollMode === "scroller" ? html`
-                <wa-scroller class="part-content-scroll" orientation="vertical">
-                    <div class="part-content-inner">${content}</div>
-                </wa-scroller>
-            ` : html`<div class="part-content-inner">${content}</div>`;
-		return html`
-            <div class="part-shell">
-                ${toolbarEnabled ? html`
-                    <docks-toolbar
-                        class="part-toolbar"
-                        id=${ifDefined(toolbarTarget)}
-                        .scopeTokens=${scopeTokens}
-                        .partToolbarRenderer=${() => this.renderToolbar()}>
-                    </docks-toolbar>
-                ` : nothing}
-                <div class="part-content ${scrollMode === "native" ? "native-scroll" : ""}" @contextmenu=${contextMenuEnabled ? this.onContentContextMenu : void 0}>
-                    ${contentNode}
-                </div>
-                ${contextMenuEnabled ? html`
-                    <docks-contextmenu
-                        id=${ifDefined(contextMenuTarget)}
-                        .scopeTokens=${scopeTokens}
-                        .partContextMenuRenderer=${() => this.renderContextMenu()}>
-                    </docks-contextmenu>
-                ` : nothing}
-            </div>
-        `;
+	getHostPart() {
+		const root = this.getRootNode();
+		if (root instanceof ShadowRoot && root.host instanceof HTMLElement) return root.host;
+		return null;
 	}
-	updated(_changedProperties) {
-		super.updated(_changedProperties);
-		this.syncIsEditorCapability();
-		if (_changedProperties.has("tabContribution")) this.maybeActivateForCoupledEditors();
-		if (_changedProperties.has("dirty")) {
-			if (_changedProperties.get("dirty") !== void 0) this.dispatchEvent(new CustomEvent("dirty", {
-				detail: this.dirty,
-				bubbles: true
-			}));
+	/**
+	* 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);
 		}
 	}
-	doClose() {}
-	disconnectedCallback() {
-		super.disconnectedCallback();
+	/** Opens the menu at `position`. Returns false when there is nothing to show (no thin empty panel). */
+	async show(position, mouseEvent) {
+		if (!this.hasMenuBody()) return false;
+		if (mouseEvent) {
+			this.triggerClickUnderCursor(mouseEvent);
+			await this.getHostPart()?.updateComplete;
+		}
+		if (this.isOpen) {
+			this.isOpen = false;
+			await this.updateComplete;
+		}
+		this.menuPosition = position;
+		this.isOpen = true;
+		await this.updateComplete;
+		this.syncVirtualPopupAnchor();
+		document.addEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
+		return true;
 	}
-	close() {
-		this.doClose();
+	/** Points wa-dropdown's internal wa-popup at the pointer via a VirtualElement anchor. */
+	syncVirtualPopupAnchor() {
+		const popup = this.dropdownRef.value?.shadowRoot?.querySelector("wa-popup");
+		if (!popup) return;
+		popup.anchor = this.virtualAnchor;
+		popup.reposition();
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.syncIsEditorCapability();
-		queueMicrotask(() => this.syncIsEditorCapability());
-		this.watch(activeEditorSignal, () => this.maybeActivateForCoupledEditors());
+	onClose() {
+		if (!this.isOpen) return;
+		this.isOpen = false;
+		document.removeEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
 	}
-	save() {}
-	isDirty() {
-		return this.dirty;
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("isOpen") && this.isOpen) this.syncVirtualPopupAnchor();
 	}
-	markDirty(dirty) {
-		this.dirty = dirty;
-		partDirtySignal.set(null);
-		partDirtySignal.set(this);
-		activePartSignal.set(null);
-		activePartSignal.set(this);
+	renderContribution(contribution) {
+		return renderDropdownContribution(contribution);
+	}
+	render() {
+		const partContent = this.partContextMenuRenderer ? this.partContextMenuRenderer() : nothing;
+		return html`
+            <wa-dropdown
+                ${ref(this.dropdownRef)}
+                ?open=${this.isOpen}
+                @submenu-opening=${this.handleSubmenuOpening}
+                @wa-select=${handleDropdownWaSelect}
+                @wa-after-hide=${this.onClose}>
+                <span slot="trigger" hidden aria-hidden="true"></span>
+                
+                ${partContent}
+                ${this.contributions.map((c) => this.renderContribution(c))}
+            </wa-dropdown>
+        `;
 	}
 	static {
-		this.baseStyles = css`
+		this.styles = css`
         :host {
-            display: block;
-        }
-
-        .part-shell {
-            display: grid;
-            grid-template-rows: auto minmax(0, 1fr);
-            height: 100%;
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .part-content {
-            min-height: 0;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .part-content.native-scroll {
-            overflow: auto;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+            z-index: 10000;
         }
 
-        .part-content-scroll {
-            width: 100%;
-            height: 100%;
+        wa-dropdown {
+            pointer-events: none;
+            min-width: 200px;
         }
 
-        .part-content-inner {
-            height: 100%;
-            min-height: 100%;
+        wa-dropdown:state(open) {
+            pointer-events: auto;
         }
-
-        .part-toolbar {
-            min-height: 0;
+        
+        wa-dropdown::part(menu) {
+            min-width: 200px;
         }
     `;
 	}
-	static finalizeStyles(styles) {
-		const own = super.finalizeStyles(styles);
-		return [DocksPart.baseStyles, ...own];
-	}
 };
-_decorate([property()], DocksPart.prototype, "dirty", void 0);
-_decorate([property({ attribute: false })], DocksPart.prototype, "tabContribution", void 0);
-_decorate([property({
-	type: Boolean,
-	attribute: false
-})], DocksPart.prototype, "isEditor", void 0);
+_decorate([property({ attribute: false })], DocksContextMenu.prototype, "scopeTokens", void 0);
+_decorate([property({ attribute: false })], DocksContextMenu.prototype, "partContextMenuRenderer", void 0);
+_decorate([state()], DocksContextMenu.prototype, "contributions", void 0);
+_decorate([state()], DocksContextMenu.prototype, "isOpen", void 0);
+DocksContextMenu = _decorate([customElement("docks-contextmenu")], DocksContextMenu);
 //#endregion
 //#region src/parts/tabs.ts
 var _DocksTabs;
@@ -3959,6 +4272,8 @@ var DocksTabs = class DocksTabs extends DocksContainer {
 		this.iconOnly = false;
 		this.withToolbar = false;
 		this.hideTabs = false;
+		this.fitContent = false;
+		this.fillHeight = false;
 		this.itemSize = "m";
 		this.contributions = [];
 		this.tabGroup = createRef();
@@ -4011,6 +4326,11 @@ var DocksTabs = class DocksTabs extends DocksContainer {
 		if (!this.tabGroup.value) return null;
 		return this.tabGroup.value.getAttribute("active");
 	}
+	getTabPart(tabName) {
+		const tabPanel = this.getTabPanel(tabName);
+		if (!tabPanel) return null;
+		return this.getPartFromPanel(tabPanel);
+	}
 	open(contribution) {
 		if (this.contributions.find((c) => c.name === contribution.name)) {
 			this.activate(contribution.name);
@@ -4260,6 +4580,95 @@ var DocksTabs = class DocksTabs extends DocksContainer {
             width: 100%;
         }
 
+        :host([fit-content]) {
+            display: flex;
+            flex-direction: column;
+            height: auto;
+            max-height: 100%;
+            min-height: 0;
+        }
+
+        :host([fit-content]) wa-tab-group {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            height: auto;
+            max-height: 100%;
+        }
+
+        :host([fit-content]) wa-tab-group::part(base) {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            max-height: 100%;
+            height: auto;
+        }
+
+        :host([fit-content]) wa-tab-group::part(body) {
+            flex: 1 1 auto;
+            min-height: 0;
+            height: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        :host([fit-content]) wa-tab-panel[active] {
+            display: block;
+            height: auto;
+            overflow: visible;
+        }
+
+        :host([fit-content]) wa-tab-panel > * {
+            height: auto;
+            min-height: 0;
+        }
+
+        :host([fill-height]) {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            min-height: 0;
+            max-height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            height: 100%;
+            max-height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group::part(base) {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            max-height: 100%;
+            height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group::part(body) {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        :host([fill-height]) wa-tab-panel[active] {
+            display: block;
+            height: auto;
+            overflow: visible;
+        }
+
+        :host([fill-height]) wa-tab-panel > * {
+            height: auto;
+            min-height: 0;
+        }
+
         wa-tab-group {
             height: 100%;
             width: 100%;
@@ -4487,6 +4896,16 @@ _decorate([property({
 	reflect: true,
 	attribute: "hide-tabs"
 })], DocksTabs.prototype, "hideTabs", void 0);
+_decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-content"
+})], DocksTabs.prototype, "fitContent", void 0);
+_decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "fill-height"
+})], DocksTabs.prototype, "fillHeight", void 0);
 _decorate([property({
 	reflect: true,
 	attribute: "item-size"
@@ -4526,9 +4945,9 @@ var DocksResizableGrid = class DocksResizableGrid extends DocksElement {
 		this.gridChildren = [];
 		this.resizing = null;
 		this.resizeOverlay = null;
-		this.childrenLoaded = false;
 		this.childStylesApplied = false;
-		this.settingsLoaded = false;
+		this.refreshScheduled = false;
+		this.layoutGeneration = 0;
 		this.handleResize = (e) => {
 			if (!this.resizing) return;
 			const delta = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this.resizing.startPos;
@@ -4578,56 +4997,108 @@ var DocksResizableGrid = class DocksResizableGrid extends DocksElement {
 		return this;
 	}
 	doBeforeUI() {
-		if (!this.childrenLoaded) {
-			this.mutationObserver = new MutationObserver(() => {
-				if (!this.childrenLoaded) this.loadChildren();
-			});
-			this.mutationObserver.observe(this, {
-				childList: true,
-				subtree: false
-			});
-			this.loadChildren();
-		}
+		this.mutationObserver = new MutationObserver(() => {
+			this.scheduleRefreshGridLayout();
+		});
+		this.mutationObserver.observe(this, {
+			childList: true,
+			subtree: false
+		});
+		this.scheduleRefreshGridLayout();
+	}
+	scheduleRefreshGridLayout() {
+		if (this.refreshScheduled) return;
+		this.refreshScheduled = true;
+		queueMicrotask(() => {
+			this.refreshScheduled = false;
+			this.refreshGridLayout();
+		});
 	}
-	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;
+	getGridChildrenFromDom() {
+		return Array.from(this.children).filter((child) => child.tagName !== "STYLE" && child.tagName !== "SCRIPT" && !child.classList.contains("resize-handle"));
+	}
+	static isNestedResizableGrid(child) {
+		return child.tagName.toLowerCase() === "docks-resizable-grid";
+	}
+	applyChildLayoutStyles() {
+		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";
+			if (!_DocksResizableGrid.isNestedResizableGrid(child)) {
+				child.style.display = "flex";
+				child.style.flexDirection = "column";
 			}
+		});
+	}
+	resolveGridSizes(childCount) {
+		const parsedSizes = this.sizes?.split(",").map((s) => s.trim()).filter(Boolean) ?? [];
+		if (parsedSizes.length === childCount) return parsedSizes;
+		const equalSize = `${100 / childCount}%`;
+		return Array.from({ length: childCount }, () => equalSize);
+	}
+	resolvePersistedSizes(persisted, childCount) {
+		if (!persisted || typeof persisted !== "object") return null;
+		const record = persisted;
+		const byCount = record.sizesByCount?.[String(childCount)];
+		if (Array.isArray(byCount) && byCount.length === childCount && byCount.every((size) => typeof size === "string")) return byCount;
+		if (Array.isArray(record.sizes) && record.sizes.length === childCount && record.sizes.every((size) => typeof size === "string")) return record.sizes;
+		return null;
+	}
+	async refreshGridLayout() {
+		const generation = ++this.layoutGeneration;
+		const potentialChildren = this.getGridChildrenFromDom();
+		if (potentialChildren.length === 0) {
+			this.gridChildren = [];
+			this.gridSizes = [];
+			this.childStylesApplied = false;
+			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);
+		const identityChanged = potentialChildren.length !== this.gridChildren.length || potentialChildren.some((child, index) => child !== this.gridChildren[index]);
+		this.gridChildren = potentialChildren;
+		const persisted = await this.getDialogSetting();
+		if (generation !== this.layoutGeneration) return;
+		const restoredSizes = this.resolvePersistedSizes(persisted, this.gridChildren.length);
+		if (restoredSizes) {
+			const sizesChanged = restoredSizes.join("|") !== this.gridSizes.join("|");
+			this.gridSizes = restoredSizes;
+			if (identityChanged || sizesChanged) this.childStylesApplied = false;
+			this.requestUpdate();
+			return;
 		}
+		const nextSizes = this.resolveGridSizes(this.gridChildren.length);
+		const sizesChanged = nextSizes.join("|") !== this.gridSizes.join("|");
+		this.gridSizes = nextSizes;
+		if (identityChanged || sizesChanged) this.childStylesApplied = false;
 		this.requestUpdate();
 	}
+	doInitUI() {
+		this.scheduleRefreshGridLayout();
+	}
 	async saveSizes() {
 		if (this.gridSizes.length === 0) return;
+		const persisted = await this.getDialogSetting();
+		const existingByCount = persisted && typeof persisted === "object" ? persisted.sizesByCount ?? {} : {};
 		await this.setDialogSetting({
 			sizes: this.gridSizes,
+			sizesByCount: {
+				...existingByCount,
+				[String(this.gridSizes.length)]: this.gridSizes
+			},
 			orientation: this.orientation
 		});
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("gridChildren") && !this.childStylesApplied && this.gridChildren.length > 0) {
+		if (changedProperties.has("sizes")) this.scheduleRefreshGridLayout();
+		if (!this.childStylesApplied && this.gridChildren.length > 0) {
 			this.childStylesApplied = true;
 			/**
 			* Direct style manipulation is intentionally used here.
-			* 
+			*
 			* Reasoning:
 			* - Grid positioning (gridColumn/gridRow) must be computed dynamically based on
 			*   the number of children and orientation at runtime
@@ -4637,16 +5108,9 @@ var DocksResizableGrid = class DocksResizableGrid extends DocksElement {
 			*   (e.g., child at index 0 → column 1, index 1 → column 3, etc.)
 			* - This is a layout container whose primary job is to programmatically position
 			*   its children within a CSS grid system
+			* - Nested resizable grids manage their own display mode and must not receive flex
 			*/
-			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";
-			});
+			this.applyChildLayoutStyles();
 		}
 	}
 	startResize(e, handleIndex) {
@@ -4765,6 +5229,6 @@ DocksResizableGrid = _DocksResizableGrid = _decorate([customElement("docks-resiz
 //#region src/parts/index.ts
 installOpenDropdownNativeContextMenuGuard();
 //#endregion
-export { taskService as A, SIDEBAR_AUXILIARY as B, DocksElement as C, TOPIC_EXTENSIONS_CHANGED as D, keyBindingManager as E, MouseButton as F, SYSTEM_LAYOUTS as G, SIDEBAR_MAIN_BOTTOM as H, constants_exports as I, TOOLBAR_BOTTOM_CENTER as J, SYSTEM_VIEWS as K, ABOUT_TABS as L, appSettings as M, COMMAND_SAVE as N, extensionRegistry as O, HIDE_DOT_RESOURCE as P, TOOLBAR_MAIN_RIGHT as Q, EDITOR_AREA_MAIN as R, DocksDialogContent as S, sanitizeHtml as T, SIDEBAR_MAIN_TOOLBAR as U, SIDEBAR_MAIN as V, SYSTEM_ATTRIBUTIONS as W, TOOLBAR_MAIN as X, TOOLBAR_BOTTOM_END as Y, TOOLBAR_MAIN_CENTER as Z, validateFormDialogFields as _, renderDropdownContributions as a, deleteIndexedDbWorkspaceData as b, icon as c, filebrowserDialog as d, navigableInfoDialog as f, formDialogRequired as g, formDialog as h, renderDropdownContribution as i, TOPIC_SETTINGS_CHANGED as j, esmShService as k, parseIconSpec as l, infoDialog as m, DocksContainer as n, renderDropdownItem as o, confirmDialog as p, TOOLBAR_BOTTOM as q, renderCommandContribution as r, renderDropdownSubmenu as s, DocksPart as t, versionInfoDialog as u, promptDialog as v, parseMarkdownHtml as w, dialogService as x, appLoaderService as y, PANEL_BOTTOM as z };
+export { HIDE_DOT_RESOURCE as $, filebrowserDialog as A, dialogService as B, TOOLBAR_INFO as C, TOOLBAR_THEME_SWITCHER as D, TOOLBAR_TASKS as E, formDialogRequired as F, keyBindingManager as G, DocksElement as H, validateFormDialogFields as I, esmShService as J, TOPIC_EXTENSIONS_CHANGED as K, promptDialog as L, confirmDialog as M, infoDialog as N, VIEW_FILEBROWSER as O, formDialog as P, COMMAND_SAVE as Q, appLoaderService as R, TOOLBAR_FULLSCREEN as S, TOOLBAR_LAYOUT_SWITCHER as T, parseMarkdownHtml as U, DocksDialogContent as V, sanitizeHtml as W, TOPIC_SETTINGS_CHANGED as X, taskService as Y, appSettings as Z, CTXMENU_FILEBROWSER_RENAME as _, TOOLBAR_MAIN_CENTER as _t, renderDropdownItem as a, SIDEBAR_AUXILIARY as at, TOOLBAR_ACTIVE_PART_NAME as b, parseIconSpec as c, SIDEBAR_MAIN_BOTTOM as ct, DocksContainer as d, SYSTEM_LAYOUTS as dt, MouseButton as et, ABOUT_TAB_ATTRIBUTIONS as f, SYSTEM_VIEWS as ft, CTXMENU_FILEBROWSER_DELETE as g, TOOLBAR_MAIN as gt, ATTRIBUTION_ECLIPSE_DOCKS as h, TOOLBAR_BOTTOM_END as ht, renderDropdownContributions as i, PANEL_BOTTOM as it, navigableInfoDialog as j, VIEW_LOG_TERMINAL as k, versionInfoDialog as l, SIDEBAR_MAIN_TOOLBAR as lt, ABOUT_TAB_RELEASE as m, TOOLBAR_BOTTOM_CENTER as mt, renderCommandContribution as n, ABOUT_TABS as nt, renderDropdownSubmenu as o, SIDEBAR_AUXILIARY_BOTTOM as ot, ABOUT_TAB_PACKAGES as p, TOOLBAR_BOTTOM as pt, extensionRegistry as q, renderDropdownContribution as r, EDITOR_AREA_MAIN as rt, icon as s, SIDEBAR_MAIN as st, handleDropdownWaSelect as t, constants_exports as tt, DocksPart as u, SYSTEM_ATTRIBUTIONS as ut, SIDEBAR_TOOLBAR_EXTENSIONS as v, TOOLBAR_MAIN_RIGHT as vt, TOOLBAR_LANGUAGE_SELECTOR as w, TOOLBAR_FAST_VIEWS as x, SYSTEM_DEFAULT_FILE_ICONS as y, deleteIndexedDbWorkspaceData as z };
 
-//# sourceMappingURL=parts-CRVxaDd-.js.map
+//# sourceMappingURL=parts-CAt8aeU8.js.map