@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/module.json

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

package/dist/module.mjs

@@ -15,7 +15,7 @@ import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.23";
+const version = "2.0.0-alpha.24";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -1141,7 +1141,7 @@ const analyzerReadabiliyAverageSentenceLength$3 = {
 };
 const analyzerReadabiliyDescription$3 = {
 	source: "Avoid texts that are hard to read.",
-	translation: "Vermeiden Sie Texts die schwer lesbar sind."
+	translation: "Vermeiden Sie Texte die schwer lesbar sind."
 };
 const analyzerReadabiliyHardToRead$3 = {
 	source: "Hard to read (@lang).",
@@ -1359,6 +1359,14 @@ const clipboardPasteErrorAllowedBundlesSingle$3 = {
 	source: "Block type \"@types\" is not allowed here.",
 	translation: "Der Block-Typ «@types» ist hier nicht erlaubt."
 };
+const clipboardPasteErrorAllowedFragmentsMultiple$3 = {
+	source: "Fragments (@types) are not allowed here.",
+	translation: ""
+};
+const clipboardPasteErrorAllowedFragmentsSingle$3 = {
+	source: "Fragment \"@types\" is not allowed here.",
+	translation: ""
+};
 const clipboardPasteErrorCardinality$3 = {
 	source: "This field only allows up to @count blocks.",
 	translation: "Dieses Feld erlaubt nur bis zu @count Blöcke."
@@ -2191,6 +2199,10 @@ const optionBkVisibleLanguagesAll$3 = {
 	source: "All languages",
 	translation: "Alle Sprachen"
 };
+const overlayDoubleClickInfo$3 = {
+	source: "<strong>Double click</strong> to close overlay",
+	translation: "<strong>Doppelklicken</strong> um Dialog zu schliessen"
+};
 const ownershipError$3 = {
 	source: "Error in assigning",
 	translation: "Fehler beim Zuweisen"
@@ -2841,6 +2853,8 @@ const de = {
 	clipboardPasteError: clipboardPasteError$3,
 	clipboardPasteErrorAllowedBundlesMultiple: clipboardPasteErrorAllowedBundlesMultiple$3,
 	clipboardPasteErrorAllowedBundlesSingle: clipboardPasteErrorAllowedBundlesSingle$3,
+	clipboardPasteErrorAllowedFragmentsMultiple: clipboardPasteErrorAllowedFragmentsMultiple$3,
+	clipboardPasteErrorAllowedFragmentsSingle: clipboardPasteErrorAllowedFragmentsSingle$3,
 	clipboardPasteErrorCardinality: clipboardPasteErrorCardinality$3,
 	clipboardPasteErrorOneField: clipboardPasteErrorOneField$3,
 	clipboardPastePlaceholder: clipboardPastePlaceholder$3,
@@ -2938,22 +2952,6 @@ const de = {
 	"feature_add-list_setting_hideDisabledBlocks_label": {
 	source: "Hide blocks that can't be added",
 	translation: ""
-},
-	"feature_add-list_setting_orientation_label": {
-	source: "Add List",
-	translation: "Block-Leiste"
-},
-	"feature_add-list_setting_orientation_option_horizontal": {
-	source: "Horizontal",
-	translation: "Horizontal"
-},
-	"feature_add-list_setting_orientation_option_sidebar": {
-	source: "Sidebar",
-	translation: "Sidebar"
-},
-	"feature_add-list_setting_orientation_option_vertical": {
-	source: "Vertical",
-	translation: "Vertikal"
 },
 	feature_analyze_description: feature_analyze_description$3,
 	feature_analyze_label: feature_analyze_label$3,
@@ -3229,6 +3227,7 @@ const de = {
 	source: "Unselect \"@value\" in \"@option\"",
 	translation: "«@value» in «@option» abwählen"
 },
+	overlayDoubleClickInfo: overlayDoubleClickInfo$3,
 	ownershipError: ownershipError$3,
 	ownershipNote: ownershipNote$3,
 	ownershipSuccess: ownershipSuccess$3,
@@ -3717,6 +3716,14 @@ const clipboardPasteErrorAllowedBundlesSingle$2 = {
 	source: "Block type \"@types\" is not allowed here.",
 	translation: ""
 };
+const clipboardPasteErrorAllowedFragmentsMultiple$2 = {
+	source: "Fragments (@types) are not allowed here.",
+	translation: ""
+};
+const clipboardPasteErrorAllowedFragmentsSingle$2 = {
+	source: "Fragment \"@types\" is not allowed here.",
+	translation: ""
+};
 const clipboardPasteErrorCardinality$2 = {
 	source: "This field only allows up to @count blocks.",
 	translation: ""
@@ -4549,6 +4556,10 @@ const optionBkVisibleLanguagesAll$2 = {
 	source: "All languages",
 	translation: ""
 };
+const overlayDoubleClickInfo$2 = {
+	source: "<strong>Double click</strong> to close overlay",
+	translation: ""
+};
 const ownershipError$2 = {
 	source: "Error in assigning",
 	translation: "Erreur lors de l’attribution"
@@ -5199,6 +5210,8 @@ const fr = {
 	clipboardPasteError: clipboardPasteError$2,
 	clipboardPasteErrorAllowedBundlesMultiple: clipboardPasteErrorAllowedBundlesMultiple$2,
 	clipboardPasteErrorAllowedBundlesSingle: clipboardPasteErrorAllowedBundlesSingle$2,
+	clipboardPasteErrorAllowedFragmentsMultiple: clipboardPasteErrorAllowedFragmentsMultiple$2,
+	clipboardPasteErrorAllowedFragmentsSingle: clipboardPasteErrorAllowedFragmentsSingle$2,
 	clipboardPasteErrorCardinality: clipboardPasteErrorCardinality$2,
 	clipboardPasteErrorOneField: clipboardPasteErrorOneField$2,
 	clipboardPastePlaceholder: clipboardPastePlaceholder$2,
@@ -5296,22 +5309,6 @@ const fr = {
 	"feature_add-list_setting_hideDisabledBlocks_label": {
 	source: "Hide blocks that can't be added",
 	translation: ""
-},
-	"feature_add-list_setting_orientation_label": {
-	source: "Add List",
-	translation: "Liste d'ajout"
-},
-	"feature_add-list_setting_orientation_option_horizontal": {
-	source: "Horizontal",
-	translation: "Horizontal"
-},
-	"feature_add-list_setting_orientation_option_sidebar": {
-	source: "Sidebar",
-	translation: "Encadré"
-},
-	"feature_add-list_setting_orientation_option_vertical": {
-	source: "Vertical",
-	translation: "Vertical"
 },
 	feature_analyze_description: feature_analyze_description$2,
 	feature_analyze_label: feature_analyze_label$2,
@@ -5587,6 +5584,7 @@ const fr = {
 	source: "Unselect \"@value\" in \"@option\"",
 	translation: ""
 },
+	overlayDoubleClickInfo: overlayDoubleClickInfo$2,
 	ownershipError: ownershipError$2,
 	ownershipNote: ownershipNote$2,
 	ownershipSuccess: ownershipSuccess$2,
@@ -6075,6 +6073,14 @@ const clipboardPasteErrorAllowedBundlesSingle$1 = {
 	source: "Block type \"@types\" is not allowed here.",
 	translation: ""
 };
+const clipboardPasteErrorAllowedFragmentsMultiple$1 = {
+	source: "Fragments (@types) are not allowed here.",
+	translation: ""
+};
+const clipboardPasteErrorAllowedFragmentsSingle$1 = {
+	source: "Fragment \"@types\" is not allowed here.",
+	translation: ""
+};
 const clipboardPasteErrorCardinality$1 = {
 	source: "This field only allows up to @count blocks.",
 	translation: ""
@@ -6907,6 +6913,10 @@ const optionBkVisibleLanguagesAll$1 = {
 	source: "All languages",
 	translation: ""
 };
+const overlayDoubleClickInfo$1 = {
+	source: "<strong>Double click</strong> to close overlay",
+	translation: ""
+};
 const ownershipError$1 = {
 	source: "Error in assigning",
 	translation: "Errore nell'assegnazione"
@@ -7557,6 +7567,8 @@ const it = {
 	clipboardPasteError: clipboardPasteError$1,
 	clipboardPasteErrorAllowedBundlesMultiple: clipboardPasteErrorAllowedBundlesMultiple$1,
 	clipboardPasteErrorAllowedBundlesSingle: clipboardPasteErrorAllowedBundlesSingle$1,
+	clipboardPasteErrorAllowedFragmentsMultiple: clipboardPasteErrorAllowedFragmentsMultiple$1,
+	clipboardPasteErrorAllowedFragmentsSingle: clipboardPasteErrorAllowedFragmentsSingle$1,
 	clipboardPasteErrorCardinality: clipboardPasteErrorCardinality$1,
 	clipboardPasteErrorOneField: clipboardPasteErrorOneField$1,
 	clipboardPastePlaceholder: clipboardPastePlaceholder$1,
@@ -7654,22 +7666,6 @@ const it = {
 	"feature_add-list_setting_hideDisabledBlocks_label": {
 	source: "Hide blocks that can't be added",
 	translation: ""
-},
-	"feature_add-list_setting_orientation_label": {
-	source: "Add List",
-	translation: "Elenco di aggiunta"
-},
-	"feature_add-list_setting_orientation_option_horizontal": {
-	source: "Horizontal",
-	translation: "Orizzontale"
-},
-	"feature_add-list_setting_orientation_option_sidebar": {
-	source: "Sidebar",
-	translation: "Barra laterale"
-},
-	"feature_add-list_setting_orientation_option_vertical": {
-	source: "Vertical",
-	translation: "Verticale"
 },
 	feature_analyze_description: feature_analyze_description$1,
 	feature_analyze_label: feature_analyze_label$1,
@@ -7945,6 +7941,7 @@ const it = {
 	source: "Unselect \"@value\" in \"@option\"",
 	translation: ""
 },
+	overlayDoubleClickInfo: overlayDoubleClickInfo$1,
 	ownershipError: ownershipError$1,
 	ownershipNote: ownershipNote$1,
 	ownershipSuccess: ownershipSuccess$1,
@@ -8433,6 +8430,14 @@ const clipboardPasteErrorAllowedBundlesSingle = {
 	source: "Block type \"@types\" is not allowed here.",
 	translation: "Block-Typ «@types» isch do nid erlaubt."
 };
+const clipboardPasteErrorAllowedFragmentsMultiple = {
+	source: "Fragments (@types) are not allowed here.",
+	translation: ""
+};
+const clipboardPasteErrorAllowedFragmentsSingle = {
+	source: "Fragment \"@types\" is not allowed here.",
+	translation: ""
+};
 const clipboardPasteErrorCardinality = {
 	source: "This field only allows up to @count blocks.",
 	translation: "In däm Fäld sin maximal @count Blöck erlaubt."
@@ -9265,6 +9270,10 @@ const optionBkVisibleLanguagesAll = {
 	source: "All languages",
 	translation: "Alli Sproche"
 };
+const overlayDoubleClickInfo = {
+	source: "<strong>Double click</strong> to close overlay",
+	translation: ""
+};
 const ownershipError = {
 	source: "Error in assigning",
 	translation: "Fähler bim Zuewiise"
@@ -9915,6 +9924,8 @@ const gsw_CH = {
 	clipboardPasteError: clipboardPasteError,
 	clipboardPasteErrorAllowedBundlesMultiple: clipboardPasteErrorAllowedBundlesMultiple,
 	clipboardPasteErrorAllowedBundlesSingle: clipboardPasteErrorAllowedBundlesSingle,
+	clipboardPasteErrorAllowedFragmentsMultiple: clipboardPasteErrorAllowedFragmentsMultiple,
+	clipboardPasteErrorAllowedFragmentsSingle: clipboardPasteErrorAllowedFragmentsSingle,
 	clipboardPasteErrorCardinality: clipboardPasteErrorCardinality,
 	clipboardPasteErrorOneField: clipboardPasteErrorOneField,
 	clipboardPastePlaceholder: clipboardPastePlaceholder,
@@ -10012,22 +10023,6 @@ const gsw_CH = {
 	"feature_add-list_setting_hideDisabledBlocks_label": {
 	source: "Hide blocks that can't be added",
 	translation: ""
-},
-	"feature_add-list_setting_orientation_label": {
-	source: "Add List",
-	translation: "Block-Leischte"
-},
-	"feature_add-list_setting_orientation_option_horizontal": {
-	source: "Horizontal",
-	translation: "Horizontal"
-},
-	"feature_add-list_setting_orientation_option_sidebar": {
-	source: "Sidebar",
-	translation: "Sitteleischte"
-},
-	"feature_add-list_setting_orientation_option_vertical": {
-	source: "Vertical",
-	translation: "Vertikal"
 },
 	feature_analyze_description: feature_analyze_description,
 	feature_analyze_label: feature_analyze_label,
@@ -10303,6 +10298,7 @@ const gsw_CH = {
 	source: "Unselect \"@value\" in \"@option\"",
 	translation: "«@value» in «@option» abwähle"
 },
+	overlayDoubleClickInfo: overlayDoubleClickInfo,
 	ownershipError: ownershipError,
 	ownershipNote: ownershipNote,
 	ownershipSuccess: ownershipSuccess,

package/dist/runtime/blokkliPlugins/ContextMenu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
     <slot />
-    <Teleport to="body">
+    <Teleport :to="ui.mainLayoutElement.value">
       <BlokkliTransition name="context-menu">
         <ContextMenuMenu
           v-if="isVisible"

package/dist/runtime/blokkliPlugins/Sidebar/index.vue.d.ts

@@ -51,8 +51,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    weight: string | number;
     keyCode: string;
+    weight: string | number;
     tourText: string;
     minWidth: number;
     minHeight: number;

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue

@@ -45,7 +45,8 @@ const props = defineProps({
   icon: { type: null, required: false },
   shortcutGroup: { type: String, required: false },
   tourText: { type: String, required: false },
-  weight: { type: [Number, String], required: false }
+  weight: { type: [Number, String], required: false },
+  noCommand: { type: Boolean, required: false }
 });
 const { debug } = useBlokkli();
 const logger = debug.createLogger("PluginToolbar");
@@ -59,6 +60,9 @@ function onClick() {
   emit("click");
 }
 defineCommands(() => {
+  if (props.noCommand) {
+    return;
+  }
   return {
     id: "plugin:toolbar_button:" + props.id,
     label: props.title,

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue.d.ts

@@ -16,6 +16,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
      * The weight, used for positioning the button.
      */
     weight?: number | string;
+    noCommand?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -35,6 +36,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
      * The weight, used for positioning the button.
      */
     weight?: number | string;
+    noCommand?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/blokkliPlugins/TourItem/index.vue

@@ -9,32 +9,41 @@ const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
   text: { type: String, required: true },
-  selector: { type: String, required: false }
+  selector: { type: String, required: false },
+  element: { type: null, required: false }
 });
-const { element } = useBlokkli();
-const findElement = (el) => {
+const { element: elementProvider } = useBlokkli();
+const findInstanceElement = (el) => {
   if (el instanceof Text) {
-    return findElement(el.nextElementSibling);
+    return findInstanceElement(el.nextElementSibling);
   } else if (el instanceof HTMLElement) {
     return el;
   }
 };
 const instance = getCurrentInstance();
+function getElement() {
+  if (props.element) {
+    return props.element;
+  }
+  if (props.selector) {
+    const match = elementProvider.query(
+      document.documentElement,
+      props.selector,
+      `TourItem Plugin: ${props.id}`
+    );
+    if (match) {
+      return match;
+    }
+  }
+  return findInstanceElement(instance?.vnode.el);
+}
 defineTourItem(() => {
   return {
     id: props.id,
     title: props.title,
     text: props.text,
     element: () => {
-      const provided = props.selector ? element.query(
-        document.documentElement,
-        props.selector,
-        `TourItem Plugin: ${props.id}`
-      ) : void 0;
-      const el = provided || findElement(instance?.vnode.el);
-      if (el instanceof HTMLElement) {
-        return el;
-      }
+      return getElement();
     }
   };
 });

package/dist/runtime/blokkliPlugins/TourItem/index.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     title: string;
     text: string;
     selector?: string;
+    element?: HTMLElement | null;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/runtime/blokkliPlugins/index.d.ts

@@ -1,11 +1,9 @@
-import PluginAddAction from './AddAction/index.vue.js';
 import PluginBlockIndicator from './BlockIndicator/index.vue.js';
 import PluginContextMenu from './ContextMenu/index.vue.js';
 import PluginDebugOverlay from './DebugOverlay/index.vue.js';
 import PluginItemAction from './ItemAction/index.vue.js';
-import PluginMenuButton from './MenuButton/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
 import PluginViewOption from './ViewOption/index.vue.js';
-export { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };
+export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/blokkliPlugins/index.js

@@ -1,20 +1,16 @@
-import PluginAddAction from "./AddAction/index.vue";
 import PluginBlockIndicator from "./BlockIndicator/index.vue";
 import PluginContextMenu from "./ContextMenu/index.vue";
 import PluginDebugOverlay from "./DebugOverlay/index.vue";
 import PluginItemAction from "./ItemAction/index.vue";
-import PluginMenuButton from "./MenuButton/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
 import PluginTourItem from "./TourItem/index.vue";
 import PluginViewOption from "./ViewOption/index.vue";
 export {
-  PluginAddAction,
   PluginBlockIndicator,
   PluginContextMenu,
   PluginDebugOverlay,
   PluginItemAction,
-  PluginMenuButton,
   PluginSidebar,
   PluginToolbarButton,
   PluginTourItem,

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         /**
          * The edit permissions.
          */
-        permissions?: EditPermission[];
+        permissions?: Array<EditPermission | null>;
         /**
          * Whether to isolate the provider element during editing.
          */

package/dist/runtime/components/Edit/Actions/ItemDropdown.vue

@@ -34,7 +34,7 @@ import { ItemIcon, Icon } from "#blokkli/components";
 const emit = defineEmits(["close"]);
 const { plugins } = useBlokkli();
 function getGroupedActions() {
-  const actions = plugins.getItemDropdownActions();
+  const actions = plugins.get("itemDropdownAction");
   const groups2 = /* @__PURE__ */ new Map();
   for (const action of actions) {
     const groupName = action.group;

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

@@ -1,99 +1,98 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
-      <div
-        v-show="
-  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasTooltipOpen.value
-"
-        ref="el"
-        class="bk-blokkli-item-actions-inner"
-      >
-        <div
-          id="bk-blokkli-item-actions-controls"
-          ref="controlsEl"
-          class="bk-blokkli-item-actions-controls"
-          :class="{
+  <div
+    ref="el"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+    class="bk bk-blokkli-item-actions-inner"
+    @click.stop
+  >
+    <div
+      id="bk-blokkli-item-actions-controls"
+      ref="controlsEl"
+      class="bk-blokkli-item-actions-controls"
+      :class="{
   'bk-is-locked': ui.isTransforming.value
 }"
-        >
-          <div id="bk-blokkli-item-actions-title">
-            <button
-              class="bk-blokkli-item-actions-type-button"
-              tabindex="-1"
-              :disabled="!shouldRenderButton"
-              :class="{
+    >
+      <div id="bk-blokkli-item-actions-title">
+        <button
+          class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent"
+          tabindex="-1"
+          :disabled="!shouldRenderButton"
+          :class="{
   'is-open': showDropdown,
-  'is-interactive': shouldRenderButton,
-  'bk-is-reusable': itemBundle?.id === 'from_library',
-  'bk-is-fragment': itemBundle?.id === 'blokkli_fragment'
+  'is-interactive': shouldRenderButton
 }"
-              @click.prevent="showDropdown = !showDropdown"
-            >
-              <div v-if="shouldRenderButton" class="bk-tooltip">
-                {{ $t("actionsDropdownToolip", "Further actions") }}
-              </div>
-              <div
-                v-show="!hasSelectedHost"
-                class="bk-blokkli-item-actions-title-icon"
-              >
-                <Icon v-if="ui.isTransforming.value" name="loader" />
-                <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
-                <Icon v-else name="selection" />
-                <div
-                  v-if="itemBundle?.id === 'from_library'"
-                  class="bk-blokkli-item-actions-title-icon-reusable"
-                >
-                  <Icon name="reusable" />
-                </div>
-              </div>
-              <span class="bk-blokkli-item-actions-title-label">{{
-                title
-              }}</span>
-              <span
-                v-if="selection.items.value.length > 1"
-                class="bk-blokkli-item-actions-title-count"
-                >{{ selection.items.value.length }}</span
-              >
-              <span
-                v-show="selectedIsNew"
-                class="bk-blokkli-item-actions-title-pill"
-                >{{ $t("selectedIsNew", "New") }}</span
-              >
-              <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
-            </button>
-            <EditActionsItemDropdown
-              v-if="showDropdown && editingEnabled"
-              @close="showDropdown = false"
-            />
+          @click.prevent="showDropdown = !showDropdown"
+        >
+          <div v-if="shouldRenderButton" class="bk-tooltip">
+            {{ $t("actionsDropdownToolip", "Further actions") }}
           </div>
-
           <div
-            v-show="!selection.hasHostSelected.value"
-            id="bk-blokkli-item-actions"
-            class="bk-blokkli-item-actions-buttons"
-          />
-        </div>
+            v-show="!hasSelectedHost"
+            class="bk-blokkli-item-actions-title-icon"
+          >
+            <Icon v-if="ui.isTransforming.value" name="loader" />
+            <ItemIconBox
+              v-else-if="bundleIcon"
+              :bundle="bundleIcon"
+              :color="isReusable ? 'lime' : void 0"
+              is-small
+            />
+            <Icon v-else name="selection" />
+            <div
+              v-if="itemBundle?.id === 'from_library'"
+              class="bk-blokkli-item-actions-title-icon-reusable"
+            >
+              <Icon name="reusable" />
+            </div>
+          </div>
+          <span class="bk-blokkli-item-actions-title-label">{{ title }}</span>
+          <span
+            v-if="selection.items.value.length > 1"
+            class="bk-blokkli-item-actions-title-count"
+            >{{ selection.items.value.length }}</span
+          >
+          <span
+            v-show="selectedIsNew"
+            class="bk-blokkli-item-actions-title-pill"
+            >{{ $t("selectedIsNew", "New") }}</span
+          >
+          <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
+        </button>
+        <EditActionsItemDropdown
+          v-if="showDropdown && editingEnabled"
+          @close="showDropdown = false"
+        />
       </div>
+
+      <div
+        v-show="!selection.hasHostSelected.value"
+        id="bk-blokkli-item-actions"
+        class="bk-blokkli-item-actions-buttons"
+      />
     </div>
-  </Teleport>
+  </div>
 </template>
 
 <script setup>
 import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import { ItemIcon, Icon } from "#blokkli/components";
+import { Icon, ItemIconBox } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
 import EditActionsItemDropdown from "./ItemDropdown.vue";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
-const { shouldRender } = useStickyToolbar(el, {
+useStickyToolbar(el, {
   getPlacementY: () => "top",
-  shouldUpdate: () => !selection.isChangingOptions.value,
+  shouldUpdate: () => !selection.isChangingOptions.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
   getMargin: () => 20,
   allowHorizontalOverflow: true
@@ -103,6 +102,9 @@ const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
+const isVisible = computed(() => {
+  return !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value;
+});
 watch(selection.items, () => {
   showDropdown.value = false;
 });
@@ -118,6 +120,9 @@ const bundleIcon = computed(() => {
   }
   return itemBundle.value?.id;
 });
+const isReusable = computed(() => {
+  return itemBundle.value?.id === BUNDLE_FROM_LIBRARY;
+});
 const hasSelectedHost = computed(() => {
   return selection.items.value.length === 0;
 });