@forgeax/interface 0.4.1

package/dist/package/browser/components/DockShell/edgeDrawer.js

@@ -0,0 +1,1144 @@
+import { OWNED_INTERACTION_SURFACE_SELECTOR, createCoalescedFrameTaskLifecycle, createReplaceableObservationSetLifecycle, isDismissExemptInteractionTarget, installActivePanelObservation, installBoundedFrameRetryLifecycle, installCaptureInteractionObservation, installCustomEventObservation, installDragPresenceLifecycle, installLayoutFromJsonObservation, installOutsideDismissLifecycle, installPanelMembershipObservation, installPointerDragSession, installViewportResizeObservation, installWillDropObservation, } from '@forgeax/app-shell/react';
+import { installDockLayoutObservation } from '@forgeax/app-shell/dock';
+import { FOOTER_PANEL_ID_LIST } from './footer-panels';
+import { isFooterPanelUserVisible, registerFooterPanelEnsure } from './footer-panel-visibility';
+import { clearEdgePins, EDGE_PIN_CLASS, pinnedPanelIdIn, setEdgePin } from './edgePinStore';
+const OPEN_CLASS = 'fx-edge-drawer-open';
+export const EDGE_DRAWER_SURFACE_BLOCK_CLASS = 'fx-edge-drawer-visible';
+/** Toggled to (re)start the wipe-in animation — on first open AND on same-strip tab switch. */
+const ANIM_CLASS = 'fx-edge-drawer-animating';
+const EDGE_POSITIONS = ['left', 'right', 'top', 'bottom'];
+const EDGE_DRAWER_DISMISS_EXEMPT_SELECTORS = [
+    '.forgeax-ctx-menu-panel',
+    '.dv-context-menu',
+];
+/**
+ * Publish foreground drawer ownership to portal-mounted surfaces. The live
+ * viewport sits outside Dockview's stacking tree, so z-index alone cannot make
+ * every relocated edge drawer win hit testing consistently.
+ */
+export function setEdgeDrawerSurfaceInteractionBlocked(root, blocked) {
+    root.classList.toggle(EDGE_DRAWER_SURFACE_BLOCK_CLASS, blocked);
+}
+/**
+ * Portalled controls do not participate in the drawer element's DOM subtree.
+ * They must opt into this interaction-surface contract when they belong to the
+ * active drawer; the app context menu keeps its legacy class for the same
+ * reason, and dockview's own tab menu (`.dv-context-menu`, mounted into the
+ * shell's popover anchor) is the same case one layer down — it acts ON the
+ * drawer's tab, so picking an item must not first collapse the drawer.
+ */
+export function isEdgeDrawerDismissExemptTarget(target) {
+    return isDismissExemptInteractionTarget(target, EDGE_DRAWER_DISMISS_EXEMPT_SELECTORS);
+}
+/** Slots always registered so root-edge drop / "Move to Side" work even when
+ *  the default layout keeps panels in the grid (no edgeGroups in JSON). */
+const ENSURED_EDGE_SLOTS = ['left', 'right', 'bottom'];
+/** All edge groups, including EMPTY ones (zero panels). Must walk `api.groups`
+ *  — collecting via panels misses strips whose last tab was closed, which is
+ *  exactly when we need to hide them. */
+function edgeGroups(api) {
+    return api.groups.filter((group) => group.api.location.type === 'edge');
+}
+/** The edge group whose element contains `el`, if any. */
+function edgeGroupFromElement(api, el) {
+    return edgeGroups(api).find((group) => group.element.contains(el));
+}
+/**
+ * Install the drawer behaviour for every edge group under `root`. Returns a
+ * disposer that removes all listeners and closes any open drawer. Idempotent to
+ * call once per DockviewApi (wire it from DockRegion.onReady, push the disposer
+ * into onReadyCleanupsRef).
+ */
+export function installEdgeDrawer(api, root) {
+    let openGroup = null;
+    let preserveNextActiveTabClick = false;
+    const syncSurfaceInteractionBlock = () => {
+        if (typeof document === 'undefined')
+            return;
+        setEdgeDrawerSurfaceInteractionBlocked(document.documentElement, openGroup !== null);
+    };
+    const hasOwnedInteractionSurface = () => typeof document !== 'undefined'
+        && document.querySelector(OWNED_INTERACTION_SURFACE_SELECTOR) !== null;
+    // UE: pin is per-TAB, and at most ONE pin per edge group (mutual exclusion).
+    // State lives in edgePinStore so DockTab can RENDER the toggle; this module
+    // owns the rules and the click that flips it.
+    const pinnedPanelId = (group) => pinnedPanelIdIn(group.id);
+    const findPanel = (group, id) => group.panels.find((p) => p.id === id);
+    const activeIsPinned = (group) => {
+        const active = group.activePanel;
+        return !!active && pinnedPanelId(group) === active.id;
+    };
+    const edgeOf = (group) => {
+        const cl = group.element.classList;
+        if (cl.contains('dv-groupview-header-right'))
+            return 'right';
+        if (cl.contains('dv-groupview-header-top'))
+            return 'top';
+        if (cl.contains('dv-groupview-header-bottom'))
+            return 'bottom';
+        return 'left';
+    };
+    const isHoriz = (e) => e === 'left' || e === 'right';
+    // The var that carries the user-dragged drawer size for a given edge.
+    const sizeVar = (e) => isHoriz(e) ? '--fx-edge-drawer-width' : '--fx-edge-drawer-height';
+    const readSize = (group, e) => {
+        const n = parseFloat(group.element.style.getPropertyValue(sizeVar(e)));
+        return Number.isFinite(n) ? n : 300;
+    };
+    // ── Bottom edge ↔ footer merge ──────────────────────────────────────────
+    // The bottom edge strip is RELOCATED (DOM move) into the StatusBar footer
+    // host so its tabs share the footer row with the status items. The move keeps
+    // the real dockview tab element (native drag in/out, native drop targets),
+    // so we only re-anchor the drawer + re-scope our own listeners. Left/right
+    // strips stay in place under `root`.
+    let bottomStripEl = null;
+    // Identity of the group whose strip is currently relocated. fromJSON /
+    // rebuilds DISPOSE the bottom group and create a fresh one; the tracked
+    // bottomStripEl then points at a detached (empty) strip. Comparing group ids
+    // lets relocate tell "same group, already moved" (reuse bottomStripEl) from
+    // "new group" (must grab the new group's live strip, never the stale one).
+    let bottomGroupId = null;
+    const footerHost = () => document.querySelector('[data-fx-dock-bottom-host]');
+    // When a fresh bottom group exists but its header isn't built yet, relocate
+    // bails; this bounded next-frame nudge re-tries until the strip is ready
+    // (reset on any successful relocate) so we never stall on the stale strip.
+    let bailFrames = 0;
+    const footerRelocationFrame = createCoalescedFrameTaskLifecycle({
+        task: () => relocateBottomStrip(),
+    });
+    const scheduleRelocate = footerRelocationFrame.schedule;
+    // The element that actually holds a group's `.dv-tab`s: the relocated footer
+    // container for the bottom edge, else the group element itself.
+    const tabsRootOf = (group) => edgeOf(group) === 'bottom' && bottomStripEl ? bottomStripEl : group.element;
+    // ── Footer-anchored drop overlays for the relocated bottom strip ─────────
+    // Each tab's Droptarget paints its receive-highlight / reorder line into
+    // `group.model.dropTargetContainer` — by default `rootDropTargetContainer`,
+    // anchored to the dockview shell element. Our bottom strip is relocated into
+    // the footer (OUTSIDE the shell), so that anchor can't cover it: drags over
+    // the footer tabs showed no highlight and reorder had no indicator. dockview
+    // supports a PER-GROUP drop-target container (the same pattern it uses for
+    // popout windows). Its `DropTargetAnchorContainer` class is internal /
+    // unexported, so we hand the bottom group a shim with the exact
+    // `{ disabled, model }` shape droptarget.ts consumes, mounting overlays into
+    // a viewport-fixed host so `renderAnchoredOverlay` positions them at the
+    // footer tabs' real coordinates.
+    let dropAnchorHost = null;
+    let dropAnchorModel;
+    const ensureDropAnchorHost = () => {
+        if (dropAnchorHost)
+            return dropAnchorHost;
+        const host = document.createElement('div');
+        host.className = 'fx-edge-drop-anchor-host';
+        document.body.appendChild(host);
+        dropAnchorHost = host;
+        return host;
+    };
+    // Force-remove any live footer drop overlay. dockview only calls the shim's
+    // clear() when the bottom group is the ACTUAL drop target; dragging a bottom
+    // tab OUT to another group drops elsewhere, so the bottom tab's droptarget
+    // only sees dragleave (which, with an override target, intentionally does NOT
+    // clear) — leaving a stale lime rectangle in the footer. Driven by the global
+    // dragover watcher below (during the drag) and the dragend/drop backstop.
+    const clearDropAnchor = () => {
+        if (!dropAnchorModel)
+            return;
+        try {
+            dropAnchorModel.root.parentElement?.removeChild(dropAnchorModel.root);
+        }
+        catch { /* noop */ }
+        dropAnchorModel = undefined;
+    };
+    const bottomDropContainer = {
+        get disabled() { return false; },
+        set disabled(_v) { },
+        get model() {
+            const host = ensureDropAnchorHost();
+            return {
+                clear: () => {
+                    dropAnchorModel?.root.parentElement?.removeChild(dropAnchorModel.root);
+                    dropAnchorModel = undefined;
+                },
+                exists: () => !!dropAnchorModel,
+                getElements: () => {
+                    if (dropAnchorModel) {
+                        dropAnchorModel.changed = false;
+                        return dropAnchorModel;
+                    }
+                    const root = document.createElement('div');
+                    root.className = 'dv-drop-target-container';
+                    const overlay = document.createElement('div');
+                    overlay.className = 'dv-drop-target-anchor';
+                    overlay.style.visibility = 'hidden';
+                    root.appendChild(overlay);
+                    host.appendChild(root);
+                    dropAnchorModel = { root, overlay, changed: true };
+                    return dropAnchorModel;
+                },
+            };
+        },
+        dispose: () => {
+            dropAnchorHost?.remove();
+            dropAnchorHost = null;
+            dropAnchorModel = undefined;
+        },
+    };
+    const attachBottomDropContainer = (group) => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const model = group.model;
+            if (model && model.dropTargetContainer !== bottomDropContainer) {
+                model.dropTargetContainer = bottomDropContainer;
+            }
+        }
+        catch { /* dockview internals moved — footer drop keeps working sans overlay */ }
+    };
+    let drawerPortalHost = null;
+    let portaledFlyout = null;
+    const FLYOUT_CLASS = 'fx-edge-drawer-flyout';
+    const PORTAL_HOST_CLASS = 'fx-edge-drawer-portal-host';
+    const DRAWER_VAR_NAMES = [
+        '--fx-edge-drawer-width',
+        '--fx-edge-drawer-height',
+        '--fx-edge-drawer-left',
+        '--fx-edge-drawer-right',
+        '--fx-edge-drawer-top',
+        '--fx-edge-drawer-bottom',
+        '--fx-edge-strip-top',
+        '--fx-edge-strip-left',
+        '--fx-edge-strip-height',
+        '--fx-edge-strip-width',
+    ];
+    const EDGE_HEADER_CLASSES = [
+        'dv-groupview-header-left',
+        'dv-groupview-header-right',
+        'dv-groupview-header-top',
+        'dv-groupview-header-bottom',
+    ];
+    const ensureDrawerPortalHost = () => {
+        if (drawerPortalHost)
+            return drawerPortalHost;
+        const host = document.createElement('div');
+        host.className = PORTAL_HOST_CLASS;
+        document.body.appendChild(host);
+        drawerPortalHost = host;
+        return host;
+    };
+    const disposeDrawerPortalHost = () => {
+        drawerPortalHost?.remove();
+        drawerPortalHost = null;
+        portaledFlyout = null;
+    };
+    const contentContainerOf = (group) => group.element.querySelector(':scope > .dv-content-container');
+    const copyDrawerVars = (from, to) => {
+        for (const name of DRAWER_VAR_NAMES) {
+            const val = from.getPropertyValue(name);
+            if (val)
+                to.style.setProperty(name, val);
+            else
+                to.style.removeProperty(name);
+        }
+    };
+    const syncFlyoutDirectionClasses = (group, flyout) => {
+        for (const cls of EDGE_HEADER_CLASSES) {
+            flyout.classList.toggle(cls, group.element.classList.contains(cls));
+        }
+    };
+    const restoreDrawerFlyout = (group) => {
+        const flyout = portaledFlyout ?? contentContainerOf(group);
+        if (flyout) {
+            flyout.classList.remove(FLYOUT_CLASS, ANIM_CLASS);
+            for (const cls of EDGE_HEADER_CLASSES)
+                flyout.classList.remove(cls);
+            group.element.appendChild(flyout);
+        }
+        if (grip.parentElement !== group.element)
+            group.element.appendChild(grip);
+        portaledFlyout = null;
+        if (drawerPortalHost) {
+            for (const name of DRAWER_VAR_NAMES)
+                drawerPortalHost.style.removeProperty(name);
+            drawerPortalHost.replaceChildren();
+        }
+    };
+    const portalDrawerFlyout = (group) => {
+        const flyout = contentContainerOf(group);
+        if (!flyout)
+            return;
+        const host = ensureDrawerPortalHost();
+        flyout.classList.add(FLYOUT_CLASS);
+        syncFlyoutDirectionClasses(group, flyout);
+        copyDrawerVars(group.element.style, host);
+        portaledFlyout = flyout;
+        host.appendChild(flyout);
+        host.appendChild(grip);
+    };
+    const isInsideOpenDrawer = (target) => {
+        if (!target || !openGroup)
+            return false;
+        if (openGroup.element.contains(target))
+            return true;
+        // The bottom strip is relocated to the footer, outside the group and flyout.
+        if (bottomStripEl?.contains(target))
+            return true;
+        if (portaledFlyout?.contains(target))
+            return true;
+        if (grip.contains(target))
+            return true;
+        return false;
+    };
+    // Our own resize handle — a thin fixed bar riding the drawer's far edge. Native
+    // dockview resize is a splitview sash that would push the grid, which we forbid;
+    // dragging this grip only rewrites the CSS size var, so the overlay grows/shrinks
+    // without ever touching the collapsed splitview cell. One grip is reused for the
+    // single drawer that can be open at a time; while open it is portalled to
+    // `.fx-edge-drawer-portal-host` so the flyout paints above the keep-alive viewport.
+    const grip = document.createElement('div');
+    grip.className = 'fx-edge-drawer-grip';
+    // Anchor the fixed flyout to the strip's inner edge. Left/right strips grow
+    // horizontally (drawer to the strip's right/left); top/bottom grow vertically.
+    const position = (group) => {
+        const s = group.element.style;
+        // Bottom edge is footer-merged: the strip lives in the StatusBar, so anchor
+        // the drawer to span the content column (group.element still reports that
+        // width) and rise UP from the footer's top edge — not from the collapsed
+        // splitview cell.
+        if (edgeOf(group) === 'bottom') {
+            const gr = group.element.getBoundingClientRect();
+            const footer = footerHost()?.closest('.global-status-bar');
+            const footerTop = footer ? footer.getBoundingClientRect().top : window.innerHeight;
+            s.setProperty('--fx-edge-strip-left', `${gr.left}px`);
+            s.setProperty('--fx-edge-strip-width', `${gr.width}px`);
+            s.setProperty('--fx-edge-drawer-bottom', `${window.innerHeight - footerTop}px`);
+            if (openGroup === group && drawerPortalHost)
+                copyDrawerVars(s, drawerPortalHost);
+            positionGrip(group);
+            return;
+        }
+        const r = group.element.getBoundingClientRect();
+        s.setProperty('--fx-edge-drawer-left', `${r.right}px`);
+        s.setProperty('--fx-edge-drawer-right', `${window.innerWidth - r.left}px`);
+        s.setProperty('--fx-edge-drawer-top', `${r.bottom}px`);
+        s.setProperty('--fx-edge-drawer-bottom', `${window.innerHeight - r.top}px`);
+        s.setProperty('--fx-edge-strip-top', `${r.top}px`);
+        s.setProperty('--fx-edge-strip-left', `${r.left}px`);
+        s.setProperty('--fx-edge-strip-height', `${r.height}px`);
+        s.setProperty('--fx-edge-strip-width', `${r.width}px`);
+        if (openGroup === group && drawerPortalHost)
+            copyDrawerVars(s, drawerPortalHost);
+        positionGrip(group);
+    };
+    // Park the grip on the drawer's outer edge (the edge away from the strip),
+    // spanning the drawer's cross axis. Tracks the live strip rect + size var.
+    const positionGrip = (group) => {
+        const e = edgeOf(group);
+        const r = group.element.getBoundingClientRect();
+        const size = readSize(group, e);
+        const g = grip.style;
+        g.position = 'fixed';
+        // Match the drawer's cross-axis inset (DockShell.css --fx-edge-drawer-inset)
+        // so the resize grip rides the flyout's edge, not the full strip span.
+        const INSET = 6;
+        if (e === 'left') {
+            g.top = `${r.top + INSET}px`;
+            g.height = `${r.height - 2 * INSET}px`;
+            g.left = `${r.right + size - 3}px`;
+            g.width = '6px';
+            g.cursor = 'ew-resize';
+        }
+        else if (e === 'right') {
+            g.top = `${r.top + INSET}px`;
+            g.height = `${r.height - 2 * INSET}px`;
+            g.left = `${r.left - size - 3}px`;
+            g.width = '6px';
+            g.cursor = 'ew-resize';
+        }
+        else if (e === 'top') {
+            g.left = `${r.left + INSET}px`;
+            g.width = `${r.width - 2 * INSET}px`;
+            g.top = `${r.bottom + size - 3}px`;
+            g.height = '6px';
+            g.cursor = 'ns-resize';
+        }
+        else {
+            g.left = `${r.left + INSET}px`;
+            g.width = `${r.width - 2 * INSET}px`;
+            g.top = `${r.top - size - 3}px`;
+            g.height = '6px';
+            g.cursor = 'ns-resize';
+        }
+    };
+    // Restart the wipe-in keyframes. CSS `animation` only fires when the animating
+    // class is (re)applied — keeping OPEN_CLASS alone on a same-strip tab switch
+    // would leave the drawer static (UE re-animates the panel on every mode click).
+    const kickAnim = (group) => {
+        const el = group.element;
+        el.classList.remove(ANIM_CLASS);
+        // Force a style recalc so the next add is treated as a fresh animation start.
+        void el.offsetWidth;
+        el.classList.add(ANIM_CLASS);
+        const flyout = portaledFlyout ?? contentContainerOf(group);
+        if (flyout) {
+            flyout.classList.remove(ANIM_CLASS);
+            void flyout.offsetWidth;
+            flyout.classList.add(ANIM_CLASS);
+        }
+    };
+    // The bottom strip is relocated into the footer, OUTSIDE its group element, so
+    // the OPEN_CLASS we add to group.element never reaches it. Mirror the open
+    // state onto the footer strip so the active-tab highlight (dv-active-tab) only
+    // shows WHILE the drawer is open — otherwise the group's always-present active
+    // panel would paint a persistent highlight in the footer with no click.
+    // The relocated footer strip is OUTSIDE its group element, so the
+    // `dv-active-group` focus class dockview toggles never reaches it. Mirror it
+    // as `fx-bottom-edge-focused` so the lime focus accent (::before) lights ONLY
+    // while the bottom drawer is BOTH open AND focused — not merely open (an open
+    // but unfocused drawer keeps its selected tab, minus the accent bar).
+    const syncBottomFocusMarker = () => {
+        if (!bottomStripEl)
+            return;
+        const focused = !!openGroup
+            && edgeOf(openGroup) === 'bottom'
+            && openGroup.element.classList.contains('dv-active-group');
+        bottomStripEl.classList.toggle('fx-bottom-edge-focused', focused);
+    };
+    const syncBottomOpenMarker = () => {
+        if (!bottomStripEl)
+            return;
+        const isBottomOpen = !!openGroup && edgeOf(openGroup) === 'bottom';
+        bottomStripEl.classList.toggle('fx-bottom-edge-open', isBottomOpen);
+        syncBottomFocusMarker();
+    };
+    // Hard close — dispose / switching to another edge group.
+    const forceClose = () => {
+        if (openGroup) {
+            restoreDrawerFlyout(openGroup);
+            openGroup.element.classList.remove(OPEN_CLASS, ANIM_CLASS);
+            openGroup = null;
+        }
+        syncSurfaceInteractionBlock();
+        syncBottomOpenMarker();
+    };
+    const open = (group) => {
+        if (openGroup && openGroup !== group) {
+            restoreDrawerFlyout(openGroup);
+            openGroup.element.classList.remove(OPEN_CLASS, ANIM_CLASS);
+            openGroup = null;
+        }
+        openGroup = group;
+        group.element.classList.add(OPEN_CLASS);
+        syncSurfaceInteractionBlock();
+        position(group);
+        portalDrawerFlyout(group);
+        kickAnim(group);
+        syncBottomOpenMarker();
+    };
+    // Soft dismiss (outside-click / re-click active tab), UE rules:
+    //   • active tab is pinned            → keep open (no-op)
+    //   • active is non-pin, group has pin → snap back to the pinned tab
+    //   • no pin in group                 → close the drawer
+    const close = () => {
+        if (!openGroup)
+            return;
+        const group = openGroup;
+        if (activeIsPinned(group))
+            return;
+        const pinnedId = pinnedPanelId(group);
+        if (pinnedId) {
+            const pinned = findPanel(group, pinnedId);
+            if (pinned) {
+                try {
+                    pinned.api.setActive();
+                }
+                catch { /* noop */ }
+                kickAnim(group);
+                return;
+            }
+        }
+        forceClose();
+    };
+    // Per-TAB pin toggle. Same-group pins are mutually exclusive: pinning B
+    // clears A's pin. Pinning activates that tab; opens the drawer only if it
+    // was closed — never kickAnim (pin is a state toggle, not an open).
+    const togglePin = (group, panel) => {
+        const cur = pinnedPanelId(group);
+        if (cur === panel.id) {
+            setEdgePin(group.id, undefined);
+        }
+        else {
+            setEdgePin(group.id, panel.id);
+            try {
+                panel.api.setActive();
+            }
+            catch { /* noop */ }
+            if (openGroup !== group)
+                open(group);
+        }
+    };
+    // Drag the grip → rewrite the size var (clamped). Pointer capture keeps the drag
+    // alive even when the cursor leaves the 6px bar.
+    const disposeGripResize = installPointerDragSession({
+        element: grip,
+        begin: () => {
+            if (!openGroup)
+                return null;
+            const group = openGroup;
+            const edge = edgeOf(group);
+            return { group, edge, rect: group.element.getBoundingClientRect() };
+        },
+        move: ({ group, edge, rect: r }, ev) => {
+            let size;
+            if (edge === 'left')
+                size = ev.clientX - r.right;
+            else if (edge === 'right')
+                size = r.left - ev.clientX;
+            else if (edge === 'top')
+                size = ev.clientY - r.bottom;
+            else
+                size = r.top - ev.clientY;
+            size = Math.max(160, Math.min(size, 900));
+            group.element.style.setProperty(sizeVar(edge), `${size}px`);
+            if (drawerPortalHost)
+                copyDrawerVars(group.element.style, drawerPortalHost);
+            positionGrip(group);
+        },
+        preventDefault: true,
+        stopPropagation: true,
+        draggingClassName: 'fx-edge-drawer-grip--dragging',
+    });
+    // Resolve the edge group owning a strip element (tab / chrome). Handles both
+    // the in-place left/right strips (under `root`) and the relocated bottom strip
+    // (in the footer, outside `root`).
+    const edgeGroupForStripEl = (el) => {
+        if (bottomStripEl && bottomStripEl.contains(el))
+            return edgeGroupAt('bottom');
+        const groupEl = el.closest('.dv-groupview-edge');
+        if (groupEl && root.contains(groupEl))
+            return edgeGroupFromElement(api, groupEl);
+        return undefined;
+    };
+    // Void / strip chrome (not a tab) calls dockview doSetGroupActive on
+    // pointerdown — that lights the last active tab via our UE accent without
+    // opening the drawer. Swallow those activations; real tab clicks handle
+    // setActive themselves below.
+    const onStripChromePointerDown = (e) => {
+        // This listener is registered before the generic outside-dismiss listener,
+        // preserving the product rule that every dismissible pointer interaction
+        // clears a possibly cancelled footer re-click lease before the bottom strip
+        // may acquire it again for the current interaction.
+        if (openGroup && !activeIsPinned(openGroup))
+            preserveNextActiveTabClick = false;
+        const target = e.target;
+        if (!target)
+            return;
+        const inBottom = !!bottomStripEl && bottomStripEl.contains(target);
+        const groupEl = target.closest('.dv-groupview-edge');
+        if (!inBottom && (!groupEl || !root.contains(groupEl)))
+            return;
+        if (target.closest('.dv-tab'))
+            return;
+        if (target.closest('.fx-edge-drawer-grip'))
+            return;
+        if (target.closest('.dv-content-container'))
+            return;
+        e.stopPropagation();
+    };
+    const onClickCapture = (e) => {
+        const target = e.target;
+        const tabEl = target?.closest('.dv-tab');
+        if (!tabEl)
+            return;
+        const group = edgeGroupForStripEl(tabEl);
+        if (!group)
+            return;
+        // Edge-group tab: block dockview's native expand/resize entirely.
+        e.preventDefault();
+        // If a portalled control is open, let its own outside-click handler see
+        // this footer click and dismiss the control. Dockview already bails on a
+        // default-prevented tab event, so stopping propagation is unnecessary.
+        if (!hasOwnedInteractionSurface())
+            e.stopPropagation();
+        // Pin toggle (rendered by DockTab in place of close): flip THIS tab's pin.
+        const pinBtn = target?.closest(`.${EDGE_PIN_CLASS}`);
+        if (pinBtn) {
+            const panelId = pinBtn.dataset.fxEdgePinPanel;
+            const panel = panelId ? findPanel(group, panelId) : undefined;
+            if (panel)
+                togglePin(group, panel);
+            return;
+        }
+        // Map the clicked tab → its panel by DOM order within the tabs container.
+        const container = tabEl.closest('.dv-tabs-container');
+        const tabs = container
+            ? Array.from(container.querySelectorAll(':scope > .dv-tab'))
+            : [];
+        const index = tabs.indexOf(tabEl);
+        const panel = index >= 0 ? group.panels[index] : undefined;
+        // Always setActive — even when this panel is already the group's active
+        // panel. Otherwise clicking a strip tab while focus is on another group
+        // never promotes this edge group to `dv-active-group`, so the UE focus
+        // tab accent never lights up.
+        const wasActive = panel != null && group.activePanel === panel;
+        if (panel) {
+            try {
+                panel.api.setActive();
+            }
+            catch { /* noop */ }
+        }
+        // Re-click active tab → soft dismiss (pin rules inside close()).
+        // Same-strip switch → re-kick wipe-in. Else open the drawer.
+        if (openGroup === group && wasActive) {
+            const preserveOpen = preserveNextActiveTabClick;
+            preserveNextActiveTabClick = false;
+            if (preserveOpen)
+                kickAnim(group);
+            else
+                close();
+        }
+        else if (openGroup === group && !wasActive) {
+            preserveNextActiveTabClick = false;
+            kickAnim(group);
+        }
+        else {
+            preserveNextActiveTabClick = false;
+            open(group);
+        }
+    };
+    const reposition = () => { if (openGroup)
+        position(openGroup); };
+    // Hide edge strips with zero tabs. Dropping back uses the root's narrow
+    // edge overlay (kind:'edge') — see willDropSub — which routes into the
+    // registered edge group and re-shows it. No need to flash empty strips
+    // during drag.
+    const syncEmptyEdges = () => {
+        for (const pos of EDGE_POSITIONS) {
+            if (!api.getEdgeGroup(pos))
+                continue;
+            const group = edgeGroups(api).find((g) => {
+                const loc = g.api.location;
+                return loc.type === 'edge' && loc.position === pos;
+            });
+            const hasItems = (group?.panels.length ?? 0) > 0;
+            try {
+                api.setEdgeGroupVisible(pos, hasItems);
+            }
+            catch { /* noop */ }
+            if (group) {
+                group.element.classList.toggle('fx-edge-empty', !hasItems);
+            }
+            if (!hasItems && group) {
+                setEdgePin(group.id, undefined);
+                if (openGroup === group)
+                    forceClose();
+            }
+        }
+        // Keep the footer strip parented + its host empty-state in sync.
+        relocateBottomStrip();
+    };
+    const edgeGroupAt = (pos) => edgeGroups(api).find((g) => {
+        const loc = g.api.location;
+        return loc.type === 'edge' && loc.position === pos;
+    });
+    // Move dockview's bottom-edge `.dv-tabs-and-actions-container` out of the
+    // (collapsed, hidden) splitview cell and into the StatusBar footer host, so
+    // the dock tabs share the footer row with the status items. The relocated
+    // element is the REAL dockview tab strip → native drag in/out, native drop
+    // targets and our click interceptor all keep working. Idempotent; re-run on
+    // every layout change (reset/fromJSON disposes the group → new container).
+    const relocateBottomStrip = () => {
+        const host = footerHost();
+        if (!host)
+            return;
+        const group = edgeGroupAt('bottom');
+        // Resolve THIS group's live strip. Order matters:
+        //   1. If the strip is still under the group (not yet relocated) → use it.
+        //   2. Else if it's the SAME group we already relocated → reuse bottomStripEl.
+        //   3. Else it's a NEW group whose header isn't built yet → BAIL. Never fall
+        //      back to a previous group's detached strip; that's exactly what made
+        //      the footer flash correct then blank on the 2nd hydration pass.
+        let container = null;
+        if (group) {
+            container = group.element.querySelector(':scope > .dv-tabs-and-actions-container');
+            if (!container && bottomGroupId === group.id)
+                container = bottomStripEl;
+            if (!container) {
+                if (bailFrames++ < 180)
+                    scheduleRelocate();
+                return;
+            }
+        }
+        else {
+            container = bottomStripEl;
+        }
+        bailFrames = 0;
+        // Drop any stale strip a disposed group left behind in the host.
+        for (const child of Array.from(host.children)) {
+            if (child !== container)
+                child.remove();
+        }
+        if (container && container.parentElement !== host) {
+            host.appendChild(container);
+            container.classList.add('fx-bottom-edge-strip');
+        }
+        if (container) {
+            // dockview lays the collapsed (height-0) bottom group out in the shell and
+            // can stamp inline height/width/display on the tabs container + its tab
+            // strip; carried into the footer those inline values win over our CSS and
+            // render the relocated strip at 0 size (invisible until a later reflow —
+            // the "refresh shows nothing until you click" bug). Strip them so our
+            // footer CSS controls sizing, then force a reflow to paint immediately.
+            for (const prop of ['height', 'width', 'display']) {
+                container.style.removeProperty(prop);
+                (container.querySelector(':scope > .dv-tabs-container'))?.style.removeProperty(prop);
+            }
+            void container.offsetHeight;
+        }
+        bottomStripEl = container ?? null;
+        if (group)
+            bottomGroupId = group.id;
+        syncBottomOpenMarker();
+        // Redirect this group's drop overlays to the footer-anchored host so tab
+        // reorder / receive highlights render over the footer, not the shell.
+        if (group)
+            attachBottomDropContainer(group);
+        host.classList.toggle('is-empty', (group?.panels.length ?? 0) === 0);
+    };
+    // Default editor layout may put panels only in the grid. Still register the
+    // left/right/bottom edge slots (hidden while empty) so outermost drop and
+    // "Move to Side" have a destination without flashing empty strips.
+    const ensureEdgeSlots = () => {
+        for (const pos of ENSURED_EDGE_SLOTS) {
+            if (api.getEdgeGroup(pos))
+                continue;
+            try {
+                api.addEdgeGroup(pos, {
+                    id: `edge-${pos}`,
+                    initialSize: pos === 'bottom' ? 280 : 260,
+                    // Bottom is footer-merged: its collapsed splitview cell must take ZERO
+                    // height (the strip is relocated into the StatusBar), otherwise a blank
+                    // 35px bar would sit above the footer. Left/right keep the strip in the
+                    // grid so use the theme default collapsed width.
+                    ...(pos === 'bottom' ? { collapsedSize: 0 } : {}),
+                    collapsed: true,
+                });
+                api.setEdgeGroupVisible(pos, false);
+            }
+            catch { /* noop */ }
+        }
+        forceBottomCollapsedZero();
+        forceVerticalShellGapZero();
+    };
+    // Force the bottom edge's collapsed cell to ZERO height. dockview's
+    // `fromJSON` auto-creates edge groups from serialized `edgeGroups` using the
+    // theme default collapsedSize (35) and ignores the collapsedSize we pass to
+    // addEdgeGroup — so a persisted / default layout leaves a blank 35px band
+    // above the footer (the strip itself is relocated into the StatusBar) and
+    // parks the bottom drop overlay there. There is no public collapsedSize
+    // setter, so reach the ShellManager's EdgeGroupView and shrink it in place.
+    // Guarded: if dockview's internals move this becomes a no-op (empty band is
+    // cosmetic, never functional). Left/right keep the theme default.
+    const forceBottomCollapsedZero = () => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const shell = api.component?._shellManager;
+            const view = shell?._bottomView;
+            if (!view || view.collapsedSize === 0)
+                return;
+            // (collapsedSize, expandedMinimumSize) — keep expanded-min sane (>0).
+            view.updateCollapsedSize(0, 50);
+            if (view.isCollapsed)
+                shell._middleColumn.resizeView('bottom', 0);
+        }
+        catch { /* dockview internals moved — empty band is cosmetic */ }
+    };
+    // The theme's 6px gap should separate core grid groups and side edge strips,
+    // but the footer-merged bottom group has no visible shell cell: its real tab
+    // strip lives in GlobalStatusBar. Dockview applies one margin to the whole
+    // vertical shell split, leaving a stray 6px band above the footer. There is no
+    // public per-axis/per-edge gap option, so zero only the shell's vertical
+    // splitview margin; the core grid and left/right shell gaps stay at 6px.
+    const forceVerticalShellGapZero = () => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const shell = api.component?._shellManager;
+            shell?._middleColumn?.updateMargin(0);
+        }
+        catch { /* dockview internals moved — footer gap is cosmetic */ }
+    };
+    // ── Global footer-chrome owner ───────────────────────────────────────────
+    // The footer panels (Info / Checkpoints / Events) are interface-level chrome
+    // that must exist under EVERY layout — every page AND every Page — not be
+    // re-seeded into each layout's JSON. This reconciler is that single owner:
+    // installEdgeDrawer runs once per DockShell region and persists across every
+    // page / Page switch, so after each layout change we ensure any missing
+    // footer panel is (re)added into the bottom edge group. Panels are inserted
+    // straight into the edge group (position.referenceGroup) so they never detour
+    // through the grid.
+    //
+    // `ensuringFooter` does double duty: reentrancy guard AND a "batch in progress"
+    // flag the layout/panel event handlers below check to STAY QUIET. Adding a panel
+    // (and the moveTo fallback) each fire onDidAddPanel / onDidActivePanelChange /
+    // onDidLayoutChange, so without suppression every insert would re-run relocate
+    // and each new panel would momentarily steal the active tab — the "tabs randomly
+    // focus" churn seen on page switch. Instead we do all inserts silently, restore
+    // the pre-existing active panel so the footer never steals focus from the page
+    // content, and let the SINGLE post-ensure reconcile relocate the strip once.
+    let ensuringFooter = false;
+    const ensureFooterPanels = () => {
+        if (ensuringFooter)
+            return;
+        const bottom = edgeGroupAt('bottom');
+        if (!bottom)
+            return; // ensureEdgeSlots creates it; a later tick retries
+        for (const id of FOOTER_PANEL_ID_LIST) {
+            if (isFooterPanelUserVisible(id))
+                continue;
+            const hidden = api.getPanel(id);
+            if (!hidden)
+                continue;
+            try {
+                hidden.api.close();
+            }
+            catch { /* noop */ }
+        }
+        // Steady state (footer already complete): do nothing — onDidLayoutChange fires
+        // on every resize/drag, so a no-op fast-path keeps those churn-free.
+        if (FOOTER_PANEL_ID_LIST.every((id) => !isFooterPanelUserVisible(id) || api.getPanel(id)))
+            return;
+        ensuringFooter = true;
+        // Preserve whatever the page had focused so a freshly-added footer tab (an
+        // empty group's first panel is force-active; moveTo also activates) can't grab
+        // the active group.
+        const prevActive = api.activePanel;
+        try {
+            FOOTER_PANEL_ID_LIST.forEach((id, index) => {
+                // Only ADD a fully-absent footer panel — never relocate one the user has
+                // dragged elsewhere (respecting a user who moved Info into the grid).
+                if (!isFooterPanelUserVisible(id) || api.getPanel(id))
+                    return;
+                try {
+                    api.addPanel({
+                        id,
+                        component: id,
+                        title: id,
+                        position: { referenceGroup: bottom, direction: 'within', index },
+                        inactive: true,
+                    });
+                    // Guarantee it landed in the bottom edge group: referenceGroup targeting
+                    // can fall back to a fresh grid group on some dockview builds. Moving it
+                    // in the SAME tick (before paint) keeps the add flash-free. moveTo-into-
+                    // edge is the proven path (see willDropSub).
+                    const panel = api.getPanel(id);
+                    if (panel && panel.group !== bottom) {
+                        try {
+                            panel.api.moveTo({ group: bottom, position: 'center' });
+                        }
+                        catch { /* noop */ }
+                    }
+                }
+                catch { /* component not registered in this host — skip */ }
+            });
+            try {
+                prevActive?.api.setActive();
+            }
+            catch { /* prevActive was closed — noop */ }
+        }
+        finally {
+            ensuringFooter = false;
+        }
+    };
+    // Normalize to collapsed on install. In our model an edge group is ALWAYS
+    // collapsed (a narrow strip); "expansion" is the fixed drawer overlay, never a
+    // splitview resize. A previously-persisted expanded state (collapsed:false)
+    // would otherwise restore as a full-width column that can't be closed — the
+    // native tab-click collapse is intercepted below. collapse() is a no-op when
+    // already collapsed.
+    const normalize = () => {
+        for (const group of edgeGroups(api)) {
+            try {
+                group.api.collapse();
+            }
+            catch { /* noop */ }
+        }
+    };
+    // Safety net: the drawer is a pure overlay and must never become a splitview
+    // resize. If anything (a missed click, a future dockview code path) expands an
+    // edge group, snap it straight back to collapsed so the grid never shifts.
+    const collapseObservation = createReplaceableObservationSetLifecycle({
+        subscribe: (group, listener) => group.api.onDidCollapsedChange(listener),
+        onObservation: (group, event) => {
+            if (!event.isCollapsed) {
+                try {
+                    group.api.collapse();
+                }
+                catch { /* noop */ }
+            }
+        },
+    });
+    const rebindCollapseGuards = () => {
+        collapseObservation.replace(edgeGroups(api));
+    };
+    ensureEdgeSlots();
+    ensureFooterPanels();
+    const disposeFooterEnsure = registerFooterPanelEnsure(ensureFooterPanels);
+    normalize();
+    rebindCollapseGuards();
+    relocateBottomStrip();
+    syncEmptyEdges();
+    // The StatusBar footer host may mount well after the dock, and the layout is
+    // hydrated by SEVERAL async paths (onReady restore, applyPageScope, and the
+    // project-id resolve round-trip to /api/projects). Any of these can
+    // create the real bottom group AFTER our first relocate. Keep re-running the
+    // (idempotent) relocate until the strip is actually parented into the footer
+    // host, with a generous frame cap so a late-mounting footer or late hydration
+    // still lands without waiting for a user click. syncEmptyEdges is re-run too
+    // so the just-parented strip's empty-state / visibility is correct.
+    const disposeFooterRelocationRetry = installBoundedFrameRetryLifecycle({
+        attempt: () => {
+            relocateBottomStrip();
+            const host = footerHost();
+            return !!host && !!bottomStripEl && bottomStripEl.parentElement === host;
+        },
+        onSuccess: syncEmptyEdges,
+        maxFrames: 242,
+    });
+    // Listeners live on `document` (capture): the bottom strip is relocated into
+    // the footer, OUTSIDE `root`, so a root-scoped listener would miss its tabs.
+    // edgeGroupForStripEl / the bottom-strip containment checks re-gate to our
+    // edge groups only.
+    const disposeCaptureInteraction = installCaptureInteractionObservation({
+        onPointerDown: onStripChromePointerDown,
+        onClick: onClickCapture,
+    });
+    const disposeOutsideDismiss = installOutsideDismissLifecycle({
+        isOpen: () => openGroup !== null,
+        isPinned: () => !!openGroup && activeIsPinned(openGroup),
+        containsTarget: (target) => isInsideOpenDrawer(target),
+        isDismissExempt: isEdgeDrawerDismissExemptTarget,
+        onContainedPointerDown: (target) => {
+            if (bottomStripEl?.contains(target)) {
+                // A footer re-click used to dismiss the drawer even when it was only
+                // the user's way back from a Content Browser popup. Let the popup
+                // consume the interaction first, then preserve this active tab click.
+                preserveNextActiveTabClick = hasOwnedInteractionSurface();
+            }
+        },
+        dismiss: () => {
+            preserveNextActiveTabClick = false;
+            close();
+        },
+    });
+    const disposeViewportResize = installViewportResizeObservation({
+        onResize: reposition,
+    });
+    // Reveal the footer drop zone ONLY during a real HTML5 tab drag. We can't
+    // reuse DockRegion's `fx-dock-dragging` flag: that also flips on a plain
+    // pointerdown on a tab strip (to catch floating-group pointer drags), so a
+    // mere CLICK on a footer tab would flash the drop affordance. `dragstart` /
+    // `dragend` only fire for an actual drag, so gate the footer zone on our own
+    // `fx-edge-drag` class instead.
+    const DRAG_CLASS = 'fx-edge-drag';
+    // Keep the "exactly one live drop overlay" invariant. dockview can rely on
+    // `onDragLeave` doing NOTHING for an override target because its own anchor
+    // container is SHARED by every droptarget in the instance: whoever becomes the
+    // target next repositions that single overlay. Our footer shim is a SECOND,
+    // group-exclusive container, so nothing ever took the footer's overlay down —
+    // dragging a footer tab up into the grid painted the grid's zone while the
+    // footer's lime rectangle stayed, two live drop zones at once. Wipe ours as
+    // soon as the drag is over anything outside the strip; coming back fires a
+    // real `dragenter`, which rebuilds it through `getElements()`.
+    const overBottomStrip = (node) => {
+        if (!node)
+            return false;
+        if (bottomStripEl?.contains(node))
+            return true;
+        // Before the footer relocation lands, the strip is still inside its group.
+        const bottom = edgeGroupAt('bottom');
+        return !!bottom && bottom.element.contains(node);
+    };
+    const disposeDragPresence = installDragPresenceLifecycle({
+        isStartTarget: (eventTarget) => {
+            const target = eventTarget;
+            return !!(target?.closest?.('.dv-tab')
+                || target?.closest?.('.dv-tabs-and-actions-container'));
+        },
+        onActiveChange: (active) => {
+            document.documentElement.classList.toggle(DRAG_CLASS, active);
+            // Backstop: wipe any footer drop overlay dockview left behind when the drag
+            // ended on a group other than the bottom edge.
+            if (!active)
+                clearDropAnchor();
+        },
+        onDragOver: (eventTarget) => {
+            if (!dropAnchorModel)
+                return;
+            if (overBottomStrip(eventTarget))
+                return;
+            clearDropAnchor();
+        },
+    });
+    // Programmatic drawer control (chrome-drawer's `app.drawer.*` commands).
+    // Event name kept as a bare literal
+    // to avoid an interface→extensions import; chrome-drawer emits the same string.
+    const onEdgeDrawerCmd = (e) => {
+        const detail = e.detail;
+        if (!detail)
+            return;
+        if (detail.action === 'close') {
+            close();
+            return;
+        }
+        const id = detail.id;
+        if (!id)
+            return;
+        const panel = api.getPanel(id);
+        if (!panel)
+            return;
+        const group = edgeGroups(api).find((g) => g.panels.some((p) => p.id === id));
+        if (!group)
+            return;
+        // toggle: re-hitting the already-open active panel closes it.
+        if (detail.action === 'toggle' && openGroup === group && group.activePanel?.id === id) {
+            close();
+            return;
+        }
+        try {
+            panel.api.setActive();
+        }
+        catch { /* noop */ }
+        open(group);
+    };
+    const disposeCommandObservation = installCustomEventObservation({
+        eventType: 'forgeax:edge-drawer',
+        onEvent: onEdgeDrawerCmd,
+    });
+    const disposeLayoutChangeObservation = installDockLayoutObservation({
+        onDidLayoutChange: (listener) => api.onDidLayoutChange(listener),
+    }, {
+        getCurrentScope: () => null,
+        onCommitted: () => {
+            // Silent while ensureFooterPanels is batching — its addPanel/moveTo calls fire
+            // this; the caller does the single reconcile once the batch completes.
+            if (ensuringFooter)
+                return;
+            reposition();
+            // fromJSON / reset may drop edge slots — re-create empty ones for drop.
+            ensureEdgeSlots();
+            // …then re-assert the global footer chrome for the new layout.
+            ensureFooterPanels();
+            normalize();
+            rebindCollapseGuards();
+            // Reset/fromJSON disposes+recreates the bottom group → re-relocate its strip.
+            relocateBottomStrip();
+            syncEmptyEdges();
+        },
+    });
+    // Panel add/remove is the precise moment an edge can become empty / non-empty;
+    // layout-change alone can miss it depending on dockview's event ordering.
+    const disposePanelMembershipObservation = installPanelMembershipObservation({
+        subscribeAdd: (listener) => api.onDidAddPanel(listener),
+        subscribeRemove: (listener) => api.onDidRemovePanel(listener),
+        onAdd: () => { if (ensuringFooter)
+            return; relocateBottomStrip(); syncEmptyEdges(); },
+        onRemove: () => { syncEmptyEdges(); },
+    });
+    // fromJSON hydration fires ONLY `onDidLayoutFromJSON` — NOT `onDidLayoutChange`
+    // (a gridview AsapEvent that ignores edge groups, which live in the shell
+    // splitview) and NOT per-panel `onDidAddPanel` for edge groups (addEdgeGroup
+    // never forwards it). So a refresh that restores a bottom panel left the strip
+    // un-relocated until an unrelated grid click finally fired onDidLayoutChange —
+    // the "shows only after clicking dockview" bug. Reconcile here explicitly.
+    const disposeLayoutFromJsonObservation = installLayoutFromJsonObservation({
+        subscribe: (listener) => api.onDidLayoutFromJSON(listener),
+        onHydrated: () => {
+            ensureEdgeSlots();
+            ensureFooterPanels();
+            normalize();
+            rebindCollapseGuards();
+            relocateBottomStrip();
+            syncEmptyEdges();
+        },
+    });
+    // Active-panel changes fire during hydration once a restored bottom panel is
+    // made active — a cheap extra beat to catch strips the layout-change path may
+    // have relocated before their tabs were fully populated.
+    const disposeActivePanelObservation = installActivePanelObservation({
+        subscribe: (listener) => api.onDidActivePanelChange(listener),
+        onChange: () => { if (ensuringFooter)
+            return; relocateBottomStrip(); syncBottomFocusMarker(); },
+    });
+    // Root edge drop (the thin outermost overlay) normally orthogonalizes into a
+    // NEW grid group. When we already own an edge-group slot at that position,
+    // steal the drop: preventDefault → show the slot → move the panel into it.
+    // Empty sidebars stay hidden until this lands — no drag-time flash.
+    const disposeWillDropObservation = installWillDropObservation({
+        subscribe: (listener) => api.onWillDrop(listener),
+        onWillDrop: (e) => {
+            if (e.kind !== 'edge')
+                return;
+            const pos = e.position;
+            if (!EDGE_POSITIONS.includes(pos))
+                return;
+            if (!api.getEdgeGroup(pos))
+                return;
+            const edgeGroup = edgeGroupAt(pos);
+            if (!edgeGroup)
+                return;
+            const data = e.getData?.();
+            const panelId = data?.panelId;
+            if (!panelId)
+                return;
+            const panel = api.getPanel(panelId);
+            if (!panel)
+                return;
+            e.preventDefault();
+            try {
+                api.setEdgeGroupVisible(pos, true);
+            }
+            catch { /* noop */ }
+            edgeGroup.element.classList.remove('fx-edge-empty');
+            try {
+                panel.api.moveTo({ group: edgeGroup, position: 'center' });
+            }
+            catch { /* noop */ }
+            try {
+                edgeGroup.api.collapse();
+            }
+            catch { /* noop */ }
+            open(edgeGroup);
+            syncEmptyEdges();
+        },
+    });
+    return () => {
+        disposeFooterEnsure();
+        disposeFooterRelocationRetry();
+        footerRelocationFrame.dispose();
+        disposeGripResize();
+        forceClose();
+        clearEdgePins();
+        // Return the relocated strip to nowhere-in-particular; dockview disposes it
+        // with the group. Just drop our footer marker so a stale strip can't linger.
+        try {
+            bottomStripEl?.remove();
+        }
+        catch { /* noop */ }
+        bottomStripEl = null;
+        bottomGroupId = null;
+        try {
+            bottomDropContainer.dispose();
+        }
+        catch { /* noop */ }
+        disposeDrawerPortalHost();
+        disposeOutsideDismiss();
+        disposeCaptureInteraction();
+        disposeViewportResize();
+        disposeDragPresence();
+        disposeCommandObservation();
+        disposeLayoutChangeObservation();
+        disposePanelMembershipObservation();
+        disposeActivePanelObservation();
+        disposeLayoutFromJsonObservation();
+        disposeWillDropObservation();
+        collapseObservation.dispose();
+    };
+}