astryx-dracula 0.6.2 → 0.7.0

package/templates/product-tour.tsx

@@ -2,7 +2,7 @@
 // XLE (canonical structure of the tree below; the CLI had no XLE validator
 // after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
 // human drift check — update it with the file, never alone):
-//   A[cp=0 h=auto @sideNav=(SN[collapsible header=SideNavHeading] > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating"))))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx"Documentation"[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"astryx-dracula v0.6.2"[t=supporting] + SE{Selector}"On this page") + Tx"astryx-dracula is a pure Dracula brand theme"[t=large] + AR[ratio=16/9] + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Four decisions shape everything else"[t=body] + (UL > LI*4)))*2) + D + (H[g=3 j=between a=center] > SI[fill] + B.secondary"Install")) + (LP[!scroll] > Outline)
+//   A[cp=0 h=auto @sideNav=(SN[collapsible header=SideNavHeading] > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating"))))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx"Documentation"[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"astryx-dracula v0.7.0"[t=supporting] + SE{Selector}"On this page") + Tx"astryx-dracula is a pure Dracula brand theme"[t=large] + AR[ratio=16/9] + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Four decisions shape everything else"[t=body] + (UL > LI*4)))*2) + D + (H[g=3 j=between a=center] > SI[fill] + B.secondary"Install")) + (LP[!scroll] > Outline)
 
 /**
  * Product Tour — a chaptered walkthrough of this theme.
@@ -220,7 +220,7 @@ import {astryxDraculaTheme} from 'astryx-dracula';
 					{
 						key: "status-vocabulary",
 						heading: "Status has a fixed vocabulary",
-						body: "Green positive, red negative, yellow tags, cyan information, pink flair, orange warning. Status surfaces use a ten percent categorical wash with a semantic border rather than a direct fill.",
+						body: "Green positive, red negative, yellow tags and warnings, cyan information, pink flair, orange attention. Status surfaces use a ten percent categorical wash with a semantic border rather than a direct fill.",
 						code: {
 							language: "tsx",
 							title: "Status.tsx",
@@ -244,7 +244,7 @@ import {astryxDraculaTheme} from 'astryx-dracula';
 				icon: LayoutGrid,
 				hasArt: true,
 				intro:
-					"Forty-five themed pages ship with the package as an Astryx integration pack. Each one is a real page, already retokened and structurally validated, and each one scaffolds in a single command.",
+					"48 themed pages ship with the package as an Astryx integration pack. Each one is a real page, already retokened and structurally validated, and each one scaffolds in a single command.",
 				sections: [
 					{
 						key: "scaffold-a-page",
@@ -253,7 +253,7 @@ import {astryxDraculaTheme} from 'astryx-dracula';
 						code: {
 							language: "bash",
 							title: "shell",
-							source: `# any of the 45 page ids — the path argument is required; without it the
+							source: `# any of the 48 page ids — the path argument is required; without it the
 # CLI prints the template source and writes nothing
 bunx @astryxdesign/cli template dashboard --package astryx-dracula ./src/pages/dashboard.tsx
 bunx @astryxdesign/cli template product-tour --package astryx-dracula ./src/pages/product-tour.tsx`,
@@ -825,7 +825,9 @@ const PRODUCT_TOUR_SCENES: Record<string, ProductTourScene> = {
 	},
 	palette: {
 		node: (alt) => <PaletteScene alt={alt} />,
-		alt: "Fifteen palette swatches: six surfaces and neutrals, then the accent colours",
+		// Counted from PALETTE_ROWS, not written: the art and its accessible
+		// name cannot drift apart.
+		alt: `${PALETTE_ROWS.flat().length} palette swatches: six surfaces and neutrals, then the accent colours`,
 	},
 	"type-shape": {
 		node: (alt) => <TypeScene alt={alt} />,
@@ -833,7 +835,9 @@ const PRODUCT_TOUR_SCENES: Record<string, ProductTourScene> = {
 	},
 	templates: {
 		node: (alt) => <PagesScene alt={alt} />,
-		alt: "Eight page thumbnails in a grid, the first one highlighted",
+		// Counted from PAGE_CELLS: eight written by hand is the numeral that
+		// drifts the moment a ninth tile is added.
+		alt: `${PAGE_CELLS.length} page thumbnails in a grid, the first one highlighted`,
 	},
 };
 
@@ -855,7 +859,7 @@ export default function ProductTour() {
 			railHref={SELF_HASH}
 			railIcon={<Icon icon={Sparkles} size="sm" />}
 			eyebrow="Documentation"
-			badge={() => "astryx-dracula v0.6.2"}
+			badge={() => "astryx-dracula v0.7.0"}
 			art={(chapterId) => <ChapterArt chapterId={chapterId} />}
 		/>
 	);

package/templates/settings-dialog.tsx

@@ -30,6 +30,7 @@ import { Switch } from "@astryxdesign/core/Switch";
 import { Tab, TabList } from "@astryxdesign/core/TabList";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import type { DeviceRow, InfoTileData } from "astryx-dracula/shared/settings-data";
 import {
 	CURRENCIES,
@@ -160,6 +161,10 @@ export default function SettingsDialog() {
 
 	return (
 		<>
+			{/* The page is a dialog; the document still needs a top-level heading. */}
+			<VisuallyHidden>
+				<Heading level={1}>Settings</Heading>
+			</VisuallyHidden>
 			<Layout
 				height="auto"
 				content={