@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

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

@@ -41,132 +41,75 @@ const items = computed(
 );
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-validations-overlay {
-
-    pointer-events: none;
-
-    position: absolute;
-
-    top: 0px;
-
-    left: 0px;
-
-    height: 100%;
-
-    width: 100%
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
 }
-
-  .bk.bk-validations-overlay > div {
-
-    position: absolute;
-
-    top: 0px;
-
-    left: 0px;
-
-    box-sizing: border-box;
-
-    border-width: 3px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-
-    background-color: rgb(var(--bk-theme-red-normal) / 0.1)
+.bk.bk-validations-overlay  > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  box-sizing: border-box;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-  .bk.bk-validations-overlay > div > div {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-
-    padding-left: 10px;
-
-    padding-right: 10px;
-
-    padding-top: 5px;
-
-    padding-bottom: 5px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-
-    position: absolute;
-
-    left: -2px;
-
-    right: -2px;
-
-    font-weight: 700;
-
-    bottom: 100%
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-validations-overlay  > div {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 10%, transparent);
+  }
+}
+:is(.bk.bk-validations-overlay > div)  > div {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding-inline: 10px;
+  padding-block: 5px;
+  color: white;
+  position: absolute;
+  right: calc(2px * -1);
+  left: calc(2px * -1);
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  bottom: 100%;
 }
-
 .bk .bk-validation-item {
-
-    width: 100%;
-
-    padding: 15px;
-
-    font-size: 16px;
-
-    line-height: 24px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
+  width: 100%;
+  padding: 15px;
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  color: rgb(var(--bk-theme-mono-800) / 1);
 }
-
-.bk .bk-validation-item:hover {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1))
+@media (hover: hover) {
+  :is(.bk .bk-validation-item):hover {
+    background-color: rgb(var(--bk-theme-mono-50) / 1);
+  }
 }
-
 .bk .bk-validation-item {
-
-    border-bottom-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
 }
-
-.bk .bk-validation-item .bk-blokkli-item-icon {
-
-    width: 25px;
-
-    height: 25px;
-
-    border-radius: 4px;
-
-    border-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 3px
+:is(.bk .bk-validation-item) .bk-blokkli-item-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
+  padding: 3px;
 }
-
-.bk .bk-validation-item .bk-validation-item-header {
-
-    margin-bottom: 10px;
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 5px;
-
-    font-weight: 500
+:is(.bk .bk-validation-item) .bk-validation-item-header {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
 }
 </style>

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

@@ -68,43 +68,24 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-errors .bk-errors-success {
-
-    display: flex;
-
-    flex-direction: column;
-
-    align-items: center;
-
-    padding-top: 30px;
-
-    text-align: center
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 30px;
+  text-align: center;
 }
-
-    .bk.bk-errors .bk-errors-success figure {
-
-    margin-bottom: 20px;
-
-    height: 100px;
-
-    width: 100px;
-
-    border-radius: 9999px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 20px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1))
+:is(.bk.bk-errors .bk-errors-success) figure {
+  margin-bottom: 20px;
+  height: 100px;
+  width: 100px;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+  padding: 20px;
+  color: rgb(var(--bk-theme-lime-dark) / 1);
 }
