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

package/templates/pages/ide/page.tsx

@@ -2,14 +2,12 @@
 
 'use client';
 
-import {useState, useMemo} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, useMemo, type CSSProperties} from 'react';
 
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 import {Stack, StackItem} from '@astryxdesign/core/Layout';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
@@ -30,7 +28,7 @@ import {
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
+const styles: Record<string, CSSProperties> = {
   contentFill: {
     height: '100%',
   },
@@ -40,16 +38,16 @@ const styles = stylex.create({
     display: 'grid',
   },
   tabListPadding: {
-    paddingTop: spacingVars['--spacing-2'],
+    paddingTop: 'var(--spacing-2)',
   },
   metadataCompact: {
-    gap: `${spacingVars['--spacing-1']} ${spacingVars['--spacing-3']}`,
+    gap: 'var(--spacing-1) var(--spacing-3)',
   },
   historyTimelineDot: {
     width: 8,
     height: 8,
     borderRadius: '50%',
-    backgroundColor: colorVars['--color-border-emphasized'],
+    backgroundColor: 'var(--color-border-emphasized)',
     marginTop: 6,
     flexShrink: 0,
   },
@@ -75,26 +73,23 @@ const styles = stylex.create({
     height: '100%',
     overflow: 'hidden',
   },
-});
+};
 
 const EDITOR_CODE = `import {useState, useCallback} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Button} from '@astryxdesign/core/Button';
 import {Text} from '@astryxdesign/core/Text';
 
-const styles = stylex.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8,
-    padding: 16,
-  },
-  counter: {
-    fontSize: 48,
-    fontWeight: 700,
-    fontVariantNumeric: 'tabular-nums',
-  },
-});
+const containerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  padding: 16,
+};
+const counterStyle = {
+  fontSize: 48,
+  fontWeight: 700,
+  fontVariantNumeric: 'tabular-nums',
+};
 
 export default function Counter() {
   const [count, setCount] = useState(0);
@@ -108,9 +103,9 @@ export default function Counter() {
   }, []);
 
   return (
-    <div {...stylex.props(styles.container)}>
+    <div style={containerStyle}>
       <Text type="label">Counter</Text>
-      <span {...stylex.props(styles.counter)}>
+      <span style={counterStyle}>
         {count}
       </span>
       <Button label="Increment" onClick={increment} />
@@ -172,7 +167,7 @@ function buildFileTree(
           label: label('styles'),
           startContent: <Icon icon={FolderIcon} size="xsm" />,
           isExpanded: true,
-          children: [file('tokens.stylex.ts'), file('theme.ts')],
+          children: [file('tokens.ts'), file('theme.ts')],
         },
       ],
     },
@@ -196,7 +191,7 @@ const PROPERTIES = [
 const HISTORY_ITEMS = [
   {label: 'Opened Counter.tsx', time: '2 min ago'},
   {label: 'Opened Layout.tsx', time: '6 min ago'},
-  {label: 'Viewed tokens.stylex.ts', time: '11 min ago'},
+  {label: 'Viewed tokens.ts', time: '11 min ago'},
 ];
 
 export default function ResizableWorkspacePage() {
@@ -248,7 +243,7 @@ export default function ResizableWorkspacePage() {
                       padding={0}>
                       <Stack
                         direction="vertical"
-                        xstyle={styles.fileExplorer}
+                        style={styles.fileExplorer}
                         gap={2}>
                         <TextInput
                           label="Search files"
@@ -278,8 +273,8 @@ export default function ResizableWorkspacePage() {
                   height="fill"
                   content={
                     <LayoutContent padding={0}>
-                      <Stack direction="vertical" xstyle={styles.contentFill}>
-                        <StackItem size="fill" xstyle={styles.editorArea}>
+                      <Stack direction="vertical" style={styles.contentFill}>
+                        <StackItem size="fill" style={styles.editorArea}>
                           <CodeBlock
                             code={EDITOR_CODE}
                             language="typescript"
@@ -314,13 +309,13 @@ export default function ResizableWorkspacePage() {
                             }}>
                             <Stack
                               direction="vertical"
-                              xstyle={styles.contentFill}>
+                              style={styles.contentFill}>
                               <TabList
                                 value={activeTermTab}
                                 onChange={val => setActiveTermTab(val)}
                                 size="sm"
                                 hasDivider={false}
-                                xstyle={styles.tabListPadding}>
+                                style={styles.tabListPadding}>
                                 <Tab label="Terminal" value="terminal" />
                                 <Tab label="Problems" value="problems" />
                                 <Tab label="Output" value="output" />
@@ -328,7 +323,7 @@ export default function ResizableWorkspacePage() {
                               </TabList>
                               <StackItem
                                 size="fill"
-                                xstyle={styles.terminalWrapper}>
+                                style={styles.terminalWrapper}>
                                 <CodeBlock
                                   code={TERMINAL_OUTPUT}
                                   language="bash"
@@ -369,7 +364,7 @@ export default function ResizableWorkspacePage() {
                             <Stack
                               direction="vertical"
                               gap={3}
-                              xstyle={styles.propertiesPanel}>
+                              style={styles.propertiesPanel}>
                               <SegmentedControl
                                 label="Properties panel sections"
                                 value={activePropertiesTab}
@@ -389,7 +384,7 @@ export default function ResizableWorkspacePage() {
                                 <Stack
                                   direction="vertical"
                                   gap={3}
-                                  xstyle={styles.propertiesContent}>
+                                  style={styles.propertiesContent}>
                                   <Stack direction="vertical" gap={1}>
                                     <Heading level={3} maxLines={1}>
                                       {activeFile}
@@ -401,7 +396,7 @@ export default function ResizableWorkspacePage() {
                                       src/components/{activeFile}
                                     </Text>
                                   </Stack>
-                                  <MetadataList xstyle={styles.metadataCompact}>
+                                  <MetadataList style={styles.metadataCompact}>
                                     {PROPERTIES.map(prop => (
                                       <MetadataListItem
                                         key={prop.label}
@@ -413,7 +408,7 @@ export default function ResizableWorkspacePage() {
                                   <Stack
                                     direction="vertical"
                                     gap={2}
-                                    xstyle={styles.propertyActions}>
+                                    style={styles.propertyActions}>
                                     <Button
                                       label="Format Document"
                                       size="sm"
@@ -448,9 +443,7 @@ export default function ResizableWorkspacePage() {
                                         }
                                         startContent={
                                           <span
-                                            {...stylex.props(
-                                              styles.historyTimelineDot,
-                                            )}
+                                            style={styles.historyTimelineDot}
                                           />
                                         }
                                       />

package/templates/pages/library/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState, useMemo} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -320,21 +319,19 @@ const ITEMS: LibraryItem[] = [
   },
 ];
 
-const styles = stylex.create({
-  thumbnailWrapper: {
-    position: 'relative',
-    aspectRatio: '16/9',
-    overflow: 'clip',
-    flexShrink: 0,
-  },
-  thumbnailImage: {
-    position: 'absolute',
-    inset: 0,
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const thumbnailWrapper: CSSProperties = {
+  position: 'relative',
+  aspectRatio: '16/9',
+  overflow: 'clip',
+  flexShrink: 0,
+};
+const thumbnailImage: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 // =============================================================================
 // Side Nav
@@ -343,12 +340,8 @@ const styles = stylex.create({
 function LibraryCard({item}: {item: LibraryItem}) {
   return (
     <Card padding={0}>
-      <div {...stylex.props(styles.thumbnailWrapper)}>
-        <img
-          src={item.imageUrl}
-          alt={item.name}
-          {...stylex.props(styles.thumbnailImage)}
-        />
+      <div style={thumbnailWrapper}>
+        <img src={item.imageUrl} alt={item.name} style={thumbnailImage} />
       </div>
       <Section variant="transparent" padding={4}>
         <VStack gap={1}>

package/templates/pages/login/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -13,22 +12,19 @@ import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Banner} from '@astryxdesign/core/Banner';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // Standalone auth page paints its own body background (no host shell).
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  // Cap the column at 400px but let it shrink to fit narrow screens (Stack
-  // has no maxWidth prop, so it's set here).
-  content: {
-    width: '100%',
-    maxWidth: 400,
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// Cap the column at 400px but let it shrink to fit narrow screens (Stack
+// has no maxWidth prop, so it's set here).
+const contentStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 400,
+};
 
 export default function LoginPage() {
   const [email, setEmail] = useState('');
@@ -47,8 +43,8 @@ export default function LoginPage() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
-      <VStack gap={4} hAlign="center" xstyle={styles.content}>
+    <Center axis="both" style={pageStyle}>
+      <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">
           <Icon icon={CubeIcon} size="lg" />

package/templates/pages/login-card/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {CubeIcon} from '@heroicons/react/24/outline';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
@@ -14,7 +13,6 @@ import {Card} from '@astryxdesign/core/Card';
 import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // Brand sign-in marks — no heroicons or template-assets equivalent.
 const AppleIcon = (props: React.SVGProps<SVGSVGElement>) => (
@@ -57,19 +55,17 @@ const GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (
 );
 
 // Standalone auth page paints its own body background (no host shell).
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  // Cap the column at 400px but let it shrink to fit narrow screens (Stack
-  // has no maxWidth prop, so it's set here).
-  content: {
-    width: '100%',
-    maxWidth: 400,
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// Cap the column at 400px but let it shrink to fit narrow screens (Stack
+// has no maxWidth prop, so it's set here).
+const contentStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 400,
+};
 
 export default function LoginSimple() {
   const [email, setEmail] = useState('');
@@ -91,8 +87,8 @@ export default function LoginSimple() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
-      <VStack gap={4} hAlign="center" xstyle={styles.content}>
+    <Center axis="both" style={pageStyle}>
+      <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">
           <Icon icon={CubeIcon} size="lg" />

package/templates/pages/login-split/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {VStack, HStack, StackItem} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Center} from '@astryxdesign/core/Center';
@@ -17,7 +16,6 @@ import {TextInput} from '@astryxdesign/core/TextInput';
 import {Button} from '@astryxdesign/core/Button';
 import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const COVER_IMAGE_URL =
   'https://lookaside.facebook.com/assets/astryx/light-working-vertical-1.png';
@@ -34,47 +32,50 @@ const COLUMN_MIN_WIDTH = 240;
 // below 2×MIN + 32(gap) = 512px. The container query reorders the image and
 // tightens the inset at that same point, keyed to the card width (not the
 // window) so it never desyncs.
-const STACK_QUERY = '@container login-split (max-width: 511px)';
+// minHeight:100% fills the host so the centered card never leaves an unpainted
+// band; padding keeps it off the surface edges.
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+const cardWrap: CSSProperties = {
+  width: '100%',
+  maxWidth: 1000,
+  marginInline: 'auto',
+};
+const coverImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
-const styles = stylex.create({
-  // minHeight:100% fills the host so the centered card never leaves an unpainted
-  // band; padding keeps it off the surface edges.
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  cardWrap: {
-    width: '100%',
-    maxWidth: 1000,
-    marginInline: 'auto',
-  },
-  // Pad the grid, not the Card: the form's Section escapes Card's
-  // --container-padding-* vars, which would cancel the inset on the form side.
-  // containerType makes this the query container for STACK_QUERY.
-  splitGrid: {
-    containerType: 'inline-size',
-    containerName: 'login-split',
-    padding: {
-      default: spacingVars['--spacing-8'],
-      [STACK_QUERY]: spacingVars['--spacing-4'],
-    },
-  },
-  imageCell: {
-    // Fill the track: the image's Card is content-width by default.
-    width: '100%',
-    // order:-1 moves the image above the form when stacked.
-    order: {
-      default: 0,
-      [STACK_QUERY]: -1,
-    },
-  },
-  coverImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover' as const,
-  },
-});
+// The container query lives in a plain <style> tag so it needs NO CSS compiler.
+// - Pad the grid, not the Card: the form's Section escapes Card's
+//   --container-padding-* vars, which would cancel the inset on the form side.
+//   container-type makes the grid the query container for the stack point.
+// - repeat:'fit' (auto-fit) collapses the two columns to one below 511px; the
+//   query reorders the image (order:-1) and tightens the inset at that point,
+//   keyed to the card width (not the window) so it never desyncs.
+const LOGIN_SPLIT_CSS = `
+.login-split-grid {
+  container-type: inline-size;
+  container-name: login-split;
+  padding: var(--spacing-8);
+}
+.login-split-image {
+  width: 100%;
+  order: 0;
+}
+@container login-split (max-width: 511px) {
+  .login-split-grid {
+    padding: var(--spacing-4);
+  }
+  .login-split-image {
+    order: -1;
+  }
+}
+`;
 
 export default function LoginTwoColumn() {
   const [email, setEmail] = useState('');
@@ -97,15 +98,16 @@ export default function LoginTwoColumn() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
+    <Center axis="both" style={pageStyle}>
+      <style>{LOGIN_SPLIT_CSS}</style>
       <VStack gap={4} width="100%">
-        <div {...stylex.props(styles.cardWrap)}>
+        <div style={cardWrap}>
           <Card padding={0} width="100%">
             <Grid
               columns={{minWidth: COLUMN_MIN_WIDTH, repeat: 'fit'}}
               gap={8}
               align="stretch"
-              xstyle={styles.splitGrid}>
+              className="login-split-grid">
               {/* Form */}
               <Section variant="transparent" padding={0} height="100%">
                 <VStack gap={4} height="100%">
@@ -237,14 +239,14 @@ export default function LoginTwoColumn() {
 
               {/* Cover image — the transparent Card clips it to rounded
                   corners (overflow:clip + radius), so the image needs no radius. */}
-              <div {...stylex.props(styles.imageCell)}>
+              <div className="login-split-image">
                 <Card
                   variant="transparent"
                   padding={0}
                   width="100%"
                   height="100%">
                   <img
-                    {...stylex.props(styles.coverImage)}
+                    style={coverImage}
                     src={COVER_IMAGE_URL}
                     alt="Two people working at a desk"
                   />

package/templates/pages/login-sso/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {ShieldCheckIcon} from '@heroicons/react/24/outline';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
@@ -16,7 +15,6 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Avatar} from '@astryxdesign/core/Avatar';
-import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -24,15 +22,13 @@ import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const BG_URL = 'https://lookaside.facebook.com/assets/astryx/building.png';
 
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundImage: `url(${BG_URL})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    padding: spacingVars['--spacing-6'],
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundImage: `url(${BG_URL})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  padding: 'var(--spacing-6)',
+};
 
 type SSOProvider = {
   name: string;
@@ -102,7 +98,7 @@ export default function LoginSSO() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
+    <Center axis="both" style={pageStyle}>
       <Card padding={8} width="100%" maxWidth={400}>
         <VStack gap={4} hAlign="stretch">
           {/* ── Step 1: Email entry ── */}