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

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

@@ -33,16 +33,17 @@ import { renderCycle } from "#blokkli/helpers/renderCycle";
 import { getFieldKey } from "#blokkli/helpers";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 import Renderer from "./Renderer/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
-  blocks: { type: Array, required: true }
+  items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, $t } = useBlokkli();
+const { dom, state, eventBus, types, $t, blocks, fields } = useBlokkli();
 const shouldRender = computed(() => {
-  return props.blocks.length === 1;
+  return props.items.length === 1;
 });
 const block = computed(() => {
-  if (props.blocks.length === 1) {
-    return props.blocks[0] ?? null;
+  if (props.items.length === 1) {
+    return props.items[0] ?? null;
   }
   return null;
 });
@@ -54,7 +55,7 @@ const emptyBlockFields = computed(() => {
     return [];
   }
   const uuid2 = block.value.uuid;
-  return types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).map((field) => {
+  return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).map((field) => {
     const key = getFieldKey(uuid2, field.name);
     const count = state.getFieldBlockCount(key);
     return {
@@ -74,17 +75,17 @@ const bundleLabel = computed(() => {
   if (!block.value) {
     return "";
   }
-  return types.getBlockBundleDefinition(block.value.itemBundle)?.label || block.value.itemBundle;
+  return types.getBlockBundleDefinition(block.value.bundle)?.label || block.value.bundle;
 });
 const allowedBundlesForField = computed(() => {
   if (!block.value) {
     return [];
   }
-  const blockData = dom.findBlock(block.value.uuid);
+  const blockData = blocks.getBlock(block.value.uuid);
   if (!blockData) {
     return [];
   }
-  const field = dom.findField(blockData.hostUuid, blockData.hostFieldName);
+  const field = fields.find(blockData.host.uuid, blockData.host.fieldName);
   if (!field) {
     return [];
   }
@@ -122,9 +123,9 @@ const fieldTooltips = computed(() => {
     return [];
   }
   return emptyBlockFields.value.map((field) => {
-    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).find((f) => f.name === field.name);
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).find((f) => f.name === field.name);
     const fieldLabel = fieldConfig?.label || field.name;
-    const fieldElement = dom.findField(block.value.uuid, field.name);
+    const fieldElement = fields.find(block.value.uuid, field.name);
     if (fieldElement) {
       const allowedBundles = fieldElement.allowedBundles.filter(
         (bundle) => !isInternalBundle(bundle)
@@ -146,8 +147,8 @@ const fieldTooltips = computed(() => {
     ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
   });
 });
-watch(emptyBlockFields, (fields) => {
-  const neededCount = fields.length;
+watch(emptyBlockFields, (fields2) => {
+  const neededCount = fields2.length;
   while (fieldButtonSlots.value.length < neededCount) {
     fieldButtonSlots.value.push({ fieldKey: void 0 });
   }
@@ -156,8 +157,8 @@ watch(emptyBlockFields, (fields) => {
     if (!slot) {
       continue;
     }
-    if (i < fields.length) {
-      const field = fields[i];
+    if (i < fields2.length) {
+      const field = fields2[i];
       slot.fieldKey = field?.key;
     } else {
       slot.fieldKey = void 0;
@@ -200,11 +201,11 @@ function clearAllCache() {
 function updateCache(uuid2) {
   let cachedState = cache.get(uuid2);
   if (!cachedState) {
-    const block2 = dom.findBlock(uuid2);
+    const block2 = blocks.getBlock(uuid2);
     if (!block2) {
       return;
     }
-    const field = dom.findField(block2.hostUuid, block2.hostFieldName);
+    const field = fields.find(block2.host.uuid, block2.host.fieldName);
     if (!field) {
       return;
     }
@@ -341,11 +342,11 @@ function onRendererToggle(data) {
   if (!cachedState) {
     return;
   }
-  const block2 = dom.findBlock(uuid.value);
+  const block2 = blocks.getBlock(uuid.value);
   if (!block2) {
     return;
   }
-  const field = dom.findField(block2.hostUuid, block2.hostFieldName);
+  const field = fields.find(block2.host.uuid, block2.host.fieldName);
   if (!field) {
     return;
   }
@@ -375,7 +376,7 @@ function onRendererToggleField(data) {
   if (!emptyField) {
     return;
   }
-  const field = dom.findField(uuid.value, emptyField.name);
+  const field = fields.find(uuid.value, emptyField.name);
   if (!field) {
     return;
   }

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <template>
   <Overlay
     v-if="isVisible && gl && animation.webglEnabled.value"
-    :blocks="selection.blocks.value"
+    :blocks="selection.items.value"
     :uuids="selection.uuids.value"
     :gl="gl"
     :has-host-selected="selection.hasHostSelected.value"
@@ -20,7 +20,7 @@
 
   <SelectionAddButtons
     v-if="state.editMode.value === 'editing'"
-    :blocks="selection.blocks.value"
+    :items="selection.items.value"
   />
 </template>
 
@@ -32,9 +32,11 @@ import {
   calculateIntersection,
   getBounds,
   intersects,
+  modulo,
   originatesFromTextInput
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useStateBasedCache from "#blokkli/helpers/composables/useStateBasedCache";
 import { PluginItemDropdown } from "#blokkli/plugins";
 import {
   computed,
@@ -43,26 +45,39 @@ import {
   ref,
   watch
 } from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "selection",
   icon: "selection",
   label: "Selection",
   description: "Renders an overlay that highlights the selected blocks."
 });
-const { selection, ui, eventBus, animation, dom, tour, $t, types, state } = useBlokkli();
+const {
+  selection,
+  ui,
+  eventBus,
+  animation,
+  dom,
+  tour,
+  $t,
+  types,
+  state,
+  blocks,
+  element
+} = useBlokkli();
+const getSelectionOrder = useStateBasedCache(() => {
+  return element.queryAll(
+    ui.artboardElement(),
+    "[data-uuid]",
+    "getSelectionOrder",
+    (el) => el.dataset.uuid
+  );
+});
 const selectedBundle = computed(() => {
-  let bundle = "";
-  for (let i = 0; i < selection.blocks.value.length; i++) {
-    const block = selection.blocks.value[i];
-    if (!block) {
-      return null;
-    }
-    if (bundle && bundle !== block.itemBundle) {
-      return null;
-    }
-    bundle = block.itemBundle;
+  if (selection.bundles.value.length === 1) {
+    return selection.bundles.value[0] ?? null;
   }
-  return bundle || null;
+  return null;
 });
 const itemDropdownEnabled = computed(() => true);
 const itemDropdownItems = computed(() => {
@@ -135,10 +150,10 @@ const findMostVisibleBlock = () => {
 };
 const getSelectAllUuids = (allBlocks, currentlySelected) => {
   if (currentlySelected.length >= 1) {
-    const selectedHostUuids = currentlySelected.map((block) => block.hostUuid);
-    const selectedHostTypes = currentlySelected.map((block) => block.hostType);
+    const selectedHostUuids = currentlySelected.map((block) => block.host.uuid);
+    const selectedHostTypes = currentlySelected.map((block) => block.host.type);
     const selectedHostFieldNames = currentlySelected.map(
-      (block) => block.hostFieldName
+      (block) => block.host.fieldName
     );
     const selectedUuids = currentlySelected.map((v) => v.uuid);
     const commonHostUuids = selectedHostUuids.filter(
@@ -151,14 +166,14 @@ const getSelectAllUuids = (allBlocks, currentlySelected) => {
       (fieldName, index, self) => self.indexOf(fieldName) === index
     );
     const newUuids = allBlocks.filter(
-      (block) => commonHostUuids.includes(block.hostUuid) && commonHostTypes.includes(block.hostType) && commonHostFieldNames.includes(block.hostFieldName)
+      (block) => commonHostUuids.includes(block.host.uuid) && commonHostTypes.includes(block.host.type) && commonHostFieldNames.includes(block.host.fieldName)
     ).map((block) => block.uuid);
     const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid));
     if (!isSame) {
       return newUuids;
     }
   }
-  return allBlocks.filter((block) => block.hostType !== "block").map((block) => block.uuid);
+  return allBlocks.filter((block) => block.host.type !== itemEntityType).map((block) => block.uuid);
 };
 const visuallySelectBlocks = (toggleUuid) => {
   const rects = dom.getBlockRects();
@@ -167,12 +182,12 @@ const visuallySelectBlocks = (toggleUuid) => {
   if (selected.length === 0) {
     return [toggleUuid];
   }
-  const singleSelectedBlock = selected.length === 1 ? dom.findBlock(selected[0]) : null;
+  const singleSelectedBlock = selected.length === 1 ? blocks.getBlock(selected[0]) : null;
   const toggleRect = rects[toggleUuid];
   if (!toggleRect) {
     return;
   }
-  const toggleBlock = dom.findBlock(toggleUuid);
+  const toggleBlock = blocks.getBlock(toggleUuid);
   if (!toggleBlock) {
     return;
   }
@@ -187,7 +202,7 @@ const visuallySelectBlocks = (toggleUuid) => {
       if (!intersects(rect, encompassingRect2)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }
@@ -231,7 +246,7 @@ const visuallySelectBlocks = (toggleUuid) => {
 function selectAllBlocks() {
   eventBus.emit(
     "select:end",
-    getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
+    getSelectAllUuids(blocks.getAllBlocks(), selection.items.value)
   );
 }
 onBlokkliEvent("select:shiftToggle", (uuid) => {
@@ -240,8 +255,27 @@ onBlokkliEvent("select:shiftToggle", (uuid) => {
     eventBus.emit("select", uuids);
   }
 });
+function selectBlock(uuid) {
+  eventBus.emit("select", uuid);
+  dom.refreshBlockRect(uuid);
+  eventBus.emit("scrollIntoView", { uuid });
+}
+function selectInList(prev) {
+  const currentUuid = selection.uuids.value[selection.uuids.value.length - 1];
+  if (!currentUuid) {
+    return;
+  }
+  const selectionOrder = getSelectionOrder();
+  const currentIndex = selectionOrder.indexOf(currentUuid);
+  const delta = prev ? -1 : 1;
+  const newIndex = modulo(currentIndex + delta, selectionOrder.length);
+  const newUuid = selectionOrder[newIndex];
+  if (newUuid) {
+    selectBlock(newUuid);
+  }
+}
 onBlokkliEvent("keyPressed", (e) => {
-  if (selection.isDragging.value || selection.isMultiSelecting.value) {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value) {
     return;
   }
   if (e.code === "Escape") {
@@ -254,7 +288,7 @@ onBlokkliEvent("keyPressed", (e) => {
       return;
     }
     e.originalEvent.preventDefault();
-    if (selection.blocks.value.length !== 1) {
+    if (!selection.items.value.length) {
       const uuid = findMostVisibleBlock();
       if (uuid) {
         eventBus.emit("select", uuid);
@@ -263,9 +297,9 @@ onBlokkliEvent("keyPressed", (e) => {
       return;
     }
     if (e.shift) {
-      eventBus.emit("select:previous");
+      selectInList(true);
     } else {
-      eventBus.emit("select:next");
+      selectInList();
     }
     animation.requestDraw();
   } else if (e.code === "a" && e.meta) {

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -75,14 +75,14 @@ const targetStyle = computed(() => {
     zIndex: 50 + props.level
   };
 });
-const { types, state, selection, dom, eventBus } = useBlokkli();
+const { types, state, selection, eventBus, fields } = useBlokkli();
 const mutatedField = computed(
   () => state.getMutatedField(props.entityUuid, props.name)
 );
 const list = computed(() => mutatedField.value?.list || []);
 const key = computed(() => props.entityUuid + ":" + props.name);
 function onMouseUp(preceedingUuid) {
-  const field = dom.findField(props.entityUuid, props.name);
+  const field = fields.find(props.entityUuid, props.name);
   if (!field) {
     return;
   }

package/dist/runtime/components/Edit/Features/Structure/List/Item/index.vue

@@ -33,14 +33,18 @@ const props = defineProps({
   isVisible: { type: Boolean, required: true },
   isSelectedFromParent: { type: Boolean, required: false }
 });
+const { runtimeConfig, types, selection, eventBus, state, element } = useBlokkli();
 function getRootEl() {
-  const rootEl = document.querySelector("#bk-structure");
+  const rootEl = element.query(
+    document.documentElement,
+    "#bk-structure",
+    "Get root structure element."
+  );
   if (!(rootEl instanceof HTMLElement)) {
     throw new TypeError("Failed to locate root structure element.");
   }
   return rootEl;
 }
-const { runtimeConfig, types, selection, eventBus, state } = useBlokkli();
 const canMove = computed(() => state.editMode.value === "editing");
 const isSelected = computed(() => selection.uuids.value.includes(props.uuid));
 const type = computed(() => types.getBlockBundleDefinition(props.bundle));
@@ -66,15 +70,18 @@ function onMouseUp(e) {
   }
 }
 function buildDraggableItems() {
-  return selection.blocks.value.map((block) => {
-    const el = document.querySelector(`[bk-structure-uuid="${block.uuid}"]`);
+  return selection.items.value.map((block) => {
+    const el = element.query(
+      document.documentElement,
+      `[bk-structure-uuid="${block.uuid}"]`,
+      "Get structure item for draggable item."
+    );
     if (!(el instanceof HTMLElement)) {
       return null;
     }
     return {
       itemType: "existing_structure",
-      uuid: block.uuid,
-      itemBundle: block.itemBundle,
+      block,
       element: function() {
         return el;
       }

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

@@ -188,6 +188,9 @@ function calculatePosition(rect) {
   };
 }
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Tab") {
     e.originalEvent.preventDefault();
     if (e.shift) {

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

@@ -2,7 +2,7 @@
   <PluginItemDropdown
     id="transform"
     :title="$t('transformTo', 'Actions')"
-    :enabled="!!(itemBundleIds.length && possibleTransforms.length)"
+    :enabled="!!possibleTransforms.length"
     :items="possibleTransforms"
     icon="script"
     weight="100"
@@ -43,7 +43,6 @@ import {
   useLazyAsyncData
 } from "#imports";
 import { PluginItemDropdown } from "#blokkli/plugins";
-import { onlyUnique } from "#blokkli/helpers";
 import { BlokkliTransition } from "#blokkli/components";
 import { filterTransforms } from "#blokkli/helpers/transform";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
@@ -200,14 +199,11 @@ async function onTransformHost(plugin, values) {
   );
   ui.setTransform();
 }
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
 const possibleTransforms = computed(
   () => filterTransforms(
     plugins.value || [],
     selection.uuids.value,
-    itemBundleIds.value,
+    selection.bundles.value,
     types.allowedTypesInList.value
   )
 );
@@ -222,27 +218,6 @@ defineCommands(
     }
   }))
 );
-const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
-  const notDraggedBlocks = allBlocks.filter(
-    (block) => !dragItems.find((dragItem) => dragItem.uuid === block.uuid)
-  );
-  const validPlugins = plugins2.filter((plugin) => {
-    const draggedBundles = dragItems.map((item) => item.itemBundle);
-    return draggedBundles.every((bundle) => plugin.bundles.includes(bundle)) && dragItems.length + 1 >= plugin.min && (plugin.max === -1 || dragItems.length + 1 <= plugin.max);
-  });
-  const possibleTransforms2 = [];
-  validPlugins.forEach((plugin) => {
-    notDraggedBlocks.forEach((block) => {
-      if (!plugin.targetBundles || plugin.targetBundles.includes(block.itemBundle)) {
-        possibleTransforms2.push({
-          plugin,
-          block
-        });
-      }
-    });
-  });
-  return possibleTransforms2;
-};
 </script>
 
 <script>

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

@@ -134,22 +134,22 @@ const items = computed(() => {
   }).filter(falsy);
 });
 const canTranslateBlock = computed(() => {
-  if (selection.blocks.value.length !== 1) {
+  const block = selection.item.value;
+  if (!block) {
     return false;
   }
-  const block = selection.blocks.value[0];
-  if (block.libraryItemUuid) {
+  if (block.library?.libraryItemUuid) {
     return false;
   }
   const definition = definitions.getBlockDefinition(
-    block.itemBundle,
-    block.hostFieldListType,
+    block.bundle,
+    block.fieldListType,
     block.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
     return false;
   }
-  const type = types.getBlockBundleDefinition(block.itemBundle);
+  const type = types.getBlockBundleDefinition(block.bundle);
   if (!type) {
     return false;
   }
@@ -172,7 +172,7 @@ function onTranslate(items2) {
   if (item) {
     eventBus.emit("item:edit", {
       uuid: item.uuid,
-      bundle: item.itemBundle
+      bundle: item.bundle
     });
   }
 }

package/dist/runtime/components/Edit/Features/Validations/SidebarItem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="bk-validation-item" @click.prevent="onClick">
     <div v-if="block" class="bk-validation-item-header">
-      <ItemIcon :bundle="block.itemBundle" />
+      <ItemIcon :bundle="block.bundle" />
       <div>{{ itemBundle?.label }}</div>
     </div>
     <div v-html="message" />
@@ -18,19 +18,19 @@ const props = defineProps({
   entityType: { type: String, required: false },
   entityUuid: { type: String, required: false }
 });
-const { runtimeConfig, eventBus, dom, types } = useBlokkli();
+const { runtimeConfig, eventBus, types, blocks } = useBlokkli();
 const isBlock = computed(
   () => props.entityType === runtimeConfig.itemEntityType
 );
 const block = computed(() => {
   if (isBlock.value && props.entityUuid) {
-    return dom.findBlock(props.entityUuid);
+    return blocks.getBlock(props.entityUuid);
   }
   return null;
 });
 const itemBundle = computed(() => {
-  if (block.value?.itemBundle) {
-    return types.getBlockBundleDefinition(block.value.itemBundle);
+  if (block.value?.bundle) {
+    return types.getBlockBundleDefinition(block.value.bundle);
   }
   return null;
 });

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

@@ -10,7 +10,7 @@
 import {
   featureComponents
 } from "#blokkli-build/features";
-import { useBlokkli, onMounted, nextTick, computed } from "#imports";
+import { useBlokkli, computed, watch } from "#imports";
 const emit = defineEmits(["loaded"]);
 const { adapter, features, ui, debug } = useBlokkli();
 const logger = debug.createLogger("Features");
@@ -37,12 +37,22 @@ const availableFeatures = computed(() => {
     return v.id;
   });
 });
-onMounted(() => {
-  nextTick(() => {
-    emit("loaded");
-    logger.log("Features loaded", renderedFeatures.value);
-  });
-});
+const hasLoadedFeatures = computed(
+  () => renderedFeatures.value.length === availableFeatures.value.length
+);
+const unwatchInit = watch(
+  hasLoadedFeatures,
+  (hasLoaded) => {
+    if (hasLoaded) {
+      emit("loaded");
+      logger.log("Features loaded", renderedFeatures.value);
+      unwatchInit();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 
 <script>

package/dist/runtime/components/Edit/Form/Toggle/index.vue

@@ -1,9 +1,10 @@
 <template>
   <label class="bk-checkbox-toggle">
+    <slot />
     <input v-model="value" type="checkbox" class="peer" :disabled />
     <div class="bk-checkbox-toggle-toggle" />
-    <div class="bk-checkbox-toggle-label">
-      <div>{{ label }}</div>
+    <div v-if="label || description" class="bk-checkbox-toggle-label">
+      <div v-if="label">{{ label }}</div>
       <div v-if="description">
         {{ description }}
       </div>
@@ -13,7 +14,7 @@
 
 <script setup>
 defineProps({
-  label: { type: String, required: true },
+  label: { type: String, required: false },
   description: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });

package/dist/runtime/components/Edit/Form/Toggle/index.vue.d.ts

@@ -1,14 +1,24 @@
 type __VLS_Props = {
-    label: string;
+    label?: string;
     description?: string;
     disabled?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Edit/InfoBox/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="bk-info-box">
     <Icon name="info" />
-    <p v-html="text" />
+    <div>
+      <slot>
+        <p v-html="text" />
+      </slot>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { Icon } from "#blokkli/components";
 defineProps({
-  text: { type: String, required: true }
+  text: { type: String, required: false }
 });
 </script>