@astryxdesign/cli 0.3.0-canary.e9fc2bb → 0.3.0-canary.ec85ba0

package/api/template/template.test.mjs

@@ -52,6 +52,32 @@ describe('stripTemplateAssetRefs', () => {
     const out = stripTemplateAssetRefs(src);
     expect(out).toBe(src);
   });
+
+  it('strips a /template-assets .mp4 source to an empty string, not the image data URI (#4780)', () => {
+    const src = "src: '/template-assets/Nature-1.mp4',";
+    const out = stripTemplateAssetRefs(src);
+    expect(out).toBe("src: '',");
+    expect(out).not.toContain('data:image/svg+xml,');
+    expect(out).not.toContain('/template-assets/');
+  });
+
+  it('strips other video extensions (.webm, .mov, .ogv) the same way', () => {
+    for (const ext of ['webm', 'mov', 'ogv']) {
+      const src = `src: '/template-assets/clip.${ext}',`;
+      const out = stripTemplateAssetRefs(src);
+      expect(out).toBe("src: '',");
+    }
+  });
+
+  it('still replaces an adjacent image reference with the placeholder when a video reference is also present', () => {
+    const src = [
+      "poster: '/template-assets/Nature-1-poster.jpg',",
+      "src: '/template-assets/Nature-1.mp4',",
+    ].join('\n');
+    const out = stripTemplateAssetRefs(src);
+    expect(out).toContain('data:image/svg+xml,');
+    expect(out).toContain("src: '',");
+  });
 });
 
 describe('template --skeleton component extraction (prefix-agnostic)', () => {

package/assets/codemods/transforms/v0.3.0/__tests__/migrate-table-rowexpansion-to-tree.test.mjs

@@ -0,0 +1,201 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../migrate-table-rowexpansion-to-tree.mjs'
+  );
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+function normalize(str) {
+  return str
+    .replace(/\s+/g, ' ')
+    .replace(/\{\s+/g, '{')
+    .replace(/\s+\}/g, '}')
+    .trim();
+}
+
+describe('migrate-table-rowexpansion-to-tree', () => {
+  it('rewrites the useTableRowExpansionState import to useTableTreeState', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('useTableRowExpansionState');
+    expect(output).toContain('useTableTreeState');
+    expect(output).toContain('useTableTreeData');
+  });
+
+  it('maps baseData to data and getChildren to childrenKey', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    const n = normalize(output);
+    expect(n).toContain('data: tree');
+    expect(n).toContain("childrenKey: 'children'");
+    expect(output).not.toContain('baseData');
+    expect(output).not.toContain('getChildren');
+  });
+
+  it('maps getRowKey to idKey preserving the accessor function', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    const n = normalize(output);
+    expect(n).toContain('idKey: item => item.id');
+    expect(output).not.toContain('getRowKey');
+  });
+
+  it('swaps the useTableRowExpansion plugin call for useTableTreeData', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    // The state hook now returns treeConfig; the plugin consumes it.
+    expect(output).toContain('treeConfig');
+    expect(output).toContain('useTableTreeData(treeConfig)');
+    expect(output).not.toMatch(/useTableRowExpansion\(/);
+  });
+
+  it('maps getIsItemExpandable to isItemExpandable', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    getIsItemExpandable: item => item.type === 'folder',
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('isItemExpandable');
+    expect(output).not.toContain('getIsItemExpandable');
+  });
+
+  it('leaves the new detail-panel usage (renderExpanded) untouched', async () => {
+    const input = `import {Table, useTableRowExpansion} from '@astryxdesign/core';
+function C() {
+  const expansion = useTableRowExpansion({
+    expandedKeys,
+    onToggle,
+    getRowKey: item => item.id,
+    renderExpanded: item => <Details item={item} />,
+  });
+  return <Table data={rows} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    // No useTableRowExpansionState import here, and renderExpanded present:
+    // this is the new detail-panel API. The codemod must not touch it.
+    expect(output).toBe(input);
+  });
+
+  it('does not touch files that never imported the row-expansion hooks', async () => {
+    const input = `import {Table, useTableSelection} from '@astryxdesign/core';
+const t = <Table data={rows} columns={cols} idKey="id" />;`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('supports the @xds/core import source alias', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@xds/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('useTableTreeState');
+    expect(output).not.toContain('useTableRowExpansionState');
+  });
+
+  it('emits treeConfig as a shorthand (not treeConfig: treeConfig)', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('treeConfig: treeConfig');
+    expect(normalize(output)).toContain('visibleData: data');
+  });
+
+  it('leaves a migration guidance comment about expansion state', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('astryx-migration');
+    expect(output).toContain('defaultExpandedIds');
+  });
+});

package/assets/codemods/transforms/v0.3.0/index.mjs

@@ -40,6 +40,9 @@ import migrateLabCodeBlockImports, {
 import removeThemeTransitionTokenImports, {
   meta as removeThemeTransitionTokenImportsMeta,
 } from './remove-theme-transition-token-imports.mjs';
+import migrateTableRowExpansionToTree, {
+  meta as migrateTableRowExpansionToTreeMeta,
+} from './migrate-table-rowexpansion-to-tree.mjs';
 
 export default [
   {
@@ -87,4 +90,9 @@ export default [
     transform: removeThemeTransitionTokenImports,
     meta: removeThemeTransitionTokenImportsMeta,
   },
+  {
+    name: 'migrate-table-rowexpansion-to-tree',
+    transform: migrateTableRowExpansionToTree,
+    meta: migrateTableRowExpansionToTreeMeta,
+  },
 ];

package/assets/codemods/transforms/v0.3.0/migrate-table-rowexpansion-to-tree.mjs

@@ -0,0 +1,214 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate tree-mode useTableRowExpansion to the tree plugin
+ *
+ * useTableRowExpansion is now a detail-panel plugin (renderExpanded). Its old
+ * tree mode (child rows that reuse the parent columns) moved to
+ * useTableTreeData + useTableTreeState, and useTableRowExpansionState was
+ * removed. This codemod rewrites the standard tree pattern:
+ *
+ *   const {data, expansionConfig} = useTableRowExpansionState({
+ *     baseData, getChildren, getRowKey, expandedKeys, setExpandedKeys,
+ *   });
+ *   const expansion = useTableRowExpansion(expansionConfig);
+ *
+ * into:
+ *
+ *   const {visibleData: data, treeConfig} = useTableTreeState({
+ *     data: baseData, childrenKey: 'children', idKey: getRowKey, ...
+ *   });
+ *   const expansion = useTableTreeData(treeConfig);
+ *
+ * Files that use the new detail-panel API (renderExpanded, no
+ * useTableRowExpansionState import) are left untouched.
+ */
+
+export const meta = {
+  title: 'Migrate tree-mode useTableRowExpansion to the tree plugin',
+  description:
+    'Rewrites the removed useTableRowExpansionState tree pattern to useTableTreeState + useTableTreeData. Detail-panel usage (renderExpanded) is left untouched.',
+  pr: '#4612',
+};
+
+const IMPORT_SOURCES = new Set([
+  '@astryxdesign/core',
+  '@astryxdesign/core/Table',
+  '@xds/core',
+  '@xds/core/Table',
+]);
+
+/**
+ * @param {import('../../../../authoring/codemod/type').AstryxCodemodFile} file
+ * @param {import('../../../../authoring/codemod/type').CodemodTransformApi} api
+ * @returns {string | null | undefined}
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Only act on files importing the removed state hook. Detail-panel-only
+  // usage (useTableRowExpansion alone) is the new API and must be left alone.
+  let stateLocal = null;
+  let pluginLocal = null;
+  /** @type {any[]} */
+  const importPaths = [];
+  root.find(j.ImportDeclaration).forEach((/** @type {any} */ path) => {
+    if (!IMPORT_SOURCES.has(path.node.source.value)) return;
+    for (const spec of path.node.specifiers ?? []) {
+      if (spec.type !== 'ImportSpecifier') continue;
+      if (spec.imported.name === 'useTableRowExpansionState') {
+        stateLocal = spec.local?.name ?? spec.imported.name;
+        importPaths.push(path);
+      }
+      if (spec.imported.name === 'useTableRowExpansion') {
+        pluginLocal = spec.local?.name ?? spec.imported.name;
+      }
+    }
+  });
+  if (!stateLocal) return undefined;
+
+  let hasChanges = false;
+
+  // --- 1. Rewrite the state hook call + its config object ---
+  root
+    .find(j.CallExpression, {callee: {name: stateLocal}})
+    .forEach((/** @type {any} */ path) => {
+      const arg = path.node.arguments[0];
+      if (!arg || arg.type !== 'ObjectExpression') return;
+
+      /** @type {any} */
+      let getChildrenValue = null;
+      const nextProps = [];
+      for (const prop of arg.properties) {
+        const key =
+          prop.key?.name ?? (prop.key?.value ? String(prop.key.value) : null);
+        if (key === 'baseData') {
+          nextProps.push(j.property('init', j.identifier('data'), prop.value));
+        } else if (key === 'getChildren') {
+          getChildrenValue = prop.value;
+          // childrenKey is emitted below (default 'children').
+        } else if (key === 'getRowKey') {
+          nextProps.push(j.property('init', j.identifier('idKey'), prop.value));
+        } else if (key === 'getIsItemExpandable') {
+          nextProps.push(
+            j.property('init', j.identifier('isItemExpandable'), prop.value),
+          );
+        } else if (key === 'expandedKeys' || key === 'setExpandedKeys') {
+          // The tree state hook owns expansion internally (uncontrolled) or
+          // via expandedIds/onExpandedIdsChange (controlled). The 1:1
+          // controlled mapping is not mechanical, so these are dropped and a
+          // guidance comment is attached below.
+          continue;
+        } else {
+          nextProps.push(prop);
+        }
+      }
+
+      // childrenKey: derive the literal when getChildren is the canonical
+      // `item => item.children` / `item.children ?? []`; otherwise keep the
+      // default and let the guidance comment flag it.
+      nextProps.splice(
+        1,
+        0,
+        j.property('init', j.identifier('childrenKey'), j.literal('children')),
+      );
+
+      arg.properties = nextProps;
+      path.node.callee = j.identifier('useTableTreeState');
+      hasChanges = true;
+
+      // Rename the destructured result: data -> visibleData (aliased back to
+      // the local name), expansionConfig -> treeConfig.
+      const declarator = path.parent.node;
+      if (
+        declarator.type === 'VariableDeclarator' &&
+        declarator.id.type === 'ObjectPattern'
+      ) {
+        for (const p of declarator.id.properties) {
+          if (p.type !== 'ObjectProperty' && p.type !== 'Property') continue;
+          const kName = p.key?.name;
+          if (kName === 'data') {
+            // {data} -> {visibleData: data}
+            p.key = j.identifier('visibleData');
+            if (p.shorthand) {
+              p.shorthand = false;
+              p.value = j.identifier('data');
+            }
+          } else if (kName === 'expansionConfig') {
+            // {expansionConfig} -> {treeConfig} (keep it shorthand).
+            p.key = j.identifier('treeConfig');
+            if (p.value?.type === 'Identifier') {
+              p.value = j.identifier('treeConfig');
+              p.shorthand = true;
+            }
+          }
+        }
+      }
+
+      // Attach a one-line migration note as a leading comment on the
+      // statement, so a human confirms the expansion-state wiring.
+      const stmt = path.parent.parent.node;
+      if (stmt && !stmt.comments) {
+        stmt.comments = [
+          j.commentLine(
+            ' astryx-migration: verify tree expansion state. useTableTreeState',
+            true,
+            false,
+          ),
+          j.commentLine(
+            ' is uncontrolled by default; pass defaultExpandedIds, or',
+            true,
+            false,
+          ),
+          j.commentLine(
+            ' expandedIds + onExpandedIdsChange for the old controlled set.',
+            true,
+            false,
+          ),
+        ];
+      }
+      void getChildrenValue;
+    });
+
+  // --- 2. Swap the plugin call: useTableRowExpansion(cfg) -> useTableTreeData(cfg) ---
+  if (pluginLocal) {
+    root
+      .find(j.CallExpression, {callee: {name: pluginLocal}})
+      .forEach((/** @type {any} */ path) => {
+        // Rename the argument identifier expansionConfig -> treeConfig.
+        const a = path.node.arguments[0];
+        if (a && a.type === 'Identifier' && a.name === 'expansionConfig') {
+          path.node.arguments[0] = j.identifier('treeConfig');
+        }
+        path.node.callee = j.identifier('useTableTreeData');
+        hasChanges = true;
+      });
+  }
+
+  if (!hasChanges) return undefined;
+
+  // --- 3. Fix imports: drop the removed hooks, add the tree hooks ---
+  for (const path of importPaths) {
+    const specs = path.node.specifiers.filter(
+      (/** @type {any} */ s) =>
+        !(
+          s.type === 'ImportSpecifier' &&
+          (s.imported.name === 'useTableRowExpansionState' ||
+            s.imported.name === 'useTableRowExpansion')
+        ),
+    );
+    const existing = new Set(
+      specs.map((/** @type {any} */ s) => s.imported?.name),
+    );
+    if (!existing.has('useTableTreeState')) {
+      specs.push(j.importSpecifier(j.identifier('useTableTreeState')));
+    }
+    if (!existing.has('useTableTreeData')) {
+      specs.push(j.importSpecifier(j.identifier('useTableTreeData')));
+    }
+    path.node.specifiers = specs;
+  }
+
+  return root.toSource({quote: 'single'});
+}

package/assets/templates/blocks/components/Table/TableRowExpansionTable.tsx

@@ -6,90 +6,93 @@ import {useState} from 'react';
 import {
   Table,
   useTableRowExpansion,
-  useTableRowExpansionState,
   proportional,
   pixel,
 } from '@astryxdesign/core/Table';
+import {VStack, HStack} from '@astryxdesign/core/Stack';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
 
-interface FileNode extends Record<string, unknown> {
+interface Order extends Record<string, unknown> {
   id: string;
-  name: string;
-  type: 'folder' | 'file';
-  size: string;
-  children?: FileNode[];
+  customer: string;
+  status: string;
+  total: string;
+  items: {name: string; qty: number; price: string}[];
 }
 
-const fileTree: FileNode[] = [
+const orders: Order[] = [
   {
-    id: 'src',
-    name: 'src',
-    type: 'folder',
-    size: '—',
-    children: [
-      {
-        id: 'src/components',
-        name: 'components',
-        type: 'folder',
-        size: '—',
-        children: [
-          {
-            id: 'src/components/Button.tsx',
-            name: 'Button.tsx',
-            type: 'file',
-            size: '4.2 KB',
-            children: [],
-          },
-          {
-            id: 'src/components/Table.tsx',
-            name: 'Table.tsx',
-            type: 'file',
-            size: '12.8 KB',
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'src/index.ts',
-        name: 'index.ts',
-        type: 'file',
-        size: '0.4 KB',
-        children: [],
-      },
+    id: 'ord-1001',
+    customer: 'Ada Lovelace',
+    status: 'Shipped',
+    total: '$248.00',
+    items: [
+      {name: 'Mechanical keyboard', qty: 1, price: '$180.00'},
+      {name: 'Wrist rest', qty: 2, price: '$34.00'},
     ],
   },
   {
-    id: 'package.json',
-    name: 'package.json',
-    type: 'file',
-    size: '1.8 KB',
-    children: [],
+    id: 'ord-1002',
+    customer: 'Alan Turing',
+    status: 'Processing',
+    total: '$52.00',
+    items: [{name: 'USB-C cable', qty: 4, price: '$13.00'}],
+  },
+  {
+    id: 'ord-1003',
+    customer: 'Grace Hopper',
+    status: 'Delivered',
+    total: '$1,200.00',
+    items: [{name: 'Standing desk', qty: 1, price: '$1,200.00'}],
   },
 ];
 
 const columns = [
-  {key: 'name', header: 'Name', width: proportional(2)},
-  {key: 'type', header: 'Type', width: pixel(80)},
-  {key: 'size', header: 'Size', width: pixel(90)},
+  {key: 'customer', header: 'Customer', width: proportional(2)},
+  {key: 'status', header: 'Status', width: pixel(130)},
+  {key: 'total', header: 'Total', width: pixel(110)},
 ];
 
 export default function TableRowExpansionTable() {
   const [expandedKeys, setExpandedKeys] = useState<Set<string>>(
-    new Set(['src']),
+    new Set(['ord-1001']),
   );
 
-  const {data, expansionConfig} = useTableRowExpansionState<FileNode>({
-    baseData: fileTree,
-    getChildren: item => item.children ?? [],
-    getRowKey: item => item.id,
+  const expansion = useTableRowExpansion<Order>({
     expandedKeys,
-    setExpandedKeys,
+    onToggle: key =>
+      setExpandedKeys(prev => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      }),
+    getRowKey: item => item.id,
+    // The detail panel renders arbitrary content below the row: here, the
+    // order's line items. Any component composes here (charts, forms, tables).
+    renderExpanded: item => (
+      <VStack gap={2}>
+        <Heading level={4}>Line items</Heading>
+        {item.items.map(line => (
+          <HStack key={line.name} gap={3}>
+            <Badge label={`x${line.qty}`} variant="info" />
+            <Text type="body">{line.name}</Text>
+            <Text type="body" color="secondary">
+              {line.price}
+            </Text>
+          </HStack>
+        ))}
+      </VStack>
+    ),
   });
 
-  const expansion = useTableRowExpansion(expansionConfig);
-
   return (
     <Table
-      data={data}
+      data={orders}
       columns={columns}
       idKey="id"
       hasHover

package/assets/templates/themes/neutral/neutralTheme.ts

@@ -323,8 +323,11 @@ export const neutralTheme = defineTheme({
 
     // =========================================================================
     // Radius — slightly larger than default (kept as-is)
+    // --radius-none and --radius-full are always fixed and must never be
+    // scaled by a theme (see defineTheme's radius config docs) — 0 and
+    // 9999px respectively, matching @astryxdesign/core's own defaults.
     // =========================================================================
-    '--radius-none': '0.25rem',
+    '--radius-none': '0px',
     '--radius-inner': '0.375rem',
     '--radius-element': '0.625rem',
     '--radius-container': '0.75rem',

package/authoring/doctypes/base/type.ts

@@ -310,6 +310,15 @@ export interface ComponentThemingTarget {
    *  `[data-checked="checked"]`. Legacy state classes are still emitted for
    *  compatibility. Omit if the element has no state-driven selectors. */
   states?: string[];
+  /** Set when this target has been RENAMED and this entry is the old name.
+   *  The component still emits the class (via `themeProps`'s `legacyNames`),
+   *  so existing themes keep working, but the docsite should steer readers to
+   *  the replacement. The value is the class name that supersedes this one,
+   *  without the `astryx-` prefix — e.g. `"checkbox-indicator"`.
+   *
+   *  A theme target is public API; renaming one without this is a silent
+   *  break for every theme styling it. */
+  deprecatedFor?: string;
 }
 
 /**

package/clients/cli/commands/build-theme.registry.test.mjs

@@ -60,7 +60,10 @@ function renderedClassLiterals() {
       const full = path.join(dir, entry.name);
       if (entry.isDirectory()) {
         walk(full);
-      } else if (entry.name.endsWith('.tsx') && !entry.name.endsWith('.test.tsx')) {
+      } else if (
+        (entry.name.endsWith('.tsx') || entry.name.endsWith('.ts')) &&
+        !entry.name.includes('.test.')
+      ) {
         const text = fs.readFileSync(full, 'utf8');
         for (const re of [
           /themeProps\(\s*'([^']+)'/g,
@@ -71,6 +74,16 @@ function renderedClassLiterals() {
             classes.add(m[1]);
           }
         }
+        // Renamed targets emit their old name too, via themeProps'
+        // `legacyNames`. Those classes are just as rendered as the primary
+        // one, so a doc entry for the old name is still backed by real output.
+        const legacyRe = /legacyNames:\s*\[([^\]]*)\]/g;
+        let lm;
+        while ((lm = legacyRe.exec(text)) !== null) {
+          for (const nm of lm[1].matchAll(/'([^']+)'/g)) {
+            classes.add(nm[1]);
+          }
+        }
       }
     }
   };

package/foundation/discovery/template-adapter.d.mts

@@ -11,11 +11,14 @@ export function pkgOf(t: {
     package?: string;
 }): string;
 /**
- * Replace demo image references with a self-contained placeholder data URI so
- * scaffolded pages render with zero setup. Builders drop in their own images.
+ * Replace demo asset references with a placeholder so scaffolded pages
+ * render with zero setup. Images get a self-contained data URI; videos
+ * (which have no equivalent inline placeholder — see VIDEO_EXTENSIONS) are
+ * stripped to an empty src instead of being mis-replaced with image data.
+ * Builders drop in their own media either way.
  *
  * @param {string} source - Template source code.
- * @returns {string} Source with demo image references replaced.
+ * @returns {string} Source with demo asset references replaced.
  */
 export function stripTemplateAssetRefs(source: string): string;
 /**

package/foundation/discovery/template-adapter.mjs

@@ -153,19 +153,33 @@ 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';
 
 /**
- * Demo-image sources to strip from scaffolded projects. Template demo imagery
+ * Extensions that need a video-safe placeholder rather than the image data
+ * URI (see stripTemplateAssetRefs). There's no equivalent self-contained
+ * inline placeholder for video: unlike an SVG data URI, a `<video src>`
+ * needs actual encoded media, and hand-authoring a valid tiny MP4/WebM
+ * blob isn't something we can do reliably here — an unverifiable, possibly
+ * still-broken binary would just trade one silent failure for another.
+ * Rather than mis-render image data as video (the original bug) or guess at
+ * binary bytes, video sources are stripped to an empty string so the
+ * scaffolded example is honest about needing the builder to supply their
+ * own file, instead of silently pointing at something that can't play.
+ *
+ * @type {Set<string>}
+ */
+const VIDEO_EXTENSIONS = new Set(['mp4', 'webm', 'mov', 'ogv']);
+
+/**
+ * Demo-asset sources to strip from scaffolded projects. Template demo imagery
  * is self-hosted under the docsite's `/template-assets/*` dir (committed there,
  * mirrored into the sandbox preview by scripts/sync-templates.js). Those paths
  * only resolve inside the Astryx docsite/sandbox, so on scaffold they're
- * replaced with a self-contained placeholder — a scaffolded project has no
- * `/template-assets/` dir and would otherwise 404. Genuine third-party URLs
- * (e.g. brand logos from paypalobjects.com) are intentionally left untouched.
+ * replaced — a scaffolded project has no `/template-assets/` dir and would
+ * otherwise 404. Genuine third-party URLs (e.g. brand logos from
+ * paypalobjects.com) are intentionally left untouched.
  *
- * @type {RegExp[]}
+ * @type {RegExp}
  */
-const DEMO_IMAGE_PATTERNS = [
-  /\/template-assets\/[\w-]+\.\w+/g,
-];
+const DEMO_ASSET_PATTERN = /\/template-assets\/[\w-]+\.(\w+)/g;
 
 /**
  * Normalize path into Unix path (using forward slashes) for consistent comparison
@@ -179,16 +193,18 @@ function toPosixPath(p) {
 }
 
 /**
- * Replace demo image references with a self-contained placeholder data URI so
- * scaffolded pages render with zero setup. Builders drop in their own images.
+ * Replace demo asset references with a placeholder so scaffolded pages
+ * render with zero setup. Images get a self-contained data URI; videos
+ * (which have no equivalent inline placeholder — see VIDEO_EXTENSIONS) are
+ * stripped to an empty src instead of being mis-replaced with image data.
+ * Builders drop in their own media either way.
  *
  * @param {string} source - Template source code.
- * @returns {string} Source with demo image references replaced.
+ * @returns {string} Source with demo asset references replaced.
  */
 export function stripTemplateAssetRefs(source) {
-  return DEMO_IMAGE_PATTERNS.reduce(
-    (out, pattern) => out.replace(pattern, PLACEHOLDER_IMAGE),
-    source,
+  return source.replace(DEMO_ASSET_PATTERN, (match, extension) =>
+    VIDEO_EXTENSIONS.has(extension.toLowerCase()) ? '' : PLACEHOLDER_IMAGE,
   );
 }
 /**

package/package.json

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