@puckeditor/plugin-ai 0.8.3-canary.4e864c39 → 0.8.3-canary.89ddeea1

package/dist/index.js

@@ -3420,6 +3420,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,
@@ -3432,8 +3455,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 = () => {
@@ -3511,7 +3533,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?.();
   };
@@ -3577,7 +3599,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();
@@ -3903,7 +3925,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);
@@ -4062,9 +4084,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 = (0, import_react25.useRef)(null);
   const hostRef = (0, import_react25.useRef)(null);
@@ -4082,6 +4106,7 @@ function DesignGlobals({
     };
   }, [script]);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: INLINE_EDIT_RESET }),
     styles && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: styles }),
     script && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: hostRef, style: { display: "none" } })
   ] });
@@ -4094,7 +4119,14 @@ function withDesignGlobals(root) {
   const render = (props) => {
     const { styles, script } = getDynamicConfigGlobals(props._dynamicConfig);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DesignGlobals, { styles, script }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        DesignGlobals,
+        {
+          styles,
+          script,
+          isEditing: props.puck?.isEditing
+        }
+      ),
       userRender ? userRender(props) : props.children
     ] });
   };
@@ -4365,7 +4397,7 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var q = (0, import_qler.default)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.3-canary.4e864c39" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.8.3-canary.89ddeea1" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4407,6 +4439,8 @@ function Chat2(props) {
   const removedAttachmentClientIdsRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
   const uploadControllersRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
   const pendingBuildOpsRef = (0, import_react27.useRef)([]);
+  const lastStreamActivityRef = (0, import_react27.useRef)(0);
+  const hiddenSinceRef = (0, import_react27.useRef)(null);
   const [toolStatus, setToolStatus] = (0, import_react27.useState)({});
   const [subagentState, setSubagentState] = (0, import_react27.useState)({});
   const attachmentConfig = (0, import_react27.useMemo)(
@@ -4519,6 +4553,7 @@ function Chat2(props) {
   );
   const processData = (0, import_react27.useCallback)(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4745,6 +4780,56 @@ function Chat2(props) {
     },
     [stop]
   );
+  const statusRef = (0, import_react27.useRef)(status);
+  (0, import_react27.useEffect)(() => {
+    statusRef.current = status;
+  }, [status]);
+  (0, import_react27.useEffect)(() => {
+    lastStreamActivityRef.current = Date.now();
+  }, [messages]);
+  (0, import_react27.useEffect)(() => {
+    const FROZEN_HIDDEN_MS = 3 * 6e4;
+    const RESUME_GRACE_MS = 12e3;
+    const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
+    let graceTimer;
+    const recoverIfSevered = () => {
+      if (!isStreaming()) return;
+      if (Date.now() - lastStreamActivityRef.current < RESUME_GRACE_MS) return;
+      stop();
+      setToolStatus((current) => {
+        let changed = false;
+        const next = {};
+        for (const [id, toolState] of Object.entries(current)) {
+          if (toolState.loading) {
+            changed = true;
+            next[id] = { ...toolState, loading: false, label: "Interrupted" };
+          } else {
+            next[id] = toolState;
+          }
+        }
+        return changed ? next : current;
+      });
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        hiddenSinceRef.current = isStreaming() ? Date.now() : null;
+        return;
+      }
+      const hiddenSince = hiddenSinceRef.current;
+      hiddenSinceRef.current = null;
+      if (graceTimer) clearTimeout(graceTimer);
+      if (hiddenSince === null || Date.now() - hiddenSince < FROZEN_HIDDEN_MS) {
+        return;
+      }
+      lastStreamActivityRef.current = 0;
+      graceTimer = setTimeout(recoverIfSevered, RESUME_GRACE_MS);
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      if (graceTimer) clearTimeout(graceTimer);
+    };
+  }, [stop]);
   const [forcedStatus, setForcedStatus] = (0, import_react27.useState)();
   const resolvedStatus = (0, import_react27.useMemo)(
     () => forcedStatus ?? status,

package/dist/index.mjs

@@ -3452,6 +3452,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 +3487,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 +3565,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 +3631,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();
@@ -3935,7 +3957,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 +4116,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 +4138,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 +4151,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
     ] });
   };
@@ -4397,7 +4429,7 @@ import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-r
 var q = qler();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.3-canary.4e864c39" : "unknown";
+var PLUGIN_AI_VERSION = true ? "0.8.3-canary.89ddeea1" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4439,6 +4471,8 @@ function Chat2(props) {
   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(
@@ -4551,6 +4585,7 @@ function Chat2(props) {
   );
   const processData = useCallback6(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4777,6 +4812,56 @@ function Chat2(props) {
     },
     [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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.8.3-canary.4e864c39",
+  "version": "0.8.3-canary.89ddeea1",
   "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.4e864c39",
-    "@puckeditor/platform-types": "0.8.3-canary.4e864c39",
-    "eslint-config-custom": "0.8.3-canary.4e864c39",
-    "reducer": "0.8.3-canary.4e864c39",
-    "tsconfig": "0.8.3-canary.4e864c39",
-    "tsup-config": "0.8.3-canary.4e864c39"
+    "@puckeditor/ai-types": "0.8.3-canary.89ddeea1",
+    "@puckeditor/platform-types": "0.8.3-canary.89ddeea1",
+    "eslint-config-custom": "0.8.3-canary.89ddeea1",
+    "reducer": "0.8.3-canary.89ddeea1",
+    "tsconfig": "0.8.3-canary.89ddeea1",
+    "tsup-config": "0.8.3-canary.89ddeea1"
   },
   "peerDependencies": {
     "@puckeditor/core": "^0",