@measured/puck 0.19.0-canary.896a6279 → 0.19.0-canary.a6dd529f

package/dist/index.js

@@ -176,6 +176,7 @@ __export(core_exports, {
   Puck: () => Puck,
   Render: () => Render,
   createUsePuck: () => createUsePuck,
+  mapSlots: () => mapSlotsPublic,
   migrate: () => migrate,
   overrideKeys: () => overrideKeys,
   renderContext: () => renderContext,
@@ -308,7 +309,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "InputWrapper": "_InputWrapper_g5w3n_1", "Input-label": "_Input-label_g5w3n_5", "Input-labelIcon": "_Input-labelIcon_g5w3n_14", "Input-disabledIcon": "_Input-disabledIcon_g5w3n_21", "Input-input": "_Input-input_g5w3n_26", "Input": "_Input_g5w3n_1", "Input--readOnly": "_Input--readOnly_g5w3n_74", "Input-radioGroupItems": "_Input-radioGroupItems_g5w3n_85", "Input-radio": "_Input-radio_g5w3n_85", "Input-radioInner": "_Input-radioInner_g5w3n_102", "Input-radioInput": "_Input-radioInput_g5w3n_147" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_4xor1_1", "Input-label": "_Input-label_4xor1_5", "Input-labelIcon": "_Input-labelIcon_4xor1_14", "Input-disabledIcon": "_Input-disabledIcon_4xor1_21", "Input-input": "_Input-input_4xor1_26", "Input": "_Input_4xor1_1", "Input--readOnly": "_Input--readOnly_4xor1_75", "Input-radioGroupItems": "_Input-radioGroupItems_4xor1_86", "Input-radio": "_Input-radio_4xor1_86", "Input-radioInner": "_Input-radioInner_4xor1_103", "Input-radioInput": "_Input-radioInput_4xor1_148" };
 
 // components/AutoField/index.tsx
 var import_react22 = require("react");
@@ -1276,7 +1277,6 @@ var reorderAction = (state, action, appStore) => {
 init_react_import();
 var removeAction = (state, action, appStore) => {
   const item = getItem({ index: action.index, zone: action.zone }, state);
-  const [parentId] = action.zone.split(":");
   const nodesToDelete = Object.entries(state.indexes.nodes).reduce(
     (acc, [nodeId, nodeData]) => {
       const pathIds = nodeData.path.map((p) => p.split(":")[0]);
@@ -1295,24 +1295,17 @@ var removeAction = (state, action, appStore) => {
         return remove(content, action.index);
       }
       return content;
-    },
-    (childItem, path) => {
-      const parentIds = path.map((p) => p.split(":")[0]);
-      if (childItem.props.id === parentId || childItem.props.id === item.props.id || parentIds.indexOf(item.props.id) > -1) {
-        return childItem;
-      }
-      return null;
     }
   );
   Object.keys(newState.data.zones || {}).forEach((zoneCompound) => {
-    const parentId2 = zoneCompound.split(":")[0];
-    if (nodesToDelete.includes(parentId2) && newState.data.zones) {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId) && newState.data.zones) {
       delete newState.data.zones[zoneCompound];
     }
   });
   Object.keys(newState.indexes.zones).forEach((zoneCompound) => {
-    const parentId2 = zoneCompound.split(":")[0];
-    if (nodesToDelete.includes(parentId2)) {
+    const parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId)) {
       delete newState.indexes.zones[zoneCompound];
     }
   });
@@ -1696,7 +1689,7 @@ var createHistorySlice = (set, get) => {
       const { dispatch, history } = get();
       dispatch({
         type: "set",
-        state: ((_a = history.histories[history.index]) == null ? void 0 : _a.state) || history.initialAppState
+        state: ((_a = history.histories[index]) == null ? void 0 : _a.state) || history.initialAppState
       });
       set({ history: __spreadProps(__spreadValues({}, history), { index }) });
     },
@@ -2016,7 +2009,7 @@ init_react_import();
 
 // lib/data/map-slots.ts
 init_react_import();
-function mapSlots(_0, _1) {
+function mapSlotsAsync(_0, _1) {
   return __async(this, arguments, function* (item, map, recursive = true, isSlot2 = isSlot) {
     const props = __spreadValues({}, item.props);
     const propKeys = Object.keys(props);
@@ -2027,7 +2020,7 @@ function mapSlots(_0, _1) {
         const content = props[propKey];
         const mappedContent = recursive ? yield Promise.all(
           content.map((item2) => __async(this, null, function* () {
-            return yield mapSlots(item2, map, recursive, isSlot2);
+            return yield mapSlotsAsync(item2, map, recursive, isSlot2);
           }))
         ) : content;
         props[propKey] = yield map(mappedContent, propKey);
@@ -2036,6 +2029,30 @@ function mapSlots(_0, _1) {
     return __spreadProps(__spreadValues({}, item), { props });
   });
 }
+function mapSlotsSync(item, map, isSlot2 = isSlot) {
+  const props = __spreadValues({}, item.props);
+  const propKeys = Object.keys(props);
+  for (let i = 0; i < propKeys.length; i++) {
+    const propKey = propKeys[i];
+    const itemType = "type" in item ? item.type : "root";
+    if (isSlot2(itemType, propKey, props[propKey])) {
+      const content = props[propKey];
+      const mappedContent = content.map((item2) => {
+        return mapSlotsSync(item2, map, isSlot2);
+      });
+      props[propKey] = map(mappedContent, props.id, propKey);
+    }
+  }
+  return __spreadProps(__spreadValues({}, item), { props });
+}
+function mapSlotsPublic(item, config, map) {
+  const isSlot2 = createIsSlotConfig(config);
+  return mapSlotsSync(
+    item,
+    (content, parentId, propName) => map(content, { parentId, propName }),
+    isSlot2
+  );
+}
 
 // lib/resolve-component-data.ts
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
@@ -2055,14 +2072,14 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
     const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
       changed,
       lastData: oldItem,
-      metadata,
+      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
       trigger
     });
     let resolvedItem = __spreadProps(__spreadValues({}, item), {
       props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
     });
     if (recursive) {
-      resolvedItem = yield mapSlots(
+      resolvedItem = yield mapSlotsAsync(
         resolvedItem,
         (content) => __async(void 0, null, function* () {
           return Promise.all(
@@ -4411,7 +4428,7 @@ var import_react25 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1ukn8_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ukn8_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1ukn8_29", "DraggableComponent--hover": "_DraggableComponent--hover_1ukn8_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1ukn8_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ukn8_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1ukn8_66", "DraggableComponent-actions": "_DraggableComponent-actions_1ukn8_66" };
+var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_qzbgx_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_qzbgx_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_qzbgx_29", "DraggableComponent--hover": "_DraggableComponent--hover_qzbgx_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_qzbgx_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_qzbgx_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_qzbgx_66", "DraggableComponent-actions": "_DraggableComponent-actions_qzbgx_66" };
 
 // components/DraggableComponent/index.tsx
 var import_react_dom2 = require("react-dom");
@@ -5102,7 +5119,7 @@ init_react_import();
 // lib/use-slots.tsx
 init_react_import();
 var import_react31 = require("react");
-function useSlots(config, props, renderSlot) {
+function useSlots(config, props, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
   const slotProps = (0, import_react31.useMemo)(() => {
     if (!(config == null ? void 0 : config.fields)) return props;
     const slotProps2 = {};
@@ -5112,7 +5129,11 @@ function useSlots(config, props, renderSlot) {
       const field = config.fields[fieldKey];
       if ((field == null ? void 0 : field.type) === "slot") {
         const content = props[fieldKey] || [];
-        const Slot = (dzProps) => renderSlot(__spreadProps(__spreadValues({}, dzProps), {
+        const render = (readOnly == null ? void 0 : readOnly[fieldKey]) || forceReadOnly ? renderSlotRender : renderSlotEdit;
+        const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+          allow: field.allow,
+          disallow: field.disallow
+        }, dzProps), {
           zone: fieldKey,
           content
         }));
@@ -5120,7 +5141,7 @@ function useSlots(config, props, renderSlot) {
       }
     }
     return slotProps2;
-  }, [config]);
+  }, [config, readOnly, forceReadOnly]);
   return __spreadValues(__spreadValues({}, props), slotProps);
 }
 
@@ -5132,30 +5153,60 @@ init_react_import();
 var import_react32 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRender, __spreadValues({}, props));
+var ContextSlotRender = ({
+  componentId,
+  zone
+}) => {
+  const config = useAppStore((s) => s.config);
+  const metadata = useAppStore((s) => s.metadata);
+  const slotContent = useAppStore(
+    (s) => {
+      var _a, _b;
+      return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    SlotRenderPure,
+    {
+      content: slotContent,
+      zone,
+      config,
+      metadata
+    }
+  );
+};
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRenderPure,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
 var SlotRender = (0, import_react32.forwardRef)(
   function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style, ref, children: content.map((item) => {
-      const Component = config.components[item.type];
-      if (Component) {
-        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          SlotRenderPure,
-          __spreadProps(__spreadValues({}, slotProps), {
-            config,
-            metadata
-          })
-        ));
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          Component.render,
-          __spreadProps(__spreadValues({}, props), {
-            puck: {
-              renderDropZone: DropZoneRenderPure,
-              metadata: metadata || {}
-            }
-          }),
-          props.id
-        );
+      if (!config.components[item.type]) {
+        return null;
       }
-      return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
     }) });
   }
 );
@@ -5222,12 +5273,6 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const puckProps = {
-    renderDropZone: DropZoneEditPure,
-    isEditing: true,
-    dragRef: null,
-    metadata
-  };
   const ctx = (0, import_react34.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
   const nodeProps = useAppStore(
@@ -5242,11 +5287,23 @@ var DropZoneChild = ({
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.type;
     }
   );
+  const nodeReadOnly = useAppStore(
+    (0, import_shallow3.useShallow)((s) => {
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
+    })
+  );
   const node = { type: nodeType, props: nodeProps };
   const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
+  const puckProps = {
+    renderDropZone: DropZoneEditPure,
+    isEditing: true,
+    dragRef: null,
+    metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
+  };
   const overrides = useAppStore((s) => s.overrides);
   const isLoading = useAppStore(
     (s) => {
@@ -5278,7 +5335,10 @@ var DropZoneChild = ({
   const defaultedPropsWithSlots = useSlots(
     componentConfig,
     defaultsProps,
-    DropZoneEditPure
+    DropZoneEditPure,
+    (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }),
+    nodeReadOnly,
+    isLoading
   );
   if (!item) return;
   let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
@@ -5376,6 +5436,11 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
     );
     (0, import_react34.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
+        if (zoneCompound !== rootDroppableId) {
+          console.warn(
+            "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
+          );
+        }
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
@@ -5499,6 +5564,30 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
     );
   }
 );
+var DropZoneRenderItem = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = (0, import_react34.useMemo)(
+    () => ({
+      areaId: props.id,
+      depth: 1
+    }),
+    [props]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRenderPure,
+        metadata: __spreadValues(__spreadValues({}, metadata), Component.metadata)
+      })
+    })
+  ) }, props.id);
+};
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = (0, import_react34.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
@@ -5529,29 +5618,15 @@ var DropZoneRender = (0, import_react34.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          SlotRenderPure,
-          __spreadProps(__spreadValues({}, slotProps), {
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          DropZoneRenderItem,
+          {
             config,
+            item,
             metadata
-          })
-        ));
-        const nextContextValue = (0, import_react34.useMemo)(
-          () => ({
-            areaId: props.id,
-            depth: 1
-          }),
-          [props]
+          },
+          item.props.id
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          Component.render,
-          __spreadProps(__spreadValues({}, props), {
-            puck: {
-              renderDropZone: DropZoneRenderPure,
-              metadata: metadata || {}
-            }
-          })
-        ) }, props.id);
       }
       return null;
     }) });
