@measured/puck 0.19.0-canary.c79f5db8 → 0.19.0-canary.cb4b6ee5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/rsc.js CHANGED
@@ -9,9 +9,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
9
  var __getProtoOf = Object.getPrototypeOf;
10
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
11
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __typeError = (msg) => {
13
- throw TypeError(msg);
14
- };
15
12
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
16
13
  var __spreadValues = (a, b) => {
17
14
  for (var prop in b || (b = {}))
@@ -25,24 +22,6 @@ var __spreadValues = (a, b) => {
25
22
  return a;
26
23
  };
27
24
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
28
- var __objRest = (source, exclude) => {
29
- var target = {};
30
- for (var prop in source)
31
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
32
- target[prop] = source[prop];
33
- if (source != null && __getOwnPropSymbols)
34
- for (var prop of __getOwnPropSymbols(source)) {
35
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
36
- target[prop] = source[prop];
37
- }
38
- return target;
39
- };
40
- var __esm = (fn, res) => function __init() {
41
- return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
42
- };
43
- var __commonJS = (cb, mod) => function __require() {
44
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
45
- };
46
25
  var __export = (target, all) => {
47
26
  for (var name in all)
48
27
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -64,10 +43,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
64
43
  mod
65
44
  ));
66
45
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
67
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
68
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
69
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
70
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
71
46
  var __async = (__this, __arguments, generator) => {
72
47
  return new Promise((resolve, reject) => {
73
48
  var fulfilled = (value) => {
@@ -89,98 +64,26 @@ var __async = (__this, __arguments, generator) => {
89
64
  });
90
65
  };
91
66
 
92
- // ../tsup-config/react-import.js
93
- var import_react;
94
- var init_react_import = __esm({
95
- "../tsup-config/react-import.js"() {
96
- "use strict";
97
- import_react = __toESM(require("react"));
98
- }
99
- });
100
-
101
- // ../../node_modules/classnames/index.js
102
- var require_classnames = __commonJS({
103
- "../../node_modules/classnames/index.js"(exports2, module2) {
104
- "use strict";
105
- init_react_import();
106
- (function() {
107
- "use strict";
108
- var hasOwn = {}.hasOwnProperty;
109
- function classNames() {
110
- var classes = "";
111
- for (var i = 0; i < arguments.length; i++) {
112
- var arg = arguments[i];
113
- if (arg) {
114
- classes = appendClass(classes, parseValue(arg));
115
- }
116
- }
117
- return classes;
118
- }
119
- function parseValue(arg) {
120
- if (typeof arg === "string" || typeof arg === "number") {
121
- return arg;
122
- }
123
- if (typeof arg !== "object") {
124
- return "";
125
- }
126
- if (Array.isArray(arg)) {
127
- return classNames.apply(null, arg);
128
- }
129
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
130
- return arg.toString();
131
- }
132
- var classes = "";
133
- for (var key in arg) {
134
- if (hasOwn.call(arg, key) && arg[key]) {
135
- classes = appendClass(classes, key);
136
- }
137
- }
138
- return classes;
139
- }
140
- function appendClass(value, newClass) {
141
- if (!newClass) {
142
- return value;
143
- }
144
- if (value) {
145
- return value + " " + newClass;
146
- }
147
- return value + newClass;
148
- }
149
- if (typeof module2 !== "undefined" && module2.exports) {
150
- classNames.default = classNames;
151
- module2.exports = classNames;
152
- } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
153
- define("classnames", [], function() {
154
- return classNames;
155
- });
156
- } else {
157
- window.classNames = classNames;
158
- }
159
- })();
160
- }
161
- });
162
-
163
67
  // rsc.tsx
164
68
  var rsc_exports = {};
165
69
  __export(rsc_exports, {
166
70
  Render: () => Render,
71
+ migrate: () => migrate,
167
72
  resolveAllData: () => resolveAllData,
168
- transformProps: () => transformProps
73
+ transformProps: () => transformProps,
74
+ walkTree: () => walkTree
169
75
  });
170
76
  module.exports = __toCommonJS(rsc_exports);
171
- init_react_import();
172
77
 
173
- // components/ServerRender/index.tsx
174
- init_react_import();
78
+ // ../tsup-config/react-import.js
79
+ var import_react = __toESM(require("react"));
175
80
 
176
81
  // lib/root-droppable-id.ts
177
- init_react_import();
178
82
  var rootAreaId = "root";
179
83
  var rootZone = "default-zone";
180
84
  var rootDroppableId = `${rootAreaId}:${rootZone}`;
181
85
 
182
86
  // lib/data/setup-zone.ts
183
- init_react_import();
184
87
  var setupZone = (data, zoneKey) => {
185
88
  if (zoneKey === rootDroppableId) {
186
89
  return data;
@@ -193,247 +96,555 @@ var setupZone = (data, zoneKey) => {
193
96
  };
194
97
 
195
98
  // lib/use-slots.tsx
196
- init_react_import();
197
99
  var import_react2 = require("react");
198
- function useSlots(config, props, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
199
- const slotProps = (0, import_react2.useMemo)(() => {
200
- if (!(config == null ? void 0 : config.fields)) return props;
201
- const slotProps2 = {};
202
- const fieldKeys = Object.keys(config.fields);
203
- for (let i = 0; i < fieldKeys.length; i++) {
204
- const fieldKey = fieldKeys[i];
205
- const field = config.fields[fieldKey];
206
- if ((field == null ? void 0 : field.type) === "slot") {
207
- const content = props[fieldKey] || [];
208
- const render = (readOnly == null ? void 0 : readOnly[fieldKey]) || forceReadOnly ? renderSlotRender : renderSlotEdit;
209
- const Slot = (dzProps) => render(__spreadProps(__spreadValues({
210
- allow: field.allow,
211
- disallow: field.disallow
212
- }, dzProps), {
213
- zone: fieldKey,
214
- content
215
- }));
216
- slotProps2[fieldKey] = Slot;
217
- }
218
- }
219
- return slotProps2;
220
- }, [config, readOnly, forceReadOnly]);
221
- return __spreadValues(__spreadValues({}, props), slotProps);
222
- }
223
100
 
224
- // components/SlotRender/index.tsx
225
- init_react_import();
226
- var import_react26 = require("react");
227
-
228
- // components/DropZone/index.tsx
229
- init_react_import();
230
- var import_react25 = require("react");
231
-
232
- // components/DraggableComponent/index.tsx
233
- init_react_import();
234
- var import_react13 = require("react");
235
-
236
- // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
237
- init_react_import();
238
- var styles_module_default = { "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" };
101
+ // lib/data/default-slots.ts
102
+ var defaultSlots = (value, fields) => Object.keys(fields).reduce(
103
+ (acc, fieldName) => fields[fieldName].type === "slot" ? __spreadValues({ [fieldName]: [] }, acc) : acc,
104
+ value
105
+ );
239
106
 
240
- // lib/get-class-name-factory.ts
241
- init_react_import();
242
- var import_classnames = __toESM(require_classnames());
243
- var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
244
- if (typeof options === "string") {
245
- const descendant = options;
246
- const style = styles[`${rootClass}-${descendant}`];
247
- if (style) {
248
- return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
107
+ // lib/data/map-slots.ts
108
+ var isPromise = (v) => !!v && typeof v.then === "function";
109
+ var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
110
+ var containsPromise = (arr) => arr.some(isPromise);
111
+ var walkField = ({
112
+ value,
113
+ fields,
114
+ map,
115
+ propKey = "",
116
+ propPath = "",
117
+ id = "",
118
+ config,
119
+ recurseSlots = false
120
+ }) => {
121
+ var _a, _b, _c;
122
+ if (((_a = fields[propKey]) == null ? void 0 : _a.type) === "slot") {
123
+ const content = value || [];
124
+ const mappedContent = recurseSlots ? content.map((el) => {
125
+ var _a2;
126
+ const componentConfig = config.components[el.type];
127
+ if (!componentConfig) {
128
+ throw new Error(`Could not find component config for ${el.type}`);
129
+ }
130
+ const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
131
+ return walkField({
132
+ value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
133
+ fields: fields2,
134
+ map,
135
+ id: el.props.id,
136
+ config,
137
+ recurseSlots
138
+ });
139
+ }) : content;
140
+ if (containsPromise(mappedContent)) {
141
+ return Promise.all(mappedContent);
142
+ }
143
+ return map(mappedContent, id, propPath, fields[propKey], propPath);
144
+ }
145
+ if (value && typeof value === "object") {
146
+ if (Array.isArray(value)) {
147
+ const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
148
+ if (!arrayFields) return value;
149
+ const newValue = value.map(
150
+ (el, idx) => walkField({
151
+ value: el,
152
+ fields: arrayFields,
153
+ map,
154
+ propKey,
155
+ propPath: `${propPath}[${idx}]`,
156
+ id,
157
+ config,
158
+ recurseSlots
159
+ })
160
+ );
161
+ if (containsPromise(newValue)) {
162
+ return Promise.all(newValue);
163
+ }
164
+ return newValue;
165
+ } else if ("$$typeof" in value) {
166
+ return value;
167
+ } else {
168
+ const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
169
+ return walkObject({
170
+ value,
171
+ fields: objectFields,
172
+ map,
173
+ id,
174
+ getPropPath: (k) => `${propPath}.${k}`,
175
+ config,
176
+ recurseSlots
177
+ });
249
178
  }
250
- return "";
251
- } else if (typeof options === "object") {
252
- const modifiers = options;
253
- const prefixedModifiers = {};
254
- for (let modifier in modifiers) {
255
- prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
179
+ }
180
+ return value;
181
+ };
182
+ var walkObject = ({
183
+ value,
184
+ fields,
185
+ map,
186
+ id,
187
+ getPropPath,
188
+ config,
189
+ recurseSlots
190
+ }) => {
191
+ const newProps = Object.entries(value).map(([k, v]) => {
192
+ const opts = {
193
+ value: v,
194
+ fields,
195
+ map,
196
+ propKey: k,
197
+ propPath: getPropPath(k),
198
+ id,
199
+ config,
200
+ recurseSlots
201
+ };
202
+ const newValue = walkField(opts);
203
+ if (isPromise(newValue)) {
204
+ return newValue.then((resolvedValue) => ({
205
+ [k]: resolvedValue
206
+ }));
256
207
  }
257
- const c = styles[rootClass];
258
- return config.baseClass + (0, import_classnames.default)(__spreadValues({
259
- [c]: !!c
260
- }, prefixedModifiers));
261
- } else {
262
- return config.baseClass + styles[rootClass] || "";
208
+ return {
209
+ [k]: newValue
210
+ };
211
+ }, {});
212
+ if (containsPromise(newProps)) {
213
+ return Promise.all(newProps).then(flatten);
263
214
  }
215
+ return flatten(newProps);
264
216
  };
265
- var get_class_name_factory_default = getClassNameFactory;
266
-
267
- // ../../node_modules/lucide-react/dist/esm/lucide-react.js
268
- init_react_import();
269
-
270
- // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
271
- init_react_import();
272
- var import_react4 = require("react");
217
+ function mapSlots(item, map, config, recurseSlots = false) {
218
+ var _a, _b, _c, _d, _e;
219
+ const itemType = "type" in item ? item.type : "root";
220
+ const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
221
+ const newProps = walkObject({
222
+ value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
223
+ fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
224
+ map,
225
+ id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
226
+ getPropPath: (k) => k,
227
+ config,
228
+ recurseSlots
229
+ });
230
+ if (isPromise(newProps)) {
231
+ return newProps.then((resolvedProps) => __spreadProps(__spreadValues({}, item), {
232
+ props: resolvedProps
233
+ }));
234
+ }
235
+ return __spreadProps(__spreadValues({}, item), {
236
+ props: newProps
237
+ });
238
+ }
273
239
 
274
- // ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
275
- init_react_import();
276
- var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
277
- var mergeClasses = (...classes) => classes.filter((className, index, array) => {
278
- return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
279
- }).join(" ").trim();
240
+ // lib/use-slots.tsx
241
+ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
242
+ const slotProps = (0, import_react2.useMemo)(() => {
243
+ const mapped = mapSlots(
244
+ item,
245
+ (content, _parentId, propName, field, propPath) => {
246
+ const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
247
+ const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
248
+ const render = isReadOnly ? renderSlotRender : renderSlotEdit;
249
+ const Slot = (dzProps) => render(__spreadProps(__spreadValues({
250
+ allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
251
+ disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
252
+ }, dzProps), {
253
+ zone: propName,
254
+ content
255
+ }));
256
+ return Slot;
257
+ },
258
+ config
259
+ ).props;
260
+ return mapped;
261
+ }, [config, item, readOnly, forceReadOnly]);
262
+ const mergedProps = (0, import_react2.useMemo)(
263
+ () => __spreadValues(__spreadValues({}, item.props), slotProps),
264
+ [item.props, slotProps]
265
+ );
266
+ return mergedProps;
267
+ }
280
268
 
281
- // ../../node_modules/lucide-react/dist/esm/Icon.js
282
- init_react_import();
269
+ // components/SlotRender/server.tsx
283
270
  var import_react3 = require("react");
284
-
285
- // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
286
- init_react_import();
287
- var defaultAttributes = {
288
- xmlns: "http://www.w3.org/2000/svg",
289
- width: 24,
290
- height: 24,
291
- viewBox: "0 0 24 24",
292
- fill: "none",
293
- stroke: "currentColor",
294
- strokeWidth: 2,
295
- strokeLinecap: "round",
296
- strokeLinejoin: "round"
271
+ var import_jsx_runtime = require("react/jsx-runtime");
272
+ var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRender, __spreadValues({}, props));
273
+ var Item = ({
274
+ config,
275
+ item,
276
+ metadata
277
+ }) => {
278
+ const Component = config.components[item.type];
279
+ const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
280
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
281
+ Component.render,
282
+ __spreadProps(__spreadValues({}, props), {
283
+ puck: __spreadProps(__spreadValues({}, props.puck), {
284
+ renderDropZone: DropZoneRender,
285
+ metadata: metadata || {}
286
+ })
287
+ })
288
+ );
297
289
  };
298
-
299
- // ../../node_modules/lucide-react/dist/esm/Icon.js
300
- var Icon = (0, import_react3.forwardRef)(
301
- (_a, ref) => {
302
- var _b = _a, {
303
- color = "currentColor",
304
- size = 24,
305
- strokeWidth = 2,
306
- absoluteStrokeWidth,
307
- className = "",
308
- children,
309
- iconNode
310
- } = _b, rest = __objRest(_b, [
311
- "color",
312
- "size",
313
- "strokeWidth",
314
- "absoluteStrokeWidth",
315
- "className",
316
- "children",
317
- "iconNode"
318
- ]);
319
- return (0, import_react3.createElement)(
320
- "svg",
321
- __spreadValues(__spreadProps(__spreadValues({
322
- ref
323
- }, defaultAttributes), {
324
- width: size,
325
- height: size,
326
- stroke: color,
327
- strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
328
- className: mergeClasses("lucide", className)
329
- }), rest),
330
- [
331
- ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
332
- ...Array.isArray(children) ? children : [children]
333
- ]
334
- );
290
+ var SlotRender = (0, import_react3.forwardRef)(
291
+ function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
292
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, ref, children: content.map((item) => {
293
+ if (!config.components[item.type]) {
294
+ return null;
295
+ }
296
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
297
+ Item,
298
+ {
299
+ config,
300
+ item,
301
+ metadata
302
+ },
303
+ item.props.id
304
+ );
305
+ }) });
335
306
  }
336
307
  );
337
308
 
338
- // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
339
- var createLucideIcon = (iconName, iconNode) => {
340
- const Component = (0, import_react4.forwardRef)(
341
- (_a, ref) => {
342
- var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
343
- return (0, import_react4.createElement)(Icon, __spreadValues({
344
- ref,
345
- iconNode,
346
- className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
347
- }, props));
309
+ // components/ServerRender/index.tsx
310
+ var import_jsx_runtime2 = require("react/jsx-runtime");
311
+ function DropZoneRender({
312
+ zone,
313
+ data,
314
+ areaId = "root",
315
+ config,
316
+ metadata = {}
317
+ }) {
318
+ let zoneCompound = rootDroppableId;
319
+ let content = (data == null ? void 0 : data.content) || [];
320
+ if (!data || !config) {
321
+ return null;
322
+ }
323
+ if (areaId !== rootAreaId && zone !== rootZone) {
324
+ zoneCompound = `${areaId}:${zone}`;
325
+ content = setupZone(data, zoneCompound).zones[zoneCompound];
326
+ }
327
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content.map((item) => {
328
+ const Component = config.components[item.type];
329
+ const props = __spreadProps(__spreadValues({}, item.props), {
330
+ puck: {
331
+ renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
332
+ DropZoneRender,
333
+ {
334
+ zone: zone2,
335
+ data,
336
+ areaId: item.props.id,
337
+ config,
338
+ metadata
339
+ }
340
+ ),
341
+ metadata,
342
+ dragRef: null,
343
+ isEditing: false
344
+ }
345
+ });
346
+ const renderItem = __spreadProps(__spreadValues({}, item), { props });
347
+ const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
348
+ if (Component) {
349
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
350
+ }
351
+ return null;
352
+ }) });
353
+ }
354
+ function Render({
355
+ config,
356
+ data,
357
+ metadata = {}
358
+ }) {
359
+ var _a;
360
+ const rootProps = "props" in data.root ? data.root.props : data.root;
361
+ const title = rootProps.title || "";
362
+ const props = __spreadProps(__spreadValues({}, rootProps), {
363
+ puck: {
364
+ renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
365
+ DropZoneRender,
366
+ {
367
+ zone,
368
+ data,
369
+ config,
370
+ metadata
371
+ }
372
+ ),
373
+ isEditing: false,
374
+ dragRef: null,
375
+ metadata
376
+ },
377
+ title,
378
+ editMode: false,
379
+ id: "puck-root"
380
+ });
381
+ const propsWithSlots = useSlots(config, { type: "root", props }, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
382
+ if ((_a = config.root) == null ? void 0 : _a.render) {
383
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
384
+ DropZoneRender,
385
+ {
386
+ config,
387
+ data,
388
+ zone: rootZone,
389
+ metadata
390
+ }
391
+ ) }));
392
+ }
393
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
394
+ DropZoneRender,
395
+ {
396
+ config,
397
+ data,
398
+ zone: rootZone,
399
+ metadata
348
400
  }
349
401
  );
350
- Component.displayName = `${iconName}`;
351
- return Component;
352
- };
353
-
354
- // ../../node_modules/lucide-react/dist/esm/icons/copy.js
355
- init_react_import();
356
- var Copy = createLucideIcon("Copy", [
357
- ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
358
- ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
359
- ]);
360
-
361
- // ../../node_modules/lucide-react/dist/esm/icons/corner-left-up.js
362
- init_react_import();
363
- var CornerLeftUp = createLucideIcon("CornerLeftUp", [
364
- ["polyline", { points: "14 9 9 4 4 9", key: "m9oyvo" }],
365
- ["path", { d: "M20 20h-7a4 4 0 0 1-4-4V4", key: "1blwi3" }]
366
- ]);
367
-
368
- // ../../node_modules/lucide-react/dist/esm/icons/trash.js
369
- init_react_import();
370
- var Trash = createLucideIcon("Trash", [
371
- ["path", { d: "M3 6h18", key: "d0wm0j" }],
372
- ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
373
- ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }]
374
- ]);
375
-
376
- // store/index.ts
377
- init_react_import();
378
-
379
- // reducer/index.ts
380
- init_react_import();
381
-
382
- // reducer/actions/set.ts
383
- init_react_import();
384
-
385
- // lib/data/walk-tree.ts
386
- init_react_import();
387
-
388
- // lib/data/for-each-slot.ts
389
- init_react_import();
402
+ }
390
403
 
