@measured/puck 0.20.3-canary.d855fa8c → 0.21.0-canary.01415f6c

package/dist/chunk-3SDLQIUZ.mjs

@@ -0,0 +1,429 @@
+import {
+  styles_module_default
+} from "./chunk-AOEDIUVK.mjs";
+import {
+  defaultAppState,
+  resolveComponentData
+} from "./chunk-45I5SDOI.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-Y2EFNT5P.mjs";
+import {
+  mapFields,
+  walkAppState,
+  walkTree
+} from "./chunk-B7REOAA7.mjs";
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  init_react_import
+} from "./chunk-M6W7YEVX.mjs";
+
+// lib/migrate.ts
+init_react_import();
+var migrations = [
+  // Migrate root to root.props
+  (data) => {
+    const rootProps = data.root.props || data.root;
+    if (Object.keys(data.root).length > 0 && !data.root.props) {
+      console.warn(
+        "Migration applied: Root props moved from `root` to `root.props`."
+      );
+      return __spreadProps(__spreadValues({}, data), {
+        root: {
+          props: __spreadValues({}, rootProps)
+        }
+      });
+    }
+    return data;
+  },
+  // Migrate zones to slots
+  (data, config, migrationOptions) => {
+    var _a, _b;
+    if (!config) return data;
+    console.log("Migrating DropZones to slots...");
+    const updatedItems = {};
+    const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
+    const { indexes } = walkAppState(appState, config);
+    const deletedCompounds = [];
+    walkAppState(appState, config, (content, zoneCompound, zoneType) => {
+      var _a2, _b2, _c;
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = id === "root" ? config.root : config.components[componentType];
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
+          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
+            props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.props), {
+              [slotName]: content
+            })
+          });
+          deletedCompounds.push(zoneCompound);
+        }
+        return content;
+      }
+      return content;
+    });
+    const updated = walkAppState(
+      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];
+    });
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      throw new Error(
+        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
+      );
+    });
+    delete updated.data.zones;
+    return updated.data;
+  }
+];
+function migrate(data, config, migrationOptions) {
+  return migrations == null ? void 0 : migrations.reduce(
+    (acc, migration) => migration(acc, config, migrationOptions),
+    data
+  );
+}
+
+// lib/transform-props.ts
+init_react_import();
+
+// lib/data/default-data.ts
+init_react_import();
+var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms, config = { components: {} }) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: __spreadValues({
+          id: item.props.id
+        }, propTransforms[item.type](item.props))
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    newRoot.props = propTransforms["root"](rootProps);
+  }
+  const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
+  const updatedData = walkTree(
+    dataWithUpdatedRoot,
+    config,
+    (content) => content.map(mapItem)
+  );
+  if (!defaultedData.root.props) {
+    updatedData.root = updatedData.root.props;
+  }
+  return updatedData;
+}
+
+// lib/resolve-all-data.ts
+init_react_import();
+
+// 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-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 node = toComponent(_node);
+      onResolveStart == null ? void 0 : onResolveStart(node);
+      const resolved = (yield resolveComponentData(
+        node,
+        config,
+        metadata,
+        () => {
+        },
+        () => {
+        },
+        "force"
+      )).node;
+      const resolvedDeep = yield mapFields(
+        resolved,
+        { slot: ({ value }) => processContent(value) },
+        config
+      );
+      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 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;
+  });
+}
+
+// lib/field-transforms/default-transforms/slot-transform.tsx
+init_react_import();
+var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
+  slot: ({ value: content, propName, field, isReadOnly }) => {
+    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
+      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
+    }, dzProps), {
+      zone: propName,
+      content
+    }));
+    return Slot;
+  }
+});
+
+// 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,
+    item,
+    getSlotTransform(renderSlotEdit, renderSlotRender),
+    readOnly,
+    forceReadOnly
+  );
+}
+
+// components/RichTextEditor/lib/use-richtext-props.tsx
+init_react_import();
+import { lazy, Suspense, useMemo as useMemo2 } from "react";
+
+// components/RichTextEditor/components/RenderFallback.tsx
+init_react_import();
+import { jsx } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("RichTextEditor", styles_module_default);
+function RichTextRenderFallback({ content }) {
+  return /* @__PURE__ */ jsx("div", { className: getClassName(), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rich-text",
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+}
+
+// components/RichTextEditor/lib/use-richtext-props.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useRichtextProps(fields, props) {
+  const findAllRichtextKeys = (fields2) => {
+    if (!fields2) return [];
+    const result = [];
+    for (const [key, field] of Object.entries(fields2)) {
+      if (field.type === "richtext") {
+        result.push(key);
+      }
+    }
+    return result;
+  };
+  const richtextKeys = useMemo2(() => findAllRichtextKeys(fields), [fields]);
+  const richtextProps = useMemo2(() => {
+    if (!(richtextKeys == null ? void 0 : richtextKeys.length)) return {};
+    const RichTextRender = lazy(
+      () => import("./Render-FXZX6NFH.mjs").then((m) => ({
+        default: m.RichTextRender
+      }))
+    );
+    return richtextKeys.reduce((acc, key) => {
+      acc[key] = /* @__PURE__ */ jsx2(Suspense, { fallback: /* @__PURE__ */ jsx2(RichTextRenderFallback, { content: props[key] }), children: /* @__PURE__ */ jsx2(
+        RichTextRender,
+        {
+          content: props[key],
+          field: fields[key]
+        }
+      ) });
+      return acc;
+    }, {});
+  }, [richtextKeys, props, fields]);
+  return richtextProps;
+}
+
+// components/SlotRender/server.tsx
+init_react_import();
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SlotRenderPure = (props) => /* @__PURE__ */ jsx3(SlotRender, __spreadValues({}, props));
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx3(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const richtextProps = useRichtextProps(Component.fields, props);
+  return /* @__PURE__ */ jsx3(
+    Component.render,
+    __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        metadata: metadata || {}
+      })
+    })
+  );
+};
+var SlotRender = forwardRef(
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as != null ? as : "div";
+    return /* @__PURE__ */ jsx3(El, { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx3(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
+
+export {
+  buildMappers,
+  getSlotTransform,
+  useSlots,
+  RichTextRenderFallback,
+  useRichtextProps,
+  SlotRenderPure,
+  SlotRender,
+  toComponent,
+  migrate,
+  transformProps,
+  resolveAllData
+};

package/dist/chunk-45I5SDOI.mjs

@@ -0,0 +1,134 @@
+import {
+  mapFields
+} from "./chunk-B7REOAA7.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/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 },
+    plugin: { current: null }
+  },
+  indexes: {
+    nodes: {},
+    zones: {}
+  }
+};
+
+export {
+  defaultViewports,
+  getChanged,
+  resolveComponentData,
+  defaultAppState
+};

package/dist/chunk-5ZZVX2Z3.mjs

@@ -0,0 +1,63 @@
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6
+} from "./chunk-D2SRL6YA.mjs";
+import {
+  init_react_import
+} from "./chunk-M6W7YEVX.mjs";
+
+// components/RichTextMenu/controls/HeadingSelect/use-options.ts
+init_react_import();
+import { useMemo } from "react";
+var optionNodes = {
+  h1: { label: "Heading 1", icon: Heading1 },
+  h2: { label: "Heading 2", icon: Heading2 },
+  h3: { label: "Heading 3", icon: Heading3 },
+  h4: { label: "Heading 4", icon: Heading4 },
+  h5: { label: "Heading 5", icon: Heading5 },
+  h6: { label: "Heading 6", icon: Heading6 }
+};
+var useHeadingOptions = (fieldOptions) => {
+  var _a;
+  let blockOptions = [];
+  if ((fieldOptions == null ? void 0 : fieldOptions.heading) !== false) {
+    if (!((_a = fieldOptions == null ? void 0 : fieldOptions.heading) == null ? void 0 : _a.levels)) {
+      blockOptions = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    } else {
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(1)) {
+        blockOptions.push("h1");
+      }
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(2)) {
+        blockOptions.push("h2");
+      }
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(3)) {
+        blockOptions.push("h3");
+      }
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(4)) {
+        blockOptions.push("h4");
+      }
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(5)) {
+        blockOptions.push("h5");
+      }
+      if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(6)) {
+        blockOptions.push("h6");
+      }
+    }
+  }
+  return useMemo(
+    () => blockOptions.map((item) => ({
+      value: item,
+      label: optionNodes[item].label,
+      icon: optionNodes[item].icon
+    })),
+    [blockOptions]
+  );
+};
+
+export {
+  useHeadingOptions
+};

package/dist/chunk-AOEDIUVK.mjs

@@ -0,0 +1,11 @@
+import {
+  init_react_import
+} from "./chunk-M6W7YEVX.mjs";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/RichTextEditor/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "RichTextEditor": "_RichTextEditor_z25h4_1", "RichTextEditor--editor": "_RichTextEditor--editor_z25h4_50", "RichTextEditor--disabled": "_RichTextEditor--disabled_z25h4_107", "RichTextEditor--isActive": "_RichTextEditor--isActive_z25h4_111", "RichTextEditor-menu": "_RichTextEditor-menu_z25h4_117" };
+
+export {
+  styles_module_default
+};