@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/runtime/editor/features/hover/Renderer/index.vue

@@ -4,11 +4,6 @@
 
 <script setup>
 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/editor/helpers/webgl";
@@ -25,9 +20,11 @@ const {
   directive,
   blocks,
   fields,
-  permissions
+  permissions,
+  types,
+  keyboard
 } = useBlokkli();
-const MAX_RECTS = 11;
+const MAX_RECTS = 12;
 function getDeepestUuid(uuids) {
   if (uuids.length === 0) {
     return null;
@@ -60,12 +57,14 @@ const hoverState = createHoverState();
 let previousHoveredUuids = [];
 let previousDeepestUuid = null;
 let previousEditableFieldRect = null;
+let previousDroppableFieldRect = null;
 const isHoveringEditableField = ref(false);
+const isHoveringDroppableField = ref(false);
 const isHoveringSelectedBlock = ref(false);
 class HoverRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(gl) {
+  getBufferInfo(gl, twgl) {
     if (!this.bufferInfo) {
-      this.bufferInfo = this.createBufferInfo(gl);
+      this.bufferInfo = this.createBufferInfo(gl, twgl);
     }
     return this.bufferInfo;
   }
@@ -74,8 +73,10 @@ function resetHoverState() {
   previousHoveredUuids = [];
   previousDeepestUuid = null;
   previousEditableFieldRect = null;
+  previousDroppableFieldRect = null;
   hoverState.visible.fill(0);
   isHoveringEditableField.value = false;
+  isHoveringDroppableField.value = false;
   isHoveringSelectedBlock.value = false;
 }
 watch(ui.isChangingOptions, (isChanging) => {
@@ -95,13 +96,15 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   };
   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;
+    const needsUpdate = previousHoveredUuids.length > 0 || previousEditableFieldRect !== null || previousDroppableFieldRect !== null || isHoveringEditableField.value || isHoveringDroppableField.value || isHoveringSelectedBlock.value;
     hoverState.visible.fill(0);
     isHoveringEditableField.value = false;
+    isHoveringDroppableField.value = false;
     isHoveringSelectedBlock.value = false;
     previousHoveredUuids = [];
     previousDeepestUuid = null;
     previousEditableFieldRect = null;
+    previousDroppableFieldRect = null;
     return needsUpdate;
   }
   const artboardMouseX = mouseX / scale - offset.x / scale;
@@ -134,32 +137,65 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   const hoveredChanged = unselectedHoveredUuids.length !== previousHoveredUuids.length || unselectedHoveredUuids.some(
     (uuid, i) => uuid !== previousHoveredUuids[i]
   ) || deepestUuid !== previousDeepestUuid;
+  const suppressFieldHover = keyboard.isPressingControl.value;
   let hoveredEditableFieldRect = null;
-  const editableRects = directive.getVisible("editable");
-  let fallbackEditableRect = null;
-  for (let i = 0; i < editableRects.length; i++) {
-    const editableRect = editableRects[i];
-    if (!isInsideRect(artboardMouseX, artboardMouseY, editableRect)) continue;
-    const key = editableRect.key;
-    const entityUuid = key.split(":")[2];
-    const block = blocks.getBlock(entityUuid);
-    if (block && (!permissions.checkBlockBundlePermission(block.bundle, "edit") || permissions.blockHasRestrictedAncestor(entityUuid))) {
-      continue;
-    }
-    if (deepestUuid && entityUuid === deepestUuid) {
-      hoveredEditableFieldRect = editableRect;
-      break;
+  if (!suppressFieldHover) {
+    const editableRects = directive.getVisible("editable");
+    let fallbackEditableRect = null;
+    for (let i = 0; i < editableRects.length; i++) {
+      const editableRect = editableRects[i];
+      if (!isInsideRect(artboardMouseX, artboardMouseY, editableRect)) continue;
+      const key = editableRect.key;
+      const entityUuid = key.split(":")[2];
+      const block = blocks.getBlock(entityUuid);
+      if (block && (!permissions.checkBlockBundlePermission(block.bundle, "edit") || permissions.blockHasRestrictedAncestor(entityUuid))) {
+        continue;
+      }
+      if (deepestUuid && entityUuid === deepestUuid) {
+        hoveredEditableFieldRect = editableRect;
+        break;
+      }
+      if (!fallbackEditableRect && !hoveredUuids.includes(entityUuid)) {
+        fallbackEditableRect = editableRect;
+      }
     }
-    if (!fallbackEditableRect && !hoveredUuids.includes(entityUuid)) {
-      fallbackEditableRect = editableRect;
+    if (!hoveredEditableFieldRect) {
+      hoveredEditableFieldRect = fallbackEditableRect;
     }
   }
-  if (!hoveredEditableFieldRect) {
-    hoveredEditableFieldRect = fallbackEditableRect;
+  let hoveredDroppableFieldRect = null;
+  if (!suppressFieldHover && !hoveredEditableFieldRect) {
+    const droppableRects = directive.getVisible("droppable");
+    const excludedKeys = /* @__PURE__ */ new Set();
+    for (const el of directive.getDroppableElements()) {
+      const config = types.getDroppableFieldConfig(el.fieldName, el);
+      if (config.type !== "reference") {
+        excludedKeys.add(el.key);
+      }
+    }
+    let fallbackDroppableRect = null;
+    for (let i = 0; i < droppableRects.length; i++) {
+      const droppableRect = droppableRects[i];
+      if (!isInsideRect(artboardMouseX, artboardMouseY, droppableRect)) continue;
+      const key = droppableRect.key;
+      if (excludedKeys.has(key)) continue;
+      const entityUuid = key.split(":")[2];
+      if (deepestUuid && entityUuid === deepestUuid) {
+        hoveredDroppableFieldRect = droppableRect;
+        break;
+      }
+      if (!fallbackDroppableRect && !hoveredUuids.includes(entityUuid)) {
+        fallbackDroppableRect = droppableRect;
+      }
+    }
+    if (!hoveredDroppableFieldRect) {
+      hoveredDroppableFieldRect = fallbackDroppableRect;
+    }
   }
   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) {
+    const droppableFieldChanged = hoveredDroppableFieldRect === null !== (previousDroppableFieldRect === null) || hoveredDroppableFieldRect && previousDroppableFieldRect && (hoveredDroppableFieldRect.x !== previousDroppableFieldRect.x || hoveredDroppableFieldRect.y !== previousDroppableFieldRect.y || hoveredDroppableFieldRect.width !== previousDroppableFieldRect.width || hoveredDroppableFieldRect.height !== previousDroppableFieldRect.height);
+    if (!editableFieldChanged && !droppableFieldChanged) {
       return false;
     }
   }
@@ -219,10 +255,25 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
     hoverState.types[10] = 2;
     hoverState.visible[10] = 1;
   }
+  if (hoveredDroppableFieldRect) {
+    const inset = 2;
+    hoverState.positions[11 * 4 + 0] = hoveredDroppableFieldRect.x + inset;
+    hoverState.positions[11 * 4 + 1] = hoveredDroppableFieldRect.y + inset;
+    hoverState.positions[11 * 4 + 2] = hoveredDroppableFieldRect.width - inset * 2;
+    hoverState.positions[11 * 4 + 3] = hoveredDroppableFieldRect.height - inset * 2;
+    hoverState.radii[11 * 4 + 0] = 0;
+    hoverState.radii[11 * 4 + 1] = 0;
+    hoverState.radii[11 * 4 + 2] = 0;
+    hoverState.radii[11 * 4 + 3] = 0;
+    hoverState.types[11] = 2;
+    hoverState.visible[11] = 1;
+  }
   previousHoveredUuids = unselectedHoveredUuids;
   previousDeepestUuid = deepestUuid;
   previousEditableFieldRect = hoveredEditableFieldRect;
+  previousDroppableFieldRect = hoveredDroppableFieldRect;
   isHoveringEditableField.value = hoveredEditableFieldRect !== null;
+  isHoveringDroppableField.value = hoveredDroppableFieldRect !== null;
   isHoveringSelectedBlock.value = deepestUuid !== null && selectedUuids.includes(deepestUuid);
   return true;
 }
@@ -242,7 +293,7 @@ onBlokkliEvent("state:reloaded", () => {
 onBlokkliEvent("ui:resized", () => {
   resetHoverState();
 });
-const { collector } = defineRenderer("hover-overlay", {
+const { collector } = await defineRenderer("hover-overlay", {
   zIndex: 200,
   collector: () => {
     const c = new HoverRectangleBufferCollector();
@@ -263,7 +314,7 @@ const { collector } = defineRenderer("hover-overlay", {
   },
   program: () => ({ shaders: [vs, fs] }),
   cursor: () => {
-    if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
+    if ((isHoveringEditableField.value || isHoveringDroppableField.value) && state.editMode.value !== "readonly") {
       return "text";
     }
     if (isHoveringSelectedBlock.value && state.editMode.value === "editing") {
@@ -271,8 +322,8 @@ const { collector } = defineRenderer("hover-overlay", {
     }
     return null;
   },
-  render: (ctx, gl, program) => {
-    const bufferInfo = collector.getBufferInfo(gl);
+  render: (ctx, gl, program, twgl) => {
+    const bufferInfo = collector.getBufferInfo(gl, twgl);
     if (!ui.openTooltip.value) {
       updateHoverState(
         ctx.mouseX,
@@ -283,7 +334,7 @@ const { collector } = defineRenderer("hover-overlay", {
       );
     }
     gl.useProgram(program.program);
-    setUniforms(program, {
+    twgl.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),
@@ -297,8 +348,8 @@ const { collector } = defineRenderer("hover-overlay", {
       u_opacity: ctx.changeOptionsTransition
     });
     animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, bufferInfo);
-    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    twgl.setBuffersAndAttributes(gl, program, bufferInfo);
+    twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     if (!ui.openTooltip.value) {

package/dist/runtime/editor/features/hover/Renderer/vertex.glsl

@@ -19,11 +19,11 @@ uniform float u_offset_x;
 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
+// Hover state uniforms (12 rectangles)
+uniform vec4 u_hover_positions[12]; // x, y, width, height
+uniform vec4 u_hover_radii[12]; // topLeft, topRight, bottomRight, bottomLeft
+uniform float u_hover_types[12]; // 0=mono, 1=accent, 2=teal fill
+uniform float u_hover_visible[12]; // 0=hidden, 1=visible
 
 // Color uniforms
 uniform vec3 u_color_mono;

package/dist/runtime/editor/features/hover/index.vue

@@ -17,7 +17,7 @@ defineBlokkliFeature({
 const { selection, ui, dom, animation, $t } = useBlokkli();
 const isLocked = ref(false);
 const isVisible = computed(
-  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value && !ui.isApproving.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeFieldLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value && !ui.isApproving.value
 );
 </script>
 

package/dist/runtime/editor/features/import-existing/Dialog/Item.d.vue.ts

@@ -0,0 +1,5 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedUuid": (value: string) => any;
+}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/import-existing/Dialog/Item.vue

@@ -0,0 +1,55 @@
+<template>
+  <label
+    class="_bk_flex _bk_items-start _bk_gap-5 _bk_cursor-pointer _bk_hover:bg-mono-50 _bk_p-10 _bk_border _bk_border-mono-200 _bk_rounded-md _bk_hover:border-mono-400 _bk_min-w-0"
+    :class="{
+  '_bk_!border-accent-600 _bk_outline _bk_outline-4 _bk_outline-accent-200 _bk_!bg-accent-50': isSelected
+}"
+  >
+    <span class="bk-radio">
+      <input v-model="selectedUuid" type="radio" :value="uuid" name="entity" />
+      <span />
+    </span>
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div class="_bk_truncate _bk_font-semibold _bk_text-base">
+        {{ label }}
+        <span class="_bk_font-normal _bk_text-mono-500">{{ id }}</span>
+      </div>
+      <ul class="bk-pill-list _bk_mt-3">
+        <li>
+          <span class="bk-pill bk-is-mono">{{ bundleLabel }}</span>
+        </li>
+        <li v-if="lastChanged">
+          <span class="bk-pill bk-is-yellow-light">
+            <RelativeTime :timestamp="lastChanged" />
+          </span>
+        </li>
+        <li v-if="isOwner">
+          <span class="bk-pill">{{ $t("owner", "Owner") }}</span>
+        </li>
+      </ul>
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { RelativeTime } from "#blokkli/editor/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  entityType: { type: String, required: true },
+  bundle: { type: String, required: true },
+  label: { type: String, required: true },
+  url: { type: String, required: true },
+  lastChanged: { type: [String, null], required: true },
+  uid: { type: [String, null], required: true },
+  context: { type: String, required: false },
+  bundleLabel: { type: String, required: true },
+  isOwner: { type: Boolean, required: true }
+});
+const selectedUuid = defineModel("selectedUuid", { type: String, ...{ required: true } });
+const isSelected = computed(() => {
+  return selectedUuid.value === props.uuid;
+});
+const { $t } = useBlokkli();
+</script>

package/dist/runtime/editor/features/import-existing/Dialog/Item.vue.d.ts

@@ -0,0 +1,5 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedUuid": (value: string) => any;
+}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/import-existing/Dialog/index.d.vue.ts

@@ -1,15 +1,19 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import type { FieldConfig } from '#blokkli/editor/types/definitions';
+type __VLS_Props = {
+    fields: FieldConfig[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;
     confirm: (data: {
         sourceUuid: string;
         fields: string[];
     }) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onConfirm?: ((data: {
         sourceUuid: string;
         fields: string[];
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/import-existing/Dialog/index.vue

@@ -12,12 +12,13 @@
     :width="800"
     :submit-label="$t('importExistingDialogSubmit', 'Import content')"
     :can-submit="!!(sourceEntityUuid && selectedFields.length)"
-    :is-loading="isLoading"
+    :is-loading="isLoading || workspaces.isLoading.value || isSearching"
     @submit="onSubmit"
     @cancel="$emit('cancel')"
   >
     <div class="bk">
       <FormCheckboxes
+        v-if="fieldOptions.length > 1"
         id="import-existing-fields"
         v-model="selectedFields"
         :label="
@@ -29,72 +30,125 @@
         :options="fieldOptions"
         inline
       />
-      <ConfigForm v-model="filters" :config />
-      <div class="bk-import-existing-dialog-results">
-        <div class="bk-form-label">
-          {{ $t("importExistingPagesTitle", "Select page") }}
-        </div>
-        <label v-for="item in items" :key="item.uuid" class="bk-radio">
-          <input
-            v-model="sourceEntityUuid"
-            type="radio"
-            :value="item.uuid"
-            name="entity"
-          />
-          <span>{{ item.label }}</span>
-          <div v-if="item.description" class="bk-radio-description">
-            {{ item.description }}
+      <div class="_bk_mt-15 _bk_pt-15 _bk_border-t _bk_border-t-mono-300">
+        <FormText
+          id="import-existing-search"
+          v-model="searchText"
+          :label="$t('importExistingPagesTitle', 'Select page')"
+          :placeholder="
+  $t('importExistingSearchPlaceholder', 'Search pages...')
+"
+        />
+        <GrowOnly class="_bk_mt-20 _bk_min-w-0">
+          <div
+            v-if="!pagedItems.length && !workspaces.isLoading.value"
+            class="_bk_py-20 _bk_text-center _bk_text-mono-500 _bk_text-sm"
+          >
+            {{ $t("importExistingNoResults", "No pages found.") }}
+          </div>
+          <div class="_bk_grid _bk_gap-10">
+            <Item
+              v-for="item in pagedItems"
+              :key="item.uuid"
+              v-model:selected-uuid="sourceEntityUuid"
+              v-bind="item"
+              :bundle-label="workspaces.getBundleLabel(item.bundle)"
+              :is-owner="!!(item.uid && item.uid === ownerId)"
+            />
           </div>
-        </label>
+        </GrowOnly>
       </div>
     </div>
-    <template #pre-footer>
+    <template v-if="totalPages > 1" #pre-footer>
       <Pagination v-model="page" :total-pages />
     </template>
   </DialogModal>
 </template>
 
 <script setup>
-import { computed, ref, useBlokkli, useAsyncData, watch } from "#imports";
+import {
+  computed,
+  ref,
+  useBlokkli,
+  watch,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
 import {
   DialogModal,
-  ConfigForm,
   Pagination,
-  FormCheckboxes
+  FormCheckboxes,
+  FormText,
+  GrowOnly
 } from "#blokkli/editor/components";
-const { adapter, $t, types, context } = useBlokkli();
+import Item from "./Item.vue";
+const { $t, context, state, workspaces } = useBlokkli();
+const props = defineProps({
+  fields: { type: Array, required: true }
+});
 const emit = defineEmits(["confirm", "cancel"]);
+const fieldOptions = computed(
+  () => props.fields.map((field) => {
+    return {
+      value: field.name,
+      label: field.label
+    };
+  })
+);
 const sourceEntityUuid = ref("");
-const selectedFields = ref([]);
+const selectedFields = ref(fieldOptions.value.map((v) => v.value));
 const isLoading = ref(false);
 const page = ref(0);
-const filters = ref({});
-watch(
-  () => ({ ...filters.value }),
-  () => {
-    page.value = 0;
-  }
+const searchText = ref("");
+const fzfResults = ref([]);
+const isSearching = ref(false);
+const ownerId = computed(() => state.owner.value?.id);
+const currentBundle = computed(() => context.value.entityBundle);
+const sortedItems = computed(
+  () => searchText.value.trim() ? fzfResults.value : workspaces.defaultSorted.value
+);
+const filteredItems = computed(
+  () => sortedItems.value.filter((item) => item.bundle === currentBundle.value)
+);
+const perPage = 16;
+const totalPages = computed(
+  () => Math.max(1, Math.ceil(filteredItems.value.length / perPage))
 );
-const args = computed(() => {
-  return {
-    page: page.value,
-    filters: { ...filters.value }
-  };
+const pagedItems = computed(
+  () => filteredItems.value.slice(page.value * perPage, (page.value + 1) * perPage)
+);
+watch(searchText, () => {
+  page.value = 0;
 });
-const { data } = useAsyncData(
-  () => {
-    return adapter.getImportItems(args.value);
-  },
-  {
-    watch: [args]
+let searchTimeout = null;
+watch(searchText, (newValue) => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout);
+    searchTimeout = null;
   }
-);
-const items = computed(() => data.value?.items ?? []);
-const config = computed(() => data.value?.filters ?? []);
-const total = computed(() => data.value?.total ?? 0);
-const perPage = computed(() => data.value?.perPage ?? 16);
-const totalPages = computed(() => {
-  return Math.ceil(total.value / perPage.value);
+  if (!newValue.trim()) {
+    fzfResults.value = [];
+    isSearching.value = false;
+    return;
+  }
+  isSearching.value = true;
+  const query = newValue.trim();
+  searchTimeout = setTimeout(async () => {
+    if (searchText.value.trim() !== query) {
+      isSearching.value = false;
+      return;
+    }
+    try {
+      const results = await workspaces.search(query);
+      if (searchText.value.trim() === query) {
+        fzfResults.value = results;
+      }
+    } finally {
+      if (searchText.value.trim() === query) {
+        isSearching.value = false;
+      }
+    }
+  }, 150);
 });
 function onSubmit() {
   emit("confirm", {
@@ -103,17 +157,12 @@ function onSubmit() {
   });
   isLoading.value = true;
 }
-const fieldOptions = computed(
-  () => types.fieldConfig.forEntityTypeAndBundle(
-    context.value.entityType,
-    context.value.entityBundle
-  ).map((field) => {
-    return {
-      value: field.name,
-      label: field.label
-    };
-  })
-);
+onMounted(() => workspaces.ensureLoaded());
+onBeforeUnmount(() => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout);
+  }
+});
 </script>
 
 <style>
@@ -124,12 +173,5 @@ const fieldOptions = computed(
     --bk-tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
     padding: 0px
-}
-  .bk.bk-import-existing-dialog .bk-import-existing-dialog-results {
-    margin-top: 15px;
-    border-top-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding-top: 15px
 }
 </style>

package/dist/runtime/editor/features/import-existing/Dialog/index.vue.d.ts

@@ -1,15 +1,19 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import type { FieldConfig } from '#blokkli/editor/types/definitions';
+type __VLS_Props = {
+    fields: FieldConfig[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;
     confirm: (data: {
         sourceUuid: string;
         fields: string[];
     }) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onConfirm?: ((data: {
         sourceUuid: string;
         fields: string[];
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/import-existing/index.vue

@@ -3,6 +3,7 @@
     <BlokkliTransition name="slide-up">
       <ExistingDialog
         v-if="showModal"
+        :fields
         @confirm="onSubmit($event.sourceUuid, $event.fields)"
         @cancel="showModal = false"
       />
@@ -11,31 +12,43 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, onMounted, defineBlokkliFeature } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  onMounted,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
-import ExistingDialog from "./Dialog/index.vue";
 import { defineMenuButton, useDialog } from "#blokkli/editor/composables";
+const ExistingDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 const { adapter, settings } = defineBlokkliFeature({
   id: "import-existing",
   label: "Import existing content",
   icon: "bk_mdi_arrow_downward",
-  requiredAdapterMethods: ["getImportItems", "importFromExisting"],
+  requiredAdapterMethods: ["getHostEntities", "importFromExisting"],
   description: "Implements a menu action that renders a dialog to import blocks from another entity.",
   settings: {
     showDialogWhenEmpty: {
       type: "checkbox",
-      default: true,
+      default: false,
       label: "Show import dialog at start",
       description: "Displays the import dialog when starting bl\xF6kkli if the page is empty.",
       group: "behavior"
     }
   }
 });
-const { ui, state, $t } = useBlokkli();
+const { ui, state, $t, types, context } = useBlokkli();
 const isEmpty = computed(
   () => !state.mutatedFields.value.find((v) => v.list?.length)
 );
 const showModal = useDialog("import-existing", "center");
+const fields = computed(
+  () => types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  )
+);
 function onSubmit(sourceUuid, sourceFields) {
   showModal.value = false;
   state.mutateWithLoadingState(
@@ -53,7 +66,7 @@ onMounted(() => {
   }
 });
 defineMenuButton(() => {
-  if (!state.mutatedFields.value.length) {
+  if (!fields.value.length) {
     return void 0;
   }
   return {