@honeydeck/honeydeck 0.1.2 → 0.3.0

package/docs/slidev-migration.md

@@ -34,7 +34,7 @@ The skill guides an agent through the common Slidev-to-Honeydeck mapping:
 | `pages/*.md` with `src:` includes | imported `.mdx` slide groups |
 | `public/**` | `public/**` |
 | `components/*.vue` | React `components/*.tsx` |
-| `layouts/*.vue` or Slidev themes | Honeydeck layouts, layout maps, or kits |
+| `layouts/*.vue` or Slidev themes | Honeydeck layouts, layout maps, React components, and CSS |
 | `<v-click>` / `<v-clicks>` | `<Reveal>` / `<RevealGroup>` |
 | trailing note comments | `<Notes>` |
 | `slidev`, `slidev build`, `slidev export` | `honeydeck dev`, `honeydeck build`, `honeydeck pdf` |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@honeydeck/honeydeck",
-	"version": "0.1.2",
+	"version": "0.3.0",
 	"description": "MDX and React-based presentation framework for AI-friendly slide decks.",
 	"license": "MIT",
 	"publishConfig": {
@@ -89,7 +89,6 @@
 		"#vite-plugin/*": "./src/vite-plugin/*"
 	},
 	"scripts": {
-		"build": "npm run typecheck",
 		"dev": "node --import tsx ./src/cli/index.ts dev --deck src/cli/templates/starter/deck.mdx",
 		"dev:init": "node --import tsx ./src/cli/index.ts dev --deck src/cli/templates/starter/deck.mdx",
 		"format": "biome check --write",

package/skills/SPEC.md

@@ -6,16 +6,17 @@
 
 Honeydeck ships installable agent skills:
 
-- `skills/honeydeck/SKILL.md` (`honeydeck`) helps AI agents use Honeydeck correctly: MDX entrypoint, deck frontmatter, exact `---` slide separators, slide frontmatter, built-in layouts, explicit theme/CSS imports, presenter notes, steps/reveals, code blocks, PDF export, custom React components, kits, canonical package docs, and runtime reference pages.
+- `skills/honeydeck/SKILL.md` (`honeydeck`) helps AI agents use Honeydeck correctly: MDX entrypoint, deck frontmatter, exact `---` slide separators, slide frontmatter, built-in layouts, explicit theme/CSS imports, presenter notes, steps/reveals, code blocks, PDF export, custom React components, customization, canonical package docs, and runtime reference pages.
 - `skills/presentation-writing/SKILL.md` (`presentation-writing`) gives opinionated guidance for writing great slides and delivering good presentations: audience/goal/duration discovery, storyline, one idea per slide, strong headlines, sparse visuals, speaker notes, timing, narrative flow, progressive disclosure, and review heuristics.
 - `skills/slidev-migration/SKILL.md` (`slidev-migration`) helps AI agents migrate presentations from Slidev/sli.dev to Honeydeck: initialize a Honeydeck project when needed, convert `slides.md` to `deck.mdx`, map Slidev frontmatter/layouts/assets/notes/reveals/scripts to Honeydeck equivalents, and flag Vue/theme features that need manual React follow-up.
 
 Expected behavior:
 
 - All skills are discoverable by the `skills` CLI when users run `npx skills add <honeydeck-repo-url> --copy` or explicit `npx skills add <honeydeck-repo-url> --copy --skill honeydeck` / `--skill presentation-writing` / `--skill slidev-migration`.
-- The `honeydeck` skill instructs agents to use Honeydeck documentation (`Readme.md` for package overview, `docs/getting-started.md` for first-run guidance, package/root `SPEC.md`, linked colocated `SPEC.md` files, `docs/next-steps.md`, `docs/slides.md`, `docs/steps-and-reveals.md`, `docs/kits.md`, `docs/configuration.md`, and related docs) as the source of truth when available.
+- The `honeydeck` skill instructs agents to use Honeydeck documentation (`Readme.md` for package overview, `docs/getting-started.md` for first-run guidance, package/root `SPEC.md`, linked colocated `SPEC.md` files, `docs/deeper-dive.md`, `docs/slides.md`, `docs/steps-and-reveals.md`, `docs/customization.md`, `docs/configuration.md`, and related docs) as the source of truth when available.
 - The `honeydeck` skill documents a local docs discovery order: current project's `node_modules/@honeydeck/honeydeck`, monorepo checkout `packages/honeydeck`, package-root checkout docs, then the public docs URL.
 - The `presentation-writing` skill is framework-agnostic enough to help with presentation quality, while still working well alongside the Honeydeck skill.
 - The `slidev-migration` skill instructs agents to inspect existing Slidev projects, preserve source files until the user approves cleanup, initialize or merge Honeydeck starter files, migrate common Slidev syntax to Honeydeck MDX/React, and document unsupported or approximated features.
 - `honeydeck init` should offer to open the interactive skills installer for the generated project and make clear that accepting runs `npx skills add`.
 - `honeydeck init` and `honeydeck skill` should delegate bundled skill selection, scope selection, and agent selection to the same `npx skills add <honeydeck-package-source> --copy` flow.
+- `docs/skills.md` should document why and how to install the bundled skills, list the `honeydeck`, `presentation-writing`, and `slidev-migration` skills, and link to the Slidev migration guide for migration-specific details.

package/skills/honeydeck/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: honeydeck
-description: Help users create, edit, debug, and export Honeydeck MDX presentations. Use for Honeydeck syntax, deck.mdx structure, layouts, frontmatter, steps/reveals, presenter notes, code blocks, custom React components, kits/themes, CLI commands, dev preview, build, or PDF export.
+description: Help users create, edit, debug, and export Honeydeck MDX presentations. Use for Honeydeck syntax, deck.mdx structure, layouts, frontmatter, steps/reveals, presenter notes, code blocks, custom React components, themes, CLI commands, dev preview, build, or PDF export.
 ---
 
 # Honeydeck
@@ -22,11 +22,11 @@ Important docs:
 
 - `Readme.md` for the compact package overview and documentation index
 - `docs/getting-started.md` for quick start and first-run orientation
-- `docs/next-steps.md` for CLI details, feature overview, architecture, exports, and agent skills
+- `docs/deeper-dive.md` for CLI details, feature overview, architecture, exports, and agent skills
 - root/package `SPEC.md` and linked colocated `SPEC.md` files for expected behavior
 - `docs/slides.md` for deck structure, slide separators, and multi-file decks
 - `docs/steps-and-reveals.md` for step-by-step reveals and code steps
-- `docs/kits.md` and `docs/kit-authoring.md` for themes, layouts, and reusable kits
+- `docs/customization.md` for themes, layouts, custom React components, layout maps, demos, and design tokens
 - `docs/configuration.md` for frontmatter options
 - `docs/navigation.md`, `docs/mobile.md`, `docs/presenter-mode.md`, and `docs/pdf-export.md` for presenting/exporting
 

package/skills/slidev-migration/SKILL.md

@@ -16,7 +16,7 @@ Before changing files, read the available project/package docs:
 - `Readme.md`, `docs/getting-started.md`, root `SPEC.md`, linked colocated `SPEC.md` files, and `docs/slides.md` for Honeydeck deck structure
 - `docs/configuration.md` for Honeydeck frontmatter
 - `docs/steps-and-reveals.md` for Reveal/RevealGroup/code steps
-- `docs/kits.md` and `docs/kit-authoring.md` for layouts/themes/components
+- `docs/customization.md` for layouts, themes, components, layout maps, and design tokens
 - Existing Slidev files: `slides.md`, `pages/**/*.md`, `components/**/*.vue`, `layouts/**/*.vue`, `styles/**`, `public/**`, `package.json`, `vite.config.*`, and local theme/addon packages
 
 If Honeydeck docs are not nearby, package docs may be in `node_modules/@honeydeck/honeydeck`, or the user can use the public docs site. A migrated deck's runtime reference pages cover active theme tokens, layouts, and built-in components.
@@ -51,7 +51,7 @@ Create a working Honeydeck presentation that preserves the talk's structure, con
 | `public/**` | `public/**` copied unchanged; root-relative `/assets/...` paths usually keep working |
 | `components/*.vue` | `components/*.tsx` React components |
 | `layouts/*.vue` | React layouts plus a layout map selected with deck frontmatter `layouts: "./layouts"` |
-| Slidev theme package | Honeydeck kit/theme/layout map, or local React layouts + CSS |
+| Slidev theme package | Honeydeck theme CSS, layout map, or local React layouts + CSS |
 | `styles/style.css` or `styles/index.*` | `styles.css` imported from `deck.mdx` |
 | `slidev`, `slidev build`, `slidev export` scripts | `honeydeck dev`, `honeydeck build`, `honeydeck pdf` scripts |
 

package/src/cli/index.ts

@@ -116,7 +116,7 @@ ${formatTopLevelBanner()}
     honeydeck dev --open
     honeydeck pdf --steps all --mode dark -o slides.pdf
 
-  🎞  Happy presenting!
+  🐝  Happy presenting!
 `);
 }
 

package/src/layouts/SPEC.md

@@ -1,170 +1,99 @@
-# Honeydeck Layouts and Kits Specification
+# Honeydeck Layouts and Customization Specification
 
-> Observable behavior for kits, layout maps, built-in layouts, layout props, and layout demos.
+> Observable behavior for theme CSS, layout maps, built-in layouts, layout props, and layout demos.
 
-## Kits — Theme, Layouts, Components
+## Customization — Theme CSS, Layout Maps, Components
 
-A **kit** is an npm package (or local folder) that bundles three concerns. Honeydeck does not require a special registry mechanism; themes are CSS imports, layouts are default-exported layout maps, and components are normal React/MDX imports:
+Honeydeck customization is explicit composition. Themes are CSS imports, layouts come from a default-exported layout map, and components are normal React/MDX imports:
 
 | Concern | What it is | How it's used |
 |---------|-----------|---------------|
-| Theme | CSS file (tokens, colors, typography) | explicit CSS import from MDX or another CSS file |
-| Layouts | Layout component map | `layouts:` in frontmatter |
-| Components | Reusable React components | `import` in MDX |
+| Theme | CSS file with tokens, colors, and typography | explicit CSS import from MDX or another CSS file |
+| Layouts | layout component map | `layouts:` in frontmatter |
+| Components | reusable React components | explicit `import` in MDX |
 
-### Kit Package Structure
+These references may point to local project files or normal installed packages. Honeydeck does not provide special publishing or registry behavior.
 
-```txt
-@company/honeydeck-kit-brand/
-  package.json
-  theme.css              ← CSS tokens/variables
-  layouts/
-    index.ts             ← exports LayoutMap
-    Blank.tsx
-    Default.tsx
-    Cover.tsx
-    Section.tsx
-    TwoCol.tsx
-    Image.tsx
-    ImageLeft.tsx
-    ImageRight.tsx
-  components/
-    Callout.tsx
-    Badge.tsx
-```
+### Zero Config
 
-### Using a Kit
+A plain `deck.mdx` file with no frontmatter still works with built-in layouts:
 
 ```mdx
----
-title: My Talk
-layouts: "@company/honeydeck-kit-brand/layouts"
----
-
-import '@company/honeydeck-kit-brand/theme.css'
-import './my-overrides.css'
-
-import { Callout } from '@company/honeydeck-kit-brand/components'
-
-# First slide
+# Hello world
 
-<Callout>Important!</Callout>
+This renders with the built-in default layout.
 ```
 
-### Mix and Match
+Styling is provided only by explicit CSS imports. Honeydeck does not auto-inject Tailwind, `@honeydeck/honeydeck/theme.css`, or custom theme CSS. The starter project imports `./styles.css` from `deck.mdx`; `styles.css` imports Tailwind and `@honeydeck/honeydeck/theme.css`. Without that import, slides still render with built-in layouts, but mostly with browser/default styling. User imports override via cascade.
 
-Theme CSS from one kit, layouts from another, components from a third:
+### Theme Layering
 
-```mdx
----
-layouts: "@company/honeydeck-kit-brand/layouts"
----
-
-import '@other/honeydeck-kit-minimal/theme.css'
-import { Badge } from '@third/honeydeck-kit-fancy/components'
-```
-
-### Local Kits
-
-Create a kit in your project folder:
+Honeydeck ships optional theme layers that are imported after the base theme. Theme layers are token overrides and are not standalone replacements for the base theme:
 
-```txt
-awesome-talk/
-  theme.css
-  layouts/
-    index.ts
-    MyCustom.tsx
+```css
+@import "tailwindcss";
+@import "@honeydeck/honeydeck/theme.css";
+@import "@honeydeck/honeydeck/themes/clean.css";
 ```
 
-Reference locally (relative to the deck entry file):
+Honeydeck includes:
 
-```yaml
----
-layouts: "./layouts"
----
-```
+| Theme import | Purpose |
+|--------------|---------|
+| `@honeydeck/honeydeck/theme.css` | Preferred base theme import; clean black/white/grey defaults |
+| `@honeydeck/honeydeck/themes/base.css` | Package export alias for the base theme |
+| `@honeydeck/honeydeck/themes/clean.css` | Optional clean visual style layer |
+| `@honeydeck/honeydeck/themes/bee.css` | Bee theme layer for the original playful palette |
 
-```mdx
-import './theme.css'
-```
+Use `@honeydeck/honeydeck/layouts` for clean default layouts. Use `@honeydeck/honeydeck/layouts/bee` together with `@honeydeck/honeydeck/themes/bee.css` for the Bee visual style.
 
-### Kit CSS Inheritance
+### CSS Overrides
 
-Use standard CSS `@import` for extending another kit's theme:
+Use standard CSS cascade and `@import` to layer overrides:
 
 ```css
-/* theme.css — extends company kit */
-@import '@company/honeydeck-kit-brand/theme.css';
+@import "tailwindcss";
+@import "@honeydeck/honeydeck/theme.css";
 
 :root {
   --honeydeck-primary: oklch(55% 0.25 145);
 }
 ```
 
-### Layout Inheritance
+### Layout Maps
 
-Use JS spread to compose layouts from multiple sources:
+Create a layout map in the project and reference it relative to the deck entry file:
+
+```yaml
+---
+layouts: "./layouts"
+---
+```
+
+Layout maps may compose entries with JavaScript spread:
 
 ```ts
 // layouts/index.ts
-import companyLayouts from '@company/honeydeck-kit-brand/layouts'
-import fancyLayouts from '@fancy/honeydeck-kit/layouts'
+import defaultLayouts from '@honeydeck/honeydeck/layouts'
 import { MyCustomCover } from './Cover'
 
 export default {
-  ...companyLayouts,
-  Section: fancyLayouts.Section,
+  ...defaultLayouts,
   Cover: MyCustomCover,
 } satisfies LayoutMap
 ```
 
-### Zero Config
-
-A plain `deck.mdx` file with no frontmatter still works with built-in layouts:
-
-```mdx
-# Hello world
-
-This renders with the built-in default layout.
-```
-
-Styling is provided only by explicit CSS imports. Honeydeck does not auto-inject Tailwind, `@honeydeck/honeydeck/theme.css`, or kit theme CSS. The starter project imports `./styles.css` from `deck.mdx`; `styles.css` imports Tailwind and `@honeydeck/honeydeck/theme.css`. Without that import, slides still render with built-in layouts, but mostly with browser/default styling. User imports override via cascade.
-
-### Bundled Theme Layers
-
-Honeydeck ships optional theme layers that are imported after the base theme. Theme layers are token overrides and are not standalone replacements for the base theme:
-
-```css
-@import "tailwindcss";
-@import "@honeydeck/honeydeck/theme.css";
-@import "@honeydeck/honeydeck/themes/clean.css";
-```
-
-Honeydeck includes:
-
-| Theme import | Purpose |
-|--------------|---------|
-| `@honeydeck/honeydeck/theme.css` | Preferred base theme import; clean black/white/grey defaults |
-| `@honeydeck/honeydeck/themes/base.css` | Package export alias for the base theme |
-| `@honeydeck/honeydeck/themes/clean.css` | Optional clean visual style layer |
-| `@honeydeck/honeydeck/themes/bee.css` | Bee theme layer for the original playful palette |
-
-Use `@honeydeck/honeydeck/layouts` for clean default layouts. Use `@honeydeck/honeydeck/layouts/bee` together with `@honeydeck/honeydeck/themes/bee.css` for the Bee visual style.
-
 ### Progressive Customization
 
 ```txt
 Level 0: plain `deck.mdx`    → built-in layouts, browser/default styling
-Level 1: import CSS             → Tailwind, base styling, and token overrides
-Level 2: set layouts:           → custom layout map
-Level 3: local kit folder       → full control
-Level 4: publish npm kit        → share across projects
+Level 1: import CSS          → Tailwind, base styling, and token overrides
+Level 2: import components   → reusable React pieces in MDX
+Level 3: set layouts:        → custom layout map
 ```
 
 ---
 
----
-
 ## Layouts
 
 ### Default Layouts

package/src/runtime/SPEC.md

@@ -121,10 +121,11 @@ Reference page routes intentionally do not encode slide or step. During one brow
 
 Shown in normal slide view only (not presenter/reference views).
 
-- Positioned bottom-left
+- Positioned bottom-center on narrow mobile screens and bottom-left from wider breakpoints
 - **Hidden by default** on desktop — appears on cursor hover near bottom edge
 - **Always visible** on mobile/tablet portrait
 - **Hidden by default** on mobile/tablet landscape — appears when the center tap zone is tapped, fades after roughly 3 seconds of idle time, and stays visible while being interacted with
+- On narrow mobile screens, stays within the viewport by wrapping controls into compact groups instead of extending past the screen edge
 - Contains:
   - Current slide number
   - Navigation arrows (step left/right)

package/src/runtime/components/NavBar.tsx

@@ -118,105 +118,117 @@ export function NavBar({
 	const canPrev = getPreviousStepRoute(route, navigationOptions) !== null;
 	const canNext = getNextStepRoute(route, navigationOptions) !== null;
 	const FullscreenIcon = isFullscreen ? MinimizeIcon : MaximizeIcon;
+	const groupClass =
+		"flex items-center gap-0.5 rounded-md bg-white/[0.04] px-0.5 py-0.5 sm:bg-transparent sm:p-0";
 
 	return (
 		// Hover zone — transparent, occupies the bottom strip
 		<div
-			className="honeydeck-nav-zone fixed bottom-0 left-0 right-0 h-20 z-50 flex items-end pointer-events-none"
+			className="honeydeck-nav-zone fixed bottom-0 left-0 right-0 h-28 z-50 flex items-end justify-center pointer-events-none sm:h-20 sm:justify-start"
 			data-honeydeck-no-swipe="true"
 		>
 			{/* Actual bar */}
-			<div className="honeydeck-nav-bar pointer-events-auto flex items-center gap-1 px-2 py-1.5 ml-6 mb-6 bg-black/70 backdrop-blur rounded-lg border border-white/10 shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
-				{/* Prev step */}
-				<NavBarButton
-					onClick={goPrev}
-					label="Previous step (←)"
-					disabled={!canPrev}
-				>
-					<ChevronLeftIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				{/* Slide number */}
-				<span className="min-w-6 px-1 text-center font-sans text-sm tabular-nums text-white/60">
-					{route.slide}
-				</span>
-
-				{/* Next step */}
-				<NavBarButton
-					onClick={goNext}
-					label="Next step (→)"
-					disabled={!canNext}
-				>
-					<ChevronRightIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				<NavBarDivider />
-
-				{/* Overview */}
-				<NavBarButton
-					onClick={onToggleOverview}
-					label="Overview (o)"
-					active={isOverview}
-				>
-					<LayoutGridIcon aria-hidden="true" size={14} />
-				</NavBarButton>
-
-				{/* Layouts reference */}
-				<NavBarButton
-					onClick={() => openReference(route)}
-					label="Layouts reference"
-				>
-					<BookOpenTextIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				{/* Docs website */}
-				<NavBarButton onClick={openDocsWebsite} label="Docs website">
-					<ExternalLinkIcon aria-hidden="true" size={15} />
-				</NavBarButton>
-
-				{/* Presenter mode */}
-				{route.view !== "presenter" && (
+			<div className="honeydeck-nav-bar pointer-events-auto mx-2 mb-2 flex max-w-[calc(100vw-1rem)] flex-wrap items-center justify-center gap-1 rounded-lg border border-white/10 bg-black/70 px-1.5 py-1.5 shadow-[0_4px_24px_rgba(0,0,0,0.4)] backdrop-blur sm:mx-0 sm:ml-6 sm:mb-6 sm:max-w-none sm:flex-nowrap sm:justify-start sm:gap-1 sm:px-2">
+				<div className={groupClass}>
+					{/* Prev step */}
 					<NavBarButton
-						onClick={() => openPresenter(route)}
-						label="Presenter mode (p)"
+						onClick={goPrev}
+						label="Previous step (←)"
+						disabled={!canPrev}
 					>
-						<PresentationIcon aria-hidden="true" size={16} />
+						<ChevronLeftIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
 
-				{/* Fullscreen */}
-				<NavBarButton onClick={toggleFullscreen} label="Fullscreen (f)">
-					<FullscreenIcon aria-hidden="true" size={16} />
-				</NavBarButton>
+					{/* Slide number */}
+					<span className="min-w-6 px-1 text-center font-sans text-sm tabular-nums text-white/60">
+						{route.slide}
+					</span>
 
-				{showTextSelectionToggle && onToggleTextSelection && (
+					{/* Next step */}
 					<NavBarButton
-						onClick={onToggleTextSelection}
-						label={
-							isTextSelectionEnabled
-								? "Disable slide text selection"
-								: "Enable slide text selection"
-						}
-						active={isTextSelectionEnabled}
+						onClick={goNext}
+						label="Next step (→)"
+						disabled={!canNext}
 					>
-						<TextSelectIcon aria-hidden="true" size={16} />
+						<ChevronRightIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
+				</div>
 
-				<NavBarDivider />
+				<div className="hidden sm:block">
+					<NavBarDivider />
+				</div>
 
-				{isZoomed && onResetZoom && (
-					<NavBarButton onClick={onResetZoom} label="Reset zoom">
-						<RotateCcwIcon aria-hidden="true" size={16} />
+				<div className={groupClass}>
+					{/* Overview */}
+					<NavBarButton
+						onClick={onToggleOverview}
+						label="Overview (o)"
+						active={isOverview}
+					>
+						<LayoutGridIcon aria-hidden="true" size={14} />
+					</NavBarButton>
+
+					{/* Layouts reference */}
+					<NavBarButton
+						onClick={() => openReference(route)}
+						label="Layouts reference"
+					>
+						<BookOpenTextIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
-
-				{/* Color mode */}
-				<ColorModeCycleButton
-					colorMode={colorMode}
-					onSetColorMode={onSetColorMode}
-					className={navBarButtonClass()}
-				/>
+
+					{/* Docs website */}
+					<NavBarButton onClick={openDocsWebsite} label="Docs website">
+						<ExternalLinkIcon aria-hidden="true" size={15} />
+					</NavBarButton>
+
+					{/* Presenter mode */}
+					{route.view !== "presenter" && (
+						<NavBarButton
+							onClick={() => openPresenter(route)}
+							label="Presenter mode (p)"
+						>
+							<PresentationIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+				</div>
+
+				<div className="hidden sm:block">
+					<NavBarDivider />
+				</div>
+
+				<div className={groupClass}>
+					{/* Fullscreen */}
+					<NavBarButton onClick={toggleFullscreen} label="Fullscreen (f)">
+						<FullscreenIcon aria-hidden="true" size={16} />
+					</NavBarButton>
+
+					{showTextSelectionToggle && onToggleTextSelection && (
+						<NavBarButton
+							onClick={onToggleTextSelection}
+							label={
+								isTextSelectionEnabled
+									? "Disable slide text selection"
+									: "Enable slide text selection"
+							}
+							active={isTextSelectionEnabled}
+						>
+							<TextSelectIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+
+					{isZoomed && onResetZoom && (
+						<NavBarButton onClick={onResetZoom} label="Reset zoom">
+							<RotateCcwIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+
+					{/* Color mode */}
+					<ColorModeCycleButton
+						colorMode={colorMode}
+						onSetColorMode={onSetColorMode}
+						className={navBarButtonClass()}
+					/>
+				</div>
 			</div>
 		</div>
 	);

package/src/runtime/views/SPEC.md

@@ -100,7 +100,7 @@ Toggled via `o` or the overview button. Overview is also directly addressable as
 
 Built-in reference pages start at `/#/theme`. Included in both dev and production builds.
 
-User-facing product copy should call this area "reference pages". Reserve "kit" for the reusable theme/layout/component package concept described in [Kits — Theme, Layouts, Components](../../layouts/SPEC.md#kits--theme-layouts-components).
+User-facing product copy should call this area "reference pages". Theme, layout, and component customization is described in [Customization — Theme CSS, Layout Maps, Components](../../layouts/SPEC.md#customization--theme-css-layout-maps-components).
 
 ### Routes