@astryxdesign/cli 0.1.4-canary.38ede5f → 0.1.4-canary.39ffd21

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx

@@ -3,10 +3,16 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
 import {Text} from '@astryxdesign/core/Text';
 import {Kbd} from '@astryxdesign/core/Kbd';
+import {Icon} from '@astryxdesign/core/Icon';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem} from '@astryxdesign/core/Typeahead';
 
 const itemLabel: CSSProperties = {
@@ -17,21 +23,9 @@ type CommandItem = SearchableItem<{shortcut?: string}>;
 
 const commands: CommandItem[] = [
   {id: 'save', label: 'Save File', auxiliaryData: {shortcut: 'mod+s'}},
-  {
-    id: 'find',
-    label: 'Find in Files',
-    auxiliaryData: {shortcut: 'mod+shift+f'},
-  },
-  {
-    id: 'palette',
-    label: 'Command Palette',
-    auxiliaryData: {shortcut: 'mod+shift+p'},
-  },
-  {
-    id: 'terminal',
-    label: 'Toggle Terminal',
-    auxiliaryData: {shortcut: 'ctrl+`'},
-  },
+  {id: 'find', label: 'Find in Files', auxiliaryData: {shortcut: 'mod+shift+f'}},
+  {id: 'palette', label: 'Command Palette', auxiliaryData: {shortcut: 'mod+shift+p'}},
+  {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {shortcut: 'ctrl+`'}},
   {id: 'sidebar', label: 'Toggle Sidebar', auxiliaryData: {shortcut: 'mod+b'}},
 ];
 
@@ -39,21 +33,50 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      renderItem={(item: CommandItem) => (
-        <>
-          <Text type="body" style={itemLabel}>
-            {item.label}
-          </Text>
-          {item.auxiliaryData?.shortcut && (
-            <Kbd keys={item.auxiliaryData.shortcut} />
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Custom renderItem with keyboard shortcuts
+        </Text>
+        <CommandPalette
+          isOpen
+          isInline
+          onOpenChange={() => {}}
+          searchSource={source}
+          renderItem={(item: CommandItem) => (
+            <>
+              <Text type="body" style={itemLabel}>
+                {item.label}
+              </Text>
+              {item.auxiliaryData?.shortcut && (
+                <Kbd keys={item.auxiliaryData.shortcut} />
+              )}
+            </>
           )}
-        </>
-      )}
-    />
+        />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Composed items with icons and states
+        </Text>
+        <CommandPaletteList>
+          <CommandPaletteItem value="home" onSelect={() => {}}>
+            <Icon icon="externalLink" size="sm" />
+            <Text type="body" style={itemLabel}>Home</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
+            <Icon icon="search" size="sm" />
+            <Text type="body" style={itemLabel}>Search (highlighted)</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="selected" isSelected onSelect={() => {}}>
+            <Icon icon="check" size="sm" />
+            <Text type="body" style={itemLabel}>Selected item</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="disabled" isDisabled>
+            <Text type="body" style={itemLabel}>Disabled item</Text>
+          </CommandPaletteItem>
+        </CommandPaletteList>
+      </Stack>
+    </Stack>
   );
 }

package/templates/pages/classic-gallery/page.tsx

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={0}>
           <Center axis="horizontal">

package/templates/pages/dashboard/page.tsx

@@ -729,7 +729,7 @@ function TableCard<T extends {id: string}>({
 export default function DashboardTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={6}>

package/templates/pages/documentation/page.tsx

@@ -209,7 +209,7 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>

package/templates/pages/mixed-gallery/page.tsx

@@ -112,7 +112,7 @@ function GalleryCard({
 export default function MixedGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/payment-form/page.tsx

@@ -153,6 +153,10 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
 const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = {flexBasis: 0};
 // Space the Order Summary content below its collapsible trigger title.
@@ -262,9 +266,9 @@ export default function PaymentFormPage() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
-        <LayoutContent padding={0}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"

package/templates/pages/product-detail/page.tsx

@@ -3,7 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {
+  VStack,
+  HStack,
+  Layout,
+  LayoutContent,
+} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -198,7 +203,10 @@ function ProductInfo() {
       <VStack gap={2}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
-          <SegmentedControl value={finish} onChange={setFinish} label="Finish">
+          <SegmentedControl
+            value={finish}
+            onChange={setFinish}
+            label="Finish">
             {FINISHES.map(f => (
               <SegmentedControlItem
                 key={f.value}
@@ -278,7 +286,7 @@ export default function ProductDetailTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/product-gallery/page.tsx

@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
 export default function ProductGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/settings/page.tsx

@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1440}
       header={
         <LayoutHeader hasDivider>

package/templates/pages/side-gallery/page.tsx

@@ -101,7 +101,7 @@ function ImageGrid() {
 export default function SideGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/table-page/page.tsx

@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-chart/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -475,13 +481,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',
@@ -513,7 +523,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageChartTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-heatmap-status/page.tsx

@@ -430,7 +430,7 @@ function OutageHeatmap() {
 export default function TablePageHeatmapStatusTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -29,7 +35,11 @@ import {
 // ============= DATA =============
 
 type ProductCategory =
-  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
+  | 'Running'
+  | 'Lifestyle'
+  | 'Basketball'
+  | 'Training'
+  | 'Skateboarding';
 
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -829,13 +839,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',
@@ -867,7 +881,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageShoeStoreHeatmapTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

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);
-  });
-});