@astryxdesign/core 0.2.0 → 0.3.0-canary.060cc9d

package/src/List/ListItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'ListItem',
@@ -59,6 +59,11 @@ export const docs = {
       type: '(e: MouseEvent) => void',
       description: 'Click handler; enables the invisible button pattern.',
     },
+    {
+      name: 'interactiveRef',
+      type: 'RefObject<HTMLElement | null>',
+      description: 'Ref to a nested control (e.g. a checkbox in startContent) that owns the item\'s keyboard access and action. The row becomes an enlarged click/tap target that delegates surface clicks to it (useClickableContainer) and renders no invisible button/anchor, so the row adds no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href; those are ignored when set.',
+    },
     {
       name: 'href',
       type: 'string',
@@ -121,6 +126,11 @@ export const docsZh = {
       type: '(e: MouseEvent) => void',
       description: '点击处理函数；启用隐形按钮模式。',
     },
+    {
+      name: 'interactiveRef',
+      type: 'RefObject<HTMLElement | null>',
+      description: '指向嵌套控件（如 startContent 中的复选框）的 ref，该控件承载项目的键盘访问和操作。行成为更大的点击/触摸目标，将表面点击委托给该控件（useClickableContainer），且不渲染不可见按钮/锚点，因此行不会增加第二个 Tab 停留点（WCAG 4.1.2）。与 onClick/href 互斥——设置后二者将被忽略。',
+    },
     {
       name: 'href',
       type: 'string',
@@ -162,6 +172,8 @@ export const docsDense = {
     startContent: 'Content before label area (e.g. icon, avatar).',
     endContent: 'Content after label area (e.g. badge, chevron).',
     onClick: 'Click handler; enables invisible button pattern.',
+    interactiveRef:
+      'Ref to a nested control that owns the item\'s keyboard access/action; row delegates surface clicks to it (useClickableContainer), no invisible button/anchor, no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href.',
     href: 'Link URL; enables invisible anchor pattern.',
     target: 'Link target attribute, only when href provided. target="_blank" auto-adds noopener noreferrer.',
     rel: 'Link relationship tokens. noopener noreferrer are merged for target="_blank".',

package/src/List/ListItem.tsx

@@ -16,7 +16,7 @@
  * - /packages/core/src/List/List.test.tsx
  * - /packages/core/src/List/index.ts
  * - /apps/storybook/stories/List.stories.tsx
- * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 
 import {use, type ReactNode} from 'react';
@@ -75,6 +75,17 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
    */
   onClick?: (e: React.MouseEvent) => void;
 
+  /**
+   * Ref to a nested control inside the item (e.g. a checkbox in
+   * `startContent`) that already provides the item's keyboard access and
+   * action. When set, the item becomes an enlarged click/tap target that
+   * delegates surface clicks to that control via the `useClickableContainer`
+   * pattern: it renders no invisible button/anchor, so the row adds no second
+   * tab stop (WCAG 4.1.2 — one focusable control per option). Mutually
+   * exclusive with `onClick`/`href` — when set those are ignored.
+   */
+  interactiveRef?: React.RefObject<HTMLElement | null>;
+
   /**
    * URL for link items. Renders an invisible anchor element.
    * Automatically enables hover/press styles when provided.
@@ -199,6 +210,7 @@ export function ListItem({
   startContent,
   endContent,
   onClick,
+  interactiveRef,
   href,
   target,
   rel,
@@ -239,6 +251,7 @@ export function ListItem({
       description={description}
       endContent={endContent}
       onClick={onClick}
+      interactiveRef={interactiveRef}
       href={href}
       target={target as '_blank' | '_self'}
       rel={rel}

package/src/Markdown/Markdown.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Markdown',
@@ -128,6 +128,38 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-markdown', visualProps: ['density']},
+      {
+        className: 'astryx-markdown-heading',
+        visualProps: ['density', 'level'],
+      },
+      {
+        className: 'astryx-markdown-paragraph',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-list',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-codeblock',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-blockquote',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-table',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-hr',
+        visualProps: ['density'],
+      },
+      {
+        className: 'astryx-markdown-image',
+        visualProps: ['density'],
+      },
     ],
   },
   usage: {
@@ -292,6 +324,54 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-markdown', visualProps: ['density']},
+      {
+        className: 'astryx-markdown-heading',
+        visualProps: ['density', 'level'],
+        description:
+          '每个渲染的标题块（h1–h6）。覆盖 marginBlockStart/marginBlockEnd 可调整标题周围的间距；反映 data-density 和 data-level，因此主题可按密度和标题层级设置间距。仅适用于默认标题渲染——自定义的 components.heading 拥有自己的样式。',
+      },
+      {
+        className: 'astryx-markdown-paragraph',
+        visualProps: ['density'],
+        description:
+          '每个渲染的段落块。覆盖 marginBlockStart/marginBlockEnd 可调整段落之间的间距。反映 data-density，因此主题可以为不同密度设置不同的间距。',
+      },
+      {
+        className: 'astryx-markdown-list',
+        visualProps: ['density'],
+        description:
+          '每个渲染的列表块（有序、无序和任务列表）。覆盖 marginBlockStart/marginBlockEnd 可调整列表周围的间距；反映 data-density。',
+      },
+      {
+        className: 'astryx-markdown-codeblock',
+        visualProps: ['density'],
+        description:
+          '每个渲染的代码块外层容器。覆盖 marginBlockStart/marginBlockEnd 可调整代码块周围的间距；反映 data-density。仅适用于默认渲染——自定义的 components.code 拥有自己的样式。',
+      },
+      {
+        className: 'astryx-markdown-blockquote',
+        visualProps: ['density'],
+        description:
+          '每个渲染的引用块（与 astryx-blockquote 目标共用同一元素）。覆盖 marginBlockStart/marginBlockEnd 可调整引用块周围的间距；反映 data-density。仅适用于默认渲染——自定义的 components.blockquote 拥有自己的样式。',
+      },
+      {
+        className: 'astryx-markdown-table',
+        visualProps: ['density'],
+        description:
+          '每个渲染的表格外层容器。覆盖 marginBlockStart/marginBlockEnd 可调整表格周围的间距；反映 data-density。',
+      },
+      {
+        className: 'astryx-markdown-hr',
+        visualProps: ['density'],
+        description:
+          '每个渲染的水平分隔线。覆盖 marginBlockStart/marginBlockEnd 可调整分隔线周围的间距；反映 data-density。仅适用于默认渲染——自定义的 components.hr 拥有自己的样式。',
+      },
+      {
+        className: 'astryx-markdown-image',
+        visualProps: ['density'],
+        description:
+          '每个渲染的块级图片外层容器（以及损坏图片的占位符）。覆盖 marginBlockStart/marginBlockEnd 可调整图片周围的间距；反映 data-density。仅适用于默认渲染——自定义的 components.image 拥有自己的样式。',
+      },
     ],
   },
   usage: {

package/src/Markdown/Markdown.test.tsx

@@ -2,6 +2,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
+import type {ReactNode} from 'react';
 import {Markdown} from './Markdown';
 import type {MarkdownInlinePlugin} from './Markdown';
 
@@ -34,6 +35,97 @@ describe('Markdown', () => {
     expect(para).toHaveAttribute('role', 'paragraph');
   });
 
+  it('renders the astryx-markdown-paragraph theme target on each paragraph', () => {
+    render(<Markdown>{'First para\n\nSecond para'}</Markdown>);
+    const first = screen.getByText('First para');
+    const second = screen.getByText('Second para');
+    // Stable theme-target class lets a theme adjust the inter-paragraph gap
+    // (marginBlockStart/marginBlockEnd) via defineTheme without reaching for
+    // fragile descendant selectors or global spacing tokens.
+    expect(first.className).toContain('astryx-markdown-paragraph');
+    expect(second.className).toContain('astryx-markdown-paragraph');
+  });
+
+  describe('block spacing theme targets', () => {
+    // Every block type renders a stable astryx-markdown-<block> class so a
+    // theme can tune the gap around it (marginBlockStart/marginBlockEnd) via
+    // defineTheme — the whole prose rhythm is themeable, not just paragraphs.
+    it('renders a stable theme-target class on every block type', () => {
+      const {container} = render(
+        <Markdown>
+          {[
+            '# Heading',
+            'Paragraph text',
+            '- item one',
+            '```\ncode\n```',
+            '> quoted',
+            '| a | b |\n| - | - |\n| 1 | 2 |',
+            '---',
+            '![alt](https://example.com/x.png)',
+          ].join('\n\n')}
+        </Markdown>,
+      );
+      for (const cls of [
+        'astryx-markdown-heading',
+        'astryx-markdown-paragraph',
+        'astryx-markdown-list',
+        'astryx-markdown-codeblock',
+        'astryx-markdown-blockquote',
+        'astryx-markdown-table',
+        'astryx-markdown-hr',
+        'astryx-markdown-image',
+      ]) {
+        expect(
+          container.querySelector(`.${cls}`),
+          `expected a .${cls} element`,
+        ).not.toBeNull();
+      }
+    });
+
+    it('renders the theme target on task lists too', () => {
+      const {container} = render(<Markdown>{'- [ ] todo'}</Markdown>);
+      expect(container.querySelector('.astryx-markdown-list')).not.toBeNull();
+    });
+
+    it('reflects density on block targets as data-density', () => {
+      const {rerender} = render(<Markdown>{'Hello world'}</Markdown>);
+      // Default density is reflected so themes can tune spacing per density.
+      expect(screen.getByText('Hello world')).toHaveAttribute(
+        'data-density',
+        'default',
+      );
+      rerender(<Markdown density="compact">{'Hello world'}</Markdown>);
+      expect(screen.getByText('Hello world')).toHaveAttribute(
+        'data-density',
+        'compact',
+      );
+    });
+
+    it('reflects the heading level on the heading target as data-level', () => {
+      render(<Markdown>{'## Section'}</Markdown>);
+      const heading = screen.getByText('Section');
+      expect(heading.className).toContain('astryx-markdown-heading');
+      expect(heading).toHaveAttribute('data-level', '2');
+    });
+
+    it('does not apply the theme target when a custom block component is provided', () => {
+      const {container} = render(
+        <Markdown
+          components={{
+            heading: ({children}: {children: ReactNode}) => (
+              <h2 data-custom>{children}</h2>
+            ),
+          }}>
+          {'# Custom heading'}
+        </Markdown>,
+      );
+      // Custom components own their own styling — the default target is not
+      // imposed on them.
+      expect(container.querySelector('.astryx-markdown-heading')).toBeNull();
+      expect(container.querySelector('[data-custom]')).not.toBeNull();
+    });
+  });
+
   it('renders inline display without block wrappers', () => {
     const {container} = render(
       <Markdown display="inline">{'Use `code` and **bold**'}</Markdown>,

package/src/Markdown/Markdown.tsx

@@ -226,7 +226,7 @@ const dynamicStyles = stylex.create({
 
 const cellAlignStyles = stylex.create({
   center: {textAlign: 'center'},
-  right: {textAlign: 'right'},
+  end: {textAlign: 'end'},
 });
 
 const styles = stylex.create({
@@ -1083,18 +1083,21 @@ function renderBlock(
       return (
         <Tag
           key={index}
-          {...stylex.props(
-            styles.headingBase,
-            headingStyles[level],
-            spacing,
-            contentWidthValue != null
-              ? dynamicStyles.proseWidth(contentWidthValue)
-              : null,
-            contentAlign !== 'start'
-              ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
-              : null,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-heading', {density, level}),
+            stylex.props(
+              styles.headingBase,
+              headingStyles[level],
+              spacing,
+              contentWidthValue != null
+                ? dynamicStyles.proseWidth(contentWidthValue)
+                : null,
+              contentAlign !== 'start'
+                ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
+                : null,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           {headingChildren}
         </Tag>
@@ -1130,16 +1133,19 @@ function renderBlock(
         <div
           key={index}
           role="paragraph"
-          {...stylex.props(
-            spacing,
-            contentWidthValue != null
-              ? dynamicStyles.proseWidth(contentWidthValue)
-              : null,
-            contentAlign !== 'start'
-              ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
-              : null,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-paragraph', {density}),
+            stylex.props(
+              spacing,
+              contentWidthValue != null
+                ? dynamicStyles.proseWidth(contentWidthValue)
+                : null,
+              contentAlign !== 'start'
+                ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
+                : null,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           {paraChildren}
         </div>
@@ -1161,11 +1167,14 @@ function renderBlock(
       return (
         <div
           key={index}
-          {...stylex.props(
-            spacing,
-            styles.codeBlockWrapper,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-codeblock', {density}),
+            stylex.props(
+              spacing,
+              styles.codeBlockWrapper,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           <CodeBlock
             code={node.content}
@@ -1207,6 +1216,7 @@ function renderBlock(
       return (
         <Blockquote
           key={index}
+          {...themeProps('markdown-blockquote', {density})}
           xstyle={[
             spacing,
             contentWidthValue != null
@@ -1254,10 +1264,13 @@ function renderBlock(
         return (
           <div
             key={index}
-            {...stylex.props(
-              spacing,
-              isFirst && styles.noMarginBlockStart,
-              isLast && styles.noMarginBlockEnd,
+            {...mergeProps(
+              themeProps('markdown-list', {density}),
+              stylex.props(
+                spacing,
+                isFirst && styles.noMarginBlockStart,
+                isLast && styles.noMarginBlockEnd,
+              ),
             )}>
             <CheckboxList
               label={t('@astryx.markdown.taskList')}
@@ -1327,16 +1340,19 @@ function renderBlock(
       return (
         <div
           key={index}
-          {...stylex.props(
-            spacing,
-            contentWidthValue != null
-              ? dynamicStyles.proseWidth(contentWidthValue)
-              : null,
-            contentAlign !== 'start'
-              ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
-              : null,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-list', {density}),
+            stylex.props(
+              spacing,
+              contentWidthValue != null
+                ? dynamicStyles.proseWidth(contentWidthValue)
+                : null,
+              contentAlign !== 'start'
+                ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign])
+                : null,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           <List
             listStyle={node.ordered ? 'decimal' : 'disc'}
@@ -1414,17 +1430,20 @@ function renderBlock(
           tabIndex={0}
           role="group"
           aria-label={t('@astryx.markdown.table')}
-          {...stylex.props(
-            styles.tableWrapper,
-            spacing,
-            contentWidthValue != null
-              ? dynamicStyles.blockWidth(contentWidthValue)
-              : null,
-            BLOCK_ALIGN_MARGIN[contentAlign] != null
-              ? dynamicStyles.blockAlign(BLOCK_ALIGN_MARGIN[contentAlign])
-              : null,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-table', {density}),
+            stylex.props(
+              styles.tableWrapper,
+              spacing,
+              contentWidthValue != null
+                ? dynamicStyles.blockWidth(contentWidthValue)
+                : null,
+              BLOCK_ALIGN_MARGIN[contentAlign] != null
+                ? dynamicStyles.blockAlign(BLOCK_ALIGN_MARGIN[contentAlign])
+                : null,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           <Table dividers="rows" textOverflow="wrap">
             <TableHeader>
@@ -1436,7 +1455,7 @@ function renderBlock(
                     xstyle={[
                       dynamicStyles.cellMinWidth(`${colMinWidths[i]}px`),
                       node.alignments[i] === 'center' && cellAlignStyles.center,
-                      node.alignments[i] === 'right' && cellAlignStyles.right,
+                      node.alignments[i] === 'right' && cellAlignStyles.end,
                     ]}>
                     {h.children.map((c, j) =>
                       renderInline(
@@ -1462,7 +1481,7 @@ function renderBlock(
                     key={j}
                     xstyle={[
                       node.alignments[j] === 'center' && cellAlignStyles.center,
-                      node.alignments[j] === 'right' && cellAlignStyles.right,
+                      node.alignments[j] === 'right' && cellAlignStyles.end,
                     ]}>
                     {cell.children.map((c, k) =>
                       renderInline(
@@ -1499,11 +1518,14 @@ function renderBlock(
       return (
         <hr
           key={index}
-          {...stylex.props(
-            styles.hr,
-            spacing,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-hr', {density}),
+            stylex.props(
+              styles.hr,
+              spacing,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}
         />
       );
@@ -1514,10 +1536,13 @@ function renderBlock(
         return (
           <div
             key={index}
-            {...stylex.props(
-              spacing,
-              isFirst && styles.noMarginBlockStart,
-              isLast && styles.noMarginBlockEnd,
+            {...mergeProps(
+              themeProps('markdown-image', {density}),
+              stylex.props(
+                spacing,
+                isFirst && styles.noMarginBlockStart,
+                isLast && styles.noMarginBlockEnd,
+              ),
             )}>
             [{node.alt}]
           </div>
@@ -1530,10 +1555,13 @@ function renderBlock(
       return (
         <div
           key={index}
-          {...stylex.props(
-            spacing,
-            isFirst && styles.noMarginBlockStart,
-            isLast && styles.noMarginBlockEnd,
+          {...mergeProps(
+            themeProps('markdown-image', {density}),
+            stylex.props(
+              spacing,
+              isFirst && styles.noMarginBlockStart,
+              isLast && styles.noMarginBlockEnd,
+            ),
           )}>
           <img src={safeSrc} alt={node.alt} {...stylex.props(styles.image)} />
         </div>

package/src/Markdown/parser.perf.test.ts

@@ -116,15 +116,19 @@ describe('parseMarkdown performance', () => {
 
   // Full re-parse benchmarks
   for (const size of sizes) {
-    it(`full re-parse ${size.name} (${size.paragraphs} paragraphs) under ${size.maxMs}ms`, () => {
-      const text = generateAIResponse(size.paragraphs);
-      const {elapsed, result} = measureBest(3, () => parseMarkdown(text));
-      console.log(
-        `  ${size.name} full parse: ${elapsed.toFixed(2)}ms → ${result.length} blocks`,
-      );
-      expect(elapsed).toBeLessThan(size.maxMs);
-      expect(result.length).toBeGreaterThan(0);
-    });
+    it(
+      `full re-parse ${size.name} (${size.paragraphs} paragraphs) under ${size.maxMs}ms`,
+      () => {
+        const text = generateAIResponse(size.paragraphs);
+        const {elapsed, result} = measureBest(3, () => parseMarkdown(text));
+        console.log(
+          `  ${size.name} full parse: ${elapsed.toFixed(2)}ms → ${result.length} blocks`,
+        );
+        expect(elapsed).toBeLessThan(size.maxMs);
+        expect(result.length).toBeGreaterThan(0);
+      },
+      size.maxMs + 5000,
+    );
   }
 
   // Streaming with full re-parse
@@ -132,19 +136,23 @@ describe('parseMarkdown performance', () => {
     {name: 'Medium', paragraphs: 50, maxMs: 5000},
     {name: 'XL', paragraphs: 500, maxMs: 30000},
   ]) {
-    it(`streaming full re-parse ${size.name} under ${size.maxMs}ms`, () => {
-      const text = generateAIResponse(size.paragraphs);
-      const chunkSize = 50;
-      const iterations = Math.ceil(text.length / chunkSize);
-      const start = performance.now();
-      const result = simulateStreamingFullReparse(text, chunkSize);
-      const elapsed = performance.now() - start;
-      console.log(
-        `  ${size.name} streaming full re-parse: ${elapsed.toFixed(2)}ms (${iterations} iterations)`,
-      );
-      expect(elapsed).toBeLessThan(size.maxMs);
-      expect(result.length).toBeGreaterThan(0);
-    });
+    it(
+      `streaming full re-parse ${size.name} under ${size.maxMs}ms`,
+      () => {
+        const text = generateAIResponse(size.paragraphs);
+        const chunkSize = 50;
+        const iterations = Math.ceil(text.length / chunkSize);
+        const start = performance.now();
+        const result = simulateStreamingFullReparse(text, chunkSize);
+        const elapsed = performance.now() - start;
+        console.log(
+          `  ${size.name} streaming full re-parse: ${elapsed.toFixed(2)}ms (${iterations} iterations)`,
+        );
+        expect(elapsed).toBeLessThan(size.maxMs);
+        expect(result.length).toBeGreaterThan(0);
+      },
+      size.maxMs + 5000,
+    );
   }
 
   // Streaming with incremental parse
@@ -152,19 +160,23 @@ describe('parseMarkdown performance', () => {
     {name: 'Medium', paragraphs: 50, maxMs: 5000},
     {name: 'XL', paragraphs: 500, maxMs: 30000},
   ]) {
-    it(`streaming incremental ${size.name} under ${size.maxMs}ms`, () => {
-      const text = generateAIResponse(size.paragraphs);
-      const chunkSize = 50;
-      const iterations = Math.ceil(text.length / chunkSize);
-      const start = performance.now();
-      const result = simulateStreamingIncremental(text, chunkSize);
-      const elapsed = performance.now() - start;
-      console.log(
-        `  ${size.name} streaming incremental: ${elapsed.toFixed(2)}ms (${iterations} iterations)`,
-      );
-      expect(elapsed).toBeLessThan(size.maxMs);
-      expect(result.length).toBeGreaterThan(0);
-    });
+    it(
+      `streaming incremental ${size.name} under ${size.maxMs}ms`,
+      () => {
+        const text = generateAIResponse(size.paragraphs);
+        const chunkSize = 50;
+        const iterations = Math.ceil(text.length / chunkSize);
+        const start = performance.now();
+        const result = simulateStreamingIncremental(text, chunkSize);
+        const elapsed = performance.now() - start;
+        console.log(
+          `  ${size.name} streaming incremental: ${elapsed.toFixed(2)}ms (${iterations} iterations)`,
+        );
+        expect(elapsed).toBeLessThan(size.maxMs);
+        expect(result.length).toBeGreaterThan(0);
+      },
+      size.maxMs + 5000,
+    );
   }
 
   // --- Incremental vs Full speedup benchmark ---