@linhey/rhine-design 0.5.0 → 0.8.0

package/tests/OrbitObjectsThree.test.tsx

@@ -0,0 +1,164 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { BufferGeometry, InstancedMesh, Material, Texture, Vector3, type Mesh, type PerspectiveCamera, type Points, type Scene, type ShaderMaterial } from 'three';
+import { createOrbitObject, type OrbitObjectKind } from '../components/orbitObjectsThree';
+
+const gpu = vi.hoisted(() => ({ renderers: [] as Array<{
+  scene?: Scene; camera?: PerspectiveCamera; dispose: ReturnType<typeof vi.fn>; forceContextLoss: ReturnType<typeof vi.fn>;
+}> }));
+vi.mock('three', async importOriginal => {
+  const actual = await importOriginal<typeof import('three')>();
+  return { ...actual, WebGLRenderer: class {
+    ratio = 1; scene?: Scene; camera?: PerspectiveCamera;
+    dispose = vi.fn(); forceContextLoss = vi.fn();
+    constructor(private options: { canvas: HTMLCanvasElement }) { gpu.renderers.push(this); }
+    setClearColor() {} setPixelRatio(value: number) { this.ratio = value; }
+    setSize(width: number, height: number) { this.options.canvas.width = Math.round(width * this.ratio); this.options.canvas.height = Math.round(height * this.ratio); }
+    render(scene: Scene, camera: PerspectiveCamera) { this.scene = scene; this.camera = camera; scene.updateMatrixWorld(); camera.updateMatrixWorld(); }
+  } };
+});
+
+describe.each<OrbitObjectKind>(['paper', 'technical'])('Three.js %s object', kind => {
+  beforeEach(() => {
+    gpu.renderers = []; vi.stubGlobal('requestAnimationFrame', vi.fn()); vi.stubGlobal('devicePixelRatio', 3);
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({ createLinearGradient: () => ({ addColorStop() {} }), fillRect() {}, fillText() {} } as unknown as CanvasRenderingContext2D);
+  });
+  afterEach(() => { vi.restoreAllMocks(); vi.unstubAllGlobals(); });
+
+  it('animates the object and particles deterministically from the host clock, including after resize', () => {
+    const art = createOrbitObject(kind, vi.fn());
+    expect(art.draw(0, 620, 1)).toBe(false);
+    art.draw(400, 620, 1);
+    expect(art.canvas.width).toBe(600); expect(art.canvas.height).toBe(930);
+    const scene = gpu.renderers[0].scene!, bird = kind === 'paper';
+    expect(scene.name).toBe(bird ? 'origami-paper-bird' : 'originium-cluster');
+    const particles = scene.getObjectByName(bird ? 'floating-paper-flecks' : 'floating-fragments') as InstancedMesh;
+    const dust = scene.getObjectByName(bird ? 'paper-motes' : 'crystal-embers') as Points<BufferGeometry, ShaderMaterial>;
+    const capture = () => ({ wings: bird ? ['paper-wing-left', 'paper-wing-right'].map(name => scene.getObjectByName(name)!.rotation.z) : [], object: scene.getObjectByName('theme-object')!.matrixWorld.toArray(), particles: [...particles.instanceMatrix.array], time: dust.material.uniforms.time.value });
+    const frozen = capture(); art.draw(400, 620, 1); expect(capture()).toEqual(frozen);
+    art.draw(880, 526, 1); expect(capture()).toEqual(frozen);
+    art.draw(880, 526, 2); expect(capture().object).not.toEqual(frozen.object); expect(capture().particles).not.toEqual(frozen.particles);
+    expect(capture().time).toBe(2);
+    if (bird) {
+      expect(capture().wings).not.toEqual(frozen.wings);
+      const body = scene.getObjectByName('folded-body') as Mesh;
+      expect(body.geometry.getAttribute('position').count).toBeGreaterThan(20);
+      expect(scene.getObjectByName('paper-wing-left')).toBeDefined();
+      expect(scene.getObjectByName('paper-wing-right')).toBeDefined();
+      expect(scene.getObjectByName('folded-neck-and-beak')).toBeDefined();
+    } else {
+      for (let i = 0; i < 5; i++) expect(scene.getObjectByName(`originium-facet-${i}`)).toBeDefined();
+      expect(scene.getObjectByName('containment-ring')).toBeDefined();
+    }
+    expect(requestAnimationFrame).not.toHaveBeenCalled(); art.dispose();
+  });
+
+  if (kind === 'paper') it('continuously reshapes the existing paper buffers and creases, freezes mid-fold and reverses', () => {
+    const art = createOrbitObject(kind, vi.fn());
+    art.draw(880, 526, 0);
+    const object = gpu.renderers[0].scene!.getObjectByName('theme-object')!;
+    const meshes: Mesh[] = [];
+    object.traverse(node => { if ((node as Mesh).geometry) meshes.push(node as Mesh); });
+    const identities = meshes.map(mesh => [mesh.uuid, mesh.geometry.uuid, mesh.geometry.getAttribute('position')]);
+    const capture = () => meshes.map(mesh => [...mesh.geometry.getAttribute('position').array]);
+    const bird = capture();
+    art.draw(880, 526, 11); const halfway = capture();
+    expect(halfway).not.toEqual(bird);
+    art.draw(520, 460, 11); expect(capture()).toEqual(halfway);
+    art.draw(880, 526, 11.0001);
+    const adjacent = capture();
+    expect(Math.max(...adjacent.flatMap((points, i) => points.map((v, j) => Math.abs(v - halfway[i][j]))))).toBeLessThan(.001);
+    art.draw(880, 526, 21); const butterfly = capture();
+    expect(butterfly).not.toEqual(bird); expect(butterfly).not.toEqual(halfway);
+    expect(butterfly.every(points => points.every(Number.isFinite))).toBe(true);
+    art.draw(880, 526, 31); expect(capture()).toEqual(halfway);
+    art.draw(880, 526, 42); expect(capture()).toEqual(bird);
+    expect(meshes.map(mesh => [mesh.uuid, mesh.geometry.uuid, mesh.geometry.getAttribute('position')])).toEqual(identities);
+    expect(object.children.every(child => child.visible)).toBe(true);
+    art.dispose();
+  });
+
+  if (kind === 'paper') it('opens a nearly flat sheet between two folding gestures and suspends flapping', () => {
+    const art = createOrbitObject(kind, vi.fn());
+    const heightAt = (time: number) => {
+      art.draw(880, 526, time);
+      const wing = gpu.renderers[0].scene!.getObjectByName('paper-wing-left')!;
+      expect(Math.abs(wing.rotation.z)).toBe(0);
+      let height = 0;
+      wing.traverse(node => {
+        const positions = (node as Mesh).geometry?.getAttribute('position');
+        if (positions) for (let i = 0; i < positions.count; i++) height = Math.max(height, Math.abs(positions.getY(i)));
+      });
+      return height;
+    };
+    const gathered = heightAt(6.2), opened = heightAt(11), refolded = heightAt(14.4);
+    expect(opened).toBeLessThan(.08);
+    expect(gathered).toBeGreaterThan(opened * 4);
+    expect(refolded).toBeGreaterThan(opened * 4);
+    art.dispose();
+  });
+
+  if (kind === 'paper') it('flies, banks and beats its wings without leaving desktop or narrow frames', () => {
+    const art = createOrbitObject(kind, vi.fn()), vertex = new Vector3();
+    const motion: number[][] = [];
+    let maxX = 0, maxY = 0, extreme = '';
+    for (const [width, height] of [[400,360],[520,460],[880,526]]) for (let time = 0; time <= 84; time += .5) {
+      art.draw(width, height, time);
+      const { scene, camera } = gpu.renderers[0];
+      const bird = scene!.getObjectByName('theme-object')!;
+      motion.push([bird.position.x, bird.position.y, bird.position.z, bird.rotation.z, scene!.getObjectByName('paper-wing-left')!.rotation.z]);
+      scene!.getObjectByName('theme-object')!.traverse(node => {
+        const positions = (node as Mesh).geometry?.getAttribute('position');
+        if (!positions) return;
+        for (let i = 0; i < positions.count; i++) {
+          vertex.fromBufferAttribute(positions, i).applyMatrix4(node.matrixWorld).project(camera!);
+          maxX = Math.max(maxX, Math.abs(vertex.x));
+          if (Math.abs(vertex.y) > maxY) { maxY = Math.abs(vertex.y); extreme = `${width}x${height} t=${time} ${node.name}`; }
+        }
+      });
+    }
+    expect(maxX).toBeLessThan(.96);
+    expect(maxY, extreme).toBeLessThan(.94);
+    for (const [axis, minimumSpan] of [ .7, .3, .38, .22, .5 ].entries()) {
+      const values = motion.map(pose => pose[axis]);
+      expect(Math.max(...values) - Math.min(...values)).toBeGreaterThan(minimumSpan);
+    }
+    art.dispose();
+  });
+
+  it('recovers a frozen context and releases every owned resource exactly once', () => {
+    const geometrySpy = vi.spyOn(BufferGeometry.prototype, 'dispose'), materialSpy = vi.spyOn(Material.prototype, 'dispose');
+    const instanceSpy = vi.spyOn(InstancedMesh.prototype, 'dispose'), textureSpy = vi.spyOn(Texture.prototype, 'dispose'), invalidate = vi.fn();
+    const art = createOrbitObject(kind, invalidate); document.body.append(art.canvas); art.draw(880, 526, 3);
+    const renderer = gpu.renderers[0], geometries = new Set(), materials = new Set(), instances = new Set();
+    renderer.scene!.traverse(node => {
+      const mesh = node as Mesh;
+      if (mesh.geometry) geometries.add(mesh.geometry);
+      if (mesh.material) for (const m of Array.isArray(mesh.material) ? mesh.material : [mesh.material]) materials.add(m);
+      if (node instanceof InstancedMesh) instances.add(node);
+    });
+    const lost = new Event('webglcontextlost', { cancelable: true }); art.canvas.dispatchEvent(lost);
+    expect(lost.defaultPrevented).toBe(true); expect(art.draw(880, 526, 8)).toBe(false);
+    art.canvas.dispatchEvent(new Event('webglcontextrestored')); expect(invalidate).toHaveBeenCalledTimes(2);
+    expect(art.draw(880, 526, 3)).toBe(true);
+    art.dispose(); art.dispose();
+    // Allocated but unused shared materials must also be released.
+    expect(new Set(geometrySpy.mock.contexts)).toEqual(geometries);
+    expect(geometrySpy).toHaveBeenCalledTimes(geometries.size);
+    expect(materialSpy.mock.contexts).toEqual(expect.arrayContaining([...materials]));
+    expect(new Set(materialSpy.mock.contexts).size).toBe(materialSpy.mock.calls.length);
+    expect(new Set(instanceSpy.mock.contexts)).toEqual(instances); expect(instanceSpy).toHaveBeenCalledTimes(instances.size);
+    expect(textureSpy).toHaveBeenCalledTimes(kind === 'paper' ? 2 : 1);
+    expect(new Set(textureSpy.mock.contexts).size).toBe(textureSpy.mock.calls.length);
+    expect(renderer.dispose).toHaveBeenCalledOnce(); expect(renderer.forceContextLoss).toHaveBeenCalledOnce();
+    expect(art.canvas.isConnected).toBe(false); expect(art.draw(400, 620, 4)).toBe(false);
+    art.canvas.dispatchEvent(new Event('webglcontextrestored')); expect(invalidate).toHaveBeenCalledTimes(2);
+  });
+
+  it('releases partial allocations if object construction fails', () => {
+    const disposeGeometry = vi.spyOn(BufferGeometry.prototype, 'dispose');
+    vi.spyOn(BufferGeometry.prototype, 'setAttribute').mockImplementationOnce(() => { throw new Error('Synthetic setup failure'); });
+    expect(() => createOrbitObject(kind, vi.fn())).toThrow('Synthetic setup failure');
+    expect(disposeGeometry).toHaveBeenCalled();
+    expect(gpu.renderers[0].dispose).toHaveBeenCalledOnce(); expect(gpu.renderers[0].forceContextLoss).toHaveBeenCalledOnce();
+  });
+});

