@honeydeck/honeydeck 0.4.0 → 0.6.0

package/AGENTS.md

@@ -1,13 +1,13 @@
 # Honeydeck package guide
 
-This package publishes the scoped public `@honeydeck/honeydeck` npm package. It owns the CLI, runtime, Vite plugin, layouts, themes, bundled skills, canonical package docs, and runtime reference pages.
+This package publishes the scoped public `@honeydeck/honeydeck` npm package. It owns the CLI, runtime, Vite plugin, layouts, themes, bundled skills, and runtime reference pages.
 
 ## Rules
 
 - Keep public import paths as `@honeydeck/honeydeck/...`.
-- `Readme.md` is the compact package README. `docs/getting-started.md` is the canonical first-run guide. Other canonical prose docs live in `docs/*.md`; keep links in MDX form unless referring to user/Slidev source files.
-- Built-in runtime reference pages cover project-specific theme tokens, active layouts, and built-in component docs. They do not render package Markdown docs in-deck.
-- Package docs, specs, `DEVELOPMENT.md`, and skills must remain included in npm package contents.
+- `Readme.md` is the compact package README and links to the public docs site. Reader-facing docs live in `packages/docs/content/docs`.
+- Built-in runtime reference pages cover project-specific theme tokens, active layouts, and built-in component docs. They do not render public docs in-deck.
+- Specs, `DEVELOPMENT.md`, and skills must remain included in npm package contents.
 - Use suffixed `lucide-react` icon exports.
 
 ## Commands

package/DEVELOPMENT.md

@@ -166,12 +166,12 @@ Important implications:
 - CLI bin points at `./src/cli/index.ts`.
 - Vite resolves Honeydeck runtime/layout/theme/component exports from source.
 - Local development and tests use `tsx` to execute TypeScript directly.
-- `package.json#files` must include all runtime, docs, spec, development, and skill files needed by installed users and AI agents.
+- `package.json#files` must include all runtime, spec, development, and skill files needed by installed users and AI agents.
 
 Published package contents must include:
 
 - `src/` for CLI, runtime, layouts, themes, Vite plugin, and assets
-- `Readme.md` as the compact package README, `docs/getting-started.md` as the first-run guide, and `docs/*.md` for package docs and marketing-site sync
+- `Readme.md` as the compact package README with links to the public docs site
 - Root `SPEC.md` plus colocated `SPEC.md` files so AI agents and maintainers can inspect expected behavior from an installed package
 - `DEVELOPMENT.md` so maintainers can inspect development workflow, internal architecture, testing, and release expectations from an installed package
 - `skills/` so `honeydeck skill`, `npx skills add <honeydeck-repo-url> --copy`, and explicit `npx skills add <honeydeck-repo-url> --copy --skill <skill-name>` can install Honeydeck agent skills
@@ -211,7 +211,10 @@ honeydeck
 │   └── bee/               → src/layouts/bee/*
 └── ./components/
     ├── .                  → src/runtime/components/index.ts
-    └── code-block         → src/runtime/components/CodeBlock.tsx
+    ├── code-block         → src/runtime/components/CodeBlock.tsx
+    └── code-block/
+        ├── normal         → src/runtime/components/NormalCodeBlock.tsx
+        └── magic          → src/runtime/components/MagicCodeBlock.tsx
 ```
 
 ---
@@ -495,7 +498,6 @@ honeydeck/
     theme/                  Base, clean, and bee CSS theme layers and colocated theme tests
     defaults.ts             Shared defaults such as default deck entry
     assets.d.ts             Static asset type declarations
-  docs/                     Canonical Markdown docs synced into the marketing docs site
   skills/                   Bundled installable agent skills
   Readme.md                 Compact package README and documentation index
   SPEC.md                   Overview and navigation map for behavior specs

package/Readme.md

@@ -14,24 +14,24 @@ npm run dev
 
 Open the local URL printed by the dev server, edit `deck.mdx`, and your slides update instantly.
 
-Decks are plain MDX files separated into slides with `---`; see the first deck example in [Getting started](docs/getting-started.md).
+Decks are plain MDX files separated into slides with `---`; see the first deck example in [Getting started](https://honeydeck.dev/docs/getting-started).
 
 ## Documentation
 
-- [Getting started](docs/getting-started.md) - first deck, first commands, and the shortest path to presenting
-- [Deeper dive](docs/deeper-dive.md) - CLI options, authoring patterns, imports, themes, architecture, and agent skills
-- [Slides](docs/slides.md) - separators, multiple files, layouts, and assets
-- [Configuration](docs/configuration.md) - deck-level and slide-level frontmatter
-- [Steps and reveals](docs/steps-and-reveals.md) - timeline, reveal groups, code steps, and PDF behavior
-- [Components](docs/components.md) - core Honeydeck components such as `BrowserFrame` and `Keyboard`
-- [Customization](docs/customization.md) - themes, layout sets, Tailwind tokens, custom layouts, and layout demos
-- [Navigation](docs/navigation.md) - keyboard, touch, overview mode, and URL state
-- [Mobile and touch](docs/mobile.md) - mobile controls, touch gestures, and pinch zoom
-- [Presenter mode](docs/presenter-mode.md) - notes, presenter window, sync, and mobile behavior
-- [PDF export](docs/pdf-export.md) - options, color modes, and step handling
-- [Local development](docs/local-development.md) - running Honeydeck from this repository
-- [Skills](docs/skills.md) - optional agent skills for authoring, writing, and migration help
-- [Slidev migration](docs/slidev-migration.md) - moving from Slidev with the bundled agent skill
+- [Getting started](https://honeydeck.dev/docs/getting-started) - first deck, first commands, and the shortest path to presenting
+- [Deeper dive](https://honeydeck.dev/docs/deeper-dive) - CLI options, authoring patterns, imports, themes, architecture, and agent skills
+- [Slides](https://honeydeck.dev/docs/slides) - separators, multiple files, layouts, and assets
+- [Configuration](https://honeydeck.dev/docs/configuration) - deck-level and slide-level frontmatter
+- [Steps and reveals](https://honeydeck.dev/docs/steps-and-reveals) - timeline, reveal groups, code steps, Magic Code, and PDF behavior
+- [Components](https://honeydeck.dev/docs/components) - core Honeydeck components such as `Reveal`, `RevealWith`, `BrowserFrame`, and `Keyboard`
+- [Customization](https://honeydeck.dev/docs/customization) - themes, layout sets, Tailwind tokens, custom layouts, and layout demos
+- [Navigation](https://honeydeck.dev/docs/navigation) - keyboard, touch, overview mode, and URL state
+- [Mobile and touch](https://honeydeck.dev/docs/mobile) - mobile controls, touch gestures, and pinch zoom
+- [Presenter mode](https://honeydeck.dev/docs/presenter-mode) - notes, presenter window, sync, and mobile behavior
+- [PDF export](https://honeydeck.dev/docs/pdf-export) - options, color modes, and step handling
+- [Local development](https://honeydeck.dev/docs/local-development) - running Honeydeck from this repository
+- [Skills](https://honeydeck.dev/docs/skills) - optional agent skills for authoring, writing, and migration help
+- [Slidev migration](https://honeydeck.dev/docs/slidev-migration) - moving from Slidev with the bundled agent skill
 
 ## Common commands
 

package/SPEC.md

@@ -31,9 +31,9 @@ The Honeydeck specification is distributed:
 | Runtime | Node.js CLI binary from the scoped `@honeydeck/honeydeck` package | [`src/cli/SPEC.md`](src/cli/SPEC.md) |
 | Build setup | Honeydeck-managed dev/build setup; no user `vite.config.ts` required | [`src/runtime/SPEC.md`](src/runtime/SPEC.md), [`src/vite-plugin/SPEC.md`](src/vite-plugin/SPEC.md) |
 | Styling | Explicit CSS imports, Tailwind-compatible utilities, and CSS custom properties | [`src/theme/SPEC.md`](src/theme/SPEC.md) |
-| Markdown | MDX with GitHub-flavored Markdown tables; canonical docs use `docs/*.md` | [`src/vite-plugin/SPEC.md`](src/vite-plugin/SPEC.md), [`src/remark/SPEC.md`](src/remark/SPEC.md) |
+| Markdown | MDX with GitHub-flavored Markdown tables; reader-facing docs are authored in `packages/docs/content/docs` and exported into package-local `docs/*.md` files during npm packaging | [`src/vite-plugin/SPEC.md`](src/vite-plugin/SPEC.md), [`src/remark/SPEC.md`](src/remark/SPEC.md) |
 | PDF | Rasterized slide pages matching browser rendering | [`src/cli/SPEC.md`](src/cli/SPEC.md) |
-| Syntax highlighting | Built-in code highlighting with runtime step dimming | [`src/remark/SPEC.md`](src/remark/SPEC.md) |
+| Syntax highlighting | Built-in code highlighting, runtime step dimming, and Magic Code transitions | [`src/remark/SPEC.md`](src/remark/SPEC.md) |
 | Icons | `lucide-react` suffixed `...Icon` component imports | [`src/SPEC.md`](src/SPEC.md) |
 | Public imports | Explicit import subpaths for components, layouts, themes, and types | [`src/SPEC.md`](src/SPEC.md) |
 
@@ -43,6 +43,7 @@ The Honeydeck specification is distributed:
 - Honeydeck wires the Tailwind Vite plugin internally, but Tailwind/theme CSS is only loaded when user-authored CSS imports it; generated projects install `tailwindcss` and import `./styles.css` from `deck.mdx`.
 - Generated projects use compatible semver ranges for React, Tailwind, TypeScript, and types.
 - Custom themes, layouts, and components are plain CSS/TypeScript modules; installed-package usage is handled by standard package metadata rather than by a Honeydeck-specific mechanism.
+- Published packages include generated package-local docs under `docs/*.md` plus `docs/index.json` so bundled agent skills can read version-aligned documentation from `node_modules/@honeydeck/honeydeck/docs`.
 - Icons come from `lucide-react` and must use suffixed `...Icon` component exports (for example `ChevronLeftIcon`), not inline SVG path helpers, emoji glyphs, or unsuffixed aliases.
 
 ---
@@ -55,9 +56,9 @@ The Honeydeck specification is distributed:
 | Starter templates | [`src/cli/templates/SPEC.md`](src/cli/templates/SPEC.md) | generated project tree, starter `deck.mdx`, `styles.css`, demo component |
 | Agent skills | [`skills/SPEC.md`](skills/SPEC.md) | bundled installable skills and installer expectations |
 | Deck loading / frontmatter | [`src/vite-plugin/SPEC.md`](src/vite-plugin/SPEC.md) | deck entry, slide separators, MDX imports, assets, Markdown features, frontmatter |
-| Remark transforms | [`src/remark/SPEC.md`](src/remark/SPEC.md) | code highlighting and step-through code metadata |
+| Remark transforms | [`src/remark/SPEC.md`](src/remark/SPEC.md) | timeline annotation, code highlighting, step-through code metadata, and Magic Code syntax |
 | Runtime | [`src/runtime/SPEC.md`](src/runtime/SPEC.md) | timeline semantics, keyboard/touch navigation, SPA/build behavior, runtime errors |
-| Runtime components | [`src/runtime/components/SPEC.md`](src/runtime/components/SPEC.md) | `Reveal`, `RevealGroup`, `TimelineSteps`, `ListStyle`, `Keyboard`, `BrowserFrame`, `Notes` |
+| Runtime components | [`src/runtime/components/SPEC.md`](src/runtime/components/SPEC.md) | `Reveal`, `RevealWith`, `RevealGroup`, `Fade`, `FadeWith`, `FadeGroup`, `TimelineSteps`, `ListStyle`, `Keyboard`, `BrowserFrame`, `Notes` |
 | Runtime views | [`src/runtime/views/SPEC.md`](src/runtime/views/SPEC.md) | presenter mode, overview mode, theme/layout/component reference pages |
 | Layouts and customization | [`src/layouts/SPEC.md`](src/layouts/SPEC.md) | custom theme/layout/component model, built-in layouts, layout props, demos, layout resolution |
 | Theme | [`src/theme/SPEC.md`](src/theme/SPEC.md) | design tokens, base theme CSS, Tailwind mapping, color mode behavior |

package/docs/browser-frame.md

@@ -0,0 +1,38 @@
+<!-- Generated from packages/docs/content/docs/(components)/browser-frame.mdx. Do not edit by hand. -->
+
+# BrowserFrame
+
+Use `<BrowserFrame>` to show a live iframe inside a macOS-style browser window.
+
+<BrowserFramePlayground />
+
+```mdx
+import { BrowserFrame } from '@honeydeck/honeydeck'
+
+<BrowserFrame
+  src="https://example.com"
+  addressBar="example.com"
+  fallbackImage="/example-fallback-light.png"
+  fallbackDarkImage="/example-fallback-dark.png"
+/>
+```
+
+The component renders browser chrome with macOS traffic-light controls and an optional address bar. It can show a light or dark fallback screenshot when the iframe cannot be loaded. It uses Honeydeck theme tokens for the frame, border, typography, and iframe surface.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `src` | `string` | Required | URL loaded by the iframe. Use an external `https://` URL or a local Vite-served route like `/demo.html`. |
+| `addressBar` | `ReactNode` | — | Optional content shown in the address-bar field. Omit it to hide the input-like address field. |
+| `fallbackImage` | `string` | — | Light/default screenshot shown when iframe loading fails or fallback mode is toggled on. |
+| `fallbackDarkImage` | `string` | — | Dark-mode screenshot shown when fallback mode is active. Falls back to `fallbackImage` when omitted. |
+| `fallbackAlt` | `string` | `Fallback preview` | Accessible alt text for fallback images. |
+| `defaultFallback` | `boolean` | `false` | Starts in fallback mode instead of loading the iframe. Useful for deterministic demos, final-state screenshots, and PDF-friendly decks. |
+| `aspectRatio` | `CSSProperties["aspectRatio"]` | `16 / 9` | Aspect ratio for the full browser window, including chrome. Accepts values such as `16 / 9`, `"4 / 3"`, or `1.6`. |
+| `className` | `string` | — | Additional CSS class for the outer browser frame. |
+| `iframeClassName` | `string` | — | Additional CSS class for the iframe element. Only applies while live iframe content is rendered. |
+
+Standard iframe attributes such as `allow`, `sandbox`, `loading`, and `referrerPolicy` are forwarded.
+
+When fallback mode is active, the browser frame shows a badge in the top chrome, visually aligned with the address bar. A fourth round control sits beside the macOS traffic-light controls and only becomes visible when the control itself is hovered or keyboard-focused; it toggles fallback mode.

package/docs/components.md

@@ -1,63 +1,22 @@
-# Components
-
-Honeydeck core components are explicit imports from `@honeydeck/honeydeck`. They are also exported from `@honeydeck/honeydeck/components`.
-
-```mdx
-import { Keyboard } from '@honeydeck/honeydeck'
-```
-
-## BrowserFrame
-
-Use `<BrowserFrame>` to show a live iframe inside a macOS-style browser window.
-
-```mdx
-import { BrowserFrame } from '@honeydeck/honeydeck'
-
-<BrowserFrame
-  src="https://example.com"
-  addressBar="example.com"
-  fallbackImage="/example-fallback-light.png"
-  fallbackDarkImage="/example-fallback-dark.png"
-/>
-```
-
-The component renders browser chrome with macOS traffic-light controls and an optional address bar. It can show a light or dark fallback screenshot when the iframe cannot be loaded. It uses Honeydeck theme tokens for the frame, border, typography, and iframe surface.
+<!-- Generated from packages/docs/content/docs/(components)/components.mdx. Do not edit by hand. -->
 
-Props:
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `src` | `string` | Required | URL loaded by the iframe. Use an external `https://` URL or a local Vite-served route like `/demo.html`. |
-| `addressBar` | `ReactNode` | — | Optional content shown in the address-bar field. Omit it to hide the input-like address field. |
-| `fallbackImage` | `string` | — | Light/default screenshot shown when iframe loading fails or fallback mode is toggled on. |
-| `fallbackDarkImage` | `string` | — | Dark-mode screenshot shown when fallback mode is active. Falls back to `fallbackImage` when omitted. |
-| `fallbackAlt` | `string` | `Fallback preview` | Accessible alt text for fallback images. |
-| `defaultFallback` | `boolean` | `false` | Starts in fallback mode instead of loading the iframe. Useful for deterministic demos, final-state screenshots, and PDF-friendly decks. |
-| `aspectRatio` | `CSSProperties["aspectRatio"]` | `16 / 9` | Aspect ratio for the full browser window, including chrome. Accepts values such as `16 / 9`, `"4 / 3"`, or `1.6`. |
-| `className` | `string` | — | Additional CSS class for the outer browser frame. |
-| `iframeClassName` | `string` | — | Additional CSS class for the iframe element. Only applies while live iframe content is rendered. |
-
-Standard iframe attributes such as `allow`, `sandbox`, `loading`, and `referrerPolicy` are forwarded.
-
-When fallback mode is active, the browser frame shows a badge in the top chrome, visually aligned with the address bar. A fourth round control sits beside the macOS traffic-light controls and only becomes visible when the control itself is hovered or keyboard-focused; it toggles fallback mode.
-
-## Keyboard
-
-Use `<Keyboard>` to show one key or a shortcut in slide prose.
-
-```mdx
-Press <Keyboard>Esc</Keyboard> to close overview.
-
-Advance with <Keyboard keys="Space" />.
-
-Open command palette with <Keyboard keys={["Ctrl", "Shift", "P"]} />.
-```
+# Components
 
-`keys` accepts a single value or an ordered array. When `keys` is omitted, `children` is rendered as one key. Array values render one `<kbd>` per key, separated by `+` by default:
+Honeydeck components are explicit MDX imports from `@honeydeck/honeydeck`. Use them when plain Markdown is not enough for timeline control, speaker notes, rich previews, or inline UI.
 
 ```mdx
-<Keyboard keys={["⌘", "K"]} />
-<Keyboard keys={["Ctrl", "Alt", "Delete"]} separator=" " />
+import { Reveal, RevealWith, RevealGroup, TimelineSteps, ListStyle, Keyboard, BrowserFrame, Notes } from '@honeydeck/honeydeck'
 ```
 
-The component is inline by default, uses Honeydeck theme styling, supports `className`, and does not add timeline steps.
+| Component | Use it for |
+| --- | --- |
+| [`Reveal`](reveal.md) | Show content at a specific slide timeline step. |
+| [`RevealWith`](reveal-with.md) | Show content with an existing reveal or numeric slide step without adding another step. |
+| [`RevealGroup`](reveal-group.md) | Reveal each direct child or list item one after another, with optional nested-list reveals. |
+| [`TimelineSteps`](timeline-steps.md) | Reserve timeline steps for an imported custom React component. |
+| [`ListStyle`](list-style.md) | Style Markdown, HTML, or JSX lists with no markers or custom markers. |
+| [`Keyboard`](keyboard.md) | Render semantic inline keyboard keys and shortcuts. |
+| [`BrowserFrame`](browser-frame.md) | Show a live iframe or fallback screenshot inside browser chrome. |
+| [`Notes`](notes.md) | Add formatted speaker notes for presenter mode. |
+
+For timeline behavior in context, also see [Steps and reveals](steps-and-reveals.md).

package/docs/configuration.md

@@ -1,3 +1,5 @@
+<!-- Generated from packages/docs/content/docs/(core)/configuration.mdx. Do not edit by hand. -->
+
 # Configuration
 
 All settings live in YAML frontmatter — no separate config file.
@@ -15,6 +17,7 @@ Defined in the first frontmatter block of the deck entry file (before any slide
 | `pdfColorMode` | `"light" \| "dark"` | unset | Optional PDF color mode; when unset, falls back to pinned `colorMode`, then `light` |
 | `pdfSteps` | `"final" \| "all"` | `"final"` | PDF includes all steps or final state |
 | `transition` | `boolean` | `true` | Enable crossfade between slides |
+| `magicCodeDuration` | `number` | `800` | Default Magic Code animation duration in milliseconds |
 | `layouts` | `string` | `""` (built-in) | Layout map module path |
 | `defaultLayout` | `string` | `"Default"` | Layout used when slide has no `layout:` |
 | `showSlideNumbers` | `boolean` | `false` | Show the current slide number in the bottom-right corner of slides |
@@ -50,6 +53,16 @@ transition: true    # default
 transition: false   # disable
 ```
 
+### Magic Code Duration
+
+Magic Code animations default to 800ms. Set a deck-wide default with `magicCodeDuration`:
+
+```yaml
+magicCodeDuration: 500
+```
+
+A Magic Code block can override this locally with `{duration:500}`. Slide-level frontmatter does not configure Magic Code; the same key in slide frontmatter is treated as a layout prop.
+
 ## Slide-Level Settings
 
 Per-slide frontmatter (after `---`):

package/docs/customization.md

@@ -1,3 +1,5 @@
+<!-- Generated from packages/docs/content/docs/(core)/customization.mdx. Do not edit by hand. -->
+
 # Customization
 
 Honeydeck starts with built-in layouts and a small base theme. Customize only what you need: CSS tokens, React components, or a layout map.

package/docs/deeper-dive.md

@@ -1,3 +1,5 @@
+<!-- Generated from packages/docs/content/docs/(start)/deeper-dive.mdx. Do not edit by hand. -->
+
 # Diving deeper
 
 Use this guide after the quick start when you want to understand the main Honeydeck workflows without jumping straight into every reference page.
@@ -128,7 +130,7 @@ For the full reference, see [Configuration](configuration.md).
 Core runtime components are explicit imports from `honeydeck`.
 
 ```mdx
-import { Reveal, RevealGroup, TimelineSteps, BrowserFrame, Notes } from '@honeydeck/honeydeck'
+import { Reveal, RevealWith, RevealGroup, TimelineSteps, BrowserFrame, Notes } from '@honeydeck/honeydeck'
 ```
 
 ### Reveal steps
@@ -136,11 +138,18 @@ import { Reveal, RevealGroup, TimelineSteps, BrowserFrame, Notes } from '@honeyd
 `<Reveal>` reveals content at the next timeline step. Hidden content keeps its layout space so the slide does not jump.
 
 ```mdx
-<Reveal>Appears at step 1</Reveal>
+<Reveal name="first">Appears at step 1</Reveal>
 <Reveal>Appears at step 2</Reveal>
 ```
 
-`<RevealGroup>` wraps each direct child in a reveal step. Markdown and HTML lists are special: each list item reveals one after another.
+`<RevealWith>` syncs extra content to an existing step without adding a step:
+
+```mdx
+<RevealWith target="first">Appears with step 1</RevealWith>
+<RevealWith at={2}>Appears with step 2</RevealWith>
+```
+
+`<RevealGroup>` wraps each direct child in a reveal step. Markdown and HTML lists are special: each top-level list item reveals one after another. Use `listRevealMode="nested"` to reveal nested list items depth-first.
 
 ```mdx
 <RevealGroup>
@@ -202,6 +211,22 @@ console.log(b)
 - `{2-3|5|all}` starts with lines 2-3 active, then steps to line 5, then all lines.
 - Highlight groups after the first interleave with `<Reveal>` in document order.
 
+Magic Code animates between multiple code states. It builds on Shiki Magic Code / Shiki Magic Move while keeping Honeydeck's build-time highlighting and timeline behavior:
+
+`````mdx
+````md magic-code {duration:500}
+```ts
+const count = 1
+```
+
+```ts
+const count = 2
+```
+````
+`````
+
+Each inner code fence is a state. Inner code fence line metadata still works, so Honeydeck advances through a state's highlight groups before morphing to the next code state. Content inside a Magic Code block that is not a fenced code block is ignored. `md magic-move` is accepted as a Slidev compatibility alias, but Honeydeck docs and examples use `md magic-code`.
+
 ## Navigation, presenting, and PDF
 
 Keyboard shortcuts:
@@ -213,7 +238,7 @@ Keyboard shortcuts:
 | `down` / `s` | Next slide |
 | `up` / `w` | Previous slide |
 | `o` | Toggle overview mode |
-| `p` | Open presenter mode |
+| `p` | Open presenter mode in the current tab |
 | `f` | Toggle fullscreen |
 | `Escape` | Exit overview or fullscreen |
 
@@ -236,7 +261,7 @@ Presenter mode opens with `p` and includes:
 - speaker notes from `<Notes>`
 - slide/step counter and wall clock
 - an "Open audience view" button
-- audience sync through `BroadcastChannel`
+- audience sync through `BroadcastChannel`, with Presentation API casting when supported
 
 See [Navigation](navigation.md), [Mobile and touch](mobile.md), [Presenter mode](presenter-mode.md), and [PDF export](pdf-export.md).
 
@@ -328,7 +353,7 @@ Package Markdown guides live on the Honeydeck docs site and in the package `docs
 | Layouts | Runtime dynamic import of the layout map |
 | Tailwind | v4 CSS-first; Honeydeck adds the Vite plugin internally |
 | Shiki | Dual-theme CSS variables with build-time highlighting |
-| Presenter sync | `BroadcastChannel`, unidirectional, no server needed |
+| Presenter sync | `BroadcastChannel` fallback + Presentation API casting, no server needed |
 | Scaling | `transform: scale()` from the configured aspect ratio |
 | Build | `tsc` only, ESM, no bundler |
 | Testing | `node:test` plus fixture files |
@@ -336,7 +361,7 @@ Package Markdown guides live on the Honeydeck docs site and in the package `docs
 ## Types and exports
 
 ```ts
-import { Reveal, RevealGroup, Notes } from '@honeydeck/honeydeck'
+import { Reveal, RevealWith, RevealGroup, Notes } from '@honeydeck/honeydeck'
 import type { LayoutProps, LayoutMap, LayoutDemo } from '@honeydeck/honeydeck/types'
 
 import defaultLayouts from '@honeydeck/honeydeck/layouts'

package/docs/getting-started.md

@@ -1,3 +1,5 @@
+<!-- Generated from packages/docs/content/docs/(start)/getting-started.mdx. Do not edit by hand. -->
+
 # Getting started
 
 Honeydeck helps you create polished, interactive presentations using MDX. Write slides in Markdown, use different Layout, add React components when you need them, present using presenter mode, and export to PDF for easy sharing.
@@ -70,7 +72,7 @@ Use `layout:` to choose a slide layout. Built-in layouts include `Blank`, `Defau
 - Vite dev/build with hot reload
 - Built-in layouts and theme tokens
 - Tailwind v4-friendly styling
-- Reveal steps and code step-through
+- Reveal steps, code step-through, and Magic Code transitions
 - Presenter mode with speaker notes
 - Overview mode, keyboard/touch navigation, and URL state
 - PDF export through headless Chromium
@@ -102,7 +104,7 @@ honeydeck skill               # install optional Honeydeck agent skills
 - [Slides](slides.md) - separators, multiple files, layouts, and assets
 - [Configuration](configuration.md) - deck-level and slide-level frontmatter
 - [Steps and reveals](steps-and-reveals.md) - timeline, reveal groups, code steps, and PDF behavior
-- [Components](components.md) - core Honeydeck components such as `BrowserFrame` and `Keyboard`
+- [Components](components.md) - core Honeydeck components such as `Reveal`, `RevealWith`, `TimelineSteps`, `BrowserFrame`, and `Keyboard`
 - [Customization](customization.md) - themes, layout sets, Tailwind tokens, custom layouts, and layout demos
 - [Navigation](navigation.md) - keyboard, touch, overview mode, and URL state
 - [Mobile and touch](mobile.md) - mobile controls, touch gestures, and pinch zoom