@eclipse-docks/core 0.7.126 → 0.7.130

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

@@ -1,19 +1,19 @@
 import { n as defaultLogger, o as rootContext, s as uiContext, t as createLogger } from "./logger-DT0_NW3S.js";
-import { C as toastError, _ as getContributionDisabled, a as TOPIC_COMMAND_REGISTERED, b as contributionTargetMappingRegistry, 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 toastInfo } from "./widget-DbLusgAH.js";
+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,300 +2988,665 @@ 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;
-            }
-        `];
-	}
-	firstUpdated(changed) {
-		super.firstUpdated(changed);
-		const dialog = this.closest("wa-dialog");
-		if (dialog) {
-			dialog.style.setProperty("--width", "600px");
-			dialog.setAttribute("light-dismiss", "");
-		}
-	}
-	render() {
-		const app = appLoaderService.getCurrentApp();
-		return html`
-            <div class="dialog-body">
-                ${app?.description ? html`<small>${app.description}</small>` : ""}
-                <docks-tabs id=${ABOUT_TABS}></docks-tabs>
-            </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"}` });
-}
+//#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/core/icon-utils.ts
-/**
-* Parses an icon spec string into `{ library, name }` for use with `wa-icon`.
-*
-* Icon specs support an optional icon library prefix followed by the icon name,
-* separated by whitespace, e.g. `"docks mark-github"`.
-*
-* - When the spec contains **no whitespace**, it is treated as the icon name only
-*   and `library` is omitted so the default Web Awesome / Font Awesome library is used.
-* - When the spec contains **whitespace**, the **last segment** is treated as
-*   the icon name and every prior segment (joined by a single space) becomes `library`.
-*
-* Prefer {@link icon} for rendering; use parseIconSpec only when you need the parsed parts.
-*/
-function parseIconSpec(spec) {
-	const trimmed = (spec ?? "").trim();
-	if (!trimmed) return { name: "" };
-	const parts = trimmed.split(/\s+/);
-	if (parts.length <= 1) return { name: trimmed };
-	return {
-		name: parts.pop(),
-		library: parts.join(" ")
-	};
-}
-/**
-* Returns a Lit template that renders a `wa-icon` for the given spec.
-* Use this for all icon rendering so specs (e.g. contribution `icon` fields) stay consistent.
-* Handles undefined/null/empty spec internally; call sites may pass values directly.
-*/
-function icon(spec, options) {
-	const { name: iconName, library } = parseIconSpec(spec ?? "");
-	return html`<wa-icon library=${library ?? nothing} name=${iconName} label=${options?.label ?? nothing} slot=${options?.slot ?? nothing}></wa-icon>`;
-}
+//#region src/parts/container.ts
+var DocksContainer = class extends DocksElement {};
 //#endregion
-//#region src/parts/toolbar.ts
-var RESIZE_DEBOUNCE_MS = 150;
-function renderButtonGroup(slotName, orientation, contributions, isToolbarItem, contributionCreator) {
-	const label = `Toolbar ${slotName ?? "default"}`;
-	const items = contributions.filter((c) => c.slot === slotName && isToolbarItem(c) && getContributionVisible(c));
-	return html`
-        <wa-button-group orientation=${orientation} label=${label}>
-            ${slotName === "start" ? html`<slot name="start"></slot>` : slotName === "end" ? html`<slot name="end"></slot>` : html`<slot></slot>`}
-            ${items.map(contributionCreator)}
-        </wa-button-group>
-    `;
-}
-var DocksToolbar = class DocksToolbar extends DocksElement {
+//#region src/parts/part.ts
+var DocksPart = class DocksPart extends DocksContainer {
 	constructor(..._args) {
 		super(..._args);
-		this.position = "start";
-		this.orientation = "horizontal";
-		this.align = "start";
-		this.size = "s";
-		this.scopeTokens = [];
-		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);
+		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();
 		};
 	}
