@measured/puck 0.19.0-canary.91cb9cee → 0.19.0-canary.a60c81eb

package/dist/index.mjs

@@ -9,6 +9,7 @@ import {
   __toESM,
   defaultAppState,
   defaultViewports,
+  expandNode,
   getChanged,
   init_react_import,
   migrate,
@@ -21,8 +22,9 @@ import {
   transformProps,
   useSlots,
   walkAppState,
+  walkField,
   walkTree
-} from "./chunk-GL73J54P.mjs";
+} from "./chunk-HGAPIQP5.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -746,7 +748,7 @@ var populateIds = (data, config, override = false) => {
   const id = generateId(data.type);
   return walkTree(
     __spreadProps(__spreadValues({}, data), {
-      props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({ id }, data.props)
+      props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
     }),
     config,
     (contents) => contents.map((item) => {
@@ -1901,13 +1903,18 @@ init_react_import();
 import { useState as useState2 } from "react";
 import { PointerSensor } from "@dnd-kit/react";
 import { isElement } from "@dnd-kit/dom/utilities";
+var touchDefault = { delay: { value: 200, tolerance: 10 } };
+var otherDefault = {
+  delay: { value: 200, tolerance: 10 },
+  distance: { value: 5 }
+};
 var useSensors = ({
-  other,
+  other = otherDefault,
   mouse,
-  touch
+  touch = touchDefault
 } = {
-  touch: { delay: { value: 200, tolerance: 10 } },
-  other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
+  touch: touchDefault,
+  other: otherDefault
 }) => {
   const [sensors] = useState2(() => [
     PointerSensor.configure({
@@ -2449,6 +2456,19 @@ var ArrayField = ({
   );
   const forceReadOnly = !canEdit;
   const valueRef = useRef(value);
+  const uniqifyItem = useCallback2(
+    (val) => {
+      if (field.type !== "array" || !field.arrayFields) return;
+      const config = appStore.getState().config;
+      return walkField({
+        value: val,
+        fields: field.arrayFields,
+        map: (content) => content.map((item) => populateIds(item, config, true)),
+        config
+      });
+    },
+    [appStore, field]
+  );
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -2553,11 +2573,10 @@ var ArrayField = ({
                                           onClick: (e) => {
                                             e.stopPropagation();
                                             const existingValue = [...value || []];
-                                            existingValue.splice(
-                                              i,
-                                              0,
+                                            const newItem = uniqifyItem(
                                               existingValue[i]
                                             );
+                                            existingValue.splice(i, 0, newItem);
                                             const newUi = mapArrayStateToUi(
                                               regenerateArrayState(existingValue)
                                             );
@@ -2655,12 +2674,11 @@ var ArrayField = ({
                     type: "button",
                     className: getClassName5("addButton"),
                     onClick: () => {
+                      var _a;
                       if (isDraggingAny) return;
                       const existingValue = value || [];
-                      const newValue = [
-                        ...existingValue,
-                        field.defaultItemProps || {}
-                      ];
+                      const newItem = uniqifyItem((_a = field.defaultItemProps) != null ? _a : {});
+                      const newValue = [...existingValue, newItem];
                       const newArrayState = regenerateArrayState(newValue);
                       setUi(mapArrayStateToUi(newArrayState), false);
                       onChange(newValue);
@@ -3560,6 +3578,10 @@ function AutoFieldInternal(props) {
       });
     }
   }, []);
+  const { visible = true } = props.field;
+  if (!visible) {
+    return null;
+  }
   if (field.type === "slot") {
     return null;
   }
@@ -4423,10 +4445,10 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     preview
   );
   const updateContent = useRenderedCallback(
-    (contentIds2, preview2) => {
-      var _a;
-      const s = zoneStore.getState();
-      const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
+    (contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
+      if (isDragging2 && !previewExists) {
+        return;
+      }
       if (preview2) {
         if (preview2.type === "insert") {
           setContentIdsWithPreview(
@@ -4447,7 +4469,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
         }
       } else {
         setContentIdsWithPreview(
-          contentIds2.filter((id) => id !== draggedItemId)
+          previewExists ? contentIds2.filter((id) => id !== draggedItemId) : contentIds2
         );
       }
       setLocalPreview(preview2);
@@ -4455,7 +4477,17 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     []
   );
   useEffect14(() => {
-    updateContent(contentIds, preview, isDragging);
+    var _a;
+    const s = zoneStore.getState();
+    const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
+    const previewExists = Object.keys(s.previewIndex || {}).length > 0;
+    updateContent(
+      contentIds,
+      preview,
+      isDragging,
+      draggedItemId,
+      previewExists
+    );
   }, [contentIds, preview, isDragging]);
   return [contentIdsWithPreview, localPreview];
 };
@@ -4497,7 +4529,7 @@ var useDragAxis = (ref, collisionAxis) => {
 };
 
 // components/DropZone/index.tsx
-import { useShallow as useShallow3 } from "zustand/react/shallow";
+import { useShallow as useShallow4 } from "zustand/react/shallow";
 
 // components/Render/index.tsx
 init_react_import();
@@ -4505,6 +4537,7 @@ import React3, { useMemo as useMemo8 } from "react";
 
 // components/SlotRender/index.tsx
 init_react_import();
+import { useShallow as useShallow3 } from "zustand/react/shallow";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ContextSlotRender = ({
   componentId,
@@ -4513,10 +4546,12 @@ var ContextSlotRender = ({
   const config = useAppStore((s) => s.config);
   const metadata = useAppStore((s) => s.metadata);
   const slotContent = useAppStore(
-    (s) => {
+    useShallow3((s) => {
       var _a, _b;
-      return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
-    }
+      const indexes = s.state.indexes;
+      const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
+      return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
+    })
   );
   return /* @__PURE__ */ jsx21(
     SlotRenderPure,
@@ -4546,7 +4581,7 @@ function Render({
     root: data.root || {},
     content: data.content || []
   });
-  const rootProps = defaultedData.root.props || defaultedData.root;
+  const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   const pageProps = __spreadProps(__spreadValues({}, rootProps), {
     puck: {
@@ -4559,7 +4594,11 @@ function Render({
     editMode: false,
     id: "puck-root"
   });
-  const propsWithSlots = useSlots(config.root, pageProps, (props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata })));
+  const propsWithSlots = useSlots(
+    config,
+    { type: "root", props: pageProps },
+    (props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+  );
   const nextContextValue = useMemo8(
     () => ({
       mode: "render",
@@ -4593,7 +4632,7 @@ var DropZoneChild = ({
   const { depth = 1 } = ctx != null ? ctx : {};
   const zoneStore = useContext7(ZoneStoreContext);
   const nodeProps = useAppStore(
-    useShallow3((s) => {
+    useShallow4((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
     })
@@ -4605,14 +4644,19 @@ var DropZoneChild = ({
     }
   );
   const nodeReadOnly = useAppStore(
-    useShallow3((s) => {
+    useShallow4((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
     })
   );
+  const appStore = useAppStoreApi();
   const item = useMemo9(() => {
     if (nodeProps) {
-      return { type: nodeType, props: nodeProps };
+      const expanded = expandNode({
+        type: nodeType,
+        props: nodeProps
+      });
+      return expanded;
     }
     const preview = zoneStore.getState().previewIndex[zoneCompound];
     if (componentId === (preview == null ? void 0 : preview.props.id)) {
@@ -4623,7 +4667,7 @@ var DropZoneChild = ({
       };
     }
     return null;
-  }, [componentId, zoneCompound, nodeType, nodeProps]);
+  }, [appStore, componentId, zoneCompound, nodeType, nodeProps]);
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
@@ -4664,9 +4708,17 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
+  const defaultedNode = useMemo9(
+    () => {
+      var _a2;
+      return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
+    },
+    [item == null ? void 0 : item.type, nodeType, defaultsProps]
+  );
+  const config = useAppStore((s) => s.config);
   const defaultedPropsWithSlots = useSlots(
-    componentConfig,
-    defaultsProps,
+    config,
+    defaultedNode,
     DropZoneEditPure,
     (slotProps) => /* @__PURE__ */ jsx23(ContextSlotRender, { componentId, zone: slotProps.zone }),
     nodeReadOnly,
@@ -4678,7 +4730,7 @@ var DropZoneChild = ({
     item.type
   ] });
   let componentType = item.type;
-  const isInserting = item.previewType === "insert";
+  const isInserting = "previewType" in item ? item.previewType === "insert" : false;
   if (isInserting) {
     Render2 = renderPreview;
   }
@@ -4727,7 +4779,7 @@ var DropZoneEdit = forwardRef3(
       unregisterLocalZone
     } = ctx != null ? ctx : {};
     const path = useAppStore(
-      useShallow3((s) => {
+      useShallow4((s) => {
         var _a;
         return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
       })
@@ -4744,13 +4796,13 @@ var DropZoneEdit = forwardRef3(
       (s) => s.nextAreaDepthIndex[areaId || ""]
     );
     const zoneContentIds = useAppStore(
-      useShallow3((s) => {
+      useShallow4((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
       })
     );
     const zoneType = useAppStore(
-      useShallow3((s) => {
+      useShallow4((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
@@ -4907,7 +4959,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo9(
     () => ({
       areaId: props.id,
@@ -5959,7 +6011,7 @@ var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 import { memo as memo2, useCallback as useCallback12, useMemo as useMemo13 } from "react";
-import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { useShallow as useShallow5 } from "zustand/react/shallow";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
 var DefaultFields = ({
@@ -6025,7 +6077,7 @@ var FieldsChild = ({ fieldName }) => {
     return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
   });
   const permissions = useAppStore(
-    useShallow4((s) => {
+    useShallow5((s) => {
       const { selectedItem, permissions: permissions2 } = s;
       return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
     })
@@ -6034,7 +6086,8 @@ var FieldsChild = ({ fieldName }) => {
   const onChange = useCallback12(createOnChange(fieldName, appStore), [
     fieldName
   ]);
-  if (!field || !id) return null;
+  const { visible = true } = field != null ? field : {};
+  if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
   return /* @__PURE__ */ jsx27("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx27(
     AutoFieldPrivate,
@@ -6056,7 +6109,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
-  const itemSelector = useAppStore(useShallow4((s) => s.state.ui.itemSelector));
+  const itemSelector = useAppStore(useShallow5((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => {
     var _a;
     return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -6065,7 +6118,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   useRegisterFieldsSlice(appStore, id);
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(
-    useShallow4((s) => {
+    useShallow5((s) => {
       if (s.fields.id === id) {
         return Object.keys(s.fields.fields);
       }
@@ -6593,13 +6646,16 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const Page = useCallback13(
     (pageProps) => {
       var _a, _b;
-      const rootConfig = config.root;
-      const propsWithSlots = useSlots(rootConfig, pageProps, DropZoneEditPure);
+      const propsWithSlots = useSlots(
+        config,
+        { type: "root", props: pageProps },
+        DropZoneEditPure
+      );
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
       }, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment9, { children: propsWithSlots.children });
     },
-    [config.root]
+    [config]
   );
   const Frame = useMemo15(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
@@ -6710,7 +6766,7 @@ var onScrollEnd = (frame, cb) => {
 };
 
 // components/LayerTree/index.tsx
-import { useShallow as useShallow5 } from "zustand/react/shallow";
+import { useShallow as useShallow6 } from "zustand/react/shallow";
 import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
@@ -6737,7 +6793,7 @@ var Layer = ({
   const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
   const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
   const zonesForItem = useAppStore(
-    useShallow5(
+    useShallow6(
       (s) => Object.keys(s.state.indexes.zones).filter(
         (z) => z.split(":")[0] === itemId
       )
@@ -6784,7 +6840,10 @@ var Layer = ({
                 `[data-puck-component="${itemId}"]`
               );
               if (!el) {
-                console.error("Scroll failed. No element was found for", itemId);
+                setItemSelector({
+                  index,
+                  zone: zoneCompound
+                });
                 return;
               }
               scrollIntoView(el);
@@ -6830,7 +6889,7 @@ var LayerTree = ({
 }) => {
   const label = _label != null ? _label : zoneCompound.split(":")[1];
   const contentIds = useAppStore(
-    useShallow5(
+    useShallow6(
       (s) => {
         var _a, _b;
         return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
@@ -6871,12 +6930,12 @@ var findZonesForArea = (state, area) => {
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useShallow as useShallow6 } from "zustand/react/shallow";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
-    useShallow6((s) => findZonesForArea(s.state, "root"))
+    useShallow7((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo16(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
@@ -7198,7 +7257,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow7 } from "zustand/react/shallow";
+import { useShallow as useShallow8 } from "zustand/react/shallow";
 import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
 var ZOOM_ON_CHANGE = true;
@@ -7212,7 +7271,7 @@ var Canvas = () => {
     status,
     iframe
   } = useAppStore(
-    useShallow7((s) => ({
+    useShallow8((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
@@ -7223,7 +7282,7 @@ var Canvas = () => {
     }))
   );
   const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
-    useShallow7((s) => ({
+    useShallow8((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       viewports: s.state.ui.viewports
@@ -7919,6 +7978,11 @@ function PuckProvider({ children }) {
   const [appStore] = useState23(
     () => createAppStore(generateAppStore(initialAppState))
   );
+  useEffect25(() => {
+    if (process.env.NODE_ENV !== "production") {
+      window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
+    }
+  }, [appStore]);
   useEffect25(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));

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-DOB5QZVq.mjs';
-export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DOB5QZVq.mjs';
+import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DBd3aQ_5.mjs';
+export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DBd3aQ_5.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-DOB5QZVq.js';
-export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DOB5QZVq.js';
+import { a as Config, U as UserGenerics, M as Metadata } from './walk-tree-DBd3aQ_5.js';
+export { af as migrate, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-DBd3aQ_5.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {