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

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

@@ -1,6 +1,9 @@
 <template>
   <Teleport to="#bk-canvas-overlay">
-    <div class="bk bk-diff-approval-highlight" :style="containerStyle">
+    <div
+      class="bk _bk_absolute _bk_top-0 _bk_left-0 _bk_pointer-events-auto _bk_origin-top-left"
+      :style="containerStyle"
+    >
       <Item
         v-for="(item, i) in items"
         :key="item.id"
@@ -10,6 +13,7 @@
         :value="item.value"
         :selected="!!selected[item.id]"
         :active="i === activeIndex"
+        :insertions-only
         @activate="activeIndex = i"
         @toggle="emit('toggle', item.id)"
       />
@@ -22,7 +26,8 @@ import { computed, useTemplateRef, useBlokkli } from "#imports";
 import Item from "./Item.vue";
 defineProps({
   items: { type: Array, required: true },
-  selected: { type: Object, required: true }
+  selected: { type: Object, required: true },
+  insertionsOnly: { type: Boolean, required: false }
 });
 const emit = defineEmits(["toggle"]);
 const activeIndex = defineModel({ type: Number, ...{ default: -1 } });
@@ -48,120 +53,3 @@ function updateRects() {
 }
 defineExpose({ updateRects });
 </script>
-
-<style>
-.bk.bk-diff-approval-highlight {
-  pointer-events: auto;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  transform-origin: 0 0;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border-radius: 4px;
-  border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-}
-
-  /* @apply outline outline-2 outline-mono-300/20; */
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item:not(.bk-is-active):hover {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
-  background-color: rgb(var(--bk-theme-mono-400) / 0.2);
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-active {
-  border-width: 4px;
-  outline-width: 5px;
-  border-top-left-radius: 0px;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-approved {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
-  outline-color: rgb(var(--bk-theme-lime-normal) / 0.3);
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-approved .bk-icon {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-rejected {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-  outline-color: rgb(var(--bk-theme-red-normal) / 0.3);
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-rejected .bk-diff-approval-highlight-item-badge {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item.bk-is-rejected .bk-icon {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-area {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-badge {
-  position: absolute;
-  left: -3px;
-  bottom: 100%;
-  height: 30px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-badge > span {
-  --bk-tw-translate-y: 1px;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 1;
-  letter-spacing: 0.05em;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-badge .bk-icon {
-  display: flex;
-  width: 18px;
-  height: 18px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-}
-
-  .bk.bk-diff-approval-highlight .bk-diff-approval-highlight-item .bk-diff-approval-highlight-item-badge svg {
-  width: 15px;
-  height: 15px;
-  fill: currentColor;
-}
-</style>

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

@@ -2,6 +2,7 @@ import type { ApprovalItem } from '../types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
     selected: Record<number, boolean>;
+    insertionsOnly?: boolean;
 };
 declare function updateRects(): void;
 type __VLS_ModelProps = {

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

@@ -6,19 +6,28 @@ type __VLS_Props = {
     selected: Record<number, boolean>;
     reasons: Record<number, string>;
     applyLabel: string;
+    /**
+     * Whether to show the rejection reason input.
+     *
+     * Used by the agent tools to capture feedback for the LLM. Features that
+     * apply changes directly (e.g. automatic translation) leave it off.
+     */
+    showReason?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (id: number, value: boolean) => void;
     "update:reasons": (id: number, value: string) => void;
+    cancel: () => void;
     apply: () => void;
     prev: () => void;
     next: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
-    "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((id: number, value: string) => 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

@@ -1,101 +1,130 @@
 <template>
   <Teleport v-if="ui.mainLayoutElement.value" :to="ui.mainLayoutElement.value">
-    <div class="bk bk-diff-approval-toolbar-hint bk-control">
-      {{
-        $t(
+    <div
+      class="bk bk-control bk-diff-approval-toolbar-hint _bk_p-15 _bk_pointer-events-auto"
+    />
+    <div
+      class="bk bk-control bk-diff-approval-toolbar _bk_self-end _bk_pointer-events-auto _bk_bg-mono-900 _bk_text-mono-50 _bk_select-none _bk_relative _bk_mx-15 _bk_mb-15 _bk_rounded _bk_shadow-xl-even _bk_outline _bk_outline-1 _bk_outline-mono-400"
+    >
+      <div
+        class="_bk_text-mono-100 _bk_font-medium _bk_text-sm _bk_border-b _bk_border-b-mono-600 _bk_flex _bk_justify-between _bk_items-center"
+      >
+        <span class="_bk_p-10">{{
+          $t(
   "aiAgentApprovalHint",
   "Review changes and accept or reject them individually. Tab/Arrow keys: navigate, Space/Enter: accept/reject."
 )
-      }}
-    </div>
-    <div class="bk bk-diff-approval-toolbar bk-control">
-      <button
-        class="bk-diff-approval-toolbar-nav _bk_group/tooltip"
-        @click="$emit('prev')"
-      >
-        <Icon name="bk_mdi_chevron_left" />
-        <Tooltip
-          :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
-          placement="above-left"
+        }}</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')"
         >
-          <template #shortcut>
-            <ShortcutIndicator
-              key-code="ArrowLeft"
-              :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
-              @pressed="$emit('prev')"
-            />
-          </template>
-        </Tooltip>
-      </button>
-      <button
-        class="bk-diff-approval-toolbar-nav _bk_group/tooltip"
-        @click="$emit('next')"
-      >
-        <Icon name="bk_mdi_chevron_right" />
-        <Tooltip
-          placement="above-left"
-          :label="$t('aiAgentApprovalNextChange', 'Next change')"
-        >
-          <template #shortcut>
-            <ShortcutIndicator
-              key-code="ArrowRight"
-              :label="$t('aiAgentApprovalNextChange', 'Next change')"
-              @pressed="$emit('next')"
-            />
-          </template>
-        </Tooltip>
-      </button>
-
-      <div class="bk-diff-approval-toolbar-info">
-        <span class="bk-diff-approval-toolbar-counter">
-          {{ currentIndex + 1 }} / {{ totalItems }}
-        </span>
-        <span class="bk-diff-approval-toolbar-label">
-          {{ currentItem.fieldLabel }}
-          <template v-if="bundleLabel"> &middot; {{ bundleLabel }}</template>
-        </span>
+          <span>{{ $t("cancel", "Cancel") }}</span>
+          <Icon name="bk_mdi_close" class="_bk_size-20" />
+        </button>
       </div>
+      <div class="_bk_flex _bk_items-center _bk_h-50">
+        <button
+          class="bk-toolbar-button _bk_group/tooltip _bk_relative _bk_rounded-l-md"
+          @click="$emit('prev')"
+        >
+          <Icon name="bk_mdi_arrow_back" />
+          <Tooltip
+            :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
+            placement="above-left"
+          >
+            <template #shortcut>
+              <ShortcutIndicator
+                key-code="ArrowLeft"
+                :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
+                @pressed="$emit('prev')"
+              />
+            </template>
+          </Tooltip>
+        </button>
+        <button
+          class="bk-toolbar-button _bk_group/tooltip _bk_relative"
+          @click="$emit('next')"
+        >
+          <Icon name="bk_mdi_arrow_forward" />
+          <Tooltip
+            placement="above-left"
+            :label="$t('aiAgentApprovalNextChange', 'Next change')"
+          >
+            <template #shortcut>
+              <ShortcutIndicator
+                key-code="ArrowRight"
+                :label="$t('aiAgentApprovalNextChange', 'Next change')"
+                @pressed="$emit('next')"
+              />
+            </template>
+          </Tooltip>
+        </button>
 
-      <div class="bk-diff-approval-toolbar-toggle _bk_group/tooltip">
-        <FormToggle
-          :model-value="selected[currentItem.id]"
-          :label="$t('aiAgentApprovalAccept', 'Accept')"
-          @update:model-value="toggleCurrent"
-        />
-        <Tooltip
-          :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
-          placement="above-left"
+        <div
+          class="_bk_flex _bk_items-center _bk_gap-10 _bk_px-15 _bk_border-l _bk_border-l-mono-600 _bk_h-full"
         >
-          <template #shortcut>
-            <ShortcutIndicator
-              key-code="Enter"
-              :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
-              @pressed="toggleCurrent"
-            />
-          </template>
-        </Tooltip>
-      </div>
+          <span class="_bk_text-mono-400 _bk_tabular-nums _bk_whitespace-nowrap">
+            {{ currentIndex + 1 }} / {{ totalItems }}
+          </span>
+          <span class="_bk_font-medium _bk_whitespace-nowrap">
+            {{ currentItem.fieldLabel }}
+            <template v-if="bundleLabel"> &middot; {{ bundleLabel }}</template>
+          </span>
+        </div>
 
-      <div
-        v-if="!selected[currentItem.id]"
-        class="bk-diff-approval-toolbar-reason"
-      >
-        <input
-          type="text"
-          :value="reasons[currentItem.id]"
-          :placeholder="
+        <div class="_bk_group/tooltip _bk_relative _bk_h-full _bk_mr-auto">
+          <FormToggle
+            class="_bk_mx-15"
+            color-scheme="dark"
+            stretch
+            :model-value="selected[currentItem.id]"
+            :label="$t('aiAgentApprovalAccept', 'Accept')"
+            @update:model-value="toggleCurrent"
+          />
+          <Tooltip
+            :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
+            placement="above-left"
+          >
+            <template #shortcut>
+              <ShortcutIndicator
+                key-code="Enter"
+                :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
+                @pressed="toggleCurrent"
+              />
+            </template>
+          </Tooltip>
+        </div>
+
+        <div
+          v-if="!selected[currentItem.id] && showReason"
+          class="_bk_flex-1 _bk_min-w-0 _bk_px-10"
+        >
+          <input
+            type="text"
+            class="_bk_w-full _bk_h-30 _bk_px-10 _bk_rounded _bk_bg-mono-800 _bk_text-mono-100 _bk_text-sm _bk_border _bk_border-mono-600 _bk_outline-none _bk_placeholder:text-mono-500 _bk_focus:border-mono-400"
+            :value="reasons[currentItem.id]"
+            :placeholder="
   $t(
     'aiAgentBatchRewriteReasonPlaceholder',
     'Reason for rejection (optional)'
   )
 "
-          @input="onReasonInput"
-        />
-      </div>
+            @keydown.stop
+            @keyup.stop
+            @input="onReasonInput"
+          />
+        </div>
 
-      <button class="bk-button bk-is-lime" @click="$emit('apply')">
-        <span>{{ applyLabel }}</span>
-      </button>
+        <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>
+        </button>
+      </div>
     </div>
   </Teleport>
 </template>
@@ -114,9 +143,10 @@ const props = defineProps({
   totalItems: { type: Number, required: true },
   selected: { type: Object, required: true },
   reasons: { type: Object, required: true },
-  applyLabel: { type: String, required: true }
+  applyLabel: { type: String, required: true },
+  showReason: { type: Boolean, required: false }
 });
-const emit = defineEmits(["update:selected", "update:reasons", "apply", "prev", "next"]);
+const emit = defineEmits(["update:selected", "update:reasons", "apply", "prev", "next", "cancel"]);
 const { ui, blocks, types, $t } = useBlokkli();
 const bundleLabel = computed(() => {
   const item = props.currentItem;
@@ -135,175 +165,12 @@ function onReasonInput(event) {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-diff-approval-toolbar-hint {
   grid-area: mode;
-  align-self: flex-start;
-  justify-self: stretch;
-  display: flex;
-  height: 40px;
-  align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-  border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
 }
 .bk.bk-diff-approval-toolbar {
   grid-area: viewport;
-  align-self: end;
-  pointer-events: auto;
-  display: flex;
-  height: 50px;
-  align-items: center;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-  position: relative;
-  user-select: none;
-  margin-left: 15px;
-  margin-right: 15px;
-  margin-bottom: 15px;
-  border-radius: 6px;
-  --bk-tw-shadow: 0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --bk-tw-shadow-colored: 0 0px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-  outline-style: solid;
-  outline-width: 1px;
-  outline-color: rgb(var(--bk-theme-mono-400) / 1);
-
   color-scheme: dark;
 }
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-toggle,
-  .bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav {
-  position: relative;
-  height: 100%;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-toggle {
-  margin-right: auto;
-}
-.bk.bk-diff-approval-toolbar > .bk-button {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav {
-  display: flex;
-  width: 50px;
-  height: 50px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav:first-child {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav svg {
-  width: 30px;
-  height: 30px;
-  fill: currentColor;
-}
-.bk.bk-diff-approval-toolbar .bk-checkbox-toggle {
-  margin-left: 15px;
-  margin-right: 15px;
-  display: flex;
-  align-items: center;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-checkbox-toggle:hover {
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-left: 15px;
-  padding-right: 15px;
-  height: 100%;
-  border-left-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-left-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-counter {
-  white-space: nowrap;
-  --bk-tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--bk-tw-ordinal) var(--bk-tw-slashed-zero) var(--bk-tw-numeric-figure) var(--bk-tw-numeric-spacing) var(--bk-tw-numeric-fraction);
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-label {
-  white-space: nowrap;
-  font-weight: 500;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason {
-  min-width: 0px;
-  flex: 1 1 0%;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input {
-  height: 30px;
-  width: 100%;
-  border-radius: 4px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 14px;
-  line-height: 20px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-  border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input::placeholder {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input:focus {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-apply {
-  margin-left: auto;
-  margin-right: 10px;
-  height: 30px;
-  flex-shrink: 0;
-  border-radius: 4px;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-weight: 500;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1));
-}
-.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-apply:hover {
-  --bk-tw-brightness: brightness(1.1);
-  filter: var(--bk-tw-blur) var(--bk-tw-brightness) var(--bk-tw-contrast) var(--bk-tw-grayscale) var(--bk-tw-hue-rotate) var(--bk-tw-invert) var(--bk-tw-saturate) var(--bk-tw-sepia) var(--bk-tw-drop-shadow);
-}
 </style>

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

@@ -6,19 +6,28 @@ type __VLS_Props = {
     selected: Record<number, boolean>;
     reasons: Record<number, string>;
     applyLabel: string;
+    /**
+     * Whether to show the rejection reason input.
+     *
+     * Used by the agent tools to capture feedback for the LLM. Features that
+     * apply changes directly (e.g. automatic translation) leave it off.
+     */
+    showReason?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (id: number, value: boolean) => void;
     "update:reasons": (id: number, value: string) => void;
+    cancel: () => void;
     apply: () => void;
     prev: () => void;
     next: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
-    "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,22 @@
 import type { ApprovalItem } from './types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
+    /**
+     * Whether to show the per-item rejection reason input.
+     *
+     * Used by the agent tools to feed feedback back to the LLM. Leave it off when
+     * changes are applied directly with no agent loop.
+     */
+    showReason?: boolean;
+    /**
+     * Render the new value entirely as an insertion (<ins>) instead of a diff
+     * against the original.
+     *
+     * For features like translation the new text bears little resemblance to the
+     * original, so a word-level diff is just noise. Enabling this shows the new
+     * value as a single insertion in the preview.
+     */
+    insertionsOnly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;

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

@@ -7,9 +7,11 @@
     :selected
     :reasons
     :apply-label
+    :show-reason="showReason"
     @update:selected="onUpdateSelected"
     @update:reasons="onUpdateReasons"
     @apply="onApply"
+    @cancel="emit('cancel')"
     @prev="prev"
     @next="next"
   />
@@ -19,6 +21,7 @@
     v-model="currentIndex"
     :items
     :selected
+    :insertions-only
     @toggle="onToggle"
   />
 </template>
@@ -39,7 +42,9 @@ import Highlight from "./Highlight/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
-  items: { type: Array, required: true }
+  items: { type: Array, required: true },
+  showReason: { type: Boolean, required: false },
+  insertionsOnly: { type: Boolean, required: false }
 });
 const emit = defineEmits(["apply", "cancel"]);
 const { $t, ui, eventBus, directive, context, blocks } = useBlokkli();