astryx-dracula 0.6.2 → 0.7.0

package/templates/settings.tsx

@@ -40,7 +40,6 @@ import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
 import type { SearchableItem, SearchSource } from "@astryxdesign/core/Typeahead";
 import { Typeahead } from "@astryxdesign/core/Typeahead";
-import { inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
 import { Search } from "lucide-react";
 import { useState } from "react";
 
@@ -216,7 +215,7 @@ function SettingsSection({
 								key={field.key}
 								label={field.label}
 								type={field.inputType}
-								{...(field.autoComplete ? inputAutoComplete(field.autoComplete) : {})}
+								autoComplete={field.autoComplete}
 								value={textValues[field.valueKey]}
 								onChange={(value) => onTextChange(field.valueKey, value)}
 							/>
@@ -254,6 +253,10 @@ export default function SettingsTemplate() {
 	return (
 		<Layout
 			height="fill"
+			// A `fill` Layout is height:100%, which resolves against a definite
+			// ancestor. A standalone page has none, so it anchors the viewport
+			// itself; LayoutContent then scrolls instead of the document.
+			style={{ height: "100dvh" }}
 			contentWidth={1200}
 			header={
 				<LayoutHeader hasDivider padding={6}>

package/templates/shell-nav.tsx

@@ -17,13 +17,14 @@ import { Layout, LayoutContent, LayoutHeader } from "@astryxdesign/core/Layout";
 import { SideNav } from "@astryxdesign/core/SideNav";
 import { Skeleton } from "@astryxdesign/core/Skeleton";
 import { HStack, VStack } from "@astryxdesign/core/Stack";
-import { Text } from "@astryxdesign/core/Text";
+import { Heading, Text } from "@astryxdesign/core/Text";
 import { TopNav } from "@astryxdesign/core/TopNav";
 import type { TreeListItemData } from "@astryxdesign/core/TreeList";
 import { TreeList } from "@astryxdesign/core/TreeList";
 import { createStaticSource } from "@astryxdesign/core/Typeahead";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import { FileText, Folder, Search } from "lucide-react";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 
 const folder = (id: string, children: TreeListItemData[], isExpanded = true): TreeListItemData => ({
 	id,
@@ -157,8 +158,26 @@ export default function ShellNav() {
 	const [isPaletteOpen, setIsPaletteOpen] = useState(false);
 	const searchSource = useMemo(() => createStaticSource(COMMANDS), []);
 
+	// The trigger's tooltip advertises ⌘K, and CommandPalette binds no global
+	// shortcut of its own — without this the promise was only decorative.
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+				event.preventDefault();
+				setIsPaletteOpen(true);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, []);
+
 	return (
 		<>
+			{/* The page is chrome and a skeleton preview, so nothing on screen is a
+			    heading. A top-level heading still has to exist for the document. */}
+			<VisuallyHidden>
+				<Heading level={1}>Shell navigation</Heading>
+			</VisuallyHidden>
 			<AppShell
 				contentPadding={0}
 				topNav={
@@ -224,7 +243,8 @@ export default function ShellNav() {
 					}
 					content={
 						<LayoutContent padding={6}>
-							{/* Skeleton chrome only — the open file supplies the h1. */}
+							{/* Skeleton chrome only. The page-level h1 is the hidden one at the root;
+									the open file is a list row, not a heading. */}
 							<VStack gap={2}>
 								{CODE_LINES.map((line) =>
 									line.width === "0%" ? (

package/templates/shell-side-nav.tsx

@@ -15,7 +15,9 @@ import { NavIcon } from "@astryxdesign/core/NavIcon";
 import { SideNav, SideNavHeading, SideNavItem, SideNavSection } from "@astryxdesign/core/SideNav";
 import { HStack, VStack } from "@astryxdesign/core/Stack";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
+import { Heading } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import { BookOpen, CircleUserRound, Plus, Search, Settings, Sparkles, User } from "lucide-react";
 import { useState } from "react";
 
@@ -61,93 +63,104 @@ export default function ShellSideNav() {
 	const [selectedChat, setSelectedChat] = useState(SELECTED_CHAT);
 	const [draft, setDraft] = useState("");
 	return (
-		<AppShell
-			contentPadding={0}
-			sideNav={
-				<SideNav
-					collapsible
-					resizable={{ defaultWidth: 300, minWidth: 220, maxWidth: 420 }}
-					header={
-						<SideNavHeading
-							heading="Night Owl"
-							icon={<NavIcon icon={<Icon icon={Sparkles} size="sm" />} />}
-							headingHref={SELF_HASH}
-						/>
-					}
-					footer={
-						<SideNavSection title="Account" isHeaderHidden>
-							<SideNavItem label="Settings" icon={Settings} href={SELF_HASH} />
-							<SideNavItem label="Sarah Chen" icon={CircleUserRound} href={SELF_HASH} />
+		<>
+			{/* Chrome and a skeleton preview render no heading of their own. */}
+			<VisuallyHidden>
+				<Heading level={1}>Side navigation shell</Heading>
+			</VisuallyHidden>
+			<AppShell
+				contentPadding={0}
+				sideNav={
+					<SideNav
+						collapsible
+						resizable={{ defaultWidth: 300, minWidth: 220, maxWidth: 420 }}
+						header={
+							<SideNavHeading
+								heading="Night Owl"
+								icon={<NavIcon icon={<Icon icon={Sparkles} size="sm" />} />}
+								headingHref={SELF_HASH}
+							/>
+						}
+						footer={
+							<SideNavSection title="Account" isHeaderHidden>
+								<SideNavItem label="Settings" icon={Settings} href={SELF_HASH} />
+								<SideNavItem label="Sarah Chen" icon={CircleUserRound} href={SELF_HASH} />
+							</SideNavSection>
+						}
+					>
+						<SideNavSection title="Menu" isHeaderHidden>
+							<SideNavItem label="New chat" icon={Plus} href={SELF_HASH} />
+							<SideNavItem label="Search" icon={Search} href={SELF_HASH} />
+							<SideNavItem label="Library" icon={BookOpen} href={SELF_HASH} />
 						</SideNavSection>
-					}
-				>
-					<SideNavSection title="Menu" isHeaderHidden>
-						<SideNavItem label="New chat" icon={Plus} href={SELF_HASH} />
-						<SideNavItem label="Search" icon={Search} href={SELF_HASH} />
-						<SideNavItem label="Library" icon={BookOpen} href={SELF_HASH} />
-					</SideNavSection>
-					<Divider />
-					<SideNavSection title="Workspaces" isHeaderHidden>
-						{WORKSPACES.map((workspace) => (
-							<SideNavItem
-								key={workspace.name}
-								label={workspace.name}
-								icon={workspace.icon}
-								collapsible={{ defaultIsCollapsed: false }}
-							>
-								{/* The nested rows are direct children, not wrapped in a
+						<Divider />
+						<SideNavSection title="Workspaces" isHeaderHidden>
+							{WORKSPACES.map((workspace) => (
+								<SideNavItem
+									key={workspace.name}
+									label={workspace.name}
+									icon={workspace.icon}
+									collapsible={{ defaultIsCollapsed: false }}
+								>
+									{/* 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>
-				</SideNav>
-			}
-		>
-			<Layout
-				height="fill"
-				contentWidth={768}
-				content={
-					<LayoutContent padding={6}>
-						{/* Skeleton chrome only — the routed conversation supplies the h1. */}
-						<VStack gap={5}>
-							{MESSAGES.map((message) => (
-								<HStack key={message.id} hAlign={message.role === "assistant" ? "start" : "end"}>
-									<Card variant="muted" padding={0} width={message.width} height={message.height} />
-								</HStack>
+									{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>
 							))}
-						</VStack>
-					</LayoutContent>
-				}
-				footer={
-					<LayoutFooter>
-						<TextInput
-							label="Message Night Owl"
-							isLabelHidden
-							placeholder="Message Night Owl…"
-							value={draft}
-							onChange={setDraft}
-							width="100%"
-						/>
-					</LayoutFooter>
+						</SideNavSection>
+					</SideNav>
 				}
-			/>
-		</AppShell>
+			>
+				<Layout
+					height="fill"
+					contentWidth={768}
+					content={
+						<LayoutContent padding={6}>
+							{/* Skeleton chrome only — the routed conversation supplies the h1. */}
+							<VStack gap={5}>
+								{MESSAGES.map((message) => (
+									<HStack key={message.id} hAlign={message.role === "assistant" ? "start" : "end"}>
+										<Card
+											variant="muted"
+											padding={0}
+											width={message.width}
+											height={message.height}
+										/>
+									</HStack>
+								))}
+							</VStack>
+						</LayoutContent>
+					}
+					footer={
+						<LayoutFooter>
+							<TextInput
+								label="Message Night Owl"
+								isLabelHidden
+								placeholder="Message Night Owl…"
+								value={draft}
+								onChange={setDraft}
+								width="100%"
+							/>
+						</LayoutFooter>
+					}
+				/>
+			</AppShell>
+		</>
 	);
 }

package/templates/shell-top-nav.tsx

@@ -19,6 +19,7 @@ import { IconButton } from "@astryxdesign/core/IconButton";
 import { NavIcon } from "@astryxdesign/core/NavIcon";
 import { Section } from "@astryxdesign/core/Section";
 import { Stack, VStack } from "@astryxdesign/core/Stack";
+import { Heading } from "@astryxdesign/core/Text";
 import {
 	TopNav,
 	TopNavHeading,
@@ -28,6 +29,7 @@ import {
 	TopNavMegaMenuItem,
 	useTopNavRenderMode,
 } from "@astryxdesign/core/TopNav";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import { House, Search, ShoppingBag, ShoppingCart, Sparkles, SwatchBook, Tag } from "lucide-react";
 
 // Cap + center the page body so wide screens show whitespace gutters.
@@ -45,6 +47,10 @@ const SELF_HASH = "#/templates/shell-top-nav";
 // Three identical shelves; the ids keep React keys stable if they reorder.
 const SHELVES = ["new-in", "featured", "sale"];
 
+// The cart badge and its tooltip are one fact stated twice, so they read the
+// same constant: a hardcoded numeral in each is how they drift apart.
+const CART_ITEM_COUNT = 3;
+
 type MegaItem = { name: string; tagline: string; icon: IconType };
 
 // Shop and Brands each render 4 items — the mega menu's built-in 2-column
@@ -99,7 +105,7 @@ function MegaItems({ items }: { items: MegaItem[] }) {
 		);
 	}
 	return (
-		<Stack style={{ gridColumn: "1 / -1", width: 520 }}>
+		<Stack width={520} style={{ gridColumn: "1 / -1" }}>
 			<Grid columns={2} gap={2}>
 				{items.map((item) => (
 					<TopNavMegaMenuItem
@@ -125,7 +131,7 @@ function MegaFeatured(props: {
 	const isDrawer = useTopNavRenderMode() === "drawer";
 	const isCompact = useMediaQuery("(max-width: 1024px)");
 	return (
-		<Stack style={isDrawer || isCompact ? undefined : { width: 240 }}>
+		<Stack width={isDrawer || isCompact ? undefined : 240}>
 			<TopNavMegaMenuFeaturedCard {...props} />
 		</Stack>
 	);
@@ -137,91 +143,97 @@ export default function ShellTopNav() {
 	// button there restores room for search, checkout, and the toggle.
 	const isCompact = useMediaQuery("(max-width: 640px)");
 	return (
-		<AppShell
-			variant="surface"
-			contentPadding={6}
-			topNav={
-				<TopNav
-					label="Nocturne storefront navigation"
-					heading={
-						<TopNavHeading
-							heading="Nocturne"
-							logo={<NavIcon icon={<Icon icon={ShoppingBag} size="sm" />} />}
-						/>
-					}
-					centerContent={
-						<>
-							<TopNavMegaMenu
-								label="Shop"
-								items={<MegaItems items={SHOP_ITEMS} />}
-								featured={
-									<MegaFeatured
-										title="The Midnight Edit"
-										description="Layered staples in moonlit purples."
-										linkLabel="Shop the edit"
-										linkHref={SELF_HASH}
-									/>
-								}
-							/>
-							<TopNavMegaMenu
-								label="Brands"
-								items={<MegaItems items={BRAND_ITEMS} />}
-								featured={
-									<MegaFeatured
-										title="Meet Studio Mara"
-										description="Modern tailoring, made to last."
-										linkLabel="Discover the label"
-										linkHref={SELF_HASH}
-									/>
-								}
-							/>
-							<TopNavItem label="Sale" href={SELF_HASH} />
-							<TopNavItem label="Service" href={SELF_HASH} />
-						</>
-					}
-					endContent={
-						<>
-							<IconButton
-								label="Search products"
-								tooltip="Search"
-								variant="ghost"
-								icon={<Icon icon={Search} size="sm" />}
+		<>
+			{/* A storefront chrome preview renders no heading of its own. */}
+			<VisuallyHidden>
+				<Heading level={1}>Top navigation shell</Heading>
+			</VisuallyHidden>
+			<AppShell
+				variant="surface"
+				contentPadding={6}
+				topNav={
+					<TopNav
+						label="Nocturne storefront navigation"
+						heading={
+							<TopNavHeading
+								heading="Nocturne"
+								logo={<NavIcon icon={<Icon icon={ShoppingBag} size="sm" />} />}
 							/>
-							{!isCompact && <Button label="Sign in" variant="ghost" />}
-							<Button
-								label="Checkout"
-								variant="primary"
-								tooltip="Cart, 3 items"
-								icon={<Icon icon={ShoppingCart} size="sm" />}
-								endContent={<Badge label={3} />}
-							/>
-						</>
-					}
-				/>
-			}
-		>
-			<Center axis="horizontal">
-				<Section variant="transparent" maxWidth={CONTENT_MAX_WIDTH} width="100%" padding={0}>
-					<VStack gap={10}>
-						{/* Skeleton shelves only — the routed collection supplies the h1. */}
-						<Card variant="muted" padding={0} width="100%" height={360} />
+						}
+						centerContent={
+							<>
+								<TopNavMegaMenu
+									label="Shop"
+									items={<MegaItems items={SHOP_ITEMS} />}
+									featured={
+										<MegaFeatured
+											title="The Midnight Edit"
+											description="Layered staples in moonlit purples."
+											linkLabel="Shop the edit"
+											linkHref={SELF_HASH}
+										/>
+									}
+								/>
+								<TopNavMegaMenu
+									label="Brands"
+									items={<MegaItems items={BRAND_ITEMS} />}
+									featured={
+										<MegaFeatured
+											title="Meet Studio Mara"
+											description="Modern tailoring, made to last."
+											linkLabel="Discover the label"
+											linkHref={SELF_HASH}
+										/>
+									}
+								/>
+								<TopNavItem label="Sale" href={SELF_HASH} />
+								<TopNavItem label="Service" href={SELF_HASH} />
+							</>
+						}
+						endContent={
+							<>
+								<IconButton
+									label="Search products"
+									tooltip="Search"
+									variant="ghost"
+									icon={<Icon icon={Search} size="sm" />}
+								/>
+								{!isCompact && <Button label="Sign in" variant="ghost" />}
+								<Button
+									label="Checkout"
+									variant="primary"
+									tooltip={`Cart, ${CART_ITEM_COUNT} items`}
+									icon={<Icon icon={ShoppingCart} size="sm" />}
+									endContent={<Badge label={CART_ITEM_COUNT} />}
+								/>
+							</>
+						}
+					/>
+				}
+			>
+				<Center axis="horizontal">
+					<Section variant="transparent" maxWidth={CONTENT_MAX_WIDTH} width="100%" padding={0}>
+						<VStack gap={10}>
+							{/* Skeleton shelves only — the routed collection supplies the h1. */}
+							<Card variant="muted" padding={0} width="100%" height={360} />
 
-						{SHELVES.map((shelf) => (
-							<VStack key={shelf} gap={4}>
-								<Card variant="muted" padding={0} width={200} height={24} />
-								<Grid columns={{ minWidth: 160, repeat: "fit" }} gap={4}>
-									{CATEGORY_TILES.map((tile) => (
-										<VStack key={tile} gap={2}>
-											<Card variant="muted" padding={0} width="100%" height={120} />
-											<Card variant="muted" padding={0} width="60%" height={14} />
-										</VStack>
-									))}
-								</Grid>
-							</VStack>
-						))}
-					</VStack>
-				</Section>
-			</Center>
-		</AppShell>
+							{SHELVES.map((shelf) => (
+								<VStack key={shelf} gap={4}>
+									<Card variant="muted" padding={0} width={200} height={24} />
+									<Grid columns={{ minWidth: 160, repeat: "fit" }} gap={4}>
+										{CATEGORY_TILES.map((tile) => (
+											<VStack key={tile} gap={2}>
+												<Card variant="muted" padding={0} width="100%" height={120} />
+												<Card variant="muted" padding={0} width="60%" height={14} />
+											</VStack>
+										))}
+									</Grid>
+								</VStack>
+							))}
+						</VStack>
+					</Section>
+				</Center>
+			</AppShell>
+		</>
 	);
 }