@puckeditor/plugin-ai 0.8.3-canary.fb947b91 → 0.8.3

package/dist/index.js

@@ -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
@@ -2550,147 +2549,16 @@ 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-";
@@ -2738,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;
@@ -2838,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);
@@ -2866,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) {
@@ -2881,6 +2763,9 @@ 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 (shape.type === "richtext") {
         acc.fields.push({ name: name2, binding: "text", shape, format: "json" });
@@ -2935,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) : {};
@@ -3028,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;
@@ -3177,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;
@@ -3209,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;
@@ -3281,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) => {
@@ -3298,6 +3183,160 @@ var getSlotFields = (html) => Object.fromEntries(
   getAnnotations(html).slots.map((slot) => [slot.name, toSlotField(slot)])
 );
 
+// 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 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
 init_react_import();
 var RegistrationStore = class {
@@ -3371,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]");
@@ -3379,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;
@@ -3394,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;
@@ -3741,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;
@@ -4392,6 +4431,123 @@ 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) {
@@ -4413,7 +4569,7 @@ var q = (0, import_qler.default)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
 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.8.3-canary.fb947b91" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.8.3" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4498,24 +4654,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
@@ -4655,22 +4794,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
@@ -4686,6 +4810,10 @@ function Chat2(props) {
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: 0 } }]
+              });
             });
           }
           return;

package/dist/index.mjs

@@ -2510,7 +2510,6 @@ function ExamplePrompt({
 // src/components/Chat/index.tsx
 var import_reducer = __toESM(require_dist());
 import qler from "qler";
-import html2canvas from "html2canvas-pro";
 import { useDebouncedCallback } from "use-debounce";
 
 // src/lib/scroll-tracking-events.ts
@@ -2582,147 +2581,16 @@ import {
 
 // 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();
 import { parseDocument } from "htmlparser2";
 import { appendChild, getInnerHTML, getOuterHTML, textContent } from "domutils";
 import { Text } from "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-";
@@ -2770,6 +2638,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;
@@ -2870,6 +2751,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);
@@ -2898,8 +2780,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) {
@@ -2913,6 +2795,9 @@ 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 (shape.type === "richtext") {
         acc.fields.push({ name: name2, binding: "text", shape, format: "json" });
@@ -2967,6 +2852,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) : {};
@@ -3060,7 +2948,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;
@@ -3209,21 +3097,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;
@@ -3241,6 +3124,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;
@@ -3313,7 +3199,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) => {
@@ -3330,6 +3215,160 @@ var getSlotFields = (html) => Object.fromEntries(
   getAnnotations(html).slots.map((slot) => [slot.name, toSlotField(slot)])
 );
 
+// 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 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
 init_react_import();
 var RegistrationStore = class {
@@ -3403,7 +3442,7 @@ init_react_import();
 import { registerOverlayPortal, setDeep } from "@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]");
@@ -3411,7 +3450,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;
@@ -3426,7 +3465,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;
@@ -3773,7 +3812,7 @@ var SlotPortal = ({
     [slotStyle]
   );
   useEffect10(() => {
-    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;
@@ -4424,6 +4463,123 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
+// src/lib/capture-screenshot.ts
+init_react_import();
+import html2canvas from "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 html2canvas(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) {
@@ -4445,7 +4601,7 @@ var q = qler();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
 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.8.3-canary.fb947b91" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.8.3" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4530,24 +4686,7 @@ function Chat2(props) {
           throw new Error("Preview frame not found");
         }
         await waitForIframeReady(iframeDocument);
-        const canvas = await html2canvas(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
@@ -4687,22 +4826,7 @@ function Chat2(props) {
                 throw new Error("Preview frame not found");
               }
               await waitForIframeReady(iframeDocument);
-              const canvas = await html2canvas(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
@@ -4718,6 +4842,10 @@ function Chat2(props) {
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: 0 } }]
+              });
             });
           }
           return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.8.3-canary.fb947b91",
+  "version": "0.8.3",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": {
     "type": "git",
@@ -52,12 +52,12 @@
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "vitest": "^4.1.0",
-    "@puckeditor/ai-types": "0.8.3-canary.fb947b91",
-    "tsup-config": "0.8.3-canary.fb947b91",
-    "reducer": "0.8.3-canary.fb947b91",
-    "tsconfig": "0.8.3-canary.fb947b91",
-    "@puckeditor/platform-types": "0.8.3-canary.fb947b91",
-    "eslint-config-custom": "0.8.3-canary.fb947b91"
+    "@puckeditor/ai-types": "0.8.3",
+    "@puckeditor/platform-types": "0.8.3",
+    "eslint-config-custom": "0.8.3",
+    "reducer": "0.8.3",
+    "tsconfig": "0.8.3",
+    "tsup-config": "0.8.3"
   },
   "peerDependencies": {
     "@puckeditor/core": "^0",