@measured/puck 0.19.0-canary.896a6279 → 0.19.0-canary.8e1d7223
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-HGAPIQP5.mjs +949 -0
- package/dist/index.css +187 -181
- package/dist/index.d.mts +21 -10
- package/dist/index.d.ts +21 -10
- package/dist/index.js +1722 -1464
- package/dist/index.mjs +6501 -1905
- package/dist/rsc.d.mts +2 -2
- package/dist/rsc.d.ts +2 -2
- package/dist/rsc.js +631 -3726
- package/dist/rsc.mjs +7 -103
- package/dist/{resolve-all-data-Cs8PfTrg.d.mts → walk-tree-DBd3aQ_5.d.mts} +68 -35
- package/dist/{resolve-all-data-Cs8PfTrg.d.ts → walk-tree-DBd3aQ_5.d.ts} +68 -35
- package/package.json +13 -8
- 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,98 +64,26 @@ var __async = (__this, __arguments, generator) => {
|
|
89
64
|
});
|
90
65
|
};
|
91
66
|
|
92
|
-
// ../tsup-config/react-import.js
|
93
|
-
var import_react;
|
94
|
-
var init_react_import = __esm({
|
95
|
-
"../tsup-config/react-import.js"() {
|
96
|
-
"use strict";
|
97
|
-
import_react = __toESM(require("react"));
|
98
|
-
}
|
99
|
-
});
|
100
|
-
|
101
|
-
// ../../node_modules/classnames/index.js
|
102
|
-
var require_classnames = __commonJS({
|
103
|
-
"../../node_modules/classnames/index.js"(exports2, module2) {
|
104
|
-
"use strict";
|
105
|
-
init_react_import();
|
106
|
-
(function() {
|
107
|
-
"use strict";
|
108
|
-
var hasOwn = {}.hasOwnProperty;
|
109
|
-
function classNames() {
|
110
|
-
var classes = "";
|
111
|
-
for (var i = 0; i < arguments.length; i++) {
|
112
|
-
var arg = arguments[i];
|
113
|
-
if (arg) {
|
114
|
-
classes = appendClass(classes, parseValue(arg));
|
115
|
-
}
|
116
|
-
}
|
117
|
-
return classes;
|
118
|
-
}
|
119
|
-
function parseValue(arg) {
|
120
|
-
if (typeof arg === "string" || typeof arg === "number") {
|
121
|
-
return arg;
|
122
|
-
}
|
123
|
-
if (typeof arg !== "object") {
|
124
|
-
return "";
|
125
|
-
}
|
126
|
-
if (Array.isArray(arg)) {
|
127
|
-
return classNames.apply(null, arg);
|
128
|
-
}
|
129
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
130
|
-
return arg.toString();
|
131
|
-
}
|
132
|
-
var classes = "";
|
133
|
-
for (var key in arg) {
|
134
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
135
|
-
classes = appendClass(classes, key);
|
136
|
-
}
|
137
|
-
}
|
138
|
-
return classes;
|
139
|
-
}
|
140
|
-
function appendClass(value, newClass) {
|
141
|
-
if (!newClass) {
|
142
|
-
return value;
|
143
|
-
}
|
144
|
-
if (value) {
|
145
|
-
return value + " " + newClass;
|
146
|
-
}
|
147
|
-
return value + newClass;
|
148
|
-
}
|
149
|
-
if (typeof module2 !== "undefined" && module2.exports) {
|
150
|
-
classNames.default = classNames;
|
151
|
-
module2.exports = classNames;
|
152
|
-
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
153
|
-
define("classnames", [], function() {
|
154
|
-
return classNames;
|
155
|
-
});
|
156
|
-
} else {
|
157
|
-
window.classNames = classNames;
|
158
|
-
}
|
159
|
-
})();
|
160
|
-
}
|
161
|
-
});
|
162
|
-
|
163
67
|
// rsc.tsx
|
164
68
|
var rsc_exports = {};
|
165
69
|
__export(rsc_exports, {
|
166
70
|
Render: () => Render,
|
71
|
+
migrate: () => migrate,
|
167
72
|
resolveAllData: () => resolveAllData,
|
168
|
-
transformProps: () => transformProps
|
73
|
+
transformProps: () => transformProps,
|
74
|
+
walkTree: () => walkTree
|
169
75
|
});
|
170
76
|
module.exports = __toCommonJS(rsc_exports);
|
171
|
-
init_react_import();
|
172
77
|
|
173
|
-
//
|
174
|
-
|
78
|
+
// ../tsup-config/react-import.js
|
79
|
+
var import_react = __toESM(require("react"));
|
175
80
|
|
176
81
|
// lib/root-droppable-id.ts
|
177
|
-
init_react_import();
|
178
82
|
var rootAreaId = "root";
|
179
83
|
var rootZone = "default-zone";
|
180
84
|
var rootDroppableId = `${rootAreaId}:${rootZone}`;
|
181
85
|
|
182
86
|
// lib/data/setup-zone.ts
|
183
|
-
init_react_import();
|
184
87
|
var setupZone = (data, zoneKey) => {
|
185
88
|
if (zoneKey === rootDroppableId) {
|
186
89
|
return data;
|
@@ -193,274 +96,579 @@ var setupZone = (data, zoneKey) => {
|
|
193
96
|
};
|
194
97
|
|
195
98
|
// lib/use-slots.tsx
|
196
|
-
init_react_import();
|
197
99
|
var import_react2 = require("react");
|
198
|
-
function useSlots(config, props, 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
100
|
|
228
|
-
//
|
229
|
-
|
230
|
-
var
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
101
|
+
// lib/data/map-slots.ts
|
102
|
+
var isPromise = (v) => !!v && typeof v.then === "function";
|
103
|
+
var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
|
104
|
+
var containsPromise = (arr) => arr.some(isPromise);
|
105
|
+
var walkField = ({
|
106
|
+
value,
|
107
|
+
fields,
|
108
|
+
map,
|
109
|
+
propKey = "",
|
110
|
+
propPath = "",
|
111
|
+
id = "",
|
112
|
+
config,
|
113
|
+
recurseSlots = false
|
114
|
+
}) => {
|
115
|
+
var _a, _b, _c;
|
116
|
+
if (((_a = fields[propKey]) == null ? void 0 : _a.type) === "slot") {
|
117
|
+
const content = value || [];
|
118
|
+
const mappedContent = recurseSlots ? content.map((el) => {
|
119
|
+
var _a2;
|
120
|
+
const componentConfig = config.components[el.type];
|
121
|
+
if (!componentConfig) {
|
122
|
+
throw new Error(`Could not find component config for ${el.type}`);
|
123
|
+
}
|
124
|
+
const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
|
125
|
+
return walkField({
|
126
|
+
value: el,
|
127
|
+
fields: fields2,
|
128
|
+
map,
|
129
|
+
id: el.props.id,
|
130
|
+
config,
|
131
|
+
recurseSlots
|
132
|
+
});
|
133
|
+
}) : content;
|
134
|
+
if (containsPromise(mappedContent)) {
|
135
|
+
return Promise.all(mappedContent);
|
136
|
+
}
|
137
|
+
return map(mappedContent, id, propPath, fields[propKey], propPath);
|
138
|
+
}
|
139
|
+
if (value && typeof value === "object") {
|
140
|
+
if (Array.isArray(value)) {
|
141
|
+
const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
|
142
|
+
if (!arrayFields) return value;
|
143
|
+
const newValue = value.map(
|
144
|
+
(el, idx) => walkField({
|
145
|
+
value: el,
|
146
|
+
fields: arrayFields,
|
147
|
+
map,
|
148
|
+
propKey,
|
149
|
+
propPath: `${propPath}[${idx}]`,
|
150
|
+
id,
|
151
|
+
config,
|
152
|
+
recurseSlots
|
153
|
+
})
|
154
|
+
);
|
155
|
+
if (containsPromise(newValue)) {
|
156
|
+
return Promise.all(newValue);
|
157
|
+
}
|
158
|
+
return newValue;
|
159
|
+
} else if ("$$typeof" in value) {
|
160
|
+
return value;
|
161
|
+
} else {
|
162
|
+
const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
|
163
|
+
return walkObject({
|
164
|
+
value,
|
165
|
+
fields: objectFields,
|
166
|
+
map,
|
167
|
+
id,
|
168
|
+
getPropPath: (k) => `${propPath}.${k}`,
|
169
|
+
config,
|
170
|
+
recurseSlots
|
171
|
+
});
|
252
172
|
}
|
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
173
|
}
|
174
|
+
return value;
|
260
175
|
};
|
261
|
-
var
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
176
|
+
var walkObject = ({
|
177
|
+
value,
|
178
|
+
fields,
|
179
|
+
map,
|
180
|
+
id,
|
181
|
+
getPropPath,
|
182
|
+
config,
|
183
|
+
recurseSlots
|
184
|
+
}) => {
|
185
|
+
const newProps = Object.entries(value).map(([k, v]) => {
|
186
|
+
const opts = {
|
187
|
+
value: v,
|
188
|
+
fields,
|
189
|
+
map,
|
190
|
+
propKey: k,
|
191
|
+
propPath: getPropPath(k),
|
192
|
+
id,
|
193
|
+
config,
|
194
|
+
recurseSlots
|
195
|
+
};
|
196
|
+
const newValue = walkField(opts);
|
197
|
+
if (isPromise(newValue)) {
|
198
|
+
return newValue.then((resolvedValue) => ({
|
199
|
+
[k]: resolvedValue
|
200
|
+
}));
|
201
|
+
}
|
202
|
+
return {
|
203
|
+
[k]: newValue
|
204
|
+
};
|
205
|
+
}, {});
|
206
|
+
if (containsPromise(newProps)) {
|
207
|
+
return Promise.all(newProps).then(flatten);
|
208
|
+
}
|
209
|
+
return flatten(newProps);
|
210
|
+
};
|
211
|
+
function mapSlots(item, map, config, recurseSlots = false) {
|
212
|
+
var _a, _b, _c, _d;
|
213
|
+
const itemType = "type" in item ? item.type : "root";
|
214
|
+
const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
|
215
|
+
const newProps = walkObject({
|
216
|
+
value: (_b = item.props) != null ? _b : {},
|
217
|
+
fields: (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {},
|
218
|
+
map,
|
219
|
+
id: item.props ? (_d = item.props.id) != null ? _d : "root" : "root",
|
220
|
+
getPropPath: (k) => k,
|
221
|
+
config,
|
222
|
+
recurseSlots
|
223
|
+
});
|
224
|
+
if (isPromise(newProps)) {
|
225
|
+
return newProps.then((resolvedProps) => __spreadProps(__spreadValues({}, item), {
|
226
|
+
props: resolvedProps
|
227
|
+
}));
|
228
|
+
}
|
229
|
+
return __spreadProps(__spreadValues({}, item), {
|
230
|
+
props: newProps
|
231
|
+
});
|
232
|
+
}
|
269
233
|
|
270
|
-
//
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
234
|
+
// lib/use-slots.tsx
|
235
|
+
function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
|
236
|
+
const slotProps = (0, import_react2.useMemo)(() => {
|
237
|
+
const mapped = mapSlots(
|
238
|
+
item,
|
239
|
+
(content, _parentId, propName, field, propPath) => {
|
240
|
+
const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
|
241
|
+
const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
|
242
|
+
const render = isReadOnly ? renderSlotRender : renderSlotEdit;
|
243
|
+
const Slot = (dzProps) => render(__spreadProps(__spreadValues({
|
244
|
+
allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
|
245
|
+
disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
|
246
|
+
}, dzProps), {
|
247
|
+
zone: propName,
|
248
|
+
content
|
249
|
+
}));
|
250
|
+
return Slot;
|
251
|
+
},
|
252
|
+
config
|
253
|
+
).props;
|
254
|
+
return mapped;
|
255
|
+
}, [config, item, readOnly, forceReadOnly]);
|
256
|
+
const mergedProps = (0, import_react2.useMemo)(
|
257
|
+
() => __spreadValues(__spreadValues({}, item.props), slotProps),
|
258
|
+
[item.props, slotProps]
|
259
|
+
);
|
260
|
+
return mergedProps;
|
261
|
+
}
|
276
262
|
|
277
|
-
//
|
278
|
-
init_react_import();
|
263
|
+
// components/SlotRender/server.tsx
|
279
264
|
var import_react3 = require("react");
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
265
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
266
|
+
var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRender, __spreadValues({}, props));
|
267
|
+
var Item = ({
|
268
|
+
config,
|
269
|
+
item,
|
270
|
+
metadata
|
271
|
+
}) => {
|
272
|
+
const Component = config.components[item.type];
|
273
|
+
const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
|
274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
275
|
+
Component.render,
|
276
|
+
__spreadProps(__spreadValues({}, props), {
|
277
|
+
puck: __spreadProps(__spreadValues({}, props.puck), {
|
278
|
+
renderDropZone: DropZoneRender,
|
279
|
+
metadata: metadata || {}
|
280
|
+
})
|
281
|
+
})
|
282
|
+
);
|
293
283
|
};
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
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
|
-
);
|
284
|
+
var SlotRender = (0, import_react3.forwardRef)(
|
285
|
+
function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
|
286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, ref, children: content.map((item) => {
|
287
|
+
if (!config.components[item.type]) {
|
288
|
+
return null;
|
289
|
+
}
|
290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
291
|
+
Item,
|
292
|
+
{
|
293
|
+
config,
|
294
|
+
item,
|
295
|
+
metadata
|
296
|
+
},
|
297
|
+
item.props.id
|
298
|
+
);
|
299
|
+
}) });
|
331
300
|
}
|
332
301
|
);
|
333
302
|
|
334
|
-
//
|
335
|
-
var
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
303
|
+
// components/ServerRender/index.tsx
|
304
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
305
|
+
function DropZoneRender({
|
306
|
+
zone,
|
307
|
+
data,
|
308
|
+
areaId = "root",
|
309
|
+
config,
|
310
|
+
metadata = {}
|
311
|
+
}) {
|
312
|
+
let zoneCompound = rootDroppableId;
|
313
|
+
let content = (data == null ? void 0 : data.content) || [];
|
314
|
+
if (!data || !config) {
|
315
|
+
return null;
|
316
|
+
}
|
317
|
+
if (areaId !== rootAreaId && zone !== rootZone) {
|
318
|
+
zoneCompound = `${areaId}:${zone}`;
|
319
|
+
content = setupZone(data, zoneCompound).zones[zoneCompound];
|
320
|
+
}
|
321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content.map((item) => {
|
322
|
+
const Component = config.components[item.type];
|
323
|
+
const props = __spreadProps(__spreadValues({}, item.props), {
|
324
|
+
puck: {
|
325
|
+
renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
326
|
+
DropZoneRender,
|
327
|
+
{
|
328
|
+
zone: zone2,
|
329
|
+
data,
|
330
|
+
areaId: item.props.id,
|
331
|
+
config,
|
332
|
+
metadata
|
333
|
+
}
|
334
|
+
),
|
335
|
+
metadata,
|
336
|
+
dragRef: null,
|
337
|
+
isEditing: false
|
338
|
+
}
|
339
|
+
});
|
340
|
+
const renderItem = __spreadProps(__spreadValues({}, item), { props });
|
341
|
+
const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
|
342
|
+
if (Component) {
|
343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
|
344
|
+
}
|
345
|
+
return null;
|
346
|
+
}) });
|
347
|
+
}
|
348
|
+
function Render({
|
349
|
+
config,
|
350
|
+
data,
|
351
|
+
metadata = {}
|
352
|
+
}) {
|
353
|
+
var _a;
|
354
|
+
const rootProps = "props" in data.root ? data.root.props : data.root;
|
355
|
+
const title = rootProps.title || "";
|
356
|
+
const props = __spreadProps(__spreadValues({}, rootProps), {
|
357
|
+
puck: {
|
358
|
+
renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
359
|
+
DropZoneRender,
|
360
|
+
{
|
361
|
+
zone,
|
362
|
+
data,
|
363
|
+
config,
|
364
|
+
metadata
|
365
|
+
}
|
366
|
+
),
|
367
|
+
isEditing: false,
|
368
|
+
dragRef: null,
|
369
|
+
metadata
|
370
|
+
},
|
371
|
+
title,
|
372
|
+
editMode: false,
|
373
|
+
id: "puck-root"
|
374
|
+
});
|
375
|
+
const propsWithSlots = useSlots(config, { type: "root", props }, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
|
376
|
+
if ((_a = config.root) == null ? void 0 : _a.render) {
|
377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
378
|
+
DropZoneRender,
|
379
|
+
{
|
380
|
+
config,
|
381
|
+
data,
|
382
|
+
zone: rootZone,
|
383
|
+
metadata
|
384
|
+
}
|
385
|
+
) }));
|
386
|
+
}
|
387
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
388
|
+
DropZoneRender,
|
389
|
+
{
|
390
|
+
config,
|
391
|
+
data,
|
392
|
+
zone: rootZone,
|
393
|
+
metadata
|
344
394
|
}
|
345
395
|
);
|
346
|
-
|
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();
|
396
|
+
}
|
386
397
|
|
387
|
-
// lib/
|
388
|
-
|
389
|
-
var
|
390
|
-
|
391
|
-
|
392
|
-
};
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
|
398
|
+
// lib/get-changed.ts
|
399
|
+
var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
|
400
|
+
var getChanged = (newItem, oldItem) => {
|
401
|
+
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
|
402
|
+
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
|
403
|
+
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
|
404
|
+
return __spreadProps(__spreadValues({}, acc), {
|
405
|
+
[item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
|
406
|
+
});
|
407
|
+
}, {}) : {};
|
398
408
|
};
|
399
409
|
|
400
|
-
// lib/
|
401
|
-
var
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
410
|
+
// lib/resolve-component-data.ts
|
411
|
+
var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
|
412
|
+
var cache = { lastChange: {} };
|
413
|
+
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
|
414
|
+
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
|
415
|
+
const resolvedItem = __spreadValues({}, item);
|
416
|
+
const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
|
417
|
+
const id = "id" in item.props ? item.props.id : "root";
|
418
|
+
if (shouldRunResolver) {
|
419
|
+
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
|
420
|
+
if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
|
421
|
+
return { node: resolved, didChange: false };
|
422
|
+
}
|
423
|
+
const changed = getChanged(item, oldItem);
|
424
|
+
if (onResolveStart) {
|
425
|
+
onResolveStart(item);
|
426
|
+
}
|
427
|
+
const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
|
428
|
+
changed,
|
429
|
+
lastData: oldItem,
|
430
|
+
metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
|
431
|
+
trigger
|
432
|
+
});
|
433
|
+
resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
|
434
|
+
if (Object.keys(readOnly).length) {
|
435
|
+
resolvedItem.readOnly = readOnly;
|
436
|
+
}
|
437
|
+
}
|
438
|
+
let itemWithResolvedChildren = yield mapSlots(
|
439
|
+
resolvedItem,
|
440
|
+
(content) => __async(void 0, null, function* () {
|
441
|
+
return yield Promise.all(
|
442
|
+
content.map(
|
412
443
|
(childItem) => __async(void 0, null, function* () {
|
413
|
-
return
|
444
|
+
return (yield resolveComponentData(
|
445
|
+
childItem,
|
446
|
+
config,
|
447
|
+
metadata,
|
448
|
+
onResolveStart,
|
449
|
+
onResolveEnd,
|
450
|
+
trigger
|
451
|
+
)).node;
|
414
452
|
})
|
415
|
-
)
|
416
|
-
|
417
|
-
}
|
453
|
+
)
|
454
|
+
);
|
455
|
+
}),
|
456
|
+
config
|
457
|
+
);
|
458
|
+
if (shouldRunResolver && onResolveEnd) {
|
459
|
+
onResolveEnd(resolvedItem);
|
418
460
|
}
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
461
|
+
cache.lastChange[id] = {
|
462
|
+
item,
|
463
|
+
resolved: itemWithResolvedChildren
|
464
|
+
};
|
465
|
+
return {
|
466
|
+
node: itemWithResolvedChildren,
|
467
|
+
didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
|
468
|
+
};
|
469
|
+
});
|
423
470
|
|
424
|
-
// lib/
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
}
|
430
|
-
if (zoneCompound && zoneCompound.indexOf(":") > -1) {
|
431
|
-
return zoneCompound.split(":");
|
432
|
-
}
|
433
|
-
return [rootDroppableId, zoneCompound];
|
434
|
-
};
|
471
|
+
// lib/data/default-data.ts
|
472
|
+
var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
|
473
|
+
root: data.root || {},
|
474
|
+
content: data.content || []
|
475
|
+
});
|
435
476
|
|
436
|
-
// lib/data/
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
cb(path, zoneCompound, content);
|
442
|
-
}
|
477
|
+
// lib/data/to-component.ts
|
478
|
+
var toComponent = (item) => {
|
479
|
+
return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
|
480
|
+
props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
|
481
|
+
type: "root"
|
443
482
|
});
|
444
|
-
}
|
483
|
+
};
|
445
484
|
|
446
|
-
// lib/data
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
485
|
+
// lib/resolve-all-data.ts
|
486
|
+
function resolveAllData(_0, _1) {
|
487
|
+
return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
|
488
|
+
var _a;
|
489
|
+
const defaultedData = defaultData(data);
|
490
|
+
const resolveNode = (_node) => __async(this, null, function* () {
|
491
|
+
const node = toComponent(_node);
|
492
|
+
onResolveStart == null ? void 0 : onResolveStart(node);
|
493
|
+
const resolved = (yield resolveComponentData(
|
494
|
+
node,
|
495
|
+
config,
|
496
|
+
metadata,
|
497
|
+
() => {
|
498
|
+
},
|
499
|
+
() => {
|
500
|
+
},
|
501
|
+
"force"
|
502
|
+
)).node;
|
503
|
+
const resolvedDeep = yield mapSlots(
|
504
|
+
resolved,
|
505
|
+
processContent,
|
506
|
+
config
|
507
|
+
);
|
508
|
+
onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
|
509
|
+
return resolvedDeep;
|
510
|
+
});
|
511
|
+
const processContent = (content) => __async(this, null, function* () {
|
512
|
+
return Promise.all(content.map(resolveNode));
|
513
|
+
});
|
514
|
+
const processZones = () => __async(this, null, function* () {
|
515
|
+
var _a2;
|
516
|
+
const zones = (_a2 = data.zones) != null ? _a2 : {};
|
517
|
+
Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
|
518
|
+
zones[zoneKey] = yield Promise.all(content.map(resolveNode));
|
519
|
+
}));
|
520
|
+
return zones;
|
521
|
+
});
|
522
|
+
const dynamic = {
|
523
|
+
root: yield resolveNode(defaultedData.root),
|
524
|
+
content: yield processContent(defaultedData.content),
|
525
|
+
zones: yield processZones()
|
526
|
+
};
|
527
|
+
Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
|
528
|
+
const content = defaultedData.zones[zoneKey];
|
529
|
+
dynamic.zones[zoneKey] = yield processContent(content);
|
530
|
+
}), {});
|
531
|
+
return dynamic;
|
532
|
+
});
|
533
|
+
}
|
534
|
+
|
535
|
+
// lib/data/walk-tree.ts
|
536
|
+
function walkTree(data, config, callbackFn) {
|
537
|
+
var _a, _b;
|
538
|
+
const walkItem = (item) => {
|
539
|
+
return mapSlots(
|
540
|
+
item,
|
541
|
+
(content, parentId, propName) => {
|
542
|
+
var _a2;
|
543
|
+
return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
|
544
|
+
},
|
545
|
+
config,
|
546
|
+
true
|
547
|
+
);
|
548
|
+
};
|
549
|
+
if ("props" in data) {
|
550
|
+
return walkItem(data);
|
551
|
+
}
|
552
|
+
const _data = data;
|
553
|
+
const zones = (_a = _data.zones) != null ? _a : {};
|
554
|
+
const mappedContent = _data.content.map(walkItem);
|
555
|
+
return {
|
556
|
+
root: walkItem(_data.root),
|
557
|
+
content: (_b = callbackFn(mappedContent, {
|
558
|
+
parentId: "root",
|
559
|
+
propName: "default-zone"
|
560
|
+
})) != null ? _b : mappedContent,
|
561
|
+
zones: Object.keys(zones).reduce(
|
562
|
+
(acc, zoneCompound) => __spreadProps(__spreadValues({}, acc), {
|
563
|
+
[zoneCompound]: zones[zoneCompound].map(walkItem)
|
564
|
+
}),
|
565
|
+
{}
|
458
566
|
)
|
567
|
+
};
|
568
|
+
}
|
569
|
+
|
570
|
+
// lib/transform-props.ts
|
571
|
+
function transformProps(data, propTransforms, config = { components: {} }) {
|
572
|
+
const mapItem = (item) => {
|
573
|
+
if (propTransforms[item.type]) {
|
574
|
+
return __spreadProps(__spreadValues({}, item), {
|
575
|
+
props: __spreadValues({
|
576
|
+
id: item.props.id
|
577
|
+
}, propTransforms[item.type](item.props))
|
578
|
+
});
|
579
|
+
}
|
580
|
+
return item;
|
581
|
+
};
|
582
|
+
const defaultedData = defaultData(data);
|
583
|
+
const rootProps = defaultedData.root.props || defaultedData.root;
|
584
|
+
let newRoot = __spreadValues({}, defaultedData.root);
|
585
|
+
if (propTransforms["root"]) {
|
586
|
+
newRoot.props = propTransforms["root"](rootProps);
|
587
|
+
}
|
588
|
+
const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
|
589
|
+
const updatedData = walkTree(
|
590
|
+
dataWithUpdatedRoot,
|
591
|
+
config,
|
592
|
+
(content) => content.map(mapItem)
|
593
|
+
);
|
594
|
+
if (!defaultedData.root.props) {
|
595
|
+
updatedData.root = updatedData.root.props;
|
596
|
+
}
|
597
|
+
return updatedData;
|
598
|
+
}
|
599
|
+
|
600
|
+
// components/ViewportControls/default-viewports.ts
|
601
|
+
var defaultViewports = [
|
602
|
+
{ width: 360, height: "auto", icon: "Smartphone", label: "Small" },
|
603
|
+
{ width: 768, height: "auto", icon: "Tablet", label: "Medium" },
|
604
|
+
{ width: 1280, height: "auto", icon: "Monitor", label: "Large" }
|
605
|
+
];
|
606
|
+
|
607
|
+
// store/default-app-state.ts
|
608
|
+
var defaultAppState = {
|
609
|
+
data: { content: [], root: {}, zones: {} },
|
610
|
+
ui: {
|
611
|
+
leftSideBarVisible: true,
|
612
|
+
rightSideBarVisible: true,
|
613
|
+
arrayState: {},
|
614
|
+
itemSelector: null,
|
615
|
+
componentList: {},
|
616
|
+
isDragging: false,
|
617
|
+
previewMode: "edit",
|
618
|
+
viewports: {
|
619
|
+
current: {
|
620
|
+
width: defaultViewports[0].width,
|
621
|
+
height: defaultViewports[0].height || "auto"
|
622
|
+
},
|
623
|
+
options: [],
|
624
|
+
controlsVisible: true
|
625
|
+
},
|
626
|
+
field: { focus: null }
|
627
|
+
},
|
628
|
+
indexes: {
|
629
|
+
nodes: {},
|
630
|
+
zones: {}
|
631
|
+
}
|
632
|
+
};
|
633
|
+
|
634
|
+
// lib/get-zone-id.ts
|
635
|
+
var getZoneId = (zoneCompound) => {
|
636
|
+
if (!zoneCompound) {
|
637
|
+
return [];
|
638
|
+
}
|
639
|
+
if (zoneCompound && zoneCompound.indexOf(":") > -1) {
|
640
|
+
return zoneCompound.split(":");
|
641
|
+
}
|
642
|
+
return [rootDroppableId, zoneCompound];
|
643
|
+
};
|
644
|
+
|
645
|
+
// lib/data/for-related-zones.ts
|
646
|
+
function forRelatedZones(item, data, cb, path = []) {
|
647
|
+
Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
|
648
|
+
const [parentId] = getZoneId(zoneCompound);
|
649
|
+
if (parentId === item.props.id) {
|
650
|
+
cb(path, zoneCompound, content);
|
651
|
+
}
|
459
652
|
});
|
653
|
+
}
|
654
|
+
|
655
|
+
// lib/data/flatten-node.ts
|
656
|
+
var import_flat = require("flat");
|
657
|
+
|
658
|
+
// lib/data/strip-slots.ts
|
659
|
+
var stripSlots = (data, config) => {
|
660
|
+
return mapSlots(data, () => null, config);
|
460
661
|
};
|
461
662
|
|
462
|
-
// lib/data/
|
463
|
-
|
663
|
+
// lib/data/flatten-node.ts
|
664
|
+
var flattenNode = (node, config) => {
|
665
|
+
return __spreadProps(__spreadValues({}, node), {
|
666
|
+
props: (0, import_flat.flatten)(stripSlots(node, config).props)
|
667
|
+
});
|
668
|
+
};
|
669
|
+
|
670
|
+
// lib/data/walk-app-state.ts
|
671
|
+
function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
|
464
672
|
var _a;
|
465
673
|
let newZones = {};
|
466
674
|
const newZoneIndex = {};
|
@@ -501,10 +709,9 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
|
|
501
709
|
const mappedItem = mapNodeOrSkip(item, path, index);
|
502
710
|
if (!mappedItem) return item;
|
503
711
|
const id = mappedItem.props.id;
|
504
|
-
const newProps = __spreadValues({},
|
505
|
-
forEachSlot(
|
712
|
+
const newProps = __spreadProps(__spreadValues({}, mapSlots(
|
506
713
|
mappedItem,
|
507
|
-
(parentId2, slotId
|
714
|
+
(content, parentId2, slotId) => {
|
508
715
|
const zoneCompound = `${parentId2}:${slotId}`;
|
509
716
|
const [_2, newContent2] = processContent(
|
510
717
|
path,
|
@@ -513,18 +720,19 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
|
|
513
720
|
"slot",
|
514
721
|
parentId2
|
515
722
|
);
|
516
|
-
|
723
|
+
return newContent2;
|
517
724
|
},
|
518
|
-
|
519
|
-
|
520
|
-
|
725
|
+
config
|
726
|
+
).props), {
|
727
|
+
id
|
728
|
+
});
|
521
729
|
processRelatedZones(item, id, path);
|
522
730
|
const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
|
523
731
|
const thisZoneCompound = path[path.length - 1];
|
524
732
|
const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
|
525
733
|
newNodeIndex[id] = {
|
526
734
|
data: newItem,
|
527
|
-
flatData:
|
735
|
+
flatData: flattenNode(newItem, config),
|
528
736
|
path,
|
529
737
|
parentId,
|
530
738
|
zone
|
@@ -583,3392 +791,89 @@ function walkTree(state, config, mapContent = (content) => content, mapNodeOrSki
|
|
583
791
|
});
|
584
792
|
}
|
585
793
|
|
586
|
-
//
|
587
|
-
var
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
794
|
+
// lib/migrate.ts
|
795
|
+
var migrations = [
|
796
|
+
// Migrate root to root.props
|
797
|
+
(data) => {
|
798
|
+
const rootProps = data.root.props || data.root;
|
799
|
+
if (Object.keys(data.root).length > 0 && !data.root.props) {
|
800
|
+
console.warn(
|
801
|
+
"Migration applied: Root props moved from `root` to `root.props`."
|
802
|
+
);
|
803
|
+
return __spreadProps(__spreadValues({}, data), {
|
804
|
+
root: {
|
805
|
+
props: __spreadValues({}, rootProps)
|
806
|
+
}
|
807
|
+
});
|
592
808
|
}
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
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
|
-
);
|
809
|
+
return data;
|
810
|
+
},
|
811
|
+
// Migrate zones to slots
|
812
|
+
(data, config) => {
|
813
|
+
var _a;
|
814
|
+
if (!config) return data;
|
815
|
+
console.log("Migrating DropZones to slots...");
|
816
|
+
const updatedItems = {};
|
817
|
+
const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
|
818
|
+
const { indexes } = walkAppState(appState, config);
|
819
|
+
const deletedCompounds = [];
|
820
|
+
walkAppState(appState, config, (content, zoneCompound, zoneType) => {
|
821
|
+
var _a2, _b;
|
822
|
+
if (zoneType === "dropzone") {
|
823
|
+
const [id, slotName] = zoneCompound.split(":");
|
824
|
+
const nodeData = indexes.nodes[id].data;
|
825
|
+
const componentType = nodeData.type;
|
826
|
+
const configForComponent = id === "root" ? config.root : config.components[componentType];
|
827
|
+
if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
|
828
|
+
updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
|
829
|
+
props: __spreadProps(__spreadValues({}, nodeData.props), {
|
830
|
+
[slotName]: content
|
831
|
+
})
|
832
|
+
});
|
833
|
+
deletedCompounds.push(zoneCompound);
|
834
|
+
}
|
835
|
+
return content;
|
646
836
|
}
|
647
837
|
return content;
|
648
|
-
}
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
return
|
838
|
+
});
|
839
|
+
const updated = walkAppState(
|
840
|
+
appState,
|
841
|
+
config,
|
842
|
+
(content) => content,
|
843
|
+
(item) => {
|
844
|
+
var _a2;
|
845
|
+
return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
|
656
846
|
}
|
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
847
|
);
|
673
|
-
|
674
|
-
|
675
|
-
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
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
|
-
})
|
848
|
+
deletedCompounds.forEach((zoneCompound) => {
|
849
|
+
var _a2;
|
850
|
+
const [_, propName] = zoneCompound.split(":");
|
851
|
+
console.log(
|
852
|
+
`\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
|
853
|
+
);
|
854
|
+
(_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
|
920
855
|
});
|
856
|
+
Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
|
857
|
+
const [_, propName] = zoneCompound.split(":");
|
858
|
+
throw new Error(
|
859
|
+
`Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
|
860
|
+
);
|
861
|
+
});
|
862
|
+
delete updated.data.zones;
|
863
|
+
return updated.data;
|
921
864
|
}
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
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;
|
3124
|
-
|
3125
|
-
// components/DropZone/lib/use-min-empty-height.ts
|
3126
|
-
init_react_import();
|
3127
|
-
var import_react19 = require("react");
|
3128
|
-
var useMinEmptyHeight = ({
|
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
|
-
};
|
3171
|
-
|
3172
|
-
// lib/assign-refs.ts
|
3173
|
-
init_react_import();
|
3174
|
-
function assignRef(ref, node) {
|
3175
|
-
if (typeof ref === "function") {
|
3176
|
-
ref(node);
|
3177
|
-
} else if (ref && typeof ref === "object" && "current" in ref) {
|
3178
|
-
ref.current = node;
|
3179
|
-
}
|
3180
|
-
}
|
3181
|
-
function assignRefs(refs, node) {
|
3182
|
-
refs.forEach((ref) => {
|
3183
|
-
assignRef(ref, node);
|
3184
|
-
});
|
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];
|
3260
|
-
};
|
3261
|
-
|
3262
|
-
// components/DropZone/lib/use-drag-axis.ts
|
3263
|
-
init_react_import();
|
3264
|
-
var import_react23 = require("react");
|
3265
|
-
var GRID_DRAG_AXIS = "dynamic";
|
3266
|
-
var FLEX_ROW_DRAG_AXIS = "x";
|
3267
|
-
var DEFAULT_DRAG_AXIS = "y";
|
3268
|
-
var useDragAxis = (ref, collisionAxis) => {
|
3269
|
-
const status = useAppStore((s) => s.status);
|
3270
|
-
const [dragAxis, setDragAxis] = (0, import_react23.useState)(
|
3271
|
-
collisionAxis || DEFAULT_DRAG_AXIS
|
3272
|
-
);
|
3273
|
-
const calculateDragAxis = (0, import_react23.useCallback)(() => {
|
3274
|
-
if (ref.current) {
|
3275
|
-
const computedStyle = window.getComputedStyle(ref.current);
|
3276
|
-
if (computedStyle.display === "grid") {
|
3277
|
-
setDragAxis(GRID_DRAG_AXIS);
|
3278
|
-
} else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
|
3279
|
-
setDragAxis(FLEX_ROW_DRAG_AXIS);
|
3280
|
-
} else {
|
3281
|
-
setDragAxis(DEFAULT_DRAG_AXIS);
|
3282
|
-
}
|
3283
|
-
}
|
3284
|
-
}, [ref.current]);
|
3285
|
-
(0, import_react23.useEffect)(() => {
|
3286
|
-
const onViewportChange = () => {
|
3287
|
-
calculateDragAxis();
|
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
|
-
});
|
3310
|
-
|
3311
|
-
// components/DropZone/index.tsx
|
3312
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
3313
|
-
var getClassName6 = get_class_name_factory_default("DropZone", styles_module_default4);
|
3314
|
-
var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
|
3315
|
-
var RENDER_DEBUG = false;
|
3316
|
-
var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneEdit, __spreadValues({}, props));
|
3317
|
-
var DropZoneChild = ({
|
3318
|
-
zoneCompound,
|
3319
|
-
componentId,
|
3320
|
-
preview,
|
3321
|
-
index,
|
3322
|
-
isEnabled,
|
3323
|
-
dragAxis,
|
3324
|
-
collisionAxis,
|
3325
|
-
inDroppableZone
|
3326
|
-
}) => {
|
3327
|
-
var _a, _b;
|
3328
|
-
const metadata = useAppStore((s) => s.metadata);
|
3329
|
-
const puckProps = {
|
3330
|
-
renderDropZone: DropZoneEditPure,
|
3331
|
-
isEditing: true,
|
3332
|
-
dragRef: null,
|
3333
|
-
metadata
|
3334
|
-
};
|
3335
|
-
const ctx = (0, import_react25.useContext)(dropZoneContext);
|
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;
|
3341
|
-
})
|
3342
|
-
);
|
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
|
-
};
|
3423
|
-
var DropZoneChildMemo = (0, import_react25.memo)(DropZoneChild);
|
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)(
|
3678
|
-
function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
|
3679
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style, ref, children: content.map((item) => {
|
3680
|
-
const Component = config.components[item.type];
|
3681
|
-
if (Component) {
|
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
|
-
);
|
3699
|
-
}
|
3700
|
-
return null;
|
3701
|
-
}) });
|
3702
|
-
}
|
3703
|
-
);
|
3704
|
-
|
3705
|
-
// components/ServerRender/index.tsx
|
3706
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
3707
|
-
function DropZoneRender2({
|
3708
|
-
zone,
|
3709
|
-
data,
|
3710
|
-
areaId = "root",
|
3711
|
-
config,
|
3712
|
-
metadata = {}
|
3713
|
-
}) {
|
3714
|
-
let zoneCompound = rootDroppableId;
|
3715
|
-
let content = (data == null ? void 0 : data.content) || [];
|
3716
|
-
if (!data || !config) {
|
3717
|
-
return null;
|
3718
|
-
}
|
3719
|
-
if (areaId !== rootAreaId && zone !== rootZone) {
|
3720
|
-
zoneCompound = `${areaId}:${zone}`;
|
3721
|
-
content = setupZone(data, zoneCompound).zones[zoneCompound];
|
3722
|
-
}
|
3723
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: content.map((item) => {
|
3724
|
-
const Component = config.components[item.type];
|
3725
|
-
const props = __spreadProps(__spreadValues({}, item.props), {
|
3726
|
-
puck: {
|
3727
|
-
renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
3728
|
-
DropZoneRender2,
|
3729
|
-
{
|
3730
|
-
zone: zone2,
|
3731
|
-
data,
|
3732
|
-
areaId: item.props.id,
|
3733
|
-
config,
|
3734
|
-
metadata
|
3735
|
-
}
|
3736
|
-
),
|
3737
|
-
metadata
|
3738
|
-
}
|
3739
|
-
});
|
3740
|
-
const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
|
3741
|
-
if (Component) {
|
3742
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component.render, __spreadValues({}, propsWithSlots), item.props.id);
|
3743
|
-
}
|
3744
|
-
return null;
|
3745
|
-
}) });
|
3746
|
-
}
|
3747
|
-
function Render({
|
3748
|
-
config,
|
3749
|
-
data,
|
3750
|
-
metadata = {}
|
3751
|
-
}) {
|
3752
|
-
var _a;
|
3753
|
-
const rootProps = data.root.props || data.root;
|
3754
|
-
const title = rootProps.title || "";
|
3755
|
-
const props = __spreadProps(__spreadValues({}, rootProps), {
|
3756
|
-
puck: {
|
3757
|
-
renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
3758
|
-
DropZoneRender2,
|
3759
|
-
{
|
3760
|
-
zone,
|
3761
|
-
data,
|
3762
|
-
config,
|
3763
|
-
metadata
|
3764
|
-
}
|
3765
|
-
),
|
3766
|
-
isEditing: false,
|
3767
|
-
dragRef: null,
|
3768
|
-
metadata
|
3769
|
-
},
|
3770
|
-
title,
|
3771
|
-
editMode: false,
|
3772
|
-
id: "puck-root"
|
3773
|
-
});
|
3774
|
-
const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
|
3775
|
-
if ((_a = config.root) == null ? void 0 : _a.render) {
|
3776
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
3777
|
-
DropZoneRender2,
|
3778
|
-
{
|
3779
|
-
config,
|
3780
|
-
data,
|
3781
|
-
zone: rootZone,
|
3782
|
-
metadata
|
3783
|
-
}
|
3784
|
-
) }));
|
3785
|
-
}
|
3786
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
3787
|
-
DropZoneRender2,
|
3788
|
-
{
|
3789
|
-
config,
|
3790
|
-
data,
|
3791
|
-
zone: rootZone,
|
3792
|
-
metadata
|
3793
|
-
}
|
3794
|
-
);
|
3795
|
-
}
|
3796
|
-
|
3797
|
-
// lib/resolve-all-data.ts
|
3798
|
-
init_react_import();
|
3799
|
-
|
3800
|
-
// lib/data/default-data.ts
|
3801
|
-
init_react_import();
|
3802
|
-
var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
|
3803
|
-
root: data.root || {},
|
3804
|
-
content: data.content || []
|
3805
|
-
});
|
3806
|
-
|
3807
|
-
// lib/data/to-component.ts
|
3808
|
-
init_react_import();
|
3809
|
-
var toComponent = (item) => {
|
3810
|
-
return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
|
3811
|
-
props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
|
3812
|
-
type: "root"
|
3813
|
-
});
|
3814
|
-
};
|
3815
|
-
|
3816
|
-
// lib/resolve-all-data.ts
|
3817
|
-
function resolveAllData(_0, _1) {
|
3818
|
-
return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
|
3819
|
-
var _a;
|
3820
|
-
const defaultedData = defaultData(data);
|
3821
|
-
const resolveNode = (_node) => __async(this, null, function* () {
|
3822
|
-
const node = toComponent(_node);
|
3823
|
-
onResolveStart == null ? void 0 : onResolveStart(node);
|
3824
|
-
const resolved = (yield resolveComponentData(
|
3825
|
-
node,
|
3826
|
-
config,
|
3827
|
-
metadata,
|
3828
|
-
() => {
|
3829
|
-
},
|
3830
|
-
() => {
|
3831
|
-
},
|
3832
|
-
"force",
|
3833
|
-
false
|
3834
|
-
)).node;
|
3835
|
-
const resolvedDeep = yield mapSlots(resolved, processContent, false);
|
3836
|
-
onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
|
3837
|
-
return resolvedDeep;
|
3838
|
-
});
|
3839
|
-
const processContent = (content) => __async(this, null, function* () {
|
3840
|
-
return Promise.all(content.map(resolveNode));
|
3841
|
-
});
|
3842
|
-
const processZones = () => __async(this, null, function* () {
|
3843
|
-
var _a2;
|
3844
|
-
const zones = (_a2 = data.zones) != null ? _a2 : {};
|
3845
|
-
Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
|
3846
|
-
zones[zoneKey] = yield Promise.all(content.map(resolveNode));
|
3847
|
-
}));
|
3848
|
-
return zones;
|
3849
|
-
});
|
3850
|
-
const dynamic = {
|
3851
|
-
root: yield resolveNode(defaultedData.root),
|
3852
|
-
content: yield processContent(defaultedData.content),
|
3853
|
-
zones: yield processZones()
|
3854
|
-
};
|
3855
|
-
Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
|
3856
|
-
const content = defaultedData.zones[zoneKey];
|
3857
|
-
dynamic.zones[zoneKey] = yield processContent(content);
|
3858
|
-
}), {});
|
3859
|
-
return dynamic;
|
3860
|
-
});
|
3861
|
-
}
|
3862
|
-
|
3863
|
-
// lib/transform-props.ts
|
3864
|
-
init_react_import();
|
3865
|
-
function transformProps(data, propTransforms) {
|
3866
|
-
const mapItem = (item) => {
|
3867
|
-
if (propTransforms[item.type]) {
|
3868
|
-
return __spreadProps(__spreadValues({}, item), {
|
3869
|
-
props: propTransforms[item.type](item.props)
|
3870
|
-
});
|
3871
|
-
}
|
3872
|
-
return item;
|
3873
|
-
};
|
3874
|
-
const defaultedData = defaultData(data);
|
3875
|
-
const rootProps = defaultedData.root.props || defaultedData.root;
|
3876
|
-
let newRoot = __spreadValues({}, defaultedData.root);
|
3877
|
-
if (propTransforms["root"]) {
|
3878
|
-
if (defaultedData.root.props) {
|
3879
|
-
newRoot.props = propTransforms["root"](rootProps);
|
3880
|
-
} else {
|
3881
|
-
newRoot = propTransforms["root"](rootProps);
|
3882
|
-
}
|
3883
|
-
}
|
3884
|
-
const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
|
3885
|
-
root: newRoot,
|
3886
|
-
content: defaultedData.content.map(mapItem),
|
3887
|
-
zones: Object.keys(data.zones || {}).reduce(
|
3888
|
-
(acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
|
3889
|
-
[zoneKey]: data.zones[zoneKey].map(mapItem)
|
3890
|
-
}),
|
3891
|
-
{}
|
3892
|
-
)
|
3893
|
-
});
|
3894
|
-
return afterPropTransforms;
|
865
|
+
];
|
866
|
+
function migrate(data, config) {
|
867
|
+
return migrations == null ? void 0 : migrations.reduce(
|
868
|
+
(acc, migration) => migration(acc, config),
|
869
|
+
data
|
870
|
+
);
|
3895
871
|
}
|
3896
872
|
// Annotate the CommonJS export names for ESM import in node:
|
3897
873
|
0 && (module.exports = {
|
3898
874
|
Render,
|
875
|
+
migrate,
|
3899
876
|
resolveAllData,
|
3900
|
-
transformProps
|
877
|
+
transformProps,
|
878
|
+
walkTree
|
3901
879
|
});
|
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
|
-
*/
|