@forgeax/interface 0.4.1

package/dist/package/browser/components/Onboarding/prepareTourShell.d.ts

@@ -0,0 +1,5 @@
+import type { AppHost } from '../../core/app-shell';
+/** Latch a reset before the Page dock mounts. */
+export declare function latchTourShellDefaults(): void;
+/** Open the real project editor Page used by the tour and reset its layout. */
+export declare function prepareTourShell(host: AppHost): void;

package/dist/package/browser/components/Onboarding/prepareTourShell.js

@@ -0,0 +1,11 @@
+import { bumpDockResetEpoch } from '../DockShell/dockResetEpoch';
+/** Latch a reset before the Page dock mounts. */
+export function latchTourShellDefaults() {
+    bumpDockResetEpoch();
+}
+/** Open the real project editor Page used by the tour and reset its layout. */
+export function prepareTourShell(host) {
+    void host.pages.open({ typeId: '@forgeax/editor#page/level' })
+        .then(() => host.commands.execute('app.dock.reset'))
+        .catch(() => undefined);
+}

package/dist/package/browser/components/Onboarding/project-name.d.ts

@@ -0,0 +1,17 @@
+/** Turn a free-typed project name into a game slug (GAME_SLUG_RE: lowercase
+ *  ascii/digits/hyphens, 1-41). Underscores are NOT allowed for game slugs. */
+export declare function toGameSlug(name: string): string;
+/**
+ * Session layout may create `.forgeax/games/default/` (sessions only, no
+ * forge.json) before the user has any real project. Never offer that sentinel
+ * in onboarding's "已有项目" list — an empty instance should hide the section.
+ */
+export declare function isUserExistingGame(slug: string): boolean;
+/**
+ * If the user typed a usable name (slug ≥1 after normalize), keep it.
+ * Otherwise allocate `untitled-1`, `untitled-2`, … skipping taken slugs.
+ */
+export declare function resolveProjectName(rawName: string, existingSlugs?: Iterable<string>): {
+    name: string;
+    slug: string;
+};

package/dist/package/browser/components/Onboarding/project-name.js

@@ -0,0 +1,29 @@
+/** Turn a free-typed project name into a game slug (GAME_SLUG_RE: lowercase
+ *  ascii/digits/hyphens, 1-41). Underscores are NOT allowed for game slugs. */
+export function toGameSlug(name) {
+    return name.trim().toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
+}
+/**
+ * Session layout may create `.forgeax/games/default/` (sessions only, no
+ * forge.json) before the user has any real project. Never offer that sentinel
+ * in onboarding's "已有项目" list — an empty instance should hide the section.
+ */
+export function isUserExistingGame(slug) {
+    return slug !== 'default';
+}
+/**
+ * If the user typed a usable name (slug ≥1 after normalize), keep it.
+ * Otherwise allocate `untitled-1`, `untitled-2`, … skipping taken slugs.
+ */
+export function resolveProjectName(rawName, existingSlugs = []) {
+    const slug = toGameSlug(rawName);
+    if (slug.length >= 1) {
+        return { name: rawName.trim() || slug, slug };
+    }
+    const taken = new Set(existingSlugs);
+    let n = 1;
+    while (taken.has(`untitled-${n}`))
+        n += 1;
+    const auto = `untitled-${n}`;
+    return { name: auto, slug: auto };
+}

package/dist/package/browser/components/Onboarding/types.d.ts

