mulmocast 2.20.0 → 2.22.0

package/lib/methods/mulmo_beat.js

@@ -1,16 +1,5 @@
 import { ImageMediaType } from "../types/index.js";
-/** Type guard: checks if animation value is an object config like { fps: 30 } */
-const isAnimationObject = (animation) => {
-    return typeof animation === "object" && animation !== null && !Array.isArray(animation);
-};
-/** Check if a value is a valid animation config (true or non-array object) */
-const isAnimationEnabled = (animation) => {
-    return animation === true || isAnimationObject(animation);
-};
-/** Check if movie mode (CDP screencast) is enabled */
-const isMovieMode = (animation) => {
-    return isAnimationObject(animation) && animation.movie === true;
-};
+import { isAnimationEnabled, isAnimationObject, isMovieMode } from "../utils/animation_config.js";
 /** Check if a beat has html_tailwind animation enabled */
 const isAnimatedHtmlTailwind = (beat) => {
     if (!beat.image || beat.image.type !== "html_tailwind")

package/lib/methods/mulmo_beat_node.d.ts

@@ -7,14 +7,8 @@ export declare const MulmoBeatMethods: {
         markdown?: (params: import("../types/type.js").BeatRenderParams) => string | undefined;
         html?: (params: import("../types/type.js").BeatRenderParams) => Promise<string | undefined>;
     };
-    isAnimationEnabled: (animation: unknown) => animation is true | {
-        fps?: number;
-        movie?: boolean;
-    };
-    isAnimationObject: (animation: unknown) => animation is {
-        fps?: number;
-        movie?: boolean;
-    };
+    isAnimationEnabled: (animation: unknown) => animation is true | import("../utils/animation_config.js").AnimationConfig;
+    isAnimationObject: (animation: unknown) => animation is import("../utils/animation_config.js").AnimationConfig;
     isAnimatedHtmlTailwind: (beat: MulmoBeat) => boolean;
     isPluginVideo: (beat: MulmoBeat) => boolean;
     isMovieMode: (animation: unknown) => boolean;

package/lib/types/schema.d.ts

@@ -4207,6 +4207,72 @@ export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
         }>>;
         staggerMs: z.ZodOptional<z.ZodNumber>;
         layout: z.ZodLiteral<"manifesto">;
