astryx-dracula 0.2.0 → 0.3.0

package/templates/file-explorer.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (Tbar[size=sm] > (H > IB"Go back" + IB"Go forward" + Tx"Folder"[t=label]) + (SG"View mode" > SGI*4) + (H > IB"Group" + IB"Share" + IB"Tags" + IB"More" + IB"Search")) + (LC[p=0 !scroll] > (Hd"File Explorer"[level=1] + H[h=fill] > (S.transparent[p=2 w=240 dv=[end]] > UL[density=compact !hasDividers] > (LI > Ic + Tx"Item"[t=body])*3)*3 + (S.transparent[p=6] > V[g=4 a=center] > Av[size=96] + (V[g=1 a=center] > Tx"Name"[t=body] + Tx"Kind"[t=supporting]) + (ML"Information" > MLI*3))))
 
 import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -7,9 +9,11 @@ import {List, ListItem} from '@astryxdesign/core/List';
 import {HStack, VStack} from '@astryxdesign/core/Layout';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Text} from '@astryxdesign/core/Text';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {Icon} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {Section} from '@astryxdesign/core/Section';
+import {EmptyState} from '@astryxdesign/core/EmptyState';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
 import {
@@ -262,13 +266,85 @@ const page: CSSProperties = {height: '100dvh'};
 const columnRow: CSSProperties = {overflowX: 'auto', overflowY: 'hidden'};
 const scrollable: CSSProperties = {overflowY: 'auto'};
 const fixedColumn: CSSProperties = {flexShrink: 0};
+// The column's 320px resting width rides on Section's `width` prop; grow
+// lets it absorb whatever the fixed columns leave. Inline styles are for
+// what props cannot express.
 const detailColumn: CSSProperties = {
   flexGrow: 1,
   flexShrink: 0,
-  flexBasis: 320,
 };
 const controlsScroll: CSSProperties = {overflowX: 'auto'};
 
+// Static toolbar content, hoisted out of the render path: neither element
+// reads component state, so rebuilding them per render buys nothing.
+const viewSwitcher = (
+  <SegmentedControl value="column" onChange={() => {}} label="View mode">
+    <SegmentedControlItem
+      value="grid"
+      label="Grid"
+      icon={<Icon icon={LayoutGrid} size="sm" />}
+      isLabelHidden
+    />
+    <SegmentedControlItem
+      value="list"
+      label="List"
+      icon={<Icon icon={Rows3} size="sm" />}
+      isLabelHidden
+    />
+    <SegmentedControlItem
+      value="column"
+      label="Column"
+      icon={<Icon icon={Columns} size="sm" />}
+      isLabelHidden
+    />
+    <SegmentedControlItem
+      value="gallery"
+      label="Gallery"
+      icon={<Icon icon={Table} size="sm" />}
+      isLabelHidden
+    />
+  </SegmentedControl>
+);
+const fileActions = (
+  <>
+    <IconButton
+      variant="ghost"
+      size="sm"
+      icon={<Icon icon={SlidersHorizontal} size="sm" />}
+      label="Group"
+      tooltip="Group"
+    />
+    <IconButton
+      variant="ghost"
+      size="sm"
+      icon={<Icon icon={Share2} size="sm" />}
+      label="Share"
+      tooltip="Share"
+    />
+    <IconButton
+      variant="ghost"
+      size="sm"
+      icon={<Icon icon={Tag} size="sm" />}
+      label="Tags"
+      tooltip="Tags"
+    />
+    <IconButton
+      variant="ghost"
+      size="sm"
+      icon={<Icon icon={Ellipsis} size="sm" />}
+      label="More"
+      tooltip="More"
+    />
+    <IconButton
+      variant="ghost"
+      size="sm"
+      icon={<Icon icon={Search} size="sm" />}
+      label="Search"
+      tooltip="Search"
+    />
+  </>
+);
+
 function findItem(items: FileSystemItem[], id: string): FileSystemItem | null {
   for (const item of items) {
     if (item.id === id) {
@@ -297,16 +373,27 @@ export default function FileExplorer() {
   ]);
 
   const isNarrow = useMediaQuery('(max-width: 768px)');
-  const isPhone = useMediaQuery('(max-width: 767px)');
+  const isPhone = isNarrow;
 
   const columns = useMemo(() => {
-    const cols: {items: FileSystemItem[]; selectedId: string | null}[] = [];
-    cols.push({items: FILESYSTEM, selectedId: selectedPath[0] ?? null});
+    // `id` names the folder a column lists, so the React key stays put when
+    // narrow mode slices the row down to the last visible column.
+    const cols: {
+      id: string;
+      items: FileSystemItem[];
+      selectedId: string | null;
+    }[] = [];
+    cols.push({
+      id: 'root',
+      items: FILESYSTEM,
+      selectedId: selectedPath[0] ?? null,
+    });
     let currentItems: FileSystemItem[] = FILESYSTEM;
     for (let i = 0; i < selectedPath.length; i++) {
       const selected = currentItems.find(item => item.id === selectedPath[i]);
       if (selected?.children && selected.children.length > 0) {
         cols.push({
+          id: selectedPath[i],
           items: selected.children,
           selectedId: selectedPath[i + 1] ?? null,
         });
@@ -381,76 +468,6 @@ export default function FileExplorer() {
       </Text>
     </>
   );
-  const viewSwitcher = (
-    <SegmentedControl
-      value="column"
-      onChange={() => {}}
-      label="View mode">
-      <SegmentedControlItem
-        value="grid"
-        label="Grid"
-        icon={<Icon icon={LayoutGrid} size="sm" />}
-        isLabelHidden
-      />
-      <SegmentedControlItem
-        value="list"
-        label="List"
-        icon={<Icon icon={Rows3} size="sm" />}
-        isLabelHidden
-      />
-      <SegmentedControlItem
-        value="column"
-        label="Column"
-        icon={<Icon icon={Columns} size="sm" />}
-        isLabelHidden
-      />
-      <SegmentedControlItem
-        value="gallery"
-        label="Gallery"
-        icon={<Icon icon={Table} size="sm" />}
-        isLabelHidden
-      />
-    </SegmentedControl>
-  );
-  const fileActions = (
-    <>
-      <IconButton
-        variant="ghost"
-        size="sm"
-        icon={<Icon icon={SlidersHorizontal} size="sm" />}
-        label="Group"
-        tooltip="Group"
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        icon={<Icon icon={Share2} size="sm" />}
-        label="Share"
-        tooltip="Share"
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        icon={<Icon icon={Tag} size="sm" />}
-        label="Tags"
-        tooltip="Tags"
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        icon={<Icon icon={Ellipsis} size="sm" />}
-        label="More"
-        tooltip="More"
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        icon={<Icon icon={Search} size="sm" />}
-        label="Search"
-        tooltip="Search"
-      />
-    </>
-  );
 
   return (
     <Layout
@@ -471,7 +488,13 @@ export default function FileExplorer() {
               variant="transparent"
               padding={2}
               dividers={['bottom']}>
-              <HStack gap={2} vAlign="center" style={controlsScroll}>
+              <HStack
+                gap={2}
+                vAlign="center"
+                style={controlsScroll}
+                role="region"
+                aria-label="View and file actions"
+                tabIndex={0}>
                 {viewSwitcher}
                 {fileActions}
               </HStack>
@@ -481,6 +504,9 @@ export default function FileExplorer() {
       }
       content={
         <LayoutContent padding={0} isScrollable={false}>
+          <VisuallyHidden as="h1">
+            File Explorer
+          </VisuallyHidden>
           <HStack height="100%" style={columnRow}>
             {visibleColumns.map((col, colIndex) => {
               const trueIndex = columnOffset + colIndex;
@@ -488,12 +514,22 @@ export default function FileExplorer() {
                 trueIndex < columns.length - 1 || selectedFile != null;
               return (
                 <Section
-                  key={trueIndex}
+                  key={col.id}
                   width={240}
                   padding={2}
                   variant="transparent"
                   dividers={showDivider ? ['end'] : undefined}
-                  style={{...scrollable, ...fixedColumn}}>
+                  style={{...scrollable, ...fixedColumn}}
+                  role="region"
+                  aria-label={`Folder column ${trueIndex + 1}`}
+                  tabIndex={0}>
+                  {col.items.length === 0 ? (
+                    <EmptyState
+                      title="Quiet in the crypt"
+                      description="This folder holds no scrolls yet."
+                      isCompact
+                    />
+                  ) : (
                   <List density="compact" hasDividers={false}>
                     {col.items.map(item => {
                       const isSelected = col.selectedId === item.id;
@@ -537,33 +573,46 @@ export default function FileExplorer() {
                       );
                     })}
                   </List>
+                  )}
                 </Section>
               );
             })}
             {selectedFile && (
               <Section
-                padding={6}
+                width={320}
+                // 16px, not 24. The sibling column at :519 is padding={2}
+                // (8px) because it holds a dense compact List, and these two
+                // sit in one HStack (:510) as columns of the same view --
+                // 24 beside 8 made the compact column look broken rather
+                // than compact. 16 is the outer-inset value this repo already
+                // uses for exactly this (scaffolds.md new-site recipe).
+                padding={4}
                 variant="transparent"
-                style={{...scrollable, ...detailColumn}}>
+                style={{...scrollable, ...detailColumn}}
+                role="region"
+                aria-label={`Details for ${selectedFile.name}`}
+                tabIndex={0}>
                 <VStack gap={4} hAlign="center">
                   <Avatar name={selectedFile.name} size={96} />
                   <VStack gap={1} hAlign="center">
-                    <Text type="label" maxLines={1}>
+                    <Text type="body" weight="semibold" maxLines={1}>
                       {selectedFile.name}
                     </Text>
-                    <Text type="supporting">
+                    <Text type="supporting" color="secondary">
                       {getFileExtension(selectedFile.name)} Document
                     </Text>
                   </VStack>
                   <MetadataList title="Information">
                     <MetadataListItem label="Created">
-                      March 28, 2026 at 2:15 PM
+                      <Text type="body">March 28, 2026 at 2:15 PM</Text>
                     </MetadataListItem>
                     <MetadataListItem label="Modified">
-                      Yesterday, 10:27 PM
+                      <Text type="body">Yesterday, 10:27 PM</Text>
                     </MetadataListItem>
                     <MetadataListItem label="Kind">
-                      {getFileExtension(selectedFile.name)} Document
+                      <Text type="body">
+                        {getFileExtension(selectedFile.name)} Document
+                      </Text>
                     </MetadataListItem>
                   </MetadataList>
                 </VStack>

package/templates/form-two-column.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > S.transparent[p=10] > V[g=10] > (G[c={min:280,max:2} g=10] > (V[g=6] > (V[g=3] > Hd"Let's conjure together"[level=1 t=display-1] + Tx"Tell us what you're brewing"[t=body]) + AR) + (C[p=4] > V[g=4] > Hd"Your details"[level=2] + TI"Full name"[req] + (G[c={min:180} g=3] > TI"Email"[req] + TI"Company") + (G[c={min:180} g=3] > TI"Job title" + TI"Phone") + (V[g=2] > Tx"Reason"[t=label] + (H[g=2] > Tk"Reason"*7)) + SE"Budget" + TA"Project details" + B.primary"Send it into the night")) + (V[g=6] > D + (G[c={min:200} g=6] > (V[g=1 a=center] > Tx"General"[t=supporting] + Lk"hello@castle.dracula")*3))
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -6,6 +8,7 @@ import {Center} from '@astryxdesign/core/Center';
 import {Section} from '@astryxdesign/core/Section';
 import {Grid} from '@astryxdesign/core/Grid';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {galleryImageClip} from 'astryx-dracula/shared/gallery-image';
 import {Button} from '@astryxdesign/core/Button';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
@@ -15,91 +18,10 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Card} from '@astryxdesign/core/Card';
 import {Selector} from '@astryxdesign/core/Selector';
-
-function CastleIllustration() {
-  return (
-    <svg
-      style={illustrationImg}
-      viewBox="0 0 400 300"
-      role="img"
-      aria-label="Moonlit castle where the night crew works">
-      <title>Castle office after dark</title>
-      <rect width="400" height="300" fill="var(--dracula-bg-dark)" />
-      <g fill="var(--dracula-purple)">
-        <circle cx="40" cy="40" r="2.5" />
-        <circle cx="120" cy="70" r="2" />
-        <circle cx="210" cy="36" r="2.5" />
-        <circle cx="330" cy="60" r="2" />
-      </g>
-      <g fill="var(--dracula-cyan)">
-        <circle cx="80" cy="55" r="2" />
-        <circle cx="170" cy="60" r="2" />
-        <circle cx="290" cy="36" r="2.5" />
-      </g>
-      <circle cx="315" cy="70" r="34" fill="var(--dracula-yellow)" />
-      <circle
-        cx="304"
-        cy="61"
-        r="6"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      <g
-        fill="none"
-        stroke="var(--dracula-purple)"
-        strokeWidth={3}
-        strokeLinecap="round">
-        <path d="M90 100 q9 -9 18 0 q9 -9 18 0" />
-        <path d="M180 84 q9 -9 18 0 q9 -9 18 0" />
-      </g>
-      <path
-        d="M0 220 Q140 180 260 210 T400 200 V300 H0 Z"
-        fill="var(--dracula-selection)"
-      />
-      <path
-        d="M0 255 Q160 225 320 250 T400 245 V300 H0 Z"
-        fill="var(--dracula-bg-light)"
-      />
-      <g>
-        <rect
-          x="140"
-          y="150"
-          width="120"
-          height="100"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="122"
-          y="122"
-          width="38"
-          height="128"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="240"
-          y="122"
-          width="38"
-          height="128"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <g fill="var(--dracula-yellow)">
-          <rect x="156" y="172" width="12" height="18" rx={2} />
-          <rect x="186" y="172" width="12" height="18" rx={2} />
-          <rect x="216" y="172" width="12" height="18" rx={2} />
-          <rect x="132" y="146" width="9" height="12" rx={2} />
-          <rect x="251" y="146" width="9" height="12" rx={2} />
-        </g>
-        <path
-          d="M185 250 v-24 a15 15 0 0 1 30 0 v24 Z"
-          fill="var(--dracula-bg-dark)"
-        />
-      </g>
-    </svg>
-  );
-}
+import {Banner} from '@astryxdesign/core/Banner';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Check} from 'lucide-react';
+import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
 
 const INQUIRY_REASONS = [
   'New business',
@@ -126,17 +48,12 @@ const CONTACT_COLUMNS = [
   {label: 'Press & partnerships', email: 'press@castle.dracula'},
 ];
 
-// AspectRatio has no radius prop and there's no Image primitive (#2582), so
-// the illustration carries its own corner radius directly.
+// Castle illustration lives in shared/scene-castle (`card` variant:
+// harvest-yellow moon, fg-stroke bats). Fill + radius-clip live in
+// shared/gallery-image (no Image primitive, #2582).
 const pageStyle: CSSProperties = {
   minHeight: '100%',
 };
-const illustrationImg: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-  borderRadius: 'var(--radius-container)',
-};
 
 /**
  * Form (Two-column) — marketing contact form template.
@@ -145,7 +62,12 @@ const illustrationImg: CSSProperties = {
  *   Top: two-column — left has headline + description + illustration,
  *        right has the contact form on a card.
  *   Bottom: three-column contact info strip.
- *   Mobile (<768px): single column stack.
+ *
+ * Responsive contract (both grids reflow on their own; no JS breakpoints):
+ *   Form grid (min 280px tracks, capped at 2 columns): two columns from a
+ *   680px viewport up, one column below that.
+ *   Contact strip (min 200px tracks): three columns from 728px, two columns
+ *   from 504px, one column below.
  */
 export default function TwoColumnForm() {
   const [fullName, setFullName] = useState('');
@@ -166,14 +88,18 @@ export default function TwoColumnForm() {
       }
     : {};
 
+  const isValid =
+    fullName.trim() !== '' &&
+    email.trim() !== '' &&
+    details.trim() !== '';
+
   const handleSubmit = () => setSubmitted(true);
 
   return (
     <Center style={pageStyle}>
       <Section maxWidth={1100} width="100%" padding={10} variant="transparent">
         <VStack gap={10}>
-          {/* Two-column; stacks to one column below ~520px. */}
-          <Grid columns={{minWidth: 320}} align="center" gap={10}>
+          <Grid columns={{minWidth: 280, max: 2}} align="center" gap={10}>
             <VStack gap={6}>
               <VStack gap={3}>
                 <Heading level={1} type="display-1">
@@ -184,18 +110,18 @@ export default function TwoColumnForm() {
                   the best path through the night.
                 </Text>
               </VStack>
-              <AspectRatio ratio={4 / 3}>
-                <CastleIllustration />
+              <AspectRatio ratio={4 / 3} style={galleryImageClip}>
+                <SceneCastle variant="card" />
               </AspectRatio>
             </VStack>
 
-            <Card padding={8}>
+            <Card padding={4}>
               <VStack gap={4}>
-                <Text type="label">Your details</Text>
+                <Heading level={2}>Your details</Heading>
                 <TextInput
                   label="Full name"
-                  isLabelHidden
-                  placeholder="Full name*"
+                  isRequired
+                  placeholder="Full name"
                   value={fullName}
                   onChange={setFullName}
                   status={
@@ -207,8 +133,8 @@ export default function TwoColumnForm() {
                 <Grid columns={{minWidth: 180}} gap={3}>
                   <TextInput
                     label="Email"
-                    isLabelHidden
-                    placeholder="Email*"
+                    isRequired
+                    placeholder="Email"
                     value={email}
                     onChange={setEmail}
                     status={
@@ -219,7 +145,6 @@ export default function TwoColumnForm() {
                   />
                   <TextInput
                     label="Company name"
-                    isLabelHidden
                     placeholder="Company name"
                     value={company}
                     onChange={setCompany}
@@ -228,14 +153,12 @@ export default function TwoColumnForm() {
                 <Grid columns={{minWidth: 180}} gap={3}>
                   <TextInput
                     label="Job title"
-                    isLabelHidden
                     placeholder="Job title"
                     value={jobTitle}
                     onChange={setJobTitle}
                   />
                   <TextInput
                     label="Phone number"
-                    isLabelHidden
                     placeholder="Phone number"
                     value={phone}
                     onChange={setPhone}
@@ -245,18 +168,27 @@ export default function TwoColumnForm() {
                 <VStack gap={2}>
                   <Text type="label">What are you reaching out about?</Text>
                   <HStack gap={2} wrap="wrap">
-                    {INQUIRY_REASONS.map(reason => (
-                      <Token
-                        key={reason}
-                        label={reason}
-                        color={inquiryReason === reason ? 'blue' : 'default'}
-                        onClick={() =>
-                          setInquiryReason(prev =>
-                            prev === reason ? '' : reason,
-                          )
-                        }
-                      />
-                    ))}
+                    {INQUIRY_REASONS.map(reason => {
+                      const isSelected = inquiryReason === reason;
+                      return (
+                        <Token
+                          key={reason}
+                          label={reason}
+                          color={isSelected ? 'yellow' : 'default'}
+                          icon={
+                            isSelected ? (
+                              <Icon icon={Check} size="xsm" color="inherit" />
+                            ) : undefined
+                          }
+                          description={isSelected ? 'Selected' : undefined}
+                          onClick={() =>
+                            setInquiryReason(prev =>
+                              prev === reason ? '' : reason,
+                            )
+                          }
+                        />
+                      );
+                    })}
                   </HStack>
                 </VStack>
                 <Selector
@@ -264,12 +196,12 @@ export default function TwoColumnForm() {
                   options={BUDGET_OPTIONS}
                   value={budget}
                   onChange={setBudget}
-                  placeholder="Select a budget range..."
+                  placeholder="Select a budget range…"
                 />
                 <TextArea
                   label="Project details"
-                  isLabelHidden
-                  placeholder="Project details*"
+                  isRequired
+                  placeholder="Project details"
                   value={details}
                   onChange={setDetails}
                   status={
@@ -278,6 +210,13 @@ export default function TwoColumnForm() {
                       : undefined
                   }
                 />
+                {submitted && isValid && (
+                  <Banner
+                    status="success"
+                    title="Sent into the night"
+                    description="The coven received your message and will answer after dark."
+                  />
+                )}
                 {/* hAlign="stretch" = full-width button workaround; Button
                     has no full-width prop (#2600). */}
                 <VStack hAlign="stretch">
@@ -291,7 +230,6 @@ export default function TwoColumnForm() {
             </Card>
           </Grid>
 
-          {/* Contact strip; stacks below ~440px. */}
           <VStack gap={6}>
             <Divider />
             <Grid columns={{minWidth: 200}} gap={6}>
@@ -300,7 +238,7 @@ export default function TwoColumnForm() {
                   <Text type="supporting" color="secondary">
                     {col.label}
                   </Text>
-                  <Link href={`mailto:${col.email}`} type="body" size="sm">
+                  <Link href={`mailto:${col.email}`}>
                     {col.email}
                   </Link>
                 </VStack>