astryx-dracula 0.5.1 → 0.6.2

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. */

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";

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.6.2"[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.6.2
 								</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",
 };

package/templates/classic-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=0] > Ctr > V[g=8] > ((Ctr > S.transparent > V[g=4 a=center] > (V[g=2 a=center] > Hd"Hung after dark"[level=1] + Tx"A coven-curated wall"[t=body]) + (TL > Tab"All"! + Tab"Lifestyle" + Tab"Scenery" + Tab"Home") + Tx"10 pieces on the wall"[t=body]) + (G[c={min:260} g=4] > (C[p=0] > AR[ratio=3/2])*10))
+// 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 > V[g=8] > ((Ctr > S.transparent[p=0 mw=680] > V[g=4 a=center] > (V[g=2 a=center] > Hd"Hung after dark"[level=1] + Tx"A coven-curated wall"[t=body]) + (TL > Tab"All"! + Tab"Lifestyle" + Tab"Scenery" + Tab"Home") + Tx"10 pieces on the wall"[t=body]) + (G[c={min:260} g=4] > (C[p=0] > AR[ratio=3/2] > Scene{SceneTile})*10))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Card } from "@astryxdesign/core/Card";

package/templates/contact-form.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Contact Form",
 	description: "Lead capture form with goals and budget",
+	keywords: ["contact", "form", "enquiry", "get in touch", "support", "message"],
 	category: "forms",
 };

package/templates/contact-form.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[a=center] > S.transparent[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1] + Tx"Tell us a bit"[t=body]) + (V[g=4] > Hd"Why work with us"[level=2] + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Hd"Title"[level=3] + Tx"Desc"[t=body]))*3)) + (V[g=4] > Hd"Your details"[level=2] + (G[c={min:260} g=4] > TI"Full name" + TI"Email") + (G[c={min:260} g=4] > TI"Company" + TI"Phone")) + D + (V[g=4] > Hd"Your project"[level=2] + (Fd"Goals"[req] > (H[g=2] > Tk"Goal"*10)) + SE"Timeline" + SE"Budget" + (RL"Source" > RLI*5) + TA"Notes" + CB"Decision maker") + (V[g=3] > B.primary"Send it into the night" + (Tx[t=supporting] > Lk"Privacy Policy"))
+// 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[a=center] > S.transparent[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1 t=display-2] + Tx"Tell us a bit"[t=body]) + (V[g=4] > Hd"Why work with us"[level=2] + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Hd"Title"[level=3] + Tx"Desc"[t=body]))*3)) + (V[g=4] > Hd"Your details"[level=2] + (G[c={min:260} g=4] > TI"Full name"[req] + TI"Email"[req]) + (G[c={min:260} g=4] > TI"Company"[req] + TI"Phone"[req])) + D + (V[g=4] > Hd"Your project"[level=2] + (Fd"What are you going for?"[req] > (H[g=2] > Tk"Goal"*10)) + SE{Selector}"When are you thinking?" + SE{Selector}"Ballpark budget?" + (RL"How did you hear about us?" > RLI*5) + TA"Anything else?" + CB"I'm a budget decision-maker") + (V[g=3] > B.primary"Send it into the night" + (Tx[t=supporting] > Lk"Privacy Policy"))
 
 import { Button } from "@astryxdesign/core/Button";
 import { Card } from "@astryxdesign/core/Card";

package/templates/dashboard-portfolio.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Portfolio Dashboard",
 	description: "Holdings chart, market cards, and trending table",
+	keywords: ["portfolio", "holdings", "wealth", "investment", "positions", "dashboard"],
 	category: "dashboard",
 };

