@astryxdesign/cli 0.3.0-canary.e6af10a → 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/docs/browser-support.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
       content: [
         {
           type: 'prose',
-          text: 'Astryx is built on modern web platform features: the Popover API, CSS anchor positioning, and CSS `light-dark()`. These let components stay small, accessible, and dependency-free, but they also set a floor on which browsers render everything correctly.',
+          text: 'Astryx is built on modern web platform features: the [`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) API, CSS anchor positioning, and CSS `light-dark()`. These let components stay small, accessible, and dependency-free, but they also set a floor on which browsers render everything correctly.',
         },
         {
           type: 'prose',
@@ -73,7 +73,7 @@ export const docs = {
               'Baseline 2026: the tightest requirement.',
             ],
             [
-              'Popover API',
+              '[`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) API',
               'Opens, stacks, and light-dismisses layered surfaces via the top layer.',
               'Baseline 2025.',
             ],
@@ -86,7 +86,7 @@ export const docs = {
         },
         {
           type: 'prose',
-          text: 'The gap that matters is between Tier 1 and Tier 2: the Popover API and `light-dark()` reached wide availability well before anchor positioning. So in Tier 2 browsers, layered surfaces open and dismiss correctly; they just are not positioned. This is the one feature most consumers will need to reason about.',
+          text: 'The gap that matters is between Tier 1 and Tier 2: the [`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) API and `light-dark()` reached wide availability well before anchor positioning. So in Tier 2 browsers, layered surfaces open and dismiss correctly; they just are not positioned. This is the one feature most consumers will need to reason about.',
         },
       ],
     },
@@ -112,7 +112,7 @@ export const docs = {
         },
         {
           type: 'prose',
-          text: 'If your product does not use any of these, it has no anchor-positioning requirement at all; it needs only `light-dark()` (Tier 2 and up) for correct theme colors. Layout, typography, forms, buttons, cards, tables, and navigation all work down to Tier 2 with no special handling.',
+          text: 'If your product does not use any of these, it has no anchor-positioning requirement at all; it needs only `light-dark()` (Tier 2 and up) for correct theme colors. Page layout, typography, forms, buttons, cards, tables, and navigation all work down to Tier 2 with no special handling.',
         },
       ],
     },
@@ -123,7 +123,7 @@ export const docs = {
           type: 'list',
           style: 'do',
           items: [
-            'Components never throw on missing platform APIs. Where a browser lacks the Popover API, layers fall back to plain visibility instead of crashing.',
+            'Components never throw on missing platform APIs. Where a browser lacks the [`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) API, layers fall back to plain visibility instead of crashing.',
             'Tier 1 and Tier 2 are officially supported and tested.',
             'Non-layered components render correctly down to Tier 2.',
           ],
@@ -192,7 +192,7 @@ const hasLightDark = CSS.supports('color', 'light-dark(#000, #fff)');`,
         },
         {
           type: 'prose',
-          text: 'This is not an arbitrary window: Baseline − 2 is close to where anchor positioning stops being available while the Popover API and `light-dark()` still are, so the tier boundary tracks a real capability edge, not a guessed date. The version floors above are reviewed and advanced roughly once a year as new Baseline years land. Always feature-detect rather than hardcoding version numbers, so your app adapts automatically as the platform moves.',
+          text: 'This is not an arbitrary window: Baseline − 2 is close to where anchor positioning stops being available while the [`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) API and `light-dark()` still are, so the tier boundary tracks a real capability edge, not a guessed date. The version floors above are reviewed and advanced roughly once a year as new Baseline years land. Always feature-detect rather than hardcoding version numbers, so your app adapts automatically as the platform moves.',
         },
       ],
     },

package/assets/docs/icons.doc.mjs

@@ -114,9 +114,9 @@ export const brandTheme = defineTheme({
           type: 'list',
           style: 'ordered',
           items: [
-            'Add the name to IconName type in packages/core/src/Icon/globalIconRegistry.tsx',
-            'Add the default SVG to packages/core/src/Icon/defaultIcons.tsx',
-            'Add a row to the Available Names table in packages/cli/docs/icons.doc.mjs',
+            'Add the name to IconName type in `packages/core/src/Icon/globalIconRegistry.tsx`',
+            'Add the default SVG to `packages/core/src/Icon/defaultIcons.tsx`',
+            'Add a row to the Available Names table in `packages/cli/assets/docs/icons.doc.mjs`',
           ],
         },
       ],