391
- // lib/data/is-slot.ts
392
- init_react_import();
393
- var isSlot = (prop) => {
394
- var _a, _b;
395
- return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
396
- };
397
- var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
398
- var _a, _b;
399
- const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
400
- if (!configForComponent) return isSlot(propValue);
401
- return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
404
+ // lib/get-changed.ts
405
+ var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
406
+ var getChanged = (newItem, oldItem) => {
407
+ return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
408
+ const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
409
+ const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
410
+ return __spreadProps(__spreadValues({}, acc), {
411
+ [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
412
+ });
413
+ }, {}) : {};
402
414
  };
403
415
 
404
- // lib/data/for-each-slot.ts
405
- var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
406
- const props = item.props || {};
407
- const propKeys = Object.keys(props);
408
- for (let i = 0; i < propKeys.length; i++) {
409
- const propKey = propKeys[i];
410
- const itemType = "type" in item ? item.type : "root";
411
- if (isSlot2(itemType, propKey, props[propKey])) {
412
- const content = props[propKey];
413
- cb(props.id, propKey, content);
414
- if (recursive) {
415
- content.forEach(
416
+ // lib/resolve-component-data.ts
417
+ var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
418
+ var cache = { lastChange: {} };
419
+ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
420
+ const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
421
+ const resolvedItem = __spreadValues({}, item);
422
+ const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
423
+ const id = "id" in item.props ? item.props.id : "root";
424
+ if (shouldRunResolver) {
425
+ const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
426
+ if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
427
+ return { node: resolved, didChange: false };
428
+ }
429
+ const changed = getChanged(item, oldItem);
430
+ if (onResolveStart) {
431
+ onResolveStart(item);
432
+ }
433
+ const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
434
+ changed,
435
+ lastData: oldItem,
436
+ metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
437
+ trigger
438
+ });
439
+ resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
440
+ if (Object.keys(readOnly).length) {
441
+ resolvedItem.readOnly = readOnly;
442
+ }
443
+ }
444
+ let itemWithResolvedChildren = yield mapSlots(
445
+ resolvedItem,
446
+ (content) => __async(void 0, null, function* () {
447
+ return yield Promise.all(
448
+ content.map(
416
449
  (childItem) => __async(void 0, null, function* () {
417
- return forEachSlot(childItem, cb, true, isSlot2);
450
+ return (yield resolveComponentData(
451
+ childItem,
452
+ config,
453
+ metadata,
454
+ onResolveStart,
455
+ onResolveEnd,
456
+ trigger
457
+ )).node;
418
458
  })
419
- );
420
- }
421
- }
459
+ )
460
+ );
461
+ }),
462
+ config
463
+ );
464
+ if (shouldRunResolver && onResolveEnd) {
465
+ onResolveEnd(resolvedItem);
422
466
  }
423
- };
467
+ cache.lastChange[id] = {
468
+ item,
469
+ resolved: itemWithResolvedChildren
470
+ };
471
+ return {
472
+ node: itemWithResolvedChildren,
473
+ didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
474
+ };
475
+ });
424
476
 
425
- // lib/data/for-related-zones.ts
426
- init_react_import();
477
+ // lib/data/default-data.ts
478
+ var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
479
+ root: data.root || {},
480
+ content: data.content || []
481
+ });
427
482
 
