@astryxdesign/cli 0.0.15 → 0.1.0-canary.0b5b49f

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

@@ -2,22 +2,21 @@
 
 'use client';
 
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
+import {useCallback, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
 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 +27,75 @@ 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 styles = stylex.create({
+  outlinePanel: {
+    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"
+            xstyle={styles.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 +103,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>
@@ -111,7 +146,9 @@ export default function TechnicalDocumentationPage() {
             </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 +159,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,9 +170,11 @@ 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">
@@ -143,42 +184,41 @@ export default function TechnicalDocumentationPage() {
                   Astryx uses StyleX for styling. Add the compiler plugin to your
                   build configuration.
                 </Text>
-                <Card padding={0}>
-                  <CodeBlock
-                    code="npm install @stylexjs/babel-plugin"
-                    language="bash"
-                  />
-                </Card>
+                <CodeBlock
+                  code="npm install @stylexjs/babel-plugin"
+                  language="bash"
+                  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 +227,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 +238,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/form-two-column/page.tsx

@@ -18,13 +18,10 @@ 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/illustration-horizontal-1.png';
-
-// ─────────────────────────────────────────────────────────────
-// Constants
-// ─────────────────────────────────────────────────────────────
+  'https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png';
 
 const INQUIRY_REASONS = [
   'New business',
@@ -51,13 +48,9 @@ const CONTACT_COLUMNS = [
   {label: 'Press & partnerships', email: 'press@company.com'},
 ];
 
-// ─────────────────────────────────────────────────────────────
-// Styles
-// ─────────────────────────────────────────────────────────────
-
-// The only custom styling is fitting the illustration inside its AspectRatio
-// box without distortion (contain, not cover — it's line art, don't crop it).
-// No objectFit prop on AspectRatio, and there's no Image primitive (#2582).
+// 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%',
@@ -65,14 +58,12 @@ const styles = stylex.create({
   illustrationImg: {
     width: '100%',
     height: '100%',
-    objectFit: 'contain',
+    objectFit: 'cover',
+    borderRadius: radiusVars['--radius-container'],
+    overflow: 'hidden',
   },
 });
 
-// ─────────────────────────────────────────────────────────────
-// Page
-// ─────────────────────────────────────────────────────────────
-
 /**
  * Form (Two-column) — marketing contact form template.
  *
@@ -105,15 +96,10 @@ export default function FormTwoColumnPage() {
 
   return (
     <Center xstyle={styles.page}>
-      <Section
-        maxWidth={1100}
-        width="100%"
-        padding={10}
-        variant="transparent">
+      <Section maxWidth={1100} width="100%" padding={10} variant="transparent">
         <VStack gap={10}>
-          {/* ── Top: two-column, stacks to one column below ~520px ── */}
+          {/* Two-column; stacks to one column below ~520px. */}
           <Grid columns={{minWidth: 320}} align="center" gap={10}>
-            {/* Left: headline + description + illustration */}
             <VStack gap={6}>
               <VStack gap={3}>
                 <Text type="display-1" as="h1">
@@ -127,13 +113,12 @@ export default function FormTwoColumnPage() {
               <AspectRatio ratio={4 / 3}>
                 <img
                   src={ILLUSTRATION_URL}
-                  alt="Person with a laptop and a lightbulb idea"
+                  alt="Two people working at a desk"
                   {...stylex.props(styles.illustrationImg)}
                 />
               </AspectRatio>
             </VStack>
 
-            {/* Right: form on a card */}
             <Card padding={8}>
               <VStack gap={4}>
                 <Text type="label">Your details</Text>
@@ -188,9 +173,7 @@ export default function FormTwoColumnPage() {
                 </Grid>
 
                 <VStack gap={2}>
-                  <Text type="label">
-                    What are you reaching out about?
-                  </Text>
+                  <Text type="label">What are you reaching out about?</Text>
                   <HStack gap={2} wrap="wrap">
                     {INQUIRY_REASONS.map(reason => (
                       <Token
@@ -238,7 +221,7 @@ export default function FormTwoColumnPage() {
             </Card>
           </Grid>
 
-          {/* ── Bottom: contact strip (stacks below ~440px) ── */}
+          {/* Contact strip; stacks below ~440px. */}
           <VStack gap={6}>
             <Divider />
             <Grid columns={{minWidth: 200}} gap={6}>