@astryxdesign/cli 0.1.6-canary.6ec65fb → 0.1.6-canary.896bdb1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.6-canary.6ec65fb",
+  "version": "0.1.6-canary.896bdb1",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -79,10 +79,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/core": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/lab": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.6ec65fb",
+    "@astryxdesign/charts": "0.1.6-canary.896bdb1",
+    "@astryxdesign/core": "0.1.6-canary.896bdb1",
+    "@astryxdesign/lab": "0.1.6-canary.896bdb1",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.896bdb1",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -100,10 +100,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/core": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/lab": "0.1.6-canary.6ec65fb",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.6ec65fb",
+    "@astryxdesign/charts": "0.1.6-canary.896bdb1",
+    "@astryxdesign/core": "0.1.6-canary.896bdb1",
+    "@astryxdesign/lab": "0.1.6-canary.896bdb1",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.896bdb1",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/lib/component-format.mjs

@@ -34,30 +34,15 @@ function getTargetDataAttributes(target) {
   ];
 }
 
-/**
- * Escape a value for a markdown table cell.
- *
- * A prop type is a union, and a union is spelled with the same `|` that GFM
- * uses to separate cells — backticks do not protect it. A row with more cells
- * than the header has columns gets the excess *discarded*, so an unescaped
- * `gap: 0 | 0.5 | ...` silently eats its own Default and Description columns.
- * <!-- SYNC: packages/core/src/Markdown/parser.ts (splits on unescaped pipes) -->
- */
-export function mdCell(value) {
-  return String(value ?? '').replace(/\|/g, '\\|');
-}
-
 function formatPropsTable(props) {
   if (!props || props.length === 0) return '';
   const lines = [];
   lines.push('| Prop | Type | Default | Description |');
   lines.push('|------|------|---------|-------------|');
   for (const p of props) {
-    const def = p.default ? `\`${mdCell(p.default)}\`` : '—';
+    const def = p.default ? `\`${p.default}\`` : '—';
     const req = p.required ? ' **(required)**' : '';
-    lines.push(
-      `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
-    );
+    lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
   }
   return lines.join('\n');
 }
@@ -192,7 +177,7 @@ export function formatFull(docs, options = {}) {
     sections.push('|---------|----------|-------------|');
     for (const el of docs.usage.anatomy) {
       const req = el.required ? 'Yes' : 'No';
-      sections.push(`| ${mdCell(el.name)} | ${req} | ${mdCell(el.description)} |`);
+      sections.push(`| ${el.name} | ${req} | ${el.description} |`);
     }
     sections.push('');
   }
@@ -297,9 +282,7 @@ export function formatFull(docs, options = {}) {
         varLines.push('| CSS Variable | Default | Description |');
         varLines.push('|-------------|---------|-------------|');
         for (const v of publicVars) {
-          varLines.push(
-            `| \`${mdCell(v.name)}\` | \`${mdCell(v.default)}\` | ${mdCell(v.description)} |`,
-          );
+          varLines.push(`| \`${v.name}\` | \`${v.default}\` | ${v.description} |`);
         }
         sections.push(varLines.join('\n') + '\n');
       }
@@ -395,8 +378,8 @@ export function formatCompact(docs, componentName, importHint) {
     propLines.push('| CSS Property | Sets |');
     propLines.push('|-------------|------|');
     for (const d of docs.theming.derived) {
-      const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${mdCell(v)}\``).join(', ');
-      propLines.push(`| \`${mdCell(d.property)}\` | ${target} |`);
+      const target = d.expand === 'container' ? 'container layout tokens' : (d.vars || []).map(v => `\`${v}\``).join(', ');
+      propLines.push(`| \`${d.property}\` | ${target} |`);
     }
     sections.push(propLines.join('\n') + '\n');
   }
