@forgeax/interface 0.4.1

package/dist/package/node/boot/SettingsSection.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Sparkles, RefreshCw } from 'lucide-react';
+import { useTranslation } from '../i18n/index.js';
+import { Section } from '../components/SettingsPrimitives.js';
+import { SPLASH_THEMES, themeById } from './themes.js';
+import { useSplashConfig } from './store.js';
+import { DEFAULT_SPLASH } from './types.js';
+/**
+ * SettingsPanel section node for the boot splash.
+ *
+ * The boot splash itself is rendered by `index.html` BEFORE React mounts —
+ * this section only writes the persisted config. A "应用并刷新预览" button
+ * triggers a full reload so the player can actually see the splash they
+ * just configured (the inline script reads localStorage on page-load).
+ *
+ * AI / external clients can also POST /api/boot-splash to mutate this same
+ * config — the store reconciles server → client on mount and writes back
+ * on every save.
+ */
+export function BootSplashSection() {
+    const { t } = useTranslation();
+    const [cfg, setCfg] = useSplashConfig();
+    const update = (patch) => {
+        setCfg({ ...cfg, ...patch });
+    };
+    const active = themeById(cfg.theme);
+    const preview = useMemo(() => (_jsxs("div", { style: {
+            marginTop: 8,
+            padding: '10px 12px',
+            borderRadius: 8,
+            border: `1px solid ${active.swatch}44`,
+            background: `linear-gradient(135deg, ${active.swatch}10, transparent 70%), rgba(20,24,28,0.6)`,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+        }, "aria-label": "splash preview swatch", children: [_jsx("span", { style: {
+                    width: 9,
+                    height: 9,
+                    borderRadius: '50%',
+                    background: active.swatch,
+                    boxShadow: `0 0 8px ${active.swatch}88`,
+                    flexShrink: 0,
+                } }), _jsx("span", { style: { color: active.swatch, fontWeight: 600, fontSize: 13 }, children: cfg.title }), _jsx("span", { style: { marginLeft: 'auto', fontSize: 11, opacity: 0.55 }, children: cfg.subtitle })] })), [active, cfg.title, cfg.subtitle]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { icon: _jsx(Sparkles, { size: 14 }), title: t('boot.theme.title'), hint: t('boot.theme.hint'), children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: SPLASH_THEMES.map((theme) => {
+                            const checked = theme.id === cfg.theme;
+                            return (_jsxs("label", { style: {
+                                    display: 'flex',
+                                    alignItems: 'flex-start',
+                                    gap: 10,
+                                    padding: '8px 10px',
+                                    borderRadius: 6,
+                                    border: `1px solid ${checked ? theme.swatch + '55' : 'rgba(255,255,255,0.06)'}`,
+                                    background: checked ? `${theme.swatch}0d` : 'transparent',
+                                    cursor: 'pointer',
+                                }, children: [_jsx("input", { type: "radio", name: "splash-theme", checked: checked, onChange: () => update({ theme: theme.id }), style: { marginTop: 3, accentColor: theme.swatch } }), _jsx("span", { "aria-hidden": true, style: {
+                                            width: 10, height: 10, borderRadius: '50%',
+                                            background: theme.swatch,
+                                            boxShadow: `0 0 6px ${theme.swatch}88`,
+                                            flexShrink: 0,
+                                            marginTop: 5,
+                                        } }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: 600, color: checked ? theme.swatch : 'var(--text-secondary)' }, children: t(theme.labelKey) }), _jsx("span", { style: { fontSize: 11, opacity: 0.6, marginTop: 2 }, children: t(theme.descKey) })] })] }, theme.id));
+                        }) }), preview] }), _jsx(Section, { icon: _jsx(Sparkles, { size: 14 }), title: t('boot.copy.title'), hint: t('boot.copy.hint'), children: _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '90px 1fr', gap: 8, alignItems: 'center' }, children: [_jsx("label", { htmlFor: "splash-title", style: { fontSize: 12, opacity: 0.75 }, children: t('boot.copy.titleLabel') }), _jsx("input", { id: "splash-title", type: "text", value: cfg.title, onChange: (e) => update({ title: e.target.value }), placeholder: DEFAULT_SPLASH.title, style: inputStyle }), _jsx("label", { htmlFor: "splash-sub", style: { fontSize: 12, opacity: 0.75 }, children: t('boot.copy.subtitleLabel') }), _jsx("input", { id: "splash-sub", type: "text", value: cfg.subtitle, onChange: (e) => update({ subtitle: e.target.value }), placeholder: DEFAULT_SPLASH.subtitle, style: inputStyle })] }) }), _jsxs(Section, { icon: _jsx(Sparkles, { size: 14 }), title: t('boot.components.title'), hint: t('boot.components.hint'), children: [_jsxs("label", { style: toggleStyle, children: [_jsx("input", { type: "checkbox", checked: cfg.showProgressBar, onChange: (e) => update({ showProgressBar: e.target.checked }) }), _jsx("span", { children: t('boot.components.showProgressBar') }), _jsx("span", { style: { opacity: 0.5, fontSize: 11, marginLeft: 8 }, children: t('boot.components.showProgressBarHint') })] }), _jsxs("label", { style: toggleStyle, children: [_jsx("input", { type: "checkbox", checked: cfg.showBusInventory, onChange: (e) => update({ showBusInventory: e.target.checked }) }), _jsx("span", { children: t('boot.components.showBusInventory') }), _jsx("span", { style: { opacity: 0.5, fontSize: 11, marginLeft: 8 }, children: t('boot.components.showBusInventoryHint') })] })] }), _jsx(Section, { icon: _jsx(RefreshCw, { size: 14 }), title: t('boot.apply.title'), children: _jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsxs("button", { type: "button", className: "settings-edit-btn", onClick: () => window.location.reload(), title: t('boot.apply.reloadTooltip'), children: [_jsx(RefreshCw, { size: 12 }), " ", t('boot.apply.reloadButton')] }), _jsx("button", { type: "button", className: "settings-edit-btn", onClick: () => setCfg({ ...DEFAULT_SPLASH }), title: t('boot.apply.resetTooltip'), children: t('boot.apply.resetButton') }), _jsxs("span", { style: { fontSize: 11, opacity: 0.5, marginLeft: 'auto' }, children: [t('boot.apply.apiHintBefore'), " ", _jsx("code", { style: { background: 'rgba(255,255,255,0.04)', padding: '1px 4px', borderRadius: 3 }, children: "/api/boot-splash" }), " ", t('boot.apply.apiHintAfter')] })] }) })] }));
+}
+const inputStyle = {
+    background: 'rgba(0,0,0,0.4)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    borderRadius: 5,
+    padding: '6px 9px',
+    color: 'var(--text-primary)',
+    fontSize: 12,
+    fontFamily: 'inherit',
+    outline: 'none',
+};
+const toggleStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    padding: '6px 0',
+    fontSize: 12,
+    cursor: 'pointer',
+};

