@astryxdesign/cli 0.1.1 → 0.1.2-canary.2149fa3

package/templates/pages/shell-side-nav/page.tsx

@@ -0,0 +1,242 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Layout, LayoutContent, LayoutFooter} from '@astryxdesign/core/Layout';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {MoreMenu} from '@astryxdesign/core/MoreMenu';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
+import type {StatusDotVariant} from '@astryxdesign/core/StatusDot';
+import {Card} from '@astryxdesign/core/Card';
+import {Stack, VStack, HStack} from '@astryxdesign/core/Stack';
+import {
+  SparklesIcon,
+  PlusIcon,
+  MagnifyingGlassIcon,
+  BookOpenIcon,
+  Cog6ToothIcon,
+  UserCircleIcon,
+  UserIcon,
+  BuildingOffice2Icon,
+  CodeBracketIcon,
+} from '@heroicons/react/24/outline';
+
+type Conversation = {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+};
+
+type Workspace = {
+  name: string;
+  icon: IconType;
+  chats: Conversation[];
+};
+
+const WORKSPACES: Workspace[] = [
+  {
+    name: 'Personal',
+    icon: UserIcon,
+    chats: [
+      {
+        label: 'Weekend trip planning',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Recipe ideas for the week',
+        status: 'neutral',
+        statusLabel: 'Idle',
+      },
+      {
+        label: 'Book recommendations',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Home workout plan', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Acme Corp',
+    icon: BuildingOffice2Icon,
+    chats: [
+      {label: 'Q3 roadmap draft', status: 'accent', statusLabel: 'In progress'},
+      {
+        label: 'Customer onboarding flow',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Pricing strategy review',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Standup summary', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Open Source',
+    icon: CodeBracketIcon,
+    chats: [
+      {
+        label: 'StyleX migration notes',
+        status: 'accent',
+        statusLabel: 'In progress',
+      },
+      {
+        label: 'Skeleton loading states',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {label: 'Accessibility audit', status: 'error', statusLabel: 'Blocked'},
+      {label: 'Release notes v4.0', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+];
+
+const SELECTED_CHAT = 'StyleX migration notes';
+
+const MESSAGES = [
+  {role: 'assistant', width: '78%', height: 104},
+  {role: 'user', width: '48%', height: 48},
+  {role: 'assistant', width: '64%', height: 132},
+  {role: 'user', width: '38%', height: 40},
+];
+
+function ConversationItem({
+  label,
+  status,
+  statusLabel,
+  isSelected,
+}: {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+  isSelected?: boolean;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const showMenu = isHovered || isMenuOpen;
+
+  return (
+    <Stack
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
+      <SideNavItem
+        label={label}
+        href="#"
+        isSelected={isSelected}
+        endContent={
+          showMenu ? (
+            <MoreMenu
+              size="sm"
+              label="Conversation options"
+              hasAutoFocus={false}
+              onOpenChange={setIsMenuOpen}
+              items={[
+                {label: 'Pin', onClick: () => {}},
+                {label: 'Rename', onClick: () => {}},
+                {label: 'Archive', onClick: () => {}},
+                {label: 'Delete', onClick: () => {}},
+              ]}
+            />
+          ) : (
+            <StatusDot variant={status} label={statusLabel} />
+          )
+        }
+      />
+    </Stack>
+  );
+}
+
+export default function ShellSideNav() {
+  return (
+    <AppShell
+      contentPadding={0}
+      sideNav={
+        <SideNav
+          collapsible
+          resizable={{defaultWidth: 300, minWidth: 220, maxWidth: 420}}
+          header={
+            <SideNavHeading
+              heading="AI Assistant"
+              icon={<NavIcon icon={<Icon icon={SparklesIcon} size="sm" />} />}
+              headingHref="#"
+            />
+          }
+          footer={
+            <SideNavSection title="Account" isHeaderHidden>
+              <SideNavItem label="Settings" icon={Cog6ToothIcon} href="#" />
+              <SideNavItem label="Sarah Chen" icon={UserCircleIcon} href="#" />
+            </SideNavSection>
+          }>
+          <SideNavSection title="Menu" isHeaderHidden>
+            <SideNavItem label="New chat" icon={PlusIcon} href="#" />
+            <SideNavItem label="Search" icon={MagnifyingGlassIcon} href="#" />
+            <SideNavItem label="Library" icon={BookOpenIcon} href="#" />
+          </SideNavSection>
+          <Divider />
+          <SideNavSection title="Workspaces" isHeaderHidden>
+            {WORKSPACES.map(workspace => (
+              <SideNavItem
+                key={workspace.name}
+                label={workspace.name}
+                icon={workspace.icon}
+                collapsible={{defaultIsCollapsed: false}}>
+                <VStack gap={0.5}>
+                  {workspace.chats.map(chat => (
+                    <ConversationItem
+                      key={chat.label}
+                      label={chat.label}
+                      status={chat.status}
+                      statusLabel={chat.statusLabel}
+                      isSelected={chat.label === SELECTED_CHAT}
+                    />
+                  ))}
+                </VStack>
+              </SideNavItem>
+            ))}
+          </SideNavSection>
+        </SideNav>
+      }>
+      <Layout
+        height="fill"
+        contentWidth={768}
+        content={
+          <LayoutContent padding={6}>
+            <VStack gap={5}>
+              {MESSAGES.map((message, mi) => (
+                <HStack
+                  key={mi}
+                  hAlign={message.role === 'assistant' ? 'start' : 'end'}>
+                  <Card
+                    variant="muted"
+                    padding={0}
+                    width={message.width}
+                    height={message.height}
+                  />
+                </HStack>
+              ))}
+            </VStack>
+          </LayoutContent>
+        }
+        footer={
+          <LayoutFooter>
+            <Card variant="muted" padding={0} width="100%" height={56} />
+          </LayoutFooter>
+        }
+      />
+    </AppShell>
+  );
+}

package/templates/pages/shell-side-nav/template.doc.mjs

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Side Nav',
+  displayName: 'Side Nav',
+  description:
+    'A side-nav app shell with a collapsible, resizable SideNav (new chat, search, library, and workspace-grouped conversations with status dots) over static grey-card conversation and composer placeholders.',
+  isReady: true,
+  category: 'Shell - Left Sidebar',
+};

package/templates/pages/shell-top-nav/page.tsx

@@ -0,0 +1,224 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Button} from '@astryxdesign/core/Button';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Stack, VStack} from '@astryxdesign/core/Stack';
+import {
+  ShoppingBagIcon,
+  ShoppingCartIcon,
+  MagnifyingGlassIcon,
+  SparklesIcon,
+  SwatchIcon,
+  TagIcon,
+  HomeModernIcon,
+  FaceSmileIcon,
+  ReceiptPercentIcon,
+  GiftIcon,
+  CloudIcon,
+  BoltIcon,
+  SunIcon,
+  StarIcon,
+  FireIcon,
+  GlobeAltIcon,
+  MoonIcon,
+} from '@heroicons/react/24/outline';
+
+const styles = stylex.create({
+  // Cap + center the page body so wide screens show whitespace gutters.
+  contentMax: {maxWidth: 1100, marginInline: 'auto'},
+  // Lock both mega-menu panels to an identical size. Without this, Shop and
+  // Brands size to their own content (different widths); since both anchor to
+  // the centered nav, switching between them resizes the panel — which reads
+  // as flashing/jumping. Fixed item + featured widths make the panels
+  // pixel-identical so the transition is seamless.
+  megaItems: {gridColumn: '1 / -1', width: 520},
+  megaFeatured: {width: 240},
+});
+
+type MegaItem = {name: string; tagline: string; icon: IconType};
+
+// Shop and Brands each render 8 items — the mega menu's built-in 2-column grid
+// lays them out as 2 columns × 4 rows, alongside a featured card.
+const SHOP_ITEMS: MegaItem[] = [
+  {name: 'New Arrivals', tagline: 'The latest drops', icon: SparklesIcon},
+  {name: 'Womenswear', tagline: 'Dresses, knitwear & more', icon: SwatchIcon},
+  {name: 'Menswear', tagline: 'Shirts, tailoring & more', icon: TagIcon},
+  {name: 'Home', tagline: 'Bedding, lighting & décor', icon: HomeModernIcon},
+  {
+    name: 'Beauty',
+    tagline: 'Skincare, fragrance & makeup',
+    icon: FaceSmileIcon,
+  },
+  {
+    name: 'Accessories',
+    tagline: 'Bags, hats & sunglasses',
+    icon: ShoppingBagIcon,
+  },
+  {name: 'Sale', tagline: 'Up to 50% off', icon: ReceiptPercentIcon},
+  {name: 'Gift Cards', tagline: 'The perfect present', icon: GiftIcon},
+];
+
+const BRAND_ITEMS: MegaItem[] = [
+  {name: 'Aether', tagline: 'Performance essentials', icon: SparklesIcon},
+  {name: 'Northwind', tagline: 'Outdoor & technical', icon: CloudIcon},
+  {name: 'Loomwell', tagline: 'Everyday knitwear', icon: BoltIcon},
+  {name: 'Verdant', tagline: 'Sustainable basics', icon: SunIcon},
+  {name: 'Studio Mara', tagline: 'Modern tailoring', icon: StarIcon},
+  {name: 'Atelier Kos', tagline: 'Limited ateliers', icon: FireIcon},
+  {name: 'Rue & Co', tagline: 'City streetwear', icon: GlobeAltIcon},
+  {name: 'Halden', tagline: 'Minimal staples', icon: MoonIcon},
+];
+
+const CATEGORY_TILES = [
+  'New Arrivals',
+  'Womenswear',
+  'Menswear',
+  'Home & Living',
+  'Beauty',
+  'Accessories',
+];
+
+// Wraps the 8 items in a fixed-width 2-column grid so every mega menu's item
+// area is exactly the same width regardless of its content.
+function MegaItems({items}: {items: MegaItem[]}) {
+  return (
+    <Stack xstyle={styles.megaItems}>
+      <Grid columns={2} gap={2}>
+        {items.map(item => (
+          <TopNavMegaMenuItem
+            key={item.name}
+            title={item.name}
+            description={item.tagline}
+            icon={<Icon icon={item.icon} size="md" color="secondary" />}
+            href="#"
+          />
+        ))}
+      </Grid>
+    </Stack>
+  );
+}
+
+// Pins the featured card to a fixed width so both panels match exactly.
+function MegaFeatured(props: {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  linkLabel: string;
+  linkHref: string;
+}) {
+  return (
+    <Stack xstyle={styles.megaFeatured}>
+      <TopNavMegaMenuFeaturedCard {...props} />
+    </Stack>
+  );
+}
+
+export default function ShellTopNav() {
+  return (
+    <AppShell
+      variant="surface"
+      contentPadding={6}
+      topNav={
+        <TopNav
+          label="Lumen storefront navigation"
+          heading={
+            <TopNavHeading
+              heading="Lumen"
+              logo={
+                <NavIcon icon={<Icon icon={ShoppingBagIcon} size="sm" />} />
+              }
+              href="#"
+            />
+          }
+          centerContent={
+            <>
+              <TopNavMegaMenu
+                label="Shop"
+                items={<MegaItems items={SHOP_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="The Autumn Edit"
+                    description="Layering staples in warm, earthy tones."
+                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-1.png"
+                    imageAlt="Autumn collection lookbook"
+                    linkLabel="Shop the edit"
+                    linkHref="#autumn-edit"
+                  />
+                }
+              />
+              <TopNavMegaMenu
+                label="Brands"
+                items={<MegaItems items={BRAND_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="Meet Studio Mara"
+                    description="Modern tailoring, made to last."
+                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-2.png"
+                    imageAlt="Studio Mara lookbook"
+                    linkLabel="Discover the label"
+                    linkHref="#studio-mara"
+                  />
+                }
+              />
+              <TopNavItem label="Sale" href="#" />
+              <TopNavItem label="Service" href="#" />
+            </>
+          }
+          endContent={
+            <>
+              <IconButton
+                label="Search products"
+                tooltip="Search"
+                variant="ghost"
+                icon={<Icon icon={MagnifyingGlassIcon} size="sm" />}
+              />
+              <Button label="Sign in" variant="ghost" />
+              <Button
+                label="Checkout"
+                variant="primary"
+                icon={<Icon icon={ShoppingCartIcon} size="sm" />}
+                endContent={<Badge label={3} />}
+              />
+            </>
+          }
+        />
+      }>
+      <VStack gap={10} xstyle={styles.contentMax}>
+        <Card variant="muted" padding={0} width="100%" height={360} />
+
+        {[0, 1, 2].map(section => (
+          <VStack key={section} gap={4}>
+            <Card variant="muted" padding={0} width={200} height={24} />
+            <Grid minChildWidth={160} gap={4}>
+              {CATEGORY_TILES.map(tile => (
+                <VStack key={tile} gap={2}>
+                  <Card variant="muted" padding={0} width="100%" height={120} />
+                  <Card variant="muted" padding={0} width="60%" height={14} />
+                </VStack>
+              ))}
+            </Grid>
+          </VStack>
+        ))}
+      </VStack>
+    </AppShell>
+  );
+}

package/templates/pages/shell-top-nav/template.doc.mjs

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Top Nav',
+  displayName: 'Top Nav',
+  description:
+    'A top-nav app shell with a centered TopNav (Shop and Brands mega menus with a 2x4 item grid plus a featured card each, Sale/Service links, and a Checkout button) over static grey-card hero and category sections.',
+  isReady: true,
+  category: 'Shell - Top Nav',
+};

package/templates/pages/theme-showcase/page.tsx

@@ -143,12 +143,6 @@ const styles: Record<string, CSSProperties> = {
     textAlign: 'center' as const,
     maxWidth: 560,
   },
-  // Hero headline painted with the theme's accent-text ink. Text has no
-  // 'accent' color value, so we set the dedicated --color-text-accent token
-  // directly (distinct from --color-accent / the 'active' color).
-  heroHeadline: {
-    color: 'var(--color-text-accent)',
-  },
   centerText: {
     textAlign: 'center',
   },
@@ -438,7 +432,7 @@ function StorePreview({
           <VStack gap={10} style={{...styles.content, ...styles.contentFluid}}>
             <Center>
               <VStack gap={4} hAlign="center" style={styles.heroText}>
-                <Text type="display-2" style={styles.heroHeadline}>
+                <Text type="display-2" color="accent">
                   Little joys,
                   <br />
                   everywhere you go
@@ -462,10 +456,7 @@ function StorePreview({
                       />
                     </AspectRatio>
                     <div style={inlineStyles.cardBody}>
-                      <VStack
-                        gap={2}
-                        hAlign="center"
-                        style={styles.cardStack}>
+                      <VStack gap={2} hAlign="center" style={styles.cardStack}>
                         <HStack>
                           <Badge label={p.badge} variant={p.badgeVariant} />
                         </HStack>
@@ -475,7 +466,10 @@ function StorePreview({
                         <Text
                           type="supporting"
                           color="secondary"
-                          style={{...styles.cardDescription, ...styles.centerText}}>
+                          style={{
+                            ...styles.cardDescription,
+                            ...styles.centerText,
+                          }}>
                           {p.description}
                         </Text>
                         <HStack gap={2} vAlign="center" hAlign="center">
@@ -746,9 +740,7 @@ function ChatCard() {
 
           <ChatMessage sender="assistant">
             <VStack gap={3}>
-              <Text type="body">
-                Here’s everything I have on order #1043:
-              </Text>
+              <Text type="body">Here’s everything I have on order #1043:</Text>
               <Card padding={3}>
                 <VStack gap={1}>
                   <Item
@@ -1107,10 +1099,7 @@ function InventoryCard({
   ).length;
   return (
     <Card padding={0} style={styles.inventoryCard}>
-      <HStack
-        hAlign="between"
-        vAlign="center"
-        style={styles.inventoryHeader}>
+      <HStack hAlign="between" vAlign="center" style={styles.inventoryHeader}>
         <Heading level={2}>Inventory</Heading>
         <Button
           label="Add item"