astryx-dracula 0.2.0 → 0.3.0

package/templates/gallery-hero.tsx

@@ -1,6 +1,7 @@
 // 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"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR*3)
 
-import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
@@ -8,171 +9,16 @@ import {Icon} from '@astryxdesign/core/Icon';
 import {Grid} from '@astryxdesign/core/Grid';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {ArrowRight} from 'lucide-react';
+import {galleryImage, galleryImageClip} from 'astryx-dracula/shared/gallery-image';
+import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
 
-// NOTE: The only custom styling here is gallery fill + corner radius. It
-// exists because Astryx has no image primitive — AspectRatio exposes no
-// objectFit or radius props and there's no Image. Tracked in issue #2582;
-// replace these with component props once it lands.
-// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
-const galleryImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
-// Rounds the gallery corners. No radius prop on AspectRatio (#2582);
-// overflow clip masks the SVG scene to the rounded corners.
-const galleryImageClip: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  overflow: 'clip',
-};
-
-function NightCastleScene() {
-  return (
-    <svg
-      style={galleryImage}
-      viewBox="0 0 400 500"
-      role="img"
-      aria-label="Moonlit castle on midnight hills">
-      <title>Castle under a harvest moon</title>
-      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
-      <g fill="var(--dracula-purple)">
-        <circle cx="50" cy="60" r="2.5" />
-        <circle cx="140" cy="130" r="2" />
-        <circle cx="240" cy="50" r="2.5" />
-        <circle cx="330" cy="110" r="2" />
-        <circle cx="300" cy="200" r="2.5" />
-      </g>
-      <g fill="var(--dracula-cyan)">
-        <circle cx="95" cy="90" r="2" />
-        <circle cx="200" cy="100" r="2.5" />
-        <circle cx="360" cy="60" r="2" />
-      </g>
-      <circle cx="290" cy="120" r="52" fill="var(--dracula-yellow)" />
-      <circle
-        cx="272"
-        cy="106"
-        r="9"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      <g
-        fill="none"
-        stroke="var(--dracula-purple)"
-        strokeWidth={4}
-        strokeLinecap="round">
-        <path d="M70 170 q12 -12 24 0 q12 -12 24 0" />
-        <path d="M150 130 q9 -9 18 0 q9 -9 18 0" />
-      </g>
-      <path
-        d="M0 360 Q140 300 260 350 T400 335 V500 H0 Z"
-        fill="var(--dracula-selection)"
-      />
-      <path
-        d="M0 420 Q160 365 300 410 T400 400 V500 H0 Z"
-        fill="var(--dracula-bg-light)"
-      />
-      <g>
-        <rect
-          x="140"
-          y="270"
-          width="120"
-          height="110"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="118"
-          y="235"
-          width="44"
-          height="145"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <rect
-          x="238"
-          y="235"
-          width="44"
-          height="145"
-          rx={4}
-          fill="var(--dracula-bg-lighter)"
-        />
-        <g fill="var(--dracula-yellow)">
-          <rect x="160" y="300" width="14" height="20" rx={2} />
-          <rect x="196" y="300" width="14" height="20" rx={2} />
-          <rect x="232" y="300" width="14" height="20" rx={2} />
-          <rect x="131" y="262" width="10" height="14" rx={2} />
-          <rect x="253" y="262" width="10" height="14" rx={2} />
-        </g>
-        <path
-          d="M185 380 v-28 a15 15 0 0 1 30 0 v28 Z"
-          fill="var(--dracula-bg-dark)"
-        />
-      </g>
-    </svg>
-  );
-}
-
-function HarvestMoonScene() {
-  return (
-    <svg
-      style={galleryImage}
-      viewBox="0 0 400 500"
-      role="img"
-      aria-label="Harvest moon over midnight pines">
-      <title>Harvest moon over the pines</title>
-      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
-      <g fill="var(--dracula-pink)">
-        <circle cx="60" cy="80" r="2" />
-        <circle cx="160" cy="50" r="2.5" />
-        <circle cx="320" cy="70" r="2" />
-        <circle cx="90" cy="190" r="2.5" />
-        <circle cx="250" cy="160" r="2" />
-      </g>
-      <g fill="var(--dracula-cyan)">
-        <circle cx="110" cy="120" r="2" />
-        <circle cx="220" cy="90" r="2" />
-        <circle cx="350" cy="150" r="2.5" />
-      </g>
-      <circle cx="200" cy="190" r="72" fill="var(--dracula-yellow)" />
-      <circle
-        cx="176"
-        cy="170"
-        r="12"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      <circle
-        cx="222"
-        cy="210"
-        r="8"
-        fill="var(--dracula-orange)"
-        opacity={0.5}
-      />
-      <g
-        fill="none"
-        stroke="var(--dracula-purple)"
-        strokeWidth={4}
-        strokeLinecap="round">
-        <path d="M90 260 q12 -12 24 0 q12 -12 24 0" />
-        <path d="M260 250 q9 -9 18 0 q9 -9 18 0" />
-      </g>
-      <path
-        d="M0 380 Q200 320 400 370 V500 H0 Z"
-        fill="var(--dracula-selection)"
-      />
-      <g fill="var(--dracula-bg-light)">
-        <path d="M70 500 V400 l28 -44 28 44 v100 Z" />
-        <path d="M170 500 V420 l28 -44 28 44 v80 Z" />
-        <path d="M270 500 V410 l28 -44 28 44 v90 Z" />
-      </g>
-      <g fill="var(--dracula-yellow)">
-        <rect x="81" y="442" width="8" height="12" rx={2} />
-        <rect x="181" y="458" width="8" height="12" rx={2} />
-        <rect x="281" y="450" width="8" height="12" rx={2} />
-      </g>
-    </svg>
-  );
-}
+// Castle + pines banners live in shared/scene-castle (`card`/`tall` variants:
+// harvest-yellow moon, fg-stroke bats, per-scene hill constants). Fill +
+// radius-clip live in shared/gallery-image (no Image primitive, #2582).
+// The bats tile stays local: it is deliberately moonless-magic (the violet
+// disc is ambient glow (comment grey), never tappable purple — the alt names the moonless sky), so the
+// harvest-yellow rule does not apply; yellowing it would duplicate the pines
+// tile instead.
 
 function BatFlightScene() {
   return (
@@ -180,10 +26,9 @@ function BatFlightScene() {
       style={galleryImage}
       viewBox="0 0 400 500"
       role="img"
-      aria-label="Bats crossing a violet night sky">
-      <title>Bats over violet hills</title>
+      aria-label="Bats crossing a moonless night sky">
       <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
-      <circle cx="200" cy="140" r="60" fill="var(--dracula-purple)" />
+      <circle cx="200" cy="140" r="60" fill="var(--dracula-comment)" />
       <circle
         cx="200"
         cy="140"
@@ -229,14 +74,15 @@ function BatFlightScene() {
 }
 
 const SCENES = [
-  {alt: 'Moonlit castle on midnight hills', scene: <NightCastleScene />},
-  {alt: 'Harvest moon over midnight pines', scene: <HarvestMoonScene />},
-  {alt: 'Bats crossing a violet night sky', scene: <BatFlightScene />},
+  {alt: 'Moonlit castle on midnight hills', scene: <SceneCastle variant="card" />},
+  {alt: 'Harvest moon over midnight pines', scene: <SceneCastle variant="tall" />},
+  {alt: 'Bats crossing a moonless night sky', scene: <BatFlightScene />},
 ];
 
 export default function GalleryHero() {
   return (
     <Layout
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={10}>

package/templates/ide.tsx

@@ -1,10 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[p=4] > V[g=2] > TI"Search files" + TreeList) + (LC[p=0] > (Hd"Code editor"[level=1] + V > (SI[fill] > Cd) + (V > (TL > Tab"Terminal"! + Tab"Problems" + Tab"Output" + Tab"Debug") + Cd))) + (LP[p=4] > V[g=3] > (SG > SGI"Properties"! + SGI"History") + (V[g=3] > (V[g=1] > Hd"NightCounter.tsx"[level=3] + Tx"src/components/NightCounter.tsx"[t=supporting]) + ML + (V[g=2] > B.secondary"Format Document" + B.secondary"Go to Definition" + B.secondary"Find References")))
 
 import {useState, useMemo, type CSSProperties} from 'react';
 
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
 import {Text, Heading} from '@astryxdesign/core/Text';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {Center} from '@astryxdesign/core/Center';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {EmptyState} from '@astryxdesign/core/EmptyState';
@@ -35,20 +39,21 @@ const styles: Record<string, CSSProperties> = {
   },
   tabListPadding: {
     paddingTop: 'var(--spacing-2)',
+    // 4px inline = offset 2 + ring thickness 2, so the focus ring lands INSIDE
+    // this box's clip instead of on its edge being cut in half. Deliberately
+    // NOT applied to `terminalPanel`: that would inset the CodeBlock itself,
+    // moving the code rather than giving the ring somewhere to live.
+    paddingInline: 'var(--spacing-1)',
   },
   metadataCompact: {
     gap: 'var(--spacing-1) var(--spacing-3)',
   },
-  historyTimelineDot: {
-    width: 8,
-    height: 8,
-    borderRadius: '50%',
-    backgroundColor: 'var(--color-border-emphasized)',
-    marginTop: 6,
-    flexShrink: 0,
-  },
+  // No `overflow` here, deliberately. The only child is a `CodeBlock` at
+  // `height: 100%` whose own root is `overflow: hidden`, so this box could
+  // never overflow and the scroller never fired — it only clipped. An
+  // `overflow: auto` on a parent whose sole child is a fixed-height
+  // `overflow: hidden` box is inert, which is what the deleted line was.
   editorArea: {
-    overflow: 'auto',
     minHeight: 0,
   },
   fileExplorer: {
@@ -80,11 +85,6 @@ const containerStyle = {
   gap: 8,
   padding: 16,
 };
-const counterStyle = {
-  fontSize: 48,
-  fontWeight: 700,
-  fontVariantNumeric: 'tabular-nums',
-};
 
 export default function NightCounter() {
   const [count, setCount] = useState(0);
@@ -98,14 +98,14 @@ export default function NightCounter() {
   }, []);
 
   return (
-    <div style={containerStyle}>
+    <Stack direction="vertical" gap={2} style={containerStyle}>
       <Text type="label">Night counter</Text>
-      <span style={counterStyle}>
+      <Text type="display-1" hasTabularNumbers>
         {count}
-      </span>
+      </Text>
       <Button label="Increment" onClick={increment} />
       <Button label="Reset" variant="secondary" onClick={reset} />
-    </div>
+    </Stack>
   );
 }`;
 
@@ -240,10 +240,12 @@ export default function IdeWorkspace() {
     collapsedSize: 50,
   });
 
+  // Capped so the terminal cannot swallow the canvas: the editor stack above
+  // has no minimum of its own, and an unbounded drag leaves nothing to grab.
   const bottomPanel = useResizable({
     defaultSize: 300,
     minSizePx: 80,
-    maxSizePx: Infinity,
+    maxSizePx: 520,
     collapsible: true,
     collapsedSize: 40,
   });
@@ -255,6 +257,9 @@ export default function IdeWorkspace() {
       height="fill"
       content={
         <LayoutContent padding={0}>
+          <VisuallyHidden as="h1">
+            Code editor
+          </VisuallyHidden>
           <Layout
             height="fill"
             start={
@@ -507,8 +512,9 @@ export default function IdeWorkspace() {
                                           </Text>
                                         }
                                         startContent={
-                                          <span
-                                            style={styles.historyTimelineDot}
+                                          <StatusDot
+                                            variant="neutral"
+                                            label="Timeline marker"
                                           />
                                         }
                                       />

package/templates/incident-console.tsx

@@ -1,20 +1,9 @@
 // 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))
 
 /**
- * Incident Console — an on-call incident response tool for the night watch.
- *
- * Frame-first layout (see `npx astryx docs layout`), distilled from
- * product-scale apps built with the design system:
- *
- *   Frame: header | grouped incident rows (fill) | inspector 380 (resizable)
- *
- * Responsive contract:
- *   > 1024px  header | rows | inspector 380
- *   <= 1024px inspector hidden; rows keep full width
- *
- * Container policy (tracker archetype): dense data renders as rows —
- * edge-to-edge lists grouped by status, zero cards. Status is carried by
- * StatusDot (severity) and Token (state), not decorative badges.
+ * 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.)
  */
 
 import {useMemo, useState, type CSSProperties} from 'react';
@@ -66,14 +55,23 @@ const styles: Record<string, CSSProperties> = {
     padding: 'var(--spacing-2) var(--spacing-3)',
     backgroundColor: 'var(--color-background-muted)',
   },
+  // All FOUR edges, not block-only. With `overflowY: auto` and no `overflowX`,
+  // the inline axis computes to `auto` too, so this box clips horizontally as
+  // well as vertically. A block-only padding lands green and still leaves the
+  // inline half of the ring clipped.
   rows: {
     overflowY: 'auto',
     minHeight: 0,
+    padding: 'var(--spacing-1)',
   },
   inspector: {
     padding: 'var(--spacing-4)',
     height: '100%',
-    overflowY: 'auto',
+  },
+  controlsRow: {
+    // The four-option filter plus the action never fit a phone header; the
+    // row scrolls instead of clipping options the pointer cannot reach.
+    overflowX: 'auto',
   },
 };
 
@@ -269,8 +267,9 @@ const STATUS_LABEL: Record<Status, string> = {
   resolved: 'Resolved',
 };
 
-const STATUS_TOKEN_COLOR: Record<Status, 'red' | 'yellow' | 'green'> = {
-  investigating: 'red',
+const STATUS_TOKEN_COLOR: Record<Status, 'cyan' | 'yellow' | 'green'> = {
+  // Info vocab: an open investigation pulses cyan, never red.
+  investigating: 'cyan',
   mitigated: 'yellow',
   resolved: 'green',
 };
@@ -327,8 +326,8 @@ function IncidentRows({
     return (
       <EmptyState
         title="Quiet in the crypt"
-        description="No incidents match — adjust the status filter or clear search filters."
-        icon={<Icon icon={BellRing} size="lg" />}
+        description="No incidents match. Adjust the status filter or clear search filters."
+        icon={<Icon icon={BellRing} size="lg" color="secondary" />}
       />
     );
   }
@@ -338,10 +337,13 @@ function IncidentRows({
       {groups.map(group => (
         <VStack gap={0} key={group.status}>
           <HStack gap={2} vAlign="center" style={styles.groupHeader}>
-            <Text type="label" color="secondary">
-              {STATUS_LABEL[group.status]}
-            </Text>
-            <Text type="supporting" color="secondary" hasTabularNumbers>
+            {/* Primary, not secondary: --color-text-secondary #9AA1BC on
+                --color-background-muted #44475A is 3.57:1, under the 4.5:1
+                floor. The group heading is the string this sidebar is scanned
+                for. Hierarchy comes from the two type roles (principle 6),
+                not from dimming the count. */}
+            <Text type="label">{STATUS_LABEL[group.status]}</Text>
+            <Text type="supporting" hasTabularNumbers>
               {group.items.length}
             </Text>
           </HStack>
@@ -352,14 +354,20 @@ function IncidentRows({
                 label={incident.title}
                 description={`${incident.id} · ${incident.service} · ${incident.impact}`}
                 startContent={
-                  <StatusDot
-                    variant={SEVERITY_DOT[incident.severity]}
-                    label={incident.severity.toUpperCase()}
-                    isPulsing={
-                      incident.severity === 'sev1' &&
-                      incident.status === 'investigating'
-                    }
-                  />
+                  // StatusDot's label is aria-label on a role="img" span
+                  // (core StatusDot.js:107-120), so it reaches assistive tech
+                  // and paints nothing. A bare dot leaves SEV1/2/3 as hue
+                  // alone. Dot and word travel together, as at :751-757.
+                  <HStack gap={1} vAlign="center">
+                    <StatusDot
+                      variant={SEVERITY_DOT[incident.severity]}
+                      label={incident.severity.toUpperCase()}
+                      isPulsing={incident.status === 'investigating'}
+                    />
+                    <Text type="supporting" color="secondary">
+                      {incident.severity.toUpperCase()}
+                    </Text>
+                  </HStack>
                 }
                 endContent={
                   <HStack gap={3} vAlign="center">
@@ -397,11 +405,15 @@ function IncidentInspector({incident}: {incident: Incident}) {
   return (
     <VStack gap={4} style={styles.inspector}>
       <VStack gap={2}>
-        <HStack gap={2} vAlign="center">
+        <HStack gap={1} vAlign="center">
           <StatusDot
             variant={SEVERITY_DOT[incident.severity]}
             label={incident.severity.toUpperCase()}
+            isPulsing={incident.status === 'investigating'}
           />
+          <Text type="supporting" color="secondary">
+            {incident.severity.toUpperCase()}
+          </Text>
           <Text type="supporting" color="secondary">
             {incident.id}
           </Text>
@@ -415,8 +427,8 @@ function IncidentInspector({incident}: {incident: Incident}) {
       </VStack>
 
       <HStack gap={2}>
-        <Button label={nextAction} size="sm" />
-        <Button label="Escalate" variant="secondary" size="sm" />
+        <Button label={nextAction} variant="primary" />
+        <Button label="Escalate" variant="secondary" />
       </HStack>
 
       <Divider />
@@ -489,46 +501,65 @@ export default function IncidentConsole() {
     incident => incident.status === 'investigating',
   ).length;
 
+  // Extracted so a narrow header can drop them onto their own scrollable row
+  // instead of squeezing the title, the filter and the action into one line.
+  const statusFilterControl = (
+    <SegmentedControl
+      label="Filter by status"
+      value={statusFilter}
+      onChange={setStatusFilter}
+      size="sm">
+      <SegmentedControlItem label="All" value="all" />
+      <SegmentedControlItem label="Investigating" value="investigating" />
+      <SegmentedControlItem label="Mitigated" value="mitigated" />
+      <SegmentedControlItem label="Resolved" value="resolved" />
+    </SegmentedControl>
+  );
+  const declareButton = (
+    <Button
+      label="Declare incident"
+      icon={<Icon icon={Plus} size="sm" />}
+    />
+  );
+  const titleGroup = (
+    <HStack gap={2} vAlign="center">
+      <Heading level={1} type="display-2">Night watch</Heading>
+      <Text type="supporting" color="secondary" hasTabularNumbers>
+        {openCount} investigating
+      </Text>
+    </HStack>
+  );
+
   return (
     <Layout
       height="fill"
       header={
-        <LayoutHeader hasDivider>
-          <HStack gap={3} vAlign="center">
-            <StackItem size="fill">
-              <HStack gap={2} vAlign="center">
-                <Heading level={1}>Night watch</Heading>
-                <Text
-                  type="supporting"
-                  color="secondary"
-                  hasTabularNumbers>
-                  {openCount} investigating
-                </Text>
+        <LayoutHeader hasDivider padding={6}>
+          {isNarrow ? (
+            <VStack gap={2}>
+              {titleGroup}
+              <HStack
+                gap={2}
+                vAlign="center"
+                style={styles.controlsRow}
+                tabIndex={0}
+                role="region"
+                aria-label="Incident filter actions">
+                {statusFilterControl}
+                {declareButton}
               </HStack>
-            </StackItem>
-            <SegmentedControl
-              label="Filter by status"
-              value={statusFilter}
-              onChange={setStatusFilter}
-              size="sm">
-              <SegmentedControlItem label="All" value="all" />
-              <SegmentedControlItem
-                label="Investigating"
-                value="investigating"
-              />
-              <SegmentedControlItem label="Mitigated" value="mitigated" />
-              <SegmentedControlItem label="Resolved" value="resolved" />
-            </SegmentedControl>
-            <Button
-              label="Declare incident"
-              icon={<Icon icon={Plus} size="sm" />}
-              size="sm"
-            />
-          </HStack>
+            </VStack>
+          ) : (
+            <HStack gap={3} vAlign="center">
+              <StackItem size="fill">{titleGroup}</StackItem>
+              {statusFilterControl}
+              {declareButton}
+            </HStack>
+          )}
         </LayoutHeader>
       }
       content={
-        <LayoutContent padding={0}>
+        <LayoutContent padding={0} isScrollable={false}>
           <VStack gap={0} style={styles.contentFill}>
             <HStack style={styles.searchRow}>
               <StackItem size="fill">
@@ -536,12 +567,17 @@ export default function IncidentConsole() {
                   config={config}
                   filters={filters}
                   onChange={newFilters => setFilters([...newFilters])}
-                  placeholder="Search the night watch..."
+                  placeholder="Search the night watch…"
                   resultCount={visible.length}
                 />
               </StackItem>
             </HStack>
-            <StackItem size="fill" style={styles.rows}>
+            <StackItem
+              size="fill"
+              style={styles.rows}
+              tabIndex={0}
+              role="region"
+              aria-label="Incident rows">
               <IncidentRows
                 incidents={visible}
                 selectedId={selected?.id ?? null}
@@ -571,7 +607,7 @@ export default function IncidentConsole() {
                 <EmptyState
                   title="No incident under the lens"
                   description="Select an incident from the rows to inspect its timeline."
-                  icon={<Icon icon={BellRing} size="lg" />}
+                  icon={<Icon icon={BellRing} size="lg" color="secondary" />}
                   isCompact
                 />
               )}