@puckeditor/plugin-ai 0.8.0-canary.62b8dc69 → 0.8.0-canary.844eb87d

package/dist/index.css

@@ -1916,14 +1916,14 @@ button._Menu-item_1tu16_55:hover {
 }
 
 /* css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/PromptForm/styles.module.css/#css-module-data */
-._PromptForm_1iqhg_1 {
+._PromptForm_16e09_1 {
   --radius: 9px;
   background-color: var(--puck-color-grey-09);
   border-radius: var(--radius);
   position: relative;
   width: 100%;
 }
-._PromptForm-dropOverlay_1iqhg_9 {
+._PromptForm-dropOverlay_16e09_9 {
   align-items: center;
   background: var(--puck-color-azure-12);
   border: 2px dashed var(--puck-color-azure-04);
@@ -1940,16 +1940,16 @@ button._Menu-item_1tu16_55:hover {
   position: absolute;
   z-index: 10;
 }
-._PromptForm-inner_1iqhg_27 {
+._PromptForm-inner_16e09_27 {
   border-radius: var(--radius);
   padding: 1px;
   position: relative;
 }
-._PromptForm--dark_1iqhg_33 {
+._PromptForm--dark_16e09_33 {
   background-color: var(--puck-color-grey-02);
   box-shadow: none;
 }
-._PromptForm--glow_1iqhg_38 ._PromptForm-glow_1iqhg_38 {
+._PromptForm--glow_16e09_38 ._PromptForm-glow_16e09_38 {
   border: 2px solid transparent;
   border-radius: var(--radius);
   mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
@@ -1959,7 +1959,7 @@ button._Menu-item_1tu16_55:hover {
   pointer-events: none;
   inset: 0;
 }
-._PromptForm--glow_1iqhg_38 ._PromptForm-glow_1iqhg_38::after {
+._PromptForm--glow_16e09_38 ._PromptForm-glow_16e09_38::after {
   background:
     radial-gradient(
       circle at center,
@@ -1968,30 +1968,30 @@ button._Menu-item_1tu16_55:hover {
   content: "";
   offset-path: rect(0 100% 100% 0 round 200px);
   offset-anchor: calc(var(--anchor) * 1%) 50%;
-  animation: _loop_1iqhg_1 9s infinite linear;
+  animation: _loop_16e09_1 9s infinite linear;
   position: absolute;
   height: 312px;
   aspect-ratio: 1 / 1;
   display: inline-block;
 }
-._PromptForm--dark_1iqhg_33._PromptForm--glow_1iqhg_38 ._PromptForm-glow_1iqhg_38::after {
+._PromptForm--dark_16e09_33._PromptForm--glow_16e09_38 ._PromptForm-glow_16e09_38::after {
   background:
     radial-gradient(
       circle at center,
       var(--puck-color-azure-08),
       transparent 50%);
 }
-@keyframes _loop_1iqhg_1 {
+@keyframes _loop_16e09_1 {
   to {
     offset-distance: 100%;
   }
 }
-._PromptForm-formInner_1iqhg_79 {
+._PromptForm-formInner_16e09_79 {
   background-color: white;
   border-radius: 8px;
   position: relative;
 }
-._PromptForm-input_1iqhg_85 {
+._PromptForm-input_16e09_85 {
   background-color: transparent;
   border: none;
   display: block;
@@ -2008,21 +2008,26 @@ button._Menu-item_1tu16_55:hover {
   width: 100%;
   box-sizing: border-box;
 }
-._PromptForm-input_1iqhg_85:focus {
+@media (min-width: 768px) {
+  ._PromptForm-input_16e09_85 {
+    font-size: var(--puck-font-size-xxs);
+  }
+}
+._PromptForm-input_16e09_85:focus {
   outline: none;
 }
-._PromptForm-formInner_1iqhg_79:has(._PromptForm-input_1iqhg_85:focus) {
+._PromptForm-formInner_16e09_79:has(._PromptForm-input_16e09_85:focus) {
   outline: 2px solid var(--puck-color-azure-04);
 }
-._PromptForm--dark_1iqhg_33 ._PromptForm-input_1iqhg_85 {
+._PromptForm--dark_16e09_33 ._PromptForm-input_16e09_85 {
   background-color: var(--puck-color-grey-01);
   color: var(--puck-color-grey-08);
 }
-._PromptForm--disabled_1iqhg_116 ._PromptForm-input_1iqhg_85 {
+._PromptForm--disabled_16e09_122 ._PromptForm-input_16e09_85 {
   background-color: var(--puck-color-grey-12);
   cursor: not-allowed;
 }
-._PromptForm-helper_1iqhg_121 {
+._PromptForm-helper_16e09_127 {
   align-items: center;
   color: var(--puck-color-grey-04);
   display: flex;
@@ -2031,7 +2036,7 @@ button._Menu-item_1tu16_55:hover {
   font-weight: 500;
   padding: 6px 12px;
 }
-._PromptForm-actions_1iqhg_131 {
+._PromptForm-actions_16e09_137 {
   align-items: flex-end;
   cursor: text;
   display: flex;
@@ -2041,7 +2046,7 @@ button._Menu-item_1tu16_55:hover {
   right: 0;
   padding: 6px;
 }
-._PromptForm-actionsLeft_1iqhg_142 {
+._PromptForm-actionsLeft_16e09_148 {
   align-items: center;
   cursor: auto;
   display: flex;
@@ -2049,11 +2054,11 @@ button._Menu-item_1tu16_55:hover {
   gap: 6px;
   padding-left: 4px;
 }
-._PromptForm-actionsRight_1iqhg_151 {
+._PromptForm-actionsRight_16e09_157 {
   cursor: auto;
   margin-left: auto;
 }
-._PromptForm-actionSubmit_1iqhg_156 {
+._PromptForm-actionSubmit_16e09_162 {
   background: var(--puck-color-azure-04);
   border-radius: 48px;
   color: white;
@@ -2066,34 +2071,35 @@ button._Menu-item_1tu16_55:hover {
   pointer-events: auto;
   cursor: pointer;
   height: 32px;
-  width: 32px;
+  width: 100%;
+  min-width: 32px;
 }
-._PromptForm--userCta_1iqhg_172 ._PromptForm-actionSubmit_1iqhg_156 {
+._PromptForm--userCta_16e09_179 ._PromptForm-actionSubmit_16e09_162 {
   padding: 8px 12px;
 }
-._PromptForm-actionSubmit_1iqhg_156:hover {
+._PromptForm-actionSubmit_16e09_162:hover {
   background: var(--puck-color-azure-05);
 }
-._PromptForm-actionSubmit_1iqhg_156:focus {
+._PromptForm-actionSubmit_16e09_162:focus {
   outline: 2px solid var(--puck-color-azure-04);
   outline-offset: 2px;
 }
-._PromptForm--isDisabled_1iqhg_185 ._PromptForm-actionSubmit_1iqhg_156 {
+._PromptForm--isDisabled_16e09_192 ._PromptForm-actionSubmit_16e09_162 {
   background-color: var(--puck-color-grey-06);
   cursor: not-allowed;
 }
-._PromptForm--isLoading_1iqhg_190 ._PromptForm-actionSubmit_1iqhg_156 {
+._PromptForm--isLoading_16e09_197 ._PromptForm-actionSubmit_16e09_162 {
   background-color: var(--puck-color-azure-06);
   cursor: not-allowed;
 }
-._PromptForm-attachments_1iqhg_195 {
+._PromptForm-attachments_16e09_202 {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 8px 12px;
   padding-bottom: 0px;
 }
-._PromptForm-attachmentChip_1iqhg_203 {
+._PromptForm-attachmentChip_16e09_210 {
   align-items: center;
   background: var(--puck-color-grey-12);
   border: 1px solid var(--puck-color-grey-09);
@@ -2107,21 +2113,21 @@ button._Menu-item_1tu16_55:hover {
   padding: 4px 8px;
   text-overflow: ellipsis;
 }
-._PromptForm-attachmentChipUploading_1iqhg_218 {
+._PromptForm-attachmentChipUploading_16e09_225 {
   color: var(--puck-color-grey-05);
 }
-._PromptForm-attachmentChipFailed_1iqhg_222 {
+._PromptForm-attachmentChipFailed_16e09_229 {
   border-color: var(--puck-color-red-08);
   color: var(--puck-color-red-04);
 }
-._PromptForm-attachmentError_1iqhg_227 {
+._PromptForm-attachmentError_16e09_234 {
   color: var(--puck-color-red-04);
   font-size: var(--puck-font-size-xxxs);
 }
-._PromptForm-attachmentSpinner_1iqhg_232 {
-  animation: _PromptForm-attachmentSpin_1iqhg_232 1s linear infinite;
+._PromptForm-attachmentSpinner_16e09_239 {
+  animation: _PromptForm-attachmentSpin_16e09_239 1s linear infinite;
 }
-._PromptForm-attachmentRemove_1iqhg_236 {
+._PromptForm-attachmentRemove_16e09_243 {
   align-items: center;
   background: transparent;
   border: 0;
@@ -2131,12 +2137,115 @@ button._Menu-item_1tu16_55:hover {
   margin-left: 2px;
   padding: 0;
 }
-._PromptForm-attachmentRemove_1iqhg_236:focus-visible {
+._PromptForm-attachmentRemove_16e09_243:focus-visible {
   border-radius: 4px;
   outline: 2px solid var(--puck-color-azure-04);
 }
-@keyframes _PromptForm-attachmentSpin_1iqhg_232 {
+@keyframes _PromptForm-attachmentSpin_16e09_239 {
   to {
     transform: rotate(360deg);
   }
 }
+
+/* css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/DesignModeToggle/styles.module.css/#css-module-data */
+._DesignModeToggle_o5uty_1 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+._DesignModeToggle-button_o5uty_8 {
+  all: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--puck-color-grey-04);
+  background: var(--puck-color-grey-11);
+  transition: background 150ms, color 150ms;
+}
+._DesignModeToggle-button_o5uty_8:hover {
+  background: var(--puck-color-grey-10);
+}
+._DesignModeToggle-button--active_o5uty_28 {
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-03);
+}
+._DesignModeToggle-button_o5uty_8:focus-visible {
+  outline: 2px var(--puck-color-azure-04) solid;
+}
+._DesignModeToggle-button_o5uty_8:disabled {
+  cursor: not-allowed;
+}
+._DesignModeToggle-button--active_o5uty_28:hover {
+  background: var(--puck-color-azure-08);
+}
+
+/* css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/ManageComponents/styles.module.css/#css-module-data */
+._ManageComponents-cta_xifz3_1 {
+  all: unset;
+  box-sizing: border-box;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: var(--puck-font-size-xs);
+  color: var(--puck-color-grey-04);
+  margin-top: 16px;
+}
+._ManageComponents-cta_xifz3_1:hover {
+  color: var(--puck-color-azure-04);
+  background: var(--puck-color-grey-11);
+}
+._ManageComponents-list_xifz3_22 {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+._ManageComponents-item_xifz3_29 {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  justify-content: space-between;
+  padding: 4px 8px;
+}
+._ManageComponents-item_xifz3_29:hover {
+  background-color: var(--puck-color-grey-11);
+}
+._ManageComponents-delete_xifz3_41 {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: var(--puck-font-size-xxs);
+  color: var(--puck-color-red-03);
+  gap: 4px;
+}
+._ManageComponents-delete_xifz3_41:hover {
+  background: var(--puck-color-red-09, #fef2f2);
+}
+._ManageComponents-empty_xifz3_57 {
+  text-align: center;
+  color: var(--puck-color-grey-05);
+}
+
+/* css-module:/home/runner/work/platform/platform/packages/plugin-ai/src/components/Drawer/styles.module.css/#css-module-data */
+._Drawer--empty_1f4ux_1 {
+  align-items: center;
+  color: var(--puck-color-grey-05);
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}

package/dist/index.d.mts

@@ -122,14 +122,23 @@ type AddOperation = {
     type: string;
     props: object;
 };
+/**
+ * Streamed string tails keyed by prop path (e.g. `html`, `cta.label`,
+ * `items[2].title`). Each tail is appended to the value currently at that
+ * path. A top-level prop is carried either in `props` (full replacement) or
+ * in `appends` — never both — so applying them can't double-append.
+ */
+type StringAppends = Record<string, string>;
 type UpdateOperation = {
     op: "update";
     id: string;
     props: object;
+    appends?: StringAppends;
 };
 type UpdateRootOperation = {
     op: "updateRoot";
     props: object;
+    appends?: StringAppends;
 };
 type MoveOperation = {
     op: "move";
@@ -229,6 +238,7 @@ type PuckProviderMetadata = {
 
 type PuckMessage = UIMessage<PuckProviderMetadata, PuckDataParts>;
 
+type Mode = "assembly" | "design";
 type RequestOptions = {
     body?: {
         chatId?: string;
@@ -236,6 +246,7 @@ type RequestOptions = {
         messages?: PuckMessage[];
         pageData?: Data;
         config?: Config;
+        mode?: Mode;
         [key: string]: any;
     };
     headers?: HeadersInit;
@@ -263,6 +274,10 @@ type AiPluginProps = {
     };
     scrollTracking?: boolean;
     prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
+    designMode?: boolean | {
+        visible?: boolean;
+    };
+    defaultMode?: "assembly" | "design";
 };
 declare global {
     interface Window {
@@ -275,6 +290,7 @@ declare global {
     }
 }
 
+declare function withDynamicConfig(config: Config, data: Data): Config;
 declare function createAiPlugin(opts?: AiPluginProps): {
     label: string;
     name: string;
@@ -282,10 +298,13 @@ declare function createAiPlugin(opts?: AiPluginProps): {
     icon: react_jsx_runtime.JSX.Element;
     mobilePanelHeight: "min-content";
     overrides: {
+        drawer: ({ children }: {
+            children: react.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
         preview: ({ children }: {
             children: react.ReactNode;
         }) => react_jsx_runtime.JSX.Element;
     };
 };
 
-export { type ComponentAiParams, type FieldAiParams, createAiPlugin };
+export { type ComponentAiParams, type FieldAiParams, createAiPlugin, withDynamicConfig };

package/dist/index.d.ts

@@ -122,14 +122,23 @@ type AddOperation = {
     type: string;
     props: object;
 };
+/**
+ * Streamed string tails keyed by prop path (e.g. `html`, `cta.label`,
+ * `items[2].title`). Each tail is appended to the value currently at that
+ * path. A top-level prop is carried either in `props` (full replacement) or
+ * in `appends` — never both — so applying them can't double-append.
+ */
+type StringAppends = Record<string, string>;
 type UpdateOperation = {
     op: "update";
     id: string;
     props: object;
+    appends?: StringAppends;
 };
 type UpdateRootOperation = {
     op: "updateRoot";
     props: object;
+    appends?: StringAppends;
 };
 type MoveOperation = {
     op: "move";
@@ -229,6 +238,7 @@ type PuckProviderMetadata = {
 
 type PuckMessage = UIMessage<PuckProviderMetadata, PuckDataParts>;
 
+type Mode = "assembly" | "design";
 type RequestOptions = {
     body?: {
         chatId?: string;
@@ -236,6 +246,7 @@ type RequestOptions = {
         messages?: PuckMessage[];
         pageData?: Data;
         config?: Config;
+        mode?: Mode;
         [key: string]: any;
     };
     headers?: HeadersInit;
@@ -263,6 +274,10 @@ type AiPluginProps = {
     };
     scrollTracking?: boolean;
     prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
+    designMode?: boolean | {
+        visible?: boolean;
+    };
+    defaultMode?: "assembly" | "design";
 };
 declare global {
     interface Window {
@@ -275,6 +290,7 @@ declare global {
     }
 }
 
+declare function withDynamicConfig(config: Config, data: Data): Config;
 declare function createAiPlugin(opts?: AiPluginProps): {
     label: string;
     name: string;
@@ -282,10 +298,13 @@ declare function createAiPlugin(opts?: AiPluginProps): {
     icon: react_jsx_runtime.JSX.Element;
     mobilePanelHeight: "min-content";
     overrides: {
+        drawer: ({ children }: {
+            children: react.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
         preview: ({ children }: {
             children: react.ReactNode;
         }) => react_jsx_runtime.JSX.Element;
     };
 };
 
-export { type ComponentAiParams, type FieldAiParams, createAiPlugin };
+export { type ComponentAiParams, type FieldAiParams, createAiPlugin, withDynamicConfig };