@astryxdesign/cli 0.7.2-canary.fe2c655 → 0.7.2

package/assets/docs/tree/uninstall.doc.mjs

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file `astryx docs global/uninstall`: uninstall the global install with each package
+ * manager, remove the agent guide, and reset the cache and settings folders.
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export const docs = {
+  type: 'generic',
+  name: 'uninstall',
+  placement: {
+    parent: 'namespace:global',
+    slot: 'guides',
+    order: 10,
+  },
+  title: 'Uninstall and reset',
+  category: 'guide',
+  keywords: [
+    'uninstall',
+    'remove',
+    'reset astryx',
+    'clear cache',
+    'delete cache',
+    'npm uninstall -g',
+    'remove agent guide',
+    'start over',
+  ],
+  description:
+    'Remove your global install, the agent guide it keeps, and the folders it uses, or reset them to start over.',
+  sections: [
+    {
+      id: 'agent-guide',
+      title: 'First, remove the agent guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'While the CLI is still installed, remove the agent guide from your home folder:',
+        },
+        {
+          type: 'code',
+          lang: 'bash',
+          code: 'astryx init --user --remove-agents',
+        },
+        {
+          type: 'prose',
+          text: 'Or delete `~/.agents/skills/astryx` and the links to it listed in {@link generic:computer-agent-guide}.',
+        },
+      ],
+    },
+    {
+      id: 'uninstall',
+      title: 'Uninstall',
+      content: [
+        {
+          type: 'code',
+          lang: 'bash',
+          code: 'npm uninstall -g @astryxdesign/cli\n# or: pnpm remove -g @astryxdesign/cli · yarn global remove @astryxdesign/cli · bun remove -g @astryxdesign/cli · volta uninstall @astryxdesign/cli',
+        },
+        {
+          type: 'prose',
+          text: 'Projects are unaffected: each keeps the CLI it installs, if any.',
+        },
+      ],
+    },
+    {
+      id: 'reset',
+      title: 'Reset',
+      content: [
+        {
+          type: 'prose',
+          text: 'Delete either folder to reset it; Astryx recreates what it needs on the next run.',
+        },
+        {
+          type: 'table',
+          headers: ['Folder', 'Linux', 'macOS', 'Windows'],
+          rows: [
+            [
+              'Cache: versions for projects, saved discover answers',
+              '`~/.cache/astryx`',
+              '`~/Library/Caches/astryx`',
+              '`%LOCALAPPDATA%\\astryx\\Cache`',
+            ],
+            [
+              'Settings: update checks, the agent guide setting, and its links',
+              '`~/.config/astryx`',
+              '`~/Library/Application Support/astryx`',
+              '`%APPDATA%\\astryx`',
+            ],
+          ],
+        },
+        {
+          type: 'prose',
+          text: 'On Linux, `XDG_CACHE_HOME` and `XDG_CONFIG_HOME` move them when set to absolute paths.',
+        },
+      ],
+    },
+    {
+      id: 'more',
+      title: 'More on global mode',
+      content: [
+        {
+          type: 'prose',
+          text: 'This page is part of {@link namespace:global}, which explains what global mode is and how each part works.',
+        },
+      ],
+    },
+  ],
+};

package/assets/docs/tree/updates.doc.mjs

