@undefineds.co/xpod 0.4.17 → 0.4.18

package/node_modules/@undefineds.co/extension-sdk/dist/layout.d.ts

@@ -14,3 +14,42 @@ export type ThreePaneAppletLayoutDescriptor = {
 };
 export type AppletLayoutDescriptor = SinglePaneAppletLayoutDescriptor | TwoPaneAppletLayoutDescriptor | ThreePaneAppletLayoutDescriptor;
 export declare function defineAppletLayout<T extends AppletLayoutDescriptor>(descriptor: T): T;
+/**
+ * §8.3 的四种页型。与上面的 pane 描述符并存：既有 applet 仍可用 three-pane，新页面按页型声明，
+ * 由 {@link resolveAppletPanePlan} 结合实际宽度与"是否真有对象集合"决定是否出现对象列。
+ */
+export type AppletPageType = 'overview' | 'collection' | 'configuration' | 'diagnostics';
+/**
+ * §8.3 断点的唯一来源，单位是内容视口 CSS px。页面不得自选断点。
+ */
+/**
+ * 宽窗口导航列宽度（§8.3）。`AppLayout` 的 Tailwind 类必须与它一致
+ * （`md:grid-cols-[184px_minmax(0,1fr)]`），`packages/extension-sdk/test/app-layout.test.tsx` 两边都断言。
+ */
+export declare const XPOD_LAYOUT_RAIL_WIDTH = 184;
+export declare const XPOD_LAYOUT_BREAKPOINTS: {
+    /** 低于此宽度使用任务栏 + 导航抽屉，不强制底部 Tab。 */
+    readonly narrow: 768;
+    /** 只有达到此宽度且确有对象集合，才增加对象列。 */
+    readonly wideObjects: 1100;
+};
+export interface AppletPanePlanInput {
+    readonly pageType: AppletPageType;
+    /** 当前内容视口宽度（CSS px），不含原生标题栏与安全区。 */
+    readonly contentWidth: number;
+    /** 该页是否真有需要持续比较/切换的对象集合；概览、固定配置、诊断恒为 false。 */
+    readonly hasObjectCollection?: boolean;
+}
+export interface AppletPanePlan {
+    readonly pageType: AppletPageType;
+    readonly navigation: 'rail' | 'task-bar';
+    readonly panes: 'single' | 'stack' | 'list-detail';
+    readonly showObjectColumn: boolean;
+}
+/**
+ * 把页型、宽度与集合事实映射成布局计划（spec §8.3）：
+ * - <768px：任务栏 + 导航抽屉，单面板；
+ * - 768–1099px：184px 文字导航，集合页用堆叠；
+ * - ≥1100px：只有真正集合才额外出现对象列。
+ */
+export declare function resolveAppletPanePlan(input: AppletPanePlanInput): AppletPanePlan;

package/node_modules/@undefineds.co/extension-sdk/dist/layout.js

@@ -34,3 +34,43 @@ function assertValidLayoutContext(context) {
         throw new Error('Applet layout descriptor context.initiallyCollapsed must be a boolean');
     }
 }
+/**
+ * §8.3 断点的唯一来源，单位是内容视口 CSS px。页面不得自选断点。
+ */
+/**
+ * 宽窗口导航列宽度（§8.3）。`AppLayout` 的 Tailwind 类必须与它一致
+ * （`md:grid-cols-[184px_minmax(0,1fr)]`），`packages/extension-sdk/test/app-layout.test.tsx` 两边都断言。
+ */
+export const XPOD_LAYOUT_RAIL_WIDTH = 184;
+export const XPOD_LAYOUT_BREAKPOINTS = {
+    /** 低于此宽度使用任务栏 + 导航抽屉，不强制底部 Tab。 */
+    narrow: 768,
+    /** 只有达到此宽度且确有对象集合，才增加对象列。 */
+    wideObjects: 1100,
+};
+/**
+ * 把页型、宽度与集合事实映射成布局计划（spec §8.3）：
+ * - <768px：任务栏 + 导航抽屉，单面板；
+ * - 768–1099px：184px 文字导航，集合页用堆叠；
+ * - ≥1100px：只有真正集合才额外出现对象列。
+ */
+export function resolveAppletPanePlan(input) {
+    const { pageType, contentWidth } = input;
+    const hasCollection = input.hasObjectCollection === true;
+    if (!Number.isFinite(contentWidth) || contentWidth <= 0) {
+        throw new Error('Applet pane plan needs a positive contentWidth');
+    }
+    if (contentWidth < XPOD_LAYOUT_BREAKPOINTS.narrow) {
+        return { pageType, navigation: 'task-bar', panes: 'single', showObjectColumn: false };
+    }
+    const showObjectColumn = contentWidth >= XPOD_LAYOUT_BREAKPOINTS.wideObjects && pageType === 'collection' && hasCollection;
+    if (showObjectColumn) {
+        return { pageType, navigation: 'rail', panes: 'list-detail', showObjectColumn: true };
+    }
+    return {
+        pageType,
+        navigation: 'rail',
+        panes: pageType === 'collection' && contentWidth < XPOD_LAYOUT_BREAKPOINTS.wideObjects ? 'stack' : 'single',
+        showObjectColumn: false,
+    };
+}

package/node_modules/@undefineds.co/extension-sdk/dist/react/app-layout.d.ts

@@ -3,5 +3,17 @@ export interface AppLayoutProps {
     navigation: ReactNode;
     children: ReactNode;
     className?: string;
+    /** 窄窗任务栏的标题（spec §8.3）。宽窗由页面自己的标题承担。 */
+    narrowTitle?: ReactNode;
+    /** 提供时，窄窗任务栏显示返回按钮。 */
+    onNarrowBack?: () => void;
+    narrowBackLabel?: string;
+    /** 导航按钮与抽屉的名字；抽屉复用同一棵导航树。 */
+    navigationLabel?: string;
 }
