@astryxdesign/cli 0.1.2-canary.609e358 → 0.1.2-canary.b712653

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.609e358",
+  "version": "0.1.2-canary.b712653",
   "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.609e358",
-    "@astryxdesign/lab": "0.1.2-canary.609e358",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.609e358",
+    "@astryxdesign/core": "0.1.2-canary.b712653",
+    "@astryxdesign/lab": "0.1.2-canary.b712653",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.b712653",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -80,9 +80,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.609e358",
-    "@astryxdesign/lab": "0.1.2-canary.609e358",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.609e358",
+    "@astryxdesign/core": "0.1.2-canary.b712653",
+    "@astryxdesign/lab": "0.1.2-canary.b712653",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.b712653",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

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

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

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