@forgeax/interface 0.4.1

package/dist/package/node/components/DockShell/ueDrag/geometry.js

@@ -0,0 +1,217 @@
+// Pure geometry for the Unreal-Engine-style dock drag overlay.
+//
+// UE's docking model is DISCRETE and uses a "dock director" widget painted at
+// the center of the group under the cursor: a small center SQUARE surrounded by
+// four TRAPEZOIDS (top/bottom/left/right) that tile the ring between the center
+// square and the widget's outer square along its diagonals. The four trapezoids
+// pick a split direction; the center square merges the panel in as a tab. On
+// top of that, four "dock to the whole region" buttons sit at the region edges.
+// The drop is decided by which SHAPE the cursor is over — not a free-form
+// cursor-region heuristic. This module is the single source of truth for those
+// shapes, their hit-testing, and the translucent preview slab.
+//
+// Everything here is framebuffer-agnostic (plain numbers), so it is exhaustively
+// unit-testable without a DOM. The imperative overlay (overlay.ts) and the drag
+// controller (controller.ts) consume these helpers; they own no geometry of
+// their own.
+/** Director footprint tuning. Kept here (not in CSS) so hit-testing and
+ *  rendering agree to the pixel — the overlay reads the SAME shapes it draws.
+ *  The director fills the group's CONTENT area (tab strip excluded) as a large
+ *  center rectangle framed by four shallow trapezoids — NOT corner-to-corner
+ *  triangles. A large center is what keeps the four shapes trapezoidal. */
+export const UE_DIRECTOR_MARGIN = 6; // inset from the content edges (px)
+export const UE_DIRECTOR_CENTER_RATIO = 0.46; // center rectangle ÷ content side
+export const UE_DIRECTOR_CENTER_MIN_W = 64;
+export const UE_DIRECTOR_CENTER_MIN_H = 52;
+export const UE_OUTER_BUTTON = 40;
+export const UE_OUTER_MARGIN = 16;
+export function pointInRect(p, r) {
+    return p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height;
+}
+function centeredSquare(cx, cy, size) {
+    return { x: cx - size / 2, y: cy - size / 2, width: size, height: size };
+}
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}
+/** Build the dock director filling `content` (the group's content area, inset by
+ *  a small margin): a LARGE center rectangle framed by four shallow trapezoids.
+ *  Because the center is large, the surrounding shapes read as trapezoids rather
+ *  than corner-reaching triangles. */
+export function directorLayout(content, margin = UE_DIRECTOR_MARGIN) {
+    const m = Math.min(margin, content.width / 6, content.height / 6);
+    const bx = content.x + m;
+    const by = content.y + m;
+    const bw = content.width - 2 * m;
+    const bh = content.height - 2 * m;
+    const cx = bx + bw / 2;
+    const cy = by + bh / 2;
+    const cW = clamp(bw * UE_DIRECTOR_CENTER_RATIO, Math.min(UE_DIRECTOR_CENTER_MIN_W, bw), bw);
+    const cH = clamp(bh * UE_DIRECTOR_CENTER_RATIO, Math.min(UE_DIRECTOR_CENTER_MIN_H, bh), bh);
+    const cwh = cW / 2;
+    const chh = cH / 2;
+    const oTL = { x: bx, y: by };
+    const oTR = { x: bx + bw, y: by };
+    const oBR = { x: bx + bw, y: by + bh };
+    const oBL = { x: bx, y: by + bh };
+    const cTL = { x: cx - cwh, y: cy - chh };
+    const cTR = { x: cx + cwh, y: cy - chh };
+    const cBR = { x: cx + cwh, y: cy + chh };
+    const cBL = { x: cx - cwh, y: cy + chh };
+    return {
+        cx,
+        cy,
+        bounds: { x: bx, y: by, width: bw, height: bh },
+        center: { x: cx - cwh, y: cy - chh, width: cW, height: cH },
+        top: [oTL, oTR, cTR, cTL],
+        right: [oTR, oBR, cBR, cTR],
+        bottom: [oBR, oBL, cBL, cBR],
+        left: [oBL, oTL, cTL, cBL],
+    };
+}
+/** Which director shape (if any) the pointer is over. Center square wins; the
+ *  surrounding ring is split along the group's real diagonals (aspect-aware, so
+ *  the split lines actually hit the rectangle corners) into four trapezoids. */
+export function hitDirector(layout, p) {
+    if (pointInRect(p, layout.center))
+        return 'center';
+    if (!pointInRect(p, layout.bounds))
+        return null;
+    const dx = (p.x - layout.cx) / (layout.bounds.width / 2);
+    const dy = (p.y - layout.cy) / (layout.bounds.height / 2);
+    if (Math.abs(dx) >= Math.abs(dy))
+        return dx < 0 ? 'left' : 'right';
+    return dy < 0 ? 'top' : 'bottom';
+}
+/** Four dock-to-whole-region buttons pinned just inside the region's edges. */
+export function outerTargets(wrap, button = UE_OUTER_BUTTON, margin = UE_OUTER_MARGIN) {
+    const cx = wrap.x + wrap.width / 2;
+    const cy = wrap.y + wrap.height / 2;
+    return {
+        top: centeredSquare(cx, wrap.y + margin + button / 2, button),
+        bottom: centeredSquare(cx, wrap.y + wrap.height - margin - button / 2, button),
+        left: centeredSquare(wrap.x + margin + button / 2, cy, button),
+        right: centeredSquare(wrap.x + wrap.width - margin - button / 2, cy, button),
+    };
+}
+export function hitOuter(layout, p) {
+    const order = ['top', 'bottom', 'left', 'right'];
+    for (const pos of order) {
+        if (pointInRect(p, layout[pos]))
+            return pos;
+    }
+    return null;
+}
+/** The translucent preview rectangle for a group-relative drop. Edges take half
+ *  the group along their axis; center covers the whole group. */
+export function previewRect(group, pos) {
+    const half = (n) => n / 2;
+    switch (pos) {
+        case 'top':
+            return { x: group.x, y: group.y, width: group.width, height: half(group.height) };
+        case 'bottom':
+            return { x: group.x, y: group.y + half(group.height), width: group.width, height: half(group.height) };
+        case 'left':
+            return { x: group.x, y: group.y, width: half(group.width), height: group.height };
+        case 'right':
+            return { x: group.x + half(group.width), y: group.y, width: half(group.width), height: group.height };
+        case 'center':
+        default:
+            return { ...group };
+    }
+}
+/** The preview rectangle for an outer (dock-to-whole-region) drop: a third of
+ *  the region on the chosen side (UE reserves a slab, not a half, for the shell
+ *  edge so the remaining layout stays legible). */
+export function outerPreviewRect(wrap, pos, ratio = 1 / 3) {
+    const slabW = wrap.width * ratio;
+    const slabH = wrap.height * ratio;
+    switch (pos) {
+        case 'top':
+            return { x: wrap.x, y: wrap.y, width: wrap.width, height: slabH };
+        case 'bottom':
+            return { x: wrap.x, y: wrap.y + wrap.height - slabH, width: wrap.width, height: slabH };
+        case 'left':
+            return { x: wrap.x, y: wrap.y, width: slabW, height: wrap.height };
+        case 'right':
+        default:
+            return { x: wrap.x + wrap.width - slabW, y: wrap.y, width: slabW, height: wrap.height };
+    }
+}
+/** Pick the innermost (smallest-area) group whose rect contains the point.
+ *  dockview groups never truly nest, but tolerant selection keeps the choice
+ *  stable when rects touch at shared sashes. */
+export function pickGroup(p, groups) {
+    let best = null;
+    let bestArea = Infinity;
+    for (const g of groups) {
+        if (!pointInRect(p, g.rect))
+            continue;
+        const area = g.rect.width * g.rect.height;
+        if (area < bestArea) {
+            best = g;
+            bestArea = area;
+        }
+    }
+    return best;
+}
+/** Smallest rect covering both inputs. */
+export function unionRect(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return {
+        x,
+        y,
+        width: Math.max(a.x + a.width, b.x + b.width) - x,
+        height: Math.max(a.y + a.height, b.y + b.height) - y,
+    };
+}
+/** Minimum slot length; matches the edge strip's `min-width/height: 104px`. */
+export const UE_STRIP_SLOT_MIN = 104;
+/** Where a tab dropped at `p` lands in a strip of existing tabs. The index is
+ *  decided by tab MIDPOINTS along the strip axis, which is what makes a drag
+ *  along the strip reorder continuously: once the slot opens between two tabs
+ *  the cursor sits in that gap, and both neighbours' midpoints stay on their
+ *  own side of it, so the choice is stable until the cursor passes the next
+ *  midpoint. `tabs` must be in DOM order and exclude the slot itself. */
+export function stripInsertion(tabs, strip, p, axis, minSlot = UE_STRIP_SLOT_MIN) {
+    const horiz = axis === 'x';
+    const start = (r) => (horiz ? r.x : r.y);
+    const span = (r) => (horiz ? r.width : r.height);
+    const cursor = horiz ? p.x : p.y;
+    let index = tabs.length;
+    for (let i = 0; i < tabs.length; i += 1) {
+        if (cursor < start(tabs[i]) + span(tabs[i]) / 2) {
+            index = i;
+            break;
+        }
+    }
+    // Match the strip's rhythm: a median-sized slot reads as "one more tab".
+    const lengths = tabs.map(span).sort((a, b) => a - b);
+    const median = lengths.length > 0 ? lengths[Math.floor(lengths.length / 2)] : 0;
+    const slotLen = Math.max(minSlot, median);
+    const last = tabs[tabs.length - 1];
+    const at = index < tabs.length
+        ? start(tabs[index])
+        : last
+            ? start(last) + span(last)
+            : start(strip);
+    return {
+        index,
+        slot: horiz
+            ? { x: at, y: strip.y, width: slotLen, height: strip.height }
+            : { x: strip.x, y: at, width: strip.width, height: slotLen },
+    };
+}
+/** Map a UePosition to the dockview grid `Direction` used by `addGroup`/
+ *  `addPanel({ position })`. 'center' has no absolute direction. */
+export function toGridDirection(pos) {
+    switch (pos) {
+        case 'top': return 'above';
+        case 'bottom': return 'below';
+        case 'left': return 'left';
+        case 'right': return 'right';
+        case 'center':
+        default: return 'within';
+    }
+}