-
-    .bk.bk-errors .bk-errors-success figure svg {
-
-    fill: currentColor
+:is(:is(.bk.bk-errors .bk-errors-success) figure) svg {
+  fill: currentcolor;
 }
 </style>

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

@@ -2,35 +2,27 @@
   <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'
-"
+    :class="focused ? '_bk_bg-mono-800 _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 class="bk-pill-list _bk_mt-3">
+        <Pill :text="bundleLabel" variant="dark" scheme="mono" />
+        <Pill v-if="lastChanged" scheme="yellow" variant="dark">
+          <RelativeTime :timestamp="lastChanged" />
+        </Pill>
+        <Pill v-if="isOwner" :text="$t('owner', 'Owner')" variant="dark" />
+      </div>
     </div>
   </a>
 </template>
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { RelativeTime } from "#blokkli/editor/components";
+import { RelativeTime, Pill } from "#blokkli/editor/components";
 defineProps({
   id: { type: String, required: true },
   uuid: { type: String, required: true },

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

@@ -2,10 +2,12 @@
   <SearchOverlay
     v-slot="{ focusedIndex, onMouseEnter }"
     v-model:text="searchText"
-    :title="$t('workspaceTitle', 'Switch page')"
+    :title="$t('switchPage', 'Switch page')"
     :total-items="displayItems.length"
     :is-searching
-    :placeholder="$t('workspaceSearchPlaceholder', 'Search pages...')"
+    :placeholder="
+  $t('workspaceSearchPlaceholder', 'Search pages', { more: true })
+"
     :item-height="70"
     :is-loading="workspaces.isLoading.value"
     @select="onSelectByIndex"

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

@@ -9,7 +9,7 @@
 
   <PluginToolbarButton
     id="workspace"
-    :title="$t('workspaceOpen', 'Switch page')"
+    :title="$t('switchPage', 'Switch page')"
     meta
     key-code="P"
     no-command

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

@@ -9,3 +9,15 @@
  * post-processing to merge long runs of consecutive modifications.
  */
 export declare function computeDiff(before: string, after: string): string;
+/**
+ * Render the new value entirely as an insertion, with no deletions.
+ *
+ * Used when diffing against the original is pointless — e.g. translations,
+ * where virtually the whole text changes and an interleaved del/ins diff is
+ * just noise. The result reuses the same <ins> markup as computeDiff, so the
+ * approval preview styling is identical.
+ *
+ * Block-level HTML is preserved by wrapping each block's inner content in
+ * <ins> rather than wrapping the block tags themselves.
+ */
+export declare function computeInsertion(after: string): string;

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

@@ -225,3 +225,12 @@ export function computeDiff(before, after) {
   const raw = diff(before, after);
   return cleanupDiffMods(raw);
 }
+export function computeInsertion(after) {
+  const blocks = parseBlocks(after);
+  if (blocks && blocks.length > 0) {
+    return blocks.map(
+      (block) => `${block.openTag}<ins>${block.innerHTML}</ins></${block.tag}>`
+    ).join("");
+  }
+  return `<ins>${after}</ins>`;
+}

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

@@ -46,11 +46,17 @@ export function optionValueToStorable(definition, value) {
       return value;
     }
   } else if (definition.type === "number" || definition.type === "range") {
-    if (typeof value === "number") {
+    if (typeof value === "number" && Number.isFinite(value)) {
       return String(value);
     } else if (typeof value === "string") {
+      if (definition.type === "number" && definition.nullable && value.trim() === "") {
+        return "";
+      }
       return value;
     }
+    if (definition.type === "number" && definition.nullable && (value === void 0 || value === null)) {
+      return "";
+    }
   } else if (definition.type === "color") {
     if (typeof value === "string") {
       return value;

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

@@ -0,0 +1,8 @@
+export declare const HORIZONTAL_ELLIPSIS = "\u2026";
+/**
+ * Truncate a string to a maximum length, appending an ellipsis when truncated.
+ *
+ * The ellipsis is included in the resulting length, so the output never exceeds
+ * `maxLength` characters.
+ */
+export declare function truncate(value: string, maxLength: number): string;

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

@@ -0,0 +1,7 @@
+export const HORIZONTAL_ELLIPSIS = "\u2026";
+export function truncate(value, maxLength) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+  return value.slice(0, maxLength - HORIZONTAL_ELLIPSIS.length) + HORIZONTAL_ELLIPSIS;
+}

package/dist/runtime/editor/icons/svg/ghost.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>ghost</title><path d="M12,2A9,9 0 0,0 3,11V22L6,19L9,22L12,19L15,22L18,19L21,22V11A9,9 0 0,0 12,2M9,8A2,2 0 0,1 11,10A2,2 0 0,1 9,12A2,2 0 0,1 7,10A2,2 0 0,1 9,8M15,8A2,2 0 0,1 17,10A2,2 0 0,1 15,12A2,2 0 0,1 13,10A2,2 0 0,1 15,8Z" /></svg>

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

@@ -3,6 +3,8 @@
     <div
       ref="el"
       class="bk-indicator-item"
+      :data-test-block-indicator="id"
+      :data-test-uuid="uuid"
       @click.prevent="$emit('click')"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       ref="rootEl"
-      class="bk-context-menu-inner _bk_absolute _bk_bg-mono-950 _bk_text-mono-100 _bk_shadow-xl-even _bk_border _bk_border-mono-600 _bk_rounded _bk_overflow-hidden _bk_min-w-200"
+      class="bk-context-menu-inner _bk_absolute _bk_bg-mono-950 _bk_text-mono-100 _bk_shadow-xl-even _bk_border _bk_border-mono-600 _bk_overflow-hidden _bk_min-w-200"
       :style="innerStyle"
     >
       <div v-for="(item, i) in menu" :key="i">
@@ -65,9 +65,10 @@ onBlokkliEvent("window:clickAway", () => {
   emit("close");
 });
 watch(selection.uuids, () => emit("close"));
-const onClick = (index) => {
+const onClick = async (index) => {
   const item = props.menu[index];
   if (item && item.type === "button") {
+    await ui.flushPendingChanges();
     item.callback();
   }
   emit("close");

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
      * Displayed in the tooltip and keyboard shortcut hints.
      */
     title: string;
+    description?: string;
     /**
      * Whether the action is disabled.
      *
@@ -77,20 +78,29 @@ type __VLS_Props = {
      */
     tourText?: string;
 };
-declare var __VLS_7: {}, __VLS_34: {
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_36: {
     items: any;
     uuids: any;
 };
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_34) => any;
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (items: RenderedFieldListItem[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((items: RenderedFieldListItem[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    keyCode: string;
+    disabled: boolean | string;
+    icon: BlokkliIcon;
+    active: boolean;
+    weight: number | string | "last";
+    tourText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,18 +5,35 @@
       v-show="!hidden"
       ref="el"
       :disabled="isDisabled"
-      class="bk-item-action _bk_group/tooltip"
+      :data-test="'plugin-item-action-' + id"
+      class="_bk_group/tooltip _bk_flex _bk_items-center _bk_shrink-0 _bk_justify-center _bk_relative _bk_lg:static _bk_z-50 _bk_size-50 _bk_lg:hover:bg-mono-700 _bk_text-mono-300 _bk_lg:hover:text-mono-50 _bk_group/button"
       :class="[
-  { 'bk-is-active': active, 'bk-is-last': weight === 'last' },
+  {
+    'bk-is-active': active,
+    'bk-is-last': weight === 'last',
+    '_bk_cursor-not-allowed _bk_text-mono-500!': disabled
+  },
   $attrs.class
 ]"
       :style="weight !== 'last' ? { order: weight || 0 } : void 0"
       @click.prevent.stop="onClick"
     >
-      <slot name="icon">
-        <Icon v-if="icon" :name="icon" class="bk-item-action-icon" />
-      </slot>
-      <Tooltip :label="title" placement="above-left" class="_bk_min-w-full">
+      <div class="_bk_relative">
+        <slot name="icon">
+          <Icon
+            v-if="icon"
+            :name="icon"
+            class="_bk_size-20 _bk_lg:size-24 _bk_fill-current _bk_pointer-events-none"
+          />
+          <slot name="icon-addon" />
+        </slot>
+      </div>
+      <Tooltip
+        :label="title"
+        :description
+        placement="above-left"
+        class="_bk_min-w-full"
+      >
         <template v-if="keyCode" #shortcut>
           <ShortcutIndicator
             :meta="meta"
@@ -48,23 +65,24 @@ import {
   TooltipStatus
 } from "#blokkli/editor/components";
 import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
-const { selection, state } = useBlokkli();
+const { selection, state, ui } = useBlokkli();
 const el = ref(null);
 const uuids = computed(() => selection.uuids.value);
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
-  disabled: { type: [Boolean, String], required: false },
-  active: { type: Boolean, required: false },
-  keyCode: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: [Boolean, String], required: false, default: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  keyCode: { type: String, required: false, default: void 0 },
   meta: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
   editOnly: { type: Boolean, required: false },
-  weight: { type: [Number, String], required: false },
+  weight: { type: [Number, String], required: false, default: void 0 },
   hidden: { type: Boolean, required: false },
   disabledReasonSuccess: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  tourText: { type: String, required: false }
+  icon: { type: null, required: false, default: void 0 },
+  tourText: { type: String, required: false, default: void 0 }
 });
 const isDisabled = computed(
   () => !!props.disabled || !props.multiple && selection.items.value.length > 1
@@ -79,11 +97,13 @@ const shouldRender = computed(() => {
   return true;
 });
 const emit = defineEmits(["click"]);
-const onClick = () => {
-  if (isDisabled.value || !uuids.value.length) {
+const onClick = async () => {
+  if (isDisabled.value || !uuids.value.length || ui.isApproving.value) {
     return;
   }
-  emit("click", selection.items.value);
+  const items = selection.items.value;
+  await ui.flushPendingChanges();
+  emit("click", items);
 };
 defineCommands(() => ({
   id: "plugin:item_action:" + props.id,

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
      * Displayed in the tooltip and keyboard shortcut hints.
      */
     title: string;
+    description?: string;
     /**
      * Whether the action is disabled.
      *
@@ -77,20 +78,29 @@ type __VLS_Props = {
      */
     tourText?: string;
 };
-declare var __VLS_7: {}, __VLS_34: {
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_36: {
     items: any;
     uuids: any;
 };
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_34) => any;
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (items: RenderedFieldListItem[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((items: RenderedFieldListItem[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    keyCode: string;
+    disabled: boolean | string;
+    icon: BlokkliIcon;
+    active: boolean;
+    weight: number | string | "last";
+    tourText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minHeight: number;
     minWidth: number;
+    minHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minHeight: number;
     minWidth: number;
+    minHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -200,9 +200,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    minHeight: number;
     tourText: string;
     minWidth: number;
+    minHeight: number;
     region: SidebarRegion;
     tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
@@ -220,7 +220,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: any;
         height: any;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: any;
     }) => any;
 } & {
@@ -232,7 +232,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: undefined;
         height: undefined;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: boolean;
     }) => any;
 }>;