@astryxdesign/cli 0.1.2-canary.1a4d5c5 → 0.1.2-canary.1ba0e77

package/CHANGELOG.md

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

package/README.md

@@ -62,7 +62,8 @@ 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                                                            |
-| `doctor`      | Diagnose your Astryx setup and report problems with fixes (CI-friendly via exit code)                |
+| `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)                   |
 
 ### Global options
 
@@ -160,6 +161,7 @@ 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)
 
@@ -170,7 +172,7 @@ discriminators each command can emit. Think of it as an OpenAPI spec for the CLI
 
 ```bash
 astryx manifest --json        # dedicated surface — type: "manifest"
-astryx --json                 # bare invocation — embeds the same payload under data.manifest
+xds --json                 # bare invocation — embeds the same payload under data.manifest
 ```
 
 Shape:
@@ -180,7 +182,7 @@ Shape:
   "apiVersion": 1,
   "type": "manifest",
   "data": {
-    "name": "astryx",
+    "name": "xds",
     "version": "0.0.14",
     "description": "Design system CLI — components, themes, and tooling",
     "globalOptions": [
@@ -247,14 +249,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 `astryx --json` envelope keeps `type: "help"` and its
+**Backwards-compat:** the bare `xds --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 `astryx --json` is available as importable, type-safe functions:
+The same logic that powers `xds --json` is available as importable, type-safe functions:
 
 ```typescript
 import {
@@ -267,20 +269,20 @@ import {
   AstryxError,
 } from '@astryxdesign/cli/api';
 
-// Same result as: astryx --json component Button
+// Same result as: xds --json component Button
 const btn = await component('Button');
 btn.type; // 'component.detail'
 btn.data.name; // 'Button' (typed as ComponentDoc)
 
-// Same result as: astryx --json component --list
+// Same result as: xds --json component --list
 const list = await component(undefined, {list: true});
 list.data; // Record<string, string[]>
 
-// Same result as: astryx --json docs principles
+// Same result as: xds --json docs principles
 const principles = await docs('principles');
-principles.data.title; // 'Principles'
+principles.data.title; // 'XDS Principles'
 
-// Same result as: astryx --json hook useMediaQuery
+// Same result as: xds --json hook useMediaQuery
 const useMediaQuery = await hook('useMediaQuery');
 useMediaQuery.data.params; // typed as HookParamDoc[]
 
@@ -294,7 +296,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 `astryx --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 `xds --json` always return identical data.
 
 ### Consumer utilities
 
@@ -324,41 +326,43 @@ detail.data.name; // already narrowed
 
 Every response has a `type` string that uniquely identifies it:
 
-| 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`             |
+| 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`             |
 
 ## Doctor
 
@@ -379,7 +383,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 astryx.theme.
+      → fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.
   ℹ astryx.config.mjs
       No astryx.config.mjs found — using defaults.
   ℹ AI agent docs
@@ -404,7 +408,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 Astryx section markers              |
+| AI agent docs                | pass / warn / info   | Agent docs exist and contain the XDS section markers                 |
 | Peer dependencies            | pass / warn / info   | `@astryxdesign/core`'s peer deps (react, …) are installed            |
 | Package manager              | info                 | Reports the detected package manager                                 |
 
@@ -430,6 +434,8 @@ export default {
   templates: {
     get: async id => fetchTemplateFromAPI(id),
   },
-  issuesUrl: 'https://github.com/your-org/your-repo/issues',
+  gapReport: {
+    url: 'https://your-api.com/gaps',
+  },
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.1a4d5c5",
+  "version": "0.1.2-canary.1ba0e77",
   "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.1a4d5c5",
-    "@astryxdesign/lab": "0.1.2-canary.1a4d5c5",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.1a4d5c5",
+    "@astryxdesign/core": "0.1.2-canary.1ba0e77",
+    "@astryxdesign/lab": "0.1.2-canary.1ba0e77",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.1ba0e77",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.1a4d5c5",
-    "@astryxdesign/lab": "0.1.2-canary.1a4d5c5",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.1a4d5c5",
+    "@astryxdesign/core": "0.1.2-canary.1ba0e77",
+    "@astryxdesign/lab": "0.1.2-canary.1ba0e77",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.1ba0e77",
     "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 astryx.theme.',
+      fix: 'Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.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 Astryx section to your agent docs with `astryx init --features agents`.',
+      fix: 'Add the XDS 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: `Astryx agent docs section present in ${withMarkers.join(', ')}.`,
+    message: `XDS agent docs section present in ${withMarkers.join(', ')}.`,
   };
 }
 

package/src/codemods/transforms/{v0.1.0 → v0.0.15}/drop-xds-prefix-imports.mjs

@@ -4,23 +4,12 @@
  * @file Codemod: Drop the `XDS` prefix from @xds/core imports and their usages
  *
  * Part of the XDS-prefix migration (P2380608025). Rewrites consumer code from
- * the prefixed names to their bare equivalents:
+ * the prefixed names to the bare compatibility aliases shipped in P1:
  *
  *   XDSButton      -> Button
  *   XDSButtonProps -> ButtonProps
  *   useXDSTheme    -> useTheme
  *   useXDSToast    -> useToast
- *   XDSIconRegistry-> IconRegistry
- *
- * Mandatory in v0.1.0: the prefixed compatibility aliases (which made both
- * prefixed and bare names valid during the 0.0.x compat window) were dropped
- * in v0.1.0, so the un-prefixing is now required for code to keep type-
- * checking against @astryxdesign/core.
- *
- * Ordering: within the v0.1.0 manifest this runs BEFORE
- * migrate-xds-module-specifiers so it still matches `@xds/core` imports (its
- * source matcher) and un-prefixes the identifiers first; the specifier codemod
- * then rewrites the module paths `@xds/*` -> `@astryxdesign/*`.
  *
  * Safety: this codemod ONLY renames identifiers that are imported from
  * `@xds/core` (bare or subpath, e.g. `@xds/core/Button`). It tracks the local
@@ -47,9 +36,9 @@ export const meta = {
   title: 'Drop XDS prefix from @xds/core imports (XDSButton -> Button)',
   description:
     'Rewrites @xds/core imports and their usages from the prefixed names ' +
-    '(XDSButton, useXDSTheme, XDSIconRegistry, XDSButtonProps) to their bare ' +
-    'names (Button, useTheme, IconRegistry, ButtonProps). Only renames ' +
-    'bindings imported from @xds/core, leaving unrelated identifiers untouched.',
+    '(XDSButton, useXDSTheme, XDSButtonProps) to the bare compatibility ' +
+    'aliases (Button, useTheme, ButtonProps). Only renames bindings imported ' +
+    'from @xds/core, leaving unrelated identifiers untouched.',
   pr: '#2880',
 };
 

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

@@ -34,6 +34,10 @@ import migrateSelectorChildrenToRenderOption, {
   meta as migrateSelectorChildrenToRenderOptionMeta,
 } from './migrate-selector-children-to-render-option.mjs';
 
