@blokkli/editor 2.0.0-alpha.42 → 2.0.0-alpha.44

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.42",
+  "version": "2.0.0-alpha.44",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.42";
+const version = "2.0.0-alpha.44";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -809,7 +809,7 @@ const BlokkliEditingPlugin = (nuxt) => {
         }
       },
       vite: {
-        handleHotUpdate({ file, server, modules }) {
+        handleHotUpdate({ file, server }) {
           if (file.endsWith(".vue") && !file.includes(EDITING_MARKER)) {
             const editingVariantPath = file.replace(
               /\.vue$/,
@@ -817,8 +817,7 @@ const BlokkliEditingPlugin = (nuxt) => {
             );
             const editingModule = server.moduleGraph.getModuleById(editingVariantPath);
             if (editingModule) {
-              server.moduleGraph.invalidateModule(editingModule);
-              return [...modules, editingModule];
+              server.reloadModule(editingModule);
             }
           }
         }
@@ -1417,6 +1416,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_arrow_right",
   "bk_mdi_arrow_right_alt",
   "bk_mdi_arrow_selector_tool",
+  "bk_mdi_arrow_top_left",
   "bk_mdi_arrow_upward",
   "bk_mdi_attach_file",
   "bk_mdi_bakery_dining",

package/dist/modules/agent/index.mjs

@@ -156,8 +156,12 @@ function createClientTemplate(toolCollector, promptCollector, skillsCollector, o
       );
       exports$1.push(`export const routeAgent = ${JSON.stringify(routes.agent)}`);
       exports$1.push(`export const routeFetch = ${JSON.stringify(routes.fetch)}`);
-      exports$1.push(`export const routeStream = ${JSON.stringify(routes.stream)}`);
-      exports$1.push(`export const routeRoute = ${JSON.stringify(routes.routing)}`);
+      exports$1.push(
+        `export const routeStream = ${JSON.stringify(routes.stream)}`
+      );
+      exports$1.push(
+        `export const routeRoute = ${JSON.stringify(routes.routing)}`
+      );
       exports$1.push(
         `export const toolNames = ${JSON.stringify(toolCollector.getNames())}`
       );

package/dist/modules/agent/runtime/app/composables/agentProvider.js

@@ -421,8 +421,8 @@ export default function(app, adapter, agentName) {
     const analyzersList = app.analyze.analyzers.value.filter((a) => !a.requireRawPage).map((a) => ({
       id: a.id,
       type: a.type,
-      label: typeof a.label === "function" ? a.label(context.value.language) : a.label,
-      description: typeof a.description === "function" ? a.description(context.value.language) : a.description
+      label: typeof a.label === "function" ? a.label(context.value.language, $t) : a.label,
+      description: typeof a.description === "function" ? a.description(context.value.language, $t) : a.description
     }));
     const pageContext = {
       title: state.entity.value.label || "",
@@ -644,13 +644,22 @@ export default function(app, adapter, agentName) {
           }
         }
         let resultForServer = result;
+        let skipLlmResponse;
         if (typeof result === "object" && result !== null) {
           const rec = result;
           if ("_usage" in rec && rec._usage) {
             usageTurns.value = [...usageTurns.value, rec._usage];
           }
-          if ("_details" in rec || "_usage" in rec) {
-            const { _details: _, _usage: __, ...rest } = rec;
+          if (rec._skipLlmResponse === true) {
+            skipLlmResponse = true;
+          }
+          if ("_details" in rec || "_usage" in rec || "_skipLlmResponse" in rec) {
+            const {
+              _details: _,
+              _usage: __,
+              _skipLlmResponse: ___,
+              ...rest
+            } = rec;
             resultForServer = rest;
           }
         }
@@ -669,7 +678,8 @@ export default function(app, adapter, agentName) {
         send({
           type: "tool_result",
           callId,
-          result: resultForServer
+          result: resultForServer,
+          skipLlmResponse
         });
       }
     } catch (error) {
@@ -701,6 +711,10 @@ export default function(app, adapter, agentName) {
   }
   async function runToolForPrompt(toolName, params) {
     const ctx = createToolContext();
+    if (!Object.keys(toolMap).length) {
+      const resolved = await resolveTools(mcpTools, ctx);
+      toolMap = createToolMap(resolved);
+    }
     const toolDef = getToolDefinition(toolMap, toolName);
     const rawResult = await executeTool(toolMap, toolName, ctx, params);
     const label = isQueryResult(rawResult) ? rawResult.label : toolDef.label($t);
@@ -830,9 +844,15 @@ export default function(app, adapter, agentName) {
     if (!activeConversationId.value) {
       activeConversationId.value = generateUUID();
     }
-    const isFirstMessage = !conversation.value.some(
-      (item2) => item2.type === "user"
-    );
+    conversation.value.push({
+      type: "user",
+      id: generateId(),
+      content: displayPrompt ?? prompt,
+      timestamp: Date.now(),
+      attachments: attachments?.length ? attachments : void 0
+    });
+    isThinking.value = true;
+    const isFirstMessage = conversation.value.filter((v) => v.type === "user").length === 1;
     const hasClientDirectives = !!(autoLoadTools?.length || autoLoadSkills?.length);
     let resolvedAutoLoadTools = autoLoadTools;
     let resolvedAutoLoadSkills = autoLoadSkills;
@@ -867,17 +887,6 @@ export default function(app, adapter, agentName) {
       } catch {
       }
     }
-    const item = {
-      type: "user",
-      id: generateId(),
-      content: displayPrompt ?? prompt,
-      timestamp: Date.now()
-    };
-    if (attachments?.length) {
-      ;
-      item.attachments = attachments;
-    }
-    conversation.value.push(item);
     const serverPreSeeded = preSeededResults?.length ? preSeededResults.map(({ toolName, params, result }) => ({
       toolName,
       params,

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

@@ -42,6 +42,7 @@ export default defineBlokkliAgentTool({
       let worstLevel = "good";
       let worstScore = 0;
       for (const chunk of chunks) {
+        if (chunk.band === null || chunk.score === null) continue;
         const level = bandToLevel(chunk.band);
         if (level === "hard" || level === "ok" && worstLevel === "good") {
           worstLevel = level;

package/dist/modules/agent/runtime/app/tools/delegate_text_rewrite/Component.d.vue.ts

@@ -27,6 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     } & {
         _details?: StreamTextFieldsDetailItem[];
         _usage?: UsageTurn;
+        _skipLlmResponse?: boolean;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDone?: ((result: {
@@ -40,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     } & {
         _details?: StreamTextFieldsDetailItem[];
         _usage?: UsageTurn;
+        _skipLlmResponse?: boolean;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -214,10 +214,13 @@ async function analyzeReadability() {
     const analysisKey = fs.uuid + "/" + fs.fieldName;
     const fieldResult = rawAnalysis[analysisKey];
     const chunks = fieldResult?.chunks ?? [];
-    const issues = chunks.filter((c) => c.band === "hard").map((c) => ({ text: c.text, impact: c.impact, score: c.score }));
+    const issues = chunks.filter(
+      (c) => c.score !== null && (c.band === "hard" || c.band === "ok")
+    ).map((c) => ({ text: c.text, impact: c.impact, score: c.score }));
     let worstBandValue = -1;
     let worstScore;
     for (const chunk of chunks) {
+      if (chunk.band === null || chunk.score === null) continue;
       const value = bandOrder[chunk.band] ?? 0;
       if (value > worstBandValue) {
         worstBandValue = value;
@@ -447,7 +450,7 @@ async function readabilityRetryLoop(authToken) {
         score,
         issues
       };
-      if (level === "hard") {
+      if (level === "hard" || level === "ok") {
         failing.push(check);
       } else {
         passing.push(check);
@@ -703,7 +706,8 @@ The user rejected ${fieldList} without a reason. Use the ask_question tool to pr
     agentMessage,
     historyIndex: state.currentMutationIndex.value,
     _details,
-    _usage: streamUsage.value
+    _usage: streamUsage.value,
+    _skipLlmResponse: rejectedItems.length === 0
   });
 }
 async function _rejectAll() {

package/dist/modules/agent/runtime/app/tools/delegate_text_rewrite/Component.vue.d.ts

@@ -27,6 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     } & {
         _details?: StreamTextFieldsDetailItem[];
         _usage?: UsageTurn;
+        _skipLlmResponse?: boolean;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDone?: ((result: {
@@ -40,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     } & {
         _details?: StreamTextFieldsDetailItem[];
         _usage?: UsageTurn;
+        _skipLlmResponse?: boolean;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -7,14 +7,16 @@ function mapAnalysisToResult(analysis) {
     if (slashIndex === -1) continue;
     const uuid = key.slice(0, slashIndex);
     const fieldName = key.slice(slashIndex + 1);
-    const hardChunks = fieldResult.chunks.filter((c) => c.band === "hard");
-    if (hardChunks.length === 0) continue;
+    const issueChunks = fieldResult.chunks.filter(
+      (c) => c.score !== null && (c.band === "hard" || c.band === "ok")
+    );
+    if (issueChunks.length === 0) continue;
     if (!result[uuid]) {
       result[uuid] = {};
     }
     result[uuid][fieldName] = {
       fieldValue: fieldResult.rawValue || void 0,
-      issues: hardChunks.map((c) => ({
+      issues: issueChunks.map((c) => ({
         text: c.text,
         impact: c.impact,
         score: c.score

package/dist/modules/agent/runtime/server/Session.d.ts

@@ -7,6 +7,7 @@ export declare class Session {
         resolve: (result: {
             result: unknown;
             error?: string;
+            skipLlmResponse?: boolean;
         }) => void;
         reject: (error: Error) => void;
     }>;
@@ -67,6 +68,7 @@ export declare class Session {
     resolveToolResult(callId: string, result: {
         result: unknown;
         error?: string;
+        skipLlmResponse?: boolean;
     }): void;
     cancel(peer: Peer): void;
     acceptChanges(peer: Peer, authSecret: string): void;

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

@@ -403,7 +403,10 @@ ${skill.content}`
         });
       }
     }
+    let allAutoToolsSkipLlm = false;
     if (autoExecuteTools?.length) {
+      let hasErrors = false;
+      let allSkip = true;
       for (let i = 0; i < autoExecuteTools.length; i++) {
         const autoTool = autoExecuteTools[i];
         const callId = `auto_${i}`;
@@ -428,6 +431,8 @@ ${skill.content}`
             ]
           });
           if (clientResult.error) {
+            hasErrors = true;
+            allSkip = false;
             this.messages.push({
               role: "user",
               content: [
@@ -440,6 +445,9 @@ ${skill.content}`
               ]
             });
           } else {
+            if (!clientResult.skipLlmResponse) {
+              allSkip = false;
+            }
             let resultForLLM = clientResult.result;
             if (typeof resultForLLM === "object" && resultForLLM !== null && "agentMessage" in resultForLLM) {
               const { agentMessage, ...rest } = resultForLLM;
@@ -457,6 +465,8 @@ ${skill.content}`
             });
           }
         } catch {
+          hasErrors = true;
+          allSkip = false;
           this.messages.push({
             role: "assistant",
             content: [
@@ -483,6 +493,13 @@ ${skill.content}`
           });
         }
       }
+      allAutoToolsSkipLlm = allSkip && !hasErrors;
+    }
+    if (allAutoToolsSkipLlm) {
+      send(peer, { type: "done" });
+      this.sendConversationState(peer, authSecret);
+      this.isProcessing = false;
+      return;
     }
     this.abortController = new AbortController();
     this.isProcessing = true;

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

@@ -96,7 +96,8 @@ export default defineWebSocketHandler({
         case "tool_result":
           session.resolveToolResult(data.callId, {
             result: data.result,
-            error: data.error
+            error: data.error,
+            skipLlmResponse: data.skipLlmResponse
           });
           break;
         case "cancel":

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

@@ -423,6 +423,7 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     callId: z.ZodString;
     result: z.ZodUnknown;
     error: z.ZodOptional<z.ZodString>;
+    skipLlmResponse: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"cancel">;
 }, z.core.$strip>, z.ZodObject<{

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

@@ -163,7 +163,8 @@ export const clientMessageSchema = z.discriminatedUnion("type", [
     type: z.literal("tool_result"),
     callId: z.string(),
     result: z.unknown(),
-    error: z.string().optional()
+    error: z.string().optional(),
+    skipLlmResponse: z.boolean().optional()
   }),
   z.object({ type: z.literal("cancel") }),
   z.object({ type: z.literal("accept") }),

package/dist/runtime/components/BlokkliProvider.vue

@@ -6,8 +6,8 @@
     :data-provider-entity-bundle="entityBundle"
     :data-blokkli-provider-active="isInEditor ? 'true' : 'false'"
   >
-    <BlokkliRootErrorBoundary v-if="isInEditor">
-      <ClientOnly>
+    <ClientOnly v-if="isInEditor">
+      <BlokkliRootErrorBoundary>
         <PreviewProvider
           v-if="isPreviewing"
           v-slot="{ mutatedEntity }"
@@ -45,8 +45,8 @@
             :entity="mutatedEntity"
           />
         </EditProvider>
-      </ClientOnly>
-    </BlokkliRootErrorBoundary>
+      </BlokkliRootErrorBoundary>
+    </ClientOnly>
 
     <slot
       v-else
@@ -100,24 +100,25 @@ const props = defineProps({
   entity: { type: null, required: false, default: void 0 }
 });
 defineSlots();
+const isClient = import.meta.client;
 const providerEl = useTemplateRef("providerEl");
-const PreviewProvider = defineAsyncComponent(
+const PreviewProvider = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/PreviewProvider.vue")
-);
-const EditProvider = defineAsyncComponent(
+) : null;
+const EditProvider = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/EditProvider.vue")
-);
-const BlokkliRootErrorBoundary = defineAsyncComponent(
+) : null;
+const BlokkliRootErrorBoundary = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/BlokkliRootErrorBoundary.vue")
-);
-const EditIndicator = defineAsyncComponent(
+) : "div";
+const EditIndicator = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/EditIndicator.vue")
-);
+) : "div";
 const route = useRoute();
 const router = useRouter();
 const shouldRender = ref(false);
 const isInEditor = computed(
-  () => !!props.entityUuid && !!props.entityType && !!props.entityBundle && (isPreviewing.value || isEditing.value)
+  () => isClient && !!props.entityUuid && !!props.entityType && !!props.entityBundle && (isPreviewing.value || isEditing.value)
 );
 const canEdit = computed(() => props.permissions.includes("edit"));
 const canUseBlokkli = computed(() => !!props.permissions.length);

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="bk-blokkli-item-actions-interactions">
+    <button
+      type="button"
+      :disabled="!canSelectParent"
+      @click.prevent="onClickSelectParent"
+    >
+      <Icon name="bk_mdi_arrow_top_left" />
+      <div class="bk-tooltip">
+        {{
+          parentLabel ? $t("actionsSelectParent", "Select parent (@label)").replace(
+  "@label",
+  parentLabel
+) : $t("actionsSelectPage", "Select page")
+        }}
+      </div>
+    </button>
+    <button
+      type="button"
+      :disabled="!canMove"
+      @pointerdown.stop.prevent="onMovePointerDown"
+    >
+      <Icon name="bk_mdi_drag_pan" />
+      <div class="bk-tooltip">
+        {{
+          selection.uuids.value.length === 1 ? $t("actionsMoveBlock", "Move block") : $t("actionsMoveBlocks", "Move @count blocks").replace(
+  "@count",
+  String(selection.uuids.value.length)
+)
+        }}
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
+const { selection, $t, state, eventBus, ui, types } = useBlokkli();
+const canMove = computed(() => {
+  return !!selection.items.value.length;
+});
+const canSelectParent = computed(() => {
+  if (selection.hasHostSelected.value) {
+    return false;
+  }
+  const items = selection.items.value;
+  if (!items.length) {
+    return false;
+  }
+  const firstKey = state.getFieldKeyForUuid(items[0].uuid);
+  if (!firstKey) {
+    return false;
+  }
+  return items.every((item) => state.getFieldKeyForUuid(item.uuid) === firstKey);
+});
+const parentLabel = computed(() => {
+  const item = selection.items.value[0];
+  if (!item) {
+    return "";
+  }
+  const parentUuid = state.getParentEntityUuid(item.uuid);
+  if (!parentUuid) {
+    return "";
+  }
+  const parentItem = state.getFieldListItem(parentUuid);
+  if (!parentItem) {
+    return "";
+  }
+  return types.getBlockBundleDefinition(parentItem.bundle)?.label ?? "";
+});
+function onClickSelectParent() {
+  if (!canSelectParent.value) {
+    return;
+  }
+  const item = selection.items.value[0];
+  if (!item) {
+    return;
+  }
+  const parentUuid = state.getParentEntityUuid(item.uuid);
+  if (!parentUuid) {
+    return;
+  }
+  ui.actionsToolbarLocked.value = true;
+  if (state.getFieldListItem(parentUuid)) {
+    eventBus.emit("select", parentUuid);
+    eventBus.emit("scrollIntoView", { uuid: parentUuid });
+  } else {
+    eventBus.emit("select:unselect");
+    eventBus.emit("select:host");
+  }
+}
+function onMovePointerDown(e) {
+  eventBus.emit("dragging:start", {
+    items: toDraggableExisting(selection.items.value),
+    coords: {
+      x: e.clientX,
+      y: e.clientY
+    },
+    mode: "mouse"
+  });
+}
+</script>
+
+<script>
+export default {
+  name: "Interactions"
+};
+</script>

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -5,7 +5,8 @@
   visibility: isVisible ? 'visible' : 'hidden'
 }"
     class="bk bk-blokkli-item-actions-inner"
-    @click.stop
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
   >
     <div
       id="bk-blokkli-item-actions-controls"
@@ -15,6 +16,7 @@
   'bk-is-locked': ui.isTransforming.value
 }"
     >
+      <Interactions />
       <div id="bk-blokkli-item-actions-title">
         <button
           class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent"
@@ -82,10 +84,18 @@
 </template>
 
 <script setup>
-import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
 import { falsy } from "#blokkli/helpers";
 import { Icon, ItemIconBox } from "#blokkli/editor/components";
 import EditActionsItemDropdown from "./ItemDropdown.vue";
+import Interactions from "./Interactions/index.vue";
 import { onBlokkliEvent, useStickyToolbar } from "#blokkli/editor/composables";
 import {
   fragmentBlockBundle,
@@ -99,11 +109,32 @@ const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
 useStickyToolbar(el, {
   getPlacementY: () => "top",
-  shouldUpdate: () => !selection.isChangingOptions.value && isVisible.value,
+  shouldUpdate: () => !ui.actionsToolbarLocked.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
   getMargin: () => 20,
   allowHorizontalOverflow: true
 });
+let mouseLeaveTimeout = null;
+function onMouseLeave() {
+  onMouseEnter();
+  if (ui.actionsToolbarLocked.value || ui.isChangingOptions.value) {
+    mouseLeaveTimeout = window.setTimeout(() => {
+      ui.actionsToolbarLocked.value = false;
+      ui.isChangingOptions.value = false;
+    }, 500);
+  }
+}
+function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+    mouseLeaveTimeout = null;
+  }
+}
+onBeforeUnmount(() => {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+  }
+});
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length

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

@@ -34,6 +34,7 @@ import {
 } from "#imports";
 import { itemEntityType } from "#blokkli-build/config";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
 const {
   dom,
   eventBus,
@@ -133,15 +134,6 @@ function getInteractedElement(e) {
   }
   return null;
 }
-function toDraggableExisting(v) {
-  const blocks2 = Array.isArray(v) ? v : [v];
-  return blocks2.map((block) => {
-    return {
-      itemType: "existing",
-      block
-    };
-  });
-}
 function onPointerMove(e) {
   if (!handlePointerMove) {
     return;
@@ -475,7 +467,7 @@ function onClick(e) {
     }
     return;
   }
-  if (canvasEl.value && !selection.activeEditableLabel.value) {
+  if (canvasEl.value && !selection.activeEditableLabel.value && !ui.hasTooltipOpen.value) {
     canvasEl.value.focus();
   }
 }