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

package/dist/modules/agent/runtime/app/tools/helpers.d.ts

@@ -77,8 +77,14 @@ export declare function resolveHost(app: BlokkliApp, uuid: string): {
  */
 export declare function getResolvedOptions(app: BlokkliApp, bundleOrBlock: Parameters<BlokkliApp['definitions']['getBlockDefinition']>[0], fieldListType: Parameters<BlokkliApp['definitions']['getBlockDefinition']>[1], parentBundle: Parameters<BlokkliApp['definitions']['getBlockDefinition']>[2]): OptionItem[] | null;
 /**
- * Read every editable content field of a block (or entity), skipping fields
- * with no resolvable type. Callers map the result into their own output shape.
+ * Read every editable content field of a block (or entity), skipping `table`
+ * fields (no text payload). Iterates the declared `editableFieldConfig` rather
+ * than the runtime `v-blokkli-editable` directive registry — the former is the
+ * canonical declaration (it sees fields exposed via `propsFieldMapping` even
+ * when no directive is present in the template), while the latter only sees
+ * fields whose template marks them with the directive. `fieldValue.readValue`
+ * already knows how to resolve a value through `propsFieldMapping`, so this
+ * one swap surfaces all editable fields to every caller.
  */
 export declare function readBlockContentFields(app: BlokkliApp, uuid: string, entityType: string, bundle: string): Array<{
     fieldName: string;

package/dist/modules/agent/runtime/app/tools/helpers.js

@@ -257,21 +257,21 @@ export function getResolvedOptions(app, bundleOrBlock, fieldListType, parentBund
 }
 export function readBlockContentFields(app, uuid, entityType, bundle) {
   const result = [];
-  for (const editable of app.directive.getEditablesForBlock(uuid)) {
-    const fieldType = app.fieldValue.resolveFieldType(
-      entityType,
-      bundle,
-      editable.fieldName
-    );
-    if (!fieldType) continue;
+  const configs = app.types.editableFieldConfig.forEntityTypeAndBundle(
+    entityType,
+    bundle
+  );
+  for (const cfg of configs) {
+    if (cfg.type === "table") continue;
+    const fieldType = cfg.type === "frame" || cfg.type === "markup" ? "markup" : "plain";
     const value = app.fieldValue.readValue(
       entityType,
       uuid,
       bundle,
-      editable.fieldName,
+      cfg.name,
       fieldType
     );
-    result.push({ fieldName: editable.fieldName, fieldType, value });
+    result.push({ fieldName: cfg.name, fieldType, value });
   }
   return result;
 }

package/dist/modules/agent/runtime/app/tools/schemas.d.ts

@@ -60,6 +60,18 @@ export declare const mutationResultSchema: z.ZodUnion<readonly [z.ZodObject<{
  * a single string is accepted as a fallback.
  */
 export declare function stringArrayParam(description: string): z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodArray<z.ZodString>>;
+/**
+ * Wraps an object params schema to tolerate a singular key when the schema
+ * actually expects its plural form (e.g. `uuid` → `uuids`). LLMs — especially
+ * the smaller models — frequently pick the singular form when a tool
+ * description mentions both ("one or more UUIDs"). Without this, the call
+ * fails validation and the model often retries with the same wrong key.
+ *
+ * The generated JSON Schema is unchanged (the wrapping happens via
+ * `z.preprocess`), so the model is still guided to the plural form; the
+ * singular form is silently accepted as a fallback.
+ */
+export declare function tolerantSingularKeys<T extends z.ZodType>(schema: T, aliases: Record<string, string>): z.ZodPipe<z.ZodTransform<unknown, unknown>, T>;
 /**
  * Shared schema for option values (used by add_blocks and set_block_options).
  */

package/dist/modules/agent/runtime/app/tools/schemas.js

@@ -39,6 +39,26 @@ export function stringArrayParam(description) {
     z.array(z.string()).describe(description)
   );
 }
+export function tolerantSingularKeys(schema, aliases) {
+  return z.preprocess((value) => {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      return value;
+    }
+    const obj = value;
+    const remapped = {};
+    let touched = false;
+    for (const key of Object.keys(obj)) {
+      const plural = aliases[key];
+      if (plural && !(plural in obj)) {
+        remapped[plural] = obj[key];
+        touched = true;
+      } else {
+        remapped[key] = obj[key];
+      }
+    }
+    return touched ? remapped : obj;
+  }, schema);
+}
 export const optionValueSchema = z.union([
   z.string(),
   z.boolean(),

package/dist/modules/agent/runtime/app/tools/search_media/index.js

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
 const paramsSchema = z.object({
   query: z.string().optional().describe(
-    "Search text to filter media items. Omit or leave empty to list all available media."
+    'Search text to filter media items. Searching for "foobar test" will search the exact full string, so prefer searching single for words.'
   ),
   bundle: z.string().optional().describe('Media bundle filter (e.g., "image", "video")')
 });

package/dist/modules/agent/runtime/app/tools/select_media/Component.vue

@@ -14,7 +14,7 @@
         @click="selectedId = item.mediaId"
       >
         <div
-          class="_bk_w-40 _bk_h-40 _bk_bg-mono-100 _bk_rounded _bk_overflow-hidden _bk_shrink-0 _bk_flex _bk_items-center _bk_justify-center"
+          class="_bk_size-100 _bk_bg-mono-100 _bk_rounded _bk_overflow-hidden _bk_shrink-0 _bk_flex _bk_items-center _bk_justify-center"
           :class="{
   '_bk_outline _bk_outline-accent-700 _bk_relative _bk_z-40': selectedId === item.mediaId
 }"

package/dist/modules/agent/runtime/server/agent.js

@@ -58,7 +58,6 @@ export default defineWebSocketHandler({
           case "init":
           case "accept":
           case "reject":
-          case "new_conversation":
           case "restore_conversation":
             send(peer, {
               type: "error",

package/dist/modules/agent/runtime/server/classes/Session/index.js

@@ -231,6 +231,10 @@ export class Session {
   }
   newConversation(peer, authSecret) {
     this.abortController?.abort();
+    for (const pending of this.pendingToolCalls.values()) {
+      pending.reject(new Error("Cancelled"));
+    }
+    this.pendingToolCalls.clear();
     this.history.clear();
     this.lastTools = [];
     this.lastDebugPayload = null;

package/dist/modules/agent/runtime/shared/toolResult.d.ts

@@ -89,6 +89,10 @@ export declare class ToolResult {
     /**
      * Stale form: a volatile query whose data is outdated because a mutation
      * happened after it. Pure and idempotent.
+     *
+     * Error results are preserved verbatim — a failed call isn't "stale data",
+     * it's a failure the LLM may still need to act on (e.g. fix its input and
+     * retry). Collapsing it to a generic stale summary hides the cause.
      */
     stale(): ToolResult;
 }

package/dist/modules/agent/runtime/shared/toolResult.js

@@ -145,9 +145,14 @@ export class ToolResult {
   /**
    * Stale form: a volatile query whose data is outdated because a mutation
    * happened after it. Pure and idempotent.
+   *
+   * Error results are preserved verbatim — a failed call isn't "stale data",
+   * it's a failure the LLM may still need to act on (e.g. fix its input and
+   * retry). Collapsing it to a generic stale summary hides the cause.
    */
   stale() {
     if (this.envelope.kind === "stale") return this;
+    if (this.envelope.kind === "error") return this;
     return ToolResult.fromWire(
       JSON.stringify({ stale: true, summary: this.staleSummary })
     );

package/dist/modules/drupal/graphql/features/notifications.graphql

@@ -0,0 +1,39 @@
+fragment paragraphsBlokkliNotification on ParagraphsBlokkliNotification {
+  uuid
+  type
+  read
+  created
+  title
+  message
+  relatedEntityUuid
+  user {
+    id
+    name
+    imageUrl
+  }
+  host {
+    entityType
+    entityUuid
+    entityBundle
+    label
+    url
+  }
+}
+
+query pbGetNotifications($after: String, $markAsRead: Boolean) {
+  result: pbGetNotifications(after: $after, markAsRead: $markAsRead) {
+    items {
+      ...paragraphsBlokkliNotification
+    }
+    unreadCount
+    nextCursor
+  }
+}
+
+query pbGetNotificationCount {
+  count: pbGetNotificationCount
+}
+
+mutation pbMarkNotificationsAsRead($uuids: [String!]) {
+  count: pbMarkNotificationsAsRead(uuids: $uuids)
+}

package/dist/modules/drupal/index.mjs

@@ -163,11 +163,16 @@ export declare const templateEditRouteName: string|null
     }
     addMutation("ignore_analyze");
     addMutation("unignore_analyze");
-    if (graphql.schemaHasType("CommentBlokkliNode")) {
+    if (graphql.schemaHasType("ParagraphsBlokkliComment")) {
       addGraphqlDocument("features/comments.graphql");
     } else {
       context.features.disableFeature("comments");
     }
+    if (queryFields.has("pbGetNotifications") && queryFields.has("pbGetNotificationCount") && mutationFields.has("pbMarkNotificationsAsRead")) {
+      addGraphqlDocument("features/notifications.graphql");
+    } else {
+      context.features.disableFeature("notifications");
+    }
     if (mutationFields.has("paragraphsBlokkliAgentToken")) {
       addGraphqlDocument("features/agent.graphql");
     } else {

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

@@ -13,6 +13,7 @@ import {
   useRouter
 } from "#imports";
 import { ParagraphsBlokkliRemoteVideoProvider } from "#graphql-operations";
+import { toValidNotificationType } from "#blokkli/editor/features/notifications/types";
 function mapBlokkliUser(user) {
   if (!user) {
     return null;
@@ -775,6 +776,43 @@ export default defineBlokkliEditAdapter(
         return updated;
       });
     }
+    if (hasQuery("pbGetNotifications")) {
+      adapter.loadNotifications = (options) => useGraphqlQuery("pbGetNotifications", {
+        after: options.after,
+        markAsRead: options.markAsRead
+      }).then((v) => {
+        const result = v.data.result;
+        return {
+          items: (result?.items ?? []).map((item) => ({
+            uuid: item.uuid,
+            type: toValidNotificationType(item.type),
+            read: item.read,
+            created: item.created,
+            title: item.title,
+            message: item.message ?? void 0,
+            relatedEntityUuid: item.relatedEntityUuid ?? void 0,
+            user: mapBlokkliUser(item.user),
+            host: item.host ? {
+              uuid: item.host.entityUuid,
+              entityType: item.host.entityType,
+              entityBundle: item.host.entityBundle,
+              label: item.host.label ?? "",
+              url: item.host.url ?? ""
+            } : null
+          })),
+          nextCursor: result?.nextCursor ?? null,
+          unreadCount: result?.unreadCount ?? 0
+        };
+      });
+    }
+    if (hasQuery("pbGetNotificationCount")) {
+      adapter.loadUnreadNotificationsCount = () => useGraphqlQuery("pbGetNotificationCount").then((v) => v.data.count ?? 0);
+    }
+    if (hasMutation("pbMarkNotificationsAsRead")) {
+      adapter.markAllNotificationsAsRead = () => useGraphqlMutation("pbMarkNotificationsAsRead", {
+        uuids: void 0
+      }).then((v) => v.data.count);
+    }
     if (hasQuery("pbReferencedEntities")) {
       adapter.getReferencedEntities = (uuids) => useGraphqlQuery("pbReferencedEntities", {
         ...ctx.value,

package/dist/runtime/editor/components/Actions/ItemDropdown/Item.vue

@@ -1,6 +1,5 @@
 <template>
   <button
-    :data-test="`item-dropdown-action-${action.id}`"
     class="_bk_gap-10 _bk_group/tooltip _bk_grid _bk_grid-cols-[20px_1fr] _bk_w-full _bk_text-mono-300 _bk_items-center _bk_left-left _bk_leading-none _bk_disabled:opacity-20 _bk_disabled:pointer-events-none _bk_hover:text-white _bk_hover:bg-mono-800 _bk_px-10"
     :class="{
   '_bk_hover:bg-orange-normal/10! _bk_hover:text-orange-light!': action.variant === 'agent',

package/dist/runtime/editor/components/Actions/ScrollArrow/index.d.vue.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    side: "left" | "right";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    side: "left" | "right";
+}> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,52 @@
+<template>
+  <button
+    type="button"
+    class="_bk_hidden _bk_lg:flex _bk_absolute _bk_top-1 _bk_bottom-1 _bk_z-actions _bk_w-40 _bk_cursor-pointer _bk_bg-mono-950/90 _bk_hover:bg-mono-700 _bk_items-center _bk_justify-center"
+    :class="
+  side === 'left' ? '_bk_left-0 _bk_border-r _bk_border-r-mono-700' : '_bk_right-0 _bk_border-l _bk_border-l-mono-700'
+"
+    @pointerdown="onPointerDown"
+  >
+    <Icon
+      :name="
+  side === 'left' ? 'bk_mdi_chevron_backward' : 'bk_mdi_chevron_forward'
+"
+      class="_bk_fill-current _bk_pointer-events-none _bk_size-30"
+    />
+  </button>
+</template>
+
+<script setup>
+import { onBeforeUnmount } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  side: { type: String, required: true }
+});
+const emit = defineEmits(["start", "end"]);
+let isPressed = false;
+function onRelease() {
+  if (!isPressed) {
+    return;
+  }
+  isPressed = false;
+  window.removeEventListener("pointerup", onRelease);
+  window.removeEventListener("pointercancel", onRelease);
+  emit("end");
+}
+function onPointerDown() {
+  if (isPressed) {
+    return;
+  }
+  isPressed = true;
+  window.addEventListener("pointerup", onRelease);
+  window.addEventListener("pointercancel", onRelease);
+  emit("start");
+}
+onBeforeUnmount(onRelease);
+</script>
+
+<script>
+export default {
+  name: "ActionsScrollArrow"
+};
+</script>

package/dist/runtime/editor/components/Actions/ScrollArrow/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    side: "left" | "right";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    side: "left" | "right";
+}> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -7,7 +7,6 @@
 }"
   >
     <button
-      data-test="item-actions-dropdown-toggle"
       class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent _bk_group/tooltip _bk_pl-10 _bk_pr-3 _bk_flex _bk_items-center _bk_lg:min-w-[180px] _bk_text-mono-300 _bk_font-bold _bk_h-full _bk_leading-none _bk_relative _bk_w-full _bk_cursor-pointer _bk_hover:text-mono-50 _bk_hover:bg-mono-700"
       tabindex="-1"
       :class="{
@@ -106,7 +105,7 @@
 </template>
 
 <script setup>
-import { watch, computed, useBlokkli } from "#imports";
+import { watch, computed, nextTick, useBlokkli } from "#imports";
 import { falsy } from "#blokkli/helpers";
 import {
   Icon,
@@ -147,6 +146,7 @@ async function onToggleDropdown() {
   const willOpen = !showDropdown.value;
   if (willOpen) {
     await ui.flushPendingChanges();
+    await nextTick();
   }
   showDropdown.value = willOpen;
 }

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