+    }, z.core.$strip>, z.ZodObject<{
+        title: z.ZodString;
+        stepLabel: z.ZodOptional<z.ZodString>;
+        subtitle: z.ZodOptional<z.ZodString>;
+        figure: z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"chart">;
+            chartData: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+            title: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"mermaid">;
+            code: z.ZodString;
+            title: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>], "type">;
+        accentColor: z.ZodOptional<z.ZodEnum<{
+            primary: "primary";
+            accent: "accent";
+            success: "success";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+        style: z.ZodOptional<z.ZodObject<{
+            bgColor: z.ZodOptional<z.ZodString>;
+            bgGradient: z.ZodOptional<z.ZodString>;
+            decorations: z.ZodOptional<z.ZodBoolean>;
+            bgOpacity: z.ZodOptional<z.ZodNumber>;
+            footer: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        eyebrow: z.ZodOptional<z.ZodObject<{
+            label: z.ZodString;
+            color: z.ZodOptional<z.ZodEnum<{
+                primary: "primary";
+                accent: "accent";
+                success: "success";
+                warning: "warning";
+                danger: "danger";
+                info: "info";
+                highlight: "highlight";
+            }>>;
+        }, z.core.$strip>>;
+        density: z.ZodOptional<z.ZodEnum<{
+            default: "default";
+            compact: "compact";
+        }>>;
+        titleSize: z.ZodOptional<z.ZodEnum<{
+            default: "default";
+            small: "small";
+            large: "large";
+            hero: "hero";
+        }>>;
+        subtitleSize: z.ZodOptional<z.ZodEnum<{
+            lead: "lead";
+            big: "big";
+            default: "default";
+        }>>;
+        intro: z.ZodOptional<z.ZodEnum<{
+            fade: "fade";
+            "fade-up": "fade-up";
+            "fade-down": "fade-down";
+            "slide-left": "slide-left";
+            "slide-right": "slide-right";
+            "zoom-in": "zoom-in";
+        }>>;
+        staggerMs: z.ZodOptional<z.ZodNumber>;
+        layout: z.ZodLiteral<"figure">;
     }, z.core.$strip>], "layout">;
     reference: z.ZodOptional<z.ZodString>;
     branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{
@@ -8644,6 +8710,72 @@ export declare const mulmoBeatSchema: z.ZodObject<{
             }>>;
             staggerMs: z.ZodOptional<z.ZodNumber>;
             layout: z.ZodLiteral<"manifesto">;
+        }, z.core.$strip>, z.ZodObject<{
+            title: z.ZodString;
+            stepLabel: z.ZodOptional<z.ZodString>;
+            subtitle: z.ZodOptional<z.ZodString>;
+            figure: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"chart">;
+                chartData: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+                title: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"mermaid">;
+                code: z.ZodString;
+                title: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>], "type">;
+            accentColor: z.ZodOptional<z.ZodEnum<{
+                primary: "primary";
+                accent: "accent";
+                success: "success";
+                warning: "warning";
+                danger: "danger";
+                info: "info";
+                highlight: "highlight";
+            }>>;
+            style: z.ZodOptional<z.ZodObject<{
+                bgColor: z.ZodOptional<z.ZodString>;
+                bgGradient: z.ZodOptional<z.ZodString>;
+                decorations: z.ZodOptional<z.ZodBoolean>;
+                bgOpacity: z.ZodOptional<z.ZodNumber>;
+                footer: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>>;
+            eyebrow: z.ZodOptional<z.ZodObject<{
+                label: z.ZodString;
+                color: z.ZodOptional<z.ZodEnum<{
+                    primary: "primary";
+                    accent: "accent";
+                    success: "success";
+                    warning: "warning";
+                    danger: "danger";
+                    info: "info";
+                    highlight: "highlight";
+                }>>;
+            }, z.core.$strip>>;
+            density: z.ZodOptional<z.ZodEnum<{
+                default: "default";
+                compact: "compact";
+            }>>;
+            titleSize: z.ZodOptional<z.ZodEnum<{
+                default: "default";
+                small: "small";
+                large: "large";
+                hero: "hero";
+            }>>;
+            subtitleSize: z.ZodOptional<z.ZodEnum<{
+                lead: "lead";
+                big: "big";
+                default: "default";
+            }>>;
+            intro: z.ZodOptional<z.ZodEnum<{
+                fade: "fade";
+                "fade-up": "fade-up";
+                "fade-down": "fade-down";
+                "slide-left": "slide-left";
+                "slide-right": "slide-right";
+                "zoom-in": "zoom-in";
+            }>>;
+            staggerMs: z.ZodOptional<z.ZodNumber>;
+            layout: z.ZodLiteral<"figure">;
         }, z.core.$strip>], "layout">;
         reference: z.ZodOptional<z.ZodString>;
         branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{
@@ -13927,6 +14059,72 @@ export declare const mulmoScriptSchema: z.ZodObject<{
                 }>>;
                 staggerMs: z.ZodOptional<z.ZodNumber>;
                 layout: z.ZodLiteral<"manifesto">;
+            }, z.core.$strip>, z.ZodObject<{
+                title: z.ZodString;
+                stepLabel: z.ZodOptional<z.ZodString>;
+                subtitle: z.ZodOptional<z.ZodString>;
+                figure: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"chart">;
+                    chartData: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+                    title: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"mermaid">;
+                    code: z.ZodString;
+                    title: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>], "type">;
+                accentColor: z.ZodOptional<z.ZodEnum<{
+                    primary: "primary";
+                    accent: "accent";
+                    success: "success";
+                    warning: "warning";
+                    danger: "danger";
+                    info: "info";
+                    highlight: "highlight";
+                }>>;
+                style: z.ZodOptional<z.ZodObject<{
+                    bgColor: z.ZodOptional<z.ZodString>;
+                    bgGradient: z.ZodOptional<z.ZodString>;
+                    decorations: z.ZodOptional<z.ZodBoolean>;
+                    bgOpacity: z.ZodOptional<z.ZodNumber>;
+                    footer: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>>;
+                eyebrow: z.ZodOptional<z.ZodObject<{
+                    label: z.ZodString;
+                    color: z.ZodOptional<z.ZodEnum<{
+                        primary: "primary";
+                        accent: "accent";
+                        success: "success";
+                        warning: "warning";
+                        danger: "danger";
+                        info: "info";
+                        highlight: "highlight";
+                    }>>;
+                }, z.core.$strip>>;
+                density: z.ZodOptional<z.ZodEnum<{
+                    default: "default";
+                    compact: "compact";
+                }>>;
+                titleSize: z.ZodOptional<z.ZodEnum<{
+                    default: "default";
+                    small: "small";
+                    large: "large";
+                    hero: "hero";
+                }>>;
+                subtitleSize: z.ZodOptional<z.ZodEnum<{
+                    lead: "lead";
+                    big: "big";
+                    default: "default";
+                }>>;
+                intro: z.ZodOptional<z.ZodEnum<{
+                    fade: "fade";
+                    "fade-up": "fade-up";
+                    "fade-down": "fade-down";
+                    "slide-left": "slide-left";
+                    "slide-right": "slide-right";
+                    "zoom-in": "zoom-in";
+                }>>;
+                staggerMs: z.ZodOptional<z.ZodNumber>;
+                layout: z.ZodLiteral<"figure">;
             }, z.core.$strip>], "layout">;
             reference: z.ZodOptional<z.ZodString>;
             branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{
@@ -18734,6 +18932,72 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                     }>>;
                     staggerMs: z.ZodOptional<z.ZodNumber>;
                     layout: z.ZodLiteral<"manifesto">;
