@forgeax/interface 0.4.1

package/dist/package/browser/components/DockShell/ueDrag/ueDrag.css

@@ -0,0 +1,199 @@
+/* UE-style dock drag overlay. Drawn by overlay.ts into a single body-level,
+   viewport-fixed layer. Everything is pointer-events:none — hit-testing lives
+   in the controller against the geometry, never the DOM. */
+
+.fx-ue-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000; /* above floating dock groups + surface keep-alive */
+  pointer-events: none;
+  font-family: var(--font-sans, system-ui, sans-serif);
+}
+
+/* Translucent slab previewing where the panel will land. Transitioned so it
+   glides between zones like UE's ghosted target. */
+.fx-ue-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--lime, #7ee04a) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--lime, #7ee04a) 55%, transparent);
+  transition:
+    transform 90ms ease-out,
+    width 90ms ease-out,
+    height 90ms ease-out;
+  will-change: transform, width, height;
+}
+
+/* Tab-strip target: the landing hint is the ghost slot INSIDE the strip, so the
+   overlay only frames the strip — a fill would sit on top of that slot. */
+.fx-ue-preview--strip {
+  background: none;
+  border-color: var(--lime, #7ee04a);
+}
+
+/* ── Ghost tab slot ──────────────────────────────────────────────────────── */
+/* Inserted into the hovered strip's real tabs container (controller.ts), so the
+   neighbouring tabs reflow around it and a drag along the strip reorders live.
+   Never a hit target: all hit-testing runs against the strip geometry. */
+.fx-ue-tab-slot {
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  border: 1px dashed var(--lime, #7ee04a);
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--lime, #7ee04a) 12%, transparent);
+  color: var(--lime, #7ee04a);
+  font-size: 11px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+.fx-ue-tab-slot[data-axis='x'] {
+  width: var(--fx-ue-slot-size, 104px);
+}
+
+/* Vertical (left/right) strips: the slot grows along the strip and rotates its
+   label exactly like the edge tabs it sits between. */
+.fx-ue-tab-slot[data-axis='y'] {
+  height: var(--fx-ue-slot-size, 104px);
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  padding: 8px 4px;
+}
+
+/* ── Dock director (SVG: center square + four trapezoids) ────────────────── */
+.fx-ue-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* The director fills the hovered group's content area: a large center rectangle
+   (merge as tab) framed by four trapezoids (dock directions). PURE WIREFRAME —
+   no background fill at rest, only lime lines; the shape under the cursor gets a
+   faint fill to signal the active zone. */
+.fx-ue-dir-trap,
+.fx-ue-dir-center {
+  fill: none;
+  stroke: color-mix(in srgb, var(--lime, #7ee04a) 65%, transparent);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  transition: fill 70ms ease;
+}
+.fx-ue-dir-trap.fx-ue-active,
+.fx-ue-dir-center.fx-ue-active {
+  fill: color-mix(in srgb, var(--lime, #7ee04a) 22%, transparent);
+  stroke: var(--lime, #7ee04a);
+}
+
+/* ── Dock-to-region edge buttons ─────────────────────────────────────────── */
+.fx-ue-outer {
+  position: absolute;
+  inset: 0;
+}
+
+.fx-ue-btn {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--color-background-base, #0e0e10) 90%, transparent);
+  border: 1px solid var(--color-border-default, #34343a);
+  box-shadow:
+    0 4px 14px rgb(0 0 0 / 45%),
+    0 0 0 1px rgb(0 0 0 / 30%);
+  transition:
+    background 80ms ease,
+    border-color 80ms ease,
+    transform 80ms ease;
+}
+
+.fx-ue-btn.fx-ue-active {
+  background: color-mix(in srgb, var(--lime, #7ee04a) 26%, var(--color-background-elevated, #17171b));
+  border-color: var(--lime, #7ee04a);
+  transform: scale(1.08);
+}
+
+/* Mini-layout glyph: a framed box with the docking side filled. */
+.fx-ue-btn-glyph {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1.5px solid var(--color-text-secondary, #9aa);
+  background:
+    linear-gradient(var(--fx-ue-fill, transparent), var(--fx-ue-fill, transparent));
+  background-repeat: no-repeat;
+  background-size: var(--fx-ue-fill-w, 0) var(--fx-ue-fill-h, 0);
+  background-position: var(--fx-ue-fill-pos, 0 0);
+}
+
+.fx-ue-btn.fx-ue-active .fx-ue-btn-glyph {
+  border-color: var(--lime, #7ee04a);
+  --fx-ue-fill: color-mix(in srgb, var(--lime, #7ee04a) 80%, transparent);
+}
+
+.fx-ue-btn--top    .fx-ue-btn-glyph { --fx-ue-fill-w: 100%; --fx-ue-fill-h: 50%;  --fx-ue-fill-pos: 0 0; }
+.fx-ue-btn--bottom .fx-ue-btn-glyph { --fx-ue-fill-w: 100%; --fx-ue-fill-h: 50%;  --fx-ue-fill-pos: 0 100%; }
+.fx-ue-btn--left   .fx-ue-btn-glyph { --fx-ue-fill-w: 50%;  --fx-ue-fill-h: 100%; --fx-ue-fill-pos: 0 0; }
+.fx-ue-btn--right  .fx-ue-btn-glyph { --fx-ue-fill-w: 50%;  --fx-ue-fill-h: 100%; --fx-ue-fill-pos: 100% 0; }
+
+/* ── Drag ghost chip ─────────────────────────────────────────────────────── */
+.fx-ue-ghost {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: 220px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--color-text-primary, #fff);
+  background: color-mix(in srgb, var(--color-background-elevated, #17171b) 92%, transparent);
+  border: 1px solid var(--lime, #7ee04a);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 50%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Body-level host for the live panel preview. Fixed + zero-size so it takes no
+   space; the parked carrier positions itself in viewport coords. */
+.fx-ue-live-host {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* The lifted panel's floating carrier is the panel's REAL DOM (moved into a
+   floating group to force a grid reflow, then parked in .fx-ue-live-host). The
+   controller repositions it over the predicted landing rect as a LIVE,
+   translucent preview — non-interactive, no window chrome/shadow — so the user
+   sees the actual render, UE-style. Hidden (`--hidden`) when there's no target. */
+.fx-ue-lifted {
+  pointer-events: none !important;
+  opacity: 0.9;
+  box-shadow: none !important;
+}
+.fx-ue-lifted--hidden { display: none !important; }
+html.fx-ue-dragging iframe,
+html.fx-ue-dragging .fx-surface-keepalive-item { pointer-events: none !important; }
+html.fx-ue-dragging { cursor: grabbing !important; }
+
+@media (prefers-reduced-motion: reduce) {
+  .fx-ue-preview,
+  .fx-ue-dir-trap,
+  .fx-ue-dir-center,
+  .fx-ue-btn { transition: none; }
+}

package/dist/package/browser/components/DockShell/useAuxBarWidth.d.ts

@@ -0,0 +1,5 @@
+export declare const AUXBAR_MIN_WIDTH = 200;
+export declare const AUXBAR_MAX_WIDTH = 640;
+export declare const AUXBAR_DEFAULT_WIDTH = 280;
+export declare const auxBarWidthStore: import("@forgeax/app-shell/react").PersistentSizeStore;
+export declare function useAuxBarWidth(): number;

package/dist/package/browser/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/browser/components/Drawer/DrawerHostView.css

@@ -0,0 +1,143 @@
+/* DrawerHostView — bottom drawer (ADR-0030 §2.3).
+ *
+ * The launcher tabs live IN the status bar (single-row footer, .fx-drawer-*
+ * below). The expandable panel is a FIXED overlay anchored just above the
+ * status bar that grows UPWARD over the workspace, its right edge flush against
+ * the plugin rail (--fx-drawer-right measured at runtime). */
+
+/* ── Launcher tabs (inside the status bar strip) ── */
+.fx-drawer-launcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fx-drawer-tab.sb-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.fx-drawer-tab.sb-chip:hover {
+  background: var(--color-interaction-hover);
+  color: var(--text-primary);
+}
+
+.fx-drawer-tab.sb-chip.is-active {
+  color: var(--text-primary);
+  background: var(--color-background-elevated);
+  border-color: var(--forgeax-divider);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+
+/* Hard-lock every launcher icon to one box so mixed lucide glyphs (Info /
+ * History / Activity, different intrinsic widths) read at a uniform size. */
+.fx-drawer-tab-ic {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  opacity: 0.85;
+}
+
+/* ── Expandable panel (fixed overlay, grows upward, slides in) ── */
+.fx-drawer-panel {
+  position: fixed;
+  left: 0;
+  right: var(--fx-drawer-right, 0px);
+  bottom: var(--forgeax-shell-status-h, 24px);
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-elevated);
+  border-top: 1px solid var(--forgeax-divider);
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+  z-index: var(--z-overlay, 40);
+  animation: fx-drawer-reveal 170ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Grow UPWARD from the footer's top edge (the panel's fixed bottom): reveal the
+ * box from the bottom up via clip-path — no downward slide, no content stretch. */
+@keyframes fx-drawer-reveal {
+  from { clip-path: inset(100% 0 0 0); opacity: 0.5; }
+  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
+}
+
+/* Collapse: reverse reveal (conceal downward to the footer top), then unmount
+ * on animationend. fill-mode forwards holds it hidden until React unmounts. */
+.fx-drawer-panel.is-closing {
+  animation: fx-drawer-conceal 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes fx-drawer-conceal {
+  from { clip-path: inset(0 0 0 0);    opacity: 1; }
+  to   { clip-path: inset(100% 0 0 0); opacity: 0.5; }
+}
+
+.fx-drawer-resizer {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: row-resize;
+  z-index: 2;
+  margin: 0;
+}
+.resize-handle.fx-drawer-resizer::after { content: none; }
+.fx-drawer-resizer:hover {
+  background: var(--primary);
+  opacity: 0.5;
+}
+
+.fx-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--forgeax-divider);
+  flex: 0 0 auto;
+}
+
+.fx-drawer-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.fx-drawer-collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.fx-drawer-collapse:hover {
+  background: var(--color-interaction-hover);
+  color: var(--text-primary);
+}
+
+.fx-drawer-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Lock the engine iframe during a drag so it can't swallow pointer moves once
+ * the cursor crosses its boundary (mirrors .fx-auxbar-resizing). */
+.fx-drawer-resizing iframe {
+  pointer-events: none;
+}
+.fx-drawer-resizing {
+  cursor: row-resize;
+  user-select: none;
+}

package/dist/package/browser/components/Drawer/DrawerHostView.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { type ReactElement } from 'react';
+import './DrawerHostView.css';
+export declare function DrawerHostView(): ReactElement | null;

package/dist/package/browser/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';
+import { usePanelRenderers } from '../DockShell/panelRenderers';
+import { RecoveryBoundary } from '../ErrorBoundary';
+import { useDrawerStore } from './useDrawerStore';
+import './DrawerHostView.css';
+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/browser/components/Drawer/DrawerLauncher.d.ts

@@ -0,0 +1,12 @@
+/**
+ * DrawerLauncher — the bottom drawer's launcher tabs, rendered INSIDE the
+ * status bar (a `custom` strip contribution, ADR-0030 §2.3). Keeping the
+ * launcher in the strip means the footer stays a single row; clicking a tab
+ * toggles its panel, which DrawerHostView expands upward.
+ *
+ * Self-contained + reactive: subscribes to useDrawerStore so the active tab
+ * highlight updates independently of the strip snapshot (the strip item itself
+ * is registered once and never re-derives on drawer open/close).
+ */
+import { type ReactElement } from 'react';
+export declare function DrawerLauncher(): ReactElement | null;

package/dist/package/browser/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';
+import { usePanelRenderers } from '../DockShell/panelRenderers';
+import { useDrawerStore } from './useDrawerStore';
+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/browser/components/Drawer/useDrawerStore.d.ts

@@ -0,0 +1,15 @@
+export declare const DRAWER_MIN_HEIGHT = 120;
+export declare const DRAWER_MAX_HEIGHT = 720;
+export declare const DRAWER_DEFAULT_HEIGHT = 260;
+interface DrawerStore {
+    /** Currently expanded drawer panel id; null = collapsed. */
+    activeId: string | null;
+    height: number;
+    open: (id: string) => void;
+    close: () => void;
+    /** Open `id`; if it is already the active panel, collapse instead. */
+    toggle: (id: string) => void;
+    setHeight: (px: number) => void;
+}
+export declare const useDrawerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DrawerStore>>;
+export {};

package/dist/package/browser/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 });
+    },
+}));

package/dist/package/browser/components/ErrorBoundary.d.ts

@@ -0,0 +1,55 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    /** Optional label so nested boundaries identify which subtree failed. */
+    scope?: string;
+    /** When false, render a compact inline panel (for region-scoped boundaries
+     *  inside a dock panel) instead of the full-screen overlay used at the root. */
+    fullscreen?: boolean;
+}
+interface State {
+    error: Error | null;
+    info: ErrorInfo | null;
+    /** Bumped by "重载此区域" to force-remount the children subtree. */
+    remountKey: number;
+}
+/**
+ * RecoveryBoundary — a React error boundary with explicit recovery exits.
+ *
+ * A render throw anywhere in the subtree (a bad store selector, a plugin panel)
+ * used to leave the shell stuck on a dead error page forever — fatal in the
+ * Tauri desktop form, which has no address bar to reload from. This catches the
+ * throw and offers three exits:
+ *
+ *   - 重试      — clears the error and re-renders the SAME element tree. Cheapest
+ *                 recovery; works when the throw was a transient state glitch.
+ *   - 重载此区域 — bumps a key so the children subtree fully remounts (fresh
+ *                 component state), without reloading the whole window.
+ *   - 重新加载 Studio — window.location.reload(); last resort, and the ONLY exit
+ *                 a desktop (.app) user has since there's no browser chrome.
+ *
+ * This complements (does not overlap) the T2 iframe fatal banner: that one
+ * handles failures *inside* the cross-origin engine iframe (device-lost / scene
+ * instantiate); THIS one handles the shell's own React render crashing. The two
+ * are different documents — a React boundary cannot see an iframe throw, and the
+ * banner cannot see a shell render throw.
+ *
+ * Kept exported as both `RecoveryBoundary` (new name) and `ErrorBoundary`
+ * (back-compat alias) so existing call sites need no churn.
+ */
+export declare class RecoveryBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): Partial<State>;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    /** 重试 — clear the error, re-render the same subtree (no remount). */
+    private retry;
+    /** 重载此区域 — clear the error AND bump the remount key so the subtree
+     *  remounts with fresh component state. */
+    private remountSubtree;
+    /** 重新加载 Studio — hard reload of the whole window. */
+    private reloadWindow;
+    render(): ReactNode;
+}
+/** Back-compat alias — existing imports use `ErrorBoundary`. */
+export declare const ErrorBoundary: typeof RecoveryBoundary;
+export {};