@astryxdesign/cli 0.1.1 → 0.1.2-canary.2149fa3

package/src/api/layout.test.mjs

@@ -0,0 +1,238 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Integration tests for the layout API against the real @astryxdesign/core
+ * registry and real template blocks. Every expansion is additionally
+ * checked for TSX syntactic validity with the TypeScript parser, so the
+ * "expansion emits compilable JSX" contract is enforced, not assumed.
+ */
+
+import {describe, it, expect, beforeAll} from 'vitest';
+import {mkdtempSync, writeFileSync, rmSync} from 'node:fs';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import ts from 'typescript';
+import {layoutExpand, layoutCheck, layoutGrammar} from './layout.mjs';
+import {buildRegistry} from '../lib/xle/registry.mjs';
+
+// The registry imports ~140 .doc.mjs modules on first use; under full-suite
+// parallel load that can exceed the default 5s test timeout. Warm it once.
+beforeAll(async () => {
+  await buildRegistry();
+}, 120_000);
+
+const SLOW = 30_000;
+
+/** Assert TSX parses cleanly; returns the source file for inspection. */
+function expectValidTsx(code) {
+  const sourceFile = ts.createSourceFile('generated.tsx', code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  const diagnostics = sourceFile.parseDiagnostics || [];
+  const messages = diagnostics.map(d => ts.flattenDiagnosticMessageText(d.messageText, ' '));
+  expect(messages).toEqual([]);
+  return sourceFile;
+}
+
+const LOGIN_COMPACT =
+  'Ctr[h="100dvh"] > C[w=400 p8] > V[g6] > ' +
+  '(V[g1] > Tx"Welcome back" + Tx[t=supporting]"Sign in to your account") + ' +
+  '(F > TI"Email"[t=email req] + TI"Password"[t=password req]) + ' +
+  '(H[j=between a=center] > CB"Remember me" + Lk[href="/forgot"]"Forgot password?") + ' +
+  'B.primary"Sign in"';
+
+const CHAT_OUTLINE = `
+AppShell
+  topNav: TN
+  Layout > LC !scroll
+    ChL
+      composer:
+        ChC
+      ChML
+        ChS "Today"
+        repeat 2:
+          ChM
+            ChB "Reply $"
+    Tbar "Actions"
+      B "Delete" opens=#confirm
+
+overlays:
+  AD#confirm "Delete item?"
+`;
+
+const DASHBOARD_COMPACT =
+  'A[@topNav=TN @sideNav=SN] > L > V[g6] > ' +
+  '(G[c4 g4] > C{card-callout}*4) + ' +
+  '(C[p0] > T[striped] > (TR > THC"Name" + THC"Amount") + (TR > TC"Order $" + TC"\\$12.00")*3)';
+
+describe('layoutExpand', () => {
+  it('expands the login card with typed state scaffolds', async () => {
+    const result = await layoutExpand(LOGIN_COMPACT);
+    expect(result.type).toBe('layout.expand');
+    const {code} = result.data;
+    expectValidTsx(code);
+
+    expect(code).toContain(`const [email, setEmail] = useState('');`);
+    expect(code).toContain(`const [rememberMe, setRememberMe] = useState(false);`);
+    expect(code).toContain('<XDSCenter height="100dvh">');
+    expect(code).toContain('variant="primary"');
+    // axis-neutral j/a resolved onto the HStack's real props
+    expect(code).toContain('hAlign="between"');
+    expect(code).toContain('vAlign="center"');
+    // payload routed to label props, not duplicated as children
+    expect(code).not.toMatch(/label="Forgot password\?"[\s\S]{0,80}Forgot password\?/);
+  }, SLOW);
+
+  it('expands the outline chat page: slots, repeat blocks, overlays, triggers', async () => {
+    const result = await layoutExpand(CHAT_OUTLINE);
+    const {code, form} = result.data;
+    expect(form).toBe('outline');
+    expectValidTsx(code);
+
+    expect(code).toContain('composer={');
+    // slot satisfied required prop — no double assignment, no TODO for it
+    expect(code.match(/composer=/g)).toHaveLength(1);
+    expect(code).toContain('TODO(xle): open #confirm');
+    expect(code).toContain('overlays — wire open state');
+    expect((code.match(/<XDSChatMessage\b/g) || [])).toHaveLength(2);
+  }, SLOW);
+
+  it('expands the dashboard: table partition, repeats with $ counter and \\$ escape', async () => {
+    const result = await layoutExpand(DASHBOARD_COMPACT);
+    const {code} = result.data;
+    expectValidTsx(code);
+
+    expect(code).toContain('<XDSTableHeader>');
+    expect(code).toContain('<XDSTableBody>');
+    expect(code).toContain('Order 1');
+    expect(code).toContain('Order 3');
+    expect(code).toContain('$12.00');
+    expect(code).not.toContain('112.00');
+    // {card-callout} now splices: the block is co-defined once and referenced
+    // four times — no TODO marker.
+    expect((code.match(/^function CardCallout\(\)/gm) || [])).toHaveLength(1);
+    expect((code.match(/<CardCallout \/>/g) || [])).toHaveLength(4);
+    expect(code).not.toContain("TODO(xle): content block 'CardCallout'");
+  }, SLOW);
+
+  it('compact and outline surfaces expand to identical TSX', async () => {
+    const check = await layoutCheck(LOGIN_COMPACT);
+    const fromCompact = await layoutExpand(LOGIN_COMPACT);
+    const fromOutline = await layoutExpand(check.data.outline, {form: 'outline'});
+    expect(fromOutline.data.code).toEqual(fromCompact.data.code);
+  }, SLOW);
+
+  it('expansion is deterministic', async () => {
+    const a = await layoutExpand(DASHBOARD_COMPACT);
+    const b = await layoutExpand(DASHBOARD_COMPACT);
+    expect(a.data.code).toEqual(b.data.code);
+  }, SLOW);
+
+  it('throws structured errors with suggestions on invalid expressions', async () => {
+    await expect(layoutExpand('A[p6] > Grdi')).rejects.toMatchObject({
+      code: 'ERR_LAYOUT_INVALID',
+      message: expect.stringMatching(/AppShell has no prop 'padding'/),
+    });
+  });
+
+  it('rejects non-PascalCase --name', async () => {
+    await expect(layoutExpand('V > C', {name: 'not pascal'})).rejects.toMatchObject({
+      code: 'ERR_INVALID_ARGUMENT',
+    });
+  });
+
+  it('surfaces parse errors with positions', async () => {
+    await expect(layoutExpand('V > > C')).rejects.toMatchObject({
+      code: 'ERR_LAYOUT_PARSE',
+      message: expect.stringMatching(/line 1/),
+    });
+  });
+});
+
+describe('layoutCheck', () => {
+  it('returns both canonical surfaces for valid input', async () => {
+    const result = await layoutCheck('V[g6] > C{card-callout}*2');
+    expect(result.data.valid).toBe(true);
+    expect(result.data.compact).toContain('{card-callout}');
+    expect(result.data.outline).toContain('C {card-callout} x2');
+  });
+
+  it('collects all errors instead of stopping at the first', async () => {
+    const result = await layoutCheck('A[p6] > V[g7] > Bd.sucess"x" + C{not-a-block}');
+    expect(result.data.valid).toBe(false);
+    expect(result.data.errors.length).toBeGreaterThanOrEqual(4);
+    const all = result.data.errors.map(e => e.message).join('\n');
+    expect(all).toMatch(/no prop 'padding'/);
+    expect(all).toMatch(/must be one of/);
+    expect(all).toMatch(/Unknown block/);
+  });
+});
+
+describe('template referencing', () => {
+  it('splices a template block: co-defined once, referenced, imports merged', async () => {
+    const result = await layoutExpand('S[p6] > C{card-callout}*3', {name: 'Demo'});
+    const {code} = result.data;
+    expectValidTsx(code);
+    // co-defined exactly once, referenced three times, no TODO
+    expect((code.match(/^function CardCallout\(\)/gm) || [])).toHaveLength(1);
+    expect((code.match(/<CardCallout \/>/g) || [])).toHaveLength(3);
+    expect(code).not.toContain('TODO(xle)');
+    // the block's own import is hoisted, and shared specifiers dedupe
+    expect((code.match(/from '@astryxdesign\/core\/Card'/g) || [])).toHaveLength(1);
+    // the block lost its export — it's a local declaration now
+    expect(code).not.toContain('export default function CardCallout');
+    expect(result.data.blocksReferenced).toEqual([{name: 'CardCallout', mode: 'splice'}]);
+  }, SLOW);
+
+  it('merges a stateful block useState into a single react import', async () => {
+    const result = await layoutExpand(
+      'V > TI"Search"[t=text] + {table-column-settings-table}',
+      {name: 'Demo'},
+    );
+    const {code} = result.data;
+    expectValidTsx(code);
+    // page TextInput scaffolds useState; block also uses useState → one import
+    expect((code.match(/^import \{useState\} from 'react';$/gm) || [])).toHaveLength(1);
+    expect(code).toContain('function TableColumnSettingsTable()');
+  }, SLOW);
+
+  it('imports app-registered local components (the local-component bridge)', async () => {
+    // Inside the workspace so @astryxdesign/core resolves; cleaned up after.
+    const cwd = mkdtempSync(join(process.cwd(), '.xle-imp-test-'));
+    try {
+      writeFileSync(
+        join(cwd, 'astryx.config.mjs'),
+        `export default {layout: {components: {KpiCard: '@/components/KpiCard', TimeRangePicker: {from: '@/components/TimeRangePicker'}}}};\n`,
+      );
+      const result = await layoutExpand('S[p6] > (G[c4 g4] > {kpi-card}*4) + {time-range-picker}', {
+        name: 'Demo',
+        cwd,
+      });
+      const {code} = result.data;
+      expectValidTsx(code);
+      expect(code).toContain("import {KpiCard} from '@/components/KpiCard';");
+      expect(code).toContain("import {TimeRangePicker} from '@/components/TimeRangePicker';");
+      expect((code.match(/<KpiCard \/>/g) || [])).toHaveLength(4);
+      expect(code).toContain('<TimeRangePicker />');
+      expect(result.data.blocksReferenced).toContainEqual({name: 'KpiCard', mode: 'import'});
+    } finally {
+      rmSync(cwd, {recursive: true, force: true});
+    }
+  }, SLOW);
+
+  it('parses a standalone {block} in both surfaces', async () => {
+    const check = await layoutCheck('G[c4 g4] > {card-callout}*2');
+    expect(check.data.valid).toBe(true);
+    expect(check.data.compact).toContain('{card-callout}*2');
+    expect(check.data.outline).toMatch(/\{card-callout\} x2/);
+  });
+});
+
+describe('layoutGrammar', () => {
+  it('emits the cheatsheet with branch-generated aliases', async () => {
+    const result = await layoutGrammar();
+    expect(result.data.text).toContain('TWO SURFACES');
+    expect(result.data.aliases.V).toBe('VStack');
+    expect(result.data.aliases.TB).toBe('TableBody');
+    // every alias target must exist — the table is registry-filtered
+    expect(Object.values(result.data.aliases)).not.toContain(undefined);
+  });
+});

package/src/api/template.mjs

@@ -7,7 +7,11 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import {CLI_ROOT, discoverExternalPackages} from '../utils/paths.mjs';
-import {assertWithin, isFilePathArg, PathSafetyError} from '../utils/path-safety.mjs';
+import {
+  assertWithin,
+  isFilePathArg,
+  PathSafetyError,
+} from '../utils/path-safety.mjs';
 import {AstryxError} from './error.mjs';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 import {loadConfig} from '../lib/config.mjs';
@@ -23,7 +27,7 @@ const BLOCKS_DIR = path.join(TEMPLATES_DIR, 'blocks');
  * or not. Mirrors apps/docsite/public/template-assets/placeholder.svg.
  */
 const PLACEHOLDER_IMAGE =
-  "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';
 
 /**
  * Demo-image sources to strip from scaffolded projects — Meta's lookaside CDN
@@ -60,9 +64,12 @@ export {discoverAll as discoverTemplates};
 export function listTemplates() {
   const all = [];
   if (fs.existsSync(PAGES_DIR)) {
-    all.push(...fs.readdirSync(PAGES_DIR, {withFileTypes: true})
-      .filter(e => e.isDirectory())
-      .map(e => e.name));
+    all.push(
+      ...fs
+        .readdirSync(PAGES_DIR, {withFileTypes: true})
+        .filter(e => e.isDirectory())
+        .map(e => e.name),
+    );
   }
   return all.sort();
 }
@@ -83,7 +90,8 @@ function findDocFiles(dir, pattern) {
 
 async function discoverPages() {
   if (!fs.existsSync(PAGES_DIR)) return [];
-  const dirs = fs.readdirSync(PAGES_DIR, {withFileTypes: true})
+  const dirs = fs
+    .readdirSync(PAGES_DIR, {withFileTypes: true})
     .filter(e => e.isDirectory());
 
   const templates = [];
@@ -138,7 +146,11 @@ async function discoverBlocks() {
  * @param {string} [cwd]
  */
 async function discoverExternalBlocks(cwd = process.cwd()) {
-  const externals = discoverExternalPackages(cwd);
+  const config = await loadConfig(cwd);
+  const integrationPackages = (config.loadedIntegrations ?? [])
+    .map(integration => integration.package)
+    .filter(Boolean);
+  const externals = [...discoverExternalPackages(cwd), ...integrationPackages];
   const blocks = [];
 
   for (const ext of externals) {
@@ -193,9 +205,7 @@ async function discoverAll() {
 export async function findRelatedBlocks(componentName, cwd) {
   const blocks = await discoverAllBlocks(cwd);
   return blocks.filter(b =>
-    b.componentsUsed.some(c =>
-      c.toLowerCase() === componentName.toLowerCase(),
-    ),
+    b.componentsUsed.some(c => c.toLowerCase() === componentName.toLowerCase()),
   );
 }
 
@@ -218,7 +228,7 @@ export async function findShowcase(componentName, cwd, options) {
     return true;
   });
 
-  const toResult = (b) => ({
+  const toResult = b => ({
     name: b.name,
     aspectRatio: b.aspectRatio,
     filePath: b.filePath,
@@ -242,8 +252,14 @@ export async function findShowcase(componentName, cwd, options) {
 }
 
 const UBIQUITOUS = new Set([
-  'Text', 'Heading', 'Button', 'HStack', 'VStack', 'Link',
-  'StackItem', 'Icon',
+  'Text',
+  'Heading',
+  'Button',
+  'HStack',
+  'VStack',
+  'Link',
+  'StackItem',
+  'Icon',
 ]);
 
 export function extractComponents(pagePath) {
@@ -259,22 +275,115 @@ export function extractComponents(pagePath) {
   while ((m = tagRegex.exec(src)) !== null) {
     matches.push(m[2]);
   }
-  return [...new Set(
-    matches
-      .filter(n => !['Theme', 'ThemeProvider'].includes(n))
-      .filter(n => !UBIQUITOUS.has(n))
-      .map(n => n.replace(/(Item|Section|Header|Content|Footer|Panel|Heading|CollapseButton|Column|Sortable|Selection|Group|Source)$/, ''))
-      .filter(Boolean),
-  )].sort();
+  return [
+    ...new Set(
+      matches
+        .filter(n => !['Theme', 'ThemeProvider'].includes(n))
+        .filter(n => !UBIQUITOUS.has(n))
+        .map(n =>
+          n.replace(
+            /(Item|Section|Header|Content|Footer|Panel|Heading|CollapseButton|Column|Sortable|Selection|Group|Source)$/,
+            '',
+          ),
+        )
+        .filter(Boolean),
+    ),
+  ].sort();
 }
 
 const STRUCTURAL = new Set([
-  'AppShell', 'Layout', 'LayoutHeader', 'LayoutContent', 'LayoutPanel',
-  'LayoutFooter', 'Card', 'Section', 'Grid', 'GridSpan', 'List',
-  'Table', 'TabList', 'Toolbar', 'SideNav', 'TopNav', 'Dialog',
-  'FormLayout', 'Center',
+  'AppShell',
+  'Layout',
+  'LayoutHeader',
+  'LayoutContent',
+  'LayoutPanel',
+  'LayoutFooter',
+  'Card',
+  'Section',
+  'Grid',
+  'GridSpan',
+  'List',
+  'Table',
+  'TabList',
+  'Toolbar',
+  'SideNav',
+  'TopNav',
+  'Dialog',
+  'FormLayout',
+  'Center',
 ]);
 
+const SPATIAL_PROPS = [
+  'padding',
+  'contentPadding',
+  'gap',
+  'rowGap',
+  'columnGap',
+  'columns',
+  'minChildWidth',
+  'hasDivider',
+  'defaultHasDividers',
+  'variant',
+  'density',
+  'role',
+  'height',
+  'width',
+  'maxWidth',
+];
+
+/**
+ * Copy allowlisted layout props verbatim from a JSX opening-tag fragment.
+ * Uses quote/brace matching so object literals and spaced strings stay intact.
+ *
+ * @param {string} tagText
+ * @returns {string[]}
+ */
+function extractSpatialAttrs(tagText) {
+  const attrs = [];
+  for (const name of SPATIAL_PROPS) {
+    const eqMatch = tagText.match(new RegExp(`\\b${name}\\s*=\\s*`));
+    if (eqMatch) {
+      const start = eqMatch.index;
+      let i = eqMatch.index + eqMatch[0].length;
+      const rest = tagText.slice(i);
+
+      if (rest[0] === '"' || rest[0] === "'") {
+        const q = rest[0];
+        i += 1;
+        while (i < tagText.length && tagText[i] !== q) {
+          if (tagText[i] === '\\') i += 1;
+          i += 1;
+        }
+        if (i < tagText.length) i += 1;
+      } else if (rest[0] === '{') {
+        let depth = 0;
+        while (i < tagText.length) {
+          if (tagText[i] === '{') depth += 1;
+          else if (tagText[i] === '}') {
+            depth -= 1;
+            if (depth === 0) {
+              i += 1;
+              break;
+            }
+          }
+          i += 1;
+        }
+      } else {
+        const bare = rest.match(/^[^\s/>]+/);
+        i += bare ? bare[0].length : 0;
+      }
+
+      attrs.push(tagText.slice(start, i).trim());
+      continue;
+    }
+
+    if (new RegExp(`\\b${name}(?=[\\s/>])`).test(tagText)) {
+      attrs.push(name);
+    }
+  }
+  return attrs;
+}
+
 function extractSkeleton(source) {
   const lines = source.split('\n');
   const out = [];
@@ -287,11 +396,18 @@ function extractSkeleton(source) {
   for (let i = 0; i < lines.length; i++) {
     const t = lines[i].trim();
 
-    if (t.match(/^export\s+default\s+function/)) { inDefaultExport = true; continue; }
-    if (inDefaultExport && t.match(/^return\s*\(/)) { capturing = true; continue; }
+    if (t.match(/^export\s+default\s+function/)) {
+      inDefaultExport = true;
+      continue;
+    }
+    if (inDefaultExport && t.match(/^return\s*\(/)) {
+      capturing = true;
+      continue;
+    }
     if (!capturing) continue;
     if (out.length >= MAX_LINES) {
-      if (!out[out.length - 1]?.includes('...')) out.push('  '.repeat(depth) + '...');
+      if (!out[out.length - 1]?.includes('...'))
+        out.push('  '.repeat(depth) + '...');
       continue;
     }
 
@@ -309,20 +425,13 @@ function extractSkeleton(source) {
         if (lines[j].includes('>')) break;
       }
 
-      const props = [];
-      const propRegex = /\b(padding|contentPadding|gap|rowGap|columnGap|columns|minChildWidth|hasDivider|defaultHasDividers|variant|density|role|height|width|maxWidth)\s*[=]\s*\{?\s*['"]?([^}'"\s,/>]+)/g;
-      let m;
-      while ((m = propRegex.exec(tagText)) !== null) {
-        const val = m[2];
-        if (val === 'true') props.push(m[1]);
-        else if (/^\d+$/.test(val)) props.push(`${m[1]}={${val}}`);
-        else props.push(`${m[1]}="${val}"`);
-      }
-
+      const props = extractSpatialAttrs(tagText);
       const hasSpatialProps = props.length > 0;
       const propStr = hasSpatialProps ? ' ' + props.join(' ') : '';
       const isVStack = comp === 'VStack' || comp === 'HStack';
-      const isSelfClosing = tagText.match(new RegExp('<' + tagName + '[^>]*/>', 's'));
+      const isSelfClosing = tagText.match(
+        new RegExp('<' + tagName + '[^>]*/>', 's'),
+      );
 
       if (isVStack && !hasSpatialProps) continue;
 
@@ -349,13 +458,18 @@ function extractSkeleton(source) {
       continue;
     }
 
-    const slotMatch = t.match(/^(header|content|footer|start|end|sideNav|topNav)\s*=\s*\{/);
+    const slotMatch = t.match(
+      /^(header|content|footer|start|end|sideNav|topNav)\s*=\s*\{/,
+    );
     if (slotMatch) {
       out.push('  '.repeat(depth) + `/* ${slotMatch[1]}: */`);
       continue;
     }
 
-    if (t.startsWith('<div') && (t.includes('padding') || t.includes('maxWidth') || t.includes('gap:'))) {
+    if (
+      t.startsWith('<div') &&
+      (t.includes('padding') || t.includes('maxWidth') || t.includes('gap:'))
+    ) {
       const styleProps = [];
       const divText = lines.slice(i, Math.min(i + 5, lines.length)).join(' ');
       const pp = divText.match(/padding[^:]*:\s*['"]?([^'"},)]+)/);
@@ -395,7 +509,7 @@ export async function getTemplateById(id, options = {}) {
         'Add a template.get function to astryx.config.mjs:\n\n' +
         '  export default {\n' +
         '    template: {\n' +
-        "      get: async (id) => { /* return template source string */ },\n" +
+        '      get: async (id) => { /* return template source string */ },\n' +
         '    },\n' +
         '  };',
       undefined,
@@ -408,7 +522,11 @@ export async function getTemplateById(id, options = {}) {
     source = await getter(id);
   } catch (err) {
     const detail = err instanceof Error ? err.message : String(err);
-    throw new AstryxError(`template.get("${id}") threw an error: ${detail}`, undefined, ERROR_CODES.ERR_TEMPLATE_GET);
+    throw new AstryxError(
+      `template.get("${id}") threw an error: ${detail}`,
+      undefined,
+      ERROR_CODES.ERR_TEMPLATE_GET,
+    );
   }
 
   if (source == null) {
@@ -450,7 +568,14 @@ export async function getTemplateById(id, options = {}) {
  * @returns {Promise<{type: string, data: unknown}>}
  */
 export async function template(name, options = {}) {
-  const {list = false, skeleton = false, show = false, targetPath, type, cwd = process.cwd()} = options;
+  const {
+    list = false,
+    skeleton = false,
+    show = false,
+    targetPath,
+    type,
+    cwd = process.cwd(),
+  } = options;
   const templates = await discoverAll();
 
   if (list || (!name && !skeleton)) {
@@ -487,7 +612,11 @@ export async function template(name, options = {}) {
       );
     }
     if (!fs.existsSync(match.filePath)) {
-      throw new AstryxError(`No source file found for template "${name}"`, undefined, ERROR_CODES.ERR_NO_SOURCE);
+      throw new AstryxError(
+        `No source file found for template "${name}"`,
+        undefined,
+        ERROR_CODES.ERR_NO_SOURCE,
+      );
     }
     const src = fs.readFileSync(match.filePath, 'utf-8');
     return {
@@ -502,7 +631,11 @@ export async function template(name, options = {}) {
   }
 
   if (!fs.existsSync(match.filePath)) {
-    throw new AstryxError(`No source file found for template "${name}"`, undefined, ERROR_CODES.ERR_NO_SOURCE);
+    throw new AstryxError(
+      `No source file found for template "${name}"`,
+      undefined,
+      ERROR_CODES.ERR_NO_SOURCE,
+    );
   }
 
   if (show || !targetPath) {
@@ -529,7 +662,11 @@ export async function template(name, options = {}) {
     });
   } catch (err) {
     if (err instanceof PathSafetyError) {
-      throw new AstryxError(err.message, undefined, ERROR_CODES.ERR_PATH_TRAVERSAL);
+      throw new AstryxError(
+        err.message,
+        undefined,
+        ERROR_CODES.ERR_PATH_TRAVERSAL,
+      );
     }
     throw err;
   }
@@ -546,9 +683,8 @@ export async function template(name, options = {}) {
     outputFilePath = resolvedTarget;
   } else {
     outputDir = resolvedTarget;
-    outputFileName = match.type === 'block'
-      ? path.basename(match.filePath)
-      : 'page.tsx';
+    outputFileName =
+      match.type === 'block' ? path.basename(match.filePath) : 'page.tsx';
     outputFilePath = path.join(outputDir, outputFileName);
   }
 
@@ -563,6 +699,11 @@ export async function template(name, options = {}) {
   const relOutput = path.relative(cwd, outputDir) || '.';
   return {
     type: 'template.copy',
-    data: {template: name, outputDir: relOutput, fileName: outputFileName, filesCopied: 1},
+    data: {
+      template: name,
+      outputDir: relOutput,
+      fileName: outputFileName,
+      filesCopied: 1,
+    },
   };
 }

package/src/api/template.test.mjs

@@ -74,5 +74,7 @@ describe('template --skeleton component extraction (prefix-agnostic)', () => {
     expect(result.data.skeleton.trim().length).toBeGreaterThan(0);
     expect(result.data.skeleton).toMatch(/<[A-Z]\w+/);
     expect(result.data.skeleton).not.toContain('<XDS');
+
+    expect(result.data.skeleton).toContain('columns={{minWidth: 200}}');
   });
 });