-	updateCompactFromSpace() {
-		const toolbarItems = this.shadowRoot?.querySelector(".toolbar-items");
-		if (!toolbarItems) return;
-		const trimmed = toolbarItems.scrollWidth > toolbarItems.clientWidth;
-		if (this.compact !== trimmed) this.compact = trimmed;
-	}
-	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();
-	}
-	willUpdate(changedProperties) {
-		super.willUpdate?.(changedProperties);
-		if (changedProperties.has("scopeTokens")) this.refreshContributions();
-	}
-	attributeChangedCallback(name, old, value) {
-		super.attributeChangedCallback(name, old, value);
-		if (name === "id" && old !== value) this.refreshContributions();
+	getCommandStack() {
+		return this.commandStack;
 	}
-	doBeforeUI() {
-		this.refreshContributions();
-		subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
-			const id = this.getAttribute("id");
-			if (!id) return;
-			if (this.matchesTarget(id, event.target)) this.refreshContributions();
-		});
+	/**
+	* 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;
 	}
-	refreshContributions() {
-		const id = this.getAttribute("id");
-		if (!id) {
-			this.contributions = [];
-			return;
+	/**
+	* 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;
+			}
 		}
-		this.loadContributions(id);
+		if (tabsEl && panelName != null && panelName !== "") tabsEl.activate(panelName);
 	}
-	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 (this.scopeTokens.includes(categoryToken)) return id.startsWith(`${prefix}:`);
-		}
-		return false;
+	/**
+	* 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;
 	}
-	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 = [];
-		for (const category of this.scopeTokens) {
-			const categoryId = `${prefix}:${category}`;
-			const matches = contributionRegistry.getContributions(categoryId);
-			categoryMatches.push(...matches);
-		}
-		this.contributions = [
-			...wildcard,
-			...categoryMatches,
-			...specific
-		];
+	renderContent() {
+		return nothing;
 	}
-	isToolbarItem(contribution) {
-		return "command" in contribution || "component" in contribution;
+	/** Part-level toolbar contributions (`toolbar:${partId}`). */
+	getToolbarTarget() {
+		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
+		return contributionKey ? `toolbar:${contributionKey}` : void 0;
 	}
