astryx-dracula 0.5.1 → 0.6.2

package/templates/product-tour.tsx

@@ -1,11 +1,13 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @sideNav=(SN > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"v0.5.1"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Body"[t=body] + UL + Cd)*2) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next")) + (LP[!scroll] > 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):
+//   A[cp=0 h=auto @sideNav=(SN[collapsible header=SideNavHeading] > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating"))))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx"Documentation"[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"astryx-dracula v0.6.2"[t=supporting] + SE{Selector}"On this page") + Tx"astryx-dracula is a pure Dracula brand theme"[t=large] + AR[ratio=16/9] + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Four decisions shape everything else"[t=body] + (UL > LI*4)))*2) + D + (H[g=3 j=between a=center] > SI[fill] + B.secondary"Install")) + (LP[!scroll] > Outline)
 
 /**
  * Product Tour — a chaptered walkthrough of this theme.
  *
- * Frame-first layout (see `bunx astryx docs layout`):
+ * Frame-first layout (see `bunx @astryxdesign/cli docs layout`):
  *
  *   Frame: chapter rail 264 (SideNav) | chapter content (fill) | outline 240
  *
@@ -251,9 +253,10 @@ import {astryxDraculaTheme} from 'astryx-dracula';
 						code: {
 							language: "bash",
 							title: "shell",
-							source: `# any of the 45 page ids
-bunx astryx template dashboard --package astryx-dracula
-bunx astryx template product-tour --package astryx-dracula`,
+							source: `# any of the 45 page ids — the path argument is required; without it the
+# CLI prints the template source and writes nothing
+bunx @astryxdesign/cli template dashboard --package astryx-dracula ./src/pages/dashboard.tsx
+bunx @astryxdesign/cli template product-tour --package astryx-dracula ./src/pages/product-tour.tsx`,
 						},
 					},
 					{
@@ -264,12 +267,12 @@ bunx astryx template product-tour --package astryx-dracula`,
 					{
 						key: "xle-headers",
 						heading: "Read the header first",
-						body: "Every template leads with a one-line structural expression describing the frame it renders, validated by the CLI. Reading that line costs a fraction of reading the file, which makes adapting a page much cheaper than rebuilding it.",
+						body: "Every template leads with a one-line structural expression describing the frame it renders. Reading that line costs a fraction of reading the file, which makes adapting a page much cheaper than rebuilding it. The CLI no longer ships a validator for it — `astryx layout` was removed in 0.7.0 — so it is a reading aid and a human drift check: update it with the file, never alone.",
 						code: {
 							language: "bash",
 							title: "shell",
-							source: `# validate the structure comment against the render
-bunx astryx layout check "L > (LC > V[g=4] > Hd\\"Title\\"[level=1])"`,
+							source: `# read the structure comment at the top of the template
+head -4 src/pages/dashboard.tsx`,
 						},
 					},
 				],
@@ -852,7 +855,7 @@ export default function ProductTour() {
 			railHref={SELF_HASH}
 			railIcon={<Icon icon={Sparkles} size="sm" />}
 			eyebrow="Documentation"
-			badge={() => "astryx-dracula v0.5.1"}
+			badge={() => "astryx-dracula v0.6.2"}
 			art={(chapterId) => <ChapterArt chapterId={chapterId} />}
 		/>
 	);

package/templates/settings-dialog.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Settings Dialog",
 	description: "Account settings dialog with sidebar sections",
+	keywords: ["settings", "dialog", "preferences", "modal", "configuration", "options"],
 	category: "forms",
 };

package/templates/settings-dialog.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC > Ctr[h=80vh] > B.primary"Open settings"[opens=#settings] ;; Dlg#settings > L > (LP[w=280 divider p=3] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI"Personal information"*8)) + (LC[p=6] > V[g=6] > DH"Account" + SE"Settings section" + (V[g=0] > TabList + (V[g=0] > Hd"Login"[level=3] + (H[j=between a=start] > (V[g=0] > Tx"Password"[weight=semibold] + Tx"Not created"[t=supporting]) + B"Create") + (H[g=3 a=start] > Ic + (V[g=0] > (H[g=2 a=center wrap] > Tx"OS X 10.15.7 Chrome"[weight=semibold] + SD) + Tx"March 30, 2026"[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):
+//   L[h=auto] > LC[p=0] > Ctr[h=80vh] > B.primary"Open settings"[opens=#settings] ;; Dlg#settings > L[h=fill] > (LP[w=280 divider p=3] > V[g=4] > Tx"Account settings"[t=label] + (UL[density=spacious edge=flush] > LI"Personal information" + LI"Login & security"! + LI*6)) + (LC[p=6] > V[g=6] > DH"Login & security" + SE{Selector}"Settings section" + (V[g=0 mw=680] > (TL[divider] > Tab"Login"! + Tab"Shared access") + (V[g=8] > (V[g=2] > Hd"Login"[level=3] + (H[j=between a=start] > (V[g=1] > Tx"Password"[weight=semibold] + Tx"Not created"[t=body]) + B.secondary"Create")) + (V[g=2] > Hd"Social accounts"[level=3] + (H[j=between a=start] > (V[g=1] > Tx"Google"[weight=semibold] + Tx"Connected"[t=body]) + B.destructive"Disconnect")) + (V[g=2] > Hd"Device history"[level=3] + (H[g=3 a=start] > Ic + (SI[fill] > V[g=1] > (H[g=2 a=center wrap] > Tx"OS X 10.15.7 · Chrome"[weight=semibold] + SD.success) + Tx"March 30, 2026"[t=supporting]))*3) + (V[g=2] > Hd"Account"[level=3] + (H[j=between a=start] > (V[g=1] > Tx"Deactivate your account"[weight=semibold] + Tx"This action cannot be undone"[t=supporting]) + B.destructive"Deactivate")))))
 
 /**
  * Settings Dialog — account sections inside one modal.  Frame: the trigger page, then a Dialog that sizes to (Frame/responsive/container: see XLE header above.)
@@ -189,7 +191,7 @@ export default function SettingsDialog() {
 									<Text type="label" style={sideNavHeading}>
 										Account settings
 									</Text>
-									<List density="spacious">
+									<List density="spacious" edge="flush">
 										{NAV_ITEMS.map((item) => (
 											<ListItem
 												key={item.label}

package/templates/settings-sidebar.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Settings Panels",
 	description: "Sidebar sections with account and workspace panels",
+	keywords: ["settings", "sidebar", "preferences", "configuration", "options", "account"],
 	category: "forms",
 };

package/templates/settings-sidebar.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LP[p=0] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI*8) + D + LI"Professional hosting tools") + (LC[p=6] > V[g=0] > (Tbar > B.ghost + Hd"Personal info"[level=1]) + Hd"Personal info"[level=1] + (V[g=0] > (H[j=between a=start] > (V[g=1] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting]) + B.secondary"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden?"[weight=semibold] + Tx[t=supporting]))*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[divider p=0] > V[g=4 paddingBlock=4 paddingInline=3] > Tx"Account settings"[t=label] + (UL[density=spacious edge=flush] > LI*8) + D + (UL[density=spacious edge=flush] > LI"Professional hosting tools")) + (LC[p=6] > V[g=0] > (Tbar[g=2] > B.ghost"Back to Account settings" + Hd"Personal information"[level=1]) + Hd"Personal information"[level=1] + (V[g=0] > (H[j=between a=start] > (V[g=1] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=body]) + B.secondary"Edit")*7 + (H[j=between a=start] > (V[g=1] > Tx"Identity verification"[weight=semibold] + Tx"Verified"[t=body]))) + (C[p=4] > V[g=4] > (H[g=3 a=start] > Ctr[w=48 h=48] > Ic + (V[g=1] > Tx"Why isn't my info shown here?"[weight=semibold] + Tx[t=body]))*3)) ;; L[h=fill] > LC[p=0] > V[g=4 paddingBlock=4 paddingInline=3] > Tx"Account settings"[t=label] + (UL[density=spacious edge=flush] > LI*8) + D + (UL[density=spacious edge=flush] > LI"Professional hosting tools")
 
 /**
  * Settings Panels — account sections with a nav panel and spaced rows.  Frame: Layout nav panel (fill) | content column of section views. One (Frame/responsive/container: see XLE header above.)
@@ -131,7 +133,7 @@ export default function SettingsSidebar() {
 			<Text type="label" style={sideNavHeading}>
 				Account settings
 			</Text>
-			<List density="spacious">
+			<List density="spacious" edge="flush">
 				{NAV_ITEMS.map((item) => (
 					<ListItem
 						key={item.label}
@@ -146,7 +148,7 @@ export default function SettingsSidebar() {
 				))}
 			</List>
 			<Divider />
-			<List density="spacious">
+			<List density="spacious" edge="flush">
 				<ListItem label="Professional hosting tools" startContent={<Icon icon={Wrench} />} />
 			</List>
 		</VStack>

package/templates/settings.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Settings Form",
 	description: "Single scrolling form with profile sections",
+	keywords: ["settings", "preferences", "configuration", "options", "account", "profile"],
 	category: "forms",
 };

package/templates/settings.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[a=center wrap] > (SI[fill] > Hd"Settings"[level=1 t=display-2]) + TY"Search") + (LP[w=260 p=2] > UL > LI*6) + (LC[p=6] > V[g=4] > (V[a=center] > TabList) + ((G[c={min:280} g=8] > (V[g=1] > Hd"Basic information"[level=2] + Tx"View and update your details"[t=body]) + (V[g=4] > TI"Username" + TI"Email address" + (H > B.primary"Save"))) + D)*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] > (LH[divider p=6] > H[a=center wrap] > (SI[fill] > Hd"Settings"[level=1 t=display-2]) + TY"Search coven settings…") + (LP[w=260 p=2] > UL[density=balanced edge=flush] > LI*6) + (LC[p=6] > V[g=4] > (V[a=center] > (TL > Tab"Profile"! + Tab"Account" + Tab"Members" + TabMenu"More")) + (G[c={min:280} g=8] > (V[g=1] > Hd"Basic information"[level=2] + Tx"View and update your crypt details"[t=body]) + (V[g=4] > TI"Username" + TI"First name" + TI"Last name" + TI"Email address" + (H > B.primary"Save"))) + D + (G[c={min:280} g=8] > (V[g=1] > Hd"Change password"[level=2] + Tx"Update your password"[t=body]) + (V[g=4] > TI"Verify current password" + TI"New password" + TI"Confirm password" + (H > B.primary"Save"))) + D + (G[c={min:280} g=8] > (V[g=1] > Hd"Advanced settings"[level=2] + Tx"Configure detailed coven preferences"[t=body]) + (V[g=4] > CB"Data Export Access" + CB"Allow Admin to Add Members" + CB"Enable Two-Factor Authentication" + (H > B.primary"Save"))))
 
 /**
  * Settings — one scrolling page of account sections.
@@ -65,13 +67,7 @@ const settingsSearchSource: SearchSource<SearchableItem> = {
 // the fields in the right column. Text and check fields share one row shape;
 // the renderer switches on `kind`.
 type SettingsTextKey =
-	| "username"
-	| "firstName"
-	| "lastName"
-	| "email"
-	| "currentPw"
-	| "newPw"
-	| "confirmPw";
+	"username" | "firstName" | "lastName" | "email" | "currentPw" | "newPw" | "confirmPw";
 type SettingsCheckKey = "dataExport" | "adminMembers" | "twoFactor";
 type SettingsField =
 	| {
@@ -283,7 +279,7 @@ export default function SettingsTemplate() {
 			start={
 				isNarrow ? undefined : (
 					<LayoutPanel hasDivider={false} width={260} padding={2}>
-						<List density="balanced">
+						<List density="balanced" edge="flush">
 							{NAV_ITEMS.map((item) => (
 								<ListItem
 									key={item}

package/templates/shell-nav.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Shell Nav",
 	description: "Top and side nav app shell with code editor",
+	keywords: ["shell", "navigation", "app", "chrome", "layout", "header"],
 	category: "tooling",
 };

package/templates/shell-nav.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @topNav=(TN) @sideNav=(SN > TL)] > L > (LH[divider] > H[g=2 wrap] > C.muted[p=0]*3) + (LC[p=6] > V[g=2] > (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*3 + C.muted[p=0] + (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*4 + C.muted[p=0] + (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*5)
+// 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):
+//   A[cp=0 @topNav=(TN > (B.ghost"File" + B.ghost"Edit" + B.ghost"View" + B.ghost"Window" + B.ghost"Help") + B.secondary"Search files and commands") @sideNav=(SN > TrL[density=compact])] > L[h=fill] > (LH[divider p=6] > H[g=2 wrap] > Sk[w=132 h=36]*2) + (LC[p=6] > V[g=2] > (H[g=3 a=center] > Sk + Sk)*2 + Sk + (H[g=3 a=center] > Sk + Sk) + Sk)
 // Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
 // exemption) — routed pages supply the h1.
 
@@ -162,34 +164,30 @@ export default function ShellNav() {
 				topNav={
 					<TopNav
 						label="Dracula Studio menu bar"
-						startContent={
-							<>
-								{MENUS.map((menu) => (
-									<DropdownMenu
-										key={menu.label}
-										button={{ label: menu.label, variant: "ghost", size: "sm" }}
-										hasChevron={false}
-										menuWidth={MENU_WIDTH}
-									>
-										{/* Keyed by the group's first label, not its position:
+						startContent={MENUS.map((menu) => (
+							<DropdownMenu
+								key={menu.label}
+								button={{ label: menu.label, variant: "ghost", size: "sm" }}
+								hasChevron={false}
+								menuWidth={MENU_WIDTH}
+							>
+								{/* Keyed by the group's first label, not its position:
                         an index key remounts every group when the menu
                         data shifts. `gi` only decides the divider. */}
