@astryxdesign/cli 0.1.0-canary.f94dd07 → 0.1.1-canary.a514b99

package/templates/blocks/components/Tokenizer/TokenizerStates.tsx

@@ -3,15 +3,10 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const users: SearchableItem[] = [
   {id: '1', label: 'Alice Johnson'},
   {id: '2', label: 'Bob Smith'},
@@ -44,7 +39,7 @@ export default function TokenizerStates() {
         value={[users[0], users[2]]}
         onChange={() => {}}
         isDisabled
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Error message"
@@ -54,7 +49,7 @@ export default function TokenizerStates() {
         onChange={items => setErrorValue(items)}
         isRequired
         status={{type: 'error', message: 'At least one reviewer is required'}}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Warning message"
@@ -66,7 +61,7 @@ export default function TokenizerStates() {
           type: 'warning',
           message: 'Consider adding at least 2 approvers',
         }}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Success message"
@@ -75,7 +70,7 @@ export default function TokenizerStates() {
         value={successValue}
         onChange={items => setSuccessValue(items)}
         status={{type: 'success', message: 'All required reviewers added'}}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Toolbar/ToolbarCardHeader.tsx

@@ -9,19 +9,10 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {FunnelIcon, PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    width: 500,
-    height: '100%',
-    marginTop: 260,
-  },
-});
 
 export default function ToolbarCardHeader() {
   return (
-    <Card xstyle={styles.card}>
+    <Card style={{width: 500, height: '100%', marginTop: 260}}>
       <Toolbar
         label="User list actions"
         size="sm"

package/templates/blocks/components/Toolbar/ToolbarSizes.tsx

@@ -9,13 +9,6 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Card} from '@astryxdesign/core/Card';
 import {FunnelIcon, PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    width: 500,
-  },
-});
 
 const SIZES = [
   {size: 'sm' as const, label: 'Small'},
@@ -25,7 +18,7 @@ const SIZES = [
 
 export default function ToolbarSizes() {
   return (
-    <Stack direction="vertical" gap={4} xstyle={styles.container}>
+    <Stack direction="vertical" gap={4} style={{width: 500}}>
       {SIZES.map(({size, label}) => (
         <Card key={size}>
           <Toolbar

package/templates/blocks/components/Toolbar/ToolbarTableFilter.tsx

@@ -9,21 +9,14 @@ import {TextInput} from '@astryxdesign/core/TextInput';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Table} from '@astryxdesign/core/Table';
-import * as stylex from '@stylexjs/stylex';
 import {
   MagnifyingGlassIcon,
   ChevronDownIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  container: {
-    width: '100%',
-  },
-});
-
 export default function ToolbarTableFilter() {
   return (
-    <Stack direction="vertical" xstyle={styles.container}>
+    <Stack direction="vertical" style={{width: '100%'}}>
       <Toolbar
         label="Table filters"
         size="sm"

package/templates/blocks/components/Toolbar/ToolbarThreeSlot.tsx

@@ -9,19 +9,10 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {ArrowLeftIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    width: 600,
-    height: '100%',
-    marginTop: 260,
-  },
-});
 
 export default function ToolbarThreeSlot() {
   return (
-    <Card xstyle={styles.card}>
+    <Card style={{width: 600, height: '100%', marginTop: 260}}>
       <Toolbar
         label="Document toolbar"
         dividers={['bottom']}

package/templates/blocks/components/Toolbar/ToolbarWithTabs.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
+import {useState, type CSSProperties} from 'react';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
@@ -10,21 +10,18 @@ import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
 
-const styles = stylex.create({
-  card: {
-    width: '100%',
-    maxWidth: 500,
-    height: '100%',
-    marginTop: 200,
-  },
-});
+const card: CSSProperties = {
+  width: '100%',
+  maxWidth: 500,
+  height: '100%',
+  marginTop: 200,
+};
 
 export default function ToolbarWithTabs() {
   const [tab, setTab] = useState('overview');
   return (
-    <Card xstyle={styles.card}>
+    <Card style={card}>
       <Toolbar
         label="Section navigation"
         dividers={['bottom']}

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}