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

package/README.md

@@ -95,6 +95,7 @@ Available recipes include:
 
 - [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js example, using App Router and static page generation
 - [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 example, using dynamic routes at root-level
+- [**react-router**](https://github.com/measuredco/puck/tree/main/recipes/react-router): React Router v7 app example, using dynamic routes to create pages at any level
 
 ## Community
 

package/dist/{chunk-LT6HN46T.mjs → chunk-ZOHJNF5K.mjs}

@@ -226,6 +226,68 @@ ActionBar.Action = Action;
 ActionBar.Label = Label;
 ActionBar.Group = Group;
 
+// lib/data/map-slots.ts
+init_react_import();
+
+// lib/data/is-slot.ts
+init_react_import();
+var isSlot = (prop) => {
+  var _a, _b;
+  return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
+};
+var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
+  var _a, _b;
+  const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
+  if (!configForComponent) return isSlot(propValue);
+  return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
+};
+
+// lib/data/map-slots.ts
+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);
+    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 = recursive ? yield Promise.all(
+          content.map((item2) => __async(this, null, function* () {
+            return yield mapSlotsAsync(item2, map, recursive, isSlot2);
+          }))
+        ) : content;
+        props[propKey] = yield map(mappedContent, propKey);
+      }
+    }
+    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
+  );
+}
+
 // components/Render/index.tsx
 init_react_import();
 
@@ -238,7 +300,7 @@ var rootDroppableId = `${rootAreaId}:${rootZone}`;
 // lib/use-slots.tsx
 init_react_import();
 import { useMemo } from "react";
-function useSlots(config, props, renderSlot) {
+function useSlots(config, props, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
   const slotProps = useMemo(() => {
     if (!(config == null ? void 0 : config.fields)) return props;
     const slotProps2 = {};
@@ -248,7 +310,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
         }));
@@ -256,7 +322,7 @@ function useSlots(config, props, renderSlot) {
       }
     }
     return slotProps2;
-  }, [config]);
+  }, [config, readOnly, forceReadOnly]);
   return __spreadValues(__spreadValues({}, props), slotProps);
 }
 
@@ -264,7 +330,7 @@ function useSlots(config, props, renderSlot) {
 init_react_import();
 import {
   forwardRef as forwardRef4,
-  memo as memo2,
+  memo,
   useCallback as useCallback7,
   useContext as useContext5,
   useEffect as useEffect10,
@@ -285,7 +351,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "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_default2 = { "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" };
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -628,21 +694,6 @@ init_react_import();
 
 // lib/data/for-each-slot.ts
 init_react_import();
-
-// lib/data/is-slot.ts
-init_react_import();
-var isSlot = (prop) => {
-  var _a, _b;
-  return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
-};
-var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
-  var _a, _b;
-  const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
-  if (!configForComponent) return isSlot(propValue);
-  return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
-};
-
-// lib/data/for-each-slot.ts
 var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
   const props = item.props || {};
   const propKeys = Object.keys(props);
@@ -1097,7 +1148,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]);
@@ -1116,24 +1166,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];
     }
   });
@@ -1517,7 +1560,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 }) });
     },
