@linhey/rhine-design 0.10.0 → 0.11.1

package/scripts/check-multiselect-completion.js

@@ -0,0 +1,46 @@
+// Open the built gallery first; run with playwright-cli run-code --filename.
+async page => {
+  const origin = await page.evaluate(() => location.origin);
+  const cases = [], errors = [];
+  page.on('pageerror', error => errors.push(String(error)));
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) for (const width of [400, 520, 880]) for (const zoom of [1, 2]) {
+    await page.setViewportSize({ width, height: 960 });
+    await page.goto(`${origin}/?theme=${theme}#compact-filters`);
+    await page.reload();
+    await page.getByRole('heading', { name: '密集筛选控件', exact: true }).waitFor();
+    await page.evaluate(zoom => { document.documentElement.style.zoom = String(zoom); }, zoom);
+    await page.getByRole('button', { name: '在弹窗内选择', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: '搜索多选', exact: true });
+    const input = dialog.getByRole('combobox', { name: '弹窗部门', exact: true });
+    await input.fill('合成部门 99');
+    const option = page.getByRole('option', { name: '合成部门 99', exact: true });
+    await option.click();
+    if (await option.getAttribute('aria-selected') !== 'true') throw Error('selection failed');
+    await option.click();
+    if (await option.getAttribute('aria-selected') !== 'false') throw Error('pointer deselection failed');
+    await input.press('ArrowDown'); await input.press('Enter');
+    if (await option.getAttribute('aria-selected') !== 'true') throw Error('keyboard selection failed');
+    await input.press('ArrowDown'); await input.press('Enter');
+    if (await option.getAttribute('aria-selected') !== 'false') throw Error('keyboard deselection failed');
+    await option.click();
+    const done = page.getByRole('button', { name: '完成选择', exact: true });
+    const popup = await done.evaluate(el => { const r = el.closest('.rhine-combobox__list').getBoundingClientRect(); return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: innerWidth, height: innerHeight }; });
+    if (popup.left < -1 || popup.right > popup.width + 1 || popup.top < -1 || popup.bottom > popup.height + 1) throw Error(`popup outside viewport: ${JSON.stringify({ theme, width, zoom, popup })}`);
+    await done.click();
+    await page.getByRole('listbox').waitFor({ state: 'detached' });
+    if (!await input.evaluate(el => el === document.activeElement)) throw Error('completion lost focus');
+    if (!await dialog.isVisible() || await input.inputValue() !== '合成部门 99') throw Error('completion changed draft/dialog');
+    await input.fill('');
+    await page.getByRole('option', { name: '合成部门 99', exact: true }).waitFor();
+    await done.scrollIntoViewIfNeeded();
+    const rect = await done.evaluate(el => { const r = el.getBoundingClientRect(); return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: innerWidth, height: innerHeight }; });
+    if (rect.left < -1 || rect.right > rect.width + 1 || rect.top < -1 || rect.bottom > rect.height + 1) throw Error(`completion outside viewport: ${JSON.stringify({ theme, width, zoom, rect })}`);
+    await done.focus(); await done.press('Enter');
+    await page.getByRole('listbox').waitFor({ state: 'detached' });
+    await input.click(); await done.focus(); await done.press('Escape');
+    await page.getByRole('listbox').waitFor({ state: 'detached' });
+    if (!await dialog.isVisible()) throw Error('Escape closed parent dialog');
+    cases.push({ theme, width, zoom, pass: true });
+  }
+  return { pass: !errors.length, cases: cases.length, errors };
+}

package/scripts/check-review-package.mjs

@@ -0,0 +1,11 @@
+import { execFileSync } from 'node:child_process';
+import assert from 'node:assert/strict';
+const [pack] = JSON.parse(execFileSync('npm', ['pack', '--dry-run', '--json', '--ignore-scripts'], { encoding: 'utf8' }));
+const files = pack.files.map(file => file.path);
+for (const path of files) {
+  assert(!path.split('/').some(part => part === 'node_modules' || part.startsWith('.vite') || part.startsWith('.playwright')), `Package includes development cache: ${path}`);
+}
+for (const path of ['review/index.ts', 'review/vite.mjs', 'review/vite.d.mts', 'review/dev-client.mjs', 'examples/review/http/catalog.tsx', 'examples/review/platform/catalog.tsx', 'examples/review/product.css']) {
+  assert(files.includes(path), `Package omits review entry/example: ${path}`);
+}
+console.log('Review package verified: public entries/examples included, development caches excluded.');

