@puckeditor/core 0.21.1 → 0.21.2-canary.2fa198e1

package/dist/{chunk-SKJTJUWU.mjs → chunk-TVE6QYBR.mjs}

@@ -1,7 +1,7 @@
 import {
   List,
   ListOrdered
-} from "./chunk-UMTU6EA7.mjs";
+} from "./chunk-AFOEZCNE.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{chunk-37HTE4KO.mjs → chunk-YLLE6KXH.mjs}

@@ -4,7 +4,7 @@ import {
   setupZone,
   walkAppState,
   walkTree
-} from "./chunk-PMXRXC2B.mjs";
+} from "./chunk-754HNMU2.mjs";
 import {
   __spreadProps,
   __spreadValues,

package/dist/{full-KLPRWVS4.mjs → full-ATSD2DNB.mjs}

@@ -1,14 +1,14 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-5V242HXR.mjs";
-import "./chunk-MSZPUXZP.mjs";
-import "./chunk-KOUWDQ4Q.mjs";
-import "./chunk-SKJTJUWU.mjs";
-import "./chunk-UMTU6EA7.mjs";
-import "./chunk-37HTE4KO.mjs";
-import "./chunk-MDUBGHWF.mjs";
+} from "./chunk-46RDHJGL.mjs";
+import "./chunk-JGZBBNEW.mjs";
+import "./chunk-BSAENBPL.mjs";
+import "./chunk-TVE6QYBR.mjs";
+import "./chunk-AFOEZCNE.mjs";
+import "./chunk-YLLE6KXH.mjs";
+import "./chunk-BOKX3EBR.mjs";
 import "./chunk-Y2EFNT5P.mjs";
