@linhey/rhine-design 0.9.0 → 0.10.0

package/scripts/check-compact-layouts.js

@@ -0,0 +1,136 @@
+// Open a fixed production preview, then run with playwright-cli run-code --filename.
+// CSS zoom evidence is separate from native browser-menu zoom.
+async page => {
+  page.setDefaultTimeout(10000);
+  const origin = new URL(page.url()).origin;
+  const failures = [], errors = [], counts = { drawer: 0, date: 0, table: 0, account: 0 };
+  page.on('pageerror', error => errors.push(String(error)));
+  const check = (pass, context) => { if (!pass) failures.push(context); };
+  const open = async (section, theme, width, zoom) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto(`${origin}/?theme=${theme}#${section}`);
+    await page.locator(`#${section}`).waitFor();
+    await page.evaluate(value => { document.documentElement.style.zoom = String(value); }, zoom);
+  };
+  const editLastSegment = async (input, context) => {
+    await input.fill('2026-10-24');
+    await input.focus();
+    // The preview's zh-CN native date order is year/month/day.
+    await page.keyboard.press('ArrowRight');
+    await page.keyboard.press('ArrowRight');
+    await page.keyboard.press('ArrowUp');
+    check(await input.inputValue() === '2026-10-25', { ...context, kind: 'edit-last-segment' });
+    await page.keyboard.press('ArrowDown');
+    check(await input.inputValue() === '2026-10-24', { ...context, kind: 'restore-last-segment' });
+  };
+  const measureDate = async (input, context) => {
+    const dimensions = await input.evaluate(e => {
+      const style = getComputedStyle(e);
+      return { width: parseFloat(style.width), height: parseFloat(style.height), font: parseFloat(style.fontSize), padding: parseFloat(style.paddingLeft) };
+    });
+    check(dimensions.width >= 148 && dimensions.height >= 44 && dimensions.font >= 14, { ...context, kind: 'date-dimensions', dimensions });
+  };
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) {
+    for (const width of [400, 520, 880]) for (const zoom of [1, 2]) {
+      const context = { theme, width, zoom };
+      await open('list-filter-bar', theme, width, zoom);
+      const bar = page.getByRole('group', { name: '录制会话筛选', exact: true });
+      const trigger = bar.getByRole('button', { name: /^更多筛选/ });
+      await trigger.click();
+      const dialog = page.getByRole('dialog', { name: '录制会话筛选', exact: true });
+      await dialog.evaluate(e => Promise.all(e.getAnimations().map(a => a.finished)));
+      const start = dialog.getByLabel('开始日期', { exact: true });
+      await measureDate(start, context);
+      await editLastSegment(start, context);
+      await dialog.getByLabel('结束日期', { exact: true }).fill('2026-10-26');
+      await dialog.getByRole('button', { name: '清空日期', exact: true }).click();
+      check(await start.inputValue() === '', { ...context, kind: 'clear-range' });
+      await dialog.getByRole('checkbox', { name: '只看已审查' }).check();
+      await start.focus(); await page.keyboard.type('2');
+      check(await start.getAttribute('aria-invalid') === 'true', { ...context, kind: 'incomplete-date' });
+      await dialog.getByRole('button', { name: '重置筛选', exact: true }).click();
+      check(await start.evaluate(e => !e.value && !e.validity.badInput && e.getAttribute('aria-invalid') !== 'true'), { ...context, kind: 'reset-draft' });
+      if (width === 400 && zoom === 2) {
+        await start.fill('2026-10-24');
+        await start.screenshot({ path: `output/playwright/issues-23-25/drawer-${theme}.png` });
+      }
+      await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'detached' });
+      await page.waitForFunction(e => e === document.activeElement, await trigger.elementHandle());
+      counts.drawer++;
+
+      await open('spacing', theme, width, zoom);
+      const surface = page.locator('#spacing .rhine-surface--padding-none');
+      check(await surface.evaluate(e => getComputedStyle(e).padding === '0px' && getComputedStyle(e).overflow !== 'hidden'), { ...context, kind: 'surface-padding' });
+      check(await surface.locator('td').first().evaluate(e => parseFloat(getComputedStyle(e).paddingLeft) > 0), { ...context, kind: 'table-cell-spacing' });
+      const selection = surface.getByRole('checkbox').nth(1);
+      await selection.uncheck(); await selection.check();
+      await selection.focus(); await page.keyboard.press('Space');
+      check(!await selection.isChecked(), { ...context, kind: 'table-keyboard-selection' });
+      check(await surface.evaluate(e => e.getBoundingClientRect().right <= innerWidth + 1), { ...context, kind: 'table-bounds' });
+      const scroll = surface.getByRole('region', { name: /可横向滚动/ });
+      await scroll.focus();
+      await scroll.evaluate(e => { e.scrollLeft = e.scrollWidth; });
+      check(await scroll.evaluate(e => e === document.activeElement && e.querySelector('tbody tr td:last-child').getBoundingClientRect().right <= e.getBoundingClientRect().right + 1), { ...context, kind: 'table-last-column-reachable' });
+      await scroll.evaluate(e => { e.scrollLeft = 0; });
+      if (width === 400 && zoom === 2) await surface.screenshot({ path: `output/playwright/issues-23-25/table-${theme}.png` });
+      counts.table++;
+
+      await open('compact-account', theme, width, 1);
+      await page.getByRole('combobox', { name: '样机宽度' }).selectOption(String(width));
+      await page.getByRole('combobox', { name: '内容缩放' }).selectOption(String(zoom));
+      for (const state of ['normal', 'zero', 'unknown', 'long']) {
+        await page.getByRole('combobox', { name: '账号读数' }).selectOption(state);
+        const card = page.getByTestId('compact-account-card');
+        const layout = await card.evaluate(e => {
+          const bars = e.querySelector('.rhine-timeline__bars').getBoundingClientRect();
+          const legend = e.querySelector('.rhine-timeline__legend').getBoundingClientRect();
+          const slider = e.querySelector('input[type=range]');
+          const pairs = [...e.querySelectorAll('.compact-gallery-fact-pair')];
+          return {
+            gap: legend.top - bars.bottom,
+            sliderHeight: parseFloat(getComputedStyle(slider).height),
+            triggerHeight: parseFloat(getComputedStyle(e.querySelector('.rhine-timeline__legend-trigger')).height),
+            aligned: [...pairs[0].children].every((child, i) => Math.abs(child.getBoundingClientRect().left - pairs[1].children[i].getBoundingClientRect().left) < 1),
+            overflow: [...e.querySelectorAll('.compact-gallery-facts, .compact-gallery-facts span')].some(node => node.scrollWidth > node.clientWidth + 1),
+          };
+        });
+        check(Math.abs(layout.gap / zoom - 12) < 1 && layout.sliderHeight >= 44 && layout.triggerHeight >= 44 && layout.aligned && !layout.overflow, { ...context, state, kind: 'account-layout', layout });
+        if (state === 'normal') {
+          const slider = card.getByRole('slider');
+          await slider.focus(); await page.keyboard.press('ArrowRight');
+          const detail = page.getByRole('dialog', { name: /时段详情$/ });
+          await detail.waitFor(); await page.keyboard.press('Escape'); await detail.waitFor({ state: 'detached' });
+          await page.getByRole('combobox', { name: '账号读数' }).focus();
+          await slider.hover(); await detail.waitFor();
+          await page.mouse.move(0, 0); await detail.waitFor({ state: 'detached' });
+          const legend = card.getByRole('button', { name: '有输出', exact: true });
+          await legend.click();
+          const rule = page.getByRole('dialog', { name: '有输出规则', exact: true });
+          await rule.waitFor(); await page.keyboard.press('Escape'); await rule.waitFor({ state: 'detached' });
+        }
+        if (width === 400 && zoom === 2 && state === 'long') await card.screenshot({ path: `output/playwright/issues-23-25/account-${theme}.png` });
+        counts.account++;
+      }
+    }
+    // Leave room for the gallery sidebar: max-width must not clamp the 280px fixture.
+    await open('date-range-filter', theme, 1280, 2);
+    for (const containerWidth of [150, 200, 280]) {
+      await page.getByRole('combobox', { name: '日期容器宽度' }).selectOption(String(containerWidth));
+      const context = { theme, containerWidth, zoom: 2 };
+      const range = page.getByRole('group', { name: '局部日期', exact: true });
+      check(await range.evaluate((e, expected) => Math.abs(parseFloat(getComputedStyle(e.parentElement).width) - expected) < 1, containerWidth), { ...context, kind: 'actual-container-width' });
+      const start = range.getByLabel('开始日期', { exact: true });
+      const single = page.getByLabel('独立日期', { exact: true });
+      await measureDate(start, context); await measureDate(single, context);
+      await editLastSegment(start, context); await editLastSegment(single, context);
+      await single.fill(''); check(await single.inputValue() === '', { ...context, kind: 'clear-single' });
+      await range.getByRole('button', { name: '清空日期', exact: true }).click();
+      await page.getByRole('button', { name: '重置示例日期' }).click();
+      check(await start.inputValue() === '2026-10-24' && await single.inputValue() === '2026-10-24', { ...context, kind: 'reset-example' });
+      check(await page.getByRole('button', { name: '重置示例日期' }).evaluate(e => e === document.activeElement), { ...context, kind: 'reset-example-focus' });
+      await single.screenshot({ path: `output/playwright/issues-23-25/single-${theme}-${containerWidth}.png` });
+      counts.date++;
+    }
+  }
+  return { pass: !failures.length && !errors.length, counts, failures, errors, scope: 'Chromium; real gallery, CSS zoom, native keyboard editing. Inspect date screenshots for full fragments/calendar visibility.' };
+}

