@astryxdesign/cli 0.1.2-canary.f03e2cc → 0.1.2-canary.f330539

package/CHANGELOG.md

@@ -110,7 +110,6 @@ Thanks to everyone who contributed to this release:
 Thanks to everyone who contributed to this release:
 
 - @ejhammond
-- @joeyfarina
 - @josephfarina
 - @nynexman4464
 

package/README.md

@@ -62,8 +62,7 @@ Options:
 | `upgrade`     | Run codemods to migrate between versions                                                             |
 | `theme build` | Compile a defineTheme file to production CSS and JS                                                  |
 | `discover`    | Discover external packages and components                                                            |
-| `gap-report`  | Report a gap when a component doesn't meet your needs                                                |
-| `doctor`      | Diagnose your XDS setup and report problems with fixes (CI-friendly via exit code)                   |
+| `doctor`      | Diagnose your Astryx setup and report problems with fixes (CI-friendly via exit code)                |
 
 ### Global options
 
@@ -161,7 +160,6 @@ if (isError(result)) {
 | `ERR_INVALID_VERSION`    | A `--from`/`--to` value was not a valid semver string.                                 |
 | `ERR_DEP_MISSING`        | A required external dependency (e.g. jscodeshift) is missing.                          |
 | `ERR_GH_CLI`             | GitHub CLI (`gh`) is not installed or not authenticated.                               |
-| `ERR_GAP_REPORT_FAILED`  | Filing a gap report failed (disabled, or the integration errored).                     |
 
 ## Capability manifest (agent discovery)
 
@@ -172,7 +170,7 @@ discriminators each command can emit. Think of it as an OpenAPI spec for the CLI
 
 ```bash
 astryx manifest --json        # dedicated surface — type: "manifest"
-xds --json                 # bare invocation — embeds the same payload under data.manifest
+astryx --json                 # bare invocation — embeds the same payload under data.manifest
 ```
 
 Shape:
@@ -182,7 +180,7 @@ Shape:
   "apiVersion": 1,
   "type": "manifest",
   "data": {
-    "name": "xds",
+    "name": "astryx",
     "version": "0.0.14",
     "description": "Design system CLI — components, themes, and tooling",
     "globalOptions": [
@@ -249,14 +247,14 @@ the `JSON_SUPPORTED` allowlist and a small declarative `RESPONSE_TYPES` map in
 `src/lib/manifest.mjs`, guarded by a drift test (`manifest.test.mjs`) so adding a
 command without describing it fails CI.
 
-**Backwards-compat:** the bare `xds --json` envelope keeps `type: "help"` and its
+**Backwards-compat:** the bare `astryx --json` envelope keeps `type: "help"` and its
 original shallow fields (`name`, `version`, `commands` as a `string[]` of names,
 `jsonSupported`); the full structured manifest is additive under `data.manifest`.
 For the standalone manifest envelope (`type: "manifest"`), use `astryx manifest --json`.
 
 ## Programmatic API
 
-The same logic that powers `xds --json` is available as importable, type-safe functions:
+The same logic that powers `astryx --json` is available as importable, type-safe functions:
 
 ```typescript
 import {
@@ -269,20 +267,20 @@ import {
   AstryxError,
 } from '@astryxdesign/cli/api';
 
-// Same result as: xds --json component Button
+// Same result as: astryx --json component Button
 const btn = await component('Button');
 btn.type; // 'component.detail'
 btn.data.name; // 'Button' (typed as ComponentDoc)
 
-// Same result as: xds --json component --list
+// Same result as: astryx --json component --list
 const list = await component(undefined, {list: true});
 list.data; // Record<string, string[]>
 
-// Same result as: xds --json docs principles
+// Same result as: astryx --json docs principles
 const principles = await docs('principles');
-principles.data.title; // 'XDS Principles'
+principles.data.title; // 'Principles'
 
-// Same result as: xds --json hook useMediaQuery
+// Same result as: astryx --json hook useMediaQuery
 const useMediaQuery = await hook('useMediaQuery');
 useMediaQuery.data.params; // typed as HookParamDoc[]
 
@@ -296,7 +294,7 @@ try {
 }
 ```
 
-The CLI command handlers are thin wrappers around these functions: they parse args, call the API, then format the output (JSON or text). This guarantees that `@astryxdesign/cli/api` and `xds --json` always return identical data.
+The CLI command handlers are thin wrappers around these functions: they parse args, call the API, then format the output (JSON or text). This guarantees that `@astryxdesign/cli/api` and `astryx --json` always return identical data.
 
 ### Consumer utilities
 
@@ -326,43 +324,41 @@ detail.data.name; // already narrowed
 
 Every response has a `type` string that uniquely identifies it:
 
-| Command                                        | Type                        | Response                          |
-| ---------------------------------------------- | --------------------------- | --------------------------------- |
-| `xds --json component [--list]`                | `component.list`            | `ComponentListResponse`           |
-| `xds --json component --list --detail compact` | `component.brief`           | `ComponentBriefResponse`          |
-| `xds --json component --list --detail full`    | `component.full`            | `ComponentFullResponse`           |
-| `xds --json component <name>`                  | `component.detail`          | `ComponentDetailResponse`         |
-| `xds --json component <name> --props`          | `component.detail.props`    | `ComponentDetailPropsResponse`    |
-| `xds --json component <name> --source`         | `component.detail.source`   | `ComponentDetailSourceResponse`   |
-| `xds --json component <name> --showcase`       | `component.detail.showcase` | `ComponentDetailShowcaseResponse` |
-| `xds --json component <name> --blocks`         | `component.detail.blocks`   | `ComponentDetailBlocksResponse`   |
-| `xds --json discover`                          | `discover.list`             | `DiscoverListResponse`            |
-| `xds --json discover @scope/name`              | `discover.detail`           | `DiscoverDetailResponse`          |
-| `xds --json discover @scope/name/Comp`         | `discover.detail.doc`       | `DiscoverDetailDocResponse`       |
-| `xds --json discover <search>`                 | `discover.search`           | `DiscoverSearchResponse`          |
-| `xds --json docs`                              | `docs.list`                 | `DocsListResponse`                |
-| `xds --json docs <topic>`                      | `docs.detail`               | `DocsDetailResponse`              |
-| `xds --json docs <topic> <section>`            | `docs.detail.section`       | `DocsDetailSectionResponse`       |
-| `xds --json template [--list]`                 | `template.list`             | `TemplateListResponse`            |
-| `xds --json template <name>`                   | `template.show`             | `TemplateShowResponse`            |
-| `xds --json template <name> --skeleton`        | `template.skeleton`         | `TemplateSkeletonResponse`        |
-| `xds --json template <name> [path]`            | `template.copy`             | `TemplateCopyResponse`            |
-| `xds --json hook [--list]`                     | `hook.list`                 | `HookListResponse`                |
-| `xds --json hook --list --detail compact`      | `hook.brief`                | `HookBriefResponse`               |
-| `xds --json hook --list --detail full`         | `hook.full`                 | `HookFullResponse`                |
-| `xds --json hook <name>`                       | `hook.detail`               | `HookDetailResponse`              |
-| `xds --json hook <name> --params`              | `hook.detail.params`        | `HookDetailParamsResponse`        |
-| `xds --json search <query>`                    | `search`                    | `SearchResponse`                  |
-| `xds --json swizzle [--list]`                  | `swizzle.list`              | `SwizzleListResponse`             |
-| `xds --json swizzle <component>`               | `swizzle.copy`              | `SwizzleCopyResponse`             |
-| `xds --json theme build <file>`                | `theme.build`               | `ThemeBuildResponse`              |
-| `xds --json upgrade --list`                    | `upgrade.list`              | `UpgradeListResponse`             |
-| `xds --json upgrade [--apply]`                 | `upgrade.run`               | `UpgradeRunResponse`              |
-| `xds --json gap-report --list-categories`      | `gap-report.categories`     | `GapReportCategoriesResponse`     |
-| `xds --json gap-report --component X ...`      | `gap-report.file`           | `GapReportFileResponse`           |
-| `xds --json doctor`                            | `doctor`                    | `DoctorResponse`                  |
-| any error                                      | —                           | `CLIError`                        |
-| unsupported command                            | —                           | `CLIUnsupportedError`             |
+| Command                                           | Type                        | Response                          |
+| ------------------------------------------------- | --------------------------- | --------------------------------- |
+| `astryx --json component [--list]`                | `component.list`            | `ComponentListResponse`           |
+| `astryx --json component --list --detail compact` | `component.brief`           | `ComponentBriefResponse`          |
+| `astryx --json component --list --detail full`    | `component.full`            | `ComponentFullResponse`           |
+| `astryx --json component <name>`                  | `component.detail`          | `ComponentDetailResponse`         |
+| `astryx --json component <name> --props`          | `component.detail.props`    | `ComponentDetailPropsResponse`    |
+| `astryx --json component <name> --source`         | `component.detail.source`   | `ComponentDetailSourceResponse`   |
+| `astryx --json component <name> --showcase`       | `component.detail.showcase` | `ComponentDetailShowcaseResponse` |
+| `astryx --json component <name> --blocks`         | `component.detail.blocks`   | `ComponentDetailBlocksResponse`   |
+| `astryx --json discover`                          | `discover.list`             | `DiscoverListResponse`            |
+| `astryx --json discover @scope/name`              | `discover.detail`           | `DiscoverDetailResponse`          |
+| `astryx --json discover @scope/name/Comp`         | `discover.detail.doc`       | `DiscoverDetailDocResponse`       |
+| `astryx --json discover <search>`                 | `discover.search`           | `DiscoverSearchResponse`          |
+| `astryx --json docs`                              | `docs.list`                 | `DocsListResponse`                |
+| `astryx --json docs <topic>`                      | `docs.detail`               | `DocsDetailResponse`              |
+| `astryx --json docs <topic> <section>`            | `docs.detail.section`       | `DocsDetailSectionResponse`       |
+| `astryx --json template [--list]`                 | `template.list`             | `TemplateListResponse`            |
+| `astryx --json template <name>`                   | `template.show`             | `TemplateShowResponse`            |
+| `astryx --json template <name> --skeleton`        | `template.skeleton`         | `TemplateSkeletonResponse`        |
+| `astryx --json template <name> [path]`            | `template.copy`             | `TemplateCopyResponse`            |
+| `astryx --json hook [--list]`                     | `hook.list`                 | `HookListResponse`                |
+| `astryx --json hook --list --detail compact`      | `hook.brief`                | `HookBriefResponse`               |
+| `astryx --json hook --list --detail full`         | `hook.full`                 | `HookFullResponse`                |
+| `astryx --json hook <name>`                       | `hook.detail`               | `HookDetailResponse`              |
+| `astryx --json hook <name> --params`              | `hook.detail.params`        | `HookDetailParamsResponse`        |
+| `astryx --json search <query>`                    | `search`                    | `SearchResponse`                  |
+| `astryx --json swizzle [--list]`                  | `swizzle.list`              | `SwizzleListResponse`             |
+| `astryx --json swizzle <component>`               | `swizzle.copy`              | `SwizzleCopyResponse`             |
+| `astryx --json theme build <file>`                | `theme.build`               | `ThemeBuildResponse`              |
+| `astryx --json upgrade --list`                    | `upgrade.list`              | `UpgradeListResponse`             |
+| `astryx --json upgrade [--apply]`                 | `upgrade.run`               | `UpgradeRunResponse`              |
+| `astryx --json doctor`                            | `doctor`                    | `DoctorResponse`                  |
+| any error                                         | —                           | `CLIError`                        |
+| unsupported command                               | —                           | `CLIUnsupportedError`             |
 
 ## Doctor
 
@@ -383,7 +379,7 @@ astryx doctor — diagnosing your setup
       @astryxdesign/core v0.0.14 is in step with @astryxdesign/cli v0.0.14.
   ⚠ Theme packages
       No @astryxdesign/theme-* packages are installed.
-      → fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.
+      → fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set astryx.theme.
   ℹ astryx.config.mjs
       No astryx.config.mjs found — using defaults.
   ℹ AI agent docs
@@ -408,7 +404,7 @@ No failures — but review the ⚠ warnings above when you can.
 | Version alignment            | pass / warn / info   | Installed `@astryxdesign/core` is in step with `@astryxdesign/cli`   |
 | Theme packages               | pass / warn          | An `@astryxdesign/theme-*` package is installed and a theme is wired |
 | astryx.config.mjs            | pass / fail / info   | Config (if present) loads cleanly with a valid shape                 |
-| AI agent docs                | pass / warn / info   | Agent docs exist and contain the XDS section markers                 |
+| AI agent docs                | pass / warn / info   | Agent docs exist and contain the Astryx section markers              |
 | Peer dependencies            | pass / warn / info   | `@astryxdesign/core`'s peer deps (react, …) are installed            |
 | Package manager              | info                 | Reports the detected package manager                                 |
 
@@ -434,8 +430,6 @@ export default {
   templates: {
     get: async id => fetchTemplateFromAPI(id),
   },
-  gapReport: {
-    url: 'https://your-api.com/gaps',
-  },
+  issuesUrl: 'https://github.com/your-org/your-repo/issues',
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.f03e2cc",
+  "version": "0.1.2-canary.f330539",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,9 +75,9 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.f03e2cc",
-    "@astryxdesign/lab": "0.1.2-canary.f03e2cc",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.f03e2cc",
+    "@astryxdesign/core": "0.1.2-canary.f330539",
+    "@astryxdesign/lab": "0.1.2-canary.f330539",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.f330539",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.f03e2cc",
-    "@astryxdesign/lab": "0.1.2-canary.f03e2cc",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.f03e2cc",
+    "@astryxdesign/core": "0.1.2-canary.f330539",
+    "@astryxdesign/lab": "0.1.2-canary.f330539",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.f330539",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

package/src/api/doctor.mjs

@@ -240,7 +240,7 @@ export function checkThemes(ctx) {
       label: 'Theme packages',
       status: 'warn',
       message: 'No @astryxdesign/theme-* packages are installed.',
-      fix: 'Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.',
+      fix: 'Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set astryx.theme.',
     };
   }
 
@@ -354,7 +354,7 @@ export function checkAgentDocs(ctx) {
       label: 'AI agent docs',
       status: 'warn',
       message: `Agent docs present (${present.join(', ')}) but no Astryx section markers found.`,
-      fix: 'Add the XDS section to your agent docs with `astryx init --features agents`.',
+      fix: 'Add the Astryx section to your agent docs with `astryx init --features agents`.',
     };
   }
 
@@ -362,7 +362,7 @@ export function checkAgentDocs(ctx) {
     id: 'agent-docs',
     label: 'AI agent docs',
     status: 'pass',
-    message: `XDS agent docs section present in ${withMarkers.join(', ')}.`,
+    message: `Astryx agent docs section present in ${withMarkers.join(', ')}.`,
   };
 }
 

package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-css-surfaces.test.mjs

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source, filePath = 'test.css') {
+  const {default: transform} = await import('../migrate-xds-css-surfaces.mjs');
+  // api.jscodeshift is unused by this CSS codemod, but the runner still
+  // passes it — mirror that shape.
+  const jscodeshift = (await import('jscodeshift')).default;
+  const api = {jscodeshift, stats: () => {}, report: () => {}};
+  const file = {source, path: filePath};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('migrate-xds-css-surfaces', () => {
+  it('rewrites the .xds- class-selector prefix', async () => {
+    const input = '.xds-heading { color: red; }';
+    const output = await applyTransform(input);
+    expect(output).toBe('.astryx-heading { color: red; }');
+  });
+
+  it('rewrites the [data-xds-theme] attribute selector', async () => {
+    const input = '[data-xds-theme="dark"] .xds-card { background: black; }';
+    const output = await applyTransform(input);
+    expect(output).toContain('[data-astryx-theme="dark"]');
+    expect(output).toContain('.astryx-card');
+    expect(output).not.toContain('xds-');
+  });
+
+  it('rewrites data-xds-theme-prose and data-xds-media attribute selectors', async () => {
+    const input =
+      '[data-xds-theme-prose] {} [data-xds-media="print"] {}';
+    const output = await applyTransform(input);
+    expect(output).toContain('[data-astryx-theme-prose]');
+    expect(output).toContain('[data-astryx-media="print"]');
+  });
+
+  it('rewrites @layer xds-theme and @layer xds-base', async () => {
+    const input = '@layer xds-theme, xds-base;\n@layer xds-theme { a { color: red; } }';
+    const output = await applyTransform(input);
+    expect(output).toContain('astryx-theme');
+    expect(output).toContain('astryx-base');
+    expect(output).not.toContain('xds-theme');
+    expect(output).not.toContain('xds-base');
+  });
+
+  it('does NOT rewrite a bare "xds" in a comment or value', async () => {
+    const input = '/* xds tokens live here */\n.card { content: "xds"; }';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does NOT rewrite a class-like word missing the leading dot', async () => {
+    // e.g. inside a JS-ish string or a comment fragment — not a class selector.
+    const input = '/* use xds-heading in markup */';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('leaves already-migrated CSS unchanged', async () => {
+    const input =
+      '@layer astryx-theme { [data-astryx-theme="dark"] .astryx-card {} }';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+});

package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-declare-module.test.mjs

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source, filePath = 'test.d.ts') {
+  const {default: transform} = await import('../migrate-xds-declare-module.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: filePath};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('migrate-xds-declare-module', () => {
+  it('renames a subpath declare module', async () => {
+    const input = [
+      "declare module '@xds/core/Heading' {",
+      '  export const HeadingLevelMap: Record<string, number>;',
+      '}',
+    ].join('\n');
+
+    const output = await applyTransform(input);
+    expect(output).toMatch(/declare module ['"]@astryxdesign\/core\/Heading['"]/);
+    expect(output).not.toContain('@xds/core');
+    // The augmentation body identifier is untouched.
+    expect(output).toContain('HeadingLevelMap');
+  });
+
+  it('renames a bare @xds/core declare module', async () => {
+    const input = "declare module '@xds/core' {\n  const x: number;\n}";
+    const output = await applyTransform(input);
+    expect(output).toMatch(/declare module ['"]@astryxdesign\/core['"]/);
+    expect(output).not.toContain('@xds/core');
+  });
+
+  it('renames @xds/lab declare module using the shared map', async () => {
+    const input = "declare module '@xds/lab/Thing' {\n  const y: number;\n}";
+    const output = await applyTransform(input);
+    expect(output).toMatch(/declare module ['"]@astryxdesign\/lab\/Thing['"]/);
+    expect(output).not.toContain('@xds/lab');
+  });
+
+  it('leaves non-xds declare modules alone', async () => {
+    const input = "declare module 'react' {\n  const z: number;\n}";
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('leaves an already-migrated declare module unchanged', async () => {
+    const input = "declare module '@astryxdesign/core/Heading' {\n  const a: number;\n}";
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch namespace declarations (Identifier id)', async () => {
+    const input = 'declare namespace XDSCore {\n  const b: number;\n}';
+    const output = await applyTransform(input, 'test.ts');
+    expect(output).toBe(input);
+  });
+});

package/src/codemods/transforms/v0.1.0/__tests__/v0.1.0-ordering.test.mjs

@@ -41,6 +41,29 @@ describe('v0.1.0 codemod manifest ordering', () => {
     expect(entry.optional).toBeFalsy();
   });
 
+  it('orders declare-module and CSS codemods after migrate-xds-module-specifiers', async () => {
+    const {default: manifest} = await import('../index.mjs');
+    const names = manifest.map(entry => entry.name);
+    expect(names).toEqual([
+      'drop-xds-prefix-imports',
+      'migrate-xds-module-specifiers',
+      'migrate-xds-declare-module',
+      'migrate-xds-css-surfaces',
+    ]);
+  });
+
+  it('marks migrate-xds-declare-module and migrate-xds-css-surfaces mandatory', async () => {
+    const {default: manifest} = await import('../index.mjs');
+    for (const name of [
+      'migrate-xds-declare-module',
+      'migrate-xds-css-surfaces',
+    ]) {
+      const entry = manifest.find(e => e.name === name);
+      expect(entry, name).toBeDefined();
+      expect(entry.optional).toBeFalsy();
+    }
+  });
+
   it('un-prefixes useXDSTheme from @xds/core/theme AND renames the scope to @astryxdesign', async () => {
     const input = [
       "import {useXDSTheme} from '@xds/core/theme';",

package/src/codemods/transforms/v0.1.0/index.mjs

@@ -14,6 +14,14 @@ import migrateXdsModuleSpecifiers, {
   meta as migrateXdsModuleSpecifiersMeta,
 } from './migrate-xds-module-specifiers.mjs';
 
+import migrateXdsDeclareModule, {
+  meta as migrateXdsDeclareModuleMeta,
+} from './migrate-xds-declare-module.mjs';
+
+import migrateXdsCssSurfaces, {
+  meta as migrateXdsCssSurfacesMeta,
+} from './migrate-xds-css-surfaces.mjs';
+
 export default [
   {
     // XDS-prefix migration (P2380608025). Mandatory in v0.1.0: the release
@@ -34,4 +42,24 @@ export default [
     transform: migrateXdsModuleSpecifiers,
     meta: migrateXdsModuleSpecifiersMeta,
   },
+  {
+    // Cleans up TypeScript `declare module "@xds/core/..."` augmentations,
+    // which reference the package by string specifier and so are dead after
+    // the scope rename. Mandatory in v0.1.0. Ordered AFTER the specifier
+    // codemod: it uses the same @xds -> @astryxdesign mapping and repairs an
+    // adjacent surface the specifier codemod does not visit (module-decl ids
+    // are not import/export/require sources).
+    name: 'migrate-xds-declare-module',
+    transform: migrateXdsDeclareModule,
+    meta: migrateXdsDeclareModuleMeta,
+  },
+  {
+    // Rewrites consumer CSS surfaces broken by the v0.1.0 DOM-namespace rename
+    // (core no longer dual-emits `xds-*`): the `.xds-*` class-selector prefix,
+    // `[data-xds-*]` attribute selectors, and `@layer xds-*` layer names all
+    // become their `astryx-*` forms. Mandatory in v0.1.0.
+    name: 'migrate-xds-css-surfaces',
+    transform: migrateXdsCssSurfaces,
+    meta: migrateXdsCssSurfacesMeta,
+  },
 ];

package/src/codemods/transforms/v0.1.0/migrate-xds-css-surfaces.mjs

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate XDS CSS surfaces to their Astryx equivalents
+ *
+ * The v0.1.0 release renamed the DOM namespace emitted by @astryxdesign/core
+ * from `xds-*` to `astryx-*` and dropped the dual-emit compatibility (core no
+ * longer emits the legacy `xds-*` classes or `data-xds-*` attributes). Any
+ * consumer CSS that targeted those surfaces is now broken.
+ *
+ * This transform performs precise, targeted string replacements on CSS/SCSS
+ * files for the documented surfaces only:
+ *
+ *   .xds-*                  (class-name prefix in selectors — matched only
+ *                            after a `.` so it is a class selector)
+ *   [data-xds-theme         (theme attribute selector)
+ *   [data-xds-theme-prose   (prose-theme attribute selector)
+ *   [data-xds-media         (media attribute selector)
+ *   @layer xds-theme        (cascade layer name — incl. comma-separated
+ *   @layer xds-base          `@layer a, b;` statement lists and nested blocks)
+ *
+ * It deliberately does NOT blindly replace every `xds` substring: a bare
+ * `xds` in a comment, a custom-property value, or an unrelated identifier is
+ * left untouched. CSS has no meaningful AST for this class of edit, so this is
+ * a plain string transform — `api.jscodeshift` is available but unused.
+ */
+
+export const meta = {
+  title: 'Migrate .xds-* / [data-xds-*] / @layer xds-* CSS surfaces to astryx',
+  description:
+    'Rewrites the documented XDS CSS surfaces to their Astryx equivalents: ' +
+    'the `.xds-*` class-selector prefix, `[data-xds-theme]` / ' +
+    '`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors, and ' +
+    '`@layer xds-theme` / `@layer xds-base` cascade-layer names all become ' +
+    'their `astryx-*` / `data-astryx-*` forms.',
+  pr: '#3092',
+  fileExtensions: ['.css', '.scss'],
+};
+
+// The XDS cascade-layer names we own. A `@layer` prelude can name several
+// layers in a comma-separated list (`@layer a, b;`), so we can't anchor every
+// occurrence to the `@layer` keyword. We instead rewrite these exact layer
+// tokens within a `@layer ...` prelude (up to the next `{` or `;`).
+const XDS_LAYER_NAMES = new Map([
+  ['xds-theme', 'astryx-theme'],
+  ['xds-base', 'astryx-base'],
+]);
+
+function rewriteLayerPrelude(prelude) {
+  return prelude.replace(/\bxds-(?:theme|base)\b/g, name =>
+    XDS_LAYER_NAMES.get(name) ?? name,
+  );
+}
+
+// Ordered, non-overlapping replacements. Each pattern is intentionally narrow
+// so we never touch a bare `xds` substring outside these surfaces.
+const REPLACEMENTS = [
+  // Class-name prefix: only when preceded by a `.` (a class selector).
+  {re: /\.xds-/g, to: '.astryx-'},
+  // Attribute selectors: any `[data-xds-` opener (theme, theme-prose, media).
+  {re: /\[data-xds-/g, to: '[data-astryx-'},
+  // Cascade-layer preludes: `@layer <names>` up to the block `{` or `;`.
+  // Rewrite only the recognized xds-* layer tokens inside the prelude.
+  {re: /@layer\b[^{;]*/g, to: match => rewriteLayerPrelude(match)},
+];
+
+export default function transformer(file /*, api */) {
+  const source = file.source;
+  if (typeof source !== 'string') return undefined;
+
+  let next = source;
+  for (const {re, to} of REPLACEMENTS) {
+    next = next.replace(re, to);
+  }
+
+  return next === source ? undefined : next;
+}

package/src/codemods/transforms/v0.1.0/migrate-xds-declare-module.mjs

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate `declare module "@xds/..."` augmentations to
+ * `@astryxdesign/...`
+ *
+ * The v0.1.0 release moved the public package scope from @xds to
+ * @astryxdesign. TypeScript module augmentations (`declare module "@xds/core"
+ * { ... }`) reference the package by its string specifier, so they are dead
+ * after the scope rename: TypeScript resolves the augmentation against a
+ * module that no longer exists.
+ *
+ * This transform rewrites the augmented module string on `TSModuleDeclaration`
+ * nodes whose `id` is a StringLiteral matching a renamed @xds package (or one
+ * of its subpaths). It only touches the module path — identifiers *inside* the
+ * augmentation (e.g. an augmented interface name) are a separate concern
+ * handled by drop-xds-prefix-imports.
+ *
+ * Ordered AFTER migrate-xds-module-specifiers in the v0.1.0 manifest: it uses
+ * the same PACKAGE_RENAMES mapping and cleans up the module-augmentation
+ * surface alongside the import/export/require specifier rename.
+ */
+
+export const meta = {
+  title: 'Migrate declare-module augmentations from @xds/* to @astryxdesign/*',
+  description:
+    'Rewrites the module specifier on TypeScript `declare module "@xds/..."` ' +
+    'augmentations to the @astryxdesign/* packages used by Astryx v0.1.0. ' +
+    'Only the augmented module path is changed; identifiers inside the ' +
+    'augmentation are left untouched.',
+  pr: '#3092',
+  fileExtensions: ['.ts', '.d.ts', '.tsx'],
+};
+
+const PACKAGE_RENAMES = new Map([
+  ['@xds/build', '@astryxdesign/build'],
+  ['@xds/cli', '@astryxdesign/cli'],
+  ['@xds/core', '@astryxdesign/core'],
+  ['@xds/lab', '@astryxdesign/lab'],
+  ['@xds/theme-butter', '@astryxdesign/theme-butter'],
+  ['@xds/theme-chocolate', '@astryxdesign/theme-chocolate'],
+  ['@xds/theme-daily', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-default', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-gothic', '@astryxdesign/theme-gothic'],
+  ['@xds/theme-matcha', '@astryxdesign/theme-matcha'],
+  ['@xds/theme-neutral', '@astryxdesign/theme-neutral'],
+  ['@xds/theme-stone', '@astryxdesign/theme-stone'],
+  ['@xds/theme-y2k', '@astryxdesign/theme-y2k'],
+]);
+
+function renamePackageSpecifier(value) {
+  if (typeof value !== 'string') return value;
+  for (const [from, to] of PACKAGE_RENAMES) {
+    if (value === from) return to;
+    if (value.startsWith(from + '/')) return to + value.slice(from.length);
+  }
+  return value;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root.find(j.TSModuleDeclaration).forEach(path => {
+    const id = path.node.id;
+    // Module augmentations name the module with a string literal id; a
+    // `namespace Foo {}` uses an Identifier id, which we ignore.
+    if (!id || (id.type !== 'StringLiteral' && id.type !== 'Literal')) return;
+    if (typeof id.value !== 'string') return;
+    const next = renamePackageSpecifier(id.value);
+    if (next === id.value) return;
+    id.value = next;
+    hasChanges = true;
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/commands/agent-docs.mjs

@@ -207,7 +207,7 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
       .sort();
     if (topics.length > 0) lines.push(`  docs <topic>       ${topics.join(', ')}`);
   }
-  lines.push('  swizzle <Name>     eject component source (--gap reports why)');
+  lines.push('  swizzle <Name>     eject component source for deep customization');
   lines.push('  upgrade --apply    run after any @astryxdesign/core bump');
   lines.push(MARKER_END);
 

package/templates/blocks/components/Blockquote/BlockquoteTestimonials.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Blockquote',
+  name: 'Blockquote — Testimonials',
+  displayName: 'Blockquote — Testimonials',
+  description:
+    'Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Blockquote', 'Card', 'Grid', 'GridSpan'],
+};

package/templates/blocks/components/Blockquote/BlockquoteTestimonials.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Blockquote} from '@astryxdesign/core/Blockquote';
+import {Grid, GridSpan} from '@astryxdesign/core/Grid';
+import {Card} from '@astryxdesign/core/Card';
+
+export default function BlockquoteTestimonials() {
+  return (
+    <Grid columns={2} gap={3} style={{maxWidth: 600}}>
+      <Card padding={4}>
+        <Blockquote cite="Sarah K., Lead Engineer">
+          Shipping UI has never been this fast. Our team went from design to
+          production in a single afternoon.
+        </Blockquote>
+      </Card>
+      <Card padding={4}>
+        <Blockquote cite="Marcus T., Product Designer">
+          The token system means every new screen just looks right — no manual
+          color or spacing decisions.
+        </Blockquote>
+      </Card>
+      <GridSpan columns={2}>
+        <Card padding={4}>
+          <Blockquote cite="Priya L., Engineering Manager">
+            Onboarding a new engineer used to take a week of design review. Now
+            they're shipping accessible, polished components on day one.
+          </Blockquote>
+        </Card>
+      </GridSpan>
+    </Grid>
+  );
+}

package/templates/blocks/components/Blockquote/BlockquoteWithCite.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Blockquote',
+  name: 'Blockquote — With Attribution',
+  displayName: 'Blockquote — With Attribution',
+  description:
+    'A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Blockquote', 'Layout'],
+};

package/templates/blocks/components/Blockquote/BlockquoteWithCite.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Blockquote} from '@astryxdesign/core/Blockquote';
+import {VStack} from '@astryxdesign/core/Layout';
+
+export default function BlockquoteWithCite() {
+  return (
+    <VStack gap={4} style={{maxWidth: 500}}>
+      <Blockquote>
+        Design is not just what it looks like and feels like. Design is how it
+        works.
+      </Blockquote>
+      <Blockquote cite="Steve Jobs">
+        The people who are crazy enough to think they can change the world are
+        the ones who do.
+      </Blockquote>
+    </VStack>
+  );
+}

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -12,7 +12,6 @@ export default function DropdownMenuShowcase() {
     <DropdownMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -68,7 +68,6 @@ export default function DropdownMenuItemShowcase() {
     <DropdownMenu
       button={{label: 'Actions'}}
       isMenuOpen
-      hasAutoFocus={false}
       onOpenChange={() => {}}>
       <DropdownMenuItem
         icon={PencilIcon}

package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useKeyboardHint',
+  name: 'useKeyboardHint — Arrow-key Hint',
+  displayName: 'useKeyboardHint — Arrow-key Hint',
+  description:
+    'Toolbar shows an ephemeral "← → to navigate" hint on first keyboard focus via useKeyboardHint, teaching sighted keyboard users that arrows move within the group.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Toolbar', 'Button', 'Icon', 'Card', 'Section', 'Text', 'Layout'],
+};

package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Toolbar} from '@astryxdesign/core/Toolbar';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Card} from '@astryxdesign/core/Card';
+import {Section} from '@astryxdesign/core/Section';
+import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/Layout';
+import {BoldIcon, ItalicIcon, UnderlineIcon} from '@heroicons/react/24/outline';
+
+export default function UseKeyboardHintHookUsage() {
+  return (
+    <Card style={{width: 420}}>
+      <Toolbar
+        label="Text formatting"
+        dividers={['bottom']}
+        startContent={
+          <>
+            <Button
+              label="Bold"
+              variant="ghost"
+              icon={<Icon icon={BoldIcon} />}
+              isIconOnly
+            />
+            <Button
+              label="Italic"
+              variant="ghost"
+              icon={<Icon icon={ItalicIcon} />}
+              isIconOnly
+            />
+            <Button
+              label="Underline"
+              variant="ghost"
+              icon={<Icon icon={UnderlineIcon} />}
+              isIconOnly
+            />
+          </>
+        }
+      />
+      <Section>
+        <VStack gap={1}>
+          <Text type="body" weight="bold">
+            Keyboard-friendly by default
+          </Text>
+          <Text type="supporting" color="secondary">
+            Tab into the toolbar with your keyboard and Toolbar shows an
+            ephemeral "← → to navigate" hint — powered by useKeyboardHint — so
+            sighted keyboard users learn that arrows move within the group.
+          </Text>
+        </VStack>
+      </Section>
+    </Card>
+  );
+}

package/templates/blocks/components/Lightbox/LightboxGallery.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Lightbox',
+  name: 'Lightbox — Gallery',
+  displayName: 'Lightbox — Gallery',
+  description:
+    'A thumbnail grid that opens a fullscreen gallery. Clicking any thumbnail opens the lightbox at that index. Prev/next navigation lets users browse all images without closing.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox', 'Grid', 'Thumbnail'],
+};

package/templates/blocks/components/Lightbox/LightboxGallery.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useLightbox} from '@astryxdesign/core/Lightbox';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+
+const PHOTOS = [
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+    alt: 'Backpack',
+    caption: 'A backpack displayed on a neutral background.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/building.png',
+    alt: 'Modern building',
+    caption: 'A modern building with a contemporary architectural design.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    alt: 'Coastal shoreline with ocean waves',
+    caption:
+      'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    alt: 'Illustrated lakeside landscape at sunset',
+    caption:
+      'A stylized landscape illustration featuring pink clouds reflected over a calm lake at sunset.',
+  },
+];
+
+export default function LightboxGallery() {
+  const lightbox = useLightbox({media: PHOTOS});
+
+  return (
+    <>
+      <Grid columns={2} gap={2} style={{width: 136}}>
+        {PHOTOS.map((photo, i) => (
+          <Thumbnail
+            key={photo.src}
+            src={photo.src}
+            alt={photo.alt}
+            label={photo.alt}
+            onClick={() => lightbox.open(i)}
+          />
+        ))}
+      </Grid>
+      {lightbox.element}
+    </>
+  );
+}

package/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,9 +12,10 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://picsum.photos/id/10/1200/800',
-          alt: 'Forest path',
-          caption: 'A winding path through the forest',
+          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          alt: 'Coastal shoreline with ocean waves',
+          caption:
+            'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
         }}
       />
     </>

package/templates/blocks/components/Lightbox/LightboxVideo.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Lightbox',
+  name: 'Lightbox — Video',
+  displayName: 'Lightbox — Video',
+  description:
+    'Opens a video in the lightbox. Native browser controls are available. Zoom and pan are disabled for video items.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox'],
+};

package/templates/blocks/components/Lightbox/LightboxVideo.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Lightbox} from '@astryxdesign/core/Lightbox';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function LightboxVideo() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button label="Play video" onClick={() => setIsOpen(true)} />
+      <Lightbox
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        media={{
+          src: 'https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1',
+          alt: 'Flower blooming in time-lapse',
+          type: 'video',
+          caption: 'A flower blooming in time-lapse',
+        }}
+      />
+    </>
+  );
+}

package/templates/blocks/components/Lightbox/LightboxZoom.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Lightbox',
+  name: 'Lightbox — Zoom',
+  displayName: 'Lightbox — Zoom',
+  description:
+    'A lightbox with zoom and pan enabled. Double-click the image to zoom in; drag to pan around. Double-click again or use the close button to exit.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox', 'Thumbnail'],
+};

package/templates/blocks/components/Lightbox/LightboxZoom.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Lightbox} from '@astryxdesign/core/Lightbox';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+
+export default function LightboxZoom() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Thumbnail
+        src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+        alt="Coastal shoreline with ocean waves"
+        label="Coastal shoreline with ocean waves"
+        onClick={() => setIsOpen(true)}
+      />
+      <Lightbox
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        media={{
+          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          alt: 'Coastal shoreline with ocean waves',
+          caption:
+            'A scenic coastline. Double-click to zoom in and drag to pan.',
+        }}
+        hasZoom
+      />
+    </>
+  );
+}

package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx

@@ -12,7 +12,6 @@ export default function MoreMenuShowcase() {
     <MoreMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       items={[
         {label: 'Edit', onClick: () => {}},
         {label: 'Duplicate', onClick: () => {}},

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ToggleButtonGroup',
+  name: 'ToggleButtonGroup — Vertical',
+  displayName: 'ToggleButtonGroup — Vertical',
+  description:
+    'A vertically stacked ToggleButtonGroup using the vertical orientation, shown with both single-select and multi-select behavior — ideal for sidebar-style option lists and vertical toolbars.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: ['ToggleButton', 'ToggleButtonGroup', 'Layout', 'Text'],
+};

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {ToggleButton, ToggleButtonGroup} from '@astryxdesign/core/ToggleButton';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ToggleButtonGroupVertical() {
+  const [view, setView] = useState<string | null>('grid');
+  const [filters, setFilters] = useState<string[]>(['active']);
+
+  return (
+    <VStack gap={4}>
+      <VStack gap={1}>
+        <Text type="label" color="secondary">
+          Single select
+        </Text>
+        <ToggleButtonGroup
+          orientation="vertical"
+          value={view}
+          onChange={setView}
+          label="View mode">
+          <ToggleButton value="list" label="List" />
+          <ToggleButton value="grid" label="Grid" />
+          <ToggleButton value="board" label="Board" />
+        </ToggleButtonGroup>
+      </VStack>
+      <VStack gap={1}>
+        <Text type="label" color="secondary">
+          Multi select
+        </Text>
+        <ToggleButtonGroup
+          orientation="vertical"
+          type="multiple"
+          value={filters}
+          onChange={setFilters}
+          label="Status filters">
+          <ToggleButton value="active" label="Active" />
+          <ToggleButton value="pending" label="Pending" />
+          <ToggleButton value="closed" label="Closed" />
+        </ToggleButtonGroup>
+      </VStack>
+    </VStack>
+  );
+}

package/templates/pages/shell-side-nav/page.tsx

@@ -142,7 +142,6 @@ function ConversationItem({
             <MoreMenu
               size="sm"
               label="Conversation options"
-              hasAutoFocus={false}
               onOpenChange={setIsMenuOpen}
               items={[
                 {label: 'Pin', onClick: () => {}},