astryx-dracula 0.6.2 → 0.7.0

package/templates/classic-gallery.tsx

@@ -31,6 +31,10 @@ const frameClip: CSSProperties = {
 const textCenter: CSSProperties = {
 	textAlign: "center",
 };
+// Definite ancestor for `Layout height="fill"`: 100dvh, not minHeight: '100%'
+// (a percentage min-height against an indefinite block computes to 0 — CSS 2.1
+// 10.5). Same shape as side-gallery.tsx.
+const pageStyle: CSSProperties = { height: "100dvh" };
 
 // ─── Gallery Data ───────────────────────────────────────────────────────────
 
@@ -80,6 +84,7 @@ export default function ClassicGallery() {
 
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			content={
 				<LayoutContent padding={0}>

package/templates/contact-form.tsx

@@ -146,6 +146,7 @@ export default function ContactForm() {
 									label="Full name"
 									isRequired
 									placeholder="Full name"
+									autoComplete="name"
 									value={fullName}
 									onChange={setFullName}
 									status={errors.fullName ? { type: "error", message: errors.fullName } : undefined}
@@ -153,7 +154,9 @@ export default function ContactForm() {
 								<TextInput
 									label="Email"
 									isRequired
+									type="email"
 									placeholder="you@company.com"
+									autoComplete="email"
 									value={email}
 									onChange={setEmail}
 									status={errors.email ? { type: "error", message: errors.email } : undefined}
@@ -164,6 +167,7 @@ export default function ContactForm() {
 									label="Company"
 									isRequired
 									placeholder="Company"
+									autoComplete="organization"
 									value={company}
 									onChange={setCompany}
 									status={errors.company ? { type: "error", message: errors.company } : undefined}
@@ -171,7 +175,9 @@ export default function ContactForm() {
 								<TextInput
 									label="Phone"
 									isRequired
+									type="tel"
 									placeholder="Phone number"
+									autoComplete="tel"
 									value={phone}
 									onChange={setPhone}
 									status={errors.phone ? { type: "error", message: errors.phone } : undefined}
@@ -190,6 +196,9 @@ export default function ContactForm() {
 								labelID="campaign-goals-label"
 								isGroupLabel
 								isRequired
+								// The token row is a custom, non-bordered control, so the
+								// message box must sit below it (attached overlaps the input).
+								statusVariant="detached"
 								status={errors.goals ? { type: "error", message: errors.goals } : undefined}
 							>
 								<HStack gap={2} wrap="wrap" role="group" aria-labelledby="campaign-goals-label">

package/templates/dashboard-portfolio.tsx

@@ -18,11 +18,13 @@ import { List, ListItem } from "@astryxdesign/core/List";
 import type { PixelWidth, TableColumn } from "@astryxdesign/core/Table";
 import { pixel, proportional } from "@astryxdesign/core/Table";
 import { Heading, Text } from "@astryxdesign/core/Text";
+import { CHART_HUES } from "astryx-dracula/shared/chart-hues";
 import { ChartLabel } from "astryx-dracula/shared/chart-labels";
 import { CHART_PANEL_STYLE } from "astryx-dracula/shared/chart-panel-style";
 import { MetricCard, TableCard } from "astryx-dracula/shared/metric-card";
 import { MetricDelta } from "astryx-dracula/shared/metric-delta";
 import { Sparkline, type SparkPoint } from "astryx-dracula/shared/sparkline";
+import type { CSSProperties } from "react";
 
 // ============= DATA =============
 
@@ -530,6 +532,10 @@ const PORTFOLIO_STEP = PORTFOLIO_WIDTH / portfolioBars.length;
 const portfolioYFor = (v: number) =>
 	PORTFOLIO_BASE - ((v - PORTFOLIO_MIN) / (PORTFOLIO_MAX - PORTFOLIO_MIN)) * PORTFOLIO_PLOT;
 const PORTFOLIO_Y_TICKS = [200000, 240000, 280000, 320000];
+// The chart annotates its own last point. Reading it from the series rather
+// than restating the anchor keeps the label true when the generator's noise
+// moves the closing value off the 294,200 anchor it is interpolated toward.
+const PORTFOLIO_LAST = portfolioData[portfolioData.length - 1].value;
 
 function PortfolioChart() {
 	return (
@@ -548,7 +554,7 @@ function PortfolioChart() {
 								y1={portfolioYFor(t)}
 								x2={PORTFOLIO_LEFT + PORTFOLIO_WIDTH}
 								y2={portfolioYFor(t)}
-								stroke="var(--color-separator)"
+								stroke="var(--color-graph-gridlines)"
 								strokeDasharray="3 3"
 								opacity={0.5}
 							/>
@@ -567,7 +573,7 @@ function PortfolioChart() {
 								width={Math.max(2, PORTFOLIO_STEP - 2)}
 								height={h}
 								rx={4}
-								fill="var(--dracula-green)"
+								fill={CHART_HUES.green}
 							/>
 						);
 					})}
@@ -583,11 +589,11 @@ function PortfolioChart() {
 					))}
 					<ChartLabel
 						x={PORTFOLIO_LEFT + PORTFOLIO_WIDTH - 4}
-						y={portfolioYFor(294200) - 8}
+						y={portfolioYFor(PORTFOLIO_LAST) - 8}
 						textAnchor="end"
 						fill="var(--color-text-highlight)"
 					>
-						$294k
+						${Math.round(PORTFOLIO_LAST / 1000)}k
 					</ChartLabel>
 				</svg>
 			</Card>
@@ -732,11 +738,18 @@ function AssetRow({
 	);
 }
 
+// A definite ancestor for `Layout height="fill"`. 100dvh, not minHeight: '100%':
+// a percentage min-height against an indefinite containing block computes to 0
+// (CSS 2.1 10.5), so the document would keep the scroll instead of the content
+// pane. Same shape as dashboard.tsx and heatmap-status.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
 // ============= MAIN COMPONENT =============
 
 export default function DashboardPortfolio() {
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			content={
 				<LayoutContent padding={6}>

package/templates/dashboard.tsx

@@ -25,7 +25,7 @@ const SELF_HASH = "#/templates/dashboard";
 
 // ============= ICONS =============
 
-import { CHART_HUES } from "astryx-dracula/shared/chart-hues";
+import { CHART_HUES, type DataColor } from "astryx-dracula/shared/chart-hues";
 import { ChartLegend } from "astryx-dracula/shared/chart-legend";
 import { CHART_PANEL_STYLE } from "astryx-dracula/shared/chart-panel-style";
 import { BarCell, CountCell, MetricCard, TableCard } from "astryx-dracula/shared/metric-card";
@@ -460,7 +460,7 @@ function ActiveUsersChart() {
 						y1="30"
 						x2="520"
 						y2="30"
-						stroke="var(--color-separator)"
+						stroke="var(--color-graph-gridlines)"
 						strokeDasharray="3 3"
 						opacity={0.5}
 					/>
@@ -469,11 +469,11 @@ function ActiveUsersChart() {
 						y1="80"
 						x2="520"
 						y2="80"
-						stroke="var(--color-separator)"
+						stroke="var(--color-graph-gridlines)"
 						strokeDasharray="3 3"
 						opacity={0.5}
 					/>
-					<line x1="20" y1="130" x2="520" y2="130" stroke="var(--color-separator)" />
+					<line x1="20" y1="130" x2="520" y2="130" stroke="var(--color-graph-gridlines)" />
 					{bars.map((d, i) => {
 						const hAll = (d.allUsers / max) * 110;
 						const hDesktop = (d.desktop / max) * 110;
@@ -548,7 +548,7 @@ function StackedBarCard({
 	data,
 }: {
 	title: string;
-	data: Array<{ label: string; value: number; color: string }>;
+	data: Array<{ label: string; value: number; color: DataColor }>;
 }) {
 	const total = data.reduce((sum, d) => sum + d.value, 0);
 	const clipId = `stacked-${title.toLowerCase().replace(/[^a-z]+/g, "-")}`;

package/templates/detail-page.tsx

@@ -2,10 +2,11 @@
 // 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):
-//   L[h=fill mw=1000] > (LH[divider p=6] > V[g=3] > ((H[g=4 a=start] > (SI[fill] > V[g=2] > (Lk"All orders" + (V[g=0] > Hd"#1001"[level=1] + (H[g=1 a=center wrap] > Tx"5 ordered items"[t=supporting] + (H[g=1 a=center] > Bu + Av"Vlad Dracul" + Tx"Vlad Dracul"[t=supporting]) + (H[g=1 a=center] > Bu + SD"Unfulfilled" + Tx"Unfulfilled"[t=supporting]) + (H[g=1 a=center] > Bu + Ic + Tx"02/23/2026"[t=supporting]) + (H[g=1 a=center] > Bu + Ic + Tx"Needs attention"[t=supporting]) + (H[g=1 a=center] > Bu + Lk"See all")))) + (H[g=2] > B.secondary"Restock" + B.secondary"Edit")) + (H[g=2] > (SI[fill] > V[a=stretch] > B.secondary"Restock") + (SI[fill] > V[a=stretch] > B.secondary"Edit")) + (H[a=center] > (SI[fill] > TL[size=lg] > (Tab"Details"! + Tab"Invoices" + Tab"Timeline" + TabMenu"More")) + B.ghost))) + (LC > V[g=4] > ((S > V[g=4] > ((H[g=2 a=center wrap] > (SI[fill] > (H[g=2 a=center] > Hd"Items"[level=2] + SD"Unfulfilled" + Tx"Unfulfilled"[t=supporting])) + (H[g=2] > B.ghost"Fulfill item" + B.secondary"Create label")) + (UL[density=spacious edge=outset] > LI*5)) + (S > V[g=4] > ((H[g=2 a=center wrap] > (SI[fill] > (H[g=2 a=center] > Hd"Invoice"[level=2] + SD"Paid" + Tx"Paid"[t=supporting])) + (H[g=2] > B.ghost"Refund" + B.secondary"Send Invoice")) + (ML > MLI*5) + D + (ML > MLI*1))) + (S > V[g=4] > ((H[g=2 a=center] > (SI[fill] > Hd"Timeline"[level=2]) + B.ghost"Filters") + (UL[density=spacious edge=outset] > LI*4)))) + (LP[w=320 p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis")) ;; Dlg[variant=fullscreen] > L[h=auto] > (DH"Order details" + (LC[p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis"))
+//   L[h=fill mw=1000] > (LH[divider p=6 pb=0] > V[g=3] > ((H[g=4 a=start] > (SI[fill] > V[g=2] > (Lk"All orders" + (V[g=0] > Hd"#1001"[level=1] + (H[g=1 a=center wrap] > Tx"5 ordered items"[t=supporting] + (H[g=1 a=center] > Bu + Av"Vlad Dracul" + Tx"Vlad Dracul"[t=supporting]) + (H[g=1 a=center] > Bu + SD"Unfulfilled" + Tx"Unfulfilled"[t=supporting]) + (H[g=1 a=center] > Bu + Ic + Tx"02/23/2026"[t=supporting]) + (H[g=1 a=center] > Bu + Ic + Tx"Needs attention"[t=supporting]) + (H[g=1 a=center] > Bu + Lk"See all")))) + (H[g=2] > B.secondary"Restock" + B.secondary"Edit")) + (H[g=2] > (SI[fill] > V[a=stretch] > B.secondary"Restock") + (SI[fill] > V[a=stretch] > B.secondary"Edit")) + (H[a=center] > (SI[fill] > TL[size=lg fullBleed] > (Tab"Details"! + Tab"Invoices" + Tab"Timeline" + TabMenu"More")) + B.ghost))) + (LC > V[g=4] > ((S > V[g=4] > ((H[g=2 a=center wrap] > (SI[fill] > (H[g=2 a=center] > Hd"Items"[level=2] + SD"Unfulfilled" + Tx"Unfulfilled"[t=supporting])) + (H[g=2] > B.ghost"Fulfill item" + B.secondary"Create label")) + (UL[density=spacious edge=outset] > LI*5)) + (S > V[g=4] > ((H[g=2 a=center wrap] > (SI[fill] > (H[g=2 a=center] > Hd"Invoice"[level=2] + SD"Paid" + Tx"Paid"[t=supporting])) + (H[g=2] > B.ghost"Refund" + B.secondary"Send Invoice")) + (ML > MLI*5) + D + (ML > MLI*1))) + (S > V[g=4] > ((H[g=2 a=center] > (SI[fill] > Hd"Timeline"[level=2]) + B.ghost"Filters") + (UL[density=spacious edge=outset] > LI*4)))) + (LP[w=320 p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis")) ;; Dlg[variant=fullscreen] > L[h=auto] > (DH"Order details" + (LC[p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis"))
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { Button } from "@astryxdesign/core/Button";
+import { Center } from "@astryxdesign/core/Center";
 import { Collapsible } from "@astryxdesign/core/Collapsible";
 import { Dialog, DialogHeader } from "@astryxdesign/core/Dialog";
 import { Divider } from "@astryxdesign/core/Divider";
@@ -43,23 +44,20 @@ import {
 } from "lucide-react";
 // ─── Styles ─────────────────────────────────────────────────────────────────
 import type { CSSProperties } from "react";
-import { useState } from "react";
 
-// The only custom CSS in this template is small optical-alignment negative
-// margins: LayoutHeader/TabList have no edge-dock prop (#2622) and List
-// has no "bleed to container edge" prop (#2626). Everything else uses props.
-// Plain inline styles — no StyleX compiler required.
+// Definite ancestor for `height="fill"`: 100dvh, not minHeight: '100%' (a
+// percentage min-height against an indefinite block computes to 0 — CSS 2.1
+// 10.5). Templates ship standalone, so the page owns this, not the host.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
+import { useState } from "react";
 
-// Bleed the tab bar to the header's content edges so the active-tab underline
-// meets the header divider. No edge-dock prop on TabList (#2622).
-//
-// These are written as spacing-token arithmetic, not raw pixels: core's
-// --spacing-* scale is `rem` since 0.7.0, so a literal -12px stops matching
-// the padding it cancels at any root font size other than 16px.
-const tabsRow: CSSProperties = {
-	marginInline: "calc(var(--spacing-3) * -1)",
-	marginBottom: "calc(var(--spacing-4) * -1)",
-	marginTop: "var(--spacing-3)",
+// The only custom CSS in this template is the sigil plate's shrink rule: the
+// List row supplies the box, and the plate must not squash beside a long name.
+// Everything else uses props.
+const sigilClip: CSSProperties = {
+	flexShrink: 0,
+	overflow: "clip",
 };
 
 // ─── Product data ───────────────────────────────────────────────────────────
@@ -111,17 +109,10 @@ const PRODUCT_HUES: readonly SceneHue[] = [
 	"var(--dracula-green)",
 ];
 
-const sigilClip: CSSProperties = {
-	width: 40,
-	height: 40,
-	overflow: "clip",
-	flexShrink: 0,
-};
-
 function ProductSigil({ index }: { name: string; index: number }) {
 	const hue = PRODUCT_HUES[index % PRODUCT_HUES.length];
 	return (
-		<div style={sigilClip}>
+		<Center width={40} height={40} style={sigilClip}>
 			<SceneFrame
 				label={`${PRODUCTS[index % PRODUCTS.length].name} sigil`}
 				viewBox="0 0 40 40"
@@ -132,7 +123,7 @@ function ProductSigil({ index }: { name: string; index: number }) {
 				<circle cx={25} cy={9} r={5.5} fill="var(--dracula-bg-light)" opacity={0.5} />
 				<path d="M0 28 Q10 22 20 26 T40 24 V40 H0 Z" fill="var(--dracula-current-line)" />
 			</SceneFrame>
-		</div>
+		</Center>
 	);
 }
 
@@ -199,7 +190,7 @@ function PageHeader({
 	isNarrow: boolean;
 }) {
 	return (
-		<LayoutHeader hasDivider padding={6}>
+		<LayoutHeader hasDivider padding={6} paddingBlockEnd={0}>
 			<VStack gap={3}>
 				<HStack gap={4} vAlign="start">
 					<StackItem size="fill">
@@ -284,9 +275,9 @@ function PageHeader({
 					</HStack>
 				)}
 
-				<HStack vAlign="center" style={tabsRow}>
+				<HStack vAlign="center">
 					<StackItem size="fill">
-						<TabList value={activeTab} onChange={onTabChange} size="lg">
+						<TabList value={activeTab} onChange={onTabChange} size="lg" isFullBleed>
 							<Tab value="details" label="Details" />
 							<Tab value="invoices" label="Invoices" />
 							<Tab value="timeline" label="Timeline" />
@@ -601,6 +592,7 @@ export default function DetailPage() {
 	return (
 		<>
 			<Layout
+				style={pageStyle}
 				height="fill"
 				contentWidth={1000}
 				defaultHasDividers

package/templates/documentation-design.tsx

@@ -143,6 +143,9 @@ function ComponentDetailView() {
 			height="auto"
 			contentWidth={960}
 			end={
+				// Dropped below 768 on purpose: this rail is in-page navigation, not
+				// content. Every heading stays reachable by scrolling, and two rails on a
+				// phone would eat the column the prose needs.
 				isMobile ? undefined : (
 					<LayoutPanel
 						isScrollable={false}

package/templates/documentation-technical.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):
-//   L[h=auto mw=960] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > Hd"Getting started with Astryx Dracula"[level=1] + Tx"Last updated March 30, 2026"[t=supporting] + SE{Selector}"On this page") + (C > V[g=3] > (H[g=2 a=center] > (SI[fill] > (H[g=2 a=center] > Ic + Tx"AI Assistance"[t=body])) + B.ghost"Copy prompt") + Tx"Help me get set up"[t=body]) + (V[g=4] > Hd"Prerequisites"[level=2] + (UL[density=compact] > LI"Node.js 18+" + LI"React 18 or 19" + LI"A package manager")) + D + (V[g=4] > Hd"Install the package"[level=2] + Tx"Description"[t=body] + (V[g=2] > Tx"Step 1"[t=body] + Cd) + (V[g=2] > Tx"Step 2"[t=body] + Tx"Astryx ships precompiled CSS"[t=body] + Cd) + (V[g=2] > Tx"Step 3"[t=body] + Cd)) + D + (V[g=4] > Hd"Configure theming"[level=2] + Tx"Description"[t=body] + Cd + Tx"Note"[t=body]) + D + (V[g=4] > Hd"Next steps"[level=2] + (UL[density=compact] > LI"Fundamental concepts" + LI"Component API reference" + LI"Accessibility" + LI"CLI tools" + LI"Design tokens"))) + (LP[!scroll] > Outline)
+//   L[h=auto mw=960] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > Hd"Getting started with Astryx Dracula"[level=1 t=display-2] + Tx"Last updated March 30, 2026"[t=supporting] + SE{Selector}"On this page") + (C > V[g=3] > (H[g=2 a=center] > (SI[fill] > (H[g=2 a=center] > Ic + Tx"AI Assistance"[t=body])) + B.ghost"Copy prompt") + Tx"Help me get set up"[t=body]) + (V[g=4] > Hd"Prerequisites"[level=2] + (UL[density=compact] > LI"Node.js 18+" + LI"React 18 or 19" + LI"A package manager")) + D + (V[g=4] > Hd"Install the package"[level=2] + Tx"Description"[t=body] + (V[g=2] > Tx"Step 1"[t=body] + Cd) + (V[g=2] > Tx"Step 2"[t=body] + Tx"Astryx ships precompiled CSS"[t=body] + Cd) + (V[g=2] > Tx"Step 3"[t=body] + Cd)) + D + (V[g=4] > Hd"Configure theming"[level=2] + Tx"Description"[t=body] + Cd + Tx"Note"[t=body]) + D + (V[g=4] > Hd"Next steps"[level=2] + (UL[density=compact] > LI"Fundamental concepts" + LI"Component API reference" + LI"Accessibility" + LI"CLI tools" + LI"Design tokens"))) + (LP[!scroll] > Outline)
 
 import { Button } from "@astryxdesign/core/Button";
 import { Card } from "@astryxdesign/core/Card";
@@ -63,6 +63,9 @@ export default function DocumentationTechnical() {
 			height="auto"
 			contentWidth={960}
 			end={
+				// Dropped below 768 on purpose: this rail is in-page navigation, not
+				// content. Every heading stays reachable by scrolling, and two rails on a
+				// phone would eat the column the prose needs.
 				isMobile ? undefined : (
 					<LayoutPanel
 						isScrollable={false}
@@ -78,7 +81,9 @@ export default function DocumentationTechnical() {
 				<LayoutContent isScrollable={false} padding={8}>
 					<VStack gap={8}>
 						<VStack gap={2}>
-							<Heading level={1}>Getting started with Astryx Dracula</Heading>
+							<Heading level={1} type="display-2">
+								Getting started with Astryx Dracula
+							</Heading>
 							<Text type="supporting" color="secondary" hasTabularNumbers>
 								Last updated March 30, 2026
 							</Text>
@@ -116,9 +121,7 @@ export default function DocumentationTechnical() {
 									/>
 								</HStack>
 								<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 the Theme
-									component. 3. Replace one existing component with an Astryx equivalent.
+									{SETUP_PROMPT}
 								</Text>
 							</VStack>
 						</Card>

package/templates/documentation.tsx

@@ -2,11 +2,12 @@
 // 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):
-// Counts: 31 total, Core 18 / Layout 4 / Navigation 4 / Form 5. Derived at
-// render from COMPONENT_CATEGORIES, so these numerals must move together with
-// the array -- the gate in scripts/check.ts reads the rendered count, not this
-// comment.
-//   L[h=fill mw=1200] > LC[p=8] > V[g=10] > (C.transparent[p=10] > (H[g=8 a=center] > (SI[fill] > V[g=4] > Hd"The coven grimoire"[level=1 t=display-1] + Tx.lg"Every incantation in the Astryx spellbook"[t=large] + (H > B.primary"Enter the grimoire")))) + (V[g=4] > (H[j=between a=center] > Hd"Core"[level=2] + Tx"18 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 h=160] > Scene{SceneTile}) + (V[g=1] > Tx"AppShell"[t=body] + Tx"AppShell provides"[t=body]))*18)) + (V[g=4] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"4 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 h=160] > Scene{SceneTile}) + (V[g=1] > Tx"Card"[t=body] + Tx"Cards group"[t=body]))*4)) + (V[g=4] > (H[j=between a=center] > Hd"Navigation"[level=2] + Tx"4 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 h=160] > Scene{SceneTile}) + (V[g=1] > Tx"Breadcrumbs"[t=body] + Tx"Breadcrumbs show"[t=body]))*4)) + (V[g=4] > (H[j=between a=center] > Hd"Form"[level=2] + Tx"5 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 h=160] > Scene{SceneTile}) + (V[g=1] > Tx"CheckboxInput"[t=body] + Tx"CheckboxInput renders"[t=body]))*5))
+// Counts: 31 total, Core 18 / Layout 4 / Navigation 4 / Form 5. The page derives
+// every rendered count from COMPONENT_CATEGORIES; the numerals here are the
+// header's copy of that count and must be moved by hand with the array — no
+// gate reads them (scripts/check.ts gates component names in a header, not
+// counts).
+//   L[h=fill mw=1200] > LC[p=8] > V[g=10] > (C.transparent[p=10] > (H[g=8 a=center] > (SI[fill] > V[g=4] > Hd"The coven grimoire"[level=1 t=display-2] + Tx.lg"Every incantation in the Astryx spellbook"[t=large] + (H > B.primary"Enter the grimoire")))) + (V[g=4] > (H[j=between a=center] > Hd"Core"[level=2] + Tx"18 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 minH=160] > Scene{SceneTile}) + (V[g=1] > Tx"AppShell"[t=body] + Tx"AppShell provides"[t=body]))*18)) + (V[g=4] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"4 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 minH=160] > Scene{SceneTile}) + (V[g=1] > Tx"Card"[t=body] + Tx"Cards group"[t=body]))*4)) + (V[g=4] > (H[j=between a=center] > Hd"Navigation"[level=2] + Tx"4 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 minH=160] > Scene{SceneTile}) + (V[g=1] > Tx"Breadcrumbs"[t=body] + Tx"Breadcrumbs show"[t=body]))*4)) + (V[g=4] > (H[j=between a=center] > Hd"Form"[level=2] + Tx"5 spells"[t=body]) + (G[c={min:260} g=4] > (CC.transparent[p=4] > V[g=3] > (C.muted[p=0 minH=160] > Scene{SceneTile}) + (V[g=1] > Tx"CheckboxInput"[t=body] + Tx"CheckboxInput renders"[t=body]))*5))
 
 /**
  * Documentation catalog — every component shelf in the grimoire.  Frame-first layout (see `bunx astryx docs layout`): (Frame/responsive/container: see XLE header above.)
@@ -24,6 +25,11 @@ import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { SceneTile } from "astryx-dracula/shared/scene-tile";
 import type { CSSProperties } from "react";
 
+// Definite ancestor for `height="fill"`: 100dvh, not minHeight: '100%' (a
+// percentage min-height against an indefinite block computes to 0 — CSS 2.1
+// 10.5). Templates ship standalone, so the page owns this, not the host.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
 // Negative margin offsets each card's 8px padding so the grid content stays
 // visually aligned while giving every card a padded hover/click target.
 const cardGrid: CSSProperties = {
@@ -244,6 +250,7 @@ const COMPONENT_TOTAL = COMPONENT_CATEGORIES.reduce(
 export default function DocumentationCatalog() {
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			contentWidth={1200}
 			content={
@@ -253,7 +260,7 @@ export default function DocumentationCatalog() {
 							<HStack gap={8} vAlign="center">
 								<StackItem size="fill">
 									<VStack gap={4}>
-										<Heading level={1} type="display-1">
+										<Heading level={1} type="display-2">
 											The coven grimoire
 										</Heading>
 										<Text type="large" weight="normal" color="secondary">

package/templates/form-two-column.tsx

@@ -121,6 +121,7 @@ export default function TwoColumnForm() {
 									label="Full name"
 									isRequired
 									placeholder="Full name"
+									autoComplete="name"
 									value={fullName}
 									onChange={setFullName}
 									status={errors.fullName ? { type: "error", message: errors.fullName } : undefined}
@@ -129,7 +130,9 @@ export default function TwoColumnForm() {
 									<TextInput
 										label="Email"
 										isRequired
+										type="email"
 										placeholder="Email"
+										autoComplete="email"
 										value={email}
 										onChange={setEmail}
 										status={errors.email ? { type: "error", message: errors.email } : undefined}
@@ -137,6 +140,7 @@ export default function TwoColumnForm() {
 									<TextInput
 										label="Company name"
 										placeholder="Company name"
+										autoComplete="organization"
 										value={company}
 										onChange={setCompany}
 									/>
@@ -145,20 +149,25 @@ export default function TwoColumnForm() {
 									<TextInput
 										label="Job title"
 										placeholder="Job title"
+										autoComplete="organization-title"
 										value={jobTitle}
 										onChange={setJobTitle}
 									/>
 									<TextInput
 										label="Phone number"
+										type="tel"
 										placeholder="Phone number"
+										autoComplete="tel"
 										value={phone}
 										onChange={setPhone}
 									/>
 								</Grid>
 
 								<VStack gap={2}>
-									<Text type="label">What are you reaching out about?</Text>
-									<HStack gap={2} wrap="wrap">
+									<Text type="label" id="inquiry-reasons-label">
+										What are you reaching out about?
+									</Text>
+									<HStack gap={2} wrap="wrap" role="group" aria-labelledby="inquiry-reasons-label">
 										{INQUIRY_REASONS.map((reason) => {
 											const isSelected = inquiryReason === reason;
 											return (

package/templates/form-wizard.template.mjs

@@ -0,0 +1,15 @@
+export default {
+	type: "page",
+	name: "Form Wizard",
+	description: "Four-step workspace setup with a stepper, per-step validation, and a review",
+	keywords: [
+		"wizard",
+		"stepper",
+		"multi-step form",
+		"onboarding",
+		"validation",
+		"review step",
+		"workspace setup",
+	],
+	category: "forms",
+};