@astryxdesign/cli 0.1.2-canary.a1dd3f9 → 0.1.2-canary.ae2d146

package/package.json

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

package/src/commands/build-theme.mjs

@@ -15,7 +15,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import {pathToFileURL, fileURLToPath} from 'node:url';
-import {spawn} from 'node:child_process';
 import {createJiti} from 'jiti';
 import {getRunPrefix} from '../utils/package-manager.mjs';
 import {
@@ -598,104 +597,6 @@ function validatePrivateVars(themeDef) {
   return errors;
 }
 
-/**
- * Path to this CLI's real entry (bin/astryx.mjs), resolved from this module's
- * location (src/commands/build-theme.mjs → ../../bin/astryx.mjs). Used to
- * re-invoke `theme build` as a child process in watch mode.
- */
-function resolveCliBin() {
-  const commandsDir = path.dirname(fileURLToPath(import.meta.url));
-  return path.resolve(commandsDir, '../../bin/astryx.mjs');
-}
-
-/**
- * Run a single `theme build` as a child process, reusing the exact
- * single-build code path (and its error handling) rather than duplicating it.
- * Resolves with the child's exit code; never rejects.
- *
- * @param {string} file - The theme file argument, as the user passed it.
- * @param {object} options - Parsed command options (only `out` is forwarded).
- * @returns {Promise<number>}
- */
-function runThemeBuildOnceChild(file, options) {
-  const cliBin = resolveCliBin();
-  const args = [cliBin, 'theme', 'build', file];
-  if (options.out) args.push('--out', options.out);
-  return new Promise(resolve => {
-    const child = spawn(process.execPath, args, {
-      stdio: 'inherit',
-      env: process.env,
-    });
-    child.on('close', code => resolve(code ?? 0));
-    child.on('error', () => resolve(1));
-  });
-}
-
-/**
- * Watch a theme file and rebuild on change. Runs an initial build, then
- * rebuilds (debounced) whenever the file changes, until interrupted with
- * Ctrl-C. Each rebuild runs in a child process so a build error (which the
- * single-build path reports via a hard exit) is contained and the watcher
- * keeps running.
- *
- * @param {string} file - The theme file argument, as the user passed it.
- * @param {string} filePath - Absolute path to the theme file.
- * @param {object} options - Parsed command options.
- * @returns {Promise<void>} Resolves when the watcher is stopped (Ctrl-C).
- */
-async function runThemeBuildWatch(file, filePath, options) {
-  const rel = path.relative(process.cwd(), filePath);
-
-  // Initial build.
-  await runThemeBuildOnceChild(file, options);
-
-  humanLog(`\n👀 Watching ${rel} for changes — press Ctrl-C to stop.`);
-
-  let building = false;
-  let queued = false;
-  let debounce = null;
-
-  const rebuild = async () => {
-    if (building) {
-      // Coalesce changes that land mid-build into a single follow-up run.
-      queued = true;
-      return;
-    }
-    building = true;
-    humanLog(`\n♻️  Change detected — rebuilding ${rel}...`);
-    await runThemeBuildOnceChild(file, options);
-    building = false;
-    humanLog(`\n👀 Watching ${rel} for changes — press Ctrl-C to stop.`);
-    if (queued) {
-      queued = false;
-      rebuild();
-    }
-  };
-
-  // Some editors replace the file (rename) rather than writing in place, which
-  // can drop the watch. Watch the containing directory and filter to our file
-  // so edits survive atomic-save/rename.
-  const watchDir = path.dirname(filePath);
-  const baseName = path.basename(filePath);
-  const watcher = fs.watch(watchDir, (_eventType, changed) => {
-    if (changed && changed !== baseName) return;
-    clearTimeout(debounce);
-    // Debounce: editors often emit several events per save.
-    debounce = setTimeout(rebuild, 100);
-  });
-
-  await new Promise(resolve => {
-    const stop = () => {
-      clearTimeout(debounce);
-      watcher.close();
-      humanLog('\nStopped watching.');
-      resolve();
-    };
-    process.once('SIGINT', stop);
-    process.once('SIGTERM', stop);
-  });
-}
-
 export function registerTheme(program) {
   const theme = program
     .command('theme')
@@ -720,10 +621,6 @@ export function registerTheme(program) {
     .command('build <file>')
     .description('Compile a defineTheme file to CSS + JS')
     .option('-o, --out <path>', 'Output CSS file path')
-    .option(
-      '-w, --watch',
-      'Rebuild automatically when the theme file changes (Ctrl-C to stop)',
-    )
     .action(async (file, options) => {
       const filePath = path.resolve(process.cwd(), file);
       const json = program.opts().json || false;
@@ -733,20 +630,6 @@ export function registerTheme(program) {
         return;
       }
 
-      // Watch mode: run an initial build, then rebuild on every change to the
-      // theme file. Watch is a human-interactive, long-running mode — it is not
-      // supported in --json (machine) mode, which expects a single envelope.
-      if (options.watch) {
-        if (json) {
-          cliError('--watch is not supported with --json', {
-            code: ERROR_CODES.ERR_THEME_INVALID,
-          });
-          return;
-        }
-        await runThemeBuildWatch(file, filePath, options);
-        return;
-      }
-
       if (!json) humanLog(`\nBuilding theme from ${path.relative(process.cwd(), filePath)}...`);
 
       // Extract theme definition

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

@@ -2,11 +2,17 @@
 
 '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}
+      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

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

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

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

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

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

@@ -2,11 +2,17 @@
 
 '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}
+      hasAutoFocus={false}
       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/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/commands/build-theme.watch.test.mjs

@@ -1,157 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Tests for `astryx theme build --watch` (#3375).
- *
- * Watch mode runs an initial build, then rebuilds whenever the theme file
- * changes, until interrupted. Each rebuild runs in a child process so a build
- * error (reported by the single-build path via a hard exit) is contained and
- * the watcher keeps running.
- *
- * Building `astryx theme build` requires a compiled @astryxdesign/core, so this
- * suite builds core once in beforeAll (mirrors build-theme.prose.test.mjs).
- */
-
-import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
-import {execFileSync, spawn} from 'node:child_process';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as os from 'node:os';
-import {fileURLToPath} from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
-const REPO_ROOT = path.resolve(__dirname, '../../../..');
-const CORE_THEME_ENTRY = path.join(
-  REPO_ROOT,
-  'packages/core/dist/theme/index.js',
-);
-
-function runCli(args, cwd) {
-  try {
-    const out = execFileSync('node', [CLI_BIN, ...args], {
-      cwd,
-      encoding: 'utf-8',
-      stdio: ['ignore', 'pipe', 'pipe'],
-      env: {...process.env, FORCE_COLOR: '0'},
-    });
-    return {code: 0, stdout: out, stderr: ''};
-  } catch (e) {
-    return {
-      code: e.status ?? 1,
-      stdout: e.stdout?.toString() ?? '',
-      stderr: e.stderr?.toString() ?? '',
-    };
-  }
-}
-
-/** Poll until `predicate()` is true or the timeout elapses. */
-async function waitFor(predicate, {timeout = 8000, interval = 50} = {}) {
-  const start = Date.now();
-  for (;;) {
-    if (predicate()) return true;
-    if (Date.now() - start > timeout) return false;
-    await new Promise(r => setTimeout(r, interval));
-  }
-}
-
-beforeAll(() => {
-  if (!fs.existsSync(CORE_THEME_ENTRY)) {
-    execFileSync('pnpm', ['-F', '@astryxdesign/core', 'build'], {
-      cwd: REPO_ROOT,
-      stdio: 'pipe',
-      timeout: 180_000,
-    });
-  }
-}, 200_000);
-
-let tmpDir;
-beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-watch-'));
-});
-afterEach(() => {
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-});
-
-describe('theme build --watch', () => {
-  it('advertises the flag in --help', () => {
-    const result = runCli(['theme', 'build', '--help'], process.cwd());
-    const out = result.stdout + result.stderr;
-    expect(out).toMatch(/--watch/);
-  });
-
-  it('rejects --watch together with --json (single-envelope contract)', () => {
-    const themeFile = path.join(tmpDir, 'wt.mjs');
-    fs.writeFileSync(
-      themeFile,
-      `export default { name: 'wt', tokens: { '--color-bg': '#fff' } };\n`,
-    );
-    const result = runCli(
-      ['--json', 'theme', 'build', path.relative(tmpDir, themeFile), '--watch'],
-      tmpDir,
-    );
-    expect(result.code).not.toBe(0);
-    expect(result.stdout + result.stderr).toMatch(/watch/i);
-  });
-
-  it('builds initially, rebuilds on change, and stops cleanly on SIGINT', async () => {
-    const themeFile = path.join(tmpDir, 'wt.mjs');
-    const cssFile = path.join(tmpDir, 'wt.css');
-    fs.writeFileSync(
-      themeFile,
-      `export default { name: 'wt', tokens: { '--color-bg': '#ffffff' } };\n`,
-    );
-
-    const child = spawn(
-      process.execPath,
-      [CLI_BIN, 'theme', 'build', 'wt.mjs', '--watch'],
-      {cwd: tmpDir, env: {...process.env, FORCE_COLOR: '0'}},
-    );
-    let stdout = '';
-    child.stdout.on('data', d => (stdout += d.toString()));
-    child.stderr.on('data', d => (stdout += d.toString()));
-
-    try {
-      // Initial build produces the CSS.
-      const built = await waitFor(() => fs.existsSync(cssFile));
-      expect(built).toBe(true);
-      const firstCss = fs.readFileSync(cssFile, 'utf-8');
-      expect(firstCss).toMatch(/#ffffff/);
-
-      // Wait until the watcher is actually watching before editing, so the
-      // change isn't missed.
-      await waitFor(() => /Watching/i.test(stdout));
-
-      // Change the theme — the token value changes so the CSS must change.
-      fs.writeFileSync(
-        themeFile,
-        `export default { name: 'wt', tokens: { '--color-bg': '#010203' } };\n`,
-      );
-
-      // The rebuilt CSS should reflect the new value.
-      const rebuilt = await waitFor(() => {
-        try {
-          return fs.readFileSync(cssFile, 'utf-8').includes('#010203');
-        } catch {
-          return false;
-        }
-      });
-      expect(rebuilt).toBe(true);
-      expect(stdout).toMatch(/rebuild/i);
-    } finally {
-      // SIGINT must stop the watcher and exit cleanly.
-      child.kill('SIGINT');
-    }
-
-    const exited = await new Promise(resolve => {
-      let done = false;
-      child.on('exit', () => {
-        done = true;
-        resolve(true);
-      });
-      setTimeout(() => resolve(done), 4000);
-    });
-    expect(exited).toBe(true);
-    expect(stdout).toMatch(/Stopped watching/);
-  }, 30_000);
-});

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/Blockquote/BlockquoteTestimonials.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: 'Blockquote',
-  name: 'Blockquote — Testimonials',
-  displayName: 'Blockquote — Testimonials',
-  description:
-    'Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Blockquote', 'Card', 'Grid', 'GridSpan'],
-};

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

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

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

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