@measured/puck 0.20.0-canary.f2447833 → 0.20.0-canary.f73c8fa0

package/dist/index.js

@@ -2267,7 +2267,8 @@ var defaultAppState = {
       options: [],
       controlsVisible: true
     },
-    field: { focus: null }
+    field: { focus: null },
+    plugin: { current: null }
   },
   indexes: {
     nodes: {},
@@ -3272,6 +3273,7 @@ var SubFieldInternal = ({
 var SubField = (0, import_react14.memo)(SubFieldInternal);
 
 // components/AutoField/fields/ArrayField/index.tsx
+var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
@@ -3482,6 +3484,23 @@ var ArrayField = ({
     },
     [regenerateArrayState, setUi, mapArrayStateToUi, onChange, setLocalState]
   );
+  (0, import_react15.useEffect)(() => {
+    return appStoreApi.subscribe(
+      ({ selectedItem }) => {
+        var _a;
+        const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+        return name ? getDeep(props, name) : [];
+      },
+      (val) => {
+        if (!(0, import_fast_deep_equal3.default)(val, valueRef.current)) {
+          valueRef.current = val;
+          const newArrayState = regenerateArrayState(valueRef.current);
+          setUi(mapArrayStateToUi(newArrayState), false);
+          setLocalState(newArrayState);
+        }
+      }
+    );
+  }, [appStoreApi]);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -3497,6 +3516,7 @@ var ArrayField = ({
         SortableProvider,
         {
           onDragStart: (id2) => {
+            valueRef.current = getValue();
             setDraggedItem(id2);
             syncCurrentIndexes();
           },
@@ -3510,8 +3530,7 @@ var ArrayField = ({
             if (arrayState.items[move.source]._arrayId !== draggedItem) {
               return;
             }
-            const value2 = getValue();
-            const newValue = reorder(value2, move.source, move.target);
+            const newValue = reorder(valueRef.current, move.source, move.target);
             const newArrayStateItems = reorder(
               arrayState.items,
               move.source,
@@ -4475,7 +4494,7 @@ function AutoFieldInternal(_a) {
         number: ((_h = overrides.fieldTypes) == null ? void 0 : _h.number) || defaultFields.number
       });
     },
-    [overrides, defaultFields]
+    [overrides]
   );
   const mergedProps = (0, import_react22.useMemo)(
     () => __spreadProps(__spreadValues({}, props), {
@@ -4511,6 +4530,12 @@ function AutoFieldInternal(_a) {
       });
     }
   }, []);
+  let Children = (0, import_react22.useMemo)(() => {
+    if (field.type !== "custom" && field.type !== "slot") {
+      return defaultFields[field.type];
+    }
+    return (_props) => null;
+  }, [field.type]);
   let FieldComponent = (0, import_react22.useMemo)(() => {
     if (field.type === "custom") {
       if (!field.render) {
@@ -4520,14 +4545,8 @@ function AutoFieldInternal(_a) {
     } else {
       return render[field.type];
     }
-  }, [field, defaultFields, render]);
+  }, [field.type, render]);
   const { visible = true } = props.field;
-  let Children = (0, import_react22.useMemo)(() => {
-    if (field.type !== "custom" && field.type !== "slot") {
-      return defaultFields[field.type];
-    }
-    return () => null;
-  }, [field]);
   if (!visible) {
     return null;
   }
@@ -5523,13 +5542,212 @@ function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
   return mergedProps;
 }
 
-// lib/field-transforms/default-transforms.tsx
+// lib/field-transforms/default-transforms/slot-transform.tsx
 init_react_import();
+var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
+  slot: ({ value: content, propName, field, isReadOnly }) => {
+    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
+      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
+    }, dzProps), {
+      zone: propName,
+      content
+    }));
+    return Slot;
+  }
+});
 
-// components/InlineTextField/index.tsx
+// lib/use-slots.tsx
+function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  return useFieldTransforms(
+    config,
+    item,
+    getSlotTransform(renderSlotEdit, renderSlotRender),
+    readOnly,
+    forceReadOnly
+  );
+}
+
+// components/Render/index.tsx
+var import_react34 = __toESM(require("react"));
+
+// components/SlotRender/index.tsx
+init_react_import();
+var import_shallow4 = require("zustand/react/shallow");
+
+// components/SlotRender/server.tsx
 init_react_import();
 var import_react33 = require("react");
 