package/scripts/check-component-typography.js

@@ -0,0 +1,76 @@
+// Run against the production preview with playwright-cli run-code --filename.
+async page => {
+  page.setDefaultTimeout(10000);
+  const origin = new URL(page.url()).origin;
+  const failures = [], errors = [];
+  let scenarios = 0;
+  page.on('pageerror', error => errors.push(String(error)));
+  const check = (pass, context) => { if (!pass) failures.push(context); };
+  const typography = async (selector, size, leading, weight, context) => {
+    const actual = await page.locator(selector).first().evaluate(e => {
+      const s = getComputedStyle(e);
+      return { size:s.fontSize, leading:s.lineHeight, weight:s.fontWeight };
+    });
+    check(actual.size === `${size}px` && actual.leading === `${leading}px` && actual.weight === String(weight), { ...context, selector, actual, expected:{size,leading,weight} });
+  };
+  const wrappedText = async (selector, context) => {
+    const actual = await page.locator(selector).evaluate(e => {
+      const range = document.createRange();
+      range.selectNodeContents(e);
+      const lines = Array.from(range.getClientRects());
+      const box = e.getBoundingClientRect();
+      return {
+        lineCount:new Set(lines.map(r => Math.round(r.top))).size,
+        unclipped:e.scrollWidth <= e.clientWidth+1 && e.scrollHeight <= e.clientHeight+1 &&
+          lines.every(r => r.left >= box.left-1 && r.right <= box.right+1 && r.top >= box.top-1 && r.bottom <= box.bottom+1)
+      };
+    });
+    check(actual.lineCount > 1 && actual.unclipped, {...context,selector,kind:'text-wrap',actual});
+  };
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) {
+    for (const width of [400,520,880]) for (const zoom of [1,2]) {
+      const context = {theme,width,zoom}, heading = theme === 'neo-brutalism' ? 750 : 600;
+      await page.setViewportSize({width,height:1000});
+      await page.goto(`${origin}/?theme=${theme}&proof=${Date.now()}#component-typography`);
+      await page.getByRole('heading',{name:'公共组件文字配对',exact:true}).waitFor();
+      await page.evaluate(value => { document.documentElement.style.zoom=String(value); },zoom);
+      await page.getByRole('button',{name:'模拟复制',exact:true}).click();
+      await page.locator('.rhine-copy>[role]').filter({hasText:'已复制'}).waitFor();
+      await page.locator('.rhine-theme-preview[data-state=error]').waitFor();
+      for (const inherited of [false,true]) {
+        if (inherited) await page.locator('.rhine-theme').evaluate(e => { e.style.lineHeight='38px'; e.style.fontWeight='700'; });
+        const state = {...context,inherited};
+        await typography('.rhine-empty strong',16,24,heading,state);
+        await typography('.rhine-error-summary h3',16,24,heading,state);
+        for (const selector of ['.rhine-copy>[role]','.rhine-steps small','.rhine-fieldset>p','.rhine-theme-option__status','.rhine-theme-preview']) await typography(selector,12,18,400,state);
+        await typography('.rhine-media-card__status',14,22,400,state);
+      }
+      await page.locator('.rhine-theme').evaluate(e => { e.style.lineHeight=''; e.style.fontWeight=''; });
+      check(await page.locator('.rhine-empty').evaluate(e => e.scrollWidth <= e.clientWidth+1), {...context,kind:'empty-wrap'});
+      if (width === 400 && zoom === 2) await wrappedText('.rhine-empty strong',context);
+      if (width === 400 && zoom === 2) await page.locator('.rhine-empty').screenshot({path:`output/playwright/issue-31/empty-${theme}.png`});
+      const opener=page.getByRole('button',{name:'打开媒体示例',exact:true});
+      await opener.click();
+      const dialog=page.getByRole('dialog');
+      await dialog.waitFor();
+      await typography('.rhine-media-viewer__header p',12,18,400,context);
+      await typography('.rhine-media-viewer__header h2',18,26,heading,context);
+      await typography('.rhine-media-viewer__actions label',12,18,400,context);
+      if (width === 400 && zoom === 2) await wrappedText('.rhine-media-viewer__header p',context);
+      check(await dialog.evaluate(e => e.scrollWidth <= e.clientWidth+1), {...context,kind:'viewer-wrap'});
+      check(await dialog.locator('button,select').evaluateAll((elements, zoom) => elements.every(e => e.getBoundingClientRect().height/zoom >= 44),zoom), {...context,kind:'hit-targets'});
+      await dialog.getByRole('button',{name:'下一项',exact:true}).click();
+      check(await dialog.getByRole('heading',{name:'下一项合成媒体',exact:true}).isVisible(), {...context,kind:'next'});
+      if (width === 400 && zoom === 2) await page.locator('.rhine-media-viewer__header').screenshot({path:`output/playwright/issue-31/media-${theme}.png`});
+      const close=dialog.getByRole('button',{name:'关闭媒体查看器',exact:true});
+      await close.scrollIntoViewIfNeeded();
+      check(await close.evaluate(e => { const r=e.getBoundingClientRect(); return r.top >= 0 && r.bottom <= innerHeight && r.left >= 0 && r.right <= innerWidth; }), {...context,kind:'close-visible'});
+      await close.click(); await dialog.waitFor({state:'detached'});
+      await page.waitForFunction(() => document.activeElement?.textContent === '打开媒体示例');
+      await opener.click(); await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.waitForFunction(() => document.activeElement?.textContent === '打开媒体示例');
+      scenarios++;
+    }
+  }
+  return {pass:!failures.length&&!errors.length,scenarios,failures,errors,scope:'Chromium, three themes, 400/520/880px, CSS zoom 100/200%; synthetic content and inherited-style stress. Native menu zoom is not covered.'};
+}

