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

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;
@@ -3452,6 +3491,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,
@@ -3464,8 +3526,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 = () => {
@@ -3543,7 +3604,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?.();
   };
@@ -3609,7 +3670,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();
@@ -3751,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;
@@ -3935,7 +3996,7 @@ function createDesignComponentConfig(registration) {
         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);
@@ -4094,9 +4155,11 @@ 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 = useRef12(null);
   const hostRef = useRef12(null);
@@ -4114,6 +4177,7 @@ function DesignGlobals({
     };
   }, [script]);
   return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    isEditing && /* @__PURE__ */ jsx33("style", { children: INLINE_EDIT_RESET }),
     styles && /* @__PURE__ */ jsx33("style", { children: styles }),
     script && /* @__PURE__ */ jsx33("div", { ref: hostRef, style: { display: "none" } })
   ] });
@@ -4126,7 +4190,14 @@ function withDesignGlobals(root) {
   const render = (props) => {
     const { styles, script } = getDynamicConfigGlobals(props._dynamicConfig);
     return /* @__PURE__ */ jsxs19(Fragment8, { children: [
-      /* @__PURE__ */ jsx33(DesignGlobals, { styles, script }),
+      /* @__PURE__ */ jsx33(
+        DesignGlobals,
+        {
+          styles,
+          script,
+          isEditing: props.puck?.isEditing
+        }
+      ),
       userRender ? userRender(props) : props.children
     ] });
   };
@@ -4392,12 +4463,145 @@ 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) {
+  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
 import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var q = qler();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.3-canary.fcc3f680" : "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.8.3" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4435,10 +4639,14 @@ function Chat2(props) {
   }, [puckData, getPuck]);
   const [error, setError] = useState16();
   const [userError, setUserError] = useState16();
+  const clientToolEndpointUnavailableRef = useRef13(false);
+  const stopChatRef = useRef13(null);
   const [composerAttachments, setComposerAttachments] = useState16([]);
   const removedAttachmentClientIdsRef = useRef13(/* @__PURE__ */ new Set());
   const uploadControllersRef = useRef13(/* @__PURE__ */ new Map());
   const pendingBuildOpsRef = useRef13([]);
+  const lastStreamActivityRef = useRef13(0);
+  const hiddenSinceRef = useRef13(null);
   const [toolStatus, setToolStatus] = useState16({});
   const [subagentState, setSubagentState] = useState16({});
   const attachmentConfig = useMemo6(
@@ -4478,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
@@ -4549,8 +4740,43 @@ function Chat2(props) {
     },
     [debouncedFlushBuildOps]
   );
+  const handleClientToolEndpointUnavailable = useCallback6(() => {
+    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 = useCallback6(
+    async (body) => {
+      try {
+        await postClientToolResponse(host, body);
+      } catch {
+        handleClientToolEndpointUnavailable();
+      }
+    },
+    [handleClientToolEndpointUnavailable, host]
+  );
   const processData = useCallback6(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4581,13 +4807,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);
@@ -4604,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
@@ -4629,16 +4836,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;
@@ -4682,6 +4889,7 @@ function Chat2(props) {
       getPuck,
       puckDispatch,
       queueBuildOp,
+      sendClientToolResponse,
       uploadScreenshot
     ]
   );
@@ -4751,12 +4959,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,
@@ -4771,12 +4981,63 @@ function Chat2(props) {
       });
     }
   });
-  useEffect13(
-    () => () => {
+  useEffect13(() => {
+    stopChatRef.current = stop;
+    return () => {
+      stopChatRef.current = null;
       stop();
-    },
-    [stop]
-  );
+    };
+  }, [stop]);
+  const statusRef = useRef13(status);
+  useEffect13(() => {
+    statusRef.current = status;
+  }, [status]);
+  useEffect13(() => {
+    lastStreamActivityRef.current = Date.now();
+  }, [messages]);
+  useEffect13(() => {
+    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] = useState16();
   const resolvedStatus = useMemo6(
     () => forcedStatus ?? status,
@@ -4827,6 +5088,8 @@ function Chat2(props) {
     if (!text && readyAttachments.length === 0) {
       return false;
     }
+    clientToolEndpointUnavailableRef.current = false;
+    setError("");
     setUserError("");
     if (chat?.onSubmit) {
       try {
@@ -5066,6 +5329,7 @@ function Chat2(props) {
       ),
       error,
       handleRetry: () => {
+        clientToolEndpointUnavailableRef.current = false;
         setError("");
         regenerate();
       },