@astryxdesign/cli 0.1.4-canary.ff77e1c → 0.1.4

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

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file v0.1.5 transform manifest
- *
- * Lists all codemods for the v0.1.5 release in the order they should run.
- */
-
-import renameSwitchLabelSpacingDefaultToHug, {
-  meta as renameSwitchLabelSpacingDefaultToHugMeta,
-} from './rename-switch-label-spacing-default-to-hug.mjs';
-
-export default [
-  {
-    name: 'rename-switch-label-spacing-default-to-hug',
-    transform: renameSwitchLabelSpacingDefaultToHug,
-    meta: renameSwitchLabelSpacingDefaultToHugMeta,
-  },
-];

package/src/codemods/transforms/v0.1.5/rename-switch-label-spacing-default-to-hug.mjs

@@ -1,140 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Codemod: Rename Switch labelSpacing "default" to "hug"
- * @see https://github.com/facebook/astryx/issues/2889
- *
- * The `labelSpacing="default"` value is renamed to `labelSpacing="hug"` so
- * the name describes the behavior (label and switch hug each other), matching
- * the behavioral register of the sibling `spread` value and the existing
- * `hug`/`fill` layout vocabulary on TabList and SegmentedControl. The old
- * `default` value keeps working as a deprecated alias, so this codemod is a
- * cleanup, not a build fix.
- *
- * Transforms (scoped to Switch):
- * - <Switch labelSpacing="default" />            → <Switch labelSpacing="hug" />
- * - <Switch labelSpacing={'default'} />          → <Switch labelSpacing={'hug'} />
- * - <Switch labelSpacing={cond ? 'default' : x}> → <Switch labelSpacing={cond ? 'hug' : x}>
- * - Storybook argTypes: labelSpacing: { options: [..., 'default', ...] }
- *     → replaces 'default' with 'hug' (files importing Switch)
- * - Object properties: { labelSpacing: 'default' } / { labelSpacing: 'default' as const }
- *     → { labelSpacing: 'hug' } (files importing Switch)
- *
- * The transform deliberately does NOT touch bare `'default'` strings that are
- * not a `labelSpacing` value (an extremely common string otherwise), so it is
- * safe to run across an entire codebase.
- */
-
-export const meta = {
-  title: 'Rename Switch labelSpacing "default" to "hug"',
-  description:
-    'Renames the `labelSpacing="default"` value to `labelSpacing="hug"` on ' +
-    'Switch. The old value keeps working as a deprecated alias. Also updates ' +
-    'Storybook labelSpacing argTypes options and object-literal `labelSpacing` ' +
-    'props in files that import Switch.',
-  pr: '#2889',
-};
-
-const OLD_VALUE = 'default';
-const NEW_VALUE = 'hug';
-
-/** Prop whose value is being renamed. */
-const TARGET_PROP = 'labelSpacing';
-
-/** Components whose `labelSpacing` prop accepts a SwitchLabelSpacing value. */
-const TARGET_COMPONENTS = new Set(['Switch']);
-
-export default function transformer(file, api) {
-  const j = api.jscodeshift;
-  const root = j(file.source);
-  let hasChanges = false;
-
-  /** Rewrite a string-literal node when it equals the old value. */
-  function renameStringLiteral(node) {
-    if (!node) return false;
-    if (
-      (node.type === 'StringLiteral' || node.type === 'Literal') &&
-      node.value === OLD_VALUE
-    ) {
-      node.value = NEW_VALUE;
-      if (node.raw) node.raw = `'${NEW_VALUE}'`;
-      return true;
-    }
-    return false;
-  }
-
-  /** Recursively rewrite the old value inside ternary/logical expressions. */
-  function renameInExpression(node) {
-    if (!node) return false;
-    let changed = false;
-    if (node.type === 'StringLiteral' || node.type === 'Literal') {
-      changed = renameStringLiteral(node) || changed;
-    } else if (node.type === 'ConditionalExpression') {
-      changed = renameInExpression(node.consequent) || changed;
-      changed = renameInExpression(node.alternate) || changed;
-    } else if (node.type === 'LogicalExpression') {
-      changed = renameInExpression(node.left) || changed;
-      changed = renameInExpression(node.right) || changed;
-    } else if (node.type === 'TSAsExpression') {
-      // `'default' as const` → rewrite the inner expression
-      changed = renameInExpression(node.expression) || changed;
-    }
-    return changed;
-  }
-
-  // --- 1. JSX attribute: labelSpacing="default" / labelSpacing={'default'} on Switch ---
-  root.find(j.JSXOpeningElement).forEach(path => {
-    const name = path.node.name;
-    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
-    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
-
-    path.node.attributes.forEach(attr => {
-      if (attr.type !== 'JSXAttribute') return;
-      if (!attr.name || attr.name.name !== TARGET_PROP) return;
-
-      const value = attr.value;
-      if (!value) return;
-
-      if (value.type === 'StringLiteral' || value.type === 'Literal') {
-        if (renameStringLiteral(value)) hasChanges = true;
-      } else if (value.type === 'JSXExpressionContainer') {
-        if (renameInExpression(value.expression)) hasChanges = true;
-      }
-    });
-  });
-
-  // Object-property / argTypes transforms only run in files that use a target
-  // component — keeps unrelated `{ labelSpacing: 'default' }` strings safe.
-  const importsTarget =
-    root
-      .find(j.ImportSpecifier)
-      .filter(p => TARGET_COMPONENTS.has(p.node.imported?.name))
-      .size() > 0;
-
-  if (importsTarget) {
-    const PropertyType = j.ObjectProperty ?? j.Property;
-
-    // --- 2. Object property: { labelSpacing: 'default' } / 'default' as const ---
-    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
-      if (renameInExpression(path.node.value)) hasChanges = true;
-    });
-
-    // --- 3. Storybook argTypes: labelSpacing: { options: [..., 'default', ...] } ---
-    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
-      const value = path.node.value;
-      if (!value || value.type !== 'ObjectExpression') return;
-
-      const optionsProp = value.properties.find(
-        p => p.key && (p.key.name === 'options' || p.key.value === 'options'),
-      );
-      if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
-        optionsProp.value.elements.forEach(el => {
-          if (renameStringLiteral(el)) hasChanges = true;
-        });
-      }
-    });
-  }
-
-  if (!hasChanges) return undefined;
-  return root.toSource({quote: 'single'});
-}

