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

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

@@ -0,0 +1,387 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <BlokkliTransition name="caret-tooltip">
+      <Overlay
+        v-if="addData"
+        :key="addData.key"
+        :bundles="addData.allowedBundles"
+        :anchor-el="addData.anchorEl"
+        :anchor-coordinates="addData.anchorCoordinates"
+        :label="addData.label"
+        @select="onSelectBundle"
+        @close="closeOverlay"
+        @action="onSelectAction"
+      />
+    </BlokkliTransition>
+  </Teleport>
+
+  <Renderer @toggle="onRendererToggle" @toggle-field="onRendererToggleField" />
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { computed, useBlokkli, ref, watch } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
+import {
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP,
+  determineCanAddChildren
+} from "#blokkli/helpers/dropTargets";
+import Overlay from "./Overlay/index.vue";
+import { renderCycle } from "#blokkli/helpers/renderCycle";
+import { getFieldKey } from "#blokkli/helpers";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
+import Renderer from "./Renderer/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+const props = defineProps({
+  items: { type: Array, required: true }
+});
+const { dom, state, eventBus, types, $t, blocks, fields } = useBlokkli();
+const shouldRender = computed(() => {
+  return props.items.length === 1;
+});
+const block = computed(() => {
+  if (props.items.length === 1) {
+    return props.items[0] ?? null;
+  }
+  return null;
+});
+const uuid = computed(() => {
+  return block.value?.uuid ?? null;
+});
+const emptyBlockFields = computed(() => {
+  if (!block.value) {
+    return [];
+  }
+  const uuid2 = block.value.uuid;
+  return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).map((field) => {
+    const key = getFieldKey(uuid2, field.name);
+    const count = state.getFieldBlockCount(key);
+    return {
+      key,
+      count,
+      name: field.name
+    };
+  }).filter((v) => {
+    return v.count === 0;
+  });
+});
+const containerStyle = ref({ visibility: "hidden" });
+const orientationClass = ref("");
+const containerRect = ref(null);
+const fieldButtonSlots = ref([]);
+const bundleLabel = computed(() => {
+  if (!block.value) {
+    return "";
+  }
+  return types.getBlockBundleDefinition(block.value.bundle)?.label || block.value.bundle;
+});
+const allowedBundlesForField = computed(() => {
+  if (!block.value) {
+    return [];
+  }
+  const blockData = blocks.getBlock(block.value.uuid);
+  if (!blockData) {
+    return [];
+  }
+  const field = fields.find(blockData.host.uuid, blockData.host.fieldName);
+  if (!field) {
+    return [];
+  }
+  return field.allowedBundles.filter((bundle) => !isInternalBundle(bundle));
+});
+const singleAllowedBundleLabel = computed(() => {
+  if (allowedBundlesForField.value.length === 1) {
+    const bundle = allowedBundlesForField.value[0];
+    if (bundle) {
+      return types.getBlockBundleDefinition(bundle)?.label || bundle;
+    }
+  }
+  return null;
+});
+const beforeTooltip = computed(() => {
+  if (singleAllowedBundleLabel.value) {
+    return $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
+      "@bundle",
+      singleAllowedBundleLabel.value
+    );
+  }
+  return $t("addButtonBeforeBundle", "Add before...");
+});
+const afterTooltip = computed(() => {
+  if (singleAllowedBundleLabel.value) {
+    return $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+      "@bundle",
+      singleAllowedBundleLabel.value
+    );
+  }
+  return $t("addButtonAfterBundle", "Add after...");
+});
+const fieldTooltips = computed(() => {
+  if (!block.value || !bundleLabel.value) {
+    return [];
+  }
+  return emptyBlockFields.value.map((field) => {
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).find((f) => f.name === field.name);
+    const fieldLabel = fieldConfig?.label || field.name;
+    const fieldElement = fields.find(block.value.uuid, field.name);
+    if (fieldElement) {
+      const allowedBundles = fieldElement.allowedBundles.filter(
+        (bundle) => !isInternalBundle(bundle)
+      );
+      if (allowedBundles.length === 1) {
+        const bundle = allowedBundles[0];
+        if (bundle) {
+          const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          return $t(
+            "addButtonBundleInsideField",
+            'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
+          ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
+        }
+      }
+    }
+    return $t(
+      "addButtonInsideField",
+      "Add inside @parentBundle \xBB @fieldLabel..."
+    ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
+  });
+});
+watch(emptyBlockFields, (fields2) => {
+  const neededCount = fields2.length;
+  while (fieldButtonSlots.value.length < neededCount) {
+    fieldButtonSlots.value.push({ fieldKey: void 0 });
+  }
+  for (let i = 0; i < fieldButtonSlots.value.length; i++) {
+    const slot = fieldButtonSlots.value[i];
+    if (!slot) {
+      continue;
+    }
+    if (i < fields2.length) {
+      const field = fields2[i];
+      slot.fieldKey = field?.key;
+    } else {
+      slot.fieldKey = void 0;
+    }
+  }
+});
+const addData = ref(null);
+function closeOverlay() {
+  addData.value = null;
+}
+function onSelectBundle(bundle) {
+  if (!addData.value) {
+    return;
+  }
+  eventBus.emit("block:append", {
+    bundle,
+    host: { ...addData.value.host },
+    afterUuid: addData.value.preceedingUuid
+  });
+  closeOverlay();
+}
+function onSelectAction(id) {
+  if (!addData.value) {
+    return;
+  }
+  eventBus.emit("action:placed", {
+    id,
+    field: addData.value.field,
+    preceedingUuid: addData.value.preceedingUuid,
+    host: { ...addData.value.host }
+  });
+  closeOverlay();
+}
+const cache = /* @__PURE__ */ new Map();
+function clearAllCache() {
+  cache.clear();
+  containerStyle.value = { visibility: "hidden" };
+  orientationClass.value = "";
+}
+function updateCache(uuid2) {
+  let cachedState = cache.get(uuid2);
+  if (!cachedState) {
+    const block2 = blocks.getBlock(uuid2);
+    if (!block2) {
+      return;
+    }
+    const field = fields.find(block2.host.uuid, block2.host.fieldName);
+    if (!field) {
+      return;
+    }
+    const orientation = getChildrenOrientation(field.element);
+    const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP);
+    const fieldChildren = [...field.element.children];
+    const currentCount = state.getFieldBlockCount(field.key);
+    const canShow = determineCanAddChildren(
+      field,
+      fieldChildren,
+      [],
+      // Not moving any blocks, adding a new one
+      currentCount,
+      1,
+      // Adding 1 new block
+      []
+      // Don't know which bundle will be added
+    );
+    cachedState = {
+      orientation,
+      gap,
+      canShowBeforeAfter: canShow
+    };
+    cache.set(uuid2, cachedState);
+  }
+  orientationClass.value = cachedState.orientation === "vertical" ? "bk-is-vertical" : "bk-is-horizontal";
+}
+watch(
+  uuid,
+  async (newUuid) => {
+    closeOverlay();
+    if (!shouldRender.value) {
+      containerStyle.value = { visibility: "hidden" };
+      return;
+    }
+    if (newUuid) {
+      await renderCycle();
+      updateCache(newUuid);
+    }
+  },
+  { immediate: true }
+);
+onBlokkliEvent("animationFrame:after", () => {
+  if (!shouldRender.value || !uuid.value) {
+    containerStyle.value = { visibility: "hidden" };
+    containerRect.value = null;
+    return;
+  }
+  const cachedState = cache.get(uuid.value);
+  if (!cachedState) {
+    return;
+  }
+  const blockRect = dom.getBlockRect(uuid.value);
+  if (!blockRect) {
+    return;
+  }
+  if (blockRect.width === 0) {
+    containerStyle.value = { visibility: "hidden" };
+    containerRect.value = null;
+    return;
+  }
+  containerStyle.value = {
+    transform: `translate(${blockRect.x}px, ${blockRect.y}px)`,
+    width: `${blockRect.width}px`,
+    height: `${blockRect.height}px`,
+    "--gap": `${cachedState.gap}px`,
+    visibility: "visible"
+  };
+  containerRect.value = { x: blockRect.x, y: blockRect.y };
+});
+onBlokkliEvent("state:reloaded", () => {
+  clearAllCache();
+  if (shouldRender.value && uuid.value) {
+    updateCache(uuid.value);
+  }
+});
+function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
+  const allowedBundles = field.allowedBundles.filter(
+    (bundle) => !isInternalBundle(bundle)
+  );
+  if (allowedBundles.length === 0) {
+    return;
+  }
+  const host = {
+    type: field.hostEntityType,
+    uuid: field.hostEntityUuid,
+    fieldName: field.name
+  };
+  if (allowedBundles.length === 1) {
+    const bundle = allowedBundles[0];
+    eventBus.emit("block:append", {
+      bundle,
+      host,
+      afterUuid: preceedingUuid
+    });
+    return;
+  }
+  addData.value = {
+    key,
+    allowedBundles,
+    preceedingUuid,
+    host,
+    anchorEl,
+    anchorCoordinates,
+    label,
+    field
+  };
+}
+function getPreceedingUuidBefore(uuid2, field) {
+  const children = [...field.element.children];
+  let prevUuid = void 0;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (!child) {
+      continue;
+    }
+    const childUuid = child.dataset.uuid;
+    if (childUuid === uuid2) {
+      return prevUuid;
+    }
+    prevUuid = childUuid;
+  }
+  return void 0;
+}
+function onRendererToggle(data) {
+  const key = data.position;
+  if (addData.value?.key === key) {
+    return closeOverlay();
+  }
+  if (!uuid.value) {
+    return;
+  }
+  const cachedState = cache.get(uuid.value);
+  if (!cachedState) {
+    return;
+  }
+  const block2 = blocks.getBlock(uuid.value);
+  if (!block2) {
+    return;
+  }
+  const field = fields.find(block2.host.uuid, block2.host.fieldName);
+  if (!field) {
+    return;
+  }
+  if (!field.allowedBundles.length) {
+    return;
+  }
+  let preceedingUuid;
+  let label;
+  if (data.position === "before") {
+    preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
+    label = beforeTooltip.value.replace("...", "");
+  } else {
+    preceedingUuid = uuid.value;
+    label = afterTooltip.value.replace("...", "");
+  }
+  setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
+}
+function onRendererToggleField(data) {
+  const key = "field:" + data.index;
+  if (addData.value?.key === key) {
+    return closeOverlay();
+  }
+  if (!uuid.value) {
+    return;
+  }
+  const emptyField = emptyBlockFields.value[data.index];
+  if (!emptyField) {
+    return;
+  }
+  const field = fields.find(uuid.value, emptyField.name);
+  if (!field) {
+    return;
+  }
+  const label = (fieldTooltips.value[data.index] || "").replace("...", "");
+  setAddData(key, field, label, void 0, void 0, data.coordinates);
+}
+onBlokkliEvent("dragging:start", closeOverlay);
+</script>

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

