@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="root" class="bk-block-proxy" v-bind="rootProps">
+  <div ref="root" class="bk-block-proxy">
     <div class="bk-block-proxy-header">
       <ItemIcon :bundle="bundle" />
       {{ type?.label }}
@@ -33,7 +33,7 @@
 import { computed, useBlokkli, ref } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
-import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   uuid: { type: String, required: true },
@@ -55,12 +55,6 @@ const proxyComponentProps = computed(() => {
   }
   return props.itemProps;
 });
-const rootProps = computed(() => {
-  if (libraryItemProps.value) {
-    return buildAttributesForLibraryItem(libraryItemProps.value);
-  }
-  return {};
-});
 const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue

@@ -1,60 +1,44 @@
 <template>
   <slot />
-
-  <Teleport to="body">
-    <Transition name="bk-fade">
-      <div
-        v-if="errors.length"
-        class="bk bk-fatal-error-overlay"
-        @wheel.capture.passive.stop
-        @click.stop
-        @mousedown.stop
-        @touchstart.passive.stop
-        @mousemove.stop
-      >
-        <div class="bk-fatal-error-overlay-info">
-          <Icon name="sad" />
-          <div>
-            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
-            <p>
-              {{
-                $t(
-  "fatalErrorText",
-  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
-)
-              }}
-            </p>
-            <button class="bk-button bk-is-danger" @click="errors = []">
-              {{ $t("fatalErrorButton", "Continue anyway...") }}
-            </button>
-          </div>
-        </div>
-        <div class="bk-fatal-error-overlay-list">
-          <div v-for="(e, i) in unique" :key="i">
-            <h3>{{ e.name }}: {{ e.message }}</h3>
-            <code>
-              <pre>{{ e.stack }}</pre>
-            </code>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
 </template>
 
 <script setup>
-import { computed, ref, onErrorCaptured } from "#imports";
-import { Icon } from "#blokkli/components";
-import textProvider from "#blokkli/helpers/textProvider";
+import { emitMessage } from "#blokkli/helpers/eventBus";
+import { ref, onErrorCaptured, useBlokkli } from "#imports";
+import { useGlobalBlokkliObject } from "#blokkli/helpers/composables/useGlobalBlokkliObject";
+const props = defineProps({
+  label: { type: String, required: true }
+});
+const { $t } = useBlokkli();
+const globalBlokkli = useGlobalBlokkliObject();
 const errors = ref([]);
