@measured/puck 0.14.1-canary.4d029f6 → 0.14.1-canary.5c05f94

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.css +37 -33
  2. package/dist/index.js +84 -82
  3. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -676,70 +676,74 @@
676
676
  }
677
677
 
678
678
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
679
- ._Puck_u70b9_19 {
680
- --puck-frame-width: auto;
681
- --puck-side-bar-width: 0px;
679
+ ._Puck_mowzv_19 {
682
680
  --puck-space-px: 16px;
683
681
  bottom: 0;
684
- display: grid;
685
682
  font-family: var(--puck-font-family);
686
- grid-template-areas: "header header header" "left editor right";
687
- grid-template-columns: 0 var(--puck-frame-width) 0;
688
- grid-template-rows: min-content auto;
689
- height: 100dvh;
690
683
  left: 0;
691
684
  position: fixed;
692
685
  right: 0;
693
686
  top: 0;
694
687
  }
695
- ._Puck--mounted_u70b9_36 {
688
+ ._Puck-layout_mowzv_29 {
689
+ --puck-frame-width: auto;
690
+ --puck-side-bar-width: 0px;
691
+ display: grid;
692
+ grid-template-areas: "header header header" "left editor right";
693
+ grid-template-columns: 0 var(--puck-frame-width) 0;
694
+ grid-template-rows: min-content auto;
695
+ height: 100dvh;
696
+ position: relative;
697
+ z-index: 0;
698
+ }
699
+ ._Puck--mounted_mowzv_41 ._Puck-layout_mowzv_29 {
696
700
  --puck-side-bar-width: 186px;
697
701
  }
698
- ._Puck--leftSideBarVisible_u70b9_40 {
702
+ ._Puck--leftSideBarVisible_mowzv_45 ._Puck-layout_mowzv_29 {
699
703
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
700
704
  }
701
- ._Puck--rightSideBarVisible_u70b9_46 {
705
+ ._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
702
706
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
703
707
  }
704
- ._Puck--leftSideBarVisible_u70b9_40._Puck--rightSideBarVisible_u70b9_46 {
708
+ ._Puck--leftSideBarVisible_mowzv_45._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
705
709
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
706
710
  }
707
711
  @media (min-width: 458px) {
708
- ._Puck-mounted_u70b9_59 {
712
+ ._Puck-mounted_mowzv_64 ._Puck-layout_mowzv_29 {
709
713
  --puck-frame-width: minmax(266px, auto);
710
714
  }
711
715
  }
712
716
  @media (min-width: 638px) {
713
- ._Puck_u70b9_19 {
717
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
714
718
  --puck-side-bar-width: minmax(186px, 250px);
715
719
  }
716
720
  }
717
721
  @media (min-width: 766px) {
718
- ._Puck_u70b9_19 {
722
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
719
723
  --puck-frame-width: auto;
720
724
  }
721
725
  }
722
726
  @media (min-width: 990px) {
723
- ._Puck_u70b9_19 {
727
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
724
728
  --puck-side-bar-width: 256px;
725
729
  }
726
730
  }
727
731
  @media (min-width: 1198px) {
728
- ._Puck_u70b9_19 {
732
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
729
733
  --puck-side-bar-width: 274px;
730
734
  }
731
735
  }
732
736
  @media (min-width: 1398px) {
733
- ._Puck_u70b9_19 {
737
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
734
738
  --puck-side-bar-width: 290px;
735
739
  }
736
740
  }
737
741
  @media (min-width: 1598px) {
738
- ._Puck_u70b9_19 {
742
+ ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
739
743
  --puck-side-bar-width: 320px;
740
744
  }
741
745
  }
742
- ._Puck-header_u70b9_100 {
746
+ ._Puck-header_mowzv_105 {
743
747
  background: var(--puck-color-white);
744
748
  border-bottom: 1px solid var(--puck-color-grey-09);
745
749
  color: var(--puck-color-black);
@@ -747,7 +751,7 @@
747
751
  position: relative;
748
752
  max-width: 100vw;
749
753
  }
750
- ._Puck-headerInner_u70b9_109 {
754
+ ._Puck-headerInner_mowzv_114 {
751
755
  align-items: end;
752
756
  display: grid;
753
757
  gap: var(--puck-space-px);
@@ -756,43 +760,43 @@
756
760
  grid-template-rows: auto;
757
761
  padding: var(--puck-space-px);
758
762
  }
759
- ._Puck-headerToggle_u70b9_119 {
763
+ ._Puck-headerToggle_mowzv_124 {
760
764
  color: var(--puck-color-grey-05);
761
765
  display: flex;
762
766
  margin-left: -4px;
763
767
  padding-top: 2px;
764
768
  }
765
- ._Puck--rightSideBarVisible_u70b9_46 ._Puck-rightSideBarToggle_u70b9_126,
766
- ._Puck--leftSideBarVisible_u70b9_40 ._Puck-leftSideBarToggle_u70b9_127 {
769
+ ._Puck--rightSideBarVisible_mowzv_51 ._Puck-rightSideBarToggle_mowzv_131,
770
+ ._Puck--leftSideBarVisible_mowzv_45 ._Puck-leftSideBarToggle_mowzv_132 {
767
771
  color: var(--puck-color-black);
768
772
  }
769
- ._Puck-headerTitle_u70b9_131 {
773
+ ._Puck-headerTitle_mowzv_136 {
770
774
  align-self: center;
771
775
  }
772
- ._Puck-headerPath_u70b9_135 {
776
+ ._Puck-headerPath_mowzv_140 {
773
777
  font-family: var(--puck-font-family-monospaced);
774
778
  font-size: var(--puck-font-size-xxs);
775
779
  font-weight: normal;
776
780
  word-break: break-all;
777
781
  }
778
- ._Puck-headerTools_u70b9_142 {
782
+ ._Puck-headerTools_mowzv_147 {
779
783
  display: flex;
780
784
  gap: 16px;
781
785
  justify-content: flex-end;
782
786
  }
783
- ._Puck-menuButton_u70b9_148 {
787
+ ._Puck-menuButton_mowzv_153 {
784
788
  color: var(--puck-color-grey-05);
785
789
  margin-left: -4px;
786
790
  }
787
- ._Puck--menuOpen_u70b9_153 ._Puck-menuButton_u70b9_148 {
791
+ ._Puck--menuOpen_mowzv_158 ._Puck-menuButton_mowzv_153 {
788
792
  color: var(--puck-color-black);
789
793
  }
790
794
  @media (min-width: 638px) {
791
- ._Puck-menuButton_u70b9_148 {
795
+ ._Puck-menuButton_mowzv_153 {
792
796
  display: none;
793
797
  }
794
798
  }
795
- ._Puck-leftSideBar_u70b9_127 {
799
+ ._Puck-leftSideBar_mowzv_132 {
796
800
  background: var(--puck-color-grey-12);
797
801
  border-right: 1px solid var(--puck-color-grey-09);
798
802
  display: flex;
@@ -800,7 +804,7 @@
800
804
  grid-area: left;
801
805
  overflow-y: auto;
802
806
  }
803
- ._Puck-rightSideBar_u70b9_126 {
807
+ ._Puck-rightSideBar_mowzv_131 {
804
808
  background: var(--puck-color-white);
805
809
  border-left: 1px solid var(--puck-color-grey-09);
806
810
  display: flex;
@@ -808,7 +812,7 @@
808
812
  grid-area: right;
809
813
  overflow-y: auto;
810
814
  }
811
- ._Puck-portal_u70b9_181 {
815
+ ._Puck-portal_mowzv_186 {
812
816
  z-index: 2;
813
817
  }
814
818
 
package/dist/index.js CHANGED
@@ -31342,7 +31342,7 @@ var MenuBar = ({
31342
31342
 
31343
31343
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
31344
31344
  init_react_import();
31345
- 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" };
31345
+ 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" };
31346
31346
 
31347
31347
  // components/Puck/components/Fields/index.tsx
31348
31348
  init_react_import();
@@ -33689,94 +33689,96 @@ function Puck({
33689
33689
  rightSideBarVisible
33690
33690
  }),
33691
33691
  children: [
33692
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33693
- CustomHeader,
33694
- {
33695
- actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33696
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33697
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33698
- Button,
33699
- {
33700
- onClick: () => {
33701
- onPublish && onPublish(data);
33702
- },
33703
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
33704
- children: "Publish"
33705
- }
33706
- )
33707
- ] }),
33708
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
33709
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
33710
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33711
- IconButton,
33712
- {
33713
- onClick: () => {
33714
- toggleSidebars("left");
33715
- },
33716
- title: "Toggle left sidebar",
33717
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
33718
- }
33719
- ) }),
33720
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33721
- IconButton,
33692
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
33693
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33694
+ CustomHeader,
33695
+ {
33696
+ actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33697
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33698
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33699
+ Button,
33722
33700
  {
33723
33701
  onClick: () => {
33724
- toggleSidebars("right");
33702
+ onPublish && onPublish(data);
33725
33703
  },
33726
- title: "Toggle right sidebar",
33727
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
33704
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
33705
+ children: "Publish"
33728
33706
  }
33729
- ) })
33707
+ )
33730
33708
  ] }),
33731
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
33732
- headerTitle || rootProps.title || "Page",
33733
- headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33734
- " ",
33735
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
33709
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
33710
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
33711
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33712
+ IconButton,
33713
+ {
33714
+ onClick: () => {
33715
+ toggleSidebars("left");
33716
+ },
33717
+ title: "Toggle left sidebar",
33718
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
33719
+ }
33720
+ ) }),
33721
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33722
+ IconButton,
33723
+ {
33724
+ onClick: () => {
33725
+ toggleSidebars("right");
33726
+ },
33727
+ title: "Toggle right sidebar",
33728
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
33729
+ }
33730
+ ) })
33731
+ ] }),
33732
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
33733
+ headerTitle || rootProps.title || "Page",
33734
+ headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
33735
+ " ",
33736
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
33737
+ ] })
33738
+ ] }) }),
33739
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
33740
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33741
+ IconButton,
33742
+ {
33743
+ onClick: () => {
33744
+ return setMenuOpen(!menuOpen);
33745
+ },
33746
+ title: "Toggle menu bar",
33747
+ children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
33748
+ }
33749
+ ) }),
33750
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33751
+ MenuBar,
33752
+ {
33753
+ appState,
33754
+ data,
33755
+ dispatch,
33756
+ onPublish,
33757
+ menuOpen,
33758
+ renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33759
+ setMenuOpen
33760
+ }
33761
+ )
33736
33762
  ] })
