@forgeax/interface 0.4.1

package/dist/package/browser/styles/tokens.css

@@ -0,0 +1,304 @@
+@import './primitive.css';
+
+/* =============================================================================
+   SEMANTIC LAYER — 来自 semantic.tokens.json (Figma Semantic 集合)
+   命名规则：--color-{category}-{role}
+   ============================================================================= */
+:root {
+
+  /* ── text ───────────────────────────────────────────────────────────────── */
+  --color-text-primary:             var(--prim-color-neutral-0);       /* #FFFFFF */
+  --color-text-secondary:           rgba(255, 255, 255, 0.60);
+  --color-text-tertiary:            rgba(255, 255, 255, 0.30);
+  --color-text-disabled:            rgba(255, 255, 255, 0.20);
+  --color-text-danger:              var(--color-accent-error-default);
+  --color-text-on-bright-primary:   var(--prim-color-neutral-1000);    /* #000000 */
+  --color-text-on-bright-secondary: rgba(0, 0, 0, 0.60);
+  --color-text-on-bright-tertiary:  rgba(0, 0, 0, 0.30);
+  --color-text-on-bright-disabled:  rgba(0, 0, 0, 0.10);
+
+  /* ── icon (aliases of text) ─────────────────────────────────────────────── */
+  --color-icon-primary:            var(--color-text-primary);
+  --color-icon-secondary:          var(--color-text-secondary);
+  --color-icon-tertiary:           var(--color-text-tertiary);
+  --color-icon-disabled:           var(--color-text-disabled);
+  --color-icon-on-bright-primary:  var(--color-text-on-bright-primary);
+  --color-icon-on-bright-secondary:var(--color-text-on-bright-secondary);
+  --color-icon-on-bright-tertiary: var(--color-text-on-bright-tertiary);
+  --color-icon-on-dark-disabled:   var(--color-text-on-bright-disabled);
+
+  /* ── background ─────────────────────────────────────────────────────────── */
+  --color-background-canvas:   var(--prim-color-neutral-950);  /* #0D0D0D — deepest */
+  --color-background-base:     var(--prim-color-neutral-900);  /* #191919 — topbar/panel */
+  --color-background-elevated: var(--prim-color-neutral-850);  /* #242424 — card/component */
+  --color-background-floating: var(--prim-color-neutral-800);  /* #333333 — hover/tooltip */
+
+  /* ── border ─────────────────────────────────────────────────────────────── */
+  --color-border-subtle:  var(--prim-color-neutral-800);  /* #333333 */
+  --color-border-default: var(--prim-color-neutral-750);  /* #404040 */
+  --color-border-strong:  var(--prim-color-neutral-550);  /* #737373 */
+
+  /* ── brand ──────────────────────────────────────────────────────────────── */
+  --color-brand-primary:       var(--prim-color-lime-400);  /* #D4FF48 */
+  --color-brand-primary-light: var(--prim-color-lime-300);  /* #DFFF78 */
+  --color-brand-primary-soft:  var(--prim-color-lime-700);  /* #6A7F24 */
+
+  /* ── accent ─────────────────────────────────────────────────────────────── */
+  --color-accent-blue-default:   var(--prim-color-blue-400);    /* #639CF8 */
+  --color-accent-blue-soft:      var(--prim-color-blue-900);    /* #0B182D */
+  --color-accent-green-default:  var(--prim-color-green-400);   /* #4FD17F */
+  --color-accent-green-soft:     var(--prim-color-green-800);   /* #0D4C24 */
+  --color-accent-orange-default: var(--prim-color-orange-400);  /* #FFB056 */
+  --color-accent-orange-soft:    var(--prim-color-orange-800);  /* #633C10 */
+  --color-accent-purple-default: var(--prim-color-purple-500);  /* #A855F7 */
+  --color-accent-purple-soft:    var(--prim-color-purple-800);  /* #412160 */
+  --color-accent-error-default:  var(--prim-color-red-400);     /* #F26A6A */
+  --color-accent-error-soft:     var(--prim-color-red-800);     /* #5C1A1A */
+
+  /* ── status ─────────────────────────────────────────────────────────────── */
+  --color-status-success: var(--prim-color-green-600);   /* #1B9D4B */
+  --color-status-warning: var(--prim-color-yellow-600);  /* #BA8E06 */
+  --color-status-error:   var(--prim-color-red-600);     /* #BE3636 */
+
+  /* ── overlay ────────────────────────────────────────────────────────────── */
+  --color-overlay-modal: rgba(0, 0, 0, 0.50);
+  --color-overlay-focus: rgba(212, 255, 72, 0.30);
+
+  /* ── divider ────────────────────────────────────────────────────────────── */
+  --color-divider-strong:  rgba(255, 255, 255, 0.15);
+  --color-divider-default: rgba(255, 255, 255, 0.10);
+  --color-divider-subtle:  rgba(255, 255, 255, 0.05);
+
+  /* ── skeleton ───────────────────────────────────────────────────────────── */
+  --color-skeleton-default: rgba(255, 255, 255, 0.10);
+
+  /* ── interaction ────────────────────────────────────────────────────────── */
+  --color-interaction-hover:            rgba(255, 255, 255, 0.05);
+  --color-interaction-selected-brand:   rgba(212, 255, 72, 0.10);
+  --color-interaction-selected-neutral: rgba(255, 255, 255, 0.15);
+  --color-interaction-disabled:         rgba(0, 0, 0, 0.50);
+  --color-interaction-error:            rgba(255, 107, 107, 0.08);
+  --color-interaction-error-strong:     rgba(255, 107, 107, 0.14);
+
+  /* ── rgb channels (for alpha composition: rgba(var(--rgb-*), α)) ──────── */
+  --rgb-accent-green:  75, 222, 128;   /* tb-providers is-ok  */
+  --rgb-accent-warn:   245, 178, 67;   /* tb-providers is-warn */
+  --rgb-accent-error:  255, 107, 107;  /* *.is-down           */
+  --rgb-accent-teal:   126, 231, 196;  /* tb-model            */
+  --rgb-accent-gold:   255, 200, 120;  /* tb-skill            */
+  --rgb-accent-orange: 255, 140, 66;   /* tb-tool             */
+  --rgb-accent-violet: 196, 163, 255;  /* tb-agent            */
+}
+
+/* =============================================================================
+   BACKWARD-COMPAT ALIASES — 旧 token 名 → semantic 层
+   旧代码无需修改；遇到旧 token 时按右侧 → 替换为新 token 即可。
+   ============================================================================= */
+:root {
+
+  /* background ── 迁移目标：--color-background-* */
+  --bg-0: var(--color-background-canvas);    /* → --color-background-canvas   */
+  --bg-1: var(--color-background-base);      /* → --color-background-base     */
+  --bg-2: var(--color-background-elevated);  /* → --color-background-elevated */
+  --bg-3: var(--color-background-floating);  /* → --color-background-floating */
+
+  /* text ── 迁移目标：--color-text-* */
+  --text:           var(--color-text-primary);    /* → --color-text-primary   */
+  --text-primary:   var(--color-text-primary);    /* → --color-text-primary   */
+  --text-secondary: var(--color-text-secondary);  /* → --color-text-secondary */
+  --text-muted:     var(--color-text-tertiary);   /* → --color-text-tertiary  */
+  --text-mute:      var(--color-text-tertiary);   /* → --color-text-tertiary  */
+  --text-dim:       var(--color-text-disabled);   /* → --color-text-disabled  */
+  --text-default:   var(--color-text-primary);    /* → --color-text-primary   */
+  --text-danger:    var(--color-text-danger);     /* → --color-text-danger    */
+
+  /* fg ── 迁移目标：--color-text-* */
+  --fg-1: var(--color-text-primary);    /* → --color-text-primary   */
+  --fg-2: var(--color-text-secondary);  /* → --color-text-secondary */
+  --fg-3: var(--color-text-tertiary);   /* → --color-text-tertiary  */
+
+  /* border / divider ── 迁移目标：--color-border-* / --color-divider-* */
+  --border:      var(--color-border-default); /* → --color-border-default */
+  --border-soft: var(--color-divider-subtle); /* → --color-divider-subtle */
+
+  /* brand / primary ── 迁移目标：--color-brand-* / --color-interaction-* */
+  --primary:       var(--color-brand-primary);              /* → --color-brand-primary              */
+  --primary-light: var(--color-brand-primary-light);        /* → --color-brand-primary-light        */
+  --primary-soft:  var(--color-brand-primary-soft);         /* → --color-brand-primary-soft         */
+  --primary-bg:    var(--color-interaction-selected-brand); /* → --color-interaction-selected-brand */
+
+  /* secondary (teal) ── 无对应 semantic token，暂保留 primitive 引用 */
+  --secondary:      var(--prim-color-teal-400);  /* → (待补) --color-accent-teal-default  */
+  --secondary-soft: var(--prim-color-teal-700);  /* → (待补) --color-accent-teal-soft     */
+
+  /* accent ── 迁移目标：--color-accent-*-default / --color-accent-*-soft */
+  --accent-blue:        var(--color-accent-blue-default);    /* → --color-accent-blue-default   */
+  --accent-blue-soft:   var(--color-accent-blue-soft);       /* → --color-accent-blue-soft      */
+  --accent-mint:        var(--prim-color-teal-300);          /* → (待补) --color-accent-teal-light */
+  --accent-green:       var(--color-accent-green-default);   /* → --color-accent-green-default  */
+  --accent-green-soft:  var(--color-accent-green-soft);      /* → --color-accent-green-soft     */
+  --accent-cyan:        var(--prim-color-teal-400);          /* → (待补) --color-accent-teal-default */
+  --accent-cyan-soft:   var(--prim-color-teal-700);          /* → (待补) --color-accent-teal-soft    */
+  --accent-orange:      var(--color-accent-orange-default);  /* → --color-accent-orange-default */
+  --accent-orange-soft: var(--color-accent-orange-soft);     /* → --color-accent-orange-soft    */
+  --accent-purple:      var(--color-accent-purple-default);  /* → --color-accent-purple-default */
+  --accent-purple-soft: var(--color-accent-purple-soft);     /* → --color-accent-purple-soft    */
+  --accent-pink:        var(--prim-color-pink-400);          /* → (待补) --color-accent-pink-default */
+  --accent-error:       var(--color-accent-error-default);   /* → --color-accent-error-default  */
+  --accent-error-soft:  var(--color-accent-error-soft);      /* → --color-accent-error-soft     */
+  --danger:             var(--color-text-danger);             /* → --color-text-danger           */
+  --danger-soft:        var(--color-interaction-error-strong);/* → --color-interaction-error-*   */
+
+  /* misc ── 迁移目标：--color-interaction-* */
+  --hover:        var(--color-interaction-hover);            /* → --color-interaction-hover */
+  --sel-neutral:  var(--color-interaction-selected-neutral); /* → --color-interaction-selected-neutral */
+  --hover-active: var(--prim-color-green-400);               /* → (待补) --color-interaction-selected-success */
+
+  /* typography ── 迁移目标：--prim-font-* (primitive 已是最终值，无需改) */
+  --font-sans: var(--prim-font-sans);  /* → --prim-font-sans */
+  --font-mono: var(--prim-font-mono);  /* → --prim-font-mono */
+  --font-base: var(--prim-font-sans);  /* → --prim-font-sans */
+  --mono:      var(--prim-font-mono);  /* → --prim-font-mono */
+
+  /* radius ── 迁移目标：--prim-radius-* (primitive 已是最终值，无需改) */
+  --radius-sm:   var(--prim-radius-4);     /* → --prim-radius-4    */
+  --radius-md:   var(--prim-radius-8);     /* → --prim-radius-8    */
+  --radius-lg:   var(--prim-radius-12);    /* → --prim-radius-12   */
+  --radius-xl:   var(--prim-radius-16);    /* → --prim-radius-16   */
+  --radius-2xl:  var(--prim-radius-24);    /* → --prim-radius-24   */
+  --radius-pill: var(--prim-radius-full);  /* → --prim-radius-full */
+
+  /* z-index ── legacy semantic tokens (kept for the forgeax-preview shell). */
+  --z-base:    var(--prim-z-level-1);  /* → --prim-z-level-1 (100) */
+  --z-overlay: var(--prim-z-level-2);  /* → --prim-z-level-2 (200) */
+  --z-modal:   var(--prim-z-level-3);  /* → --prim-z-level-3 (300) */
+  --z-top:     var(--prim-z-level-4);  /* → --prim-z-level-4 (9999) */
+
+  /* ── app stacking scale (SSOT) ───────────────────────────────────────────
+     Single source of stacking order for ALL app chrome. Higher = closer to
+     the user. RULE: floating UI must use one of these tokens, never a raw
+     z-index. New overlays "just work" on top because the scale is monotonic.
+     See docs/features/editor-mode/editor-mode-architecture-review.md §B1.   */
+  --z-content:        0;      /* in-flow content baseline                    */
+  --z-raised:         1;      /* slight in-flow lift: badges, tab slider      */
+  --z-sticky:         10;     /* sticky header inside a scroller              */
+  --z-dropdown:       100;    /* in-flow dropdown anchored to its trigger     */
+  --z-dock-float:     200;    /* dock pop-out affordance / toolbar menu       */
+  --z-popover:        1000;   /* portalled anchored popover                   */
+  --z-surface:        9000;   /* detached-surface overlay layer               */
+  /* The shell topbar is --z-top (9999). App modals (Settings / Dashboard) are
+     full-screen overlays that MUST cover the topbar — so the modal tier sits
+     just ABOVE 9999. Menus / selects / dropdowns / tooltips can open from
+     INSIDE a modal, so they sit above the modal-content tier. Radix
+     popover/select/dropdown are pinned to --z-menu (see ui/*.tsx) so EVERY
+     menu — hand-rolled or Radix — shares one tier above modals + chrome.    */
+  --z-app-modal:      10000;  /* modal scrim (Settings / Dashboard)           */
+  --z-app-modal-top:  10010;  /* modal content above its own scrim            */
+  --z-menu-backdrop:  10090;  /* click-catcher behind a floating menu         */
+  --z-menu:           10100;  /* context / select / dropdown / popover content */
+  --z-toast:          10150;  /* transient toast (above modal + menus)        */
+  --z-tooltip:        10200;  /* hover tooltip, composer pill chip            */
+  --z-toplevel:       99999;  /* last resort: error boundary, first-run gate  */
+
+  /* ── motion ─────────────────────────────────────────────────────────────
+     Linear-style motion language:
+     - fast, quiet, mostly opacity/transform/color
+     - hover reacts in 120-160ms
+     - pressed state snaps in 80ms
+     - panels/dropdowns reveal in 180-220ms
+     - status flashes are short and informative (600ms)
+     - ambient/background motion is slow and disabled by reduced-motion
+  */
+  --motion-duration-instant: 80ms;
+  --motion-duration-fast:    110ms;
+  --motion-duration-base:    150ms;
+  --motion-duration-smooth:  190ms;
+  --motion-duration-panel:   220ms;
+  --motion-duration-switch:  240ms;
+  --motion-duration-switch-item: 200ms;
+  --motion-duration-flash:   600ms;
+  --motion-duration-pulse:   1400ms;
+  --motion-duration-ambient: 18s;
+  --motion-stagger-step:     24ms;
+  --motion-stagger-cap:      240ms;
+
+  --motion-ease-linear:   linear;
+  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --motion-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in:       cubic-bezier(0.32, 0, 0.67, 0);
+  --motion-ease-spring:   var(--motion-ease-standard);
+  --motion-ease-flow:     cubic-bezier(0.45, 0, 0.55, 1);
+
+  --motion-press-scale: 0.996;
+  --motion-hover-y: -1px;
+  --motion-hover-scale: 1;
+  --motion-hover-icon-scale: 1.02;
+  --motion-hover-icon-rotate: 0deg;
+  --motion-row-x: 1.5px;
+  --motion-panel-y: 4px;
+  --motion-panel-scale: 1;
+  --motion-list-y: 4px;
+  --motion-list-scale: 1;
+  --motion-page-enter-opacity: 1;
+  --motion-list-enter-opacity: 0.92;
+  --motion-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.14);
+  --motion-shadow-active: 0 1px 6px rgba(0, 0, 0, 0.12);
+
+  /* ── agent role colors ───────────────────────────────────────────── */
+  --color-role-orchestrator: var(--prim-color-purple-300);  /* #CC9BFA (was #c4a3ff) */
+  --color-role-pillar:       var(--color-brand-primary);
+  --color-role-design:       var(--prim-color-pink-300);    /* #FF6DB8 (was #ff6db5) */
+  --color-role-narrative:    var(--prim-color-orange-300);  /* #FFC481 (was #ffc878) */
+  --color-role-art:          var(--prim-color-sky-300);     /* #7dd3fc */
+  --color-role-coding:       var(--accent-orange);          /* #FFB056 (was #ff8c42) */
+
+  /* ── bus kind colors ─────────────────────────────────────────────── */
+  --color-kind-extension:     var(--color-brand-primary);
+  --color-kind-agent:         var(--color-role-orchestrator);
+  --color-kind-cli-provider:  var(--prim-color-sky-400);    /* #6cc4ff */
+  --color-kind-model-binding: var(--accent-mint);           /* #63EACF (was #7be7c4) */
+  --color-kind-skill:         var(--color-role-narrative);
+  --color-kind-tool:          var(--color-role-coding);
+
+  /* ── file family colors ──────────────────────────────────────────────
+     Kept in the host token entrypoint as well as @forgeax/design semantic.css
+     because the interface bundle still imports this legacy-compatible entry. */
+  --fx-family-code:   var(--prim-color-lime-400);
+  --fx-family-config: var(--prim-color-sky-400);
+  --fx-family-doc:    var(--prim-color-yellow-300);
+  --fx-family-scene:  var(--prim-color-pink-300);
+  --fx-family-pack:   var(--prim-color-purple-300);
+  --fx-family-meta:   var(--prim-color-neutral-350);
+  --fx-family-image:  var(--prim-color-pink-400);
+  --fx-family-audio:  var(--prim-color-purple-400);
+  --fx-family-model:  var(--prim-color-teal-300);
+  --fx-family-data:   var(--prim-color-orange-300);
+
+  /* ── additional status ───────────────────────────────────────────── */
+  --color-status-amber:        #f5b243;
+  --color-status-warning-text: #ffc966;  /* connection-status warn chip text */
+
+  /* ── brand hover ─────────────────────────────────────────────────── */
+  --color-brand-primary-hover: #c5f038;  /* primary button :hover (darkened lime) */
+
+  /* ── accent violet ───────────────────────────────────────────────── */
+  --accent-violet:       #7c5cff;  /* settings active nav inset shadow */
+  --accent-violet-light: #c084fc;  /* settings section headings */
+
+  /* ── syntax highlighting ─────────────────────────────────────────── */
+  --color-syntax-key:     #79c0ff;  /* JSON key — GitHub-style blue */
+  --color-syntax-string:  #f0c674;  /* string / inline code — warm yellow */
+  --color-syntax-number:  #b5cea8;  /* number — sage green */
+  --color-syntax-boolean: #d2a8ff;  /* boolean / keyword — soft purple */
+
+  /* ── motion ──────────────────────────────────────────────────────── */
+  /* easing curves */
+  --motion-ease-spring:   cubic-bezier(0.22, 1, 0.36, 1); /* fast attack, damped tail — 阻尼弹簧 */
+  --motion-ease-out:      cubic-bezier(0.0, 0, 0.2, 1);   /* standard decelerate */
+  --motion-ease-standard: ease;                            /* subtle / decorative transitions */
+
+  /* durations */
+  --motion-duration-instant: 120ms;  /* icon buttons, LED dots — immediate feedback */
+  --motion-duration-fast:    200ms;  /* tab slider, color switches — snappy UI */
+  --motion-duration-medium:  300ms;  /* panel slides, overlay entrances */
+}

