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

package/dist/modules/agent/runtime/app/types/index.js

@@ -1,5 +1,6 @@
 import {
-  agentErrorTypeSchema
+  agentErrorTypeSchema,
+  selectedBlockSchema
 } from "#blokkli/agent/shared/types";
 import { z } from "zod";
 const conversationItemBase = z.object({
@@ -35,7 +36,7 @@ const userConversationItemSchema = conversationItemBase.extend({
    * Original send parameters captured so retry produces byte-identical
    * execution — important for prompt-definition-driven sends where the
    * displayed text is a friendly label but the real work was driven by
-   * `selectedUuids`, pre-computed tool results, auto-executed tools, and
+   * `selectedBlocks`, pre-computed tool results, auto-executed tools, and
    * auto-loaded tools/skills.
    *
    * Retry replays this context as-is. Edit discards `preSeededResults` and
@@ -45,7 +46,7 @@ const userConversationItemSchema = conversationItemBase.extend({
   sendContext: z.object({
     promptId: z.string().optional(),
     serverPrompt: z.string().optional(),
-    selectedUuids: z.array(z.string()).optional(),
+    selectedBlocks: z.array(selectedBlockSchema).optional(),
     autoLoadTools: z.array(z.string()).optional(),
     autoLoadSkills: z.array(z.string()).optional(),
     preSeededResults: z.array(

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",
@@ -86,7 +85,7 @@ export default defineWebSocketHandler({
             data.prompt,
             apiKey,
             authSecret,
-            data.selectedUuids,
+            data.selectedBlocks,
             data.autoLoadTools,
             data.autoLoadSkills,
             data.preSeededResults,

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

@@ -1,5 +1,5 @@
 import type { Peer } from 'crossws';
-import type { PageContext, ClientToolDefinition, ServerToolMetadata, ConversationStateSnapshot } from '../../../shared/types.js';
+import type { PageContext, ClientToolDefinition, ServerToolMetadata, ConversationStateSnapshot, SelectedBlock } from '../../../shared/types.js';
 import type { ServerPlan } from '../../server-tools/index.js';
 export declare class Session {
     /** The single, immutable source of truth for the conversation. */
@@ -56,7 +56,7 @@ export declare class Session {
      */
     private getToolSummary;
     init(toolNames: string[], pageContext: PageContext): void;
-    start(peer: Peer, prompt: string, apiKey: string, authSecret: string, selectedUuids?: string[], autoLoadTools?: string[], autoLoadSkills?: string[], preSeededResults?: {
+    start(peer: Peer, prompt: string, apiKey: string, authSecret: string, selectedBlocks?: SelectedBlock[], autoLoadTools?: string[], autoLoadSkills?: string[], preSeededResults?: {
         toolName: string;
         params: Record<string, unknown>;
         result: unknown;

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

@@ -129,7 +129,7 @@ export class Session {
     this.loadedSkills = /* @__PURE__ */ new Set();
     this.pageContext = pageContext;
   }
-  start(peer, prompt, apiKey, authSecret, selectedUuids, autoLoadTools, autoLoadSkills, preSeededResults, autoExecuteTools, rollbackToUserMessageIndex) {
+  start(peer, prompt, apiKey, authSecret, selectedBlocks, autoLoadTools, autoLoadSkills, preSeededResults, autoExecuteTools, rollbackToUserMessageIndex) {
     if (this.isProcessing) {
       send(peer, {
         type: "error",
@@ -156,7 +156,7 @@ export class Session {
       prompt,
       apiKey,
       authSecret,
-      selectedUuids,
+      selectedBlocks,
       autoLoadTools,
       autoLoadSkills,
       preSeededResults,
@@ -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;
@@ -352,7 +356,7 @@ export class Session {
       this.pendingPlanApproval = { resolve };
     });
   }
-  async runAgentLoop(peer, prompt, apiKey, authSecret, selectedUuids, autoLoadTools, autoLoadSkills, preSeededResults, autoExecuteTools) {
+  async runAgentLoop(peer, prompt, apiKey, authSecret, selectedBlocks, autoLoadTools, autoLoadSkills, preSeededResults, autoExecuteTools) {
     if (this.toolNames.length === 0) {
       this.isProcessing = false;
       send(peer, {
@@ -400,9 +404,10 @@ ${skill.content}`
       }
     }
     const userParts = [];
-    if (selectedUuids?.length) {
+    if (selectedBlocks?.length) {
+      const formatted = selectedBlocks.map((b) => `${b.bundle} (${b.uuid})`).join(", ");
       userParts.push(
-        `[User has selected the following paragraphs: ${selectedUuids.join(", ")}]`
+        selectedBlocks.length === 1 ? `[User has selected one block: ${formatted}]` : `[User has selected: ${formatted}]`
       );
     }
     userParts.push(prompt);

package/dist/modules/agent/runtime/server/default-system-prompts/important-rules.js

@@ -14,7 +14,8 @@ export default defineBlokkliAgentSystemPrompt({
 - Use the move_paragraphs tool when moving paragraphs, instead of creating a new paragraph of the same bundle and copy pasting text.
 - ALL mutation MCP tools will make sure that the mutation is valid - it's not possible for you to make a mistake there. They return a descriptive error message.
 - It's impossible for you to make irreversible mutations! All mutations can ALWAYS be undone. You can not actually publish any changes, this can only be done by a human.
-- When the user's prompt implies acting on specific paragraphs but doesn't specify which ones (e.g. "translate this to german", "make this bigger", "delete these"), ALWAYS call "get_selected_paragraphs" first to check what is selected. Do this even if the prompt seems ambiguous - the selection is the most likely target.
+- The user's first message includes their selection inline as "[User has selected: <bundle> (<uuid>), ...]". Treat that as the target of vague references like "this", "these", "translate this", "make this bigger" \u2014 no extra tool call needed to identify them.
+- For LATER messages where the prompt implies acting on the current selection but the first-message annotation is absent or stale, call "get_selected_paragraphs" \u2014 the user may have changed their selection since the conversation started.
 - You can output text as you please, markdown is allowed!
 `;
   }

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

@@ -13,8 +13,27 @@ import { z } from 'zod';
  *
  * Lives in `shared/` so both client tools and server-only tools build the same
  * coercion into their respective bundles from one source.
+ *
+ * Return type is explicit so mkdist's isolated-declaration emit preserves it
+ * when this helper appears nested inside another schema. Chaining `.optional()`
+ * or `.default()` on the result would degrade to `any` in the published `.d.ts`
+ * — use {@link optionalBooleanParam} / {@link booleanParamWithDefault} instead.
  */
 export declare function booleanParam(description: string): z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodBoolean>;
+/**
+ * Optional variant of {@link booleanParam}. Use instead of
+ * `booleanParam(...).optional()` so isolated-declaration emit can preserve the
+ * type — chained Zod method calls aren't resolvable by mkdist's per-file
+ * declaration emit and collapse to `any` in the published `.d.ts`.
+ */
+export declare function optionalBooleanParam(description: string): z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodBoolean>>;
+/**
+ * Optional boolean with a default. Use instead of
+ * `booleanParam(...).optional().default(value)` so isolated-declaration emit
+ * can preserve the type. The default value applies when the param is omitted
+ * or `undefined` at parse time.
+ */
+export declare function booleanParamWithDefault(description: string, defaultValue: boolean): z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodBoolean>>>;
 /**
  * Coerce double-serialized array/object params back to their real values.
  *

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

@@ -9,6 +9,12 @@ export function booleanParam(description) {
     return value;
   }, z.boolean().describe(description));
 }
+export function optionalBooleanParam(description) {
+  return booleanParam(description).optional();
+}
+export function booleanParamWithDefault(description, defaultValue) {
+  return booleanParam(description).optional().default(defaultValue);
+}
 export function coerceStringifiedParams(params) {
   const result = {};
   for (const key of Object.keys(params)) {

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/agent/runtime/shared/types.d.ts

@@ -207,6 +207,7 @@ export type PageContext = {
  * Both Anthropic and OpenAI SDKs map to these via HTTP status codes.
  */
 export declare const agentErrorTypeSchema: z.ZodEnum<{
+    unknown: "unknown";
     authentication: "authentication";
     rate_limit: "rate_limit";
     overloaded: "overloaded";
@@ -214,7 +215,6 @@ export declare const agentErrorTypeSchema: z.ZodEnum<{
     bad_request: "bad_request";
     connection: "connection";
     unauthorized: "unauthorized";
-    unknown: "unknown";
 }>;
 export type AgentErrorType = z.infer<typeof agentErrorTypeSchema>;
 /**
@@ -312,6 +312,21 @@ export declare const pageStructureSchema: z.ZodObject<{
     entityContentFields: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, z.core.$strip>;
 export type PageStructure = z.infer<typeof pageStructureSchema>;
+/**
+ * A block the user had selected when sending the initial message. The bundle
+ * and label travel with the UUID so the LLM can disambiguate "this" / "these"
+ * without an extra `get_selected_paragraphs` round-trip.
+ */
+export type SelectedBlock = {
+    uuid: string;
+    bundle: string;
+    label: string;
+};
+export declare const selectedBlockSchema: z.ZodObject<{
+    uuid: z.ZodString;
+    bundle: z.ZodString;
+    label: z.ZodString;
+}, z.core.$strip>;
 export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"authenticate">;
     authToken: z.ZodString;
@@ -340,8 +355,8 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 name: z.ZodString;
                 label: z.ZodString;
                 type: z.ZodEnum<{
-                    reference: "reference";
                     link: "link";
+                    reference: "reference";
                 }>;
                 allowed: z.ZodArray<z.ZodObject<{
                     type: z.ZodString;
@@ -380,8 +395,8 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             name: z.ZodString;
             label: z.ZodString;
             type: z.ZodEnum<{
-                reference: "reference";
                 link: "link";
+                reference: "reference";
             }>;
             allowed: z.ZodArray<z.ZodObject<{
                 type: z.ZodString;
@@ -406,7 +421,11 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"start">;
     prompt: z.ZodString;
-    selectedUuids: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    selectedBlocks: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        uuid: z.ZodString;
+        bundle: z.ZodString;
+        label: z.ZodString;
+    }, z.core.$strip>>>;
     autoLoadTools: z.ZodOptional<z.ZodArray<z.ZodString>>;
     autoLoadSkills: z.ZodOptional<z.ZodArray<z.ZodString>>;
     preSeededResults: z.ZodOptional<z.ZodArray<z.ZodObject<{

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

@@ -101,6 +101,11 @@ export const pageStructureSchema = z.object({
   fields: z.record(z.string(), z.array(pageStructureBlockSchema)),
   entityContentFields: z.record(z.string(), z.string()).optional()
 });
+export const selectedBlockSchema = z.object({
+  uuid: z.string(),
+  bundle: z.string(),
+  label: z.string()
+});
 const genericContentBlockSchema = z.discriminatedUnion("type", [
   z.object({ type: z.literal("text"), text: z.string() }),
   z.object({ type: z.literal("skill"), name: z.string(), text: z.string() }),
@@ -142,7 +147,7 @@ export const clientMessageSchema = z.discriminatedUnion("type", [
   z.object({
     type: z.literal("start"),
     prompt: z.string(),
-    selectedUuids: z.array(z.string()).optional(),
+    selectedBlocks: z.array(selectedBlockSchema).optional(),
     autoLoadTools: z.array(z.string()).optional(),
     autoLoadSkills: z.array(z.string()).optional(),
     preSeededResults: z.array(

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

@@ -7,12 +7,10 @@
       />
     </template>
     <template #default="{ close }">
-      <button
+      <DropdownItem
         v-for="entry in colorOptions"
         :key="entry.id"
-        type="button"
-        class="bk-dropdown-menu-item _bk_min-w-[200px] _bk_group/item"
-        :class="{ 'bk-is-active': colorId === entry.id }"
+        :text="entry.label"
         @click="
   () => {
     emit('select', entry.id);
@@ -24,21 +22,14 @@
           class="bk-chart-color-swatch"
           :style="{ backgroundColor: entry.hex }"
         />
-        <span
-          :class="{
-  '_bk_text-mono-500 _bk_font-normal _bk_group-hover/item:text-mono-900': colorId !== entry.id,
-  '_bk_font-bold': colorId === entry.id
-}"
-          >{{ entry.label }}</span
-        >
-      </button>
+      </DropdownItem>
     </template>
   </Dropdown>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Dropdown } from "#blokkli/editor/components";
+import { Dropdown, DropdownItem } from "#blokkli/editor/components";
 const props = defineProps({
   colorId: { type: String, required: true }
 });

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="{
@@ -92,21 +91,22 @@
       />
     </button>
     <div
-      v-if="editingEnabled"
-      v-show="showDropdown"
+      v-show="showDropdown && editingEnabled"
       id="bk-blokkli-item-actions-dropdown"
       class="_bk_absolute _bk_bottom-full _bk_left-0 _bk_min-w-[300px] _bk_bg-mono-900 _bk_text-mono-200 _bk_shadow-xl-inverted _bk_w-screen _bk_lg:w-auto _bk_flex _bk_flex-col _bk_lg:top-full _bk_lg:bottom-auto _bk_lg:shadow-xl _bk_lg:left-[23px]"
     >
-      <EditActionsItemDropdown
-        v-if="showDropdown"
-        @close="showDropdown = false"
-      />
+      <div>
+        <EditActionsItemDropdown
+          v-if="showDropdown"
+          @close="showDropdown = false"
+        />
+      </div>
     </div>
   </div>
 </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 +147,7 @@ async function onToggleDropdown() {
   const willOpen = !showDropdown.value;
   if (willOpen) {
     await ui.flushPendingChanges();
+    await nextTick();
   }
   showDropdown.value = willOpen;
 }