astryx-dracula 0.2.0 → 0.3.0

package/templates/settings.tsx

@@ -1,4 +1,22 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > H[a=center wrap] > (SI[fill] > Hd"Settings"[level=1 t=display-2]) + TY"Search") + (LP[w=260 p=2] > UL > LI*6) + (LC[p=6] > V[g=4] > (V[a=center] > TabList) + ((G[c={min:280} g=8] > (V[g=1] > Hd"Basic information"[level=2] + Tx"View and update your details"[t=body]) + (V[g=4] > TI"Username" + TI"Email address" + (H > B.primary"Save"))) + D)*3)
+
+/**
+ * Settings — one scrolling page of account sections.
+ *
+ * Frame: Layout header (title + settings search) | optional 260px section nav |
+ * content column of three section grids, divided.
+ *
+ * Responsive contract:
+ *   > 768px  the section nav is a 260px LayoutPanel beside the content
+ *   <= 768px the panel is dropped, the nav collapses to a centered TabList
+ *            above the content, the header search wraps under the title, and
+ *            every section grid falls to one column (280px floor)
+ *
+ * Seam rule: nav/content whitespace pairs use hasDivider=false (LayoutPanel
+ * beside LayoutContent); dialog chrome and inset panels keep their divider.
+ */
 
 import {useState} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
@@ -32,6 +50,12 @@ const NAV_ITEMS = [
   'API',
 ];
 