@@ -412,19 +395,6 @@ export function formatCompact(docs, componentName, importHint) {
  *
  * For multi-component docs, extracts the entry matching componentName.
  */
-/**
- * Longest union `--detail brief` will spell out inside the one-line signature.
- *
- * The signature is a glance, not a reference: a six-member enum like
- * `start|center|end|between|around|evenly` reads at a glance, an eleven-member
- * spacing scale does not — and Stack carries four of them (gap, padding,
- * paddingInline, paddingBlock), so it printed the same scale four times. Longer
- * unions fall through to the terse prop list, exactly as they did when the type
- * was still the bare name `SpacingStep`. The full values are always one
- * `astryx component <Name>` away.
- */
-const SIGNATURE_UNION_MAX_MEMBERS = 8;
-
 export function formatBrief(docs, componentName, importHint, options = {}) {
   const displayName = componentName.startsWith('XDS')
     ? componentName.slice(3)
@@ -451,15 +421,13 @@ export function formatBrief(docs, componentName, importHint, options = {}) {
   const otherProps = [];
 
   for (const prop of props) {
-    const values =
-      prop.type.includes('|') && !prop.type.includes('ReactNode')
-        ? prop.type
-            .replace(/['"]/g, '')
-            .split('|')
-            .map(v => v.trim())
-        : null;
-    if (values && values.length <= SIGNATURE_UNION_MAX_MEMBERS) {
-      signatureProps.push(`${prop.name}: ${values.join('|')}`);
+    if (prop.type.includes('|') && !prop.type.includes('ReactNode')) {
+      const values = prop.type
+        .replace(/['"]/g, '')
+        .split('|')
+        .map(v => v.trim())
+        .join('|');
+      signatureProps.push(`${prop.name}: ${values}`);
     } else if (prop.required) {
       otherProps.unshift(`${prop.name}: ${prop.type.split('|')[0].trim()}`);
     } else {

package/src/lib/component-format.test.mjs

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect} from 'vitest';
-import {formatBrief, formatFull} from './component-format.mjs';
+import {formatFull} from './component-format.mjs';
 
 describe('formatFull sub-component rendering', () => {
   // Regression guard: sub-components are sometimes declared as a bare
@@ -93,97 +93,3 @@ describe('formatFull theming override keys', () => {
     expect(out).not.toContain("'astryx-table-cell': {");
   });
 });
-
-/** Pipes that actually separate cells — a `\|` is content, not a separator. */
-function cellPipes(row) {
-  return (row.match(/(?<!\\)\|/g) || []).length;
-}
-
-describe('markdown table cells escape their pipes', () => {
-  // A prop type is a union, and a union is spelled with `|` — the very
-  // character GFM uses to separate cells. Backticks do not protect it: a row
-  // with more cells than the header has columns gets its excess *discarded*,
-  // so an unescaped `gap: 0 | 0.5 | ...` silently eats its own Default and
-  // Description columns. See packages/core/src/Markdown/parser.ts, which
-  // splits on unescaped pipes and preserves `\|` as literal.
-  it('keeps a union-typed prop row at four cells', () => {
-    const docs = {
-      name: 'Grid',
-      description: 'A grid.',
-      props: [
-        {
-          name: 'gap',
-          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-          default: '2',
-          description: 'Spacing between all items.',
-        },
-      ],
-    };
-    const row = formatFull(docs)
-      .split('\n')
-      .find(l => l.startsWith('| `gap`'));
-
-    // A 4-column row has exactly 5 separators. Unescaped, this row had 15.
-    expect(cellPipes(row)).toBe(5);
-    expect(row).toContain('\\|');
-    // The columns the unescaped pipes were swallowing.
-    expect(row).toContain('`2`');
-    expect(row).toContain('Spacing between all items.');
-  });
-
-  it('escapes pipes in a description too', () => {
-    const docs = {
-      name: 'AppShell',
-      description: 'A shell.',
-      props: [
-        {
-          name: 'mobileNav',
-          type: 'ReactNode',
-          description: "Config. breakpoint is 'sm' | 'md' | 'lg' | 'none'.",
-        },
-      ],
-    };
-    const row = formatFull(docs)
-      .split('\n')
-      .find(l => l.startsWith('| `mobileNav`'));
-
-    expect(cellPipes(row)).toBe(5);
-  });
-});
-
-describe('formatBrief signature stays terse', () => {
-  // `--detail brief` exists to be token-cheap. It hoists union-typed props into
-  // the signature because a short enum reads at a glance — but an 11-member
-  // spacing scale does not, and Stack carries four of them (gap, padding,
-  // paddingInline, paddingBlock), so the same scale got printed four times.
-  // Long unions stay in the terse prop list, exactly as they did when the type
-  // was still the bare name `SpacingStep`.
-  it('hoists a short enum but not a long scale', () => {
-    const docs = {
-      name: 'HStack',
-      description: 'A stack.',
-      props: [
-        {
-          name: 'gap',
-          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-          description: 'Gap.',
-        },
-        {name: 'wrap', type: "'nowrap' | 'wrap' | 'wrap-reverse'", description: 'Wrap.'},
-        {
-          name: 'hAlign',
-          type: "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
-          description: 'Align.',
-        },
-      ],
-    };
-    const signature = formatBrief(docs, 'HStack', '').split('\n')[0];
-
-    // Short enums still earn their place in the signature.
-    expect(signature).toContain('wrap: nowrap|wrap|wrap-reverse');
-    expect(signature).toContain('hAlign: start|center|end|between|around|evenly');
-    // The long scale does not.
-    expect(signature).not.toContain('0|0.5|1|1.5|2|3|4|5|6|8|10');
-    // But the prop is still named, so it is not lost.
-    expect(formatBrief(docs, 'HStack', '')).toContain('gap');
-  });
-});

package/src/lib/hook-format.mjs

@@ -11,7 +11,6 @@
 
 import {discoverHooks, findHookDoc} from './hook-discovery.mjs';
 import {loadDocs} from './component-loader.mjs';
-import {mdCell} from './component-format.mjs';
 
 /**
  * Build a signature string from hook docs.
@@ -52,11 +51,9 @@ function formatParamsTable(params) {
   lines.push('| Param | Type | Default | Description |');
   lines.push('|-------|------|---------|-------------|');
   for (const p of params) {
-    const def = p.default ? `\`${mdCell(p.default)}\`` : '\u2014';
+    const def = p.default ? `\`${p.default}\`` : '\u2014';
     const req = p.required ? ' **(required)**' : '';
-    lines.push(
-      `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
-    );
+    lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
   }
   return lines.join('\n');
 }
@@ -70,9 +67,7 @@ function formatReturnsTable(returns) {
   lines.push('| Field | Type | Description |');
   lines.push('|-------|------|-------------|');
   for (const r of returns) {
-    lines.push(
-      `| \`${mdCell(r.name)}\` | \`${mdCell(r.type)}\` | ${mdCell(r.description)} |`,
-    );
+    lines.push(`| \`${r.name}\` | \`${r.type}\` | ${r.description} |`);
   }
   return lines.join('\n');
 }