package/src/commands/build-theme.color-scheme.test.mjs

@@ -1,153 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Regression test for the `color-scheme` declaration `astryx theme build`
- * emits alongside `light-dark()` token output (see #3658).
- *
- * `astryx theme build` injects a `color-scheme` declaration into
- * `@layer astryx-theme` whenever the generated CSS contains `light-dark()`,
- * so LightningCSS/browsers can resolve it. That declaration must mirror
- * reset.css's own `html[data-theme]` -> `color-scheme` mapping (a bare
- * `:root { color-scheme: light dark; }` alone permanently pins the page to
- * "light dark", defeating `<Theme mode="light|dark">` forcing regardless of
- * `@layer astryx-theme` being declared after `@layer reset` in layer order):
- *
- *   :root { color-scheme: light dark; }
- *   html[data-theme="light"] { color-scheme: light; }
- *   html[data-theme="dark"] { color-scheme: dark; }
- *
- * Themes that never use `light-dark()` have no `color-scheme` ambiguity to
- * resolve, so none of the three rules should be emitted for them.
- *
- * Building `astryx theme build` requires a compiled @astryxdesign/core (there is no in-CLI
- * fallback generator), so this suite builds core once in beforeAll via the
- * shared ensureCoreBuilt() helper — which serializes concurrent Vitest workers
- * behind a lock — to stay self-sufficient regardless of CI job ordering.
- */
-
-import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
-import {execFileSync} 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';
-import {ensureCoreBuilt} from './ensure-core-built.mjs';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
-
-const COLOR_SCHEME_ROOT_DECL = ':root { color-scheme: light dark; }';
-const COLOR_SCHEME_LIGHT_DECL = 'html[data-theme="light"] { color-scheme: light; }';
-const COLOR_SCHEME_DARK_DECL = 'html[data-theme="dark"] { color-scheme: dark; }';
-
-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() ?? '',
-    };
-  }
-}
-
-function writeTheme(dir, name, tokens) {
-  fs.mkdirSync(dir, {recursive: true});
-  // The CLI writes <basename>.css next to the source file, so use the
-  // theme name as the filename for unambiguous fixtures.
-  const file = path.join(dir, `${name}.mjs`);
-  fs.writeFileSync(
-    file,
-    `export default { name: ${JSON.stringify(name)}, tokens: ${JSON.stringify(tokens)} };\n`,
-  );
-  return file;
-}
-
-// `astryx theme build` imports the compiled @astryxdesign/core/theme entry. Build core
-// once if it isn't already present so the suite works in any CI job.
-beforeAll(() => {
-  ensureCoreBuilt();
-}, 200_000);
-
-let tmpDir;
-beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-color-scheme-'));
-});
-afterEach(() => {
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-});
-
-describe('theme build color-scheme output', () => {
-  it('emits the mode-aware color-scheme rules in @layer astryx-theme for a light-dark() theme', () => {
-    const project = path.join(tmpDir, 'project');
-    const themesDir = path.join(project, 'themes');
-    // A raw light-dark() token value is what triggers the color-scheme
-    // injection in build-theme.mjs (it checks the generated CSS for the
-    // literal substring). `defineTheme.test.ts` already covers the separate
-    // [light, dark] tuple -> light-dark() conversion; this fixture writes
-    // the string directly so this test stays focused on the CLI's own
-    // color-scheme decision, not on that conversion.
-    const themeFile = writeTheme(themesDir, 'with-light-dark', {
-      '--color-accent': 'light-dark(#0077B6, #48CAE4)',
-    });
-
-    const result = runCli(
-      ['theme', 'build', path.relative(project, themeFile)],
-      project,
-    );
-
-    expect(result.code).toBe(0);
-
-    const cssPath = path.join(themesDir, 'with-light-dark.css');
-    expect(fs.existsSync(cssPath)).toBe(true);
-    const css = fs.readFileSync(cssPath, 'utf-8');
-
-    expect(css).toContain('light-dark(#0077B6, #48CAE4)');
-
-    // All 3 rules must be present...
-    expect(css).toContain(COLOR_SCHEME_ROOT_DECL);
-    expect(css).toContain(COLOR_SCHEME_LIGHT_DECL);
-    expect(css).toContain(COLOR_SCHEME_DARK_DECL);
-
-    // ...and specifically inside @layer astryx-theme, not @layer reset (the
-    // declaration must sit alongside the light-dark() token/component output
-    // it resolves, not the zero-specificity prose defaults).
-    const themeLayerStart = css.indexOf('@layer astryx-theme');
-    expect(themeLayerStart).toBeGreaterThanOrEqual(0);
-    const themeLayerBody = css.slice(themeLayerStart);
-    expect(themeLayerBody).toContain(COLOR_SCHEME_ROOT_DECL);
-    expect(themeLayerBody).toContain(COLOR_SCHEME_LIGHT_DECL);
-    expect(themeLayerBody).toContain(COLOR_SCHEME_DARK_DECL);
-  });
-
-  it('omits all color-scheme rules for a theme with no light-dark() tokens', () => {
-    const project = path.join(tmpDir, 'project');
-    const themesDir = path.join(project, 'themes');
-    const themeFile = writeTheme(themesDir, 'no-light-dark', {
-      '--color-accent': '#0077B6',
-    });
-
-    const result = runCli(
-      ['theme', 'build', path.relative(project, themeFile)],
-      project,
-    );
-
-    expect(result.code).toBe(0);
-
-    const cssPath = path.join(themesDir, 'no-light-dark.css');
-    expect(fs.existsSync(cssPath)).toBe(true);
-    const css = fs.readFileSync(cssPath, 'utf-8');
-
-    expect(css).not.toContain('light-dark(');
-    expect(css).not.toContain(COLOR_SCHEME_ROOT_DECL);
-    expect(css).not.toContain(COLOR_SCHEME_LIGHT_DECL);
-    expect(css).not.toContain(COLOR_SCHEME_DARK_DECL);
-  });
-});