package/templates/dashboard-portfolio.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L[h=fill] > LC[p=6] > V[g=6] > (H[j=between a=center] > Hd"The night vault"[level=1] + Tx"1 year"[t=body]) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Total value"[t=supporting] + (H[g=2] > Tx"$294,200"[t=display-3] + Tx"+14.8%"[t=body]))*4) + (G[c={min:280} g=4] > (C > V[g=4] > (H[j=between] > Hd"Vault value"[level=2] + Lk"View details") + (C > V[g=3] > Tx"Weekly closes"[t=supporting])) + (V[g=4] > (H[j=between] > Hd"Top holdings"[level=2] + Lk"View all") + UL)) + D + (H[j=between a=start] > (V[g=1] > Hd"Market at midnight"[level=2] + Tx"Past 24 hours under moonlight"[t=body]) + B"View more") + (G[c={min:280} g=4] > (C > V[g=3] > Hd"Index"[level=3] + Tx"$5,200"[t=body])*8) + (C > V[g=4] > Hd"Trending stocks"[level=3] + T)
+// 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=6] > (H[j=between a=center] > Hd"The night vault"[level=1] + Tx"1 year"[t=body]) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Total value"[t=supporting] + (H[g=2 a=center] > Tx"$294,200"[t=display-3] + (H[g=1 a=center] > Ic + Tx"+14.8%"[t=body])) + Tx"Weekly closes · trailing 12 months"[t=supporting])*4) + (G[c={min:280} g=4] > (C > V[g=4] > (H[j=between a=center] > Hd"Vault value"[level=2] + Lk"View details") + (V[g=3] > C[p=4] + Tx"Weekly closes · trailing 12 months"[t=supporting])) + (V[g=4] > (H[j=between a=center] > Hd"Top holdings"[level=2] + Lk"View all") + (UL[density=spacious] > LI*5))) + D + (H[j=between a=start] > (V[g=1] > Hd"Market at midnight"[level=2] + Tx"Past 24 hours under moonlight"[t=body]) + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=4] > (V[g=0] > Hd"Dow Jones"[level=3] + Tx"DJI"[t=supporting]) + Spl + (H[g=3 a=center] > Tx"43,821.67"[t=display-3] + (H[g=1 a=center] > Ic + Tx"+0.42%"[t=body])))*8) + (C > V[g=6] > (H[j=between a=center] > Hd"Trending stocks"[level=3]) + T[hover density=compact dv=rows])
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { Button } from "@astryxdesign/core/Button";

package/templates/dashboard.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Analytics Dashboard",
 	description: "KPI cards, SVG chart strips, and data tables",
+	keywords: ["dashboard", "analytics", "kpi", "metrics", "charts", "overview"],
 	category: "dashboard",
 };

