@brett_lamy/docstream 1.2.4 → 1.4.0

package/src/index.ts

@@ -1,5 +1,7 @@
-export { PlaygroundStreamdown as GitbookStreamdown } from "./playground/PlaygroundStreamdown"
-export type { PlaygroundStreamdownProps as GitbookStreamdownProps } from "./playground/PlaygroundStreamdown"
+// The root entry never references `@agent-wasm/core` (almost-node). Live code fences and
+// inline-file demos run only when the host passes a runtime — see `@brett_lamy/docstream/playground`.
+export { GitbookStreamdown } from "./streamdown"
+export type { GitbookStreamdownProps } from "./streamdown"
 export { DocsRenderer, MarkdownContent } from "./docs/DocsRenderer"
 export type { DocRenderOptions, LivePreviewProps, LivePreviewRenderer, SourceReferenceRenderer } from "./docs/DocsRenderer"
 export { DocPageActions } from "./docs/PageActions"
@@ -47,45 +49,27 @@ export type {
 } from "./demo"
 export { CitationSources, DocstreamRefContext, InlineReference } from "./docs/reference"
 export type { CitationPreview, CitationPreviewResolver, DocstreamRefContextValue } from "./docs/reference"
-export { ReplayEmbed, ReplayPreview } from "./replay"
+export { ReplayEmbed, ReplayPreview } from "./replay/ReplayPreview"
 export type {
   ReplayEventsSource,
   ReplayEventsUrlSource,
   ReplayPageSource,
   ReplayPreviewProps,
   ReplaySource,
-} from "./replay"
-export { isReplayQaUrl, normalizeReplayEmbedUrl } from "./replay"
+} from "./replay/ReplayPreview"
+export { isReplayQaUrl, normalizeReplayEmbedUrl } from "./replay/url"
 export { VideoEmbed } from "./video"
 export type { VideoEmbedProps } from "./video"
-export { VizEmbed } from "./viz"
-export type { VizEmbedProps } from "./viz"
 export { OpenApiOperation } from "./openapi/OpenApiOperation"
