@blokkli/editor 2.0.0-alpha.62 → 2.0.0-alpha.63

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

@@ -1,31 +1,36 @@
 <template>
   <div
+    v-for="unit in units"
+    :key="unit.key"
     class="_bk_absolute _bk_top-0 _bk_left-0 _bk_rounded"
     :class="[
-  selected ? '_bk_border-lime-normal _bk_outline-lime-normal/30' : '_bk_border-red-normal _bk_outline-red-normal/30',
-  active ? '_bk_border-4 _bk_outline-[5px] _bk_rounded-tl-none' : '_bk_border _bk_hover:border-mono-500 _bk_hover:bg-mono-400/20'
+  selected[unit.key] ? '_bk_border-lime-normal _bk_outline-lime-normal/30' : '_bk_border-red-normal _bk_outline-red-normal/30',
+  activeKey === unit.key ? '_bk_border-4 _bk_outline-[5px] _bk_rounded-tl-none' : '_bk_border _bk_hover:border-mono-500 _bk_hover:bg-mono-400/20'
 ]"
-    :style="rect"
+    :style="rects[unit.key]"
   >
-    <button class="_bk_size-full _bk_block" @click.prevent="$emit('activate')" />
     <button
-      v-show="active"
+      class="_bk_size-full _bk_block"
+      @click.prevent="emit('activate', unit.key)"
+    />
+    <button
+      v-show="activeKey === unit.key"
       class="_bk_absolute _bk_left-[-3px] _bk_bottom-full _bk_h-30 _bk_px-8 _bk_flex _bk_items-center _bk_justify-center _bk_gap-5 _bk_text-white _bk_rounded-t-md"
       :class="
-  selected ? '_bk_bg-lime-normal _bk_hover:bg-lime-dark' : '_bk_bg-red-normal _bk_hover:bg-red-dark'
+  selected[unit.key] ? '_bk_bg-lime-normal _bk_hover:bg-lime-dark' : '_bk_bg-red-normal _bk_hover:bg-red-dark'
 "
-      @click.prevent="$emit('toggle')"
+      @click.prevent="emit('toggle', unit.key)"
     >
       <Icon
-        :name="selected ? 'bk_mdi_check' : 'bk_mdi_close'"
+        :name="selected[unit.key] ? 'bk_mdi_check' : 'bk_mdi_close'"
         class="_bk_size-20 _bk_p-2 _bk_rounded _bk_flex _bk_items-center _bk_justify-center _bk_border _bk_border-white"
-        :class="selected ? '_bk_text-lime-normal _bk_bg-white' : '_bk_text-white'"
+        :class="selected[unit.key] ? '_bk_text-lime-normal _bk_bg-white' : '_bk_text-white'"
       />
       <span
         class="_bk_text-xs _bk_font-semibold _bk_uppercase _bk_tracking-wider _bk_leading-none _bk_translate-y-1"
       >
         {{
-          selected ? $t("aiAgentApprovalAccepted", "Accepted") : $t("aiAgentApprovalRejected", "Rejected")
+          selected[unit.key] ? $t("aiAgentApprovalAccepted", "Accepted") : $t("aiAgentApprovalRejected", "Rejected")
         }}
       </span>
     </button>
@@ -40,39 +45,63 @@ import {
 } from "#blokkli/editor/composables";
 import { Icon } from "#blokkli/editor/components";
 import { itemEntityType } from "#blokkli-build/config";
-import { computeDiff, computeInsertion } from "#blokkli/editor/helpers/diff";
+import {
+  computeDiff,
+  computeInsertion,
+  flattenSegments,
+  renderSegmentDiff
+} from "#blokkli/editor/helpers/diff";
 const props = defineProps({
-  uuid: { type: String, required: true },
-  fieldName: { type: String, required: true },
-  value: { type: String, required: true },
-  selected: { type: Boolean, required: true },
-  active: { type: Boolean, required: true },
+  item: { type: Object, required: true },
+  units: { type: Array, required: true },
+  selected: { type: Object, required: true },
+  activeKey: { type: [String, null], required: true },
   insertionsOnly: { type: Boolean, required: false }
 });