428
- // lib/get-zone-id.ts
429
- init_react_import();
430
- var getZoneId = (zoneCompound) => {
431
- if (!zoneCompound) {
432
- return [];
433
- }
434
- if (zoneCompound && zoneCompound.indexOf(":") > -1) {
435
- return zoneCompound.split(":");
436
- }
483
+ // lib/data/to-component.ts
484
+ var toComponent = (item) => {
485
+ return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
486
+ props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
487
+ type: "root"
488
+ });
489
+ };
490
+
491
+ // lib/resolve-all-data.ts
492
+ function resolveAllData(_0, _1) {
493
+ return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
494
+ var _a;
495
+ const defaultedData = defaultData(data);
496
+ const resolveNode = (_node) => __async(this, null, function* () {
497
+ const node = toComponent(_node);
498
+ onResolveStart == null ? void 0 : onResolveStart(node);
499
+ const resolved = (yield resolveComponentData(
500
+ node,
501
+ config,
502
+ metadata,
503
+ () => {
504
+ },
505
+ () => {
506
+ },
507
+ "force"
508
+ )).node;
509
+ const resolvedDeep = yield mapSlots(
510
+ resolved,
511
+ processContent,
512
+ config
513
+ );
514
+ onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
515
+ return resolvedDeep;
516
+ });
517
+ const processContent = (content) => __async(this, null, function* () {
518
+ return Promise.all(content.map(resolveNode));
519
+ });
520
+ const processZones = () => __async(this, null, function* () {
521
+ var _a2;
522
+ const zones = (_a2 = data.zones) != null ? _a2 : {};
523
+ Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
524
+ zones[zoneKey] = yield Promise.all(content.map(resolveNode));
525
+ }));
526
+ return zones;
527
+ });
528
+ const dynamic = {
529
+ root: yield resolveNode(defaultedData.root),
530
+ content: yield processContent(defaultedData.content),
531
+ zones: yield processZones()
532
+ };
533
+ Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
534
+ const content = defaultedData.zones[zoneKey];
535
+ dynamic.zones[zoneKey] = yield processContent(content);
536
+ }), {});
537
+ return dynamic;
538
+ });
539
+ }
540
+
541
+ // lib/data/walk-tree.ts
542
+ function walkTree(data, config, callbackFn) {
543
+ var _a, _b;
544
+ const walkItem = (item) => {
545
+ return mapSlots(
546
+ item,
547
+ (content, parentId, propName) => {
548
+ var _a2;
549
+ return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
550
+ },
551
+ config,
552
+ true
553
+ );
554
+ };
555
+ if ("props" in data) {
556
+ return walkItem(data);
557
+ }
558
+ const _data = data;
559
+ const zones = (_a = _data.zones) != null ? _a : {};
560
+ const mappedContent = _data.content.map(walkItem);
561
+ return {
562
+ root: walkItem(_data.root),
563
+ content: (_b = callbackFn(mappedContent, {
564
+ parentId: "root",
565
+ propName: "default-zone"
566
+ })) != null ? _b : mappedContent,
567
+ zones: Object.keys(zones).reduce(
568
+ (acc, zoneCompound) => __spreadProps(__spreadValues({}, acc), {
569
+ [zoneCompound]: zones[zoneCompound].map(walkItem)
570
+ }),
571
+ {}
572
+ )
573
+ };
574
+ }
575
+
576
+ // lib/transform-props.ts
577
+ function transformProps(data, propTransforms, config = { components: {} }) {
578
+ const mapItem = (item) => {
579
+ if (propTransforms[item.type]) {
580
+ return __spreadProps(__spreadValues({}, item), {
581
+ props: __spreadValues({
582
+ id: item.props.id
583
+ }, propTransforms[item.type](item.props))
584
+ });
585
+ }
586
+ return item;
587
+ };
588
+ const defaultedData = defaultData(data);
589
+ const rootProps = defaultedData.root.props || defaultedData.root;
590
+ let newRoot = __spreadValues({}, defaultedData.root);
591
+ if (propTransforms["root"]) {
592
+ newRoot.props = propTransforms["root"](rootProps);
593
+ }
594
+ const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
595
+ const updatedData = walkTree(
596
+ dataWithUpdatedRoot,
597
+ config,
598
+ (content) => content.map(mapItem)
599
+ );
600
+ if (!defaultedData.root.props) {
601
+ updatedData.root = updatedData.root.props;
602
+ }
603
+ return updatedData;
604
+ }
605
+
606
+ // components/ViewportControls/default-viewports.ts
607
+ var defaultViewports = [
608
+ { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
609
+ { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
610
+ { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
611
+ ];
612
+
613
+ // store/default-app-state.ts
614
+ var defaultAppState = {
615
+ data: { content: [], root: {}, zones: {} },
616
+ ui: {
617
+ leftSideBarVisible: true,
618
+ rightSideBarVisible: true,
619
+ arrayState: {},
620
+ itemSelector: null,
621
+ componentList: {},
622
+ isDragging: false,
623
+ previewMode: "edit",
624
+ viewports: {
625
+ current: {
626
+ width: defaultViewports[0].width,
627
+ height: defaultViewports[0].height || "auto"
628
+ },
629
+ options: [],
630
+ controlsVisible: true
631
+ },
632
+ field: { focus: null }
633
+ },
634
+ indexes: {
635
+ nodes: {},
636
+ zones: {}
637
+ }
638
+ };
639
+
640
+ // lib/get-zone-id.ts
641
+ var getZoneId = (zoneCompound) => {
642
+ if (!zoneCompound) {
643
+ return [];
644
+ }
645
+ if (zoneCompound && zoneCompound.indexOf(":") > -1) {
646
+ return zoneCompound.split(":");
647
+ }
437
648
  return [rootDroppableId, zoneCompound];
438
649
  };
439
650
 
@@ -447,24 +658,23 @@ function forRelatedZones(item, data, cb, path = []) {
447
658
  });
448
659
  }
449
660
 
661
+ // lib/data/flatten-node.ts
662
+ var import_flat = require("flat");
663
+
450
664
  // lib/data/strip-slots.ts
451
- init_react_import();
452
- var stripSlots = (data) => {
453
- return __spreadProps(__spreadValues({}, data), {
454
- props: Object.entries(data.props).reduce(
455
- (acc, [propKey, propVal]) => {
456
- if (isSlot(propVal)) {
457
- return acc;
458
- }
459
- return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
460
- },
461
- { id: data.props.id }
462
- )
665
+ var stripSlots = (data, config) => {
666
+ return mapSlots(data, () => null, config);
667
+ };
668
+
669
+ // lib/data/flatten-node.ts
670
+ var flattenNode = (node, config) => {
671
+ return __spreadProps(__spreadValues({}, node), {
672
+ props: (0, import_flat.flatten)(stripSlots(node, config).props)
463
673
  });
464
674
  };
465
675
 
466
- // lib/data/walk-tree.ts
467
- function walkTree(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
676
+ // lib/data/walk-app-state.ts
677
+ function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
468
678
  var _a;
469
679
  let newZones = {};
470
680
  const newZoneIndex = {};
@@ -505,10 +715,9 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
505
715
  const mappedItem = mapNodeOrSkip(item, path, index);
506
716
  if (!mappedItem) return item;
507
717
  const id = mappedItem.props.id;
508
- const newProps = __spreadValues({}, mappedItem.props);
509
- forEachSlot(
718
+ const newProps = __spreadProps(__spreadValues({}, mapSlots(
510
719
  mappedItem,
511
- (parentId2, slotId, content) => {
720
+ (content, parentId2, slotId) => {
512
721
  const zoneCompound = `${parentId2}:${slotId}`;
513
722
  const [_2, newContent2] = processContent(
514
723
  path,
@@ -517,18 +726,19 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
517
726
  "slot",
518
727
  parentId2
519
728
  );
520
- newProps[slotId] = newContent2;
729
+ return newContent2;
521
730
  },
522
- false,
523
- createIsSlotConfig(config)
524
- );
731
+ config
732
+ ).props), {
733
+ id
734
+ });
525
735
  processRelatedZones(item, id, path);
526
736
  const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
527
737
  const thisZoneCompound = path[path.length - 1];
528
738
  const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
529
739
  newNodeIndex[id] = {
530
740
  data: newItem,
531
- flatData: stripSlots(newItem),
741
+ flatData: flattenNode(newItem, config),
532
742
  path,
533
743
  parentId,
534
744
  zone
@@ -587,3442 +797,89 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
587
797
  });
588
798
  }
589
799
 
590
- // reducer/actions/set.ts
591
- var setAction = (state, action, appStore) => {
592
- if (typeof action.state === "object") {
593
- const newState = __spreadValues(__spreadValues({}, state), action.state);
594
- if (action.state.indexes) {
595
- return newState;
800
+ // lib/migrate.ts
801
+ var migrations = [
802
+ // Migrate root to root.props
803
+ (data) => {
804
+ const rootProps = data.root.props || data.root;
805
+ if (Object.keys(data.root).length > 0 && !data.root.props) {
806
+ console.warn(
807
+ "Migration applied: Root props moved from `root` to `root.props`."
808
+ );
809
+ return __spreadProps(__spreadValues({}, data), {
810
+ root: {
811
+ props: __spreadValues({}, rootProps)
812
+ }
813
+ });
596
814
  }
597
- console.warn(
598
- "`set` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
599
- );
600
- return walkTree(newState, appStore.config);
601
- }
602
- return __spreadValues(__spreadValues({}, state), action.state(state));
603
- };
604
-
605
- // reducer/actions/insert.ts
606
- init_react_import();
607
-
608
- // lib/data/insert.ts
609
- init_react_import();
610
- var insert = (list, index, item) => {
611
- const result = Array.from(list || []);
612
- result.splice(index, 0, item);
613
- return result;
614
- };
615
-
616
- // lib/generate-id.ts
617
- init_react_import();
618
- var import_uuid = require("uuid");
619
- var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, import_uuid.v4)();
620
-
621
- // lib/data/get-ids-for-parent.ts
622
- init_react_import();
623
- var getIdsForParent = (zoneCompound, state) => {
624
- const [parentId] = zoneCompound.split(":");
625
- const node = state.indexes.nodes[parentId];
626
- return ((node == null ? void 0 : node.path) || []).map((p) => p.split(":")[0]);
627
- };
628
-
629
- // reducer/actions/insert.ts
630
- function insertAction(state, action, appStore) {
631
- const id = action.id || generateId(action.componentType);
632
- const emptyComponentData = {
633
- type: action.componentType,
634
- props: __spreadProps(__spreadValues({}, appStore.config.components[action.componentType].defaultProps || {}), {
635
- id
636
- })
637
- };
638
- const [parentId] = action.destinationZone.split(":");
639
- const idsInPath = getIdsForParent(action.destinationZone, state);
640
- return walkTree(
641
- state,
642
- appStore.config,
643
- (content, zoneCompound) => {
644
- if (zoneCompound === action.destinationZone) {
645
- return insert(
646
- content || [],
647
- action.destinationIndex,
648
- emptyComponentData
649
- );
815
+ return data;
816
+ },
817
+ // Migrate zones to slots
818
+ (data, config) => {
819
+ var _a;
820
+ if (!config) return data;
821
+ console.log("Migrating DropZones to slots...");
822
+ const updatedItems = {};
823
+ const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
824
+ const { indexes } = walkAppState(appState, config);
825
+ const deletedCompounds = [];
826
+ walkAppState(appState, config, (content, zoneCompound, zoneType) => {
827
+ var _a2, _b;
828
+ if (zoneType === "dropzone") {
829
+ const [id, slotName] = zoneCompound.split(":");
830
+ const nodeData = indexes.nodes[id].data;
831
+ const componentType = nodeData.type;
832
+ const configForComponent = id === "root" ? config.root : config.components[componentType];
833
+ if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
834
+ updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
835
+ props: __spreadProps(__spreadValues({}, nodeData.props), {
836
+ [slotName]: content
837
+ })
838
+ });
839
+ deletedCompounds.push(zoneCompound);
840
+ }
841
+ return content;
650
842
  }
651
843
  return content;
652
- },
653
- (childItem, path) => {
654
- if (childItem.props.id === id || childItem.props.id === parentId) {
655
- return childItem;
656
- } else if (idsInPath.includes(childItem.props.id)) {
657
- return childItem;
658
- } else if (path.includes(action.destinationZone)) {
659
- return childItem;
844
+ });
845
+ const updated = walkAppState(
846
+ appState,
847
+ config,
848
+ (content) => content,
849
+ (item) => {
850
+ var _a2;
851
+ return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
660
852
  }
661
- return null;
662
- }
663
- );
664
- }
665
-
666
- // reducer/actions/replace.ts
667
- init_react_import();
668
- var replaceAction = (state, action, appStore) => {
669
- const [parentId] = action.destinationZone.split(":");
670
- const idsInPath = getIdsForParent(action.destinationZone, state);
671
- const originalId = state.indexes.zones[action.destinationZone].contentIds[action.destinationIndex];
672
- const idChanged = originalId !== action.data.props.id;
673
- if (idChanged) {
674
- throw new Error(
675
- `Can't change the id during a replace action. Please us "remove" and "insert" to define a new node.`
676
853
  );
677
- }
678
- return walkTree(
679
- state,
680
- appStore.config,
681
- (content, zoneCompound) => {
682
- const newContent = [...content];
683
- if (zoneCompound === action.destinationZone) {
684
- newContent[action.destinationIndex] = action.data;
685
- }
686
- return newContent;
687
- },
688
- (childItem, path) => {
689
- const pathIds = path.map((p) => p.split(":")[0]);
690
- if (childItem.props.id === action.data.props.id) {
691
- return action.data;
692
- } else if (childItem.props.id === parentId) {
693
- return childItem;
694
- } else if (idsInPath.indexOf(childItem.props.id) > -1) {
695
- return childItem;
696
- } else if (pathIds.indexOf(action.data.props.id) > -1) {
697
- return childItem;
698
- }
699
- return null;
700
- }
701
- );
702
- };
703
-
704
- // reducer/actions/replace-root.ts
705
- init_react_import();
706
- var replaceRootAction = (state, action, appStore) => {
707
- return walkTree(
708
- state,
709
- appStore.config,
710
- (content) => content,
711
- (childItem) => {
712
- if (childItem.props.id === "root") {
713
- return __spreadProps(__spreadValues({}, childItem), {
714
- props: __spreadValues(__spreadValues({}, childItem.props), action.root.props),
715
- readOnly: action.root.readOnly
716
- });
717
- }
718
- return childItem;
719
- }
720
- );
721
- };
722
-
723
- // reducer/actions/duplicate.ts
724
- init_react_import();
725
-
726
- // lib/data/get-item.ts
727
- init_react_import();
728
- function getItem(selector, state) {
729
- var _a, _b;
730
- const zone = (_a = state.indexes.zones) == null ? void 0 : _a[selector.zone || rootDroppableId];
731
- return zone ? (_b = state.indexes.nodes[zone.contentIds[selector.index]]) == null ? void 0 : _b.data : void 0;
732
- }
733
-
734
- // reducer/actions/duplicate.ts
735
- function duplicateAction(state, action, appStore) {
736
- const item = getItem(
737
- { index: action.sourceIndex, zone: action.sourceZone },
738
- state
739
- );
740
- const idsInPath = getIdsForParent(action.sourceZone, state);
741
- const newItem = __spreadProps(__spreadValues({}, item), {
742
- props: __spreadProps(__spreadValues({}, item.props), {
743
- id: generateId(item.type)
744
- })
745
- });
746
- const modified = walkTree(
747
- state,
748
- appStore.config,
749
- (content, zoneCompound) => {
750
- if (zoneCompound === action.sourceZone) {
751
- return insert(content, action.sourceIndex + 1, item);
752
- }
753
- return content;
754
- },
755
- (childItem, path, index) => {
756
- const zoneCompound = path[path.length - 1];
757
- const parents = path.map((p) => p.split(":")[0]);
758
- if (parents.indexOf(newItem.props.id) > -1) {
759
- return __spreadProps(__spreadValues({}, childItem), {
760
- props: __spreadProps(__spreadValues({}, childItem.props), {
761
- id: generateId(childItem.type)
762
- })
763
- });
764
- }
765
- if (zoneCompound === action.sourceZone && index === action.sourceIndex + 1) {
766
- return newItem;
767
- }
768
- const [sourceZoneParent] = action.sourceZone.split(":");
769
- if (sourceZoneParent === childItem.props.id || idsInPath.indexOf(childItem.props.id) > -1) {
770
- return childItem;
771
- }
772
- return null;
773
- }
774
- );
775
- return __spreadProps(__spreadValues({}, modified), {
776
- ui: __spreadProps(__spreadValues({}, modified.ui), {
777
- itemSelector: {
778
- index: action.sourceIndex + 1,
779
- zone: action.sourceZone
780
- }
781
- })
782
- });
783
- }
784
-
785
- // reducer/actions/reorder.ts
786
- init_react_import();
787
-
788
- // reducer/actions/move.ts
789
- init_react_import();
790
-
791
- // lib/data/remove.ts
792
- init_react_import();
793
- var remove = (list, index) => {
794
- const result = Array.from(list);
795
- result.splice(index, 1);
796
- return result;
797
- };
798
-
799
- // reducer/actions/move.ts
800
- var moveAction = (state, action, appStore) => {
801
- if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
802
- return state;
803
- }
804
- const item = getItem(
805
- { zone: action.sourceZone, index: action.sourceIndex },
806
- state
807
- );
808
- if (!item) return state;
809
- const idsInSourcePath = getIdsForParent(action.sourceZone, state);
810
- const idsInDestinationPath = getIdsForParent(action.destinationZone, state);
811
- return walkTree(
812
- state,
813
- appStore.config,
814
- (content, zoneCompound) => {
815
- if (zoneCompound === action.sourceZone && zoneCompound === action.destinationZone) {
816
- return insert(
817
- remove(content, action.sourceIndex),
818
- action.destinationIndex,
819
- item
820
- );
821
- } else if (zoneCompound === action.sourceZone) {
822
- return remove(content, action.sourceIndex);
823
- } else if (zoneCompound === action.destinationZone) {
824
- return insert(content, action.destinationIndex, item);
825
- }
826
- return content;
827
- },
828
- (childItem, path) => {
829
- const [sourceZoneParent] = action.sourceZone.split(":");
830
- const [destinationZoneParent] = action.destinationZone.split(":");
831
- const childId = childItem.props.id;
832
- if (sourceZoneParent === childId || destinationZoneParent === childId || item.props.id === childId || idsInSourcePath.indexOf(childId) > -1 || idsInDestinationPath.indexOf(childId) > -1 || path.includes(action.destinationZone)) {
833
- return childItem;
834
- }
835
- return null;
836
- }
837
- );
838
- };
839
-
840
- // reducer/actions/reorder.ts
841
- var reorderAction = (state, action, appStore) => {
842
- return moveAction(
843
- state,
844
- {
845
- type: "move",
846
- sourceIndex: action.sourceIndex,
847
- sourceZone: action.destinationZone,
848
- destinationIndex: action.destinationIndex,
849
- destinationZone: action.destinationZone
850
- },
851
- appStore
852
- );
853
- };
854
-
855
- // reducer/actions/remove.ts
856
- init_react_import();
857
- var removeAction = (state, action, appStore) => {
858
- const item = getItem({ index: action.index, zone: action.zone }, state);
859
- const nodesToDelete = Object.entries(state.indexes.nodes).reduce(
860
- (acc, [nodeId, nodeData]) => {
861
- const pathIds = nodeData.path.map((p) => p.split(":")[0]);
862
- if (pathIds.includes(item.props.id)) {
863
- return [...acc, nodeId];
864
- }
865
- return acc;
866
- },
867
- [item.props.id]
868
- );
869
- const newState = walkTree(
870
- state,
871
- appStore.config,
872
- (content, zoneCompound) => {
873
- if (zoneCompound === action.zone) {
874
- return remove(content, action.index);
875
- }
876
- return content;
877
- }
878
- );
879
- Object.keys(newState.data.zones || {}).forEach((zoneCompound) => {
880
- const parentId = zoneCompound.split(":")[0];
881
- if (nodesToDelete.includes(parentId) && newState.data.zones) {
882
- delete newState.data.zones[zoneCompound];
883
- }
884
- });
885
- Object.keys(newState.indexes.zones).forEach((zoneCompound) => {
886
- const parentId = zoneCompound.split(":")[0];
887
- if (nodesToDelete.includes(parentId)) {
888
- delete newState.indexes.zones[zoneCompound];
889
- }
890
- });
891
- nodesToDelete.forEach((id) => {
892
- delete newState.indexes.nodes[id];
893
- });
894
- return newState;
895
- };
896
-
897
- // reducer/actions/register-zone.ts
898
- init_react_import();
899
- var zoneCache = {};
900
- function registerZoneAction(state, action) {
901
- if (zoneCache[action.zone]) {
902
- return __spreadProps(__spreadValues({}, state), {
903
- data: __spreadProps(__spreadValues({}, state.data), {
904
- zones: __spreadProps(__spreadValues({}, state.data.zones), {
905
- [action.zone]: zoneCache[action.zone]
906
- })
907
- }),
908
- indexes: __spreadProps(__spreadValues({}, state.indexes), {
909
- zones: __spreadProps(__spreadValues({}, state.indexes.zones), {
910
- [action.zone]: __spreadProps(__spreadValues({}, state.indexes.zones[action.zone]), {
911
- contentIds: zoneCache[action.zone].map((item) => item.props.id),
912
- type: "dropzone"
913
- })
914
- })
915
- })
854
+ deletedCompounds.forEach((zoneCompound) => {
855
+ var _a2;
856
+ const [_, propName] = zoneCompound.split(":");
857
+ console.log(
858
+ `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
859
+ );
860
+ (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
916
861
  });
862
+ Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
863
+ const [_, propName] = zoneCompound.split(":");
864
+ throw new Error(
865
+ `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
866
+ );
867
+ });
868
+ delete updated.data.zones;
869
+ return updated.data;
917
870
  }
918
- return __spreadProps(__spreadValues({}, state), { data: setupZone(state.data, action.zone) });
919
- }
920
- function unregisterZoneAction(state, action) {
921
- const _zones = __spreadValues({}, state.data.zones || {});
922
- const zoneIndex = __spreadValues({}, state.indexes.zones || {});
923
- if (_zones[action.zone]) {
924
- zoneCache[action.zone] = _zones[action.zone];
925
- delete _zones[action.zone];
926
- }
927
- delete zoneIndex[action.zone];
928
- return __spreadProps(__spreadValues({}, state), {
929
- data: __spreadProps(__spreadValues({}, state.data), {
930
- zones: _zones
931
- }),
932
- indexes: __spreadProps(__spreadValues({}, state.indexes), {
933
- zones: zoneIndex
934
- })
935
- });
936
- }
937
-
938
- // reducer/actions/set-data.ts
939
- init_react_import();
940
- var setDataAction = (state, action, appStore) => {
941
- if (typeof action.data === "object") {
942
- console.warn(
943
- "`setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
944
- );
945
- return walkTree(
946
- __spreadProps(__spreadValues({}, state), {
947
- data: __spreadValues(__spreadValues({}, state.data), action.data)
948
- }),
949
- appStore.config
950
- );
951
- }
952
- return walkTree(
953
- __spreadProps(__spreadValues({}, state), {
954
- data: __spreadValues(__spreadValues({}, state.data), action.data(state.data))
955
- }),
956
- appStore.config
957
- );
958
- };
959
-
960
- // reducer/actions/set-ui.ts
961
- init_react_import();
962
- var setUiAction = (state, action) => {
963
- if (typeof action.ui === "object") {
964
- return __spreadProps(__spreadValues({}, state), {
965
- ui: __spreadValues(__spreadValues({}, state.ui), action.ui)
966
- });
967
- }
968
- return __spreadProps(__spreadValues({}, state), {
969
- ui: __spreadValues(__spreadValues({}, state.ui), action.ui(state.ui))
970
- });
971
- };
972
-
973
- // lib/data/make-state-public.ts
974
- init_react_import();
975
- var makeStatePublic = (state) => {
976
- const { data, ui } = state;
977
- return { data, ui };
978
- };
979
-
980
- // reducer/actions.tsx
981
- init_react_import();
982
-
983
- // reducer/index.ts
984
- function storeInterceptor(reducer, record, onAction) {
985
- return (state, action) => {
986
- const newAppState = reducer(state, action);
987
- const isValidType = ![
988
- "registerZone",
989
- "unregisterZone",
990
- "setData",
991
- "setUi",
992
- "set"
993
- ].includes(action.type);
994
- if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
995
- if (record) record(newAppState);
996
- }
997
- onAction == null ? void 0 : onAction(action, makeStatePublic(newAppState), makeStatePublic(state));
998
- return newAppState;
999
- };
1000
- }
1001
- function createReducer({
1002
- record,
1003
- onAction,
1004
- appStore
1005
- }) {
1006
- return storeInterceptor(
1007
- (state, action) => {
1008
- if (action.type === "set") {
1009
- return setAction(state, action, appStore);
1010
- }
1011
- if (action.type === "insert") {
1012
- return insertAction(state, action, appStore);
1013
- }
1014
- if (action.type === "replace") {
1015
- return replaceAction(state, action, appStore);
1016
- }
1017
- if (action.type === "replaceRoot") {
1018
- return replaceRootAction(state, action, appStore);
1019
- }
1020
- if (action.type === "duplicate") {
1021
- return duplicateAction(state, action, appStore);
1022
- }
1023
- if (action.type === "reorder") {
1024
- return reorderAction(state, action, appStore);
1025
- }
1026
- if (action.type === "move") {
1027
- return moveAction(state, action, appStore);
1028
- }
1029
- if (action.type === "remove") {
1030
- return removeAction(state, action, appStore);
1031
- }
1032
- if (action.type === "registerZone") {
1033
- return registerZoneAction(state, action);
1034
- }
1035
- if (action.type === "unregisterZone") {
1036
- return unregisterZoneAction(state, action);
1037
- }
1038
- if (action.type === "setData") {
1039
- return setDataAction(state, action, appStore);
1040
- }
1041
- if (action.type === "setUi") {
1042
- return setUiAction(state, action);
1043
- }
1044
- return state;
1045
- },
1046
- record,
1047
- onAction
1048
- );
1049
- }
1050
-
1051
- // components/ViewportControls/default-viewports.ts
1052
- init_react_import();
1053
- var defaultViewports = [
1054
- { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1055
- { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1056
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1057
- ];
1058
-
1059
- // store/index.ts
1060
- var import_zustand2 = require("zustand");
1061
- var import_middleware2 = require("zustand/middleware");
1062
- var import_react9 = require("react");
1063
-
1064
- // store/slices/history.ts
1065
- init_react_import();
1066
- var import_react6 = require("react");
1067
-
1068
- // lib/use-hotkey.ts
1069
- init_react_import();
1070
- var import_react5 = require("react");
1071
- var import_zustand = require("zustand");
1072
- var import_middleware = require("zustand/middleware");
1073
- var useHotkeyStore = (0, import_zustand.create)()(
1074
- (0, import_middleware.subscribeWithSelector)((set) => ({
1075
- held: {},
1076
- hold: (key) => set((s) => s.held[key] ? s : { held: __spreadProps(__spreadValues({}, s.held), { [key]: true }) }),
1077
- release: (key) => set((s) => s.held[key] ? { held: __spreadProps(__spreadValues({}, s.held), { [key]: false }) } : s),
1078
- reset: (held = {}) => set(() => ({ held })),
1079
- triggers: {}
1080
- }))
1081
- );
1082
-
1083
- // store/slices/history.ts
1084
- var EMPTY_HISTORY_INDEX = 0;
1085
- function debounce(func, timeout2 = 300) {
1086
- let timer;
1087
- return (...args) => {
1088
- clearTimeout(timer);
1089
- timer = setTimeout(() => {
1090
- func(...args);
1091
- }, timeout2);
1092
- };
1093
- }
1094
- var tidyState = (state) => {
1095
- return __spreadProps(__spreadValues({}, state), {
1096
- ui: __spreadProps(__spreadValues({}, state.ui), {
1097
- field: {
1098
- focus: null
1099
- }
1100
- })
1101
- });
1102
- };
1103
- var createHistorySlice = (set, get) => {
1104
- const record = debounce((state) => {
1105
- const { histories, index } = get().history;
1106
- const history = {
1107
- state,
1108
- id: generateId("history")
1109
- };
1110
- const newHistories = [...histories.slice(0, index + 1), history];
1111
- set({
1112
- history: __spreadProps(__spreadValues({}, get().history), {
1113
- histories: newHistories,
1114
- index: newHistories.length - 1
1115
- })
1116
- });
1117
- }, 250);
1118
- return {
1119
- initialAppState: {},
1120
- index: EMPTY_HISTORY_INDEX,
1121
- histories: [],
1122
- hasPast: () => get().history.index > EMPTY_HISTORY_INDEX,
1123
- hasFuture: () => get().history.index < get().history.histories.length - 1,
1124
- prevHistory: () => {
1125
- const { history } = get();
1126
- return history.hasPast() ? history.histories[history.index - 1] : null;
1127
- },
1128
- nextHistory: () => {
1129
- const s = get().history;
1130
- return s.hasFuture() ? s.histories[s.index + 1] : null;
1131
- },
1132
- currentHistory: () => get().history.histories[get().history.index],
1133
- back: () => {
1134
- var _a;
1135
- const { history, dispatch } = get();
1136
- if (history.hasPast()) {
1137
- const state = tidyState(
1138
- ((_a = history.prevHistory()) == null ? void 0 : _a.state) || history.initialAppState
1139
- );
1140
- dispatch({
1141
- type: "set",
1142
- state
1143
- });
1144
- set({ history: __spreadProps(__spreadValues({}, history), { index: history.index - 1 }) });
1145
- }
1146
- },
1147
- forward: () => {
1148
- var _a;
1149
- const { history, dispatch } = get();
1150
- if (history.hasFuture()) {
1151
- const state = (_a = history.nextHistory()) == null ? void 0 : _a.state;
1152
- dispatch({ type: "set", state: state ? tidyState(state) : {} });
1153
- set({ history: __spreadProps(__spreadValues({}, history), { index: history.index + 1 }) });
1154
- }
1155
- },
1156
- setHistories: (histories) => {
1157
- var _a;
1158
- const { dispatch, history } = get();
1159
- dispatch({
1160
- type: "set",
1161
- state: ((_a = history.histories[history.histories.length - 1]) == null ? void 0 : _a.state) || history.initialAppState
1162
- });
1163
- set({ history: __spreadProps(__spreadValues({}, history), { histories, index: histories.length - 1 }) });
1164
- },
1165
- setHistoryIndex: (index) => {
1166
- var _a;
1167
- const { dispatch, history } = get();
1168
- dispatch({
1169
- type: "set",
1170
- state: ((_a = history.histories[index]) == null ? void 0 : _a.state) || history.initialAppState
1171
- });
1172
- set({ history: __spreadProps(__spreadValues({}, history), { index }) });
1173
- },
1174
- record
1175
- };
1176
- };
1177
-
1178
- // store/slices/nodes.ts
1179
- init_react_import();
1180
- var createNodesSlice = (set, get) => ({
1181
- nodes: {},
1182
- registerNode: (id, node) => {
1183
- const s = get().nodes;
1184
- const emptyNode = {
1185
- id,
1186
- methods: { sync: () => null },
1187
- element: null
1188
- };
1189
- const existingNode = s.nodes[id];
1190
- set({
1191
- nodes: __spreadProps(__spreadValues({}, s), {
1192
- nodes: __spreadProps(__spreadValues({}, s.nodes), {
1193
- [id]: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, emptyNode), existingNode), node), {
1194
- id
1195
- })
1196
- })
1197
- })
1198
- });
1199
- },
1200
- unregisterNode: (id) => {
1201
- const s = get().nodes;
1202
- const existingNode = s.nodes[id];
1203
- if (existingNode) {
1204
- const newNodes = __spreadValues({}, s.nodes);
1205
- delete newNodes[id];
1206
- set({
1207
- nodes: __spreadProps(__spreadValues({}, s), {
1208
- nodes: newNodes
1209
- })
1210
- });
1211
- }
1212
- }
1213
- });
1214
-
1215
- // store/slices/permissions.ts
1216
- init_react_import();
1217
- var import_react7 = require("react");
1218
-
1219
- // lib/data/flatten-data.ts
1220
- init_react_import();
1221
- var flattenData = (state, config) => {
1222
- const data = [];
1223
- walkTree(
1224
- state,
1225
- config,
1226
- (content) => content,
1227
- (item) => {
1228
- data.push(item);
1229
- return null;
1230
- }
1231
- );
1232
- return data;
1233
- };
1234
-
1235
- // lib/get-changed.ts
1236
- init_react_import();
1237
- var getChanged = (newItem, oldItem) => {
1238
- return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
1239
- const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
1240
- const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
1241
- return __spreadProps(__spreadValues({}, acc), {
1242
- [item]: oldItemProps[item] !== newItemProps[item]
1243
- });
1244
- }, {}) : {};
1245
- };
1246
-
1247
- // store/slices/permissions.ts
1248
- var createPermissionsSlice = (set, get) => {
1249
- const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
1250
- const { state, permissions, config } = get();
1251
- const { cache: cache2, globalPermissions } = permissions;
1252
- const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
1253
- var _a, _b, _c;
1254
- const { config: config2, state: appState, setComponentLoading } = get();
1255
- const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
1256
- if (!componentConfig) {
1257
- return;
1258
- }
1259
- const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
1260
- if (componentConfig.resolvePermissions) {
1261
- const changed = getChanged(item2, (_a = cache2[item2.props.id]) == null ? void 0 : _a.lastData);
1262
- if (Object.values(changed).some((el) => el === true) || force2) {
1263
- const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
1264
- const resolvedPermissions = yield componentConfig.resolvePermissions(
1265
- item2,
1266
- {
1267
- changed,
1268
- lastPermissions: ((_b = cache2[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
1269
- permissions: initialPermissions,
1270
- appState: makeStatePublic(appState),
1271
- lastData: ((_c = cache2[item2.props.id]) == null ? void 0 : _c.lastData) || null
1272
- }
1273
- );
1274
- const latest = get().permissions;
1275
- set({
1276
- permissions: __spreadProps(__spreadValues({}, latest), {
1277
- cache: __spreadProps(__spreadValues({}, latest.cache), {
1278
- [item2.props.id]: {
1279
- lastData: item2,
1280
- lastPermissions: resolvedPermissions
1281
- }
1282
- }),
1283
- resolvedPermissions: __spreadProps(__spreadValues({}, latest.resolvedPermissions), {
1284
- [item2.props.id]: resolvedPermissions
1285
- })
1286
- })
1287
- });
1288
- clearTimeout2();
1289
- }
1290
- }
1291
- });
1292
- const resolveDataForRoot = (force2 = false) => {
1293
- const { state: appState } = get();
1294
- resolveDataForItem(
1295
- // Shim the root data in by conforming to component data shape
1296
- {
1297
- type: "root",
1298
- props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "root" })
1299
- },
1300
- force2
1301
- );
1302
- };
1303
- const { item, type, root } = params;
1304
- if (item) {
1305
- yield resolveDataForItem(item, force);
1306
- } else if (type) {
1307
- flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
1308
- yield resolveDataForItem(item2, force);
1309
- }));
1310
- } else if (root) {
1311
- resolveDataForRoot(force);
1312
- } else {
1313
- flattenData(state, config).map((item2) => __async(void 0, null, function* () {
1314
- yield resolveDataForItem(item2, force);
1315
- }));
1316
- }
1317
- });
1318
- const refreshPermissions = (params) => resolvePermissions(params, true);
1319
- return {
1320
- cache: {},
1321
- globalPermissions: {
1322
- drag: true,
1323
- edit: true,
1324
- delete: true,
1325
- duplicate: true,
1326
- insert: true
1327
- },
1328
- resolvedPermissions: {},
1329
- getPermissions: ({ item, type, root } = {}) => {
1330
- const { config, permissions } = get();
1331
- const { globalPermissions, resolvedPermissions } = permissions;
1332
- if (item) {
1333
- const componentConfig = config.components[item.type];
1334
- const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
1335
- const resolvedForItem = resolvedPermissions[item.props.id];
1336
- return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
1337
- } else if (type) {
1338
- const componentConfig = config.components[type];
1339
- return __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
1340
- } else if (root) {
1341
- const rootConfig = config.root;
1342
- const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), rootConfig == null ? void 0 : rootConfig.permissions);
1343
- const resolvedForItem = resolvedPermissions["root"];
1344
- return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
1345
- }
1346
- return globalPermissions;
1347
- },
1348
- resolvePermissions,
1349
- refreshPermissions
1350
- };
1351
- };
1352
-
1353
- // store/slices/fields.ts
1354
- init_react_import();
1355
- var import_react8 = require("react");
1356
- var createFieldsSlice = (_set, _get) => {
1357
- return {
1358
- fields: {},
1359
- loading: false,
1360
- lastResolvedData: {}
1361
- };
1362
- };
1363
-
1364
- // lib/resolve-component-data.ts
1365
- init_react_import();
1366
-
1367
- // lib/data/map-slots.ts
1368
- init_react_import();
1369
- function mapSlotsAsync(_0, _1) {
1370
- return __async(this, arguments, function* (item, map, recursive = true, isSlot2 = isSlot) {
1371
- const props = __spreadValues({}, item.props);
1372
- const propKeys = Object.keys(props);
1373
- for (let i = 0; i < propKeys.length; i++) {
1374
- const propKey = propKeys[i];
1375
- const itemType = "type" in item ? item.type : "root";
1376
- if (isSlot2(itemType, propKey, props[propKey])) {
1377
- const content = props[propKey];
1378
- const mappedContent = recursive ? yield Promise.all(
1379
- content.map((item2) => __async(this, null, function* () {
1380
- return yield mapSlotsAsync(item2, map, recursive, isSlot2);
1381
- }))
1382
- ) : content;
1383
- props[propKey] = yield map(mappedContent, propKey);
1384
- }
1385
- }
1386
- return __spreadProps(__spreadValues({}, item), { props });
1387
- });
1388
- }
1389
-
1390
- // lib/resolve-component-data.ts
1391
- var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
1392
- var cache = { lastChange: {} };
1393
- var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", recursive = true) {
1394
- const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
1395
- if ((configForItem == null ? void 0 : configForItem.resolveData) && item.props) {
1396
- const id = "id" in item.props ? item.props.id : "root";
1397
- const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
1398
- if (item && (0, import_fast_deep_equal.default)(item, oldItem)) {
1399
- return { node: resolved, didChange: false };
1400
- }
1401
- const changed = getChanged(item, oldItem);
1402
- if (onResolveStart) {
1403
- onResolveStart(item);
1404
- }
1405
- const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
1406
- changed,
1407
- lastData: oldItem,
1408
- metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
1409
- trigger
1410
- });
1411
- let resolvedItem = __spreadProps(__spreadValues({}, item), {
1412
- props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
1413
- });
1414
- if (recursive) {
1415
- resolvedItem = yield mapSlotsAsync(
1416
- resolvedItem,
1417
- (content) => __async(void 0, null, function* () {
1418
- return Promise.all(
1419
- content.map(
1420
- (childItem) => __async(void 0, null, function* () {
1421
- return (yield resolveComponentData(
1422
- childItem,
1423
- config,
1424
- metadata,
1425
- onResolveStart,
1426
- onResolveEnd,
1427
- trigger,
1428
- false
1429
- )).node;
1430
- })
1431
- )
1432
- );
1433
- }),
1434
- false,
1435
- createIsSlotConfig(config)
1436
- );
1437
- }
1438
- if (Object.keys(readOnly).length) {
1439
- resolvedItem.readOnly = readOnly;
1440
- }
1441
- cache.lastChange[id] = {
1442
- item,
1443
- resolved: resolvedItem
1444
- };
1445
- if (onResolveEnd) {
1446
- onResolveEnd(resolvedItem);
1447
- }
1448
- return { node: resolvedItem, didChange: !(0, import_fast_deep_equal.default)(item, resolvedItem) };
1449
- }
1450
- return { node: item, didChange: false };
1451
- });
1452
-
1453
- // lib/data/to-root.ts
1454
- init_react_import();
1455
- var toRoot = (item) => {
1456
- if ("type" in item && item.type !== "root") {
1457
- throw new Error("Converting non-root item to root.");
1458
- }
1459
- const { readOnly } = item;
1460
- if (item.props) {
1461
- if ("id" in item.props) {
1462
- const _a = item.props, { id } = _a, props = __objRest(_a, ["id"]);
1463
- return { props, readOnly };
1464
- }
1465
- return { props: item.props, readOnly };
1466
- }
1467
- return { props: {}, readOnly };
1468
- };
1469
-
1470
- // store/index.ts
1471
- var defaultAppState = {
1472
- data: { content: [], root: {}, zones: {} },
1473
- ui: {
1474
- leftSideBarVisible: true,
1475
- rightSideBarVisible: true,
1476
- arrayState: {},
1477
- itemSelector: null,
1478
- componentList: {},
1479
- isDragging: false,
1480
- previewMode: "edit",
1481
- viewports: {
1482
- current: {
1483
- width: defaultViewports[0].width,
1484
- height: defaultViewports[0].height || "auto"
1485
- },
1486
- options: [],
1487
- controlsVisible: true
1488
- },
1489
- field: { focus: null }
1490
- },
1491
- indexes: {
1492
- nodes: {},
1493
- zones: {}
1494
- }
1495
- };
1496
- var defaultPageFields = {
1497
- title: { type: "text" }
1498
- };
1499
- var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
1500
- (0, import_middleware2.subscribeWithSelector)((set, get) => {
1501
- var _a, _b;
1502
- return __spreadProps(__spreadValues({
1503
- state: defaultAppState,
1504
- config: { components: {} },
1505
- componentState: {},
1506
- plugins: [],
1507
- overrides: {},
1508
- viewports: defaultViewports,
1509
- zoomConfig: {
1510
- autoZoom: 1,
1511
- rootHeight: 0,
1512
- zoom: 1
1513
- },
1514
- status: "LOADING",
1515
- iframe: {},
1516
- metadata: {}
1517
- }, initialAppStore), {
1518
- fields: createFieldsSlice(set, get),
1519
- history: createHistorySlice(set, get),
1520
- nodes: createNodesSlice(set, get),
1521
- permissions: createPermissionsSlice(set, get),
1522
- getComponentConfig: (type) => {
1523
- var _a2;
1524
- const { config, selectedItem } = get();
1525
- const rootFields = ((_a2 = config.root) == null ? void 0 : _a2.fields) || defaultPageFields;
1526
- return type && type !== "root" ? config.components[type] : selectedItem ? config.components[selectedItem.type] : __spreadProps(__spreadValues({}, config.root), { fields: rootFields });
1527
- },
1528
- selectedItem: ((_a = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _a.ui.itemSelector) ? getItem(
1529
- (_b = initialAppStore == null ? void 0 : initialAppStore.state) == null ? void 0 : _b.ui.itemSelector,
1530
- initialAppStore.state
1531
- ) : null,
1532
- dispatch: (action) => set((s) => {
1533
- var _a2, _b2;
1534
- const { record } = get().history;
1535
- const dispatch = createReducer({
1536
- record,
1537
- appStore: s
1538
- });
1539
- const state = dispatch(s.state, action);
1540
- const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
1541
- (_b2 = (_a2 = get()).onAction) == null ? void 0 : _b2.call(_a2, action, state, get().state);
1542
- return __spreadProps(__spreadValues({}, s), { state, selectedItem });
1543
- }),
1544
- setZoomConfig: (zoomConfig) => set({ zoomConfig }),
1545
- setStatus: (status) => set({ status }),
1546
- setComponentState: (componentState) => set({ componentState }),
1547
- pendingLoadTimeouts: {},
1548
- setComponentLoading: (id, loading = true, defer = 0) => {
1549
- const { setComponentState, pendingLoadTimeouts } = get();
1550
- const loadId = generateId();
1551
- const setLoading = () => {
1552
- var _a2;
1553
- const { componentState } = get();
1554
- setComponentState(__spreadProps(__spreadValues({}, componentState), {
1555
- [id]: __spreadProps(__spreadValues({}, componentState[id]), {
1556
- loadingCount: (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) + 1
1557
- })
1558
- }));
1559
- };
1560
- const unsetLoading = () => {
1561
- var _a2;
1562
- const { componentState } = get();
1563
- clearTimeout(timeout2);
1564
- delete pendingLoadTimeouts[loadId];
1565
- set({ pendingLoadTimeouts });
1566
- setComponentState(__spreadProps(__spreadValues({}, componentState), {
1567
- [id]: __spreadProps(__spreadValues({}, componentState[id]), {
1568
- loadingCount: Math.max(
1569
- (((_a2 = componentState[id]) == null ? void 0 : _a2.loadingCount) || 0) - 1,
1570
- 0
1571
- )
1572
- })
1573
- }));
1574
- };
1575
- const timeout2 = setTimeout(() => {
1576
- if (loading) {
1577
- setLoading();
1578
- } else {
1579
- unsetLoading();
1580
- }
1581
- delete pendingLoadTimeouts[loadId];
1582
- set({ pendingLoadTimeouts });
1583
- }, defer);
1584
- set({
1585
- pendingLoadTimeouts: __spreadProps(__spreadValues({}, pendingLoadTimeouts), {
1586
- [id]: timeout2
1587
- })
1588
- });
1589
- return unsetLoading;
1590
- },
1591
- unsetComponentLoading: (id) => {
1592
- const { setComponentLoading } = get();
1593
- setComponentLoading(id, false);
1594
- },
1595
- // Helper
1596
- setUi: (ui, recordHistory) => set((s) => {
1597
- const dispatch = createReducer({
1598
- record: () => {
1599
- },
1600
- appStore: s
1601
- });
1602
- const state = dispatch(s.state, {
1603
- type: "setUi",
1604
- ui,
1605
- recordHistory
1606
- });
1607
- const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
1608
- return __spreadProps(__spreadValues({}, s), { state, selectedItem });
1609
- }),
1610
- resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
1611
- const { config, metadata, setComponentLoading, permissions } = get();
1612
- const timeouts = {};
1613
- return yield resolveComponentData(
1614
- componentData,
1615
- config,
1616
- metadata,
1617
- (item) => {
1618
- const id = "id" in item.props ? item.props.id : "root";
1619
- timeouts[id] = setComponentLoading(id, true, 50);
1620
- },
1621
- (item) => __async(void 0, null, function* () {
1622
- const id = "id" in item.props ? item.props.id : "root";
1623
- if ("type" in item) {
1624
- yield permissions.refreshPermissions({ item });
1625
- } else {
1626
- yield permissions.refreshPermissions({ root: true });
1627
- }
1628
- timeouts[id]();
1629
- }),
1630
- trigger
1631
- );
1632
- }),
1633
- resolveAndCommitData: () => __async(void 0, null, function* () {
1634
- const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
1635
- walkTree(
1636
- state,
1637
- config,
1638
- (content) => content,
1639
- (childItem) => {
1640
- resolveComponentData2(childItem, "load").then((resolved) => {
1641
- const { state: state2 } = get();
1642
- const node = state2.indexes.nodes[resolved.node.props.id];
1643
- if (node && resolved.didChange) {
1644
- if (resolved.node.props.id === "root") {
1645
- dispatch({
1646
- type: "replaceRoot",
1647
- root: toRoot(resolved.node)
1648
- });
1649
- } else {
1650
- const zoneCompound = `${node.parentId}:${node.zone}`;
1651
- const parentZone = state2.indexes.zones[zoneCompound];
1652
- const index = parentZone.contentIds.indexOf(
1653
- resolved.node.props.id
1654
- );
1655
- dispatch({
1656
- type: "replace",
1657
- data: resolved.node,
1658
- destinationIndex: index,
1659
- destinationZone: zoneCompound
1660
- });
1661
- }
1662
- }
1663
- });
1664
- return childItem;
1665
- }
1666
- );
1667
- })
1668
- });
1669
- })
1670
- );
1671
- var appStoreContext = (0, import_react9.createContext)(createAppStore());
1672
- function useAppStore(selector) {
1673
- const context = (0, import_react9.useContext)(appStoreContext);
1674
- return (0, import_zustand2.useStore)(context, selector);
1675
- }
1676
- function useAppStoreApi() {
1677
- return (0, import_react9.useContext)(appStoreContext);
1678
- }
1679
-
1680
- // components/Loader/index.tsx
1681
- init_react_import();
1682
-
1683
- // lib/index.ts
1684
- init_react_import();
1685
-
1686
- // lib/filter.ts
1687
- init_react_import();
1688
-
1689
- // lib/data/reorder.ts
1690
- init_react_import();
1691
-
1692
- // lib/data/replace.ts
1693
- init_react_import();
1694
-
1695
- // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
1696
- init_react_import();
1697
- var styles_module_default2 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
1698
-
1699
- // components/Loader/index.tsx
1700
- var import_jsx_runtime = require("react/jsx-runtime");
1701
- var getClassName = get_class_name_factory_default("Loader", styles_module_default2);
1702
- var Loader = (_a) => {
1703
- var _b = _a, {
1704
- color,
1705
- size = 16
1706
- } = _b, props = __objRest(_b, [
1707
- "color",
1708
- "size"
1709
- ]);
1710
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1711
- "span",
1712
- __spreadValues({
1713
- className: getClassName(),
1714
- style: {
1715
- width: size,
1716
- height: size,
1717
- color
1718
- },
1719
- "aria-label": "loading"
1720
- }, props)
1721
- );
1722
- };
1723
-
1724
- // components/ActionBar/index.tsx
1725
- init_react_import();
1726
-
1727
- // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
1728
- init_react_import();
1729
- var styles_module_default3 = { "ActionBar": "_ActionBar_rvadt_1", "ActionBar-label": "_ActionBar-label_rvadt_18", "ActionBar-action": "_ActionBar-action_rvadt_30", "ActionBar-group": "_ActionBar-group_rvadt_38" };
1730
-
1731
- // components/ActionBar/index.tsx
1732
- var import_jsx_runtime2 = require("react/jsx-runtime");
1733
- var getClassName2 = get_class_name_factory_default("ActionBar", styles_module_default3);
1734
- var ActionBar = ({
1735
- label,
1736
- children
1737
- }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1738
- "div",
1739
- {
1740
- className: getClassName2(),
1741
- onClick: (e) => {
1742
- e.stopPropagation();
1743
- },
1744
- children: [
1745
- label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionBar.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("label"), children: label }) }),
1746
- children
1747
- ]
1748
- }
1749
- );
1750
- var Action = ({
1751
- children,
1752
- label,
1753
- onClick
1754
- }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1755
- "button",
1756
- {
1757
- type: "button",
1758
- className: getClassName2("action"),
1759
- onClick,
1760
- title: label,
1761
- children
1762
- }
1763
- );
1764
- var Group = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("group"), children });
1765
- var Label = ({ label }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("label"), children: label });
1766
- ActionBar.Action = Action;
1767
- ActionBar.Label = Label;
1768
- ActionBar.Group = Group;
1769
-
1770
- // components/DraggableComponent/index.tsx
1771
- var import_react_dom = require("react-dom");
1772
-
1773
- // lib/dnd/collision/dynamic/index.ts
1774
- init_react_import();
1775
- var import_abstract8 = require("@dnd-kit/abstract");
1776
-
1777
- // lib/dnd/collision/directional/index.ts
1778
- init_react_import();
1779
- var import_abstract = require("@dnd-kit/abstract");
1780
-
1781
- // lib/dnd/collision/collision-debug.ts
1782
- init_react_import();
1783
- var DEBUG = false;
1784
- var debugElements = {};
1785
- var timeout;
1786
- var collisionDebug = (a, b, id, color, label) => {
1787
- if (!DEBUG) return;
1788
- const debugId = `${id}-debug`;
1789
- clearTimeout(timeout);
1790
- timeout = setTimeout(() => {
1791
- Object.entries(debugElements).forEach(([id2, { svg }]) => {
1792
- svg.remove();
1793
- delete debugElements[id2];
1794
- });
1795
- }, 1e3);
1796
- requestAnimationFrame(() => {
1797
- var _a, _b;
1798
- const existingEl = debugElements[debugId];
1799
- let line = (_a = debugElements[debugId]) == null ? void 0 : _a.line;
1800
- let text = (_b = debugElements[debugId]) == null ? void 0 : _b.text;
1801
- if (!existingEl) {
1802
- const svgNs = "http://www.w3.org/2000/svg";
1803
- const svg = document.createElementNS(svgNs, "svg");
1804
- line = document.createElementNS(svgNs, "line");
1805
- text = document.createElementNS(svgNs, "text");
1806
- svg.setAttribute("id", debugId);
1807
- svg.setAttribute(
1808
- "style",
1809
- "position: fixed; height: 100%; width: 100%; pointer-events: none; top: 0px; left: 0px;"
1810
- );
1811
- svg.appendChild(line);
1812
- svg.appendChild(text);
1813
- text.setAttribute("fill", `black`);
1814
- document.body.appendChild(svg);
1815
- debugElements[debugId] = { svg, line, text };
1816
- }
1817
- line.setAttribute("x1", a.x.toString());
1818
- line.setAttribute("x2", b.x.toString());
1819
- line.setAttribute("y1", a.y.toString());
1820
- line.setAttribute("y2", b.y.toString());
1821
- line.setAttribute("style", `stroke:${color};stroke-width:2`);
1822
- text.setAttribute("x", (a.x - (a.x - b.x) / 2).toString());
1823
- text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
1824
- if (label) {
1825
- text.innerHTML = label;
1826
- }
1827
- });
1828
- };
1829
-
1830
- // lib/dnd/collision/directional/index.ts
1831
- var distanceChange = "increasing";
1832
- var directionalCollision = (input, previous) => {
1833
- var _a;
1834
- const { dragOperation, droppable } = input;
1835
- const { shape: dropShape } = droppable;
1836
- const { position } = dragOperation;
1837
- const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
1838
- if (!dragShape || !dropShape) return null;
1839
- const dropCenter = dropShape.center;
1840
- const distanceToPrevious = Math.sqrt(
1841
- Math.pow(dropCenter.x - previous.x, 2) + Math.pow(dropCenter.y - previous.y, 2)
1842
- );
1843
- const distanceToCurrent = Math.sqrt(
1844
- Math.pow(dropCenter.x - position.current.x, 2) + Math.pow(dropCenter.y - position.current.y, 2)
1845
- );
1846
- distanceChange = distanceToCurrent === distanceToPrevious ? distanceChange : distanceToCurrent < distanceToPrevious ? "decreasing" : "increasing";
1847
- collisionDebug(
1848
- dragShape.center,
1849
- dropCenter,
1850
- droppable.id.toString(),
1851
- "rebeccapurple"
1852
- );
1853
- if (distanceChange === "decreasing") {
1854
- return {
1855
- id: droppable.id,
1856
- value: 1,
1857
- type: import_abstract.CollisionType.Collision
1858
- };
1859
- }
1860
- return null;
1861
- };
1862
-
1863
- // lib/dnd/collision/dynamic/get-direction.ts
1864
- init_react_import();
1865
- var getDirection = (dragAxis, delta) => {
1866
- if (dragAxis === "dynamic") {
1867
- if (Math.abs(delta.y) > Math.abs(delta.x)) {
1868
- return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
1869
- } else {
1870
- return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
1871
- }
1872
- } else if (dragAxis === "x") {
1873
- return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
1874
- }
1875
- return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
1876
- };
1877
-
1878
- // lib/dnd/collision/dynamic/get-midpoint-impact.ts
1879
- init_react_import();
1880
- var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0) => {
1881
- const dragRect = dragShape.boundingRectangle;
1882
- const dropCenter = dropShape.center;
1883
- if (direction === "down") {
1884
- const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
1885
- return dragRect.bottom >= dropCenter.y + offset2;
1886
- } else if (direction === "up") {
1887
- const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
1888
- return dragRect.top < dropCenter.y - offset2;
1889
- } else if (direction === "left") {
1890
- const offset2 = offsetMultiplier * dropShape.boundingRectangle.width;
1891
- return dropCenter.x - offset2 >= dragRect.left;
1892
- }
1893
- const offset = offsetMultiplier * dropShape.boundingRectangle.width;
1894
- return dragRect.right - offset >= dropCenter.x;
1895
- };
1896
-
1897
- // lib/dnd/collision/dynamic/track-movement-interval.ts
1898
- init_react_import();
1899
- var import_geometry = require("@dnd-kit/geometry");
1900
- var INTERVAL_SENSITIVITY = 10;
1901
- var intervalCache = {
1902
- current: { x: 0, y: 0 },
1903
- delta: { x: 0, y: 0 },
1904
- previous: { x: 0, y: 0 },
1905
- direction: null
1906
- };
1907
- var trackMovementInterval = (point, dragAxis = "dynamic") => {
1908
- intervalCache.current = point;
1909
- intervalCache.delta = {
1910
- x: point.x - intervalCache.previous.x,
1911
- y: point.y - intervalCache.previous.y
1912
- };
1913
- intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
1914
- if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
1915
- intervalCache.previous = import_geometry.Point.from(point);
1916
- }
1917
- return intervalCache;
1918
- };
1919
-
1920
- // ../../node_modules/@dnd-kit/collision/dist/index.js
1921
- init_react_import();
1922
- var import_abstract2 = require("@dnd-kit/abstract");
1923
- var import_geometry2 = require("@dnd-kit/geometry");
1924
- var import_abstract3 = require("@dnd-kit/abstract");
1925
- var import_geometry3 = require("@dnd-kit/geometry");
1926
- var import_abstract4 = require("@dnd-kit/abstract");
1927
- var import_geometry4 = require("@dnd-kit/geometry");
1928
- var import_abstract5 = require("@dnd-kit/abstract");
1929
- var import_geometry5 = require("@dnd-kit/geometry");
1930
- var import_abstract6 = require("@dnd-kit/abstract");
1931
- var import_geometry6 = require("@dnd-kit/geometry");
1932
- var import_abstract7 = require("@dnd-kit/abstract");
1933
- var import_geometry7 = require("@dnd-kit/geometry");
1934
- var pointerIntersection = ({
1935
- dragOperation,
1936
- droppable
1937
- }) => {
1938
- const pointerCoordinates = dragOperation.position.current;
1939
- if (!pointerCoordinates) {
1940
- return null;
1941
- }
1942
- const { id } = droppable;
1943
- if (!droppable.shape) {
1944
- return null;
1945
- }
1946
- if (droppable.shape.containsPoint(pointerCoordinates)) {
1947
- const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
1948
- return {
1949
- id,
1950
- value: 1 / distance,
1951
- type: import_abstract2.CollisionType.PointerIntersection,
1952
- priority: import_abstract2.CollisionPriority.High
1953
- };
1954
- }
1955
- return null;
1956
- };
1957
- var closestCorners = (input) => {
1958
- const { dragOperation, droppable } = input;
1959
- const { shape, position } = dragOperation;
1960
- if (!droppable.shape) {
1961
- return null;
1962
- }
1963
- const { left, top, right, bottom } = droppable.shape.boundingRectangle;
1964
- const corners = [
1965
- {
1966
- x: left,
1967
- y: top
1968
- },
1969
- {
1970
- x: right,
1971
- y: top
1972
- },
1973
- {
1974
- x: left,
1975
- y: bottom
1976
- },
1977
- {
1978
- x: right,
1979
- y: bottom
1980
- }
1981
- ];
1982
- const distance = corners.reduce(
1983
- (acc, corner) => {
1984
- var _a;
1985
- return acc + import_geometry4.Point.distance(
1986
- import_geometry4.Point.from(corner),
1987
- (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
1988
- );
1989
- },
1990
- 0
1991
- );
1992
- const value = distance / 4;
1993
- return {
1994
- id: droppable.id,
1995
- value: 1 / value,
1996
- type: import_abstract4.CollisionType.Collision,
1997
- priority: import_abstract4.CollisionPriority.Normal
1998
- };
1999
- };
2000
-
2001
- // lib/dnd/collision/dynamic/store.ts
2002
- init_react_import();
2003
- var import_vanilla = require("zustand/vanilla");
2004
- var collisionStore = (0, import_vanilla.createStore)(() => ({
2005
- fallbackEnabled: false
2006
- }));
2007
-
2008
- // lib/dnd/collision/dynamic/index.ts
2009
- var flushNext = "";
2010
- var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
2011
- var _a, _b, _c, _d, _e;
2012
- const { dragOperation, droppable } = input;
2013
- const { position } = dragOperation;
2014
- const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
2015
- const { shape: dropShape } = droppable;
2016
- if (!dragShape || !dropShape) {
2017
- return null;
2018
- }
2019
- const { center: dragCenter } = dragShape;
2020
- const { fallbackEnabled } = collisionStore.getState();
2021
- const interval = trackMovementInterval(position.current, dragAxis);
2022
- dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
2023
- direction: interval.direction
2024
- });
2025
- const collisionMap = dragOperation.data.collisionMap || {};
2026
- dragOperation.data.collisionMap = collisionMap;
2027
- collisionMap[droppable.id] = {
2028
- direction: interval.direction
2029
- };
2030
- const { center: dropCenter } = dropShape;
2031
- const overMidpoint = getMidpointImpact(
2032
- dragShape,
2033
- dropShape,
2034
- interval.direction,
2035
- midpointOffset
2036
- );
2037
- if (((_b = dragOperation.source) == null ? void 0 : _b.id) === droppable.id) {
2038
- const collision = directionalCollision(input, interval.previous);
2039
- collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
2040
- if (collision) {
2041
- return __spreadProps(__spreadValues({}, collision), {
2042
- priority: import_abstract8.CollisionPriority.Highest
2043
- });
2044
- }
2045
- }
2046
- const intersectionArea = dragShape.intersectionArea(dropShape);
2047
- const intersectionRatio = intersectionArea / dropShape.area;
2048
- if (intersectionArea && overMidpoint) {
2049
- collisionDebug(
2050
- dragCenter,
2051
- dropCenter,
2052
- droppable.id.toString(),
2053
- "green",
2054
- interval.direction
2055
- );
2056
- const collision = {
2057
- id: droppable.id,
2058
- value: intersectionRatio,
2059
- priority: import_abstract8.CollisionPriority.High,
2060
- type: import_abstract8.CollisionType.Collision
2061
- };
2062
- const shouldFlushId = flushNext === droppable.id;
2063
- flushNext = "";
2064
- return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
2065
- }
2066
- if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
2067
- const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
2068
- const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
2069
- if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
2070
- const fallbackCollision = closestCorners(input);
2071
- if (fallbackCollision) {
2072
- const direction = getDirection(dragAxis, {
2073
- x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
2074
- y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
2075
- });
2076
- collisionMap[droppable.id] = {
2077
- direction
2078
- };
2079
- if (intersectionArea) {
2080
- collisionDebug(
2081
- dragCenter,
2082
- dropCenter,
2083
- droppable.id.toString(),
2084
- "red",
2085
- direction || ""
2086
- );
2087
- flushNext = droppable.id;
2088
- return __spreadProps(__spreadValues({}, fallbackCollision), {
2089
- priority: import_abstract8.CollisionPriority.Low
2090
- });
2091
- }
2092
- collisionDebug(
2093
- dragCenter,
2094
- dropCenter,
2095
- droppable.id.toString(),
2096
- "orange",
2097
- direction || ""
2098
- );
2099
- return __spreadProps(__spreadValues({}, fallbackCollision), { priority: import_abstract8.CollisionPriority.Lowest });
2100
- }
2101
- }
2102
- }
2103
- collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
2104
- delete collisionMap[droppable.id];
2105
- return null;
2106
- };
2107
-
2108
- // lib/dnd/dnd-kit/safe.ts
2109
- init_react_import();
2110
- var import_react10 = require("@dnd-kit/react");
2111
- var import_sortable = require("@dnd-kit/react/sortable");
2112
- function useDroppableSafe(input) {
2113
- if (typeof window === "undefined") {
2114
- return { ref: () => {
2115
- } };
2116
- }
2117
- return (0, import_react10.useDroppable)(input);
2118
- }
2119
- function useDraggableSafe(input) {
2120
- if (typeof window === "undefined") {
2121
- return { ref: () => {
2122
- } };
2123
- }
2124
- return (0, import_react10.useDraggable)(input);
2125
- }
2126
- function useSortableSafe(input) {
2127
- if (typeof window === "undefined") {
2128
- return { ref: () => {
2129
- }, status: "idle", handleRef: () => {
2130
- } };
2131
- }
2132
- return (0, import_sortable.useSortable)(input);
2133
- }
2134
-
2135
- // lib/get-deep-scroll-position.ts
2136
- init_react_import();
2137
- function getDeepScrollPosition(element) {
2138
- let totalScroll = {
2139
- x: 0,
2140
- y: 0
2141
- };
2142
- let current = element;
2143
- while (current && current !== document.documentElement) {
2144
- const parent = current.parentElement;
2145
- if (parent) {
2146
- totalScroll.x += parent.scrollLeft;
2147
- totalScroll.y += parent.scrollTop;
2148
- }
2149
- current = parent;
2150
- }
2151
- return totalScroll;
2152
- }
2153
-
2154
- // components/DropZone/context.tsx
2155
- init_react_import();
2156
- var import_react11 = require("react");
2157
- var import_zustand3 = require("zustand");
2158
- var import_jsx_runtime3 = require("react/jsx-runtime");
2159
- var dropZoneContext = (0, import_react11.createContext)(null);
2160
- var ZoneStoreContext = (0, import_react11.createContext)(
2161
- (0, import_zustand3.createStore)(() => ({
2162
- zoneDepthIndex: {},
2163
- nextZoneDepthIndex: {},
2164
- areaDepthIndex: {},
2165
- nextAreaDepthIndex: {},
2166
- draggedItem: null,
2167
- previewIndex: {}
2168
- }))
2169
- );
2170
- var DropZoneProvider = ({
2171
- children,
2172
- value
2173
- }) => {
2174
- const [hoveringComponent, setHoveringComponent] = (0, import_react11.useState)();
2175
- const dispatch = useAppStore((s) => s.dispatch);
2176
- const registerZone = (0, import_react11.useCallback)(
2177
- (zoneCompound) => {
2178
- dispatch({
2179
- type: "registerZone",
2180
- zone: zoneCompound
2181
- });
2182
- },
2183
- [dispatch]
2184
- );
2185
- const unregisterZone = (0, import_react11.useCallback)(
2186
- (zoneCompound) => {
2187
- dispatch({
2188
- type: "unregisterZone",
2189
- zone: zoneCompound
2190
- });
2191
- },
2192
- [dispatch]
2193
- );
2194
- const memoValue = (0, import_react11.useMemo)(
2195
- () => __spreadValues({
2196
- hoveringComponent,
2197
- setHoveringComponent,
2198
- registerZone,
2199
- unregisterZone
2200
- }, value),
2201
- [value, hoveringComponent]
2202
- );
2203
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
2204
- };
2205
-
2206
- // lib/use-context-store.ts
2207
- init_react_import();
2208
- var import_react12 = require("react");
2209
- var import_zustand4 = require("zustand");
2210
- var import_shallow = require("zustand/react/shallow");
2211
- function useContextStore(context, selector) {
2212
- const store = (0, import_react12.useContext)(context);
2213
- if (!store) {
2214
- throw new Error("useContextStore must be used inside context");
2215
- }
2216
- return (0, import_zustand4.useStore)(store, (0, import_shallow.useShallow)(selector));
2217
- }
2218
-
2219
- // components/DraggableComponent/index.tsx
2220
- var import_shallow2 = require("zustand/react/shallow");
2221
- var import_jsx_runtime4 = require("react/jsx-runtime");
2222
- var getClassName3 = get_class_name_factory_default("DraggableComponent", styles_module_default);
2223
- var DEBUG2 = false;
2224
- var space = 8;
2225
- var actionsOverlayTop = space * 6.5;
2226
- var actionsTop = -(actionsOverlayTop - 8);
2227
- var actionsSide = space;
2228
- var DefaultActionBar = ({
2229
- label,
2230
- children,
2231
- parentAction
2232
- }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionBar, { children: [
2233
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionBar.Group, { children: [
2234
- parentAction,
2235
- label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Label, { label })
2236
- ] }),
2237
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Group, { children })
2238
- ] });
2239
- var DraggableComponent = ({
2240
- children,
2241
- depth,
2242
- componentType,
2243
- id,
2244
- index,
2245
- zoneCompound,
2246
- isLoading = false,
2247
- isSelected = false,
2248
- debug,
2249
- label,
2250
- isEnabled,
2251
- autoDragAxis,
2252
- userDragAxis,
2253
- inDroppableZone = true
2254
- }) => {
2255
- const zoom = useAppStore(
2256
- (s) => {
2257
- var _a;
2258
- return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) === id ? s.zoomConfig.zoom : 1;
2259
- }
2260
- );
2261
- const overrides = useAppStore((s) => s.overrides);
2262
- const dispatch = useAppStore((s) => s.dispatch);
2263
- const iframe = useAppStore((s) => s.iframe);
2264
- const ctx = (0, import_react13.useContext)(dropZoneContext);
2265
- const [localZones, setLocalZones] = (0, import_react13.useState)({});
2266
- const registerLocalZone = (0, import_react13.useCallback)(
2267
- (zoneCompound2, active) => {
2268
- var _a;
2269
- (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
2270
- setLocalZones((obj) => __spreadProps(__spreadValues({}, obj), {
2271
- [zoneCompound2]: active
2272
- }));
2273
- },
2274
- [setLocalZones]
2275
- );
2276
- const unregisterLocalZone = (0, import_react13.useCallback)(
2277
- (zoneCompound2) => {
2278
- var _a;
2279
- (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
2280
- setLocalZones((obj) => {
2281
- const newLocalZones = __spreadValues({}, obj);
2282
- delete newLocalZones[zoneCompound2];
2283
- return newLocalZones;
2284
- });
2285
- },
2286
- [setLocalZones]
2287
- );
2288
- const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
2289
- const path = useAppStore((0, import_shallow2.useShallow)((s) => {
2290
- var _a;
2291
- return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
2292
- }));
2293
- const permissions = useAppStore(
2294
- (0, import_shallow2.useShallow)((s) => {
2295
- const item = getItem({ index, zone: zoneCompound }, s.state);
2296
- return s.permissions.getPermissions({ item });
2297
- })
2298
- );
2299
- const userIsDragging = useContextStore(
2300
- ZoneStoreContext,
2301
- (s) => !!s.draggedItem
2302
- );
2303
- const canCollide = permissions.drag || userIsDragging;
2304
- const disabled = !isEnabled || !canCollide;
2305
- const [dragAxis, setDragAxis] = (0, import_react13.useState)(userDragAxis || autoDragAxis);
2306
- const { ref: sortableRef, status } = useSortableSafe({
2307
- id,
2308
- index,
2309
- group: zoneCompound,
2310
- type: "component",
2311
- data: {
2312
- areaId: ctx == null ? void 0 : ctx.areaId,
2313
- zone: zoneCompound,
2314
- index,
2315
- componentType,
2316
- containsActiveZone,
2317
- depth,
2318
- path: path || [],
2319
- inDroppableZone
2320
- },
2321
- collisionPriority: isEnabled ? depth : 0,
2322
- collisionDetector: createDynamicCollisionDetector(dragAxis),
2323
- disabled,
2324
- // "Out of the way" transition from react-beautiful-dnd
2325
- transition: {
2326
- duration: 200,
2327
- easing: "cubic-bezier(0.2, 0, 0, 1)"
2328
- }
2329
- });
2330
- const thisIsDragging = status === "dragging";
2331
- const ref = (0, import_react13.useRef)(null);
2332
- const refSetter = (0, import_react13.useCallback)(
2333
- (el) => {
2334
- sortableRef(el);
2335
- if (el) {
2336
- ref.current = el;
2337
- }
2338
- },
2339
- [sortableRef]
2340
- );
2341
- const [portalEl, setPortalEl] = (0, import_react13.useState)();
2342
- (0, import_react13.useEffect)(() => {
2343
- var _a, _b, _c;
2344
- setPortalEl(
2345
- iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
2346
- );
2347
- }, [iframe.enabled, ref.current]);
2348
- const getStyle = (0, import_react13.useCallback)(() => {
2349
- var _a, _b, _c;
2350
- if (!ref.current) return;
2351
- const rect = ref.current.getBoundingClientRect();
2352
- const deepScrollPosition = getDeepScrollPosition(ref.current);
2353
- const portalContainerEl = iframe.enabled ? null : (_a = ref.current) == null ? void 0 : _a.closest("[data-puck-preview]");
2354
- const portalContainerRect = portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
2355
- const portalScroll = portalContainerEl ? getDeepScrollPosition(portalContainerEl) : { x: 0, y: 0 };
2356
- const scroll = {
2357
- x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
2358
- y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
2359
- };
2360
- const style2 = {
2361
- left: `${rect.left + scroll.x}px`,
2362
- top: `${rect.top + scroll.y}px`,
2363
- height: `${rect.height}px`,
2364
- width: `${rect.width}px`
2365
- };
2366
- return style2;
2367
- }, [ref.current]);
2368
- const [style, setStyle] = (0, import_react13.useState)();
2369
- const sync = (0, import_react13.useCallback)(() => {
2370
- setStyle(getStyle());
2371
- }, [ref.current, iframe]);
2372
- (0, import_react13.useEffect)(() => {
2373
- if (ref.current && !userIsDragging) {
2374
- const observer = new ResizeObserver(sync);
2375
- observer.observe(ref.current);
2376
- return () => {
2377
- observer.disconnect();
2378
- };
2379
- }
2380
- }, [ref.current, userIsDragging]);
2381
- const registerNode = useAppStore((s) => s.nodes.registerNode);
2382
- (0, import_react13.useEffect)(() => {
2383
- var _a;
2384
- registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
2385
- return () => {
2386
- registerNode(id, { methods: { sync: () => null }, element: null });
2387
- };
2388
- }, [id, zoneCompound, index, componentType, sync]);
2389
- const CustomActionBar = (0, import_react13.useMemo)(
2390
- () => overrides.actionBar || DefaultActionBar,
2391
- [overrides.actionBar]
2392
- );
2393
- const onClick = (0, import_react13.useCallback)(
2394
- (e) => {
2395
- e.stopPropagation();
2396
- dispatch({
2397
- type: "setUi",
2398
- ui: {
2399
- itemSelector: { index, zone: zoneCompound }
2400
- }
2401
- });
2402
- },
2403
- [index, zoneCompound, id]
2404
- );
2405
- const appStore = useAppStoreApi();
2406
- const onSelectParent = (0, import_react13.useCallback)(() => {
2407
- const { nodes, zones } = appStore.getState().state.indexes;
2408
- const node = nodes[id];
2409
- const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
2410
- if (!parentNode || !node.parentId) {
2411
- return;
2412
- }
2413
- const parentZoneCompound = `${parentNode.parentId}:${parentNode.zone}`;
2414
- const parentIndex = zones[parentZoneCompound].contentIds.indexOf(
2415
- node.parentId
2416
- );
2417
- dispatch({
2418
- type: "setUi",
2419
- ui: {
2420
- itemSelector: {
2421
- zone: parentZoneCompound,
2422
- index: parentIndex
2423
- }
2424
- }
2425
- });
2426
- }, [ctx, path]);
2427
- const onDuplicate = (0, import_react13.useCallback)(() => {
2428
- dispatch({
2429
- type: "duplicate",
2430
- sourceIndex: index,
2431
- sourceZone: zoneCompound
2432
- });
2433
- }, [index, zoneCompound]);
2434
- const onDelete = (0, import_react13.useCallback)(() => {
2435
- dispatch({
2436
- type: "remove",
2437
- index,
2438
- zone: zoneCompound
2439
- });
2440
- }, [index, zoneCompound]);
2441
- const [hover, setHover] = (0, import_react13.useState)(false);
2442
- const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
2443
- (0, import_react13.useEffect)(() => {
2444
- if (!ref.current) {
2445
- return;
2446
- }
2447
- const el = ref.current;
2448
- const _onMouseOver = (e) => {
2449
- if (userIsDragging) {
2450
- if (thisIsDragging) {
2451
- setHover(true);
2452
- } else {
2453
- setHover(false);
2454
- }
2455
- } else {
2456
- setHover(true);
2457
- }
2458
- e.stopPropagation();
2459
- };
2460
- const _onMouseOut = (e) => {
2461
- e.stopPropagation();
2462
- setHover(false);
2463
- };
2464
- el.setAttribute("data-puck-component", id);
2465
- el.setAttribute("data-puck-dnd", id);
2466
- el.style.position = "relative";
2467
- el.addEventListener("click", onClick);
2468
- el.addEventListener("mouseover", _onMouseOver);
2469
- el.addEventListener("mouseout", _onMouseOut);
2470
- if (thisIsDragging) {
2471
- el.setAttribute("data-puck-dragging", "");
2472
- } else {
2473
- el.removeAttribute("data-puck-dragging");
2474
- }
2475
- return () => {
2476
- el.removeAttribute("data-puck-component");
2477
- el.removeAttribute("data-puck-dnd");
2478
- el.removeEventListener("click", onClick);
2479
- el.removeEventListener("mouseover", _onMouseOver);
2480
- el.removeEventListener("mouseout", _onMouseOut);
2481
- el.removeAttribute("data-puck-dragging");
2482
- };
2483
- }, [
2484
- ref,
2485
- onClick,
2486
- containsActiveZone,
2487
- zoneCompound,
2488
- id,
2489
- userIsDragging,
2490
- thisIsDragging,
2491
- inDroppableZone
2492
- ]);
2493
- (0, import_react13.useEffect)(() => {
2494
- if (ref.current && disabled) {
2495
- ref.current.setAttribute("data-puck-disabled", "");
2496
- return () => {
2497
- var _a;
2498
- (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
2499
- };
2500
- }
2501
- }, [disabled, ref]);
2502
- const [isVisible, setIsVisible] = (0, import_react13.useState)(false);
2503
- (0, import_react13.useEffect)(() => {
2504
- sync();
2505
- if ((isSelected || hover || indicativeHover) && !userIsDragging) {
2506
- setIsVisible(true);
2507
- } else {
2508
- setIsVisible(false);
2509
- }
2510
- }, [isSelected, hover, indicativeHover, iframe, userIsDragging]);
2511
- const syncActionsPosition = (0, import_react13.useCallback)(
2512
- (el) => {
2513
- if (el) {
2514
- const view = el.ownerDocument.defaultView;
2515
- if (view) {
2516
- const rect = el.getBoundingClientRect();
2517
- const diffLeft = rect.x;
2518
- const exceedsBoundsLeft = diffLeft < 0;
2519
- const diffTop = rect.y;
2520
- const exceedsBoundsTop = diffTop < 0;
2521
- if (exceedsBoundsLeft) {
2522
- el.style.transformOrigin = "left top";
2523
- el.style.left = "0px";
2524
- }
2525
- if (exceedsBoundsTop) {
2526
- el.style.top = "12px";
2527
- if (!exceedsBoundsLeft) {
2528
- el.style.transformOrigin = "right top";
2529
- }
2530
- }
2531
- }
2532
- }
2533
- },
2534
- [zoom]
2535
- );
2536
- (0, import_react13.useEffect)(() => {
2537
- if (userDragAxis) {
2538
- setDragAxis(userDragAxis);
2539
- return;
2540
- }
2541
- if (ref.current) {
2542
- const computedStyle = window.getComputedStyle(ref.current);
2543
- if (computedStyle.display === "inline" || computedStyle.display === "inline-block") {
2544
- setDragAxis("x");
2545
- return;
2546
- }
2547
- }
2548
- setDragAxis(autoDragAxis);
2549
- }, [ref, userDragAxis, autoDragAxis]);
2550
- const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CornerLeftUp, { size: 16 }) });
2551
- const nextContextValue = (0, import_react13.useMemo)(
2552
- () => __spreadProps(__spreadValues({}, ctx), {
2553
- areaId: id,
2554
- zoneCompound,
2555
- index,
2556
- depth: depth + 1,
2557
- registerLocalZone,
2558
- unregisterLocalZone
2559
- }),
2560
- [
2561
- ctx,
2562
- id,
2563
- zoneCompound,
2564
- index,
2565
- depth,
2566
- registerLocalZone,
2567
- unregisterLocalZone
2568
- ]
2569
- );
2570
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
2571
- isVisible && (0, import_react_dom.createPortal)(
2572
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
2573
- "div",
2574
- {
2575
- className: getClassName3({
2576
- isSelected,
2577
- isDragging: thisIsDragging,
2578
- hover: hover || indicativeHover
2579
- }),
2580
- style: __spreadValues({}, style),
2581
- "data-puck-overlay": true,
2582
- children: [
2583
- debug,
2584
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, {}) }),
2585
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2586
- "div",
2587
- {
2588
- className: getClassName3("actionsOverlay"),
2589
- style: {
2590
- top: actionsOverlayTop / zoom
2591
- },
2592
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2593
- "div",
2594
- {
2595
- className: getClassName3("actions"),
2596
- style: {
2597
- transform: `scale(${1 / zoom}`,
2598
- top: actionsTop / zoom,
2599
- right: 0,
2600
- paddingLeft: actionsSide,
2601
- paddingRight: actionsSide
2602
- },
2603
- ref: syncActionsPosition,
2604
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
2605
- CustomActionBar,
2606
- {
2607
- parentAction,
2608
- label: DEBUG2 ? id : label,
2609
- children: [
2610
- permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Copy, { size: 16 }) }),
2611
- permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Trash, { size: 16 }) })
2612
- ]
2613
- }
2614
- )
2615
- }
2616
- )
2617
- }
2618
- ),
2619
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("overlay") })
2620
- ]
2621
- }
2622
- ),
2623
- portalEl || document.body
2624
- ),
2625
- children(refSetter)
2626
- ] });
2627
- };
2628
-
2629
- // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
2630
- init_react_import();
2631
- var styles_module_default4 = { "DropZone": "_DropZone_3dmev_1", "DropZone--hasChildren": "_DropZone--hasChildren_3dmev_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_3dmev_19", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_3dmev_23", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_3dmev_24", "DropZone--isRootZone": "_DropZone--isRootZone_3dmev_24", "DropZone--isDestination": "_DropZone--isDestination_3dmev_34", "DropZone-item": "_DropZone-item_3dmev_46", "DropZone-hitbox": "_DropZone-hitbox_3dmev_50", "DropZone--isEnabled": "_DropZone--isEnabled_3dmev_58", "DropZone--isAnimating": "_DropZone--isAnimating_3dmev_67" };
2632
-
2633
- // components/Drawer/index.tsx
2634
- init_react_import();
2635
-
2636
- // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
2637
- init_react_import();
2638
- var styles_module_default5 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
2639
-
2640
- // components/DragIcon/index.tsx
2641
- init_react_import();
2642
-
2643
- // css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
2644
- init_react_import();
2645
- var styles_module_default6 = { "DragIcon": "_DragIcon_17p8x_1", "DragIcon--disabled": "_DragIcon--disabled_17p8x_8" };
2646
-
2647
- // components/DragIcon/index.tsx
2648
- var import_jsx_runtime5 = require("react/jsx-runtime");
2649
- var getClassName4 = get_class_name_factory_default("DragIcon", styles_module_default6);
2650
- var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4({ disabled: isDragDisabled }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
2651
-
2652
- // components/Drawer/index.tsx
2653
- var import_react18 = require("react");
2654
-
2655
- // components/DragDropContext/index.tsx
2656
- init_react_import();
2657
- var import_react16 = require("@dnd-kit/react");
2658
- var import_react17 = require("react");
2659
- var import_dom = require("@dnd-kit/dom");
2660
-
2661
- // lib/dnd/NestedDroppablePlugin.ts
2662
- init_react_import();
2663
- var import_abstract9 = require("@dnd-kit/abstract");
2664
- var import_state = require("@dnd-kit/state");
2665
-
2666
- // lib/throttle.ts
2667
- init_react_import();
2668
-
2669
- // lib/get-frame.ts
2670
- init_react_import();
2671
-
2672
- // lib/global-position.ts
2673
- init_react_import();
2674
-
2675
- // lib/bubble-pointer-event.ts
2676
- init_react_import();
2677
-
2678
- // lib/insert-component.ts
2679
- init_react_import();
2680
-
2681
- // components/DragDropContext/index.tsx
2682
- var import_use_debounce = require("use-debounce");
2683
- var import_zustand5 = require("zustand");
2684
-
2685
- // lib/get-deep-dir.ts
2686
- init_react_import();
2687
-
2688
- // lib/dnd/use-sensors.ts
2689
- init_react_import();
2690
- var import_react14 = require("react");
2691
-
2692
- // lib/dnd/PointerSensor.ts
2693
- init_react_import();
2694
- var import_state2 = require("@dnd-kit/state");
2695
- var import_abstract10 = require("@dnd-kit/abstract");
2696
- var import_geometry8 = require("@dnd-kit/geometry");
2697
- var import_utilities = require("@dnd-kit/dom/utilities");
2698
- var _clearTimeout;
2699
- var _PointerSensor = class _PointerSensor extends import_abstract10.Sensor {
2700
- constructor(manager, options) {
2701
- super(manager);
2702
- this.manager = manager;
2703
- this.options = options;
2704
- this.listeners = new import_utilities.Listeners();
2705
- this.cleanup = /* @__PURE__ */ new Set();
2706
- this.source = void 0;
2707
- this.started = false;
2708
- __privateAdd(this, _clearTimeout);
2709
- this.handleCancel = this.handleCancel.bind(this);
2710
- this.handlePointerUp = this.handlePointerUp.bind(this);
2711
- this.handleKeyDown = this.handleKeyDown.bind(this);
2712
- (0, import_state2.effect)(() => {
2713
- const unbindGlobal = this.bindGlobal(options != null ? options : {});
2714
- return () => {
2715
- unbindGlobal();
2716
- };
2717
- });
2718
- }
2719
- bind(source, options = this.options) {
2720
- const unbind = (0, import_state2.effect)(() => {
2721
- var _a;
2722
- const target = (_a = source.handle) != null ? _a : source.element;
2723
- const listener = (event) => {
2724
- if ((0, import_utilities.isPointerEvent)(event)) {
2725
- this.handlePointerDown(event, source, options);
2726
- }
2727
- };
2728
- if (target) {
2729
- patchWindow(target.ownerDocument.defaultView);
2730
- target.addEventListener("pointerdown", listener);
2731
- return () => {
2732
- target.removeEventListener("pointerdown", listener);
2733
- };
2734
- }
2735
- });
2736
- return unbind;
2737
- }
2738
- bindGlobal(options) {
2739
- const documents = /* @__PURE__ */ new Set();
2740
- for (const draggable of this.manager.registry.draggables.value) {
2741
- if (draggable.element) {
2742
- documents.add((0, import_utilities.getDocument)(draggable.element));
2743
- }
2744
- }
2745
- for (const droppable of this.manager.registry.droppables.value) {
2746
- if (droppable.element) {
2747
- documents.add((0, import_utilities.getDocument)(droppable.element));
2748
- }
2749
- }
2750
- const unbindFns = Array.from(documents).map(
2751
- (doc) => this.listeners.bind(doc, [
2752
- {
2753
- type: "pointermove",
2754
- listener: (event) => this.handlePointerMove(event, doc, options)
2755
- },
2756
- {
2757
- type: "pointerup",
2758
- listener: this.handlePointerUp,
2759
- options: {
2760
- capture: true
2761
- }
2762
- },
2763
- {
2764
- // Cancel activation if there is a competing Drag and Drop interaction
2765
- type: "dragstart",
2766
- listener: this.handleDragStart
2767
- }
2768
- ])
2769
- );
2770
- return () => {
2771
- unbindFns.forEach((unbind) => unbind());
2772
- };
2773
- }
2774
- handlePointerDown(event, source, options = {}) {
2775
- if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
2776
- return;
2777
- }
2778
- const offset = (0, import_utilities.getFrameTransform)(source.element);
2779
- this.initialCoordinates = {
2780
- x: event.clientX * offset.scaleX + offset.x,
2781
- y: event.clientY * offset.scaleY + offset.y
2782
- };
2783
- this.source = source;
2784
- const { activationConstraints } = options;
2785
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
2786
- event.stopImmediatePropagation();
2787
- if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
2788
- this.handleStart(source, event);
2789
- } else {
2790
- const { delay } = constraints;
2791
- if (delay) {
2792
- const timeout2 = setTimeout(
2793
- () => this.handleStart(source, event),
2794
- delay.value
2795
- );
2796
- __privateSet(this, _clearTimeout, () => {
2797
- clearTimeout(timeout2);
2798
- __privateSet(this, _clearTimeout, void 0);
2799
- });
2800
- }
2801
- }
2802
- const cleanup = () => {
2803
- var _a;
2804
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2805
- this.initialCoordinates = void 0;
2806
- this.source = void 0;
2807
- };
2808
- this.cleanup.add(cleanup);
2809
- }
2810
- handlePointerMove(event, doc, options) {
2811
- if (!this.source) {
2812
- return;
2813
- }
2814
- const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
2815
- if (doc !== ownerDocument) {
2816
- return;
2817
- }
2818
- const coordinates = {
2819
- x: event.clientX,
2820
- y: event.clientY
2821
- };
2822
- const offset = (0, import_utilities.getFrameTransform)(this.source.element);
2823
- coordinates.x = coordinates.x * offset.scaleX + offset.x;
2824
- coordinates.y = coordinates.y * offset.scaleY + offset.y;
2825
- if (this.manager.dragOperation.status.dragging) {
2826
- event.preventDefault();
2827
- event.stopPropagation();
2828
- this.manager.actions.move({ to: coordinates });
2829
- return;
2830
- }
2831
- if (!this.initialCoordinates) {
2832
- return;
2833
- }
2834
- const delta = {
2835
- x: coordinates.x - this.initialCoordinates.x,
2836
- y: coordinates.y - this.initialCoordinates.y
2837
- };
2838
- const { activationConstraints } = options;
2839
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
2840
- const { distance, delay } = constraints != null ? constraints : {};
2841
- if (distance) {
2842
- if (distance.tolerance != null && (0, import_geometry8.exceedsDistance)(delta, distance.tolerance)) {
2843
- return this.handleCancel();
2844
- }
2845
- if ((0, import_geometry8.exceedsDistance)(delta, distance.value)) {
2846
- return this.handleStart(this.source, event);
2847
- }
2848
- }
2849
- if (delay) {
2850
- if ((0, import_geometry8.exceedsDistance)(delta, delay.tolerance)) {
2851
- return this.handleCancel();
2852
- }
2853
- }
2854
- }
2855
- handlePointerUp(event) {
2856
- if (!this.source) {
2857
- return;
2858
- }
2859
- event.preventDefault();
2860
- event.stopPropagation();
2861
- const { status } = this.manager.dragOperation;
2862
- if (!status.idle) {
2863
- const canceled = !status.initialized;
2864
- this.manager.actions.stop({ canceled });
2865
- } else if (this.started) {
2866
- setTimeout(() => {
2867
- if (!this.manager.dragOperation.status.idle) {
2868
- this.manager.actions.stop({ canceled: false });
2869
- }
2870
- }, 10);
2871
- }
2872
- this.cleanup.forEach((cleanup) => cleanup());
2873
- this.cleanup.clear();
2874
- }
2875
- handleKeyDown(event) {
2876
- if (event.key === "Escape") {
2877
- event.preventDefault();
2878
- this.handleCancel();
2879
- }
2880
- }
2881
- handleStart(source, event) {
2882
- var _a;
2883
- const { manager, initialCoordinates } = this;
2884
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2885
- if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
2886
- return;
2887
- }
2888
- if (event.defaultPrevented) {
2889
- return;
2890
- }
2891
- this.started = true;
2892
- event.preventDefault();
2893
- (0, import_state2.batch)(() => {
2894
- manager.actions.setDragSource(source.id);
2895
- manager.actions.start({ coordinates: initialCoordinates, event });
2896
- });
2897
- const ownerDocument = (0, import_utilities.getDocument)(event.target);
2898
- const unbind = this.listeners.bind(ownerDocument, [
2899
- {
2900
- // Prevent scrolling on touch devices
2901
- type: "touchmove",
2902
- listener: preventDefault,
2903
- options: {
2904
- passive: false
2905
- }
2906
- },
2907
- {
2908
- // Prevent click events
2909
- type: "click",
2910
- listener: preventDefault
2911
- },
2912
- {
2913
- type: "keydown",
2914
- listener: this.handleKeyDown
2915
- }
2916
- ]);
2917
- ownerDocument.body.setPointerCapture(event.pointerId);
2918
- this.cleanup.add(unbind);
2919
- this.cleanup.add(() => {
2920
- this.started = false;
2921
- });
2922
- }
2923
- handleDragStart(event) {
2924
- const { target } = event;
2925
- if (!(0, import_utilities.isElement)(target)) {
2926
- return;
2927
- }
2928
- const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
2929
- if (isNativeDraggable) {
2930
- this.handleCancel();
2931
- } else {
2932
- preventDefault(event);
2933
- }
2934
- }
2935
- handleCancel() {
2936
- const { dragOperation } = this.manager;
2937
- if (dragOperation.status.initialized) {
2938
- this.manager.actions.stop({ canceled: true });
2939
- }
2940
- this.cleanup.forEach((cleanup) => cleanup());
2941
- this.cleanup.clear();
2942
- }
2943
- destroy() {
2944
- this.listeners.clear();
2945
- }
2946
- };
2947
- _clearTimeout = new WeakMap();
2948
- _PointerSensor.configure = (0, import_abstract10.configurator)(_PointerSensor);
2949
- var PointerSensor = _PointerSensor;
2950
- function preventDefault(event) {
2951
- event.preventDefault();
2952
- }
2953
- function noop() {
2954
- }
2955
- var windows = /* @__PURE__ */ new WeakSet();
2956
- function patchWindow(window2) {
2957
- if (!window2 || windows.has(window2)) {
2958
- return;
2959
- }
2960
- window2.addEventListener("touchmove", noop, {
2961
- capture: false,
2962
- passive: false
2963
- });
2964
- windows.add(window2);
2965
- }
2966
-
2967
- // lib/dnd/use-sensors.ts
2968
- var import_utilities2 = require("@dnd-kit/dom/utilities");
2969
-
2970
- // lib/use-safe-id.ts
2971
- init_react_import();
2972
- var import_react15 = __toESM(require("react"));
2973
- var useSafeId = () => {
2974
- if (typeof import_react15.default.useId !== "undefined") {
2975
- return import_react15.default.useId();
2976
- }
2977
- const [id] = (0, import_react15.useState)(generateId());
2978
- return id;
2979
- };
2980
-
2981
- // components/DragDropContext/index.tsx
2982
- var import_jsx_runtime6 = require("react/jsx-runtime");
2983
- var dragListenerContext = (0, import_react17.createContext)({
2984
- dragListeners: {}
2985
- });
2986
- function useDragListener(type, fn, deps = []) {
2987
- const { setDragListeners } = (0, import_react17.useContext)(dragListenerContext);
2988
- (0, import_react17.useEffect)(() => {
2989
- if (setDragListeners) {
2990
- setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
2991
- [type]: [...old[type] || [], fn]
2992
- }));
2993
- }
2994
- }, deps);
2995
- }
2996
-
2997
- // components/Drawer/index.tsx
2998
- var import_jsx_runtime7 = require("react/jsx-runtime");
2999
- var getClassName5 = get_class_name_factory_default("Drawer", styles_module_default5);
3000
- var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_module_default5);
3001
- var DrawerItemInner = ({
3002
- children,
3003
- name,
3004
- label,
3005
- dragRef,
3006
- isDragDisabled
3007
- }) => {
3008
- const CustomInner = (0, import_react18.useMemo)(
3009
- () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("default"), children: children2 })),
3010
- [children]
3011
- );
3012
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3013
- "div",
3014
- {
3015
- className: getClassNameItem({ disabled: isDragDisabled }),
3016
- ref: dragRef,
3017
- onMouseDown: (e) => e.preventDefault(),
3018
- "data-testid": dragRef ? `drawer-item:${name}` : "",
3019
- "data-puck-drawer-item": true,
3020
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("draggable"), children: [
3021
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("name"), children: label != null ? label : name }),
3022
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
3023
- ] }) }) })
3024
- }
3025
- );
3026
- };
3027
- var DrawerItemDraggable = ({
3028
- children,
3029
- name,
3030
- label,
3031
- id,
3032
- isDragDisabled
3033
- }) => {
3034
- const { ref } = useDraggableSafe({
3035
- id,
3036
- data: { type: "drawer", componentType: name },
3037
- disabled: isDragDisabled
3038
- });
3039
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassName5("draggable"), children: [
3040
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DrawerItemInner, { name, label, children }) }),
3041
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3042
- DrawerItemInner,
3043
- {
3044
- name,
3045
- label,
3046
- dragRef: ref,
3047
- isDragDisabled,
3048
- children
3049
- }
3050
- ) })
3051
- ] });
3052
- };
3053
- var DrawerItem = ({
3054
- name,
3055
- children,
3056
- id,
3057
- label,
3058
- index,
3059
- isDragDisabled
3060
- }) => {
3061
- const resolvedId = id || name;
3062
- const [dynamicId, setDynamicId] = (0, import_react18.useState)(generateId(resolvedId));
3063
- if (typeof index !== "undefined") {
3064
- console.error(
3065
- "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
3066
- );
3067
- }
3068
- useDragListener(
3069
- "dragend",
3070
- () => {
3071
- setDynamicId(generateId(resolvedId));
3072
- },
3073
- [resolvedId]
3074
- );
3075
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3076
- DrawerItemDraggable,
3077
- {
3078
- name,
3079
- label,
3080
- id: dynamicId,
3081
- isDragDisabled,
3082
- children
3083
- }
3084
- ) }, dynamicId);
3085
- };
3086
- var Drawer = ({
3087
- children,
3088
- droppableId,
3089
- direction
3090
- }) => {
3091
- if (droppableId) {
3092
- console.error(
3093
- "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
3094
- );
3095
- }
3096
- if (direction) {
3097
- console.error(
3098
- "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
3099
- );
3100
- }
3101
- const id = useSafeId();
3102
- const { ref } = useDroppableSafe({
3103
- id,
3104
- type: "void",
3105
- collisionPriority: 0
3106
- // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
3107
- });
3108
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3109
- "div",
3110
- {
3111
- className: getClassName5(),
3112
- ref,
3113
- "data-puck-dnd": id,
3114
- "data-puck-drawer": true,
3115
- children
3116
- }
3117
- );
3118
- };
3119
- Drawer.Item = DrawerItem;
3120
-
3121
- // components/DropZone/lib/use-min-empty-height.ts
3122
- init_react_import();
3123
- var import_react19 = require("react");
3124
- var useMinEmptyHeight = ({
3125
- zoneCompound,
3126
- userMinEmptyHeight,
3127
- ref
3128
- }) => {
3129
- const appStore = useAppStoreApi();
3130
- const [prevHeight, setPrevHeight] = (0, import_react19.useState)(0);
3131
- const [isAnimating, setIsAnimating] = (0, import_react19.useState)(false);
3132
- const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
3133
- var _a, _b;
3134
- return {
3135
- draggedItem: ((_a = s.draggedItem) == null ? void 0 : _a.data.zone) === zoneCompound ? s.draggedItem : null,
3136
- isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
3137
- };
3138
- });
3139
- (0, import_react19.useEffect)(() => {
3140
- if (draggedItem && ref.current) {
3141
- if (isZone) {
3142
- const rect = ref.current.getBoundingClientRect();
3143
- setPrevHeight(rect.height);
3144
- setIsAnimating(true);
3145
- return;
3146
- }
3147
- }
3148
- setPrevHeight(0);
3149
- setTimeout(() => {
3150
- var _a, _b;
3151
- const zones = appStore.getState().state.indexes.zones;
3152
- const nodes = appStore.getState().nodes;
3153
- const selectedItem = appStore.getState().selectedItem;
3154
- const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
3155
- contentIds.forEach((contentId) => {
3156
- const node = nodes.nodes[contentId];
3157
- node == null ? void 0 : node.methods.sync();
3158
- });
3159
- if (selectedItem) {
3160
- (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
3161
- }
3162
- setIsAnimating(false);
3163
- }, 400);
3164
- }, [ref.current, draggedItem, zoneCompound]);
3165
- return [prevHeight || userMinEmptyHeight, isAnimating];
3166
- };
3167
-
3168
- // lib/assign-refs.ts
3169
- init_react_import();
3170
- function assignRef(ref, node) {
3171
- if (typeof ref === "function") {
3172
- ref(node);
3173
- } else if (ref && typeof ref === "object" && "current" in ref) {
3174
- ref.current = node;
3175
- }
3176
- }
3177
- function assignRefs(refs, node) {
3178
- refs.forEach((ref) => {
3179
- assignRef(ref, node);
3180
- });
3181
- }
3182
-
3183
- // components/DropZone/lib/use-content-with-preview.ts
3184
- init_react_import();
3185
- var import_react22 = require("react");
3186
-
3187
- // lib/dnd/use-rendered-callback.ts
3188
- init_react_import();
3189
- var import_react20 = require("@dnd-kit/react");
3190
- var import_react21 = require("react");
3191
- function useRenderedCallback(callback, deps) {
3192
- const manager = (0, import_react20.useDragDropManager)();
3193
- return (0, import_react21.useCallback)(
3194
- (...args) => __async(this, null, function* () {
3195
- yield manager == null ? void 0 : manager.renderer.rendering;
3196
- return callback(...args);
3197
- }),
3198
- [...deps, manager]
3199
- );
3200
- }
3201
-
3202
- // components/DropZone/lib/use-content-with-preview.ts
3203
- var useContentIdsWithPreview = (contentIds, zoneCompound) => {
3204
- const { draggedItemId, preview, previewExists } = useContextStore(
3205
- ZoneStoreContext,
3206
- (s) => {
3207
- var _a;
3208
- return {
3209
- draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
3210
- preview: s.previewIndex[zoneCompound],
3211
- previewExists: Object.keys(s.previewIndex || {}).length > 0
3212
- };
3213
- }
3214
- );
3215
- const isDragging = useAppStore((s) => s.state.ui.isDragging);
3216
- const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react22.useState)(contentIds);
3217
- const [localPreview, setLocalPreview] = (0, import_react22.useState)(
3218
- preview
3219
- );
3220
- const updateContent = useRenderedCallback(
3221
- (contentIds2, preview2, isDragging2) => {
3222
- if (isDragging2 && !previewExists) {
3223
- return;
3224
- }
3225
- if (preview2) {
3226
- if (preview2.type === "insert") {
3227
- setContentIdsWithPreview(
3228
- insert(
3229
- contentIds2.filter((id) => id !== preview2.props.id),
3230
- preview2.index,
3231
- preview2.props.id
3232
- )
3233
- );
3234
- } else {
3235
- setContentIdsWithPreview(
3236
- insert(
3237
- contentIds2.filter((id) => id !== preview2.props.id),
3238
- preview2.index,
3239
- preview2.props.id
3240
- )
3241
- );
3242
- }
3243
- } else {
3244
- setContentIdsWithPreview(
3245
- previewExists ? contentIds2.filter((id) => id !== draggedItemId) : contentIds2
3246
- );
3247
- }
3248
- setLocalPreview(preview2);
3249
- },
3250
- [draggedItemId, previewExists]
3251
- );
3252
- (0, import_react22.useEffect)(() => {
3253
- updateContent(contentIds, preview, isDragging);
3254
- }, [contentIds, preview, isDragging]);
3255
- return [contentIdsWithPreview, localPreview];
3256
- };
3257
-
3258
- // components/DropZone/lib/use-drag-axis.ts
3259
- init_react_import();
3260
- var import_react23 = require("react");
3261
- var GRID_DRAG_AXIS = "dynamic";
3262
- var FLEX_ROW_DRAG_AXIS = "x";
3263
- var DEFAULT_DRAG_AXIS = "y";
3264
- var useDragAxis = (ref, collisionAxis) => {
3265
- const status = useAppStore((s) => s.status);
3266
- const [dragAxis, setDragAxis] = (0, import_react23.useState)(
3267
- collisionAxis || DEFAULT_DRAG_AXIS
3268
- );
3269
- const calculateDragAxis = (0, import_react23.useCallback)(() => {
3270
- if (ref.current) {
3271
- const computedStyle = window.getComputedStyle(ref.current);
3272
- if (computedStyle.display === "grid") {
3273
- setDragAxis(GRID_DRAG_AXIS);
3274
- } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
3275
- setDragAxis(FLEX_ROW_DRAG_AXIS);
3276
- } else {
3277
- setDragAxis(DEFAULT_DRAG_AXIS);
3278
- }
3279
- }
3280
- }, [ref.current]);
3281
- (0, import_react23.useEffect)(() => {
3282
- const onViewportChange = () => {
3283
- calculateDragAxis();
3284
- };
3285
- window.addEventListener("viewportchange", onViewportChange);
3286
- return () => {
3287
- window.removeEventListener("viewportchange", onViewportChange);
3288
- };
3289
- }, []);
3290
- (0, import_react23.useEffect)(calculateDragAxis, [status, collisionAxis]);
3291
- return [dragAxis, calculateDragAxis];
3292
- };
3293
-
3294
- // components/DropZone/index.tsx
3295
- var import_shallow3 = require("zustand/react/shallow");
3296
-
3297
- // components/Render/index.tsx
3298
- init_react_import();
3299
- var import_react24 = __toESM(require("react"));
3300
- var import_jsx_runtime8 = require("react/jsx-runtime");
3301
- var renderContext = import_react24.default.createContext({
3302
- config: { components: {} },
3303
- data: { root: {}, content: [] },
3304
- metadata: {}
3305
- });
3306
-
3307
- // components/DropZone/index.tsx
3308
- var import_jsx_runtime9 = require("react/jsx-runtime");
3309
- var getClassName6 = get_class_name_factory_default("DropZone", styles_module_default4);
3310
- var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
3311
- var RENDER_DEBUG = false;
3312
- var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneEdit, __spreadValues({}, props));
3313
- var DropZoneChild = ({
3314
- zoneCompound,
3315
- componentId,
3316
- preview,
3317
- index,
3318
- isEnabled,
3319
- dragAxis,
3320
- collisionAxis,
3321
- inDroppableZone
3322
- }) => {
3323
- var _a, _b;
3324
- const metadata = useAppStore((s) => s.metadata);
3325
- const ctx = (0, import_react25.useContext)(dropZoneContext);
3326
- const { depth = 1 } = ctx != null ? ctx : {};
3327
- const nodeProps = useAppStore(
3328
- (0, import_shallow3.useShallow)((s) => {
3329
- var _a2;
3330
- return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
3331
- })
3332
- );
3333
- const nodeType = useAppStore(
3334
- (s) => {
3335
- var _a2;
3336
- return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.type;
3337
- }
3338
- );
3339
- const nodeReadOnly = useAppStore(
3340
- (0, import_shallow3.useShallow)((s) => {
3341
- var _a2;
3342
- return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
3343
- })
3344
- );
3345
- const node = { type: nodeType, props: nodeProps };
3346
- const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
3347
- const componentConfig = useAppStore(
3348
- (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
3349
- );
3350
- const puckProps = {
3351
- renderDropZone: DropZoneEditPure,
3352
- isEditing: true,
3353
- dragRef: null,
3354
- metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
3355
- };
3356
- const overrides = useAppStore((s) => s.overrides);
3357
- const isLoading = useAppStore(
3358
- (s) => {
3359
- var _a2;
3360
- return ((_a2 = s.componentState[componentId]) == null ? void 0 : _a2.loadingCount) > 0;
3361
- }
3362
- );
3363
- const isSelected = useAppStore(
3364
- (s) => {
3365
- var _a2;
3366
- return ((_a2 = s.selectedItem) == null ? void 0 : _a2.props.id) === componentId || false;
3367
- }
3368
- );
3369
- let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
3370
- const renderPreview = (0, import_react25.useMemo)(
3371
- () => function Preview3() {
3372
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
3373
- },
3374
- [componentId, label, overrides]
3375
- );
3376
- const defaultsProps = (0, import_react25.useMemo)(
3377
- () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
3378
- puck: puckProps,
3379
- editMode: true
3380
- // DEPRECATED
3381
- }),
3382
- [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
3383
- );
3384
- const defaultedPropsWithSlots = useSlots(
3385
- componentConfig,
3386
- defaultsProps,
3387
- DropZoneEditPure,
3388
- (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }),
3389
- nodeReadOnly,
3390
- isLoading
3391
- );
3392
- if (!item) return;
3393
- let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
3394
- "No configuration for ",
3395
- item.type
3396
- ] });
3397
- let componentType = item.type;
3398
- const isPreview = componentId === (preview == null ? void 0 : preview.props.id) && preview.type === "insert";
3399
- if (isPreview) {
3400
- Render2 = renderPreview;
3401
- }
3402
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3403
- DraggableComponent,
3404
- {
3405
- id: componentId,
3406
- componentType,
3407
- zoneCompound,
3408
- depth: depth + 1,
3409
- index,
3410
- isLoading,
3411
- isSelected,
3412
- label,
3413
- isEnabled,
3414
- autoDragAxis: dragAxis,
3415
- userDragAxis: collisionAxis,
3416
- inDroppableZone,
3417
- children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3418
- Render2,
3419
- __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
3420
- puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
3421
- dragRef
3422
- })
3423
- })
3424
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Render2, __spreadValues({}, defaultedPropsWithSlots)) })
3425
- }
3426
- );
3427
- };
3428
- var DropZoneChildMemo = (0, import_react25.memo)(DropZoneChild);
3429
- var DropZoneEdit = (0, import_react25.forwardRef)(
3430
- function DropZoneEditInternal({
3431
- zone,
3432
- allow,
3433
- disallow,
3434
- style,
3435
- className,
3436
- minEmptyHeight: userMinEmptyHeight = 128,
3437
- collisionAxis
3438
- }, userRef) {
3439
- const ctx = (0, import_react25.useContext)(dropZoneContext);
3440
- const {
3441
- // These all need setting via context
3442
- areaId,
3443
- depth = 0,
3444
- registerLocalZone,
3445
- unregisterLocalZone
3446
- } = ctx != null ? ctx : {};
3447
- const path = useAppStore(
3448
- (0, import_shallow3.useShallow)((s) => {
3449
- var _a;
3450
- return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
3451
- })
3452
- );
3453
- let zoneCompound = rootDroppableId;
3454
- if (areaId) {
3455
- if (zone !== rootDroppableId) {
3456
- zoneCompound = `${areaId}:${zone}`;
3457
- }
3458
- }
3459
- const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
3460
- const {
3461
- isDeepestZone,
3462
- inNextDeepestArea,
3463
- draggedComponentType,
3464
- userIsDragging
3465
- } = useContextStore(ZoneStoreContext, (s) => {
3466
- var _a, _b;
3467
- return {
3468
- isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
3469
- inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
3470
- draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
3471
- userIsDragging: !!s.draggedItem
3472
- };
3473
- });
3474
- const zoneContentIds = useAppStore(
3475
- (0, import_shallow3.useShallow)((s) => {
3476
- var _a;
3477
- return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
3478
- })
3479
- );
3480
- const zoneType = useAppStore(
3481
- (0, import_shallow3.useShallow)((s) => {
3482
- var _a;
3483
- return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
3484
- })
3485
- );
3486
- (0, import_react25.useEffect)(() => {
3487
- if (!zoneType || zoneType === "dropzone") {
3488
- if (zoneCompound !== rootDroppableId) {
3489
- console.warn(
3490
- "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"
3491
- );
3492
- }
3493
- if (ctx == null ? void 0 : ctx.registerZone) {
3494
- ctx == null ? void 0 : ctx.registerZone(zoneCompound);
3495
- }
3496
- return () => {
3497
- if (ctx == null ? void 0 : ctx.unregisterZone) {
3498
- ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
3499
- }
3500
- };
3501
- }
3502
- }, [zoneType]);
3503
- const contentIds = (0, import_react25.useMemo)(() => {
3504
- return zoneContentIds || [];
3505
- }, [zoneContentIds]);
3506
- const ref = (0, import_react25.useRef)(null);
3507
- const acceptsTarget = (0, import_react25.useCallback)(
3508
- (componentType) => {
3509
- if (!componentType) {
3510
- return true;
3511
- }
3512
- if (disallow) {
3513
- const defaultedAllow = allow || [];
3514
- const filteredDisallow = (disallow || []).filter(
3515
- (item) => defaultedAllow.indexOf(item) === -1
3516
- );
3517
- if (filteredDisallow.indexOf(componentType) !== -1) {
3518
- return false;
3519
- }
3520
- } else if (allow) {
3521
- if (allow.indexOf(componentType) === -1) {
3522
- return false;
3523
- }
3524
- }
3525
- return true;
3526
- },
3527
- [allow, disallow]
3528
- );
3529
- (0, import_react25.useEffect)(() => {
3530
- if (registerLocalZone) {
3531
- registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
3532
- }
3533
- return () => {
3534
- if (unregisterLocalZone) {
3535
- unregisterLocalZone(zoneCompound);
3536
- }
3537
- };
3538
- }, [draggedComponentType, zoneCompound]);
3539
- const hoveringOverArea = inNextDeepestArea || isRootZone;
3540
- let isEnabled = true;
3541
- if (userIsDragging) {
3542
- isEnabled = isDeepestZone;
3543
- }
3544
- if (isEnabled) {
3545
- isEnabled = acceptsTarget(draggedComponentType);
3546
- }
3547
- const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
3548
- contentIds,
3549
- zoneCompound
3550
- );
3551
- const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
3552
- const droppableConfig = {
3553
- id: zoneCompound,
3554
- collisionPriority: isEnabled ? depth : 0,
3555
- disabled: !isDropEnabled,
3556
- collisionDetector: pointerIntersection,
3557
- type: "dropzone",
3558
- data: {
3559
- areaId,
3560
- depth,
3561
- isDroppableTarget: acceptsTarget(draggedComponentType),
3562
- path: path || []
3563
- }
3564
- };
3565
- const { ref: dropRef } = useDroppableSafe(droppableConfig);
3566
- const isAreaSelected = useAppStore(
3567
- (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
3568
- );
3569
- const [dragAxis] = useDragAxis(ref, collisionAxis);
3570
- const [minEmptyHeight, isAnimating] = useMinEmptyHeight({
3571
- zoneCompound,
3572
- userMinEmptyHeight,
3573
- ref
3574
- });
3575
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3576
- "div",
3577
- {
3578
- className: `${getClassName6({
3579
- isRootZone,
3580
- userIsDragging,
3581
- hoveringOverArea,
3582
- isEnabled,
3583
- isAreaSelected,
3584
- hasChildren: contentIds.length > 0,
3585
- isAnimating
3586
- })}${className ? ` ${className}` : ""}`,
3587
- ref: (node) => {
3588
- assignRefs([ref, dropRef, userRef], node);
3589
- },
3590
- "data-testid": `dropzone:${zoneCompound}`,
3591
- "data-puck-dropzone": zoneCompound,
3592
- style: __spreadProps(__spreadValues({}, style), {
3593
- "--min-empty-height": `${minEmptyHeight}px`,
3594
- backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
3595
- }),
3596
- children: contentIdsWithPreview.map((componentId, i) => {
3597
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3598
- DropZoneChildMemo,
3599
- {
3600
- zoneCompound,
3601
- componentId,
3602
- preview,
3603
- dragAxis,
3604
- isEnabled,
3605
- index: i,
3606
- collisionAxis,
3607
- inDroppableZone: acceptsTarget(draggedComponentType)
3608
- },
3609
- componentId
3610
- );
3611
- })
3612
- }
3613
- );
3614
- }
3615
- );
3616
- var DropZoneRenderItem = ({
3617
- config,
3618
- item,
3619
- metadata
3620
- }) => {
3621
- const Component = config.components[item.type];
3622
- const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
3623
- const nextContextValue = (0, import_react25.useMemo)(
3624
- () => ({
3625
- areaId: props.id,
3626
- depth: 1
3627
- }),
3628
- [props]
3629
- );
3630
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3631
- Component.render,
3632
- __spreadProps(__spreadValues({}, props), {
3633
- puck: __spreadProps(__spreadValues({}, props.puck), {
3634
- renderDropZone: DropZoneRenderPure,
3635
- metadata: __spreadValues(__spreadValues({}, metadata), Component.metadata)
3636
- })
3637
- })
3638
- ) }, props.id);
3639
- };
3640
- var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneRender, __spreadValues({}, props));
3641
- var DropZoneRender = (0, import_react25.forwardRef)(
3642
- function DropZoneRenderInternal({ className, style, zone }, ref) {
3643
- const ctx = (0, import_react25.useContext)(dropZoneContext);
3644
- const { areaId = "root" } = ctx || {};
3645
- const { config, data, metadata } = (0, import_react25.useContext)(renderContext);
3646
- let zoneCompound = rootDroppableId;
3647
- let content = (data == null ? void 0 : data.content) || [];
3648
- (0, import_react25.useEffect)(() => {
3649
- if (!content) {
3650
- if (ctx == null ? void 0 : ctx.registerZone) {
3651
- ctx == null ? void 0 : ctx.registerZone(zoneCompound);
3652
- }
3653
- return () => {
3654
- if (ctx == null ? void 0 : ctx.unregisterZone) {
3655
- ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
3656
- }
3657
- };
3658
- }
3659
- }, [content]);
3660
- if (!data || !config) {
3661
- return null;
3662
- }
3663
- if (areaId !== rootAreaId && zone !== rootZone) {
3664
- zoneCompound = `${areaId}:${zone}`;
3665
- content = setupZone(data, zoneCompound).zones[zoneCompound];
3666
- }
3667
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style, ref, children: content.map((item) => {
3668
- const Component = config.components[item.type];
3669
- if (Component) {
3670
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3671
- DropZoneRenderItem,
3672
- {
3673
- config,
3674
- item,
3675
- metadata
3676
- },
3677
- item.props.id
3678
- );
3679
- }
3680
- return null;
3681
- }) });
3682
- }
3683
- );
3684
- var DropZone = (0, import_react25.forwardRef)(
3685
- function DropZone2(props, ref) {
3686
- const ctx = (0, import_react25.useContext)(dropZoneContext);
3687
- if ((ctx == null ? void 0 : ctx.mode) === "edit") {
3688
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
3689
- }
3690
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
3691
- }
3692
- );
3693
-
3694
- // components/SlotRender/index.tsx
3695
- var import_jsx_runtime10 = require("react/jsx-runtime");
3696
- var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SlotRender, __spreadValues({}, props));
3697
- var ContextSlotRender = ({
3698
- componentId,
3699
- zone
3700
- }) => {
3701
- const config = useAppStore((s) => s.config);
3702
- const metadata = useAppStore((s) => s.metadata);
3703
- const slotContent = useAppStore(
3704
- (s) => {
3705
- var _a, _b;
3706
- return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
3707
- }
3708
- );
3709
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3710
- SlotRenderPure,
3711
- {
3712
- content: slotContent,
3713
- zone,
3714
- config,
3715
- metadata
3716
- }
3717
- );
3718
- };
3719
- var Item = ({
3720
- config,
3721
- item,
3722
- metadata
3723
- }) => {
3724
- const Component = config.components[item.type];
3725
- const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
3726
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3727
- Component.render,
3728
- __spreadProps(__spreadValues({}, props), {
3729
- puck: __spreadProps(__spreadValues({}, props.puck), {
3730
- renderDropZone: DropZoneRenderPure,
3731
- metadata: metadata || {}
3732
- })
3733
- })
3734
- );
3735
- };
3736
- var SlotRender = (0, import_react26.forwardRef)(
3737
- function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
3738
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style, ref, children: content.map((item) => {
3739
- if (!config.components[item.type]) {
3740
- return null;
3741
- }
3742
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3743
- Item,
3744
- {
3745
- config,
3746
- item,
3747
- metadata
3748
- },
3749
- item.props.id
3750
- );
3751
- }) });
3752
- }
3753
- );
3754
-
3755
- // components/ServerRender/index.tsx
3756
- var import_jsx_runtime11 = require("react/jsx-runtime");
3757
- function DropZoneRender2({
3758
- zone,
3759
- data,
3760
- areaId = "root",
3761
- config,
3762
- metadata = {}
3763
- }) {
3764
- let zoneCompound = rootDroppableId;
3765
- let content = (data == null ? void 0 : data.content) || [];
3766
- if (!data || !config) {
3767
- return null;
3768
- }
3769
- if (areaId !== rootAreaId && zone !== rootZone) {
3770
- zoneCompound = `${areaId}:${zone}`;
3771
- content = setupZone(data, zoneCompound).zones[zoneCompound];
3772
- }
3773
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: content.map((item) => {
3774
- const Component = config.components[item.type];
3775
- const props = __spreadProps(__spreadValues({}, item.props), {
3776
- puck: {
3777
- renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3778
- DropZoneRender2,
3779
- {
3780
- zone: zone2,
3781
- data,
3782
- areaId: item.props.id,
3783
- config,
3784
- metadata
3785
- }
3786
- ),
3787
- metadata
3788
- }
3789
- });
3790
- const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
3791
- if (Component) {
3792
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component.render, __spreadValues({}, propsWithSlots), item.props.id);
3793
- }
3794
- return null;
3795
- }) });
3796
- }
3797
- function Render({
3798
- config,
3799
- data,
3800
- metadata = {}
3801
- }) {
3802
- var _a;
3803
- const rootProps = data.root.props || data.root;
3804
- const title = rootProps.title || "";
3805
- const props = __spreadProps(__spreadValues({}, rootProps), {
3806
- puck: {
3807
- renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3808
- DropZoneRender2,
3809
- {
3810
- zone,
3811
- data,
3812
- config,
3813
- metadata
3814
- }
3815
- ),
3816
- isEditing: false,
3817
- dragRef: null,
3818
- metadata
3819
- },
3820
- title,
3821
- editMode: false,
3822
- id: "puck-root"
3823
- });
3824
- const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
3825
- if ((_a = config.root) == null ? void 0 : _a.render) {
3826
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3827
- DropZoneRender2,
3828
- {
3829
- config,
3830
- data,
3831
- zone: rootZone,
3832
- metadata
3833
- }
3834
- ) }));
3835
- }
3836
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3837
- DropZoneRender2,
3838
- {
3839
- config,
3840
- data,
3841
- zone: rootZone,
3842
- metadata
3843
- }
3844
- );
3845
- }
3846
-
3847
- // lib/resolve-all-data.ts
3848
- init_react_import();
3849
-
3850
- // lib/data/default-data.ts
3851
- init_react_import();
3852
- var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
3853
- root: data.root || {},
3854
- content: data.content || []
3855
- });
3856
-
3857
- // lib/data/to-component.ts
3858
- init_react_import();
3859
- var toComponent = (item) => {
3860
- return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
3861
- props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
3862
- type: "root"
3863
- });
3864
- };
3865
-
3866
- // lib/resolve-all-data.ts
3867
- function resolveAllData(_0, _1) {
3868
- return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
3869
- var _a;
3870
- const defaultedData = defaultData(data);
3871
- const resolveNode = (_node) => __async(this, null, function* () {
3872
- const node = toComponent(_node);
3873
- onResolveStart == null ? void 0 : onResolveStart(node);
3874
- const resolved = (yield resolveComponentData(
3875
- node,
3876
- config,
3877
- metadata,
3878
- () => {
3879
- },
3880
- () => {
3881
- },
3882
- "force",
3883
- false
3884
- )).node;
3885
- const resolvedDeep = yield mapSlotsAsync(
3886
- resolved,
3887
- processContent,
3888
- false
3889
- );
3890
- onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
3891
- return resolvedDeep;
3892
- });
3893
- const processContent = (content) => __async(this, null, function* () {
3894
- return Promise.all(content.map(resolveNode));
3895
- });
3896
- const processZones = () => __async(this, null, function* () {
3897
- var _a2;
3898
- const zones = (_a2 = data.zones) != null ? _a2 : {};
3899
- Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
3900
- zones[zoneKey] = yield Promise.all(content.map(resolveNode));
3901
- }));
3902
- return zones;
3903
- });
3904
- const dynamic = {
3905
- root: yield resolveNode(defaultedData.root),
3906
- content: yield processContent(defaultedData.content),
3907
- zones: yield processZones()
3908
- };
3909
- Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
3910
- const content = defaultedData.zones[zoneKey];
3911
- dynamic.zones[zoneKey] = yield processContent(content);
3912
- }), {});
3913
- return dynamic;
3914
- });
3915
- }
3916
-
3917
- // lib/transform-props.ts
3918
- init_react_import();
3919
- function transformProps(data, propTransforms) {
3920
- const mapItem = (item) => {
3921
- if (propTransforms[item.type]) {
3922
- return __spreadProps(__spreadValues({}, item), {
3923
- props: propTransforms[item.type](item.props)
3924
- });
3925
- }
3926
- return item;
3927
- };
3928
- const defaultedData = defaultData(data);
3929
- const rootProps = defaultedData.root.props || defaultedData.root;
3930
- let newRoot = __spreadValues({}, defaultedData.root);
3931
- if (propTransforms["root"]) {
3932
- if (defaultedData.root.props) {
3933
- newRoot.props = propTransforms["root"](rootProps);
3934
- } else {
3935
- newRoot = propTransforms["root"](rootProps);
3936
- }
3937
- }
3938
- const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
3939
- root: newRoot,
3940
- content: defaultedData.content.map(mapItem),
3941
- zones: Object.keys(data.zones || {}).reduce(
3942
- (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
3943
- [zoneKey]: data.zones[zoneKey].map(mapItem)
3944
- }),
3945
- {}
3946
- )
3947
- });
3948
- return afterPropTransforms;
871
+ ];
872
+ function migrate(data, config) {
873
+ return migrations == null ? void 0 : migrations.reduce(
874
+ (acc, migration) => migration(acc, config),
875
+ data
876
+ );
3949
877
  }
3950
878
  // Annotate the CommonJS export names for ESM import in node:
3951
879
  0 && (module.exports = {
3952
880
  Render,
881
+ migrate,
3953
882
  resolveAllData,
3954
- transformProps
883
+ transformProps,
884
+ walkTree
3955
885
  });
3956
- /*! Bundled license information:
3957
-
3958
- classnames/index.js:
3959
- (*!
3960
- Copyright (c) 2018 Jed Watson.
3961
- Licensed under the MIT License (MIT), see
3962
- http://jedwatson.github.io/classnames
3963
- *)
3964
-
3965
- lucide-react/dist/esm/shared/src/utils.js:
3966
- (**
3967
- * @license lucide-react v0.468.0 - ISC
3968
- *
3969
- * This source code is licensed under the ISC license.
3970
- * See the LICENSE file in the root directory of this source tree.
3971
- *)
3972
-
3973
- lucide-react/dist/esm/defaultAttributes.js:
3974
- (**
3975
- * @license lucide-react v0.468.0 - ISC
3976
- *
3977
- * This source code is licensed under the ISC license.
3978
- * See the LICENSE file in the root directory of this source tree.
3979
- *)
3980
-
3981
- lucide-react/dist/esm/Icon.js:
3982
- (**
3983
- * @license lucide-react v0.468.0 - ISC
3984
- *
3985
- * This source code is licensed under the ISC license.
3986
- * See the LICENSE file in the root directory of this source tree.
3987
- *)
3988
-
3989
- lucide-react/dist/esm/createLucideIcon.js:
3990
- (**
3991
- * @license lucide-react v0.468.0 - ISC
3992
- *
3993
- * This source code is licensed under the ISC license.
3994
- * See the LICENSE file in the root directory of this source tree.
3995
- *)
3996
-
3997
- lucide-react/dist/esm/icons/copy.js:
3998
- (**
3999
- * @license lucide-react v0.468.0 - ISC
4000
- *
4001
- * This source code is licensed under the ISC license.
4002
- * See the LICENSE file in the root directory of this source tree.
4003
- *)
4004
-
4005
- lucide-react/dist/esm/icons/corner-left-up.js:
4006
- (**
4007
- * @license lucide-react v0.468.0 - ISC
4008
- *
4009
- * This source code is licensed under the ISC license.
4010
- * See the LICENSE file in the root directory of this source tree.
4011
- *)
4012
-
4013
- lucide-react/dist/esm/icons/trash.js:
4014
- (**
4015
- * @license lucide-react v0.468.0 - ISC
4016
- *
4017
- * This source code is licensed under the ISC license.
4018
- * See the LICENSE file in the root directory of this source tree.
4019
- *)
4020
-
4021
- lucide-react/dist/esm/lucide-react.js:
4022
- (**
4023
- * @license lucide-react v0.468.0 - ISC
4024
- *
4025
- * This source code is licensed under the ISC license.
4026
- * See the LICENSE file in the root directory of this source tree.
4027
- *)
4028
- */