@astryxdesign/cli 0.1.8-canary.3bb5896 → 0.1.8-canary.4a7ce02

package/docs/elevation.doc.mjs

@@ -36,85 +36,10 @@ export const docs = {
         },
       ],
     },
-    {
-      title: 'Choosing a level',
-  category: 'foundations',
-      content: [
-        {
-          type: 'prose',
-          text: 'Pick the level by how far the surface sits from the page, not by how much shadow you want. Elevation encodes stacking order: a higher level means the surface is layered over more of the UI. Use exactly one level per surface, and only raise a surface above `none` when it actually sits above other content.',
-        },
-        {
-          type: 'table',
-          headers: ['Level', 'When to use', 'Examples'],
-          rows: [
-            [
-              'none',
-              'The component is flat and embedded in the surface — it is part of the page, not layered above it. This is the default for every surface except ChatComposer.',
-              'A Card in a grid, an inline Banner, a standard Button',
-            ],
-            [
-              'low',
-              'The component is in the normal page flow but should read as distinct from the background. Use for emphasis or to separate the component from the surface behind it — the component still sits on the page, it is not floating over other content.',
-              'A raised Card that needs emphasis, a ChatComposer, a resting Thumbnail',
-            ],
-            [
-              'med',
-              'The component sits over other content on the same page — it floats above nearby elements but not the whole screen.',
-              'A Popover, a floating Banner, a floating action Button',
-            ],
-            [
-              'high',
-              'The component is placed over the entire UI — it is the topmost layer and typically has a backdrop or takes focus from everything else.',
-              'A modal Dialog, a full-screen overlay surface',
-            ],
-          ],
-        },
-        {
-          type: 'prose',
-          text: 'If two surfaces overlap, the one on top takes the higher level. If a surface does not overlap anything, it is `none` or `low` — never `med` or `high`.',
-        },
-      ],
-    },
-    {
-      title: 'The elevation prop',
-  category: 'foundations',
-      content: [
-        {
-          type: 'prose',
-          text: 'Configurable surfaces expose a single `elevation` prop instead of asking consumers to hand-write a box-shadow. It takes the graded enum `none | low | med | high`, narrowed per component to the steps that surface needs: Card, ClickableCard, SelectableCard, Button, IconButton, ButtonGroup, Thumbnail, and Banner expose the full scale, while ChatComposer exposes only `none | low`. `none` is a flat literal (`box-shadow: none`); the other levels map to the `--shadow-*` tokens above, so a surface stays theme-agnostic.',
-        },
-        {
-          type: 'prose',
-          text: 'Prop defaults preserve current appearance: every surface defaults to `none` except ChatComposer, which defaults to `low` to keep its raised look. Set `elevation="none"` to flatten it — the flat composer draws a border with the same rest / hover / focus treatment as a text input. Thumbnail keeps its existing hover-only shadow at the `none` default.',
-        },
-        {
-          type: 'code',
-          lang: 'tsx',
-          label: 'Raising a surface with the elevation prop',
-          code: `// Flat by default — raise only when the surface needs to float.
-<Card elevation="low">Raised card</Card>
-
-// A floating action button.
-<IconButton icon={<Icon icon="add" />} label="New" variant="primary" elevation="med" />
-
-// Flatten the composer (defaults to 'low').
-<ChatComposer elevation="none" onSubmit={handleSubmit} />`,
-        },
-        {
-          type: 'prose',
-          text: 'Always float — no prop: intrinsic overlays (Dialog, Popover, Tooltip, Toast, HoverCard, DropdownMenu, and the components that compose them) bake their elevation in and never expose the prop. Flow content (inputs, Text, layout) is never elevated; input fields use inset rings, which are a separate concept from elevation.',
-        },
-      ],
-    },
     {
       title: 'Usage',
   category: 'foundations',
       content: [
-        {
-          type: 'prose',
-          text: 'When building a custom surface, read elevation from the token scale rather than a hand-rolled shadow — the same tokens the elevation prop resolves to.',
-        },
         {
           type: 'code',
           lang: 'tsx',
@@ -143,8 +68,7 @@ const styles = stylex.create({
           type: 'list',
           style: 'do',
           items: [
-            'Reach for the `elevation` prop on a configurable surface before writing any custom shadow.',
-            'Choose the level by how far the surface sits from the page: `none` when flat/embedded, `low` when in-flow but distinct, `med` when over page content, `high` when over the whole UI. See "Choosing a level".',
+            'Match elevation to interaction context: low for tooltips, med for dropdowns, high for dialogs.',
             'Use inset shadows for input focus/selection states; they compose better than outlines.',
           ],
         },
@@ -152,8 +76,6 @@ const styles = stylex.create({
           type: 'list',
           style: 'dont',
           items: [
-            'Hand-write a `box-shadow` in app code — set the `elevation` prop or read `shadowVars` instead.',
-            'Raise a surface that does not sit above other content — a non-overlapping surface is `none` or `low`, never `med` or `high`.',
             'Stack multiple elevation levels on the same element.',
             'Use elevation shadows for decorative borders. Use --color-border tokens instead.',
           ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.8-canary.3bb5896",
+  "version": "0.1.8-canary.4a7ce02",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -79,10 +79,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.8-canary.3bb5896",
-    "@astryxdesign/core": "0.1.8-canary.3bb5896",
-    "@astryxdesign/lab": "0.1.8-canary.3bb5896",
-    "@astryxdesign/theme-neutral": "0.1.8-canary.3bb5896",
+    "@astryxdesign/charts": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/core": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/lab": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/theme-neutral": "0.1.8-canary.4a7ce02",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -100,17 +100,16 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.8-canary.3bb5896",
-    "@astryxdesign/core": "0.1.8-canary.3bb5896",
-    "@astryxdesign/lab": "0.1.8-canary.3bb5896",
-    "@astryxdesign/theme-neutral": "0.1.8-canary.3bb5896",
+    "@astryxdesign/charts": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/core": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/lab": "0.1.8-canary.4a7ce02",
+    "@astryxdesign/theme-neutral": "0.1.8-canary.4a7ce02",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "typecheck:template-docs": "tsc --project tsconfig.template-docs.json",
-    "typecheck:json-api": "tsc --project tsconfig.json-api.json && tsc --project tsconfig.api-contract.json",
-    "typecheck:strict": "tsc --project tsconfig.strict.json"
+    "typecheck:json-api": "tsc --project tsconfig.json-api.json && tsc --project tsconfig.api-contract.json"
   }
 }

package/src/api/error.mjs

@@ -14,7 +14,7 @@
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 
 export class AstryxError extends Error {
-  /** @type {import('../types/base').Suggestion[] | undefined} */
+  /** @type {Array<{name: string, reason: string}> | undefined} */
   suggestions;
 
   /**
@@ -26,7 +26,7 @@ export class AstryxError extends Error {
 
   /**
    * @param {string} message
-   * @param {import('../types/base').Suggestion[]} [suggestions]
+   * @param {Array<{name: string, reason: string}>} [suggestions]
    * @param {string} [code] - Stable error code. Defaults to ERR_UNKNOWN.
    */
   constructor(message, suggestions, code) {

package/src/commands/swizzle.mjs

@@ -358,7 +358,7 @@ export function registerSwizzle(program) {
       const feedback = buildFeedback(dirName, owner.issuesUrl);
 
       if (json) {
-        /** @type {import('../types/swizzle').SwizzleCopyResponse['data']} */
+        /** @type {Record<string, unknown>} */
         const payload = {
           component: dirName,
           package: owner.package,

package/src/lib/cli-error.mjs

@@ -55,8 +55,8 @@ import {ERROR_CODES} from './error-codes.mjs';
 
 /**
  * Suggestion object — matches the shape used by API errors and the JSON
- * envelope's `suggestions` field. Canonical definition lives in types/base.
- * @typedef {import('../types/base').Suggestion} Suggestion
+ * envelope's `suggestions` field.
+ * @typedef {{name: string, reason?: string}} Suggestion
  */
 
 /**

package/src/lib/json-shim.mjs

@@ -102,7 +102,7 @@ export function buildHelpEnvelope(cmd) {
  * for both success and error).
  *
  * @param {string} message
- * @param {import('../types/base').Suggestion[]} [suggestions]
+ * @param {Array<{name: string, reason: string}>} [suggestions]
  * @param {string} [code] - Stable machine-readable error code (error-codes.mjs).
  */
 function emitJsonError(message, suggestions, code) {

package/src/lib/json.mjs

@@ -112,10 +112,10 @@ export function jsonOut(type, data, meta) {
  * consumers can branch on it unconditionally.
  *
  * @param {unknown} err
- * @param {import('../types/base').Suggestion[]} [suggestions]
+ * @param {Array<{name: string, reason: string}>} [suggestions]
  * @param {string} [code] - Explicit stable error code. Overrides any code
  *   carried on a thrown Error.
- * @returns {{apiVersion: number, error: string, code: string, suggestions?: import('../types/base').Suggestion[]}}
+ * @returns {{apiVersion: number, error: string, code: string, suggestions?: Array<{name: string, reason: string}>}}
  */
 export function toErrorEnvelope(err, suggestions, code) {
   const message =
@@ -136,7 +136,7 @@ export function toErrorEnvelope(err, suggestions, code) {
 /**
  * Output a structured JSON error and exit.
  * @param {string} message
- * @param {import('../types/base').Suggestion[]} [suggestions]
+ * @param {Array<{name: string, reason: string}>} [suggestions]
  * @param {string} [code] - Stable machine-readable error code (error-codes.mjs).
  */
 export function jsonError(message, suggestions, code) {

package/src/types/api.d.ts

@@ -44,14 +44,17 @@ import type {
 import type {SearchResponse, SearchDomain} from './search';
 import type {ErrorCode} from './error-codes';
 import type {DoctorResponse} from './doctor';
-import type {Suggestion} from './base';
 
 /** Structured API error with a stable machine-readable code. */
 export declare class AstryxError extends Error {
   /** Stable error code; consumers branch on this, never the message. */
   code: ErrorCode;
-  suggestions?: Suggestion[];
-  constructor(message: string, suggestions?: Suggestion[], code?: ErrorCode);
+  suggestions?: Array<{name: string; reason: string}>;
+  constructor(
+    message: string,
+    suggestions?: Array<{name: string; reason: string}>,
+    code?: ErrorCode,
+  );
 }
 
 // ── Component ────────────────────────────────────────────────────────
@@ -97,7 +100,9 @@ export interface DocsOptions {
 }
 
 type DocsResult =
-  DocsListResponse | DocsDetailResponse | DocsDetailSectionResponse;
+  | DocsListResponse
+  | DocsDetailResponse
+  | DocsDetailSectionResponse;
 
 export declare function docs(
   topic?: string,

package/src/types/base.d.ts

@@ -11,12 +11,10 @@
 import type {
   ComponentListResponse,
   ComponentBriefResponse,
-  ComponentFullResponse,
   ComponentDetailResponse,
   ComponentDetailPropsResponse,
   ComponentDetailSourceResponse,
   ComponentDetailShowcaseResponse,
-  ComponentDetailBlocksResponse,
 } from './component';
 import type {
   DiscoverListResponse,
@@ -44,28 +42,13 @@ import type {
 } from './hook';
 import type {SwizzleListResponse, SwizzleCopyResponse} from './swizzle';
 import type {ThemeBuildResponse} from './theme';
-import type {
-  UpgradeListResponse,
-  UpgradeRunResponse,
-  UpgradeStatusResponse,
-} from './upgrade';
+import type {UpgradeListResponse, UpgradeRunResponse} from './upgrade';
 import type {SearchResponse} from './search';
-import type {BuildHelpResponse} from './build';
 import type {ErrorCode} from './error-codes';
 import type {ManifestResponse} from './manifest';
 import type {DoctorResponse} from './doctor';
 import type {ValidateIntegrationResponse} from './validate-integration';
 
-/**
- * A "did you mean…" suggestion attached to an error. `reason` is optional:
- * some call sites emit bare `{name}` (e.g. a list of candidate component names)
- * with no per-item explanation.
- */
-export interface Suggestion {
-  name: string;
-  reason?: string;
-}
-
 /**
  * Structured error. Check `'error' in result` to discriminate.
  *
@@ -75,7 +58,7 @@ export interface Suggestion {
 export interface CLIError {
   error: string;
   code: ErrorCode;
-  suggestions?: Suggestion[];
+  suggestions?: Array<{name: string; reason: string}>;
 }
 
 /** Returned by the fallback hook for commands without --json support. */
@@ -91,12 +74,10 @@ export type CLIResult<T> = T | CLIError | CLIUnsupportedError;
 export type CLIAnyResponse =
   | ComponentListResponse
   | ComponentBriefResponse
-  | ComponentFullResponse
   | ComponentDetailResponse
   | ComponentDetailPropsResponse
   | ComponentDetailSourceResponse
   | ComponentDetailShowcaseResponse
-  | ComponentDetailBlocksResponse
   | DiscoverListResponse
   | DiscoverDetailResponse
   | DiscoverDetailDocResponse
@@ -118,9 +99,7 @@ export type CLIAnyResponse =
   | ThemeBuildResponse
   | UpgradeListResponse
   | UpgradeRunResponse
-  | UpgradeStatusResponse
   | SearchResponse
-  | BuildHelpResponse
   | ManifestResponse
   | DoctorResponse
   | ValidateIntegrationResponse;
@@ -150,7 +129,7 @@ export function jsonOut<T extends CLIResponseType>(
  */
 export function jsonError(
   message: string,
-  suggestions?: Suggestion[],
+  suggestions?: Array<{name: string; reason: string}>,
   code?: ErrorCode,
 ): never;
 

package/src/types/index.d.ts

@@ -10,7 +10,6 @@ export * from './swizzle';
 export * from './theme';
 export * from './upgrade';
 export * from './search';
-export * from './build';
 export * from './error-codes';
 export * from './manifest';
 export * from './doctor';

package/src/types/swizzle.d.ts

@@ -29,13 +29,9 @@ export interface SwizzleCopyResponse {
   type: 'swizzle.copy';
   data: {
     component: string;
-    /** Owner package the component source was copied from. */
-    package: string;
     outputDir: string;
     filesCopied: number;
     files: string[];
-    /** Whether any copied file uses StyleX (requires build-time setup). */
-    usesStyleX: boolean;
     feedback?: SwizzleFeedback;
   };
 }

package/src/utils/package-manager.mjs

@@ -10,41 +10,15 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 
-/**
- * A package manager we can install with and run binaries through.
- * @typedef {'yarn' | 'pnpm' | 'bun' | 'npm'} PackageManager
- */
-
-/**
- * Result of package-manager detection. `'npx'` is the sentinel for "nothing
- * detected" — no lockfile, no `packageManager` field, no runner user-agent —
- * so callers fall back to npm/npx. It is a distinct value from {@link PackageManager}
- * because it means "undetected", not "npm was chosen".
- * @typedef {PackageManager | 'npx'} DetectedPackageManager
- */
-
-/** @type {readonly PackageManager[]} */
-const KNOWN_PMS = ['yarn', 'pnpm', 'bun', 'npm'];
-
-/**
- * Narrow an arbitrary string to a known {@link PackageManager}.
- * @param {string} name
- * @returns {name is PackageManager}
- */
-function isKnownPackageManager(name) {
-  return /** @type {readonly string[]} */ (KNOWN_PMS).includes(name);
-}
-
 /**
  * Detect the package manager used in a project directory.
  * Walks up from targetDir looking for lockfiles.
  *
- * Returns `'npx'` when nothing can be detected — see {@link DetectedPackageManager}.
- *
  * @param {string} [targetDir=process.cwd()]
- * @returns {DetectedPackageManager}
+ * @returns {'yarn'|'pnpm'|'bun'|'npm'}
  */
 export function detectPackageManager(targetDir = process.cwd()) {
+  const KNOWN_PMS = new Set(['yarn', 'pnpm', 'bun', 'npm']);
   let dir = path.resolve(targetDir);
   const root = path.parse(dir).root;
 
@@ -62,7 +36,7 @@ export function detectPackageManager(targetDir = process.cwd()) {
         const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
         if (pkg.packageManager) {
           const name = pkg.packageManager.split('@')[0];
-          if (isKnownPackageManager(name)) return name;
+          if (KNOWN_PMS.has(name)) return name;
         }
       } catch {
         // Best-effort: unreadable/invalid package.json — keep walking up.
@@ -76,7 +50,7 @@ export function detectPackageManager(targetDir = process.cwd()) {
   const ua = process.env.npm_config_user_agent;
   if (ua) {
     const name = ua.split('/')[0];
-    if (isKnownPackageManager(name)) return name;
+    if (KNOWN_PMS.has(name)) return name;
   }
 
   return 'npx';

package/src/utils/update-check.mjs

@@ -18,9 +18,9 @@ import {getCliInvocation} from './package-manager.mjs';
 
 /**
  * Read the latest available version from local signals.
- * No network calls — purely an env-var check ($ASTRYX_LATEST_VERSION),
- * so it takes no arguments.
+ * No network calls — purely filesystem and env var checks.
  *
+ * @param {string} [cwd] - Project directory (default: process.cwd())
  * @returns {string|null} Latest version string, or null if unknown
  */
 export function getLatestVersion() {
@@ -64,7 +64,7 @@ export function getInstalledVersion(cwd = process.cwd()) {
  * @returns {string|null} FYI hint string, or null if up to date / unknown
  */
 export function checkForUpdate(cwd = process.cwd()) {
-  const latest = getLatestVersion();
+  const latest = getLatestVersion(cwd);
   if (!latest) return null;
 
   // Persist for subsequent commands in this shell session

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

@@ -33,12 +33,12 @@ afterEach(() => {
 describe('getLatestVersion', () => {
   it('reads from ASTRYX_LATEST_VERSION env var', () => {
     process.env.ASTRYX_LATEST_VERSION = '0.0.8';
-    expect(getLatestVersion()).toBe('0.0.8');
+    expect(getLatestVersion(tmpDir)).toBe('0.0.8');
   });
 
   it('ignores invalid env var values', () => {
     process.env.ASTRYX_LATEST_VERSION = 'not-a-version';
-    expect(getLatestVersion()).toBeNull();
+    expect(getLatestVersion(tmpDir)).toBeNull();
   });
 
   it('returns null when no signals exist', () => {
@@ -46,7 +46,7 @@ describe('getLatestVersion', () => {
       path.join(tmpDir, 'package.json'),
       JSON.stringify({name: 'test'}),
     );
-    expect(getLatestVersion()).toBeNull();
+    expect(getLatestVersion(tmpDir)).toBeNull();
   });
 });
 

package/src/types/build.d.ts

@@ -1,23 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * Build command JSON responses.
- *
- * `astryx build` is the "assemble a page" verb. With no query it emits the
- * workflow playbook; with a query it delegates to the search pipeline and
- * emits a `search` response (see search.d.ts).
- *
- * Invocation                    -> type discriminator
- * ---------------------------------------------------
- * xds --json build              -> build.help
- * xds --json build "<idea>"     -> search
- */
-
-/** xds --json build (no query) — the "how to build a page" playbook signal. */
-export interface BuildHelpResponse {
-  type: 'build.help';
-  data: {
-    /** Always true; marks this envelope as the playbook rather than a result set. */
-    playbook: true;
-  };
-}

package/templates/blocks/components/Banner/BannerFloating.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: 'Banner',
-  name: 'Banner — Floating',
-  displayName: 'Banner — Floating',
-  description:
-    'A floating banner raised with `elevation="med"`. Banners are inline by default; raise one when it should read as an overlay above content.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Banner'],
-};

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

@@ -1,16 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Banner} from '@astryxdesign/core/Banner';
-
-export default function BannerFloating() {
-  return (
-    <Banner
-      status="info"
-      title="You have unsaved changes"
-      description="A raised banner reads as an overlay floating above the page."
-      elevation="med"
-    />
-  );
-}

package/templates/blocks/components/Button/ButtonFloating.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: 'Button',
-  name: 'Button — Floating',
-  displayName: 'Button — Floating',
-  description:
-    'A floating action button raised with `elevation="med"`. Use elevation for buttons that hover above content, like a FAB.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Button', 'Icon', 'Layout', 'Text'],
-};

package/templates/blocks/components/Button/ButtonFloating.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Button} from '@astryxdesign/core/Button';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {PlusIcon} from '@heroicons/react/24/outline';
-
-const VARIANTS = [
-  {variant: 'primary' as const, label: 'Primary'},
-  {variant: 'secondary' as const, label: 'Secondary'},
-  {variant: 'ghost' as const, label: 'Ghost'},
-  {variant: 'destructive' as const, label: 'Destructive'},
-];
-
-export default function ButtonFloating() {
-  return (
-    <Stack direction="vertical" gap={4}>
-      <Text type="supporting" color="secondary">
-        Floating action buttons — raised above content with `elevation="med"`
-      </Text>
-      <Stack direction="horizontal" gap={3} vAlign="center">
-        {VARIANTS.map(({variant, label}) => (
-          <Button
-            key={variant}
-            label={label}
-            variant={variant}
-            icon={<Icon icon={PlusIcon} />}
-            elevation="med"
-          />
-        ))}
-      </Stack>
-    </Stack>
-  );
-}

package/templates/blocks/components/ButtonGroup/ButtonGroupFloating.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 — Floating',
-  displayName: 'ButtonGroup — Floating',
-  description:
-    'A grouped action bar raised with `elevation="med"`. The connected buttons share one surface, so the shadow lifts them as a unit.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['ButtonGroup', 'Button', 'Layout', 'Text'],
-};

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

@@ -1,23 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
-import {Button} from '@astryxdesign/core/Button';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function ButtonGroupFloating() {
-  return (
-    <Stack direction="vertical" gap={3} hAlign="start">
-      <Text type="supporting" color="secondary">
-        The whole group shares one raised surface — a floating action bar
-      </Text>
-      <ButtonGroup label="Zoom controls" elevation="med">
-        <Button label="Zoom out" />
-        <Button label="Reset" />
-        <Button label="Zoom in" />
-      </ButtonGroup>
-    </Stack>
-  );
-}

package/templates/blocks/components/Card/CardElevations.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: 'Card',
-  name: 'Card — Elevations',
-  displayName: 'Card — Elevations',
-  description:
-    'The four elevation levels side by side. Cards are flat by default; raise a card with `elevation` only when it needs to float above surrounding content.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Card', 'Layout', 'Text'],
-};

package/templates/blocks/components/Card/CardElevations.tsx

@@ -1,32 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Card} from '@astryxdesign/core/Card';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Grid} from '@astryxdesign/core/Grid';
-import {Text, Heading} from '@astryxdesign/core/Text';
-
-const LEVELS = [
-  {elevation: 'none' as const, caption: 'Flat — sits on the page (default)'},
-  {elevation: 'low' as const, caption: 'Low — lifts off slightly'},
-  {elevation: 'med' as const, caption: 'Med — clearly raised'},
-  {elevation: 'high' as const, caption: 'High — floats well above'},
-];
-
-export default function CardElevations() {
-  return (
-    <Grid columns={2} gap={4} width={520}>
-      {LEVELS.map(({elevation, caption}) => (
-        <Card key={elevation} elevation={elevation}>
-          <Stack direction="vertical" gap={1}>
-            <Heading level={4}>elevation=&quot;{elevation}&quot;</Heading>
-            <Text type="supporting" color="secondary">
-              {caption}
-            </Text>
-          </Stack>
-        </Card>
-      ))}
-    </Grid>
-  );
-}

package/templates/blocks/components/Card/ClickableCardElevated.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: 'ClickableCard',
-  name: 'ClickableCard — Elevated',
-  displayName: 'Clickable Card — Elevated',
-  description:
-    'A clickable card raised with `elevation="med"` so the shadow signals the whole surface is interactive.',
-  isReady: true,
-  aspectRatio: 1,
-  componentsUsed: ['ClickableCard', 'Layout', 'Text'],
-};

package/templates/blocks/components/Card/ClickableCardElevated.tsx

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ClickableCard} from '@astryxdesign/core/ClickableCard';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-
-export default function ClickableCardElevated() {
-  return (
-    <ClickableCard label="Open report" href="#" elevation="med" width={320}>
-      <Stack direction="vertical" gap={2}>
-        <Heading level={4}>Quarterly report</Heading>
-        <Text type="body" color="secondary">
-          A raised shadow signals the whole card is clickable, lifting it above
-          the surrounding content.
-        </Text>
-      </Stack>
-    </ClickableCard>
-  );
-}

package/templates/blocks/components/Card/SelectableCardElevated.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: 'SelectableCard',
-  name: 'SelectableCard — Elevated',
-  displayName: 'Selectable Card — Elevated',
-  description:
-    'Raised selectable cards with `elevation="low"`. The inset selection ring composes on top of the shadow, so a selected card keeps its elevation.',
-  isReady: true,
-  aspectRatio: 2,
-  componentsUsed: ['SelectableCard', 'Layout', 'Text'],
-};

package/templates/blocks/components/Card/SelectableCardElevated.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {SelectableCard} from '@astryxdesign/core/SelectableCard';
-import {Grid} from '@astryxdesign/core/Grid';
-import {Text} from '@astryxdesign/core/Text';
-
-const PLANS = [
-  {id: 'starter', name: 'Starter'},
-  {id: 'pro', name: 'Pro'},
-];
-
-export default function SelectableCardElevated() {
-  const [selected, setSelected] = useState('pro');
-
-  return (
-    <Grid columns={2} gap={3} width={420}>
-      {PLANS.map(plan => (
-        <SelectableCard
-          key={plan.id}
-          label={plan.name}
-          isSelected={selected === plan.id}
-          onChange={() => setSelected(plan.id)}
-          elevation="low">
-          <Text type="body" weight="bold">
-            {plan.name}
-          </Text>
-          <Text type="supporting" color="secondary">
-            The resting shadow stays put — the selection ring layers on top.
-          </Text>
-        </SelectableCard>
-      ))}
-    </Grid>
-  );
-}

package/templates/blocks/components/ChatComposer/ChatComposerFlat.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: 'ChatComposer',
-  name: 'ChatComposer — Flat',
-  displayName: 'ChatComposer — Flat',
-  description:
-    'The composer is raised by default (`elevation="low"`). Set `elevation="none"` to flatten it — it then draws a border with the same rest / hover / focus treatment as a text input.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['ChatComposer', 'Layout', 'Text'],
-};

package/templates/blocks/components/ChatComposer/ChatComposerFlat.tsx

@@ -1,75 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ChatComposer} from '@astryxdesign/core/Chat';
-import {Button} from '@astryxdesign/core/Button';
-import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {
-  Cog6ToothIcon,
-  MicrophoneIcon,
-  SparklesIcon,
-} from '@heroicons/react/24/outline';
-
-export default function ChatComposerFlat() {
-  return (
-    <Stack direction="vertical" gap={2} style={{width: '100%', maxWidth: 450}}>
-      <Text type="supporting" color="secondary">
-        elevation=&quot;none&quot; — flat, with a text-input-style border and
-        focus ring
-      </Text>
-      <ChatComposer
-        elevation="none"
-        onSubmit={value => {
-          console.log('Sent:', value);
-        }}
-        footerActions={
-          <>
-            <DropdownMenu
-              button={{
-                label: 'Auto',
-                variant: 'ghost',
-                size: 'md',
-                icon: <Icon icon={SparklesIcon} size="sm" />,
-                children: 'Auto',
-              }}
-              menuWidth={200}
-              items={[
-                {label: 'Auto', onClick: () => {}},
-                {label: 'Model A', onClick: () => {}},
-                {label: 'Model B', onClick: () => {}},
-              ]}
-            />
-            <DropdownMenu
-              button={{
-                label: 'Settings',
-                variant: 'ghost',
-                size: 'md',
-                icon: <Icon icon={Cog6ToothIcon} size="sm" />,
-                children: 'Settings',
-              }}
-              menuWidth={200}
-              items={[
-                {label: 'Preferences', onClick: () => {}},
-                {label: 'Keyboard shortcuts', onClick: () => {}},
-                {label: 'About', onClick: () => {}},
-              ]}
-            />
-          </>
-        }
-        sendActions={
-          <Button
-            label="Microphone"
-            variant="ghost"
-            size="md"
-            icon={<Icon icon={MicrophoneIcon} />}
-            isIconOnly
-          />
-        }
-      />
-    </Stack>
-  );
-}

package/templates/blocks/components/IconButton/IconButtonFloating.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: 'IconButton',
-  name: 'IconButton — Floating',
-  displayName: 'IconButton — Floating',
-  description:
-    'A floating action button (FAB) — the most common floating-button shape is icon-only. Raised here with `elevation="high"`.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['IconButton', 'Icon', 'Layout', 'Text'],
-};

package/templates/blocks/components/IconButton/IconButtonFloating.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {IconButton} from '@astryxdesign/core/IconButton';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {PlusIcon} from '@heroicons/react/24/outline';
-
-const VARIANTS = [
-  {variant: 'primary' as const, label: 'Primary'},
-  {variant: 'secondary' as const, label: 'Secondary'},
-  {variant: 'ghost' as const, label: 'Ghost'},
-  {variant: 'destructive' as const, label: 'Destructive'},
-];
-
-export default function IconButtonFloating() {
-  return (
-    <Stack direction="vertical" gap={4}>
-      <Text type="supporting" color="secondary">
-        FABs are usually icon-only — raise one with `elevation="high"`
-      </Text>
-      <Stack direction="horizontal" gap={3} vAlign="center">
-        {VARIANTS.map(({variant, label}) => (
-          <IconButton
-            key={variant}
-            label={label}
-            variant={variant}
-            icon={<Icon icon={PlusIcon} />}
-            elevation="high"
-          />
-        ))}
-      </Stack>
-    </Stack>
-  );
-}

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.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: 'OverflowList',
-  name: 'OverflowList — Capped Toolbar',
-  displayName: 'OverflowList — Capped Toolbar',
-  description:
-    'maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['OverflowList', 'Button', 'DropdownMenu', 'Card', 'Center'],
-};

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {OverflowList} from '@astryxdesign/core/OverflowList';
-import {Button} from '@astryxdesign/core/Button';
-import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
-import {Card} from '@astryxdesign/core/Card';
-import {Center} from '@astryxdesign/core/Center';
-
-const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
-
-export default function OverflowListCappedToolbar() {
-  return (
-    <Center width={420}>
-      <Card padding={2}>
-        <OverflowList
-          gap={2}
-          maxVisibleItems={3}
-          overflowRenderer={overflowItems => (
-            <DropdownMenu
-              button={{
-                label: `+${overflowItems.length}`,
-                variant: 'ghost',
-                size: 'sm',
-              }}
-              items={overflowItems.map(({index}) => ({
-                label: actions[index],
-              }))}
-            />
-          )}>
-          {actions.map(action => (
-            <Button key={action} label={action} size="sm" />
-          ))}
-        </OverflowList>
-      </Card>
-    </Center>
-  );
-}

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.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: 'OverflowList',
-  name: 'OverflowList — Multi-row Tags',
-  displayName: 'OverflowList — Multi-row Tags',
-  description:
-    'Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['OverflowList', 'Badge', 'Card'],
-};

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.tsx

@@ -1,44 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {OverflowList} from '@astryxdesign/core/OverflowList';
-import {Badge} from '@astryxdesign/core/Badge';
-import {Card} from '@astryxdesign/core/Card';
-
-const tags = [
-  'React',
-  'TypeScript',
-  'StyleX',
-  'Storybook',
-  'Vitest',
-  'Playwright',
-  'ESLint',
-  'Prettier',
-  'Vite',
-  'pnpm',
-];
-
-export default function OverflowListMultiRowTags() {
-  return (
-    <Card
-      padding={2}
-      style={{
-        resize: 'horizontal',
-        overflow: 'hidden',
-        minWidth: 120,
-        width: 260,
-      }}>
-      <OverflowList
-        gap={1}
-        maxRows={2}
-        overflowRenderer={overflowItems => (
-          <Badge variant="neutral" label={`+${overflowItems.length}`} />
-        )}>
-        {tags.map(tag => (
-          <Badge key={tag} variant="info" label={tag} />
-        ))}
-      </OverflowList>
-    </Card>
-  );
-}

package/templates/blocks/components/Thumbnail/ThumbnailElevated.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: 'Thumbnail',
-  name: 'Thumbnail — Elevated',
-  displayName: 'Thumbnail — Elevated',
-  description:
-    'Image tiles raised at rest with `elevation`. The default keeps the existing hover-only shadow; a set level lifts the tile off the page.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Thumbnail', 'Layout', 'Text'],
-};

package/templates/blocks/components/Thumbnail/ThumbnailElevated.tsx

@@ -1,31 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Thumbnail} from '@astryxdesign/core/Thumbnail';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-// Demo imagery is inlined as same-origin data URIs so the example is
-// self-contained. Thumbnail's remove-button overlay uses useImageMode, which
-// FETCHES the image to sample pixels (APCA) for contrast — a cross-origin CDN
-// URL without CORS headers cannot be sampled, so contrast detection fails
-// silently in hosted previews.
-const NIGHT_FOREST =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX18+H08uDy8d/y8N/v7t/m5NXl49Tk4tPc3NDX1cnW1cnW1cjW1MjV1MjV1MfR0cXIyLzEw7m8vLC3t68wM0QvM0MvM0IvMkIuMkEtMEErLz8iJjkhJTggJTcgJDcfJDYfIzYeIjUcITMbHzIWHiwYGzIXGjEWGjAWGTAVGS8VGC8UGC4UGC0UFy4TFy0TFywTFi0SFiwRFSsQFSkNFR4QFCoPFCkPFCgPEykOEygOEigNEicNEScMESYIDw8ECgr+gzZIAAABqElEQVR42uWQ61aCQBRGD5GylNBMKS9FZgNdNE0cyUvB+79VM8MoF9Fgplau2j/8nO8c9hqAD0ngDwjeJYH1lrfBWoCtYDboNu/Zv7qQYNap1bpCN1gxFh1dNe5WAsCScWqoWttbChAKvHZZ0W6XQoIFpW8ooFmLCG2Rl1BgaZAU5Ac8yg0RlC9nngCRQDFuhQRzinWmkCuYk3lxQoFrlskVqlcTMcEFvYIKoFbNfmEFuIypWaGGkt66tqZuEbjAHZl6SQVF1WqNvpDAHVktXTvR9JbgDZii1+tZI7cYMJXkCASvksB4L5VxHmAsibzgRRIYbjgfCgFDSeBZkh8W1HMIniSBR0mOQPCQA3RgBk4M5DhNZwdEcbKgLXy5iDiZg5gApRYbqTql2FZgMxAKeEWSNUFYx3s2SfU28HPWItrpySSwE2cEdqrYtxgmxgHGScFmHrAGk8SxczIxZnNC1McFOGshShyb4yxB9sI3CXDGnH0MLsD7F5LvvptEgH12Zg1Pn2WuHsjvrwt8308t+nwxT38sgiAE8/RTeagH+vx/F8SeF0Ja8Ak14ia/LgmpZQAAAABJRU5ErkJggg==';
-const GOLDEN_SUNSET =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEX/+uv/7sj6tFr3sVn1r1nzrVjxq1jvqVftp1frpVbpo1bnoVXln1XjnVThm1TfmVPdl1PblVLZk1LXkVLVj1HTjVHRi1DPiVDNh0/LhU/Jg07HgU7Ff03DfU3Be0y/eUy9d0u7dUu5c0u2cEq0bkqybEmwakmuaEisZkiqZEeoYkemYEakXkaiXEVgLjQ8HCjaJlMkAAABI0lEQVR42u3Mx3qDMBSE0Z/03nsvdhxjcnn/twsYjISR5MUkO5+V9N2ZYUPEpogtEdsidkTsitgTsS/iQMShiCMRxyJORJyKOBNxLuJCxKWIKxHXIm5E3Iq4E3Ev4kHEo4gnEc8iXkS8inhLymrJBO8J2UIiw0dc5sRDfEbVRWr1o/pbMMWox9yz6zcLIzMbBTD2VaHu7fr1gjXGA3w5baj5+H0w6x09TDpdaP7rDZhn0sd3y89Y9fcHbPnoYdroZ2w6dQNmg6OHfG4QyrsBC8gdZpVQxtqF4M1mjepFURThTLNgMYsePxaX2WqY6D8GSm2grK2slbGBciHZ9hOE2smNpTuxenhieCdeH06E7qTqvYnImWTbbUSPlKL1wHrgTwZ+AWq+3H5MpRkwAAAAAElFTkSuQmCC';
-
-export default function ThumbnailElevated() {
-  return (
-    <Stack direction="vertical" gap={3}>
-      <Text type="supporting" color="secondary">
-        Raised tiles — `elevation` lifts an image off the page at rest
-      </Text>
-      <Stack direction="horizontal" gap={3} vAlign="center">
-        <Thumbnail src={NIGHT_FOREST} alt="Forest at night" elevation="low" />
-        <Thumbnail src={GOLDEN_SUNSET} alt="Golden sunset" elevation="high" />
-      </Stack>
-    </Stack>
-  );
-}