@blokkli/editor 2.0.0-alpha.31 → 2.0.0-alpha.33

package/dist/runtime/editor/components/AddListItem/index.vue

@@ -6,7 +6,6 @@
     type="button"
     class="bk-add-item"
     :menu="menu"
-    :title="description"
     :data-sortli-id="id"
     :class="[
   {
@@ -14,6 +13,8 @@
   },
   'bk-is-' + color
 ]"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
     <div class="bk-add-item-icon">
       <ItemIconBox :color :bundle :icon />
@@ -29,6 +30,7 @@ import { useBlokkli, computed, useTemplateRef } from "#imports";
 import { ItemIconBox } from "#blokkli/editor/components";
 import { PluginContextMenu } from "#blokkli/editor/plugins";
 const { storage, $t } = useBlokkli();
+const emit = defineEmits(["help", "startHelp"]);
 const props = defineProps({
   id: { type: String, required: true },
   context: { type: String, required: true },
@@ -39,7 +41,9 @@ const props = defineProps({
   icon: { type: null, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
   isAutoAdd: { type: Boolean, required: false },
-  noContextMenu: { type: Boolean, required: false }
+  noContextMenu: { type: Boolean, required: false },
+  useHelp: { type: Boolean, required: false },
+  helpActive: { type: Boolean, required: false }
 });
 const el = useTemplateRef("pluginContextMenu");
 const favorites = storage.use("blockFavorites", []);
@@ -65,5 +69,35 @@ const menu = computed(() => {
   ];
 });
 const getElement = () => el.value?.$el;
+let helpTimeout = null;
+function onMouseEnter() {
+  if (!props.useHelp) {
+    return;
+  }
+  if (helpTimeout) {
+    window.clearTimeout(helpTimeout);
+    helpTimeout = null;
+  }
+  if (props.helpActive) {
+    const element = getElement();
+    if (!element) {
+      return;
+    }
+    emit("help", element);
+  }
+  helpTimeout = window.setTimeout(() => {
+    const element = getElement();
+    if (!element) {
+      return;
+    }
+    emit("startHelp", element);
+  }, 800);
+}
+function onMouseLeave() {
+  if (helpTimeout) {
+    window.clearTimeout(helpTimeout);
+    helpTimeout = null;
+  }
+}
 defineExpose({ getElement });
 </script>

package/dist/runtime/editor/components/AddListItem/index.vue.d.ts

@@ -10,10 +10,18 @@ export type AddListItemProps = {
     disabled?: boolean;
     isAutoAdd?: boolean;
     noContextMenu?: boolean;
+    useHelp?: boolean;
+    helpActive?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<AddListItemProps, {
     getElement: () => HTMLElement | null;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AddListItemProps> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (d: HTMLElement) => void;
+    startHelp: (d: HTMLElement) => void;
+}, string, import("vue").PublicProps, Readonly<AddListItemProps> & Readonly<{
+    onHelp?: ((d: HTMLElement) => any) | undefined;
+    onStartHelp?: ((d: HTMLElement) => any) | undefined;
+}>, {
     bundle: string;
     description: string;
     icon: BlokkliIcon;

package/dist/runtime/editor/components/AnimationCanvas/index.vue

@@ -4,23 +4,21 @@
       id="bk-animation-canvas-webgl"
       :key="animation.canvasKey.value"
       ref="canvasEl"
+      tabindex="0"
       :style
       @click.capture="onClick"
       @pointerdown.capture="onPointerDown"
       @pointerup.capture="onPointerUp"
       @pointermove="onPointerMove"
+      @focus="onCanvasFocus"
+      @blur="onCanvasBlur"
     />
   </Teleport>
 </template>
 
 <script setup>
-import {
-  falsy
-} from "#blokkli/helpers";
-import {
-  getDistance,
-  isInsideRect
-} from "#blokkli/editor/helpers/geometry";
+import { falsy } from "#blokkli/helpers";
+import { getDistance, isInsideRect } from "#blokkli/editor/helpers/geometry";
 import {
   MOUSE_BUTTON,
   MOUSE_BUTTONS,
@@ -47,6 +45,12 @@ const {
   directive,
   blocks
 } = useBlokkli();
+function onCanvasFocus() {
+  ui.setCanvasFocused(true);
+}
+function onCanvasBlur() {
+  ui.setCanvasFocused(false);
+}
 let handlePointerMove = false;
 const cursor = computed(
   () => state.isLoading.value ? "wait" : animation.cursor.value
@@ -191,6 +195,9 @@ function onPointerDown(e) {
   if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
+  if (canvasEl.value) {
+    canvasEl.value.focus();
+  }
   if (!keyboard.isPressingSpace.value) {
     e.preventDefault();
     e.stopPropagation();
@@ -432,6 +439,9 @@ function onClick(e) {
   e.preventDefault();
   e.stopImmediatePropagation();
   e.stopPropagation();
+  if (canvasEl.value) {
+    canvasEl.value.focus();
+  }
 }
 const canvasEl = useTemplateRef("canvasEl");
 watch(

package/dist/runtime/editor/components/ArtboardTooltip/index.d.vue.ts

@@ -1,4 +1,4 @@
-import { type PlacementVertical } from '#blokkli/editor/composables/useStickyToolbar';
+import { type PlacementVertical, type PlacementHorizontal } from '#blokkli/editor/composables/useStickyToolbar';
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { Coord } from '#blokkli/editor/types/geometry';
 type __VLS_Props = {
@@ -7,6 +7,7 @@ type __VLS_Props = {
     anchorEl?: HTMLElement | null;
     anchorCoordinates?: Coord | null;
     placementY?: PlacementVertical;
+    placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
 };
 declare var __VLS_6: {};
@@ -21,6 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     anchorEl: HTMLElement | null;
     anchorCoordinates: Coord | null;
     placementY: PlacementVertical;
+    placementX: PlacementHorizontal;
     closeIcon: BlokkliIcon;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/editor/components/ArtboardTooltip/index.vue

@@ -2,7 +2,7 @@
   <div
     ref="el"
     class="bk bk-artboard-tooltip"
-    :class="'bk-is-' + placementY"
+    :class="['bk-is-y-' + placementY, 'bk-is-x-' + placementX]"
     :style="{
   '--bk-caret-x': caretX
 }"
@@ -39,6 +39,7 @@ const props = defineProps({
   anchorEl: { type: null, required: false, default: null },
   anchorCoordinates: { type: [Object, null], required: false, default: null },
   placementY: { type: String, required: false, default: "auto" },
+  placementX: { type: String, required: false, default: "center" },
   closeIcon: { type: null, required: false, default: "bk_mdi_close" }
 });
 const emit = defineEmits(["close"]);
@@ -48,7 +49,7 @@ const { onKeyDown } = useFocusTrap({
   debugLabel: "ArtboardTooltip: " + props.id
 });
 const { ui } = useBlokkli();
-const { placementY, caretX } = useStickyToolbar(el, {
+const { placementY, placementX, caretX } = useStickyToolbar(el, {
   getAnchorElement() {
     return props.anchorEl ?? null;
   },
@@ -59,7 +60,7 @@ const { placementY, caretX } = useStickyToolbar(el, {
     return props.placementY;
   },
   getPlacementX() {
-    return "center";
+    return props.placementX;
   },
   getCaretWidth() {
     return 30;

package/dist/runtime/editor/components/ArtboardTooltip/index.vue.d.ts

@@ -1,4 +1,4 @@
-import { type PlacementVertical } from '#blokkli/editor/composables/useStickyToolbar';
+import { type PlacementVertical, type PlacementHorizontal } from '#blokkli/editor/composables/useStickyToolbar';
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { Coord } from '#blokkli/editor/types/geometry';
 type __VLS_Props = {
@@ -7,6 +7,7 @@ type __VLS_Props = {
     anchorEl?: HTMLElement | null;
     anchorCoordinates?: Coord | null;
     placementY?: PlacementVertical;
+    placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
 };
 declare var __VLS_6: {};
@@ -21,6 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     anchorEl: HTMLElement | null;
     anchorCoordinates: Coord | null;
     placementY: PlacementVertical;
+    placementX: PlacementHorizontal;
     closeIcon: BlokkliIcon;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/editor/components/AutoHeight/index.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    anchor: 'top' | 'bottom';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/AutoHeight/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="bk-auto-height"
+    :class="'bk-is-' + anchor"
+    :style="{ height: height + 'px' }"
+  >
+    <div ref="inner" class="bk-auto-height-inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, ref, onMounted, onBeforeUnmount } from "#imports";
+defineProps({
+  anchor: { type: String, required: true }
+});
+const inner = useTemplateRef("inner");
+const height = ref(0);
+let observer = null;
+onMounted(() => {
+  const el = inner.value;
+  if (!el) return;
+  observer = new ResizeObserver(() => {
+    height.value = el.scrollHeight;
+  });
+  observer.observe(el);
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+</script>

package/dist/runtime/editor/components/AutoHeight/index.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    anchor: 'top' | 'bottom';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/BlockPreviewItem/index.d.vue.ts

@@ -1,6 +1,6 @@
 import type { FieldListItem } from '#blokkli/types';
 type __VLS_Props = {
-    items: FieldListItem[] | FieldListItem;
+    items?: FieldListItem[] | FieldListItem;
     title: string;
     description?: string;
     bundle?: string;
@@ -8,6 +8,10 @@ type __VLS_Props = {
     noPreview?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bundle: string;
+    description: string;
+    noPreview: boolean;
+    items: FieldListItem[] | FieldListItem;
     maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/BlockPreviewItem/index.vue

@@ -41,17 +41,20 @@ import {
   INJECT_PROVIDER_BLOCKS
 } from "#blokkli/helpers/injections";
 const props = defineProps({
-  items: { type: [Array, Object], required: true },
+  items: { type: [Array, Object], required: false, default: () => [] },
   title: { type: String, required: true },
-  description: { type: String, required: false },
-  bundle: { type: String, required: false },
+  description: { type: String, required: false, default: void 0 },
+  bundle: { type: String, required: false, default: void 0 },
   maxHeight: { type: Number, required: false, default: 400 },
-  noPreview: { type: Boolean, required: false }
+  noPreview: { type: Boolean, required: false, default: false }
 });
 const { types, definitions } = useBlokkli();
-const normalizedItems = computed(
-  () => Array.isArray(props.items) ? props.items : [props.items]
-);
+const normalizedItems = computed(() => {
+  if (!props.items) {
+    return [];
+  }
+  return Array.isArray(props.items) ? props.items : [props.items];
+});
 const bundleLabel = computed(
   () => props.bundle ? types.getBlockBundleDefinition(props.bundle)?.label || props.bundle : ""
 );

package/dist/runtime/editor/components/BlockPreviewItem/index.vue.d.ts

@@ -1,6 +1,6 @@
 import type { FieldListItem } from '#blokkli/types';
 type __VLS_Props = {
-    items: FieldListItem[] | FieldListItem;
+    items?: FieldListItem[] | FieldListItem;
     title: string;
     description?: string;
     bundle?: string;
@@ -8,6 +8,10 @@ type __VLS_Props = {
     noPreview?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bundle: string;
+    description: string;
+    noPreview: boolean;
+    items: FieldListItem[] | FieldListItem;
     maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/DiffViewer/DiffValue.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    before: string;
+    after: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/DiffViewer/DiffValue.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="bk-diff-value" v-html="diffHtml" />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import diff from "html-diff-ts";
+const MAX_CHANGES = 6;
+const props = defineProps({
+  before: { type: String, required: true },
+  after: { type: String, required: true }
+});
+const diffHtml = computed(() => {
+  const result = diff(props.before, props.after);
+  const changes = (result.match(/<ins[\s>]/g)?.length || 0) + (result.match(/<del[\s>]/g)?.length || 0);
+  if (changes > MAX_CHANGES) {
+    return `<del>${props.before}</del><ins>${props.after}</ins>`;
+  }
+  return result;
+});
+</script>

package/dist/runtime/editor/components/DiffViewer/DiffValue.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    before: string;
+    after: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/DiffViewer/State.vue

@@ -64,10 +64,10 @@
           >
             <h3>{{ prop.key }}</h3>
             <div class="bk-diff-monospace">
-              <div
+              <DiffValue
                 v-if="diffMode === 'inline'"
-                class="bk-diff-prop-diff"
-                v-html="prop.diff"
+                :before="prop.before || ''"
+                :after="prop.after || ''"
               />
               <div
                 v-else-if="diffMode === 'side_by_side'"
@@ -102,8 +102,7 @@
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { ItemIcon, FormRadioTabs } from "#blokkli/editor/components";
-import diff from "html-diff-ts";
+import { ItemIcon, FormRadioTabs, DiffValue } from "#blokkli/editor/components";
 const props = defineProps({
   stateBefore: { type: Object, required: true },
   stateAfter: { type: Object, required: true },
@@ -191,7 +190,6 @@ const diffItems = computed(() => {
         status: "removed",
         props: Object.entries(beforeProps).map(([key, value]) => ({
           key,
-          diff: diff(toString(value), ""),
           before: toString(value),
           after: ""
         }))
@@ -204,7 +202,6 @@ const diffItems = computed(() => {
         if (beforeValue !== afterValue) {
           changedProps.push({
             key,
-            diff: diff(toString(beforeValue), toString(afterValue)),
             before: toString(beforeValue),
             after: toString(afterValue)
           });
@@ -214,7 +211,6 @@ const diffItems = computed(() => {
         if (!(key in beforeProps)) {
           changedProps.push({
             key,
-            diff: diff("", toString(afterProps[key])),
             before: "",
             after: toString(afterProps[key])
           });
@@ -246,7 +242,6 @@ const diffItems = computed(() => {
         status: "added",
         props: Object.entries(afterProps).map(([key, value]) => ({
           key,
-          diff: diff("", toString(value)),
           before: "",
           after: toString(value)
         }))

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

@@ -8,7 +8,11 @@
       <Loading v-if="showLoading" screen />
     </Transition>
 
-    <div ref="mainLayoutElement" class="bk-main-layout">
+    <div
+      ref="mainLayoutElement"
+      class="bk-main-layout"
+      :lang="ui.interfaceLanguage.value"
+    >
       <Toolbar @loaded="toolbarLoaded = true" />
       <div ref="viewportElement" class="bk bk-viewport">
         <Messages />
@@ -103,9 +107,12 @@ import pluginProvider from "#blokkli/editor/providers/plugin";
 import directiveProvider from "#blokkli/editor/providers/directive";
 import fieldsProvider from "#blokkli/editor/providers/fields";
 import iconsProvider from "#blokkli/editor/providers/icons";
+import permissionsProvider from "#blokkli/editor/providers/permissions";
+import adaptersProvider from "#blokkli/editor/providers/adapters";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
+import getExtensions from "#blokkli-build/adapter-extensions";
 import {
   INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_APP,
@@ -120,7 +127,10 @@ import {
 } from "#blokkli/helpers/injections";
 import { allComponents } from "#blokkli-build/chunk-editing";
 import { falsy } from "#blokkli/helpers";
-import { addElementClasses, useBlockRegistration } from "#blokkli/editor/composables";
+import {
+  addElementClasses,
+  useBlockRegistration
+} from "#blokkli/editor/composables";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -150,6 +160,7 @@ const context = computed(() => {
   };
 });
 const adapter = await getAdapter(context);
+const adapters = await adaptersProvider(adapter, getExtensions, context);
 const providerKey = inject(INJECT_PROVIDER_KEY, "");
 const route = useRoute();
 const toolbarLoaded = ref(false);
@@ -191,11 +202,19 @@ const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
 const selection = selectionProvider(blocks);
 const keyboard = keyboardProvider(eventBus);
-const animation = animationProvider(eventBus, ui, storage, selection, debug, keyboard);
+const animation = animationProvider(
+  eventBus,
+  ui,
+  storage,
+  selection,
+  debug,
+  keyboard
+);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(dom, types);
+const permissionsInstance = await permissionsProvider(adapter);
 const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
 const mutatedEntity = computed(() => {
   return {
@@ -255,6 +274,7 @@ provide(INJECT_EDIT_CONTEXT, {
 const app = {
   $t,
   adapter,
+  adapters,
   animation,
   broadcast,
   commands,
@@ -279,7 +299,8 @@ const app = {
   types,
   ui,
   fields,
-  icons
+  icons,
+  permissions: permissionsInstance
 };
 provide(INJECT_APP, app);
 function textWithHighlight(title, text) {

package/dist/runtime/editor/components/FeaturesRenderer/index.vue

@@ -12,27 +12,45 @@ import {
 } from "#blokkli-build/features";
 import { useBlokkli, computed, watch } from "#imports";
 const emit = defineEmits(["loaded"]);
-const { adapter, features, ui, debug } = useBlokkli();
+const { adapter, adapters, features, ui, debug, permissions } = useBlokkli();
 const logger = debug.createLogger("Features");
 const renderedFeatures = computed(
   () => features.mountedFeatures.value.map((v) => v.id)
 );
 const disabledFeatures = adapter.getDisabledFeatures ? await adapter.getDisabledFeatures() : await Promise.resolve([]);
 const availableFeatures = computed(() => {
-  return features.features.value.filter((v) => {
-    if (disabledFeatures.includes(v.id)) {
+  return features.features.value.filter((feature) => {
+    if (disabledFeatures.includes(feature.id)) {
       return false;
     }
-    if (v.requiredAdapterMethods?.length && !v.requiredAdapterMethods.every((method) => adapter[method])) {
-      return false;
+    if (feature.requiredAdapterMethods?.length) {
+      const hasAllMethods = feature.requiredAdapterMethods.every((method) => {
+        if (adapter[method]) {
+          return true;
+        }
+        return adapters.extensions.some((ext) => ext.methods[method]);
+      });
+      if (!hasAllMethods) {
+        return false;
+      }
+    }
+    if (feature.requiredPermissions?.length) {
+      const hasAllPermissions = feature.requiredPermissions.every(
+        (permission) => permissions.hasPermission(permission)
+      );
+      if (!hasAllPermissions) {
+        return false;
+      }
     }
-    if (v.dependencies?.length && !v.dependencies.every((id) => renderedFeatures.value.includes(id))) {
+    if (feature.dependencies?.length && !feature.dependencies.every((id) => renderedFeatures.value.includes(id))) {
       return false;
     }
-    if (v.beta && !features.enabledBetaFeatures.value.includes(v.id)) {
+    if (feature.beta && !features.enabledBetaFeatures.value.includes(
+      feature.id
+    )) {
       return false;
     }
-    return !v.viewports?.length || v.viewports.includes(ui.appViewport.value);
+    return !feature.viewports?.length || feature.viewports.includes(ui.appViewport.value);
   }).map((v) => {
     return v.id;
   });

package/dist/runtime/editor/components/FlexTextarea/index.d.vue.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    maxHeight?: number;
+    minHeight?: number;
+    submitOnEnter?: boolean;
+    /** When true, convert pasted HTML to markdown */
+    pasteMarkdown?: boolean;
+    textareaClass?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    element: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    keydown: (event: KeyboardEvent) => any;
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    maxHeight: number;
+    minHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;