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

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

@@ -1,20 +1,12 @@
 <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"
   />
   <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
-  <Teleport :to="artboardElement">
-    <div
-      class="bk bk-host-selection-overlay"
-      :style="{
-  visibility: selection.hasHostSelected.value ? 'visible' : 'hidden'
-}"
-    />
-  </Teleport>
-
   <PluginItemDropdown
     v-if="itemDropdownItems.length"
     id="selection"
@@ -28,7 +20,7 @@
 
   <SelectionAddButtons
     v-if="state.editMode.value === 'editing'"
-    :blocks="selection.blocks.value"
+    :items="selection.items.value"
   />
 </template>
 
@@ -40,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,
@@ -51,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(() => {
@@ -105,7 +112,6 @@ function onSelectDropdownItem(item) {
     selectAllBlocks();
   }
 }
-const artboardElement = ui.artboardElement();
 const gl = animation.gl();
 const hasSelectedOnce = ref(false);
 const stop = watch(
@@ -144,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(
@@ -160,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();
@@ -176,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;
   }
@@ -196,7 +202,7 @@ const visuallySelectBlocks = (toggleUuid) => {
       if (!intersects(rect, encompassingRect2)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }
@@ -240,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) => {
@@ -249,19 +255,40 @@ 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") {
-    eventBus.emit("select:end", []);
-    eventBus.emit("select:host:unselect");
+    if (!ui.openTooltip.value) {
+      eventBus.emit("select:end", []);
+      eventBus.emit("select:host:unselect");
+    }
   } else if (e.code === "Tab") {
     if (tour.isTouring.value || ui.hasDialogOpen.value) {
       return;
     }
     e.originalEvent.preventDefault();
-    if (selection.blocks.value.length !== 1) {
+    if (!selection.items.value.length) {
       const uuid = findMostVisibleBlock();
       if (uuid) {
         eventBus.emit("select", uuid);
@@ -270,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/Banner/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="bk bk-translations-banner">
-    <Icon name="translate" />
-    <p v-html="text" />
-    <button class="bk-translations-banner-close" @click="onClick">
-      {{ $t("translationsBannerButton", "Edit source language instead") }}
-      <Icon name="close" />
-    </button>
-  </div>
+  <Banner
+    id="translate"
+    icon="translate"
+    :text
+    :button="$t('translationsBannerButton', 'Edit source language instead')"
+    scheme="yellow"
+    @click="onClick"
+  />
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
 const props = defineProps({
   activeLanguage: { type: Object, required: true }
 });
-const { $t, adapter, state } = useBlokkli();
+const { $t, adapter, state, ui } = useBlokkli();
 const onClick = () => {
   const sourceLanguage = state.translation.value.sourceLanguage;
   if (!sourceLanguage) {
@@ -39,4 +39,10 @@ const text = computed(() => {
     "You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available."
   ).replace("@language", props.activeLanguage.name);
 });
+onMounted(() => {
+  ui.setSelectionColor("translating", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("translating");
+});
 </script>

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

@@ -48,11 +48,8 @@
     </PluginTourItem>
   </Teleport>
 
-  <Teleport to="#bk-banner-container">
-    <Banner
-      v-if="state.editMode.value === 'translating'"
-      :active-language="activeLanguage"
-    />
+  <Teleport to="#bk-banner-list">
+    <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
   <PluginMenuButton
@@ -61,14 +58,14 @@
     :description="
   $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
 "
-    :disabled="editMode !== 'translating'"
+    :disabled="!isTranslating"
     :weight="60"
     icon="translate"
     @click="eventBus.emit('batchTranslate')"
   />
 
   <PluginItemAction
-    v-if="editMode === 'translating'"
+    v-if="isTranslating"
     id="translate"
     :disabled="!canTranslateBlock"
     :title="$t('translationsItemAction', 'Translate')"
@@ -102,7 +99,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Adds support for block translations."
 });
 const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
-const { translation, editMode } = state;
+const isTranslating = computed(() => state.editMode.value === "translating");
 const isOpen = ref(false);
 const isDropdown = computed(() => {
   if (ui.isMobile.value) {
@@ -113,7 +110,7 @@ const isDropdown = computed(() => {
 });
 const activeLangcode = computed(() => context.value.language);
 const activeLanguage = computed(() => {
-  return translation.value.availableLanguages?.find(
+  return state.translation.value.availableLanguages?.find(
     (v) => v.id === activeLangcode.value
   ) || {
     id: activeLangcode.value,
@@ -121,14 +118,14 @@ const activeLanguage = computed(() => {
   };
 });
 const items = computed(() => {
-  return (translation.value.availableLanguages || []).map((language) => {
+  return (state.translation.value.availableLanguages || []).map((language) => {
     if (language && language.id) {
       return {
         id: language.id,
         code: language.id.toUpperCase(),
         label: language.name,
         checked: context.value.language === language.id,
-        translation: (translation.value.translations || []).find(
+        translation: (state.translation.value.translations || []).find(
           (v) => v.id === language.id
         )
       };
@@ -137,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;
   }
@@ -175,17 +172,17 @@ function onTranslate(items2) {
   if (item) {
     eventBus.emit("item:edit", {
       uuid: item.uuid,
-      bundle: item.itemBundle
+      bundle: item.bundle
     });
   }
 }
 onBlokkliEvent("item:doubleClick", function(block) {
-  if (editMode.value === "translating" && canTranslateBlock.value) {
+  if (isTranslating.value && canTranslateBlock.value) {
     onTranslate([block]);
   }
 });
 onBlokkliEvent("entity:translated", (langcode) => {
-  const targetTranslation = translation.value.translations?.find(
+  const targetTranslation = state.translation.value.translations?.find(
     (v) => v.id === langcode
   );
   if (targetTranslation) {
@@ -193,12 +190,12 @@ onBlokkliEvent("entity:translated", (langcode) => {
   }
 });
 onMounted(() => {
-  const translationExists = !!translation.value.translations?.find(
+  const translationExists = !!state.translation.value.translations?.find(
     (v) => v.id === context.value.language
   );
   if (!translationExists) {
-    const sourceTranslation = translation.value.translations?.find(
-      (v) => v.id === translation.value.sourceLanguage
+    const sourceTranslation = state.translation.value.translations?.find(
+      (v) => v.id === state.translation.value.sourceLanguage
     );
     if (sourceTranslation) {
       return adapter.changeLanguage(sourceTranslation);

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/Text/index.vue

@@ -27,7 +27,8 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   minlength: { type: [String, Number], required: false },
-  maxlength: { type: [String, Number], required: false }
+  maxlength: { type: [String, Number], required: false },
+  type: { type: String, required: false }
 });
 const value = defineModel({ type: String });
 </script>

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

@@ -7,6 +7,7 @@ type __VLS_Props = {
     disabled?: boolean;
     minlength?: string | number;
     maxlength?: string | number;
+    type?: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;

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;
+    };
+};