@astryxdesign/cli 0.1.2-canary.2200fc9 → 0.1.2-canary.22ccb69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.2200fc9",
+  "version": "0.1.2-canary.22ccb69",
   "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.2200fc9",
-    "@astryxdesign/lab": "0.1.2-canary.2200fc9",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.2200fc9",
+    "@astryxdesign/core": "0.1.2-canary.22ccb69",
+    "@astryxdesign/lab": "0.1.2-canary.22ccb69",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.22ccb69",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.2200fc9",
-    "@astryxdesign/lab": "0.1.2-canary.2200fc9",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.2200fc9",
+    "@astryxdesign/core": "0.1.2-canary.22ccb69",
+    "@astryxdesign/lab": "0.1.2-canary.22ccb69",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.22ccb69",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

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

@@ -2,11 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 
 export default function DropdownMenuShowcase() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <DropdownMenu
+      isMenuOpen={isMenuOpen}
+      onOpenChange={setIsMenuOpen}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

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

@@ -65,7 +65,10 @@ const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
 
 export default function DropdownMenuItemShowcase() {
   return (
-    <DropdownMenu button={{label: 'Actions'}}>
+    <DropdownMenu
+      button={{label: 'Actions'}}
+      isMenuOpen
+      onOpenChange={() => {}}>
       <DropdownMenuItem
         icon={PencilIcon}
         label="Edit"

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

@@ -2,11 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 
 export default function MoreMenuShowcase() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <MoreMenu
+      isMenuOpen={isMenuOpen}
+      onOpenChange={setIsMenuOpen}
       items={[
         {label: 'Edit', onClick: () => {}},
         {label: 'Duplicate', onClick: () => {}},

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TreeListBranches',
+  name: 'TreeListBranches',
+  displayName: 'Tree List Branches',
+  description: 'Tree with expandable branches at multiple nesting levels.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList'],
+};

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+const noop = () => {};
+
+export default function TreeListBranchesShowcase() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'design-system',
+          label: 'Design System',
+          isExpanded: true,
+          children: [
+            {
+              id: 'components',
+              label: 'Components',
+              isExpanded: true,
+              children: [
+                {
+                  id: 'inputs',
+                  label: 'Inputs',
+                  children: [
+                    {id: 'text-input', label: 'TextInput', onClick: noop},
+                    {id: 'checkbox', label: 'Checkbox', onClick: noop},
+                    {id: 'selector', label: 'Selector', onClick: noop},
+                  ],
+                },
+                {
+                  id: 'layout',
+                  label: 'Layout',
+                  children: [
+                    {id: 'stack', label: 'Stack', onClick: noop},
+                    {id: 'grid', label: 'Grid', onClick: noop},
+                  ],
+                },
+              ],
+            },
+            {
+              id: 'tokens',
+              label: 'Tokens',
+              children: [
+                {id: 'colors', label: 'Colors', onClick: noop},
+                {id: 'spacing', label: 'Spacing', onClick: noop},
+                {id: 'typography', label: 'Typography', onClick: noop},
+              ],
+            },
+          ],
+        },
+        {
+          id: 'utilities',
+          label: 'Utilities',
+          children: [
+            {id: 'hooks', label: 'Hooks', onClick: noop},
+            {id: 'helpers', label: 'Helpers', onClick: noop},
+          ],
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TreeListItem',
+  name: 'TreeListItem',
+  displayName: 'Tree List Item',
+  description: 'Tree items with descriptions, icons, badges, selection, disabled state, and nested expand/collapse. TreeList is data-driven: no composed children API.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Badge', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+
+const noop = () => {};
+
+export default function TreeListItemShowcase() {
+  return (
+    <TreeList
+      style={{width: 400}}
+      items={[
+        {
+          id: 'inbox',
+          label: 'Inbox',
+          description: '12 unread messages',
+          isExpanded: true,
+          startContent: <Icon icon="info" size="sm" />,
+          endContent: <Badge label="12" variant="info" />,
+          children: [
+            {
+              id: 'primary',
+              label: 'Primary',
+              isSelected: true,
+              startContent: <Icon icon="check" size="sm" />,
+              onClick: noop,
+            },
+            {
+              id: 'updates',
+              label: 'Updates',
+              endContent: <Badge label="4" variant="info" />,
+              onClick: noop,
+            },
+          ],
+        },
+        {
+          id: 'drafts',
+          label: 'Drafts',
+          description: '3 draft messages',
+          startContent: <Icon icon="clock" size="sm" />,
+          onClick: noop,
+        },
+        {
+          id: 'archive',
+          label: 'Archive',
+          onClick: noop,
+        },
+        {
+          id: 'spam',
+          label: 'Spam',
+          isDisabled: true,
+          startContent: <Icon icon="warning" size="sm" />,
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/AvatarStatusDot/AvatarStatusDotVariants.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: 'AvatarStatusDot',
-  name: 'AvatarStatusDot — Variants',
-  displayName: 'AvatarStatusDot — Variants',
-  description:
-    'Presence dots on Avatars using the success, neutral, and error variants. Pass an AvatarStatusDot to the Avatar status prop; the dot sizes itself to match the Avatar.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Avatar', 'AvatarStatusDot', 'HStack'],
-};

package/templates/blocks/components/AvatarStatusDot/AvatarStatusDotVariants.tsx

@@ -1,28 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
-import {HStack} from '@astryxdesign/core/Layout';
-
-export default function AvatarStatusDotVariants() {
-  return (
-    <HStack gap={4} vAlign="center">
-      <Avatar
-        name="Ana Silva"
-        size="large"
-        status={<AvatarStatusDot variant="success" label="Online" />}
-      />
-      <Avatar
-        name="Ben Okafor"
-        size="large"
-        status={<AvatarStatusDot variant="neutral" label="Away" />}
-      />
-      <Avatar
-        name="Cleo Marsh"
-        size="large"
-        status={<AvatarStatusDot variant="error" label="Do not disturb" />}
-      />
-    </HStack>
-  );
-}

package/templates/blocks/components/BreadcrumbItem/BreadcrumbItemBasic.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: 'BreadcrumbItem',
-  name: 'BreadcrumbItem — Basic',
-  displayName: 'BreadcrumbItem — Basic',
-  description:
-    'Breadcrumb links inside a Breadcrumbs trail. Ancestor pages get an href; mark the last item with isCurrent to render it as plain text for the current page.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Breadcrumbs', 'BreadcrumbItem'],
-};

package/templates/blocks/components/BreadcrumbItem/BreadcrumbItemBasic.tsx

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs';
-
-export default function BreadcrumbItemBasic() {
-  return (
-    <Breadcrumbs>
-      <BreadcrumbItem href="/">Home</BreadcrumbItem>
-      <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
-      <BreadcrumbItem isCurrent>Profile</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}

package/templates/blocks/components/ButtonGroup/ButtonGroupBasic.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: 'ButtonGroup',
-  name: 'ButtonGroup — Basic',
-  displayName: 'ButtonGroup — Basic',
-  description:
-    'Three related actions joined into a single connected control. Provide a group label for accessibility and keep all buttons the same variant so they read as one unit.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['ButtonGroup', 'Button'],
-};

package/templates/blocks/components/ButtonGroup/ButtonGroupBasic.tsx

@@ -1,16 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
-import {Button} from '@astryxdesign/core/Button';
-
-export default function ButtonGroupBasic() {
-  return (
-    <ButtonGroup label="Text editing actions">
-      <Button label="Copy" />
-      <Button label="Cut" />
-      <Button label="Paste" />
-    </ButtonGroup>
-  );
-}

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonBasic.doc.mjs

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ChatDictationButton',
-  name: 'ChatDictationButton — Basic',
-  displayName: 'ChatDictationButton — Basic',
-  description:
-    'A dictation button wired to useChatDictation and placed in the sendActions slot of a ChatComposer. Click the microphone to transcribe speech into the input.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: [
-    'Chat',
-    'ChatDictationButton',
-    'ChatComposer',
-    'ChatComposerInput',
-  ],
-};

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonBasic.tsx

@@ -1,34 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useRef} from 'react';
-import {
-  ChatDictationButton,
-  ChatComposer,
-  ChatComposerInput,
-  useChatDictation,
-} from '@astryxdesign/core/Chat';
-import type {ChatComposerInputHandle} from '@astryxdesign/core/Chat';
-import {Stack} from '@astryxdesign/core/Layout';
-
-export default function ChatDictationButtonBasic() {
-  const inputRef = useRef<ChatComposerInputHandle>(null);
-
-  const dictation = useChatDictation({
-    inputRef,
-    onResult: text => {
-      console.log('Dictation result:', text);
-    },
-  });
-
-  return (
-    <Stack direction="vertical" width="100%" style={{maxWidth: 450}}>
-      <ChatComposer
-        onSubmit={value => console.log('Submit:', value)}
-        input={<ChatComposerInput handleRef={inputRef} />}
-        sendActions={<ChatDictationButton dictation={dictation} />}
-      />
-    </Stack>
-  );
-}

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.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: 'CheckboxListItem',
-  name: 'CheckboxListItem — Basic',
-  displayName: 'CheckboxListItem — Basic',
-  description:
-    'Checkbox items with labels and descriptions inside a controlled CheckboxList. Use for multi-select option groups like notification preferences.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CheckboxList', 'CheckboxListItem'],
-};

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.tsx

