From 328da5e6ebc6a6541ff8becb57fc1a3d840b8b9a Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Fri, 28 Aug 2026 18:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=A9=E5=B1=95=E5=85=B1=E4=BA=AB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BA=93=E5=B9=B6=E6=8E=A5=E5=85=A5=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 收口平台异步、筛选、图标、信息、列表、运行态和统计组件到共享包
- 新增 Label、Checkbox、Skeleton、Table 语义基础组件
- 展示页与代表性业务页面改用共享 canonical 导出并补齐交互反馈
- 同步共享样式、组件测试和前端架构决策文档
---
 .../shared-memory/decision-log.md             |   7 +
 ...端架构】共享基础组件库与展示页-2026-08-26.md |  19 +-
 .../src/components/PlatformActionButton.tsx   |  91 ++--
 .../components/PlatformAsyncStatePanel.tsx    |  37 ++
 .../src/components/PlatformEmptyState.tsx     | 130 +++++-
 .../src/components/PlatformFieldLabel.tsx     |  44 ++
 .../src/components/PlatformFilterToolbar.tsx  | 112 +++++
 .../src/components/PlatformIconBadge.tsx      |  92 ++++
 .../src/components/PlatformIconButton.tsx     |  63 +--
 .../src/components/PlatformInfoBlock.tsx      | 100 ++++
 .../components/PlatformNavigableListItem.tsx  |  88 ++++
 .../src/components/PlatformPillBadge.tsx      |  48 +-
 .../src/components/PlatformProgressBar.tsx    |  90 ++++
 .../components/PlatformRuntimeStatusToast.tsx | 103 +++++
 .../src/components/PlatformSegmentedTabs.tsx  | 248 ++++++++++
 .../src/components/PlatformStatGrid.tsx       | 158 +++++++
 .../src/components/PlatformStatusMessage.tsx  | 118 ++++-
 .../src/components/PlatformSubpanel.tsx       | 225 ++++++++-
 .../src/components/PlatformTextField.tsx      | 192 +++++++-
 packages/shared/src/components/index.ts       | 108 ++++-
 .../components/platformActionButtonModel.ts   | 134 ++++++
 .../components/platformComponents.test.tsx    | 108 +++++
 .../src/components/platformPillBadgeModel.ts  |  68 +++
 packages/shared/src/components/styles.css     | 430 +++++++++++++++++-
 packages/shared/src/components/ui.test.tsx    |  44 ++
 packages/shared/src/components/ui.tsx         |  18 +
 .../shared/src/components/ui/checkbox.tsx     |  21 +
 packages/shared/src/components/ui/index.ts    |  17 +
 packages/shared/src/components/ui/label.tsx   |  21 +
 .../shared/src/components/ui/skeleton.tsx     |  16 +
 packages/shared/src/components/ui/table.tsx   | 112 +++++
 src/components/CustomWorldEntityCatalog.tsx   |   2 +-
 .../BarkBattlePreviewCard.tsx                 |   3 +-
 .../common/PlatformActionButton.tsx           |  97 +---
 .../common/PlatformAsyncStatePanel.tsx        |  39 +-
 src/components/common/PlatformEmptyState.tsx  | 129 +-----
 src/components/common/PlatformFieldLabel.tsx  |  52 +--
 .../common/PlatformFilterToolbar.tsx          | 113 +----
 src/components/common/PlatformIconBadge.tsx   |  92 +---
 src/components/common/PlatformIconButton.tsx  | 162 +------
 src/components/common/PlatformInfoBlock.tsx   | 103 +----
 .../common/PlatformNavigableListItem.tsx      |  93 +---
 src/components/common/PlatformPillBadge.tsx   |  46 +-
 src/components/common/PlatformProgressBar.tsx |  93 +---
 .../common/PlatformRuntimeStatusToast.tsx     | 110 +----
 .../common/PlatformSegmentedTabs.tsx          | 249 +---------
 src/components/common/PlatformStatGrid.tsx    | 160 +------
 .../common/PlatformStatusMessage.tsx          | 115 +----
 src/components/common/PlatformSubpanel.tsx    | 232 +---------
 src/components/common/PlatformTextField.tsx   | 192 +-------
 .../common/platformActionButtonModel.ts       | 140 +-----
 .../common/platformPillBadgeModel.ts          |  73 +--
 src/components/rpg-entry/RpgEntryHomeView.tsx |  14 +-
 .../SharedComponentsShowcasePage.tsx          |  70 ++-
 .../SquareHoleResultView.tsx                  |   2 +-
 src/index.css                                 |   1 +
 56 files changed, 3128 insertions(+), 2316 deletions(-)
 create mode 100644 packages/shared/src/components/PlatformAsyncStatePanel.tsx
 create mode 100644 packages/shared/src/components/PlatformFieldLabel.tsx
 create mode 100644 packages/shared/src/components/PlatformFilterToolbar.tsx
 create mode 100644 packages/shared/src/components/PlatformIconBadge.tsx
 create mode 100644 packages/shared/src/components/PlatformInfoBlock.tsx
 create mode 100644 packages/shared/src/components/PlatformNavigableListItem.tsx
 create mode 100644 packages/shared/src/components/PlatformProgressBar.tsx
 create mode 100644 packages/shared/src/components/PlatformRuntimeStatusToast.tsx
 create mode 100644 packages/shared/src/components/PlatformSegmentedTabs.tsx
 create mode 100644 packages/shared/src/components/PlatformStatGrid.tsx
 create mode 100644 packages/shared/src/components/platformActionButtonModel.ts
 create mode 100644 packages/shared/src/components/platformComponents.test.tsx
 create mode 100644 packages/shared/src/components/platformPillBadgeModel.ts
 create mode 100644 packages/shared/src/components/ui/checkbox.tsx
 create mode 100644 packages/shared/src/components/ui/label.tsx
 create mode 100644 packages/shared/src/components/ui/skeleton.tsx
 create mode 100644 packages/shared/src/components/ui/table.tsx

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 7c49f0673..974958cce 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -7759,3 +7759,10 @@ CI 上 `background_agent_runtime_recovers_stale_running_before_pending_task` 在
 - 决策：共享 Web UI 采用 shadcn 的源码归属项目模式，新增 canonical source 放入 `packages/shared/src/components/ui`，统一通过 `packages/shared/src/lib/utils.ts` 的 `cn` 与 CVA 组织变体；不引入 MUI / Ant Design 全量组件，也不一次性重写现有业务 common。
 - 首步：`Button`、`Modal`、`SegmentedTabs`、`Switch`、`Input`、`Textarea`、`Badge`、`Card` 已迁移到 `components/ui` canonical source，保留 `@genarrative/shared/components` 的旧 API 作为兼容适配；Button/Input/Badge 用 CVA，Dialog/Tabs/Switch 按需使用 Radix，Tailwind 4 继续消费现有 `--platform-*` token 与 `.genarrative-ui-*` 样式。原生 Select 暂不迁移。
 - 边界：网站与 Tauri WebView 可消费该 DOM 源码，移动端 React Native 不导入这套组件与 CSS；Radix primitive 仅在 Dialog、Tabs、Switch 等具体组件迁移时按需加入。
+
+## 2026-08-28 共享平台 chrome 与基础语义件继续扩展
+
+- 决策：无业务依赖的 `PlatformAsyncStatePanel`、`PlatformFilterToolbar`、`PlatformIconBadge`、`PlatformInfoBlock`、`PlatformNavigableListItem`、`PlatformRuntimeStatusToast`、`PlatformStatGrid` 实现统一收口到 `packages/shared/src/components`；`src/components/common` 仅保留兼容导出，展示页和部分实际业务页面开始直接消费共享 barrel。
+- 基础件：`components/ui` 新增语义 `Label`、原生 `Checkbox`、`Skeleton` 和语义 `Table` 组合件；继续沿用项目自有 shadcn open-code 源码，不引入额外运行时依赖。
+- 样式：筛选工具栏与可导航列表行的 hover/active/focus/disabled 反馈、移动端断点和独立宿主所需 chrome 放入共享样式；共享主题仍只消费 `--platform-*` token，不依赖网站总 CSS。
+- 验证：相关共享/兼容组件 10 个测试文件共 36 个断言、类型检查、编码检查、定向 ESLint、`git diff --check` 和生产构建均通过。
diff --git a/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md b/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md
index 68463b32b..20c66a2e0 100644
--- a/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md
+++ b/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md
@@ -1,6 +1,6 @@
 # 共享基础组件库与展示页
 
-更新时间：`2026-08-26`
+更新时间：`2026-08-28`
 
 ## 目标
 
@@ -19,17 +19,28 @@
 - `Subpanel`、`Modal`
 - `Status`、`EmptyState`、`Badge`
 - `ProgressBar`、`SegmentedTabs`、`Switch`
-- `Spinner`、`Divider`
+- `Spinner`、`Divider`、`Label`、`Checkbox`、`Skeleton`
+- `Table`（含 `TableHeader`、`TableBody`、`TableRow`、`TableHead`、`TableCell`、`TableCaption`、`TableFooter`）
+
+平台 chrome 组件（同样从 `@genarrative/shared/components` 导出）：
+
+- `PlatformActionButton`、`PlatformIconButton`、`PlatformPillBadge`
+- `PlatformStatusMessage`、`PlatformEmptyState`、`PlatformTextField`
+- `PlatformProgressBar`、`PlatformSegmentedTabs`、`PlatformFieldLabel`、`PlatformSubpanel`
+- `PlatformAsyncStatePanel`、`PlatformFilterToolbar`、`PlatformIconBadge`、`PlatformRuntimeStatusToast`
+- `PlatformInfoBlock`、`PlatformNavigableListItem`、`PlatformStatGrid`
 
 迁移约定：`Button`、`Modal`、`SegmentedTabs`、`Switch`、`Input`、`Textarea`、`Badge`、`Card` 的 canonical source 位于 `packages/shared/src/components/ui`，旧的 `@genarrative/shared/components` API 作为兼容适配层继续保留。`Button`、`Input`、`Badge` 使用 CVA，Dialog/Tabs/Switch 使用按需 Radix primitive；原生 `SelectField` 暂不迁移，避免破坏现有 `<option>` 与表单事件合同。后续组件按使用面逐个迁移。
 
+2026-08-28 平台 chrome 的无业务依赖组件继续完成实现收口：新增 `PlatformAsyncStatePanel`、`PlatformFilterToolbar`、`PlatformIconBadge`、`PlatformInfoBlock`、`PlatformNavigableListItem`、`PlatformRuntimeStatusToast`、`PlatformStatGrid`。这些组件的实现统一位于 `packages/shared/src/components`；`src/components/common` 中同名文件仅保留兼容导出，因此现有业务页面无需一次性改写导入路径，实际渲染已复用共享包实现。带 API、store、编辑器或素材解析副作用的组件仍留在业务层，后续按同一边界逐项评估。
+
 同时提供 `Platform*` 别名，便于从现有平台组件命名迁移；别名不携带平台业务语义。
 
-Web 宿主需要显式启用 Tailwind 4，并引入 `@genarrative/shared/styles.css` 和 `@genarrative/shared/theme.css`；Tauri WebView 与网站共用这套源码，移动端 React Native 不消费 DOM/CSS 组件。组件库不导入网站 `src/index.css`，也不提供页面壳或业务流程。`components.json` 只用于 shadcn CLI 定位源码，不允许覆盖现有业务组件。
+Web 宿主需要显式启用 Tailwind 4，并引入 `@genarrative/shared/styles.css` 和 `@genarrative/shared/theme.css`；Tauri WebView 与网站共用这套源码，移动端 React Native 不消费 DOM/CSS 组件。筛选工具栏所需的 `platform-category-*` chrome 样式也已放入共享样式文件，独立宿主无需依赖网站 `src/index.css`。组件库不提供页面壳或业务流程。`components.json` 只用于 shadcn CLI 定位源码，不允许覆盖现有业务组件。
 
 ## 展示页
 
-网站 `/components`（兼容别名 `/design-system`）是共享组件展示页，不经过账号 Gate。页面按“基础组件”“平台通用组件”“Token”“状态”分区，覆盖公共组件的主要变体、交互态、筛选/标签/媒体/上传/异步状态/指标列表等平台 chrome 和移动端布局；展示数据均为本地静态示例，不调用 API。平台组件分区中的筛选按示例素材状态过滤结果，排序按最近使用或名称重排结果，并在筛选按钮、排序按钮和独立筛选面板之间保持同一份本地状态。展示页可用于网站与客户端接入前的视觉回归和人工验收。平台通用组件示例来自 `src/components/common`，只接入不读取请求、store 或业务实体的 chrome，不把账号、发布和编辑器业务流程嵌入展示页。
+网站 `/components`（兼容别名 `/design-system`）是共享组件展示页，不经过账号 Gate。页面按“基础组件”“平台通用组件”“Token”“状态”分区，覆盖公共组件的主要变体、交互态、筛选/标签/媒体/上传/异步状态/指标列表等平台 chrome 和移动端布局；展示数据均为本地静态示例，不调用 API。平台组件分区中的筛选按示例素材状态过滤结果，排序按最近使用或名称重排结果，并在筛选按钮、排序按钮和独立筛选面板之间保持同一份本地状态。展示页可用于网站与客户端接入前的视觉回归和人工验收。平台通用组件示例优先从 `@genarrative/shared/components` 直接导入，业务代码仍可通过 `src/components/common` 的兼容出口渐进迁移；展示页只接入不读取请求、store 或业务实体的 chrome，不把账号、发布和编辑器业务流程嵌入展示页。
 
 ## 验收
 
diff --git a/packages/shared/src/components/PlatformActionButton.tsx b/packages/shared/src/components/PlatformActionButton.tsx
index 453b35890..9a188f418 100644
--- a/packages/shared/src/components/PlatformActionButton.tsx
+++ b/packages/shared/src/components/PlatformActionButton.tsx
@@ -4,24 +4,25 @@ import type {
   ReactNode,
 } from 'react';
 
-import { Button, type ButtonProps, type SharedButtonSize } from './ui';
+import {
+  getPlatformActionButtonClassName,
+  type PlatformActionButtonAlign,
+  type PlatformActionButtonShape,
+  type PlatformActionButtonSize,
+  type PlatformActionButtonSurface,
+  type PlatformActionButtonTone,
+} from './platformActionButtonModel';
 
