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

package/dist/runtime/editor/components/Actions/index.vue

@@ -2,19 +2,27 @@
   <div
     ref="el"
     :style="{
-  visibility: isVisible ? 'visible' : 'hidden'
+  visibility: isVisible ? 'visible' : 'hidden',
+  '--bk-actions-max-width': `${paddedViewportWidth}px`
 }"
     class="bk bk-blokkli-item-actions-inner _bk_absolute _bk_left-0 _bk_p-0 _bk_z-actions _bk_w-full _bk_text-mono-50 _bk_select-none _bk_text-sm _bk_pointer-events-auto"
     @mouseleave="onMouseLeave"
     @mouseenter="onMouseEnter"
   >
+    <ScrollArrow
+      v-show="showLeft"
+      side="left"
+      @start="startScroll(-1)"
+      @end="stopScroll"
+    />
     <div
       id="bk-blokkli-item-actions-controls"
-      ref="controlsEl"
-      class="bk-blokkli-item-actions-controls _bk_flex _bk_items-stretch _bk_whitespace-nowrap _bk_h-full _bk_flex-wrap _bk_lg:flex-nowrap _bk_bg-mono-950/90 _bk_scheme-dark _bk_relative _bk_z-50 _bk_lg:border _bk_lg:border-mono-400 _bk_lg:bg-mono-900"
+      ref="contentEl"
+      class="bk-blokkli-item-actions-controls _bk_flex _bk_items-stretch _bk_whitespace-nowrap _bk_h-full _bk_flex-wrap _bk_lg:flex-nowrap _bk_lg:w-max _bk_bg-mono-950/90 _bk_scheme-dark _bk_relative _bk_z-50 _bk_lg:border _bk_lg:border-mono-400 _bk_lg:bg-mono-900"
       :class="{
   '_bk_pointer-events-none': ui.isTransforming.value
 }"
+      :style="{ '--bk-actions-scroll-x': `${-scrollX}px` }"
     >
       <Interactions />
       <Title />
@@ -25,6 +33,12 @@
         class="_bk_relative _bk_flex _bk_flex-1 _bk_lg:flex-initial _bk_lg:border-l _bk_lg:border-l-mono-500 _bk_justify-end"
       />
     </div>
+    <ScrollArrow
+      v-show="showRight"
+      side="right"
+      @start="startScroll(1)"
+      @end="stopScroll"
+    />
   </div>
 </template>
 
@@ -32,16 +46,32 @@
 import { computed, useBlokkli, useTemplateRef, onBeforeUnmount } from "#imports";
 import Interactions from "./Interactions/index.vue";
 import Title from "./Title/index.vue";
-import { useStickyToolbar } from "#blokkli/editor/composables";
+import ScrollArrow from "./ScrollArrow/index.vue";
+import { onBlokkliEvent, useStickyToolbar } from "#blokkli/editor/composables";
+import { useToolbarScroll } from "./useToolbarScroll";
 const { selection, ui } = useBlokkli();
 const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