package/dist/package/node/boot/broadcast.js

@@ -0,0 +1,32 @@
+// interface 广播流 boot 接线 —— 每页 boot 调一次 `bootBroadcast()`，拉起唯一公共 `/ws`
+// 广播连接，并挂上 app-agnostic 的两类帧处理：
+//   - `telemetry`         → 喂 telemetry slice（观测；P3 会随观测面下沉到 app）
+//   - `telemetry` → 喂 telemetry slice
+//
+// daemon-tick-* 帧不在这里处理 —— 那是 chat 的事，chat boot 调 subscribeDaemonTick()
+// 自行订阅同一条广播流（见 packages/chat/src/session-store/daemon-tick.ts）。
+//
+// 取代了原 store.ts 里 module-load 自动 connectDaemonWs 的反模式：现在「建 socket」
+// 由 boot 显式发起、全页单例，import store 不再有开 socket 的副作用。
+import { connect, subscribeBroadcast } from '../lib/broadcast-stream.js';
+import { useShellStore } from '../store.js';
+const _BOOT_FLAG = '__FORGEAX_BOOT_BROADCAST__';
+/** 幂等：多个 boot 路径/HMR 重复调只接线一次；connect 本身也幂等。 */
+export function bootBroadcast() {
+    if (typeof window === 'undefined')
+        return;
+    const gt = globalThis;
+    if (!gt[_BOOT_FLAG]) {
+        gt[_BOOT_FLAG] = true;
+        // Telemetry (trace+log) 主信道：node sidecar → server → WS `{type:'telemetry', records}`。
+        subscribeBroadcast('telemetry', (m) => {
+            const records = Array.isArray(m.records)
+                ? (m.records)
+                : [];
+            if (records.length)
+                useShellStore.getState().pushTelemetry(records);
+        });
+    }
+    // 每次都确保连接活着（幂等）。
+    connect();
+}

