@linhey/rhine-design 0.8.0 → 0.9.1

package/scripts/check-background-filters.js

@@ -0,0 +1,58 @@
+// Run against a fixed production preview on 18484 with playwright-cli run-code --filename.
+async page => {
+  const errors=[],failures=[]; let filterCases=0,orbitCases=0;
+  page.on('pageerror',e=>errors.push(String(e)));
+  const check=(ok,detail)=>{if(!ok) failures.push(detail);};
+  const horizontal=async root=>root.evaluate(e=>{const r=e.getBoundingClientRect();return r.left>=-1&&r.right<=innerWidth+1&&e.scrollWidth<=e.clientWidth+1;});
+  for(const theme of ['rhine','arknights','neo-brutalism']) for(const width of [400,520,880]) for(const zoom of [1,2]) {
+    await page.setViewportSize({width,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=list-filters&theme=${theme}&zoom=${zoom}`);
+    const bars=page.locator('.rhine-list-filter-bar');
+    for(let i=0;i<3;i++) {
+      const bar=bars.nth(i), trigger=bar.getByRole('button',{name:/^更多筛选/});
+      if(i<2) check(await bar.locator('.rhine-list-filter-bar__search label').evaluate(e=>{const r=e.getBoundingClientRect();return r.width>20&&r.height>10;}),{theme,width,zoom,i,kind:'visible-search-label'});
+      check(await bar.getByRole('combobox').count()===2,{theme,width,zoom,i,kind:'primary-limit'});
+      await trigger.click(); const dialog=page.getByRole('dialog');
+      await dialog.evaluate(e=>Promise.all(e.getAnimations().map(a=>a.finished)));
+      check(await horizontal(dialog),{theme,width,zoom,i,kind:'drawer-overflow'});
+      if(i<2) await dialog.getByRole('checkbox',{name:'只看已审查'}).check();
+      else await dialog.getByRole('combobox',{name:'统计范围'}).selectOption({label:'示例团队 / 跨部门体验与可访问性协作小组'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.waitForFunction(e=>e===document.activeElement,await trigger.elementHandle());
+      check(await trigger.evaluate(e=>e===document.activeElement),{theme,width,zoom,i,kind:'return-focus'});
+      check(await horizontal(bar),{theme,width,zoom,i,kind:'summary-overflow'});
+      const chip=bar.getByRole('button',{name:/^清除/}).first(); await chip.click();
+      check(await bar.evaluate(e=>e.contains(document.activeElement)),{theme,width,zoom,i,kind:'clear-focus'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('loading');
+      await trigger.click();
+      check(await dialog.getByRole('status').textContent().then(t=>t.includes('正在更新结果')),{theme,width,zoom,i,kind:'pending'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('error');
+      await trigger.click(); check(await dialog.getByText('未能更新结果',{exact:true}).isVisible(),{theme,width,zoom,i,kind:'error'});
+      await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('empty');
+      check(await bar.getByRole('status').textContent().then(t=>/0 条|无用量/.test(t)),{theme,width,zoom,i,kind:'empty'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('disabled');
+      check(await bar.getByRole('button',{name:'刷新',exact:true}).isDisabled(),{theme,width,zoom,i,kind:'disabled'});
+      await page.getByRole('combobox',{name:'示例状态'}).selectOption('normal');
+      filterCases++;
+    }
+  }
+  for(const theme of ['rhine','arknights','neo-brutalism']) for(const width of [400,520,880,1280]) for(const zoom of [1,2]) {
+    await page.setViewportSize({width,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}&zoom=${zoom}`);
+    const input=page.getByRole('textbox',{name:'示例昵称'}); await input.fill('保留草稿');
+    const handle=await input.elementHandle();
+    const canvas=await page.locator('.rhine-orbit canvas').first().elementHandle();
+    const layout=await page.locator('.ds-orbit-entry').evaluate(e=>{
+      const r=e.getBoundingClientRect(), bg=e.querySelector('.rhine-orbit'), c=bg.querySelector('canvas').getBoundingClientRect(), intro=e.querySelector('.ds-orbit-entry-intro').getBoundingClientRect(), form=e.querySelector('.ds-orbit-entry-form');
+      return {inside:r.left>=0&&r.right<=innerWidth+1,clear:intro.bottom<=c.top,formClear:getComputedStyle(form).backgroundColor!=='rgba(0, 0, 0, 0)',noControl:!bg.querySelector('button'),noFrame:getComputedStyle(bg).borderTopWidth==='0px'&&getComputedStyle(bg).boxShadow==='none',full:Math.abs(bg.getBoundingClientRect().width-r.width)<2, narrow:e.parentElement.clientWidth<=760};
+    });
+    check(layout.inside&&layout.clear&&layout.formClear&&layout.noControl&&layout.noFrame&&layout.full===layout.narrow,{theme,width,zoom,kind:'orbit-layout',layout});
+    await page.getByRole('combobox',{name:'验收主题'}).selectOption(theme==='rhine'?'arknights':'rhine');
+    await page.setViewportSize({width:width+80,height:1000});
+    check(await handle.evaluate(e=>e.isConnected&&e.value==='保留草稿')&&await canvas.evaluate(e=>e.isConnected),{theme,width,zoom,kind:'stable-nodes'});
+    orbitCases++;
+  }
+  return {pass:!failures.length&&!errors.length,filterCases,orbitCases,failures,errors};
+}

package/scripts/check-background-motion.js

@@ -0,0 +1,169 @@
+async page => {
+  await page.addInitScript(() => {
+  if (window.__donutProof) return;
+  const proof = window.__donutProof = { contexts: [], pending: new Set(), rafScheduled: 0, rafFired: 0, rafCancelled: 0, listeners: new Map(), observerCreates: {}, observerDisconnects: {}, orbitObservers: {}, orbitDisconnects: {} };
+  let targetID = 0, listenerID = 0;
+  const targets = new WeakMap(), listeners = new WeakMap();
+  const targetName = target => {
+    if (!targets.has(target)) targets.set(target, ++targetID);
+    const kind = target === window ? 'window' : target === document ? 'document' : target instanceof HTMLCanvasElement ? 'canvas' : target instanceof MediaQueryList ? 'media' : '';
+    return kind ? `${kind}:${targets.get(target)}` : '';
+  };
+  const nativeAdd = EventTarget.prototype.addEventListener;
+  const nativeRemove = EventTarget.prototype.removeEventListener;
+  EventTarget.prototype.addEventListener = function (type, listener, options) {
+    const target = targetName(this);
+    if (target && listener && (typeof listener === 'object' || typeof listener === 'function')) {
+      if (!listeners.has(listener)) listeners.set(listener, ++listenerID);
+      const key = `${target}:${type}:${listeners.get(listener)}:${Boolean(typeof options === 'boolean' ? options : options?.capture)}`;
+      proof.listeners.set(key, { target, type });
+    }
+    return nativeAdd.call(this, type, listener, options);
+  };
+  EventTarget.prototype.removeEventListener = function (type, listener, options) {
+    const target = targetName(this);
+    if (target && listener) proof.listeners.delete(`${target}:${type}:${listeners.get(listener)}:${Boolean(typeof options === 'boolean' ? options : options?.capture)}`);
+    return nativeRemove.call(this, type, listener, options);
+  };
+  const nativeRequest = requestAnimationFrame, nativeCancel = cancelAnimationFrame;
+  window.requestAnimationFrame = callback => {
+    proof.rafScheduled++;
+    const id = nativeRequest(time => { proof.pending.delete(id); proof.rafFired++; callback(time); });
+    proof.pending.add(id);
+    return id;
+  };
+  window.cancelAnimationFrame = id => { proof.pending.delete(id); proof.rafCancelled++; nativeCancel(id); };
+  for (const name of ['ResizeObserver', 'IntersectionObserver', 'MutationObserver']) {
+    const Native = window[name];
+    window[name] = class extends Native {
+      constructor(callback) { super(callback); proof.observerCreates[name] = (proof.observerCreates[name] || 0) + 1; }
+      observe(target, ...args) { if (target instanceof HTMLCanvasElement && target.classList.contains('rhine-orbit-canvas') && !this.orbit) { this.orbit = true; proof.orbitObservers[name] = (proof.orbitObservers[name] || 0) + 1; } return super.observe(target, ...args); }
+      disconnect() { if(this.orbit) proof.orbitDisconnects[name] = (proof.orbitDisconnects[name] || 0) + 1; proof.observerDisconnects[name] = (proof.observerDisconnects[name] || 0) + 1; return super.disconnect(); }
+    };
+  }
+  const locations = new WeakMap(), contexts = new WeakMap();
+  const record = gl => {
+    if (!contexts.has(gl)) {
+      const entry = { canvas: gl.canvas, draws: 0, frames: 0, samples: [], time: null, matrices: [], resources: {}, lost: 0, restored: 0, queued: false };
+      contexts.set(gl, entry); proof.contexts.push(entry);
+      nativeAdd.call(gl.canvas, 'webglcontextlost', () => entry.lost++);
+      nativeAdd.call(gl.canvas, 'webglcontextrestored', () => entry.restored++);
+    }
+    return contexts.get(gl);
+  };
+  const scheduleSample = gl => {
+    const entry = record(gl);
+    if (entry.queued) return;
+    entry.queued = true;
+    queueMicrotask(() => {
+      entry.queued = false; entry.frames++;
+      const now = performance.now();
+      const retainSample = !entry.samples.length || now - entry.samples.at(-1).at >= 180;
+      try {
+        const canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 72;
+        const context = canvas.getContext('2d'); context.drawImage(gl.canvas, 0, 0, 100, 72);
+        const pixels = context.getImageData(0, 0, 100, 72).data;
+        let hash = 2166136261, painted = 0, bright = 0, min = 255, max = 0;
+        for (let i = 0; i < pixels.length; i += 4) {
+          for (let j = 0; j < 4; j++) hash = Math.imul(hash ^ pixels[i + j], 16777619);
+          if (pixels[i + 3]) painted++;
+          const luminance = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
+          if (luminance > 100) bright++;
+          min = Math.min(min, luminance); max = Math.max(max, luminance);
+        }
+        entry.latest = { at: now, time: entry.time, hash: hash >>> 0, painted, bright, min, max, matrices: entry.matrices.slice(0, 40) };
+        if (retainSample) entry.samples.push(entry.latest);
+        if (entry.samples.length > 700) entry.samples.shift();
+      } catch (error) { entry.sampleError = String(error); }
+      entry.matrices = [];
+    });
+  };
+  for (const Proto of [window.WebGLRenderingContext?.prototype, window.WebGL2RenderingContext?.prototype].filter(Boolean)) {
+    for (const name of ['drawArrays', 'drawElements', 'drawArraysInstanced', 'drawElementsInstanced']) {
+      const native = Proto[name]; if (!native || native.__donutProof) continue;
+      const wrapped = function (...args) { const result = native.apply(this, args); record(this).draws++; scheduleSample(this); return result; };
+      wrapped.__donutProof = true; Proto[name] = wrapped;
+    }
+    const nativeLocation = Proto.getUniformLocation;
+    if (!nativeLocation.__donutProof) {
+      const wrapped = function (program, name) { const value = nativeLocation.call(this, program, name); if (value) locations.set(value, name); return value; };
+      wrapped.__donutProof = true; Proto.getUniformLocation = wrapped;
+    }
+    for (const name of ['uniform1f', 'uniformMatrix4fv']) {
+      const native = Proto[name]; if (native.__donutProof) continue;
+      const wrapped = function (...args) {
+        const result = native.apply(this, args), uniform = locations.get(args[0]);
+        if (name === 'uniform1f' && /^(time|uTime)$/.test(uniform)) record(this).time = args[1];
+        if (name === 'uniformMatrix4fv' && uniform === 'modelViewMatrix') record(this).matrices.push(Array.from(args[2], value => Number(value.toFixed(5))));
+        return result;
+      };
+      wrapped.__donutProof = true; Proto[name] = wrapped;
+    }
+    for (const kind of ['Buffer', 'Texture', 'Program', 'Shader', 'Framebuffer', 'Renderbuffer', 'VertexArray']) {
+      for (const action of ['create', 'delete']) {
+        const name = action + kind, native = Proto[name]; if (!native || native.__donutProof) continue;
+        const wrapped = function (...args) { const result = native.apply(this, args); const entry = record(this); if (action === 'create' ? result : args[0]) entry.resources[name] = (entry.resources[name] || 0) + 1; return result; };
+        wrapped.__donutProof = true; Proto[name] = wrapped;
+      }
+    }
+  }
+  window.__donutSnapshot = () => ({
+    pendingRafs: proof.pending.size, rafScheduled: proof.rafScheduled, rafFired: proof.rafFired, rafCancelled: proof.rafCancelled,
+    listeners: [...proof.listeners.values()], observerCreates: proof.observerCreates, observerDisconnects: proof.observerDisconnects, orbitObservers: proof.orbitObservers, orbitDisconnects: proof.orbitDisconnects,
+    contexts: proof.contexts.filter(entry => entry.canvas.classList.contains('rhine-orbit-canvas')).map(entry => ({
+      example: entry.canvas.closest('.rhine-orbit')?.getAttribute('aria-label') || null,
+      kind: entry.canvas.dataset.orbitArtwork || 'donut', active: !entry.canvas.hidden, canvasConnected: entry.canvas.isConnected, draws: entry.draws, frames: entry.frames, time: entry.time, samples: entry.samples, latest: entry.latest,
+      resources: entry.resources, lost: entry.lost, restored: entry.restored, sampleError: entry.sampleError, width: entry.canvas.width, height: entry.canvas.height,
+    })),
+  });
+}
+);
+
+  const results=[],errors=[]; page.on('pageerror',e=>errors.push(String(e)));
+  const snap=()=>page.evaluate(()=>window.__donutSnapshot());
+  for(const theme of ['rhine','arknights','neo-brutalism']) {
+    await page.setViewportSize({width:1280,height:1000});
+    await page.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}`);
+    const root=page.locator('.rhine-orbit'), canvas=root.locator('canvas').first();
+    await root.scrollIntoViewIfNeeded();
+    await page.waitForFunction(()=>window.__donutSnapshot().contexts.some(c=>c.canvasConnected&&c.active&&c.latest?.painted>50));
+    const active=s=>s.contexts.find(c=>c.canvasConnected&&c.active);
+    const a=active(await snap()); await page.waitForTimeout(450); const b=active(await snap());
+    const playing=a.latest.hash!==b.latest.hash&&b.draws>a.draws;
+    await page.getByRole('checkbox',{name:'减少入口动态'}).check();
+    await page.waitForTimeout(150);const c=active(await snap());await page.waitForTimeout(350); const d=active(await snap());
+    const manual=c.draws===d.draws&&c.latest.hash===d.latest.hash;
+    await page.getByRole('checkbox',{name:'减少入口动态'}).uncheck();
+    await page.emulateMedia({reducedMotion:'reduce'});await page.waitForTimeout(150);const e=active(await snap());await page.waitForTimeout(350);const f=active(await snap());
+    const system=e.draws===f.draws;
+    await page.emulateMedia({reducedMotion:'no-preference'});await page.waitForTimeout(350);const resumed=active(await snap()).draws>f.draws;
+    await root.evaluate(e=>e.style.display='none');await page.waitForTimeout(150);const g=active(await snap());await page.waitForTimeout(350);const h=active(await snap());
+    const empty=g.draws===h.draws;
+    await root.evaluate(e=>e.style.display='');await page.waitForTimeout(200);
+    await page.locator('.ds-orbit-entry-container').evaluate(e=>e.style.marginTop='2200px');await page.evaluate(()=>scrollTo(0,0));await page.waitForTimeout(150);const j=active(await snap());await page.waitForTimeout(350);const k=active(await snap());
+    const offscreen=j.draws===k.draws;
+    await page.locator('.ds-orbit-entry-container').evaluate(e=>e.style.marginTop=''); await root.scrollIntoViewIfNeeded();await page.waitForTimeout(250);
+    const other=await page.context().newPage();await other.goto('about:blank');await other.bringToFront();await page.waitForTimeout(250);
+    const actualHidden=await page.evaluate(()=>document.hidden);
+    await page.evaluate(()=>{Object.defineProperty(document,'hidden',{configurable:true,value:true});document.dispatchEvent(new Event('visibilitychange'));});
+    await page.waitForTimeout(150);
+    const hidden=await page.evaluate(()=>document.hidden);const l=active(await snap());await page.waitForTimeout(350);const m=active(await snap());
+    const hiddenPause=hidden&&l.draws===m.draws;
+    await other.close();await page.bringToFront();
+    await page.evaluate(()=>{delete document.hidden;document.dispatchEvent(new Event('visibilitychange'));});
+    await page.getByRole('checkbox',{name:'挂载入口'}).uncheck();await page.waitForTimeout(150);const disposed=await snap();
+    await page.waitForTimeout(350);const end=await snap();
+    const cleanup=end.contexts.every(c=>!c.canvasConnected)&&end.pendingRafs===0&&JSON.stringify(end.contexts.map(c=>c.draws))===JSON.stringify(disposed.contexts.map(c=>c.draws))&&['ResizeObserver','IntersectionObserver','MutationObserver'].every(n=>end.orbitObservers[n]>0&&end.orbitObservers[n]===end.orbitDisconnects[n]);
+    results.push({theme,playing,manual,system,resumed,empty,offscreen,actualHidden,hidden,hiddenPause,cleanup,pending:end.pendingRafs,observers:{created:end.observerCreates,disconnected:end.observerDisconnects,orbitCreated:end.orbitObservers,orbitDisconnected:end.orbitDisconnects},resources:end.contexts.map(c=>c.resources)});
+  }
+  const fallback=await page.context().newPage();
+  await fallback.addInitScript(()=>{HTMLCanvasElement.prototype.getContext=function(){return null;};});
+  const fallbacks=[];
+  for(const theme of ['rhine','arknights','neo-brutalism']) {
+    await fallback.goto(`http://127.0.0.1:18484/?fixture=orbit-entry&theme=${theme}`);
+    await fallback.waitForFunction(()=>document.querySelector('.rhine-orbit')?.dataset.rhineOrbitState==='unavailable');
+    fallbacks.push(await fallback.locator('.rhine-orbit').evaluate(e=>{const c=getComputedStyle(e.querySelector('canvas')),p=getComputedStyle(e,'::after');return {theme:e.closest('[data-rhine-theme]').dataset.rhineTheme,pass:c.width===p.width&&c.height===p.height&&c.right===p.right&&c.bottom===p.bottom&&p.backgroundImage.includes('svg')};}));
+  }
+  await fallback.close();
+  return {pass:results.every(r=>r.playing&&r.manual&&r.system&&r.resumed&&r.empty&&r.offscreen&&r.hiddenPause&&r.cleanup)&&fallbacks.every(r=>r.pass)&&!errors.length,results,fallbacks,errors};
+}

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-filter-native-date.js