-export declare function AppLayout({ navigation, children, className, }: AppLayoutProps): import("react").JSX.Element;
+/**
+ * 工作区布局（spec §8.3）：
+ * - ≥768px（Tailwind `md`，与 `XPOD_LAYOUT_BREAKPOINTS.narrow` 对齐）：184px 文字导航 + 内容；
+ * - <768px：48px 顶部任务栏（返回、标题、有名称的导航按钮）+ 单面板，导航树放进抽屉，不强制底部 Tab。
+ */
+export declare function AppLayout({ navigation, children, className, narrowTitle, onNarrowBack, narrowBackLabel, navigationLabel, }: AppLayoutProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/extension-sdk/dist/react/app-layout.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@undefineds.co/shared-ui';
-export function AppLayout({ navigation, children, className, }) {
-    return (_jsxs("section", { className: cn('grid h-screen min-h-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)_64px] bg-background sm:grid-cols-[60px_minmax(0,1fr)] sm:grid-rows-[minmax(0,1fr)]', className), "data-app-layout": "workspace", children: [_jsx("aside", { className: "row-start-2 min-h-0 overflow-x-auto overflow-y-hidden border-t border-border/50 bg-layout-sidebar sm:col-start-1 sm:row-start-1 sm:overflow-hidden sm:border-r sm:border-t-0", "data-app-layout-navigation": true, children: navigation }), _jsx("div", { className: "col-start-1 row-start-1 min-h-0 min-w-0 overflow-hidden bg-layout-content sm:col-start-2", "data-app-layout-content": true, children: children })] }));
+import { useState } from 'react';
+import { ArrowLeft, Menu } from 'lucide-react';
+import { cn, Dialog, DialogContent, DialogTitle, DialogTrigger, } from '@undefineds.co/shared-ui';
+/**
+ * 工作区布局（spec §8.3）：
+ * - ≥768px（Tailwind `md`，与 `XPOD_LAYOUT_BREAKPOINTS.narrow` 对齐）：184px 文字导航 + 内容；
+ * - <768px：48px 顶部任务栏（返回、标题、有名称的导航按钮）+ 单面板，导航树放进抽屉，不强制底部 Tab。
+ */
+export function AppLayout({ navigation, children, className, narrowTitle, onNarrowBack, narrowBackLabel = '返回', navigationLabel = '导航', }) {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    return (_jsxs("section", { className: cn('grid h-screen min-h-0 grid-cols-[minmax(0,1fr)] grid-rows-[48px_minmax(0,1fr)] bg-background md:grid-cols-[184px_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]', className), "data-app-layout": "workspace", children: [_jsxs("header", { className: "col-start-1 row-start-1 flex h-12 min-w-0 items-center gap-1 border-b border-border/50 bg-layout-sidebar px-1 md:hidden", "data-app-layout-header": true, children: [onNarrowBack ? (_jsx("button", { type: "button", onClick: onNarrowBack, "aria-label": narrowBackLabel, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-foreground hover:bg-accent focus:outline-none focus-visible:bg-accent", children: _jsx(ArrowLeft, { className: "h-5 w-5", "aria-hidden": "true" }) })) : null, _jsx("div", { className: "min-w-0 flex-1 truncate px-1 text-sm font-medium", "data-app-layout-title": true, children: narrowTitle }), _jsxs(Dialog, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-sm text-foreground hover:bg-accent focus:outline-none focus-visible:bg-accent", children: [_jsx(Menu, { className: "h-5 w-5", "aria-hidden": "true" }), navigationLabel] }) }), _jsxs(DialogContent, { variant: "sheet-left", "aria-describedby": undefined, children: [_jsx(DialogTitle, { className: "sr-only", children: navigationLabel }), navigation] })] })] }), _jsx("aside", { className: "row-start-2 hidden min-h-0 overflow-hidden border-border/50 bg-layout-sidebar md:row-start-1 md:block md:border-r", "data-app-layout-navigation": true, children: navigation }), _jsx("div", { className: "col-start-1 row-start-2 min-h-0 min-w-0 overflow-hidden bg-layout-content md:col-start-2 md:row-start-1", "data-app-layout-content": true, children: children })] }));
 }

package/node_modules/@undefineds.co/extension-sdk/dist/react/workspace-layout.d.ts

@@ -1,7 +1,16 @@
 import { type ReactNode } from 'react';
+import { type AppletPageType } from '../layout';
 import { type WorkspaceLayoutMode, type WorkspaceLayoutPane } from './layout-context';
 export type TwoPaneLayoutMode = 'auto' | WorkspaceLayoutMode;
