@measured/puck 0.20.0-canary.7d869af1 → 0.20.0-canary.82bd49a3

package/dist/index.css

@@ -1430,23 +1430,25 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
-._Puck_vnhjy_19 {
+._Puck_a45x1_19 {
   --puck-space-px: 16px;
   font-family: var(--puck-font-family);
   overflow-x: hidden;
 }
 @media (min-width: 766px) {
-  ._Puck_vnhjy_19 {
+  ._Puck_a45x1_19 {
     overflow-x: auto;
   }
 }
-._Puck-portal_vnhjy_31 {
+._Puck-portal_a45x1_31 {
   position: relative;
   z-index: 2;
 }
-._PuckLayout-inner_vnhjy_38 {
+._PuckLayout-inner_a45x1_38 {
   --puck-frame-width: auto;
   --puck-side-bar-width: 0px;
+  --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
+  --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
   display: grid;
   grid-template-areas: "header header header" "left editor right";
   grid-template-columns: 0 var(--puck-frame-width) 0;
@@ -1455,50 +1457,50 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   position: relative;
   z-index: 0;
 }
-._PuckLayout--mounted_vnhjy_50 ._PuckLayout-inner_vnhjy_38 {
+._PuckLayout--mounted_a45x1_59 ._PuckLayout-inner_a45x1_38 {
   --puck-side-bar-width: 186px;
 }
-._PuckLayout--leftSideBarVisible_vnhjy_54 ._PuckLayout-inner_vnhjy_38 {
-  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
+._PuckLayout--leftSideBarVisible_a45x1_63 ._PuckLayout-inner_a45x1_38 {
+  grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
 }
-._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
-  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
+._PuckLayout--rightSideBarVisible_a45x1_69 ._PuckLayout-inner_a45x1_38 {
+  grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
 }
-._PuckLayout--leftSideBarVisible_vnhjy_54._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
-  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
+._PuckLayout--leftSideBarVisible_a45x1_63._PuckLayout--rightSideBarVisible_a45x1_69 ._PuckLayout-inner_a45x1_38 {
+  grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
 }
 @media (min-width: 458px) {
-  ._PuckLayout-mounted_vnhjy_74 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout-mounted_a45x1_83 ._PuckLayout-inner_a45x1_38 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-side-bar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
+  ._PuckLayout_a45x1_38 ._PuckLayout-inner_a45x1_38 {
     --puck-side-bar-width: 320px;
   }
 }

package/dist/index.js

@@ -5333,13 +5333,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_react32 = __toESM(require("react"));
+
+// components/SlotRender/index.tsx
+init_react_import();
+var import_shallow3 = require("zustand/react/shallow");
+
+// components/SlotRender/server.tsx
 init_react_import();
 var import_react31 = require("react");
 
+// components/ServerRender/index.tsx
+init_react_import();
+var import_jsx_runtime21 = 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_runtime21.jsx)(import_jsx_runtime21.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_runtime21.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_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
+    }
+    return null;
+  }) });
+}
+
+// components/SlotRender/server.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRender,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
+var SlotRender = (0, import_react31.forwardRef)(
+  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
+
+// components/SlotRender/index.tsx
+var import_jsx_runtime23 = 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_shallow3.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_runtime23.jsx)(
+    SlotRenderPure,
+    {
+      content: slotContent,
+      zone,
+      config,
+      metadata
+    }
+  );
+};
+
+// components/Render/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var renderContext = import_react32.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_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+  );
+  const nextContextValue = (0, import_react32.useMemo)(
+    () => ({
+      mode: "render",
+      depth: 0
+    }),
+    []
+  );
+  if ((_a = config.root) == null ? void 0 : _a.render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.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_react33 = require("react");
+
 // lib/overlay-portal/index.tsx
 init_react_import();
 var registerOverlayPortal = (el, opts = {}) => {
@@ -5427,7 +5626,7 @@ function setDeep(node, path, newVal) {
 }
 
 // components/InlineTextField/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var getClassName17 = get_class_name_factory_default("InlineTextField", styles_module_default13);
 var InlineTextFieldInternal = ({
   propPath,
@@ -5437,10 +5636,10 @@ var InlineTextFieldInternal = ({
   opts = {}
 }) => {
   var _a;
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react33.useRef)(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -5482,9 +5681,9 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref.current, value]);
-  const [isHovering, setIsHovering] = (0, import_react31.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react31.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const [isHovering, setIsHovering] = (0, import_react33.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react33.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "span",
     {
       className: getClassName17(),
@@ -5510,27 +5709,14 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = (0, import_react31.memo)(InlineTextFieldInternal);
+var InlineTextField = (0, import_react33.memo)(InlineTextFieldInternal);
 
-// lib/field-transforms/default-transforms.tsx
-var import_jsx_runtime22 = 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_runtime26 = require("react/jsx-runtime");
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5545,7 +5731,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5559,7 +5745,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         InlineTextField,
         {
           propPath,
@@ -5573,189 +5759,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_react33 = __toESM(require("react"));
-
-// components/SlotRender/index.tsx
-init_react_import();
-var import_shallow3 = require("zustand/react/shallow");
-
-// components/SlotRender/server.tsx
-init_react_import();
-var import_react32 = require("react");
-
-// components/ServerRender/index.tsx
-init_react_import();
-var import_jsx_runtime23 = 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_runtime23.jsx)(import_jsx_runtime23.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_runtime23.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_runtime23.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
-    }
-    return null;
-  }) });
-}
-
-// components/SlotRender/server.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    Component.render,
-    __spreadProps(__spreadValues({}, props), {
-      puck: __spreadProps(__spreadValues({}, props.puck), {
-        renderDropZone: DropZoneRender,
-        metadata: metadata || {}
-      })
-    })
-  );
-};
-var SlotRender = (0, import_react32.forwardRef)(
-  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className, style, ref, children: content.map((item) => {
-      if (!config.components[item.type]) {
-        return null;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        Item,
-        {
-          config,
-          item,
-          metadata
-        },
-        item.props.id
-      );
-    }) });
-  }
-);
-
-// components/SlotRender/index.tsx
-var import_jsx_runtime25 = 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_shallow3.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_runtime25.jsx)(
-    SlotRenderPure,
-    {
-      content: slotContent,
-      zone,
-      config,
-      metadata
-    }
-  );
-};
-
-// components/Render/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var renderContext = import_react33.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_runtime26.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
-  );
-  const nextContextValue = (0, import_react33.useMemo)(
-    () => ({
-      mode: "render",
-      depth: 0
-    }),
-    []
-  );
-  if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
-}
-
 // components/DropZone/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
