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

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

@@ -2,8 +2,7 @@
 
 'use client';
 
-import React, {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import React, {useState, type CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -26,11 +25,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,
@@ -46,33 +40,31 @@ import {
   ShareIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  iconBox: {
-    borderRadius: radiusVars['--radius-container'],
-    backgroundColor: colorVars['--color-background-surface'],
-    flexShrink: 0,
-  },
-  // Sticky dialog header bar — no Astryx prop for sticky/background/z-index.
-  // Inline + block padding comes from the parent LayoutContent `padding`.
-  headerSticky: {
-    position: 'sticky',
-    top: 0,
-    backgroundColor: colorVars['--color-background-surface'],
-    zIndex: 1,
-  },
-  // No `maxWidth` prop on VStack — width only. Inline padding comes from
-  // the parent LayoutContent `padding`.
-  contentMaxWidth: {
-    maxWidth: 680,
-  },
-  // Aligns the sidebar heading with list-item label text. No heading margin prop.
-  sideNavHeading: {
-    marginInline: spacingVars['--spacing-4'],
-  },
-  dialogHeight: {
-    height: '85vh',
-  },
-});
+const iconBox: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  backgroundColor: 'var(--color-background-surface)',
+  flexShrink: 0,
+};
+// Sticky dialog header bar — no Astryx prop for sticky/background/z-index.
+// Inline + block padding comes from the parent LayoutContent `padding`.
+const headerSticky: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: 'var(--color-background-surface)',
+  zIndex: 1,
+};
+// No `maxWidth` prop on VStack — width only. Inline padding comes from
+// the parent LayoutContent `padding`.
+const contentMaxWidth: CSSProperties = {
+  maxWidth: 680,
+};
+// Aligns the sidebar heading with list-item label text. No heading margin prop.
+const sideNavHeading: CSSProperties = {
+  marginInline: 'var(--spacing-4)',
+};
+const dialogHeight: CSSProperties = {
+  height: '85vh',
+};
 
 const NAV_ITEMS = [
   {label: 'Personal information', icon: UserIcon},
@@ -274,7 +266,7 @@ export default function SettingsDialogTemplate() {
         maxHeight="85vh"
         padding={0}
         purpose="form"
-        xstyle={styles.dialogHeight}>
+        style={dialogHeight}>
         <Layout
           height="fill"
           start={
@@ -284,7 +276,7 @@ export default function SettingsDialogTemplate() {
               role="navigation"
               padding={3}>
               <VStack gap={4}>
-                <Heading level={2} xstyle={styles.sideNavHeading}>
+                <Heading level={2} style={sideNavHeading}>
                   Account settings
                 </Heading>
                 <List density="spacious">
@@ -315,7 +307,7 @@ export default function SettingsDialogTemplate() {
           content={
             <LayoutContent isScrollable padding={6}>
               <VStack gap={6}>
-                <VStack xstyle={styles.headerSticky}>
+                <VStack style={headerSticky}>
                   <DialogHeader
                     title={
                       activeNav === 'Personal information'
@@ -326,7 +318,7 @@ export default function SettingsDialogTemplate() {
                     hasDivider={false}
                   />
                 </VStack>
-                <VStack gap={0} xstyle={styles.contentMaxWidth}>
+                <VStack gap={0} style={contentMaxWidth}>
                   {activeNav === 'Personal information' && (
                     <VStack gap={6}>
                       <VStack gap={4}>
@@ -441,7 +433,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={LockClosedIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -465,7 +457,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={PencilSquareIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -491,7 +483,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={ShareIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -620,7 +612,7 @@ export default function SettingsDialogTemplate() {
                               <Center
                                 width={48}
                                 height={48}
-                                xstyle={styles.iconBox}>
+                                style={iconBox}>
                                 <Icon icon={LockClosedIcon} />
                               </Center>
                               <VStack gap={1}>
@@ -813,7 +805,7 @@ export default function SettingsDialogTemplate() {
                               <Center
                                 width={48}
                                 height={48}
-                                xstyle={styles.iconBox}>
+                                style={iconBox}>
                                 <Icon icon={ShieldCheckIcon} />
                               </Center>
                               <VStack gap={1}>

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={