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

package/assets/templates/blocks/components/Stepper/StepperVerticalOnboarding.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperVerticalOnboarding() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Create workspace"
+          description="Name and configure your workspace"
+        />
+        <Step
+          step={1}
+          label="Invite team members"
+          description="Add collaborators by email"
+        />
+        <Step
+          step={2}
+          label="Set up integrations"
+          description="Connect Slack, GitHub, Jira"
+        />
+        <Step
+          step={3}
+          label="Import data"
+          description="Bring in existing projects"
+        />
+        <Step step={4} label="Launch" description="Go live with your team" />
+      </Stepper>
+    </div>
+  );
+}

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/blocks/components/TextArea/TextAreaStates.tsx

@@ -20,7 +20,7 @@ export default function TextAreaStates() {
       />
       <TextArea
         label="Disabled field"
-        value="This field is read-only and cannot be edited."
+        value="This field is disabled and cannot be edited."
         onChange={() => {}}
         isDisabled
       />

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

@@ -260,6 +260,8 @@ export interface ComponentSlotElement {
  * { property: 'padding', vars: ['--_card-padding'] },
  * ```
  */
+// SYNC: apps/docsite/scripts/generate-data.mjs (interface DerivedVar) — see the
+// note on ComponentThemingTarget below.
 export interface ComponentThemingDerivedVar {
   /** The standard CSS property name (camelCase) that theme authors write.
    *  e.g. `'borderRadius'`, `'padding'`, `'paddingBlock'` */
@@ -291,6 +293,10 @@ export interface ComponentThemingDerivedVar {
  * {className: 'astryx-card'}
  * ```
  */
+// SYNC: When adding a field here, add it to the docsite's generated-registry
+// copy too — apps/docsite/scripts/generate-data.mjs (interface ThemingTarget).
+// `next build` type-checks the emitted componentRegistry.ts against that copy,
+// so a field present in a .doc.mjs but missing there fails the docsite build.
 export interface ComponentThemingTarget {
   /** The stable CSS class name rendered by the component.
    *  Always starts with `astryx-`.
@@ -310,6 +316,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.ee705d8",
   "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.ee705d8",
+    "@astryxdesign/core": "0.3.0-canary.ee705d8",
+    "@astryxdesign/lab": "0.3.0-canary.ee705d8",
+    "@astryxdesign/theme-neutral": "0.3.0-canary.ee705d8",
     "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.ee705d8",
+    "@astryxdesign/core": "0.3.0-canary.ee705d8",
+    "@astryxdesign/lab": "0.3.0-canary.ee705d8",
+    "@astryxdesign/theme-neutral": "0.3.0-canary.ee705d8",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {