@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/Hover/Overlay/fragment.glsl

@@ -0,0 +1,139 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying vec4 v_rect_radius;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_rect_type;
+varying vec2 v_quad_artboard_pos;
+
+uniform float u_dpi;
+uniform float u_scale;
+uniform float u_offset_x;
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec3 u_color_mono;
+uniform vec3 u_color_accent;
+uniform vec3 u_color_teal;
+uniform vec3 u_color_white;
+uniform vec3 u_color_lime;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  vec2 size = v_rect_size;
+  vec4 u_cornerRadii = min(v_rect_radius, min(size.x, size.y) / 2.0);
+  vec4 r = u_cornerRadii;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, r);
+
+  // For editable fields (type 2), render both fill and solid border
+  if (v_rect_type > 1.5 && v_rect_type < 2.5) {
+    float u_edgeSoftness = 1.0;
+    float borderThickness = 1.5 * u_dpi;
+    float u_borderSoftness = 1.0;
+
+    // Render fill
+    float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, mainDist);
+    vec4 fillColor = vec4(u_color_teal, 0.2);
+
+    // Render solid border (non-dashed)
+    float borderAlpha =
+      1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
+    vec4 borderColor = vec4(u_color_teal, 1.0);
+
+    // Combine fill and border
+    vec4 combined = mix(
+      vec4(fillColor.rgb, fillAlpha * fillColor.a),
+      borderColor,
+      borderAlpha * borderColor.a
+    );
+
+    gl_FragColor = combined;
+    return;
+  }
+
+  // For blocks (type 0, 1, and 3), render border
+  float borderThickness = 1.5 * u_dpi;
+  float u_borderSoftness = 1.0;
+
+  float borderAlpha =
+    1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
+
+  // Select color based on type: 0 = mono, 1 = accent, 3 = white (inverted), 4 = lime (library)
+  vec3 color = u_color_mono;
+  if (v_rect_type > 3.5) {
+    color = u_color_lime;
+  } else if (v_rect_type > 2.5) {
+    color = u_color_white;
+  } else if (v_rect_type > 0.5) {
+    color = u_color_accent;
+  }
+
+  // Apply dashed pattern for all blocks
+  // Calculate actual perimeter distance for proper dashing
+  vec2 halfSize = size / 2.0;
+  vec2 p = posRelativeToQuad;
+  vec2 absP = abs(p);
+
+  // Determine which edge/corner we're on and calculate perimeter distance
+  float perimeterDistance = 0.0;
+
+  // Check which edge we're closest to
+  float dx = absP.x - halfSize.x;
+  float dy = absP.y - halfSize.y;
+
+  if (dy > dx) {
+    // Top or bottom edge
+    if (p.y > 0.0) {
+      // Bottom edge: start at bottom-left, go right
+      perimeterDistance = size.x + size.y + (p.x + halfSize.x);
+    } else {
+      // Top edge: start at top-right, go left
+      perimeterDistance = size.x + (halfSize.x - p.x);
+    }
+  } else {
+    // Left or right edge
+    if (p.x > 0.0) {
+      // Right edge: start at top-right, go down
+      perimeterDistance = p.y + halfSize.y;
+    } else {
+      // Left edge: start at bottom-left, go up
+      perimeterDistance = size.x + size.y + size.x + (halfSize.y - p.y);
+    }
+  }
+
+  float dashWidth = 7.0 * u_dpi;
+  float dashGap = 7.0 * u_dpi;
+  float dashCycle = dashWidth + dashGap;
+
+  float dashPosition = mod(perimeterDistance, dashCycle);
+  float dashFactor = step(dashPosition, dashWidth);
+
+  // Only show dashes
+  borderAlpha *= dashFactor;
+
+  vec4 borderColor = vec4(color, 1.0);
+  vec4 finalColor = mix(
+    vec4(0.0, 0.0, 0.0, 0.0),
+    borderColor,
+    borderAlpha * borderColor.a
+  );
+
+  gl_FragColor = finalColor;
+}

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

@@ -0,0 +1,261 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed, ref, watch } from "#imports";
+import { setBuffersAndAttributes, drawBufferInfo, setUniforms } from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { toShaderColor, isInsideRect } from "#blokkli/helpers";
+const props = defineProps({
+  gl: { type: null, required: true }
+});
+const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
+const programInfo = animation.registerProgram("hover", props.gl, [vs, fs]);
+const MAX_RECTS = 11;
+function getDeepestUuid(uuids) {
+  if (uuids.length === 0) {
+    return null;
+  }
+  let deepestUuid = uuids[0];
+  let maxLevel = state.getNestingLevel(deepestUuid);
+  for (let i = 1; i < uuids.length; i++) {
+    const uuid = uuids[i];
+    const level = state.getNestingLevel(uuid);
+    if (level > maxLevel) {
+      maxLevel = level;
+      deepestUuid = uuid;
+    }
+  }
+  return deepestUuid;
+}
+function createHoverState() {
+  return {
+    positions: new Float32Array(MAX_RECTS * 4),
+    radii: new Float32Array(MAX_RECTS * 4),
+    types: new Float32Array(MAX_RECTS),
+    visible: new Float32Array(MAX_RECTS)
+  };
+}
+const hoverState = createHoverState();
+let previousHoveredUuids = [];
+let previousDeepestUuid = null;
+let previousEditableFieldRect = null;
+const isHoveringEditableField = ref(false);
+const isHoveringSelectedBlock = ref(false);
+class HoverRectangleBufferCollector extends RectangleBufferCollector {
+}
+const collector = new HoverRectangleBufferCollector(props.gl);
+for (let i = 0; i < MAX_RECTS; i++) {
+  collector.addRectangle(
+    {
+      id: `hover-rect-${i}`,
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      radius: [0, 0, 0, 0]
+    },
+    0
+  );
+}
+const bufferInfo = collector.createBufferInfo();
+function resetHoverState() {
+  previousHoveredUuids = [];
+  previousDeepestUuid = null;
+  previousEditableFieldRect = null;
+  hoverState.visible.fill(0);
+  isHoveringEditableField.value = false;
+  isHoveringSelectedBlock.value = false;
+}
+watch(selection.isChangingOptions, (isChanging) => {
+  if (!isChanging) {
+    resetHoverState();
+  }
+});
+watch(selection.uuids, () => {
+  resetHoverState();
+});
+function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
+  const artboardRect = {
+    x: offset.x,
+    y: offset.y,
+    width: artboardSize.width * scale,
+    height: artboardSize.height * scale
+  };
+  const isOutsideArtboard = mouseX < artboardRect.x || mouseX > artboardRect.x + artboardRect.width || mouseY < artboardRect.y || mouseY > artboardRect.y + artboardRect.height;
+  if (isOutsideArtboard) {
+    const needsUpdate = previousHoveredUuids.length > 0 || previousEditableFieldRect !== null || isHoveringEditableField.value || isHoveringSelectedBlock.value;
+    hoverState.visible.fill(0);
+    isHoveringEditableField.value = false;
+    isHoveringSelectedBlock.value = false;
+    previousHoveredUuids = [];
+    previousDeepestUuid = null;
+    previousEditableFieldRect = null;
+    return needsUpdate;
+  }
+  const artboardMouseX = mouseX / scale - offset.x / scale;
+  const artboardMouseY = mouseY / scale - offset.y / scale;
+  const hoveredUuids = [];
+  const visibleBlocks = dom.getVisibleBlocks();
+  for (let i = 0; i < visibleBlocks.length; i++) {
+    const uuid = visibleBlocks[i];
+    if (!uuid) continue;
+    const rawRect = dom.getBlockRect(uuid);
+    if (!rawRect) continue;
+    const rect = ui.getViewportRelativeRect(rawRect, scale, offset);
+    const blockRect = {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      width: rect.width / scale,
+      height: rect.height / scale
+    };
+    if (isInsideRect(artboardMouseX, artboardMouseY, blockRect)) {
+      hoveredUuids.push(uuid);
+    }
+  }
+  const deepestUuid = getDeepestUuid(hoveredUuids);
+  const selectedUuids = selection.uuids.value;
+  const unselectedHoveredUuids = hoveredUuids.filter(
+    (uuid) => !selectedUuids.includes(uuid)
+  );
+  const hoveredChanged = unselectedHoveredUuids.length !== previousHoveredUuids.length || unselectedHoveredUuids.some(
+    (uuid, i) => uuid !== previousHoveredUuids[i]
+  ) || deepestUuid !== previousDeepestUuid;
+  let hoveredEditableFieldRect = null;
+  const editableRects = directive.getVisible("editable");
+  for (let i = 0; i < editableRects.length; i++) {
+    const editableRect = editableRects[i];
+    if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
+      hoveredEditableFieldRect = editableRect;
+      break;
+    }
+  }
+  if (!hoveredChanged) {
+    const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
+    if (!editableFieldChanged) {
+      return false;
+    }
+  }
+  const shouldHighlightDeepest = deepestUuid && unselectedHoveredUuids.includes(deepestUuid);
+  hoverState.visible.fill(0);
+  const nestingMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < unselectedHoveredUuids.length; i++) {
+    const uuid = unselectedHoveredUuids[i];
+    const level = Math.min(state.getNestingLevel(uuid), 9);
+    if (!nestingMap.has(level)) {
+      nestingMap.set(level, uuid);
+    }
+  }
+  for (const [level, uuid] of nestingMap) {
+    const rect = dom.getBlockRect(uuid);
+    const block = blocks.getBlock(uuid);
+    if (!rect || !block) continue;
+    const el = dom.getDragElement(block);
+    if (!el) continue;
+    const style = theme.getDraggableStyle(el);
+    const isDeepest = shouldHighlightDeepest && uuid === deepestUuid;
+    hoverState.positions[level * 4 + 0] = rect.x;
+    hoverState.positions[level * 4 + 1] = rect.y;
+    hoverState.positions[level * 4 + 2] = rect.width;
+    hoverState.positions[level * 4 + 3] = rect.height;
+    hoverState.radii[level * 4 + 0] = style.radius[0];
+    hoverState.radii[level * 4 + 1] = style.radius[1];
+    hoverState.radii[level * 4 + 2] = style.radius[2];
+    hoverState.radii[level * 4 + 3] = style.radius[3];
+    let type = 0;
+    if (isDeepest) {
+      const isFromLibrary = state.fromLibraryUuids.value.includes(uuid);
+      if (isFromLibrary) {
+        type = 4;
+      } else {
+        type = style.isInverted ? 3 : 1;
+      }
+    }
+    hoverState.types[level] = type;
+    hoverState.visible[level] = 1;
+  }
+  if (hoveredEditableFieldRect) {
+    const inset = 2;
+    hoverState.positions[10 * 4 + 0] = hoveredEditableFieldRect.x + inset;
+    hoverState.positions[10 * 4 + 1] = hoveredEditableFieldRect.y + inset;
+    hoverState.positions[10 * 4 + 2] = hoveredEditableFieldRect.width - inset * 2;
+    hoverState.positions[10 * 4 + 3] = hoveredEditableFieldRect.height - inset * 2;
+    hoverState.radii[10 * 4 + 0] = 0;
+    hoverState.radii[10 * 4 + 1] = 0;
+    hoverState.radii[10 * 4 + 2] = 0;
+    hoverState.radii[10 * 4 + 3] = 0;
+    hoverState.types[10] = 2;
+    hoverState.visible[10] = 1;
+  }
+  previousHoveredUuids = unselectedHoveredUuids;
+  previousDeepestUuid = deepestUuid;
+  previousEditableFieldRect = hoveredEditableFieldRect;
+  isHoveringEditableField.value = hoveredEditableFieldRect !== null;
+  isHoveringSelectedBlock.value = deepestUuid !== null && selectedUuids.includes(deepestUuid);
+  return true;
+}
+const uniforms = computed(() => {
+  return {
+    u_color_mono: toShaderColor(theme.mono.value[300]),
+    u_color_accent: toShaderColor(theme.accent.value[600]),
+    u_color_teal: toShaderColor(theme.teal.value.normal),
+    u_color_white: toShaderColor([255, 255, 255]),
+    u_color_lime: toShaderColor(theme.lime.value.normal)
+  };
+});
+onBlokkliEvent("state:reloaded", () => {
+  resetHoverState();
+});
+onBlokkliEvent("ui:resized", () => {
+  resetHoverState();
+});
+defineRenderer("hover-overlay", {
+  zIndex: 200,
+  enabled: () => !selection.isChangingOptions.value,
+  cursor: () => {
+    if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
+      return "text";
+    }
+    if (isHoveringSelectedBlock.value && state.editMode.value === "editing") {
+      return "grab";
+    }
+    return null;
+  },
+  render: (ctx) => {
+    if (!bufferInfo) {
+      return;
+    }
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    props.gl.useProgram(programInfo.program);
+    setUniforms(programInfo, uniforms.value);
+    setUniforms(programInfo, {
+      u_hover_positions: hoverState.positions,
+      u_hover_radii: hoverState.radii,
+      u_hover_types: hoverState.types,
+      u_hover_visible: hoverState.visible
+    });
+    animation.setSharedUniforms(props.gl, programInfo);
+    setBuffersAndAttributes(props.gl, programInfo, bufferInfo);
+    drawBufferInfo(props.gl, bufferInfo, props.gl.TRIANGLES);
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "HoverOverlay"
+};
+</script>

package/dist/runtime/components/Edit/Features/Hover/Overlay/index.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{
+    gl: WebGLRenderingContext;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    gl: WebGLRenderingContext;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Hover/Overlay/vertex.glsl

@@ -0,0 +1,117 @@
+precision highp float;
+
+// [x, y] position.
+attribute 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;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+
+// Hover state uniforms (11 rectangles)
+uniform vec4 u_hover_positions[11]; // x, y, width, height
+uniform vec4 u_hover_radii[11]; // topLeft, topRight, bottomRight, bottomLeft
+uniform float u_hover_types[11]; // 0=mono, 1=accent, 2=teal fill
+uniform float u_hover_visible[11]; // 0=hidden, 1=visible
+
+// The transformed quad for the fragment shader.
+varying vec4 v_quad;
+varying vec4 v_rect_radius;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_rect_type;
+varying vec2 v_quad_artboard_pos;
+
+void main() {
+  int rectIndex = int(a_rect_id);
+
+  // If not visible, move off-screen
+  if (u_hover_visible[rectIndex] < 0.5) {
+    gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+    return;
+  }
+
+  // Get rect data from uniforms
+  vec4 hoverPos = u_hover_positions[rectIndex]; // x, y, width, height
+  vec4 hoverRadius = u_hover_radii[rectIndex];
+  float hoverType = u_hover_types[rectIndex];
+
+  // Define the increase size to prevent border clipping
+  float borderThickness = 2.0 * u_dpi;
+  float increaseSize = max(borderThickness, 10.0) + 4.0;
+
+  // Calculate the new dimensions of the quad
+  vec4 adjusted_quad = hoverPos;
+  adjusted_quad.z += 2.0 * increaseSize; // increase width
+  adjusted_quad.w += 2.0 * increaseSize; // increase height
+
+  // Adjust vertex positions to scale from the center of the rectangle
+  // Calculate the center of the original quad
+  vec2 center = vec2(
+    hoverPos.x + hoverPos.z / 2.0,
+    hoverPos.y + hoverPos.w / 2.0
+  );
+
+  // Calculate vertex offset relative to dummy quad center
+  vec2 dummyCenter = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+  vec2 vertexOffset = a_position - dummyCenter;
+
+  // Map vertex offset to new rect
+  vec2 newOffset =
+    vertexOffset *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+
+  // New position is center plus the new offset
+  vec2 newPosition = center + newOffset;
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = newPosition * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Pass the dimensions to fragment shader for SDF calculations
+  vec4 transformed_quad = vec4(
+    (hoverPos.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y -
+      hoverPos.y * u_scale -
+      hoverPos.w * u_scale -
+      u_offset_y) *
+      u_dpi,
+    hoverPos.z * u_scale * u_dpi,
+    hoverPos.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  // Expand the rect by 2px for border rendering
+  float borderExpansion = 2.0 * u_dpi;
+
+  // Set varying variables
+  v_rect_radius = hoverRadius * u_dpi;
+  v_rect_size = vec2(
+    v_quad.z + 2.0 * borderExpansion,
+    v_quad.w + 2.0 * borderExpansion
+  );
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+  v_rect_type = hoverType;
+  // Pass the original artboard-space quad position for stable dash pattern
+  v_quad_artboard_pos = vec2(hoverPos.x, hoverPos.y);
+}

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

@@ -0,0 +1,25 @@
+<template>
+  <Overlay v-if="isVisible && gl && animation.webglEnabled.value" :gl="gl" />
+</template>
+
+<script setup>
+import Overlay from "./Overlay/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+defineBlokkliFeature({
+  id: "hover",
+  icon: "selection",
+  label: "Hover",
+  description: "Renders a border around blocks that are currently being hovered."
+});
+const { selection, ui, animation, dom } = useBlokkli();
+const gl = animation.gl();
+const isVisible = computed(
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+);
+</script>
+
+<script>
+export default {
+  name: "Hover"
+};
+</script>

package/dist/runtime/components/Edit/Features/Hover/index.vue.d.ts

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

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

@@ -51,8 +51,12 @@
         }}
       </div>
       <div
