@astryxdesign/cli 0.7.11 → 0.7.12-canary.ccb4a6d

package/assets/templates/pages/course-detail/template.doc.mjs

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Course Detail',
+  displayName: 'Course Detail',
+  description:
+    'Long-form sales page for a single offering, in two columns — read the pitch, then enroll from a sticky rail. The main column holds a preview poster with a fact row, an about block with skill chips, a module syllabus whose sections collapse module by module, an instructor card, reviews with a scored-aspects panel, and a FAQ; the rail holds the price, a self-paced or cohort start picker, and a weekly-pace slider that computes a finish date. The shape for any offering with a curriculum and a purchase panel — a course, class, masterclass, bootcamp, workshop, or training.',
+  keywords: [
+    'course',
+    'class',
+    'lesson',
+    'curriculum',
+    'syllabus',
+    'e-learning',
+    'enroll',
+    'cohort',
+    'masterclass',
+    'bootcamp',
+    'training',
+    'education',
+  ],
+  isReady: true,
+  category: 'Content - Course Detail',
+  icons: {
+    PlayIcon: 'play',
+    CheckIcon: 'check',
+    StarIcon: 'star',
+    ClockIcon: 'clock',
+    UsersIcon: 'users',
+    GlobeAltIcon: 'globe',
+    BoltIcon: 'bolt',
+    ArrowRightIcon: 'arrowRight',
+    BookOpenIcon: 'book',
+  },
+};

package/assets/templates/pages/file-explorer/page.tsx

@@ -7,6 +7,8 @@ import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {List, ListItem} from '@astryxdesign/core/List';
 import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {StackItem} from '@astryxdesign/core/Stack';
+import {rtlStyles} from '@astryxdesign/core/utils';
 import {Text} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
@@ -260,14 +262,9 @@ const FILESYSTEM: FileSystemItem[] = [
 ];
 
 const page: CSSProperties = {height: '100dvh'};
