@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.55

package/dist/runtime/editor/features/selection/index.vue

@@ -14,8 +14,6 @@
 </template>
 
 <script setup>
-import Renderer from "./Renderer/index.vue";
-import SelectionAddButtons from "./AddButtons/index.vue";
 import {
   calculateIntersection,
   getBounds,
@@ -27,7 +25,8 @@ import {
   useBlokkli,
   defineBlokkliFeature,
   ref,
-  watch
+  watch,
+  defineAsyncComponent
 } from "#imports";
 import { itemEntityType } from "#blokkli-build/config";
 import {
@@ -35,6 +34,10 @@ import {
   onBlokkliEvent,
   useStateBasedCache
 } from "#blokkli/editor/composables";
+const Renderer = defineAsyncComponent(() => import("./Renderer/index.vue"));
+const SelectionAddButtons = defineAsyncComponent(
+  () => import("./AddButtons/index.vue")
+);
 defineBlokkliFeature({
   id: "selection",
   icon: "bk_mdi_select",
@@ -81,7 +84,7 @@ const stop = watch(
   }
 );
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value && !ui.isApproving.value
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeFieldLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value && !ui.isApproving.value
 );
 const findMostVisibleBlock = (allowedSet) => {
   const viewport = ui.visibleViewportPadded.value;

package/dist/runtime/editor/features/settings/index.vue

@@ -7,14 +7,18 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import SettingsDialog from "./Dialog/index.vue";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import {
   addElementClasses,
   defineMenuButton
 } from "#blokkli/editor/composables";
-const { ui, $t } = useBlokkli();
+const SettingsDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -45,6 +49,7 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
+const { ui, $t } = useBlokkli();
 const showSettings = computed(() => ui.currentDialog.value?.id === "settings");
 function onClick() {
   ui.openDialog({ id: "settings", alignment: "center" });

package/dist/runtime/editor/features/structure/index.vue

@@ -35,12 +35,13 @@ import {
   provide,
   onBeforeUnmount,
   onMounted,
-  reactive
+  reactive,
+  defineAsyncComponent
 } from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
 import { ScrollBoundary } from "#blokkli/editor/components";
-import List from "./List/index.vue";
 import { defineDropHandler } from "#blokkli/editor/composables";
+const List = defineAsyncComponent(() => import("./List/index.vue"));
 defineBlokkliFeature({
   id: "structure",
   icon: "bk_mdi_account_tree",

package/dist/runtime/editor/features/templates/CreateDialog/index.vue

@@ -20,6 +20,7 @@
         <FormText
           id="template_label"
           v-model="label"
+          lazy
           :label="$t('templatesCreateDialogLabelLabel', 'Name')"
           type="text"
           :placeholder="

package/dist/runtime/editor/features/templates/index.vue

@@ -32,10 +32,12 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature } from "#imports";
-import TemplatesDialog from "./Dialog/index.vue";
-import CreateTemplateDialog from "./CreateDialog/index.vue";
-import ManageDialog from "./ManageDialog/index.vue";
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import {
   defineAddAction,
@@ -43,13 +45,19 @@ import {
   defineMenuButton,
   useDialog
 } from "#blokkli/editor/composables";
+const TemplatesDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
+const CreateTemplateDialog = defineAsyncComponent(
+  () => import("./CreateDialog/index.vue")
+);
+const ManageDialog = defineAsyncComponent(
+  () => import("./ManageDialog/index.vue")
+);
 const { adapter } = defineBlokkliFeature({
   id: "templates",
   icon: "bk_mdi_dashboard",
   label: "Templates",
   description: "Add blocks from templates.",
-  requiredAdapterMethods: ["templatesAdd", "templatesSearch"],
-  dependencies: ["add-list", "entity-title"]
+  requiredAdapterMethods: ["templatesAdd", "templatesSearch"]
 });
 const { state, $t, ui, selection } = useBlokkli();
 const placedAction = ref(null);

package/dist/runtime/editor/features/theme/index.vue

@@ -64,7 +64,8 @@ defineBlokkliFeature({
   id: "theme",
   icon: "bk_mdi_palette",
   label: "Theme",
-  description: "Implements a theme editor."
+  description: "Implements a theme editor.",
+  devOnly: true
 });
 const { $t, theme } = useBlokkli();
 const selectedThemeId = ref("custom");

package/dist/runtime/editor/features/tour/index.vue

@@ -17,10 +17,14 @@
 </template>
 
 <script setup>
-import { defineBlokkliFeature, useBlokkli } from "#imports";
-import Overlay from "./Overlay/index.vue";
+import {
+  defineAsyncComponent,
+  defineBlokkliFeature,
+  useBlokkli
+} from "#imports";
 import { defineMenuButton } from "#blokkli/editor/composables";
 import { Popup } from "#blokkli/editor/components";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
 defineBlokkliFeature({
   id: "tour",
   label: "Tour",

package/dist/runtime/editor/features/translations/index.vue

@@ -112,13 +112,11 @@ import {
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  onMounted
+  onMounted,
+  defineAsyncComponent
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
 import { PluginItemAction, PluginTourItem } from "#blokkli/editor/plugins";
-import Banner from "./Banner/index.vue";
-import CsvDialog from "./CsvDialog/index.vue";
-import TranslateDialog from "./TranslateDialog/index.vue";
 import {
   defineMenuButton,
   defineHighlight,
@@ -127,6 +125,11 @@ import {
   useDialog
 } from "#blokkli/editor/composables";
 import { BlokkliTransition, Tooltip } from "#blokkli/editor/components";
+const CsvDialog = defineAsyncComponent(() => import("./CsvDialog/index.vue"));
+const TranslateDialog = defineAsyncComponent(
+  () => import("./TranslateDialog/index.vue")
+);
+const Banner = defineAsyncComponent(() => import("./Banner/index.vue"));
 const { adapter } = defineBlokkliFeature({
   id: "translations",
   label: "Translations",

package/dist/runtime/editor/features/workspace/Overlay/Item.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/workspace/Overlay/Item.vue

@@ -0,0 +1,49 @@
+<template>
+  <a
+    :href="url"
+    class="bk-command _bk_flex _bk_items-center _bk_gap-10 _bk_px-15 _bk_w-full _bk_text-left _bk_no-underline _bk_max-w-full _bk_min-w-0 _bk_border _bk_border-transparent"
+    :class="
+  focused ? '_bk_bg-mono-800 _bk_border-mono-100 _bk_text-white' : '_bk_text-mono-300'
+"
+  >
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div class="_bk_truncate _bk_font-semibold _bk_text-base">
+        {{ label }}
+        <span class="_bk_font-normal _bk_text-mono-500">{{ id }}</span>
+      </div>
+      <ul class="bk-pill-list _bk_mt-3">
+        <li>
+          <span class="bk-pill bk-is-mono-dark">{{ bundleLabel }}</span>
+        </li>
+        <li v-if="lastChanged">
+          <span class="bk-pill bk-is-yellow-dark">
+            <RelativeTime :timestamp="lastChanged" />
+          </span>
+        </li>
+        <li v-if="isOwner">
+          <span class="bk-pill bk-is-strong">{{ $t("owner", "Owner") }}</span>
+        </li>
+      </ul>
+    </div>
+  </a>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { RelativeTime } from "#blokkli/editor/components";
+defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  entityType: { type: String, required: true },
+  bundle: { type: String, required: true },
+  label: { type: String, required: true },
+  url: { type: String, required: true },
+  lastChanged: { type: [String, null], required: true },
+  uid: { type: [String, null], required: true },
+  context: { type: String, required: false },
+  focused: { type: Boolean, required: true },
+  bundleLabel: { type: String, required: true },
+  isOwner: { type: Boolean, required: true }
+});
+const { $t } = useBlokkli();
+</script>

package/dist/runtime/editor/features/workspace/Overlay/Item.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/workspace/Overlay/index.vue

@@ -7,45 +7,19 @@
     :is-searching
     :placeholder="$t('workspaceSearchPlaceholder', 'Search pages...')"
     :item-height="70"
-    :is-loading
+    :is-loading="workspaces.isLoading.value"
     @select="onSelectByIndex"
     @close="emit('close')"
   >
-    <a
+    <Item
       v-for="(item, i) in displayItems"
       :key="item.uuid"
-      ref="itemEls"
-      :href="item.url"
-      class="bk-command _bk_flex _bk_items-center _bk_gap-10 _bk_px-15 _bk_w-full _bk_text-left _bk_no-underline _bk_max-w-full _bk_min-w-0 _bk_border _bk_border-transparent"
-      :class="
-  focusedIndex === i ? '_bk_bg-mono-800 _bk_border-mono-100 _bk_text-white' : '_bk_text-mono-300'
-"
+      v-bind="item"
+      :focused="focusedIndex === i"
+      :bundle-label="workspaces.getBundleLabel(item.bundle)"
+      :is-owner="!!(item.uid && item.uid === ownerId)"
       @mouseenter="onMouseEnter(i)"
-    >
-      <div class="_bk_flex-1 _bk_min-w-0">
-        <div class="_bk_truncate _bk_font-semibold _bk_text-base">
-          {{ item.label }}
-          <span class="_bk_font-normal _bk_text-mono-500">{{ item.id }}</span>
-        </div>
-        <ul class="_bk_flex _bk_gap-5 _bk_mt-3">
-          <li class="bk-workspace-pill _bk_px-0 _bk_text-mono-300">
-            {{ getBundleLabel(item) }}
-          </li>
-          <li
-            v-if="item.lastChanged"
-            class="bk-workspace-pill _bk_bg-yellow-dark/60 _bk_text-yellow-light"
-          >
-            <RelativeTime :timestamp="item.lastChanged" />
-          </li>
-          <li
-            v-if="item.uid && item.uid === ownerId"
-            class="bk-workspace-pill _bk_bg-accent-700/80"
-          >
-            <span>{{ $t("owner", "Owner") }}</span>
-          </li>
-        </ul>
-      </div>
-    </a>
+    />
   </SearchOverlay>
 </template>
 
@@ -58,59 +32,24 @@ import {
   onBeforeUnmount,
   watch
 } from "#imports";
-import { SearchOverlay, RelativeTime } from "#blokkli/editor/components";
-import { AsyncFzf, asyncExtendedMatch } from "fzf";
+import { SearchOverlay } from "#blokkli/editor/components";
+import Item from "./Item.vue";
 const emit = defineEmits(["close"]);
-const { adapter, $t, context, state, cache } = useBlokkli();
+const { $t, state, workspaces } = useBlokkli();
 const searchText = ref("");
-const isLoading = ref(true);
-const allItems = ref([]);
-const labelMap = ref(null);
 const fzfResults = ref([]);
 const isSearching = ref(false);
 const ownerId = computed(() => state.owner.value?.id);
-const currentEntityUuid = computed(() => context.value.entityUuid);
-const defaultSorted = computed(() => {
-  return allItems.value.filter((v) => v.uuid !== currentEntityUuid.value).sort((a, b) => {
-    const aHasState = a.lastChanged !== null ? 0 : 1;
-    const bHasState = b.lastChanged !== null ? 0 : 1;
-    if (aHasState !== bHasState) return aHasState - bHasState;
-    const aIsOwner = a.uid && a.uid === ownerId.value ? 0 : 1;
-    const bIsOwner = b.uid && b.uid === ownerId.value ? 0 : 1;
-    if (aIsOwner !== bIsOwner) return aIsOwner - bIsOwner;
-    if (a.lastChanged && b.lastChanged) {
-      return new Date(b.lastChanged).getTime() - new Date(a.lastChanged).getTime();
-    }
-    if (a.lastChanged) return -1;
-    if (b.lastChanged) return 1;
-    return a.label.localeCompare(b.label);
-  });
-});
-const allSortedItems = computed(() => {
-  if (searchText.value.trim()) {
-    return fzfResults.value.filter((v) => v.uuid !== currentEntityUuid.value);
-  }
-  return defaultSorted.value;
+const displayItems = computed(() => {
+  const source = searchText.value.trim() ? fzfResults.value : workspaces.defaultSorted.value;
+  return source.slice(0, 50);
 });
-const displayItems = computed(() => allSortedItems.value.slice(0, 50));
-function getBundleLabel(item) {
-  return labelMap.value?.bundles[item.bundle] ?? item.bundle;
-}
 function onSelectByIndex(index) {
   const item = displayItems.value[index];
   if (item) {
     window.location.href = item.url;
   }
 }
-function getFzf() {
-  return cache.get(
-    "workspace:fzf",
-    () => new AsyncFzf(allItems.value, {
-      selector: (item) => item.context ? item.label + " " + item.context : item.label,
-      match: asyncExtendedMatch
-    })
-  );
-}
 let searchTimeout = null;
 watch(searchText, (newValue) => {
   if (searchTimeout) {
@@ -130,9 +69,9 @@ watch(searchText, (newValue) => {
       return;
     }
     try {
-      const results = await getFzf().find(query);
+      const results = await workspaces.search(query);
       if (searchText.value.trim() === query) {
-        fzfResults.value = results.map((r) => r.item);
+        fzfResults.value = results;
       }
     } finally {
       if (searchText.value.trim() === query) {
@@ -141,37 +80,10 @@ watch(searchText, (newValue) => {
     }
   }, 150);
 });
-onMounted(async () => {
-  try {
-    const result = await cache.getAsync(
-      "workspace:hostEntities",
-      () => adapter.getHostEntities()
-    );
-    allItems.value = result.items;
-    labelMap.value = result.labelMap;
-  } finally {
-    isLoading.value = false;
-  }
-});
+onMounted(() => workspaces.ensureLoaded());
 onBeforeUnmount(() => {
   if (searchTimeout) {
     clearTimeout(searchTimeout);
   }
 });
 </script>
-
-<style>
-.bk .bk-workspace-pill {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    border-radius: 9999px;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500
-}
-</style>

package/dist/runtime/editor/features/workspace/index.vue

@@ -22,11 +22,15 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
-import Overlay from "./Overlay/index.vue";
 import { onBlokkliEvent, useDialog } from "#blokkli/editor/composables";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
 defineBlokkliFeature({
   id: "workspace",
   icon: "bk_mdi_workspaces",

package/dist/runtime/editor/helpers/webgl/index.d.ts

@@ -1,4 +1,5 @@
-import { type BufferInfo } from 'twgl.js';
+import type { BufferInfo } from 'twgl.js';
+import type { TwglHelpers } from '#blokkli/editor/libraries/twgl';
 import type { Rectangle } from '#blokkli/editor/types/geometry';
 type RectangleBufferRect = Rectangle & {
     id: string;
@@ -44,6 +45,6 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     processPendingRects(): void;
     getIndex(id: string): number | undefined;
     updateRectangle(): void;
-    createBufferInfo(gl: WebGLRenderingContext): BufferInfo;
+    createBufferInfo(gl: WebGLRenderingContext, twgl: TwglHelpers): BufferInfo;
 }
 export {};

package/dist/runtime/editor/helpers/webgl/index.js

@@ -1,4 +1,3 @@
-import { createBufferInfoFromArrays } from "twgl.js";
 import { intersects } from "./../geometry/index.js";
 export class RectangleBufferCollector {
   added = /* @__PURE__ */ new Set();
@@ -309,8 +308,8 @@ export class RectangleBufferCollector {
   }
   updateRectangle() {
   }
-  createBufferInfo(gl) {
-    return createBufferInfoFromArrays(gl, {
+  createBufferInfo(gl, twgl) {
+    return twgl.createBufferInfoFromArrays(gl, {
       a_position: {
         numComponents: 3,
         data: this.positions,

package/dist/runtime/editor/libraries/fzf.d.ts

@@ -0,0 +1,3 @@
+import type { Fzf, AsyncFzf, FzfOptions, AsyncFzfOptions } from 'fzf';
+export declare function loadFzf(): Promise<typeof import('fzf')>;
+export type { Fzf, AsyncFzf, FzfOptions, AsyncFzfOptions };

package/dist/runtime/editor/libraries/fzf.js

@@ -0,0 +1,7 @@
+let modulePromise = null;
+export function loadFzf() {
+  if (!modulePromise) {
+    modulePromise = import("fzf");
+  }
+  return modulePromise;
+}

package/dist/runtime/editor/libraries/twgl.d.ts

@@ -0,0 +1,10 @@
+import { createProgramInfo, setBuffersAndAttributes, drawBufferInfo, setUniforms, createBufferInfoFromArrays } from 'twgl.js';
+export declare const twgl: {
+    createProgramInfo: typeof createProgramInfo;
+    setBuffersAndAttributes: typeof setBuffersAndAttributes;
+    drawBufferInfo: typeof drawBufferInfo;
+    setUniforms: typeof setUniforms;
+    createBufferInfoFromArrays: typeof createBufferInfoFromArrays;
+};
+export type TwglHelpers = typeof twgl;
+export type { BufferInfo, ProgramInfo } from 'twgl.js';

package/dist/runtime/editor/libraries/twgl.js

@@ -0,0 +1,14 @@
+import {
+  createProgramInfo,
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms,
+  createBufferInfoFromArrays
+} from "twgl.js";
+export const twgl = {
+  createProgramInfo,
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms,
+  createBufferInfoFromArrays
+};

package/dist/runtime/editor/plugins/DebugOverlay/index.vue

@@ -1,6 +1,8 @@
 <template>
   <Teleport v-if="isVisible" to="body">
-    <slot />
+    <div class="bk">
+      <slot />
+    </div>
   </Teleport>
 </template>
 

package/dist/runtime/editor/plugins/Sidebar/Detached/index.vue

@@ -32,7 +32,7 @@
         >
           <Icon
             :name="
-  region === 'left' ? 'bk_mdi_dock_to_left' : 'bk_mdi_dock_to_right'
+  region === 'left' ? 'bk_mdi_dock_to_right' : 'bk_mdi_dock_to_left'
 "
           />
         </button>
@@ -144,6 +144,10 @@ const height = computed(() => {
 const headerHeight = computed(() => 40);
 const startMouseX = ref(0);
 const startMouseY = ref(0);
+const startX = ref(0);
+const startY = ref(0);
+const startWidth = ref(0);
+const startHeight = ref(0);
 const rootCursor = computed(() => {
   switch (mouseMode.value) {
     case "resize-bottom-right":
@@ -202,45 +206,61 @@ const onMouseDown = (e, mode) => {
   mouseMode.value = mode;
   startMouseX.value = e.clientX;
   startMouseY.value = e.clientY;
+  if (offsetX.value !== 0) {
+    x.value = x.value - offsetX.value;
+  }
+  setCoordinates(x.value, y.value);
+  clampSizeToViewport();
+  startX.value = x.value;
+  startY.value = y.value;
+  startWidth.value = width.value;
+  startHeight.value = height.value;
   window.addEventListener("pointermove", onMouseMove, { capture: true });
   window.addEventListener("pointerup", onMouseUp, { capture: true });
 };
 const setCoordinates = (newX, newY) => {
-  x.value = Math.min(
-    Math.max(newX, ui.visibleViewport.value.x),
-    ui.visibleViewport.value.width + ui.visibleViewport.value.x - width.value
+  x.value = Math.max(
+    Math.min(
+      newX,
+      ui.visibleViewport.value.x + ui.visibleViewport.value.width - width.value
+    ),
+    ui.visibleViewport.value.x
   );
-  y.value = Math.min(
-    Math.max(newY, ui.visibleViewport.value.y),
-    ui.visibleViewport.value.y + ui.visibleViewport.value.height - headerHeight.value
+  y.value = Math.max(
+    Math.min(
+      newY,
+      ui.visibleViewport.value.y + ui.visibleViewport.value.height - headerHeight.value
+    ),
+    ui.visibleViewport.value.y
   );
 };
 const setSizes = (newWidth, newHeight) => {
   if (newWidth !== void 0) {
     const maxWidth = ui.visibleViewport.value.x + ui.visibleViewport.value.width - x.value;
-    userWidth.value = Math.min(Math.max(newWidth, props.minWidth), maxWidth);
+    userWidth.value = Math.max(Math.min(newWidth, maxWidth), props.minWidth);
   }
   if (newHeight !== void 0) {
-    userHeight.value = Math.min(
-      Math.max(newHeight, props.minHeight),
-      window.innerHeight - 50
-    );
+    const maxHeight = ui.visibleViewport.value.y + ui.visibleViewport.value.height - y.value;
+    userHeight.value = Math.max(Math.min(newHeight, maxHeight), props.minHeight);
   }
 };
+const clampSizeToViewport = () => {
+  setSizes(userWidth.value, userHeight.value);
+};
 const onMouseMove = (e) => {
   if (mouseMode.value === "move") {
     setCoordinates(
-      storedData.value.x + e.clientX - startMouseX.value,
-      storedData.value.y + e.clientY - startMouseY.value
+      startX.value + e.clientX - startMouseX.value,
+      startY.value + e.clientY - startMouseY.value
     );
   } else if (mouseMode.value === "resize-right") {
-    setSizes(storedData.value.width + e.clientX - startMouseX.value);
+    setSizes(startWidth.value + e.clientX - startMouseX.value);
   } else if (mouseMode.value === "resize-bottom") {
-    setSizes(void 0, storedData.value.height + e.clientY - startMouseY.value);
+    setSizes(void 0, startHeight.value + e.clientY - startMouseY.value);
   } else if (mouseMode.value === "resize-bottom-right") {
     setSizes(
-      storedData.value.width + e.clientX - startMouseX.value,
-      storedData.value.height + e.clientY - startMouseY.value
+      startWidth.value + e.clientX - startMouseX.value,
+      startHeight.value + e.clientY - startMouseY.value
     );
   }
 };
@@ -265,6 +285,7 @@ const recalculatePositions = () => {
   storedData.value.viewportHeight = window.innerHeight;
 };
 recalculatePositions();
+clampSizeToViewport();
 watch(offsetX, () => {
   updateStored();
 });

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -217,6 +217,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         scrolledToEnd: any;
         isDetached: any;
         isShown: any;
+        shouldRender: any;
         width: any;
         height: any;
         toggleSidebar: () => void;
@@ -228,6 +229,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         scrolledToEnd: any;
         isDetached: any;
         isShown: any;
+        shouldRender: any;
         width: undefined;
         height: undefined;
         toggleSidebar: () => void;