@astryxdesign/cli 0.4.3 → 0.4.4-canary.0f4d45f

package/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx

@@ -0,0 +1,221 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet, BottomSheetSwitcher} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Section} from '@astryxdesign/core/Section';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+type NotificationSheetHeight = 'hug' | 'capped';
+
+interface NotificationOverviewSheetProps {
+  height: NotificationSheetHeight;
+  onCancel: () => void;
+  onContinue: () => void;
+}
+
+function NotificationOverviewSheet({
+  height,
+  onCancel,
+  onContinue,
+}: NotificationOverviewSheetProps) {
+  return (
+    <BottomSheet
+      sheetId="overview"
+      label="Set up notifications"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Set up notifications</Heading>
+            <Text type="supporting" color="secondary">
+              Step 1 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Stay informed about activity that matters without checking back
+            throughout the day.
+          </Text>
+          <VStack gap={3}>
+            <VStack gap={1}>
+              <Text type="label">Important activity</Text>
+              <Text type="supporting" color="secondary">
+                Know when someone mentions you or needs your attention.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Timely reminders</Text>
+              <Text type="supporting" color="secondary">
+                Get a reminder before work reaches its due date.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Useful summaries</Text>
+              <Text type="supporting" color="secondary">
+                Catch up on anything you may have missed.
+              </Text>
+            </VStack>
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onCancel} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationFrequencySheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onContinue: () => void;
+}
+
+function NotificationFrequencySheet({
+  height,
+  onBack,
+  onContinue,
+}: NotificationFrequencySheetProps) {
+  const [frequency, setFrequency] = useState('daily');
+
+  return (
+    <BottomSheet
+      sheetId="frequency"
+      label="Notification frequency"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>How often?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 2 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <RadioList
+            label="Notification frequency"
+            isLabelHidden
+            value={frequency}
+            onChange={setFrequency}>
+            <RadioListItem label="Immediately" value="immediately" />
+            <RadioListItem label="Daily" value="daily" />
+            <RadioListItem label="Weekly" value="weekly" />
+          </RadioList>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationChannelsSheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onFinish: () => void;
+}
+
+function NotificationChannelsSheet({
+  height,
+  onBack,
+  onFinish,
+}: NotificationChannelsSheetProps) {
+  const [email, setEmail] = useState(true);
+  const [pushNotifications, setPushNotifications] = useState(true);
+  const [textMessages, setTextMessages] = useState(false);
+
+  return (
+    <BottomSheet
+      sheetId="channels"
+      label="Notification channels"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Where should we notify you?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 3 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Choose any combination. You can change these preferences later.
+          </Text>
+          <VStack gap={2}>
+            <CheckboxInput label="Email" value={email} onChange={setEmail} />
+            <CheckboxInput
+              label="Push notifications"
+              value={pushNotifications}
+              onChange={setPushNotifications}
+            />
+            <CheckboxInput
+              label="Text messages"
+              value={textMessages}
+              onChange={setTextMessages}
+            />
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Finish" onClick={onFinish} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface MultiStepSwitcherExampleProps {
+  height: NotificationSheetHeight;
+  hasScrim?: boolean;
+}
+
+function MultiStepSwitcherExample({
+  height,
+  hasScrim = true,
+}: MultiStepSwitcherExampleProps) {
+  const [activeSheet, setActiveSheet] = useState<string | null>(null);
+
+  return (
+    <>
+      <Button
+        label="Set up notifications"
+        onClick={() => setActiveSheet('overview')}
+      />
+      <BottomSheetSwitcher
+        activeSheet={activeSheet}
+        onActiveSheetChange={setActiveSheet}
+        hasScrim={hasScrim}>
+        <NotificationOverviewSheet
+          height={height}
+          onCancel={() => setActiveSheet(null)}
+          onContinue={() => setActiveSheet('frequency')}
+        />
+        <NotificationFrequencySheet
+          height={height}
+          onBack={() => setActiveSheet('overview')}
+          onContinue={() => setActiveSheet('channels')}
+        />
+        <NotificationChannelsSheet
+          height={height}
+          onBack={() => setActiveSheet('frequency')}
+          onFinish={() => setActiveSheet(null)}
+        />
+      </BottomSheetSwitcher>
+    </>
+  );
+}
+
+export default function BottomSheetSwitcherShowcase() {
+  return <MultiStepSwitcherExample height="hug" />;
+}

package/assets/theme.template.ts

@@ -105,12 +105,13 @@ export const myTheme = defineTheme({
   // ───────────────────────────────────────────────────────────────────────
 
   /**
-   * Generates the neutral ramp and the accent tokens from one seed colour
+   * Generates the neutral ramp and the accent tokens from a seed colour
    * using the HCT perceptual model: surfaces, text, icons, borders, muted
    * fills, hover and pressed overlays — light and dark both.
    *
-   *   accent        seed hex; omit to keep the default accent and re-tone only
-   *                 the neutrals
+   *   accent        seed hex, or a [light, dark] pair to seed each scheme's
+   *                 palette from its own colour; omit to keep the default
+   *                 accent and re-tone only the neutrals
    *   neutralStyle  'warm' | 'cool' | 'neutral' — the temperature of the greys
    *   contrast      'standard' | 'high' — 'high' widens the text/surface tone
    *                 gap, for dense data UI or bright and clinical screens

package/authoring/doctypes/base/type.ts

@@ -117,6 +117,15 @@ export interface ComponentPlaygroundConfig {
    *  the component is visible on load and knobs stay usable, whereas a real
    *  top-layer modal makes the rest of the page inert (#3657). */
   overlay?: boolean;
+  /** Override the controlled prop and open value used by an overlay preview.
+   *  Use with `overlay: true` when the component does not use `isOpen: true`
+   *  to represent its open state. */
+  overlayControl?: {
+    /** Controlled prop that determines whether the overlay is open. */
+    stateProp: string;
+    /** Value assigned to stateProp when the preview's open button is used. */
+    openValue: unknown;
+  };
   /** The component reads AppShell mobile context and renders nothing
    *  without it (e.g. `MobileNavToggle` returns null unless the context
    *  reports an enabled mobile viewport — the default value outside

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

@@ -17,6 +17,12 @@
  * Usage:
  *   astryx theme build ./src/themes/ocean.ts
  *   astryx theme build ./src/themes/ocean.ts --out ./dist/ocean.css
+ *   astryx theme build ./src/themes/*.ts
+ *
+ * `build` takes one or more theme files. Each is compiled by the same
+ * single-file API call, in argument order, in one process — so the outputs are
+ * byte-identical to running the CLI once per theme, and the first failure stops
+ * the run exactly as a shell loop under `set -e` would.
  */
 
 import * as fs from 'node:fs';
@@ -80,66 +86,80 @@ function runThemeBuildOnceChild(file, options) {
 }
 
 /**
- * Watch a theme file and rebuild on change. Runs an initial build, then
- * rebuilds (debounced) whenever the file changes, until interrupted with
- * Ctrl-C. Each rebuild runs in a child process so a build error (which the
- * single-build path reports via a hard exit) is contained and the watcher
- * keeps running.
+ * Watch theme files and rebuild on change. Runs an initial build of each, then
+ * rebuilds (debounced) the file that changed, until interrupted with Ctrl-C.
+ * Rebuilds are serialized: one at a time, in the order the changes arrived, so
+ * the log stays readable. Each rebuild runs in a child process so a build error
+ * (which the single-build path reports via a hard exit) is contained and the
+ * watcher keeps running.
  *
- * @param {string} file - The theme file argument, as the user passed it.
- * @param {string} filePath - Absolute path to the theme file.
+ * @param {Array<{file: string, filePath: string}>} entries - The theme file
+ *   arguments as the user passed them, with their resolved absolute paths.
  * @param {{out?: string, iconsSpecifier?: string}} options - Parsed command options.
  * @returns {Promise<void>} Resolves when the watcher is stopped (Ctrl-C).
  */
-async function runThemeBuildWatch(file, filePath, options) {
-  const rel = path.relative(process.cwd(), filePath);
+async function runThemeBuildWatch(entries, options) {
+  const rel = (/** @type {string} */ filePath) =>
+    path.relative(process.cwd(), filePath);
+  const watchingLine = `\nWatching ${entries
+    .map(e => rel(e.filePath))
+    .join(', ')} for changes — press Ctrl-C to stop.`;
 
   // Initial build.
-  await runThemeBuildOnceChild(file, options);
+  for (const entry of entries) {
+    await runThemeBuildOnceChild(entry.file, options);
+  }
 
   let building = false;
-  let queued = false;
-  /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let debounce;
+  /** @type {Set<{file: string, filePath: string}>} */
+  const queued = new Set();
+  /** @type {Map<string, ReturnType<typeof setTimeout>>} */
+  const debounces = new Map();
 
-  const rebuild = async () => {
+  /** @param {{file: string, filePath: string}} entry */
+  const rebuild = async entry => {
     if (building) {
       // Coalesce changes that land mid-build into a single follow-up run.
-      queued = true;
+      queued.add(entry);
       return;
     }
     building = true;
-    emit(text(`\nChange detected — rebuilding ${rel}...`));
-    await runThemeBuildOnceChild(file, options);
+    emit(text(`\nChange detected — rebuilding ${rel(entry.filePath)}...`));
+    await runThemeBuildOnceChild(entry.file, options);
     building = false;
-    emit(text(`\nWatching ${rel} for changes — press Ctrl-C to stop.`));
-    if (queued) {
-      queued = false;
-      rebuild();
+    emit(text(watchingLine));
+    const next = queued.values().next();
+    if (!next.done) {
+      queued.delete(next.value);
+      rebuild(next.value);
     }
   };
 
   // Some editors replace the file (rename) rather than writing in place, which
   // can drop the watch. Watch the containing directory and filter to our file
   // so edits survive atomic-save/rename.
-  const watchDir = path.dirname(filePath);
-  const baseName = path.basename(filePath);
-  const watcher = fs.watch(watchDir, (_eventType, changed) => {
-    if (changed && changed !== baseName) return;
-    clearTimeout(debounce);
-    // Debounce: editors often emit several events per save.
-    debounce = setTimeout(rebuild, 100);
+  const watchers = entries.map(entry => {
+    const baseName = path.basename(entry.filePath);
+    return fs.watch(path.dirname(entry.filePath), (_eventType, changed) => {
+      if (changed && changed !== baseName) return;
+      clearTimeout(debounces.get(entry.filePath));
+      // Debounce: editors often emit several events per save.
+      debounces.set(
+        entry.filePath,
+        setTimeout(() => rebuild(entry), 100),
+      );
+    });
   });
 
   // Announce readiness only AFTER fs.watch is armed — the log is the "safe to
   // edit" signal (tests and humans rely on it), so printing it before the watch
   // is registered would race: a change in that gap is silently missed.
-  emit(text(`\nWatching ${rel} for changes — press Ctrl-C to stop.`));
+  emit(text(watchingLine));
 
   await new Promise((/** @type {(value?: void) => void} */ resolve) => {
     const stop = () => {
-      clearTimeout(debounce);
-      watcher.close();
+      for (const d of debounces.values()) clearTimeout(d);
+      for (const w of watchers) w.close();
       emit(text('\nStopped watching.'));
       resolve();
     };
@@ -208,15 +228,31 @@ export function registerTheme(program) {
   defineCommand(theme, themeBuildCommand, {
     fn: themeBuildFn,
     action: async (
-      /** @type {string} */ file,
+      /** @type {string[]} */ files,
       /** @type {{out?: string, watch?: boolean, check?: boolean, iconsSpecifier?: string}} */ options,
     ) => {
-      const filePath = path.resolve(process.cwd(), file);
       const json = program.opts().json || false;
+      const entries = files.map(file => ({
+        file,
+        filePath: path.resolve(process.cwd(), file),
+      }));
 
-      if (!fs.existsSync(filePath)) {
-        cliError(`File not found: ${filePath}`, {
+      for (const entry of entries) {
+        if (fs.existsSync(entry.filePath)) continue;
+        // A quoted glob reaches us unexpanded: say so rather than reporting a
+        // literal `themes/*.ts` as a missing file.
+        const looksGlobby = /[*?[\]{}]/.test(entry.file);
+        cliError(`File not found: ${entry.filePath}`, {
           code: ERROR_CODES.ERR_FILE_NOT_FOUND,
+          suggestions: looksGlobby
+            ? [
+                {
+                  name: `astryx theme build ${entry.file.replace(/['"]/g, '')}`,
+                  reason:
+                    'globs are expanded by your shell — pass the pattern unquoted, or list the files',
+                },
+              ]
+            : undefined,
         });
         return;
       }
@@ -230,6 +266,19 @@ export function registerTheme(program) {
         return;
       }
 
+      // --out names one output file, so it cannot describe N themes. Without
+      // it each theme writes `<theme name>.css` beside its source, which is
+      // what a multi-theme build wants anyway.
+      if (options.out && entries.length > 1) {
+        cliError(
+          `--out takes a single output path and ${entries.length} theme files were given. ` +
+            'Build them without --out (each theme writes <name>.css next to its source), ' +
+            'or run one invocation per theme.',
+          {code: ERROR_CODES.ERR_THEME_INVALID},
+        );
+        return;
+      }
+
       // Watch mode: run an initial build, then rebuild on every change to the
       // theme file. Watch is a human-interactive, long-running mode — it is not
       // supported in --json (machine) mode, which expects a single envelope.
@@ -240,41 +289,81 @@ export function registerTheme(program) {
           });
           return;
         }
-        await runThemeBuildWatch(file, filePath, options);
+        await runThemeBuildWatch(entries, options);
         return;
       }
 
-      // Non-watch: delegate to the API compiler. Enable human output unless in
-      // --json mode (log → stdout via humanLog, warn/error → stderr). The
-      // "Building theme from" line, the ✓/warning lines, and the install
-      // instructions are all emitted from inside themeBuild via the shared logger.
+      // Non-watch: delegate to the API compiler, once per theme, in argument
+      // order. Enable human output unless in --json mode (log → stdout via
+      // humanLog, warn/error → stderr). The "Building theme from" line, the
+      // ✓/warning lines, and the install instructions are all emitted from
+      // inside themeBuild via the shared logger.
       logger.setSilent(json);
-      try {
-        const result = await themeBuild(
-          file,
-          {
-            out: options.out,
-            check: options.check,
-            iconsSpecifier: options.iconsSpecifier,
-          },
-          {cwd: process.cwd()},
-        );
-        if (json && result) jsonOut(result);
-        // In --check mode a stale/missing output is a failure: exit non-zero
-        // (after emitting the receipt) so CI can gate on it. The receipt is
-        // already printed above (shared logger or --json envelope).
-        if (
-          options.check &&
-          result &&
-          result.type === 'theme.build.check' &&
-          !result.data.upToDate
-        ) {
-          process.exitCode = 1;
+      /** @type {Array<{file: string, receipt: import('../../../api/theme/theme.type.mjs').ThemeBuildResponse | import('../../../api/theme/theme.type.mjs').ThemeBuildCheckResponse | null}>} */
+      const results = [];
+      let stale = false;
+      for (const entry of entries) {
+        try {
+          const result = await themeBuild(
+            entry.file,
+            {
+              out: options.out,
+              check: options.check,
+              iconsSpecifier: options.iconsSpecifier,
+            },
+            {cwd: process.cwd()},
+          );
+          results.push({file: entry.file, receipt: result ?? null});
+          if (
+            options.check &&
+            result &&
+            result.type === 'theme.build.check' &&
+            !result.data.upToDate
+          ) {
+            stale = true;
+          }
+        } catch (e) {
+          const err =
+            /** @type {import('../../../api/error.mjs').AstryxError} */ (e);
+          // Stop at the first failure, as a shell loop under `set -e` does.
+          // With several themes in flight the message alone rarely says which
+          // one broke, so name it.
+          cliError(
+            entries.length > 1 ? `${entry.file}: ${err.message}` : err.message,
+            {suggestions: err.suggestions, code: err.code},
+          );
+          return;
         }
-      } catch (e) {
-        const err =
-          /** @type {import('../../../api/error.mjs').AstryxError} */ (e);
-        cliError(err.message, {suggestions: err.suggestions, code: err.code});
+      }
+
+      if (json) {
+        // One theme keeps the single-envelope contract it has always had; a
+        // batch gets its own discriminant rather than N envelopes on stdout.
+        if (entries.length === 1) {
+          if (results[0].receipt) jsonOut(results[0].receipt);
+        } else {
+          /** @type {import('../../../api/theme/theme.type.mjs').ThemeBuildBatchResponse} */
+          const batch = {
+            type: 'theme.build.batch',
+            data: {count: results.length, results},
+          };
+          jsonOut(batch);
+        }
+      } else if (entries.length > 1) {
+        emit(
+          text(
+            options.check
+              ? `\n${stale ? '✗' : '✓'} Checked ${entries.length} themes.`
+              : `\n✓ Built ${entries.length} themes.`,
+          ),
+        );
+      }
+
+      // In --check mode a stale/missing output is a failure: exit non-zero
+      // (after emitting the receipt) so CI can gate on it. The receipt is
+      // already printed above (shared logger or --json envelope).
+      if (options.check && stale) {
+        process.exitCode = 1;
       }
     },
   });