-const columnRow: CSSProperties = {overflowX: 'auto', overflowY: 'hidden'};
-const scrollable: CSSProperties = {overflowY: 'auto'};
-const fixedColumn: CSSProperties = {flexShrink: 0};
-const detailColumn: CSSProperties = {
-  flexGrow: 1,
-  flexShrink: 0,
-  flexBasis: 320,
-};
+// The detail column fills the rest of the row but never narrows below 320px;
+// past that, the row scrolls sideways.
+const detailFloor: CSSProperties = {flexShrink: 0, flexBasis: 320};
 
 function findItem(items: FileSystemItem[], id: string): FileSystemItem | null {
   for (const item of items) {
@@ -361,7 +358,13 @@ export default function FileExplorerPage() {
               <IconButton
                 variant="ghost"
                 size="sm"
-                icon={<Icon icon={ChevronLeftIcon} size="sm" />}
+                icon={
+                  <Icon
+                    icon={ChevronLeftIcon}
+                    size="sm"
+                    xstyle={rtlStyles.mirror}
+                  />
+                }
                 onClick={() => {
                   if (selectedPath.length > 0) {
                     setSelectedPath(selectedPath.slice(0, -1));
@@ -373,7 +376,13 @@ export default function FileExplorerPage() {
               <IconButton
                 variant="ghost"
                 size="sm"
-                icon={<Icon icon={ChevronRightIcon} size="sm" />}
+                icon={
+                  <Icon
+                    icon={ChevronRightIcon}
+                    size="sm"
+                    xstyle={rtlStyles.mirror}
+                  />
+                }
                 isDisabled
                 label="Go forward"
               />
@@ -449,86 +458,101 @@ export default function FileExplorerPage() {
       }
       content={
         <LayoutContent padding={0} isScrollable={false}>
-          <HStack height="100%" style={columnRow}>
+          <HStack height="100%" isScrollable>
             {columns.map((col, colIndex) => {
               const showDivider =
                 colIndex < columns.length - 1 || selectedFile != null;
               return (
-                <Section
+                <StackItem
                   key={colIndex}
-                  width={240}
-                  padding={2}
-                  variant="transparent"
-                  dividers={showDivider ? ['end'] : undefined}
-                  style={{...scrollable, ...fixedColumn}}>
-                  <List density="compact" hasDividers={false}>
-                    {col.items.map(item => {
-                      const isSelected = col.selectedId === item.id;
-                      const hasChildren =
-                        item.type === 'folder' &&
-                        item.children != null &&
-                        item.children.length > 0;
-                      return (
-                        <ListItem
-                          key={item.id}
-                          label={item.name}
-                          startContent={
-                            <Icon
-                              icon={
-                                item.type === 'folder'
-                                  ? FolderIcon
-                                  : DocumentIcon
-                              }
-                              color={
-                                item.type === 'folder' ? 'accent' : 'secondary'
-                              }
-                              size="sm"
-                            />
-                          }
-                          endContent={
-                            hasChildren ? (
+                  size="static"
+                  isScrollable
+                  aria-label={
+                    colIndex === 0
+                      ? 'Home'
+                      : findItem(FILESYSTEM, selectedPath[colIndex - 1])?.name
+                  }>
+                  <Section
+                    width={240}
+                    height="100%"
+                    padding={2}
+                    variant="transparent"
+                    dividers={showDivider ? ['end'] : undefined}>
+                    <List density="compact" hasDividers={false}>
+                      {col.items.map(item => {
+                        const isSelected = col.selectedId === item.id;
+                        const hasChildren =
+                          item.type === 'folder' &&
+                          item.children != null &&
+                          item.children.length > 0;
+                        return (
+                          <ListItem
+                            key={item.id}
+                            label={item.name}
+                            startContent={
                               <Icon
-                                icon={ChevronRightIcon}
-                                size="xsm"
-                                color="secondary"
+                                icon={
+                                  item.type === 'folder'
+                                    ? FolderIcon
+                                    : DocumentIcon
+                                }
+                                color={
+                                  item.type === 'folder'
+                                    ? 'accent'
+                                    : 'secondary'
+                                }
+                                size="sm"
                               />
-                            ) : undefined
-                          }
-                          onClick={() => handleSelect(colIndex, item.id)}
-                          isSelected={isSelected}
-                        />
-                      );
-                    })}
-                  </List>
-                </Section>
+                            }
+                            endContent={
+                              hasChildren ? (
+                                <Icon
+                                  icon={ChevronRightIcon}
+                                  size="xsm"
+                                  color="secondary"
+                                  xstyle={rtlStyles.mirror}
+                                />
+                              ) : undefined
+                            }
+                            onClick={() => handleSelect(colIndex, item.id)}
+                            isSelected={isSelected}
+                          />
+                        );
+                      })}
+                    </List>
+                  </Section>
+                </StackItem>
               );
             })}
             {selectedFile && (
-              <Section
-                padding={6}
-                variant="transparent"
-                style={{...scrollable, ...detailColumn}}>
-                <VStack gap={4} hAlign="center">
-                  <Avatar name={selectedFile.name} size={96} />
-                  <VStack gap={1} hAlign="center">
-                    <Text type="label">{selectedFile.name}</Text>
-                    <Text type="supporting">
-                      {getFileExtension(selectedFile.name)} Document
-                    </Text>
+              <StackItem
+                size="fill"
+                isScrollable
+                aria-label={selectedFile.name}
+                style={detailFloor}>
+                <Section padding={6} variant="transparent">
+                  <VStack gap={4} hAlign="center">
+                    <Avatar name={selectedFile.name} size={96} />
+                    <VStack gap={1} hAlign="center">
+                      <Text type="label">{selectedFile.name}</Text>
+                      <Text type="supporting">
+                        {getFileExtension(selectedFile.name)} Document
+                      </Text>
+                    </VStack>
+                    <MetadataList title="Information">
+                      <MetadataListItem label="Created">
+                        March 28, 2026 at 2:15 PM
+                      </MetadataListItem>
+                      <MetadataListItem label="Modified">
+                        Yesterday, 10:27 PM
+                      </MetadataListItem>
+                      <MetadataListItem label="Kind">
+                        {getFileExtension(selectedFile.name)} Document
+                      </MetadataListItem>
+                    </MetadataList>
                   </VStack>
-                  <MetadataList title="Information">
-                    <MetadataListItem label="Created">
-                      March 28, 2026 at 2:15 PM
-                    </MetadataListItem>
-                    <MetadataListItem label="Modified">
-                      Yesterday, 10:27 PM
-                    </MetadataListItem>
-                    <MetadataListItem label="Kind">
-                      {getFileExtension(selectedFile.name)} Document
-                    </MetadataListItem>
-                  </MetadataList>
-                </VStack>
-              </Section>
+                </Section>
+              </StackItem>
             )}
           </HStack>
         </LayoutContent>