astryx-dracula 0.5.1 → 0.6.2

package/templates/incident-console.tsx

@@ -1,5 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
+// 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):
 // NOTE on `t=display-2`: the h1 asked for display-2 from the start, but
 // core 0.3.0's Heading emitted no `data-type`, and the 0.3.0 CLI emitted no
 // `.astryx-heading[data-type]` rule, so --text-display-2-size never reached a
@@ -8,7 +10,7 @@
 // pixel-diffing the pre-upgrade build against this one at 1440 and 390: the
 // only regression was this header detaching at 390, fixed by stacking the
 // title group under `isNarrow`.
-//   L > (LH > H[g3 a=center] > (H[g2 a=center] > Hd"Night watch"[level=1 t=display-2] + 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))
+//   L[h=fill] > (LH[divider p=6] > (H[g=3 a=center] > (SI[fill] > H[g=2 a=center wrap] > Hd"Night watch"[level=1 t=display-2] + Tx"3 investigating"[t=supporting]) + SG"Filter by status" + B"Declare incident")) + (LC[p=0 !scroll] > V[g=0] > (H > (SI[fill] > PS"Search the night watch…")) + (SI[fill] > (V[g=0] > (V[g=0] > (H[g=2 a=center] > Tx"Investigating"[t=label] + Tx"3"[t=supporting]) + (UL[density=compact hasDividers] > (LI > SB)*3)) + (V[g=0] > (H[g=2 a=center] > Tx"Mitigated"[t=label] + Tx"2"[t=supporting]) + (UL[density=compact hasDividers] > (LI > SB)*2)) + (V[g=0] > (H[g=2 a=center] > Tx"Resolved"[t=label] + Tx"2"[t=supporting]) + (UL[density=compact hasDividers] > (LI > SB)*2))))) + (LP[w=380 p=0] > V[g=4] > (V[g=2] > (H[g=1 a=center] > SB + Tx"INC-2417"[t=supporting] + Tk"Investigating") + Hd"Checkout API elevated 5xx rate"[level=2]) + (H[g=2 wrap] > B.primary"Mark mitigated" + B.secondary"Escalate") + D + ML + D + (V[g=2] > Hd"Timeline"[level=3] + (UL[density=compact] > LI*3)))) ;; Drawer"Incident details"[side=end w=380] > (DrawerHeader"Incident details" + (V[g=4] > (V[g2] > (H[g=1 a=center] > SB + Tx"INC-2417"[t=supporting] + Tk"Investigating") + Hd"Checkout API elevated 5xx rate"[level=2]) + (H[g=2 wrap] > B.primary"Mark mitigated" + B.secondary"Escalate") + D + ML + D + (V[g=2] > Hd"Timeline"[level=3] + (UL[density=compact] > LI*3))))
 
 /**
  * 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.)
@@ -16,6 +18,7 @@
 
 import { Button } from "@astryxdesign/core/Button";
 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";
@@ -373,6 +376,10 @@ function IncidentRows({
 								key={incident.id}
 								label={incident.title}
 								description={`${incident.id} · ${incident.service} · ${incident.impact}`}
+								// Incident titles wrap to two lines. The severity badge
+								// and the status token belong on the TITLE's first
+								// line, not floating at the middle of the block.
+								align="first-line"
 								startContent={
 									<SeverityBadge
 										severity={incident.severity}
@@ -476,6 +483,10 @@ export default function IncidentConsole() {
 	const [statusFilter, setStatusFilter] = useState("all");
 	const [filters, setFilters] = useState<PowerSearchFilter[]>([]);
 	const [selectedId, setSelectedId] = useState<string | null>(INCIDENTS[0].id);
+	// Mobile inspector drawer. The inspector is a separate surface at <= 1024px
+	// (it is the `end` slot of the layout there), so it is a Drawer: a panel
+	// that slides in over the row list instead of a column that compresses it.
+	const [isInspectorOpen, setInspectorOpen] = useState(false);
 	const { config, applyFilters } = usePowerSearchConfig(fieldDefs, "Incidents");
 
 	// Responsive contract: the inspector is hidden at <= 1024px so the row
@@ -533,89 +544,120 @@ export default function IncidentConsole() {
 	);
 
 	return (
-		<Layout
-			height="fill"
-			header={
-				<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"
-							>
+		<>
+			<Layout
+				height="fill"
+				header={
+					<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>
+							</VStack>
+						) : (
+							<HStack gap={3} vAlign="center">
+								<StackItem size="fill">{titleGroup}</StackItem>
 								{statusFilterControl}
 								{declareButton}
 							</HStack>
-						</VStack>
-					) : (
-						<HStack gap={3} vAlign="center">
-							<StackItem size="fill">{titleGroup}</StackItem>
-							{statusFilterControl}
-							{declareButton}
-						</HStack>
-					)}
-				</LayoutHeader>
-			}
-			content={
-				<LayoutContent padding={0} isScrollable={false}>
-					<VStack gap={0} style={styles.contentFill}>
-						<HStack style={styles.searchRow}>
-							<StackItem size="fill">
-								<PowerSearch
-									config={config}
-									filters={filters}
-									onChange={(newFilters) => setFilters([...newFilters])}
-									placeholder="Search the night watch…"
-									resultCount={visible.length}
+						)}
+					</LayoutHeader>
+				}
+				content={
+					<LayoutContent padding={0} isScrollable={false}>
+						<VStack gap={0} style={styles.contentFill}>
+							<HStack style={styles.searchRow}>
+								<StackItem size="fill">
+									<PowerSearch
+										config={config}
+										filters={filters}
+										onChange={(newFilters) => setFilters([...newFilters])}
+										placeholder="Search the night watch…"
+										resultCount={visible.length}
+									/>
+								</StackItem>
+							</HStack>
+							<StackItem
+								size="fill"
+								style={styles.rows}
+								tabIndex={0}
+								role="region"
+								aria-label="Incident rows"
+							>
+								<IncidentRows
+									incidents={visible}
+									selectedId={selected?.id ?? null}
+									onSelect={(id) => {
+										setSelectedId(id);
+										// On a narrow viewport the inspector is the Drawer, so
+										// picking a row is what opens it.
+										if (isNarrow) setInspectorOpen(true);
+									}}
 								/>
 							</StackItem>
-						</HStack>
-						<StackItem
-							size="fill"
-							style={styles.rows}
-							tabIndex={0}
-							role="region"
-							aria-label="Incident rows"
-						>
-							<IncidentRows
-								incidents={visible}
-								selectedId={selected?.id ?? null}
-								onSelect={setSelectedId}
+						</VStack>
+					</LayoutContent>
+				}
+				end={
+					isNarrow ? undefined : (
+						<>
+							<ResizeHandle
+								direction="horizontal"
+								hasDivider
+								isAlwaysVisible={false}
+								resizable={inspectorPanel.props}
+								label="Resize inspector"
 							/>
-						</StackItem>
-					</VStack>
-				</LayoutContent>
-			}
-			end={
-				isNarrow ? undefined : (
-					<>
-						<ResizeHandle
-							direction="horizontal"
-							hasDivider
-							isAlwaysVisible={false}
-							resizable={inspectorPanel.props}
-							label="Resize inspector"
-						/>
-						<LayoutPanel width={inspectorPanel.size} padding={0} label="Incident details">
-							{selected ? (
-								<IncidentInspector incident={selected} />
-							) : (
-								<EmptyState
-									title="No incident under the lens"
-									description="Select an incident from the rows to inspect its timeline."
-									icon={<Icon icon={BellRing} size="lg" color="secondary" />}
-									isCompact
-								/>
-							)}
-						</LayoutPanel>
-					</>
-				)
-			}
-		/>
+							<LayoutPanel width={inspectorPanel.size} padding={0} label="Incident details">
+								{selected ? (
+									<IncidentInspector incident={selected} />
+								) : (
+									<EmptyState
+										title="No incident under the lens"
+										description="Select an incident from the rows to inspect its timeline."
+										icon={<Icon icon={BellRing} size="lg" color="secondary" />}
+										isCompact
+									/>
+								)}
+							</LayoutPanel>
+						</>
+					)
+				}
+			/>
+			{/* Narrow viewport: the inspector is a Drawer, not a column. It is
+        non-modal (hasScrim={false}) so the row list stays visible behind it —
+        the point of a peek-at-the-detail surface. The close button comes from
+        DrawerHeader, which only renders it when it is given onOpenChange. */}
+			<Drawer
+				side="end"
+				label="Incident details"
+				isOpen={isNarrow && isInspectorOpen}
+				onOpenChange={setInspectorOpen}
+				hasScrim={false}
+				width={inspectorPanel.size}
+			>
+				<DrawerHeader title="Incident details" onOpenChange={setInspectorOpen} />
+				{selected ? (
+					<IncidentInspector incident={selected} />
+				) : (
+					<EmptyState
+						title="No incident under the lens"
+						description="Select an incident from the rows to inspect its timeline."
+						icon={<Icon icon={BellRing} size="lg" color="secondary" />}
+						isCompact
+					/>
+				)}
+			</Drawer>
+		</>
 	);
 }