+// components/ServerRender/index.tsx
+init_react_import();
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function DropZoneRender({
+  zone,
+  data,
+  areaId = "root",
+  config,
+  metadata = {}
+}) {
+  let zoneCompound = rootDroppableId;
+  let content = (data == null ? void 0 : data.content) || [];
+  if (!data || !config) {
+    return null;
+  }
+  if (areaId !== rootAreaId && zone !== rootZone) {
+    zoneCompound = `${areaId}:${zone}`;
+    content = setupZone(data, zoneCompound).zones[zoneCompound];
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: content.map((item) => {
+    const Component = config.components[item.type];
+    const props = __spreadProps(__spreadValues({}, item.props), {
+      puck: {
+        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          DropZoneRender,
+          {
+            zone: zone2,
+            data,
+            areaId: item.props.id,
+            config,
+            metadata
+          }
+        ),
+        metadata,
+        dragRef: null,
+        isEditing: false
+      }
+    });
+    const renderItem = __spreadProps(__spreadValues({}, item), { props });
+    const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
+    }
+    return null;
+  }) });
+}
+
+// components/SlotRender/server.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SlotRender, __spreadValues({}, props));
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRender,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
+var SlotRender = (0, import_react33.forwardRef)(
+  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
+
+// components/SlotRender/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ContextSlotRender = ({
+  componentId,
+  zone
+}) => {
+  const config = useAppStore((s) => s.config);
+  const metadata = useAppStore((s) => s.metadata);
+  const slotContent = useAppStore(
+    (0, import_shallow4.useShallow)((s) => {
+      var _a, _b;
+      const indexes = s.state.indexes;
+      const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
+      return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    SlotRenderPure,
+    {
+      content: slotContent,
+      zone,
+      config,
+      metadata
+    }
+  );
+};
+
+// components/Render/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var renderContext = import_react34.default.createContext({
+  config: { components: {} },
+  data: { root: {}, content: [] },
+  metadata: {}
+});
+function Render({
+  config,
+  data,
+  metadata = {}
+}) {
+  var _a;
+  const defaultedData = __spreadProps(__spreadValues({}, data), {
+    root: data.root || {},
+    content: data.content || []
+  });
+  const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
+  const title = (rootProps == null ? void 0 : rootProps.title) || "";
+  const pageProps = __spreadProps(__spreadValues({}, rootProps), {
+    puck: {
+      renderDropZone: DropZonePure,
+      isEditing: false,
+      dragRef: null,
+      metadata
+    },
+    title,
+    editMode: false,
+    id: "puck-root"
+  });
+  const propsWithSlots = useSlots(
+    config,
+    { type: "root", props: pageProps },
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+  );
+  const nextContextValue = (0, import_react34.useMemo)(
+    () => ({
+      mode: "render",
+      depth: 0
+    }),
+    []
+  );
+  if ((_a = config.root) == null ? void 0 : _a.render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
+}
+
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+init_react_import();
+
+// components/InlineTextField/index.tsx
+init_react_import();
+var import_react35 = require("react");
+
 // lib/overlay-portal/index.tsx
 init_react_import();
 var registerOverlayPortal = (el, opts = {}) => {
@@ -5616,8 +5834,18 @@ function setDeep(node, path, newVal) {
   return __spreadValues(__spreadValues({}, node), newNode);
 }
 
+// lib/get-selector-for-id.ts
+init_react_import();
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
 // components/InlineTextField/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var getClassName17 = get_class_name_factory_default("InlineTextField", styles_module_default13);
 var InlineTextFieldInternal = ({
   propPath,
@@ -5627,10 +5855,10 @@ var InlineTextFieldInternal = ({
   opts = {}
 }) => {
   var _a;
-  const ref = (0, import_react33.useRef)(null);
+  const ref = (0, import_react35.useRef)(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -5672,9 +5900,9 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref.current, value]);
-  const [isHovering, setIsHovering] = (0, import_react33.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react33.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "span",
     {
       className: getClassName17(),
@@ -5687,12 +5915,22 @@ var InlineTextFieldInternal = ({
       onClickCapture: (e) => {
         e.preventDefault();
         e.stopPropagation();
+        const itemSelector = getSelectorForId(
+          appStoreApi.getState().state,
+          componentId
+        );
+        appStoreApi.getState().setUi({ itemSelector });
       },
       onKeyDown: (e) => {
+        e.stopPropagation();
         if (disableLineBreaks && e.key === "Enter" || isReadOnly) {
           e.preventDefault();
         }
       },
+      onKeyUp: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
       onMouseOverCapture: () => setIsHovering(true),
       onMouseOutCapture: () => setIsHovering(false),
       onFocus: () => setIsFocused(true),
@@ -5700,27 +5938,14 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = (0, import_react33.memo)(InlineTextFieldInternal);
+var InlineTextField = (0, import_react35.memo)(InlineTextFieldInternal);
 
-// lib/field-transforms/default-transforms.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
-  slot: ({ value: content, propName, field, isReadOnly }) => {
-    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
-    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
-      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
-      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
-    }, dzProps), {
-      zone: propName,
-      content
-    }));
-    return Slot;
-  }
-});
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5735,7 +5960,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5749,7 +5974,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5763,189 +5988,6 @@ var getInlineTextTransform = () => ({
   }
 });
 
-// lib/use-slots.tsx
-function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
-  return useFieldTransforms(
-    config,
-    item,
-    getSlotTransform(renderSlotEdit, renderSlotRender),
-    readOnly,
-    forceReadOnly
-  );
-}
-
-// components/Render/index.tsx
-var import_react35 = __toESM(require("react"));
-
-// components/SlotRender/index.tsx
-init_react_import();
-var import_shallow4 = require("zustand/react/shallow");
-
-// components/SlotRender/server.tsx
-init_react_import();
-var import_react34 = require("react");
-
-// components/ServerRender/index.tsx
-init_react_import();
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function DropZoneRender({
-  zone,
-  data,
-  areaId = "root",
-  config,
-  metadata = {}
-}) {
-  let zoneCompound = rootDroppableId;
-  let content = (data == null ? void 0 : data.content) || [];
-  if (!data || !config) {
-    return null;
-  }
-  if (areaId !== rootAreaId && zone !== rootZone) {
-    zoneCompound = `${areaId}:${zone}`;
-    content = setupZone(data, zoneCompound).zones[zoneCompound];
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: content.map((item) => {
-    const Component = config.components[item.type];
-    const props = __spreadProps(__spreadValues({}, item.props), {
-      puck: {
-        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          DropZoneRender,
-          {
-            zone: zone2,
-            data,
-            areaId: item.props.id,
-            config,
-            metadata
-          }
-        ),
-        metadata,
-        dragRef: null,
-        isEditing: false
-      }
-    });
-    const renderItem = __spreadProps(__spreadValues({}, item), { props });
-    const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
-    }
-    return null;
-  }) });
-}
-
-// components/SlotRender/server.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRender, __spreadValues({}, props));
-var Item = ({
-  config,
-  item,
-  metadata
-}) => {
-  const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    Component.render,
-    __spreadProps(__spreadValues({}, props), {
-      puck: __spreadProps(__spreadValues({}, props.puck), {
-        renderDropZone: DropZoneRender,
-        metadata: metadata || {}
-      })
-    })
-  );
-};
-var SlotRender = (0, import_react34.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className, style, ref, children: content.map((item) => {
-      if (!config.components[item.type]) {
-        return null;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        Item,
-        {
-          config,
-          item,
-          metadata
-        },
-        item.props.id
-      );
-    }) });
-  }
-);
-
-// components/SlotRender/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ContextSlotRender = ({
-  componentId,
-  zone
-}) => {
-  const config = useAppStore((s) => s.config);
-  const metadata = useAppStore((s) => s.metadata);
-  const slotContent = useAppStore(
-    (0, import_shallow4.useShallow)((s) => {
-      var _a, _b;
-      const indexes = s.state.indexes;
-      const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
-      return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
-    })
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    SlotRenderPure,
-    {
-      content: slotContent,
-      zone,
-      config,
-      metadata
-    }
-  );
-};
-
-// components/Render/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var renderContext = import_react35.default.createContext({
-  config: { components: {} },
-  data: { root: {}, content: [] },
-  metadata: {}
-});
-function Render({
-  config,
-  data,
-  metadata = {}
-}) {
-  var _a;
-  const defaultedData = __spreadProps(__spreadValues({}, data), {
-    root: data.root || {},
-    content: data.content || []
-  });
-  const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
-  const title = (rootProps == null ? void 0 : rootProps.title) || "";
-  const pageProps = __spreadProps(__spreadValues({}, rootProps), {
-    puck: {
-      renderDropZone: DropZonePure,
-      isEditing: false,
-      dragRef: null,
-      metadata
-    },
-    title,
-    editMode: false,
-    id: "puck-root"
-  });
-  const propsWithSlots = useSlots(
-    config,
-    { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
-  );
-  const nextContextValue = (0, import_react35.useMemo)(
-    () => ({
-      mode: "render",
-      depth: 0
-    }),
-    []
-  );
-  if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
-}
-
 // components/DropZone/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
@@ -7538,7 +7580,14 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 var import_react45 = require("react");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css#css-module
+init_react_import();
+var styles_module_default16 = { "Components": "_Components_uwdh8_1" };
+
+// components/Puck/components/Components/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
+var getClassName22 = get_class_name_factory_default("Components", styles_module_default16);
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
@@ -7550,7 +7599,7 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName22(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComponentList, { id: "all" }) }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -7842,11 +7891,11 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default16);
+var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default17);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
   (0, import_react47.useEffect)(() => {
@@ -7937,7 +7986,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
-      className: getClassName22(),
+      className: getClassName23(),
       id,
       "data-puck-preview": true,
       onClick: (e) => {
@@ -7950,7 +7999,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -7970,7 +8019,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
         "div",
         {
           id: "preview-frame",
-          className: getClassName22("frame"),
+          className: getClassName23("frame"),
           ref,
           "data-puck-entry": true,
           children: inner
@@ -7988,7 +8037,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
+var styles_module_default18 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -8026,8 +8075,8 @@ var onScrollEnd = (frame, cb) => {
 // components/LayerTree/index.tsx
 var import_shallow7 = require("zustand/react/shallow");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default17);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
+var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default18);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
 var Layer = ({
   index,
   itemId,
@@ -8162,12 +8211,12 @@ var LayerTree = ({
     )
   );
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName23("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Layers, { size: "16" }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Layers, { size: "16" }) }),
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: getClassName23(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName23("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: getClassName24(), children: [
+      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
         return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Layer,
@@ -8196,21 +8245,28 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 var import_shallow8 = require("zustand/react/shallow");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css#css-module
+init_react_import();
+var styles_module_default19 = { "Outline": "_Outline_1rrni_1" };
+
+// components/Puck/components/Outline/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var getClassName25 = get_class_name_factory_default("Outline", styles_module_default19);
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
     (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = (0, import_react49.useMemo)(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25(), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
       zoneCompound
     },
     zoneCompound
-  )) });
+  )) }) });
 };
 
 // lib/use-loaded-overrides.ts
