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

package/templates/blocks/components/Thumbnail/ThumbnailRemovable.tsx

@@ -7,10 +7,47 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
+// Demo imagery is inlined as same-origin data URIs so the example is
+// self-contained. Thumbnail's remove-button overlay uses useImageMode, which
+// FETCHES the image to sample pixels (APCA) for contrast — a cross-origin CDN
+// URL without CORS headers cannot be fetched/sampled, so contrast detection
+// fails silently in hosted previews. These scenes are shared verbatim across
+// the Thumbnail examples and span a luminance ramp (night → snow) so the
+// overlay's contrast adaptation is visible.
+const NIGHT_FOREST =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX18+H08uDy8d/y8N/v7t/m5NXl49Tk4tPc3NDX1cnW1cnW1cjW1MjV1MjV1MfR0cXIyLzEw7m8vLC3t68wM0QvM0MvM0IvMkIuMkEtMEErLz8iJjkhJTggJTcgJDcfJDYfIzYeIjUcITMbHzIWHiwYGzIXGjEWGjAWGTAVGS8VGC8UGC4UGC0UFy4TFy0TFywTFi0SFiwRFSsQFSkNFR4QFCoPFCkPFCgPEykOEygOEigNEicNEScMESYIDw8ECgr+gzZIAAABqElEQVR42uWQ61aCQBRGD5GylNBMKS9FZgNdNE0cyUvB+79VM8MoF9Fgplau2j/8nO8c9hqAD0ngDwjeJYH1lrfBWoCtYDboNu/Zv7qQYNap1bpCN1gxFh1dNe5WAsCScWqoWttbChAKvHZZ0W6XQoIFpW8ooFmLCG2Rl1BgaZAU5Ac8yg0RlC9nngCRQDFuhQRzinWmkCuYk3lxQoFrlskVqlcTMcEFvYIKoFbNfmEFuIypWaGGkt66tqZuEbjAHZl6SQVF1WqNvpDAHVktXTvR9JbgDZii1+tZI7cYMJXkCASvksB4L5VxHmAsibzgRRIYbjgfCgFDSeBZkh8W1HMIniSBR0mOQPCQA3RgBk4M5DhNZwdEcbKgLXy5iDiZg5gApRYbqTql2FZgMxAKeEWSNUFYx3s2SfU28HPWItrpySSwE2cEdqrYtxgmxgHGScFmHrAGk8SxczIxZnNC1McFOGshShyb4yxB9sI3CXDGnH0MLsD7F5LvvptEgH12Zg1Pn2WuHsjvrwt8308t+nwxT38sgiAE8/RTeagH+vx/F8SeF0Ja8Ak14ia/LgmpZQAAAABJRU5ErkJggg==';
+const MISTY_VALLEY =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEWPnaqJmKSIlaKHlaGGlaKGk6CEkp6Ckp+Cj5uAj51/jZp6i5h8ipd7iZZ4hpR1g5FzhpdzhJN0g5FuhZdsgpVqgZRpgJNpf5JmfpFufYxufYtlfJBpe4tke49neo1ieo5kd4tndoZidopheY1geIxfd4tmdYVddYpcdIlbc4hgcoNebn5ZcodYcYZXb4VVboRUbYNTbIJaantWaXxRa4FQaYBPaH9NZ35UZXZQY3dMZn1LZXxKZHxMYHRKXnIoOEh3WzsBAAABeElEQVR42u3T11oCQQyG4R9FEREFqVJEgh17xbZ7/3cl29gpmQGeeOh7OF+Ss8G3EL6E8CmEdyG8CeFVCC9CeBTCgxDuhXAnhFsh3AjhSgiXQrgQwtlayHrB6TqIyHzCREMTH4rpbxip5nnkRintEUNF0oc8yqnP6Oey3ueQSnlHN6P0ro0Mi4BOSu8dA1mygnbC7G0NMdKEVszuLQXx4oZmhO3NDLlEEY05R280PDGbgD0RaBeI/Bdg7weBMkDLwF4PtBOcwH0gCJZf0DPYdd8Jo8K177hgZbjW+RN2hWffusBVnMR+XE5yfMRx5MPtOOOI0Xd+9ot/rTOiVrtepuabwcDwNFgP6przSH0dqKiOUhUfvaKcO8yVncyM0sK+psSyK4qpPUvRwlUUYrusgoaviG27YMFXNz38I0nc8PNPAFtC2BFClRFWV4cDU5g4WEE0hJ4q1PU8sgmMF0LOmKN2TBOh21RjRsxms3C5WYwrCIX+D/zBgV8HCFv4gVKf1AAAAABJRU5ErkJggg==';
+const GOLDEN_SUNSET =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEX/+uv/7sj6tFr3sVn1r1nzrVjxq1jvqVftp1frpVbpo1bnoVXln1XjnVThm1TfmVPdl1PblVLZk1LXkVLVj1HTjVHRi1DPiVDNh0/LhU/Jg07HgU7Ff03DfU3Be0y/eUy9d0u7dUu5c0u2cEq0bkqybEmwakmuaEisZkiqZEeoYkemYEakXkaiXEVgLjQ8HCjaJlMkAAABI0lEQVR42u3Mx3qDMBSE0Z/03nsvdhxjcnn/twsYjISR5MUkO5+V9N2ZYUPEpogtEdsidkTsitgTsS/iQMShiCMRxyJORJyKOBNxLuJCxKWIKxHXIm5E3Iq4E3Ev4kHEo4gnEc8iXkS8inhLymrJBO8J2UIiw0dc5sRDfEbVRWr1o/pbMMWox9yz6zcLIzMbBTD2VaHu7fr1gjXGA3w5baj5+H0w6x09TDpdaP7rDZhn0sd3y89Y9fcHbPnoYdroZ2w6dQNmg6OHfG4QyrsBC8gdZpVQxtqF4M1mjepFURThTLNgMYsePxaX2WqY6D8GSm2grK2slbGBciHZ9hOE2smNpTuxenhieCdeH06E7qTqvYnImWTbbUSPlKL1wHrgTwZ+AWq+3H5MpRkwAAAAAElFTkSuQmCC';
+const SNOWY_PEAKS =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX////6/P/4+//g7vjf7fbf7fTe7fje7fTe7PTd7Pjc7Pfd7PTc6/Xc6/Pb6/fb6/Xb6vTa6/fa6/Xa6vfZ6vfZ6vba6vTZ6fXY6vfY6vbY6ffY6fXX6fbX6fTW6fbX6PXW6PbW6PTV6PbV6PXU6PbV5/XU5/bU5/TU5vXT5/bS5/XT5vTS5vXS5vTR5vXR5fXQ5fXP5fXP5PXO5PXO5PTN5PTN4/TM4/TL4/TM4vTL4vTK4vTO3OqqvtKbrsFcfGgMVnjaAAAC7klEQVR42u2Ta3eaQBCGp0kbTbBBMWDMoiCWEOsFtV4SdcP//1edYQUWwSye9kNOT58POVlm3mdmUWG/3+9et5vVYj6bjoMgGE9n88Vqs33d7SsBcX67WmI+EKBhudpWNcBu94bzlyGO9weEj0uES9zhbVcFSPMYdxzmOKi4xACbNa0/DgY91rGIDusNgjFdY72tAKzXq0U4pTyGm80m/iXDNFys1psqApwf4nwc32x+J9DRYbhDuMRrqIF5vD+zKK0R5LBYfIvFcqUEBZPRsNex9IaW0NCtTm84mqDglxIIQ3z/uEBDqydoDVrBH4d4CyUwowUsA+fXa4I67mBYtAJeQglM4jeg0wLfBLSCLt5COFcC4xffYVZ8gVSABos5/sskVAOjYNjvWrqWxGOFplvd/jD4OZkpgSAYiA1yAtpgGIzGEyW0wYCZeqOeGer1hm6yQUXBD8+1uySofU2okaBre97zSA34nuswk74GqYC+CCZzXM9/VgO+77o2M+LPUcTpUzSYXS3/DB7m4ztomrhEjb7LeAPbdb0KgOe5fTIY6Y8B51O+Xynvgeu6js2Yaep6Q6DrpsmY7biVABthXdPEFfRj3sBTl9nl8JNzLMANSGEahm5QGuNn8/zEAE8xD0g7hrfbdHgqhxO5J/B4BEMtBOv43+M5YkHuCTxk0HwuDGfgvNAAbZljQ/sMnEOhAVoSPKFVCuYBThvgXiKdcF8GlwRZB+Tz8IEhLhca4C6F8yusH0TDXYFjPjEkj+E2gecm8NsT+IkgaQBVQ6F80gA3Ai4uANkl+I0ElYlDjNwAhXyp4Zg/Cg4FAS+dwAsLiPq7PAGuEc5LJ3B+LUjLSf2Q1aGk4V1uyJVTQdYAqgZ5v7T+nu0IuXwmkAwf1yE3IJuQjZDLkiBpAK5o4BUEV6UNh5J8SR1y9VzDoZgvqasFV2frByFQNCgFX/6Q/4J/SxDJTy84/DVBFEmlSw6fRhBFUumiw2cRRJFUuuzwG+qew9oBo+n5AAAAAElFTkSuQmCC';
+
 const IMAGES = [
-  {id: 1, src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-1.png', alt: 'Dark cityscape at night', label: 'dark-city.jpg'},
-  {id: 2, src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png', alt: 'Bright snowy landscape', label: 'snow.jpg'},
-  {id: 3, src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png', alt: 'Warm sunset over mountains', label: 'sunset.jpg'},
+  {
+    id: 1,
+    src: NIGHT_FOREST,
+    alt: 'Forest at night under a crescent moon',
+    label: 'forest-night.jpg',
+  },
+  {
+    id: 2,
+    src: MISTY_VALLEY,
+    alt: 'Misty mountain valley',
+    label: 'misty-valley.jpg',
+  },
+  {
+    id: 3,
+    src: GOLDEN_SUNSET,
+    alt: 'Golden sunset over mountains',
+    label: 'golden-sunset.jpg',
+  },
+  {
+    id: 4,
+    src: SNOWY_PEAKS,
+    alt: 'Snowy mountain peaks',
+    label: 'snowy-peaks.jpg',
+  },
 ];
 
 export default function ThumbnailRemovable() {

package/templates/blocks/components/Thumbnail/ThumbnailShowcase.tsx

@@ -4,12 +4,13 @@
 
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 
+// Inline same-origin data URI so the example is self-contained — see
+// ThumbnailRemovable for why image-backed Thumbnails avoid cross-origin URLs.
+const SNOWY_PEAKS =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX////6/P/4+//g7vjf7fbf7fTe7fje7fTe7PTd7Pjc7Pfd7PTc6/Xc6/Pb6/fb6/Xb6vTa6/fa6/Xa6vfZ6vfZ6vba6vTZ6fXY6vfY6vbY6ffY6fXX6fbX6fTW6fbX6PXW6PbW6PTV6PbV6PXU6PbV5/XU5/bU5/TU5vXT5/bS5/XT5vTS5vXS5vTR5vXR5fXQ5fXP5fXP5PXO5PXO5PTN5PTN4/TM4/TL4/TM4vTL4vTK4vTO3OqqvtKbrsFcfGgMVnjaAAAC7klEQVR42u2Ta3eaQBCGp0kbTbBBMWDMoiCWEOsFtV4SdcP//1edYQUWwSye9kNOT58POVlm3mdmUWG/3+9et5vVYj6bjoMgGE9n88Vqs33d7SsBcX67WmI+EKBhudpWNcBu94bzlyGO9weEj0uES9zhbVcFSPMYdxzmOKi4xACbNa0/DgY91rGIDusNgjFdY72tAKzXq0U4pTyGm80m/iXDNFys1psqApwf4nwc32x+J9DRYbhDuMRrqIF5vD+zKK0R5LBYfIvFcqUEBZPRsNex9IaW0NCtTm84mqDglxIIQ3z/uEBDqydoDVrBH4d4CyUwowUsA+fXa4I67mBYtAJeQglM4jeg0wLfBLSCLt5COFcC4xffYVZ8gVSABos5/sskVAOjYNjvWrqWxGOFplvd/jD4OZkpgSAYiA1yAtpgGIzGEyW0wYCZeqOeGer1hm6yQUXBD8+1uySofU2okaBre97zSA34nuswk74GqYC+CCZzXM9/VgO+77o2M+LPUcTpUzSYXS3/DB7m4ztomrhEjb7LeAPbdb0KgOe5fTIY6Y8B51O+Xynvgeu6js2Yaep6Q6DrpsmY7biVABthXdPEFfRj3sBTl9nl8JNzLMANSGEahm5QGuNn8/zEAE8xD0g7hrfbdHgqhxO5J/B4BEMtBOv43+M5YkHuCTxk0HwuDGfgvNAAbZljQ/sMnEOhAVoSPKFVCuYBThvgXiKdcF8GlwRZB+Tz8IEhLhca4C6F8yusH0TDXYFjPjEkj+E2gecm8NsT+IkgaQBVQ6F80gA3Ai4uANkl+I0ElYlDjNwAhXyp4Zg/Cg4FAS+dwAsLiPq7PAGuEc5LJ3B+LUjLSf2Q1aGk4V1uyJVTQdYAqgZ5v7T+nu0IuXwmkAwf1yE3IJuQjZDLkiBpAK5o4BUEV6UNh5J8SR1y9VzDoZgvqasFV2frByFQNCgFX/6Q/4J/SxDJTy84/DVBFEmlSw6fRhBFUumiw2cRRJFUuuzwG+qew9oBo+n5AAAAAElFTkSuQmCC';
+
 export default function ThumbnailShowcase() {
   return (
-    <Thumbnail
-      src="https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png"
-      alt="Sample image"
-      label="photo.jpg"
-    />
+    <Thumbnail src={SNOWY_PEAKS} alt="Snowy mountain peaks" label="snowy-peaks.jpg" />
   );
 }

package/templates/blocks/components/Thumbnail/ThumbnailStates.tsx

@@ -6,6 +6,11 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
+// Inline same-origin data URI so the example is self-contained — see
+// ThumbnailRemovable for why image-backed Thumbnails avoid cross-origin URLs.
+const MISTY_VALLEY =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEWPnaqJmKSIlaKHlaGGlaKGk6CEkp6Ckp+Cj5uAj51/jZp6i5h8ipd7iZZ4hpR1g5FzhpdzhJN0g5FuhZdsgpVqgZRpgJNpf5JmfpFufYxufYtlfJBpe4tke49neo1ieo5kd4tndoZidopheY1geIxfd4tmdYVddYpcdIlbc4hgcoNebn5ZcodYcYZXb4VVboRUbYNTbIJaantWaXxRa4FQaYBPaH9NZ35UZXZQY3dMZn1LZXxKZHxMYHRKXnIoOEh3WzsBAAABeElEQVR42u3T11oCQQyG4R9FEREFqVJEgh17xbZ7/3cl29gpmQGeeOh7OF+Ss8G3EL6E8CmEdyG8CeFVCC9CeBTCgxDuhXAnhFsh3AjhSgiXQrgQwtlayHrB6TqIyHzCREMTH4rpbxip5nnkRintEUNF0oc8yqnP6Oey3ueQSnlHN6P0ro0Mi4BOSu8dA1mygnbC7G0NMdKEVszuLQXx4oZmhO3NDLlEEY05R280PDGbgD0RaBeI/Bdg7weBMkDLwF4PtBOcwH0gCJZf0DPYdd8Jo8K177hgZbjW+RN2hWffusBVnMR+XE5yfMRx5MPtOOOI0Xd+9ot/rTOiVrtepuabwcDwNFgP6przSH0dqKiOUhUfvaKcO8yVncyM0sK+psSyK4qpPUvRwlUUYrusgoaviG27YMFXNz38I0nc8PNPAFtC2BFClRFWV4cDU5g4WEE0hJ4q1PU8sgmMF0LOmKN2TBOh21RjRsxms3C5WYwrCIX+D/zBgV8HCFv4gVKf1AAAAABJRU5ErkJggg==';
+
 export default function ThumbnailStates() {
   return (
     <Stack direction="vertical" gap={4}>
@@ -28,10 +33,10 @@ export default function ThumbnailStates() {
           </Stack>
           <Stack direction="vertical" gap={1} hAlign="center">
             <Thumbnail
-              src="https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png"
-              alt="Mountain landscape"
+              src={MISTY_VALLEY}
+              alt="Misty mountain valley"
               isLoading
-              label="landscape.jpg"
+              label="misty-valley.jpg"
             />
             <Text type="supporting" color="secondary">
               Uploading
@@ -39,9 +44,9 @@ export default function ThumbnailStates() {
           </Stack>
           <Stack direction="vertical" gap={1} hAlign="center">
             <Thumbnail
-              src="https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png"
-              alt="Mountain landscape"
-              label="landscape.jpg"
+              src={MISTY_VALLEY}
+              alt="Misty mountain valley"
+              label="misty-valley.jpg"
             />
             <Text type="supporting" color="secondary">
               Loaded

package/templates/blocks/components/Timestamp/TimestampColors.tsx

@@ -31,9 +31,9 @@ export default function TimestampColors() {
       </Stack>
       <Stack direction="vertical" gap={1}>
         <Text type="supporting" color="secondary">
-          Active
+          Accent
         </Text>
-        <Timestamp value={DATE} format="date_time" color="active" />
+        <Timestamp value={DATE} format="date_time" color="accent" />
       </Stack>
     </Stack>
   );

package/templates/blocks/components/ToggleButton/ToggleButtonGroup.doc.mjs

@@ -3,7 +3,7 @@
 /** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
 export const doc = {
   type: 'block',
-  exampleFor: 'ToggleButton',
+  exampleFor: 'ToggleButtonGroup',
   name: 'ToggleButton — Group',
   displayName: 'ToggleButton — Group',
   description: 'Toggle button groups in single-select and multi-select modes. Single selection acts as a view mode switcher; multiple selection forms a formatting toolbar.',

package/templates/blocks/components/Tokenizer/TokenizerShowcase.tsx

@@ -2,8 +2,9 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
-import type {SearchSource} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
 const source: SearchSource = {
   search: () => [],
@@ -11,16 +12,17 @@ const source: SearchSource = {
 };
 
 export default function TokenizerShowcase() {
+  const [value, setValue] = useState<SearchableItem[]>([
+    {id: '1', label: 'Design'},
+    {id: '2', label: 'Engineering'},
+  ]);
   return (
     <Tokenizer
       label="Tags"
       placeholder="Search..."
       searchSource={source}
-      value={[
-        {id: '1', label: 'Design'},
-        {id: '2', label: 'Engineering'},
-      ]}
-      onChange={() => {}}
+      value={value}
+      onChange={setValue}
       style={{width: 400}}
     />
   );

package/templates/blocks/components/Toolbar/ToolbarTableFilter.doc.mjs

@@ -7,8 +7,8 @@ export const doc = {
   name: 'Toolbar — Table Filter',
   displayName: 'Toolbar — Table Filter',
   description:
-    'A compact toolbar with a search input, filter buttons, and an overflow menu. Use above a data table to let users search, filter, and access view options.',
+    'A compact toolbar with a search input, Status and Priority filter selectors, and an overflow menu. Use above a data table to let users search, filter, and access view options.',
   isReady: true,
   aspectRatio: 16 / 9,
-  componentsUsed: ['Toolbar', 'Button', 'Icon', 'TextInput', 'MoreMenu', 'Layout', 'Table'],
+  componentsUsed: ['Toolbar', 'Selector', 'TextInput', 'MoreMenu', 'Layout', 'Table'],
 };

package/templates/blocks/components/Toolbar/ToolbarTableFilter.tsx

@@ -2,19 +2,20 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
-import {Button} from '@astryxdesign/core/Button';
-import {Icon} from '@astryxdesign/core/Icon';
+import {Selector} from '@astryxdesign/core/Selector';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Table} from '@astryxdesign/core/Table';
-import {
-  MagnifyingGlassIcon,
-  ChevronDownIcon,
-} from '@heroicons/react/24/outline';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
 
 export default function ToolbarTableFilter() {
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState<string | null>(null);
+  const [priority, setPriority] = useState<string | null>(null);
+
   return (
     <Stack direction="vertical" style={{width: '100%'}}>
       <Toolbar
@@ -27,19 +28,27 @@ export default function ToolbarTableFilter() {
               label="Search"
               isLabelHidden
               placeholder="Search..."
-              value=""
-              onChange={() => {}}
+              value={search}
+              onChange={setSearch}
               startIcon={MagnifyingGlassIcon}
             />
-            <Button
+            <Selector
               label="Status"
-              variant="secondary"
-              endContent={<Icon icon={ChevronDownIcon} />}
+              isLabelHidden
+              placeholder="Status"
+              hasClear
+              value={status}
+              onChange={setStatus}
+              options={['Open', 'In progress', 'Done']}
             />
-            <Button
+            <Selector
               label="Priority"
-              variant="secondary"
-              endContent={<Icon icon={ChevronDownIcon} />}
+              isLabelHidden
+              placeholder="Priority"
+              hasClear
+              value={priority}
+              onChange={setPriority}
+              options={['High', 'Medium', 'Low']}
             />
           </>
         }

package/templates/blocks/components/Typeahead/TypeaheadShowcase.tsx

@@ -1,5 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {Typeahead} from '@astryxdesign/core/Typeahead';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
@@ -21,14 +24,15 @@ const fruitSource: SearchSource = {
 };
 
 export default function TypeaheadShowcase() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
   return (
     <div style={{width: 320}}>
       <Typeahead
         label="Fruit"
         placeholder="Search fruits..."
         searchSource={fruitSource}
-        value={null}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );

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',
+};