-defineEmits(["activate", "toggle"]);
-const { ui, blocks, context, $t } = useBlokkli();
+const emit = defineEmits(["activate", "toggle"]);
+const { $t, ui, blocks, context } = useBlokkli();
 function resolveHost() {
-  if (props.uuid === context.value.entityUuid) {
+  if (props.item.uuid === context.value.entityUuid) {
     return {
       type: context.value.entityType,
       bundle: context.value.entityBundle,
-      uuid: props.uuid
+      uuid: props.item.uuid
     };
   }
-  const block = blocks.getBlock(props.uuid);
+  const block = blocks.getBlock(props.item.uuid);
   return {
     type: itemEntityType,
     bundle: block?.bundle || "",
-    uuid: props.uuid
+    uuid: props.item.uuid
   };
 }
 const host = resolveHost();
-const override = useEditableFieldOverride(props.fieldName, host);
-const diffHtml = computed(
-  () => props.insertionsOnly ? computeInsertion(props.value) : computeDiff(override.originalValue, props.value)
-);
+const override = useEditableFieldOverride(props.item.fieldName, host);
+const isSegmented = computed(() => Array.isArray(props.item.segments));
+const acceptedBySegmentId = computed(() => {
+  if (!props.item.segments) return {};
+  const out = {};
+  for (const atom of flattenSegments(props.item.segments)) {
+    out[atom.id] = props.selected[`${props.item.id}:${atom.id}`] !== false;
+  }
+  return out;
+});
+const diffHtml = computed(() => {
+  if (props.item.segments) {
+    return renderSegmentDiff(props.item.segments, {
+      insertionsOnly: props.insertionsOnly,
+      acceptedById: acceptedBySegmentId.value
+    });
+  }
+  return props.insertionsOnly ? computeInsertion(props.item.value) : computeDiff(override.originalValue, props.item.value);
+});
 function applyOverride() {
-  if (props.selected) {
+  if (isSegmented.value) {
+    override.setDiffHtml(diffHtml.value);
+    return;
+  }
+  const onlyUnit = props.units[0];
+  if (onlyUnit && props.selected[onlyUnit.key]) {
     override.setDiffHtml(diffHtml.value);
   } else {
     override.restore();
@@ -80,8 +109,11 @@ function applyOverride() {
 }
 applyOverride();
 watch(
-  () => props.selected,
-  () => applyOverride()
+  () => props.units.map((u) => props.selected[u.key]),
+  () => {
+    applyOverride();
+    updateRects();
+  }
 );
 let committed = false;
 function commitForApply() {
@@ -89,37 +121,50 @@ function commitForApply() {
   committed = true;
 }
 onBeforeUnmount(() => {
-  if (committed) {
-    return;
-  }
+  if (committed) return;
   override.restore();
 });
-defineExpose({ updateRect, commitForApply });
-const rect = ref({ width: "0", height: "0", transform: "" });
-function updateRect() {
-  const el = override.element;
-  if (el) {
-    const r = ui.getAbsoluteElementRect(el);
-    const pad = 5;
-    rect.value = {
-      width: r.width + pad * 2 + "px",
-      height: r.height + pad * 2 + "px",
-      transform: `translate(${r.x - pad}px, ${r.y - pad}px)`
-    };
-  } else {
-    rect.value = {
-      width: "0",
-      height: "0",
-      transform: "",
-      visibility: "hidden"
-    };
+defineExpose({ updateRects, commitForApply });
+const rects = ref({});
+const HIDDEN_RECT = {
+  width: "0",
+  height: "0",
+  transform: "",
+  visibility: "hidden"
+};
+function computeRect(el) {
+  const r = ui.getAbsoluteElementRect(el);
+  const pad = 5;
+  return {
+    width: r.width + pad * 2 + "px",
+    height: r.height + pad * 2 + "px",
+    transform: `translate(${r.x - pad}px, ${r.y - pad}px)`
+  };
+}
+function resolveUnitElement(unit) {
+  const root = override.element;
+  if (!root) return null;
+  if (unit.kind === "whole") return root;
+  return root.querySelector(
+    `[data-chunk-index="${CSS.escape(unit.segment.id)}"]`
+  );
+}
+function updateRects() {
+  const next = {};
+  for (const unit of props.units) {
+    const el = resolveUnitElement(unit);
+    next[unit.key] = el ? computeRect(el) : HIDDEN_RECT;
   }
+  rects.value = next;
 }
+updateRects();
 let lastFullUpdate = 0;
 onBlokkliEvent("animationFrame", (ctx) => {
   const forceRefresh = ctx.time - lastFullUpdate > 1e3;
   if (!forceRefresh) return;
   lastFullUpdate = ctx.time;
-  updateRect();
+  if (!isSegmented.value) {
+    updateRects();
+  }
 });
 </script>

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

@@ -1,33 +1,27 @@
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
-    uuid: string;
-    fieldName: string;
-    value: string;
-    selected: boolean;
-    active: boolean;
+    item: ApprovalItem;
+    /** Units belonging to this item, in reading order. Never empty in practice. */
+    units: ApprovalUnit[];
+    selected: Record<string, boolean>;
+    activeKey: string | null;
     /**
-     * Render the new value entirely as an insertion instead of a diff.
-     *
-     * See the prop of the same name on DiffApproval.
+     * Render the new value entirely as an insertion instead of a diff. See the
+     * prop of the same name on DiffApproval.
      */
     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 function updateRects(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    updateRect: typeof updateRect;
+    updateRects: typeof updateRects;
     commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: () => void;
-    activate: () => void;
+    toggle: (key: string) => void;
+    activate: (key: string) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (() => any) | undefined;
-    onActivate?: (() => any) | undefined;
+    onToggle?: ((key: string) => any) | undefined;
+    onActivate?: ((key: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,15 +1,15 @@
-import type { ApprovalItem } from '../types.js';
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
-    selected: Record<number, boolean>;
+    units: ApprovalUnit[];
+    selected: Record<string, boolean>;
     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.
+ * by DiffApproval BEFORE emitting `apply`.
  */
 declare function commitSelected(): void;
 type __VLS_ModelProps = {
@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {
-    toggle: (id: number) => any;
+    toggle: (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onToggle?: ((id: number) => any) | undefined;
+    onToggle?: ((key: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -5,17 +5,16 @@
       :style="containerStyle"
     >
       <Item
-        v-for="(item, i) in items"
+        v-for="item in items"
         :key="item.id"
         ref="itemRefs"
-        :uuid="item.uuid"
-        :field-name="item.fieldName"
-        :value="item.value"
-        :selected="!!selected[item.id]"
-        :active="i === activeIndex"
+        :item
+        :units="unitsByItemId[item.id] ?? []"
+        :selected
+        :active-key
         :insertions-only
-        @activate="activeIndex = i"
-        @toggle="emit('toggle', item.id)"
+        @activate="(key) => onActivate(key)"
+        @toggle="(key) => emit('toggle', key)"
       />
     </div>
   </Teleport>
@@ -26,6 +25,7 @@ import { computed, useTemplateRef, useBlokkli } from "#imports";
 import Item from "./Item.vue";
 const props = defineProps({
   items: { type: Array, required: true },
+  units: { type: Array, required: true },
   selected: { type: Object, required: true },
   insertionsOnly: { type: Boolean, required: false }
 });
@@ -41,26 +41,35 @@ const containerStyle = computed(() => {
     transform: `translate(${offset.x}px, ${offset.y}px) scale(${ui.artboardScale.value})`
   };
 });
+const unitsByItemId = computed(() => {
+  const out = {};
+  for (const unit of props.units) {
+    const list = out[unit.item.id] ?? [];
+    list.push(unit);
+    out[unit.item.id] = list;
+  }
+  return out;
+});
+const activeKey = computed(() => {
+  return props.units.at(activeIndex.value)?.key ?? null;
+});
+function onActivate(key) {
+  const idx = props.units.findIndex((u) => u.key === key);
+  if (idx !== -1) activeIndex.value = idx;
+}
 function updateRects() {
   if (itemRefs.value) {
     for (const item of itemRefs.value) {
-      if (!item) {
-        continue;
-      }
-      item.updateRect();
+      if (!item) continue;
+      item.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();
-    }
+  if (!itemRefs.value) return;
+  for (const ref of itemRefs.value) {
+    if (!ref) continue;
+    ref.commitForApply();
   }
 }
 defineExpose({ updateRects, commitSelected });

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

@@ -1,15 +1,15 @@
-import type { ApprovalItem } from '../types.js';
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
-    selected: Record<number, boolean>;
+    units: ApprovalUnit[];
+    selected: Record<string, boolean>;
     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.
+ * by DiffApproval BEFORE emitting `apply`.
  */
 declare function commitSelected(): void;
 type __VLS_ModelProps = {
@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {
-    toggle: (id: number) => any;
+    toggle: (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onToggle?: ((id: number) => any) | undefined;
+    onToggle?: ((key: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,10 +1,20 @@
-import type { ApprovalItem } from '../types.js';
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
+    currentUnit: ApprovalUnit;
     currentItem: ApprovalItem;
-    currentIndex: number;
-    totalItems: number;
-    selected: Record<number, boolean>;
-    reasons: Record<number, string>;
+    /**
+     * 1-based position of the current unit across the whole batch — a single
+     * progress count that includes per-chunk units for segmented fields.
+     */
+    unitIndex: number;
+    totalUnits: number;
+    /**
+     * 1-based segment index within the current field. 0 when the current unit
+     * is whole-field (the segment chip is hidden in that case).
+     */
+    segmentIndex: number;
+    selected: Record<string, boolean>;
+    reasons: Record<string, string>;
     applyLabel: string;
     /**
      * Whether to show the rejection reason input.
@@ -15,8 +25,8 @@ type __VLS_Props = {
     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;
+    "update:selected": (key: string, value: boolean) => void;
+    "update:reasons": (key: string, value: string) => void;
     cancel: () => void;
     apply: () => void;
     prev: () => void;
@@ -24,8 +34,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, 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;
+    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -65,11 +65,18 @@
           class="_bk_flex _bk_items-center _bk_gap-10 _bk_px-15 _bk_border-l _bk_border-l-mono-600 _bk_h-full"
         >
           <span class="_bk_text-mono-400 _bk_tabular-nums _bk_whitespace-nowrap">
-            {{ currentIndex + 1 }} / {{ totalItems }}
+            {{ unitIndex }} / {{ totalUnits }}
           </span>
           <span class="_bk_font-medium _bk_whitespace-nowrap">
             {{ currentItem.fieldLabel }}
             <template v-if="bundleLabel"> &middot; {{ bundleLabel }}</template>
+            <template v-if="currentUnit.kind === 'segment'">
+              &middot;
+              <span class="_bk_font-mono _bk_text-mono-300"
+                >&lt;{{ currentUnit.segment.tag }}&gt;</span
+              >
+              {{ segmentIndex }}
+            </template>
           </span>
         </div>
 
@@ -78,7 +85,7 @@
             class="_bk_mx-15"
             color-scheme="dark"
             stretch
-            :model-value="selected[currentItem.id]"
+            :model-value="selected[currentUnit.key]"
             :label="$t('aiAgentApprovalAccept', 'Accept')"
             @update:model-value="toggleCurrent"
           />
@@ -97,13 +104,13 @@
         </div>
 
         <div
-          v-if="!selected[currentItem.id] && showReason"
+          v-if="!selected[currentUnit.key] && 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]"
+            :value="reasons[currentUnit.key]"
             :placeholder="
   $t(
     'aiAgentBatchRewriteReasonPlaceholder',
@@ -136,9 +143,11 @@ import {
   Tooltip
 } from "#blokkli/editor/components";
 const props = defineProps({
+  currentUnit: { type: Object, required: true },
   currentItem: { type: Object, required: true },
-  currentIndex: { type: Number, required: true },
-  totalItems: { type: Number, required: true },
+  unitIndex: { type: Number, required: true },
+  totalUnits: { type: Number, required: true },
+  segmentIndex: { type: Number, required: true },
   selected: { type: Object, required: true },
   reasons: { type: Object, required: true },
   applyLabel: { type: String, required: true },
@@ -154,12 +163,12 @@ const bundleLabel = computed(() => {
   return def?.label || block.bundle;
 });
 function toggleCurrent() {
-  const item = props.currentItem;
-  emit("update:selected", item.id, !props.selected[item.id]);
+  const key = props.currentUnit.key;
+  emit("update:selected", key, !props.selected[key]);
 }
 function onReasonInput(event) {
   const value = event.target.value;
-  emit("update:reasons", props.currentItem.id, value);
+  emit("update:reasons", props.currentUnit.key, value);
 }
 </script>
 

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

@@ -1,10 +1,20 @@
-import type { ApprovalItem } from '../types.js';
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
+    currentUnit: ApprovalUnit;
     currentItem: ApprovalItem;
-    currentIndex: number;
-    totalItems: number;
-    selected: Record<number, boolean>;
-    reasons: Record<number, string>;
+    /**
+     * 1-based position of the current unit across the whole batch — a single
+     * progress count that includes per-chunk units for segmented fields.
+     */
+    unitIndex: number;
+    totalUnits: number;
+    /**
+     * 1-based segment index within the current field. 0 when the current unit
+     * is whole-field (the segment chip is hidden in that case).
+     */
+    segmentIndex: number;
+    selected: Record<string, boolean>;
+    reasons: Record<string, string>;
     applyLabel: string;
     /**
      * Whether to show the rejection reason input.
@@ -15,8 +25,8 @@ type __VLS_Props = {
     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;
+    "update:selected": (key: string, value: boolean) => void;
+    "update:reasons": (key: string, value: string) => void;
     cancel: () => void;
     apply: () => void;
     prev: () => void;
@@ -24,8 +34,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, 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;
+    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -2,14 +2,14 @@ import type { ApprovalItem } from './types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
     /**
-     * Whether to show the per-item rejection reason input.
+     * Whether to show the per-unit 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
+     * Render new values entirely as insertions (<ins>) instead of a diff
      * against the original.
      *
      * For features like translation the new text bears little resemblance to the
@@ -21,14 +21,22 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;
     apply: (data: {
-        selected: Record<number, boolean>;
-        reasons: Record<number, string>;
+        /**
+         * Acceptance keyed by unit. For unsegmented items the key is the
+         * stringified item id; for segmented items it's `${itemId}:${segmentId}`.
+         */
+        selected: Record<string, boolean>;
+        reasons: Record<string, string>;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: ((data: {
-        selected: Record<number, boolean>;
-        reasons: Record<number, string>;
+        /**
+         * Acceptance keyed by unit. For unsegmented items the key is the
+         * stringified item id; for segmented items it's `${itemId}:${segmentId}`.
+         */
+        selected: Record<string, boolean>;
+        reasons: Record<string, string>;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;