@astryxdesign/cli 0.4.6 → 0.4.7-canary.20bae6c

package/clients/cli/commands/theme.doc.mjs

@@ -17,11 +17,13 @@ export const doc = {
   description:
     'The theme command group. Running astryx theme with no subcommand prints the ' +
     'subcommand list; the work happens in the subcommands: compile a theme (build), ' +
-    'scaffold one into your project (add), start a custom one from the annotated template (template), or list the bundled themes (list).',
-  subcommands: ['build', 'add', 'list', 'template'],
+    'scaffold one into your project (add), start a custom one from the annotated template (template), ' +
+    'list the bundled themes (list), or list the component theming targets a theme can override (targets).',
+  subcommands: ['build', 'add', 'list', 'template', 'targets'],
   examples: [
     {label: 'List bundled themes', cli: 'astryx theme list'},
     {label: 'Scaffold a theme', cli: 'astryx theme add matcha'},
+    {label: 'See what a theme can override', cli: 'astryx theme targets'},
   ],
   exitCodes: [
     {code: 0, when: 'success (help shown, or a subcommand succeeded)'},

package/clients/cli/index.mjs

@@ -70,6 +70,7 @@ export const JSON_SUPPORTED = new Set([
   'theme list',
   'theme add',
   'theme template',
+  'theme targets',
   'upgrade',
   'manifest',
   'doctor',

package/clients/cli/lib/manifest.mjs

@@ -77,6 +77,7 @@ export const RESPONSE_TYPES = {
   'theme list': ['theme.list'],
   'theme add': ['theme.list', 'theme.add'],
   'theme template': ['theme.template'],
+  'theme targets': ['theme.targets'],
   upgrade: ['upgrade.list', 'upgrade.status', 'upgrade.run'],
   manifest: ['manifest'],
   doctor: ['doctor'],
@@ -116,6 +117,7 @@ const EXAMPLES = {
     'astryx theme add matcha ./src/themes/matcha',
   ],
   'theme template': ['astryx theme template', 'astryx theme template --json'],
+  'theme targets': ['astryx theme targets Switch', 'astryx --json theme targets'],
   upgrade: ['astryx upgrade --json'],
   manifest: ['astryx manifest --json', 'astryx --json'],
   doctor: ['astryx doctor', 'astryx doctor --json'],

package/foundation/discovery/theming-targets.d.mts

@@ -0,0 +1,48 @@
+// @generated by scripts/sync-api-types.mjs from the JSDoc in foundation/**/*.mjs.
+// DO NOT EDIT — run `pnpm sync:api-types` to regenerate.
+
+/**
+ * Every theming target declared under a core `src` directory, sorted by key
+ * then component. A key can appear more than once: a shared sub-element (the
+ * radio indicator, say) is documented by every component that renders it.
+ *
+ * Unreadable docs are skipped rather than fatal — a single malformed doc must
+ * not take out theme validation or the listing.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingTarget[]>}
+ */
+export function collectThemingTargets(coreSrc: string): Promise<ThemingTarget[]>;
+/**
+ * Collapse the enumeration into the `{key: [props and states]}` map theme
+ * validation checks override keys against — both are legal override keys, so
+ * they share one list.
+ * @param {ThemingTarget[]} targets
+ * @returns {Record<string, string[]>}
+ */
+export function targetsByKey(targets: ThemingTarget[]): Record<string, string[]>;
+/**
+ * One theming target, as a theme author has to write it.
+ */
+export type ThemingTarget = {
+    /**
+     * - the `defineTheme` `components` key (class minus the `astryx-` prefix)
+     */
+    key: string;
+    /**
+     * - the stable class the component renders
+     */
+    className: string;
+    /**
+     * - the component whose doc declares it
+     */
+    component: string;
+    /**
+     * - visual props the target reflects (`variant:value` keys)
+     */
+    props: string[];
+    /**
+     * - runtime states the target reflects (bare-name keys)
+     */
+    states: string[];
+};

package/foundation/discovery/theming-targets.mjs

@@ -0,0 +1,135 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file The one enumeration of component theming targets.
+ *
+ * @input  a core `src` directory
+ * @output every `theming.targets` entry authored in a component `.doc.mjs`,
+ *         flattened into the `defineTheme` component key a theme author writes
+ * @position packages/cli/foundation/discovery — shared by `theme targets` (the
+ *           listing) and `theme build` (override validation). Both read the
+ *           component docs, which are the source of truth `astryx component
+ *           <Name>` prints; nothing here is a second registry, so the list a
+ *           theme author can enumerate and the set the compiler accepts cannot
+ *           drift from the components or from each other.
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {loadComponentDoc} from './component-loader.mjs';
+
+const SKIP_DIRS = new Set(['node_modules', '__tests__']);
+
+/**
+ * One theming target, as a theme author has to write it.
+ * @typedef {object} ThemingTarget
+ * @property {string} key - the `defineTheme` `components` key (class minus the `astryx-` prefix)
+ * @property {string} className - the stable class the component renders
+ * @property {string} component - the component whose doc declares it
+ * @property {string[]} props - visual props the target reflects (`variant:value` keys)
+ * @property {string[]} states - runtime states the target reflects (bare-name keys)
+ */
+
+/**
+ * Strip the namespace prefix to get the `defineTheme` key for a class name.
+ *
+ * Keep the `astryx-` literal in sync with packages/core/src/naming.ts
+ * (NAMESPACE / classPrefix), the same way component-format.mjs does.
+ * <!-- SYNC: packages/core/src/naming.ts (namespace prefix source of truth) -->
+ * @param {string} className
+ * @returns {string}
+ */
+function targetKey(className) {
+  return className.replace(/^astryx-/, '');
+}
+
+/**
+ * Every theming target declared under a core `src` directory, sorted by key
+ * then component. A key can appear more than once: a shared sub-element (the
+ * radio indicator, say) is documented by every component that renders it.
+ *
+ * Unreadable docs are skipped rather than fatal — a single malformed doc must
+ * not take out theme validation or the listing.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingTarget[]>}
+ */
+export async function collectThemingTargets(coreSrc) {
+  if (!coreSrc || !fs.existsSync(coreSrc)) return [];
+
+  /** @type {ThemingTarget[]} */
+  const targets = [];
+
+  /** @param {string} dir */
+  async function scan(dir) {
+    for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (SKIP_DIRS.has(entry.name)) continue;
+        await scan(full);
+        continue;
+      }
+      if (!entry.name.endsWith('.doc.mjs')) continue;
+
+      /** @type {any} */
+      let doc;
+      try {
+        doc = await loadComponentDoc(full);
+      } catch {
+        continue;
+      }
+
+      const component =
+        typeof doc?.name === 'string' && doc.name
+          ? doc.name
+          : path.basename(path.dirname(full));
+
+      for (const target of doc?.theming?.targets || []) {
+        const className = target?.className;
+        if (typeof className !== 'string') continue;
+        const key = targetKey(className);
+        if (!key) continue;
+        targets.push({
+          key,
+          className,
+          component,
+          props: stringList(target.visualProps),
+          states: stringList(target.states),
+        });
+      }
+    }
+  }
+
+  await scan(coreSrc);
+
+  targets.sort(
+    (a, b) => a.key.localeCompare(b.key) || a.component.localeCompare(b.component),
+  );
+  return targets;
+}
+
+/**
+ * Collapse the enumeration into the `{key: [props and states]}` map theme
+ * validation checks override keys against — both are legal override keys, so
+ * they share one list.
+ * @param {ThemingTarget[]} targets
+ * @returns {Record<string, string[]>}
+ */
+export function targetsByKey(targets) {
+  /** @type {Record<string, string[]>} */
+  const byKey = {};
+  for (const t of targets) {
+    byKey[t.key] = [...new Set([...(byKey[t.key] || []), ...t.props, ...t.states])];
+  }
+  return byKey;
+}
+
+/**
+ * @param {unknown} value
+ * @returns {string[]}
+ */
+function stringList(value) {
+  return Array.isArray(value)
+    ? value.filter((/** @type {unknown} */ v) => typeof v === 'string')
+    : [];
+}

package/foundation/discovery/theming-targets.test.mjs

@@ -0,0 +1,127 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file The enumerability guard for component theming targets.
+ *
+ * A theming target is only useful if a theme author can find it. These tests
+ * run against the REAL core docs and fail if any component's targets stop
+ * being enumerable — a doc that moves out of the scanned tree, a target shape
+ * that stops being read, or a component whose Theming table says one thing
+ * while `theme targets` says another. That divergence is the failure the
+ * listing exists to prevent: a target list that can drift from the components
+ * is worse than no list.
+ */
+
+import {describe, it, expect} from 'vitest';
+import * as path from 'node:path';
+import {findCoreDir} from '../fs/paths.mjs';
+import {
+  discoverComponents,
+  findComponentReadme,
+} from './component-discovery.mjs';
+import {loadComponentDoc} from './component-loader.mjs';
+import {collectThemingTargets, targetsByKey} from './theming-targets.mjs';
+
+const coreDir = /** @type {string} */ (findCoreDir(process.cwd()));
+const coreSrc = path.join(coreDir, 'src');
+
+/** @type {Promise<import('./theming-targets.mjs').ThemingTarget[]>} */
+const enumerated = collectThemingTargets(coreSrc);
+
+describe('collectThemingTargets', () => {
+  it('enumerates the whole surface, not a handful', async () => {
+    const targets = await enumerated;
+    expect(targets.length).toBeGreaterThan(100);
+    expect(new Set(targets.map(t => t.component)).size).toBeGreaterThan(50);
+  });
+
+  it('drops the namespace prefix so each key is what defineTheme takes', async () => {
+    for (const t of await enumerated) {
+      expect(t.className).toBe(`astryx-${t.key}`);
+      expect(t.component).toBeTruthy();
+    }
+  });
+
+  it('carries the props and states a target reflects', async () => {
+    const targets = await enumerated;
+    expect(targets.find(t => t.key === 'switch-thumb')).toEqual({
+      key: 'switch-thumb',
+      className: 'astryx-switch-thumb',
+      component: 'Switch',
+      props: ['size'],
+      states: ['checked'],
+    });
+  });
+
+  it('is sorted by key, so a diff of two runs is readable', async () => {
+    const keys = (await enumerated).map(t => t.key);
+    expect(keys).toEqual([...keys].sort((a, b) => a.localeCompare(b)));
+  });
+
+  // The listing and `theme build`'s override validation read this one
+  // enumeration. `targetsByKey` is the shape validation wants: props and
+  // states merged, because both are legal override keys.
+  it('collapses to the override keys, merging the components that share one', async () => {
+    const byKey = targetsByKey(await enumerated);
+    expect(byKey['switch']).toEqual(['size', 'checked', 'disabled']);
+    // `radio` is documented by both Indicator and RadioList.
+    const radio = (await enumerated).filter(t => t.key === 'radio');
+    expect(radio.length).toBeGreaterThan(1);
+    for (const t of radio) {
+      for (const name of [...t.props, ...t.states]) {
+        expect(byKey['radio']).toContain(name);
+      }
+    }
+  });
+
+  it('every component doc that declares targets has them enumerated', async () => {
+    const targets = await enumerated;
+    /** @type {Map<string, Set<string>>} key -> props+states */
+    const byKey = new Map(
+      Object.entries(targetsByKey(targets)).map(([k, v]) => [k, new Set(v)]),
+    );
+
+    const names = Object.values(discoverComponents(coreDir)).flat();
+    /** @type {string[]} */
+    const missing = [];
+    /** @type {Set<string>} */
+    const seenDocs = new Set();
+    let checked = 0;
+
+    for (const name of names) {
+      const docPath = findComponentReadme(coreDir, name);
+      if (!docPath || seenDocs.has(docPath)) continue;
+      seenDocs.add(docPath);
+
+      /** @type {any} */
+      let doc;
+      try {
+        doc = await loadComponentDoc(docPath);
+      } catch {
+        continue;
+      }
+
+      for (const target of doc?.theming?.targets || []) {
+        if (typeof target?.className !== 'string') continue;
+        checked++;
+        const key = target.className.replace(/^astryx-/, '');
+        const known = byKey.get(key);
+        if (!known) {
+          missing.push(`${name}: ${target.className} is not enumerable`);
+          continue;
+        }
+        for (const prop of [
+          ...(target.visualProps || []),
+          ...(target.states || []),
+        ]) {
+          if (!known.has(prop)) {
+            missing.push(`${name}: ${target.className} lost "${prop}"`);
+          }
+        }
+      }
+    }
+
+    expect(checked).toBeGreaterThan(100);
+    expect(missing).toEqual([]);
+  }, 60_000);
+});

package/foundation/response/response-types.doc.mjs

@@ -153,7 +153,7 @@ export const doc = {
     {
       value: 'template.cdn',
       description:
-        'A write receipt for the no-build-step CDN starter page: the path (relative to cwd), the Astryx version every CDN URL was pinned to, whether it was written, and the reason it was not — `exists` when a file was already there, which is a success.',
+        'A write receipt for the no-build-step CDN starter page: the path (relative to cwd), the Astryx version every CDN URL was pinned to, whether it was written, and the reason it was not. `exists` when a file was already there, which is a success.',
     },
 
     // hook
@@ -197,7 +197,12 @@ export const doc = {
     {
       value: 'theme.template',
       description:
-        'A write receipt for the annotated theme template: the path (relative to cwd), whether it was written, and the reason it was not — `exists` when a file was already there, which is a success.',
+        'A write receipt for the annotated theme template: the path (relative to cwd), whether it was written, and the reason it was not. `exists` when a file was already there, which is a success.',
+    },
+    {
+      value: 'theme.targets',
+      description:
+        'The whole themeable surface: the echoed filter, the component count, and one entry per theming target — {key, className, component, props, states}, where props and states are its legal override keys.',
     },
 
     // upgrade

package/package.json

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

package/assets/templates/blocks/components/Stepper/StepperHorizontal.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Stepper',
-  name: 'Stepper — Horizontal Progress',
-  displayName: 'Stepper — Horizontal Progress',
-  description:
-    'A horizontal separated stepper: each step owns a segment of the progress bar above its label. Filled segments track how far the flow has progressed.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Stepper'],
-};

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

@@ -1,24 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
-
-export default function StepperHorizontal() {
-  const [active, setActive] = useState(1);
-  return (
-    <div style={{width: '100%', maxWidth: 600}}>
-      <Stepper
-        activeStep={active}
-        orientation="horizontal"
-        onStepClick={setActive}>
-        <Step step={0} label="Workspace" />
-        <Step step={1} label="Team" />
-        <Step step={2} label="Integrations" />
-        <Step step={3} label="Import" />
-        <Step step={4} label="Launch" />
-      </Stepper>
-    </div>
-  );
-}

package/assets/templates/blocks/components/Stepper/StepperMultiStepForm.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Stepper',
-  name: 'Stepper — Multi-Step Form',
-  displayName: 'Stepper — Multi-Step Form',
-  description:
-    'A vertical stepper driving a multi-step form. Each step renders its own fields in the content slot for the active step, with Back/Continue buttons advancing activeStep.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Stepper', 'TextInput', 'Button', 'Text'],
-};

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

@@ -1,92 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
-import {TextInput} from '@astryxdesign/core/TextInput';
-import {Button} from '@astryxdesign/core/Button';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function StepperMultiStepForm() {
-  const [active, setActive] = useState(0);
-  return (
-    <div style={{width: '100%', maxWidth: 480}}>
-      <Stepper
-        activeStep={active}
-        orientation="vertical"
-        onStepClick={setActive}>
-        <Step step={0} label="Project details" indicator="number">
-          {active === 0 && (
-            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
-              <TextInput
-                label="Project name"
-                placeholder="My awesome project"
-                value=""
-              />
-              <TextInput
-                label="Repository URL"
-                placeholder="https://github.com/..."
-                value=""
-              />
-              <div>
-                <Button
-                  label="Continue"
-                  variant="primary"
-                  onClick={() => setActive(1)}
-                />
-              </div>
-            </div>
-          )}
-        </Step>
-        <Step step={1} label="Environment" indicator="number">
-          {active === 1 && (
-            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
-              <TextInput label="Node version" placeholder="20" value="" />
-              <TextInput
-                label="Build command"
-                placeholder="npm run build"
-                value=""
-              />
-              <div style={{display: 'flex', gap: 8}}>
-                <Button
-                  label="Back"
-                  variant="secondary"
-                  onClick={() => setActive(0)}
-                />
-                <Button
-                  label="Continue"
-                  variant="primary"
-                  onClick={() => setActive(2)}
-                />
-              </div>
-            </div>
-          )}
-        </Step>
-        <Step step={2} label="Deploy" indicator="number">
-          {active === 2 && (
-            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
-              <Text type="body">
-                Ready to deploy. This creates a production build and pushes to
-                your configured hosting.
-              </Text>
-              <div style={{display: 'flex', gap: 8}}>
-                <Button
-                  label="Back"
-                  variant="secondary"
-                  onClick={() => setActive(1)}
-                />
-                <Button
-                  label="Deploy now"
-                  variant="primary"
-                  onClick={() => setActive(3)}
-                />
-              </div>
-            </div>
-          )}
-        </Step>
-        <Step step={3} label="Done" indicator="number" />
-      </Stepper>
-    </div>
-  );
-}

package/assets/templates/blocks/components/Stepper/StepperVerticalOnboarding.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Stepper',
-  name: 'Stepper — Vertical Onboarding',
-  displayName: 'Stepper — Vertical Onboarding',
-  description:
-    'A vertical stepper for an onboarding flow, with a label and description per step. The auto indicator shows a check for completed steps, a ring for the current step, and a number for upcoming ones.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Stepper'],
-};

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

@@ -1,40 +0,0 @@
-// 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>
-  );
-}