package/templates/kanban-board.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Kanban Board",
 	description: "Status columns with priority tags and metadata",
+	keywords: ["kanban", "board", "tasks", "workflow", "sprint", "columns"],
 	category: "tooling",
 };

package/templates/kanban-board.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   S > L > (LH[divider] > Tbar > (Hd"Sprint Board"[level=1] + Bd.neutral"8") + (H[g=2] > SE + D.strong + IB"Sort" + IB"Filter" + IB"Search" + B.primary"Add task")) + (LC[p=0] > G[c={min:280,max:4} g=4] > (C.muted[p=0] > L > (LH[divider] > H[j=between a=center] > (H[g=2 a=center] > SD + Hd"To-do"[level=2] + IB) + Tx) + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2))*4)
+// 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):
+//   S[h=100dvh] > (L[h=fill] > (LH[divider p=6] > Tbar[g=2] > (Hd"Sprint Board"[level=1 t=display-2] + Bd.neutral"8") + (H[g=2 wrap] > SE"Sprint" + D.strong + (H[g=1 a=center wrap] > IB"Sort" + IB"Filter" + IB"Search") + B.primary"Add task")) + (LC[p=0 !scroll] > G[c={min:280,max:4} g=4] > (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"To-do"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In progress"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In review"[level=2] + (Po > IB)) + Tx"1") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx))) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"Done"[level=2] + (Po > IB)) + Tx"3") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*3))) + (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)
 
 import { Badge } from "@astryxdesign/core/Badge";
 import { Button } from "@astryxdesign/core/Button";
