@psrt/sdk 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,8 +1,3 @@
-// src/runtime/boot.ts
-import { existsSync, readFileSync } from "fs";
-import { dirname, join } from "path";
-import { fileURLToPath, pathToFileURL } from "url";
-
 // src/wasm.ts
 var decoder = new TextDecoder();
 var encoder = new TextEncoder();
@@ -95,11 +90,10 @@ function wireWasmFromGlobal() {
   wasmExports = exp;
 }
 
-// src/runtime/boot.ts
-var bootPromise = null;
-function isNodeRuntime() {
-  return typeof process !== "undefined" && Boolean(process.versions?.node);
-}
+// src/runtime/boot.node.ts
+import { existsSync, readFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath, pathToFileURL } from "url";
 function wasmDir() {
   let dir = dirname(fileURLToPath(import.meta.url));
   for (; ; ) {
@@ -115,6 +109,20 @@ function wasmDir() {
   }
   throw new Error("PSRT core binary not found");
 }
+async function loadGoRuntimeNode() {
+  if (typeof globalThis.Go !== "undefined") {
+    return;
+  }
+  const scriptPath = join(wasmDir(), "wasm_exec.js");
+  await import(pathToFileURL(scriptPath).href);
+}
+async function loadCoreBytesNode() {
+  const bytes = readFileSync(join(wasmDir(), "psrt.wasm"));
+  return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+}
+
+// src/runtime/boot.node-entry.ts
+var bootPromise = null;
 function waitForExports() {
   return new Promise((resolve, reject) => {
     let attempts = 0;
@@ -133,27 +141,8 @@ function waitForExports() {
     tick();
   });
 }
-async function loadGoRuntime() {
-  if (typeof globalThis.Go !== "undefined") {
-    return;
-  }
-  const scriptPath = join(wasmDir(), "wasm_exec.js");
-  await import(pathToFileURL(scriptPath).href);
-}
-async function loadCoreBytes() {
-  if (isNodeRuntime()) {
-    const bytes = readFileSync(join(wasmDir(), "psrt.wasm"));
-    return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
-  }
-  const url = new URL("../../wasm/psrt.wasm", import.meta.url).href;
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`failed to load PSRT core (${response.status})`);
-  }
-  return response.arrayBuffer();
-}
 async function startCore(bytes) {
-  await loadGoRuntime();
+  await loadGoRuntimeNode();
   const go = new Go();
   const { instance } = await WebAssembly.instantiate(bytes, go.importObject);
   void go.run(instance);
@@ -169,7 +158,7 @@ async function bootCore() {
     return;
   }
   bootPromise = (async () => {
-    const bytes = await loadCoreBytes();
+    const bytes = await loadCoreBytesNode();
     await startCore(bytes);
   })();
   return bootPromise;
@@ -191,10 +180,2360 @@ function formatDocument(doc) {
   return invokeFormatDocument(doc);
 }
 
+// src/html/text/expandConsts.ts
+function expandConsts(content, consts) {
+  if (!consts || !content) return content;
+  const keys = Object.keys(consts).sort((a, b) => {
+    if (b.length !== a.length) return b.length - a.length;
+    return a.localeCompare(b);
+  });
+  let out = content;
+  for (const k of keys) {
+    out = out.split(`@${k}@`).join(consts[k]);
+  }
+  return out;
+}
+function compactJsonString(s) {
+  const trimmed = s.trim();
+  if (!trimmed) return trimmed;
+  try {
+    return JSON.stringify(JSON.parse(trimmed));
+  } catch {
+    return trimmed.replace(/\n/g, "").replace(/\r/g, "");
+  }
+}
+function expandConstsInStyle(style, consts) {
+  const raw = typeof style === "string" ? style.trim() : JSON.stringify(style ?? {});
+  if (!raw || raw === "{}") return style;
+  const compact = compactJsonString(raw);
+  const expanded = expandConsts(compact, consts);
+  try {
+    JSON.parse(expanded);
+    return expanded;
+  } catch {
+    return style;
+  }
+}
+
+// src/html/assets/dimensions.ts
+var DEFAULT_WIDTH = 1080;
+var DEFAULT_HEIGHT = 1920;
+function dimensionsFromStandard(body) {
+  if (body.length < 24) return null;
+  if (body[0] === 137 && body[1] === 80 && body[2] === 78 && body[3] === 71) {
+    const w = body[16] << 24 | body[17] << 16 | body[18] << 8 | body[19];
+    const h = body[20] << 24 | body[21] << 16 | body[22] << 8 | body[23];
+    if (w > 0 && h > 0) return { w, h };
+  }
+  if (body[0] === 255 && body[1] === 216) {
+    let i = 2;
+    while (i + 9 < body.length) {
+      if (body[i] !== 255) {
+        i++;
+        continue;
+      }
+      const marker = body[i + 1];
+      const len = body[i + 2] << 8 | body[i + 3];
+      if (marker >= 192 && marker <= 207 && marker !== 196 && marker !== 200 && marker !== 204) {
+        const h = body[i + 5] << 8 | body[i + 6];
+        const w = body[i + 7] << 8 | body[i + 8];
+        if (w > 0 && h > 0) return { w, h };
+        return null;
+      }
+      i += 2 + len;
+    }
+  }
+  if (body[0] === 71 && body[1] === 73 && body[2] === 70) {
+    const w = body[6] | body[7] << 8;
+    const h = body[8] | body[9] << 8;
+    if (w > 0 && h > 0) return { w, h };
+  }
+  return null;
+}
+function isWebP(body) {
+  return body.length >= 12 && body[0] === 82 && body[1] === 73 && body[2] === 70 && body[3] === 70 && body[8] === 87 && body[9] === 69 && body[10] === 66 && body[11] === 80;
+}
+function webpDimensions(body) {
+  if (!isWebP(body)) return null;
+  let off = 12;
+  while (off + 8 <= body.length) {
+    const chunk = String.fromCharCode(body[off], body[off + 1], body[off + 2], body[off + 3]);
+    const size = body[off + 4] | body[off + 5] << 8 | body[off + 6] << 16 | body[off + 7] << 24;
+    const dataStart = off + 8;
+    const dataEnd = dataStart + size;
+    if (size < 0 || dataEnd > body.length) break;
+    if (chunk === "VP8X" && size >= 10) {
+      const w = body[dataStart + 4] | body[dataStart + 5] << 8 | body[dataStart + 6] << 16;
+      const h = body[dataStart + 7] | body[dataStart + 8] << 8 | body[dataStart + 9] << 16;
+      if (w > 0 && h > 0) return { w: w + 1, h: h + 1 };
+    }
+    if (chunk === "VP8L" && size >= 5) {
+      const b0 = body[dataStart];
+      const b1 = body[dataStart + 1];
+      const b2 = body[dataStart + 2];
+      const b3 = body[dataStart + 3];
+      const w = 1 + b0 + (b1 & 63) * 256;
+      const h = 1 + (b1 >> 6) + (b2 & 15) * 4 + (b3 & 252) * 2;
+      if (w > 0 && h > 0) return { w, h };
+    }
+    off = dataEnd + (size & 1);
+  }
+  return null;
+}
+function isAVIF(body) {
+  if (body.length < 12) return false;
+  if (String.fromCharCode(body[4], body[5], body[6], body[7]) !== "ftyp") return false;
+  const brand = String.fromCharCode(body[8], body[9], body[10], body[11]);
+  return brand === "avif" || brand === "avis" || brand === "mif1" || brand === "MA1A";
+}
+function avifDimensions(body) {
+  let found = null;
+  const walk = (buf) => {
+    for (let off = 0; off + 8 <= buf.length; ) {
+      let size = buf[off] << 24 | buf[off + 1] << 16 | buf[off + 2] << 8 | buf[off + 3];
+      const boxType = String.fromCharCode(buf[off + 4], buf[off + 5], buf[off + 6], buf[off + 7]);
+      let header = 8;
+      if (size === 1 && off + 16 <= buf.length) {
+        size = Number(
+          BigInt(buf[off + 8]) << 56n | BigInt(buf[off + 9]) << 48n | BigInt(buf[off + 10]) << 40n | BigInt(buf[off + 11]) << 32n | BigInt(buf[off + 12]) << 24n | BigInt(buf[off + 13]) << 16n | BigInt(buf[off + 14]) << 8n | BigInt(buf[off + 15])
+        );
+        header = 16;
+      }
+      if (size < header || off + size > buf.length) break;
+      const payloadStart = off + header;
+      const payloadEnd = off + size;
+      const payload = buf.slice(payloadStart, payloadEnd);
+      if (boxType === "ispe" && payload.length >= 12) {
+        const w = payload[4] << 24 | payload[5] << 16 | payload[6] << 8 | payload[7];
+        const h = payload[8] << 24 | payload[9] << 16 | payload[10] << 8 | payload[11];
+        if (w > 0 && h > 0) {
+          found = { w, h };
+          return false;
+        }
+      }
+      const containers = ["meta", "iprp", "moov", "trak", "mdia", "minf", "stbl", "stsd", "ipco"];
+      if (containers.includes(boxType)) {
+        let child = payload;
+        if (payload.length >= 4) child = payload.slice(4);
+        if (!walk(child)) return false;
+      }
+      off += size;
+    }
+    return true;
+  };
+  walk(body);
+  return found;
+}
+function imageDimensions(body, mime) {
+  if (!body || body.length === 0) return { w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT };
+  const std = dimensionsFromStandard(body);
+  if (std) return std;
+  const m = mime.trim().toLowerCase();
+  if (m === "image/webp" || isWebP(body)) {
+    const d = webpDimensions(body);
+    if (d) return d;
+  }
+  if (m === "image/avif" || isAVIF(body)) {
+    const d = avifDimensions(body);
+    if (d) return d;
+  }
+  return { w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT };
+}
+function decodeDataUri(uri) {
+  const match = /^data:([^;,]+)?(?:;base64)?,(.*)$/s.exec(uri);
+  if (!match) return null;
+  const mime = match[1] || "application/octet-stream";
+  const data = match[2];
+  if (/;base64/i.test(uri.slice(0, uri.indexOf(",") + 1))) {
+    const binary = atob(data);
+    const bytes2 = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes2[i] = binary.charCodeAt(i);
+    return { mime, bytes: bytes2 };
+  }
+  const decoded = decodeURIComponent(data);
+  const bytes = new TextEncoder().encode(decoded);
+  return { mime, bytes };
+}
+function encodeDataUri(mime, bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return `data:${mime};base64,${btoa(binary)}`;
+}
+
+// src/html/assets/refs.ts
+function looksLikeHttpUrl(raw) {
+  const u = raw.trim().toLowerCase();
+  return u.startsWith("http://") || u.startsWith("https://");
+}
+function isDataUri(raw) {
+  return raw.startsWith("data:");
+}
+function hasWindowsDrive(s) {
+  if (s.length < 2 || s[1] !== ":") return false;
+  const c = s[0];
+  return c >= "a" && c <= "z" || c >= "A" && c <= "Z";
+}
+function isLocalAssetRef(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return false;
+  if (looksLikeHttpUrl(trimmed)) return false;
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("file:")) return true;
+  return trimmed.includes("\\") || trimmed.includes("/") || hasWindowsDrive(trimmed);
+}
+function isAssetReference(raw) {
+  return looksLikeHttpUrl(raw) || isLocalAssetRef(raw) || isDataUri(raw);
+}
+function resolveAssetReference(raw, consts) {
+  return expandConsts(raw.trim(), consts);
+}
+function collectAssetUrls(doc) {
+  const consts = doc.consts ?? {};
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  const add = (raw) => {
+    const u = resolveAssetReference(raw ?? "", consts);
+    if (!u || !isAssetReference(u) || seen.has(u)) return;
+    seen.add(u);
+    out.push(u);
+  };
+  for (const page of doc.pages ?? []) {
+    add(page.imageUrl);
+    for (const t of page.texts ?? []) add(t.imageRef);
+    for (const m of page.masks ?? []) add(m.imageRef);
+  }
+  for (const f of doc.fonts ?? []) add(f);
+  return out;
+}
+function assetRef(resolvedUrl, asset, linksOnly) {
+  if (linksOnly) return resolvedUrl;
+  if (!asset) return resolvedUrl;
+  return encodeDataUri(asset.mime, asset.bytes);
+}
+function fontSrcUrl(fontUrl, asset, linksOnly) {
+  if (linksOnly) return `url(${fontUrl})`;
+  if (!asset) return `url(${fontUrl})`;
+  return `url(${encodeDataUri(asset.mime, asset.bytes)})`;
+}
+function buildAssetMap(docs, linksOnly) {
+  const list = Array.isArray(docs) ? docs : [docs];
+  const map = /* @__PURE__ */ new Map();
+  if (linksOnly) return map;
+  for (const doc of list) {
+    for (const url of collectAssetUrls(doc)) {
+      if (isDataUri(url)) {
+        const asset = decodeDataUri(url);
+        if (asset) map.set(url, asset);
+      }
+    }
+    for (const font of doc.fonts ?? []) {
+      const u = resolveAssetReference(font, doc.consts ?? {});
+      if (isDataUri(u)) {
+        const asset = decodeDataUri(u);
+        if (asset) map.set(u, asset);
+      }
+    }
+  }
+  return map;
+}
+function faceFormat(mime) {
+  switch (mime.trim().toLowerCase()) {
+    case "font/woff2":
+      return " format('woff2')";
+    case "font/woff":
+      return " format('woff')";
+    case "font/ttf":
+      return " format('truetype')";
+    case "font/otf":
+      return " format('opentype')";
+    default:
+      return "";
+  }
+}
+function fontFamilyNameForURL(fontURL, index) {
+  try {
+    const u = new URL(fontURL);
+    const family = u.searchParams.get("family");
+    if (family) {
+      const name = family.split(":")[0]?.replace(/\+/g, " ");
+      if (name) return name;
+    }
+  } catch {
+  }
+  return `CompiledFont_${index}`;
+}
+
+// src/html/text/inlineMarkup.ts
+var DELIMS = [
+  { open: "***", close: "***", tagOpen: "<strong><em>", tagClose: "</em></strong>" },
+  { open: "**", close: "**", tagOpen: "<strong>", tagClose: "</strong>" },
+  { open: "*", close: "*", tagOpen: "<em>", tagClose: "</em>" },
+  { open: "_", close: "_", tagOpen: "<u>", tagClose: "</u>" },
+  { open: "~", close: "~", tagOpen: "<s>", tagClose: "</s>" }
+];
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderSegment(s) {
+  let out = "";
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "\\" && i + 1 < s.length) {
+      out += escapeHtml(s[i + 1]);
+      i += 2;
+      continue;
+    }
+    let matched = false;
+    for (const d of DELIMS) {
+      if (!s.startsWith(d.open, i)) continue;
+      const innerStart = i + d.open.length;
+      const closeAt = s.indexOf(d.close, innerStart);
+      if (closeAt <= innerStart) continue;
+      out += d.tagOpen + renderSegment(s.slice(innerStart, closeAt)) + d.tagClose;
+      i = closeAt + d.close.length;
+      matched = true;
+      break;
+    }
+    if (matched) continue;
+    out += escapeHtml(s[i]);
+    i += 1;
+  }
+  return out;
+}
+function plainSegment(s) {
+  let out = "";
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "\\" && i + 1 < s.length) {
+      out += s[i + 1];
+      i += 2;
+      continue;
+    }
+    let matched = false;
+    for (const d of DELIMS) {
+      if (!s.startsWith(d.open, i)) continue;
+      const innerStart = i + d.open.length;
+      const closeAt = s.indexOf(d.close, innerStart);
+      if (closeAt <= innerStart) continue;
+      out += plainSegment(s.slice(innerStart, closeAt));
+      i = closeAt + d.close.length;
+      matched = true;
+      break;
+    }
+    if (matched) continue;
+    out += s[i];
+    i += 1;
+  }
+  return out;
+}
+function renderInlineHTML(content) {
+  if (!content) return "";
+  return content.split("\n").map((line) => renderSegment(line)).join("<br/>");
+}
+function plainTextForLayout(content) {
+  if (!content) return "";
+  return content.split("\n").map((line) => plainSegment(line)).join("\n");
+}
+function normalizeTextContent(content) {
+  return content.replace(/^[\t ]+/, "").replace(/[\t \r\n]+$/, "");
+}
+
+// src/html/resolve/resolveDocumentPure.ts
+function resolveDocumentPure(doc) {
+  const consts = doc.consts;
+  if (!consts || Object.keys(consts).length === 0) return doc;
+  return {
+    ...doc,
+    pages: doc.pages.map((p) => ({
+      ...p,
+      style: expandConstsInStyle(p.style, consts),
+      imageUrl: expandConsts(p.imageUrl.trim(), consts),
+      texts: (p.texts ?? []).map((t) => ({
+        ...t,
+        style: expandConstsInStyle(t.style, consts),
+        content: normalizeTextContent(expandConsts(t.content, consts)),
+        imageRef: expandConsts((t.imageRef ?? "").trim(), consts)
+      })),
+      masks: (p.masks ?? []).map((m) => ({
+        ...m,
+        style: expandConstsInStyle(m.style, consts),
+        imageRef: expandConsts((m.imageRef ?? "").trim(), consts)
+      }))
+    }))
+  };
+}
+
+// src/html/document/pageBlocks.ts
+var BlockText = "text";
+var BlockMask = "mask";
+function pageBlocksByIndex(page) {
+  const out = [];
+  for (const t of page.texts ?? []) {
+    out.push({ kind: BlockText, text: t });
+  }
+  for (const m of page.masks ?? []) {
+    out.push({ kind: BlockMask, mask: m });
+  }
+  out.sort((a, b) => blockIndex(a) - blockIndex(b));
+  return out;
+}
+function blockIndex(e) {
+  if (e.kind === BlockText && e.text) return e.text.index;
+  if (e.kind === BlockMask && e.mask) return e.mask.index;
+  return 0;
+}
+
+// src/html/style/keys.ts
+var KeyPosition = "position";
+var KeyLeft = "left";
+var KeyTop = "top";
+var KeyWidth = "width";
+var KeyHeight = "height";
+var KeyBoxSizing = "boxSizing";
+var KeyPadding = "padding";
+var KeyPaddingTop = "paddingTop";
+var KeyPaddingRight = "paddingRight";
+var KeyPaddingBottom = "paddingBottom";
+var KeyPaddingLeft = "paddingLeft";
+var KeyBorder = "border";
+var KeyBorderTop = "borderTop";
+var KeyBorderRight = "borderRight";
+var KeyBorderBottom = "borderBottom";
+var KeyBorderLeft = "borderLeft";
+var KeyBorderWidth = "borderWidth";
+var KeyBorderStyle = "borderStyle";
+var KeyBorderColor = "borderColor";
+var KeyBorderRadius = "borderRadius";
+var KeyBorderTopLeftRadius = "borderTopLeftRadius";
+var KeyBorderTopRightRadius = "borderTopRightRadius";
+var KeyBorderBottomRightRadius = "borderBottomRightRadius";
+var KeyBorderBottomLeftRadius = "borderBottomLeftRadius";
+var KeyBoxShadow = "boxShadow";
+var KeyTextShadow = "textShadow";
+var KeyGlow = "glow";
+var KeyBevel = "bevel";
+var KeyBlur = "blur";
+var KeyBlurLeft = "blurLeft";
+var KeyBlurRight = "blurRight";
+var KeyBlurTop = "blurTop";
+var KeyBlurBottom = "blurBottom";
+var KeyBackground = "background";
+var KeyColor = "color";
+var KeyTextAlign = "textAlign";
+var KeyAlignItems = "alignItems";
+var KeyTextDecoration = "textDecoration";
+var KeyTextDecorationLine = "textDecorationLine";
+var KeyLetterSpacing = "letterSpacing";
+var KeyLineHeight = "lineHeight";
+var KeyWordSpacing = "wordSpacing";
+var KeyWhiteSpace = "whiteSpace";
+var KeyTextTransform = "textTransform";
+var KeyTextIndent = "textIndent";
+var KeyTextOverflow = "textOverflow";
+var KeyOpacity = "opacity";
+var KeyStroke = "stroke";
+var KeyStrokeWidth = "strokeWidth";
+var KeyStrokeColor = "strokeColor";
+var KeyTransform = "transform";
+var KeyTransformOrigin = "transformOrigin";
+var KeyTranslate = "translate";
+var KeyRotate = "rotate";
+var KeyScale = "scale";
+var KeySkew = "skew";
+var KeyMatrix = "matrix";
+var KeyFontFamily = "fontFamily";
+var KeyFontSize = "fontSize";
+var KeyFontWeight = "fontWeight";
+var KeyFontStyle = "fontStyle";
+var KeyFontVariant = "fontVariant";
+var KeyFontStretch = "fontStretch";
+var boxKeys = /* @__PURE__ */ new Set([
+  KeyHeight,
+  KeyBackground,
+  KeyPadding,
+  KeyPaddingTop,
+  KeyPaddingRight,
+  KeyPaddingBottom,
+  KeyPaddingLeft,
+  KeyBorder,
+  KeyBorderTop,
+  KeyBorderRight,
+  KeyBorderBottom,
+  KeyBorderLeft,
+  KeyBorderWidth,
+  KeyBorderStyle,
+  KeyBorderColor,
+  KeyBorderRadius,
+  KeyBorderTopLeftRadius,
+  KeyBorderTopRightRadius,
+  KeyBorderBottomRightRadius,
+  KeyBorderBottomLeftRadius,
+  KeyBoxShadow,
+  KeyGlow,
+  KeyBevel,
+  KeyBlur,
+  KeyBlurLeft,
+  KeyBlurRight,
+  KeyBlurTop,
+  KeyBlurBottom
+]);
+var textKeys = /* @__PURE__ */ new Set([
+  KeyColor,
+  KeyTextAlign,
+  KeyAlignItems,
+  KeyTextDecoration,
+  KeyTextDecorationLine,
+  KeyLetterSpacing,
+  KeyLineHeight,
+  KeyWordSpacing,
+  KeyWhiteSpace,
+  KeyTextTransform,
+  KeyTextIndent,
+  KeyTextOverflow,
+  KeyOpacity,
+  KeyTextShadow,
+  KeyStroke,
+  KeyStrokeWidth,
+  KeyStrokeColor,
+  KeyFontFamily,
+  KeyFontSize,
+  KeyFontWeight,
+  KeyFontStyle,
+  KeyFontVariant,
+  KeyFontStretch
+]);
+var transformKeys = /* @__PURE__ */ new Set([
+  KeyTransform,
+  KeyTransformOrigin,
+  KeyTranslate,
+  KeyRotate,
+  KeyScale,
+  KeySkew,
+  KeyMatrix
+]);
+function isBoxKey(key) {
+  return boxKeys.has(key);
+}
+function isTextKey(key) {
+  return textKeys.has(key);
+}
+function isTransformKey(key) {
+  return transformKeys.has(key);
+}
+
+// src/html/style/values.ts
+function stringifyCSSValue(raw) {
+  if (raw === null || raw === void 0) return "";
+  if (typeof raw === "string") return raw.trim();
+  if (typeof raw === "number") return formatJSONNumber(raw);
+  if (typeof raw === "boolean") return raw ? "1" : "0";
+  return JSON.stringify(raw).trim();
+}
+function formatJSONNumber(value) {
+  if (Math.abs(value - Math.trunc(value)) < 1e-9 && Math.abs(value) < 1e12) {
+    return String(Math.trunc(value));
+  }
+  return value.toString();
+}
+function sanitizeCSSValue(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  return trimmed.replaceAll(";", "");
+}
+function hasStyleValue(key, raw) {
+  if (raw === null || raw === void 0) return false;
+  if (typeof raw === "boolean") return raw;
+  const value = sanitizeCSSValue(stringifyCSSValue(raw));
+  if (!value) return false;
+  if (omitZeroForKey(key) && isZeroLikeCSSValue(value)) return false;
+  return true;
+}
+function omitZeroForKey(key) {
+  switch (key) {
+    case KeyHeight:
+    case KeyWidth:
+    case KeyPadding:
+    case KeyPaddingTop:
+    case KeyPaddingRight:
+    case KeyPaddingBottom:
+    case KeyPaddingLeft:
+    case KeyBorderWidth:
+    case KeyStrokeWidth:
+    case KeyBorderRadius:
+    case KeyBorderTopLeftRadius:
+    case KeyBorderTopRightRadius:
+    case KeyBorderBottomRightRadius:
+    case KeyBorderBottomLeftRadius:
+    case KeyLetterSpacing:
+    case KeyWordSpacing:
+    case KeyLineHeight:
+    case KeyTextIndent:
+    case KeyBlur:
+    case KeyBlurLeft:
+    case KeyBlurRight:
+    case KeyBlurTop:
+    case KeyBlurBottom:
+      return true;
+    default:
+      return false;
+  }
+}
+function isZeroLikeCSSValue(value) {
+  const v = value.trim().toLowerCase();
+  switch (v) {
+    case "0":
+    case "0%":
+    case "0px":
+    case "0em":
+    case "0rem":
+    case "0pt":
+    case "0cqh":
+    case "0ch":
+    case "0vw":
+    case "0vh":
+    case "0vmin":
+    case "0vmax":
+      return true;
+  }
+  const units = ["px", "%", "em", "rem", "pt", "cqh", "ch"];
+  for (const unit of units) {
+    if (!v.endsWith(unit)) continue;
+    const n2 = Number.parseFloat(v.slice(0, -unit.length));
+    if (Number.isFinite(n2) && n2 === 0) return true;
+  }
+  const n = Number.parseFloat(v);
+  return Number.isFinite(n) && n === 0;
+}
+function filterStyleMap(style) {
+  if (Object.keys(style).length === 0) return style;
+  const out = {};
+  for (const [key, raw] of Object.entries(style)) {
+    if (hasStyleValue(key, raw)) {
+      out[key] = raw;
+    }
+  }
+  return out;
+}
+function pctString(value) {
+  return `${value}%`;
+}
+function pxString(value) {
+  return `${value}px`;
+}
+
+// src/html/style/names.ts
+var aliasToCanonical = {
+  "border-radius": KeyBorderRadius,
+  "border-width": KeyBorderWidth,
+  "border-style": KeyBorderStyle,
+  "border-color": KeyBorderColor,
+  "box-shadow": KeyBoxShadow,
+  "text-shadow": KeyTextShadow,
+  "text-align": KeyTextAlign,
+  "align-items": KeyAlignItems,
+  "vertical-align": KeyAlignItems,
+  "font-family": KeyFontFamily,
+  "font-weight": KeyFontWeight,
+  "font-style": KeyFontStyle,
+  "line-height": KeyLineHeight,
+  "letter-spacing": KeyLetterSpacing,
+  "text-decoration": KeyTextDecoration,
+  "background-color": KeyBackground,
+  "stroke-width": KeyStrokeWidth,
+  "stroke-color": KeyStrokeColor,
+  "text-stroke": KeyStroke,
+  backGround: KeyBackground,
+  backgroundColor: KeyBackground,
+  br: KeyBorderRadius,
+  bw: KeyBorderWidth,
+  bc: KeyBorderColor,
+  bs: KeyBorderStyle,
+  bg: KeyBackground,
+  ta: KeyTextAlign,
+  ts: KeyTextShadow,
+  bsh: KeyBoxShadow,
+  blur: KeyBlur,
+  "blur-left": KeyBlurLeft,
+  "blur-right": KeyBlurRight,
+  "blur-top": KeyBlurTop,
+  "blur-bottom": KeyBlurBottom,
+  ff: KeyFontFamily,
+  fw: KeyFontWeight,
+  fs: KeyFontStyle,
+  pd: KeyPadding,
+  sw: KeyStrokeWidth,
+  sc: KeyStrokeColor,
+  textStroke: KeyStroke,
+  textStrokeWidth: KeyStrokeWidth,
+  textStrokeColor: KeyStrokeColor
+};
+function resolveName(raw) {
+  const key = raw.trim();
+  if (!key) return { canonical: "", ok: false };
+  const mapped = aliasToCanonical[key];
+  if (mapped) return { canonical: mapped, ok: true };
+  if (key.includes("-")) {
+    const camel = kebabToCamel(key);
+    const mappedCamel = aliasToCanonical[camel];
+    if (mappedCamel) return { canonical: mappedCamel, ok: true };
+    const mappedRaw = aliasToCanonical[key];
+    if (mappedRaw) return { canonical: mappedRaw, ok: true };
+    return { canonical: camel, ok: isKnownCanonical(camel) };
+  }
+  const mappedAgain = aliasToCanonical[key];
+  if (mappedAgain) return { canonical: mappedAgain, ok: true };
+  return { canonical: key, ok: isKnownCanonical(key) };
+}
+function isKnownCanonical(name) {
+  return isBoxKey(name) || isTextKey(name) || isTransformKey(name) || name === KeyLeft || name === KeyTop || name === KeyWidth || name === KeyHeight || name === KeyGlow || name === KeyBevel || name === KeyBlur || name === KeyBlurLeft || name === KeyBlurRight || name === KeyBlurTop || name === KeyBlurBottom;
+}
+function kebabToCamel(value) {
+  const parts = value.split("-");
+  if (parts.length === 0) return value;
+  let out = "";
+  for (let i = 0; i < parts.length; i += 1) {
+    const part = parts[i]?.trim();
+    if (!part) continue;
+    if (i === 0) {
+      out += part.toLowerCase();
+      continue;
+    }
+    out += part[0].toUpperCase() + part.slice(1).toLowerCase();
+  }
+  return out;
+}
+function normalizeStyle(style) {
+  const rawObject = parseStyleObject(style);
+  if (!rawObject) return {};
+  const out = {};
+  const applyKeys = (vendorOnly) => {
+    for (const [rawKey, value] of Object.entries(rawObject)) {
+      const vendor = isVendorRawKey(rawKey);
+      if (vendorOnly !== vendor) continue;
+      const canonical = canonicalKeyForRaw(rawKey);
+      if (!canonical || isVendorKey(canonical)) continue;
+      if (vendorOnly && Object.prototype.hasOwnProperty.call(out, canonical)) continue;
+      out[canonical] = value;
+    }
+  };
+  applyKeys(false);
+  applyKeys(true);
+  mergeBackgroundKeys(out);
+  return filterStyleMap(out);
+}
+function parseStyleObject(style) {
+  if (typeof style === "string") {
+    const trimmed = style.trim();
+    if (!trimmed || trimmed === "{}") return null;
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  if (!style || typeof style !== "object" || Array.isArray(style)) return null;
+  if (Object.keys(style).length === 0) return null;
+  return style;
+}
+function canonicalKeyForRaw(rawKey) {
+  for (const candidate of expandRawKey(rawKey)) {
+    const resolved = resolveName(candidate);
+    if (resolved.ok) return resolved.canonical;
+    if (!isVendorKey(candidate)) return candidate;
+  }
+  return "";
+}
+function isVendorRawKey(key) {
+  if (isVendorKey(key)) return true;
+  return stripVendorPrefix(key).ok;
+}
+function expandRawKey(rawKey) {
+  const key = rawKey.trim();
+  const stripped = stripVendorPrefix(key);
+  if (stripped.ok) return [stripped.value, key];
+  return [key];
+}
+function stripVendorPrefix(key) {
+  const trimmed = key.trim();
+  const lower = trimmed.toLowerCase();
+  for (const prefix of ["-webkit-", "webkit-", "webkit"]) {
+    if (!lower.startsWith(prefix)) continue;
+    const rest = trimmed.slice(prefix.length);
+    if (!rest) return { value: "", ok: false };
+    return { value: decapitalize(rest), ok: true };
+  }
+  if (trimmed.startsWith("Webkit")) {
+    return { value: decapitalize(trimmed.slice(6)), ok: true };
+  }
+  if (trimmed.startsWith("webkit")) {
+    return { value: decapitalize(trimmed.slice(6)), ok: true };
+  }
+  return { value: "", ok: false };
+}
+function decapitalize(value) {
+  if (!value) return value;
+  return value[0].toLowerCase() + value.slice(1);
+}
+function isVendorKey(key) {
+  return key.startsWith("Webkit") || key.startsWith("webkit") || key.toLowerCase().startsWith("-webkit-");
+}
+function mergeBackgroundKeys(style) {
+  if (Object.prototype.hasOwnProperty.call(style, KeyBackground)) {
+    style[KeyBackground] = style[KeyBackground];
+    delete style.backgroundColor;
+  }
+}
+
+// src/html/style/percent.ts
+var defaultHandlers = [];
+function applyPercentHandlers(style, dims) {
+  if (Object.keys(style).length === 0) return style;
+  const resolvedDims = resolveImageDims(dims);
+  const keyHandler = /* @__PURE__ */ new Map();
+  for (const handler of defaultHandlers) {
+    for (const key of handler.keys()) {
+      keyHandler.set(key, handler);
+    }
+  }
+  const out = {};
+  for (const [key, raw] of Object.entries(style)) {
+    const value = stringifyRaw(raw);
+    if (resolvedDims.preservePercent && value.includes("%")) {
+      out[key] = raw;
+      continue;
+    }
+    const handler = keyHandler.get(key);
+    if (handler && value) {
+      const resolved = handler.resolve(key, value, resolvedDims);
+      if (resolved.ok) {
+        out[key] = resolved.resolved;
+        continue;
+      }
+    }
+    out[key] = raw;
+  }
+  return out;
+}
+function resolveImageDims(dims) {
+  const w = dims.W ?? dims.w ?? 0;
+  const h = dims.H ?? dims.h ?? 0;
+  const fontSizePx = dims.FontSizePx ?? dims.fontSizePx ?? 0;
+  const zoom = dims.Zoom ?? dims.zoom ?? 1;
+  const preservePercent = dims.PreservePercent ?? dims.preservePercent ?? false;
+  return { w, h, fontSizePx, zoom: zoom > 0 ? zoom : 1, preservePercent };
+}
+function stringifyRaw(raw) {
+  if (raw === null || raw === void 0) return "";
+  if (typeof raw === "string") return raw;
+  return String(raw);
+}
+var DimensionHandler = class {
+  keys() {
+    return ["height", "width"];
+  }
+  resolve(key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    const base = key === "width" ? dims.w : dims.h;
+    return singlePercentToken(value, base, dims);
+  }
+};
+var PaddingHandler = class {
+  keys() {
+    return ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
+  }
+  resolve(key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    const tokens = value.trim().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0) return { resolved: value, ok: true };
+    if (tokens.length === 1 || key !== "padding") {
+      const base = paddingAxisBase(key, tokens.length, 0, dims);
+      if (tokens.length === 1) {
+        return singlePercentToken(tokens[0], base, dims);
+      }
+    }
+    const bases = shorthandBases(tokens.length);
+    const out = [];
+    for (let i = 0; i < tokens.length; i += 1) {
+      const token = tokens[i] ?? "";
+      const axis = bases[i] ?? 0;
+      const base = paddingAxisBase(key, tokens.length, axis, dims);
+      const resolved = singlePercentToken(token, base, dims);
+      out.push(resolved.resolved);
+    }
+    return { resolved: out.join(" "), ok: true };
+  }
+};
+function shorthandBases(count) {
+  switch (count) {
+    case 1:
+      return [0, 0, 0, 0];
+    case 2:
+      return [0, 1, 0, 1];
+    case 3:
+      return [0, 1, 2, 1];
+    default:
+      return [0, 1, 2, 3];
+  }
+}
+function paddingAxisBase(key, count, axis, dims) {
+  switch (key) {
+    case "paddingTop":
+    case "paddingBottom":
+      return dims.h;
+    case "paddingLeft":
+    case "paddingRight":
+      return dims.w;
+  }
+  if (count === 1) return max(dims.w, dims.h);
+  switch (axis) {
+    case 0:
+    case 2:
+      return dims.h;
+    case 1:
+    case 3:
+      return dims.w;
+    default:
+      return dims.w;
+  }
+}
+var BorderWidthHandler = class {
+  keys() {
+    return ["borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    return singlePercentToken(value, dims.w, dims);
+  }
+};
+var LineHeightHandler = class {
+  keys() {
+    return ["lineHeight"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.trim().endsWith("%")) return { resolved: value, ok: true };
+    return singlePercentToken(value, dims.h, dims);
+  }
+};
+var StrokeWidthHandler = class {
+  keys() {
+    return ["strokeWidth"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    const base = dims.fontSizePx > 0 ? dims.fontSizePx : 1;
+    return singlePercentToken(value, base, dims);
+  }
+};
+var BlurHandler = class {
+  keys() {
+    return ["blur", "blurLeft", "blurRight", "blurTop", "blurBottom"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    let base = dims.w;
+    if (dims.h > 0 && dims.h < dims.w) base = dims.h;
+    return singlePercentToken(value, base, dims);
+  }
+};
+var TextShadowHandler = class {
+  keys() {
+    return ["textShadow"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    return { resolved: resolveShadowList(value, dims), ok: true };
+  }
+};
+var BoxShadowHandler = class {
+  keys() {
+    return ["boxShadow"];
+  }
+  resolve(_key, value, dims) {
+    if (!value.includes("%")) return { resolved: value, ok: true };
+    return { resolved: resolveShadowList(value, dims), ok: true };
+  }
+};
+function resolveShadowList(value, dims) {
+  const parts = value.split(",");
+  for (let i = 0; i < parts.length; i += 1) {
+    const shadow = parts[i]?.trim() ?? "";
+    parts[i] = resolveShadowOne(shadow, dims);
+  }
+  return parts.join(", ");
+}
+function resolveShadowOne(shadow, dims) {
+  if (!shadow) return shadow;
+  const tokens = shadow.split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return shadow;
+  const colorIndex = findColorTokenIndex(tokens);
+  const numericEnd = colorIndex < 0 ? tokens.length : colorIndex;
+  for (let i = 0; i < numericEnd && i < 3; i += 1) {
+    const token = tokens[i];
+    if (token) tokens[i] = resolveShadowToken(token, i, dims);
+  }
+  return tokens.join(" ");
+}
+function findColorTokenIndex(tokens) {
+  for (let i = 0; i < tokens.length; i += 1) {
+    const token = tokens[i] ?? "";
+    if (token.startsWith("#") || token.toLowerCase().startsWith("rgb")) return i;
+  }
+  return -1;
+}
+function resolveShadowToken(token, index, dims) {
+  if (!token.endsWith("%")) return token;
+  const pct = Number.parseFloat(token.slice(0, -1));
+  if (!Number.isFinite(pct)) return token;
+  const z = dims.zoom > 0 ? dims.zoom : 1;
+  let base = 0;
+  switch (index) {
+    case 0:
+      base = dims.w * z;
+      break;
+    case 1:
+      base = dims.h * z;
+      break;
+    case 2:
+      base = max(dims.w, dims.h) * z;
+      break;
+    default:
+      return token;
+  }
+  return `${(pct / 100 * base).toFixed(3)}px`;
+}
+function percentToPx(percentString, base, zoom) {
+  const pct = Number.parseFloat(percentString.trim().replace(/%$/, ""));
+  if (!Number.isFinite(pct)) return percentString;
+  const z = zoom > 0 ? zoom : 1;
+  return `${(pct / 100 * base * z).toFixed(3)}px`;
+}
+function singlePercentToken(value, base, dims) {
+  const v = value.trim();
+  if (!v.endsWith("%")) return { resolved: v, ok: true };
+  return { resolved: percentToPx(v, base, dims.zoom), ok: true };
+}
+function max(a, b) {
+  return a > b ? a : b;
+}
+defaultHandlers = [
+  new TextShadowHandler(),
+  new BoxShadowHandler(),
+  new BlurHandler(),
+  new BorderWidthHandler(),
+  new StrokeWidthHandler(),
+  new LineHeightHandler(),
+  new PaddingHandler(),
+  new DimensionHandler()
+];
+
+// src/html/geometry/layoutHelpers.ts
+function textSizeBasisPx(canvasW, canvasH) {
+  const w = canvasW;
+  const h = canvasH;
+  if (w <= 0 && h <= 0) return 1;
+  if (w <= 0) return h;
+  if (h <= 0) return w;
+  return w < h ? w : h;
+}
+function textFontSizePx(textSizePct, canvasW, canvasH) {
+  const px = textSizePct / 100 * textSizeBasisPx(canvasW, canvasH);
+  return px < 1 ? 1 : px;
+}
+function paddingHorizontal(p) {
+  return p.left + p.right;
+}
+function paddingVertical(p) {
+  return p.top + p.bottom;
+}
+function cssLengthToPx(s, refFontPx) {
+  s = s.trim().toLowerCase();
+  if (!s) return 0;
+  if (s.endsWith("px")) {
+    const v2 = parseFloat(s.slice(0, -2));
+    return Number.isFinite(v2) ? Math.max(0, v2) : 0;
+  }
+  if (s.endsWith("em")) {
+    const v2 = parseFloat(s.slice(0, -2));
+    return Number.isFinite(v2) ? Math.max(0, v2 * refFontPx) : 0;
+  }
+  if (s.endsWith("%")) return 0;
+  const v = parseFloat(s);
+  return Number.isFinite(v) ? Math.max(0, v) : 0;
+}
+function rawStringProp(m, ...keys) {
+  for (const k of keys) {
+    const v = m[k];
+    if (typeof v === "string" && v.trim()) return v.trim();
+    if (typeof v === "number") return String(v);
+  }
+  return "";
+}
+function cssColorFromRaw(v) {
+  if (typeof v === "string" && v.trim()) return v.trim().replace(/;/g, "");
+  return "";
+}
+function backgroundColorFromStyle(style) {
+  const m = normalizeStyle(style);
+  if (!m) return "";
+  for (const key of ["backGround", "background", "backgroundColor"]) {
+    const c = cssColorFromRaw(m[key]);
+    if (c) return c;
+  }
+  return "";
+}
+function parsePaddingCSS(css, refFontPx) {
+  css = css.trim();
+  if (!css) return { top: 0, right: 0, bottom: 0, left: 0 };
+  const parts = css.split(/\s+/);
+  const vals = parts.map((p) => cssLengthToPx(p, refFontPx));
+  switch (vals.length) {
+    case 1:
+      return { top: vals[0], right: vals[0], bottom: vals[0], left: vals[0] };
+    case 2:
+      return { top: vals[0], right: vals[1], bottom: vals[0], left: vals[1] };
+    case 3:
+      return { top: vals[0], right: vals[1], bottom: vals[2], left: vals[1] };
+    default:
+      return { top: vals[0], right: vals[1], bottom: vals[2], left: vals[3] };
+  }
+}
+function styleResolvedForCanvas(style, canvasW, canvasH, fontPx) {
+  const m = normalizeStyle(style);
+  if (!m) return {};
+  return applyPercentHandlers(m, { w: canvasW, h: canvasH, fontSizePx: fontPx, zoom: 1 });
+}
+function textBoxInsetsForCanvas(style, refFontPx, canvasW, canvasH) {
+  const m = styleResolvedForCanvas(style, canvasW, canvasH, refFontPx);
+  const padding = parsePaddingCSS(rawStringProp(m, "padding"), refFontPx);
+  let borderW = rawStringProp(m, "borderWidth");
+  if (!borderW && typeof m.border === "string") {
+    borderW = m.border.split(/\s+/)[0] ?? "";
+  }
+  const px = cssLengthToPx(borderW, refFontPx);
+  const border = px > 0 ? { top: px, right: px, bottom: px, left: px } : { top: 0, right: 0, bottom: 0, left: 0 };
+  return {
+    top: padding.top + border.top,
+    right: padding.right + border.right,
+    bottom: padding.bottom + border.bottom,
+    left: padding.left + border.left
+  };
+}
+function explicitHeightPx(style, canvasW, canvasH, fontPx) {
+  if (canvasH < 1) return { px: 0, ok: false };
+  const m = styleResolvedForCanvas(style, canvasW, canvasH, fontPx);
+  const val = rawStringProp(m, "height");
+  if (!val) return { px: 0, ok: false };
+  if (val.endsWith("%")) {
+    const pct = parseFloat(val.slice(0, -1));
+    if (!Number.isFinite(pct) || pct <= 0) return { px: 0, ok: false };
+    return { px: Math.round(canvasH * pct / 100), ok: true };
+  }
+  if (val.endsWith("px")) {
+    const px = parseFloat(val.slice(0, -2));
+    if (!Number.isFinite(px) || px < 1) return { px: 0, ok: false };
+    return { px: Math.round(px), ok: true };
+  }
+  if (val.endsWith("em") || val.endsWith("rem")) {
+    const suffix = val.endsWith("rem") ? "rem" : "em";
+    const n2 = parseFloat(val.slice(0, -suffix.length));
+    if (!Number.isFinite(n2) || n2 <= 0 || fontPx <= 0) return { px: 0, ok: false };
+    return { px: Math.round(n2 * fontPx), ok: true };
+  }
+  const n = parseFloat(val);
+  if (Number.isFinite(n) && n > 0) return { px: Math.round(n), ok: true };
+  return { px: 0, ok: false };
+}
+function textLayerNeedsComputedHeight(style, canvasW, canvasH, textSize) {
+  const fontPx = textFontSizePx(textSize, canvasW, canvasH);
+  if (explicitHeightPx(style, canvasW, canvasH, fontPx).ok) return true;
+  return paddingVertical(textBoxInsetsForCanvas(style, fontPx, canvasW, canvasH)) > 0;
+}
+function fontWeightIsBold(style) {
+  const m = normalizeStyle(style);
+  if (!m) return false;
+  const w = rawStringProp(m, "fontWeight", "font-weight").toLowerCase();
+  if (["bold", "bolder", "600", "700", "800", "900"].includes(w)) return true;
+  const n = parseInt(w, 10);
+  return Number.isFinite(n) && n >= 600;
+}
+function lineHeightMultiplier(style, fontSizePx) {
+  const def = 1.2;
+  const m = normalizeStyle(style);
+  if (!m) return def;
+  const raw = m.lineHeight;
+  if (typeof raw === "number" && raw > 0) return raw;
+  const val = typeof raw === "string" ? raw.trim() : "";
+  if (!val) return def;
+  if (val.endsWith("%")) {
+    const pct = parseFloat(val.slice(0, -1));
+    if (Number.isFinite(pct) && pct > 0) return pct / 100;
+    return def;
+  }
+  if (val.endsWith("px")) {
+    const px = parseFloat(val.slice(0, -2));
+    if (Number.isFinite(px) && px > 0 && fontSizePx > 0) return px / fontSizePx;
+    return def;
+  }
+  const v = parseFloat(val);
+  return Number.isFinite(v) && v > 0 ? v : def;
+}
+
+// src/html/geometry/textBlockGeometry.ts
+function textBlockWidthPx(widthPct, canvasW) {
+  const w = Math.round(canvasW * widthPct / 100);
+  return w < 1 ? 1 : w;
+}
+function charsPerLineForWidth(widthPx, fontSizePx, bold) {
+  const em = bold ? 0.58 : 0.48;
+  const cpl = Math.floor(widthPx / (fontSizePx * em));
+  return cpl < 1 ? 1 : cpl;
+}
+function estimateTextLines(content, widthPx, fontSizePx, bold) {
+  if (widthPx < 1) widthPx = 1;
+  const charsPerLine = charsPerLineForWidth(widthPx, fontSizePx, bold);
+  const parts = content.split("\n");
+  let total = 0;
+  for (const part of parts) {
+    const n = [...part.trim()].length;
+    if (n === 0) continue;
+    total += Math.ceil(n / charsPerLine);
+  }
+  return total < 1 ? 1 : total;
+}
+function textBlockGeometry(t, content, canvasW, canvasH) {
+  const x = Math.round(canvasW * t.x / 100);
+  const y = Math.round(canvasH * t.y / 100);
+  const outerW = textBlockWidthPx(t.width, canvasW);
+  const fontPx = textFontSizePx(t.textSize, canvasW, canvasH);
+  const insets = textBoxInsetsForCanvas(t.style, fontPx, canvasW, canvasH);
+  const padW = Math.round(paddingHorizontal(insets));
+  const padH = Math.round(paddingVertical(insets));
+  let contentW = outerW - padW;
+  if (contentW < 1) contentW = 1;
+  const plain = plainTextForLayout(content);
+  const lines = estimateTextLines(plain, contentW, fontPx, fontWeightIsBold(t.style));
+  const lh = lineHeightMultiplier(t.style, fontPx);
+  const linePx = fontPx * lh;
+  let contentH = Math.round(linePx * lines);
+  if (contentH < Math.round(linePx)) contentH = Math.round(linePx);
+  let width = outerW;
+  let height = contentH + padH;
+  const explicit = explicitHeightPx(t.style, canvasW, canvasH, fontPx);
+  if (explicit.ok) {
+    if (content.trim() === "") height = explicit.px;
+    else if (explicit.px > height) height = explicit.px;
+  }
+  if (width < 1) width = 1;
+  if (height < 1) height = 1;
+  return { x, y, width, height };
+}
+function appendTextLayerGeometryCSS(boxCSS, t, content, canvasW, canvasH) {
+  if (canvasH < 1 || boxCSS.includes("height:")) return boxCSS;
+  if (!textLayerNeedsComputedHeight(t.style, canvasW, canvasH, t.textSize)) return boxCSS;
+  const { height: geomH } = textBlockGeometry(t, content, canvasW, canvasH);
+  if (geomH < 1) return boxCSS;
+  const heightPct = geomH / canvasH * 100;
+  return `${boxCSS}height:${heightPct}%;`;
+}
+
+// src/html/style/fragment.ts
+var TypeKey = "__type__";
+var TypeMotionDiv = "div";
+var TypeSpan = "span";
+var TypeFilter = "filter";
+var TypeMask = "mask";
+function newFragment(type) {
+  return { [TypeKey]: type };
+}
+function mergeFragments(fragments) {
+  const byType = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const fragment of fragments) {
+    if (!fragment) continue;
+    const type = getFragmentString(fragment, TypeKey);
+    if (!type) continue;
+    const existing = byType.get(type);
+    if (existing) {
+      for (const [key, value] of Object.entries(fragment)) {
+        if (key !== TypeKey) {
+          existing[key] = value;
+        }
+      }
+      continue;
+    }
+    const copy = { [TypeKey]: type };
+    for (const [key, value] of Object.entries(fragment)) {
+      copy[key] = value;
+    }
+    byType.set(type, copy);
+    order.push(type);
+  }
+  return order.map((type) => byType.get(type)).filter((v) => Boolean(v));
+}
+function setFragmentValue(fragment, prop, value) {
+  if (!fragment) return;
+  fragment[prop] = value;
+}
+function getFragmentString(fragment, prop) {
+  if (!fragment) return "";
+  const value = fragment[prop];
+  return typeof value === "string" ? value : "";
+}
+
+// src/html/style/effects.ts
+function expandEffects(style, dims, targetSVG, filterID) {
+  if (Object.keys(style).length === 0) return { style, fragments: [] };
+  const out = { ...style };
+  const extra = [];
+  if (Object.prototype.hasOwnProperty.call(out, KeyGlow)) {
+    const raw = out[KeyGlow];
+    const value = stringifyCSSValue(raw);
+    delete out[KeyGlow];
+    if (hasStyleValue(KeyGlow, raw)) {
+      if (targetSVG) {
+        extra.push(glowFilterFragment(filterID, value, dims));
+      } else {
+        mergeShadowKey(out, KeyTextShadow, value);
+      }
+    }
+  }
+  if (Object.prototype.hasOwnProperty.call(out, KeyBevel)) {
+    const raw = out[KeyBevel];
+    const value = stringifyCSSValue(raw);
+    delete out[KeyBevel];
+    if (hasStyleValue(KeyBevel, raw)) {
+      if (targetSVG) {
+        extra.push(bevelFilterFragment(`${filterID}-bevel`, value));
+      } else {
+        mergeBoxShadowKey(out, bevelBoxShadows(value));
+      }
+    }
+  }
+  return { style: out, fragments: extra };
+}
+function mergeShadowKey(style, key, add) {
+  const existing = stringifyCSSValue(style[key]);
+  if (!existing) {
+    style[key] = add;
+    return;
+  }
+  style[key] = `${existing}, ${add}`;
+}
+function mergeBoxShadowKey(style, add) {
+  const existing = stringifyCSSValue(style[KeyBoxShadow]);
+  if (!existing) {
+    style[KeyBoxShadow] = add;
+    return;
+  }
+  style[KeyBoxShadow] = `${existing}, ${add}`;
+}
+function bevelBoxShadows(value) {
+  const light = "inset 1px 1px 0 rgba(255,255,255,0.35)";
+  let dark = "inset -1px -1px 0 rgba(0,0,0,0.35)";
+  if (value.trim()) {
+    dark = `inset -1px -1px 2px ${value.trim()}`;
+  }
+  return `${light}, ${dark}`;
+}
+function glowFilterFragment(id, value, dims) {
+  const parsed = parseSimpleShadow(value, dims);
+  const fragment = newFragment(TypeFilter);
+  setFragmentValue(fragment, "id", id);
+  setFragmentValue(fragment, "feDropShadowDx", parsed.dx.toFixed(3));
+  setFragmentValue(fragment, "feDropShadowDy", parsed.dy.toFixed(3));
+  setFragmentValue(fragment, "feGaussianBlurStd", (parsed.blur / 2).toFixed(3));
+  setFragmentValue(fragment, "floodColor", parsed.color);
+  return fragment;
+}
+function bevelFilterFragment(id, value) {
+  const fragment = newFragment(TypeFilter);
+  setFragmentValue(fragment, "id", id);
+  setFragmentValue(fragment, "feDropShadowDx", "-1");
+  setFragmentValue(fragment, "feDropShadowDy", "-1");
+  setFragmentValue(fragment, "feGaussianBlurStd", "0.5");
+  const color = value.trim() || "rgba(0,0,0,0.4)";
+  setFragmentValue(fragment, "floodColor", color);
+  setFragmentValue(fragment, "feDropShadowDx2", "1");
+  setFragmentValue(fragment, "floodColor2", "rgba(255,255,255,0.35)");
+  return fragment;
+}
+function parseSimpleShadow(value, dims) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { dx: 0, dy: 0, blur: 4, color: "rgba(0,0,0,0.5)" };
+  }
+  const resolved = applyPercentHandlers({ textShadow: trimmed }, dims);
+  const parts = stringifyCSSValue(resolved.textShadow).split(/\s+/).filter(Boolean);
+  let dx = 0;
+  let dy = 0;
+  let blur = 0;
+  let color = "";
+  if (parts.length >= 3) {
+    dx = parsePxNum(parts[0] ?? "");
+    dy = parsePxNum(parts[1] ?? "");
+    blur = parsePxNum(parts[2] ?? "");
+  }
+  if (parts.length >= 4) {
+    color = parts[3] ?? "";
+  }
+  if (!color) color = "rgba(0,0,0,0.5)";
+  return { dx, dy, blur, color };
+}
+function parsePxNum(value) {
+  const parsed = Number.parseFloat(value.trim().replace(/px$/, ""));
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+// src/html/style/blur.ts
+var blurFilterKind = "blur";
+var blurSideKeys = [
+  { key: KeyBlurLeft, side: "left" },
+  { key: KeyBlurRight, side: "right" },
+  { key: KeyBlurTop, side: "top" },
+  { key: KeyBlurBottom, side: "bottom" }
+];
+function expandBlur(style, dims, html, filterID) {
+  if (Object.keys(style).length === 0) {
+    return { style, meta: { filterID: "", maskID: "" }, fragments: [] };
+  }
+  const parsed = parseBlurFromStyle(style, dims);
+  if (!parsed.ok) {
+    return { style, meta: { filterID: "", maskID: "" }, fragments: [] };
+  }
+  const spec = parsed.spec;
+  const out = { ...style };
+  for (const sideKey of blurSideKeys) {
+    delete out[sideKey.key];
+  }
+  delete out[KeyBlur];
+  const meta = { filterID: `${filterID}-blur`, maskID: "" };
+  if (html) {
+    const patch = newFragment(TypeMotionDiv);
+    applyBlurHTML(patch, spec);
+    return { style: out, meta, fragments: [patch] };
+  }
+  const fragments = [blurFilterFragment(meta.filterID, spec)];
+  if (spec.side) {
+    meta.maskID = `${meta.filterID}-mask`;
+    fragments.push(blurMaskFragment(meta.maskID, spec.side));
+  }
+  return { style: out, meta, fragments };
+}
+function parseBlurFromStyle(style, dims) {
+  for (const side of blurSideKeys) {
+    const raw2 = style[side.key];
+    if (!hasStyleValue(side.key, raw2)) continue;
+    const amount = parseBlurAmount(stringifyCSSValue(raw2), dims);
+    if (!amount.ok || amount.amount <= 0) return { spec: { amountPx: 0, side: "" }, ok: false };
+    return { spec: { amountPx: amount.amount, side: side.side }, ok: true };
+  }
+  const raw = style[KeyBlur];
+  if (!hasStyleValue(KeyBlur, raw)) return { spec: { amountPx: 0, side: "" }, ok: false };
+  return parseBlurCSSValue(stringifyCSSValue(raw), dims);
+}
+function parseBlurCSSValue(value, dims) {
+  const trimmed = value.trim();
+  if (!trimmed) return { spec: { amountPx: 0, side: "" }, ok: false };
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return { spec: { amountPx: 0, side: "" }, ok: false };
+  let side = "";
+  const amountParts = [];
+  for (const part of parts) {
+    const lower = part.toLowerCase();
+    if ((lower === "left" || lower === "right" || lower === "top" || lower === "bottom") && !side) {
+      side = lower;
+      continue;
+    }
+    amountParts.push(part);
+  }
+  let amountString = amountParts.join(" ");
+  if (!amountString && side && parts.length >= 2) {
+    for (let i = 0; i < parts.length; i += 1) {
+      const current = parts[i]?.toLowerCase();
+      if (current !== side) continue;
+      amountString = parts.slice(i + 1).join(" ");
+      break;
+    }
+  }
+  if (!amountString) {
+    amountString = trimmed;
+    side = "";
+  }
+  const amount = parseBlurAmount(amountString, dims);
+  if (!amount.ok || amount.amount <= 0) return { spec: { amountPx: 0, side: "" }, ok: false };
+  return { spec: { amountPx: amount.amount, side }, ok: true };
+}
+function parseBlurAmount(value, dims) {
+  let trimmed = value.trim();
+  if (!trimmed) return { amount: 0, ok: false };
+  if (trimmed.includes("%")) {
+    const resolved = applyPercentHandlers({ [KeyBlur]: trimmed }, dims);
+    trimmed = stringifyCSSValue(resolved[KeyBlur]);
+  }
+  const px = parsePxNum2(trimmed);
+  return { amount: px, ok: px > 0 };
+}
+function applyBlurHTML(box, spec) {
+  if (spec.amountPx <= 0) return;
+  const px = `${spec.amountPx.toFixed(3)}px`;
+  const blurValue = `blur(${px})`;
+  setFragmentValue(box, "backdropFilter", blurValue);
+  setFragmentValue(box, "WebkitBackdropFilter", blurValue);
+  if (!spec.side) return;
+  const mask = blurMaskCSS(spec.side);
+  setFragmentValue(box, "maskImage", mask);
+  setFragmentValue(box, "WebkitMaskImage", mask);
+  setFragmentValue(box, "maskSize", "100% 100%");
+  setFragmentValue(box, "WebkitMaskSize", "100% 100%");
+}
+function blurMaskCSS(side) {
+  switch (side) {
+    case "left":
+      return "linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)";
+    case "right":
+      return "linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)";
+    case "top":
+      return "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)";
+    case "bottom":
+      return "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)";
+    default:
+      return "";
+  }
+}
+function blurFilterFragment(id, spec) {
+  const fragment = newFragment(TypeFilter);
+  setFragmentValue(fragment, "id", id);
+  setFragmentValue(fragment, "filterKind", blurFilterKind);
+  let std = spec.amountPx / 2;
+  if (std < 0.5) std = 0.5;
+  setFragmentValue(fragment, "feGaussianBlurStd", std.toFixed(3));
+  setFragmentValue(fragment, "feGaussianBlurIn", "SourceGraphic");
+  return fragment;
+}
+function blurMaskFragment(id, side) {
+  const fragment = newFragment(TypeMask);
+  setFragmentValue(fragment, "id", id);
+  setFragmentValue(fragment, "maskSide", side);
+  return fragment;
+}
+function parsePxNum2(value) {
+  const trimmed = value.trim().replace(/px$/, "");
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+// src/html/style/stroke.ts
+function applyStrokeHTML(span, style) {
+  if (!span) return;
+  const stroke = stringifyCSSValue(style[KeyStroke]);
+  if (stroke) {
+    setFragmentValue(span, "WebkitTextStroke", stroke);
+  }
+  const strokeWidth = stringifyCSSValue(style[KeyStrokeWidth]);
+  if (strokeWidth) {
+    setFragmentValue(span, "WebkitTextStrokeWidth", strokeWidth);
+  }
+  const strokeColor = stringifyCSSValue(style[KeyStrokeColor]);
+  if (strokeColor) {
+    setFragmentValue(span, "WebkitTextStrokeColor", strokeColor);
+  }
+}
+
+// src/html/style/context.ts
+function contextImageDims(ctx) {
+  const zoom = ctx.zoom && ctx.zoom > 0 ? ctx.zoom : 1;
+  return {
+    w: ctx.canvasW,
+    h: ctx.canvasH,
+    fontSizePx: ctx.fontSizePx ?? 0,
+    zoom
+  };
+}
+function fontSizePxOrCompute(ctx) {
+  const fontPx = ctx.fontSizePx ?? 0;
+  if (fontPx > 0) return fontPx;
+  return textFontSizePx2(ctx.text.textSize, ctx.canvasW, ctx.canvasH);
+}
+function textSizeBasisPx2(canvasW, canvasH) {
+  if (canvasW <= 0 && canvasH <= 0) return 1;
+  if (canvasW <= 0) return canvasH;
+  if (canvasH <= 0) return canvasW;
+  return canvasW < canvasH ? canvasW : canvasH;
+}
+function textFontSizePx2(textSizePct, canvasW, canvasH) {
+  const px = textSizePct / 100 * textSizeBasisPx2(canvasW, canvasH);
+  return px < 1 ? 1 : px;
+}
+
+// src/html/style/adapter.ts
+function adaptHTML(ctx) {
+  return adapt(ctx, true);
+}
+function adapt(ctx, html) {
+  let style = normalizeStyle(ctx.text.style);
+  if (Object.keys(style).length === 0) {
+    style = {};
+  }
+  const dims = contextImageDims(ctx);
+  dims.fontSizePx = fontSizePxOrCompute(ctx);
+  if (html && ctx.htmlCompile) {
+    dims.preservePercent = true;
+  }
+  style = applyPercentHandlers(style, dims);
+  style = filterStyleMap(style);
+  const filterID = `psrt-filter-${ctx.pageSlug ?? ""}-${ctx.textIndex ?? 0}`;
+  const effects = expandEffects(style, dims, !html, filterID);
+  const blur = expandBlur(effects.style, dims, html, filterID);
+  const fragments = html ? buildHTMLFragments(ctx, blur.style) : [];
+  return mergeFragments([...fragments, ...effects.fragments, ...blur.fragments]);
+}
+function buildHTMLFragments(ctx, style) {
+  const box = newFragment(TypeMotionDiv);
+  const text = newFragment(TypeSpan);
+  applyLayout(box, ctx);
+  applyTransform(box, style);
+  for (const [key, raw] of Object.entries(style)) {
+    if (!hasStyleValue(key, raw)) continue;
+    const value = sanitizeCSSValue(stringifyCSSValue(raw));
+    if (isBoxKey(key)) {
+      applyBoxCSS(box, key, value);
+      continue;
+    }
+    if (isTextKey(key) && key !== KeyStroke && key !== KeyStrokeWidth && key !== KeyStrokeColor) {
+      applyTextCSS(text, key, value);
+      continue;
+    }
+    if (isTransformKey(key)) {
+      continue;
+    }
+  }
+  applyStrokeHTML(text, style);
+  applyFontSize(box, ctx, Boolean(ctx.htmlCompile));
+  applyTextAlignHTML(box, text, style);
+  if (!getFragmentString(text, KeyColor)) {
+    const color = textColor(style);
+    if (color) {
+      setFragmentValue(text, KeyColor, color);
+    }
+  }
+  return [box, text];
+}
+function applyLayout(box, ctx) {
+  setFragmentValue(box, KeyPosition, "absolute");
+  setFragmentValue(box, KeyBoxSizing, "border-box");
+  setFragmentValue(box, KeyLeft, pctString(ctx.text.x));
+  setFragmentValue(box, KeyTop, pctString(ctx.text.y));
+  setFragmentValue(box, KeyWidth, pctString(ctx.text.width));
+}
+function applyTransform(target, style) {
+  const parts = [];
+  const transform2 = stringifyCSSValue(style[KeyTransform]);
+  if (transform2) parts.push(transform2);
+  for (const key of [KeyTranslate, KeyRotate, KeyScale, KeySkew, KeyMatrix]) {
+    const value = stringifyCSSValue(style[key]);
+    if (!value) continue;
+    parts.push(`${key}(${value})`);
+  }
+  if (parts.length === 0) return;
+  setFragmentValue(target, "transform", parts.join(" "));
+  const origin = stringifyCSSValue(style[KeyTransformOrigin]);
+  if (origin) {
+    setFragmentValue(target, KeyTransformOrigin, origin);
+  }
+}
+function applyBoxCSS(fragment, key, value) {
+  switch (key) {
+    case KeyBackground:
+      setFragmentValue(fragment, "backgroundColor", value);
+      return;
+    case KeyPadding:
+    case KeyPaddingTop:
+    case KeyPaddingRight:
+    case KeyPaddingBottom:
+    case KeyPaddingLeft:
+    case KeyBorder:
+    case KeyBorderWidth:
+    case KeyBorderStyle:
+    case KeyBorderColor:
+    case KeyBorderTop:
+    case KeyBorderRight:
+    case KeyBorderBottom:
+    case KeyBorderLeft:
+    case KeyBorderRadius:
+    case KeyBorderTopLeftRadius:
+    case KeyBorderTopRightRadius:
+    case KeyBorderBottomRightRadius:
+    case KeyBorderBottomLeftRadius:
+    case KeyBoxShadow:
+    case KeyHeight:
+      setFragmentValue(fragment, key, value);
+      return;
+    default:
+      return;
+  }
+}
+function applyTextCSS(fragment, key, value) {
+  const cssKey = key === KeyTextAlign ? "textAlign" : key;
+  setFragmentValue(fragment, cssKey, value);
+}
+function applyFontSize(fragment, ctx, htmlCompile) {
+  if (htmlCompile) {
+    setFragmentValue(fragment, KeyFontSize, `${ctx.text.textSize}cqmin`);
+    return;
+  }
+  setFragmentValue(fragment, KeyFontSize, pxString(fontSizePxOrCompute(ctx)));
+}
+function applyTextAlignHTML(box, text, style) {
+  let ta = getFragmentString(text, KeyTextAlign).toLowerCase().trim();
+  if (!ta) {
+    ta = readTextAlignFromStyle(style);
+  }
+  const va = verticalAlignFromStyle(style);
+  if (!ta && !va) return;
+  if (!ta) ta = "left";
+  setFragmentValue(text, "display", "block");
+  setFragmentValue(text, KeyWidth, "100%");
+  setFragmentValue(text, KeyTextAlign, ta);
+  switch (ta) {
+    case "justify":
+      setFragmentValue(box, "display", "block");
+      return;
+    case "center":
+    case "right":
+    case "left":
+    case "start": {
+      setFragmentValue(box, "display", "flex");
+      setFragmentValue(box, "flexDirection", "column");
+      const justify = va || "center";
+      setFragmentValue(box, "justifyContent", justify);
+      let align = "stretch";
+      if (ta === "center") align = "center";
+      if (ta === "right") align = "flex-end";
+      if (ta === "left" || ta === "start") align = "flex-start";
+      setFragmentValue(box, "alignItems", align);
+      return;
+    }
+    default:
+      setFragmentValue(box, "display", "block");
+  }
+}
+function readTextAlignFromStyle(style) {
+  const direct = style[KeyTextAlign];
+  if (direct !== void 0) {
+    return sanitizeCSSValue(stringifyCSSValue(direct)).toLowerCase();
+  }
+  for (const key of ["text-align", "ta"]) {
+    const value = style[key];
+    if (value === void 0) continue;
+    return sanitizeCSSValue(stringifyCSSValue(value)).toLowerCase();
+  }
+  return "";
+}
+function verticalAlignFromStyle(style) {
+  const direct = style[KeyAlignItems];
+  let value = direct !== void 0 ? sanitizeCSSValue(stringifyCSSValue(direct)).toLowerCase() : "";
+  if (!value) {
+    for (const key of ["align-items", "verticalAlign", "vertical-align"]) {
+      const raw = style[key];
+      if (raw === void 0) continue;
+      value = sanitizeCSSValue(stringifyCSSValue(raw)).toLowerCase();
+      break;
+    }
+  }
+  switch (value) {
+    case "flex-start":
+    case "start":
+    case "top":
+      return "flex-start";
+    case "flex-end":
+    case "end":
+    case "bottom":
+      return "flex-end";
+    case "center":
+    case "middle":
+      return "center";
+    default:
+      return "";
+  }
+}
+function textColor(style) {
+  const color = style[KeyColor];
+  if (color === void 0) return "";
+  return sanitizeCSSValue(stringifyCSSValue(color));
+}
+
+// src/html/style/maskAdapter.ts
+function adaptMaskHTML(ctx) {
+  const mask = ctx.mask;
+  if (!mask) return [];
+  let style = normalizeStyle(mask.style);
+  if (Object.keys(style).length === 0) {
+    style = {};
+  }
+  const dims = contextImageDims(ctx);
+  if (ctx.htmlCompile) {
+    dims.preservePercent = true;
+  }
+  style = applyPercentHandlers(style, dims);
+  style = filterStyleMap(style);
+  const filterID = maskFilterID(ctx);
+  const effects = expandEffects(style, dims, false, filterID);
+  const blur = expandBlur(effects.style, dims, true, filterID);
+  const fragments = buildMaskHTMLFragments(ctx, blur.style);
+  return mergeFragments([...fragments, ...effects.fragments, ...blur.fragments]);
+}
+function maskFilterID(ctx) {
+  const index = ctx.mask?.index ?? ctx.textIndex ?? 0;
+  return `psrt-filter-${ctx.pageSlug ?? ""}-${index}`;
+}
+function buildMaskHTMLFragments(ctx, style) {
+  const box = newFragment(TypeMotionDiv);
+  applyMaskLayout(box, ctx);
+  applyTransform2(box, style);
+  for (const [key, raw] of Object.entries(style)) {
+    if (!hasStyleValue(key, raw)) continue;
+    const value = sanitizeCSSValue(stringifyCSSValue(raw));
+    if (isBoxKey(key)) {
+      applyBoxCSS(box, key, value);
+    }
+  }
+  if (!box["background-size"]) {
+    setFragmentValue(box, "background-size", "cover");
+  }
+  return [box];
+}
+function applyMaskLayout(box, ctx) {
+  const mask = ctx.mask;
+  if (!mask) return;
+  setFragmentValue(box, KeyPosition, "absolute");
+  setFragmentValue(box, KeyBoxSizing, "border-box");
+  setFragmentValue(box, KeyLeft, pctString(mask.x));
+  setFragmentValue(box, KeyTop, pctString(mask.y));
+  setFragmentValue(box, KeyWidth, pctString(mask.width));
+  setFragmentValue(box, KeyHeight, pctString(mask.height));
+}
+function applyTransform2(target, style) {
+  const parts = [];
+  const transform2 = stringifyCSSValue(style[KeyTransform]);
+  if (transform2) parts.push(transform2);
+  for (const key of [KeyTranslate, KeyRotate, KeyScale, KeySkew, KeyMatrix]) {
+    const value = stringifyCSSValue(style[key]);
+    if (!value) continue;
+    parts.push(`${key}(${value})`);
+  }
+  if (parts.length > 0) {
+    setFragmentValue(target, KeyTransform, parts.join(" "));
+  }
+  const origin = stringifyCSSValue(style[KeyTransformOrigin]);
+  if (origin) {
+    setFragmentValue(target, KeyTransformOrigin, origin);
+  }
+}
+
+// src/html/style/render.ts
+function htmlLayerCSS(fragments) {
+  const merged = mergeFragments(fragments);
+  let box = null;
+  let text = null;
+  for (const fragment of merged) {
+    const type = getFragmentString(fragment, TypeKey);
+    if (type === TypeMotionDiv) box = fragment;
+    if (type === TypeSpan) text = fragment;
+  }
+  return { boxCSS: fragmentCSS(box), textCSS: fragmentCSS(text) };
+}
+function fragmentCSS(fragment) {
+  if (!fragment) return "";
+  const keys = Object.keys(fragment).filter((key) => key !== TypeKey).sort();
+  let out = "";
+  for (const key of keys) {
+    const raw = fragment[key];
+    const value = raw === void 0 || raw === null ? "" : String(raw);
+    if (!value) continue;
+    out += `${camelToKebab(key)}:${value};`;
+  }
+  return out;
+}
+function camelToKebab(value) {
+  if (value.startsWith("-")) return value;
+  let out = "";
+  for (let i = 0; i < value.length; i += 1) {
+    const char = value[i] ?? "";
+    const upper = char >= "A" && char <= "Z";
+    if (upper) {
+      if (i > 0) out += "-";
+      out += char.toLowerCase();
+      continue;
+    }
+    out += char;
+  }
+  return out;
+}
+
+// src/html/steps.ts
+var CompileStep = {
+  RESOLVE: "resolve",
+  BUILD_ASSETS: "buildAssets",
+  ADAPT_STYLE: "adaptStyle",
+  RENDER_FONTS: "renderFonts",
+  RENDER_HEAD: "renderHead",
+  RENDER_PAGE: "renderPage",
+  RENDER_TEXT: "renderText",
+  RENDER_MASK: "renderMask",
+  RENDER_INLINE: "renderInline",
+  FINALIZE: "finalize"
+};
+function notifyObservers(observers, ctx) {
+  if (!observers) return;
+  const fns = observers[ctx.step];
+  if (!fns?.length) return;
+  for (const fn of fns) fn(ctx);
+}
+
+// src/html/variants.ts
+function slugPageName(name) {
+  const s = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return s || "page";
+}
+function pageByName(doc, pageName) {
+  return doc.pages.find((p) => p.name === pageName);
+}
+function variantLabels(variants) {
+  return variants.map((v, i) => {
+    const l = v.label.trim();
+    return l || (i === 0 ? "PSRT" : `variant-${i}`);
+  });
+}
+function overlayDomId(pageName, variantIndex) {
+  return `psrt-overlay-${slugPageName(pageName)}-v${variantIndex}`;
+}
+function textLayerDomId(pageName, textIndex, variantIndex) {
+  return `psrt-text-${slugPageName(pageName)}-${textIndex}-v${variantIndex}`;
+}
+function maskLayerDomId(pageName, maskIndex, variantIndex) {
+  return `psrt-mask-${slugPageName(pageName)}-${maskIndex}-v${variantIndex}`;
+}
+function buildHtmlVariants(primary, extra) {
+  const variants = [{ label: "PSRT", doc: primary }];
+  for (const item of extra ?? []) {
+    const label = item.label?.trim() || `variant-${variants.length}`;
+    variants.push({ label, doc: item.doc });
+  }
+  return variants;
+}
+
+// src/html/render/script.ts
+function variantSwitcherCSS() {
+  return `
+.psrt-hidden{display:none!important}
+.psrt-variant-hint{position:fixed;z-index:9999;right:12px;bottom:12px;padding:6px 10px;font:12px/1.3 system-ui,sans-serif;color:#e8e8e8;background:rgba(0,0,0,.72);border-radius:6px;pointer-events:none;user-select:none}
+`;
+}
+function writeVariantSwitcher(labels) {
+  if (labels.length < 2) return "";
+  const labelsJSON = JSON.stringify(labels);
+  return `<div id="psrt-variant-hint" class="psrt-variant-hint" aria-live="polite"></div>
+<script>
+/**
+ * PSRT HTML \u2014 variant switcher
+ *
+ * Bundled PSRT variants share the same page images; only the text/mask
+ * overlays differ. Press Ctrl+L to cycle:
+ *   variant 0 \u2192 variant 1 \u2192 \u2026 \u2192 "Sem PSRT" (hide all overlays) \u2192 variant 0 \u2026
+ *
+ * Each overlay has class psrt-v-N (N = variant index). Inactive overlays
+ * use class psrt-hidden (display:none).
+ */
+(function () {
+  /** Human-readable labels shown in the bottom-right hint. */
+  var VARIANT_LABELS = ${labelsJSON};
+
+  /** Extra slot at the end: hide all PSRT overlays ("Sem PSRT"). */
+  VARIANT_LABELS.push('');
+
+  /** Index into VARIANT_LABELS for the currently visible variant. */
+  var activeVariantIndex = 0;
+
+  /** Bottom-right hint element (created above this script). */
+  var hintEl = document.getElementById('psrt-variant-hint');
+
+  /**
+   * Show one variant index, or hide every overlay when index is the off-state.
+   */
+  function applyVariant(index) {
+    document.querySelectorAll('.psrt-overlay').forEach(function (overlay) {
+      overlay.classList.add('psrt-hidden');
+    });
+
+    if (index < VARIANT_LABELS.length - 1) {
+      document.querySelectorAll('.psrt-overlay.psrt-v-' + index).forEach(function (overlay) {
+        overlay.classList.remove('psrt-hidden');
+      });
+    }
+
+    if (hintEl) {
+      var label = VARIANT_LABELS[index];
+      hintEl.textContent = label === ''
+        ? 'Sem PSRT (Ctrl+L)'
+        : label + ' (Ctrl+L)';
+    }
+  }
+
+  document.addEventListener('keydown', function (event) {
+    if (!event.ctrlKey || event.altKey) return;
+    if (event.key.toLowerCase() !== 'l') return;
+    event.preventDefault();
+    activeVariantIndex = (activeVariantIndex + 1) % VARIANT_LABELS.length;
+    applyVariant(activeVariantIndex);
+  });
+
+  applyVariant(0);
+})();
+</script>
+`;
+}
+function variantClass(v) {
+  return `psrt-v-${v}`;
+}
+function baseCSS(fontFaces) {
+  return `${fontFaces.trim()}
+*{box-sizing:border-box;}
+.slides-wrap{margin:0;padding:0;display:flex;width:100%;flex-direction:column;align-items:center;}
+.slide{position:relative;display:block;flex:0 0 auto;line-height:0;margin:0;padding:0;}
+.slide-img{display:block;width:100%;height:auto;margin:0;padding:0;vertical-align:bottom;}
+.slide-overlays{position:absolute;left:0;top:0;right:0;bottom:0;}
+.slide-overlay{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;container-type:size;container-name:slide;}
+.text-layer{position:absolute;box-sizing:border-box;margin:0;padding:0;line-height:1.2;overflow:hidden;overflow-wrap:anywhere;word-wrap:break-word;white-space:pre-wrap;}
+.text-ref-img{display:block;max-width:100%;height:auto;margin:0 0 .25em;padding:0;}
+`;
+}
+function escapeHtmlAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/html/render/html.ts
+function buildFontCSS(fontURLs, assets, linksOnly) {
+  if (fontURLs.length === 0) {
+    return {
+      fontFacesCSS: "",
+      bodyStack: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif"
+    };
+  }
+  let fb = "";
+  const names = [];
+  for (let i = 0; i < fontURLs.length; i++) {
+    const u = fontURLs[i]?.trim() ?? "";
+    if (!u) continue;
+    const a = assets.get(u);
+    if (!a && !linksOnly) continue;
+    const name = fontFamilyNameForURL(u, i);
+    const src = fontSrcUrl(u, a, linksOnly);
+    const format = faceFormat(a?.mime ?? "");
+    if (linksOnly || a) {
+      fb += `@font-face{font-family:'${name}';src:${src}${format};font-display:swap;}
+`;
+    }
+    names.push(`'${name}'`);
+  }
+  if (names.length === 0) {
+    return {
+      fontFacesCSS: fb,
+      bodyStack: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif"
+    };
+  }
+  const stack = `${names.join(",")},-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif`;
+  return { fontFacesCSS: fb, bodyStack: stack };
+}
+function pageBackgroundCSS(style) {
+  const bg = backgroundColorFromStyle(style);
+  return bg ? `background:${bg};` : "";
+}
+function writeTextLayer(parts, t, assets, canvasW, canvasH, variantIndex, linksOnly, pageName, observers) {
+  const content = normalizeTextContent(t.content);
+  const fontPx = textFontSizePx(t.textSize, canvasW, canvasH);
+  const frags = adaptHTML({
+    text: t,
+    canvasW,
+    canvasH,
+    fontSizePx: fontPx,
+    htmlCompile: true,
+    pageSlug: pageName,
+    textIndex: t.index
+  });
+  notifyObservers(observers, {
+    step: CompileStep.ADAPT_STYLE,
+    pageName,
+    blockIndex: t.index,
+    kind: "text"
+  });
+  let { boxCSS, textCSS } = htmlLayerCSS(frags);
+  boxCSS = appendTextLayerGeometryCSS(boxCSS, t, content, canvasW, canvasH);
+  const layerId = textLayerDomId(pageName, t.index, variantIndex);
+  const classes = `text-layer psrt-text ${variantClass(variantIndex)}`;
+  parts.push(
+    `<div id="${escapeHtmlAttr(layerId)}" class="${classes}" style="${escapeHtmlAttr(boxCSS)}">`
+  );
+  const imgRef = (t.imageRef ?? "").trim();
+  if (imgRef && isAssetReference(imgRef)) {
+    const aa = assets.get(imgRef);
+    if (linksOnly || aa && aa.mime.startsWith("image/")) {
+      const refURI = assetRef(imgRef, aa, linksOnly);
+      parts.push(
+        `<img class="text-ref-img" src="${escapeHtmlAttr(refURI)}" alt="" style="margin:0 0 .25em 0;display:block;max-width:100%;height:auto"/>`
+      );
+    }
+  }
+  const inlineHTML = renderInlineHTML(content);
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_INLINE,
+    pageName,
+    textIndex: t.index,
+    htmlLength: inlineHTML.length
+  });
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_TEXT,
+    pageName,
+    textIndex: t.index,
+    contentPreview: content.slice(0, 80)
+  });
+  if (textCSS) {
+    parts.push(`<span style="${escapeHtmlAttr(textCSS)}">`);
+  } else {
+    parts.push("<span>");
+  }
+  parts.push(inlineHTML);
+  parts.push("</span></div>");
+}
+function writeMaskLayer(parts, m, assets, canvasW, canvasH, variantIndex, linksOnly, pageName, observers) {
+  const frags = adaptMaskHTML({
+    text: {
+      x: m.x,
+      y: m.y,
+      width: m.width,
+      textSize: 0,
+      style: m.style,
+      index: m.index,
+      content: ""
+    },
+    mask: m,
+    canvasW,
+    canvasH,
+    htmlCompile: true,
+    pageSlug: pageName,
+    textIndex: m.index
+  });
+  notifyObservers(observers, {
+    step: CompileStep.ADAPT_STYLE,
+    pageName,
+    blockIndex: m.index,
+    kind: "mask"
+  });
+  let { boxCSS } = htmlLayerCSS(frags);
+  const imgRef = (m.imageRef ?? "").trim();
+  if (imgRef && isAssetReference(imgRef)) {
+    const aa = assets.get(imgRef);
+    if (linksOnly || aa && aa.mime.startsWith("image/")) {
+      const refURI = assetRef(imgRef, aa, linksOnly);
+      if (boxCSS && !boxCSS.endsWith(";")) boxCSS += ";";
+      boxCSS += `background-image:url(${refURI});background-size:cover;background-position:center;background-repeat:no-repeat;`;
+    }
+  }
+  const layerId = maskLayerDomId(pageName, m.index, variantIndex);
+  const classes = `text-layer psrt-mask ${variantClass(variantIndex)}`;
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_MASK,
+    pageName,
+    maskIndex: m.index
+  });
+  parts.push(`<div id="${escapeHtmlAttr(layerId)}" class="${classes}" style="${escapeHtmlAttr(boxCSS)}"></div>`);
+}
+function writeVariantOverlay(parts, variantPage, variantIndex, multiVariant, assets, canvasW, canvasH, linksOnly, observers) {
+  const overlayId = overlayDomId(variantPage.name, variantIndex);
+  let overlayClasses = `slide-overlay psrt-overlay ${variantClass(variantIndex)}`;
+  if (multiVariant && variantIndex > 0) {
+    overlayClasses += " psrt-hidden";
+  }
+  parts.push(`<div id="${escapeHtmlAttr(overlayId)}" class="${overlayClasses}">`);
+  for (const entry of pageBlocksByIndex(variantPage)) {
+    if (entry.kind === BlockText && entry.text) {
+      writeTextLayer(
+        parts,
+        entry.text,
+        assets,
+        canvasW,
+        canvasH,
+        variantIndex,
+        linksOnly,
+        variantPage.name,
+        observers
+      );
+    } else if (entry.kind === BlockMask && entry.mask) {
+      writeMaskLayer(
+        parts,
+        entry.mask,
+        assets,
+        canvasW,
+        canvasH,
+        variantIndex,
+        linksOnly,
+        variantPage.name,
+        observers
+      );
+    }
+  }
+  parts.push("</div>");
+}
+function writeSlide(parts, page, variants, assets, opts, pageIndex, multiVariant, observers) {
+  const bg = pageBackgroundCSS(page.style);
+  const imgURL = page.imageUrl.trim();
+  const a = assets.get(imgURL);
+  if (!opts.linksOnly && !a) {
+    throw new Error(`missing fetched asset for page image "${imgURL}"`);
+  }
+  const src = assetRef(imgURL, a, !!opts.linksOnly);
+  let canvasW;
+  let canvasH;
+  if (a) {
+    const dims = imageDimensions(a.bytes, a.mime);
+    canvasW = dims.w;
+    canvasH = dims.h;
+  } else {
+    const dims = imageDimensions(null, "");
+    canvasW = dims.w;
+    canvasH = dims.h;
+  }
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_PAGE,
+    pageIndex,
+    pageName: page.name,
+    canvasW,
+    canvasH
+  });
+  let slideStyle = `width:${canvasW}px`;
+  if (bg) slideStyle += `;${bg}`;
+  parts.push(`<div class="slide" style="${escapeHtmlAttr(slideStyle)}">`);
+  parts.push(`<img class="slide-img" src="${escapeHtmlAttr(src)}" alt=""/>`);
+  parts.push('<div class="slide-overlays">');
+  for (let vi = 0; vi < variants.length; vi++) {
+    const variantPage = pageByName(variants[vi].doc, page.name);
+    if (!variantPage) continue;
+    writeVariantOverlay(
+      parts,
+      variantPage,
+      vi,
+      multiVariant,
+      assets,
+      canvasW,
+      canvasH,
+      !!opts.linksOnly,
+      observers
+    );
+  }
+  parts.push("</div></div>");
+}
+function renderHtmlBundle(variants, assets, opts, observers) {
+  if (variants.length === 0) {
+    throw new Error("no variants");
+  }
+  const primary = variants[0].doc;
+  const labels = variantLabels(variants);
+  const multiVariant = variants.length > 1;
+  const includeVariantUI = multiVariant && !opts.noScript;
+  const { fontFacesCSS, bodyStack } = buildFontCSS(primary.fonts ?? [], assets, !!opts.linksOnly);
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_FONTS,
+    fontCount: primary.fonts?.length ?? 0
+  });
+  let title = "PSRT";
+  if (primary.pages.length > 0 && primary.pages[0]?.name.trim()) {
+    title = primary.pages[0].name.trim();
+  }
+  notifyObservers(observers, {
+    step: CompileStep.RENDER_HEAD,
+    title
+  });
+  const parts = [];
+  parts.push(`<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${escapeHtmlAttr(title)}</title>
+<style>`);
+  parts.push(baseCSS(fontFacesCSS));
+  if (multiVariant) parts.push(variantSwitcherCSS());
+  parts.push(`
+body{font-family:${bodyStack};margin:0;padding:0;background:#111;overflow-x:auto;}
+</style>
+</head>
+<body>
+<main class="slides-wrap">
+`);
+  for (let i = 0; i < primary.pages.length; i++) {
+    writeSlide(parts, primary.pages[i], variants, assets, opts, i, multiVariant, observers);
+  }
+  parts.push(`
+</main>
+`);
+  if (includeVariantUI) parts.push(writeVariantSwitcher(labels));
+  parts.push(`
+</body>
+</html>`);
+  const html = parts.join("");
+  notifyObservers(observers, {
+    step: CompileStep.FINALIZE,
+    htmlLength: html.length,
+    pageCount: primary.pages.length
+  });
+  return html;
+}
+
+// src/html/compilePure.ts
+function buildAssetMapWithSizes(variants, linksOnly) {
+  const docs = variants.map((v) => v.doc);
+  const assets = buildAssetMap(docs, linksOnly);
+  const canvasSizes = {};
+  for (const doc of docs) {
+    for (const page of doc.pages) {
+      const url = page.imageUrl.trim();
+      if (canvasSizes[url]) continue;
+      const asset = assets.get(url);
+      if (asset) {
+        canvasSizes[url] = imageDimensions(asset.bytes, asset.mime);
+      } else if (linksOnly) {
+        canvasSizes[url] = imageDimensions(null, "");
+      }
+    }
+  }
+  return { assets, canvasSizes };
+}
+function compileToHtmlPure(doc, options) {
+  const opts = options ?? {};
+  const primary = resolveDocumentPure(doc);
+  notifyObservers(opts.observers, { step: CompileStep.RESOLVE, doc: primary });
+  const extraResolved = (opts.variants ?? []).map((v) => ({
+    label: v.label,
+    doc: resolveDocumentPure(v.doc)
+  }));
+  const htmlVariants = buildHtmlVariants(primary, extraResolved);
+  const { assets, canvasSizes } = buildAssetMapWithSizes(htmlVariants, !!opts.linksOnly);
+  notifyObservers(opts.observers, {
+    step: CompileStep.BUILD_ASSETS,
+    assetCount: assets.size,
+    canvasSizes
+  });
+  return renderHtmlBundle(htmlVariants, assets, opts, opts.observers);
+}
+
 // src/compile.ts
 function compileToHtml(doc, options) {
   return invokeCompileToHtml(doc, options);
 }
+function compileToHtmlPure2(doc, options) {
+  return compileToHtmlPure(doc, options);
+}
 function compileToSvg(doc, pageName, options) {
   return invokeCompileToSvg(doc, pageName, options);
 }
@@ -478,6 +2817,7 @@ function resolveDocumentStrict(doc) {
   return invokeDocMutation("resolveDocumentStrict", doc);
 }
 export {
+  CompileStep,
   Transformer,
   adaptEntriesForWeb,
   addConst,
@@ -486,6 +2826,7 @@ export {
   addPage,
   addText,
   compileToHtml,
+  compileToHtmlPure2 as compileToHtmlPure,
   compileToSvg,
   findMaskByIndex,
   findPage,
@@ -497,6 +2838,7 @@ export {
   mergePageDocumentPSRT,
   mergeStyle,
   movePage,
+  notifyObservers,
   nudgeTextPosition,
   parse,
   parseTextIndex,
@@ -514,6 +2856,7 @@ export {
   reorderTextRelative,
   reorderTextTo,
   resolveDocument,
+  resolveDocumentPure,
   resolveDocumentStrict,
   revertConstReferences,
   setMaskPosition,