package/tests/SettingsDialog.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { SettingsDialogGallery } from '../preview/SettingsDialogGallery';
+import { Button, Dialog, Tooltip } from '../components';
+
+it('keeps host state and URL while changing settings sections and explicitly saving', async () => {
+  render(<SettingsDialogGallery />);
+  const url = location.href;
+  fireEvent.change(screen.getByRole('textbox', {name:'宿主查询'}), {target:{value:'已有查询'}});
+  fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
+  fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'修改后的名称'}});
+  fireEvent.click(screen.getByRole('link', {name:'用户管理与权限'}));
+  fireEvent.click(screen.getByRole('link', {name:'账号'}));
+  expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
+  expect(location.href).toBe(url);
+  fireEvent.click(screen.getByRole('button', {name:'保存设置'}));
+  await screen.findByText('已保存演示草稿');
+  expect(screen.getByRole('dialog', {name:'设置'})).toBeVisible();
+  fireEvent.click(screen.getByRole('button', {name:'关闭对话框'}));
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  expect(screen.getByRole('textbox', {name:'宿主查询'})).toHaveValue('已有查询');
+  fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
+  expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
+  fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'丢弃'}});
+  fireEvent.click(screen.getByRole('button', {name:'取消草稿'}));
+  expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
+});
+
+it('closes only the focused nested dialog on an immediate Escape', async () => {
+  render(<SettingsDialogGallery />);
+  fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
+  fireEvent.click(screen.getByRole('link', {name:'用户管理与权限'}));
+  fireEvent.click(screen.getByRole('button', {name:'编辑成员 12'}));
+  const input = screen.getByRole('textbox', {name:'成员备注'});
+  input.focus(); fireEvent.keyDown(input, {key:'Escape'});
+  await waitFor(() => expect(screen.queryByRole('dialog', {name:'编辑成员 12'})).not.toBeInTheDocument());
+  expect(screen.getByRole('dialog', {name:'设置'})).toBeVisible();
+  await waitFor(() => expect(screen.getByRole('button', {name:'编辑成员 12'})).toHaveFocus());
+});
+
+it('lets the topmost tooltip consume Escape before closing its dialog', async () => {
+  render(<Dialog trigger={<Button>Open</Button>} title="Parent" description="Help inside dialog"><Tooltip content="Help text"><Button>Help</Button></Tooltip></Dialog>);
+  fireEvent.click(screen.getByRole('button', {name:'Open'}));
+  const help = screen.getByRole('button', {name:'Help'});
+  help.focus();
+  await screen.findByRole('tooltip');
+  fireEvent.keyDown(help, {key:'Escape'});
+  await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument());
+  expect(screen.getByRole('dialog', {name:'Parent'})).toBeVisible();
+  fireEvent.keyDown(help, {key:'Escape'});
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+});
+
+it.each([false, true])('reconciles pending saves on reopen without overwriting newer edits (edited=%s)', async edited => {
+  render(<SettingsDialogGallery />);
+  fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
+  fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'保存中的名称'}});
+  fireEvent.click(screen.getByRole('button', {name:'保存设置'}));
+  fireEvent.click(screen.getByRole('button', {name:'关闭对话框'}));
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
+  if (edited) fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'重新打开后编辑'}});
+  await screen.findByText('已保存演示草稿');
+  expect(screen.getByText('已保存名称：保存中的名称')).toBeVisible();
+  expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue(edited ? '重新打开后编辑' : '保存中的名称');
+});

