@astryxdesign/cli 0.1.2-canary.b712653 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.b712653",
+  "version": "0.1.2",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -63,9 +63,9 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.b712653",
-    "@astryxdesign/lab": "0.1.2-canary.b712653",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.b712653",
+    "@astryxdesign/core": "*",
+    "@astryxdesign/lab": "*",
+    "@astryxdesign/theme-neutral": "*",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -80,9 +80,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.b712653",
-    "@astryxdesign/lab": "0.1.2-canary.b712653",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.b712653",
+    "@astryxdesign/core": "*",
+    "@astryxdesign/lab": "*",
+    "@astryxdesign/theme-neutral": "*",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

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

@@ -1,321 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Fragment, useState, useMemo, useEffect} from 'react';
-import {AppShell} from '@astryxdesign/core/AppShell';
-import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
-import {TopNav} from '@astryxdesign/core/TopNav';
-import {DropdownMenu, DropdownMenuItem} from '@astryxdesign/core/DropdownMenu';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
-import {createStaticSource} from '@astryxdesign/core/Typeahead';
-import {Divider} from '@astryxdesign/core/Divider';
-import {Kbd} from '@astryxdesign/core/Kbd';
-import {SideNav} from '@astryxdesign/core/SideNav';
-import {TreeList} from '@astryxdesign/core/TreeList';
-import type {TreeListItemData} from '@astryxdesign/core/TreeList';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Text} from '@astryxdesign/core/Text';
-import {IconButton} from '@astryxdesign/core/IconButton';
-import {Button} from '@astryxdesign/core/Button';
-import {TextInput} from '@astryxdesign/core/TextInput';
-import {Card} from '@astryxdesign/core/Card';
-import {Stack, VStack, HStack} from '@astryxdesign/core/Stack';
-import {
-  PlayIcon,
-  MagnifyingGlassIcon,
-  FolderIcon,
-  DocumentTextIcon,
-} from '@heroicons/react/24/outline';
-
-const noop = () => {};
-
-const folder = (
-  id: string,
-  children: TreeListItemData[],
-  isExpanded = true,
-): TreeListItemData => ({
-  id,
-  label: <Text maxLines={1}>{id}</Text>,
-  startContent: <Icon icon={FolderIcon} size="xsm" />,
-  isExpanded,
-  children,
-});
-
-const file = (id: string, isSelected = false): TreeListItemData => ({
-  id,
-  label: <Text maxLines={1}>{id}</Text>,
-  startContent: <Icon icon={DocumentTextIcon} size="xsm" />,
-  isSelected,
-});
-
-const FILE_TREE: TreeListItemData[] = [
-  folder('src', [
-    folder('components', [
-      file('AppShell.tsx', true),
-      file('TopNav.tsx'),
-      file('SideNav.tsx'),
-    ]),
-    folder('hooks', [file('useTheme.ts'), file('useResizable.ts')]),
-    file('index.tsx'),
-    file('App.tsx'),
-  ]),
-  folder('public', [file('favicon.ico'), file('robots.txt')], false),
-  file('package.json'),
-  file('tsconfig.json'),
-  file('README.md'),
-];
-
-// Each menu is split into groups; groups are separated by a divider.
-// `[label, shortcut]` — the shortcut renders as a single combined Kbd
-// (e.g. ⌘N); an empty shortcut renders no Kbd.
-type MenuEntry = [label: string, shortcut: string];
-
-const MENU_WIDTH = 280;
-
-const MENUS: {label: string; groups: MenuEntry[][]}[] = [
-  {
-    label: 'File',
-    groups: [
-      [
-        ['New File', '⌘N'],
-        ['New Window', '⇧⌘N'],
-      ],
-      [
-        ['Open...', '⌘O'],
-        ['Save', '⌘S'],
-        ['Save As...', '⇧⌘S'],
-      ],
-      [['Close Editor', '⌘W']],
-    ],
-  },
-  {
-    label: 'Edit',
-    groups: [
-      [
-        ['Undo', '⌘Z'],
-        ['Redo', '⇧⌘Z'],
-      ],
-      [
-        ['Cut', '⌘X'],
-        ['Copy', '⌘C'],
-        ['Paste', '⌘V'],
-      ],
-      [['Find', '⌘F']],
-    ],
-  },
-  {
-    label: 'View',
-    groups: [
-      [['Command Palette', '⇧⌘P']],
-      [
-        ['Explorer', '⇧⌘E'],
-        ['Search', '⇧⌘F'],
-      ],
-      [
-        ['Toggle Terminal', '⌃`'],
-        ['Zen Mode', '⌘K'],
-      ],
-    ],
-  },
-  {
-    label: 'Window',
-    groups: [
-      [
-        ['Minimize', '⌘M'],
-        ['Zoom', ''],
-      ],
-      [
-        ['Next Tab', '⌃⇥'],
-        ['Previous Tab', '⌃⇧⇥'],
-      ],
-      [['Bring All to Front', '']],
-    ],
-  },
-  {
-    label: 'Help',
-    groups: [
-      [
-        ['Documentation', ''],
-        ['Release Notes', ''],
-        ['Report Issue', ''],
-        ['About', ''],
-      ],
-    ],
-  },
-];
-
-const CODE_LINES = [
-  '38%',
-  '62%',
-  '54%',
-  '0%',
-  '46%',
-  '70%',
-  '58%',
-  '34%',
-  '0%',
-  '50%',
-  '66%',
-  '42%',
-  '60%',
-  '28%',
-];
-
-const EDITOR_TABS = ['AppShell.tsx', 'TopNav.tsx', 'theme.ts'];
-
-const COMMANDS = [
-  {id: 'new-file', label: 'New File'},
-  {id: 'open-file', label: 'Open File…'},
-  {id: 'save-all', label: 'Save All'},
-  {id: 'find-in-files', label: 'Find in Files'},
-  {id: 'toggle-terminal', label: 'Toggle Terminal'},
-  {id: 'go-to-symbol', label: 'Go to Symbol…'},
-  {id: 'appshell', label: 'AppShell.tsx'},
-  {id: 'topnav', label: 'TopNav.tsx'},
-  {id: 'sidenav', label: 'SideNav.tsx'},
-  {id: 'use-theme', label: 'useTheme.ts'},
-  {id: 'theme', label: 'theme.ts'},
-];
-
-export default function ShellNav() {
-  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
-  const searchSource = useMemo(() => createStaticSource(COMMANDS), []);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-        e.preventDefault();
-        setIsPaletteOpen(true);
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  return (
-    <>
-      <AppShell
-        contentPadding={0}
-        topNav={
-          <TopNav
-            label="Astryx Studio menu bar"
-            startContent={
-              <>
-                {MENUS.map(menu => (
-                  <DropdownMenu
-                    key={menu.label}
-                    button={{label: menu.label, variant: 'ghost', size: 'sm'}}
-                    hasChevron={false}
-                    menuWidth={MENU_WIDTH}>
-                    {menu.groups.map((group, gi) => (
-                      <Fragment key={gi}>
-                        {gi > 0 && <Divider />}
-                        {group.map(([label, shortcut]) => (
-                          <DropdownMenuItem
-                            key={label}
-                            label={label}
-                            onClick={noop}
-                            endContent={
-                              shortcut ? <Kbd keys={shortcut} /> : undefined
-                            }
-                          />
-                        ))}
-                      </Fragment>
-                    ))}
-                  </DropdownMenu>
-                ))}
-              </>
-            }
-            endContent={
-              <>
-                <Stack onClick={() => setIsPaletteOpen(true)}>
-                  <TextInput
-                    label="Search files and commands"
-                    isLabelHidden
-                    size="sm"
-                    width={240}
-                    startIcon={MagnifyingGlassIcon}
-                    placeholder="Search files and commands…"
-                    value=""
-                    onChange={() => {}}
-                  />
-                </Stack>
-                <IconButton
-                  label="Run project"
-                  tooltip="Run"
-                  variant="ghost"
-                  icon={<Icon icon={PlayIcon} size="sm" />}
-                />
-                <Button label="Share" variant="secondary" />
-              </>
-            }
-          />
-        }
-        sideNav={
-          <SideNav
-            resizable={{defaultWidth: 240, minWidth: 180, maxWidth: 400}}>
-            <TreeList items={FILE_TREE} density="compact" />
-          </SideNav>
-        }>
-        <Layout
-          height="fill"
-          header={
-            <LayoutHeader hasDivider padding={6}>
-              <HStack gap={2}>
-                {EDITOR_TABS.map(tab => (
-                  <Card
-                    key={tab}
-                    variant="muted"
-                    padding={0}
-                    width={132}
-                    height={36}
-                  />
-                ))}
-              </HStack>
-            </LayoutHeader>
-          }
-          content={
-            <LayoutContent padding={6}>
-              <VStack gap={2}>
-                {CODE_LINES.map((width, i) =>
-                  width === '0%' ? (
-                    <Card
-                      key={i}
-                      variant="muted"
-                      padding={0}
-                      width={1}
-                      height={14}
-                    />
-                  ) : (
-                    <HStack key={i} gap={3} vAlign="center">
-                      <Card
-                        variant="muted"
-                        padding={0}
-                        width={20}
-                        height={14}
-                      />
-                      <Card
-                        variant="muted"
-                        padding={0}
-                        width={width}
-                        height={14}
-                      />
-                    </HStack>
-                  ),
-                )}
-              </VStack>
-            </LayoutContent>
-          }
-        />
-      </AppShell>
-      <CommandPalette
-        isOpen={isPaletteOpen}
-        onOpenChange={setIsPaletteOpen}
-        searchSource={searchSource}
-        label="Search files and commands"
-        onValueChange={() => setIsPaletteOpen(false)}
-      />
-    </>
-  );
-}

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

@@ -1,12 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'page',
-  name: 'Shell Nav',
-  displayName: 'Shell Nav',
-  description:
-    'A top + side nav app shell with a File/Edit/View/Window/Help menu bar plus command-palette search, a resizable file-tree SideNav, and a static grey-card tabbed code editor.',
-  isReady: true,
-  category: 'Shell - Top Nav + Left Sidebar',
-};

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

@@ -1,242 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-// 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

@@ -1,224 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-// 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 (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',
-};