-export interface TwoPaneLayoutProps {
+export interface WorkspacePageTypeProps {
+    /**
+     * §8.3 页型。概览、固定配置、诊断不会渲染对象列；只有 `collection` 且确有集合才在宽断点出现。
+     * 默认保持旧行为（集合页 + 有集合），新页面应显式声明。
+     */
+    pageType?: AppletPageType;
+    hasObjectCollection?: boolean;
+}
+export interface TwoPaneLayoutProps extends WorkspacePageTypeProps {
     listHeader: ReactNode;
     list: ReactNode;
     mainHeader: ReactNode;
@@ -19,7 +28,7 @@ export interface ThreePaneLayoutContextConfig {
     collapsible?: boolean;
     initiallyCollapsed?: boolean;
 }
-export interface ThreePaneLayoutProps {
+export interface ThreePaneLayoutProps extends WorkspacePageTypeProps {
     header?: ReactNode;
     list: ReactNode;
     main: ReactNode;
@@ -33,6 +42,6 @@ export interface WorkspaceLayoutHistoryAdapter {
     push(pane: WorkspaceLayoutPane): void;
     subscribe(listener: (pane: WorkspaceLayoutPane) => void): () => void;
 }
-export declare function TwoPaneLayout({ listHeader, list, mainHeader, main, mode, history, className, }: TwoPaneLayoutProps): import("react").JSX.Element;
+export declare function TwoPaneLayout({ listHeader, list, mainHeader, main, mode, history, className, pageType, hasObjectCollection, }: TwoPaneLayoutProps): import("react").JSX.Element;
 export declare function SinglePaneLayout({ header, main, className, }: SinglePaneLayoutProps): import("react").JSX.Element;
-export declare function ThreePaneLayout({ header, list, main, context, mode, history, contextConfig, className, }: ThreePaneLayoutProps): import("react").JSX.Element;
+export declare function ThreePaneLayout({ header, list, main, context, mode, history, contextConfig, className, pageType, hasObjectCollection, }: ThreePaneLayoutProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/extension-sdk/dist/react/workspace-layout.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { cn } from '@undefineds.co/shared-ui';
+import { resolveAppletPanePlan, XPOD_LAYOUT_BREAKPOINTS, XPOD_LAYOUT_RAIL_WIDTH, } from '../layout.js';
 import { WorkspaceLayoutContext, } from './layout-context.js';
 const stackMediaQuery = '(max-width: 767px)';
 const twoPaneGridStyle = {
@@ -33,6 +34,54 @@ function useResolvedMode(mode) {
     const autoMode = useSyncExternalStore(subscribeToStackModeChange, getAutoModeSnapshot, getServerAutoModeSnapshot);
     return mode === 'auto' ? autoMode : mode;
 }
+/**
+ * 对象列的可用宽度媒体查询：§8.3 的 1100px 是**内容**宽度，宽窗口还有一个 184px 导航列，
+ * 所以视口阈值要加上它。
+ */
+const objectColumnMediaQuery = `(min-width: ${XPOD_LAYOUT_BREAKPOINTS.wideObjects + XPOD_LAYOUT_RAIL_WIDTH}px)`;
+/**
+ * 是否够放对象列。
+ *
+ * 没有 `matchMedia` 的环境（服务端渲染、旧测试环境）按宽窗口处理——与 `getServerAutoModeSnapshot`
+ * 的既有默认一致：产品主要跑在桌面壳里，未知环境不应把已有的两栏布局变成堆叠。
+ */
+function useRoomForObjectColumn() {
+    return useSyncExternalStore((onStoreChange) => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return () => undefined;
+        }
+        const media = window.matchMedia(objectColumnMediaQuery);
+        media.addEventListener('change', onStoreChange);
+        return () => media.removeEventListener('change', onStoreChange);
+    }, () => (typeof window === 'undefined' || typeof window.matchMedia !== 'function'
+        ? true
+        : window.matchMedia(objectColumnMediaQuery).matches), () => true);
+}
+/**
+ * 把 §8.3 的页型、宽度与集合事实落到布局上：复用 `resolveAppletPanePlan` 作为唯一判断处，
+ * 概览/固定配置/诊断在任何宽度都不出现对象列，集合页在 1100px 以下改为堆叠。
+ */
+function useObjectColumn(input) {
+    const narrow = useSyncExternalStore(subscribeToStackModeChange, getAutoModeSnapshot, getServerAutoModeSnapshot) === 'stack';
+    const roomForObjects = useRoomForObjectColumn();
+    // 只需要区分三个区间，因此给 plan 一个能代表当前区间的宽度
+    const contentWidth = roomForObjects
+        ? XPOD_LAYOUT_BREAKPOINTS.wideObjects
+        : narrow
+            ? XPOD_LAYOUT_BREAKPOINTS.narrow - 1
+            : XPOD_LAYOUT_BREAKPOINTS.narrow;
+    const plan = resolveAppletPanePlan({
+        pageType: input.pageType,
+        contentWidth,
+        hasObjectCollection: input.hasObjectCollection,
+    });
+    // §8.3：只有真正的集合列出现时才是并排；其余（含窄窗的集合页）都走 list→detail 的堆叠
+    const autoMode = plan.panes === 'list-detail' ? 'split' : 'stack';
+    return {
+        resolvedMode: input.mode === 'auto' ? autoMode : input.mode,
+        showObjectColumn: plan.showObjectColumn,
+    };
+}
 function useStackNavigation({ resolvedMode, history, resolvePane, }) {
     const [activePane, setActivePane] = useState('list');
     const focusPaneRef = useRef(null);
@@ -86,8 +135,11 @@ function useStackNavigation({ resolvedMode, history, resolvePane, }) {
         openContext,
     };
 }
-export function TwoPaneLayout({ listHeader, list, mainHeader, main, mode = 'auto', history, className, }) {
-    const resolvedMode = useResolvedMode(mode);
+export function TwoPaneLayout({ listHeader, list, mainHeader, main, mode = 'auto', history, className, pageType = 'collection', hasObjectCollection = true, }) {
+    const { resolvedMode } = useObjectColumn({ mode, pageType, hasObjectCollection });
+    // §8.3：非集合页不渲染对象列；集合页只有宽断点才显示
+    // §8.3：只有集合页才有对象列表；宽度决定它是并排的对象列还是堆叠的第一屏
+    const showList = pageType === 'collection' && hasObjectCollection;
     const { activePane, paneRefs, openList, openMain, openContext, } = useStackNavigation({
         resolvedMode,
         history,
@@ -101,15 +153,19 @@ export function TwoPaneLayout({ listHeader, list, mainHeader, main, mode = 'auto
         openContext,
     }), [activePane, openContext, openList, openMain, resolvedMode]);
     const isStack = resolvedMode === 'stack';
-    const listHidden = isStack && activePane !== 'list';
-    const mainHidden = isStack && activePane !== 'main';
-    return (_jsx(WorkspaceLayoutContext.Provider, { value: navigation, children: _jsx("section", { className: cn('flex min-h-0 flex-1 flex-col bg-background', className), "data-workspace-layout": "two-pane", "data-workspace-mode": resolvedMode, children: _jsxs("div", { className: cn('grid min-h-0 flex-1', isStack ? 'grid-cols-1' : null), style: isStack ? undefined : twoPaneGridStyle, "data-workspace-layout-mode": mode, "data-workspace-active-pane": activePane, children: [_jsxs("aside", { ref: paneRefs.list, className: cn('min-h-0 flex-col overflow-hidden bg-layout-list-item @container', listHidden ? 'hidden' : 'flex', isStack ? 'border-r-0' : 'border-r border-border'), "data-testid": "workspace-list-pane", "data-workspace-pane": "list", hidden: listHidden, tabIndex: isStack ? -1 : undefined, children: [_jsx("header", { className: "h-12 shrink-0 border-b border-border bg-layout-list-header", "data-workspace-list-header": "true", children: listHeader }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: list })] }), _jsxs("main", { ref: paneRefs.main, className: cn('min-h-0 flex-col overflow-hidden bg-layout-content @container', mainHidden ? 'hidden' : 'flex'), "data-testid": "workspace-main-pane", "data-workspace-pane": "main", hidden: mainHidden, tabIndex: isStack ? -1 : undefined, children: [_jsx("header", { className: "h-12 shrink-0 border-b border-border bg-layout-content", "data-workspace-main-header": "true", children: mainHeader }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [isStack ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openList, children: "\u8FD4\u56DE\u5217\u8868" })) : null, main] })] })] }) }) }));
+    const stacked = showList && isStack;
+    const listHidden = !showList || (stacked && activePane !== 'list');
+    const mainHidden = stacked && activePane !== 'main';
+    return (_jsx(WorkspaceLayoutContext.Provider, { value: navigation, children: _jsx("section", { className: cn('flex min-h-0 flex-1 flex-col bg-background', className), "data-workspace-layout": "two-pane", "data-workspace-mode": resolvedMode, children: _jsxs("div", { className: cn('grid min-h-0 flex-1', stacked || !showList ? 'grid-cols-1' : null), style: stacked || !showList ? undefined : twoPaneGridStyle, "data-workspace-layout-mode": mode, "data-workspace-object-column": showList && resolvedMode === 'split' ? 'shown' : 'hidden', "data-workspace-active-pane": activePane, children: [_jsxs("aside", { ref: paneRefs.list, className: cn('min-h-0 flex-col overflow-hidden bg-layout-list-item @container', listHidden ? 'hidden' : 'flex', stacked ? 'border-r-0' : 'border-r border-border'), "data-testid": "workspace-list-pane", "data-workspace-pane": "list", hidden: listHidden, tabIndex: stacked ? -1 : undefined, children: [_jsx("header", { className: "h-12 shrink-0 border-b border-border bg-layout-list-header", "data-workspace-list-header": "true", children: listHeader }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: list })] }), _jsxs("main", { ref: paneRefs.main, className: cn('min-h-0 flex-col overflow-hidden bg-layout-content @container', mainHidden ? 'hidden' : 'flex'), "data-testid": "workspace-main-pane", "data-workspace-pane": "main", hidden: mainHidden, tabIndex: stacked ? -1 : undefined, children: [_jsx("header", { className: "h-12 shrink-0 border-b border-border bg-layout-content", "data-workspace-main-header": "true", children: mainHeader }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [stacked ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openList, children: "\u8FD4\u56DE\u5217\u8868" })) : null, main] })] })] }) }) }));
 }
 export function SinglePaneLayout({ header, main, className, }) {
     return (_jsxs("section", { className: cn('flex min-h-0 flex-1 flex-col bg-background', className), "data-workspace-layout": "single-pane", children: [header ? (_jsx("header", { className: "h-16 shrink-0 border-b border-border bg-layout-content", children: header })) : null, _jsx("main", { className: "min-h-0 flex-1 overflow-y-auto bg-layout-content @container", "data-testid": "workspace-content-pane", "data-workspace-pane": "content", children: main })] }));
 }
