@lobehub/ui 5.10.3 → 5.10.4

package/es/HtmlPreview/buildShellSrcDoc.mjs

@@ -0,0 +1,235 @@
+import { buildAutoHeightScript } from "./injectAutoHeightScript.mjs";
+import { STORAGE_SHIM_SCRIPT } from "./injectStorageShim.mjs";
+//#region src/HtmlPreview/buildShellSrcDoc.ts
+const SHELL_UPDATE_MESSAGE_TYPE = "lobe-html-shell-update";
+/**
+* Build the iframe's one-and-only document.
+*
+* Why a "shell" doc:
+* The iframe is loaded *once* and never reloads during a streaming session.
+* All subsequent body updates arrive via `postMessage` from the parent
+* (see `SHELL_UPDATE_MESSAGE_TYPE`). The script in this document morphs the
+* live DOM in place, so already-painted nodes stay untouched — only nodes
+* that are *new* to this commit get a `.lobe-html-new` class and a CSS
+* fade-in. No iframe reload means no white flash, no script reboots, and
+* no jitter from height resets.
+*/
+const buildShellSrcDoc = ({ background, frameId }) => {
+	const baseRules = `html,body{margin:0;padding:0;${background ? `background:${background};` : ""}color-scheme:light dark;}`;
+	const fadeRules = `@keyframes lobe-html-fade{from{opacity:0}to{opacity:1}}.lobe-html-new{animation:lobe-html-fade 240ms ease-out both;}`;
+	const morphScript = `
+(function () {
+  var FRAME_ID = ${JSON.stringify(frameId)};
+  var UPDATE_TYPE = ${JSON.stringify(SHELL_UPDATE_MESSAGE_TYPE)};
+
+  function cloneScript(src) {
+    // <script> elements parsed via DOMParser are inert. Rebuild them as
+    // proper DOM scripts so the browser executes them.
+    //
+    // Important: only set .text for inline scripts. Setting it on a
+    // src-bearing script (even to an empty string) causes some browser /
+    // extension combinations to treat the element as an inline script
+    // with empty body and skip the external fetch — so the CDN never
+    // loads. We just copy attributes; the browser will fetch the src on
+    // append.
+    var s = document.createElement('script');
+    for (var i = 0; i < src.attributes.length; i++) {
+      var a = src.attributes[i];
+      s.setAttribute(a.name, a.value);
+    }
+    if (!src.hasAttribute('src')) {
+      var text = src.textContent;
+      if (text) s.text = text;
+    }
+    return s;
+  }
+
+  function importNode(node) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {
+      return cloneScript(node);
+    }
+    return document.importNode(node, true);
+  }
+
+  function markFadeIn(node) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.classList) {
+      node.classList.add('lobe-html-new');
+    }
+  }
+
+  // Recursive prefix-match morph. For each parent we match leading children
+  // that already exist (by outerHTML or recursive morph), then we remove
+  // trailing children that no longer exist, and finally append the new
+  // tail with a fade-in class.
+  function morph(oldEl, newEl) {
+    if (oldEl.nodeType !== newEl.nodeType) return false;
+    if (oldEl.nodeType !== Node.ELEMENT_NODE) return false;
+    if (oldEl.tagName !== newEl.tagName) return false;
+
+    // Sync attributes
+    var oldAttrs = oldEl.attributes;
+    for (var i = oldAttrs.length - 1; i >= 0; i--) {
+      var an = oldAttrs[i].name;
+      if (!newEl.hasAttribute(an)) oldEl.removeAttribute(an);
+    }
+    var newAttrs = newEl.attributes;
+    for (var j = 0; j < newAttrs.length; j++) {
+      var na = newAttrs[j];
+      if (oldEl.getAttribute(na.name) !== na.value) {
+        oldEl.setAttribute(na.name, na.value);
+      }
+    }
+
+    var oldKids = oldEl.childNodes;
+    var newKids = newEl.childNodes;
+    var commonLen = 0;
+
+    while (commonLen < oldKids.length && commonLen < newKids.length) {
+      var o = oldKids[commonLen];
+      var n = newKids[commonLen];
+      if (o.nodeType !== n.nodeType) break;
+      if (o.nodeType === Node.TEXT_NODE) {
+        if (o.textContent !== n.textContent) {
+          // Update text content in place — no fade for text.
+          o.textContent = n.textContent;
+        }
+        commonLen++;
+      } else if (o.nodeType === Node.ELEMENT_NODE) {
+        // Cheap identity check before recursing.
+        if (o.outerHTML === n.outerHTML) {
+          commonLen++;
+        } else if (morph(o, n)) {
+          commonLen++;
+        } else {
+          break;
+        }
+      } else {
+        commonLen++;
+      }
+    }
+
+    // Trim old trailing children that no longer exist.
+    while (oldEl.childNodes.length > commonLen) {
+      oldEl.removeChild(oldEl.lastChild);
+    }
+
+    // Append the new tail with fade-in markers, batched through a
+    // DocumentFragment. A flat sequence of appendChild calls fires one
+    // mutation per element — MutationObserver libraries (Tailwind Play
+    // CDN, Stimulus, etc.) that batch their work can drop intermediate
+    // notifications if they arrive too quickly. Going through a fragment
+    // delivers exactly one childList mutation that lists all new nodes
+    // at once, which observers handle reliably.
+    if (commonLen < newKids.length) {
+      var frag = document.createDocumentFragment();
+      for (var k = commonLen; k < newKids.length; k++) {
+        var imported = importNode(newKids[k]);
+        markFadeIn(imported);
+        frag.appendChild(imported);
+      }
+      oldEl.appendChild(frag);
+    }
+
+    return true;
+  }
+
+  // Track which head extras (scripts/links/meta/title/base) we've already
+  // mounted so re-arriving chunks don't re-execute scripts or duplicate
+  // resources. Keyed by outerHTML — for streaming partial URLs each
+  // partial-and-then-complete tag is a distinct key, which means a partial
+  // CDN URL may briefly 404 before the complete one succeeds. That's
+  // acceptable; the alternative (waiting for the closing tag heuristic) is
+  // fragile and would defeat the live-CDN use case entirely.
+  var headSeen = Object.create(null);
+
+  function syncHeadExtras(headExtrasHtml) {
+    if (typeof headExtrasHtml !== 'string') return;
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(
+      '<!doctype html><html><head>' + headExtrasHtml + '</head></html>',
+      'text/html',
+    );
+    var children = doc.head ? doc.head.children : [];
+    for (var i = 0; i < children.length; i++) {
+      var src = children[i];
+      var key = src.outerHTML;
+      if (headSeen[key]) continue;
+      headSeen[key] = true;
+      var clone = importNode(src);
+      // Tag for debugging — also keeps these distinguishable from the
+      // shell's own head children if anything ever needs to inspect them.
+      if (clone.setAttribute) clone.setAttribute('data-lobe-user', '');
+      document.head.appendChild(clone);
+    }
+  }
+
+  function applyUpdate(payload) {
+    if (!payload) return;
+
+    // 1) Inline user styles: merged into a single growing <style> element.
+    //    Streaming partial CSS just keeps overwriting this text until the
+    //    rules become complete, so we don't stack half-parsed <style>
+    //    blocks in the head.
+    var styleEl = document.getElementById('lobe-user-style');
+    if (styleEl && styleEl.textContent !== payload.styleContent) {
+      styleEl.textContent = payload.styleContent || '';
+    }
+
+    // 2) Everything else in the user's <head> (scripts, links, meta, …):
+    //    append-with-dedupe so head-loaded resources actually run.
+    syncHeadExtras(payload.headExtrasHtml);
+
+    // 3) Body: in-place morph with fade-in on new nodes.
+    var bodyParser = new DOMParser();
+    var newDoc = bodyParser.parseFromString(
+      '<!doctype html><html><body>' + (payload.bodyHtml || '') + '</body></html>',
+      'text/html',
+    );
+
+    // morph() returns false only for type mismatch on the root — body to
+    // body always matches, so this is safe.
+    morph(document.body, newDoc.body);
+
+    // Nudge class-engine CDNs (Tailwind Play CDN, Stimulus, etc.) into
+    // re-scanning the document. They watch via MutationObserver but some
+    // implementations only consider the directly-mutated nodes from each
+    // record and skip recursing into nested descendants, so deeply-styled
+    // subtrees can end up with un-generated utility classes. Toggling a
+    // throwaway class on body produces an attribute mutation that prompts
+    // a fresh full-document scan.
+    try {
+      document.body.classList.add('_lobe-rescan');
+      document.body.classList.remove('_lobe-rescan');
+    } catch (_) {}
+  }
+
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (!data || data.type !== UPDATE_TYPE || data.frameId !== FRAME_ID) return;
+    applyUpdate(data.payload);
+  });
+
+  // Signal the parent that the listener is wired up so it can flush any
+  // pending content that was queued before this script ran.
+  try {
+    parent.postMessage({ type: UPDATE_TYPE + ':ready', frameId: FRAME_ID }, '*');
+  } catch (_) {}
+})();
+`;
+	return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>${baseRules}${fadeRules}</style>
+<style id="lobe-user-style"></style>
+<script>${STORAGE_SHIM_SCRIPT}<\/script>
+<script>${buildAutoHeightScript(frameId)}<\/script>
+<script>${morphScript}<\/script>
+</head>
+<body></body>
+</html>`;
+};
+//#endregion
+export { SHELL_UPDATE_MESSAGE_TYPE, buildShellSrcDoc };
+
+//# sourceMappingURL=buildShellSrcDoc.mjs.map

package/es/HtmlPreview/buildShellSrcDoc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildShellSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildShellSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\nexport const SHELL_UPDATE_MESSAGE_TYPE = 'lobe-html-shell-update';\n\ninterface BuildShellSrcDocOptions {\n  background?: string;\n  frameId: string;\n}\n\n/**\n * Build the iframe's one-and-only document.\n *\n * Why a \"shell\" doc:\n * The iframe is loaded *once* and never reloads during a streaming session.\n * All subsequent body updates arrive via `postMessage` from the parent\n * (see `SHELL_UPDATE_MESSAGE_TYPE`). The script in this document morphs the\n * live DOM in place, so already-painted nodes stay untouched — only nodes\n * that are *new* to this commit get a `.lobe-html-new` class and a CSS\n * fade-in. No iframe reload means no white flash, no script reboots, and\n * no jitter from height resets.\n */\nexport const buildShellSrcDoc = ({ background, frameId }: BuildShellSrcDocOptions): string => {\n  const baseRules = `html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}`;\n  const fadeRules = `@keyframes lobe-html-fade{from{opacity:0}to{opacity:1}}.lobe-html-new{animation:lobe-html-fade 240ms ease-out both;}`;\n\n  const morphScript = `\n(function () {\n  var FRAME_ID = ${JSON.stringify(frameId)};\n  var UPDATE_TYPE = ${JSON.stringify(SHELL_UPDATE_MESSAGE_TYPE)};\n\n  function cloneScript(src) {\n    // <script> elements parsed via DOMParser are inert. Rebuild them as\n    // proper DOM scripts so the browser executes them.\n    //\n    // Important: only set .text for inline scripts. Setting it on a\n    // src-bearing script (even to an empty string) causes some browser /\n    // extension combinations to treat the element as an inline script\n    // with empty body and skip the external fetch — so the CDN never\n    // loads. We just copy attributes; the browser will fetch the src on\n    // append.\n    var s = document.createElement('script');\n    for (var i = 0; i < src.attributes.length; i++) {\n      var a = src.attributes[i];\n      s.setAttribute(a.name, a.value);\n    }\n    if (!src.hasAttribute('src')) {\n      var text = src.textContent;\n      if (text) s.text = text;\n    }\n    return s;\n  }\n\n  function importNode(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {\n      return cloneScript(node);\n    }\n    return document.importNode(node, true);\n  }\n\n  function markFadeIn(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.classList) {\n      node.classList.add('lobe-html-new');\n    }\n  }\n\n  // Recursive prefix-match morph. For each parent we match leading children\n  // that already exist (by outerHTML or recursive morph), then we remove\n  // trailing children that no longer exist, and finally append the new\n  // tail with a fade-in class.\n  function morph(oldEl, newEl) {\n    if (oldEl.nodeType !== newEl.nodeType) return false;\n    if (oldEl.nodeType !== Node.ELEMENT_NODE) return false;\n    if (oldEl.tagName !== newEl.tagName) return false;\n\n    // Sync attributes\n    var oldAttrs = oldEl.attributes;\n    for (var i = oldAttrs.length - 1; i >= 0; i--) {\n      var an = oldAttrs[i].name;\n      if (!newEl.hasAttribute(an)) oldEl.removeAttribute(an);\n    }\n    var newAttrs = newEl.attributes;\n    for (var j = 0; j < newAttrs.length; j++) {\n      var na = newAttrs[j];\n      if (oldEl.getAttribute(na.name) !== na.value) {\n        oldEl.setAttribute(na.name, na.value);\n      }\n    }\n\n    var oldKids = oldEl.childNodes;\n    var newKids = newEl.childNodes;\n    var commonLen = 0;\n\n    while (commonLen < oldKids.length && commonLen < newKids.length) {\n      var o = oldKids[commonLen];\n      var n = newKids[commonLen];\n      if (o.nodeType !== n.nodeType) break;\n      if (o.nodeType === Node.TEXT_NODE) {\n        if (o.textContent !== n.textContent) {\n          // Update text content in place — no fade for text.\n          o.textContent = n.textContent;\n        }\n        commonLen++;\n      } else if (o.nodeType === Node.ELEMENT_NODE) {\n        // Cheap identity check before recursing.\n        if (o.outerHTML === n.outerHTML) {\n          commonLen++;\n        } else if (morph(o, n)) {\n          commonLen++;\n        } else {\n          break;\n        }\n      } else {\n        commonLen++;\n      }\n    }\n\n    // Trim old trailing children that no longer exist.\n    while (oldEl.childNodes.length > commonLen) {\n      oldEl.removeChild(oldEl.lastChild);\n    }\n\n    // Append the new tail with fade-in markers, batched through a\n    // DocumentFragment. A flat sequence of appendChild calls fires one\n    // mutation per element — MutationObserver libraries (Tailwind Play\n    // CDN, Stimulus, etc.) that batch their work can drop intermediate\n    // notifications if they arrive too quickly. Going through a fragment\n    // delivers exactly one childList mutation that lists all new nodes\n    // at once, which observers handle reliably.\n    if (commonLen < newKids.length) {\n      var frag = document.createDocumentFragment();\n      for (var k = commonLen; k < newKids.length; k++) {\n        var imported = importNode(newKids[k]);\n        markFadeIn(imported);\n        frag.appendChild(imported);\n      }\n      oldEl.appendChild(frag);\n    }\n\n    return true;\n  }\n\n  // Track which head extras (scripts/links/meta/title/base) we've already\n  // mounted so re-arriving chunks don't re-execute scripts or duplicate\n  // resources. Keyed by outerHTML — for streaming partial URLs each\n  // partial-and-then-complete tag is a distinct key, which means a partial\n  // CDN URL may briefly 404 before the complete one succeeds. That's\n  // acceptable; the alternative (waiting for the closing tag heuristic) is\n  // fragile and would defeat the live-CDN use case entirely.\n  var headSeen = Object.create(null);\n\n  function syncHeadExtras(headExtrasHtml) {\n    if (typeof headExtrasHtml !== 'string') return;\n    var parser = new DOMParser();\n    var doc = parser.parseFromString(\n      '<!doctype html><html><head>' + headExtrasHtml + '</head></html>',\n      'text/html',\n    );\n    var children = doc.head ? doc.head.children : [];\n    for (var i = 0; i < children.length; i++) {\n      var src = children[i];\n      var key = src.outerHTML;\n      if (headSeen[key]) continue;\n      headSeen[key] = true;\n      var clone = importNode(src);\n      // Tag for debugging — also keeps these distinguishable from the\n      // shell's own head children if anything ever needs to inspect them.\n      if (clone.setAttribute) clone.setAttribute('data-lobe-user', '');\n      document.head.appendChild(clone);\n    }\n  }\n\n  function applyUpdate(payload) {\n    if (!payload) return;\n\n    // 1) Inline user styles: merged into a single growing <style> element.\n    //    Streaming partial CSS just keeps overwriting this text until the\n    //    rules become complete, so we don't stack half-parsed <style>\n    //    blocks in the head.\n    var styleEl = document.getElementById('lobe-user-style');\n    if (styleEl && styleEl.textContent !== payload.styleContent) {\n      styleEl.textContent = payload.styleContent || '';\n    }\n\n    // 2) Everything else in the user's <head> (scripts, links, meta, …):\n    //    append-with-dedupe so head-loaded resources actually run.\n    syncHeadExtras(payload.headExtrasHtml);\n\n    // 3) Body: in-place morph with fade-in on new nodes.\n    var bodyParser = new DOMParser();\n    var newDoc = bodyParser.parseFromString(\n      '<!doctype html><html><body>' + (payload.bodyHtml || '') + '</body></html>',\n      'text/html',\n    );\n\n    // morph() returns false only for type mismatch on the root — body to\n    // body always matches, so this is safe.\n    morph(document.body, newDoc.body);\n\n    // Nudge class-engine CDNs (Tailwind Play CDN, Stimulus, etc.) into\n    // re-scanning the document. They watch via MutationObserver but some\n    // implementations only consider the directly-mutated nodes from each\n    // record and skip recursing into nested descendants, so deeply-styled\n    // subtrees can end up with un-generated utility classes. Toggling a\n    // throwaway class on body produces an attribute mutation that prompts\n    // a fresh full-document scan.\n    try {\n      document.body.classList.add('_lobe-rescan');\n      document.body.classList.remove('_lobe-rescan');\n    } catch (_) {}\n  }\n\n  window.addEventListener('message', function (event) {\n    var data = event.data;\n    if (!data || data.type !== UPDATE_TYPE || data.frameId !== FRAME_ID) return;\n    applyUpdate(data.payload);\n  });\n\n  // Signal the parent that the listener is wired up so it can flush any\n  // pending content that was queued before this script ran.\n  try {\n    parent.postMessage({ type: UPDATE_TYPE + ':ready', frameId: FRAME_ID }, '*');\n  } catch (_) {}\n})();\n`;\n\n  return `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<style>${baseRules}${fadeRules}</style>\n<style id=\"lobe-user-style\"></style>\n<script>${STORAGE_SHIM_SCRIPT}</script>\n<script>${buildAutoHeightScript(frameId)}</script>\n<script>${morphScript}</script>\n</head>\n<body></body>\n</html>`;\n};\n"],"mappings":";;;AAGA,MAAa,4BAA4B;;;;;;;;;;;;;AAmBzC,MAAa,oBAAoB,EAAE,YAAY,cAA+C;CAC5F,MAAM,YAAY,gCAAgC,aAAa,cAAc,WAAW,KAAK,GAAG;CAChG,MAAM,YAAY;CAElB,MAAM,cAAc;;mBAEH,KAAK,UAAU,QAAQ,CAAC;sBACrB,KAAK,UAAU,0BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqM9D,QAAO;;;;SAIA,YAAY,UAAU;;UAErB,oBAAoB;UACpB,sBAAsB,QAAQ,CAAC;UAC/B,YAAY"}

package/es/HtmlPreview/buildStaticSrcDoc.mjs

@@ -0,0 +1,44 @@
+import { buildAutoHeightScript } from "./injectAutoHeightScript.mjs";
+import { STORAGE_SHIM_SCRIPT } from "./injectStorageShim.mjs";
+//#region src/HtmlPreview/buildStaticSrcDoc.ts
+const shimsBlock = (frameId) => `<script>${STORAGE_SHIM_SCRIPT}<\/script><script>${buildAutoHeightScript(frameId)}<\/script>`;
+const baseStyle = (background) => `<style>html,body{margin:0;padding:0;${background ? `background:${background};` : ""}color-scheme:light dark;}</style>`;
+/**
+* Wrap a user's HTML document with our shims so the iframe can load it as
+* a single self-contained srcDoc. This path is used when the content is
+* *static* (not streaming) — the browser parses it via the normal HTML
+* pipeline, so external `<script src=…>` tags load and execute exactly
+* like they would on a regular page. Tailwind CDN, Chart.js, p5.js — all
+* the things a Play CDN expects to see at parse time — work naturally.
+*
+* For *streaming* content we instead use `buildShellSrcDoc` + postMessage
+* morph, which trades reliable script execution for the ability to fade
+* in new nodes without reloading the iframe.
+*
+* Strategy: inject our shims (storage shim, auto-height) as early in the
+* resulting `<head>` as possible so they run before any user script. If
+* the user supplied a `<head>` open tag we slot the shims in right after
+* it; otherwise we wrap a minimal document around fragments.
+*/
+const buildStaticSrcDoc = ({ background, content, frameId }) => {
+	const head = `${baseStyle(background)}${shimsBlock(frameId)}`;
+	const lower = content.toLowerCase();
+	if (!lower.includes("<html")) return `<!DOCTYPE html><html><head><meta charset="utf-8">${head}</head><body>${content}</body></html>`;
+	const headOpenMatch = content.match(/<head\b[^>]*>/i);
+	if (headOpenMatch) {
+		const idx = headOpenMatch.index + headOpenMatch[0].length;
+		return content.slice(0, idx) + head + content.slice(idx);
+	}
+	const headCloseIdx = lower.indexOf("</head>");
+	if (headCloseIdx !== -1) return content.slice(0, headCloseIdx) + head + content.slice(headCloseIdx);
+	const htmlOpenMatch = content.match(/<html\b[^>]*>/i);
+	if (htmlOpenMatch) {
+		const idx = htmlOpenMatch.index + htmlOpenMatch[0].length;
+		return content.slice(0, idx) + `<head>${head}</head>` + content.slice(idx);
+	}
+	return `<!DOCTYPE html><html><head>${head}</head><body>${content}</body></html>`;
+};
+//#endregion
+export { buildStaticSrcDoc };
+
+//# sourceMappingURL=buildStaticSrcDoc.mjs.map

package/es/HtmlPreview/buildStaticSrcDoc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStaticSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildStaticSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\ninterface BuildStaticSrcDocOptions {\n  background?: string;\n  content: string;\n  frameId: string;\n}\n\nconst shimsBlock = (frameId: string) =>\n  `<script>${STORAGE_SHIM_SCRIPT}</script><script>${buildAutoHeightScript(frameId)}</script>`;\n\nconst baseStyle = (background?: string) =>\n  `<style>html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}</style>`;\n\n/**\n * Wrap a user's HTML document with our shims so the iframe can load it as\n * a single self-contained srcDoc. This path is used when the content is\n * *static* (not streaming) — the browser parses it via the normal HTML\n * pipeline, so external `<script src=…>` tags load and execute exactly\n * like they would on a regular page. Tailwind CDN, Chart.js, p5.js — all\n * the things a Play CDN expects to see at parse time — work naturally.\n *\n * For *streaming* content we instead use `buildShellSrcDoc` + postMessage\n * morph, which trades reliable script execution for the ability to fade\n * in new nodes without reloading the iframe.\n *\n * Strategy: inject our shims (storage shim, auto-height) as early in the\n * resulting `<head>` as possible so they run before any user script. If\n * the user supplied a `<head>` open tag we slot the shims in right after\n * it; otherwise we wrap a minimal document around fragments.\n */\nexport const buildStaticSrcDoc = ({\n  background,\n  content,\n  frameId,\n}: BuildStaticSrcDocOptions): string => {\n  const head = `${baseStyle(background)}${shimsBlock(frameId)}`;\n  const lower = content.toLowerCase();\n  const hasHtmlTag = lower.includes('<html');\n\n  if (!hasHtmlTag) {\n    return `<!DOCTYPE html><html><head><meta charset=\"utf-8\">${head}</head><body>${content}</body></html>`;\n  }\n\n  const headOpenMatch = content.match(/<head\\b[^>]*>/i);\n  if (headOpenMatch) {\n    const idx = headOpenMatch.index! + headOpenMatch[0].length;\n    return content.slice(0, idx) + head + content.slice(idx);\n  }\n\n  const headCloseIdx = lower.indexOf('</head>');\n  if (headCloseIdx !== -1) {\n    return content.slice(0, headCloseIdx) + head + content.slice(headCloseIdx);\n  }\n\n  const htmlOpenMatch = content.match(/<html\\b[^>]*>/i);\n  if (htmlOpenMatch) {\n    const idx = htmlOpenMatch.index! + htmlOpenMatch[0].length;\n    return content.slice(0, idx) + `<head>${head}</head>` + content.slice(idx);\n  }\n\n  return `<!DOCTYPE html><html><head>${head}</head><body>${content}</body></html>`;\n};\n"],"mappings":";;;AASA,MAAM,cAAc,YAClB,WAAW,oBAAoB,oBAAmB,sBAAsB,QAAQ,CAAC;AAEnF,MAAM,aAAa,eACjB,uCAAuC,aAAa,cAAc,WAAW,KAAK,GAAG;;;;;;;;;;;;;;;;;;AAmBvF,MAAa,qBAAqB,EAChC,YACA,SACA,cACsC;CACtC,MAAM,OAAO,GAAG,UAAU,WAAW,GAAG,WAAW,QAAQ;CAC3D,MAAM,QAAQ,QAAQ,aAAa;AAGnC,KAAI,CAFe,MAAM,SAAS,QAEnB,CACb,QAAO,oDAAoD,KAAK,eAAe,QAAQ;CAGzF,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB;AACrD,KAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,GAAG;AACpD,SAAO,QAAQ,MAAM,GAAG,IAAI,GAAG,OAAO,QAAQ,MAAM,IAAI;;CAG1D,MAAM,eAAe,MAAM,QAAQ,UAAU;AAC7C,KAAI,iBAAiB,GACnB,QAAO,QAAQ,MAAM,GAAG,aAAa,GAAG,OAAO,QAAQ,MAAM,aAAa;CAG5E,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB;AACrD,KAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,GAAG;AACpD,SAAO,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,WAAW,QAAQ,MAAM,IAAI;;AAG5E,QAAO,8BAA8B,KAAK,eAAe,QAAQ"}

package/es/HtmlPreview/const.d.mts

@@ -0,0 +1,42 @@
+//#region src/HtmlPreview/const.d.ts
+/**
+ * Default sandbox attribute for HTML preview iframes.
+ *
+ * Why this exact set:
+ * - `allow-scripts`  — required by the use case (three.js / p5.js / Tailwind
+ *   CDN style demos). Without it inline preview degrades to source view.
+ * - `allow-forms`    — lets demos handle `<form>` submissions in-frame.
+ * - `allow-modals`   — `alert`/`confirm`/`prompt` are common in toy demos.
+ *
+ * Deliberately omitted:
+ * - `allow-same-origin` — would let scripts read parent cookies / localStorage
+ *   under cloud deployments, and bridge the IPC boundary on desktop builds.
+ * - `allow-popups`, `allow-top-navigation` — phishing surface.
+ *
+ * Override at your own risk via `sandbox` prop.
+ */
+declare const DEFAULT_SANDBOX = "allow-scripts allow-forms allow-modals";
+declare const DEFAULT_HEIGHT = 400;
+/**
+ * Is the content a "full" HTML document (has `<html>` or `<!DOCTYPE html>`)?
+ * Fragments without these markers render poorly inline and should not auto-mount.
+ */
+declare const isFullHtmlDocument: (content: string) => boolean;
+/**
+ * Heuristic for whether streaming HTML is "stable enough to mount the iframe".
+ * Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each
+ * time), so we wait for a clear closing signal.
+ */
+declare const isHtmlContentClosed: (content: string) => boolean;
+/**
+ * Does the content contain a `<script>` tag?
+ *
+ * Used by `streamingMode: 'auto'` to decide whether live-streaming the
+ * iframe is safe. Script-bearing content gets deferred until stable so we
+ * don't re-run `setup()` on every token; script-less content (pure
+ * markup + styles) streams live for a more responsive feel.
+ */
+declare const containsScript: (content: string) => boolean;
+//#endregion
+export { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed };
+//# sourceMappingURL=const.d.mts.map

package/es/HtmlPreview/const.mjs

@@ -0,0 +1,63 @@
+//#region src/HtmlPreview/const.ts
+/**
+* Default sandbox attribute for HTML preview iframes.
+*
+* Why this exact set:
+* - `allow-scripts`  — required by the use case (three.js / p5.js / Tailwind
+*   CDN style demos). Without it inline preview degrades to source view.
+* - `allow-forms`    — lets demos handle `<form>` submissions in-frame.
+* - `allow-modals`   — `alert`/`confirm`/`prompt` are common in toy demos.
+*
+* Deliberately omitted:
+* - `allow-same-origin` — would let scripts read parent cookies / localStorage
+*   under cloud deployments, and bridge the IPC boundary on desktop builds.
+* - `allow-popups`, `allow-top-navigation` — phishing surface.
+*
+* Override at your own risk via `sandbox` prop.
+*/
+const DEFAULT_SANDBOX = "allow-scripts allow-forms allow-modals";
+const DEFAULT_HEIGHT = 400;
+/**
+* Cap for srcDoc length. Beyond a few MB browsers start misbehaving;
+* we fall back to source-only above this threshold.
+*/
+const SRCDOC_MAX_LENGTH = 5 * 1024 * 1024;
+const FULL_HTML_MARKERS = [
+	"<!doctype html",
+	"<html",
+	"<HTML"
+];
+/**
+* Is the content a "full" HTML document (has `<html>` or `<!DOCTYPE html>`)?
+* Fragments without these markers render poorly inline and should not auto-mount.
+*/
+const isFullHtmlDocument = (content) => {
+	if (!content) return false;
+	const head = content.slice(0, 1024).toLowerCase();
+	return FULL_HTML_MARKERS.some((marker) => head.includes(marker.toLowerCase()));
+};
+/**
+* Heuristic for whether streaming HTML is "stable enough to mount the iframe".
+* Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each
+* time), so we wait for a clear closing signal.
+*/
+const isHtmlContentClosed = (content) => {
+	if (!content) return false;
+	return content.slice(-1024).toLowerCase().includes("</html>");
+};
+/**
+* Does the content contain a `<script>` tag?
+*
+* Used by `streamingMode: 'auto'` to decide whether live-streaming the
+* iframe is safe. Script-bearing content gets deferred until stable so we
+* don't re-run `setup()` on every token; script-less content (pure
+* markup + styles) streams live for a more responsive feel.
+*/
+const containsScript = (content) => {
+	if (!content) return false;
+	return /<script\b/i.test(content);
+};
+//#endregion
+export { DEFAULT_HEIGHT, DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH, containsScript, isFullHtmlDocument, isHtmlContentClosed };
+
+//# sourceMappingURL=const.mjs.map

package/es/HtmlPreview/const.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.mjs","names":[],"sources":["../../src/HtmlPreview/const.ts"],"sourcesContent":["/**\n * Default sandbox attribute for HTML preview iframes.\n *\n * Why this exact set:\n * - `allow-scripts`  — required by the use case (three.js / p5.js / Tailwind\n *   CDN style demos). Without it inline preview degrades to source view.\n * - `allow-forms`    — lets demos handle `<form>` submissions in-frame.\n * - `allow-modals`   — `alert`/`confirm`/`prompt` are common in toy demos.\n *\n * Deliberately omitted:\n * - `allow-same-origin` — would let scripts read parent cookies / localStorage\n *   under cloud deployments, and bridge the IPC boundary on desktop builds.\n * - `allow-popups`, `allow-top-navigation` — phishing surface.\n *\n * Override at your own risk via `sandbox` prop.\n */\nexport const DEFAULT_SANDBOX = 'allow-scripts allow-forms allow-modals';\n\nexport const DEFAULT_HEIGHT = 400;\n\n/**\n * Cap for srcDoc length. Beyond a few MB browsers start misbehaving;\n * we fall back to source-only above this threshold.\n */\nexport const SRCDOC_MAX_LENGTH = 5 * 1024 * 1024;\n\nconst FULL_HTML_MARKERS = ['<!doctype html', '<html', '<HTML'];\n\n/**\n * Is the content a \"full\" HTML document (has `<html>` or `<!DOCTYPE html>`)?\n * Fragments without these markers render poorly inline and should not auto-mount.\n */\nexport const isFullHtmlDocument = (content: string): boolean => {\n  if (!content) return false;\n  const head = content.slice(0, 1024).toLowerCase();\n  return FULL_HTML_MARKERS.some((marker) => head.includes(marker.toLowerCase()));\n};\n\n/**\n * Heuristic for whether streaming HTML is \"stable enough to mount the iframe\".\n * Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each\n * time), so we wait for a clear closing signal.\n */\nexport const isHtmlContentClosed = (content: string): boolean => {\n  if (!content) return false;\n  const tail = content.slice(-1024).toLowerCase();\n  return tail.includes('</html>');\n};\n\n/**\n * Does the content contain a `<script>` tag?\n *\n * Used by `streamingMode: 'auto'` to decide whether live-streaming the\n * iframe is safe. Script-bearing content gets deferred until stable so we\n * don't re-run `setup()` on every token; script-less content (pure\n * markup + styles) streams live for a more responsive feel.\n */\nexport const containsScript = (content: string): boolean => {\n  if (!content) return false;\n  return /<script\\b/i.test(content);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,kBAAkB;AAE/B,MAAa,iBAAiB;;;;;AAM9B,MAAa,oBAAoB,IAAI,OAAO;AAE5C,MAAM,oBAAoB;CAAC;CAAkB;CAAS;CAAQ;;;;;AAM9D,MAAa,sBAAsB,YAA6B;AAC9D,KAAI,CAAC,QAAS,QAAO;CACrB,MAAM,OAAO,QAAQ,MAAM,GAAG,KAAK,CAAC,aAAa;AACjD,QAAO,kBAAkB,MAAM,WAAW,KAAK,SAAS,OAAO,aAAa,CAAC,CAAC;;;;;;;AAQhF,MAAa,uBAAuB,YAA6B;AAC/D,KAAI,CAAC,QAAS,QAAO;AAErB,QADa,QAAQ,MAAM,MAAM,CAAC,aACvB,CAAC,SAAS,UAAU;;;;;;;;;;AAWjC,MAAa,kBAAkB,YAA6B;AAC1D,KAAI,CAAC,QAAS,QAAO;AACrB,QAAO,aAAa,KAAK,QAAQ"}

package/es/HtmlPreview/index.d.mts

@@ -0,0 +1,6 @@
+import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
+import { HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode } from "./type.mjs";
+import { HtmlPreview } from "./HtmlPreview.mjs";
+import { HtmlPreviewIframe } from "./Iframe.mjs";
+import { AUTO_HEIGHT_MESSAGE_TYPE } from "./injectAutoHeightScript.mjs";
+export { DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, HtmlPreviewIframe, HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode, HtmlPreview as default, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed };

package/es/HtmlPreview/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/HtmlPreview/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/HtmlPreview/index.mjs

@@ -0,0 +1,5 @@
+import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
+import { AUTO_HEIGHT_MESSAGE_TYPE } from "./injectAutoHeightScript.mjs";
+import HtmlPreviewIframe from "./Iframe.mjs";
+import HtmlPreview from "./HtmlPreview.mjs";
+export { DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, HtmlPreviewIframe, HtmlPreview as default, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed };

package/es/HtmlPreview/injectAutoHeightScript.d.mts

@@ -0,0 +1,5 @@
+//#region src/HtmlPreview/injectAutoHeightScript.d.ts
+declare const AUTO_HEIGHT_MESSAGE_TYPE = "lobe-html-resize";
+//#endregion
+export { AUTO_HEIGHT_MESSAGE_TYPE };
+//# sourceMappingURL=injectAutoHeightScript.d.mts.map

package/es/HtmlPreview/injectAutoHeightScript.mjs

@@ -0,0 +1,37 @@
+//#region src/HtmlPreview/injectAutoHeightScript.ts
+const AUTO_HEIGHT_MESSAGE_TYPE = "lobe-html-resize";
+const buildAutoHeightScript = (frameId) => `
+(function () {
+  var frameId = ${JSON.stringify(frameId)};
+  function post() {
+    try {
+      var h = Math.max(
+        document.documentElement.scrollHeight,
+        document.body ? document.body.scrollHeight : 0,
+      );
+      parent.postMessage({ type: ${JSON.stringify(AUTO_HEIGHT_MESSAGE_TYPE)}, frameId: frameId, height: h }, '*');
+    } catch (_) {}
+  }
+
+  function attach() {
+    post();
+    try {
+      var ro = new ResizeObserver(post);
+      if (document.body) ro.observe(document.body);
+      if (document.documentElement) ro.observe(document.documentElement);
+    } catch (_) {}
+    window.addEventListener('load', post);
+    window.addEventListener('resize', post);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', attach);
+  } else {
+    attach();
+  }
+})();
+`;
+//#endregion
+export { AUTO_HEIGHT_MESSAGE_TYPE, buildAutoHeightScript };
+
+//# sourceMappingURL=injectAutoHeightScript.mjs.map

package/es/HtmlPreview/injectAutoHeightScript.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectAutoHeightScript.mjs","names":[],"sources":["../../src/HtmlPreview/injectAutoHeightScript.ts"],"sourcesContent":["export const AUTO_HEIGHT_MESSAGE_TYPE = 'lobe-html-resize';\n\nexport const buildAutoHeightScript = (frameId: string) => `\n(function () {\n  var frameId = ${JSON.stringify(frameId)};\n  function post() {\n    try {\n      var h = Math.max(\n        document.documentElement.scrollHeight,\n        document.body ? document.body.scrollHeight : 0,\n      );\n      parent.postMessage({ type: ${JSON.stringify(AUTO_HEIGHT_MESSAGE_TYPE)}, frameId: frameId, height: h }, '*');\n    } catch (_) {}\n  }\n\n  function attach() {\n    post();\n    try {\n      var ro = new ResizeObserver(post);\n      if (document.body) ro.observe(document.body);\n      if (document.documentElement) ro.observe(document.documentElement);\n    } catch (_) {}\n    window.addEventListener('load', post);\n    window.addEventListener('resize', post);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', attach);\n  } else {\n    attach();\n  }\n})();\n`;\n"],"mappings":";AAAA,MAAa,2BAA2B;AAExC,MAAa,yBAAyB,YAAoB;;kBAExC,KAAK,UAAU,QAAQ,CAAC;;;;;;;mCAOP,KAAK,UAAU,yBAAyB,CAAC"}

package/es/HtmlPreview/injectStorageShim.mjs

@@ -0,0 +1,62 @@
+//#region src/HtmlPreview/injectStorageShim.ts
+/**
+* Why: When iframe sandbox does not include `allow-same-origin`, accessing
+* `window.localStorage` / `window.sessionStorage` throws a SecurityError.
+* Many LLM-generated demos use these APIs as a convenience even when they
+* don't need persistence — letting them throw kills the whole demo.
+*
+* The shim defines per-frame in-memory Storage objects that match the
+* Storage interface, so naive `localStorage.setItem(...)` calls succeed.
+* State does not survive a reload (acceptable — sandbox is throwaway).
+*/
+const STORAGE_SHIM_SCRIPT = `
+(function () {
+  function createStorage() {
+    var store = Object.create(null);
+    return {
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: function (i) {
+        var keys = Object.keys(store);
+        return i >= 0 && i < keys.length ? keys[i] : null;
+      },
+      getItem: function (k) {
+        return Object.prototype.hasOwnProperty.call(store, k) ? store[k] : null;
+      },
+      setItem: function (k, v) {
+        store[String(k)] = String(v);
+      },
+      removeItem: function (k) {
+        delete store[k];
+      },
+      clear: function () {
+        store = Object.create(null);
+      },
+    };
+  }
+
+  function tryShim(name) {
+    try {
+      // Accessing the property in a sandboxed (no allow-same-origin) frame
+      // throws synchronously — that's the signal to install the shim.
+      // eslint-disable-next-line no-unused-expressions
+      window[name];
+      return;
+    } catch (_) {}
+    try {
+      Object.defineProperty(window, name, {
+        configurable: true,
+        value: createStorage(),
+      });
+    } catch (_) {}
+  }
+
+  tryShim('localStorage');
+  tryShim('sessionStorage');
+})();
+`;
+//#endregion
+export { STORAGE_SHIM_SCRIPT };
+
+//# sourceMappingURL=injectStorageShim.mjs.map

package/es/HtmlPreview/injectStorageShim.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStorageShim.mjs","names":[],"sources":["../../src/HtmlPreview/injectStorageShim.ts"],"sourcesContent":["/**\n * Why: When iframe sandbox does not include `allow-same-origin`, accessing\n * `window.localStorage` / `window.sessionStorage` throws a SecurityError.\n * Many LLM-generated demos use these APIs as a convenience even when they\n * don't need persistence — letting them throw kills the whole demo.\n *\n * The shim defines per-frame in-memory Storage objects that match the\n * Storage interface, so naive `localStorage.setItem(...)` calls succeed.\n * State does not survive a reload (acceptable — sandbox is throwaway).\n */\nexport const STORAGE_SHIM_SCRIPT = `\n(function () {\n  function createStorage() {\n    var store = Object.create(null);\n    return {\n      get length() {\n        return Object.keys(store).length;\n      },\n      key: function (i) {\n        var keys = Object.keys(store);\n        return i >= 0 && i < keys.length ? keys[i] : null;\n      },\n      getItem: function (k) {\n        return Object.prototype.hasOwnProperty.call(store, k) ? store[k] : null;\n      },\n      setItem: function (k, v) {\n        store[String(k)] = String(v);\n      },\n      removeItem: function (k) {\n        delete store[k];\n      },\n      clear: function () {\n        store = Object.create(null);\n      },\n    };\n  }\n\n  function tryShim(name) {\n    try {\n      // Accessing the property in a sandboxed (no allow-same-origin) frame\n      // throws synchronously — that's the signal to install the shim.\n      // eslint-disable-next-line no-unused-expressions\n      window[name];\n      return;\n    } catch (_) {}\n    try {\n      Object.defineProperty(window, name, {\n        configurable: true,\n        value: createStorage(),\n      });\n    } catch (_) {}\n  }\n\n  tryShim('localStorage');\n  tryShim('sessionStorage');\n})();\n`;\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,sBAAsB"}