@@ -0,0 +1,47 @@
+async page => {
+  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();
+  const dialog = page.getByRole('dialog', { name: '录制会话筛选', exact: true });
+  const start = dialog.getByLabel('开始日期', { exact: true });
+  const end = dialog.getByLabel('结束日期', { exact: true });
+  const inspect = () => start.evaluate(element => ({ value: element.value, badInput: element.validity.badInput, invalid: element.getAttribute('aria-invalid') }));
+  await start.fill('2026-10-20'); await end.fill('2026-10-24');
+  await start.focus(); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('Backspace');
+  await page.waitForTimeout(100);
+  let value = await inspect();
+  check('Deleting a native date segment keeps accepted range and reports invalid', value.badInput && value.invalid === 'true' && (await page.locator('#list-filter-bar .rhine-list-filter-bar__active').first().innerText()).includes('2026-10-20 — 2026-10-24'), value);
+  await page.keyboard.type('2026'); await page.waitForTimeout(100); value = await inspect();
+  check('Typing the complete year repairs native draft', value.value === '2026-10-20' && !value.badInput && value.invalid !== 'true', value);
+  await dialog.getByRole('button', { name: '清空日期', exact: true }).click();
+  await start.evaluate(element => { window.nativeDateEvents = []; for (const name of ['input', 'change', 'keyup', 'blur']) element.addEventListener(name, event => window.nativeDateEvents.push({ event: event.type, key: event.key, value: element.value, badInput: element.validity.badInput })); });
+  await start.focus(); await page.keyboard.type('2'); await page.waitForTimeout(100); value = await inspect();
+  check('Empty date native fragment is invalid even when no input/change fires', value.badInput && value.invalid === 'true' && await dialog.getByRole('button', { name: '清空日期', exact: true }).isEnabled(), { ...value, events: await page.evaluate(() => window.nativeDateEvents) });
+  if (await dialog.getByRole('button', { name: '清空日期', exact: true }).isEnabled()) {
+    await dialog.getByRole('button', { name: '清空日期', exact: true }).click(); await page.waitForTimeout(100); value = await inspect();
+    check('Clear removes an empty native fragment and validation error', value.value === '' && !value.badInput && value.invalid !== 'true', value);
+  }
+  await dialog.getByRole('button', { name: '今天', exact: true }).click();
+  await start.focus(); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowLeft'); await page.keyboard.press('Backspace');
+  await dialog.getByRole('button', { name: '今天', exact: true }).click(); await page.waitForTimeout(100); value = await inspect();
+  check('Applying the same preset clears a rejected native draft', value.value === '2026-10-24' && !value.badInput && value.invalid !== 'true', value);
+  await page.keyboard.press('Escape'); await dialog.waitFor({state:'detached'});
+  for (let i=0;i<3;i++) {
+    const bar=page.locator('.rhine-list-filter-bar').nth(i);
+    if(await bar.getByRole('button',{name:'重置筛选',exact:true}).count()) await bar.getByRole('button',{name:'重置筛选',exact:true}).click();
+    await bar.getByRole('button',{name:/^更多筛选/}).click(); const panel=page.getByRole('dialog');
+    if(i<2) await panel.getByRole('checkbox',{name:'只看已审查'}).check();
+    else await panel.getByRole('combobox',{name:'统计范围'}).selectOption({label:'示例团队 / 跨部门体验与可访问性协作小组'});
+    const date=panel.getByLabel('开始日期',{exact:true});
+    await date.focus();
+    if(i===2){await page.keyboard.press('ArrowLeft');await page.keyboard.press('ArrowLeft');await page.keyboard.press('Backspace');}
+    else await page.keyboard.type('2');
+    await page.waitForFunction(e=>e.validity.badInput&&e.getAttribute('aria-invalid')==='true',await date.elementHandle());
+    await panel.getByRole('button',{name:'重置筛选',exact:true}).click();
+    const clean=await date.evaluate(e=>!e.validity.badInput&&e.getAttribute('aria-invalid')!=='true');
+    check(`Overall reset clears default-valued native draft in example ${i}`,clean&&await panel.evaluate(e=>e.contains(document.activeElement)));
+    await page.keyboard.press('Escape');await panel.waitFor({state:'detached'});
+  }
+  return { complete: checks.every(item => item.pass), checks, scope: 'Real native date segmentation in isolated Chromium; keyboard presses use page.keyboard so locator focus does not reset year digit buffering.' };
+}

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.9.1"
 ---
 
 # 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.9.1, including 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

@@ -30,7 +30,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.9.1 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/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();