package/dist/package/node/App.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Compatibility entry for existing standalone consumers. Product assemblies
+// should own ApplicationRuntimeRoot and render ApplicationShell directly.
+import { useCallback } from 'react';
+import { ApplicationRuntimeRoot } from '@forgeax/app-shell/application';
+import { ApplicationShell, } from './ApplicationShell.js';
+import { startInterfaceApplication, } from './application.js';
+export function App({ overrides, onboarding } = {}) {
+    const start = useCallback(() => startInterfaceApplication(overrides), [overrides]);
+    return (_jsx(ApplicationRuntimeRoot, { start: start, children: (runtime) => _jsx(ApplicationShell, { runtime: runtime, onboarding: onboarding }) }));
+}

package/dist/package/node/ApplicationDetachedShell.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { HostProvider } from '@forgeax/app-shell/application';
+import { BrandProvider } from './brand/index.js';
+import { DetachedSurface } from './components/DetachedSurface.js';
+import { PanelRenderersProvider } from './components/DockShell/panelRenderers.js';
+/** Detached presentation only; the caller retains startup, recovery and disposal. */
+export function ApplicationDetachedShell({ host, surface, SurfaceProvider = Fragment, }) {
+    return (_jsx(BrandProvider, { children: _jsx(HostProvider, { value: host, children: _jsx(PanelRenderersProvider, { value: host.panels, children: _jsx(SurfaceProvider, { children: _jsx(DetachedSurface, { surface: surface }) }) }) }) }));
+}

