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

package/dist/modules/charts/runtime/components/ChartRenderer/index.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, useAppConfig } from "#imports";
+import { computed, inject, ref, useBlokkliRuntimeConfig } from "#imports";
 import { applyFootnotes, SUPERSCRIPTS } from "../../helpers";
 import { detectDateFormat, formatDateCategory } from "../../helpers/dateFormat";
 import { INJECT_CHART_PREVIEW_DYNAMIC_DATA } from "../../helpers/previewInjection";
@@ -55,17 +55,12 @@ const props = defineProps({
   dynamicData: { type: [Object, null], required: false }
 });
 const isEditing = inject(INJECT_IS_EDITING, false);
-const appConfig = useAppConfig();
+const { resolveColorHex, colorPalette } = useBlokkliRuntimeConfig();
 const providerEntity = inject(INJECT_PROVIDER_CONTEXT, null);
 const previewDynamicData = inject(INJECT_CHART_PREVIEW_DYNAMIC_DATA, null);
 const currentLanguage = computed(
   () => props.languageOverride ?? providerEntity?.value.language ?? ""
 );
-const colorPalette = computed(() => {
-  const map = appConfig.blokkli?.colorOptions;
-  if (!map) return [];
-  return Object.keys(map).map((id) => ({ id, hex: map[id] }));
-});
 const hasDynamicSource = computed(() => !!props.dataSource);
 const effectiveDynamicPayload = computed(() => {
   if (props.dynamicData !== void 0 && props.dynamicData !== null) {
@@ -80,17 +75,17 @@ const effectiveData = computed(() => {
     const overrides = props.dataSource?.seriesOverrides ?? {};
     const categoryOverrides = props.dataSource?.categoryColorOverrides ?? {};
     const palette = colorPalette.value;
-    const fallback = palette[0]?.id ?? "";
+    const fallback = palette[0] ?? "";
     const visibleSeries = payload.series.filter(
       (s) => overrides[s.name]?.hidden !== true
     );
     const series = visibleSeries.map((s, i) => ({
       name: s.name,
-      color: overrides[s.name]?.color ?? palette[i % Math.max(palette.length, 1)]?.id ?? fallback,
+      color: overrides[s.name]?.color ?? palette[i % Math.max(palette.length, 1)] ?? fallback,
       data: s.data
     }));
     const categoryColors = payload.categories.map((label, i) => {
-      return categoryOverrides[label] ?? palette[i % Math.max(palette.length, 1)]?.id ?? fallback;
+      return categoryOverrides[label] ?? palette[i % Math.max(palette.length, 1)] ?? fallback;
     });
     return {
       categories: payload.categories,
@@ -159,10 +154,6 @@ function superscriptFor(n) {
   }
   return String(n).split("").map((d) => SUPERSCRIPTS[d] || d).join("");
 }
-function resolveHex(id) {
-  const map = appConfig.blokkli?.colorOptions;
-  return map?.[id] || "#888888";
-}
 const typeComponent = computed(
   () => chartTypeComponents[props.type]
 );
@@ -176,8 +167,8 @@ const renderProps = computed(() => {
       name: applyFootnotes(s.name),
       data: s.data
     })),
-    seriesHexColors: data.series.map((s) => resolveHex(s.color)),
-    categoryHexColors: data.categoryColors.map(resolveHex),
+    seriesHexColors: data.series.map((s) => resolveColorHex(s.color)),
+    categoryHexColors: data.categoryColors.map(resolveColorHex),
     typeOptions: props.typeOptions ?? {},
     numberFormat: resolvedNumberFormat.value,
     isEditing,

package/dist/modules/charts/runtime/features/charts/Editor/ColorDropdown/index.vue

@@ -1,84 +1,14 @@
 <template>
-  <Dropdown position="top-left" button-class="bk-chart-color-dropdown-button">
-    <template #button>
-      <span
-        class="bk-chart-color-swatch bk-chart-data-table-input"
-        :style="{ backgroundColor: displayColor }"
-      />
-    </template>
-    <template #default="{ close }">
-      <DropdownItem
-        v-for="entry in colorOptions"
-        :key="entry.id"
-        :text="entry.label"
-        @click="
-  () => {
-    emit('select', entry.id);
-    close();
-  }
-"
-      >
-        <span
-          class="bk-chart-color-swatch"
-          :style="{ backgroundColor: entry.hex }"
-        />
-      </DropdownItem>
-    </template>
-  </Dropdown>
+  <ColorDropdown
+    :model-value="colorId"
+    @update:model-value="$emit('select', $event)"
+  />
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Dropdown, DropdownItem } from "#blokkli/editor/components";
-const props = defineProps({
+import { ColorDropdown } from "#blokkli/editor/components";
+defineProps({
   colorId: { type: String, required: true }
 });
-const emit = defineEmits(["select"]);
-const { config } = useBlokkli();
-const colorOptions = computed(() => config.colorOptions.value);
-const displayColor = computed(() => config.getColorHex(props.colorId));
+defineEmits(["select"]);
 </script>
-
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
-.bk .bk-chart-color-dropdown-button {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-}
-:is(.bk .bk-chart-color-dropdown-button):hover .bk-chart-color-swatch {
-  outline-style: var(--bk-tw-outline-style);
-  outline-width: 2px;
-  outline-offset: calc(2px * -1);
-  outline-color: rgb(var(--bk-theme-mono-100) / 1);
-}
-@supports (color: color-mix(in lab, red, red)) {
-  :is(.bk .bk-chart-color-dropdown-button):hover .bk-chart-color-swatch {
-    outline-color: color-mix(in oklab, rgb(var(--bk-theme-mono-100) / 1) 40%, transparent);
-  }
-}
-:is(:is(.bk .bk-chart-color-dropdown-button):hover .bk-chart-color-swatch):before {
-  opacity: 80%;
-}
-.bk .bk-chart-color-swatch {
-  position: relative;
-  display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: calc(infinity * 1px);
-}
-:is(.bk .bk-chart-color-swatch):before {
-  content: '';
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  border-radius: calc(infinity * 1px);
-  border-style: var(--bk-tw-border-style);
-  border-width: 1px;
-  border-color: rgb(var(--bk-theme-mono-900) / 1);
-  opacity: 40%;
-}
-</style>

package/dist/modules/charts/runtime/features/charts/Editor/CsvImport/csvHelpers.d.ts

@@ -1,4 +1,4 @@
-import type { ColorOption } from '#blokkli/editor/types/config';
+import type { ColorOption } from '#blokkli/types/colors';
 import type { ChartSeries } from '../../../../types.js';
 export type CsvGrid = string[][];
 export type ColumnRole = 'category' | 'series' | 'value' | 'groupBy' | 'ignore';

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.d.ts

@@ -1,5 +1,5 @@
 import type { BlokkliChartData, ChartSeries, ChartType } from '../../../types.js';
-import type { ColorOption } from '#blokkli/editor/types/config';
+import type { ColorOption } from '#blokkli/types/colors';
 export declare function useChartEditorState(initial: BlokkliChartData, options: ColorOption[]): {
     data: any;
     canUndo: any;

package/dist/modules/charts/runtime/helpers/index.d.ts

@@ -1,5 +1,5 @@
 import type { BlokkliChartData } from '../types.js';
-import type { ColorOption } from '#blokkli/editor/types/config';
+import type { ColorOption } from '#blokkli/types/colors';
 export declare const SUPERSCRIPTS: Record<string, string>;
 /**
  * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
@@ -11,6 +11,7 @@ export declare function applyFootnotes(text: string): string;
 export declare function getFirstColorId(options: ColorOption[]): string;
 /**
  * Get a color ID for the given index, cycling through available colors.
+ * Always returns the canonical form (`<base>.<mainShade>` for ramps).
  */
 export declare function getColorIdAtIndex(index: number, options: ColorOption[]): string;
 export declare function getDefaultChartData(options: ColorOption[]): BlokkliChartData;

package/dist/modules/charts/runtime/helpers/index.js

@@ -1,3 +1,4 @@
+import { canonicalColorId } from "#blokkli/helpers/colors";
 import { detectDateFormat } from "./dateFormat.js";
 export const SUPERSCRIPTS = {
   "1": "\xB9",
@@ -18,11 +19,12 @@ export function applyFootnotes(text) {
   );
 }
 export function getFirstColorId(options) {
-  return options[0]?.id || "";
+  return options[0] ? canonicalColorId(options[0]) : "";
 }
 export function getColorIdAtIndex(index, options) {
   if (options.length === 0) return "";
-  return options[index % options.length]?.id || options[0]?.id || "";
+  const option = options[index % options.length] ?? options[0];
+  return canonicalColorId(option);
 }
 export function getDefaultChartData(options) {
   return {

package/dist/modules/drupal/graphql/base/fragment.paragraphsBlokkliMutationResult.graphql

@@ -4,4 +4,7 @@ fragment paragraphsBlokkliMutationResult on ParagraphsBlokkliMutationResult {
   state {
     ...paragraphsBlokkliEditState
   }
+  violations {
+    ...paragraphsBlokkliViolation
+  }
 }

package/dist/modules/drupal/runtime/adapter/index.js

@@ -178,7 +178,7 @@ export default defineBlokkliEditAdapter(
           },
           {}
         ),
-        entityTypeConfig: v.data.entityTypeConfig
+        entityTypeConfig: v.data.entityTypeConfig ?? []
       };
     });
     const entityTypeConfigMap = /* @__PURE__ */ new Map();
@@ -336,7 +336,8 @@ export default defineBlokkliEditAdapter(
       return {
         success: !!action?.success,
         state: action?.state,
-        errors: (action?.errors ?? []).filter(falsy)
+        errors: (action?.errors ?? []).filter(falsy),
+        violations: action?.violations ?? []
       };
     };
     const mapImportSummary = (summary) => {
@@ -1510,7 +1511,7 @@ export default defineBlokkliEditAdapter(
           host: hostInput()
         }).then((v) => mapConversation(v.data.conversation)),
         list: () => useGraphqlQuery("pbAgentConversations", { host: hostInput() }).then(
-          (v) => v.data.result.items
+          (v) => v.data.result?.items ?? []
         ),
         delete: (uuid) => useGraphqlMutation("pbAgentConversationDelete", { uuid }).then(
           (v) => v.data.result.success
@@ -1526,33 +1527,43 @@ export default defineBlokkliEditAdapter(
       }
       if (hasQuery("pbAgentConversationsAll")) {
         adapter.agentConversations.queryConversations = (e) => useGraphqlQuery("pbAgentConversationsAll", { page: e.page }).then(
-          (v) => ({
-            filters: mapPluginConfigInputs(v.data.result.filters),
-            items: v.data.result.items.map((c) => ({
-              uuid: c.uuid,
-              title: c.title,
-              createdAt: c.createdAt,
-              updatedAt: c.updatedAt,
-              host: c.host ? {
-                entityType: c.host.entityType,
-                entityUuid: c.host.entityUuid,
-                label: c.host.label ?? null,
-                editUrl: c.host.editUrl ?? null
-              } : null,
-              author: mapBlokkliUser(c.author)
-            })),
-            perPage: v.data.result.perPage,
-            total: v.data.result.total
-          })
+          (v) => {
+            if (!v.data.result) {
+              throw new Error("Failed to load agent conversations.");
+            }
+            return {
+              filters: mapPluginConfigInputs(v.data.result.filters),
+              items: v.data.result.items.map((c) => ({
+                uuid: c.uuid,
+                title: c.title,
+                createdAt: c.createdAt,
+                updatedAt: c.updatedAt,
+                host: c.host ? {
+                  entityType: c.host.entityType,
+                  entityUuid: c.host.entityUuid,
+                  label: c.host.label ?? null,
+                  editUrl: c.host.editUrl ?? null
+                } : null,
+                author: mapBlokkliUser(c.author)
+              })),
+              perPage: v.data.result.perPage,
+              total: v.data.result.total
+            };
+          }
         );
       }
       if (hasQuery("pbAgentFeedbackAll")) {
-        adapter.agentConversations.queryFeedback = (e) => useGraphqlQuery("pbAgentFeedbackAll", { page: e.page }).then((v) => ({
-          filters: mapPluginConfigInputs(v.data.result.filters),
-          items: v.data.result.items.map(mapFeedback),
-          perPage: v.data.result.perPage,
-          total: v.data.result.total
-        }));
+        adapter.agentConversations.queryFeedback = (e) => useGraphqlQuery("pbAgentFeedbackAll", { page: e.page }).then((v) => {
+          if (!v.data.result) {
+            throw new Error("Failed to load agent feedback.");
+          }
+          return {
+            filters: mapPluginConfigInputs(v.data.result.filters),
+            items: v.data.result.items.map(mapFeedback),
+            perPage: v.data.result.perPage,
+            total: v.data.result.total
+          };
+        });
       }
     }
     if (hasMutation("pbBulkUpdateFieldValues")) {

package/dist/runtime/composables/useBlokkliRuntimeConfig.d.ts

@@ -0,0 +1,50 @@
+import { type ComputedRef } from '#imports';
+type UseBlokkliRuntimeConfig = {
+    /**
+     * Resolve a canonical color id to its current hex.
+     *
+     * Reads `app.config.blokkli.colorOptions` first; if the id is missing,
+     * disabled (null override on the id itself or its `<base>`), or null
+     * /undefined to begin with, cascades through `colorPalette` in order
+     * and returns the first that resolves. Falls back to `FALLBACK_HEX`
+     * only when every palette entry is also gone.
+     */
+    resolveColorHex: (id: string | null | undefined) => string;
+    /**
+     * Ordered canonical color ids with disabled entries already filtered
+     * out — a `<base>: null` family-disable drops `<base>.<mainShade>`,
+     * a direct `<id>: null` drops that id. Cycle through this for default
+     * color assignment (e.g. dynamic chart series).
+     */
+    colorPalette: ComputedRef<string[]>;
+};
+/**
+ * Runtime-only config surface for userland and integrator components
+ * (chart renderers, custom blocks, …) outside the editor.
+ *
+ * Sources:
+ *   - `app.config.blokkli.colorOptions` — flat `Record<canonicalId, string | null>`
+ *     seeded by the module with every canonical id (bare for flat colors,
+ *     `<base>.<shade>` for ramped colors) at its build-time hex. `null`
+ *     disables. The bare `<base>` is kept for ramped colors so userland
+ *     can family-disable with `<base>: null`. This is the user-overridable
+ *     surface — `updateAppConfig` deep-merges into it.
+ *   - `#blokkli-build/config` → `colorPalette` — ordered canonical ids
+ *     (one per declared family — flat ids verbatim, ramped ids as
+ *     `<base>.<mainShade>`). Build-time static data, NOT in appConfig
+ *     because it's not userland-overridable. Used as the cascading
+ *     fallback for unresolved ids.
+ *
+ * Returns:
+ *   - `resolveColorHex(id)` — flat lookup. If the requested id is missing
+ *     or disabled, cascade through the enabled palette in order and return
+ *     the first one that resolves. If even that yields nothing, return
+ *     `FALLBACK_HEX`.
+ *   - `colorPalette` — computed ordered canonical ids with disabled
+ *     entries already filtered out (a `<base>: null` family-disable drops
+ *     `<base>.<mainShade>`; a direct `<id>: null` drops that id). Userland
+ *     can cycle through this directly to assign default colors — no need
+ *     to second-guess which ids are still live.
+ */
+export declare function useBlokkliRuntimeConfig(): UseBlokkliRuntimeConfig;
+export {};

package/dist/runtime/composables/useBlokkliRuntimeConfig.js

@@ -0,0 +1,34 @@
+import { computed, useAppConfig } from "#imports";
+import { colorPalette as canonicalPalette } from "#blokkli-build/config";
+import { FALLBACK_HEX } from "../helpers/colors.js";
+export function useBlokkliRuntimeConfig() {
+  const appConfig = useAppConfig();
+  const overrides = computed(
+    () => appConfig.blokkli?.colorOptions ?? {}
+  );
+  function lookup(lookupId) {
+    const map = overrides.value;
+    const dotIndex = lookupId.indexOf(".");
+    if (dotIndex !== -1) {
+      const baseId = lookupId.slice(0, dotIndex);
+      if (map[baseId] === null) return void 0;
+    }
+    const value = map[lookupId];
+    return typeof value === "string" ? value : void 0;
+  }
+  const colorPalette = computed(
+    () => canonicalPalette.filter((id) => lookup(id) !== void 0)
+  );
+  function resolveColorHex(id) {
+    if (id) {
+      const direct = lookup(id);
+      if (direct !== void 0) return direct;
+    }
+    for (const fallbackId of colorPalette.value) {
+      const hex = lookup(fallbackId);
+      if (hex !== void 0) return hex;
+    }
+    return FALLBACK_HEX;
+  }
+  return { resolveColorHex, colorPalette };
+}

package/dist/runtime/editor/adapter/index.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue';
 import type { AddNewBlockEvent, AddNewBlocksEvent, MoveBlockEvent, MoveMultipleBlocksEvent } from '../events/index.js';
 import type { PluginConfigInput } from '../types/pluginConfig.js';
-import type { EntityTranslation, MappedState } from '../types/state.js';
+import type { EntityTranslation, MappedState, Validation } from '../types/state.js';
 import type { BlockBundleDefinition, EntityTypeBundleInfo, EntityTypeInfo, FieldConfig } from '../types/definitions.js';
 import type { EditBlockEvent } from '../features/edit/types.js';
 import type { UserPermissions } from '../types/permissions.js';
@@ -10,6 +10,7 @@ export interface MutationResponseLike<T> {
     success: boolean;
     state?: T;
     errors?: string[];
+    violations?: Validation[];
 }
 export interface GenericAdapterResponse<T> {
     success: boolean;

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    buttonClass?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    displayColor: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,116 @@
+<template>
+  <Dropdown
+    position="top-left"
+    :button-class="
+  buttonClass ?? '_bk_size-40 _bk_flex _bk_items-center _bk_justify-center _bk_group'
+"
+  >
+    <template #button>
+      <slot :display-color>
+        <span
+          class="_bk_rounded-full _bk_block _bk_size-20 _bk_relative _bk_group-hover:outline-2 _bk_group-hover:outline-mono-100/40 _bk_group-hover:-outline-offset-2 _bk_group-hover:before:opacity-80"
+          :style="{ backgroundColor: displayColor }"
+        />
+      </slot>
+    </template>
+    <div
+      v-if="hasAnyShades"
+      class="_bk_p-5 _bk_flex _bk_flex-wrap _bk_relative"
+      :style="{
+  maxWidth: maxShades * 40 + 10 + 'px'
+}"
+    >
+      <div
+        v-for="row in colorRows"
+        :key="row.entryId"
+        class="_bk_flex _bk_items-center"
+      >
+        <button
+          v-for="item in row.items"
+          :key="item.colorId"
+          type="button"
+          class="_bk_group/tooltip _bk_flex _bk_border-none _bk_bg-transparent _bk_cursor-pointer _bk_size-40 _bk_items-center _bk_justify-center _bk_group"
+          @click="selectedId = item.colorId"
+        >
+          <span
+            class="_bk_rounded-full _bk_block _bk_relative _bk_outline-2 _bk_outline-offset-2 _bk_outline-transparent _bk_size-30"
+            :class="[
+  item.isMain && [
+    '_bk_before:content-empty _bk_before:absolute _bk_before:size-8 _bk_before:rounded-full _bk_before:left-1/2 _bk_before:top-1/2 _bk_before:-translate-x-1/2 _bk_before:-translate-y-1/2',
+    item.isLightBg ? '_bk_before:bg-black' : '_bk_before:bg-white'
+  ],
+  isSelected(item.colorId) ? '_bk_outline-mono-900!' : '_bk_group-hover:outline-mono-300'
+]"
+            :style="{ backgroundColor: item.hex }"
+          />
+          <Tooltip :label="item.label" placement="above-left" small />
+        </button>
+      </div>
+    </div>
+    <template v-else>
+      <DropdownItem
+        v-for="entry in colorOptions"
+        :key="entry.id"
+        :text="entry.label"
+        :class="{ '_bk_bg-mono-100 _bk_text-mono-950': isSelected(entry.id) }"
+        @click="selectedId = entry.id"
+      >
+        <span
+          class="_bk_rounded-full _bk_block _bk_size-20 _bk_relative"
+          :style="{ backgroundColor: entry.hex }"
+        />
+      </DropdownItem>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Dropdown, DropdownItem, Tooltip } from "#blokkli/editor/components";
+import { isLightHex } from "#blokkli/editor/helpers/color";
+defineProps({
+  buttonClass: { type: String, required: false }
+});
+const selectedId = defineModel({ type: String, ...{
+  default: ""
+} });
+const { config, $t } = useBlokkli();
+const colorOptions = computed(() => config.colorOptions.value);
+const hasAnyShades = computed(
+  () => colorOptions.value.some((entry) => entry.shades?.length)
+);
+const displayColor = computed(() => config.getColorHex(selectedId.value));
+const colorRows = computed(
+  () => colorOptions.value.map((entry) => ({
+    entryId: entry.id,
+    items: entry.shades?.length ? entry.shades.map((shade) => ({
+      // Always emit the shade-qualified form for ramped colors — the
+      // bare base id is never emitted from this component, so consumers
+      // can compare ids with naive string equality without knowing
+      // which shade was declared as the family's main.
+      colorId: `${entry.id}.${shade.id}`,
+      label: shade.isMain ? `${entry.label} ${shade.id} (${$t("mainColor", "main color")})` : `${entry.label} ${shade.id}`,
+      hex: shade.hex,
+      isMain: !!shade.isMain,
+      isLightBg: isLightHex(shade.hex)
+    })) : [
+      {
+        colorId: entry.id,
+        label: entry.label,
+        hex: entry.hex,
+        isMain: false,
+        isLightBg: isLightHex(entry.hex)
+      }
+    ]
+  })).sort((a, b) => b.items.length - a.items.length)
+);
+const maxShades = computed(
+  () => colorOptions.value.reduce(
+    (max, entry) => Math.max(max, entry.shades?.length ?? 0),
+    0
+  )
+);
+function isSelected(id) {
+  return selectedId.value === id;
+}
+</script>

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    buttonClass?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    displayColor: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.d.vue.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;