@@ -0,0 +1,6 @@
+import type { RenderedFieldListItem } from '#blokkli/types';
+type __VLS_Props = {
+    items: RenderedFieldListItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,4 +1,5 @@
-precision mediump float;
+precision highp float;
+
 varying vec4 v_quad;
 varying vec3 v_color;
 varying vec4 v_rect_radius;
@@ -15,7 +16,7 @@ uniform float u_time;
 uniform float u_is_transforming;
 uniform vec2 u_resolution;
 
-#define PI (3.141592653589793)
+#define PI 3.141592653589793
 
 int pseudoQuadrant(vec2 p) {
   return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
@@ -80,9 +81,10 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
     (sin(u_time / 270.0 - v_rect_id + offset) + 1.0) / 2.0
   );
 
-  if (u_is_transforming >= 0.5) {
-    borderThickness = (t * 0.7 + 0.5) * borderThickness;
-  }
+  // Smoothly transition borderThickness animation
+  float animatedThickness = (t * 0.7 + 0.5) * borderThickness;
+  borderThickness = mix(borderThickness, animatedThickness, u_is_transforming);
+
   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);
@@ -100,12 +102,15 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
   float borderAlpha =
     1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
 
+  // Smoothly transition stripe pattern
   vec4 stripedFill = vec4(1.0, 1.0, 1.0, 0.0);
-  if (u_is_transforming >= 0.5) {
-    stripedFill = fill;
-    stripedFill.a = getStripePattern(posRelativeToQuad, u_time);
-    borderAlpha *= t + 0.6;
-  }
+  vec4 animatedStripedFill = fill;
+  animatedStripedFill.a = getStripePattern(posRelativeToQuad, u_time);
+  stripedFill = mix(stripedFill, animatedStripedFill, u_is_transforming);
+
+  // Smoothly transition borderAlpha modification
+  float animatedBorderAlpha = borderAlpha * (t + 0.6);
+  borderAlpha = mix(borderAlpha, animatedBorderAlpha, u_is_transforming);
 
   vec4 res_with_fill = mix(bg, stripedFill, fillAlpha * stripedFill.a);
   return mix(res_with_fill, border, borderAlpha * border.a);

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

@@ -4,7 +4,8 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount } from "#imports";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -13,12 +14,14 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
-  gl: { type: null, required: true }
+  gl: { type: null, required: true },
+  hasHostSelected: { type: Boolean, required: true }
 });
-const { animation, theme, dom, ui } = useBlokkli();
+const { animation, theme, dom, ui, state } = useBlokkli();
 const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
@@ -32,11 +35,28 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         return uuid + "no_rect";
       }
       return uuid + rect.time;