package/dist/package/node/boot/driver.js

@@ -0,0 +1,47 @@
+/**
+ * Boot driver — the React-side half of the boot splash handshake.
+ *
+ * The inline bootstrap in index.html exposes `window.__forgeaxBoot` with two
+ * methods: `progress({pct, label})` and `done()`. While React is mounting we
+ * call these to drive the visible progress bar; after the first paint we
+ * fire `done()` so the splash fades out and the studio takes over.
+ *
+ * The contract is one-way and lossy: missing window.__forgeaxBoot (e.g. user
+ * loaded a stripped index.html) is silently ignored — the studio still works,
+ * just without splash control.
+ */
+function bootApi() {
+    if (typeof window === 'undefined')
+        return null;
+    return window.__forgeaxBoot ?? null;
+}
+/**
+ * Called at the top of main.tsx (before createRoot.render) to mark "JS is
+ * executing, React is about to mount".
+ */
+export function bootStageEntry() {
+    bootApi()?.progress({ pct: 60, label: 'mounting shell' });
+}
+/**
+ * Called from <App/>'s first useEffect to mark "React tree is wired and
+ * client-side effects are firing". One rAF later we declare done().
+ */
+export function bootStageAppMounted() {
+    const api = bootApi();
+    if (!api)
+        return;
+    api.progress({ pct: 92, label: 'wiring panels' });
+    // Wait for the first composited paint so the splash fade lines up with
+    // the real studio appearing underneath — otherwise the player sees a
+    // brief blank flash.
+    if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
+        api.done();
+        return;
+    }
+    window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+            api.progress({ pct: 100, label: 'ready' });
+            api.done();
+        });
+    });
+}

package/dist/package/node/boot/store.js

@@ -0,0 +1,114 @@
+/**
+ * Boot splash config store.
+ *
+ * Source of truth lives in two places:
+ *  - localStorage `forgeax.boot.splash.v1` — read synchronously by the inline
+ *    bootstrap in index.html BEFORE React mounts, so the chosen theme paints
+ *    on the first frame.
+ *  - `<projectRoot>/.forgeax/boot-splash.json` — persisted server-side so AI
+ *    in ChatPanel can `curl POST /api/boot-splash` and the change carries
+ *    across browsers / clean localStorage.
+ *
+ * On Settings panel mount we GET /api/boot-splash and reconcile to localStorage
+ * (server wins). On any save in Settings we write localStorage AND POST to the
+ * server. The inline bootstrap only ever reads localStorage — server fetch
+ * during boot is too slow.
+ */
+import { useEffect, useSyncExternalStore } from 'react';
+import { DEFAULT_SPLASH, SPLASH_STORAGE_KEY, isValidSplashConfig, } from './types.js';
+let cached = DEFAULT_SPLASH;
+let initialized = false;
+const listeners = new Set();
+function readLocal() {
+    if (typeof window === 'undefined')
+        return DEFAULT_SPLASH;
+    try {
+        const raw = window.localStorage.getItem(SPLASH_STORAGE_KEY);
+        if (!raw)
+            return DEFAULT_SPLASH;
+        const parsed = JSON.parse(raw);
+        return isValidSplashConfig(parsed) ? parsed : DEFAULT_SPLASH;
+    }
+    catch {
+        return DEFAULT_SPLASH;
+    }
+}
+function writeLocal(c) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.setItem(SPLASH_STORAGE_KEY, JSON.stringify(c));
+    }
+    catch {
+        /* localStorage may throw in privacy mode — silently ignore, server still holds the truth */
+    }
+}
+function emit() {
+    for (const fn of listeners)
+        fn();
+}
+function ensureInit() {
+    if (initialized)
+        return;
+    initialized = true;
+    cached = readLocal();
+}
+export const bootSplashStore = {
+    get() {
+        ensureInit();
+        return cached;
+    },
+    set(next) {
+        ensureInit();
+        cached = next;
+        writeLocal(next);
+        emit();
+    },
+    subscribe(fn) {
+        listeners.add(fn);
+        return () => {
+            listeners.delete(fn);
+        };
+    },
+};
+/**
+ * React hook exposing the current splash config + a setter. Setter writes
+ * localStorage immediately AND fires a POST to /api/boot-splash so AI's
+ * server-side view stays in sync. Server failure is silent — the user can
+ * still iterate locally; AI just won't see the change until next save.
+ */
+export function useSplashConfig() {
+    const value = useSyncExternalStore(bootSplashStore.subscribe, bootSplashStore.get, bootSplashStore.get);
+    // On first mount, reconcile from server (server wins if it has a saved file).
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            try {
+                const r = await fetch('/api/boot-splash');
+                if (!r.ok)
+                    return;
+                const j = (await r.json());
+                if (cancelled)
+                    return;
+                if (j.config && isValidSplashConfig(j.config)) {
+                    bootSplashStore.set(j.config);
+                }
+            }
+            catch {
+                /* server down — keep local copy */
+            }
+        })();
+        return () => { cancelled = true; };
+    }, []);
+    const setter = (next) => {
+        bootSplashStore.set(next);
+        // Fire-and-forget server save. AI reads from the same endpoint, so this
+        // keeps server side in sync. Errors don't block the UI.
+        void fetch('/api/boot-splash', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(next),
+        }).catch(() => { });
+    };
+    return [value, setter];
+}

