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

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -15,13 +15,20 @@
     </BlokkliTransition>
   </Teleport>
 
-  <Renderer @toggle="onRendererToggle" @toggle-field="onRendererToggleField" />
+  <ErrorBoundary v-model="isLocked" label="Add Buttons">
+    <Renderer
+      v-if="!isLocked"
+      :key="animation.renderKey.value"
+      @toggle="onRendererToggle"
+      @toggle-field="onRendererToggleField"
+    />
+  </ErrorBoundary>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { computed, useBlokkli, ref, watch } from "#imports";
-import { BlokkliTransition } from "#blokkli/components";
+import { BlokkliTransition, ErrorBoundary } from "#blokkli/components";
 import {
   getChildrenOrientation,
   getGapSize,
@@ -37,7 +44,8 @@ import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
   items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, $t, blocks, fields } = useBlokkli();
+const { dom, state, eventBus, types, $t, blocks, fields, animation } = useBlokkli();
+const isLocked = ref(false);
 const shouldRender = computed(() => {
   return props.items.length === 1;
 });
@@ -180,12 +188,11 @@ function onSelectBundle(bundle) {
   });
   closeOverlay();
 }
-function onSelectAction(id) {
+function onSelectAction(action) {
   if (!addData.value) {
     return;
   }
-  eventBus.emit("action:placed", {
-    id,
+  action.callback({
     field: addData.value.field,
     preceedingUuid: addData.value.preceedingUuid,
     host: { ...addData.value.host }
@@ -283,9 +290,7 @@ onBlokkliEvent("state:reloaded", () => {
   }
 });
 function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
-  const allowedBundles = field.allowedBundles.filter(
-    (bundle) => !isInternalBundle(bundle)
-  );
+  const allowedBundles = field.allowedBundles;
   if (allowedBundles.length === 0) {
     return;
   }
@@ -322,7 +327,7 @@ function getPreceedingUuidBefore(uuid2, field) {
     if (!child) {
       continue;
     }
-    const childUuid = child.dataset.uuid;
+    const childUuid = child.dataset.bkUuid;
     if (childUuid === uuid2) {
       return prevUuid;
     }

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/fragment.glsl

@@ -1,19 +1,27 @@
+#version 300 es
+
 precision highp float;
 
-varying vec4 v_quad;
-varying vec3 v_color;
-varying vec4 v_rect_radius;
-varying float v_thickness;
-varying float v_rect_id;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_rect_width;
-
-varying float v_transition;
-uniform float u_scale;
+in vec4 v_quad;
+in vec3 v_color;
+in vec4 v_rect_radius;
+in float v_thickness;
+in float v_rect_id;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_rect_width;
+
+in float v_transition;
+// Optimized varyings calculated in vertex shader
+in float v_stripe_distance;
+in vec4 v_base_scaled_radius;
+
+out vec4 fragColor;
+
 uniform float u_dpi;
 uniform float u_time;
 uniform float u_is_transforming;
+uniform float u_opacity;
 uniform vec2 u_resolution;
 
 #define PI 3.141592653589793
@@ -60,7 +68,7 @@ float exponentialIn(float t) {
 }
 
 float getStripePattern(vec2 quadRelativePos, float time) {
-  float d = 300.0 * u_scale;
+  float d = v_stripe_distance;
 
   float t = mod(u_time + v_rect_id * 1000.0, 1200.0) / 1200.0;
 
@@ -87,7 +95,7 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
 
   vec2 size = v_rect_size + borderThickness * 2.0 * v_transition;
   float u_edgeSoftness = 1.0 + v_transition;
-  vec4 radius = v_rect_radius * u_scale + vec4(borderThickness);
+  vec4 radius = v_base_scaled_radius + vec4(borderThickness);
   vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
   float u_borderSoftness = 1.0 + v_transition;
 
@@ -134,5 +142,6 @@ void main() {
   );
 
   vec4 finalColor = mix(borderBottom, borderTop, borderTop.a);
-  gl_FragColor = finalColor;
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
 }

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/index.vue

@@ -18,16 +18,14 @@ import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
-  gl: { type: null, required: true },
   hasHostSelected: { type: Boolean, required: true }
 });
 const { animation, theme, dom, ui, state } = useBlokkli();
-const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
   lastCount = 0;
   prevKey = "";
-  getBufferInfo(force) {
+  getBufferInfo(gl, force) {
     const key = props.blocks.map((block) => {
       const uuid = block.uuid;
       const rect = dom.getBlockRect(uuid);
@@ -93,13 +91,12 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
       }
       this.prevKey = key;
     }
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
 }
-const collector = new SelectionRectangleBufferCollector(props.gl);
 const hasTransformingStyle = computed(
   () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
 );
@@ -109,68 +106,164 @@ const selectionColorOverride = computed(() => {
     return null;
   }
   if (color === "mono") {
-    return toShaderColor(theme.getColor(color, "500"));
+    return theme.getColor(color, "500");
   } else if (color === "accent") {
-    return toShaderColor(theme.getColor(color, "700"));
+    return theme.getColor(color, "700");
   }
-  return toShaderColor(theme.getColor(color, "normal"));
+  return theme.getColor(color, "normal");
 });
 const getColorDefault = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor(theme.accent.value[600]);
+  return theme.accent.value[600];
 });
 const getColorInverted = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor([255, 255, 255]);
+  return [255, 255, 255];
 });
 const getColorLibrary = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor(theme.lime.value.normal);
