@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue

@@ -155,6 +155,57 @@ const emitDrop = async () => {
   }
   eventBus.emit("dragging:end");
 };
+onBlokkliEvent("dragging:moveToDropTarget", (e) => {
+  let host;
+  let fieldName;
+  let preceedingUuid = null;
+  if ("block" in e) {
+    const fieldInfo = state.getFieldListForBlock(e.block);
+    if (!fieldInfo) {
+      return;
+    }
+    host = fieldInfo.entityUuid;
+    fieldName = fieldInfo.name;
+    if (e.position === "after") {
+      preceedingUuid = e.block;
+    } else {
+      const index = fieldInfo.list.findIndex((item) => item.uuid === e.block);
+      preceedingUuid = index > 0 ? fieldInfo.list[index - 1]?.uuid ?? null : null;
+    }
+  } else {
+    host = e.host;
+    fieldName = e.fieldName;
+  }
+  const field = fields.find(host, fieldName);
+  if (!field) {
+    return;
+  }
+  const fieldRect = buildFieldRect(field.key);
+  if (!fieldRect) {
+    return;
+  }
+  let target;
+  if (fieldRect.emptyChild) {
+    target = fieldRect.emptyChild;
+  } else {
+    const allUuids = [...field.element.children].map((el) => el.dataset.bkUuid).filter(falsy);
+    const children = buildChildren(fieldRect, allUuids);
+    const wanted = preceedingUuid ?? "";
+    target = children.find((child) => child.id.split(":")[2] === wanted);
+  }
+  if (!target) {
+    return;
+  }
+  eventBus.emit("scrollIntoView", {
+    rect: {
+      x: fieldRect.x + target.x,
+      y: fieldRect.y + target.y,
+      width: target.width,
+      height: target.height
+    },
+    immediate: true
+  });
+});
 const isDraggingExisting = computed(
   () => props.items.some(
     (item) => item.itemType === "existing" || item.itemType === "existing_structure"

package/dist/runtime/editor/features/dragging-overlay/index.vue

@@ -161,63 +161,8 @@ defineDropHandler("existing", {
     }
   }
 });
