@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.ebed74f

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 ---

package/src/MetadataList/MetadataList.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: 'MetadataList',
@@ -89,7 +89,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -109,7 +109,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'label/value metadata display; column layout, collapse, orientation variants',
   usage: {

package/src/MetadataList/MetadataList.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/MetadataList/MetadataList.test.tsx
  * - /packages/core/src/MetadataList/index.ts
  * - /apps/storybook/stories/MetadataList.stories.tsx
- * - /packages/cli/templates/blocks/components/MetadataList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MetadataList/ (showcase blocks)
  */
 
 import {Children, useId, useMemo, useState, type ReactNode} from 'react';

package/src/MetadataList/MetadataListItem.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: 'MetadataListItem',

package/src/MetadataList/MetadataListItem.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/MetadataList/MetadataList.test.tsx
  * - /packages/core/src/MetadataList/index.ts
  * - /apps/storybook/stories/MetadataList.stories.tsx
- * - /packages/cli/templates/blocks/components/MetadataList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MetadataList/ (showcase blocks)
  */
 
 import {use, type ReactNode} from 'react';

package/src/MobileNav/MobileNav.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: 'MobileNav',
@@ -109,7 +109,7 @@ export const docs = {
     ],
   },
 };
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'MobileNav',
   displayName: 'Mobile Nav',
@@ -171,7 +171,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Slide-out drawer overlay for mobile navigation. Mobile counterpart to SideNav; accepts same children (SideNavSection, SideNavItem, or any ReactNode).',

package/src/MobileNav/MobileNav.tsx

@@ -23,7 +23,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/MobileNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
  */
 
 import {

package/src/MoreMenu/MoreMenu.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: 'MoreMenu',
@@ -77,7 +77,7 @@ export const docs = {
     ],
   },
 };
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'MoreMenu',
   displayName: 'More Menu',
@@ -142,7 +142,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Overflow menu w/ three-dot icon trigger. Convenience wrapper composing icon-only Button w/ dropdown menu, eliminating boilerplate for state management, positioning, accessibility.',

package/src/MoreMenu/MoreMenu.tsx

@@ -15,11 +15,11 @@
  * - /packages/core/src/MoreMenu/MoreMenu.test.tsx
  * - /packages/core/src/MoreMenu/index.ts
  * - /apps/storybook/stories/MoreMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/MoreMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MoreMenu/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {DropdownMenu} from '../DropdownMenu/DropdownMenu';
 import {useSize} from '../SizeContext/SizeContext';
 import type {DropdownMenuOption} from '../DropdownMenu';
@@ -119,7 +119,7 @@ export function MoreMenu({
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.moreMenu.label');
   const size = useSize(sizeProp, 'md');
-  const moreIcon = getIcon('moreHorizontal');
+  const moreIcon = useIcon('moreHorizontal');
 
   return (
     <DropdownMenu