package/tests/StatusTimelineList.test.tsx

@@ -0,0 +1,63 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { StatusTimelineList, type StatusTimelineItem } from '../components';
+import { ThemeProvider } from '../components/theme';
+
+const items: StatusTimelineItem[] = ['资源 A', '资源 B'].map((title, i) => ({ id: String(i), title,
+  summary: <>剩余 <strong>{i ? '—' : '0%'}</strong></>,
+  timeline: { startLabel: '昨天', endLabel: '今天', segments: [
+    { id: 'first', label: '10:00', status: 'unknown' }, { id: 'last', label: '10:15', status: 'failed' },
+  ] },
+}));
+
+it('opens only one row detail and preserves keyboard focus on the newly focused row', async () => {
+  render(<ThemeProvider><StatusTimelineList label="资源历史" items={items} /></ThemeProvider>);
+  const [first, second] = screen.getAllByRole('slider');
+  act(() => first.focus());
+  await screen.findByRole('dialog', { name: '资源 A 历史时段时段详情' });
+  act(() => second.focus());
+  await screen.findByRole('dialog', { name: '资源 B 历史时段时段详情' });
+  expect(screen.getAllByRole('dialog')).toHaveLength(1);
+  expect(second).toHaveFocus();
+  fireEvent.keyDown(second, { key: 'Enter' });
+  expect(screen.getByRole('button', { name: '关闭时段详情' })).toHaveFocus();
+  fireEvent.keyDown(screen.getByRole('button', { name: '关闭时段详情' }), { key: 'Escape' });
+  await waitFor(() => expect(second).toHaveFocus());
+  expect(screen.queryByRole('dialog')).toBeNull();
+});
+
+it('does not move focus to the old row when pointer inspection switches rows', async () => {
+  render(<StatusTimelineList label="资源历史" items={items} />);
+  const [first, second] = screen.getAllByRole('slider');
+  fireEvent.pointerDown(first);
+  await screen.findByRole('dialog');
+  fireEvent.pointerDown(second);
+  await screen.findByRole('dialog', { name: '资源 B 历史时段时段详情' });
+  await waitFor(() => expect(screen.queryByRole('dialog', { name: '资源 A 历史时段时段详情' })).toBeNull());
+  expect(document.body).toHaveFocus();
+});
+
+it('keeps stable row and segment identity on reorder and closes removed details', async () => {
+  const view = render(<StatusTimelineList label="资源历史" items={items} />);
+  const first = screen.getByRole('slider', { name: '资源 A 历史时段' });
+  fireEvent.change(first, { target: { value: '0' } });
+  view.rerender(<StatusTimelineList label="资源历史" items={[items[1], items[0]]} />);
+  expect(screen.getByRole('slider', { name: '资源 A 历史时段' })).toBe(first);
+  expect(first).toHaveAttribute('aria-valuetext', '10:00 · 未知 / 无数据');
+  view.rerender(<StatusTimelineList label="资源历史" items={[items[1]]} />);
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  view.rerender(<StatusTimelineList label="资源历史" items={items} />);
+  expect(screen.queryByRole('dialog')).toBeNull();
+});
+
+it('distinguishes unavailable history, empty records, zero summary and disabled inspection', () => {
+  const view = render(<StatusTimelineList label="资源历史" items={[{ ...items[0], timeline: null }, { ...items[1], timeline: { ...items[1].timeline!, disabled: true } }]} />);
+  expect(screen.getByText('0%')).toBeVisible();
+  expect(screen.getByText('历史记录暂不可用 · 未知')).toBeVisible();
+  expect(screen.getByRole('slider')).toBeDisabled();
+  fireEvent.pointerDown(screen.getByRole('slider'));
+  expect(screen.queryByRole('dialog')).toBeNull();
+  view.rerender(<StatusTimelineList label="资源历史" items={[]} emptyLabel="暂无资源" />);
+  expect(screen.getByText('暂无资源')).toBeVisible();
+  expect(screen.queryByRole('slider')).toBeNull();
+});