package/dist/package/node/boot/themes.js

@@ -0,0 +1,21 @@
+export const SPLASH_THEMES = [
+    {
+        id: 'classic-lime',
+        label: 'Classic Lime',
+        labelKey: 'themes.classicLime.label',
+        swatch: '#d4ff48',
+        desc: 'Current style · lime accent + horizontal progress bar',
+        descKey: 'themes.classicLime.desc',
+    },
+    {
+        id: 'neon-pulse',
+        label: 'Neon Pulse',
+        labelKey: 'themes.neonPulse.label',
+        swatch: '#7dd3fc',
+        desc: 'Radial pulse animation + full-screen logo + arc progress bar',
+        descKey: 'themes.neonPulse.desc',
+    },
+];
+export function themeById(id) {
+    return SPLASH_THEMES.find((t) => t.id === id) ?? SPLASH_THEMES[0];
+}

package/dist/package/node/boot/types.js

@@ -0,0 +1,30 @@
+/**
+ * Boot splash config — small enough to live in localStorage AND server-side
+ * `.forgeax/boot-splash.json`. Schema versioned so future fields don't break
+ * older saves (load() drops anything with `v !== current` back to defaults).
+ *
+ * The inline splash bootstrap in `index.html` reads the localStorage entry
+ * BEFORE React loads, so this shape must stay JSON-serializable and free of
+ * any TS-side dependencies.
+ */
+export const SPLASH_SCHEMA_VERSION = 1;
+export const DEFAULT_SPLASH = {
+    v: SPLASH_SCHEMA_VERSION,
+    theme: 'classic-lime',
+    title: 'forgeax · Studio',
+    subtitle: 'booting shell…',
+    showProgressBar: true,
+    showBusInventory: false,
+};
+export const SPLASH_STORAGE_KEY = 'forgeax.boot.splash.v1';
+export function isValidSplashConfig(x) {
+    if (!x || typeof x !== 'object')
+        return false;
+    const o = x;
+    return (o.v === SPLASH_SCHEMA_VERSION &&
+        (o.theme === 'classic-lime' || o.theme === 'neon-pulse') &&
+        typeof o.title === 'string' &&
+        typeof o.subtitle === 'string' &&
+        typeof o.showProgressBar === 'boolean' &&
+        typeof o.showBusInventory === 'boolean');
+}

