@measured/puck 0.21.0-canary.5333fc7e → 0.21.0-canary.56be3202

package/dist/index.css

@@ -147,7 +147,7 @@
 /* bundle/index.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
-._ActionBar_rvadt_1 {
+._ActionBar_1nmyk_1 {
   align-items: center;
   cursor: default;
   display: flex;
@@ -163,7 +163,7 @@
   font-family: var(--puck-font-family);
   min-height: 26px;
 }
-._ActionBar-label_rvadt_18 {
+._ActionBar-label_1nmyk_18 {
   color: var(--puck-color-grey-08);
   font-size: var(--puck-font-size-xxxs);
   font-weight: 500;
@@ -174,13 +174,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._ActionBar-action_rvadt_30 + ._ActionBar-label_rvadt_18 {
+._ActionBarAction_1nmyk_30 + ._ActionBar-label_1nmyk_18 {
   padding-inline-start: 0;
 }
-._ActionBar-label_rvadt_18 + ._ActionBar-action_rvadt_30 {
+._ActionBar-label_1nmyk_18 + ._ActionBarAction_1nmyk_30 {
   margin-inline-start: -4px;
 }
-._ActionBar-group_rvadt_38 {
+._ActionBar-group_1nmyk_38 {
   align-items: center;
   border-inline-start: 0.5px solid var(--puck-color-grey-05);
   display: flex;
@@ -188,18 +188,18 @@
   padding-inline-start: 4px;
   padding-inline-end: 4px;
 }
-._ActionBar-group_rvadt_38:first-of-type {
+._ActionBar-group_1nmyk_38:first-of-type {
   border-inline-start: 0;
 }
-._ActionBar-group_rvadt_38:empty {
+._ActionBar-group_1nmyk_38:empty {
   display: none;
 }
-._ActionBar-action_rvadt_30 {
+._ActionBarAction_1nmyk_30 {
   background: transparent;
   border: none;
   color: var(--puck-color-grey-08);
   cursor: pointer;
-  padding: 6px 8px;
+  padding: 6px;
   margin-inline-start: 4px;
   margin-inline-end: 4px;
   border-radius: 4px;
@@ -209,26 +209,37 @@
   justify-content: center;
   transition: color 50ms ease-in;
 }
-._ActionBar-action_rvadt_30 svg {
+._ActionBarAction--disabled_1nmyk_71 {
+  cursor: auto;
+  color: var(--puck-color-grey-06);
+}
+._ActionBarAction_1nmyk_30 svg {
   max-width: none !important;
 }
-._ActionBar-action_rvadt_30:focus-visible {
+._ActionBarAction_1nmyk_30:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ActionBar-action_rvadt_30:hover {
+  ._ActionBarAction_1nmyk_30:hover:not(._ActionBarAction--disabled_1nmyk_71) {
     color: var(--puck-color-azure-06);
     transition: none;
   }
 }
-._ActionBar-action_rvadt_30:active {
+._ActionBarAction_1nmyk_30:active:not(._ActionBarAction--disabled_1nmyk_71),
+._ActionBarAction--active_1nmyk_93 {
   color: var(--puck-color-azure-07);
   transition: none;
 }
-._ActionBar-group_rvadt_38 * {
+._ActionBar-group_1nmyk_38 * {
   margin: 0;
 }
+._ActionBar-separator_1nmyk_102 {
+  background: var(--puck-color-grey-05);
+  margin-inline: 4px;
+  width: 0.5px;
+  height: 100%;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
 ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
@@ -545,7 +556,7 @@ textarea._Input-input_bsxfo_26 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
-._IconButton_swpni_1 {
+._IconButton_ffob9_1 {
   align-items: center;
   background: transparent;
   border: none;
@@ -557,23 +568,26 @@ textarea._Input-input_bsxfo_26 {
   padding: 4px;
   transition: background-color 50ms ease-in, color 50ms ease-in;
 }
-._IconButton_swpni_1:focus-visible {
+._IconButton--active_ffob9_14 {
+  color: var(--puck-color-azure-04);
+}
+._IconButton_ffob9_1:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._IconButton_swpni_1:hover:not(._IconButton--disabled_swpni_20) {
-    background: var(--puck-color-azure-12);
+  ._IconButton_ffob9_1:hover:not(._IconButton--disabled_ffob9_24) {
+    background: var(--puck-color-grey-10);
     color: var(--puck-color-azure-04);
     cursor: pointer;
     transition: none;
   }
 }
-._IconButton_swpni_1:active {
+._IconButton_ffob9_1:active {
   background: var(--puck-color-azure-11);
   transition: none;
 }
-._IconButton-title_swpni_33 {
+._IconButton-title_ffob9_37 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -582,7 +596,7 @@ textarea._Input-input_bsxfo_26 {
   white-space: nowrap;
   width: 1px;
 }
-._IconButton--disabled_swpni_20 {
+._IconButton--disabled_ffob9_24 {
   color: var(--puck-color-grey-07);
 }
 
@@ -1084,6 +1098,248 @@ textarea._Input-input_bsxfo_26 {
   padding-inline-start: 8px;
 }
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */
+._RichTextMenu_k97eh_1 {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+._RichTextMenu--form_k97eh_7 {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 6px 6px;
+  background-color: var(--puck-color-grey-12);
+  position: relative;
+  scrollbar-width: none;
+  overflow-x: auto;
+}
+._RichTextMenu-group_k97eh_17 {
+  display: flex;
+  align-items: space-between;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding-inline: 6px;
+  gap: 2px;
+  position: relative;
+}
+._RichTextMenu-group_k97eh_17:first-of-type {
+  padding-left: 0;
+}
+._RichTextMenu-group_k97eh_17:last-of-type {
+  padding-right: 0;
+}
+._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 {
+  color: var(--puck-color-grey-08);
+  gap: 0px;
+  flex-wrap: nowrap;
+}
+._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
+  border-left: 1px solid var(--puck-color-grey-10);
+}
+._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
+  border-left: 0.5px solid var(--puck-color-grey-05);
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */
+._Control_1aveu_1 .lucide {
+  height: 18px;
+  width: 18px;
+}
+._Control--inline_1aveu_6 .lucide {
+  height: 16px;
+  width: 16px;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Select/styles.module.css/#css-module-data */
+._Select_xjbef_1 {
+  position: relative;
+  z-index: 1;
+}
+._Select-button_xjbef_6 {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  gap: 0px;
+  height: 100%;
+  padding: 4px;
+  padding-right: 2px;
+}
+._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6 {
+  color: currentColor;
+}
+._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6 {
+  cursor: pointer;
+}
+._Select-buttonIcon_xjbef_27 {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+._Select--standalone_xjbef_33 ._Select-buttonIcon_xjbef_27 .lucide {
+  height: 18px;
+  width: 18px;
+}
+._Select--actionBar_xjbef_38 ._Select-buttonIcon_xjbef_27 .lucide {
+  height: 16px;
+  width: 16px;
+}
+._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6:hover,
+._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
+  background: var(--puck-color-grey-10);
+  color: var(--puck-color-azure-04);
+}
+._Select--disabled_xjbef_23 ._Select-button_xjbef_6 {
+  color: var(--puck-color-grey-07);
+}
+._Select--actionBar_xjbef_38 {
+  &._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6:hover,
+  &._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
+    background: none;
+    color: var(--puck-color-azure-07);
+  }
+}
+._Select-items_xjbef_61 {
+  background: white;
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 8px;
+  margin: 10px 8px;
+  margin-left: 0;
+  padding: 4px;
+  z-index: 2;
+  list-style: none;
+}
+._SelectItem_xjbef_72 {
+  background: transparent;
+  border-radius: 4px;
+  border: none;
+  color: var(--puck-color-grey-04);
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: var(--puck-font-size-xxs);
+  margin: 0;
+  padding: 8px 12px;
+  width: 100%;
+}
+._SelectItem--isSelected_xjbef_87 {
+  background: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-04);
+  font-weight: 500;
+}
+._SelectItem--isSelected_xjbef_87 ._SelectItem-icon_xjbef_93 {
+  color: var(--puck-color-azure-04);
+}
+._SelectItem_xjbef_72:hover {
+  background: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-04);
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextEditor/styles.module.css/#css-module-data */
+._RichTextEditor_1elol_1 .ProseMirror {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  cursor: text;
+  outline: none;
+  position: relative;
+}
+._RichTextEditor_1elol_1 .rich-text * {
+  white-space: pre-wrap;
+  user-select: auto;
+  -webkit-user-select: auto;
+}
+._RichTextEditor_1elol_1 .rich-text blockquote {
+  margin: 1em 0;
+  padding: 0 1em;
+  border-left: 4px solid var(--puck-color-grey-09);
+}
+._RichTextEditor_1elol_1 .rich-text code {
+  background-color: var(--puck-color-grey-11);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+._RichTextEditor_1elol_1 .rich-text p:empty::before {
+  content: "\a0";
+}
+._RichTextEditor_1elol_1 .rich-text pre code {
+  display: block;
+  padding: 8px 12px;
+}
+._RichTextEditor_1elol_1 .rich-text > *:first-child,
+._RichTextEditor_1elol_1 .ProseMirror > *:first-child,
+._RichTextEditor_1elol_1 .rich-text * p:first-of-type {
+  margin-top: 0;
+}
+._RichTextEditor_1elol_1 .rich-text > *:last-child,
+._RichTextEditor_1elol_1 .ProseMirror > *:last-child,
+._RichTextEditor_1elol_1 .rich-text * p:last-of-type {
+  margin-bottom: 0;
+}
+._RichTextEditor--editor_1elol_50 {
+  background: var(--puck-color-white);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--puck-color-grey-09);
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  font-size: var(--puck-font-size-xxs);
+  resize: vertical;
+  transition: border-color 50ms ease-in;
+  width: 100%;
+  max-width: 100%;
+  min-height: 128px;
+}
+._RichTextEditor--editor_1elol_50 .rich-text {
+  flex-grow: 1;
+}
+._RichTextEditor--editor_1elol_50 .rich-text:not(:has(.ProseMirror)),
+._RichTextEditor--editor_1elol_50 .rich-text .ProseMirror {
+  height: 100%;
+  padding: 12px 15px;
+}
+._RichTextEditor--editor_1elol_50 .rich-text ul,
+._RichTextEditor--editor_1elol_50 .rich-text ol {
+  padding-left: 24px;
+}
+._RichTextEditor--editor_1elol_50 .rich-text li {
+  line-height: 1.5;
+}
+._RichTextEditor--editor_1elol_50 .rich-text p {
+  margin-block: 12px;
+}
+._RichTextEditor--editor_1elol_50 .rich-text ul {
+  list-style: disc;
+}
+._RichTextEditor--editor_1elol_50 .rich-text ol {
+  list-style: decimal;
+}
+._RichTextEditor--editor_1elol_50:focus-within {
+  border-color: var(--puck-color-grey-05);
+  outline: 2px solid var(--puck-color-azure-05);
+  transition: none;
+}
+._RichTextEditor--editor_1elol_50._RichTextEditor--disabled_1elol_106 {
+  background: var(--puck-color-grey-11);
+}
+._RichTextEditor_1elol_1:not(:focus-within):not(._RichTextEditor--isActive_1elol_110) .ProseMirror ::selection {
+  background-color: transparent;
+}
+._RichTextEditor-menu_1elol_116 {
+  border-bottom: 1px solid var(--puck-color-grey-10);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+._RichTextEditor--disabled_1elol_106 ._RichTextEditor-menu_1elol_116 {
+  border-bottom: 1px solid var(--puck-color-grey-09);
+}
+
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
 ._ObjectField_1ua3y_5 {
   display: flex;
@@ -1326,7 +1582,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   outline-offset: 2px;
 }
 [data-puck-overlay-portal]:focus-within {
-  outline: 2px var(--puck-color-azure-07) solid;
+  outline: 2px var(--puck-color-azure-07) dashed;
   outline-offset: 2px;
 }
 
@@ -1345,393 +1601,697 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   display: none;
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
-._SidebarSection_8boj8_1 {
-  display: flex;
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
+._PuckFields_10bh7_1 {
   position: relative;
-  flex-direction: column;
-  color: var(--puck-color-black);
+  font-family: var(--puck-font-family);
 }
-._SidebarSection_8boj8_1:last-of-type {
-  flex-grow: 1;
+._PuckFields--isLoading_10bh7_6 {
+  min-height: 48px;
 }
-._SidebarSection-title_8boj8_12 {
+._PuckFields-loadingOverlay_10bh7_10 {
   background: var(--puck-color-white);
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  position: absolute;
+  z-index: 1;
+  pointer-events: all;
+  box-sizing: border-box;
+  opacity: 0.8;
+}
+._PuckFields-loadingOverlayInner_10bh7_25 {
+  display: flex;
   padding: 16px;
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  border-top: 1px solid var(--puck-color-grey-09);
-  overflow-x: auto;
+  position: sticky;
+  top: 0;
 }
-._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
-  border-top: 0px;
+._PuckFields-field_10bh7_32 * {
+  box-sizing: border-box;
 }
-._SidebarSection-content_8boj8_24 {
+._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
+  color: var(--puck-color-grey-04);
   padding: 16px;
+  padding-bottom: 12px;
+  display: block;
 }
-._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
-  padding: 0px;
+._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
 }
-._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
-  padding-bottom: 4px;
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
+._ComponentList_1rrlt_1 {
+  max-width: 100%;
 }
-._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
-  border-bottom: none;
-  flex-grow: 1;
+._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
+  margin-top: 12px;
 }
-._SidebarSection-breadcrumbLabel_8boj8_41 {
-  background: none;
+._ComponentList-content_1rrlt_9 {
+  display: none;
+}
+._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
+  display: block;
+}
+._ComponentList-title_1rrlt_17 {
+  background-color: transparent;
   border: 0;
-  border-radius: 2px;
-  color: var(--puck-color-azure-04);
+  color: var(--puck-color-grey-05);
   cursor: pointer;
+  display: flex;
   font: inherit;
-  flex-shrink: 0;
-  padding: 0;
-  transition: color 50ms ease-in;
+  font-size: var(--puck-font-size-xxxs);
+  list-style: none;
+  margin-bottom: 6px;
+  padding: 8px;
+  text-transform: uppercase;
+  transition: background-color 50ms ease-in, color 50ms ease-in;
+  gap: 4px;
+  border-radius: 4px;
+  width: 100%;
 }
-._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
+._ComponentList-title_1rrlt_17:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
-    color: var(--puck-color-azure-03);
+  ._ComponentList-title_1rrlt_17:hover {
+    background-color: var(--puck-color-azure-11);
+    color: var(--puck-color-azure-04);
     transition: none;
   }
 }
-._SidebarSection-breadcrumbLabel_8boj8_41:active {
-  color: var(--puck-color-azure-02);
+._ComponentList-title_1rrlt_17:active {
+  background-color: var(--puck-color-azure-10);
   transition: none;
 }
-._SidebarSection-breadcrumbs_8boj8_70 {
-  align-items: center;
-  display: flex;
-  gap: 4px;
+._ComponentList-titleIcon_1rrlt_53 {
+  margin-inline-start: auto;
 }
-._SidebarSection-breadcrumb_8boj8_41 {
-  align-items: center;
-  display: flex;
-  gap: 4px;
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css/#css-module-data */
+._Components_3pbdy_1 {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
-._SidebarSection-heading_8boj8_82 {
-  padding-inline-end: 16px;
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
+._PuckPreview_z2rgu_1 {
+  position: relative;
+  height: 100%;
 }
-._SidebarSection-loadingOverlay_8boj8_86 {
-  background: var(--puck-color-white);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+._PuckPreview-frame_z2rgu_6 {
+  border: none;
   height: 100%;
   width: 100%;
-  top: 0;
-  position: absolute;
-  z-index: 1;
-  pointer-events: all;
-  box-sizing: border-box;
-  opacity: 0.8;
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
-._Puck_1yxlw_19 {
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
+._LayerTree_7rx04_1 {
+  color: var(--puck-color-grey-03);
+  font-family: var(--puck-font-family);
+  font-size: var(--puck-font-size-xxs);
+  margin: 0;
+  position: relative;
+  list-style: none;
+  padding: 0;
+}
+._LayerTree-zoneTitle_7rx04_11 {
+  color: var(--puck-color-grey-05);
+  font-size: var(--puck-font-size-xxxs);
+  text-transform: uppercase;
+}
+._LayerTree-helper_7rx04_17 {
+  text-align: center;
+  color: var(--puck-color-grey-07);
+  margin: 8px 4px;
+}
+._Layer_7rx04_1 {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+._Layer-inner_7rx04_29 {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition: color 50ms ease-in;
+}
+._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
+  padding-inline-start: 0;
+}
+._Layer-clickable_7rx04_39 {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  padding-inline-start: 12px;
+  padding-inline-end: 4px;
+  width: 100%;
+}
+._Layer-clickable_7rx04_39:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
+  position: relative;
+  z-index: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
+    border-color: var(--puck-color-azure-10);
+    background: var(--puck-color-azure-11);
+    color: var(--puck-color-azure-04);
+    transition: none;
+  }
+}
+._Layer--isSelected_7rx04_61 {
+  border-color: var(--puck-color-azure-08);
+}
+._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
+  background: var(--puck-color-azure-10);
+}
+._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
+._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
+  transform: scaleY(-1);
+}
+._Layer-zones_7rx04_82 {
+  display: none;
+  margin-inline-start: 12px;
+}
+._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
+._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
+  display: block;
+}
+._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
+  margin-inline-start: 12px;
+}
+._Layer-title_7rx04_96,
+._LayerTree-zoneTitle_7rx04_11 {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 4px;
+  overflow-x: hidden;
+}
+._Layer-name_7rx04_105 {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._Layer-icon_7rx04_111 {
+  color: var(--puck-color-rose-07);
+  margin-top: 4px;
+}
+._Layer-zoneIcon_7rx04_116 {
+  color: var(--puck-color-grey-08);
+  margin-top: 4px;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
+._Outline_cvjlj_1 {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
+._Puck_hgcra_19 {
   --puck-space-px: 16px;
   font-family: var(--puck-font-family);
+  height: 100%;
   overflow-x: hidden;
 }
 @media (min-width: 766px) {
-  ._Puck_1yxlw_19 {
+  ._Puck_hgcra_19 {
     overflow-x: auto;
   }
 }
-._Puck-portal_1yxlw_31 {
+._Puck-portal_hgcra_32 {
   position: relative;
   z-index: 2;
 }
-._PuckLayout-inner_1yxlw_38 {
+._PuckLayout_hgcra_37 {
+  height: 100dvh;
+}
+._PuckLayout-inner_hgcra_41 {
   --puck-frame-width: auto;
+  --puck-side-nav-width: min-content;
   --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) );
+  background-color: var(--puck-color-grey-12);
   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;
+  grid-template-areas: "header" "editor" "left" "right" "sidenav";
+  grid-template-columns: var(--puck-frame-width);
+  grid-template-rows: min-content auto 0 0 var(--puck-side-nav-width);
+  height: 100%;
   position: relative;
+  transition: grid-template-rows 150ms ease-in;
   z-index: 0;
+  overflow: hidden;
 }
-._PuckLayout--mounted_1yxlw_59 ._PuckLayout-inner_1yxlw_38 {
+@media (min-width: 638px) {
+  ._PuckLayout-inner_hgcra_41 {
+    --puck-side-nav-width: 68px;
+    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;
+    grid-template-rows: min-content auto;
+  }
+  ._Puck--hidePlugins_hgcra_73 ._PuckLayout-inner_hgcra_41 {
+    --puck-side-nav-width: 0;
+  }
+}
+._PuckLayout--mounted_hgcra_78 ._PuckLayout-inner_hgcra_41 {
   --puck-side-bar-width: 186px;
 }
-._PuckLayout--leftSideBarVisible_1yxlw_63 ._PuckLayout-inner_1yxlw_38 {
-  grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
+._PuckLayout--mobilePanelHeightToggle_hgcra_82._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-inner_hgcra_41 {
+  grid-template-rows: 0 auto 30% 0 var(--puck-side-nav-width);
 }
-._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
-  grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
+._PuckLayout--mobilePanelHeightToggle_hgcra_82._PuckLayout--leftSideBarVisible_hgcra_82._PuckLayout--isExpanded_hgcra_88 ._PuckLayout-inner_hgcra_41 {
+  grid-template-rows: 0 auto 55% 0 var(--puck-side-nav-width);
 }
-._PuckLayout--leftSideBarVisible_1yxlw_63._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
-  grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
+@media (min-width: 638px) {
+  ._PuckLayout--mobilePanelHeightToggle_hgcra_82._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-inner_hgcra_41 {
+    grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
+    grid-template-rows: min-content auto;
+  }
+}
+._PuckLayout--mobilePanelHeightMinContent_hgcra_106._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-inner_hgcra_41,
+._PuckLayout--mobilePanelHeightMinContent_hgcra_106._PuckLayout--leftSideBarVisible_hgcra_82._PuckLayout--isExpanded_hgcra_88 ._PuckLayout-inner_hgcra_41 {
+  grid-template-rows: 0 auto min-content 0 var(--puck-side-nav-width);
+}
+@media (min-width: 638px) {
+  ._PuckLayout--mobilePanelHeightToggle_hgcra_82._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-inner_hgcra_41,
+  ._PuckLayout--mobilePanelHeightToggle_hgcra_82._PuckLayout--leftSideBarVisible_hgcra_82._PuckLayout--isExpanded_hgcra_88 ._PuckLayout-inner_hgcra_41,
+  ._PuckLayout--mobilePanelHeightMinContent_hgcra_106._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-inner_hgcra_41,
+  ._PuckLayout--mobilePanelHeightMinContent_hgcra_106._PuckLayout--leftSideBarVisible_hgcra_82._PuckLayout--isExpanded_hgcra_88 ._PuckLayout-inner_hgcra_41 {
+    grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
+    grid-template-rows: min-content auto;
+  }
+}
+@media (min-width: 638px) {
+  ._PuckLayout--rightSideBarVisible_hgcra_133 ._PuckLayout-inner_hgcra_41 {
+    grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
+  }
+}
+@media (min-width: 638px) {
+  ._PuckLayout--leftSideBarVisible_hgcra_82._PuckLayout--rightSideBarVisible_hgcra_133 ._PuckLayout-inner_hgcra_41 {
+    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_1yxlw_83 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout-mounted_hgcra_152 ._PuckLayout-inner_hgcra_41 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-side-bar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
+  ._PuckLayout_hgcra_37 ._PuckLayout-inner_hgcra_41 {
     --puck-side-bar-width: 320px;
   }
 }
+._PuckLayout-nav_hgcra_193 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  background-color: var(--puck-color-grey-12);
+  grid-area: sidenav;
+  overflow: hidden;
+  width: 100%;
+}
+@media (min-width: 638px) {
+  ._PuckLayout-nav_hgcra_193 {
+    border-top: 0;
+    border-right: 1px solid var(--puck-color-grey-09);
+    box-sizing: border-box;
+  }
+}
+._PuckLayout-header_hgcra_209 {
+  grid-area: header;
+}
+._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-header_hgcra_209 {
+  overflow: hidden;
+}
+@media (min-width: 638px) {
+  ._PuckLayout--leftSideBarVisible_hgcra_82 ._PuckLayout-header_hgcra_209 {
+    overflow: auto;
+  }
+}
+._PuckPluginTab_hgcra_223 {
+  display: none;
+  flex-grow: 1;
+  max-height: 100%;
+}
+._PuckPluginTab--visible_hgcra_229 {
+  display: flex;
+  flex-direction: column;
+}
+._PuckPluginTab-body_hgcra_234 {
+  flex-grow: 1;
+  max-height: 100%;
+}
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
-._PuckFields_10bh7_1 {
-  position: relative;
-  font-family: var(--puck-font-family);
+/* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
+._MenuBar_8pf8c_1 {
+  background-color: var(--puck-color-white);
+  border-bottom: 1px solid var(--puck-color-grey-09);
+  display: none;
+  left: 0;
+  margin-top: 1px;
+  padding: 8px 16px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 2;
 }
-._PuckFields--isLoading_10bh7_6 {
-  min-height: 48px;
+._MenuBar--menuOpen_8pf8c_14 {
+  display: block;
 }
-._PuckFields-loadingOverlay_10bh7_10 {
-  background: var(--puck-color-white);
+@media (min-width: 638px) {
+  ._MenuBar_8pf8c_1 {
+    border: none;
+    display: block;
+    margin-top: 0;
+    overflow-y: visible;
+    padding: 0;
+    position: static;
+  }
+}
+._MenuBar-inner_8pf8c_29 {
+  align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
   justify-content: flex-end;
-  align-items: flex-start;
-  height: 100%;
-  width: 100%;
-  top: 0px;
-  position: absolute;
-  z-index: 1;
-  pointer-events: all;
-  box-sizing: border-box;
-  opacity: 0.8;
 }
-._PuckFields-loadingOverlayInner_10bh7_25 {
+@media (min-width: 638px) {
+  ._MenuBar-inner_8pf8c_29 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+}
+._MenuBar-history_8pf8c_45 {
   display: flex;
-  padding: 16px;
-  position: sticky;
-  top: 0;
 }
-._PuckFields-field_10bh7_32 * {
-  box-sizing: border-box;
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
+._PuckHeader_63pti_1 {
+  background: var(--puck-color-white);
+  border-bottom: 1px solid var(--puck-color-grey-09);
+  color: var(--puck-color-black);
+  grid-area: header;
+  position: relative;
+  max-width: 100vw;
 }
-._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
-  color: var(--puck-color-grey-04);
-  padding: 16px;
-  padding-bottom: 12px;
-  display: block;
+@media (min-width: 638px) {
+  ._PuckHeader_63pti_1 {
+    padding-left: 67px;
+  }
+  ._PuckHeader--hidePlugins_63pti_15 {
+    padding-left: 0;
+  }
 }
-._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
+._PuckHeader-inner_63pti_20 {
+  align-items: end;
+  display: grid;
+  gap: var(--puck-space-px);
+  grid-template-areas: "left middle right";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto;
+  padding: var(--puck-space-px);
 }
-
-/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_1rrlt_1 {
-  max-width: 100%;
+@media (min-width: 638px) {
+  ._PuckHeader-inner_63pti_20 {
+    border-left: 1px solid var(--puck-color-grey-09);
+  }
+  ._PuckHeader--hidePlugins_63pti_15 ._PuckHeader-inner_63pti_20 {
+    border-left: none;
+  }
 }
-._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
-  margin-top: 12px;
+._PuckHeader-toggle_63pti_40 {
+  color: var(--puck-color-grey-05);
+  display: flex;
+  margin-inline-start: -4px;
+  padding-top: 2px;
 }
-._ComponentList-content_1rrlt_9 {
+._PuckHeader--rightSideBarVisible_63pti_47 ._PuckHeader-rightSideBarToggle_63pti_47,
+._PuckHeader--leftSideBarVisible_63pti_48 ._PuckHeader-leftSideBarToggle_63pti_48 {
+  color: var(--puck-color-black);
+}
+._PuckHeader-rightSideBarToggle_63pti_47,
+._PuckHeader-leftSideBarToggle_63pti_48 {
   display: none;
 }
-._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
-  display: block;
+@media (min-width: 638px) {
+  ._PuckHeader-rightSideBarToggle_63pti_47,
+  ._PuckHeader-leftSideBarToggle_63pti_48 {
+    display: block;
+  }
 }
-._ComponentList-title_1rrlt_17 {
-  background-color: transparent;
-  border: 0;
+._PuckHeader-title_63pti_64 {
+  align-self: center;
+}
+._PuckHeader-path_63pti_68 {
+  font-family: var(--puck-font-family-monospaced);
+  font-size: var(--puck-font-size-xxs);
+  font-weight: normal;
+  word-break: break-all;
+}
+._PuckHeader-tools_63pti_75 {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+._PuckHeader-menuButton_63pti_81 {
   color: var(--puck-color-grey-05);
-  cursor: pointer;
+  margin-inline-start: -4px;
+}
+._PuckHeader--menuOpen_63pti_86 ._PuckHeader-menuButton_63pti_81 {
+  color: var(--puck-color-black);
+}
+@media (min-width: 638px) {
+  ._PuckHeader-menuButton_63pti_81 {
+    display: none;
+  }
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
+._SidebarSection_5otpt_1 {
   display: flex;
+  position: relative;
+  flex-direction: column;
+  color: var(--puck-color-black);
+}
+._SidebarSection_5otpt_1:last-of-type {
+  flex-grow: 1;
+}
+._SidebarSection-title_5otpt_12 {
+  background: var(--puck-color-white);
+  padding: 16px;
+  border-bottom: 1px solid var(--puck-color-grey-09);
+  border-top: 1px solid var(--puck-color-grey-09);
+  overflow-x: auto;
+}
+._SidebarSection--noBorderTop_5otpt_20 > ._SidebarSection-title_5otpt_12 {
+  border-top: 0px;
+}
+._SidebarSection-content_5otpt_24:last-child {
+  padding-bottom: 4px;
+}
+._SidebarSection_5otpt_1:last-of-type ._SidebarSection-content_5otpt_24 {
+  border-bottom: none;
+  flex-grow: 1;
+}
+._SidebarSection-breadcrumbLabel_5otpt_33 {
+  background: none;
+  border: 0;
+  border-radius: 2px;
+  color: var(--puck-color-azure-04);
+  cursor: pointer;
   font: inherit;
-  font-size: var(--puck-font-size-xxxs);
-  list-style: none;
-  margin-bottom: 6px;
-  padding: 8px;
-  text-transform: uppercase;
-  transition: background-color 50ms ease-in, color 50ms ease-in;
-  gap: 4px;
-  border-radius: 4px;
-  width: 100%;
+  flex-shrink: 0;
+  padding: 0;
+  transition: color 50ms ease-in;
 }
-._ComponentList-title_1rrlt_17:focus-visible {
+._SidebarSection-breadcrumbLabel_5otpt_33:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ComponentList-title_1rrlt_17:hover {
-    background-color: var(--puck-color-azure-11);
-    color: var(--puck-color-azure-04);
+  ._SidebarSection-breadcrumbLabel_5otpt_33:hover {
+    color: var(--puck-color-azure-03);
     transition: none;
   }
 }
-._ComponentList-title_1rrlt_17:active {
-  background-color: var(--puck-color-azure-10);
+._SidebarSection-breadcrumbLabel_5otpt_33:active {
+  color: var(--puck-color-azure-02);
   transition: none;
 }
-._ComponentList-titleIcon_1rrlt_53 {
-  margin-inline-start: auto;
+._SidebarSection-breadcrumbs_5otpt_62 {
+  align-items: center;
+  display: flex;
+  gap: 4px;
 }
-
-/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
-._PuckPreview_z2rgu_1 {
-  position: relative;
-  height: 100%;
+._SidebarSection-breadcrumb_5otpt_33 {
+  align-items: center;
+  display: flex;
+  gap: 4px;
 }
-._PuckPreview-frame_z2rgu_6 {
-  border: none;
+._SidebarSection-heading_5otpt_74 {
+  padding-inline-end: 16px;
+}
+._SidebarSection-loadingOverlay_5otpt_78 {
+  background: var(--puck-color-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 100%;
   width: 100%;
+  top: 0;
+  position: absolute;
+  z-index: 1;
+  pointer-events: all;
+  box-sizing: border-box;
+  opacity: 0.8;
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
-._LayerTree_7rx04_1 {
-  color: var(--puck-color-grey-03);
-  font-family: var(--puck-font-family);
-  font-size: var(--puck-font-size-xxs);
-  margin: 0;
-  position: relative;
-  list-style: none;
-  padding: 0;
-}
-._LayerTree-zoneTitle_7rx04_11 {
-  color: var(--puck-color-grey-05);
-  font-size: var(--puck-font-size-xxxs);
-  text-transform: uppercase;
-}
-._LayerTree-helper_7rx04_17 {
-  text-align: center;
-  color: var(--puck-color-grey-07);
-  margin: 8px 4px;
-}
-._Layer_7rx04_1 {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-._Layer-inner_7rx04_29 {
-  border: 1px solid transparent;
-  border-radius: 4px;
-  transition: color 50ms ease-in;
-}
-._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
-  padding-inline-start: 0;
-}
-._Layer-clickable_7rx04_39 {
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css/#css-module-data */
+._Breadcrumbs_1c9yh_1 {
   align-items: center;
+  display: flex;
+  gap: 4px;
+}
+._Breadcrumbs-breadcrumbLabel_1c9yh_7 {
   background: none;
   border: 0;
-  border-radius: 4px;
-  color: inherit;
+  border-radius: 2px;
+  color: var(--puck-color-azure-04);
   cursor: pointer;
-  display: flex;
   font: inherit;
-  padding-inline-start: 12px;
-  padding-inline-end: 4px;
-  width: 100%;
+  flex-shrink: 0;
+  padding: 0;
+  transition: color 50ms ease-in;
 }
-._Layer-clickable_7rx04_39:focus-visible {
+._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
-  position: relative;
-  z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
-    border-color: var(--puck-color-azure-10);
-    background: var(--puck-color-azure-11);
-    color: var(--puck-color-azure-04);
+  ._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover {
+    color: var(--puck-color-azure-03);
     transition: none;
   }
 }
-._Layer--isSelected_7rx04_61 {
-  border-color: var(--puck-color-azure-08);
-}
-._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
-  background: var(--puck-color-azure-10);
-}
-._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
-._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
-  transform: scaleY(-1);
-}
-._Layer-zones_7rx04_82 {
-  display: none;
-  margin-inline-start: 12px;
+._Breadcrumbs-breadcrumbLabel_1c9yh_7:active {
+  color: var(--puck-color-azure-02);
+  transition: none;
 }
-._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
-._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
-  display: block;
+._Breadcrumbs-breadcrumb_1c9yh_7 {
+  align-items: center;
+  display: flex;
+  gap: 4px;
 }
-._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
-  margin-inline-start: 12px;
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
+._ViewportControls_e3unb_1 {
+  position: relative;
 }
-._Layer-title_7rx04_96,
-._LayerTree-zoneTitle_7rx04_11 {
+._ViewportControls--fullScreen_e3unb_5 {
+  border-radius: 32px;
   display: flex;
-  gap: 8px;
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  overflow: hidden;
+}
+._ViewportControls-toggleButton_e3unb_14 {
+  display: none;
+}
+._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14 {
   align-items: center;
-  margin: 8px 4px;
-  overflow-x: hidden;
+  background-color: var(--puck-color-grey-02);
+  border: 1px solid var(--puck-color-grey-04);
+  border-radius: 30px;
+  cursor: pointer;
+  color: var(--puck-color-grey-11);
+  display: flex;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  z-index: 1;
 }
-._Layer-name_7rx04_105 {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover {
+  background-color: var(--puck-color-grey-02);
+  border: 1px solid var(--puck-color-azure-04);
+  color: var(--puck-color-azure-07);
 }
-._Layer-icon_7rx04_111 {
-  color: var(--puck-color-rose-07);
-  margin-top: 4px;
+._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14 {
+  background-color: var(--puck-color-grey-03);
 }
-._Layer-zoneIcon_7rx04_116 {
-  color: var(--puck-color-grey-08);
-  margin-top: 4px;
+._ViewportControls-actions_e3unb_42 {
+  display: flex;
 }
-
-/* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
-._ViewportControls_gejzr_1 {
+._ViewportControls-actionsInner_e3unb_46 {
   display: flex;
-  background: var(--puck-color-grey-11);
   box-sizing: border-box;
-  border-inline-start: 2px solid var(--puck-color-grey-11);
   justify-content: center;
-  gap: 8px;
-  min-width: 358px;
-  padding-bottom: 16px;
-  padding-inline-start: var(--puck-space-px);
-  padding-inline-end: var(--puck-space-px);
-  z-index: 1;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 0;
+  overflow: hidden;
+}
+._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
+  background: var(--puck-color-grey-11);
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 30px;
+  margin-left: none;
+  margin-right: none;
+  padding-right: 42px;
 }
-._ViewportControls-divider_gejzr_15 {
+._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
+  transform: translateX(100%);
+  transition: transform 150ms ease-in-out;
+}
+._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46 {
+  transform: translateX(42px);
+}
+._ViewportControls-divider_e3unb_75 {
   border-inline-end: 1px solid var(--puck-color-grey-09);
-  margin-inline-start: 8px;
-  margin-inline-end: 8px;
+  margin-bottom: 8px;
+  margin-top: 8px;
 }
-._ViewportControls-zoomSelect_gejzr_21 {
+._ViewportControls-zoomSelect_e3unb_81 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 10px;
@@ -1740,44 +2300,72 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   border: 0;
   font-size: var(--puck-font-size-xxxs);
   padding: 0;
+  padding-left: 8px;
   width: 96px;
 }
-._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
+._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
+  display: none;
+}
+@media (min-width: 638px) {
+  ._ViewportControls-zoom_e3unb_81,
+  ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
+    display: flex;
+    justify-content: center;
+  }
+}
+._ViewportControls-zoomSelect_e3unb_81:dir(rtl) {
   background-position: 12px calc(50% + 3px);
 }
-._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
+._ViewportButton-inner_e3unb_111 {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+}
+._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111 {
   color: var(--puck-color-azure-04);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
-._PuckCanvas_18jay_1 {
+._PuckCanvas_t6s9b_1 {
   background: var(--puck-color-grey-11);
   display: flex;
   grid-area: editor;
   flex-direction: column;
   padding: var(--puck-space-px);
+  position: relative;
   overflow: auto;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas_18jay_1 {
+  ._PuckCanvas_t6s9b_1 {
     padding: calc(var(--puck-space-px) * 1.5);
-    padding-top: var(--puck-space-px);
+    padding-top: calc(var(--puck-space-px) * 0.5);
   }
-  ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
+  ._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)) {
     padding-top: calc(var(--puck-space-px) * 1.5);
   }
 }
-._PuckCanvas-inner_18jay_21 {
+._PuckCanvas--fullScreen_t6s9b_22 {
+  padding: 0;
+  overflow: hidden;
+}
+@media (min-width: 1198px) {
+  ._PuckCanvas--fullScreen_t6s9b_22 {
+    padding: 0;
+  }
+}
+._PuckCanvas-inner_t6s9b_33 {
   display: flex;
   height: 100%;
   justify-content: center;
-  min-width: 358px;
+  min-width: 288px;
   position: relative;
   width: 100%;
 }
-._PuckCanvas-root_18jay_30 {
+._PuckCanvas-root_t6s9b_42 {
   background: white;
-  border: 1px solid var(--puck-color-grey-09);
+  outline: 1px solid var(--puck-color-grey-09);
   box-sizing: content-box;
   min-width: 321px;
   position: absolute;
@@ -1788,20 +2376,20 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   opacity: 0;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas-root_18jay_30 {
+  ._PuckCanvas-root_t6s9b_42 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._PuckCanvas-root_18jay_30 {
+  ._PuckCanvas-root_t6s9b_42 {
     transition: none !important;
   }
 }
-._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
+._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42 {
   pointer-events: unset;
   opacity: 1;
 }
-._PuckCanvas-loader_18jay_60 {
+._PuckCanvas-loader_t6s9b_72 {
   align-items: center;
   color: var(--puck-color-grey-06);
   display: flex;
@@ -1810,112 +2398,20 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   transition: opacity 250ms ease-out;
   opacity: 0;
 }
-._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
+._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72 {
   opacity: 1;
 }
-._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
+._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72 {
   opacity: 0;
   height: 0;
   transition: none;
 }
-
-/* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
-._MenuBar_8pf8c_1 {
-  background-color: var(--puck-color-white);
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  display: none;
-  left: 0;
-  margin-top: 1px;
-  padding: 8px 16px;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  z-index: 2;
-}
-._MenuBar--menuOpen_8pf8c_14 {
-  display: block;
-}
-@media (min-width: 638px) {
-  ._MenuBar_8pf8c_1 {
-    border: none;
-    display: block;
-    margin-top: 0;
-    overflow-y: visible;
-    padding: 0;
-    position: static;
-  }
-}
-._MenuBar-inner_8pf8c_29 {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  justify-content: flex-end;
-}
-@media (min-width: 638px) {
-  ._MenuBar-inner_8pf8c_29 {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
-}
-._MenuBar-history_8pf8c_45 {
-  display: flex;
-}
-
-/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
-._PuckHeader_15xnq_1 {
-  background: var(--puck-color-white);
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  color: var(--puck-color-black);
-  grid-area: header;
-  position: relative;
-  max-width: 100vw;
-}
-._PuckHeader-inner_15xnq_10 {
-  align-items: end;
-  display: grid;
-  gap: var(--puck-space-px);
-  grid-template-areas: "left middle right";
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: auto;
-  padding: var(--puck-space-px);
-}
-._PuckHeader-toggle_15xnq_20 {
-  color: var(--puck-color-grey-05);
-  display: flex;
-  margin-inline-start: -4px;
-  padding-top: 2px;
-}
-._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
-._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
-  color: var(--puck-color-black);
-}
-._PuckHeader-title_15xnq_32 {
-  align-self: center;
-}
-._PuckHeader-path_15xnq_36 {
-  font-family: var(--puck-font-family-monospaced);
-  font-size: var(--puck-font-size-xxs);
-  font-weight: normal;
-  word-break: break-all;
-}
-._PuckHeader-tools_15xnq_43 {
-  display: flex;
-  gap: 16px;
-  justify-content: flex-end;
-}
-._PuckHeader-menuButton_15xnq_49 {
-  color: var(--puck-color-grey-05);
-  margin-inline-start: -4px;
-}
-._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
-  color: var(--puck-color-black);
+._PuckCanvas-controls_t6s9b_17 {
+  padding-bottom: calc(var(--puck-space-px) * 0.5);
 }
-@media (min-width: 638px) {
-  ._PuckHeader-menuButton_15xnq_49 {
-    display: none;
-  }
+._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17 {
+  padding-bottom: 0;
+  z-index: 1;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
@@ -1952,31 +2448,181 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
-._Sidebar_1xksb_1 {
+._Sidebar_o396p_1 {
+  border-block-start: 1px solid var(--puck-color-grey-09);
   position: relative;
-  display: flex;
+  display: none;
   flex-direction: column;
   overflow-y: auto;
 }
-._Sidebar--left_1xksb_8 {
+._Sidebar--isVisible_o396p_9 {
+  display: flex;
+}
+._Sidebar--left_o396p_13 {
   background: var(--puck-color-grey-12);
-  border-inline-end: 1px solid var(--puck-color-grey-09);
   grid-area: left;
 }
-._Sidebar--right_1xksb_14 {
+@media (min-width: 766px) {
+  ._Sidebar--left_o396p_13 {
+    border-block-start: 0;
+    border-inline-end: 1px solid var(--puck-color-grey-09);
+  }
+}
+._Sidebar--right_o396p_25 {
   background: var(--puck-color-white);
-  border-inline-start: 1px solid var(--puck-color-grey-09);
   grid-area: right;
 }
-._Sidebar-resizeHandle_1xksb_20 {
+@media (min-width: 766px) {
+  ._Sidebar--right_o396p_25 {
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--puck-color-grey-09);
+  }
+}
+._Sidebar-resizeHandle_o396p_37 {
   position: absolute;
   height: 100%;
 }
-._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
+._Sidebar--left_o396p_13 + ._Sidebar-resizeHandle_o396p_37 {
   grid-area: left;
   justify-self: end;
 }
-._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
+._Sidebar--right_o396p_25 + ._Sidebar-resizeHandle_o396p_37 {
   grid-area: right;
   justify-self: start;
 }
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
+._Nav_1pu0u_1 {
+  display: flex;
+}
+._Nav-list_1pu0u_5 {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  gap: 8px;
+}
+@media (min-width: 638px) {
+  ._Nav-list_1pu0u_5 {
+    padding-top: 32px;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+  }
+}
+._Nav-mobileActions_1pu0u_23 {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-inline-start: auto;
+  padding: 4px 16px;
+  border-inline-start: 1px solid var(--puck-color-grey-09);
+}
+@media (min-width: 638px) {
+  ._Nav-mobileActions_1pu0u_23 {
+    display: none;
+  }
+}
+._NavItem-link_1pu0u_38 {
+  align-items: center;
+  color: var(--puck-color-grey-03);
+  display: flex;
+  gap: 8px;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 8px 4px;
+  width: 64px;
+  box-sizing: border-box;
+}
+@media (min-width: 638px) {
+  ._NavItem-link_1pu0u_38 {
+    width: auto;
+  }
+}
+._NavItem_1pu0u_38:first-of-type {
+  padding-left: 16px;
+}
+._NavItem_1pu0u_38:last-of-type {
+  padding-right: 16px;
+}
+@media (min-width: 638px) {
+  ._NavItem_1pu0u_38:first-of-type,
+  ._NavItem_1pu0u_38:last-of-type {
+    padding: 0;
+  }
+}
+._NavItem-link_1pu0u_38 {
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-radius: 0;
+  flex-direction: column;
+  font-size: var(--puck-font-size-xxxs);
+}
+@media (min-width: 638px) {
+  ._NavItem-link_1pu0u_38 {
+    border: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+  }
+}
+._NavItem-linkIcon_1pu0u_88 {
+  height: 24px;
+  width: 24px;
+}
+._NavItem--active_1pu0u_93 > ._NavItem-link_1pu0u_38 {
+  background-color: var(--puck-color-azure-10);
+  color: var(--puck-color-azure-04);
+  font-weight: 600;
+}
+._NavItem--active_1pu0u_93 > ._NavItem-link_1pu0u_38 {
+  background-color: transparent;
+  border-top-color: var(--puck-color-azure-04);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  font-weight: 600;
+}
+@media (min-width: 638px) {
+  ._NavItem--active_1pu0u_93 > ._NavItem-link_1pu0u_38 {
+    border-top-color: transparent;
+    border-right-color: var(--puck-color-azure-04);
+  }
+}
+._NavItem_1pu0u_38:not(._NavItem--active_1pu0u_93) > ._NavItem-link_1pu0u_38:hover {
+  background-color: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-04);
+}
+@media (min-width: 638px) {
+  ._NavItem--mobileOnly_1pu0u_120 {
+    display: none;
+  }
+}
+._NavItem--desktopOnly_1pu0u_125 {
+  display: none;
+}
+@media (min-width: 638px) {
+  ._NavItem--desktopOnly_1pu0u_125 {
+    display: block;
+  }
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
+._FieldsPlugin_nd930_1 {
+  background: white;
+  height: 100%;
+  overflow-y: auto;
+}
+._FieldsPlugin-header_nd930_7 {
+  border-bottom: 1px solid var(--puck-color-grey-09);
+  font-weight: 600;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+}
+@media (min-width: 638px) {
+  ._FieldsPlugin-header_nd930_7 {
+    padding: 16px;
+  }
+}