package/templates/dashboard.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=6] > (Hd"The night shift"[level=1] + V[g=6] > (H[j=between a=center] > Hd"Awake after dark"[level=2] + B.secondary"Reload") + (V[g=3] > C[p=4] + Tx"Hourly intervals"[t=supporting] + (H[g=6] > (H[g=2 a=center] > Ic + Tx"Desktop"[t=supporting])*2))) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Moonlit visitors"[t=supporting] + (H[g=2] > Tx"27.3 k"[t=display-3] + Tx"+18.2%"[t=body]) + Tx"Last 30 days vs. Previous"[t=supporting])*4) + D + (H[j=between a=center] > Hd"Night denizens"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=4] > Hd"Territory"[level=3] + (H[g=4 wrap] > (V[g=0] > (H[g=2 a=center] > Ic + Tx[t=supporting]) + Tx[t=supporting])*5))*2) + D + (H[j=between a=center] > Hd"Engagement"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=6] > (H[j=between a=center] > Hd"Top pages"[level=3] + Lk"All pages") + T)*2)
+// 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=6] > (Hd"The night shift"[level=1] + V[g=6] > (H[j=between a=center] > Hd"Awake after dark"[level=2] + B.secondary"Reload") + (V[g=3] > C[p=4] + (V[g=1] > (H[g=4 a=center] > (H[g=1 a=center] > Sw + Tx"Desktop"[t=supporting])*2) + Tx"Hourly intervals"[t=supporting]))) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Moonlit visitors"[t=supporting] + (H[g=2 a=center] > Tx"27.3 k"[t=display-3] + (H[g=1 a=center] > Ic + Tx"+18.2%"[t=body])) + Tx"Last 30 days vs. Previous"[t=supporting] + Spl)*4) + D + (H[j=between a=center] > Hd"Night denizens"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=4] > Hd"Territory"[level=3] + (H[g=4 wrap] > (V[g=1] > (H[g=2 a=center] > Ic + Tx[t=supporting]) + Tx[t=supporting])*5))*2) + D + (H[j=between a=center] > Hd"Engagement"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=6] > (H[j=between a=center] > Hd"Top pages"[level=3] + Lk"All pages") + T[hover density=compact dv=rows])*2)
 
 /**
  * Analytics Dashboard — the night shift at a glance: live active users, four KPI tiles, audience breakdown strips, and engagement tables. (Frame/responsive/container: see XLE header above.)

package/templates/detail-page.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Order Detail",
 	description: "Items, invoice, timeline, and side panel",
+	keywords: ["detail", "order", "invoice", "product", "purchase", "receipt", "transaction"],
 	category: "commerce",
 };

package/templates/detail-page.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=3] > ((H[g=4 a=start] > (SI > V[g=0] > (Lk"All orders" + (V[g=0] > Hd"#1001"[level=1] + (H[g=1 a=center] > Tx"5 ordered items"[t=supporting] + Av"Vlad Dracul" + SD"Unfulfilled" + Tx"02/23/2026"[t=supporting] + Lk"See all")))) + (H[g=2] > B"Restock" + B"Edit")) + (H[g=3 a=center] > (SI > TL > Tab"Details"! + Tab"Invoices" + Tab"Timeline" + TabMenu"More") + B.ghost))) + (LC > V[g=4] > ((S > V[g=4] > ((H[g=2 a=center] > Hd"Items"[level=2] + SD"Unfulfilled") + UL)) + (S > V[g=4] > ((H[g=2 a=center] > Hd"Invoice"[level=2] + SD"Paid") + ML)) + (S > V[g=4] > ((H[g=2 a=center] > Hd"Timeline"[level=2] + B.ghost) + UL)))) + (LP[w=320 p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis")
+// 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"))
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { Button } from "@astryxdesign/core/Button";
@@ -50,16 +52,14 @@ 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: -12,
-	marginBottom: -16,
-	marginTop: 12,
-};
-// Pull the list items' inner padding back so their content optically aligns
-// with the section heading above (ListItem insets content by ~8px). No
-// edge/inset prop on List (#2626).
-const itemsList: CSSProperties = {
-	marginInline: -8,
+	marginInline: "calc(var(--spacing-3) * -1)",
+	marginBottom: "calc(var(--spacing-4) * -1)",
+	marginTop: "var(--spacing-3)",
 };
 
 // ─── Product data ───────────────────────────────────────────────────────────
@@ -334,7 +334,7 @@ function ItemsCard() {
 					</HStack>
 				</HStack>
 
-				<List density="spacious" style={itemsList}>
+				<List density="spacious" edge="outset">
 					{PRODUCTS.map((product, i) => (
 						<ListItem
 							key={product.name}
@@ -482,7 +482,7 @@ function TimelineSection() {
 					<Button label="Filters" variant="ghost" icon={<Icon icon={Filter} />} isIconOnly />
 				</HStack>
 
-				<List density="spacious" style={itemsList}>
+				<List density="spacious" edge="outset">
 					{ACTIVITY.map((item) => (
 						<ListItem
 							key={`${item.user}-${item.time}`}
@@ -624,9 +624,9 @@ export default function DetailPage() {
 				}
 				end={!isNarrow && showSidePanel ? <RightPanel /> : undefined}
 			/>
-			{/* Mobile: the side panel content opens as a full-screen dialog. (A
-          side drawer/sheet would be more idiomatic, but Astryx has no Drawer
-          component yet — #2575 — so we use the fullscreen Dialog variant.) */}
+			{/* Mobile: the side-panel content uses the full viewport so order details
+          are not squeezed beside narrow page chrome. Drawer remains available
+          for side-overlay flows that intentionally preserve page context. */}
 			<Dialog
 				variant="fullscreen"
 				isOpen={isNarrow && isPanelDialogOpen}

package/templates/documentation-design.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Design Documentation",
 	description: "Live preview, usage guide, and code examples",
+	keywords: ["documentation", "docs", "design system", "reference", "guide", "spec"],
 	category: "docs",
 };

package/templates/documentation-design.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] > (V[g=2] > Hd"Button"[level=1] + Tx"March 30, 2026"[t=supporting]) + (C.muted[p=0] > Ctr[h=360]) + (V[g=4] > Hd"Usage"[level=2] + Tx"Usage"[t=body] + Hd"Best practices"[level=3] + T) + D + (V[g=4] > Hd"Examples"[level=2] + Tx"Explore"[t=body]) + (V[g=8] > (C[p=0] > (S[p=3] > Tx"Semantics"[t=body]) + Ctr[h=280] + (S.muted[p=3] > V[g=3] > (TL > Tab"Description"! + Tab"Code") + Tx"We have four"[t=body])) + (C[p=0] > (S[p=3] > Tx"Default button with badge"[t=body]) + Ctr[h=280] + (S.muted[p=3] > V[g=3] > (TL > Tab"Description"! + Tab"Code") + Tx"Buttons can include"[t=body])))) + (LP > Outline)
+// 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"Button"[level=1 t=display-2] + Tx"March 30, 2026"[t=supporting] + SE{Selector}"On this page") + (C.muted[p=0] > Ctr[h=360]) + (V[g=4] > Hd"Usage"[level=2] + Tx"Usage"[t=body] + Hd"Best practices"[level=3] + T[hover density=spacious]) + D + (V[g=4] > Hd"Examples"[level=2] + Tx"Explore"[t=body]) + (V[g=8] > (C[p=0] > (S.transparent[p=3] > Tx"Semantics"[t=body]) + Ctr[h=280] + (S.muted[p=3 dv=[top]] > V[g=3] > (TL[size=sm] > (Tab"Description"! + Tab"Code")) + Tx"We have four"[t=body])) + (C[p=0] > (S.transparent[p=3] > Tx"Default button with badge"[t=body]) + Ctr[h=280] + (S.muted[p=3 dv=[top]] > V[g=3] > (TL[size=sm] > (Tab"Description"! + Tab"Code")) + Tx"Buttons can include"[t=body])))) + (LP[!scroll] > Outline)
 
 /**
  * Documentation detail — one component, its usage, its guidance and its live examples. (Frame/responsive/container: see XLE header above.)
@@ -89,7 +91,7 @@ const COMPONENT_DOCS: Record<
 	},
 };
 
-const ACTIVE_DOCS = COMPONENT_DOCS["button"];
+const ACTIVE_DOCS = COMPONENT_DOCS.button;
 
 // One preview node per example in ACTIVE_DOCS.examples, index-aligned. The
 // old EXAMPLE_PREVIEWS record carried only this key, so the record wrapper

package/templates/documentation-technical.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Technical Documentation",
 	description: "Install steps, theming setup, and next steps",
+	keywords: ["documentation", "technical", "api reference", "spec", "manual", "reference"],
 	category: "docs",
 };

package/templates/documentation-technical.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] > (V[g=2] > Hd"Getting started with Astryx Dracula"[level=1] + Tx"Last updated March 30, 2026"[t=supporting]) + (C > V[g=3] > (H[j=between] > (H[g=2] > Ic + Tx"AI Assistance"[t=body]) + B"Copy prompt") + Tx"Prompt description"[t=body]) + (V[g=4] > Hd"Prerequisites"[level=2] + UL) + D + (V[g=4] > Hd"Install the package"[level=2] + Tx"Description"[t=body] + (V[g=2] > Tx"Step"[t=body] + Cd)*3) + 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)) + (LP > Outline)
+// 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)
 
 import { Button } from "@astryxdesign/core/Button";
 import { Card } from "@astryxdesign/core/Card";

package/templates/documentation.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Component Catalog",
 	description: "Hero plus categorized component grid",
+	keywords: ["documentation", "docs", "guide", "manual", "reference", "handbook"],
 	category: "docs",
 };

package/templates/documentation.tsx

@@ -1,10 +1,12 @@
 // 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):
 // 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 > LC > V[g=10] > (C[p=10] > (H[g=8 a=center] > (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]) + (H[j=between a=center] > Hd"Layout"[level=2] + Tx"4 spells"[t=body]) + (H[j=between a=center] > Hd"Navigation"[level=2] + Tx"4 spells"[t=body]) + (H[j=between a=center] > Hd"Form"[level=2] + Tx"5 spells"[t=body]) + (G[c={min:260} g=4] > (CC[p=4] > V[g=3] > C[p=0] + (V[g=1] > Tx"Avatar"[t=body] + Tx"Avatars represent"[t=body]))*4))
+//   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))
 
 /**
  * Documentation catalog — every component shelf in the grimoire.  Frame-first layout (see `bunx astryx docs layout`): (Frame/responsive/container: see XLE header above.)

package/templates/editor.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Page Editor",
 	description: "Block builder with sidebar config and preview",
+	keywords: ["editor", "ide", "code", "workspace", "files", "developer"],
 	category: "tooling",
 };

package/templates/editor.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LP[w=320] > V[g=4] > (S[p=4] > V[g=4] > Hd"Page Editor"[level=1] + Tbar) + (V[g=4] > (TL > Tab"Blocks"! + Tab"Properties") + D + (S[p=4] > V[g=2] > Hd"Add Block"[level=3] + UL + Hd"Layers"[level=3] + UL))) + (LC > V[g=4] > C*3)
+// 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] > (LP[w=320 p=0 divider] > V[g=4] > (S.transparent[p=4] > V[g=4] > (TI"Page title" + Hd"Page Editor"[level=1 t=display-2]) + Tbar) + (V[g=4] > (V[g=0] > (TL > Tab"Blocks"! + Tab"Properties") + D) + (S.transparent[p=4] > (V[g=2] > (V[g=1] > Hd"Add Block"[level=3] + UL) + (V[g=1] > Hd"Layers"[level=3] + UL)) + (V[g=4] > TI"Heading" + TA"Description")))) + (LC[p=8] > V[g=4] > SC*3) ;; Dlg[variant=fullscreen p=0] > L[h=fill] > (LH[divider] > (H[g=3 j=between a=center] > Hd"Customize"[level=3] + IB"Close")) + (LC[p=0] > (V[g=4] > (V[g=0] > (TL > Tab"Blocks"! + Tab"Properties") + D) + (S.transparent[p=4] > (V[g=2] > (V[g=1] > Hd"Add Block"[level=3] + UL) + (V[g=1] > Hd"Layers"[level=3] + UL)) + (V[g=4] > TI"Heading" + TA"Description")))))
 
 import { Button } from "@astryxdesign/core/Button";
 import { Center } from "@astryxdesign/core/Center";

package/templates/file-explorer.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "File Explorer",
 	description: "Column-based file browser with preview",
+	keywords: ["file explorer", "files", "browser", "directories", "storage", "disk"],
 	category: "tooling",
 };

package/templates/file-explorer.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (Tbar[size=sm] > (H > IB"Go back" + IB"Go forward" + Tx"Folder"[t=label]) + (SG"View mode" > SGI*4) + (H > IB"Group" + IB"Share" + IB"Tags" + IB"More" + IB"Search")) + (LC[p=0 !scroll] > (Hd"File Explorer"[level=1] + H[h=fill] > (S.transparent[p=2 w=240 dv=[end]] > UL[density=compact !hasDividers] > (LI > Ic + Tx"Item"[t=body])*3)*3 + (S.transparent[p=6] > V[g=4 a=center] > Av[size=96] + (V[g=1 a=center] > Tx"Name"[t=body] + Tx"Kind"[t=supporting]) + (ML"Information" > MLI*3))))
+// 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] > (Tbar[size=sm dv=[bottom]] > (IB"Go back" + IB"Go forward" + Tx"Folder"[t=label]) + (SG"View mode" > SGI*4) + (IB"Group" + IB"Share" + IB"Tags" + IB"More" + IB"Search")) + (LC[p=0 !scroll] > (VH"File Explorer" + H[h=100%] > (S.transparent[p=2 w=240 dv=[end]] > UL[density=compact !hasDividers] > (LI > Ic + Tx"Item"[t=body])*3)*3 + (S.transparent[p=4 w=320] > V[g=4 a=center] > Av[size=96] + (V[g=1 a=center] > Tx"Name"[t=body] + Tx"Kind"[t=supporting]) + (ML"Information" > MLI*3))))
 
 import { Avatar } from "@astryxdesign/core/Avatar";
 import { EmptyState } from "@astryxdesign/core/EmptyState";

package/templates/form-two-column.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Two-column Form",
 	description: "Contact form with illustration and info strip",
+	keywords: ["form", "two column", "contact", "split", "signup", "lead"],
 	category: "forms",
 };

package/templates/form-two-column.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > S.transparent[p=10] > V[g=10] > (G[c={min:280,max:2} g=10] > (V[g=6] > (V[g=3] > Hd"Let's conjure together"[level=1 t=display-1] + Tx"Tell us what you're brewing"[t=body]) + AR) + (C[p=4] > V[g=4] > Hd"Your details"[level=2] + TI"Full name"[req] + (G[c={min:180} g=3] > TI"Email"[req] + TI"Company") + (G[c={min:180} g=3] > TI"Job title" + TI"Phone") + (V[g=2] > Tx"Reason"[t=label] + (H[g=2] > Tk"Reason"*7)) + SE"Budget" + TA"Project details" + B.primary"Send it into the night")) + (V[g=6] > D + (G[c={min:200} g=6] > (V[g=1 a=center] > Tx"General"[t=supporting] + Lk"hello@castle.dracula")*3))
+// 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 > S.transparent[mw=1100 w=100% p=10] > V[g=10] > (G[c={min:280,max:2} g=10 a=center] > (V[g=6] > (V[g=3] > Hd"Let's conjure together"[level=1 t=display-1] + Tx"Tell us what you're brewing"[t=body]) + (AR[ratio=4/3] > Scene{SceneCastle})) + (C[p=4] > V[g=4] > Hd"Your details"[level=2] + TI"Full name"[req] + (G[c={min:180} g=3] > TI"Email"[req] + TI"Company name") + (G[c={min:180} g=3] > TI"Job title" + TI"Phone number") + (V[g=2] > Tx"What are you reaching out about?"[t=label] + (H[g=2] > Tk"Reason"*7)) + SE"Budget range" + TA"Project details" + Bn.success"Sent into the night" + (V[a=stretch] > B.primary"Send it into the night"))) + (V[g=6] > D + (G[c={min:200} g=6] > (V[g=1 a=center] > Tx"General"[t=supporting] + Lk"hello@castle.dracula")*3))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Banner } from "@astryxdesign/core/Banner";
@@ -196,6 +198,10 @@ export default function TwoColumnForm() {
 								{submitted && isValid && (
 									<Banner
 										status="success"
+										// Core 0.7.0 stopped deriving the live-region role from
+										// `status`, so this banner states its own. It mirrors the
+										// submit result, and a screen reader must hear it.
+										role="status"
 										title="Sent into the night"
 										description="The coven received your message and will answer after dark."
 									/>

package/templates/gallery-hero.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Gallery Hero",
 	description: "Headline, CTAs, and three-image gallery",
+	keywords: ["gallery", "hero", "showcase", "carousel", "featured", "spotlight"],
 	category: "marketing",
 };

package/templates/gallery-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"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR*3)
+// 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"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR[ratio=4/5] > Scene{SceneCastle}*3)
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Button } from "@astryxdesign/core/Button";

package/templates/ide.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "IDE Workspace",
 	description: "Tabbed editor with terminal and properties",
+	keywords: ["ide", "editor", "terminal", "workspace", "code", "developer"],
 	category: "tooling",
 };

package/templates/ide.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LP[p=4] > V[g=2] > TI"Search files" + TreeList) + (LC[p=0] > (Hd"Code editor"[level=1] + V > (SI[fill] > Cd) + (V > (TL > Tab"Terminal"! + Tab"Problems" + Tab"Output" + Tab"Debug") + Cd))) + (LP[p=4] > V[g=3] > (SG > SGI"Properties"! + SGI"History") + (V[g=3] > (V[g=1] > Hd"NightCounter.tsx"[level=3] + Tx"src/components/NightCounter.tsx"[t=supporting]) + ML + (V[g=2] > B.secondary"Format Document" + B.secondary"Go to Definition" + B.secondary"Find References")))
+// 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] > (VH"Code editor" + L[h=fill] > (LP[w=256 p=4] > V[g=2] > TI"Search the night" + TrL) + RH + (LC[p=0] > L[h=fill] > (LC[p=0] > V > (SI[fill] > Cd) + RH + (V[h=300] > (TL[size=sm] > Tab"Terminal"! + Tab"Problems" + Tab"Output" + Tab"Debug") + (SI[fill] > Cd))) + (RH + (LP[w=320 p=4] > V[g=3] > (SG > SGI"Properties"! + SGI"History") + (V[g=3] > (V[g=1] > Hd"NightCounter.tsx"[level=3] + Tx"src/components/NightCounter.tsx"[t=supporting]) + ML + (V[g=2] > B.secondary"Format Document" + B.secondary"Go to Definition" + B.secondary"Find References")) + (V[g=1] > UL > LI*3)))))
 
 import { Button } from "@astryxdesign/core/Button";
 import { Center } from "@astryxdesign/core/Center";
@@ -34,11 +36,14 @@ const styles: Record<string, CSSProperties> = {
 	},
 	tabListPadding: {
 		paddingTop: "var(--spacing-2)",
-		// 4px inline = offset 2 + ring thickness 2, so the focus ring lands INSIDE
-		// this box's clip instead of on its edge being cut in half. Deliberately
-		// NOT applied to `terminalPanel`: that would inset the CodeBlock itself,
+		// The focus ring is a fixed 2px outline (core's defineTheme.ts), and the
+		// ring lands INSIDE this box's clip rather than on its edge being cut in
+		// half. The 2px of that is a PIXEL relationship, so it is written as
+		// pixels: --spacing-1 is rem since core 0.7.0, and at a 20px root it
+		// is 5px, which would clip the ring by a pixel. Deliberately NOT
+		// applied to `terminalPanel`: that would inset the CodeBlock itself,
 		// moving the code rather than giving the ring somewhere to live.
-		paddingInline: "var(--spacing-1)",
+		paddingInline: "calc(var(--spacing-1) + 2px)",
 	},
 	metadataCompact: {
 		gap: "var(--spacing-1) var(--spacing-3)",

package/templates/incident-console.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Incident Console",
 	description: "On-call incident rows with inspector timeline",
+	keywords: ["incident", "alert", "on-call", "outage", "ticket", "triage", "console"],
 	category: "tooling",
 };