-    }).join("_");
+    }).join("_") + "_host_" + props.hasHostSelected;
     const hasChanged = force || this.prevKey !== key;
     if (hasChanged) {
       this.reset();
       this.lastCount = 0;
+      if (props.hasHostSelected) {
+        this.addRectangle(
+          {
+            id: "host",
+            height: ui.artboardSize.value.height,
+            width: ui.artboardSize.value.width,
+            x: 0,
+            y: 0,
+            radius: [0, 0, 0, 0],
+            isInverted: false,
+            isFromLibrary: false
+          },
+          3
+          // Type 3 = host selection
+        );
+        this.lastCount++;
+      }
       for (let i = 0; i < props.blocks.length; i++) {
         const block = props.blocks[i];
         if (this.added.has(block.uuid)) {
@@ -48,7 +68,14 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         if (!rect || !el) {
           continue;
         }
-        const style = theme.getDraggableStyle(el);
+        const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
+        const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
+        let type = 0;
+        if (isFromLibrary) {
+          type = 2;
+        } else if (style?.isInverted) {
+          type = 1;
+        }
         this.addRectangle(
           {
             id: block.uuid,
@@ -56,10 +83,11 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
             width: rect.width,
             x: rect.x,
             y: rect.y,
-            radius: style.radius,
-            isInverted: style.isInverted
+            radius: style?.radius ?? [0, 0, 0, 0],
+            isInverted: !!style?.isInverted,
+            isFromLibrary
           },
-          style.isInverted ? 1 : 0
+          type
         );
         this.lastCount++;
       }
@@ -72,23 +100,78 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new SelectionRectangleBufferCollector(props.gl);
-onBlokkliEvent("canvas:draw", (e) => {
-  props.gl.useProgram(programInfo.program);
-  setUniforms(programInfo, {
-    u_color_default: toShaderColor(theme.accent.value[600]),
-    u_color_inverted: [255, 255, 255],
-    u_is_transforming: ui.isTransforming.value ? 1 : 0,
-    u_time: e.time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  const { info, hasChanged } = collector.getBufferInfo();
-  if (!info) {
-    return;
+const hasTransformingStyle = computed(
+  () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
+);
+const selectionColorOverride = computed(() => {
+  const color = ui.selectionColor.value;
+  if (!color) {
+    return null;
+  }
+  if (color === "mono") {
+    return toShaderColor(theme.getColor(color, "500"));
+  } else if (color === "accent") {
+    return toShaderColor(theme.getColor(color, "700"));
+  }
+  return toShaderColor(theme.getColor(color, "normal"));
+});
+const getColorDefault = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
   }
-  if (hasChanged) {
+  return toShaderColor(theme.accent.value[600]);
+});
+const getColorInverted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor([255, 255, 255]);
+});
+const getColorLibrary = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor(theme.lime.value.normal);
+});
+const getColorHost = useTransitionedValue(() => {
+  return toShaderColor(theme.mono.value[700]);
+});
+const getTransforming = useTransitionedValue(() => {
+  return ui.isTransforming.value ? 1 : 0;
+});
+defineRenderer("selection-overlay", {
+  zIndex: 100,
+  render: (ctx) => {
+    props.gl.useProgram(programInfo.program);
+    const { info } = collector.getBufferInfo();
+    if (!info) {
+      return;
+    }
+    setUniforms(programInfo, {
+      u_color_default: getColorDefault(),
+      u_color_inverted: getColorInverted(),
+      u_color_library: getColorLibrary(),
+      u_color_host: getColorHost(),
+      u_artboard_size: [
+        ui.artboardSize.value.width,
+        ui.artboardSize.value.height
+      ],
+      u_is_transforming: getTransforming(),
+      u_time: ctx.time
+    });
+    animation.setSharedUniforms(props.gl, programInfo);
     setBuffersAndAttributes(props.gl, programInfo, info);
+    drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
   }
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 onBlokkliEvent("ui:resized", function() {
   collector.reset();
@@ -96,9 +179,6 @@ onBlokkliEvent("ui:resized", function() {
 onBlokkliEvent("state:reloaded", function() {
   collector.reset();
 });
-onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-});
 </script>
 
 <script>

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

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

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

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 // [x, y] position.
 attribute vec2 a_position;
@@ -18,6 +18,8 @@ uniform float u_offset_y;
 uniform vec2 u_resolution;
 uniform vec3 u_color_default;
 uniform vec3 u_color_inverted;
+uniform vec3 u_color_library;
+uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
 varying vec4 v_quad;
@@ -79,8 +81,15 @@ void main() {
 
   v_rect_width = adjusted_quad.x;
 
-  // Set color and other varying variables
-  v_color = a_rect_type > 0.5 ? u_color_inverted : u_color_default;
+  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host
+  v_color = u_color_default;
+  if (a_rect_type > 2.5) {
+    v_color = u_color_host;
+  } else if (a_rect_type > 1.5) {
+    v_color = u_color_library;
+  } else if (a_rect_type > 0.5) {
+    v_color = u_color_inverted;
+  }
   v_rect_radius = a_rect_radius * u_dpi;
   v_thickness = thickness;
   v_rect_id = a_rect_id;

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

@@ -22,11 +22,11 @@ import { useBlokkli, computed } from "#imports";
 const props = defineProps({
   uuids: { type: Array, required: true }
 });
-const { ui, dom } = useBlokkli();
+const { ui, dom, blocks } = useBlokkli();
 const artboard = ui.artboardElement();
 const items = computed(() => {
   return props.uuids.map((uuid) => {
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (!block) {
       return null;
     }