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