-										{menu.groups.map((group, gi) => (
-											<Fragment key={group[0][0]}>
-												{gi > 0 && <Divider />}
-												{group.map(([label, shortcut]) => (
-													<DropdownMenuItem
-														key={label}
-														label={label}
-														endContent={shortcut ? <Kbd keys={shortcut} /> : undefined}
-													/>
-												))}
-											</Fragment>
+								{menu.groups.map((group, gi) => (
+									<Fragment key={group[0][0]}>
+										{gi > 0 && <Divider />}
+										{group.map(([label, shortcut]) => (
+											<DropdownMenuItem
+												key={label}
+												label={label}
+												endContent={shortcut ? <Kbd keys={shortcut} /> : undefined}
+											/>
 										))}
-									</DropdownMenu>
+									</Fragment>
 								))}
-							</>
-						}
+							</DropdownMenu>
+						))}
 						endContent={
 							// A real palette trigger, not a lookalike field: the previous
 							// TextInput swallowed keystrokes while a wrapper div opened the

package/templates/shell-side-nav.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Sidebar Shell",
 	description: "Workspace sidebar with conversation list",
+	keywords: ["shell", "side nav", "sidebar", "navigation", "app", "layout"],
 	category: "tooling",
 };

package/templates/shell-side-nav.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @sideNav=(SN > SNI"New chat" + SNI"Search" + SNI"Library" + D + (SNI"Personal" > SNI"Full-moon rite planning")*3)] > L > (LC[p=6] > V[g=5] > (H > C.muted[p=0])*4) + (LF > TI"Message Night Owl")
+// 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):
+//   A[cp=0 @sideNav=(SN[collapsible header=SideNavHeading] > (SNS > SNI"New chat" + SNI"Search" + SNI"Library") + D + (SNS > SNI"Personal" > (SNI"Full-moon rite planning"! + SNI"Potion recipes for the week" + SNI"Grimoire recommendations")) + (SNS > SNI"Settings" + SNI"Sarah Chen"))] > L[h=fill] > (LC[p=6] > V[g=5] > (H > C.muted[p=0])*4) + (LF > TI"Message Night Owl…")
 // Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
 // exemption) — routed pages supply the h1.
 
@@ -93,22 +95,25 @@ export default function ShellSideNav() {
 								icon={workspace.icon}
 								collapsible={{ defaultIsCollapsed: false }}
 							>
-								<VStack gap={0.5}>
-									{workspace.chats.map((chat) => (
-										// The hover-only MoreMenu was four dead actions unreachable
-										// by keyboard and touch, so it goes: the status dot stays
-										// always visible (its label doubles as the tooltip), and
-										// selecting a conversation switches selection.
-										<SideNavItem
-											key={chat.label}
-											label={chat.label}
-											href={SELF_HASH}
-											isSelected={chat.label === selectedChat}
-											onClick={() => setSelectedChat(chat.label)}
-											endContent={<StatusDot variant={chat.status} label={chat.statusLabel} />}
-										/>
-									))}
-								</VStack>
+								{/* The nested rows are direct children, not wrapped in a
+                    VStack: core 0.7.2 made nested SideNavItems span the
+                    full width of the nav list with the indent inside the row,
+                    and any non-SideNavItem content in between (a VStack is
+                    exactly that) takes the children out of that flow. */}
+								{workspace.chats.map((chat) => (
+									// The hover-only MoreMenu was four dead actions unreachable
+									// by keyboard and touch, so it goes: the status dot stays
+									// always visible (its label doubles as the tooltip), and
+									// selecting a conversation switches selection.
+									<SideNavItem
+										key={chat.label}
+										label={chat.label}
+										href={SELF_HASH}
+										isSelected={chat.label === selectedChat}
+										onClick={() => setSelectedChat(chat.label)}
+										endContent={<StatusDot variant={chat.status} label={chat.statusLabel} />}
+									/>
+								))}
 							</SideNavItem>
 						))}
 					</SideNavSection>