@@ -0,0 +1,31 @@
+/** Ordered top-level phases. `done` = onboarding fully dismissed/completed. */
+export type OnboardingPhase = 'welcome' | 'project' | 'home' | 'done';
+export declare const PHASE_ORDER: readonly OnboardingPhase[];
+/** The slice we persist to localStorage[STORAGE_KEYS.onboarding]. Kept minimal:
+ *  it records progress + the completed milestones so a returning user resumes
+ *  where they left off (and never re-sees a completed step). */
+export interface OnboardingPersisted {
+    /** schema version — bump when this shape changes incompatibly. */
+    v: 2;
+    /** furthest phase reached (resume point). */
+    phase: OnboardingPhase;
+    /** per-milestone completion, for the side "state machine" affordance + resume. */
+    done: {
+        tour: boolean;
+        firstChat: boolean;
+    };
+}
+/**
+ * Load persisted onboarding state, migrating the legacy boolean "seen" flag:
+ * users who already dismissed the old FirstRunSetup must NOT be shown the new
+ * wizard — treat them as fully done.
+ */
+export declare function loadOnboarding(): OnboardingPersisted;
+export declare function saveOnboarding(state: OnboardingPersisted): void;
+/**
+ * Live onboarding phase for the shell gate (§14 three-state boot): App renders
+ * ONLY the onboarding during welcome/project (init state, no shell), then the
+ * full shell at home/done. Re-reads on APP_EVENTS.onboardingChanged (dispatched
+ * by the controller on every phase change) + cross-tab `storage`.
+ */
+export declare function useOnboardingPhase(): OnboardingPhase;

package/dist/package/browser/components/Onboarding/types.js

@@ -0,0 +1,77 @@
+// Onboarding state machine (design §11). Closed union — every phase is
+// enumerated so the controller can never be in an "other" state. The RUNTIME
+// state (which sub-modal is open, connectivity-check result, countdown) is
+// ephemeral React state; only the PERSISTED slice below survives reloads.
+import { useEffect, useState } from 'react';
+import { installCustomEventObservation, installStorageObservation, } from '@forgeax/app-shell/react';
+import { APP_EVENTS, STORAGE_KEYS } from '../../lib/storageKeys';
+export const PHASE_ORDER = ['welcome', 'project', 'home'];
+const DEFAULT_STATE = {
+    v: 2,
+    phase: 'welcome',
+    done: { tour: false, firstChat: false },
+};
+/**
+ * Load persisted onboarding state, migrating the legacy boolean "seen" flag:
+ * users who already dismissed the old FirstRunSetup must NOT be shown the new
+ * wizard — treat them as fully done.
+ */
+export function loadOnboarding() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEYS.onboarding);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (parsed && parsed.v === 2 && parsed.phase) {
+                return {
+                    v: 2,
+                    phase: parsed.phase,
+                    done: { tour: !!parsed.done?.tour, firstChat: !!parsed.done?.firstChat },
+                };
+            }
+        }
+        // Legacy migration: old boolean flag means "already onboarded" → done.
+        if (localStorage.getItem(STORAGE_KEYS.onboardingSeenLegacy)) {
+            const migrated = { v: 2, phase: 'done', done: { tour: true, firstChat: true } };
+            saveOnboarding(migrated);
+            return migrated;
+        }
+    }
+    catch { /* corrupt / unavailable storage — fall through to defaults */ }
+    return { ...DEFAULT_STATE, done: { ...DEFAULT_STATE.done } };
+}
+export function saveOnboarding(state) {
+    try {
+        localStorage.setItem(STORAGE_KEYS.onboarding, JSON.stringify(state));
+        // Keep the legacy flag set once done so any code still reading it (or a
+        // downgrade) treats the user as onboarded.
+        if (state.phase === 'done')
+            localStorage.setItem(STORAGE_KEYS.onboardingSeenLegacy, '1');
+    }
+    catch { /* ignore */ }
+}
+/**
+ * Live onboarding phase for the shell gate (§14 three-state boot): App renders
+ * ONLY the onboarding during welcome/project (init state, no shell), then the
+ * full shell at home/done. Re-reads on APP_EVENTS.onboardingChanged (dispatched
+ * by the controller on every phase change) + cross-tab `storage`.
+ */
+export function useOnboardingPhase() {
+    const [phase, setPhase] = useState(() => loadOnboarding().phase);
+    useEffect(() => {
+        const sync = () => setPhase(loadOnboarding().phase);
+        const disposeOnboardingObservation = installCustomEventObservation({
+            target: window,
+            eventType: APP_EVENTS.onboardingChanged,
+            onEvent: sync,
+        });
+        const disposeStorageObservation = installStorageObservation({
+            target: window,
+            onStorage: sync,
+        });
+        return () => {
+            disposeOnboardingObservation();
+            disposeStorageObservation();
+        };
+    }, []);
+    return phase;
+}

