footprint-storydeck 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.6.0 — a figure in any framework, and compiled JavaScript
+
+- **`StoryFigure`: the Scroll lens drives a figure it does not know how to draw.** A section's `figure` may
+  now be `{ mount(el), seek(beat), dispose() }` beside the React render function it already took. The lens
+  mounts it once into a plain element in the pinned stage, asks it to `seek` with the beat's plain coordinates
+  (`{ key, index, sectionKey, step }`) on every beat change, and prints the sentence a seek resolves to under
+  the figure (a refusal, verbatim) until a later seek answers; only the latest seek's answer is shown.
+  `isStoryFigure` is exported. Additive: render-function figures and HTML steps are unchanged.
+- **The package ships compiled JavaScript.** `dist/` holds each source file compiled on its own (JSX to
+  `react/jsx-runtime`, relative imports with `.js`, `'use client'` kept), so plain Node and any bundler load
+  it with no transform: the `.jsx` workarounds consumers needed (`transpilePackages`, a test runner's
+  inline list) are no longer required. Types stay the hand-kept `*.d.ts`. `npm run check:dist` loads every
+  door in plain Node and refuses a package that ships source JSX; CI runs it.
+
 ## 0.5.0 — PowerPoint, the exploded view, and a tour for decks nobody presents
 
 - **`footprint-storydeck/pptx`: the deck as a PowerPoint file.** `exportPptx` makes a slide per click: its settled

package/README.md

@@ -7,7 +7,7 @@
 - **Watch** — an animated, click-through slide deck.
 
 Same content, your lens. It's the footprintjs idea — *one canonical record, you choose the view* —
-applied to content. A React library; theme-agnostic; ships as source.
+applied to content. A React library; theme-agnostic; ships compiled ESM that Node and any bundler load as-is.
 
 > Demo (dogfooded — storydeck explaining storydeck): **[footprintjs.github.io/storydeck](https://footprintjs.github.io/storydeck/)**
 > First consumer: the **[footprintjs blog](https://footprintjs.github.io/blog/)**.
@@ -58,6 +58,32 @@ A function cannot come from JSON, so `figure` is not part of the authoring model
 builds sections from post.json + Markdown, and the consumer attaches `figure` to them. The beat a
 figure is handed carries `sectionKey`, `step` and `index` — which beat it is being asked to draw.
 
+### A figure in any framework: `StoryFigure`
+
+A section's `figure` may instead be a **`StoryFigure`** — three plain methods, no React:
+
+```ts
+interface StoryFigure {
+  mount(el: HTMLElement): void;                         // draw into this element
+  seek(beat: StoryFigureBeat): Promise<string | void>;  // the reader is on this beat: move there
+  dispose(): void;                                      // take down what mount drew
+}
+// StoryFigureBeat = { key, index, sectionKey, step } — plain data
+```
+
+```js
+const figure = { mount(el) { chart.attach(el); }, seek: (beat) => chart.goTo(beat.sectionKey), dispose() { chart.detach(); } };
+<ScrollyView sections={sections.map((s) => ({ ...s, figure }))} />
+```
+
+It is the seam for a figure the story should not have to know: a chart library, a canvas, another
+framework's component. `ScrollyView` adapts it in a thin host — mounted once while it is on stage (a
+different section's figure is disposed and the new one mounted), and asked to `seek` on every beat change.
+**A seek that cannot move says why:** it resolves to a sentence, and the lens prints that sentence under the
+figure, verbatim, until a later seek answers; it resolves nothing when it moved. Only the latest seek's
+answer is shown, and a seek that rejects is shown as the lens's own sentence. The lens judges nothing — the
+figure knows whether it can stand on a beat. `isStoryFigure(value)` is the check the lens uses.
+
 ## Focus: what a click is about, and what happens to the rest
 
 A talk often tells its story on **one picture** — a diagram, a page, a timeline — click by click. Each
@@ -434,8 +460,12 @@ const { theme, toggle, setTheme } = useTheme();   // flips an html class + persi
 | `renderVideo` · `planVideo` · `deckStageDriver` · `ffmpegMajor` | `footprint-storydeck/video` (Node only, ffmpeg 5.0+): the deck as a narrated video, with captions and chapters |
 | `exportPptx` · `pptxParts` · `zip` · `unzip` · `checkPptx` | `footprint-storydeck/pptx` (Node only): the deck as a PowerPoint file — a slide per click, its picture, notes and clip — through a footprintjs flowchart that records why |
 
-Types ship beside the source in `index.d.ts` — hand-kept (there is no build to generate them from),
-and here rather than in a consumer's shim, because a package's shape belongs in the package.
+The package ships compiled JavaScript (`dist/`, built by `npm run build`: each source file compiled on its
+own, JSX turned into `react/jsx-runtime` calls, every relative import given its `.js`, `'use client'` kept), so
+plain Node and every bundler load it with no transform of their own; `npm run check:dist` loads every door in
+plain Node and refuses a package that ships source JSX. Types ship in `index.d.ts` — hand-kept (nothing
+type-checks the JSX to generate them from), and here rather than in a consumer's shim, because a package's
+shape belongs in the package.
 
 ## Tests
 

package/dist/BlogView.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import SlideFigure from "./SlideFigure.js";
+import { finalStep } from "./sections.js";
+import { slugify } from "./slug.js";
+function BlogView({ sections }) {
+  const [copied, setCopied] = useState("");
+  function copyLink(e, id) {
+    e.preventDefault();
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    if (window.location.hash !== `#${id}`) window.history.replaceState(null, "", `#${id}`);
+    try {
+      navigator.clipboard.writeText(url);
+    } catch (_) {
+    }
+    setCopied(id);
+    setTimeout(() => setCopied((c) => c === id ? "" : c), 1600);
+  }
+  return /* @__PURE__ */ jsx("article", { children: sections.map((s) => {
+    const id = slugify(s.key);
+    return /* @__PURE__ */ jsxs("section", { id, className: "post-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "section-head", children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "section-anchor",
+            href: `#${id}`,
+            onClick: (e) => copyLink(e, id),
+            title: "Copy link to this section",
+            "aria-label": `Copy link to \u201C${s.heading}\u201D`,
+            children: "#"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "section-head-text", children: [
+          /* @__PURE__ */ jsx("p", { className: "eyebrow", children: s.label }),
+          /* @__PURE__ */ jsx("h2", { children: s.heading })
+        ] }),
+        copied === id ? /* @__PURE__ */ jsx("span", { className: "section-copied", "aria-live": "polite", children: "link copied \u2713" }) : null
+      ] }),
+      /* @__PURE__ */ jsx(SlideFigure, { html: finalStep(s) }),
+      s.body ? /* @__PURE__ */ jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: s.body } }) : null
+    ] }, id);
+  }) });
+}
+export {
+  BlogView as default
+};

