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

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

@@ -0,0 +1,95 @@
+<template>
+  <component
+    :is="tag"
+    ref="root"
+    :data-blokkli-editable-field="name ?? void 0"
+  >
+    <slot :value="renderedValue" />
+  </component>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef,
+  watch
+} from "#imports";
+import {
+  INJECT_APP,
+  INJECT_EDIT_CONTEXT,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_IS_IN_REUSABLE
+} from "#blokkli/helpers/injections";
+const props = defineProps({
+  name: { type: [String, null], required: false, default: null },
+  value: { type: String, required: false, default: "" },
+  tag: { type: String, required: false, default: "div" }
+});
+defineSlots();
+const root = useTemplateRef("root");
+const entity = inject(INJECT_ENTITY_CONTEXT, null);
+const editContext = inject(INJECT_EDIT_CONTEXT, null);
+const app = inject(INJECT_APP, null);
+const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
+const valueOverride = ref("");
+const renderedValue = computed(() => valueOverride.value || props.value || "");
+const onEditableUpdateValue = (e) => {
+  if (e.name === props.name && e.entityUuid === entity?.uuid) {
+    valueOverride.value = e.value;
+  }
+};
+function getValueCallback() {
+  return props.value;
+}
+function onStateReloaded() {
+  valueOverride.value = "";
+}
+function registerDirective(name) {
+  if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+    return;
+  }
+  app.directive.registerDirectiveElement(
+    root.value,
+    name,
+    entity,
+    "editable",
+    true,
+    getValueCallback
+  );
+}
+function unregisterDirective(name) {
+  if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+    return;
+  }
+  app.directive.unregisterDirectiveElement(root.value, name, entity, "editable");
+}
+onMounted(() => {
+  if (!editContext || !app || isInReusable) {
+    return;
+  }
+  editContext.eventBus.on("editable:update", onEditableUpdateValue);
+  editContext.eventBus.on("state:reloaded", onStateReloaded);
+  registerDirective(props.name);
+});
+watch(
+  () => props.name,
+  (newName, oldName) => {
+    if (!app || !entity || isInReusable) {
+      return;
+    }
+    unregisterDirective(oldName);
+    registerDirective(newName);
+  }
+);
+onBeforeUnmount(() => {
+  if (editContext) {
+    editContext.eventBus.off("editable:update", onEditableUpdateValue);
+    editContext.eventBus.off("state:reloaded", onStateReloaded);
+  }
+  unregisterDirective(props.name);
+});
+</script>

package/dist/runtime/editor/components/BlokkliEditableEdit.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    name?: string | null;
+    value?: string;
+    tag?: string;
+};
+type __VLS_Slots = {
+    default(props: {
+        value: string;
+    }): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
+    value: string;
+    tag: string;
+}, {}, {}, {}, 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/BlokkliRootErrorBoundary.d.vue.ts

