@puckeditor/plugin-ai 0.1.0-canary.2e4dc235 → 0.1.0-canary.2ef56cc2

package/dist/index.css

@@ -602,13 +602,13 @@ p {
 }
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Page/Page.module.css/#css-module-data */
-._Page_1uz1e_1 {
+._Page_1pzwy_1 {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
-._Page-masthead_1uz1e_8 {
+._Page-masthead_1pzwy_8 {
   align-items: center;
   display: flex;
   gap: 16px;
@@ -617,43 +617,75 @@ p {
   border-bottom: 1px solid var(--puck-color-grey-10);
   min-height: 64px;
 }
-._Page-crumbs_1uz1e_18 {
+._Page-crumbs_1pzwy_18 {
   display: flex;
   gap: 32px;
 }
-._Page-crumb_1uz1e_18 {
+._Page-crumb_1pzwy_18 {
   color: var(--puck-color-grey-05);
   position: relative;
 }
-._Page-crumbLink_1uz1e_28 {
+._Page-crumbLink_1pzwy_28 {
   color: var(--puck-color-grey-05);
   text-decoration: none;
 }
-._Page-crumbLink_1uz1e_28:hover {
+._Page-crumbLink_1pzwy_28:hover {
   color: var(--puck-color-azure-04);
 }
-._Page-crumb_1uz1e_18:last-of-type {
+._Page-crumb_1pzwy_18:last-of-type {
   color: var(--puck-color-grey-01);
   font-weight: 600;
 }
-._Page-crumb_1uz1e_18::before {
+._Page-crumb_1pzwy_18::before {
   position: absolute;
   content: "/";
   left: -19px;
   color: var(--puck-color-grey-09);
   font-weight: 400;
 }
-._Page-crumb_1uz1e_18:first-of-type::before {
+._Page-crumb_1pzwy_18:first-of-type::before {
   display: none;
 }
-._Page-crumb_1uz1e_18 {
+._Page-crumb_1pzwy_18 {
   color: var(--puck-color-grey-05);
   position: relative;
   text-decoration: none;
 }
-._Page-actions_1uz1e_60 {
+._Page-actions_1pzwy_60 {
   margin-left: auto;
 }
+._Page-footer_1pzwy_64 {
+  border-top: 1px solid var(--puck-color-grey-10);
+  padding: 16px 24px;
+}
+
+/* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Pagination/Pagination.module.css/#css-module-data */
+._Pagination_1okv2_1 {
+  align-items: baseline;
+  display: flex;
+  gap: 4px;
+}
+._PaginationButton_1okv2_8 {
+  align-items: center;
+  border-radius: 4px;
+  color: var(--puck-color-grey-05);
+  display: flex;
+  justify-content: center;
+  text-decoration: none;
+  min-width: 40px;
+  height: 40px;
+}
+._PaginationButton--isActive_1okv2_20 {
+  background-color: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-04);
+}
+._PaginationButton_1okv2_8:hover {
+  background-color: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-04);
+}
+._Pagination-ellipsis_1okv2_30 {
+  color: var(--puck-color-grey-05);
+}
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Section/Section.module.css/#css-module-data */
 ._Section-inner_1uwo0_1 {
@@ -737,23 +769,26 @@ p {
 }
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Table/Table.module.css/#css-module-data */
-._Table_1t44j_1 {
+._Table_1w0os_1 {
   color: black;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  overflow-y: auto;
 }
-._Table-filters_1t44j_8 {
+._Table-filters_1w0os_9 {
   margin: 16px;
 }
-._Table-inner_1t44j_12 {
+._Table-inner_1w0os_13 {
   text-align: left;
 }
-._Table-table_1t44j_16 {
+._Table-table_1w0os_17 {
+  color: var(--puck-color-grey-02);
+  font-size: var(--puck-font-size-xxs);
   position: relative;
   width: 100%;
 }
-._Table_1t44j_1 thead {
+._Table_1w0os_1 thead {
   background: white;
   font-size: var(--puck-font-size-xxs);
   position: sticky;
@@ -761,55 +796,58 @@ p {
   white-space: nowrap;
   z-index: 1;
 }
-._Table_1t44j_1 thead::after {
+._Table_1w0os_1 thead::after {
   content: "";
   position: absolute;
   height: 1px;
   width: 100%;
-  background-color: var(--puck-color-grey-09);
+  background-color: var(--puck-color-grey-10);
 }
-._Table_1t44j_1 tbody tr {
+._Table_1w0os_1 tbody tr {
   z-index: 0;
 }
-._Table_1t44j_1 th {
-  background: white;
-  font-weight: 600;
+._Table_1w0os_1 th {
+  background: var(--puck-color-grey-12);
+  font-weight: 400;
   padding-left: 24px;
   padding-right: 24px;
-  padding-bottom: 20px;
-  padding-top: 20px;
+  padding-bottom: 12px;
+  padding-top: 12px;
 }
 @media (--standard-viewport) {
-  ._Table_1t44j_1 th {
+  ._Table_1w0os_1 th {
     padding-left: 32px;
     padding-right: 32px;
   }
 }
-._Table_1t44j_1 td {
+._Table_1w0os_1 td {
   border-bottom: 1px solid var(--puck-color-grey-10);
   padding-left: 24px;
   padding-right: 24px;
-  padding-bottom: 20px;
-  padding-top: 20px;
+  padding-bottom: 16px;
+  padding-top: 16px;
   white-space: nowrap;
 }
-._Table_1t44j_1 tbody tr:last-of-type td {
+._Table_1w0os_1 td:not(:first-of-type) {
+  color: var(--puck-color-grey-05);
+}
+._Table_1w0os_1 tbody tr:last-of-type td {
   border-bottom: none;
 }
 @media (--standard-viewport) {
-  ._Table_1t44j_1 td {
+  ._Table_1w0os_1 td {
     padding-left: 32px;
     padding-right: 32px;
   }
 }
-._Table-footer_1t44j_78 {
+._Table-footer_1w0os_85 {
   border-top: 1px solid var(--puck-color-grey-09);
 }
-._Table--clickableRows_1t44j_82 tbody tr:hover {
+._Table--clickableRows_1w0os_89 tbody tr:hover {
   background: var(--puck-color-azure-12);
   cursor: pointer;
 }
-._Table-placeholder_1t44j_87 {
+._Table-placeholder_1w0os_94 {
   align-items: center;
   color: var(--puck-color-grey-06);
   justify-content: center;
@@ -819,6 +857,9 @@ p {
   width: 100%;
   height: 100%;
 }
+._Table-loader_1w0os_105 {
+  padding: 16px 24px;
+}
 
 /* css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/VerticalSpace/VerticalSpace.module.css/#css-module-data */
 ._VerticalSpace_1tjaw_1 {

package/dist/index.js

@@ -20681,7 +20681,7 @@ function useChat(_a17 = {}) {
 
 // src/components/Chat/index.tsx
 var import_puck2 = require("@measured/puck");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_ulid = require("ulid");
 
 // ../utils/lib/get-class-name-factory.ts
@@ -20721,7 +20721,7 @@ var styles_module_default = { "Chat": "_Chat_1mv7h_1", "Chat-header": "_Chat-hea
 
 // src/components/ChatBody/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
 var import_react_markdown = __toESM(require("react-markdown"));
 
@@ -21182,12 +21182,28 @@ init_react_import();
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Page/Page.module.css#css-module
 init_react_import();
-var Page_module_default = { "Page": "_Page_1uz1e_1", "Page-masthead": "_Page-masthead_1uz1e_8", "Page-crumbs": "_Page-crumbs_1uz1e_18", "Page-crumb": "_Page-crumb_1uz1e_18", "Page-crumbLink": "_Page-crumbLink_1uz1e_28", "Page-actions": "_Page-actions_1uz1e_60" };
+var Page_module_default = { "Page": "_Page_1pzwy_1", "Page-masthead": "_Page-masthead_1pzwy_8", "Page-crumbs": "_Page-crumbs_1pzwy_18", "Page-crumb": "_Page-crumb_1pzwy_18", "Page-crumbLink": "_Page-crumbLink_1pzwy_28", "Page-actions": "_Page-actions_1pzwy_60", "Page-footer": "_Page-footer_1pzwy_64" };
 
 // ../platform-client/components/Page/Page.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var cx2 = getClassNameFactory2("Page", Page_module_default);
 
+// ../platform-client/components/Pagination/index.ts
+init_react_import();
+
+// ../platform-client/components/Pagination/Pagination.tsx
+init_react_import();
+var import_react13 = require("react");
+
+// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Pagination/Pagination.module.css#css-module
+init_react_import();
+var Pagination_module_default = { "Pagination": "_Pagination_1okv2_1", "PaginationButton": "_PaginationButton_1okv2_8", "PaginationButton--isActive": "_PaginationButton--isActive_1okv2_20", "Pagination-ellipsis": "_Pagination-ellipsis_1okv2_30" };
+
+// ../platform-client/components/Pagination/Pagination.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var cx3 = getClassNameFactory2("Pagination", Pagination_module_default);
+var cxButton = getClassNameFactory2("PaginationButton", Pagination_module_default);
+
 // ../platform-client/components/Section/index.ts
 init_react_import();
 
@@ -21199,7 +21215,7 @@ init_react_import();
 var Section_module_default = { "Section-inner": "_Section-inner_1uwo0_1", "Section--flush": "_Section--flush_1uwo0_8", "Section": "_Section_1uwo0_1", "Section--full": "_Section--full_1uwo0_17" };
 
 // ../platform-client/components/Section/Section.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var getClassName12 = getClassNameFactory2("Section", Section_module_default);
 
 // ../platform-client/components/StatusTag/index.ts
@@ -21219,25 +21235,25 @@ init_react_import();
 var Tag_module_default = { "Tag": "_Tag_1baze_1", "Tag--colorBlue": "_Tag--colorBlue_1baze_19", "Tag--colorGreen": "_Tag--colorGreen_1baze_23", "Tag--colorRed": "_Tag--colorRed_1baze_27", "Tag--colorMuted": "_Tag--colorMuted_1baze_31", "Tag-sprite": "_Tag-sprite_1baze_35", "Tag--pulse": "_Tag--pulse_1baze_39", "pulse": "_pulse_1baze_1" };
 
 // ../platform-client/components/Tag/Tag.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var getClassName13 = getClassNameFactory2("Tag", Tag_module_default);
 
 // ../platform-client/components/StatusTag/StatusTag.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // ../platform-client/components/Table/index.ts
 init_react_import();
 
 // ../platform-client/components/Table/Table.tsx
 init_react_import();
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Table/Table.module.css#css-module
 init_react_import();
-var Table_module_default = { "Table": "_Table_1t44j_1", "Table-filters": "_Table-filters_1t44j_8", "Table-inner": "_Table-inner_1t44j_12", "Table-table": "_Table-table_1t44j_16", "Table-footer": "_Table-footer_1t44j_78", "Table--clickableRows": "_Table--clickableRows_1t44j_82", "Table-placeholder": "_Table-placeholder_1t44j_87" };
+var Table_module_default = { "Table": "_Table_1w0os_1", "Table-filters": "_Table-filters_1w0os_9", "Table-inner": "_Table-inner_1w0os_13", "Table-table": "_Table-table_1w0os_17", "Table-footer": "_Table-footer_1w0os_85", "Table--clickableRows": "_Table--clickableRows_1w0os_89", "Table-placeholder": "_Table-placeholder_1w0os_94", "Table-loader": "_Table-loader_1w0os_105" };
 
 // ../platform-client/components/Table/Table.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var getClassName14 = get_class_name_factory_default("Table", Table_module_default);
 
 // ../platform-client/components/Textarea/index.tsx
@@ -21255,14 +21271,14 @@ init_react_import();
 var VerticalSpace_module_default = { "VerticalSpace": "_VerticalSpace_1tjaw_1", "VerticalSpace--size4": "_VerticalSpace--size4_1tjaw_5", "VerticalSpace--size8": "_VerticalSpace--size8_1tjaw_9", "VerticalSpace--size16": "_VerticalSpace--size16_1tjaw_13", "VerticalSpace--size32": "_VerticalSpace--size32_1tjaw_17", "VerticalSpace--size40": "_VerticalSpace--size40_1tjaw_21", "VerticalSpace--size48": "_VerticalSpace--size48_1tjaw_25", "VerticalSpace--size56": "_VerticalSpace--size56_1tjaw_29", "VerticalSpace--size96": "_VerticalSpace--size96_1tjaw_33", "VerticalSpace--size128": "_VerticalSpace--size128_1tjaw_37" };
 
 // ../platform-client/components/VerticalSpace/VerticalSpace.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName15 = get_class_name_factory_default("VerticalSpace", VerticalSpace_module_default);
 
 // ../platform-client/context/editor.tsx
 init_react_import();
-var import_react14 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ctx = (0, import_react14.createContext)({});
+var import_react15 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ctx = (0, import_react15.createContext)({});
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/ChatBody/styles.module.css#css-module
 init_react_import();
@@ -21270,15 +21286,15 @@ var styles_module_default3 = { "Chat": "_Chat_14j71_1", "Chat-inner": "_Chat-inn
 
 // src/components/PromptForm/index.tsx
 init_react_import();
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/PromptForm/styles.module.css#css-module
 init_react_import();
 var styles_module_default4 = { "PromptForm": "_PromptForm_136g1_1", "PromptForm-inner": "_PromptForm-inner_136g1_8", "PromptForm--dark": "_PromptForm--dark_136g1_14", "PromptForm--glow": "_PromptForm--glow_136g1_19", "PromptForm-glow": "_PromptForm-glow_136g1_19", "loop": "_loop_136g1_1", "PromptForm-formInner": "_PromptForm-formInner_136g1_60", "PromptForm-input": "_PromptForm-input_136g1_64", "PromptForm--disabled": "_PromptForm--disabled_136g1_92", "PromptForm-helper": "_PromptForm-helper_136g1_97", "PromptForm-actions": "_PromptForm-actions_136g1_107", "PromptForm-actionsLeft": "_PromptForm-actionsLeft_136g1_118", "PromptForm-actionsRight": "_PromptForm-actionsRight_136g1_124", "PromptForm-actionSubmit": "_PromptForm-actionSubmit_136g1_128", "PromptForm--isDisabled": "_PromptForm--isDisabled_136g1_147", "PromptForm--isLoading": "_PromptForm--isLoading_136g1_152" };
 
 // src/components/PromptForm/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var cx3 = getClassNameFactory2("PromptForm", styles_module_default4);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var cx4 = getClassNameFactory2("PromptForm", styles_module_default4);
 function PromptForm({
   actions,
   colorScheme = "light",
@@ -21290,8 +21306,8 @@ function PromptForm({
   isLoading,
   placeholder = "Create a page for..."
 }) {
-  const hasSetInitialPrompt = (0, import_react15.useRef)(false);
-  const [prompt, setPrompt] = (0, import_react15.useState)("");
+  const hasSetInitialPrompt = (0, import_react16.useRef)(false);
+  const [prompt, setPrompt] = (0, import_react16.useState)("");
   const sendPrompt = () => {
     if (isLoading || isDisabled) return;
     if (handleSubmit) {
@@ -21299,7 +21315,7 @@ function PromptForm({
     }
     setPrompt("");
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const currentUrl = new URL(location.href);
     const initialPrompt = currentUrl.searchParams.get("initialPrompt");
     if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
@@ -21307,31 +21323,31 @@ function PromptForm({
       setPrompt(initialPrompt);
     }
   }, [setPrompt]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
-      className: cx3({
+      className: cx4({
         isDisabled,
         isLoading,
         dark: colorScheme === "dark",
         glow
       }),
       children: [
-        helperText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("helper"), children: helperText }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("inner"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx3("glow") }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("helper"), children: helperText }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("inner"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx4("glow") }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "form",
             {
               onSubmit: (e) => {
                 e.preventDefault();
                 sendPrompt();
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("formInner"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("formInner"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   import_react_textarea_autosize.default,
                   {
-                    className: cx3("input"),
+                    className: cx4("input"),
                     name: "prompt",
                     minRows: 2,
                     placeholder,
@@ -21352,15 +21368,15 @@ function PromptForm({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("actions"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("actionsLeft"), children: actions }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("actionsRight"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("actions"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("actionsLeft"), children: actions }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("actionsRight"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "button",
                     {
-                      className: cx3("actionSubmit"),
+                      className: cx4("actionSubmit"),
                       type: "submit",
                       disabled: isLoading,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ArrowUp, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowUp, {})
                     }
                   ) })
                 ] })
@@ -21375,13 +21391,13 @@ function PromptForm({
 
 // src/lib/context.ts
 init_react_import();
-var import_react16 = require("react");
-var toolStatusContext = (0, import_react16.createContext)({});
+var import_react17 = require("react");
+var toolStatusContext = (0, import_react17.createContext)({});
 var ToolStatusProvider = toolStatusContext.Provider;
 
 // src/components/ChatBody/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var cx4 = getClassNameFactory2("Chat", styles_module_default3);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var cx5 = getClassNameFactory2("Chat", styles_module_default3);
 var cxMessage = getClassNameFactory2("ChatMessage", styles_module_default3);
 function ChatBody({
   children,
@@ -21396,17 +21412,17 @@ function ChatBody({
 }) {
   const { scrollRef, contentRef } = (0, import_use_stick_to_bottom.useStickToBottom)();
   const hasMessages = messages && messages.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4({ hasMessages, hasChildren: !!children, hideInput }), children: [
-    children ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("default"), children }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("inner"), ref: scrollRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatMessage, { message }, message.id)) }),
-      status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, { size: 14 }) }),
-      error45 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("error"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("errorLabel"), children: "Something went wrong." }),
-        handleRetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("errorAction"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RotateCcw, { size: "14" }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx5({ hasMessages, hasChildren: !!children, hideInput }), children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("default"), children }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx5("inner"), ref: scrollRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatMessage, { message }, message.id)) }),
+      status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, { size: 14 }) }),
+      error45 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx5("error"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("errorLabel"), children: "Something went wrong." }),
+        handleRetry && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("errorAction"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RotateCcw, { size: "14" }) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("form"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx5("form"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           PromptForm,
           {
             glow: !hasMessages,
@@ -21416,19 +21432,19 @@ function ChatBody({
             placeholder: "What do you want to build?"
           }
         ),
-        examplePrompts ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("examplePrompts"), children: examplePrompts }) : null
+        examplePrompts ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("examplePrompts"), children: examplePrompts }) : null
       ] })
     ] })
   ] });
 }
 function ChatMessage({ message }) {
   const { role, parts } = message;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: cxMessage({ [`${role}Role`]: true }),
       "data-message-id": message.id,
-      children: parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ChatMessagePart,
         {
           part,
@@ -21444,25 +21460,25 @@ function ChatMessageWrapper({
   role
 }) {
   if (role === "assistant") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_markdown.default, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_markdown.default, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children });
 }
 function ChatMessagePart({
   part,
   role
 }) {
   if (part.type === "text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("text"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatMessageWrapper, { role, children: part.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cxMessage("text"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatMessageWrapper, { role, children: part.text }) });
   }
   if (part.type === "tool-createPage") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PuckTool, __spreadValues({}, part));
   }
   if (part.type === "tool-updatePage") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PuckTool, __spreadValues({}, part));
   }
   if (part.type === "tool-userTool") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PuckTool, __spreadValues({}, part));
   }
   return null;
 }
@@ -21471,30 +21487,30 @@ function PuckTool({
   output,
   defaultLabel = "Thinking..."
 }) {
-  const toolStatus = (0, import_react17.useContext)(toolStatusContext)[toolCallId];
+  const toolStatus = (0, import_react18.useContext)(toolStatusContext)[toolCallId];
   const outputObj = output;
   const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus != null ? toolStatus : { loading: true, label: defaultLabel };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolStatus, { status });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolStatus, { status });
 }
 function ToolStatus({ status }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("data"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cxMessage("dataInner"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Check, { size: 18 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: status.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cxMessage("data"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cxMessage("dataInner"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Check, { size: 18 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: status.label })
   ] }) });
 }
 function ExamplePrompt({
   label,
   href
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("a", { className: cx4("examplePrompt"), href, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("examplePromptArrow"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowRight, { size: "16" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { className: cx5("examplePrompt"), href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx5("examplePromptArrow"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRight, { size: "16" }) })
   ] });
 }
 
 // src/components/Chat/index.tsx
 var import_qler = __toESM(require("qler"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var q = (0, import_qler.default)();
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
@@ -21508,11 +21524,11 @@ function Chat2({
 }) {
   const puckDispatch = usePuck((s) => s.dispatch);
   const getPuck = (0, import_puck2.useGetPuck)();
-  const localChatId = (0, import_react19.useRef)(chatId);
-  const inputRef = (0, import_react19.useRef)(null);
-  const pluginRef = (0, import_react19.useRef)(null);
-  const [error45, setError] = (0, import_react19.useState)();
-  const [toolStatus, setToolStatus] = (0, import_react19.useState)({});
+  const localChatId = (0, import_react20.useRef)(chatId);
+  const inputRef = (0, import_react20.useRef)(null);
+  const pluginRef = (0, import_react20.useRef)(null);
+  const [error45, setError] = (0, import_react20.useState)();
+  const [toolStatus, setToolStatus] = (0, import_react20.useState)({});
   const { messages, status, sendMessage, regenerate } = useChat({
     generateId: () => prefixedUlid("msg"),
     messages: initialMessages,
@@ -21566,6 +21582,7 @@ function Chat2({
         case "data-build-op": {
           const data = dataPart.data;
           q.queue(() => {
+            var _a17, _b, _c, _d;
             const puckDispatch2 = getPuck().dispatch;
             try {
               if (data.op === "add") {
@@ -21612,11 +21629,13 @@ function Chat2({
                   recordHistory: false
                 });
               } else if (data.op === "updateRoot") {
-                const existing = getPuck().appState.data.root;
+                const { appState, config: config2 } = getPuck();
+                const existing = appState.data.root;
+                const defaultProps = (_b = (_a17 = config2.root) == null ? void 0 : _a17.defaultProps) != null ? _b : {};
                 puckDispatch2({
                   type: "replaceRoot",
                   root: __spreadProps(__spreadValues({}, existing), {
-                    props: __spreadValues(__spreadValues({}, existing.props), data.props)
+                    props: __spreadValues(__spreadValues(__spreadValues({}, defaultProps), existing.props), data.props)
                   }),
                   recordHistory: false
                 });
@@ -21662,9 +21681,11 @@ function Chat2({
                   recordHistory: false
                 });
               } else if (data.op === "reset") {
+                const { config: config2 } = getPuck();
+                const defaultRootProps = (_d = (_c = config2.root) == null ? void 0 : _c.defaultProps) != null ? _d : {};
                 puckDispatch2({
                   type: "setData",
-                  data: { content: [], root: {} },
+                  data: { content: [], root: defaultRootProps },
                   recordHistory: false
                 });
               } else {
@@ -21717,7 +21738,7 @@ function Chat2({
       console.error(e);
     });
   };
-  const messagesWithStatuses = (0, import_react19.useMemo)(() => {
+  const messagesWithStatuses = (0, import_react20.useMemo)(() => {
     return messages.map((msg) => {
       return __spreadProps(__spreadValues({}, msg), {
         parts: msg.parts.map((part) => {
@@ -21729,22 +21750,22 @@ function Chat2({
       });
     });
   }, [messages, toolStatus]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16(), ref: pluginRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName16("header"), children: "AI page builder" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName16(), ref: pluginRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName16("header"), children: "AI page builder" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ChatBody,
       {
         messages: messagesWithStatuses,
         handleSubmit,
         inputRef,
         status,
-        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExamplePrompt, { label, href }, label)),
+        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ExamplePrompt, { label, href }, label)),
         error: error45,
         handleRetry: () => {
           setError("");
           regenerate();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Placeholder,
           {
             dispatch: puckDispatch,
@@ -21775,11 +21796,11 @@ function Placeholder({
       }
     }, 10);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16("placeholder"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Bot, { size: "24" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: "Use AI to build a page using your own components" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16("actions"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName16("placeholder"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Bot, { size: "24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName16("actions"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: getClassName16("action"),
@@ -21787,7 +21808,7 @@ function Placeholder({
           children: "Enter prompt"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: getClassName16("actionOutlined"),
@@ -21811,13 +21832,13 @@ function isScrolledIntoView(el) {
 }
 
 // src/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function createAIPlugin(opts) {
   return {
     label: "AI",
     name: "ai",
-    render: () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chat2, __spreadValues({}, opts)),
-    icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Bot, {}),
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Chat2, __spreadValues({}, opts)),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Bot, {}),
     mobilePanelHeight: "min-content"
   };
 }

package/dist/index.mjs

@@ -20672,7 +20672,7 @@ function useChat(_a17 = {}) {
 
 // src/components/Chat/index.tsx
 import { createUsePuck, useGetPuck } from "@measured/puck";
-import { useMemo, useRef as useRef6, useState as useState10 } from "react";
+import { useMemo as useMemo3, useRef as useRef7, useState as useState10 } from "react";
 import { ulid as ulid3 } from "ulid";
 
 // ../utils/lib/get-class-name-factory.ts
@@ -21173,12 +21173,28 @@ init_react_import();
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Page/Page.module.css#css-module
 init_react_import();
-var Page_module_default = { "Page": "_Page_1uz1e_1", "Page-masthead": "_Page-masthead_1uz1e_8", "Page-crumbs": "_Page-crumbs_1uz1e_18", "Page-crumb": "_Page-crumb_1uz1e_18", "Page-crumbLink": "_Page-crumbLink_1uz1e_28", "Page-actions": "_Page-actions_1uz1e_60" };
+var Page_module_default = { "Page": "_Page_1pzwy_1", "Page-masthead": "_Page-masthead_1pzwy_8", "Page-crumbs": "_Page-crumbs_1pzwy_18", "Page-crumb": "_Page-crumb_1pzwy_18", "Page-crumbLink": "_Page-crumbLink_1pzwy_28", "Page-actions": "_Page-actions_1pzwy_60", "Page-footer": "_Page-footer_1pzwy_64" };
 
 // ../platform-client/components/Page/Page.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var cx2 = getClassNameFactory2("Page", Page_module_default);
 
+// ../platform-client/components/Pagination/index.ts
+init_react_import();
+
+// ../platform-client/components/Pagination/Pagination.tsx
+init_react_import();
+import { useMemo } from "react";
+
+// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Pagination/Pagination.module.css#css-module
+init_react_import();
+var Pagination_module_default = { "Pagination": "_Pagination_1okv2_1", "PaginationButton": "_PaginationButton_1okv2_8", "PaginationButton--isActive": "_PaginationButton--isActive_1okv2_20", "Pagination-ellipsis": "_Pagination-ellipsis_1okv2_30" };
+
+// ../platform-client/components/Pagination/Pagination.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var cx3 = getClassNameFactory2("Pagination", Pagination_module_default);
+var cxButton = getClassNameFactory2("PaginationButton", Pagination_module_default);
+
 // ../platform-client/components/Section/index.ts
 init_react_import();
 
@@ -21190,7 +21206,7 @@ init_react_import();
 var Section_module_default = { "Section-inner": "_Section-inner_1uwo0_1", "Section--flush": "_Section--flush_1uwo0_8", "Section": "_Section_1uwo0_1", "Section--full": "_Section--full_1uwo0_17" };
 
 // ../platform-client/components/Section/Section.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getClassName12 = getClassNameFactory2("Section", Section_module_default);
 
 // ../platform-client/components/StatusTag/index.ts
@@ -21210,25 +21226,25 @@ init_react_import();
 var Tag_module_default = { "Tag": "_Tag_1baze_1", "Tag--colorBlue": "_Tag--colorBlue_1baze_19", "Tag--colorGreen": "_Tag--colorGreen_1baze_23", "Tag--colorRed": "_Tag--colorRed_1baze_27", "Tag--colorMuted": "_Tag--colorMuted_1baze_31", "Tag-sprite": "_Tag-sprite_1baze_35", "Tag--pulse": "_Tag--pulse_1baze_39", "pulse": "_pulse_1baze_1" };
 
 // ../platform-client/components/Tag/Tag.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName13 = getClassNameFactory2("Tag", Tag_module_default);
 
 // ../platform-client/components/StatusTag/StatusTag.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // ../platform-client/components/Table/index.ts
 init_react_import();
 
 // ../platform-client/components/Table/Table.tsx
 init_react_import();
-import { useState as useState7 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Table/Table.module.css#css-module
 init_react_import();
-var Table_module_default = { "Table": "_Table_1t44j_1", "Table-filters": "_Table-filters_1t44j_8", "Table-inner": "_Table-inner_1t44j_12", "Table-table": "_Table-table_1t44j_16", "Table-footer": "_Table-footer_1t44j_78", "Table--clickableRows": "_Table--clickableRows_1t44j_82", "Table-placeholder": "_Table-placeholder_1t44j_87" };
+var Table_module_default = { "Table": "_Table_1w0os_1", "Table-filters": "_Table-filters_1w0os_9", "Table-inner": "_Table-inner_1w0os_13", "Table-table": "_Table-table_1w0os_17", "Table-footer": "_Table-footer_1w0os_85", "Table--clickableRows": "_Table--clickableRows_1w0os_89", "Table-placeholder": "_Table-placeholder_1w0os_94", "Table-loader": "_Table-loader_1w0os_105" };
 
 // ../platform-client/components/Table/Table.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("Table", Table_module_default);
 
 // ../platform-client/components/Textarea/index.tsx
@@ -21246,13 +21262,13 @@ init_react_import();
 var VerticalSpace_module_default = { "VerticalSpace": "_VerticalSpace_1tjaw_1", "VerticalSpace--size4": "_VerticalSpace--size4_1tjaw_5", "VerticalSpace--size8": "_VerticalSpace--size8_1tjaw_9", "VerticalSpace--size16": "_VerticalSpace--size16_1tjaw_13", "VerticalSpace--size32": "_VerticalSpace--size32_1tjaw_17", "VerticalSpace--size40": "_VerticalSpace--size40_1tjaw_21", "VerticalSpace--size48": "_VerticalSpace--size48_1tjaw_25", "VerticalSpace--size56": "_VerticalSpace--size56_1tjaw_29", "VerticalSpace--size96": "_VerticalSpace--size96_1tjaw_33", "VerticalSpace--size128": "_VerticalSpace--size128_1tjaw_37" };
 
 // ../platform-client/components/VerticalSpace/VerticalSpace.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("VerticalSpace", VerticalSpace_module_default);
 
 // ../platform-client/context/editor.tsx
 init_react_import();
 import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ctx = createContext2({});
 
 // css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/ChatBody/styles.module.css#css-module
@@ -21262,8 +21278,8 @@ var styles_module_default3 = { "Chat": "_Chat_14j71_1", "Chat-inner": "_Chat-inn
 // src/components/PromptForm/index.tsx
 init_react_import();
 import {
-  useEffect as useEffect6,
-  useRef as useRef5,
+  useEffect as useEffect7,
+  useRef as useRef6,
   useState as useState9
 } from "react";
 
@@ -21272,8 +21288,8 @@ init_react_import();
 var styles_module_default4 = { "PromptForm": "_PromptForm_136g1_1", "PromptForm-inner": "_PromptForm-inner_136g1_8", "PromptForm--dark": "_PromptForm--dark_136g1_14", "PromptForm--glow": "_PromptForm--glow_136g1_19", "PromptForm-glow": "_PromptForm-glow_136g1_19", "loop": "_loop_136g1_1", "PromptForm-formInner": "_PromptForm-formInner_136g1_60", "PromptForm-input": "_PromptForm-input_136g1_64", "PromptForm--disabled": "_PromptForm--disabled_136g1_92", "PromptForm-helper": "_PromptForm-helper_136g1_97", "PromptForm-actions": "_PromptForm-actions_136g1_107", "PromptForm-actionsLeft": "_PromptForm-actionsLeft_136g1_118", "PromptForm-actionsRight": "_PromptForm-actionsRight_136g1_124", "PromptForm-actionSubmit": "_PromptForm-actionSubmit_136g1_128", "PromptForm--isDisabled": "_PromptForm--isDisabled_136g1_147", "PromptForm--isLoading": "_PromptForm--isLoading_136g1_152" };
 
 // src/components/PromptForm/index.tsx
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var cx3 = getClassNameFactory2("PromptForm", styles_module_default4);
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var cx4 = getClassNameFactory2("PromptForm", styles_module_default4);
 function PromptForm({
   actions,
   colorScheme = "light",
@@ -21285,7 +21301,7 @@ function PromptForm({
   isLoading,
   placeholder = "Create a page for..."
 }) {
-  const hasSetInitialPrompt = useRef5(false);
+  const hasSetInitialPrompt = useRef6(false);
   const [prompt, setPrompt] = useState9("");
   const sendPrompt = () => {
     if (isLoading || isDisabled) return;
@@ -21294,7 +21310,7 @@ function PromptForm({
     }
     setPrompt("");
   };
-  useEffect6(() => {
+  useEffect7(() => {
     const currentUrl = new URL(location.href);
     const initialPrompt = currentUrl.searchParams.get("initialPrompt");
     if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
@@ -21305,28 +21321,28 @@ function PromptForm({
   return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: cx3({
+      className: cx4({
         isDisabled,
         isLoading,
         dark: colorScheme === "dark",
         glow
       }),
       children: [
-        helperText ? /* @__PURE__ */ jsx21("div", { className: cx3("helper"), children: helperText }) : null,
-        /* @__PURE__ */ jsxs11("div", { className: cx3("inner"), children: [
-          /* @__PURE__ */ jsx21("span", { className: cx3("glow") }),
-          /* @__PURE__ */ jsx21(
+        helperText ? /* @__PURE__ */ jsx22("div", { className: cx4("helper"), children: helperText }) : null,
+        /* @__PURE__ */ jsxs11("div", { className: cx4("inner"), children: [
+          /* @__PURE__ */ jsx22("span", { className: cx4("glow") }),
+          /* @__PURE__ */ jsx22(
             "form",
             {
               onSubmit: (e) => {
                 e.preventDefault();
                 sendPrompt();
               },
-              children: /* @__PURE__ */ jsxs11("div", { className: cx3("formInner"), children: [
-                /* @__PURE__ */ jsx21(
+              children: /* @__PURE__ */ jsxs11("div", { className: cx4("formInner"), children: [
+                /* @__PURE__ */ jsx22(
                   default2,
                   {
-                    className: cx3("input"),
+                    className: cx4("input"),
                     name: "prompt",
                     minRows: 2,
                     placeholder,
@@ -21347,15 +21363,15 @@ function PromptForm({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs11("div", { className: cx3("actions"), children: [
-                  /* @__PURE__ */ jsx21("div", { className: cx3("actionsLeft"), children: actions }),
-                  /* @__PURE__ */ jsx21("div", { className: cx3("actionsRight"), children: /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsxs11("div", { className: cx4("actions"), children: [
+                  /* @__PURE__ */ jsx22("div", { className: cx4("actionsLeft"), children: actions }),
+                  /* @__PURE__ */ jsx22("div", { className: cx4("actionsRight"), children: /* @__PURE__ */ jsx22(
                     "button",
                     {
-                      className: cx3("actionSubmit"),
+                      className: cx4("actionSubmit"),
                       type: "submit",
                       disabled: isLoading,
-                      children: /* @__PURE__ */ jsx21(ArrowUp, {})
+                      children: /* @__PURE__ */ jsx22(ArrowUp, {})
                     }
                   ) })
                 ] })
@@ -21375,8 +21391,8 @@ var toolStatusContext = createContext3({});
 var ToolStatusProvider = toolStatusContext.Provider;
 
 // src/components/ChatBody/index.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-var cx4 = getClassNameFactory2("Chat", styles_module_default3);
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var cx5 = getClassNameFactory2("Chat", styles_module_default3);
 var cxMessage = getClassNameFactory2("ChatMessage", styles_module_default3);
 function ChatBody({
   children,
@@ -21391,17 +21407,17 @@ function ChatBody({
 }) {
   const { scrollRef, contentRef } = useStickToBottom();
   const hasMessages = messages && messages.length > 0;
-  return /* @__PURE__ */ jsxs12("div", { className: cx4({ hasMessages, hasChildren: !!children, hideInput }), children: [
-    children ? /* @__PURE__ */ jsx22("div", { className: cx4("default"), children }) : null,
-    /* @__PURE__ */ jsxs12("div", { className: cx4("inner"), ref: scrollRef, children: [
-      /* @__PURE__ */ jsx22("div", { className: cx4("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ jsx22(ChatMessage, { message }, message.id)) }),
-      status === "submitted" && /* @__PURE__ */ jsx22("div", { className: cx4("loader"), children: /* @__PURE__ */ jsx22(Loader, { size: 14 }) }),
-      error45 && /* @__PURE__ */ jsxs12("div", { className: cx4("error"), children: [
-        /* @__PURE__ */ jsx22("div", { className: cx4("errorLabel"), children: "Something went wrong." }),
-        handleRetry && /* @__PURE__ */ jsx22("div", { className: cx4("errorAction"), children: /* @__PURE__ */ jsx22(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ jsx22(RotateCcw, { size: "14" }) }) })
+  return /* @__PURE__ */ jsxs12("div", { className: cx5({ hasMessages, hasChildren: !!children, hideInput }), children: [
+    children ? /* @__PURE__ */ jsx23("div", { className: cx5("default"), children }) : null,
+    /* @__PURE__ */ jsxs12("div", { className: cx5("inner"), ref: scrollRef, children: [
+      /* @__PURE__ */ jsx23("div", { className: cx5("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ jsx23(ChatMessage, { message }, message.id)) }),
+      status === "submitted" && /* @__PURE__ */ jsx23("div", { className: cx5("loader"), children: /* @__PURE__ */ jsx23(Loader, { size: 14 }) }),
+      error45 && /* @__PURE__ */ jsxs12("div", { className: cx5("error"), children: [
+        /* @__PURE__ */ jsx23("div", { className: cx5("errorLabel"), children: "Something went wrong." }),
+        handleRetry && /* @__PURE__ */ jsx23("div", { className: cx5("errorAction"), children: /* @__PURE__ */ jsx23(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ jsx23(RotateCcw, { size: "14" }) }) })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: cx4("form"), children: [
-        /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsxs12("div", { className: cx5("form"), children: [
+        /* @__PURE__ */ jsx23(
           PromptForm,
           {
             glow: !hasMessages,
@@ -21411,19 +21427,19 @@ function ChatBody({
             placeholder: "What do you want to build?"
           }
         ),
-        examplePrompts ? /* @__PURE__ */ jsx22("div", { className: cx4("examplePrompts"), children: examplePrompts }) : null
+        examplePrompts ? /* @__PURE__ */ jsx23("div", { className: cx5("examplePrompts"), children: examplePrompts }) : null
       ] })
     ] })
   ] });
 }
 function ChatMessage({ message }) {
   const { role, parts } = message;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cxMessage({ [`${role}Role`]: true }),
       "data-message-id": message.id,
-      children: parts.map((part, i) => /* @__PURE__ */ jsx22(
+      children: parts.map((part, i) => /* @__PURE__ */ jsx23(
         ChatMessagePart,
         {
           part,
@@ -21439,25 +21455,25 @@ function ChatMessageWrapper({
   role
 }) {
   if (role === "assistant") {
-    return /* @__PURE__ */ jsx22(Markdown, { children });
+    return /* @__PURE__ */ jsx23(Markdown, { children });
   }
-  return /* @__PURE__ */ jsx22("span", { children });
+  return /* @__PURE__ */ jsx23("span", { children });
 }
 function ChatMessagePart({
   part,
   role
 }) {
   if (part.type === "text") {
-    return /* @__PURE__ */ jsx22("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx22(ChatMessageWrapper, { role, children: part.text }) });
+    return /* @__PURE__ */ jsx23("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx23(ChatMessageWrapper, { role, children: part.text }) });
   }
   if (part.type === "tool-createPage") {
-    return /* @__PURE__ */ jsx22(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ jsx23(PuckTool, __spreadValues({}, part));
   }
   if (part.type === "tool-updatePage") {
-    return /* @__PURE__ */ jsx22(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ jsx23(PuckTool, __spreadValues({}, part));
   }
   if (part.type === "tool-userTool") {
-    return /* @__PURE__ */ jsx22(PuckTool, __spreadValues({}, part));
+    return /* @__PURE__ */ jsx23(PuckTool, __spreadValues({}, part));
   }
   return null;
 }
@@ -21469,27 +21485,27 @@ function PuckTool({
   const toolStatus = useContext3(toolStatusContext)[toolCallId];
   const outputObj = output;
   const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus != null ? toolStatus : { loading: true, label: defaultLabel };
-  return /* @__PURE__ */ jsx22(ToolStatus, { status });
+  return /* @__PURE__ */ jsx23(ToolStatus, { status });
 }
 function ToolStatus({ status }) {
-  return /* @__PURE__ */ jsx22("div", { className: cxMessage("data"), children: /* @__PURE__ */ jsxs12("div", { className: cxMessage("dataInner"), children: [
-    /* @__PURE__ */ jsx22("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ jsx22(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx22(Loader, { size: 16 }) : /* @__PURE__ */ jsx22(Check, { size: 18 }) }),
-    /* @__PURE__ */ jsx22("div", { children: status.label })
+  return /* @__PURE__ */ jsx23("div", { className: cxMessage("data"), children: /* @__PURE__ */ jsxs12("div", { className: cxMessage("dataInner"), children: [
+    /* @__PURE__ */ jsx23("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ jsx23(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx23(Loader, { size: 16 }) : /* @__PURE__ */ jsx23(Check, { size: 18 }) }),
+    /* @__PURE__ */ jsx23("div", { children: status.label })
   ] }) });
 }
 function ExamplePrompt({
   label,
   href
 }) {
-  return /* @__PURE__ */ jsxs12("a", { className: cx4("examplePrompt"), href, children: [
-    /* @__PURE__ */ jsx22("div", { children: label }),
-    /* @__PURE__ */ jsx22("div", { className: cx4("examplePromptArrow"), children: /* @__PURE__ */ jsx22(ArrowRight, { size: "16" }) })
+  return /* @__PURE__ */ jsxs12("a", { className: cx5("examplePrompt"), href, children: [
+    /* @__PURE__ */ jsx23("div", { children: label }),
+    /* @__PURE__ */ jsx23("div", { className: cx5("examplePromptArrow"), children: /* @__PURE__ */ jsx23(ArrowRight, { size: "16" }) })
   ] });
 }
 
 // src/components/Chat/index.tsx
 import qler from "qler";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var q = qler();
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid3()}`;
@@ -21503,9 +21519,9 @@ function Chat2({
 }) {
   const puckDispatch = usePuck((s) => s.dispatch);
   const getPuck = useGetPuck();
-  const localChatId = useRef6(chatId);
-  const inputRef = useRef6(null);
-  const pluginRef = useRef6(null);
+  const localChatId = useRef7(chatId);
+  const inputRef = useRef7(null);
+  const pluginRef = useRef7(null);
   const [error45, setError] = useState10();
   const [toolStatus, setToolStatus] = useState10({});
   const { messages, status, sendMessage, regenerate } = useChat({
@@ -21561,6 +21577,7 @@ function Chat2({
         case "data-build-op": {
           const data = dataPart.data;
           q.queue(() => {
+            var _a17, _b, _c, _d;
             const puckDispatch2 = getPuck().dispatch;
             try {
               if (data.op === "add") {
@@ -21607,11 +21624,13 @@ function Chat2({
                   recordHistory: false
                 });
               } else if (data.op === "updateRoot") {
-                const existing = getPuck().appState.data.root;
+                const { appState, config: config2 } = getPuck();
+                const existing = appState.data.root;
+                const defaultProps = (_b = (_a17 = config2.root) == null ? void 0 : _a17.defaultProps) != null ? _b : {};
                 puckDispatch2({
                   type: "replaceRoot",
                   root: __spreadProps(__spreadValues({}, existing), {
-                    props: __spreadValues(__spreadValues({}, existing.props), data.props)
+                    props: __spreadValues(__spreadValues(__spreadValues({}, defaultProps), existing.props), data.props)
                   }),
                   recordHistory: false
                 });
@@ -21657,9 +21676,11 @@ function Chat2({
                   recordHistory: false
                 });
               } else if (data.op === "reset") {
+                const { config: config2 } = getPuck();
+                const defaultRootProps = (_d = (_c = config2.root) == null ? void 0 : _c.defaultProps) != null ? _d : {};
                 puckDispatch2({
                   type: "setData",
-                  data: { content: [], root: {} },
+                  data: { content: [], root: defaultRootProps },
                   recordHistory: false
                 });
               } else {
@@ -21712,7 +21733,7 @@ function Chat2({
       console.error(e);
     });
   };
-  const messagesWithStatuses = useMemo(() => {
+  const messagesWithStatuses = useMemo3(() => {
     return messages.map((msg) => {
       return __spreadProps(__spreadValues({}, msg), {
         parts: msg.parts.map((part) => {
@@ -21725,21 +21746,21 @@ function Chat2({
     });
   }, [messages, toolStatus]);
   return /* @__PURE__ */ jsxs13("div", { className: getClassName16(), ref: pluginRef, children: [
-    /* @__PURE__ */ jsx23("div", { className: getClassName16("header"), children: "AI page builder" }),
-    /* @__PURE__ */ jsx23(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24("div", { className: getClassName16("header"), children: "AI page builder" }),
+    /* @__PURE__ */ jsx24(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ jsx24(
       ChatBody,
       {
         messages: messagesWithStatuses,
         handleSubmit,
         inputRef,
         status,
-        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ jsx23(ExamplePrompt, { label, href }, label)),
+        examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ jsx24(ExamplePrompt, { label, href }, label)),
         error: error45,
         handleRetry: () => {
           setError("");
           regenerate();
         },
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx24(
           Placeholder,
           {
             dispatch: puckDispatch,
@@ -21771,10 +21792,10 @@ function Placeholder({
     }, 10);
   };
   return /* @__PURE__ */ jsxs13("div", { className: getClassName16("placeholder"), children: [
-    /* @__PURE__ */ jsx23(Bot, { size: "24" }),
-    /* @__PURE__ */ jsx23("div", { children: "Use AI to build a page using your own components" }),
+    /* @__PURE__ */ jsx24(Bot, { size: "24" }),
+    /* @__PURE__ */ jsx24("div", { children: "Use AI to build a page using your own components" }),
     /* @__PURE__ */ jsxs13("div", { className: getClassName16("actions"), children: [
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "button",
         {
           className: getClassName16("action"),
@@ -21782,7 +21803,7 @@ function Placeholder({
           children: "Enter prompt"
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "button",
         {
           className: getClassName16("actionOutlined"),
@@ -21806,13 +21827,13 @@ function isScrolledIntoView(el) {
 }
 
 // src/index.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function createAIPlugin(opts) {
   return {
     label: "AI",
     name: "ai",
-    render: () => /* @__PURE__ */ jsx24(Chat2, __spreadValues({}, opts)),
-    icon: /* @__PURE__ */ jsx24(Bot, {}),
+    render: () => /* @__PURE__ */ jsx25(Chat2, __spreadValues({}, opts)),
+    icon: /* @__PURE__ */ jsx25(Bot, {}),
     mobilePanelHeight: "min-content"
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.1.0-canary.2e4dc235",
+  "version": "0.1.0-canary.2ef56cc2",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "puckeditor/puck",
   "bugs": "https://github.com/puckeditor/puck/issues",