-export function ThreePaneLayout({ header, list, main, context, mode = 'auto', history, contextConfig, className, }) {
-    const resolvedMode = useResolvedMode(mode);
+export function ThreePaneLayout({ header, list, main, context, mode = 'auto', history, contextConfig, className, pageType = 'collection', hasObjectCollection = true, }) {
+    const { resolvedMode } = useObjectColumn({ mode, pageType, hasObjectCollection });
+    // §8.3：非集合页不渲染对象列
+    // §8.3：只有集合页才有对象列表；宽度决定它是并排的对象列还是堆叠的第一屏
+    const showList = pageType === 'collection' && hasObjectCollection;
     const [contextCollapsed, setContextCollapsed] = useState(contextConfig?.initiallyCollapsed ?? false);
     const { activePane, paneRefs, openList, openMain, openContext, } = useStackNavigation({ resolvedMode, history });
     const toggleContextCollapsed = useCallback(() => {
@@ -123,10 +179,11 @@ export function ThreePaneLayout({ header, list, main, context, mode = 'auto', hi
         openContext,
     }), [activePane, openContext, openList, openMain, resolvedMode]);
     const isStack = resolvedMode === 'stack';
-    const listHidden = isStack && activePane !== 'list';
-    const mainHidden = isStack && activePane !== 'main';
-    const contextHidden = isStack
+    const stacked = showList && isStack;
+    const listHidden = !showList || (stacked && activePane !== 'list');
+    const mainHidden = stacked && activePane !== 'main';
+    const contextHidden = stacked
         ? activePane !== 'context'
         : Boolean(contextConfig?.collapsible && contextCollapsed);
-    return (_jsx(WorkspaceLayoutContext.Provider, { value: navigation, children: _jsxs("section", { className: cn('flex min-h-0 flex-1 flex-col bg-background', className), "data-workspace-layout": "three-pane", "data-workspace-mode": resolvedMode, children: [header ? (_jsx("header", { className: "h-16 shrink-0 border-b border-border bg-layout-content", children: header })) : null, contextConfig?.collapsible && !isStack ? (_jsx("div", { className: "shrink-0 border-b border-border bg-layout-content px-3 py-2", children: _jsx("button", { type: "button", "aria-expanded": !contextCollapsed, className: "inline-flex items-center rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground", onClick: toggleContextCollapsed, children: contextCollapsed ? '展开上下文面板' : '折叠上下文面板' }) })) : null, _jsxs("div", { className: cn('grid min-h-0 flex-1', isStack ? 'grid-cols-1' : null), style: isStack ? undefined : threePaneGridStyle, "data-workspace-layout-mode": mode, "data-workspace-active-pane": activePane, children: [_jsx("aside", { ref: paneRefs.list, className: cn('min-h-0 overflow-y-auto bg-layout-list-item @container', listHidden ? 'hidden' : null, isStack ? 'border-r-0' : 'border-r border-border'), "data-testid": "workspace-list-pane", "data-workspace-pane": "list", hidden: listHidden, tabIndex: isStack ? -1 : undefined, children: list }), _jsxs("main", { ref: paneRefs.main, className: cn('min-h-0 overflow-y-auto bg-layout-content @container', mainHidden ? 'hidden' : null), "data-testid": "workspace-main-pane", "data-workspace-pane": "main", hidden: mainHidden, tabIndex: isStack ? -1 : undefined, children: [isStack ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openList, children: "\u8FD4\u56DE\u5217\u8868" })) : null, main] }), _jsxs("aside", { ref: paneRefs.context, className: cn('min-h-0 overflow-y-auto bg-layout-content @container', contextHidden ? 'hidden' : null, isStack ? 'border-l-0' : 'border-l border-border'), "data-testid": "workspace-context-pane", "data-workspace-pane": "context", hidden: contextHidden, tabIndex: isStack ? -1 : undefined, children: [isStack ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openMain, children: "\u8FD4\u56DE\u4E3B\u533A\u57DF" })) : null, context] })] })] }) }));
+    return (_jsx(WorkspaceLayoutContext.Provider, { value: navigation, children: _jsxs("section", { className: cn('flex min-h-0 flex-1 flex-col bg-background', className), "data-workspace-layout": "three-pane", "data-workspace-mode": resolvedMode, children: [header ? (_jsx("header", { className: "h-16 shrink-0 border-b border-border bg-layout-content", children: header })) : null, contextConfig?.collapsible && !stacked ? (_jsx("div", { className: "shrink-0 border-b border-border bg-layout-content px-3 py-2", children: _jsx("button", { type: "button", "aria-expanded": !contextCollapsed, className: "inline-flex items-center rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground", onClick: toggleContextCollapsed, children: contextCollapsed ? '展开上下文面板' : '折叠上下文面板' }) })) : null, _jsxs("div", { className: cn('grid min-h-0 flex-1', stacked ? 'grid-cols-1' : null), style: stacked || !showList ? undefined : threePaneGridStyle, "data-workspace-layout-mode": mode, "data-workspace-active-pane": activePane, children: [_jsx("aside", { ref: paneRefs.list, className: cn('min-h-0 overflow-y-auto bg-layout-list-item @container', listHidden ? 'hidden' : null, stacked ? 'border-r-0' : 'border-r border-border'), "data-testid": "workspace-list-pane", "data-workspace-pane": "list", hidden: listHidden, tabIndex: stacked ? -1 : undefined, children: list }), _jsxs("main", { ref: paneRefs.main, className: cn('min-h-0 overflow-y-auto bg-layout-content @container', mainHidden ? 'hidden' : null), "data-testid": "workspace-main-pane", "data-workspace-pane": "main", hidden: mainHidden, tabIndex: stacked ? -1 : undefined, children: [stacked ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openList, children: "\u8FD4\u56DE\u5217\u8868" })) : null, main] }), _jsxs("aside", { ref: paneRefs.context, className: cn('min-h-0 overflow-y-auto bg-layout-content @container', contextHidden ? 'hidden' : null, stacked ? 'border-l-0' : 'border-l border-border'), "data-testid": "workspace-context-pane", "data-workspace-pane": "context", hidden: contextHidden, tabIndex: stacked ? -1 : undefined, children: [stacked ? (_jsx("button", { type: "button", className: "inline-flex items-center px-4 py-3 text-sm text-muted-foreground hover:text-foreground", onClick: openMain, children: "\u8FD4\u56DE\u4E3B\u533A\u57DF" })) : null, context] })] })] }) }));
 }