-	contributionCreator(contribution) {
-		if ("command" in contribution) {
-			const commandContribution = contribution;
-			const showLabel = !this.compact && !!commandContribution.showLabel;
-			return html`
-                <wa-button @click=${() => void this.executeCommand(commandContribution.command, commandContribution.params || {})}
-                           title=${commandContribution.label}
-                           ?disabled="${getContributionDisabled(commandContribution)}"
-                           appearance="plain" size=${this.size}>
-                    ${icon(commandContribution.icon, { label: commandContribution.label })}
-                    ${showLabel ? commandContribution.label : ""}
-                </wa-button>
-            `;
-		}
-		if ("component" in contribution) {
-			const contents = contribution.component;
-			if (contents instanceof Function) return contents();
-			return unsafeHTML(contents);
-		}
-		return html`<span>unknown contribution type: ${typeof contribution}</span>`;
+	/** 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 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);
+		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="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 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>
         `;
 	}
+	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.styles = css`
+		this.baseStyles = css`
         :host {
-            display: flex;
-            flex-direction: row;
-            --wa-form-control-padding-inline: var(--wa-space-2xs);
+            display: block;
         }
 
-        :host([orientation="vertical"]) {
-            flex-direction: column;
+        .part-shell {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            height: 100%;
+            width: 100%;
+            position: relative;
+            overflow: hidden;
         }
 
-        .toolbar-items {
-            display: flex;
-            flex: 1;
-            gap: var(--wa-space-2xs);
+        .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()], DocksToolbar.prototype, "position", void 0);
-_decorate([property({ reflect: true })], DocksToolbar.prototype, "orientation", void 0);
-_decorate([property({ reflect: true })], DocksToolbar.prototype, "align", void 0);
-_decorate([property({ reflect: true })], DocksToolbar.prototype, "size", void 0);
-_decorate([property({ attribute: false })], DocksToolbar.prototype, "scopeTokens", void 0);
-_decorate([property({ attribute: false })], DocksToolbar.prototype, "partToolbarContent", void 0);
-_decorate([property({ attribute: false })], DocksToolbar.prototype, "partToolbarRenderer", void 0);
-_decorate([state()], DocksToolbar.prototype, "contributions", void 0);
-_decorate([state()], DocksToolbar.prototype, "compact", void 0);
-DocksToolbar = _decorate([customElement("docks-toolbar")], DocksToolbar);
+_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;
+	if (element.localName !== "wa-dropdown-item") return false;
+	const dropdown = element.closest("wa-dropdown");
+	if (dropdown && isOpenDropdown(dropdown)) return true;
+	const root = element.getRootNode();
+	return root instanceof ShadowRoot && root.host instanceof Element && isOpenDropdown(root.host);
+}
+/** True when the event occurred inside a wa-dropdown that is currently open. */
+function eventTargetsOpenDropdown(event) {
+	return elementsFromEventPath(event).some(elementTargetsOpenDropdown);
+}
+/** Prevents the browser context menu on open Docks popup lists (context menus, toolbar dropdowns). */
+function suppressNativeContextMenuInOpenDropdowns(event) {
+	if (!event.cancelable || !eventTargetsOpenDropdown(event)) return;
+	event.preventDefault();
+}
+var openDropdownContextMenuGuardInstalled = false;
+function installOpenDropdownNativeContextMenuGuard() {
+	if (openDropdownContextMenuGuardInstalled || typeof document === "undefined") return;
+	openDropdownContextMenuGuardInstalled = true;
+	document.addEventListener("contextmenu", suppressNativeContextMenuInOpenDropdowns, { capture: true });
+}
 function visitElementTree(root, visit) {
 	if (root instanceof Element) {
 		visit(root);
@@ -3299,213 +3669,354 @@ function closeSiblingSubmenus(activeItem, menuRoot) {
 	});
 }
 //#endregion
-//#region src/components/command.ts
-var DocksCommand = class DocksCommand extends DocksWidget {
+//#region src/core/icon-utils.ts
+/**
+* Parses an icon spec string into `{ library, name }` for use with `wa-icon`.
+*
+* Icon specs support an optional icon library prefix followed by the icon name,
+* separated by whitespace, e.g. `"docks mark-github"`.
+*
+* - When the spec contains **no whitespace**, it is treated as the icon name only
+*   and `library` is omitted so the default Web Awesome / Font Awesome library is used.
+* - When the spec contains **whitespace**, the **last segment** is treated as
+*   the icon name and every prior segment (joined by a single space) becomes `library`.
+*
+* Prefer {@link icon} for rendering; use parseIconSpec only when you need the parsed parts.
+*/
+function parseIconSpec(spec) {
+	const trimmed = (spec ?? "").trim();
+	if (!trimmed) return { name: "" };
+	const parts = trimmed.split(/\s+/);
+	if (parts.length <= 1) return { name: trimmed };
+	return {
+		name: parts.pop(),
+		library: parts.join(" ")
+	};
+}
+/**
+* Returns a Lit template that renders a `wa-icon` for the given spec.
+* Use this for all icon rendering so specs (e.g. contribution `icon` fields) stay consistent.
+* Handles undefined/null/empty spec internally; call sites may pass values directly.
+*/
+function icon(spec, options) {
+	const { name: iconName, library } = parseIconSpec(spec ?? "");
+	return html`<wa-icon library=${library ?? nothing} name=${iconName} label=${options?.label ?? nothing} slot=${options?.slot ?? nothing}></wa-icon>`;
+}
+//#endregion
+//#region src/parts/toolbar.ts
+var RESIZE_DEBOUNCE_MS = 150;
+function renderButtonGroup(slotName, orientation, contributions, isToolbarItem, contributionCreator) {
+	const label = `Toolbar ${slotName ?? "default"}`;
+	const items = contributions.filter((c) => c.slot === slotName && isToolbarItem(c) && getContributionVisible(c));
+	return html`
+        <wa-button-group orientation=${orientation} label=${label}>
+            ${slotName === "start" ? html`<slot name="start"></slot>` : slotName === "end" ? html`<slot name="end"></slot>` : html`<slot></slot>`}
+            ${items.map(contributionCreator)}
+        </wa-button-group>
+    `;
+}
+var DocksToolbar = class DocksToolbar extends DocksElement {
 	constructor(..._args) {
 		super(..._args);
-		this.cmd = "";
-		this.title = "";
-		this.label = false;
-		this.disabled = false;
-		this.appearance = "plain";
-		this.variant = "neutral";
+		this.position = "start";
+		this.orientation = "horizontal";
+		this.align = "start";
 		this.size = "s";
-		this.params = {};
-		this.withCaret = true;
-		this.placement = "bottom-start";
-		this.dropdownContributions = [];
-	}
-	closeDropdown(dropdown) {
-		if (dropdown && dropdown.open !== void 0) dropdown.open = false;
-	}
-	closeParentDropdown() {
-		this.closeDropdown(this.closest("wa-dropdown"));
-	}
-	handleClick(event) {
-		if (this.disabled) return;
-		if (event) event.stopPropagation();
-		this.closeParentDropdown();
-		if (this.action) {
-			this.action(event);
-			return;
-		}
-		if (this.cmd) this.executeCommand(this.cmd, this.params);
+		this.scopeTokens = [];
+		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);
+		};
 	}
-	handleSelect(event) {
-		this.closeDropdown(event.target);
+	updateCompactFromSpace() {
+		const toolbarItems = this.shadowRoot?.querySelector(".toolbar-items");
+		if (!toolbarItems) return;
+		const trimmed = toolbarItems.scrollWidth > toolbarItems.clientWidth;
+		if (this.compact !== trimmed) this.compact = trimmed;
 	}
-	isInDropdown() {
-		return !!this.closest("wa-dropdown, wa-dropdown-menu");
+	scheduleOverflowCheck() {
+		if (this.overflowCheckScheduled) return;
+		this.overflowCheckScheduled = true;
+		requestAnimationFrame(() => {
+			this.overflowCheckScheduled = false;
+			this.updateCompactFromSpace();
+		});
 	}
-	getKeybinding() {
-		if (!this.cmd || this.action) return null;
-		const keybindings = keyBindingManager.getKeyBindingsForCommand(this.cmd);
-		return keybindings.length > 0 ? keybindings[0] : null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.resizeObserver = new ResizeObserver(this.onResize);
+		this.resizeObserver.observe(this);
 	}
-	doBeforeUI() {
-		if (this.dropdown) {
-			this.dropdownContributions = contributionRegistry.getContributions(this.dropdown);
-			subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
-				if (this.dropdown && event.target === this.dropdown) this.dropdownContributions = event.contributions;
-			});
+	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();
 	}
 	willUpdate(changedProperties) {
 		super.willUpdate?.(changedProperties);
-		if (this.dropdown && changedProperties.has("dropdown")) this.dropdownContributions = contributionRegistry.getContributions(this.dropdown);
+		if (changedProperties.has("scopeTokens")) this.refreshContributions();
 	}
-	renderContribution(contribution, slot) {
-		if ("command" in contribution) {
-			const commandContribution = contribution;
-			if (!getContributionVisible(commandContribution)) return nothing;
-			const disabled = getContributionDisabled(commandContribution);
-			return html`
-                <docks-command 
-                    slot=${slot ?? nothing}
-                    cmd="${commandContribution.command}"
-                    icon="${commandContribution.icon || ""}"
-                    .params=${commandContribution.params || {}}
-                    ?disabled="${disabled}">
-                    ${commandContribution.label}
-                </docks-command>
-            `;
-		}
-		if ("component" in contribution) {
-			const contents = contribution.component;
-			if (contents instanceof Function) return contents();
-			return unsafeHTML(contents);
-		}
-		return nothing;
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "id" && old !== value) this.refreshContributions();
 	}
-	render() {
-		const keybinding = this.getKeybinding();
-		if (this.isInDropdown() && this.dropdown) return html`
-                <wa-dropdown-item ?disabled=${this.disabled}>
-                    ${icon(this.icon, {
-			label: this.title,
-			slot: "icon"
-		})}
-                    <slot></slot>
-                    ${this.dropdownContributions.map((c) => this.renderContribution(c, "submenu"))}
-                </wa-dropdown-item>
-            `;
-		if (this.isInDropdown()) return html`
-                <wa-dropdown-item 
-                    ?disabled=${this.disabled}
-                    @click=${(e) => this.handleClick(e)}>
-                    ${icon(this.icon, {
-			label: this.title,
-			slot: "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=${this.withCaret}
-                        title=${keybinding ? `${this.title} (${keybinding})` : this.title}>
-                        ${icon(this.icon, {
-			label: this.title,
-			slot: "start"
-		})}
-                        <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>
-                        <docks-command 
-                            cmd="${this.cmd}"
-                            icon="${this.icon || ""}"
-                            .params=${this.params}
-                            ?disabled=${this.disabled}>
-                            <slot></slot>
-                            ${this.title}
-                        </docks-command>
-                    ` : nothing}
-                </wa-dropdown>
-            `;
+	doBeforeUI() {
+		this.refreshContributions();
+		subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+			const id = this.getAttribute("id");
+			if (!id) return;
+			if (this.matchesTarget(id, event.target)) this.refreshContributions();
+		});
+	}
+	refreshContributions() {
+		const id = this.getAttribute("id");
+		if (!id) {
+			this.contributions = [];
+			return;
+		}
+		this.loadContributions(id);
+	}
+	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 (this.scopeTokens.includes(categoryToken)) return 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 = [];
+		for (const category of this.scopeTokens) {
+			const categoryId = `${prefix}:${category}`;
+			const matches = contributionRegistry.getContributions(categoryId);
+			categoryMatches.push(...matches);
+		}
+		this.contributions = [
+			...wildcard,
+			...categoryMatches,
+			...specific
+		];
+	}
+	isToolbarItem(contribution) {
+		return "command" in contribution || "component" in contribution;
+	}
+	contributionCreator(contribution) {
+		if ("command" in contribution) {
+			const commandContribution = contribution;
+			const showLabel = !this.compact && !!commandContribution.showLabel;
+			return html`
+                <wa-button @click=${() => void this.executeCommand(commandContribution.command, commandContribution.params || {})}
+                           title=${commandContribution.label}
+                           ?disabled="${getContributionDisabled(commandContribution)}"
+                           appearance="plain" size=${this.size}>
+                    ${icon(commandContribution.icon, { label: commandContribution.label })}
+                    ${showLabel ? commandContribution.label : ""}
+                </wa-button>
+            `;
+		}
+		if ("component" in contribution) {
+			const contents = contribution.component;
+			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`
-            <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)}>
-                ${icon(this.icon, {
-			label: this.title,
-			slot: "start"
-		})}
-                <slot></slot>
-            </wa-button>
+            <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>
         `;
 	}
 	static {
 		this.styles = css`
         :host {
-            display: inline-block;
+            display: flex;
+            flex-direction: row;
+            --wa-form-control-padding-inline: var(--wa-space-2xs);
         }
 
