dsh-better-display 0.3.7 → 0.3.9

package/tests/reader-glass-css.test.ts

@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict';
+import { resolve } from 'node:path';
+import { test } from 'vitest';
+import { externalClientBundle } from '../tools/client-build.js';
+
+// Exercise the actual build plugin so options cannot drift from production.
+async function readerCss(): Promise<string> {
+  const configs = externalClientBundle('dsh-better-display', [], { clientEntry: 'src/client/index.tsx' });
+  const client = configs.find(config => config.name === 'dsh-better-display/client');
+  const plugin = client?.plugins.find(plugin => plugin.name === 'dshx-css-modules-inline');
+  assert.ok(plugin);
+  const source = await plugin.load.call({}, `\0dshx-css-module:${resolve('src/client/Reader.module.css')}.mjs`);
+  const literal = /^const css = (.+);$/m.exec(source)?.[1];
+  assert.ok(literal, 'the build emits an inline CSS string');
+  const css: unknown = JSON.parse(literal);
+  assert.equal(typeof css, 'string');
+  if (typeof css !== 'string') throw new Error('Expected CSS text');
+  return css;
+}
+
+test('built Reader CSS retains Chromium blur and the older Safari fallback', async () => {
+  const css = await readerCss();
+  assert.match(css, /(?<![\w-])backdrop-filter:blur\(12px\)/);
+  assert.match(css, /-webkit-backdrop-filter:blur\(12px\)/);
+  const prefixed = [...css.matchAll(/-webkit-backdrop-filter:([^;}]+)/g)].map(match => match[1]);
+  const standard = [...css.matchAll(/(?<![\w-])backdrop-filter:([^;}]+)/g)].map(match => match[1]);
+  assert.deepEqual(standard, prefixed, 'every Safari fallback also has a working standard declaration');
+});

package/tests/reader-official-users.test.ts