package/dist/package/node/brand/BrandProvider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BrandProvider + useBrand — React-side brand pack consumer.
+ *
+ * Wraps the app in main.tsx. Inside the tree, call `useBrand()` to read the
+ * active pack synchronously. Code outside React (module scope, store, vite
+ * plugin) should call `getBrandSync()` from ./runtime instead.
+ *
+ * The provider trusts `window.__BRAND__` (injected by vite-plugin-brand at
+ * dev/build time). It does not fetch /api/brand — the inline injection is
+ * synchronous and avoids a flash of un-branded content.
+ */
+import { createContext, useContext, useMemo } from 'react';
+import { getBrandRuntimeSync, getBrandAssetUrl } from './runtime.js';
+const BrandContext = createContext(null);
+export function BrandProvider({ children }) {
+    const value = useMemo(() => getBrandRuntimeSync(), []);
+    return _jsx(BrandContext.Provider, { value: value, children: children });
+}
+export function useBrand() {
+    const ctx = useContext(BrandContext);
+    if (ctx)
+        return ctx.config;
+    return getBrandRuntimeSync().config;
+}
+export function useBrandRuntime() {
+    const ctx = useContext(BrandContext);
+    if (ctx)
+        return ctx;
+    return getBrandRuntimeSync();
+}
+export function useBrandAsset(key) {
+    // Re-derive on every render; getBrandAssetUrl is pure and cheap.
+    return getBrandAssetUrl(key);
+}

package/dist/package/node/brand/index.js

@@ -0,0 +1,3 @@
+export { BrandProvider, useBrand, useBrandRuntime, useBrandAsset } from './BrandProvider.js';
+export { getBrandSync, getBrandRuntimeSync, getBrandAssetUrl } from './runtime.js';
+export { BRAND_SCHEMA_VERSION } from './types.js';

package/dist/package/node/brand/runtime.js

@@ -0,0 +1,71 @@
+/**
+ * Module-scope brand runtime.
+ *
+ * The vite plugin injects `window.__BRAND__` inline in `index.html` BEFORE
+ * the `main.tsx` module fetch starts, so `getBrandSync()` remains safe for
+ * early module callers.
+ *
+ * If `window.__BRAND__` is missing (e.g. the user stripped the inline script,
+ * or unit tests), `getBrandSync()` falls back to a hard-coded ForgeaX stub so
+ * UI code never throws. The fallback intentionally mirrors
+ * `brand/defaults.forgeax.json` — keep it in sync if you ever change the
+ * canonical defaults.
+ */
+const FALLBACK = {
+    id: 'forgeax',
+    schemaVersion: 1,
+    product: {
+        name: 'ForgeaX Studio',
+        shortName: 'forgeax',
+        tagline: 'AI-first game dev shell — open desktop edition',
+    },
+    assistant: {
+        name: 'Forge',
+        avatarSrc: null,
+        cardName: { zh: '主线制作人', en: 'Lead Producer' },
+    },
+    splash: {
+        title: 'ForgeaX · Studio',
+        subtitle: 'booting shell…',
+        theme: 'classic-lime',
+    },
+    providers: {
+        native: { id: 'forgeax', label: 'forgeax', title: 'ForgeaX native CLI provider' },
+    },
+    links: {
+        repoUrl: 'https://github.com/ForgeaXGame/forgeax-studio',
+        communityUrl: 'https://forge.games',
+    },
+    assets: {
+        favicon: 'assets/favicon.svg',
+        logo: 'assets/logo.svg',
+    },
+};
+const FALLBACK_RUNTIME = {
+    config: FALLBACK,
+    source: { kind: 'default' },
+    assetBaseUrl: '/brand/',
+};
+export function getBrandRuntimeSync() {
+    if (typeof window !== 'undefined' && window.__BRAND__) {
+        return window.__BRAND__;
+    }
+    return FALLBACK_RUNTIME;
+}
+export function getBrandSync() {
+    return getBrandRuntimeSync().config;
+}
+export function getBrandAssetUrl(asset) {
+    const rt = getBrandRuntimeSync();
+    const map = {
+        favicon: rt.config.assets?.favicon,
+        logo: rt.config.assets?.logo,
+        avatar: rt.config.assistant.avatarSrc,
+    };
+    const rel = map[asset];
+    if (!rel)
+        return null;
+    // assets is published under `<base>/<asset-relative>` by the vite plugin.
+    const base = rt.assetBaseUrl.endsWith('/') ? rt.assetBaseUrl : `${rt.assetBaseUrl}/`;
+    return `${base}${rel.replace(/^\.?\/+/, '')}`;
+}

