quilt-vanilla 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quilt-vanilla",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Vanilla DOM split panes, tabs, themes, and same-origin window popouts",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "prepack": "node ../../scripts/build-package.mjs dom --dependencies"
   },
   "dependencies": {
-    "quilt-core": "0.2.4"
+    "quilt-core": "0.3.0"
   },
   "sideEffects": [
     "**/*.css"

package/src/chrome-size.ts

@@ -0,0 +1,99 @@
+import type { TabBarStyle } from './types.js';
+import { themePixels } from './theme.js';
+
+/** Measure only chrome, at its smallest presentation, without touching live views. */
+export function chromeMinimum(
+  region: HTMLElement,
+  header: HTMLElement,
+  style: TabBarStyle,
+): { minWidth: number; minHeight: number } {
+  if (header.hidden) return { minWidth: 0, minHeight: 0 };
+  const doc = region.ownerDocument;
+  const win = doc.defaultView!;
+  const left = style.placement === 'left';
+  const compact = style.display === 'compact';
+  const probe = region.cloneNode(false) as HTMLElement;
+  probe.removeAttribute('id');
+  probe.removeAttribute('data-node-id');
+  probe.dataset.tabPlacement = left ? 'left' : 'top';
+  probe.dataset.tabDisplay = compact ? 'compact' : 'automatic';
+  probe.dataset.tabAttachment = 'anchored';
+  probe.dataset.tabBar = 'full';
+  probe.dataset.tabBarFilled = 'true';
+  probe.setAttribute('aria-hidden', 'true');
+  probe.inert = true;
+  probe.style.cssText =
+    'position:fixed;left:-10000px;top:0;width:10000px;height:10000px;visibility:hidden;pointer-events:none';
+  const bar = header.cloneNode(true) as HTMLElement;
+  bar.removeAttribute('style');
+  bar.dataset.tabDisplay = probe.dataset.tabDisplay;
+  bar.querySelectorAll('[id]').forEach((element) => element.removeAttribute('id'));
+  bar
+    .querySelectorAll('.layouts-tab-cap,.layouts-tab-outline')
+    .forEach((element) => element.remove());
+  probe.append(bar);
+  region.parentElement!.append(probe);
+  try {
+    const css = (element: Element) => win.getComputedStyle(element);
+    const px = (value: string) => parseFloat(value) || 0; // Computed CSS dimensions are pixels.
+    const outer = (element: HTMLElement, vertical: boolean) => {
+      const c = css(element);
+      return (
+        (vertical
+          ? element.getBoundingClientRect().height
+          : element.getBoundingClientRect().width) +
+        px(vertical ? c.marginTop : c.marginLeft) +
+        px(vertical ? c.marginBottom : c.marginRight)
+      );
+    };
+    const items = [...bar.querySelectorAll<HTMLElement>('.layouts-tab-item')];
+    const icon = themePixels(region, '--layouts-icon-size', 16);
+    for (const item of items) {
+      item.querySelector<HTMLElement>('.layouts-tab-label')!.style.display = 'none';
+      if (!left) {
+        const close = item.querySelector<HTMLElement>('.layouts-tab-close');
+        const showClose = !compact && item.dataset.active === 'true' && !!close;
+        if (close) close.style.display = showClose ? 'block' : 'none';
+        const minimum = Math.max(
+          px(css(item).minWidth),
+          icon + (compact ? 16 : 8) + (showClose ? outer(close!, false) : 0),
+        );
+        item.style.flex = '0 0 ' + minimum + 'px';
+        item.style.width = minimum + 'px';
+      }
+    }
+    const list = bar.querySelector<HTMLElement>('.layouts-tabs')!;
+    const controls = [...bar.children].filter(
+      (child): child is HTMLElement =>
+        child instanceof win.HTMLElement && child.classList.contains('layouts-button'),
+    );
+    const c = css(bar);
+    const listCss = css(list);
+    const tabs =
+      items.reduce((sum, item) => sum + outer(item, left), 0) +
+      Math.max(0, items.length - 1) * px(left ? listCss.rowGap : listCss.columnGap);
+    const main =
+      tabs +
+      controls.reduce((sum, control) => sum + outer(control, left), 0) +
+      Math.max(0, controls.length + (items.length ? 1 : 0) - 1) *
+        px(left ? c.rowGap : c.columnGap) +
+      px(left ? c.paddingTop : c.paddingLeft) +
+      px(left ? c.paddingBottom : c.paddingRight) +
+      px(left ? c.borderTopWidth : c.borderLeftWidth) +
+      px(left ? c.borderBottomWidth : c.borderRightWidth);
+    const cross = left ? bar.getBoundingClientRect().width : bar.getBoundingClientRect().height;
+    // Reserve the possible content scrollbar gutter for floating chrome. This also
+    // prevents the minimum from oscillating as content begins/stops scrolling.
+    const inset =
+      style.attachment === 'floating'
+        ? 2 * Math.max(0, themePixels(region, '--layouts-panel-padding', 8)) +
+          Math.max(0, themePixels(region, '--layouts-scrollbar-size', 6))
+        : 0;
+    return {
+      minWidth: Math.ceil((left ? cross : main) + inset),
+      minHeight: Math.ceil((left ? main : cross) + inset),
+    };
+  } finally {
+    probe.remove();
+  }
+}

package/src/close.ts

@@ -41,7 +41,12 @@ export function closeRequests(
     };
     let cleanup = () => {};
     try {
-      if (!panes.length || panes.some((pane) => !options.store.can(pane.id, 'close'))) return false;
+      const target = kind === 'group' ? findNode(options.store.getSnapshot().root, id) : undefined;
+      if (
+        (!panes.length && target?.kind !== 'group') ||
+        panes.some((pane) => !options.store.can(pane.id, 'close'))
+      )
+        return false;
       if (requiringConfirmation.length) {
         const decision = options.confirmClose
           ? Promise.resolve(options.confirmClose(request))

package/src/corners.ts

@@ -12,6 +12,7 @@ export function bindCorners(
   scope: Scope,
   split: (pane: Pane | undefined, group: Group, direction: Direction, ratio: number) => void,
   report: (error: unknown) => void,
+  measureBounds: typeof bounds = bounds,
 ) {
   const doc = host.ownerDocument;
   let drag: Scope | undefined;
@@ -116,7 +117,7 @@ export function bindCorners(
           const layout = options.store.getSnapshot();
           const current = findNode(layout.root, id);
           if (!current) return;
-          const constraints = bounds(current, layout);
+          const constraints = measureBounds(current, layout);
           const min = horizontal ? constraints.minWidth : constraints.minHeight;
           const max = horizontal ? constraints.maxWidth : constraints.maxHeight;
           const total = horizontal ? rect.width : rect.height;

package/src/index.ts

@@ -1,14 +1,35 @@
-export { mountLayout } from './renderer.js';
-export type * from './types.js';
+export { Workspace } from './workspace-api.js';
+export type {
+  WorkspaceHandle,
+  WorkspaceOptions,
+  WorkspaceOptionUpdates,
+  WorkspaceEvents,
+  WorkspaceChange,
+  PaneHandle,
+  PaneType,
+  PaneTypes,
+  AddPaneOptions,
+  CloseOptions,
+} from './workspace-api.js';
+export type {
+  PaneContext,
+  PaneView,
+  PaneRenderer,
+  TabBarStyle,
+  TabBarOptions,
+  InitialConfiguration,
+  WorkspaceSettings,
+  KeyBinding,
+  CloseRequest,
+} from './types.js';
 
 export { TabRegistry } from './registry.js';
 export type { TabRegistration } from './registry.js';
 export { themes, themeFamilies } from './theme.js';
 export type { LayoutTheme } from './theme.js';
-export { LayoutStore, LayoutError, createLayout, parseLayout, validate } from 'quilt-core';
+export { LayoutError, createLayout, parseLayout, validate } from 'quilt-core';
 export type {
   AutoCollapse,
-  LayoutStoreOptions,
   Json,
   Capability,
   Axis,

package/src/panes.ts

@@ -24,67 +24,94 @@ export function mountPane(
   const renderer = Object.hasOwn(options.renderers ?? {}, pane.type)
     ? options.renderers?.[pane.type]
     : undefined;
-  let view: PaneView;
+  let view: PaneView = { dispose() {} };
+  let observer: ResizeObserver | undefined;
+  let disposed = false;
+  const controller = new (win as Window & typeof globalThis).AbortController();
+  const cleanups: (() => void)[] = [];
+  const reportCleanup = (error: unknown) => {
+    try {
+      options.onError?.(error);
+    } catch {
+      /* Finish teardown even if reporting fails. */
+    }
+  };
+  const run = (callback: () => void) => {
+    try {
+      callback();
+    } catch (error) {
+      reportCleanup(error);
+    }
+  };
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    run(() => controller.abort());
+    run(() => observer?.disconnect());
+    run(() => view.dispose());
+    for (const cleanup of cleanups.splice(0).reverse()) run(cleanup);
+    element.remove();
+  };
   let result: MountedPane | undefined;
   const reportError = (error: unknown) => {
     if (result) result.failed = true;
     options.onError?.(error);
   };
-  if (renderer)
-    view = renderer({
-      element,
-      reportError,
-      document: doc,
-      window: win,
-      pane,
-      state: options.getPaneState?.(pane.id),
-      location,
-    });
-  else {
-    element.append(
-      el(
-        doc,
-        'div',
-        'layouts-placeholder',
-        message(options, 'Unknown pane type: {type}. Register a renderer to display this pane.', {
-          type: pane.type,
-        }),
-      ),
-    );
-    view = { dispose() {} };
-  }
-  const observer = new ResizeObserver((entries) => {
-    const rect = entries[0]?.contentRect;
-    if (rect) {
-      try {
-        view.resize?.(rect.width, rect.height);
-      } catch (error) {
-        options.onError?.(error);
-      }
+  try {
+    if (renderer)
+      view = renderer({
+        signal: controller.signal,
+        onCleanup(callback) {
+          if (disposed) run(callback);
+          else cleanups.push(callback);
+        },
+        element,
+        reportError,
+        document: doc,
+        window: win,
+        pane,
+        state: options.getPaneState?.(pane.id),
+        location,
+      }) ?? { dispose() {} };
+    else {
+      element.append(
+        el(
+          doc,
+          'div',
+          'layouts-placeholder',
+          message(options, 'Unknown pane type: {type}. Register a renderer to display this pane.', {
+            type: pane.type,
+          }),
+        ),
+      );
+      view = { dispose() {} };
     }
-  });
-  observer.observe(element);
-  let disposed = false;
-  result = {
-    element,
-    view,
-    pane,
-    signature: JSON.stringify(pane),
-    renderer,
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      observer.disconnect();
-      try {
-        view.dispose();
-      } finally {
-        element.remove();
+    observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (rect) {
+        try {
+          view.resize?.(rect.width, rect.height);
+        } catch (error) {
+          options.onError?.(error);
+        }
       }
-    },
-  };
-  if (location === 'main')
-    void view.ready?.catch((error) => {
-      if (!disposed) reportError(error);
     });
-  return result;
+    observer.observe(element);
+    result = {
+      element,
+      view,
+      pane,
+      signature: JSON.stringify(pane),
+      renderer,
+      dispose,
+    };
+    if (location === 'main')
+      void view.ready?.catch((error) => {
+        if (!disposed) reportError(error);
+      });
+    return result;
+  } catch (error) {
+    dispose();
+    throw error;
+  }
 }

package/src/registry.ts

@@ -46,6 +46,11 @@ export class TabRegistry {
 }
 
 let instanceSequence = 0;
+export function createPaneId(): string {
+  return (
+    globalThis.crypto?.randomUUID?.() ?? `quilt-${Date.now().toString(36)}-${++instanceSequence}`
+  );
+}
 
 export interface PaneRegistration<T> {
   type: string;
@@ -90,10 +95,7 @@ export class PaneRegistry<T> {
           title: stored.title,
           ...(stored.icon !== undefined ? { icon: stored.icon } : {}),
           ...supplied,
-          id:
-            supplied.id ??
-            globalThis.crypto?.randomUUID?.() ??
-            `quilt-${Date.now().toString(36)}-${++instanceSequence}`,
+          id: supplied.id ?? createPaneId(),
         };
       },
     });

package/src/renderer.ts

@@ -1,3 +1,4 @@
+import { chromeMinimum } from './chrome-size.js';
 import { closeRequests } from './close.js';
 import { dockLayout, parseWorkspace } from './workspace.js';
 import { validateTheme, themePixels } from './theme.js';
@@ -9,9 +10,18 @@ import { bindCorners } from './corners.js';
 import { applyTheme } from './theme.js';
 import { fillTabs } from './tabs.js';
 import { bindShortcuts } from './shortcuts.js';
-import { allocate, bounds, DIVIDER, findNode, groups, paneIds } from 'quilt-core';
+import {
+  LayoutStore,
+  createLayout,
+  allocate,
+  bounds as modelBounds,
+  DIVIDER,
+  findNode,
+  groups,
+  paneIds,
+} from 'quilt-core';
 import type { Group, Layout, Node, Pane } from 'quilt-core';
-import type { LayoutOptions, ResolvedLayoutOptions, MountedLayout } from './types.js';
+import type { LayoutOptions, ResolvedLayoutOptions, MountedLayout, TabBarStyle } from './types.js';
 import { Scope, el, syncChildren } from './lifetime.js';
 import { mountPane } from './panes.js';
 import type { MountedPane } from './panes.js';
@@ -26,19 +36,51 @@ interface Region {
   divider?: HTMLElement;
   signature?: string;
   updateTabBar?: () => void;
+  tabStyle?: () => TabBarStyle;
 }
 let nextMount = 0;
 export function mountLayout<State = unknown>(
   host: HTMLElement,
   input: LayoutOptions<State>,
 ): MountedLayout<State> {
-  // State typing is a boundary contract; the renderer only forwards the value.
-  return mountLayoutInternal(
-    host,
-    input as unknown as ResolvedLayoutOptions,
-  ) as MountedLayout<State>;
+  if ('store' in input)
+    throw new Error('Quilt owns its store; pass initialLayout or initialWorkspace');
+  if (input.initialLayout !== undefined && input.initialWorkspace !== undefined)
+    throw new Error('initialLayout and initialWorkspace are mutually exclusive');
+  if (input.registry && (input.renderers || input.tabs))
+    throw new Error('registry cannot be combined with renderers or tabs');
+  const preset =
+    input.initialWorkspace === undefined ? undefined : parseWorkspace(input.initialWorkspace);
+  const theme = preset?.theme ?? input.theme ?? {};
+  const tabBar = preset?.tabBar ?? input.tabBar ?? {};
+  validateTheme(theme);
+  validateTabBar(tabBar);
+  const store = new LayoutStore(
+    dockLayout(preset?.layout ?? input.initialLayout ?? createLayout()),
+    {
+      autoCollapse: preset?.autoCollapse ?? 'disabled',
+    },
+  );
+  // The initialization scope rolls back even if setup fails before returning a handle.
+  const scope = new Scope();
+  scope.add(() => store.dispose());
+  try {
+    return mountLayoutInternal(
+      host,
+      { ...input, store, theme, tabBar } as unknown as ResolvedLayoutOptions,
+      scope,
+    ) as MountedLayout<State>;
+  } catch (error) {
+    scope.dispose();
+    throw error;
+  }
 }
-function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): MountedLayout {
+
+function mountLayoutInternal(
+  host: HTMLElement,
+  input: ResolvedLayoutOptions,
+  scope: Scope,
+): MountedLayout {
   const options = { ...input };
   const configure = () => {
     if (options.registry) {
@@ -58,8 +100,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
   const doc = host.ownerDocument,
     win = doc.defaultView;
   if (!win) throw new Error('Layout host must belong to a live document');
-  const scope = new Scope(),
-    regions = new Map<string, Region>(),
+  const regions = new Map<string, Region>(),
     panes = new Map<string, MountedPane>();
   const root = el(doc, 'div', 'layouts');
   applyTheme(root, options.theme ?? {});
@@ -69,6 +110,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
   status.setAttribute('role', 'status');
   root.append(stage, status);
   host.append(root);
+  scope.add(() => root.remove());
   let disposed = false,
     rendering = false,
     again = false,
@@ -89,9 +131,20 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       error(e);
     }
   };
-  const requestClose = closeRequests(root, options, scope, error);
+  const closeScope = new Scope();
+  scope.add(() => closeScope.dispose());
+  const requestClose = closeRequests(root, options, closeScope, error);
   const windows = new Windows(doc, options, error, root);
+  scope.add(() => windows.dispose());
+  scope.add(() => {
+    for (const pane of panes.values()) pane.dispose();
+    panes.clear();
+    for (const region of regions.values()) region.scope.dispose();
+    regions.clear();
+  });
   const menu = createPaneMenu(root, options, windows, render, error, requestClose);
+  scope.add(() => menu.dispose());
+  scope.add(() => dragScope?.dispose());
   bindShortcuts(root, options, scope, act, (group) => {
     const region = regions.get(group.id);
     if (region) menu.addTab(region.header ?? region.element, group);
@@ -123,24 +176,25 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       r.header = el(doc, 'header', 'layouts-header');
       r.body = el(doc, 'div', 'layouts-body');
       r.element.append(r.header, r.body);
+      r.tabStyle = () => {
+        const current = findNode(options.store.getSnapshot().root, node.id);
+        return {
+          ...tabBar,
+          ...(tabBar.regions?.[node.id] ?? {}),
+          ...(current?.kind === 'group' && current.tabDisplay
+            ? { display: current.tabDisplay }
+            : {}),
+          ...(current?.kind === 'group' && current.tabPlacement
+            ? { placement: current.tabPlacement }
+            : {}),
+        };
+      };
       r.updateTabBar = bindTabBar(
         r.element,
         r.header,
         root,
         r.scope,
-        () => {
-          const current = findNode(options.store.getSnapshot().root, node.id);
-          return {
-            ...tabBar,
-            ...(tabBar.regions?.[node.id] ?? {}),
-            ...(current?.kind === 'group' && current.tabDisplay
-              ? { display: current.tabDisplay }
-              : {}),
-            ...(current?.kind === 'group' && current.tabPlacement
-              ? { placement: current.tabPlacement }
-              : {}),
-          };
-        },
+        r.tabStyle,
         () => options.messages ?? {},
       );
       bindCorners(
@@ -150,6 +204,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
         r.scope,
         (pane, group, direction, ratio) => menu.open(r.header!, pane, group, direction, ratio),
         error,
+        bounds,
       );
       r.element.setAttribute('aria-label', message(options, 'Pane region'));
       r.scope.listen(r.element, 'dragover', (event) => {
@@ -203,10 +258,15 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
         dragScope?.dispose();
         const drag = new Scope();
         dragScope = drag;
-        const resize = isolatedResize(geometryLayout(), node.id, (child, axis) => {
-          const rect = regions.get(child.id)!.element.getBoundingClientRect();
-          return axis === 'horizontal' ? rect.width : rect.height;
-        });
+        const resize = isolatedResize(
+          geometryLayout(),
+          node.id,
+          (child, axis) => {
+            const rect = regions.get(child.id)!.element.getBoundingClientRect();
+            return axis === 'horizontal' ? rect.width : rect.height;
+          },
+          bounds,
+        );
         r.divider!.setPointerCapture(e.pointerId);
         root.classList.add('layouts-resizing');
         drag.add(() => {
@@ -258,10 +318,15 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
           n.axis === 'horizontal' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
         if (keys.includes(e.key)) {
           e.preventDefault();
-          const resize = isolatedResize(geometryLayout(), node.id, (child, axis) => {
-            const rect = regions.get(child.id)!.element.getBoundingClientRect();
-            return axis === 'horizontal' ? rect.width : rect.height;
-          });
+          const resize = isolatedResize(
+            geometryLayout(),
+            node.id,
+            (child, axis) => {
+              const rect = regions.get(child.id)!.element.getBoundingClientRect();
+              return axis === 'horizontal' ? rect.width : rect.height;
+            },
+            bounds,
+          );
           act(() =>
             options.store.resizeMany(
               resize.ratios(
@@ -558,9 +623,29 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       return node.axis === 'horizontal' ? b.minWidth < b.maxWidth : b.minHeight < b.maxHeight;
     });
   }
+  const chromeSizes = new Map<string, { minWidth: number; minHeight: number }>();
+  function bounds(node: Node, layout: Layout) {
+    return modelBounds(node, layout, (group, constraints) => {
+      const chrome = chromeSizes.get(group.id);
+      if (!chrome) return constraints;
+      const minWidth = Math.max(constraints.minWidth, chrome.minWidth);
+      const minHeight = Math.max(constraints.minHeight, chrome.minHeight);
+      return {
+        minWidth,
+        minHeight,
+        maxWidth: Math.max(constraints.maxWidth, minWidth),
+        maxHeight: Math.max(constraints.maxHeight, minHeight),
+      };
+    });
+  }
   // Renderer-only gaps participate in bounds/allocation without modifying Layout JSON.
   function geometryLayout(): Layout {
     const layout = options.store.getSnapshot();
+    chromeSizes.clear();
+    for (const [id, region] of regions) {
+      if (region.header && region.tabStyle && region.element.isConnected)
+        chromeSizes.set(id, chromeMinimum(region.element, region.header, region.tabStyle()));
+    }
     const pixels = (property: string, fallback: number) => themePixels(root, property, fallback);
     const width = pixels('--layouts-resize-handle-width', DIVIDER);
     const disabledWidth = pixels('--layouts-disabled-resize-handle-width', 0);
@@ -648,9 +733,21 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       render();
     }),
   );
-  const observer = new ResizeObserver(measure);
+  // Geometry can change the stage's scrollbar gutter. Defer those writes out
+  // of ResizeObserver delivery so WebKit does not detect a nested resize loop.
+  let measureFrame = 0;
+  const observer = new ResizeObserver(() => {
+    if (!measureFrame && !disposed)
+      measureFrame = doc.defaultView!.requestAnimationFrame(() => {
+        measureFrame = 0;
+        if (!disposed) measure();
+      });
+  });
   observer.observe(stage);
-  scope.add(() => observer.disconnect());
+  scope.add(() => {
+    observer.disconnect();
+    if (measureFrame) doc.defaultView!.cancelAnimationFrame(measureFrame);
+  });
   scope.listen(doc, 'dragend', () => {
     dragId = undefined;
     for (const r of regions.values()) delete r.element.dataset.drop;
@@ -702,12 +799,22 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
     themeObserver.observe(ancestor, { attributes: true });
   themeObserver.observe(doc.head, { childList: true, subtree: true, characterData: true });
   scope.add(() => themeObserver.disconnect());
+  // Cancel asynchronous actions before tearing down views and the owned store.
+  scope.add(() => {
+    closeScope.dispose();
+    windows.dispose();
+  });
   render();
   return {
+    store: options.store,
     requestClose,
     refreshTheme,
     updateOptions(next) {
       if (disposed) return;
+      if ('store' in next || 'initialLayout' in next || 'initialWorkspace' in next)
+        throw new Error(
+          'Initial configuration cannot be updated; use loadWorkspace or store commands',
+        );
       const candidate = { ...options, ...next };
       if (candidate.registry && (next.renderers || next.tabs))
         throw new Error('registry cannot be combined with renderers or tabs');
@@ -801,21 +908,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
     dispose() {
       if (disposed) return;
       disposed = true;
-      menu.dispose();
-      dragScope?.dispose();
       scope.dispose();
-      windows.dispose();
-      for (const p of panes.values()) {
-        try {
-          p.dispose();
-        } catch (e) {
-          error(e);
-        }
-      }
-      for (const r of regions.values()) r.scope.dispose();
-      panes.clear();
-      regions.clear();
-      root.remove();
     },
   };
 }