@puckeditor/plugin-ai 0.8.2 → 0.9.0-canary.50fad349

package/dist/index.mjs

@@ -36,37 +36,6 @@ var init_react_import = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js
-var require_throttleit = __commonJS({
-  "../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js"(exports, module) {
-    "use strict";
-    init_react_import();
-    function throttle2(function_, wait) {
-      if (typeof function_ !== "function") {
-        throw new TypeError(`Expected the first argument to be a \`function\`, got \`${typeof function_}\`.`);
-      }
-      let timeoutId;
-      let lastCallTime = 0;
-      return function throttled(...arguments_) {
-        clearTimeout(timeoutId);
-        const now = Date.now();
-        const timeSinceLastCall = now - lastCallTime;
-        const delayForNextCall = wait - timeSinceLastCall;
-        if (delayForNextCall <= 0) {
-          lastCallTime = now;
-          function_.apply(this, arguments_);
-        } else {
-          timeoutId = setTimeout(() => {
-            lastCallTime = Date.now();
-            function_.apply(this, arguments_);
-          }, delayForNextCall);
-        }
-      };
-    }
-    module.exports = throttle2;
-  }
-});
-
 // ../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
 var require_classnames = __commonJS({
   "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
@@ -129,267 +98,34 @@ var require_classnames = __commonJS({
   }
 });
 
-// ../reducer/dist/index.js
-var require_dist = __commonJS({
-  "../reducer/dist/index.js"(exports, module) {
+// ../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js
+var require_throttleit = __commonJS({
+  "../../node_modules/.pnpm/throttleit@2.1.0/node_modules/throttleit/index.js"(exports, module) {
     "use strict";
     init_react_import();
-    var __defProp2 = Object.defineProperty;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-    var __export = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp2.call(to, key) && key !== except)
-            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var index_exports = {};
-    __export(index_exports, {
-      dispatchOp: () => dispatchOp2,
-      resolveAppends: () => resolveAppends
-    });
-    module.exports = __toCommonJS(index_exports);
-    var parseAppendPath = (path) => {
-      const segments = [];
-      const pattern = /([^.[\]]+)|\[(\d+)\]/g;
-      let match;
-      while ((match = pattern.exec(path)) !== null) {
-        segments.push(match[2] !== void 0 ? Number(match[2]) : match[1]);
-      }
-      return segments;
-    };
-    var appendAtPath = (base, segments, tail) => {
-      if (segments.length === 0) {
-        return `${typeof base === "string" ? base : ""}${tail}`;
-      }
-      const [head, ...rest] = segments;
-      if (typeof head === "number") {
-        const arr = Array.isArray(base) ? [...base] : [];
-        arr[head] = appendAtPath(arr[head], rest, tail);
-        return arr;
-      }
-      const obj = typeof base === "object" && base !== null && !Array.isArray(base) ? { ...base } : {};
-      obj[head] = appendAtPath(obj[head], rest, tail);
-      return obj;
-    };
-    var resolveAppends = (existingProps, props, appends) => {
-      if (!appends) return props;
-      const resolved = { ...props };
-      for (const [path, tail] of Object.entries(appends)) {
-        const [rootKey, ...rest] = parseAppendPath(path);
-        if (typeof rootKey !== "string") continue;
-        const base = rootKey in resolved ? resolved[rootKey] : existingProps == null ? void 0 : existingProps[rootKey];
-        resolved[rootKey] = appendAtPath(base, rest, tail);
-      }
-      return resolved;
-    };
-    var getSelectorForId = (state, id) => {
-      const node = state.indexes.nodes[id];
-      if (!node) return;
-      const zoneCompound = `${node.parentId}:${node.zone}`;
-      const zone = state.indexes.zones[zoneCompound];
-      if (!zone) return;
-      const index = zone.contentIds.indexOf(id);
-      return { zone: zoneCompound, index };
-    };
-    var getItemById = (state, id) => {
-      var _a;
-      return (_a = state.indexes.nodes[id]) == null ? void 0 : _a.data;
-    };
-    var applyArrayDefaults = (oldProps, newProps, fields) => {
-      const updatedProps = {
-        ...oldProps,
-        ...newProps
-      };
-      for (const fieldName in fields) {
-        const field = fields[fieldName];
-        if (field.type === "array") {
-          const arrayField = field;
-          const arrayFields = arrayField.arrayFields;
-          const value = updatedProps[fieldName];
-          if (value === void 0) continue;
-          if (!Array.isArray(value)) {
-            const oldValue = oldProps[fieldName];
-            if (Array.isArray(oldValue)) {
-              updatedProps[fieldName] = oldValue;
-            } else {
-              delete updatedProps[fieldName];
-            }
-            continue;
-          }
-          updatedProps[fieldName] = value.map(
-            (item, index) => {
-              var _a, _b;
-              const newItem = {};
-              const defaultValue = typeof arrayField.defaultItemProps === "function" ? arrayField.defaultItemProps(index) : arrayField.defaultItemProps;
-              for (const arrayFieldName in arrayFields) {
-                const subField = arrayFields[arrayFieldName];
-                if (subField.type === "slot") {
-                  newItem[arrayFieldName] = item[arrayFieldName] ?? ((_b = (_a = oldProps[fieldName]) == null ? void 0 : _a[index]) == null ? void 0 : _b[arrayFieldName]) ?? (defaultValue == null ? void 0 : defaultValue[arrayFieldName]);
-                } else {
-                  newItem[arrayFieldName] = item[arrayFieldName] ?? (defaultValue == null ? void 0 : defaultValue[arrayFieldName]);
-                }
-              }
-              return newItem;
-            }
-          );
-        }
+    function throttle2(function_, wait) {
+      if (typeof function_ !== "function") {
+        throw new TypeError(`Expected the first argument to be a \`function\`, got \`${typeof function_}\`.`);
       }
-      return updatedProps;
-    };
-    var dispatchOp2 = (operation, {
-      getState,
-      dispatchAction,
-      config
-    }) => {
-      var _a, _b;
-      const state = getState();
-      try {
-        if (operation.op === "add") {
-          if (operation.zone) {
-            dispatchAction({
-              type: "insert",
-              destinationIndex: operation.index,
-              destinationZone: operation.zone,
-              componentType: operation.type,
-              id: operation.id,
-              recordHistory: false
-            });
-            const existing = getItemById(getState(), operation.id);
-            if (!existing) {
-              throw new Error(
-                `Tried to update an item that doesn't exist: ${operation.id}`
-              );
-            }
-            const newData = {
-              ...existing,
-              props: applyArrayDefaults(
-                existing.props,
-                operation.props,
-                config.components[existing.type].fields
-              )
-            };
-            newData.props.id ||= operation.id;
-            const selector = getSelectorForId(getState(), operation.id);
-            if (!selector) {
-              throw new Error(
-                `Tried to replace an item that doesn't exist: ${operation.id}`
-              );
-            }
-            dispatchAction({
-              type: "replace",
-              destinationIndex: selector.index,
-              destinationZone: selector.zone,
-              data: newData,
-              recordHistory: false
-            });
-          }
-        } else if (operation.op === "update") {
-          const selector = getSelectorForId(state, operation.id);
-          const existing = getItemById(state, operation.id);
-          if (!selector || !existing) {
-            throw new Error(
-              `Tried to update an item that doesn't exist: ${operation.id}`
-            );
-          }
-          const newData = {
-            ...existing,
-            props: applyArrayDefaults(
-              existing.props,
-              resolveAppends(
-                existing.props,
-                operation.props,
-                operation.appends
-              ),
-              config.components[existing.type].fields
-            )
-          };
-          dispatchAction({
-            type: "replace",
-            destinationIndex: selector.index,
-            destinationZone: selector.zone,
-            data: newData,
-            recordHistory: false
-          });
-        } else if (operation.op === "updateRoot") {
-          const existing = state.data.root;
-          const defaultProps = ((_a = config.root) == null ? void 0 : _a.defaultProps) ?? {};
-          dispatchAction({
-            type: "replaceRoot",
-            root: {
-              ...existing,
-              props: {
-                ...defaultProps,
-                ...existing.props,
-                ...resolveAppends(
-                  existing.props ?? {},
-                  operation.props,
-                  operation.appends
-                )
-              }
-            },
-            recordHistory: false
-          });
-        } else if (operation.op === "delete") {
-          const selector = getSelectorForId(state, operation.id);
-          if (selector) {
-            dispatchAction({
-              type: "remove",
-              zone: selector.zone,
-              index: selector.index,
-              recordHistory: false
-            });
-          }
-        } else if (operation.op === "duplicate") {
-          const selector = getSelectorForId(state, operation.id);
-          if (!selector) {
-            throw new Error(
-              `Tried to duplicate an item that doesn't exist: ${operation.id}`
-            );
-          }
-          dispatchAction({
-            type: "duplicate",
-            sourceZone: selector.zone,
-            sourceIndex: selector.index,
-            recordHistory: false
-          });
-        } else if (operation.op === "move") {
-          const selector = getSelectorForId(state, operation.id);
-          if (!selector) {
-            throw new Error(
-              `Tried to move an item that doesn't exist: ${operation.id}`
-            );
-          }
-          dispatchAction({
-            type: "move",
-            sourceZone: selector.zone,
-            sourceIndex: selector.index,
-            destinationIndex: operation.index,
-            destinationZone: operation.zone,
-            recordHistory: false
-          });
-        } else if (operation.op === "reset") {
-          const defaultRootProps = ((_b = config.root) == null ? void 0 : _b.defaultProps) ?? {};
-          dispatchAction({
-            type: "setData",
-            data: { content: [], root: defaultRootProps },
-            recordHistory: false
-          });
+      let timeoutId;
+      let lastCallTime = 0;
+      return function throttled(...arguments_) {
+        clearTimeout(timeoutId);
+        const now = Date.now();
+        const timeSinceLastCall = now - lastCallTime;
+        const delayForNextCall = wait - timeSinceLastCall;
+        if (delayForNextCall <= 0) {
+          lastCallTime = now;
+          function_.apply(this, arguments_);
         } else {
-          throw new Error(`Unknown operation: ${operation.op}`);
+          timeoutId = setTimeout(() => {
+            lastCallTime = Date.now();
+            function_.apply(this, arguments_);
+          }, delayForNextCall);
         }
-      } catch (e) {
-        console.error("Error applying operation, skipping...", operation, e);
-      }
-    };
+      };
+    }
+    module.exports = throttle2;
   }
 });
 
@@ -728,416 +464,147 @@ import { ulid as ulid2 } from "ulid";
 
 // src/components/Chat/index.tsx
 init_react_import();
+import { createUsePuck as createUsePuck2 } from "@puckeditor/core";
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect13,
+  useId as useId3,
+  useMemo as useMemo6,
+  useRef as useRef12,
+  useState as useState16
+} from "react";
 
-// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+// ../utils/lib/get-class-name-factory.ts
+init_react_import();
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
+  let descendant = false;
+  let modifiers = false;
+  if (typeof options === "string") {
+    descendant = options;
+  } else if (typeof options === "object") {
+    modifiers = options;
+  }
+  if (descendant) {
+    const style = styles[`${rootClass}-${descendant}`];
+    if (style) {
+      return baseClass + styles[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (modifiers) {
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return baseClass + (0, import_classnames.default)({
+      [c]: !!c,
+      // only apply the class if it exists
+      ...prefixedModifiers
+    });
+  } else {
+    return baseClass + styles[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/Chat/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "Chat": "_Chat_1ei0a_1", "Chat-header": "_Chat-header_1ei0a_9", "Chat-placeholder": "_Chat-placeholder_1ei0a_23", "Chat-placeholderIcon": "_Chat-placeholderIcon_1ei0a_42", "Chat-placeholderTitle": "_Chat-placeholderTitle_1ei0a_53", "Chat-placeholderDescription": "_Chat-placeholderDescription_1ei0a_58", "Chat-actions": "_Chat-actions_1ei0a_64", "Chat-action": "_Chat-action_1ei0a_64", "Chat-actionOutlined": "_Chat-actionOutlined_1ei0a_73", "Chat-attachmentControls": "_Chat-attachmentControls_1ei0a_108", "Chat-attachmentInput": "_Chat-attachmentInput_1ei0a_115", "Chat-attachmentButton": "_Chat-attachmentButton_1ei0a_119" };
+
+// src/components/ChatBody/index.tsx
 init_react_import();
-var import_throttleit = __toESM(require_throttleit(), 1);
-import {
-  DefaultChatTransport
-} from "ai";
-import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
-import {
-  AbstractChat
-} from "ai";
-import {
-  callCompletionApi
-} from "ai";
-import { useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, useState } from "react";
 import {
-  asSchema,
-  isDeepEqualData,
-  parsePartialJson
-} from "ai";
-import { useCallback as useCallback3, useId as useId2, useRef as useRef3, useState as useState2 } from "react";
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
+  useContext as useContext3,
+  useEffect as useEffect7,
+  useMemo as useMemo3,
+  useRef as useRef6,
+  useState as useState11
+} from "react";
+import { useStickToBottom } from "use-stick-to-bottom";
+import Markdown from "react-markdown";
+
+// ../platform-client/index.ts
+init_react_import();
+
+// ../platform-client/components/ActionModal/index.ts
+init_react_import();
+
+// ../platform-client/components/ActionModal/ActionModal.tsx
+init_react_import();
+
+// css-module:/home/runner/work/platform/platform/packages/platform-client/components/ActionModal/ActionModal.module.css#css-module
+init_react_import();
+var ActionModal_module_default = { "ActionModal": "_ActionModal_1g44k_1", "ActionModal-header": "_ActionModal-header_1g44k_6", "ActionModal-body": "_ActionModal-body_1g44k_17", "ActionModal-footer": "_ActionModal-footer_1g44k_25" };
+
+// ../platform-client/lib/index.ts
+init_react_import();
+
+// ../platform-client/lib/get-class-name-factory.ts
+init_react_import();
+var import_classnames2 = __toESM(require_classnames());
+var getClassNameFactory2 = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
+  let descendant = false;
+  let modifiers = false;
+  if (typeof options === "string") {
+    descendant = options;
+  } else if (typeof options === "object") {
+    modifiers = options;
+  }
+  if (descendant) {
+    const style = styles[`${rootClass}-${descendant}`];
+    if (style) {
+      return baseClass + styles[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (modifiers) {
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return baseClass + (0, import_classnames2.default)({
+      [c]: !!c,
+      // only apply the class if it exists
+      ...prefixedModifiers
+    });
+  } else {
+    return baseClass + styles[rootClass] || "";
+  }
 };
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-function throttle(fn, waitMs) {
-  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
-}
-var _messages;
-var _status;
-var _error;
-var _messagesCallbacks;
-var _statusCallbacks;
-var _errorCallbacks;
-var _callMessagesCallbacks;
-var _callStatusCallbacks;
-var _callErrorCallbacks;
-var ReactChatState = class {
-  constructor(initialMessages = []) {
-    __privateAdd(this, _messages, void 0);
-    __privateAdd(this, _status, "ready");
-    __privateAdd(this, _error, void 0);
-    __privateAdd(this, _messagesCallbacks, /* @__PURE__ */ new Set());
-    __privateAdd(this, _statusCallbacks, /* @__PURE__ */ new Set());
-    __privateAdd(this, _errorCallbacks, /* @__PURE__ */ new Set());
-    this.pushMessage = (message) => {
-      __privateSet(this, _messages, __privateGet(this, _messages).concat(message));
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.popMessage = () => {
-      __privateSet(this, _messages, __privateGet(this, _messages).slice(0, -1));
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.replaceMessage = (index, message) => {
-      __privateSet(this, _messages, [
-        ...__privateGet(this, _messages).slice(0, index),
-        // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
-        this.snapshot(message),
-        ...__privateGet(this, _messages).slice(index + 1)
-      ]);
-      __privateGet(this, _callMessagesCallbacks).call(this);
-    };
-    this.snapshot = (value) => structuredClone(value);
-    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => {
-      const callback = throttleWaitMs ? throttle(onChange, throttleWaitMs) : onChange;
-      __privateGet(this, _messagesCallbacks).add(callback);
-      return () => {
-        __privateGet(this, _messagesCallbacks).delete(callback);
-      };
-    };
-    this["~registerStatusCallback"] = (onChange) => {
-      __privateGet(this, _statusCallbacks).add(onChange);
-      return () => {
-        __privateGet(this, _statusCallbacks).delete(onChange);
-      };
-    };
-    this["~registerErrorCallback"] = (onChange) => {
-      __privateGet(this, _errorCallbacks).add(onChange);
-      return () => {
-        __privateGet(this, _errorCallbacks).delete(onChange);
-      };
-    };
-    __privateAdd(this, _callMessagesCallbacks, () => {
-      __privateGet(this, _messagesCallbacks).forEach((callback) => callback());
-    });
-    __privateAdd(this, _callStatusCallbacks, () => {
-      __privateGet(this, _statusCallbacks).forEach((callback) => callback());
-    });
-    __privateAdd(this, _callErrorCallbacks, () => {
-      __privateGet(this, _errorCallbacks).forEach((callback) => callback());
-    });
-    __privateSet(this, _messages, initialMessages);
-  }
-  get status() {
-    return __privateGet(this, _status);
-  }
-  set status(newStatus) {
-    __privateSet(this, _status, newStatus);
-    __privateGet(this, _callStatusCallbacks).call(this);
-  }
-  get error() {
-    return __privateGet(this, _error);
-  }
-  set error(newError) {
-    __privateSet(this, _error, newError);
-    __privateGet(this, _callErrorCallbacks).call(this);
-  }
-  get messages() {
-    return __privateGet(this, _messages);
-  }
-  set messages(newMessages) {
-    __privateSet(this, _messages, [...newMessages]);
-    __privateGet(this, _callMessagesCallbacks).call(this);
-  }
-};
-_messages = /* @__PURE__ */ new WeakMap();
-_status = /* @__PURE__ */ new WeakMap();
-_error = /* @__PURE__ */ new WeakMap();
-_messagesCallbacks = /* @__PURE__ */ new WeakMap();
-_statusCallbacks = /* @__PURE__ */ new WeakMap();
-_errorCallbacks = /* @__PURE__ */ new WeakMap();
-_callMessagesCallbacks = /* @__PURE__ */ new WeakMap();
-_callStatusCallbacks = /* @__PURE__ */ new WeakMap();
-_callErrorCallbacks = /* @__PURE__ */ new WeakMap();
-var _state;
-var Chat = class extends AbstractChat {
-  constructor({ messages, ...init }) {
-    const state = new ReactChatState(messages);
-    super({ ...init, state });
-    __privateAdd(this, _state, void 0);
-    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => __privateGet(this, _state)["~registerMessagesCallback"](onChange, throttleWaitMs);
-    this["~registerStatusCallback"] = (onChange) => __privateGet(this, _state)["~registerStatusCallback"](onChange);
-    this["~registerErrorCallback"] = (onChange) => __privateGet(this, _state)["~registerErrorCallback"](onChange);
-    __privateSet(this, _state, state);
-  }
-};
-_state = /* @__PURE__ */ new WeakMap();
-function useChat({
-  experimental_throttle: throttleWaitMs,
-  resume = false,
-  ...options
-} = {}) {
-  const latestRef = useRef({});
-  if (!("chat" in options)) {
-    latestRef.current = {
-      onToolCall: options.onToolCall,
-      onData: options.onData,
-      onFinish: options.onFinish,
-      onError: options.onError,
-      sendAutomaticallyWhen: options.sendAutomaticallyWhen,
-      transport: options.transport
-    };
-  }
-  let defaultTransport;
-  const getTransport = () => {
-    var _a;
-    return (_a = latestRef.current.transport) != null ? _a : defaultTransport != null ? defaultTransport : defaultTransport = new DefaultChatTransport();
-  };
-  const chatOptions = {
-    ...options,
-    transport: {
-      sendMessages: (sendOptions) => getTransport().sendMessages(sendOptions),
-      reconnectToStream: (reconnectOptions) => getTransport().reconnectToStream(reconnectOptions)
-    },
-    onToolCall: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onToolCall) == null ? void 0 : _b.call(_a, arg);
-    },
-    onData: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onData) == null ? void 0 : _b.call(_a, arg);
-    },
-    onFinish: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onFinish) == null ? void 0 : _b.call(_a, arg);
-    },
-    onError: (arg) => {
-      var _a, _b;
-      return (_b = (_a = latestRef.current).onError) == null ? void 0 : _b.call(_a, arg);
-    },
-    sendAutomaticallyWhen: (arg) => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = latestRef.current).sendAutomaticallyWhen) == null ? void 0 : _b.call(_a, arg)) != null ? _c : false;
-    }
-  };
-  const chatRef = useRef(
-    "chat" in options ? options.chat : new Chat(chatOptions)
-  );
-  const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && options.id != null && chatRef.current.id !== options.id;
-  if (shouldRecreateChat) {
-    chatRef.current = "chat" in options ? options.chat : new Chat(chatOptions);
-  }
-  const subscribeToMessages = useCallback(
-    (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
-    // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [throttleWaitMs, chatRef.current.id]
-  );
-  const messages = useSyncExternalStore(
-    subscribeToMessages,
-    () => chatRef.current.messages,
-    () => chatRef.current.messages
-  );
-  const status = useSyncExternalStore(
-    chatRef.current["~registerStatusCallback"],
-    () => chatRef.current.status,
-    () => chatRef.current.status
-  );
-  const error = useSyncExternalStore(
-    chatRef.current["~registerErrorCallback"],
-    () => chatRef.current.error,
-    () => chatRef.current.error
-  );
-  const setMessages = useCallback(
-    (messagesParam) => {
-      if (typeof messagesParam === "function") {
-        messagesParam = messagesParam(chatRef.current.messages);
-      }
-      chatRef.current.messages = messagesParam;
-    },
-    [chatRef]
-  );
-  useEffect(() => {
-    if (resume) {
-      chatRef.current.resumeStream();
-    }
-  }, [resume, chatRef]);
-  return {
-    id: chatRef.current.id,
-    messages,
-    setMessages,
-    sendMessage: chatRef.current.sendMessage,
-    regenerate: chatRef.current.regenerate,
-    clearError: chatRef.current.clearError,
-    stop: chatRef.current.stop,
-    error,
-    resumeStream: chatRef.current.resumeStream,
-    status,
-    /**
-     * @deprecated Use `addToolOutput` instead.
-     */
-    addToolResult: chatRef.current.addToolOutput,
-    addToolOutput: chatRef.current.addToolOutput,
-    addToolApprovalResponse: chatRef.current.addToolApprovalResponse
-  };
-}
-
-// src/components/Chat/index.tsx
-import {
-  createUsePuck,
-  useGetPuck as useGetPuck4
-} from "@puckeditor/core";
-import {
-  DefaultChatTransport as DefaultChatTransport2
-} from "ai";
-import {
-  useCallback as useCallback6,
-  useEffect as useEffect13,
-  useId as useId3,
-  useMemo as useMemo6,
-  useRef as useRef13,
-  useState as useState16
-} from "react";
-import { ulid } from "ulid";
-
-// ../utils/lib/get-class-name-factory.ts
-init_react_import();
-var import_classnames = __toESM(require_classnames());
-var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
-  let descendant = false;
-  let modifiers = false;
-  if (typeof options === "string") {
-    descendant = options;
-  } else if (typeof options === "object") {
-    modifiers = options;
-  }
-  if (descendant) {
-    const style = styles[`${rootClass}-${descendant}`];
-    if (style) {
-      return baseClass + styles[`${rootClass}-${descendant}`] || "";
-    }
-    return "";
-  } else if (modifiers) {
-    const prefixedModifiers = {};
-    for (let modifier in modifiers) {
-      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
-    }
-    const c = styles[rootClass];
-    return baseClass + (0, import_classnames.default)({
-      [c]: !!c,
-      // only apply the class if it exists
-      ...prefixedModifiers
-    });
-  } else {
-    return baseClass + styles[rootClass] || "";
-  }
-};
-var get_class_name_factory_default = getClassNameFactory;
-
-// css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/Chat/styles.module.css#css-module
-init_react_import();
-var styles_module_default = { "Chat": "_Chat_1ei0a_1", "Chat-header": "_Chat-header_1ei0a_9", "Chat-placeholder": "_Chat-placeholder_1ei0a_23", "Chat-placeholderIcon": "_Chat-placeholderIcon_1ei0a_42", "Chat-placeholderTitle": "_Chat-placeholderTitle_1ei0a_53", "Chat-placeholderDescription": "_Chat-placeholderDescription_1ei0a_58", "Chat-actions": "_Chat-actions_1ei0a_64", "Chat-action": "_Chat-action_1ei0a_64", "Chat-actionOutlined": "_Chat-actionOutlined_1ei0a_73", "Chat-attachmentControls": "_Chat-attachmentControls_1ei0a_108", "Chat-attachmentInput": "_Chat-attachmentInput_1ei0a_115", "Chat-attachmentButton": "_Chat-attachmentButton_1ei0a_119" };
-
-// src/components/ChatBody/index.tsx
-init_react_import();
-import {
-  useContext as useContext3,
-  useEffect as useEffect9,
-  useMemo as useMemo3,
-  useRef as useRef9,
-  useState as useState13
-} from "react";
-import { useStickToBottom } from "use-stick-to-bottom";
-import Markdown from "react-markdown";
-
-// ../platform-client/index.ts
-init_react_import();
-
-// ../platform-client/components/ActionModal/index.ts
-init_react_import();
-
-// ../platform-client/components/ActionModal/ActionModal.tsx
-init_react_import();
-
-// css-module:/home/runner/work/platform/platform/packages/platform-client/components/ActionModal/ActionModal.module.css#css-module
-init_react_import();
-var ActionModal_module_default = { "ActionModal": "_ActionModal_1g44k_1", "ActionModal-header": "_ActionModal-header_1g44k_6", "ActionModal-body": "_ActionModal-body_1g44k_17", "ActionModal-footer": "_ActionModal-footer_1g44k_25" };
-
-// ../platform-client/lib/index.ts
-init_react_import();
-
-// ../platform-client/lib/get-class-name-factory.ts
-init_react_import();
-var import_classnames2 = __toESM(require_classnames());
-var getClassNameFactory2 = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
-  let descendant = false;
-  let modifiers = false;
-  if (typeof options === "string") {
-    descendant = options;
-  } else if (typeof options === "object") {
-    modifiers = options;
-  }
-  if (descendant) {
-    const style = styles[`${rootClass}-${descendant}`];
-    if (style) {
-      return baseClass + styles[`${rootClass}-${descendant}`] || "";
-    }
-    return "";
-  } else if (modifiers) {
-    const prefixedModifiers = {};
-    for (let modifier in modifiers) {
-      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
-    }
-    const c = styles[rootClass];
-    return baseClass + (0, import_classnames2.default)({
-      [c]: !!c,
-      // only apply the class if it exists
-      ...prefixedModifiers
-    });
-  } else {
-    return baseClass + styles[rootClass] || "";
-  }
-};
-var get_class_name_factory_default2 = getClassNameFactory2;
-
-// ../platform-client/components/Modal/Modal.tsx
-init_react_import();
-
-// css-module:/home/runner/work/platform/platform/packages/platform-client/components/Modal/Modal.module.css#css-module
-init_react_import();
-var Modal_module_default = { "Modal-background": "_Modal-background_1bedq_1", "Modal--visible": "_Modal--visible_1bedq_16", "Modal-modal": "_Modal-modal_1bedq_22" };
-
-// ../platform-client/components/Modal/Modal.tsx
-import { createContext, useContext } from "react";
-
-// ../platform-client/lib/use-modal-visible.ts
-init_react_import();
-import { useEffect as useEffect3, useState as useState3, useRef as useRef4 } from "react";
-var useModalVisible = (defaultVisible) => {
-  const [visible, setVisible] = useState3(defaultVisible ?? false);
-  const ref = useRef4(null);
-  useEffect3(() => {
-    if (!visible) {
-      return;
-    }
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setVisible(false);
-      }
-    };
-    document.body.addEventListener("click", handler);
-    return () => {
-      document.body.removeEventListener("click", handler);
-    };
-  }, [visible]);
-  return [visible, setVisible, ref];
+var get_class_name_factory_default2 = getClassNameFactory2;
+
+// ../platform-client/components/Modal/Modal.tsx
+init_react_import();
+
+// css-module:/home/runner/work/platform/platform/packages/platform-client/components/Modal/Modal.module.css#css-module
+init_react_import();
+var Modal_module_default = { "Modal-background": "_Modal-background_1bedq_1", "Modal--visible": "_Modal--visible_1bedq_16", "Modal-modal": "_Modal-modal_1bedq_22" };
+
+// ../platform-client/components/Modal/Modal.tsx
+import { createContext, useContext } from "react";
+
+// ../platform-client/lib/use-modal-visible.ts
+init_react_import();
+import { useEffect, useState, useRef } from "react";
+var useModalVisible = (defaultVisible) => {
+  const [visible, setVisible] = useState(defaultVisible ?? false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setVisible(false);
+      }
+    };
+    document.body.addEventListener("click", handler);
+    return () => {
+      document.body.removeEventListener("click", handler);
+    };
+  }, [visible]);
+  return [visible, setVisible, ref];
 };
 
 // ../platform-client/components/Button/index.ts
