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

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}

package/templates/pages/documentation/page.tsx

@@ -2,27 +2,23 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
-import {Text} from '@astryxdesign/core/Text';
+import type {CSSProperties} from 'react';
+import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
+import {ClickableCard} from '@astryxdesign/core/ClickableCard';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
-import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
 
-const styles = stylex.create({
-  previewCard: {
-    borderRadius: radiusVars['--radius-container'],
-    cursor: 'pointer',
-  },
-});
+const previewCard: CSSProperties = {
+  borderRadius: 'var(--radius-element)',
+};
+// Negative margin offsets each card's 8px padding so the grid content stays
+// visually aligned while giving every card a padded hover/click target.
+const cardGrid: CSSProperties = {
+  margin: -8,
+};
 
 // ---------------------------------------------------------------------------
 // Data
@@ -213,30 +209,12 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
-      start={
-        <LayoutPanel hasDivider padding={0}>
-          <SideNav header={<SideNavHeading heading="Product Name" />}>
-            <SideNavSection title="Navigation" isHeaderHidden>
-              <SideNavItem label="Home" isSelected />
-              <SideNavItem label="Getting started" />
-            </SideNavSection>
-
-            {COMPONENT_CATEGORIES.map(category => (
-              <SideNavSection key={category.label} title={category.label}>
-                {category.items.map(item => (
-                  <SideNavItem key={item.key} label={item.name} />
-                ))}
-              </SideNavSection>
-            ))}
-          </SideNav>
-        </LayoutPanel>
-      }
       content={
         <LayoutContent padding={8}>
           <VStack gap={10}>
-            <Card variant="cyan" padding={10}>
+            <Card variant="gray" padding={10}>
               <HStack gap={8} vAlign="center">
                 <StackItem size="fill">
                   <VStack gap={4}>
@@ -246,11 +224,7 @@ export default function DocumentationOverviewPage() {
                       beautiful, accessible products.
                     </Text>
                     <HStack>
-                      <Button
-                        label="Get started"
-                        variant="primary"
-                        size="lg"
-                      />
+                      <Button label="Get started" variant="primary" size="lg" />
                     </HStack>
                   </VStack>
                 </StackItem>
@@ -260,25 +234,35 @@ export default function DocumentationOverviewPage() {
 
             {COMPONENT_CATEGORIES.map(category => (
               <VStack key={category.label} gap={4}>
-                <Text type="display-2">{category.label}</Text>
-                <Grid columns={{minWidth: 260}} gap={8}>
+                <Heading level={2}>{category.label}</Heading>
+                <Grid
+                  columns={{minWidth: 260}}
+                  gap={2}
+                  style={cardGrid}>
                   {category.items.map(item => (
-                    <VStack key={item.key} gap={3}>
-                      <Card
-                        variant="muted"
-                        padding={0}
-                        minHeight={160}
-                        xstyle={styles.previewCard}
-                      />
-                      <VStack gap={0.5}>
-                        <Text type="body" weight="bold">
-                          {item.name}
-                        </Text>
-                        <Text type="body" color="secondary">
-                          {item.desc}
-                        </Text>
+                    <ClickableCard
+                      key={item.key}
+                      label={`Open ${item.name}`}
+                      onClick={() => {}}
+                      variant="transparent"
+                      padding={2}>
+                      <VStack gap={3}>
+                        <Card
+                          variant="muted"
+                          padding={0}
+                          minHeight={160}
+                          style={previewCard}
+                        />
+                        <VStack gap={0.5}>
+                          <Text type="body" weight="bold">
+                            {item.name}
+                          </Text>
+                          <Text type="body" color="secondary" maxLines={3}>
+                            {item.desc}
+                          </Text>
+                        </VStack>
                       </VStack>
-                    </VStack>
+                    </ClickableCard>
                   ))}
                 </Grid>
               </VStack>

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

@@ -2,14 +2,7 @@
 
 'use client';
 
-import {useState, useMemo} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
+import {useCallback, useState, useMemo, type CSSProperties} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {IconButton} from '@astryxdesign/core/IconButton';
@@ -20,8 +13,10 @@ import {Token} from '@astryxdesign/core/Token';
 import {Banner} from '@astryxdesign/core/Banner';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
+import {Selector} from '@astryxdesign/core/Selector';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Tooltip} from '@astryxdesign/core/Tooltip';
@@ -29,15 +24,31 @@ import {Table, pixel} from '@astryxdesign/core/Table';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
+import {Outline, type OutlineItem} from '@astryxdesign/core/Outline';
 import {
   ArrowTopRightOnSquareIcon,
   ArrowsPointingOutIcon,
   PlusIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  tabListFlush: {marginInlineStart: '-12px'},
-});
+const tabListFlush: CSSProperties = {marginInlineStart: '-12px'};
+const outlinePanel: CSSProperties = {
+  position: 'sticky',
+  top: 24,
+  alignSelf: 'start',
+  paddingBlockStart: 120,
+};
+
+const COMPONENT_OUTLINE_ITEMS: OutlineItem[] = [
+  {id: 'usage', label: 'Usage', level: 2},
+  {id: 'best-practices', label: 'Best practices', level: 3},
+  {id: 'examples', label: 'Examples', level: 2},
+];
+
+const COMPONENT_OUTLINE_OPTIONS = COMPONENT_OUTLINE_ITEMS.map(item => ({
+  value: item.id,
+  label: item.label,
+}));
 
 // ---------------------------------------------------------------------------
 // DialogPreview — stateful dialog preview for component previews
@@ -493,14 +504,21 @@ function getComponentDocs(key: string) {
 // ComponentDetailView
 // ---------------------------------------------------------------------------
 
-function ComponentDetailView({
-  activeNav,
-  nav,
-}: {
-  activeNav: string;
-  nav: React.ReactNode;
-}) {
+function ComponentDetailView({activeNav}: {activeNav: string}) {
   const [exampleTabs, setExampleTabs] = useState<Record<string, string>>({});
+  const [activeId, setActiveId] = useState<string | undefined>(
+    COMPONENT_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}`);
+    }
+  }, []);
 
   const EXAMPLE_PREVIEWS: Record<string, React.ReactNode[]> = {
     button: [
@@ -556,25 +574,42 @@ function ComponentDetailView({
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={960}
-      start={
-        <LayoutPanel hasDivider padding={0}>
-          {nav}
-        </LayoutPanel>
+      end={
+        isMobile ? undefined : (
+          <LayoutPanel
+            isScrollable={false}
+            label="On this page"
+            role="complementary"
+            style={outlinePanel}>
+            <Outline
+              items={COMPONENT_OUTLINE_ITEMS}
+              onActiveIdChange={setActiveId}
+            />
+          </LayoutPanel>
+        )
       }
       content={
-        <LayoutContent padding={8}>
+        <LayoutContent isScrollable={false} padding={8}>
           <VStack gap={8}>
             <VStack gap={2}>
               <Text type="display-1">{getComponentName(activeNav)}</Text>
               <Text type="supporting" color="secondary">
                 March 30, 2026 · Updated 5:40 p.m. PST
               </Text>
+              {isMobile && (
+                <Selector
+                  label="On this page"
+                  isLabelHidden
+                  options={COMPONENT_OUTLINE_OPTIONS}
+                  value={activeId}
+                  onChange={scrollToId}
+                  width="100%"
+                />
+              )}
             </VStack>
 
-            <Divider />
-
             <Card variant="muted" padding={0}>
               <Center height={360}>
                 {COMPONENT_PREVIEWS[activeNav] ?? (
@@ -586,13 +621,18 @@ function ComponentDetailView({
             </Card>
 
             <VStack gap={4}>
-              <Heading level={2}>Usage</Heading>
+              <Heading id="usage" level={2}>
+                Usage
+              </Heading>
               <Text type="large" weight="normal">
                 {docs.usage}
               </Text>
-              <Heading level={3}>Best practices</Heading>
+              <Heading id="best-practices" level={3}>
+                Best practices
+              </Heading>
               <Table
                 data={docs.bestPractices as Record<string, unknown>[]}
+                dividers="none"
                 columns={[
                   {
                     key: 'type',
@@ -616,14 +656,15 @@ function ComponentDetailView({
                   },
                 ]}
                 density="spacious"
-                dividers="rows"
               />
             </VStack>
 
             <Divider />
 
             <VStack gap={4}>
-              <Heading level={2}>Examples</Heading>
+              <Heading id="examples" level={2}>
+                Examples
+              </Heading>
               <Text type="large" weight="normal">
                 Explore common configurations, variations, and states for this
                 component.
@@ -675,17 +716,24 @@ function ComponentDetailView({
                         <TabList
                           value={activeTab}
                           onChange={value =>
-                            setExampleTabs(prev => ({...prev, [tabKey]: value}))
+                            setExampleTabs(prev => ({
+                              ...prev,
+                              [tabKey]: value,
+                            }))
                           }
                           size="sm"
-                          xstyle={styles.tabListFlush}>
+                          style={tabListFlush}>
                           <Tab value="description" label="Description" />
                           <Tab value="code" label="Code" />
                         </TabList>
                         {activeTab === 'description' ? (
                           <Text type="body">{example.description}</Text>
                         ) : (
-                          <CodeBlock code={example.code} language="tsx" />
+                          <CodeBlock
+                            code={example.code}
+                            language="tsx"
+                            width="100%"
+                          />
                         )}
                       </VStack>
                     </Section>
@@ -705,31 +753,5 @@ function ComponentDetailView({
 // ---------------------------------------------------------------------------
 
 export default function DesignDocumentationPage() {
-  const [activePage, setActivePage] = useState<string>('button');
-
-  return (
-    <ComponentDetailView
-      activeNav={activePage}
-      nav={
-        <SideNav header={<SideNavHeading heading="Product Name" />}>
-          {COMPONENT_CATEGORIES.map(category => (
-            <SideNavSection key={category.label} title={category.label}>
-              {category.items.map(item => (
-                <SideNavItem
-                  key={item.key}
-                  label={item.name}
-                  isSelected={activePage === item.key}
-                  onClick={
-                    item.key === 'button'
-                      ? () => setActivePage(item.key)
-                      : undefined
-                  }
-                />
-              ))}
-            </SideNavSection>
-          ))}
-        </SideNav>
-      }
-    />
-  );
+  return <ComponentDetailView activeNav="button" />;
 }