@linhey/rhine-design 0.10.0 → 0.11.0

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/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();
+  });
+});

package/tests/ReviewBuild.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment node
+import { afterEach, describe, expect, it } from 'vitest';
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { build, preview } from 'vite';
+import react from '@vitejs/plugin-react';
+import { reviewPlugin, reviewProductionGuard } from '../review/vite.mjs';
+
+const directories: string[] = [];
+async function fixture() { const path = await mkdtemp(join(tmpdir(), 'rhine-review-test-')); directories.push(path); return path; }
+afterEach(async () => { await Promise.all(directories.splice(0).map(path => rm(path, { recursive: true, force: true }))); });
+describe('review build integration', () => {
+  it.each(['/nested/review/', './'])('emits final CSS and usable preview for base %s', async base => {
+    const root = await fixture();
+    await build({ configFile: false, root, base, logLevel: 'silent', plugins: [react(), reviewPlugin({ catalog: resolve('examples/review/http/catalog.tsx') })] });
+    for (const name of ['index.html', 'canvas.html']) {
+      const html = await readFile(join(root, 'dist', name), 'utf8');
+      const stylesheet = html.match(/rel="stylesheet" href="([^\"]+\.css)"/)?.[1];
+      expect(stylesheet?.startsWith(base)).toBe(true);
+      const css = stylesheet?.slice(base.length);
+      expect(css).toBeTruthy();
+      expect(await readFile(join(root, 'dist', css!), 'utf8')).toContain('.rhine-review-header');
+      expect(html).toContain("connect-src 'none'");
+      expect(html).toContain(`src="${base}assets/`);
+    }
+    const server = await preview({ configFile: false, root, base, logLevel: 'silent', plugins: [reviewPlugin({ catalog: resolve('examples/review/http/catalog.tsx') })], preview: { host: '127.0.0.1', port: 0 } });
+    try {
+      const address = server.httpServer.address();
+      if (!address || typeof address === 'string') throw new Error('Missing preview port');
+      const url = `http://127.0.0.1:${address.port}${base === './' ? '/' : base}`;
+      const response = await fetch(url);
+      expect(response.status).toBe(200);
+      expect(await response.text()).toContain('Rhine Review');
+      expect((await fetch(`${url}api/missing`)).status).toBe(404);
+    } finally { await new Promise<void>((resolve, reject) => server.httpServer.close(error => error ? reject(error) : resolve())); }
+  }, 20000);
+  it('allows production theme directories but rejects explicit fixture paths', async () => {
+    const root = await fixture();
+    await mkdir(join(root, 'design')); await mkdir(join(root, 'fixtures'));
+    await writeFile(join(root, 'design/theme.js'), 'export const theme = "synthetic-theme";');
+    await writeFile(join(root, 'fixtures/data.js'), 'export const data = "synthetic-fixture";');
+    const entry = join(root, 'entry.js');
+    const options = { configFile: false as const, root, logLevel: 'silent' as const, plugins: [reviewProductionGuard({ forbidden: ['./fixtures'] })], build: { lib: { entry, formats: ['es' as const] } } };
+    await writeFile(entry, 'export {theme} from "./design/theme.js";');
+    await expect(build(options)).resolves.toBeTruthy();
+    await writeFile(entry, 'export {data} from "./fixtures/data.js";');
+    await expect(build(options)).rejects.toThrow('forbidden fixtures: fixtures/data.js');
+  }, 20000);
+  it('rejects accidental official runtime inclusion without a product denylist', async () => {
+    const root = await fixture(); const entry = join(root, 'entry.js');
+    await writeFile(entry, `export { defineReview } from ${JSON.stringify(resolve('review/index.ts'))};`);
+    await expect(build({ configFile: false, root, logLevel: 'silent', plugins: [reviewProductionGuard()], build: { lib: { entry, formats: ['es'] } } })).rejects.toThrow('Production bundle imports review runtime');
+  }, 20000);
+  it('refuses backend proxy and project env configuration', async () => {
+    const root = await fixture();
+    await expect(build({ configFile: false, root, logLevel: 'silent', plugins: [reviewPlugin({ catalog: './catalog.tsx' })], server: { proxy: { '/api': 'http://synthetic.invalid' } } })).rejects.toThrow('no server/preview proxies');
+  });
+});

package/tests/ReviewShell.test.tsx

@@ -0,0 +1,63 @@
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ReviewShell, reviewWaitMs } from '../review/shell';
+import { appendFeedback, emptyFeedback } from '../review/feedback';
+import { protocol } from '../review/protocol';
+
+const catalog = { title: '故障恢复', scenes: [{ id: 'a', title: '场景 A' }, { id: 'b', title: '场景 B' }] };
+function iframe() { return screen.getByTitle('产品场景画布') as HTMLIFrameElement; }
+function send(data: Record<string, unknown>, source = iframe().contentWindow!) {
+  fireEvent(window, new MessageEvent('message', { origin: location.origin, source, data: { protocol, ...data } }));
+}
+function connect() {
+  const post = vi.spyOn(iframe().contentWindow!, 'postMessage');
+  send({ type: 'ready', catalog });
+  return { post, request: () => post.mock.calls.filter(call => call[0].type === 'select').at(-1)![0].requestId as number };
+}
+beforeEach(() => { vi.useFakeTimers(); history.replaceState(null, '', '#scene=a'); });
+afterEach(() => { cleanup(); vi.useRealTimers(); });
+describe('review shell recovery', () => {
+  it('offers recovery when the initial iframe never handshakes', () => {
+    render(<ReviewShell />); const oldFrame = iframe();
+    act(() => vi.advanceTimersByTime(reviewWaitMs));
+    expect(screen.getByRole('alert')).toHaveTextContent('连接画布超时');
+    fireEvent.click(screen.getByRole('button', { name: '重新载入画布' }));
+    expect(iframe()).not.toBe(oldFrame);
+    const { request } = connect(); send({ type: 'rendered', requestId: request() });
+    expect(screen.getByRole('status')).toHaveTextContent('已就绪');
+    expect(screen.getByRole('alert')).toHaveTextContent('连接画布超时');
+  });
+  it('replaces a stuck browsing context, keeps selection, ignores old acknowledgements', () => {
+    render(<ReviewShell />); const { request } = connect();
+    send({ type: 'rendered', requestId: request() });
+    fireEvent.click(screen.getByRole('link', { name: '场景 B' }));
+    const pending = request();
+    send({ type: 'rendered', requestId: pending - 1 });
+    act(() => vi.advanceTimersByTime(reviewWaitMs));
+    expect(screen.getByRole('alert')).toHaveTextContent('初始化或清理超过');
+    const oldFrame = iframe(), oldWindow = oldFrame.contentWindow!;
+    fireEvent.click(screen.getByRole('button', { name: '重新载入画布' }));
+    expect(oldFrame.isConnected).toBe(false); expect(location.hash).toContain('scene=b');
+    send({ type: 'feedback', kind: 'error', message: 'stale error' }, oldWindow);
+    expect(screen.queryByText(/stale error/)).not.toBeInTheDocument();
+    const next = connect(); send({ type: 'rendered', requestId: next.request() });
+    expect(screen.getByRole('status')).toHaveTextContent('已就绪');
+  });
+  it('retains scoped errors across ready and selection until explicit acknowledgement', () => {
+    render(<ReviewShell />); const { request } = connect();
+    send({ type: 'feedback', scene: 'a', kind: 'error', message: '清理失败 A' });
+    send({ type: 'rendered', requestId: request() });
+    fireEvent.click(screen.getByRole('link', { name: '场景 B' }));
+    send({ type: 'rendered', requestId: request() });
+    expect(screen.getByRole('alert')).toHaveTextContent('清理失败 A');
+    fireEvent.click(screen.getByText(/评审反馈 ·/));
+    expect(screen.getByText('场景 A', { selector: 'strong' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '确认并清除反馈' }));
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+  it('does not silently lose unacknowledged errors when bounded history overflows', () => {
+    let log = emptyFeedback();
+    for (let id = 0; id < 30; id++) log = appendFeedback(log, { id, kind: id < 4 ? 'error' : 'info', message: String(id), scene: 'a' });
+    expect(log.entries).toHaveLength(20); expect(log.errors).toBe(4); expect(log.omittedErrors).toBe(4);
+  });
+});

package/tsconfig.json

@@ -20,13 +20,16 @@
     "types": [
       "vite/client",
       "node"
-    ]
+    ],
+    "allowJs": true
   },
   "include": [
     "components",
     "preview",
     "tests",
     "vite.config.ts",
-    "vitest.config.ts"
+    "vitest.config.ts",
+    "review",
+    "examples/review"
   ]
 }