@@ -0,0 +1,92 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file `astryx docs global/updates`: how the global install learns of newer
+ * versions, and the notice it prints (spec AST-081 FR6, FR10).
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export const docs = {
+  type: 'generic',
+  name: 'updates',
+  placement: {
+    parent: 'namespace:global',
+    slot: 'guides',
+    order: 4,
+  },
+  title: 'Updates and notices',
+  category: 'guide',
+  keywords: [
+    'update',
+    'upgrade',
+    'upgrade astryx',
+    'update notice',
+    'new release',
+    'new version',
+    'NO_UPDATE_NOTIFIER',
+    'latest',
+  ],
+  description:
+    'Your global install checks for a newer version once a day and prints a two-line notice after a command succeeds. It never upgrades itself or a project.',
+  sections: [
+    {
+      id: 'notice',
+      title: 'The notice',
+      content: [
+        {
+          type: 'prose',
+          text: "Once a day, never in your first day, your global install checks the registry's `latest` version in the background, without slowing the command. When a newer one exists, a command that succeeds prints two lines on standard error, at most once a day:",
+        },
+        {
+          type: 'code',
+          lang: 'text',
+          code: 'A new release of Astryx is available: 0.7.2 → 0.7.3\nTo upgrade, run: npm i -g @astryxdesign/cli@latest',
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            "The command is the one for the package manager that installed your global install: `npm i -g`, `pnpm add -g`, `yarn global add`, `bun add -g`, or `volta install`. A global folder moved with the package manager's own setting (`BUN_INSTALL`, Yarn's `global-folder`, `PNPM_HOME`, or npm's prefix) counts while that setting names it; an app's own copy never runs the update check.",
+            'When the newest version needs a newer Node than your computer runs, the second line says which Node to install first.',
+            "Inside a project, the notice is about the project's version, and names the project's install and `upgrade` commands. The install command always adds the CLI next to Core, so a project that installed only Core gets its own CLI too, as recommended.",
+          ],
+        },
+      ],
+    },
+    {
+      id: 'project-notice',
+      title: 'In a project',
+      content: [
+        {
+          type: 'code',
+          lang: 'text',
+          code: 'A new release of Astryx is available: 0.7.1 → 0.7.3\nTo upgrade, run: pnpm add @astryxdesign/core@0.7.3 @astryxdesign/cli@0.7.3, then pnpm exec astryx upgrade --from 0.7.1 --apply',
+        },
+      ],
+    },
+    {
+      id: 'turn-off',
+      title: 'Turn it off',
+      content: [
+        {
+          type: 'prose',
+          text: 'No notice prints with `--json`, after a failed command, when the `CI` environment variable is set, or when `NO_UPDATE_NOTIFIER` is set; with either variable set, the CLI does not check the registry either. Unlike some CLIs, a notice prints even when standard error is not a terminal, because agents run the CLI without one.',
+        },
+        {
+          type: 'prose',
+          text: '`astryx doctor` shows the same thing at any time, in its `newest-release` check, along with why the last notice did not print, if one did not. When the last check ran, and when each notice printed, are kept in `state.json` in the settings folder ({@link generic:reference}).',
+        },
+      ],
+    },
+    {
+      id: 'more',
+      title: 'More on global mode',
+      content: [
+        {
+          type: 'prose',
+          text: 'This page is part of {@link namespace:global}, which explains what global mode is and how each part works. Upgrading a project: {@link command:upgrade}.',
+        },
+      ],
+    },
+  ],
+};

package/assets/docs/tree/upgrading.doc.mjs

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file `astryx docs cli/integrations/upgrading`: update an integration
+ * @file `astryx docs cli/integrations/ship/upgrading`: update an integration
  * package for each Astryx release, and the command apps run to upgrade with
  * it.
  */
