@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/runtime/editor/events/index.d.ts

@@ -107,6 +107,31 @@ export type AddNewBlockEvent = {
     bundle: string;
     host: BlokkliItemHost;
     afterUuid: string | null;
+    /** Optional UUID to use for the new block. If not provided, the adapter generates one. */
+    blockUuid?: string;
+};
+export type BlockFieldValue = {
+    fieldName: string;
+    fieldValue: string | {
+        entityType: string;
+        entityId: string;
+    };
+};
+export type AddNewBlocksEventBlock = {
+    bundle: string;
+    /** UUID for the new block. */
+    blockUuid: string;
+    /** Optional default values for the block's editable/droppable fields. */
+    values?: BlockFieldValue[];
+    /** Storable option values for this block. */
+    options?: Record<string, string>;
+    /** Nested child blocks keyed by block field name. */
+    children?: Record<string, AddNewBlocksEventBlock[]>;
+};
+export type AddNewBlocksEvent = {
+    blocks: AddNewBlocksEventBlock[];
+    host: BlokkliItemHost;
+    afterUuid: string | null;
 };
 export type UpdateMutatedFieldsEvent = {
     fields: MutatedField[];
@@ -151,6 +176,10 @@ export type GlobalPointerUpEvent = GlobalPointerEvent & {
      */
     duration: number;
 };
+export type ScrollSelectionIntoViewEvent = {
+    center?: boolean;
+    immediate?: boolean;
+};
 export interface EventbusEvents {
     select: string | string[];
     'select:unselect': undefined;
@@ -178,6 +207,8 @@ export interface EventbusEvents {
     'block:append': BlockAppendEvent;
     'item:doubleClick': RenderedFieldListItem;
     scrollIntoView: ScrollIntoViewEvent;
+    scrollSelectionIntoView: ScrollSelectionIntoViewEvent;
+    highlight: HTMLElement | null;
     'animationFrame:before': AnimationFrameBeforeEvent;
     'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;

package/dist/runtime/editor/features/add-list/Actions/Action.d.vue.ts

@@ -2,7 +2,14 @@ import type { AddAction } from '#blokkli/editor/types/actions';
 type __VLS_Props = {
     action: AddAction;
     selectableBundles: string[];
+    helpActive: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (data: HTMLElement) => void;
+    startHelp: (data: HTMLElement) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHelp?: ((data: HTMLElement) => any) | undefined;
+    onStartHelp?: ((data: HTMLElement) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/add-list/Actions/Action.vue

@@ -12,6 +12,10 @@
     :color="action.color"
     :disabled
     no-context-menu
+    use-help
+    :help-active
+    @start-help="$emit('startHelp', $event)"
+    @help="$emit('help', $event)"
   />
 </template>
 
@@ -21,8 +25,10 @@ import { computed, useTemplateRef, useBlokkli } from "#imports";
 import { defineTourItem } from "#blokkli/editor/composables";
 const props = defineProps({
   action: { type: Object, required: true },
-  selectableBundles: { type: Array, required: true }
+  selectableBundles: { type: Array, required: true },
+  helpActive: { type: Boolean, required: true }
 });
+defineEmits(["help", "startHelp"]);
 const { selection } = useBlokkli();
 const item = useTemplateRef("item");
 const bundleDisabled = computed(() => {

package/dist/runtime/editor/features/add-list/Actions/Action.vue.d.ts

@@ -2,7 +2,14 @@ import type { AddAction } from '#blokkli/editor/types/actions';
 type __VLS_Props = {
     action: AddAction;
     selectableBundles: string[];
+    helpActive: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (data: HTMLElement) => void;
+    startHelp: (data: HTMLElement) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHelp?: ((data: HTMLElement) => any) | undefined;
+    onStartHelp?: ((data: HTMLElement) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/add-list/Actions/index.d.vue.ts

@@ -1,6 +1,16 @@
+import type { AddListHelp } from '../types.js';
+import type { AddAction } from '#blokkli/editor/types/actions';
 type __VLS_Props = {
     selectableBundles: string[];
+    actions: AddAction[];
+    helpActive: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (date: AddListHelp) => void;
+    startHelp: (date: AddListHelp) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHelp?: ((date: AddListHelp) => any) | undefined;
+    onStartHelp?: ((date: AddListHelp) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/add-list/Actions/index.vue

@@ -5,27 +5,48 @@
       :key="action.id"
       :action="action"
       :selectable-bundles
+      :help-active
+      @help="onHelp(action, $event)"
+      @start-help="onStartHelp(action, $event)"
     />
   </Sortli>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
 import { Sortli } from "#blokkli/editor/components";
 import ActionButton from "./Action.vue";
-defineProps({
-  selectableBundles: { type: Array, required: true }
-});
-const { plugins } = useBlokkli();
-const actions = computed(() => {
-  return plugins.get("addAction").sort((a, b) => a.weight - b.weight);
+const props = defineProps({
+  selectableBundles: { type: Array, required: true },
+  actions: { type: Array, required: true },
+  helpActive: { type: Boolean, required: true }
 });
+const emit = defineEmits(["help", "startHelp"]);
+function onStartHelp(action, element) {
+  if (props.helpActive) {
+    return;
+  }
+  emit("startHelp", {
+    type: "action",
+    id: action.id,
+    element
+  });
+}
+function onHelp(action, element) {
+  if (!props.helpActive) {
+    return;
+  }
+  emit("help", {
+    type: "action",
+    id: action.id,
+    element
+  });
+}
 function buildItemAction(element) {
   const actionType = element.dataset.sortliId;
   if (!actionType) {
     return;
   }
-  const action = actions.value.find((v) => v.id === actionType);
+  const action = props.actions.find((v) => v.id === actionType);
   if (!action) {
     return;
   }

package/dist/runtime/editor/features/add-list/Actions/index.vue.d.ts

@@ -1,6 +1,16 @@
+import type { AddListHelp } from '../types.js';
+import type { AddAction } from '#blokkli/editor/types/actions';
 type __VLS_Props = {
     selectableBundles: string[];
+    actions: AddAction[];
+    helpActive: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (date: AddListHelp) => void;
+    startHelp: (date: AddListHelp) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHelp?: ((date: AddListHelp) => any) | undefined;
+    onStartHelp?: ((date: AddListHelp) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/add-list/Blocks/index.d.vue.ts

@@ -1,12 +1,21 @@
 import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+import type { AddListHelp } from '../types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     hideDisabledBlocks?: boolean;
     selectableBundles: string[];
     generallyAvailableBundles: BlockBundleDefinition[];
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    helpActive: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (date: AddListHelp) => void;
+    startHelp: (date: AddListHelp) => void;
+}, string, import("vue").PublicProps, Readonly<{
     hideDisabledBlocks?: boolean;
     selectableBundles: string[];
     generallyAvailableBundles: BlockBundleDefinition[];
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    helpActive: boolean;
+}> & Readonly<{
+    onHelp?: ((date: AddListHelp) => any) | undefined;
+    onStartHelp?: ((date: AddListHelp) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/add-list/Blocks/index.vue

@@ -13,7 +13,11 @@
       :color="type.isFavorite ? 'yellow' : 'default'"
       :is-auto-add="type.isAutoAdd"
       data-element-type="new"
+      use-help
+      :help-active
       :data-item-bundle="type.id"
+      @help="onHelp(type, $event)"
+      @start-help="onStartHelp(type, $event)"
     />
   </Sortli>
 
@@ -42,8 +46,30 @@ import { defineCommands } from "#blokkli/editor/composables";
 const props = defineProps({
   hideDisabledBlocks: { type: Boolean, required: false },
   selectableBundles: { type: Array, required: true },
-  generallyAvailableBundles: { type: Array, required: true }
+  generallyAvailableBundles: { type: Array, required: true },
+  helpActive: { type: Boolean, required: true }
 });
+const emit = defineEmits(["help", "startHelp"]);
+function onHelp(item, element) {
+  if (!props.helpActive) {
+    return;
+  }
+  emit("help", {
+    type: "bundle",
+    id: item.id,
+    element
+  });
+}
+function onStartHelp(item, element) {
+  if (props.helpActive) {
+    return;
+  }
+  emit("startHelp", {
+    type: "bundle",
+    id: item.id,
+    element
+  });
+}
 const {
   selection,
   storage,

package/dist/runtime/editor/features/add-list/Blocks/index.vue.d.ts

@@ -1,12 +1,21 @@
 import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+import type { AddListHelp } from '../types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     hideDisabledBlocks?: boolean;
     selectableBundles: string[];
     generallyAvailableBundles: BlockBundleDefinition[];
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    helpActive: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (date: AddListHelp) => void;
+    startHelp: (date: AddListHelp) => void;
+}, string, import("vue").PublicProps, Readonly<{
     hideDisabledBlocks?: boolean;
     selectableBundles: string[];
     generallyAvailableBundles: BlockBundleDefinition[];
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    helpActive: boolean;
+}> & Readonly<{
+    onHelp?: ((date: AddListHelp) => any) | undefined;
+    onStartHelp?: ((date: AddListHelp) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/add-list/Help/Item.d.vue.ts

@@ -0,0 +1,12 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    type: 'bundle' | 'action';
+    id: string;
+    actions: AddAction[];
+    isVisible: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    height: any;
+}, {}, {}, {}, 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/features/add-list/Help/Item.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+    ref="el"
+    class="bk-add-list-help-item"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+  >
+    <div v-if="type === 'bundle'" class="bk-add-list-help-image">
+      <img v-if="imageUrl" :src="imageUrl" />
+      <div v-else>
+        <ItemIcon :bundle="undefined" :icon />
+      </div>
+    </div>
+    <h2>
+      <ItemIconBox :bundle :icon :color />
+      <span>{{ title }}</span>
+    </h2>
+
+    <hr />
+
+    <div v-if="text" class="bk-add-list-help-description" v-html="text" />
+
+    <template v-for="section in sections" :key="section.title">
+      <hr />
+      <div class="bk-add-list-help-label">
+        {{ section.title }}
+      </div>
+      <div
+        v-for="field in section.fields"
+        :key="field.name"
+        class="bk-add-list-help-fields-item"
+      >
+        <ul>
+          <li v-if="section.fields.length > 1" class="bk-is-field">
+            {{ field.label }}
+          </li>
+          <li
+            v-for="allowed in field.items"
+            :key="field.name + allowed.bundle"
+            class="bk-is-bundle"
+          >
+            <ItemIconBox
+              :bundle="allowed.bundle"
+              :icon="allowed.icon"
+              is-tiny
+            />
+            <span>{{ allowed.label }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ItemIconBox, ItemIcon } from "#blokkli/editor/components";
+import { itemEntityType, fragmentBlockBundle } from "#blokkli-build/config";
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import { onElementResize } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+const props = defineProps({
+  type: { type: String, required: true },
+  id: { type: String, required: true },
+  actions: { type: Array, required: true },
+  isVisible: { type: Boolean, required: true }
+});
+const el = useTemplateRef("el");
+const height = ref(0);
+onElementResize(el, (size) => {
+  height.value = size.height;
+});
+defineExpose({
+  height
+});
+const { types, $t, definitions } = useBlokkli();
+const reusableBlockTypes = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.allowReusable)
+);
+const fragments = computed(() => {
+  return definitions.fragmentDefinitions.value.map((v) => {
+    return {
+      bundle: fragmentBlockBundle,
+      label: v.label,
+      icon: v.editor?.icon ?? "bk_mdi_newspaper"
+    };
+  });
+});
+const bundleDefinition = computed(() => {
+  if (props.type === "bundle") {
+    return types.getBlockBundleDefinition(props.id);
+  }
+  return void 0;
+});
+const action = computed(() => {
+  if (props.type === "action") {
+    return props.actions.find((v) => v.id === props.id);
+  }
+  return void 0;
+});
+const title = computed(() => {
+  return bundleDefinition.value?.label ?? action.value?.title ?? "";
+});
+const text = computed(() => {
+  return bundleDefinition.value?.description ?? action.value?.description;
+});
+const imageUrl = computed(() => {
+  if (bundle.value) {
+    const imagePath = definitions.getBlockImage(bundle.value);
+    if (imagePath) {
+      return imagePath;
+    }
+  }
+  return bundleDefinition.value?.imageUrl;
+});
+const bundle = computed(() => {
+  return bundleDefinition.value?.id;
+});
+const icon = computed(() => {
+  return action.value?.icon;
+});
+const color = computed(() => {
+  return action.value?.color;
+});
+const fields = computed(() => {
+  if (props.type !== "bundle") {
+    return [];
+  }
+  const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
+    itemEntityType,
+    props.id
+  );
+  return fieldConfigs.map((field) => {
+    const items = field.allowedBundles.map((bundleId) => {
+      return types.getBlockBundleDefinition(bundleId);
+    }).filter(falsy).map((block) => {
+      return {
+        bundle: block.id,
+        label: block.label
+      };
+    });
+    return {
+      name: field.name,
+      label: field.label,
+      items
+    };
+  });
+});
+const sections = computed(() => {
+  const result = [];
+  if (fields.value.length) {
+    result.push({
+      title: $t("allowedBlocks", "Allowed Blocks"),
+      fields: fields.value
+    });
+  }
+  if (props.type === "action" && props.id === "library" && reusableBlockTypes.value.length) {
+    result.push({
+      title: $t("availableBlocks", "Available blocks"),
+      fields: [
+        {
+          name: "reusable",
+          label: "",
+          items: reusableBlockTypes.value.map((block) => ({
+            bundle: block.id,
+            label: block.label
+          }))
+        }
+      ]
+    });
+  }
+  if (props.type === "action" && props.id === "fragment" && fragments.value) {
+    result.push({
+      title: $t("availableFragments", "Available fragments"),
+      fields: [
+        {
+          name: "fragments",
+          label: "",
+          items: fragments.value
+        }
+      ]
+    });
+  }
+  return result;
+});
+</script>

package/dist/runtime/editor/features/add-list/Help/Item.vue.d.ts

@@ -0,0 +1,12 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    type: 'bundle' | 'action';
+    id: string;
+    actions: AddAction[];
+    isVisible: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    height: any;
+}, {}, {}, {}, 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/features/add-list/Help/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+type __VLS_Props = {
+    isVisible: boolean;
+    type?: 'bundle' | 'action';
+    id?: string;
+    element?: HTMLElement;
+    actions: AddAction[];
+    bundles: BlockBundleDefinition[];
+};
+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/features/add-list/Help/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div ref="rootEl" class="bk bk-add-list-help">
+    <div ref="innerEl" class="bk-add-list-help-inner">
+      <div class="bk-add-list-help-content">
+        <HelpItemComponent
+          v-for="item in items"
+          :id="item.id"
+          ref="itemRefs"
+          :key="item.type + ':' + item.id"
+          :is-visible="item.type === type && item.id === id"
+          :type="item.type"
+          :actions
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAnimationFrame } from "#blokkli/editor/composables";
+import { computed, ref, useTemplateRef, useBlokkli, watch } from "#imports";
+import HelpItemComponent from "./Item.vue";
+const props = defineProps({
+  isVisible: { type: Boolean, required: true },
+  type: { type: String, required: false },
+  id: { type: String, required: false },
+  element: { type: null, required: false },
+  actions: { type: Array, required: true },
+  bundles: { type: Array, required: true }
+});
+const rootEl = useTemplateRef("rootEl");
+const innerEl = useTemplateRef("innerEl");
+const itemRefs = useTemplateRef("itemRefs");
+const targetHeight = ref(200);
+const targetY = ref(0);
+const x = ref(200);
+const displayedHeight = ref(200);
+const displayedY = ref(0);
+const skipAnimation = ref(true);
+const { ui } = useBlokkli();
+function updatePosition() {
+  if (!props.element) {
+    return;
+  }
+  const rect = props.element.getBoundingClientRect();
+  x.value = Math.round(rect.x + rect.width + 10);
+  targetY.value = Math.round(
+    Math.max(
+      10,
+      Math.min(
+        rect.y - 55,
+        ui.visibleViewport.value.height - targetHeight.value - 10
+      )
+    )
+  );
+}
+watch(() => props.element, updatePosition);
+watch(targetHeight, updatePosition);
+watch(
+  () => props.isVisible,
+  (isVisible, wasVisible) => {
+    if (isVisible && !wasVisible) {
+      skipAnimation.value = true;
+    }
+  }
+);
+const items = computed(() => {
+  const result = [];
+  for (const bundle of props.bundles) {
+    result.push({
+      type: "bundle",
+      id: bundle.id
+    });
+  }
+  for (const action of props.actions) {
+    result.push({
+      type: "action",
+      id: action.id
+    });
+  }
+  return result;
+});
+const EASE_FACTOR = 0.22;
+function lerp(current, target, factor) {
+  const diff = target - current;
+  if (Math.abs(diff) < 0.5) {
+    return target;
+  }
+  return current + diff * factor;
+}
+const visibleIndex = computed(() => {
+  if (!props.type || !props.id) return -1;
+  return items.value.findIndex(
+    (item) => item.type === props.type && item.id === props.id
+  );
+});
+useAnimationFrame(() => {
+  if (!props.isVisible) {
+    return;
+  }
+  const index = visibleIndex.value;
+  if (index >= 0 && itemRefs.value) {
+    const height = itemRefs.value[index]?.height;
+    if (height) {
+      targetHeight.value = height;
+    }
+  }
+  if (skipAnimation.value) {
+    displayedHeight.value = targetHeight.value;
+    displayedY.value = targetY.value;
+    skipAnimation.value = false;
+  } else {
+    displayedHeight.value = lerp(
+      displayedHeight.value,
+      targetHeight.value,
+      EASE_FACTOR
+    );
+    displayedY.value = lerp(displayedY.value, targetY.value, EASE_FACTOR);
+  }
+  if (rootEl.value) {
+    rootEl.value.style.transform = `translate(${x.value}px, ${displayedY.value}px)`;
+  }
+  if (innerEl.value) {
+    innerEl.value.style.height = `${displayedHeight.value}px`;
+  }
+});
+</script>

package/dist/runtime/editor/features/add-list/Help/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+type __VLS_Props = {
+    isVisible: boolean;
+    type?: 'bundle' | 'action';
+    id?: string;
+    element?: HTMLElement;
+    actions: AddAction[];
+    bundles: BlockBundleDefinition[];
+};
+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/features/add-list/docs.md

@@ -1,4 +1,4 @@
 ## Extending the list
 
-Use the [Add Action](/plugins/add-action) plugin to add custom actions to the
-list.
+Use the `defineAddAction()` composable inside a feature to add custom actions to
+the list.