@puckeditor/plugin-ai 0.9.0-canary.d8bdabee → 0.9.0-canary.fb1abcf5

package/dist/index.js

@@ -995,7 +995,7 @@ function useChat({
 // src/components/Chat/index.tsx
 var import_core5 = require("@puckeditor/core");
 var import_ai5 = require("ai");
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_ulid = require("ulid");
 
 // ../utils/lib/get-class-name-factory.ts
@@ -2490,7 +2490,6 @@ function ExamplePrompt({
 // src/components/Chat/index.tsx
 var import_qler = __toESM(require("qler"));
 var import_reducer = __toESM(require_dist());
-var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
 var import_use_debounce = require("use-debounce");
 
 // src/lib/scroll-tracking-events.ts
@@ -2546,151 +2545,20 @@ var import_core4 = require("@puckeditor/core");
 // src/lib/design/component.tsx
 init_react_import();
 var import_core3 = require("@puckeditor/core");
-var import_react25 = __toESM(require("react"));
+var import_react24 = require("react");
 
 // src/lib/morph-html.ts
 init_react_import();
-var PROTECTED_ATTRS = /* @__PURE__ */ new Set([
-  "contenteditable",
-  "data-puck-overlay-portal"
-]);
-var SLOT_OWNED_ATTRS = /* @__PURE__ */ new Set(["style", "class"]);
-var isEventHandlerAttr = (name) => /^on/i.test(name);
-var cssEscape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
-var FIELD_ATTR_PREFIX = "data-puck-field-";
-var hasJsonFieldBinding = (el) => {
-  const attrBoundNames = /* @__PURE__ */ new Set();
-  const jsonFieldNames = [];
-  for (const attr of Array.from(el.attributes)) {
-    if (!attr.name.startsWith(FIELD_ATTR_PREFIX)) continue;
-    if (attr.name.startsWith("data-puck-field-value-")) continue;
-    if (attr.value.trimStart().startsWith("{")) {
-      const fieldName = attr.name.slice(FIELD_ATTR_PREFIX.length);
-      if (fieldName && fieldName !== "name") {
-        jsonFieldNames.push(fieldName);
-      }
-    } else {
-      const fieldName = attr.value.trim();
-      if (fieldName) attrBoundNames.add(fieldName);
-    }
-  }
-  return jsonFieldNames.some((name) => !attrBoundNames.has(name));
-};
-var ownsItsChildren = (el) => el.hasAttribute("data-puck-slot") || el.hasAttribute("data-puck-field-name") || el.hasAttribute("data-puck-array") || hasJsonFieldBinding(el);
-var syncAttributes = (target, source) => {
-  const isSlot = target.hasAttribute("data-puck-slot");
-  for (const attr of Array.from(target.attributes)) {
-    if (PROTECTED_ATTRS.has(attr.name)) continue;
-    if (isSlot && SLOT_OWNED_ATTRS.has(attr.name)) continue;
-    if (isEventHandlerAttr(attr.name) || !source.hasAttribute(attr.name)) {
-      target.removeAttribute(attr.name);
-    }
-  }
-  for (const attr of Array.from(source.attributes)) {
-    if (PROTECTED_ATTRS.has(attr.name)) continue;
-    if (isSlot && SLOT_OWNED_ATTRS.has(attr.name)) continue;
-    if (isEventHandlerAttr(attr.name)) continue;
-    if (target.getAttribute(attr.name) !== attr.value) {
-      target.setAttribute(attr.name, attr.value);
-    }
-  }
-};
-var isSameKind = (a, b) => a.nodeType === b.nodeType && (a.nodeType !== Node.ELEMENT_NODE || a.tagName === b.tagName);
-var isIncompleteTagArtifact = (node) => node.nodeType === Node.TEXT_NODE && /^<\/?[a-zA-Z]*$/.test(node.nodeValue ?? "");
-var stripIncompleteTagArtifacts = (root) => {
-  for (const child of Array.from(root.childNodes)) {
-    if (isIncompleteTagArtifact(child)) {
-      root.removeChild(child);
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      stripIncompleteTagArtifacts(child);
-    }
-  }
-};
-var stripEventHandlerAttrs = (root) => {
-  root.querySelectorAll("*").forEach((el) => {
-    for (const attr of Array.from(el.attributes)) {
-      if (isEventHandlerAttr(attr.name)) el.removeAttribute(attr.name);
-    }
-  });
-};
-var morphChildren = (target, source, skipChildrenOf = ownsItsChildren) => {
-  const sourceChildren = Array.from(source.childNodes);
-  for (let i = 0; i < sourceChildren.length; i++) {
-    const sourceChild = sourceChildren[i];
-    const targetChild = target.childNodes[i];
-    if (!targetChild) {
-      target.appendChild(sourceChild);
-      continue;
-    }
-    if (!isSameKind(targetChild, sourceChild)) {
-      target.replaceChild(sourceChild, targetChild);
-      continue;
-    }
-    if (sourceChild.nodeType !== Node.ELEMENT_NODE) {
-      if (targetChild.nodeValue !== sourceChild.nodeValue) {
-        targetChild.nodeValue = sourceChild.nodeValue;
-      }
-      continue;
-    }
-    const targetEl = targetChild;
-    syncAttributes(targetEl, sourceChild);
-    if (!skipChildrenOf(targetEl)) {
-      morphChildren(targetEl, sourceChild, skipChildrenOf);
-    }
-  }
-  while (target.childNodes.length > sourceChildren.length) {
-    target.removeChild(target.lastChild);
-  }
-};
-function morphHtml(container, html, attrOverrides = [], skipChildrenOf = ownsItsChildren) {
-  const template = container.ownerDocument.createElement("template");
-  template.innerHTML = html;
-  stripIncompleteTagArtifacts(template.content);
-  stripEventHandlerAttrs(template.content);
-  for (const { name, attr, value } of attrOverrides) {
-    template.content.querySelectorAll(`[data-puck-field-${attr}="${cssEscape(name)}"]`).forEach((el) => {
-      if (el.closest("[data-puck-array]")) return;
-      el.setAttribute(attr, value);
-    });
-  }
-  morphChildren(container, template.content, skipChildrenOf);
-}
 
-// src/lib/design/observer-guard.ts
+// src/lib/design/annotations.ts
 init_react_import();
-var wrapScriptWithObserverGuard = (script) => {
-  if (!script.includes("MutationObserver")) return script;
-  return `(function () {
-  var __NativeMutationObserver = window.MutationObserver;
-  function MutationObserver(callback) {
-    var observed = [];
-    var inner = new __NativeMutationObserver(function (records) {
-      inner.disconnect();
-      try {
-        callback(records, inner);
-      } finally {
-        for (var i = 0; i < observed.length; i++) {
-          __nativeObserve.call(inner, observed[i][0], observed[i][1]);
-        }
-      }
-    });
-    var __nativeObserve = inner.observe;
-    inner.observe = function (target, options) {
-      observed.push([target, options]);
-      return __nativeObserve.call(inner, target, options);
-    };
-    return inner;
-  }
-${script}
-})();`;
-};
 
 // src/lib/html-annotations.ts
 init_react_import();
 var import_htmlparser2 = require("htmlparser2");
 var import_domutils = require("domutils");
 var import_domhandler = require("domhandler");
-var FIELD_ATTR_PREFIX2 = "data-puck-field-";
+var FIELD_ATTR_PREFIX = "data-puck-field-";
 var OPTIONS_ATTR_PREFIX = "data-puck-options-";
 var BIND_ATTR_PREFIX = "data-puck-bind-";
 var BIND_INPUT_ATTR_PREFIX = "data-puck-bind-input-";
@@ -2700,26 +2568,21 @@ var MAX_ATTR_PREFIX = "data-puck-max-";
 var STEP_ATTR_PREFIX = "data-puck-step-";
 var SLOT_ATTR = "data-puck-slot";
 var ARRAY_ATTR = "data-puck-array";
-var BUILT_IN_FIELD_TYPES = /* @__PURE__ */ new Set([
+var RECOGNIZED_FIELD_TYPES = /* @__PURE__ */ new Set([
   "text",
   "textarea",
   "number",
   "richtext",
   "radio",
   "select",
-  "slot",
-  "array",
-  "object",
-  "external",
-  "custom"
+  "slot"
 ]);
-var isBuiltInFieldType = (type) => BUILT_IN_FIELD_TYPES.has(type);
-var tryParseFieldShape = (attrValue) => {
-  const trimmed = attrValue.trimStart();
+var tryParseFieldShape = (value) => {
+  const trimmed = value.trimStart();
   if (!trimmed.startsWith("{")) return null;
   try {
     const parsed = JSON.parse(trimmed);
-    if (isRecord(parsed) && typeof parsed.type === "string" && parsed.type) {
+    if (isRecord(parsed) && typeof parsed.type === "string" && RECOGNIZED_FIELD_TYPES.has(parsed.type)) {
       return parsed;
     }
   } catch {
@@ -2743,6 +2606,19 @@ var textContentWithBreaks = (node) => {
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var FIELD_NAME_RE = /^[A-Za-z0-9_]+(?:[-.][A-Za-z0-9_]+)*$/;
 var isValidFieldName = (name) => FIELD_NAME_RE.test(name);
+var isFieldNameClaimed = (name, claimed, includeExact = true) => {
+  for (const entry of claimed) {
+    if (includeExact && entry === name || entry.startsWith(`${name}.`) || name.startsWith(`${entry}.`)) {
+      return true;
+    }
+  }
+  return false;
+};
+var attrBoundFieldNames = (attribs) => new Set(
+  Object.entries(attribs).filter(
+    ([name, value]) => name.startsWith(FIELD_ATTR_PREFIX) && name !== `${FIELD_ATTR_PREFIX}name` && !name.startsWith(`${FIELD_ATTR_PREFIX}value-`) && !tryParseFieldShape(value)
+  ).map(([, value]) => value.trim()).filter(isValidFieldName)
+);
 var getDeepValue = (source, path) => {
   if (!path.includes(".")) return source[path];
   let current = source;
@@ -2843,6 +2719,7 @@ var collectElementFields = (element, acc) => {
     return true;
   }
   let skipChildren = false;
+  const attrBound = attrBoundFieldNames(attribs);
   for (const [attrName, attrValue] of Object.entries(attribs)) {
     if (attrName.startsWith(OPTIONS_ATTR_PREFIX)) {
       const fieldName = attrName.slice(OPTIONS_ATTR_PREFIX.length);
@@ -2871,8 +2748,8 @@ var collectElementFields = (element, acc) => {
       }
       continue;
     }
-    if (!attrName.startsWith(FIELD_ATTR_PREFIX2)) continue;
-    const target = attrName.slice(FIELD_ATTR_PREFIX2.length);
+    if (!attrName.startsWith(FIELD_ATTR_PREFIX)) continue;
+    const target = attrName.slice(FIELD_ATTR_PREFIX.length);
     if (!target) continue;
     const shape = tryParseFieldShape(attrValue);
     if (shape) {
@@ -2886,17 +2763,11 @@ var collectElementFields = (element, acc) => {
         if (existing) existing.shape = shape;
         continue;
       }
+      if (isFieldNameClaimed(name2, attrBound, false) || isFieldNameClaimed(name2, acc.seenFields)) {
+        continue;
+      }
       acc.seenFields.add(name2);
-      if (!isBuiltInFieldType(shape.type)) {
-        const { type, ...value } = shape;
-        acc.fields.push({
-          name: name2,
-          binding: "text",
-          shape: { type },
-          format: "json"
-        });
-        setExtractedValue(acc.values, name2, value);
-      } else if (shape.type === "richtext") {
+      if (shape.type === "richtext") {
         acc.fields.push({ name: name2, binding: "text", shape, format: "json" });
         setExtractedValue(acc.values, name2, (0, import_domutils.getInnerHTML)(element).trim());
         skipChildren = true;
@@ -2949,6 +2820,9 @@ var collectElementFields = (element, acc) => {
       }
       continue;
     }
+    if (target === "name" && isFieldNameClaimed(name, attrBound) || isFieldNameClaimed(name, acc.seenFields)) {
+      continue;
+    }
     acc.seenFields.add(name);
     const fieldType = getTypeModifier(attribs, name);
     const constraints = fieldType === "number" ? getNumberConstraints(attribs, name) : {};
@@ -3042,7 +2916,7 @@ var parseHtmlAnnotations = (html) => {
         if (slotName && isValidFieldName(slotName) && !seenSlots.has(slotName)) {
           seenSlots.add(slotName);
           const shape = tryParseFieldShape(
-            attribs[FIELD_ATTR_PREFIX2 + slotName.toLowerCase()] ?? ""
+            attribs[FIELD_ATTR_PREFIX + slotName.toLowerCase()] ?? ""
           );
           const allow = shape?.type === "slot" ? sanitizeStringArray(shape.allow) : void 0;
           const disallow = shape?.type === "slot" ? sanitizeStringArray(shape.disallow) : void 0;
@@ -3191,21 +3065,16 @@ var patchElement = (element, props) => {
     }
     return { didPatch, skipChildren: true };
   }
-  const attrBoundFields = /* @__PURE__ */ new Set();
-  for (const [an, av] of Object.entries(attribs)) {
-    if (an.startsWith(FIELD_ATTR_PREFIX2) && an !== `${FIELD_ATTR_PREFIX2}name` && !tryParseFieldShape(av)) {
-      attrBoundFields.add(av.trim());
-    }
-  }
+  const attrBoundFields = attrBoundFieldNames(attribs);
   for (const [attrName, attrValue] of Object.entries(attribs)) {
-    if (!attrName.startsWith(FIELD_ATTR_PREFIX2)) continue;
-    const target = attrName.slice(FIELD_ATTR_PREFIX2.length);
+    if (!attrName.startsWith(FIELD_ATTR_PREFIX)) continue;
+    const target = attrName.slice(FIELD_ATTR_PREFIX.length);
     if (!target) continue;
     const shape = tryParseFieldShape(attrValue);
     if (shape) {
       if (shape.type === "slot") continue;
       const name2 = target;
-      if (attrBoundFields.has(name2)) continue;
+      if (isFieldNameClaimed(name2, attrBoundFields)) continue;
       const value2 = getDeepValue(props, name2);
       if (shape.type === "richtext") {
         if (typeof value2 !== "string") continue;
@@ -3223,6 +3092,9 @@ var patchElement = (element, props) => {
     }
     const name = attrValue.trim();
     if (!name) continue;
+    if (target === "name" && isFieldNameClaimed(name, attrBoundFields)) {
+      continue;
+    }
     const value = getDeepValue(props, name);
     if (target === "name" && getTypeModifier(attribs, name) === "richtext") {
       if (typeof value !== "string") continue;
@@ -3295,7 +3167,6 @@ var renderHtmlArrayItems = (html, arrayName, items) => {
 };
 
 // src/lib/design/annotations.ts
-init_react_import();
 var cache = /* @__PURE__ */ new Map();
 var MAX_CACHE_ENTRIES = 32;
 var getAnnotations = (html) => {
@@ -3311,22 +3182,159 @@ var getAnnotations = (html) => {
 var getSlotFields = (html) => Object.fromEntries(
   getAnnotations(html).slots.map((slot) => [slot.name, toSlotField(slot)])
 );
-var UNTRANSFORMABLE_FIELD_TYPES = /* @__PURE__ */ new Set(["richtext", "array", "slot"]);
-var isTransformable = (field) => {
-  if (!field?.type) return false;
-  if (UNTRANSFORMABLE_FIELD_TYPES.has(field.type)) return false;
-  const nested = field.objectFields ?? field.arrayFields;
-  return nested ? Object.values(nested).every(isTransformable) : true;
+
+// src/lib/morph-html.ts
+var PROTECTED_ATTRS = /* @__PURE__ */ new Set([
+  "contenteditable",
+  "data-puck-overlay-portal"
+]);
+var SLOT_OWNED_ATTRS = /* @__PURE__ */ new Set(["style", "class"]);
+var isEventHandlerAttr = (name) => /^on/i.test(name);
+var FIELD_ATTR_PREFIX2 = "data-puck-field-";
+var LEGACY_TEXT_ATTR = `${FIELD_ATTR_PREFIX2}name`;
+var VALUE_ATTR_PREFIX = `${FIELD_ATTR_PREFIX2}value-`;
+var hasTextBinding = (el, parsedTextFields) => {
+  for (const attr of Array.from(el.attributes)) {
+    if (!attr.name.startsWith(FIELD_ATTR_PREFIX2)) continue;
+    if (attr.name.startsWith(VALUE_ATTR_PREFIX)) continue;
+    const isShape = attr.value.trimStart().startsWith("{");
+    const fieldName = isShape ? attr.name.slice(FIELD_ATTR_PREFIX2.length) : attr.value.trim();
+    if (isValidFieldName(fieldName) && (attr.name === LEGACY_TEXT_ATTR || isShape) && (!parsedTextFields || parsedTextFields.has(fieldName))) {
+      return true;
+    }
+  }
+  return false;
 };
-var getTransformableFields = (reg) => {
-  const annotations = getAnnotations(reg.html ?? "");
-  const source = {
-    ...toPuckFields(annotations.fields, annotations.values),
-    ...reg.fields ?? {}
-  };
-  return Object.fromEntries(
-    Object.entries(source).filter(([, field]) => isTransformable(field))
+var ownsItsChildren = (el, parsedTextFields) => el.hasAttribute("data-puck-slot") || el.hasAttribute("data-puck-array") || hasTextBinding(el, parsedTextFields);
+var syncAttributes = (target, source) => {
+  const isSlot = target.hasAttribute("data-puck-slot");
+  for (const attr of Array.from(target.attributes)) {
+    if (PROTECTED_ATTRS.has(attr.name)) continue;
+    if (isSlot && SLOT_OWNED_ATTRS.has(attr.name)) continue;
+    if (isEventHandlerAttr(attr.name) || !source.hasAttribute(attr.name)) {
+      target.removeAttribute(attr.name);
+    }
+  }
+  for (const attr of Array.from(source.attributes)) {
+    if (PROTECTED_ATTRS.has(attr.name)) continue;
+    if (isSlot && SLOT_OWNED_ATTRS.has(attr.name)) continue;
+    if (isEventHandlerAttr(attr.name)) continue;
+    if (target.getAttribute(attr.name) !== attr.value) {
+      target.setAttribute(attr.name, attr.value);
+    }
+  }
+};
+var isSameKind = (a, b) => a.nodeType === b.nodeType && (a.nodeType !== Node.ELEMENT_NODE || a.tagName === b.tagName);
+var isIncompleteTagArtifact = (node) => node.nodeType === Node.TEXT_NODE && /^<\/?[a-zA-Z]*$/.test(node.nodeValue ?? "");
+var stripIncompleteTagArtifacts = (root) => {
+  for (const child of Array.from(root.childNodes)) {
+    if (isIncompleteTagArtifact(child)) {
+      root.removeChild(child);
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      stripIncompleteTagArtifacts(child);
+    }
+  }
+};
+var stripEventHandlerAttrs = (root) => {
+  root.querySelectorAll("*").forEach((el) => {
+    for (const attr of Array.from(el.attributes)) {
+      if (isEventHandlerAttr(attr.name)) el.removeAttribute(attr.name);
+    }
+  });
+};
+var morphChildren = (target, source, skipChildrenOf = ownsItsChildren) => {
+  const sourceChildren = Array.from(source.childNodes);
+  for (let i = 0; i < sourceChildren.length; i++) {
+    const sourceChild = sourceChildren[i];
+    const targetChild = target.childNodes[i];
+    if (!targetChild) {
+      target.appendChild(sourceChild);
+      continue;
+    }
+    if (!isSameKind(targetChild, sourceChild)) {
+      target.replaceChild(sourceChild, targetChild);
+      continue;
+    }
+    if (sourceChild.nodeType !== Node.ELEMENT_NODE) {
+      if (targetChild.nodeValue !== sourceChild.nodeValue) {
+        targetChild.nodeValue = sourceChild.nodeValue;
+      }
+      continue;
+    }
+    const targetEl = targetChild;
+    syncAttributes(targetEl, sourceChild);
+    if (!skipChildrenOf(targetEl)) {
+      morphChildren(targetEl, sourceChild, skipChildrenOf);
+    }
+  }
+  while (target.childNodes.length > sourceChildren.length) {
+    target.removeChild(target.lastChild);
+  }
+};
+function morphHtml(container, html, attrOverrides = [], skipChildrenOf) {
+  const template = container.ownerDocument.createElement("template");
+  template.innerHTML = html;
+  stripIncompleteTagArtifacts(template.content);
+  stripEventHandlerAttrs(template.content);
+  if (attrOverrides.length > 0) {
+    const overridesByAttr = /* @__PURE__ */ new Map();
+    for (const override of attrOverrides) {
+      if (isEventHandlerAttr(override.attr)) continue;
+      const bindingAttr = `${FIELD_ATTR_PREFIX2}${override.attr}`;
+      const fields = overridesByAttr.get(bindingAttr) ?? /* @__PURE__ */ new Map();
+      fields.set(override.name, override);
+      overridesByAttr.set(bindingAttr, fields);
+    }
+    template.content.querySelectorAll("*").forEach((el) => {
+      for (const attr of Array.from(el.attributes)) {
+        const override = overridesByAttr.get(attr.name)?.get(attr.value.trim());
+        if (!override) continue;
+        if (el.closest("[data-puck-array]")) return;
+        el.setAttribute(override.attr, override.value);
+      }
+    });
+  }
+  if (skipChildrenOf) {
+    morphChildren(container, template.content, skipChildrenOf);
+    return;
+  }
+  const parsedTextFields = new Set(
+    getAnnotations(html).fields.filter((field) => field.binding === "text").map((field) => field.name)
   );
+  morphChildren(
+    container,
+    template.content,
+    (el) => ownsItsChildren(el, parsedTextFields)
+  );
+}
+
+// src/lib/design/observer-guard.ts
+init_react_import();
+var wrapScriptWithObserverGuard = (script) => {
+  if (!script.includes("MutationObserver")) return script;
+  return `(function () {
+  var __NativeMutationObserver = window.MutationObserver;
+  function MutationObserver(callback) {
+    var observed = [];
+    var inner = new __NativeMutationObserver(function (records) {
+      inner.disconnect();
+      try {
+        callback(records, inner);
+      } finally {
+        for (var i = 0; i < observed.length; i++) {
+          __nativeObserve.call(inner, observed[i][0], observed[i][1]);
+        }
+      }
+    });
+    var __nativeObserve = inner.observe;
+    inner.observe = function (target, options) {
+      observed.push([target, options]);
+      return __nativeObserve.call(inner, target, options);
+    };
+    return inner;
+  }
+${script}
+})();`;
 };
 
 // src/lib/design/registration-store.ts
@@ -3402,7 +3410,7 @@ init_react_import();
 var import_core2 = require("@puckeditor/core");
 var CONTENT_EDITABLE_ATTR = "data-puck-content-editable";
 var isInlineEditingDisabled = (el) => el.closest(`[${CONTENT_EDITABLE_ATTR}="false"]`) !== null;
-var cssEscape2 = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+var cssEscape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
 var queryScopedFields = (entry, selector) => Array.from(entry.querySelectorAll(selector)).filter((el) => {
   if (el.closest("[data-puck-array]")) return false;
   const closestSlot = el.closest("[data-puck-slot]");
@@ -3410,7 +3418,7 @@ var queryScopedFields = (entry, selector) => Array.from(entry.querySelectorAll(s
   return true;
 });
 var findOwnArrayContainer = (entry, arrayName) => {
-  const selector = `[data-puck-array="${cssEscape2(arrayName)}"]`;
+  const selector = `[data-puck-array="${cssEscape(arrayName)}"]`;
   for (const el of entry.querySelectorAll(selector)) {
     const closestSlot = el.closest("[data-puck-slot]");
     if (!closestSlot || !entry.contains(closestSlot)) return el;
@@ -3425,7 +3433,7 @@ var inlineEditModeFor = (field) => {
   const type = field.shape?.type ?? field.fieldType;
   return type === "richtext" ? "richtext" : type === "number" ? "number" : "text";
 };
-var textFieldSelector = (field) => field.format === "json" ? `[${cssEscape2(`data-puck-field-${field.name}`)}]` : `[data-puck-field-name="${cssEscape2(field.name)}"]`;
+var textFieldSelector = (field) => field.format === "json" ? `[${cssEscape(`data-puck-field-${field.name}`)}]` : `[data-puck-field-name="${cssEscape(field.name)}"]`;
 var isHTMLElement = (el) => {
   const HTMLElementCtor = el.ownerDocument.defaultView?.HTMLElement;
   return !!HTMLElementCtor && el instanceof HTMLElementCtor;
@@ -3451,6 +3459,29 @@ var syncFieldValues = (entry, fields, props) => {
     });
   }
 };
+var claimedHostStyles = /* @__PURE__ */ new WeakMap();
+var claimHostStyles = (el, applyWhiteSpace) => {
+  if (!claimedHostStyles.has(el)) {
+    claimedHostStyles.set(el, {
+      cursor: el.style.cursor,
+      whiteSpace: applyWhiteSpace ? el.style.whiteSpace : null
+    });
+  }
+  applyHostStyles(el);
+};
+var applyHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = "text";
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = "pre-wrap";
+};
+var releaseHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = claimed.cursor;
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = claimed.whiteSpace;
+  claimedHostStyles.delete(el);
+};
 var attachInlineEditing = (el, {
   componentId,
   propPath,
@@ -3463,8 +3494,7 @@ var attachInlineEditing = (el, {
   const syncEditable = () => {
     el.contentEditable = hovering || focused ? mode === "richtext" ? "true" : "plaintext-only" : "false";
   };
-  const previousCursor = el.style.cursor;
-  el.style.cursor = "text";
+  claimHostStyles(el, mode !== "richtext");
   syncEditable();
   let lastValidNumberText = el.innerText.replaceAll(/\n/gm, "");
   const handleInput = () => {
@@ -3542,7 +3572,7 @@ var attachInlineEditing = (el, {
     el.removeEventListener("mouseout", handleMouseOut, true);
     el.removeEventListener("focus", handleFocus);
     el.removeEventListener("blur", handleBlur);
-    el.style.cursor = previousCursor;
+    releaseHostStyles(el);
     el.removeAttribute("contenteditable");
     cleanupPortal?.();
   };
@@ -3608,7 +3638,7 @@ var wireArrayItemEditing = ({
     const mode = inlineEditModeFor(field);
     const registration = wiring.get(target);
     if (registration?.propPath === propPath && registration.mode === mode) {
-      target.style.cursor = "text";
+      applyHostStyles(target);
       continue;
     }
     registration?.cleanup();
@@ -3674,15 +3704,7 @@ var parseStyleString = (cssText) => {
   return style;
 };
 var isEventHandlerAttr2 = (name) => /^on/i.test(name);
-var FIELD_ATTR_PREFIX3 = "data-puck-field-";
-var fieldContentFor = (attribs, fields) => {
-  for (const name of Object.keys(fields)) {
-    if (attribs[`${FIELD_ATTR_PREFIX3}${name}`] !== void 0) return name;
-    if (attribs["data-puck-field-name"] === name) return name;
-  }
-  return void 0;
-};
-var nodeToReact = (node, slots, fields, key) => {
+var nodeToReact = (node, slots, key) => {
   if (node.type === "text") {
     return node.data;
   }
@@ -3713,17 +3735,13 @@ var nodeToReact = (node, slots, fields, key) => {
   if (VOID_ELEMENTS.has(tag)) {
     return (0, import_react22.createElement)(tag, props);
   }
-  const fieldName = fieldContentFor(attribs, fields);
-  if (fieldName !== void 0) {
-    return (0, import_react22.createElement)(tag, props, fields[fieldName]);
-  }
-  const children = el.children.map((child, i) => nodeToReact(child, slots, fields, i)).filter((c) => c !== null);
+  const children = el.children.map((child, i) => nodeToReact(child, slots, i)).filter((c) => c !== null);
   return (0, import_react22.createElement)(tag, props, ...children);
 };
-var htmlToReactTree = (html, slots, fields = {}) => {
+var htmlToReactTree = (html, slots) => {
   if (!html) return null;
   const doc = (0, import_htmlparser22.parseDocument)(html);
-  const children = doc.children.map((child, i) => nodeToReact(child, slots, fields, i)).filter((c) => c !== null);
+  const children = doc.children.map((child, i) => nodeToReact(child, slots, i)).filter((c) => c !== null);
   if (children.length === 0) return null;
   if (children.length === 1) return children[0];
   return (0, import_react22.createElement)(import_react22.Fragment, null, ...children);
@@ -3762,7 +3780,7 @@ var SlotPortal = ({
     [slotStyle]
   );
   (0, import_react23.useEffect)(() => {
-    const el = entry.querySelector(`[data-puck-slot="${cssEscape2(slotName)}"]`);
+    const el = entry.querySelector(`[data-puck-slot="${cssEscape(slotName)}"]`);
     if (el !== lastTarget.current) {
       el?.replaceChildren();
       lastTarget.current = el;
@@ -3780,32 +3798,10 @@ var SlotPortal = ({
   );
 };
 
-// src/lib/design/field-portal.tsx
-init_react_import();
-var import_react24 = require("react");
-var import_react_dom2 = require("react-dom");
-var FieldPortal = ({
-  entry,
-  html,
-  selector,
-  children
-}) => {
-  const [target, setTarget] = (0, import_react24.useState)(null);
-  const lastTarget = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
-    const el = queryScopedFields(entry, selector)[0] ?? null;
-    if (el !== lastTarget.current) {
-      el?.replaceChildren();
-      lastTarget.current = el;
-      setTarget(el);
-    }
-  }, [entry, html, selector]);
-  if (!target) return null;
-  return (0, import_react_dom2.createPortal)(children, target);
-};
-
 // src/lib/design/component.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var DESIGN_COMPONENT = Symbol("puck-ai.designComponent");
+var isDesignComponent = (config) => !!config?.[DESIGN_COMPONENT];
 var streamingValues = /* @__PURE__ */ new Map();
 var instanceKey = (name, instanceId) => `${name}:${typeof instanceId === "string" ? instanceId : ""}`;
 var getRegistrationSlotFields = (reg) => {
@@ -3830,9 +3826,9 @@ function createDesignComponentConfig(registration) {
     registrationStore.apply(registration);
   }
   const slotFields = getRegistrationSlotFields(registration);
-  return {
+  const componentConfig = {
     ...registration.label ? { label: registration.label } : {},
-    fields: { ...slotFields, ...getTransformableFields(registration) },
+    fields: { ...slotFields },
     defaultProps: { ...registration.defaultProps ?? {} },
     resolveData: (data, { trigger }) => {
       if (trigger !== "replace" && trigger !== "insert" && trigger !== "force") {
@@ -3891,6 +3887,8 @@ function createDesignComponentConfig(registration) {
     },
     render: (renderProps) => renderProps.puck?.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorEntry, { ...renderProps }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Entry, { ...renderProps, getPuck: null })
   };
+  componentConfig[DESIGN_COMPONENT] = true;
+  return componentConfig;
   function EditorEntry(renderProps) {
     const getPuck = (0, import_core3.useGetPuck)();
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Entry, { ...renderProps, getPuck });
@@ -3902,11 +3900,11 @@ function createDesignComponentConfig(registration) {
     style,
     ...props
   }) {
-    const getSnapshot = (0, import_react25.useCallback)(
+    const getSnapshot = (0, import_react24.useCallback)(
       () => registrationStore.get(name) ?? registration,
       []
     );
-    const reg = (0, import_react25.useSyncExternalStore)(
+    const reg = (0, import_react24.useSyncExternalStore)(
       registrationStore.subscribe,
       getSnapshot,
       getSnapshot
@@ -3914,10 +3912,10 @@ function createDesignComponentConfig(registration) {
     const html = reg.html ?? "";
     const styles = reg.styles;
     const script = reg.script;
-    const [entryEl, setEntryEl] = (0, import_react25.useState)(null);
-    const scriptRef = (0, import_react25.useRef)(null);
-    const annotations = (0, import_react25.useMemo)(() => getAnnotations(html), [html]);
-    const { attrFields, arrayFields, attrSig, arraySig } = (0, import_react25.useMemo)(() => {
+    const [entryEl, setEntryEl] = (0, import_react24.useState)(null);
+    const scriptRef = (0, import_react24.useRef)(null);
+    const annotations = (0, import_react24.useMemo)(() => getAnnotations(html), [html]);
+    const { attrFields, arrayFields, attrSig, arraySig } = (0, import_react24.useMemo)(() => {
       const attr = [];
       const arrays = [];
       for (const field of annotations.fields) {
@@ -3939,86 +3937,56 @@ function createDesignComponentConfig(registration) {
         arraySig: JSON.stringify(arrays)
       };
     }, [props, annotations]);
-    const nodeFields = (0, import_react25.useMemo)(() => {
-      const out = [];
-      for (const field of annotations.fields) {
-        if (field.binding !== "text") continue;
-        const value = getDeepValue(props, field.name);
-        if (!import_react25.default.isValidElement(value)) continue;
-        out.push({
-          name: field.name,
-          selector: textFieldSelector(field),
-          node: value
-        });
-      }
-      return out;
-    }, [annotations, props]);
-    const storedProps = (0, import_react25.useMemo)(
-      () => getPuck ? getPuck().getItemById(id)?.props : void 0,
-      [getPuck, id, props]
-    );
-    const editableFields = (0, import_react25.useMemo)(() => {
-      const mounted = new Set(nodeFields.map((f) => f.name));
-      return annotations.fields.filter((field) => {
-        if (mounted.has(field.name)) return false;
-        if (field.binding === "array") return true;
-        const type = field.shape?.type;
-        if (type && !isBuiltInFieldType(type)) return false;
-        if (!storedProps) return true;
-        return getDeepValue(props, field.name) === getDeepValue(storedProps, field.name);
-      });
-    }, [annotations, nodeFields, props, storedProps]);
-    const patchedHtml = (0, import_react25.useMemo)(() => {
+    const patchedHtml = (0, import_react24.useMemo)(() => {
       if (puck.isEditing) return html;
       return patchHtmlAnnotations(html, props);
     }, [html, props, puck.isEditing]);
-    const fieldValueAttrs = (0, import_react25.useMemo)(() => {
+    const fieldValueAttrs = (0, import_react24.useMemo)(() => {
       const attrs = {};
       attrs["data-puck-design"] = name;
       for (const field of annotations.fields) {
         const value = getDeepValue(props, field.name);
         if (value === void 0 || value === null) continue;
         if (!isValidFieldName(field.name)) continue;
-        if (import_react25.default.isValidElement(value)) continue;
         attrs[`data-puck-field-value-${field.name}`] = typeof value === "string" || typeof value === "number" ? String(value) : JSON.stringify(value);
       }
       return attrs;
     }, [annotations, props, puck.isEditing]);
-    const editorEntryNode = (0, import_react25.useMemo)(
+    const editorEntryNode = (0, import_react24.useMemo)(
       () => puck.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: setEntryEl }) : null,
       [puck.isEditing]
     );
-    (0, import_react25.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!puck.isEditing || !getPuck) return;
       getPuck().resolveDataById(id, "force");
     }, [reg, puck.isEditing, getPuck, id]);
-    const fieldWiring = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-    const morphed = (0, import_react25.useRef)(null);
-    (0, import_react25.useLayoutEffect)(() => {
+    const fieldWiring = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
+    const morphed = (0, import_react24.useRef)(null);
+    (0, import_react24.useLayoutEffect)(() => {
       if (!puck.isEditing || !entryEl) return;
       if (morphed.current?.el !== entryEl || morphed.current?.html !== html || morphed.current?.attrSig !== attrSig) {
         morphed.current = { el: entryEl, html, attrSig };
         morphHtml(entryEl, html, attrFields);
         for (const el of fieldWiring.current.keys()) {
-          if (el.isConnected) el.style.cursor = "text";
+          if (el.isConnected) applyHostStyles(el);
         }
       }
       syncFieldValues(entryEl, annotations.fields, props);
       if (getPuck) {
-        wireFieldEditing(entryEl, editableFields, fieldWiring.current, {
+        wireFieldEditing(entryEl, annotations.fields, fieldWiring.current, {
           componentId: id,
           getPuck
         });
       }
     });
-    (0, import_react25.useEffect)(
+    (0, import_react24.useEffect)(
       () => () => {
         fieldWiring.current.forEach((cleanup) => cleanup());
         fieldWiring.current.clear();
       },
       []
     );
-    (0, import_react25.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!entryEl || !puck.isEditing) return;
       for (const attr of Array.from(entryEl.attributes)) {
         if ((attr.name === "data-puck-design" || attr.name.startsWith("data-puck-field-value-")) && !(attr.name in fieldValueAttrs)) {
@@ -4031,10 +3999,10 @@ function createDesignComponentConfig(registration) {
         }
       }
     }, [entryEl, fieldValueAttrs]);
-    const appliedArrayHtml = (0, import_react25.useRef)(/* @__PURE__ */ new WeakMap());
-    const arrayItemWiring = (0, import_react25.useRef)({});
-    const appliedArrays = (0, import_react25.useRef)(null);
-    (0, import_react25.useEffect)(() => {
+    const appliedArrayHtml = (0, import_react24.useRef)(/* @__PURE__ */ new WeakMap());
+    const arrayItemWiring = (0, import_react24.useRef)({});
+    const appliedArrays = (0, import_react24.useRef)(null);
+    (0, import_react24.useEffect)(() => {
       if (!puck.isEditing || !entryEl || !getPuck) return;
       if (appliedArrays.current?.el === entryEl && appliedArrays.current?.html === html && appliedArrays.current?.sig === arraySig) {
         return;
@@ -4086,7 +4054,7 @@ function createDesignComponentConfig(registration) {
       id,
       getPuck
     ]);
-    (0, import_react25.useEffect)(
+    (0, import_react24.useEffect)(
       () => () => {
         Object.values(arrayItemWiring.current).forEach(
           (wiring) => wiring.forEach(({ cleanup }) => cleanup())
@@ -4094,7 +4062,7 @@ function createDesignComponentConfig(registration) {
       },
       []
     );
-    (0, import_react25.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!script || !entryEl) return;
       scriptRef.current?.remove();
       const doc = entryEl.ownerDocument;
@@ -4121,30 +4089,16 @@ function createDesignComponentConfig(registration) {
           );
         }
       }
-      const fieldContent = {};
-      for (const { name: name2, node } of nodeFields) {
-        fieldContent[name2] = node;
-      }
       return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         styles && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: styles }),
         style && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: style }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: setEntryEl, ...fieldValueAttrs, children: htmlToReactTree(patchedHtml, slotContent, fieldContent) })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: setEntryEl, ...fieldValueAttrs, children: htmlToReactTree(patchedHtml, slotContent) })
       ] });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
       styles && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: styles }),
       style && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: style }),
       editorEntryNode,
-      entryEl && nodeFields.map(({ name: name2, selector, node }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        FieldPortal,
-        {
-          entry: entryEl,
-          html,
-          selector,
-          children: node
-        },
-        name2
-      )),
       entryEl && annotations.slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         SlotPortal,
         {
@@ -4163,7 +4117,7 @@ function createDesignComponentConfig(registration) {
 
 // src/lib/design/globals.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function getDynamicConfigGlobals(dynamicConfig) {
   if (typeof dynamicConfig !== "object" || dynamicConfig === null) return {};
@@ -4173,13 +4127,15 @@ function getDynamicConfigGlobals(dynamicConfig) {
     ...typeof script === "string" ? { script } : {}
   };
 }
+var INLINE_EDIT_RESET = ":where([data-puck-design] [contenteditable]){overflow-wrap:inherit;line-break:inherit;-webkit-nbsp-mode:inherit}";
 function DesignGlobals({
   styles,
-  script
+  script,
+  isEditing
 }) {
-  const scriptRef = (0, import_react26.useRef)(null);
-  const hostRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
+  const scriptRef = (0, import_react25.useRef)(null);
+  const hostRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (!script) return;
     scriptRef.current?.remove();
     const doc = hostRef.current?.ownerDocument ?? document;
@@ -4193,6 +4149,7 @@ function DesignGlobals({
     };
   }, [script]);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: INLINE_EDIT_RESET }),
     styles && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: styles }),
     script && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: hostRef, style: { display: "none" } })
   ] });
@@ -4205,7 +4162,14 @@ function withDesignGlobals(root) {
   const render = (props) => {
     const { styles, script } = getDynamicConfigGlobals(props._dynamicConfig);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DesignGlobals, { styles, script }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        DesignGlobals,
+        {
+          styles,
+          script,
+          isEditing: props.puck?.isEditing
+        }
+      ),
       userRender ? userRender(props) : props.children
     ] });
   };
@@ -4319,7 +4283,7 @@ function syncDesignComponents(getPuck) {
   ensureDynamicConfigField(config);
   for (const [name, persistedReg] of Object.entries(persisted)) {
     const prev = lastSynced.get(name);
-    if (registrationStore.has(name) && (prev === persistedReg || registrationContentEqual(prev, persistedReg))) {
+    if (registrationStore.has(name) && config.components[name] && (prev === persistedReg || registrationContentEqual(prev, persistedReg))) {
       lastSynced.set(name, persistedReg);
       continue;
     }
@@ -4343,18 +4307,17 @@ function syncDesignComponents(getPuck) {
         };
       }
     }
-    config.components[name].fields = {
-      ...getSlotFields(registration.html ?? ""),
-      ...getTransformableFields(registration)
-    };
+    config.components[name].fields = getSlotFields(registration.html ?? "");
   }
   let hasRemovals = false;
   for (const [name] of registrationStore.getAll()) {
     if (!(name in persisted)) {
       registrationStore.delete(name);
       lastSynced.delete(name);
-      delete config.components[name];
-      hasRemovals = true;
+      if (isDesignComponent(config.components[name])) {
+        delete config.components[name];
+        hasRemovals = true;
+      }
     }
   }
   if (createdSettled) {
@@ -4474,12 +4437,145 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
+// src/lib/capture-screenshot.ts
+init_react_import();
+var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
+
+// src/lib/screenshot-size.ts
+init_react_import();
+var MAX_WEBP_DIMENSION = 16383;
+var CAPTURE_SCALE = 2;
+var getFitRatio = (width, height, dimensionLimit = MAX_WEBP_DIMENSION) => {
+  if (width <= 0 || height <= 0) return 1;
+  return Math.min(1, dimensionLimit / Math.max(width, height));
+};
+var getCaptureScale = (width, height, scale) => scale * getFitRatio(width * scale, height * scale);
+var scaleDimension = (value, ratio) => Math.max(1, Math.floor(value * ratio));
+var getDocumentSize = (root) => {
+  const { body, documentElement } = root.ownerDocument;
+  return {
+    width: Math.max(
+      body?.scrollWidth ?? 0,
+      body?.offsetWidth ?? 0,
+      body?.clientWidth ?? 0,
+      documentElement?.scrollWidth ?? 0,
+      documentElement?.offsetWidth ?? 0,
+      documentElement?.clientWidth ?? 0
+    ),
+    height: Math.max(
+      body?.scrollHeight ?? 0,
+      body?.offsetHeight ?? 0,
+      body?.clientHeight ?? 0,
+      documentElement?.scrollHeight ?? 0,
+      documentElement?.offsetHeight ?? 0,
+      documentElement?.clientHeight ?? 0
+    )
+  };
+};
+
+// src/lib/capture-screenshot.ts
+var editorOnlyClassPrefixes = ["_DraggableComponent--hover", "_ActionBar"];
+var releaseCanvas = (canvas) => {
+  canvas.width = 0;
+  canvas.height = 0;
+};
+var drawScaled = (source, ratio) => {
+  const target = document.createElement("canvas");
+  target.width = scaleDimension(source.width, ratio);
+  target.height = scaleDimension(source.height, ratio);
+  const ctx2 = target.getContext("2d");
+  if (!ctx2) {
+    releaseCanvas(target);
+    return source;
+  }
+  ctx2.imageSmoothingEnabled = true;
+  ctx2.imageSmoothingQuality = "high";
+  ctx2.drawImage(source, 0, 0, target.width, target.height);
+  return target;
+};
+var fitCanvas = (canvas) => {
+  let remaining = getFitRatio(canvas.width, canvas.height);
+  if (remaining >= 1) return canvas;
+  let current = canvas;
+  while (remaining < 0.5) {
+    const next = drawScaled(current, 0.5);
+    if (current !== canvas) releaseCanvas(current);
+    current = next;
+    remaining *= 2;
+  }
+  const fitted = drawScaled(current, remaining);
+  if (current !== canvas) releaseCanvas(current);
+  return fitted;
+};
+var toWebp = (canvas, quality) => new Promise((resolve, reject) => {
+  canvas.toBlob(
+    (blob) => {
+      if (blob && blob.size > 0) {
+        resolve(blob);
+        return;
+      }
+      reject(
+        new Error(
+          `Could not encode a ${canvas.width}x${canvas.height} canvas as WebP`
+        )
+      );
+    },
+    "image/webp",
+    quality
+  );
+});
+var captureScreenshot = async (root, { scale = CAPTURE_SCALE, quality = 0.8, width } = {}) => {
+  const documentSize = getDocumentSize(root);
+  const safeWebPScale = getCaptureScale(
+    width ?? documentSize.width,
+    documentSize.height,
+    scale
+  );
+  const canvas = await (0, import_html2canvas_pro.default)(root, {
+    scale: safeWebPScale,
+    backgroundColor: "#ffffff",
+    ...width === void 0 ? {} : { width, windowWidth: width },
+    foreignObjectRendering: false,
+    imageTimeout: 3e4,
+    logging: false,
+    allowTaint: false,
+    useCORS: true,
+    scrollY: 0,
+    ignoreElements: (el) => Array.from(el.classList).some(
+      (c) => editorOnlyClassPrefixes.some((prefix) => c.startsWith(prefix))
+    )
+  });
+  const fitted = fitCanvas(canvas);
+  try {
+    return await toWebp(fitted, quality);
+  } finally {
+    if (fitted !== canvas) releaseCanvas(fitted);
+    releaseCanvas(canvas);
+  }
+};
+
+// src/lib/client-tool-response.ts
+init_react_import();
+async function postClientToolResponse(host, body) {
+  const response = await fetch(`${host.replace(/\/+$/, "")}/tool`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Client tool endpoint returned ${response.status} ${response.statusText}`.trim()
+    );
+  }
+}
+
 // src/components/Chat/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var q = (0, import_qler.default)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.9.0-canary.d8bdabee" : "unknown";
+var CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE = "Unable to verify the page data. Please enable the `/chat/tool` endpoint on the server and try again.";
+var PLUGIN_AI_VERSION = true ? "0.9.0-canary.fb1abcf5" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4502,28 +4598,32 @@ function Chat2(props) {
   } = chat ?? {};
   const puckDispatch = usePuck((s) => s.dispatch);
   const getPuck = (0, import_core5.useGetPuck)();
-  const localChatId = (0, import_react28.useRef)("");
-  const inputRef = (0, import_react28.useRef)(null);
-  const pluginRef = (0, import_react28.useRef)(null);
-  const [mode, setMode] = (0, import_react28.useState)(defaultMode);
-  const modeRef = (0, import_react28.useRef)(mode);
+  const localChatId = (0, import_react27.useRef)("");
+  const inputRef = (0, import_react27.useRef)(null);
+  const pluginRef = (0, import_react27.useRef)(null);
+  const [mode, setMode] = (0, import_react27.useState)(defaultMode);
+  const modeRef = (0, import_react27.useRef)(mode);
   const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     modeRef.current = mode;
   }, [mode]);
   const puckData = usePuck((s) => s.appState.data);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     syncDesignComponents(getPuck);
   }, [puckData, getPuck]);
-  const [error, setError] = (0, import_react28.useState)();
-  const [userError, setUserError] = (0, import_react28.useState)();
-  const [composerAttachments, setComposerAttachments] = (0, import_react28.useState)([]);
-  const removedAttachmentClientIdsRef = (0, import_react28.useRef)(/* @__PURE__ */ new Set());
-  const uploadControllersRef = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
-  const pendingBuildOpsRef = (0, import_react28.useRef)([]);
-  const [toolStatus, setToolStatus] = (0, import_react28.useState)({});
-  const [subagentState, setSubagentState] = (0, import_react28.useState)({});
-  const attachmentConfig = (0, import_react28.useMemo)(
+  const [error, setError] = (0, import_react27.useState)();
+  const [userError, setUserError] = (0, import_react27.useState)();
+  const clientToolEndpointUnavailableRef = (0, import_react27.useRef)(false);
+  const stopChatRef = (0, import_react27.useRef)(null);
+  const [composerAttachments, setComposerAttachments] = (0, import_react27.useState)([]);
+  const removedAttachmentClientIdsRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
+  const uploadControllersRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
+  const pendingBuildOpsRef = (0, import_react27.useRef)([]);
+  const lastStreamActivityRef = (0, import_react27.useRef)(0);
+  const hiddenSinceRef = (0, import_react27.useRef)(null);
+  const [toolStatus, setToolStatus] = (0, import_react27.useState)({});
+  const [subagentState, setSubagentState] = (0, import_react27.useState)({});
+  const attachmentConfig = (0, import_react27.useMemo)(
     () => ({
       accept: attachments?.accept ?? defaultAttachmentAccept,
       enabled: attachments?.enabled ?? true,
@@ -4533,14 +4633,14 @@ function Chat2(props) {
     }),
     [attachments, host]
   );
-  (0, import_react28.useEffect)(
+  (0, import_react27.useEffect)(
     () => () => {
       uploadControllersRef.current.forEach((controller) => controller.abort());
       uploadControllersRef.current.clear();
     },
     []
   );
-  const deleteAttachment = (0, import_react28.useCallback)(
+  const deleteAttachment = (0, import_react27.useCallback)(
     async (attachmentId) => {
       try {
         await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
@@ -4552,7 +4652,7 @@ function Chat2(props) {
     },
     [attachmentConfig.endpoint]
   );
-  const uploadScreenshot = (0, import_react28.useCallback)(
+  const uploadScreenshot = (0, import_react27.useCallback)(
     async (width, bucketUrl) => {
       try {
         const iframeDocument = document?.getElementById("preview-frame")?.contentDocument?.documentElement ?? null;
@@ -4560,24 +4660,7 @@ function Chat2(props) {
           throw new Error("Preview frame not found");
         }
         await waitForIframeReady(iframeDocument);
-        const canvas = await (0, import_html2canvas_pro.default)(iframeDocument, {
-          scale: 2,
-          backgroundColor: "#ffffff",
-          width,
-          windowWidth: width,
-          foreignObjectRendering: false,
-          imageTimeout: 3e4,
-          logging: false,
-          allowTaint: false,
-          useCORS: true,
-          scrollY: 0,
-          ignoreElements: (el) => Array.from(el.classList).some(
-            (c) => c.startsWith("_DraggableComponent--hover") || c.startsWith("_ActionBar")
-          )
-        });
-        const image = canvas.toDataURL("image/webp", 0.8);
-        const imageResponse = await fetch(image);
-        const blob = await imageResponse.blob();
+        const blob = await captureScreenshot(iframeDocument, { width });
         const uploadResponse = await fetch(bucketUrl, {
           method: "PUT",
           body: blob
@@ -4624,15 +4707,50 @@ function Chat2(props) {
     BUILD_OP_DEBOUNCE_MS,
     { maxWait: BUILD_OP_DEBOUNCE_MS }
   );
-  const queueBuildOp = (0, import_react28.useCallback)(
+  const queueBuildOp = (0, import_react27.useCallback)(
     (operation) => {
       pendingBuildOpsRef.current.push(operation);
       debouncedFlushBuildOps();
     },
     [debouncedFlushBuildOps]
   );
-  const processData = (0, import_react28.useCallback)(
+  const handleClientToolEndpointUnavailable = (0, import_react27.useCallback)(() => {
+    if (clientToolEndpointUnavailableRef.current) return;
+    clientToolEndpointUnavailableRef.current = true;
+    setError(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    console.error(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    setToolStatus((current) => {
+      let changed = false;
+      const next = {};
+      for (const [id, toolState] of Object.entries(current)) {
+        if (toolState.loading) {
+          changed = true;
+          next[id] = {
+            ...toolState,
+            loading: false,
+            label: "Verification unavailable"
+          };
+        } else {
+          next[id] = toolState;
+        }
+      }
+      return changed ? next : current;
+    });
+    stopChatRef.current?.();
+  }, []);
+  const sendClientToolResponse = (0, import_react27.useCallback)(
+    async (body) => {
+      try {
+        await postClientToolResponse(host, body);
+      } catch {
+        handleClientToolEndpointUnavailable();
+      }
+    },
+    [handleClientToolEndpointUnavailable, host]
+  );
+  const processData = (0, import_react27.useCallback)(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4663,13 +4781,9 @@ function Chat2(props) {
             debouncedFlushBuildOps.flush();
             q.wait().then(() => {
               const { appState } = getPuck();
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: appState.data }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: appState.data }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
@@ -4686,22 +4800,7 @@ function Chat2(props) {
                 throw new Error("Preview frame not found");
               }
               await waitForIframeReady(iframeDocument);
-              const canvas = await (0, import_html2canvas_pro.default)(iframeDocument, {
-                scale: 2,
-                backgroundColor: "#ffffff",
-                foreignObjectRendering: false,
-                imageTimeout: 3e4,
-                logging: false,
-                allowTaint: false,
-                useCORS: true,
-                scrollY: 0,
-                ignoreElements: (el) => Array.from(el.classList).some(
-                  (c) => c.startsWith("_DraggableComponent--hover") || c.startsWith("_ActionBar")
-                )
-              });
-              const image = canvas.toDataURL("image/webp", 0.8);
-              const imageResponse = await fetch(image);
-              const blob = await imageResponse.blob();
+              const blob = await captureScreenshot(iframeDocument);
               const uploadResponse = await fetch(putUrl, {
                 method: "PUT",
                 body: blob
@@ -4711,16 +4810,16 @@ function Chat2(props) {
                   `Upload failed with status ${uploadResponse.status}`
                 );
               }
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: { sizeBytes: blob.size } }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: blob.size } }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: 0 } }]
+              });
             });
           }
           return;
@@ -4764,6 +4863,7 @@ function Chat2(props) {
       getPuck,
       puckDispatch,
       queueBuildOp,
+      sendClientToolResponse,
       uploadScreenshot
     ]
   );
@@ -4833,12 +4933,14 @@ function Chat2(props) {
       if (BENCHMARK) {
         console.timeEnd("chat");
       }
-      setError(e.message);
+      if (!clientToolEndpointUnavailableRef.current) {
+        setError(e.message);
+      }
     },
     onFinish: (options) => {
       debouncedFlushBuildOps.flush();
       q.wait().then(() => {
-        if (!options.isAbort) {
+        if (!options.isAbort || clientToolEndpointUnavailableRef.current) {
           puckDispatch({
             type: "set",
             state: getPuck().appState,
@@ -4853,18 +4955,69 @@ function Chat2(props) {
       });
     }
   });
-  (0, import_react28.useEffect)(
-    () => () => {
+  (0, import_react27.useEffect)(() => {
+    stopChatRef.current = stop;
+    return () => {
+      stopChatRef.current = null;
       stop();
-    },
-    [stop]
-  );
-  const [forcedStatus, setForcedStatus] = (0, import_react28.useState)();
-  const resolvedStatus = (0, import_react28.useMemo)(
+    };
+  }, [stop]);
+  const statusRef = (0, import_react27.useRef)(status);
+  (0, import_react27.useEffect)(() => {
+    statusRef.current = status;
+  }, [status]);
+  (0, import_react27.useEffect)(() => {
+    lastStreamActivityRef.current = Date.now();
+  }, [messages]);
+  (0, import_react27.useEffect)(() => {
+    const FROZEN_HIDDEN_MS = 3 * 6e4;
+    const RESUME_GRACE_MS = 12e3;
+    const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
+    let graceTimer;
+    const recoverIfSevered = () => {
+      if (!isStreaming()) return;
+      if (Date.now() - lastStreamActivityRef.current < RESUME_GRACE_MS) return;
+      stop();
+      setToolStatus((current) => {
+        let changed = false;
+        const next = {};
+        for (const [id, toolState] of Object.entries(current)) {
+          if (toolState.loading) {
+            changed = true;
+            next[id] = { ...toolState, loading: false, label: "Interrupted" };
+          } else {
+            next[id] = toolState;
+          }
+        }
+        return changed ? next : current;
+      });
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        hiddenSinceRef.current = isStreaming() ? Date.now() : null;
+        return;
+      }
+      const hiddenSince = hiddenSinceRef.current;
+      hiddenSinceRef.current = null;
+      if (graceTimer) clearTimeout(graceTimer);
+      if (hiddenSince === null || Date.now() - hiddenSince < FROZEN_HIDDEN_MS) {
+        return;
+      }
+      lastStreamActivityRef.current = 0;
+      graceTimer = setTimeout(recoverIfSevered, RESUME_GRACE_MS);
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      if (graceTimer) clearTimeout(graceTimer);
+    };
+  }, [stop]);
+  const [forcedStatus, setForcedStatus] = (0, import_react27.useState)();
+  const resolvedStatus = (0, import_react27.useMemo)(
     () => forcedStatus ?? status,
     [status, forcedStatus]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!scrollTrackingId) return;
     dispatchScrollTrackingEvent({
       id: scrollTrackingId,
@@ -4877,7 +5030,7 @@ function Chat2(props) {
       });
     };
   }, [resolvedStatus, scrollTrackingId]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     window.__PUCK_AI = {
       processData,
       setMessages,
@@ -4909,6 +5062,8 @@ function Chat2(props) {
     if (!text && readyAttachments.length === 0) {
       return false;
     }
+    clientToolEndpointUnavailableRef.current = false;
+    setError("");
     setUserError("");
     if (chat?.onSubmit) {
       try {
@@ -5086,7 +5241,7 @@ function Chat2(props) {
     if (!target?.attachmentId) return;
     await deleteAttachment(target.attachmentId);
   };
-  const messagesWithStatuses = (0, import_react28.useMemo)(() => {
+  const messagesWithStatuses = (0, import_react27.useMemo)(() => {
     return messages.map((msg) => {
       return {
         ...msg,
@@ -5148,6 +5303,7 @@ function Chat2(props) {
       ),
       error,
       handleRetry: () => {
+        clientToolEndpointUnavailableRef.current = false;
         setError("");
         regenerate();
       },
@@ -5270,8 +5426,8 @@ function AttachmentComposer({
   maxFiles,
   onChange
 }) {
-  const id = (0, import_react28.useId)();
-  const inputId = (0, import_react28.useMemo)(() => `attachment-input-${id}`, []);
+  const id = (0, import_react27.useId)();
+  const inputId = (0, import_react27.useMemo)(() => `attachment-input-${id}`, []);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName18("attachmentControls"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
@@ -5371,7 +5527,7 @@ function isScrolledIntoView(el) {
 
 // src/components/ScrollTracking/ScrollTracking.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // src/lib/scroll-into-view-local.ts
 init_react_import();
@@ -5394,9 +5550,9 @@ function scrollIntoViewLocal(el, win, behavior = "smooth") {
 
 // src/lib/use-frame-mutation-observer.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react28 = require("react");
 function useFrameMutationObserver(callback) {
-  return (0, import_react29.useCallback)(() => {
+  return (0, import_react28.useCallback)(() => {
     const frame = document?.getElementById(
       "preview-frame"
     );
@@ -5441,9 +5597,9 @@ var ScrollTracking = ({
   children,
   trackingId
 }) => {
-  const followedRefs = (0, import_react30.useRef)([]);
-  const enabledRef = (0, import_react30.useRef)(false);
-  (0, import_react30.useEffect)(() => {
+  const followedRefs = (0, import_react29.useRef)([]);
+  const enabledRef = (0, import_react29.useRef)(false);
+  (0, import_react29.useEffect)(() => {
     return subscribeToScrollTrackingEvents(({ id, enabled }) => {
       if (id !== trackingId) return;
       enabledRef.current = enabled;
@@ -5462,7 +5618,7 @@ var ScrollTracking = ({
       });
     }
   });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     follow();
   }, [follow]);
   return children;
@@ -5475,7 +5631,7 @@ var import_core7 = require("@puckeditor/core");
 // src/components/ManageComponents/index.tsx
 init_react_import();
 var import_core6 = require("@puckeditor/core");
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/ManageComponents/styles.module.css#css-module
 init_react_import();
@@ -5484,7 +5640,7 @@ var styles_module_default10 = { "ManageComponents-cta": "_ManageComponents-cta_x
 // src/components/ManageComponents/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var cx10 = getClassNameFactory2("ManageComponents", styles_module_default10);
-var useRegistrations = () => (0, import_react31.useSyncExternalStore)(
+var useRegistrations = () => (0, import_react30.useSyncExternalStore)(
   registrationStore.subscribe,
   () => registrationStore.getAll(),
   () => registrationStore.getAll()
@@ -5492,9 +5648,9 @@ var useRegistrations = () => (0, import_react31.useSyncExternalStore)(
 function ManageModalContent({ onClose }) {
   const getPuck = (0, import_core6.useGetPuck)();
   const { visible, setVisible } = useModal();
-  const [confirmTarget, setConfirmTarget] = (0, import_react31.useState)(null);
+  const [confirmTarget, setConfirmTarget] = (0, import_react30.useState)(null);
   const entries = useRegistrations();
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!visible) onClose();
   }, [visible, onClose]);
   const handleDelete = (name) => {
@@ -5549,9 +5705,9 @@ function ManageModalContent({ onClose }) {
   ] }) });
 }
 function ManageComponentsCta() {
-  const [open, setOpen] = (0, import_react31.useState)(false);
+  const [open, setOpen] = (0, import_react30.useState)(false);
   const entries = useRegistrations();
-  const handleClose = (0, import_react31.useCallback)(() => setOpen(false), []);
+  const handleClose = (0, import_react30.useCallback)(() => setOpen(false), []);
   if (entries.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { className: cx10("cta"), onClick: () => setOpen(true), type: "button", children: [