@@ -8287,13 +8343,7 @@ var generateUsePuck = (store) => {
     selectedItem: store.selectedItem || null,
     getItemBySelector: (selector) => getItem(selector, store.state),
     getItemById: (id) => store.state.indexes.nodes[id].data,
-    getSelectorForId: (id) => {
-      const node = store.state.indexes.nodes[id];
-      if (!node) return;
-      const zoneCompound = `${node.parentId}:${node.zone}`;
-      const index = store.state.indexes.zones[zoneCompound].contentIds.indexOf(id);
-      return { zone: zoneCompound, index };
-    }
+    getSelectorForId: (id) => getSelectorForId(store.state, id)
   };
   return storeData;
 };
@@ -8356,7 +8406,7 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"));
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
@@ -8364,7 +8414,7 @@ var import_react61 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "Puck": "_Puck_1rc26_19", "Puck-portal": "_Puck-portal_1rc26_31", "PuckLayout-inner": "_PuckLayout-inner_1rc26_36", "PuckLayout--mounted": "_PuckLayout--mounted_1rc26_48", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1rc26_61", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1rc26_69", "PuckLayout-mounted": "_PuckLayout-mounted_1rc26_85", "PuckLayout": "_PuckLayout_1rc26_36", "PuckLayout-nav": "_PuckLayout-nav_1rc26_126", "PuckPluginTab": "_PuckPluginTab_1rc26_131", "PuckPluginTab--visible": "_PuckPluginTab--visible_1rc26_135" };
+var styles_module_default20 = { "Puck": "_Puck_94wda_19", "Puck-portal": "_Puck-portal_94wda_31", "PuckLayout-inner": "_PuckLayout-inner_94wda_36", "PuckLayout--mounted": "_PuckLayout--mounted_94wda_57", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_94wda_61", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_94wda_69", "PuckLayout-mounted": "_PuckLayout-mounted_94wda_85", "PuckLayout": "_PuckLayout_94wda_36", "PuckLayout-nav": "_PuckLayout-nav_94wda_126", "PuckPluginTab": "_PuckPluginTab_94wda_131", "PuckPluginTab--visible": "_PuckPluginTab--visible_94wda_136" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -8425,11 +8475,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
+var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var getClassName24 = get_class_name_factory_default("MenuBar", styles_module_default19);
+var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -8442,7 +8492,7 @@ function MenuBar({
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
-      className: getClassName24({ menuOpen }),
+      className: getClassName26({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -8453,8 +8503,8 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName24("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName24("history"), children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("history"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             IconButton,
             {
@@ -8484,11 +8534,11 @@ function MenuBar({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "PuckHeader": "_PuckHeader_1ehbp_1", "PuckHeader-inner": "_PuckHeader-inner_1ehbp_16", "PuckHeader-toggle": "_PuckHeader-toggle_1ehbp_33", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_1ehbp_40", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_1ehbp_40", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_1ehbp_41", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_1ehbp_41", "PuckHeader-title": "_PuckHeader-title_1ehbp_45", "PuckHeader-path": "_PuckHeader-path_1ehbp_49", "PuckHeader-tools": "_PuckHeader-tools_1ehbp_56", "PuckHeader-menuButton": "_PuckHeader-menuButton_1ehbp_62", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_1ehbp_67" };
+var styles_module_default22 = { "PuckHeader": "_PuckHeader_1ehbp_1", "PuckHeader-inner": "_PuckHeader-inner_1ehbp_16", "PuckHeader-toggle": "_PuckHeader-toggle_1ehbp_33", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_1ehbp_40", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_1ehbp_40", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_1ehbp_41", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_1ehbp_41", "PuckHeader-title": "_PuckHeader-title_1ehbp_45", "PuckHeader-path": "_PuckHeader-path_1ehbp_49", "PuckHeader-tools": "_PuckHeader-tools_1ehbp_56", "PuckHeader-menuButton": "_PuckHeader-menuButton_1ehbp_62", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_1ehbp_67" };
 
 // components/Puck/components/Header/index.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var getClassName25 = get_class_name_factory_default("PuckHeader", styles_module_default20);
+var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
 var HeaderInner = () => {
   const {
     onPublish,
@@ -8528,7 +8578,7 @@ var HeaderInner = () => {
       return RenderHeader;
     }
     return DefaultOverride;
-  }, [renderHeader]);
+  }, [renderHeaderActions]);
   const CustomHeader = useAppStore(
     (s) => s.overrides.header || defaultHeaderRender
   );
@@ -8576,10 +8626,10 @@ var HeaderInner = () => {
       children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "header",
         {
-          className: getClassName25({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName25("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName25("toggle"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("inner"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("toggle"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -8590,7 +8640,7 @@ var HeaderInner = () => {
                   children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -8602,15 +8652,15 @@ var HeaderInner = () => {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName25("title"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("title"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
               headerPath && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: getClassName25("path"), children: headerPath })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: getClassName27("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName25("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("tools"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -8655,7 +8705,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
+var styles_module_default23 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -8703,7 +8753,7 @@ var useBreadcrumbs = (renderCount) => {
 
 // components/SidebarSection/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var getClassName26 = get_class_name_factory_default("SidebarSection", styles_module_default21);
+var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
   title,
@@ -8718,26 +8768,26 @@ var SidebarSection = ({
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
-      className: getClassName26({ noBorderTop, noPadding }),
+      className: getClassName28({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName26("title"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassName26("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassName26("breadcrumb"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName28("title"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassName28("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassName28("breadcrumb"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "button",
               {
                 type: "button",
-                className: getClassName26("breadcrumbLabel"),
+                className: getClassName28("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName26("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName28("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName26("content"), children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Loader, { size: 32 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName28("content"), children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Loader, { size: 32 }) })
       ]
     }
   );
@@ -8753,7 +8803,7 @@ var import_react56 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
+var styles_module_default24 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -8762,8 +8812,8 @@ var icons = {
   Tablet: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tablet, { size: 16 }),
   Monitor: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Monitor, { size: 16 })
 };
-var getClassName27 = get_class_name_factory_default("ViewportControls", styles_module_default22);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default22);
+var getClassName29 = get_class_name_factory_default("ViewportControls", styles_module_default24);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
 var ViewportButton = ({
   children,
   height = "auto",
@@ -8822,7 +8872,7 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName27(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName29(), children: [
     viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ViewportButton,
       {
@@ -8834,7 +8884,7 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName27("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName29("divider") }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       IconButton,
       {
@@ -8871,11 +8921,11 @@ var ViewportControls = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName27("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName29("divider") }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "select",
       {
-        className: getClassName27("zoomSelect"),
+        className: getClassName29("zoomSelect"),
         value: zoom.toString(),
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
@@ -8895,7 +8945,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
+var styles_module_default25 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
 
 // components/Puck/components/Canvas/index.tsx
 var import_shallow9 = require("zustand/react/shallow");
@@ -8927,7 +8977,7 @@ var useCanvasFrame = () => {
 
 // components/Puck/components/Canvas/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var getClassName28 = get_class_name_factory_default("PuckCanvas", styles_module_default23);
+var getClassName30 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -9029,7 +9079,7 @@ var Canvas = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: getClassName28({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader
       }),
@@ -9044,7 +9094,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: getClassName28("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: getClassName30("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -9074,11 +9124,11 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: getClassName28("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: getClassName30("inner"), ref: frameRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "div",
             {
-              className: getClassName28("root"),
+              className: getClassName30("root"),
               style: {
                 width: iframe.enabled ? viewports.current.width : "100%",
                 height: zoomConfig.rootHeight,
@@ -9095,7 +9145,7 @@ var Canvas = () => {
               children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: getClassName28("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: getClassName30("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -9192,11 +9242,11 @@ var import_react60 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
+var styles_module_default26 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var getClassName29 = get_class_name_factory_default("ResizeHandle", styles_module_default24);
+var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default26);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -9258,7 +9308,7 @@ var ResizeHandle = ({
     "div",
     {
       ref: handleRef,
-      className: getClassName29({ [position]: true }),
+      className: getClassName31({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -9266,24 +9316,23 @@ var ResizeHandle = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "Sidebar": "_Sidebar_2pzs4_1", "Sidebar--left": "_Sidebar--left_2pzs4_8", "Sidebar--right": "_Sidebar--right_2pzs4_15", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_2pzs4_21" };
+var styles_module_default27 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
 
 // components/Puck/components/Sidebar/index.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var getClassName30 = get_class_name_factory_default("Sidebar", styles_module_default25);
+var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default27);
 var Sidebar = ({
   position,
   sidebarRef,
   isVisible,
-  width,
   onResize,
   onResizeEnd,
   children
 }) => {
   if (!isVisible) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: sidebarRef, className: getClassName30({ [position]: true }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: `${getClassName30("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: sidebarRef, className: getClassName32({ [position]: true }), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ResizeHandle,
       {
         position,
@@ -9300,13 +9349,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css#css-module
 init_react_import();
-var styles_module_default26 = { "Nav-list": "_Nav-list_b6txo_1", "NavSection": "_NavSection_b6txo_7", "Nav--slim": "_Nav--slim_b6txo_15", "NavSection-list": "_NavSection-list_b6txo_24", "NavSection-title": "_NavSection-title_b6txo_36", "NavItem-link": "_NavItem-link_b6txo_47", "NavItem-linkIcon": "_NavItem-linkIcon_b6txo_67", "NavItem--active": "_NavItem--active_b6txo_72", "NavItem": "_NavItem_b6txo_47", "NavItem-list": "_NavItem-list_b6txo_91" };
+var styles_module_default28 = { "Nav-list": "_Nav-list_b6txo_1", "NavSection": "_NavSection_b6txo_7", "Nav--slim": "_Nav--slim_b6txo_15", "NavSection-list": "_NavSection-list_b6txo_24", "NavSection-title": "_NavSection-title_b6txo_36", "NavItem-link": "_NavItem-link_b6txo_47", "NavItem-linkIcon": "_NavItem-linkIcon_b6txo_67", "NavItem--active": "_NavItem--active_b6txo_72", "NavItem": "_NavItem_b6txo_47", "NavItem-list": "_NavItem-list_b6txo_91" };
 
 // components/Puck/components/Nav/index.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var getClassName31 = get_class_name_factory_default("Nav", styles_module_default26);
-var getClassNameSection = get_class_name_factory_default("NavSection", styles_module_default26);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default26);
+var getClassName33 = get_class_name_factory_default("Nav", styles_module_default28);
+var getClassNameSection = get_class_name_factory_default("NavSection", styles_module_default28);
+var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
 var MenuItem = ({
   label,
   icon,
@@ -9333,16 +9382,16 @@ var Nav = ({
   navigation,
   slim
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("nav", { className: getClassName31({ slim }), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { className: getClassName31("list"), children: Object.entries(navigation).map(([key, section]) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("nav", { className: getClassName33({ slim }), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { className: getClassName33("list"), children: Object.entries(navigation).map(([key, section]) => {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NavSection, { title: section.title, items: section.items }, key);
   }) }) });
 };
 
 // components/Puck/components/Layout/index.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var getClassName32 = get_class_name_factory_default("Puck", styles_module_default18);
-var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default18);
-var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default18);
+var getClassName34 = get_class_name_factory_default("Puck", styles_module_default20);
+var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default20);
+var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default20);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => {
@@ -9433,7 +9482,19 @@ var Layout = ({ children }) => {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
-  const [view, setView] = (0, import_react61.useState)();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  const setUi = useAppStore((s) => s.setUi);
+  const currentPlugin = useAppStore((s) => {
+    var _a;
+    return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
+  });
+  const appStoreApi = useAppStoreApi();
   const pluginItems = (0, import_react61.useMemo)(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
@@ -9448,22 +9509,35 @@ var Layout = ({ children }) => {
           label: (_a = plugin.label) != null ? _a : plugin.name,
           icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToyBrick, {}),
           onClick: () => {
-            setView(plugin.name);
+            if (plugin.name === currentPlugin) {
+              if (leftSideBarVisible) {
+                setUi({ leftSideBarVisible: false });
+              } else {
+                setUi({ leftSideBarVisible: true });
+              }
+            } else {
+              if (plugin.name) {
+                setUi({
+                  plugin: { current: plugin.name },
+                  leftSideBarVisible: true
+                });
+              }
+            }
           },
-          isActive: view === plugin.name,
+          isActive: leftSideBarVisible && currentPlugin === plugin.name,
           render: plugin.render
         };
       }
     });
     return details;
-  }, [plugins, view]);
+  }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
   (0, import_react61.useEffect)(() => {
-    if (!view) {
+    if (!currentPlugin) {
       const names = Object.keys(pluginItems);
-      setView(names[0]);
+      setUi({ plugin: { current: names[0] } });
     }
-  }, [pluginItems, view]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `Puck ${getClassName32()}`, children: [
+  }, [pluginItems, currentPlugin]);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `Puck ${getClassName34()}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
@@ -9476,10 +9550,7 @@ var Layout = ({ children }) => {
           "div",
           {
             className: getLayoutClassName("inner"),
-            style: {
-              "--puck-user-left-side-bar-width": `${leftWidth}px`,
-              "--puck-user-right-side-bar-width": `${rightWidth}px`
-            },
+            style: layoutOptions,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Header, {}),
               /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -9499,11 +9570,10 @@ var Layout = ({ children }) => {
                   position: "left",
                   sidebarRef: leftSidebarRef,
                   isVisible: leftSideBarVisible,
-                  width: leftWidth,
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: Object.entries(pluginItems).map(
-                    ([id, { render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PluginTab, { visible: view === id, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Render2, {}) }, id)
+                    ([id, { render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PluginTab, { visible: currentPlugin === id, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Render2, {}) }, id)
                   )
                 }
               ),
@@ -9514,7 +9584,6 @@ var Layout = ({ children }) => {
                   position: "right",
                   sidebarRef: rightSidebarRef,
                   isVisible: rightSideBarVisible,
-                  width: rightWidth,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
                   children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FieldSideBar, {})
@@ -9525,7 +9594,7 @@ var Layout = ({ children }) => {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { id: "puck-portal-root", className: getClassName32("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { id: "puck-portal-root", className: getClassName34("portal") })
   ] });
 };
 
@@ -9696,7 +9765,7 @@ function PuckProvider({ children }) {
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal4.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }