thedjpetersen · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026
@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[docs] Fix stale references in the core README: rename the "XDS CLI" section to "Astryx CLI", correct component names to their current bare exports (Layout, AppShell, TopNav, SideNav), and update remaining XDS brand mentions to Astryx.
+
+@ejhammond
@@ -28,7 +28,7 @@
  *     - Otherwise treat as PascalCase / camelCase and space-separate the
  *       words while preserving capitalization
  *       (`ChatMessageMetadata` -> `Chat Message Metadata`,
- *        `Button`         -> `XDS Button`).
+ *        `Button`         -> `Button`).
  *
  * Run from the repo root:
  *   node apps/docsite/scripts/backfill-display-name.mjs
@@ -81,7 +81,7 @@ function findDocFiles(root, out = []) {
  *  - Otherwise treat as PascalCase / camelCase, insert spaces between
  *    word boundaries while preserving capitalization:
  *    `ChatMessageMetadata` -> `Chat Message Metadata`.
- *    `Button`           -> `XDS Button`.
+ *    `Button`           -> `Button`.
  */
 function deriveDisplayName(name) {
   if (!name) return name;

@@ -5,7 +5,7 @@
 /**
  * @file generate-data.mjs
  *
- * Build-time data extraction for the XDS docsite.
+ * Build-time data extraction for the Astryx docsite.
  * Reads package.json, .doc.mjs, templates, and markdown files across the
  * monorepo and generates typed TypeScript registries in src/generated/.
  *

@@ -47,8 +47,8 @@ if (!existsSync(distDir)) {
   process.exit(0);
 }
 
-const xdsTypes = collectDts(distDir);
-const fileCount = Object.keys(xdsTypes).length;
+const astryxTypes = collectDts(distDir);
+const fileCount = Object.keys(astryxTypes).length;
 
 // Also generate a minimal React types stub
 const reactJsxRuntimeTypes = `
@@ -183,12 +183,12 @@ console.log(
 );
 
 const output = {
-  '@astryxdesign/core': xdsTypes,
+  '@astryxdesign/core': astryxTypes,
   react: {'index.d.ts': reactTypes, 'jsx-runtime.d.ts': reactJsxRuntimeTypes},
   '@stylexjs/stylex': {'index.d.ts': stylexTypes},
   '@heroicons/react': heroiconTypes,
 };
 
 const json = JSON.stringify(output);
 writeFileSync(join(outDir, 'playground-types.json'), json);
-console.log(`Generated playground-types.json: ${fileCount} XDS type files, ${(json.length / 1024).toFixed(0)}KB`);
+console.log(`Generated playground-types.json: ${fileCount} Astryx type files, ${(json.length / 1024).toFixed(0)}KB`);
@@ -4,7 +4,7 @@
 /**
  * Generates apps/docsite/src/generated/playground-scope.ts
  *
- * Maps every XDS module available in the playground preview iframe.
+ * Maps every Astryx module available in the playground preview iframe.
  * This runs as part of `pnpm generate` (before dev/build) so new components
  * are picked up automatically — no manual maintenance needed.
  *
@@ -207,7 +207,7 @@ lines.push('');
 lines.push("import {Theme} from '@astryxdesign/core/theme';");
 lines.push("import type {DefinedTheme} from '@astryxdesign/core/theme';");
 lines.push("import {createElement, type ComponentProps} from 'react';");
-lines.push("import * as xdsTokens from '@astryxdesign/core/theme/tokens.stylex';");
+lines.push("import * as astryxTokens from '@astryxdesign/core/theme/tokens.stylex';");
 lines.push('');
 
 // ── Hooks ──────────────────────────────────────────────────────────────
@@ -277,7 +277,7 @@ for (const t of SCOPE_THEMES) {
 lines.push("  '@astryxdesign/core/theme': {Theme: ControlledTheme},");
 
 // tokens.stylex
-lines.push("  '@astryxdesign/core/theme/tokens.stylex': xdsTokens,");
+lines.push("  '@astryxdesign/core/theme/tokens.stylex': astryxTokens,");
 
 // hooks (useMediaQuery, etc.)
 lines.push("  '@astryxdesign/core/hooks': Hooks,");

@@ -366,7 +366,7 @@ describe('componentRegistry', () => {
     const core = components['@astryxdesign/core'];
     // Public hooks (useTheme, useToast, useTableSortable, …) ship example
     // blocks; internal utility hooks (useFocusTrap, useScrollLock, …) do not.
-    // Post un-prefix migration (P2380608025) the doc `name` is bare for both,
+    // Post un-prefix migration the doc `name` is bare for both,
     // so the public set is identified by having an example-registry entry
     // rather than by a name prefix.
     const hooks = core.filter(

@@ -39,7 +39,9 @@ function getExpectedComponents(): string[] {
   const pkg = JSON.parse(fs.readFileSync(CORE_PKG_PATH, 'utf-8'));
   return Object.keys(pkg.exports ?? {})
     .filter(k => {
-      if (SKIP.test(k)) {return false;}
+      if (SKIP.test(k)) {
+        return false;
+      }
       const name = k.replace('./', '');
       return /^[A-Z]/.test(name);
     })
@@ -70,7 +72,9 @@ describe('playground-scope', () => {
   it('imports every PascalCase component from @astryxdesign/core', () => {
     const missing = expectedComponents.filter(
       name =>
-        !scopeContent.includes(`import * as ${name} from '@astryxdesign/core/${name}';`),
+        !scopeContent.includes(
+          `import * as ${name} from '@astryxdesign/core/${name}';`,
+        ),
     );
     expect(missing).toEqual([]);
   });
@@ -93,7 +97,9 @@ describe('playground-scope', () => {
   it('component count matches core exports', () => {
     const importLines = scopeContent
       .split('\n')
-      .filter(l => l.match(/^import \* as \w+ from '@astryxdesign\/core\/[A-Z]/));
+      .filter(l =>
+        l.match(/^import \* as \w+ from '@astryxdesign\/core\/[A-Z]/),
+      );
     expect(importLines.length).toBe(expectedComponents.length);
   });
 
@@ -124,7 +130,7 @@ describe('playground-scope', () => {
   it('includes Theme controlled wrapper and tokens', () => {
     expect(scopeContent).toContain("'@astryxdesign/core/theme': {Theme:");
     expect(scopeContent).toContain(
-      "'@astryxdesign/core/theme/tokens.stylex': xdsTokens,",
+      "'@astryxdesign/core/theme/tokens.stylex': astryxTokens,",
     );
     expect(scopeContent).toContain('ControlledTheme');
     expect(scopeContent).toContain('SCOPE_THEMES');

@@ -56,7 +56,7 @@ function getInstallSteps(pkgName: string): InstallStep[] {
 }
 
 /** Sections to remove from the @astryxdesign/core README on the package page. */
-const CORE_STRIP_SECTIONS = ['Quick Start', 'Resources', 'XDS CLI'];
+const CORE_STRIP_SECTIONS = ['Quick Start', 'Resources', 'Astryx CLI'];
 
 export function generateStaticParams() {
   return [

@@ -99,7 +99,7 @@ const styles = stylex.create({
   // the expected size and the column header sits at a consistent
   // baseline across all three feature columns.
   //
-  // Rendered as a raw <span> in the JSX because XDS has no
+  // Rendered as a raw <span> in the JSX because Astryx has no
   // primitive for "fixed-size inline-block decorative SVG wrapper"
   // (Icon is glyph-only and bound to its registry; Thumbnail
   // is chat-attachment chrome). The wrapper exists purely to reserve

@@ -362,7 +362,7 @@ const features: Record<string, Feature> = {
     description:
       'Accessible and themeable React components with built-in spacing, dark mode, and flexible styling.',
     href: '/components',
-    // Live, theme-aware sampler of real XDS components instead of a
+    // Live, theme-aware sampler of real Astryx components instead of a
     // baked PNG — the old /feature-components.png stayed light on the
     // dark surface; ComponentsPreview re-themes for dark mode.
     preview: <ComponentsPreview />,

@@ -50,7 +50,7 @@ const themePackages = packages
     return ai - bi;
   });
 
-// Re-set XDS's structural tokens (spacing, radii, font sizes) back to
+// Re-set Astryx's structural tokens (spacing, radii, font sizes) back to
 // the defaults exported from @astryxdesign/core. Each <Theme> wrapper sets a
 // full token bundle including these structural slots, which would make
 // gallery tiles visually inconsistent (different button heights, badge
@@ -80,7 +80,7 @@ const CARD_WIDTH = 800;
 // content and tiles render at visibly different heights based on
 // which theme is showing. 620px chosen empirically as the smallest
 // height that fits all themes' right-column content without clipping
-// at base XDS sizing.
+// at base Astryx sizing.
 const CARD_HEIGHT = 620;
 
 // Horizontal gutter that defines the page's content rim. The
@@ -257,10 +257,8 @@ function ShowcaseHeading() {
         type="body"
         color="secondary"
         xstyle={styles.descriptionWidth}>
-
-        Astryx makes it easy to apply your brand; no rewrites needed.
-        Customize your theme at the token level: color, typography, radius, and
-        motion.
+        Astryx makes it easy to apply your brand; no rewrites needed. Customize
+        your theme at the token level: color, typography, radius, and motion.
       </Text>
     </VStack>
   );
@@ -274,11 +272,7 @@ function HeaderLinks() {
         label="Create a custom theme"
         href="/docs/theme"
       />
-      <Button
-        variant="secondary"
-        label="Explore all themes"
-        href="/themes"
-      />
+      <Button variant="secondary" label="Explore all themes" href="/themes" />
     </HStack>
   );
 }

@@ -136,7 +136,7 @@ const styles = stylex.create({
   //
   // The extra MUST match the showcase overlay's corner radius, which is the
   // docsite (Astryx) --radius-page = 32px. We can't read --radius-page here
-  // because this fill renders inside <XDSTheme theme={active}>, where the
+  // because this fill renders inside <Theme theme={active}>, where the
   // active theme overrides it — e.g. Y2K sets --radius-page: 0, which left the
   // fill 32px short and exposed the docsite body color in the rounded corners.
   // Hence a fixed 32px tied to the overlay radius rather than the theme token.

@@ -21,7 +21,7 @@ import {BRAND_BLUE} from '@/constants';
 // Sentinel for the docsite's local brand theme (not an @astryxdesign/theme-* package).
 const ASTRYX = 'astryx';
 
-// Shared XDS asset CDN. The per-theme reel cards pull the same product photos
+// Shared Astryx asset CDN. The per-theme reel cards pull the same product photos
 // the /themes showcase uses (see themeShowcaseContent.ts) so the hero and the
 // gallery stay in sync.
 const IMAGE_CDN = 'https://lookaside.facebook.com/assets/astryx';

@@ -11,7 +11,7 @@ import {Grid} from '@astryxdesign/core/Grid';
 import {Button} from '@astryxdesign/core/Button';
 import {Theme} from '@astryxdesign/core/theme';
 import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
-// Built theme (__built:true) so <XDSTheme> uses the pre-built CSS and skips
+// Built theme (__built:true) so <Theme> uses the pre-built CSS and skips
 // runtime style injection. Importing the source astryxTheme.ts re-triggers it.
 import {astryxTheme} from '@/themes/astryx';
 import {layout} from '../../layout.stylex';

@@ -3,7 +3,7 @@
 /**
  * Themes page — /themes
  *
- * Single canonical surface for browsing every XDS theme. Renders the
+ * Single canonical surface for browsing every Astryx theme. Renders the
  * full live ThemePackagePage (sidebar picker + themed preview
  * mockup + card showcase), seeded with the Neutral theme as the
  * default selection.

@@ -19,10 +19,10 @@ html {
 }
 
 /* Marketing-only custom properties for the docsite home page. These are
-   NOT XDS theming tokens — they're docsite-specific values that back the
+   NOT Astryx theming tokens — they're docsite-specific values that back the
    landing page's bento feature cards + section rhythm — so they live here
    in globals.css rather than in the Astryx theme (which should only
-   override real XDS semantic tokens). Each is a light-dark() pair so dark
+   override real Astryx semantic tokens). Each is a light-dark() pair so dark
    mode is handled by the value itself, no consumer logic required. */
 :root {
   /* AppShell measures its header post-hydration and sets
@@ -43,7 +43,7 @@ html {
      as a single related group. */
   --astryx-marketing-feature-card-bg: light-dark(#e6f0ff, #1a2333);
 
-  /* Spacing between major home-page sections (the XDS scale tops out at 48px,
+  /* Spacing between major home-page sections (the Astryx scale tops out at 48px,
      too tight for a section break). Shrinks on mobile (below). */
   --astryx-marketing-section-gap: 100px;
 }
@@ -148,10 +148,10 @@ body[data-hero-dark]:not([data-nav-mode='surface'])
 }
 
 /* Hide the prev/next chevron buttons inside the home page's hero theme
-   switcher pagination so only the dot indicators show. XDSPagination's
+   switcher pagination so only the dot indicators show. Pagination's
    variant="dots" ships with chevrons by default; the hero wants a minimal
    indicator-only treatment. Scoped to [data-home-page] so other
-   XDSPagination instances across the site stay untouched. */
+   Pagination instances across the site stay untouched. */
 [data-home-page] .astryx-pagination button[aria-label='Go to previous page'],
 [data-home-page] .astryx-pagination button[aria-label='Go to next page'] {
   display: none;

@@ -4,12 +4,12 @@
  * @file PlaygroundClient.tsx
  * @input URL hash (shared code), user edits, knob edits
  * @output Full-page two-panel playground (editor + live preview)
- * @position app/playground — the interactive XDS code playground.
+ * @position app/playground — the interactive Astryx code playground.
  *
  * AppShell: side-nav-only shell; desktop nav is controlled collapsed to
  * an icon rail while AppShell owns the mobile top bar and drawer.
  * Left panel: Monaco editor (Code) or knobs (Properties).
- *   - Code: Monaco editor (controlled) with real XDS .d.ts typedefs.
+ *   - Code: Monaco editor (controlled) with real Astryx .d.ts typedefs.
  *   - Property: component selector + instance picker + knobs that edit the code.
  * Right panel: toolbar (dark mode · target element · viewport
  *   segmented control · share · expand) over a responsive

@@ -3,10 +3,10 @@
 /**
  * @file monacoSetup.ts
  * @input The Monaco runtime instance passed to the editor's onMount
- * @output Self-hosted loader config + TypeScript-service setup with XDS typedefs
+ * @output Self-hosted loader config + TypeScript-service setup with Astryx typedefs
  * @position Playground Code editor — keeps Monaco wiring out of PlaygroundClient.
  *
- * Configures Monaco's TypeScript service with real XDS type definitions loaded
+ * Configures Monaco's TypeScript service with real Astryx type definitions loaded
  * from a pre-built JSON bundle (generated at build time), so the editor offers
  * accurate autocomplete and diagnostics for @astryxdesign/core, React, StyleX, and icons.
  */
@@ -40,7 +40,7 @@ export type MonacoInstance = typeof MonacoTypes & {
 };
 
 /**
- * Configure Monaco's TypeScript service with real XDS type definitions.
+ * Configure Monaco's TypeScript service with real Astryx type definitions.
  * Loads .d.ts files from a pre-built JSON bundle (generated at build time).
  */
 export function configureMonaco(monaco: MonacoInstance) {
@@ -119,10 +119,10 @@ export function configureMonaco(monaco: MonacoInstance) {
         );
       }
 
-      const xdsFiles = packages['@astryxdesign/core'] ?? {};
+      const coreFiles = packages['@astryxdesign/core'] ?? {};
       const submoduleReexports: string[] = [];
 
-      for (const [relPath, content] of Object.entries(xdsFiles)) {
+      for (const [relPath, content] of Object.entries(coreFiles)) {
         ts.addExtraLib(
           content,
           `file:///node_modules/@astryxdesign/core/dist/${relPath}`,

@@ -9,7 +9,7 @@
  * Transpiles TSX → CommonJS with the self-hosted TypeScript compiler
  * (window.ts, served from /vendor/typescript.js — corpnet blocks CDNs), then
  * evaluates it with a custom `require` mapped to the preview scope plus a
- * global scope so unimported React hooks / XDS components still resolve.
+ * global scope so unimported React hooks / Astryx components still resolve.
  */
 
 import type * as TS from 'typescript';
@@ -107,7 +107,7 @@ const RESERVED_GLOBALS = new Set([
 
 /**
  * Build a scope with ALL named exports from every module so React hooks and
- * XDS components are available as globals without an explicit import.
+ * Astryx components are available as globals without an explicit import.
  *
  * Excludes names that would shadow JS built-ins (see RESERVED_GLOBALS).
  */
@@ -162,7 +162,7 @@ function compile(code: string): string {
 /**
  * Names the user's code declares at the top level of the compiled module.
  *
- * Globals (every XDS/icon export) are passed to `new Function` as parameters so
+ * Globals (every Astryx/icon export) are passed to `new Function` as parameters so
  * unimported components resolve. But a top-level `const Foo = ...` in the user
  * code collides with a `Foo` parameter ("Identifier 'Foo' has already been
  * declared") — e.g. a template defining `const AppleIcon` clashes with

@@ -22,7 +22,7 @@ import {getComponentByModule} from './componentLookup';
 
 /**
  * True if a JSX identifier refers to an XDS-namespace component. Prefix-agnostic
- * (XDS-prefix migration P2380608025): the playground now authors bare names
+ * (XDS-prefix migration): the playground now authors bare names
  * (`<Button>`), but legacy/prefixed names (`<XDSButton>`) must still resolve.
  * Falls back to the `XDS` prefix for components not yet in the registry.
  */

@@ -269,7 +269,7 @@ function clearSelectionOverlay() {
 
 /**
  * Manages the targeting overlay lifecycle inside the iframe. When enabled,
- * intercepts pointer events to highlight hovered XDS components and report
+ * intercepts pointer events to highlight hovered Astryx components and report
  * clicks back to the parent frame.
  */
 export function createTargetingController(

@@ -25,7 +25,7 @@ const s = stylex.create({
   swatchInteractive: {
     cursor: 'pointer',
   },
-  // Native color input overlaid transparently on the swatch (XDS has no color
+  // Native color input overlaid transparently on the swatch (Astryx has no color
   // picker), so clicking the swatch opens the OS picker.
   colorInput: {
     position: 'absolute',

@@ -228,7 +228,7 @@ export function ComponentTokensPanel({
             <HStack gap={2} vAlign="end">
               <StackItem size="fill" xstyle={styles.rowLabel}>
                 <Text type="supporting" color="secondary" maxLines={1}>
-                  .xds-{override.component} → {override.property}
+                  .astryx-{override.component} → {override.property}
                 </Text>
               </StackItem>
               <Button