-const $t = textProvider();
+const isLocked = defineModel({ type: Boolean, ...{ default: false } });
+const emit = defineEmits(["error"]);
 onErrorCaptured((err) => {
   errors.value.push(err);
-  return false;
-});
-const unique = computed(() => {
-  return errors.value.filter((value, index, self) => {
-    return self.findIndex((v) => v.name === value.name) === index;
+  emit("error", err);
+  globalBlokkli.pushMessage({
+    type: "error",
+    name: "ErrorBoundary",
+    date: (/* @__PURE__ */ new Date()).toISOString(),
+    message: `[${props.label}] ${err.message}`,
+    context: err.stack || ""
   });
+  const willBeLocked = errors.value.length >= 3;
+  if (willBeLocked) {
+    const message = $t(
+      "errorCapturedMessageDisabled",
+      '"@label" has errored more than 3 times. The feature will be disabled.'
+    ).replace("@label", props.label).replace("@errorMessage", err.message);
+    emitMessage(message, "error", true);
+  } else {
+    const message = $t(
+      "errorCapturedMessage",
+      'Error in "@label": @errorMessage'
+    ).replace("@label", props.label).replace("@errorMessage", err.message);
+    emitMessage(message, "warning");
+  }
+  isLocked.value = willBeLocked;
+  return false;
 });
 </script>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue.d.ts

@@ -1,8 +1,21 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    error: (error: Error) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => 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 & {

package/dist/runtime/components/Edit/BlokkliRootErrorBoundary.vue

@@ -0,0 +1,93 @@
+<template>
+  <slot />
+
+  <Teleport to="body">
+    <Transition name="bk-fade">
+      <div
+        v-if="errors.length"
+        class="bk bk-fatal-error-overlay"
+        @wheel.capture.passive.stop
+        @click.stop
+        @mousedown.stop
+        @touchstart.passive.stop
+        @mousemove.stop
+      >
+        <div class="bk-fatal-error-overlay-info">
+          <Icon name="sad" />
+          <div>
+            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
+            <p>
+              {{
+                $t(
+  "fatalErrorText",
+  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
+)
+              }}
+            </p>
+            <div class="bk-fatal-error-buttons">
+              <button class="bk-button bk-is-danger" @click="errors = []">
+                {{ $t("fatalErrorButton", "Continue anyway...") }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="bk-fatal-error-overlay-list">
+          <h3>{{ title }}</h3>
+          <button class="bk-button" @click="downloadLogs">
+            {{ $t("downloadLogsButton", "Download Logs") }}
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, ref, onErrorCaptured } from "#imports";
+import { Icon } from "#blokkli/components";
+import textProvider from "#blokkli/helpers/textProvider";
+import { useGlobalBlokkliObject } from "#blokkli/helpers/composables/useGlobalBlokkliObject";
+const errors = ref([]);
+const $t = textProvider();
+const globalBlokkli = useGlobalBlokkliObject();
+onErrorCaptured((err) => {
+  errors.value.push(err);
+  globalBlokkli.pushMessage({
+    type: "error",
+    name: "RootErrorBoundary",
+    date: (/* @__PURE__ */ new Date()).toISOString(),
+    message: err.message,
+    context: err.stack || ""
+  });
+  return false;
+});
+const title = computed(() => {
+  return errors.value.filter((value, index, self) => {
+    return self.findIndex((v) => v.name === value.name) === index;
+  }).map((v) => {
+    return v.name + " " + v.message;
+  }).join("");
+});
+function downloadLogs() {
+  const messages = globalBlokkli.getMessages();
+  const header = "Type,Logger,Timestamp,Message,Context\n";
+  const rows = messages.map((msg) => {
+    const escapeCsv = (str) => `"${str.replace(/"/g, '""')}"`;
+    return [
+      escapeCsv(msg.type),
+      escapeCsv(msg.name),
+      escapeCsv(msg.date),
+      escapeCsv(msg.message),
+      escapeCsv(msg.context ?? "")
+    ].join(",");
+  }).join("\n");
+  const csv = header + rows;
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `blokkli-logs-${(/* @__PURE__ */ new Date()).toISOString()}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+</script>

package/dist/runtime/components/Edit/BlokkliRootErrorBoundary.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/Dialog/index.vue

@@ -9,8 +9,7 @@
     @touchmove.stop
     @touchend.stop
   >
-    <div class="bk-dialog-background" @click="$emit('cancel')" />
-    <div class="bk-dialog-inner" :style="style">
+    <div class="bk-dialog-inner" :style>
       <div class="bk bk-overlay-header">
         <Icon v-if="icon" :name="icon" />
         <h3>{{ title }}</h3>
@@ -53,13 +52,22 @@
 </template>
 
 <script setup>
-import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
+import {
+  useBlokkli,
+  onMounted,
+  computed,
+  ref,
+  onBeforeUnmount,
+  watch
+} from "#imports";
 import { Icon } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { ui, element } = useBlokkli();
 const emit = defineEmits(["submit", "cancel"]);
 const rootEl = ref(null);
 const props = defineProps({
+  id: { type: String, required: true },
   title: { type: String, required: true },
   lead: { type: String, required: false, default: "" },
   width: { type: [Number, String], required: false, default: 600 },
@@ -71,6 +79,11 @@ const props = defineProps({
   icon: { type: null, required: false, default: void 0 },
   fullScreen: { type: Boolean, required: false }
 });
+watch(ui.currentDialog, (dialog) => {
+  if (dialog?.id !== props.id) {
+    emit("cancel");
+  }
+});
 const style = computed(() => {
   if (ui.isMobile.value) {
     return {};
@@ -100,6 +113,14 @@ const getFocusableElements = () => {
     `Dialog "${props.title}" getFocusableElements`
   );
 };
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    emit("cancel");
+  }
+});
+onBlokkliEvent("overlay:close", () => {
+  emit("cancel");
+});
 const onKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
@@ -129,8 +150,8 @@ const onKeyDown = (e) => {
     e.preventDefault();
   }
 };
+ui.openDialog({ id: props.id, alignment: "center" });
 onMounted(() => {
-  ui.hasDialogOpen.value = true;
   const focusableElements = getFocusableElements();
   const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
   if (bestMatch) {
@@ -138,7 +159,7 @@ onMounted(() => {
   }
 });
 onBeforeUnmount(() => {
-  ui.hasDialogOpen.value = false;
+  ui.closeDialog(props.id);
 });
 </script>
 

package/dist/runtime/components/Edit/Dialog/index.vue.d.ts

@@ -1,5 +1,6 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
     title: string;
     lead?: string;
     width?: number | string;
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     cancel: (...args: any[]) => void;
     submit: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
+    id: string;
     title: string;
     lead?: string;
     width?: number | string;

package/dist/runtime/components/Edit/DraggableList.vue

@@ -16,25 +16,15 @@
       <BlokkliItem
         v-for="(item, i) in list"
         :key="item.uuid + fieldListType + definitions.renderKey.value"
+        class="bk-field-list-item"
         :uuid="item.uuid"
         :bundle="item.bundle"
         :options="item.options"
         :props="item.props"
         is-editing
         :index="i"
+        :data-bk-uuid="item.uuid"
         :parent-type="isNested ? entity.bundle : ''"
-        data-editing="true"
-        data-element-type="existing"
-        :data-sortli-id="item.uuid"
-        :data-uuid="item.uuid"
-        :data-host-type="entity.type"
-        :data-host-bundle="entity.bundle"
-        :data-host-uuid="entity.uuid"
-        :data-item-bundle="item.bundle"
-        :data-host-field-name="name"
-        :data-host-field-list-type="fieldListType"
-        :data-is-nested="isNested"
-        :data-entity-type="runtimeConfig.itemEntityType"
         :data-bk-is-muted="isMuted(item)"
       />
     </div>
@@ -48,6 +38,7 @@
     <BlokkliItem
       v-for="(item, i) in list"
       :key="item.uuid + fieldListType"
+      class="bk-field-list-item"
       :uuid="item.uuid"
       :bundle="item.bundle"
       :options="item.options"
@@ -55,18 +46,7 @@
       is-editing
       :index="i"
       :parent-type="isNested ? entity.bundle : ''"
-      data-editing="true"
-      data-element-type="existing"
-      :data-sortli-id="item.uuid"
-      :data-uuid="item.uuid"
-      :data-host-type="entity.type"
-      :data-host-bundle="entity.bundle"
-      :data-host-uuid="entity.uuid"
-      :data-item-bundle="item.bundle"
-      :data-host-field-name="name"
-      :data-host-field-list-type="fieldListType"
-      :data-is-nested="isNested"
-      :data-entity-type="runtimeConfig.itemEntityType"
+      :data-bk-uuid="item.uuid"
       :data-bk-is-muted="isMuted(item)"
     />
   </Component>
@@ -89,7 +69,7 @@ import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
-const { dom, runtimeConfig, selection, definitions } = useBlokkli();
+const { dom, selection, definitions } = useBlokkli();
 const root = ref(null);
 const props = defineProps({
   name: { type: String, required: true },

package/dist/runtime/components/Edit/EditProvider.vue

@@ -1,35 +1,43 @@
 <template>
+  <Teleport to="#nuxt-root">
+    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
+  </Teleport>
+
   <Teleport to="body">
     <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
       <Loading v-if="showLoading" screen />
     </Transition>
 
-    <div id="bk-banner-container">
-      <div id="bk-banner-list" class="bk">
-        <Banner
-          v-if="!state.stateAvailable.value"
-          id="state-unavailable"
-          icon="sad"
-          scheme="red"
-          :text="stateNotAvailableText"
-        />
-        <Banner
-          v-if="viewOnlyBanner"
-          id="view-only"
-          :icon="viewOnlyBanner.icon"
-          scheme="yellow"
-          :text="viewOnlyBanner.text"
-        />
+    <div ref="mainLayoutElement" class="bk-main-layout">
+      <Toolbar @loaded="toolbarLoaded = true" />
+      <div ref="viewportElement" class="bk bk-viewport">
+        <Messages />
       </div>
-      <Messages />
+      <Actions v-if="!isInitializing" />
+      <div id="bk-banner-container" class="bk">
+        <div id="bk-banner-list">
+          <Banner
+            v-if="!state.stateAvailable.value"
+            id="state-unavailable"
+            icon="sad"
+            scheme="red"
+            :text="stateNotAvailableText"
+          />
+          <Banner
+            v-if="viewOnlyBanner"
+            id="view-only"
+            :icon="viewOnlyBanner.icon"
+            scheme="yellow"
+            :text="viewOnlyBanner.text"
+          />
+        </div>
+      </div>
+      <Konami />
+      <SystemRequirements />
+      <Overlay />
     </div>
   </Teleport>
-  <Teleport to="#nuxt-root">
-    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
-  </Teleport>
-  <Actions v-if="!isInitializing" />
-  <Toolbar @loaded="toolbarLoaded = true" />
-  <AppMenu v-if="toolbarLoaded" />
+
   <Indicators />
   <Features
     v-if="isReady"
@@ -37,12 +45,10 @@
     @loaded="featuresLoaded = true"
   />
   <AnimationCanvas v-if="!isInitializing" />
-  <Konami />
-  <SystemRequirements />
   <slot
     v-if="!isInitializing"
     :key="definitions.renderKey.value"
-    :mutated-entity="mutatedEntity"
+    :mutated-entity
   />
 </template>
 
@@ -57,7 +63,9 @@ import {
   useRuntimeConfig,
   nextTick,
   inject,
-  onUnmounted
+  onUnmounted,
+  watch,
+  useTemplateRef
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
@@ -65,10 +73,10 @@ import Loading from "./Loading/index.vue";
 import Messages from "./Messages/index.vue";
 import Features from "./Features/index.vue";
 import Indicators from "./Indicators/index.vue";
-import AppMenu from "./AppMenu/index.vue";
 import DraggableList from "./DraggableList.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
+import Overlay from "./Overlay/index.vue";
 import Konami from "./Konami/index.vue";
 import Banner from "./Banner/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
@@ -109,6 +117,7 @@ import {
 } from "#blokkli/helpers/symbols";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { falsy } from "#blokkli/helpers";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -120,6 +129,8 @@ const props = defineProps({
   providerEl: { type: null, required: true }
 });
 defineSlots();
+const mainLayoutElement = useTemplateRef("mainLayoutElement");
+const viewportElement = useTemplateRef("viewportElement");
 const entityContext = computed(() => {
   return {
     uuid: props.entityUuid,
@@ -149,26 +160,35 @@ const state = await editStateProvider(
   context,
   $t,
   providerKey,
-  props.permissions
+  props.permissions.filter(falsy)
 );
 const storage = await storageProvider(adapter, context);
+const plugins = pluginProvider();
 const debug = debugProvider(storage);
+const baseLogger = debug.createLogger("EditProvider");
+baseLogger.log("Entity: ", context.value);
 const element = elementProvider(debug);
 const features = featuresProvider(storage);
 const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(props.providerEl, storage, state, context, element);
+const ui = uiProvider(
+  props.providerEl,
+  storage,
+  context,
+  element,
+  mainLayoutElement,
+  viewportElement
+);
 const dom = domProvider(ui, debug, definitions, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
 const selection = selectionProvider(blocks);
-const animation = animationProvider(ui, storage, selection, element);
+const animation = animationProvider(ui, storage, selection, debug);
 const keyboard = keyboardProvider(animation);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
-const plugins = pluginProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(state, dom, types);
 const mutatedEntity = computed(() => {
@@ -178,8 +198,13 @@ const mutatedEntity = computed(() => {
   };
 });
 const isReady = computed(
-  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
+  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value && mainLayoutElement.value
 );
+watch(isReady, (v) => {
+  if (v) {
+    baseLogger.log("is ready");
+  }
+});
 const showLoading = computed(() => {
   return !isReady.value || !featuresLoaded.value;
 });
@@ -206,7 +231,6 @@ addElementClasses(
   "bk-isolate-provider",
   shouldIsolate
 );
-const baseLogger = debug.createLogger("EditProvider");
 function setElementSymbolProperty(el, symbol, value) {
   el[symbol] = value;
 }
@@ -296,7 +320,17 @@ const viewOnlyBanner = computed(
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
 if (import.meta.hot) {
-  let onAfterUpdate = function() {
+  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
+  });
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+  import.meta.hot.on("vite:afterUpdate", (payload) => {
+    const hasUpdatedRenderer = payload.updates.find(
+      (v) => v.path.includes("/Renderer/")
+    );
+    if (hasUpdatedRenderer) {
+      animation.reset();
+    }
     try {
       eventBus.emit("state:reloaded");
       dom.updateVisibleRects();
@@ -311,14 +345,10 @@ if (import.meta.hot) {
       });
     } catch {
     }
-  };
-  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
-  });
-  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
   });
-  import.meta.hot.on("vite:afterUpdate", onAfterUpdate);
 }
 onMounted(async () => {
+  baseLogger.log("onMounted - START");
   setElementSymbolProperty(props.providerEl, INJECT_APP, app);
   setElementSymbolProperty(
     props.providerEl,
@@ -328,12 +358,12 @@ onMounted(async () => {
   window.addEventListener("contextmenu", onContextMenu);
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
-  baseLogger.log("EditProvider mounted");
   dom.init();
   directive.init();
   await nextTick();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
+  baseLogger.log("onMounted - END");
 });
 onBeforeUnmount(() => {
   window.removeEventListener("contextmenu", onContextMenu);

package/dist/runtime/components/Edit/EditProvider.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         entityBundle: string;
         language?: string;
         isolate?: boolean;
-        permissions: EditPermission[];
+        permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;