+// WCAG 1.3.5 wants autocomplete on identity fields. TextInput forwards unknown
+// props to the <input>, but its prop type omits input-only attributes, so the
+// attribute is spread in through a widened record.
+const inputAutoComplete = (value: string) =>
+  ({autoComplete: value}) as Record<string, string>;
+
 const SETTINGS_ITEMS: SearchableItem[] = [
   {id: '1', label: 'Username'},
   {id: '2', label: 'First name'},
@@ -69,17 +93,17 @@ export default function SettingsTemplate() {
   return (
     <Layout
       height="fill"
-      contentWidth={1440}
+      contentWidth={1200}
       header={
-        <LayoutHeader hasDivider>
-          <HStack vAlign="center">
+        <LayoutHeader hasDivider padding={6}>
+          <HStack vAlign="center" wrap="wrap">
             <StackItem size="fill">
-              <Heading level={1}>Settings</Heading>
+              <Heading level={1} type="display-2">Settings</Heading>
             </StackItem>
             <Typeahead
               label="Search"
               isLabelHidden
-              placeholder="Search coven settings..."
+              placeholder="Search coven settings…"
               searchSource={settingsSearchSource}
               value={searchValue}
               onChange={setSearchValue}
@@ -106,7 +130,7 @@ export default function SettingsTemplate() {
         )
       }
       content={
-        <LayoutContent padding={4}>
+        <LayoutContent padding={6}>
           <VStack gap={4}>
             {/* Mobile: the sidebar nav collapses to a horizontal, centered
                 tab bar above the content. */}
@@ -126,9 +150,9 @@ export default function SettingsTemplate() {
                 </TabList>
               </VStack>
             )}
-            <Grid columns={{minWidth: 320}} gap={10}>
+            <Grid columns={{minWidth: 280}} gap={8}>
               <VStack gap={1}>
-                <Heading level={3}>Basic information</Heading>
+                <Heading level={2}>Basic information</Heading>
                 <Text type="body" color="secondary">
                   View and update your crypt details and coven account information.
                 </Text>
@@ -151,6 +175,8 @@ export default function SettingsTemplate() {
                 />
                 <TextInput
                   label="Email address"
+                  type="email"
+                  {...inputAutoComplete('email')}
                   value={email}
                   onChange={setEmail}
                 />
@@ -162,9 +188,9 @@ export default function SettingsTemplate() {
 
             <Divider />
 
-            <Grid columns={{minWidth: 320}} gap={10}>
+            <Grid columns={{minWidth: 280}} gap={8}>
               <VStack gap={1}>
-                <Heading level={3}>Change password</Heading>
+                <Heading level={2}>Change password</Heading>
                 <Text type="body" color="secondary">
                   Update your password to keep your coffin sealed.
                 </Text>
@@ -173,18 +199,21 @@ export default function SettingsTemplate() {
                 <TextInput
                   label="Verify current password"
                   type="password"
+                  {...inputAutoComplete('current-password')}
                   value={currentPw}
                   onChange={setCurrentPw}
                 />
                 <TextInput
                   label="New password"
                   type="password"
+                  {...inputAutoComplete('new-password')}
                   value={newPw}
                   onChange={setNewPw}
                 />
                 <TextInput
                   label="Confirm password"
                   type="password"
+                  {...inputAutoComplete('new-password')}
                   value={confirmPw}
                   onChange={setConfirmPw}
                 />
@@ -196,14 +225,14 @@ export default function SettingsTemplate() {
 
             <Divider />
 
-            <Grid columns={{minWidth: 320}} gap={10}>
+            <Grid columns={{minWidth: 280}} gap={8}>
               <VStack gap={1}>
-                <Heading level={3}>Advanced settings</Heading>
+                <Heading level={2}>Advanced settings</Heading>
                 <Text type="body" color="secondary">
                   Configure detailed coven preferences and warding options.
                 </Text>
               </VStack>
-              <VStack gap={5}>
+              <VStack gap={4}>
                 <CheckboxInput
                   label="Data Export Access"
                   description="Allow export of personal data and backups."

package/templates/shell-nav.tsx

@@ -1,4 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=0 @topNav=(TN) @sideNav=(SN > TL)] > L > (LH[divider] > H[g=2 wrap] > C.muted[p=0]*3) + (LC[p=6] > V[g=2] > (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*3 + C.muted[p=0] + (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*4 + C.muted[p=0] + (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*5)
+// Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
+// exemption) — routed pages supply the h1.
 
 import {Fragment, useState, useMemo, useEffect} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';
@@ -75,9 +79,9 @@ const MENUS: {label: string; groups: MenuEntry[][]}[] = [
         ['New Window', '⇧⌘N'],
       ],
       [
-        ['Open...', '⌘O'],
+        ['Open…', '⌘O'],
         ['Save', '⌘S'],
-        ['Save As...', '⇧⌘S'],
+        ['Save As…', '⇧⌘S'],
       ],
       [['Close Editor', '⌘W']],
     ],
@@ -139,20 +143,20 @@ const MENUS: {label: string; groups: MenuEntry[][]}[] = [
 ];
 
 const CODE_LINES = [
-  '38%',
-  '62%',
-  '54%',
-  '0%',
-  '46%',
-  '70%',
-  '58%',
-  '34%',
-  '0%',
-  '50%',
-  '66%',
-  '42%',
-  '60%',
-  '28%',
+  {id: 'line-1', width: '38%'},
+  {id: 'line-2', width: '62%'},
+  {id: 'line-3', width: '54%'},
+  {id: 'line-4', width: '0%'},
+  {id: 'line-5', width: '46%'},
+  {id: 'line-6', width: '70%'},
+  {id: 'line-7', width: '58%'},
+  {id: 'line-8', width: '34%'},
+  {id: 'line-9', width: '0%'},
+  {id: 'line-10', width: '50%'},
+  {id: 'line-11', width: '66%'},
+  {id: 'line-12', width: '42%'},
+  {id: 'line-13', width: '60%'},
+  {id: 'line-14', width: '28%'},
 ];
 
 const EDITOR_TABS = ['AppShell.tsx', 'TopNav.tsx', 'theme.ts'];
@@ -201,8 +205,11 @@ export default function ShellNav() {
                     button={{label: menu.label, variant: 'ghost', size: 'sm'}}
                     hasChevron={false}
                     menuWidth={MENU_WIDTH}>
+                    {/* Keyed by the group's first label, not its position:
+                        an index key remounts every group when the menu
+                        data shifts. `gi` only decides the divider. */}
                     {menu.groups.map((group, gi) => (
-                      <Fragment key={gi}>
+                      <Fragment key={group[0][0]}>
                         {gi > 0 && <Divider />}
                         {group.map(([label, shortcut]) => (
                           <DropdownMenuItem
@@ -247,7 +254,8 @@ export default function ShellNav() {
           height="fill"
           header={
             <LayoutHeader hasDivider padding={6}>
-              <HStack gap={2}>
+              {/* Wraps rather than clipping: three 132px tabs need ~410px. */}
+              <HStack gap={2} wrap="wrap">
                 {EDITOR_TABS.map(tab => (
                   <Card
                     key={tab}
@@ -262,18 +270,19 @@ export default function ShellNav() {
           }
           content={
             <LayoutContent padding={6}>
+              {/* Skeleton chrome only — the open file supplies the h1. */}
               <VStack gap={2}>
-                {CODE_LINES.map((width, i) =>
-                  width === '0%' ? (
+                {CODE_LINES.map(line =>
+                  line.width === '0%' ? (
                     <Card
-                      key={i}
+                      key={line.id}
                       variant="muted"
                       padding={0}
                       width={1}
                       height={14}
                     />
                   ) : (
-                    <HStack key={i} gap={3} vAlign="center">
+                    <HStack key={line.id} gap={3} vAlign="center">
                       <Card
                         variant="muted"
                         padding={0}
@@ -283,7 +292,7 @@ export default function ShellNav() {
                       <Card
                         variant="muted"
                         padding={0}
-                        width={width}
+                        width={line.width}
                         height={14}
                       />
                     </HStack>

package/templates/shell-side-nav.tsx

@@ -1,4 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=0 @sideNav=(SN > SNI"New chat" + SNI"Search" + SNI"Library" + D + (SNI"Personal" > SNI"Full-moon rite planning")*3)] > L > (LC[p=6] > V[g=5] > (H > C.muted[p=0])*4) + (LF > TI"Message Night Owl")
+// Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
+// exemption) — routed pages supply the h1.
 
 import {useState} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';
@@ -48,39 +52,43 @@ const WORKSPACES: Workspace[] = [
     icon: User,
     chats: [
       {
-        label: 'Weekend trip planning',
+        label: 'Full-moon rite planning',
         status: 'success',
         statusLabel: 'Active',
       },
       {
-        label: 'Recipe ideas for the week',
+        label: 'Potion recipes for the week',
         status: 'neutral',
         statusLabel: 'Idle',
       },
       {
-        label: 'Book recommendations',
+        label: 'Grimoire recommendations',
         status: 'warning',
         statusLabel: 'Needs review',
       },
-      {label: 'Home workout plan', status: 'neutral', statusLabel: 'Idle'},
+      {label: 'Crypt workout plan', status: 'neutral', statusLabel: 'Idle'},
     ],
   },
   {
-    name: 'Acme Corp',
+    name: 'Night Watch',
     icon: Building2,
     chats: [
-      {label: 'Q3 roadmap draft', status: 'accent', statusLabel: 'In progress'},
       {
-        label: 'Customer onboarding flow',
+        label: 'Crypt expansion draft',
+        status: 'info',
+        statusLabel: 'In progress',
+      },
+      {
+        label: 'Neonate welcoming rite',
         status: 'success',
         statusLabel: 'Active',
       },
       {
-        label: 'Pricing strategy review',
+        label: 'Tribute ledger review',
         status: 'warning',
         statusLabel: 'Needs review',
       },
-      {label: 'Standup summary', status: 'neutral', statusLabel: 'Idle'},
+      {label: 'Night-watch summary', status: 'neutral', statusLabel: 'Idle'},
     ],
   },
   {
@@ -88,12 +96,12 @@ const WORKSPACES: Workspace[] = [
     icon: CodeXml,
     chats: [
       {
-        label: 'StyleX migration notes',
-        status: 'accent',
+        label: 'Coven theme migration notes',
+        status: 'info',
         statusLabel: 'In progress',
       },
       {
-        label: 'Skeleton loading states',
+        label: 'Crypt loading states',
         status: 'success',
         statusLabel: 'Active',
       },
@@ -103,16 +111,18 @@ const WORKSPACES: Workspace[] = [
   },
 ];
 
-const SELECTED_CHAT = 'StyleX migration notes';
+const SELECTED_CHAT = 'Coven theme migration notes';
 // Same-route hash: demo links stay focusable anchors without escaping the
 // template through the hash router (bare "#" would drop back to the home page).
 const SELF_HASH = '#/templates/shell-side-nav';
 
+// `id` carries the React key: the bubbles are positional placeholders, and an
+// index key would remount every row below an inserted one.
 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},
+  {id: 'context', role: 'assistant', width: '78%', height: 104},
+  {id: 'follow-up', role: 'user', width: '48%', height: 48},
+  {id: 'answer', role: 'assistant', width: '64%', height: 132},
+  {id: 'reply', role: 'user', width: '38%', height: 40},
 ];
 
 function ConversationItem({
@@ -204,10 +214,11 @@ export default function ShellSideNav() {
         contentWidth={768}
         content={
           <LayoutContent padding={6}>
+            {/* Skeleton chrome only — the routed conversation supplies the h1. */}
             <VStack gap={5}>
-              {MESSAGES.map((message, mi) => (
+              {MESSAGES.map(message => (
                 <HStack
-                  key={mi}
+                  key={message.id}
                   hAlign={message.role === 'assistant' ? 'start' : 'end'}>
                   <Card
                     variant="muted"

package/templates/shell-top-nav.tsx

@@ -1,4 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=6 @topNav=(TN > TNI"Shop" + TNI"Brands" + TNI"Sale" + TNI"Service")] > Ctr[axis=horizontal] > S[mw=1100 w=100% p=0] > V[g=10] > C.muted[p=0 w=100% h=360] + (V[g=4] > C.muted[p=0 w=200 h=24] + (G[c={min:160} g=4] > (V[g=2] > C.muted[p=0 w=100% h=120] + C.muted[p=0 w=60% h=14])*6))*3
+// Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
+// exemption) — routed pages supply the h1.
 
 import type {CSSProperties} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';
@@ -19,7 +23,9 @@ 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 {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
+import {Section} from '@astryxdesign/core/Section';
 import {Stack, VStack} from '@astryxdesign/core/Stack';
 import {
   ShoppingBag,
@@ -42,7 +48,7 @@ import {
 } from 'lucide-react';
 
 // Cap + center the page body so wide screens show whitespace gutters.
-const contentMax: CSSProperties = {maxWidth: 1100, marginInline: 'auto'};
+const CONTENT_MAX_WIDTH = 1100;
 // Same-route hash: demo links stay focusable anchors without escaping the
 // template through the hash router (bare "#" would drop back to the home page).
 const SELF_HASH = '#/templates/shell-top-nav';
@@ -50,51 +56,60 @@ const SELF_HASH = '#/templates/shell-top-nav';
 // 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.
+// pixel-identical so the transition is seamless. The pair needs roughly
+// 800px of clear space, so narrower viewports fall back to natural-width
+// single columns (see MegaItems) instead of painting past the edge.
 const megaItems: CSSProperties = {gridColumn: '1 / -1', width: 520};
 const megaFeatured: CSSProperties = {width: 240};
 
+// Three identical shelves; the ids keep React keys stable if they reorder.
+const SHELVES = ['new-in', 'featured', 'sale'];
+
 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: Sparkles},
-  {name: 'Womenswear', tagline: 'Dresses, knitwear & more', icon: SwatchBook},
-  {name: 'Menswear', tagline: 'Shirts, tailoring & more', icon: Tag},
-  {name: 'Home', tagline: 'Bedding, lighting & décor', icon: House},
+  {name: 'New Moon Arrivals', tagline: 'Fresh from the kiln', icon: Sparkles},
+  {
+    name: 'Gowns & Cloaks',
+    tagline: 'Dresses, knitwear & moonlit layers',
+    icon: SwatchBook,
+  },
+  {name: 'Doublets & Tailoring', tagline: 'Shirts, cloaks & more', icon: Tag},
+  {name: 'Keep & Crypt', tagline: 'Bedding, candlelight & décor', icon: House},
   {
-    name: 'Beauty',
-    tagline: 'Skincare, fragrance & makeup',
+    name: 'Potions',
+    tagline: 'Salves, scents & powders',
     icon: Smile,
   },
   {
-    name: 'Accessories',
-    tagline: 'Bags, hats & sunglasses',
+    name: 'Relics',
+    tagline: 'Satchels, hats & moonshades',
     icon: ShoppingBag,
   },
   {name: 'Sale', tagline: 'Up to 50% off', icon: BadgePercent},
-  {name: 'Gift Cards', tagline: 'The perfect present', icon: Gift},
+  {name: 'Gift Tokens', tagline: 'The perfect tribute', icon: Gift},
 ];
 
 const BRAND_ITEMS: MegaItem[] = [
-  {name: 'Aether', tagline: 'Performance essentials', icon: Sparkles},
-  {name: 'Northwind', tagline: 'Outdoor & technical', icon: Cloud},
-  {name: 'Loomwell', tagline: 'Everyday knitwear', icon: Zap},
-  {name: 'Verdant', tagline: 'Sustainable basics', icon: Sun},
-  {name: 'Studio Mara', tagline: 'Modern tailoring', icon: Star},
-  {name: 'Atelier Kos', tagline: 'Limited ateliers', icon: Flame},
-  {name: 'Rue & Co', tagline: 'City streetwear', icon: Globe},
-  {name: 'Halden', tagline: 'Minimal staples', icon: Moon},
+  {name: 'Aether', tagline: 'Moonlit essentials', icon: Sparkles},
+  {name: 'Northcrypt', tagline: 'Cold-weather & travel', icon: Cloud},
+  {name: 'Loomwell', tagline: 'Everyday knitwear, coven-stitched', icon: Zap},
+  {name: 'Verdant', tagline: 'Earth-kept basics', icon: Sun},
+  {name: 'Studio Mara', tagline: 'Modern tailoring for the night', icon: Star},
+  {name: 'Atelier Kos', tagline: 'Small-batch ateliers', icon: Flame},
+  {name: 'Rue & Co', tagline: 'Old-town streetwear', icon: Globe},
+  {name: 'Halden', tagline: 'Spare, lasting staples', icon: Moon},
 ];
 
 const CATEGORY_TILES = [
-  'New Arrivals',
-  'Womenswear',
-  'Menswear',
-  'Home & Living',
-  'Beauty',
-  'Accessories',
+  'New Moon Arrivals',
+  'Gowns & Cloaks',
+  'Doublets & Tailoring',
+  'Keep & Crypt',
+  'Potions',
+  'Relics',
 ];
 
 // Wraps the 8 items in a fixed-width 2-column grid so every mega menu's item
@@ -102,9 +117,12 @@ const CATEGORY_TILES = [
 function MegaItems({items}: {items: MegaItem[]}) {
   // In the mobile drawer the fixed 520px panel would overflow the ~350px
   // drawer, and the 2-column grid overlaps item text there — so the drawer
-  // gets a natural-width single column. Desktop keeps the lock.
+  // gets a natural-width single column. The same goes for viewports too
+  // narrow to seat the locked desktop panel, which would otherwise paint
+  // past the edge: below 1024px the popover keeps the natural-width column.
   const isDrawer = useTopNavRenderMode() === 'drawer';
-  if (isDrawer) {
+  const isCompact = useMediaQuery('(max-width: 1024px)');
+  if (isDrawer || isCompact) {
     return (
       <VStack gap={1}>
         {items.map(item => (
@@ -144,8 +162,9 @@ function MegaFeatured(props: {
   linkHref: string;
 }) {
   const isDrawer = useTopNavRenderMode() === 'drawer';
+  const isCompact = useMediaQuery('(max-width: 1024px)');
   return (
-    <Stack style={isDrawer ? undefined : megaFeatured}>
+    <Stack style={isDrawer || isCompact ? undefined : megaFeatured}>
       <TopNavMegaMenuFeaturedCard {...props} />
     </Stack>
   );
@@ -221,23 +240,42 @@ export default function ShellTopNav() {
           }
         />
       }>
-      <VStack gap={10} style={contentMax}>
-        <Card variant="muted" padding={0} width="100%" height={360} />
+      <Center axis="horizontal">
+        <Section
+          variant="transparent"
+          maxWidth={CONTENT_MAX_WIDTH}
+          width="100%"
+          padding={0}>
+          <VStack gap={10}>
+            {/* Skeleton shelves only — the routed collection supplies the h1. */}
+            <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 columns={{minWidth: 160, repeat: 'fit'}} 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>
+            {SHELVES.map(shelf => (
+              <VStack key={shelf} gap={4}>
+                <Card variant="muted" padding={0} width={200} height={24} />
+                <Grid columns={{minWidth: 160, repeat: 'fit'}} 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>
-        ))}
-      </VStack>
+        </Section>
+      </Center>
     </AppShell>
   );
 }