@@ -595,7 +597,7 @@ export default function KanbanBoard() {
 	const renderColumnCards = (colId: ColumnId): ReactNode => {
 		const colItems = itemsByColumn[colId];
 		const visible = drag ? colItems.filter((it) => it.id !== drag.id) : colItems;
-		const ghostTarget = drag && drag.target && drag.target.column === colId ? drag : null;
+		const ghostTarget = drag?.target && drag.target.column === colId ? drag : null;
 
 		if (visible.length === 0 && !ghostTarget) {
 			return null;
@@ -611,7 +613,7 @@ export default function KanbanBoard() {
 			/>
 		));
 
-		if (ghostTarget && ghostTarget.target) {
+		if (ghostTarget?.target) {
 			const index = Math.min(ghostTarget.target.index, nodes.length);
 			nodes.splice(
 				index,

package/templates/library.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Library",
 	description: "Browsable grid with tabs and filters",
+	keywords: ["library", "catalog", "books", "content", "listing", "collection"],
 	category: "docs",
 };

package/templates/library.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > (V[g=1] > Hd"Library"[level=1] + Tx"30 components across 5 categories"[t=body])) + (LC[p=6] > V[g=8] > (V[g=4] > TI"Search the stacks…" + (H[a=center g=3] > (SI[fill] > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms" + Tg"Navigation" + Tg"Feedback" + Tg"Data") + DM"Sort")) + D + (V[g=8] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"6 items"[t=body]) + (G[c={min:280} g=4] > (C[p=0] > AR + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=supporting]))*4)))
+// 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] > (LH[divider p=6] > (V[g=1] > Hd"Library"[level=1] + Tx"30 components across 5 categories"[t=body])) + (LC[p=6] > V[g=8] > (V[g=4] > TI"Search" + (H[g=3 a=center] > (SI[fill] > V > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms" + Tg"Navigation" + Tg"Feedback" + Tg"Data") + DD"A-Z")) + (V[g=8] > (D + (V[g=8] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"6 items"[t=body]) + (G[c={min:280} g=4] > (C[p=0] > AR[ratio=16/9] > Scene{SceneTile}) + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=body]))*6))*5))
 
 /**
  * Library — a browsable grid of design-system entries grouped by category.  Frame: page header (title) | content column (search, filter row, s (Frame/responsive/container: see XLE header above.)

package/templates/login-card.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Login Card",
 	description: "Centered auth card with email and password",
+	keywords: ["login", "sign in", "auth", "card", "credentials", "account"],
 	category: "auth",
 };

package/templates/login-card.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (V[g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google") + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+// 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):
+//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Sign in" + D"Or continue with" + (V[g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google") + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
 import { Button } from "@astryxdesign/core/Button";
 import { Center } from "@astryxdesign/core/Center";

package/templates/login-split.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Login Split",
 	description: "Two-column auth with cover art panel",
+	keywords: ["login", "sign in", "auth", "split", "credentials", "account"],
 	category: "auth",
 };

package/templates/login-split.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (C[p=0] > AR)) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+// 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):
+//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S.transparent[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Sign in" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (C.transparent[p=0] > Scene{SceneCastle})) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
 import { Button } from "@astryxdesign/core/Button";
 import { Card } from "@astryxdesign/core/Card";
@@ -30,6 +32,7 @@ import {
 	AUTH_TERMS_PRIVACY,
 	AUTH_TERMS_SERVICE,
 } from "astryx-dracula/shared/auth-copy";
+
 import { demoLogin } from "astryx-dracula/shared/login-demo";
 import { SceneCastle } from "astryx-dracula/shared/scene-castle";
 import { AppleIcon, GoogleIcon } from "astryx-dracula/shared/sso-icons";

package/templates/login-sso.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Login SSO",
 	description: "Email-first SSO with password fallback",
+	keywords: ["login", "sso", "saml", "oauth", "auth", "providers", "account"],
 	category: "auth",
 };

package/templates/login-sso.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > C[p=4 mw=400] > V[g=4] > ((V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Whisper your details to enter the night"[t=body]) + (V[g=1] > TI"Work email"[t=email] + Lk"Having trouble signing in?") + B.primary"Continue" + D"Or continue with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Request access") + (V[g=2 a=center] > Av + Hd"Sign in with Google Workspace"[level=1] + Tx"You will be redirected back after signing in."[t=body]) + (C[p=0] > S[p=4 muted] > (H[g=2 a=center] > Ic + (V[g=0] > Tx"Google Workspace"[t=label] + Tx"vlad@castle.ro"[t=supporting]))) + (V[g=3] > B.primary"Continue with Google Workspace" + B.ghost"Use a different email") + (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"vlad@castle.ro"[t=body]) + (V[g=4] > (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + (V[g=3] > B.primary"Enter the night" + B.ghost"Use a different email")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting]))
+// 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):
+//   Ctr > C[p=4 mw=400] > V[g=4] > ((V[g=1 a=center] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Whisper your details to enter the night"[t=body]) + (V[g=1] > TI"Work email"[t=email] + Lk"Having trouble signing in?") + B.primary"Continue" + D"Or continue with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Request access") + (V[g=2 a=center] > Av + Hd"Sign in with Google Workspace"[level=1 t=display-2] + Tx"You will be redirected back after signing in."[t=body]) + (C.muted[p=4] > (H[g=2 a=center] > Ic + (V[g=0] > Tx"Google Workspace"[t=label] + Tx"vlad@castle.ro"[t=supporting]))) + (V[g=3] > B.primary"Continue with Google Workspace" + B.ghost"Use a different email") + (V[g=1 a=center] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"vlad@castle.ro"[t=body]) + (V[g=4] > (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + (V[g=3] > B.primary"Sign in" + B.ghost"Use a different email")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting]))
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { Button } from "@astryxdesign/core/Button";

package/templates/login.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Basic Login",
 	description: "Auth form with email and password inputs",
+	keywords: ["login", "sign in", "auth", "credentials", "account", "form"],
 	category: "auth",
 };

package/templates/login.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + B.primary"Enter the night" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+// 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):
+//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Sign in" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
 import { Center } from "@astryxdesign/core/Center";
 import { VStack } from "@astryxdesign/core/Layout";

package/templates/messaging-shell.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Messaging Shell",
 	description: "Team messaging shell with channels and thread panel",
+	keywords: ["messaging", "chat", "inbox", "conversation", "threads", "shell"],
 	category: "tooling",
 };

package/templates/messaging-shell.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LP[w=68] > V > Av + (V > IB*4) + IB) + (LP[w=260] > V > (H > Hd"Messages"[level=1] + IB) + TI"Jump to…" + (V > Tx"Channels"[t=label] + (List > (ListItem)*4)) + (V > Tx"Direct messages"[t=label] + (List > (ListItem)*3))) + (LC[p=0] > V > (H > Hd"design-systems"[level=2] + SD + IB) + (ChL > ChML > (ChM > ChB)*6 + ChC)) + (LP[w=340] > V > (H > Tx"Thread"[weight=semibold] + IB) + (ChL > ChML > (ChM > ChB)*3 + ChC))
+// 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…")))
 
 /**
  * Messaging Shell — Slack-style column frame for team messaging tools.  Frame (desktop, left to right): (Frame/responsive/container: see XLE header above.)
@@ -497,6 +499,7 @@ export default function MessagingShell() {
 			>
 				<List
 					density="compact"
+					edge="flush"
 					hasDividers={false}
 					header={
 						<Text type="label" size="sm" color="secondary">
@@ -522,6 +525,7 @@ export default function MessagingShell() {
             container, so no wrapper element is needed. */}
 				<List
 					density="compact"
+					edge="flush"
 					hasDividers={false}
 					style={sectionGapStyle}
 					header={

package/templates/mixed-gallery.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Mixed Gallery",
 	description: "Masonry image gallery with varying tile sizes",
+	keywords: ["gallery", "mixed", "grid", "collection", "showcase", "images"],
 	category: "marketing",
 };

package/templates/mixed-gallery.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=8] > ((V[g=2 a=center] > Hd"Every corner of the castle, caught after dark."[level=1] + Tx"Relics, sketches, and moonlit views from the coven archives, collected over one long Transylvanian night."[t=body]) + (V[g=3] > (V[g=2] > AR[ratio=3/1] + Tx"The castle at moonrise"[t=body]) + (G[c={min:280} g=4] > (V[g=2] > AR[ratio=3/2] + Tx"Coven gathering"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Belfry view"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Crypt archives"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Midnight garden"[t=body]))))
+// 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] > LC[p=6] > V[g=8] > ((V[g=2 a=center] > Hd"Every corner of the castle, caught after dark."[level=1] + Tx"Relics, sketches, and moonlit views from the coven archives, collected over one long Transylvanian night."[t=body]) + (V[g=3] > (V[g=2] > (AR[ratio=3/1] > Scene{SceneTile}) + Tx"The castle at moonrise"[t=body]) + (G[c={min:280} g=4] > (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Coven gathering"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Belfry view"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Crypt archives"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Midnight garden"[t=body]))))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Grid } from "@astryxdesign/core/Grid";

package/templates/payment-form.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Checkout Form",
 	description: "Billing info, card details, and order summary",
+	keywords: ["checkout", "payment", "billing", "cart", "buyer", "purchase", "order"],
 	category: "commerce",
 };

package/templates/payment-form.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=0] > Ctr > S.transparent[p=6 mw=1100] > V[g=5] > (V[g=6] > (V[g=2] > (Hd"Payment Request"[level=1 t=display-2] + Tx"Review your order"[t=body]) + D) + H[g=8] > (SI > V[g=8] > (V[g=1] > (H[j=between] > (Hd"Sign in to check out"[level=2] + B"Sign in") + Tx"Sign in to track your order"[t=body]) + V[g=3] > (Hd"Contact information"[level=2] + TI"Email" + CB"Email offers") + V[g=3] > (Hd"Shipping information"[level=2] + G[c=2 g=3] > (TI"First Name" + TI"Last Name") + TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State" + TI"Phone Number" + CB"Save information") + V[g=3] > (V[g=1] > (Hd"Delivery"[level=2] + Tx"Processing time"[t=body]) + RL"Delivery method" > RLI*2) + V[g=3] > (V[g=1] > (Hd"Payment method"[level=2] + Tx"Encrypted"[t=body]) + G[c=2 g=3] > (B"PayPal" + B"Google Pay") + D"Or pay with card" + TI"Card Number" + G[c=3 g=3] > (SE"Expiry Month" + SE"Expiry Year" + TI"CVC") + TI"Name on Card" + CB"Billing address") + V[g=3] > (Hd"Promo code"[level=2] + H[g=2] > (TI"Promo code" + B"Apply")) + V[g=3] > (Hd"Gift options"[level=2] + CB"Gift message" + TA"Gift message") + V[g=4] > (H[g=5] > (H[g=1] > (Ic + Tx))*3 + V[g=2] > (B"Place order"[primary] + B"Continue shopping") + D + H[g=4] > (Lk"Refund policy" + Lk"Privacy policy" + Lk"Terms" + Lk"Cancellations"))) + SI > C[p=4] > Col"Order Summary" > V[g=4] > (V[g=3] > H[g=3] > (Tmb + V[g=1] > (Tx"Obsidian Ritual Chalice" + Tx"Hand-carved"[t=supporting])))*3 + V[g=3] > (Hd"Order Total"[level=3] + H[j=between] > (Tx"Subtotal" + Tx"$91.20") + D + H[j=between] > (Tx"Total"[t=large] + Tx"$91.20"[t=large]) + Bn"Free shipping over $300"))))
+// 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] > LC[p=0] > Ctr > S.transparent[p=6 mw=1100] > V[g=5] > (V[g=6] > (V[g=2] > (Hd"Payment Request"[level=1 t=display-2] + Tx"Review your order"[t=body]) + D) + H[g=8] > (SI > V[g=8] > (V[g=1] > (H[j=between] > (Hd"Sign in to check out"[level=2] + B.secondary"Sign in") + Tx"Sign in to track your order"[t=body]) + V[g=3] > (Hd"Contact information"[level=2] + TI"Email" + CB"Email me with news and offers") + V[g=3] > (Hd"Shipping information"[level=2] + G[c=2 g=3] > (TI"First Name" + TI"Last Name") + TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State" + TI"Phone Number" + CB"Save my information for a faster checkout") + V[g=3] > (V[g=1] > (Hd"Delivery"[level=2] + Tx"Processing time"[t=body])) + (RL"Delivery method" > RLI*2) + V[g=3] > (V[g=1] > (Hd"Payment method"[level=2] + Tx"Encrypted"[t=body])) + (V[g=3] > G[c=2 g=3] > (B.secondary"PayPal" + B.secondary"Google Pay")) + D"Or pay with card" + (V[g=3] > TI"Card Number" + G[c=3 g=3] > (SE"Expiry Month" + SE"Expiry Year" + TI"CVC") + TI"Name on Card" + CB"Use shipping address as billing address" + (V[g=3] > TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State")) + V[g=3] > (Hd"Promo code"[level=2] + H[g=2] > (TI"Promo code" + B.secondary"Apply")) + V[g=3] > (Hd"Gift options"[level=2] + CB"Add a gift message" + (V[g=3] > (G[c=2 g=3] > (TI"To" + TI"From")) + TA"Gift message")) + V[g=4] > (H[g=5] > (H[g=1] > (Ic + Tx))*3 + V[g=2] > (B.primary"Place order" + B.secondary"Continue shopping") + D + H[g=4] > (Lk"Refund policy" + Lk"Privacy policy" + Lk"Terms of service" + Lk"Cancellations"))) + SI > C[p=4] > Col"Order Summary" > V[g=4] > (H[g=3] > (C[p=0] > Scene{SceneTile}) + (SI > V[g=1] > (Tx"Obsidian Ritual Chalice" + Tx"Hand-carved · 12 oz"[t=supporting] + (H[g=2] > NI"Qty" + B.ghost"Remove" + B.ghost"Save"))))*3 + V[g=3] > (Hd"Order Total"[level=3] + V[g=2] > (H[j=between] > (Tx"Subtotal" + Tx"$230.00")) + (H[j=between] > (Tx"Shipping" + Tx"$4.95")) + (H[j=between] > (Tx"Tax" + Tx"$18.40")) + D + (H[j=between] > (Tx"Total"[t=large] + Tx"$253.35"[t=large])) + Bn"Free shipping on orders over $300")))
 
 import { Banner } from "@astryxdesign/core/Banner";
 import { Button } from "@astryxdesign/core/Button";
@@ -862,7 +864,7 @@ export default function PaymentForm() {
 															placeholder="Enter promo code"
 															value={promo}
 															onChange={setPromo}
-															style={fullWidth}
+															controlStyle={fullWidth}
 														/>
 													</StackItem>
 													<Button label="Apply" variant="secondary" size="lg" onClick={() => {}} />

package/templates/product-detail.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Product Detail",
 	description: "Product page with gallery and collapsible sections",
+	keywords: ["product", "detail", "buy", "pdp", "shop", "specifications"],
 	category: "commerce",
 };

package/templates/product-detail.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > G[c={min:280} g=8] > (V[g=3] > AR[ratio=4/5] + (G[c=3 g=2] > (AR[ratio=1] > SelectableCard)*6)) + (V[g=8] > (V[g=3] > Hd"Midnight Ceremony Mug & Plate Set"[level=1 t=display-2] + (H[g=1] > Ic*5 + Tx"4.3 (128)") + (H[g=2] > Tx"$89.00"[t=large] + Tx"$119.00"[t=body] + Tk"Sale")) + Tx"A hand-thrown mug and plate set"[t=large] + (V[g=3] > Tx"Glaze"[t=label] + SG) + (V[g=3] > Tx"Finish"[t=label] + SG) + (V[g=3] > Tx"Quantity"[t=label] + (H[g=1] > B.ghost"-" + TI"1" + B.ghost"+")) + (V[g=3] > B.primary"Add to cart" + B.secondary"Buy it now") + (ColG > Col"Composition" + Col"Delivery & Returns" + Col"Dimensions"))
+// 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] > LC[p=6] > G[c={min:280} g=8] > (V[g=3] > (AR[ratio=4/5] > Scene{SceneTile}) + (G[c=3 g=2] > (AR[ratio=1] > SC > Scene{SceneTile})*6)) + (V[g=0] > V[g=8] > (V[g=3] > Hd"Midnight Ceremony Mug & Plate Set"[level=1 t=display-2] + (H[g=1] > Ic*5 + Tx"4.3 (128)") + (H[g=2] > Tx"$89.00"[t=large] + Tx"$119.00"[t=body] + Tk"Sale")) + Tx"A hand-thrown mug and plate set"[t=large] + (V[g=3] > Tx"Glaze"[t=label] + SG"Glaze" > SGI*3) + (V[g=3] > Tx"Finish"[t=label] + SG"Finish" > SGI*3) + (V[g=3] > Tx"Quantity"[t=label] + (H[g=1] > B.ghost"-" + (Ctr[w=100] > NI"1") + B.ghost"+")) + (V[g=3] > Bn + B.primary"Add to cart" + B.secondary"Buy it now") + (ColG > (Col > (Hd"Composition"[level=3] + Tx"High-fire stoneware clay…"[t=body])) + (Col > (Hd"Delivery & Returns"[level=3] + Tx"Free shipping on all ceramics orders over $75…"[t=body])) + (Col > (Hd"Dimensions"[level=3] + Tx"Mug height: 9.5 cm / 3.75 in…"[t=body]))))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Banner } from "@astryxdesign/core/Banner";
@@ -204,6 +206,11 @@ function ProductInfo() {
 				{notice && (
 					<Banner
 						status={notice.status}
+						// Core 0.7.0 stopped deriving the live-region role from
+						// `status`, so this banner states its own. It mirrors the
+						// result of Add to cart / Buy it now, and a screen reader
+						// must hear it.
+						role="status"
 						title={notice.title}
 						container="card"
 						isDismissable

package/templates/product-gallery.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Product Gallery",
 	description: "Card grid with images, prices, and descriptions",
+	keywords: ["product", "gallery", "images", "shop", "store", "pdp"],
 	category: "commerce",
 };

package/templates/product-gallery.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=8] > (G[c={min:280} g=4 a=start] > Hd"Small comforts for the midnight hours."[level=1 t=display-2] + (V[g=3 a=start] > Tx"Provisions from the castle workshops"[t=body] + B.primary"Browse the collection")) + (V[g=8] > (V[g=2] > Hd"The collection"[level=2] + Tx"Each piece is made in small batches"[t=body]) + (G[c={min:280} g=8] > (V[g=3] > (C[p=0] > AR[ratio=1]) + (V[g=1] > Hd"Nightfall Stoneware Mug"[level=3] + Tx"A hand-thrown mug that sits easy"[t=body color=secondary] + Tx.lg"$75.00"))*6))
+// 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] > LC[p=6] > V[g=8] > (G[c={min:280} g=4 a=start] > Hd"Small comforts for the midnight hours."[level=1 t=display-2] + (V[g=3 a=start] > Tx"Provisions from the castle workshops"[t=body] + B.primary"Browse the collection")) + (V[g=8] > (V[g=2] > Hd"The collection"[level=2] + Tx"Each piece is made in small batches"[t=body]) + (G[c={min:280} g=4] > (V[g=3] > (C[p=0] > AR[ratio=1] > Scene{SceneTile}) + (V[g=1] > Hd"Nightfall Stoneware Mug"[level=3] + Tx"A hand-thrown mug that sits easy"[t=body color=secondary] + Tx.lg"$75.00"))*6))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Button } from "@astryxdesign/core/Button";

package/templates/product-tour.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Product Tour",
 	description: "Chapter rail, walkthrough content, and outline",
+	keywords: ["tour", "walkthrough", "onboarding", "product", "guide", "tour steps"],
 	category: "marketing",
 };