+  return theme.lime.value.normal;
 });
 const getColorHost = useTransitionedValue(() => {
-  return toShaderColor(theme.mono.value[700]);
+  return theme.mono.value[700];
 });
 const getTransforming = useTransitionedValue(() => {
   return ui.isTransforming.value ? 1 : 0;
 });
-defineRenderer("selection-overlay", {
+const { collector } = defineRenderer("selection-overlay", {
   zIndex: 100,
-  render: (ctx) => {
-    props.gl.useProgram(programInfo.program);
-    const { info } = collector.getBufferInfo();
+  collector: () => new SelectionRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
+  render: (ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
     if (!info) {
       return;
     }
-    setUniforms(programInfo, {
-      u_color_default: getColorDefault(),
-      u_color_inverted: getColorInverted(),
-      u_color_library: getColorLibrary(),
-      u_color_host: getColorHost(),
+    setUniforms(program, {
+      u_color_default: toShaderColor(getColorDefault()),
+      u_color_inverted: toShaderColor(getColorInverted()),
+      u_color_library: toShaderColor(getColorLibrary()),
+      u_color_host: toShaderColor(getColorHost()),
       u_artboard_size: [
         ui.artboardSize.value.width,
         ui.artboardSize.value.height
       ],
       u_is_transforming: getTransforming(),
+      u_opacity: ctx.changeOptionsTransition,
       u_time: ctx.time
     });
-    animation.setSharedUniforms(props.gl, programInfo);
-    setBuffersAndAttributes(props.gl, programInfo, info);
-    drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    const rects = Object.values(collector.rects);
+    if (rects.length === 0) {
+      return;
+    }
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    const rgbaToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const colorDefault = rgbaToCss(getColorDefault());
+    const colorInverted = rgbaToCss(getColorInverted());
+    const colorLibrary = rgbaToCss(getColorLibrary());
+    const colorHost = rgbaToCss(getColorHost());
+    const smoothstepValue = Math.max(
+      0,
+      Math.min(1, (ctx.artboardScale - 0.3) / 0.7)
+    );
+    const thickness = (0.5 + smoothstepValue * 2.5) * ctx.dpi;
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      let strokeColor = colorDefault;
+      if (rect.isFromLibrary) {
+        strokeColor = colorLibrary;
+      } else if (rect.isInverted) {
+        strokeColor = colorInverted;
+      } else if (rect.id === "host") {
+        strokeColor = colorHost;
+      }
+      ctx2d.strokeStyle = strokeColor;
+      ctx2d.lineWidth = thickness;
+      const viewportX = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = rect.width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = rect.height * ctx.artboardScale * ctx.dpi;
+      const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+      const rtl = Math.min(
+        rect.radius[0] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rtr = Math.min(
+        rect.radius[1] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbr = Math.min(
+        rect.radius[2] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbl = Math.min(
+        rect.radius[3] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      ctx2d.beginPath();
+      ctx2d.moveTo(viewportX + rtl, viewportY);
+      ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+      if (rtr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY,
+          viewportX + viewportWidth,
+          viewportY + rtr,
+          rtr
+        );
+      }
+      ctx2d.lineTo(viewportX + viewportWidth, viewportY + viewportHeight - rbr);
+      if (rbr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight,
+          viewportX + viewportWidth - rbr,
+          viewportY + viewportHeight,
+          rbr
+        );
+      }
+      ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+      if (rbl > 0) {
+        ctx2d.arcTo(
+          viewportX,
+          viewportY + viewportHeight,
+          viewportX,
+          viewportY + viewportHeight - rbl,
+          rbl
+        );
+      }
+      ctx2d.lineTo(viewportX, viewportY + rtl);
+      if (rtl > 0) {
+        ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+      }
+      ctx2d.closePath();
+      ctx2d.stroke();
+    }
+    ctx2d.globalAlpha = 1;
   }
 });
 onBlokkliEvent("ui:resized", function() {

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/index.vue.d.ts

@@ -1,11 +1,9 @@
 import type { RenderedFieldListItem } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     blocks: RenderedFieldListItem[];
-    gl: WebGLRenderingContext;
     hasHostSelected: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     blocks: RenderedFieldListItem[];
-    gl: WebGLRenderingContext;
     hasHostSelected: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/vertex.glsl

@@ -1,12 +1,14 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
-attribute vec4 a_rect_radius;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
+in vec4 a_rect_radius;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -22,15 +24,18 @@ uniform vec3 u_color_library;
 uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
-varying vec4 v_quad;
-varying vec3 v_color;
-varying vec4 v_rect_radius;
-varying float v_thickness;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_transition;
-varying float v_rect_id;
-varying float v_rect_width;
+out vec4 v_quad;
+out vec3 v_color;
+out vec4 v_rect_radius;
+out float v_thickness;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_transition;
+out float v_rect_id;
+out float v_rect_width;
+// Optimized varyings calculated in vertex shader
+out float v_stripe_distance;
+out vec4 v_base_scaled_radius;
 
 void main() {
   // Define the increase size in viewport terms (not affected by u_scale)
@@ -96,4 +101,8 @@ void main() {
   v_rect_size = vec2(v_quad.z, v_quad.w);
   v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0); // The pixel-space rectangle center location
   v_transition = smoothstep(0.5, 0.8, u_scale);
+
+  // Calculate optimized values once per vertex
+  v_stripe_distance = 300.0 * u_scale;
+  v_base_scaled_radius = v_rect_radius * u_scale;
 }

package/dist/runtime/components/Edit/Features/Selection/index.vue

@@ -1,22 +1,11 @@
 <template>
-  <Overlay
-    v-if="isVisible && gl && animation.webglEnabled.value"
+  <Renderer
+    v-if="isVisible"
+    :key="animation.renderKey.value"
     :blocks="selection.items.value"
     :uuids="selection.uuids.value"
-    :gl="gl"
     :has-host-selected="selection.hasHostSelected.value"
   />
-  <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
-  <PluginItemDropdown
-    v-if="itemDropdownItems.length"
-    id="selection"
-    :title="$t('selectionActionGroupTitle', 'Selection')"
-    :enabled="itemDropdownEnabled"
-    :items="itemDropdownItems"
-    icon="selection"
-    weight="200"
-    @select="onSelectDropdownItem"
-  />
 
   <SelectionAddButtons
     v-if="state.editMode.value === 'editing'"
@@ -25,8 +14,7 @@
 </template>
 
 <script setup>
-import Overlay from "./Overlay/index.vue";
-import OverlayFallback from "./OverlayFallback/index.vue";
+import Renderer from "./Renderer/index.vue";
 import SelectionAddButtons from "./AddButtons/index.vue";
 import {
   calculateIntersection,
@@ -37,7 +25,7 @@ import {
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStateBasedCache from "#blokkli/helpers/composables/useStateBasedCache";
-import { PluginItemDropdown } from "#blokkli/plugins";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import {
   computed,
   useBlokkli,
@@ -65,54 +53,20 @@ const {
   blocks,
   element
 } = useBlokkli();
-const getSelectionOrder = useStateBasedCache(() => {
-  return element.queryAll(
-    ui.artboardElement(),
-    "[data-uuid]",
+const getSelectionOrder = useStateBasedCache(
+  () => element.queryAll(
+    ui.providerElement,
+    ".bk-field-list-item",
     "getSelectionOrder",
-    (el) => el.dataset.uuid
-  );
-});
+    (el) => el.dataset.bkUuid
+  )
+);
 const selectedBundle = computed(() => {
   if (selection.bundles.value.length === 1) {
     return selection.bundles.value[0] ?? null;
   }
   return null;
 });
-const itemDropdownEnabled = computed(() => true);
-const itemDropdownItems = computed(() => {
-  if (selectedBundle.value) {
-    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
-    return [
-      {
-        id: "select-all-of-bundle",
-        label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
-          "@bundle",
-          label
-        )
-      }
-    ];
-  } else if (selection.hasHostSelected.value) {
-    return [
-      {
-        id: "select-all-blocks",
-        label: $t("selectAllBlocks", "Select all blocks")
-      }
-    ];
-  }
-  return [];
-});
-function onSelectDropdownItem(item) {
-  if (item.id === "select-all-of-bundle") {
-    if (selectedBundle.value) {
-      const uuids = state.getAllUuids(selectedBundle.value);
-      eventBus.emit("select", uuids);
-    }
-  } else if (item.id === "select-all-blocks") {
-    selectAllBlocks();
-  }
-}
-const gl = animation.gl();
 const hasSelectedOnce = ref(false);
 const stop = watch(
   selection.hasAnythingSelected,
@@ -124,7 +78,7 @@ const stop = watch(
   }
 );
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isChangingOptions.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
 );
 const findMostVisibleBlock = () => {
   const viewport = ui.visibleViewportPadded.value;
@@ -310,6 +264,39 @@ onBlokkliEvent("keyPressed", (e) => {
     selectAllBlocks();
   }
 });
+defineItemDropdownAction(() => {
+  if (selectedBundle.value) {
+    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
+    return {
+      id: "selection-select-all-of-bundle",
+      label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
+        "@bundle",
+        label
+      ),
+      icon: "selection",
+      group: "selection",
+      weight: 200,
+      callback: () => {
+        if (selectedBundle.value) {
+          const uuids = state.getAllUuids(selectedBundle.value);
+          eventBus.emit("select", uuids);
+        }
+      }
+    };
+  }
+});
+defineItemDropdownAction(() => {
+  if (selection.hasHostSelected.value) {
+    return {
+      id: "selection-select-all-blocks",
+      label: $t("selectAllBlocks", "Select all blocks"),
+      icon: "selection",
+      group: "selection",
+      weight: 200,
+      callback: selectAllBlocks
+    };
+  }
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="settings"
     :title="$t('settingsDialogTitle', 'Change settings')"
     :width="900"
     hide-buttons

package/dist/runtime/components/Edit/Features/Settings/index.vue

@@ -1,28 +1,18 @@
 <template>
-  <PluginMenuButton
-    id="settings"
-    :title="$t('settingsMenuTitle', 'Settings')"
-    :description="
-  $t('settingsMenuDescription', 'Personal settings for the editor')
-"
-    secondary
-    icon="cog"
-    @click="onClick"
-  />
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
-      <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
+      <SettingsDialog v-if="showSettings" @cancel="onClose" />
     </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import SettingsDialog from "./Dialog/index.vue";
 import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 import { BlokkliTransition } from "#blokkli/components";
-const { $t } = useBlokkli();
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+const { ui, $t } = useBlokkli();
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -53,14 +43,32 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
-const showSettings = ref(false);
-const onClick = () => showSettings.value = true;
+const showSettings = computed(() => ui.currentDialog.value?.id === "settings");
+function onClick() {
+  ui.openDialog({ id: "settings", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("settings");
+}
 const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
 addElementClasses(
   document.documentElement,
   "bk-low-performance-mode",
   lowPerformanceMode
 );
+defineMenuButton(() => {
+  return {
+    id: "settings",
+    title: $t("settingsMenuTitle", "Settings"),
+    description: $t(
+      "settingsMenuDescription",
+      "Personal settings for the editor"
+    ),
+    icon: "cog",
+    secondary: true,
+    callback: onClick
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/TouchActionBar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="touch-bar">
       <Bar
         v-if="
@@ -24,7 +24,7 @@
 import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { BlokkliTransition } from "#blokkli/components";
 import Bar from "./Bar/index.vue";
-const { eventBus, selection, $t } = useBlokkli();
+const { eventBus, selection, $t, ui } = useBlokkli();
 defineBlokkliFeature({
   id: "touch-action-bar",
   label: "Touch Action Bar",

package/dist/runtime/components/Edit/Features/Tour/Overlay/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport v-if="activeItem" to="body">
+  <Teleport v-if="activeItem" :to="ui.mainLayoutElement.value">
     <div class="bk bk-tour" :style="tooltipStyle">
       <div class="bk-tour-inner">
         <div class="bk-tour-title">