@astryxdesign/cli 0.1.0 → 0.1.1-canary.a514b99

package/templates/pages/settings-sidebar/page.tsx

@@ -2,9 +2,8 @@
 
 'use client';
 
-import {useState} from 'react';
+import {useState, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
-import * as stylex from '@stylexjs/stylex';
 import {
   VStack,
   HStack,
@@ -27,11 +26,6 @@ import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Badge} from '@astryxdesign/core/Badge';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Center} from '@astryxdesign/core/Center';
-import {
-  colorVars,
-  radiusVars,
-  spacingVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
 import {
   UserIcon,
   LockClosedIcon,
@@ -49,29 +43,27 @@ import {
   ChevronRightIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  // Anchor the page to the viewport height so the sidebar + content fill the
-  // screen. Layout height="fill" is min-height:100% which collapses when the
-  // host container is content-sized; Layout has no viewport-height prop.
-  fillViewport: {
-    minHeight: '100dvh',
-  },
-  iconBox: {
-    borderRadius: radiusVars['--radius-container'],
-    backgroundColor: colorVars['--color-background-surface'],
-    flexShrink: 0,
-  },
-  rowPadding: {
-    paddingBlock: spacingVars['--spacing-4'],
-  },
-  sideNavPadding: {
-    paddingBlock: spacingVars['--spacing-4'],
-    paddingInline: spacingVars['--spacing-3'],
-  },
-  sideNavHeading: {
-    marginInline: spacingVars['--spacing-4'],
-  },
-});
+// Anchor the page to the viewport height so the sidebar + content fill the
+// screen. Layout height="fill" is min-height:100% which collapses when the
+// host container is content-sized; Layout has no viewport-height prop.
+const fillViewport: CSSProperties = {
+  minHeight: '100dvh',
+};
+const iconBox: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  backgroundColor: 'var(--color-background-surface)',
+  flexShrink: 0,
+};
+const rowPadding: CSSProperties = {
+  paddingBlock: 'var(--spacing-4)',
+};
+const sideNavPadding: CSSProperties = {
+  paddingBlock: 'var(--spacing-4)',
+  paddingInline: 'var(--spacing-3)',
+};
+const sideNavHeading: CSSProperties = {
+  marginInline: 'var(--spacing-4)',
+};
 
 const NAV_ITEMS = [
   {label: 'Personal information', icon: UserIcon},
@@ -129,7 +121,7 @@ const DEVICE_ROWS: {
 function InfoRowItem({label, value, action}: InfoRow) {
   return (
     <>
-      <HStack hAlign="between" vAlign="start" xstyle={styles.rowPadding}>
+      <HStack hAlign="between" vAlign="start" style={rowPadding}>
         <VStack gap={0}>
           <Text type="body" weight="semibold" display="block">
             {label}
@@ -167,7 +159,7 @@ function ExpandableRow({
   return (
     <>
       {isExpanded ? (
-        <VStack gap={4} xstyle={styles.rowPadding}>
+        <VStack gap={4} style={rowPadding}>
           <Text type="body" weight="semibold" display="block">
             {label}
           </Text>
@@ -178,7 +170,7 @@ function ExpandableRow({
           </HStack>
         </VStack>
       ) : (
-        <HStack hAlign="between" vAlign="start" xstyle={styles.rowPadding}>
+        <HStack hAlign="between" vAlign="start" style={rowPadding}>
           <VStack gap={0}>
             <Text type="body" weight="semibold" display="block">
               {label}
@@ -263,8 +255,8 @@ export default function SettingsSecurityTemplate() {
   };
 
   const navList = (
-    <VStack gap={4} xstyle={styles.sideNavPadding}>
-      <Heading level={2} xstyle={styles.sideNavHeading}>
+    <VStack gap={4} style={sideNavPadding}>
+      <Heading level={2} style={sideNavHeading}>
         Account settings
       </Heading>
       <List density="spacious">
@@ -299,7 +291,7 @@ export default function SettingsSecurityTemplate() {
     return (
       <Layout
         height="fill"
-        xstyle={styles.fillViewport}
+        style={fillViewport}
         content={<LayoutContent padding={2}>{navList}</LayoutContent>}
       />
     );
@@ -309,7 +301,7 @@ export default function SettingsSecurityTemplate() {
     <Layout
       height="fill"
       contentWidth={1200}
-      xstyle={styles.fillViewport}
+      style={fillViewport}
       start={
         isNarrow ? undefined : (
           <LayoutPanel hasDivider padding={0}>
@@ -385,7 +377,7 @@ export default function SettingsSecurityTemplate() {
                           key={i}
                           gap={3}
                           vAlign="start"
-                          xstyle={styles.rowPadding}>
+                          style={rowPadding}>
                           <Icon icon={ComputerDesktopIcon} />
                           <StackItem size="fill">
                             <VStack gap={0}>
@@ -419,7 +411,7 @@ export default function SettingsSecurityTemplate() {
                       <HStack
                         hAlign="between"
                         vAlign="start"
-                        xstyle={styles.rowPadding}>
+                        style={rowPadding}>
                         <VStack gap={0}>
                           <Text
                             type="body"
@@ -459,7 +451,7 @@ export default function SettingsSecurityTemplate() {
                         <Center
                           width={48}
                           height={48}
-                          xstyle={styles.iconBox}>
+                          style={iconBox}>
                           <Icon icon={LockClosedIcon} />
                         </Center>
                         <VStack gap={1}>
@@ -659,7 +651,7 @@ export default function SettingsSecurityTemplate() {
                 <Card padding={4}>
                   <VStack gap={4}>
                     <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} xstyle={styles.iconBox}>
+                      <Center width={48} height={48} style={iconBox}>
                         <Icon icon={LockClosedIcon} />
                       </Center>
                       <VStack gap={0}>
@@ -677,7 +669,7 @@ export default function SettingsSecurityTemplate() {
                     </HStack>
                     <Divider />
                     <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} xstyle={styles.iconBox}>
+                      <Center width={48} height={48} style={iconBox}>
                         <Icon icon={PencilSquareIcon} />
                       </Center>
                       <VStack gap={0}>
@@ -697,7 +689,7 @@ export default function SettingsSecurityTemplate() {
                     </HStack>
                     <Divider />
                     <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} xstyle={styles.iconBox}>
+                      <Center width={48} height={48} style={iconBox}>
                         <Icon icon={ShareIcon} />
                       </Center>
                       <VStack gap={0}>
@@ -725,7 +717,7 @@ export default function SettingsSecurityTemplate() {
                 <VStack gap={8}>
                   <VStack gap={0}>
                     <Heading level={3}>Messages</Heading>
-                    <VStack xstyle={styles.rowPadding}>
+                    <VStack style={rowPadding}>
                       <Switch
                         label="Show people when I've read their messages."
                         value={readReceipts}
@@ -737,7 +729,7 @@ export default function SettingsSecurityTemplate() {
                     <HStack
                       hAlign="between"
                       vAlign="center"
-                      xstyle={styles.rowPadding}>
+                      style={rowPadding}>
                       <Text type="body" weight="semibold">
                         Blocked people
                       </Text>
@@ -748,7 +740,7 @@ export default function SettingsSecurityTemplate() {
 
                   <VStack gap={0}>
                     <Heading level={3}>Listings</Heading>
-                    <VStack xstyle={styles.rowPadding}>
+                    <VStack style={rowPadding}>
                       <Switch
                         label="Include my listing(s) in search engines"
                         description="Turning this on means search engines, like Google, will display your listing page(s) in search results."
@@ -833,7 +825,7 @@ export default function SettingsSecurityTemplate() {
                         <Center
                           width={48}
                           height={48}
-                          xstyle={styles.iconBox}>
+                          style={iconBox}>
                           <Icon icon={ShieldCheckIcon} />
                         </Center>
                         <VStack gap={1}>

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

@@ -13,21 +13,18 @@ import {Button} from '@astryxdesign/core/Button';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Divider} from '@astryxdesign/core/Divider';
-import * as stylex from '@stylexjs/stylex';
 
-// Image fill is a plain inline style (not stylex) so it survives the playground
-// preview's runtime TS compile, which doesn't run the StyleX babel plugin.
+// Image fill is a plain inline style so it renders without any CSS compiler
+// (works in the playground preview's runtime TS compile too).
 const imageStyle = {
   width: '100%',
   height: '100%',
   objectFit: 'cover' as const,
 };
 
-const styles = stylex.create({
-  imageClip: {
-    borderRadius: 'var(--radius-element)',
-  },
-});
+const imageClip = {
+  borderRadius: 'var(--radius-element)',
+};
 
 // ─── Image Data ─────────────────────────────────────────────────────────────
 
@@ -91,7 +88,7 @@ function ImageGrid() {
   return (
     <Grid columns={3} gap={3}>
       {IMAGES.map(img => (
-        <AspectRatio key={img.src} ratio={1} xstyle={styles.imageClip}>
+        <AspectRatio key={img.src} ratio={1} style={imageClip}>
           <img src={img.src} alt={img.alt} style={imageStyle} />
         </AspectRatio>
       ))}

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

@@ -5,7 +5,6 @@
 import React, {useState, useMemo} from 'react';
 import {useResizable, ResizeHandle} from '@astryxdesign/core/Resizable';
 import type {ResizableProps} from '@astryxdesign/core/Resizable';
-import * as stylex from '@stylexjs/stylex';
 import {
   Layout,
   LayoutContent,
@@ -56,15 +55,15 @@ import {
 import {XMarkIcon} from '@heroicons/react/24/outline';
 import {ChartBarIcon} from '@heroicons/react/24/solid';
 
-const pageStyles = stylex.create({
-  groupHeaderRow: {
-    cursor: 'pointer',
-    backgroundColor: 'var(--color-background-muted)',
-  },
-  groupHeaderCell: {
-    padding: 'var(--spacing-3) var(--spacing-4)',
-  },
-});
+// Plain inline styles using Astryx design-token CSS variables (declared at
+// :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
+// The group-header background + cursor live on the colSpan TableCell (which
+// reliably forwards `style`) so they fill the full row width.
+const groupHeaderCell: React.CSSProperties = {
+  cursor: 'pointer',
+  backgroundColor: 'var(--color-background-muted)',
+  padding: 'var(--spacing-3) var(--spacing-4)',
+};
 
 // Types
 type TaskStatus = 'in_progress' | 'todo' | 'backlog' | 'done';
@@ -988,11 +987,8 @@ export default function DataTableTemplate() {
                             e.preventDefault();
                             toggleGroup(key);
                           }
-                        }}
-                        xstyle={[pageStyles.groupHeaderRow]}>
-                        <TableCell
-                          colSpan={COL_COUNT}
-                          xstyle={pageStyles.groupHeaderCell}>
+                        }}>
+                        <TableCell colSpan={COL_COUNT} style={groupHeaderCell}>
                           <HStack gap={2} vAlign="center">
                             <Icon
                               icon={

package/templates/pages/theme-showcase/page.tsx

@@ -3,7 +3,6 @@
 'use client';
 
 import {type CSSProperties, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {
   Plus,
   Search,
@@ -55,10 +54,10 @@ import {
   ChatSystemMessage,
 } from '@astryxdesign/core/Chat';
 
-// Styles passed to Astryx components via their `xstyle` prop. These are
-// applied by the components themselves, so they work in compiled builds
-// and in the live playground preview alike.
-const styles = stylex.create({
+// Styles passed to Astryx components via their `style` prop. Astryx components
+// forward the DOM `style` prop, so these work with no CSS compiler — in
+// compiled builds and in the live playground preview alike.
+const styles: Record<string, CSSProperties> = {
   card: {
     backgroundColor: 'var(--color-background-body)',
     color: 'var(--color-text-primary)',
@@ -169,14 +168,11 @@ const styles = stylex.create({
   cartButton: {
     flex: 1,
   },
-});
+};
 
 // Styles applied directly to plain DOM elements via the `style` prop.
-// Kept as inline styles (rather than stylex.create) so they render in the
-// playground preview, which can't compile StyleX — `stylex.props()` is a
-// no-op there, so raw `{...stylex.props(...)}` on a <div>/<img> would lose
-// these declarations. All are static (no media/pseudo variants), so inline
-// styles reproduce them exactly.
+// Plain inline styles so they render with no CSS compiler. All are static
+// (no media/pseudo variants), so inline styles reproduce them exactly.
 const inlineStyles: Record<string, CSSProperties> = {
   inventoryBannerWrap: {
     paddingInline: 'var(--spacing-6)',
@@ -439,10 +435,10 @@ function StorePreview({
         />
 
         <Section padding={6} variant="transparent">
-          <VStack gap={10} xstyle={[styles.content, styles.contentFluid]}>
+          <VStack gap={10} style={{...styles.content, ...styles.contentFluid}}>
             <Center>
-              <VStack gap={4} hAlign="center" xstyle={styles.heroText}>
-                <Text type="display-2" xstyle={styles.heroHeadline}>
+              <VStack gap={4} hAlign="center" style={styles.heroText}>
+                <Text type="display-2" style={styles.heroHeadline}>
                   Little joys,
                   <br />
                   everywhere you go
@@ -457,7 +453,7 @@ function StorePreview({
             <Grid columns={isMobile ? 1 : {minWidth: 200, max: 3}} gap={4}>
               {products.map((p, i) => (
                 <Card key={p.name} padding={0} height="100%">
-                  <VStack gap={0} xstyle={styles.cardStack}>
+                  <VStack gap={0} style={styles.cardStack}>
                     <AspectRatio ratio={1}>
                       <img
                         src={images[PRODUCT_IMAGE_KEYS[i]]}
@@ -469,17 +465,17 @@ function StorePreview({
                       <VStack
                         gap={2}
                         hAlign="center"
-                        xstyle={styles.cardStack}>
+                        style={styles.cardStack}>
                         <HStack>
                           <Badge label={p.badge} variant={p.badgeVariant} />
                         </HStack>
-                        <Heading level={2} xstyle={styles.centerText}>
+                        <Heading level={2} style={styles.centerText}>
                           {p.name}
                         </Heading>
                         <Text
                           type="supporting"
                           color="secondary"
-                          xstyle={[styles.cardDescription, styles.centerText]}>
+                          style={{...styles.cardDescription, ...styles.centerText}}>
                           {p.description}
                         </Text>
                         <HStack gap={2} vAlign="center" hAlign="center">
@@ -491,14 +487,14 @@ function StorePreview({
                             min={1}
                             max={99}
                             size="sm"
-                            xstyle={styles.quantityInput}
+                            style={styles.quantityInput}
                           />
                           <Button
                             label="Add to cart"
                             variant="secondary"
                             size="sm"
                             href="#"
-                            xstyle={styles.cartButton}
+                            style={styles.cartButton}
                           />
                         </HStack>
                       </VStack>
@@ -516,11 +512,11 @@ function StorePreview({
 
 function CheckoutCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} xstyle={styles.card}>
-      <VStack gap={4} xstyle={styles.checkoutStack}>
+    <Card padding={5} style={styles.card}>
+      <VStack gap={4} style={styles.checkoutStack}>
         <Heading level={2}>Checkout</Heading>
 
-        <VStack gap={3} xstyle={styles.checkoutStack}>
+        <VStack gap={3} style={styles.checkoutStack}>
           <TextInput
             label="Email"
             placeholder="you@studio.com"
@@ -566,7 +562,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             />
           </RadioList>
 
-          <VStack gap={2} xstyle={styles.checkoutStack}>
+          <VStack gap={2} style={styles.checkoutStack}>
             <Text type="supporting" weight="bold">
               Payment method
             </Text>
@@ -579,7 +575,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                 <VStack
                   gap={1}
                   hAlign="center"
-                  xstyle={styles.paymentCardContent}>
+                  style={styles.paymentCardContent}>
                   <CreditCard size={20} />
                   <Text type="supporting" weight="bold">
                     Card
@@ -594,7 +590,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                 <VStack
                   gap={1}
                   hAlign="center"
-                  xstyle={styles.paymentCardContent}>
+                  style={styles.paymentCardContent}>
                   <Smartphone size={20} />
                   <Text type="supporting" weight="bold">
                     Apple Pay
@@ -609,7 +605,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                 <VStack
                   gap={1}
                   hAlign="center"
-                  xstyle={styles.paymentCardContent}>
+                  style={styles.paymentCardContent}>
                   <Wallet size={20} />
                   <Text type="supporting" weight="bold">
                     Google Pay
@@ -687,12 +683,12 @@ const SUGGESTED_QUESTIONS = [
 
 function ChatCard() {
   return (
-    <Card padding={0} xstyle={styles.chatCard}>
+    <Card padding={0} style={styles.chatCard}>
       <HStack
         hAlign="between"
         vAlign="center"
         gap={3}
-        xstyle={styles.chatHeader}>
+        style={styles.chatHeader}>
         <Heading level={2}>Studio AI</Heading>
 
         <HStack gap={1} vAlign="center">
@@ -894,8 +890,8 @@ function formatAmount(amount: number): string {
 
 function LatestActivityCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} xstyle={styles.activityCard}>
-      <VStack gap={4} xstyle={styles.activityCardStack}>
+    <Card padding={5} style={styles.activityCard}>
+      <VStack gap={4} style={styles.activityCardStack}>
         <Heading level={2}>Revenue</Heading>
 
         <Grid columns={isMobile ? 1 : 2} gap={3}>
@@ -920,7 +916,7 @@ function LatestActivityCard({isMobile}: {isMobile: boolean}) {
           <Link href="#">See all</Link>
         </HStack>
 
-        <VStack gap={1} xstyle={styles.activityListFade}>
+        <VStack gap={1} style={styles.activityListFade}>
           {ACTIVITY.map(item => (
             <Item
               key={item.id}
@@ -1110,11 +1106,11 @@ function InventoryCard({
     row => row.available < LOW_STOCK_THRESHOLD,
   ).length;
   return (
-    <Card padding={0} xstyle={styles.inventoryCard}>
+    <Card padding={0} style={styles.inventoryCard}>
       <HStack
         hAlign="between"
         vAlign="center"
-        xstyle={styles.inventoryHeader}>
+        style={styles.inventoryHeader}>
         <Heading level={2}>Inventory</Heading>
         <Button
           label="Add item"
@@ -1130,7 +1126,7 @@ function InventoryCard({
         gap={3}
         vAlign="center"
         hAlign="between"
-        xstyle={styles.inventoryFilterRow}>
+        style={styles.inventoryFilterRow}>
         <HStack gap={2} vAlign="center" style={{flex: 1, minWidth: 0}}>
           <TextInput
             label="Search inventory"
@@ -1139,7 +1135,7 @@ function InventoryCard({
             value=""
             onChange={() => {}}
             startIcon={<Search size={16} />}
-            xstyle={styles.searchInput}
+            style={styles.searchInput}
           />
           <OverflowList
             gap={2}
@@ -1226,7 +1222,7 @@ function InventoryCard({
         </div>
       )}
 
-      <div {...stylex.props(styles.inventoryTableWrap)}>
+      <div style={styles.inventoryTableWrap}>
         <Table<InventoryRow>
           data={inventory}
           columns={[