@bendyline/squisq-formats 2.8.7 → 2.8.9

package/dist/{chunk-B6UQPW75.js → chunk-SZ3OIY6G.js}

@@ -1,3 +1,7 @@
+import {
+  findDiagrams,
+  rasterizeDiagrams
+} from "./chunk-4LIFEQKX.js";
 import {
   arrayBufferToBase64DataUrl,
   extractFilename,
@@ -8,8 +12,9 @@ import {
 } from "./chunk-VCZUXQUL.js";
 import {
   FootnoteIndex,
-  footnoteIds
-} from "./chunk-BXWNU4T5.js";
+  footnoteIds,
+  withoutBlockTags
+} from "./chunk-DTJQK7U7.js";
 import {
   imageSizeAttributes
 } from "./chunk-JZR32FON.js";
@@ -294,7 +299,9 @@ function escapeHtml(str) {
 import {
   findBlockVideoEmbed,
   isSvgIslandLang,
+  mediaKindForUrl,
   parseSvgIsland,
+  parseTimeSeconds,
   sanitizeHtmlNodes,
   svgIslandDataUrl,
   svgSourceFromDataUrl,
@@ -304,8 +311,45 @@ import {
   readFrontmatterThemeId as readFrontmatterThemeId2
 } from "@bendyline/squisq/markdown";
 import { resolveFontFamily, buildGoogleFontsUrl } from "@bendyline/squisq/schemas";
-import { resolveThemeForDoc } from "@bendyline/squisq/doc";
+import {
+  isMediaAnnotationName,
+  parseStandaloneAnnotation,
+  resolveThemeForDoc
+} from "@bendyline/squisq/doc";
 function markdownDocToPlainHtml(doc, options = {}) {
+  const { title, body, fontsLink, iconsLink, themedCss, featureCss } = renderPlainHtml(
+    doc,
+    options
+  );
+  const safeCss = escapeStyleText(`${themedCss}
+${featureCss}`);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${escapeHtml2(title)}</title>
+${fontsLink}${iconsLink}<style>
+${safeCss}
+</style>
+</head>
+<body>
+${body}
+</body>
+</html>`;
+}
+function markdownDocToPlainHtmlParts(doc, options = {}) {
+  const { title, body, iconsLink, featureCss } = renderPlainHtml(doc, options);
+  return {
+    title,
+    bodyHtml: body,
+    featureHeadHtml: `${iconsLink}<style data-squisq>
+${escapeStyleText(featureCss)}
+</style>
+`
+  };
+}
+function renderPlainHtml(doc, options) {
   const {
     title = "Document",
     images,
@@ -314,7 +358,8 @@ function markdownDocToPlainHtml(doc, options = {}) {
     iconsCss,
     htmlPolicy = "sanitize",
     externalResources = "deny",
-    videoEmbeds
+    videoEmbeds,
+    icons
   } = options;
   const resolveId = themeId ?? readFrontmatterThemeId2(doc.frontmatter);
   const theme = options.theme ?? (resolveId ? resolveThemeForDoc(doc, resolveId, options.themeRegistry) : void 0);
@@ -325,13 +370,14 @@ function markdownDocToPlainHtml(doc, options = {}) {
     htmlPolicy,
     footnotes,
     videoEmbeds,
+    icons,
     textColor: theme?.colors.text
   };
-  const body = renderTopLevel(doc.children, ctx) + renderFootnotesSection(footnotes, ctx);
+  const blocks = withoutBlockTags(doc, { keepMedia: true }).children;
+  const body = renderTopLevel(blocks, ctx) + renderFootnotesSection(footnotes, ctx);
   const fontsLink = theme && externalResources === "allow" ? renderFontsLink(theme) : "";
-  const usesIcons = docUsesIcons(doc);
   let iconsLink = "";
-  if (usesIcons) {
+  if (ctx.usesFontIcons) {
     iconsLink = iconsCss ? `<style data-fa-inline>
 ${escapeStyleText(iconsCss)}
 </style>
@@ -342,40 +388,25 @@ ${escapeStyleText(iconsCss)}
 ${VIDEO_EMBED_CSS}` : "";
   const svgCss = docUsesSvgIslands(doc) ? `
 ${SVG_ISLAND_CSS}` : "";
-  const safeCss = escapeStyleText(`${themedCss}
-${FEATURE_CSS}${videoCss}${svgCss}`);
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>${escapeHtml2(title)}</title>
-${fontsLink}${iconsLink}<style>
-${safeCss}
-</style>
-</head>
-<body>
-${body}
-</body>
-</html>`;
+  const mediaCss = ctx.usesMediaPlayers ? `
+${MEDIA_PLAYER_CSS}` : "";
+  const iconCss = ctx.usesSvgIcons ? `
+${SVG_ICON_CSS}` : "";
+  return {
+    title,
+    body,
+    fontsLink,
+    iconsLink,
+    themedCss,
+    featureCss: `${FEATURE_CSS}${videoCss}${svgCss}${mediaCss}${iconCss}`
+  };
 }
 function escapeStyleText(css) {
   return css.replace(/</g, "\\3c ");
 }
 var FONT_AWESOME_LINK = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
 `;
-function docUsesIcons(doc) {
-  function visit(node) {
-    if (!node || typeof node !== "object") return false;
-    const n = node;
-    if (n.type === "inlineIcon") return true;
-    if (Array.isArray(n.children)) {
-      for (const child of n.children) if (visit(child)) return true;
-    }
-    return false;
-  }
-  return visit(doc);
-}
+var SVG_ICON_CSS = `  .squisq-icon { display: inline-block; height: 1em; vertical-align: -0.125em; overflow: visible; }`;
 function docUsesVideoEmbeds(doc, htmlPolicy) {
   const iframeIn = (nodes) => nodes.some(
     (node) => node.type === "htmlElement" && (videoEmbedFromIframe(node) !== null || iframeIn(node.children))
@@ -416,15 +447,21 @@ function renderTopLevel(children, ctx) {
         continue;
       }
     }
-    const video = node && node.type === "paragraph" ? findBlockVideoEmbed(node) : null;
-    if (video) {
-      out.push(videoEmbedToHtml(video.embed, video.title, ctx));
-      continue;
-    }
-    out.push(nodeToHtml(node, ctx));
+    const html = topLevelBlockToHtml(node, ctx);
+    if (html !== null) out.push(html);
   }
   return out.join("\n");
 }
+function topLevelBlockToHtml(node, ctx) {
+  if (node?.type !== "paragraph") return nodeToHtml(node, ctx);
+  const video = findBlockVideoEmbed(node);
+  if (video) return videoEmbedToHtml(video.embed, video.title, ctx);
+  const tag = parseStandaloneAnnotation(node);
+  if (tag?.template && isMediaAnnotationName(tag.template)) {
+    return mediaAnnotationToHtml(tag.template, tag.params, ctx);
+  }
+  return nodeToHtml(node, ctx);
+}
 function renderFootnotesSection(footnotes, ctx) {
   if (footnotes.isEmpty) return "";
   const items = footnotes.ordered().map((fn) => {
@@ -459,7 +496,7 @@ function renderFeatureSection(heading, bodyNodes, side, ctx) {
   const headingHtml = `<${headingTag}>${childrenToHtml({ children: heading.children }, ctx)}</${headingTag}>`;
   const featured = takeFirstImage(bodyNodes);
   const media = featured.image ? renderFeatureImage(featured.image, ctx) : '<div class="squisq-feature__media squisq-feature__media--empty"></div>';
-  const textHtml = [headingHtml, ...featured.remaining.map((n) => nodeToHtml(n, ctx))].filter((s) => s.length > 0).join("\n");
+  const textHtml = [headingHtml, ...featured.remaining.map((n) => topLevelBlockToHtml(n, ctx))].filter((s) => !!s).join("\n");
   const sideClass = side === "leftFeature" ? "squisq-feature--left" : "squisq-feature--right";
   return `<section class="squisq-feature ${sideClass}">
 ${media}
@@ -782,6 +819,11 @@ function nodeToHtml(node, ctx) {
     case "image": {
       const original = node.url ?? "";
       const resolved = ctx?.images?.get(original) ?? original;
+      const mediaKind = mediaKindForUrl(original);
+      if (mediaKind) {
+        const label = node.alt || node.title || void 0;
+        return mediaPlayerHtml(mediaKind, resolved, label, ctx) ?? escapeHtml2(node.alt ?? "");
+      }
       const safeSrc = sanitizeUrl(resolved, "media") ?? svgDataImageToHtmlSrc(resolved);
       if (!safeSrc) return escapeHtml2(node.alt ?? "");
       return `<img src="${escapeAttr(safeSrc)}" alt="${escapeAttr(node.alt ?? "")}"${imageSizeAttributes(node)} />`;
@@ -791,9 +833,16 @@ function nodeToHtml(node, ctx) {
     case "table":
       return tableToHtml(node, ctx);
     case "inlineIcon": {
+      const token = escapeAttr(node.token ?? `${node.family}:${node.name}`);
+      const svg = ctx?.icons?.get(`${node.family}:${node.name}`);
+      if (svg) {
+        ctx.usesSvgIcons = true;
+        const width = Number((svg.width / svg.height).toFixed(4));
+        return `<svg class="squisq-icon" viewBox="0 0 ${svg.width} ${svg.height}" width="${width}em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" data-icon="${token}"><path d="${escapeAttr(svg.path)}"/></svg>`;
+      }
+      if (ctx) ctx.usesFontIcons = true;
       const family = escapeAttr(node.family ?? "solid");
       const name = escapeAttr(node.name ?? "");
-      const token = escapeAttr(node.token ?? `${node.family}:${node.name}`);
       return `<i class="fa-${family} fa-${name}" data-icon="${token}" aria-hidden="true"></i>`;
     }
     case "htmlBlock":
@@ -930,6 +979,28 @@ var VIDEO_EMBED_CSS = `  .squisq-video-embed { display: block; max-width: 720px;
   .squisq-video-embed-play::after { content: ''; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
   .squisq-video-embed-provider { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 0.8em; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
   .squisq-video-embed-caption { margin-top: 0.4em; font-size: 0.875em; opacity: 0.8; }`;
+function mediaPlayerHtml(kind, src, label, ctx) {
+  const safeSrc = sanitizeUrl(src, "media");
+  if (!safeSrc) return null;
+  if (ctx) ctx.usesMediaPlayers = true;
+  const aria = label ? ` aria-label="${escapeAttr(label)}"` : "";
+  return `<${kind} class="squisq-media" src="${escapeAttr(safeSrc)}" controls preload="metadata"${aria}></${kind}>`;
+}
+function mediaAnnotationToHtml(template, params, ctx) {
+  if (!params.src) return null;
+  const kind = template === "video" ? "video" : "audio";
+  let src = ctx?.images?.get(params.src) ?? params.src;
+  const start = parseTimeSeconds(params.clipStart ?? "");
+  const end = parseTimeSeconds(params.clipEnd ?? "");
+  if ((start !== null || end !== null) && !src.includes("#")) {
+    src += `#t=${start ?? ""}${end !== null ? `,${end}` : ""}`;
+  }
+  const player = mediaPlayerHtml(kind, src, void 0, ctx);
+  return player ? `<figure class="squisq-media-clip">${player}</figure>` : null;
+}
+var MEDIA_PLAYER_CSS = `  .squisq-media-clip { margin: 1.25em 0; }
+  video.squisq-media { display: block; width: 100%; max-width: 720px; height: auto; border-radius: 6px; }
+  audio.squisq-media { display: block; width: 100%; max-width: 480px; }`;
 function svgDataImageToHtmlSrc(url) {
   const source = svgSourceFromDataUrl(url);
   const result = source === null ? null : parseSvgIsland(source);
@@ -951,6 +1022,80 @@ function escapeAttr(s) {
   return escapeHtml2(s).replace(/"/g, "&quot;");
 }
 
+// src/html/plainHtmlPrepare.ts
+import { isDataFilePath } from "@bendyline/squisq/doc";
+var PAGE_DIAGRAM_KINDS = [
+  "mermaid",
+  "diagram",
+  "timeline",
+  "container",
+  "chart"
+];
+function needsPlainHtmlPreparation(doc, options = {}) {
+  let icons = false;
+  let data = false;
+  const visit = (node) => {
+    if (!node || typeof node !== "object" || icons && data) return;
+    const n = node;
+    if (n.type === "inlineIcon") icons = true;
+    if (n.type === "heading") {
+      const src = n.templateAnnotation?.params?.src;
+      if (src && isDataFilePath(src)) data = true;
+    }
+    if (Array.isArray(n.children)) n.children.forEach(visit);
+  };
+  doc.children.forEach(visit);
+  if (icons || data && options.container) return true;
+  if (!options.renderDiagram) return false;
+  return findDiagrams(doc).some((diagram) => PAGE_DIAGRAM_KINDS.includes(diagram.kind));
+}
+async function prepareMarkdownDocForPlainHtml(doc, options = {}) {
+  const { renderDiagram, container, signal, onWarning } = options;
+  let markdownDoc = doc;
+  if (container) {
+    const { materializeDataReferences, DATA_PREVIEW_ROWS } = await import("./materialize-ICXNO4S4.js");
+    markdownDoc = await materializeDataReferences(markdownDoc, container, onWarning, {
+      maxRows: options.maxDataRows ?? DATA_PREVIEW_ROWS,
+      tableCache: options.dataTableCache
+    });
+  }
+  signal?.throwIfAborted();
+  const { plainHtmlIcons } = await import("./plainHtmlIcons-KBSIJ5EN.js");
+  const icons = await plainHtmlIcons(markdownDoc);
+  const images = /* @__PURE__ */ new Map();
+  if (!renderDiagram) return { markdownDoc, images, icons };
+  const pictured = await rasterizeDiagrams(markdownDoc, renderDiagram, {
+    kinds: PAGE_DIAGRAM_KINDS,
+    urlPrefix: "squisq-picture",
+    signal,
+    onWarning
+  });
+  const widths = /* @__PURE__ */ new Map();
+  for (const [url, picture] of pictured.images) {
+    const bytes = picture.data;
+    const buffer = bytes.buffer.slice(
+      bytes.byteOffset,
+      bytes.byteOffset + bytes.byteLength
+    );
+    images.set(url, arrayBufferToBase64DataUrl(buffer, picture.contentType));
+    widths.set(url, Math.round(picture.width));
+  }
+  return { markdownDoc: withPictureWidths(pictured.markdownDoc, widths), images, icons };
+}
+function withPictureWidths(doc, widths) {
+  if (widths.size === 0) return doc;
+  const visit = (node) => {
+    if (node.type === "image") {
+      const width = widths.get(node.url);
+      return width === void 0 ? node : { ...node, width };
+    }
+    const children = node.children;
+    if (!Array.isArray(children)) return node;
+    return { ...node, children: children.map(visit) };
+  };
+  return { ...doc, children: doc.children.map(visit) };
+}
+
 // src/html/plainHtmlBundle.ts
 import JSZip from "jszip";
 import { parseMarkdown, inferDocumentTitle } from "@bendyline/squisq/markdown";
@@ -1177,6 +1322,502 @@ function titleForFilename(path, mdDoc) {
   return base.replace(/\.md$/i, "");
 }
 
+// src/html/pageTemplate.ts
+var HTML_PAGE_TEMPLATE_CONTENT_START = "<!-- squisq:content -->";
+var HTML_PAGE_TEMPLATE_CONTENT_END = "<!-- /squisq:content -->";
+var HtmlPageTemplateError = class extends Error {
+  constructor(issues) {
+    super(
+      issues.length === 1 ? `Invalid page template: ${describeIssue(issues[0])}` : `Invalid page template:
+${issues.map((issue) => `- ${describeIssue(issue)}`).join("\n")}`
+    );
+    this.name = "HtmlPageTemplateError";
+    this.issues = issues;
+  }
+};
+function isHtmlPageTemplate(html) {
+  return scanHtml(html).some(isLightSlot);
+}
+function inspectHtmlPageTemplate(html) {
+  return analyzeTemplate(html).inspection;
+}
+function analyzeTemplate(html) {
+  const tags = scanHtml(html);
+  const { slots, issues } = collectSlots(tags);
+  const lines = lineIndex(html);
+  const errors = issues.map(({ message, offset }) => ({ message, line: lines(offset) }));
+  const defaultSlots = slots.filter((slot) => slot.name === null);
+  if (defaultSlots.length === 0) {
+    errors.push({
+      message: "The template has no unnamed <slot> for the document content.",
+      line: 1
+    });
+  } else if (defaultSlots.length > 1) {
+    for (const extra of defaultSlots.slice(1)) {
+      errors.push({
+        message: "The template has more than one unnamed <slot>; the content can appear only once.",
+        line: lines(extra.start)
+      });
+    }
+  }
+  const namedSlots = [];
+  for (const slot of slots) {
+    if (slot.name !== null && !namedSlots.includes(slot.name)) namedSlots.push(slot.name);
+  }
+  return {
+    tags,
+    slots,
+    inspection: {
+      isTemplate: tags.some(isLightSlot),
+      defaultSlotCount: defaultSlots.length,
+      namedSlots,
+      errors: errors.sort((a, b) => a.line - b.line)
+    }
+  };
+}
+function isLightSlot(tag) {
+  return tag.kind === "start" && tag.name === "slot" && !tag.inert;
+}
+function applyHtmlPageTemplate(template, content, options = {}) {
+  const { tags, slots, inspection } = analyzeTemplate(template);
+  if (inspection.errors.length > 0) throw new HtmlPageTemplateError(inspection.errors);
+  const values = content.values ?? {};
+  const valueFor = (name) => name === "title" ? content.title : values[name];
+  const edits = [];
+  const replacements = /* @__PURE__ */ new Set();
+  for (const slot of slots) {
+    const value = slot.name === null ? void 0 : valueFor(slot.name);
+    if (slot.name === null || value !== void 0) {
+      const replacement = {
+        start: slot.start,
+        end: slot.end,
+        text: slot.name === null ? `${HTML_PAGE_TEMPLATE_CONTENT_START}
+${content.bodyHtml}
+${HTML_PAGE_TEMPLATE_CONTENT_END}` : escapeHtml3(value ?? "")
+      };
+      edits.push(replacement);
+      replacements.add(replacement);
+    } else {
+      edits.push({ start: slot.start, end: slot.contentStart, text: "" });
+      if (slot.end > slot.contentEnd)
+        edits.push({ start: slot.contentEnd, end: slot.end, text: "" });
+    }
+  }
+  const title = tags.find(
+    (tag) => tag.kind === "start" && tag.name === "title" && !tag.inert
+  );
+  if (title?.text) {
+    edits.push({
+      start: title.text.start,
+      end: title.text.end,
+      text: fillTitleText(template.slice(title.text.start, title.text.end), valueFor)
+    });
+  }
+  for (const tag of tags) {
+    if (tag.kind !== "start" || tag.name !== "meta" || tag.inert) continue;
+    const key = (attributeValue(tag, "name") ?? attributeValue(tag, "property"))?.toLowerCase();
+    const value = key ? metaValue(key, content.title, values.description) : void 0;
+    if (value === void 0) continue;
+    const contentAttribute = tag.attributes.find((attribute) => attribute.name === "content");
+    const text = `content="${escapeAttr2(value)}"`;
+    if (contentAttribute) {
+      edits.push({ start: contentAttribute.start, end: contentAttribute.end, text });
+    } else {
+      edits.push({ start: tag.closeStart, end: tag.closeStart, text: ` ${text}` });
+    }
+  }
+  const fromDir = options.templatePath === void 0 ? null : posixDirname2(options.templatePath);
+  const toDir = options.outputPath === void 0 ? null : posixDirname2(options.outputPath);
+  if (fromDir !== null && toDir !== null && fromDir !== toDir) {
+    for (const tag of tags) {
+      if (tag.kind !== "start") continue;
+      for (const attribute of tag.attributes) {
+        if (attribute.value === null) continue;
+        const rewrite = URL_ATTRIBUTES.has(attribute.name) ? rebaseUrl : SRCSET_ATTRIBUTES.has(attribute.name) ? rebaseSrcset : null;
+        if (!rewrite) continue;
+        const raw = template.slice(attribute.valueStart, attribute.valueEnd);
+        const rebased = rewrite(raw, fromDir, toDir);
+        if (rebased !== raw) {
+          edits.push({ start: attribute.valueStart, end: attribute.valueEnd, text: rebased });
+        }
+      }
+    }
+  }
+  const headInsert = `${content.headHtml ?? ""}${title ? "" : `<title>${escapeHtml3(content.title)}</title>
+`}`;
+  if (headInsert) {
+    const at = headInsertionPoint(tags);
+    edits.push({ start: at, end: at, text: headInsert });
+  }
+  const live = edits.filter(
+    (edit) => replacements.has(edit) || ![...replacements].some(
+      (slot) => edit.end > edit.start ? edit.start >= slot.start && edit.end <= slot.end : edit.start > slot.start && edit.start < slot.end
+    )
+  );
+  return applyEdits(template, live);
+}
+function extractHtmlPageTemplateContent(html) {
+  const start = html.indexOf(HTML_PAGE_TEMPLATE_CONTENT_START);
+  if (start < 0) return null;
+  const from = start + HTML_PAGE_TEMPLATE_CONTENT_START.length;
+  const end = html.lastIndexOf(HTML_PAGE_TEMPLATE_CONTENT_END);
+  return end < from ? null : html.slice(from, end);
+}
+var TEXT_ELEMENTS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "title",
+  "textarea",
+  "xmp",
+  "iframe",
+  "noembed",
+  "noframes",
+  "noscript"
+]);
+function scanHtml(html) {
+  const tags = [];
+  let templateDepth = 0;
+  let foreignDepth = 0;
+  let index = 0;
+  while (index < html.length) {
+    const open = html.indexOf("<", index);
+    if (open < 0) break;
+    const next = html[open + 1];
+    if (html.startsWith("<!--", open)) {
+      const close = html.indexOf("-->", open + 4);
+      index = close < 0 ? html.length : close + 3;
+    } else if (next === "!" || next === "?") {
+      const close = html.indexOf(">", open + 2);
+      index = close < 0 ? html.length : close + 1;
+    } else if (next === "/" && isAsciiLetter(html[open + 2])) {
+      const nameEnd = scanName(html, open + 2);
+      const name = html.slice(open + 2, nameEnd).toLowerCase();
+      const close = html.indexOf(">", nameEnd);
+      const end = close < 0 ? html.length : close + 1;
+      if (name === "template" && templateDepth > 0) templateDepth--;
+      if ((name === "svg" || name === "math") && foreignDepth > 0) foreignDepth--;
+      tags.push({ kind: "end", name, start: open, end, inert: templateDepth + foreignDepth > 0 });
+      index = end;
+    } else if (isAsciiLetter(next)) {
+      const tag = scanStartTag(html, open, templateDepth + foreignDepth > 0);
+      tags.push(tag);
+      index = tag.end;
+      if (tag.name === "template") templateDepth++;
+      else if ((tag.name === "svg" || tag.name === "math") && !tag.selfClosing) foreignDepth++;
+      else if (TEXT_ELEMENTS.has(tag.name) && foreignDepth === 0) {
+        const closing = new RegExp(`</${tag.name}(?=[\\s/>])`, "gi");
+        closing.lastIndex = tag.end;
+        const match = closing.exec(html);
+        const textEnd = match ? match.index : html.length;
+        tag.text = { start: tag.end, end: textEnd };
+        index = textEnd;
+      }
+    } else {
+      index = open + 1;
+    }
+  }
+  return tags;
+}
+function scanStartTag(html, start, inert) {
+  const nameEnd = scanName(html, start + 1);
+  const name = html.slice(start + 1, nameEnd).toLowerCase();
+  const attributes = [];
+  let index = nameEnd;
+  for (; ; ) {
+    index = skipSpace(html, index);
+    if (index >= html.length) {
+      return {
+        kind: "start",
+        name,
+        start,
+        end: html.length,
+        closeStart: html.length,
+        selfClosing: false,
+        attributes,
+        inert
+      };
+    }
+    const char = html[index];
+    if (char === ">") {
+      return {
+        kind: "start",
+        name,
+        start,
+        end: index + 1,
+        closeStart: index,
+        selfClosing: false,
+        attributes,
+        inert
+      };
+    }
+    if (char === "/") {
+      if (html[index + 1] === ">") {
+        return {
+          kind: "start",
+          name,
+          start,
+          end: index + 2,
+          closeStart: index,
+          selfClosing: true,
+          attributes,
+          inert
+        };
+      }
+      index++;
+      continue;
+    }
+    const attributeStart = index;
+    index++;
+    while (index < html.length && !isSpace(html[index]) && !"/>=".includes(html[index])) index++;
+    const attributeName = html.slice(attributeStart, index).toLowerCase();
+    const afterName = index;
+    index = skipSpace(html, index);
+    if (html[index] !== "=") {
+      attributes.push({
+        name: attributeName,
+        value: null,
+        start: attributeStart,
+        end: afterName,
+        valueStart: afterName,
+        valueEnd: afterName
+      });
+      continue;
+    }
+    index = skipSpace(html, index + 1);
+    const quote = html[index];
+    let valueStart;
+    let valueEnd;
+    if (quote === '"' || quote === "'") {
+      valueStart = index + 1;
+      const close = html.indexOf(quote, valueStart);
+      valueEnd = close < 0 ? html.length : close;
+      index = close < 0 ? html.length : close + 1;
+    } else {
+      valueStart = index;
+      while (index < html.length && !isSpace(html[index]) && html[index] !== ">") index++;
+      valueEnd = index;
+    }
+    attributes.push({
+      name: attributeName,
+      value: html.slice(valueStart, valueEnd),
+      start: attributeStart,
+      end: index,
+      valueStart,
+      valueEnd
+    });
+  }
+}
+function scanName(html, from) {
+  let index = from;
+  while (index < html.length && !isSpace(html[index]) && html[index] !== "/" && html[index] !== ">") {
+    index++;
+  }
+  return index;
+}
+function skipSpace(html, from) {
+  let index = from;
+  while (index < html.length && isSpace(html[index])) index++;
+  return index;
+}
+function isSpace(char) {
+  return char === " " || char === "\n" || char === "	" || char === "\r" || char === "\f";
+}
+function isAsciiLetter(char) {
+  return char !== void 0 && /^[A-Za-z]$/.test(char);
+}
+function attributeValue(tag, name) {
+  return tag.attributes.find((attribute) => attribute.name === name)?.value ?? void 0;
+}
+function collectSlots(tags) {
+  const slots = [];
+  const issues = [];
+  let open = null;
+  for (const tag of tags) {
+    if (tag.name !== "slot" || tag.inert) continue;
+    if (tag.kind === "start") {
+      if (open) {
+        issues.push({
+          message: "A <slot> cannot be placed inside another <slot>.",
+          offset: tag.start
+        });
+        continue;
+      }
+      if (tag.selfClosing) {
+        slots.push({
+          name: slotName(tag),
+          start: tag.start,
+          end: tag.end,
+          contentStart: tag.end,
+          contentEnd: tag.end
+        });
+      } else {
+        open = tag;
+      }
+    } else if (open) {
+      slots.push({
+        name: slotName(open),
+        start: open.start,
+        end: tag.end,
+        contentStart: open.end,
+        contentEnd: tag.start
+      });
+      open = null;
+    } else {
+      issues.push({ message: "A </slot> has no matching <slot>.", offset: tag.start });
+    }
+  }
+  if (open) {
+    issues.push({
+      message: "A <slot> is never closed; write <slot></slot> or <slot/>.",
+      offset: open.start
+    });
+  }
+  return { slots, issues };
+}
+function slotName(tag) {
+  const name = attributeValue(tag, "name")?.trim();
+  return name ? name : null;
+}
+function fillTitleText(text, valueFor) {
+  const { slots } = collectSlots(scanHtml(text));
+  if (slots.length === 0) return escapeHtml3(valueFor("title") ?? "");
+  const edits = slots.map((slot) => {
+    const value = valueFor(slot.name ?? "title");
+    return {
+      start: slot.start,
+      end: slot.end,
+      text: value === void 0 ? text.slice(slot.contentStart, slot.contentEnd) : escapeHtml3(value)
+    };
+  });
+  return applyEdits(text, edits);
+}
+var TITLE_META = /* @__PURE__ */ new Set(["og:title", "twitter:title"]);
+var DESCRIPTION_META = /* @__PURE__ */ new Set(["description", "og:description", "twitter:description"]);
+function metaValue(key, title, description) {
+  if (TITLE_META.has(key)) return title;
+  if (DESCRIPTION_META.has(key)) return description;
+  return void 0;
+}
+function headInsertionPoint(tags) {
+  for (const tag of tags) {
+    if (tag.inert) continue;
+    if (tag.kind === "end" && tag.name === "head") return tag.start;
+    if (tag.kind !== "start") continue;
+    if (tag.name === "body") return tag.start;
+    if (tag.name === "style") return tag.start;
+    if (tag.name === "link" && (attributeValue(tag, "rel") ?? "").toLowerCase().split(/\s+/).includes("stylesheet")) {
+      return tag.start;
+    }
+  }
+  const container = tags.find(
+    (tag) => tag.kind === "start" && (tag.name === "head" || tag.name === "html")
+  );
+  return container?.end ?? 0;
+}
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "href",
+  "src",
+  "poster",
+  "action",
+  "formaction",
+  "cite",
+  "data",
+  "background",
+  "xlink:href"
+]);
+var SRCSET_ATTRIBUTES = /* @__PURE__ */ new Set(["srcset", "imagesrcset"]);
+function rebaseUrl(raw, fromDir, toDir) {
+  const url = raw.trim();
+  if (!url || url.startsWith("#") || url.startsWith("?") || url.startsWith("/") || url.startsWith("\\") || /^[a-z][a-z0-9+.-]*:/i.test(url) || url.includes("{{")) {
+    return raw;
+  }
+  const cut = url.search(/[?#]/);
+  const path = cut < 0 ? url : url.slice(0, cut);
+  const suffix = cut < 0 ? "" : url.slice(cut);
+  if (path.includes("&")) return raw;
+  const target = normalizePath(fromDir ? `${fromDir}/${path}` : path);
+  if (target === null) return raw;
+  const isDirectory = path.endsWith("/") || /(?:^|\/)\.\.?$/.test(path);
+  let relative = relativeTo(toDir, target);
+  if (isDirectory) relative = relative ? `${relative}/` : "./";
+  const leading = raw.slice(0, raw.length - raw.trimStart().length);
+  const trailing = raw.slice(raw.trimEnd().length);
+  return `${leading}${relative}${suffix}${trailing}`;
+}
+function rebaseSrcset(raw, fromDir, toDir) {
+  let out = "";
+  let index = 0;
+  while (index < raw.length) {
+    const separator = /^[\s,]*/.exec(raw.slice(index))?.[0] ?? "";
+    out += separator;
+    index += separator.length;
+    if (index >= raw.length) break;
+    let urlEnd = index;
+    while (urlEnd < raw.length && !isSpace(raw[urlEnd])) urlEnd++;
+    let url = raw.slice(index, urlEnd);
+    const commas = /,+$/.exec(url)?.[0] ?? "";
+    url = url.slice(0, url.length - commas.length);
+    out += rebaseUrl(url, fromDir, toDir) + commas;
+    index = urlEnd;
+    if (commas) continue;
+    let descriptorEnd = index;
+    let depth = 0;
+    while (descriptorEnd < raw.length) {
+      const char = raw[descriptorEnd];
+      if (char === "(") depth++;
+      else if (char === ")") depth = Math.max(0, depth - 1);
+      else if (char === "," && depth === 0) break;
+      descriptorEnd++;
+    }
+    out += raw.slice(index, descriptorEnd);
+    index = descriptorEnd;
+  }
+  return out;
+}
+function relativeTo(fromDir, target) {
+  const from = fromDir ? fromDir.split("/") : [];
+  const to = target ? target.split("/") : [];
+  let shared = 0;
+  while (shared < from.length && shared < to.length && from[shared] === to[shared]) shared++;
+  return [...from.slice(shared).map(() => ".."), ...to.slice(shared)].join("/");
+}
+function posixDirname2(path) {
+  const normalized = normalizePath(path.replace(/\\/g, "/")) ?? "";
+  const slash = normalized.lastIndexOf("/");
+  return slash < 0 ? "" : normalized.slice(0, slash);
+}
+function applyEdits(source, edits) {
+  const ordered = [...edits].sort(
+    (a, b) => a.start - b.start || Number(a.end > a.start) - Number(b.end > b.start)
+  );
+  let out = "";
+  let cursor = 0;
+  for (const edit of ordered) {
+    if (edit.start < cursor) continue;
+    out += source.slice(cursor, edit.start) + edit.text;
+    cursor = edit.end;
+  }
+  return out + source.slice(cursor);
+}
+function lineIndex(source) {
+  return (offset) => {
+    let line = 1;
+    for (let index = source.indexOf("\n"); index >= 0 && index < offset; index = source.indexOf("\n", index + 1)) {
+      line++;
+    }
+    return line;
+  };
+}
+function describeIssue(issue) {
+  return `${issue.message} (line ${issue.line})`;
+}
+function escapeHtml3(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr2(s) {
+  return escapeHtml3(s).replace(/"/g, "&quot;");
+}
+
 // src/html/docsHtmlBundle.ts
 import JSZip2 from "jszip";
 import { parseMarkdown as parseMarkdown2, inferDocumentTitle as inferDocumentTitle2 } from "@bendyline/squisq/markdown";
@@ -1997,11 +2638,13 @@ function htmlToMarkdownDocSync(html, options = {}) {
   const embedded = findEmbeddedSquisqDoc(nodes);
   if (embedded) return docToMarkdown(parseEmbeddedSquisqDoc(embedded));
   const headMetadata = options.headMetadata === false ? {} : readHeadMetadata(nodes);
+  const templated = extractHtmlPageTemplateContent(html);
+  const contentNodes = templated === null ? nodes : parseHtmlToNodes(templated);
   const {
     nodes: bodyNodes,
     bodies,
     identifiers
-  } = extractFootnoteSection(dropContentlessElements(nodes));
+  } = extractFootnoteSection(dropContentlessElements(contentNodes));
   const clean = (input) => options.sanitize === false ? input : sanitizeHtmlNodes2(input);
   const children = blocksFromNodes(clean(bodyNodes));
   if (bodies.size > 0) {
@@ -2121,8 +2764,18 @@ export {
   collectImagePaths,
   generateExternalHtml,
   markdownDocToPlainHtml,
+  markdownDocToPlainHtmlParts,
+  needsPlainHtmlPreparation,
+  prepareMarkdownDocForPlainHtml,
   markdownDocsToPlainHtmlBundle,
   collectLinkRefs,
+  HTML_PAGE_TEMPLATE_CONTENT_START,
+  HTML_PAGE_TEMPLATE_CONTENT_END,
+  HtmlPageTemplateError,
+  isHtmlPageTemplate,
+  inspectHtmlPageTemplate,
+  applyHtmlPageTemplate,
+  extractHtmlPageTemplateContent,
   markdownDocsToHtmlBundle,
   htmlToMarkdownDocSync,
   htmlToMarkdownDoc,