+                }, z.core.$strip>, z.ZodObject<{
+                    title: z.ZodString;
+                    stepLabel: z.ZodOptional<z.ZodString>;
+                    subtitle: z.ZodOptional<z.ZodString>;
+                    figure: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"chart">;
+                        chartData: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+                        title: z.ZodOptional<z.ZodString>;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"mermaid">;
+                        code: z.ZodString;
+                        title: z.ZodOptional<z.ZodString>;
+                    }, z.core.$strip>], "type">;
+                    accentColor: z.ZodOptional<z.ZodEnum<{
+                        primary: "primary";
+                        accent: "accent";
+                        success: "success";
+                        warning: "warning";
+                        danger: "danger";
+                        info: "info";
+                        highlight: "highlight";
+                    }>>;
+                    style: z.ZodOptional<z.ZodObject<{
+                        bgColor: z.ZodOptional<z.ZodString>;
+                        bgGradient: z.ZodOptional<z.ZodString>;
+                        decorations: z.ZodOptional<z.ZodBoolean>;
+                        bgOpacity: z.ZodOptional<z.ZodNumber>;
+                        footer: z.ZodOptional<z.ZodString>;
+                    }, z.core.$strip>>;
+                    eyebrow: z.ZodOptional<z.ZodObject<{
+                        label: z.ZodString;
+                        color: z.ZodOptional<z.ZodEnum<{
+                            primary: "primary";
+                            accent: "accent";
+                            success: "success";
+                            warning: "warning";
+                            danger: "danger";
+                            info: "info";
+                            highlight: "highlight";
+                        }>>;
+                    }, z.core.$strip>>;
+                    density: z.ZodOptional<z.ZodEnum<{
+                        default: "default";
+                        compact: "compact";
+                    }>>;
+                    titleSize: z.ZodOptional<z.ZodEnum<{
+                        default: "default";
+                        small: "small";
+                        large: "large";
+                        hero: "hero";
+                    }>>;
+                    subtitleSize: z.ZodOptional<z.ZodEnum<{
+                        lead: "lead";
+                        big: "big";
+                        default: "default";
+                    }>>;
+                    intro: z.ZodOptional<z.ZodEnum<{
+                        fade: "fade";
+                        "fade-up": "fade-up";
+                        "fade-down": "fade-down";
+                        "slide-left": "slide-left";
+                        "slide-right": "slide-right";
+                        "zoom-in": "zoom-in";
+                    }>>;
+                    staggerMs: z.ZodOptional<z.ZodNumber>;
+                    layout: z.ZodLiteral<"figure">;
                 }, z.core.$strip>], "layout">;
                 reference: z.ZodOptional<z.ZodString>;
                 branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{

package/lib/utils/animation_config.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Reading an html_tailwind `animation` value. Pure and dependency-free — the PNG render and the
+ * browser fragment path decide "is this animated, at what fps" the same way, and the browser
+ * bundle must not reach the schema module to do it.
+ */
+export type AnimationConfig = {
+    fps?: number;
+    movie?: boolean;
+};
+/** Type guard: checks if animation value is an object config like { fps: 30 } */
+export declare const isAnimationObject: (animation: unknown) => animation is AnimationConfig;
+/** Check if a value is a valid animation config (true or non-array object) */
+export declare const isAnimationEnabled: (animation: unknown) => animation is true | AnimationConfig;
+/** Check if movie mode (CDP screencast) is enabled */
+export declare const isMovieMode: (animation: unknown) => boolean;

package/lib/utils/animation_config.js

@@ -0,0 +1,17 @@
+/**
+ * Reading an html_tailwind `animation` value. Pure and dependency-free — the PNG render and the
+ * browser fragment path decide "is this animated, at what fps" the same way, and the browser
+ * bundle must not reach the schema module to do it.
+ */
+/** Type guard: checks if animation value is an object config like { fps: 30 } */
+export const isAnimationObject = (animation) => {
+    return typeof animation === "object" && animation !== null && !Array.isArray(animation);
+};
+/** Check if a value is a valid animation config (true or non-array object) */
+export const isAnimationEnabled = (animation) => {
+    return animation === true || isAnimationObject(animation);
+};
+/** Check if movie mode (CDP screencast) is enabled */
+export const isMovieMode = (animation) => {
+    return isAnimationObject(animation) && animation.movie === true;
+};

package/lib/utils/beat_html/chart.d.ts

@@ -1,15 +1,11 @@
 import type { MulmoChartMedia } from "../../types/index.js";
-import type { BeatHtmlFragment } from "./type.js";
+import type { BeatHtmlFragment, BeatHtmlOptions } from "./type.js";
 /**
- * A chart beat as markup a host can inject.
+ * A chart beat as a deck `figure` slide, so it shares the `slide` beat's theme and its one
+ * host code path: `slideUtilityCss`, and the `[data-mulmo-chart]` canvas driven from the
+ * attribute rather than from an inline `<script>`, which neither runs through `innerHTML`
+ * nor survives sanitizing.
  *
- * The config rides on the canvas as `data-mulmo-chart` rather than in an inline `<script>`:
- * a script injected through `innerHTML` does not execute, and does not survive sanitizing
- * either. The attribute shape matches `@mulmocast/deck`'s, so a host that already drives
- * `[data-mulmo-chart]` for slides drives this too without a second code path.
- *
- * The markup itself comes from `image_plugins/chart_html.ts`, the same module the Node
- * render path uses — a second copy of it would drift, and the two paths have to draw the
- * same chart.
+ * The PNG path still draws from its own template, so the browser and the PNG differ in look.
  */
-export declare const chartToHtml: (image: MulmoChartMedia, idPrefix: string) => BeatHtmlFragment;
+export declare const chartToHtml: (image: MulmoChartMedia, options: BeatHtmlOptions) => BeatHtmlFragment;

package/lib/utils/beat_html/chart.js

@@ -1,21 +1,11 @@
-import { chartFragmentHtml, chartPluginCdns, chartTypeOf } from "../image_plugins/chart_html.js";
+import { deckSlideToHtml } from "./slide.js";
+import { backgroundDecoration } from "./decoration.js";
 /**
- * A chart beat as markup a host can inject.
+ * A chart beat as a deck `figure` slide, so it shares the `slide` beat's theme and its one
+ * host code path: `slideUtilityCss`, and the `[data-mulmo-chart]` canvas driven from the
+ * attribute rather than from an inline `<script>`, which neither runs through `innerHTML`
+ * nor survives sanitizing.
  *
- * The config rides on the canvas as `data-mulmo-chart` rather than in an inline `<script>`:
- * a script injected through `innerHTML` does not execute, and does not survive sanitizing
- * either. The attribute shape matches `@mulmocast/deck`'s, so a host that already drives
- * `[data-mulmo-chart]` for slides drives this too without a second code path.
- *
- * The markup itself comes from `image_plugins/chart_html.ts`, the same module the Node
- * render path uses — a second copy of it would drift, and the two paths have to draw the
- * same chart.
+ * The PNG path still draws from its own template, so the browser and the PNG differ in look.
  */
-export const chartToHtml = (image, idPrefix) => {
-    const plugins = chartPluginCdns(chartTypeOf(image.chartData));
-    return {
-        html: chartFragmentHtml(image.chartData, image.title, `${idPrefix}-chart`),
-        requires: ["chart"],
-        ...(plugins.length > 0 ? { chartPlugins: plugins } : {}),
-    };
-};
+export const chartToHtml = (image, options) => deckSlideToHtml({ layout: "figure", title: image.title, figure: { type: "chart", chartData: image.chartData } }, undefined, options, backgroundDecoration(image, options));

package/lib/utils/beat_html/decoration.d.ts

@@ -0,0 +1,16 @@
+import type { ResolvedBranding, SlideBranding } from "@mulmocast/deck";
+import type { BackgroundImage } from "../../types/index.js";
+import type { BeatHtmlFragment, BeatHtmlOptions } from "./type.js";
+export declare const safeMediaUrl: (url: string) => string;
+/** A textSlide / markdown fragment with `documentCss` for the background the PNG paints on `body`. */
+export declare const withDocumentBackground: (fragment: BeatHtmlFragment | undefined, image: {
+    backgroundImage?: BackgroundImage;
+}, options: BeatHtmlOptions) => BeatHtmlFragment | undefined;
+/** A chart / mermaid beat's background, as the branding layer of the figure slide deck draws it on. */
+export declare const backgroundDecoration: (image: {
+    backgroundImage?: BackgroundImage;
+}, options: BeatHtmlOptions) => {
+    branding?: ResolvedBranding;
+};
+/** A slide beat's branding, resolved as `convertBrandingToResolved` does on the Node side. */
+export declare const slideBranding: (beatBranding: SlideBranding | null | undefined, options: BeatHtmlOptions) => ResolvedBranding | undefined;

package/lib/utils/beat_html/decoration.js

@@ -0,0 +1,55 @@
+import { backgroundImageCss, backgroundImageLayout, resolveBackgroundImage } from "../image_plugins/bg_image_css.js";
+import { pickBranding } from "../image_plugins/slide_branding.js";
+import { mediaSrc } from "../image_plugins/media_html.js";
+import { neutralizeStyleTerminator } from "../html_escape.js";
+/**
+ * The decorations the PNG render adds around a beat's content — a background image, a slide's
+ * branding — resolved for the browser. The PNG path turns each image into a `data:` URI on disk;
+ * here the host says how its page reaches the file (`resolveMediaUrl`).
+ */
+// deck writes these urls into `style="…url('…')"` and `src="…"` unescaped, and a url from a script can carry a quote
+// (`z.url()` accepts one). Percent-encoding leaves a url that still loads and cannot leave either context.
+const UNSAFE_URL_CHARACTERS = /["'()\\<>\s]/g;
+export const safeMediaUrl = (url) => url.replace(UNSAFE_URL_CHARACTERS, (character) => `%${character.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
+const mediaUrl = (source, options) => {
+    const url = (options.resolveMediaUrl ?? mediaSrc)(source);
+    return url === undefined ? undefined : safeMediaUrl(url);
+};
+const paintedBackground = (beatBackgroundImage, options) => {
+    const backgroundImage = resolveBackgroundImage(beatBackgroundImage, options.backgroundImage);
+    if (!backgroundImage)
+        return undefined;
+    const url = typeof backgroundImage === "string" ? safeMediaUrl(backgroundImage) : mediaUrl(backgroundImage.source, options);
+    return url === undefined ? undefined : { url, ...backgroundImageLayout(backgroundImage) };
+};
+/** A textSlide / markdown fragment with `documentCss` for the background the PNG paints on `body`. */
+export const withDocumentBackground = (fragment, image, options) => {
+    const background = paintedBackground(image.backgroundImage, options);
+    if (!fragment || !background)
+        return fragment;
+    return { ...fragment, documentCss: neutralizeStyleTerminator(backgroundImageCss(background.url, background.size, background.opacity)) };
+};
+/** A chart / mermaid beat's background, as the branding layer of the figure slide deck draws it on. */
+export const backgroundDecoration = (image, options) => {
+    const background = paintedBackground(image.backgroundImage, options);
+    return background ? { branding: { backgroundImage: { dataUrl: background.url, size: background.size, opacity: background.opacity } } } : {};
+};
+const resolvedLogo = (logo, options) => {
+    const dataUrl = mediaUrl(logo.source, options);
+    return dataUrl === undefined ? undefined : { dataUrl, position: logo.position, width: logo.width };
+};
+const resolvedBrandingBackground = (backgroundImage, options) => {
+    const dataUrl = mediaUrl(backgroundImage.source, options);
+    if (dataUrl === undefined)
+        return undefined;
+    return { dataUrl, size: backgroundImage.size ?? "cover", opacity: backgroundImage.opacity ?? 1, bgOpacity: backgroundImage.bgOpacity };
+};
+/** A slide beat's branding, resolved as `convertBrandingToResolved` does on the Node side. */
+export const slideBranding = (beatBranding, options) => {
+    const branding = pickBranding(beatBranding, options.branding);
+    if (!branding)
+        return undefined;
+    const logo = branding.logo && resolvedLogo(branding.logo, options);
+    const backgroundImage = branding.backgroundImage && resolvedBrandingBackground(branding.backgroundImage, options);
+    return { ...(logo ? { logo } : {}), ...(backgroundImage ? { backgroundImage } : {}) };
+};

package/lib/utils/beat_html/html_tailwind.d.ts

@@ -4,12 +4,12 @@ import type { BeatHtmlFragment } from "./type.js";
 /**
  * An html_tailwind beat as markup a host can inject.
  *
- * The beat at rest — the same thing the Node dump path shows. This module generates no
- * `<script>`: the author's `script` FIELD, the swipe animation driver and the frame-based
- * `animation` all need script execution, which a fragment injected through `innerHTML`
- * cannot do and which the dump path has never emitted either. A `<script>` the author wrote
- * inside `html` is markup, and passes through unsanitized — see below. A beat whose only content is an animation therefore shows
- * its elements in their starting positions rather than nothing.
+ * `html` is the beat at rest — the same thing the Node dump path shows, with no generated
+ * `<script>`: a fragment injected through `innerHTML` cannot run one. The author's `script`
+ * FIELD, the swipe driver and the frame-based `animation` come back separately as
+ * `documentScript`, for a host that gives the beat a document of its own and can run them; it
+ * brings the beat to what the PNG shows (an animation's final frame). A `<script>` the author
+ * wrote inside `html` is markup, and passes through unsanitized — see below.
  *
  * The author's html is emitted as written. On this beat type markup IS the content — the
  * schema also accepts `script` — so escaping it would remove the feature rather than a

package/lib/utils/beat_html/html_tailwind.js

@@ -1,13 +1,14 @@
 import { htmlTailwindMarkup } from "../image_plugins/html_tailwind_markup.js";
+import { htmlTailwindDocumentCss, htmlTailwindDocumentScript } from "../image_plugins/html_tailwind_script.js";
 /**
  * An html_tailwind beat as markup a host can inject.
  *
- * The beat at rest — the same thing the Node dump path shows. This module generates no
- * `<script>`: the author's `script` FIELD, the swipe animation driver and the frame-based
- * `animation` all need script execution, which a fragment injected through `innerHTML`
- * cannot do and which the dump path has never emitted either. A `<script>` the author wrote
- * inside `html` is markup, and passes through unsanitized — see below. A beat whose only content is an animation therefore shows
- * its elements in their starting positions rather than nothing.
+ * `html` is the beat at rest — the same thing the Node dump path shows, with no generated
+ * `<script>`: a fragment injected through `innerHTML` cannot run one. The author's `script`
+ * FIELD, the swipe driver and the frame-based `animation` come back separately as
+ * `documentScript`, for a host that gives the beat a document of its own and can run them; it
+ * brings the beat to what the PNG shows (an animation's final frame). A `<script>` the author
+ * wrote inside `html` is markup, and passes through unsanitized — see below.
  *
  * The author's html is emitted as written. On this beat type markup IS the content — the
  * schema also accepts `script` — so escaping it would remove the feature rather than a
@@ -16,5 +17,10 @@ import { htmlTailwindMarkup } from "../image_plugins/html_tailwind_markup.js";
  */
 export const htmlTailwindToHtml = (image) => {
     const html = htmlTailwindMarkup(image);
-    return html === "" ? undefined : { html };
+    const documentScript = htmlTailwindDocumentScript(image);
+    const documentCss = htmlTailwindDocumentCss(image);
+    // A script-only beat draws itself, so it is a fragment with empty markup rather than nothing.
+    if (!documentScript && html === "")
+        return undefined;
+    return { html, ...(documentCss ? { documentCss } : {}), ...(documentScript ? { documentScript } : {}) };
 };

package/lib/utils/beat_html/index.js

@@ -6,6 +6,7 @@ import { imageToHtml, movieToHtml } from "./media.js";
 import { mermaidToHtml } from "./mermaid.js";
 import { slideToHtml } from "./slide.js";
 import { assertSafeElementId } from "../element_id.js";
+import { withDocumentBackground } from "./decoration.js";
 export { textSlideToMarkdown, textSlideToHtml } from "./text_slide.js";
 export { markdownToHtml } from "./markdown.js";
 /**
@@ -42,13 +43,13 @@ export const beatToHtml = (beat, options) => {
     assertSafeElementId(options.idPrefix);
     switch (image.type) {
         case "textSlide":
-            return textSlideToHtml(image);
+            return withDocumentBackground(textSlideToHtml(image), image, options);
         case "markdown":
-            return markdownToHtml(image, options.idPrefix);
+            return withDocumentBackground(markdownToHtml(image, options.idPrefix), image, options);
         case "chart":
-            return chartToHtml(image, options.idPrefix);
+            return chartToHtml(image, options);
         case "mermaid":
-            return mermaidToHtml(image, options.idPrefix);
+            return mermaidToHtml(image, options);
         case "image":
             // The only description of the picture this module can reach. A host with more should
             // set its own alt; an <img> with none makes a screen reader read the file name.

package/lib/utils/beat_html/mermaid.d.ts

@@ -1,14 +1,11 @@
 import type { MulmoMermaidMedia } from "../../types/index.js";
-import type { BeatHtmlFragment } from "./type.js";
+import type { BeatHtmlFragment, BeatHtmlOptions } from "./type.js";
 /**
- * A mermaid beat as markup a host can inject.
+ * A mermaid beat as a deck `figure` slide — see `chart.ts` for why deck draws it.
  *
  * Only `code.kind === "text"` renders. The other kinds — `url`, `path`, `base64` — are
  * resolved by `MulmoMediaSourceMethods.getText`, which fetches and reads files, so they
  * cannot be reached from here and `beatToHtml` returns undefined rather than inventing a
  * placeholder. `mermaid.ts`'s own markdown dump already draws the same line.
- *
- * The markup comes from `image_plugins/mermaid_html.ts`, the module the Node render path
- * uses, so the browser and the PNG draw the same diagram.
  */
-export declare const mermaidToHtml: (image: MulmoMermaidMedia, idPrefix: string) => BeatHtmlFragment | undefined;
+export declare const mermaidToHtml: (image: MulmoMermaidMedia, options: BeatHtmlOptions) => BeatHtmlFragment | undefined;

package/lib/utils/beat_html/mermaid.js

@@ -1,22 +1,17 @@
-import { mermaidHtml } from "../image_plugins/mermaid_html.js";
+import { deckSlideToHtml } from "./slide.js";
+import { backgroundDecoration } from "./decoration.js";
 /**
- * A mermaid beat as markup a host can inject.
+ * A mermaid beat as a deck `figure` slide — see `chart.ts` for why deck draws it.
  *
  * Only `code.kind === "text"` renders. The other kinds — `url`, `path`, `base64` — are
  * resolved by `MulmoMediaSourceMethods.getText`, which fetches and reads files, so they
  * cannot be reached from here and `beatToHtml` returns undefined rather than inventing a
  * placeholder. `mermaid.ts`'s own markdown dump already draws the same line.
- *
- * The markup comes from `image_plugins/mermaid_html.ts`, the module the Node render path
- * uses, so the browser and the PNG draw the same diagram.
  */
-export const mermaidToHtml = (image, idPrefix) => {
+export const mermaidToHtml = (image, options) => {
     if (image.code.kind !== "text")
         return undefined;
     const appendix = image.appendix?.join("\n") ?? "";
     const code = `${image.code.text}\n${appendix}`.trim();
-    return {
-        html: mermaidHtml(code, `${idPrefix}-mermaid`, image.title || "Diagram"),
-        requires: ["mermaid"],
-    };
+    return deckSlideToHtml({ layout: "figure", title: image.title || "Diagram", figure: { type: "mermaid", code } }, undefined, options, backgroundDecoration(image, options));
 };