package/dist/package/node/components/DockShell/ueDrag/overlay.js

@@ -0,0 +1,206 @@
+// Imperative, viewport-fixed overlay for the UE-style dock drag.
+//
+// WHY imperative + a module singleton (not a React component):
+//   * The drag controller (controller.ts) is itself installed imperatively from
+//     `DockRegion.onReady` (same lifecycle as `installEdgeDrawer`), so it has no
+//     React render scope to hang an overlay off of.
+//   * There are THREE DockRegion instances (DockShell / AuxBar / ChatDock). A
+//     drag can start in one and land in another; a single body-level overlay in
+//     viewport coordinates paints seamlessly across all of them.
+//   * During a drag we update on every pointermove — bypassing React's commit
+//     phase keeps it jank-free.
+//
+// The dock director (center square + four trapezoids) is drawn as SVG so the
+// trapezoids and their highlight are trivial. The overlay is purely decorative
+// (`pointer-events: none`); all hit-testing is done by the controller against
+// the SAME shapes drawn here (see geometry.ts), so it never needs events.
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+let dom = null;
+function placeRect(el, r) {
+    if (!r) {
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    el.style.transform = `translate(${r.x}px, ${r.y}px)`;
+    el.style.width = `${r.width}px`;
+    el.style.height = `${r.height}px`;
+}
+function placeSquare(el, r) {
+    if (!r) {
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    el.style.left = `${r.x}px`;
+    el.style.top = `${r.y}px`;
+    el.style.width = `${r.width}px`;
+    el.style.height = `${r.height}px`;
+}
+function pointsAttr(poly) {
+    return poly.map((p) => `${p.x},${p.y}`).join(' ');
+}
+function build() {
+    const root = document.createElement('div');
+    root.className = 'fx-ue-overlay';
+    // Host for the LIVE panel preview (the lifted floating carrier is re-parented
+    // here during a drag). First child → stacks below the slab/director/ghost, so
+    // the green tint + wireframe read on top of the real panel render. Living in
+    // the body-level overlay (z 2147483000) lifts it above the viewport keep-alive
+    // surface (z 40) and works across dockview instances.
+    const liveHost = document.createElement('div');
+    liveHost.className = 'fx-ue-live-host';
+    root.appendChild(liveHost);
+    const preview = document.createElement('div');
+    preview.className = 'fx-ue-preview';
+    preview.style.display = 'none';
+    root.appendChild(preview);
+    // The dock director is SVG (trapezoids). One viewport-sized svg, shapes drawn
+    // directly in viewport coordinates.
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'fx-ue-svg');
+    const dirGroup = document.createElementNS(SVG_NS, 'g');
+    dirGroup.setAttribute('class', 'fx-ue-director');
+    dirGroup.style.display = 'none';
+    const mkPoly = (cls) => {
+        const p = document.createElementNS(SVG_NS, 'polygon');
+        p.setAttribute('class', `fx-ue-dir-trap fx-ue-dir-trap--${cls}`);
+        dirGroup.appendChild(p);
+        return p;
+    };
+    const dirTrapezoids = {
+        top: mkPoly('top'),
+        bottom: mkPoly('bottom'),
+        left: mkPoly('left'),
+        right: mkPoly('right'),
+    };
+    const dirCenter = document.createElementNS(SVG_NS, 'rect');
+    dirCenter.setAttribute('class', 'fx-ue-dir-center');
+    dirCenter.setAttribute('rx', '4');
+    dirGroup.appendChild(dirCenter);
+    svg.appendChild(dirGroup);
+    root.appendChild(svg);
+    // Dock-to-region buttons remain simple squares pinned at the edges.
+    const outerBox = document.createElement('div');
+    outerBox.className = 'fx-ue-outer';
+    outerBox.style.display = 'none';
+    const mkBtn = (cls) => {
+        const b = document.createElement('div');
+        b.className = `fx-ue-btn fx-ue-btn--outer ${cls}`;
+        const glyph = document.createElement('span');
+        glyph.className = 'fx-ue-btn-glyph';
+        b.appendChild(glyph);
+        return b;
+    };
+    const outerBtns = {
+        top: mkBtn('fx-ue-btn--top'),
+        bottom: mkBtn('fx-ue-btn--bottom'),
+        left: mkBtn('fx-ue-btn--left'),
+        right: mkBtn('fx-ue-btn--right'),
+    };
+    for (const b of Object.values(outerBtns))
+        outerBox.appendChild(b);
+    root.appendChild(outerBox);
+    const ghost = document.createElement('div');
+    ghost.className = 'fx-ue-ghost';
+    ghost.style.display = 'none';
+    root.appendChild(ghost);
+    document.body.appendChild(root);
+    return {
+        root,
+        liveHost,
+        preview,
+        svg,
+        dirGroup,
+        dirTrapezoids,
+        dirCenter,
+        outerBox,
+        outerBtns,
+        ghost,
+    };
+}
+function ensureDom() {
+    if (dom && document.body.contains(dom.root))
+        return dom;
+    dom = build();
+    return dom;
+}
+function setActiveEls(els, activePos) {
+    for (const [pos, el] of Object.entries(els)) {
+        el.classList.toggle('fx-ue-active', pos === activePos);
+    }
+}
+let handle = null;
+export function getUeOverlay() {
+    if (handle)
+        return handle;
+    handle = {
+        update(state) {
+            const d = ensureDom();
+            d.root.style.display = '';
+            // Preview slab.
+            placeRect(d.preview, state.preview);
+            d.preview.classList.toggle('fx-ue-preview--strip', state.previewKind === 'strip');
+            // Dock director (SVG trapezoids + center square).
+            const dir = state.director;
+            if (dir) {
+                d.dirGroup.style.display = '';
+                d.dirTrapezoids.top.setAttribute('points', pointsAttr(dir.top));
+                d.dirTrapezoids.bottom.setAttribute('points', pointsAttr(dir.bottom));
+                d.dirTrapezoids.left.setAttribute('points', pointsAttr(dir.left));
+                d.dirTrapezoids.right.setAttribute('points', pointsAttr(dir.right));
+                d.dirCenter.setAttribute('x', String(dir.center.x));
+                d.dirCenter.setAttribute('y', String(dir.center.y));
+                d.dirCenter.setAttribute('width', String(dir.center.width));
+                d.dirCenter.setAttribute('height', String(dir.center.height));
+                const activeDir = state.active?.kind === 'group' ? state.active.pos : null;
+                setActiveEls({ ...d.dirTrapezoids, center: d.dirCenter }, activeDir);
+            }
+            else {
+                d.dirGroup.style.display = 'none';
+            }
+            // Outer (dock-to-region) targets.
+            if (state.outer) {
+                d.outerBox.style.display = '';
+                placeSquare(d.outerBtns.top, state.outer.top);
+                placeSquare(d.outerBtns.bottom, state.outer.bottom);
+                placeSquare(d.outerBtns.left, state.outer.left);
+                placeSquare(d.outerBtns.right, state.outer.right);
+                setActiveEls(d.outerBtns, state.active?.kind === 'outer' ? state.active.pos : null);
+            }
+            else {
+                d.outerBox.style.display = 'none';
+            }
+            // Ghost chip.
+            if (state.ghostTitle) {
+                d.ghost.style.display = '';
+                d.ghost.textContent = state.ghostTitle;
+                d.ghost.style.transform = `translate(${state.pointer.x + 14}px, ${state.pointer.y + 14}px)`;
+            }
+            else {
+                d.ghost.style.display = 'none';
+            }
+        },
+        livePreviewHost() {
+            return ensureDom().liveHost;
+        },
+        hide() {
+            if (!dom)
+                return;
+            dom.root.style.display = 'none';
+            dom.preview.style.display = 'none';
+            dom.dirGroup.style.display = 'none';
+            dom.outerBox.style.display = 'none';
+            dom.ghost.style.display = 'none';
+        },
+        destroy() {
+            try {
+                dom?.root.remove();
+            }
+            catch { /* noop */ }
+            dom = null;
+        },
+    };
+    return handle;
+}

package/dist/package/node/components/DockShell/useAuxBarWidth.js

@@ -0,0 +1,13 @@
+import { createPersistentSizeStore, usePersistentSizeStore, } from '@forgeax/app-shell/react';
+export const AUXBAR_MIN_WIDTH = 200;
+export const AUXBAR_MAX_WIDTH = 640;
+export const AUXBAR_DEFAULT_WIDTH = 280;
+export const auxBarWidthStore = createPersistentSizeStore({
+    storageKey: 'forgeax:auxbar-width',
+    defaultSize: AUXBAR_DEFAULT_WIDTH,
+    minSize: AUXBAR_MIN_WIDTH,
+    maxSize: AUXBAR_MAX_WIDTH,
+});
+export function useAuxBarWidth() {
+    return usePersistentSizeStore(auxBarWidthStore);
+}

package/dist/package/node/components/Drawer/DrawerHostView.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DrawerHostView — the host view for `kind:'drawer'` locations (ADR-0030 §2.3).
+ *
+ * Renders ONLY the expandable panel overlay. The launcher tab lives IN the
+ * status bar (a strip contribution — see DrawerLauncher / chrome-drawer.tsx),
+ * so the footer stays a SINGLE row: clicking a launcher tab expands its panel
+ * UPWARD as an overlay that slides in over the workspace (single-active).
+ *
+ * Geometry (ADR-0030 §1 drawer capabilities): left edge = screen left, right
+ * edge = flush against the plugin rail (`.activity-rail`, measured at runtime),
+ * bottom = just above the status bar. Height persists via useDrawerStore.
+ *
+ * Data planes stay separate (ADR-0030 §4): structural = drawerPanels snapshot;
+ * UI layout = useDrawerStore (open/active/height); business = each panel's own
+ * store. A panel unregistered while active collapses gracefully (no dangling).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { AnchoredResizeHandle, installElementResizeObservation, installViewportResizeObservation, } from '@forgeax/app-shell/react';
+import { PanelBottomClose } from 'lucide-react';
+import { useTranslation } from '../../i18n/index.js';
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+import { RecoveryBoundary } from '../ErrorBoundary.js';
+import { useDrawerStore } from './useDrawerStore.js';
+
+export function DrawerHostView() {
+    const { t } = useTranslation();
+    const renderers = usePanelRenderers();
+    const activeId = useDrawerStore((s) => s.activeId);
+    const height = useDrawerStore((s) => s.height);
+    const close = useDrawerStore((s) => s.close);
+    const setHeight = useDrawerStore((s) => s.setHeight);
+    const panels = useMemo(() => {
+        const list = Object.values(renderers.drawerPanels ?? {});
+        return list
+            .filter((p) => !p.when || p.when())
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }, [renderers.drawerPanels]);
+    const active = activeId ? panels.find((p) => p.id === activeId) ?? null : null;
+    // Exit animation: when activeId clears we keep the last panel mounted with an
+    // `is-closing` class (reverse reveal) and unmount on animationend, so collapse
+    // animates instead of vanishing. Panel→panel switches swap immediately.
+    const [displayPanel, setDisplayPanel] = useState(active);
+    const [closing, setClosing] = useState(false);
+    useEffect(() => {
+        if (active) {
+            setDisplayPanel(active);
+            setClosing(false);
+        }
+        else if (displayPanel) {
+            setClosing(true);
+        }
+    }, [active, displayPanel]);
+    // Graceful degrade (ADR-0030 §6): the active panel was unregistered → collapse.
+    useEffect(() => {
+        if (activeId && !panels.some((p) => p.id === activeId))
+            close();
+    }, [activeId, panels, close]);
+    // Right edge flush against the plugin rail — measured (chat column width is
+    // user-resizable, so a static inset would drift).
+    const [rightInset, setRightInset] = useState(0);
+    useEffect(() => {
+        const measure = () => {
+            const rail = document.querySelector('.activity-rail');
+            if (!rail) {
+                setRightInset(0);
+                return;
+            }
+            const rect = rail.getBoundingClientRect();
+            setRightInset(Math.max(0, Math.round(window.innerWidth - rect.left)));
+        };
+        measure();
+        const disposeBodyResize = installElementResizeObservation({
+            getElements: () => [document.body],
+            onResize: measure,
+        });
+        const disposeViewportResize = installViewportResizeObservation({
+            onResize: measure,
+        });
+        return () => {
+            disposeViewportResize();
+            disposeBodyResize();
+        };
+    }, []);
+    if (!displayPanel)
+        return null;
+    return (_jsxs("div", { className: `fx-drawer-panel${closing ? ' is-closing' : ''}`, "data-fx-slot": "Drawer", style: { height, ['--fx-drawer-right']: `${rightInset}px` }, onAnimationEnd: () => {
+            if (closing) {
+                setDisplayPanel(null);
+                setClosing(false);
+            }
+        }, children: [_jsx(AnchoredResizeHandle, { orientation: "row", className: "fx-drawer-resizer", ariaLabel: "Resize drawer", direction: "subtract", readSize: () => useDrawerStore.getState().height, writeSize: setHeight, resizingBodyClassName: "fx-drawer-resizing" }), _jsxs("div", { className: "fx-drawer-header", children: [_jsx("span", { className: "fx-drawer-title", children: displayPanel.titleKey ? t(displayPanel.titleKey) : displayPanel.title }), _jsx("button", { type: "button", className: "fx-drawer-collapse", onClick: close, title: "Collapse", "aria-label": "Collapse drawer", children: _jsx(PanelBottomClose, { size: 14 }) })] }), _jsx("div", { className: "fx-drawer-body", children: _jsx(RecoveryBoundary, { scope: `drawer:${displayPanel.id}`, fullscreen: false, children: displayPanel.render() }) })] }));
+}

package/dist/package/node/components/Drawer/DrawerLauncher.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { icons as LucideIcons } from 'lucide-react';
+import { useTranslation } from '../../i18n/index.js';
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+import { useDrawerStore } from './useDrawerStore.js';
+export function DrawerLauncher() {
+    const { t } = useTranslation();
+    const drawerPanels = usePanelRenderers().drawerPanels;
+    const activeId = useDrawerStore((s) => s.activeId);
+    const toggle = useDrawerStore((s) => s.toggle);
+    const panels = Object.values(drawerPanels ?? {})
+        .filter((p) => !p.when || p.when())
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    if (panels.length === 0)
+        return null;
+    return (_jsx("span", { className: "fx-drawer-launcher", role: "tablist", "aria-label": "Bottom drawer", children: panels.map((p) => {
+            const Icon = p.icon ? LucideIcons[p.icon] : undefined;
+            const isActive = activeId === p.id;
+            const label = p.titleKey ? t(p.titleKey) : p.title;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, className: `sb-chip fx-drawer-tab${isActive ? ' is-active' : ''}`, onClick: () => toggle(p.id), title: label, children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75, className: "fx-drawer-tab-ic" }) : null, _jsx("span", { className: "fx-drawer-tab-lb", children: label })] }, p.id));
+        }) }));
+}