package/templates/shell-top-nav.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Storefront Shell",
 	description: "Mega-menu top nav with product grid",
+	keywords: ["shell", "top nav", "navigation", "app", "header", "layout"],
 	category: "tooling",
 };

package/templates/shell-top-nav.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=6 @topNav=(TN > TNI"Shop" + TNI"Brands" + TNI"Sale" + TNI"Service")] > Ctr[axis=horizontal] > S[mw=1100 w=100% p=0] > V[g=10] > C.muted[p=0 w=100% h=360] + (V[g=4] > C.muted[p=0 w=200 h=24] + (G[c={min:160} g=4] > (V[g=2] > C.muted[p=0 w=100% h=120] + C.muted[p=0 w=60% h=14])*6))*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):
+//   A.surface[cp=6 @topNav=(TN > (Hd{TopNavHeading}"Nocturne") + (TNI{TopNavMegaMenu}"Shop" > (TNI{TopNavMegaMenuItem}*4 + C{TopNavMegaMenuFeaturedCard}"The Midnight Edit") + TNI{TopNavMegaMenu}"Brands" > (TNI{TopNavMegaMenuItem}*4 + C{TopNavMegaMenuFeaturedCard}"Meet Studio Mara") + TNI"Sale" + TNI"Service") + (IB"Search products" + B.ghost"Sign in" + B.primary"Checkout"))] > Ctr[axis=horizontal] > S.transparent[mw=1100 w=100% p=0] > V[g=10] > C.muted[p=0 w=100% h=360] + (V[g=4] > C.muted[p=0 w=200 h=24] + (G[c={min:160} g=4] > (V[g=2] > C.muted[p=0 w=100% h=120] + C.muted[p=0 w=60% h=14])*4))*3
 // Note: skeleton placeholders carry no Hd by design (skill skeleton-shell
 // exemption) — routed pages supply the h1.
 

package/templates/side-gallery.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Side Gallery",
 	description: "Headline, CTA, and image collage side by side",
+	keywords: ["gallery", "sidebar", "collection", "grid", "art", "images"],
 	category: "marketing",
 };

package/templates/side-gallery.tsx

@@ -1,8 +1,10 @@
 // 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):
 // AR*9 is the live count: SCENE_TILE_ALTS has 9 entries and a bare .map renders
 // all 9, with no slice.
-//   L > LC[p=6] > G[c={min:280} g8 a=center] > (V[g6] > (V[g3] > Tx"AFTER DARK"[t=supporting] + Hd"Make every night"[level=1] + Tx"The smallest rituals"[t=body]) + B.primary"Explore the night" + (V[g4] > D + (H[g6] > (V > Tx"12k+"[t=display-3] + Tx"Night shots"[t=supporting])*3))) + (G[c3 g3] > AR*9)
+//   L[h=fill mw=1400] > LC[p=6] > G[c={min:280} g=8 a=center] > (V[g=6 a=center] > (V[g=3] > Tx"AFTER DARK"[t=supporting] + Hd"Make every night"[level=1] + Tx"The smallest rituals"[t=body]) + B.primary"Explore the night" + (V[g=4] > D + (H[g=6] > (V[g=0] > Tx"12k+"[t=display-3] + Tx"Night shots"[t=supporting])*3))) + (G[c=3 g=3] > AR[ratio=1]*9)
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Button } from "@astryxdesign/core/Button";

package/templates/table-grouped.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Grouped Table",
 	description: "Collapsible status sections with detail panel",
+	keywords: ["table", "grouped", "rows", "sections", "data", "grouping"],
 	category: "data",
 };