@@ -6090,7 +6165,6 @@ var DragDropContextClient = ({
               }
               if (thisPreview) {
                 zoneStore.setState({ previewIndex: {} });
-                const state = appStore.getState().state;
                 if (thisPreview.type === "insert") {
                   insertComponent(
                     thisPreview.componentType,
@@ -8041,13 +8115,22 @@ var generateUsePuck = (store) => {
     index: store.history.index
   };
   const storeData = {
-    appState: store.state,
+    appState: makeStatePublic(store.state),
     config: store.config,
     dispatch: store.dispatch,
     getPermissions: store.permissions.getPermissions,
     refreshPermissions: store.permissions.refreshPermissions,
     history,
-    selectedItem: store.selectedItem || null
+    selectedItem: store.selectedItem || null,
+    getItemBySelector: (selector) => getItem(selector, store.state),
+    getItemById: (id) => store.state.indexes.nodes[id].data,
+    getSelectorForId: (id) => {
+      const node = store.state.indexes.nodes[id];
+      if (!node) return;
+      const zoneCompound = `${node.parentId}:${node.zone}`;
+      const index = store.state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+      return { zone: zoneCompound, index };
+    }
   };
   const get = () => storeData;
   return __spreadProps(__spreadValues({}, storeData), { get });
@@ -8057,7 +8140,7 @@ var UsePuckStoreContext = (0, import_react51.createContext)(
 );
 var convertToPickedStore = (store) => {
   return {
-    state: makeStatePublic(store.state),
+    state: store.state,
     config: store.config,
     dispatch: store.dispatch,
     permissions: store.permissions,
@@ -8540,10 +8623,67 @@ var migrations = [
       });
     }
     return data;
+  },
+  // Migrate zones to slots
+  (data, config) => {
+    var _a;
+    if (!config) return data;
+    console.log("Migrating DropZones to slots...");
+    const updatedItems = {};
+    const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
+    const { indexes } = walkTree(appState, config);
+    const deletedCompounds = [];
+    walkTree(appState, config, (content, zoneCompound, zoneType) => {
+      var _a2, _b;
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = config.components[componentType];
+        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
+            props: __spreadProps(__spreadValues({}, nodeData.props), {
+              [slotName]: content
+            })
+          });
+          deletedCompounds.push(zoneCompound);
+        }
+        return content;
+      }
+      return content;
+    });
+    const updated = walkTree(
+      appState,
+      config,
+      (content) => content,
+      (item) => {
+        var _a2;
+        return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
+      }
+    );
+    deletedCompounds.forEach((zoneCompound) => {
+      var _a2;
+      const [_, propName] = zoneCompound.split(":");
+      console.log(
+        `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
+      );
+      (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
+    });
+    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      throw new Error(
+        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
+      );
+    });
+    delete updated.data.zones;
+    return updated.data;
   }
 ];
-function migrate(data) {
-  return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
+function migrate(data, config) {
+  return migrations == null ? void 0 : migrations.reduce(
+    (acc, migration) => migration(acc, config),
+    data
+  );
 }
 
 // lib/transform-props.ts
@@ -8620,7 +8760,11 @@ function resolveAllData(_0, _1) {
         "force",
         false
       )).node;
-      const resolvedDeep = yield mapSlots(resolved, processContent, false);
+      const resolvedDeep = yield mapSlotsAsync(
+        resolved,
+        processContent,
+        false
+      );
       onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
       return resolvedDeep;
     });
@@ -8662,6 +8806,7 @@ function resolveAllData(_0, _1) {
   Puck,
   Render,
   createUsePuck,
+  mapSlots,
   migrate,
   overrideKeys,
   renderContext,

package/dist/index.mjs

@@ -51,9 +51,11 @@ import {
   defaultViewports,
   dropZoneContext,
   getFrame,
+  getItem,
   get_class_name_factory_default,
   init_react_import,
   makeStatePublic,
+  mapSlotsPublic,
   monitorHotkeys,
   renderContext,
   reorder,
@@ -73,7 +75,7 @@ import {
   useSlots,
   useSortableSafe,
   walkTree
-} from "./chunk-LT6HN46T.mjs";
+} from "./chunk-ZOHJNF5K.mjs";
 
 // index.ts
 init_react_import();
@@ -127,7 +129,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "InputWrapper": "_InputWrapper_g5w3n_1", "Input-label": "_Input-label_g5w3n_5", "Input-labelIcon": "_Input-labelIcon_g5w3n_14", "Input-disabledIcon": "_Input-disabledIcon_g5w3n_21", "Input-input": "_Input-input_g5w3n_26", "Input": "_Input_g5w3n_1", "Input--readOnly": "_Input--readOnly_g5w3n_74", "Input-radioGroupItems": "_Input-radioGroupItems_g5w3n_85", "Input-radio": "_Input-radio_g5w3n_85", "Input-radioInner": "_Input-radioInner_g5w3n_102", "Input-radioInput": "_Input-radioInput_g5w3n_147" };
+var styles_module_default = { "InputWrapper": "_InputWrapper_4xor1_1", "Input-label": "_Input-label_4xor1_5", "Input-labelIcon": "_Input-labelIcon_4xor1_14", "Input-disabledIcon": "_Input-disabledIcon_4xor1_21", "Input-input": "_Input-input_4xor1_26", "Input": "_Input_4xor1_1", "Input--readOnly": "_Input--readOnly_4xor1_75", "Input-radioGroupItems": "_Input-radioGroupItems_4xor1_86", "Input-radio": "_Input-radio_4xor1_86", "Input-radioInner": "_Input-radioInner_4xor1_103", "Input-radioInput": "_Input-radioInput_4xor1_148" };
 
 // components/AutoField/index.tsx
 import {
@@ -3268,13 +3270,22 @@ var generateUsePuck = (store) => {
     index: store.history.index
   };
   const storeData = {
-    appState: store.state,
+    appState: makeStatePublic(store.state),
     config: store.config,
     dispatch: store.dispatch,
     getPermissions: store.permissions.getPermissions,
     refreshPermissions: store.permissions.refreshPermissions,
     history,
-    selectedItem: store.selectedItem || null
+    selectedItem: store.selectedItem || null,
+    getItemBySelector: (selector) => getItem(selector, store.state),
+    getItemById: (id) => store.state.indexes.nodes[id].data,
+    getSelectorForId: (id) => {
+      const node = store.state.indexes.nodes[id];
+      if (!node) return;
+      const zoneCompound = `${node.parentId}:${node.zone}`;
+      const index = store.state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+      return { zone: zoneCompound, index };
+    }
   };
   const get = () => storeData;
   return __spreadProps(__spreadValues({}, storeData), { get });
@@ -3284,7 +3295,7 @@ var UsePuckStoreContext = createContext3(
 );
 var convertToPickedStore = (store) => {
   return {
-    state: makeStatePublic(store.state),
+    state: store.state,
     config: store.config,
     dispatch: store.dispatch,
     permissions: store.permissions,
@@ -3767,10 +3778,67 @@ var migrations = [
       });
     }
     return data;
+  },
+  // Migrate zones to slots
+  (data, config) => {
+    var _a;
+    if (!config) return data;
+    console.log("Migrating DropZones to slots...");
+    const updatedItems = {};
+    const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
+    const { indexes } = walkTree(appState, config);
+    const deletedCompounds = [];
+    walkTree(appState, config, (content, zoneCompound, zoneType) => {
+      var _a2, _b;
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = config.components[componentType];
+        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
+            props: __spreadProps(__spreadValues({}, nodeData.props), {
+              [slotName]: content
+            })
+          });
+          deletedCompounds.push(zoneCompound);
+        }
+        return content;
+      }
+      return content;
+    });
+    const updated = walkTree(
+      appState,
+      config,
+      (content) => content,
+      (item) => {
+        var _a2;
+        return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
+      }
+    );
+    deletedCompounds.forEach((zoneCompound) => {
+      var _a2;
+      const [_, propName] = zoneCompound.split(":");
+      console.log(
+        `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
+      );
+      (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
+    });
+    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      throw new Error(
+        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
+      );
+    });
+    delete updated.data.zones;
+    return updated.data;
   }
 ];