@@ -28,14 +28,14 @@ export const docs = {
         {
           type: 'code',
           lang: 'bash',
-          code: "# 1. Build and test against the new release\nnpm install -D @astryxdesign/cli@latest @astryxdesign/core@latest\n# 2. Rerun the checks\nnpx astryx doctor integration validate\nnpx astryx doctor integration docs\nnpx astryx integration verify\n# 3. Admit the new Core once the checks pass\nnpm pkg set 'peerDependencies.@astryxdesign/core=^0.6.0 || ^0.7.0'\n# 4. Migrate apps across a change that breaks them\nnpx astryx integration add codemod rename-delay --to 0.7.0",
+          code: "# 1. Build and test against the new release\nnpm install -D @astryxdesign/cli@latest @astryxdesign/core@latest\n# 2. Rerun the checks\nastryx doctor integration validate\nastryx doctor integration docs\nastryx integration verify\n# 3. Admit the new Core once the checks pass\nnpm pkg set 'peerDependencies.@astryxdesign/core=^0.6.0 || ^0.7.0'\n# 4. Migrate apps across a change that breaks them\nastryx integration add codemod rename-delay --to 0.7.0",
         },
         {
           type: 'list',
           style: 'unordered',
           items: [
             'Run every check in {@link generic:checks}, not only the ones shown.',
-            'Name each codemod folder after the Core version whose upgrade should run it; see {@link generic:codemods}.',
+            'Codemod folders are named for Core versions: {@link generic:codemods}.',
             'Release the result as a new version of your package; see {@link generic:publishing}.',
           ],
         },
@@ -52,12 +52,12 @@ export const docs = {
         {
           type: 'code',
           lang: 'bash',
-          code: '# Preview what would change; nothing is written\nnpx astryx upgrade --from 0.6.3 --integration @acme/astryx-widgets\n# Write the changes\nnpx astryx upgrade --from 0.6.3 --integration @acme/astryx-widgets --apply',
+          code: '# Preview what would change; nothing is written\nastryx upgrade --from 0.6.3 --integration @acme/astryx-widgets\n# Write the changes\nastryx upgrade --from 0.6.3 --integration @acme/astryx-widgets --apply',
         },
         {
           type: 'code',
           lang: 'text',
-          code: 'Integrations: @acme/astryx-widgets\n1 codemod to run\nApplying integration codemods...\n  Rename AcmeCarousel delay to interval (v0.7.0, @acme/astryx-widgets)\n[ok]     [ok] src/Hero.tsx',
+          code: 'Integrations: @acme/astryx-widgets\n<n> codemods to run\nApplying integration codemods...\n  Rename AcmeCarousel delay to interval (v0.7.0, @acme/astryx-widgets)\n[ok]     [ok] src/Hero.tsx',
         },
         {
           type: 'list',
@@ -65,7 +65,7 @@ export const docs = {
           items: [
             '`--from` is the `@astryxdesign/core` version the app had before, and the target is the installed Core.',
             '`--integration` names your package. Without it, or an `integrations` entry in `astryx.config`, the upgrade skips your codemods, even when the app has your package installed.',
-            "The count includes Core's codemods for the same versions, which run first.",
+            "`<n>` includes Core's codemods for the same versions, which run first.",
             'Put this command in your release notes.',
           ],
         },

package/assets/docs/tree/use-a-theme-in-an-app.doc.mjs

@@ -26,7 +26,7 @@ export const docs = {
         {
           type: 'code',
           lang: 'bash',
-          code: 'npm install @acme/astryx-widgets\nnpx astryx theme add ocean --package @acme/astryx-widgets',
+          code: 'npm install @acme/astryx-widgets\nastryx theme add ocean --package @acme/astryx-widgets',
         },
         {
           type: 'code',
@@ -34,7 +34,9 @@ export const docs = {
           code: `import {Theme} from '@astryxdesign/core/theme';
 import {themes, defaultThemeSlug} from './astryx-themes';
 
-<Theme theme={themes[defaultThemeSlug]}>{/* app */}</Theme>`,
+<Theme theme={themes[defaultThemeSlug]}>
+  <App />
+</Theme>`,
         },
         {
           type: 'prose',
@@ -64,5 +66,15 @@ export const productTheme = defineTheme({
         },
       ],
     },
+    {
+      id: 'global-mode',
+      title: 'In global mode',
+      content: [
+        {
+          type: 'prose',
+          text: 'In global mode: install the theme package in each app that uses the theme; inside a project, the CLI ignores packages installed for the computer. See {@link namespace:global} and {@link generic:global-integrations}.',
+        },
+      ],
+    },
   ],
 };

package/assets/docs/tree/verify-packed-template.doc.mjs

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file `astryx docs cli/integrations/templates/build-the-template/package-and-test/verify-packed-template`:
+ * @file `astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/verify-packed-template`:
  * what `integration verify` checks for templates, and what it leaves to the
  * app test.
  */
@@ -27,7 +27,7 @@ export const docs = {
         {
           type: 'code',
           lang: 'bash',
-          code: 'npx astryx integration verify',
+          code: 'astryx integration verify',
         },
         {
           type: 'prose',
@@ -67,7 +67,7 @@ export const docs = {
             'Whether the copied file type-checks in every supported app toolchain.',
             'Whether package-owned CSS, fonts, icons, images, or media load in a browser.',
             'Whether layout, color modes, keyboard and pointer input, and real content work.',
-            'Whether a template id collides with Core, or whether a `replaces` target exists. Run `npx astryx doctor integration templates` for those.',
+            'Whether a template id collides with Core, or whether a `replaces` target exists. Run `astryx doctor integration templates` for those.',
             'How the template scores on quality.',
           ],
         },

package/assets/docs/tree/versioning.doc.mjs

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file `astryx docs cli/integrations/versioning`: version an integration
+ * @file `astryx docs cli/integrations/ship/versioning`: version an integration
  * package, know which changes break apps, declare peer ranges, keep apps on
  * older CLIs working, and match codemod folders to versions.
  */
@@ -54,13 +54,13 @@ export const docs = {
           rows: [
             [
               'A component name, such as `AcmeCarousel`',
-              'Imports, and `npx astryx component AcmeCarousel`',
+              'Imports, and `astryx component AcmeCarousel`',
             ],
             [
               'A template id, such as `acme-dashboard`',
-              '`npx astryx template acme-dashboard`',
+              '`astryx template acme-dashboard`',
             ],
-            ['A theme slug, such as `ocean`', '`npx astryx theme add ocean`'],
+            ['A theme slug, such as `ocean`', '`astryx theme add ocean`'],
             [
               'A topic name or route, such as `acme/deploying`',
               'Reads of the old name, and links to it from other docs',
@@ -106,8 +106,8 @@ export const docs = {
             ],
             [
               '`@astryxdesign/cli`',
-              'You ship a docs section, a placed guide, a template that sets `replaces` or `keywords`, a doc section with an `id`, or a theme',
-              '`>=0.6.6` when you ship a template that sets `keywords`, otherwise `>=0.6.4`. Optional in `peerDependenciesMeta`',
+              'You ship a docs section, a placed guide, a template that sets `replaces` or `keywords`, a component that sets `replaces`, a doc section with an `id`, or a theme',
+              '`>=0.6.6` when you ship a template that sets `keywords`, `>=0.6.7` when a component sets `replaces`, otherwise `>=0.6.4`. Optional in `peerDependenciesMeta`',
             ],
           ],
         },
@@ -136,10 +136,11 @@ export const docs = {
           items: [
             'An unknown field in `astryx.integration.mjs` is ignored with an `unknown_manifest_key` warning, and the rest of the manifest still loads.',
             'A named export that the CLI does not know is ignored with no warning, so `debug` and `gapReport` are safe to add.',
-            'A stable CLI before 0.7.0 prints each `{@link ...}` as written.',
+            'Published 0.6.3 and earlier print each `{@link ...}` as written.',
             'Published 0.6.3 and earlier reject a template that sets `replaces` or `keywords`, drop that template, and hide every doc topic your package ships. Published 0.6.4 and 0.6.5 still drop a template that sets `keywords`.',
-            'A stable CLI before 0.6.4 cannot read a docs section, a section `id`, or a theme folder that `integration add theme` writes. It can then hide every doc topic your package ships.',
-            'Stable 0.6.3 still loads your components, but 0.6.0 cannot read the component docs that `integration add component` writes: `component AcmeCarousel` fails there.',
+            'Published 0.6.3 and earlier cannot read a docs section, a section `id`, or a theme folder that `integration add theme` writes. They can then hide every doc topic your package ships.',
+            'Published 0.6.2 and 0.6.3 still load your components, but published 0.6.0 and 0.6.1 cannot read the component docs that `integration add component` writes: `component AcmeCarousel` fails there.',
+            'An app on an older CLI lists a component whose doc names another export of its file under the file name, and lists no family members, so `component AcmeCarousel` fails there.',
           ],
         },
         {

package/assets/docs/tree/who-answers.doc.mjs

@@ -0,0 +1,119 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file `astryx docs global/who-answers`: which version answers in each folder, the
+ * hand-off, and how to see who answered (spec AST-081 FR2, FR3, FR5, FR9).
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export const docs = {
+  type: 'generic',
+  name: 'who-answers',
+  placement: {
+    parent: 'namespace:global',
+    slot: 'guides',
+    order: 3,
+  },
+  title: 'Which version runs, and why',
+  category: 'guide',
+  keywords: [
+    'which release',
+    'wrong version',
+    'different version',
+    'answered by',
+    'answeredBy',
+    'hand-off',
+    'handed over',
+    'project version',
+  ],
+  description:
+    "Inside a project, the project's own CLI answers, whichever astryx command you start; in a project with only Core, the astryx command you started answers. Outside a project, your global install answers. How to see which one did.",
+  sections: [
+    {
+      id: 'in-a-project',
+      title: "In a project, the project's version",
+      content: [
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            "The project installs the CLI, as recommended: that CLI answers, whatever its version, as it always has. When you type the global astryx command instead, it passes the run to the project's CLI, with the same arguments, input, output, and exit status, so either command gives the same answer.",
+            "The project installs only Core, or nothing is installed yet, as in a fresh clone: the astryx command you started answers, as it always has. When its version differs from the project's Core, a hint after the command, once a day, names the command that adds the CLI at Core's version.",
+            "The project's CLI is installed but cannot start: the CLI version equal to the project's Core answers instead (from the installed Core, else the lockfile, else the newest one the declared range allows), installed once into a cache.",
+          ],
+        },
+        {
+          type: 'prose',
+          text: "Components come from `@astryxdesign/core`, and templates, docs, and agent guides come from the CLI. In a project, that Core is the one the project installs, so component commands work offline once the project's dependencies are installed. Outside a project, or in a project with nothing installed yet (a fresh clone), they use the answering version's own Core, from beside the CLI or the cache; when that Core cannot be downloaded, the error says to install the project's dependencies. When the project's CLI and Core are different versions, `astryx doctor` warns and prints the command that brings them to one version.",
+        },
+      ],
+    },
+    {
+      id: 'outside',
+      title: 'Outside a project, your global install',
+      content: [
+        {
+          type: 'prose',
+          text: 'In a folder that belongs to no project, your global install answers as a brand-new project on its version would, so you and your agents can read every component and doc. It never installs a newer version by itself.',
+        },
+        {
+          type: 'prose',
+          text: 'A few commands work on your computer rather than a folder, such as `astryx init --user`: your global install answers them in any folder.',
+        },
+      ],
+    },
+    {
+      id: 'see-it',
+      title: 'See which version answered',
+      content: [
+        {
+          type: 'prose',
+          text: 'In a project with only Core, the hint looks like this, after the command, at most once a day per project:',
+        },
+        {
+          type: 'code',
+          lang: 'text',
+          code: 'astryx: this project has no Astryx CLI installed; answered by CLI 0.7.2 while its Core is 0.6.8. To match, run: npm install @astryxdesign/cli@0.6.8',
+        },
+        {
+          type: 'prose',
+          text: "Otherwise, in text mode, one line on standard error names the version, unless the project's own CLI answered directly:",
+        },
+        {
+          type: 'code',
+          lang: 'text',
+          code: "astryx: answered by this project's CLI 0.6.8, handed over from CLI 0.7.2\nastryx: answered by CLI 0.6.8 with Core 0.6.8, the release that matches this project's Core\nastryx: answered by CLI 0.7.2 with Core 0.7.2, outside a project\nastryx: answered by CLI 0.7.2 with Core 0.7.2, for this computer",
+        },
+        {
+          type: 'prose',
+          text: 'With `--json` nothing extra prints; every result carries `meta.answeredBy` instead ({@link generic:reference}):',
+        },
+        {
+          type: 'code',
+          lang: 'json',
+          code: '{"meta": {"answeredBy": {"cli": "0.7.2", "core": "0.6.8", "copy": "starting"}}}',
+        },
+      ],
+    },
+    {
+      id: 'printed-commands',
+      title: 'Commands Astryx prints',
+      content: [
+        {
+          type: 'prose',
+          text: "Commands the CLI prints for you to run start with a name that reaches the same version: the project's runner (such as `pnpm exec astryx`) in a project, `astryx` outside a project when your global install answered, and otherwise the CLI pinned to the version, such as `npx @astryxdesign/cli@0.6.8`. An integration can name its own command: {@link generic:cli-command}.",
+        },
+      ],
+    },
+    {
+      id: 'more',
+      title: 'More on global mode',
+      content: [
+        {
+          type: 'prose',
+          text: 'This page is part of {@link namespace:global}, which explains what global mode is and how each part works. To check your computer, run `astryx doctor` outside any project ({@link command:doctor}). Monorepos: {@link generic:monorepos}.',
+        },
+      ],
+    },
+  ],
+};

package/assets/docs/tree/write-the-template-file.doc.mjs

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file `astryx docs cli/integrations/templates/build-the-template/write-the-template-file`:
+ * @file `astryx docs cli/integrations/building-blocks/templates/build-the-template/write-the-template-file`:
  * what gets copied, where the copied file lands, and the imports and
  * export a copied template needs.
  */
@@ -44,13 +44,13 @@ export const docs = {
           type: 'code',
           lang: 'bash',
           code: `# Page: src/app/account/page.tsx
-npx astryx template acme-account src/app/account
+astryx template acme-account src/app/account
 
 # Block: src/features/account/acme-stat-card.tsx
-npx astryx template acme-stat-card src/features/account
+astryx template acme-stat-card src/features/account
 
 # Exact destination for either kind
-npx astryx template acme-stat-card src/features/account/StatusCard.tsx`,
+astryx template acme-stat-card src/features/account/StatusCard.tsx`,
         },
         {
           type: 'prose',
@@ -91,8 +91,9 @@ npx astryx template acme-stat-card src/features/account/StatusCard.tsx`,
           lang: 'tsx',
           code: `import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
-import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {HStack} from '@astryxdesign/core/HStack';
 import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/VStack';
 import {AcmeStatusCard} from '@acme/astryx-widgets/components/AcmeStatusCard';
 
 const metrics = [
@@ -144,7 +145,7 @@ export default function AcmeAccountSummary() {
           type: 'list',
           style: 'unordered',
           items: [
-            'Add `use client` as the first statement only when hooks, event handlers, or browser APIs need a client boundary.',
+            'Add `use client` as the first statement only when hooks, event handlers, browser APIs, or a component passed as a prop, such as `icon={BellIcon}`, need a client boundary.',
             'Keep a static template server-compatible when it needs no client behavior.',
           ],
         },

package/assets/docs/use-a-theme.doc.mjs

@@ -25,13 +25,13 @@ export const docs = {
           type: 'code',
           lang: 'tsx',
           label: 'Wire the generated module once',
-          code: "import {Theme} from '@astryxdesign/core';\nimport {themes, defaultThemeSlug} from './astryx-themes';\n\nfunction App() {\n  return (\n    <Theme theme={themes[defaultThemeSlug]}>\n      <YourApp />\n    </Theme>\n  );\n}",
+          code: "import {Theme} from '@astryxdesign/core/theme';\nimport {themes, defaultThemeSlug} from './astryx-themes';\n\nfunction App() {\n  return (\n    <Theme theme={themes[defaultThemeSlug]}>\n      <YourApp />\n    </Theme>\n  );\n}",
         },
         {
           type: 'code',
           lang: 'tsx',
           label: 'Switch among added themes',
-          code: "import {useState} from 'react';\nimport {Theme} from '@astryxdesign/core';\nimport {themes, type ThemeSlug} from './astryx-themes';\n\nconst [slug, setSlug] = useState<ThemeSlug>('neutral');\nconst app = <Theme theme={themes[slug]}><YourApp /></Theme>;",
+          code: "import {useState} from 'react';\nimport {Theme} from '@astryxdesign/core/theme';\nimport {themes, type ThemeSlug} from './astryx-themes';\n\nconst [slug, setSlug] = useState<ThemeSlug>('neutral');\nconst app = <Theme theme={themes[slug]}><YourApp /></Theme>;",
         },
         {
           type: 'prose',