-        .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([orientation="vertical"]) {
+            flex-direction: column;
         }
 
-        :host-context(.wa-light) .keybinding {
-            background: var(--wa-color-neutral-85);
-            border: 1px solid var(--wa-color-neutral-75);
+        .toolbar-items {
+            display: flex;
+            flex: 1;
+            gap: var(--wa-space-2xs);
         }
     `;
 	}
 };
-_decorate([property()], DocksCommand.prototype, "cmd", void 0);
-_decorate([property({
-	type: Object,
-	attribute: false
-})], DocksCommand.prototype, "action", void 0);
-_decorate([property()], DocksCommand.prototype, "title", void 0);
-_decorate([property()], DocksCommand.prototype, "label", void 0);
-_decorate([property()], DocksCommand.prototype, "icon", void 0);
-_decorate([property({ type: Boolean })], DocksCommand.prototype, "disabled", void 0);
-_decorate([property()], DocksCommand.prototype, "appearance", void 0);
-_decorate([property()], DocksCommand.prototype, "variant", void 0);
-_decorate([property()], DocksCommand.prototype, "size", void 0);
-_decorate([property({
-	type: Object,
-	attribute: false
-})], DocksCommand.prototype, "params", void 0);
-_decorate([property()], DocksCommand.prototype, "dropdown", void 0);
-_decorate([property({
-	type: Boolean,
-	attribute: "with-caret"
-})], DocksCommand.prototype, "withCaret", void 0);
-_decorate([property()], DocksCommand.prototype, "placement", void 0);
-_decorate([state()], DocksCommand.prototype, "dropdownContributions", void 0);
-DocksCommand = _decorate([customElement("docks-command")], DocksCommand);
+_decorate([property()], DocksToolbar.prototype, "position", void 0);
+_decorate([property({ reflect: true })], DocksToolbar.prototype, "orientation", void 0);
+_decorate([property({ reflect: true })], DocksToolbar.prototype, "align", void 0);
+_decorate([property({ reflect: true })], DocksToolbar.prototype, "size", void 0);
+_decorate([property({ attribute: false })], DocksToolbar.prototype, "scopeTokens", void 0);
+_decorate([property({ attribute: false })], DocksToolbar.prototype, "partToolbarContent", void 0);
+_decorate([property({ attribute: false })], DocksToolbar.prototype, "partToolbarRenderer", void 0);
+_decorate([state()], DocksToolbar.prototype, "contributions", void 0);
+_decorate([state()], DocksToolbar.prototype, "compact", void 0);
+DocksToolbar = _decorate([customElement("docks-toolbar")], DocksToolbar);
+//#endregion
+//#region src/core/dropdown-item.ts
+/**
+* Shared render helpers for {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}
+* rows inside any Docks popup list.
+*
+* **Docks surfaces** (distinct UX and contribution targets):
+* - **Toolbar dropdown** — anchored to a toolbar control (`docks-command`, `docks-toolbar`).
+*   Part-level registry targets use the `toolbar:` prefix (e.g. `toolbar:view.filebrowser`).
+* - **Context menu** — opened at the pointer (`docks-contextmenu`).
+*   Part-level registry targets use the `contextmenu:` prefix (e.g. `contextmenu:view.filebrowser`).
+*
+* 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 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 onDropdownActionClick(options) {
+	return (event) => {
+		if (readReactiveBoolean(options.disabled, false)) return;
+		event.stopPropagation();
+		options.action?.(event);
+	};
+}
+function keybindingDetails(cmd) {
+	if (!cmd) return nothing;
+	const bindings = keyBindingManager.getKeyBindingsForCommand(cmd);
+	if (bindings.length === 0) return nothing;
+	return html`<span slot="details">${bindings[0]}</span>`;
+}
+/** 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=${options.action ? onDropdownActionClick(options) : nothing}>
+            ${iconSpec ? icon(iconSpec, {
+		label: options.title ?? options.label,
+		slot: "icon"
+	}) : nothing}
+            ${options.label}
+            ${keybindingDetails(options.cmd)}
+        </wa-dropdown-item>
+    `;
+}
+function renderCommandContribution(contribution, options) {
+	if (!getContributionVisible(contribution)) return nothing;
+	return renderDropdownItem({
+		cmd: contribution.command,
+		icon: contribution.icon,
+		label: contribution.label,
+		params: contribution.params,
+		disabled: contribution.disabled,
+		slot: options?.slot
+	});
+}
+function renderDropdownContribution(contribution, options) {
+	if ("command" in contribution) return renderCommandContribution(contribution, options);
+	if ("component" in contribution) {
+		if (!getContributionVisible(contribution)) return nothing;
+		const contents = contribution.component;
+		if (contents instanceof Function) return contents();
+		return html`${unsafeHTML(contents)}`;
+	}
+	return nothing;
+}
+/** Renders all visible contributions registered for a contribution target. */
+function renderDropdownContributions(target, options) {
+	return html`${contributionRegistry.getContributions(target).map((c) => renderDropdownContribution(c, options)).filter((item) => item !== nothing)}`;
+}
+/** Renders a {@link wa-dropdown-item} with nested items from a contribution target in {@code slot="submenu"}. */
+function renderDropdownSubmenu(options) {
+	return html`
+        <wa-dropdown-item ?disabled=${readReactiveBoolean(options.disabled, false)}>
+            ${options.icon ? icon(options.icon, {
+		label: options.title ?? options.label,
+		slot: "icon"
+	}) : nothing}
+            ${options.label}
+            ${renderDropdownContributions(options.contributionTarget, { slot: "submenu" })}
+        </wa-dropdown-item>
+    `;
+}
 //#endregion
 //#region src/parts/contextmenu.ts
 var DocksContextMenu = class DocksContextMenu extends DocksElement {
@@ -3515,11 +4026,14 @@ var DocksContextMenu = class DocksContextMenu extends DocksElement {
 		this.partContextMenuRenderer = void 0;
 		this.contributions = [];
 		this.isOpen = false;
-		this.position = {
+		this.menuPosition = {
 			x: 0,
 			y: 0
 		};
-		this.anchorRef = createRef();
+		this.virtualAnchor = { getBoundingClientRect: () => {
+			const { x, y } = this.menuPosition;
+			return new DOMRect(x, y, 0, 0);
+		} };
 		this.dropdownRef = createRef();
 		this.boundHandleDocumentPointerDown = this.handleDocumentPointerDown.bind(this);
 		this.handleSubmenuOpening = (event) => {
@@ -3623,410 +4137,128 @@ var DocksContextMenu = class DocksContextMenu extends DocksElement {
 		while (element) {
 			const shadowRoot = element.shadowRoot;
 			if (shadowRoot) {
-				const shadowElement = shadowRoot.elementFromPoint(x, y);
-				if (shadowElement && shadowElement !== element) {
-					element = shadowElement;
-					continue;
-				}
-			}
-			break;
-		}
-		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.position = position;
-		this.isOpen = true;
-		await this.updateComplete;
-		document.addEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
-		return true;
-	}
-	onClose() {
-		if (!this.isOpen) return;
-		this.isOpen = false;
-		document.removeEventListener("pointerdown", this.boundHandleDocumentPointerDown, { capture: true });
-	}
-	renderContribution(contribution) {
-		if ("command" in contribution) {
-			const commandContribution = contribution;
-			if (!getContributionVisible(commandContribution)) return nothing;
-			const disabled = getContributionDisabled(commandContribution);
-			return html`
-                <docks-command
-                    cmd="${commandContribution.command}"
-                    icon="${commandContribution.icon ?? ""}"
-                    .params=${commandContribution.params ?? {}}
-                    ?disabled="${disabled}">
-                    ${commandContribution.label}
-                </docks-command>
-            `;
-		} else if ("component" in contribution) {
-			const contents = contribution.component;
-			if (contents instanceof Function) return contents();
-			return unsafeHTML(contents);
-		}
-		return nothing;
-	}
-	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}>
-                
-                <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>
-        `;
-	}
-	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);
-_decorate([state()], DocksContextMenu.prototype, "position", 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;
-	}
-	getToolbarTarget() {
-		const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
-		return contributionKey ? `toolbar:${contributionKey}` : void 0;
-	}
-	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>
-        `;
+				const shadowElement = shadowRoot.elementFromPoint(x, y);
+				if (shadowElement && shadowElement !== element) {
+					element = shadowElement;
+					continue;
+				}
+			}
+			break;
+		}
+		return element;
 	}