package/dist/package/node/components/Drawer/useDrawerStore.js

@@ -0,0 +1,80 @@
+// packages/interface/src/components/Drawer/useDrawerStore.ts
+//
+// ADR-0030 §4 — the bottom drawer's UI LAYOUT plane (open/closed, active panel,
+// height). This is distinct from the STRUCTURAL plane (which drawer panels
+// exist — host.panels.drawerPanels) and the BUSINESS plane (a panel's own data
+// store). Persisted across reloads; height clamps to a UX-safe range.
+//
+// singleActive: at most one drawer panel is expanded at a time (activeId). A
+// null activeId means the drawer is collapsed (only the launcher row shows).
+import { create } from 'zustand';
+const HEIGHT_KEY = 'forgeax:drawer-height';
+const ACTIVE_KEY = 'forgeax:drawer-active';
+export const DRAWER_MIN_HEIGHT = 120;
+export const DRAWER_MAX_HEIGHT = 720;
+export const DRAWER_DEFAULT_HEIGHT = 260;
+function clampHeight(n) {
+    if (!Number.isFinite(n))
+        return DRAWER_DEFAULT_HEIGHT;
+    if (n < DRAWER_MIN_HEIGHT)
+        return DRAWER_MIN_HEIGHT;
+    if (n > DRAWER_MAX_HEIGHT)
+        return DRAWER_MAX_HEIGHT;
+    return Math.round(n);
+}
+function loadHeight() {
+    try {
+        if (typeof localStorage === 'undefined')
+            return DRAWER_DEFAULT_HEIGHT;
+        const raw = localStorage.getItem(HEIGHT_KEY);
+        return raw ? clampHeight(Number.parseInt(raw, 10)) : DRAWER_DEFAULT_HEIGHT;
+    }
+    catch {
+        return DRAWER_DEFAULT_HEIGHT;
+    }
+}
+function loadActive() {
+    try {
+        if (typeof localStorage === 'undefined')
+            return null;
+        return localStorage.getItem(ACTIVE_KEY) || null;
+    }
+    catch {
+        return null;
+    }
+}
+function persist(key, value) {
+    try {
+        if (typeof localStorage !== 'undefined')
+            localStorage.setItem(key, value);
+    }
+    catch { /* private mode / storage disabled */ }
+}
+function clearPersist(key) {
+    try {
+        if (typeof localStorage !== 'undefined')
+            localStorage.removeItem(key);
+    }
+    catch { /* noop */ }
+}
+export const useDrawerStore = create((set, get) => ({
+    activeId: loadActive(),
+    height: loadHeight(),
+    open: (id) => { persist(ACTIVE_KEY, id); set({ activeId: id }); },
+    close: () => { clearPersist(ACTIVE_KEY); set({ activeId: null }); },
+    toggle: (id) => {
+        if (get().activeId === id) {
+            clearPersist(ACTIVE_KEY);
+            set({ activeId: null });
+        }
+        else {
+            persist(ACTIVE_KEY, id);
+            set({ activeId: id });
+        }
+    },
+    setHeight: (px) => {
+        const h = clampHeight(px);
+        persist(HEIGHT_KEY, String(h));
+        set({ height: h });
+    },
+}));