@hubstr/kit 0.1.5 → 0.1.6

package/ui/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 = "hubstr-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 `.hubstr-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 hubstr-html-fade{from{opacity:0}to{opacity:1}}.hubstr-html-new{animation:hubstr-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('hubstr-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-hubstr-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('hubstr-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('_hubstr-rescan');
+      document.body.classList.remove('_hubstr-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="hubstr-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/ui/es/HtmlPreview/buildShellSrcDoc.mjs.map

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

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

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

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

package/ui/es/HtmlPreview/index.js

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

package/ui/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/ui/es/HtmlPreview/injectAutoHeightScript.d.mts

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

package/ui/es/HtmlPreview/injectAutoHeightScript.mjs

@@ -0,0 +1,37 @@
+//#region src/HtmlPreview/injectAutoHeightScript.ts
+const AUTO_HEIGHT_MESSAGE_TYPE = "hubstr-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/ui/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 = 'hubstr-html-resize';\r\n\r\nexport const buildAutoHeightScript = (frameId: string) => `\r\n(function () {\r\n  var frameId = ${JSON.stringify(frameId)};\r\n  function post() {\r\n    try {\r\n      var h = Math.max(\r\n        document.documentElement.scrollHeight,\r\n        document.body ? document.body.scrollHeight : 0,\r\n      );\r\n      parent.postMessage({ type: ${JSON.stringify(AUTO_HEIGHT_MESSAGE_TYPE)}, frameId: frameId, height: h }, '*');\r\n    } catch (_) {}\r\n  }\r\n\r\n  function attach() {\r\n    post();\r\n    try {\r\n      var ro = new ResizeObserver(post);\r\n      if (document.body) ro.observe(document.body);\r\n      if (document.documentElement) ro.observe(document.documentElement);\r\n    } catch (_) {}\r\n    window.addEventListener('load', post);\r\n    window.addEventListener('resize', post);\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', attach);\r\n  } else {\r\n    attach();\r\n  }\r\n})();\r\n`;\r\n"],"mappings":";AAAA,MAAa,2BAA2B;AAExC,MAAa,yBAAyB,YAAoB;;kBAExC,KAAK,UAAU,QAAQ,CAAC;;;;;;;mCAOP,KAAK,UAAU,yBAAyB,CAAC"}

package/ui/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/ui/es/HtmlPreview/injectStorageShim.mjs.map

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