astryx-dracula 0.2.0 → 0.3.0

package/templates/ai-chat.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=0] > H > (SI[fill] > ChL > ChML > (ChM > ChB)*4 + ChC"Ask a follow up...") + (C.transparent > Tbar + S.section > MD) ;; Dlg#artifact[variant=fullscreen] > L > (DH"JWT Token Refresh" + (LC[p=0] > S.section > MD))
 
 import {useRef, useState, type CSSProperties} from 'react';
 
@@ -33,6 +35,7 @@ import {Token} from '@astryxdesign/core/Token';
 import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
@@ -56,10 +59,9 @@ import {
 const MOBILE_MAX_WIDTH = 1023;
 
 const root: CSSProperties = {
-  // The showcase renders a 44px breadcrumb row above the template, so a full
-  // 100dvh root always spills exactly that far into page-level scroll. Subtract
-  // it so scrolling stays inside the message list and artifact body.
-  height: 'calc(100dvh - 44px)',
+  // The viewer owns its chrome: the root fills the viewport and the message
+  // list plus artifact body scroll inside it (editor pattern).
+  height: '100dvh',
   width: '100%',
   containerType: 'inline-size',
   containerName: 'artifact',
@@ -74,8 +76,11 @@ const chatLayout: CSSProperties = {
   flex: 1,
   minHeight: 0,
 };
+// ChatMessage already separates its children by --spacing-2, so this doubles
+// that step to set the attached document apart from its bubble. --space-gap
+// (24px) is a layout gutter, not an in-message rhythm.
 const artifactCard: CSSProperties = {
-  marginBlockStart: 'var(--space-gap)',
+  marginBlockStart: 'var(--spacing-2)',
 };
 const artifactScroll: CSSProperties = {
   flex: 1,
@@ -121,7 +126,7 @@ const AI_CHAT_CSS = `
 // Artifact content
 
 const MENTION_TOKENS = [
-  {value: '@agent', label: '@Agent', variant: 'blue' as const},
+  {value: '@agent', label: '@Agent', variant: 'cyan' as const},
 ];
 
 const ARTIFACT_TITLE = 'JWT Token Refresh: Design & Rollout';
@@ -130,7 +135,7 @@ const ARTIFACT_SUBTITLE = 'Grimoire · Sealed just now';
 
 const ARTIFACT_CONTENT = `## Overview
 
-Our API gateway authenticates every request with a short-lived JWT access token. Until now, an expired token meant an immediate \`401\` — even when the user still held a valid refresh token. This document describes the silent-refresh flow we just shipped and how we're rolling it out.
+Our API gateway authenticates every request with a short-lived JWT access token. Until now, an expired token meant an immediate \`401\`, even when the user still held a valid refresh token. This document describes the silent-refresh flow we just shipped and how we're rolling it out.
 
 ## The Problem
 
@@ -138,7 +143,7 @@ Token validation ran **before** any refresh logic, so the middleware rejected ex
 
 1. A request arrives with an expired access token
 2. \`validateToken()\` throws \`TokenExpiredError\`
-3. The catch block returns \`401\` — \`refreshToken()\` is never reached
+3. The catch block returns \`401\`: \`refreshToken()\` is never reached
 
 The result was users getting logged out whenever an access token lapsed mid-session.
 
@@ -146,9 +151,9 @@ The result was users getting logged out whenever an access token lapsed mid-sess
 
 The middleware now catches \`TokenExpiredError\` specifically and attempts a silent refresh before rejecting. On success it reissues an access token and continues the request; on failure it falls back to \`401\`.
 
-- **Transparent** — valid sessions never see an interruption
-- **Safe** — a missing or invalid refresh token still returns \`401\`
-- **Cheap** — refresh only runs on the expiry path, not on every request
+- **Transparent**: valid sessions never see an interruption
+- **Safe**: a missing or invalid refresh token still returns \`401\`
+- **Cheap**: refresh only runs on the expiry path, not on every request
 
 ## Testing
 
@@ -234,12 +239,24 @@ function MobileArtifactActions() {
   );
 }
 
-// Scrollable artifact body — the formatted document.
-function ArtifactBody() {
+// Scrollable artifact body — the formatted document. The mobile dialog renders
+// the title in its DialogHeader, so it drops the in-body heading rather than
+// announcing the same h1 twice.
+function ArtifactBody({hasOwnTitle = true}: {hasOwnTitle?: boolean}) {
   return (
-    <Section variant="transparent" style={artifactScroll}>
+    <Section
+      variant="transparent"
+      style={artifactScroll}
+      role="region"
+      aria-label={ARTIFACT_TITLE}
+      tabIndex={0}>
       <VStack gap={2} style={articleBody}>
-        <Heading level={1}>{ARTIFACT_TITLE}</Heading>
+        {/* Page owns the h1 (VisuallyHidden "Night thread"); the panel title is h2. */}
+        {hasOwnTitle && (
+          <Heading level={2} type="display-2">
+            {ARTIFACT_TITLE}
+          </Heading>
+        )}
         <Markdown>{ARTIFACT_CONTENT}</Markdown>
       </VStack>
     </Section>
@@ -360,6 +377,7 @@ export default function AiChat() {
                       }
                     />
                   }>
+                  <VisuallyHidden as="h1">Night thread</VisuallyHidden>
                   <ChatMessageList>
                     {/* Date divider */}
                     <ChatSystemMessage variant="divider">
@@ -385,7 +403,7 @@ export default function AiChat() {
                         }>
                         <ChatTokenizedText tokens={MENTION_TOKENS}>
                           @agent Can you review these auth files? The JWT
-                          refresh logic seems broken — tokens expire but the
+                          refresh logic seems broken, tokens expire but the
                           middleware doesn't catch it.
                         </ChatTokenizedText>
                       </ChatMessageBubble>
@@ -431,7 +449,7 @@ Here's the problematic sequence:
 
 1. Request arrives with an expired access token
 2. \`validateToken()\` throws \`TokenExpiredError\`
-3. The catch block returns \`401\` — never reaching \`refreshToken()\`
+3. The catch block returns \`401\`, never reaching \`refreshToken()\`
 
 The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh before rejecting:`}</Markdown>
                       </ChatMessageBubble>
@@ -440,6 +458,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                         <CodeBlock
                           title="middleware.ts"
                           language="typescript"
+                          width="100%"
                           code={`async function authMiddleware(req: Request) {
   try {
     const decoded = validateToken(req.headers.authorization);
@@ -556,6 +575,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                         <CodeBlock
                           title="middleware.test.ts"
                           language="typescript"
+                          width="100%"
                           code={`describe('authMiddleware', () => {
   it('refreshes an expired token silently', async () => {
     const expiredToken = createExpiredJWT(mockUser);
@@ -615,7 +635,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                       avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
-                          {`I've drafted a design doc covering the problem, the fix, and the test matrix — pulling straight from the changes we just made.\n\nOpen the document below to review it. Want me to expand any section?`}
+                          {`I've drafted a design doc covering the problem, the fix, and the test matrix, pulling straight from the changes we just made.\n\nOpen the document below to review it. Want me to expand any section?`}
                         </Markdown>
                       </ChatMessageBubble>
                       <ArtifactCard onOpen={openArtifact} />
@@ -654,7 +674,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                       avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
-                          {`On it — adding a **Rollout & Monitoring** section with a staged flag ramp and the alert thresholds. Updating the document now.`}
+                          {`On it: adding a **Rollout & Monitoring** section with a staged flag ramp and the alert thresholds. Updating the document now.`}
                         </Markdown>
                       </ChatMessageBubble>
                       <ChatToolCalls
@@ -741,6 +761,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
         purpose="info"
         variant="fullscreen">
         <Layout
+          height="auto"
           header={
             <DialogHeader
               title={ARTIFACT_TITLE}
@@ -752,7 +773,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
           }
           content={
             <LayoutContent padding={0}>
-              <ArtifactBody />
+              <ArtifactBody hasOwnTitle={false} />
             </LayoutContent>
           }
         />

package/templates/blank.tsx

@@ -1,14 +1,17 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L[h=auto] > LC > Hd"A blank crypt awaits its story"[level=1]
 
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
+import {Heading} from '@astryxdesign/core/Text';
 
 export default function BlankPage() {
   return (
     <Layout
+      height="auto"
       content={
         <LayoutContent>
-          <Text type="large">A blank crypt awaits its story</Text>
+          <Heading level={1} type="display-2">A blank crypt awaits its story</Heading>
         </LayoutContent>
       }
     />

package/templates/centered-hero.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.3.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -8,12 +10,11 @@ import {Icon} from '@astryxdesign/core/Icon';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Section} from '@astryxdesign/core/Section';
 import {ArrowRight} from 'lucide-react';
+import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
 
-const heroImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
+// Wide castle banner lives in shared/scene-castle (`wide` variant: harvest
+// moon, fg-stroke bats, comment first star group). Frame keeps the page radius
+// + separator border; the scene fills the AspectRatio box via gallery-image.
 const heroFrame: CSSProperties = {
   maxWidth: 1200,
   marginInline: 'auto',
@@ -22,127 +23,10 @@ const heroFrame: CSSProperties = {
   overflow: 'clip',
 };
 
-function NightCastleScene() {
-  return (
-    <svg
-      style={heroImage}
-      viewBox="0 0 800 450"
-      role="img"
-      aria-label="Moonlit castle on a hill in Dracula theme colors">
-      <title>Castle under a harvest moon</title>
-      <rect width="800" height="450" fill="var(--dracula-bg-dark)" />
-      {/* Stars */}
-      <g fill="var(--dracula-purple)">
-        <circle cx="60" cy="60" r="2.5" />
-        <circle cx="180" cy="120" r="2" />
-        <circle cx="330" cy="50" r="2.5" />
-        <circle cx="470" cy="90" r="2" />
-        <circle cx="700" cy="200" r="2.5" />
-        <circle cx="750" cy="80" r="2" />
-      </g>
-      <g fill="var(--dracula-cyan)">
-        <circle cx="120" cy="90" r="2" />
-        <circle cx="270" cy="70" r="2.5" />
-        <circle cx="540" cy="50" r="2" />
-        <circle cx="660" cy="160" r="2" />
-      </g>
-      <g fill="var(--dracula-pink)">
-        <circle cx="90" cy="170" r="2" />
-        <circle cx="400" cy="130" r="2.5" />
-        <circle cx="590" cy="200" r="2" />
-        <circle cx="730" cy="260" r="2" />
-      </g>
-      {/* Harvest moon */}
-      <circle cx="620" cy="110" r="56" fill="var(--dracula-yellow)" />
-      <circle
-        cx="600"
-        cy="95"
-        r="10"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      <circle
-        cx="638"
-        cy="125"
-        r="7"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      {/* Bats */}
-      <g
-        fill="none"
-        stroke="var(--dracula-purple)"
-        strokeWidth={4}
-        strokeLinecap="round">
-        <path d="M120 130 q12 -12 24 0 q12 -12 24 0" />
-        <path d="M210 90 q9 -9 18 0 q9 -9 18 0" />
-        <path d="M470 160 q9 -9 18 0 q9 -9 18 0" />
-      </g>
-      {/* Hills */}
-      <path
-        d="M0 330 Q200 260 400 320 T800 300 V450 H0 Z"
-        fill="var(--dracula-selection)"
-      />
-      <path
-        d="M0 385 Q240 320 480 375 T800 360 V450 H0 Z"
-        fill="var(--dracula-bg-light)"
-      />
-      {/* Castle */}
-      <g>
-        <rect
-          x="150"
-          y="225"
-          width="120"
-          height="120"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="130"
-          y="185"
-          width="44"
-          height="160"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="246"
-          y="185"
-          width="44"
-          height="160"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <g fill="var(--dracula-bg-lighter)">
-          <rect x="130" y="175" width="12" height="14" rx={2} />
-          <rect x="149" y="175" width="12" height="14" rx={2} />
-          <rect x="246" y="175" width="12" height="14" rx={2} />
-          <rect x="265" y="175" width="12" height="14" rx={2} />
-          <rect x="150" y="215" width="14" height="16" rx={2} />
-          <rect x="173" y="215" width="14" height="16" rx={2} />
-          <rect x="196" y="215" width="14" height="16" rx={2} />
-          <rect x="219" y="215" width="14" height="16" rx={2} />
-          <rect x="242" y="215" width="14" height="16" rx={2} />
-        </g>
-        <g fill="var(--dracula-yellow)">
-          <rect x="168" y="255" width="14" height="20" rx={2} />
-          <rect x="203" y="255" width="14" height="20" rx={2} />
-          <rect x="238" y="255" width="14" height="20" rx={2} />
-          <rect x="143" y="215" width="10" height="14" rx={2} />
-          <rect x="259" y="215" width="10" height="14" rx={2} />
-        </g>
-        <path
-          d="M195 345 v-30 a15 15 0 0 1 30 0 v30 Z"
-          fill="var(--dracula-bg-dark)"
-        />
-      </g>
-    </svg>
-  );
-}
-
 export default function CenteredHero() {
   return (
     <Layout
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={10}>
@@ -163,6 +47,13 @@ export default function CenteredHero() {
                   Sometimes all it takes is one small ritual to turn the whole
                   night around.
                 </Text>
+                <Text
+                  type="supporting"
+                  color="secondary"
+                  justify="center"
+                  hasTabularNumbers>
+                  astryx-dracula v0.3.0
+                </Text>
               </VStack>
               <HStack gap={3} wrap="wrap" justify="center">
                 <Button
@@ -177,7 +68,7 @@ export default function CenteredHero() {
             </VStack>
             <Section variant="transparent" padding={0}>
               <AspectRatio ratio={16 / 9} style={heroFrame}>
-                <NightCastleScene />
+                <SceneCastle variant="wide" />
               </AspectRatio>
             </Section>
           </VStack>

package/templates/classic-gallery.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=0] > Ctr > V[g=8] > ((Ctr > S.transparent > V[g=4 a=center] > (V[g=2 a=center] > Hd"Hung after dark"[level=1] + Tx"A coven-curated wall"[t=body]) + (TL > Tab"All"! + Tab"Lifestyle" + Tab"Scenery" + Tab"Home") + Tx"10 pieces on the wall"[t=body]) + (G[c={min:260} g=4] > (C[p=0] > AR[ratio=3/2])*10))
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -9,6 +11,9 @@ import {Text, Heading} from '@astryxdesign/core/Text';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Section} from '@astryxdesign/core/Section';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
+import {SCENE_TILE_ALTS} from 'astryx-dracula/shared/scene-hues';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
 
@@ -21,11 +26,6 @@ const outer: CSSProperties = {
 const frameClip: CSSProperties = {
   overflow: 'clip',
 };
-const artImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
 const textCenter: CSSProperties = {
   textAlign: 'center',
 };
@@ -40,76 +40,32 @@ interface GalleryImage {
 }
 
 // Dracula accent per gallery shelf.
-const CATEGORY_HUES: Record<Exclude<Category, 'all'>, string> = {
+const CATEGORY_HUES: Record<Exclude<Category, 'all'>, SceneHue> = {
   scene: 'var(--dracula-cyan)',
   lifestyle: 'var(--dracula-pink)',
   home: 'var(--dracula-yellow)',
 };
 
 const GALLERY_IMAGES: GalleryImage[] = [
-  {alt: 'Moonlit ridge trail under a harvest moon', category: 'scene'},
-  {alt: 'Late portrait in violet lamplight', category: 'lifestyle'},
-  {alt: 'Lamplit reading nook after midnight', category: 'home'},
-  {alt: 'Fog rolling over the night pines', category: 'scene'},
-  {alt: 'Dancer caught mid-step in stage pink', category: 'lifestyle'},
-  {alt: 'Kitchen table set for a midnight feast', category: 'lifestyle'},
-  {alt: 'Castle silhouette over sleeping hills', category: 'scene'},
-  {alt: 'Attic window glowing amber at 2am', category: 'home'},
-  {alt: 'Cellar shelves lined with bottled dusk', category: 'home'},
+  {alt: SCENE_TILE_ALTS[0], category: 'scene'},
+  {alt: SCENE_TILE_ALTS[1], category: 'lifestyle'},
+  {alt: SCENE_TILE_ALTS[2], category: 'home'},
+  {alt: SCENE_TILE_ALTS[3], category: 'scene'},
+  {alt: SCENE_TILE_ALTS[4], category: 'lifestyle'},
+  {alt: SCENE_TILE_ALTS[5], category: 'lifestyle'},
+  {alt: SCENE_TILE_ALTS[6], category: 'scene'},
+  {alt: SCENE_TILE_ALTS[7], category: 'home'},
+  {alt: SCENE_TILE_ALTS[8], category: 'home'},
   {alt: 'Bats crossing a violet harvest moon', category: 'scene'},
 ];
 
 // ─── Gallery Art ────────────────────────────────────────────────────────────
+// Small mountain-glyph fork lives in shared/scene-tile; decorative stars
+// resolve to comment here (never purple — purple means tappable).
 
 function GalleryArt({image, index}: {image: GalleryImage; index: number}) {
   const hue = CATEGORY_HUES[image.category];
-  const moonX = 90 + ((index * 53) % 220);
-  const moonY = 62 + ((index * 29) % 60);
-  const hillA = 190 + ((index * 13) % 40);
-  const hillB = 215 + ((index * 17) % 40);
-  return (
-    <svg
-      viewBox="0 0 400 300"
-      preserveAspectRatio="xMidYMid slice"
-      style={artImage}
-      role="img"
-      aria-label={image.alt}>
-      <rect width="400" height="300" fill="var(--dracula-bg-light)" />
-      <g fill="var(--dracula-purple)" opacity={0.55}>
-        <circle cx={40 + ((index * 37) % 320)} cy={30} r={2} />
-        <circle cx={120 + ((index * 23) % 200)} cy={52} r={1.6} />
-        <circle cx={260 + ((index * 11) % 110)} cy={26} r={2.2} />
-        <circle cx={330} cy={70 + ((index * 7) % 30)} r={1.6} />
-      </g>
-      <circle cx={moonX} cy={moonY} r={34} fill={hue} opacity={0.9} />
-      <circle
-        cx={moonX - 12}
-        cy={moonY - 8}
-        r={28}
-        fill="var(--dracula-bg-light)"
-        opacity={0.55}
-      />
-      <path
-        d={`M0 ${hillA} Q100 ${hillA - 50} 200 ${hillA - 10} T400 ${hillA - 30} V300 H0 Z`}
-        fill="var(--dracula-current-line)"
-      />
-      <path
-        d={`M0 ${hillB} Q120 ${hillB - 40} 240 ${hillB} T400 ${hillB - 20} V300 H0 Z`}
-        fill="var(--dracula-bg)"
-      />
-      <g
-        transform={`translate(${60 + ((index * 41) % 280)} ${hillB - 34})`}
-        fill="none"
-        stroke={hue}
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeLinejoin="round">
-        <rect x="-22" y="-22" width="44" height="44" rx="5" />
-        <circle cx="9" cy="-9" r="2" fill={hue} stroke="none" />
-        <path d="M-17 15 L-4 0 L5 9 L10 4 L17 12" />
-      </g>
-    </svg>
-  );
+  return <SceneTile label={image.alt} hue={hue} size="sm" index={index} />;
 }
 
 // ─── Main Page ──────────────────────────────────────────────────────────────
@@ -137,8 +93,8 @@ export default function ClassicGallery() {
                       <Heading level={1}>Hung after dark</Heading>
                       <Text type="body" color="secondary">
                         A coven-curated wall of moonlit ridges, late portraits,
-                        and lamplit rooms. Filter by haunt and stay a while —
-                        the gallery never sleeps.
+                        and lamplit rooms. Filter by haunt and stay a while.
+                        The gallery never sleeps.
                       </Text>
                     </VStack>
 
@@ -151,7 +107,7 @@ export default function ClassicGallery() {
                       <Tab value="home" label="Home" />
                     </TabList>
                     <Text
-                      type="supporting"
+                      type="body"
                       color="secondary"
                       hasTabularNumbers>
                       {filteredImages.length}{' '}