@astryxdesign/cli 0.1.0 → 0.1.1-canary.080d887

package/src/utils/update-check.mjs

@@ -4,9 +4,8 @@
  * @file Check for newer @astryxdesign/core versions via local signals.
  *
  * Resolution order:
- * 1. $ASTRYX_LATEST_VERSION env var (set by previous CLI invocation)
- * 2. xds.versionFile in consumer's package.json (e.g. ../../libs/xds-common/LATEST_VERSION)
- * 3. If neither: no hint (no network calls from this module)
+ * 1. $ASTRYX_LATEST_VERSION env var
+ * 2. If unset: no hint (no network calls from this module)
  *
  * When a newer version is detected, returns a hint string for CLI output.
  * Also sets $ASTRYX_LATEST_VERSION for subsequent commands in the same shell.
@@ -23,34 +22,13 @@ import {semverGt} from './semver.mjs';
  * @param {string} [cwd] - Project directory (default: process.cwd())
  * @returns {string|null} Latest version string, or null if unknown
  */
-export function getLatestVersion(cwd = process.cwd()) {
+export function getLatestVersion() {
   // 1. Check env var (fastest — set by previous CLI run)
   const envVersion = process.env.ASTRYX_LATEST_VERSION;
   if (envVersion && /^\d+\.\d+\.\d+/.test(envVersion)) {
     return envVersion;
   }
 
-  // 2. Check versionFile from package.json config
-  try {
-    const pkgPath = path.resolve(cwd, 'package.json');
-    if (fs.existsSync(pkgPath)) {
-      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-      const versionFile = pkg.astryx?.versionFile;
-
-      if (versionFile) {
-        const filePath = path.resolve(cwd, versionFile);
-        if (fs.existsSync(filePath)) {
-          const version = fs.readFileSync(filePath, 'utf-8').trim();
-          if (/^\d+\.\d+\.\d+/.test(version)) {
-            return version;
-          }
-        }
-      }
-    }
-  } catch {
-    // Silently fail — version check should never break the CLI
-  }
-
   return null;
 }
 
@@ -97,7 +75,7 @@ export function checkForUpdate(cwd = process.cwd()) {
   // Use semver-aware comparison so '0.0.20' is correctly treated as greater
   // than '0.0.5' (lexicographic compare gets that backwards).
   if (semverGt(latest, installed)) {
-    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. You can upgrade with: astryx upgrade --apply --to ${latest}`;
+    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. Install the new package version, then run: astryx upgrade --from <old-version> --apply`;
   }
 
   return null;

package/src/utils/update-check.test.mjs

@@ -14,7 +14,7 @@ let tmpDir;
 const originalEnv = {};
 
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-update-check-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-update-check-'));
   // Save and clear env
   originalEnv.ASTRYX_LATEST_VERSION = process.env.ASTRYX_LATEST_VERSION;
   delete process.env.ASTRYX_LATEST_VERSION;
@@ -41,17 +41,6 @@ describe('getLatestVersion', () => {
     expect(getLatestVersion(tmpDir)).toBeNull();
   });
 
-  it('reads from versionFile in package.json', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './LATEST_VERSION'}}),
-    );
-
-    expect(getLatestVersion(tmpDir)).toBe('0.0.9');
-  });
-
   it('returns null when no signals exist', () => {
     fs.writeFileSync(
       path.join(tmpDir, 'package.json'),
@@ -59,26 +48,6 @@ describe('getLatestVersion', () => {
     );
     expect(getLatestVersion(tmpDir)).toBeNull();
   });
-
-  it('returns null when versionFile path does not exist', () => {
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './missing/LATEST_VERSION'}}),
-    );
-    expect(getLatestVersion(tmpDir)).toBeNull();
-  });
-
-  it('env var takes priority over versionFile', () => {
-    process.env.ASTRYX_LATEST_VERSION = '1.0.0';
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './LATEST_VERSION'}}),
-    );
-
-    expect(getLatestVersion(tmpDir)).toBe('1.0.0');
-  });
 });
 
 describe('getInstalledVersion', () => {
@@ -117,7 +86,7 @@ describe('checkForUpdate', () => {
 
     const hint = checkForUpdate(tmpDir);
     expect(hint).toContain('0.0.8');
-    expect(hint).toContain('astryx upgrade --apply --to 0.0.8');
+    expect(hint).toContain('astryx upgrade --from <old-version> --apply');
     expect(hint).toContain('FYI');
   });
 
@@ -140,37 +109,6 @@ describe('checkForUpdate', () => {
     expect(checkForUpdate(tmpDir)).toBeNull();
   });
 
-  it('sets env var for subsequent calls', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.8\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({
-        dependencies: {'@astryxdesign/core': '^0.0.7'},
-        astryx: {versionFile: './LATEST_VERSION'},
-      }),
-    );
-
-    checkForUpdate(tmpDir);
-    expect(process.env.ASTRYX_LATEST_VERSION).toBe('0.0.8');
-  });
-
-  it('reads from versionFile and produces hint', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({
-        dependencies: {'@astryxdesign/core': '^0.0.7'},
-        astryx: {versionFile: './LATEST_VERSION'},
-      }),
-    );
-
-    const hint = checkForUpdate(tmpDir);
-    expect(hint).toContain('0.0.9');
-    expect(hint).toContain('FYI');
-  });
-
   it('uses semver (not lexicographic) comparison for double-digit patches', () => {
     // Regression: with string compare, '0.0.20' > '0.0.5' is false because
     // '2' < '5' lexicographically. Users on 0.0.5 would never be told that

package/templates/blocks/components/AppShell/AppShellContentOnly.tsx

@@ -5,18 +5,10 @@
 import {AppShell} from '@astryxdesign/core/AppShell';
 import {VStack} from '@astryxdesign/core/Stack';
 import {Heading, Text} from '@astryxdesign/core/Text';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellContentOnly() {
   return (
-    <AppShell contentPadding={6} xstyle={styles.fit}>
+    <AppShell contentPadding={6} style={{height: '100%', minHeight: 0}}>
       <VStack gap={4}>
         <Heading level={3}>Page Content</Heading>
         <Text type="body">

package/templates/blocks/components/AppShell/AppShellShowcase.tsx

@@ -19,21 +19,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-    width: '100%',
-  },
-});
 
 export default function AppShellShowcase() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0, width: '100%'}}
       sideNav={
         <SideNav
           header={

package/templates/blocks/components/AppShell/AppShellSideNavOnly.tsx

@@ -20,20 +20,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellSideNavOnly() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       sideNav={
         <SideNav
           header={

package/templates/blocks/components/AppShell/AppShellTopNavOnly.tsx

@@ -8,20 +8,12 @@ import {Heading, Text} from '@astryxdesign/core/Text';
 import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
 import {NavIcon} from '@astryxdesign/core/NavIcon';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellTopNavOnly() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"

package/templates/blocks/components/AppShell/AppShellTopNavWithSideNav.tsx

@@ -16,20 +16,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellTopNavWithSideNav() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"

package/templates/blocks/components/AppShell/AppShellWithBanner.tsx

@@ -17,20 +17,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellWithBanner() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"

package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -2,26 +2,9 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {HStack, VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
-
-const s = stylex.create({
-  // Fixed height with auto width lets the aspect ratio drive the width,
-  // so all three containers share the same height but differ in width.
-  ratioBox: {
-    height: 120,
-    width: 'auto',
-    borderRadius: radiusVars['--radius-container'],
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
 
 const items = [
   {
@@ -49,8 +32,18 @@ export default function AspectRatioShowcase() {
     <HStack gap={4} vAlign="start">
       {items.map(({ratio, label, src, alt}) => (
         <VStack key={label} gap={2} hAlign="center">
-          <AspectRatio ratio={ratio} xstyle={s.ratioBox}>
-            <img src={src} alt={alt} {...stylex.props(s.image)} />
+          <AspectRatio
+            ratio={ratio}
+            style={{
+              height: 120,
+              width: 'auto',
+              borderRadius: 'var(--radius-container)',
+            }}>
+            <img
+              src={src}
+              alt={alt}
+              style={{width: '100%', height: '100%', objectFit: 'cover'}}
+            />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

package/templates/blocks/components/Banner/BannerShowcase.tsx

@@ -4,17 +4,10 @@
 
 import {Banner} from '@astryxdesign/core/Banner';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 800,
-  },
-});
 
 export default function BannerShowcase() {
   return (
-    <Stack direction="vertical" gap={3} xstyle={styles.root}>
+    <Stack direction="vertical" gap={3} style={{maxWidth: 800}}>
       <Banner status="info" title="A new software update is available." />
       <Banner status="success" title="Your changes have been saved." />
       <Banner

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

@@ -4,17 +4,10 @@
 
 import {Blockquote} from '@astryxdesign/core/Blockquote';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: 500,
-  },
-});
 
 export default function BlockquoteShowcase() {
   return (
-    <Stack direction="vertical" gap={4} xstyle={styles.root}>
+    <Stack direction="vertical" gap={4} style={{width: 500}}>
       <Blockquote>
         Design is not just what it looks like and feels like. Design is how it
         works.

package/templates/blocks/components/Carousel/CarouselShowcase.tsx

@@ -6,16 +6,6 @@ import {Carousel} from '@astryxdesign/core/Carousel';
 import {Card} from '@astryxdesign/core/Card';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 500,
-  },
-  card: {
-    minWidth: 200,
-  },
-});
 
 const ITEMS = [
   {title: 'Design', body: 'Create wireframes and prototypes.'},
@@ -32,9 +22,9 @@ export default function CarouselShowcase() {
       hasSnap
       hasButtons={false}
       aria-label="Workflow steps"
-      xstyle={styles.root}>
+      style={{maxWidth: 500}}>
       {ITEMS.map(item => (
-        <Card key={item.title} padding={3} xstyle={styles.card}>
+        <Card key={item.title} padding={3} style={{minWidth: 200}}>
           <Stack direction="vertical" gap={1}>
             <Heading level={5}>{item.title}</Heading>
             <Text type="supporting" color="secondary">

package/templates/blocks/components/ChatComposerDrawer/ChatComposerDrawerShowcase.tsx

@@ -8,15 +8,12 @@ import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Stack} from '@astryxdesign/core/Layout';
 import {PaperClipIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-import {colorVars, borderVars, radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
+import type {CSSProperties} from 'react';
 
-const styles = stylex.create({
-  drawerBorder: {
-    border: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
-    borderRadius: radiusVars['--radius-chat'],
-  },
-});
+const drawerBorder: CSSProperties = {
+  border: 'var(--border-width) solid var(--color-border)',
+  borderRadius: 'var(--radius-chat)',
+};
 
 export default function ChatComposerDrawerShowcase() {
   return (
@@ -27,7 +24,7 @@ export default function ChatComposerDrawerShowcase() {
           <ChatComposerDrawer
             count={4}
             label="Attachments"
-            xstyle={styles.drawerBorder}>
+            style={drawerBorder}>
             <Token label="design-spec.pdf" onRemove={() => {}} />
             <Token label="api-schema.json" onRemove={() => {}} />
             <Token label="screenshot.png" onRemove={() => {}} />

package/templates/blocks/components/ChatLayout/ChatLayoutPanelChat.tsx

@@ -11,21 +11,19 @@ import {
   ChatComposer,
 } from '@astryxdesign/core/Chat';
 import {Markdown} from '@astryxdesign/core/Markdown';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  panel: {
-    width: 450,
-    height: 600,
-    borderRadius: 8,
-    overflow: 'hidden',
-    border: '1px solid var(--color-border)',
-  },
-});
+import type {CSSProperties} from 'react';
+
+const panel: CSSProperties = {
+  width: 450,
+  height: 600,
+  borderRadius: 8,
+  overflow: 'hidden',
+  border: '1px solid var(--color-border)',
+};
 
 export default function ChatLayoutPanelChat() {
   return (
-    <div {...stylex.props(styles.panel)}>
+    <div style={panel}>
       <ChatLayout
         composer={
           <ChatComposer onSubmit={() => {}} placeholder="Ask something..." />

package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx

@@ -12,14 +12,6 @@ import {Text} from '@astryxdesign/core/Text';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Fragment} from 'react';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  section: {
-    flex: 1,
-    minHeight: 0,
-  },
-});
 
 const DENSITIES = ['compact', 'balanced', 'spacious'] as const;
 
@@ -39,7 +31,7 @@ export default function ChatMessageListDensity() {
             <Text type="supporting" color="secondary">
               {density.charAt(0).toUpperCase() + density.slice(1)}
             </Text>
-            <VStack xstyle={styles.section}>
+            <VStack style={{flex: 1, minHeight: 0}}>
               <ChatMessageList density={density}>
                 <ChatMessage sender="user">
                   <ChatMessageBubble>

package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx

@@ -15,18 +15,10 @@ import {Markdown} from '@astryxdesign/core/Markdown';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {Timestamp} from '@astryxdesign/core/Timestamp';
 import {Token} from '@astryxdesign/core/Token';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    maxWidth: 500,
-    justifyContent: 'center',
-  },
-});
 
 export default function ChatMessageListFullFeatured() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 500, justifyContent: 'center'}}>
       <ChatMessageList>
         <ChatSystemMessage variant="divider">Today</ChatSystemMessage>
 

package/templates/blocks/components/ChatMessageList/ChatMessageListShowcase.tsx

@@ -11,18 +11,10 @@ import {
 } from '@astryxdesign/core/Chat';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Timestamp} from '@astryxdesign/core/Timestamp';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    maxWidth: 600,
-    height: '100%',
-  },
-});
 
 export default function ChatMessageListShowcase() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 600, height: '100%'}}>
       <ChatMessageList density="balanced">
         <ChatSystemMessage variant="divider">
           March 15, 2026

package/templates/blocks/components/ChatMessageMetadata/ChatMessageMetadataShowcase.tsx

@@ -2,7 +2,6 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {
   ChatMessageList,
   ChatMessage,
@@ -21,15 +20,9 @@ import {
   HandThumbDownIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  container: {
-    maxWidth: 600,
-  },
-});
-
 export default function ChatMessageMetadataShowcase() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 600}}>
       <ChatMessageList>
         <ChatMessage sender="assistant">
           <ChatMessageBubble

package/templates/blocks/components/ChatSendButton/ChatSendButtonInComposer.tsx

@@ -2,19 +2,12 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {ChatComposer} from '@astryxdesign/core/Chat';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const styles = stylex.create({
-  root: {
-    maxWidth: 450,
-  },
-});
-
 export default function ChatSendButtonInComposer() {
   return (
-    <Stack direction="vertical" width="100%" xstyle={styles.root}>
+    <Stack direction="vertical" width="100%" style={{maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => {}}
         value="Hello, how can you help?"

package/templates/blocks/components/Citation/CitationInlineText.tsx

@@ -25,12 +25,12 @@ export default function CitationInlineText() {
         .
       </Text>
       <Text type="body">
-        StyleX compiles atomic CSS at build time for optimal performance
+        TypeScript adds static types to JavaScript for safer refactoring
         <Citation
           source={{
-            title: 'StyleX Documentation',
-            url: 'https://stylexjs.com',
-            icon: 'https://stylexjs.com/img/favicon.ico',
+            title: 'TypeScript Documentation',
+            url: 'https://www.typescriptlang.org',
+            icon: 'https://www.typescriptlang.org/favicon-32x32.png',
           }}
           number={3}
           variant="label"

package/templates/blocks/components/Code/CodeInlineInParagraph.tsx

@@ -4,17 +4,10 @@
 
 import {Code} from '@astryxdesign/core/CodeBlock';
 import {Text} from '@astryxdesign/core/Text';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 400,
-  },
-});
 
 export default function CodeInlineInParagraph() {
   return (
-    <Text type="body" xstyle={styles.root}>Use <Code>useState</Code>for local state and{' '}
+    <Text type="body" style={{maxWidth: 400}}>Use <Code>useState</Code>for local state and{' '}
       <Code>useEffect</Code>for side effects. If you need shared state
             across components, consider <Code>useContext</Code>or a state
             management library.

package/templates/blocks/components/CodeBlock/CodeBlockBashCommand.tsx

@@ -15,7 +15,7 @@ export default function CodeBlockBashCommand() {
         style={{width: '100%'}}
       />
       <CodeBlock
-        code="yarn add @stylexjs/stylex"
+        code="yarn add @astryxdesign/theme-neutral"
         language="bash"
         hasCopyButton
         style={{width: '100%'}}

package/templates/blocks/components/CodeBlock/CodeBlockJSONConfig.tsx

@@ -8,7 +8,7 @@ const code = `{
   "name": "@astryxdesign/core",
   "version": "0.0.5",
   "dependencies": {
-    "@stylexjs/stylex": "^0.17.5",
+    "@astryxdesign/theme-neutral": "^0.1.0",
     "react": "^19.0.0"
   },
   "scripts": {

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteEmpty',
+  name: 'CommandPaletteEmpty',
+  displayName: 'Command Palette Empty',
+  description:
+    'Command palette empty state shown when no commands are available.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteEmpty', 'Text'],
+};