@reacteditor/core 0.0.13 → 0.0.15

package/dist/index.css

@@ -2344,211 +2344,100 @@ 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_1d9v5_8 {
   --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_1d9v5_8 {
     overflow-x: auto;
   }
 }
-._Editor-portal_frglt_32 {
+._Editor-portal_1d9v5_21 {
   position: relative;
   z-index: 2;
 }
-._EditorLayout_frglt_37 {
+._EditorLayout_1d9v5_26 {
   height: 100dvh;
 }
-._EditorLayout-inner_frglt_41 {
-  --editor-frame-width: auto;
-  --editor-side-nav-width: 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) );
+._EditorLayout-inner_1d9v5_30 {
+  --editor-header-height: 44px;
+  --editor-side-bar-width: 280px;
   background-color: var(--editor-surface-app);
   display: grid;
-  grid-template-areas: "editor" "mobilepanel" "left" "right" "sidenav";
-  grid-template-columns: var(--editor-frame-width);
-  grid-template-rows: auto 0 0 0 var(--editor-side-nav-width);
+  grid-template-areas: "header" "editor";
+  grid-template-columns: 1fr;
+  grid-template-rows: var(--editor-header-height) 1fr;
   height: 100%;
   position: relative;
-  transition: none;
   z-index: 0;
   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;
-  }
-  ._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;
-  }
-}
-._EditorLayout_frglt_37:not(._EditorLayout--navBarVisible_frglt_74) ._EditorLayout-inner_frglt_41 {
-  --editor-side-nav-width: 0;
-}
-._EditorLayout--mounted_frglt_83 ._EditorLayout-inner_frglt_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--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);
-}
-@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--mobilePanelHeightMinContent_frglt_110._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-inner_frglt_41 {
-  grid-template-rows: auto min-content 0 0 var(--editor-side-nav-width);
-}
-@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;
-  }
-}
-@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);
-  }
-}
-@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);
-  }
-}
-@media (min-width: 458px) {
-  ._EditorLayout-mounted_frglt_151 ._EditorLayout-inner_frglt_41 {
-    --editor-frame-width: minmax(266px, auto);
-  }
-}
-@media (min-width: 638px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-side-bar-width: minmax(186px, 250px);
-  }
-}
-@media (min-width: 766px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-frame-width: auto;
-  }
-}
-@media (min-width: 990px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-side-bar-width: 256px;
-  }
-}
-@media (min-width: 1198px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-side-bar-width: 274px;
-  }
-}
-@media (min-width: 1398px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-side-bar-width: 290px;
-  }
-}
-@media (min-width: 1598px) {
-  ._EditorLayout_frglt_37 ._EditorLayout-inner_frglt_41 {
-    --editor-side-bar-width: 320px;
-  }
+._EditorLayout_1d9v5_26:not(._EditorLayout--navBarVisible_1d9v5_44) ._EditorLayout-inner_1d9v5_30 {
+  --editor-header-height: 0px;
+  grid-template-rows: 0 1fr;
 }
-._EditorLayout-nav_frglt_192 {
-  border-top: 1px solid var(--editor-border-subtle);
+._EditorLayout-header_1d9v5_49 {
+  align-items: center;
   background-color: var(--editor-surface-panel);
-  grid-area: sidenav;
-  overflow: hidden;
-  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;
-  }
+  border-bottom: 1px solid var(--editor-border-subtle);
+  box-sizing: border-box;
+  display: grid;
+  gap: 12px;
+  grid-area: header;
+  grid-template-columns: 1fr auto 1fr;
+  padding: 0 12px;
+  z-index: 11;
 }
-._Editor-fieldSideBarToolbar_frglt_208 {
+._EditorLayout-headerStart_1d9v5_62 {
   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;
+  justify-self: start;
+  min-width: 0;
 }
-._Editor-fieldSideBarHistory_frglt_218 {
-  color: var(--editor-text-tertiary);
+._EditorLayout-headerCenter_1d9v5_70 {
+  align-items: center;
   display: flex;
-  gap: 2px;
+  justify-content: center;
+  justify-self: center;
+  max-width: 480px;
+  min-width: 0;
+  width: clamp(160px, 40vw, 480px);
 }
-._Editor-fieldSideBarActions_frglt_224 {
+._EditorLayout-headerEnd_1d9v5_81 {
   align-items: center;
   display: flex;
   gap: 8px;
+  justify-self: end;
+  min-width: 0;
 }
-._EditorLayout-mobilePanel_frglt_230 {
-  grid-area: mobilepanel;
-  background: var(--editor-surface-panel);
-  border-block-start: 1px solid var(--editor-border-subtle);
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-}
-._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-mobilePanel_frglt_230 {
+._EditorLayout-headerHistory_1d9v5_91 {
+  align-items: center;
   display: flex;
+  gap: 2px;
 }
-@media (min-width: 638px) {
-  ._EditorLayout-mobilePanel_frglt_230,
-  ._EditorLayout--leftSideBarVisible_frglt_87 ._EditorLayout-mobilePanel_frglt_230 {
+@media (max-width: 637px) {
+  ._EditorLayout-header_1d9v5_49 {
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+  }
+  ._EditorLayout-headerCenter_1d9v5_70 {
     display: none;
   }
 }
-._EditorLayout-mobilePanelContent_frglt_250 {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-._EditorLayout-mobileDragHandle_frglt_257 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 0 4px;
-  cursor: grab;
-  touch-action: none;
-  flex-shrink: 0;
-}
-._EditorLayout-mobileDragHandle_frglt_257:active {
-  cursor: grabbing;
-}
-._EditorLayout-mobileDragHandlePill_frglt_271 {
-  width: 36px;
-  height: 4px;
-  border-radius: 2px;
-  background-color: var(--editor-border-subtle);
-}
-._EditorPluginTab_frglt_278 {
+._EditorPluginTab_1d9v5_110 {
   display: none;
   flex-grow: 1;
   max-height: 100%;
 }
-._EditorPluginTab--visible_frglt_284 {
+._EditorPluginTab--visible_1d9v5_116 {
   display: flex;
   flex-direction: column;
 }
-._EditorPluginTab-body_frglt_289 {
+._EditorPluginTab-body_1d9v5_121 {
   flex-grow: 1;
   max-height: 100%;
 }
@@ -2688,382 +2577,184 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   flex-shrink: 0;
 }
 
-/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css/#css-module-data */
-._EditorCombobox-input_12a2a_4 {
-  background: transparent;
-  border: 0;
-  color: inherit;
-  flex: 1;
-  font: inherit;
-  font-size: var(--editor-font-size-xxs);
-  min-width: 0;
-  outline: none;
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css/#css-module-data */
+._EditorCanvas_1h1vv_1 {
+  background: var(--editor-surface-sunken);
+  display: flex;
+  grid-area: editor;
+  flex-direction: column;
   padding: 0;
-  width: 100%;
-}
-._EditorCombobox-input_12a2a_4::placeholder {
-  color: var(--editor-text-tertiary);
+  position: relative;
+  overflow: hidden;
 }
-._EditorCombobox-trigger_12a2a_21 {
-  align-items: center;
-  background: transparent;
-  border: 0;
-  color: var(--editor-text-tertiary);
-  cursor: pointer;
-  display: inline-flex;
-  flex-shrink: 0;
-  height: 20px;
-  justify-content: center;
-  outline: none;
+._EditorCanvas--fullScreen_1h1vv_11 {
   padding: 0;
-  width: 20px;
+  overflow: hidden;
 }
-@media (hover: hover) and (pointer: fine) {
-  ._EditorCombobox-trigger_12a2a_21:hover {
-    color: var(--editor-text-primary);
+@media (min-width: 1198px) {
+  ._EditorCanvas--fullScreen_1h1vv_11 {
+    padding: 0;
   }
 }
-._EditorCombobox-triggerIcon_12a2a_42 {
-  pointer-events: none;
+._EditorCanvas--canvasFullScreen_1h1vv_31 {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  padding: 0 !important;
 }
-._EditorCombobox-positioner_12a2a_46 {
-  z-index: 50;
+._EditorCanvas-inner_1h1vv_38 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 288px;
+  position: relative;
+  width: 100%;
 }
-._EditorCombobox-content_12a2a_50 {
-  background: var(--editor-surface-raised);
-  border: 1px solid var(--editor-border-subtle);
-  border-radius: var(--editor-radius-md);
-  box-shadow: var(--editor-shadow-md);
-  color: var(--editor-text-primary);
-  font-family: var(--editor-font-family);
-  font-size: var(--editor-font-size-xxs);
-  max-height: var(--available-height);
-  min-width: var(--anchor-width);
+._EditorCanvas-bar_1h1vv_50 {
+  flex-shrink: 0;
+  width: 100%;
+  z-index: 1;
+}
+._EditorCanvas-zoomViewport_1h1vv_60 {
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
-  transform-origin: var(--transform-origin);
-  z-index: 50;
+  position: relative;
 }
-._EditorCombobox-list_12a2a_65 {
-  max-height: inherit;
-  overflow-y: auto;
-  padding: 4px;
+._EditorCanvas-rootColumn_1h1vv_69 {
+  box-sizing: content-box;
 }
-._EditorCombobox-item_12a2a_71 {
-  align-items: center;
-  border-radius: var(--editor-radius-sm);
-  cursor: pointer;
+._EditorCanvas-frame_1h1vv_74 {
   display: flex;
-  font: inherit;
-  font-size: var(--editor-font-size-xxs);
-  gap: 8px;
-  outline: none;
-  padding: 6px 8px 6px 28px;
-  position: relative;
-  user-select: none;
+  flex-direction: column;
+  min-width: 288px;
 }
-._EditorCombobox-item_12a2a_71[data-highlighted],
-._EditorCombobox-item_12a2a_71[data-selected] {
-  background: var(--editor-accent-soft);
-  color: var(--editor-text-accent);
+@media (min-width: 1198px) {
+  ._EditorCanvas-frame_1h1vv_74 {
+    min-width: unset;
+  }
 }
-._EditorCombobox-item_12a2a_71[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
+._EditorCanvas-root_1h1vv_69 {
+  background: var(--editor-surface-panel);
+  outline: 1px solid var(--editor-border-subtle);
+  box-shadow: var(--editor-shadow-lg);
+  border-radius: var(--editor-radius-md);
+  flex: 1;
   pointer-events: none;
+  opacity: 0;
+  min-height: 100%;
 }
-._EditorCombobox-itemIndicator_12a2a_97 {
+._EditorCanvas--ready_1h1vv_98 ._EditorCanvas-root_1h1vv_69 {
+  pointer-events: unset;
+  opacity: 1;
+}
+._EditorCanvas-loader_1h1vv_103 {
   align-items: center;
-  color: var(--editor-accent-strong);
-  display: inline-flex;
+  color: var(--editor-text-tertiary);
+  display: flex;
+  inset: 0;
   justify-content: center;
-  left: 8px;
   pointer-events: none;
   position: absolute;
-  width: 14px;
+  transition: opacity 250ms ease-out;
+  opacity: 0;
 }
-._EditorCombobox-empty_12a2a_110:not(:empty) {
-  color: var(--editor-text-tertiary);
-  font-size: var(--editor-font-size-xxs);
-  padding: 12px 8px;
-  text-align: center;
+._EditorCanvas--showLoader_1h1vv_115 ._EditorCanvas-loader_1h1vv_103 {
+  opacity: 1;
 }
-
-/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css/#css-module-data */
-._BrowserBar_x10eb_1 {
+._EditorCanvas--showLoader_1h1vv_115._EditorCanvas--ready_1h1vv_98 ._EditorCanvas-loader_1h1vv_103 {
+  opacity: 0;
+  transition: none;
+}
+._EditorCanvas-toolbar_1h1vv_128 {
   align-items: center;
   background: var(--editor-surface-panel);
   border: 1px solid var(--editor-border-subtle);
-  border-bottom: 0;
-  border-radius: var(--editor-radius-md) var(--editor-radius-md) 0 0;
+  border-radius: var(--editor-radius-md);
+  bottom: 16px;
+  box-shadow: var(--editor-shadow-md);
   display: flex;
-  gap: 8px;
-  padding: 8px 10px;
-  width: 100%;
+  gap: 2px;
+  left: 50%;
+  padding: 4px;
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 10;
 }
-._BrowserBar-urlTrigger_x10eb_16 {
-  align-items: center;
-  background: var(--editor-surface-sunken);
-  border: 1px solid var(--editor-border-subtle);
-  border-radius: 9999px;
-  color: var(--editor-text-primary);
+._EditorCanvas-toolbarDivider_1h1vv_144 {
+  background: var(--editor-border-subtle);
+  flex-shrink: 0;
+  height: 20px;
+  margin: 0 4px;
+  width: 1px;
+}
+._EditorCanvas-zoomLevel_1h1vv_152 {
+  color: var(--editor-text-secondary);
   display: inline-flex;
-  flex: 1;
   font-size: var(--editor-font-size-xxs);
-  gap: 8px;
-  justify-content: flex-start;
-  min-width: 0;
+  font-variant-numeric: tabular-nums;
+  justify-content: center;
+  min-width: 38px;
+  padding: 0 4px;
+  user-select: none;
+}
+
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css/#css-module-data */
+._Sidebar_1ynke_8 {
+  background: var(--editor-surface-panel);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
-  padding: 4px 12px;
-  width: 100%;
+  position: absolute;
+  top: var(--editor-header-height, 0px);
+  width: var(--editor-side-bar-width, 280px);
+  z-index: 10;
 }
-@media (hover: hover) and (pointer: fine) {
-  ._BrowserBar-urlTrigger_x10eb_16:hover {
-    background: var(--editor-surface-hover);
-    border-color: var(--editor-border-default);
-  }
-}
-._BrowserBar-urlTrigger_x10eb_16:focus-within {
-  border-color: var(--editor-border-default);
-  box-shadow: var(--editor-ring);
-  outline: none;
-}
-._BrowserBar-urlIcon_x10eb_46 {
-  color: var(--editor-text-tertiary);
-  flex-shrink: 0;
-}
-._BrowserBar-urlText_x10eb_51 {
-  color: var(--editor-text-primary);
-  display: inline-flex;
-  flex: 1;
-  gap: 8px;
-  min-width: 0;
-  overflow: hidden;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-._BrowserBar-urlInput_x10eb_63 {
-  color: var(--editor-text-primary);
-  flex: 1;
-  min-width: 0;
-}
-._BrowserBar-itemPath_x10eb_69 {
-  color: var(--editor-text-primary);
-  flex-shrink: 0;
-}
-._BrowserBar-itemTitle_x10eb_74 {
-  color: var(--editor-text-tertiary);
-  margin-left: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-._BrowserBar-actions_x10eb_82 {
-  align-items: center;
-  display: flex;
-  flex-shrink: 0;
-  gap: 2px;
-}
-._BrowserBar-deviceIcon_x10eb_89 {
-  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_es8bv_1 {
-  background: var(--editor-surface-sunken);
-  display: flex;
-  grid-area: editor;
-  flex-direction: column;
-  padding: calc(var(--editor-space-px) * 0.5);
-  position: relative;
-  overflow: hidden;
-}
-@media (min-width: 1198px) {
-  ._EditorCanvas_es8bv_1 {
-    padding: calc(var(--editor-space-px) * 0.75);
-    padding-top: calc(var(--editor-space-px) * 0.25);
-  }
-  ._EditorCanvas_es8bv_1:not(._EditorCanvas_es8bv_1:has(._EditorCanvas-controls_es8bv_17)) {
-    padding-top: calc(var(--editor-space-px) * 0.75);
-  }
-}
-._EditorCanvas--fullScreen_es8bv_22 {
-  padding: 0;
-  overflow: hidden;
-}
-@media (min-width: 1198px) {
-  ._EditorCanvas--fullScreen_es8bv_22 {
-    padding: 0;
-  }
+._Sidebar--left_1ynke_20 {
+  border-right: 1px solid var(--editor-border-subtle);
+  left: 0;
 }
-._EditorCanvas-inner_es8bv_33 {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  min-width: 288px;
-  position: relative;
-  width: 100%;
+._Sidebar--right_1ynke_25 {
+  border-left: 1px solid var(--editor-border-subtle);
+  right: 0;
 }
-._EditorCanvas-rootColumn_es8bv_46 {
-  box-sizing: content-box;
+._Sidebar-body_1ynke_30 {
   display: flex;
-  flex-direction: column;
-  min-width: 321px;
-  height: 100%;
-  transform-origin: top;
-}
-@media (min-width: 1198px) {
-  ._EditorCanvas-rootColumn_es8bv_46 {
-    min-width: unset;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-rootColumn_es8bv_46 {
-    transition: none !important;
-  }
-}
-._EditorCanvas-root_es8bv_46 {
-  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);
   flex: 1;
-  pointer-events: none;
-  opacity: 0;
-}
-@media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-root_es8bv_46 {
-    transition: none !important;
-  }
-}
-._EditorCanvas--ready_es8bv_83 ._EditorCanvas-root_es8bv_46 {
-  pointer-events: unset;
-  opacity: 1;
-}
-._EditorCanvas-loader_es8bv_88 {
-  align-items: center;
-  color: var(--editor-text-tertiary);
-  display: flex;
-  inset: 0;
-  justify-content: center;
-  pointer-events: none;
-  position: absolute;
-  transition: opacity 250ms ease-out;
-  opacity: 0;
-}
-._EditorCanvas--showLoader_es8bv_100 ._EditorCanvas-loader_es8bv_88 {
-  opacity: 1;
-}
-._EditorCanvas--showLoader_es8bv_100._EditorCanvas--ready_es8bv_83 ._EditorCanvas-loader_es8bv_88 {
-  opacity: 0;
-  transition: none;
-}
-._EditorCanvas-browserBar_es8bv_109 {
-  flex-shrink: 0;
-  width: 100%;
-}
-._EditorCanvas-zoomControls_es8bv_114 {
-  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);
-  display: flex;
-  gap: 2px;
-  padding: 4px;
-  position: absolute;
-  right: 16px;
-  z-index: 10;
-}
-
-/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css/#css-module-data */
-@media (min-width: 766px) {
-  ._ResizeHandle_1u3rv_2 {
-    position: absolute;
-    width: 5px;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 10;
-    background: transparent;
-    top: 0;
-  }
-  ._ResizeHandle_1u3rv_2:hover {
-    background: var(--editor-accent-soft);
-  }
-  ._ResizeHandle--left_1u3rv_16 {
-    right: -3px;
-  }
-  ._ResizeHandle--right_1u3rv_20 {
-    left: -3px;
-  }
-}
-
-/* components/Editor/components/ResizeHandle/styles.css */
-[data-resize-overlay] {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  cursor: col-resize;
-}
-
-/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css/#css-module-data */
-._Sidebar_14k7q_1 {
-  border-block-start: 1px solid var(--editor-border-subtle);
-  position: relative;
-  display: none;
   flex-direction: column;
+  min-height: 0;
   overflow-y: auto;
 }
-._Sidebar--isVisible_14k7q_9 {
-  display: flex;
-}
-._Sidebar--left_14k7q_13 {
-  background: var(--editor-surface-panel);
-  grid-area: left;
-}
-@media (min-width: 766px) {
-  ._Sidebar--left_14k7q_13 {
-    border-block-start: 0;
-    border-inline-end: 1px solid var(--editor-border-subtle);
+@media (max-width: 637px) {
+  ._Sidebar_1ynke_8 {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    max-height: 50dvh;
+    width: 100%;
   }
-}
-._Sidebar--right_14k7q_25 {
-  background: var(--editor-surface-panel);
-  grid-area: right;
-}
-@media (min-width: 766px) {
-  ._Sidebar--right_14k7q_25 {
-    border-block-start: 0;
-    border-inline-start: 1px solid var(--editor-border-subtle);
+  ._Sidebar--left_1ynke_20 {
+    border-right: 0;
+    border-top: 1px solid var(--editor-border-subtle);
+  }
+  ._Sidebar--right_1ynke_25 {
+    border-left: 0;
+    border-top: 1px solid var(--editor-border-subtle);
+    z-index: 11;
   }
-}
-._Sidebar-resizeHandle_14k7q_37 {
-  position: absolute;
-  height: 100%;
-}
-._Sidebar--left_14k7q_13 + ._Sidebar-resizeHandle_14k7q_37 {
-  grid-area: left;
-  justify-self: end;
-}
-._Sidebar--right_14k7q_25 + ._Sidebar-resizeHandle_14k7q_37 {
-  grid-area: right;
-  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 {
+._Nav_1ft0o_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 {
+  ._Nav_1ft0o_1 {
     flex-direction: column;
     height: 100%;
     padding: 0;
@@ -3071,7 +2762,22 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
     align-items: stretch;
   }
 }
-._Nav-list_1g4tk_18 {
+._Nav--horizontal_1ft0o_20,
+._Nav--horizontal_1ft0o_20 {
+  align-items: center;
+  flex-direction: row;
+  height: auto;
+  padding: 0;
+}
+@media (min-width: 638px) {
+  ._Nav--horizontal_1ft0o_20 {
+    flex-direction: row;
+    height: auto;
+    padding: 0;
+    align-items: center;
+  }
+}
+._Nav-list_1ft0o_36 {
   display: flex;
   list-style: none;
   margin: 0;
@@ -3082,7 +2788,7 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   flex: 1;
 }
 @media (min-width: 638px) {
-  ._Nav-list_1g4tk_18 {
+  ._Nav-list_1ft0o_36 {
     padding-top: 16px;
     flex-direction: column;
     gap: 4px;
@@ -3093,18 +2799,40 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
     justify-content: flex-start;
   }
 }
-._Nav-footer_1g4tk_42 {
+._Nav--horizontal_1ft0o_20 ._Nav-list_1ft0o_36 {
+  flex-direction: row;
+  gap: 4px;
+  padding-top: 0;
+  width: auto;
+  flex: 0 0 auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  justify-content: flex-start;
+}
+@media (min-width: 638px) {
+  ._Nav--horizontal_1ft0o_20 ._Nav-list_1ft0o_36 {
+    flex-direction: row;
+    gap: 4px;
+    padding-top: 0;
+    width: auto;
+    flex: 0 0 auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    justify-content: flex-start;
+  }
+}
+._Nav-footer_1ft0o_83 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._Nav-footer_1g4tk_42 {
+  ._Nav-footer_1ft0o_83 {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12px 0;
   }
 }
-._NavItem-link_1g4tk_55 {
+._NavItem-link_1ft0o_96 {
   text-align: center;
   align-items: center;
   justify-content: center;
@@ -3123,13 +2851,13 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   position: relative;
 }
 @media (min-width: 638px) {
-  ._NavItem-link_1g4tk_55 {
+  ._NavItem-link_1ft0o_96 {
     padding: 4px;
     width: 32px;
     height: 32px;
   }
 }
-._NavItem-linkLabel_1g4tk_83 {
+._NavItem-linkLabel_1ft0o_124 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -3138,64 +2866,51 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   white-space: nowrap;
   width: 1px;
 }
-._NavItem_1g4tk_55:first-of-type {
+._NavItem_1ft0o_96:first-of-type {
   padding-left: 0;
 }
-._NavItem_1g4tk_55:last-of-type {
+._NavItem_1ft0o_96:last-of-type {
   padding-right: 0;
 }
 @media (min-width: 638px) {
-  ._NavItem_1g4tk_55:first-of-type,
-  ._NavItem_1g4tk_55:last-of-type {
+  ._NavItem_1ft0o_96:first-of-type,
+  ._NavItem_1ft0o_96:last-of-type {
     padding: 0;
   }
 }
-._NavItem-linkIcon_1g4tk_108 {
+._NavItem-linkIcon_1ft0o_149 {
   height: 18px;
   width: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-._NavItem-linkIcon_1g4tk_108 svg {
+._NavItem-linkIcon_1ft0o_149 svg {
   width: 18px;
   height: 18px;
 }
-._NavItem--active_1g4tk_121 > ._NavItem-link_1g4tk_55 {
+._NavItem--active_1ft0o_162 > ._NavItem-link_1ft0o_96 {
   background-color: var(--editor-accent-soft);
   color: var(--editor-text-accent);
 }
-._NavItem_1g4tk_55:not(._NavItem--active_1g4tk_121) > ._NavItem-link_1g4tk_55:hover {
+._NavItem_1ft0o_96:not(._NavItem--active_1ft0o_162) > ._NavItem-link_1ft0o_96:hover {
   background-color: var(--editor-surface-hover);
   color: var(--editor-text-accent);
 }
 @media (min-width: 638px) {
-  ._NavItem--mobileOnly_1g4tk_132 {
+  ._NavItem--mobileOnly_1ft0o_173 {
     display: none;
   }
 }
-._NavItem--desktopOnly_1g4tk_137 {
+._NavItem--desktopOnly_1ft0o_178 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._NavItem--desktopOnly_1g4tk_137 {
+  ._NavItem--desktopOnly_1ft0o_178 {
     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;
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-._BlocksPlugin_15ud0_1::-webkit-scrollbar {
-  display: none;
-}
-
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css/#css-module-data */
 ._FieldsPlugin_262zt_1 {
   background: white;
@@ -3216,6 +2931,185 @@ body:has(._DropZone--isAnimating_1h108_70:empty) [data-editor-overlay] {
   }
 }
 
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css/#css-module-data */
+._EditorCombobox-input_12a2a_4 {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  flex: 1;
+  font: inherit;
+  font-size: var(--editor-font-size-xxs);
+  min-width: 0;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+._EditorCombobox-input_12a2a_4::placeholder {
+  color: var(--editor-text-tertiary);
+}
+._EditorCombobox-trigger_12a2a_21 {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--editor-text-tertiary);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 20px;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._EditorCombobox-trigger_12a2a_21:hover {
+    color: var(--editor-text-primary);
+  }
+}
+._EditorCombobox-triggerIcon_12a2a_42 {
+  pointer-events: none;
+}
+._EditorCombobox-positioner_12a2a_46 {
+  z-index: 50;
+}
+._EditorCombobox-content_12a2a_50 {
+  background: var(--editor-surface-raised);
+  border: 1px solid var(--editor-border-subtle);
+  border-radius: var(--editor-radius-md);
+  box-shadow: var(--editor-shadow-md);
+  color: var(--editor-text-primary);
+  font-family: var(--editor-font-family);
+  font-size: var(--editor-font-size-xxs);
+  max-height: var(--available-height);
+  min-width: var(--anchor-width);
+  overflow: hidden;
+  transform-origin: var(--transform-origin);
+  z-index: 50;
+}
+._EditorCombobox-list_12a2a_65 {
+  max-height: inherit;
+  overflow-y: auto;
+  padding: 4px;
+}
+._EditorCombobox-item_12a2a_71 {
+  align-items: center;
+  border-radius: var(--editor-radius-sm);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--editor-font-size-xxs);
+  gap: 8px;
+  outline: none;
+  padding: 6px 8px 6px 28px;
+  position: relative;
+  user-select: none;
+}
+._EditorCombobox-item_12a2a_71[data-highlighted],
+._EditorCombobox-item_12a2a_71[data-selected] {
+  background: var(--editor-accent-soft);
+  color: var(--editor-text-accent);
+}
+._EditorCombobox-item_12a2a_71[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+._EditorCombobox-itemIndicator_12a2a_97 {
+  align-items: center;
+  color: var(--editor-accent-strong);
+  display: inline-flex;
+  justify-content: center;
+  left: 8px;
+  pointer-events: none;
+  position: absolute;
+  width: 14px;
+}
+._EditorCombobox-empty_12a2a_110:not(:empty) {
+  color: var(--editor-text-tertiary);
+  font-size: var(--editor-font-size-xxs);
+  padding: 12px 8px;
+  text-align: center;
+}
+
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css/#css-module-data */
+._BrowserBar_ey7dt_3 {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+._BrowserBar-urlTrigger_ey7dt_13 {
+  align-items: center;
+  background: var(--editor-surface-sunken);
+  border: 1px solid var(--editor-border-subtle);
+  border-radius: 9999px;
+  color: var(--editor-text-primary);
+  display: inline-flex;
+  flex: 1;
+  font-size: var(--editor-font-size-xxs);
+  gap: 8px;
+  justify-content: flex-start;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 12px;
+  width: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._BrowserBar-urlTrigger_ey7dt_13:hover {
+    background: var(--editor-surface-hover);
+    border-color: var(--editor-border-default);
+  }
+}
+._BrowserBar-urlTrigger_ey7dt_13:focus-within {
+  border-color: var(--editor-border-default);
+  box-shadow: var(--editor-ring);
+  outline: none;
+}
+._BrowserBar-urlIcon_ey7dt_43 {
+  color: var(--editor-text-tertiary);
+  flex-shrink: 0;
+}
+._BrowserBar-urlText_ey7dt_48 {
+  color: var(--editor-text-primary);
+  display: inline-flex;
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._BrowserBar-urlInput_ey7dt_60 {
+  color: var(--editor-text-primary);
+  flex: 1;
+  min-width: 0;
+}
+._BrowserBar-itemPath_ey7dt_66 {
+  color: var(--editor-text-primary);
+  flex-shrink: 0;
+}
+._BrowserBar-itemTitle_ey7dt_71 {
+  color: var(--editor-text-tertiary);
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css/#css-module-data */
+._BlocksPlugin_15ud0_1 {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+._BlocksPlugin_15ud0_1::-webkit-scrollbar {
+  display: none;
+}
+
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css/#css-module-data */
 ._OutlinePlugin_q92j6_1 {
   padding: 16px;