package/assets/docs/illustrations.doc.mjs

@@ -40,7 +40,7 @@ export const docs = {
             'Keep illustrations consistent in style across the product.',
             'Use simple, flat illustrations that work in both light and dark mode.',
             'Size illustrations proportionally to the container, typically 120\u2013240px.',
-            'Center illustrations with supporting text below.',
+            'Place illustrations centered with supporting text below.',
           ],
         },
         {
@@ -59,7 +59,7 @@ export const docs = {
       content: [
         {
           type: 'prose',
-          text: 'Center illustrations inside Center with supporting text stacked below. Typical illustration sizes range from 120px for inline empty states to 240px for full-page onboarding screens. Always pair the illustration with a heading and optional body text to explain what the user should do next.',
+          text: 'Place illustrations inside Center with supporting text stacked below. Typical illustration sizes range from 120px for inline empty states to 240px for full-page onboarding screens. Always pair the illustration with a heading and optional body text to explain what the user should do next.',
         },
         {
           type: 'code',

package/assets/docs/internationalization.doc.mjs

@@ -300,7 +300,7 @@ export default function App() {
       content: [
         {
           type: 'prose',
-          text: 'Astryx generates a `pseudo` locale that wraps every string in `⟦…⟧` and replaces letters with accented look-alikes. Switch to it in development to catch hardcoded astryx strings and layout issues caused by longer text.',
+          text: 'Astryx generates a `pseudo` locale that wraps every string in `⟦…⟧` and replaces letters with accented look-alikes. Turn it on in development to catch hardcoded astryx strings and layout issues caused by longer text.',
         },
         {
           type: 'code',

package/assets/docs/migration.doc.mjs

@@ -350,7 +350,7 @@ if (getComputedStyle(button).paddingInline === '0px') {
             'Run the app in light and dark mode and check that surfaces, borders, text, icons, hover states, focus rings, and status colors flow together.',
             'Open the command palette from the shell, type into it, select items by keyboard, and confirm focus returns to the trigger.',
             'Check the SideNav at collapsed, expanded, active, hover, nested, and mobile states.',
-            'Verify settings popovers and dialogs in jsdom and in a real browser because native dialog and Popover APIs may need test shims.',
+            'Verify settings popovers and dialogs in jsdom and in a real browser because the native dialog and [`Popover`](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) APIs may need test shims.',
             'Search for leftover hardcoded Tailwind colors, arbitrary hex values, and one-off hover colors after each route migration.',
             'Run component tests, build, and at least one browser screenshot pass for each migrated route.',
           ],

package/assets/docs/principles.doc.mjs

@@ -39,7 +39,7 @@ export const docs = {
           style: 'ordered',
           items: [
             'Use components for everything they cover',
-            'Layout is frame-first: pick the shell and budget regions before writing content (see \`astryx docs layout\`)',
+            'Page layout is frame-first: pick the shell and budget regions before writing content (see \`astryx docs layout\`)',
             'Dense data renders as rows (Table, List/Item), edge-to-edge with dividers; Card is for widgets, galleries, and settings groups',
             'StyleX or Tailwind for custom styling; both are first-class (see \`astryx docs styling\`)',
             'Semantic tokens, not hardcoded values (see \`astryx docs tokens\`)',

package/assets/docs/styling-libraries.doc.mjs

@@ -56,7 +56,7 @@ export const docs = {
               '`@astryxdesign/core/tailwind-theme.css`',
             ],
             [
-              'Token resolver APIs',
+              'Design token resolver APIs',
               'JavaScript needs token values for charts, canvas, SVG, or config objects',
               "`resolveThemeToken(theme, '--color-data-categorical-blue', {mode})`",
             ],

package/assets/docs/styling.doc.mjs

@@ -22,10 +22,10 @@ export const docs = {
           type: 'table',
           headers: ['Approach', 'Use for', 'Example'],
           rows: [
-            ['StyleX', 'Component-specific overrides, reusable styles, pseudo-classes, and typed tokens', 'const styles = stylex.create(...); <Button xstyle={styles.save} />'],
-            ['Tailwind utilities', 'Layout, wrappers, and utility styling', 'className="flex gap-3 p-4"'],
-            ['className', 'Integrating with external CSS or Tailwind on components', 'className="my-card shadow-lg"'],
-            ['Styling-library token aliases', 'Keeping Panda, Chakra, MUI, Emotion, styled-components, UnoCSS, CSS Modules, or Sass in sync with the system', "colors.surface = 'var(--color-background-surface)'"],
+            ['StyleX', 'Component-specific overrides, reusable styles, pseudo-classes, and typed tokens', '`const styles = stylex.create(...); <Button xstyle={styles.save} />`'],
+            ['Tailwind utilities', 'Page layout, wrappers, and utility styling', '`className="flex gap-3 p-4"`'],
+            ['className', 'Integrating with external CSS or Tailwind on components', '`className="my-card shadow-lg"`'],
+            ['Styling-library token aliases', 'Keeping Panda, Chakra, MUI, Emotion, styled-components, UnoCSS, CSS Modules, or Sass in sync with the system', "`colors.surface = 'var(--color-background-surface)'`"],
           ],
         },
         {

package/assets/docs/theme.doc.mjs

@@ -106,7 +106,7 @@ function App() {
             [
               'Y2K',
               "import {y2kTheme} from '@astryxdesign/theme-y2k'",
-              'Playful Y2K pop; periwinkle body, holographic accents, Poppins + Crimson Text.',
+              'Playful Y2K pop; periwinkle body, holographic accents, Poppins + `Crimson Text`.',
             ],
           ],
         },
@@ -510,7 +510,7 @@ import './themes/ocean.css';
       content: [
         {
           type: 'prose',
-          text: 'Wrap different sections in separate <Theme> providers.',
+          text: 'Wrap different sections in separate [`<Theme>`](/components/Theme) providers.',
         },
         {
           type: 'code',
@@ -606,7 +606,7 @@ function ChartConfig() {
         },
         {
           type: 'prose',
-          text: 'Prefer CSS variables, StyleX token imports, xstyle, or className for ordinary styling. To change the theme or mode, manage state at the app level and pass it to <Theme>.',
+          text: 'Prefer CSS variables, StyleX token imports, xstyle, or className for ordinary styling. To change the theme or mode, manage state at the app level and pass it to `<Theme>`.',
         },
         {
           type: 'prose',

package/assets/docs/typography.doc.mjs

@@ -122,7 +122,7 @@ export const docs = {
         },
         {
           type: 'prose',
-          text: 'Display text often needs heading semantics for accessibility. Use the type prop on Heading to apply display styling while preserving the correct HTML element: <Heading level={1} type="display-1"> gives you display-1 styling with an <h1> tag, so screen readers see the correct document outline.',
+          text: 'Display text often needs heading semantics for accessibility. Use the type prop on Heading to apply display styling while preserving the correct HTML element: `<Heading level={1} type="display-1">` gives you display-1 styling with an `<h1>` tag, so screen readers see the correct document outline.',
         },
       ],
     },
@@ -205,7 +205,7 @@ const denseTheme = defineTheme({
           items: [
             'Use Heading for document headings and Text for everything else; they apply the full type scale automatically.',
             'Adjust typography holistically: change base and ratio in defineTheme to shift the entire ramp (e.g. { base: 16, ratio: 1.25 } for editorial, { base: 12, ratio: 1.125 } for dense UI).',
-            'Use display types with as="h1" (or h2/h3) when display text is a page heading; this preserves accessibility while giving you display-level sizing. Or better, use <Heading level={1} type="display-1"> which handles both semantics and styling.',
+            'Use display types with as="h1" (or h2/h3) when display text is a page heading; this preserves accessibility while giving you display-level sizing. Or better, use `<Heading level={1} type="display-1">` which handles both semantics and styling.',
             'Let line-height snap to the 4px grid via the type scale; expandTypeScale computes leading automatically from base and ratio.',
             'Use the supporting type for secondary information: timestamps, helper text, metadata, captions.',
             'Use accessibilityLevel on Heading when the visual hierarchy doesn\u0027t match the document outline (e.g. sidebar or card headings).',

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.e6af10a",
+  "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.e6af10a",
-    "@astryxdesign/core": "0.3.0-canary.e6af10a",
-    "@astryxdesign/lab": "0.3.0-canary.e6af10a",
-    "@astryxdesign/theme-neutral": "0.3.0-canary.e6af10a",
+    "@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.e6af10a",
-    "@astryxdesign/core": "0.3.0-canary.e6af10a",
-    "@astryxdesign/lab": "0.3.0-canary.e6af10a",
-    "@astryxdesign/theme-neutral": "0.3.0-canary.e6af10a",
+    "@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": {