-        class="bk-radio-list"
-        :style="{ opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1 }"
+        :style="{
+  opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1,
+  height: '420px',
+  overflow: 'auto',
+  marginTop: '10px'
+}"
       >
         <label v-for="entity in entities" :key="entity.uuid" class="bk-radio">
           <input

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

@@ -13,13 +13,13 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <ExistingDialog
         v-if="showModal"
         @confirm="onSubmit($event.sourceUuid, $event.fields)"
         @cancel="showModal = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -32,6 +32,7 @@ import {
   defineBlokkliFeature
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import ExistingDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
   id: "import-existing",

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -46,16 +46,15 @@ const props = defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: false }
 });
+const { $t, element } = useBlokkli();
 const DURATION = 530;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {
-  const el = document.querySelector(
-    `[data-bk-library-item-uuid="${props.uuid}"]`
+  return element.query(
+    document.documentElement,
+    `[data-bk-library-item-uuid="${props.uuid}"]`,
+    "Get originating library item element"
   );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-  return null;
 }
 function onEnter(el, done) {
   if (el instanceof HTMLElement) {
@@ -125,7 +124,6 @@ function onAfterLeave(el) {
     emit("close");
   }
 }
-const { $t } = useBlokkli();
 const iframe = ref(null);
 const isLoaded = ref(false);
 const isLoading = ref(true);