package/node_modules/@undefineds.co/shared-ui/dist/auth-surface.js

@@ -86,16 +86,16 @@ export function AuthSurface({ mode, title, children, presentation = 'standard',
     const bodyClassName = isCompact
         ? 'flex min-h-0 flex-1 flex-col overflow-y-auto'
         : 'max-h-[min(80vh,48rem)] overflow-y-auto';
-    const surfaceContent = (_jsxs(_Fragment, { children: [isCompact ? (_jsxs(_Fragment, { children: [_jsx("h1", { id: titleId, className: "sr-only", children: title }), mode === 'modal' && onClose && closeLabel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onClose, "aria-label": closeLabel, className: "absolute right-2 top-2 z-10", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null] })) : (_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border/60 p-4", children: [_jsx("h1", { id: titleId, className: "text-lg font-semibold text-foreground", children: title }), mode === 'modal' && onClose && closeLabel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onClose, "aria-label": closeLabel, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null] })), lead ? (_jsx("div", { "data-testid": "auth-surface-lead", className: cn(isCompact
+    const surfaceContent = (_jsxs(_Fragment, { children: [isCompact ? (_jsxs(_Fragment, { children: [_jsx("h1", { id: titleId, className: "sr-only", children: title }), mode === 'modal' && onClose && closeLabel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onClose, "aria-label": closeLabel, className: "absolute right-2 top-2 z-[var(--layer-sticky)]", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null] })) : (_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border/60 p-4", children: [_jsx("h1", { id: titleId, className: "text-lg font-semibold text-foreground", children: title }), mode === 'modal' && onClose && closeLabel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onClose, "aria-label": closeLabel, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null] })), lead ? (_jsx("div", { "data-testid": "auth-surface-lead", className: cn(isCompact
                     ? 'shrink-0 px-5 pt-7 has-[[data-presentation=compact]]:pt-5'
                     : 'border-b border-border/60 p-4'), children: lead })) : null, _jsx(AuthSurfaceBody, { className: cn(bodyClassName, contentClassName), children: children })] }));
     return (_jsx("div", { "data-testid": `auth-surface-${mode}`, "data-auth-surface-mode": mode, "data-auth-surface-presentation": isCompact ? 'compact' : undefined, "data-auth-surface-host": isWindowHost ? 'window' : undefined, className: cn(isWindowHost
-            ? 'fixed inset-0 z-50 flex items-stretch justify-stretch overflow-hidden bg-card p-0'
+            ? 'fixed inset-0 z-[var(--layer-modal)] flex items-stretch justify-stretch overflow-hidden bg-card p-0'
             : mode === 'modal'
-                ? cn('fixed inset-0 z-50 flex items-center justify-center p-4', isCompact ? 'bg-black/50' : 'bg-background')
+                ? cn('fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center p-4', 
+                // §5.1：compact 用主题画布铺满，不铺遮罩
+                'bg-background')
                 : mode === 'page'
                     ? 'flex min-h-[100dvh] w-full items-center justify-center bg-background p-4'
-                    : 'flex min-h-0 w-full items-center justify-center p-4', className), children: isWindowHost ? (_jsx("div", { ref: surfaceRef, ...dialogProps, "data-auth-surface-frame": "window", tabIndex: -1, className: "relative flex h-full min-h-0 w-full flex-col overflow-hidden bg-card text-card-foreground focus:outline-none", children: surfaceContent })) : (_jsx(Card, { ref: surfaceRef, ...dialogProps, tabIndex: -1, style: { outline: 'none' }, className: cn('relative flex min-h-0 w-full flex-col border-border bg-card text-card-foreground focus:outline-none', isCompact
-                ? 'h-[400px] w-[280px] max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border-border/50 shadow-lg shadow-black/5'
-                : mode === 'embedded' ? 'max-w-none shadow-none' : 'max-w-lg'), children: surfaceContent })) }));
+                    : 'flex min-h-0 w-full items-center justify-center p-4', className), children: isWindowHost ? (_jsx("div", { ref: surfaceRef, ...dialogProps, "data-auth-surface-frame": "window", tabIndex: -1, className: "relative flex h-full min-h-0 w-full flex-col overflow-hidden bg-card text-card-foreground focus:outline-none", children: surfaceContent })) : isCompact ? (_jsx("div", { ref: surfaceRef, ...dialogProps, "data-auth-surface-frame": "compact", tabIndex: -1, style: { outline: 'none' }, className: "flex h-[400px] w-[280px] max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] min-w-0 flex-col overflow-y-auto overscroll-contain focus:outline-none", children: surfaceContent })) : (_jsx(Card, { ref: surfaceRef, ...dialogProps, tabIndex: -1, style: { outline: 'none' }, className: cn('relative flex min-h-0 w-full flex-col border-border bg-card text-card-foreground focus:outline-none', mode === 'embedded' ? 'max-w-none shadow-none' : 'max-w-lg'), children: surfaceContent })) }));
 }