@@ -1,8 +1,11 @@
+type __VLS_Props = {
+    language: string;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;

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

@@ -47,8 +47,11 @@ import { computed, ref, onErrorCaptured } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 import textProvider from "#blokkli/editor/providers/texts";
 import { useGlobalBlokkliObject } from "#blokkli/editor/composables";
+const props = defineProps({
+  language: { type: String, required: true }
+});
 const errors = ref([]);
-const $t = textProvider();
+const $t = await textProvider(props.language);
 const globalBlokkli = useGlobalBlokkliObject();
 onErrorCaptured((err) => {
   errors.value.push(err);

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

@@ -1,8 +1,11 @@
+type __VLS_Props = {
+    language: string;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;

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

@@ -93,12 +93,13 @@ import {
   useBlokkli,
   computed,
   ref,
+  shallowRef,
   watch,
   onMounted
 } from "#imports";
 import { ArtboardTooltip, AddListItem, Icon } from "#blokkli/editor/components";
 import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
-import { Fzf } from "fzf";
+import { loadFzf } from "#blokkli/editor/libraries/fzf";
 import { fragmentBlockBundle } from "#blokkli-build/config";
 const props = defineProps({
   bundles: { type: Array, required: true },
@@ -231,8 +232,12 @@ const actions = computed(() => {
 const allItems = computed(() => {
   return [...blocks.value, ...fragments.value, ...actions.value];
 });
-const fzf = new Fzf(allItems.value, {
-  selector: (item) => item.label + " " + item.description
+const fzf = shallowRef(null);
+onMounted(async () => {
+  const { Fzf } = await loadFzf();
+  fzf.value = new Fzf(allItems.value, {
+    selector: (item) => item.label + " " + item.description
+  });
 });
 function filterBySearch(items) {
   const text = searchText.value.trim();
@@ -246,10 +251,10 @@ function filterBySearch(items) {
 }
 const filteredBlocks = computed(() => {
   const text = searchText.value.trim();
-  if (!text) {
+  if (!text || !fzf.value) {
     return blocks.value;
   }
-  const results = fzf.find(text);
+  const results = fzf.value.find(text);
   const textLower = text.toLowerCase();
   return results.map((r) => r.item).filter((item) => item.type === "block").sort((a, b) => {
     const aInLabel = a.label.toLowerCase().includes(textLower);

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

@@ -198,33 +198,8 @@ export default {
         --bk-tw-bg-opacity: 1;
         background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
     }
-    .bk.bk-dialog .bk.bk-overlay-header {
-        padding-left: 15px;
-        font-size: 18px;
-        line-height: 28px;
-    }
-      .bk.bk-dialog .bk.bk-overlay-header > button {
-        padding: 15px;
-    }
-      .bk.bk-dialog .bk.bk-overlay-header > button:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-    }
-      .bk.bk-dialog .bk.bk-overlay-header > button:focus-visible {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-        outline-width: 2px;
-        outline-offset: -2px;
-        outline-color: rgb(var(--bk-theme-mono-100) / 1);
-    }
 }
 
-  @media (min-width: 1024px) {
-    .bk.bk-dialog .bk.bk-overlay-header {
-        padding-left: 25px;
-    }
-  }
-
   .bk.bk-dialog .bk-dialog-lead {
     margin-bottom: 10px;
     font-family: PB Inter, sans-serif;
@@ -385,58 +360,6 @@ export default {
   }
     }
 
-.bk.bk-overlay-header {
-    display: flex;
-    align-items: center;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(0 0 0 / var(--bk-tw-bg-opacity, 1));
-    padding-left: 10px;
-    font-size: 16px;
-    line-height: 24px;
-    line-height: 1;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-}
-
-.bk.bk-overlay-header > .bk-icon,
-  .bk.bk-overlay-header > .bk-blokkli-item-icon {
-    margin-right: 5px;
-    height: auto;
-    width: auto;
-}
-
-.bk.bk-overlay-header > .bk-icon svg, .bk.bk-overlay-header > .bk-blokkli-item-icon svg {
-    height: 1.25em;
-    width: 1.25em;
-    fill: currentColor;
-}
-
-.bk.bk-overlay-header h3 {
-    font-weight: 700;
-}
-
-.bk.bk-overlay-header > button {
-    margin-left: auto;
-    display: flex;
-    width: 60px;
-    height: 60px;
-    align-items: center;
-    justify-content: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-
-.bk.bk-overlay-header > button .bk-icon {
-    height: 1.25em;
-    width: 1.25em;
-}
-
-.bk.bk-overlay-header > button .bk-icon svg {
-    fill: currentColor;
-}
-
 .bk .bk-dialog-content-element {
     margin-bottom: 30px;
     display: flex;

package/dist/runtime/editor/components/EditIndicator.d.vue.ts

@@ -2,6 +2,7 @@ import '#blokkli-build/styles.css';
 import type { EditPermission } from '#blokkli/types/provider';
 type __VLS_Props = {
     uuid: string;
+    language: string;
     entityType: string;
     editLabel?: string;
     permissions: Array<EditPermission | null>;

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

@@ -21,7 +21,6 @@
 </template>
 
 <script setup>
-import textProvider from "#blokkli/editor/providers/texts";
 import {
   ref,
   onMounted,
@@ -34,12 +33,14 @@ import "#blokkli-build/styles.css";
 import { useAnimationFrame } from "#blokkli/editor/composables";
 const props = defineProps({
   uuid: { type: String, required: true },
+  language: { type: String, required: true },
   entityType: { type: String, required: true },
   editLabel: { type: String, required: false },
   permissions: { type: Array, required: true }
 });
 const key = computed(() => props.entityType + ":" + props.uuid);
-const $t = textProvider();
+const textProvider = await import("./../providers/texts").then((v) => v.default);
+const $t = await textProvider(props.language);
 const label = computed(() => {
   if (props.editLabel) {
     return props.editLabel;

package/dist/runtime/editor/components/EditIndicator.vue.d.ts

@@ -2,6 +2,7 @@ import '#blokkli-build/styles.css';
 import type { EditPermission } from '#blokkli/types/provider';
 type __VLS_Props = {
     uuid: string;
+    language: string;
     entityType: string;
     editLabel?: string;
     permissions: Array<EditPermission | null>;

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

@@ -12,6 +12,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
         providerType: ValidProviderTypes;
+    } & {
+        onReady?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -23,7 +25,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             key: string;
         }): any;
     };
-    emit: {};
+    emit: (e: "ready") => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -86,6 +86,7 @@ import Messages from "./Messages/index.vue";
 import FeaturesRenderer from "./FeaturesRenderer/index.vue";
 import Indicators from "./Indicators/index.vue";
 import DraggableList from "./DraggableList.vue";
+import BlokkliEditableEdit from "./BlokkliEditableEdit.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
 import Overlay from "./Overlay/index.vue";
@@ -122,6 +123,7 @@ import readabilityProviderFn from "#blokkli/editor/providers/readability";
 import fieldValueProviderFn from "#blokkli/editor/providers/fieldValue";
 import dragdropProvider from "#blokkli/editor/providers/dragdrop";
 import cacheProvider from "#blokkli/editor/providers/cache";
+import workspacesProvider from "#blokkli/editor/providers/workspaces";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -131,6 +133,7 @@ import {
   INJECT_APP,
   INJECT_EDIT_CONTEXT,
   INJECT_EDIT_FIELD_LIST_COMPONENT,
+  INJECT_EDIT_EDITABLE_COMPONENT,
   INJECT_EDIT_LOGGER,
   INJECT_ENTITY_CONTEXT,
   INJECT_GLOBAL_PROXY_MODE,
@@ -156,6 +159,7 @@ const props = defineProps({
   providerType: { type: null, required: true }
 });
 defineSlots();
+const emit = defineEmits(["ready"]);
 const mainLayoutElement = useTemplateRef("mainLayoutElement");
 const viewportElement = useTemplateRef("viewportElement");
 const entityContext = computed(() => {
@@ -181,7 +185,7 @@ const toolbarLoaded = ref(false);
 const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider(props.providerType);
-const $t = textProvider(context);
+const $t = await textProvider(context.value.language);
 const state = await editStateProvider(
   eventBus,
   adapter,
@@ -235,7 +239,7 @@ const fieldValue = fieldValueProviderFn(
   definitions,
   blocks
 );
-const readability = readabilityProviderFn(
+const readability = await readabilityProviderFn(
   adapters,
   context,
   directive,
@@ -244,6 +248,7 @@ const readability = readabilityProviderFn(
 const analyze = analyzeProviderFn(adapters, state, ui, context, $t, readability);
 const dragdrop = dragdropProvider();
 const cache = cacheProvider();
+const workspaces = workspacesProvider(adapter, context, state);
 const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
 const mutatedEntity = computed(() => {
   return {
@@ -292,13 +297,15 @@ function setElementSymbolProperty(el, symbol, value) {
 provide(INJECT_EDIT_LOGGER, baseLogger);
 provide(INJECT_ALL_COMPONENTS_CHUNK, allComponents);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
+provide(INJECT_EDIT_EDITABLE_COMPONENT, BlokkliEditableEdit);
 provide(INJECT_IS_EDITING, true);
 provide(INJECT_EDIT_CONTEXT, {
   eventBus,
   mutatedOptions: state.mutatedOptions,
   dom,
   definitions,
-  useBlockRegistration
+  useBlockRegistration,
+  selectedUuids: computed(() => selection.uuids.value)
 });
 const app = {
   $t,
@@ -333,7 +340,8 @@ const app = {
   readability,
   fieldValue,
   dragdrop,
-  cache
+  cache,
+  workspaces
 };
 provide(INJECT_APP, app);
 function textWithHighlight(title, text) {
@@ -426,6 +434,7 @@ onMounted(async () => {
   await nextTick();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
+  emit("ready");
   baseLogger.log("onMounted - END");
 });
 onBeforeUnmount(() => {

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

@@ -12,6 +12,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
         providerType: ValidProviderTypes;
+    } & {
+        onReady?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -23,7 +25,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             key: string;
         }): any;
     };
-    emit: {};
+    emit: (e: "ready") => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -19,7 +19,7 @@ const renderedFeatures = computed(
 );
 const disabledFeatures = adapter.getDisabledFeatures ? await adapter.getDisabledFeatures() : await Promise.resolve([]);
 const availableFeatures = computed(() => {
-  return features.features.value.filter((feature) => {
+  return features.definitions.value.filter((feature) => {
     if (disabledFeatures.includes(feature.id)) {
       return false;
     }
@@ -42,9 +42,6 @@ const availableFeatures = computed(() => {
         return false;
       }
     }
-    if (feature.dependencies?.length && !feature.dependencies.every((id) => renderedFeatures.value.includes(id))) {
-      return false;
-    }
     if (feature.beta && !features.enabledBetaFeatures.value.includes(
       feature.id
     )) {

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

@@ -8,6 +8,11 @@ type __VLS_Props = {
     minlength?: string | number;
     maxlength?: string | number;
     type?: string;
+    /**
+     * If true, the model is only updated on `change` (blur / Enter), matching
+     * Vue's `v-model.lazy` behavior. Defaults to eager (per-keystroke).
+     */
+    lazy?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: string;

package/dist/runtime/editor/components/Form/Text/index.vue

@@ -6,7 +6,7 @@
     <div class="bk-form-text">
       <input
         :id
-        v-model.lazy="value"
+        :value="value"
         type="text"
         class="bk-form-input"
         :placeholder
@@ -14,6 +14,7 @@
         :disabled
         :minlength
         :maxlength
+        @[updateEvent]="onUpdate"
       />
       <button
         type="button"
@@ -29,8 +30,8 @@
 
 <script setup>
 import { Icon } from "#blokkli/editor/components";
-import { useBlokkli } from "#imports";
-defineProps({
+import { computed, useBlokkli } from "#imports";
+const props = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
   description: { type: String, required: false },
@@ -39,8 +40,13 @@ defineProps({
   disabled: { type: Boolean, required: false },
   minlength: { type: [String, Number], required: false },
   maxlength: { type: [String, Number], required: false },
-  type: { type: String, required: false }
+  type: { type: String, required: false },
+  lazy: { type: Boolean, required: false }
 });
+const updateEvent = computed(() => props.lazy ? "change" : "input");
 const value = defineModel({ type: String });
+function onUpdate(event) {
+  value.value = event.target.value;
+}
 const { $t } = useBlokkli();
 </script>

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

@@ -8,6 +8,11 @@ type __VLS_Props = {
     minlength?: string | number;
     maxlength?: string | number;
     type?: string;
+    /**
+     * If true, the model is only updated on `change` (blur / Enter), matching
+     * Vue's `v-model.lazy` behavior. Defaults to eager (per-keystroke).
+     */
+    lazy?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: string;

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

@@ -118,28 +118,4 @@ export default {
   height: 100%;
   flex-direction: column;
 }
-
-.bk-vars.bk-form-overlay .bk.bk-overlay-header {
-  z-index: calc(var(--bk-z-index-base) + 360000) /* "form-overlay-header" */;
-}
-
-@media (min-width: 768px) {
-
-.bk-vars.bk-form-overlay .bk.bk-overlay-header {
-    height: 50px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    padding-left: 15px;
-  }
-
-      .bk-vars.bk-form-overlay .bk.bk-overlay-header > button {
-    aspect-ratio: 1 / 1;
-    height: 100%;
-  }
-
-      .bk-vars.bk-form-overlay .bk.bk-overlay-header > button:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-  }
-    }
 </style>

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

@@ -0,0 +1,10 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+<template>
+  <div :style="minHeight ? { minHeight: `${minHeight}px` } : void 0">
+    <div ref="inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, ref, onMounted, onBeforeUnmount } from "#imports";
+const inner = useTemplateRef("inner");
+const minHeight = ref(0);
+let observer = null;
+onMounted(() => {
+  const el = inner.value;
+  if (!el) return;
+  observer = new ResizeObserver(() => {
+    const h = el.scrollHeight;
+    if (h > minHeight.value) {
+      minHeight.value = h;
+    }
+  });
+  observer.observe(el);
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+</script>
+
+<script>
+export default {
+  name: "GrowOnly"
+};
+</script>

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

@@ -0,0 +1,10 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};