package/dist/package/browser/components/PageTabs/PageTabStrip.css

@@ -0,0 +1,221 @@
+/* Document tab strip — ported from the studio-demo docTabBar. Theme tokens
+   only (no raw hex/rgba); brand-soft → --color-interaction-selected-brand,
+   brand-line → --color-brand-primary-soft. */
+.page-tab-strip {
+  --page-tab-h: 34px;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  height: 36px;
+  background: var(--color-background-canvas);
+  border-bottom: 1px solid var(--color-divider-default);
+}
+
+.page-tab-scope {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  flex: 1;
+  padding: 0 6px 0 8px;
+  gap: 6px;
+}
+
+/* Tab row shrinks to content so "+" hugs the last tab; on overflow the row
+   scrolls internally while "+" and the actions stay put. */
+.page-tab-list {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.page-tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.page-tab-strip .page-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: calc(var(--page-tab-h) - 5px);
+  min-width: 120px;
+  max-width: 220px;
+  padding: 0 8px 0 9px;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 7px 7px 0 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  transition:
+    background var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+.page-tab:hover {
+  background: var(--color-interaction-hover);
+  color: var(--color-text-primary);
+}
+/* Active wins on hover too — the selected highlight (lime top bar + raised
+   surface) must never be swallowed by the hover background. */
+.page-tab.is-active,
+.page-tab.is-active:hover {
+  background: var(--color-background-elevated);
+  border-color: var(--color-border-subtle);
+  color: var(--color-text-primary);
+  box-shadow: inset 0 2px 0 var(--color-brand-primary);
+}
+.page-tab.is-drag {
+  opacity: 0.45;
+}
+/* Inactive tabs are transparent and sit only 2px apart, so a run of them reads
+   as one undivided block. Draw a short hairline in the gap BETWEEN two adjacent
+   inactive tabs (VSCode/browser pattern). The adjacent-sibling selector keeps it
+   off the first tab and off both sides of the active tab — the active tab's
+   raised surface + border already reads as separated, so a divider there is
+   redundant noise. */
+.page-tab:not(.is-active) + .page-tab:not(.is-active)::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--color-border-subtle);
+  pointer-events: none;
+}
+
+.page-tab__icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+.page-tab__label {
+  flex: 1;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Unsaved-changes marker, driven by a registered page-dirty probe. */
+.page-tab.is-dirty .page-tab__label {
+  font-style: italic;
+}
+.page-tab__dirty {
+  color: var(--color-brand-primary);
+  flex-shrink: 0;
+}
+
+.page-tab__pin {
+  width: 13px;
+  height: 13px;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.page-tab__close {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  /* Always laid out (reserves its slot) — toggle visibility, not display, so
+     revealing the X on hover never widens the tab. VSCode/Chrome tab behaviour. */
+  display: grid;
+  place-items: center;
+  visibility: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0;
+}
+.page-tab:hover .page-tab__close,
+.page-tab.is-active .page-tab__close {
+  visibility: visible;
+}
+.page-tab__close:hover {
+  background: var(--color-interaction-selected-neutral);
+  color: var(--color-text-primary);
+}
+.page-tab__close-icon {
+  width: 11px;
+  height: 11px;
+}
+
+/* Action buttons (all-pages overflow / rules). */
+.page-tab-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.page-tab-btn {
+  height: 22px;
+  padding: 0 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+.page-tab-btn:hover {
+  background: var(--color-interaction-hover);
+  color: var(--color-text-primary);
+}
+.page-tab-new {
+  width: 30px;
+  height: calc(var(--page-tab-h) - 5px);
+  padding: 0;
+  border-color: transparent;
+  justify-content: center;
+  align-self: flex-end;
+  flex-shrink: 0;
+}
+.page-tab-new:hover,
+.page-tab-new:focus-visible {
+  border-color: transparent;
+  background: var(--color-interaction-hover);
+}
+.page-tab-new .page-tab-btn__icon {
+  width: 13px;
+  height: 13px;
+}
+
+/* "+" new-page menu: title only, no type-id column. */
+.page-tab-new-menu.fx-searchable-menu {
+  width: 220px;
+}
+.page-tab-btn__icon {
+  width: 12px;
+  height: 12px;
+}
+/* All-pages dropdown rows. */
+.page-tab-menu__mark {
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+}
+.page-tab-menu__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/package/browser/components/PageTabs/PageTabStrip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import './PageTabStrip.css';
+export declare function PageTabStrip(): ReactElement | null;

package/dist/package/browser/components/PageTabs/PageTabStrip.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { installElementResizeObservation, installPointerReorderSession, } from '@forgeax/app-shell/react';
+import { AtSign, ChevronsRight, Copy, Crosshair, File, FolderSearch, Minus, Pin, Plus, Save, X, } from 'lucide-react';
+import { useHost } from '../../core/app-shell';
+import { PagePlatformError, isPageDirty, subscribePageDirty, } from '../../core/page-platform';
+import { unsavedChangesDialog } from '../../lib/dialog';
+import { lucideIconOrBox } from '../../lib/lucide-icon';
+import { iconForPage } from '../../lib/page-tab-icons';
+import { useTranslation } from '../../i18n';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { SearchableMenu } from '../ui/SearchableMenu';
+import { openablePageTypes } from './openablePageTypes';
+import './PageTabStrip.css';
+// Lucide glyphs for controller-contributed menu items (kebab name → component),
+// same glyph set as the design demo's data-lucide names.
+const MENU_ICON = {
+    copy: Copy,
+    'folder-search': FolderSearch,
+    crosshair: Crosshair,
+    'at-sign': AtSign,
+    save: Save,
+};
+/** Render controller-contributed items with a divider before each new group
+ *  (including the first, to split them from the platform's base close group). */
+function renderMenuItems(items) {
+    const out = [];
+    let lastGroup;
+    items.forEach((item, i) => {
+        if (i === 0 || item.group !== lastGroup)
+            out.push(_jsx(DropdownMenuSeparator, {}, `sep-${item.id}`));
+        lastGroup = item.group;
+        const Icon = MENU_ICON[item.icon ?? ''] ?? File;
+        out.push(_jsxs(DropdownMenuItem, { disabled: item.disabled, onSelect: () => void item.run(), children: [_jsx(Icon, { "aria-hidden": true }), item.label] }, item.id));
+    });
+    return out;
+}
+/** Leaf name shown on a tab: owner-set live title → resource leaf → type title. */
+function tabTitle(page, fallbackTitle) {
+    return (page.title ??
+        page.resource?.displayPath?.split('/').at(-1) ??
+        page.resource?.uri.split('/').at(-1) ??
+        fallbackTitle ??
+        page.typeId);
+}
+export function PageTabStrip() {
+    const host = useHost();
+    const { t } = useTranslation();
+    const snapshot = useSyncExternalStore(host.pages.subscribe, host.pages.getSnapshot, host.pages.getSnapshot);
+    const registry = useSyncExternalStore(host.pageRegistry.subscribe, host.pageRegistry.getSnapshot, host.pageRegistry.getSnapshot);
+    const activityCatalog = useSyncExternalStore(host.activities.subscribe, host.activities.getSnapshot, host.activities.getSnapshot);
+    const listRef = useRef(null);
+    const [draggingKey, setDraggingKey] = useState(null);
+    const [overflowing, setOverflowing] = useState(false);
+    const [menu, setMenu] = useState(null);
+    // Dirty state lives outside the page snapshot — a registered probe (e.g. the
+    // Material Instance staging buffer) owns it, so re-render on its signal.
+    const [, setDirtyTick] = useState(0);
+    const { instances, activeKey } = snapshot;
+    const hasTabs = instances.length > 0;
+    // The "+" menu lists types openable without a resource. Hide SINGLETON types
+    // that already have an open instance in this strip: reopening one only
+    // refocuses the existing tab, so it's a duplicate, dead option. Multi-instance
+    // types stay — opening another is a valid action.
+    const openTypeIds = new Set(instances.map((p) => p.typeId));
+    const openableTypes = openablePageTypes(registry).filter((pageType) => pageType.cardinality !== 'singleton' || !openTypeIds.has(pageType.id));
+    const activityByPageType = new Map();
+    for (const activity of activityCatalog.activities) {
+        if (activity.pageTypeId && !activityByPageType.has(activity.pageTypeId)) {
+            activityByPageType.set(activity.pageTypeId, activity);
+        }
+    }
+    const newPageItems = openableTypes.map((pageType) => ({
+        id: pageType.id,
+        label: pageType.title,
+        keywords: [pageType.id, pageType.cardinality],
+        group: t('pageTabs.availableTypes'),
+        icon: activityByPageType.has(pageType.id)
+            ? lucideIconOrBox(activityByPageType.get(pageType.id)?.icon)
+            : iconForPage({ typeId: pageType.id }),
+    }));
+    const focus = useCallback((key) => void host.pages.focus(key).catch(() => { }), [host]);
+    // A page may refuse to close with unsaved staging; ask save / discard / cancel
+    // and retry with the decision the platform expects.
+    const closeKey = useCallback((key) => {
+        void (async () => {
+            try {
+                await host.pages.close(key);
+            }
+            catch (error) {
+                if (!(error instanceof PagePlatformError) || error.code !== 'PAGE_CLOSE_REQUIRES_DECISION')
+                    return;
+                const page = host.pages.getSnapshot().instances.find((p) => p.encodedKey === key);
+                const resolved = page ? host.pageRegistry.get(page.typeId) : undefined;
+                const title = page
+                    ? tabTitle(page, resolved?.status === 'available' ? resolved.definition.title : undefined)
+                    : key;
+                const decision = await unsavedChangesDialog({
+                    title: t('dialog.unsavedTitle'),
+                    body: error.message || t('dialog.unsavedBody', { title }),
+                    saveText: t('common.save'),
+                    discardText: t('dialog.discardChanges'),
+                    cancelText: t('common.cancel'),
+                });
+                if (decision === 'cancel')
+                    return;
+                await host.pages.close(key, { decision }).catch(() => { });
+            }
+        })();
+    }, [host, t]);
+    useEffect(() => subscribePageDirty(() => setDirtyTick((n) => n + 1)), []);
+    // Keep the active tab in view when the selection changes under overflow.
+    useEffect(() => {
+        if (!activeKey)
+            return;
+        listRef.current
+            ?.querySelector(`[data-page-key="${CSS.escape(activeKey)}"]`)
+            ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [activeKey]);
+    // The overflow dropdown appears only when tabs can't all fit.
+    useEffect(() => {
+        const el = listRef.current;
+        if (!el)
+            return;
+        const measure = () => setOverflowing(el.scrollWidth - el.clientWidth > 1);
+        measure();
+        return installElementResizeObservation({
+            getElements: () => [el],
+            onResize: measure,
+        });
+    }, [instances.length]);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const lifecycle = installPointerReorderSession({
+            element: list,
+            target: window,
+            resolveItem: (target) => (target instanceof Element
+                ? target.closest('[data-page-key]')?.dataset.pageKey ?? null
+                : null),
+            canStart: (event) => (event.target instanceof Element && !event.target.closest('[data-page-close]')),
+            reorder: (draggedKey, overKey) => {
+                const toIndex = host.pages.getSnapshot().instances.findIndex((page) => page.encodedKey === overKey);
+                if (toIndex >= 0)
+                    host.pages.reorder(draggedKey, toIndex);
+            },
+            onDraggingChange: setDraggingKey,
+        });
+        return () => lifecycle.dispose();
+    }, [host, hasTabs]);
+    const handleTabClick = useCallback((key) => {
+        // Clicking the already-active tab is a no-op (matches the demo).
+        if (key === activeKey)
+            return;
+        focus(key);
+    }, [activeKey, focus]);
+    if (instances.length === 0)
+        return null;
+    const menuPage = menu ? instances.find((p) => p.encodedKey === menu.key) : undefined;
+    const menuIndex = menu ? instances.findIndex((p) => p.encodedKey === menu.key) : -1;
+    // Controller-contributed items, evaluated fresh at open (live disabled/label).
+    const menuItems = menu && menuPage ? host.pages.getContextMenuItems(menu.key) : [];
+    return (_jsxs("div", { className: "page-tab-strip", "data-fx-slot": "PageTabs", children: [_jsxs("div", { className: "page-tab-scope", children: [_jsx("div", { ref: listRef, className: "page-tab-list", role: "tablist", "aria-label": t('pageTabs.openPages'), children: instances.map((page) => {
+                            const resolved = host.pageRegistry.get(page.typeId);
+                            const title = tabTitle(page, resolved?.status === 'available' ? resolved.definition.title : undefined);
+                            const active = activeKey === page.encodedKey;
+                            const dirty = isPageDirty(page);
+                            const Icon = iconForPage({ typeId: page.typeId, resource: page.resource });
+                            const path = page.resource?.displayPath ?? page.resource?.uri;
+                            const classes = [
+                                'page-tab',
+                                'no-motion-lift',
+                                active ? 'is-active' : '',
+                                page.closable ? '' : 'is-pinned',
+                                dirty ? 'is-dirty' : '',
+                                draggingKey === page.encodedKey ? 'is-drag' : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' ');
+                            return (_jsxs("button", { type: "button", className: classes, role: "tab", "aria-selected": active, "data-page-key": page.encodedKey, "data-dirty": dirty ? '1' : undefined, title: path ?? title, onClick: () => handleTabClick(page.encodedKey), onAuxClick: (e) => {
+                                    if (e.button === 1 && page.closable) {
+                                        e.preventDefault();
+                                        closeKey(page.encodedKey);
+                                    }
+                                }, onContextMenu: (e) => {
+                                    e.preventDefault();
+                                    setMenu({ x: e.clientX, y: e.clientY, key: page.encodedKey });
+                                }, children: [_jsx(Icon, { className: "page-tab__icon", "aria-hidden": true }), _jsx("span", { className: "page-tab__label", children: title }), dirty && _jsx("span", { className: "page-tab__dirty", "aria-hidden": true, children: "*" }), page.closable ? (_jsx("span", { className: "page-tab__close no-motion-lift", role: "button", "aria-label": t('pageTabs.closeTab', { title }), "data-page-close": page.encodedKey, onClick: (e) => {
+                                            e.stopPropagation();
+                                            closeKey(page.encodedKey);
+                                        }, children: _jsx(X, { className: "page-tab__close-icon", "aria-hidden": true }) })) : (_jsx(Pin, { className: "page-tab__pin", "aria-hidden": true }))] }, page.encodedKey));
+                        }) }), _jsx(SearchableMenu, { ariaLabel: t('pageTabs.newPage'), searchPlaceholder: t('pageTabs.searchPageTypes'), emptyText: openableTypes.length === 0
+                            ? t('pageTabs.noOpenableTypes')
+                            : t('pageTabs.noMatchingTypes'), items: newPageItems, className: "page-tab-new-menu", onSelect: (item) => {
+                            const pageType = openableTypes.find((candidate) => candidate.id === item.id);
+                            if (pageType)
+                                void host.pages.open({ typeId: pageType.id }).catch(() => { });
+                        }, trigger: (_jsx("button", { type: "button", className: "page-tab-btn page-tab-new no-motion-lift", title: t('pageTabs.newPage'), "aria-label": t('pageTabs.newPage'), children: _jsx(Plus, { className: "page-tab-btn__icon", "aria-hidden": true }) })) }), _jsx("div", { className: "page-tab-actions", children: overflowing && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "page-tab-btn no-motion-lift", title: t('pageTabs.allPages'), children: [_jsx(ChevronsRight, { className: "page-tab-btn__icon", "aria-hidden": true }), _jsx("span", { children: instances.length })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[200px]", children: instances.map((page) => {
+                                        const resolved = host.pageRegistry.get(page.typeId);
+                                        const title = tabTitle(page, resolved?.status === 'available' ? resolved.definition.title : undefined);
+                                        const Icon = iconForPage({ typeId: page.typeId, resource: page.resource });
+                                        return (_jsxs(DropdownMenuItem, { onSelect: () => focus(page.encodedKey), children: [_jsx(Icon, { "aria-hidden": true }), _jsx("span", { className: "page-tab-menu__mark", children: activeKey === page.encodedKey ? '●' : '○' }), _jsx("span", { className: "page-tab-menu__label", children: isPageDirty(page) ? `${title} *` : title })] }, page.encodedKey));
+                                    }) })] })) })] }), _jsxs(DropdownMenu, { open: menu !== null, onOpenChange: (open) => !open && setMenu(null), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, style: { position: 'fixed', left: menu?.x ?? 0, top: menu?.y ?? 0, width: 0, height: 0 } }) }), menu && menuPage && (_jsxs(DropdownMenuContent, { align: "start", className: "min-w-[186px]", onContextMenu: (e) => e.preventDefault(), children: [_jsxs(DropdownMenuItem, { disabled: !menuPage.closable, onSelect: () => closeKey(menu.key), children: [_jsx(X, { "aria-hidden": true }), t('pageTabs.context.close')] }), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                    for (const p of instances)
+                                        if (p.encodedKey !== menu.key && p.closable)
+                                            closeKey(p.encodedKey);
+                                    focus(menu.key);
+                                }, children: [_jsx(Minus, { "aria-hidden": true }), t('pageTabs.context.closeOthers')] }), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                    for (const p of instances.slice(menuIndex + 1))
+                                        if (p.closable)
+                                            closeKey(p.encodedKey);
+                                }, children: [_jsx(ChevronsRight, { "aria-hidden": true }), t('pageTabs.context.closeToRight')] }), renderMenuItems(menuItems)] }))] })] }));
+}

package/dist/package/browser/components/PageTabs/openablePageTypes.d.ts

@@ -0,0 +1,9 @@
+import type { QualifiedPageTypeId } from '@forgeax/types';
+import type { PageRegistrySnapshot } from '../../core/page-platform';
+export interface OpenablePageType {
+    readonly id: QualifiedPageTypeId;
+    readonly title: string;
+    readonly cardinality: 'singleton' | 'multi-instance';
+}
+/** Page types that can be opened without first selecting a resource. */
+export declare function openablePageTypes(snapshot: PageRegistrySnapshot): OpenablePageType[];

package/dist/package/browser/components/PageTabs/openablePageTypes.js

@@ -0,0 +1,13 @@
+/** Page types that can be opened without first selecting a resource. */
+export function openablePageTypes(snapshot) {
+    return [...snapshot.pageTypes.entries()]
+        .flatMap(([id, resolved]) => {
+        if (resolved.status !== 'available')
+            return [];
+        const cardinality = resolved.definition.cardinality;
+        if (cardinality === 'resource')
+            return [];
+        return [{ id, title: resolved.definition.title, cardinality }];
+    })
+        .sort((a, b) => a.title.localeCompare(b.title) || a.id.localeCompare(b.id));
+}