@@ -1,30 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList';
-
-export default function CheckboxListItemBasic() {
-  const [value, setValue] = useState<string[]>(['updates']);
-
-  return (
-    <CheckboxList label="Email preferences" value={value} onChange={setValue}>
-      <CheckboxListItem
-        label="Product updates"
-        value="updates"
-        description="New features and improvements"
-      />
-      <CheckboxListItem
-        label="Security alerts"
-        value="security"
-        description="Important account security notifications"
-      />
-      <CheckboxListItem
-        label="Marketing"
-        value="marketing"
-        description="Tips, offers, and promotions"
-      />
-    </CheckboxList>
-  );
-}

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.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: 'CollapsibleGroup',
-  name: 'CollapsibleGroup — Accordion',
-  displayName: 'CollapsibleGroup — Accordion',
-  description:
-    'An accordion built with type="single": opening one Collapsible automatically closes the others. Use defaultValue to pre-expand the most important section.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CollapsibleGroup', 'Collapsible', 'VStack', 'Text'],
-};

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.tsx

@@ -1,31 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function CollapsibleGroupAccordion() {
-  return (
-    <CollapsibleGroup type="single" defaultValue="account">
-      <VStack gap={2} width="100%">
-        <Collapsible trigger="Account" value="account">
-          <Text type="body" color="secondary">
-            Manage your profile details, email address, and password.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="Notifications" value="notifications">
-          <Text type="body" color="secondary">
-            Choose which activity triggers email and push notifications.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="Billing" value="billing">
-          <Text type="body" color="secondary">
-            View invoices and update your payment method.
-          </Text>
-        </Collapsible>
-      </VStack>
-    </CollapsibleGroup>
-  );
-}

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.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: 'CommandPaletteEmpty',
-  name: 'CommandPaletteEmpty — Basic',
-  displayName: 'CommandPaletteEmpty — Basic',
-  description:
-    'A command palette with no results, showing a custom empty message via emptyBootstrapText. Use to explain why the palette is empty and what the user can do next.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CommandPalette', 'CommandPaletteEmpty', 'Text'],
-};

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useMemo} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
-import {Text} from '@astryxdesign/core/Text';
-import {createStaticSource} from '@astryxdesign/core/Typeahead';
-
-export default function CommandPaletteEmptyBasic() {
-  const emptySource = useMemo(() => createStaticSource([]), []);
-
-  return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={emptySource}
-      emptyBootstrapText={
-        <Text type="supporting" color="secondary">
-          No commands available
-        </Text>
-      }
-    />
-  );
-}

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.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: 'CommandPaletteFooter',
-  name: 'CommandPaletteFooter — Basic',
-  displayName: 'CommandPaletteFooter — Basic',
-  description:
-    'A command palette footer with no children, rendering the built-in keyboard navigation hints. Use CommandPaletteFooter without content to get the default arrow-key, Enter, and Esc hints below the results list.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CommandPalette', 'CommandPaletteFooter'],
-};

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.tsx

