@linhey/rhine-design 0.4.0 → 0.6.0

package/tests/FormParity.test.tsx

@@ -0,0 +1,185 @@
+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';
+
+describe('date field parity', () => {
+  it('reports controlled invalid dates and changed bounds without rewriting the value', () => {
+    const change = vi.fn(), validation = vi.fn();
+    const props = { label: '日期', value: '2026-10-24', onValueChange: change, onValidationChange: validation, name: 'date', hint: '仅日期，无时区' };
+    const { rerender } = render(<DateField {...props} min="2026-10-01" max="2026-10-31" />);
+    expect(validation).toHaveBeenLastCalledWith(null);
+    rerender(<DateField {...props} max="2026-10-23" />);
+    expect(screen.getByLabelText('日期')).toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith('日期不能晚于 2026-10-23。');
+    expect(screen.getByLabelText('日期')).toHaveValue('2026-10-24'); expect(change).not.toHaveBeenCalled();
+    rerender(<DateField {...props} value="2026-02-30" />);
+    expect(validation).toHaveBeenLastCalledWith('请输入有效日期。');
+  });
+
+  it('does not repeat validation notifications when only the callback identity changes', () => {
+    const validation = vi.fn(); const props = { label: '日期', value: '2026-10-24', onValueChange: () => {}, max: '2026-10-23' };
+    const { rerender } = render(<DateField {...props} onValidationChange={error => validation(error)} />);
+    rerender(<DateField {...props} onValidationChange={error => validation(error)} />);
+    expect(validation).toHaveBeenCalledOnce();
+  });
+
+  it('blocks invalid range presets and protects readonly fields and actions', () => {
+    const change = vi.fn();
+    const props = { label: '期间', value: { start: '2026-10-01', end: '2026-10-24' }, onValueChange: change, startLabel: '起始', endLabel: '截至', startName: 'from', endName: 'to', presets: [
+      { label: '反向', value: { start: '2026-10-24', end: '2026-10-01' } },
+      { label: '无效日期', value: { start: '2026-02-30', end: '2026-10-01' } },
+      { label: '正常', value: { start: '2026-10-01', end: '2026-10-24' } },
+    ] };
+    const { rerender } = render(<DateRangePicker {...props} />);
+    expect(screen.getByRole('button', { name: '反向' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: '无效日期' })).toBeDisabled();
+    expect(screen.getByLabelText('起始')).toHaveAttribute('name', 'from');
+    rerender(<DateRangePicker {...props} readOnly required />);
+    expect(screen.getByLabelText('截至')).toHaveAttribute('readonly');
+    expect(screen.getByLabelText('起始')).toBeRequired();
+    fireEvent.change(screen.getByLabelText('起始'), { target: { value: '2026-10-03' } });
+    fireEvent.click(screen.getByRole('button', { name: '正常' }));
+    fireEvent.click(screen.getByRole('button', { name: '清空日期' })); expect(change).not.toHaveBeenCalled();
+    rerender(<DateRangePicker {...props} clearable={false} />);
+    expect(screen.queryByRole('button', { name: '清空日期' })).not.toBeInTheDocument();
+  });
+});
+
+describe('number field parity', () => {
+  it('does not report unchanged numeric or empty values when committing the draft', () => {
+    const change = vi.fn(); const props = { label: '数量', value: 4, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input); fireEvent.blur(input); fireEvent.keyDown(input, { key: 'Enter' });
+    fireEvent.change(input, { target: { value: '4.00' } }); fireEvent.blur(input);
+    expect(input).toHaveValue('4'); expect(change).not.toHaveBeenCalled();
+    rerender(<NumberField {...props} value={null} />);
+    fireEvent.blur(input); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).not.toHaveBeenCalled();
+  });
+
+  it('reports each changed controlled value once across Enter and subsequent blur', () => {
+    const change = vi.fn();
+    function Demo() {
+      const [value, setValue] = useState<number | null>(4);
+      return <NumberField label="数量" value={value} precision={1} onValueChange={next => { change(next); setValue(next); }} />;
+    }
+    render(<Demo />); const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '4.24' } }); fireEvent.keyDown(input, { key: 'Enter' }); fireEvent.blur(input);
+    expect(input).toHaveValue('4.2'); expect(change.mock.calls).toEqual([[4.2]]);
+    fireEvent.change(input, { target: { value: '' } }); fireEvent.blur(input); fireEvent.blur(input);
+    expect(change.mock.calls).toEqual([[4.2], [null]]);
+  });
+
+  it('preserves parsed precision on ordinary commits unless precision was explicitly supplied', () => {
+    const change = vi.fn(); const props = { label: '小数', value: 1e-13, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.blur(input); expect(input).toHaveValue('1e-13'); expect(change).not.toHaveBeenCalled();
+    fireEvent.change(input, { target: { value: '1.23456789012345' } }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).toHaveBeenLastCalledWith(1.23456789012345);
+    rerender(<NumberField {...props} value={0.1} step={0.2} />);
+    fireEvent.keyDown(input, { key: 'ArrowUp' }); expect(change).toHaveBeenLastCalledWith(0.3);
+  });
+
+  it('keeps readonly values selectable without accepting keyboard, pointer or blur changes', () => {
+    const change = vi.fn(); render(<NumberField label="数量" value={4} onValueChange={change} readOnly name="quantity" hint="审核中" />);
+    const input = screen.getByRole('spinbutton'); expect(input).not.toBeDisabled(); expect(input).toHaveAttribute('readonly');
+    fireEvent.change(input, { target: { value: '5' } }); fireEvent.keyDown(input, { key: 'ArrowUp' }); fireEvent.keyDown(input, { key: 'Enter' }); fireEvent.blur(input);
+    expect(screen.getByRole('button', { name: '增加数量' })).toBeDisabled(); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('cancels an uncommitted draft with Escape and reports changed bounds without clamping', () => {
+    const change = vi.fn(); const props = { label: '数量', value: 4, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '-' } }); fireEvent.keyDown(input, { key: 'Escape' });
+    expect(input).toHaveValue('4'); expect(change).not.toHaveBeenCalled();
+    rerender(<NumberField {...props} max={3} controls={false} />);
+    expect(input).toHaveValue('4'); expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.queryByRole('button', { name: '增加数量' })).not.toBeInTheDocument(); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('allows an empty negative range to be stepped into the range', () => {
+    const change = vi.fn(); render(<NumberField label="偏移" value={null} onValueChange={change} min={-10} max={-1} />);
+    const increase = screen.getByRole('button', { name: '增加偏移' }); expect(increase).toBeEnabled();
+    fireEvent.click(increase); expect(change).toHaveBeenLastCalledWith(-1);
+  });
+});
+
+describe('remote multi-select parity', () => {
+  it('keeps the list open for consecutive selection and exposes the selected list semantics', () => {
+    const query = vi.fn();
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'old', label: '旧结果' }]);
+      return <RemoteMultiSelect label="成员" query="服务端搜索词" onQueryChange={query} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} name="member" />;
+    }
+    const { container } = render(<Demo />); const input = screen.getByRole('combobox'); fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    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' });
+    expect(screen.getByRole('button', { name: '移除Beta' })).toBeVisible();
+    expect(container.querySelectorAll('input[type="hidden"][name="member"]')).toHaveLength(3);
+    expect(query).not.toHaveBeenCalled();
+  });
+
+  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);
+    fireEvent.keyDown(input, { key: 'Backspace' }); expect(change).not.toHaveBeenCalled();
+    fireEvent.compositionEnd(input); fireEvent.keyDown(input, { key: 'Backspace' });
+    expect(change).toHaveBeenLastCalledWith([{ value: 'locked', label: '固定', disabled: true }]);
+  });
+
+  it('restores input focus after removing a tag and supports opt-in query reset', () => {
+    const change = vi.fn(), query = vi.fn(); render(<RemoteMultiSelect label="成员" query="a" onQueryChange={query} value={[{ value: 'old', label: '旧结果' }]} onValueChange={change} options={[{ value: 'a', label: 'Alpha' }]} clearQueryOnSelect closeOnSelect />);
+    const remove = screen.getByRole('button', { name: '移除旧结果' }); act(() => remove.focus()); fireEvent.click(remove);
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' }); fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
+    expect(query).toHaveBeenLastCalledWith(''); expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('keeps the existing single Combobox close-on-selection behavior and readonly selections', () => {
+    const change = vi.fn(); const props = { label: '单选', query: '', onQueryChange: vi.fn(), value: null, onValueChange: change, options: [{ value: 'a', label: 'Alpha' }] };
+    const { rerender } = render(<Combobox {...props} />); const input = screen.getByRole('combobox');
+    fireEvent.focus(input); fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(change).toHaveBeenCalledOnce();
+    rerender(<Combobox {...props} readOnly />); fireEvent.focus(input); fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(change).toHaveBeenCalledOnce();
+  });
+});
+
+describe('tree keyboard parity', () => {
+  const nodes = [{ id: 'root', label: 'Group', children: [{ id: 'alpha', label: 'Alpha' }, { id: 'beta', label: 'Beta', disabled: true }] }, { id: 'other', label: 'Other', selectable: false, children: [{ id: 'gamma', label: 'Gamma' }] }];
+  it('starts at a selected item and supports typeahead and sibling expansion without selecting', () => {
+    const change = vi.fn(), expand = vi.fn(); render(<TreeSelect label="目录" nodes={nodes} value={['alpha']} onValueChange={change} expandedKeys={['root']} onExpandedChange={expand} />);
+    const alpha = screen.getByRole('treeitem', { name: 'Alpha' }); expect(alpha).toHaveAttribute('tabindex', '0'); act(() => alpha.focus());
+    fireEvent.keyDown(alpha, { key: 'b' }); expect(screen.getByRole('treeitem', { name: 'Beta' })).toHaveFocus();
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Beta' }), { key: 'Home' });
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Group' }), { key: '*' });
+    expect(expand).toHaveBeenLastCalledWith(['root', 'other']); expect(change).not.toHaveBeenCalled();
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Other' }), { key: 'Enter' }); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('selects only visible eligible nodes and preserves offscreen and disabled selections', () => {
+    const change = vi.fn(); render(<TreeSelect label="目录" nodes={nodes} value={['offscreen', 'beta']} onValueChange={change} expandedKeys={['root']} onExpandedChange={() => {}} multiple />);
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Group' }), { key: 'a', ctrlKey: true });
+    expect(change).toHaveBeenLastCalledWith(['offscreen', 'beta', 'root', 'alpha']);
+  });
+
+  it('contains unmatched typeahead inside the focused treeitem instead of bubbling to its parents', () => {
+    const outerKey = vi.fn();
+    render(<div onKeyDown={outerKey}><TreeSelect label="目录" nodes={nodes} value={[]} onValueChange={() => {}} expandedKeys={['root']} onExpandedChange={() => {}} /></div>);
+    const alpha = screen.getByRole('treeitem', { name: 'Alpha' }); act(() => alpha.focus());
+    fireEvent.keyDown(alpha, { key: 'z' }); expect(outerKey).not.toHaveBeenCalled(); expect(alpha).toHaveFocus();
+  });
+
+  it('returns focus to the ancestor when the host collapses a focused child and protects readonly selection', () => {
+    const change = vi.fn(), expand = vi.fn(); const props = { label: '目录', nodes, value: ['alpha'], onValueChange: change, onExpandedChange: expand, readOnly: true };
+    const { rerender } = render(<TreeSelect {...props} expandedKeys={['root']} />); act(() => screen.getByRole('treeitem', { name: 'Alpha' }).focus());
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Alpha' }), { key: ' ' }); expect(change).not.toHaveBeenCalled();
+    rerender(<TreeSelect {...props} expandedKeys={[]} />);
+    const group = screen.getByRole('treeitem', { name: 'Group' }); expect(group).toHaveFocus();
+    fireEvent.keyDown(group, { key: 'ArrowRight' }); expect(expand).toHaveBeenLastCalledWith(['root']);
+  });
+});