+const contentEl = useTemplateRef("contentEl");
+const {
+  scrollX,
+  showLeft,
+  showRight,
+  startScroll,
+  stopScroll,
+  scrollIntoView
+} = useToolbarScroll({
+  viewportEl: el,
+  contentEl
+});
+onBlokkliEvent("actions:scrollIntoView", (e) => {
+  scrollIntoView(e.element);
+});
 useStickyToolbar(el, {
   getPlacementY: () => "top",
   shouldUpdate: () => !ui.actionsToolbarLocked.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
-  getMargin: () => 30,
-  allowHorizontalOverflow: true
+  getMargin: () => 30
 });
 let mouseLeaveTimeout = null;
 function onMouseLeave() {
@@ -67,6 +97,9 @@ onBeforeUnmount(() => {
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
+const paddedViewportWidth = computed(
+  () => Math.max(120, Math.round(ui.visibleViewportPadded.value.width))
+);
 const isVisible = computed(() => {
   return !selection.isDragging.value && !selection.activeFieldLabel.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value && !ui.isApproving.value;
 });
@@ -80,7 +113,6 @@ export default {
 
 <style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-blokkli-item-actions-inner {
-  transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   bottom: var(--bk-root-offset-bottom);
 }
@@ -89,6 +121,14 @@ export default {
     top: 0px !important;
     width: auto !important;
     bottom: initial !important;
+    max-width: var(--bk-actions-max-width, calc(100vw - 60px));
+    clip-path: inset(-100vh 0 -100vh 0);
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-actions-controls {
+    transform: translate3d(var(--bk-actions-scroll-x, 0px), 0, 0);
+    will-change: transform;
   }
 }
 .bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) {

package/dist/runtime/editor/components/Actions/useToolbarScroll.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+export type UseToolbarScrollOptions = {
+    viewportEl: Readonly<Ref<HTMLElement | null>>;
+    contentEl: Readonly<Ref<HTMLElement | null>>;
+};
+/**
+ * Drives horizontal scroll of the actions toolbar's inner content via a
+ * transform translate, exposing arrow visibility flags and press-and-hold
+ * scroll controls.
+ *
+ * The viewport caps at the editor's safe area on desktop; when the content
+ * (icons, options, action buttons) is wider, the user scrolls by pressing
+ * and holding the arrow buttons rendered on the viewport edges. The
+ * underlying transform is applied without a CSS transition so selection
+ * changes don't animate back to zero. Mobile is unaffected — the options
+ * strip keeps its own native horizontal overflow there.
+ */
+export declare function useToolbarScroll(options: UseToolbarScrollOptions): {
+    scrollX: any;
+    showLeft: any;
+    showRight: any;
+    startScroll: (direction: -1 | 1) => void;
+    stopScroll: () => void;
+    scrollIntoView: (element: HTMLElement) => void;
+};

package/dist/runtime/editor/components/Actions/useToolbarScroll.js

@@ -0,0 +1,125 @@
+import { ref, computed, onBeforeUnmount } from "#imports";
+import { onElementResize } from "#blokkli/editor/composables";
+const LG_MEDIA_QUERY = "(min-width: 1024px)";
+const SCROLL_SPEED_PX_PER_SEC = 1400;
+const ARROW_OVERLAP_PX = 60;
+export function useToolbarScroll(options) {
+  const scrollX = ref(0);
+  const viewportWidth = ref(0);
+  const contentWidth = ref(0);
+  const isLg = ref(
+    typeof window !== "undefined" ? window.matchMedia(LG_MEDIA_QUERY).matches : false
+  );
+  const maxScroll = computed(() => {
+    if (!isLg.value) {
+      return 0;
+    }
+    return Math.max(0, contentWidth.value - viewportWidth.value);
+  });
+  const showLeft = computed(() => maxScroll.value > 0 && scrollX.value > 0);
+  const showRight = computed(
+    () => maxScroll.value > 0 && scrollX.value < maxScroll.value
+  );
+  function clamp() {
+    if (scrollX.value > maxScroll.value) {
+      scrollX.value = maxScroll.value;
+    } else if (scrollX.value < 0) {
+      scrollX.value = 0;
+    }
+  }
+  let rafId = null;
+  let lastTime = null;
+  let currentDirection = 0;
+  function tick(now) {
+    if (lastTime === null) {
+      lastTime = now;
+    }
+    const dt = (now - lastTime) / 1e3;
+    lastTime = now;
+    const next = Math.max(
+      0,
+      Math.min(
+        maxScroll.value,
+        scrollX.value + currentDirection * SCROLL_SPEED_PX_PER_SEC * dt
+      )
+    );
+    scrollX.value = next;
+    if (currentDirection < 0 && next === 0 || currentDirection > 0 && next >= maxScroll.value) {
+      stopScroll();
+      return;
+    }
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function startScroll(direction) {
+    if (rafId !== null) {
+      return;
+    }
+    currentDirection = direction;
+    lastTime = null;
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function stopScroll() {
+    if (rafId !== null) {
+      window.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    lastTime = null;
+    currentDirection = 0;
+  }
+  function scrollIntoView(element) {
+    const viewport = options.viewportEl.value;
+    if (!viewport || !isLg.value || maxScroll.value <= 0) {
+      return;
+    }
+    if (!viewport.contains(element)) {
+      return;
+    }
+    const viewportRect = viewport.getBoundingClientRect();
+    const elRect = element.getBoundingClientRect();
+    const leftOverflow = viewportRect.left + ARROW_OVERLAP_PX - elRect.left;
+    const rightOverflow = elRect.right - (viewportRect.right - ARROW_OVERLAP_PX);
+    let next = scrollX.value;
+    if (leftOverflow > 0) {
+      next -= leftOverflow;
+    } else if (rightOverflow > 0) {
+      next += rightOverflow;
+    } else {
+      return;
+    }
+    scrollX.value = Math.max(0, Math.min(maxScroll.value, next));
+  }
+  onElementResize(options.viewportEl, (size) => {
+    viewportWidth.value = size.width;
+    clamp();
+  });
+  onElementResize(options.contentEl, (size) => {
+    contentWidth.value = size.width;
+    clamp();
+  });
+  let mql = null;
+  function onMediaChange(e) {
+    isLg.value = e.matches;
+    if (!e.matches) {
+      scrollX.value = 0;
+      stopScroll();
+    } else {
+      clamp();
+    }
+  }
+  if (typeof window !== "undefined") {
+    mql = window.matchMedia(LG_MEDIA_QUERY);
+    mql.addEventListener("change", onMediaChange);
+  }
+  onBeforeUnmount(() => {
+    mql?.removeEventListener("change", onMediaChange);
+    stopScroll();
+  });
+  return {
+    scrollX,
+    showLeft,
+    showRight,
+    startScroll,
+    stopScroll,
+    scrollIntoView
+  };
+}

package/dist/runtime/editor/components/AddListItem/index.vue

@@ -7,8 +7,6 @@
     class="bk-add-item"
     :menu="menu"
     :data-sortli-id="id"
-    :data-test="'add-list-item-' + id"
-    :data-test-disabled="disabled"
     :class="[
   {
     'bk-is-disabled': disabled

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -2,8 +2,6 @@
   <button
     :id="'bk-menu-list-button-' + id"
     class="_bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_group"
-    :data-test="'app-menu-button-' + id"
-    :data-test-type="type"
     :disabled
     :class="[
   {
@@ -26,7 +24,7 @@
 }"
     >
       <div
-        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-normal _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-dark _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
         :class="{
   '_bk_size-25': small,
   '_bk_size-50': !small

package/dist/runtime/editor/components/ArtboardTooltip/index.vue

@@ -16,7 +16,10 @@
       <div class="bk-artboard-tooltip-header">
         <div class="_bk_mr-auto" v-html="title" />
         <slot name="header" />
-        <button :disabled="closeDisabled" @click="$emit('close')">
+        <button
+          :disabled="closeDisabled"
+          @click="$emit('close')"
+        >
           <Icon :name="closeIcon" />
           <span v-if="buttonLabel">{{ buttonLabel }}</span>
         </button>

package/dist/runtime/editor/components/Avatar/index.vue

@@ -2,7 +2,6 @@
   <div
     v-if="deleted"
     class="bk-avatar-deleted _bk_shrink-0 _bk_rounded _bk_flex _bk_items-center _bk_justify-center _bk_size-(--bk-avatar-size) _bk_border _bk_border-mono-300 _bk_bg-mono-100 _bk_text-mono-400 _bk_relative"
-    data-test="avatar-deleted"
     :title="name"
   >
     <Icon name="ghost" />

package/dist/runtime/editor/components/BlockPreviewRenderer/index.d.vue.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    backgroundClass: string;
     maxHeight: number;
+    backgroundClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/BlockPreviewRenderer/index.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    backgroundClass: string;
     maxHeight: number;
+    backgroundClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/BundleSelector/index.vue

@@ -5,7 +5,6 @@
     :anchor-el
     :anchor-coordinates
     class="bk-bundle-selector"
-    data-test="bundle-selector"
     @close="$emit('close')"
   >
     <div
@@ -38,19 +37,16 @@
       >
         <ItemGroup
           :items="filteredBlocks"
-          data-test="bundle-selector-blocks"
           @select="onClick"
         />
         <ItemGroup
           :label="$t('actions', 'Actions')"
           :items="filteredActions"
-          data-test="bundle-selector-actions"
           @select="onClick"
         />
         <ItemGroup
           :label="$t('bundleSelectorFragmentsLabel', 'Fragments')"
           :items="filteredFragments"
-          data-test="bundle-selector-fragments"
           @select="onClick"
         />
       </div>

package/dist/runtime/editor/components/Dialog/index.d.vue.ts

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    canSubmit: boolean;
-    submitLabel: string;
     lead: string;
+    submitLabel: string;
+    canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

package/dist/runtime/editor/components/Dialog/index.vue

@@ -2,7 +2,6 @@
   <div
     ref="rootEl"
     class="bk bk-dialog bk-control"
-    :data-test="'dialog-' + id"
     :class="zIndex === 'high' ? '_bk_z-dialog-high' : '_bk_z-dialog'"
     @wheel.passive.stop
     @keydown.stop="handleKeyDown"
@@ -15,7 +14,7 @@
       <div class="bk bk-overlay-header">
         <Icon v-if="icon" :name="icon" />
         <h3>{{ title }}</h3>
-        <button data-test="dialog-cancel" @click="$emit('cancel')">
+        <button @click="$emit('cancel')">
           <Icon name="bk_mdi_close" />
         </button>
       </div>
@@ -52,7 +51,6 @@
         <slot name="footer">
           <button
             class="bk-button"
-            data-test="dialog-submit"
             :disabled="!canSubmit"
             :class="[
   { 'bk-is-loading': isLoading },

package/dist/runtime/editor/components/Dialog/index.vue.d.ts

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    canSubmit: boolean;
-    submitLabel: string;
     lead: string;
+    submitLabel: string;
+    canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.d.vue.ts

@@ -11,9 +11,17 @@ type __VLS_Props = {
      */
     insertionsOnly?: boolean;
 };
+/**
+ * Restore the original Vue-managed nodes immediately, in preparation for the
+ * consumer's mutation. After this runs, Vue's reactive patch can write the
+ * new value into the live tracked nodes — and the post-mutation
+ * `onBeforeUnmount` restore is skipped so it doesn't clobber that value.
+ */
+declare function commitForApply(): void;
 declare function updateRect(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     updateRect: typeof updateRect;
+    commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;
     activate: () => void;

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.vue

@@ -83,7 +83,18 @@ watch(
   () => props.selected,
   () => applyOverride()
 );
-onBeforeUnmount(() => override.restore());
+let committed = false;
+function commitForApply() {
+  override.restore();
+  committed = true;
+}
+onBeforeUnmount(() => {
+  if (committed) {
+    return;
+  }
+  override.restore();
+});
+defineExpose({ updateRect, commitForApply });
 const rect = ref({ width: "0", height: "0", transform: "" });
 function updateRect() {
   const el = override.element;
@@ -111,5 +122,4 @@ onBlokkliEvent("animationFrame", (ctx) => {
   lastFullUpdate = ctx.time;
   updateRect();
 });
-defineExpose({ updateRect });
 </script>

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.vue.d.ts

@@ -11,9 +11,17 @@ type __VLS_Props = {
      */
     insertionsOnly?: boolean;
 };
+/**
+ * Restore the original Vue-managed nodes immediately, in preparation for the
+ * consumer's mutation. After this runs, Vue's reactive patch can write the
+ * new value into the live tracked nodes — and the post-mutation
+ * `onBeforeUnmount` restore is skipped so it doesn't clobber that value.
+ */
+declare function commitForApply(): void;
 declare function updateRect(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     updateRect: typeof updateRect;
+    commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;
     activate: () => void;

package/dist/runtime/editor/components/DiffApproval/Highlight/index.d.vue.ts

@@ -5,12 +5,20 @@ type __VLS_Props = {
     insertionsOnly?: boolean;
 };
 declare function updateRects(): void;
+/**
+ * Reset each accepted item's editable to its original Vue-tracked DOM, then
+ * mark them committed so the post-mutation unmount-restore is a no-op. Called
+ * by DiffApproval BEFORE emitting `apply`, so the consumer's mutation patches
+ * onto the freshly-restored nodes instead of the throwaway diff markup.
+ */
+declare function commitSelected(): void;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     updateRects: typeof updateRects;
+    commitSelected: typeof commitSelected;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Highlight/index.vue

@@ -24,7 +24,7 @@
 <script setup>
 import { computed, useTemplateRef, useBlokkli } from "#imports";
 import Item from "./Item.vue";
-defineProps({
+const props = defineProps({
   items: { type: Array, required: true },
   selected: { type: Object, required: true },
   insertionsOnly: { type: Boolean, required: false }
@@ -51,5 +51,17 @@ function updateRects() {
     }
   }
 }
-defineExpose({ updateRects });
+function commitSelected() {
+  if (!itemRefs.value) {
+    return;
+  }
+  for (let i = 0; i < itemRefs.value.length; i++) {
+    const ref = itemRefs.value[i];
+    const item = props.items[i];
+    if (ref && item && props.selected[item.id]) {
+      ref.commitForApply();
+    }
+  }
+}
+defineExpose({ updateRects, commitSelected });
 </script>

package/dist/runtime/editor/components/DiffApproval/Highlight/index.vue.d.ts

@@ -5,12 +5,20 @@ type __VLS_Props = {
     insertionsOnly?: boolean;
 };
 declare function updateRects(): void;
+/**
+ * Reset each accepted item's editable to its original Vue-tracked DOM, then
+ * mark them committed so the post-mutation unmount-restore is a no-op. Called
+ * by DiffApproval BEFORE emitting `apply`, so the consumer's mutation patches
+ * onto the freshly-restored nodes instead of the throwaway diff markup.
+ */
+declare function commitSelected(): void;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     updateRects: typeof updateRects;
+    commitSelected: typeof commitSelected;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.d.vue.ts

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
     "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.vue

@@ -17,7 +17,6 @@
         }}</span>
         <button
           class="_bk_hover:bg-mono-800 _bk_h-40 _bk_px-8 _bk_flex _bk_items-center _bk_gap-5 _bk_font-semibold"
-          data-test="diff-approval-cancel"
           @click="$emit('cancel')"
         >
           <span>{{ $t("cancel", "Cancel") }}</span>
@@ -119,7 +118,6 @@
 
         <button
           class="bk-button bk-scheme-lime _bk_rounded-l-none! _bk_rounded-tr-none!"
-          data-test="diff-approval-apply"
           @click="$emit('apply')"
         >
           <span>{{ applyLabel }}</span>

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.vue.d.ts

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
     "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/DiffApproval/index.vue

@@ -78,7 +78,7 @@ const items = [...props.items].sort((a, b) => {
 });
 const currentIndex = ref(0);
 const currentItem = computed(() => {
-  return props.items.at(currentIndex.value) ?? null;
+  return items.at(currentIndex.value) ?? null;
 });
 const selected = reactive(
   Object.fromEntries(items.map((item) => [item.id, true]))
@@ -103,6 +103,7 @@ function onUpdateReasons(id, value) {
   reasons[id] = value;
 }
 function onApply() {
+  highlight.value?.commitSelected();
   emit("apply", {
     selected: { ...selected },
     reasons: { ...reasons }
@@ -143,7 +144,7 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 onBlokkliEvent("editable:focus", (e) => {
-  const index = props.items.findIndex(
+  const index = items.findIndex(
     (item) => item.fieldName === e.fieldName && item.uuid === e.uuid
   );
   if (index !== -1) {

package/dist/runtime/editor/components/Dropdown/index.vue

@@ -151,43 +151,4 @@ defineExpose({ close });
   margin-top: 5px;
   transform-origin: 100% 0;
 }
-.bk .bk-dropdown-menu-item {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 8px;
-  padding-inline: 10px;
-  padding-block: 10px;
-  text-align: left;
-  font-size: var(--text-sm, 14px);
-  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-  color: rgb(var(--bk-theme-mono-700) / 1);
-  cursor: pointer;
-  --bk-tw-border-style: none;
-  border-style: none;
-  background-color: transparent;
-}
-@media (hover: hover) {
-  :is(.bk .bk-dropdown-menu-item):hover {
-    background-color: rgb(var(--bk-theme-mono-100) / 1);
-  }
-}
-@media (hover: hover) {
-  :is(.bk .bk-dropdown-menu-item):hover {
-    color: rgb(var(--bk-theme-mono-950) / 1);
-  }
-}
-.bk .bk-dropdown-menu-item {
-  --bk-tw-leading: 1;
-  line-height: 1;
-  white-space: nowrap;
-}
-:is(.bk .bk-dropdown-menu-item):hover svg {
-  fill: rgb(var(--bk-theme-accent-700) / 1);
-}
-:is(.bk .bk-dropdown-menu-item) svg {
-  width: 18px;
-  height: 18px;
-  fill: currentcolor;
-}
 </style>