@reacteditor/core 0.0.14 → 0.0.16

package/dist/index.css

@@ -2176,12 +2176,13 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Preview/styles.module.css/#css-module-data */
-._EditorPreview_xou64_1 {
+._EditorPreview_1ybfe_1 {
   position: relative;
   height: 100%;
 }
-._EditorPreview-frame_xou64_6 {
+._EditorPreview-frame_1ybfe_6 {
   border: none;
+  border-radius: var(--editor-radius-md);
   height: 100%;
   width: 100%;
 }
@@ -2344,35 +2345,35 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css/#css-module-data */
-._Editor_frglt_19 {
+._Editor_l0swf_19 {
   --editor-space-px: 16px;
   color: var(--editor-text-primary);
   font-family: var(--editor-font-family);
   overflow-x: hidden;
 }
 @media (min-width: 766px) {
-  ._Editor_frglt_19 {
+  ._Editor_l0swf_19 {
     overflow-x: auto;
   }
 }
-._Editor-portal_frglt_32 {
+._Editor-portal_l0swf_32 {
   position: relative;
   z-index: 2;
 }
-._EditorLayout_frglt_37 {
+._EditorLayout_l0swf_37 {
   height: 100dvh;
 }
-._EditorLayout-inner_frglt_41 {
+._EditorLayout-inner_l0swf_41 {
   --editor-frame-width: auto;
-  --editor-side-nav-width: min-content;
+  --editor-header-height: min-content;
   --editor-side-bar-width: 0px;
   --editor-left-side-bar-width: var( --editor-user-left-side-bar-width, var(--editor-side-bar-width) );
   --editor-right-side-bar-width: var( --editor-user-right-side-bar-width, var(--editor-side-bar-width) );
   background-color: var(--editor-surface-app);
   display: grid;
-  grid-template-areas: "editor" "mobilepanel" "left" "right" "sidenav";
+  grid-template-areas: "header" "editor" "mobilepanel" "left" "right";
   grid-template-columns: var(--editor-frame-width);
-  grid-template-rows: auto 0 0 0 var(--editor-side-nav-width);
+  grid-template-rows: var(--editor-header-height) auto 0 0 0;
   height: 100%;
   position: relative;
   transition: none;
@@ -2380,125 +2381,176 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._EditorLayout-inner_frglt_41 {
-    --editor-side-nav-width: 44px;
-    grid-template-areas: "sidenav left editor right";
-    grid-template-columns: var(--editor-side-nav-width) 0 var(--editor-frame-width) 0;
-    grid-template-rows: auto;
+  ._EditorLayout-inner_l0swf_41 {
+    grid-template-areas: "header header header" "left editor right";
+    grid-template-columns: 0 var(--editor-frame-width) 0;
+    grid-template-rows: var(--editor-header-height) auto;
   }
-  ._Editor--hidePlugins_frglt_73 ._EditorLayout-inner_frglt_41,
-  ._EditorLayout_frglt_37:not(._EditorLayout--navBarVisible_frglt_74) ._EditorLayout-inner_frglt_41 {
-    --editor-side-nav-width: 0;
+  ._Editor--hidePlugins_l0swf_72 ._EditorLayout-inner_l0swf_41,
+  ._EditorLayout_l0swf_37:not(._EditorLayout--navBarVisible_l0swf_73) ._EditorLayout-inner_l0swf_41 {
+    --editor-header-height: 0;
   }
 }
-._EditorLayout_frglt_37:not(._EditorLayout--navBarVisible_frglt_74) ._EditorLayout-inner_frglt_41 {
-  --editor-side-nav-width: 0;
+._EditorLayout_l0swf_37:not(._EditorLayout--navBarVisible_l0swf_73) ._EditorLayout-inner_l0swf_41 {
+  --editor-header-height: 0;
 }
-._EditorLayout--mounted_frglt_83 ._EditorLayout-inner_frglt_41 {
+._EditorLayout--mounted_l0swf_82 ._EditorLayout-inner_l0swf_41 {
   --editor-side-bar-width: 186px;
 }
-._EditorLayout--mobilePanelHeightToggle_frglt_87._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-  grid-template-rows: auto 60% 0 0 var(--editor-side-nav-width);
+._EditorLayout--mobilePanelHeightToggle_l0swf_86._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41 {
+  grid-template-rows: var(--editor-header-height) auto 60% 0 0;
 }
-._EditorLayout--mobilePanelCustomHeight_frglt_92._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-  grid-template-rows: auto var(--editor-mobile-panel-height, 60%) 0 0 var(--editor-side-nav-width);
+._EditorLayout--mobilePanelCustomHeight_l0swf_91._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41 {
+  grid-template-rows: var(--editor-header-height) auto var( --editor-mobile-panel-height, 60% ) 0 0;
 }
 @media (min-width: 638px) {
-  ._EditorLayout--mobilePanelHeightToggle_frglt_87._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-    grid-template-columns: var(--editor-side-nav-width) var(--editor-left-side-bar-width) var( --editor-frame-width ) 0;
-    grid-template-rows: auto;
+  ._EditorLayout--mobilePanelHeightToggle_l0swf_86._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41 {
+    grid-template-columns: var(--editor-left-side-bar-width) var(--editor-frame-width) 0;
+    grid-template-rows: var(--editor-header-height) auto;
   }
 }
-._EditorLayout--mobilePanelHeightMinContent_frglt_110._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-  grid-template-rows: auto min-content 0 0 var(--editor-side-nav-width);
+._EditorLayout--mobilePanelHeightMinContent_l0swf_109._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41 {
+  grid-template-rows: var(--editor-header-height) auto min-content 0 0;
 }
 @media (min-width: 638px) {
-  ._EditorLayout--mobilePanelHeightToggle_frglt_87._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41,
-  ._EditorLayout--mobilePanelCustomHeight_frglt_92._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41,
-  ._EditorLayout--mobilePanelHeightMinContent_frglt_110._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-    grid-template-columns: var(--editor-side-nav-width) var(--editor-left-side-bar-width) var( --editor-frame-width ) 0;
-    grid-template-rows: auto;
+  ._EditorLayout--mobilePanelHeightToggle_l0swf_86._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41,
+  ._EditorLayout--mobilePanelCustomHeight_l0swf_91._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41,
+  ._EditorLayout--mobilePanelHeightMinContent_l0swf_109._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-inner_l0swf_41 {
+    grid-template-columns: var(--editor-left-side-bar-width) var(--editor-frame-width) 0;
+    grid-template-rows: var(--editor-header-height) auto;
   }
 }
 @media (min-width: 638px) {
-  ._EditorLayout--rightSideBarVisible_frglt_132 ._EditorLayout-inner_frglt_41 {
-    grid-template-columns: var(--editor-side-nav-width) 0 var(--editor-frame-width) var(--editor-right-side-bar-width);
+  ._EditorLayout--rightSideBarVisible_l0swf_129 ._EditorLayout-inner_l0swf_41 {
+    grid-template-columns: 0 var(--editor-frame-width) var(--editor-right-side-bar-width);
   }
 }
 @media (min-width: 638px) {
-  ._EditorLayout--leftSideBarVisible_frglt_87._EditorLayout--rightSideBarVisible_frglt_132 ._EditorLayout-inner_frglt_41 {
-    grid-template-columns: var(--editor-side-nav-width) var(--editor-left-side-bar-width) var( --editor-frame-width ) var(--editor-right-side-bar-width);
+  ._EditorLayout--leftSideBarVisible_l0swf_86._EditorLayout--rightSideBarVisible_l0swf_129 ._EditorLayout-inner_l0swf_41 {
+    grid-template-columns: var(--editor-left-side-bar-width) var(--editor-frame-width) var(--editor-right-side-bar-width);
   }
 }
 @media (min-width: 458px) {
-  ._EditorLayout-mounted_frglt_151 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout-mounted_l0swf_146 ._EditorLayout-inner_l0swf_41 {
     --editor-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-side-bar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
+  ._EditorLayout_l0swf_37 ._EditorLayout-inner_l0swf_41 {
     --editor-side-bar-width: 320px;
   }
 }
-._EditorLayout-nav_frglt_192 {
-  border-top: 1px solid var(--editor-border-subtle);
+._EditorLayout-header_l0swf_187 {
+  grid-area: header;
   background-color: var(--editor-surface-panel);
-  grid-area: sidenav;
+  border-bottom: 1px solid var(--editor-border-subtle);
   overflow: hidden;
+}
+._EditorHeader_l0swf_194 {
+  align-items: center;
+  display: grid;
+  column-gap: 12px;
+  row-gap: 6px;
+  grid-template-areas: "url url" "plugins actions";
+  grid-template-columns: auto 1fr;
+  padding-block: 6px;
+  padding-inline-start: calc(8px + env(safe-area-inset-left, 0px));
+  padding-inline-end: calc(12px + env(safe-area-inset-right, 0px));
+}
+@media (min-width: 638px) {
+  ._EditorHeader_l0swf_194 {
+    column-gap: 16px;
+    row-gap: 0;
+    grid-template-areas: "plugins url actions";
+    grid-template-columns: 1fr auto 1fr;
+    height: 40px;
+    padding-block: 0;
+    padding-inline-start: 8px;
+    padding-inline-end: 8px;
+  }
+}
+._EditorHeader-plugins_l0swf_221 {
+  align-items: center;
+  color: var(--editor-text-secondary);
+  display: flex;
+  gap: 4px;
+  grid-area: plugins;
+  justify-self: start;
+}
+._EditorHeader-plugins_l0swf_221 svg {
+  height: 18px;
+  width: 18px;
+}
+._EditorHeader-pluginItem_l0swf_235 {
+  align-items: center;
+  display: inline-flex;
+}
+@media (min-width: 638px) {
+  ._EditorHeader-pluginItem--mobileOnly_l0swf_241 {
+    display: none;
+  }
+}
+._EditorHeader-pluginItem--desktopOnly_l0swf_246 {
+  display: none;
+}
+@media (min-width: 638px) {
+  ._EditorHeader-pluginItem--desktopOnly_l0swf_246 {
+    display: inline-flex;
+  }
+}
+._EditorHeader-urlBarSlot_l0swf_256 {
+  display: flex;
+  grid-area: url;
+  justify-content: center;
+  min-width: 0;
   width: 100%;
 }
 @media (min-width: 638px) {
-  ._EditorLayout-nav_frglt_192 {
-    border-top: 0;
-    border-right: 1px solid var(--editor-border-subtle);
-    box-sizing: border-box;
+  ._EditorHeader-urlBarSlot_l0swf_256 {
+    width: clamp(240px, 40vw, 480px);
   }
 }
-._Editor-fieldSideBarToolbar_frglt_208 {
+._EditorHeader-urlBarSlot_l0swf_256 > * {
+  width: 100%;
+}
+._EditorHeader-actions_l0swf_274 {
   align-items: center;
-  background: var(--editor-surface-panel);
-  border-bottom: 1px solid var(--editor-border-subtle);
   display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  padding: 8px 12px;
+  gap: 12px;
+  grid-area: actions;
+  justify-self: end;
 }
-._Editor-fieldSideBarHistory_frglt_218 {
+._EditorHeader-history_l0swf_282 {
   color: var(--editor-text-tertiary);
   display: flex;
   gap: 2px;
 }
-._Editor-fieldSideBarActions_frglt_224 {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-}
-._EditorLayout-mobilePanel_frglt_230 {
+._EditorLayout-mobilePanel_l0swf_288 {
   grid-area: mobilepanel;
   background: var(--editor-surface-panel);
   border-block-start: 1px solid var(--editor-border-subtle);
@@ -2506,22 +2558,22 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   flex-direction: column;
   overflow: hidden;
 }
-._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-mobilePanel_frglt_230 {
+._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-mobilePanel_l0swf_288 {
   display: flex;
 }
 @media (min-width: 638px) {
-  ._EditorLayout-mobilePanel_frglt_230,
-  ._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-mobilePanel_frglt_230 {
+  ._EditorLayout-mobilePanel_l0swf_288,
+  ._EditorLayout--leftSideBarVisible_l0swf_86 ._EditorLayout-mobilePanel_l0swf_288 {
     display: none;
   }
 }
-._EditorLayout-mobilePanelContent_frglt_250 {
+._EditorLayout-mobilePanelContent_l0swf_308 {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
-._EditorLayout-mobileDragHandle_frglt_257 {
+._EditorLayout-mobileDragHandle_l0swf_315 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2530,25 +2582,25 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   touch-action: none;
   flex-shrink: 0;
 }
-._EditorLayout-mobileDragHandle_frglt_257:active {
+._EditorLayout-mobileDragHandle_l0swf_315:active {
   cursor: grabbing;
 }
-._EditorLayout-mobileDragHandlePill_frglt_271 {
+._EditorLayout-mobileDragHandlePill_l0swf_329 {
   width: 36px;
   height: 4px;
   border-radius: 2px;
   background-color: var(--editor-border-subtle);
 }
-._EditorPluginTab_frglt_278 {
+._EditorPluginTab_l0swf_336 {
   display: none;
   flex-grow: 1;
   max-height: 100%;
 }
-._EditorPluginTab--visible_frglt_284 {
+._EditorPluginTab--visible_l0swf_342 {
   display: flex;
   flex-direction: column;
 }
-._EditorPluginTab-body_frglt_289 {
+._EditorPluginTab-body_l0swf_347 {
   flex-grow: 1;
   max-height: 100%;
 }
@@ -2789,7 +2841,7 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css/#css-module-data */
-._BrowserBar_coofe_1 {
+._BrowserBar_glswb_1 {
   align-items: center;
   background: var(--editor-surface-panel);
   border: 1px solid var(--editor-border-subtle);
@@ -2800,7 +2852,7 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   padding: 8px 10px;
   width: 100%;
 }
-._BrowserBar-urlTrigger_coofe_16 {
+._BrowserBar-urlTrigger_glswb_16 {
   align-items: center;
   background: var(--editor-surface-sunken);
   border: 1px solid var(--editor-border-subtle);
@@ -2813,25 +2865,25 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   justify-content: flex-start;
   min-width: 0;
   overflow: hidden;
-  padding: 4px 12px;
+  padding: 3px 12px;
   width: 100%;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._BrowserBar-urlTrigger_coofe_16:hover {
+  ._BrowserBar-urlTrigger_glswb_16:hover {
     background: var(--editor-surface-hover);
     border-color: var(--editor-border-default);
   }
 }
-._BrowserBar-urlTrigger_coofe_16:focus-within {
+._BrowserBar-urlTrigger_glswb_16:focus-within {
   border-color: var(--editor-border-default);
   box-shadow: var(--editor-ring);
   outline: none;
 }
-._BrowserBar-urlIcon_coofe_46 {
+._BrowserBar-urlIcon_glswb_46 {
   color: var(--editor-text-tertiary);
   flex-shrink: 0;
 }
-._BrowserBar-urlText_coofe_51 {
+._BrowserBar-urlText_glswb_51 {
   color: var(--editor-text-primary);
   display: inline-flex;
   flex: 1;
@@ -2842,37 +2894,44 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._BrowserBar-urlInput_coofe_63 {
+._BrowserBar-urlInput_glswb_63 {
   color: var(--editor-text-primary);
   flex: 1;
   min-width: 0;
 }
-._BrowserBar-itemPath_coofe_69 {
+._BrowserBar-itemPath_glswb_69 {
   color: var(--editor-text-primary);
   flex-shrink: 0;
 }
-._BrowserBar-itemTitle_coofe_74 {
+._BrowserBar-itemTitle_glswb_74 {
   color: var(--editor-text-tertiary);
   margin-left: auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._BrowserBar-actions_coofe_82 {
+._BrowserBar-actions_glswb_82 {
   align-items: center;
   display: flex;
   flex-shrink: 0;
   gap: 2px;
   margin-left: auto;
 }
-._BrowserBar-deviceIcon_coofe_92 {
+._BrowserBar-deviceIcon_glswb_92 {
   color: var(--editor-text-primary);
   display: inline-flex;
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css/#css-module-data */
-._EditorCanvas_1aq14_1 {
-  background: var(--editor-surface-sunken);
+._EditorCanvas_10xv6_1 {
+  background-color: var(--editor-surface-sunken);
+  background-image:
+    radial-gradient(
+      circle,
+      var(--editor-border-default) 1px,
+      transparent 1px);
+  background-size: 16px 16px;
+  background-position: 0 0;
   display: flex;
   grid-area: editor;
   flex-direction: column;
@@ -2881,30 +2940,26 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   overflow: hidden;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas_1aq14_1 {
+  ._EditorCanvas_10xv6_1 {
     padding: calc(var(--editor-space-px) * 0.75);
-    padding-top: calc(var(--editor-space-px) * 0.25);
-  }
-  ._EditorCanvas_1aq14_1:not(._EditorCanvas_1aq14_1:has(._EditorCanvas-controls_1aq14_17)) {
-    padding-top: calc(var(--editor-space-px) * 0.75);
   }
 }
-._EditorCanvas--fullScreen_1aq14_22 {
+._EditorCanvas--fullScreen_10xv6_24 {
   padding: 0;
   overflow: hidden;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas--fullScreen_1aq14_22 {
+  ._EditorCanvas--fullScreen_10xv6_24 {
     padding: 0;
   }
 }
-._EditorCanvas--canvasFullScreen_1aq14_42 {
+._EditorCanvas--canvasFullScreen_10xv6_40 {
   position: fixed;
   inset: 0;
   z-index: 1000;
   padding: 0 !important;
 }
-._EditorCanvas-inner_1aq14_49 {
+._EditorCanvas-inner_10xv6_47 {
   display: flex;
   height: 100%;
   justify-content: center;
@@ -2912,7 +2967,7 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   position: relative;
   width: 100%;
 }
-._EditorCanvas-rootColumn_1aq14_62 {
+._EditorCanvas-rootColumn_10xv6_56 {
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
@@ -2921,34 +2976,34 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   transform-origin: top;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas-rootColumn_1aq14_62 {
+  ._EditorCanvas-rootColumn_10xv6_56 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-rootColumn_1aq14_62 {
+  ._EditorCanvas-rootColumn_10xv6_56 {
     transition: none !important;
   }
 }
-._EditorCanvas-root_1aq14_62 {
+._EditorCanvas-root_10xv6_56 {
   background: var(--editor-surface-panel);
   outline: 1px solid var(--editor-border-subtle);
   box-shadow: var(--editor-shadow-lg);
-  border-radius: 0 0 var(--editor-radius-md) var(--editor-radius-md);
+  border-radius: var(--editor-radius-md);
   flex: 1;
   pointer-events: none;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-root_1aq14_62 {
+  ._EditorCanvas-root_10xv6_56 {
     transition: none !important;
   }
 }
-._EditorCanvas--ready_1aq14_99 ._EditorCanvas-root_1aq14_62 {
+._EditorCanvas--ready_10xv6_93 ._EditorCanvas-root_10xv6_56 {
   pointer-events: unset;
   opacity: 1;
 }
-._EditorCanvas-loader_1aq14_104 {
+._EditorCanvas-loader_10xv6_98 {
   align-items: center;
   color: var(--editor-text-tertiary);
   display: flex;
@@ -2959,30 +3014,49 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   transition: opacity 250ms ease-out;
   opacity: 0;
 }
-._EditorCanvas--showLoader_1aq14_116 ._EditorCanvas-loader_1aq14_104 {
+._EditorCanvas--showLoader_10xv6_110 ._EditorCanvas-loader_10xv6_98 {
   opacity: 1;
 }
-._EditorCanvas--showLoader_1aq14_116._EditorCanvas--ready_1aq14_99 ._EditorCanvas-loader_1aq14_104 {
+._EditorCanvas--showLoader_10xv6_110._EditorCanvas--ready_10xv6_93 ._EditorCanvas-loader_10xv6_98 {
   opacity: 0;
   transition: none;
 }
-._EditorCanvas-browserBar_1aq14_125 {
-  flex-shrink: 0;
-  width: 100%;
+._EditorCanvas-bottomBar_10xv6_119 {
+  align-items: center;
+  bottom: 16px;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  z-index: 10;
 }
-._EditorCanvas-zoomControls_1aq14_130 {
+._EditorCanvas-bottomBarPill_10xv6_131 {
   align-items: center;
   background: var(--editor-surface-panel);
   border: 1px solid var(--editor-border-subtle);
   border-radius: var(--editor-radius-md);
-  bottom: 16px;
   box-shadow: var(--editor-shadow-md);
+  color: var(--editor-text-primary);
   display: flex;
-  gap: 2px;
-  padding: 4px;
-  position: absolute;
-  right: 16px;
-  z-index: 10;
+  gap: 4px;
+  padding: 4px 8px;
+  pointer-events: auto;
+}
+._EditorCanvas-bottomBarDivider_10xv6_144 {
+  background: var(--editor-border-subtle);
+  height: 18px;
+  margin: 0 4px;
+  width: 1px;
+}
+._EditorCanvas-zoomLevel_10xv6_151 {
+  color: var(--editor-text-secondary);
+  font-size: var(--editor-font-size-xxs);
+  font-variant-numeric: tabular-nums;
+  min-width: 36px;
+  padding: 0 4px;
+  text-align: center;
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css/#css-module-data */
@@ -3062,134 +3136,6 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   justify-self: start;
 }
 
-/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css/#css-module-data */
-._Nav_1g4tk_1 {
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
-}
-@media (min-width: 638px) {
-  ._Nav_1g4tk_1 {
-    flex-direction: column;
-    height: 100%;
-    padding: 0;
-    padding-bottom: 0;
-    align-items: stretch;
-  }
-}
-._Nav-list_1g4tk_18 {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow-x: auto;
-  gap: 12px;
-  justify-content: center;
-  flex: 1;
-}
-@media (min-width: 638px) {
-  ._Nav-list_1g4tk_18 {
-    padding-top: 16px;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    justify-content: flex-start;
-  }
-}
-._Nav-footer_1g4tk_42 {
-  display: none;
-}
-@media (min-width: 638px) {
-  ._Nav-footer_1g4tk_42 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 12px 0;
-  }
-}
-._NavItem-link_1g4tk_55 {
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  color: var(--editor-text-secondary);
-  display: flex;
-  text-decoration: none;
-  cursor: pointer;
-  border-radius: var(--editor-radius-md);
-  padding: 6px;
-  box-sizing: border-box;
-  transition: background-color var(--editor-motion-fast) var(--editor-ease), color var(--editor-motion-fast) var(--editor-ease);
-  border: 0;
-  width: 38px;
-  height: 38px;
-  margin: 0 auto;
-  position: relative;
-}
-@media (min-width: 638px) {
-  ._NavItem-link_1g4tk_55 {
-    padding: 4px;
-    width: 32px;
-    height: 32px;
-  }
-}
-._NavItem-linkLabel_1g4tk_83 {
-  clip: rect(0 0 0 0);
-  clip-path: inset(100%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-._NavItem_1g4tk_55:first-of-type {
-  padding-left: 0;
-}
-._NavItem_1g4tk_55:last-of-type {
-  padding-right: 0;
-}
-@media (min-width: 638px) {
-  ._NavItem_1g4tk_55:first-of-type,
-  ._NavItem_1g4tk_55:last-of-type {
-    padding: 0;
-  }
-}
-._NavItem-linkIcon_1g4tk_108 {
-  height: 18px;
-  width: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-._NavItem-linkIcon_1g4tk_108 svg {
-  width: 18px;
-  height: 18px;
-}
-._NavItem--active_1g4tk_121 > ._NavItem-link_1g4tk_55 {
-  background-color: var(--editor-accent-soft);
-  color: var(--editor-text-accent);
-}
-._NavItem_1g4tk_55:not(._NavItem--active_1g4tk_121) > ._NavItem-link_1g4tk_55:hover {
-  background-color: var(--editor-surface-hover);
-  color: var(--editor-text-accent);
-}
-@media (min-width: 638px) {
-  ._NavItem--mobileOnly_1g4tk_132 {
-    display: none;
-  }
-}
-._NavItem--desktopOnly_1g4tk_137 {
-  display: none;
-}
-@media (min-width: 638px) {
-  ._NavItem--desktopOnly_1g4tk_137 {
-    display: block;
-  }
-}
-
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css/#css-module-data */
 ._BlocksPlugin_15ud0_1 {
   padding: 16px;