@puckeditor/plugin-ai 0.4.0-canary.fb6e09c3 → 0.4.0

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LanguageModelUsage, UIMessage, DataUIPart, ChatStatus } from 'ai';
 import { PuckAction, Data } from '@measured/puck';
@@ -70,7 +71,6 @@ type JSONSchema = {
 
 type ComponentAiParams = {
   instructions?: string;
-  schema?: JSONSchema;
   defaultZone?: { allow?: string[]; disallow?: string[]; disabled?: boolean };
 };
 
@@ -184,6 +184,7 @@ type AiPluginProps = {
             onClick?: () => void;
         }[];
     };
+    scrollTracking?: boolean;
 };
 declare global {
     interface Window {
@@ -201,6 +202,11 @@ declare function createAiPlugin(opts?: AiPluginProps): {
     render: () => react_jsx_runtime.JSX.Element;
     icon: react_jsx_runtime.JSX.Element;
     mobilePanelHeight: "min-content";
+    overrides: {
+        preview: ({ children }: {
+            children: react.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
+    };
 };
 
 export { createAiPlugin };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LanguageModelUsage, UIMessage, DataUIPart, ChatStatus } from 'ai';
 import { PuckAction, Data } from '@measured/puck';
@@ -70,7 +71,6 @@ type JSONSchema = {
 
 type ComponentAiParams = {
   instructions?: string;
-  schema?: JSONSchema;
   defaultZone?: { allow?: string[]; disallow?: string[]; disabled?: boolean };
 };
 
@@ -184,6 +184,7 @@ type AiPluginProps = {
             onClick?: () => void;
         }[];
     };
+    scrollTracking?: boolean;
 };
 declare global {
     interface Window {
@@ -201,6 +202,11 @@ declare function createAiPlugin(opts?: AiPluginProps): {
     render: () => react_jsx_runtime.JSX.Element;
     icon: react_jsx_runtime.JSX.Element;
     mobilePanelHeight: "min-content";
+    overrides: {
+        preview: ({ children }: {
+            children: react.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
+    };
 };
 
 export { createAiPlugin };

package/dist/index.js

@@ -1750,7 +1750,7 @@ function Placeholder({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName17("placeholder"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Bot, { size: "24" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Use AI to build a page using the available blocks" }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName17("actions"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
@@ -1783,15 +1783,111 @@ function isScrolledIntoView(el) {
   return elemTop >= 0 && elemBottom <= window.innerHeight;
 }
 
+// src/components/ScrollTracking/ScrollTracking.tsx
+init_react_import();
+var import_react24 = require("react");
+
+// src/lib/scroll-into-view-local.ts
+init_react_import();
+function scrollIntoViewLocal(el, win, behavior = "smooth") {
+  const scroller = el.ownerDocument?.scrollingElement || el.ownerDocument?.documentElement;
+  const rect = el.getBoundingClientRect();
+  const vpH = win.innerHeight;
+  const current = scroller.scrollTop;
+  const offset = win.innerHeight / 2;
+  let targetTop = current;
+  if (rect.top < 0) {
+    targetTop = current + rect.top;
+  } else if (rect.bottom > vpH) {
+    targetTop = current + (rect.bottom - vpH);
+  }
+  if (targetTop !== current) {
+    scroller.scrollTo({ top: targetTop + offset, behavior });
+  }
+}
+
+// src/lib/use-frame-mutation-observer.ts
+init_react_import();
+var import_react23 = require("react");
+function useFrameMutationObserver(callback) {
+  return (0, import_react23.useCallback)(() => {
+    const frame = document?.getElementById(
+      "preview-frame"
+    );
+    if (!frame) return;
+    let observer = null;
+    const win = frame.contentWindow;
+    let enabled = true;
+    const disable = () => {
+      enabled = false;
+    };
+    const attachObserver = () => {
+      const win2 = frame.contentWindow;
+      const doc = frame.contentDocument || win2?.document;
+      if (!win2 || !doc) return;
+      const target = doc.querySelector("#frame-root > div");
+      if (!target) return;
+      observer = new MutationObserver((entries) => {
+        if (enabled) {
+          callback(entries, win2);
+        }
+      });
+      observer?.observe(target, { childList: true, subtree: true });
+      win2.addEventListener("pointerdown", disable);
+      win2.addEventListener("mousewheel", disable);
+    };
+    if (frame.contentDocument?.readyState === "complete") {
+      attachObserver();
+    } else {
+      frame.addEventListener("load", attachObserver, { once: true });
+    }
+    return () => {
+      frame.removeEventListener("load", attachObserver);
+      win?.removeEventListener("pointerdown", disable);
+      win?.removeEventListener("mousewheel", disable);
+      observer?.disconnect();
+    };
+  }, [callback]);
+}
+
+// src/components/ScrollTracking/ScrollTracking.tsx
+var ScrollTracking = ({ children }) => {
+  const followedRefs = (0, import_react24.useRef)([]);
+  const follow = useFrameMutationObserver((records, win) => {
+    if (records.length > 0) {
+      const lastRecord = records[records.length - 1];
+      if (followedRefs.current.includes(lastRecord.target)) return;
+      followedRefs.current.push(lastRecord.target);
+      requestAnimationFrame(() => {
+        const el = lastRecord.target;
+        scrollIntoViewLocal(el, win);
+      });
+    }
+  });
+  (0, import_react24.useEffect)(() => {
+    follow();
+  }, [follow]);
+  return children;
+};
+
 // src/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function createAiPlugin(opts) {
+  const { scrollTracking = true, ...rest } = opts || {};
   return {
     label: "AI",
     name: "ai",
-    render: () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Chat2, { ...opts }),
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Chat2, { ...rest }),
     icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Bot, {}),
-    mobilePanelHeight: "min-content"
+    mobilePanelHeight: "min-content",
+    overrides: {
+      preview: ({ children }) => {
+        if (scrollTracking) {
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollTracking, { children });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+      }
+    }
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1748,7 +1748,7 @@ function Placeholder({
   };
   return /* @__PURE__ */ jsxs14("div", { className: getClassName17("placeholder"), children: [
     /* @__PURE__ */ jsx27(Bot, { size: "24" }),
-    /* @__PURE__ */ jsx27("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ jsx27("div", { children: "Use AI to build a page using the available blocks" }),
     /* @__PURE__ */ jsxs14("div", { className: getClassName17("actions"), children: [
       /* @__PURE__ */ jsx27(
         "button",
@@ -1781,15 +1781,111 @@ function isScrolledIntoView(el) {
   return elemTop >= 0 && elemBottom <= window.innerHeight;
 }
 
+// src/components/ScrollTracking/ScrollTracking.tsx
+init_react_import();
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
+
+// src/lib/scroll-into-view-local.ts
+init_react_import();
+function scrollIntoViewLocal(el, win, behavior = "smooth") {
+  const scroller = el.ownerDocument?.scrollingElement || el.ownerDocument?.documentElement;
+  const rect = el.getBoundingClientRect();
+  const vpH = win.innerHeight;
+  const current = scroller.scrollTop;
+  const offset = win.innerHeight / 2;
+  let targetTop = current;
+  if (rect.top < 0) {
+    targetTop = current + rect.top;
+  } else if (rect.bottom > vpH) {
+    targetTop = current + (rect.bottom - vpH);
+  }
+  if (targetTop !== current) {
+    scroller.scrollTo({ top: targetTop + offset, behavior });
+  }
+}
+
+// src/lib/use-frame-mutation-observer.ts
+init_react_import();
+import { useCallback as useCallback5 } from "react";
+function useFrameMutationObserver(callback) {
+  return useCallback5(() => {
+    const frame = document?.getElementById(
+      "preview-frame"
+    );
+    if (!frame) return;
+    let observer = null;
+    const win = frame.contentWindow;
+    let enabled = true;
+    const disable = () => {
+      enabled = false;
+    };
+    const attachObserver = () => {
+      const win2 = frame.contentWindow;
+      const doc = frame.contentDocument || win2?.document;
+      if (!win2 || !doc) return;
+      const target = doc.querySelector("#frame-root > div");
+      if (!target) return;
+      observer = new MutationObserver((entries) => {
+        if (enabled) {
+          callback(entries, win2);
+        }
+      });
+      observer?.observe(target, { childList: true, subtree: true });
+      win2.addEventListener("pointerdown", disable);
+      win2.addEventListener("mousewheel", disable);
+    };
+    if (frame.contentDocument?.readyState === "complete") {
+      attachObserver();
+    } else {
+      frame.addEventListener("load", attachObserver, { once: true });
+    }
+    return () => {
+      frame.removeEventListener("load", attachObserver);
+      win?.removeEventListener("pointerdown", disable);
+      win?.removeEventListener("mousewheel", disable);
+      observer?.disconnect();
+    };
+  }, [callback]);
+}
+
+// src/components/ScrollTracking/ScrollTracking.tsx
+var ScrollTracking = ({ children }) => {
+  const followedRefs = useRef9([]);
+  const follow = useFrameMutationObserver((records, win) => {
+    if (records.length > 0) {
+      const lastRecord = records[records.length - 1];
+      if (followedRefs.current.includes(lastRecord.target)) return;
+      followedRefs.current.push(lastRecord.target);
+      requestAnimationFrame(() => {
+        const el = lastRecord.target;
+        scrollIntoViewLocal(el, win);
+      });
+    }
+  });
+  useEffect10(() => {
+    follow();
+  }, [follow]);
+  return children;
+};
+
 // src/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28 } from "react/jsx-runtime";
 function createAiPlugin(opts) {
+  const { scrollTracking = true, ...rest } = opts || {};
   return {
     label: "AI",
     name: "ai",
-    render: () => /* @__PURE__ */ jsx28(Chat2, { ...opts }),
+    render: () => /* @__PURE__ */ jsx28(Chat2, { ...rest }),
     icon: /* @__PURE__ */ jsx28(Bot, {}),
-    mobilePanelHeight: "min-content"
+    mobilePanelHeight: "min-content",
+    overrides: {
+      preview: ({ children }) => {
+        if (scrollTracking) {
+          return /* @__PURE__ */ jsx28(ScrollTracking, { children });
+        }
+        return /* @__PURE__ */ jsx28(Fragment3, { children });
+      }
+    }
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.4.0-canary.fb6e09c3",
+  "version": "0.4.0",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "puckeditor/puck",
   "bugs": "https://github.com/puckeditor/puck/issues",
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@ai-sdk/react": "^2.0.29",
-    "@measured/puck": "0.21.0-canary.17395b2c",
+    "@measured/puck": "0.21.0-canary.ed351ce5",
     "@puckeditor/ai-types": "workspace:*",
     "@puckeditor/platform-types": "workspace:*",
     "@types/jest": "^30.0.0",
@@ -54,7 +54,7 @@
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "@measured/puck": "0.21.0-canary.17395b2c",
+    "@measured/puck": "0.21.0-canary.ed351ce5",
     "react": "^18.0.0 || ^19.0.0"
   }
 }