astryx-dracula 0.6.2 → 0.7.0

package/templates/login-sso.tsx

@@ -14,10 +14,7 @@ import { HStack, VStack } from "@astryxdesign/core/Layout";
 import { Link } from "@astryxdesign/core/Link";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
-import {
-	inputAutoComplete,
-	authPageStyle as pageStyle,
-} from "astryx-dracula/shared/auth-chrome-config";
+import { authPageStyle as pageStyle } from "astryx-dracula/shared/auth-chrome-config";
 import {
 	AUTH_EMAIL_PLACEHOLDER,
 	AUTH_ERROR_MESSAGE,
@@ -41,14 +38,13 @@ import { useState, useTransition } from "react";
 
 type SSOProvider = {
 	name: string;
-	abbr: string;
 };
 const SSO_PROVIDERS: Record<string, SSOProvider> = {
-	"google.com": { name: "Google Workspace", abbr: "G" },
-	"microsoft.com": { name: "Microsoft Entra ID", abbr: "M" },
-	"okta.com": { name: "Okta", abbr: "O" },
-	"meta.com": { name: "Meta SSO", abbr: "M" },
-	"apple.com": { name: "Apple Business", abbr: "A" },
+	"google.com": { name: "Google Workspace" },
+	"microsoft.com": { name: "Microsoft Entra ID" },
+	"okta.com": { name: "Okta" },
+	"meta.com": { name: "Meta SSO" },
+	"apple.com": { name: "Apple Business" },
 };
 
 function getProvider(email: string) {
@@ -136,7 +132,7 @@ export default function LoginSso() {
 									label="Work email"
 									isLabelHidden
 									type="email"
-									{...inputAutoComplete("email")}
+									autoComplete="email"
 									placeholder={AUTH_EMAIL_PLACEHOLDER}
 									value={email}
 									onChange={(v: string) => {
@@ -144,11 +140,7 @@ export default function LoginSso() {
 										setError(null);
 									}}
 									size="lg"
-									onKeyDown={(e: React.KeyboardEvent) => {
-										if (e.key === "Enter") {
-											handleContinue();
-										}
-									}}
+									onEnter={handleContinue}
 									status={error ? { type: "error", message: error } : undefined}
 								/>
 
@@ -246,7 +238,7 @@ export default function LoginSso() {
 									<TextInput
 										label="Password"
 										type="password"
-										{...inputAutoComplete("current-password")}
+										autoComplete="current-password"
 										value={password}
 										size="lg"
 										onChange={(v: string) => {

package/templates/messaging-shell.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 > (LP[w=68] > V[g=2] > Av + IB*4 + SI[fill] + IB"Settings") + (LP[w=260] > V > (H[g=2] > (SI[fill] > Hd"Messages"[level=1]) + IB"New message") + (V[g=0] > TI"Jump to…") + (SI[fill] > (UL[density=compact edge=flush !hasDividers] > (Tx"Channels"[t=label] + LI*4)) + (UL[density=compact edge=flush !hasDividers] > (Tx"Direct messages"[t=label] + LI*3)))) + (LC[p=0] > V > (H[g=3] > Ic + Hd"design-systems"[level=2] + (SI[fill] > Tx"Component APIs, tokens, and release coordination"[t=body]) + SD"12 online" + IB"Members") + D + (SI[fill] > ChL > (ChML[density=balanced] > ChSM"Tuesday, June 30" + ChSM"Sasha Ortiz joined #design-systems" + (ChM > ChBu) + (ChM > ChBu*2) + (ChM > ChBu*2) + (ChM > ChBu) + (ChM > ChBu)) + ChC"Message #design-systems" + EmptyState"No messages yet")) + (LP[w=340] > V > (H[g=2] > (SI[fill] > (H[g=2] > Tx"Thread"[weight=semibold] + Tx"#design-systems"[t=supporting])) + IB"Close thread") + D + (SI[fill] > ChML[density=compact] > (ChM > ChBu) + ChSM"2 replies" + (ChM > ChBu)*2) + (V[g=0] > ChC"Reply in thread…")))
+//   L > (LP[w=68] > V[g=2] > Av + IB*4 + SI[fill] + IB"Settings") + (LP[w=260] > V > (H[g=2] > (SI[fill] > Hd"Messages"[level=1]) + IB"New message") + (V[g=0] > TI"Jump to…") + (SI[fill] > (UL[density=compact edge=flush !hasDividers] > (Tx"Channels"[t=label] + LI*4)) + (UL[density=compact edge=flush !hasDividers] > (Tx"Direct messages"[t=label] + LI*3)))) + (LC[p=0] > V > (H[g=3] > Ic + Hd"design-systems"[level=2] + (SI[fill] > Tx"Component APIs, tokens, and release coordination"[t=body]) + SD"12 online" + IB"Open thread" + IB"Members") + D + (SI[fill] > ChL > (ChML[density=balanced] > ChSM"Tuesday, June 30" + ChSM"Sasha Ortiz joined #design-systems" + (ChM > ChBu) + (ChM > ChBu*2) + (ChM > ChBu*2) + (ChM > ChBu) + (ChM > ChBu)) + ChC"Message #design-systems" + EmptyState"No messages yet")) + (LP[w=340] > V > (H[g=2] > (SI[fill] > (H[g=2] > Tx"Thread"[weight=semibold] + Tx"#design-systems"[t=supporting])) + IB"Close thread") + D + (SI[fill] > ChML[density=compact] > (ChM > ChBu) + ChSM"2 replies" + (ChM > ChBu)*2) + (V[g=0] > ChC"Reply in thread…")) ;; Drawer"Thread"[side=end w=340] > (DrawerHeader"Thread" + (V > (SI[fill] > ChML[density=compact] > (ChM > ChBu) + ChSM"2 replies" + (ChM > ChBu)*2) + (V[g=0] > ChC"Reply in thread…")))
 
 /**
  * Messaging Shell — Slack-style column frame for team messaging tools.  Frame (desktop, left to right): (Frame/responsive/container: see XLE header above.)
@@ -20,6 +20,7 @@ import {
 	ChatSystemMessage,
 } from "@astryxdesign/core/Chat";
 import { Divider } from "@astryxdesign/core/Divider";
+import { Drawer, DrawerHeader } from "@astryxdesign/core/Drawer";
 import { EmptyState } from "@astryxdesign/core/EmptyState";
 import { useMediaQuery } from "@astryxdesign/core/hooks";
 import { Icon } from "@astryxdesign/core/Icon";
@@ -38,6 +39,7 @@ import { StatusDot } from "@astryxdesign/core/StatusDot";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
 import { Timestamp } from "@astryxdesign/core/Timestamp";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 // ============= ICONS (verified lucide-react exports) =============
 // Bell ← BellIcon, Bookmark ← BookmarkIcon, MessagesSquare ← ChatBubbleLeftRightIcon,
 // Settings ← Cog6ToothIcon, Hash ← HashtagIcon, House ← HomeIcon, Inbox ← InboxIcon,
@@ -420,6 +422,10 @@ export default function MessagingShell() {
 	const [selectedChannelId, setSelectedChannelId] = useState("design-systems");
 	const [selectedDmId, setSelectedDmId] = useState<string | null>(null);
 	const [isThreadOpen, setIsThreadOpen] = useState(true);
+	// Below 1024 the thread is a Drawer instead of a column, and that overlay
+	// owns its own open state: loaded narrow, it starts closed and the message
+	// header is what opens it.
+	const [isThreadDrawerOpen, setIsThreadDrawerOpen] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
 
 	// Responsive contract (see file header).
@@ -439,6 +445,16 @@ export default function MessagingShell() {
 	);
 
 	const showThreadPanel = isThreadOpen && !isThreadHidden;
+	// One control drives both presentations — the docked column at 1024 and
+	// above, the Drawer below it — so closing the thread is never one-way.
+	const isThreadVisible = isThreadHidden ? isThreadDrawerOpen : showThreadPanel;
+	const toggleThread = () => {
+		if (isThreadHidden) {
+			setIsThreadDrawerOpen((isOpen) => !isOpen);
+		} else {
+			setIsThreadOpen((isOpen) => !isOpen);
+		}
+	};
 
 	const workspaceRail = (
 		<VStack gap={2} style={railStyle}>
@@ -450,7 +466,6 @@ export default function MessagingShell() {
 					tooltip={item.label}
 					icon={<Icon icon={item.icon} size="sm" color="inherit" />}
 					variant={item.id === "home" ? "secondary" : "ghost"}
-					onClick={() => {}}
 				/>
 			))}
 			<StackItem size="fill" />
@@ -459,7 +474,6 @@ export default function MessagingShell() {
 				tooltip="Settings"
 				icon={<Icon icon={Settings} size="sm" color="inherit" />}
 				variant="ghost"
-				onClick={() => {}}
 			/>
 		</VStack>
 	);
@@ -476,7 +490,6 @@ export default function MessagingShell() {
 					icon={<Icon icon={SquarePen} size="sm" color="inherit" />}
 					variant="ghost"
 					size="sm"
-					onClick={() => {}}
 				/>
 			</HStack>
 			<VStack gap={0} style={sidebarSearchStyle}>
@@ -563,6 +576,14 @@ export default function MessagingShell() {
 	const messageStream = (
 		<Stack direction="vertical" style={streamColumnStyle}>
 			<HStack gap={3} style={streamHeaderStyle}>
+				{/* The sidebar carries the page h1 and is hidden at 768 and below; the
+				    stream keeps the outline intact so a phone still has a top-level
+				    heading to navigate by. */}
+				{isSidebarHidden && (
+					<VisuallyHidden>
+						<Heading level={1}>Messages</Heading>
+					</VisuallyHidden>
+				)}
 				<Icon icon={Hash} size="sm" color="secondary" />
 				<Heading level={2}>{selectedChannel.name}</Heading>
 				<StackItem size="fill" style={streamTopicStyle}>
@@ -571,13 +592,20 @@ export default function MessagingShell() {
 					</Text>
 				</StackItem>
 				<StatusDot variant="success" label="12 online" />
+				<IconButton
+					label={isThreadVisible ? "Close thread" : "Open thread"}
+					tooltip={isThreadVisible ? "Close thread" : "Open thread"}
+					icon={<Icon icon={isThreadVisible ? X : MessagesSquare} size="sm" color="inherit" />}
+					variant="ghost"
+					size="sm"
+					onClick={toggleThread}
+				/>
 				<IconButton
 					label="Members"
 					tooltip="Members"
 					icon={<Icon icon={Users} size="sm" color="inherit" />}
 					variant="ghost"
 					size="sm"
-					onClick={() => {}}
 				/>
 			</HStack>
 			<Divider />
@@ -609,6 +637,31 @@ export default function MessagingShell() {
 		</Stack>
 	);
 
+	// The thread body is shared by the docked column and the narrow Drawer, so
+	// the two presentations of one thread cannot drift apart.
+	const threadBody = (
+		<>
+			<StackItem
+				size="fill"
+				style={threadScrollStyle}
+				role="region"
+				aria-label="Thread messages"
+				tabIndex={0}
+			>
+				<ChatMessageList density="compact">
+					<ThreadMessage reply={THREAD[0]} />
+					<ChatSystemMessage variant="divider">{THREAD.length - 1} replies</ChatSystemMessage>
+					{THREAD.slice(1).map((reply) => (
+						<ThreadMessage key={reply.id} reply={reply} />
+					))}
+				</ChatMessageList>
+			</StackItem>
+			<VStack gap={0} style={threadComposerStyle}>
+				<ChatComposer density="compact" placeholder="Reply in thread…" onSubmit={() => {}} />
+			</VStack>
+		</>
+	);
+
 	const threadPanel = (
 		<Stack direction="vertical" style={threadColumnStyle}>
 			<HStack gap={2} style={threadHeaderStyle}>
@@ -630,51 +683,61 @@ export default function MessagingShell() {
 				/>
 			</HStack>
 			<Divider />
-			<StackItem
-				size="fill"
-				style={threadScrollStyle}
-				role="region"
-				aria-label="Thread messages"
-				tabIndex={0}
-			>
-				<ChatMessageList density="compact">
-					<ThreadMessage reply={THREAD[0]} />
-					<ChatSystemMessage variant="divider">{THREAD.length - 1} replies</ChatSystemMessage>
-					{THREAD.slice(1).map((reply) => (
-						<ThreadMessage key={reply.id} reply={reply} />
-					))}
-				</ChatMessageList>
-			</StackItem>
-			<VStack gap={0} style={threadComposerStyle}>
-				<ChatComposer density="compact" placeholder="Reply in thread…" onSubmit={() => {}} />
-			</VStack>
+			{threadBody}
 		</Stack>
 	);
 
 	return (
-		<Layout
-			height="fill"
-			style={rootStyle}
-			start={
-				<>
-					<LayoutPanel width={68} padding={0}>
-						{workspaceRail}
-					</LayoutPanel>
-					{!isSidebarHidden && (
-						<LayoutPanel width={260} padding={0}>
-							{channelSidebar}
+		<>
+			<Layout
+				height="fill"
+				style={rootStyle}
+				start={
+					<>
+						<LayoutPanel width={68} padding={0}>
+							{workspaceRail}
 						</LayoutPanel>
-					)}
-				</>
-			}
-			end={
-				showThreadPanel ? (
-					<LayoutPanel width={340} padding={0}>
-						{threadPanel}
-					</LayoutPanel>
-				) : undefined
-			}
-			content={<LayoutContent padding={0}>{messageStream}</LayoutContent>}
-		/>
+						{!isSidebarHidden && (
+							<LayoutPanel width={260} padding={0}>
+								{channelSidebar}
+							</LayoutPanel>
+						)}
+					</>
+				}
+				end={
+					showThreadPanel ? (
+						<LayoutPanel width={340} padding={0}>
+							{threadPanel}
+						</LayoutPanel>
+					) : undefined
+				}
+				content={<LayoutContent padding={0}>{messageStream}</LayoutContent>}
+			/>
+			{/* Below 1024 the thread is a Drawer, not a column: it overlays the
+          stream rather than compressing it. Non-modal (hasScrim={false}) so the
+          conversation behind stays selectable — the point of a thread.
+          DrawerHeader renders the close button because it is given
+          onOpenChange. `padding={0}` because the thread body brings its own
+          gutters, exactly as the docked column does. */}
+			<Drawer
+				side="end"
+				label="Thread"
+				isOpen={isThreadHidden && isThreadDrawerOpen}
+				onOpenChange={setIsThreadDrawerOpen}
+				hasScrim={false}
+				width={340}
+				padding={0}
+			>
+				<Stack direction="vertical" style={threadColumnStyle}>
+					<DrawerHeader
+						title="Thread"
+						subtitle={`#${selectedChannel.name}`}
+						onOpenChange={setIsThreadDrawerOpen}
+						hasDivider
+					/>
+					{threadBody}
+				</Stack>
+			</Drawer>
+		</>
 	);
 }

package/templates/mixed-gallery.tsx

@@ -11,10 +11,15 @@ import { Heading, Text } from "@astryxdesign/core/Text";
 import { galleryImageClip } from "astryx-dracula/shared/gallery-image";
 import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { SceneTile } from "astryx-dracula/shared/scene-tile";
+import type { CSSProperties } from "react";
 
 // ─── Styles ────────────────────────────────────────────────────────────────
 // Image fill + radius live in shared/gallery-image (no Image primitive in
 // Astryx, #2582). Tile art lives in shared/scene-tile (large fork).
+// 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 ───────────────────────────────────────────────────────────
 
@@ -57,6 +62,7 @@ function GalleryCard({ image, ratio }: { image: GalleryImage; ratio: number }) {
 export default function MixedGallery() {
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			contentWidth={1400}
 			content={

package/templates/payment-form.tsx

@@ -24,6 +24,7 @@ import { StatusDot } from "@astryxdesign/core/StatusDot";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextArea } from "@astryxdesign/core/TextArea";
 import { TextInput } from "@astryxdesign/core/TextInput";
+import { formatMoney } from "astryx-dracula/shared/format-money";
 import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { SceneTile } from "astryx-dracula/shared/scene-tile";
 import { CircleCheck, Lock, ShieldCheck, Truck } from "lucide-react";
@@ -126,13 +127,20 @@ const ORDER_ITEMS = [
 
 const TAX_RATE = 0.08;
 const FREE_SHIPPING_THRESHOLD = 300;
-const fmt = (n: number) => `$${n.toFixed(2)}`;
+// The rates the summary and the RadioList labels both read.
+const SHIPPING_STANDARD = 4.95;
+const SHIPPING_EXPEDITED = 9.95;
 
 // ── Styles ────────────────────────────────────────────────────────────────────
 // Plain inline styles using Astryx design-token CSS variables (declared at
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
 const fullWidth: CSSProperties = { width: "100%" };
+// 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). LayoutContent is overflow:auto, so the height lands as a content-pane
+// scroller. Same shape as side-gallery.tsx.
+const pageStyle: CSSProperties = { height: "100dvh" };
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = { flexBasis: 0 };
 // Space the Order Summary content below its collapsible trigger title.
@@ -203,7 +211,7 @@ function OrderLineItem({
 							)}
 						</HStack>
 						<Text type="body" hasTabularNumbers>
-							{fmt(item.price)}
+							{formatMoney(item.price)}
 						</Text>
 					</HStack>
 					<Text type="supporting" color="secondary">
@@ -219,8 +227,8 @@ function OrderLineItem({
 							isIntegerOnly
 						/>
 						{/* Editing the order in place — an action, never a destination. */}
-						<Button label="Remove" variant="ghost" onClick={() => {}} />
-						<Button label="Save" variant="ghost" onClick={() => {}} />
+						<Button label="Remove" variant="ghost" />
+						<Button label="Save" variant="ghost" />
 					</HStack>
 				</VStack>
 			</StackItem>
@@ -285,7 +293,7 @@ function OrderTotalSection({
 						Subtotal
 					</Text>
 					<Text type="body" hasTabularNumbers>
-						{fmt(subtotal)}
+						{formatMoney(subtotal)}
 					</Text>
 				</HStack>
 				<HStack hAlign="between" vAlign="center">
@@ -293,7 +301,7 @@ function OrderTotalSection({
 						Shipping
 					</Text>
 					<Text type="body" hasTabularNumbers>
-						{fmt(shipping)}
+						{formatMoney(shipping)}
 					</Text>
 				</HStack>
 				<HStack hAlign="between" vAlign="center">
@@ -301,7 +309,7 @@ function OrderTotalSection({
 						Tax
 					</Text>
 					<Text type="body" hasTabularNumbers>
-						{fmt(tax)}
+						{formatMoney(tax)}
 					</Text>
 				</HStack>
 			</VStack>
@@ -309,13 +317,13 @@ function OrderTotalSection({
 			<HStack hAlign="between" vAlign="center">
 				<Text type="large">Total</Text>
 				<Text type="large" hasTabularNumbers>
-					{fmt(total)}
+					{formatMoney(total)}
 				</Text>
 			</HStack>
 			<Banner
 				status="info"
 				icon={<Icon icon={Truck} size="sm" />}
-				title="Free shipping on orders over $300"
+				title={`Free shipping on orders over $${FREE_SHIPPING_THRESHOLD}`}
 			/>
 		</VStack>
 	);
@@ -410,8 +418,11 @@ export default function PaymentForm() {
 		(sum, item) => sum + item.price * (quantities[item.id] ?? item.qty),
 		0,
 	);
-	const shipping =
-		subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : deliveryMethod === "expedited" ? 9.95 : 4.95;
+	// The summary and the RadioList labels read the same rate constants, so a
+	// price change cannot leave the radio advertising a value the order does
+	// not charge.
+	const shippingRate = deliveryMethod === "expedited" ? SHIPPING_EXPEDITED : SHIPPING_STANDARD;
+	const shipping = subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : shippingRate;
 	const tax = Math.round(subtotal * TAX_RATE * 100) / 100;
 	const total = subtotal + shipping + tax;
 
@@ -444,6 +455,7 @@ export default function PaymentForm() {
 
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			content={
 				<LayoutContent padding={0}>
@@ -471,7 +483,7 @@ export default function PaymentForm() {
 											<VStack gap={1}>
 												<HStack gap={2} hAlign="between" vAlign="center">
 													<Heading level={2}>Sign in to check out</Heading>
-													<Button label="Sign in" variant="secondary" onClick={() => {}} />
+													<Button label="Sign in" variant="secondary" />
 												</HStack>
 												<Text type="body" color="secondary">
 													Sign in to track your order and save your information for faster checkout.
@@ -612,7 +624,7 @@ export default function PaymentForm() {
 														label="Standard (3–7 business days)"
 														endContent={
 															<Text type="body" weight="semibold" hasTabularNumbers>
-																$4.95
+																{formatMoney(SHIPPING_STANDARD)}
 															</Text>
 														}
 													/>
@@ -621,7 +633,7 @@ export default function PaymentForm() {
 														label="Expedited (1–2 business days)"
 														endContent={
 															<Text type="body" weight="semibold" hasTabularNumbers>
-																$9.95
+																{formatMoney(SHIPPING_EXPEDITED)}
 															</Text>
 														}
 													/>
@@ -641,19 +653,9 @@ export default function PaymentForm() {
 												<VStack gap={3}>
 													<Grid columns={isMobile ? 1 : 2} gap={3}>
 														{/* PayPal */}
-														<Button
-															label="PayPal"
-															variant="secondary"
-															size="lg"
-															onClick={() => {}}
-														/>
+														<Button label="PayPal" variant="secondary" size="lg" />
 														{/* Google Pay */}
-														<Button
-															label="Google Pay"
-															variant="secondary"
-															size="lg"
-															onClick={() => {}}
-														/>
+														<Button label="Google Pay" variant="secondary" size="lg" />
 													</Grid>
 												</VStack>
 
@@ -867,7 +869,7 @@ export default function PaymentForm() {
 															controlStyle={fullWidth}
 														/>
 													</StackItem>
-													<Button label="Apply" variant="secondary" size="lg" onClick={() => {}} />
+													<Button label="Apply" variant="secondary" size="lg" />
 												</HStack>
 											</VStack>
 
@@ -923,7 +925,6 @@ export default function PaymentForm() {
 														variant="secondary"
 														size="lg"
 														style={fullWidth}
-														onClick={() => {}}
 													/>
 												</VStack>
 												<Divider />

package/templates/product-detail.tsx

@@ -34,6 +34,11 @@ const stickyInfo: CSSProperties = {
 	top: "var(--spacing-8)",
 	alignSelf: "start",
 };
+// 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). LayoutContent is overflow:auto, so the height lands as a content-pane
+// scroller. Same shape as side-gallery.tsx and dashboard.tsx.
+const pageStyle: CSSProperties = { height: "100dvh" };
 
 import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { Minus, Plus } from "lucide-react";
@@ -62,6 +67,10 @@ const PRODUCT = {
 	name: "Midnight Ceremony Mug & Plate Set",
 	price: 89.0,
 	originalPrice: 119.0,
+	// The review count is data, so it lives with the product rather than as a
+	// numeral at the render site.
+	rating: 4.3,
+	reviewCount: 128,
 	description:
 		"A hand-thrown mug and plate set that brings quiet warmth to every midnight meal. The mug sits easy in the hand with a generous 12 oz capacity, while the 8-inch plate works for everything from toast to tapas. Each piece is kiln-fired at 2,300\u00B0F for a finish that resists chips and stains. Subtle variations in the reactive glaze pool like night mist, so no two sets are exactly alike. Dishwasher and microwave safe.",
 	composition:
@@ -87,7 +96,6 @@ const FINISHES = [
 // ─── Image Gallery ──────────────────────────────────────────────────────────
 function ImageGallery({ selected, onSelect }: { selected: number; onSelect: (i: number) => void }) {
 	const heroHue: SceneHue = IMAGES[selected];
-	const thumbnails = IMAGES;
 
 	return (
 		<VStack gap={3}>
@@ -95,7 +103,7 @@ function ImageGallery({ selected, onSelect }: { selected: number; onSelect: (i:
 				<SceneTile label={PRODUCT.name} hue={heroHue} size="lg" />
 			</AspectRatio>
 			<Grid columns={3} gap={2}>
-				{thumbnails.map((hue, i) => (
+				{IMAGES.map((hue, i) => (
 					<AspectRatio key={hue} ratio={1}>
 						<SelectableCard
 							label={`Product image ${i + 1}`}
@@ -134,7 +142,7 @@ function ProductInfo() {
 				<Heading level={1} type="display-2">
 					{PRODUCT.name}
 				</Heading>
-				<StarRating rating={4.3} count={128} />
+				<StarRating rating={PRODUCT.rating} count={PRODUCT.reviewCount} />
 				<HStack gap={2} vAlign="center">
 					<Text type="large" hasTabularNumbers>
 						{formatMoney(PRODUCT.price)}
@@ -286,6 +294,7 @@ export default function ProductDetail() {
 
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			contentWidth={1200}
 			content={

package/templates/product-gallery.tsx

@@ -11,13 +11,19 @@ import { Grid } from "@astryxdesign/core/Grid";
 import { Icon } from "@astryxdesign/core/Icon";
 import { Layout, LayoutContent, VStack } from "@astryxdesign/core/Layout";
 import { Heading, Text } from "@astryxdesign/core/Text";
+import { formatMoney } from "astryx-dracula/shared/format-money";
 import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { SceneTile } from "astryx-dracula/shared/scene-tile";
 import { ArrowRight } from "lucide-react";
+import type { CSSProperties } from "react";
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
 // Product tile art lives in shared/scene-tile (large fork); there is no Image
 // primitive to fill the AspectRatio box with `object-fit` (#2582).
+// 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" };
 
 // ─── Product Data ───────────────────────────────────────────────────────────
 
@@ -75,8 +81,6 @@ const PRODUCTS: Product[] = [
 	},
 ];
 
-const fmt = (n: number) => `$${n.toFixed(2)}`;
-
 // ─── Product Card ───────────────────────────────────────────────────────────
 
 function ProductCard({ product }: { product: Product }) {
@@ -93,7 +97,7 @@ function ProductCard({ product }: { product: Product }) {
 					{product.description}
 				</Text>
 				<Text type="large" hasTabularNumbers>
-					{fmt(product.price)}
+					{formatMoney(product.price)}
 				</Text>
 			</VStack>
 		</VStack>
@@ -105,6 +109,7 @@ function ProductCard({ product }: { product: Product }) {
 export default function ProductGallery() {
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			contentWidth={1200}
 			content={