@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -1,7 +1,12 @@
 <template>
   <Teleport to="body">
-    <BlokkliTransition name="editable" :enabled="hasTransition">
-      <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
+      <Overlay
+        v-if="selectedEditable"
+        v-bind="selectedEditable"
+        :key="key"
+        @close="close"
+      />
     </BlokkliTransition>
   </Teleport>
 </template>
@@ -19,6 +24,7 @@ import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "editable-field",
   icon: "textbox",
@@ -26,41 +32,47 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
   description: "Implements a form overlay to edit a single field of a block."
 });
-const { selection, adapter, types, $t, dom, runtimeConfig, state } = useBlokkli();
-const editable = ref(null);
+const { selection, adapter, types, $t, state, directive, blocks, context } = useBlokkli();
+const selectedEditable = ref(null);
 const hasTransition = ref(false);
 const key = computed(() => {
-  if (!editable.value) {
+  if (!selectedEditable.value) {
     return "";
   }
-  return editable.value.host.uuid + editable.value.fieldName;
+  return selectedEditable.value.host.uuid + selectedEditable.value.fieldName;
 });
 const getHost = (uuid) => {
   if (uuid) {
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (block) {
-      return block;
+      return {
+        type: itemEntityType,
+        bundle: block.bundle,
+        uuid: block.uuid
+      };
     }
   }
-  return dom.findClosestEntityContext(dom.getActiveProviderElement());
+  return {
+    type: context.value.entityType,
+    bundle: context.value.entityBundle,
+    uuid: context.value.entityUuid
+  };
 };
 const buildEditable = (fieldName, uuid) => {
   const host = getHost(uuid);
   if (!host) {
     return;
   }
-  const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
-  const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
-  if (hostEntityBundle === "from_library") {
+  if (host.bundle === "from_library") {
     return;
   }
   const config = types.editableFieldConfig.forName(
-    hostEntityType,
-    hostEntityBundle,
+    host.type,
+    host.bundle,
     fieldName
   );
   if (!config) {
-    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`;
+    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${host.type}" of bundle "${host.bundle}"`;
     if (uuid) {
       message += ` with uuid "${uuid}"`;
     }
@@ -69,10 +81,7 @@ const buildEditable = (fieldName, uuid) => {
   if (config.type === "frame" && !adapter.buildEditableFrameUrl) {
     return;
   }
-  const hostElement = "itemBundle" in host ? host.element() : dom.getActiveProviderElement();
-  const element = hostElement.querySelector(
-    `[data-blokkli-editable-field="${fieldName}"]`
-  );
+  const element = directive.findEditableElement(fieldName, host);
   if (!(element instanceof HTMLElement)) {
     return;
   }
@@ -89,30 +98,19 @@ onBlokkliEvent("editable:focus", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  hasTransition.value = !editable.value;
-  editable.value = buildEditable(e.fieldName, e.uuid) || null;
-  if (editable.value) {
+  hasTransition.value = !selectedEditable.value;
+  selectedEditable.value = buildEditable(e.fieldName, e.uuid) || null;
+  if (selectedEditable.value) {
     selection.editableActive.value = true;
   }
 });
 defineCommands(() => {
-  const editables = selection.blocks.value.flatMap((v) => {
-    return [...v.element().querySelectorAll("[data-blokkli-editable-field]")].map((el) => {
-      if (!(el instanceof HTMLElement)) {
-        return;
-      }
-      const block = el.closest("[data-uuid]");
-      if (!(block instanceof HTMLElement)) {
-        return;
-      }
-      if (block.dataset.uuid !== v.uuid) {
-        return;
-      }
-      const name = el.dataset.blokkliEditableField;
-      if (!name) {
-        return;
-      }
-      return buildEditable(name, block.dataset.uuid);
+  if (selection.items.value.length > 5) {
+    return [];
+  }
+  const editables = selection.items.value.flatMap((item) => {
+    return directive.getEditablesForBlock(item.uuid).map((v) => {
+      return buildEditable(v.fieldName, item.uuid);
     }).filter(falsy);
   });
   return editables.map((v) => {
@@ -126,7 +124,7 @@ defineCommands(() => {
       icon: "textbox",
       disabled: false,
       callback: () => {
-        editable.value = v;
+        selectedEditable.value = v;
       }
     };
   });
@@ -134,16 +132,16 @@ defineCommands(() => {
 watch(selection.editableActive, (isActive) => {
   if (!isActive) {
     hasTransition.value = true;
-    editable.value = null;
+    selectedEditable.value = null;
   }
 });
-watch(editable, (v) => {
+watch(selectedEditable, (v) => {
   if (!v && selection.editableActive.value) {
     selection.editableActive.value = false;
   }
 });
 const close = () => {
-  editable.value = null;
+  selectedEditable.value = null;
   selection.editableActive.value = false;
 };
 </script>

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

@@ -37,14 +37,16 @@
         <ul class="bk-library-dialog-list">
           <li
             v-for="(item, index) in fragments"
+            v-show="visible === null || visible.includes(item.name)"
+            ref="itemElements"
             :key="item.name"
             :class="{
   'bk-is-selected': selectedItem === item.name
 }"
+            :data-bk-fragment-name="item.name"
             @click="selectedItem = item.name"
           >
             <FragmentItem
-              v-show="visible === null || visible.includes(item.name)"
               :name="item.name"
               :label="item.label"
               :description="item.description"
@@ -65,7 +67,7 @@
 <script setup>
 import { FormOverlay } from "#blokkli/components";
 import { falsy } from "#blokkli/helpers";
-import { ref, useBlokkli, computed, watch } from "#imports";
+import { ref, useBlokkli, computed, watch, useTemplateRef } from "#imports";
 import FragmentItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -73,7 +75,7 @@ const props = defineProps({
 const { $t, definitions } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
 const searchText = ref("");
-const listEl = ref(null);
+const itemElements = useTemplateRef("itemElements");
 const selectedItem = ref("");
 const allowedInField = computed(() => props.field.allowedFragments || []);
 const fragments = computed(
@@ -91,15 +93,15 @@ const onClose = () => {
 };
 const elements = ref([]);
 const buildElements = () => {
-  if (!listEl.value) {
+  if (!itemElements.value) {
     return;
   }
-  elements.value = [...listEl.value.querySelectorAll(".bk-library-list-item")].map((el) => {
+  elements.value = itemElements.value.map((el) => {
     if (el instanceof HTMLElement) {
-      const uuid = el.dataset.libraryItemUuid;
-      if (uuid) {
+      const name = el.dataset.bkFragmentName;
+      if (name) {
         return {
-          uuid,
+          name,
           text: el.textContent?.toLowerCase() || ""
         };
       }
@@ -115,6 +117,6 @@ const visible = computed(() => {
   if (!searchText.value || !elements.value.length) {
     return null;
   }
-  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.uuid);
+  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
 });
 </script>

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

@@ -45,9 +45,9 @@ const { adapter } = defineBlokkliFeature({
 });
 const { state, $t, types, selection, dom } = useBlokkli();
 const isEnabled = computed(() => {
-  if (selection.blocks.value.length === 1) {
-    const block = selection.blocks.value[0];
-    const field = dom.findField(block.hostUuid, block.hostFieldName);
+  const item = selection.item.value;
+  if (item) {
+    const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
     return !!field?.allowedFragments.length;
   }
   return true;

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

@@ -3,6 +3,7 @@
     id="history"
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
+    edit-only
     :tour-text="
   $t(
     'historyTourText',
@@ -74,9 +75,11 @@ const { state, $t, ui, selection, eventBus } = useBlokkli();
 const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
 const mutationsCount = computed(() => mutations.value.length);
 const useMouseForHistory = computed(() => settings.value.useMouseButtons);
-const canUndo = computed(() => currentMutationIndex.value >= 0);
+const canUndo = computed(
+  () => currentMutationIndex.value >= 0 && state.canEdit.value
+);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutationsCount.value - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1 && state.canEdit.value
 );
 const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
 function updateCurrentHistorySelection() {

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;