astryx-dracula 0.3.0 → 0.4.0

package/templates/detail-page.tsx

@@ -216,7 +216,9 @@ function PageHeader({
       <VStack gap={3}>
         <HStack gap={4} vAlign="start">
           <StackItem size="fill">
-            <VStack gap={0}>
+            {/* gap={2}: the breadcrumb is a control, not a text-baseline
+                pairing, so it needs separation from the H1 rather than 0. */}
+            <VStack gap={2}>
               <Link href="#/templates/detail-page">
                 <HStack gap={1} vAlign="center">
                   <Icon icon={ArrowLeft} size="sm" color="inherit" />
@@ -502,8 +504,8 @@ function TimelineSection() {
   return (
     <Section>
       <VStack gap={4}>
-        {/* gap={2}, matching the byte-identical header rows at :338 and
-            :407. Core's Stack has no default gap (Stack.tsx:211, pass-through
+        {/* gap={2}, matching the byte-identical header rows at :340 and
+            :408. Core's Stack has no default gap (Stack.tsx:211, pass-through
             at :255/:285), so this rendered 0px -- the heading and the Filters
             button touched -- while both siblings render 8px. */}
         <HStack gap={2} vAlign="center">
@@ -582,11 +584,16 @@ function PanelContent() {
   return (
     <VStack gap={4}>
       <Collapsible trigger={<Heading level={3}>Notes</Heading>}>
+        {/* "Show more" closes the sentence inside the Text below, so it is
+            prose and asks for `hasUnderline` — colour alone is not a
+            sufficient cue inline (1.4.1 / F73). `type="inherit"` adopts the
+            paragraph's size and leading. The two links in the header are
+            navigation, so they pass neither. */}
         <Text type="body">
           Customer is a repeat buyer, 3rd order this quarter. Prefers
           moonlight and sage glazes. Requested gift wrapping for the mug set.
           Ships to a residential address in CA.{' '}
-          <Link href="#/templates/detail-page">
+          <Link href="#/templates/detail-page" hasUnderline type="inherit">
             Show more
           </Link>
         </Text>

package/templates/documentation-design.tsx

@@ -29,7 +29,7 @@ import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Tooltip} from '@astryxdesign/core/Tooltip';
-import {Table, pixel} from '@astryxdesign/core/Table';
+import {Table, pixel, proportional} from '@astryxdesign/core/Table';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
@@ -42,6 +42,17 @@ const tabListFlush: CSSProperties = {
   marginInlineStart: 'calc(var(--spacing-3) * -1)',
 };
 
+// The best-practices table lives in the prose column, where the eye tracks a
+// single measure. Table's scroll wrapper bleeds edge-to-edge by reading the
+// container padding vars LayoutContent publishes (32px here), which pushes
+// its dividers 32px past the measure on both sides at every width. This table
+// never overflows, so the bleed buys nothing — zero the vars for this subtree
+// so it sits on the measure with the headings above it.
+const practicesOnMeasure: CSSProperties = ({
+  '--container-padding-inline-start': '0px',
+  '--container-padding-inline-end': '0px',
+}) as CSSProperties;
+
 const COMPONENT_OUTLINE_ITEMS: OutlineItem[] = [
   {id: 'usage', label: 'Usage', level: 2},
   {id: 'best-practices', label: 'Best practices', level: 3},
@@ -635,34 +646,37 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
               <Heading id="best-practices" level={3}>
                 Best practices
               </Heading>
-              <Table
-                data={docs.bestPractices as Record<string, unknown>[]}
-                dividers="none"
-                hasHover
-                columns={[
-                  {
-                    key: 'type',
-                    header: 'Guidance',
-                    width: pixel(125),
-                    renderCell: (item: Record<string, unknown>) => (
-                      <Badge
-                        label={item.type === 'do' ? 'Do' : "Don't"}
-                        variant={item.type === 'do' ? 'green' : 'red'}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'text',
-                    header: 'Practices',
-                    renderCell: (item: Record<string, unknown>) => (
-                      <Text type="body" textWrap="wrap">
-                        {item.text as string}
-                      </Text>
-                    ),
-                  },
-                ]}
-                density="spacious"
-              />
+              <div style={practicesOnMeasure}>
+                <Table
+                  data={docs.bestPractices as Record<string, unknown>[]}
+                  dividers="none"
+                  hasHover
+                  columns={[
+                    {
+                      key: 'type',
+                      header: 'Guidance',
+                      width: pixel(125),
+                      renderCell: (item: Record<string, unknown>) => (
+                        <Badge
+                          label={item.type === 'do' ? 'Do' : "Don't"}
+                          variant={item.type === 'do' ? 'green' : 'red'}
+                        />
+                      ),
+                    },
+                    {
+                      key: 'text',
+                      header: 'Practices',
+                      width: proportional(1),
+                      renderCell: (item: Record<string, unknown>) => (
+                        <Text type="body" textWrap="wrap">
+                          {item.text as string}
+                        </Text>
+                      ),
+                    },
+                  ]}
+                  density="spacious"
+                />
+              </div>
             </VStack>
 
             <Divider />

package/templates/documentation-technical.tsx

@@ -30,7 +30,7 @@ import {outlinePanel} from 'astryx-dracula/shared/chaptered-doc-config';
 // Same prompt in the copy action and the visible body: one string, so the
 // two can never drift.
 const SETUP_PROMPT =
-  'Help me get set up with Astryx Dracula. Based on my project, do the following: 1. Install @astryxdesign/core and the StyleX compiler. 2. Wrap my app in ThemeProvider. 3. Replace one existing component with an Astryx equivalent. After setup, suggest relevant next steps based on my project.';
+  'Help me get set up with Astryx Dracula. Based on my project, do the following: 1. Install @astryxdesign/core and the StyleX compiler. 2. Wrap my app in the Theme component. 3. Replace one existing component with an Astryx equivalent. After setup, suggest relevant next steps based on my project.';
 
 // Copies the setup prompt in the shape each tool wants to receive it. The
 // menu cannot navigate anywhere from a static template, so the action says
@@ -138,8 +138,8 @@ export default function DocumentationTechnical() {
                 <Text type="body" color="secondary">
                   Help me get set up with Astryx Dracula. Based on my project,
                   do the following: 1. Install @astryxdesign/core and the
-                  StyleX compiler. 2. Wrap my app in ThemeProvider. 3. Replace
-                  one existing component with an Astryx equivalent.
+                  StyleX compiler. 2. Wrap my app in the Theme component. 3.
+                  Replace one existing component with an Astryx equivalent.
                 </Text>
               </VStack>
             </Card>
@@ -225,17 +225,19 @@ export default function App() {
               </Heading>
               <Text type="body">
                 Astryx ships with a default theme that works out of the box. To
-                customize colors, typography, and spacing, wrap your app in a
-                theme provider.
+                customize colors, typography, and spacing, wrap your app in the
+                Theme component.
               </Text>
               <CodeBlock
-                code={`import { ThemeProvider } from '@astryxdesign/core/Theme';
+                code={`import { type ReactNode } from 'react';
+import { Theme } from '@astryxdesign/core/theme';
+import { astryxDraculaTheme } from 'astryx-dracula';
 
-export default function App({ children }) {
+export default function App({ children }: { children: ReactNode }) {
   return (
-    <ThemeProvider theme="default">
+    <Theme theme={astryxDraculaTheme} mode="dark">
       {children}
-    </ThemeProvider>
+    </Theme>
   );
 }`}
                 language="tsx"

package/templates/file-explorer.tsx

@@ -436,6 +436,15 @@ export default function FileExplorer() {
     return item?.type === 'file' ? item : null;
   }, [selectedPath]);
 
+  // Narrow mode is one pane at a time, the same master→detail shape the
+  // folder columns already use: the deepest column, or the file preview when
+  // the selection ends on a file. Beside each other the column and the
+  // preview need 240 + 320 = 560px, so in a 390px pane the preview was cut at
+  // the viewport edge with nothing to scroll it into view. "Go back" (:464)
+  // pops the selected file off the path, so it is also the way back from the
+  // preview to the column.
+  const isPreviewPane = isNarrow && selectedFile != null;
+
   const handleSelect = (columnIndex: number, itemId: string) => {
     setSelectedPath([...selectedPath.slice(0, columnIndex), itemId]);
   };
@@ -508,81 +517,84 @@ export default function FileExplorer() {
             File Explorer
           </VisuallyHidden>
           <HStack height="100%" style={columnRow}>
-            {visibleColumns.map((col, colIndex) => {
-              const trueIndex = columnOffset + colIndex;
-              const showDivider =
-                trueIndex < columns.length - 1 || selectedFile != null;
-              return (
-                <Section
-                  key={col.id}
-                  width={240}
-                  padding={2}
-                  variant="transparent"
-                  dividers={showDivider ? ['end'] : undefined}
-                  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;
-                      const hasChildren =
-                        item.type === 'folder' &&
-                        item.children != null &&
-                        item.children.length > 0;
-                      return (
-                        <ListItem
-                          key={item.id}
-                          label={
-                            <Text type="body" maxLines={1}>
-                              {item.name}
-                            </Text>
-                          }
-                          startContent={
-                            <Icon
-                              icon={
-                                item.type === 'folder'
-                                  ? Folder
-                                  : FileText
-                              }
-                              color={
-                                item.type === 'folder' ? 'accent' : 'secondary'
-                              }
-                              size="sm"
-                            />
-                          }
-                          endContent={
-                            hasChildren ? (
+            {!isPreviewPane &&
+              visibleColumns.map((col, colIndex) => {
+                const trueIndex = columnOffset + colIndex;
+                const showDivider =
+                  trueIndex < columns.length - 1 || selectedFile != null;
+                return (
+                  <Section
+                    key={col.id}
+                    width={240}
+                    padding={2}
+                    variant="transparent"
+                    dividers={showDivider ? ['end'] : undefined}
+                    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;
+                        const hasChildren =
+                          item.type === 'folder' &&
+                          item.children != null &&
+                          item.children.length > 0;
+                        return (
+                          <ListItem
+                            key={item.id}
+                            label={
+                              <Text type="body" maxLines={1}>
+                                {item.name}
+                              </Text>
+                            }
+                            startContent={
                               <Icon
-                                icon={ChevronRight}
-                                size="xsm"
-                                color="secondary"
+                                icon={
+                                  item.type === 'folder'
+                                    ? Folder
+                                    : FileText
+                                }
+                                color={
+                                  item.type === 'folder'
+                                    ? 'accent'
+                                    : 'secondary'
+                                }
+                                size="sm"
                               />
-                            ) : undefined
-                          }
-                          onClick={() => handleSelect(trueIndex, item.id)}
-                          isSelected={isSelected}
-                        />
-                      );
-                    })}
-                  </List>
-                  )}
-                </Section>
-              );
-            })}
+                            }
+                            endContent={
+                              hasChildren ? (
+                                <Icon
+                                  icon={ChevronRight}
+                                  size="xsm"
+                                  color="secondary"
+                                />
+                              ) : undefined
+                            }
+                            onClick={() => handleSelect(trueIndex, item.id)}
+                            isSelected={isSelected}
+                          />
+                        );
+                      })}
+                    </List>
+                    )}
+                  </Section>
+                );
+              })}
             {selectedFile && (
               <Section
-                width={320}
-                // 16px, not 24. The sibling column at :519 is padding={2}
+                width={isPreviewPane ? '100%' : 320}
+                // 16px, not 24. The sibling column at :529 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 --
+                // sit in one HStack (:519) 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).

package/templates/form-two-column.tsx

@@ -238,7 +238,7 @@ export default function TwoColumnForm() {
                   <Text type="supporting" color="secondary">
                     {col.label}
                   </Text>
-                  <Link href={`mailto:${col.email}`}>
+                  <Link href={`mailto:${col.email}`} hasUnderline>
                     {col.email}
                   </Link>
                 </VStack>

package/templates/ide.tsx

@@ -226,16 +226,16 @@ export default function IdeWorkspace() {
 
   const startPanel = useResizable({
     defaultSize: 256,
-    minSizePx: 160,
-    maxSizePx: 400,
+    minSize: 160,
+    maxSize: 400,
     collapsible: true,
     collapsedSize: 50,
   });
 
   const endPanel = useResizable({
     defaultSize: 320,
-    minSizePx: 180,
-    maxSizePx: 500,
+    minSize: 180,
+    maxSize: 500,
     collapsible: true,
     collapsedSize: 50,
   });
@@ -244,8 +244,8 @@ export default function IdeWorkspace() {
   // has no minimum of its own, and an unbounded drag leaves nothing to grab.
   const bottomPanel = useResizable({
     defaultSize: 300,
-    minSizePx: 80,
-    maxSizePx: 520,
+    minSize: 80,
+    maxSize: 520,
     collapsible: true,
     collapsedSize: 40,
   });

package/templates/incident-console.tsx

@@ -1,6 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH > H[g3 a=center] > (H[g2 a=center] > Hd"Night watch"[level=1] + Tx"3 investigating"[t=supporting]) + SegmentedControl"Filter by status" + B"Declare incident") + (LC[p0] > V[g0] > (H > PowerSearch"Search the night watch…") + (List > (ListItem)*7)) + (LayoutPanel[w380 p0] > V[g4] > (V[g2] > (H[g2 a=center] > StatusDot + Tx"INC-2417"[t=supporting] + Token"Investigating") + Hd"Checkout API elevated 5xx rate"[level=2]) + (H[g2] > B.primary"Mark mitigated" + B.secondary"Escalate") + Divider + MetadataList + Divider + (V[g2] > Hd"Timeline"[level=3] + List))
+// NOTE on `t=display-2`: the h1 asked for display-2 from the start, but
+// core 0.3.0's Heading emitted no `data-type`, and the 0.3.0 CLI emitted no
+// `.astryx-heading[data-type]` rule, so --text-display-2-size never reached a
+// heading and the 24px level-1 default leaked through. core+CLI 0.6.3 restored
+// the path, so this title now renders at its declared 35px. Verified by
+// pixel-diffing the pre-upgrade build against this one at 1440 and 390: the
+// only regression was this header detaching at 390, fixed by stacking the
+// title group under `isNarrow`.
+//   L > (LH > H[g3 a=center] > (H[g2 a=center] > Hd"Night watch"[level=1 t=display-2] + Tx"3 investigating"[t=supporting]) + SegmentedControl"Filter by status" + B"Declare incident") + (LC[p0] > V[g0] > (H > PowerSearch"Search the night watch…") + (List > (ListItem)*7)) + (LayoutPanel[w380 p0] > V[g4] > (V[g2] > (H[g2 a=center] > StatusDot + Tx"INC-2417"[t=supporting] + Token"Investigating") + Hd"Checkout API elevated 5xx rate"[level=2]) + (H[g2] > B.primary"Mark mitigated" + B.secondary"Escalate") + Divider + MetadataList + Divider + (V[g2] > Hd"Timeline"[level=3] + List))
 
 /**
  * Incident Console — an on-call incident response tool for the night watch.  Frame-first layout (see `bunx astryx docs layout`), distilled fro (Frame/responsive/container: see XLE header above.)
@@ -484,8 +492,8 @@ export default function IncidentConsole() {
 
   const inspectorPanel = useResizable({
     defaultSize: 380,
-    minSizePx: 320,
-    maxSizePx: 480,
+    minSize: 320,
+    maxSize: 480,
   });
 
   const visible = useMemo(() => {
@@ -521,7 +529,22 @@ export default function IncidentConsole() {
       icon={<Icon icon={Plus} size="sm" />}
     />
   );
-  const titleGroup = (
+  // Stacks below 1024px. The H1 asks for `display-2` (35px), which is the
+  // theme's own declared value but only started rendering in core 0.6.3 —
+  // see the note in the XLE header. At 35px the title wraps to two lines on a
+  // phone, and the counter beside it then wraps too and detaches into the
+  // corner. Stacking keeps the counter on the title's own line at any width
+  // the title needs more than one, and costs nothing at desktop.
+  const titleGroup = isNarrow ? (
+    <VStack gap={1}>
+      <Heading level={1} type="display-2">
+        Night watch
+      </Heading>
+      <Text type="supporting" color="secondary" hasTabularNumbers>
+        {openCount} investigating
+      </Text>
+    </VStack>
+  ) : (
     <HStack gap={2} vAlign="center">
       <Heading level={1} type="display-2">Night watch</Heading>
       <Text type="supporting" color="secondary" hasTabularNumbers>

package/templates/login-card.tsx

@@ -105,7 +105,8 @@ export default function LoginCard() {
                   <VStack hAlign="end">
                     <Link
                       href="#/templates/login-card"
-                      color="secondary">
+                      color="secondary"
+                      isStandalone>
                       {AUTH_FORGOT_PASSWORD}
                     </Link>
                   </VStack>
@@ -141,11 +142,13 @@ export default function LoginCard() {
               />
             </VStack>
 
-            {/* Sign up link */}
+            {/* Prose links. A link inside a sentence needs a persistent
+                underline — colour alone is not a cue (WCAG 1.4.1 / F73),
+                and the kit underlines on hover only. */}
             <VStack hAlign="center">
               <Text type="supporting" color="secondary">
                 {AUTH_SIGNUP_PROMPT}{' '}
-                <Link href="#/templates/login-card" type="supporting">
+                <Link href="#/templates/login-card" type="supporting" hasUnderline>
                   {AUTH_SIGNUP_LINK}
                 </Link>
               </Text>
@@ -157,11 +160,11 @@ export default function LoginCard() {
         <VStack hAlign="center" width="100%">
           <Text type="supporting" color="secondary" justify="center">
             {AUTH_TERMS_PREFIX}{' '}
-            <Link href="#/templates/login-card" type="supporting">
+            <Link href="#/templates/login-card" type="supporting" hasUnderline>
               {AUTH_TERMS_SERVICE}
             </Link>{' '}
             and{' '}
-            <Link href="#/templates/login-card" type="supporting">
+            <Link href="#/templates/login-card" type="supporting" hasUnderline>
               {AUTH_TERMS_PRIVACY}
             </Link>
             .

package/templates/login-split.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + Tx"New to the castle?"[t=supporting]) + (C[p=0] > AR)) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (C[p=0] > AR)) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
 import {useState, useTransition, type CSSProperties} from 'react';
 import {inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
@@ -191,7 +191,9 @@ export default function LoginSplit() {
                               />
                               {error && (
                                 <VStack hAlign="end">
-                                  <Link href="#/templates/login-split">
+                                  <Link
+                                    href="#/templates/login-split"
+                                    isStandalone>
                                     {AUTH_FORGOT_PASSWORD}
                                   </Link>
                                 </VStack>
@@ -234,13 +236,20 @@ export default function LoginSplit() {
                     </Center>
                   </StackItem>
 
+                  {/* Prose link: colour alone is not a cue inside a sentence
+                      (WCAG 1.4.1 / F73), so it asks for the underline the kit
+                      only gives on hover. The VStack centres the line, as the
+                      other three login templates do — it was sitting flush
+                      left under a left-aligned form. */}
                   {!isSuccess && (
-                    <Text type="supporting" color="secondary">
-                      {AUTH_SIGNUP_PROMPT}{' '}
-                      <Link href="#/templates/login-split" type="supporting">
-                        {AUTH_SIGNUP_LINK}
-                      </Link>
-                    </Text>
+                    <VStack hAlign="center">
+                      <Text type="supporting" color="secondary">
+                        {AUTH_SIGNUP_PROMPT}{' '}
+                        <Link href="#/templates/login-split" type="supporting" hasUnderline>
+                          {AUTH_SIGNUP_LINK}
+                        </Link>
+                      </Text>
+                    </VStack>
                   )}
                 </VStack>
               </Section>
@@ -259,14 +268,14 @@ export default function LoginSplit() {
           </Card>
         </Center>
 
-        <VStack hAlign="center">
-          <Text type="supporting" color="secondary">
+        <VStack hAlign="center" width="100%">
+          <Text type="supporting" color="secondary" justify="center">
             {AUTH_TERMS_PREFIX}{' '}
-            <Link href="#/templates/login-split" type="supporting">
+            <Link href="#/templates/login-split" type="supporting" hasUnderline>
               {AUTH_TERMS_SERVICE}
             </Link>{' '}
             and{' '}
-            <Link href="#/templates/login-split" type="supporting">
+            <Link href="#/templates/login-split" type="supporting" hasUnderline>
               {AUTH_TERMS_PRIVACY}
             </Link>
             .