package/dist/PostView.js

@@ -0,0 +1,170 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import BlogView from "./BlogView.js";
+import ScrollyView from "./ScrollyView.js";
+import SlideDeck from "./SlideDeck.js";
+const LENSES = [
+  { id: "read", label: "Read it" },
+  { id: "scrolly", label: "Scroll it" },
+  { id: "slides", label: "Watch it" }
+];
+const ESCAPE_LENSES = LENSES.filter((l) => l.id !== "slides");
+const NARROW_WATCH_MQ = "(max-width: 700px)";
+function isNarrowViewport() {
+  return typeof window.matchMedia === "function" && window.matchMedia(NARROW_WATCH_MQ).matches;
+}
+function fullscreenElement() {
+  return document.fullscreenElement || document.webkitFullscreenElement || null;
+}
+function PostView({ post }) {
+  const [view, setView] = useState("read");
+  const [takeover, setTakeover] = useState(false);
+  const [fsApi, setFsApi] = useState(false);
+  const stageRef = useRef(null);
+  const viewRef = useRef("read");
+  const autoFsRef = useRef(false);
+  const content = post.sections.filter((s) => s.key !== "Title" && s.key !== "Close");
+  const isWatch = view === "slides";
+  const idle = useIdleFade(isWatch);
+  useEffect(() => {
+    viewRef.current = view;
+  }, [view]);
+  const enterFullscreen = useCallback((auto) => {
+    const el = stageRef.current;
+    if (!el) return;
+    autoFsRef.current = !!auto;
+    const request = el.requestFullscreen || el.webkitRequestFullscreen;
+    if (!request) {
+      setTakeover(true);
+      return;
+    }
+    let p;
+    try {
+      p = request.call(el);
+    } catch (_) {
+      setTakeover(true);
+      return;
+    }
+    if (p && typeof p.catch === "function") {
+      p.catch(() => setTakeover(true));
+    } else if (auto) {
+      setTimeout(() => {
+        if (!fullscreenElement() && viewRef.current === "slides" && autoFsRef.current) setTakeover(true);
+      }, 500);
+    }
+  }, []);
+  const leaveFullscreen = useCallback(() => {
+    autoFsRef.current = false;
+    setTakeover(false);
+    if (!fullscreenElement()) return;
+    const exit = document.exitFullscreen || document.webkitExitFullscreen;
+    if (!exit) return;
+    try {
+      const p = exit.call(document);
+      if (p && typeof p.catch === "function") p.catch(() => {
+      });
+    } catch (_) {
+    }
+  }, []);
+  const choose = useCallback((next) => {
+    setView(next);
+    const u = new URL(window.location.href);
+    if (next === "read") u.searchParams.delete("view");
+    else u.searchParams.set("view", next);
+    window.history.replaceState(null, "", u);
+    if (next === "slides") {
+      if (isNarrowViewport()) enterFullscreen(true);
+    } else {
+      leaveFullscreen();
+    }
+  }, [enterFullscreen, leaveFullscreen]);
+  useEffect(() => {
+    const v = new URLSearchParams(window.location.search).get("view");
+    if (v === "slides" || v === "scrolly") setView(v);
+    if (v === "slides" && isNarrowViewport()) enterFullscreen(true);
+    const el = stageRef.current;
+    setFsApi(!!(el && (el.requestFullscreen || el.webkitRequestFullscreen)));
+  }, [enterFullscreen]);
+  useEffect(() => {
+    function onFullscreenChange() {
+      if (!fullscreenElement() && viewRef.current === "slides" && autoFsRef.current) choose("read");
+    }
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+    };
+  }, [choose]);
+  useEffect(() => {
+    if (!isWatch) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") choose("read");
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isWatch, choose]);
+  return /* @__PURE__ */ jsxs("main", { id: "main", className: "wrap wide", children: [
+    /* @__PURE__ */ jsxs("header", { className: "post-head", children: [
+      /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "Primer" }),
+      /* @__PURE__ */ jsx("h1", { children: post.title }),
+      /* @__PURE__ */ jsx("p", { className: "lead", children: post.description }),
+      /* @__PURE__ */ jsxs("p", { className: "byline", children: [
+        "By ",
+        post.author,
+        " \xB7 ",
+        (/* @__PURE__ */ new Date(post.date + "T00:00:00Z")).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "view-toggle", role: "group", "aria-label": "Choose a view", children: LENSES.map((l) => /* @__PURE__ */ jsx("button", { "aria-pressed": view === l.id, onClick: () => choose(l.id), children: l.label }, l.id)) }),
+    view === "read" ? /* @__PURE__ */ jsx(BlogView, { sections: content }) : null,
+    view === "scrolly" ? /* @__PURE__ */ jsx(ScrollyView, { sections: content }) : null,
+    /* @__PURE__ */ jsx("div", { ref: stageRef, className: `watch-stage${isWatch && takeover ? " is-takeover" : ""}`, children: isWatch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: `watch-lens-dock${idle ? " is-idle" : ""}`, role: "group", "aria-label": "Switch view", children: [
+        ESCAPE_LENSES.map((l) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => choose(l.id), children: l.label.replace(/ it$/, "") }, l.id)),
+        fsApi ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "watch-lens-fs",
+            "aria-label": "Toggle fullscreen",
+            title: "Full screen",
+            onClick: () => fullscreenElement() || takeover ? leaveFullscreen() : enterFullscreen(false),
+            children: "\u26F6"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "watch-lens-hint", title: "Press Esc to return to Read", "aria-hidden": "true", children: "Esc" })
+      ] }),
+      /* @__PURE__ */ jsx(SlideDeck, { steps: post.deckSteps, tour: post.tour })
+    ] }) : null })
+  ] });
+}
+function useIdleFade(active, ms = 2600) {
+  const [idle, setIdle] = useState(false);
+  useEffect(() => {
+    if (!active) {
+      setIdle(false);
+      return;
+    }
+    let timer = setTimeout(() => setIdle(true), ms);
+    function wake() {
+      setIdle(false);
+      clearTimeout(timer);
+      timer = setTimeout(() => setIdle(true), ms);
+    }
+    window.addEventListener("pointermove", wake);
+    window.addEventListener("touchstart", wake, { passive: true });
+    window.addEventListener("keydown", wake);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("pointermove", wake);
+      window.removeEventListener("touchstart", wake);
+      window.removeEventListener("keydown", wake);
+    };
+  }, [active, ms]);
+  return idle;
+}
+export {
+  PostView as default
+};

