@astryxdesign/cli 0.1.0 → 0.1.1-canary.129bf0e

package/templates/pages/documentation-technical/page.tsx

@@ -2,22 +2,20 @@
 
 'use client';
 
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
+import {useCallback, useState, type CSSProperties} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 import {List, ListItem} from '@astryxdesign/core/List';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
+import {Selector} from '@astryxdesign/core/Selector';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
+import {Outline, type OutlineItem} from '@astryxdesign/core/Outline';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {
   SparklesIcon,
   ClipboardDocumentIcon,
@@ -28,35 +26,73 @@ import {
 // Main component
 // ---------------------------------------------------------------------------
 
+const OUTLINE_ITEMS: OutlineItem[] = [
+  {id: 'prerequisites', label: 'Prerequisites', level: 2},
+  {id: 'install-package', label: 'Install the package', level: 2},
+  {id: 'configure-theming', label: 'Configure theming', level: 2},
+  {id: 'next-steps', label: 'Next steps', level: 2},
+];
+
+const OUTLINE_OPTIONS = OUTLINE_ITEMS.map(item => ({
+  value: item.id,
+  label: item.label,
+}));
+
+const outlinePanel: CSSProperties = {
+  position: 'sticky',
+  top: 24,
+  alignSelf: 'start',
+  paddingBlockStart: 120,
+};
+
 export default function TechnicalDocumentationPage() {
+  const [activeId, setActiveId] = useState<string | undefined>(
+    OUTLINE_ITEMS[0]?.id,
+  );
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  const scrollToId = useCallback((id: string) => {
+    setActiveId(id);
+    const target = document.getElementById(id);
+    if (target != null) {
+      target.scrollIntoView({behavior: 'smooth', block: 'start'});
+      window.history.pushState(null, '', `#${id}`);
+    }
+  }, []);
+
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={960}
-      start={
-        <LayoutPanel hasDivider padding={0}>
-          <SideNav header={<SideNavHeading heading="Product Name" />}>
-            <SideNavSection title="Navigation" isHeaderHidden>
-              <SideNavItem label="Home" />
-              <SideNavItem label="Getting started" isSelected />
-            </SideNavSection>
-          </SideNav>
-        </LayoutPanel>
+      end={
+        isMobile ? undefined : (
+          <LayoutPanel
+            isScrollable={false}
+            label="On this page"
+            role="complementary"
+            style={outlinePanel}>
+            <Outline items={OUTLINE_ITEMS} onActiveIdChange={setActiveId} />
+          </LayoutPanel>
+        )
       }
       content={
-        <LayoutContent padding={8}>
+        <LayoutContent isScrollable={false} padding={8}>
           <VStack gap={8}>
             <VStack gap={2}>
-              <Text type="display-1">
-                Getting started with Product Name
-              </Text>
+              <Text type="display-1">Getting started with Product Name</Text>
               <Text type="supporting" color="secondary">
                 Last updated March 30, 2026
               </Text>
-              <Text type="body">
-                Install the package, configure your theme, and build your first
-                component in three steps.
-              </Text>
+              {isMobile && (
+                <Selector
+                  label="On this page"
+                  isLabelHidden
+                  options={OUTLINE_OPTIONS}
+                  value={activeId}
+                  onChange={scrollToId}
+                  width="100%"
+                />
+              )}
             </VStack>
 
             <Card>
@@ -64,11 +100,7 @@ export default function TechnicalDocumentationPage() {
                 <HStack gap={2} vAlign="center">
                   <StackItem size="fill">
                     <HStack gap={2} vAlign="center">
-                      <Icon
-                        icon={SparklesIcon}
-                        size="sm"
-                        color="secondary"
-                      />
+                      <Icon icon={SparklesIcon} size="sm" color="secondary" />
                       <Text type="body" weight="semibold">
                         AI Assistance
                       </Text>
@@ -103,15 +135,17 @@ export default function TechnicalDocumentationPage() {
                 </HStack>
                 <Text type="body" color="secondary">
                   Help me get set up with Product Name. Based on my project, do
-                  the following: 1. Install @astryxdesign/core and the StyleX compiler.
-                  2. Wrap my app in ThemeProvider. 3. Replace one existing
-                  component with an Astryx equivalent.
+                  the following: 1. Install @astryxdesign/core and the StyleX
+                  compiler. 2. Wrap my app in ThemeProvider. 3. Replace one
+                  existing component with an Astryx equivalent.
                 </Text>
               </VStack>
             </Card>
 
             <VStack gap={4}>
-              <Heading level={2}>Prerequisites</Heading>
+              <Heading id="prerequisites" level={2}>
+                Prerequisites
+              </Heading>
               <List density="compact" listStyle="disc">
                 <ListItem label="Node.js 18+" />
                 <ListItem label="React 18 or 19" />
@@ -122,7 +156,9 @@ export default function TechnicalDocumentationPage() {
             <Divider />
 
             <VStack gap={4}>
-              <Heading level={2}>Install the package</Heading>
+              <Heading id="install-package" level={2}>
+                Install the package
+              </Heading>
               <Text type="body">
                 Every project starts with installing the core package. This
                 gives you access to all components, tokens, and utilities.
@@ -131,54 +167,57 @@ export default function TechnicalDocumentationPage() {
                 <Text type="body" weight="bold">
                   Step 1: Install the core package
                 </Text>
-                <Card padding={0}>
-                  <CodeBlock code="npm install @astryxdesign/core" language="bash" />
-                </Card>
+                <CodeBlock
+                  code="npm install @astryxdesign/core"
+                  language="bash"
+                  width="100%"
+                />
               </VStack>
               <VStack gap={2}>
                 <Text type="body" weight="bold">
-                  Step 2: Add the StyleX compiler
+                  Step 2: Import the precompiled styles
                 </Text>
                 <Text type="body" color="secondary">
-                  Astryx uses StyleX for styling. Add the compiler plugin to your
-                  build configuration.
+                  Astryx ships precompiled CSS, so there is no build plugin to
+                  configure. Import the reset and component stylesheets once at
+                  your app entry point.
                 </Text>
-                <Card padding={0}>
-                  <CodeBlock
-                    code="npm install @stylexjs/babel-plugin"
-                    language="bash"
-                  />
-                </Card>
+                <CodeBlock
+                  code={`import '@astryxdesign/core/reset.css';
+import '@astryxdesign/core/astryx.css';`}
+                  language="tsx"
+                  width="100%"
+                />
               </VStack>
               <VStack gap={2}>
                 <Text type="body" weight="bold">
                   Step 3: Import your first component
                 </Text>
-                <Card padding={0}>
-                  <CodeBlock
-                    code={`import { Button } from '@astryxdesign/core/Button';
+                <CodeBlock
+                  code={`import { Button } from '@astryxdesign/core/Button';
 
 export default function App() {
   return <Button label="Hello Astryx" variant="primary" />;
 }`}
-                    language="tsx"
-                  />
-                </Card>
+                  language="tsx"
+                  width="100%"
+                />
               </VStack>
             </VStack>
 
             <Divider />
 
             <VStack gap={4}>
-              <Heading level={2}>Configure theming</Heading>
+              <Heading id="configure-theming" level={2}>
+                Configure theming
+              </Heading>
               <Text type="body">
                 Astryx ships with a default theme that works out of the box. To
                 customize colors, typography, and spacing, wrap your app in a
                 theme provider.
               </Text>
-              <Card padding={0}>
-                <CodeBlock
-                  code={`import { ThemeProvider } from '@astryxdesign/core/Theme';
+              <CodeBlock
+                code={`import { ThemeProvider } from '@astryxdesign/core/Theme';
 
 export default function App({ children }) {
   return (
@@ -187,9 +226,9 @@ export default function App({ children }) {
     </ThemeProvider>
   );
 }`}
-                  language="tsx"
-                />
-              </Card>
+                language="tsx"
+                width="100%"
+              />
               <Text type="body" color="secondary">
                 See the theming guide for the full list of customizable tokens.
               </Text>
@@ -198,7 +237,9 @@ export default function App({ children }) {
             <Divider />
 
             <VStack gap={4}>
-              <Heading level={2}>Next steps</Heading>
+              <Heading id="next-steps" level={2}>
+                Next steps
+              </Heading>
               <List density="compact" listStyle="disc">
                 <ListItem label="Fundamental concepts — How theming, layout, and composition work" />
                 <ListItem label="Component API reference — Props, variants, and examples for every component" />

package/templates/pages/editor/page.tsx

@@ -2,9 +2,7 @@
 
 'use client';
 
-import {useState, useCallback} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {colorVars} from '@astryxdesign/core/theme/tokens.stylex';
+import {useState, useCallback, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
@@ -307,42 +305,32 @@ function defaultProps(type: BlockType): Record<string, unknown> {
 // the responsive canvas max-width, a selection ring on the active block card,
 // and the circular icon chip's surface.
 
-const editorStyles = stylex.create({
-  // Fill the window. Layout height="fill" is height:100%, which only resolves
-  // against a definite height — and the host's <html>/<body> don't set one, so
-  // the layout anchors a definite viewport height itself. No background; the
-  // host owns the page surface.
-  page: {height: '100dvh'},
-  // Pin the panel to a fixed 320px on desktop (so it doesn't resize to its
-  // content when switching tabs) and full width on mobile, where it moves into
-  // the header slot. LayoutPanel width is a single fixed value with no
-  // responsive form, and this xstyle wins over the width prop.
-  panelWidth: {
-    width: {default: 320, '@media (max-width: 768px)': '100%'},
-    flexShrink: 0,
-  },
-  // Canvas reflows to the chosen viewport width; VStack has no maxWidth prop.
-  canvas: (maxWidth: number) => ({
-    maxWidth,
-    width: '100%',
-    marginInline: 'auto',
-  }),
-  clickable: {
-    cursor: 'pointer',
-  },
-  // Selection ring on the active block — Card has no `isSelected` state.
-  selectedCard: {
-    outline: '2px solid',
-    outlineColor: colorVars['--color-border-blue'],
-    outlineOffset: -2,
-  },
-  // Circular muted chip behind the CTA icon — Center handles the centering
-  // and sizing; only the surface (radius + fill) needs custom CSS.
-  iconCircle: {
-    borderRadius: '50%',
-    backgroundColor: colorVars['--color-background-muted'],
-  },
+// Fill the window. Layout height="fill" is height:100%, which only resolves
+// against a definite height — and the host's <html>/<body> don't set one, so
+// the layout anchors a definite viewport height itself. No background; the
+// host owns the page surface.
+const pageStyle: CSSProperties = {height: '100dvh'};
+// Canvas reflows to the chosen viewport width; VStack has no maxWidth prop.
+const canvasStyle = (maxWidth: number): CSSProperties => ({
+  maxWidth,
+  width: '100%',
+  marginInline: 'auto',
 });
+const clickable: CSSProperties = {
+  cursor: 'pointer',
+};
+// Selection ring on the active block — Card has no `isSelected` state.
+const selectedCard: CSSProperties = {
+  outline: '2px solid',
+  outlineColor: 'var(--color-border-blue)',
+  outlineOffset: -2,
+};
+// Circular muted chip behind the CTA icon — Center handles the centering
+// and sizing; only the surface (radius + fill) needs custom CSS.
+const iconCircle: CSSProperties = {
+  borderRadius: '50%',
+  backgroundColor: 'var(--color-background-muted)',
+};
 
 // ---------------------------------------------------------------------------
 // Properties Form
@@ -477,15 +465,15 @@ function BlockPreview({
   onSelect: () => void;
 }) {
   const {type, props} = block;
-  const cardXstyle = [
-    editorStyles.clickable,
-    isSelected && editorStyles.selectedCard,
-  ];
+  const cardStyle: CSSProperties = {
+    ...clickable,
+    ...(isSelected ? selectedCard : null),
+  };
 
   switch (type) {
     case 'hero':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <Heading level={2}>
               {(props.heading as string) || 'Hero Heading'}
@@ -503,7 +491,7 @@ function BlockPreview({
     case 'text':
       if (props.heading) {
         return (
-          <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+          <Card padding={6} style={cardStyle} onClick={onSelect}>
             <EmptyState
               title={props.heading as string}
               description={props.description as string}
@@ -521,7 +509,7 @@ function BlockPreview({
         );
       }
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <Text type="body">
             {(props.content as string) || 'Text content goes here'}
           </Text>
@@ -530,7 +518,7 @@ function BlockPreview({
 
     case 'image':
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <EmptyState
             title="Image Block"
             description="Drop an image or enter a URL"
@@ -542,7 +530,7 @@ function BlockPreview({
 
     case 'button':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <Center>
             <Button
               label={(props.label as string) || 'Button'}
@@ -559,7 +547,7 @@ function BlockPreview({
     case 'features': {
       const items = (props.items as Transaction[]) || [];
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <HStack gap={3} vAlign="start" hAlign="between">
               <VStack gap={1}>
@@ -589,7 +577,7 @@ function BlockPreview({
       const cardItems =
         (props.cards as Array<{title: string; description: string}>) || [];
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <Heading level={3}>Cards</Heading>
             <Divider />
@@ -609,9 +597,9 @@ function BlockPreview({
 
     case 'cta':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <HStack gap={4} vAlign="start">
-            <Center width={40} height={40} xstyle={editorStyles.iconCircle}>
+            <Center width={40} height={40} style={iconCircle}>
               <Icon icon={LockClosedIcon} color="secondary" />
             </Center>
             <VStack gap={1}>
@@ -828,7 +816,7 @@ export default function EditorPage() {
     <LayoutPanel
       hasDivider={!isMobile}
       padding={0}
-      xstyle={editorStyles.panelWidth}>
+      style={{width: isMobile ? '100%' : 320, flexShrink: 0}}>
       <VStack gap={4}>
         {/* Panel Header */}
         <Section variant="transparent" padding={4}>
@@ -919,7 +907,7 @@ export default function EditorPage() {
   return (
     <>
       <Layout
-        xstyle={editorStyles.page}
+        style={pageStyle}
         height="fill"
         header={isMobile ? sidebar : undefined}
         start={isMobile ? undefined : sidebar}
@@ -927,7 +915,7 @@ export default function EditorPage() {
           <LayoutContent padding={8}>
             <VStack
               gap={4}
-              xstyle={editorStyles.canvas(VIEWPORT_MAX[viewport])}>
+              style={canvasStyle(VIEWPORT_MAX[viewport])}>
               {blocks.length > 0 ? (
                 blocks.map(block => (
                   <BlockPreview

package/templates/pages/file-explorer/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, LayoutContent} from '@astryxdesign/core/Layout';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {List, ListItem} from '@astryxdesign/core/List';
@@ -145,10 +144,10 @@ const FILESYSTEM: FileSystemItem[] = [
         children: [{id: 'react-index', name: 'index.js', type: 'file'}],
       },
       {
-        id: 'stylex',
-        name: '@stylexjs',
+        id: 'react-dom',
+        name: 'react-dom',
         type: 'folder',
-        children: [{id: 'stylex-index', name: 'stylex.js', type: 'file'}],
+        children: [{id: 'react-dom-index', name: 'index.js', type: 'file'}],
       },
     ],
   },
@@ -260,13 +259,11 @@ const FILESYSTEM: FileSystemItem[] = [
   },
 ];
 
-const styles = stylex.create({
-  page: {height: '100dvh'},
-  columnRow: {overflowX: 'auto', overflowY: 'hidden'},
-  scrollable: {overflowY: 'auto'},
-  fixedColumn: {flexShrink: 0},
-  detailColumn: {flexGrow: 1, flexShrink: 0, flexBasis: 320},
-});
+const page: CSSProperties = {height: '100dvh'};
+const columnRow: CSSProperties = {overflowX: 'auto', overflowY: 'hidden'};
+const scrollable: CSSProperties = {overflowY: 'auto'};
+const fixedColumn: CSSProperties = {flexShrink: 0};
+const detailColumn: CSSProperties = {flexGrow: 1, flexShrink: 0, flexBasis: 320};
 
 function findItem(items: FileSystemItem[], id: string): FileSystemItem | null {
   for (const item of items) {
@@ -348,7 +345,7 @@ export default function FileExplorerPage() {
 
   return (
     <Layout
-      xstyle={styles.page}
+      style={page}
       height="fill"
       header={
         <Toolbar
@@ -448,7 +445,7 @@ export default function FileExplorerPage() {
       }
       content={
         <LayoutContent padding={0} isScrollable={false}>
-          <HStack height="100%" xstyle={styles.columnRow}>
+          <HStack height="100%" style={columnRow}>
             {columns.map((col, colIndex) => {
               const showDivider =
                 colIndex < columns.length - 1 || selectedFile != null;
@@ -459,7 +456,7 @@ export default function FileExplorerPage() {
                   padding={2}
                   variant="transparent"
                   dividers={showDivider ? ['end'] : undefined}
-                  xstyle={[styles.scrollable, styles.fixedColumn]}>
+                  style={{...scrollable, ...fixedColumn}}>
                   <List density="compact" hasDividers={false}>
                     {col.items.map(item => {
                       const isSelected = col.selectedId === item.id;
@@ -506,7 +503,7 @@ export default function FileExplorerPage() {
               <Section
                 padding={6}
                 variant="transparent"
-                xstyle={[styles.scrollable, styles.detailColumn]}>
+                style={{...scrollable, ...detailColumn}}>
                 <VStack gap={4} hAlign="center">
                   <Avatar name={selectedFile.name} size={96} />
                   <VStack gap={1} hAlign="center">

package/templates/pages/form-two-column/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} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Section} from '@astryxdesign/core/Section';
@@ -18,7 +17,6 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Card} from '@astryxdesign/core/Card';
 import {Selector} from '@astryxdesign/core/Selector';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const ILLUSTRATION_URL =
   'https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png';
@@ -51,18 +49,16 @@ const CONTACT_COLUMNS = [
 // AspectRatio has no objectFit/radius prop and there's no Image primitive
 // (#2582), so the cover photo is styled directly. overflow:hidden masks the
 // cover crop to the rounded corners.
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-  },
-  illustrationImg: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    borderRadius: radiusVars['--radius-container'],
-    overflow: 'hidden',
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+};
+const illustrationImg: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'var(--radius-container)',
+  overflow: 'hidden',
+};
 
 /**
  * Form (Two-column) — marketing contact form template.
@@ -95,7 +91,7 @@ export default function FormTwoColumnPage() {
   const handleSubmit = () => setSubmitted(true);
 
   return (
-    <Center xstyle={styles.page}>
+    <Center style={pageStyle}>
       <Section maxWidth={1100} width="100%" padding={10} variant="transparent">
         <VStack gap={10}>
           {/* Two-column; stacks to one column below ~520px. */}
@@ -114,7 +110,7 @@ export default function FormTwoColumnPage() {
                 <img
                   src={ILLUSTRATION_URL}
                   alt="Two people working at a desk"
-                  {...stylex.props(styles.illustrationImg)}
+                  style={illustrationImg}
                 />
               </AspectRatio>
             </VStack>

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

@@ -2,7 +2,7 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -35,18 +35,16 @@ const IMAGES = [
 // because Astryx has no image primitive — AspectRatio exposes no objectFit or
 // radius props and there's no Image. Tracked in issue #2582; replace these
 // with component props once it lands.
-const styles = stylex.create({
-  // Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
-  galleryImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-  // Rounds the image corners. No radius prop on AspectRatio (#2582).
-  galleryImageClip: {
-    borderRadius: 'var(--radius-container)',
-  },
-});
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+const galleryImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
+// Rounds the image corners. No radius prop on AspectRatio (#2582).
+const galleryImageClip: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+};
 
 export default function GalleryHero() {
   return (
@@ -88,9 +86,9 @@ export default function GalleryHero() {
                 <AspectRatio
                   key={image.src}
                   ratio={4 / 5}
-                  xstyle={styles.galleryImageClip}>
+                  style={galleryImageClip}>
                   <img
-                    {...stylex.props(styles.galleryImage)}
+                    style={galleryImage}
                     src={image.src}
                     alt={image.alt}
                   />