package/tests/Monitoring.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { StackedBar, StatusTimeline, TrendChart } from '../components';
+import { ThemeProvider } from '../components/theme';
+
+it('exposes the same structured evidence for focus and pointer, preserving zero and unknown', async () => {
+  render(<ThemeProvider><StatusTimeline compact label="历史" startLabel="开始" endLabel="结束" segments={[{ id: 'a', label: '时段A', status: 'unknown', detail: { start: '10:00 UTC+8', end: '10:10 UTC+8', reason: '采集不全', counts: [{ id: 'zero', label: '失败', value: 0 }, { id: 'missing', label: '输出', value: null }], methodology: '最终结果' } }]} /></ThemeProvider>);
+  const slider = screen.getByRole('slider'); fireEvent.focus(slider);
+  expect(await screen.findByRole('dialog', { name: '历史时段详情' })).toHaveTextContent('10:00 UTC+8');
+  expect(screen.getByText('0')).toBeVisible(); expect(screen.getByText('未知')).toBeVisible(); expect(screen.getByText('统计口径：最终结果')).toBeVisible();
+  fireEvent.keyDown(slider, { key: 'Escape' }); await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  fireEvent.pointerDown(slider, { pointerType: 'touch' }); expect(await screen.findByRole('dialog')).toHaveTextContent('采集不全');
+  fireEvent.click(screen.getByRole('button', { name: '关闭时段详情' })); await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+});
+
+it('breaks line paths at missing points and supplies exact text data instead of interpolated zero', () => {
+  const { container } = render(<TrendChart kind="line" label="资源" unit="%" rangeLabel="今天" description="原始采样" points={[{ id: 'a', label: '10:00', value: 3 }, { id: 'b', label: '10:10', value: null }, { id: 'c', label: '10:20', value: 0 }, { id: 'd', label: '10:30', value: 5 }]} />);
+  expect(container.querySelector('.rhine-chart__line')?.getAttribute('d')?.match(/M/g)).toHaveLength(2);
+  expect(container.querySelectorAll('.rhine-chart__point')).toHaveLength(3);
+  fireEvent.click(screen.getByText('查看资源数据表'));
+  expect(screen.getByText('未知')).toBeVisible(); expect(screen.getByRole('cell', { name: '0' })).toBeVisible();
+  expect(screen.getByRole('img')).toHaveAccessibleName(/1 个未知值/);
+});
+
+it('does not calculate shares with unknown or negative counts', () => {
+  const props = { label: '分布', unit: '次', rangeLabel: '今天', description: '按宿主分类' };
+  const { rerender } = render(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 10 }, { id: 'b', label: '失败', value: null }]} />);
+  expect(screen.getByRole('status')).toHaveTextContent('总量未知'); expect(screen.queryByRole('img')).not.toBeInTheDocument(); expect(screen.getByRole('list')).not.toHaveTextContent('%');
+  rerender(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 0 }, { id: 'b', label: '失败', value: -1 }]} />);
+  expect(screen.getByRole('status')).toHaveTextContent('负数'); expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  rerender(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 3 }, { id: 'b', label: '失败', value: 1 }]} />);
+  expect(screen.getByRole('list')).toHaveTextContent('75.0%'); expect(screen.getByRole('list')).toHaveTextContent('25.0%');
+});
+
+it('retains chart data on error and marks stale data explicitly', () => {
+  render(<TrendChart label="请求" unit="次" rangeLabel="今天" description="说明" points={[{ id: 'a', label: '10:00', value: 2 }]} stale="20 分钟前" error="读取失败" />);
+  expect(screen.getByRole('alert')).toHaveTextContent('读取失败'); expect(screen.getByRole('status')).toHaveTextContent('20 分钟前'); expect(screen.getByRole('img')).toBeInTheDocument();
+});

