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

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

@@ -1,27 +1,8 @@
 <template>
-  <PluginAddAction
-    v-if="
-  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-"
-    type="fragment"
-    :title="$t('fragmentsAddFragmentAction', 'Add fragment')"
-    :description="
-  $t(
-    'fragmentsAddFragmentDescription',
-    '<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>'
-  )
-"
-    :disabled="!isEnabled"
-    item-bundle="blokkli_fragment"
-    icon="fragment"
-    color="accent"
-    @placed="placedAction = $event"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <FragmentsDialog
-        v-if="placedAction && adapter.getLibraryItems"
+        v-if="placedAction"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddFragment"
@@ -32,9 +13,9 @@
 
 <script setup>
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginAddAction } from "#blokkli/plugins";
 import FragmentsDialog from "./Dialog/index.vue";
 import { BlokkliTransition } from "#blokkli/components";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
 const { adapter } = defineBlokkliFeature({
   id: "fragments",
   icon: "fragment",
@@ -43,15 +24,7 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["fragmentsAddBlock"],
   dependencies: ["add-list"]
 });
-const { state, $t, types, selection, dom } = useBlokkli();
-const isEnabled = computed(() => {
-  const item = selection.item.value;
-  if (item) {
-    const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
-    return !!field?.allowedFragments.length;
-  }
-  return true;
-});
+const { state, $t, types, dom, ui } = useBlokkli();
 const placedAction = ref(null);
 const onAddFragment = async (name) => {
   if (!placedAction.value || !adapter.fragmentsAddBlock) {
@@ -69,6 +42,29 @@ const onAddFragment = async (name) => {
 const isSupportedOnEntity = computed(
   () => types.generallyAvailableBundles.find((v) => v.id === "blokkli_fragment")
 );
+defineAddAction(() => {
+  if (!isSupportedOnEntity.value) {
+    return;
+  }
+  return {
+    id: "fragment",
+    icon: "fragment",
+    color: "accent",
+    itemBundle: "blokkli_fragment",
+    title: $t("fragmentsAddFragmentAction", "Add fragment"),
+    description: $t(
+      "fragmentsAddFragmentDescription",
+      "<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>"
+    ),
+    callback: (action) => {
+      placedAction.value = action;
+    },
+    enabled: (item) => {
+      const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
+      return !!field?.allowedFragments.length;
+    }
+  };
+});
 </script>
 
 <script>

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

@@ -0,0 +1,141 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 v_quad;
+in vec4 v_rect_radius;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_rect_type;
+in vec2 v_quad_artboard_pos;
+// Optimized varyings calculated in vertex shader
+in vec4 v_corner_radii;
+in float v_border_thickness;
+in vec2 v_half_size;
+in vec3 v_color;
+in float v_dash_cycle;
+in vec2 v_rect_size_artboard;
+
+out vec4 fragColor;
+
+uniform float u_opacity;
+
+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 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, v_half_size, v_corner_radii);
+
+  // 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 u_borderSoftness = 1.0;
+
+    // Render fill
+    float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, mainDist);
+    vec4 fillColor = vec4(v_color, 0.2);
+
+    // Render solid border (non-dashed)
+    float borderAlpha =
+      1.0 -
+      smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - v_border_thickness);
+    vec4 borderColor = vec4(v_color, 1.0);
+
+    // Combine fill and border
+    vec4 combined = mix(
+      vec4(fillColor.rgb, fillAlpha * fillColor.a),
+      borderColor,
+      borderAlpha * borderColor.a
+    );
+
+    combined.a *= u_opacity;
+    fragColor = combined;
+    return;
+  }
+
+  // For blocks (type 0, 1, and 3), render border
+  float u_borderSoftness = 1.0;
+
+  float borderAlpha =
+    1.0 -
+    smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - v_border_thickness);
+
+  // Apply dashed pattern for all blocks
+  // Calculate perimeter distance in artboard space for scale-independent dashing
+
+  // Convert pixel position from viewport to artboard space
+  vec2 viewportToArtboardRatio = v_rect_size_artboard / v_rect_size;
+  vec2 posRelativeToQuad_artboard = posRelativeToQuad * viewportToArtboardRatio;
+
+  // Get artboard-space half dimensions
+  vec2 halfSize_artboard = v_rect_size_artboard / 2.0;
+
+  // Convert from center-relative to top-left-relative coordinates
+  vec2 posFromTopLeft = posRelativeToQuad_artboard + halfSize_artboard;
+
+  // Clamp to rect bounds to avoid edge issues
+  vec2 p = clamp(posFromTopLeft, vec2(0.0), v_rect_size_artboard);
+
+  // Two continuous dash paths anchored to visual top-left:
+  // Path 1: TOP (left→right) → RIGHT (top→bottom)
+  // Path 2: LEFT (top→bottom) → BOTTOM (left→right)
+  float perimeterDistance = 0.0;
+  float width = v_rect_size_artboard.x;
+  float height = v_rect_size_artboard.y;
+
+  // Determine which edge we're on based on distance to edges
+  vec2 absP = abs(posRelativeToQuad_artboard);
+  float dx = absP.x - halfSize_artboard.x;
+  float dy = absP.y - halfSize_artboard.y;
+
+  if (dy > dx) {
+    // Closer to top or bottom edge
+    if (posRelativeToQuad_artboard.y > 0.0) {
+      // Visual TOP edge: starts at top-left, goes left to right
+      perimeterDistance = p.x;
+    } else {
+      // Visual BOTTOM edge: continues from LEFT edge, then goes left to right
+      perimeterDistance = height + p.x;
+    }
+  } else {
+    // Closer to left or right edge
+    if (posRelativeToQuad_artboard.x < 0.0) {
+      // Visual LEFT edge: starts at visual top-left (0 at top, height at bottom)
+      perimeterDistance = height - p.y;
+    } else {
+      // Visual RIGHT edge: continues from TOP edge (width at visual top, width+height at visual bottom)
+      perimeterDistance = width + (height - p.y);
+    }
+  }
+
+  float dashPosition = mod(perimeterDistance, v_dash_cycle);
+  // dashWidth = v_dash_cycle / 2.0 (since dashWidth = dashGap = 7.0, dashCycle = 14.0)
+  float dashFactor = step(dashPosition, v_dash_cycle / 2.0);
+
+  // Only show dashes...
+  borderAlpha *= dashFactor;
+
+  vec4 borderColor = vec4(v_color, 1.0);
+  vec4 finalColor = mix(
+    vec4(0.0, 0.0, 0.0, 0.0),
+    borderColor,
+    borderAlpha * borderColor.a
+  );
+
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
+}

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