package/src/commands/build-theme.variants.test.mjs

@@ -1,193 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Regression test for the custom-variant type augmentations emitted by
- * `astryx theme build` (#3391 companion: #3371).
- *
- * When a theme declares a custom component prop value (e.g.
- * `button['variant:accentOutline']`), the build emits a `<name>.variants.d.ts`
- * with a module augmentation so the custom value type-checks. This suite pins
- * the two bugs that made that augmentation dead code:
- *
- *   1. The augmentation targeted a non-existent, `XDS`-prefixed interface
- *      (`XDSButtonVariantMap`) instead of core's real `ButtonVariantMap`, so it
- *      created a new unused interface and never widened the prop union.
- *   2. Props with no augmentation point (closed literal-union types such as
- *      Button `size` or Heading `type`/`level`) still got a `declare module`
- *      block against a `*Map` interface that doesn't exist.
- *   3. The generated `.variants.d.ts` was never referenced by the main
- *      `<name>.d.ts`, so even a correct augmentation never loaded.
- *
- * 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} 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';
-import {ensureCoreBuilt} from './ensure-core-built.mjs';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
-
-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() ?? '',
-    };
-  }
-}
-
-function writeTheme(dir, contents) {
-  fs.mkdirSync(dir, {recursive: true});
-  const file = path.join(dir, 'variants-theme.mjs');
-  fs.writeFileSync(file, contents);
-  return file;
-}
-
-// Build core through the shared lock helper — this suite previously ran its
-// own unguarded `if (!exists) pnpm -F core build`, and when Vitest scheduled
-// it alongside the other build-theme suites on a fresh checkout, the
-// concurrent builds collided on packages/core/dist (core's build starts by
-// wiping dist), nondeterministically breaking whichever suite was mid-read.
-beforeAll(() => {
-  ensureCoreBuilt();
-}, 200_000);
-
-let tmpDir;
-beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-variants-'));
-});
-afterEach(() => {
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-});
-
-describe('theme build custom-variant augmentations', () => {
-  it('targets the real (un-prefixed) core interface for a custom variant', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // Targets core's actual augmentation point…
-    expect(dts).toContain("declare module '@astryxdesign/core/Button'");
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    expect(dts).toContain("'accentOutline': true;");
-    // …and NOT the old, non-existent XDS-prefixed interface.
-    expect(dts).not.toMatch(/XDSButtonVariantMap/);
-  });
-
-  it('skips props with no augmentation point (Button size, Heading type)', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: {
-            'variant:accentOutline': { backgroundColor: 'transparent' },
-            'size:jumbo': { paddingBlock: '40px' },
-          },
-          heading: { 'type:hero': { fontSize: '80px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // The augmentable variant is emitted…
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    // …but closed literal-union props get no dead augmentation.
-    expect(dts).not.toMatch(/ButtonSizeMap/);
-    expect(dts).not.toMatch(/HeadingTypeMap/);
-    expect(dts).not.toContain("declare module '@astryxdesign/core/Heading'");
-  });
-
-  it('does not emit a .variants.d.ts when every custom value is non-augmentable', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'size:jumbo': { paddingBlock: '40px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-    expect(
-      fs.existsSync(path.join(tmpDir, 'variants-theme.variants.d.ts')),
-    ).toBe(false);
-  });
-
-  it('references the variants file from the main .d.ts so the augmentation loads', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const dts = fs.readFileSync(
-      path.join(tmpDir, 'variants-theme.d.ts'),
-      'utf-8',
-    );
-    // A triple-slash reference to the variants file, so importing the theme's
-    // types also loads the module augmentation.
-    expect(dts).toMatch(
-      /\/\/\/\s*<reference path="\.\/variants-theme\.variants\.d\.ts"\s*\/>/,
-    );
-  });
-});

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.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: 'BaseTypeahead',
-  name: 'BaseTypeahead — Custom Search Bar',
-  displayName: 'BaseTypeahead — Custom Search Bar',
-  description:
-    'BaseTypeahead embedded inside a custom-styled wrapper. The wrapper provides its own border and icon chrome; anchorRef positions the dropdown relative to it. Use this pattern when Typeahead\'s built-in field layout does not fit your composition.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['BaseTypeahead', 'Icon', 'Layout', 'Text'],
-};

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.tsx

@@ -1,58 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useRef, useState} from 'react';
-import {BaseTypeahead, createStaticSource} from '@astryxdesign/core/Typeahead';
-import type {SearchableItem} from '@astryxdesign/core/Typeahead';
-import {Icon} from '@astryxdesign/core/Icon';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
-
-const frameworks: SearchableItem[] = [
-  {id: 'react', label: 'React'},
-  {id: 'vue', label: 'Vue'},
-  {id: 'angular', label: 'Angular'},
-  {id: 'svelte', label: 'Svelte'},
-  {id: 'solid', label: 'SolidJS'},
-  {id: 'remix', label: 'Remix'},
-  {id: 'next', label: 'Next.js'},
-  {id: 'nuxt', label: 'Nuxt'},
-];
-
-const source = createStaticSource(frameworks);
-
-export default function BaseTypeaheadCustomSearch() {
-  const [value, setValue] = useState<SearchableItem | null>(null);
-  const wrapperRef = useRef<HTMLElement>(null);
-
-  return (
-    <VStack gap={3} style={{width: 320}}>
-      <HStack
-        ref={wrapperRef}
-        gap={2}
-        vAlign="center"
-        style={{
-          border: '1px solid var(--color-border)',
-          borderRadius: 'var(--radius-control)',
-          padding: '6px 10px',
-          background: 'var(--color-surface)',
-        }}>
-        <Icon icon={MagnifyingGlassIcon} size="sm" color="secondary" />
-        <BaseTypeahead
-          searchSource={source}
-          value={value}
-          onChange={setValue}
-          anchorRef={wrapperRef}
-          placeholder="Search frameworks…"
-          hasEntriesOnFocus
-          debounceMs={0}
-        />
-      </HStack>
-      <Text type="supporting" color="secondary">
-        {value != null ? `Selected: ${value.label}` : 'No selection'}
-      </Text>
-    </VStack>
-  );
-}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.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: 'CodeBlock',
-  name: 'Code — Terminal',
-  displayName: 'Code — Terminal',
-  description:
-    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages. Reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CodeBlock', 'SyntaxTheme'],
-};

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