-export type PlatformActionButtonTone =
-  | 'primary'
-  | 'secondary'
-  | 'ghost'
-  | 'danger'
-  | 'success'
-  | 'warning'
-  | 'accent'
-  | 'accentSoft';
-export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
-export type PlatformActionButtonSize = 'xxs' | 'xs' | SharedButtonSize;
-export type PlatformActionButtonShape = 'default' | 'pill';
-export type PlatformActionButtonAlign = 'center' | 'start';
+export type {
+  PlatformActionButtonAlign,
+  PlatformActionButtonShape,
+  PlatformActionButtonSize,
+  PlatformActionButtonSurface,
+  PlatformActionButtonTone,
+} from './platformActionButtonModel';
 
 type PlatformActionButtonBaseProps = {
-  children?: ReactNode;
+  children: ReactNode;
   tone?: PlatformActionButtonTone;
   surface?: PlatformActionButtonSurface;
   size?: PlatformActionButtonSize;
@@ -31,8 +32,8 @@ type PlatformActionButtonBaseProps = {
 };
 
 type PlatformActionButtonButtonProps = Omit<
-  ButtonProps,
-  'children' | 'variant' | 'size' | 'fullWidth'
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children'
 > &
   PlatformActionButtonBaseProps & {
     asChild?: false;
@@ -50,25 +51,9 @@ export type PlatformActionButtonProps =
   | PlatformActionButtonButtonProps
   | PlatformActionButtonLabelProps;
 
-const toneVariant: Record<PlatformActionButtonTone, ButtonProps['variant']> = {
-  primary: 'primary',
-  secondary: 'secondary',
-  ghost: 'ghost',
-  danger: 'danger',
-  success: 'primary',
-  warning: 'secondary',
-  accent: 'primary',
-  accentSoft: 'secondary',
-};
-
-function toneClassName(tone: PlatformActionButtonTone) {
-  return tone.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
-}
-
 /**
- * Product-neutral compatibility wrapper for the existing platform action
- * button naming. It keeps the optional label host useful for file inputs while
- * leaving all product state and event handling with the caller.
+ * 平台通用动作按钮。
+ * 收口平台与个人中心主动作按钮的样式族、尺寸、圆角和禁用态 class。
  */
 export function PlatformActionButton({
   tone = 'primary',
@@ -82,23 +67,16 @@ export function PlatformActionButton({
   asChild,
   ...props
 }: PlatformActionButtonProps) {
-  const resolvedSize: SharedButtonSize =
-    size === 'xxs' || size === 'xs' ? 'sm' : size;
-  const modifierClassName = [
-    shape === 'pill' ? 'genarrative-ui-button--pill' : null,
-    align === 'start' ? 'genarrative-ui-button--start' : null,
-    fullWidth ? 'genarrative-ui-button--full-width' : null,
-    `genarrative-ui-button--surface-${surface}`,
-    `genarrative-ui-button--tone-${toneClassName(tone)}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
   const actionClassName = [
-    'genarrative-ui-button',
-    `genarrative-ui-button--${toneVariant[tone]}`,
-    `genarrative-ui-button--${resolvedSize}`,
-    modifierClassName,
+    getPlatformActionButtonClassName({
+      surface,
+      tone,
+      size,
+      shape,
+      align,
+      fullWidth,
+    }),
+    className,
   ]
     .filter(Boolean)
     .join(' ');
@@ -117,15 +95,8 @@ export function PlatformActionButton({
   const { type = 'button', ...buttonProps } =
     props as ButtonHTMLAttributes<HTMLButtonElement>;
   return (
-    <Button
-      {...buttonProps}
-      type={type}
-      fullWidth={fullWidth}
-      size={resolvedSize}
-      variant={toneVariant[tone]}
-      className={modifierClassName}
-    >
+    <button {...buttonProps} type={type} className={actionClassName}>
       {children}
-    </Button>
+    </button>
   );
 }
diff --git a/packages/shared/src/components/PlatformAsyncStatePanel.tsx b/packages/shared/src/components/PlatformAsyncStatePanel.tsx
new file mode 100644
index 000000000..4e7bd92f3
--- /dev/null
+++ b/packages/shared/src/components/PlatformAsyncStatePanel.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+export type PlatformAsyncStatePanelProps = {
+  errorState?: ReactNode;
+  isLoading?: boolean;
+  loadingState?: ReactNode;
+  isEmpty?: boolean;
+  emptyState?: ReactNode;
+  children: ReactNode;
+};
+
+/**
+ * 平台异步状态面板骨架。
+ * 只负责在错误、读取、空态和内容之间切换，具体文案与外观继续交给调用方传入 slot。
+ */
+export function PlatformAsyncStatePanel({
+  errorState,
+  isLoading = false,
+  loadingState = null,
+  isEmpty = false,
+  emptyState = null,
+  children,
+}: PlatformAsyncStatePanelProps) {
+  if (errorState !== undefined && errorState !== null) {
+    return <>{errorState}</>;
+  }
+
+  if (isLoading) {
+    return <>{loadingState}</>;
+  }
+
+  if (isEmpty) {
+    return <>{emptyState}</>;
+  }
+
+  return <>{children}</>;
+}
diff --git a/packages/shared/src/components/PlatformEmptyState.tsx b/packages/shared/src/components/PlatformEmptyState.tsx
index 35ae54d8e..ec881aa58 100644
--- a/packages/shared/src/components/PlatformEmptyState.tsx
+++ b/packages/shared/src/components/PlatformEmptyState.tsx
@@ -1,2 +1,128 @@
-export type { EmptyStateProps as PlatformEmptyStateProps } from './ui';
-export { EmptyState as PlatformEmptyState } from './ui';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+export type PlatformEmptyStateSurface =
+  | 'soft'
+  | 'dashed'
+  | 'subpanel'
+  | 'editorDark';
+export type PlatformEmptyStateSize = 'compact' | 'panel' | 'inline';
+export type PlatformEmptyStateTone = 'base' | 'soft';
+
+type PlatformEmptyStateBaseProps = {
+  children: ReactNode;
+  surface?: PlatformEmptyStateSurface;
+  size?: PlatformEmptyStateSize;
+  tone?: PlatformEmptyStateTone;
+};
+
+type PlatformEmptyStateDivProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  asChild?: false;
+} & PlatformEmptyStateBaseProps;
+
+type PlatformEmptyStateButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children'
+> & {
+  asChild: 'button';
+} & PlatformEmptyStateBaseProps;
+
+export type PlatformEmptyStateProps =
+  | PlatformEmptyStateDivProps
+  | PlatformEmptyStateButtonProps;
+
+type PlatformEmptyStateClassNameOptions = {
+  surface: PlatformEmptyStateSurface;
+  size: PlatformEmptyStateSize;
+  tone: PlatformEmptyStateTone;
+  className?: string;
+};
+
+const PLATFORM_EMPTY_STATE_SURFACE_CLASS: Record<
+  PlatformEmptyStateSurface,
+  string
+> = {
+  soft: 'platform-surface platform-surface--soft rounded-[1.35rem]',
+  dashed:
+    'rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52',
+  subpanel:
+    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74',
+  editorDark: 'rounded-2xl border border-dashed border-white/12 bg-black/20',
+};
+
+const PLATFORM_EMPTY_STATE_SIZE_CLASS: Record<PlatformEmptyStateSize, string> =
+  {
+    compact: 'px-4 py-3 text-sm leading-6',
+    panel:
+      'flex min-h-[14rem] items-center justify-center px-6 text-center text-sm',
+    inline: 'px-4 py-5 text-center text-sm font-semibold',
+  };
+
+const PLATFORM_EMPTY_STATE_TONE_CLASS: Record<PlatformEmptyStateTone, string> =
+  {
+    base: 'text-[var(--platform-text-base)]',
+    soft: 'text-[var(--platform-text-soft)]',
+  };
+
+/**
+ * 平台通用空态和轻量加载态。
+ * 收口平台列表、作品架和素材选择弹窗中重复的空面板外观。
+ */
+function getPlatformEmptyStateClassName({
+  surface,
+  size,
+  tone,
+  className,
+}: PlatformEmptyStateClassNameOptions) {
+  return [
+    'min-w-0',
+    'platform-empty-state',
+    PLATFORM_EMPTY_STATE_SURFACE_CLASS[surface],
+    PLATFORM_EMPTY_STATE_SIZE_CLASS[size],
+    PLATFORM_EMPTY_STATE_TONE_CLASS[tone],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function PlatformEmptyState({
+  children,
+  surface = 'soft',
+  size = 'compact',
+  tone,
+  className,
+  asChild,
+  ...emptyStateProps
+}: PlatformEmptyStateProps) {
+  const resolvedTone =
+    tone ?? (surface === 'subpanel' || size === 'inline' ? 'soft' : 'base');
+  const emptyStateClassName = getPlatformEmptyStateClassName({
+    surface,
+    size,
+    tone: resolvedTone,
+    className,
+  });
+
+  if (asChild === 'button') {
+    const { type = 'button', ...buttonProps } =
+      emptyStateProps as ButtonHTMLAttributes<HTMLButtonElement>;
+
+    return (
+      <button {...buttonProps} type={type} className={emptyStateClassName}>
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      {...(emptyStateProps as HTMLAttributes<HTMLDivElement>)}
+      className={emptyStateClassName}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformFieldLabel.tsx b/packages/shared/src/components/PlatformFieldLabel.tsx
new file mode 100644
index 000000000..d8a86bc2b
--- /dev/null
+++ b/packages/shared/src/components/PlatformFieldLabel.tsx
@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+export type PlatformFieldLabelVariant =
+  | 'field'
+  | 'section'
+  | 'form'
+  | 'inlineForm'
+  | 'pill'
+  | 'accentPill';
+
+export type PlatformFieldLabelProps = {
+  children: ReactNode;
+  variant?: PlatformFieldLabelVariant;
+  className?: string;
+};
+
+const PLATFORM_FIELD_LABEL_CLASS: Record<PlatformFieldLabelVariant, string> = {
+  field: 'text-xs font-bold text-[var(--platform-text-soft)]',
+  section:
+    'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]',
+  form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]',
+  inlineForm:
+    'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]',
+  pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]',
+  accentPill:
+    'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm',
+};
+
+/** 平台字段标签，供子面板和表单控件复用。 */
+export function PlatformFieldLabel({
+  children,
+  variant = 'field',
+  className,
+}: PlatformFieldLabelProps) {
+  return (
+    <span
+      className={[PLATFORM_FIELD_LABEL_CLASS[variant], className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/packages/shared/src/components/PlatformFilterToolbar.tsx b/packages/shared/src/components/PlatformFilterToolbar.tsx
new file mode 100644
index 000000000..3b38c6b77
--- /dev/null
+++ b/packages/shared/src/components/PlatformFilterToolbar.tsx
@@ -0,0 +1,112 @@
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+
+import { PlatformSegmentedTabs } from './PlatformSegmentedTabs';
+
+export interface PlatformFilterToolbarTabItem {
+  id: string;
+  label: string;
+}
+
+export interface PlatformFilterToolbarProps {
+  filterLabel: string;
+  filterCount: number;
+  tabItems: readonly PlatformFilterToolbarTabItem[];
+  activeTabId: string;
+  sortLabel: string;
+  layout: 'mobile' | 'desktop';
+  onOpenFilter: () => void;
+  onTabChange: (id: string) => void;
+  onToggleSort: () => void;
+}
+
+function buildToolbarTabItemClassName(active: boolean) {
+  return [
+    'platform-category-chip shrink-0 !min-h-[2.35rem] !rounded-none !border-0 !bg-transparent !px-0 !shadow-none hover:!bg-transparent',
+    active ? 'platform-category-chip--active' : null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * 平台内容列表的筛选、分类和排序工具栏。
+ * 只负责展示入口与转发回调，筛选条件和排序规则由宿主页面持有。
+ */
+export function PlatformFilterToolbar({
+  filterLabel,
+  filterCount,
+  tabItems,
+  activeTabId,
+  sortLabel,
+  layout,
+  onOpenFilter,
+  onTabChange,
+  onToggleSort,
+}: PlatformFilterToolbarProps) {
+  const isMobileLayout = layout === 'mobile';
+
+  return (
+    <>
+      <div
+        className={
+          isMobileLayout
+            ? 'platform-category-filter-row'
+            : 'mb-4 flex min-w-0 items-center gap-2'
+        }
+      >
+        <button
+          type="button"
+          onClick={onOpenFilter}
+          aria-haspopup="dialog"
+          className="platform-category-filter-button"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+          <span>{filterLabel}</span>
+          <span className="platform-category-filter-button__count">
+            {filterCount}
+          </span>
+        </button>
+        {isMobileLayout ? (
+          <span className="platform-category-filter-divider" />
+        ) : null}
+        <PlatformSegmentedTabs
+          items={tabItems}
+          activeId={activeTabId}
+          onChange={onTabChange}
+          layout="scroll"
+          gap="md"
+          frame="bare"
+          surface="transparent"
+          size="sm"
+          tone="neutral"
+          className={
+            isMobileLayout
+              ? 'platform-category-chip-scroll min-w-0 flex-1'
+              : 'min-w-0 flex-1 pb-1'
+          }
+          itemClassName={(_, active) => buildToolbarTabItemClassName(active)}
+        />
+        {!isMobileLayout ? (
+          <button
+            type="button"
+            onClick={onToggleSort}
+            className="platform-category-sort-button shrink-0"
+          >
+            <span>{sortLabel}</span>
+            <ChevronDown className="h-3.5 w-3.5" />
+          </button>
+        ) : null}
+      </div>
+      {isMobileLayout ? (
+        <button
+          type="button"
+          onClick={onToggleSort}
+          className="platform-category-sort-button"
+        >
+          <span>按{sortLabel}排序</span>
+          <ChevronDown className="h-3.5 w-3.5" />
+        </button>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/shared/src/components/PlatformIconBadge.tsx b/packages/shared/src/components/PlatformIconBadge.tsx
new file mode 100644
index 000000000..accf16c42
--- /dev/null
+++ b/packages/shared/src/components/PlatformIconBadge.tsx
@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+
+export type PlatformIconBadgeSize =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'xxl';
+export type PlatformIconBadgeShape = 'circle' | 'rounded' | 'xl';
+export type PlatformIconBadgeTone =
+  | 'neutral'
+  | 'soft'
+  | 'softBright'
+  | 'hero'
+  | 'heroMuted'
+  | 'darkAmber'
+  | 'success'
+  | 'danger';
+
+export type PlatformIconBadgeProps = {
+  icon: ReactNode;
+  label?: string;
+  size?: PlatformIconBadgeSize;
+  shape?: PlatformIconBadgeShape;
+  tone?: PlatformIconBadgeTone;
+  className?: string;
+};
+
+const PLATFORM_ICON_BADGE_SIZE_CLASS: Record<PlatformIconBadgeSize, string> = {
+  xs: 'h-7 w-7',
+  sm: 'h-9 w-9',
+  base: 'h-10 w-10',
+  md: 'h-11 w-11',
+  lg: 'h-12 w-12',
+  xl: 'h-14 w-14',
+  xxl: 'h-20 w-20',
+};
+
+const PLATFORM_ICON_BADGE_SHAPE_CLASS: Record<PlatformIconBadgeShape, string> =
+  {
+    circle: 'rounded-full',
+    rounded: 'rounded-[0.85rem]',
+    xl: 'rounded-2xl',
+  };
+
+const PLATFORM_ICON_BADGE_TONE_CLASS: Record<PlatformIconBadgeTone, string> = {
+  neutral:
+    'bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
+  soft: 'bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
+  softBright: 'bg-white/84 text-[var(--platform-text-strong)] shadow-sm',
+  hero: 'bg-white/18 text-white',
+  heroMuted: 'bg-white/18 text-white/72',
+  darkAmber: 'border border-amber-400/30 bg-amber-500/15 text-amber-50',
+  success:
+    'bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
+  danger:
+    'bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+};
+
+/**
+ * 平台中性图标徽章。
+ * 统一承接弹窗标题、列表项和小卡片里的非交互图标槽。
+ */
+export function PlatformIconBadge({
+  icon,
+  label,
+  size = 'sm',
+  shape = 'circle',
+  tone = 'neutral',
+  className,
+}: PlatformIconBadgeProps) {
+  return (
+    <span
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={[
+        'platform-icon-badge',
+        'grid shrink-0 place-items-center',
+        PLATFORM_ICON_BADGE_SIZE_CLASS[size],
+        PLATFORM_ICON_BADGE_SHAPE_CLASS[shape],
+        PLATFORM_ICON_BADGE_TONE_CLASS[tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {icon}
+    </span>
+  );
+}
diff --git a/packages/shared/src/components/PlatformIconButton.tsx b/packages/shared/src/components/PlatformIconButton.tsx
index a829a3e78..045f582df 100644
--- a/packages/shared/src/components/PlatformIconButton.tsx
+++ b/packages/shared/src/components/PlatformIconButton.tsx
@@ -8,13 +8,11 @@ import type {
 } from 'react';
 import { forwardRef } from 'react';
 
-import { IconButton, type IconButtonProps, type IconButtonSize } from './ui';
-
 export type PlatformIconButtonVariant =
   | 'platformIcon'
   | 'surfaceFloating'
   | 'darkMini';
-export type PlatformIconButtonSize = IconButtonSize;
+export type PlatformIconButtonSize = 'sm' | 'md' | 'lg';
 
 type PlatformIconButtonBaseProps = {
   label: string;
@@ -24,8 +22,8 @@ type PlatformIconButtonBaseProps = {
 };
 
 type PlatformIconButtonButtonProps = Omit<
-  IconButtonProps,
-  'variant' | 'children'
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-label' | 'children'
 > &
   PlatformIconButtonBaseProps & {
     asChild?: false;
@@ -53,12 +51,10 @@ export type PlatformIconButtonProps =
   | PlatformIconButtonLabelProps
   | PlatformIconButtonSpanButtonProps;
 
-const variantClassName: Record<PlatformIconButtonVariant, string> = {
-  platformIcon: 'genarrative-ui-icon-button--surface-platform',
-  surfaceFloating: 'genarrative-ui-icon-button--surface-floating',
-  darkMini: 'genarrative-ui-icon-button--surface-dark-mini',
-};
-
+/**
+ * 平台通用图标动作按钮。
+ * 统一承接纯图标动作、图标上传 label 和带短标签的浮动图标动作。
+ */
 export const PlatformIconButton = forwardRef<
   HTMLButtonElement | HTMLLabelElement | HTMLSpanElement,
   PlatformIconButtonProps
@@ -75,13 +71,15 @@ export const PlatformIconButton = forwardRef<
   },
   ref,
 ) {
-  const resolvedVariant = variant === 'darkMini' ? 'quiet' : 'default';
-  const actionClassName = [
-    'genarrative-ui-icon-button',
-    `genarrative-ui-icon-button--${resolvedVariant}`,
-    variantClassName[variant],
-    className,
-  ]
+  const variantClassName = {
+    platformIcon: 'platform-icon-button',
+    surfaceFloating:
+      'inline-flex items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] disabled:cursor-not-allowed disabled:opacity-55',
+    darkMini:
+      'inline-flex items-center justify-center rounded-full border border-white/16 bg-black/55 text-white transition-colors hover:bg-black/70 disabled:cursor-not-allowed disabled:opacity-55',
+  }[variant];
+
+  const actionClassName = [variantClassName, className]
     .filter(Boolean)
     .join(' ');
 
@@ -91,9 +89,9 @@ export const PlatformIconButton = forwardRef<
         {...(actionProps as LabelHTMLAttributes<HTMLLabelElement>)}
         ref={ref as Ref<HTMLLabelElement>}
         title={title}
-        className={`${actionClassName} genarrative-ui-icon-button--md`}
+        className={actionClassName}
       >
-        <span className="genarrative-ui-visually-hidden">{label}</span>
+        <span className="sr-only">{label}</span>
         {icon}
         {children}
       </label>
@@ -107,7 +105,9 @@ export const PlatformIconButton = forwardRef<
       };
     const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
       onKeyDown?.(event);
-      if (event.defaultPrevented || disabled) return;
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
         event.currentTarget.click();
@@ -118,14 +118,14 @@ export const PlatformIconButton = forwardRef<
       <span
         {...spanProps}
         ref={ref as Ref<HTMLSpanElement>}
-        aria-disabled={disabled || undefined}
+        aria-disabled={disabled}
         aria-label={label}
-        className={`${actionClassName} genarrative-ui-icon-button--md`}
+        className={actionClassName}
         onClick={disabled ? undefined : onClick}
         onKeyDown={handleKeyDown}
         role="button"
         tabIndex={disabled ? -1 : (tabIndex ?? 0)}
-        title={title ?? label}
+        title={title}
       >
         {icon}
         {children}
@@ -135,17 +135,18 @@ export const PlatformIconButton = forwardRef<
 
   const { type = 'button', ...buttonProps } =
     actionProps as ButtonHTMLAttributes<HTMLButtonElement>;
+
   return (
-    <IconButton
+    <button
       {...buttonProps}
       ref={ref as Ref<HTMLButtonElement>}
       type={type}
-      label={label}
-      icon={icon}
-      children={children}
-      variant={resolvedVariant}
+      aria-label={label}
+      title={title}
       className={actionClassName}
-      title={title ?? label}
-    />
+    >
+      {icon}
+      {children}
+    </button>
   );
 });
diff --git a/packages/shared/src/components/PlatformInfoBlock.tsx b/packages/shared/src/components/PlatformInfoBlock.tsx
new file mode 100644
index 000000000..fc760df31
--- /dev/null
+++ b/packages/shared/src/components/PlatformInfoBlock.tsx
@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react';
+
+export type PlatformInfoBlockVariant = 'default' | 'compactRow';
+
+export type PlatformInfoBlockProps = {
+  label?: ReactNode;
+  children: ReactNode;
+  variant?: PlatformInfoBlockVariant;
+  multiline?: boolean;
+  className?: string;
+  labelClassName?: string;
+  valueClassName?: string;
+};
+
+const PLATFORM_INFO_BLOCK_CLASS: Record<PlatformInfoBlockVariant, string> = {
+  default:
+    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-2',
+  compactRow:
+    'flex justify-between gap-2 rounded-[0.85rem] border-0 bg-white/74 px-2.5 py-1.5 sm:gap-3 sm:px-3 sm:py-2',
+};
+
+const PLATFORM_INFO_BLOCK_LABEL_CLASS: Record<
+  PlatformInfoBlockVariant,
+  string
+> = {
+  default: 'text-xs font-bold text-[var(--platform-text-soft)]',
+  compactRow: 'text-xs font-bold text-[var(--platform-text-muted)] sm:text-sm',
+};
+
+function getValueClassName({
+  hasLabel,
+  multiline,
+  variant,
+  valueClassName,
+}: {
+  hasLabel: boolean;
+  multiline: boolean;
+  variant: PlatformInfoBlockVariant;
+  valueClassName?: string;
+}) {
+  if (variant === 'compactRow') {
+    return [
+      'break-words text-right text-xs font-black leading-5 text-[var(--platform-text-strong)] sm:text-sm',
+      valueClassName,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  return [
+    'break-words text-sm text-[var(--platform-text-strong)]',
+    hasLabel ? 'mt-1' : null,
+    multiline ? 'whitespace-pre-wrap leading-6' : 'font-semibold leading-5',
+    valueClassName,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * 平台信息展示块。
+ * 统一承接弹窗和详情页中“短标签 + 白底内容”的只读信息 chrome。
+ */
+export function PlatformInfoBlock({
+  label,
+  children,
+  variant = 'default',
+  multiline = false,
+  className,
+  labelClassName,
+  valueClassName,
+}: PlatformInfoBlockProps) {
+  return (
+    <div
+      className={[PLATFORM_INFO_BLOCK_CLASS[variant], className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {label ? (
+        <div
+          className={[PLATFORM_INFO_BLOCK_LABEL_CLASS[variant], labelClassName]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {label}
+        </div>
+      ) : null}
+      <div
+        className={getValueClassName({
+          hasLabel: Boolean(label),
+          multiline,
+          variant,
+          valueClassName,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformNavigableListItem.tsx b/packages/shared/src/components/PlatformNavigableListItem.tsx
new file mode 100644
index 000000000..e46b1590c
--- /dev/null
+++ b/packages/shared/src/components/PlatformNavigableListItem.tsx
@@ -0,0 +1,88 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export type PlatformNavigableListItemAlign = 'center' | 'start';
+
+export type PlatformNavigableListItemProps = Omit<
+  ComponentPropsWithoutRef<'button'>,
+  'children' | 'type'
+> & {
+  children: ReactNode;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  align?: PlatformNavigableListItemAlign;
+  leadingClassName?: string;
+  trailingClassName?: string;
+  bodyClassName?: string;
+};
+
+const ALIGN_CLASS: Record<PlatformNavigableListItemAlign, string> = {
+  center: 'items-center gap-3',
+  start: 'items-start gap-4',
+};
+
+/**
+ * 轻量可导航列表行骨架。
+ * 只统一 button 语义与 left-content/right-affordance 结构，不持有业务文案、badge 或封面规则。
+ */
+export function PlatformNavigableListItem({
+  children,
+  leading = null,
+  trailing = null,
+  align = 'center',
+  className,
+  leadingClassName,
+  trailingClassName,
+  bodyClassName,
+  ...props
+}: PlatformNavigableListItemProps) {
+  return (
+    <button
+      type="button"
+      className={[
+        'platform-navigable-list-item flex w-full min-w-0 text-left',
+        ALIGN_CLASS[align],
+        className ?? null,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    >
+      {leading ? (
+        <div
+          className={[
+            'platform-navigable-list-item__leading shrink-0',
+            leadingClassName ?? null,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {leading}
+        </div>
+      ) : null}
+
+      <div
+        className={[
+          'platform-navigable-list-item__body min-w-0 flex-1',
+          bodyClassName ?? null,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {children}
+      </div>
+
+      {trailing ? (
+        <div
+          className={[
+            'platform-navigable-list-item__trailing shrink-0',
+            trailingClassName ?? null,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {trailing}
+        </div>
+      ) : null}
+    </button>
+  );
+}
diff --git a/packages/shared/src/components/PlatformPillBadge.tsx b/packages/shared/src/components/PlatformPillBadge.tsx
index 4f30717bc..48f3b4069 100644
--- a/packages/shared/src/components/PlatformPillBadge.tsx
+++ b/packages/shared/src/components/PlatformPillBadge.tsx
@@ -1,5 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import {
+  getPlatformPillBadgeClassName,
+  type PlatformPillBadgeSize,
+  type PlatformPillBadgeTone,
+} from './platformPillBadgeModel';
+
 export type {
-  BadgeProps as PlatformPillBadgeProps,
-  BadgeTone as PlatformPillBadgeTone,
-} from './ui';
-export { Badge as PlatformPillBadge } from './ui';
+  PlatformPillBadgeSize,
+  PlatformPillBadgeTone,
+} from './platformPillBadgeModel';
+
+export type PlatformPillBadgeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  tone?: PlatformPillBadgeTone;
+  size?: PlatformPillBadgeSize;
+  icon?: ReactNode;
+  children: ReactNode;
+};
+
+/**
+ * 平台胶囊状态标签。
+ * 统一承接结果页、作品卡和配置摘要里的小型状态 / 标签 chip。
+ */
+export function PlatformPillBadge({
+  tone = 'neutral',
+  size = 'sm',
+  icon,
+  children,
+  className,
+  ...spanProps
+}: PlatformPillBadgeProps) {
+  return (
+    <span
+      {...spanProps}
+      className={getPlatformPillBadgeClassName({ tone, size, className })}
+    >
+      {icon}
+      {children}
+    </span>
+  );
+}
diff --git a/packages/shared/src/components/PlatformProgressBar.tsx b/packages/shared/src/components/PlatformProgressBar.tsx
new file mode 100644
index 000000000..042aed8ef
--- /dev/null
+++ b/packages/shared/src/components/PlatformProgressBar.tsx
@@ -0,0 +1,90 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type PlatformProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export type PlatformProgressBarProps = {
+  value: number;
+  minVisibleValue?: number;
+  size?: PlatformProgressBarSize;
+  ariaLabel?: string;
+  labelledBy?: string;
+  indeterminate?: boolean;
+  className?: string;
+  fillClassName?: string;
+  fillStyle?: CSSProperties;
+  trackStyle?: CSSProperties;
+  children?: ReactNode;
+};
+
+const PLATFORM_PROGRESS_BAR_SIZE_CLASS: Record<
+  PlatformProgressBarSize,
+  string
+> = {
+  xs: 'h-2',
+  sm: 'h-2.5',
+  md: 'h-3',
+  lg: 'h-12',
+};
+
+function clampProgressValue(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.min(100, Math.max(0, Math.round(value)));
+}
+
+/**
+ * 平台通用进度条。
+ * 统一承接 progressbar 语义、platform-progress-track 壳和填充宽度计算。
+ */
+export function PlatformProgressBar({
+  value,
+  minVisibleValue = 0,
+  size = 'xs',
+  ariaLabel,
+  labelledBy,
+  indeterminate = false,
+  className,
+  fillClassName,
+  fillStyle,
+  trackStyle,
+  children,
+}: PlatformProgressBarProps) {
+  const progress = clampProgressValue(value);
+  const visibleProgress =
+    progress <= 0 ? 0 : Math.max(minVisibleValue, progress);
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={indeterminate ? undefined : progress}
+      aria-label={ariaLabel}
+      aria-labelledby={labelledBy}
+      className={[
+        'platform-progress-track relative overflow-hidden rounded-full',
+        PLATFORM_PROGRESS_BAR_SIZE_CLASS[size],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={trackStyle}
+    >
+      <div
+        className={[
+          'h-full rounded-full transition-[width] duration-300',
+          fillClassName,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        style={{
+          width: `${visibleProgress}%`,
+          ...fillStyle,
+        }}
+      />
+      {children}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformRuntimeStatusToast.tsx b/packages/shared/src/components/PlatformRuntimeStatusToast.tsx
new file mode 100644
index 000000000..6a7286b2f
--- /dev/null
+++ b/packages/shared/src/components/PlatformRuntimeStatusToast.tsx
@@ -0,0 +1,103 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PlatformRuntimeStatusTone =
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'neutral';
+export type PlatformRuntimeStatusSurface = 'light' | 'dark' | 'solid';
+export type PlatformRuntimeStatusSize = 'xs' | 'sm' | 'md';
+export type PlatformRuntimeStatusShape = 'pill' | 'rounded';
+
+export type PlatformRuntimeStatusToastProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  tone: PlatformRuntimeStatusTone;
+  surface?: PlatformRuntimeStatusSurface;
+  size?: PlatformRuntimeStatusSize;
+  shape?: PlatformRuntimeStatusShape;
+  children: ReactNode;
+};
+
+const PLATFORM_RUNTIME_STATUS_SURFACE_CLASS: Record<
+  PlatformRuntimeStatusSurface,
+  Record<PlatformRuntimeStatusTone, string>
+> = {
+  light: {
+    error:
+      'border-white/70 bg-white/86 text-[var(--platform-button-danger-text)]',
+    success: 'border-white/70 bg-white/86 text-[var(--platform-success-text)]',
+    info: 'border-white/70 bg-white/86 text-[var(--platform-cool-text)]',
+    warning: 'border-white/70 bg-white/86 text-[var(--platform-warm-text)]',
+    neutral: 'border-white/70 bg-white/86 text-[var(--platform-text-base)]',
+  },
+  dark: {
+    error: 'border-rose-200/35 bg-rose-400/18 text-rose-50',
+    success: 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50',
+    info: 'border-sky-200/30 bg-sky-400/16 text-sky-50',
+    warning: 'border-amber-200/35 bg-amber-400/18 text-amber-50',
+    neutral: 'border-white/15 bg-white/12 text-white/82',
+  },
+  solid: {
+    error: 'border-transparent bg-rose-600 text-white',
+    success: 'border-transparent bg-emerald-600 text-white',
+    info: 'border-transparent bg-sky-600 text-white',
+    warning: 'border-transparent bg-amber-500 text-amber-950',
+    neutral: 'border-transparent bg-slate-800 text-white',
+  },
+};
+
+const PLATFORM_RUNTIME_STATUS_SIZE_CLASS: Record<
+  PlatformRuntimeStatusSize,
+  string
+> = {
+  xs: 'px-3 py-1 text-xs leading-5',
+  sm: 'px-3 py-2 text-sm leading-5',
+  md: 'px-4 py-3 text-sm leading-6',
+};
+
+const PLATFORM_RUNTIME_STATUS_SHAPE_CLASS: Record<
+  PlatformRuntimeStatusShape,
+  string
+> = {
+  pill: 'rounded-full',
+  rounded: 'rounded-[1.2rem]',
+};
+
+/**
+ * 运行态 HUD 状态提示。
+ * 收口游戏内短错误、成功和反馈 chip，位置与玩法强品牌视觉仍由调用方控制。
+ */
+export function PlatformRuntimeStatusToast({
+  tone,
+  surface = 'light',
+  size = 'sm',
+  shape = 'pill',
+  children,
+  className,
+  role,
+  ...divProps
+}: PlatformRuntimeStatusToastProps) {
+  const ariaLive = divProps['aria-live'];
+
+  return (
+    <div
+      {...divProps}
+      role={role ?? (tone === 'error' ? 'alert' : 'status')}
+      aria-live={ariaLive ?? (tone === 'error' ? 'assertive' : 'polite')}
+      className={[
+        'platform-runtime-status-toast inline-flex max-w-full items-center justify-center gap-1.5 border text-center font-black shadow-sm backdrop-blur',
+        PLATFORM_RUNTIME_STATUS_SIZE_CLASS[size],
+        PLATFORM_RUNTIME_STATUS_SHAPE_CLASS[shape],
+        PLATFORM_RUNTIME_STATUS_SURFACE_CLASS[surface][tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformSegmentedTabs.tsx b/packages/shared/src/components/PlatformSegmentedTabs.tsx
new file mode 100644
index 000000000..a3f4c4318
--- /dev/null
+++ b/packages/shared/src/components/PlatformSegmentedTabs.tsx
@@ -0,0 +1,248 @@
+import type { ReactNode } from 'react';
+
+export type PlatformSegmentedTabsColumns =
+  | 'one'
+  | 'two'
+  | 'three'
+  | 'four'
+  | 'threeToSix';
+export type PlatformSegmentedTabsGap = 'sm' | 'md';
+export type PlatformSegmentedTabsRadius = 'md' | 'lg' | 'xl';
+export type PlatformSegmentedTabsSize =
+  | 'sm'
+  | 'md'
+  | 'compact'
+  | 'choice'
+  | 'tab';
+export type PlatformSegmentedTabsSurface = 'default' | 'soft' | 'transparent';
+export type PlatformSegmentedTabsTone =
+  | 'neutral'
+  | 'warm'
+  | 'rose'
+  | 'underline';
+export type PlatformSegmentedTabsFrame = 'panel' | 'bare';
+export type PlatformSegmentedTabsSemantics = 'segment' | 'tabs';
+export type PlatformSegmentedTabsLayout = 'grid' | 'scroll';
+
+export type PlatformSegmentedTabItem<TId extends string = string> = {
+  id: TId;
+  label: ReactNode;
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+export type PlatformSegmentedTabsProps<TId extends string = string> = {
+  items: readonly PlatformSegmentedTabItem<TId>[];
+  activeId: TId;
+  onChange: (id: TId) => void;
+  columns?: PlatformSegmentedTabsColumns;
+  gap?: PlatformSegmentedTabsGap;
+  radius?: PlatformSegmentedTabsRadius;
+  size?: PlatformSegmentedTabsSize;
+  surface?: PlatformSegmentedTabsSurface;
+  tone?: PlatformSegmentedTabsTone;
+  frame?: PlatformSegmentedTabsFrame;
+  semantics?: PlatformSegmentedTabsSemantics;
+  layout?: PlatformSegmentedTabsLayout;
+  ariaLabel?: string;
+  truncateLabels?: boolean;
+  disabled?: boolean;
+  className?: string;
+  itemClassName?:
+    | string
+    | ((item: PlatformSegmentedTabItem<TId>, active: boolean) => string | null);
+};
+
+const PLATFORM_SEGMENTED_TABS_COLUMNS_CLASS: Record<
+  PlatformSegmentedTabsColumns,
+  string
+> = {
+  one: 'grid-cols-1',
+  two: 'grid-cols-2',
+  three: 'grid-cols-3',
+  four: 'grid-cols-4',
+  threeToSix: 'grid-cols-3 sm:grid-cols-6',
+};
+
+const PLATFORM_SEGMENTED_TABS_GAP_CLASS: Record<
+  PlatformSegmentedTabsGap,
+  string
+> = {
+  sm: 'gap-1',
+  md: 'gap-2',
+};
+
+const PLATFORM_SEGMENTED_TABS_RADIUS_CLASS: Record<
+  PlatformSegmentedTabsRadius,
+  string
+> = {
+  md: 'rounded-[1rem]',
+  lg: 'rounded-[1.1rem]',
+  xl: 'rounded-[1.25rem]',
+};
+
+const PLATFORM_SEGMENTED_TABS_SURFACE_CLASS: Record<
+  PlatformSegmentedTabsSurface,
+  string
+> = {
+  default: 'bg-white/62',
+  soft: 'bg-white/58',
+  transparent: 'bg-transparent',
+};
+
+const PLATFORM_SEGMENTED_TABS_FRAME_CLASS: Record<
+  PlatformSegmentedTabsFrame,
+  string
+> = {
+  panel: 'border border-[var(--platform-subpanel-border)] p-1',
+  bare: 'border-0 p-0',
+};
+
+const PLATFORM_SEGMENTED_TABS_ITEM_SIZE_CLASS: Record<
+  PlatformSegmentedTabsSize,
+  string
+> = {
+  sm: 'min-h-10 rounded-[0.9rem] px-3 text-sm font-bold',
+  md: 'min-h-10 rounded-[1rem] px-3 text-sm font-bold',
+  compact: 'min-h-10 rounded-[0.8rem] px-2 text-xs font-black sm:text-sm',
+  choice: 'min-h-10 rounded-[0.9rem] px-1.5 py-2 text-center',
+  tab: 'relative h-12 rounded-none px-2 text-base font-semibold sm:text-lg',
+};
+
+const PLATFORM_SEGMENTED_TABS_TONE_CLASS: Record<
+  PlatformSegmentedTabsTone,
+  { active: string; idle: string }
+> = {
+  neutral: {
+    active: 'bg-white text-[var(--platform-text-strong)] shadow-sm',
+    idle: 'text-[var(--platform-text-base)] hover:bg-white/60',
+  },
+  warm: {
+    active:
+      'bg-[var(--platform-warm-bg)] text-[var(--platform-text-strong)] shadow-[inset_0_0_0_1px_rgba(204,117,76,0.18)]',
+    idle: 'text-[var(--platform-text-base)] hover:bg-white/58',
+  },
+  rose: {
+    active:
+      'border border-[#ff7890] bg-[linear-gradient(180deg,#ff7890_0%,#ff4f6a_100%)] text-white shadow-[0_8px_18px_rgba(244,63,94,0.16)]',
+    idle: 'border border-[var(--platform-subpanel-border)] bg-white/76 text-[var(--platform-text-strong)] hover:border-[var(--platform-surface-hover-border)] hover:bg-white',
+  },
+  underline: {
+    active: 'text-[var(--platform-text-strong)]',
+    idle: 'text-[var(--platform-text-muted)] hover:text-[var(--platform-text-base)]',
+  },
+};
+
+function resolveItemClassName<TId extends string>({
+  active,
+  disabled,
+  item,
+  itemClassName,
+  size,
+  tone,
+}: {
+  active: boolean;
+  disabled: boolean;
+  item: PlatformSegmentedTabItem<TId>;
+  itemClassName?: PlatformSegmentedTabsProps<TId>['itemClassName'];
+  size: PlatformSegmentedTabsSize;
+  tone: PlatformSegmentedTabsTone;
+}) {
+  const extraClassName =
+    typeof itemClassName === 'function'
+      ? itemClassName(item, active)
+      : itemClassName;
+
+  return [
+    'min-w-0 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)]',
+    PLATFORM_SEGMENTED_TABS_ITEM_SIZE_CLASS[size],
+    active
+      ? PLATFORM_SEGMENTED_TABS_TONE_CLASS[tone].active
+      : PLATFORM_SEGMENTED_TABS_TONE_CLASS[tone].idle,
+    disabled ? 'cursor-not-allowed opacity-55 hover:bg-transparent' : null,
+    extraClassName,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/** 平台白底分段选择控件，统一承接 tab / segment button chrome。 */
+export function PlatformSegmentedTabs<TId extends string = string>({
+  items,
+  activeId,
+  onChange,
+  columns = 'two',
+  gap = 'md',
+  radius = 'xl',
+  size = 'md',
+  surface = 'default',
+  tone = 'neutral',
+  frame = 'panel',
+  semantics = 'segment',
+  layout = 'grid',
+  ariaLabel,
+  truncateLabels = false,
+  disabled = false,
+  className,
+  itemClassName,
+}: PlatformSegmentedTabsProps<TId>) {
+  return (
+    <div
+      role={semantics === 'tabs' ? 'tablist' : undefined}
+      aria-label={semantics === 'tabs' ? ariaLabel : undefined}
+      className={[
+        layout === 'scroll'
+          ? 'flex min-w-0 items-center overflow-x-auto scrollbar-hide'
+          : 'grid',
+        PLATFORM_SEGMENTED_TABS_FRAME_CLASS[frame],
+        PLATFORM_SEGMENTED_TABS_GAP_CLASS[gap],
+        layout === 'grid'
+          ? PLATFORM_SEGMENTED_TABS_COLUMNS_CLASS[columns]
+          : null,
+        PLATFORM_SEGMENTED_TABS_RADIUS_CLASS[radius],
+        PLATFORM_SEGMENTED_TABS_SURFACE_CLASS[surface],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {items.map((item) => {
+        const active = activeId === item.id;
+        const itemDisabled = disabled || Boolean(item.disabled);
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role={semantics === 'tabs' ? 'tab' : undefined}
+            aria-label={item.ariaLabel}
+            aria-selected={semantics === 'tabs' ? active : undefined}
+            aria-pressed={semantics === 'segment' ? active : undefined}
+            disabled={itemDisabled}
+            onClick={() => {
+              if (!itemDisabled) {
+                onChange(item.id);
+              }
+            }}
+            className={resolveItemClassName({
+              active,
+              disabled: itemDisabled,
+              item,
+              itemClassName,
+              size,
+              tone,
+            })}
+          >
+            {truncateLabels ? (
+              <span className="block truncate">{item.label}</span>
+            ) : (
+              item.label
+            )}
+            {tone === 'underline' && active ? (
+              <span className="absolute bottom-1 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full bg-[var(--platform-accent)]" />
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformStatGrid.tsx b/packages/shared/src/components/PlatformStatGrid.tsx
new file mode 100644
index 000000000..9919cdeb3
--- /dev/null
+++ b/packages/shared/src/components/PlatformStatGrid.tsx
@@ -0,0 +1,158 @@
+import type { ReactNode } from 'react';
+
+export type PlatformStatGridColumns = 'two' | 'three' | 'four' | 'twoToFour';
+export type PlatformStatGridDensity = 'compact' | 'default';
+export type PlatformStatGridOrder = 'valueFirst' | 'labelFirst';
+export type PlatformStatGridSurface = 'soft' | 'plain';
+export type PlatformStatGridTextAlign = 'left' | 'center';
+
+export type PlatformStatGridItem = {
+  label?: ReactNode;
+  value: ReactNode;
+  key?: string;
+};
+
+export type PlatformStatGridProps = {
+  items: readonly PlatformStatGridItem[];
+  columns?: PlatformStatGridColumns;
+  density?: PlatformStatGridDensity;
+  order?: PlatformStatGridOrder;
+  surface?: PlatformStatGridSurface;
+  textAlign?: PlatformStatGridTextAlign;
+  className?: string;
+  itemClassName?:
+    | string
+    | ((item: PlatformStatGridItem, index: number) => string | null);
+};
+
+const PLATFORM_STAT_GRID_COLUMNS_CLASS: Record<
+  PlatformStatGridColumns,
+  string
+> = {
+  two: 'grid-cols-2',
+  three: 'grid-cols-3',
+  four: 'grid-cols-4',
+  twoToFour: 'grid-cols-2 sm:grid-cols-4',
+};
+
+const PLATFORM_STAT_GRID_DENSITY_CLASS: Record<
+  PlatformStatGridDensity,
+  { item: string; value: string; label: string }
+> = {
+  compact: {
+    item: 'rounded-[1rem] px-2 py-2',
+    value: 'text-sm font-black',
+    label: 'mt-1 text-[0.68rem] font-bold tracking-[0.14em]',
+  },
+  default: {
+    item: 'rounded-[1rem] px-3 py-3',
+    value: 'text-lg font-black',
+    label: 'mt-1 text-[11px] font-bold tracking-[0.14em]',
+  },
+};
+
+const PLATFORM_STAT_GRID_SURFACE_CLASS: Record<
+  PlatformStatGridSurface,
+  string
+> = {
+  soft: 'bg-white/76',
+  plain: 'border border-[var(--platform-subpanel-border)] bg-white/68',
+};
+
+const PLATFORM_STAT_GRID_TEXT_ALIGN_CLASS: Record<
+  PlatformStatGridTextAlign,
+  string
+> = {
+  left: 'text-left',
+  center: 'text-center',
+};
+
+/**
+ * 平台统计小卡网格。
+ * 统一承接结果页里的“数值 / 标签”或轻量状态 chip 布局。
+ */
+export function PlatformStatGrid({
+  items,
+  columns = 'three',
+  density = 'default',
+  order = 'valueFirst',
+  surface = 'soft',
+  textAlign = 'center',
+  className,
+  itemClassName,
+}: PlatformStatGridProps) {
+  const densityClass = PLATFORM_STAT_GRID_DENSITY_CLASS[density];
+
+  return (
+    <div
+      className={[
+        'grid gap-2',
+        PLATFORM_STAT_GRID_COLUMNS_CLASS[columns],
+        PLATFORM_STAT_GRID_TEXT_ALIGN_CLASS[textAlign],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {items.map((item, index) => {
+        const extraClassName =
+          typeof itemClassName === 'function'
+            ? itemClassName(item, index)
+            : itemClassName;
+        const key =
+          item.key ??
+          (typeof item.label === 'string'
+            ? item.label
+            : typeof item.value === 'string'
+              ? item.value
+              : index);
+
+        const valueNode = (
+          <div
+            className={[
+              densityClass.value,
+              'text-[var(--platform-text-strong)]',
+            ].join(' ')}
+          >
+            {item.value}
+          </div>
+        );
+        const labelNode = item.label ? (
+          <div
+            className={[
+              densityClass.label,
+              'text-[var(--platform-text-soft)]',
+            ].join(' ')}
+          >
+            {item.label}
+          </div>
+        ) : null;
+
+        return (
+          <div
+            key={key}
+            className={[
+              densityClass.item,
+              PLATFORM_STAT_GRID_SURFACE_CLASS[surface],
+              extraClassName,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {order === 'labelFirst' ? (
+              <>
+                {labelNode}
+                {valueNode}
+              </>
+            ) : (
+              <>
+                {valueNode}
+                {labelNode}
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformStatusMessage.tsx b/packages/shared/src/components/PlatformStatusMessage.tsx
index 4f3bf144d..0572038f5 100644
--- a/packages/shared/src/components/PlatformStatusMessage.tsx
+++ b/packages/shared/src/components/PlatformStatusMessage.tsx
@@ -1,5 +1,113 @@
-export type {
-  StatusProps as PlatformStatusMessageProps,
-  StatusTone as PlatformStatusMessageTone,
-} from './ui';
-export { Status as PlatformStatusMessage } from './ui';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PlatformStatusMessageTone =
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'neutral';
+export type PlatformStatusMessageSurface =
+  | 'light'
+  | 'tinted'
+  | 'platform'
+  | 'profile'
+  | 'editorDark';
+export type PlatformStatusMessageSize = 'xs' | 'sm' | 'md';
+
+export type PlatformStatusMessageProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  tone: PlatformStatusMessageTone;
+  surface?: PlatformStatusMessageSurface;
+  size?: PlatformStatusMessageSize;
+  remapSurface?: boolean;
+  children: ReactNode;
+};
+
+const PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE: Record<
+  PlatformStatusMessageSurface,
+  Record<PlatformStatusMessageTone, string>
+> = {
+  light: {
+    error: 'border-rose-200 bg-rose-50 text-rose-700',
+    success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-200 bg-amber-50 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  tinted: {
+    error: 'border-rose-400/20 bg-rose-500/10 text-rose-700',
+    success: 'border-emerald-300/25 bg-emerald-500/12 text-emerald-700',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-300/30 bg-amber-500/12 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/20 text-[var(--platform-text-base)]',
+  },
+  platform: {
+    error:
+      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+    success:
+      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning:
+      'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  profile: {
+    error:
+      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+    success:
+      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
+    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+    warning: 'border-amber-300 bg-amber-500/12 text-amber-900',
+    neutral:
+      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
+  },
+  editorDark: {
+    error: 'border-rose-300/15 bg-rose-500/10 text-rose-50/90',
+    success: 'border-emerald-300/15 bg-emerald-500/10 text-emerald-50/90',
+    info: 'border-sky-300/15 bg-sky-500/10 text-sky-50/90',
+    warning: 'border-amber-300/15 bg-amber-500/10 text-amber-50/90',
+    neutral: 'border-white/10 bg-black/20 text-zinc-300',
+  },
+};
+
+const PLATFORM_STATUS_MESSAGE_SIZE_CLASS: Record<
+  PlatformStatusMessageSize,
+  string
+> = {
+  xs: 'px-3 py-2 text-xs',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-3 text-sm leading-6',
+};
+
+/** 平台通用状态提示条。 */
+export function PlatformStatusMessage({
+  tone,
+  surface = 'light',
+  size = 'sm',
+  remapSurface = false,
+  children,
+  className,
+  ...divProps
+}: PlatformStatusMessageProps) {
+  return (
+    <div
+      {...divProps}
+      className={[
+        remapSurface ? 'platform-remap-surface' : null,
+        'platform-status-message rounded-xl border',
+        PLATFORM_STATUS_MESSAGE_SIZE_CLASS[size],
+        PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE[surface][tone],
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/PlatformSubpanel.tsx b/packages/shared/src/components/PlatformSubpanel.tsx
index b3a09f06b..57f07df10 100644
--- a/packages/shared/src/components/PlatformSubpanel.tsx
+++ b/packages/shared/src/components/PlatformSubpanel.tsx
@@ -1,2 +1,223 @@
-export type { SubpanelProps as PlatformSubpanelProps } from './ui';
-export { Subpanel as PlatformSubpanel } from './ui';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+import { PlatformFieldLabel } from './PlatformFieldLabel';
+
+export type PlatformSubpanelStaticElement =
+  | 'section'
+  | 'div'
+  | 'article'
+  | 'aside';
+export type PlatformSubpanelElement = PlatformSubpanelStaticElement | 'button';
+export type PlatformSubpanelPadding =
+  | 'tight'
+  | 'row'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'none';
+export type PlatformSubpanelRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type PlatformSubpanelSurface =
+  | 'platform'
+  | 'flat'
+  | 'soft'
+  | 'dark'
+  | 'darkSky'
+  | 'darkEmerald'
+  | 'darkAmber'
+  | 'darkRose'
+  | 'danger';
+export type PlatformSubpanelTitleVariant = 'section' | 'strong';
+
+type PlatformSubpanelBaseProps = {
+  as?: PlatformSubpanelElement;
+  title?: ReactNode;
+  titleVariant?: PlatformSubpanelTitleVariant;
+  actions?: ReactNode;
+  children: ReactNode;
+  interactive?: boolean;
+  padding?: PlatformSubpanelPadding;
+  radius?: PlatformSubpanelRadius;
+  surface?: PlatformSubpanelSurface;
+  className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  actionsClassName?: string;
+  bodyClassName?: string;
+};
+
+type PlatformSubpanelStaticProps = PlatformSubpanelBaseProps &
+  Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'title'> & {
+    as?: PlatformSubpanelStaticElement;
+  };
+
+type PlatformSubpanelButtonProps = PlatformSubpanelBaseProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> & {
+    as: 'button';
+  };
+
+export type PlatformSubpanelProps =
+  | PlatformSubpanelStaticProps
+  | PlatformSubpanelButtonProps;
+
+const PLATFORM_SUBPANEL_PADDING_CLASS: Record<PlatformSubpanelPadding, string> =
+  {
+    tight: 'p-2',
+    row: 'px-3 py-2',
+    xs: 'px-3 py-2.5',
+    sm: 'p-3',
+    md: 'p-4',
+    lg: 'p-4 sm:p-5',
+    none: 'p-0',
+  };
+
+const PLATFORM_SUBPANEL_RADIUS_CLASS: Record<PlatformSubpanelRadius, string> = {
+  xs: 'rounded-xl',
+  sm: 'rounded-[1rem]',
+  md: 'rounded-[1.25rem]',
+  lg: 'rounded-[1.35rem]',
+  xl: 'rounded-[1.5rem]',
+};
+
+const PLATFORM_SUBPANEL_SURFACE_CLASS: Record<PlatformSubpanelSurface, string> =
+  {
+    platform: 'platform-subpanel',
+    flat: 'border border-[var(--platform-subpanel-border)] bg-white/72',
+    soft: 'border border-[var(--platform-subpanel-border)] bg-white/68',
+    dark: 'border border-white/10 bg-black/25 text-zinc-100',
+    darkSky: 'border border-sky-400/18 bg-sky-500/8 text-sky-50',
+    darkEmerald:
+      'border border-emerald-400/18 bg-emerald-500/8 text-emerald-100/85',
+    darkAmber: 'border border-amber-300/18 bg-amber-500/8 text-amber-50',
+    darkRose: 'border border-rose-300/18 bg-rose-500/8 text-rose-50',
+    danger:
+      'border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)]',
+  };
+
+const PLATFORM_SUBPANEL_INTERACTIVE_CLASS =
+  'text-left transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)] disabled:cursor-not-allowed disabled:opacity-55';
+
+function renderSubpanelTitle({
+  title,
+  titleClassName,
+  titleVariant,
+}: {
+  title: ReactNode;
+  titleClassName?: string;
+  titleVariant: PlatformSubpanelTitleVariant;
+}) {
+  if (titleVariant === 'strong') {
+    return (
+      <div
+        className={[
+          'text-sm font-black text-[var(--platform-text-strong)]',
+          titleClassName,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {title}
+      </div>
+    );
+  }
+
+  return (
+    <PlatformFieldLabel variant="section" className={titleClassName}>
+      {title}
+    </PlatformFieldLabel>
+  );
+}
+
+/** 平台白底子面板，统一承接结果页和创作工作台里的子面板外壳。 */
+export function PlatformSubpanel({
+  as: Component = 'section',
+  title,
+  titleVariant = 'section',
+  actions,
+  children,
+  interactive = false,
+  padding = 'md',
+  radius = 'md',
+  surface = 'platform',
+  className,
+  headerClassName,
+  titleClassName,
+  actionsClassName,
+  bodyClassName,
+  ...elementProps
+}: PlatformSubpanelProps) {
+  const hasHeader = Boolean(title) || Boolean(actions);
+  const subpanelClassName = [
+    PLATFORM_SUBPANEL_SURFACE_CLASS[surface],
+    PLATFORM_SUBPANEL_RADIUS_CLASS[radius],
+    PLATFORM_SUBPANEL_PADDING_CLASS[padding],
+    interactive ? PLATFORM_SUBPANEL_INTERACTIVE_CLASS : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const content = (
+    <>
+      {hasHeader ? (
+        <div
+          className={[
+            'flex items-center justify-between gap-3',
+            headerClassName,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <div className="min-w-0">
+            {title
+              ? renderSubpanelTitle({
+                  title,
+                  titleClassName,
+                  titleVariant,
+                })
+              : null}
+          </div>
+          {actions ? (
+            <div
+              className={['flex shrink-0 items-center gap-2', actionsClassName]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {actions}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {bodyClassName ? (
+        <div className={bodyClassName}>{children}</div>
+      ) : (
+        children
+      )}
+    </>
+  );
+
+  if (Component === 'button') {
+    const { type = 'button', ...buttonProps } = elementProps as Omit<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      'children' | 'title'
+    >;
+
+    return (
+      <button {...buttonProps} type={type} className={subpanelClassName}>
+        {content}
+      </button>
+    );
+  }
+
+  const StaticComponent = Component;
+  const staticProps = elementProps as Omit<
+    HTMLAttributes<HTMLElement>,
+    'children' | 'className' | 'title'
+  >;
+
+  return (
+    <StaticComponent {...staticProps} className={subpanelClassName}>
+      {content}
+    </StaticComponent>
+  );
+}
diff --git a/packages/shared/src/components/PlatformTextField.tsx b/packages/shared/src/components/PlatformTextField.tsx
index 2c6ad9b2f..4345755c9 100644
--- a/packages/shared/src/components/PlatformTextField.tsx
+++ b/packages/shared/src/components/PlatformTextField.tsx
@@ -1,8 +1,184 @@
-export type {
-  SelectFieldProps as PlatformSelectFieldProps,
-  TextFieldProps as PlatformTextFieldProps,
-} from './ui';
-export {
-  SelectField as PlatformSelectField,
-  TextField as PlatformTextField,
-} from './ui';
+import type {
+  InputHTMLAttributes,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+} from 'react';
+
+export type PlatformTextFieldSize = 'xs' | 'sm' | 'md' | 'lg';
+export type PlatformTextFieldDensity = 'default' | 'compact' | 'roomy';
+export type PlatformTextFieldTone = 'warm' | 'rose' | 'emerald' | 'sky';
+export type PlatformTextFieldSurface = 'platform' | 'editorDark';
+
+type PlatformTextFieldBaseProps = {
+  size?: PlatformTextFieldSize;
+  density?: PlatformTextFieldDensity;
+  tone?: PlatformTextFieldTone;
+  surface?: PlatformTextFieldSurface;
+};
+
+type PlatformTextFieldInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'size'
+> &
+  PlatformTextFieldBaseProps & {
+    variant?: 'input';
+  };
+
+type PlatformTextFieldTextareaProps =
+  TextareaHTMLAttributes<HTMLTextAreaElement> &
+    PlatformTextFieldBaseProps & {
+      variant: 'textarea';
+    };
+
+export type PlatformTextFieldProps =
+  | PlatformTextFieldInputProps
+  | PlatformTextFieldTextareaProps;
+
+export type PlatformSelectFieldProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> &
+  PlatformTextFieldBaseProps;
+
+const PLATFORM_TEXT_FIELD_SIZE_CLASS: Record<PlatformTextFieldSize, string> = {
+  xs: 'text-sm leading-5',
+  sm: 'text-sm font-semibold',
+  md: 'text-sm leading-6',
+  lg: 'text-base font-semibold',
+};
+
+const PLATFORM_TEXT_FIELD_PLATFORM_DENSITY_CLASS: Record<
+  PlatformTextFieldDensity,
+  string
+> = {
+  default: 'rounded-[1rem] bg-white/86 px-3 py-3',
+  compact: 'rounded-[0.85rem] bg-white/90 px-3 py-2',
+  roomy: 'rounded-[1rem] bg-white/90 px-4 py-3',
+};
+
+const PLATFORM_TEXT_FIELD_EDITOR_DARK_DENSITY_CLASS: Record<
+  PlatformTextFieldDensity,
+  string
+> = {
+  default: 'rounded-[1rem] bg-black/30 px-3 py-3',
+  compact: 'rounded-[0.85rem] bg-black/30 px-3 py-2',
+  roomy: 'rounded-[1rem] bg-black/30 px-4 py-3',
+};
+
+const PLATFORM_TEXT_FIELD_PLATFORM_TONE_CLASS: Record<
+  PlatformTextFieldTone,
+  string
+> = {
+  warm: 'focus:border-[var(--platform-surface-hover-border)] focus:ring-[var(--platform-warm-border)]',
+  rose: 'focus:border-rose-200 focus:ring-rose-100',
+  emerald: 'focus:border-emerald-200 focus:ring-emerald-100',
+  sky: 'focus:border-sky-200 focus:ring-sky-100',
+};
+
+const PLATFORM_TEXT_FIELD_EDITOR_DARK_TONE_CLASS: Record<
+  PlatformTextFieldTone,
+  string
+> = {
+  warm: 'focus:border-amber-300/40',
+  rose: 'focus:border-rose-300/40',
+  emerald: 'focus:border-emerald-400/40',
+  sky: 'focus:border-sky-400/40',
+};
+
+function buildPlatformTextFieldClassName({
+  surface,
+  size,
+  density,
+  tone,
+  multiline,
+  className,
+}: {
+  surface: PlatformTextFieldSurface;
+  size: PlatformTextFieldSize;
+  density: PlatformTextFieldDensity;
+  tone: PlatformTextFieldTone;
+  multiline?: boolean;
+  className?: string;
+}) {
+  const isEditorDark = surface === 'editorDark';
+
+  return [
+    'w-full platform-text-field outline-none transition disabled:cursor-not-allowed disabled:opacity-60',
+    isEditorDark
+      ? 'platform-text-field--editor-dark border border-white/10 text-white'
+      : 'border border-[var(--platform-subpanel-border)] text-[var(--platform-text-strong)] focus:bg-white focus:ring-2',
+    isEditorDark
+      ? PLATFORM_TEXT_FIELD_EDITOR_DARK_DENSITY_CLASS[density]
+      : PLATFORM_TEXT_FIELD_PLATFORM_DENSITY_CLASS[density],
+    PLATFORM_TEXT_FIELD_SIZE_CLASS[size],
+    isEditorDark
+      ? PLATFORM_TEXT_FIELD_EDITOR_DARK_TONE_CLASS[tone]
+      : PLATFORM_TEXT_FIELD_PLATFORM_TONE_CLASS[tone],
+    multiline ? 'resize-none' : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * 平台白底表单输入框。
+ * 统一承接结果页 / 工作台白底圆角输入框和文本域的基础 chrome。
+ */
+export function PlatformTextField({
+  variant = 'input',
+  size = 'sm',
+  density = 'default',
+  tone = 'warm',
+  surface = 'platform',
+  className,
+  ...fieldProps
+}: PlatformTextFieldProps) {
+  const fieldClassName = buildPlatformTextFieldClassName({
+    surface,
+    size,
+    density,
+    tone,
+    multiline: variant === 'textarea',
+    className,
+  });
+
+  if (variant === 'textarea') {
+    return (
+      <textarea
+        {...(fieldProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}
+        className={fieldClassName}
+      />
+    );
+  }
+
+  return (
+    <input
+      {...(fieldProps as InputHTMLAttributes<HTMLInputElement>)}
+      className={fieldClassName}
+    />
+  );
+}
+
+/**
+ * 平台白底下拉框。
+ * 与 PlatformTextField 共享输入 chrome，避免业务页为同一组表单控件重复拼样式。
+ */
+export function PlatformSelectField({
+  size = 'sm',
+  density = 'default',
+  tone = 'warm',
+  surface = 'platform',
+  className,
+  ...selectProps
+}: PlatformSelectFieldProps) {
+  const fieldClassName = buildPlatformTextFieldClassName({
+    surface,
+    size,
+    density,
+    tone,
+    className,
+  });
+
+  return <select {...selectProps} className={fieldClassName} />;
+}
diff --git a/packages/shared/src/components/index.ts b/packages/shared/src/components/index.ts
index 7f2accb88..14d98e1ff 100644
--- a/packages/shared/src/components/index.ts
+++ b/packages/shared/src/components/index.ts
@@ -7,31 +7,115 @@ export type {
   PlatformActionButtonTone,
 } from './PlatformActionButton';
 export { PlatformActionButton } from './PlatformActionButton';
+export { getPlatformActionButtonClassName } from './platformActionButtonModel';
+export type { PlatformAsyncStatePanelProps } from './PlatformAsyncStatePanel';
+export { PlatformAsyncStatePanel } from './PlatformAsyncStatePanel';
 export type { PlatformBadgeProps, PlatformBadgeTone } from './PlatformBadge';
 export { PlatformBadge } from './PlatformBadge';
-export type { PlatformEmptyStateProps } from './PlatformEmptyState';
+export type {
+  PlatformEmptyStateProps,
+  PlatformEmptyStateSize,
+  PlatformEmptyStateSurface,
+  PlatformEmptyStateTone,
+} from './PlatformEmptyState';
 export { PlatformEmptyState } from './PlatformEmptyState';
+export type {
+  PlatformFieldLabelProps,
+  PlatformFieldLabelVariant,
+} from './PlatformFieldLabel';
+export { PlatformFieldLabel } from './PlatformFieldLabel';
+export type {
+  PlatformFilterToolbarProps,
+  PlatformFilterToolbarTabItem,
+} from './PlatformFilterToolbar';
+export { PlatformFilterToolbar } from './PlatformFilterToolbar';
+export type {
+  PlatformIconBadgeProps,
+  PlatformIconBadgeShape,
+  PlatformIconBadgeSize,
+  PlatformIconBadgeTone,
+} from './PlatformIconBadge';
+export { PlatformIconBadge } from './PlatformIconBadge';
 export type {
   PlatformIconButtonProps,
   PlatformIconButtonSize,
   PlatformIconButtonVariant,
 } from './PlatformIconButton';
 export { PlatformIconButton } from './PlatformIconButton';
+export type {
+  PlatformInfoBlockProps,
+  PlatformInfoBlockVariant,
+} from './PlatformInfoBlock';
+export { PlatformInfoBlock } from './PlatformInfoBlock';
 export type { PlatformModalProps } from './PlatformModal';
 export { PlatformModal } from './PlatformModal';
+export type {
+  PlatformNavigableListItemAlign,
+  PlatformNavigableListItemProps,
+} from './PlatformNavigableListItem';
+export { PlatformNavigableListItem } from './PlatformNavigableListItem';
 export type {
   PlatformPillBadgeProps,
+  PlatformPillBadgeSize,
   PlatformPillBadgeTone,
 } from './PlatformPillBadge';
 export { PlatformPillBadge } from './PlatformPillBadge';
+export { getPlatformPillBadgeClassName } from './platformPillBadgeModel';
+export type {
+  PlatformProgressBarProps,
+  PlatformProgressBarSize,
+} from './PlatformProgressBar';
+export { PlatformProgressBar } from './PlatformProgressBar';
+export type {
+  PlatformRuntimeStatusShape,
+  PlatformRuntimeStatusSize,
+  PlatformRuntimeStatusSurface,
+  PlatformRuntimeStatusToastProps,
+  PlatformRuntimeStatusTone,
+} from './PlatformRuntimeStatusToast';
+export { PlatformRuntimeStatusToast } from './PlatformRuntimeStatusToast';
+export type {
+  PlatformSegmentedTabItem,
+  PlatformSegmentedTabsColumns,
+  PlatformSegmentedTabsFrame,
+  PlatformSegmentedTabsGap,
+  PlatformSegmentedTabsLayout,
+  PlatformSegmentedTabsProps,
+  PlatformSegmentedTabsRadius,
+  PlatformSegmentedTabsSemantics,
+  PlatformSegmentedTabsSize,
+  PlatformSegmentedTabsSurface,
+  PlatformSegmentedTabsTone,
+} from './PlatformSegmentedTabs';
+export { PlatformSegmentedTabs } from './PlatformSegmentedTabs';
+export type {
+  PlatformStatGridColumns,
+  PlatformStatGridDensity,
+  PlatformStatGridItem,
+  PlatformStatGridOrder,
+  PlatformStatGridProps,
+  PlatformStatGridSurface,
+  PlatformStatGridTextAlign,
+} from './PlatformStatGrid';
+export { PlatformStatGrid } from './PlatformStatGrid';
 export type { PlatformStatusProps, PlatformStatusTone } from './PlatformStatus';
 export { PlatformStatus } from './PlatformStatus';
 export type {
   PlatformStatusMessageProps,
+  PlatformStatusMessageSize,
+  PlatformStatusMessageSurface,
   PlatformStatusMessageTone,
 } from './PlatformStatusMessage';
 export { PlatformStatusMessage } from './PlatformStatusMessage';
-export type { PlatformSubpanelProps } from './PlatformSubpanel';
+export type {
+  PlatformSubpanelElement,
+  PlatformSubpanelPadding,
+  PlatformSubpanelProps,
+  PlatformSubpanelRadius,
+  PlatformSubpanelStaticElement,
+  PlatformSubpanelSurface,
+  PlatformSubpanelTitleVariant,
+} from './PlatformSubpanel';
 export { PlatformSubpanel } from './PlatformSubpanel';
 export type {
   PlatformSelectFieldProps,
@@ -42,10 +126,12 @@ export type {
   BadgeProps,
   BadgeTone,
   ButtonProps,
+  CheckboxProps,
   EmptyStateProps,
   IconButtonProps,
   IconButtonSize,
   IconButtonVariant,
+  LabelProps,
   ModalProps,
   ProgressBarProps,
   SegmentedTabItem,
@@ -53,26 +139,39 @@ export type {
   SelectFieldProps,
   SharedButtonSize,
   SharedButtonVariant,
+  SkeletonProps,
   StatusProps,
   StatusTone,
   SubpanelProps,
   SwitchProps,
+  TableProps,
   TextFieldProps,
 } from './ui';
 export {
   Badge,
   Button,
+  Checkbox,
   Divider,
   EmptyState,
   IconButton,
+  Label,
   Modal,
   ProgressBar,
   SegmentedTabs,
   SelectField,
+  Skeleton,
   Spinner,
   Status,
   Subpanel,
   Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   TextField,
 } from './ui';
 export type { BadgeProps as ShadcnBadgeProps } from './ui/badge';
@@ -110,16 +209,11 @@ export { Textarea } from './ui/textarea';
 // existing application adapters while keeping the public API product-neutral.
 export type {
   ButtonProps as PlatformButtonProps,
-  ProgressBarProps as PlatformProgressBarProps,
-  SegmentedTabItem as PlatformSegmentedTabItem,
-  SegmentedTabsProps as PlatformSegmentedTabsProps,
   SwitchProps as PlatformSwitchProps,
 } from './ui';
 export {
   Button as PlatformButton,
   Divider as PlatformDivider,
-  ProgressBar as PlatformProgressBar,
-  SegmentedTabs as PlatformSegmentedTabs,
   Spinner as PlatformSpinner,
   Switch as PlatformSwitch,
 } from './ui';
diff --git a/packages/shared/src/components/platformActionButtonModel.ts b/packages/shared/src/components/platformActionButtonModel.ts
new file mode 100644
index 000000000..9cd6d82cc
--- /dev/null
+++ b/packages/shared/src/components/platformActionButtonModel.ts
@@ -0,0 +1,134 @@
+export type PlatformActionButtonTone =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'accent'
+  | 'accentSoft';
+export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
+export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export type PlatformActionButtonShape = 'default' | 'pill';
+export type PlatformActionButtonAlign = 'center' | 'start';
+
+const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-button platform-button--primary',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-button platform-button--primary',
+  warning: 'platform-button platform-button--secondary',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-primary-button',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-primary-button',
+  warning: 'platform-button platform-button--secondary',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary:
+    'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300',
+  secondary:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white',
+  ghost:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white',
+  danger:
+    'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15',
+  success:
+    'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
+  warning:
+    'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,rgba(0,0,0,0.72)_90%)] [color:var(--platform-action-accent,#f5c36a)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#f5c36a)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
+  PlatformActionButtonSize,
+  string
+> = {
+  xxs: 'px-3 py-1 text-[10px]',
+  xs: 'px-4 py-2 text-xs',
+  sm: 'px-4 py-2.5 text-sm',
+  md: 'px-4 py-3 text-sm',
+  lg: 'h-12 px-4 text-base',
+};
+
+const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record<
+  PlatformActionButtonShape,
+  string
+> = {
+  default: 'rounded-2xl',
+  pill: 'rounded-full',
+};
+
+const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record<
+  PlatformActionButtonAlign,
+  string
+> = {
+  center: 'justify-center',
+  start: 'justify-start text-left',
+};
+
+function getPlatformActionButtonToneClass(
+  surface: PlatformActionButtonSurface,
+  tone: PlatformActionButtonTone,
+) {
+  if (surface === 'editorDark') {
+    return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone];
+  }
+
+  return surface === 'profile'
+    ? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone]
+    : PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone];
+}
+
+export function getPlatformActionButtonClassName({
+  surface = 'platform',
+  tone = 'primary',
+  size = 'sm',
+  shape = 'default',
+  align = 'center',
+  fullWidth = false,
+}: {
+  surface?: PlatformActionButtonSurface;
+  tone?: PlatformActionButtonTone;
+  size?: PlatformActionButtonSize;
+  shape?: PlatformActionButtonShape;
+  align?: PlatformActionButtonAlign;
+  fullWidth?: boolean;
+}) {
+  return [
+    getPlatformActionButtonToneClass(surface, tone),
+    PLATFORM_ACTION_BUTTON_SIZE_CLASS[size],
+    PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape],
+    PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align],
+    fullWidth ? 'w-full' : null,
+    'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
diff --git a/packages/shared/src/components/platformComponents.test.tsx b/packages/shared/src/components/platformComponents.test.tsx
new file mode 100644
index 000000000..2f3dcb82a
--- /dev/null
+++ b/packages/shared/src/components/platformComponents.test.tsx
@@ -0,0 +1,108 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import {
+  PlatformAsyncStatePanel,
+  PlatformFilterToolbar,
+  PlatformIconBadge,
+  PlatformInfoBlock,
+  PlatformNavigableListItem,
+  PlatformStatGrid,
+} from './index';
+
+describe('shared platform components', () => {
+  test('exposes display primitives with their visual variants', () => {
+    render(
+      <>
+        <PlatformInfoBlock label="来源" variant="compactRow">
+          拼图草稿
+        </PlatformInfoBlock>
+        <PlatformIconBadge icon="+" label="新增" size="lg" tone="success" />
+        <PlatformStatGrid
+          items={[{ label: '作品数', value: '24' }]}
+          columns="two"
+          order="labelFirst"
+          surface="plain"
+        />
+      </>,
+    );
+
+    expect(screen.getByText('来源').className).toContain('text-xs');
+    expect(screen.getByLabelText('新增')).toBeTruthy();
+    expect(screen.getByLabelText('新增').className).toContain('h-12');
+    expect(screen.getByText('作品数').parentElement?.className).toContain(
+      'border',
+    );
+  });
+
+  test('preserves list row button semantics and callback slots', () => {
+    const onClick = vi.fn();
+    render(
+      <PlatformNavigableListItem
+        leading={<span>图标</span>}
+        trailing={<span>前往</span>}
+        onClick={onClick}
+      >
+        项目工作台
+      </PlatformNavigableListItem>,
+    );
+
+    const button = screen.getByRole('button', {
+      name: /图标.*项目工作台.*前往/u,
+    });
+    expect(button.getAttribute('type')).toBe('button');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('keeps async state precedence explicit', () => {
+    const { rerender } = render(
+      <PlatformAsyncStatePanel
+        errorState={<span>错误</span>}
+        isLoading
+        loadingState={<span>加载中</span>}
+        isEmpty
+        emptyState={<span>空态</span>}
+      >
+        <span>内容</span>
+      </PlatformAsyncStatePanel>,
+    );
+
+    expect(screen.getByText('错误')).toBeTruthy();
+    rerender(
+      <PlatformAsyncStatePanel isLoading loadingState={<span>加载中</span>}>
+        <span>内容</span>
+      </PlatformAsyncStatePanel>,
+    );
+    expect(screen.getByText('加载中')).toBeTruthy();
+  });
+
+  test('forwards filter, tab and sort actions in both layout modes', () => {
+    const onOpenFilter = vi.fn();
+    const onTabChange = vi.fn();
+    const onToggleSort = vi.fn();
+    render(
+      <PlatformFilterToolbar
+        filterLabel="筛选"
+        filterCount={2}
+        tabItems={[{ id: 'all', label: '全部' }]}
+        activeTabId="all"
+        sortLabel="最新"
+        layout="mobile"
+        onOpenFilter={onOpenFilter}
+        onTabChange={onTabChange}
+        onToggleSort={onToggleSort}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /筛选/u }));
+    fireEvent.click(screen.getByRole('button', { name: /按最新排序/u }));
+    expect(onOpenFilter).toHaveBeenCalledTimes(1);
+    expect(onToggleSort).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole('button', { name: '全部' }));
+    expect(onTabChange).toHaveBeenCalledWith('all');
+  });
+});
diff --git a/packages/shared/src/components/platformPillBadgeModel.ts b/packages/shared/src/components/platformPillBadgeModel.ts
new file mode 100644
index 000000000..1d373a033
--- /dev/null
+++ b/packages/shared/src/components/platformPillBadgeModel.ts
@@ -0,0 +1,68 @@
+export type PlatformPillBadgeTone =
+  | 'muted'
+  | 'neutral'
+  | 'neutralSolid'
+  | 'lightOverlay'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'cool'
+  | 'profile'
+  | 'profileAccent'
+  | 'darkSoft'
+  | 'darkNeutral'
+  | 'darkSky'
+  | 'darkEmerald'
+  | 'darkAmber'
+  | 'darkRose';
+
+export type PlatformPillBadgeSize = 'xxs' | 'xs' | 'sm';
+
+const PLATFORM_PILL_BADGE_TONE_CLASS: Record<PlatformPillBadgeTone, string> = {
+  muted:
+    'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
+  neutral:
+    'border-[var(--platform-subpanel-border)] bg-white/72 text-[var(--platform-text-base)]',
+  neutralSolid:
+    'border-transparent bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
+  lightOverlay: 'border-white/30 bg-white/24 text-current',
+  success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  warning:
+    'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
+  danger:
+    'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
+  cool: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
+  profile: 'border-rose-100 bg-rose-50 text-zinc-600',
+  profileAccent: 'border-rose-100 bg-rose-50 text-[#ff4056]',
+  darkSoft: 'border-white/10 bg-white/6 text-zinc-100',
+  darkNeutral: 'border-white/10 bg-black/20 text-zinc-200',
+  darkSky: 'border-sky-300/20 bg-sky-500/10 text-sky-100',
+  darkEmerald: 'border-emerald-300/20 bg-emerald-500/10 text-emerald-100',
+  darkAmber: 'border-amber-300/20 bg-amber-500/10 text-amber-100',
+  darkRose: 'border-rose-300/20 bg-rose-500/10 text-rose-100',
+};
+
+const PLATFORM_PILL_BADGE_SIZE_CLASS: Record<PlatformPillBadgeSize, string> = {
+  xxs: 'px-2.5 py-1 text-[10px]',
+  xs: 'px-2.5 py-0.5 text-[11px]',
+  sm: 'px-3 py-1 text-xs',
+};
+
+export function getPlatformPillBadgeClassName({
+  tone = 'neutral',
+  size = 'sm',
+  className,
+}: {
+  tone?: PlatformPillBadgeTone;
+  size?: PlatformPillBadgeSize;
+  className?: string;
+} = {}) {
+  return [
+    'inline-flex items-center gap-1 rounded-full border font-black',
+    PLATFORM_PILL_BADGE_SIZE_CLASS[size],
+    PLATFORM_PILL_BADGE_TONE_CLASS[tone],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
diff --git a/packages/shared/src/components/styles.css b/packages/shared/src/components/styles.css
index 65143face..c57dd87cc 100644
--- a/packages/shared/src/components/styles.css
+++ b/packages/shared/src/components/styles.css
@@ -25,6 +25,140 @@
   box-sizing: border-box;
 }
 
+.genarrative-ui-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--platform-text-strong, #3d1f10);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1.25;
+  cursor: pointer;
+}
+
+.genarrative-ui-checkbox {
+  display: inline-grid;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex: 0 0 auto;
+  place-items: center;
+  appearance: none;
+  border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.88));
+  border-radius: 0.35rem;
+  background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
+  color: var(--platform-button-primary-text, #fffaf5);
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.genarrative-ui-checkbox::after {
+  content: '✓';
+  font-size: 0.75rem;
+  font-weight: 900;
+  line-height: 1;
+  opacity: 0;
+  transform: scale(0.7);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.genarrative-ui-checkbox:checked {
+  border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
+  background: var(--platform-button-primary-fill, #c7653d);
+}
+
+.genarrative-ui-checkbox:checked::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.genarrative-ui-checkbox:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.genarrative-ui-checkbox:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.genarrative-ui-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
+}
+
+.genarrative-ui-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.genarrative-ui-skeleton {
+  min-height: 1rem;
+  border-radius: 0.55rem;
+  background: linear-gradient(
+    100deg,
+    rgba(226, 203, 184, 0.42) 20%,
+    rgba(255, 253, 250, 0.92) 40%,
+    rgba(226, 203, 184, 0.42) 60%
+  );
+  background-size: 200% 100%;
+  animation: genarrative-ui-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes genarrative-ui-skeleton-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.genarrative-ui-table__container {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.88));
+  border-radius: 0.9rem;
+  background: var(--platform-subpanel-fill, rgba(255, 253, 250, 0.72));
+}
+
+.genarrative-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--platform-text-strong, #3d1f10);
+  font-size: 0.8125rem;
+  text-align: left;
+}
+
+.genarrative-ui-table__head,
+.genarrative-ui-table__cell {
+  padding: 0.7rem 0.85rem;
+  white-space: nowrap;
+}
+
+.genarrative-ui-table__header {
+  background: rgba(226, 203, 184, 0.2);
+  color: var(--platform-text-soft, #755a49);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.genarrative-ui-table__row + .genarrative-ui-table__row {
+  border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
+}
+
+.genarrative-ui-table__body .genarrative-ui-table__row:hover {
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.genarrative-ui-table__caption {
+  padding: 0.7rem 0.85rem;
+  color: var(--platform-text-soft, #755a49);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
 .genarrative-ui-button,
 .genarrative-ui-icon-button,
 .genarrative-ui-tabs__item,
@@ -190,6 +324,299 @@
   box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
 }
 
+/* Platform-prefixed adapters share these small chrome primitives with the
+ * web host. Keeping the selectors in the package means Tauri consumers do not
+ * need to import the website's large application stylesheet. */
+.platform-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  min-height: 2.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 1rem;
+  padding: 0.7rem 1rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    background-color 180ms ease,
+    color 180ms ease,
+    opacity 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.platform-button:hover {
+  transform: translateY(-1px);
+}
+
+.platform-button:active {
+  transform: translateY(0);
+}
+
+.platform-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.platform-button--primary {
+  border-color: var(--platform-button-primary-border);
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
+  box-shadow: 0 16px 34px rgba(182, 98, 63, 0.18);
+}
+
+.platform-button--secondary {
+  background: var(--platform-button-secondary-fill);
+  color: var(--platform-button-secondary-text);
+}
+
+.platform-button--ghost {
+  background: var(--platform-button-ghost-fill);
+  color: var(--platform-button-ghost-text);
+}
+
+.platform-button--danger {
+  border-color: var(--platform-button-danger-border);
+  background: var(--platform-button-danger-fill);
+  color: var(--platform-button-danger-text);
+}
+
+.platform-icon-button {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--platform-icon-border);
+  border-radius: 9999px;
+  background: var(--platform-icon-fill);
+  color: var(--platform-icon-text);
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    transform 180ms ease;
+}
+
+.platform-icon-button:hover {
+  transform: translateY(-1px);
+  border-color: var(--platform-nav-active-border);
+  background: var(--platform-nav-active-fill);
+  color: var(--platform-text-strong);
+}
+
+.platform-subpanel {
+  border: 1px solid var(--platform-subpanel-border);
+  background: var(--platform-subpanel-fill);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.platform-primary-button {
+  border: 1px solid var(--platform-button-primary-border);
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
+  box-shadow: var(--platform-profile-action-shadow);
+  transition:
+    transform 180ms ease,
+    filter 180ms ease,
+    opacity 180ms ease;
+}
+
+.platform-primary-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.02);
+}
+
+.platform-progress-track {
+  border: 1px solid var(--platform-track-border);
+  background: var(--platform-track-fill);
+}
+
+/* Filter toolbar chrome is part of the shared platform surface so the
+ * canonical toolbar renders the same in the web app and standalone hosts. */
+.platform-category-filter-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.65rem;
+  overflow: hidden;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 1.25rem;
+  background: var(--platform-subpanel-fill);
+  padding: 0.55rem 0.65rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.platform-category-filter-button,
+.platform-category-sort-button,
+.platform-category-chip {
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.platform-category-filter-button {
+  display: inline-flex;
+  position: relative;
+  min-height: 2.25rem;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--platform-cool-border);
+  border-radius: 9999px;
+  background: var(--platform-cool-bg);
+  color: var(--platform-cool-text);
+  padding: 0 0.75rem;
+  font-size: 0.86rem;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.platform-category-filter-button__count {
+  display: inline-flex;
+  min-width: 1.18rem;
+  height: 1.18rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--platform-warm-text);
+  color: var(--platform-button-primary-text);
+  padding: 0 0.28rem;
+  font-size: 0.72rem;
+  line-height: 1;
+}
+
+.platform-category-filter-divider {
+  width: 1px;
+  height: 1.85rem;
+  flex: 0 0 auto;
+  background: var(--platform-line-soft);
+}
+
+.platform-category-chip-scroll {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  gap: 0.55rem;
+  overflow-x: auto;
+  padding-right: 0.1rem;
+}
+
+.platform-category-chip {
+  display: inline-flex;
+  min-height: 2.25rem;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 0.78rem;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--platform-text-base);
+  padding: 0 0.92rem;
+  font-size: 0.88rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.platform-category-chip--active {
+  border-color: var(--platform-cool-border);
+  background: var(--platform-cool-bg);
+  color: var(--platform-cool-text);
+}
+
+.platform-category-sort-button {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 1.75rem;
+  align-items: center;
+  gap: 0.2rem;
+  border: 0;
+  background: transparent;
+  color: var(--platform-text-soft);
+  padding: 0 0.2rem;
+  font-size: 0.88rem;
+  font-weight: 800;
+}
+
+.platform-category-filter-button:hover,
+.platform-category-chip:hover,
+.platform-category-sort-button:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+}
+
+.platform-category-filter-button:active,
+.platform-category-chip:active,
+.platform-category-sort-button:active {
+  transform: translateY(1px);
+  filter: brightness(0.96);
+  transition-duration: 80ms;
+}
+
+.platform-category-filter-button:focus-visible,
+.platform-category-chip:focus-visible,
+.platform-category-sort-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+.platform-navigable-list-item {
+  cursor: pointer;
+  border-radius: 0.9rem;
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease,
+    opacity 160ms ease;
+}
+
+.platform-navigable-list-item:hover:not(:disabled) {
+  background: var(--platform-button-ghost-fill);
+}
+
+.platform-navigable-list-item:active:not(:disabled) {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
+  transition-duration: 80ms;
+}
+
+.platform-navigable-list-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.platform-navigable-list-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+@media (max-width: 480px) {
+  .platform-category-filter-row {
+    border-radius: 1rem;
+    gap: 0.5rem;
+    padding: 0.46rem 0.5rem;
+  }
+
+  .platform-category-filter-button {
+    min-height: 2.05rem;
+    padding-inline: 0.62rem;
+    font-size: 0.8rem;
+  }
+
+  .platform-category-chip {
+    min-height: 2.05rem;
+    border-radius: 0.68rem;
+    padding-inline: 0.78rem;
+    font-size: 0.8rem;
+  }
+}
+
 .genarrative-ui-button:disabled,
 .genarrative-ui-icon-button:disabled,
 .genarrative-ui-icon-button[aria-disabled='true'],
@@ -809,7 +1236,8 @@ textarea.genarrative-ui-text-field__control {
   .genarrative-ui-tabs__item,
   .genarrative-ui-switch,
   .genarrative-ui-progress__fill,
-  .genarrative-ui-spinner {
+  .genarrative-ui-spinner,
+  .genarrative-ui-skeleton {
     transition: none;
     animation: none;
   }
diff --git a/packages/shared/src/components/ui.test.tsx b/packages/shared/src/components/ui.test.tsx
index 2dfbd9038..c9f7b29a5 100644
--- a/packages/shared/src/components/ui.test.tsx
+++ b/packages/shared/src/components/ui.test.tsx
@@ -6,17 +6,27 @@ import { describe, expect, test, vi } from 'vitest';
 import {
   Badge,
   Button,
+  Checkbox,
   EmptyState,
   IconButton,
+  Label,
   Modal,
   PlatformActionButton,
   PlatformIconButton,
   ProgressBar,
   SegmentedTabs,
   SelectField,
+  Skeleton,
   Status,
   Subpanel,
   Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
   TextField,
 } from './index';
 
@@ -103,6 +113,40 @@ describe('shared UI components', () => {
     ).toBe('true');
   });
 
+  test('provides semantic label, checkbox, skeleton and table primitives', () => {
+    render(
+      <div className="genarrative-ui">
+        <div>
+          <Checkbox id="autosave" defaultChecked />
+          <Label htmlFor="autosave">自动保存</Label>
+        </div>
+        <Skeleton aria-label="读取中" className="h-3 w-20" />
+        <Table>
+          <TableCaption>最近项目</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>名称</TableHead>
+              <TableHead>状态</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>珊瑚岛</TableCell>
+              <TableCell>已发布</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>,
+    );
+
+    expect(screen.getByLabelText('自动保存')).toHaveProperty('checked', true);
+    expect(screen.getByLabelText('读取中').getAttribute('data-slot')).toBe(
+      'skeleton',
+    );
+    expect(screen.getByRole('table', { name: '最近项目' })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: '珊瑚岛' })).toBeTruthy();
+  });
+
   test('closes modal on escape and backdrop click', () => {
     const onClose = vi.fn();
     render(
diff --git a/packages/shared/src/components/ui.tsx b/packages/shared/src/components/ui.tsx
index a8baae281..2024a50c3 100644
--- a/packages/shared/src/components/ui.tsx
+++ b/packages/shared/src/components/ui.tsx
@@ -28,6 +28,24 @@ import {
 } from './ui/tabs';
 import { Textarea } from './ui/textarea';
 
+export type { CheckboxProps } from './ui/checkbox';
+export { Checkbox } from './ui/checkbox';
+export type { LabelProps } from './ui/label';
+export { Label } from './ui/label';
+export type { SkeletonProps } from './ui/skeleton';
+export { Skeleton } from './ui/skeleton';
+export type { TableProps } from './ui/table';
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui/table';
+
 /**
  * The shared UI layer is deliberately headless with regard to product data.
  * Components accept native props and slots only, so a web or Tauri host can
diff --git a/packages/shared/src/components/ui/checkbox.tsx b/packages/shared/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..667087df6
--- /dev/null
+++ b/packages/shared/src/components/ui/checkbox.tsx
@@ -0,0 +1,21 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox({ className, ...props }, ref) {
+    return (
+      <input
+        {...props}
+        ref={ref}
+        type="checkbox"
+        data-slot="checkbox"
+        className={cn('genarrative-ui-checkbox', className)}
+      />
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
diff --git a/packages/shared/src/components/ui/index.ts b/packages/shared/src/components/ui/index.ts
index e2fca9857..302945b58 100644
--- a/packages/shared/src/components/ui/index.ts
+++ b/packages/shared/src/components/ui/index.ts
@@ -8,6 +8,8 @@ export type {
 export { Button, buttonVariants } from './button';
 export type { CardProps } from './card';
 export { Card, CardActions, CardHeader, CardTitle } from './card';
+export type { CheckboxProps } from './checkbox';
+export { Checkbox } from './checkbox';
 export type { SharedDialogProps } from './dialog';
 export {
   Dialog,
@@ -23,8 +25,23 @@ export {
 } from './dialog';
 export type { InputProps } from './input';
 export { Input, inputVariants } from './input';
+export type { LabelProps } from './label';
+export { Label } from './label';
+export type { SkeletonProps } from './skeleton';
+export { Skeleton } from './skeleton';
 export type { SharedSwitchProps } from './switch';
 export { SwitchRoot, SwitchThumb } from './switch';
+export type { TableProps } from './table';
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
 export type { SegmentedTabItem, SegmentedTabsProps } from './tabs';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
 export type { TextareaProps } from './textarea';
diff --git a/packages/shared/src/components/ui/label.tsx b/packages/shared/src/components/ui/label.tsx
new file mode 100644
index 000000000..c375b32ea
--- /dev/null
+++ b/packages/shared/src/components/ui/label.tsx
@@ -0,0 +1,21 @@
+import { forwardRef, type LabelHTMLAttributes } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <label
+      {...props}
+      ref={ref}
+      data-slot="label"
+      className={cn('genarrative-ui-label', className)}
+    />
+  );
+});
+
+Label.displayName = 'Label';
diff --git a/packages/shared/src/components/ui/skeleton.tsx b/packages/shared/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..fa48c92df
--- /dev/null
+++ b/packages/shared/src/components/ui/skeleton.tsx
@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      {...props}
+      data-slot="skeleton"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={cn('genarrative-ui-skeleton', className)}
+    />
+  );
+}
diff --git a/packages/shared/src/components/ui/table.tsx b/packages/shared/src/components/ui/table.tsx
new file mode 100644
index 000000000..6d40f26bc
--- /dev/null
+++ b/packages/shared/src/components/ui/table.tsx
@@ -0,0 +1,112 @@
+import {
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type TableProps = HTMLAttributes<HTMLTableElement>;
+
+export function Table({ className, ...props }: TableProps) {
+  return (
+    <div className="genarrative-ui-table__container">
+      <table
+        {...props}
+        data-slot="table"
+        className={cn('genarrative-ui-table', className)}
+      />
+    </div>
+  );
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead
+      {...props}
+      data-slot="table-header"
+      className={cn('genarrative-ui-table__header', className)}
+    />
+  );
+}
+
+export function TableBody({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody
+      {...props}
+      data-slot="table-body"
+      className={cn('genarrative-ui-table__body', className)}
+    />
+  );
+}
+
+export function TableFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tfoot
+      {...props}
+      data-slot="table-footer"
+      className={cn('genarrative-ui-table__footer', className)}
+    />
+  );
+}
+
+export function TableRow({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      {...props}
+      data-slot="table-row"
+      className={cn('genarrative-ui-table__row', className)}
+    />
+  );
+}
+
+export function TableHead({
+  className,
+  ...props
+}: ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      {...props}
+      data-slot="table-head"
+      className={cn('genarrative-ui-table__head', className)}
+    />
+  );
+}
+
+export function TableCell({
+  className,
+  ...props
+}: TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      {...props}
+      data-slot="table-cell"
+      className={cn('genarrative-ui-table__cell', className)}
+    />
+  );
+}
+
+export function TableCaption({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableCaptionElement>) {
+  return (
+    <caption
+      {...props}
+      data-slot="table-caption"
+      className={cn('genarrative-ui-table__caption', className)}
+    />
+  );
+}
diff --git a/src/components/CustomWorldEntityCatalog.tsx b/src/components/CustomWorldEntityCatalog.tsx
index fb61d8ae4..15e8fc237 100644
--- a/src/components/CustomWorldEntityCatalog.tsx
+++ b/src/components/CustomWorldEntityCatalog.tsx
@@ -1,3 +1,4 @@
+import { PlatformStatGrid } from '@genarrative/shared/components';
 import {
   type ReactNode,
   useDeferredValue,
@@ -31,7 +32,6 @@ import { PlatformMediaFrame } from './common/PlatformMediaFrame';
 import { PlatformPillBadge } from './common/PlatformPillBadge';
 import { PlatformProgressBar } from './common/PlatformProgressBar';
 import { PlatformSegmentedTabs } from './common/PlatformSegmentedTabs';
-import { PlatformStatGrid } from './common/PlatformStatGrid';
 import { PlatformStatusMessage } from './common/PlatformStatusMessage';
 import { PlatformSubpanel } from './common/PlatformSubpanel';
 import { PlatformTextField } from './common/PlatformTextField';
diff --git a/src/components/bark-battle-creation/BarkBattlePreviewCard.tsx b/src/components/bark-battle-creation/BarkBattlePreviewCard.tsx
index 9e933d975..a4569b4c5 100644
--- a/src/components/bark-battle-creation/BarkBattlePreviewCard.tsx
+++ b/src/components/bark-battle-creation/BarkBattlePreviewCard.tsx
@@ -1,5 +1,6 @@
+import { PlatformInfoBlock } from '@genarrative/shared/components';
+
 import type { BarkBattleConfigEditorPayload } from '../../../packages/shared/src/contracts/barkBattle';
-import { PlatformInfoBlock } from '../common/PlatformInfoBlock';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
diff --git a/src/components/common/PlatformActionButton.tsx b/src/components/common/PlatformActionButton.tsx
index 7e4b3f28e..8e45b6a52 100644
--- a/src/components/common/PlatformActionButton.tsx
+++ b/src/components/common/PlatformActionButton.tsx
@@ -1,95 +1,2 @@
-import type {
-  ButtonHTMLAttributes,
-  LabelHTMLAttributes,
-  ReactNode,
-} from 'react';
-
-import {
-  getPlatformActionButtonClassName,
-  type PlatformActionButtonAlign,
-  type PlatformActionButtonShape,
-  type PlatformActionButtonSize,
-  type PlatformActionButtonSurface,
-  type PlatformActionButtonTone,
-} from './platformActionButtonModel';
-
-type PlatformActionButtonBaseProps = {
-  children: ReactNode;
-  tone?: PlatformActionButtonTone;
-  surface?: PlatformActionButtonSurface;
-  size?: PlatformActionButtonSize;
-  shape?: PlatformActionButtonShape;
-  align?: PlatformActionButtonAlign;
-  fullWidth?: boolean;
-};
-
-type PlatformActionButtonButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'children'
-> &
-  PlatformActionButtonBaseProps & {
-    asChild?: false;
-  };
-
-type PlatformActionButtonLabelProps = Omit<
-  LabelHTMLAttributes<HTMLLabelElement>,
-  'children'
-> &
-  PlatformActionButtonBaseProps & {
-    asChild: 'label';
-  };
-
-type PlatformActionButtonProps =
-  | PlatformActionButtonButtonProps
-  | PlatformActionButtonLabelProps;
-
-/**
- * 平台通用动作按钮。
- * 收口平台与个人中心主动作按钮的样式族、尺寸、圆角和禁用态 class。
- */
-export function PlatformActionButton({
-  children,
-  tone = 'primary',
-  surface = 'platform',
-  size = 'sm',
-  shape = 'default',
-  align = 'center',
-  fullWidth = false,
-  className,
-  asChild,
-  ...buttonProps
-}: PlatformActionButtonProps) {
-  const actionClassName = [
-    getPlatformActionButtonClassName({
-      surface,
-      tone,
-      size,
-      shape,
-      align,
-      fullWidth,
-    }),
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  if (asChild === 'label') {
-    return (
-      <label
-        {...(buttonProps as LabelHTMLAttributes<HTMLLabelElement>)}
-        className={actionClassName}
-      >
-        {children}
-      </label>
-    );
-  }
-
-  const { type = 'button', ...restButtonProps } =
-    buttonProps as ButtonHTMLAttributes<HTMLButtonElement>;
-
-  return (
-    <button {...restButtonProps} type={type} className={actionClassName}>
-      {children}
-    </button>
-  );
-}
+export type { PlatformActionButtonProps } from '@genarrative/shared/components';
+export { PlatformActionButton } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformAsyncStatePanel.tsx b/src/components/common/PlatformAsyncStatePanel.tsx
index 8236af4a4..d76fffab9 100644
--- a/src/components/common/PlatformAsyncStatePanel.tsx
+++ b/src/components/common/PlatformAsyncStatePanel.tsx
@@ -1,37 +1,2 @@
-import type { ReactNode } from 'react';
-
-type PlatformAsyncStatePanelProps = {
-  errorState?: ReactNode;
-  isLoading?: boolean;
-  loadingState?: ReactNode;
-  isEmpty?: boolean;
-  emptyState?: ReactNode;
-  children: ReactNode;
-};
-
-/**
- * 平台异步状态面板骨架。
- * 只负责在错误、读取、空态和内容之间切换，具体文案与外观继续交给调用方传入 slot。
- */
-export function PlatformAsyncStatePanel({
-  errorState,
-  isLoading = false,
-  loadingState = null,
-  isEmpty = false,
-  emptyState = null,
-  children,
-}: PlatformAsyncStatePanelProps) {
-  if (errorState !== undefined && errorState !== null) {
-    return <>{errorState}</>;
-  }
-
-  if (isLoading) {
-    return <>{loadingState}</>;
-  }
-
-  if (isEmpty) {
-    return <>{emptyState}</>;
-  }
-
-  return <>{children}</>;
-}
+export type { PlatformAsyncStatePanelProps } from '@genarrative/shared/components';
+export { PlatformAsyncStatePanel } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformEmptyState.tsx b/src/components/common/PlatformEmptyState.tsx
index a992c3d30..7ef6c22d3 100644
--- a/src/components/common/PlatformEmptyState.tsx
+++ b/src/components/common/PlatformEmptyState.tsx
@@ -1,124 +1,7 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-
-type PlatformEmptyStateSurface = 'soft' | 'dashed' | 'subpanel' | 'editorDark';
-type PlatformEmptyStateSize = 'compact' | 'panel' | 'inline';
-type PlatformEmptyStateTone = 'base' | 'soft';
-
-type PlatformEmptyStateBaseProps = {
-  children: ReactNode;
-  surface?: PlatformEmptyStateSurface;
-  size?: PlatformEmptyStateSize;
-  tone?: PlatformEmptyStateTone;
-};
-
-type PlatformEmptyStateDivProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'children'
-> & {
-  asChild?: false;
-} & PlatformEmptyStateBaseProps;
-
-type PlatformEmptyStateButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'children'
-> & {
-  asChild: 'button';
-} & PlatformEmptyStateBaseProps;
-
-type PlatformEmptyStateProps =
-  | PlatformEmptyStateDivProps
-  | PlatformEmptyStateButtonProps;
-
-type PlatformEmptyStateClassNameOptions = {
-  surface: PlatformEmptyStateSurface;
-  size: PlatformEmptyStateSize;
-  tone: PlatformEmptyStateTone;
-  className?: string;
-};
-
-const PLATFORM_EMPTY_STATE_SURFACE_CLASS: Record<
+export type {
+  PlatformEmptyStateProps,
+  PlatformEmptyStateSize,
   PlatformEmptyStateSurface,
-  string
-> = {
-  soft: 'platform-surface platform-surface--soft rounded-[1.35rem]',
-  dashed:
-    'rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52',
-  subpanel:
-    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74',
-  editorDark: 'rounded-2xl border border-dashed border-white/12 bg-black/20',
-};
-
-const PLATFORM_EMPTY_STATE_SIZE_CLASS: Record<PlatformEmptyStateSize, string> =
-  {
-    compact: 'px-4 py-3 text-sm leading-6',
-    panel:
-      'flex min-h-[14rem] items-center justify-center px-6 text-center text-sm',
-    inline: 'px-4 py-5 text-center text-sm font-semibold',
-  };
-
-const PLATFORM_EMPTY_STATE_TONE_CLASS: Record<PlatformEmptyStateTone, string> =
-  {
-    base: 'text-[var(--platform-text-base)]',
-    soft: 'text-[var(--platform-text-soft)]',
-  };
-
-/**
- * 平台通用空态和轻量加载态。
- * 收口平台列表、作品架和素材选择弹窗中重复的空面板外观。
- */
-function getPlatformEmptyStateClassName({
-  surface,
-  size,
-  tone,
-  className,
-}: PlatformEmptyStateClassNameOptions) {
-  return [
-    'min-w-0',
-    'platform-empty-state',
-    PLATFORM_EMPTY_STATE_SURFACE_CLASS[surface],
-    PLATFORM_EMPTY_STATE_SIZE_CLASS[size],
-    PLATFORM_EMPTY_STATE_TONE_CLASS[tone],
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
-export function PlatformEmptyState({
-  children,
-  surface = 'soft',
-  size = 'compact',
-  tone,
-  className,
-  asChild,
-  ...emptyStateProps
-}: PlatformEmptyStateProps) {
-  const resolvedTone =
-    tone ?? (surface === 'subpanel' || size === 'inline' ? 'soft' : 'base');
-  const emptyStateClassName = getPlatformEmptyStateClassName({
-    surface,
-    size,
-    tone: resolvedTone,
-    className,
-  });
-
-  if (asChild === 'button') {
-    const { type = 'button', ...buttonProps } =
-      emptyStateProps as ButtonHTMLAttributes<HTMLButtonElement>;
-
-    return (
-      <button {...buttonProps} type={type} className={emptyStateClassName}>
-        {children}
-      </button>
-    );
-  }
-
-  return (
-    <div
-      {...(emptyStateProps as HTMLAttributes<HTMLDivElement>)}
-      className={emptyStateClassName}
-    >
-      {children}
-    </div>
-  );
-}
+  PlatformEmptyStateTone,
+} from '@genarrative/shared/components';
+export { PlatformEmptyState } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformFieldLabel.tsx b/src/components/common/PlatformFieldLabel.tsx
index 5caca9696..773d0a157 100644
--- a/src/components/common/PlatformFieldLabel.tsx
+++ b/src/components/common/PlatformFieldLabel.tsx
@@ -1,47 +1,5 @@
-import type { ReactNode } from 'react';
-
-type PlatformFieldLabelVariant =
-  | 'field'
-  | 'section'
-  | 'form'
-  | 'inlineForm'
-  | 'pill'
-  | 'accentPill';
-
-type PlatformFieldLabelProps = {
-  children: ReactNode;
-  variant?: PlatformFieldLabelVariant;
-  className?: string;
-};
-
-const PLATFORM_FIELD_LABEL_CLASS: Record<PlatformFieldLabelVariant, string> = {
-  field: 'text-xs font-bold text-[var(--platform-text-soft)]',
-  section:
-    'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]',
-  form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]',
-  inlineForm:
-    'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]',
-  pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]',
-  accentPill:
-    'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm',
-};
-
-/**
- * 平台字段标签。
- * 统一承接结果页和创作工作台内重复出现的字段标题视觉。
- */
-export function PlatformFieldLabel({
-  children,
-  variant = 'field',
-  className,
-}: PlatformFieldLabelProps) {
-  return (
-    <span
-      className={[PLATFORM_FIELD_LABEL_CLASS[variant], className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {children}
-    </span>
-  );
-}
+export type {
+  PlatformFieldLabelProps,
+  PlatformFieldLabelVariant,
+} from '@genarrative/shared/components';
+export { PlatformFieldLabel } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformFilterToolbar.tsx b/src/components/common/PlatformFilterToolbar.tsx
index 20aa9b42e..eafa8eab3 100644
--- a/src/components/common/PlatformFilterToolbar.tsx
+++ b/src/components/common/PlatformFilterToolbar.tsx
@@ -1,108 +1,5 @@
-import { ChevronDown, SlidersHorizontal } from 'lucide-react';
-
-import { PlatformSegmentedTabs } from './PlatformSegmentedTabs';
-
-export interface PlatformFilterToolbarTabItem {
-  id: string;
-  label: string;
-}
-
-export interface PlatformFilterToolbarProps {
-  filterLabel: string;
-  filterCount: number;
-  tabItems: readonly PlatformFilterToolbarTabItem[];
-  activeTabId: string;
-  sortLabel: string;
-  layout: 'mobile' | 'desktop';
-  onOpenFilter: () => void;
-  onTabChange: (id: string) => void;
-  onToggleSort: () => void;
-}
-
-function buildToolbarTabItemClassName(active: boolean) {
-  return [
-    'platform-category-chip shrink-0 !min-h-[2.35rem] !rounded-none !border-0 !bg-transparent !px-0 !shadow-none hover:!bg-transparent',
-    active ? 'platform-category-chip--active' : null,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
-export function PlatformFilterToolbar({
-  filterLabel,
-  filterCount,
-  tabItems,
-  activeTabId,
-  sortLabel,
-  layout,
-  onOpenFilter,
-  onTabChange,
-  onToggleSort,
-}: PlatformFilterToolbarProps) {
-  const isMobileLayout = layout === 'mobile';
-
-  return (
-    <>
-      <div
-        className={
-          isMobileLayout
-            ? 'platform-category-filter-row'
-            : 'mb-4 flex min-w-0 items-center gap-2'
-        }
-      >
-        <button
-          type="button"
-          onClick={onOpenFilter}
-          aria-haspopup="dialog"
-          className="platform-category-filter-button"
-        >
-          <SlidersHorizontal className="h-4 w-4" />
-          <span>{filterLabel}</span>
-          <span className="platform-category-filter-button__count">
-            {filterCount}
-          </span>
-        </button>
-        {isMobileLayout ? (
-          <span className="platform-category-filter-divider" />
-        ) : null}
-        <PlatformSegmentedTabs
-          items={tabItems}
-          activeId={activeTabId}
-          onChange={onTabChange}
-          layout="scroll"
-          gap="md"
-          frame="bare"
-          surface="transparent"
-          size="sm"
-          tone="neutral"
-          className={
-            isMobileLayout
-              ? 'platform-category-chip-scroll min-w-0 flex-1'
-              : 'min-w-0 flex-1 pb-1'
-          }
-          itemClassName={(_, active) => buildToolbarTabItemClassName(active)}
-        />
-        {!isMobileLayout ? (
-          <button
-            type="button"
-            onClick={onToggleSort}
-            className="platform-category-sort-button shrink-0"
-          >
-            <span>{sortLabel}</span>
-            <ChevronDown className="h-3.5 w-3.5" />
-          </button>
-        ) : null}
-      </div>
-      {isMobileLayout ? (
-        <button
-          type="button"
-          onClick={onToggleSort}
-          className="platform-category-sort-button"
-        >
-          <span>按{sortLabel}排序</span>
-          <ChevronDown className="h-3.5 w-3.5" />
-        </button>
-      ) : null}
-    </>
-  );
-}
+export type {
+  PlatformFilterToolbarProps,
+  PlatformFilterToolbarTabItem,
+} from '@genarrative/shared/components';
+export { PlatformFilterToolbar } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformIconBadge.tsx b/src/components/common/PlatformIconBadge.tsx
index 611dd07ad..41b818a76 100644
--- a/src/components/common/PlatformIconBadge.tsx
+++ b/src/components/common/PlatformIconBadge.tsx
@@ -1,85 +1,7 @@
-import type { ReactNode } from 'react';
-
-type PlatformIconBadgeSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'xxl';
-type PlatformIconBadgeShape = 'circle' | 'rounded' | 'xl';
-type PlatformIconBadgeTone =
-  | 'neutral'
-  | 'soft'
-  | 'softBright'
-  | 'hero'
-  | 'heroMuted'
-  | 'darkAmber'
-  | 'success'
-  | 'danger';
-
-type PlatformIconBadgeProps = {
-  icon: ReactNode;
-  label?: string;
-  size?: PlatformIconBadgeSize;
-  shape?: PlatformIconBadgeShape;
-  tone?: PlatformIconBadgeTone;
-  className?: string;
-};
-
-const PLATFORM_ICON_BADGE_SIZE_CLASS: Record<PlatformIconBadgeSize, string> = {
-  xs: 'h-7 w-7',
-  sm: 'h-9 w-9',
-  base: 'h-10 w-10',
-  md: 'h-11 w-11',
-  lg: 'h-12 w-12',
-  xl: 'h-14 w-14',
-  xxl: 'h-20 w-20',
-};
-
-const PLATFORM_ICON_BADGE_SHAPE_CLASS: Record<PlatformIconBadgeShape, string> =
-  {
-    circle: 'rounded-full',
-    rounded: 'rounded-[0.85rem]',
-    xl: 'rounded-2xl',
-  };
-
-const PLATFORM_ICON_BADGE_TONE_CLASS: Record<PlatformIconBadgeTone, string> = {
-  neutral:
-    'bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
-  soft: 'bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
-  softBright: 'bg-white/84 text-[var(--platform-text-strong)] shadow-sm',
-  hero: 'bg-white/18 text-white',
-  heroMuted: 'bg-white/18 text-white/72',
-  darkAmber: 'border border-amber-400/30 bg-amber-500/15 text-amber-50',
-  success:
-    'bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
-  danger:
-    'bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
-};
-
-/**
- * 平台中性图标徽章。
- * 统一承接弹窗标题、列表项和小卡片里的非交互图标槽。
- */
-export function PlatformIconBadge({
-  icon,
-  label,
-  size = 'sm',
-  shape = 'circle',
-  tone = 'neutral',
-  className,
-}: PlatformIconBadgeProps) {
-  return (
-    <span
-      aria-label={label}
-      aria-hidden={label ? undefined : true}
-      className={[
-        'platform-icon-badge',
-        'grid shrink-0 place-items-center',
-        PLATFORM_ICON_BADGE_SIZE_CLASS[size],
-        PLATFORM_ICON_BADGE_SHAPE_CLASS[shape],
-        PLATFORM_ICON_BADGE_TONE_CLASS[tone],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {icon}
-    </span>
-  );
-}
+export type {
+  PlatformIconBadgeProps,
+  PlatformIconBadgeShape,
+  PlatformIconBadgeSize,
+  PlatformIconBadgeTone,
+} from '@genarrative/shared/components';
+export { PlatformIconBadge } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformIconButton.tsx b/src/components/common/PlatformIconButton.tsx
index 106141262..f405f6ec8 100644
--- a/src/components/common/PlatformIconButton.tsx
+++ b/src/components/common/PlatformIconButton.tsx
@@ -1,156 +1,6 @@
-import type {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  KeyboardEvent,
-  LabelHTMLAttributes,
-  ReactNode,
-  Ref,
-} from 'react';
-import { forwardRef } from 'react';
-
-type PlatformIconButtonBaseProps = {
-  label: string;
-  icon: ReactNode;
-  children?: ReactNode;
-  variant?: PlatformIconButtonVariant;
-};
-
-export type PlatformIconButtonVariant =
-  | 'platformIcon'
-  | 'surfaceFloating'
-  | 'darkMini';
-
-type PlatformIconButtonButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'aria-label' | 'children'
-> &
-  PlatformIconButtonBaseProps & {
-    asChild?: false;
-  };
-
-type PlatformIconButtonLabelProps = Omit<
-  LabelHTMLAttributes<HTMLLabelElement>,
-  'aria-label' | 'children'
-> &
-  PlatformIconButtonBaseProps & {
-    asChild: 'label';
-  };
-
-type PlatformIconButtonSpanButtonProps = Omit<
-  HTMLAttributes<HTMLSpanElement>,
-  'aria-label' | 'children' | 'role'
-> &
-  PlatformIconButtonBaseProps & {
-    asChild: 'spanButton';
-    disabled?: boolean;
-  };
-
-type PlatformIconButtonProps =
-  | PlatformIconButtonButtonProps
-  | PlatformIconButtonLabelProps
-  | PlatformIconButtonSpanButtonProps;
-
-/**
- * 平台通用图标动作按钮。
- * 统一承接纯图标动作、图标上传 label 和带短标签的浮动图标动作。
- */
-export const PlatformIconButton = forwardRef<
-  HTMLButtonElement | HTMLLabelElement | HTMLSpanElement,
-  PlatformIconButtonProps
->(function PlatformIconButton(
-  {
-    label,
-    icon,
-    children,
-    variant = 'platformIcon',
-    title,
-    className,
-    asChild,
-    ...actionProps
-  },
-  ref,
-) {
-  const variantClassName = {
-    platformIcon: 'platform-icon-button',
-    surfaceFloating:
-      'inline-flex items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] disabled:cursor-not-allowed disabled:opacity-55',
-    darkMini:
-      'inline-flex items-center justify-center rounded-full border border-white/16 bg-black/55 text-white transition-colors hover:bg-black/70 disabled:cursor-not-allowed disabled:opacity-55',
-  }[variant];
-
-  const actionClassName = [variantClassName, className]
-    .filter(Boolean)
-    .join(' ');
-
-  if (asChild === 'label') {
-    return (
-      <label
-        {...(actionProps as LabelHTMLAttributes<HTMLLabelElement>)}
-        ref={ref as Ref<HTMLLabelElement>}
-        title={title}
-        className={actionClassName}
-      >
-        <span className="sr-only">{label}</span>
-        {icon}
-        {children}
-      </label>
-    );
-  }
-
-  if (asChild === 'spanButton') {
-    const {
-      disabled,
-      onClick,
-      onKeyDown,
-      tabIndex,
-      ...spanProps
-    } = actionProps as HTMLAttributes<HTMLSpanElement> & {
-      disabled?: boolean;
-    };
-    const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
-      onKeyDown?.(event);
-      if (event.defaultPrevented || disabled) {
-        return;
-      }
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    };
-
-    return (
-      <span
-        {...spanProps}
-        ref={ref as Ref<HTMLSpanElement>}
-        aria-disabled={disabled}
-        aria-label={label}
-        className={actionClassName}
-        onClick={disabled ? undefined : onClick}
-        onKeyDown={handleKeyDown}
-        role="button"
-        tabIndex={disabled ? -1 : (tabIndex ?? 0)}
-        title={title}
-      >
-        {icon}
-        {children}
-      </span>
-    );
-  }
-
-  const { type = 'button', ...buttonProps } =
-    actionProps as ButtonHTMLAttributes<HTMLButtonElement>;
-
-  return (
-    <button
-      {...buttonProps}
-      ref={ref as Ref<HTMLButtonElement>}
-      type={type}
-      aria-label={label}
-      title={title}
-      className={actionClassName}
-    >
-      {icon}
-      {children}
-    </button>
-  );
-});
+export type {
+  PlatformIconButtonProps,
+  PlatformIconButtonSize,
+  PlatformIconButtonVariant,
+} from '@genarrative/shared/components';
+export { PlatformIconButton } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformInfoBlock.tsx b/src/components/common/PlatformInfoBlock.tsx
index 4ef5d214b..5c9e757f9 100644
--- a/src/components/common/PlatformInfoBlock.tsx
+++ b/src/components/common/PlatformInfoBlock.tsx
@@ -1,100 +1,5 @@
-import type { ReactNode } from 'react';
-
-type PlatformInfoBlockVariant = 'default' | 'compactRow';
-
-type PlatformInfoBlockProps = {
-  label?: ReactNode;
-  children: ReactNode;
-  variant?: PlatformInfoBlockVariant;
-  multiline?: boolean;
-  className?: string;
-  labelClassName?: string;
-  valueClassName?: string;
-};
-
-const PLATFORM_INFO_BLOCK_CLASS: Record<PlatformInfoBlockVariant, string> = {
-  default:
-    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-2',
-  compactRow:
-    'flex justify-between gap-2 rounded-[0.85rem] border-0 bg-white/74 px-2.5 py-1.5 sm:gap-3 sm:px-3 sm:py-2',
-};
-
-const PLATFORM_INFO_BLOCK_LABEL_CLASS: Record<
+export type {
+  PlatformInfoBlockProps,
   PlatformInfoBlockVariant,
-  string
-> = {
-  default: 'text-xs font-bold text-[var(--platform-text-soft)]',
-  compactRow: 'text-xs font-bold text-[var(--platform-text-muted)] sm:text-sm',
-};
-
-function getValueClassName({
-  hasLabel,
-  multiline,
-  variant,
-  valueClassName,
-}: {
-  hasLabel: boolean;
-  multiline: boolean;
-  variant: PlatformInfoBlockVariant;
-  valueClassName?: string;
-}) {
-  if (variant === 'compactRow') {
-    return [
-      'break-words text-right text-xs font-black leading-5 text-[var(--platform-text-strong)] sm:text-sm',
-      valueClassName,
-    ]
-      .filter(Boolean)
-      .join(' ');
-  }
-
-  return [
-    'break-words text-sm text-[var(--platform-text-strong)]',
-    hasLabel ? 'mt-1' : null,
-    multiline ? 'whitespace-pre-wrap leading-6' : 'font-semibold leading-5',
-    valueClassName,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
-/**
- * 平台信息展示块。
- * 统一承接弹窗和详情页中“短标签 + 白底内容”的只读信息 chrome。
- */
-export function PlatformInfoBlock({
-  label,
-  children,
-  variant = 'default',
-  multiline = false,
-  className,
-  labelClassName,
-  valueClassName,
-}: PlatformInfoBlockProps) {
-  return (
-    <div
-      className={[PLATFORM_INFO_BLOCK_CLASS[variant], className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {label ? (
-        <div
-          className={[PLATFORM_INFO_BLOCK_LABEL_CLASS[variant], labelClassName]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          {label}
-        </div>
-      ) : null}
-      <div
-        className={getValueClassName({
-          hasLabel: Boolean(label),
-          multiline,
-          variant,
-          valueClassName,
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
+} from '@genarrative/shared/components';
+export { PlatformInfoBlock } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformNavigableListItem.tsx b/src/components/common/PlatformNavigableListItem.tsx
index a9a1ce0d1..c56e884da 100644
--- a/src/components/common/PlatformNavigableListItem.tsx
+++ b/src/components/common/PlatformNavigableListItem.tsx
@@ -1,88 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-
-type PlatformNavigableListItemAlign = 'center' | 'start';
-
-type PlatformNavigableListItemProps = Omit<
-  ComponentPropsWithoutRef<'button'>,
-  'children' | 'type'
-> & {
-  children: ReactNode;
-  leading?: ReactNode;
-  trailing?: ReactNode;
-  align?: PlatformNavigableListItemAlign;
-  leadingClassName?: string;
-  trailingClassName?: string;
-  bodyClassName?: string;
-};
-
-const ALIGN_CLASS: Record<PlatformNavigableListItemAlign, string> = {
-  center: 'items-center gap-3',
-  start: 'items-start gap-4',
-};
-
-/**
- * 轻量可导航列表行骨架。
- * 只统一 button 语义与 left-content/right-affordance 结构，不持有业务文案、badge 或封面规则。
- */
-export function PlatformNavigableListItem({
-  children,
-  leading = null,
-  trailing = null,
-  align = 'center',
-  className,
-  leadingClassName,
-  trailingClassName,
-  bodyClassName,
-  ...props
-}: PlatformNavigableListItemProps) {
-  return (
-    <button
-      type="button"
-      className={[
-        'platform-navigable-list-item flex w-full min-w-0 text-left',
-        ALIGN_CLASS[align],
-        className ?? null,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      {...props}
-    >
-      {leading ? (
-        <div
-          className={[
-            'platform-navigable-list-item__leading shrink-0',
-            leadingClassName ?? null,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          {leading}
-        </div>
-      ) : null}
-
-      <div
-        className={[
-          'platform-navigable-list-item__body min-w-0 flex-1',
-          bodyClassName ?? null,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {children}
-      </div>
-
-      {trailing ? (
-        <div
-          className={[
-            'platform-navigable-list-item__trailing shrink-0',
-            trailingClassName ?? null,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          {trailing}
-        </div>
-      ) : null}
-    </button>
-  );
-}
+export type {
+  PlatformNavigableListItemAlign,
+  PlatformNavigableListItemProps,
+} from '@genarrative/shared/components';
+export { PlatformNavigableListItem } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformPillBadge.tsx b/src/components/common/PlatformPillBadge.tsx
index 1e4ec71e8..4c0c6337c 100644
--- a/src/components/common/PlatformPillBadge.tsx
+++ b/src/components/common/PlatformPillBadge.tsx
@@ -1,40 +1,6 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-import {
-  getPlatformPillBadgeClassName,
-  type PlatformPillBadgeSize,
-  type PlatformPillBadgeTone,
-} from './platformPillBadgeModel';
-
-type PlatformPillBadgeProps = Omit<
-  HTMLAttributes<HTMLSpanElement>,
-  'children'
-> & {
-  tone?: PlatformPillBadgeTone;
-  size?: PlatformPillBadgeSize;
-  icon?: ReactNode;
-  children: ReactNode;
-};
-
-/**
- * 平台胶囊状态标签。
- * 统一承接结果页、作品卡和配置摘要里的小型状态 / 标签 chip。
- */
-export function PlatformPillBadge({
-  tone = 'neutral',
-  size = 'sm',
-  icon,
-  children,
-  className,
-  ...spanProps
-}: PlatformPillBadgeProps) {
-  return (
-    <span
-      {...spanProps}
-      className={getPlatformPillBadgeClassName({ tone, size, className })}
-    >
-      {icon}
-      {children}
-    </span>
-  );
-}
+export type {
+  PlatformPillBadgeProps,
+  PlatformPillBadgeSize,
+  PlatformPillBadgeTone,
+} from '@genarrative/shared/components';
+export { PlatformPillBadge } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformProgressBar.tsx b/src/components/common/PlatformProgressBar.tsx
index de1b8ad1d..958e61fed 100644
--- a/src/components/common/PlatformProgressBar.tsx
+++ b/src/components/common/PlatformProgressBar.tsx
@@ -1,90 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
-
-type PlatformProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
-
-type PlatformProgressBarProps = {
-  value: number;
-  minVisibleValue?: number;
-  size?: PlatformProgressBarSize;
-  ariaLabel?: string;
-  labelledBy?: string;
-  indeterminate?: boolean;
-  className?: string;
-  fillClassName?: string;
-  fillStyle?: CSSProperties;
-  trackStyle?: CSSProperties;
-  children?: ReactNode;
-};
-
-const PLATFORM_PROGRESS_BAR_SIZE_CLASS: Record<
+export type {
+  PlatformProgressBarProps,
   PlatformProgressBarSize,
-  string
-> = {
-  xs: 'h-2',
-  sm: 'h-2.5',
-  md: 'h-3',
-  lg: 'h-12',
-};
-
-function clampProgressValue(value: number) {
-  if (!Number.isFinite(value)) {
-    return 0;
-  }
-
-  return Math.min(100, Math.max(0, Math.round(value)));
-}
-
-/**
- * 平台通用进度条。
- * 统一承接 progressbar 语义、platform-progress-track 壳和填充宽度计算。
- */
-export function PlatformProgressBar({
-  value,
-  minVisibleValue = 0,
-  size = 'xs',
-  ariaLabel,
-  labelledBy,
-  indeterminate = false,
-  className,
-  fillClassName,
-  fillStyle,
-  trackStyle,
-  children,
-}: PlatformProgressBarProps) {
-  const progress = clampProgressValue(value);
-  const visibleProgress =
-    progress <= 0 ? 0 : Math.max(minVisibleValue, progress);
-
-  return (
-    <div
-      role="progressbar"
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={indeterminate ? undefined : progress}
-      aria-label={ariaLabel}
-      aria-labelledby={labelledBy}
-      className={[
-        'platform-progress-track relative overflow-hidden rounded-full',
-        PLATFORM_PROGRESS_BAR_SIZE_CLASS[size],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={trackStyle}
-    >
-      <div
-        className={[
-          'h-full rounded-full transition-[width] duration-300',
-          fillClassName,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        style={{
-          width: `${visibleProgress}%`,
-          ...fillStyle,
-        }}
-      />
-      {children}
-    </div>
-  );
-}
+} from '@genarrative/shared/components';
+export { PlatformProgressBar } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformRuntimeStatusToast.tsx b/src/components/common/PlatformRuntimeStatusToast.tsx
index 0232c96c6..08e93dacb 100644
--- a/src/components/common/PlatformRuntimeStatusToast.tsx
+++ b/src/components/common/PlatformRuntimeStatusToast.tsx
@@ -1,104 +1,8 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-type PlatformRuntimeStatusTone =
-  | 'error'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'neutral';
-type PlatformRuntimeStatusSurface = 'light' | 'dark' | 'solid';
-type PlatformRuntimeStatusSize = 'xs' | 'sm' | 'md';
-type PlatformRuntimeStatusShape = 'pill' | 'rounded';
-
-type PlatformRuntimeStatusToastProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'children'
-> & {
-  tone: PlatformRuntimeStatusTone;
-  surface?: PlatformRuntimeStatusSurface;
-  size?: PlatformRuntimeStatusSize;
-  shape?: PlatformRuntimeStatusShape;
-  children: ReactNode;
-};
-
-const PLATFORM_RUNTIME_STATUS_SURFACE_CLASS: Record<
-  PlatformRuntimeStatusSurface,
-  Record<PlatformRuntimeStatusTone, string>
-> = {
-  light: {
-    error:
-      'border-white/70 bg-white/86 text-[var(--platform-button-danger-text)]',
-    success:
-      'border-white/70 bg-white/86 text-[var(--platform-success-text)]',
-    info: 'border-white/70 bg-white/86 text-[var(--platform-cool-text)]',
-    warning: 'border-white/70 bg-white/86 text-[var(--platform-warm-text)]',
-    neutral: 'border-white/70 bg-white/86 text-[var(--platform-text-base)]',
-  },
-  dark: {
-    error: 'border-rose-200/35 bg-rose-400/18 text-rose-50',
-    success: 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50',
-    info: 'border-sky-200/30 bg-sky-400/16 text-sky-50',
-    warning: 'border-amber-200/35 bg-amber-400/18 text-amber-50',
-    neutral: 'border-white/15 bg-white/12 text-white/82',
-  },
-  solid: {
-    error: 'border-transparent bg-rose-600 text-white',
-    success: 'border-transparent bg-emerald-600 text-white',
-    info: 'border-transparent bg-sky-600 text-white',
-    warning: 'border-transparent bg-amber-500 text-amber-950',
-    neutral: 'border-transparent bg-slate-800 text-white',
-  },
-};
-
-const PLATFORM_RUNTIME_STATUS_SIZE_CLASS: Record<
-  PlatformRuntimeStatusSize,
-  string
-> = {
-  xs: 'px-3 py-1 text-xs leading-5',
-  sm: 'px-3 py-2 text-sm leading-5',
-  md: 'px-4 py-3 text-sm leading-6',
-};
-
-const PLATFORM_RUNTIME_STATUS_SHAPE_CLASS: Record<
+export type {
   PlatformRuntimeStatusShape,
-  string
-> = {
-  pill: 'rounded-full',
-  rounded: 'rounded-[1.2rem]',
-};
-
-/**
- * 运行态 HUD 状态提示。
- * 收口游戏内短错误、成功和反馈 chip，位置与玩法强品牌视觉仍由调用方控制。
- */
-export function PlatformRuntimeStatusToast({
-  tone,
-  surface = 'light',
-  size = 'sm',
-  shape = 'pill',
-  children,
-  className,
-  role,
-  ...divProps
-}: PlatformRuntimeStatusToastProps) {
-  const ariaLive = divProps['aria-live'];
-
-  return (
-    <div
-      {...divProps}
-      role={role ?? (tone === 'error' ? 'alert' : 'status')}
-      aria-live={ariaLive ?? (tone === 'error' ? 'assertive' : 'polite')}
-      className={[
-        'platform-runtime-status-toast inline-flex max-w-full items-center justify-center gap-1.5 border text-center font-black shadow-sm backdrop-blur',
-        PLATFORM_RUNTIME_STATUS_SIZE_CLASS[size],
-        PLATFORM_RUNTIME_STATUS_SHAPE_CLASS[shape],
-        PLATFORM_RUNTIME_STATUS_SURFACE_CLASS[surface][tone],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {children}
-    </div>
-  );
-}
+  PlatformRuntimeStatusSize,
+  PlatformRuntimeStatusSurface,
+  PlatformRuntimeStatusToastProps,
+  PlatformRuntimeStatusTone,
+} from '@genarrative/shared/components';
+export { PlatformRuntimeStatusToast } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformSegmentedTabs.tsx b/src/components/common/PlatformSegmentedTabs.tsx
index 2df0a294b..6d8359832 100644
--- a/src/components/common/PlatformSegmentedTabs.tsx
+++ b/src/components/common/PlatformSegmentedTabs.tsx
@@ -1,243 +1,14 @@
-import type { ReactNode } from 'react';
-
-type PlatformSegmentedTabsColumns =
-  | 'one'
-  | 'two'
-  | 'three'
-  | 'four'
-  | 'threeToSix';
-type PlatformSegmentedTabsGap = 'sm' | 'md';
-type PlatformSegmentedTabsRadius = 'md' | 'lg' | 'xl';
-type PlatformSegmentedTabsSize = 'sm' | 'md' | 'compact' | 'choice' | 'tab';
-type PlatformSegmentedTabsSurface = 'default' | 'soft' | 'transparent';
-type PlatformSegmentedTabsTone = 'neutral' | 'warm' | 'rose' | 'underline';
-type PlatformSegmentedTabsFrame = 'panel' | 'bare';
-type PlatformSegmentedTabsSemantics = 'segment' | 'tabs';
-type PlatformSegmentedTabsLayout = 'grid' | 'scroll';
-
-export type PlatformSegmentedTabItem<TId extends string> = {
-  id: TId;
-  label: ReactNode;
-  ariaLabel?: string;
-  disabled?: boolean;
-};
-
-type PlatformSegmentedTabsProps<TId extends string> = {
-  items: readonly PlatformSegmentedTabItem<TId>[];
-  activeId: TId;
-  onChange: (id: TId) => void;
-  columns?: PlatformSegmentedTabsColumns;
-  gap?: PlatformSegmentedTabsGap;
-  radius?: PlatformSegmentedTabsRadius;
-  size?: PlatformSegmentedTabsSize;
-  surface?: PlatformSegmentedTabsSurface;
-  tone?: PlatformSegmentedTabsTone;
-  frame?: PlatformSegmentedTabsFrame;
-  semantics?: PlatformSegmentedTabsSemantics;
-  layout?: PlatformSegmentedTabsLayout;
-  ariaLabel?: string;
-  truncateLabels?: boolean;
-  disabled?: boolean;
-  className?: string;
-  itemClassName?:
-    | string
-    | ((item: PlatformSegmentedTabItem<TId>, active: boolean) => string | null);
-};
-
-const PLATFORM_SEGMENTED_TABS_COLUMNS_CLASS: Record<
+export type {
+  PlatformSegmentedTabItem,
   PlatformSegmentedTabsColumns,
-  string
-> = {
-  one: 'grid-cols-1',
-  two: 'grid-cols-2',
-  three: 'grid-cols-3',
-  four: 'grid-cols-4',
-  threeToSix: 'grid-cols-3 sm:grid-cols-6',
-};
-
-const PLATFORM_SEGMENTED_TABS_GAP_CLASS: Record<
-  PlatformSegmentedTabsGap,
-  string
-> = {
-  sm: 'gap-1',
-  md: 'gap-2',
-};
-
-const PLATFORM_SEGMENTED_TABS_RADIUS_CLASS: Record<
-  PlatformSegmentedTabsRadius,
-  string
-> = {
-  md: 'rounded-[1rem]',
-  lg: 'rounded-[1.1rem]',
-  xl: 'rounded-[1.25rem]',
-};
-
-const PLATFORM_SEGMENTED_TABS_SURFACE_CLASS: Record<
-  PlatformSegmentedTabsSurface,
-  string
-> = {
-  default: 'bg-white/62',
-  soft: 'bg-white/58',
-  transparent: 'bg-transparent',
-};
-
-const PLATFORM_SEGMENTED_TABS_FRAME_CLASS: Record<
   PlatformSegmentedTabsFrame,
-  string
-> = {
-  panel: 'border border-[var(--platform-subpanel-border)] p-1',
-  bare: 'border-0 p-0',
-};
-
-const PLATFORM_SEGMENTED_TABS_ITEM_SIZE_CLASS: Record<
+  PlatformSegmentedTabsGap,
+  PlatformSegmentedTabsLayout,
+  PlatformSegmentedTabsProps,
+  PlatformSegmentedTabsRadius,
+  PlatformSegmentedTabsSemantics,
   PlatformSegmentedTabsSize,
-  string
-> = {
-  sm: 'min-h-10 rounded-[0.9rem] px-3 text-sm font-bold',
-  md: 'min-h-10 rounded-[1rem] px-3 text-sm font-bold',
-  compact: 'min-h-10 rounded-[0.8rem] px-2 text-xs font-black sm:text-sm',
-  choice: 'min-h-10 rounded-[0.9rem] px-1.5 py-2 text-center',
-  tab: 'relative h-12 rounded-none px-2 text-base font-semibold sm:text-lg',
-};
-
-const PLATFORM_SEGMENTED_TABS_TONE_CLASS: Record<
+  PlatformSegmentedTabsSurface,
   PlatformSegmentedTabsTone,
-  { active: string; idle: string }
-> = {
-  neutral: {
-    active: 'bg-white text-[var(--platform-text-strong)] shadow-sm',
-    idle: 'text-[var(--platform-text-base)] hover:bg-white/60',
-  },
-  warm: {
-    active:
-      'bg-[var(--platform-warm-bg)] text-[var(--platform-text-strong)] shadow-[inset_0_0_0_1px_rgba(204,117,76,0.18)]',
-    idle: 'text-[var(--platform-text-base)] hover:bg-white/58',
-  },
-  rose: {
-    active:
-      'border border-[#ff7890] bg-[linear-gradient(180deg,#ff7890_0%,#ff4f6a_100%)] text-white shadow-[0_8px_18px_rgba(244,63,94,0.16)]',
-    idle: 'border border-[var(--platform-subpanel-border)] bg-white/76 text-[var(--platform-text-strong)] hover:border-[var(--platform-surface-hover-border)] hover:bg-white',
-  },
-  underline: {
-    active: 'text-[var(--platform-text-strong)]',
-    idle: 'text-[var(--platform-text-muted)] hover:text-[var(--platform-text-base)]',
-  },
-};
-
-function resolveItemClassName<TId extends string>({
-  active,
-  disabled,
-  item,
-  itemClassName,
-  size,
-  tone,
-}: {
-  active: boolean;
-  disabled: boolean;
-  item: PlatformSegmentedTabItem<TId>;
-  itemClassName?: PlatformSegmentedTabsProps<TId>['itemClassName'];
-  size: PlatformSegmentedTabsSize;
-  tone: PlatformSegmentedTabsTone;
-}) {
-  const extraClassName =
-    typeof itemClassName === 'function'
-      ? itemClassName(item, active)
-      : itemClassName;
-
-  return [
-    'min-w-0 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)]',
-    PLATFORM_SEGMENTED_TABS_ITEM_SIZE_CLASS[size],
-    active
-      ? PLATFORM_SEGMENTED_TABS_TONE_CLASS[tone].active
-      : PLATFORM_SEGMENTED_TABS_TONE_CLASS[tone].idle,
-    disabled ? 'cursor-not-allowed opacity-55 hover:bg-transparent' : null,
-    extraClassName,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
-/**
- * 平台白底分段选择控件。
- * 统一承接结果页和轻量弹窗内重复的 tab / segment button chrome。
- */
-export function PlatformSegmentedTabs<TId extends string>({
-  items,
-  activeId,
-  onChange,
-  columns = 'two',
-  gap = 'md',
-  radius = 'xl',
-  size = 'md',
-  surface = 'default',
-  tone = 'neutral',
-  frame = 'panel',
-  semantics = 'segment',
-  layout = 'grid',
-  ariaLabel,
-  truncateLabels = false,
-  disabled = false,
-  className,
-  itemClassName,
-}: PlatformSegmentedTabsProps<TId>) {
-  return (
-    <div
-      role={semantics === 'tabs' ? 'tablist' : undefined}
-      aria-label={semantics === 'tabs' ? ariaLabel : undefined}
-      className={[
-        layout === 'scroll'
-          ? 'flex min-w-0 items-center overflow-x-auto scrollbar-hide'
-          : 'grid',
-        PLATFORM_SEGMENTED_TABS_FRAME_CLASS[frame],
-        PLATFORM_SEGMENTED_TABS_GAP_CLASS[gap],
-        layout === 'grid' ? PLATFORM_SEGMENTED_TABS_COLUMNS_CLASS[columns] : null,
-        PLATFORM_SEGMENTED_TABS_RADIUS_CLASS[radius],
-        PLATFORM_SEGMENTED_TABS_SURFACE_CLASS[surface],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {items.map((item) => {
-        const active = activeId === item.id;
-        const itemDisabled = disabled || Boolean(item.disabled);
-        return (
-          <button
-            key={item.id}
-            type="button"
-            role={semantics === 'tabs' ? 'tab' : undefined}
-            aria-label={item.ariaLabel}
-            aria-selected={semantics === 'tabs' ? active : undefined}
-            aria-pressed={semantics === 'segment' ? active : undefined}
-            disabled={itemDisabled}
-            onClick={() => {
-              if (itemDisabled) {
-                return;
-              }
-              onChange(item.id);
-            }}
-            className={resolveItemClassName({
-              active,
-              disabled: itemDisabled,
-              item,
-              itemClassName,
-              size,
-              tone,
-            })}
-          >
-            <>
-              {truncateLabels ? (
-                <span className="block truncate">{item.label}</span>
-              ) : (
-                item.label
-              )}
-              {tone === 'underline' && active ? (
-                <span className="absolute bottom-1 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full bg-[var(--platform-accent)]" />
-              ) : null}
-            </>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+} from '@genarrative/shared/components';
+export { PlatformSegmentedTabs } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformStatGrid.tsx b/src/components/common/PlatformStatGrid.tsx
index 1fe065fec..832622599 100644
--- a/src/components/common/PlatformStatGrid.tsx
+++ b/src/components/common/PlatformStatGrid.tsx
@@ -1,158 +1,10 @@
-import type { ReactNode } from 'react';
-
-type PlatformStatGridColumns = 'two' | 'three' | 'four' | 'twoToFour';
-type PlatformStatGridDensity = 'compact' | 'default';
-type PlatformStatGridOrder = 'valueFirst' | 'labelFirst';
-type PlatformStatGridSurface = 'soft' | 'plain';
-type PlatformStatGridTextAlign = 'left' | 'center';
-
-export type PlatformStatGridItem = {
-  label?: ReactNode;
-  value: ReactNode;
-  key?: string;
-};
-
-type PlatformStatGridProps = {
-  items: readonly PlatformStatGridItem[];
-  columns?: PlatformStatGridColumns;
-  density?: PlatformStatGridDensity;
-  order?: PlatformStatGridOrder;
-  surface?: PlatformStatGridSurface;
-  textAlign?: PlatformStatGridTextAlign;
-  className?: string;
-  itemClassName?:
-    | string
-    | ((item: PlatformStatGridItem, index: number) => string | null);
-};
-
-const PLATFORM_STAT_GRID_COLUMNS_CLASS: Record<
+export type {
   PlatformStatGridColumns,
-  string
-> = {
-  two: 'grid-cols-2',
-  three: 'grid-cols-3',
-  four: 'grid-cols-4',
-  twoToFour: 'grid-cols-2 sm:grid-cols-4',
-};
-
-const PLATFORM_STAT_GRID_DENSITY_CLASS: Record<
   PlatformStatGridDensity,
-  { item: string; value: string; label: string }
-> = {
-  compact: {
-    item: 'rounded-[1rem] px-2 py-2',
-    value: 'text-sm font-black',
-    label: 'mt-1 text-[0.68rem] font-bold tracking-[0.14em]',
-  },
-  default: {
-    item: 'rounded-[1rem] px-3 py-3',
-    value: 'text-lg font-black',
-    label: 'mt-1 text-[11px] font-bold tracking-[0.14em]',
-  },
-};
-
-const PLATFORM_STAT_GRID_SURFACE_CLASS: Record<
+  PlatformStatGridItem,
+  PlatformStatGridOrder,
+  PlatformStatGridProps,
   PlatformStatGridSurface,
-  string
-> = {
-  soft: 'bg-white/76',
-  plain: 'border border-[var(--platform-subpanel-border)] bg-white/68',
-};
-
-const PLATFORM_STAT_GRID_TEXT_ALIGN_CLASS: Record<
   PlatformStatGridTextAlign,
-  string
-> = {
-  left: 'text-left',
-  center: 'text-center',
-};
-
-/**
- * 平台统计小卡网格。
- * 统一承接结果页里的“数值 / 标签”或轻量状态 chip 布局。
- */
-export function PlatformStatGrid({
-  items,
-  columns = 'three',
-  density = 'default',
-  order = 'valueFirst',
-  surface = 'soft',
-  textAlign = 'center',
-  className,
-  itemClassName,
-}: PlatformStatGridProps) {
-  const densityClass = PLATFORM_STAT_GRID_DENSITY_CLASS[density];
-
-  return (
-    <div
-      className={[
-        'grid gap-2',
-        PLATFORM_STAT_GRID_COLUMNS_CLASS[columns],
-        PLATFORM_STAT_GRID_TEXT_ALIGN_CLASS[textAlign],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {items.map((item, index) => {
-        const extraClassName =
-          typeof itemClassName === 'function'
-            ? itemClassName(item, index)
-            : itemClassName;
-        const key =
-          item.key ??
-          (typeof item.label === 'string'
-            ? item.label
-            : typeof item.value === 'string'
-              ? item.value
-              : index);
-
-        const valueNode = (
-          <div
-            className={[
-              densityClass.value,
-              'text-[var(--platform-text-strong)]',
-            ].join(' ')}
-          >
-            {item.value}
-          </div>
-        );
-        const labelNode = item.label ? (
-          <div
-            className={[
-              densityClass.label,
-              'text-[var(--platform-text-soft)]',
-            ].join(' ')}
-          >
-            {item.label}
-          </div>
-        ) : null;
-
-        return (
-          <div
-            key={key}
-            className={[
-              densityClass.item,
-              PLATFORM_STAT_GRID_SURFACE_CLASS[surface],
-              extraClassName,
-            ]
-              .filter(Boolean)
-              .join(' ')}
-          >
-            {order === 'labelFirst' ? (
-              <>
-                {labelNode}
-                {valueNode}
-              </>
-            ) : (
-              <>
-                {valueNode}
-                {labelNode}
-              </>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+} from '@genarrative/shared/components';
+export { PlatformStatGrid } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformStatusMessage.tsx b/src/components/common/PlatformStatusMessage.tsx
index 15a28e787..35a2e891f 100644
--- a/src/components/common/PlatformStatusMessage.tsx
+++ b/src/components/common/PlatformStatusMessage.tsx
@@ -1,108 +1,7 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-type PlatformStatusTone = 'error' | 'success' | 'info' | 'warning' | 'neutral';
-type PlatformStatusSurface =
-  | 'light'
-  | 'tinted'
-  | 'platform'
-  | 'profile'
-  | 'editorDark';
-type PlatformStatusSize = 'xs' | 'sm' | 'md';
-
-type PlatformStatusMessageProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'children'
-> & {
-  tone: PlatformStatusTone;
-  surface?: PlatformStatusSurface;
-  size?: PlatformStatusSize;
-  remapSurface?: boolean;
-  children: ReactNode;
-};
-
-const PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE: Record<
-  PlatformStatusSurface,
-  Record<PlatformStatusTone, string>
-> = {
-  light: {
-    error: 'border-rose-200 bg-rose-50 text-rose-700',
-    success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
-    warning: 'border-amber-200 bg-amber-50 text-amber-900',
-    neutral:
-      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
-  },
-  tinted: {
-    error: 'border-rose-400/20 bg-rose-500/10 text-rose-700',
-    success: 'border-emerald-300/25 bg-emerald-500/12 text-emerald-700',
-    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
-    warning: 'border-amber-300/30 bg-amber-500/12 text-amber-900',
-    neutral:
-      'border-[var(--platform-subpanel-border)] bg-white/20 text-[var(--platform-text-base)]',
-  },
-  platform: {
-    error:
-      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
-    success:
-      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
-    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
-    warning:
-      'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
-    neutral:
-      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
-  },
-  profile: {
-    error:
-      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
-    success:
-      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
-    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
-    warning: 'border-amber-300 bg-amber-500/12 text-amber-900',
-    neutral:
-      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
-  },
-  editorDark: {
-    error: 'border-rose-300/15 bg-rose-500/10 text-rose-50/90',
-    success: 'border-emerald-300/15 bg-emerald-500/10 text-emerald-50/90',
-    info: 'border-sky-300/15 bg-sky-500/10 text-sky-50/90',
-    warning: 'border-amber-300/15 bg-amber-500/10 text-amber-50/90',
-    neutral: 'border-white/10 bg-black/20 text-zinc-300',
-  },
-};
-
-const PLATFORM_STATUS_MESSAGE_SIZE_CLASS: Record<PlatformStatusSize, string> = {
-  xs: 'px-3 py-2 text-xs',
-  sm: 'px-3 py-2 text-sm',
-  md: 'px-4 py-3 text-sm leading-6',
-};
-
-/**
- * 平台通用状态提示条。
- * 收口错误、成功和提示类状态的基础边框、底色和文字颜色。
- */
-export function PlatformStatusMessage({
-  tone,
-  surface = 'light',
-  size = 'sm',
-  remapSurface = false,
-  children,
-  className,
-  ...divProps
-}: PlatformStatusMessageProps) {
-  return (
-    <div
-      {...divProps}
-      className={[
-        remapSurface ? 'platform-remap-surface' : null,
-        'platform-status-message rounded-xl border',
-        PLATFORM_STATUS_MESSAGE_SIZE_CLASS[size],
-        PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE[surface][tone],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {children}
-    </div>
-  );
-}
+export type {
+  PlatformStatusMessageProps,
+  PlatformStatusMessageSize,
+  PlatformStatusMessageSurface,
+  PlatformStatusMessageTone,
+} from '@genarrative/shared/components';
+export { PlatformStatusMessage } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformSubpanel.tsx b/src/components/common/PlatformSubpanel.tsx
index 75cb8521b..44b24394f 100644
--- a/src/components/common/PlatformSubpanel.tsx
+++ b/src/components/common/PlatformSubpanel.tsx
@@ -1,222 +1,10 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-
-import { PlatformFieldLabel } from './PlatformFieldLabel';
-
-type PlatformSubpanelStaticElement = 'section' | 'div' | 'article' | 'aside';
-type PlatformSubpanelElement = PlatformSubpanelStaticElement | 'button';
-type PlatformSubpanelPadding =
-  | 'tight'
-  | 'row'
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'none';
-type PlatformSubpanelRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type PlatformSubpanelSurface =
-  | 'platform'
-  | 'flat'
-  | 'soft'
-  | 'dark'
-  | 'darkSky'
-  | 'darkEmerald'
-  | 'darkAmber'
-  | 'darkRose'
-  | 'danger';
-type PlatformSubpanelTitleVariant = 'section' | 'strong';
-
-type PlatformSubpanelBaseProps = {
-  as?: PlatformSubpanelElement;
-  title?: ReactNode;
-  titleVariant?: PlatformSubpanelTitleVariant;
-  actions?: ReactNode;
-  children: ReactNode;
-  interactive?: boolean;
-  padding?: PlatformSubpanelPadding;
-  radius?: PlatformSubpanelRadius;
-  surface?: PlatformSubpanelSurface;
-  className?: string;
-  headerClassName?: string;
-  titleClassName?: string;
-  actionsClassName?: string;
-  bodyClassName?: string;
-};
-
-type PlatformSubpanelStaticProps = PlatformSubpanelBaseProps &
-  Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'title'> & {
-    as?: PlatformSubpanelStaticElement;
-  };
-
-type PlatformSubpanelButtonProps = PlatformSubpanelBaseProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> & {
-    as: 'button';
-  };
-
-type PlatformSubpanelProps =
-  | PlatformSubpanelStaticProps
-  | PlatformSubpanelButtonProps;
-
-const PLATFORM_SUBPANEL_PADDING_CLASS: Record<PlatformSubpanelPadding, string> =
-  {
-    tight: 'p-2',
-    row: 'px-3 py-2',
-    xs: 'px-3 py-2.5',
-    sm: 'p-3',
-    md: 'p-4',
-    lg: 'p-4 sm:p-5',
-    none: 'p-0',
-  };
-
-const PLATFORM_SUBPANEL_RADIUS_CLASS: Record<PlatformSubpanelRadius, string> = {
-  xs: 'rounded-xl',
-  sm: 'rounded-[1rem]',
-  md: 'rounded-[1.25rem]',
-  lg: 'rounded-[1.35rem]',
-  xl: 'rounded-[1.5rem]',
-};
-
-const PLATFORM_SUBPANEL_SURFACE_CLASS: Record<PlatformSubpanelSurface, string> =
-  {
-    platform: 'platform-subpanel',
-    flat: 'border border-[var(--platform-subpanel-border)] bg-white/72',
-    soft: 'border border-[var(--platform-subpanel-border)] bg-white/68',
-    dark: 'border border-white/10 bg-black/25 text-zinc-100',
-    darkSky: 'border border-sky-400/18 bg-sky-500/8 text-sky-50',
-    darkEmerald:
-      'border border-emerald-400/18 bg-emerald-500/8 text-emerald-100/85',
-    darkAmber: 'border border-amber-300/18 bg-amber-500/8 text-amber-50',
-    darkRose: 'border border-rose-300/18 bg-rose-500/8 text-rose-50',
-    danger:
-      'border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)]',
-  };
-
-const PLATFORM_SUBPANEL_INTERACTIVE_CLASS =
-  'text-left transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-warm-border)] disabled:cursor-not-allowed disabled:opacity-55';
-
-function renderSubpanelTitle({
-  title,
-  titleClassName,
-  titleVariant,
-}: {
-  title: ReactNode;
-  titleClassName?: string;
-  titleVariant: PlatformSubpanelTitleVariant;
-}) {
-  if (titleVariant === 'strong') {
-    return (
-      <div
-        className={[
-          'text-sm font-black text-[var(--platform-text-strong)]',
-          titleClassName,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {title}
-      </div>
-    );
-  }
-
-  return (
-    <PlatformFieldLabel variant="section" className={titleClassName}>
-      {title}
-    </PlatformFieldLabel>
-  );
-}
-
-/**
- * 平台白底子面板。
- * 统一承接结果页和创作工作台里的 subpanel 外壳、标题行和右侧动作区。
- */
-export function PlatformSubpanel({
-  as: Component = 'section',
-  title,
-  titleVariant = 'section',
-  actions,
-  children,
-  interactive = false,
-  padding = 'md',
-  radius = 'md',
-  surface = 'platform',
-  className,
-  headerClassName,
-  titleClassName,
-  actionsClassName,
-  bodyClassName,
-  ...elementProps
-}: PlatformSubpanelProps) {
-  const hasHeader = Boolean(title) || Boolean(actions);
-  const subpanelClassName = [
-    PLATFORM_SUBPANEL_SURFACE_CLASS[surface],
-    PLATFORM_SUBPANEL_RADIUS_CLASS[radius],
-    PLATFORM_SUBPANEL_PADDING_CLASS[padding],
-    interactive ? PLATFORM_SUBPANEL_INTERACTIVE_CLASS : null,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-  const content = (
-    <>
-      {hasHeader ? (
-        <div
-          className={[
-            'flex items-center justify-between gap-3',
-            headerClassName,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          <div className="min-w-0">
-            {title
-              ? renderSubpanelTitle({
-                  title,
-                  titleClassName,
-                  titleVariant,
-                })
-              : null}
-          </div>
-          {actions ? (
-            <div
-              className={['flex shrink-0 items-center gap-2', actionsClassName]
-                .filter(Boolean)
-                .join(' ')}
-            >
-              {actions}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-
-      {bodyClassName ? (
-        <div className={bodyClassName}>{children}</div>
-      ) : (
-        children
-      )}
-    </>
-  );
-
-  if (Component === 'button') {
-    const { type = 'button', ...buttonProps } = elementProps as Omit<
-      ButtonHTMLAttributes<HTMLButtonElement>,
-      'children' | 'title'
-    >;
-
-    return (
-      <button {...buttonProps} type={type} className={subpanelClassName}>
-        {content}
-      </button>
-    );
-  }
-
-  const StaticComponent = Component;
-  const staticProps = elementProps as Omit<
-    HTMLAttributes<HTMLElement>,
-    'children' | 'className' | 'title'
-  >;
-
-  return (
-    <StaticComponent {...staticProps} className={subpanelClassName}>
-      {content}
-    </StaticComponent>
-  );
-}
+export type {
+  PlatformSubpanelElement,
+  PlatformSubpanelPadding,
+  PlatformSubpanelProps,
+  PlatformSubpanelRadius,
+  PlatformSubpanelStaticElement,
+  PlatformSubpanelSurface,
+  PlatformSubpanelTitleVariant,
+} from '@genarrative/shared/components';
+export { PlatformSubpanel } from '@genarrative/shared/components';
diff --git a/src/components/common/PlatformTextField.tsx b/src/components/common/PlatformTextField.tsx
index f4f43a766..cb69a1578 100644
--- a/src/components/common/PlatformTextField.tsx
+++ b/src/components/common/PlatformTextField.tsx
@@ -1,184 +1,8 @@
-import type {
-  InputHTMLAttributes,
-  SelectHTMLAttributes,
-  TextareaHTMLAttributes,
-} from 'react';
-
-type PlatformTextFieldSize = 'xs' | 'sm' | 'md' | 'lg';
-type PlatformTextFieldDensity = 'default' | 'compact' | 'roomy';
-type PlatformTextFieldTone = 'warm' | 'rose' | 'emerald' | 'sky';
-type PlatformTextFieldSurface = 'platform' | 'editorDark';
-
-type PlatformTextFieldBaseProps = {
-  size?: PlatformTextFieldSize;
-  density?: PlatformTextFieldDensity;
-  tone?: PlatformTextFieldTone;
-  surface?: PlatformTextFieldSurface;
-};
-
-type PlatformTextFieldInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'size'
-> &
-  PlatformTextFieldBaseProps & {
-    variant?: 'input';
-  };
-
-type PlatformTextFieldTextareaProps =
-  TextareaHTMLAttributes<HTMLTextAreaElement> &
-    PlatformTextFieldBaseProps & {
-      variant: 'textarea';
-    };
-
-type PlatformTextFieldProps =
-  | PlatformTextFieldInputProps
-  | PlatformTextFieldTextareaProps;
-
-type PlatformSelectFieldProps = Omit<
-  SelectHTMLAttributes<HTMLSelectElement>,
-  'size'
-> &
-  PlatformTextFieldBaseProps;
-
-const PLATFORM_TEXT_FIELD_SIZE_CLASS: Record<PlatformTextFieldSize, string> = {
-  xs: 'text-sm leading-5',
-  sm: 'text-sm font-semibold',
-  md: 'text-sm leading-6',
-  lg: 'text-base font-semibold',
-};
-
-const PLATFORM_TEXT_FIELD_PLATFORM_DENSITY_CLASS: Record<
-  PlatformTextFieldDensity,
-  string
-> = {
-  default: 'rounded-[1rem] bg-white/86 px-3 py-3',
-  compact: 'rounded-[0.85rem] bg-white/90 px-3 py-2',
-  roomy: 'rounded-[1rem] bg-white/90 px-4 py-3',
-};
-
-const PLATFORM_TEXT_FIELD_EDITOR_DARK_DENSITY_CLASS: Record<
-  PlatformTextFieldDensity,
-  string
-> = {
-  default: 'rounded-[1rem] bg-black/30 px-3 py-3',
-  compact: 'rounded-[0.85rem] bg-black/30 px-3 py-2',
-  roomy: 'rounded-[1rem] bg-black/30 px-4 py-3',
-};
-
-const PLATFORM_TEXT_FIELD_PLATFORM_TONE_CLASS: Record<
-  PlatformTextFieldTone,
-  string
-> = {
-  warm: 'focus:border-[var(--platform-surface-hover-border)] focus:ring-[var(--platform-warm-border)]',
-  rose: 'focus:border-rose-200 focus:ring-rose-100',
-  emerald: 'focus:border-emerald-200 focus:ring-emerald-100',
-  sky: 'focus:border-sky-200 focus:ring-sky-100',
-};
-
-const PLATFORM_TEXT_FIELD_EDITOR_DARK_TONE_CLASS: Record<
-  PlatformTextFieldTone,
-  string
-> = {
-  warm: 'focus:border-amber-300/40',
-  rose: 'focus:border-rose-300/40',
-  emerald: 'focus:border-emerald-400/40',
-  sky: 'focus:border-sky-400/40',
-};
-
-function buildPlatformTextFieldClassName({
-  surface,
-  size,
-  density,
-  tone,
-  multiline,
-  className,
-}: {
-  surface: PlatformTextFieldSurface;
-  size: PlatformTextFieldSize;
-  density: PlatformTextFieldDensity;
-  tone: PlatformTextFieldTone;
-  multiline?: boolean;
-  className?: string;
-}) {
-  const isEditorDark = surface === 'editorDark';
-
-  return [
-    'w-full platform-text-field outline-none transition disabled:cursor-not-allowed disabled:opacity-60',
-    isEditorDark
-      ? 'platform-text-field--editor-dark border border-white/10 text-white'
-      : 'border border-[var(--platform-subpanel-border)] text-[var(--platform-text-strong)] focus:bg-white focus:ring-2',
-    isEditorDark
-      ? PLATFORM_TEXT_FIELD_EDITOR_DARK_DENSITY_CLASS[density]
-      : PLATFORM_TEXT_FIELD_PLATFORM_DENSITY_CLASS[density],
-    PLATFORM_TEXT_FIELD_SIZE_CLASS[size],
-    isEditorDark
-      ? PLATFORM_TEXT_FIELD_EDITOR_DARK_TONE_CLASS[tone]
-      : PLATFORM_TEXT_FIELD_PLATFORM_TONE_CLASS[tone],
-    multiline ? 'resize-none' : null,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
-/**
- * 平台白底表单输入框。
- * 统一承接结果页 / 工作台白底圆角输入框和文本域的基础 chrome。
- */
-export function PlatformTextField({
-  variant = 'input',
-  size = 'sm',
-  density = 'default',
-  tone = 'warm',
-  surface = 'platform',
-  className,
-  ...fieldProps
-}: PlatformTextFieldProps) {
-  const fieldClassName = buildPlatformTextFieldClassName({
-    surface,
-    size,
-    density,
-    tone,
-    multiline: variant === 'textarea',
-    className,
-  });
-
-  if (variant === 'textarea') {
-    return (
-      <textarea
-        {...(fieldProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}
-        className={fieldClassName}
-      />
-    );
-  }
-
-  return (
-    <input
-      {...(fieldProps as InputHTMLAttributes<HTMLInputElement>)}
-      className={fieldClassName}
-    />
-  );
-}
-
-/**
- * 平台白底下拉框。
- * 与 PlatformTextField 共享输入 chrome，避免业务页为同一组表单控件重复拼样式。
- */
-export function PlatformSelectField({
-  size = 'sm',
-  density = 'default',
-  tone = 'warm',
-  surface = 'platform',
-  className,
-  ...selectProps
-}: PlatformSelectFieldProps) {
-  const fieldClassName = buildPlatformTextFieldClassName({
-    surface,
-    size,
-    density,
-    tone,
-    className,
-  });
-
-  return <select {...selectProps} className={fieldClassName} />;
-}
+export type {
+  PlatformSelectFieldProps,
+  PlatformTextFieldProps,
+} from '@genarrative/shared/components';
+export {
+  PlatformSelectField,
+  PlatformTextField,
+} from '@genarrative/shared/components';
diff --git a/src/components/common/platformActionButtonModel.ts b/src/components/common/platformActionButtonModel.ts
index 9cd6d82cc..c1bff2446 100644
--- a/src/components/common/platformActionButtonModel.ts
+++ b/src/components/common/platformActionButtonModel.ts
@@ -1,134 +1,8 @@
-export type PlatformActionButtonTone =
-  | 'primary'
-  | 'secondary'
-  | 'ghost'
-  | 'danger'
-  | 'success'
-  | 'warning'
-  | 'accent'
-  | 'accentSoft';
-export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
-export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
-export type PlatformActionButtonShape = 'default' | 'pill';
-export type PlatformActionButtonAlign = 'center' | 'start';
-
-const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
-  PlatformActionButtonTone,
-  string
-> = {
-  primary: 'platform-button platform-button--primary',
-  secondary: 'platform-button platform-button--secondary',
-  ghost: 'platform-button platform-button--ghost',
-  danger: 'platform-button platform-button--danger',
-  success: 'platform-button platform-button--primary',
-  warning: 'platform-button platform-button--secondary',
-  accent:
-    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
-  accentSoft:
-    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
-};
-
-const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
-  PlatformActionButtonTone,
-  string
-> = {
-  primary: 'platform-primary-button',
-  secondary: 'platform-button platform-button--secondary',
-  ghost: 'platform-button platform-button--ghost',
-  danger: 'platform-button platform-button--danger',
-  success: 'platform-primary-button',
-  warning: 'platform-button platform-button--secondary',
-  accent:
-    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
-  accentSoft:
-    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
-};
-
-const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
-  PlatformActionButtonTone,
-  string
-> = {
-  primary:
-    'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300',
-  secondary:
-    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white',
-  ghost:
-    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white',
-  danger:
-    'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15',
-  success:
-    'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
-  warning:
-    'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
-  accent:
-    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
-  accentSoft:
-    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,rgba(0,0,0,0.72)_90%)] [color:var(--platform-action-accent,#f5c36a)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#f5c36a)_10%,transparent)]',
-};
-
-const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
-  PlatformActionButtonSize,
-  string
-> = {
-  xxs: 'px-3 py-1 text-[10px]',
-  xs: 'px-4 py-2 text-xs',
-  sm: 'px-4 py-2.5 text-sm',
-  md: 'px-4 py-3 text-sm',
-  lg: 'h-12 px-4 text-base',
-};
-
-const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record<
-  PlatformActionButtonShape,
-  string
-> = {
-  default: 'rounded-2xl',
-  pill: 'rounded-full',
-};
-
-const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record<
+export type {
   PlatformActionButtonAlign,
-  string
-> = {
-  center: 'justify-center',
-  start: 'justify-start text-left',
-};
-
-function getPlatformActionButtonToneClass(
-  surface: PlatformActionButtonSurface,
-  tone: PlatformActionButtonTone,
-) {
-  if (surface === 'editorDark') {
-    return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone];
-  }
-
-  return surface === 'profile'
-    ? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone]
-    : PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone];
-}
-
-export function getPlatformActionButtonClassName({
-  surface = 'platform',
-  tone = 'primary',
-  size = 'sm',
-  shape = 'default',
-  align = 'center',
-  fullWidth = false,
-}: {
-  surface?: PlatformActionButtonSurface;
-  tone?: PlatformActionButtonTone;
-  size?: PlatformActionButtonSize;
-  shape?: PlatformActionButtonShape;
-  align?: PlatformActionButtonAlign;
-  fullWidth?: boolean;
-}) {
-  return [
-    getPlatformActionButtonToneClass(surface, tone),
-    PLATFORM_ACTION_BUTTON_SIZE_CLASS[size],
-    PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape],
-    PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align],
-    fullWidth ? 'w-full' : null,
-    'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60',
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
+  PlatformActionButtonShape,
+  PlatformActionButtonSize,
+  PlatformActionButtonSurface,
+  PlatformActionButtonTone,
+} from '@genarrative/shared/components';
+export { getPlatformActionButtonClassName } from '@genarrative/shared/components';
diff --git a/src/components/common/platformPillBadgeModel.ts b/src/components/common/platformPillBadgeModel.ts
index 1d373a033..8f121d07c 100644
--- a/src/components/common/platformPillBadgeModel.ts
+++ b/src/components/common/platformPillBadgeModel.ts
@@ -1,68 +1,5 @@
-export type PlatformPillBadgeTone =
-  | 'muted'
-  | 'neutral'
-  | 'neutralSolid'
-  | 'lightOverlay'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'cool'
-  | 'profile'
-  | 'profileAccent'
-  | 'darkSoft'
-  | 'darkNeutral'
-  | 'darkSky'
-  | 'darkEmerald'
-  | 'darkAmber'
-  | 'darkRose';
-
-export type PlatformPillBadgeSize = 'xxs' | 'xs' | 'sm';
-
-const PLATFORM_PILL_BADGE_TONE_CLASS: Record<PlatformPillBadgeTone, string> = {
-  muted:
-    'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
-  neutral:
-    'border-[var(--platform-subpanel-border)] bg-white/72 text-[var(--platform-text-base)]',
-  neutralSolid:
-    'border-transparent bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
-  lightOverlay: 'border-white/30 bg-white/24 text-current',
-  success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-  warning:
-    'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
-  danger:
-    'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
-  cool: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
-  profile: 'border-rose-100 bg-rose-50 text-zinc-600',
-  profileAccent: 'border-rose-100 bg-rose-50 text-[#ff4056]',
-  darkSoft: 'border-white/10 bg-white/6 text-zinc-100',
-  darkNeutral: 'border-white/10 bg-black/20 text-zinc-200',
-  darkSky: 'border-sky-300/20 bg-sky-500/10 text-sky-100',
-  darkEmerald: 'border-emerald-300/20 bg-emerald-500/10 text-emerald-100',
-  darkAmber: 'border-amber-300/20 bg-amber-500/10 text-amber-100',
-  darkRose: 'border-rose-300/20 bg-rose-500/10 text-rose-100',
-};
-
-const PLATFORM_PILL_BADGE_SIZE_CLASS: Record<PlatformPillBadgeSize, string> = {
-  xxs: 'px-2.5 py-1 text-[10px]',
-  xs: 'px-2.5 py-0.5 text-[11px]',
-  sm: 'px-3 py-1 text-xs',
-};
-
-export function getPlatformPillBadgeClassName({
-  tone = 'neutral',
-  size = 'sm',
-  className,
-}: {
-  tone?: PlatformPillBadgeTone;
-  size?: PlatformPillBadgeSize;
-  className?: string;
-} = {}) {
-  return [
-    'inline-flex items-center gap-1 rounded-full border font-black',
-    PLATFORM_PILL_BADGE_SIZE_CLASS[size],
-    PLATFORM_PILL_BADGE_TONE_CLASS[tone],
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
+export type {
+  PlatformPillBadgeSize,
+  PlatformPillBadgeTone,
+} from '@genarrative/shared/components';
+export { getPlatformPillBadgeClassName } from '@genarrative/shared/components';
diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx
index 4a3e58750..9d1bac261 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.tsx
@@ -1,3 +1,8 @@
+import {
+  PlatformAsyncStatePanel,
+  PlatformFilterToolbar,
+  PlatformNavigableListItem,
+} from '@genarrative/shared/components';
 import {
   ArrowRight,
   BookOpen,
@@ -89,11 +94,8 @@ import {
   type LegalDocumentId,
 } from '../common/legalDocuments';
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
-import { PlatformFilterToolbar } from '../common/PlatformFilterToolbar';
 import { PlatformIconButton } from '../common/PlatformIconButton';
-import { PlatformNavigableListItem } from '../common/PlatformNavigableListItem';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import {
   PlatformOptionSegment,
@@ -907,7 +909,11 @@ function readyRecommendRuntime(
   });
 }
 type DiscoverChannel =
-  'recommend' | 'today' | 'category' | 'ranking' | 'edutainment';
+  | 'recommend'
+  | 'today'
+  | 'category'
+  | 'ranking'
+  | 'edutainment';
 
 const DISCOVER_CHANNELS: Array<{
   id: DiscoverChannel;
diff --git a/src/components/shared-components/SharedComponentsShowcasePage.tsx b/src/components/shared-components/SharedComponentsShowcasePage.tsx
index c65611e4e..4d44b4378 100644
--- a/src/components/shared-components/SharedComponentsShowcasePage.tsx
+++ b/src/components/shared-components/SharedComponentsShowcasePage.tsx
@@ -4,32 +4,42 @@ import './sharedComponentsShowcase.css';
 import {
   Badge,
   Button,
+  Checkbox,
   Divider,
   EmptyState,
   IconButton,
+  Label,
   Modal,
+  PlatformAsyncStatePanel,
+  PlatformEmptyState,
+  PlatformFilterToolbar,
+  PlatformInfoBlock,
+  PlatformNavigableListItem,
+  PlatformRuntimeStatusToast,
+  PlatformStatGrid,
   ProgressBar,
   SegmentedTabs,
   SelectField,
+  Skeleton,
   Spinner,
   Status,
   Subpanel,
   Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
   TextField,
 } from '@genarrative/shared/components';
 import { Check, CircleAlert, Info, Plus, Sparkles } from 'lucide-react';
 import { type ReactNode, useEffect, useState } from 'react';
 
 import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
-import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
-import { PlatformEmptyState } from '../common/PlatformEmptyState';
-import { PlatformFilterToolbar } from '../common/PlatformFilterToolbar';
-import { PlatformInfoBlock } from '../common/PlatformInfoBlock';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 import { PlatformMediaTileGrid } from '../common/PlatformMediaTileGrid';
-import { PlatformNavigableListItem } from '../common/PlatformNavigableListItem';
-import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
-import { PlatformStatGrid } from '../common/PlatformStatGrid';
 import { PlatformTagEditor } from '../common/PlatformTagEditor';
 import { PlatformToggleRow } from '../common/PlatformToggleRow';
 import { PlatformUploadPreviewCard } from '../common/PlatformUploadPreviewCard';
@@ -75,6 +85,7 @@ export default function SharedComponentsShowcasePage() {
   const [activeTab, setActiveTab] =
     useState<(typeof tabs)[number]['id']>('overview');
   const [enabled, setEnabled] = useState(true);
+  const [checkboxEnabled, setCheckboxEnabled] = useState(true);
   const [progress, setProgress] = useState(64);
   const [modalOpen, setModalOpen] = useState(false);
   const [feedback, setFeedback] = useState<string | null>(null);
@@ -253,6 +264,51 @@ export default function SharedComponentsShowcasePage() {
               </div>
             </ShowcaseSection>
 
+            <ShowcaseSection title="Label / Checkbox / Skeleton / Table">
+              <div className="showcase-stack">
+                <div className="showcase-row">
+                  <Checkbox
+                    id="showcase-autosave"
+                    checked={checkboxEnabled}
+                    onChange={(event) => {
+                      setCheckboxEnabled(event.currentTarget.checked);
+                      showFeedback('复选框');
+                    }}
+                  />
+                  <Label htmlFor="showcase-autosave">
+                    {checkboxEnabled ? '自动保存已开启' : '自动保存已关闭'}
+                  </Label>
+                </div>
+                <div className="showcase-stack" aria-label="骨架屏示例">
+                  <Skeleton className="h-3 w-2/5" />
+                  <Skeleton className="h-3 w-full" />
+                  <Skeleton className="h-3 w-4/5" />
+                </div>
+                <Table>
+                  <TableCaption>最近同步记录</TableCaption>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>项目</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead>时间</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>珊瑚岛</TableCell>
+                      <TableCell>已发布</TableCell>
+                      <TableCell>2 分钟前</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>月光林</TableCell>
+                      <TableCell>草稿</TableCell>
+                      <TableCell>昨天</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+            </ShowcaseSection>
+
             <ShowcaseSection title="Subpanel / Switch">
               <Subpanel
                 title="可复用面板"
diff --git a/src/components/square-hole-result/SquareHoleResultView.tsx b/src/components/square-hole-result/SquareHoleResultView.tsx
index 0178b4999..8df1e098a 100644
--- a/src/components/square-hole-result/SquareHoleResultView.tsx
+++ b/src/components/square-hole-result/SquareHoleResultView.tsx
@@ -1,3 +1,4 @@
+import { PlatformStatGrid } from '@genarrative/shared/components';
 import {
   CheckCircle2,
   ImagePlus,
@@ -38,7 +39,6 @@ import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
-import { PlatformStatGrid } from '../common/PlatformStatGrid';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import {
diff --git a/src/index.css b/src/index.css
index 87cbc52de..0c81a2eb7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;700&display=swap');
 @import 'tailwindcss';
+@import '@genarrative/shared/styles.css';
 @import '@/packages/shared/src/theme.css';
 @source not "../dist";
 @source not "../dist_check";