-import "./chunk-PMXRXC2B.mjs";
+import "./chunk-754HNMU2.mjs";
 import {
   __spreadValues,
   init_react_import

package/dist/{index-bqD1SEOb.d.mts → index-BVLGipsj.d.mts}

@@ -1,4 +1,4 @@
-import { H as History, g as Permissions, c as ComponentData, C as Config, U as UserGenerics, F as Fields, a as PuckAction, h as RootDataWithProps, i as ResolveDataTrigger, j as Plugin, k as Overrides, V as Viewports, I as IframeConfig, l as UiState, m as ComponentConfig, A as AppState, M as Metadata, n as FieldTransforms, o as RichtextField } from './actions-BkBoKAc5.mjs';
+import { H as History, g as Permissions, c as ComponentData, C as Config, U as UserGenerics, F as Fields, a as PuckAction, h as RootDataWithProps, i as ResolveDataTrigger, j as Plugin, k as Overrides, V as Viewports, I as IframeConfig, l as UiState, m as ComponentConfig, A as AppState, M as Metadata, n as FieldTransforms, o as RichtextField } from './actions-BRYM0ifH.mjs';
 import { Editor } from '@tiptap/react';
 
 type HistorySlice<D = any> = {

package/dist/{index-lt1zf5WR.d.ts → index-D_Idfrfb.d.ts}

@@ -1,4 +1,4 @@
-import { H as History, g as Permissions, c as ComponentData, C as Config, U as UserGenerics, F as Fields, a as PuckAction, h as RootDataWithProps, i as ResolveDataTrigger, j as Plugin, k as Overrides, V as Viewports, I as IframeConfig, l as UiState, m as ComponentConfig, A as AppState, M as Metadata, n as FieldTransforms, o as RichtextField } from './actions-BkBoKAc5.js';
+import { H as History, g as Permissions, c as ComponentData, C as Config, U as UserGenerics, F as Fields, a as PuckAction, h as RootDataWithProps, i as ResolveDataTrigger, j as Plugin, k as Overrides, V as Viewports, I as IframeConfig, l as UiState, m as ComponentConfig, A as AppState, M as Metadata, n as FieldTransforms, o as RichtextField } from './actions-BRYM0ifH.js';
 import { Editor } from '@tiptap/react';
 
 type HistorySlice<D = any> = {

package/dist/index.d.mts

@@ -1,10 +1,10 @@
-import { p as Field, q as FieldProps, r as DropZoneProps, C as Config, U as UserGenerics, D as Data, l as UiState, O as OnAction, g as Permissions, j as Plugin, k as Overrides, n as FieldTransforms, a as PuckAction, V as Viewports, I as IframeConfig, s as InitialHistory, M as Metadata, i as ResolveDataTrigger, t as ItemSelector, c as ComponentData, u as PluginInternal } from './actions-BkBoKAc5.mjs';
-export { ag as Adaptor, A as AppState, ae as ArrayField, N as ArrayState, ar as AsFieldProps, a0 as BaseData, a8 as BaseField, ai as CacheOpts, m as ComponentConfig, X as ComponentConfigExtensions, $ as ComponentConfigParams, a4 as ComponentDataMap, a2 as ComponentDataOptionalId, a6 as ComponentMetadata, _ as ConfigParams, b as Content, al as CustomField, ak as CustomFieldRender, e as DefaultComponentProps, d as DefaultComponents, f as DefaultRootFieldProps, ap as DefaultRootProps, ao as DefaultRootRenderProps, x as Direction, y as DragAxis, aj as ExternalField, ah as ExternalFieldWithAdaptor, Z as ExtractConfigParams, at as ExtractField, a7 as FieldMetadata, K as FieldRenderFunctions, E as FieldTransformFn, B as FieldTransformFnParams, F as Fields, H as History, L as ItemWithId, a3 as MappedItem, aa as NumberField, af as ObjectField, J as OverrideKey, T as PuckComponent, an as PuckContext, a5 as PuckMetadata, ad as RadioField, w as RichText, o as RichtextField, Y as RootConfig, R as RootData, h as RootDataWithProps, a1 as RootDataWithoutProps, ac as SelectField, S as Slot, Q as SlotComponent, am as SlotField, a9 as TextField, ab as TextareaField, z as Viewport, as as WithChildren, W as WithId, aq as WithPuckProps, v as WithSlotProps, G as overrideKeys } from './actions-BkBoKAc5.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CRRDqx6_.mjs';
+import { p as Field, q as FieldProps, r as DropZoneProps, C as Config, U as UserGenerics, D as Data, l as UiState, O as OnAction, g as Permissions, j as Plugin, k as Overrides, n as FieldTransforms, a as PuckAction, V as Viewports, I as IframeConfig, s as InitialHistory, M as Metadata, i as ResolveDataTrigger, t as ItemSelector, c as ComponentData, u as PluginInternal } from './actions-BRYM0ifH.mjs';
+export { v as Adaptor, A as AppState, w as ArrayField, x as ArrayState, y as AsFieldProps, B as BaseData, z as BaseField, E as CacheOpts, m as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, b as Content, S as CustomField, T as CustomFieldRender, e as DefaultComponentProps, d as DefaultComponents, f as DefaultRootFieldProps, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as ExternalField, a0 as ExternalFieldWithAdaptor, a1 as ExtractConfigParams, a2 as ExtractField, a3 as FieldMetadata, a4 as FieldRenderFunctions, a5 as FieldTransformFn, a6 as FieldTransformFnParams, F as Fields, H as History, a7 as ItemWithId, a8 as MappedItem, a9 as NumberField, aa as ObjectField, ab as OverrideKey, ac as PuckComponent, ad as PuckContext, ae as PuckMetadata, af as RadioField, ag as RichText, o as RichtextField, ah as RootConfig, R as RootData, h as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, W as WithId, ar as WithPuckProps, as as WithSlotProps, at as overrideKeys } from './actions-BRYM0ifH.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-C1Zdgx7d.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
-import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-bqD1SEOb.mjs';
+import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-BVLGipsj.mjs';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { p as Field, q as FieldProps, r as DropZoneProps, C as Config, U as UserGenerics, D as Data, l as UiState, O as OnAction, g as Permissions, j as Plugin, k as Overrides, n as FieldTransforms, a as PuckAction, V as Viewports, I as IframeConfig, s as InitialHistory, M as Metadata, i as ResolveDataTrigger, t as ItemSelector, c as ComponentData, u as PluginInternal } from './actions-BkBoKAc5.js';
-export { ag as Adaptor, A as AppState, ae as ArrayField, N as ArrayState, ar as AsFieldProps, a0 as BaseData, a8 as BaseField, ai as CacheOpts, m as ComponentConfig, X as ComponentConfigExtensions, $ as ComponentConfigParams, a4 as ComponentDataMap, a2 as ComponentDataOptionalId, a6 as ComponentMetadata, _ as ConfigParams, b as Content, al as CustomField, ak as CustomFieldRender, e as DefaultComponentProps, d as DefaultComponents, f as DefaultRootFieldProps, ap as DefaultRootProps, ao as DefaultRootRenderProps, x as Direction, y as DragAxis, aj as ExternalField, ah as ExternalFieldWithAdaptor, Z as ExtractConfigParams, at as ExtractField, a7 as FieldMetadata, K as FieldRenderFunctions, E as FieldTransformFn, B as FieldTransformFnParams, F as Fields, H as History, L as ItemWithId, a3 as MappedItem, aa as NumberField, af as ObjectField, J as OverrideKey, T as PuckComponent, an as PuckContext, a5 as PuckMetadata, ad as RadioField, w as RichText, o as RichtextField, Y as RootConfig, R as RootData, h as RootDataWithProps, a1 as RootDataWithoutProps, ac as SelectField, S as Slot, Q as SlotComponent, am as SlotField, a9 as TextField, ab as TextareaField, z as Viewport, as as WithChildren, W as WithId, aq as WithPuckProps, v as WithSlotProps, G as overrideKeys } from './actions-BkBoKAc5.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CS7sEpfG.js';
+import { p as Field, q as FieldProps, r as DropZoneProps, C as Config, U as UserGenerics, D as Data, l as UiState, O as OnAction, g as Permissions, j as Plugin, k as Overrides, n as FieldTransforms, a as PuckAction, V as Viewports, I as IframeConfig, s as InitialHistory, M as Metadata, i as ResolveDataTrigger, t as ItemSelector, c as ComponentData, u as PluginInternal } from './actions-BRYM0ifH.js';
+export { v as Adaptor, A as AppState, w as ArrayField, x as ArrayState, y as AsFieldProps, B as BaseData, z as BaseField, E as CacheOpts, m as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, b as Content, S as CustomField, T as CustomFieldRender, e as DefaultComponentProps, d as DefaultComponents, f as DefaultRootFieldProps, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as ExternalField, a0 as ExternalFieldWithAdaptor, a1 as ExtractConfigParams, a2 as ExtractField, a3 as FieldMetadata, a4 as FieldRenderFunctions, a5 as FieldTransformFn, a6 as FieldTransformFnParams, F as Fields, H as History, a7 as ItemWithId, a8 as MappedItem, a9 as NumberField, aa as ObjectField, ab as OverrideKey, ac as PuckComponent, ad as PuckContext, ae as PuckMetadata, af as RadioField, ag as RichText, o as RichtextField, ah as RootConfig, R as RootData, h as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, W as WithId, ar as WithPuckProps, as as WithSlotProps, at as overrideKeys } from './actions-BRYM0ifH.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-DQyC1GA7.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
-import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-lt1zf5WR.js';
+import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-D_Idfrfb.js';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';

package/dist/index.js

@@ -1651,6 +1651,21 @@ var init_flatten_node = __esm({
   }
 });
 
+// lib/data/to-component.ts
+var toComponent;
+var init_to_component = __esm({
+  "lib/data/to-component.ts"() {
+    "use strict";
+    init_react_import();
+    toComponent = (item) => {
+      return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+        props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+        type: "root"
+      });
+    };
+  }
+});
+
 // lib/data/walk-app-state.ts
 function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
   var _a;