@@ -6,16 +6,16 @@
 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 {
+  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) {
@@ -48,22 +48,13 @@ let previousEditableFieldRect = null;
 const isHoveringEditableField = ref(false);
 const isHoveringSelectedBlock = ref(false);
 class HoverRectangleBufferCollector extends RectangleBufferCollector {
+  getBufferInfo(gl) {
+    if (!this.bufferInfo) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return this.bufferInfo;
+  }
 }
-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;
@@ -201,11 +192,11 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
 }
 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)
+    u_color_mono: theme.mono.value[300],
+    u_color_accent: theme.accent.value[600],
+    u_color_teal: theme.teal.value.normal,
+    u_color_white: [255, 255, 255],
+    u_color_lime: theme.lime.value.normal
   };
 });
 onBlokkliEvent("state:reloaded", () => {
@@ -214,9 +205,26 @@ onBlokkliEvent("state:reloaded", () => {
 onBlokkliEvent("ui:resized", () => {
   resetHoverState();
 });
-defineRenderer("hover-overlay", {
+const { collector } = defineRenderer("hover-overlay", {
   zIndex: 200,
-  enabled: () => !selection.isChangingOptions.value,
+  collector: () => {
+    const c = new HoverRectangleBufferCollector();
+    for (let i = 0; i < MAX_RECTS; i++) {
+      c.addRectangle(
+        {
+          id: `hover-rect-${i}`,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          radius: [0, 0, 0, 0]
+        },
+        0
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
   cursor: () => {
     if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
       return "text";
@@ -226,10 +234,8 @@ defineRenderer("hover-overlay", {
     }
     return null;
   },
-  render: (ctx) => {
-    if (!bufferInfo) {
-      return;
-    }
+  render: (ctx, gl, program) => {
+    const bufferInfo = collector.getBufferInfo(gl);
     if (!ui.openTooltip.value) {
       updateHoverState(
         ctx.mouseX,
@@ -239,17 +245,198 @@ defineRenderer("hover-overlay", {
         ctx.artboardSize
       );
     }
-    props.gl.useProgram(programInfo.program);
-    setUniforms(programInfo, uniforms.value);
-    setUniforms(programInfo, {
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_color_mono: toShaderColor(uniforms.value.u_color_mono),
+      u_color_accent: toShaderColor(uniforms.value.u_color_accent),
+      u_color_teal: toShaderColor(uniforms.value.u_color_teal),
+      u_color_white: toShaderColor(uniforms.value.u_color_white),
+      u_color_lime: toShaderColor(uniforms.value.u_color_lime),
       u_hover_positions: hoverState.positions,
       u_hover_radii: hoverState.radii,
       u_hover_types: hoverState.types,
-      u_hover_visible: hoverState.visible
+      u_hover_visible: hoverState.visible,
+      u_opacity: ctx.changeOptionsTransition
     });
-    animation.setSharedUniforms(props.gl, programInfo);
-    setBuffersAndAttributes(props.gl, programInfo, bufferInfo);
-    drawBufferInfo(props.gl, bufferInfo, props.gl.TRIANGLES);
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfo);
+    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const rgbaToCss = (rgb, alpha) => {
+      return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+    };
+    const colors = uniforms.value;
+    const borderThickness = 1.5 * ctx.dpi;
+    const dashLength = 7 * ctx.dpi;
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    for (let i = 0; i < MAX_RECTS; i++) {
+      if (hoverState.visible[i] !== 1) {
+        continue;
+      }
+      const x = hoverState.positions[i * 4 + 0];
+      const y = hoverState.positions[i * 4 + 1];
+      const width = hoverState.positions[i * 4 + 2];
+      const height = hoverState.positions[i * 4 + 3];
+      const radiusTopLeft = hoverState.radii[i * 4 + 0];
+      const radiusTopRight = hoverState.radii[i * 4 + 1];
+      const radiusBottomRight = hoverState.radii[i * 4 + 2];
+      const radiusBottomLeft = hoverState.radii[i * 4 + 3];
+      const viewportX = (x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = height * ctx.artboardScale * ctx.dpi;
+      const type = hoverState.types[i];
+      if (type === 2) {
+        ctx2d.fillStyle = rgbaToCss(colors.u_color_teal, 0.2);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * 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.fill();
+        ctx2d.strokeStyle = rgbToCss(colors.u_color_teal);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([]);
+        ctx2d.stroke();
+      } else {
+        let strokeColor = colors.u_color_mono;
+        if (type === 4) {
+          strokeColor = colors.u_color_lime;
+        } else if (type === 3) {
+          strokeColor = colors.u_color_white;
+        } else if (type === 1) {
+          strokeColor = colors.u_color_accent;
+        }
+        ctx2d.strokeStyle = rgbToCss(strokeColor);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([dashLength, dashLength]);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * 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.setLineDash([]);
+    }
+    ctx2d.globalAlpha = 1;
   }
 });
 </script>

package/dist/runtime/components/Edit/Features/Hover/Renderer/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/Hover/{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;
@@ -23,13 +25,27 @@ 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
 
+// Color uniforms
+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;
+
 // 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;
+out vec4 v_quad;
+out vec4 v_rect_radius;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_rect_type;
+out vec2 v_quad_artboard_pos;
+// Optimized varyings to reduce fragment shader calculations
+out vec4 v_corner_radii;
+out float v_border_thickness;
+out vec2 v_half_size;
+out vec3 v_color;
+out float v_dash_cycle;
+out vec2 v_rect_size_artboard;
 
 void main() {
   int rectIndex = int(a_rect_id);
@@ -114,4 +130,26 @@ void main() {
   v_rect_type = hoverType;
   // Pass the original artboard-space quad position for stable dash pattern
   v_quad_artboard_pos = vec2(hoverPos.x, hoverPos.y);
+
+  // Calculate optimized values once per vertex instead of per fragment
+  // Corner radii clamped to max radius
+  v_corner_radii = min(v_rect_radius, min(v_rect_size.x, v_rect_size.y) / 2.0);
+
+  v_border_thickness = 1.5 * u_dpi;
+  v_half_size = v_rect_size / 2.0;
+  v_dash_cycle = 14.0 - u_scale * 1.0;
+  v_rect_size_artboard = vec2(hoverPos.z, hoverPos.w);
+
+  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library)
+  if (hoverType > 3.5) {
+    v_color = u_color_lime;
+  } else if (hoverType > 2.5) {
+    v_color = u_color_white;
+  } else if (hoverType > 1.5) {
+    v_color = u_color_teal;
+  } else if (hoverType > 0.5) {
+    v_color = u_color_accent;
+  } else {
+    v_color = u_color_mono;
+  }
 }

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

@@ -1,20 +1,23 @@
 <template>
-  <Overlay v-if="isVisible && gl && animation.webglEnabled.value" :gl="gl" />
+  <ErrorBoundary v-model="isLocked" :label="$t('feature_hover_label', 'Hover')">
+    <Renderer v-if="isVisible" :key="animation.renderKey.value" />
+  </ErrorBoundary>
 </template>
 
 <script setup>
-import Overlay from "./Overlay/index.vue";
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import Renderer from "./Renderer/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { ErrorBoundary } from "#blokkli/components";
 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 { selection, ui, dom, animation, $t } = useBlokkli();
+const isLocked = ref(false);
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
 );
 </script>
 

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="import-existing"
     :title="$t('importExistingDialogTitle', 'Import from existing page')"
     :lead="
   $t(