package/node_modules/@undefineds.co/shared-ui/dist/dialog.js

@@ -8,13 +8,13 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-[var(--layer-backdrop)] xpod-overlay-scrim", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, variant = "center", ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn(variant === "sheet-left"
-                ? "fixed inset-y-0 left-0 z-50 flex h-dvh w-[min(88vw,320px)] flex-col border-r bg-background p-0 shadow-[16px_0_30px_rgba(15,23,42,0.08)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-left-full data-[state=open]:slide-in-from-left-full rounded-none"
+                ? "fixed inset-y-0 left-0 z-[var(--layer-modal)] flex h-dvh w-[min(88vw,320px)] flex-col border-r bg-background p-0 shadow-[16px_0_30px_rgba(15,23,42,0.08)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-left-full data-[state=open]:slide-in-from-left-full rounded-none"
                 : variant === "sheet-right"
-                    ? "fixed inset-y-0 right-0 z-50 flex h-dvh w-full max-w-4xl flex-col border-l bg-background p-0 shadow-[-16px_0_30px_rgba(15,23,42,0.08)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full rounded-none"
-                    : "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: cn("absolute right-4 top-4 rounded-xl opacity-70 transition-all hover:opacity-100 hover:bg-muted/50 p-1 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", interactiveFocusClass), children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+                    ? "fixed inset-y-0 right-0 z-[var(--layer-modal)] flex h-dvh w-full max-w-4xl flex-col border-l bg-background p-0 shadow-[-16px_0_30px_rgba(15,23,42,0.08)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full rounded-none"
+                    : "fixed left-[50%] top-[50%] z-[var(--layer-modal)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: cn("absolute right-4 top-4 rounded-xl opacity-70 transition-all hover:opacity-100 hover:bg-muted/50 p-1 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", interactiveFocusClass), children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/node_modules/@undefineds.co/shared-ui/dist/login.js

@@ -32,7 +32,7 @@ export function LoginCardShell({ children, ariaLabel, overlayClassName, cardClas
     const baseCardClassName = cardSize === 'auto'
         ? 'w-compact-modal warm-card overflow-hidden rounded-xl flex flex-col'
         : 'w-compact-modal h-compact-modal warm-card overflow-hidden rounded-xl flex flex-col';
-    return (_jsx("div", { "data-testid": surfaceTestId, "data-auth-surface-host": surfaceHost, className: cn('fixed inset-0 z-[999] flex items-center justify-center bg-black/50', overlayClassName), children: _jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "data-login-card-size": cardSize, className: cn(baseCardClassName, cardClassName), children: children }) }));
+    return (_jsx("div", { "data-testid": surfaceTestId, "data-auth-surface-host": surfaceHost, className: cn('fixed inset-0 z-[var(--layer-backdrop)] flex items-center justify-center xpod-overlay-scrim', overlayClassName), children: _jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "data-login-card-size": cardSize, className: cn(baseCardClassName, cardClassName), children: children }) }));
 }
 export function LoginErrorBanner({ error, onDismiss, dismissLabel, }) {
     if (!error)

package/node_modules/@undefineds.co/shared-ui/dist/theme.css

@@ -1,27 +1,27 @@
 @layer base {
   :root {
     color-scheme: light;
-    --background: 0 0% 98%;
-    --foreground: 0 0% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 12%;
-    --primary: 252 46% 57%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 12%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 43%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 12%;
+    --background: 42 38.5% 94.9%;
+    --foreground: 30 13.2% 14.9%;
+    --card: 45 33.3% 97.6%;
+    --card-foreground: 30 13.2% 14.9%;
+    --popover: 45 33.3% 97.6%;
+    --popover-foreground: 30 13.2% 14.9%;
+    --primary: 260.6 36.1% 38%;
+    --primary-foreground: 42 38.5% 94.9%;
+    --secondary: 0 10.2% 90.4%;
+    --secondary-foreground: 30 13.2% 14.9%;
+    --muted: 18 15.6% 87.5%;
+    --muted-foreground: 33.3 9.8% 36.1%;
+    --accent: 324 7.5% 86.9%;
+    --accent-foreground: 30 13.2% 14.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 88%;
-    --input: 0 0% 88%;
-    --ring: 252 46% 57%;
-    --lineage: 252 46% 57%;
-    --lineage-foreground: 0 0% 100%;
+    --border: 36 13.5% 85.5%;
+    --input: 36 4% 51%;
+    --ring: 260.6 36.1% 38%;
+    --lineage: 260.6 36.1% 38%;
+    --lineage-foreground: 42 38.5% 94.9%;
     --boundary: 202 34% 37%;
     --boundary-foreground: 0 0% 100%;
     --success: 160 48% 30%;
@@ -36,92 +36,136 @@
     --radius-2xl: 16px;
     --radius-3xl: 16px;
     --radius: 0.5rem;
-    --layout-sidebar: 0 0% 96%;
-    --layout-list-header: 0 0% 100%;
-    --layout-list-hover: 0 0% 96%;
-    --layout-list-item: 0 0% 100%;
-    --layout-list-selected: 252 24% 94%;
-    --layout-content: 0 0% 100%;
-    --purple-medium: 252 46% 57%;
-    --purple-deep: 252 40% 46%;
+    --layout-sidebar: 41.3 38.1% 91.8%;
+    --layout-list-header: 42 38.5% 94.9%;
+    --layout-list-hover: 0 10.2% 90.4%;
+    --layout-list-item: 45 33.3% 97.6%;
+    --layout-list-selected: 324 7.5% 86.9%;
+    --layout-content: 42 38.5% 94.9%;
+    --purple-medium: 260.6 36.1% 38%;
+    --purple-deep: 261.2 35.7% 28%;
     --purple-light: 258 48% 84%;
+    --control-strong: 33.3 9.8% 36.1%;
+    --action-hover: 261 35.7% 32.9%;
+    --action-pressed: 261.2 35.7% 28%;
+    --tint-canvas: 0 10.2% 90.4%;
+    --tint-sunken: 18 15.6% 87.5%;
+    --tint-badge: 324 7.5% 86.9%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   .dark {
     color-scheme: dark;
-    --background: 0 0% 8%;
-    --foreground: 0 0% 96%;
-    --card: 0 0% 10%;
-    --card-foreground: 0 0% 96%;
-    --popover: 0 0% 10%;
-    --popover-foreground: 0 0% 96%;
-    --primary: 252 48% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 15%;
-    --secondary-foreground: 0 0% 96%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 0 0% 68%;
-    --accent: 0 0% 15%;
-    --accent-foreground: 0 0% 96%;
+    --background: 30 13.8% 11.4%;
+    --foreground: 42 38.5% 94.9%;
+    --card: 30 13.2% 14.9%;
+    --card-foreground: 42 38.5% 94.9%;
+    --popover: 30 13.2% 14.9%;
+    --popover-foreground: 42 38.5% 94.9%;
+    --primary: 270 16.7% 71.8%;
+    --primary-foreground: 30 13.8% 11.4%;
+    --secondary: 276.9 11.7% 21.8%;
+    --secondary-foreground: 42 38.5% 94.9%;
+    --muted: 276.9 11.7% 21.8%;
+    --muted-foreground: 34.3 15.8% 73.9%;
+    --accent: 276.9 11.7% 21.8%;
+    --accent-foreground: 42 38.5% 94.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 21%;
-    --input: 0 0% 21%;
-    --ring: 252 48% 65%;
-    --lineage: 252 48% 65%;
-    --lineage-foreground: 0 0% 100%;
+    --border: 30 12.3% 25.5%;
+    --input: 32.7 9.2% 53.3%;
+    --ring: 270 16.7% 71.8%;
+    --lineage: 270 16.7% 71.8%;
+    --lineage-foreground: 30 13.8% 11.4%;
     --boundary: 202 34% 48%;
     --boundary-foreground: 0 0% 100%;
     --success: 160 48% 42%;
     --success-foreground: 0 0% 100%;
     --warning: 44 72% 48%;
     --warning-foreground: 0 0% 100%;
-    --layout-sidebar: 0 0% 15%;
-    --layout-list-header: 0 0% 8%;
-    --layout-list-hover: 0 0% 15%;
-    --layout-list-item: 0 0% 8%;
-    --layout-list-selected: 252 14% 18%;
-    --layout-content: 0 0% 8%;
+    --layout-sidebar: 30 13.6% 8.6%;
+    --layout-list-header: 30 13.8% 11.4%;
+    --layout-list-hover: 276.9 11.7% 21.8%;
+    --layout-list-item: 30 13.2% 14.9%;
+    --layout-list-selected: 276.9 11.7% 21.8%;
+    --layout-content: 30 13.8% 11.4%;
+    --control-strong: 33.9 13.6% 66.9%;
+    --action-hover: 271.6 16.8% 77.8%;
+    --action-pressed: 264.4 18.8% 66.7%;
+    --tint-canvas: 276.9 11.7% 21.8%;
+    --tint-sunken: 276.9 11.7% 21.8%;
+    --tint-badge: 276.9 11.7% 21.8%;
+    --purple-medium: 270 16.7% 71.8%;
+    --purple-deep: 264.4 18.8% 66.7%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   .light {
     color-scheme: light;
-    --background: 0 0% 98%;
-    --foreground: 0 0% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 12%;
-    --primary: 252 46% 57%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 12%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 43%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 12%;
+    --background: 42 38.5% 94.9%;
+    --foreground: 30 13.2% 14.9%;
+    --card: 45 33.3% 97.6%;
+    --card-foreground: 30 13.2% 14.9%;
+    --popover: 45 33.3% 97.6%;
+    --popover-foreground: 30 13.2% 14.9%;
+    --primary: 260.6 36.1% 38%;
+    --primary-foreground: 42 38.5% 94.9%;
+    --secondary: 0 10.2% 90.4%;
+    --secondary-foreground: 30 13.2% 14.9%;
+    --muted: 18 15.6% 87.5%;
+    --muted-foreground: 33.3 9.8% 36.1%;
+    --accent: 324 7.5% 86.9%;
+    --accent-foreground: 30 13.2% 14.9%;
     --destructive: 352 43% 49%;
     --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 88%;
-    --input: 0 0% 88%;
-    --ring: 252 46% 57%;
-    --lineage: 252 46% 57%;
-    --lineage-foreground: 0 0% 100%;
+    --border: 36 13.5% 85.5%;
+    --input: 36 4% 51%;
+    --ring: 260.6 36.1% 38%;
+    --lineage: 260.6 36.1% 38%;
+    --lineage-foreground: 42 38.5% 94.9%;
     --boundary: 202 34% 37%;
     --boundary-foreground: 0 0% 100%;
     --success: 160 48% 30%;
     --success-foreground: 0 0% 100%;
     --warning: 44 72% 36%;
     --warning-foreground: 0 0% 100%;
-    --layout-sidebar: 0 0% 96%;
-    --layout-list-header: 0 0% 100%;
-    --layout-list-hover: 0 0% 96%;
-    --layout-list-item: 0 0% 100%;
-    --layout-list-selected: 252 24% 94%;
-    --layout-content: 0 0% 100%;
-    --purple-medium: 252 46% 57%;
-    --purple-deep: 252 40% 46%;
+    --layout-sidebar: 41.3 38.1% 91.8%;
+    --layout-list-header: 42 38.5% 94.9%;
+    --layout-list-hover: 0 10.2% 90.4%;
+    --layout-list-item: 45 33.3% 97.6%;
+    --layout-list-selected: 324 7.5% 86.9%;
+    --layout-content: 42 38.5% 94.9%;
+    --purple-medium: 260.6 36.1% 38%;
+    --purple-deep: 261.2 35.7% 28%;
     --purple-light: 258 48% 84%;
+    --control-strong: 33.3 9.8% 36.1%;
+    --action-hover: 261 35.7% 32.9%;
+    --action-pressed: 261.2 35.7% 28%;
+    --tint-canvas: 0 10.2% 90.4%;
+    --tint-sunken: 18 15.6% 87.5%;
+    --tint-badge: 324 7.5% 86.9%;
+    /* 公共叠层：§8.2 层级表的唯一来源，页面不得自带数值 */
+    --layer-base: 0;
+    --layer-sticky: 10;
+    --layer-popover: 20;
+    --layer-backdrop: 30;
+    --layer-modal: 40;
+    --layer-toast: 50;
+    --scrim: 30 13.8% 11.4%;
   }
 
   html,
@@ -216,6 +260,11 @@
 }
 
 @layer components {
+  /* 弹层遮罩的唯一实现：颜色来自 --scrim，透明度不散落在页面 */
+  .xpod-overlay-scrim {
+    background-color: hsl(var(--scrim) / 0.45);
+  }
+
   .warm-card {
     border: 1px solid hsl(var(--border) / 0.5);
     border-radius: var(--radius-xl);