-export {
-  InlineDemoPreview,
-  ReactCodePreview,
-  ReactDemo,
-  almostNodeDemoRuntime,
-  createAlmostNodeDemoRuntime,
-  createInlineDemoProject,
-  createReactDemoFiles,
-  createAlmostNodeFilesystem,
-  createAlmostNodeWorkspace,
-} from "./playground"
+export { createInlineDemoProject, createReactDemoFiles } from "./playground/project"
 export type {
   AlmostNodeFile,
   AlmostNodeFileContent,
   AlmostNodeFiles,
-  AlmostNodeFilesystemOptions,
-  AlmostNodeWorkspace,
-  AlmostNodeWorkspaceOptions,
-  AlmostNodeDemoRuntimeOptions,
-  InlineDemoPreviewProps,
   InlineDemoProject,
   InlineDemoProjectOptions,
-  ReactCodePreviewProps,
-  ReactDemoProps,
-} from "./playground"
+  ReactDemoFilesOptions,
+} from "./playground/project"
 export { resolveAsset, setAssetBase } from "./assets"
 export { createBundledSourceClient, createViteSourceClient, SourcePreview } from "./source"
 export type {
@@ -108,8 +92,6 @@ export {
   serializeInline,
   serializeReference,
 } from "./gitbook/inline"
-export { Streamdown } from "streamdown"
-export type { StreamdownProps } from "streamdown"
 export type * from "./gitbook/ast"
 export { PACKAGE_MANAGERS, packageManagerCommands } from "./gitbook/package-managers"
 export { flattenBlocks, flattenForPlainMarkdown } from "./gitbook/flatten"

package/src/playground/PlaygroundStreamdown.tsx

@@ -1,73 +1,40 @@
-import { useContext, useMemo } from "react"
+import { useContext } from "react"
 
-import { DocsRenderer, type DocRenderOptions, type LivePreviewRenderer, type SourceReferenceRenderer } from "../docs/DocsRenderer"
-import { parseMarkdown, trimPartialInlineToken } from "../gitbook/parse"
+import type { LivePreviewRenderer } from "../docs/DocsRenderer"
 import { DocstreamDemoRuntimeContext } from "../demo/context"
+import { GitbookStreamdown, type GitbookStreamdownProps } from "../streamdown"
 import { almostNodeDemoRuntime } from "./InlineDemoPreview"
 import { ReactCodePreview } from "./ReactCodePreview"
 
-export interface PlaygroundStreamdownProps extends DocRenderOptions {
-  children?: string
-  sourceRenderer?: SourceReferenceRenderer
-  className?: string
-  isAnimating?: boolean
-  isStreaming?: boolean
-  markdown?: string
-}
+export type PlaygroundStreamdownProps = GitbookStreamdownProps
 
 /**
- * The full renderer variant. It keeps the optional almost-node playground
- * behind an explicit import boundary; markdown-only consumers should use the
- * `@brett_lamy/docstream/streamdown` entry instead. Live code fences and
- * `{% demo %}` blocks with inline files (and no resolver) run in almost-node.
+ * A `LivePreviewRenderer` that runs `live` React/JSX/TSX code fences in almost-node.
+ * Pass it as `liveRenderer` to the root `GitbookStreamdown` / `DocsRenderer` (or the editor).
  */
-export function PlaygroundStreamdown({
-  children,
-  className,
-  isAnimating,
-  isStreaming = false,
-  markdown,
-  sourceRenderer,
-  demoResolver,
-  demoRuntime,
-  demoDependencies,
-  pageActions,
-}: PlaygroundStreamdownProps) {
-  const content = markdown ?? children ?? ""
-  // Inline-file demos run in almost-node unless the host (or an outer renderer) chose a runtime.
-  const inheritedRuntime = useContext(DocstreamDemoRuntimeContext).runtime
-  const runtime = demoRuntime ?? inheritedRuntime ?? almostNodeDemoRuntime
-  const doc = useMemo(
-    () => parseMarkdown(isStreaming ? trimPartialInlineToken(content) : content),
-    [content, isStreaming]
-  )
-  const liveRenderer: LivePreviewRenderer = ({ files, entry, title, collapsedCodeLines, expandedCodeLines }) => (
-    <ReactCodePreview
-      files={files}
-      entry={entry}
-      title={title}
-      collapsedCodeLines={collapsedCodeLines}
-      expandedCodeLines={expandedCodeLines}
-    />
-  )
+export const almostNodeLiveRenderer: LivePreviewRenderer = ({ files, entry, title, collapsedCodeLines, expandedCodeLines }) => (
+  <ReactCodePreview
+    files={files}
+    entry={entry}
+    title={title}
+    collapsedCodeLines={collapsedCodeLines}
+    expandedCodeLines={expandedCodeLines}
+  />
+)
 
+/**
+ * `GitbookStreamdown` with the almost-node playground wired in: live code fences and
+ * `{% demo %}` blocks with inline files (and no resolver) run in almost-node
+ * (`@agent-wasm/core`, an optional peer dependency — install it to use this entry).
+ * Explicit `liveRenderer` / `demoRuntime` props (or an outer runtime context) still win.
+ */
+export function PlaygroundStreamdown({ liveRenderer, demoRuntime, ...props }: PlaygroundStreamdownProps) {
+  const inheritedRuntime = useContext(DocstreamDemoRuntimeContext).runtime
   return (
-    <div
-      aria-busy={isAnimating ?? isStreaming}
-      className={className}
-      data-docstream=""
-      data-streaming={isStreaming ? "" : undefined}
-    >
-      <DocsRenderer
-        doc={doc}
-        markdown={content}
-        liveRenderer={liveRenderer}
-        sourceRenderer={sourceRenderer}
-        demoResolver={demoResolver}
-        demoRuntime={runtime}
-        demoDependencies={demoDependencies}
-        pageActions={isStreaming ? false : pageActions}
-      />
-    </div>
+    <GitbookStreamdown
+      {...props}
+      liveRenderer={liveRenderer ?? almostNodeLiveRenderer}
+      demoRuntime={demoRuntime ?? inheritedRuntime ?? almostNodeDemoRuntime}
+    />
   )
 }

package/src/playground/filesystem.ts

@@ -1,20 +1,13 @@
 import type { ContainerInstance, ContainerOptions, VirtualFS } from "@agent-wasm/core"
+import {
+  normalizeAlmostNodeFiles,
+  normalizeAlmostNodePath,
+  type AlmostNodeFileContent,
+  type AlmostNodeFiles,
+  type AlmostNodeFilesystemOptions,
+} from "./project"
 
-export type AlmostNodeFileContent = string | Uint8Array
-
-export interface AlmostNodeFile {
-  path: string
-  content: AlmostNodeFileContent
-}
-
-export type AlmostNodeFiles =
-  | Readonly<Record<string, AlmostNodeFileContent>>
-  | readonly AlmostNodeFile[]
-
-export interface AlmostNodeFilesystemOptions {
-  /** Prefix for relative file paths. Defaults to the virtual root. */
-  root?: string
-}
+export * from "./project"
 
 export interface AlmostNodeWorkspaceOptions extends Omit<ContainerOptions, "cwd"> {
   /** Project root used as the container cwd and Vite root. */
@@ -44,49 +37,6 @@ async function loadAlmostNode(): Promise<AlmostNodeModule> {
   }
 }
 
-export function normalizeAlmostNodePath(path: string, root = "/"): string {
-  const normalizedRoot = normalizeRoot(root)
-  const source = path.replaceAll("\\", "/")
-  const absolute = source.startsWith("/") ? source : `${normalizedRoot}/${source}`
-  const result = normalizeAbsolutePath(absolute)
-
-  if (normalizedRoot !== "/" && result !== normalizedRoot && !result.startsWith(`${normalizedRoot}/`)) {
-    throw new Error(`File path escapes the almost-node root: ${path}`)
-  }
-  return result
-}
-
-function normalizeAbsolutePath(path: string): string {
-  const parts: string[] = []
-
-  for (const part of path.split("/")) {
-    if (!part || part === ".") continue
-    if (part === "..") {
-      if (parts.length > 0) parts.pop()
-      continue
-    }
-    if (part.includes("\0")) throw new Error("almost-node file paths cannot contain null bytes")
-    parts.push(part)
-  }
-
-  const result = `/${parts.join("/")}`
-  return result === "" ? "/" : result
-}
-
-export function normalizeAlmostNodeFiles(files: AlmostNodeFiles): AlmostNodeFile[] {
-  if (Array.isArray(files)) return files.map((file) => ({ ...file }))
-  return Object.entries(files).map(([path, content]) => ({ path, content }))
-}
-
-export function toAlmostNodeFileMap(files: AlmostNodeFiles): Record<string, AlmostNodeFileContent> {
-  return Object.fromEntries(normalizeAlmostNodeFiles(files).map(({ path, content }) => [path, content]))
-}
-
-function normalizeRoot(root: string): string {
-  const normalized = normalizeAbsolutePath(root.replaceAll("\\", "/"))
-  return normalized === "/" ? normalized : normalized.replace(/\/$/, "")
-}
-
 function parentDirectory(path: string): string {
   const index = path.lastIndexOf("/")
   return index <= 0 ? "/" : path.slice(0, index)
@@ -110,7 +60,7 @@ export async function createAlmostNodeFilesystem(
   options: AlmostNodeFilesystemOptions = {},
 ): Promise<VirtualFS> {
   const { VirtualFS } = await loadAlmostNode()
-  const root = normalizeRoot(options.root ?? "/")
+  const root = normalizeAlmostNodePath(options.root ?? "/")
   const vfs = new VirtualFS()
   writeFilesToVfs(vfs, files, root)
   return vfs
@@ -125,7 +75,7 @@ export async function createAlmostNodeWorkspace(
   options: AlmostNodeWorkspaceOptions = {},
 ): Promise<AlmostNodeWorkspace> {
   const { root: requestedRoot, ...containerOptions } = options
-  const root = normalizeRoot(requestedRoot ?? "/")
+  const root = normalizeAlmostNodePath(requestedRoot ?? "/")
   const { createContainer } = await loadAlmostNode()
   const container = createContainer({ ...containerOptions, cwd: root })
 
@@ -152,133 +102,3 @@ export async function createAlmostNodeWorkspace(
   }
 }
 
-export interface ReactDemoFilesOptions {
-  entry?: string
-  /** Extra npm dependencies for the generated package.json (ignored when the files bring one). */
-  dependencies?: Record<string, string>
-}
-
-/**
- * Add the tiny Vite/React shell needed by a file map that only contains source
- * files. Existing package.json and index.html files are always respected.
- */
-export function createReactDemoFiles(
-  files: AlmostNodeFiles,
-  options: ReactDemoFilesOptions = {},
-): Record<string, AlmostNodeFileContent> {
-  const map = toAlmostNodeFileMap(files)
-  const entry = normalizeAlmostNodePath(options.entry ?? "/src/main.jsx")
-  const has = (candidate: string) => Object.keys(map).some((path) => normalizeAlmostNodePath(path) === candidate)
-
-  if (!has("/package.json")) {
-    map["/package.json"] = JSON.stringify(
-      {
-        name: "docstream-react-demo",
-        private: true,
-        type: "module",
-        dependencies: { react: "^19.0.0", "react-dom": "^19.0.0", ...options.dependencies },
-      },
-      null,
-      2,
-    )
-  }
-
-  if (!has("/index.html")) {
-    const entryUrl = `.${entry}`
-    map["/index.html"] = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Docstream React demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="${entryUrl}"></script>
-  </body>
-</html>
-`
-  }
-
-  return map
-}
-
-export interface InlineDemoProjectOptions {
-  /** Entry file among `files` (relative path). Defaults to the first file. */
-  entry?: string
-  /** Extra npm dependencies (merged over a `package.json` among the files, if any). */
-  dependencies?: Record<string, string>
-}
-
-export interface InlineDemoProject {
-  /** Complete almost-node project: the demo under `/src/demo/`, a wrapper entry, package.json, index.html. */
-  files: Record<string, AlmostNodeFileContent>
-  /** The Vite entry to hand to `createReactDemoFiles` / `ReactDemo`. */
-  entry: string
-  /** Whether the entry is wrapped (so `?variant=` reaches the component as its `variant` prop). */
-  wrapped: boolean
-}
-
-/** Folder the inline demo's files are written to inside the almost-node project. */
-export const INLINE_DEMO_DIR = "/src/demo"
-const WRAPPER_ENTRY = "/src/__docstream_demo_entry.js"
-
-function selfMounting(source: string): boolean {
-  return /\bcreateRoot\s*\(|\bReactDOM\.render\s*\(|\bhydrateRoot\s*\(/.test(source)
-}
-
-/**
- * Turn a `{% demo %}` block's inline files into a runnable almost-node project.
- *
- * The files go under `/src/demo/` (relative imports between them keep working). A tiny
- * wrapper entry imports the entry file, takes its default export (or the first exported
- * function), and renders it with `variant` read from the page's `?variant=` query — so
- * switching variants just reloads the iframe, no new Vite server. An entry that mounts
- * itself (`createRoot(…)`) is used directly instead, and receives no `variant`.
- *
- * A `package.json` among the files contributes its `dependencies`; `options.dependencies`
- * are merged over them. Bare imports resolve through almost-node (installed packages, else
- * esm.sh at the major version declared here), with `react`/`react-dom` provided.
- */
-export function createInlineDemoProject(
-  files: readonly { path: string; content: string }[],
-  options: InlineDemoProjectOptions = {},
-): InlineDemoProject {
-  const map: Record<string, AlmostNodeFileContent> = {}
-  let packageDeps: Record<string, string> = {}
-  for (const file of files) {
-    const relative = file.path.replace(/^\.?\/+/, "")
-    if (relative === "package.json") {
-      try {
-        const pkg = JSON.parse(file.content) as { dependencies?: Record<string, string>; devDependencies?: Record<string, string> }
-        packageDeps = { ...pkg.devDependencies, ...pkg.dependencies }
-      } catch {
-        // Not JSON: keep it as a plain file.
-      }
-    }
-    map[normalizeAlmostNodePath(relative, INLINE_DEMO_DIR)] = file.content
-  }
-  const entryFile = files.find((f) => f.path === options.entry) ?? files[0]
-  if (!entryFile) throw new Error("An inline demo needs at least one file")
-  const entryPath = normalizeAlmostNodePath(entryFile.path.replace(/^\.?\/+/, ""), INLINE_DEMO_DIR)
-  const dependencies = { ...packageDeps, ...options.dependencies }
-  const wrapped = !selfMounting(entryFile.content)
-  if (wrapped) {
-    const specifier = `.${entryPath.slice("/src".length)}`
-    map[WRAPPER_ENTRY] = `import { createElement } from "react"
-import { createRoot } from "react-dom/client"
-import * as demo from ${JSON.stringify(specifier)}
-
-const Component = demo.default ?? Object.values(demo).find((value) => typeof value === "function")
-const variant = new URLSearchParams(location.search).get("variant")
-const props = variant === null ? {} : { variant }
-createRoot(document.getElementById("root")).render(
-  Component
-    ? createElement(Component, props)
-    : createElement("pre", null, ${JSON.stringify(`${entryFile.path} has no default export to render.`)}),
-)
-`
-  }
-  const entry = wrapped ? WRAPPER_ENTRY : entryPath
-  return { files: createReactDemoFiles(map, { entry, dependencies }), entry, wrapped }
-}

package/src/playground/index.ts

@@ -1,3 +1,7 @@
+/* `@brett_lamy/docstream/playground` — the only entry that touches almost-node
+   (`@agent-wasm/core`, an optional peer dependency). Install it to use anything here. */
+export { PlaygroundStreamdown, PlaygroundStreamdown as GitbookStreamdown, almostNodeLiveRenderer } from "./PlaygroundStreamdown"
+export type { PlaygroundStreamdownProps, PlaygroundStreamdownProps as GitbookStreamdownProps } from "./PlaygroundStreamdown"
 export { ReactCodePreview, ReactDemo, useAlmostNodeServer } from "./ReactCodePreview"
 export type { AlmostNodeServerOptions, AlmostNodeServerState, PreviewState, ReactCodePreviewProps, ReactDemoProps } from "./ReactCodePreview"
 export { InlineDemoPreview, almostNodeDemoRuntime, createAlmostNodeDemoRuntime } from "./InlineDemoPreview"

package/src/playground/project.ts

@@ -0,0 +1,194 @@
+/* Pure, runtime-free helpers for describing an almost-node project as a file map.
+   Nothing here imports `@agent-wasm/core`, so these are safe to use from the package
+   root; the runtime itself lives in ./filesystem (the `/playground` entry). */
+
+export type AlmostNodeFileContent = string | Uint8Array
+
+export interface AlmostNodeFile {
+  path: string
+  content: AlmostNodeFileContent
+}
+
+export type AlmostNodeFiles =
+  | Readonly<Record<string, AlmostNodeFileContent>>
+  | readonly AlmostNodeFile[]
+
+export interface AlmostNodeFilesystemOptions {
+  /** Prefix for relative file paths. Defaults to the virtual root. */
+  root?: string
+}
+
+export function normalizeAlmostNodePath(path: string, root = "/"): string {
+  const normalizedRoot = normalizeRoot(root)
+  const source = path.replaceAll("\\", "/")
+  const absolute = source.startsWith("/") ? source : `${normalizedRoot}/${source}`
+  const result = normalizeAbsolutePath(absolute)
+
+  if (normalizedRoot !== "/" && result !== normalizedRoot && !result.startsWith(`${normalizedRoot}/`)) {
+    throw new Error(`File path escapes the almost-node root: ${path}`)
+  }
+  return result
+}
+
+function normalizeAbsolutePath(path: string): string {
+  const parts: string[] = []
+
+  for (const part of path.split("/")) {
+    if (!part || part === ".") continue
+    if (part === "..") {
+      if (parts.length > 0) parts.pop()
+      continue
+    }
+    if (part.includes("\0")) throw new Error("almost-node file paths cannot contain null bytes")
+    parts.push(part)
+  }
+
+  const result = `/${parts.join("/")}`
+  return result === "" ? "/" : result
+}
+
+export function normalizeAlmostNodeFiles(files: AlmostNodeFiles): AlmostNodeFile[] {
+  if (Array.isArray(files)) return files.map((file) => ({ ...file }))
+  return Object.entries(files).map(([path, content]) => ({ path, content }))
+}
+
+export function toAlmostNodeFileMap(files: AlmostNodeFiles): Record<string, AlmostNodeFileContent> {
+  return Object.fromEntries(normalizeAlmostNodeFiles(files).map(({ path, content }) => [path, content]))
+}
+
+function normalizeRoot(root: string): string {
+  const normalized = normalizeAbsolutePath(root.replaceAll("\\", "/"))
+  return normalized === "/" ? normalized : normalized.replace(/\/$/, "")
+}
+
+
+export interface ReactDemoFilesOptions {
+  entry?: string
+  /** Extra npm dependencies for the generated package.json (ignored when the files bring one). */
+  dependencies?: Record<string, string>
+}
+
+/**
+ * Add the tiny Vite/React shell needed by a file map that only contains source
+ * files. Existing package.json and index.html files are always respected.
+ */
+export function createReactDemoFiles(
+  files: AlmostNodeFiles,
+  options: ReactDemoFilesOptions = {},
+): Record<string, AlmostNodeFileContent> {
+  const map = toAlmostNodeFileMap(files)
+  const entry = normalizeAlmostNodePath(options.entry ?? "/src/main.jsx")
+  const has = (candidate: string) => Object.keys(map).some((path) => normalizeAlmostNodePath(path) === candidate)
+
+  if (!has("/package.json")) {
+    map["/package.json"] = JSON.stringify(
+      {
+        name: "docstream-react-demo",
+        private: true,
+        type: "module",
+        dependencies: { react: "^19.0.0", "react-dom": "^19.0.0", ...options.dependencies },
+      },
+      null,
+      2,
+    )
+  }
+
+  if (!has("/index.html")) {
+    const entryUrl = `.${entry}`
+    map["/index.html"] = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Docstream React demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${entryUrl}"></script>
+  </body>
+</html>
+`
+  }
+
+  return map
+}
+
+export interface InlineDemoProjectOptions {
+  /** Entry file among `files` (relative path). Defaults to the first file. */
+  entry?: string
+  /** Extra npm dependencies (merged over a `package.json` among the files, if any). */
+  dependencies?: Record<string, string>
+}
+
+export interface InlineDemoProject {
+  /** Complete almost-node project: the demo under `/src/demo/`, a wrapper entry, package.json, index.html. */
+  files: Record<string, AlmostNodeFileContent>
+  /** The Vite entry to hand to `createReactDemoFiles` / `ReactDemo`. */
+  entry: string
+  /** Whether the entry is wrapped (so `?variant=` reaches the component as its `variant` prop). */
+  wrapped: boolean
+}
+
+/** Folder the inline demo's files are written to inside the almost-node project. */
+export const INLINE_DEMO_DIR = "/src/demo"
+const WRAPPER_ENTRY = "/src/__docstream_demo_entry.js"
+
+function selfMounting(source: string): boolean {
+  return /\bcreateRoot\s*\(|\bReactDOM\.render\s*\(|\bhydrateRoot\s*\(/.test(source)
+}
+
+/**
+ * Turn a `{% demo %}` block's inline files into a runnable almost-node project.
+ *
+ * The files go under `/src/demo/` (relative imports between them keep working). A tiny
+ * wrapper entry imports the entry file, takes its default export (or the first exported
+ * function), and renders it with `variant` read from the page's `?variant=` query — so
+ * switching variants just reloads the iframe, no new Vite server. An entry that mounts
+ * itself (`createRoot(…)`) is used directly instead, and receives no `variant`.
+ *
+ * A `package.json` among the files contributes its `dependencies`; `options.dependencies`
+ * are merged over them. Bare imports resolve through almost-node (installed packages, else
+ * esm.sh at the major version declared here), with `react`/`react-dom` provided.
+ */
+export function createInlineDemoProject(
+  files: readonly { path: string; content: string }[],
+  options: InlineDemoProjectOptions = {},
+): InlineDemoProject {
+  const map: Record<string, AlmostNodeFileContent> = {}
+  let packageDeps: Record<string, string> = {}
+  for (const file of files) {
+    const relative = file.path.replace(/^\.?\/+/, "")
+    if (relative === "package.json") {
+      try {
+        const pkg = JSON.parse(file.content) as { dependencies?: Record<string, string>; devDependencies?: Record<string, string> }
+        packageDeps = { ...pkg.devDependencies, ...pkg.dependencies }
+      } catch {
+        // Not JSON: keep it as a plain file.
+      }
+    }
+    map[normalizeAlmostNodePath(relative, INLINE_DEMO_DIR)] = file.content
+  }
+  const entryFile = files.find((f) => f.path === options.entry) ?? files[0]
+  if (!entryFile) throw new Error("An inline demo needs at least one file")
+  const entryPath = normalizeAlmostNodePath(entryFile.path.replace(/^\.?\/+/, ""), INLINE_DEMO_DIR)
+  const dependencies = { ...packageDeps, ...options.dependencies }
+  const wrapped = !selfMounting(entryFile.content)
+  if (wrapped) {
+    const specifier = `.${entryPath.slice("/src".length)}`
+    map[WRAPPER_ENTRY] = `import { createElement } from "react"
+import { createRoot } from "react-dom/client"
+import * as demo from ${JSON.stringify(specifier)}
+
+const Component = demo.default ?? Object.values(demo).find((value) => typeof value === "function")
+const variant = new URLSearchParams(location.search).get("variant")
+const props = variant === null ? {} : { variant }
+createRoot(document.getElementById("root")).render(
+  Component
+    ? createElement(Component, props)
+    : createElement("pre", null, ${JSON.stringify(`${entryFile.path} has no default export to render.`)}),
+)
+`
+  }
+  const entry = wrapped ? WRAPPER_ENTRY : entryPath
+  return { files: createReactDemoFiles(map, { entry, dependencies }), entry, wrapped }
+}