@@ -1145,7 +612,7 @@ init_react_import();
 
 // ../platform-client/components/Button/Button.tsx
 init_react_import();
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Button/Button.module.css#css-module
 init_react_import();
@@ -1198,8 +665,8 @@ var Button = ({
   size = "medium",
   loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = useState4(loadingProp);
-  useEffect4(() => {
+  const [loading, setLoading] = useState2(loadingProp);
+  useEffect2(() => {
     const resetLoading = () => setLoading(loadingProp);
     resetLoading();
     window.addEventListener("pageshow", resetLoading);
@@ -1388,7 +855,7 @@ init_react_import();
 // ../platform-client/components/AutoForm/AutoForm.tsx
 init_react_import();
 import { AutoField, FieldLabel } from "@puckeditor/core";
-import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/AutoForm/AutoForm.module.css#css-module
 init_react_import();
@@ -1436,11 +903,11 @@ var Code_module_default = { "Code": "_Code_d4378_1", "Code-body": "_Code-body_d4
 
 // ../platform-client/components/Code/CopyAction.tsx
 init_react_import();
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 
 // ../platform-client/components/Code/Code.tsx
-import { useRef as useRef6, useState as useState7 } from "react";
+import { useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("Code", Code_module_default);
 var getClassNameTab = get_class_name_factory_default("Tab", Code_module_default);
@@ -1450,7 +917,7 @@ init_react_import();
 
 // ../platform-client/components/IconButton/IconButton.tsx
 init_react_import();
-import { useState as useState8 } from "react";
+import { useState as useState6 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -1472,7 +939,7 @@ var IconButton = ({
   title,
   dark
 }) => {
-  const [loading, setLoading] = useState8(false);
+  const [loading, setLoading] = useState6(false);
   const ElementType = href ? "a" : onClick ? "button" : "div";
   const el = /* @__PURE__ */ jsxs8(
     ElementType,
@@ -1604,7 +1071,7 @@ var getClassName12 = get_class_name_factory_default2("Link", Link_module_default
 
 // ../platform-client/components/Menu/index.tsx
 init_react_import();
-import { useState as useState9 } from "react";
+import { useState as useState7 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Menu/styles.module.css#css-module
 init_react_import();
@@ -1733,7 +1200,7 @@ init_react_import();
 
 // ../platform-client/components/Table/Table.tsx
 init_react_import();
-import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef7, useState as useState10 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef4, useState as useState8 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/platform-client/components/Table/Table.module.css#css-module
 init_react_import();
@@ -1775,7 +1242,7 @@ var cx6 = getClassNameFactory("Viewport", styles_module_default6);
 
 // ../platform-client/context/editor.tsx
 init_react_import();
-import { createContext as createContext2, useContext as useContext2, useState as useState11 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState9 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var ctx = createContext2({});
 
@@ -1786,10 +1253,10 @@ var styles_module_default7 = { "Chat": "_Chat_5z5yi_1", "Chat--hasMessages": "_C
 // src/components/PromptForm/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback4,
-  useEffect as useEffect8,
-  useRef as useRef8,
-  useState as useState12
+  useCallback,
+  useEffect as useEffect6,
+  useRef as useRef5,
+  useState as useState10
 } from "react";
 
 // css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/PromptForm/styles.module.css#css-module
@@ -1876,13 +1343,13 @@ function PromptForm({
   maxRows = 5,
   value = ""
 }) {
-  const hasSetInitialPrompt = useRef8(false);
-  const [prompt, setPrompt] = useState12(value);
-  const internalRef = useRef8(null);
-  const [isDragOver, setIsDragOver] = useState12(false);
-  const dragCounterRef = useRef8(0);
+  const hasSetInitialPrompt = useRef5(false);
+  const [prompt, setPrompt] = useState10(value);
+  const internalRef = useRef5(null);
+  const [isDragOver, setIsDragOver] = useState10(false);
+  const dragCounterRef = useRef5(0);
   const canDrop = !!onFileDrop && !isDisabled && !isLoading;
-  const handleDragEnter = useCallback4(
+  const handleDragEnter = useCallback(
     (e) => {
       e.preventDefault();
       dragCounterRef.current++;
@@ -1892,17 +1359,17 @@ function PromptForm({
     },
     [canDrop]
   );
-  const handleDragLeave = useCallback4((e) => {
+  const handleDragLeave = useCallback((e) => {
     e.preventDefault();
     dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
       setIsDragOver(false);
     }
   }, []);
-  const handleDragOver = useCallback4((e) => {
+  const handleDragOver = useCallback((e) => {
     e.preventDefault();
   }, []);
-  const handleDrop = useCallback4(
+  const handleDrop = useCallback(
     (e) => {
       e.preventDefault();
       dragCounterRef.current = 0;
@@ -1916,7 +1383,7 @@ function PromptForm({
     },
     [canDrop, onFileDrop]
   );
-  useEffect8(() => {
+  useEffect6(() => {
     setPrompt(value);
   }, [setPrompt, value]);
   const sendPrompt = async () => {
@@ -1931,7 +1398,7 @@ function PromptForm({
       setPrompt("");
     }
   };
-  useEffect8(() => {
+  useEffect6(() => {
     const currentUrl = new URL(location.href);
     const initialPrompt = currentUrl.searchParams.get("initialPrompt");
     if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
@@ -2276,12 +1743,12 @@ function ChatMessageWrapper({
   return /* @__PURE__ */ jsx29("span", { children });
 }
 function ReasoningBlock({ part }) {
-  const startTimeRef = useRef9(null);
-  const [durationSecs, setDurationSecs] = useState13(null);
+  const startTimeRef = useRef6(null);
+  const [durationSecs, setDurationSecs] = useState11(null);
   if (part.state !== "done" && startTimeRef.current === null) {
     startTimeRef.current = Date.now();
   }
-  useEffect9(() => {
+  useEffect7(() => {
     if (part.state === "done" && startTimeRef.current !== null) {
       setDurationSecs(Math.round((Date.now() - startTimeRef.current) / 1e3));
     }
@@ -2381,7 +1848,66 @@ function SubagentBlock({ toolCallId }) {
   const loading = state ? state.state !== "done" : toolStatus?.loading ?? true;
   const hasBody = !!state && state.parts.length > 0;
   const parts = state?.parts ?? [];
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState11(false);
+  return /* @__PURE__ */ jsxs16(
+    "details",
+    {
+      className: cxMessage("event"),
+      onToggle: (e) => setIsOpen(e.currentTarget.open),
+      children: [
+        /* @__PURE__ */ jsxs16(
+          "summary",
+          {
+            className: cxMessage("eventHeader"),
+            style: hasBody ? {} : { color: "var(--puck-color-grey-05) !important", cursor: "unset" },
+            children: [
+              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventIcon"), children: loading ? /* @__PURE__ */ jsx29(Loader, { size: 16 }) : /* @__PURE__ */ jsx29(Bot, { size: 18 }) }),
+              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventLabel"), children: label }),
+              hasBody && /* @__PURE__ */ jsxs16(Fragment5, { children: [
+                /* @__PURE__ */ jsx29("div", { className: cxMessage("eventExpand"), children: /* @__PURE__ */ jsx29(Plus, { size: 12 }) }),
+                /* @__PURE__ */ jsx29("div", { className: cxMessage("eventCollapse"), children: /* @__PURE__ */ jsx29(Minus, { size: 12 }) })
+              ] })
+            ]
+          }
+        ),
+        hasBody && isOpen && /* @__PURE__ */ jsx29("div", { className: cxMessage("eventBody"), children: parts.map((part, i) => /* @__PURE__ */ jsx29(SubagentChildPartRenderer, { part }, `${toolCallId}-${i}`)) })
+      ]
+    }
+  );
+}
+function SubagentChildPartRenderer({ part }) {
+  if (part.kind === "text") {
+    return /* @__PURE__ */ jsx29("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx29(Markdown, { children: part.text }) });
+  }
+  if (part.kind === "reasoning") {
+    return /* @__PURE__ */ jsx29(
+      ReasoningBlock,
+      {
+        part: {
+          type: "reasoning",
+          text: part.text,
+          state: part.state
+        }
+      }
+    );
+  }
+  if (part.toolName === "subagent") {
+    return /* @__PURE__ */ jsx29(SubagentBlock, { toolCallId: part.childToolCallId });
+  }
+  const synthesized = {
+    toolCallId: part.childToolCallId,
+    type: `tool-${part.toolName}`,
+    state: part.output !== void 0 ? "output-available" : "input-available",
+    input: part.input,
+    output: part.output
+  };
+  return /* @__PURE__ */ jsx29(PuckTool, { ...synthesized });
+}
+function ChatEvent({
+  status,
+  icon = /* @__PURE__ */ jsx29(Check, { size: 18 })
+}) {
+  const [isOpen, setIsOpen] = useState11(false);
   return /* @__PURE__ */ jsxs16(
     "details",
     {
@@ -2392,172 +1918,616 @@ function SubagentBlock({ toolCallId }) {
           "summary",
           {
             className: cxMessage("eventHeader"),
-            style: hasBody ? {} : { color: "var(--puck-color-grey-05) !important", cursor: "unset" },
+            style: status.summary ? {} : { color: "var(--puck-color-grey-05) !important", cursor: "unset" },
             children: [
-              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventIcon"), children: loading ? /* @__PURE__ */ jsx29(Loader, { size: 16 }) : /* @__PURE__ */ jsx29(Bot, { size: 18 }) }),
-              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventLabel"), children: label }),
-              hasBody && /* @__PURE__ */ jsxs16(Fragment5, { children: [
+              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventIcon"), children: status.error ? /* @__PURE__ */ jsx29(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx29(Loader, { size: 16 }) : icon }),
+              /* @__PURE__ */ jsx29("div", { children: status.label }),
+              status.summary && /* @__PURE__ */ jsxs16(Fragment5, { children: [
                 /* @__PURE__ */ jsx29("div", { className: cxMessage("eventExpand"), children: /* @__PURE__ */ jsx29(Plus, { size: 12 }) }),
                 /* @__PURE__ */ jsx29("div", { className: cxMessage("eventCollapse"), children: /* @__PURE__ */ jsx29(Minus, { size: 12 }) })
               ] })
             ]
           }
         ),
-        hasBody && isOpen && /* @__PURE__ */ jsx29("div", { className: cxMessage("eventBody"), children: parts.map((part, i) => /* @__PURE__ */ jsx29(SubagentChildPartRenderer, { part }, `${toolCallId}-${i}`)) })
+        status.summary && isOpen && /* @__PURE__ */ jsx29("div", { className: cxMessage("eventBody"), children: /* @__PURE__ */ jsx29(Markdown, { children: status.summary }) })
       ]
     }
   );
 }
-function SubagentChildPartRenderer({ part }) {
-  if (part.kind === "text") {
-    return /* @__PURE__ */ jsx29("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx29(Markdown, { children: part.text }) });
-  }
-  if (part.kind === "reasoning") {
+function ExamplePrompt({
+  label,
+  href,
+  onClick,
+  disabled
+}) {
+  const content = /* @__PURE__ */ jsxs16(Fragment5, { children: [
+    /* @__PURE__ */ jsx29("div", { children: label }),
+    /* @__PURE__ */ jsx29("div", { className: cx8("examplePromptArrow"), children: /* @__PURE__ */ jsx29(ArrowUp, { size: "16" }) })
+  ] });
+  if (href) {
     return /* @__PURE__ */ jsx29(
-      ReasoningBlock,
+      "a",
       {
-        part: {
-          type: "reasoning",
-          text: part.text,
-          state: part.state
-        }
+        className: cx8("examplePrompt"),
+        href: disabled ? void 0 : href,
+        "aria-disabled": disabled || void 0,
+        onClick: (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        },
+        children: content
       }
     );
   }
-  if (part.toolName === "subagent") {
-    return /* @__PURE__ */ jsx29(SubagentBlock, { toolCallId: part.childToolCallId });
+  return /* @__PURE__ */ jsx29(
+    "button",
+    {
+      className: cx8("examplePrompt"),
+      type: "button",
+      disabled,
+      onClick,
+      children: content
+    }
+  );
+}
+
+// src/lib/scroll-tracking-events.ts
+init_react_import();
+var listeners = /* @__PURE__ */ new Set();
+function dispatchScrollTrackingEvent(detail) {
+  listeners.forEach((listener) => {
+    listener(detail);
+  });
+}
+function subscribeToScrollTrackingEvents(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+// src/components/DesignModeToggle/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/DesignModeToggle/styles.module.css#css-module
+init_react_import();
+var styles_module_default9 = { "DesignModeToggle": "_DesignModeToggle_o5uty_1", "DesignModeToggle-button": "_DesignModeToggle-button_o5uty_8", "DesignModeToggle-button--active": "_DesignModeToggle-button--active_o5uty_28" };
+
+// src/components/DesignModeToggle/index.tsx
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var cx9 = getClassNameFactory2("DesignModeToggle", styles_module_default9);
+function DesignModeToggle({
+  active,
+  onToggle,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx30("div", { className: cx9(), children: /* @__PURE__ */ jsxs17(
+    "button",
+    {
+      className: `${cx9("button")} ${active ? cx9("button--active") : ""}`,
+      onClick: onToggle,
+      disabled,
+      type: "button",
+      title: active ? "Disable design mode" : "Enable design mode",
+      children: [
+        /* @__PURE__ */ jsx30(WandSparkles, { size: 12 }),
+        "Design"
+      ]
+    }
+  ) });
+}
+
+// src/lib/use-puck-ai.ts
+init_react_import();
+
+// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+init_react_import();
+var import_throttleit = __toESM(require_throttleit(), 1);
+import {
+  DefaultChatTransport
+} from "ai";
+import { useCallback as useCallback2, useEffect as useEffect8, useRef as useRef7, useSyncExternalStore } from "react";
+import {
+  AbstractChat
+} from "ai";
+import {
+  callCompletionApi
+} from "ai";
+import { useCallback as useCallback22, useEffect as useEffect22, useId, useRef as useRef22, useState as useState12 } from "react";
+import {
+  asSchema,
+  isDeepEqualData,
+  parsePartialJson
+} from "ai";
+import { useCallback as useCallback3, useId as useId2, useRef as useRef32, useState as useState22 } from "react";
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+function throttle(fn, waitMs) {
+  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
+}
+var _messages;
+var _status;
+var _error;
+var _messagesCallbacks;
+var _statusCallbacks;
+var _errorCallbacks;
+var _callMessagesCallbacks;
+var _callStatusCallbacks;
+var _callErrorCallbacks;
+var ReactChatState = class {
+  constructor(initialMessages = []) {
+    __privateAdd(this, _messages, void 0);
+    __privateAdd(this, _status, "ready");
+    __privateAdd(this, _error, void 0);
+    __privateAdd(this, _messagesCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _statusCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _errorCallbacks, /* @__PURE__ */ new Set());
+    this.pushMessage = (message) => {
+      __privateSet(this, _messages, __privateGet(this, _messages).concat(message));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.popMessage = () => {
+      __privateSet(this, _messages, __privateGet(this, _messages).slice(0, -1));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.replaceMessage = (index, message) => {
+      __privateSet(this, _messages, [
+        ...__privateGet(this, _messages).slice(0, index),
+        // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
+        this.snapshot(message),
+        ...__privateGet(this, _messages).slice(index + 1)
+      ]);
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.snapshot = (value) => structuredClone(value);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => {
+      const callback = throttleWaitMs ? throttle(onChange, throttleWaitMs) : onChange;
+      __privateGet(this, _messagesCallbacks).add(callback);
+      return () => {
+        __privateGet(this, _messagesCallbacks).delete(callback);
+      };
+    };
+    this["~registerStatusCallback"] = (onChange) => {
+      __privateGet(this, _statusCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _statusCallbacks).delete(onChange);
+      };
+    };
+    this["~registerErrorCallback"] = (onChange) => {
+      __privateGet(this, _errorCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _errorCallbacks).delete(onChange);
+      };
+    };
+    __privateAdd(this, _callMessagesCallbacks, () => {
+      __privateGet(this, _messagesCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callStatusCallbacks, () => {
+      __privateGet(this, _statusCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callErrorCallbacks, () => {
+      __privateGet(this, _errorCallbacks).forEach((callback) => callback());
+    });
+    __privateSet(this, _messages, initialMessages);
+  }
+  get status() {
+    return __privateGet(this, _status);
+  }
+  set status(newStatus) {
+    __privateSet(this, _status, newStatus);
+    __privateGet(this, _callStatusCallbacks).call(this);
+  }
+  get error() {
+    return __privateGet(this, _error);
+  }
+  set error(newError) {
+    __privateSet(this, _error, newError);
+    __privateGet(this, _callErrorCallbacks).call(this);
+  }
+  get messages() {
+    return __privateGet(this, _messages);
+  }
+  set messages(newMessages) {
+    __privateSet(this, _messages, [...newMessages]);
+    __privateGet(this, _callMessagesCallbacks).call(this);
+  }
+};
+_messages = /* @__PURE__ */ new WeakMap();
+_status = /* @__PURE__ */ new WeakMap();
+_error = /* @__PURE__ */ new WeakMap();
+_messagesCallbacks = /* @__PURE__ */ new WeakMap();
+_statusCallbacks = /* @__PURE__ */ new WeakMap();
+_errorCallbacks = /* @__PURE__ */ new WeakMap();
+_callMessagesCallbacks = /* @__PURE__ */ new WeakMap();
+_callStatusCallbacks = /* @__PURE__ */ new WeakMap();
+_callErrorCallbacks = /* @__PURE__ */ new WeakMap();
+var _state;
+var Chat = class extends AbstractChat {
+  constructor({ messages, ...init }) {
+    const state = new ReactChatState(messages);
+    super({ ...init, state });
+    __privateAdd(this, _state, void 0);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => __privateGet(this, _state)["~registerMessagesCallback"](onChange, throttleWaitMs);
+    this["~registerStatusCallback"] = (onChange) => __privateGet(this, _state)["~registerStatusCallback"](onChange);
+    this["~registerErrorCallback"] = (onChange) => __privateGet(this, _state)["~registerErrorCallback"](onChange);
+    __privateSet(this, _state, state);
+  }
+};
+_state = /* @__PURE__ */ new WeakMap();
+function useChat({
+  experimental_throttle: throttleWaitMs,
+  resume = false,
+  ...options
+} = {}) {
+  const latestRef = useRef7({});
+  if (!("chat" in options)) {
+    latestRef.current = {
+      onToolCall: options.onToolCall,
+      onData: options.onData,
+      onFinish: options.onFinish,
+      onError: options.onError,
+      sendAutomaticallyWhen: options.sendAutomaticallyWhen,
+      transport: options.transport
+    };
   }
-  const synthesized = {
-    toolCallId: part.childToolCallId,
-    type: `tool-${part.toolName}`,
-    state: part.output !== void 0 ? "output-available" : "input-available",
-    input: part.input,
-    output: part.output
+  let defaultTransport;
+  const getTransport = () => {
+    var _a;
+    return (_a = latestRef.current.transport) != null ? _a : defaultTransport != null ? defaultTransport : defaultTransport = new DefaultChatTransport();
   };
-  return /* @__PURE__ */ jsx29(PuckTool, { ...synthesized });
-}
-function ChatEvent({
-  status,
-  icon = /* @__PURE__ */ jsx29(Check, { size: 18 })
-}) {
-  const [isOpen, setIsOpen] = useState13(false);
-  return /* @__PURE__ */ jsxs16(
-    "details",
-    {
-      className: cxMessage("event"),
-      onToggle: (e) => setIsOpen(e.currentTarget.open),
-      children: [
-        /* @__PURE__ */ jsxs16(
-          "summary",
-          {
-            className: cxMessage("eventHeader"),
-            style: status.summary ? {} : { color: "var(--puck-color-grey-05) !important", cursor: "unset" },
-            children: [
-              /* @__PURE__ */ jsx29("div", { className: cxMessage("eventIcon"), children: status.error ? /* @__PURE__ */ jsx29(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx29(Loader, { size: 16 }) : icon }),
-              /* @__PURE__ */ jsx29("div", { children: status.label }),
-              status.summary && /* @__PURE__ */ jsxs16(Fragment5, { children: [
-                /* @__PURE__ */ jsx29("div", { className: cxMessage("eventExpand"), children: /* @__PURE__ */ jsx29(Plus, { size: 12 }) }),
-                /* @__PURE__ */ jsx29("div", { className: cxMessage("eventCollapse"), children: /* @__PURE__ */ jsx29(Minus, { size: 12 }) })
-              ] })
-            ]
-          }
-        ),
-        status.summary && isOpen && /* @__PURE__ */ jsx29("div", { className: cxMessage("eventBody"), children: /* @__PURE__ */ jsx29(Markdown, { children: status.summary }) })
-      ]
+  const chatOptions = {
+    ...options,
+    transport: {
+      sendMessages: (sendOptions) => getTransport().sendMessages(sendOptions),
+      reconnectToStream: (reconnectOptions) => getTransport().reconnectToStream(reconnectOptions)
+    },
+    onToolCall: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onToolCall) == null ? void 0 : _b.call(_a, arg);
+    },
+    onData: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onData) == null ? void 0 : _b.call(_a, arg);
+    },
+    onFinish: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onFinish) == null ? void 0 : _b.call(_a, arg);
+    },
+    onError: (arg) => {
+      var _a, _b;
+      return (_b = (_a = latestRef.current).onError) == null ? void 0 : _b.call(_a, arg);
+    },
+    sendAutomaticallyWhen: (arg) => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = latestRef.current).sendAutomaticallyWhen) == null ? void 0 : _b.call(_a, arg)) != null ? _c : false;
     }
+  };
+  const chatRef = useRef7(
+    "chat" in options ? options.chat : new Chat(chatOptions)
   );
-}
-function ExamplePrompt({
-  label,
-  href,
-  onClick,
-  disabled
-}) {
-  const content = /* @__PURE__ */ jsxs16(Fragment5, { children: [
-    /* @__PURE__ */ jsx29("div", { children: label }),
-    /* @__PURE__ */ jsx29("div", { className: cx8("examplePromptArrow"), children: /* @__PURE__ */ jsx29(ArrowUp, { size: "16" }) })
-  ] });
-  if (href) {
-    return /* @__PURE__ */ jsx29(
-      "a",
-      {
-        className: cx8("examplePrompt"),
-        href: disabled ? void 0 : href,
-        "aria-disabled": disabled || void 0,
-        onClick: (e) => {
-          if (disabled) {
-            e.preventDefault();
-            return;
-          }
-          onClick?.(e);
-        },
-        children: content
-      }
-    );
+  const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && options.id != null && chatRef.current.id !== options.id;
+  if (shouldRecreateChat) {
+    chatRef.current = "chat" in options ? options.chat : new Chat(chatOptions);
   }
-  return /* @__PURE__ */ jsx29(
-    "button",
-    {
-      className: cx8("examplePrompt"),
-      type: "button",
-      disabled,
-      onClick,
-      children: content
-    }
+  const subscribeToMessages = useCallback2(
+    (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
+    // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [throttleWaitMs, chatRef.current.id]
+  );
+  const messages = useSyncExternalStore(
+    subscribeToMessages,
+    () => chatRef.current.messages,
+    () => chatRef.current.messages
+  );
+  const status = useSyncExternalStore(
+    chatRef.current["~registerStatusCallback"],
+    () => chatRef.current.status,
+    () => chatRef.current.status
   );
+  const error = useSyncExternalStore(
+    chatRef.current["~registerErrorCallback"],
+    () => chatRef.current.error,
+    () => chatRef.current.error
+  );
+  const setMessages = useCallback2(
+    (messagesParam) => {
+      if (typeof messagesParam === "function") {
+        messagesParam = messagesParam(chatRef.current.messages);
+      }
+      chatRef.current.messages = messagesParam;
+    },
+    [chatRef]
+  );
+  useEffect8(() => {
+    if (resume) {
+      chatRef.current.resumeStream();
+    }
+  }, [resume, chatRef]);
+  return {
+    id: chatRef.current.id,
+    messages,
+    setMessages,
+    sendMessage: chatRef.current.sendMessage,
+    regenerate: chatRef.current.regenerate,
+    clearError: chatRef.current.clearError,
+    stop: chatRef.current.stop,
+    error,
+    resumeStream: chatRef.current.resumeStream,
+    status,
+    /**
+     * @deprecated Use `addToolOutput` instead.
+     */
+    addToolResult: chatRef.current.addToolOutput,
+    addToolOutput: chatRef.current.addToolOutput,
+    addToolApprovalResponse: chatRef.current.addToolApprovalResponse
+  };
 }
 
-// src/components/Chat/index.tsx
-var import_reducer = __toESM(require_dist());
+// src/lib/use-puck-ai.ts
+import {
+  createUsePuck,
+  useGetPuck as useGetPuck4
+} from "@puckeditor/core";
+import {
+  DefaultChatTransport as DefaultChatTransport2
+} from "ai";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef11, useState as useState15 } from "react";
+import { ulid } from "ulid";
 import qler from "qler";
 import html2canvas from "html2canvas-pro";
 import { useDebouncedCallback } from "use-debounce";
 
-// src/lib/scroll-tracking-events.ts
+// ../reducer/index.ts
 init_react_import();
-var listeners = /* @__PURE__ */ new Set();
-function dispatchScrollTrackingEvent(detail) {
-  listeners.forEach((listener) => {
-    listener(detail);
-  });
-}
-function subscribeToScrollTrackingEvents(listener) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
+import { createReducer } from "@puckeditor/core/internal";
+var parseAppendPath = (path) => {
+  const segments = [];
+  const pattern = /([^.[\]]+)|\[(\d+)\]/g;
+  let match;
+  while ((match = pattern.exec(path)) !== null) {
+    segments.push(match[2] !== void 0 ? Number(match[2]) : match[1]);
+  }
+  return segments;
+};
+var appendAtPath = (base, segments, tail) => {
+  if (segments.length === 0) {
+    return `${typeof base === "string" ? base : ""}${tail}`;
+  }
+  const [head, ...rest] = segments;
+  if (typeof head === "number") {
+    const arr = Array.isArray(base) ? [...base] : [];
+    arr[head] = appendAtPath(arr[head], rest, tail);
+    return arr;
+  }
+  const obj = typeof base === "object" && base !== null && !Array.isArray(base) ? { ...base } : {};
+  obj[head] = appendAtPath(obj[head], rest, tail);
+  return obj;
+};
+var resolveAppends = (existingProps, props, appends) => {
+  if (!appends) return props;
+  const resolved = { ...props };
+  for (const [path, tail] of Object.entries(appends)) {
+    const [rootKey, ...rest] = parseAppendPath(path);
+    if (typeof rootKey !== "string") continue;
+    const base = rootKey in resolved ? resolved[rootKey] : existingProps?.[rootKey];
+    resolved[rootKey] = appendAtPath(base, rest, tail);
+  }
+  return resolved;
+};
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const zone = state.indexes.zones[zoneCompound];
+  if (!zone) return;
+  const index = zone.contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+var getItemById = (state, id) => state.indexes.nodes[id]?.data;
+var applyArrayDefaults = (oldProps, newProps, fields) => {
+  const updatedProps = {
+    ...oldProps,
+    ...newProps
   };
-}
-
-// src/components/DesignModeToggle/index.tsx
-init_react_import();
-
-// css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/DesignModeToggle/styles.module.css#css-module
-init_react_import();
-var styles_module_default9 = { "DesignModeToggle": "_DesignModeToggle_o5uty_1", "DesignModeToggle-button": "_DesignModeToggle-button_o5uty_8", "DesignModeToggle-button--active": "_DesignModeToggle-button--active_o5uty_28" };
-
-// src/components/DesignModeToggle/index.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-var cx9 = getClassNameFactory2("DesignModeToggle", styles_module_default9);
-function DesignModeToggle({
-  active,
-  onToggle,
-  disabled
-}) {
-  return /* @__PURE__ */ jsx30("div", { className: cx9(), children: /* @__PURE__ */ jsxs17(
-    "button",
-    {
-      className: `${cx9("button")} ${active ? cx9("button--active") : ""}`,
-      onClick: onToggle,
-      disabled,
-      type: "button",
-      title: active ? "Disable design mode" : "Enable design mode",
-      children: [
-        /* @__PURE__ */ jsx30(WandSparkles, { size: 12 }),
-        "Design"
-      ]
+  for (const fieldName in fields) {
+    const field = fields[fieldName];
+    if (field.type === "array") {
+      const arrayField = field;
+      const arrayFields = arrayField.arrayFields;
+      const value = updatedProps[fieldName];
+      if (value === void 0) continue;
+      if (!Array.isArray(value)) {
+        const oldValue = oldProps[fieldName];
+        if (Array.isArray(oldValue)) {
+          updatedProps[fieldName] = oldValue;
+        } else {
+          delete updatedProps[fieldName];
+        }
+        continue;
+      }
+      updatedProps[fieldName] = value.map(
+        (item, index) => {
+          const newItem = {};
+          const defaultValue = typeof arrayField.defaultItemProps === "function" ? arrayField.defaultItemProps(index) : arrayField.defaultItemProps;
+          for (const arrayFieldName in arrayFields) {
+            const subField = arrayFields[arrayFieldName];
+            if (subField.type === "slot") {
+              newItem[arrayFieldName] = item[arrayFieldName] ?? oldProps[fieldName]?.[index]?.[arrayFieldName] ?? defaultValue?.[arrayFieldName];
+            } else {
+              newItem[arrayFieldName] = item[arrayFieldName] ?? defaultValue?.[arrayFieldName];
+            }
+          }
+          return newItem;
+        }
+      );
+    }
+  }
+  return updatedProps;
+};
+var dispatchOp = (operation, {
+  getState,
+  dispatchAction,
+  config
+}) => {
+  const state = getState();
+  try {
+    if (operation.op === "add") {
+      if (operation.zone) {
+        dispatchAction({
+          type: "insert",
+          destinationIndex: operation.index,
+          destinationZone: operation.zone,
+          componentType: operation.type,
+          id: operation.id,
+          recordHistory: false
+        });
+        const existing = getItemById(getState(), operation.id);
+        if (!existing) {
+          throw new Error(
+            `Tried to update an item that doesn't exist: ${operation.id}`
+          );
+        }
+        const newData = {
+          ...existing,
+          props: applyArrayDefaults(
+            existing.props,
+            operation.props,
+            config.components[existing.type].fields
+          )
+        };
+        newData.props.id ||= operation.id;
+        const selector = getSelectorForId(getState(), operation.id);
+        if (!selector) {
+          throw new Error(
+            `Tried to replace an item that doesn't exist: ${operation.id}`
+          );
+        }
+        dispatchAction({
+          type: "replace",
+          destinationIndex: selector.index,
+          destinationZone: selector.zone,
+          data: newData,
+          recordHistory: false
+        });
+      }
+    } else if (operation.op === "update") {
+      const selector = getSelectorForId(state, operation.id);
+      const existing = getItemById(state, operation.id);
+      if (!selector || !existing) {
+        throw new Error(
+          `Tried to update an item that doesn't exist: ${operation.id}`
+        );
+      }
+      const newData = {
+        ...existing,
+        props: applyArrayDefaults(
+          existing.props,
+          resolveAppends(
+            existing.props,
+            operation.props,
+            operation.appends
+          ),
+          config.components[existing.type].fields
+        )
+      };
+      dispatchAction({
+        type: "replace",
+        destinationIndex: selector.index,
+        destinationZone: selector.zone,
+        data: newData,
+        recordHistory: false
+      });
+    } else if (operation.op === "updateRoot") {
+      const existing = state.data.root;
+      const defaultProps = config.root?.defaultProps ?? {};
+      dispatchAction({
+        type: "replaceRoot",
+        root: {
+          ...existing,
+          props: {
+            ...defaultProps,
+            ...existing.props,
+            ...resolveAppends(
+              existing.props ?? {},
+              operation.props,
+              operation.appends
+            )
+          }
+        },
+        recordHistory: false
+      });
+    } else if (operation.op === "delete") {
+      const selector = getSelectorForId(state, operation.id);
+      if (selector) {
+        dispatchAction({
+          type: "remove",
+          zone: selector.zone,
+          index: selector.index,
+          recordHistory: false
+        });
+      }
+    } else if (operation.op === "duplicate") {
+      const selector = getSelectorForId(state, operation.id);
+      if (!selector) {
+        throw new Error(
+          `Tried to duplicate an item that doesn't exist: ${operation.id}`
+        );
+      }
+      dispatchAction({
+        type: "duplicate",
+        sourceZone: selector.zone,
+        sourceIndex: selector.index,
+        recordHistory: false
+      });
+    } else if (operation.op === "move") {
+      const selector = getSelectorForId(state, operation.id);
+      if (!selector) {
+        throw new Error(
+          `Tried to move an item that doesn't exist: ${operation.id}`
+        );
+      }
+      dispatchAction({
+        type: "move",
+        sourceZone: selector.zone,
+        sourceIndex: selector.index,
+        destinationIndex: operation.index,
+        destinationZone: operation.zone,
+        recordHistory: false
+      });
+    } else if (operation.op === "reset") {
+      const defaultRootProps = config.root?.defaultProps ?? {};
+      dispatchAction({
+        type: "setData",
+        data: { content: [], root: defaultRootProps },
+        recordHistory: false
+      });
+    } else {
+      throw new Error(`Unknown operation: ${operation.op}`);
     }
-  ) });
-}
+  } catch (e) {
+    console.error("Error applying operation, skipping...", operation, e);
+  }
+};
 
 // src/lib/design/runtime.tsx
 init_react_import();
@@ -2571,12 +2541,12 @@ import {
   useGetPuck as useGetPuck2
 } from "@puckeditor/core";
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect11,
+  useCallback as useCallback4,
+  useEffect as useEffect10,
   useLayoutEffect,
   useMemo as useMemo5,
-  useRef as useRef11,
-  useState as useState15,
+  useRef as useRef9,
+  useState as useState14,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -3476,9 +3446,9 @@ var attachInlineEditing = (el, {
       nextValue = parsed;
       lastValidNumberText = String(parsed);
     }
-    const { dispatch, getSelectorForId, getItemById, resolveDataById } = getPuck();
-    const selector = getSelectorForId(componentId);
-    const item = getItemById(componentId);
+    const { dispatch, getSelectorForId: getSelectorForId2, getItemById: getItemById2, resolveDataById } = getPuck();
+    const selector = getSelectorForId2(componentId);
+    const item = getItemById2(componentId);
     if (!selector || !item) return;
     dispatch({
       type: "replace",
@@ -3491,8 +3461,8 @@ var attachInlineEditing = (el, {
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const { getSelectorForId, dispatch } = getPuck();
-    const itemSelector = getSelectorForId(componentId);
+    const { getSelectorForId: getSelectorForId2, dispatch } = getPuck();
+    const itemSelector = getSelectorForId2(componentId);
     if (itemSelector) {
       dispatch({ type: "setUi", ui: { itemSelector } });
     }
@@ -3720,7 +3690,7 @@ var htmlToReactTree = (html, slots) => {
 
 // src/lib/design/slot-portal.tsx
 init_react_import();
-import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef10, useState as useState14 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo4, useRef as useRef8, useState as useState13 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var parseInlineStyle = (cssText) => {
@@ -3744,13 +3714,13 @@ var SlotPortal = ({
   slotClassName,
   SlotContent
 }) => {
-  const [target, setTarget] = useState14(null);
-  const lastTarget = useRef10(null);
+  const [target, setTarget] = useState13(null);
+  const lastTarget = useRef8(null);
   const style = useMemo4(
     () => slotStyle ? parseInlineStyle(slotStyle) : void 0,
     [slotStyle]
   );
-  useEffect10(() => {
+  useEffect9(() => {
     const el = entry.querySelector(`[data-puck-slot="${cssEscape2(slotName)}"]`);
     if (el !== lastTarget.current) {
       el?.replaceChildren();
@@ -3867,7 +3837,7 @@ function createDesignComponentConfig(registration) {
     style,
     ...props
   }) {
-    const getSnapshot = useCallback5(
+    const getSnapshot = useCallback4(
       () => registrationStore.get(name) ?? registration,
       []
     );
@@ -3879,8 +3849,8 @@ function createDesignComponentConfig(registration) {
     const html = reg.html ?? "";
     const styles = reg.styles;
     const script = reg.script;
-    const [entryEl, setEntryEl] = useState15(null);
-    const scriptRef = useRef11(null);
+    const [entryEl, setEntryEl] = useState14(null);
+    const scriptRef = useRef9(null);
     const annotations = useMemo5(() => getAnnotations(html), [html]);
     const { attrFields, arrayFields, attrSig, arraySig } = useMemo5(() => {
       const attr = [];
@@ -3923,12 +3893,12 @@ function createDesignComponentConfig(registration) {
       () => puck.isEditing ? /* @__PURE__ */ jsx32("div", { ref: setEntryEl }) : null,
       [puck.isEditing]
     );
-    useEffect11(() => {
+    useEffect10(() => {
       if (!puck.isEditing || !getPuck) return;
       getPuck().resolveDataById(id, "force");
     }, [reg, puck.isEditing, getPuck, id]);
-    const fieldWiring = useRef11(/* @__PURE__ */ new Map());
-    const morphed = useRef11(null);
+    const fieldWiring = useRef9(/* @__PURE__ */ new Map());
+    const morphed = useRef9(null);
     useLayoutEffect(() => {
       if (!puck.isEditing || !entryEl) return;
       if (morphed.current?.el !== entryEl || morphed.current?.html !== html || morphed.current?.attrSig !== attrSig) {
@@ -3946,14 +3916,14 @@ function createDesignComponentConfig(registration) {
         });
       }
     });
-    useEffect11(
+    useEffect10(
       () => () => {
         fieldWiring.current.forEach((cleanup) => cleanup());
         fieldWiring.current.clear();
       },
       []
     );
-    useEffect11(() => {
+    useEffect10(() => {
       if (!entryEl || !puck.isEditing) return;
       for (const attr of Array.from(entryEl.attributes)) {
         if ((attr.name === "data-puck-design" || attr.name.startsWith("data-puck-field-value-")) && !(attr.name in fieldValueAttrs)) {
@@ -3966,10 +3936,10 @@ function createDesignComponentConfig(registration) {
         }
       }
     }, [entryEl, fieldValueAttrs]);
-    const appliedArrayHtml = useRef11(/* @__PURE__ */ new WeakMap());
-    const arrayItemWiring = useRef11({});
-    const appliedArrays = useRef11(null);
-    useEffect11(() => {
+    const appliedArrayHtml = useRef9(/* @__PURE__ */ new WeakMap());
+    const arrayItemWiring = useRef9({});
+    const appliedArrays = useRef9(null);
+    useEffect10(() => {
       if (!puck.isEditing || !entryEl || !getPuck) return;
       if (appliedArrays.current?.el === entryEl && appliedArrays.current?.html === html && appliedArrays.current?.sig === arraySig) {
         return;
@@ -4021,7 +3991,7 @@ function createDesignComponentConfig(registration) {
       id,
       getPuck
     ]);
-    useEffect11(
+    useEffect10(
       () => () => {
         Object.values(arrayItemWiring.current).forEach(
           (wiring) => wiring.forEach(({ cleanup }) => cleanup())
@@ -4029,7 +3999,7 @@ function createDesignComponentConfig(registration) {
       },
       []
     );
-    useEffect11(() => {
+    useEffect10(() => {
       if (!script || !entryEl) return;
       scriptRef.current?.remove();
       const doc = entryEl.ownerDocument;
@@ -4084,7 +4054,7 @@ function createDesignComponentConfig(registration) {
 
 // src/lib/design/globals.tsx
 init_react_import();
-import { useEffect as useEffect12, useRef as useRef12 } from "react";
+import { useEffect as useEffect11, useRef as useRef10 } from "react";
 import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function getDynamicConfigGlobals(dynamicConfig) {
   if (typeof dynamicConfig !== "object" || dynamicConfig === null) return {};
@@ -4098,9 +4068,9 @@ function DesignGlobals({
   styles,
   script
 }) {
-  const scriptRef = useRef12(null);
-  const hostRef = useRef12(null);
-  useEffect12(() => {
+  const scriptRef = useRef10(null);
+  const hostRef = useRef10(null);
+  useEffect11(() => {
     if (!script) return;
     scriptRef.current?.remove();
     const doc = hostRef.current?.ownerDocument ?? document;
@@ -4400,85 +4370,68 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
-// src/components/Chat/index.tsx
-import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+// ../utils/lib/iterate-sse.ts
+init_react_import();
+async function* iterateSSE(body) {
+  const reader = body.getReader();
+  const dec = new TextDecoder();
+  let buf = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      let idx;
+      while ((idx = buf.indexOf("\n\n")) >= 0) {
+        const chunk = buf.slice(0, idx).trim();
+        buf = buf.slice(idx + 2);
+        if (!chunk) continue;
+        const line = chunk.startsWith("data: ") ? chunk.slice(6) : chunk;
+        try {
+          yield JSON.parse(line);
+        } catch {
+        }
+      }
+    }
+  } finally {
+    reader.cancel().catch(() => {
+    });
+    reader.releaseLock();
+  }
+}
+
+// src/lib/use-puck-ai.ts
 var q = qler();
+var usePuck = createUsePuck();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.2" : "unknown";
-var BENCHMARK = false;
+var PLUGIN_AI_VERSION = true ? "0.9.0-canary.50fad349" : "unknown";
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
-var getClassName18 = getClassNameFactory("Chat", styles_module_default);
-var usePuck = createUsePuck();
-function Chat2(props) {
-  const {
-    apiVersion = DEFAULT_API_VERSION,
-    chat,
-    designMode = false,
-    defaultMode = "assembly",
-    host = "/api/puck/chat",
-    prepareRequest,
-    scrollTrackingId
-  } = props;
-  const {
-    attachments,
-    examplePrompts,
-    actions: chatActions,
-    placeholder
-  } = chat ?? {};
+function usePuckAi({
+  host = "/api/puck/chat",
+  streamHost = "/api/puck/stream",
+  mode = "assembly",
+  apiVersion = DEFAULT_API_VERSION,
+  prepareRequest,
+  onFinish,
+  onError
+} = {}) {
   const puckDispatch = usePuck((s) => s.dispatch);
   const getPuck = useGetPuck4();
-  const localChatId = useRef13("");
-  const inputRef = useRef13(null);
-  const pluginRef = useRef13(null);
-  const [mode, setMode] = useState16(defaultMode);
-  const modeRef = useRef13(mode);
-  const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
-  useEffect13(() => {
+  const localChatId = useRef11("");
+  const pendingBuildOpsRef = useRef11([]);
+  const [error, setError] = useState15();
+  const [toolStatus, setToolStatus] = useState15({});
+  const [subagentState, setSubagentState] = useState15({});
+  const modeRef = useRef11(mode);
+  useEffect12(() => {
     modeRef.current = mode;
   }, [mode]);
   const puckData = usePuck((s) => s.appState.data);
-  useEffect13(() => {
+  useEffect12(() => {
     syncDesignComponents(getPuck);
   }, [puckData, getPuck]);
-  const [error, setError] = useState16();
-  const [userError, setUserError] = useState16();
-  const [composerAttachments, setComposerAttachments] = useState16([]);
-  const removedAttachmentClientIdsRef = useRef13(/* @__PURE__ */ new Set());
-  const uploadControllersRef = useRef13(/* @__PURE__ */ new Map());
-  const pendingBuildOpsRef = useRef13([]);
-  const [toolStatus, setToolStatus] = useState16({});
-  const [subagentState, setSubagentState] = useState16({});
-  const attachmentConfig = useMemo6(
-    () => ({
-      accept: attachments?.accept ?? defaultAttachmentAccept,
-      enabled: attachments?.enabled ?? true,
-      endpoint: `${host.replace(/\/$/, "")}/attachments`,
-      maxFiles: attachments?.maxFiles ?? defaultAttachmentConfig.maxFiles,
-      maxSizeBytes: attachments?.maxSizeBytes ?? defaultAttachmentConfig.maxSizeBytes
-    }),
-    [attachments, host]
-  );
-  useEffect13(
-    () => () => {
-      uploadControllersRef.current.forEach((controller) => controller.abort());
-      uploadControllersRef.current.clear();
-    },
-    []
-  );
-  const deleteAttachment = useCallback6(
-    async (attachmentId) => {
-      try {
-        await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
-          method: "DELETE"
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [attachmentConfig.endpoint]
-  );
-  const uploadScreenshot = useCallback6(
+  const uploadScreenshot = useCallback5(
     async (width, bucketUrl) => {
       try {
         const iframeDocument = document?.getElementById("preview-frame")?.contentDocument?.documentElement ?? null;
@@ -4527,7 +4480,7 @@ function Chat2(props) {
           nextFrame(() => {
             const { dispatch, config, resolveDataById } = getPuck();
             operations.forEach((queuedOperation) => {
-              (0, import_reducer.dispatchOp)(queuedOperation, {
+              dispatchOp(queuedOperation, {
                 getState: () => {
                   const { __private } = getPuck();
                   return __private.appState;
@@ -4550,15 +4503,18 @@ function Chat2(props) {
     BUILD_OP_DEBOUNCE_MS,
     { maxWait: BUILD_OP_DEBOUNCE_MS }
   );
-  const queueBuildOp = useCallback6(
+  const queueBuildOp = useCallback5(
     (operation) => {
       pendingBuildOpsRef.current.push(operation);
       debouncedFlushBuildOps();
     },
     [debouncedFlushBuildOps]
   );
-  const processData = useCallback6(
+  const processData = useCallback5(
     (dataPart) => {
+      if (dataPart.type.indexOf("data-") !== 0) {
+        return;
+      }
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4676,6 +4632,9 @@ function Chat2(props) {
           debouncedFlushBuildOps.flush();
           return;
         }
+        case "data-page": {
+          return;
+        }
         case "data-version-notice": {
           console.warn(dataPart.data.message);
           return;
@@ -4693,32 +4652,54 @@ function Chat2(props) {
       uploadScreenshot
     ]
   );
-  const { messages, status, sendMessage, regenerate, setMessages, stop } = useChat({
+  const getRequestConfig = useCallback5(() => {
+    const { config, appState } = getPuck();
+    const root = config.root ?? {
+      fields: {
+        title: {
+          type: "text",
+          ai: { instructions: "The title for the page" }
+        }
+      }
+    };
+    return {
+      ...config,
+      root,
+      components: {
+        ...config.components,
+        ...getRequestComponentConfigs(appState.data)
+      }
+    };
+  }, [getPuck]);
+  const settle = useCallback5(
+    async ({ isAbort } = {}) => {
+      debouncedFlushBuildOps.flush();
+      await q.wait();
+      if (!isAbort) {
+        puckDispatch({
+          type: "set",
+          state: getPuck().appState,
+          recordHistory: true
+        });
+      }
+    },
+    [debouncedFlushBuildOps, getPuck, puckDispatch]
+  );
+  const {
+    messages,
+    status: chatStatus,
+    sendMessage: chatSendMessage,
+    regenerate,
+    setMessages,
+    stop
+  } = useChat({
     generateId: () => prefixedUlid("msg"),
     messages: [],
     transport: new DefaultChatTransport2({
       api: host,
       prepareSendMessagesRequest: async (opts) => {
-        const { config, appState } = getPuck();
-        if (BENCHMARK) {
-          console.time("chat");
-        }
-        const root = config.root ?? {
-          fields: {
-            title: {
-              type: "text",
-              ai: { instructions: "The title for the page" }
-            }
-          }
-        };
-        const configWithRoot = {
-          ...config,
-          root,
-          components: {
-            ...config.components,
-            ...getRequestComponentConfigs(appState.data)
-          }
-        };
+        const { appState } = getPuck();
+        const configWithRoot = getRequestConfig();
         const defaultOptions = {
           headers: {
             ...opts.headers,
@@ -4735,56 +4716,340 @@ function Chat2(props) {
             config: configWithRoot,
             mode: modeRef.current
           }
-        };
-        if (prepareRequest) {
-          const userOptions = await prepareRequest(defaultOptions);
-          return {
-            headers: {
-              ...defaultOptions.headers,
-              ...userOptions.headers
-            },
-            credentials: userOptions.credentials ?? defaultOptions.credentials,
-            body: {
-              ...defaultOptions.body,
-              ...userOptions.body
-            }
-          };
-        }
-        return defaultOptions;
+        };
+        if (prepareRequest) {
+          const userOptions = await prepareRequest(defaultOptions);
+          return {
+            headers: {
+              ...defaultOptions.headers,
+              ...userOptions.headers
+            },
+            credentials: userOptions.credentials ?? defaultOptions.credentials,
+            body: {
+              ...defaultOptions.body,
+              ...userOptions.body
+            }
+          };
+        }
+        return defaultOptions;
+      }
+    }),
+    onData: processData,
+    onError: (e) => {
+      console.error(e);
+      setError(e.message);
+      onError?.(e);
+    },
+    onFinish: (options) => {
+      settle(options).then(() => onFinish?.(options));
+    }
+  });
+  const sendMessage = useCallback5(
+    async (prompt, opts = {}) => {
+      const text = prompt.trim();
+      const files = opts.files ?? [];
+      if (!text && files.length === 0) return;
+      if (opts.mode) modeRef.current = opts.mode;
+      setError(void 0);
+      await chatSendMessage({
+        role: "user",
+        parts: [...text ? [{ type: "text", text }] : [], ...files]
+      });
+    },
+    [chatSendMessage]
+  );
+  const [isStreaming, setIsStreaming] = useState15(false);
+  const streamAbortRef = useRef11(null);
+  const stream = useCallback5(
+    async (prompt, opts = {}) => {
+      const text = prompt.trim();
+      if (!text) return;
+      streamAbortRef.current?.abort();
+      const controller = new AbortController();
+      streamAbortRef.current = controller;
+      setError(void 0);
+      setIsStreaming(true);
+      try {
+        const { appState } = getPuck();
+        const response = await fetch(streamHost, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "puck-api-version": apiVersion,
+            "x-puck-plugin-ai-version": PLUGIN_AI_VERSION
+          },
+          body: JSON.stringify({
+            prompt: text,
+            config: getRequestConfig(),
+            pageData: appState.data,
+            mode: opts.mode ?? modeRef.current,
+            context: opts.context
+          }),
+          signal: controller.signal
+        });
+        if (!response.ok || !response.body) {
+          throw new Error(
+            `Puck AI request failed: ${response.status} ${response.statusText}`
+          );
+        }
+        for await (const part of iterateSSE(response.body)) {
+          if (controller.signal.aborted) return;
+          if (part.type === "error") throw new Error(part.errorText);
+          processData(part);
+        }
+        await settle();
+      } catch (e) {
+        if (controller.signal.aborted) return;
+        const err = e instanceof Error ? e : new Error(String(e));
+        console.error(err);
+        setError(err.message);
+        onError?.(err);
+      } finally {
+        if (streamAbortRef.current === controller) {
+          streamAbortRef.current = null;
+          setIsStreaming(false);
+        }
+      }
+    },
+    [
+      apiVersion,
+      getPuck,
+      getRequestConfig,
+      onError,
+      processData,
+      settle,
+      streamHost
+    ]
+  );
+  const stopAll = useCallback5(() => {
+    streamAbortRef.current?.abort();
+    streamAbortRef.current = null;
+    setIsStreaming(false);
+    stop();
+  }, [stop]);
+  useEffect12(() => () => stopAll(), [stopAll]);
+  return {
+    /**
+     * Send a prompt as the next turn of a conversation. The agent sees the
+     * history, and can write, check its work and correct itself.
+     */
+    sendMessage,
+    /**
+     * Run a one-shot generation from a prompt, with no conversation. Cheaper
+     * and more predictable than `sendMessage`, but it stops after its first
+     * write rather than reviewing the result.
+     */
+    stream,
+    /** Abort whichever request is in flight */
+    stop: stopAll,
+    status: isStreaming ? "streaming" : chatStatus,
+    /** The conversation so far, for building a transcript */
+    messages,
+    setMessages,
+    regenerate,
+    error,
+    /** Live per-tool progress, keyed by tool call id */
+    toolStatus,
+    /** Live subagent progress, keyed by tool call id */
+    subagentState,
+    /**
+     * @internal Apply a single stream part to the editor. Exposed for
+     * replaying a recorded stream (the marketing demo) — a real agent should
+     * go through `stream`.
+     */
+    processData
+  };
+}
+function finalizeReasoningParts(parts) {
+  return parts.map(
+    (part) => part.kind === "reasoning" && part.state !== "done" ? { ...part, state: "done" } : part
+  );
+}
+function reduceSubagentEvent(current, event) {
+  if (event.kind === "start") {
+    if (current[event.toolCallId]) return current;
+    return {
+      ...current,
+      [event.toolCallId]: {
+        toolCallId: event.toolCallId,
+        parentToolCallId: event.parentToolCallId,
+        agentType: event.agentType,
+        depth: event.depth,
+        label: event.label,
+        state: "running",
+        parts: []
+      }
+    };
+  }
+  const existing = current[event.toolCallId];
+  if (!existing) return current;
+  if (event.kind === "finish") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        state: "done",
+        parts: finalizeReasoningParts(existing.parts)
+      }
+    };
+  }
+  if (event.kind === "reasoning-delta") {
+    const parts = [...existing.parts];
+    const last = parts[parts.length - 1];
+    if (last && last.kind === "reasoning" && last.state !== "done") {
+      const separator = last.blockId !== event.blockId ? "\n\n" : "";
+      parts[parts.length - 1] = {
+        ...last,
+        blockId: event.blockId,
+        text: last.text + separator + event.text
+      };
+    } else {
+      parts.push({
+        kind: "reasoning",
+        blockId: event.blockId,
+        text: event.text,
+        state: "streaming"
+      });
+    }
+    return {
+      ...current,
+      [event.toolCallId]: { ...existing, parts }
+    };
+  }
+  if (event.kind === "text-delta") {
+    const parts = finalizeReasoningParts(existing.parts);
+    const last = parts[parts.length - 1];
+    if (last && last.kind === "text" && last.blockId === event.blockId) {
+      parts[parts.length - 1] = { ...last, text: last.text + event.text };
+    } else {
+      parts.push({ kind: "text", blockId: event.blockId, text: event.text });
+    }
+    return {
+      ...current,
+      [event.toolCallId]: { ...existing, parts }
+    };
+  }
+  if (event.kind === "tool-call") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        parts: [
+          ...finalizeReasoningParts(existing.parts),
+          {
+            kind: "tool",
+            childToolCallId: event.childToolCallId,
+            toolName: event.toolName,
+            input: event.input
+          }
+        ]
       }
-    }),
-    onData: processData,
-    onError: (e) => {
-      console.error(e);
-      if (BENCHMARK) {
-        console.timeEnd("chat");
+    };
+  }
+  if (event.kind === "tool-result") {
+    return {
+      ...current,
+      [event.toolCallId]: {
+        ...existing,
+        parts: existing.parts.map(
+          (part) => part.kind === "tool" && part.childToolCallId === event.childToolCallId ? { ...part, output: event.output } : part
+        )
       }
-      setError(e.message);
-    },
-    onFinish: (options) => {
-      debouncedFlushBuildOps.flush();
-      q.wait().then(() => {
-        if (!options.isAbort) {
-          puckDispatch({
-            type: "set",
-            state: getPuck().appState,
-            recordHistory: true
-          });
-        }
-        chat?.onFinish?.(options);
-      }).finally(() => {
-        if (BENCHMARK) {
-          console.timeEnd("chat");
-        }
-      });
-    }
-  });
+    };
+  }
+  return current;
+}
+function nextFrame(cb) {
+  let ran = false;
+  const run = () => {
+    if (ran) return;
+    ran = true;
+    cb();
+  };
+  if (typeof document !== "undefined" && document.hidden) {
+    queueMicrotask(run);
+    return;
+  }
+  requestAnimationFrame(run);
+  setTimeout(run, 100);
+}
+
+// src/components/Chat/index.tsx
+import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName18 = getClassNameFactory("Chat", styles_module_default);
+var usePuck2 = createUsePuck2();
+function Chat2(props) {
+  const {
+    apiVersion = DEFAULT_API_VERSION,
+    chat,
+    designMode = false,
+    defaultMode = "assembly",
+    host = "/api/puck/chat",
+    prepareRequest,
+    scrollTrackingId
+  } = props;
+  const {
+    attachments,
+    examplePrompts,
+    actions: chatActions,
+    placeholder
+  } = chat ?? {};
+  const puckDispatch = usePuck2((s) => s.dispatch);
+  const inputRef = useRef12(null);
+  const pluginRef = useRef12(null);
+  const [mode, setMode] = useState16(defaultMode);
+  const designModeVisible = typeof designMode === "boolean" ? designMode : designMode.visible ?? false;
+  const [error, setError] = useState16();
+  const [userError, setUserError] = useState16();
+  const [composerAttachments, setComposerAttachments] = useState16([]);
+  const removedAttachmentClientIdsRef = useRef12(/* @__PURE__ */ new Set());
+  const uploadControllersRef = useRef12(/* @__PURE__ */ new Map());
+  const attachmentConfig = useMemo6(
+    () => ({
+      accept: attachments?.accept ?? defaultAttachmentAccept,
+      enabled: attachments?.enabled ?? true,
+      endpoint: `${host.replace(/\/$/, "")}/attachments`,
+      maxFiles: attachments?.maxFiles ?? defaultAttachmentConfig.maxFiles,
+      maxSizeBytes: attachments?.maxSizeBytes ?? defaultAttachmentConfig.maxSizeBytes
+    }),
+    [attachments, host]
+  );
   useEffect13(
     () => () => {
-      stop();
+      uploadControllersRef.current.forEach((controller) => controller.abort());
+      uploadControllersRef.current.clear();
+    },
+    []
+  );
+  const deleteAttachment = useCallback6(
+    async (attachmentId) => {
+      try {
+        await fetch(`${attachmentConfig.endpoint}/${attachmentId}`, {
+          method: "DELETE"
+        });
+      } catch (e) {
+        console.error(e);
+      }
     },
-    [stop]
+    [attachmentConfig.endpoint]
   );
+  const {
+    sendMessage,
+    status,
+    messages,
+    setMessages,
+    regenerate,
+    error: aiError,
+    toolStatus,
+    subagentState,
+    processData
+  } = usePuckAi({
+    host,
+    mode,
+    apiVersion,
+    prepareRequest,
+    onFinish: chat?.onFinish
+  });
   const [forcedStatus, setForcedStatus] = useState16();
   const resolvedStatus = useMemo6(
     () => forcedStatus ?? status,
@@ -4808,7 +5073,11 @@ function Chat2(props) {
       processData,
       setMessages,
       setStatus: setForcedStatus,
-      sendMessage,
+      sendMessage: (message) => sendMessage(
+        message.parts.filter(
+          (part) => Boolean(part && part.type === "text")
+        ).map((part) => part.text).join("")
+      ),
       focus: () => inputRef?.current?.focus()
     };
   }, [processData]);
@@ -4850,13 +5119,7 @@ function Chat2(props) {
     }
     setComposerAttachments([]);
     removedAttachmentClientIdsRef.current.clear();
-    sendMessage({
-      role: "user",
-      parts: [
-        ...text ? [{ type: "text", text }] : [],
-        ...readyAttachments
-      ]
-    }).catch((e) => {
+    sendMessage(text, { files: readyAttachments }).catch((e) => {
       console.error(e);
       setError("Failed to send message.");
       setComposerAttachments(composerAttachments);
@@ -5072,7 +5335,7 @@ function Chat2(props) {
           label
         )
       ),
-      error,
+      error: error ?? aiError,
       handleRetry: () => {
         setError("");
         regenerate();
@@ -5090,105 +5353,6 @@ function Chat2(props) {
     }
   ) }) }) }) });
 }
-function finalizeReasoningParts(parts) {
-  return parts.map(
-    (part) => part.kind === "reasoning" && part.state !== "done" ? { ...part, state: "done" } : part
-  );
-}
-function reduceSubagentEvent(current, event) {
-  if (event.kind === "start") {
-    if (current[event.toolCallId]) return current;
-    return {
-      ...current,
-      [event.toolCallId]: {
-        toolCallId: event.toolCallId,
-        parentToolCallId: event.parentToolCallId,
-        agentType: event.agentType,
-        depth: event.depth,
-        label: event.label,
-        state: "running",
-        parts: []
-      }
-    };
-  }
-  const existing = current[event.toolCallId];
-  if (!existing) return current;
-  if (event.kind === "finish") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        state: "done",
-        parts: finalizeReasoningParts(existing.parts)
-      }
-    };
-  }
-  if (event.kind === "reasoning-delta") {
-    const parts = [...existing.parts];
-    const last = parts[parts.length - 1];
-    if (last && last.kind === "reasoning" && last.state !== "done") {
-      const separator = last.blockId !== event.blockId ? "\n\n" : "";
-      parts[parts.length - 1] = {
-        ...last,
-        blockId: event.blockId,
-        text: last.text + separator + event.text
-      };
-    } else {
-      parts.push({
-        kind: "reasoning",
-        blockId: event.blockId,
-        text: event.text,
-        state: "streaming"
-      });
-    }
-    return {
-      ...current,
-      [event.toolCallId]: { ...existing, parts }
-    };
-  }
-  if (event.kind === "text-delta") {
-    const parts = finalizeReasoningParts(existing.parts);
-    const last = parts[parts.length - 1];
-    if (last && last.kind === "text" && last.blockId === event.blockId) {
-      parts[parts.length - 1] = { ...last, text: last.text + event.text };
-    } else {
-      parts.push({ kind: "text", blockId: event.blockId, text: event.text });
-    }
-    return {
-      ...current,
-      [event.toolCallId]: { ...existing, parts }
-    };
-  }
-  if (event.kind === "tool-call") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        parts: [
-          ...finalizeReasoningParts(existing.parts),
-          {
-            kind: "tool",
-            childToolCallId: event.childToolCallId,
-            toolName: event.toolName,
-            input: event.input
-          }
-        ]
-      }
-    };
-  }
-  if (event.kind === "tool-result") {
-    return {
-      ...current,
-      [event.toolCallId]: {
-        ...existing,
-        parts: existing.parts.map(
-          (part) => part.kind === "tool" && part.childToolCallId === event.childToolCallId ? { ...part, output: event.output } : part
-        )
-      }
-    };
-  }
-  return current;
-}
 function AttachmentComposer({
   accept,
   attachments,
@@ -5274,20 +5438,6 @@ function Placeholder({
     ] })
   ] });
 }
-function nextFrame(cb) {
-  let ran = false;
-  const run = () => {
-    if (ran) return;
-    ran = true;
-    cb();
-  };
-  if (typeof document !== "undefined" && document.hidden) {
-    queueMicrotask(run);
-    return;
-  }
-  requestAnimationFrame(run);
-  setTimeout(run, 100);
-}
 function isScrolledIntoView(el) {
   const rect = el.getBoundingClientRect();
   const elemTop = rect.top;
@@ -5297,7 +5447,7 @@ function isScrolledIntoView(el) {
 
 // src/components/ScrollTracking/ScrollTracking.tsx
 init_react_import();
-import { useEffect as useEffect14, useRef as useRef14 } from "react";
+import { useEffect as useEffect14, useRef as useRef13 } from "react";
 
 // src/lib/scroll-into-view-local.ts
 init_react_import();
@@ -5367,8 +5517,8 @@ var ScrollTracking = ({
   children,
   trackingId
 }) => {
-  const followedRefs = useRef14([]);
-  const enabledRef = useRef14(false);
+  const followedRefs = useRef13([]);
+  const enabledRef = useRef13(false);
   useEffect14(() => {
     return subscribeToScrollTrackingEvents(({ id, enabled }) => {
       if (id !== trackingId) return;
@@ -5396,7 +5546,7 @@ var ScrollTracking = ({
 
 // src/components/Drawer/index.tsx
 init_react_import();
-import { createUsePuck as createUsePuck2 } from "@puckeditor/core";
+import { createUsePuck as createUsePuck3 } from "@puckeditor/core";
 
 // src/components/ManageComponents/index.tsx
 init_react_import();
@@ -5494,10 +5644,10 @@ var styles_module_default11 = { "Drawer--empty": "_Drawer--empty_8e8cs_1" };
 
 // src/components/Drawer/index.tsx
 import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
-var usePuck2 = createUsePuck2();
+var usePuck3 = createUsePuck3();
 var cx11 = get_class_name_factory_default("Drawer", styles_module_default11);
 var createDrawer = (designModeVisible) => function Drawer({ children }) {
-  const config = usePuck2((s) => s.config);
+  const config = usePuck3((s) => s.config);
   if (Object.keys(config.components).length === 0) {
     return /* @__PURE__ */ jsx37("div", { className: cx11({ empty: true }), children: "No blocks" });
   }
@@ -5507,8 +5657,8 @@ var createDrawer = (designModeVisible) => function Drawer({ children }) {
   ] });
 };
 
-// src/index.tsx
-import { Fragment as Fragment11, jsx as jsx38 } from "react/jsx-runtime";
+// src/lib/design/with-dynamic-config.ts
+init_react_import();
 function withDynamicConfig(config, data) {
   const registrations = getPersistedRegistrations(data);
   const dynamicConfig = {};
@@ -5538,6 +5688,9 @@ function withDynamicConfig(config, data) {
   applyConfigFieldMetadata(result, dynamicConfig);
   return result;
 }
+
+// src/index.tsx
+import { Fragment as Fragment11, jsx as jsx38 } from "react/jsx-runtime";
 function createAiPlugin(opts) {
   const { scrollTracking = true, ...rest } = opts || {};
   const scrollTrackingId = `puck-ai-scroll-${ulid2()}`;
@@ -5561,6 +5714,7 @@ function createAiPlugin(opts) {
 }
 export {
   createAiPlugin,
+  usePuckAi,
   withDynamicConfig
 };
 /*! Bundled license information: