@measured/puck 0.21.0-canary.c78dc826 → 0.21.0-canary.cbc526d1

package/dist/{chunk-C2TVYIYC.mjs → chunk-NYGQH27S.mjs}

@@ -1,21 +1,27 @@
 import {
   styles_module_default
-} from "./chunk-WUWXFMEM.mjs";
+} from "./chunk-AOEDIUVK.mjs";
 import {
   defaultAppState,
-  mapFields,
   resolveComponentData,
+  toComponent
+} from "./chunk-REWRIUGR.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-Y2EFNT5P.mjs";
+import {
+  getZoneId,
+  mapFields,
   walkAppState,
   walkTree
-} from "./chunk-DJSH5REF.mjs";
+} from "./chunk-Q3TJ2VYO.mjs";
 import {
   __async,
   __objRest,
   __spreadProps,
   __spreadValues,
-  get_class_name_factory_default,
   init_react_import
-} from "./chunk-DCSQEDMK.mjs";
+} from "./chunk-M6W7YEVX.mjs";
 
 // lib/migrate.ts
 init_react_import();
@@ -182,21 +188,29 @@ function transformProps(data, propTransforms, config = { components: {} }) {
 // lib/resolve-all-data.ts
 init_react_import();
 
-// lib/data/to-component.ts
+// lib/group-zones-by-component.ts
 init_react_import();
-var toComponent = (item) => {
-  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-    type: "root"
-  });
+var groupZonesByComponent = (data) => {
+  var _a;
+  const zoneEntries = Object.entries((_a = data.zones) != null ? _a : {});
+  return zoneEntries.reduce((acc, [zoneCompound, zoneContent]) => {
+    const [componentId, zoneName] = getZoneId(zoneCompound);
+    if (!componentId.length || !zoneName.length) return acc;
+    if (!acc[componentId]) {
+      acc[componentId] = [];
+    }
+    acc[componentId].push({ zoneCompound, content: zoneContent });
+    return acc;
+  }, {});
 };
 
 // lib/resolve-all-data.ts
 function resolveAllData(_0, _1) {
   return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
-    var _a;
     const defaultedData = defaultData(data);
-    const resolveNode = (_node) => __async(null, null, function* () {
+    const zonesByComponent = groupZonesByComponent(defaultedData);
+    let resolvedZones = {};
+    const resolveNode = (_node, parent) => __async(null, null, function* () {
       const node = toComponent(_node);
       onResolveStart == null ? void 0 : onResolveStart(node);
       const resolved = (yield resolveComponentData(
@@ -207,76 +221,47 @@ function resolveAllData(_0, _1) {
         },
         () => {
         },
-        "force"
+        "force",
+        parent
       )).node;
-      const resolvedDeep = yield mapFields(
+      const resolvedAsComponent = toComponent(resolved);
+      const resolvedDeepPromise = mapFields(
         resolved,
-        { slot: ({ value }) => processContent(value) },
+        {
+          slot: ({ value }) => processContent(value, resolvedAsComponent)
+        },
         config
       );
+      let resolveZonePromises = [];
+      if (zonesByComponent[resolvedAsComponent.props.id]) {
+        resolveZonePromises = zonesByComponent[resolvedAsComponent.props.id].map(
+          (_02) => __async(null, [_02], function* ({ zoneCompound, content }) {
+            resolvedZones[zoneCompound] = yield processContent(
+              content,
+              resolvedAsComponent
+            );
+          })
+        );
+      }
+      const resolvedDeep = yield resolvedDeepPromise;
+      yield Promise.all(resolveZonePromises);
       onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
       return resolvedDeep;
     });
-    const processContent = (content) => __async(null, null, function* () {
-      return Promise.all(content.map(resolveNode));
-    });
-    const processZones = () => __async(null, null, function* () {
-      var _a2;
-      const zones = (_a2 = data.zones) != null ? _a2 : {};
-      Object.entries(zones).forEach((_02) => __async(null, [_02], function* ([zoneKey, content]) {
-        zones[zoneKey] = yield Promise.all(content.map(resolveNode));
-      }));
-      return zones;
+    const processContent = (content, parent) => __async(null, null, function* () {
+      return Promise.all(content.map((item) => resolveNode(item, parent)));
     });
-    const dynamic = {
-      root: yield resolveNode(defaultedData.root),
-      content: yield processContent(defaultedData.content),
-      zones: yield processZones()
-    };
-    Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(null, null, function* () {
-      const content = defaultedData.zones[zoneKey];
-      dynamic.zones[zoneKey] = yield processContent(content);
-    }), {});
-    return dynamic;
+    const result = defaultData({});
+    result.root = yield resolveNode(defaultedData.root, null);
+    result.content = yield processContent(
+      defaultedData.content,
+      toComponent(result.root)
+    );
+    result.zones = resolvedZones;
+    return result;
   });
 }
 
-// lib/field-transforms/use-field-transforms.tsx
-init_react_import();
-import { useMemo } from "react";
-function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
-  const mappers = useMemo(() => {
-    return Object.keys(transforms).reduce((acc, _fieldType) => {
-      const fieldType = _fieldType;
-      return __spreadProps(__spreadValues({}, acc), {
-        [fieldType]: (_a) => {
-          var _b = _a, {
-            parentId
-          } = _b, params = __objRest(_b, [
-            "parentId"
-          ]);
-          const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
-          const isReadOnly = (readOnly == null ? void 0 : readOnly[params.propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly || false;
-          const fn = transforms[fieldType];
-          return fn == null ? void 0 : fn(__spreadProps(__spreadValues({}, params), {
-            isReadOnly,
-            componentId: parentId
-          }));
-        }
-      });
-    }, {});
-  }, [transforms, readOnly, forceReadOnly]);
-  const transformedProps = useMemo(() => {
-    const mapped = mapFields(item, mappers, config).props;
-    return mapped;
-  }, [config, item, mappers]);
-  const mergedProps = useMemo(
-    () => __spreadValues(__spreadValues({}, item.props), transformedProps),
-    [item.props, transformedProps]
-  );
-  return mergedProps;
-}
-
 // lib/field-transforms/default-transforms/slot-transform.tsx
 init_react_import();
 var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
@@ -295,6 +280,52 @@ var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
 
 // lib/use-slots.tsx
 init_react_import();
+
+// lib/field-transforms/use-field-transforms.tsx
+init_react_import();
+import { useMemo } from "react";
+
+// lib/field-transforms/build-mappers.ts
+init_react_import();
+function buildMappers(transforms, readOnly, forceReadOnly) {
+  return Object.keys(transforms).reduce((acc, _fieldType) => {
+    const fieldType = _fieldType;
+    return __spreadProps(__spreadValues({}, acc), {
+      [fieldType]: (_a) => {
+        var _b = _a, {
+          parentId
+        } = _b, params = __objRest(_b, [
+          "parentId"
+        ]);
+        const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
+        const isReadOnly = (readOnly == null ? void 0 : readOnly[params.propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly || false;
+        const fn = transforms[fieldType];
+        return fn == null ? void 0 : fn(__spreadProps(__spreadValues({}, params), {
+          isReadOnly,
+          componentId: parentId
+        }));
+      }
+    });
+  }, {});
+}
+
+// lib/field-transforms/use-field-transforms.tsx
+function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
+  const mappers = useMemo(
+    () => buildMappers(transforms, readOnly, forceReadOnly),
+    [transforms, readOnly, forceReadOnly]
+  );
+  const transformedProps = useMemo(() => {
+    return mapFields(item, mappers, config).props;
+  }, [config, item, mappers]);
+  const mergedProps = useMemo(
+    () => __spreadValues(__spreadValues({}, item.props), transformedProps),
+    [item.props, transformedProps]
+  );
+  return mergedProps;
+}
+
+// lib/use-slots.tsx
 function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
   return useFieldTransforms(
     config,
@@ -340,7 +371,7 @@ function useRichtextProps(fields, props) {
   const richtextProps = useMemo2(() => {
     if (!(richtextKeys == null ? void 0 : richtextKeys.length)) return {};
     const RichTextRender = lazy(
-      () => import("./Render-Y567PGZ7.mjs").then((m) => ({
+      () => import("./Render-FXZX6NFH.mjs").then((m) => ({
         default: m.RichTextRender
       }))
     );
@@ -401,14 +432,13 @@ var SlotRender = forwardRef(
 );
 
 export {
-  useFieldTransforms,
+  buildMappers,
   getSlotTransform,
   useSlots,
   RichTextRenderFallback,
   useRichtextProps,
   SlotRenderPure,
   SlotRender,
-  toComponent,
   migrate,
   transformProps,
   resolveAllData

package/dist/{chunk-DJSH5REF.mjs → chunk-Q3TJ2VYO.mjs}

@@ -1,9 +1,8 @@
 import {
-  __async,
   __spreadProps,
   __spreadValues,
   init_react_import
-} from "./chunk-DCSQEDMK.mjs";
+} from "./chunk-M6W7YEVX.mjs";
 
 // lib/data/walk-tree.ts
 init_react_import();
@@ -144,12 +143,12 @@ var walkObject = ({
   }
   return flatten(newProps);
 };
-function mapFields(item, mappers, config, recurseSlots = false) {
+function mapFields(item, mappers, config, recurseSlots = false, shouldDefaultSlots = true) {
   var _a, _b, _c, _d, _e;
   const itemType = "type" in item ? item.type : "root";
   const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
   const newProps = walkObject({
-    value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
+    value: shouldDefaultSlots ? defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}) : item.props,
     fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
     mappers,
     id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
@@ -223,9 +222,28 @@ var stripSlots = (data, config) => {
 
 // lib/data/flatten-node.ts
 var { flatten: flatten2, unflatten } = flat;
+function isEmptyArrayOrObject(val) {
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (val != null && Object.prototype.toString.call(val) === "[object Object]") {
+    return Object.keys(val).length === 0;
+  }
+  return false;
+}
+function stripEmptyObjects(props) {
+  const result = {};
+  for (const key in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+    const val = props[key];
+    if (isEmptyArrayOrObject(val)) continue;
+    result[key] = val;
+  }
+  return result;
+}
 var flattenNode = (node, config) => {
   return __spreadProps(__spreadValues({}, node), {
-    props: flatten2(stripSlots(node, config).props)
+    props: stripEmptyObjects(flatten2(stripSlots(node, config).props))
   });
 };
 var expandNode = (node) => {
@@ -403,135 +421,16 @@ var setupZone = (data, zoneKey) => {
   return newData;
 };
 
-// components/ViewportControls/default-viewports.ts
-init_react_import();
-var defaultViewports = [
-  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
-  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
-  { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
-];
-
-// lib/resolve-component-data.ts
-init_react_import();
-
-// lib/get-changed.ts
-init_react_import();
-import { deepEqual } from "fast-equals";
-var getChanged = (newItem, oldItem) => {
-  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
-    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
-    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
-    return __spreadProps(__spreadValues({}, acc), {
-      [item]: !deepEqual(oldItemProps[item], newItemProps[item])
-    });
-  }, {}) : {};
-};
-
-// lib/resolve-component-data.ts
-import { deepEqual as deepEqual2 } from "fast-equals";
-var cache = { lastChange: {} };
-var resolveComponentData = (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
-  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
-  const resolvedItem = __spreadValues({}, item);
-  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
-  const id = "id" in item.props ? item.props.id : "root";
-  if (shouldRunResolver) {
-    const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && deepEqual2(item, oldItem)) {
-      return { node: resolved, didChange: false };
-    }
-    const changed = getChanged(item, oldItem);
-    if (onResolveStart) {
-      onResolveStart(item);
-    }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
-      changed,
-      lastData: oldItem,
-      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
-      trigger
-    });
-    resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
-    if (Object.keys(readOnly).length) {
-      resolvedItem.readOnly = readOnly;
-    }
-  }
-  let itemWithResolvedChildren = yield mapFields(
-    resolvedItem,
-    {
-      slot: (_02) => __async(null, [_02], function* ({ value }) {
-        const content = value;
-        return yield Promise.all(
-          content.map(
-            (childItem) => __async(null, null, function* () {
-              return (yield resolveComponentData(
-                childItem,
-                config,
-                metadata,
-                onResolveStart,
-                onResolveEnd,
-                trigger
-              )).node;
-            })
-          )
-        );
-      })
-    },
-    config
-  );
-  if (shouldRunResolver && onResolveEnd) {
-    onResolveEnd(resolvedItem);
-  }
-  cache.lastChange[id] = {
-    item,
-    resolved: itemWithResolvedChildren
-  };
-  return {
-    node: itemWithResolvedChildren,
-    didChange: !deepEqual2(item, itemWithResolvedChildren)
-  };
-});
-
-// store/default-app-state.ts
-init_react_import();
-var defaultAppState = {
-  data: { content: [], root: {}, zones: {} },
-  ui: {
-    leftSideBarVisible: true,
-    rightSideBarVisible: true,
-    arrayState: {},
-    itemSelector: null,
-    componentList: {},
-    isDragging: false,
-    previewMode: "edit",
-    viewports: {
-      current: {
-        width: defaultViewports[0].width,
-        height: defaultViewports[0].height || "auto"
-      },
-      options: [],
-      controlsVisible: true
-    },
-    field: { focus: null }
-  },
-  indexes: {
-    nodes: {},
-    zones: {}
-  }
-};
-
 export {
   rootAreaId,
   rootZone,
   rootDroppableId,
+  getZoneId,
   defaultSlots,
   walkField,
   mapFields,
   expandNode,
   walkAppState,
   walkTree,
-  setupZone,
-  defaultViewports,
-  getChanged,
-  resolveComponentData,
-  defaultAppState
+  setupZone
 };

package/dist/chunk-REWRIUGR.mjs

@@ -0,0 +1,156 @@
+import {
+  mapFields
+} from "./chunk-Q3TJ2VYO.mjs";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues,
+  init_react_import
+} from "./chunk-M6W7YEVX.mjs";
+
+// components/ViewportControls/default-viewports.ts
+init_react_import();
+var defaultViewports = [
+  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
+  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
+  { width: 1280, height: "auto", icon: "Monitor", label: "Large" },
+  { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
+];
+
+// lib/data/to-component.ts
+init_react_import();
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
+// lib/resolve-component-data.ts
+init_react_import();
+
+// lib/get-changed.ts
+init_react_import();
+import { deepEqual } from "fast-equals";
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: !deepEqual(oldItemProps[item], newItemProps[item])
+    });
+  }, {}) : {};
+};
+
+// lib/resolve-component-data.ts
+import { deepEqual as deepEqual2 } from "fast-equals";
+var cache = { lastChange: {} };
+var resolveComponentData = (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", parent = null) {
+  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
+  const resolvedItem = __spreadValues({}, item);
+  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
+  const id = "id" in item.props ? item.props.id : "root";
+  if (shouldRunResolver) {
+    const {
+      item: oldItem = null,
+      resolved = {},
+      parentId: oldParentId = null
+    } = cache.lastChange[id] || {};
+    const isRootOrInserted = oldParentId === null;
+    const parentChanged = !isRootOrInserted && (parent == null ? void 0 : parent.props.id) !== oldParentId;
+    const dataChanged = item && !deepEqual2(item, oldItem);
+    const shouldSkip = trigger === "move" && !parentChanged || trigger !== "move" && trigger !== "force" && !dataChanged;
+    if (shouldSkip) {
+      return { node: resolved, didChange: false };
+    }
+    const changed = getChanged(item, oldItem);
+    if (onResolveStart) {
+      onResolveStart(item);
+    }
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
+      changed,
+      lastData: oldItem,
+      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
+      trigger,
+      parent
+    });
+    resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
+    if (Object.keys(readOnly).length) {
+      resolvedItem.readOnly = readOnly;
+    }
+  }
+  const itemAsComponentData = toComponent(resolvedItem);
+  let itemWithResolvedChildren = yield mapFields(
+    resolvedItem,
+    {
+      slot: (_02) => __async(null, [_02], function* ({ value }) {
+        const content = value;
+        return yield Promise.all(
+          content.map(
+            (childItem) => __async(null, null, function* () {
+              return (yield resolveComponentData(
+                childItem,
+                config,
+                metadata,
+                onResolveStart,
+                onResolveEnd,
+                trigger,
+                itemAsComponentData
+              )).node;
+            })
+          )
+        );
+      })
+    },
+    config
+  );
+  if (shouldRunResolver && onResolveEnd) {
+    onResolveEnd(resolvedItem);
+  }
+  cache.lastChange[id] = {
+    item,
+    resolved: itemWithResolvedChildren,
+    parentId: parent == null ? void 0 : parent.props.id
+  };
+  return {
+    node: itemWithResolvedChildren,
+    didChange: !deepEqual2(item, itemWithResolvedChildren)
+  };
+});
+
+// store/default-app-state.ts
+init_react_import();
+var defaultAppState = {
+  data: { content: [], root: {}, zones: {} },
+  ui: {
+    leftSideBarVisible: true,
+    rightSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null,
+    componentList: {},
+    isDragging: false,
+    previewMode: "edit",
+    viewports: {
+      current: {
+        width: defaultViewports[0].width,
+        height: defaultViewports[0].height || "auto"
+      },
+      options: [],
+      controlsVisible: true
+    },
+    field: { focus: null },
+    plugin: { current: null }
+  },
+  indexes: {
+    nodes: {},
+    zones: {}
+  }
+};
+
+export {
+  defaultViewports,
+  getChanged,
+  toComponent,
+  resolveComponentData,
+  defaultAppState
+};

package/dist/{chunk-FNWOH4R6.mjs → chunk-V2IQTPPK.mjs}

@@ -1,18 +1,20 @@
 import {
   styles_module_default
-} from "./chunk-WUWXFMEM.mjs";
+} from "./chunk-AOEDIUVK.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-K3V4LVUL.mjs";
+} from "./chunk-6KNQXLQR.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-7KY6RHEY.mjs";
+} from "./chunk-K562SEXI.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-Y2EFNT5P.mjs";
 import {
   __spreadValues,
-  get_class_name_factory_default,
   init_react_import
-} from "./chunk-DCSQEDMK.mjs";
+} from "./chunk-M6W7YEVX.mjs";
 
 // components/RichTextEditor/components/EditorInner.tsx
 init_react_import();
@@ -95,7 +97,7 @@ init_react_import();
 import { lazy, Suspense } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LoadedRichTextMenuFull = lazy(
-  () => import("./full-NLUNPJWS.mjs").then((m) => ({
+  () => import("./full-4OS3O57Y.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );

package/dist/{chunk-R6CVX2IY.mjs → chunk-V5I7CVLT.mjs}

@@ -1,7 +1,7 @@
 import {
   __spreadValues,
   init_react_import
-} from "./chunk-DCSQEDMK.mjs";
+} from "./chunk-M6W7YEVX.mjs";
 
 // components/RichTextEditor/extension.ts
 init_react_import();