astryx-dracula 0.6.2 → 0.7.0

package/templates/gallery-hero.tsx

@@ -67,9 +67,15 @@ function BatFlightScene() {
 }
 
 const SCENES = [
-	{ alt: "Moonlit castle on midnight hills", scene: <SceneCastle variant="card" /> },
-	{ alt: "Harvest moon over midnight pines", scene: <SceneCastle variant="tall" /> },
-	{ alt: "Bats crossing a moonless night sky", scene: <BatFlightScene /> },
+	{
+		alt: "Moonlit castle on midnight hills",
+		render: (label: string) => <SceneCastle variant="card" label={label} />,
+	},
+	{
+		alt: "Harvest moon over midnight pines",
+		render: (label: string) => <SceneCastle variant="tall" label={label} />,
+	},
+	{ alt: "Bats crossing a moonless night sky", render: () => <BatFlightScene /> },
 ];
 
 export default function GalleryHero() {
@@ -100,7 +106,7 @@ export default function GalleryHero() {
 						<Grid columns={{ minWidth: 200, repeat: "fit" }} gap={4}>
 							{SCENES.map((item) => (
 								<AspectRatio key={item.alt} ratio={4 / 5} style={galleryImageClip}>
-									{item.scene}
+									{item.render(item.alt)}
 								</AspectRatio>
 							))}
 						</Grid>

package/templates/ide.tsx

@@ -2,15 +2,23 @@
 // 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)))))
+//   L[h=fill] > (LH[divider p=4 narrow] > (H[g=2] > B.secondary"Browse files" + B.secondary"File properties")) + 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))))) ;; Drawer"File tree"[side=start narrow] > (L[h=fill] > (DrawerHeader"File tree" + LC[p=4] > V[g=2] > TI"Search the night" + TrL)) + Drawer"File properties"[side=end narrow] > (L[h=fill] > (DrawerHeader"File properties" + LC[p=4] > V[g=3] > (SG > SGI"Properties" + SGI"History" + ML + (V[g=2] > B.secondary*3 + UL))))
 
 import { Button } from "@astryxdesign/core/Button";
 import { Center } from "@astryxdesign/core/Center";
 import { CodeBlock } from "@astryxdesign/core/CodeBlock";
+import { Drawer, DrawerHeader } from "@astryxdesign/core/Drawer";
 import { EmptyState } from "@astryxdesign/core/EmptyState";
 import { useMediaQuery } from "@astryxdesign/core/hooks";
 import { Icon } from "@astryxdesign/core/Icon";
-import { Layout, LayoutContent, LayoutPanel, Stack, StackItem } from "@astryxdesign/core/Layout";
+import {
+	Layout,
+	LayoutContent,
+	LayoutHeader,
+	LayoutPanel,
+	Stack,
+	StackItem,
+} from "@astryxdesign/core/Layout";
 import { List, ListItem } from "@astryxdesign/core/List";
 import { MetadataList, MetadataListItem } from "@astryxdesign/core/MetadataList";
 import { ResizeHandle, useResizable } from "@astryxdesign/core/Resizable";
@@ -84,6 +92,13 @@ const codeBlockFlush: CSSProperties = {
 	borderRadius: 0,
 };
 
+// Three nested `Layout height="fill"`s resolve against their parent's definite
+// height, and a host's <html>/<body> set none — so without this the outermost
+// one computes to auto and the document scrolls instead of the editor panes.
+// 100dvh is absolute and needs no ancestor; minHeight: '100%' would compute to
+// 0 here and look like a fix while doing nothing.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
 const EDITOR_CODE = `import {useState, useCallback} from 'react';
 import {Button} from '@astryxdesign/core/Button';
 import {Text} from '@astryxdesign/core/Text';
@@ -213,7 +228,20 @@ export default function IdeWorkspace() {
 	const [activeTermTab, setActiveTermTab] = useState("terminal");
 	const [activePropertiesTab, setActivePropertiesTab] = useState("properties");
 	const [query, setQuery] = useState("");
-	const fileTree = useMemo(() => buildFileTree(setActiveFile), []);
+	// Below 768 there is no room for a file tree and a properties rail beside
+	// the editor, so each panel becomes a Drawer opened from the header.
+	const [isFileTreeOpen, setFileTreeOpen] = useState(false);
+	const [isPropertiesOpen, setPropertiesOpen] = useState(false);
+	const fileTree = useMemo(
+		() =>
+			buildFileTree((name) => {
+				setActiveFile(name);
+				// A drawer covers the editor on a phone, so picking a file closes
+				// it; on the desktop column the setter is already false.
+				setFileTreeOpen(false);
+			}),
+		[],
+	);
 	const visibleTree = useMemo(() => {
 		const q = query.trim().toLowerCase();
 		return q ? filterFileTree(fileTree, q) : fileTree;
@@ -241,15 +269,127 @@ export default function IdeWorkspace() {
 		defaultSize: 300,
 		minSize: 80,
 		maxSize: 520,
+		// Must match the ResizeHandle's `direction`; the hook defaults to
+		// horizontal, and a mismatch makes core warn and picks the wrong
+		// percentage basis.
+		direction: "vertical",
 		collapsible: true,
 		collapsedSize: 40,
 	});
 
 	const isMobile = useMediaQuery("(max-width: 768px)");
 
+	// One render of each panel's body, shared by the desktop column and the
+	// narrow-viewport Drawer so the two cannot drift apart.
+	const fileExplorer = (
+		<Stack direction="vertical" style={styles.fileExplorer} gap={2}>
+			<TextInput
+				label="Search files"
+				isLabelHidden
+				value={query}
+				onChange={setQuery}
+				placeholder="Search the night"
+				size="md"
+				startIcon={Search}
+				hasClear
+			/>
+			{visibleTree.length > 0 ? (
+				<TreeList items={visibleTree} density="compact" />
+			) : (
+				<EmptyState
+					title="No files match"
+					description={`Nothing in the night answers to "${query.trim()}".`}
+					isCompact
+				/>
+			)}
+		</Stack>
+	);
+
+	const propertiesBody = (
+		<Stack direction="vertical" gap={3} style={styles.propertiesPanel}>
+			<SegmentedControl
+				label="Properties panel sections"
+				value={activePropertiesTab}
+				onChange={setActivePropertiesTab}
+				size="sm"
+				layout="fill"
+			>
+				<SegmentedControlItem label="Properties" value="properties" />
+				<SegmentedControlItem label="History" value="history" />
+			</SegmentedControl>
+			{activePropertiesTab === "properties" ? (
+				<Stack direction="vertical" gap={3} style={styles.propertiesContent}>
+					<Stack direction="vertical" gap={1}>
+						<Heading level={3} maxLines={1}>
+							{activeFile}
+						</Heading>
+						<Text color="secondary" type="supporting" maxLines={1}>
+							src/components/{activeFile}
+						</Text>
+					</Stack>
+					<MetadataList style={styles.metadataCompact}>
+						{PROPERTIES.map((prop) => (
+							<MetadataListItem key={prop.label} label={prop.label}>
+								{prop.value}
+							</MetadataListItem>
+						))}
+					</MetadataList>
+					<Stack direction="vertical" gap={2} style={styles.propertyActions}>
+						<Button label="Format Document" size="sm" variant="secondary" />
+						<Button label="Go to Definition" size="sm" variant="secondary" />
+						<Button label="Find References" size="sm" variant="secondary" />
+					</Stack>
+				</Stack>
+			) : (
+				<Stack direction="vertical" gap={1}>
+					<List>
+						{HISTORY_ITEMS.map((item) => (
+							<ListItem
+								key={item.label}
+								label={item.label}
+								endContent={
+									<Text type="supporting" color="secondary" maxLines={1} hasTabularNumbers>
+										{item.time}
+									</Text>
+								}
+								startContent={<StatusDot variant="neutral" label="Timeline marker" />}
+							/>
+						))}
+					</List>
+				</Stack>
+			)}
+		</Stack>
+	);
+
 	return (
 		<Layout
 			height="fill"
+			style={pageStyle}
+			// Below 768 the two side panels have no room beside the editor; these
+			// are the only controls that reach them there. Desktop keeps the
+			// resize handles and omits the header entirely.
+			header={
+				isMobile ? (
+					<LayoutHeader hasDivider padding={4}>
+						<Stack direction="horizontal" gap={2} vAlign="center" wrap="wrap">
+							<Button
+								label="Browse files"
+								variant="secondary"
+								aria-haspopup="dialog"
+								aria-expanded={isFileTreeOpen}
+								onClick={() => setFileTreeOpen(true)}
+							/>
+							<Button
+								label="File properties"
+								variant="secondary"
+								aria-haspopup="dialog"
+								aria-expanded={isPropertiesOpen}
+								onClick={() => setPropertiesOpen(true)}
+							/>
+						</Stack>
+					</LayoutHeader>
+				) : undefined
+			}
 			content={
 				<LayoutContent padding={0}>
 					<VisuallyHidden as="h1">Code editor</VisuallyHidden>
@@ -260,27 +400,7 @@ export default function IdeWorkspace() {
 								<>
 									{!startPanel.isCollapsed && (
 										<LayoutPanel width={startPanel.size} hasDivider={false} padding={4}>
-											<Stack direction="vertical" style={styles.fileExplorer} gap={2}>
-												<TextInput
-													label="Search files"
-													isLabelHidden
-													value={query}
-													onChange={setQuery}
-													placeholder="Search the night"
-													size="md"
-													startIcon={Search}
-													hasClear
-												/>
-												{visibleTree.length > 0 ? (
-													<TreeList items={visibleTree} density="compact" />
-												) : (
-													<EmptyState
-														title="No files match"
-														description={`Nothing in the night answers to "${query.trim()}".`}
-														isCompact
-													/>
-												)}
-											</Stack>
+											{fileExplorer}
 										</LayoutPanel>
 									)}
 									<ResizeHandle
@@ -399,78 +519,7 @@ export default function IdeWorkspace() {
 												/>
 												{!endPanel.isCollapsed && (
 													<LayoutPanel width={endPanel.size} hasDivider={false} padding={4}>
-														<Stack direction="vertical" gap={3} style={styles.propertiesPanel}>
-															<SegmentedControl
-																label="Properties panel sections"
-																value={activePropertiesTab}
-																onChange={setActivePropertiesTab}
-																size="sm"
-																layout="fill"
-															>
-																<SegmentedControlItem label="Properties" value="properties" />
-																<SegmentedControlItem label="History" value="history" />
-															</SegmentedControl>
-															{activePropertiesTab === "properties" ? (
-																<Stack
-																	direction="vertical"
-																	gap={3}
-																	style={styles.propertiesContent}
-																>
-																	<Stack direction="vertical" gap={1}>
-																		<Heading level={3} maxLines={1}>
-																			{activeFile}
-																		</Heading>
-																		<Text color="secondary" type="supporting" maxLines={1}>
-																			src/components/{activeFile}
-																		</Text>
-																	</Stack>
-																	<MetadataList style={styles.metadataCompact}>
-																		{PROPERTIES.map((prop) => (
-																			<MetadataListItem key={prop.label} label={prop.label}>
-																				{prop.value}
-																			</MetadataListItem>
-																		))}
-																	</MetadataList>
-																	<Stack
-																		direction="vertical"
-																		gap={2}
-																		style={styles.propertyActions}
-																	>
-																		<Button label="Format Document" size="sm" variant="secondary" />
-																		<Button
-																			label="Go to Definition"
-																			size="sm"
-																			variant="secondary"
-																		/>
-																		<Button label="Find References" size="sm" variant="secondary" />
-																	</Stack>
-																</Stack>
-															) : (
-																<Stack direction="vertical" gap={1}>
-																	<List>
-																		{HISTORY_ITEMS.map((item) => (
-																			<ListItem
-																				key={item.label}
-																				label={item.label}
-																				endContent={
-																					<Text
-																						type="supporting"
-																						color="secondary"
-																						maxLines={1}
-																						hasTabularNumbers
-																					>
-																						{item.time}
-																					</Text>
-																				}
-																				startContent={
-																					<StatusDot variant="neutral" label="Timeline marker" />
-																				}
-																			/>
-																		))}
-																	</List>
-																</Stack>
-															)}
-														</Stack>
+														{propertiesBody}
 													</LayoutPanel>
 												)}
 											</>
@@ -480,6 +529,38 @@ export default function IdeWorkspace() {
 							</LayoutContent>
 						}
 					/>
+					{/* Below 768 the file tree and the properties rail are Drawers
+					    opened from the header: as columns they would leave the
+					    editor nothing. Both are gated on `isMobile`, so widening
+					    the viewport restores the desktop panes without leaving an
+					    overlay behind. DrawerHeader draws the close button only
+					    when it is given onOpenChange. */}
+					<Drawer
+						side="start"
+						label="File tree"
+						isOpen={isMobile && isFileTreeOpen}
+						onOpenChange={setFileTreeOpen}
+						width={startPanel.size}
+					>
+						<Layout
+							height="fill"
+							header={<DrawerHeader title="File tree" onOpenChange={setFileTreeOpen} />}
+							content={<LayoutContent padding={4}>{fileExplorer}</LayoutContent>}
+						/>
+					</Drawer>
+					<Drawer
+						side="end"
+						label="File properties"
+						isOpen={isMobile && isPropertiesOpen}
+						onOpenChange={setPropertiesOpen}
+						width={endPanel.size}
+					>
+						<Layout
+							height="fill"
+							header={<DrawerHeader title="File properties" onOpenChange={setPropertiesOpen} />}
+							content={<LayoutContent padding={4}>{propertiesBody}</LayoutContent>}
+						/>
+					</Drawer>
 				</LayoutContent>
 			}
 		/>

package/templates/incident-console.tsx

@@ -47,6 +47,12 @@ import { BellRing, Plus } from "lucide-react";
 import { type CSSProperties, useMemo, useState } from "react";
 
 const styles: Record<string, CSSProperties> = {
+	// The page's definite height. `Layout height="fill"` is height:100%, which
+	// resolves to auto against a content-sized host and hands the scroll to the
+	// document; 100dvh is absolute and needs no ancestor.
+	page: {
+		height: "100dvh",
+	},
 	contentFill: {
 		height: "100%",
 		minHeight: 0,
@@ -56,7 +62,12 @@ const styles: Record<string, CSSProperties> = {
 	},
 	groupHeader: {
 		padding: "var(--spacing-2) var(--spacing-3)",
-		backgroundColor: "var(--color-background-muted)",
+		// A band sitting over its own rows, so it lifts off the page surface.
+		// It used to lean on --color-background-muted, which held Selection
+		// #44475A; that token is Background Dark #21222C now, a RECESS, and a
+		// header painted in it reads as a trough between the rows instead of a
+		// band above them.
+		backgroundColor: "var(--color-background-surface)",
 	},
 	// All FOUR edges, not block-only. With `overflowY: auto` and no `overflowX`,
 	// the inline axis computes to `auto` too, so this box clips horizontally as
@@ -360,10 +371,8 @@ function IncidentRows({
 			{groups.map((group) => (
 				<VStack gap={0} key={group.status}>
 					<HStack gap={2} vAlign="center" style={styles.groupHeader}>
-						{/* Primary, not secondary: --color-text-secondary #9AA1BC on
-                --color-background-muted #44475A is 3.57:1, under the 4.5:1
-                floor. The group heading is the string this sidebar is scanned
-                for. Hierarchy comes from the two type roles (principle 6),
+						{/* The group heading is the string this sidebar is scanned
+                for, so hierarchy comes from the two type roles (principle 6),
                 not from dimming the count. */}
 						<Text type="label">{STATUS[group.status].label}</Text>
 						<Text type="supporting" hasTabularNumbers>
@@ -547,6 +556,7 @@ export default function IncidentConsole() {
 		<>
 			<Layout
 				height="fill"
+				style={styles.page}
 				header={
 					<LayoutHeader hasDivider padding={6}>
 						{isNarrow ? (

package/templates/kanban-board.tsx

@@ -2,7 +2,7 @@
 // XLE (canonical structure of the tree below; the CLI had no XLE validator
 // after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
 // human drift check — update it with the file, never alone):
-//   S[h=100dvh] > (L[h=fill] > (LH[divider p=6] > Tbar[g=2] > (Hd"Sprint Board"[level=1 t=display-2] + Bd.neutral"8") + (H[g=2 wrap] > SE"Sprint" + D.strong + (H[g=1 a=center wrap] > IB"Sort" + IB"Filter" + IB"Search") + B.primary"Add task")) + (LC[p=0 !scroll] > G[c={min:280,max:4} g=4] > (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"To-do"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In progress"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In review"[level=2] + (Po > IB)) + Tx"1") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx))) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"Done"[level=2] + (Po > IB)) + Tx"3") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*3))) + (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)
+//   S[h=100dvh] > VH + (L[h=fill] > (LH[divider p=6] > Tbar[g=2] > (Hd"Sprint Board"[level=1 t=display-2] + Bd.neutral"8") + (H[g=2 wrap] > SE"Sprint" + D.strong + (H[g=1 a=center wrap] > IB"Sort" + IB"Filter" + IB"Search") + B.primary"Add task")) + (LC[p=0 !scroll] > G[c={min:280,max:4} g=4] > (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"To-do"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In progress"[level=2] + (Po > IB)) + Tx"2") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2)) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"In review"[level=2] + (Po > IB)) + Tx"1") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx))) + (C.muted[p=0] > L[h=fill] > (LH[divider p=3] > H[j=between a=center] > (H[g=1 a=center] > SD + Hd"Done"[level=2] + (Po > IB)) + Tx"3") + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*3))) + (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)
 
 import { Badge } from "@astryxdesign/core/Badge";
 import { Button } from "@astryxdesign/core/Button";
@@ -21,6 +21,7 @@ import { StatusDot } from "@astryxdesign/core/StatusDot";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { Token } from "@astryxdesign/core/Token";
 import { Toolbar } from "@astryxdesign/core/Toolbar";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import {
 	ArrowUpDown,
 	CircleCheck,
@@ -312,6 +313,10 @@ function BoardCard({
 	// focused card across columns. The pointer DnD below stays quarantined and
 	// untouched; this only reuses its moveItem commit.
 	const onKeyDown = (e: ReactKeyboardEvent) => {
+		// Let the card's own controls (the actions menu) keep arrow keys.
+		if ((e.target as HTMLElement).closest('button, [role="menuitem"], [role="menu"]')) {
+			return;
+		}
 		const at = COLUMNS.findIndex((c) => c.id === item.column);
 		const to =
 			e.key === "ArrowRight"
@@ -333,7 +338,11 @@ function BoardCard({
 			// drag clone floats above the board with the high shadow token instead.
 			style={{ cursor: "grab", userSelect: "none", touchAction: "none" }}
 			tabIndex={0}
-			role="button"
+			// Not `button`: the card contains its own actions menu and a heading,
+			// and `button` makes every descendant presentational (ARIA
+			// "children presentational"), hiding both from assistive tech. The
+			// card is a member of the column list that happens to be focusable.
+			role="listitem"
 			aria-label={`${item.title}. In ${COLUMNS.find((c) => c.id === item.column)?.title}. Press left or right arrow to move across columns.`}
 			onPointerDown={(e) => onPointerDown(e, item.id)}
 			onKeyDown={onKeyDown}
@@ -357,7 +366,15 @@ function BoardColumn({
 	children: ReactNode;
 }) {
 	return (
-		<Card variant="muted" padding={0} style={{ minWidth: 0, height: "100%" }}>
+		<Card
+			variant="muted"
+			padding={0}
+			style={{ minWidth: 0, height: "100%" }}
+			// Each column is a landmark: the board region alone announces four
+			// undifferentiated lists of cards.
+			role="region"
+			aria-label={`${meta.title} column`}
+		>
 			<Layout
 				height="fill"
 				header={
@@ -421,6 +438,9 @@ export default function KanbanBoard() {
 	const [items, setItems] = useState<WorkItem[]>(INITIAL_ITEMS);
 	const [sprint, setSprint] = useState("003");
 	const [drag, setDrag] = useState<DragState | null>(null);
+	// Polite announcement for moves that have no visual follow (keyboard arrows,
+	// menu "Move to …"). Pointer drags show their own landing ghost.
+	const [announcement, setAnnouncement] = useState("");
 
 	// Live element registries for pointer hit-testing (kept out of render state).
 	const columnEls = useRef(new Map<ColumnId, HTMLElement>());
@@ -453,7 +473,18 @@ export default function KanbanBoard() {
 	const itemsByColumn = groupByColumn(items);
 
 	const moveItem = (id: string, to: ColumnId) => {
+		// A cross-column move remounts the card inside the destination list, so
+		// focus would fall to <body> and the next arrow press would be lost.
+		const hadFocus = cardEls.current.get(id)?.contains(document.activeElement) ?? false;
+		const moved = items.find((item) => item.id === id);
+		const column = COLUMNS.find((meta) => meta.id === to);
 		setItems((prev) => prev.map((item) => (item.id === id ? { ...item, column: to } : item)));
+		if (moved && column) {
+			setAnnouncement(`Moved ${moved.title} to ${column.title}`);
+		}
+		if (hadFocus) {
+			requestAnimationFrame(() => cardEls.current.get(id)?.focus());
+		}
 	};
 
 	// Resolve the pointer position to a column + insertion index, ignoring the
@@ -621,6 +652,8 @@ export default function KanbanBoard() {
 				<VStack
 					key="drag-ghost"
 					// Placeholder marking the landing slot; matches the dragged card's height.
+					// Hidden from assistive tech: it is a visual target, not a list member.
+					aria-hidden="true"
 					style={{
 						height: ghostTarget.height,
 						borderRadius: "var(--radius-element)",
@@ -630,11 +663,16 @@ export default function KanbanBoard() {
 			);
 		}
 
-		return <VStack gap={2}>{nodes}</VStack>;
+		return (
+			<VStack gap={2} role="list">
+				{nodes}
+			</VStack>
+		);
 	};
 
 	return (
 		<Section height="100dvh">
+			<VisuallyHidden role="status">{announcement}</VisuallyHidden>
 			<Layout
 				height="fill"
 				header={
@@ -718,6 +756,10 @@ export default function KanbanBoard() {
 				<Card
 					padding={3}
 					elevation="none"
+					// Visual proxy for the pointer drag: its contents duplicate the
+					// real card (including an actions menu), so keep it out of the
+					// accessibility tree and the tab order.
+					inert
 					style={{
 						position: "fixed",
 						insetBlockStart: 0,

package/templates/library.tsx

@@ -2,7 +2,7 @@
 // XLE (canonical structure of the tree below; the CLI had no XLE validator
 // after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
 // human drift check — update it with the file, never alone):
-//   L[h=fill] > (LH[divider p=6] > (V[g=1] > Hd"Library"[level=1] + Tx"30 components across 5 categories"[t=body])) + (LC[p=6] > V[g=8] > (V[g=4] > TI"Search" + (H[g=3 a=center] > (SI[fill] > V > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms" + Tg"Navigation" + Tg"Feedback" + Tg"Data") + DD"A-Z")) + (V[g=8] > (D + (V[g=8] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"6 items"[t=body]) + (G[c={min:280} g=4] > (C[p=0] > AR[ratio=16/9] > Scene{SceneTile}) + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=body]))*6))*5))
+//   L[h=fill] > (LH[divider p=6] > (V[g=1] > Hd"Library"[level=1 t=display-2] + Tx"{ITEMS.length} components across {CATEGORIES.length - 1} categories"[t=body])) + (LC[p=6] > V[g=8] > (V[g=4] > TI"Search" + (H[g=3 a=center] > (SI[fill] > V > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms" + Tg"Navigation" + Tg"Feedback" + Tg"Data") + DD"A-Z")) + (V[g=8] > (D + (V[g=8] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"{section.items.length} items"[t=body]) + (G[c={min:280} g=4] > (C[p=0] > AR[ratio=16/9] > Scene{SceneTile}) + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=body]))*{section.items.length}))*{CATEGORIES.length - 1}))
 
 /**
  * Library — a browsable grid of design-system entries grouped by category.  Frame: page header (title) | content column (search, filter row, s (Frame/responsive/container: see XLE header above.)
@@ -26,6 +26,7 @@ import { ToggleButton, ToggleButtonGroup } from "@astryxdesign/core/ToggleButton
 import type { SceneHue } from "astryx-dracula/shared/scene-hues";
 import { SceneTile } from "astryx-dracula/shared/scene-tile";
 import { Search } from "lucide-react";
+import type { CSSProperties } from "react";
 import { useState } from "react";
 
 interface LibraryItem {
@@ -285,6 +286,11 @@ function LibraryCard({ item }: { item: LibraryItem }) {
 	);
 }
 
+// Definite ancestor for `height="fill"`: 100dvh, not minHeight: '100%' (a
+// percentage min-height against an indefinite block computes to 0 — CSS 2.1
+// 10.5). Templates ship standalone, so the page owns this, not the host.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
 export default function LibraryGrid() {
 	const [activeTab, setActiveTab] = useState("All");
 	const [search, setSearch] = useState("");
@@ -329,12 +335,15 @@ export default function LibraryGrid() {
 	return (
 		<Layout
 			height="fill"
+			style={pageStyle}
 			header={
 				<LayoutHeader hasDivider padding={6}>
 					<VStack gap={1}>
-						<Heading level={1}>Library</Heading>
+						<Heading level={1} type="display-2">
+							Library
+						</Heading>
 						<Text type="body" color="secondary">
-							30 components across 5 categories
+							{ITEMS.length} components across {CATEGORIES.length - 1} categories
 						</Text>
 					</VStack>
 				</LayoutHeader>

package/templates/login-split.tsx

@@ -15,7 +15,7 @@ import { Link } from "@astryxdesign/core/Link";
 import { Section } from "@astryxdesign/core/Section";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
-import { authPageStyle, inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
+import { authPageStyle } from "astryx-dracula/shared/auth-chrome-config";
 import {
 	AUTH_BRAND_NAME,
 	AUTH_EMAIL_PLACEHOLDER,
@@ -136,7 +136,7 @@ export default function LoginSplit() {
 														label="Email"
 														isLabelHidden
 														type="email"
-														{...inputAutoComplete("email")}
+														autoComplete="email"
 														placeholder={AUTH_EMAIL_PLACEHOLDER}
 														value={email}
 														onChange={(v: string) => {
@@ -153,7 +153,7 @@ export default function LoginSplit() {
 															isLabelHidden
 															placeholder={AUTH_PASSWORD_PLACEHOLDER}
 															type="password"
-															{...inputAutoComplete("current-password")}
+															autoComplete="current-password"
 															value={password}
 															onChange={(v: string) => {
 																setPassword(v);