@linhey/rhine-design 0.4.0 → 0.5.0

package/tests/Extensions.test.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { AppShell, Background, DataTable, DateRangePicker, Dialog, MediaCard, MediaViewer, NumberField, Pagination, RemoteMultiSelect, TreeSelect } from '../components';
+import { ThemeProvider } from '../components/theme';
+
+describe('controlled form extensions', () => {
+  it('blocks global disabled tree expansion while keeping disabled nodes browsable in enabled trees', () => {
+    const expand = vi.fn();
+    const props = { label: '树', nodes: [{ id: 'root', label: '根', disabled: true, children: [{ id: 'child', label: '子' }] }], value: [], onValueChange: () => {}, expandedKeys: [], onExpandedChange: expand };
+    const { rerender } = render(<TreeSelect {...props} disabled />);
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: '根' }), { key: 'ArrowRight' });
+    expect(expand).not.toHaveBeenCalled(); expect(screen.getByRole('button', { name: '展开根' })).toBeDisabled();
+    rerender(<TreeSelect {...props} />);
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: '根' }), { key: 'ArrowRight' }); expect(expand).toHaveBeenCalledWith(['root']);
+  });
+  it('retains intermediate number input and commits precision only on blur or Enter', () => {
+    const change = vi.fn();
+    render(<NumberField label="金额" value={1} onValueChange={change} min={-10} max={20} precision={2} step={0.25} />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '-' } });
+    expect(input).toHaveValue('-'); expect(change).not.toHaveBeenCalled();
+    fireEvent.blur(input); expect(screen.getByRole('alert')).toHaveTextContent('有效数字');
+    fireEvent.change(input, { target: { value: '1.' } }); expect(input).toHaveValue('1.');
+    fireEvent.change(input, { target: { value: '1.238' } }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).toHaveBeenLastCalledWith(1.24);
+    fireEvent.change(input, { target: { value: '21' } }); fireEvent.blur(input);
+    expect(input).toHaveValue('21'); expect(change).toHaveBeenCalledTimes(1);
+    fireEvent.change(input, { target: { value: '' } }); fireEvent.blur(input);
+    expect(change).toHaveBeenLastCalledWith(null);
+  });
+  it('steps with decimal precision and protects number IME input', () => {
+    const change = vi.fn(); render(<NumberField label="金额" value={0.1} onValueChange={change} step={0.2} precision={2} />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.compositionStart(input); fireEvent.keyDown(input, { key: 'Enter' }); expect(change).not.toHaveBeenCalled();
+    fireEvent.compositionEnd(input); fireEvent.keyDown(input, { key: 'ArrowUp' }); expect(change).toHaveBeenLastCalledWith(0.3);
+  });
+  it('uses date-only controlled values, range limits, presets and clear intent', () => {
+    const change = vi.fn();
+    render(<DateRangePicker label="范围" value={{ start: '2026-10-01', end: '2026-10-23' }} min="2026-01-01" max="2026-12-31" onValueChange={change} presets={[{ label: '超出范围', value: { start: '2025-01-01', end: '2025-12-31' } }]} />);
+    expect(screen.getByLabelText('结束日期')).toHaveAttribute('min', '2026-10-01');
+    expect(screen.getByRole('button', { name: '超出范围' })).toBeDisabled();
+    fireEvent.change(screen.getByLabelText('开始日期'), { target: { value: '2026-10-05' } });
+    expect(change).toHaveBeenLastCalledWith({ start: '2026-10-05', end: '2026-10-23' });
+    fireEvent.click(screen.getByRole('button', { name: '清空日期' })); expect(change).toHaveBeenLastCalledWith({ start: '', end: '' });
+  });
+  it('keeps remote selections outside the current result set and does not locally filter', () => {
+    const change = vi.fn(), query = vi.fn();
+    const { rerender } = render(<RemoteMultiSelect label="远程" query="不匹配标签" onQueryChange={query} value={[{ value: 'old', label: '旧结果' }]} onValueChange={change} options={[{ value: 'new', label: '新结果' }]} />);
+    const input = screen.getByRole('combobox'); fireEvent.focus(input); fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).toHaveBeenLastCalledWith([{ value: 'old', label: '旧结果' }, { value: 'new', label: '新结果' }]);
+    rerender(<RemoteMultiSelect label="远程" query="" onQueryChange={query} value={[{ value: 'old', label: '旧结果' }]} onValueChange={change} options={[]} loading />);
+    expect(screen.getByText('旧结果')).toBeVisible();
+    fireEvent.compositionStart(input); fireEvent.change(input, { target: { value: '中' } }); expect(query).not.toHaveBeenCalled();
+    fireEvent.compositionEnd(input); expect(query).toHaveBeenLastCalledWith('中');
+  });
+  it('navigates tree hierarchy and selects parents independently of children', () => {
+    function Demo() {
+      const [value, setValue] = useState<string[]>(['child']), [expanded, setExpanded] = useState<string[]>([]);
+      return <TreeSelect label="树" nodes={[{ id: 'root', label: '父节点', children: [{ id: 'child', label: '子节点' }, { id: 'locked', label: '禁选', disabled: true }] }]} value={value} onValueChange={setValue} expandedKeys={expanded} onExpandedChange={setExpanded} multiple />;
+    }
+    render(<Demo />); const parent = screen.getByRole('treeitem', { name: '父节点' }); parent.focus();
+    fireEvent.keyDown(parent, { key: 'ArrowRight' }); expect(parent).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.keyDown(parent, { key: ' ' }); expect(parent).toHaveAttribute('aria-checked', 'true');
+    fireEvent.keyDown(parent, { key: 'ArrowRight' }); const child = screen.getByRole('treeitem', { name: '子节点' });
+    expect(child).toHaveFocus(); expect(child).toHaveAttribute('aria-checked', 'true');
+    fireEvent.keyDown(child, { key: 'ArrowDown' }); const locked = screen.getByRole('treeitem', { name: '禁选' }); expect(locked).toHaveFocus();
+    fireEvent.keyDown(locked, { key: ' ' }); expect(locked).toHaveAttribute('aria-checked', 'false');
+    fireEvent.keyDown(locked, { key: 'ArrowLeft' }); expect(parent).toHaveFocus();
+  });
+});
+
+describe('server-owned data', () => {
+  it('renders a numeric zero detail inside a region and associates its expansion control', () => {
+    render(<DataTable caption="记录" rows={[{ id: 'a' }]} rowKey={row => row.id} columns={[{ key: 'id', header: 'ID', render: row => row.id }]} expansion={{ keys: ['a'], onChange: () => {}, renderDetail: () => 0 }} />);
+    const detail = screen.getByRole('region', { name: 'a详情' }); expect(detail).toHaveTextContent('0');
+    expect(screen.getByRole('button', { name: '收起a' })).toHaveAttribute('aria-controls', detail.id);
+  });
+  it('preserves off-page selection and disabled keys while selecting visible rows', () => {
+    const change = vi.fn();
+    const props = { caption: '记录', rows: [{ id: 'a' }, { id: 'b' }, { id: 'locked' }], rowKey: (row: { id: string }) => row.id, columns: [{ key: 'id', header: 'ID', render: (row: { id: string }) => row.id }] };
+    const { rerender } = render(<DataTable {...props} selection={{ keys: ['off-page', 'a', 'locked'], onChange: change, isDisabled: row => row.id === 'locked' }} />);
+    expect(screen.getByRole('checkbox', { name: '选择当前可见行' })).toBePartiallyChecked();
+    fireEvent.click(screen.getByRole('checkbox', { name: '选择当前可见行' })); expect(change).toHaveBeenLastCalledWith(['off-page', 'a', 'locked', 'b']);
+    rerender(<DataTable {...props} selection={{ keys: ['off-page', 'a', 'locked', 'b'], onChange: change, isDisabled: row => row.id === 'locked' }} />);
+    fireEvent.click(screen.getByRole('checkbox', { name: '选择当前可见行' })); expect(change).toHaveBeenLastCalledWith(['off-page', 'locked']);
+    expect(screen.getByRole('checkbox', { name: '选择locked' })).toBeDisabled();
+  });
+  it('renders controlled child rows and independent details without sorting', () => {
+    const change = vi.fn(); const parent = { id: 'parent' };
+    const { rerender } = render(<DataTable caption="层级" rows={[parent]} rowKey={row => row.id} columns={[{ key: 'id', header: 'ID', render: row => row.id }]} expansion={{ keys: [], onChange: change, getChildren: row => row.id === 'parent' ? [{ id: 'child' }] : [] }} />);
+    fireEvent.click(screen.getByRole('button', { name: '展开parent' })); expect(change).toHaveBeenCalledWith(['parent']); expect(screen.queryByText('child')).not.toBeInTheDocument();
+    rerender(<DataTable caption="层级" rows={[parent]} rowKey={row => row.id} columns={[{ key: 'id', header: 'ID', render: row => row.id }]} expansion={{ keys: ['parent'], onChange: change, getChildren: row => row.id === 'parent' ? [{ id: 'child' }] : [], renderDetail: row => <p>{row.id}详情内容</p> }} />);
+    expect(screen.getByText('child')).toBeVisible(); expect(screen.getByRole('region', { name: 'parent详情' })).toHaveTextContent('详情内容');
+    expect(screen.getByText('第 2 层')).toBeVisible();
+  });
+  it('emits page-size intent without implicitly changing the page', () => {
+    const page = vi.fn(), size = vi.fn(); render(<Pagination page={2} pageSize={10} hasNext onPageChange={page} onPageSizeChange={size} />);
+    fireEvent.change(screen.getByLabelText('每页条数'), { target: { value: '25' } }); expect(size).toHaveBeenCalledWith(25); expect(page).not.toHaveBeenCalled();
+  });
+});
+
+describe('layout and media', () => {
+  it('returns focus to a surviving shell control when the focused secondary panel is removed', () => {
+    vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} });
+    const bounds = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1200);
+    const props = { navigation: { label: '导航', content: <button>导航条目</button>, open: true, onOpenChange: () => {} }, secondary: { label: '详情', content: <button>详情操作</button>, open: true, onOpenChange: () => {} }, children: <p>正文</p> };
+    try {
+      const { rerender } = render(<AppShell {...props} layout="left-right" />); screen.getByRole('button', { name: '详情操作' }).focus();
+      rerender(<AppShell {...props} layout="single" />); expect(screen.getByRole('button', { name: '收起导航' })).toHaveFocus();
+    } finally { bounds.mockRestore(); vi.unstubAllGlobals(); }
+  });
+  it('does not introduce a theme root for a local background', () => {
+    const { container } = render(<ThemeProvider defaultTheme="neo-brutalism"><Background decoration="none"><p>正文</p></Background></ThemeProvider>);
+    expect(container.querySelectorAll('.rhine-theme')).toHaveLength(1); expect(container.querySelector('.rhine-background')).toHaveAttribute('data-decoration', 'none');
+  });
+  it('retains body input through layout, panel and theme changes', () => {
+    vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} });
+    const bounds = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1200);
+    function Demo() {
+      const [layout, setLayout] = useState<'single' | 'left-right'>('single'), [open, setOpen] = useState(true), [dark, setDark] = useState(false);
+      return <ThemeProvider theme={dark ? 'arknights' : 'rhine'}><button onClick={() => { setLayout('left-right'); setDark(true); }}>切换</button><AppShell layout={layout} navigation={{ label: '导航', open, onOpenChange: setOpen, content: <p>导航内容</p> }}><input aria-label="草稿" defaultValue="保留" /></AppShell></ThemeProvider>;
+    }
+    try { render(<Demo />); const input = screen.getByLabelText('草稿'); fireEvent.change(input, { target: { value: '已修改' } }); fireEvent.click(screen.getByRole('button', { name: '收起导航' })); fireEvent.click(screen.getByText('切换')); expect(screen.getByLabelText('草稿')).toBe(input); expect(input).toHaveValue('已修改'); }
+    finally { bounds.mockRestore(); vi.unstubAllGlobals(); }
+  });
+  it('keeps media selection separate from opening and labels failed previews', () => {
+    const open = vi.fn(), select = vi.fn(); render(<MediaCard title="文件" kind="RAW" state="error" onOpen={open} selected onSelectedChange={select} />);
+    fireEvent.click(screen.getByRole('checkbox')); expect(select).toHaveBeenCalledWith(false); expect(open).not.toHaveBeenCalled();
+    expect(screen.getByText('预览无法解码')).toBeVisible(); expect(screen.getByRole('status')).toHaveTextContent('预览失败');
+    const opener = screen.getByRole('button', { name: '打开文件' }); fireEvent.click(opener); expect(open).toHaveBeenCalledOnce(); expect(opener).toHaveFocus();
+  });
+  it('closes nested dialogs in layers and returns focus to the media opener', async () => {
+    render(<ThemeProvider><MediaViewer trigger={<button>打开媒体</button>} title="照片" description="演示" metadataOpen metadata={<Dialog trigger={<button>资源信息</button>} title="资源详情" description="嵌套"><p>信息</p></Dialog>}><img alt="演示" /></MediaViewer></ThemeProvider>);
+    const trigger = screen.getByRole('button', { name: '打开媒体' }); trigger.focus(); fireEvent.click(trigger);
+    const viewer = await screen.findByRole('dialog', { name: '照片' });
+    const details = within(viewer).getByRole('button', { name: '资源信息' }); details.focus(); fireEvent.click(details);
+    const nested = await screen.findByRole('dialog', { name: '资源详情' });
+    fireEvent.keyDown(nested, { key: 'Escape' }); await waitFor(() => expect(screen.queryByRole('dialog', { name: '资源详情' })).not.toBeInTheDocument());
+    await waitFor(() => expect(details).toHaveFocus()); expect(viewer).toBeVisible();
+    fireEvent.keyDown(viewer, { key: 'Escape' }); await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(trigger).toHaveFocus());
+    await act(async () => {});
+  });
+});

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