package/scripts/check-review-recovery.js

@@ -0,0 +1,47 @@
+// Run against the final static examples served on 18342. Chromium/Firefox/WebKit use the same checks.
+async page => {
+  const failures = [], errors = [];
+  const check = (value, name) => { if (!value) failures.push(name); };
+  page.on('pageerror', error => errors.push(String(error)));
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.goto('http://127.0.0.1:18342/review-platform/');
+  const frame = page.frameLocator('iframe');
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  check(await page.getByRole('combobox', { name: '动态偏好' }).count() === 0, 'advanced settings collapsed');
+  check((await page.getByLabel('画布尺寸').textContent()).includes('等效内容宽度'), 'canvas dimensions visible');
+  await page.getByRole('link', { name: '清理错误留存', exact: true }).click();
+  await frame.getByText('离开此场景后，合成清理错误应保留到显式确认。').waitFor();
+  await page.getByRole('link', { name: '桌面工作区', exact: true }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  await page.getByRole('alert').filter({ hasText: '合成清理失败' }).waitFor();
+  await page.getByRole('combobox', { name: '界面主题' }).selectOption('arknights');
+  await frame.locator('.rhine-theme[data-rhine-theme=arknights]').waitFor();
+  check(await page.getByRole('alert').filter({ hasText: '合成清理失败' }).count() === 1, 'ready does not overwrite error');
+  await page.locator('.rhine-review-log summary').click();
+  check(await page.locator('.rhine-review-log li[data-kind=error] strong').textContent() === '清理错误留存', 'error retains origin scene');
+  await page.getByRole('button', { name: '确认并清除反馈' }).click();
+  check(await page.getByRole('alert').count() === 0, 'explicit acknowledgement clears errors');
+  await page.getByRole('link', { name: '清理挂起恢复', exact: true }).click();
+  await frame.getByText('此场景模拟清理挂起，请切换到桌面工作区验证恢复。').waitFor();
+  await page.getByRole('link', { name: '桌面工作区', exact: true }).click();
+  await page.getByRole('alert').filter({ hasText: '初始化或清理超过 10 秒' }).waitFor({ timeout: 15000 });
+  check(await frame.getByRole('heading', { name: '桌面工作区' }).count() === 0, 'never initializes in uncleared context');
+  const oldFrame = await page.locator('iframe').elementHandle();
+  await page.getByRole('button', { name: '重新载入画布' }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  check(await oldFrame.evaluate(element => !element.isConnected), 'recovery replaces browsing context');
+  check(await page.getByRole('combobox', { name: '界面主题' }).inputValue() === 'arknights', 'recovery keeps URL preferences');
+  check(await page.getByRole('alert').count() === 1, 'recovery retains prior timeout record');
+  await page.locator('.rhine-review-options summary').click();
+  await page.getByRole('combobox', { name: 'CSS 缩放' }).selectOption('2');
+  await page.getByRole('combobox', { name: '画布宽度' }).selectOption('520');
+  await page.waitForFunction(() => document.querySelector('[aria-label="画布尺寸"]')?.textContent.includes('等效内容宽度约 259 CSS px'));
+  await page.route('**/review-platform/canvas.html', route => route.abort());
+  await page.goto('http://127.0.0.1:18342/review-platform/');
+  await page.getByRole('alert').filter({ hasText: '连接画布超时' }).waitFor({ timeout: 15000 });
+  await page.unroute('**/review-platform/canvas.html');
+  await page.getByRole('button', { name: '重新载入画布' }).click();
+  await frame.getByRole('heading', { name: '桌面工作区' }).waitFor();
+  check(await page.getByRole('status').filter({ hasText: '已就绪' }).count() === 1, 'initial load failure recovers');
+  return { failures, errors, browser: await page.evaluate(() => navigator.userAgent) };
+}

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/references/API_MAP.md

@@ -34,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
@@ -55,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/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/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/FormParity.test.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { Combobox, DateField, DateRangePicker, NumberField, RemoteMultiSelect, TreeSelect } from '../components';
+import { Combobox, Dialog, DateField, DateRangePicker, NumberField, RemoteMultiSelect, TreeSelect } from '../components';
 
 describe('date field parity', () => {
   it('reports controlled invalid dates and changed bounds without rewriting the value', () => {
@@ -106,6 +106,64 @@ describe('number field parity', () => {
 });
 
 describe('remote multi-select parity', () => {
+  it.each([false, true])('removes a tag without reopening candidates (initially open: %s)', initiallyOpen => {
+    const query = vi.fn(), submit = vi.fn(event => event.preventDefault());
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]);
+      return <form onSubmit={submit}><RemoteMultiSelect label="成员" query="保留查询" onQueryChange={query} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} /></form>;
+    }
+    render(<Demo />); const input = screen.getByRole('combobox');
+    if (initiallyOpen) act(() => input.focus());
+    fireEvent.click(screen.getByRole('button', { name: '移除Beta' }));
+    expect(screen.queryByRole('button', { name: '移除Beta' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '移除Alpha' })).toBeVisible();
+    expect(input).toHaveFocus(); expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(input).toHaveValue('保留查询'); expect(query).not.toHaveBeenCalled(); expect(submit).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: '移除Alpha' }));
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('button', { name: '清空选择' })).not.toBeInTheDocument();
+  });
+
+  it.each([false, true])('Backspace retains the current candidate state (open: %s)', initiallyOpen => {
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'a', label: 'Alpha' }]);
+      return <RemoteMultiSelect label="成员" query="" onQueryChange={() => {}} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }]} />;
+    }
+    render(<Demo />); const input = screen.getByRole('combobox'); act(() => input.focus());
+    if (!initiallyOpen) fireEvent.keyDown(input, { key: 'Escape' });
+    fireEvent.keyDown(input, { key: 'Backspace' });
+    expect(screen.queryByRole('button', { name: '移除Alpha' })).not.toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-expanded', String(initiallyOpen)); expect(input).toHaveFocus();
+  });
+
+  it.each([false, true])('clears without opening candidates (initially open: %s) and hides empty actions', initiallyOpen => {
+    const query = vi.fn(), submit = vi.fn(event => event.preventDefault());
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'a', label: 'Alpha' }]);
+      return <form onSubmit={submit}><RemoteMultiSelect label="成员" query="保留查询" onQueryChange={query} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }]} maxVisibleTags={2} /></form>;
+    }
+    render(<Demo />); const input = screen.getByRole('combobox');
+    if (initiallyOpen) act(() => input.focus());
+    const clear = screen.getByRole('button', { name: '清空选择' });
+    fireEvent.pointerDown(clear); act(() => clear.focus());
+    if (initiallyOpen) expect(screen.getByRole('listbox', { name: '成员' })).toBeVisible();
+    else expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    fireEvent.pointerUp(clear); fireEvent.click(clear);
+    expect(screen.getByText('已选 0 项')).toBeVisible();
+    expect(screen.queryByRole('button', { name: '清空选择' })).not.toBeInTheDocument();
+    expect(input).toHaveFocus(); expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(input).toHaveValue('保留查询'); expect(query).not.toHaveBeenCalled(); expect(submit).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByRole('button', { name: '清空选择' })).toBeVisible();
+  });
+
+  it('hides clear when only locked choices remain', () => {
+    render(<RemoteMultiSelect label="成员" query="" onQueryChange={() => {}} value={[{ value: 'locked', label: '固定', disabled: true }]} onValueChange={vi.fn()} options={[]} />);
+    expect(screen.queryByRole('button', { name: '清空选择' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '移除固定' })).toBeDisabled();
+  });
+
   it('keeps the list open for consecutive selection and exposes the selected list semantics', () => {
     const query = vi.fn();
     function Demo() {
@@ -117,12 +175,41 @@ describe('remote multi-select parity', () => {
     expect(input).toHaveAttribute('aria-expanded', 'true');
     expect(screen.getByRole('listbox')).toHaveAttribute('aria-multiselectable', 'true');
     expect(screen.getByRole('option', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true');
-    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    fireEvent.keyDown(input, { key: 'End' }); fireEvent.keyDown(input, { key: 'Enter' });
     expect(screen.getByRole('button', { name: '移除Beta' })).toBeVisible();
     expect(container.querySelectorAll('input[type="hidden"][name="member"]')).toHaveLength(3);
     expect(query).not.toHaveBeenCalled();
   });
 
+  it('toggles selected candidates with pointer and keyboard, then completes without submitting', () => {
+    const submit = vi.fn(event => event.preventDefault());
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'a', label: 'Alpha' }, { value: 'locked', label: 'Locked', disabled: true }]);
+      return <form onSubmit={submit}><RemoteMultiSelect label="成员" query="查询" onQueryChange={() => {}} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }, { value: 'locked', label: 'Locked' }, { value: 'off', label: 'Disabled', disabled: true }]} /></form>;
+    }
+    render(<Demo />);
+    const input = screen.getByRole('combobox'); act(() => input.focus());
+    fireEvent.click(screen.getByRole('option', { name: 'Alpha' }));
+    expect(screen.getByRole('option', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'false');
+    expect(screen.queryByRole('button', { name: '移除Alpha' })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('option', { name: 'Locked' }));
+    fireEvent.click(screen.getByRole('option', { name: 'Disabled' }));
+    expect(screen.getByRole('button', { name: '移除Locked' })).toBeDisabled();
+    expect(screen.queryByRole('button', { name: '移除Disabled' })).not.toBeInTheDocument();
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByRole('option', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true');
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByRole('option', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'false');
+    const done = screen.getByRole('button', { name: '完成选择' }); act(() => done.focus());
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(done);
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(input).toHaveFocus();
+    expect(input).toHaveValue('查询'); expect(submit).not.toHaveBeenCalled();
+    fireEvent.click(input); act(() => screen.getByRole('button', { name: '完成选择' }).focus());
+    fireEvent.keyDown(screen.getByRole('button', { name: '完成选择' }), { key: 'Escape' });
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(input).toHaveFocus();
+  });
+
   it('removes the last removable tag with Backspace while respecting IME and locked values', () => {
     const change = vi.fn(); render(<RemoteMultiSelect label="成员" query="" onQueryChange={() => {}} value={[{ value: 'a', label: 'Alpha' }, { value: 'locked', label: '固定', disabled: true }]} onValueChange={change} options={[]} />);
     const input = screen.getByRole('combobox'); fireEvent.focus(input); fireEvent.compositionStart(input);
@@ -183,3 +270,18 @@ describe('tree keyboard parity', () => {
     fireEvent.keyDown(group, { key: 'ArrowRight' }); expect(expand).toHaveBeenLastCalledWith(['root']);
   });
 });
+
+
+describe('combobox modal keyboard exit', () => {
+  it('keeps focus inside while the nested scope is resuming its parent', () => {
+    render(<><button data-testid="background-action">背景动作</button><Dialog trigger={<button>打开选择</button>} title="成员选择" description="合成测试" open><RemoteMultiSelect label="弹窗成员" query="" onQueryChange={() => {}} value={[]} onValueChange={() => {}} options={[{ value: 'a', label: 'Alpha' }]} /></Dialog></>);
+    const input = screen.getByRole('combobox', { name: '弹窗成员' });
+    act(() => input.focus());
+    fireEvent.keyDown(input, { key: 'Tab', shiftKey: true });
+    const close = screen.getByRole('button', { name: '关闭对话框' });
+    act(() => close.focus());
+    act(() => screen.getByTestId('background-action').focus());
+    expect(close).toHaveFocus();
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+  });
+});