@eclipse-docks/core 0.7.127 → 0.7.130

package/src/core/apploader.ts

@@ -26,21 +26,12 @@ import { publish } from "./events";
 
 const logger = createLogger('AppLoader');
 
-/** Layout reference: layout id string, or id + props to parameterize the layout (e.g. show-bottom-panel). */
+/** Layout reference: layout id string, or id + optional props read by the layout on init. */
 export type LayoutDescriptor = string | { id: string; props?: Record<string, string | boolean> };
 
 function getLayoutIdFromApp(app: AppDefinition | undefined): string {
-    if (!app) return 'standard';
-    const l = app.layout ?? app.layoutId;
-    return typeof l === 'object' ? l.id : (l ?? 'standard');
-}
-
-function propsToAttributes(props: Record<string, string | boolean>): Record<string, string> {
-    const out: Record<string, string> = {};
-    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;
 }
 
 /**
@@ -177,15 +168,11 @@ export interface AppDefinition {
     releaseHistory?: ReleaseHistory | (() => ReleaseHistory | Promise<ReleaseHistory>);
 
     /**
-     * Layout: id (string) or { id, props } to parameterize the layout.
-     * App root is the chosen layout's component. Props are merged as attributes when rendering (e.g. show-bottom-panel).
+     * Layout: id (string) or { id, props }. The layout component reads props on init (e.g. panel visibility).
      * Defaults to 'standard' when omitted.
      */
     layout?: LayoutDescriptor;
 
-    /** @deprecated Use layout (string or { id, props }) instead. */
-    layoutId?: string;
-
     /**
      * Optional cleanup function.
      * Called when the app is being unloaded, before extensions are disabled.
@@ -248,8 +235,6 @@ class AppLoaderService {
     private container: HTMLElement = document.body;
     private systemRequiredExtensions: Set<string> = new Set();
     private static readonly PREFERRED_APP_KEY = 'preferredAppName';
-    private static readonly PREFERRED_LAYOUT_KEY = 'preferredLayoutId';
-    private preferredLayoutId?: string;
     
     /**
      * Register an application with the framework.
@@ -269,6 +254,7 @@ class AppLoaderService {
         }
         app.name = app.name ?? 'app';
         app.version = app.version ?? '0.0.0';
+        app.layout = app.layout ?? 'standard';
 
         if (this.apps.has(app.name)) {
             logger.warn(`App '${app.name}' is already registered. Overwriting.`);
@@ -443,7 +429,6 @@ class AppLoaderService {
 
         this.currentApp = app;
         logger.info(`App ${app.name} loaded successfully`);
-        this.preferredLayoutId = await this.getPreferredLayoutId();
         this.updateDocumentMetadata(app);
         if (container) {
             this.dispatchLoadProgress('Rendering layout…');
@@ -485,7 +470,7 @@ class AppLoaderService {
             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<LayoutContribution>(SYSTEM_LAYOUTS);
         let layout = layouts.find((c) => c.id === layoutId);
         if (!layout) {
@@ -501,10 +486,6 @@ class AppLoaderService {
         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') {
@@ -582,35 +563,7 @@ class AppLoaderService {
     }
 
     getCurrentLayoutId(): string {
-        return this.preferredLayoutId ?? getLayoutIdFromApp(this.currentApp);
-    }
-
-    async getPreferredLayoutId(): Promise<string | undefined> {
-        try {
-            return await appSettings.get(AppLoaderService.PREFERRED_LAYOUT_KEY);
-        } catch (error) {
-            logger.debug(`Failed to get preferred layout ID: ${getErrorMessage(error)}`);
-            return undefined;
-        }
-    }
-
-    async setPreferredLayoutId(layoutId: string): Promise<void> {
-        const layouts = this.getRegisteredLayouts();
-        if (!layouts.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);
     }
     
     /**

package/src/core/contribution-targets.ts

@@ -21,4 +21,5 @@ export const EDITOR_AREA_MAIN = "editor-area-main"
 export const SIDEBAR_MAIN = "sidebar-main"
 export const SIDEBAR_MAIN_BOTTOM = "sidebar-main-bottom"
 export const SIDEBAR_AUXILIARY = "sidebar-auxiliary"
+export const SIDEBAR_AUXILIARY_BOTTOM = "sidebar-auxiliary-bottom"
 export const PANEL_BOTTOM = "panel-bottom"

package/src/core/dialogservice.ts

@@ -60,9 +60,11 @@ export const DELETE_BUTTON: DialogButton = {
 
 export interface DialogContribution extends Contribution {
     id: string;
+    /** When true, `component` renders a complete `wa-dialog`. The service only mounts and manages lifecycle. */
+    selfContained?: boolean;
     buttons?: DialogButton[];
     component: (state?: any) => TemplateResult;