@@ -0,0 +1,91 @@
+import assert from 'node:assert/strict';
+import { existsSync, mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { pathToFileURL } from 'node:url';
+import { createRequire } from 'node:module';
+import { homedir, tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { test } from 'vitest';
+
+// Needs the Harness source tree and a local pinned Chromium; CI (which builds the
+// release) has neither browser runtime, so the test skips there instead of failing.
+const harnessPointer = join(homedir(), '.config/dshx/harness');
+const harness = process.env.DSHX_HARNESS?.trim()
+  || (existsSync(harnessPointer) ? readFileSync(harnessPointer, 'utf8').trim() : '');
+const browserRuntime = join(homedir(), '.codex/playwright-runtime/runtime.mjs');
+const skip = !harness ? 'DSH Harness source not available'
+  : !existsSync(browserRuntime) ? 'pinned Chromium runtime not available' : false;
+
+test('official user output stays inside the cluster that carries the host width', () => {
+  const root = resolve(import.meta.dirname, '..');
+  const source = readFileSync(join(root, 'src/client/Reader.tsx'), 'utf8');
+  const css = readFileSync(join(root, 'src/client/Reader.module.css'), 'utf8');
+  assert.match(source, /className=\{css\.userCluster\}[^>]*data-reader-key=\{nodeKey\}[^>]*>\{rendered\}/);
+  assert.match(css, /\.userCluster\s*\{[^}]*width:\s*100%/);
+  assert.match(css, /\.userCluster > \[data-slot\] > \* \{[^}]*width:\s*100%/);
+  assert.doesNotMatch(css, /\[data-slot="conversation\.chat\.node"\]/);
+});
+
+test('headless Reader users retain official renderers, anchors and empty-key fallback', { skip }, async () => {
+  const root = resolve(import.meta.dirname, '..');
+  const require = createRequire(join(root, 'package.json'));
+  const { build } = createRequire(require.resolve('tsx'))('esbuild');
+  const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
+  const out = mkdtempSync(join(tmpdir(), 'reader-official-users-'));
+  try {
+    const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+    await build({
+      entryPoints: [join(root, 'tests/fixtures/reader-official-users.tsx')],
+      outfile: join(out, 'fixture.js'), bundle: true, platform: 'browser', format: 'esm', jsx: 'automatic',
+      alias: {
+        '@fixture/registry': join(harness, 'packages/client/ui-renderer/src/client/registry.ts'),
+        '@fixture/renderer': join(harness, 'packages/client/ui-renderer/src/client/scoped-slots.tsx'),
+        '@deepseek-ai/dsh-client-ui-primitives': join(harness, 'packages/client/ui-primitives/src/index.ts'),
+        '@deepseek-ai/dsh-client-ui-slots': join(harness, 'packages/client/ui-slots/src/index.ts'),
+        // The published store lib leaves zustand/immer to the host; the source
+        // package resolves them from the Harness workspace.
+        '@deepseek-ai/dsh-client-store': join(harness, 'packages/client/store/src/index.ts'),
+        react: dirname(require.resolve('react/package.json')),
+        'react-dom': dirname(webRequire.resolve('react-dom/package.json')),
+      },
+      loader: { '.css': 'empty', '.woff2': 'empty', '.woff': 'empty', '.ttf': 'empty', '.svg': 'empty' },
+      logLevel: 'silent',
+    });
+    const server = createServer((request, response) => {
+      if (request.url === '/easyrewrite.js' && process.env.DSH_EASYREWRITE_CLIENT) {
+        response.setHeader('Content-Type', 'text/javascript');
+        response.end(readFileSync(process.env.DSH_EASYREWRITE_CLIENT));
+      } else if (request.url === '/fixture.js') {
+        response.setHeader('Content-Type', 'text/javascript');
+        response.end(readFileSync(join(out, 'fixture.js')));
+      } else {
+        response.setHeader('Content-Type', 'text/html');
+        const easyrewrite = process.env.DSH_EASYREWRITE_CLIENT
+          ? '<script>window.__ModuleLoader__={load:m=>window.easyrewriteModule=m}</script><script src="/easyrewrite.js"></script>' : '';
+        response.end(`<!doctype html><div id="app"></div>${easyrewrite}<script type="module" src="/fixture.js"></script>`);
+      }
+    });
+    await new Promise<void>(resolve => server.listen(0, '127.0.0.1', resolve));
+    let browser;
+    try {
+      browser = await launchPinnedChromium();
+      const page = await browser.newPage();
+      const errors: string[] = [];
+      page.on('pageerror', (error: Error) => errors.push(String(error)));
+      page.on('console', (message: { type(): string; text(): string }) => {
+        if (message.type() === 'error') errors.push(message.text());
+      });
+      const address = server.address();
+      assert.ok(address && typeof address === 'object');
+      await page.goto(`http://127.0.0.1:${address.port}`);
+      await page.waitForFunction(() => 'readerUserResult' in window, undefined, { timeout: 10000 });
+      assert.equal(await page.evaluate(() => Reflect.get(window, 'readerUserResult')), 'passed');
+      assert.deepEqual(errors, []);
+    } finally {
+      await browser?.close();
+      await new Promise<void>(resolve => server.close(() => resolve()));
+    }
+  } finally {
+    rmSync(out, { recursive: true, force: true });
+  }
+});

package/tests/reader-sticky-surface.test.ts

@@ -0,0 +1,377 @@
+import assert from 'node:assert/strict';
+import { createServer } from 'node:http';
+import { execFileSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { homedir, tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { inflateSync } from 'node:zlib';
+import { test } from 'vitest';
+
+const browserRuntime = join(homedir(), '.codex/playwright-runtime/runtime.mjs');
+const skip = existsSync(browserRuntime) ? false : 'pinned Chromium runtime not available';
+const root = resolve(import.meta.dirname, '..');
+const shots = '/tmp/issue-66-sticky-lanes';
+
+function paeth(left: number, up: number, upLeft: number) {
+  const estimate = left + up - upLeft;
+  const leftDistance = Math.abs(estimate - left);
+  const upDistance = Math.abs(estimate - up);
+  const diagonal = Math.abs(estimate - upLeft);
+  if (leftDistance <= upDistance && leftDistance <= diagonal) return left;
+  if (upDistance <= diagonal) return up;
+  return upLeft;
+}
+
+function pngPixel(buffer: Buffer, x: number, y: number) {
+  let offset = 8;
+  const chunks: Buffer[] = [];
+  let width = 0;
+  let height = 0;
+  let colorType = 0;
+  while (offset < buffer.length) {
+    const length = buffer.readUInt32BE(offset);
+    const type = buffer.toString('ascii', offset + 4, offset + 8);
+    const data = buffer.subarray(offset + 8, offset + 8 + length);
+    if (type === 'IHDR') {
+      width = data.readUInt32BE(0);
+      height = data.readUInt32BE(4);
+      colorType = data[9] ?? 0;
+    } else if (type === 'IDAT') chunks.push(data);
+    else if (type === 'IEND') break;
+    offset += 12 + length;
+  }
+  const bytesPerPixel = colorType === 6 ? 4 : 3;
+  const raw = inflateSync(Buffer.concat(chunks));
+  const stride = width * bytesPerPixel;
+  let source = 0;
+  let previous = Buffer.alloc(stride);
+  const rows: Buffer[] = [];
+  for (let rowIndex = 0; rowIndex < height; rowIndex += 1) {
+    const filter = raw[source] ?? 0;
+    source += 1;
+    const row = Buffer.alloc(stride);
+    for (let index = 0; index < stride; index += 1) {
+      const value = raw[source] ?? 0;
+      source += 1;
+      const left = index >= bytesPerPixel ? row[index - bytesPerPixel] ?? 0 : 0;
+      const up = previous[index] ?? 0;
+      const upLeft = index >= bytesPerPixel ? previous[index - bytesPerPixel] ?? 0 : 0;
+      let decoded = value;
+      if (filter === 1) decoded = value + left;
+      else if (filter === 2) decoded = value + up;
+      else if (filter === 3) decoded = value + Math.floor((left + up) / 2);
+      else if (filter === 4) decoded = value + paeth(left, up, upLeft);
+      else if (filter !== 0) throw new Error(`unsupported png filter ${filter}`);
+      row[index] = decoded & 255;
+    }
+    rows.push(row);
+    previous = row;
+  }
+  const pixel = rows[y];
+  const start = x * bytesPerPixel;
+  return [pixel?.[start] ?? 0, pixel?.[start + 1] ?? 0, pixel?.[start + 2] ?? 0];
+}
+
+function dist(a: number[], b: number[]) {
+  return Math.hypot(a[0]! - b[0]!, a[1]! - b[1]!, a[2]! - b[2]!);
+}
+
+type Rgb = [number, number, number];
+
+function laneHtml(cssName: string, options: {
+  scheme: 'dark' | 'light';
+  base: string;
+  layer: string;
+  label: string;
+  delta: number;
+  fontSize: number;
+  glass?: boolean;
+}) {
+  const glass = options.glass ? ' data-reader-glass=""' : '';
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="/${cssName}">
+  <style>
+    :root {
+      color-scheme: ${options.scheme};
+      --dsh-content-font-size: ${options.fontSize}px;
+      --dsh-content-font-delta: ${options.delta}px;
+      --dsw-alias-bg-base: ${options.base};
+      --dsw-alias-bg-layer-1: ${options.layer};
+      --dsw-alias-label-primary: ${options.label};
+      --dsw-alias-label-secondary: ${options.label};
+      --dsw-alias-label-tertiary: ${options.label};
+      --dsw-font-family: ui-sans-serif, sans-serif;
+    }
+    html, body { margin: 0; background: #ff00aa; color-scheme: ${options.scheme}; }
+    .scroll { height: 280px; overflow: auto; background: #ff00aa; }
+    #heading { margin: 0; background: #00e5ff; color: #ff4ad2; font: 700 48px/52px sans-serif; }
+    #canvas-probe { position: fixed; right: 8px; bottom: 8px; width: 12px; height: 12px; background: Canvas; }
+  </style>
+</head>
+<body>
+  <div id="canvas-probe"></div>
+  <div class="scroll" id="scroll">
+    <div class="root"${glass} data-dsh-better-display="fixture">
+      <div class="column" data-chat-flow="">
+        <div class="toolbar" data-reader-lane="toolbar"><button class="textButton" type="button">自动折叠开</button></div>
+        <section class="turn" data-reader-turn="1">
+          <div class="turnStickyRegion">
+            <div class="turnStickyLanes">
+              <div class="turnProcessSticky" data-reader-lane="status">
+                <button class="disclosureButton" type="button"><span class="statusText">用时 64 分 24 秒</span></button>
+              </div>
+              <div class="closedProcessSummary" id="summary">
+                <div class="summaryRow">
+                  <button class="disclosureButton" type="button"><span class="foldSummary">思考×79 · 输出×15</span></button>
+                </div>
+              </div>
+            </div>
+            <div class="answer">
+              <h2 id="heading">核心对比核心对比核心对比核心对比</h2>
+              <div style="height:900px"></div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  <script>window.__ready = true;</script>
+</body>
+</html>`;
+}
+
+async function listen(files: Map<string, Buffer | string>) {
+  const server = createServer((request, response) => {
+    const body = files.get(request.url ?? '/');
+    if (body === undefined) { response.statusCode = 404; response.end(); return; }
+    response.setHeader('Content-Type', request.url?.endsWith('.css') ? 'text/css' : request.url?.endsWith('.js') ? 'text/javascript' : 'text/html');
+    response.end(body);
+  });
+  await new Promise<void>(resolveListen => server.listen(0, '127.0.0.1', resolveListen));
+  const address = server.address();
+  assert.ok(address && typeof address === 'object');
+  return {
+    port: address.port,
+    close: () => new Promise<void>(resolveClose => server.close(() => resolveClose())),
+  };
+}
+
+async function sample(page: { screenshot(options: { clip: { x: number; y: number; width: number; height: number }; scale: 'css' }): Promise<Buffer> }, x: number, y: number): Promise<Rgb> {
+  const shot = await page.screenshot({ clip: { x: Math.round(x), y: Math.round(y), width: 1, height: 1 }, scale: 'css' });
+  const [red, green, blue] = pngPixel(shot, 0, 0);
+  return [red, green, blue];
+}
+
+test('transparent and faded theme tokens keep lane pixels on the page surface', { skip, timeout: 30_000 }, async () => {
+  const css = readFileSync(join(root, 'src/client/Reader.module.css'));
+  const files = new Map<string, Buffer | string>([['/reader.css', css]]);
+  const cases = [
+    { name: 'dark-22-clear', scheme: 'dark' as const, base: 'transparent', layer: 'transparent', label: '#f5f7fa', delta: 8, fontSize: 22, limit: 16 },
+    { name: 'light-22-clear', scheme: 'light' as const, base: 'transparent', layer: 'transparent', label: '#141414', delta: 8, fontSize: 22, limit: 16 },
+    { name: 'dark-22-fade', scheme: 'dark' as const, base: 'rgb(255 255 255 / 10%)', layer: 'rgb(255 255 255 / 10%)', label: '#f5f7fa', delta: 8, fontSize: 22, limit: 100 },
+    { name: 'light-22-fade', scheme: 'light' as const, base: 'rgb(255 255 255 / 10%)', layer: 'rgb(255 255 255 / 10%)', label: '#141414', delta: 8, fontSize: 22, limit: 100 },
+    { name: 'floor-12', scheme: 'dark' as const, base: 'transparent', layer: 'transparent', label: '#f5f7fa', delta: -2, fontSize: 12, limit: 16 },
+  ];
+  for (const item of cases) files.set(`/${item.name}.html`, laneHtml('reader.css', item));
+  const server = await listen(files);
+  const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+  const browser = await launchPinnedChromium();
+  mkdirSync(shots, { recursive: true });
+  try {
+    const page = await browser.newPage({ viewport: { width: 1000, height: 360 }, deviceScaleFactor: 1 });
+    const errors: string[] = [];
+    page.on('pageerror', (error: Error) => errors.push(String(error)));
+    for (const item of cases) {
+      await page.goto(`http://127.0.0.1:${server.port}/${item.name}.html`);
+      await page.waitForFunction(() => Reflect.get(window, '__ready') === true);
+      const box = await page.evaluate(() => {
+        const rect = (selector: string) => {
+          const itemRect = document.querySelector(selector)!.getBoundingClientRect();
+          return { top: itemRect.top, right: itemRect.right, bottom: itemRect.bottom, left: itemRect.left, height: itemRect.height };
+        };
+        return { toolbar: rect('.toolbar'), status: rect('[data-reader-lane="status"]'), summary: rect('#summary'), probe: rect('#canvas-probe') };
+      });
+      if (item.fontSize === 12) {
+        assert.ok(box.toolbar.height >= 40, `${item.name} toolbar ${box.toolbar.height}px is under the 40px floor`);
+        assert.ok(box.status.height >= 40, `${item.name} status ${box.status.height}px is under the 40px floor`);
+      } else {
+        assert.ok(box.status.height > 44, `${item.name} status ${box.status.height}px did not grow with the 22px content font`);
+      }
+      await page.evaluate(() => {
+        const scroll = document.querySelector<HTMLElement>('#scroll')!;
+        const summary = document.querySelector('#summary')!.getBoundingClientRect();
+        const heading = document.querySelector('#heading')!.getBoundingClientRect();
+        scroll.scrollTop += heading.top - summary.top;
+      });
+      const points = await page.evaluate(() => {
+        const summary = document.querySelector('#summary')!.getBoundingClientRect();
+        const status = document.querySelector('[data-reader-lane="status"]')!.getBoundingClientRect();
+        const probe = document.querySelector('#canvas-probe')!.getBoundingClientRect();
+        return {
+          summary: { x: summary.left + 10, y: summary.top + 2 },
+          status: { x: status.right - 12, y: status.top + 2 },
+          probe: { x: probe.left + 2, y: probe.top + 2 },
+        };
+      });
+      const canvas = await sample(page, points.probe.x, points.probe.y);
+      const summary = await sample(page, points.summary.x, points.summary.y);
+      const status = await sample(page, points.status.x, points.status.y);
+      const text = item.scheme === 'dark' ? [245, 247, 250] : [20, 20, 20];
+      const glyph: Rgb = [255, 74, 210];
+      const wash: Rgb = [0, 229, 255];
+      const pageTone: Rgb = [255, 0, 170];
+      await page.screenshot({ path: join(shots, `${item.name}.png`) });
+      for (const [place, pixel] of [['summary', summary], ['status', status]] as const) {
+        const message = `${item.name} ${place} pixel ${pixel.join(',')} canvas ${canvas.join(',')} text ${text.join(',')}`;
+        assert.ok(dist(pixel, canvas) <= item.limit, message);
+        assert.ok(dist(pixel, canvas) + 40 < dist(pixel, text), message);
+        assert.ok(dist(pixel, glyph) > 80, message);
+        assert.ok(dist(pixel, wash) > 80, message);
+        assert.ok(dist(pixel, pageTone) > 80, message);
+      }
+    }
+    assert.deepEqual(errors, []);
+  } finally {
+    await browser.close();
+    await server.close();
+  }
+});
+
+test('stock and glass lanes stay pixel-identical to origin/main', { skip, timeout: 30_000 }, async () => {
+  const headCss = readFileSync(join(root, 'src/client/Reader.module.css'));
+  const mainCss = execFileSync('git', ['show', 'origin/main:src/client/Reader.module.css'], { cwd: root });
+  const files = new Map<string, Buffer | string>([
+    ['/head.css', headCss],
+    ['/main.css', mainCss],
+    ['/stock-head.html', laneHtml('head.css', { scheme: 'light', base: '#223344', layer: '#aabbcc', label: '#f5f7fa', delta: 0, fontSize: 14 })],
+    ['/stock-main.html', laneHtml('main.css', { scheme: 'light', base: '#223344', layer: '#aabbcc', label: '#f5f7fa', delta: 0, fontSize: 14 })],
+    ['/glass-head.html', laneHtml('head.css', { scheme: 'light', base: '#223344', layer: '#aabbcc', label: '#f5f7fa', delta: 0, fontSize: 14, glass: true })],
+    ['/glass-main.html', laneHtml('main.css', { scheme: 'light', base: '#223344', layer: '#aabbcc', label: '#f5f7fa', delta: 0, fontSize: 14, glass: true })],
+  ]);
+  const server = await listen(files);
+  const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+  const browser = await launchPinnedChromium();
+  mkdirSync(shots, { recursive: true });
+  try {
+    const page = await browser.newPage({ viewport: { width: 1000, height: 360 }, deviceScaleFactor: 1 });
+    const read = async (path: string) => {
+      await page.goto(`http://127.0.0.1:${server.port}${path}`);
+      await page.waitForFunction(() => Reflect.get(window, '__ready') === true);
+      const points = await page.evaluate(() => {
+        const summary = document.querySelector('#summary')!.getBoundingClientRect();
+        const toolbar = document.querySelector('.toolbar')!.getBoundingClientRect();
+        return {
+          lane: { x: summary.left + 12, y: summary.top + 2 },
+          gap: { x: summary.left + 12, y: summary.top - 4 },
+          toolbar: { x: toolbar.left + 8, y: toolbar.top + 4 },
+        };
+      });
+      return {
+        lane: await sample(page, points.lane.x, points.lane.y),
+        gap: await sample(page, points.gap.x, points.gap.y),
+        toolbar: await sample(page, points.toolbar.x, points.toolbar.y),
+      };
+    };
+    const stockHead = await read('/stock-head.html');
+    await page.screenshot({ path: join(shots, 'stock-head.png') });
+    const stockMain = await read('/stock-main.html');
+    await page.screenshot({ path: join(shots, 'stock-main.png') });
+    const glassHead = await read('/glass-head.html');
+    await page.screenshot({ path: join(shots, 'glass-head.png') });
+    const glassMain = await read('/glass-main.html');
+    await page.screenshot({ path: join(shots, 'glass-main.png') });
+    for (const place of ['lane', 'gap', 'toolbar'] as const) {
+      assert.ok(dist(stockHead[place], stockMain[place]) <= 2, `stock ${place} head ${stockHead[place].join(',')} main ${stockMain[place].join(',')}`);
+      assert.ok(dist(stockHead[place], [34, 51, 68]) <= 2, `stock ${place} left the opaque token: ${stockHead[place].join(',')}`);
+      assert.ok(dist(glassHead[place], glassMain[place]) <= 8, `glass ${place} head ${glassHead[place].join(',')} main ${glassMain[place].join(',')}`);
+      assert.ok(dist(glassHead[place], [255, 0, 170]) <= 12, `glass ${place} painted a plate: ${glassHead[place].join(',')}`);
+    }
+  } finally {
+    await browser.close();
+    await server.close();
+  }
+});
+
+test('each Reader root owns its lane height and the floor is 40px', { skip, timeout: 30_000 }, async () => {
+  const harnessPointer = join(homedir(), '.config/dshx/harness');
+  const harness = process.env.DSHX_HARNESS?.trim()
+    || (existsSync(harnessPointer) ? readFileSync(harnessPointer, 'utf8').trim() : '');
+  assert.ok(harness, 'DSH Harness source not available');
+  const require = createRequire(join(root, 'package.json'));
+  const { build } = createRequire(require.resolve('tsx'))('esbuild');
+  const webRequire = createRequire(join(harness, 'packages/client/web/package.json'));
+  const out = mkdtempSync(join(tmpdir(), 'reader-lane-owners-'));
+  try {
+    await build({
+      entryPoints: [join(root, 'tests/fixtures/reader-lane-owners.tsx')],
+      outfile: join(out, 'fixture.js'),
+      bundle: true,
+      platform: 'browser',
+      format: 'esm',
+      jsx: 'automatic',
+      alias: {
+        react: dirnameOf(require.resolve('react/package.json')),
+        'react-dom': dirnameOf(webRequire.resolve('react-dom/package.json')),
+      },
+      logLevel: 'silent',
+    });
+    const server = await listen(new Map<string, Buffer | string>([
+      ['/fixture.js', readFileSync(join(out, 'fixture.js'))],
+      ['/', '<!doctype html><div id="app"></div><script type="module" src="/fixture.js"></script>'],
+    ]));
+    const { launchPinnedChromium } = await import(pathToFileURL(browserRuntime).href);
+    const browser = await launchPinnedChromium();
+    try {
+      const page = await browser.newPage({ viewport: { width: 800, height: 600 }, deviceScaleFactor: 1 });
+      const errors: string[] = [];
+      page.on('pageerror', (error: Error) => errors.push(String(error)));
+      await page.goto(`http://127.0.0.1:${server.port}/`);
+      await page.waitForSelector('#row-a');
+      await page.click('#grow');
+      await page.waitForFunction(() => {
+        const row = document.querySelector('#row-a');
+        return !!row && row.getBoundingClientRect().height >= 86;
+      });
+      await page.evaluate(() => new Promise(resolveFrame => requestAnimationFrame(() => requestAnimationFrame(resolveFrame))));
+      const grown = await page.evaluate(() => ({
+        published: document.querySelector<HTMLElement>('#turn-a')!.style.getPropertyValue('--reader-summary-height'),
+        actual: document.querySelector('#row-a')!.getBoundingClientRect().height,
+        other: document.querySelector<HTMLElement>('#turn-b')!.style.getPropertyValue('--reader-summary-height'),
+        short: document.querySelector<HTMLElement>('#turn-short')!.style.getPropertyValue('--reader-status-height'),
+        toolbar: Number.parseFloat(document.querySelector<HTMLElement>('#root-toolbar')!.style.getPropertyValue('--reader-toolbar-height')),
+        status: Number.parseFloat(document.querySelector<HTMLElement>('#turn-status')!.style.getPropertyValue('--reader-status-height')),
+      }));
+      assert.equal(grown.actual, 86, `row a measured ${grown.actual}`);
+      assert.equal(grown.published, '86px', `reader A kept a stale lane height ${grown.published} for an 86px row`);
+      assert.equal(grown.other, '52px', `reader B lane height changed to ${grown.other}`);
+      assert.equal(grown.short, '40px', `38px row published ${grown.short}`);
+      assert.ok(grown.toolbar >= 40, `toolbar lane published ${grown.toolbar}`);
+      assert.ok(grown.status >= 40, `status lane published ${grown.status}`);
+      await page.click('#drop');
+      await page.waitForFunction(() => document.querySelector('#row-a') === null);
+      await page.evaluate(() => new Promise(resolveFrame => requestAnimationFrame(() => requestAnimationFrame(resolveFrame))));
+      const dropped = await page.evaluate(() => ({
+        published: document.querySelector<HTMLElement>('#turn-a')!.style.getPropertyValue('--reader-summary-height'),
+        other: document.querySelector<HTMLElement>('#turn-b')!.style.getPropertyValue('--reader-summary-height'),
+      }));
+      assert.equal(dropped.published, '', `unmounted reader A left ${dropped.published}`);
+      assert.equal(dropped.other, '52px', `unmounting reader A cleared reader B (${dropped.other})`);
+      assert.deepEqual(errors, []);
+      await page.screenshot({ path: join(shots, 'two-roots.png') });
+    } finally {
+      await browser.close();
+      await server.close();
+    }
+  } finally {
+    rmSync(out, { recursive: true, force: true });
+  }
+});
+
+function dirnameOf(file: string) {
+  return file.slice(0, file.lastIndexOf('/'));
+}

package/tests/reader-theme-lanes.test.ts

@@ -0,0 +1,54 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { test } from 'vitest';
+import { externalClientBundle } from '../tools/client-build.js';
+
+const css = readFileSync(resolve('src/client/Reader.module.css'), 'utf8');
+
+test('sticky lanes follow the host font delta and measured row heights', () => {
+  assert.match(css, /--reader-lane-block:\s*max\(40px,\s*calc\(40px \+ var\(--dsh-content-font-delta, 0px\)\)\)/);
+  assert.match(css, /font-size:\s*calc\(14px \+ var\(--dsh-content-font-delta, 0px\)\)/);
+  assert.match(css, /line-height:\s*calc\(24px \+ var\(--dsh-content-font-delta, 0px\)\)/);
+  assert.match(
+    css,
+    /\.flowCell\[data-flow-summary\], \.closedProcessSummary \{[^}]*top:\s*calc\(var\(--reader-toolbar-height, var\(--reader-lane-block, 40px\)\) \+ var\(--reader-status-height, var\(--reader-lane-block, 40px\)\)\)/,
+  );
+  assert.match(css, /--reader-code-summary-height:\s*var\(--reader-summary-height, var\(--reader-lane-block, 40px\)\)/);
+  assert.doesNotMatch(css, /--reader-sticky-lane/);
+});
+
+test('a transparent canvas still masks the lane with the surface token', () => {
+  assert.match(css, /--reader-lane-plate:\s*linear-gradient\(var\(--dsw-alias-bg-base\)/);
+  assert.match(css, /linear-gradient\(var\(--dsw-alias-bg-layer-1, transparent\)/);
+  assert.doesNotMatch(css, /--reader-lane-plate:[^;]*label-primary/);
+  assert.doesNotMatch(css, /--reader-lane-plate:[^;]*color-mix/);
+  assert.match(css, /background-color:\s*Canvas/);
+  assert.match(css, /background-image:\s*var\(--reader-lane-plate\)/);
+  assert.match(css, /\.turnProcessSticky \{ box-shadow:[^;]*\bCanvas\b/);
+  assert.doesNotMatch(css, /\.turnProcessSticky \{ box-shadow:[^;]*label-primary/);
+  assert.match(css, /\.closedProcessSummary \{ box-shadow:[^;]*\bCanvas\b/);
+  assert.match(css, /\.flowCell\[data-flow-summary\] \{ box-shadow:[^;]*\bCanvas\b/);
+  assert.match(css, /\.root\[data-reader-glass\] \.turnProcessSticky/);
+  const glass = css.slice(css.indexOf('Skin mode is opt-in'));
+  assert.match(glass, /background:\s*transparent/);
+  assert.doesNotMatch(glass, /background-color:\s*Canvas/);
+});
+
+test('built Reader CSS keeps the lane plate and the measured summary offset', async () => {
+  const configs = externalClientBundle('dsh-better-display', [], { clientEntry: 'src/client/index.tsx' });
+  const client = configs.find(config => config.name === 'dsh-better-display/client');
+  const plugin = client?.plugins.find(entry => entry.name === 'dshx-css-modules-inline');
+  assert.ok(plugin);
+  const source = await plugin.load.call({}, `\0dshx-css-module:${resolve('src/client/Reader.module.css')}.mjs`);
+  const literal = /^const css = (.+);$/m.exec(source)?.[1];
+  assert.ok(literal);
+  const built: unknown = JSON.parse(literal);
+  assert.equal(typeof built, 'string');
+  if (typeof built !== 'string') return;
+  assert.match(built, /--reader-lane-block:max\(40px, calc\(40px \+ var\(--dsh-content-font-delta,0px\)\)\)/);
+  assert.match(built, /--dsw-alias-bg-layer-1,transparent/);
+  assert.match(built, /background-color:canvas/);
+  assert.doesNotMatch(built, /--reader-lane-plate:[^;]*label-primary/);
+  assert.match(built, /var\(--reader-toolbar-height,var\(--reader-lane-block,40px\)\) \+ var\(--reader-status-height,var\(--reader-lane-block,40px\)\)/);
+});