@measured/puck 0.21.0-canary.15fe8d60 → 0.21.0-canary.1d823fd9

package/dist/no-external.mjs

@@ -11,21 +11,25 @@ import {
   Label,
   Puck,
   Render,
+  blocksPlugin,
   createUsePuck,
+  fieldsPlugin,
+  outlinePlugin,
   overrideKeys,
   registerOverlayPortal,
   renderContext,
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-JB4ZAK5S.mjs";
+} from "./chunk-SWIW6GHU.mjs";
 import {
+  createReducer,
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-MHKBV5D3.mjs";
 
 // bundle/no-external.ts
 init_react_import();
@@ -42,8 +46,12 @@ export {
   Label,
   Puck,
   Render,
+  blocksPlugin,
+  createReducer,
   createUsePuck,
+  fieldsPlugin,
   migrate,
+  outlinePlugin,
   overrideKeys,
   registerOverlayPortal,
   renderContext,

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-BMbIeiqs.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-BMbIeiqs.mjs';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-CegGHme5.mjs';
+export { c as createReducer, m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CegGHme5.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 { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-BMbIeiqs.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-BMbIeiqs.js';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-CegGHme5.js';
+export { c as createReducer, m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CegGHme5.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.js

@@ -80,6 +80,7 @@ var __async = (__this, __arguments, generator) => {
 var rsc_exports = {};
 __export(rsc_exports, {
   Render: () => Render,
+  createReducer: () => createReducer,
   migrate: () => migrate,
   resolveAllData: () => resolveAllData,
   transformProps: () => transformProps,
@@ -671,7 +672,8 @@ function transformProps(data, propTransforms, config = { components: {} }) {
 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: 1280, height: "auto", icon: "Monitor", label: "Large" },
+  { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
 ];
 
 // store/default-app-state.ts
@@ -693,7 +695,8 @@ var defaultAppState = {
       options: [],
       controlsVisible: true
     },
-    field: { focus: null }
+    field: { focus: null },
+    plugin: { current: null }
   },
   indexes: {
     nodes: {},
@@ -985,9 +988,483 @@ function migrate(data, config, migrationOptions) {
     data
   );
 }
+
+// reducer/actions/set.ts
+var setAction = (state, action, appStore) => {
+  if (typeof action.state === "object") {
+    const newState = __spreadValues(__spreadValues({}, state), action.state);
+    if (action.state.indexes) {
+      return newState;
+    }
+    console.warn(
+      "`set` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(newState, appStore.config);
+  }
+  return __spreadValues(__spreadValues({}, state), action.state(state));
+};
+
+// lib/data/insert.ts
+var insert = (list, index, item) => {
+  const result = Array.from(list || []);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/generate-id.ts
+var import_uuid = require("uuid");
+var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, import_uuid.v4)();
+
+// lib/data/get-ids-for-parent.ts
+var getIdsForParent = (zoneCompound, state) => {
+  const [parentId] = zoneCompound.split(":");
+  const node = state.indexes.nodes[parentId];
+  return ((node == null ? void 0 : node.path) || []).map((p) => p.split(":")[0]);
+};
+
+// lib/data/populate-ids.ts
+var populateIds = (data, config, override = false) => {
+  const id = generateId(data.type);
+  return walkTree(
+    __spreadProps(__spreadValues({}, data), {
+      props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
+    }),
+    config,
+    (contents) => contents.map((item) => {
+      const id2 = generateId(item.type);
+      return __spreadProps(__spreadValues({}, item), {
+        props: override ? __spreadProps(__spreadValues({}, item.props), { id: id2 }) : __spreadValues({ id: id2 }, item.props)
+      });
+    })
+  );
+};
+
+// reducer/actions/insert.ts
+function insertAction(state, action, appStore) {
+  const id = action.id || generateId(action.componentType);
+  const emptyComponentData = populateIds(
+    {
+      type: action.componentType,
+      props: __spreadProps(__spreadValues({}, appStore.config.components[action.componentType].defaultProps || {}), {
+        id
+      })
+    },
+    appStore.config
+  );
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.destinationZone) {
+        return insert(
+          content || [],
+          action.destinationIndex,
+          emptyComponentData
+        );
+      }
+      return content;
+    },
+    (childItem, path) => {
+      if (childItem.props.id === id || childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.includes(childItem.props.id)) {
+        return childItem;
+      } else if (path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+}
+
+// reducer/actions/replace.ts
+var replaceAction = (state, action, appStore) => {
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  const originalId = state.indexes.zones[action.destinationZone].contentIds[action.destinationIndex];
+  const idChanged = originalId !== action.data.props.id;
+  if (idChanged) {
+    throw new Error(
+      `Can't change the id during a replace action. Please us "remove" and "insert" to define a new node.`
+    );
+  }
+  const newSlotIds = [];
+  const data = walkTree(action.data, appStore.config, (contents, opts) => {
+    newSlotIds.push(`${opts.parentId}:${opts.propName}`);
+    return contents.map((item) => {
+      const id = generateId(item.type);
+      return __spreadProps(__spreadValues({}, item), {
+        props: __spreadValues({ id }, item.props)
+      });
+    });
+  });
+  const stateWithDeepSlotsRemoved = __spreadValues({}, state);
+  Object.keys(state.indexes.zones).forEach((zoneCompound) => {
+    const id = zoneCompound.split(":")[0];
+    if (id === originalId) {
+      if (!newSlotIds.includes(zoneCompound)) {
+        delete stateWithDeepSlotsRemoved.indexes.zones[zoneCompound];
+      }
+    }
+  });
+  return walkAppState(
+    stateWithDeepSlotsRemoved,
+    appStore.config,
+    (content, zoneCompound) => {
+      const newContent = [...content];
+      if (zoneCompound === action.destinationZone) {
+        newContent[action.destinationIndex] = data;
+      }
+      return newContent;
+    },
+    (childItem, path) => {
+      const pathIds = path.map((p) => p.split(":")[0]);
+      if (childItem.props.id === data.props.id) {
+        return data;
+      } else if (childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.indexOf(childItem.props.id) > -1) {
+        return childItem;
+      } else if (pathIds.indexOf(data.props.id) > -1) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+};
+
+// reducer/actions/replace-root.ts
+var replaceRootAction = (state, action, appStore) => {
+  return walkAppState(
+    state,
+    appStore.config,
+    (content) => content,
+    (childItem) => {
+      if (childItem.props.id === "root") {
+        return __spreadProps(__spreadValues({}, childItem), {
+          props: __spreadValues(__spreadValues({}, childItem.props), action.root.props),
+          readOnly: action.root.readOnly
+        });
+      }
+      return childItem;
+    }
+  );
+};
+
+// lib/data/get-item.ts
+function getItem(selector, state) {
+  var _a, _b;
+  const zone = (_a = state.indexes.zones) == null ? void 0 : _a[selector.zone || rootDroppableId];
+  return zone ? (_b = state.indexes.nodes[zone.contentIds[selector.index]]) == null ? void 0 : _b.data : void 0;
+}
+
+// reducer/actions/duplicate.ts
+function duplicateAction(state, action, appStore) {
+  const item = getItem(
+    { index: action.sourceIndex, zone: action.sourceZone },
+    state
+  );
+  const idsInPath = getIdsForParent(action.sourceZone, state);
+  const newItem = __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), {
+      id: generateId(item.type)
+    })
+  });
+  const modified = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone) {
+        return insert(content, action.sourceIndex + 1, item);
+      }
+      return content;
+    },
+    (childItem, path, index) => {
+      const zoneCompound = path[path.length - 1];
+      const parents = path.map((p) => p.split(":")[0]);
+      if (parents.indexOf(newItem.props.id) > -1) {
+        return __spreadProps(__spreadValues({}, childItem), {
+          props: __spreadProps(__spreadValues({}, childItem.props), {
+            id: generateId(childItem.type)
+          })
+        });
+      }
+      if (zoneCompound === action.sourceZone && index === action.sourceIndex + 1) {
+        return newItem;
+      }
+      const [sourceZoneParent] = action.sourceZone.split(":");
+      if (sourceZoneParent === childItem.props.id || idsInPath.indexOf(childItem.props.id) > -1) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+  return __spreadProps(__spreadValues({}, modified), {
+    ui: __spreadProps(__spreadValues({}, modified.ui), {
+      itemSelector: {
+        index: action.sourceIndex + 1,
+        zone: action.sourceZone
+      }
+    })
+  });
+}
+
+// lib/data/remove.ts
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+// reducer/actions/move.ts
+var moveAction = (state, action, appStore) => {
+  if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+    return state;
+  }
+  const item = getItem(
+    { zone: action.sourceZone, index: action.sourceIndex },
+    state
+  );
+  if (!item) return state;
+  const idsInSourcePath = getIdsForParent(action.sourceZone, state);
+  const idsInDestinationPath = getIdsForParent(action.destinationZone, state);
+  return walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.sourceZone && zoneCompound === action.destinationZone) {
+        return insert(
+          remove(content, action.sourceIndex),
+          action.destinationIndex,
+          item
+        );
+      } else if (zoneCompound === action.sourceZone) {
+        return remove(content, action.sourceIndex);
+      } else if (zoneCompound === action.destinationZone) {
+        return insert(content, action.destinationIndex, item);
+      }
+      return content;
+    },
+    (childItem, path) => {
+      const [sourceZoneParent] = action.sourceZone.split(":");
+      const [destinationZoneParent] = action.destinationZone.split(":");
+      const childId = childItem.props.id;
+      if (sourceZoneParent === childId || destinationZoneParent === childId || item.props.id === childId || idsInSourcePath.indexOf(childId) > -1 || idsInDestinationPath.indexOf(childId) > -1 || path.includes(action.destinationZone)) {
+        return childItem;
+      }
+      return null;
+    }
+  );
+};
+
+// reducer/actions/reorder.ts
+var reorderAction = (state, action, appStore) => {
+  return moveAction(
+    state,
+    {
+      type: "move",
+      sourceIndex: action.sourceIndex,
+      sourceZone: action.destinationZone,
+      destinationIndex: action.destinationIndex,
+      destinationZone: action.destinationZone
+    },
+    appStore
+  );
+};
+
+// reducer/actions/remove.ts
+var removeAction = (state, action, appStore) => {
+  const item = getItem({ index: action.index, zone: action.zone }, state);
+  const nodesToDelete = Object.entries(state.indexes.nodes).reduce(
+    (acc, [nodeId, nodeData]) => {
+      const pathIds = nodeData.path.map((p) => p.split(":")[0]);
+      if (pathIds.includes(item.props.id)) {
+        return [...acc, nodeId];
+      }
+      return acc;
+    },
+    [item.props.id]
+  );
+  const newState = walkAppState(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.zone) {
+        return remove(content, action.index);
+      }
+      return content;
+    }
+  );
+  Object.keys(newState.data.zones || {}).forEach((zoneCompound) => {
+    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 parentId = zoneCompound.split(":")[0];
+    if (nodesToDelete.includes(parentId)) {
+      delete newState.indexes.zones[zoneCompound];
+    }
+  });
+  nodesToDelete.forEach((id) => {
+    delete newState.indexes.nodes[id];
+  });
+  return newState;
+};
+
+// reducer/actions/register-zone.ts
+var zoneCache = {};
+function registerZoneAction(state, action) {
+  if (zoneCache[action.zone]) {
+    return __spreadProps(__spreadValues({}, state), {
+      data: __spreadProps(__spreadValues({}, state.data), {
+        zones: __spreadProps(__spreadValues({}, state.data.zones), {
+          [action.zone]: zoneCache[action.zone]
+        })
+      }),
+      indexes: __spreadProps(__spreadValues({}, state.indexes), {
+        zones: __spreadProps(__spreadValues({}, state.indexes.zones), {
+          [action.zone]: __spreadProps(__spreadValues({}, state.indexes.zones[action.zone]), {
+            contentIds: zoneCache[action.zone].map((item) => item.props.id),
+            type: "dropzone"
+          })
+        })
+      })
+    });
+  }
+  return __spreadProps(__spreadValues({}, state), { data: setupZone(state.data, action.zone) });
+}
+function unregisterZoneAction(state, action) {
+  const _zones = __spreadValues({}, state.data.zones || {});
+  const zoneIndex = __spreadValues({}, state.indexes.zones || {});
+  if (_zones[action.zone]) {
+    zoneCache[action.zone] = _zones[action.zone];
+    delete _zones[action.zone];
+  }
+  delete zoneIndex[action.zone];
+  return __spreadProps(__spreadValues({}, state), {
+    data: __spreadProps(__spreadValues({}, state.data), {
+      zones: _zones
+    }),
+    indexes: __spreadProps(__spreadValues({}, state.indexes), {
+      zones: zoneIndex
+    })
+  });
+}
+
+// reducer/actions/set-data.ts
+var setDataAction = (state, action, appStore) => {
+  if (typeof action.data === "object") {
+    console.warn(
+      "`setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+    );
+    return walkAppState(
+      __spreadProps(__spreadValues({}, state), {
+        data: __spreadValues(__spreadValues({}, state.data), action.data)
+      }),
+      appStore.config
+    );
+  }
+  return walkAppState(
+    __spreadProps(__spreadValues({}, state), {
+      data: __spreadValues(__spreadValues({}, state.data), action.data(state.data))
+    }),
+    appStore.config
+  );
+};
+
+// reducer/actions/set-ui.ts
+var setUiAction = (state, action) => {
+  if (typeof action.ui === "object") {
+    return __spreadProps(__spreadValues({}, state), {
+      ui: __spreadValues(__spreadValues({}, state.ui), action.ui)
+    });
+  }
+  return __spreadProps(__spreadValues({}, state), {
+    ui: __spreadValues(__spreadValues({}, state.ui), action.ui(state.ui))
+  });
+};
+
+// lib/data/make-state-public.ts
+var makeStatePublic = (state) => {
+  const { data, ui } = state;
+  return { data, ui };
+};
+
+// reducer/index.ts
+function storeInterceptor(reducer, record, onAction) {
+  return (state, action) => {
+    const newAppState = reducer(state, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setUi",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      if (record) record(newAppState);
+    }
+    onAction == null ? void 0 : onAction(action, makeStatePublic(newAppState), makeStatePublic(state));
+    return newAppState;
+  };
+}
+function createReducer({
+  record,
+  onAction,
+  appStore
+}) {
+  return storeInterceptor(
+    (state, action) => {
+      if (action.type === "set") {
+        return setAction(state, action, appStore);
+      }
+      if (action.type === "insert") {
+        return insertAction(state, action, appStore);
+      }
+      if (action.type === "replace") {
+        return replaceAction(state, action, appStore);
+      }
+      if (action.type === "replaceRoot") {
+        return replaceRootAction(state, action, appStore);
+      }
+      if (action.type === "duplicate") {
+        return duplicateAction(state, action, appStore);
+      }
+      if (action.type === "reorder") {
+        return reorderAction(state, action, appStore);
+      }
+      if (action.type === "move") {
+        return moveAction(state, action, appStore);
+      }
+      if (action.type === "remove") {
+        return removeAction(state, action, appStore);
+      }
+      if (action.type === "registerZone") {
+        return registerZoneAction(state, action);
+      }
+      if (action.type === "unregisterZone") {
+        return unregisterZoneAction(state, action);
+      }
+      if (action.type === "setData") {
+        return setDataAction(state, action, appStore);
+      }
+      if (action.type === "setUi") {
+        return setUiAction(state, action);
+      }
+      return state;
+    },
+    record,
+    onAction
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Render,
+  createReducer,
   migrate,
   resolveAllData,
   transformProps,

package/dist/rsc.mjs

@@ -2,6 +2,7 @@ import {
   SlotRenderPure,
   __spreadProps,
   __spreadValues,
+  createReducer,
   init_react_import,
   migrate,
   resolveAllData,
@@ -12,7 +13,7 @@ import {
   transformProps,
   useSlots,
   walkTree
-} from "./chunk-TC25DCTQ.mjs";
+} from "./chunk-MHKBV5D3.mjs";
 
 // bundle/rsc.tsx
 init_react_import();
@@ -114,6 +115,7 @@ function Render({
 }
 export {
   Render,
+  createReducer,
   migrate,
   resolveAllData,
   transformProps,