package/scripts/check-dense-filters.js

@@ -0,0 +1,60 @@
+// Run against a production preview: playwright-cli run-code --filename=scripts/check-dense-filters.js
+async page => {
+  page.setDefaultTimeout(10000);
+  const origin = new URL(page.url()).origin;
+  const failures = [], errors = [];
+  let scenarios = 0;
+  page.on('pageerror', error => errors.push(String(error)));
+  const check = (pass, context) => { if (!pass) failures.push(context); };
+  for (const theme of ['rhine', 'arknights', 'neo-brutalism']) {
+    for (const width of [400, 520, 880]) for (const zoom of [1, 2]) {
+      const context = { theme, width, zoom };
+      await page.setViewportSize({ width, height: 1000 });
+      await page.goto(`${origin}/?theme=${theme}&proof=${Date.now()}-${scenarios}#compact-filters`);
+      await page.getByRole('heading', { name: '密集筛选控件', exact: true }).waitFor();
+      await page.evaluate(value => { document.documentElement.style.zoom = String(value); }, zoom);
+      const tags = page.getByRole('list', { name: '部门已选项' });
+      check(await tags.getByRole('listitem').count() === 2, { ...context, kind: 'bounded-tags' });
+      check(await tags.evaluate(e => e.scrollWidth <= e.clientWidth + 1 && [...e.children].every(li => li.scrollWidth <= li.clientWidth + 1)), { ...context, kind: 'tags-fit' });
+      await page.getByRole('button', { name: '展开已选项' }).click();
+      check(await tags.getByRole('listitem').count() === 90 && await tags.evaluate(e => e.clientHeight <= 224 && e.scrollHeight > e.clientHeight), { ...context, kind: 'bounded-expansion' });
+      await page.getByRole('button', { name: '移除合成部门 90', exact: true }).click();
+      check(await page.getByRole('combobox', { name: '部门', exact: true }).evaluate(e => document.activeElement === e), { ...context, kind: 'remove-focus' });
+      await page.getByRole('button', { name: '清空部门', exact: true }).click();
+      await page.getByRole('button', { name: '全选部门', exact: true }).click();
+      check(await tags.getByRole('listitem').count() === 2, { ...context, kind: 'reset-expansion' });
+      const range = page.getByRole('group', { name: '日期区间', exact: true });
+      const start = range.getByLabel('开始日期', { exact: true });
+      await start.fill('2026-10-01'); await start.focus();
+      await page.keyboard.press('ArrowRight'); await page.keyboard.press('ArrowRight'); await page.keyboard.press('ArrowUp');
+      check(await start.inputValue() === '2026-10-02', { ...context, kind: 'native-last-segment' });
+      check(await range.evaluate(e => e.scrollWidth <= e.clientWidth + 1), { ...context, kind: 'date-fit' });
+      if (width === 400 && zoom === 2) await range.screenshot({ path: `output/playwright/issue-27/date-${theme}.png` });
+      const trigger = page.getByRole('button', { name: '更多筛选', exact: true });
+      await trigger.click();
+      const dialog = page.getByRole('dialog', { name: '紧凑筛选示例', exact: true });
+      await dialog.evaluate(e => Promise.all(e.getAnimations().map(a => a.finished)));
+      check(!await dialog.getAttribute('aria-describedby') && await dialog.locator('.rhine-list-filter-bar__feedback').count() === 0, { ...context, kind: 'omitted-feedback' });
+      const segments = dialog.locator('fieldset.rhine-segmented');
+      check(await segments.evaluate(e => {
+        const items = [...e.querySelectorAll('label')].map(label => ({ label: label.getBoundingClientRect(), span: label.querySelector('span').getBoundingClientRect() }));
+        return items.every(item => Math.abs(item.label.width - items[0].label.width) < 1 && Math.abs(item.label.width - item.span.width) < 1 && Math.abs(item.label.height - item.span.height) < 1);
+      }), { ...context, kind: 'equal-segment-backgrounds' });
+      await segments.getByRole('radio', { name: '今天', exact: true }).focus();
+      await page.keyboard.press('ArrowRight');
+      check(await segments.getByRole('radio', { name: '昨天', exact: true }).isChecked(), { ...context, kind: 'native-radio-keyboard' });
+      check(await dialog.evaluate(e => e.scrollWidth <= e.clientWidth + 1), { ...context, kind: 'drawer-fit' });
+      await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'detached' });
+      await trigger.waitFor();
+      await page.waitForFunction(() => document.activeElement?.textContent?.includes('更多筛选'));
+      for (const [state, text] of [['加载', '正在更新结果…'], ['失败', '暂时无法更新合成结果，请重试。']]) {
+        await page.getByRole('button', { name: state, exact: true }).click();
+        await trigger.click();
+        check(await dialog.getByText(text, { exact: true }).isVisible(), { ...context, kind: `feedback-${state}` });
+        await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'detached' });
+      }
+      scenarios++;
+    }
+  }
+  return { pass: failures.length === 0 && errors.length === 0, scenarios, failures, errors, scope: 'Chromium, three themes, 400/520/880px, 100/200% CSS zoom; synthetic data only. Native menu zoom is not covered.' };
+}

package/scripts/check-filter-native-date.js

@@ -1,5 +1,5 @@
 async page => {
-  await page.goto(`http://127.0.0.1:18484/?fixture=list-filters&theme=neo-brutalism&proof=${Date.now()}#list-filter-bar`);
+  await page.goto(`${new URL(page.url()).origin}/?fixture=list-filters&theme=neo-brutalism&proof=${Date.now()}#list-filter-bar`);
   const checks = [];
   const check = (name, pass, evidence = {}) => checks.push({ name, pass: Boolean(pass), ...evidence });
   await page.getByRole('group', { name: '录制会话筛选', exact: true }).getByRole('button', { name: /^更多筛选/ }).click();

package/skills/rhine-design/SKILL.md

@@ -2,7 +2,7 @@
 name: rhine-design
 description: Use Rhine Design components and specifications to design, implement, or review React UI, typography, themes, and motion. Apply when a project uses Rhine Design or the user requests its visual language or component system.
 metadata:
-  version: "0.8.0"
+  version: "0.10.0"
 ---
 
 # Rhine Design · 莱茵设计
@@ -13,7 +13,7 @@ Use the installed version's components and contracts to build consistent interfa
 
 ## Locate the matching source
 
-Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.8.0, including OrbitBackdrop, application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; application APIs require 0.5.0 and OrbitBackdrop requires 0.6.0. Check installed exports before adoption.
+Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.10.0, including compact filter controls, Checkbox row layout, explicit component typography, ListFilterBar, Surface padding, narrow date layouts, OrbitBackdrop, application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; application APIs require 0.5.0 and OrbitBackdrop requires 0.6.0. Check installed exports before adoption.
 
 Find the package in the host's dependencies, normally `node_modules/@linhey/rhine-design/`, or its registered source checkout. Verify `package.json` name/version before using the paths below. Paths in references are relative to that package root, not the copied skill directory. Read installed types and source when versions differ; do not infer a new API from this skill. If the package is unavailable, use the task's supplied design sources and identify the missing implementation evidence.
 
@@ -56,6 +56,6 @@ Required issue content:
 - Host state determines data, selection and operation outcomes. Search and pagination remain host/server responsibilities; busy indicators never imply success.
 - For multi-field failures, preserve input and focus a summary only after failed submission; links return to fields without changing routing. Use SideNav/Breadcrumbs/Steps only when exported by the installed source.
 - Monitoring shows units, freshness and stale/unknown states; errors must not rely on color, flashing or transient toasts.
-- Design from the user's current task: keep identity, available actions, results and decision-relevant consequences; remove duplicate state labels and implementation prose. Reveal history on demand. Inside an existing Surface prefer borderless read-only summaries and paired facts; never compress by shrinking business text, cropping values, hiding unknown/error states or merging distinct costs/expiry meanings. See `docs/COMPACT_ACCOUNT_PATTERNS.md` when present; its new APIs are source candidates, not npm 0.6.0 features.
+- Design from the user's current task: keep identity, available actions, results and decision-relevant consequences; remove duplicate state labels and implementation prose. Reveal history on demand. Inside an existing Surface prefer borderless read-only summaries and paired facts; never compress by shrinking business text, cropping values, hiding unknown/error states or merging distinct costs/expiry meanings. See `docs/COMPACT_ACCOUNT_PATTERNS.md` when present; its base APIs require 0.8.0, and the spacing fixes and Surface padding option require 0.9.1.
 - Motion explains a change. Respect reduced motion, cancellation and replay; startup decoration never blocks real readiness. Preview-only experiments are not exported components.
 - Keep independent release boundaries: do not change unrelated products or publish packages merely because this skill was invoked.

package/skills/rhine-design/references/API_MAP.md

@@ -4,12 +4,14 @@ All paths are relative to the matching package root. `package.json` exports, `co
 
 | Exports | Source |
 | --- | --- |
+| Checkbox `layout="row"`, CheckboxProps（自 0.10.0） | `components/Forms.tsx`、`docs/CHECKBOX_ROWS.md`；整行双行多选，默认 form 保持兼容；npm 0.9.1 不含此选项 |
 | TrendChart, StackedBar；StatusTimeline.detail（0.5.0） | `components/Charts.tsx`、`components/StatusTimeline.tsx`；`docs/APPLICATION_COMPONENTS.md`，未知不补零；键盘逐点查看、按ID受控高亮/详情、valueFormatter |
 | Background, AppShell（0.5.0）；AppShellToggle（0.8.0） | `components/Background.tsx`、`components/AppShell.tsx`；`docs/APPLICATION_COMPONENTS.md`；桌面open与临时drawerOpen独立，断点为容器CSS布局宽度 |
 | AppShell.contentHeader（0.8.0） | `components/AppShell.tsx`；`docs/APPLICATION_COMPONENTS.md`；正文列常驻导航插槽，与正文滚动区分离，组合 AppShellToggle / Inline / 标题与上下文操作 |
 | MediaCard, MediaViewer（0.5.0） | `components/Media.tsx`；中性画布，不嵌套主题 |
 | Media 主题重设计（0.8.0） | `components/media-parity.css`；`docs/APPLICATION_COMPONENTS.md`；卡片、标签与查看器操作/信息栏随宿主主题，仅媒体画布中性；选择与重试独立 |
 | DateField, DateRangePicker, NumberField, TreeSelect, RemoteMultiSelect（0.5.0） | `components/AdvancedForms.tsx`；请求、时区和查询由宿主负责；只读/校验/多选键盘及AntD/MUI保留差异见 `docs/ANTD_MUI_AUDIT.md` |
+| 紧凑筛选（自 0.10.0，npm 0.9.1 不含） | `docs/COMPACT_FILTER_CONTROLS.md`；SegmentedControl `fullWidth`、DateRangePicker `compact`、RemoteMultiSelect `maxVisibleTags`、ListFilterBar `drawerDescription` / `drawerResult`；保持默认兼容、完整选择值及加载/错误反馈 |
 | Date presets + confirmed custom range（组合，无新增导出） | `docs/DATE_RANGE_FILTER.md`、`preview/DateRangeFilterGallery.tsx`；复用 SegmentedControl + Button + Popover + DateRangePicker，宿主负责时区、预设和查询 |
 | ThemeProvider, useTheme, themes, ThemeName, ThemeProviderProps (0.4.0；`@linhey/rhine-design/theme`) | `components/theme.tsx`；契约 `docs/THEMING.md` |
 | OrbitBackdrop, OrbitBackdropProps (0.6.0) | `components/OrbitBackdrop.tsx`；契约 `docs/ORBIT_BACKDROP.md`；`components/orbitRenderer.ts` 为内部绘制实现 |
@@ -30,7 +32,7 @@ All paths are relative to the matching package root. `package.json` exports, `co
 | SideNav, Breadcrumbs, Steps (0.4.0) | `components/Navigation.tsx` |
 | Fieldset, ErrorSummary (0.4.0) | `components/FormWorkflow.tsx` |
 | Toast | `components/Toast.tsx` |
-| Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState | `components/components.tsx` |
+| Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState | `components/components.tsx`；Surface 的 `padding="none"` 仅取消表格容器外围内距，默认不变；此选项自 0.9.1 提供，见 `CHANGELOG.md` |
 
 Primary contracts: `components/README.md` and `components/COMMON_COMPONENTS.md`. Find behavioral evidence in `tests/` and composition examples in `preview/`.
 

package/skills/rhine-design/references/integration.md

@@ -2,7 +2,7 @@
 
 ## Supported baseline
 
-Rhine Design 0.8.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
+Rhine Design 0.10.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
 
 ```tsx
 import { Button, Surface, Text } from '@linhey/rhine-design';

package/tests/CheckboxRow.test.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Checkbox, type CheckboxProps } from '../components';
+
+describe('Checkbox row layout', () => {
+  it('toggles once when the controlled checkbox description is clicked', () => {
+    const change = vi.fn();
+    function Example() {
+      const [checked, setChecked] = useState(false);
+      return <Checkbox layout="row" label="项目 A" hint="内存卡 · 14 项" checked={checked} onChange={event => { setChecked(event.target.checked); change(event.target.checked); }} />;
+    }
+    render(<Example />);
+    const input = screen.getByRole('checkbox', { name: '项目 A' });
+    expect(input).toHaveAccessibleDescription('内存卡 · 14 项');
+    fireEvent.click(screen.getByText('内存卡 · 14 项'));
+    expect(input).toBeChecked();
+    expect(change).toHaveBeenCalledExactlyOnceWith(true);
+  });
+  it('keeps mixed and disabled states on the native input', () => {
+    const change = vi.fn();
+    const { rerender } = render(<Checkbox layout="row" label="全部" hint="三个项目" indeterminate disabled onChange={change} />);
+    expect(screen.getByRole('checkbox')).toBePartiallyChecked();
+    fireEvent.click(screen.getByText('三个项目'));
+    expect(change).not.toHaveBeenCalled();
+    rerender(<Checkbox layout="row" label="全部" checked disabled onChange={change} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+    expect(screen.getByRole('checkbox')).not.toBePartiallyChecked();
+  });
+  it('preserves native form submission and reset for uncontrolled selection', () => {
+    render(<form aria-label="项目"><Checkbox layout="row" label="项目 A" name="source" value="a" defaultChecked /><button type="reset">重置</button></form>);
+    const form = screen.getByRole('form') as HTMLFormElement;
+    expect(new FormData(form).getAll('source')).toEqual(['a']);
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(new FormData(form).getAll('source')).toEqual([]);
+    fireEvent.click(screen.getByRole('button', { name: '重置' }));
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  it('preserves caller accessible names and combines descriptions', () => {
+    const props: CheckboxProps = { layout: 'row', label: '名称', hint: '说明', 'aria-label': '自定义名称', 'aria-describedby': 'external' };
+    render(<><span id="external">附加信息</span><Checkbox {...props} /></>);
+    expect(screen.getByRole('checkbox', { name: '自定义名称' })).toHaveAccessibleDescription('附加信息 说明');
+  });
+  it('keeps the default form hint outside its original label', () => {
+    const change = vi.fn();
+    render(<Checkbox label="表单字段" hint="原布局" onChange={change} />);
+    expect(screen.getByText('原布局').closest('label')).toBeNull();
+    fireEvent.click(screen.getByText('原布局'));
+    expect(change).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByText('表单字段'));
+    expect(change).toHaveBeenCalledOnce();
+  });
+});

package/tests/CompactAccountGallery.test.tsx

@@ -19,7 +19,8 @@ describe('compact account composition', () => {
     view.rerender(<div className="rhine-theme"><CompactAccountExample state="unknown" /></div>);
     expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
     expect(screen.getByText('7D 剩余 — · 额度暂不可用')).toBeVisible();
-    expect(screen.getByText('历史记录不完整，仅展示已确认的时段。')).toBeVisible();
+    expect(screen.getByText(/10\/23 00:00 – 10\/24 00:00 · 上海/)).toBeVisible();
+    expect(screen.getByText(/历史记录不完整，仅展示已确认的时段。/)).toBeVisible();
     expect(within(screen.getByTestId('compact-account-facts')).getAllByText('—')).toHaveLength(5);
     view.rerender(<div className="rhine-theme"><CompactAccountExample state="long" /></div>);
     expect(screen.getByText('到期')).toBeVisible();

package/tests/CompactFilterBar.test.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ListFilterBar, SegmentedControl, Select } from '../components';
+
+const field = { id: 'state', label: '状态', control: <Select label="状态" defaultValue="all"><option value="all">全部</option></Select> };
+
+describe('compact filter presentation', () => {
+  it('omits redundant drawer copy while keeping pending and error feedback', async () => {
+    const { rerender } = render(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={null} drawerResult={null} />);
+    fireEvent.click(screen.getByRole('button', { name: '更多筛选' }));
+    const dialog = await screen.findByRole('dialog', { name: '记录筛选' });
+    expect(within(dialog).queryByText('更改后立即更新结果。')).not.toBeInTheDocument();
+    expect(within(dialog).queryByText('120 条结果')).not.toBeInTheDocument();
+    expect(dialog).not.toHaveAttribute('aria-describedby');
+    expect(document.querySelectorAll('.rhine-list-filter-bar__feedback')).toHaveLength(1);
+    rerender(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={null} drawerResult={null} pending error="连接暂时不可用" />);
+    expect(within(dialog).getByText('正在更新结果…')).toBeInTheDocument();
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('连接暂时不可用');
+  });
+
+  it('preserves legacy drawer feedback and supports distinct drawer content', async () => {
+    const { rerender } = render(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" />);
+    fireEvent.click(screen.getByRole('button', { name: '更多筛选' }));
+    const dialog = await screen.findByRole('dialog', { name: '记录筛选' });
+    expect(within(dialog).getByText('120 条结果')).toBeInTheDocument();
+    expect(dialog).toHaveAccessibleDescription('更改后立即更新结果。');
+    rerender(<ListFilterBar label="记录筛选" filters={[field]} result="120 条结果" drawerDescription={<span>按需选择范围</span>} drawerResult="已选 3 项" />);
+    expect(dialog).toHaveAccessibleDescription('按需选择范围');
+    expect(within(dialog).getByText('已选 3 项')).toBeInTheDocument();
+    expect(within(dialog).queryByText('120 条结果')).not.toBeInTheDocument();
+  });
+
+  it('full-width segments remain controlled native radios with disabled state', () => {
+    const onChange = vi.fn();
+    function Example() {
+      const [value, setValue] = useState('today');
+      return <SegmentedControl fullWidth label="时间快捷" value={value} onValueChange={next => { setValue(next); onChange(next); }} items={[
+        { value: 'today', label: '今天' }, { value: 'yesterday', label: '昨天' }, { value: 'week', label: '本周', disabled: true },
+      ]} />;
+    }
+    render(<Example />);
+    expect(screen.getByRole('group', { name: '时间快捷' })).toHaveClass('rhine-segmented--full-width');
+    fireEvent.click(screen.getByRole('radio', { name: '昨天' }));
+    expect(screen.getByRole('radio', { name: '昨天' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: '今天' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: '本周' })).toBeDisabled();
+    expect(onChange).toHaveBeenCalledExactlyOnceWith('yesterday');
+  });
+});

package/tests/DenseFilterControls.test.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { DateRangePicker, RemoteMultiSelect, type Choice } from '../components';
+
+describe('compact date range', () => {
+  it('keeps both native fields and range validation inside one named group', () => {
+    const validation = vi.fn();
+    function Example() {
+      const [value, setValue] = useState({ start: '2026-10-01', end: '2026-10-24' });
+      return <DateRangePicker compact label="日期范围" value={value} onValueChange={setValue} min="2026-01-01" max="2026-12-31" clearable={false} required onValidationChange={validation} />;
+    }
+    render(<Example />);
+    const group = screen.getByRole('group', { name: '日期范围' });
+    expect(group).toHaveClass('rhine-date-range--compact');
+    expect(within(group).getByLabelText('开始日期')).toBeRequired();
+    expect(within(group).getByLabelText('结束日期')).toHaveAttribute('type', 'date');
+    fireEvent.change(screen.getByLabelText('结束日期'), { target: { value: '2026-09-30' } });
+    expect(validation).toHaveBeenLastCalledWith('结束日期不能早于开始日期。');
+    fireEvent.change(screen.getByLabelText('结束日期'), { target: { value: '2026-10-24' } });
+    expect(validation).toHaveBeenLastCalledWith(null);
+    fireEvent.change(screen.getByLabelText('开始日期'), { target: { value: '2025-12-31' } });
+    expect(validation).toHaveBeenLastCalledWith('日期不能早于 2026-01-01。');
+  });
+
+  it('preserves readonly and external value replacement in compact mode', () => {
+    const change = vi.fn();
+    const { rerender } = render(<DateRangePicker compact label="范围" value={{ start: '2026-10-01', end: '2026-10-24' }} onValueChange={change} readOnly />);
+    fireEvent.change(screen.getByLabelText('开始日期'), { target: { value: '2026-10-02' } });
+    expect(change).not.toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: '清空日期' })).toBeDisabled();
+    rerender(<DateRangePicker compact label="范围" value={{ start: '2026-11-01', end: '2026-11-24' }} onValueChange={change} readOnly />);
+    expect(screen.getByLabelText('开始日期')).toHaveValue('2026-11-01');
+  });
+});
+
+describe('bounded multi-select tags', () => {
+  const choices: Choice[] = Array.from({ length: 100 }, (_, i) => ({ value: String(i), label: `合成部门 ${i + 1}`, disabled: i === 0 }));
+  function Example() {
+    const [value, setValue] = useState(choices.slice(0, 90));
+    const [query, setQuery] = useState('');
+    return <RemoteMultiSelect label="部门" query={query} onQueryChange={setQuery} options={choices} value={value} onValueChange={setValue} maxVisibleTags={2} name="department" />;
+  }
+  it('shows a bounded summary without dropping hidden selections and expands for removal', () => {
+    render(<Example />);
+    const tags = screen.getByRole('list', { name: '部门已选项' });
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByText('已选 90 项')).toBeInTheDocument();
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(90);
+    fireEvent.click(screen.getByRole('button', { name: '展开已选项' }));
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(90);
+    fireEvent.click(screen.getByRole('button', { name: '移除合成部门 90' }));
+    expect(screen.getByText('已选 89 项')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    fireEvent.click(screen.getByRole('button', { name: '收起已选项' }));
+    expect(within(tags).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: '移除合成部门 1' })).toBeDisabled();
+  });
+  it('retains hidden-item keyboard removal and locked selections when clearing', () => {
+    render(<Example />);
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Backspace' });
+    expect(screen.getByText('已选 89 项')).toBeInTheDocument();
+    expect(document.querySelector('input[type=hidden][value="89"]')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '清空选择' }));
+    expect(screen.getByText('已选 1 项')).toBeInTheDocument();
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(1);
+    expect(screen.queryByRole('button', { name: '展开已选项' })).not.toBeInTheDocument();
+  });
+  it('collapses a new selection after the host clears an expanded selection', () => {
+    const props = { label: '部门', query: '', onQueryChange: vi.fn(), options: choices, onValueChange: vi.fn(), maxVisibleTags: 2, name: 'department' };
+    const { rerender } = render(<RemoteMultiSelect {...props} value={choices.slice(0, 90)} />);
+    fireEvent.click(screen.getByRole('button', { name: '展开已选项' }));
+    rerender(<RemoteMultiSelect {...props} value={[]} />);
+    rerender(<RemoteMultiSelect {...props} value={choices} />);
+    expect(within(screen.getByRole('list', { name: '部门已选项' })).getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: '展开已选项' })).toHaveAttribute('aria-expanded', 'false');
+    expect(document.querySelectorAll('input[type=hidden]')).toHaveLength(100);
+  });
+});

package/tests/DesignSystem.test.tsx

@@ -1,9 +1,20 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { Button, Disclosure, Logo, Progress, SegmentedControl, Select, SelectionCard, Tabs, TextField } from '../components';
+import { Button, Disclosure, Logo, Progress, SegmentedControl, Select, SelectionCard, Surface, Tabs, TextField } from '../components';
 
 describe('reusable design components', () => {
+  it('keeps Surface native attributes and default spacing when opting out of table container padding', () => {
+    const { rerender } = render(<Surface role="region" aria-label="表格" className="host-layout">内容</Surface>);
+    const surface = screen.getByRole('region', { name: '表格' });
+    expect(surface).toHaveClass('rhine-surface', 'host-layout');
+    expect(surface).not.toHaveClass('rhine-surface--padding-none');
+    rerender(<Surface role="region" aria-label="表格" className="host-layout" padding="none">内容</Surface>);
+    expect(surface).toHaveClass('rhine-surface--padding-none', 'host-layout');
+    expect(surface).not.toHaveAttribute('padding');
+    rerender(<Surface role="region" aria-label="表格" padding="default">内容</Surface>);
+    expect(surface).not.toHaveClass('rhine-surface--padding-none');
+  });
   it('uses the independent library identity and accepts a host wordmark', () => {
     const { rerender } = render(<Logo variant="lockup" />);
     expect(screen.getByRole('img', { name: 'Rhine Design' })).toHaveTextContent('Rhine Design');