+import dropXdsPrefixImports, {
+  meta as dropXdsPrefixImportsMeta,
+} from './drop-xds-prefix-imports.mjs';
+
 export default [
   {
     name: 'rename-date-picker-to-input',
@@ -71,4 +75,13 @@ export default [
     transform: migrateSelectorChildrenToRenderOption,
     meta: migrateSelectorChildrenToRenderOptionMeta,
   },
+  {
+    // XDS-prefix migration (P2380608025). Optional + not tied to a version
+    // bump: consumers run it explicitly during their migration, e.g.
+    //   astryx upgrade --codemod drop-xds-prefix-imports --codemod-only --apply
+    name: 'drop-xds-prefix-imports',
+    transform: dropXdsPrefixImports,
+    meta: dropXdsPrefixImportsMeta,
+    optional: true,
+  },
 ];

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

@@ -6,60 +6,14 @@
  * Lists all codemods for the v0.1.0 release in the order they should run.
  */
 
-import dropXdsPrefixImports, {
-  meta as dropXdsPrefixImportsMeta,
-} from './drop-xds-prefix-imports.mjs';
-
 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
-    // dropped the prefixed compatibility aliases (useXDSTheme, XDSButton,
-    // XDSIconRegistry, ...), so consumers upgrading from 0.0.x MUST rewrite
-    // prefixed imports to their bare names.
-    //
-    // Ordered BEFORE migrate-xds-module-specifiers so it sees `@xds/core`
-    // imports (its source matcher) and un-prefixes the identifiers first;
-    // the specifier codemod then rewrites the paths to `@astryxdesign/core`.
-    // The runner preserves this array order (see runner.mjs).
-    name: 'drop-xds-prefix-imports',
-    transform: dropXdsPrefixImports,
-    meta: dropXdsPrefixImportsMeta,
-  },
   {
     name: 'migrate-xds-module-specifiers',
     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/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 for deep customization');
+  lines.push('  swizzle <Name>     eject component source (--gap reports why)');
   lines.push('  upgrade --apply    run after any @astryxdesign/core bump');
   lines.push(MARKER_END);
 

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

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

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.doc.mjs

@@ -10,5 +10,5 @@ export const doc = {
     'Shows a page summary when hovering a link: title, description, and URL. Use for documentation links, article references, or any URL where a preview helps the user decide whether to click.',
   isReady: true,
   aspectRatio: 16 / 9,
-  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Link', 'Text'],
+  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Text'],
 };

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.tsx

@@ -5,14 +5,12 @@
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {Icon} from '@astryxdesign/core/Icon';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
-import {Link} from '@astryxdesign/core/Link';
 import {Text} from '@astryxdesign/core/Text';
 import {LinkIcon} from '@heroicons/react/24/outline';
 
 export default function HoverCardInteractiveContent() {
   return (
-    <Text type="body">
-      Read more in the{' '}
+    <Text type="body">Read more in the{' '}
       <HoverCard
         placement="below"
         content={
@@ -32,11 +30,8 @@ export default function HoverCardInteractiveContent() {
             </HStack>
           </VStack>
         }>
-        <Link href="#" hasUnderline>
-          Getting Started Guide
-        </Link>
-      </HoverCard>
-      .
-    </Text>
+        Getting Started Guide
+      </HoverCard>.
+          </Text>
   );
 }

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

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

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

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

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

@@ -1,67 +0,0 @@
-// 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

@@ -1,61 +0,0 @@
-// 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

@@ -1,104 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-/**
- * End-to-end test proving the v0.1.0 manifest ordering: the prefix-drop
- * codemod runs BEFORE migrate-xds-module-specifiers, so a prefixed identifier
- * imported from `@xds/core` is un-prefixed AND the module path is rewritten to
- * `@astryxdesign/core` in a single upgrade pass.
- */
-async function applyManifestInOrder(source, filePath = 'test.tsx') {
-  const {default: manifest} = await import('../index.mjs');
-  const jscodeshift = (await import('jscodeshift')).default;
-  const j = jscodeshift.withParser('tsx');
-  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
-
-  let current = source;
-  for (const {transform} of manifest) {
-    const file = {source: current, path: filePath};
-    const result = transform(file, api);
-    current = result ?? current;
-  }
-  return current;
-}
-
-describe('v0.1.0 codemod manifest ordering', () => {
-  it('runs drop-xds-prefix-imports before migrate-xds-module-specifiers', async () => {
-    const {default: manifest} = await import('../index.mjs');
-    const names = manifest.map(entry => entry.name);
-    const prefixDropIdx = names.indexOf('drop-xds-prefix-imports');
-    const specifierIdx = names.indexOf('migrate-xds-module-specifiers');
-    expect(prefixDropIdx).toBeGreaterThanOrEqual(0);
-    expect(specifierIdx).toBeGreaterThanOrEqual(0);
-    expect(prefixDropIdx).toBeLessThan(specifierIdx);
-  });
-
-  it('drop-xds-prefix-imports is mandatory (not optional) in v0.1.0', async () => {
-    const {default: manifest} = await import('../index.mjs');
-    const entry = manifest.find(e => e.name === 'drop-xds-prefix-imports');
-    expect(entry).toBeDefined();
-    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';",
-      '',
-      'function App() {',
-      '  const theme = useXDSTheme();',
-      '  return theme;',
-      '}',
-    ].join('\n');
-
-    const output = await applyManifestInOrder(input);
-
-    expect(output).toMatch(/import\s*\{useTheme\}\s*from\s*['"]@astryxdesign\/core\/theme['"]/);
-    expect(output).toContain('const theme = useTheme();');
-    // The prefixed name and old scope must be fully gone.
-    expect(output).not.toContain('useXDSTheme');
-    expect(output).not.toContain('@xds/core');
-  });
-
-  it('un-prefixes XDSButton and XDSIconRegistry alongside the scope rename', async () => {
-    const input = [
-      "import {XDSButton, XDSIconRegistry} from '@xds/core';",
-      '',
-      'const registry = new XDSIconRegistry();',
-      'const el = <XDSButton />;',
-    ].join('\n');
-
-    const output = await applyManifestInOrder(input);
-
-    expect(output).toMatch(/from\s*['"]@astryxdesign\/core['"]/);
-    expect(output).toContain('Button');
-    expect(output).toContain('IconRegistry');
-    expect(output).toContain('new IconRegistry()');
-    expect(output).not.toContain('XDSButton');
-    expect(output).not.toContain('XDSIconRegistry');
-    expect(output).not.toContain('@xds/core');
-  });
-});

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

@@ -1,77 +0,0 @@
-// 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

@@ -1,78 +0,0 @@
-// 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/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'DateRangeInput',
-  name: 'DateRangeInput — With Presets',
-  displayName: 'DateRangeInput — With Presets',
-  description:
-    'Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['DateRangeInput', 'Layout', 'Text'],
-};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.tsx

@@ -1,46 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
-import type {DateRange} from '@astryxdesign/core/DateRangeInput';
-import type {ISODateString} from '@astryxdesign/core/Calendar';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-function daysAgo(n: number): ISODateString {
-  const d = new Date();
-  d.setDate(d.getDate() - n);
-  return d.toISOString().slice(0, 10) as ISODateString;
-}
-
-function today(): ISODateString {
-  return new Date().toISOString().slice(0, 10) as ISODateString;
-}
-
-const presets = [
-  {label: 'Last 7 days', getRange: () => ({start: daysAgo(7), end: today()})},
-  {label: 'Last 14 days', getRange: () => ({start: daysAgo(14), end: today()})},
-  {label: 'Last 30 days', getRange: () => ({start: daysAgo(30), end: today()})},
-  {label: 'Last 90 days', getRange: () => ({start: daysAgo(90), end: today()})},
-];
-
-export default function DateRangeInputWithPresets() {
-  const [range, setRange] = useState<DateRange | null>(null);
-
-  return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
-      <Text type="supporting" color="secondary">
-        {range ? `${range.start} → ${range.end}` : 'No range selected'}
-      </Text>
-      <DateRangeInput
-        label="Report period"
-        description="Use a preset or pick a custom range"
-        value={range}
-        onChange={setRange}
-        presets={presets}
-      />
-    </Stack>
-  );
-}

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'DateRangeInput',
-  name: 'DateRangeInput — Validation',
-  displayName: 'DateRangeInput — Validation',
-  description:
-    'Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['DateRangeInput', 'Layout'],
-};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.tsx

@@ -1,52 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
-import type {DateRange} from '@astryxdesign/core/DateRangeInput';
-import {Stack} from '@astryxdesign/core/Layout';
-
-export default function DateRangeInputWithValidation() {
-  const [errorRange, setErrorRange] = useState<DateRange | null>({
-    start: '2026-01-01',
-    end: '2026-01-31',
-  });
-  const [warningRange, setWarningRange] = useState<DateRange | null>({
-    start: '2026-06-01',
-    end: '2026-06-30',
-  });
-  const [successRange, setSuccessRange] = useState<DateRange | null>({
-    start: '2026-03-01',
-    end: '2026-03-31',
-  });
-
-  return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
-      <DateRangeInput
-        label="Booking period"
-        value={errorRange}
-        onChange={setErrorRange}
-        status={{
-          type: 'error',
-          message: 'Selected dates are no longer available',
-        }}
-      />
-      <DateRangeInput
-        label="Preferred period"
-        value={warningRange}
-        onChange={setWarningRange}
-        status={{
-          type: 'warning',
-          message: 'High demand — limited availability',
-        }}
-      />
-      <DateRangeInput
-        label="Confirmed period"
-        value={successRange}
-        onChange={setSuccessRange}
-        status={{type: 'success', message: 'Dates confirmed and available'}}
-      />
-    </Stack>
-  );
-}

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'DateTimeInput',
-  name: 'DateTimeInput — Validation',
-  displayName: 'DateTimeInput — Validation',
-  description:
-    'DateTimeInput in all three status states: error, warning, and success. Use to surface scheduling conflicts, caution the user about edge cases, or confirm a valid datetime.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['DateTimeInput', 'Layout'],
-};

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.tsx

@@ -1,43 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
-import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
-import {Stack} from '@astryxdesign/core/Layout';
-
-export default function DateTimeInputWithValidation() {
-  const [errorVal, setErrorVal] = useState<ISODateTimeString | undefined>(
-    '2026-01-25T09:00' as ISODateTimeString,
-  );
-  const [warningVal, setWarningVal] = useState<ISODateTimeString | undefined>(
-    '2026-12-25T14:00' as ISODateTimeString,
-  );
-  const [successVal, setSuccessVal] = useState<ISODateTimeString | undefined>(
-    '2026-03-10T10:30' as ISODateTimeString,
-  );
-
-  return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
-      <DateTimeInput
-        label="Meeting time"
-        value={errorVal}
-        onChange={setErrorVal}
-        status={{type: 'error', message: 'This time slot is already booked'}}
-      />
-      <DateTimeInput
-        label="Preferred time"
-        value={warningVal}
-        onChange={setWarningVal}
-        status={{type: 'warning', message: 'This falls outside business hours'}}
-      />
-      <DateTimeInput
-        label="Start time"
-        value={successVal}
-        onChange={setSuccessVal}
-        status={{type: 'success', message: 'Time confirmed'}}
-      />
-    </Stack>
-  );
-}