33737
- ] }) }),
33738
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
33739
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33740
- IconButton,
33741
- {
33742
- onClick: () => {
33743
- return setMenuOpen(!menuOpen);
33744
- },
33745
- title: "Toggle menu bar",
33746
- children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
33747
- }
33748
- ) }),
33749
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33750
- MenuBar,
33751
- {
33752
- appState,
33753
- data,
33754
- dispatch,
33755
- onPublish,
33756
- menuOpen,
33757
- renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
33758
- setMenuOpen
33759
- }
33760
- )
33761
- ] })
33762
- ] }) })
33763
- }
33764
- ),
33765
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
33766
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
33767
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
33763
+ ] }) })
33764
+ }
33765
+ ),
33766
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
33767
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
33768
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
33769
+ ] }),
33770
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
33771
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33772
+ SidebarSection,
33773
+ {
33774
+ noPadding: true,
33775
+ noBorderTop: true,
33776
+ showBreadcrumbs: true,
33777
+ title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
33778
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
33779
+ }
33780
+ ) })
33768
33781
  ] }),
33769
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
33770
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33771
- SidebarSection,
33772
- {
33773
- noPadding: true,
33774
- noBorderTop: true,
33775
- showBreadcrumbs: true,
33776
- title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
33777
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
33778
- }
33779
- ) }),
33780
33782
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
33781
33783
  "div",
33782
33784
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.14.1-canary.4d029f6",
3
+ "version": "0.14.1-canary.5c05f94",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",