@@ -1,24 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {SyntaxTheme} from '@astryxdesign/core/theme';
-import {githubDark} from '@astryxdesign/core/theme/syntax';
-import {CodeBlock} from '@astryxdesign/core/CodeBlock';
-
-const commands = `$ astryx init --features agents
-✓ AI agent docs installed → .claude/CLAUDE.md
-$ pnpm astryx component CodeBlock --dense`;
-
-export default function CodeBlockTerminal() {
-  return (
-    <SyntaxTheme theme={githubDark}>
-      <CodeBlock
-        code={commands}
-        language="bash"
-        hasCopyButton
-        style={{width: '100%', maxWidth: 480}}
-      />
-    </SyntaxTheme>
-  );
-}

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs

@@ -1,13 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Collapsible',
-  name: 'Collapsible — Divided Accordion',
-  displayName: 'Collapsible — Divided Accordion',
-  description: 'FAQ-style accordion using the dividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Collapsible', 'CollapsibleGroup', 'Text'],
-};

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx

@@ -1,33 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function CollapsibleDividedAccordion() {
-  return (
-    <div style={{width: '100%', maxWidth: 400}}>
-      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
-        <Collapsible trigger="How do I reset my password?" value="reset">
-          <Text type="body">
-            Go to Settings → Security → Change Password. You'll receive a
-            confirmation email within a few minutes.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="Can I change my username?" value="username">
-          <Text type="body">
-            Usernames can be changed once every 30 days from your profile
-            settings.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="How do I delete my account?" value="delete">
-          <Text type="body">
-            Account deletion is permanent. Your data will be removed within 30
-            days.
-          </Text>
-        </Collapsible>
-      </CollapsibleGroup>
-    </div>
-  );
-}