@measured/puck 0.20.0-canary.77cef35d → 0.20.0-canary.7ec3c0b9

package/dist/index.css

@@ -1559,24 +1559,27 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
-._Puck_1q3wx_19 {
+._Puck_1pcou_19 {
   --puck-space-px: 16px;
   font-family: var(--puck-font-family);
   overflow-x: hidden;
 }
 @media (min-width: 766px) {
-  ._Puck_1q3wx_19 {
+  ._Puck_1pcou_19 {
     overflow-x: auto;
   }
 }
-._Puck-portal_1q3wx_31 {
+._Puck-portal_1pcou_31 {
   position: relative;
   z-index: 2;
 }
-._PuckLayout-inner_1q3wx_36 {
+._PuckLayout-inner_1pcou_36 {
   --puck-frame-width: auto;
   --puck-side-bar-width: 0px;
   --puck-side-nav-width: 68px;
+  --puck-side-bar-width: 186px;
+  --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
+  --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
   display: grid;
   grid-template-areas: "header header header header" "sidenav left editor right";
   grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
@@ -1585,63 +1588,59 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   position: relative;
   z-index: 0;
 }
-._PuckLayout--mounted_1q3wx_49 ._PuckLayout-inner_1q3wx_36 {
-  --puck-side-bar-width: 186px;
-  --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
-  --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
-}
-._PuckLayout--leftSideBarVisible_1q3wx_61 ._PuckLayout-inner_1q3wx_36 {
+._PuckLayout--leftSideBarVisible_1pcou_59 ._PuckLayout-inner_1pcou_36 {
   grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
 }
-._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
+._PuckLayout--rightSideBarVisible_1pcou_67 ._PuckLayout-inner_1pcou_36 {
   grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-side-bar-width);
 }
-._PuckLayout--leftSideBarVisible_1q3wx_61._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
+._PuckLayout--leftSideBarVisible_1pcou_59._PuckLayout--rightSideBarVisible_1pcou_67 ._PuckLayout-inner_1pcou_36 {
   grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
 }
 @media (min-width: 458px) {
-  ._PuckLayout-mounted_1q3wx_85 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout-inner_1pcou_36 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-side-bar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
+  ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
     --puck-side-bar-width: 320px;
   }
 }
-._PuckLayout-nav_1q3wx_126 {
+._PuckLayout-nav_1pcou_124 {
   border-right: 1px solid var(--puck-color-grey-09);
   background-color: var(--puck-color-grey-12);
 }
-._PuckPluginTab_1q3wx_131 {
+._PuckPluginTab_1pcou_129 {
   display: none;
+  height: 100%;
 }
-._PuckPluginTab--visible_1q3wx_135 {
+._PuckPluginTab--visible_1pcou_134 {
   display: block;
 }
 

package/dist/index.js

@@ -5523,13 +5523,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 = {}) => {
@@ -5617,7 +5816,7 @@ function setDeep(node, path, newVal) {
 }
 
 // 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 +5826,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 +5871,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(),
@@ -5700,27 +5899,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 +5921,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 +5935,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 +5949,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);
@@ -8378,7 +8381,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_default20 = { "Puck": "_Puck_1q3wx_19", "Puck-portal": "_Puck-portal_1q3wx_31", "PuckLayout-inner": "_PuckLayout-inner_1q3wx_36", "PuckLayout--mounted": "_PuckLayout--mounted_1q3wx_49", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1q3wx_61", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1q3wx_69", "PuckLayout-mounted": "_PuckLayout-mounted_1q3wx_85", "PuckLayout": "_PuckLayout_1q3wx_36", "PuckLayout-nav": "_PuckLayout-nav_1q3wx_126", "PuckPluginTab": "_PuckPluginTab_1q3wx_131", "PuckPluginTab--visible": "_PuckPluginTab--visible_1q3wx_135" };
+var styles_module_default20 = { "Puck": "_Puck_1pcou_19", "Puck-portal": "_Puck-portal_1pcou_31", "PuckLayout-inner": "_PuckLayout-inner_1pcou_36", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1pcou_59", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1pcou_67", "PuckLayout": "_PuckLayout_1pcou_36", "PuckLayout-nav": "_PuckLayout-nav_1pcou_124", "PuckPluginTab": "_PuckPluginTab_1pcou_129", "PuckPluginTab--visible": "_PuckPluginTab--visible_1pcou_134" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -9432,10 +9435,6 @@ var Layout = ({ children }) => {
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react61.useState)(false);
-  (0, import_react61.useEffect)(() => {
-    setMounted(true);
-  }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
   (0, import_react61.useEffect)(() => {
@@ -9483,7 +9482,6 @@ var Layout = ({ children }) => {
       {
         className: getLayoutClassName({
           leftSideBarVisible,
-          mounted,
           rightSideBarVisible
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
@@ -9491,8 +9489,8 @@ var Layout = ({ children }) => {
           {
             className: getLayoutClassName("inner"),
             style: {
-              "--puck-user-left-side-bar-width": `${leftWidth}px`,
-              "--puck-user-right-side-bar-width": `${rightWidth}px`
+              "--puck-user-left-side-bar-width": leftWidth ? `${leftWidth}px` : "auto",
+              "--puck-user-right-side-bar-width": rightWidth ? `${rightWidth}px` : "auto"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Header, {}),

package/dist/index.mjs

@@ -15,18 +15,18 @@ import {
   createUsePuck,
   outlinePlugin,
   overrideKeys,
+  registerOverlayPortal,
   renderContext,
+  setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-APXUWZWW.mjs";
+} from "./chunk-RYWII4GP.mjs";
 import {
   migrate,
-  registerOverlayPortal,
   resolveAllData,
-  setDeep,
   transformProps,
   walkTree
-} from "./chunk-IP64IXIP.mjs";
+} from "./chunk-HUKJ36SA.mjs";
 export {
   Action,
   ActionBar,