@measured/puck 0.14.2 → 0.14.3-canary.5c8c0e1

Sign up to get free protection for your applications and to get access to all the features.
@@ -110,16 +110,12 @@ type ExternalField<Props extends {
110
110
  filterFields?: Record<string, Field>;
111
111
  initialFilters?: Record<string, any>;
112
112
  };
113
- type CustomField<Props extends {
114
- [key: string]: any;
115
- } = {
116
- [key: string]: any;
117
- }> = BaseField & {
113
+ type CustomField<Props extends any = {}> = BaseField & {
118
114
  type: "custom";
119
115
  render: (props: {
120
- field: CustomField;
116
+ field: CustomField<Props>;
121
117
  name: string;
122
- value: any;
118
+ value: Props;
123
119
  onChange: (value: Props) => void;
124
120
  readOnly?: boolean;
125
121
  }) => ReactElement;
@@ -128,7 +124,7 @@ type Field<Props extends {
128
124
  [key: string]: any;
129
125
  } = {
130
126
  [key: string]: any;
131
- }> = TextField | NumberField | TextareaField | SelectField | RadioField | ArrayField<Props> | ObjectField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
127
+ }> = TextField | NumberField | TextareaField | SelectField | RadioField | ArrayField<Props> | ObjectField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField<Props>;
132
128
  type DefaultRootProps = {
133
129
  title?: string;
134
130
  [key: string]: any;
package/dist/index.css CHANGED
@@ -135,9 +135,6 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
- .Puck {
139
- min-height: 100%;
140
- }
141
138
 
142
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
143
140
  ._Button_1t64k_1 {
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-09628f3c.js';
2
- export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-09628f3c.js';
1
+ import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-550396e1.js';
2
+ export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-550396e1.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
package/dist/index.js CHANGED
@@ -8033,9 +8033,9 @@ var require_react_dom_development = __commonJS({
8033
8033
  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
8034
8034
  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
8035
8035
  }
8036
- var React2 = require("react");
8036
+ var React3 = require("react");
8037
8037
  var Scheduler = require_scheduler();
8038
- var ReactSharedInternals = React2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
8038
+ var ReactSharedInternals = React3.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
8039
8039
  var suppressWarning = false;
8040
8040
  function setSuppressWarning(newSuppressWarning) {
8041
8041
  {
@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
8084
8084
  var HostPortal = 4;
8085
8085
  var HostComponent = 5;
8086
8086
  var HostText = 6;
8087
- var Fragment17 = 7;
8087
+ var Fragment18 = 7;
8088
8088
  var Mode = 8;
8089
8089
  var ContextConsumer = 9;
8090
8090
  var ContextProvider = 10;
@@ -9240,7 +9240,7 @@ var require_react_dom_development = __commonJS({
9240
9240
  return "DehydratedFragment";
9241
9241
  case ForwardRef:
9242
9242
  return getWrappedName$1(type, type.render, "ForwardRef");
9243
- case Fragment17:
9243
+ case Fragment18:
9244
9244
  return "Fragment";
9245
9245
  case HostComponent:
9246
9246
  return type;
@@ -9640,7 +9640,7 @@ var require_react_dom_development = __commonJS({
9640
9640
  {
9641
9641
  if (props.value == null) {
9642
9642
  if (typeof props.children === "object" && props.children !== null) {
9643
- React2.Children.forEach(props.children, function(child) {
9643
+ React3.Children.forEach(props.children, function(child) {
9644
9644
  if (child == null) {
9645
9645
  return;
9646
9646
  }
@@ -18087,7 +18087,7 @@ var require_react_dom_development = __commonJS({
18087
18087
  }
18088
18088
  }
18089
18089
  var fakeInternalInstance = {};
18090
- var emptyRefsObject = new React2.Component().refs;
18090
+ var emptyRefsObject = new React3.Component().refs;
18091
18091
  var didWarnAboutStateAssignmentForComponent;
18092
18092
  var didWarnAboutUninitializedState;
18093
18093
  var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -18911,7 +18911,7 @@ var require_react_dom_development = __commonJS({
18911
18911
  }
18912
18912
  }
18913
18913
  function updateFragment2(returnFiber, current2, fragment, lanes, key) {
18914
- if (current2 === null || current2.tag !== Fragment17) {
18914
+ if (current2 === null || current2.tag !== Fragment18) {
18915
18915
  var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
18916
18916
  created.return = returnFiber;
18917
18917
  return created;
@@ -19314,7 +19314,7 @@ var require_react_dom_development = __commonJS({
19314
19314
  if (child.key === key) {
19315
19315
  var elementType = element.type;
19316
19316
  if (elementType === REACT_FRAGMENT_TYPE) {
19317
- if (child.tag === Fragment17) {
19317
+ if (child.tag === Fragment18) {
19318
19318
  deleteRemainingChildren(returnFiber, child.sibling);
19319
19319
  var existing = useFiber(child, element.props.children);
19320
19320
  existing.return = returnFiber;
@@ -23489,7 +23489,7 @@ var require_react_dom_development = __commonJS({
23489
23489
  var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
23490
23490
  return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
23491
23491
  }
23492
- case Fragment17:
23492
+ case Fragment18:
23493
23493
  return updateFragment(current2, workInProgress2, renderLanes2);
23494
23494
  case Mode:
23495
23495
  return updateMode(current2, workInProgress2, renderLanes2);
@@ -23762,7 +23762,7 @@ var require_react_dom_development = __commonJS({
23762
23762
  case SimpleMemoComponent:
23763
23763
  case FunctionComponent:
23764
23764
  case ForwardRef:
23765
- case Fragment17:
23765
+ case Fragment18:
23766
23766
  case Mode:
23767
23767
  case Profiler:
23768
23768
  case ContextConsumer:
@@ -28021,7 +28021,7 @@ var require_react_dom_development = __commonJS({
28021
28021
  return fiber;
28022
28022
  }
28023
28023
  function createFiberFromFragment(elements, mode, lanes, key) {
28024
- var fiber = createFiber(Fragment17, elements, key, mode);
28024
+ var fiber = createFiber(Fragment18, elements, key, mode);
28025
28025
  fiber.lanes = lanes;
28026
28026
  return fiber;
28027
28027
  }
@@ -29314,7 +29314,7 @@ var defaultViewports = [
29314
29314
  var import_ua_parser_js = require("ua-parser-js");
29315
29315
  var import_jsx_runtime2 = require("react/jsx-runtime");
29316
29316
  var defaultAppState = {
29317
- data: { content: [], root: { props: { title: "" } } },
29317
+ data: { content: [], root: { props: {} } },
29318
29318
  ui: {
29319
29319
  leftSideBarVisible: true,
29320
29320
  rightSideBarVisible: true,
@@ -30528,7 +30528,7 @@ var IconButton = ({
30528
30528
 
30529
30529
  // components/Puck/index.tsx
30530
30530
  init_react_import();
30531
- var import_react28 = require("react");
30531
+ var import_react29 = require("react");
30532
30532
 
30533
30533
  // lib/use-placeholder-style.ts
30534
30534
  init_react_import();
@@ -31213,7 +31213,7 @@ var useResolvedData = (appState, config, dispatch) => {
31213
31213
  const [componentState, setComponentState] = (0, import_react13.useState)({});
31214
31214
  const deferredSetStates = {};
31215
31215
  const setComponentLoading = (0, import_react13.useCallback)(
31216
- (id, loading, defer = 0) => {
31216
+ (id, loading, defer2 = 0) => {
31217
31217
  if (deferredSetStates[id]) {
31218
31218
  clearTimeout(deferredSetStates[id]);
31219
31219
  delete deferredSetStates[id];
@@ -31223,7 +31223,7 @@ var useResolvedData = (appState, config, dispatch) => {
31223
31223
  [id]: __spreadProps(__spreadValues({}, prev[id]), { loading })
31224
31224
  }));
31225
31225
  delete deferredSetStates[id];
31226
- }, defer);
31226
+ }, defer2);
31227
31227
  },
31228
31228
  []
31229
31229
  );
@@ -31309,7 +31309,7 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
31309
31309
  var getClassName9 = get_class_name_factory_default("MenuBar", styles_module_default7);
31310
31310
  var MenuBar = ({
31311
31311
  appState,
31312
- data = { content: [], root: { props: { title: "" } } },
31312
+ data = { content: [], root: {} },
31313
31313
  dispatch,
31314
31314
  menuOpen = false,
31315
31315
  onPublish,
@@ -32627,19 +32627,218 @@ var Components = () => {
32627
32627
 
32628
32628
  // components/Puck/components/Preview/index.tsx
32629
32629
  init_react_import();
32630
- var import_react22 = require("react");
32631
- var import_auto_frame_component = __toESM(require("@measured/auto-frame-component"));
32630
+ var import_react23 = require("react");
32631
+
32632
+ // components/AutoFrame/index.tsx
32633
+ init_react_import();
32634
+ var import_react22 = __toESM(require("react"));
32635
+ var import_react_frame_component = __toESM(require("react-frame-component"));
32636
+ var import_object_hash = __toESM(require("object-hash"));
32637
+ var import_jsx_runtime29 = require("react/jsx-runtime");
32638
+ var styleSelector = 'style, link[rel="stylesheet"]';
32639
+ var collectStyles = (doc) => {
32640
+ const collected = [];
32641
+ doc.head.querySelectorAll(styleSelector).forEach((style) => {
32642
+ collected.push(style);
32643
+ });
32644
+ return collected;
32645
+ };
32646
+ var getStyleSheet = (el) => {
32647
+ return Array.from(document.styleSheets).find((ss) => {
32648
+ const ownerNode = ss.ownerNode;
32649
+ return ownerNode.href === el.href;
32650
+ });
32651
+ };
32652
+ var getStyles = (styleSheet) => {
32653
+ if (styleSheet) {
32654
+ try {
32655
+ return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
32656
+ } catch (e) {
32657
+ console.warn(
32658
+ "Access to stylesheet %s is denied. Ignoring\u2026",
32659
+ styleSheet.href
32660
+ );
32661
+ }
32662
+ }
32663
+ return "";
32664
+ };
32665
+ var defer = (fn) => setTimeout(fn, 0);
32666
+ var CopyHostStyles = ({
32667
+ children,
32668
+ debug = false,
32669
+ onStylesLoaded = () => null
32670
+ }) => {
32671
+ const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
32672
+ (0, import_react22.useEffect)(() => {
32673
+ if (!win || !doc) {
32674
+ return () => {
32675
+ };
32676
+ }
32677
+ let elements = [];
32678
+ const hashes = {};
32679
+ const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
32680
+ const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
32681
+ let mirror;
32682
+ if (el.nodeName === "LINK" && inlineStyles) {
32683
+ mirror = document.createElement("style");
32684
+ mirror.type = "text/css";
32685
+ let styleSheet = getStyleSheet(el);
32686
+ if (!styleSheet) {
32687
+ yield new Promise((resolve) => {
32688
+ const fn = () => {
32689
+ resolve();
32690
+ el.removeEventListener("load", fn);
32691
+ };
32692
+ el.addEventListener("load", fn);
32693
+ });
32694
+ styleSheet = getStyleSheet(el);
32695
+ }
32696
+ const styles = getStyles(styleSheet);
32697
+ if (!styles) {
32698
+ if (debug) {
32699
+ console.warn(
32700
+ `Tried to load styles for link element, but couldn't find them. Skipping...`
32701
+ );
32702
+ }
32703
+ return;
32704
+ }
32705
+ mirror.innerHTML = styles;
32706
+ mirror.setAttribute("data-href", el.getAttribute("href"));
32707
+ } else {
32708
+ mirror = el.cloneNode(true);
32709
+ }
32710
+ return mirror;
32711
+ });
32712
+ const addEl = (el) => __async(void 0, null, function* () {
32713
+ const index = lookupEl(el);
32714
+ if (index > -1) {
32715
+ if (debug)
32716
+ console.log(
32717
+ `Tried to add an element that was already mirrored. Updating instead...`
32718
+ );
32719
+ elements[index].mirror.innerText = el.innerText;
32720
+ return;
32721
+ }
32722
+ const mirror = yield mirrorEl(el);
32723
+ if (!mirror) {
32724
+ return;
32725
+ }
32726
+ const elHash = (0, import_object_hash.default)(mirror.outerHTML);
32727
+ if (hashes[elHash]) {
32728
+ if (debug)
32729
+ console.log(
32730
+ `iframe already contains element that is being mirrored. Skipping...`
32731
+ );
32732
+ return;
32733
+ }
32734
+ hashes[elHash] = true;
32735
+ doc.head.append(mirror);
32736
+ elements.push({ original: el, mirror });
32737
+ if (debug)
32738
+ console.log(`Added style node ${el.outerHTML}`);
32739
+ });
32740
+ const removeEl = (el) => {
32741
+ var _a, _b;
32742
+ const index = lookupEl(el);
32743
+ if (index === -1) {
32744
+ if (debug)
32745
+ console.log(
32746
+ `Tried to remove an element that did not exist. Skipping...`
32747
+ );
32748
+ return;
32749
+ }
32750
+ const elHash = (0, import_object_hash.default)(el.outerHTML);
32751
+ (_b = (_a = elements[index]) == null ? void 0 : _a.mirror) == null ? void 0 : _b.remove();
32752
+ delete hashes[elHash];
32753
+ if (debug)
32754
+ console.log(`Removed style node ${el.outerHTML}`);
32755
+ };
32756
+ const observer = new MutationObserver((mutations) => {
32757
+ mutations.forEach((mutation) => {
32758
+ if (mutation.type === "childList") {
32759
+ mutation.addedNodes.forEach((node) => {
32760
+ if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
32761
+ const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
32762
+ if (el && el.matches(styleSelector)) {
32763
+ defer(() => addEl(el));
32764
+ }
32765
+ }
32766
+ });
32767
+ mutation.removedNodes.forEach((node) => {
32768
+ if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
32769
+ const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
32770
+ if (el && el.matches(styleSelector)) {
32771
+ defer(() => removeEl(el));
32772
+ }
32773
+ }
32774
+ });
32775
+ }
32776
+ });
32777
+ });
32778
+ const parentDocument = win.parent.document;
32779
+ const collectedStyles = collectStyles(parentDocument);
32780
+ const hrefs = [];
32781
+ let stylesLoaded = 0;
32782
+ Promise.all(
32783
+ collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
32784
+ if (styleNode.nodeName === "LINK") {
32785
+ const linkHref = styleNode.href;
32786
+ if (hrefs.indexOf(linkHref) > -1) {
32787
+ return;
32788
+ }
32789
+ hrefs.push(linkHref);
32790
+ }
32791
+ const mirror = yield mirrorEl(styleNode);
32792
+ if (!mirror)
32793
+ return;
32794
+ elements.push({ original: styleNode, mirror });
32795
+ return mirror;
32796
+ }))
32797
+ ).then((mirrorStyles) => {
32798
+ const filtered = mirrorStyles.filter(
32799
+ (el) => typeof el !== "undefined"
32800
+ );
32801
+ filtered.forEach((mirror) => {
32802
+ mirror.onload = () => {
32803
+ stylesLoaded = stylesLoaded + 1;
32804
+ if (stylesLoaded >= elements.length) {
32805
+ onStylesLoaded();
32806
+ }
32807
+ };
32808
+ });
32809
+ doc.head.innerHTML = "";
32810
+ doc.head.append(...filtered);
32811
+ observer.observe(parentDocument.head, { childList: true, subtree: true });
32812
+ filtered.forEach((el) => {
32813
+ const elHash = (0, import_object_hash.default)(el.outerHTML);
32814
+ hashes[elHash] = true;
32815
+ });
32816
+ });
32817
+ return () => {
32818
+ observer.disconnect();
32819
+ };
32820
+ }, []);
32821
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
32822
+ };
32823
+ var AutoFrameComponent = import_react22.default.forwardRef(
32824
+ function(_a, ref) {
32825
+ var _b = _a, { children, debug, onStylesLoaded } = _b, props = __objRest(_b, ["children", "debug", "onStylesLoaded"]);
32826
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_frame_component.default, __spreadProps(__spreadValues({}, props), { ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
32827
+ }
32828
+ );
32829
+ AutoFrameComponent.displayName = "AutoFrameComponent";
32830
+ var AutoFrame_default = AutoFrameComponent;
32632
32831
 
32633
32832
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
32634
32833
  init_react_import();
32635
32834
  var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
32636
32835
 
32637
32836
  // components/Puck/components/Preview/index.tsx
32638
- var import_jsx_runtime29 = require("react/jsx-runtime");
32837
+ var import_jsx_runtime30 = require("react/jsx-runtime");
32639
32838
  var getClassName21 = get_class_name_factory_default("PuckPreview", styles_module_default16);
32640
32839
  var Preview = ({ id = "puck-preview" }) => {
32641
32840
  const { config, dispatch, state, setStatus, iframe } = useAppContext();
32642
- const Page = (0, import_react22.useCallback)(
32841
+ const Page = (0, import_react23.useCallback)(
32643
32842
  (pageProps) => {
32644
32843
  var _a, _b;
32645
32844
  return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
@@ -32647,13 +32846,13 @@ var Preview = ({ id = "puck-preview" }) => {
32647
32846
  }, pageProps), {
32648
32847
  editMode: true,
32649
32848
  puck: { renderDropZone: DropZone }
32650
- })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
32849
+ })) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: pageProps.children });
32651
32850
  },
32652
32851
  [config.root]
32653
32852
  );
32654
32853
  const rootProps = state.data.root.props || state.data.root;
32655
- const ref = (0, import_react22.useRef)(null);
32656
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
32854
+ const ref = (0, import_react23.useRef)(null);
32855
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
32657
32856
  "div",
32658
32857
  {
32659
32858
  className: getClassName21(),
@@ -32661,8 +32860,8 @@ var Preview = ({ id = "puck-preview" }) => {
32661
32860
  onClick: () => {
32662
32861
  dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
32663
32862
  },
32664
- children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
32665
- import_auto_frame_component.default,
32863
+ children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
32864
+ AutoFrame_default,
32666
32865
  {
32667
32866
  id: "preview-frame",
32668
32867
  className: getClassName21("frame"),
@@ -32671,9 +32870,9 @@ var Preview = ({ id = "puck-preview" }) => {
32671
32870
  onStylesLoaded: () => {
32672
32871
  setStatus("READY");
32673
32872
  },
32674
- children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) }))
32873
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId }) }))
32675
32874
  }
32676
- ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) })) })
32875
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId }) })) })
32677
32876
  }
32678
32877
  );
32679
32878
  };
@@ -32721,7 +32920,7 @@ var scrollIntoView = (el) => {
32721
32920
  };
32722
32921
 
32723
32922
  // components/LayerTree/index.tsx
32724
- var import_react23 = require("react");
32923
+ var import_react24 = require("react");
32725
32924
 
32726
32925
  // lib/is-child-of-zone.ts
32727
32926
  init_react_import();
@@ -32735,7 +32934,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
32735
32934
  };
32736
32935
 
32737
32936
  // components/LayerTree/index.tsx
32738
- var import_jsx_runtime30 = require("react/jsx-runtime");
32937
+ var import_jsx_runtime31 = require("react/jsx-runtime");
32739
32938
  var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default17);
32740
32939
  var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
32741
32940
  var LayerTree = ({
@@ -32748,15 +32947,15 @@ var LayerTree = ({
32748
32947
  label
32749
32948
  }) => {
32750
32949
  const zones = data.zones || {};
32751
- const ctx = (0, import_react23.useContext)(dropZoneContext);
32752
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
32753
- label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName22("zoneTitle"), children: [
32754
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Layers, { size: "16" }) }),
32950
+ const ctx = (0, import_react24.useContext)(dropZoneContext);
32951
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
32952
+ label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassName22("zoneTitle"), children: [
32953
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Layers, { size: "16" }) }),
32755
32954
  " ",
32756
32955
  label
32757
32956
  ] }),
32758
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: getClassName22(), children: [
32759
- zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName22("helper"), children: "No items" }),
32957
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: getClassName22(), children: [
32958
+ zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("helper"), children: "No items" }),
32760
32959
  zoneContent.map((item, i) => {
32761
32960
  var _a;
32762
32961
  const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -32772,7 +32971,7 @@ var LayerTree = ({
32772
32971
  const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
32773
32972
  const isHovering = hoveringComponent === item.props.id;
32774
32973
  const childIsSelected = isChildOfZone(item, selectedItem, ctx);
32775
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
32974
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
32776
32975
  "li",
32777
32976
  {
32778
32977
  className: getClassNameLayer({
@@ -32782,7 +32981,7 @@ var LayerTree = ({
32782
32981
  childIsSelected
32783
32982
  }),
32784
32983
  children: [
32785
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
32984
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
32786
32985
  "button",
32787
32986
  {
32788
32987
  className: getClassNameLayer("clickable"),
@@ -32814,22 +33013,22 @@ var LayerTree = ({
32814
33013
  setHoveringComponent(null);
32815
33014
  },
32816
33015
  children: [
32817
- containsZone && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
33016
+ containsZone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
32818
33017
  "div",
32819
33018
  {
32820
33019
  className: getClassNameLayer("chevron"),
32821
33020
  title: isSelected ? "Collapse" : "Expand",
32822
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: "12" })
33021
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDown, { size: "12" })
32823
33022
  }
32824
33023
  ),
32825
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassNameLayer("title"), children: [
32826
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LayoutGrid, { size: "16" }) }),
32827
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
33024
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassNameLayer("title"), children: [
33025
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LayoutGrid, { size: "16" }) }),
33026
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
32828
33027
  ] })
32829
33028
  ]
32830
33029
  }
32831
33030
  ) }),
32832
- containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
33031
+ containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
32833
33032
  LayerTree,
32834
33033
  {
32835
33034
  config,
@@ -32851,13 +33050,13 @@ var LayerTree = ({
32851
33050
  };
32852
33051
 
32853
33052
  // components/Puck/components/Outline/index.tsx
32854
- var import_react24 = require("react");
32855
- var import_jsx_runtime31 = require("react/jsx-runtime");
33053
+ var import_react25 = require("react");
33054
+ var import_jsx_runtime32 = require("react/jsx-runtime");
32856
33055
  var Outline = () => {
32857
33056
  const { dispatch, state, overrides, config } = useAppContext();
32858
33057
  const { data, ui } = state;
32859
33058
  const { itemSelector } = ui;
32860
- const setItemSelector = (0, import_react24.useCallback)(
33059
+ const setItemSelector = (0, import_react25.useCallback)(
32861
33060
  (newItemSelector) => {
32862
33061
  dispatch({
32863
33062
  type: "setUi",
@@ -32866,9 +33065,9 @@ var Outline = () => {
32866
33065
  },
32867
33066
  []
32868
33067
  );
32869
- const Wrapper = (0, import_react24.useMemo)(() => overrides.outline || "div", [overrides]);
32870
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
32871
- (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
33068
+ const Wrapper = (0, import_react25.useMemo)(() => overrides.outline || "div", [overrides]);
33069
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
33070
+ (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
32872
33071
  LayerTree,
32873
33072
  {
32874
33073
  config,
@@ -32881,7 +33080,7 @@ var Outline = () => {
32881
33080
  ),
32882
33081
  Object.entries(findZonesForArea(data, "root")).map(
32883
33082
  ([zoneKey, zone]) => {
32884
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
33083
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
32885
33084
  LayerTree,
32886
33085
  {
32887
33086
  config,
@@ -32966,12 +33165,12 @@ function usePuckHistory({
32966
33165
 
32967
33166
  // lib/use-history-store.ts
32968
33167
  init_react_import();
32969
- var import_react25 = require("react");
33168
+ var import_react26 = require("react");
32970
33169
  var import_use_debounce3 = require("use-debounce");
32971
33170
  var EMPTY_HISTORY_INDEX = -1;
32972
33171
  function useHistoryStore() {
32973
- const [histories, setHistories] = (0, import_react25.useState)([]);
32974
- const [index, setIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
33172
+ const [histories, setHistories] = (0, import_react26.useState)([]);
33173
+ const [index, setIndex] = (0, import_react26.useState)(EMPTY_HISTORY_INDEX);
32975
33174
  const hasPast = index > EMPTY_HISTORY_INDEX;
32976
33175
  const hasFuture = index < histories.length - 1;
32977
33176
  const currentHistory = histories[index];
@@ -33131,22 +33330,22 @@ var getBox = function getBox2(el) {
33131
33330
  };
33132
33331
 
33133
33332
  // components/Puck/components/Canvas/index.tsx
33134
- var import_react27 = require("react");
33333
+ var import_react28 = require("react");
33135
33334
 
33136
33335
  // components/ViewportControls/index.tsx
33137
33336
  init_react_import();
33138
- var import_react26 = require("react");
33337
+ var import_react27 = require("react");
33139
33338
 
33140
33339
  // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
33141
33340
  init_react_import();
33142
33341
  var styles_module_default18 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
33143
33342
 
33144
33343
  // components/ViewportControls/index.tsx
33145
- var import_jsx_runtime32 = require("react/jsx-runtime");
33344
+ var import_jsx_runtime33 = require("react/jsx-runtime");
33146
33345
  var icons = {
33147
- Smartphone: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Smartphone, { size: 16 }),
33148
- Tablet: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tablet, { size: 16 }),
33149
- Monitor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Monitor, { size: 16 })
33346
+ Smartphone: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Smartphone, { size: 16 }),
33347
+ Tablet: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tablet, { size: 16 }),
33348
+ Monitor: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Monitor, { size: 16 })
33150
33349
  };
33151
33350
  var getClassName23 = get_class_name_factory_default("ViewportControls", styles_module_default18);
33152
33351
  var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default18);
@@ -33158,11 +33357,11 @@ var ViewportButton = ({
33158
33357
  onClick
33159
33358
  }) => {
33160
33359
  const { state } = useAppContext();
33161
- const [isActive, setIsActive] = (0, import_react26.useState)(false);
33162
- (0, import_react26.useEffect)(() => {
33360
+ const [isActive, setIsActive] = (0, import_react27.useState)(false);
33361
+ (0, import_react27.useEffect)(() => {
33163
33362
  setIsActive(width === state.ui.viewports.current.width);
33164
33363
  }, [width, state.ui.viewports.current.width]);
33165
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33364
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33166
33365
  IconButton,
33167
33366
  {
33168
33367
  title,
@@ -33171,7 +33370,7 @@ var ViewportButton = ({
33171
33370
  e.stopPropagation();
33172
33371
  onClick({ width, height });
33173
33372
  },
33174
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: getClassNameButton("inner"), children })
33373
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton("inner"), children })
33175
33374
  }
33176
33375
  ) });
33177
33376
  };
@@ -33195,7 +33394,7 @@ var ViewportControls = ({
33195
33394
  const defaultsContainAutoZoom = defaultZoomOptions.find(
33196
33395
  (option) => option.value === autoZoom
33197
33396
  );
33198
- const zoomOptions = (0, import_react26.useMemo)(
33397
+ const zoomOptions = (0, import_react27.useMemo)(
33199
33398
  () => [
33200
33399
  ...defaultZoomOptions,
33201
33400
  ...defaultsContainAutoZoom ? [] : [
@@ -33207,8 +33406,8 @@ var ViewportControls = ({
33207
33406
  ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
33208
33407
  [autoZoom]
33209
33408
  );
33210
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassName23(), children: [
33211
- viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33409
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName23(), children: [
33410
+ viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33212
33411
  ViewportButton,
33213
33412
  {
33214
33413
  height: viewport.height,
@@ -33219,8 +33418,8 @@ var ViewportControls = ({
33219
33418
  },
33220
33419
  i
33221
33420
  )),
33222
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName23("divider") }),
33223
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33421
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
33422
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33224
33423
  IconButton,
33225
33424
  {
33226
33425
  title: "Zoom viewport out",
@@ -33234,10 +33433,10 @@ var ViewportControls = ({
33234
33433
  )].value
33235
33434
  );
33236
33435
  },
33237
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ZoomOut, { size: 16 })
33436
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomOut, { size: 16 })
33238
33437
  }
33239
33438
  ),
33240
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33439
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33241
33440
  IconButton,
33242
33441
  {
33243
33442
  title: "Zoom viewport in",
@@ -33251,11 +33450,11 @@ var ViewportControls = ({
33251
33450
  )].value
33252
33451
  );
33253
33452
  },
33254
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ZoomIn, { size: 16 })
33453
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomIn, { size: 16 })
33255
33454
  }
33256
33455
  ),
33257
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName23("divider") }),
33258
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33456
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
33457
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33259
33458
  "select",
33260
33459
  {
33261
33460
  className: getClassName23("zoomSelect"),
@@ -33263,7 +33462,7 @@ var ViewportControls = ({
33263
33462
  onChange: (e) => {
33264
33463
  onZoom(parseFloat(e.currentTarget.value));
33265
33464
  },
33266
- children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
33465
+ children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33267
33466
  "option",
33268
33467
  {
33269
33468
  value: option.value,
@@ -33311,24 +33510,24 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
33311
33510
  };
33312
33511
 
33313
33512
  // components/Puck/components/Canvas/index.tsx
33314
- var import_jsx_runtime33 = require("react/jsx-runtime");
33513
+ var import_jsx_runtime34 = require("react/jsx-runtime");
33315
33514
  var getClassName24 = get_class_name_factory_default("PuckCanvas", styles_module_default19);
33316
33515
  var ZOOM_ON_CHANGE = true;
33317
33516
  var Canvas = () => {
33318
33517
  const { status, iframe } = useAppContext();
33319
33518
  const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
33320
33519
  const { ui } = state;
33321
- const frameRef = (0, import_react27.useRef)(null);
33322
- const [showTransition, setShowTransition] = (0, import_react27.useState)(false);
33323
- const defaultRender = (0, import_react27.useMemo)(() => {
33324
- const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
33520
+ const frameRef = (0, import_react28.useRef)(null);
33521
+ const [showTransition, setShowTransition] = (0, import_react28.useState)(false);
33522
+ const defaultRender = (0, import_react28.useMemo)(() => {
33523
+ const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
33325
33524
  return PuckDefault;
33326
33525
  }, []);
33327
- const CustomPreview = (0, import_react27.useMemo)(
33526
+ const CustomPreview = (0, import_react28.useMemo)(
33328
33527
  () => overrides.preview || defaultRender,
33329
33528
  [overrides]
33330
33529
  );
33331
- const getFrameDimensions = (0, import_react27.useCallback)(() => {
33530
+ const getFrameDimensions = (0, import_react28.useCallback)(() => {
33332
33531
  if (frameRef.current) {
33333
33532
  const frame = frameRef.current;
33334
33533
  const box = getBox(frame);
@@ -33336,7 +33535,7 @@ var Canvas = () => {
33336
33535
  }
33337
33536
  return { width: 0, height: 0 };
33338
33537
  }, [frameRef]);
33339
- const resetAutoZoom = (0, import_react27.useCallback)(
33538
+ const resetAutoZoom = (0, import_react28.useCallback)(
33340
33539
  (ui2 = state.ui) => {
33341
33540
  if (frameRef.current) {
33342
33541
  setZoomConfig(
@@ -33346,11 +33545,11 @@ var Canvas = () => {
33346
33545
  },
33347
33546
  [frameRef, zoomConfig, state.ui]
33348
33547
  );
33349
- (0, import_react27.useEffect)(() => {
33548
+ (0, import_react28.useEffect)(() => {
33350
33549
  setShowTransition(false);
33351
33550
  resetAutoZoom();
33352
33551
  }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
33353
- (0, import_react27.useEffect)(() => {
33552
+ (0, import_react28.useEffect)(() => {
33354
33553
  const { height: frameHeight } = getFrameDimensions();
33355
33554
  if (ui.viewports.current.height === "auto") {
33356
33555
  setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -33358,7 +33557,7 @@ var Canvas = () => {
33358
33557
  }));
33359
33558
  }
33360
33559
  }, [zoomConfig.zoom]);
33361
- (0, import_react27.useEffect)(() => {
33560
+ (0, import_react28.useEffect)(() => {
33362
33561
  const observer = new ResizeObserver(() => {
33363
33562
  setShowTransition(false);
33364
33563
  resetAutoZoom();
@@ -33370,7 +33569,7 @@ var Canvas = () => {
33370
33569
  observer.disconnect();
33371
33570
  };
33372
33571
  }, []);
33373
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
33572
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
33374
33573
  "div",
33375
33574
  {
33376
33575
  className: getClassName24({
@@ -33382,7 +33581,7 @@ var Canvas = () => {
33382
33581
  recordHistory: true
33383
33582
  }),
33384
33583
  children: [
33385
- ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33584
+ ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33386
33585
  ViewportControls,
33387
33586
  {
33388
33587
  autoZoom: zoomConfig.autoZoom,
@@ -33407,7 +33606,7 @@ var Canvas = () => {
33407
33606
  }
33408
33607
  }
33409
33608
  ) }),
33410
- /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
33609
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33411
33610
  "div",
33412
33611
  {
33413
33612
  className: getClassName24("root"),
@@ -33419,7 +33618,7 @@ var Canvas = () => {
33419
33618
  overflow: iframe.enabled ? void 0 : "auto"
33420
33619
  },
33421
33620
  suppressHydrationWarning: true,
33422
- children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
33621
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Preview, {}) })
33423
33622
  }
33424
33623
  ) })
33425
33624
  ]
@@ -33428,12 +33627,12 @@ var Canvas = () => {
33428
33627
  };
33429
33628
 
33430
33629
  // components/Puck/index.tsx
33431
- var import_jsx_runtime34 = require("react/jsx-runtime");
33630
+ var import_jsx_runtime35 = require("react/jsx-runtime");
33432
33631
  var getClassName25 = get_class_name_factory_default("Puck", styles_module_default8);
33433
33632
  function Puck({
33434
33633
  children,
33435
33634
  config,
33436
- data: initialData = { content: [], root: { props: { title: "" } } },
33635
+ data: initialData = { content: [], root: {} },
33437
33636
  ui: initialUi,
33438
33637
  onChange,
33439
33638
  onPublish,
@@ -33451,11 +33650,11 @@ function Puck({
33451
33650
  }) {
33452
33651
  var _a;
33453
33652
  const historyStore = useHistoryStore();
33454
- const [reducer] = (0, import_react28.useState)(
33653
+ const [reducer] = (0, import_react29.useState)(
33455
33654
  () => createReducer({ config, record: historyStore.record })
33456
33655
  );
33457
- const [initialAppState] = (0, import_react28.useState)(() => {
33458
- var _a2, _b, _c, _d;
33656
+ const [initialAppState] = (0, import_react29.useState)(() => {
33657
+ var _a2, _b, _c, _d, _e;
33459
33658
  const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
33460
33659
  let clientUiState = {};
33461
33660
  if (typeof window !== "undefined") {
@@ -33482,8 +33681,12 @@ function Puck({
33482
33681
  };
33483
33682
  }
33484
33683
  }
33684
+ const rootProps2 = initialData.root.props || initialData.root;
33685
+ const defaultedRootProps = __spreadValues(__spreadValues({}, (_e = config.root) == null ? void 0 : _e.defaultProps), rootProps2);
33485
33686
  return __spreadProps(__spreadValues({}, defaultAppState), {
33486
- data: initialData,
33687
+ data: __spreadProps(__spreadValues({}, initialData), {
33688
+ root: defaultedRootProps
33689
+ }),
33487
33690
  ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
33488
33691
  // Store categories under componentList on state to allow render functions and plugins to modify
33489
33692
  componentList: config.categories ? Object.entries(config.categories).reduce(
@@ -33502,7 +33705,7 @@ function Puck({
33502
33705
  })
33503
33706
  });
33504
33707
  });
33505
- const [appState, dispatch] = (0, import_react28.useReducer)(
33708
+ const [appState, dispatch] = (0, import_react29.useReducer)(
33506
33709
  reducer,
33507
33710
  flushZones(initialAppState)
33508
33711
  );
@@ -33513,9 +33716,9 @@ function Puck({
33513
33716
  config,
33514
33717
  dispatch
33515
33718
  );
33516
- const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
33719
+ const [menuOpen, setMenuOpen] = (0, import_react29.useState)(false);
33517
33720
  const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
33518
- const setItemSelector = (0, import_react28.useCallback)(
33721
+ const setItemSelector = (0, import_react29.useCallback)(
33519
33722
  (newItemSelector) => {
33520
33723
  if (newItemSelector === itemSelector)
33521
33724
  return;
@@ -33528,21 +33731,21 @@ function Puck({
33528
33731
  [itemSelector]
33529
33732
  );
33530
33733
  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
33531
- (0, import_react28.useEffect)(() => {
33734
+ (0, import_react29.useEffect)(() => {
33532
33735
  if (onChange)
33533
33736
  onChange(data);
33534
33737
  }, [data]);
33535
33738
  const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
33536
- const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
33739
+ const [draggedItem, setDraggedItem] = (0, import_react29.useState)();
33537
33740
  const rootProps = data.root.props || data.root;
33538
- (0, import_react28.useEffect)(() => {
33741
+ (0, import_react29.useEffect)(() => {
33539
33742
  if (Object.keys(data.root).length > 0 && !data.root.props) {
33540
33743
  console.error(
33541
33744
  "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
33542
33745
  );
33543
33746
  }
33544
33747
  }, []);
33545
- const toggleSidebars = (0, import_react28.useCallback)(
33748
+ const toggleSidebars = (0, import_react29.useCallback)(
33546
33749
  (sidebar) => {
33547
33750
  const widerViewport = window.matchMedia("(min-width: 638px)").matches;
33548
33751
  const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -33556,7 +33759,7 @@ function Puck({
33556
33759
  },
33557
33760
  [dispatch, leftSideBarVisible, rightSideBarVisible]
33558
33761
  );
33559
- (0, import_react28.useEffect)(() => {
33762
+ (0, import_react29.useEffect)(() => {
33560
33763
  if (!window.matchMedia("(min-width: 638px)").matches) {
33561
33764
  dispatch({
33562
33765
  type: "setUi",
@@ -33579,11 +33782,11 @@ function Puck({
33579
33782
  window.removeEventListener("resize", handleResize);
33580
33783
  };
33581
33784
  }, []);
33582
- const defaultRender = (0, import_react28.useMemo)(() => {
33583
- const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: children2 });
33785
+ const defaultRender = (0, import_react29.useMemo)(() => {
33786
+ const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: children2 });
33584
33787
  return PuckDefault;
33585
33788
  }, []);
33586
- const defaultHeaderRender = (0, import_react28.useMemo)(() => {
33789
+ const defaultHeaderRender = (0, import_react29.useMemo)(() => {
33587
33790
  if (renderHeader) {
33588
33791
  console.warn(
33589
33792
  "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -33591,45 +33794,45 @@ function Puck({
33591
33794
  const RenderHeader = (_a2) => {
33592
33795
  var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
33593
33796
  const Comp = renderHeader;
33594
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
33797
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
33595
33798
  };
33596
33799
  return RenderHeader;
33597
33800
  }
33598
33801
  return defaultRender;
33599
33802
  }, [renderHeader]);
33600
- const defaultHeaderActionsRender = (0, import_react28.useMemo)(() => {
33803
+ const defaultHeaderActionsRender = (0, import_react29.useMemo)(() => {
33601
33804
  if (renderHeaderActions) {
33602
33805
  console.warn(
33603
33806
  "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
33604
33807
  );
33605
33808
  const RenderHeader = (props) => {
33606
33809
  const Comp = renderHeaderActions;
33607
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
33810
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
33608
33811
  };
33609
33812
  return RenderHeader;
33610
33813
  }
33611
33814
  return defaultRender;
33612
33815
  }, [renderHeader]);
33613
- const loadedOverrides = (0, import_react28.useMemo)(() => {
33816
+ const loadedOverrides = (0, import_react29.useMemo)(() => {
33614
33817
  return loadOverrides({ overrides, plugins });
33615
33818
  }, [plugins]);
33616
- const CustomPuck = (0, import_react28.useMemo)(
33819
+ const CustomPuck = (0, import_react29.useMemo)(
33617
33820
  () => loadedOverrides.puck || defaultRender,
33618
33821
  [loadedOverrides]
33619
33822
  );
33620
- const CustomHeader = (0, import_react28.useMemo)(
33823
+ const CustomHeader = (0, import_react29.useMemo)(
33621
33824
  () => loadedOverrides.header || defaultHeaderRender,
33622
33825
  [loadedOverrides]
33623
33826
  );
33624
- const CustomHeaderActions = (0, import_react28.useMemo)(
33827
+ const CustomHeaderActions = (0, import_react29.useMemo)(
33625
33828
  () => loadedOverrides.headerActions || defaultHeaderActionsRender,
33626
33829
  [loadedOverrides]
33627
33830
  );
33628
- const [mounted, setMounted] = (0, import_react28.useState)(false);
33629
- (0, import_react28.useEffect)(() => {
33831
+ const [mounted, setMounted] = (0, import_react29.useState)(false);
33832
+ (0, import_react29.useEffect)(() => {
33630
33833
  setMounted(true);
33631
33834
  }, []);
33632
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33835
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33633
33836
  AppProvider,
33634
33837
  {
33635
33838
  value: {
@@ -33644,7 +33847,7 @@ function Puck({
33644
33847
  viewports,
33645
33848
  iframe
33646
33849
  },
33647
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33850
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33648
33851
  DragDropContext,
33649
33852
  {
33650
33853
  autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -33700,7 +33903,7 @@ function Puck({
33700
33903
  });
33701
33904
  }
33702
33905
  },
33703
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33906
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33704
33907
  DropZoneProvider,
33705
33908
  {
33706
33909
  value: {
@@ -33714,7 +33917,7 @@ function Puck({
33714
33917
  mode: "edit",
33715
33918
  areaId: "root"
33716
33919
  },
33717
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
33920
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
33718
33921
  "div",
33719
33922
  {
33720
33923
  className: getClassName25({
@@ -33724,65 +33927,65 @@ function Puck({
33724
33927
  rightSideBarVisible
33725
33928
  }),
33726
33929
  children: [
33727
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
33728
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33930
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("layout"), children: [
33931
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33729
33932
  CustomHeader,
33730
33933
  {
33731
- actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33732
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33733
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33934
+ actions: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
33935
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
33936
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33734
33937
  Button,
33735
33938
  {
33736
33939
  onClick: () => {
33737
33940
  onPublish && onPublish(data);
33738
33941
  },
33739
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
33942
+ icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Globe, { size: "14px" }),
33740
33943
  children: "Publish"
33741
33944
  }
33742
33945
  )
33743
33946
  ] }),
33744
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
33745
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
33746
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33947
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerInner"), children: [
33948
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerToggle"), children: [
33949
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33747
33950
  IconButton,
33748
33951
  {
33749
33952
  onClick: () => {
33750
33953
  toggleSidebars("left");
33751
33954
  },
33752
33955
  title: "Toggle left sidebar",
33753
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
33956
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelLeft, { focusable: "false" })
33754
33957
  }
33755
33958
  ) }),
33756
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33959
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33757
33960
  IconButton,
33758
33961
  {
33759
33962
  onClick: () => {
33760
33963
  toggleSidebars("right");
33761
33964
  },
33762
33965
  title: "Toggle right sidebar",
33763
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
33966
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { focusable: "false" })
33764
33967
  }
33765
33968
  ) })
33766
33969
  ] }),
33767
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
33970
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Heading, { rank: 2, size: "xs", children: [
33768
33971
  headerTitle || rootProps.title || "Page",
33769
- headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33972
+ headerPath && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
33770
33973
  " ",
33771
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
33974
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
33772
33975
  ] })
33773
33976
  ] }) }),
33774
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
33775
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33977
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerTools"), children: [
33978
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33776
33979
  IconButton,
33777
33980
  {
33778
33981
  onClick: () => {
33779
33982
  return setMenuOpen(!menuOpen);
33780
33983
  },
33781
33984
  title: "Toggle menu bar",
33782
- children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
33985
+ children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { focusable: "false" })
33783
33986
  }
33784
33987
  ) }),
33785
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33988
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33786
33989
  MenuBar,
33787
33990
  {
33788
33991
  appState,
@@ -33790,7 +33993,7 @@ function Puck({
33790
33993
  dispatch,
33791
33994
  onPublish,
33792
33995
  menuOpen,
33793
- renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33996
+ renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
33794
33997
  setMenuOpen
33795
33998
  }
33796
33999
  )
@@ -33798,23 +34001,23 @@ function Puck({
33798
34001
  ] }) })
33799
34002
  }
33800
34003
  ),
33801
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
33802
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
33803
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
34004
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
34005
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Components, {}) }),
34006
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Outline, {}) })
33804
34007
  ] }),
33805
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
33806
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
34008
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Canvas, {}),
34009
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33807
34010
  SidebarSection,
33808
34011
  {
33809
34012
  noPadding: true,
33810
34013
  noBorderTop: true,
33811
34014
  showBreadcrumbs: true,
33812
34015
  title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
33813
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
34016
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fields, {})
33814
34017
  }
33815
34018
  ) })
33816
34019
  ] }),
33817
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
34020
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
33818
34021
  "div",
33819
34022
  {
33820
34023
  id: "puck-portal-root",
@@ -33838,7 +34041,7 @@ Puck.Preview = Preview;
33838
34041
 
33839
34042
  // components/Render/index.tsx
33840
34043
  init_react_import();
33841
- var import_jsx_runtime35 = require("react/jsx-runtime");
34044
+ var import_jsx_runtime36 = require("react/jsx-runtime");
33842
34045
  function Render({
33843
34046
  config,
33844
34047
  data
@@ -33847,7 +34050,7 @@ function Render({
33847
34050
  const rootProps = data.root.props || data.root;
33848
34051
  const title = (rootProps == null ? void 0 : rootProps.title) || "";
33849
34052
  if ((_a = config.root) == null ? void 0 : _a.render) {
33850
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
34053
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
33851
34054
  config.root.render,
33852
34055
  __spreadProps(__spreadValues({}, rootProps), {
33853
34056
  puck: {
@@ -33856,11 +34059,11 @@ function Render({
33856
34059
  title,
33857
34060
  editMode: false,
33858
34061
  id: "puck-root",
33859
- children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId })
34062
+ children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId })
33860
34063
  })
33861
34064
  ) });
33862
34065
  }
33863
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId }) });
34066
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId }) });
33864
34067
  }
33865
34068
 
33866
34069
  // lib/migrate.ts
package/dist/rsc.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as Config, D as Data } from './Config-09628f3c.js';
2
+ import { C as Config, D as Data } from './Config-550396e1.js';
3
3
  import 'react';
4
4
 
5
5
  declare function Render<UserConfig extends Config = Config>({ config, data, }: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.14.2",
3
+ "version": "0.14.3-canary.5c8c0e1",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",
@@ -60,9 +60,10 @@
60
60
  "typescript": "^4.5.2"
61
61
  },
62
62
  "dependencies": {
63
- "@measured/auto-frame-component": "0.1.7",
64
63
  "@measured/dnd": "16.6.0-canary.4cba1d1",
65
64
  "deep-diff": "^1.0.2",
65
+ "object-hash": "^3.0.0",
66
+ "react-frame-component": "^5.2.6",
66
67
  "react-hotkeys-hook": "^4.4.1",
67
68
  "react-spinners": "^0.13.8",
68
69
  "ua-parser-js": "^1.0.37",