-    onButton: (id: string, result: any, state?: any) => boolean | Promise<boolean> | void | Promise<void>;
+    onButton?: (id: string, result: any, state?: any) => boolean | Promise<boolean> | void | Promise<void>;
 }
 
 let dialogContainer: HTMLElement | null = null;
@@ -76,6 +78,38 @@ function getDialogContainer(): HTMLElement {
     return dialogContainer;
 }
 
+type WaDialogElement = HTMLElement & { open?: boolean };
+
+function findWaDialog(root: ParentNode): WaDialogElement | null {
+    if (root instanceof Element && root.tagName.toLowerCase() === 'wa-dialog') {
+        return root as WaDialogElement;
+    }
+
+    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 as WaDialogElement;
+        }
+        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;
+}
+
 class DialogService {
     private contributions: Map<string, DialogContribution> = new Map();
     private contributionsChangeScheduled = false;
@@ -111,7 +145,7 @@ class DialogService {
                 continue;
             }
 
-            if (!contribution.onButton) {
+            if (!contribution.onButton && !contribution.selfContained) {
                 logger.warn(`Dialog contribution "${contribution.id}" has no onButton callback, skipping`);
                 continue;
             }
@@ -130,13 +164,13 @@ class DialogService {
 
         return new Promise((resolve) => {
             const container = getDialogContainer();
-            let isOpen = true;
+            let closed = false;
             let dialogContentElement: DocksDialogContent | null = null;
 
             const cleanup = async () => {
-                if (!isOpen) return;
-                isOpen = false;
-                
+                if (closed) return;
+                closed = true;
+
                 if (dialogContentElement) {
                     try {
                         await dialogContentElement.dispose();
@@ -145,50 +179,72 @@ class DialogService {
                         logger.error(`Error disposing dialog content for "${dialogId}": ${errorMessage}`);
                     }
                 }
-                
+
                 try {
                     const result = dialogContentElement ? dialogContentElement.getResult() : undefined;
-                    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.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;
+                }
+                void cleanup();
+            };
+
+            const handleAfterHide = () => {
+                void cleanup();
+            };
+
             const handleButtonClick = async (buttonId: string) => {
+                if (!contribution.onButton) {
+                    return;
+                }
                 try {
                     const result = dialogContentElement ? dialogContentElement.getResult() : undefined;
                     const shouldClose = await contribution.onButton(buttonId, result, stateWithClose);
-                    
+
                     if (shouldClose !== false) {
-                        cleanup();
+                        closeDialog();
                     }
                 } catch (error) {
                     const errorMessage = error instanceof Error ? error.message : String(error);
                     logger.error(`Error executing button callback for dialog "${dialogId}": ${errorMessage}`);
-                    cleanup();
+                    closeDialog();
                 }
             };
 
-            const buttons = contribution.buttons && contribution.buttons.length > 0 
-                ? contribution.buttons 
+            const buttons = contribution.buttons && contribution.buttons.length > 0
+                ? contribution.buttons
                 : [OK_BUTTON];
 
+            const stateWithClose = { ...state, close: closeDialog, onAfterHide: handleAfterHide };
             if (state && typeof state === 'object') {
-                (state as any).close = cleanup;
+                (state as { close?: () => void }).close = closeDialog;
+                (state as { onAfterHide?: () => void }).onAfterHide = handleAfterHide;
             }
-            const stateWithClose = { ...state, close: cleanup };
 
             const dialogLabel =
                 state && typeof state === 'object' && typeof (state as { label?: unknown }).label === 'string'
                     ? (state as { label: string }).label
                     : (contribution.label || dialogId);
 
-            const template = html`
-                <wa-dialog label="${dialogLabel}" open @wa-request-close=${cleanup}>
+            const template = contribution.selfContained
+                ? contribution.component(stateWithClose)
+                : html`
+                <wa-dialog label="${dialogLabel}" open @wa-after-hide=${handleAfterHide}>
                     <style>
                         .dialog-service-content {
                             display: flex;
@@ -224,7 +280,7 @@ class DialogService {
                              if (cancelButton) {
                                  handleButtonClick(cancelButton.id);
                              } else {
-                                 cleanup();
+                                 closeDialog();
                              }
                          }}>
                         ${contribution.component(state)}
@@ -232,6 +288,7 @@ class DialogService {
                         <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)}

package/src/core/dropdown-item.ts

@@ -11,6 +11,10 @@
  * 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.
  */
 import { html, nothing, type TemplateResult } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -41,28 +45,51 @@ export interface DropdownItemOptions {
     action?: (event: Event) => void;
 }
 
-function closeParentDropdown(event: Event): void {
-    const dropdown = (event.target as Element | null)?.closest('wa-dropdown') as { open?: boolean } | null;
-    if (dropdown && dropdown.open !== undefined) {
-        dropdown.open = false;
+type WaSelectDetail = {
+    item?: HTMLElement & { value?: string; disabled?: boolean };
+};
+
+function parseDropdownItemParams(item: HTMLElement): Record<string, unknown> {
+    const raw = item.getAttribute('data-params');
+    if (!raw) {
+        return {};
     }
+    try {
+        return JSON.parse(raw) as Record<string, unknown>;
+    } catch {
+        return {};
+    }
+}
+
+function getDropdownItemCommand(item: HTMLElement): string | undefined {
+    return item.getAttribute('data-cmd') || item.getAttribute('value') || undefined;
 }
 
-function onDropdownItemClick(options: DropdownItemOptions) {
+/** Handles `wa-select` from a parent `wa-dropdown` and runs the backing command. */
+export function handleDropdownWaSelect(event: CustomEvent<WaSelectDetail>): void {
+    const item = event.detail?.item;
+    if (!item || item.disabled || item.hasAttribute('disabled')) {
+        return;
+    }
+
+    const cmd = getDropdownItemCommand(item);
+    if (!cmd) {
+        return;
+    }
+
+    void commandRegistry.execute(
+        cmd,
+        commandRegistry.createExecutionContext(parseDropdownItemParams(item)),
+    );
+}
+
+function onDropdownActionClick(options: DropdownItemOptions) {
     return (event: Event) => {
-        if (readReactiveBoolean(options.disabled, false)) return;
-        event.stopPropagation();
-        closeParentDropdown(event);
-        if (options.action) {
-            options.action(event);
+        if (readReactiveBoolean(options.disabled, false)) {
             return;
         }
-        if (options.cmd) {
-            void commandRegistry.execute(
-                options.cmd,
-                commandRegistry.createExecutionContext(options.params ?? {})
-            );
-        }
+        event.stopPropagation();
+        options.action?.(event);
     };
 }
 
@@ -76,12 +103,20 @@ function keybindingDetails(cmd?: string): TemplateResult | typeof nothing {
 /** Renders a native {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}. */
 export function renderDropdownItem(options: DropdownItemOptions): TemplateResult {
     const iconSpec = options.icon ?? '';
+    const paramsJson =
+        options.params && Object.keys(options.params).length > 0
+            ? JSON.stringify(options.params)
+            : undefined;
+
     return html`
         <wa-dropdown-item
             slot=${options.slot ?? nothing}
             variant=${options.variant ?? 'default'}
+            value=${options.cmd ?? nothing}
+            data-cmd=${options.cmd ?? nothing}
+            data-params=${paramsJson ?? nothing}
             ?disabled=${readReactiveBoolean(options.disabled, false)}
-            @click=${onDropdownItemClick(options)}>
+            @click=${options.action ? onDropdownActionClick(options) : nothing}>
             ${iconSpec ? icon(iconSpec, { label: options.title ?? options.label, slot: 'icon' }) : nothing}
             ${options.label}
             ${keybindingDetails(options.cmd)}

package/src/core/layout-panels.ts

@@ -0,0 +1,121 @@
+import type { LayoutDescriptor } from './apploader';
+import { appSettings } from './settingsservice';
+import type { DocksStandardLayout } from '../layouts/standard-layout';
+
+export type LayoutPanelVisibility = {
+    showLeftSidebar: boolean;
+    showAuxSidebar: boolean;
+    showBottomPanel: boolean;
+    showLeftAux: boolean;
+    showRightAux: boolean;
+};
+
+export const DEFAULT_LAYOUT_PANEL_VISIBILITY: LayoutPanelVisibility = {
+    showLeftSidebar: true,
+    showAuxSidebar: true,
+    showBottomPanel: true,
+    showLeftAux: false,
+    showRightAux: false,
+};
+
+function normalizePanelVisibility(stored: Partial<LayoutPanelVisibility>): LayoutPanelVisibility {
+    return {
+        showLeftSidebar: stored.showLeftSidebar ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showLeftSidebar,
+        showAuxSidebar: stored.showAuxSidebar ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showAuxSidebar,
+        showBottomPanel: stored.showBottomPanel ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showBottomPanel,
+        showLeftAux: stored.showLeftAux ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showLeftAux,
+        showRightAux: stored.showRightAux ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showRightAux,
+    };
+}
+
+export const LAYOUT_PANEL_SETTINGS_KEY = 'layoutPanelVisibility';
+
+/** @deprecated Legacy layout id persisted before panel visibility toggles. */
+export const LEGACY_PREFERRED_LAYOUT_KEY = 'preferredLayoutId';
+
+/** Maps legacy parameterized layout ids to panel visibility. */
+export function layoutIdToPanelVisibility(layoutId: string): LayoutPanelVisibility {
+    switch (layoutId) {
+        case 'standard-bottom-panel':
+            return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY, showBottomPanel: true, showLeftAux: false, showRightAux: false };
+        case 'standard-bottom-sidebar':
+            return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY, showBottomPanel: false, showLeftAux: true, showRightAux: false };
+        case 'standard-full':
+            return {
+                ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+                showLeftAux: true,
+                showRightAux: true,
+            };
+        case 'standard':
+        default:
+            return {
+                ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+                showBottomPanel: false,
+                showLeftAux: false,
+                showRightAux: false,
+            };
+    }
+}
+
+export function resolveInitialPanelVisibilityFromApp(appLayout?: LayoutDescriptor): LayoutPanelVisibility {
+    if (typeof appLayout === 'object' && appLayout.props) {
+        return {
+            ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+            showLeftSidebar: appLayout.props.showLeftSidebar !== false,
+            showAuxSidebar: appLayout.props.showAuxSidebar !== false,
+            showBottomPanel: appLayout.props.showBottomPanel === true,
+            showLeftAux: appLayout.props.showLeftAux === true,
+            showRightAux: appLayout.props.showRightAux === true,
+        };
+    }
+    if (typeof appLayout === 'string') {
+        return layoutIdToPanelVisibility(appLayout);
+    }
+    return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY };
+}
+
+export async function resolveStoredPanelVisibility(
+    appLayout?: LayoutDescriptor,
+): Promise<LayoutPanelVisibility> {
+    try {
+        const saved = await appSettings.get(LAYOUT_PANEL_SETTINGS_KEY) as Partial<LayoutPanelVisibility> | undefined;
+        if (saved && typeof saved === 'object') {
+            return normalizePanelVisibility(saved);
+        }
+    } catch {
+        // fall through to legacy/app defaults
+    }
+
+    try {
+        const legacyLayoutId = await appSettings.get(LEGACY_PREFERRED_LAYOUT_KEY) as string | undefined;
+        if (legacyLayoutId) {
+            return layoutIdToPanelVisibility(legacyLayoutId);
+        }
+    } catch {
+        // fall through to app defaults
+    }
+
+    return resolveInitialPanelVisibilityFromApp(appLayout);
+}
+
+export function findStandardLayout(container?: ParentNode | null): DocksStandardLayout | null {
+    const root = container ?? document.getElementById('app-root') ?? document.body;
+    if (!root || typeof root.querySelector !== 'function') {
+        return null;
+    }
+    return root.querySelector('docks-standard-layout');
+}
+
+export type LayoutPanelOption = {
+    key: keyof LayoutPanelVisibility;
+    label: string;
+    icon: string;
+};
+
+export const LAYOUT_PANEL_OPTIONS: LayoutPanelOption[] = [
+    { key: 'showLeftSidebar', label: 'Left sidebar', icon: 'docks layout-standard-left-sidebar' },
+    { key: 'showAuxSidebar', label: 'Right sidebar', icon: 'docks layout-standard-right-sidebar' },
+    { key: 'showBottomPanel', label: 'Bottom panel', icon: 'docks layout-standard-bottom-panel' },
+    { key: 'showLeftAux', label: 'Left Aux', icon: 'docks layout-standard-left-aux' },
+    { key: 'showRightAux', label: 'Right Aux', icon: 'docks layout-standard-right-aux' },
+];

package/src/dialogs/navigable-info-dialog.ts

@@ -85,10 +85,13 @@ export class DocksNavigableInfoDialogContent extends DocksDialogContent {
     }
 
     private handleClose() {
-        const dialog = this.closest('wa-dialog');
-        if (dialog && this.resolveCallback) {
+        if (this.resolveCallback) {
             this.resolveCallback();
         }
+        const dialog = this.closest('wa-dialog') as (HTMLElement & { open?: boolean }) | null;
+        if (dialog && dialog.open !== false) {
+            dialog.open = false;
+        }
     }
 
     static styles = [