package/templates/table-grouped.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=4] > (H[j=between a=center] > Hd"Night-shift issues"[level=1] + B.primary"Raise issue"[opens=#raise-issue]) + (H[g=2 a=center] > PS + Po > B.secondary"View options")) + (LC[p=0] > (Tx"Scroll the table sideways to see every column"[t=supporting] + D) + T[hover] > (TR > THC*7) + (TR > TC*7)*4) + (LP > V[g=4] > (H > Tx[t=supporting] + IB"Close panel") + (V[g=1] > Hd[level=2] + Tx[t=body]) + ML + (D + (V[g=2] > Tx"Labels"[t=label] + (H[g=2] > Tk*2)))) ;; Dlg#raise-issue > (DH"Raise issue" + (LC[p=4] > V[g=4] > TI*4) + (LF > H[j=end g=2] > B.secondary"Cancel" + B.primary"Raise issue"))
+// 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=4] > (H[g=3 a=center wrap] > (SI[fill] > Hd"Night-shift issues"[level=1 t=display-2]) + B.primary"Raise issue"[opens=#raise-issue]) + (H[g=2 a=center] > (SI[fill] > PS"Filter issues…") + (Po > (B.secondary"View options" + (V[g=4] > RL"Group by" > RLI*5))))) + (LC[p=0] > T[hover density=balanced dv=rows] > (TR > THC*7) + ((TR > TC[colSpan=7] > (H[g=2 a=center] > Ic + Tx"In Progress"[t=body] + Bd.neutral"3")) + (TR > TC*7))*4)) + (LP[divider p=4] > V[g=4] > (H[g=2 a=center] > (SI[fill] > Tx[t=supporting]) + B.ghost"Close panel") + (V[g=1] > Hd[level=2] + Tx[t=body]) + (ML > MLI*6) + (D + (V[g=2] > Tx"Labels"[t=label] + (H[g=2] > Tk*2)))) ;; Dlg#raise-issue > L[h=auto] > (DH"Raise issue" + (LC[p=4] > V[g=4] > TI"Title" + SE{Selector}"Status" + SE{Selector}"Priority" + TI"Project") + (LF[divider] > H[g=2 j=end] > B.secondary"Cancel" + B.primary"Raise issue"))
 
 /**
  * Table Grouped — the night-shift issue tracker: a grouped, collapsible issue table with a PowerSearch bar and a resizable detail inspector. (Frame/responsive/container: see XLE header above.)
@@ -1049,7 +1051,7 @@ export default function TableGrouped() {
 					content={
 						<LayoutContent padding={4}>
 							<VStack gap={4}>
-								<TextInput label="Title" placeholder="Issue title" value="" />
+								<TextInput label="Title" placeholder="Issue title" value="" onChange={() => {}} />
 								<Selector
 									label="Status"
 									value="todo"

package/templates/table-page-chart.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Orders with Chart",
 	description: "Revenue area chart over filterable orders",
+	keywords: ["table", "chart", "revenue", "orders", "graph", "data", "metrics"],
 	category: "data",
 };

package/templates/table-page-chart.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[a=center g=2] > (SI[size=fill] > Hd"Matcha Bar"[level=1]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > C[p=4] + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Ceremonial Matcha Latte" + TC"$6" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-15")*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] > (LH[divider p=6] > H[a=center g=2] > (SI[size=fill] > Hd"Matcha Bar"[level=1 t=display-2]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > (V[g=3] > RC + Tx"Daily revenue · Jan 1–15"[t=supporting] + (H[g=2 a=center] > Ic + Tx"Revenue"[t=supporting])) + (T[hover density=balanced dv=rows] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Ceremonial Matcha Latte" + TC"$6" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-15")*30))
 
 /**
  * Matcha Bar — order desk: a daily revenue line over the full order log.  Frame: page header (title + icon actions) | content column (chart, t (Frame/responsive/container: see XLE header above.)

package/templates/table-page-heatmap-status.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Incident Heatmap",
 	description: "Outage heatmap with status table",
+	keywords: ["table", "heatmap", "status", "map", "region", "data"],
 	category: "data",
 };

package/templates/table-page-heatmap-status.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[g2 a=center] > Hd"Status"[level=1] + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.secondary"Refresh") + (LC[p3] > V[g4] > (V[g3] > C[p4] + Tx"Incidents by day and hour"[t=supporting] + (H[g4] > (H[g2] > Tx[t=supporting])*4)) + (T[hover] > (TR > THC"Incident" + THC"Product" + THC"Description" + THC"Started" + THC"Duration" + THC"On-call" + THC"Status" + THC"Date") + (TR > TC"INC-4008" + TC"Business Suite" + TC"Notification delivery delays" + TC"09:15" + TC"ongoing" + TC"Carlos Mendez" + (TC > Tk.red"Ongoing") + TC"2025-01-15")*5))
+// 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] > H[g=2 a=center] > (SI[size=fill] > Hd"Status"[level=1 t=display-2]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.secondary"Refresh") + (LC[p=3] > V[g=4] > (V[g=3] > C[p=4] + (V[g=1] > (H[g=2 a=center] > (H[g=1 a=center] > Sw + Tx"0"[t=supporting])*4) + Tx"Incidents by day and hour · Jan 12–18"[t=supporting])) + (T[hover density=balanced dv=rows] > (TR > THC"Incident" + THC"Product" + THC"Description" + THC"Started" + THC"Duration" + THC"On-call" + THC"Status" + THC"Date") + (TR > TC"INC-4008" + TC"Business Suite" + TC"Notification delivery delays" + TC"09:15" + TC"ongoing" + TC"Carlos Mendez" + (TC > Tk.red"Ongoing") + TC"2025-01-15")*14))
 
 /**
  * Status — the incident heatmap for the week plus the log behind it.

package/templates/table-page-shoe-store-heatmap.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Shoe Store Sales",
 	description: "Revenue chart over shoe order history",
+	keywords: ["table", "heatmap", "store", "retail", "region", "data"],
 	category: "data",
 };

package/templates/table-page-shoe-store-heatmap.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[g2 a=center] > Hd"Midnight Kicks"[level=1] + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p3] > V[g4] > (V[g3] > C[p=4] + Tx"Daily revenue"[t=supporting] + (H[g2 a=center] > Ic + Tx"Revenue"[t=supporting])) + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Air Max 90" + TC"$130" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-12")*5))
+// 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] > H[g=2 a=center] > (SI[size=fill] > Hd"Midnight Kicks"[level=1 t=display-2]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > (V[g=3] > RC + Tx"Daily revenue · Jan 1–15"[t=supporting] + (H[g=2 a=center] > Ic + Tx"Revenue"[t=supporting])) + (T[hover density=balanced dv=rows] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Air Max 90" + TC"$130" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-12")*59))
 
 /**
  * Midnight Kicks — sneaker order desk: a daily revenue line over the order log.  Frame: page header (title + icon actions) | content column (c (Frame/responsive/container: see XLE header above.)

package/templates/table-page.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Searchable Table",
 	description: "Filterable data table with toolbar actions",
+	keywords: ["table", "data", "rows", "listing", "records", "grid"],
 	category: "data",
 };

package/templates/table-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] > H[g=2 a=center] > (SI[fill] > Hd"Familiars"[level=1]) + IB"Filter"[variant=ghost] + IB"Download"[variant=ghost] + B.primary"Add") + (LC[p=3] > V[g=4] > PS + (T[hover] > (TR > THC*3) + (TR > TC*3)*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] > (LH[divider p=6] > H[g=2 a=center] > (SI[fill] > Hd"Familiars"[level=1 t=display-2]) + IB"Filter"[variant=ghost] + IB"Download"[variant=ghost] + B.primary"Add") + (LC[p=3] > V[g=4] > PS"Search familiars…" + (T[hover density=balanced dv=rows] > (TR > THC"Name" + THC"Biography" + THC"Age") + (TR > TC*3)*38))
 
 /**
  * Familiars — the full roster of the crypt's companions, with a PowerSearch field filter bar above one dense table. (Frame/responsive/container: see XLE header above.)

package/templates/table.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Simple Table",
 	description: "Static rows with status badges and actions",
+	keywords: ["table", "data", "rows", "listing", "records", "grid"],
 	category: "data",
 };

package/templates/table.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[a=center j=between] > Hd"Artifacts"[level=1] + B.primary"Add artifact") + (LC > T[hover] > (TR > THC"Name" + THC"Status" + THC"Updated" + THC"Actions") + (TR > TC"Blood Vial" + (TC > SD.success + Tx"Active") + TC"2025-01-15" + (TC > B.secondary"Edit"))*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] > (LH[divider] > H[a=center j=between] > Hd"Artifacts"[level=1] + B.primary"Add artifact") + (LC > T[hover w=auto] > (TR > THC"Name" + THC"Status" + THC"Updated" + THC"Actions") + (TR > TC"Blood Vial" + (TC > H[g=1 a=center] > SD.success + Tx"Active") + TC"2025-01-15" + (TC > B.secondary"Edit"))*3)
 
 import { Button } from "@astryxdesign/core/Button";
 import { HStack, Layout, LayoutContent, LayoutHeader } from "@astryxdesign/core/Layout";

package/templates/tech-report.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Technical Report",
 	description: "Chapter rail, paper walkthrough, and outline",
+	keywords: ["technical report", "whitepaper", "research", "spec", "findings", "paper"],
 	category: "docs",
 };

package/templates/tech-report.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @sideNav=(SN > (SNS"Overview" > (SNI"Abstract"! + SNI"Model at a glance")) + (SNS"Architecture" > (SNI"Causal Encoder-Decoder" + SNI"Compressed Sparse Attention 2" + SNI"Single-Pass mHC" + SNI"Engram, DSpark, FP4")) + (SNS"Infrastructure" > (SNI"Training infrastructure" + SNI"Inference system" + SNI"SWA Bounded Replay")) + (SNS"Training and evaluation" > (SNI"Pre-training" + SNI"Post-training" + SNI"Conclusion")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Abstract"[level=1 t=display-2] + Tx"Chapter 1 of 12"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"The bottleneck"[level=2] + Tx"Body"[t=body] + UL + Cd)*3) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next") + (Tx[t=supporting] > Lk"Checkpoints")) + (LP[!scroll] > 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):
+//   A[cp=0 h=auto @sideNav=(SN > (SNS"Overview" > (SNI"Abstract"! + SNI"Model at a glance")) + (SNS"Architecture" > (SNI"Causal Encoder-Decoder" + SNI"Compressed Sparse Attention 2" + SNI"Single-Pass mHC" + SNI"Engram, DSpark, FP4")) + (SNS"Infrastructure" > (SNI"Training infrastructure" + SNI"Inference system" + SNI"SWA Bounded Replay")) + (SNS"Training and evaluation" > (SNI"Pre-training" + SNI"Post-training" + SNI"Conclusion")))] > L[h=auto mw=960] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx"DeepSeek-V4.1-Flash technical report"[t=supporting]) + Hd"Abstract"[level=1 t=display-2] + Tx"Chapter 1 of 12"[t=supporting]) + Tx"Intro"[t=large] + AR[ratio=16/9] + (V[g=8] > (V[g=3] > Hd"The bottleneck"[level=2] + Tx"Body"[t=body] + UL + Cd)*3) + D + (H[g=3 j=between a=center] > SI[fill] + B.secondary"Model at a glance") + (Tx"Checkpoints and the full report…"[t=supporting] > Lk"huggingface.co/deepseek-ai/DeepSeek-V4.1-Flash")) + (LP[!scroll] > Outline)
 
 import { Icon } from "@astryxdesign/core/Icon";
 import { Link } from "@astryxdesign/core/Link";
@@ -892,9 +894,9 @@ function IndexerScene({ alt }: { alt: string }) {
 						width="276"
 						height="13"
 						rx="2"
-						fill="var(--color-data-categorical-cyan)"
+						fill={"var(--color-data-categorical-cyan, #8BE9FD)"}
 						fillOpacity={0.12}
-						stroke="var(--color-data-categorical-cyan)"
+						stroke={"var(--color-data-categorical-cyan, #8BE9FD)"}
 						strokeOpacity={0.45}
 					/>
 				) : null,
@@ -911,7 +913,7 @@ function IndexerScene({ alt }: { alt: string }) {
 						rx="1"
 						fill={
 							row.picks.includes(cell)
-								? "var(--color-data-categorical-green)"
+								? "var(--color-data-categorical-green, #50FA7B)"
 								: "var(--dracula-comment)"
 						}
 					/>
@@ -935,7 +937,7 @@ function IndexerScene({ alt }: { alt: string }) {
 					width="8"
 					height="8"
 					rx="1"
-					fill="var(--color-data-categorical-cyan)"
+					fill={"var(--color-data-categorical-cyan, #8BE9FD)"}
 				/>
 				<text x="54" y="204">
 					block kept by its top score
@@ -946,7 +948,7 @@ function IndexerScene({ alt }: { alt: string }) {
 					width="8"
 					height="8"
 					rx="1"
-					fill="var(--color-data-categorical-green)"
+					fill={"var(--color-data-categorical-green, #50FA7B)"}
 				/>
 				<text x="244" y="204">
 					position in Top-512
@@ -1465,7 +1467,7 @@ export default function TechReport() {
 			railHref={SELF_HASH}
 			railIcon={<Icon icon={ScrollText} size="sm" />}
 			eyebrow="DeepSeek-V4.1-Flash technical report"
-			badge={(chapter, index, total) =>
+			badge={(_chapter, index, total) =>
 				`Chapter ${index + 1} of ${total} · DeepSeek-AI · research@deepseek.com`
 			}
 			art={(chapterId) => <ChapterArt chapterId={chapterId} />}

package/templates/theme-showcase.template.mjs

@@ -2,5 +2,6 @@ export default {
 	type: "page",
 	name: "Theme Showcase",
 	description: "Store, checkout, chat, and inventory preview surfaces",
+	keywords: ["theme", "tokens", "palette", "typography", "styling", "design system preview"],
 	category: "showcase",
 };