-	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
-			}));
+	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);
 		}
 	}
-	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;
@@ -4040,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();
@@ -4092,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);
@@ -4341,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%;
@@ -4568,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"
@@ -4607,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;
@@ -4659,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
@@ -4718,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) {
@@ -4843,6 +5226,9 @@ _decorate([state()], DocksResizableGrid.prototype, "gridSizes", void 0);
 _decorate([state()], DocksResizableGrid.prototype, "gridChildren", void 0);
 DocksResizableGrid = _DocksResizableGrid = _decorate([customElement("docks-resizable-grid")], DocksResizableGrid);
 //#endregion
-export { constants_exports as A, SYSTEM_VIEWS as B, esmShService as C, COMMAND_SAVE as D, appSettings as E, SIDEBAR_MAIN as F, TOOLBAR_MAIN_CENTER as G, TOOLBAR_BOTTOM_CENTER as H, SIDEBAR_MAIN_BOTTOM as I, TOOLBAR_MAIN_RIGHT as K, SIDEBAR_MAIN_TOOLBAR as L, EDITOR_AREA_MAIN as M, PANEL_BOTTOM as N, HIDE_DOT_RESOURCE as O, SIDEBAR_AUXILIARY as P, SYSTEM_ATTRIBUTIONS as R, extensionRegistry as S, TOPIC_SETTINGS_CHANGED as T, TOOLBAR_BOTTOM_END as U, TOOLBAR_BOTTOM as V, TOOLBAR_MAIN as W, DocksDialogContent as _, versionInfoDialog as a, sanitizeHtml as b, confirmDialog as c, formDialogRequired as d, validateFormDialogFields as f, dialogService as g, deleteIndexedDbWorkspaceData as h, parseIconSpec as i, ABOUT_TABS as j, MouseButton as k, infoDialog as l, appLoaderService as m, DocksContainer as n, filebrowserDialog as o, promptDialog as p, icon as r, navigableInfoDialog as s, DocksPart as t, formDialog as u, DocksElement as v, taskService as w, TOPIC_EXTENSIONS_CHANGED as x, parseMarkdownHtml as y, SYSTEM_LAYOUTS as z };
+//#region src/parts/index.ts
+installOpenDropdownNativeContextMenuGuard();
+//#endregion
+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-CsoNFVTw.js.map
+//# sourceMappingURL=parts-CAt8aeU8.js.map