@linhey/rhine-design 0.9.1 → 0.11.0

package/scripts/check-review.js

@@ -0,0 +1,153 @@
+// Build both examples and serve dist at loopback port 18342; HTTP dev uses 18340.
+// playwright-cli run-code --filename scripts/check-review.js
+async page => {
+  const failures = [], errors = [], requests = [], consoleErrors = [], consoleChecks = [];
+  page.on('console', message => {
+    if (message.type() !== 'error') return;
+    // Firefox renders an Error argument as only "Error"; inspect the actual exception too.
+    consoleChecks.push(Promise.all(message.args().map(argument => argument.evaluate(value => value instanceof Error ? value.message : '').catch(() => ''))).then(messages => {
+      if (!message.text().includes('合成渲染失败') && !messages.includes('合成渲染失败')) consoleErrors.push(message.text());
+    }));
+  });
+  const check = (condition, message) => { if (!condition) failures.push(message); };
+  page.on('pageerror', error => errors.push(String(error)));
+  page.on('request', request => requests.push(request.url()));
+  const http = 'http://127.0.0.1:18342/review-http/';
+  const advanced = async () => { const details = page.locator('.rhine-review-options'); if (!await details.evaluate(element => element.open)) await details.locator('summary').click(); };
+  const motion = async value => { await advanced(); await page.getByRole('combobox', { name: '动态偏好' }).selectOption(value); };
+  let cases = 0;
+  for (const base of [http, 'http://127.0.0.1:18340/review-http/']) {
+    await page.goto(base);
+    const frame = page.frameLocator('iframe');
+    await frame.getByRole('heading', { name: '项目工作台' }).waitFor();
+    check(await page.locator('.rhine-review-header').evaluate(element => getComputedStyle(element).display === 'flex'), `${base} stylesheet loaded`);
+    await frame.getByRole('button', { name: '加载延迟模块' }).click();
+    await frame.getByText('延迟模块已加载 · 资源 base 与产品路由互相独立').waitFor();
+    await frame.getByRole('textbox', { name: '未保存草稿' }).fill('浏览器保留草稿');
+    await frame.getByRole('button', { name: '新建项目', exact: true }).click();
+    const input = frame.getByRole('textbox', { name: '项目名称' });
+    const handle = await input.elementHandle();
+    await input.focus();
+    for (const theme of ['rhine', 'arknights', 'neo-brutalism']) {
+      await page.getByRole('combobox', { name: '界面主题' }).selectOption(theme);
+      await page.getByRole('combobox', { name: '画布宽度' }).selectOption('520');
+      check(await input.inputValue() === '浏览器保留草稿', `${base} ${theme} draft`);
+      check(await handle.evaluate(element => element.isConnected && element === element.ownerDocument.activeElement), `${base} ${theme} node/focus`);
+      check(await frame.locator('.rhine-theme').count() === 1, `${base} single theme root`);
+      await frame.locator(`.rhine-theme[data-rhine-theme="${theme}"]`).waitFor();
+    }
+    await frame.getByRole('button', { name: '保存项目', exact: true }).click();
+    await frame.getByRole('dialog').waitFor({ state: 'detached' });
+    check(await frame.getByText('浏览器保留草稿', { exact: true }).count() === 1, `${base} form submit`);
+    await frame.getByRole('button', { name: '触发未实现操作' }).click();
+    await page.getByRole('alert').filter({ hasText: '未实现模拟请求' }).waitFor();
+    // Verify real navigation defaults never escape the runtime, while same-document anchors work.
+    const child = page.frames().find(frame => frame !== page.mainFrame());
+    const before = child.url();
+    for (const href of ['/product/detail', '/api/export', 'https://synthetic.invalid/export']) {
+      await child.evaluate(href => { const link = document.createElement('a'); link.href = href; link.textContent = '测试导航'; document.body.append(link); link.click(); link.remove(); }, href);
+      check(child.url() === before, `${base} blocked ${href}`);
+    }
+    await child.evaluate(() => { const link = document.createElement('a'); link.href = '#local-section'; document.body.append(link); link.click(); link.remove(); });
+    await child.waitForFunction(() => location.hash === '#local-section');
+    check(child.url().endsWith('#local-section'), `${base} local anchor`);
+    const beforeReset = await frame.getByRole('textbox', { name: '未保存草稿' }).elementHandle();
+    await page.getByRole('button', { name: '重置场景' }).click();
+    await beforeReset.evaluate(element => new Promise((resolve, reject) => { const start = performance.now(); const poll = () => { if (!element.isConnected) resolve(true); else if (performance.now() - start > 1500) reject(new Error('reset did not unmount previous session')); else requestAnimationFrame(poll); }; poll(); }));
+    await frame.getByRole('textbox', { name: '未保存草稿' }).waitFor();
+    check(await frame.getByRole('textbox', { name: '未保存草稿' }).inputValue() === '', `${base} reset`);
+    for (const state of ['loading', 'empty', 'error', 'dense', 'normal']) {
+      await page.getByRole('combobox', { name: '列表状态' }).selectOption(state);
+      const expected = { loading: '正在加载合成项目…', empty: '暂无项目', error: '合成服务暂不可用', dense: '合成项目 1 · 跨团队设计评审与持续验证的长标题示例', normal: '合成项目 1' }[state];
+      await frame.getByText(expected, { exact: true }).waitFor();
+    }
+    await page.getByRole('combobox', { name: '角色', exact: true }).selectOption('reader');
+    await frame.getByText('合成数据 · 只读 · 独立产品路由', { exact: true }).waitFor();
+    check(await frame.getByRole('button', { name: '新建项目', exact: true }).isDisabled(), `${base} read-only`);
+    const deepLink = page.url(); await page.reload();
+    await frame.getByRole('heading', { name: '项目工作台' }).waitFor();
+    check(page.url() === deepLink, `${base} refresh URL`);
+    await page.getByRole('combobox', { name: '角色', exact: true }).selectOption('editor');
+    await page.goBack();
+    check(await page.getByRole('combobox', { name: '角色', exact: true }).inputValue() === 'reader', `${base} history back`);
+    await page.goForward();
+    check(await page.getByRole('combobox', { name: '角色', exact: true }).inputValue() === 'editor', `${base} history forward`);
+    cases++;
+  }
+  // Final artifact visual / keyboard matrix (CSS zoom, not browser zoom).
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) for (const width of [400, 520, 880, 1280]) for (const zoom of [1, 2]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto(`${http}#scene=projects&theme=${theme}&width=fit&zoom=${zoom}&d.status=dense`);
+    const frame = page.frameLocator('iframe');
+    await frame.getByRole('button', { name: '新建项目', exact: true }).click();
+    const dialog = frame.getByRole('dialog');
+    await dialog.waitFor();
+    await frame.getByRole('textbox', { name: '项目名称' }).fill('窄屏键盘');
+    await page.keyboard.press('Tab');
+    check(await dialog.evaluate(element => element.contains(element.ownerDocument.activeElement)), `${theme}/${width}/${zoom} focus trap`);
+    await page.keyboard.press('Escape');
+    await dialog.waitFor({ state: 'detached' });
+    try { await frame.getByRole('button', { name: '新建项目', exact: true }).evaluate(element => new Promise((resolve, reject) => { const start = performance.now(); const poll = () => { if (element === document.activeElement) resolve(true); else if (performance.now() - start > 1500) reject(new Error('focus timeout')); else requestAnimationFrame(poll); }; poll(); })); } catch { check(false, `${theme}/${width}/${zoom} focus return`); }
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth > innerWidth + 1);
+    check(!overflow, `${theme}/${width}/${zoom} shell overflow`);
+    if (width === 400 && zoom === 2) await page.screenshot({ path: `output/playwright/review-${theme}-400-css200.png`, fullPage: true });
+    cases++;
+  }
+  await page.setViewportSize({ width: 400, height: 1000 });
+  await page.goto('http://127.0.0.1:18342/review-platform/');
+  await page.getByRole('button', { name: '场景目录' }).click();
+  await page.getByRole('textbox', { name: '搜索场景' }).fill('没有此场景');
+  await page.getByText('没有匹配场景').waitFor();
+  await page.getByRole('textbox', { name: '搜索场景' }).fill('');
+  await page.getByRole('textbox', { name: '搜索场景' }).focus();
+  await page.keyboard.press('Escape');
+  check(await page.getByRole('button', { name: '场景目录' }).evaluate(element => element === document.activeElement), 'mobile directory escape focus');
+  await page.getByRole('button', { name: '场景目录' }).click();
+  await page.getByRole('link', { name: '慢速初始化', exact: true }).click();
+  check(await page.getByRole('button', { name: '场景目录' }).getAttribute('aria-expanded') === 'false', 'mobile directory closes after navigation');
+  await page.setViewportSize({ width: 1280, height: 1000 });
+  await page.goto('http://127.0.0.1:18342/review-platform/');
+  const frame = page.frameLocator('iframe');
+  const actualCanvas = frame.locator('canvas');
+  await actualCanvas.waitFor();
+  const frames = async () => Number(await actualCanvas.getAttribute('data-frames'));
+  let count = await frames(); await page.waitForTimeout(120); check(await frames() > count, 'canvas plays');
+  await motion('paused');
+  await frame.getByText('已暂停', { exact: true }).waitFor();
+  count = await frames(); await page.waitForTimeout(120); check(await frames() === count, 'canvas pauses');
+  await motion('full');
+  count = await frames(); await page.waitForTimeout(120); check(await frames() > count, 'canvas resumes');
+  await motion('reduced');
+  await frame.getByText('减少动态', { exact: true }).waitFor();
+  count = await frames(); await page.waitForTimeout(120); check(await frames() === count, 'manual reduced');
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await motion('system');
+  count = await frames(); await page.waitForTimeout(120); check(await frames() === count, 'system reduced');
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  count = await frames(); await page.waitForTimeout(120); check(await frames() > count, 'system resumes');
+  const oldCanvas = await actualCanvas.elementHandle();
+  await frame.getByRole('textbox', { name: '工作区名称' }).fill('内存工作区');
+  await frame.getByRole('button', { name: '保存工作区' }).click();
+  await frame.getByText('内存工作区已保存').waitFor();
+  await page.getByRole('link', { name: '慢速初始化', exact: true }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor({ state: 'detached' });
+  const oldCount = await oldCanvas.evaluate(element => element.dataset.frames);
+  await page.getByRole('link', { name: '桌面工作区', exact: true }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  await page.waitForTimeout(4200);
+  check(await oldCanvas.evaluate(element => element.dataset.frames) === oldCount, 'unmounted canvas stops');
+  check(await frame.getByText('慢速初始化完成').count() === 0, 'late setup discarded');
+  await page.getByRole('link', { name: '渲染错误边界', exact: true }).click();
+  await frame.getByRole('alert').waitFor();
+  await page.getByRole('alert').filter({ hasText: '场景渲染失败' }).waitFor();
+  await page.getByRole('link', { name: '桌面工作区', exact: true }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  await page.screenshot({ path: 'output/playwright/review-platform.png', fullPage: true });
+  const outbounds = requests.filter(url => !url.startsWith('http://127.0.0.1:1834') && !url.startsWith('data:'));
+  const businessRequests = requests.filter(url => /\/api\//.test(url));
+  check(!outbounds.length && !businessRequests.length, 'no real business/network egress');
+  check(!errors.length, `page errors: ${errors}`);
+  await Promise.all(consoleChecks);
+  check(!consoleErrors.length, `console errors: ${consoleErrors}`);
+  return { cases, failures, errors, consoleErrors, outbounds, businessRequests, requests: requests.length };
+}

package/skills/rhine-design/SKILL.md

@@ -2,7 +2,7 @@
 name: rhine-design
 description: Use Rhine Design components and specifications to design, implement, or review React UI, typography, themes, and motion. Apply when a project uses Rhine Design or the user requests its visual language or component system.
 metadata:
-  version: "0.9.1"
+  version: "0.10.0"
 ---
 
 # Rhine Design · 莱茵设计
@@ -13,7 +13,7 @@ Use the installed version's components and contracts to build consistent interfa
 
 ## Locate the matching source
 
-Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.9.1, including ListFilterBar, Surface padding, narrow date layouts, OrbitBackdrop, application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; application APIs require 0.5.0 and OrbitBackdrop requires 0.6.0. Check installed exports before adoption.
+Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.10.0, including compact filter controls, Checkbox row layout, explicit component typography, ListFilterBar, Surface padding, narrow date layouts, OrbitBackdrop, application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; application APIs require 0.5.0 and OrbitBackdrop requires 0.6.0. Check installed exports before adoption.
 
 Find the package in the host's dependencies, normally `node_modules/@linhey/rhine-design/`, or its registered source checkout. Verify `package.json` name/version before using the paths below. Paths in references are relative to that package root, not the copied skill directory. Read installed types and source when versions differ; do not infer a new API from this skill. If the package is unavailable, use the task's supplied design sources and identify the missing implementation evidence.
 

package/skills/rhine-design/references/API_MAP.md

@@ -4,12 +4,14 @@ All paths are relative to the matching package root. `package.json` exports, `co
 
 | Exports | Source |
 | --- | --- |
+| Checkbox `layout="row"`, CheckboxProps（自 0.10.0） | `components/Forms.tsx`、`docs/CHECKBOX_ROWS.md`；整行双行多选，默认 form 保持兼容；npm 0.9.1 不含此选项 |
 | TrendChart, StackedBar；StatusTimeline.detail（0.5.0） | `components/Charts.tsx`、`components/StatusTimeline.tsx`；`docs/APPLICATION_COMPONENTS.md`，未知不补零；键盘逐点查看、按ID受控高亮/详情、valueFormatter |
 | Background, AppShell（0.5.0）；AppShellToggle（0.8.0） | `components/Background.tsx`、`components/AppShell.tsx`；`docs/APPLICATION_COMPONENTS.md`；桌面open与临时drawerOpen独立，断点为容器CSS布局宽度 |
 | AppShell.contentHeader（0.8.0） | `components/AppShell.tsx`；`docs/APPLICATION_COMPONENTS.md`；正文列常驻导航插槽，与正文滚动区分离，组合 AppShellToggle / Inline / 标题与上下文操作 |
 | MediaCard, MediaViewer（0.5.0） | `components/Media.tsx`；中性画布，不嵌套主题 |
 | Media 主题重设计（0.8.0） | `components/media-parity.css`；`docs/APPLICATION_COMPONENTS.md`；卡片、标签与查看器操作/信息栏随宿主主题，仅媒体画布中性；选择与重试独立 |
 | DateField, DateRangePicker, NumberField, TreeSelect, RemoteMultiSelect（0.5.0） | `components/AdvancedForms.tsx`；请求、时区和查询由宿主负责；只读/校验/多选键盘及AntD/MUI保留差异见 `docs/ANTD_MUI_AUDIT.md` |
+| 紧凑筛选（自 0.10.0，npm 0.9.1 不含） | `docs/COMPACT_FILTER_CONTROLS.md`；SegmentedControl `fullWidth`、DateRangePicker `compact`、RemoteMultiSelect `maxVisibleTags`、ListFilterBar `drawerDescription` / `drawerResult`；保持默认兼容、完整选择值及加载/错误反馈 |
 | Date presets + confirmed custom range（组合，无新增导出） | `docs/DATE_RANGE_FILTER.md`、`preview/DateRangeFilterGallery.tsx`；复用 SegmentedControl + Button + Popover + DateRangePicker，宿主负责时区、预设和查询 |
 | ThemeProvider, useTheme, themes, ThemeName, ThemeProviderProps (0.4.0；`@linhey/rhine-design/theme`) | `components/theme.tsx`；契约 `docs/THEMING.md` |
 | OrbitBackdrop, OrbitBackdropProps (0.6.0) | `components/OrbitBackdrop.tsx`；契约 `docs/ORBIT_BACKDROP.md`；`components/orbitRenderer.ts` 为内部绘制实现 |
@@ -32,6 +34,8 @@ All paths are relative to the matching package root. `package.json` exports, `co
 | Toast | `components/Toast.tsx` |
 | Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState | `components/components.tsx`；Surface 的 `padding="none"` 仅取消表格容器外围内距，默认不变；此选项自 0.9.1 提供，见 `CHANGELOG.md` |
 
+Additions in 0.11.0: `Tabs` / `TabItem` `description` and `status`, `Toast placement="floating"`, and `SegmentedControl size="compact"`. They are absent from npm 0.10.0. Pin 0.11.0 and read `CHANGELOG.md` before upgrading.
+
 Primary contracts: `components/README.md` and `components/COMMON_COMPONENTS.md`. Find behavioral evidence in `tests/` and composition examples in `preview/`.
 
 ```sh
@@ -53,3 +57,5 @@ API decisions that commonly matter:
 - Components in `preview/` are demonstrations. Public API must resolve through a `package.json` export; theme APIs use the separate `/theme` entry.
 
 Available since 0.8.0 (check installed exports): `ThemePicker` / `ThemePreview` in `components/ThemePicker.tsx`, contract `docs/THEME_PICKER.md`; `Dialog.navigation` in `components/Overlays.tsx`, contract `docs/SETTINGS_DIALOG.md`; shared floating CSS zoom behavior in `docs/FLOATING_OVERLAYS.md`.
+
+Product review tooling (since 0.11.0): `/review` exports `defineReview`, URL helpers and scene/session types from `review/index.ts`; `/review/vite` exports Node-only `reviewPlugin` and `reviewProductionGuard` from `review/vite.mjs`, types in `review/vite.d.mts`. Never import the Vite entry into production UI. Read `docs/REVIEW_TOOL.md`; npm 0.10.0 does not contain these entries.

package/skills/rhine-design/references/TASK_MAP.md

@@ -6,6 +6,7 @@ Resolve the matching package root as described in SKILL.md. Open the first relev
 | --- | --- | --- |
 | Application shell, backgrounds, media, advanced inputs, controlled tables | `docs/APPLICATION_COMPONENTS.md` (0.5.0) | `preview/ExtensionsGallery.tsx`; `/#app-shell`, `/#advanced-forms`, `/#advanced-data`, `/#media` |
 | Workspace header, duplicate page titles, optional breadcrumbs | `docs/APPLICATION_COMPONENTS.md` → 平级工作区顶部操作区 (source guideline) | `preview/ExtensionsGallery.tsx`; `/#app-shell`; keep status/actions, navigation restore and accessible page identity |
+| Product design review shell, synthetic HTTP/platform scenes, static deployment | `docs/REVIEW_TOOL.md` (since 0.11.0; not npm 0.10.0) | `review/`, `examples/review/http`, `examples/review/platform`; separate `/review` and `/review/vite` exports |
 | Theme integration, switching, controlled preferences | `docs/THEMING.md` (0.4.0) | `components/theme.tsx`, `preview/GalleryShell.tsx` |
 | Scenario selection, navigation, form recovery, monitoring | `docs/INTERACTION_PATTERNS.md` (0.4.0; check installed version) | `preview/PatternGallery.tsx`; research in `docs/REFERENCE_RESEARCH.md` |
 | Date presets, visible date ranges, custom-range drafts and confirmation | `docs/DATE_RANGE_FILTER.md` (source pattern using existing 0.6.0 APIs) | `preview/DateRangeFilterGallery.tsx`; `/#date-range-filter`; no public DateRangeFilter component |
@@ -14,6 +15,7 @@ Resolve the matching package root as described in SKILL.md. Open the first relev
 | Text hierarchy, line height, paragraphs, Chinese/Latin text, metrics | `components/TYPOGRAPHY.md` | `components/Typography.tsx`, `preview/LineHeightGallery.tsx`; `/#typography` |
 | Logo, light/dark variants, wordmark | `components/README.md` → 品牌标志 | `components/Logo.tsx`, `components/assets/logo.svg` |
 | Buttons, navigation, basic states | `components/README.md` → 组件契约 | `components/components.tsx` |
+| Tabs with identity summaries and per-object status | `docs/SUMMARY_TABS.md` (local candidate; verify installed API) | `Tabs.description/status`, `preview/SummaryTabsGallery.tsx`; `/#summary-tabs`; 12/8/4/16/24 spacing, stable labels and accessible descriptions |
 | Task-centered content reduction, borderless account summaries, credential actions, compact legends | `docs/COMPACT_ACCOUNT_PATTERNS.md` (source candidates; not npm 0.6.0) | `preview/CompactAccountGallery.tsx`; `/#compact-account`; ButtonLink + StatusTimelineList + TimelineLegend |
 | Forms, selection, combobox, data tables | `components/COMMON_COMPONENTS.md` | Use API_MAP for the source file |
 | Modal, menu, popover, tooltip, feedback | `components/COMMON_COMPONENTS.md` | `components/Overlays.tsx`, `components/Toast.tsx` |

package/skills/rhine-design/references/integration.md

@@ -2,7 +2,7 @@
 
 ## Supported baseline
 
-Rhine Design 0.9.1 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
+Rhine Design 0.10.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
 
 ```tsx
 import { Button, Surface, Text } from '@linhey/rhine-design';

package/tests/CheckboxRow.test.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Checkbox, type CheckboxProps } from '../components';
+
+describe('Checkbox row layout', () => {
+  it('toggles once when the controlled checkbox description is clicked', () => {
+    const change = vi.fn();
+    function Example() {
+      const [checked, setChecked] = useState(false);
+      return <Checkbox layout="row" label="项目 A" hint="内存卡 · 14 项" checked={checked} onChange={event => { setChecked(event.target.checked); change(event.target.checked); }} />;
+    }
+    render(<Example />);
+    const input = screen.getByRole('checkbox', { name: '项目 A' });
+    expect(input).toHaveAccessibleDescription('内存卡 · 14 项');
+    fireEvent.click(screen.getByText('内存卡 · 14 项'));
+    expect(input).toBeChecked();
+    expect(change).toHaveBeenCalledExactlyOnceWith(true);
+  });
+  it('keeps mixed and disabled states on the native input', () => {
+    const change = vi.fn();
+    const { rerender } = render(<Checkbox layout="row" label="全部" hint="三个项目" indeterminate disabled onChange={change} />);
+    expect(screen.getByRole('checkbox')).toBePartiallyChecked();
+    fireEvent.click(screen.getByText('三个项目'));
+    expect(change).not.toHaveBeenCalled();
+    rerender(<Checkbox layout="row" label="全部" checked disabled onChange={change} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+    expect(screen.getByRole('checkbox')).not.toBePartiallyChecked();
+  });
+  it('preserves native form submission and reset for uncontrolled selection', () => {
+    render(<form aria-label="项目"><Checkbox layout="row" label="项目 A" name="source" value="a" defaultChecked /><button type="reset">重置</button></form>);
+    const form = screen.getByRole('form') as HTMLFormElement;
+    expect(new FormData(form).getAll('source')).toEqual(['a']);
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(new FormData(form).getAll('source')).toEqual([]);
+    fireEvent.click(screen.getByRole('button', { name: '重置' }));
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  it('preserves caller accessible names and combines descriptions', () => {
+    const props: CheckboxProps = { layout: 'row', label: '名称', hint: '说明', 'aria-label': '自定义名称', 'aria-describedby': 'external' };
+    render(<><span id="external">附加信息</span><Checkbox {...props} /></>);
+    expect(screen.getByRole('checkbox', { name: '自定义名称' })).toHaveAccessibleDescription('附加信息 说明');
+  });
+  it('keeps the default form hint outside its original label', () => {
+    const change = vi.fn();
+    render(<Checkbox label="表单字段" hint="原布局" onChange={change} />);
+    expect(screen.getByText('原布局').closest('label')).toBeNull();
+    fireEvent.click(screen.getByText('原布局'));
+    expect(change).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByText('表单字段'));
+    expect(change).toHaveBeenCalledOnce();
+  });
+});

package/tests/CommonComponents.test.tsx

@@ -59,6 +59,14 @@ describe('common design components', () => {
     act(()=>vi.advanceTimersByTime(2000));fireEvent.mouseEnter(screen.getByRole('status'));act(()=>vi.advanceTimersByTime(10000));expect(close).not.toHaveBeenCalled();fireEvent.mouseLeave(screen.getByRole('status'));act(()=>vi.advanceTimersByTime(2999));expect(close).not.toHaveBeenCalled();act(()=>vi.advanceTimersByTime(1));expect(close).toHaveBeenCalledWith(false);
     close.mockClear();rerender(<Toast open onOpenChange={close} title="失败" tone="error" duration={1000}/>);act(()=>vi.advanceTimersByTime(10000));expect(close).not.toHaveBeenCalled();
   });
+  it('portals floating feedback outside the content panel while preserving theme and focus', () => {
+    const {container,unmount}=render(<div className="rhine-theme"><section><button>继续</button><Toast placement="floating" open onOpenChange={()=>{}} title="完成"/></section></div>);
+    const trigger=screen.getByRole('button',{name:'继续'});trigger.focus();
+    const region=screen.getByRole('status').parentElement!;
+    expect(region.parentElement).toBe(container.querySelector('.rhine-theme'));
+    expect(container.querySelector('section')).not.toContainElement(region);
+    expect(trigger).toHaveFocus();unmount();expect(screen.queryByText('完成')).toBeNull();
+  });
   it('resets toast countdown when reopening', () => {
     vi.useFakeTimers();function Demo(){const [open,setOpen]=useState(true);return <><button onClick={()=>setOpen(true)}>显示</button><Toast open={open} onOpenChange={setOpen} title="通知" duration={1000}/></>;}
     render(<Demo/>);act(()=>vi.advanceTimersByTime(1000));expect(screen.queryByText('通知')).not.toBeInTheDocument();fireEvent.click(screen.getByRole('button',{name:'显示'}));act(()=>vi.advanceTimersByTime(999));expect(screen.getByText('通知')).toBeVisible();act(()=>vi.advanceTimersByTime(1));expect(screen.queryByText('通知')).not.toBeInTheDocument();

package/tests/CompactFilterBar.test.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ListFilterBar, SegmentedControl, Select } from '../components';
+
+const field = { id: 'state', label: '状态', control: <Select label="状态" defaultValue="all"><option value="all">全部</option></Select> };
+
+describe('compact filter presentation', () => {
+  it('omits redundant drawer copy while keeping pending and error feedback', async () => {
+    const { rerender } = render(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={null} drawerResult={null} />);
+    fireEvent.click(screen.getByRole('button', { name: '更多筛选' }));
+    const dialog = await screen.findByRole('dialog', { name: '记录筛选' });
+    expect(within(dialog).queryByText('更改后立即更新结果。')).not.toBeInTheDocument();
+    expect(within(dialog).queryByText('120 条结果')).not.toBeInTheDocument();
+    expect(dialog).not.toHaveAttribute('aria-describedby');
+    expect(document.querySelectorAll('.rhine-list-filter-bar__feedback')).toHaveLength(1);
+    rerender(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={null} drawerResult={null} pending error="连接暂时不可用" />);
+    expect(within(dialog).getByText('正在更新结果…')).toBeInTheDocument();
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('连接暂时不可用');
+  });
+
+  it('preserves legacy drawer feedback and supports distinct drawer content', async () => {
+    const { rerender } = render(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" />);
+    fireEvent.click(screen.getByRole('button', { name: '更多筛选' }));
+    const dialog = await screen.findByRole('dialog', { name: '记录筛选' });
+    expect(within(dialog).getByText('120 条结果')).toBeInTheDocument();
+    expect(dialog).toHaveAccessibleDescription('更改后立即更新结果。');
+    rerender(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={<span>按需选择范围</span>} drawerResult="已选 3 项" />);
+    expect(dialog).toHaveAccessibleDescription('按需选择范围');
+    expect(within(dialog).getByText('已选 3 项')).toBeInTheDocument();
+    expect(within(dialog).queryByText('120 条结果')).not.toBeInTheDocument();
+  });
+
+  it('full-width segments remain controlled native radios with disabled state', () => {
+    const onChange = vi.fn();
+    function Example() {
+      const [value, setValue] = useState('today');
+      return <SegmentedControl fullWidth label="时间快捷" value={value} onValueChange={next => { setValue(next); onChange(next); }} items={[
+        { value: 'today', label: '今天' }, { value: 'yesterday', label: '昨天' }, { value: 'week', label: '本周', disabled: true },
+      ]} />;
+    }
+    render(<Example />);
+    expect(screen.getByRole('group', { name: '时间快捷' })).toHaveClass('rhine-segmented--full-width');
+    fireEvent.click(screen.getByRole('radio', { name: '昨天' }));
+    expect(screen.getByRole('radio', { name: '昨天' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: '今天' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: '本周' })).toBeDisabled();
+    expect(onChange).toHaveBeenCalledExactlyOnceWith('yesterday');
+  });
+});

package/tests/DenseFilterControls.test.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { DateRangePicker, RemoteMultiSelect, type Choice } from '../components';
+
+describe('compact date range', () => {
+  it('keeps both native fields and range validation inside one named group', () => {
+    const validation = vi.fn();
+    function Example() {
+      const [value, setValue] = useState({ start: '2026-10-01', end: '2026-10-24' });
+      return <DateRangePicker compact label="日期范围" value={value} onValueChange={setValue} min="2026-01-01" max="2026-12-31" clearable={false} required onValidationChange={validation} />;
+    }
+    render(<Example />);
+    const group = screen.getByRole('group', { name: '日期范围' });
+    expect(group).toHaveClass('rhine-date-range--compact');
+    expect(within(group).getByLabelText('开始日期')).toBeRequired();
+    expect(within(group).getByLabelText('结束日期')).toHaveAttribute('type', 'date');
+    fireEvent.change(screen.getByLabelText('结束日期'), { target: { value: '2026-09-30' } });
+    expect(validation).toHaveBeenLastCalledWith('结束日期不能早于开始日期。');
+    fireEvent.change(screen.getByLabelText('结束日期'), { target: { value: '2026-10-24' } });
+    expect(validation).toHaveBeenLastCalledWith(null);
+    fireEvent.change(screen.getByLabelText('开始日期'), { target: { value: '2025-12-31' } });
+    expect(validation).toHaveBeenLastCalledWith('日期不能早于 2026-01-01。');
+  });
+
+  it('preserves readonly and external value replacement in compact mode', () => {
+    const change = vi.fn();
+    const { rerender } = render(<DateRangePicker compact label="范围" value={{ start: '2026-10-01', end: '2026-10-24' }} onValueChange={change} readOnly />);
+    fireEvent.change(screen.getByLabelText('开始日期'), { target: { value: '2026-10-02' } });
+    expect(change).not.toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: '清空日期' })).toBeDisabled();
+    rerender(<DateRangePicker compact label="范围" value={{ start: '2026-11-01', end: '2026-11-24' }} onValueChange={change} readOnly />);
+    expect(screen.getByLabelText('开始日期')).toHaveValue('2026-11-01');
+  });
+});
+
+describe('bounded multi-select tags', () => {
+  const choices: Choice[] = Array.from({ length: 100 }, (_, i) => ({ value: String(i), label: `合成部门 ${i + 1}`, disabled: i === 0 }));
+  function Example() {
+    const [value, setValue] = useState(choices.slice(0, 90));
+    const [query, setQuery] = useState('');
+    return <RemoteMultiSelect label="部门" query={query} onQueryChange={setQuery} options={choices} value={value} onValueChange={setValue} maxVisibleTags={2} name="department" />;
+  }
+  it('shows a bounded summary without dropping hidden selections and expands for removal', () => {
+    render(<Example />);
+    const tags = screen.getByRole('list', { name: '部门已选项' });
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByText('已选 90 项')).toBeInTheDocument();
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(90);
+    fireEvent.click(screen.getByRole('button', { name: '展开已选项' }));
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(90);
+    fireEvent.click(screen.getByRole('button', { name: '移除合成部门 90' }));
+    expect(screen.getByText('已选 89 项')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    fireEvent.click(screen.getByRole('button', { name: '收起已选项' }));
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: '移除合成部门 1' })).toBeDisabled();
+  });
+  it('retains hidden-item keyboard removal and locked selections when clearing', () => {
+    render(<Example />);
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Backspace' });
+    expect(screen.getByText('已选 89 项')).toBeInTheDocument();
+    expect(document.querySelector('input[type=hidden][value="89"]')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '清空选择' }));
+    expect(screen.getByText('已选 1 项')).toBeInTheDocument();
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(1);
+    expect(screen.queryByRole('button', { name: '展开已选项' })).not.toBeInTheDocument();
+  });
+  it('collapses a new selection after the host clears an expanded selection', () => {
+    const props = { label: '部门', query: '', onQueryChange: vi.fn(), options: choices, onValueChange: vi.fn(), maxVisibleTags: 2, name: 'department' };
+    const { rerender } = render(<RemoteMultiSelect {...props} value={choices.slice(0, 90)} />);
+    fireEvent.click(screen.getByRole('button', { name: '展开已选项' }));
+    rerender(<RemoteMultiSelect {...props} value={[]} />);
+    rerender(<RemoteMultiSelect {...props} value={choices} />);
+    expect(within(screen.getByRole('list', { name: '部门已选项' })).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: '展开已选项' })).toHaveAttribute('aria-expanded', 'false');
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(100);
+  });
+});

package/tests/DesignSystem.test.tsx

@@ -82,6 +82,21 @@ describe('reusable design components', () => {
     const tabs=screen.getAllByRole('tab'); expect(tabs[0].id).not.toBe(tabs[1].id);
     for(const tab of tabs) expect(document.getElementById(tab.getAttribute('aria-controls')!)).toHaveAttribute('aria-labelledby',tab.id);
   });
+  it('keeps tab names stable while associating independent descriptions and status', () => {
+    const { rerender } = render(<Tabs label="连接" value="a" onValueChange={()=>{}} items={[
+      {value:'a',label:'甲',description:'账号一',status:<span>同步中</span>,content:'甲内容'},
+      {value:'b',label:'乙',description:'账号二',status:<span>已停止</span>,content:'乙内容'},
+    ]}/>);
+    const first=screen.getByRole('tab',{name:'甲'}); first.focus();
+    expect(first).toHaveAccessibleDescription('账号一 同步中');
+    expect(screen.getByRole('tab',{name:'乙'})).toHaveAccessibleDescription('账号二 已停止');
+    rerender(<Tabs label="连接" value="a" onValueChange={()=>{}} items={[
+      {value:'a',label:'甲',description:'账号三',status:<span>已停止</span>,content:'甲内容'},
+      {value:'b',label:'乙',content:'乙内容'},
+    ]}/>);
+    expect(first).toHaveFocus(); expect(first).toHaveAccessibleDescription('账号三 已停止');
+    expect(screen.getByRole('tab',{name:'乙'})).not.toHaveAttribute('aria-describedby');
+  });
   it('keeps separate segmented controls in independent native radio groups', () => {
     render(<>{['a','b'].map(label=><SegmentedControl key={label} label={label} value="one" onValueChange={()=>{}} items={[{value:'one',label:'一'},{value:'two',label:'二'}]}/>)}</>);
     const radios=screen.getAllByRole('radio'); expect(radios[0].getAttribute('name')).not.toBe(radios[2].getAttribute('name'));
@@ -108,4 +123,21 @@ describe('reusable design components', () => {
     expect(details.open).toBe(false);fireEvent.click(summary);expect(details.open).toBe(true);
     fireEvent.click(summary);expect(details.open).toBe(false);expect(screen.getByText('内部按钮')).not.toBeVisible();
   });
+  it.each([['200ms', 200], ['.2s', 200], ['0ms', 0], ['0s', 0]])('disclosure respects CSS duration %s after production normalization', (cssDuration, milliseconds) => {
+    render(<Disclosure title="动画时长">内容</Disclosure>);
+    const summary = screen.getByText('动画时长');
+    const details = summary.closest('details')!;
+    details.style.setProperty('--rhine-duration-notice', cssDuration);
+    const animate = vi.fn(() => ({ cancel: vi.fn(), onfinish: null } as unknown as Animation));
+    details.animate = animate;
+    fireEvent.click(summary);
+    if (milliseconds === 0) {
+      expect(animate).not.toHaveBeenCalled();
+      expect(details.open).toBe(true);
+      fireEvent.click(summary);
+      expect(details.open).toBe(false);
+    } else {
+      expect(animate).toHaveBeenCalledWith(expect.any(Array), expect.objectContaining({ duration: milliseconds }));
+    }
+  });
 });

package/tests/Review.test.tsx

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest';
+import { defineReview, parseReviewState, serializeReviewState } from '../review/state';
+import { ReviewLifecycle } from '../review/lifecycle';
+import { createMockFetch, MemoryStorage } from '../review/isolation';
+import type { ReviewContext, ReviewScene, ReviewSession } from '../review/types';
+
+const session = (): ReviewSession => ({ render: () => null, dispose: vi.fn() });
+const scene: ReviewScene = { id: 'projects', title: '项目', setup: session, motionControls: ['full', 'paused'], dimensions: [
+  { id: 'status', label: '状态', options: [{ id: 'normal', label: '正常' }, { id: 'error', label: '错误' }] },
+  { id: 'role', label: '角色', options: [{ id: 'editor', label: '编辑' }, { id: 'reader', label: '只读' }] },
+] };
+const catalog = defineReview({ title: 'Review', scenes: [scene, { id: 'other', title: '其他', setup: session }] });
+describe('review URL contract', () => {
+  it('restores independent dimensions and all controls', () => {
+    const hash = '#scene=projects&d.status=error&d.role=reader&theme=arknights&width=520&zoom=2&motion=paused';
+    const state = parseReviewState(hash, catalog);
+    expect(state).toEqual({ scene: 'projects', dimensions: { status: 'error', role: 'reader' }, theme: 'arknights', width: 520, zoom: 2, motion: 'paused' });
+    expect(parseReviewState(serializeReviewState(state), catalog)).toEqual(state);
+  });
+  it('drops unknown values and arbitrary form drafts with deterministic fallback', () => {
+    const state = parseReviewState('#scene=gone&theme=unknown&width=999&zoom=5&motion=bad&d.role=admin&draft=secret', catalog);
+    expect(state).toEqual({ scene: 'projects', dimensions: { status: 'normal', role: 'editor' }, theme: 'rhine', width: 'fit', zoom: 1, motion: 'system' });
+    expect(serializeReviewState(state)).not.toContain('secret');
+  });
+  it('does not leak dimensions to a scene which does not support them', () => {
+    expect(parseReviewState('#scene=other&d.role=reader', catalog).dimensions).toEqual({});
+  });
+  it('rejects duplicate IDs, empty dimensions and invalid widths', () => {
+    expect(() => defineReview({ title: '', scenes: [] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [scene, scene] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [{ ...scene, dimensions: [{ id: 'x', label: '', options: [] }] }] })).toThrow();
+    expect(() => defineReview({ title: '', scenes: [scene], widths: [0] })).toThrow();
+  });
+});
+const deferred = <T,>() => { let resolve!: (value: T) => void; const promise = new Promise<T>(yes => { resolve = yes; }); return { promise, resolve }; };
+function harness() {
+  const hooks = { clear: vi.fn(), ready: vi.fn(), error: vi.fn(), context: () => ({ mockHttp: vi.fn(), report: vi.fn() }) };
+  return { hooks, lifecycle: new ReviewLifecycle(hooks) };
+}
+describe('review lifecycle', () => {
+  it('aborts pending setup and cleans resources registered before it returns', async () => {
+    const { lifecycle, hooks } = harness();
+    const pending = deferred<ReviewSession>();
+    const earlyCleanup = vi.fn();
+    let context!: ReviewContext;
+    const first = lifecycle.select({ ...scene, setup: ctx => { context = ctx; ctx.onDispose(earlyCleanup); return pending.promise; } }, {});
+    await lifecycle.select(catalog.scenes[1], {});
+    expect(context.signal.aborted).toBe(true);
+    expect(earlyCleanup).toHaveBeenCalledOnce();
+    const stale = session(); pending.resolve(stale); await first;
+    expect(stale.dispose).toHaveBeenCalledOnce();
+    expect(hooks.ready).toHaveBeenCalledTimes(1);
+    await lifecycle.dispose();
+  });
+  it('waits for async disposal across rapid consecutive selections', async () => {
+    const { lifecycle, hooks } = harness(); const disposal = deferred<void>();
+    await lifecycle.select({ ...scene, setup: () => ({ ...session(), dispose: () => disposal.promise }) }, {});
+    const discarded = vi.fn(session), accepted = vi.fn(session);
+    const second = lifecycle.select({ ...scene, setup: discarded }, {});
+    const third = lifecycle.select({ ...scene, setup: accepted }, {});
+    await Promise.resolve(); expect(accepted).not.toHaveBeenCalled();
+    disposal.resolve(); await Promise.all([second, third]);
+    expect(discarded).not.toHaveBeenCalled(); expect(accepted).toHaveBeenCalledOnce();
+    expect(hooks.error).not.toHaveBeenCalled(); await lifecycle.dispose();
+  });
+  it('resets then disposes and creates a fresh session', async () => {
+    const { lifecycle } = harness(); const log: string[] = [];
+    const definition = { ...scene, setup: (context: ReviewContext) => { log.push(`setup:${context.reason}`); return { render: () => null, reset: () => { log.push('reset'); }, dispose: () => { log.push('dispose'); } }; } };
+    await lifecycle.select(definition, {}); await lifecycle.select(definition, {}, 'reset');
+    expect(log).toEqual(['setup:select', 'reset', 'dispose', 'setup:reset']); await lifecycle.dispose();
+  });
+  it('runs cleanup on setup rejection and surfaces failure', async () => {
+    const { lifecycle, hooks } = harness(); const cleanup = vi.fn();
+    await lifecycle.select({ ...scene, setup: async context => { context.onDispose(cleanup); throw new Error('setup failed'); } }, {});
+    expect(cleanup).toHaveBeenCalledOnce(); expect(hooks.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'setup failed' }), 'projects');
+  });
+  it('attributes a disposal failure to the old scene while accepting the next scene', async () => {
+    const { lifecycle, hooks } = harness();
+    await lifecycle.select({ ...scene, setup: () => ({ ...session(), dispose() { throw new Error('cleanup failed'); } }) }, {});
+    await lifecycle.select(catalog.scenes[1], {});
+    expect(hooks.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'cleanup failed' }), 'projects');
+    expect(hooks.ready).toHaveBeenLastCalledWith(expect.anything(), catalog.scenes[1]);
+    await lifecycle.dispose();
+  });
+});
+describe('synthetic request boundary', () => {
+  it('preserves Request method/body and omits credentials', async () => {
+    const handler = vi.fn(async (request: Request) => {
+      expect(request.method).toBe('POST'); expect(request.credentials).toBe('omit');
+      return Response.json({ body: await request.text() });
+    });
+    const fetch = createMockFetch(() => handler, () => new AbortController().signal, vi.fn());
+    const response = await fetch(new Request('https://synthetic.invalid/items', { method: 'POST', body: 'hello' }));
+    expect(await response.json()).toEqual({ body: 'hello' });
+  });
+  it('rejects unmatched requests with visible failure instead of fallback network', async () => {
+    const report = vi.fn(); const fetch = createMockFetch(() => undefined, () => new AbortController().signal, report);
+    await expect(fetch(new URL('https://synthetic.invalid/missing'))).rejects.toThrow('未实现模拟请求');
+    expect(report).toHaveBeenCalledWith('未实现模拟请求：GET /missing');
+  });
+  it('cancels a noncooperative handler when its scene is disposed', async () => {
+    const abort = new AbortController(); const fetch = createMockFetch(() => () => new Promise(() => {}), () => abort.signal, vi.fn());
+    const pending = fetch('https://synthetic.invalid/items'); abort.abort();
+    await expect(pending).rejects.toMatchObject({ name: 'AbortError' });
+  });
+  it('honors a Request abort signal and a pre-aborted request', async () => {
+    const abort = new AbortController(); const handler = vi.fn(() => new Promise<Response>(() => {}));
+    const fetch = createMockFetch(() => handler, () => new AbortController().signal, vi.fn());
+    abort.abort(); await expect(fetch(new Request('https://synthetic.invalid', { signal: abort.signal }))).rejects.toMatchObject({ name: 'AbortError' });
+    expect(handler).not.toHaveBeenCalled();
+  });
+  it('keeps storage in memory and resets all keys', () => {
+    const storage = new MemoryStorage(); storage.setItem('name', 'synthetic');
+    expect(storage.getItem('name')).toBe('synthetic'); expect(storage.length).toBe(1);
+    storage.clear(); expect(storage.getItem('name')).toBeNull(); expect(storage.key(0)).toBeNull();
+  });
+});