@astryxdesign/cli 0.1.6 → 0.1.7-canary.04cd8f7

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {ArrowUpIcon, ArrowDownIcon} from '@heroicons/react/24/solid';
+
+const stats = [
+  {label: 'Revenue', value: '$48.2k', delta: '+12%', direction: 'up'},
+  {label: 'Churn', value: '2.1%', delta: '-4%', direction: 'down'},
+] as const;
+
+export default function VisuallyHiddenSupplementaryContext() {
+  return (
+    <HStack gap={4} wrap="wrap">
+      {stats.map(({label, value, delta, direction}) => (
+        <Card key={label} variant="muted">
+          <VStack gap={1}>
+            <Text type="supporting" color="secondary">
+              {label}
+            </Text>
+            <Text type="display-3">{value}</Text>
+            <HStack gap={1} vAlign="center">
+              <Icon
+                icon={direction === 'up' ? ArrowUpIcon : ArrowDownIcon}
+                size="sm"
+                color={direction === 'up' ? 'accent' : 'secondary'}
+              />
+              <Text type="body">
+                {delta}
+                {/* The arrow is decorative; spell out the trend for AT. */}
+                <VisuallyHidden>
+                  {direction === 'up' ? ' increase' : ' decrease'} from last
+                  month
+                </VisuallyHidden>
+              </Text>
+            </HStack>
+          </VStack>
+        </Card>
+      ))}
+    </HStack>
+  );
+}

package/templates/pages/ide/page.tsx

@@ -69,8 +69,8 @@ const styles: Record<string, CSSProperties> = {
   propertyActions: {
     marginTop: 'auto',
   },
-  terminalArea: {
-    height: '100%',
+  terminalPanel: {
+    flexShrink: 0,
     overflow: 'hidden',
   },
 };
@@ -301,46 +301,40 @@ export default function ResizableWorkspacePage() {
                           label="Resize terminal"
                         />
                         {!bottomPanel.isCollapsed && (
-                          <div
-                            style={{
-                              height: bottomPanel.size,
-                              flexShrink: 0,
-                              overflow: 'hidden',
-                            }}>
-                            <Stack
-                              direction="vertical"
-                              style={styles.contentFill}>
-                              <TabList
-                                value={activeTermTab}
-                                onChange={val => setActiveTermTab(val)}
+                          <Stack
+                            direction="vertical"
+                            height={bottomPanel.size}
+                            style={styles.terminalPanel}>
+                            <TabList
+                              value={activeTermTab}
+                              onChange={val => setActiveTermTab(val)}
+                              size="sm"
+                              hasDivider={false}
+                              style={styles.tabListPadding}>
+                              <Tab label="Terminal" value="terminal" />
+                              <Tab label="Problems" value="problems" />
+                              <Tab label="Output" value="output" />
+                              <Tab label="Debug" value="debug" />
+                            </TabList>
+                            <StackItem
+                              size="fill"
+                              style={styles.terminalWrapper}>
+                              <CodeBlock
+                                code={TERMINAL_OUTPUT}
+                                language="bash"
+                                container="section"
+                                hasLanguageLabel={false}
+                                hasCopyButton={false}
                                 size="sm"
-                                hasDivider={false}
-                                style={styles.tabListPadding}>
-                                <Tab label="Terminal" value="terminal" />
-                                <Tab label="Problems" value="problems" />
-                                <Tab label="Output" value="output" />
-                                <Tab label="Debug" value="debug" />
-                              </TabList>
-                              <StackItem
-                                size="fill"
-                                style={styles.terminalWrapper}>
-                                <CodeBlock
-                                  code={TERMINAL_OUTPUT}
-                                  language="bash"
-                                  container="section"
-                                  hasLanguageLabel={false}
-                                  hasCopyButton={false}
-                                  size="sm"
-                                  style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    borderWidth: 0,
-                                    borderRadius: 0,
-                                  }}
-                                />
-                              </StackItem>
-                            </Stack>
-                          </div>
+                                style={{
+                                  width: '100%',
+                                  height: '100%',
+                                  borderWidth: 0,
+                                  borderRadius: 0,
+                                }}
+                              />
+                            </StackItem>
+                          </Stack>
                         )}
                       </Stack>
                     </LayoutContent>

