astryx-dracula 0.5.1 → 0.7.0

package/shared/auth-chrome.tsx

@@ -8,7 +8,6 @@ import { 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 } from "astryx-dracula/shared/auth-chrome-config";
 import {
 	AUTH_BRAND_NAME,
 	AUTH_EMAIL_PLACEHOLDER,
@@ -116,7 +115,7 @@ export function AuthLoginFields({
 					onChange={onEmailChange}
 					placeholder={AUTH_EMAIL_PLACEHOLDER}
 					type="email"
-					{...inputAutoComplete("email")}
+					autoComplete="email"
 					size="lg"
 					onEnter={onSubmit}
 					status={error ? { type: "error", message: error } : undefined}
@@ -129,7 +128,7 @@ export function AuthLoginFields({
 						onChange={onPasswordChange}
 						placeholder={AUTH_PASSWORD_PLACEHOLDER}
 						type="password"
-						{...inputAutoComplete("current-password")}
+						autoComplete="current-password"
 						size="lg"
 						onEnter={onSubmit}
 						status={error ? { type: "error", message: error } : undefined}

package/shared/chaptered-doc-config.ts

@@ -57,11 +57,12 @@ export const outlinePanel: CSSProperties = {
 	top: "var(--spacing-6)",
 	alignSelf: "start",
 	// No paddingBlockStart. This object is applied via `style=` to the outline
-	// LayoutPanels (chaptered-doc.tsx:316, documentation-design.tsx:592,
-	// documentation-technical.tsx:82), and an inline style prop BEATS the stylex
+	// LayoutPanels, and an inline style prop BEATS the stylex
 	// class -- so this 8px silently overrode the panel's own 16px block padding
 	// at the top edge only, leaving every "On this page" rail in the kit
 	// asymmetric by 8px. The panel already owns its block padding.
+	// Call sites are named by file, not by line: line numbers in a comment go
+	// stale the first time anyone edits above them, and these three did.
 };
 
 // Derived once per page so the Outline receives a stable array identity

package/shared/chaptered-doc.tsx

@@ -11,7 +11,6 @@ import { Button } from "@astryxdesign/core/Button";
 import { CodeBlock } from "@astryxdesign/core/CodeBlock";
 import { Divider } from "@astryxdesign/core/Divider";
 import { useMediaQuery } from "@astryxdesign/core/hooks";
-import type { IconType } from "@astryxdesign/core/Icon";
 import { Icon } from "@astryxdesign/core/Icon";
 import {
 	HStack,
@@ -39,7 +38,7 @@ import {
 	sectionId,
 } from "astryx-dracula/shared/chaptered-doc-config";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { type CSSProperties, type ReactNode, useState } from "react";
+import { type ReactNode, useState } from "react";
 
 function ChapterRail({
 	groups,

package/shared/chart-hues.ts

@@ -5,18 +5,33 @@
 // Purple is deliberately absent: purple means tappable, so it must never encode
 // data. `muted` is a COMMENT-blue grey because it backs the `{label: 'Other'}`
 // legend row (dashboard.tsx:229, :253) -- a labelled data category, not chrome.
+//
+// Every var() carries an explicit fallback equal to the theme's own pin for
+// that token. Core moved the canonical `--color-data-*` defaults out of the
+// generated theme CSS and into its own dataVars group, so a bare
+// `var(--color-data-*)` is no longer guaranteed to resolve: the theme's pin is
+// the only thing painting it. The fallback is the same value, so a theme that
+// drops the token still paints the right colour instead of nothing. The
+// fallback-vs-pin sync is enforced by scripts/check.ts, so the two cannot drift.
 
 export const CHART_HUES = {
-	cyan: "var(--color-data-categorical-cyan)",
-	orange: "var(--color-data-categorical-orange)",
-	green: "var(--color-data-categorical-green)",
-	pink: "var(--color-data-categorical-pink)",
-	muted: "var(--color-data-categorical-blue)",
+	cyan: "var(--color-data-categorical-cyan, #8BE9FD)",
+	orange: "var(--color-data-categorical-orange, #FFB86C)",
+	green: "var(--color-data-categorical-green, #50FA7B)",
+	pink: "var(--color-data-categorical-pink, #FF79C6)",
+	muted: "var(--color-data-categorical-blue, #6272A4)",
 	// Added because --color-data-categorical-red exists in the palette
 	// (tokens.css:276) and heat maps need a severity colour, but no module
 	// exposed it. Without this, a chart could not reach red through the
 	// sanctioned source at all.
-	red: "var(--color-data-categorical-red)",
+	red: "var(--color-data-categorical-red, #FF5555)",
 } as const;
 
 export type ChartHue = (typeof CHART_HUES)[keyof typeof CHART_HUES];
+
+/**
+ * Any `--color-data-*` colour: a categorical hue, or a step of a sequential
+ * ramp. The fallback inside the var() is part of the string, which is why the
+ * template-literal type below still admits it.
+ */
+export type DataColor = `var(--color-data-${string})`;

package/shared/chart-legend.tsx

@@ -23,7 +23,7 @@
 
 import { HStack, StackItem, VStack } from "@astryxdesign/core/Stack";
 import { Text } from "@astryxdesign/core/Text";
-import type { ChartHue } from "astryx-dracula/shared/chart-hues";
+import type { ChartHue, DataColor } from "astryx-dracula/shared/chart-hues";
 import type { ReactNode } from "react";
 
 export interface ChartLegendEntry {
@@ -35,7 +35,7 @@ export interface ChartLegendEntry {
 	 *  The surface arm is not optional: a legend whose first row is a recessive
 	 *  surface is normal (the heatmap's zero cell), so a data-only type would
 	 *  reject the value the heatmap is supposed to paint. */
-	color: ChartHue | `var(--color-data-${string})` | `var(--color-background-${string})`;
+	color: ChartHue | DataColor | `var(--color-background-${string})`;
 }
 
 // Kept as a string-keyed fall-through on purpose, and DO NOT narrow it: call

package/shared/data-bar.tsx

@@ -39,7 +39,7 @@
 import { HStack, StackItem, VStack } from "@astryxdesign/core/Stack";
 import { Text } from "@astryxdesign/core/Text";
 import type { CSSProperties } from "react";
-import type { ChartHue } from "./chart-hues";
+import type { ChartHue, DataColor } from "./chart-hues";
 
 export interface DataBarSegment {
 	/** Stable key for the segment. */
@@ -48,7 +48,7 @@ export interface DataBarSegment {
 	/** MUST be a --color-data-categorical-* or --color-data-<family>-N var.
 	 *  Never a raw hex, never a --dracula-* primitive. Typed rather than
 	 *  documented: `string` made the rule a comment nobody could break. */
-	color: ChartHue | `var(--color-data-${string})`;
+	color: ChartHue | DataColor;
 }
 
 /** Minimum segment share, so a tiny non-zero value stays visible. */

package/shared/order-desk.tsx

@@ -1,5 +1,5 @@
 // Parametric order desk shared by the table-page-chart (Matcha Bar) and
-// table-page-shoe-store-heatmap (Midnight Kicks) templates. The two pages are
+// table-page-shoe-store (Midnight Kicks) templates. The two pages are
 // one archetype — revenue line over the order log — differing only in catalogue,
 // rows, and chart scale, so the frame/columns live here once.
 
@@ -37,7 +37,7 @@ import type { CSSProperties } from "react";
 // minHeight appears in none of them.
 //
 // The wrapper is shared by all three callers (table-page-chart.tsx:410,
-// table-page-shoe-store-heatmap.tsx:759, and this module's own default), so
+// table-page-shoe-store.tsx:759, and this module's own default), so
 // anchoring it here covers them together. Anchoring inside each caller instead
 // would put a 100dvh box inside this one and overflow by the header height.
 //
@@ -200,63 +200,61 @@ export function OrderDesk({
 	gridTicks: number[];
 }) {
 	return (
-		// The anchor lives on a page-owned wrapper, never on the Layout. A bare
-		// `height="fill"` resolves against `min-height: 100%`, which collapses when
-		// the host is content-sized — and templates ship standalone, so that is the
-		// common case. Putting the height on the Layout instead would trade
-		// a soft failure (the document scrolls) for a hard one (content clipped,
-		// because `LayoutContent` is `overflow: auto` with a definite height).
-		<div style={pageStyle}>
-			<Layout
-				height="fill"
-				header={
-					<LayoutHeader hasDivider padding={6}>
-						<HStack gap={2} vAlign="center">
-							<StackItem size="fill">
-								{/* maxLines={1}, not wrap="wrap": at 390 the 35px display-2 title
+		// Templates ship standalone, so the page owns the definite ancestor for
+		// `height="fill"` — 100dvh on the Layout itself, the same anchor every
+		// other page uses. It used to sit on a wrapper <div>, which contradicted
+		// the no-raw-div rule for a reason that does not hold: the height lands on
+		// the same box either way.
+		<Layout
+			style={pageStyle}
+			height="fill"
+			header={
+				<LayoutHeader hasDivider padding={6}>
+					<HStack gap={2} vAlign="center">
+						<StackItem size="fill">
+							{/* maxLines={1}, not wrap="wrap": at 390 the 35px display-2 title
                   wraps 2-3 lines in a 342px header (measured: 136px tall for
                   "Midnight Kicks", 180px for an 18-char title). Wrapping the
                   row measured IDENTICAL header heights in both configurations
                   — the controls already fit, the title is what is tall. And
                   maxLines wires core's useTruncation, so the full value stays
                   reachable in a Tooltip (SC 1.4.10, "truncation must reveal"). */}
-								<Heading level={1} type="display-2" maxLines={1}>
-									{title}
-								</Heading>
-							</StackItem>
-							<IconButton
-								label="Filter"
-								icon={<Icon icon={Filter} size="sm" />}
-								variant="ghost"
-								tooltip="Filter"
-							/>
-							<IconButton
-								label="Export"
-								icon={<Icon icon={Download} size="sm" />}
-								variant="ghost"
-								tooltip="Export"
-							/>
-							<Button label="New order" variant="primary" icon={<Icon icon={Plus} size="sm" />} />
-						</HStack>
-					</LayoutHeader>
-				}
-				content={
-					<LayoutContent padding={3}>
-						<VStack gap={4}>
-							<RevenueChart data={revenueData} chartMax={chartMax} gridTicks={gridTicks} />
-							<Table<OrderDeskRow>
-								data={orders}
-								columns={columnsFor(selfHash, products)}
-								idKey="id"
-								density="balanced"
-								dividers="rows"
-								textOverflow="truncate"
-								hasHover
-							/>
-						</VStack>
-					</LayoutContent>
-				}
-			/>
-		</div>
+							<Heading level={1} type="display-2" maxLines={1}>
+								{title}
+							</Heading>
+						</StackItem>
+						<IconButton
+							label="Filter"
+							icon={<Icon icon={Filter} size="sm" />}
+							variant="ghost"
+							tooltip="Filter"
+						/>
+						<IconButton
+							label="Export"
+							icon={<Icon icon={Download} size="sm" />}
+							variant="ghost"
+							tooltip="Export"
+						/>
+						<Button label="New order" variant="primary" icon={<Icon icon={Plus} size="sm" />} />
+					</HStack>
+				</LayoutHeader>
+			}
+			content={
+				<LayoutContent padding={3}>
+					<VStack gap={4}>
+						<RevenueChart data={revenueData} chartMax={chartMax} gridTicks={gridTicks} />
+						<Table<OrderDeskRow>
+							data={orders}
+							columns={columnsFor(selfHash, products)}
+							idKey="id"
+							density="balanced"
+							dividers="rows"
+							textOverflow="truncate"
+							hasHover
+						/>
+					</VStack>
+				</LayoutContent>
+			}
+		/>
 	);
 }

package/shared/revenue-chart.tsx

@@ -169,7 +169,7 @@ export function RevenueChart({
 									y1={y}
 									x2={CHART_W - CHART_PAD_RIGHT}
 									y2={y}
-									stroke="var(--color-separator)"
+									stroke="var(--color-graph-gridlines)"
 									strokeDasharray={tick === 0 ? undefined : "3 3"}
 									opacity={tick === 0 ? 1 : 0.5}
 								/>

package/shared/scene-castle.tsx

@@ -23,13 +23,13 @@ const CARD_HILLS = {
 
 const TALL_HILL = "M0 380 Q200 320 400 370 V500 H0 Z" as const;
 
-function WideCastle() {
+function WideCastle({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 800 450"
 			role="img"
-			aria-label="Moonlit castle on a hill in Dracula theme colors"
+			aria-label={label ?? "Moonlit castle on a hill in Dracula theme colors"}
 		>
 			<rect width="800" height="450" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -95,13 +95,13 @@ function WideCastle() {
 	);
 }
 
-function CardCastle() {
+function CardCastle({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 500"
 			role="img"
-			aria-label="Moonlit castle on midnight hills"
+			aria-label={label ?? "Moonlit castle on midnight hills"}
 		>
 			<rect width="400" height="500" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -142,13 +142,13 @@ function CardCastle() {
 	);
 }
 
-function TallPines() {
+function TallPines({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 500"
 			role="img"
-			aria-label="Harvest moon over midnight pines"
+			aria-label={label ?? "Harvest moon over midnight pines"}
 		>
 			<rect width="400" height="500" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -186,14 +186,14 @@ function TallPines() {
 	);
 }
 
-function Rooftops() {
+function Rooftops({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 300"
 			preserveAspectRatio="xMidYMid slice"
 			role="img"
-			aria-label="Harvest moon over the castle rooftops"
+			aria-label={label ?? "Harvest moon over the castle rooftops"}
 		>
 			<rect width="400" height="300" fill="var(--dracula-bg)" />
 			<g fill="var(--dracula-fg)">
@@ -229,9 +229,17 @@ function Rooftops() {
 	);
 }
 
-export function SceneCastle({ variant }: { variant: SceneCastleVariant }) {
-	if (variant === "wide") return <WideCastle />;
-	if (variant === "card") return <CardCastle />;
-	if (variant === "rooftops") return <Rooftops />;
-	return <TallPines />;
+export function SceneCastle({
+	variant,
+	label,
+}: {
+	variant: SceneCastleVariant;
+	// Callers that keep their own alt text pass it here, so the accessible name
+	// cannot drift from the data the way a hardcoded label lets it.
+	label?: string;
+}) {
+	if (variant === "wide") return <WideCastle label={label} />;
+	if (variant === "card") return <CardCastle label={label} />;
+	if (variant === "rooftops") return <Rooftops label={label} />;
+	return <TallPines label={label} />;
 }

package/shared/settings-data.ts

@@ -12,18 +12,12 @@ import {
 	Briefcase,
 	CreditCard,
 	FileText,
-	Fingerprint,
 	Globe,
-	KeyRound,
-	Laptop,
 	Lock,
 	Share2,
 	ShieldCheck,
-	Smartphone,
 	SquarePen,
-	Tablet,
 	User,
-	UserCog,
 } from "lucide-react";
 import type { CSSProperties } from "react";
 

package/shared/settings-rows.tsx

@@ -8,29 +8,7 @@ import { Divider } from "@astryxdesign/core/Divider";
 import { HStack, VStack } from "@astryxdesign/core/Layout";
 import { Link } from "@astryxdesign/core/Link";
 import { Text } from "@astryxdesign/core/Text";
-import {
-	actionNoWrap,
-	DEVICE_ROWS,
-	type DeviceRow,
-	INFO_TILES,
-	type InfoRow,
-	type InfoTileData,
-	iconBox,
-	LOGIN_ROWS,
-	type SettingsNavItem,
-	SOCIAL_ROWS,
-} from "astryx-dracula/shared/settings-data";
-import {
-	Bell,
-	Briefcase,
-	CreditCard,
-	FileText,
-	Globe,
-	Lock,
-	Share2,
-	ShieldCheck,
-	SquarePen,
-} from "lucide-react";
+import { actionNoWrap, type InfoRow } from "astryx-dracula/shared/settings-data";
 import type { CSSProperties, ReactNode } from "react";
 
 // ─── Row components ──────────────────────────────────────────────────────────

package/templates/ai-chat-landing.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "AI Chat Landing",
 	description: "Composer, greeting, and category toggles",
+	keywords: ["ai chat", "assistant", "composer", "landing", "chat", "empty state"],
 	category: "marketing",
 };

package/templates/ai-chat-landing.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC > V[g=8 a=center] > (V[g=1] > (H[g=2 a=center] > Ic + Tx"Hi, Vlad"[t=body]) + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > H[g=1 wrap] > Tg"Writing"*4) + Hd"Suggested prompts"[level=2] + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=3] + Tx"Compose"[t=body])*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 mw=720] > LC > V[g=8 a=center] > (V[g=1] > (H[g=2 a=center] > Ic + Tx"Hi, Vlad"[t=body]) + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > H[g=1 wrap] > Tg"Writing"*4) + VH"Suggested prompts"[as=h2] + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=3] + Tx"Compose"[t=body])*4))
 
 import {
 	ChatComposer,
@@ -215,15 +217,23 @@ function makeTrigger<TAux>({
 	items,
 	getDescription,
 	toToken,
+	hasMultiWordQuery,
+	emptySearchText,
 }: {
 	character: string;
 	items: SearchableItem<TAux>[];
 	getDescription: (aux: TAux | undefined) => string | undefined;
 	toToken: (item: SearchableItem<TAux>) => string | ChatComposerToken;
+	/** Continue the query past spaces, for names that contain them. */
+	hasMultiWordQuery?: boolean;
+	/** Shown when the query matched nothing. */
+	emptySearchText?: string;
 }): ChatComposerTrigger {
 	return {
 		character,
 		searchSource: createStaticSource(items),
+		...(hasMultiWordQuery ? { hasMultiWordQuery } : {}),
+		...(emptySearchText ? { emptySearchText } : {}),
 		renderItem: (item) => (
 			<TypeaheadItem
 				item={item}
@@ -238,6 +248,13 @@ const mentionTrigger = makeTrigger({
 	character: "@",
 	items: MENTION_ITEMS,
 	getDescription: (aux) => aux?.role,
+	// The mention labels are full names ("Vesper Lin", "Alex Nocturne"), so
+	// the query has to survive the space: without this the menu closes at the
+	// first space and "@Vesper L" narrows to "Vesper" and then matches
+	// nothing. Core hides the menu on an unmatched multi-word query unless
+	// the trigger sets emptySearchText, so both go together.
+	hasMultiWordQuery: true,
+	emptySearchText: "No one by that name tonight.",
 	toToken: (item) => ({
 		value: `@${item.id}`,
 		label: item.label,
@@ -257,6 +274,11 @@ const commandTrigger = makeTrigger({
 });
 
 const composerTriggers = [mentionTrigger, commandTrigger];
+// The upstream `rename emptySearchResultsText to emptySearchText` codemod
+// leaves a TODO on any ChatComposerInput whose `triggers` value it cannot
+// attribute to a literal object — these are built by `makeTrigger`, so it
+// cannot see inside them. The old key appears nowhere in this file, so that
+// TODO would name a rename this template does not need.
 
 /** Composer attachment. The name is user-facing; the id is the React key, since
  * two dropped files can share a name. */
@@ -273,15 +295,10 @@ const INITIAL_ATTACHMENTS: Attachment[] = [
 	"dracula_spec.pdf",
 ].map((name) => ({ id: crypto.randomUUID(), name }));
 
-// The composer's imperative insert methods mutate the DOM without emitting a
-// change, so dispatch an input event to sync its value and clear the placeholder.
-const syncComposerValue = () => {
-	document.activeElement?.dispatchEvent(new Event("input", { bubbles: true }));
-};
-
 // One inserter for every composer write. `insertText` replaces the selection
 // (suggestion prompts); `insertToken` inserts a chip at the cursor without
-// touching the selection (mentions, mode tokens).
+// touching the selection (mentions, mode tokens). Both emit a change in 0.7.10,
+// so no input-event sync is needed after either call.
 function insertIntoComposer(
 	input: ChatComposerInputHandle | null,
 	write: { text: string } | { token: ChatComposerToken },
@@ -305,7 +322,6 @@ function insertIntoComposer(
 	} else {
 		input.insertToken(write.token);
 	}
-	syncComposerValue();
 }
 
 // Main component
@@ -513,7 +529,10 @@ export default function AiChatLanding() {
 											<ClickableCard
 												key={suggestion.heading}
 												label={suggestion.heading}
-												variant="muted"
+												// Raised tappable card. `muted` is a recessed well since
+												// the 2026-11 token change, so it would read as a hole
+												// in the page rather than a prompt you can press.
+												variant="default"
 												padding={4}
 												onClick={() => {
 													applySuggestion(suggestion.prompt);

package/templates/ai-chat.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "AI Chat",
 	description: "Threaded assistant chat with design-doc artifact",
+	keywords: ["ai chat", "assistant", "conversation", "transcript", "chat", "artifact"],
 	category: "tooling",
 };

package/templates/ai-chat.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] > H > (SI[fill] > ChL > ChML > (ChM > ChB)*4 + ChC"Ask a follow up...") + (C.transparent > Tbar + S.section > MD) ;; Dlg#artifact[variant=fullscreen] > L > (DH"JWT Token Refresh" + (LC[p=0] > S.section > MD))
+// 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 > LC[p=0] > H > (V > ChL > (VH"Night thread"[as=h1] + ChML > (ChSM"Today" + (ChM > ChBu)*8 + ChSM"Changes sealed in the crypt") + ChC"Ask the night anything...")) + (RH + C.transparent > Tbar + S.transparent > (V[g=2] > Hd"JWT Token Refresh: Design & Rollout"[level=2 t=display-2] + MD)) ;; Dlg#artifact[variant=fullscreen] > L > (DH"JWT Token Refresh" + (LC[p=0] > S.transparent > (V[g=2] > Hd"JWT Token Refresh: Design & Rollout"[level=2 t=display-2] + MD)))
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { Button } from "@astryxdesign/core/Button";
@@ -229,7 +231,9 @@ function ArtifactCard({ onOpen }: { onOpen: () => void }) {
 		<ClickableCard
 			label={`Open ${ARTIFACT_TITLE}`}
 			onClick={onOpen}
-			variant="muted"
+			// A raised tappable chip, not a well: `muted` is #21222C since the
+			// 2026-11 token change and would sink this card below the chat body.
+			variant="default"
 			padding={3}
 			maxWidth={360}
 			style={artifactCard}
@@ -372,6 +376,7 @@ export default function AiChat() {
 											</ChatMessageBubble>
 											<ChatToolCalls
 												defaultIsExpanded
+												label="Explored the auth files"
 												calls={[
 													{
 														name: "read",
@@ -478,6 +483,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
 										<ChatMessage sender="assistant" avatar={<Avatar name="Agent" size="md" />}>
 											<ChatToolCalls
 												defaultIsExpanded
+												label="Added and ran the refresh test"
 												calls={[
 													{
 														name: "read",

package/templates/blank.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Blank",
 	description: "Empty layout shell for a new page",
+	keywords: ["blank", "empty", "starter", "minimal", "placeholder"],
 	category: "tooling",
 };

package/templates/blank.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L[h=auto] > LC > Hd"A blank crypt awaits its story"[level=1]
+// 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] > LC > Hd"A blank crypt awaits its story"[level=1 t=display-2]
 
 import { Layout, LayoutContent } from "@astryxdesign/core/Layout";
 import { Heading } from "@astryxdesign/core/Text";

package/templates/centered-hero.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Centered Hero",
 	description: "Headline, CTAs, and hero visual",
+	keywords: ["centered hero", "landing", "hero", "marketing", "cta", "splash"],
 	category: "marketing",
 };

package/templates/centered-hero.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=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.5.1"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
+// 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] > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.7.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9] > Scene{SceneCastle}))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Button } from "@astryxdesign/core/Button";
@@ -39,7 +41,7 @@ export default function CenteredHero() {
 									Sometimes all it takes is one small ritual to turn the whole night around.
 								</Text>
 								<Text type="supporting" color="secondary" justify="center" hasTabularNumbers>
-									astryx-dracula v0.5.1
+									astryx-dracula v0.7.0
 								</Text>
 							</VStack>
 							<HStack gap={3} wrap="wrap" justify="center">

package/templates/classic-gallery.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Classic Gallery",
 	description: "Filterable image wall with category tabs",
+	keywords: ["gallery", "collection", "grid", "art", "images", "portfolio"],
 	category: "marketing",
 };