@measured/puck 0.19.0-canary.896a6279 → 0.19.0-canary.8e1d7223

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