@@ -1714,7 +1729,7 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
       id
     });
     processRelatedZones(item, id, path);
-    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
+    const newItem = __spreadProps(__spreadValues({}, mappedItem), { props: newProps });
     const thisZoneCompound = path[path.length - 1];
     const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
     newNodeIndex[id] = {
@@ -1754,17 +1769,14 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
     );
     newZones[zoneCompound] = newContent2;
   }, newZones);
-  const processedRoot = processItem(
-    {
-      type: "root",
-      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
-    },
-    [],
-    -1
-  );
-  const root = __spreadProps(__spreadValues({}, state.data.root), {
-    props: processedRoot.props
+  let rootAsComponent = toComponent({
+    props: __spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root)
   });
+  if (state.data.root.readOnly) {
+    rootAsComponent.readOnly = state.data.root.readOnly;
+  }
+  const processedRoot = processItem(rootAsComponent, [], -1);
+  const root = __spreadValues(__spreadValues({}, state.data.root), processedRoot);
   return __spreadProps(__spreadValues({}, state), {
     data: {
       root,
@@ -1785,6 +1797,7 @@ var init_walk_app_state = __esm({
     init_root_droppable_id();
     init_map_fields();
     init_flatten_node();
+    init_to_component();
   }
 });
 
@@ -2566,7 +2579,8 @@ var init_use_hotkey = __esm({
       KeyY: "y",
       KeyZ: "z",
       Delete: "delete",
-      Backspace: "backspace"
+      Backspace: "backspace",
+      AltRight: "altRight"
     };
     useHotkeyStore = (0, import_zustand3.create)()(
       (0, import_middleware2.subscribeWithSelector)((set) => ({
@@ -2579,6 +2593,10 @@ var init_use_hotkey = __esm({
     );
     monitorHotkeys = (doc) => {
       const onKeyDown = (e) => {
+        if (e.getModifierState("AltGraph")) {
+          useHotkeyStore.getState().hold("altRight");
+          return;
+        }
         const key = keyCodeMap[e.code];
         if (key) {
           useHotkeyStore.getState().hold(key);
@@ -2602,6 +2620,10 @@ var init_use_hotkey = __esm({
         }
       };
       const onKeyUp = (e) => {
+        if (!e.getModifierState("AltGraph") && e.code === "ControlRight") {
+          useHotkeyStore.getState().release("altRight");
+          return;
+        }
         const key = keyCodeMap[e.code];
         if (key) {
           if (key === "meta") {
@@ -2677,12 +2699,12 @@ function useRegisterHistorySlice(appStore, {
   const forward = () => {
     appStore.getState().history.forward();
   };
-  useHotkey({ meta: true, z: true }, back);
-  useHotkey({ meta: true, shift: true, z: true }, forward);
-  useHotkey({ meta: true, y: true }, forward);
-  useHotkey({ ctrl: true, z: true }, back);
-  useHotkey({ ctrl: true, shift: true, z: true }, forward);
-  useHotkey({ ctrl: true, y: true }, forward);
+  useHotkey({ altRight: false, meta: true, z: true }, back);
+  useHotkey({ altRight: false, meta: true, shift: true, z: true }, forward);
+  useHotkey({ altRight: false, meta: true, y: true }, forward);
+  useHotkey({ altRight: false, ctrl: true, z: true }, back);
+  useHotkey({ altRight: false, ctrl: true, shift: true, z: true }, forward);
+  useHotkey({ altRight: false, ctrl: true, y: true }, forward);
 }
 var import_react7, EMPTY_HISTORY_INDEX, tidyState, createHistorySlice;
 var init_history = __esm({
@@ -3110,21 +3132,6 @@ var init_fields = __esm({
   }
 });
 
-// lib/data/to-component.ts
-var toComponent;
-var init_to_component = __esm({
-  "lib/data/to-component.ts"() {
-    "use strict";
-    init_react_import();
-    toComponent = (item) => {
-      return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-        props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-        type: "root"
-      });
-    };
-  }
-});
-
 // lib/resolve-component-data.ts
 var import_fast_equals2, cache, resolveComponentData;
 var init_resolve_component_data = __esm({
@@ -6298,6 +6305,40 @@ var SubFieldInternal = ({
 };
 var SubField = (0, import_react16.memo)(SubFieldInternal);
 
+// lib/data/set-deep.ts
+init_react_import();
+function setDeep(node, path, newVal) {
+  const parts = path.split(".");
+  const newNode = __spreadValues({}, node);
+  let cur = newNode;
+  for (let i = 0; i < parts.length; i++) {
+    const [prop, idxStr] = parts[i].replace("]", "").split("[");
+    const isLast = i === parts.length - 1;
+    if (idxStr !== void 0) {
+      if (!Array.isArray(cur[prop])) {
+        cur[prop] = [];
+      }
+      const idx = Number(idxStr);
+      if (isLast) {
+        cur[prop][idx] = newVal;
+        continue;
+      }
+      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
+      cur = cur[prop][idx];
+      continue;
+    }
+    if (isLast) {
+      cur[prop] = newVal;
+      continue;
+    }
+    if (cur[prop] === void 0) {
+      cur[prop] = {};
+    }
+    cur = cur[prop];
+  }
+  return __spreadValues(__spreadValues({}, node), newNode);
+}
+
 // components/AutoField/fields/ArrayField/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
@@ -6365,9 +6406,10 @@ var ArrayFieldItemInternal = ({
           {
             ref: handleRef,
             onClick: (e) => {
-              if (isDragging || !hasVisibleFields) return;
+              if (isDragging) return;
               e.preventDefault();
               e.stopPropagation();
+              if (!hasVisibleFields) return;
               onToggleExpand(id, isExpanded);
             },
             className: getClassNameItem("summary"),
@@ -9115,40 +9157,6 @@ var styles_module_default17 = { "InlineTextField": "_InlineTextField_104qp_1" };
 // components/InlineTextField/index.tsx
 init_lib();
 
-// lib/data/set-deep.ts
-init_react_import();
-function setDeep(node, path, newVal) {
-  const parts = path.split(".");
-  const newNode = __spreadValues({}, node);
-  let cur = newNode;
-  for (let i = 0; i < parts.length; i++) {
-    const [prop, idxStr] = parts[i].replace("]", "").split("[");
-    const isLast = i === parts.length - 1;
-    if (idxStr !== void 0) {
-      if (!Array.isArray(cur[prop])) {
-        cur[prop] = [];
-      }
-      const idx = Number(idxStr);
-      if (isLast) {
-        cur[prop][idx] = newVal;
-        continue;
-      }
-      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
-      cur = cur[prop][idx];
-      continue;
-    }
-    if (isLast) {
-      cur[prop] = newVal;
-      continue;
-    }
-    if (cur[prop] === void 0) {
-      cur[prop] = {};
-    }
-    cur = cur[prop];
-  }
-  return __spreadValues(__spreadValues({}, node), newNode);
-}
-
 // lib/get-selector-for-id.ts
 init_react_import();
 var getSelectorForId = (state, id) => {
@@ -11403,20 +11411,28 @@ var CopyHostStyles = ({
       filtered.forEach((mirror) => {
         mirror.onload = () => {
           stylesLoaded = stylesLoaded + 1;
-          if (stylesLoaded >= elements.length) {
+          if (stylesLoaded >= filtered.length) {
             onStylesLoaded();
           }
         };
         mirror.onerror = () => {
           console.warn(`AutoFrame couldn't load a stylesheet`);
           stylesLoaded = stylesLoaded + 1;
-          if (stylesLoaded >= elements.length) {
+          if (stylesLoaded >= filtered.length) {
             onStylesLoaded();
           }
         };
       });
       doc.head.innerHTML = "";
       doc.head.append(...filtered);
+      filtered.forEach((mirror) => {
+        if (mirror.nodeName === "STYLE") {
+          stylesLoaded = stylesLoaded + 1;
+        }
+      });
+      if (stylesLoaded >= filtered.length) {
+        onStylesLoaded();
+      }
       observer.observe(parentDocument.head, { childList: true, subtree: true });
       filtered.forEach((el) => {
         const elHash = (0, import_object_hash.default)(el.outerHTML);
@@ -12773,11 +12789,13 @@ var getClassName36 = get_class_name_factory_default("PuckCanvas", styles_module_
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
+  var _a;
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
   const {
     _experimentalFullScreenCanvas,
-    viewports: viewportOptions = defaultViewports
+    viewports: viewportOptions = defaultViewports,
+    ui: uiProp
   } = usePropsContext();
   const {
     dispatch,
@@ -12874,10 +12892,11 @@ var Canvas = () => {
   }, []);
   const appStoreApi = useAppStoreApi();
   (0, import_react88.useEffect)(() => {
-    var _a;
+    var _a2, _b;
     if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
     const viewportWidth = window.innerWidth;
-    const frameWidth = (_a = frameRef.current) == null ? void 0 : _a.getBoundingClientRect().width;
+    const frameWidth = (_b = frameRef.current) == null ? void 0 : _b.getBoundingClientRect().width;
     if (!viewportWidth) return;
     if (!frameWidth) return;
     if (viewportOptions.length === 0) return;
@@ -12916,7 +12935,13 @@ var Canvas = () => {
       }
       appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-  }, [viewportOptions, frameRef.current, iframe, appStoreApi]);
+  }, [
+    viewportOptions,
+    frameRef.current,
+    iframe,
+    appStoreApi,
+    (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -17,13 +17,13 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-EBISZQTK.mjs";
-import "./chunk-RHVK562Z.mjs";
+} from "./chunk-LBGOSTI5.mjs";
+import "./chunk-GYDP2UKB.mjs";
 import {
   migrate,
   resolveAllData,
   transformProps
-} from "./chunk-TNORMHZU.mjs";
+} from "./chunk-FOGDNETJ.mjs";
 import "./chunk-AOEDIUVK.mjs";
 import {
   Action,
@@ -33,18 +33,23 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-5V242HXR.mjs";
-import "./chunk-MSZPUXZP.mjs";
-import "./chunk-KOUWDQ4Q.mjs";
-import "./chunk-SKJTJUWU.mjs";
-import "./chunk-UMTU6EA7.mjs";
-import "./chunk-37HTE4KO.mjs";
-import "./chunk-MDUBGHWF.mjs";
+} from "./chunk-46RDHJGL.mjs";
+import "./chunk-JGZBBNEW.mjs";
+import "./chunk-BSAENBPL.mjs";
+import "./chunk-TVE6QYBR.mjs";
+import "./chunk-AFOEZCNE.mjs";
+import "./chunk-YLLE6KXH.mjs";
+import "./chunk-BOKX3EBR.mjs";
 import "./chunk-Y2EFNT5P.mjs";
 import {
   walkTree
-} from "./chunk-PMXRXC2B.mjs";
-import "./chunk-M6W7YEVX.mjs";
+} from "./chunk-754HNMU2.mjs";
+import {
+  init_react_import
+} from "./chunk-M6W7YEVX.mjs";
+
+// bundle/index.ts
+init_react_import();
 export {
   Action,
   ActionBar,

package/dist/internal.d.mts

@@ -1,6 +1,6 @@
 import { Reducer } from 'react';
-import { D as Data, A as AppState, O as OnAction, P as PrivateAppState, a as PuckAction } from './actions-BkBoKAc5.mjs';
-import { A as AppStore } from './index-bqD1SEOb.mjs';
+import { D as Data, A as AppState, O as OnAction, P as PrivateAppState, a as PuckAction } from './actions-BRYM0ifH.mjs';
+import { A as AppStore } from './index-BVLGipsj.mjs';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';

package/dist/internal.d.ts

@@ -1,6 +1,6 @@
 import { Reducer } from 'react';
-import { D as Data, A as AppState, O as OnAction, P as PrivateAppState, a as PuckAction } from './actions-BkBoKAc5.js';
-import { A as AppStore } from './index-lt1zf5WR.js';
+import { D as Data, A as AppState, O as OnAction, P as PrivateAppState, a as PuckAction } from './actions-BRYM0ifH.js';
+import { A as AppStore } from './index-D_Idfrfb.js';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';

package/dist/internal.js

@@ -269,6 +269,14 @@ var flattenNode = (node, config) => {
   });
 };
 
+// lib/data/to-component.ts
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
 // lib/data/walk-app-state.ts
 function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
   var _a;
@@ -332,7 +340,7 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
       id
     });
     processRelatedZones(item, id, path);
-    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
+    const newItem = __spreadProps(__spreadValues({}, mappedItem), { props: newProps });
     const thisZoneCompound = path[path.length - 1];
     const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
     newNodeIndex[id] = {
@@ -372,17 +380,14 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
     );
     newZones[zoneCompound] = newContent2;
   }, newZones);
-  const processedRoot = processItem(
-    {
-      type: "root",
-      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
-    },
-    [],
-    -1
-  );
-  const root = __spreadProps(__spreadValues({}, state.data.root), {
-    props: processedRoot.props
+  let rootAsComponent = toComponent({
+    props: __spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root)
   });
+  if (state.data.root.readOnly) {
+    rootAsComponent.readOnly = state.data.root.readOnly;
+  }
+  const processedRoot = processItem(rootAsComponent, [], -1);
+  const root = __spreadValues(__spreadValues({}, state.data.root), processedRoot);
   return __spreadProps(__spreadValues({}, state), {
     data: {
       root,

package/dist/internal.mjs

@@ -1,7 +1,7 @@
 import {
   createReducer
-} from "./chunk-37HTE4KO.mjs";
-import "./chunk-PMXRXC2B.mjs";
+} from "./chunk-YLLE6KXH.mjs";
+import "./chunk-754HNMU2.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{loaded-SJJ63OY2.mjs → loaded-2765LE3N.mjs}

@@ -1,15 +1,15 @@
 import {
   useListOptions
-} from "./chunk-SKJTJUWU.mjs";
+} from "./chunk-TVE6QYBR.mjs";
 import {
   List,
   SelectControl,
   useControlContext
-} from "./chunk-UMTU6EA7.mjs";
-import "./chunk-37HTE4KO.mjs";
-import "./chunk-MDUBGHWF.mjs";
+} from "./chunk-AFOEZCNE.mjs";
+import "./chunk-YLLE6KXH.mjs";
+import "./chunk-BOKX3EBR.mjs";
 import "./chunk-Y2EFNT5P.mjs";
-import "./chunk-PMXRXC2B.mjs";
+import "./chunk-754HNMU2.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{loaded-362ACKSQ.mjs → loaded-ANEJLSYJ.mjs}

@@ -1,15 +1,15 @@
 import {
   useAlignOptions
-} from "./chunk-MSZPUXZP.mjs";
+} from "./chunk-JGZBBNEW.mjs";
 import {
   AlignLeft,
   SelectControl,
   useControlContext
-} from "./chunk-UMTU6EA7.mjs";
-import "./chunk-37HTE4KO.mjs";
-import "./chunk-MDUBGHWF.mjs";
+} from "./chunk-AFOEZCNE.mjs";
+import "./chunk-YLLE6KXH.mjs";
+import "./chunk-BOKX3EBR.mjs";
 import "./chunk-Y2EFNT5P.mjs";
-import "./chunk-PMXRXC2B.mjs";
+import "./chunk-754HNMU2.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{loaded-DIHUQBWF.mjs → loaded-BKAMJ2FS.mjs}

@@ -1,15 +1,15 @@
 import {
   useHeadingOptions
-} from "./chunk-KOUWDQ4Q.mjs";
+} from "./chunk-BSAENBPL.mjs";
 import {
   Heading,
   SelectControl,
   useControlContext
-} from "./chunk-UMTU6EA7.mjs";
-import "./chunk-37HTE4KO.mjs";
-import "./chunk-MDUBGHWF.mjs";
+} from "./chunk-AFOEZCNE.mjs";
+import "./chunk-YLLE6KXH.mjs";
+import "./chunk-BOKX3EBR.mjs";
 import "./chunk-Y2EFNT5P.mjs";
-import "./chunk-PMXRXC2B.mjs";
+import "./chunk-754HNMU2.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";