package/tests/ThemePicker.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { ThemePicker, ThemePreview } from '../components/ThemePicker';
+
+it('keeps theme ownership with the host and does not apply on focus or hover', () => {
+  const change = vi.fn();
+  const { rerender } = render(<ThemePicker value="rhine" onValueChange={change} />);
+  const radio = screen.getByRole('radio', { name: '明日方舟 · 战术终端' });
+  radio.focus(); fireEvent.mouseOver(radio); expect(change).not.toHaveBeenCalled();
+  fireEvent.click(radio); expect(change).toHaveBeenCalledWith('arknights'); expect(radio).not.toBeChecked();
+  rerender(<ThemePicker value="arknights" onValueChange={change} />); expect(radio).toBeChecked();
+});
+
+it('keeps failed previews selectable and retries a replacement source', () => {
+  const change = vi.fn();
+  const { container, rerender } = render(<ThemePicker value="rhine" onValueChange={change} />);
+  fireEvent.error(container.querySelectorAll('img')[1]);
+  expect(screen.getByText('预览暂不可用')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('radio', { name: '明日方舟 · 战术终端' })); expect(change).toHaveBeenCalledWith('arknights');
+  rerender(<ThemePreview theme="rhine" src="replacement.png" />);
+  expect(container.querySelector('img')).toHaveAttribute('src', 'replacement.png');
+  fireEvent.load(container.querySelector('img')!); expect(container.querySelector('[data-state=ready]')).toBeInTheDocument();
+});
+
+it('uses independent radio groups and supports whole-group and per-option disabling', () => {
+  render(<><ThemePicker label="一" value="rhine" onValueChange={() => {}} disabled /><ThemePicker label="二" value="rhine" onValueChange={() => {}} options={[{ value: 'rhine' }, { value: 'arknights', disabled: true }]} /></>);
+  const radios = screen.getAllByRole('radio');
+  expect(radios[0]).toBeDisabled(); expect(radios[4]).toBeDisabled();
+  expect(radios[0].getAttribute('name')).not.toBe(radios[3].getAttribute('name'));
+});