@@ -1834,31 +1877,6 @@ var useRegisterFieldsSlice = (appStore, id) => {
 
 // lib/resolve-component-data.ts
 init_react_import();
-
-// lib/data/map-slots.ts
-init_react_import();
-function mapSlots(_0, _1) {
-  return __async(this, arguments, function* (item, map, recursive = true, 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 = recursive ? yield Promise.all(
-          content.map((item2) => __async(this, null, function* () {
-            return yield mapSlots(item2, map, recursive, isSlot2);
-          }))
-        ) : content;
-        props[propKey] = yield map(mappedContent, propKey);
-      }
-    }
-    return __spreadProps(__spreadValues({}, item), { props });
-  });
-}
-
-// lib/resolve-component-data.ts
 import fdeq from "fast-deep-equal";
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", recursive = true) {
@@ -1876,14 +1894,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(
@@ -3969,7 +3987,6 @@ var DragDropContextClient = ({
               }
               if (thisPreview) {
                 zoneStore.setState({ previewIndex: {} });
-                const state = appStore.getState().state;
                 if (thisPreview.type === "insert") {
                   insertComponent(
                     thisPreview.componentType,
@@ -4448,30 +4465,60 @@ init_react_import();
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var SlotRenderPure = (props) => /* @__PURE__ */ jsx8(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__ */ jsx8(
+    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__ */ jsx8(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ jsx8(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRenderPure,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
 var SlotRender = forwardRef3(
   function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
     return /* @__PURE__ */ jsx8("div", { className, style, ref, children: content.map((item) => {
-      const Component = config.components[item.type];
-      if (Component) {
-        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx8(
-          SlotRenderPure,
-          __spreadProps(__spreadValues({}, slotProps), {
-            config,
-            metadata
-          })
-        ));
-        return /* @__PURE__ */ jsx8(
-          Component.render,
-          __spreadProps(__spreadValues({}, props), {
-            puck: {
-              renderDropZone: DropZoneRenderPure,
-              metadata: metadata || {}
-            }
-          }),
-          props.id
-        );
+      if (!config.components[item.type]) {
+        return null;
       }
-      return null;
+      return /* @__PURE__ */ jsx8(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
     }) });
   }
 );
@@ -4494,12 +4541,6 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const puckProps = {
-    renderDropZone: DropZoneEditPure,
-    isEditing: true,
-    dragRef: null,
-    metadata
-  };
   const ctx = useContext5(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
   const nodeProps = useAppStore(
@@ -4514,11 +4555,23 @@ var DropZoneChild = ({
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.type;
     }
   );
+  const nodeReadOnly = useAppStore(
+    useShallow3((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) => {
@@ -4550,7 +4603,10 @@ var DropZoneChild = ({
   const defaultedPropsWithSlots = useSlots(
     componentConfig,
     defaultsProps,
-    DropZoneEditPure
+    DropZoneEditPure,
+    (slotProps) => /* @__PURE__ */ jsx9(ContextSlotRender, { componentId, zone: slotProps.zone }),
+    nodeReadOnly,
+    isLoading
   );
   if (!item) return;
   let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs4("div", { style: { padding: 48, textAlign: "center" }, children: [
@@ -4588,7 +4644,7 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneChildMemo = memo2(DropZoneChild);
+var DropZoneChildMemo = memo(DropZoneChild);
 var DropZoneEdit = forwardRef4(
   function DropZoneEditInternal({
     zone,
@@ -4648,6 +4704,11 @@ var DropZoneEdit = forwardRef4(
     );
     useEffect10(() => {
       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);
         }
@@ -4771,6 +4832,30 @@ var DropZoneEdit = forwardRef4(
     );
   }
 );
+var DropZoneRenderItem = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx9(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = useMemo6(
+    () => ({
+      areaId: props.id,
+      depth: 1
+    }),
+    [props]
+  );
+  return /* @__PURE__ */ jsx9(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx9(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRenderPure,
+        metadata: __spreadValues(__spreadValues({}, metadata), Component.metadata)
+      })
+    })
+  ) }, props.id);
+};
 var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx9(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef4(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
@@ -4801,29 +4886,15 @@ var DropZoneRender = forwardRef4(
     return /* @__PURE__ */ jsx9("div", { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx9(
-          SlotRenderPure,
-          __spreadProps(__spreadValues({}, slotProps), {
+        return /* @__PURE__ */ jsx9(
+          DropZoneRenderItem,
+          {
             config,
+            item,
             metadata
-          })
-        ));
-        const nextContextValue = useMemo6(
-          () => ({
-            areaId: props.id,
-            depth: 1
-          }),
-          [props]
+          },
+          item.props.id
         );
-        return /* @__PURE__ */ jsx9(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx9(
-          Component.render,
-          __spreadProps(__spreadValues({}, props), {
-            puck: {
-              renderDropZone: DropZoneRenderPure,
-              metadata: metadata || {}
-            }
-          })
-        ) }, props.id);
       }
       return null;
     }) });
@@ -4959,7 +5030,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;
     });
@@ -5034,6 +5109,7 @@ export {
   rootZone,
   rootDroppableId,
   walkTree,
+  getItem,
   setupZone,
   makeStatePublic,
   defaultViewports,
@@ -5043,6 +5119,7 @@ export {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useRegisterFieldsSlice,
+  mapSlotsPublic,
   defaultAppState,
   createAppStore,
   appStoreContext,