package/tests/MonitoringParity.test.tsx

@@ -0,0 +1,125 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { StackedBar, StatusTimeline, TrendChart, type TimelineSegment } from '../components';
+
+const context = { label: '请求', unit: '次', rangeLabel: '今天', description: '原始采样' };
+const points = [{ id: 'a', label: '10:00', value: 1200 }, { id: 'b', label: '10:10', value: null }, { id: 'c', label: '10:20', value: 0 }];
+const segments: TimelineSegment[] = [{ id: 'a', label: 'A', status: 'healthy', detail: { start: '10:00', end: '10:10' } }, { id: 'b', label: 'B', status: 'unknown', detail: { start: '10:10', end: '10:20' } }];
+
+it('inspects exact chart buckets with keyboard, including unknown and zero', () => {
+  const changed = vi.fn();
+  render(<TrendChart {...context} points={points} onActivePointChange={changed} />);
+  const chart = screen.getByRole('img');
+  fireEvent.focus(chart);
+  expect(chart).toHaveAccessibleDescription('10:00：1200 次');
+  fireEvent.keyDown(chart, { key: 'ArrowRight' });
+  expect(screen.getByText('10:10：未知')).toBeVisible();
+  fireEvent.keyDown(chart, { key: 'End' });
+  expect(chart).toHaveAccessibleDescription('10:20：0 次');
+  fireEvent.keyDown(chart, { key: 'Home' });
+  expect(changed.mock.calls.map(call => call[0])).toEqual(['a', 'b', 'c', 'a']);
+});
+
+it('keeps controlled chart inspection and preserves raw data when formatting labels', () => {
+  const changed = vi.fn(), props = { ...context, points, activePointId: 'a', onActivePointChange: changed, valueFormatter: (value: number | null) => value === null ? '缺失' : value.toLocaleString('en-US') };
+  const { rerender } = render(<TrendChart {...props} />);
+  fireEvent.keyDown(screen.getByRole('img'), { key: 'ArrowRight' });
+  expect(changed).toHaveBeenCalledWith('b');
+  expect(screen.getByText('10:00：1,200 次')).toBeVisible();
+  rerender(<TrendChart {...props} activePointId="b" />);
+  expect(screen.getByText('10:10：缺失')).toBeVisible();
+  fireEvent.click(screen.getByText('查看请求数据表'));
+  expect(screen.getByRole('cell', { name: '1200' })).toBeVisible();
+});
+
+it('preserves active identity through chart reorder and handles removal', () => {
+  const { rerender } = render(<TrendChart {...context} points={points} defaultActivePointId="b" />);
+  rerender(<TrendChart {...context} points={[points[2], points[1], points[0]]} defaultActivePointId="b" />);
+  expect(screen.getByText('10:10：未知')).toBeVisible();
+  rerender(<TrendChart {...context} points={[points[0]]} defaultActivePointId="b" />);
+  expect(screen.queryByText('10:10：未知')).not.toBeInTheDocument();
+  fireEvent.keyDown(screen.getByRole('img'), { key: 'Home' });
+  expect(screen.getByRole('img')).toHaveAccessibleDescription('10:00：1200 次');
+});
+
+it('only offers chart inspection while at least one finite sample can be plotted', () => {
+  const { container, rerender } = render(<TrendChart {...context} points={[]} />);
+  expect(screen.getByText('暂无采样')).toBeVisible();
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+  rerender(<TrendChart {...context} points={[points[1]]} activePointId="b" />);
+  expect(screen.getByText('所有采样值均未知')).toBeVisible();
+  expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+  fireEvent.click(screen.getByText('查看请求数据表'));
+  expect(screen.getByRole('cell', { name: '10:10' })).toBeVisible();
+  expect(screen.getByRole('cell', { name: '未知' })).toBeVisible();
+  rerender(<TrendChart {...context} points={points} activePointId="b" />);
+  expect(screen.getByRole('img')).toHaveAccessibleDescription('10:10：未知');
+  rerender(<TrendChart {...context} points={[{ ...points[0], value: Infinity }, points[1]]} activePointId="b" />);
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+});
+
+it('keeps finite chart coordinates at large finite magnitudes and zero shares invisible', () => {
+  const { container, rerender } = render(<TrendChart {...context} kind="line" points={[{ id: 'a', label: 'A', value: -Number.MAX_VALUE }, { id: 'b', label: 'B', value: Number.MAX_VALUE }]} />);
+  expect(container.querySelector('.rhine-chart__line')?.getAttribute('d')).not.toMatch(/NaN|Infinity/);
+  rerender(<StackedBar {...context} parts={[{ id: 'zero', label: '无', value: 0 }, { id: 'one', label: '有', value: 1 }]} />);
+  expect(container.querySelectorAll('.rhine-chart__stack > span')).toHaveLength(1);
+  expect(screen.getByRole('list')).toHaveTextContent('无：0 次（0.0%）');
+});
+
+it('preserves timeline identity across insertion and reorder', () => {
+  const { rerender } = render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} defaultActiveId="a" />);
+  expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'A · 有输出·未见异常');
+  rerender(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={[segments[1], segments[0]]} defaultActiveId="a" />);
+  expect(screen.getByRole('slider')).toHaveValue('1');
+  expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'A · 有输出·未见异常');
+});
+
+it('allocates the entire percentage bar even when positive counts sum to less than one', () => {
+  const { container } = render(<StackedBar {...context} parts={[{ id: 'a', label: 'A', value: 0.1 }, { id: 'b', label: 'B', value: 0.2 }]} />);
+  const weights = [...container.querySelectorAll<HTMLElement>('.rhine-chart__stack > span')].map(part => Number(part.style.flexGrow));
+  expect(weights.reduce((sum, weight) => sum + weight, 0)).toBeCloseTo(1);
+  expect(weights[1] / weights[0]).toBeCloseTo(2);
+  expect(screen.getByRole('list')).toHaveTextContent('33.3%');
+  expect(screen.getByRole('list')).toHaveTextContent('66.7%');
+});
+
+it('reports timeline controlled selection and open intent without overriding host state', async () => {
+  const selected = vi.fn(), opened = vi.fn();
+  const props = { label: '历史', startLabel: '开始', endLabel: '结束', segments, activeId: 'a', onActiveChange: selected, onOpenChange: opened };
+  const { rerender } = render(<StatusTimeline {...props} open={false} />);
+  fireEvent.focus(screen.getByRole('slider'));
+  expect(opened).toHaveBeenCalledWith(true); expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  fireEvent.change(screen.getByRole('slider'), { target: { value: '1' } });
+  expect(selected).toHaveBeenCalledWith('b'); expect(screen.getByRole('slider')).toHaveValue('0');
+  rerender(<StatusTimeline {...props} open />);
+  expect(await screen.findByRole('dialog')).toHaveTextContent('A · 有输出');
+  fireEvent.keyDown(screen.getByRole('slider'), { key: 'Escape' });
+  expect(opened).toHaveBeenLastCalledWith(false); expect(screen.getByRole('dialog')).toBeInTheDocument();
+});
+
+it('lets keyboard users enter and dismiss timeline details without reopening on focus return', async () => {
+  render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} />);
+  const slider = screen.getByRole('slider');
+  expect(slider).not.toHaveAttribute('aria-expanded');
+  expect(slider).toHaveAttribute('aria-haspopup', 'dialog');
+  act(() => slider.focus()); const detail = await screen.findByRole('dialog');
+  expect(slider).not.toHaveAttribute('aria-expanded');
+  expect(slider).toHaveAttribute('aria-controls', detail.id);
+  expect(slider).toHaveAttribute('aria-details', detail.id);
+  fireEvent.keyDown(slider, { key: 'Enter' });
+  expect(screen.getByRole('button', { name: '关闭时段详情' })).toHaveFocus();
+  fireEvent.click(screen.getByRole('button', { name: '关闭时段详情' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  await waitFor(() => expect(slider).toHaveFocus());
+  fireEvent.keyDown(slider, { key: 'Enter' });
+  await waitFor(() => expect(screen.getByRole('button', { name: '关闭时段详情' })).toHaveFocus());
+});
+
+it('disables timeline interaction even with defaultOpen', () => {
+  const opened = vi.fn();
+  render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} disabled defaultOpen onOpenChange={opened} />);
+  expect(screen.getByRole('slider')).toBeDisabled();
+  fireEvent.pointerMove(screen.getByRole('slider'), { pointerType: 'mouse' });
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); expect(opened).not.toHaveBeenCalled();
+});

package/tests/OrbitBackdrop.test.tsx

@@ -0,0 +1,183 @@
+import { StrictMode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { OrbitBackdrop } from '../components';
+import { mountOrbit } from '../components/orbitRenderer';
+import { OrbitGallery } from '../preview/OrbitGallery';
+
+class Media extends EventTarget {
+  matches = false;
+  set(value: boolean) { this.matches = value; this.dispatchEvent(new Event('change')); }
+}
+
+describe('OrbitBackdrop artwork and lifecycle', () => {
+  let reduced: Media, compact: Media, hidden: boolean, bounds: { width: number; height: number };
+  let frameId: number, frames: Map<number, FrameRequestCallback>;
+  let resize: () => void, intersect: (value: boolean) => void;
+  let resizeDisconnect: () => void, intersectionDisconnect: () => void;
+  let draws: number, lines: number, trails: number, glows: number, firstPoint: number[], firstRadius: number, zoom: number;
+  let hasPoint: boolean;
+  let context: CanvasRenderingContext2D;
+
+  beforeEach(() => {
+    reduced = new Media(); compact = new Media(); hidden = false;
+    bounds = { width: 600, height: 680 }; frameId = 0; frames = new Map();
+    draws = lines = trails = glows = firstRadius = 0; firstPoint = []; hasPoint = false; zoom = 1;
+    resizeDisconnect = vi.fn(); intersectionDisconnect = vi.fn();
+    vi.spyOn(document, 'hidden', 'get').mockImplementation(() => hidden);
+    vi.spyOn(HTMLCanvasElement.prototype, 'clientWidth', 'get').mockImplementation(() => bounds.width);
+    vi.spyOn(HTMLCanvasElement.prototype, 'clientHeight', 'get').mockImplementation(() => bounds.height);
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({ width: bounds.width * zoom, height: bounds.height * zoom, x: 0, y: 0, top: 0, left: 0, right: bounds.width * zoom, bottom: bounds.height * zoom, toJSON() {} }));
+    vi.stubGlobal('matchMedia', (query: string) => query.includes('prefers-reduced') ? reduced : compact);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { const id = ++frameId; frames.set(id, callback); return id; });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('ResizeObserver', class { constructor(callback: () => void) { resize = callback; } observe() {} disconnect() { resizeDisconnect(); } });
+    vi.stubGlobal('IntersectionObserver', class {
+      constructor(private callback: (entries: Partial<IntersectionObserverEntry>[]) => void) {}
+      observe(target: Element) { intersect = value => this.callback([{ target, isIntersecting: value }]); }
+      disconnect() { intersectionDisconnect(); }
+    });
+    const gradient = { addColorStop() {} };
+    context = {
+      setTransform() {}, clearRect() { draws++; lines = trails = glows = firstRadius = 0; hasPoint = false; },
+      beginPath() {}, closePath() {}, stroke() {}, fill() {}, arc(_x: number, _y: number, radius: number) { if (!firstRadius) firstRadius = radius; },
+      moveTo(x: number, y: number) { if (!hasPoint) { hasPoint = true; firstPoint = [x, y]; } },
+      lineTo() { lines++; },
+      createLinearGradient() { trails++; return gradient; },
+      createRadialGradient() { glows++; return gradient; },
+    } as unknown as CanvasRenderingContext2D;
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+  });
+  afterEach(() => { cleanup(); document.documentElement.removeAttribute('data-rhine-motion'); vi.restoreAllMocks(); vi.unstubAllGlobals(); });
+
+  function advance(now: number) {
+    act(() => { const pending = [...frames.values()]; frames.clear(); pending.forEach(callback => callback(now)); });
+  }
+
+  it('retains the complete seeded artwork, caps pixel density and pauses without catching up', () => {
+    vi.stubGlobal('devicePixelRatio', 3);
+    const canvas = document.createElement('canvas'); document.body.append(canvas);
+    const scene = mountOrbit(canvas, () => {});
+    expect(canvas.width).toBe(1200); expect(canvas.height).toBe(1360);
+    expect(trails).toBe(420); expect(glows).toBe(140); expect(lines).toBeGreaterThan(185 * 80);
+    advance(100); const initial = [...firstPoint]; advance(200); const moving = [...firstPoint];
+    expect(moving).not.toEqual(initial);
+    scene.setPaused(true); const stoppedDraws = draws;
+    expect(frames.size).toBe(0); advance(9000); expect(draws).toBe(stoppedDraws);
+    scene.setPaused(false); advance(10000); expect(firstPoint).toEqual(moving);
+    advance(10100); expect(firstPoint).not.toEqual(moving);
+    scene.dispose(); canvas.remove();
+  });
+
+  it('keeps children and keyboard-capable pause control while preserving the current canvas', () => {
+    const { container } = render(<OrbitBackdrop><input aria-label="草稿" defaultValue="保留内容" /></OrbitBackdrop>);
+    const canvas = container.querySelector('canvas'); expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    const input = screen.getByLabelText('草稿'); fireEvent.change(input, { target: { value: '已经输入' } });
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' }));
+    expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '继续动效' })).not.toHaveAttribute('aria-pressed');
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'paused');
+    fireEvent.click(screen.getByRole('button', { name: '继续动效' }));
+    expect(frames.size).toBe(1); expect(container.querySelector('canvas')).toBe(canvas); expect(input).toHaveValue('已经输入');
+    expect(screen.getByRole('button', { name: '暂停动效' })).not.toHaveAttribute('aria-pressed');
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'playing');
+  });
+
+  it('keeps geometry and stroke proportions stable when CSS zoom changes before a pause or resize', () => {
+    const { container } = render(<OrbitBackdrop />);
+    const canvas = container.querySelector('canvas')!;
+    const snapshot = () => ({ width: canvas.width, height: canvas.height, point: [...firstPoint], lineWidth: context.lineWidth, radius: firstRadius });
+    const before = snapshot();
+    // CSS zoom changes the visual rectangle without changing layout dimensions or issuing RO.
+    zoom = 2;
+    expect(canvas.getBoundingClientRect().width).toBe(canvas.clientWidth * 2);
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' }));
+    expect(snapshot()).toEqual(before); expect(frames.size).toBe(0);
+    act(() => resize()); expect(snapshot()).toEqual(before);
+    fireEvent.click(screen.getByRole('button', { name: '继续动效' }));
+    advance(100); expect(snapshot()).toEqual(before); expect(frames.size).toBe(1);
+  });
+
+  it('honors system and explicit reduction, and never lets false bypass the system', () => {
+    reduced.matches = true;
+    const { rerender } = render(<OrbitBackdrop reducedMotion={false} />);
+    expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '已减少动态' })).toBeDisabled();
+    act(() => reduced.set(false)); expect(frames.size).toBe(1);
+    rerender(<OrbitBackdrop reducedMotion />); expect(frames.size).toBe(0);
+    rerender(<OrbitBackdrop reducedMotion={false} />); expect(frames.size).toBe(1);
+    act(() => reduced.set(true)); expect(frames.size).toBe(0);
+  });
+
+  it('synchronizes a media change observed by a frame before the change event arrives', () => {
+    const { container } = render(<OrbitBackdrop />);
+    advance(100); advance(200); const frozen = [...firstPoint];
+    reduced.matches = true;
+    advance(300);
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'reduced');
+    expect(screen.getByRole('button', { name: '已减少动态' })).toBeDisabled();
+    expect(frames.size).toBe(0); expect(firstPoint).toEqual(frozen);
+    const stoppedDraws = draws; advance(9000); expect(draws).toBe(stoppedDraws);
+    act(() => reduced.set(false));
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'playing');
+    expect(screen.getByRole('button', { name: '暂停动效' })).toBeEnabled();
+    advance(10000); expect(firstPoint).toEqual(frozen);
+    advance(10100); expect(firstPoint).not.toEqual(frozen);
+  });
+
+  it('observes ancestor motion changes even through a local system preference', async () => {
+    render(<div data-rhine-motion="system"><OrbitBackdrop /></div>);
+    expect(frames.size).toBe(1);
+    await act(async () => { document.documentElement.setAttribute('data-rhine-motion', 'reduced'); });
+    expect(frames.size).toBe(0);
+    await act(async () => { document.documentElement.removeAttribute('data-rhine-motion'); });
+    expect(frames.size).toBe(1);
+  });
+
+  it('stops while hidden, offscreen, compact or empty and redraws a paused resize', () => {
+    const { container } = render(<OrbitBackdrop />);
+    act(() => { hidden = true; document.dispatchEvent(new Event('visibilitychange')); }); expect(frames.size).toBe(0);
+    act(() => { hidden = false; document.dispatchEvent(new Event('visibilitychange')); }); expect(frames.size).toBe(1);
+    act(() => intersect(false)); expect(frames.size).toBe(0);
+    act(() => intersect(true)); expect(frames.size).toBe(1);
+    act(() => compact.set(true)); expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '窄屏静态画面' })).toBeDisabled();
+    act(() => compact.set(false)); expect(frames.size).toBe(1);
+    act(() => { bounds.width = 0; resize(); }); expect(frames.size).toBe(0);
+    act(() => { bounds.width = 400; resize(); }); expect(frames.size).toBe(1);
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' })); const beforeResize = draws;
+    act(() => { bounds.height = 500; resize(); }); expect(draws).toBeGreaterThan(beforeResize); expect(frames.size).toBe(0);
+    expect(container.querySelector('canvas')).toHaveAttribute('height', '500');
+  });
+
+  it('cleans up all scheduling and observers, including Strict Mode mount replay', async () => {
+    const visibilitySpy = vi.spyOn(document, 'removeEventListener');
+    const resizeSpy = vi.spyOn(window, 'removeEventListener');
+    const reducedSpy = vi.spyOn(reduced, 'removeEventListener');
+    const compactSpy = vi.spyOn(compact, 'removeEventListener');
+    const { unmount } = render(<StrictMode><OrbitBackdrop /></StrictMode>);
+    expect(frames.size).toBe(1); unmount(); const finalDraws = draws;
+    expect(frames.size).toBe(0); expect(resizeDisconnect).toHaveBeenCalledTimes(2); expect(intersectionDisconnect).toHaveBeenCalledTimes(2);
+    expect(visibilitySpy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));
+    expect(resizeSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    expect(reducedSpy).toHaveBeenCalledWith('change', expect.any(Function)); expect(compactSpy).toHaveBeenCalledWith('change', expect.any(Function));
+    await act(async () => { document.documentElement.setAttribute('data-rhine-motion', 'reduced'); reduced.set(true); resize(); intersect(true); });
+    expect(draws).toBe(finalDraws); expect(frames.size).toBe(0);
+  });
+
+  it.each(['null', 'throw'])('keeps content usable when the canvas context is %s', mode => {
+    vi.mocked(HTMLCanvasElement.prototype.getContext).mockImplementation(() => { if (mode === 'throw') throw new Error('Canvas unavailable'); return null; });
+    const { container } = render(<OrbitBackdrop><button>继续工作</button></OrbitBackdrop>);
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'unavailable');
+    expect(screen.getByRole('button', { name: '继续工作' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: '静态画面' })).toBeDisabled(); expect(frames.size).toBe(0);
+  });
+
+  it('replays the gallery artwork while preserving entered content and external replay focus', () => {
+    const { container } = render(<OrbitGallery />); const canvas = container.querySelector('canvas');
+    fireEvent.change(screen.getByRole('textbox', { name: '直接叠加的输入框' }), { target: { value: '新的轨道名称' } });
+    fireEvent.change(screen.getByRole('textbox', { name: '工作空间名称' }), { target: { value: '新的工作空间' } });
+    const replay = screen.getByRole('button', { name: '重播轨道' }); replay.focus(); fireEvent.click(replay);
+    expect(container.querySelector('canvas')).not.toBe(canvas); expect(replay).toHaveFocus(); expect(frames.size).toBe(1);
+    expect(screen.getByRole('textbox', { name: '直接叠加的输入框' })).toHaveValue('新的轨道名称');
+    expect(screen.getByRole('textbox', { name: '工作空间名称' })).toHaveValue('新的工作空间');
+    fireEvent.click(screen.getByRole('switch', { name: '减少轨道动态' })); expect(frames.size).toBe(0);
+  });
+});