@cube-drone/marquee-html-renderer 0.1.0

package/dist/render.js

@@ -0,0 +1,566 @@
+// AST -> HTML string. The safety contract: author bytes reach the output
+// only through escapeText/escapeAttr, targets only through the profile's
+// allowlist, and attribute *names* are never author-controlled. Unknown
+// vocabulary shrugs (children survive, effect doesn't); comments render
+// nothing; invalid constructs render inert placeholders.
+import { bareWebProfile } from "./profile.js";
+export function render(node, profile = bareWebProfile) {
+    return renderNode(node, { profile, note: { n: 0, pending: [] } });
+}
+/** Asides render just below the paragraph (or heading) that triggered
+ * them - part of regular flow, no floats, no popups. */
+function flushNotes(ctx, html) {
+    if (ctx.note.pending.length === 0) {
+        return html;
+    }
+    const notes = ctx.note.pending.map((n) => `<p class="mq-note">${n}</p>`).join("");
+    ctx.note.pending = [];
+    return `${html}<aside class="mq-notes">${notes}</aside>`;
+}
+function renderNode(node, ctx) {
+    switch (node.type) {
+        case "document":
+            return `<div class="mq-doc">${children(node.children, ctx)}</div>`;
+        case "paragraph":
+            return flushNotes(ctx, `<p>${children(node.children, ctx)}</p>`);
+        case "heading": {
+            // HTML's ladder stops at h6; levels 7-8 (the grammar allows 1-8) keep
+            // real heading semantics via ARIA on a styled block.
+            const inner = children(node.children, ctx);
+            const html = node.level <= 6
+                ? `<h${node.level}>${inner}</h${node.level}>`
+                : `<p class="mq-h${node.level}" role="heading" aria-level="${node.level}">${inner}</p>`;
+            return flushNotes(ctx, html);
+        }
+        case "code_block": {
+            const lang = infoToken(node.info);
+            const cls = lang === null ? "" : ` class="language-${escapeAttr(lang)}"`;
+            const text = node.text === "" ? "" : `${escapeText(node.text)}\n`;
+            return `<pre class="mq-code"><code${cls}>${text}</code></pre>`;
+        }
+        case "blockquote":
+            return `<blockquote>${children(node.children, ctx)}</blockquote>`;
+        case "list": {
+            const tag = node.ordered ? "ol" : "ul";
+            return `<${tag}>${children(node.children, ctx)}</${tag}>`;
+        }
+        case "list_item":
+            return `<li>${children(node.children, ctx)}</li>`;
+        case "thematic_break":
+            return "<hr>";
+        case "directive":
+            return directive(node.name, node.attrs, node.children, ctx);
+        case "invalid_directive":
+            return `<div class="mq-invalid" data-reason="${escapeAttr(node.reason)}"></div>`;
+        case "comment":
+            return ""; // the anti-shrug: correct rendering is absence
+        case "text":
+            return escapeText(node.value);
+        case "emphasis":
+            return `<em>${children(node.children, ctx)}</em>`;
+        case "strong":
+            return `<strong>${children(node.children, ctx)}</strong>`;
+        case "strikethrough":
+            return `<del>${children(node.children, ctx)}</del>`;
+        case "code_span":
+            return `<code>${escapeText(node.text)}</code>`;
+        case "link": {
+            const inner = children(node.children, ctx);
+            return ctx.profile.linkAllowed(node.target)
+                ? `<a href="${escapeAttr(node.target)}">${inner}</a>`
+                : `<span class="mq-blocked">${inner}</span>`;
+        }
+        case "embed":
+            return embed(node.target, node.alt, ctx.profile);
+        case "turbolink":
+            return turbolink(node.target, undefined, ctx.profile);
+        case "span":
+            return span(node.name, node.attrs, node.children, ctx);
+        case "emoji": {
+            const resolved = ctx.profile.emoji(node.slug);
+            if (resolved !== null && typeof resolved === "object") {
+                const alt = resolved.alt ?? `:${node.slug}:`;
+                return `<img class="mq-emoji" src="${escapeAttr(resolved.image)}" alt="${escapeAttr(alt)}" loading="lazy">`;
+            }
+            return escapeText(resolved ?? `:${node.slug}:`);
+        }
+        case "hard_break":
+            return "<br>";
+    }
+}
+function children(nodes, ctx) {
+    return nodes.map((n) => renderNode(n, ctx)).join("");
+}
+// -- validation gates (closed value grammars; failures degrade, never emit)
+const HEX_OR_TOKEN = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$|^[a-z][a-z0-9-]{0,31}$/;
+const TOKEN = /^[a-z][a-z0-9-]{0,31}$/;
+const COUNT = /^[0-9]{1,4}$/;
+function isColorValue(v) {
+    return v !== undefined && HEX_OR_TOKEN.test(v);
+}
+function isToken(v) {
+    return v !== undefined && TOKEN.test(v);
+}
+/** The font vocabulary (closed, two tiers): four standard stacks that need
+ * no files, and the grab bag - SIL OFL faces the embedder serves itself
+ * (never a third-party CDN: fonts are a tracking vector, care-modes apply).
+ * Values are the `face` presentational attribute - the no-stylesheet floor;
+ * the mq-font-* class is the ceiling, where the real @font-face lives. */
+export const FONTS = {
+    // standard stacks
+    sans: "sans-serif",
+    serif: "serif",
+    mono: "monospace",
+    comic: "Comic Sans MS",
+    // the grab bag
+    "radio-canada": "Radio Canada",
+    "atkinson-hyperlegible": "Atkinson Hyperlegible",
+    lexend: "Lexend",
+    "zilla-slab": "Zilla Slab",
+    "playfair-display": "Playfair Display",
+    cormorant: "Cormorant",
+    "im-fell-english": "IM Fell English",
+    "uncial-antiqua": "Uncial Antiqua",
+    unifraktur: "UnifrakturMaguntia",
+    "jetbrains-mono": "JetBrains Mono",
+    vt323: "VT323",
+    "press-start": "Press Start 2P",
+    silkscreen: "Silkscreen",
+    "major-mono": "Major Mono Display",
+    orbitron: "Orbitron",
+    bungee: "Bungee",
+    monoton: "Monoton",
+    creepster: "Creepster",
+    "special-elite": "Special Elite",
+    fredericka: "Fredericka the Great",
+    lobster: "Lobster",
+    pacifico: "Pacifico",
+    caveat: "Caveat",
+    "comic-neue": "Comic Neue",
+    audiowide: "Audiowide",
+    kablammo: "Kablammo",
+    "henny-penny": "Henny Penny",
+    oi: "Oi",
+    rye: "Rye",
+    bitcount: "Bitcount",
+    quicksand: "Quicksand",
+};
+/** Which grab-bag faces does this rendered HTML actually wear? Pure string
+ * scan of the mq-font-* class contract - feed the result to
+ * @cube-drone/marquee-fonts (externalFontFaces / inlineFontFaces) to deliver
+ * exactly those faces and not one byte more. */
+export function usedFontTokens(html) {
+    const used = new Set();
+    for (const m of html.matchAll(/mq-font-([a-z0-9-]+)/g)) {
+        used.add(m[1]);
+    }
+    return [...used].sort();
+}
+/** One rung of the font-element seven-step dial: presentational floor
+ * (works with no stylesheet, under any CSP), stylesheet class as ceiling.
+ * The named rungs - miniscule, tiny, huge, enormous - are unnecessary
+ * given the dial, and yet. */
+function sizeRung(value, inner) {
+    return `<font class="mq-size-${value}" size="${value}">${inner}</font>`;
+}
+const MEDIA_SIZE_TOKENS = {
+    small: "10rem",
+    medium: "20rem",
+    large: "32rem",
+    full: "100%",
+};
+/** Media width/height: a size token or a capped integer of pixels (SPEC.md,
+ * "Media"). Anything else degrades to natural sizing. */
+function mediaSize(v) {
+    if (v === undefined) {
+        return null;
+    }
+    const token = MEDIA_SIZE_TOKENS[v];
+    if (token !== undefined) {
+        return token;
+    }
+    if (/^[0-9]{1,4}$/.test(v)) {
+        const n = Number(v);
+        if (n >= 1 && n <= 4096) {
+            return `${n}px`;
+        }
+    }
+    return null;
+}
+function infoToken(info) {
+    if (info === undefined) {
+        return null;
+    }
+    const first = info.split(/[ \t]/, 1)[0];
+    return /^[A-Za-z0-9_+.#-]{1,64}$/.test(first) ? first : null;
+}
+// -- constructs
+function embed(target, alt, profile) {
+    const media = profile.media(target);
+    if (media !== null) {
+        const url = escapeAttr(media.url);
+        switch (media.kind) {
+            case "image":
+                return `<img class="mq-embed" src="${url}" alt="${escapeAttr(alt)}" loading="lazy">`;
+            case "audio":
+                return `<audio class="mq-embed" controls src="${url}" aria-label="${escapeAttr(alt)}"></audio>`;
+            case "video":
+                return `<video class="mq-embed" controls src="${url}" aria-label="${escapeAttr(alt)}"></video>`;
+        }
+    }
+    // The contractual shrug applied to media: degrade to a labeled link, or
+    // to inert text when the scheme is out of policy.
+    const label = escapeText(`[${alt === "" ? target : alt}]`);
+    return profile.linkAllowed(target)
+        ? `<a class="mq-embed-fallback" href="${escapeAttr(target)}">${label}</a>`
+        : `<span class="mq-embed-fallback">${label}</span>`;
+}
+const TURBOLINK_LEVELS = new Set(["full", "title", "bare"]);
+function turbolink(target, levelAttr, profile) {
+    if (!profile.linkAllowed(target)) {
+        return `<p class="mq-turbolink">${escapeText(target)}</p>`;
+    }
+    const level = levelAttr !== undefined && TURBOLINK_LEVELS.has(levelAttr)
+        ? levelAttr
+        : profile.turbolinkLevel(target);
+    if (level !== "bare") {
+        const rich = profile.turbolink(target, level);
+        if (rich !== null) {
+            // Enrichment augments, never replaces: the wrapper itself carries the
+            // original link, so no plugin can eat it - not even by accident.
+            return `<div class="mq-turbolink mq-turbolink-rich">${rich}<a class="mq-turbolink-source" href="${escapeAttr(target)}">${escapeText(target)}</a></div>`;
+        }
+    }
+    // The contractual floor: a plain link, always reachable.
+    return `<p class="mq-turbolink"><a href="${escapeAttr(target)}">${escapeText(target)}</a></p>`;
+}
+/** A resolved URL made safe for a CSS url("...") token: encodeURI handles
+ * whitespace, controls, backslashes, and double quotes; quotes and parens
+ * that encodeURI deliberately leaves are percent-encoded on top, so the
+ * value can never terminate the url() or the declaration - author bytes
+ * must not write CSS, even inside their own style attribute. */
+function cssUrl(url) {
+    return encodeURI(url).replaceAll("'", "%27").replaceAll("(", "%28").replaceAll(")", "%29");
+}
+/** Style knobs on a block node: validated values into --mq-* slots; the
+ * stylesheet owns which CSS property each slot feeds. `background` takes a
+ * color, or `tile:<target>` - a tiled background image, resolved through
+ * the embedder's media policy exactly as an embed (a background fetch is a
+ * fetch): out-of-policy or non-image targets degrade to no background. */
+function styleVars(attrs, profile) {
+    const vars = [];
+    if (isColorValue(attrs["color"])) {
+        vars.push(`--mq-color:${attrs["color"]}`);
+    }
+    const bg = attrs["background"];
+    if (bg !== undefined && bg.startsWith("tile:")) {
+        const media = profile.media(bg.slice("tile:".length));
+        if (media !== null && media.kind === "image") {
+            // Single-quoted url token: the style attribute itself is
+            // double-quoted, and cssUrl percent-encodes single quotes.
+            vars.push(`--mq-bg-tile:url('${cssUrl(media.url)}')`);
+        }
+    }
+    else if (isColorValue(bg)) {
+        vars.push(`--mq-bg:${bg}`);
+    }
+    return vars.length === 0 ? "" : ` style="${vars.join(";")}"`;
+}
+function schemeClass(attrs) {
+    return isToken(attrs["scheme"]) ? ` mq-scheme-${attrs["scheme"]}` : "";
+}
+function fontClass(attrs) {
+    const value = attrs["font"];
+    return value !== undefined && FONTS[value] !== undefined ? ` mq-font-${value}` : "";
+}
+function directive(name, attrs, nodes, ctx) {
+    const { profile } = ctx;
+    const inner = children(nodes, ctx);
+    const custom = profile.directive(name, attrs, inner);
+    if (custom !== null) {
+        return custom;
+    }
+    switch (name) {
+        case "meta":
+            // Carries metadata, renders nothing by default - but never eats an
+            // (unconventional) body.
+            return inner;
+        case "page": {
+            const layout = isToken(attrs["layout"]) ? ` mq-layout-${attrs["layout"]}` : "";
+            return `<div class="mq-page${layout}${schemeClass(attrs)}${fontClass(attrs)}"${styleVars(attrs, profile)}>${inner}</div>`;
+        }
+        case "section": {
+            const slot = isToken(attrs["slot"]) ? ` data-slot="${attrs["slot"]}"` : "";
+            return `<section class="mq-section${schemeClass(attrs)}${fontClass(attrs)}"${slot}${styleVars(attrs, profile)}>${inner}</section>`;
+        }
+        case "turbolink": {
+            const target = attrs["target"];
+            if (target !== undefined) {
+                return turbolink(target, attrs["level"], profile);
+            }
+            break; // malformed use: fall through to the placeholder
+        }
+        case "media": {
+            const vars = [];
+            const w = mediaSize(attrs["width"]);
+            const h = mediaSize(attrs["height"]);
+            if (w !== null) {
+                vars.push(`--mq-media-w:${w}`);
+            }
+            if (h !== null) {
+                vars.push(`--mq-media-h:${h}`);
+            }
+            const style = vars.length === 0 ? "" : ` style="${vars.join(";")}"`;
+            return `<div class="mq-media"${style}>${inner}</div>`;
+        }
+        case "table":
+            return renderTable(attrs, nodes, ctx);
+    }
+    // Unknown vocabulary: a container renders its children with an affordance
+    // that something wrapped them; a leaf renders the inert placeholder.
+    // Never eat authored content.
+    return nodes.length > 0
+        ? `<div class="mq-unknown" data-directive="${escapeAttr(name)}">${inner}</div>`
+        : `<div class="mq-placeholder" data-directive="${escapeAttr(name)}"></div>`;
+}
+/** :::table (SPEC.md, "Tables"): each paragraph child is a row; a row's
+ * cells are its top-level `[c]` spans, and loose inline content between
+ * cells coalesces into implicit cells (never eaten). A non-paragraph block
+ * child is a full-width single-cell row. `header=row|column|both` promotes
+ * the first row / first column to <th> with scope - header association is
+ * the accessibility half of tables, hoisted onto the one attr. */
+function renderTable(attrs, nodes, ctx) {
+    const header = attrs["header"];
+    const headRow = header === "row" || header === "both";
+    const headCol = header === "column" || header === "both";
+    const rows = [];
+    for (const node of nodes) {
+        const cells = [];
+        if (node.type === "paragraph") {
+            let loose = [];
+            const flushLoose = () => {
+                if (loose.some((n) => n.type !== "text" || n.value.trim() !== "")) {
+                    cells.push(children(loose, ctx));
+                }
+                loose = [];
+            };
+            for (const child of node.children) {
+                if (child.type === "span" && child.name === "c") {
+                    flushLoose();
+                    cells.push(children(child.children, ctx));
+                }
+                else {
+                    loose.push(child);
+                }
+            }
+            flushLoose();
+        }
+        else {
+            cells.push(renderNode(node, ctx));
+        }
+        const isHeadRow = headRow && rows.length === 0;
+        const cellsHtml = cells
+            .map((cell, i) => isHeadRow || (headCol && i === 0)
+            ? `<th scope="${isHeadRow ? "col" : "row"}">${cell}</th>`
+            : `<td>${cell}</td>`)
+            .join("");
+        rows.push(`<tr>${cellsHtml}</tr>`);
+    }
+    // Cell sidenotes land just below the table, like a paragraph's would.
+    return flushNotes(ctx, `<table class="mq-table">${rows.join("")}</table>`);
+}
+/** Effect/typographic spans. The `<font>` tag is deliberate: presentational
+ * attributes are outside CSP's jurisdiction and are implemented by the
+ * browser itself, so color survives with no stylesheet and no style
+ * attributes - the floor of the degradation ladder. The --mq-color slot is
+ * the stylesheet-era ceiling on the same element. */
+function span(name, attrs, nodes, ctx) {
+    const inner = children(nodes, ctx);
+    const custom = ctx.profile.span(name, attrs, inner);
+    if (custom !== null) {
+        return custom;
+    }
+    switch (name) {
+        case "sup":
+            return `<sup>${inner}</sup>`;
+        case "sub":
+            return `<sub>${inner}</sub>`;
+        case "small":
+            return `<small>${inner}</small>`;
+        case "big":
+            return `<big>${inner}</big>`; // obsolete and eternal, like <font>
+        case "size": {
+            const value = attrs["size"];
+            if (value !== undefined && /^[1-7]$/.test(value)) {
+                return sizeRung(value, inner);
+            }
+            return inner; // off the dial: the effect degrades, the words survive
+        }
+        case "font": {
+            const value = attrs["font"];
+            const face = value !== undefined ? FONTS[value] : undefined;
+            if (face !== undefined) {
+                return `<font class="mq-font-${value}" face="${escapeAttr(face)}">${inner}</font>`;
+            }
+            return inner; // not on the list: the words survive in their own clothes
+        }
+        case "miniscule":
+            return sizeRung("1", inner);
+        case "tiny":
+            return sizeRung("2", inner);
+        case "huge":
+            return sizeRung("6", inner);
+        case "enormous":
+            return sizeRung("7", inner);
+        case "color": {
+            const value = attrs["color"];
+            if (isColorValue(value)) {
+                return `<font class="mq-color" color="${value}" style="--mq-color:${value}">${inner}</font>`;
+            }
+            return inner; // invalid value: the effect degrades, the words survive
+        }
+        case "sidenote": {
+            // A numbered mark in the flow; the note itself flushes just below the
+            // triggering paragraph (see flushNotes). Numbering runs sequentially
+            // through the whole document.
+            ctx.note.n += 1;
+            ctx.note.pending.push(`<span class="mq-note-num">${ctx.note.n}</span>${inner}`);
+            return `<sup class="mq-noteref">${ctx.note.n}</sup>`;
+        }
+        case "marquee": {
+            const dir = isToken(attrs["direction"]) ? ` data-direction="${attrs["direction"]}"` : "";
+            const speed = attrs["speed"] !== undefined && COUNT.test(attrs["speed"])
+                ? ` style="--mq-speed:${attrs["speed"]}"`
+                : "";
+            return `<span class="mq-marquee"${dir}${speed}><span class="mq-marquee-inner">${inner}</span></span>`;
+        }
+        case "blink": {
+            const rate = attrs["rate"] !== undefined && COUNT.test(attrs["rate"])
+                ? ` style="--mq-rate:${attrs["rate"]}"`
+                : "";
+            return `<span class="mq-blink"${rate}>${inner}</span>`;
+        }
+        case "rainbow":
+        case "bounce":
+        case "jitter":
+        case "wave":
+            if (attrs["by"] === "letter" || attrs["by"] === "word") {
+                return bySegments(name, attrs["by"], attrs["phase"], nodes, ctx);
+            }
+            return `<span class="mq-${name}">${inner}</span>`;
+        case "typewriter":
+            return `<span class="mq-${name}">${inner}</span>`;
+    }
+    return inner; // unknown span: pure shrug, children as plain content
+}
+// -- per-unit effects (by=letter / by=word): each unit in its own span with
+// a phase offset in --mq-o; the stylesheet replays the effect's keyframes
+// through a negative animation-delay. Pure markup - the document stays a
+// document. Locale pinned so segmentation (and thus output) is stable.
+const SEGMENTERS = {
+    letter: new Intl.Segmenter("en", { granularity: "grapheme" }),
+    word: new Intl.Segmenter("en", { granularity: "word" }),
+};
+/** DOM-weight discipline: past this many units, the run animates whole. */
+const MAX_SPLIT_UNITS = 400;
+function bySegments(effect, by, phaseAttr, nodes, ctx) {
+    // Each effect has a natural phase order (jitter scatters, the rest sweep);
+    // the knob overrides it either way. Invalid values degrade to the default.
+    const phase = phaseAttr === "scatter" || phaseAttr === "ramp"
+        ? phaseAttr
+        : effect === "jitter"
+            ? "scatter"
+            : "ramp";
+    const state = { effect, by, phase, i: 0, total: 0 };
+    state.total = countUnits(nodes, by);
+    if (state.total === 0 || state.total > MAX_SPLIT_UNITS) {
+        return `<span class="mq-${effect}">${children(nodes, ctx)}</span>`;
+    }
+    return `<span class="mq-${effect} mq-split">${splitRender(nodes, ctx, state)}</span>`;
+}
+/** A segment gets wrapped if it's animatable: for words, word-like segments
+ * (spaces and bare punctuation ride along); for letters, anything that
+ * isn't whitespace. */
+function isUnit(seg, by) {
+    return by === "word" ? seg.isWordLike === true : !/^\s+$/.test(seg.segment);
+}
+/** Offsets are deterministic (goldens exist; a document renders the same
+ * twice) in both phase orders: ramp sweeps, scatter scrambles by a fixed
+ * integer hash - randomness-shaped, never random. */
+function unitOffset(state) {
+    let o;
+    if (state.phase === "scatter") {
+        o = ((state.i * 7919) % 101) / 101;
+    }
+    else {
+        switch (state.effect) {
+            case "rainbow":
+                o = state.i / state.total; // gradient across the whole run
+                break;
+            case "wave":
+                o = (state.i % 8) / 8; // fixed ripple wavelength
+                break;
+            case "bounce":
+                o = (state.i % 6) / 6;
+                break;
+            default:
+                o = (state.i % 8) / 8; // jitter in ramp mode: a rippling shudder
+                break;
+        }
+    }
+    return String(Math.round(o * 1000) / 1000);
+}
+function countUnits(nodes, by) {
+    let n = 0;
+    for (const node of nodes) {
+        if (node.type === "text") {
+            for (const seg of SEGMENTERS[by].segment(node.value)) {
+                if (isUnit(seg, by)) {
+                    n += 1;
+                }
+            }
+        }
+        else if (node.type === "emphasis" ||
+            node.type === "strong" ||
+            node.type === "strikethrough") {
+            n += countUnits(node.children, by);
+        }
+    }
+    return n;
+}
+function splitRender(nodes, ctx, state) {
+    let out = "";
+    for (const node of nodes) {
+        if (node.type === "text") {
+            for (const seg of SEGMENTERS[state.by].segment(node.value)) {
+                if (!isUnit(seg, state.by)) {
+                    out += escapeText(seg.segment); // spaces/punctuation ride along
+                    continue;
+                }
+                const o = unitOffset(state);
+                state.i += 1;
+                out += `<span class="mq-l" style="--mq-o:${o}">${escapeText(seg.segment)}</span>`;
+            }
+        }
+        else if (node.type === "emphasis") {
+            out += `<em>${splitRender(node.children, ctx, state)}</em>`;
+        }
+        else if (node.type === "strong") {
+            out += `<strong>${splitRender(node.children, ctx, state)}</strong>`;
+        }
+        else if (node.type === "strikethrough") {
+            out += `<del>${splitRender(node.children, ctx, state)}</del>`;
+        }
+        else {
+            out += renderNode(node, ctx); // anything else renders whole, un-split
+        }
+    }
+    return out;
+}
+// -- escaping (the only paths author bytes may take into markup)
+export function escapeText(s) {
+    return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+export function escapeAttr(s) {
+    return escapeText(s).replaceAll('"', "&quot;");
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@cube-drone/marquee-html-renderer",
+  "version": "0.1.0",
+  "description": "Reference static HTML renderer for the Marquee markup language",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cube-drone/marqueemarkup.git",
+    "directory": "ts/html_renderer"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.6.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "marquee-src": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "test": "node --conditions=marquee-src --test test/*.test.ts",
+    "check": "tsc --noEmit",
+    "bless": "node --conditions=marquee-src scripts/bless.ts",
+    "preview": "node --conditions=marquee-src scripts/preview.ts",
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@cube-drone/marquee-parser": "^0.1.0"
+  },
+  "devDependencies": {
+    "@cube-drone/marquee-css": "^0.1.0",
+    "@cube-drone/marquee-fonts": "^0.1.0",
+    "@cube-drone/marquee-turbolink": "^0.1.0",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// Reference static HTML renderer for the Marquee markup language.
+//
+// Emits an HTML *fragment* (one `<div class="mq-doc">` subtree) that the
+// embedder places in a page alongside css/marquee.css. Best-effort CSS
+// motion; the JS halves of the animation contract (start-on-visibility,
+// tap-to-skip) belong to the interactive renderer.
+
+import { parse } from "@cube-drone/marquee-parser";
+import { render } from "./render.ts";
+import type { Profile } from "./profile.ts";
+
+export { render, escapeText, escapeAttr, FONTS, usedFontTokens } from "./render.ts";
+export { bareWebProfile } from "./profile.ts";
+export type { EmojiResolution, Profile, MediaResolution, TurbolinkLevel } from "./profile.ts";
+
+/** Parse and render in one step. Throws UnsupportedVersionError for unknown
+ * dialect versions, exactly as the parser does. */
+export function renderMarquee(source: string, profile?: Profile): string {
+  return render(parse(source), profile);
+}