@measured/puck 0.21.0-canary.bd7b613d → 0.21.0-canary.c0db75c1

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.
@@ -868,32 +868,27 @@ var walkField = ({
868
868
  config,
869
869
  recurseSlots = false
870
870
  }) => {
871
- var _a, _b, _c, _d;
871
+ var _a, _b, _c;
872
872
  const fieldType = (_a = fields[propKey]) == null ? void 0 : _a.type;
873
873
  const map = mappers[fieldType];
874
874
  if (map && fieldType === "slot") {
875
875
  const content = value || [];
876
- let mappedContent = content;
877
- if (recurseSlots) {
878
- for (let i = 0; i < content.length; i++) {
879
- const el = content[i];
880
- const componentConfig = config.components[el.type];
881
- if (!componentConfig) {
882
- continue;
883
- }
884
- const fields2 = (_b = componentConfig.fields) != null ? _b : {};
885
- mappedContent.push(
886
- walkField({
887
- value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
888
- fields: fields2,
889
- mappers,
890
- id: el.props.id,
891
- config,
892
- recurseSlots
893
- })
894
- );
876
+ const mappedContent = recurseSlots ? content.map((el) => {
877
+ var _a2;
878
+ const componentConfig = config.components[el.type];
879
+ if (!componentConfig) {
880
+ throw new Error(`Could not find component config for ${el.type}`);
895
881
  }
896
- }
882
+ const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
883
+ return walkField({
884
+ value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
885
+ fields: fields2,
886
+ mappers,
887
+ id: el.props.id,
888
+ config,
889
+ recurseSlots
890
+ });
891
+ }) : content;
897
892
  if (containsPromise(mappedContent)) {
898
893
  return Promise.all(mappedContent);
899
894
  }
@@ -915,7 +910,7 @@ var walkField = ({
915
910
  }
916
911
  if (value && typeof value === "object") {
917
912
  if (Array.isArray(value)) {
918
- const arrayFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "array" ? fields[propKey].arrayFields : null;
913
+ const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
919
914
  if (!arrayFields) return value;
920
915
  const newValue = value.map(
921
916
  (el, idx) => walkField({
@@ -936,7 +931,7 @@ var walkField = ({
936
931
  } else if ("$$typeof" in value) {
937
932
  return value;
938
933
  } else {
939
- const objectFields = ((_d = fields[propKey]) == null ? void 0 : _d.type) === "object" ? fields[propKey].objectFields : fields;
934
+ const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
940
935
  return walkObject({
941
936
  value,
942
937
  fields: objectFields,
@@ -1823,6 +1818,10 @@ var monitorHotkeys = (doc) => {
1823
1818
  useHotkeyStore.getState().reset();
1824
1819
  }
1825
1820
  };
1821
+ const onBlur = () => {
1822
+ useHotkeyStore.getState().reset();
1823
+ };
1824
+ window.addEventListener("blur", onBlur);
1826
1825
  doc.addEventListener("keydown", onKeyDown);
1827
1826
  doc.addEventListener("keyup", onKeyUp);
1828
1827
  doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -1830,6 +1829,7 @@ var monitorHotkeys = (doc) => {
1830
1829
  doc.removeEventListener("keydown", onKeyDown);
1831
1830
  doc.removeEventListener("keyup", onKeyUp);
1832
1831
  doc.removeEventListener("visibilitychange", onVisibilityChanged);
1832
+ window.removeEventListener("blur", onBlur);
1833
1833
  };
1834
1834
  };
1835
1835
  var useMonitorHotkeys = () => {
@@ -2045,29 +2045,37 @@ var getChanged = (newItem, oldItem) => {
2045
2045
 
2046
2046
  // store/slices/permissions.ts
2047
2047
  var createPermissionsSlice = (set, get) => {
2048
- const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
2048
+ const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
2049
2049
  const { state, permissions, config } = get();
2050
2050
  const { cache: cache2, globalPermissions } = permissions;
2051
- const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
2052
- var _a, _b, _c;
2051
+ const resolvePermissionsForItem = (item2, force2 = false) => __async(null, null, function* () {
2052
+ var _a, _b;
2053
2053
  const { config: config2, state: appState, setComponentLoading } = get();
2054
+ const itemCache = cache2[item2.props.id];
2055
+ const nodes = appState.indexes.nodes;
2056
+ const parentId = (_a = nodes[item2.props.id]) == null ? void 0 : _a.parentId;
2057
+ const parentNode = parentId ? nodes[parentId] : null;
2058
+ const parentData = (_b = parentNode == null ? void 0 : parentNode.data) != null ? _b : null;
2054
2059
  const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
2055
2060
  if (!componentConfig) {
2056
2061
  return;
2057
2062
  }
2058
2063
  const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
2059
2064
  if (componentConfig.resolvePermissions) {
2060
- const changed = getChanged(item2, (_a = cache2[item2.props.id]) == null ? void 0 : _a.lastData);
2061
- if (Object.values(changed).some((el) => el === true) || force2) {
2065
+ const changed = getChanged(item2, itemCache == null ? void 0 : itemCache.lastData);
2066
+ const propsChanged = Object.values(changed).some((el) => el === true);
2067
+ const parentChanged = (itemCache == null ? void 0 : itemCache.lastParentId) !== parentId;
2068
+ if (propsChanged || parentChanged || force2) {
2062
2069
  const clearTimeout2 = setComponentLoading(item2.props.id, true, 50);
2063
2070
  const resolvedPermissions = yield componentConfig.resolvePermissions(
2064
2071
  item2,
2065
2072
  {
2066
2073
  changed,
2067
- lastPermissions: ((_b = cache2[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
2074
+ lastPermissions: (itemCache == null ? void 0 : itemCache.lastPermissions) || null,
2068
2075
  permissions: initialPermissions,
2069
2076
  appState: makeStatePublic(appState),
2070
- lastData: ((_c = cache2[item2.props.id]) == null ? void 0 : _c.lastData) || null
2077
+ lastData: (itemCache == null ? void 0 : itemCache.lastData) || null,
2078
+ parent: parentData
2071
2079
  }
2072
2080
  );
2073
2081
  const latest = get().permissions;
@@ -2075,6 +2083,7 @@ var createPermissionsSlice = (set, get) => {
2075
2083
  permissions: __spreadProps(__spreadValues({}, latest), {
2076
2084
  cache: __spreadProps(__spreadValues({}, latest.cache), {
2077
2085
  [item2.props.id]: {
2086
+ lastParentId: parentId,
2078
2087
  lastData: item2,
2079
2088
  lastPermissions: resolvedPermissions
2080
2089
  }
@@ -2088,9 +2097,9 @@ var createPermissionsSlice = (set, get) => {
2088
2097
  }
2089
2098
  }
2090
2099
  });
2091
- const resolveDataForRoot = (force2 = false) => {
2100
+ const resolvePermissionsForRoot = (force2 = false) => {
2092
2101
  const { state: appState } = get();
2093
- resolveDataForItem(
2102
+ resolvePermissionsForItem(
2094
2103
  // Shim the root data in by conforming to component data shape
2095
2104
  {
2096
2105
  type: "root",
@@ -2101,16 +2110,16 @@ var createPermissionsSlice = (set, get) => {
2101
2110
  };
2102
2111
  const { item, type, root } = params;
2103
2112
  if (item) {
2104
- yield resolveDataForItem(item, force);
2113
+ yield resolvePermissionsForItem(item, force);
2105
2114
  } else if (type) {
2106
- flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
2107
- yield resolveDataForItem(item2, force);
2115
+ flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
2116
+ yield resolvePermissionsForItem(item2, force);
2108
2117
  }));
2109
2118
  } else if (root) {
2110
- resolveDataForRoot(force);
2119
+ resolvePermissionsForRoot(force);
2111
2120
  } else {
2112
- flattenData(state, config).map((item2) => __async(void 0, null, function* () {
2113
- yield resolveDataForItem(item2, force);
2121
+ flattenData(state, config).map((item2) => __async(null, null, function* () {
2122
+ yield resolvePermissionsForItem(item2, force);
2114
2123
  }));
2115
2124
  }
2116
2125
  });
@@ -2190,7 +2199,7 @@ var createFieldsSlice = (_set, _get) => {
2190
2199
  };
2191
2200
  var useRegisterFieldsSlice = (appStore, id) => {
2192
2201
  const resolveFields = (0, import_react7.useCallback)(
2193
- (reset) => __async(void 0, null, function* () {
2202
+ (reset) => __async(null, null, function* () {
2194
2203
  var _a, _b;
2195
2204
  const { fields, lastResolvedData } = appStore.getState().fields;
2196
2205
  const metadata = appStore.getState().metadata;
@@ -2261,7 +2270,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
2261
2270
  init_react_import();
2262
2271
  var import_fast_equals2 = require("fast-equals");
2263
2272
  var cache = { lastChange: {} };
2264
- var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
2273
+ var resolveComponentData = (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
2265
2274
  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
2266
2275
  const resolvedItem = __spreadValues({}, item);
2267
2276
  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
@@ -2289,11 +2298,11 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
2289
2298
  let itemWithResolvedChildren = yield mapFields(
2290
2299
  resolvedItem,
2291
2300
  {
2292
- slot: (_02) => __async(void 0, [_02], function* ({ value }) {
2301
+ slot: (_02) => __async(null, [_02], function* ({ value }) {
2293
2302
  const content = value;
2294
2303
  return yield Promise.all(
2295
2304
  content.map(
2296
- (childItem) => __async(void 0, null, function* () {
2305
+ (childItem) => __async(null, null, function* () {
2297
2306
  return (yield resolveComponentData(
2298
2307
  childItem,
2299
2308
  config,
@@ -2485,7 +2494,7 @@ var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
2485
2494
  const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
2486
2495
  return __spreadProps(__spreadValues({}, s), { state, selectedItem });
2487
2496
  }),
2488
- resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
2497
+ resolveComponentData: (componentData, trigger) => __async(null, null, function* () {
2489
2498
  const { config, metadata, setComponentLoading, permissions } = get();
2490
2499
  const timeouts = {};
2491
2500
  return yield resolveComponentData(
@@ -2496,7 +2505,7 @@ var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
2496
2505
  const id = "id" in item.props ? item.props.id : "root";
2497
2506
  timeouts[id] = setComponentLoading(id, true, 50);
2498
2507
  },
2499
- (item) => __async(void 0, null, function* () {
2508
+ (item) => __async(null, null, function* () {
2500
2509
  const id = "id" in item.props ? item.props.id : "root";
2501
2510
  if ("type" in item) {
2502
2511
  yield permissions.refreshPermissions({ item });
@@ -2508,7 +2517,7 @@ var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
2508
2517
  trigger
2509
2518
  );
2510
2519
  }),
2511
- resolveAndCommitData: () => __async(void 0, null, function* () {
2520
+ resolveAndCommitData: () => __async(null, null, function* () {
2512
2521
  const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
2513
2522
  walkAppState(
2514
2523
  state,
@@ -2685,7 +2694,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
2685
2694
  const viewportHeight = uiViewport.height === "auto" ? frameHeight : uiViewport.height;
2686
2695
  let rootHeight = 0;
2687
2696
  let autoZoom = 1;
2688
- if (uiViewport.width > frameWidth || viewportHeight > frameHeight) {
2697
+ if (typeof uiViewport.width === "number" && (uiViewport.width > frameWidth || viewportHeight > frameHeight)) {
2689
2698
  const widthZoom = Math.min(frameWidth / uiViewport.width, 1);
2690
2699
  const heightZoom = Math.min(frameHeight / viewportHeight, 1);
2691
2700
  zoom = widthZoom;
@@ -2764,7 +2773,8 @@ var IconButton = ({
2764
2773
  tabIndex,
2765
2774
  newTab,
2766
2775
  fullWidth,
2767
- title
2776
+ title,
2777
+ suppressHydrationWarning
2768
2778
  }) => {
2769
2779
  const [loading, setLoading] = (0, import_react9.useState)(false);
2770
2780
  const ElementType = href ? "a" : "button";
@@ -2791,6 +2801,7 @@ var IconButton = ({
2791
2801
  rel: newTab ? "noreferrer" : void 0,
2792
2802
  href,
2793
2803
  title,
2804
+ suppressHydrationWarning,
2794
2805
  children: [
2795
2806
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: getClassName3("title"), children: title }),
2796
2807
  children,
@@ -3080,7 +3091,7 @@ var collisionStore = (0, import_vanilla.createStore)(() => ({
3080
3091
 
3081
3092
  // lib/dnd/collision/dynamic/index.ts
3082
3093
  var flushNext = "";
3083
- var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
3094
+ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((input) => {
3084
3095
  var _a, _b, _c, _d, _e;
3085
3096
  const { dragOperation, droppable } = input;
3086
3097
  const { position } = dragOperation;
@@ -3173,7 +3184,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3173
3184
  }
3174
3185
  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
3175
3186
  return null;
3176
- };
3187
+ });
3177
3188
 
3178
3189
  // components/Sortable/index.tsx
3179
3190
  var import_sortable = require("@dnd-kit/react/sortable");
@@ -3769,8 +3780,9 @@ var ArrayField = ({
3769
3780
  if (isDraggingAny) return;
3770
3781
  const value2 = getValue();
3771
3782
  const existingValue = value2 || [];
3783
+ const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
3772
3784
  const newItem = defaultSlots(
3773
- uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
3785
+ uniqifyItem(defaultProps),
3774
3786
  field.arrayFields
3775
3787
  );
3776
3788
  const newValue = [...existingValue, newItem];
@@ -4027,11 +4039,13 @@ var ExternalInput = ({
4027
4039
  id,
4028
4040
  readOnly
4029
4041
  }) => {
4042
+ var _a;
4030
4043
  const {
4031
4044
  mapProp = (val) => val,
4032
4045
  mapRow = (val) => val,
4033
4046
  filterFields
4034
4047
  } = field || {};
4048
+ const { enabled: shouldCacheData } = (_a = field.cache) != null ? _a : { enabled: true };
4035
4049
  const [data, setData] = (0, import_react18.useState)([]);
4036
4050
  const [isOpen, setOpen] = (0, import_react18.useState)(false);
4037
4051
  const [isLoading, setIsLoading] = (0, import_react18.useState)(true);
@@ -4054,14 +4068,21 @@ var ExternalInput = ({
4054
4068
  }, [mappedData]);
4055
4069
  const [searchQuery, setSearchQuery] = (0, import_react18.useState)(field.initialQuery || "");
4056
4070
  const search = (0, import_react18.useCallback)(
4057
- (query, filters2) => __async(void 0, null, function* () {
4071
+ (query, filters2) => __async(null, null, function* () {
4058
4072
  setIsLoading(true);
4059
4073
  const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
4060
- const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
4074
+ let listData;
4075
+ if (shouldCacheData && dataCache[cacheKey]) {
4076
+ listData = dataCache[cacheKey];
4077
+ } else {
4078
+ listData = yield field.fetchList({ query, filters: filters2 });
4079
+ }
4061
4080
  if (listData) {
4062
4081
  setData(listData);
4063
4082
  setIsLoading(false);
4064
- dataCache[cacheKey] = listData;
4083
+ if (shouldCacheData) {
4084
+ dataCache[cacheKey] = listData;
4085
+ }
4065
4086
  }
4066
4087
  }),
4067
4088
  [id, field]
@@ -4125,6 +4146,7 @@ var ExternalInput = ({
4125
4146
  }),
4126
4147
  onSubmit: (e) => {
4127
4148
  e.preventDefault();
4149
+ e.stopPropagation();
4128
4150
  search(searchQuery, filters);
4129
4151
  },
4130
4152
  children: [
@@ -4274,7 +4296,7 @@ var ExternalField = ({
4274
4296
  placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
4275
4297
  mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
4276
4298
  mapRow: validField.mapRow,
4277
- fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
4299
+ fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(null, null, function* () {
4278
4300
  return yield deprecatedField.adaptor.fetchList(
4279
4301
  deprecatedField.adaptorParams
4280
4302
  );
@@ -4646,6 +4668,7 @@ function AutoFieldInternal(props) {
4646
4668
  }
4647
4669
  return (_props) => null;
4648
4670
  }, [field.type]);
4671
+ const fieldKey = field.type === "custom" ? field.key : void 0;
4649
4672
  let FieldComponent = (0, import_react22.useMemo)(() => {
4650
4673
  if (field.type === "custom") {
4651
4674
  if (!field.render) {
@@ -4655,7 +4678,7 @@ function AutoFieldInternal(props) {
4655
4678
  } else if (field.type !== "slot") {
4656
4679
  return render[field.type];
4657
4680
  }
4658
- }, [field.type, render]);
4681
+ }, [field.type, fieldKey, render]);
4659
4682
  const { visible = true } = props.field;
4660
4683
  if (!visible) {
4661
4684
  return null;
@@ -5046,12 +5069,14 @@ var DraggableComponent = ({
5046
5069
  }
5047
5070
  return cleanup;
5048
5071
  }, [permissions.drag, zoneCompound]);
5072
+ const [, setRerender] = (0, import_react26.useState)(0);
5049
5073
  const ref = (0, import_react26.useRef)(null);
5050
5074
  const refSetter = (0, import_react26.useCallback)(
5051
5075
  (el) => {
5052
5076
  sortableRef(el);
5053
- if (el) {
5077
+ if (ref.current !== el) {
5054
5078
  ref.current = el;
5079
+ setRerender((update) => update + 1);
5055
5080
  }
5056
5081
  },
5057
5082
  [sortableRef]
@@ -5478,7 +5503,8 @@ var useMinEmptyHeight = ({
5478
5503
  }
5479
5504
  }
5480
5505
  }, [ref.current, draggedItem, onDragFinished]);
5481
- return [prevHeight || userMinEmptyHeight, isAnimating];
5506
+ const returnedMinHeight = isNaN(Number(userMinEmptyHeight)) ? userMinEmptyHeight : `${userMinEmptyHeight}px`;
5507
+ return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
5482
5508
  };
5483
5509
 
5484
5510
  // lib/assign-refs.ts
@@ -5507,7 +5533,7 @@ var import_react29 = require("react");
5507
5533
  function useRenderedCallback(callback, deps) {
5508
5534
  const manager = (0, import_react28.useDragDropManager)();
5509
5535
  return (0, import_react29.useCallback)(
5510
- (...args) => __async(this, null, function* () {
5536
+ (...args) => __async(null, null, function* () {
5511
5537
  yield manager == null ? void 0 : manager.renderer.rendering;
5512
5538
  return callback(...args);
5513
5539
  }),
@@ -5712,8 +5738,9 @@ var Item = ({
5712
5738
  );
5713
5739
  };
5714
5740
  var SlotRender = (0, import_react33.forwardRef)(
5715
- function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
5716
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
5741
+ function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
5742
+ const El = as != null ? as : "div";
5743
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(El, { className, style, ref, children: content.map((item) => {
5717
5744
  if (!config.components[item.type]) {
5718
5745
  return null;
5719
5746
  }
@@ -5835,26 +5862,26 @@ var registerOverlayPortal = (el, opts = {}) => {
5835
5862
  capture: true
5836
5863
  });
5837
5864
  };
5838
- if (disableDragOnFocus) {
5839
- el.addEventListener("focus", onFocus, { capture: true });
5840
- el.addEventListener("blur", onBlur, { capture: true });
5841
- } else if (disableDrag) {
5865
+ if (disableDrag) {
5842
5866
  el.addEventListener("pointerdown", stopPropagation, {
5843
5867
  capture: true
5844
5868
  });
5869
+ } else if (disableDragOnFocus) {
5870
+ el.addEventListener("focus", onFocus, { capture: true });
5871
+ el.addEventListener("blur", onBlur, { capture: true });
5845
5872
  }
5846
5873
  el.setAttribute("data-puck-overlay-portal", "true");
5847
5874
  return () => {
5848
5875
  el.removeEventListener("mouseover", stopPropagation, {
5849
5876
  capture: true
5850
5877
  });
5851
- if (disableDragOnFocus) {
5852
- el.removeEventListener("focus", onFocus, { capture: true });
5853
- el.removeEventListener("blur", onFocus, { capture: true });
5854
- } else if (disableDrag) {
5878
+ if (disableDrag) {
5855
5879
  el.removeEventListener("pointerdown", stopPropagation, {
5856
5880
  capture: true
5857
5881
  });
5882
+ } else if (disableDragOnFocus) {
5883
+ el.removeEventListener("focus", onFocus, { capture: true });
5884
+ el.removeEventListener("blur", onBlur, { capture: true });
5858
5885
  }
5859
5886
  el.removeAttribute("data-puck-overlay-portal");
5860
5887
  };
@@ -5862,7 +5889,7 @@ var registerOverlayPortal = (el, opts = {}) => {
5862
5889
 
5863
5890
  // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
5864
5891
  init_react_import();
5865
- var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
5892
+ var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
5866
5893
 
5867
5894
  // lib/data/set-deep.ts
5868
5895
  init_react_import();
@@ -5936,7 +5963,7 @@ var InlineTextFieldInternal = ({
5936
5963
  ref.current.replaceChildren(value);
5937
5964
  }
5938
5965
  const cleanupPortal = registerOverlayPortal(ref.current);
5939
- const handleInput = (e) => __async(void 0, null, function* () {
5966
+ const handleInput = (e) => __async(null, null, function* () {
5940
5967
  var _a2;
5941
5968
  const appStore2 = appStoreApi.getState();
5942
5969
  const node = appStore2.state.indexes.nodes[componentId];
@@ -6227,8 +6254,9 @@ var DropZoneEdit = (0, import_react36.forwardRef)(
6227
6254
  disallow,
6228
6255
  style,
6229
6256
  className,
6230
- minEmptyHeight: userMinEmptyHeight = 128,
6231
- collisionAxis
6257
+ minEmptyHeight: userMinEmptyHeight = "128px",
6258
+ collisionAxis,
6259
+ as
6232
6260
  }, userRef) {
6233
6261
  const ctx = (0, import_react36.useContext)(dropZoneContext);
6234
6262
  const appStoreApi = useAppStoreApi();
@@ -6371,8 +6399,9 @@ var DropZoneEdit = (0, import_react36.forwardRef)(
6371
6399
  userMinEmptyHeight,
6372
6400
  ref
6373
6401
  });
6402
+ const El = as != null ? as : "div";
6374
6403
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
6375
- "div",
6404
+ El,
6376
6405
  {
6377
6406
  className: `${getClassName18({
6378
6407
  isRootZone,
@@ -6388,7 +6417,7 @@ var DropZoneEdit = (0, import_react36.forwardRef)(
6388
6417
  "data-testid": `dropzone:${zoneCompound}`,
6389
6418
  "data-puck-dropzone": zoneCompound,
6390
6419
  style: __spreadProps(__spreadValues({}, style), {
6391
- "--min-empty-height": `${minEmptyHeight}px`,
6420
+ "--min-empty-height": minEmptyHeight,
6392
6421
  backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
6393
6422
  }),
6394
6423
  children: contentIdsWithPreview.map((componentId, i) => {
@@ -6435,7 +6464,7 @@ var DropZoneRenderItem = ({
6435
6464
  };
6436
6465
  var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropZoneRender, __spreadValues({}, props));
6437
6466
  var DropZoneRender = (0, import_react36.forwardRef)(
6438
- function DropZoneRenderInternal({ className, style, zone }, ref) {
6467
+ function DropZoneRenderInternal({ className, style, zone, as }, ref) {
6439
6468
  const ctx = (0, import_react36.useContext)(dropZoneContext);
6440
6469
  const { areaId = "root" } = ctx || {};
6441
6470
  const { config, data, metadata } = (0, import_react36.useContext)(renderContext);
@@ -6448,13 +6477,14 @@ var DropZoneRender = (0, import_react36.forwardRef)(
6448
6477
  }
6449
6478
  }
6450
6479
  }, [content]);
6480
+ const El = as != null ? as : "div";
6451
6481
  if (!data || !config) {
6452
6482
  return null;
6453
6483
  }
6454
6484
  if (zoneCompound !== rootDroppableId) {
6455
6485
  content = setupZone(data, zoneCompound).zones[zoneCompound];
6456
6486
  }
6457
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, style, ref, children: content.map((item) => {
6487
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(El, { className, style, ref, children: content.map((item) => {
6458
6488
  const Component = config.components[item.type];
6459
6489
  if (Component) {
6460
6490
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -6760,7 +6790,8 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
6760
6790
 
6761
6791
  // lib/insert-component.ts
6762
6792
  init_react_import();
6763
- var insertComponent = (componentType, zone, index, appStore) => __async(void 0, null, function* () {
6793
+ var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
6794
+ const { getState } = appStore;
6764
6795
  const id = generateId(componentType);
6765
6796
  const insertActionData = {
6766
6797
  type: "insert",
@@ -6769,8 +6800,9 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
6769
6800
  destinationZone: zone,
6770
6801
  id
6771
6802
  };
6772
- const { state, dispatch, resolveComponentData: resolveComponentData2 } = appStore;
6773
- const insertedState = insertAction(state, insertActionData, appStore);
6803
+ const stateBefore = getState().state;
6804
+ const insertedState = insertAction(stateBefore, insertActionData, getState());
6805
+ const dispatch = getState().dispatch;
6774
6806
  dispatch(__spreadProps(__spreadValues({}, insertActionData), {
6775
6807
  // Dispatch insert rather set, as user's may rely on this via onAction
6776
6808
  // We must always record history here so the insert is added to user history
@@ -6778,23 +6810,21 @@ var insertComponent = (componentType, zone, index, appStore) => __async(void 0,
6778
6810
  // entries on insert - one for the initial insert, and one when the data resolves
6779
6811
  recordHistory: true
6780
6812
  }));
6781
- const itemSelector = {
6782
- index,
6783
- zone
6784
- };
6813
+ const itemSelector = { index, zone };
6785
6814
  dispatch({ type: "setUi", ui: { itemSelector } });
6786
6815
  const itemData = getItem(itemSelector, insertedState);
6787
- if (itemData) {
6788
- const resolved = yield resolveComponentData2(itemData, "insert");
6789
- if (resolved.didChange) {
6790
- dispatch({
6791
- type: "replace",
6792
- destinationZone: itemSelector.zone,
6793
- destinationIndex: itemSelector.index,
6794
- data: resolved.node
6795
- });
6796
- }
6797
- }
6816
+ if (!itemData) return;
6817
+ const resolveComponentData2 = getState().resolveComponentData;
6818
+ const resolved = yield resolveComponentData2(itemData, "insert");
6819
+ if (!resolved.didChange) return;
6820
+ const latestItemSelector = getSelectorForId(getState().state, id);
6821
+ if (!latestItemSelector) return;
6822
+ dispatch({
6823
+ type: "replace",
6824
+ destinationZone: latestItemSelector.zone,
6825
+ destinationIndex: latestItemSelector.index,
6826
+ data: resolved.node
6827
+ });
6798
6828
  });
6799
6829
 
6800
6830
  // components/DragDropContext/index.tsx
@@ -7031,7 +7061,7 @@ var DragDropContextClient = ({
7031
7061
  thisPreview.componentType,
7032
7062
  thisPreview.zone,
7033
7063
  thisPreview.index,
7034
- appStore.getState()
7064
+ appStore
7035
7065
  );
7036
7066
  } else if (initialSelector.current) {
7037
7067
  dispatch({
@@ -7371,49 +7401,48 @@ var DefaultFields = ({
7371
7401
  }) => {
7372
7402
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
7373
7403
  };
7374
- var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
7375
- let currentProps;
7404
+ var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
7376
7405
  const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
7377
7406
  const { data, ui } = state;
7378
7407
  const { itemSelector } = ui;
7379
7408
  const rootProps = data.root.props || data.root;
7380
- if (selectedItem) {
7381
- currentProps = selectedItem.props;
7382
- } else {
7383
- currentProps = rootProps;
7384
- }
7385
- const newProps = __spreadProps(__spreadValues({}, currentProps), {
7386
- [fieldName]: value
7387
- });
7409
+ const currentProps = selectedItem ? selectedItem.props : rootProps;
7410
+ const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
7388
7411
  if (selectedItem && itemSelector) {
7412
+ const resolved = yield resolveComponentData2(
7413
+ __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
7414
+ "replace"
7415
+ );
7416
+ const latestSelector = getSelectorForId(
7417
+ appStore.getState().state,
7418
+ selectedItem.props.id
7419
+ );
7420
+ if (!latestSelector) return;
7389
7421
  dispatch({
7390
7422
  type: "replace",
7391
- destinationIndex: itemSelector.index,
7392
- destinationZone: itemSelector.zone || rootDroppableId,
7393
- data: (yield resolveComponentData2(
7394
- __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
7423
+ destinationIndex: latestSelector.index,
7424
+ destinationZone: latestSelector.zone || rootDroppableId,
7425
+ data: resolved.node,
7426
+ ui: updatedUi
7427
+ });
7428
+ return;
7429
+ }
7430
+ if (data.root.props) {
7431
+ dispatch({
7432
+ type: "replaceRoot",
7433
+ root: (yield resolveComponentData2(
7434
+ __spreadProps(__spreadValues({}, data.root), { props: newProps }),
7395
7435
  "replace"
7396
7436
  )).node,
7397
- ui: updatedUi
7437
+ ui: __spreadValues(__spreadValues({}, ui), updatedUi),
7438
+ recordHistory: true
7398
7439
  });
7399
- } else {
7400
- if (data.root.props) {
7401
- dispatch({
7402
- type: "replaceRoot",
7403
- root: (yield resolveComponentData2(
7404
- __spreadProps(__spreadValues({}, data.root), { props: newProps }),
7405
- "replace"
7406
- )).node,
7407
- ui: __spreadValues(__spreadValues({}, ui), updatedUi),
7408
- recordHistory: true
7409
- });
7410
- } else {
7411
- dispatch({
7412
- type: "setData",
7413
- data: { root: newProps }
7414
- });
7415
- }
7440
+ return;
7416
7441
  }
7442
+ dispatch({
7443
+ type: "setData",
7444
+ data: { root: newProps }
7445
+ });
7417
7446
  });
7418
7447
  var FieldsChild = ({ fieldName }) => {
7419
7448
  const field = useAppStore((s) => s.fields.fields[fieldName]);
@@ -7742,7 +7771,7 @@ var CopyHostStyles = ({
7742
7771
  let elements = [];
7743
7772
  const hashes = {};
7744
7773
  const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
7745
- const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
7774
+ const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
7746
7775
  let mirror;
7747
7776
  if (el.nodeName === "LINK" && inlineStyles) {
7748
7777
  mirror = document.createElement("style");
@@ -7774,7 +7803,7 @@ var CopyHostStyles = ({
7774
7803
  }
7775
7804
  return mirror;
7776
7805
  });
7777
- const addEl = (el) => __async(void 0, null, function* () {
7806
+ const addEl = (el) => __async(null, null, function* () {
7778
7807
  const index = lookupEl(el);
7779
7808
  if (index > -1) {
7780
7809
  if (debug)
@@ -7847,7 +7876,7 @@ var CopyHostStyles = ({
7847
7876
  const parentBody = parentDocument.getElementsByTagName("body")[0];
7848
7877
  syncAttributes(parentBody, doc.body);
7849
7878
  Promise.all(
7850
- collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
7879
+ collectedStyles.map((styleNode, i) => __async(null, null, function* () {
7851
7880
  if (styleNode.nodeName === "LINK") {
7852
7881
  const linkHref = styleNode.href;
7853
7882
  if (hrefs.indexOf(linkHref) > -1) {
@@ -8416,7 +8445,18 @@ var generateUsePuck = (store) => {
8416
8445
  selectedItem: store.selectedItem || null,
8417
8446
  getItemBySelector: (selector) => getItem(selector, store.state),
8418
8447
  getItemById: (id) => store.state.indexes.nodes[id].data,
8419
- getSelectorForId: (id) => getSelectorForId(store.state, id)
8448
+ getSelectorForId: (id) => getSelectorForId(store.state, id),
8449
+ getParentById: (id) => {
8450
+ const node = store.state.indexes.nodes[id];
8451
+ const parentId = node.parentId;
8452
+ if (parentId === null) return;
8453
+ const parentNode = store.state.indexes.nodes[parentId];
8454
+ if (!parentNode) return;
8455
+ return parentNode.data;
8456
+ }
8457
+ };
8458
+ storeData.__private = {
8459
+ appState: store.state
8420
8460
  };
8421
8461
  return storeData;
8422
8462
  };
@@ -8457,7 +8497,7 @@ function createUsePuck() {
8457
8497
  }
8458
8498
  const result = (0, import_zustand6.useStore)(
8459
8499
  usePuckApi,
8460
- selector != null ? selector : (s) => s
8500
+ selector != null ? selector : ((s) => s)
8461
8501
  );
8462
8502
  return result;
8463
8503
  };
@@ -8481,13 +8521,22 @@ function useGetPuck() {
8481
8521
  // components/Puck/index.tsx
8482
8522
  var import_fast_deep_equal2 = __toESM(require_fast_deep_equal());
8483
8523
 
8524
+ // lib/data/to-component.ts
8525
+ init_react_import();
8526
+ var toComponent = (item) => {
8527
+ return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
8528
+ props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
8529
+ type: "root"
8530
+ });
8531
+ };
8532
+
8484
8533
  // components/Puck/components/Layout/index.tsx
8485
8534
  init_react_import();
8486
8535
  var import_react62 = require("react");
8487
8536
 
8488
8537
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
8489
8538
  init_react_import();
8490
- var styles_module_default20 = { "Puck": "_Puck_hv23j_19", "Puck-portal": "_Puck-portal_hv23j_31", "PuckLayout": "_PuckLayout_hv23j_36", "PuckLayout-inner": "_PuckLayout-inner_hv23j_40", "PuckLayout--mounted": "_PuckLayout--mounted_hv23j_73", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_hv23j_77", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_hv23j_77", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_hv23j_83", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_hv23j_101", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_hv23j_128", "PuckLayout-mounted": "_PuckLayout-mounted_hv23j_147", "PuckLayout-nav": "_PuckLayout-nav_hv23j_188", "PuckLayout-header": "_PuckLayout-header_hv23j_204", "PuckPluginTab": "_PuckPluginTab_hv23j_218", "PuckPluginTab--visible": "_PuckPluginTab--visible_hv23j_224", "PuckPluginTab-body": "_PuckPluginTab-body_hv23j_229" };
8539
+ var styles_module_default20 = { "Puck": "_Puck_lqzmv_19", "Puck-portal": "_Puck-portal_lqzmv_32", "PuckLayout": "_PuckLayout_lqzmv_37", "PuckLayout-inner": "_PuckLayout-inner_lqzmv_41", "PuckLayout--mounted": "_PuckLayout--mounted_lqzmv_74", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_lqzmv_78", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_lqzmv_78", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_lqzmv_84", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_lqzmv_102", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_lqzmv_129", "PuckLayout-mounted": "_PuckLayout-mounted_lqzmv_148", "PuckLayout-nav": "_PuckLayout-nav_lqzmv_189", "PuckLayout-header": "_PuckLayout-header_lqzmv_205", "PuckPluginTab": "_PuckPluginTab_lqzmv_219", "PuckPluginTab--visible": "_PuckPluginTab--visible_lqzmv_225", "PuckPluginTab-body": "_PuckPluginTab-body_lqzmv_230" };
8491
8540
 
8492
8541
  // lib/use-inject-css.ts
8493
8542
  init_react_import();
@@ -8915,13 +8964,14 @@ var ActionButton = ({
8915
8964
  isActive,
8916
8965
  disabled
8917
8966
  }) => {
8918
- return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
8967
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
8919
8968
  IconButton,
8920
8969
  {
8921
8970
  type: "button",
8922
8971
  title,
8923
8972
  disabled: disabled || isActive,
8924
8973
  onClick,
8974
+ suppressHydrationWarning: true,
8925
8975
  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: getClassNameButton("inner"), children })
8926
8976
  }
8927
8977
  ) });
@@ -9640,7 +9690,7 @@ var Layout = ({ children }) => {
9640
9690
  dnd,
9641
9691
  initialHistory: _initialHistory,
9642
9692
  plugins,
9643
- height = "100dvh"
9693
+ height
9644
9694
  } = usePropsContext();
9645
9695
  const iframe = (0, import_react62.useMemo)(
9646
9696
  () => __spreadValues({
@@ -9784,92 +9834,85 @@ var Layout = ({ children }) => {
9784
9834
  return (_a = s.state.ui.mobilePanelExpanded) != null ? _a : false;
9785
9835
  }
9786
9836
  );
9787
- return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
9788
- "div",
9789
- {
9790
- className: `Puck ${getClassName36()}`,
9791
- style: { height },
9792
- id: instanceId,
9793
- children: [
9794
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9837
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `Puck ${getClassName36()}`, id: instanceId, children: [
9838
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9839
+ "div",
9840
+ {
9841
+ className: getLayoutClassName({
9842
+ leftSideBarVisible,
9843
+ mounted,
9844
+ rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
9845
+ isExpanded: mobilePanelExpanded,
9846
+ mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
9847
+ mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
9848
+ }),
9849
+ style: { height },
9850
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
9795
9851
  "div",
9796
9852
  {
9797
- className: getLayoutClassName({
9798
- leftSideBarVisible,
9799
- mounted,
9800
- rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
9801
- isExpanded: mobilePanelExpanded,
9802
- mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
9803
- mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
9804
- }),
9805
- children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
9806
- "div",
9807
- {
9808
- className: getLayoutClassName("inner"),
9809
- style: layoutOptions,
9810
- children: [
9811
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Header, {}) }),
9812
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9813
- Nav,
9814
- {
9815
- items: pluginItems,
9816
- mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9817
- IconButton,
9818
- {
9819
- type: "button",
9820
- title: "maximize",
9821
- onClick: () => {
9822
- setUi({
9823
- mobilePanelExpanded: !mobilePanelExpanded
9824
- });
9825
- },
9826
- children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Maximize2, { size: 21 })
9827
- }
9828
- )
9829
- }
9830
- ) }),
9831
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9832
- Sidebar,
9833
- {
9834
- position: "left",
9835
- sidebarRef: leftSidebarRef,
9836
- isVisible: leftSideBarVisible,
9837
- onResize: setLeftWidth,
9838
- onResizeEnd: handleLeftSidebarResizeEnd,
9839
- children: Object.entries(pluginItems).map(
9840
- ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9841
- PluginTab,
9842
- {
9843
- visible: currentPlugin === id,
9844
- mobileOnly,
9845
- children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Render2, {})
9846
- },
9847
- id
9848
- )
9849
- )
9850
- }
9851
- ),
9852
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Canvas, {}),
9853
- !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9854
- Sidebar,
9853
+ className: getLayoutClassName("inner"),
9854
+ style: layoutOptions,
9855
+ children: [
9856
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Header, {}) }),
9857
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9858
+ Nav,
9859
+ {
9860
+ items: pluginItems,
9861
+ mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9862
+ IconButton,
9855
9863
  {
9856
- position: "right",
9857
- sidebarRef: rightSidebarRef,
9858
- isVisible: rightSideBarVisible,
9859
- onResize: setRightWidth,
9860
- onResizeEnd: handleRightSidebarResizeEnd,
9861
- children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FieldSideBar, {})
9864
+ type: "button",
9865
+ title: "maximize",
9866
+ onClick: () => {
9867
+ setUi({
9868
+ mobilePanelExpanded: !mobilePanelExpanded
9869
+ });
9870
+ },
9871
+ children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Maximize2, { size: 21 })
9862
9872
  }
9863
9873
  )
9864
- ]
9865
- }
9866
- )
9874
+ }
9875
+ ) }),
9876
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9877
+ Sidebar,
9878
+ {
9879
+ position: "left",
9880
+ sidebarRef: leftSidebarRef,
9881
+ isVisible: leftSideBarVisible,
9882
+ onResize: setLeftWidth,
9883
+ onResizeEnd: handleLeftSidebarResizeEnd,
9884
+ children: Object.entries(pluginItems).map(
9885
+ ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9886
+ PluginTab,
9887
+ {
9888
+ visible: currentPlugin === id,
9889
+ mobileOnly,
9890
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Render2, {})
9891
+ },
9892
+ id
9893
+ )
9894
+ )
9895
+ }
9896
+ ),
9897
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Canvas, {}),
9898
+ !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
9899
+ Sidebar,
9900
+ {
9901
+ position: "right",
9902
+ sidebarRef: rightSidebarRef,
9903
+ isVisible: rightSideBarVisible,
9904
+ onResize: setRightWidth,
9905
+ onResizeEnd: handleRightSidebarResizeEnd,
9906
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(FieldSideBar, {})
9907
+ }
9908
+ )
9909
+ ]
9867
9910
  }
9868
- ) }) }) }),
9869
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { id: "puck-portal-root", className: getClassName36("portal") })
9870
- ]
9871
- }
9872
- );
9911
+ )
9912
+ }
9913
+ ) }) }) }),
9914
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { id: "puck-portal-root", className: getClassName36("portal") })
9915
+ ] });
9873
9916
  };
9874
9917
 
9875
9918
  // components/Puck/index.tsx
@@ -9947,9 +9990,13 @@ function PuckProvider({ children }) {
9947
9990
  }
9948
9991
  const rootProps = ((_f = initialData == null ? void 0 : initialData.root) == null ? void 0 : _f.props) || (initialData == null ? void 0 : initialData.root) || {};
9949
9992
  const defaultedRootProps = __spreadValues(__spreadValues({}, (_g = config.root) == null ? void 0 : _g.defaultProps), rootProps);
9993
+ const root = populateIds(
9994
+ toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
9995
+ config
9996
+ );
9950
9997
  const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
9951
9998
  data: __spreadProps(__spreadValues({}, initialData), {
9952
- root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
9999
+ root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
9953
10000
  content: initialData.content || []
9954
10001
  }),
9955
10002
  ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
@@ -9986,7 +10033,12 @@ function PuckProvider({ children }) {
9986
10033
  });
9987
10034
  })
9988
10035
  );
9989
- const initialHistoryIndex = (_initialHistory == null ? void 0 : _initialHistory.index) || blendedHistories.length - 1;
10036
+ const initialHistoryIndex = (0, import_react63.useMemo)(() => {
10037
+ if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
10038
+ return _initialHistory == null ? void 0 : _initialHistory.index;
10039
+ }
10040
+ return blendedHistories.length - 1;
10041
+ }, []);
9990
10042
  const initialAppState = blendedHistories[initialHistoryIndex].state;
9991
10043
  const loadedOverrides = useLoadedOverrides({
9992
10044
  overrides,
@@ -10048,7 +10100,7 @@ function PuckProvider({ children }) {
10048
10100
  });
10049
10101
  const previousData = (0, import_react63.useRef)(null);
10050
10102
  (0, import_react63.useEffect)(() => {
10051
- appStore.subscribe(
10103
+ return appStore.subscribe(
10052
10104
  (s) => s.state.data,
10053
10105
  (data) => {
10054
10106
  if (onChange) {
@@ -10058,7 +10110,7 @@ function PuckProvider({ children }) {
10058
10110
  }
10059
10111
  }
10060
10112
  );
10061
- }, []);
10113
+ }, [onChange]);
10062
10114
  useRegisterPermissionsSlice(appStore, permissions);
10063
10115
  const uPuckStore = useRegisterUsePuckStore(appStore);
10064
10116
  (0, import_react63.useEffect)(() => {
@@ -10239,22 +10291,11 @@ function transformProps(data, propTransforms, config = { components: {} }) {
10239
10291
 
10240
10292
  // lib/resolve-all-data.ts
10241
10293
  init_react_import();
10242
-
10243
- // lib/data/to-component.ts
10244
- init_react_import();
10245
- var toComponent = (item) => {
10246
- return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
10247
- props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
10248
- type: "root"
10249
- });
10250
- };
10251
-
10252
- // lib/resolve-all-data.ts
10253
10294
  function resolveAllData(_0, _1) {
10254
10295
  return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
10255
10296
  var _a;
10256
10297
  const defaultedData = defaultData(data);
10257
- const resolveNode = (_node) => __async(this, null, function* () {
10298
+ const resolveNode = (_node) => __async(null, null, function* () {
10258
10299
  const node = toComponent(_node);
10259
10300
  onResolveStart == null ? void 0 : onResolveStart(node);
10260
10301
  const resolved = (yield resolveComponentData(
@@ -10275,13 +10316,13 @@ function resolveAllData(_0, _1) {
10275
10316
  onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
10276
10317
  return resolvedDeep;
10277
10318
  });
10278
- const processContent = (content) => __async(this, null, function* () {
10319
+ const processContent = (content) => __async(null, null, function* () {
10279
10320
  return Promise.all(content.map(resolveNode));
10280
10321
  });
10281
- const processZones = () => __async(this, null, function* () {
10322
+ const processZones = () => __async(null, null, function* () {
10282
10323
  var _a2;
10283
10324
  const zones = (_a2 = data.zones) != null ? _a2 : {};
10284
- Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
10325
+ Object.entries(zones).forEach((_02) => __async(null, [_02], function* ([zoneKey, content]) {
10285
10326
  zones[zoneKey] = yield Promise.all(content.map(resolveNode));
10286
10327
  }));
10287
10328
  return zones;
@@ -10291,7 +10332,7 @@ function resolveAllData(_0, _1) {
10291
10332
  content: yield processContent(defaultedData.content),
10292
10333
  zones: yield processZones()
10293
10334
  };
10294
- Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
10335
+ Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(null, null, function* () {
10295
10336
  const content = defaultedData.zones[zoneKey];
10296
10337
  dynamic.zones[zoneKey] = yield processContent(content);
10297
10338
  }), {});
@@ -10337,325 +10378,45 @@ classnames/index.js:
10337
10378
  *)
10338
10379
 
10339
10380
  lucide-react/dist/esm/shared/src/utils.js:
10340
- (**
10341
- * @license lucide-react v0.468.0 - ISC
10342
- *
10343
- * This source code is licensed under the ISC license.
10344
- * See the LICENSE file in the root directory of this source tree.
10345
- *)
10346
-
10347
10381
  lucide-react/dist/esm/defaultAttributes.js:
10348
- (**
10349
- * @license lucide-react v0.468.0 - ISC
10350
- *
10351
- * This source code is licensed under the ISC license.
10352
- * See the LICENSE file in the root directory of this source tree.
10353
- *)
10354
-
10355
10382
  lucide-react/dist/esm/Icon.js:
10356
- (**
10357
- * @license lucide-react v0.468.0 - ISC
10358
- *
10359
- * This source code is licensed under the ISC license.
10360
- * See the LICENSE file in the root directory of this source tree.
10361
- *)
10362
-
10363
10383
  lucide-react/dist/esm/createLucideIcon.js:
10364
- (**
10365
- * @license lucide-react v0.468.0 - ISC
10366
- *
10367
- * This source code is licensed under the ISC license.
10368
- * See the LICENSE file in the root directory of this source tree.
10369
- *)
10370
-
10371
10384
  lucide-react/dist/esm/icons/chevron-down.js:
10372
- (**
10373
- * @license lucide-react v0.468.0 - ISC
10374
- *
10375
- * This source code is licensed under the ISC license.
10376
- * See the LICENSE file in the root directory of this source tree.
10377
- *)
10378
-
10379
10385
  lucide-react/dist/esm/icons/chevron-right.js:
10380
- (**
10381
- * @license lucide-react v0.468.0 - ISC
10382
- *
10383
- * This source code is licensed under the ISC license.
10384
- * See the LICENSE file in the root directory of this source tree.
10385
- *)
10386
-
10387
10386
  lucide-react/dist/esm/icons/chevron-up.js:
10388
- (**
10389
- * @license lucide-react v0.468.0 - ISC
10390
- *
10391
- * This source code is licensed under the ISC license.
10392
- * See the LICENSE file in the root directory of this source tree.
10393
- *)
10394
-
10395
10387
  lucide-react/dist/esm/icons/circle-check-big.js:
10396
- (**
10397
- * @license lucide-react v0.468.0 - ISC
10398
- *
10399
- * This source code is licensed under the ISC license.
10400
- * See the LICENSE file in the root directory of this source tree.
10401
- *)
10402
-
10403
10388
  lucide-react/dist/esm/icons/copy.js:
10404
- (**
10405
- * @license lucide-react v0.468.0 - ISC
10406
- *
10407
- * This source code is licensed under the ISC license.
10408
- * See the LICENSE file in the root directory of this source tree.
10409
- *)
10410
-
10411
10389
  lucide-react/dist/esm/icons/corner-left-up.js:
10412
- (**
10413
- * @license lucide-react v0.468.0 - ISC
10414
- *
10415
- * This source code is licensed under the ISC license.
10416
- * See the LICENSE file in the root directory of this source tree.
10417
- *)
10418
-
10419
10390
  lucide-react/dist/esm/icons/ellipsis-vertical.js:
10420
- (**
10421
- * @license lucide-react v0.468.0 - ISC
10422
- *
10423
- * This source code is licensed under the ISC license.
10424
- * See the LICENSE file in the root directory of this source tree.
10425
- *)
10426
-
10427
10391
  lucide-react/dist/esm/icons/expand.js:
10428
- (**
10429
- * @license lucide-react v0.468.0 - ISC
10430
- *
10431
- * This source code is licensed under the ISC license.
10432
- * See the LICENSE file in the root directory of this source tree.
10433
- *)
10434
-
10435
10392
  lucide-react/dist/esm/icons/globe.js:
10436
- (**
10437
- * @license lucide-react v0.468.0 - ISC
10438
- *
10439
- * This source code is licensed under the ISC license.
10440
- * See the LICENSE file in the root directory of this source tree.
10441
- *)
10442
-
10443
10393
  lucide-react/dist/esm/icons/hammer.js:
10444
- (**
10445
- * @license lucide-react v0.468.0 - ISC
10446
- *
10447
- * This source code is licensed under the ISC license.
10448
- * See the LICENSE file in the root directory of this source tree.
10449
- *)
10450
-
10451
10394
  lucide-react/dist/esm/icons/hash.js:
10452
- (**
10453
- * @license lucide-react v0.468.0 - ISC
10454
- *
10455
- * This source code is licensed under the ISC license.
10456
- * See the LICENSE file in the root directory of this source tree.
10457
- *)
10458
-
10459
10395
  lucide-react/dist/esm/icons/layers.js:
10460
- (**
10461
- * @license lucide-react v0.468.0 - ISC
10462
- *
10463
- * This source code is licensed under the ISC license.
10464
- * See the LICENSE file in the root directory of this source tree.
10465
- *)
10466
-
10467
10396
  lucide-react/dist/esm/icons/layout-grid.js:
10468
- (**
10469
- * @license lucide-react v0.468.0 - ISC
10470
- *
10471
- * This source code is licensed under the ISC license.
10472
- * See the LICENSE file in the root directory of this source tree.
10473
- *)
10474
-
10475
10397
  lucide-react/dist/esm/icons/link.js:
10476
- (**
10477
- * @license lucide-react v0.468.0 - ISC
10478
- *
10479
- * This source code is licensed under the ISC license.
10480
- * See the LICENSE file in the root directory of this source tree.
10481
- *)
10482
-
10483
10398
  lucide-react/dist/esm/icons/list.js:
10484
- (**
10485
- * @license lucide-react v0.468.0 - ISC
10486
- *
10487
- * This source code is licensed under the ISC license.
10488
- * See the LICENSE file in the root directory of this source tree.
10489
- *)
10490
-
10491
10399
  lucide-react/dist/esm/icons/lock-open.js:
10492
- (**
10493
- * @license lucide-react v0.468.0 - ISC
10494
- *
10495
- * This source code is licensed under the ISC license.
10496
- * See the LICENSE file in the root directory of this source tree.
10497
- *)
10498
-
10499
10400
  lucide-react/dist/esm/icons/lock.js:
10500
- (**
10501
- * @license lucide-react v0.468.0 - ISC
10502
- *
10503
- * This source code is licensed under the ISC license.
10504
- * See the LICENSE file in the root directory of this source tree.
10505
- *)
10506
-
10507
10401
  lucide-react/dist/esm/icons/maximize-2.js:
10508
- (**
10509
- * @license lucide-react v0.468.0 - ISC
10510
- *
10511
- * This source code is licensed under the ISC license.
10512
- * See the LICENSE file in the root directory of this source tree.
10513
- *)
10514
-
10515
10402
  lucide-react/dist/esm/icons/minimize-2.js:
10516
- (**
10517
- * @license lucide-react v0.468.0 - ISC
10518
- *
10519
- * This source code is licensed under the ISC license.
10520
- * See the LICENSE file in the root directory of this source tree.
10521
- *)
10522
-
10523
10403
  lucide-react/dist/esm/icons/monitor.js:
10524
- (**
10525
- * @license lucide-react v0.468.0 - ISC
10526
- *
10527
- * This source code is licensed under the ISC license.
10528
- * See the LICENSE file in the root directory of this source tree.
10529
- *)
10530
-
10531
10404
  lucide-react/dist/esm/icons/panel-left.js:
10532
- (**
10533
- * @license lucide-react v0.468.0 - ISC
10534
- *
10535
- * This source code is licensed under the ISC license.
10536
- * See the LICENSE file in the root directory of this source tree.
10537
- *)
10538
-
10539
10405
  lucide-react/dist/esm/icons/panel-right.js:
10540
- (**
10541
- * @license lucide-react v0.468.0 - ISC
10542
- *
10543
- * This source code is licensed under the ISC license.
10544
- * See the LICENSE file in the root directory of this source tree.
10545
- *)
10546
-
10547
10406
  lucide-react/dist/esm/icons/plus.js:
10548
- (**
10549
- * @license lucide-react v0.468.0 - ISC
10550
- *
10551
- * This source code is licensed under the ISC license.
10552
- * See the LICENSE file in the root directory of this source tree.
10553
- *)
10554
-
10555
10407
  lucide-react/dist/esm/icons/rectangle-ellipsis.js:
10556
- (**
10557
- * @license lucide-react v0.468.0 - ISC
10558
- *
10559
- * This source code is licensed under the ISC license.
10560
- * See the LICENSE file in the root directory of this source tree.
10561
- *)
10562
-
10563
10408
  lucide-react/dist/esm/icons/redo-2.js:
10564
- (**
10565
- * @license lucide-react v0.468.0 - ISC
10566
- *
10567
- * This source code is licensed under the ISC license.
10568
- * See the LICENSE file in the root directory of this source tree.
10569
- *)
10570
-
10571
10409
  lucide-react/dist/esm/icons/search.js:
10572
- (**
10573
- * @license lucide-react v0.468.0 - ISC
10574
- *
10575
- * This source code is licensed under the ISC license.
10576
- * See the LICENSE file in the root directory of this source tree.
10577
- *)
10578
-
10579
10410
  lucide-react/dist/esm/icons/sliders-horizontal.js:
10580
- (**
10581
- * @license lucide-react v0.468.0 - ISC
10582
- *
10583
- * This source code is licensed under the ISC license.
10584
- * See the LICENSE file in the root directory of this source tree.
10585
- *)
10586
-
10587
10411
  lucide-react/dist/esm/icons/smartphone.js:
10588
- (**
10589
- * @license lucide-react v0.468.0 - ISC
10590
- *
10591
- * This source code is licensed under the ISC license.
10592
- * See the LICENSE file in the root directory of this source tree.
10593
- *)
10594
-
10595
10412
  lucide-react/dist/esm/icons/tablet.js:
10596
- (**
10597
- * @license lucide-react v0.468.0 - ISC
10598
- *
10599
- * This source code is licensed under the ISC license.
10600
- * See the LICENSE file in the root directory of this source tree.
10601
- *)
10602
-
10603
10413
  lucide-react/dist/esm/icons/toy-brick.js:
10604
- (**
10605
- * @license lucide-react v0.468.0 - ISC
10606
- *
10607
- * This source code is licensed under the ISC license.
10608
- * See the LICENSE file in the root directory of this source tree.
10609
- *)
10610
-
10611
10414
  lucide-react/dist/esm/icons/trash.js:
10612
- (**
10613
- * @license lucide-react v0.468.0 - ISC
10614
- *
10615
- * This source code is licensed under the ISC license.
10616
- * See the LICENSE file in the root directory of this source tree.
10617
- *)
10618
-
10619
10415
  lucide-react/dist/esm/icons/type.js:
10620
- (**
10621
- * @license lucide-react v0.468.0 - ISC
10622
- *
10623
- * This source code is licensed under the ISC license.
10624
- * See the LICENSE file in the root directory of this source tree.
10625
- *)
10626
-
10627
10416
  lucide-react/dist/esm/icons/undo-2.js:
10628
- (**
10629
- * @license lucide-react v0.468.0 - ISC
10630
- *
10631
- * This source code is licensed under the ISC license.
10632
- * See the LICENSE file in the root directory of this source tree.
10633
- *)
10634
-
10635
10417
  lucide-react/dist/esm/icons/x.js:
10636
- (**
10637
- * @license lucide-react v0.468.0 - ISC
10638
- *
10639
- * This source code is licensed under the ISC license.
10640
- * See the LICENSE file in the root directory of this source tree.
10641
- *)
10642
-
10643
10418
  lucide-react/dist/esm/icons/zoom-in.js:
10644
- (**
10645
- * @license lucide-react v0.468.0 - ISC
10646
- *
10647
- * This source code is licensed under the ISC license.
10648
- * See the LICENSE file in the root directory of this source tree.
10649
- *)
10650
-
10651
10419
  lucide-react/dist/esm/icons/zoom-out.js:
10652
- (**
10653
- * @license lucide-react v0.468.0 - ISC
10654
- *
10655
- * This source code is licensed under the ISC license.
10656
- * See the LICENSE file in the root directory of this source tree.
10657
- *)
10658
-
10659
10420
  lucide-react/dist/esm/lucide-react.js:
10660
10421
  (**
10661
10422
  * @license lucide-react v0.468.0 - ISC