-function migrate(data) {
-  return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
+function migrate(data, config) {
+  return migrations == null ? void 0 : migrations.reduce(
+    (acc, migration) => migration(acc, config),
+    data
+  );
 }
 export {
   Action,
@@ -3786,6 +3854,7 @@ export {
   Puck,
   Render,
   createUsePuck,
+  mapSlotsPublic as mapSlots,
   migrate,
   overrideKeys,
   renderContext,

package/dist/{resolve-all-data-Cs8PfTrg.d.mts → resolve-all-data-BFRAghCj.d.mts}

@@ -23,6 +23,7 @@ type FieldOptions = Array<FieldOption> | ReadonlyArray<FieldOption>;
 type BaseField = {
     label?: string;
     labelIcon?: ReactElement;
+    metadata?: Metadata;
 };
 type TextField = BaseField & {
     type: "text";
@@ -122,6 +123,8 @@ type CustomField<Props extends any = {}> = BaseField & {
 };
 type SlotField = BaseField & {
     type: "slot";
+    allow?: string[];
+    disallow?: string[];
 };
 type Field<Props extends any = any> = TextField | NumberField | TextareaField | SelectField | RadioField | ArrayField<Props extends {
     [key: string]: any;
@@ -187,6 +190,7 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         appState: AppState;
         lastData: DataShape | null;
     }) => Promise<Partial<Permissions>> | Partial<Permissions>;
+    metadata?: Metadata;
 };
 type RootConfig<RootProps extends DefaultComponentProps = any> = Partial<ComponentConfig<WithChildren<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
 type Category<ComponentName> = {
@@ -522,4 +526,4 @@ declare function transformProps<Props extends DefaultComponentProps = DefaultCom
 
 declare function resolveAllData<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends Record<string, any> = DefaultRootFieldProps>(data: Partial<Data>, config: Config, metadata?: Metadata, onResolveStart?: (item: ComponentData) => void, onResolveEnd?: (item: ComponentData) => void): Promise<Data<Props, RootProps>>;
 
-export { type PuckContext as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type BaseField as E, type Fields as F, type TextareaField as G, type History as H, type IframeConfig as I, type SelectField as J, type RadioField as K, type ArrayField as L, type Metadata as M, type NumberField as N, type Overrides as O, type Permissions as P, type ObjectField as Q, type RootDataWithProps as R, type Slot as S, type TextField as T, type UserGenerics as U, type Viewports as V, type Adaptor as W, type ExternalFieldWithAdaptor as X, type ExternalField as Y, type CustomField as Z, type SlotField as _, type ComponentData as a, type DefaultRootFieldProps as a0, type DefaultRootRenderProps as a1, type DefaultRootProps as a2, type DefaultComponentProps as a3, type WithId as a4, type WithPuckProps as a5, type AsFieldProps as a6, type WithChildren as a7, type ExtractPropsFromConfig as a8, type ExtractRootPropsFromConfig as a9, transformProps as aa, resolveAllData as ab, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldProps as g, type Field as h, type Data as i, type OnAction as j, type InitialHistory as k, type Direction as l, type DragAxis as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type RootConfig as u, type RootDataWithoutProps as v, type RootData as w, type MappedItem as x, type ComponentDataMap as y, type Content as z };
+export { type SlotField as $, type AppState as A, type BaseData as B, type ComponentData as C, type DropZoneProps as D, type ComponentDataMap as E, type Fields as F, type BaseField as G, type History as H, type IframeConfig as I, type TextareaField as J, type SelectField as K, type RadioField as L, type Metadata as M, type NumberField as N, type Overrides as O, type Permissions as P, type ArrayField as Q, type RootDataWithProps as R, type Slot as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ObjectField as W, type Adaptor as X, type ExternalFieldWithAdaptor as Y, type ExternalField as Z, type CustomField as _, type Config as a, type PuckContext as a0, type DefaultRootFieldProps as a1, type DefaultRootRenderProps as a2, type DefaultRootProps as a3, type DefaultComponentProps as a4, type WithId as a5, type WithPuckProps as a6, type AsFieldProps as a7, type WithChildren as a8, type ExtractPropsFromConfig as a9, type ExtractRootPropsFromConfig as aa, transformProps as ab, resolveAllData as ac, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type Field as g, type FieldProps as h, type Data as i, type OnAction as j, type InitialHistory as k, type RootData as l, type Content as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, overrideKeys as r, type OverrideKey as s, type FieldRenderFunctions as t, type ItemWithId as u, type ArrayState as v, type PuckComponent as w, type RootConfig as x, type RootDataWithoutProps as y, type MappedItem as z };