package/dist/ScrollyView.js

@@ -0,0 +1,93 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import SlideFigure from "./SlideFigure.js";
+import { slugify } from "./slug.js";
+import { isStoryFigure } from "./figure.js";
+function ScrollyView({ sections }) {
+  const beats = [];
+  sections.forEach((s) => {
+    s.steps.forEach((html, stepIdx) => {
+      beats.push({
+        key: `${slugify(s.key)}-${stepIdx}`,
+        index: beats.length,
+        html,
+        label: s.label,
+        heading: s.heading,
+        body: s.body,
+        // the section this beat belongs to, and which of its steps it is — what a live figure needs
+        // to know WHICH beat it is being asked to draw
+        sectionKey: s.key,
+        step: stepIdx,
+        firstOfSection: stepIdx === 0,
+        figure: isStoryFigure(s.figure) || typeof s.figure === "function" ? s.figure : null
+      });
+    });
+  });
+  const [active, setActive] = useState(0);
+  const refs = useRef([]);
+  useEffect(() => {
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            const i = Number(e.target.dataset.beat);
+            if (!Number.isNaN(i)) setActive(i);
+          }
+        });
+      },
+      { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
+      // fire as a beat crosses the viewport centre
+    );
+    refs.current.forEach((el) => el && io.observe(el));
+    return () => io.disconnect();
+  }, [beats.length]);
+  const activeBeat = beats[active] || beats[0];
+  const live = beats.some((b) => b.figure !== null);
+  return /* @__PURE__ */ jsxs("div", { className: `scrolly${live ? " scrolly-live" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "scrolly-stage", children: [
+      activeBeat ? activeBeat.figure !== null ? isStoryFigure(activeBeat.figure) ? /* @__PURE__ */ jsx(FigureHost, { figure: activeBeat.figure, beat: activeBeat }) : /* @__PURE__ */ jsx("div", { className: "scrolly-stage-live", children: activeBeat.figure(activeBeat) }) : /* @__PURE__ */ jsx(SlideFigure, { html: activeBeat.html }, active) : null,
+      /* @__PURE__ */ jsx("div", { className: "scrolly-rail", "aria-hidden": "true", children: beats.map((b, i) => /* @__PURE__ */ jsx("span", { className: i === active ? "on" : "" }, b.key)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "scrolly-flow", children: beats.map((b, i) => /* @__PURE__ */ jsxs("div", { className: "scrolly-beat", "data-beat": i, ref: (el) => refs.current[i] = el, children: [
+      b.firstOfSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "eyebrow", children: b.label }),
+        /* @__PURE__ */ jsx("h2", { children: b.heading }),
+        b.body ? /* @__PURE__ */ jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: b.body } }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "scrolly-beat-figure", children: /* @__PURE__ */ jsx(SlideFigure, { html: b.html }) })
+    ] }, b.key)) })
+  ] });
+}
+const UNREACHED = "this figure could not move to this beat";
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function FigureHost({ figure, beat }) {
+  const host = useRef(null);
+  const [said, setSaid] = useState(null);
+  useMountEffect(() => {
+    figure.mount(host.current);
+    return () => figure.dispose();
+  }, [figure]);
+  const { key, index, sectionKey, step } = beat;
+  useEffect(() => {
+    let current = true;
+    new Promise((resolve) => resolve(figure.seek({ key, index, sectionKey, step }))).then(
+      (answer) => {
+        if (current) setSaid(typeof answer === "string" && answer !== "" ? answer : null);
+      },
+      () => {
+        if (current) setSaid(UNREACHED);
+      }
+    );
+    return () => {
+      current = false;
+    };
+  }, [figure, key, index, sectionKey, step]);
+  return /* @__PURE__ */ jsxs("div", { className: "scrolly-stage-live", children: [
+    /* @__PURE__ */ jsx("div", { className: "scrolly-figure", ref: host }),
+    said === null ? null : /* @__PURE__ */ jsx("p", { className: "scrolly-figure-said", role: "status", children: said })
+  ] });
+}
+export {
+  ScrollyView as default
+};

package/dist/SlideDeck.js

@@ -0,0 +1,49 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useBasePath } from "./context.js";
+import { idleTour } from "./tour.js";
+import { focusRuntime } from "./focusHtml.js";
+function SlideDeck({ steps, tour }) {
+  const host = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const basePath = useBasePath();
+  const tourKey = tour ? JSON.stringify(tour) : "";
+  function copySlideLink() {
+    try {
+      navigator.clipboard.writeText(window.location.href);
+    } catch (_) {
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  }
+  useEffect(() => {
+    const el = host.current;
+    if (!el) return;
+    focusRuntime();
+    const inner = (steps || []).join("\n");
+    el.innerHTML = `<deck-stage no-rail width="1920" height="1080">${inner}</deck-stage>`;
+    if (!document.querySelector("script[data-deck-stage]")) {
+      const sc = document.createElement("script");
+      sc.src = `${basePath}/deck-stage.js`;
+      sc.setAttribute("data-deck-stage", "");
+      document.body.appendChild(sc);
+    }
+  }, [steps]);
+  useEffect(() => {
+    const stage = host.current?.querySelector("deck-stage");
+    if (!tourKey || !stage) return void 0;
+    const t = idleTour(stage, typeof tour === "string" ? { stops: tour } : tour);
+    return () => t.stop();
+  }, [steps, tourKey]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "deck-shell deck-scope", ref: host }),
+    /* @__PURE__ */ jsxs("div", { className: "deck-actions", children: [
+      /* @__PURE__ */ jsx("p", { className: "deck-hint", children: "\u2190 / \u2192 to navigate \xB7 Home / End to jump" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "deck-copy", onClick: copySlideLink, children: copied ? "link copied \u2713" : "Copy link to this slide" })
+    ] })
+  ] });
+}
+export {
+  SlideDeck as default
+};

package/dist/SlideFigure.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function SlideFigure({ html }) {
+  const box = useRef(null);
+  const canvas = useRef(null);
+  useEffect(() => {
+    const el = box.current, c = canvas.current;
+    if (!el || !c) return;
+    const fit = () => {
+      const s = el.clientWidth / 1920;
+      c.style.transform = `scale(${s})`;
+      el.style.height = 1080 * s + "px";
+    };
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "slide-figure deck-scope", ref: box, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "slide-figure-canvas", ref: canvas, dangerouslySetInnerHTML: { __html: html } }) });
+}
+export {
+  SlideFigure as default
+};

package/dist/ThemeToggle.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "./useTheme.js";
+function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+  return /* @__PURE__ */ jsx("button", { className: "theme-toggle", onClick: toggle, "aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} theme`, children: theme === "dark" ? /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19" })
+  ] }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" }) }) });
+}
+export {
+  ThemeToggle as default
+};

package/dist/content/loadPost.js

@@ -0,0 +1,25 @@
+import { renderMarkdown, splitBodyByMarkers } from "./markdown.js";
+import { compositeSlides } from "../sections.js";
+function assemblePost({ meta, sections, bodyMd, deckSlides }) {
+  const byLabel = new Map(compositeSlides(deckSlides).map((s) => [s.label, s.html]));
+  const bodies = splitBodyByMarkers(bodyMd || "");
+  const builtSections = sections.map((s) => {
+    const steps = (s.slides || []).map((label) => byLabel.get(label)).filter(Boolean);
+    return {
+      key: s.key,
+      label: s.label || s.key,
+      heading: s.heading || s.label || s.key,
+      steps,
+      body: bodies[s.key] ? renderMarkdown(bodies[s.key]) : ""
+    };
+  });
+  return {
+    ...meta,
+    sections: builtSections,
+    deckSteps: deckSlides.map((s) => s.html)
+    // full deck, in order, for Watch
+  };
+}
+export {
+  assemblePost
+};

package/dist/content/markdown.js

@@ -0,0 +1,23 @@
+import MarkdownIt from "markdown-it";
+const md = new MarkdownIt({ html: false, linkify: true, typographer: true, breaks: false });
+function renderMarkdown(src) {
+  return md.render(String(src || "").trim());
+}
+function splitBodyByMarkers(bodyMd) {
+  const out = {};
+  const re = /<!--\s*section:\s*([\w-]+)\s*-->/g;
+  const parts = [];
+  let m, last = null, lastIdx = 0;
+  while ((m = re.exec(bodyMd)) !== null) {
+    if (last !== null) parts.push([last, bodyMd.slice(lastIdx, m.index)]);
+    last = m[1];
+    lastIdx = re.lastIndex;
+  }
+  if (last !== null) parts.push([last, bodyMd.slice(lastIdx)]);
+  for (const [key, text] of parts) out[key] = text.trim();
+  return out;
+}
+export {
+  renderMarkdown,
+  splitBodyByMarkers
+};

package/dist/context.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const StoryDeckContext = createContext({ basePath: "" });
+function StoryDeckProvider({ basePath = "", children }) {
+  return /* @__PURE__ */ jsx(StoryDeckContext.Provider, { value: { basePath }, children });
+}
+function useBasePath() {
+  return useContext(StoryDeckContext).basePath;
+}
+export {
+  StoryDeckProvider,
+  useBasePath
+};

package/dist/figure.js

@@ -0,0 +1,6 @@
+function isStoryFigure(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.mount === "function" && typeof value.seek === "function" && typeof value.dispose === "function";
+}
+export {
+  isStoryFigure
+};