@@ -1,32 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useMemo} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteFooter,
-} from '@astryxdesign/core/CommandPalette';
-import {createStaticSource} from '@astryxdesign/core/Typeahead';
-
-export default function CommandPaletteFooterBasic() {
-  const source = useMemo(
-    () =>
-      createStaticSource([
-        {id: 'new-file', label: 'New File'},
-        {id: 'open-recent', label: 'Open Recent'},
-        {id: 'save-all', label: 'Save All'},
-      ]),
-    [],
-  );
-
-  return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      footer={<CommandPaletteFooter />}
-    />
-  );
-}

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.doc.mjs

@@ -1,18 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'CommandPaletteGroup',
-  name: 'CommandPaletteGroup — Basic',
-  displayName: 'CommandPaletteGroup — Basic',
-  description:
-    'Command palette items organized under group headings using the composed CommandPaletteGroup form. Use to separate related commands into labeled sections.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: [
-    'CommandPaletteGroup',
-    'CommandPaletteItem',
-    'CommandPaletteList',
-  ],
-};

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.tsx

@@ -1,32 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {
-  CommandPaletteList,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
-
-export default function CommandPaletteGroupBasic() {
-  return (
-    <CommandPaletteList>
-      <CommandPaletteGroup heading="Navigation">
-        <CommandPaletteItem value="home" onSelect={() => {}}>
-          Go to Home
-        </CommandPaletteItem>
-        <CommandPaletteItem value="dashboard" onSelect={() => {}}>
-          Go to Dashboard
-        </CommandPaletteItem>
-      </CommandPaletteGroup>
-      <CommandPaletteGroup heading="Actions">
-        <CommandPaletteItem value="new-file" onSelect={() => {}}>
-          New File
-        </CommandPaletteItem>
-        <CommandPaletteItem value="save-all" onSelect={() => {}}>
-          Save All
-        </CommandPaletteItem>
-      </CommandPaletteGroup>
-    </CommandPaletteList>
-  );
-}

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemBasic.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: 'CommandPaletteItem',
-  name: 'CommandPaletteItem — Basic',
-  displayName: 'CommandPaletteItem — Basic',
-  description:
-    'Selectable command palette items inside a CommandPaletteList, including highlighted and disabled states. Use when composing a palette manually instead of a search source.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CommandPaletteItem', 'CommandPaletteList'],
-};