package/dist/package/node/brand/types.js

@@ -0,0 +1,9 @@
+/**
+ * Brand pack — interface-side type mirror.
+ *
+ * Structurally identical to `packages/server/src/brand/types.ts`. Kept as a
+ * standalone copy because vite + react interface is a separate package and
+ * does not depend on server. If you change a field, update both files (and
+ * `brand/schema.json` + `brand/defaults.forgeax.json`).
+ */
+export const BRAND_SCHEMA_VERSION = 1;

package/dist/package/node/components/ActivityRail/ActivityRail.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { MoreHorizontal, Pin, Search } from 'lucide-react';
+import { useHost } from '../../core/app-shell/index.js';
+import { STORAGE_KEYS } from '../../lib/storageKeys.js';
+import { lucideIconOrBox } from '../../lib/lucide-icon.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
+import { useTranslation } from '../../i18n/index.js';
+import { activityRailCategory, addDefaultPinnedActivity, defaultPinnedActivityIds, groupDiscoverableActivities, localizeActivityRailEntries, migrateLegacyPinnedActivityIds, pinnedActivities, } from './activity-rail-model.js';
+
+function readStoredIds(key) {
+    try {
+        const value = localStorage.getItem(key);
+        if (value === null)
+            return null;
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.filter((id) => typeof id === 'string') : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writePinned(ids) {
+    try {
+        localStorage.setItem(STORAGE_KEYS.activityRailPinned, JSON.stringify(ids));
+    }
+    catch { /* quota */ }
+}
+function readMigrationFlag(key) {
+    try {
+        return localStorage.getItem(key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeMigrationFlag(key) {
+    try {
+        localStorage.setItem(key, '1');
+    }
+    catch { /* quota */ }
+}
+export function ActivityRail() {
+    const { t, i18n } = useTranslation();
+    const host = useHost();
+    const catalog = useSyncExternalStore(host.activities.subscribe, host.activities.getSnapshot, host.activities.getSnapshot);
+    const pages = useSyncExternalStore(host.pages.subscribe, host.pages.getSnapshot, host.pages.getSnapshot);
+    const [savedPinned, setSavedPinned] = useState(() => readStoredIds(STORAGE_KEYS.activityRailPinned));
+    const [moreOpen, setMoreOpen] = useState(false);
+    const [moreQuery, setMoreQuery] = useState('');
+    const [rovingId, setRovingId] = useState();
+    const moreSearchRef = useRef(null);
+    const firstMoreActionRef = useRef(null);
+    const pinnedRefs = useRef([]);
+    const migrationComplete = useRef(savedPinned !== null);
+    const videoGameDefaultMigrationComplete = useRef(readMigrationFlag(STORAGE_KEYS.activityRailPinnedVideoGameDefault));
+    const activities = useMemo(() => localizeActivityRailEntries(catalog.activities, i18n.language), [catalog.activities, i18n.language]);
+    const defaultPinnedIds = useMemo(() => defaultPinnedActivityIds(activities), [activities]);
+    const pinnedIds = savedPinned ?? defaultPinnedIds;
+    const pinned = useMemo(() => pinnedActivities(activities, pinnedIds), [activities, pinnedIds]);
+    const builtinPinned = useMemo(() => pinned.filter((activity) => activity.sourceLayer === 'builtin'), [pinned]);
+    const pluginPinned = useMemo(() => pinned.filter((activity) => activity.sourceLayer !== 'builtin'), [pinned]);
+    const groups = useMemo(() => groupDiscoverableActivities(activities, moreQuery), [activities, moreQuery]);
+    const activeTypeId = pages.instances.find((page) => page.encodedKey === pages.activeKey)?.typeId;
+    const activeActivityId = activities.find((activity) => activity.pageTypeId === activeTypeId)?.id;
+    const activePinned = pinned.some((activity) => activity.id === activeActivityId);
+    const moreActive = moreOpen || Boolean(activeActivityId && !activePinned);
+    useEffect(() => {
+        if (migrationComplete.current || activities.length === 0)
+            return;
+        const legacyIds = readStoredIds(STORAGE_KEYS.activityRailPinnedLegacyV1);
+        if (legacyIds === null) {
+            migrationComplete.current = true;
+            return;
+        }
+        if (!activities.some((activity) => activity.sourceLayer !== 'builtin'))
+            return;
+        const next = migrateLegacyPinnedActivityIds(legacyIds, activities);
+        migrationComplete.current = true;
+        setSavedPinned(next);
+        writePinned(next);
+    }, [activities]);
+    useEffect(() => {
+        if (videoGameDefaultMigrationComplete.current || savedPinned === null || activities.length === 0)
+            return;
+        const next = addDefaultPinnedActivity(savedPinned, activities, 'video-game');
+        videoGameDefaultMigrationComplete.current = true;
+        writeMigrationFlag(STORAGE_KEYS.activityRailPinnedVideoGameDefault);
+        if (next.length === savedPinned.length)
+            return;
+        setSavedPinned(next);
+        writePinned(next);
+    }, [activities, savedPinned]);
+    useEffect(() => {
+        if (pinned.length === 0) {
+            setRovingId(undefined);
+            return;
+        }
+        if (rovingId && pinned.some((activity) => activity.id === rovingId))
+            return;
+        setRovingId(pinned.find((activity) => activity.id === activeActivityId)?.id
+            ?? pinned[0]?.id);
+    }, [activeActivityId, pinned, rovingId]);
+    const togglePin = useCallback((id) => {
+        setSavedPinned((current) => {
+            const resolved = current ?? defaultPinnedIds;
+            const next = resolved.includes(id)
+                ? resolved.filter((candidate) => candidate !== id)
+                : [...resolved, id];
+            writePinned(next);
+            return next;
+        });
+    }, [defaultPinnedIds]);
+    const onPinnedKeyDown = (event, index) => {
+        const count = pinned.length;
+        if (count === 0)
+            return;
+        let target;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight')
+            target = (index + 1) % count;
+        else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft')
+            target = (index - 1 + count) % count;
+        else if (event.key === 'Home')
+            target = 0;
+        else if (event.key === 'End')
+            target = count - 1;
+        else
+            return;
+        event.preventDefault();
+        const activity = pinned[target];
+        if (!activity)
+            return;
+        setRovingId(activity.id);
+        pinnedRefs.current[target]?.focus();
+    };
+    const pinnedButton = (activity, index) => {
+        const active = activity.pageTypeId === activeTypeId;
+        const Icon = lucideIconOrBox(activity.icon);
+        const category = activityRailCategory(activity);
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { ref: (element) => { pinnedRefs.current[index] = element; }, type: "button", className: `activity-rail-item${active ? ' active' : ''}`, "aria-label": activity.title, "aria-current": active ? 'page' : undefined, tabIndex: activity.id === rovingId ? 0 : -1, "data-activity-id": activity.id, onFocus: () => setRovingId(activity.id), onKeyDown: (event) => onPinnedKeyDown(event, index), onClick: () => void host.activities.launch(activity.id), children: [_jsx("span", { className: "activity-rail-item-ic", "aria-hidden": true, children: _jsx(Icon, { size: 22, strokeWidth: 1.7 }) }), _jsx("span", { className: "activity-rail-item-lb", children: activity.title })] }) }), _jsxs(TooltipContent, { side: "right", sideOffset: 10, className: "activity-rail-plugin-tip", children: [_jsx("div", { className: "activity-rail-plugin-tip-title", children: activity.title }), _jsx("div", { className: "activity-rail-plugin-tip-category", children: t(`sidebar.categories.${category}`) }), activity.description ? (_jsx("div", { className: "activity-rail-plugin-tip-description", children: activity.description })) : null] })] }, activity.id));
+    };
+    return (_jsx(TooltipProvider, { delayDuration: 260, skipDelayDuration: 80, children: _jsxs("nav", { className: "activity-rail thin-scrollbar", "aria-label": t('sidebar.extensionsHint'), "data-fx-slot": "ActivityRail", children: [_jsx("div", { className: "activity-rail-group", "data-category": "builtin", role: "toolbar", "aria-orientation": "vertical", "aria-label": t('sidebar.extensionsHint'), children: builtinPinned.map((activity) => pinnedButton(activity, pinned.indexOf(activity))) }), _jsx("div", { className: "activity-rail-group", "data-category": "pinned", role: "toolbar", "aria-orientation": "vertical", "aria-label": t('sidebar.extensionsHint'), children: pluginPinned.map((activity) => pinnedButton(activity, pinned.indexOf(activity))) }), _jsx("div", { className: "activity-rail-group activity-rail-group--more", children: _jsxs(Popover, { open: moreOpen, onOpenChange: (open) => {
+                            setMoreOpen(open);
+                            if (!open)
+                                setMoreQuery('');
+                        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `activity-rail-item${moreActive ? ' active' : ''}`, title: t('sidebar.morePluginsHint'), "aria-label": t('sidebar.morePluginsHint'), "aria-haspopup": "dialog", "aria-expanded": moreOpen, "data-rail-action": "more-plugins", children: [_jsx("span", { className: "activity-rail-item-ic", "aria-hidden": true, children: _jsx(MoreHorizontal, { size: 22, strokeWidth: 1.7 }) }), _jsx("span", { className: "activity-rail-item-lb", children: t('sidebar.morePlugins') })] }) }), _jsxs(PopoverContent, { side: "right", align: "end", sideOffset: 10, className: "activity-rail-more", onOpenAutoFocus: (event) => {
+                                    event.preventDefault();
+                                    moreSearchRef.current?.focus();
+                                }, children: [_jsx("div", { className: "activity-rail-more-hd", children: t('sidebar.morePlugins') }), _jsxs("div", { className: "activity-rail-more-search", children: [_jsx(Search, { size: 14, strokeWidth: 1.8, "aria-hidden": true }), _jsx("input", { ref: moreSearchRef, type: "search", className: "activity-rail-more-search-input", value: moreQuery, onChange: (event) => setMoreQuery(event.target.value), onKeyDown: (event) => {
+                                                    if (event.key === 'ArrowDown') {
+                                                        event.preventDefault();
+                                                        firstMoreActionRef.current?.focus();
+                                                    }
+                                                }, placeholder: t('sidebar.searchPlugins'), "aria-label": t('sidebar.searchPlugins') })] }), _jsx("div", { className: "activity-rail-more-body thin-scrollbar", children: groups.length === 0 ? (_jsx("div", { className: "activity-rail-more-empty", children: t('sidebar.noMatchingPlugins') })) : groups.map((group, groupIndex) => (_jsxs("section", { className: "activity-rail-more-sec", children: [_jsx("div", { className: "activity-rail-more-sec-hd", children: t(`sidebar.categories.${group.category}`) }), group.items.map((activity, itemIndex) => {
+                                                    const isPinned = pinnedIds.includes(activity.id);
+                                                    const active = activity.pageTypeId === activeTypeId;
+                                                    const Icon = lucideIconOrBox(activity.icon);
+                                                    return (_jsxs("div", { className: `activity-rail-more-row${active ? ' active' : ''}${isPinned ? ' pinned' : ''}`, children: [_jsxs("button", { ref: groupIndex === 0 && itemIndex === 0 ? firstMoreActionRef : undefined, type: "button", className: "activity-rail-more-open", onClick: async () => {
+                                                                    await host.activities.launch(activity.id);
+                                                                    setMoreOpen(false);
+                                                                }, title: activity.description || activity.title, "aria-current": active ? 'page' : undefined, children: [_jsx("span", { className: "activity-rail-more-ic", "aria-hidden": true, children: _jsx(Icon, { size: 16, strokeWidth: 1.7 }) }), _jsxs("span", { className: "activity-rail-more-meta", children: [_jsx("span", { className: "activity-rail-more-name", children: activity.title }), activity.description ? (_jsx("span", { className: "activity-rail-more-desc", children: activity.description })) : null] })] }), _jsx("button", { type: "button", className: `activity-rail-more-pin${isPinned ? ' on' : ''}`, onClick: () => togglePin(activity.id), title: isPinned ? t('sidebar.unpinPlugin') : t('sidebar.pinPlugin'), "aria-label": `${isPinned ? t('sidebar.unpinPlugin') : t('sidebar.pinPlugin')}: ${activity.title}`, "aria-pressed": isPinned, children: _jsx(Pin, { size: 14, strokeWidth: isPinned ? 2.2 : 1.6 }) })] }, activity.id));
+                                                })] }, group.category))) })] })] }) })] }) }));
+}