package/dist/package/node/ApplicationShell.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useSyncExternalStore } from 'react';
+import { SlotDebugOverlay, isSlotDebugEnabled } from '@forgeax/app-shell/react';
+import { TopBar } from './components/TopBar/TopBar.js';
+import { GameDirectoryModalHost } from './components/TopBar/ProjectSwitcher.js';
+import { GameModalHost } from './components/TopBar/GameSwitcher.js';
+import { ActivityRail } from './components/ActivityRail/ActivityRail.js';
+import { PageTabStrip } from './components/PageTabs/PageTabStrip.js';
+import { DockRegion } from './components/DockShell/DockRegion.js';
+import { PanelRenderersProvider, DEFAULT_PANEL_RENDERERS } from './components/DockShell/panelRenderers.js';
+import { SurfaceKeepAliveLayer } from './components/Surfaces/SurfaceKeepAliveLayer.js';
+import { StripHostView } from './components/StatusBar/StripHostView.js';
+import { DrawerHostView } from './components/Drawer/DrawerHostView.js';
+import { ContextMenu } from './components/ContextMenu/ContextMenu.js';
+import { CommandPalette } from './components/CommandPalette/CommandPalette.js';
+import { OnboardingController, ConnectModelPrompt } from './components/Onboarding/index.js';
+import { useOnboardingPhase } from './components/Onboarding/types.js';
+import { DialogHost } from './lib/dialog.js';
+import { PassiveFeedbackHost } from './components/Feedback/PassiveFeedback.js';
+import { useGlobalShortcuts } from './lib/global-shortcuts.js';
+import { useShellStore } from './store.js';
+import { useTranslation } from './i18n/index.js';
+import { initNativeMenuBridge } from './lib/native-menu-bridge.js';
+import { isTauri } from './lib/platform/runtime.js';
+
+export { ApplicationDetachedShell } from './ApplicationDetachedShell.js';
+function KeyboardRouter({ runtime }) {
+    useGlobalShortcuts(runtime.host.keybindings);
+    return null;
+}
+export function isApplicationOnboardingEnabled(onboarding) {
+    return onboarding?.enabled !== false;
+}
+/**
+ * Renders the shared Interface chrome for a runtime owned by the product root.
+ * Product startup and disposal deliberately stay outside this component.
+ */
+export function ApplicationShell({ runtime, onboarding }) {
+    const { t } = useTranslation();
+    const fullscreen = useShellStore((state) => state.fullscreen);
+    const sidebarCollapsed = useShellStore((state) => state.sidebarCollapsed);
+    const chatpanelCollapsed = useShellStore((state) => state.chatpanelCollapsed);
+    const onboardingPhase = useOnboardingPhase();
+    const onboardingEnabled = isApplicationOnboardingEnabled(onboarding);
+    const shellHidden = onboardingEnabled && (onboardingPhase === 'welcome' || onboardingPhase === 'project');
+    useEffect(() => {
+        if (!isTauri())
+            return;
+        void initNativeMenuBridge({
+            execute: (id, args) => runtime.host.commands.execute(id, args),
+            translate: t,
+        });
+    }, [runtime, t]);
+    const subscribePanels = useMemo(() => (callback) => runtime.control.onPanelsChange(callback), [runtime]);
+    const renderers = useSyncExternalStore(subscribePanels, () => runtime.host.panels, () => DEFAULT_PANEL_RENDERERS);
+    const Dashboard = renderers.overlays?.Dashboard;
+    const Settings = renderers.overlays?.Settings;
+    if (shellHidden) {
+        return (_jsxs(_Fragment, { children: [_jsx(KeyboardRouter, { runtime: runtime }), _jsx(PanelRenderersProvider, { value: renderers, children: _jsxs("div", { className: "studio-shell studio-shell--preview-skin", children: [_jsx(OnboardingController, { tourEnabled: onboarding?.tourEnabled }), _jsx(DialogHost, {})] }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(KeyboardRouter, { runtime: runtime }), _jsx(PanelRenderersProvider, { value: renderers, children: _jsxs("div", { className: "studio-shell studio-shell--preview-skin", "data-fullscreen": fullscreen ? '1' : undefined, "data-sidebar-collapsed": sidebarCollapsed ? '1' : undefined, "data-chatpanel-collapsed": chatpanelCollapsed ? '1' : undefined, children: [onboardingEnabled && (_jsx(OnboardingController, { tourEnabled: onboarding?.tourEnabled })), _jsx(ConnectModelPrompt, {}), _jsx(TopBar, {}), _jsx(PassiveFeedbackHost, {}), _jsxs("div", { className: "studio-body", children: [_jsxs("div", { className: "studio-main-col", children: [_jsx(PageTabStrip, {}), _jsxs("div", { className: "studio-main-dock", children: [_jsx(DockRegion, { region: "DockShell" }), _jsx(DockRegion, { region: "AuxBar" })] })] }), _jsx(SurfaceKeepAliveLayer, {}), _jsx(ActivityRail, {}), _jsx(DockRegion, { region: "ChatDock" })] }), _jsx(DrawerHostView, {}), _jsx(StripHostView, {}), Dashboard && _jsx("div", { "data-fx-slot": "Dashboard", style: { display: 'contents' }, children: _jsx(Dashboard, {}) }), Settings && _jsx("div", { "data-fx-slot": "Settings", style: { display: 'contents' }, children: _jsx(Settings, {}) }), _jsx(ContextMenu, {}), _jsx(CommandPalette, {}), _jsx(GameDirectoryModalHost, {}), _jsx(GameModalHost, {}), _jsx(DialogHost, {}), isSlotDebugEnabled() && _jsx(SlotDebugOverlay, {})] }) })] }));
+}

package/dist/package/node/app-kit.js

@@ -0,0 +1,4 @@
+// Compatibility export while application packages migrate to App Shell.
+// AppKit is product-neutral composition metadata and structured mount errors;
+// Interface no longer owns a second implementation.
+export { AppKitError, defineApp, mountComposition, } from '@forgeax/app-shell/application';

package/dist/package/node/appHostBootstrap.js

@@ -0,0 +1,145 @@
+// packages/interface/src/appHostBootstrap.ts
+//
+// The single place that builds an AppHost + wires the built-in extension list.
+// Studio (which injects Dashboard / Settings / StatusFeeds / surfaces / slots /
+// detached / editor concrete extensions) calls this and passes them via
+// `overrides.extensions`. Interface-alone callers pass no overrides — no overlays,
+// no detached windows, and no editor-specific panels show up (only the interface foundation +
+// chat remain).
+//
+// Each manifest's setup is wrapped in a control.beginSetup(m) / try / finally
+// endSetup() bracket so host.extend(capability, api) — which requires an
+// active setup — always sees the right owner during synchronous extension boot.
+// The wrap is also where declarative `contributes` lands (ADR 0025 M2): panels
+// contributions are registered before setup() runs and removed together with
+// the extension's cleanup, so a pure-UI extension needs no setup at all.
+import { createAppHost, } from './core/app-shell/index.js';
+import { createExtensionLoader } from './core/extension-foundation/loader.js';
+import { foundationCommandsExtension } from './core/extensions/foundation-commands.js';
+import { foundationBusExtension } from './core/extensions/foundation-bus.js';
+import { foundationStorageExtension } from './core/extensions/foundation-storage.js';
+import { builtinCommandsExtension } from './core/extensions/builtin-commands.js';
+import { hostCommandsExtension } from './core/extensions/host-commands.js';
+import { builtinMenusExtension } from './core/extensions/builtin-menus.js';
+import { editorCommandsExtension } from './core/extensions/editor-commands.js';
+import { panelsViewportExtension } from './core/extensions/panels-viewport.js';
+import { panelsChatExtension } from './core/extensions/panels-chat.js';
+import { chromeStatusBarExtension } from './core/extensions/chrome-statusbar.js';
+import { chromeDrawerExtension } from './core/extensions/chrome-drawer.js';
+
+import { sessionClientExtension } from './core/extensions/session-client.js';
+
+import { studioDomainClientsExtension } from './core/extensions/studio-domain-clients.js';
+
+import { observabilityExtension } from './core/extensions/observability.js';
+import { trajectoryExtension } from './core/extensions/trajectory.js';
+import { consoleLogger } from './core/app-shell/logger.js';
+import { createCatalogPageExtensionRuntime } from './core/app-shell/catalog-page-extensions.js';
+export async function bootstrapAppHost(overrides = {}) {
+    const { host, control } = createAppHost();
+    const contextFactory = (m) => ({
+        host,
+        bus: host.bus,
+        storage: host.storage,
+        log: consoleLogger,
+        registerCommand: (cmd) => host.commands.register(cmd),
+        contributePanels: (patch) => control.contributePanels(m.id, patch),
+        contributePanelActions: (actions) => control.contributePanelActions(m.id, actions),
+        contributePanelControls: (controls) => control.contributePanelControls(m.id, controls),
+        contributePagePlatform: (contribution) => control.contributePagePlatform(m.id, contribution),
+    });
+    const loader = createExtensionLoader({
+        capabilities: control.capabilities,
+        contextFactory,
+        onError: (err, m, phase) => consoleLogger.error(`extension "${m.id}" ${phase} error`, err),
+    });
+    // Wrap each manifest so control.beginSetup / endSetup brackets its sync
+    // setup frame — host.extend(cap, api) inside setup() needs an active owner.
+    // The wrap also applies declarative `contributes.panels` BEFORE setup() and
+    // composes its removal into the extension's cleanup (reverse order), and
+    // supplies the loader-required setup shim for contributes-only extensions.
+    const wrap = (m) => ({
+        ...m,
+        async setup(ctx) {
+            control.beginSetup(m);
+            try {
+                const cleanups = [];
+                let pageCleanup;
+                if (m.contributes?.panels) {
+                    cleanups.push(control.contributePanels(m.id, m.contributes.panels));
+                }
+                if (m.contributes?.panelActions) {
+                    cleanups.push(control.contributePanelActions(m.id, m.contributes.panelActions));
+                }
+                if (m.contributes?.panelControls) {
+                    cleanups.push(control.contributePanelControls(m.id, m.contributes.panelControls));
+                }
+                if (m.contributes?.pages || m.contributes?.panelTypes || m.contributes?.activities || m.contributes?.resourceEditors) {
+                    pageCleanup = control.contributePagePlatform(m.id, {
+                        pageTypes: m.contributes.pages,
+                        panelTypes: m.contributes.panelTypes,
+                        activities: m.contributes.activities,
+                        resourceEditors: m.contributes.resourceEditors,
+                    });
+                }
+                const r = await m.setup?.(ctx);
+                if (typeof r === 'function')
+                    cleanups.push(r);
+                if (cleanups.length === 0 && !pageCleanup)
+                    return undefined;
+                return async () => {
+                    // Controllers get the first say. If one vetoes/needs a user decision,
+                    // no declarative or imperative contribution is torn down underneath it.
+                    await pageCleanup?.();
+                    for (const c of cleanups.slice().reverse())
+                        await c();
+                };
+            }
+            finally {
+                control.endSetup();
+            }
+        },
+    });
+    const overrideIds = new Set((overrides.extensions ?? []).map((extension) => extension.id));
+    const manifests = [
+        foundationCommandsExtension,
+        foundationBusExtension,
+        foundationStorageExtension,
+        builtinCommandsExtension,
+        hostCommandsExtension,
+        builtinMenusExtension,
+        editorCommandsExtension,
+        panelsViewportExtension,
+        panelsChatExtension,
+        chromeStatusBarExtension,
+        chromeDrawerExtension,
+        sessionClientExtension,
+        studioDomainClientsExtension,
+        observabilityExtension,
+        trajectoryExtension,
+        ...(overrides.extensions ?? []),
+    ].map(wrap);
+    // Fail-fast(架构原则 §5):loader 按 id 去重是「先声明者胜」的静默行为,
+    // override 扩展若与内置清单撞 id 会被无声跳过(2026-07-21 studio
+    // 'panels.chat' 撞 panelsChatExtension,面板 Panel not mounted 的根因)。
+    // 这里显式告警,让撞车当场现形。
+    {
+        const seen = new Set();
+        for (const m of manifests) {
+            if (seen.has(m.id)) {
+                consoleLogger.warn(`[appHostBootstrap] duplicate extension id "${m.id}" — later declaration is silently SKIPPED by the loader; rename one side`);
+            }
+            seen.add(m.id);
+        }
+    }
+    await loader.load(manifests);
+    await loader.flush();
+    const catalogRuntime = createCatalogPageExtensionRuntime({ control, overriddenIds: overrideIds });
+    await catalogRuntime.start();
+    const dispose = async () => {
+        await catalogRuntime.dispose();
+        await loader.unload();
+        await control.dispose();
+    };
+    return { host, control, dispose };
+}

package/dist/package/node/application.js

@@ -0,0 +1,64 @@
+import { bootstrapAppHost, } from './appHostBootstrap.js';
+import { bootStageAppMounted } from './boot/driver.js';
+import { changeLanguage, initI18n } from './i18n/index.js';
+import { useShellStore } from './store.js';
+import { registerKeyboardRouterDeps, } from './lib/global-shortcuts.js';
+/**
+ * Lets a product replace one shell overlay with its own destination. Interface
+ * owns observation, clearing and synchronous reentry; the product owns routing.
+ * Installation does not reconcile current state; subsequent store notifications
+ * are observed. Product errors still propagate.
+ */
+export function installApplicationOverlayRedirect(overlayId, onRedirect) {
+    let redirecting = false;
+    return useShellStore.subscribe((state) => {
+        if (redirecting || state.activeOverlay !== overlayId)
+            return;
+        redirecting = true;
+        try {
+            useShellStore.getState().closeOverlay();
+            onRedirect();
+        }
+        finally {
+            redirecting = false;
+        }
+    });
+}
+/**
+ * Configures product-owned editor callbacks consumed by Interface's single
+ * keyboard router. Product assemblies use this public application boundary;
+ * the router implementation remains private to Interface.
+ */
+export function configureInterfaceKeyboardRouter(deps) {
+    registerKeyboardRouterDeps(deps);
+}
+/**
+ * Starts the shared Interface application runtime without selecting a product
+ * entry or product extensions. IDE and compatibility callers supply their own
+ * assembly overrides and render the resulting shell themselves.
+ */
+export async function startInterfaceApplication(overrides = {}, options = {}) {
+    // Locale is application-startup state: finish it synchronously before any
+    // extension setup or shell render can observe a mixed-language first frame.
+    initI18n();
+    if (options.locale !== undefined)
+        changeLanguage(options.locale);
+    const runtime = await bootstrapAppHost(overrides);
+    try {
+        bootStageAppMounted();
+        return runtime;
+    }
+    catch (error) {
+        try {
+            await runtime.dispose();
+        }
+        catch {
+            // Startup failure stays authoritative when rollback also fails.
+        }
+        throw error;
+    }
+}
+// Product boot injects the existing domain authority without importing store
+// internals. This is the same configuration function, not another client registry.
+export { configureStudioDomainClients, } from './store-parts/domain-clients.js';
+export { dispatchAction, registerAction } from './lib/action-registry.js';