@measured/puck 0.19.4-canary.fde74e8a → 0.20.0-canary.3da831b0

package/README.md

@@ -1,32 +1,33 @@
-# Puck
-
-The visual editor for React.
-
-<p align="left">
-  <a aria-label="NPM version" href="https://www.npmjs.com/package/@measured/puck">
-    <img alt="" src="https://img.shields.io/npm/v/@measured/puck.svg?style=for-the-badge&labelColor=000000">
-  </a>
-  <a aria-label="License" href="https://github.com/measuredco/puck/blob/main/LICENSE">
-    <img alt="" src="https://img.shields.io/npm/l/@measured/puck.svg?style=for-the-badge&labelColor=000000">
-  </a>
-  <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
-    <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
-  </a>
-  <a aria-label="Browse the awesome-puck community repo" href="https://github.com/measuredco/awesome-puck">
-    <img alt="" src="https://img.shields.io/badge/repo-awesome--puck-fc60a8.svg?style=for-the-badge&labelColor=000000&logoWidth=20">
-  </a>
-  <a aria-label="Contributing guide" href="https://github.com/puckeditor/puck/blob/main/CONTRIBUTING.md">
-    <img alt="" src="https://img.shields.io/badge/contributions-welcome-blue?style=for-the-badge&labelColor=000000">
-  </a>
-</p>
-
-## Demo
-
-Visit https://demo.puckeditor.com/edit to try the demo.
-
-## Documentation
-
-Visit https://puckeditor.com to view the full documentation.
+<br /><br /><br />
+
+<div align="center">
+
+<a href="https://puckeditor.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_White_RGB_j2rwgg.svg" height="100px" aria-label="Puck logo">
+    <img src="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_Black_RGB_dqsjag.svg" height="100px" aria-label="Puck logo">
+  </picture>
+</a>
+
+_The visual editor for React_
+
+[Documentation](https://puckeditor.com/docs) • [Demo](https://demo.puckeditor.com/edit) • [Discord](https://discord.gg/V9mDAhuxyZ) • [Contributing](https://github.com/puckeditor/puck/blob/main/CONTRIBUTING.md)
+
+⭐️ Enjoying Puck? Please [leave a star](https://github.com/puckeditor/puck)!
+
+<br />
+
+[![GIF showing a page being created in the Puck Editor, with components being added, arranged, and customized in real time](https://github.com/user-attachments/assets/25e1ae25-ca5e-450f-afa0-01816830b731)](https://demo.puckeditor.com/edit)
+
+</div>
+
+## What is Puck?
+
+Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components.
+
+Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in.
+
+Puck is also [licensed under MIT](https://github.com/puckeditor/puck?tab=MIT-1-ov-file#readme), making it suitable for both internal systems and commercial applications.
 
 ## Quick start
 

package/dist/{chunk-IM42S4YL.mjs → chunk-H6KSTNLT.mjs}

@@ -871,8 +871,8 @@ var migrations = [
     return data;
   },
   // Migrate zones to slots
-  (data, config) => {
-    var _a;
+  (data, config, migrationOptions) => {
+    var _a, _b;
     if (!config) return data;
     console.log("Migrating DropZones to slots...");
     const updatedItems = {};
@@ -880,13 +880,13 @@ var migrations = [
     const { indexes } = walkAppState(appState, config);
     const deletedCompounds = [];
     walkAppState(appState, config, (content, zoneCompound, zoneType) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (zoneType === "dropzone") {
         const [id, slotName] = zoneCompound.split(":");
         const nodeData = indexes.nodes[id].data;
         const componentType = nodeData.type;
         const configForComponent = id === "root" ? config.root : config.components[componentType];
-        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
           updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
             props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.props), {
               [slotName]: content
@@ -915,7 +915,49 @@ var migrations = [
       );
       (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
     });
-    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).forEach((zoneCompound) => {
       const [_, propName] = zoneCompound.split(":");
       throw new Error(
         `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
@@ -925,9 +967,9 @@ var migrations = [
     return updated.data;
   }
 ];
-function migrate(data, config) {
+function migrate(data, config, migrationOptions) {
   return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
+    (acc, migration) => migration(acc, config, migrationOptions),
     data
   );
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-DrJNb8b-.mjs';
-export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DrJNb8b-.mjs';
+import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-DhtH8sAC.mjs';
+export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DhtH8sAC.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-DrJNb8b-.js';
-export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DrJNb8b-.js';
+import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-DhtH8sAC.js';
+export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DhtH8sAC.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.js

@@ -1627,8 +1627,8 @@ var migrations = [
     return data;
   },
   // Migrate zones to slots
-  (data, config) => {
-    var _a;
+  (data, config, migrationOptions) => {
+    var _a, _b;
     if (!config) return data;
     console.log("Migrating DropZones to slots...");
     const updatedItems = {};
@@ -1636,13 +1636,13 @@ var migrations = [
     const { indexes } = walkAppState(appState, config);
     const deletedCompounds = [];
     walkAppState(appState, config, (content, zoneCompound, zoneType) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (zoneType === "dropzone") {
         const [id, slotName] = zoneCompound.split(":");
         const nodeData = indexes.nodes[id].data;
         const componentType = nodeData.type;
         const configForComponent = id === "root" ? config.root : config.components[componentType];
-        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
           updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
             props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.props), {
               [slotName]: content
@@ -1671,7 +1671,49 @@ var migrations = [
       );
       (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
     });
-    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).forEach((zoneCompound) => {
       const [_, propName] = zoneCompound.split(":");
       throw new Error(
         `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
@@ -1681,9 +1723,9 @@ var migrations = [
     return updated.data;
   }
 ];
-function migrate(data, config) {
+function migrate(data, config, migrationOptions) {
   return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
+    (acc, migration) => migration(acc, config, migrationOptions),
     data
   );
 }
@@ -4319,9 +4361,8 @@ var ObjectField = ({
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
-        const subPath = `${name}.${subName}`;
-        const localSubPath = `${localName || name}.${subName}`;
-        const subReadOnly = readOnly ? readOnly : readOnlyFields[localSubPath];
+        const subPath = `${localName}.${subName}`;
+        const subReadOnly = readOnly ? readOnly : readOnlyFields[subPath];
         const label2 = subField.label || subName;
         return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           NestedFieldProvider,
@@ -4420,7 +4461,7 @@ var FieldLabelInternal = ({
   );
 };
 function AutoFieldInternal(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
   const readOnly = useAppStore((s) => {
@@ -4492,21 +4533,23 @@ function AutoFieldInternal(props) {
   if (field.type === "slot") {
     return null;
   }
+  let children = null;
+  let FieldComponent;
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    const CustomField = field.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) }) });
+    FieldComponent = field.render;
+  } else {
+    children = defaultFields[field.type](mergedProps);
+    FieldComponent = render[field.type];
   }
-  const children = defaultFields[field.type](mergedProps);
-  const Render3 = render[field.type];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
-        localName: nestedFieldContext.localName
+        localName: (_i = nestedFieldContext.localName) != null ? _i : mergedProps.name
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
@@ -4517,7 +4560,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render3, __spreadProps(__spreadValues({}, mergedProps), { children }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children }))
         }
       )
     }

package/dist/index.mjs

@@ -25,7 +25,7 @@ import {
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-IM42S4YL.mjs";
+} from "./chunk-H6KSTNLT.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -3442,9 +3442,8 @@ var ObjectField = ({
       readOnly,
       children: /* @__PURE__ */ jsx17("div", { className: getClassName14(), children: /* @__PURE__ */ jsx17("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
-        const subPath = `${name}.${subName}`;
-        const localSubPath = `${localName || name}.${subName}`;
-        const subReadOnly = readOnly ? readOnly : readOnlyFields[localSubPath];
+        const subPath = `${localName}.${subName}`;
+        const subReadOnly = readOnly ? readOnly : readOnlyFields[subPath];
         const label2 = subField.label || subName;
         return /* @__PURE__ */ jsx17(
           NestedFieldProvider,
@@ -3543,7 +3542,7 @@ var FieldLabelInternal = ({
   );
 };
 function AutoFieldInternal(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
   const readOnly = useAppStore((s) => {
@@ -3615,21 +3614,23 @@ function AutoFieldInternal(props) {
   if (field.type === "slot") {
     return null;
   }
+  let children = null;
+  let FieldComponent;
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    const CustomField = field.render;
-    return /* @__PURE__ */ jsx18("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx18("div", { className: getClassName15(), children: /* @__PURE__ */ jsx18(CustomField, __spreadValues({}, mergedProps)) }) });
+    FieldComponent = field.render;
+  } else {
+    children = defaultFields[field.type](mergedProps);
+    FieldComponent = render[field.type];
   }
-  const children = defaultFields[field.type](mergedProps);
-  const Render2 = render[field.type];
   return /* @__PURE__ */ jsx18(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
-        localName: nestedFieldContext.localName
+        localName: (_i = nestedFieldContext.localName) != null ? _i : mergedProps.name
       },
       children: /* @__PURE__ */ jsx18(
         "div",
@@ -3640,7 +3641,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ jsx18(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+          children: /* @__PURE__ */ jsx18(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children }))
         }
       )
     }

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DrJNb8b-.mjs';
-export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DrJNb8b-.mjs';
+import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DhtH8sAC.mjs';
+export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DhtH8sAC.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DrJNb8b-.js';
-export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DrJNb8b-.js';
+import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DhtH8sAC.js';
+export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DhtH8sAC.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.js

@@ -816,8 +816,8 @@ var migrations = [
     return data;
   },
   // Migrate zones to slots
-  (data, config) => {
-    var _a;
+  (data, config, migrationOptions) => {
+    var _a, _b;
     if (!config) return data;
     console.log("Migrating DropZones to slots...");
     const updatedItems = {};
@@ -825,13 +825,13 @@ var migrations = [
     const { indexes } = walkAppState(appState, config);
     const deletedCompounds = [];
     walkAppState(appState, config, (content, zoneCompound, zoneType) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (zoneType === "dropzone") {
         const [id, slotName] = zoneCompound.split(":");
         const nodeData = indexes.nodes[id].data;
         const componentType = nodeData.type;
         const configForComponent = id === "root" ? config.root : config.components[componentType];
-        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
           updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
             props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.props), {
               [slotName]: content
@@ -860,7 +860,49 @@ var migrations = [
       );
       (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
     });
-    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).forEach((zoneCompound) => {
       const [_, propName] = zoneCompound.split(":");
       throw new Error(
         `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
@@ -870,9 +912,9 @@ var migrations = [
     return updated.data;
   }
 ];
-function migrate(data, config) {
+function migrate(data, config, migrationOptions) {
   return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
+    (acc, migration) => migration(acc, config, migrationOptions),
     data
   );
 }

package/dist/rsc.mjs

@@ -4,7 +4,7 @@ import {
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-IM42S4YL.mjs";
+} from "./chunk-H6KSTNLT.mjs";
 export {
   Render,
   migrate,

package/dist/{walk-tree-DrJNb8b-.d.mts → walk-tree-DhtH8sAC.d.mts}

@@ -535,7 +535,12 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | ReplaceRootAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-declare function migrate(data: Data, config?: Config): Data;
+type MigrationOptions<UserConfig extends Config> = {
+    migrateDynamicZonesForComponent?: {
+        [ComponentName in keyof UserConfig["components"]]: (props: WithId<UserGenerics<UserConfig>["UserProps"][ComponentName]>, zones: Record<string, Content>) => ComponentData["props"];
+    };
+};
+declare function migrate<UserConfig extends Config = Config>(data: Data, config?: UserConfig, migrationOptions?: MigrationOptions<UserConfig>): Data;
 
 type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
     [ComponentName in keyof Props]: (props: Props[ComponentName] & {

package/dist/{walk-tree-DrJNb8b-.d.ts → walk-tree-DhtH8sAC.d.ts}

@@ -535,7 +535,12 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | ReplaceRootAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-declare function migrate(data: Data, config?: Config): Data;
+type MigrationOptions<UserConfig extends Config> = {
+    migrateDynamicZonesForComponent?: {
+        [ComponentName in keyof UserConfig["components"]]: (props: WithId<UserGenerics<UserConfig>["UserProps"][ComponentName]>, zones: Record<string, Content>) => ComponentData["props"];
+    };
+};
+declare function migrate<UserConfig extends Config = Config>(data: Data, config?: UserConfig, migrationOptions?: MigrationOptions<UserConfig>): Data;
 
 type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = Partial<{
     [ComponentName in keyof Props]: (props: Props[ComponentName] & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.19.4-canary.fde74e8a",
+  "version": "0.20.0-canary.3da831b0",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",