@astryxdesign/cli 0.1.0 → 0.1.1-canary.080d887

package/templates/pages/ai-chat/page.tsx

@@ -2,9 +2,7 @@
 
 'use client';
 
-import {useRef, useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+import {useRef, useState, type CSSProperties} from 'react';
 
 import {
   HStack,
@@ -55,56 +53,66 @@ import {
 // Below this width the split-pane collapses to a single chat column. Shared by
 // the CSS container query and the JS check in openArtifact so they can't drift.
 const MOBILE_MAX_WIDTH = 767;
-const MOBILE = `@container artifact (max-width: ${MOBILE_MAX_WIDTH}px)`;
-
-const styles = stylex.create({
-  root: {
-    height: '100dvh',
-    width: '100%',
-    containerType: 'inline-size',
-    containerName: 'artifact',
-  },
-  chatColumn: {
-    flex: 1,
-    width: '100%',
-    minWidth: 0,
-    height: '100%',
-  },
-  chatLayout: {
-    flex: 1,
-    minHeight: 0,
-  },
-  artifactPanel: {
-    overflow: 'hidden',
-    flexDirection: 'column',
-    display: {default: 'flex', [MOBILE]: 'none'},
-  },
-  resizeHandle: {
-    display: {default: 'flex', [MOBILE]: 'none'},
-  },
-  artifactCard: {
-    marginBlockStart: spacingVars['--spacing-2'],
-  },
-  artifactScroll: {
-    flex: 1,
-    overflowY: 'auto',
-  },
-  articleBody: {
-    maxWidth: 720,
-    marginInline: 'auto',
-  },
-});
-
-// Runtime width for the artifact panel; the MOBILE override forces full width.
-const dynamicStyles = stylex.create({
-  artifactPanelWidth: (size: number | string) => ({
-    width: {
-      default: typeof size === 'number' ? `${size}px` : size,
-      [MOBILE]: '100%',
-    },
-    flexShrink: {default: 0, [MOBILE]: 1},
-  }),
-});
+
+const root: CSSProperties = {
+  height: '100dvh',
+  width: '100%',
+  containerType: 'inline-size',
+  containerName: 'artifact',
+};
+const chatColumn: CSSProperties = {
+  flex: 1,
+  width: '100%',
+  minWidth: 0,
+  height: '100%',
+};
+const chatLayout: CSSProperties = {
+  flex: 1,
+  minHeight: 0,
+};
+const artifactCard: CSSProperties = {
+  marginBlockStart: 'var(--spacing-2)',
+};
+const artifactScroll: CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+};
+const articleBody: CSSProperties = {
+  maxWidth: 720,
+  marginInline: 'auto',
+};
+
+// Runtime width for the artifact panel, passed in via the --artifact-panel-width
+// custom property so the MOBILE container query can still override it to 100%
+// (an inline `width` would beat the class rule). The container query lives in a
+// plain <style> tag below so it needs NO CSS compiler.
+const artifactPanelWidthVar = (size: number | string): CSSProperties =>
+  ({
+    '--artifact-panel-width': typeof size === 'number' ? `${size}px` : size,
+  }) as CSSProperties;
+
+const AI_CHAT_CSS = `
+.ai-chat-resize-handle {
+  display: flex;
+}
+.ai-chat-artifact-panel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: var(--artifact-panel-width);
+  flex-shrink: 0;
+}
+@container artifact (max-width: ${MOBILE_MAX_WIDTH}px) {
+  .ai-chat-resize-handle {
+    display: none;
+  }
+  .ai-chat-artifact-panel {
+    display: none;
+    width: 100%;
+    flex-shrink: 1;
+  }
+}
+`;
 
 // Artifact content
 
@@ -225,8 +233,8 @@ function MobileArtifactActions() {
 // Scrollable artifact body — the formatted document.
 function ArtifactBody() {
   return (
-    <Section variant="transparent" xstyle={styles.artifactScroll}>
-      <VStack gap={2} xstyle={styles.articleBody}>
+    <Section variant="transparent" style={artifactScroll}>
+      <VStack gap={2} style={articleBody}>
         <Heading level={1}>{ARTIFACT_TITLE}</Heading>
         <Markdown>{ARTIFACT_CONTENT}</Markdown>
       </VStack>
@@ -243,7 +251,7 @@ function ArtifactCard({onOpen}: {onOpen: () => void}) {
       variant="muted"
       padding={3}
       maxWidth={360}
-      xstyle={styles.artifactCard}>
+      style={artifactCard}>
       <HStack gap={3} vAlign="center" width="100%">
         <Icon icon={DocumentTextIcon} size="md" color="secondary" />
         <StackItem size="fill">
@@ -288,17 +296,18 @@ export default function AIChatConversationTemplate() {
   };
 
   return (
-    <VStack ref={rootRef} xstyle={styles.root}>
+    <VStack ref={rootRef} style={root}>
+      <style>{AI_CHAT_CSS}</style>
       <Layout
         height="fill"
         content={
           <LayoutContent padding={0}>
             <HStack height="100%">
               {/* Chat column — flexes to fill the space the artifact leaves */}
-              <VStack xstyle={styles.chatColumn}>
+              <VStack style={chatColumn}>
                 <ChatLayout
                   density="spacious"
-                  xstyle={styles.chatLayout}
+                  style={chatLayout}
                   composer={
                     <ChatComposer
                       onSubmit={() => {}}
@@ -677,17 +686,15 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     pillPlacement="start"
                     hasDivider
                     label="Resize artifact panel"
-                    xstyle={styles.resizeHandle}
+                    className="ai-chat-resize-handle"
                   />
 
                   {/* Toolbar as the card header, body below */}
                   <Card
                     variant="transparent"
                     height="100%"
-                    xstyle={[
-                      styles.artifactPanel,
-                      dynamicStyles.artifactPanelWidth(artifactResize.size),
-                    ]}>
+                    className="ai-chat-artifact-panel"
+                    style={artifactPanelWidthVar(artifactResize.size)}>
                     <Toolbar
                       label="Artifact actions"
                       dividers={['bottom']}

package/templates/pages/ai-chat-landing/page.tsx

@@ -2,9 +2,7 @@
 
 'use client';
 
-import {useRef, useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+import {useRef, useState, type CSSProperties} from 'react';
 
 import {Layout, LayoutContent, VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -40,12 +38,10 @@ import {
   LightBulbIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  // Fill the content area so the greeting and composer stay vertically centered.
-  page: {minHeight: '100%'},
-  composerInput: {minHeight: 84},
-  categories: {paddingInline: spacingVars['--spacing-3']},
-});
+// Fill the content area so the greeting and composer stay vertically centered.
+const pageStyle: CSSProperties = {minHeight: '100%'};
+const composerInput: CSSProperties = {minHeight: 84};
+const categories: CSSProperties = {paddingInline: 'var(--spacing-3)'};
 
 // Suggestion cards shown once a category is selected.
 const CATEGORY_SUGGESTIONS: Record<
@@ -311,7 +307,7 @@ export default function AIChatTemplate() {
       padding={6}
       content={
         <LayoutContent>
-          <VStack gap={8} vAlign="center" xstyle={styles.page}>
+          <VStack gap={8} vAlign="center" style={pageStyle}>
             {/* Greeting */}
             <VStack gap={1}>
               <HStack gap={2} vAlign="center">
@@ -333,7 +329,7 @@ export default function AIChatTemplate() {
                 <ChatComposerInput
                   handleRef={composerInputRef}
                   triggers={composerTriggers}
-                  xstyle={styles.composerInput}
+                  style={composerInput}
                   onFiles={files =>
                     setAttachments(prev => [...prev, ...files.map(f => f.name)])
                   }
@@ -435,7 +431,7 @@ export default function AIChatTemplate() {
             />
 
             {/* Category filters + suggestion cards */}
-            <VStack gap={6} xstyle={styles.categories}>
+            <VStack gap={6} style={categories}>
               <ToggleButtonGroup
                 label="Category"
                 value={category}

package/templates/pages/centered-hero/page.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -19,18 +19,16 @@ import {ArrowRightIcon} from '@heroicons/react/20/solid';
 const IMAGE_URL =
   'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
 
-const styles = stylex.create({
-  heroImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-  heroFrame: {
-    maxWidth: 1200,
-    marginInline: 'auto',
-    borderRadius: 'var(--radius-page)',
-  },
-});
+const heroImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
+const heroFrame: CSSProperties = {
+  maxWidth: 1200,
+  marginInline: 'auto',
+  borderRadius: 'var(--radius-page)',
+};
 
 export default function CenteredHero() {
   return (
@@ -68,9 +66,9 @@ export default function CenteredHero() {
               </HStack>
             </VStack>
             <Section variant="transparent" padding={0}>
-              <AspectRatio ratio={16 / 9} xstyle={styles.heroFrame}>
+              <AspectRatio ratio={16 / 9} style={heroFrame}>
                 <img
-                  {...stylex.props(styles.heroImage)}
+                  style={heroImage}
                   src={IMAGE_URL}
                   alt="A bright, colorful lifestyle scene"
                 />

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

@@ -2,41 +2,38 @@
 
 'use client';
 
-import {useState} from 'react';
+import {useState, type CSSProperties} from 'react';
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Section} from '@astryxdesign/core/Section';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
-import * as stylex from '@stylexjs/stylex';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
 
-const styles = stylex.create({
-  outer: {
-    maxWidth: 1200,
-    width: '100%',
-    paddingInline: 'var(--spacing-6)',
-    paddingBlock: 'var(--spacing-8)',
-  },
-  imageWrapper: {
-    position: 'relative',
-    aspectRatio: '3/2',
-    borderRadius: 'var(--radius-container)',
-    overflow: 'clip',
-  },
-  textCenter: {
-    textAlign: 'center',
-  },
-  imgFill: {
-    position: 'absolute',
-    inset: 0,
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const outer: CSSProperties = {
+  maxWidth: 1200,
+  width: '100%',
+  paddingInline: 'var(--spacing-6)',
+  paddingBlock: 'var(--spacing-8)',
+};
+const imageWrapper: CSSProperties = {
+  position: 'relative',
+  aspectRatio: '3/2',
+  borderRadius: 'var(--radius-container)',
+  overflow: 'clip',
+};
+const textCenter: CSSProperties = {
+  textAlign: 'center',
+};
+const imgFill: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 // ─── Gallery Data ───────────────────────────────────────────────────────────
 
@@ -117,11 +114,11 @@ export default function ClassicGalleryTemplate() {
       content={
         <LayoutContent padding={0}>
           <Center axis="horizontal">
-            <VStack gap={8} xstyle={styles.outer}>
+            <VStack gap={8} style={outer}>
               {/* Header */}
               <Center axis="horizontal">
                 <Section variant="transparent" maxWidth={680} padding={0}>
-                  <VStack gap={4} hAlign="center" xstyle={styles.textCenter}>
+                  <VStack gap={4} hAlign="center" style={textCenter}>
                     <VStack gap={2} hAlign="center">
                       <Heading level={1}>
                         Make every day a little more delightful, one detail at a
@@ -150,12 +147,8 @@ export default function ClassicGalleryTemplate() {
               {/* Gallery Grid */}
               <Grid columns={{minWidth: 260, repeat: 'fit'}} gap={4}>
                 {filteredImages.map((image, i) => (
-                  <div key={i} {...stylex.props(styles.imageWrapper)}>
-                    <img
-                      src={image.src}
-                      alt={image.alt}
-                      {...stylex.props(styles.imgFill)}
-                    />
+                  <div key={i} style={imageWrapper}>
+                    <img src={image.src} alt={image.alt} style={imgFill} />
                   </div>
                 ))}
               </Grid>

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

@@ -41,26 +41,26 @@ import {
 } from '@heroicons/react/24/outline';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 
 // The only custom CSS in this template is small optical-alignment negative
 // margins: LayoutHeader/TabList have no edge-dock prop (#2622) and List
 // has no "bleed to container edge" prop (#2626). Everything else uses props.
-const pageStyles = stylex.create({
-  // Bleed the tab bar to the header's content edges so the active-tab underline
-  // meets the header divider. No edge-dock prop on TabList (#2622).
-  tabsRow: {
-    marginInline: -12,
-    marginBottom: -16,
-    marginTop: 12,
-  },
-  // Pull the list items' inner padding back so their content optically aligns
-  // with the section heading above (ListItem insets content by ~8px). No
-  // edge/inset prop on List (#2626).
-  itemsList: {
-    marginInline: -8,
-  },
-});
+// Plain inline styles — no StyleX compiler required.
+
+// Bleed the tab bar to the header's content edges so the active-tab underline
+// meets the header divider. No edge-dock prop on TabList (#2622).
+const tabsRow: CSSProperties = {
+  marginInline: -12,
+  marginBottom: -16,
+  marginTop: 12,
+};
+// Pull the list items' inner padding back so their content optically aligns
+// with the section heading above (ListItem insets content by ~8px). No
+// edge/inset prop on List (#2626).
+const itemsList: CSSProperties = {
+  marginInline: -8,
+};
 
 // ─── Product data ───────────────────────────────────────────────────────────
 const PRODUCT_IMAGES = [
@@ -258,7 +258,7 @@ function PageHeader({
           </HStack>
         )}
 
-        <HStack vAlign="center" xstyle={pageStyles.tabsRow}>
+        <HStack vAlign="center" style={tabsRow}>
           <StackItem size="fill">
             <TabList value={activeTab} onChange={onTabChange} size="lg">
               <Tab value="details" label="Details" />
@@ -305,7 +305,7 @@ function ItemsCard() {
           </HStack>
         </HStack>
 
-        <List density="spacious" xstyle={pageStyles.itemsList}>
+        <List density="spacious" style={itemsList}>
           {PRODUCTS.map((product, i) => (
             <ListItem
               key={i}

package/templates/pages/documentation/page.tsx

@@ -2,27 +2,23 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
-import {Text} from '@astryxdesign/core/Text';
+import type {CSSProperties} from 'react';
+import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
+import {ClickableCard} from '@astryxdesign/core/ClickableCard';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
-import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
 
-const styles = stylex.create({
-  previewCard: {
-    borderRadius: radiusVars['--radius-container'],
-    cursor: 'pointer',
-  },
-});
+const previewCard: CSSProperties = {
+  borderRadius: 'var(--radius-element)',
+};
+// Negative margin offsets each card's 8px padding so the grid content stays
+// visually aligned while giving every card a padded hover/click target.
+const cardGrid: CSSProperties = {
+  margin: -8,
+};
 
 // ---------------------------------------------------------------------------
 // Data
@@ -213,30 +209,12 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
-      start={
-        <LayoutPanel hasDivider padding={0}>
-          <SideNav header={<SideNavHeading heading="Product Name" />}>
-            <SideNavSection title="Navigation" isHeaderHidden>
-              <SideNavItem label="Home" isSelected />
-              <SideNavItem label="Getting started" />
-            </SideNavSection>
-
-            {COMPONENT_CATEGORIES.map(category => (
-              <SideNavSection key={category.label} title={category.label}>
-                {category.items.map(item => (
-                  <SideNavItem key={item.key} label={item.name} />
-                ))}
-              </SideNavSection>
-            ))}
-          </SideNav>
-        </LayoutPanel>
-      }
       content={
         <LayoutContent padding={8}>
           <VStack gap={10}>
-            <Card variant="cyan" padding={10}>
+            <Card variant="gray" padding={10}>
               <HStack gap={8} vAlign="center">
                 <StackItem size="fill">
                   <VStack gap={4}>
@@ -246,11 +224,7 @@ export default function DocumentationOverviewPage() {
                       beautiful, accessible products.
                     </Text>
                     <HStack>
-                      <Button
-                        label="Get started"
-                        variant="primary"
-                        size="lg"
-                      />
+                      <Button label="Get started" variant="primary" size="lg" />
                     </HStack>
                   </VStack>
                 </StackItem>
@@ -260,25 +234,35 @@ export default function DocumentationOverviewPage() {
 
             {COMPONENT_CATEGORIES.map(category => (
               <VStack key={category.label} gap={4}>
-                <Text type="display-2">{category.label}</Text>
-                <Grid columns={{minWidth: 260}} gap={8}>
+                <Heading level={2}>{category.label}</Heading>
+                <Grid
+                  columns={{minWidth: 260}}
+                  gap={2}
+                  style={cardGrid}>
                   {category.items.map(item => (
-                    <VStack key={item.key} gap={3}>
-                      <Card
-                        variant="muted"
-                        padding={0}
-                        minHeight={160}
-                        xstyle={styles.previewCard}
-                      />
-                      <VStack gap={0.5}>
-                        <Text type="body" weight="bold">
-                          {item.name}
-                        </Text>
-                        <Text type="body" color="secondary">
-                          {item.desc}
-                        </Text>
+                    <ClickableCard
+                      key={item.key}
+                      label={`Open ${item.name}`}
+                      onClick={() => {}}
+                      variant="transparent"
+                      padding={2}>
+                      <VStack gap={3}>
+                        <Card
+                          variant="muted"
+                          padding={0}
+                          minHeight={160}
+                          style={previewCard}
+                        />
+                        <VStack gap={0.5}>
+                          <Text type="body" weight="bold">
+                            {item.name}
+                          </Text>
+                          <Text type="body" color="secondary" maxLines={3}>
+                            {item.desc}
+                          </Text>
+                        </VStack>
                       </VStack>
-                    </VStack>
+                    </ClickableCard>
                   ))}
                 </Grid>
               </VStack>