@@ -7149,7 +7152,7 @@ var SidebarSection = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "Puck": "_Puck_vnhjy_19", "Puck-portal": "_Puck-portal_vnhjy_31", "PuckLayout-inner": "_PuckLayout-inner_vnhjy_38", "PuckLayout--mounted": "_PuckLayout--mounted_vnhjy_50", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_vnhjy_54", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_vnhjy_60", "PuckLayout-mounted": "_PuckLayout-mounted_vnhjy_74", "PuckLayout": "_PuckLayout_vnhjy_38" };
+var styles_module_default15 = { "Puck": "_Puck_a45x1_19", "Puck-portal": "_Puck-portal_a45x1_31", "PuckLayout-inner": "_PuckLayout-inner_a45x1_38", "PuckLayout--mounted": "_PuckLayout--mounted_a45x1_59", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_a45x1_63", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_a45x1_69", "PuckLayout-mounted": "_PuckLayout-mounted_a45x1_83", "PuckLayout": "_PuckLayout_a45x1_38" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -8791,7 +8794,7 @@ var HeaderInner = () => {
       return RenderHeader;
     }
     return DefaultOverride;
-  }, [renderHeader]);
+  }, [renderHeaderActions]);
   const CustomHeader = useAppStore(
     (s) => s.overrides.header || defaultHeaderRender
   );
@@ -9005,7 +9008,6 @@ var Sidebar = ({
   position,
   sidebarRef,
   isVisible,
-  width,
   onResize,
   onResizeEnd,
   children
@@ -9373,6 +9375,13 @@ function PuckLayout({ children }) {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `Puck ${getClassName31()}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
@@ -9386,13 +9395,7 @@ function PuckLayout({ children }) {
           "div",
           {
             className: getLayoutClassName("inner"),
-            style: {
-              gridTemplateColumns: `
-                    ${leftSideBarVisible ? leftWidth ? `${leftWidth}px` : "var(--puck-side-bar-width)" : "0"} 
-                    var(--puck-frame-width) 
-                    ${rightSideBarVisible ? rightWidth ? `${rightWidth}px` : "var(--puck-side-bar-width)" : "0"}
-                  `
-            },
+            style: layoutOptions,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Header, {}),
               /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -9401,7 +9404,6 @@ function PuckLayout({ children }) {
                   position: "left",
                   sidebarRef: leftSidebarRef,
                   isVisible: leftSideBarVisible,
-                  width: leftWidth,
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
@@ -9417,7 +9419,6 @@ function PuckLayout({ children }) {
                   position: "right",
                   sidebarRef: rightSidebarRef,
                   isVisible: rightSideBarVisible,
-                  width: rightWidth,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
                   children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FieldSideBar, {})

package/dist/index.mjs

@@ -13,19 +13,19 @@ import {
   Render,
   createUsePuck,
   overrideKeys,
+  registerOverlayPortal,
   renderContext,
+  setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-FNRZXWXT.mjs";
+} from "./chunk-AQUDTV7N.mjs";
 import {
   init_react_import,
   migrate,
-  registerOverlayPortal,
   resolveAllData,
-  setDeep,
   transformProps,
   walkTree
-} from "./chunk-IP64IXIP.mjs";
+} from "./chunk-HUKJ36SA.mjs";
 
 // bundle/index.ts
 init_react_import();