-let allUuidsBefore = [];
-let lastDropResult = null;
-const onDrop = async (e) => {
-  allUuidsBefore = state.getAllUuids();
-  await nextTick(async () => {
-    const itemType = e.items[0]?.itemType;
-    if (!itemType) {
-      return;
-    }
-    const handler = dragdrop.getDropHandler(itemType);
-    if (!handler) {
-      return;
-    }
-    const baseCtx = {
-      items: e.items,
-      field: e.field,
-      host: e.host,
-      afterUuid: e.preceedingUuid ?? null
-    };
-    let result;
-    if (handler.resolveBundles) {
-      const bundles = (await handler.resolveBundles(baseCtx)).filter(
-        (b) => permissions.checkBlockBundlePermission(b, "add")
-      );
-      if (bundles.length === 0) {
-        return;
-      }
-      let bundle;
-      if (bundles.length === 1) {
-        bundle = bundles[0];
-      } else {
-        const selected = await showBundleSelector(bundles);
-        if (!selected) {
-          return;
-        }
-        bundle = selected;
-      }
-      result = await handler.execute({ ...baseCtx, bundle }) || void 0;
-    } else {
-      result = await handler.execute({ ...baseCtx, bundle: "" }) || void 0;
-    }
-    lastDropResult = result ?? null;
-    eventBus.emit("dragging:end");
-    eventBus.emit("item:dropped");
-  });
-  mouseX.value = 0;
-  mouseY.value = 0;
-};
-onBlokkliEvent("state:reloaded", async function() {
-  if (!allUuidsBefore.length) {
-    return;
-  }
-  const allUuidsAfter = state.getAllUuids();
-  const newUuid = allUuidsAfter.find((uuid) => !allUuidsBefore.includes(uuid));
-  const dropResult = lastDropResult;
-  allUuidsBefore = [];
-  lastDropResult = null;
+async function selectAndFocusAddedBlock(uuidsBefore, dropResult) {
+  const newUuid = state.getAllUuids().find((uuid) => !uuidsBefore.includes(uuid));
   if (!newUuid) {
     return;
   }
@@ -227,8 +172,7 @@ onBlokkliEvent("state:reloaded", async function() {
   if (!newBlock) {
     return;
   }
-  const allSelected = [...selection.uuids.value, newBlock.uuid];
-  eventBus.emit("select", allSelected);
+  eventBus.emit("select", [...selection.uuids.value, newBlock.uuid]);
   const definition = definitions.getBlockDefinition(
     newBlock.bundle,
     newBlock.fieldListType,
@@ -268,7 +212,53 @@ onBlokkliEvent("state:reloaded", async function() {
       uuid: newUuid
     });
   }
-});
+}
+const onDrop = async (e) => {
+  const uuidsBefore = state.getAllUuids();
+  await nextTick(async () => {
+    const itemType = e.items[0]?.itemType;
+    if (!itemType) {
+      return;
+    }
+    const handler = dragdrop.getDropHandler(itemType);
+    if (!handler) {
+      return;
+    }
+    const baseCtx = {
+      items: e.items,
+      field: e.field,
+      host: e.host,
+      afterUuid: e.preceedingUuid ?? null
+    };
+    let result;
+    if (handler.resolveBundles) {
+      const bundles = (await handler.resolveBundles(baseCtx)).filter(
+        (b) => permissions.checkBlockBundlePermission(b, "add")
+      );
+      if (bundles.length === 0) {
+        return;
+      }
+      let bundle;
+      if (bundles.length === 1) {
+        bundle = bundles[0];
+      } else {
+        const selected = await showBundleSelector(bundles);
+        if (!selected) {
+          return;
+        }
+        bundle = selected;
+      }
+      result = await handler.execute({ ...baseCtx, bundle }) || void 0;
+    } else {
+      result = await handler.execute({ ...baseCtx, bundle: "" }) || void 0;
+    }
+    eventBus.emit("dragging:end");
+    eventBus.emit("item:dropped");
+    await selectAndFocusAddedBlock(uuidsBefore, result);
+  });
+  mouseX.value = 0;
+  mouseY.value = 0;
+};
 onBlokkliEvent("dragging:move", (e) => {
   mouseX.value = e.x;
   mouseY.value = e.y;
@@ -335,7 +325,7 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 onBlokkliEvent("block:append", async (e) => {
-  allUuidsBefore = state.getAllUuids();
+  const uuidsBefore = state.getAllUuids();
   const handler = dragdrop.getDropHandler("new");
   if (handler) {
     const result = await handler.execute({
@@ -351,7 +341,7 @@ onBlokkliEvent("block:append", async (e) => {
       afterUuid: e.afterUuid,
       bundle: e.bundle
     });
-    lastDropResult = result ?? null;
+    await selectAndFocusAddedBlock(uuidsBefore, result ?? void 0);
   }
 });
 onUnmounted(() => {
@@ -366,66 +356,58 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-dragging-overlay {
   pointer-events: none;
   position: fixed;
-  bottom: auto;
   top: 0px;
+  bottom: auto;
   left: 0px;
   z-index: calc(var(--bk-z-index-base) + 250000) /* "dragging-overlay" */;
   cursor: grabbing;
-  user-select: none;
   border-radius: 4px;
   will-change: transform;
+  -webkit-user-select: none;
+  user-select: none;
 }
-
-  .bk-vars.bk-dragging-overlay * {
+.bk-vars.bk-dragging-overlay * {
   pointer-events: none !important;
 }
-
-  .bk-vars.bk-dragging-overlay.bk-is-touch {
-  bottom: 0px;
+.bk-vars.bk-dragging-overlay.bk-is-touch {
   top: auto;
+  bottom: 0px;
 }
-
-  .bk-vars.bk-dragging-overlay > .bk-dragging-overlay-item {
+.bk-vars.bk-dragging-overlay  > .bk-dragging-overlay-item {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
-    /* Don't multiply by scale - the transform: scale() already scales the border-radius */
-    border-radius: calc(var(--bk-dragging-radius) * 1px);
+  border-radius: calc(var(--bk-dragging-radius) * 1px);
 }
-
-  .bk-vars.bk-dragging-overlay > .bk-dragging-overlay-item.bk-is-top {
+.bk-vars.bk-dragging-overlay  > .bk-dragging-overlay-item.bk-is-top {
   z-index: 50;
-  --bk-tw-shadow: 0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --bk-tw-shadow-colored: 0 0px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  --bk-tw-shadow: 0 0px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
   will-change: transform;
 }
-
-  .bk-vars.bk-dragging-overlay > .bk-dragging-overlay-item.bk-is-top:before {
-      content: '';
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      z-index: 50;
-      height: 100%;
-      width: 100%;
-      outline: calc((5 / var(--bk-dragging-scale)) * 1px) solid
+:is(.bk-vars.bk-dragging-overlay > .bk-dragging-overlay-item.bk-is-top):before {
+  content: '';
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+  height: 100%;
+  width: 100%;
+  outline: calc((5 / var(--bk-dragging-scale)) * 1px) solid
         rgb(var(--bk-active-background-color));
-      outline-offset: 0px;
-      border-radius: inherit;
-    }
-
-  .bk-vars.bk-dragging-overlay > .bk-dragging-overlay-item.bk-is-fallback {
+  outline-offset: 0px;
+  border-radius: inherit;
+}
+.bk-vars.bk-dragging-overlay  > .bk-dragging-overlay-item.bk-is-fallback {
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
+  border-color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
 .bk-vars .bk-dragging-overlay-markup {
   pointer-events: none;
   position: absolute;
@@ -433,90 +415,88 @@ export default {
   left: 0px;
   height: 100%;
   width: 100%;
-  transform-origin: top left;
+  transform-origin: 0 0;
   border-radius: 4px;
 }
-
-.bk-vars .bk-dragging-overlay-markup * {
+:is(.bk-vars .bk-dragging-overlay-markup) * {
   pointer-events: none !important;
 }
-
-.bk-vars .bk-dragging-overlay-markup > * {
-      position: absolute !important;
-      top: 0 !important;
-      left: 0 !important;
-      margin: 0 !important;
-      /* Prevent text wrapping for cloned ghost elements (in particular: buttons). */
-      width: calc(100% + 1px) !important;
-      height: 100% !important;
-      /* Reset any transforms on the cloned element to prevent offset from cursor. */
-      transform: none !important;
-      translate: none !important;
-      rotate: none !important;
-      scale: none !important;
-      pointer-events: none !important;
-      user-select: none !important;
-      --bk-tw-shadow: 0 0 #0000 !important;
-      --bk-tw-shadow-colored: 0 0 #0000 !important;
-      box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow) !important;
-    }
-
-@media (min-width: 768px) {
-      .bk-vars .bk-dragging-overlay-markup:before {
-        content: '';
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        z-index: 50;
-        height: 100%;
-        width: 100%;
-        border-radius: 4px;
-      }
-    }
-
+:is(.bk-vars .bk-dragging-overlay-markup)  > * {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  width: calc(100% + 1px) !important;
+  height: 100% !important;
+  transform: none !important;
+  translate: none !important;
+  rotate: none !important;
+  scale: none !important;
+  pointer-events: none !important;
+  --bk-tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow) !important;
+  -webkit-user-select: none !important;
+  user-select: none !important;
+}
+@media (width >= 48rem) {
+  :is(.bk-vars .bk-dragging-overlay-markup):before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 50;
+    height: 100%;
+    width: 100%;
+    border-radius: 4px;
+  }
+}
 .bk-vars .bk-dragging-overlay-fallback {
   position: relative;
   height: 100%;
   width: 100%;
   padding-top: 30px;
-  font-size: 20px;
-  line-height: 28px;
+  font-size: var(--text-xl, 20px);
+  line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
 }
-
-@media (min-width: 1024px) {
-
+@media (width >= 64rem) {
   .bk-vars .bk-dragging-overlay-fallback {
     display: flex;
+  }
+}
+@media (width >= 64rem) {
+  .bk-vars .bk-dragging-overlay-fallback {
     align-items: center;
+  }
+}
+@media (width >= 64rem) {
+  .bk-vars .bk-dragging-overlay-fallback {
     justify-content: center;
+  }
+}
+@media (width >= 64rem) {
+  .bk-vars .bk-dragging-overlay-fallback {
     padding-top: 0px;
   }
 }
-
-.bk-vars .bk-dragging-overlay-fallback.bk-is-top {
+.bk-is-top:is(.bk-vars .bk-dragging-overlay-fallback) {
   z-index: 50;
-  --bk-tw-shadow: 0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --bk-tw-shadow-colored: 0 0px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  --bk-tw-shadow: 0 0px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
-.bk-vars .bk-dragging-overlay-fallback > div {
+:is(.bk-vars .bk-dragging-overlay-fallback)  > div {
   display: flex;
   transform-origin: top;
   flex-direction: column;
   align-items: center;
-  font-weight: 700;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-
-@media (min-width: 1024px) {
-
-  .bk-vars .bk-dragging-overlay-fallback > div {
+@media (width >= 64rem) {
+  :is(.bk-vars .bk-dragging-overlay-fallback)  > div {
     transform-origin: center;
   }
 }
-
-.bk-vars .bk-dragging-overlay-fallback .bk-blokkli-item-icon,
-    .bk-vars .bk-dragging-overlay-fallback .bk-icon {
+:is(.bk-vars .bk-dragging-overlay-fallback) .bk-blokkli-item-icon,:is(.bk-vars .bk-dragging-overlay-fallback) .bk-icon {
   position: relative;
   overflow: hidden;
   margin-bottom: 0.2em;
@@ -526,172 +506,22 @@ export default {
   width: 100%;
   max-width: 1em;
   border-radius: 0.2em;
+  border-style: var(--bk-tw-border-style);
   border-width: 0.02em;
   padding: 0.1em;
 }
-
-.bk-vars .bk-dragging-overlay-fallback .bk-blokkli-item-icon svg, .bk-vars .bk-dragging-overlay-fallback .bk-icon svg {
+:is(:is(.bk-vars .bk-dragging-overlay-fallback) .bk-blokkli-item-icon,:is(.bk-vars .bk-dragging-overlay-fallback) .bk-icon) svg {
   position: relative;
   z-index: 10;
 }
-
-.bk-vars .bk-dragging-overlay-fallback .bk-blokkli-item-icon:before, .bk-vars .bk-dragging-overlay-fallback .bk-icon:before {
-        content: '';
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-        background-color: currentColor;
-        opacity: 0.1;
-      }
-
-.bk.bk-dragging-overlay-label {
-  position: fixed;
+:is(:is(.bk-vars .bk-dragging-overlay-fallback) .bk-blokkli-item-icon,:is(.bk-vars .bk-dragging-overlay-fallback) .bk-icon):before {
+  content: '';
+  position: absolute;
   top: 0px;
   left: 0px;
-  border-radius: 8px;
-  white-space: nowrap;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-family: PB Inter, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  z-index: calc(var(--bk-z-index-base) + 250000) /* "dragging-overlay" */;
-  filter: drop-shadow(0 0px 25px rgb(0 0 0 / 0.1))
-    drop-shadow(0 8px 10px rgb(0 0 0 / 0.1));
-  will-change: transform, contents, opacity;
-  background-color: rgb(var(--bk-active-background-color));
-  outline: 1px solid rgb(var(--bk-active-background-color) / 0.5);
-  color: rgb(var(--bk-active-color));
-}
-
-.bk.bk-dragging-overlay-label > p {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.bk.bk-dragging-overlay-label span.bk-is-block,
-  .bk.bk-dragging-overlay-label span.bk-is-host {
-  font-weight: 500;
-  min-width: 0px;
-  max-width: 70px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bk.bk-dragging-overlay-label span.bk-is-block:nth-last-child(2), .bk.bk-dragging-overlay-label span.bk-is-host:nth-last-child(2) {
-  max-width: none;
-  font-weight: 700;
-}
-
-.bk.bk-dragging-overlay-label span.bk-is-field {
-  min-width: 0px;
-  font-size: 12px;
-  line-height: 16px;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  border-radius: 6px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 2px;
-    background-color: rgb(var(--bk-active-color) / 0.15);
-    border: 1px solid rgb(var(--bk-active-color) / 0.25);
-    font-weight: 700;
-}
-
-.bk.bk-dragging-overlay-label span.bk-is-field:last-child {
-      background-color: rgb(var(--bk-active-color));
-      border-color: rgb(var(--bk-active-color));
-      color: rgb(var(--bk-active-background-color));
-    }
-
-.bk.bk-dragging-overlay-label .bk-icon {
-  width: 15px;
-  height: 15px;
-}
-
-.bk.bk-dragging-overlay-label svg {
-  fill: currentColor;
-}
-
-.bk.bk-dragging-overlay-label {
-
-  --bk-caret-size: 12px;
-  --bk-caret-outline-size: calc(var(--bk-caret-size) + 1px);
-}
-
-.bk.bk-dragging-overlay-label::before,
-  .bk.bk-dragging-overlay-label::after {
-    content: '';
-    position: absolute;
-    border: var(--bk-caret-size) solid transparent;
-  }
-
-.bk.bk-dragging-overlay-label::before {
-    border-width: var(--bk-caret-outline-size);
-  }
-
-.bk.bk-dragging-overlay-label.bk-is-top::before,
-    .bk.bk-dragging-overlay-label.bk-is-top::after,
-    .bk.bk-dragging-overlay-label.bk-is-bottom::before,
-    .bk.bk-dragging-overlay-label.bk-is-bottom::after {
-  left: 50%;
-  --bk-tw-translate-x: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-
-.bk.bk-dragging-overlay-label.bk-is-top::before {
-  top: 100%;
-    border-top-color: rgb(var(--bk-active-background-color) / 0.5);
-}
-
-.bk.bk-dragging-overlay-label.bk-is-top::after {
-  top: 100%;
-    border-top-color: rgb(var(--bk-active-background-color));
-}
-
-.bk.bk-dragging-overlay-label.bk-is-bottom::before {
-  bottom: 100%;
-    border-bottom-color: rgb(var(--bk-active-background-color) / 0.5);
-}
-
-.bk.bk-dragging-overlay-label.bk-is-bottom::after {
-  bottom: 100%;
-    border-bottom-color: rgb(var(--bk-active-background-color));
-}
-
-.bk.bk-dragging-overlay-label.bk-is-left::before,
-    .bk.bk-dragging-overlay-label.bk-is-left::after,
-    .bk.bk-dragging-overlay-label.bk-is-right::before,
-    .bk.bk-dragging-overlay-label.bk-is-right::after {
-  top: 50%;
-  --bk-tw-translate-y: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-
-.bk.bk-dragging-overlay-label.bk-is-left::before {
-  left: 100%;
-    border-left-color: rgb(var(--bk-active-background-color) / 0.5);
-}
-
-.bk.bk-dragging-overlay-label.bk-is-left::after {
-  left: 100%;
-    border-left-color: rgb(var(--bk-active-background-color));
-}
-
-.bk.bk-dragging-overlay-label.bk-is-right::before {
-  right: 100%;
-    border-right-color: rgb(var(--bk-active-background-color) / 0.5);
-}
-
-.bk.bk-dragging-overlay-label.bk-is-right::after {
-  right: 100%;
-    border-right-color: rgb(var(--bk-active-background-color));
+  height: 100%;
+  width: 100%;
+  background-color: currentcolor;
+  opacity: 10%;
 }
 </style>

package/dist/runtime/editor/features/dragging-overlay/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Move the in-progress drag onto a specific drop target and center that target
+ * in the viewport.
+ *
+ * This is a deterministic seam for driving the canvas drag (e.g. from E2E
+ * tests): the drop slots are WebGL-rendered and live in artboard coordinates,
+ * so figuring out where a given slot is on screen is fragile — especially for
+ * blocks that are taller than the viewport or scrolled off-screen. Emitting
+ * this event lets the dragging overlay resolve the exact slot rect itself and
+ * center it, after which a consumer only has to move the pointer to the
+ * viewport center to drop onto it.
+ */
+export type MoveToDropTargetEvent = {
+    /** Insert relative to an existing block, identified by its uuid. */
+    block: string;
+    /** Whether to target the slot before or after that block. */
+    position: 'before' | 'after';
+} | {
+    /** The host entity uuid that owns the target field. */
+    host: string;
+    /** The field name on the host entity. */
+    fieldName: string;
+};
+declare module '#blokkli/editor/events' {
+    interface EventbusEvents {
+        'dragging:moveToDropTarget': MoveToDropTargetEvent;
+    }
+}