package/templates/pages/theme-showcase/page.tsx

@@ -282,14 +282,14 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 
 // Neutral product photos, served from the shared astryx asset CDN so the
 // scaffolded template renders real imagery without needing local public assets.
-const NEUTRAL_CDN = 'https://lookaside.facebook.com/assets/astryx';
 const DEFAULT_IMAGES: Record<string, string> = {
-  watch: `${NEUTRAL_CDN}/Neutral-Watch.png`,
-  headphones: `${NEUTRAL_CDN}/Neutral-Headphones.png`,
-  backpack: `${NEUTRAL_CDN}/Neutral-Backpack.png`,
-  wallet: `${NEUTRAL_CDN}/Neutral-Wallet.png`,
-  tumbler: `${NEUTRAL_CDN}/Neutral-Tumbler.png`,
-  throw_: `${NEUTRAL_CDN}/Neutral-Blanket.png`,
+  watch: 'https://lookaside.facebook.com/assets/astryx/Neutral-Watch.png',
+  headphones:
+    'https://lookaside.facebook.com/assets/astryx/Neutral-Headphones.png',
+  backpack: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+  wallet: 'https://lookaside.facebook.com/assets/astryx/Neutral-Wallet.png',
+  tumbler: 'https://lookaside.facebook.com/assets/astryx/Neutral-Tumbler.png',
+  throw_: 'https://lookaside.facebook.com/assets/astryx/Neutral-Blanket.png',
 };
 
 export interface ThemeShowcaseProps {

package/templates/themes/neutral/neutralTheme.ts

@@ -39,19 +39,19 @@ import {neutralIconRegistry} from './icons';
 const neutralSyntax = defineSyntaxTheme({
   name: 'xds-neutral',
   tokens: {
-    keyword: ['#700084', '#efa8ff'],    // purple T30/T80
-    string: ['#005600', '#a6d2a2'],     // green (sat T30 / pastel T80)
-    comment: ['#737373', '#a3a3a3'],    // neutral
-    number: ['#6e3500', '#ffb37f'],     // orange
-    function: ['#00458c', '#a0caff'],   // blue T30/T80 H=255
-    type: ['#700084', '#efa8ff'],       // purple
-    variable: ['#171717', '#e5e5e5'],   // near-black / near-white
-    operator: ['#737373', '#a3a3a3'],   // neutral
-    constant: ['#6e3500', '#ffb37f'],   // orange
-    tag: ['#89001a', '#ffaeaa'],        // red
-    attribute: ['#584400', '#eec12f'],  // yellow
-    property: ['#005348', '#83dac9'],   // teal
-    punctuation: ['#a3a3a3', '#525252'],// neutral
+    keyword: ['#700084', '#efa8ff'], // purple T30/T80
+    string: ['#005600', '#a6d2a2'], // green (sat T30 / pastel T80)
+    comment: ['#737373', '#a3a3a3'], // neutral
+    number: ['#6e3500', '#ffb37f'], // orange
+    function: ['#00458c', '#a0caff'], // blue T30/T80 H=255
+    type: ['#700084', '#efa8ff'], // purple
+    variable: ['#171717', '#e5e5e5'], // near-black / near-white
+    operator: ['#737373', '#a3a3a3'], // neutral
+    constant: ['#6e3500', '#ffb37f'], // orange
+    tag: ['#89001a', '#ffaeaa'], // red
+    attribute: ['#584400', '#eec12f'], // yellow
+    property: ['#005348', '#83dac9'], // teal
+    punctuation: ['#a3a3a3', '#525252'], // neutral
     background: ['#fafafa', '#0a0a0a'],
   },
 });
@@ -127,39 +127,39 @@ export const neutralTheme = defineTheme({
     // All values use the OKLCH Neutral tonal palette (chroma=0).
     // =========================================================================
     '--color-background-surface': ['#ffffff', '#262626'],
-    '--color-background-body':    ['#f1f1f1', '#1b1b1b'],
-    '--color-background-card':    ['#ffffff', '#1b1b1b'],
+    '--color-background-body': ['#f1f1f1', '#1b1b1b'],
+    '--color-background-card': ['#ffffff', '#1b1b1b'],
     '--color-background-popover': ['#ffffff', '#1b1b1b'],
-    '--color-background-muted':   ['#f1f1f1', '#1b1b1b'],
+    '--color-background-muted': ['#f1f1f1', '#1b1b1b'],
 
     // Accent + neutral surface tints (sit alongside backgrounds)
-    '--color-accent':       ['#262626', '#ebebeb'],
+    '--color-accent': ['#262626', '#ebebeb'],
     '--color-accent-muted': ['#f1f1f1', '#262626'],
-    '--color-neutral':      ['#0000000F', '#FFFFFF1A'],
+    '--color-neutral': ['#0000000F', '#FFFFFF1A'],
 
     // Overlays (modal scrims, hover/pressed tints)
-    '--color-overlay':         ['#00000080', '#000000CC'],
-    '--color-overlay-hover':   ['#0000000D', '#FFFFFF0D'],
+    '--color-overlay': ['#00000080', '#000000CC'],
+    '--color-overlay-hover': ['#0000000D', '#FFFFFF0D'],
     '--color-overlay-pressed': ['#0000001A', '#FFFFFF1A'],
 
     // Text
-    '--color-text-primary':   ['#171717', '#fafafa'],
+    '--color-text-primary': ['#171717', '#fafafa'],
     '--color-text-secondary': ['#737373', '#a3a3a3'],
-    '--color-text-disabled':  ['#a3a3a3', '#525252'],
-    '--color-text-accent':    ['#262626', '#ebebeb'],
-    '--color-on-dark':    '#ffffff',
-    '--color-on-light':   '#171717',
+    '--color-text-disabled': ['#a3a3a3', '#525252'],
+    '--color-text-accent': ['#262626', '#ebebeb'],
+    '--color-on-dark': '#ffffff',
+    '--color-on-light': '#171717',
     // Contrast: neutral accent is near-black (L) / near-white (D)
-    '--color-on-accent':  ['#ffffff', '#171717'],
+    '--color-on-accent': ['#ffffff', '#171717'],
     '--color-on-success': ['#ffffff', '#171717'],
-    '--color-on-error':   ['#ffffff', '#171717'],
+    '--color-on-error': ['#ffffff', '#171717'],
     '--color-on-warning': '#171717',
 
     // Icon
-    '--color-icon-accent':    ['#262626', '#ebebeb'],
-    '--color-icon-primary':   ['#171717', '#fafafa'],
+    '--color-icon-accent': ['#262626', '#ebebeb'],
+    '--color-icon-primary': ['#171717', '#fafafa'],
     '--color-icon-secondary': ['#737373', '#a3a3a3'],
-    '--color-icon-disabled':  ['#a3a3a3', '#525252'],
+    '--color-icon-disabled': ['#a3a3a3', '#525252'],
 
     // Status / Sentiment — dark mode follows the issue #2150 rubric:
     //
@@ -372,8 +372,8 @@ export const neutralTheme = defineTheme({
     // =========================================================================
     button: {
       'variant:destructive': {
-        backgroundColor: 'var(--color-error-muted)',  // locked pastel red bg
-        color: 'var(--color-error)',                  // locked T30 red — matches banner/input error text
+        backgroundColor: 'var(--color-error-muted)', // locked pastel red bg
+        color: 'var(--color-error)', // locked T30 red — matches banner/input error text
       },
     },
 
@@ -482,6 +482,37 @@ export const neutralTheme = defineTheme({
       },
     },
 
+    // =========================================================================
+    // StatusDot — fill uses the SAME vivid stops as the filled semantic Badge
+    // (and ProgressBar), so a dot and its badge read as one status language.
+    //
+    // The default component maps each variant to a raw semantic token
+    // (--color-success / --color-error / --color-warning / --color-icon-
+    // secondary), which in light mode are the dark T30/T40 stops meant to
+    // sit as TEXT on a pastel surface — as a solid dot they read muddy
+    // (dark green / maroon / brown). Redirect them to the badge fills.
+    //
+    //   success → badge success bg  (green T45 / dark-ramp T60)
+    //   warning → badge warning bg  (yellow T85, same hex both modes)
+    //   error   → badge error bg    (red T55 / dark-ramp T60)
+    //   accent  → badge info bg     (blue T50 / dark-ramp T60) — the
+    //             StatusDot "accent" is the info/attention color, so it
+    //             pairs with the info badge rather than --color-accent
+    //             (near-black #262626, the darkest offender).
+    //
+    // `neutral` is intentionally NOT overridden: the neutral badge bg is a
+    // near-invisible light gray (--color-background-gray #e5e5e5 / 10% white
+    // wash), fine as a large pill but unreadable as an 8px dot. It keeps the
+    // component default's visible mid-gray (--color-icon-secondary), which is
+    // not among the "too dark" cases.
+    // =========================================================================
+    statusdot: {
+      'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
+      'variant:warning': {backgroundColor: '#ffce2f'},
+      'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
+      'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
+    },
+
     // =========================================================================
     // Banner — sits on a hue-tinted surface with colored text/icon:
     //   Light: pastel T90 bg (pulled from --color-{X}-muted / --color-background-blue)

package/src/utils/interactive.mjs

@@ -1,76 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Interactivity contract for the CLI.
- *
- * A single source of truth for "can this process prompt the user?". Several
- * commands launch @clack/prompts wizards; in a non-interactive context (CI,
- * piped stdin/stdout, no TTY) those prompts block forever. Historically each
- * command answered this question differently — some checked `stdout.isTTY`,
- * one checked `stdin.isTTY`, one added `!process.env.CI`, and some had no
- * guard at all. This module centralizes the check so every command behaves
- * identically.
- *
- * Two entry points, for two situations:
- *
- *   - `requireInteractive()` — for commands whose prompt IS the work
- *     (e.g. `astryx init`, `astryx theme`). With no TTY there is nothing to do, so
- *     fail fast (exit 1) with actionable, non-interactive guidance.
- *
- *   - `isInteractive()` — for commands with an OPTIONAL secondary prompt
- *     that runs after the primary work has already succeeded; callers use
- *     this to skip the prompt gracefully in non-interactive contexts.
- */
-
-/**
- * True when the process can safely run an interactive prompt.
- *
- * Requires BOTH stdin and stdout to be TTYs (clack reads stdin and renders to
- * stdout) and that we are not in a CI environment. A CI runner may allocate a
- * pseudo-TTY, so `process.env.CI` is an explicit override: never prompt in CI.
- *
- * @param {object} [env] - Override hook for tests.
- * @param {boolean} [env.stdinTTY=process.stdin.isTTY]
- * @param {boolean} [env.stdoutTTY=process.stdout.isTTY]
- * @param {boolean} [env.ci=Boolean(process.env.CI)]
- * @returns {boolean}
- */
-export function isInteractive({
-  stdinTTY = Boolean(process.stdin && process.stdin.isTTY),
-  stdoutTTY = Boolean(process.stdout && process.stdout.isTTY),
-  ci = Boolean(process.env.CI),
-} = {}) {
-  if (ci) return false;
-  return stdinTTY && stdoutTTY;
-}
-
-/**
- * Guard for commands whose primary action is an interactive wizard. When the
- * process is non-interactive, prints an actionable error and exits 1 instead
- * of hanging on a prompt that will never receive input.
- *
- * @param {object} options
- * @param {string} options.command - Command name for the message, e.g. 'init'.
- * @param {string} options.hint - Concrete non-interactive invocation, e.g.
- *   '`pnpm astryx init --all` or `--features agents,theme,template`'.
- * @param {boolean} [options.json=false] - When true, the command does not
- *   support --json; we still exit 1 but skip the human-formatted guidance.
- * @param {object} [env] - Forwarded to isInteractive (test hook).
- * @returns {void} Returns when interactive; otherwise calls process.exit(1).
- */
-export function requireInteractive({command, hint, json = false} = {}, env) {
-  if (isInteractive(env)) return;
-  const name = command ? `astryx ${command}` : 'this command';
-  console.error(
-    `Error: \`${name}\` with no flags is interactive and requires a TTY.`,
-  );
-  if (hint) {
-    console.error(`Run non-interactively with: ${hint}`);
-  }
-  if (!json) {
-    console.error(
-      'Detected a non-interactive environment (no TTY, piped I/O, or CI=1).',
-    );
-  }
-  process.exit(1);
-}

package/src/utils/interactive.test.mjs

@@ -1,70 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Unit tests for the interactivity contract.
- *
- * isInteractive() is pure given its injected env, so these are fast unit
- * tests. The "does the command actually fail fast instead of hanging" proof
- * lives in the per-command subprocess tests (init/theme non-interactive).
- */
-
-import {describe, it, expect, vi, afterEach} from 'vitest';
-import {isInteractive, requireInteractive} from './interactive.mjs';
-
-describe('isInteractive', () => {
-  it('is true only when stdin AND stdout are TTYs and not CI', () => {
-    expect(isInteractive({stdinTTY: true, stdoutTTY: true, ci: false})).toBe(true);
-  });
-
-  it('is false when stdin is not a TTY (piped input)', () => {
-    expect(isInteractive({stdinTTY: false, stdoutTTY: true, ci: false})).toBe(false);
-  });
-
-  it('is false when stdout is not a TTY (piped output)', () => {
-    expect(isInteractive({stdinTTY: true, stdoutTTY: false, ci: false})).toBe(false);
-  });
-
-  it('is false in CI even with a pseudo-TTY on both streams', () => {
-    expect(isInteractive({stdinTTY: true, stdoutTTY: true, ci: true})).toBe(false);
-  });
-});
-
-describe('requireInteractive', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('returns (does not exit) when interactive', () => {
-    const exit = vi.spyOn(process, 'exit').mockImplementation(() => {
-      throw new Error('exit should not be called');
-    });
-    expect(() =>
-      requireInteractive(
-        {command: 'init', hint: '`astryx init --all`'},
-        {stdinTTY: true, stdoutTTY: true, ci: false},
-      ),
-    ).not.toThrow();
-    expect(exit).not.toHaveBeenCalled();
-  });
-
-  it('exits 1 with actionable guidance when non-interactive', () => {
-    const exit = vi
-      .spyOn(process, 'exit')
-      .mockImplementation(() => {
-        throw new Error('__exit__');
-      });
-    const err = vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() =>
-      requireInteractive(
-        {command: 'theme', hint: '`astryx theme <preset>`'},
-        {stdinTTY: false, stdoutTTY: false, ci: false},
-      ),
-    ).toThrow('__exit__');
-    expect(exit).toHaveBeenCalledWith(1);
-    const output = err.mock.calls.map(c => c.join(' ')).join('\n');
-    expect(output).toMatch(/requires a TTY/i);
-    expect(output).toMatch(/astryx theme <preset>/);
-    expect(output).toMatch(/`astryx theme`/);
-    expect(output).not.toMatch(/\bxds\b/);
-  });
-});