@measured/puck 0.14.1-canary.bef3303 → 0.14.2-canary.3f7fc52

package/dist/index.css

@@ -676,70 +676,74 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
-._Puck_u70b9_19 {
-  --puck-frame-width: auto;
-  --puck-side-bar-width: 0px;
+._Puck_mowzv_19 {
   --puck-space-px: 16px;
   bottom: 0;
-  display: grid;
   font-family: var(--puck-font-family);
-  grid-template-areas: "header header header" "left editor right";
-  grid-template-columns: 0 var(--puck-frame-width) 0;
-  grid-template-rows: min-content auto;
-  height: 100dvh;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
 }
-._Puck--mounted_u70b9_36 {
+._Puck-layout_mowzv_29 {
+  --puck-frame-width: auto;
+  --puck-side-bar-width: 0px;
+  display: grid;
+  grid-template-areas: "header header header" "left editor right";
+  grid-template-columns: 0 var(--puck-frame-width) 0;
+  grid-template-rows: min-content auto;
+  height: 100dvh;
+  position: relative;
+  z-index: 0;
+}
+._Puck--mounted_mowzv_41 ._Puck-layout_mowzv_29 {
   --puck-side-bar-width: 186px;
 }
-._Puck--leftSideBarVisible_u70b9_40 {
+._Puck--leftSideBarVisible_mowzv_45 ._Puck-layout_mowzv_29 {
   grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
 }
-._Puck--rightSideBarVisible_u70b9_46 {
+._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
   grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
 }
-._Puck--leftSideBarVisible_u70b9_40._Puck--rightSideBarVisible_u70b9_46 {
+._Puck--leftSideBarVisible_mowzv_45._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
   grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
 }
 @media (min-width: 458px) {
-  ._Puck-mounted_u70b9_59 {
+  ._Puck-mounted_mowzv_64 ._Puck-layout_mowzv_29 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-side-bar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._Puck_u70b9_19 {
+  ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
     --puck-side-bar-width: 320px;
   }
 }
-._Puck-header_u70b9_100 {
+._Puck-header_mowzv_105 {
   background: var(--puck-color-white);
   border-bottom: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-black);
@@ -747,7 +751,7 @@
   position: relative;
   max-width: 100vw;
 }
-._Puck-headerInner_u70b9_109 {
+._Puck-headerInner_mowzv_114 {
   align-items: end;
   display: grid;
   gap: var(--puck-space-px);
@@ -756,43 +760,43 @@
   grid-template-rows: auto;
   padding: var(--puck-space-px);
 }
-._Puck-headerToggle_u70b9_119 {
+._Puck-headerToggle_mowzv_124 {
   color: var(--puck-color-grey-05);
   display: flex;
   margin-left: -4px;
   padding-top: 2px;
 }
-._Puck--rightSideBarVisible_u70b9_46 ._Puck-rightSideBarToggle_u70b9_126,
-._Puck--leftSideBarVisible_u70b9_40 ._Puck-leftSideBarToggle_u70b9_127 {
+._Puck--rightSideBarVisible_mowzv_51 ._Puck-rightSideBarToggle_mowzv_131,
+._Puck--leftSideBarVisible_mowzv_45 ._Puck-leftSideBarToggle_mowzv_132 {
   color: var(--puck-color-black);
 }
-._Puck-headerTitle_u70b9_131 {
+._Puck-headerTitle_mowzv_136 {
   align-self: center;
 }
-._Puck-headerPath_u70b9_135 {
+._Puck-headerPath_mowzv_140 {
   font-family: var(--puck-font-family-monospaced);
   font-size: var(--puck-font-size-xxs);
   font-weight: normal;
   word-break: break-all;
 }
-._Puck-headerTools_u70b9_142 {
+._Puck-headerTools_mowzv_147 {
   display: flex;
   gap: 16px;
   justify-content: flex-end;
 }
-._Puck-menuButton_u70b9_148 {
+._Puck-menuButton_mowzv_153 {
   color: var(--puck-color-grey-05);
   margin-left: -4px;
 }
-._Puck--menuOpen_u70b9_153 ._Puck-menuButton_u70b9_148 {
+._Puck--menuOpen_mowzv_158 ._Puck-menuButton_mowzv_153 {
   color: var(--puck-color-black);
 }
 @media (min-width: 638px) {
-  ._Puck-menuButton_u70b9_148 {
+  ._Puck-menuButton_mowzv_153 {
     display: none;
   }
 }
-._Puck-leftSideBar_u70b9_127 {
+._Puck-leftSideBar_mowzv_132 {
   background: var(--puck-color-grey-12);
   border-right: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -800,7 +804,7 @@
   grid-area: left;
   overflow-y: auto;
 }
-._Puck-rightSideBar_u70b9_126 {
+._Puck-rightSideBar_mowzv_131 {
   background: var(--puck-color-white);
   border-left: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -808,7 +812,7 @@
   grid-area: right;
   overflow-y: auto;
 }
-._Puck-portal_u70b9_181 {
+._Puck-portal_mowzv_186 {
   z-index: 2;
 }
 

package/dist/index.js

@@ -31342,7 +31342,7 @@ var MenuBar = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "Puck": "_Puck_u70b9_19", "Puck--mounted": "_Puck--mounted_u70b9_36", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_u70b9_40", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_u70b9_46", "Puck-mounted": "_Puck-mounted_u70b9_59", "Puck-header": "_Puck-header_u70b9_100", "Puck-headerInner": "_Puck-headerInner_u70b9_109", "Puck-headerToggle": "_Puck-headerToggle_u70b9_119", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_u70b9_126", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_u70b9_127", "Puck-headerTitle": "_Puck-headerTitle_u70b9_131", "Puck-headerPath": "_Puck-headerPath_u70b9_135", "Puck-headerTools": "_Puck-headerTools_u70b9_142", "Puck-menuButton": "_Puck-menuButton_u70b9_148", "Puck--menuOpen": "_Puck--menuOpen_u70b9_153", "Puck-leftSideBar": "_Puck-leftSideBar_u70b9_127", "Puck-rightSideBar": "_Puck-rightSideBar_u70b9_126", "Puck-portal": "_Puck-portal_u70b9_181" };
+var styles_module_default8 = { "Puck": "_Puck_mowzv_19", "Puck-layout": "_Puck-layout_mowzv_29", "Puck--mounted": "_Puck--mounted_mowzv_41", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_mowzv_45", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_mowzv_51", "Puck-mounted": "_Puck-mounted_mowzv_64", "Puck-header": "_Puck-header_mowzv_105", "Puck-headerInner": "_Puck-headerInner_mowzv_114", "Puck-headerToggle": "_Puck-headerToggle_mowzv_124", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_mowzv_131", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_mowzv_132", "Puck-headerTitle": "_Puck-headerTitle_mowzv_136", "Puck-headerPath": "_Puck-headerPath_mowzv_140", "Puck-headerTools": "_Puck-headerTools_mowzv_147", "Puck-menuButton": "_Puck-menuButton_mowzv_153", "Puck--menuOpen": "_Puck--menuOpen_mowzv_158", "Puck-leftSideBar": "_Puck-leftSideBar_mowzv_132", "Puck-rightSideBar": "_Puck-rightSideBar_mowzv_131", "Puck-portal": "_Puck-portal_mowzv_186" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -33158,6 +33158,7 @@ var ViewportControls = ({
   onViewportChange,
   onZoom
 }) => {
+  var _a, _b;
   const { viewports } = useAppContext();
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
@@ -33191,7 +33192,7 @@ var ViewportControls = ({
       IconButton,
       {
         title: "Zoom viewport out",
-        disabled: zoom <= zoomOptions[0].value,
+        disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
         onClick: (e) => {
           e.stopPropagation();
           onZoom(
@@ -33208,7 +33209,7 @@ var ViewportControls = ({
       IconButton,
       {
         title: "Zoom viewport in",
-        disabled: zoom >= zoomOptions[zoomOptions.length - 1].value,
+        disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
         onClick: (e) => {
           e.stopPropagation();
           onZoom(
@@ -33689,94 +33690,96 @@ function Puck({
                     rightSideBarVisible
                   }),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                      CustomHeader,
-                      {
-                        actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                            Button,
-                            {
-                              onClick: () => {
-                                onPublish && onPublish(data);
-                              },
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
-                              children: "Publish"
-                            }
-                          )
-                        ] }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              IconButton,
-                              {
-                                onClick: () => {
-                                  toggleSidebars("left");
-                                },
-                                title: "Toggle left sidebar",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
-                              }
-                            ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        CustomHeader,
+                        {
+                          actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              Button,
                               {
                                 onClick: () => {
-                                  toggleSidebars("right");
+                                  onPublish && onPublish(data);
                                 },
-                                title: "Toggle right sidebar",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                                icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
+                                children: "Publish"
                               }
-                            ) })
+                            )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
-                            headerTitle || rootProps.title || "Page",
-                            headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                              " ",
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                IconButton,
+                                {
+                                  onClick: () => {
+                                    toggleSidebars("left");
+                                  },
+                                  title: "Toggle left sidebar",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                IconButton,
+                                {
+                                  onClick: () => {
+                                    toggleSidebars("right");
+                                  },
+                                  title: "Toggle right sidebar",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                                }
+                              ) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                              headerTitle || rootProps.title || "Page",
+                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                " ",
+                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
+                              ] })
+                            ] }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                IconButton,
+                                {
+                                  onClick: () => {
+                                    return setMenuOpen(!menuOpen);
+                                  },
+                                  title: "Toggle menu bar",
+                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                MenuBar,
+                                {
+                                  appState,
+                                  data,
+                                  dispatch,
+                                  onPublish,
+                                  menuOpen,
+                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                                  setMenuOpen
+                                }
+                              )
                             ] })
-                          ] }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              IconButton,
-                              {
-                                onClick: () => {
-                                  return setMenuOpen(!menuOpen);
-                                },
-                                title: "Toggle menu bar",
-                                children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
-                              }
-                            ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              MenuBar,
-                              {
-                                appState,
-                                data,
-                                dispatch,
-                                onPublish,
-                                menuOpen,
-                                renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                                setMenuOpen
-                              }
-                            )
-                          ] })
-                        ] }) })
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                          ] }) })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        SidebarSection,
+                        {
+                          noPadding: true,
+                          noBorderTop: true,
+                          showBreadcrumbs: true,
+                          title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
+                        }
+                      ) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                      SidebarSection,
-                      {
-                        noPadding: true,
-                        noBorderTop: true,
-                        showBreadcrumbs: true,
-                        title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
-                      }
-                    ) }),
                     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "div",
                       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.1-canary.bef3303",
+  "version": "0.14.2-canary.3f7fc52",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",