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