package/tests/TimelineLegend.test.tsx

@@ -0,0 +1,60 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { TimelineLegend, type TimelineLegendItem } from '../components';
+import { ThemeProvider } from '../components/theme';
+
+const items: TimelineLegendItem[] = [
+  { status: 'healthy', label: '有输出', description: '存在输出记录，当前证据未发现异常；不代表完整可用性。' },
+  { status: 'unknown', label: '未知', description: '数据缺失或不完整，不能解释为健康。' },
+];
+
+it('preserves default labels and non-interactive presentation', () => {
+  render(<TimelineLegend />);
+  expect(screen.getByRole('list', { name: '健康记录图例' }).children).toHaveLength(5);
+  expect(screen.getByText('有输出·未见异常')).toBeVisible();
+  expect(screen.getByText('未知 / 无数据')).toBeVisible();
+  expect(screen.queryByRole('button')).toBeNull();
+});
+
+it('shows host rules on focus, keeps only one rule open, and restores focus after inspection', async () => {
+  const { container } = render(<ThemeProvider theme="neo-brutalism"><TimelineLegend label="历史状态图例" compact items={items} /></ThemeProvider>);
+  const output = screen.getByRole('button', { name: '有输出' });
+  const unknown = screen.getByRole('button', { name: '未知' });
+  act(() => output.focus());
+  await screen.findByRole('dialog', { name: '有输出规则' });
+  expect(output).toHaveFocus();
+  act(() => unknown.focus());
+  const dialog = await screen.findByRole('dialog', { name: '未知规则' });
+  expect(screen.getAllByRole('dialog')).toHaveLength(1);
+  expect(dialog.closest('.rhine-theme')).toBe(container.querySelector('.rhine-theme'));
+  expect(unknown).toHaveFocus();
+  fireEvent.keyDown(unknown, { key: 'Enter' });
+  const close = screen.getByRole('button', { name: '关闭未知规则' });
+  expect(close).toHaveFocus();
+  fireEvent.keyDown(close, { key: 'Escape' });
+  await waitFor(() => expect(unknown).toHaveFocus());
+  expect(screen.queryByRole('dialog')).toBeNull();
+});
+
+it('opens rules through pointer activation without changing the label or requiring hover', async () => {
+  render(<TimelineLegend compact items={items} />);
+  const trigger = screen.getByRole('button', { name: '有输出' });
+  fireEvent.click(trigger);
+  const dialog = await screen.findByRole('dialog', { name: '有输出规则' });
+  expect(dialog).toHaveTextContent(items[0].description!);
+  expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  fireEvent.click(screen.getByRole('button', { name: '关闭有输出规则' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+});
+
+it('normalizes positioning under ancestor zoom while preserving enlarged content and runtime changes', async () => {
+  const { container } = render(<div style={{ zoom: 1.5 }}><ThemeProvider style={{ zoom: 2 }}><TimelineLegend compact items={items} /></ThemeProvider></div>);
+  fireEvent.click(screen.getByRole('button', { name: '有输出' }));
+  const dialog = await screen.findByRole('dialog', { name: '有输出规则' });
+  await waitFor(() => expect(dialog.style.zoom).toBe('3'));
+  expect(Number(dialog.parentElement?.style.zoom)).toBeCloseTo(1 / 3);
+  const theme = container.querySelector<HTMLElement>('.rhine-theme')!;
+  theme.style.zoom = '1';
+  await waitFor(() => expect(dialog.style.zoom).toBe('1.5'));
+  expect(Number(dialog.parentElement?.style.zoom)).toBeCloseTo(1 / 1.5);
+});