@blokkli/editor 2.0.0-alpha.12 → 2.0.0-alpha.14

package/dist/modules/drupal/graphql/base/fragment.ParagraphsBlokkliConfigInput.graphql

@@ -0,0 +1,31 @@
+fragment paragraphsBlokkliConfigInput on ParagraphsBlokkliConfigInput {
+  __typename
+  name
+  label
+  description
+  required
+
+  ... on ParagraphsBlokkliConfigInputText {
+    defaultValueText: defaultValue
+    minLength
+    maxLength
+    placeholder
+    pattern
+    multiline
+    rows
+  }
+
+  ... on ParagraphsBlokkliConfigInputCheckbox {
+    checkboxLabel
+    defaultValueCheckbox: defaultValue
+  }
+
+  ... on ParagraphsBlokkliConfigInputOptions {
+    defaultValueOptions: defaultValue
+    variant
+    options {
+      value
+      label
+    }
+  }
+}

package/dist/modules/drupal/graphql/base/fragment.blokkliProps.graphql

@@ -5,4 +5,5 @@ fragment blokkliProps on ParagraphsBlokkliProps {
   canEdit
   editLabel
   language
+  hostOptions
 }

package/dist/modules/drupal/graphql/base/fragment.paragraphsBlokkliEditState.graphql

@@ -11,6 +11,7 @@ fragment paragraphsBlokkliEditState on ParagraphsBlokkliEditState {
       ...paragraphsBlokkliMutatedField
     }
     mutatedOptions: behaviorSettings
+    hostOptions
     violations {
       ...paragraphsBlokkliViolation
     }

package/dist/modules/drupal/graphql/base/query.pbEntityConfig.graphql

@@ -0,0 +1,5 @@
+query pbEntityConfig($entityType: String!, $entityUuid: String!) {
+  config: pbGetEntityConfig(entityType: $entityType, entityUuid: $entityUuid) {
+    linkPath
+  }
+}

package/dist/modules/drupal/graphql/features/transform.graphql

@@ -10,10 +10,15 @@ query pbGetTransformPlugins(
   ) {
     id
     label
+    description
     bundles
     targetBundles
     min
     max
+    allowPreview
+    configInputs {
+      ...paragraphsBlokkliConfigInput
+    }
   }
 }
 
@@ -23,12 +28,15 @@ mutation pbApplyTransformPlugin(
   $langcode: String
   $pluginId: String!
   $uuids: [String]!
+  $config: [ParagraphsBlokkliUserConfigInput]
+  $preview: Boolean
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
     entityUuid: $entityUuid
+    preview: $preview
   ) {
-    action: transform(pluginId: $pluginId, uuids: $uuids) {
+    action: transform(pluginId: $pluginId, uuids: $uuids, userConfig: $config) {
       ...paragraphsBlokkliMutationResult
     }
   }

package/dist/modules/drupal/graphql/features/transform_host.graphql

@@ -0,0 +1,38 @@
+query pbGetHostTransformPlugins(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String!
+) {
+  paragraphsBlokkliGetHostTransformPlugins(
+    entityType: $entityType
+    entityUuid: $entityUuid
+    langcode: $langcode
+  ) {
+    id
+    label
+    description
+    allowPreview
+    configInputs {
+      ...paragraphsBlokkliConfigInput
+    }
+  }
+}
+
+mutation pbApplyHostTransformPlugin(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String
+  $pluginId: String!
+  $config: [ParagraphsBlokkliUserConfigInput]
+  $preview: Boolean
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+    preview: $preview
+  ) {
+    action: host_transform(pluginId: $pluginId, userConfig: $config) {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}

package/dist/modules/drupal/graphql/mutations/update_host_options.graphql

@@ -0,0 +1,15 @@
+mutation pbUpdateHostOptions(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String
+  $items: [ParagraphsBlokkliUpdateHostOptionsInput]!
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+  ) {
+    action: update_host_options(items: $items) {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}

package/dist/modules/drupal/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.gz_ac6uT.mjs';
+import { B as BlokkliModule } from '../../shared/editor.CKsrTpc1.mjs';
 import 'nuxt/schema';
 import '../../../dist/runtime/types/index.js';
 import '#blokkli-build/module-types';

package/dist/modules/drupal/index.mjs

@@ -21,20 +21,26 @@ function toPascalCase(text) {
 function clearAndUpper(text) {
   return text.replace(/_/, "").toUpperCase();
 }
+function getDrupalAdapterPath() {
+  const resolver = createResolver(fileURLToPath(new URL("./", import.meta.url)));
+  return resolver.resolve("./runtime/adapter/index.js");
+}
 const index = defineBlokkliModule({
   alterOptions(options) {
     if (!options.itemEntityType) {
       options.itemEntityType = "paragraph";
     }
     if (!options.pattern) {
-      options.pattern = ["~/components/Paragraph/**/*.vue"];
+      options.pattern = [
+        "~/components/Paragraph/**/*.vue",
+        "~/components/Node/**/*.vue",
+        "~/components/TaxonomyTerm/**/*.vue",
+        "~/components/CommerceProduct/**/*.vue",
+        "~/components/Storage/**/*.vue"
+      ];
     }
     if (!options.editAdapterPath) {
-      const resolver = createResolver(
-        fileURLToPath(new URL("./", import.meta.url))
-      );
-      const filePath = resolver.resolve("./runtime/adapter/index.js");
-      options.editAdapterPath = filePath;
+      options.editAdapterPath = getDrupalAdapterPath();
     }
     if (!options.getBundlePropsType) {
       options.getBundlePropsType = function(bundle) {
@@ -45,7 +51,8 @@ const index = defineBlokkliModule({
       };
     }
   },
-  setup({ context }) {
+  setup({ context, helper }) {
+    helper.addAlias("#blokkli/drupal-adapter", getDrupalAdapterPath());
     if (!useGraphqlModuleContext({ nullOnMissing: true })) {
       logger.box(
         'Failed to load nuxt-graphql-middleware module context. Make sure that "nuxt-graphql-middleware" is placed before "@blokkli/editor" in your "modules" config in nuxt.config.ts.'
@@ -89,9 +96,11 @@ const index = defineBlokkliModule({
       "fragment.paragraphsBlokkliMutationItem.graphql",
       "fragment.paragraphsBlokkliMutationResult.graphql",
       "fragment.paragraphsBlokkliViolation.graphql",
+      "fragment.ParagraphsBlokkliConfigInput.graphql",
       "fragment.blokkliProps.graphql",
       "fragment.paragraphsFieldItem.graphql",
       "query.pbConfig.graphql",
+      "query.pbEntityConfig.graphql",
       "query.pbEditState.graphql"
     ];
     base.forEach((fileName) => {
@@ -121,6 +130,7 @@ const index = defineBlokkliModule({
     addMutation("update_behavior_setting");
     addMutation("update_field_value");
     addMutation("update_host_entity_field_value");
+    addMutation("update_host_options");
     if (graphql.schemaHasType("CommentBlokkliNode")) {
       addGraphqlDocument("features/comments.graphql");
     } else {
@@ -136,6 +146,9 @@ const index = defineBlokkliModule({
     } else {
       context.features.disableFeature("transform");
     }
+    if (graphql.schemaHasType("ParagraphsBlokkliHostTransformPlugin")) {
+      addGraphqlDocument("features/transform_host.graphql");
+    }
     if (graphql.schemaHasType("ParagraphFromLibrary")) {
       addGraphqlDocument("features/library.graphql");
     } else {

package/dist/modules/drupal/runtime/adapter/index.js

@@ -10,8 +10,61 @@ import {
   useRouter
 } from "#imports";
 import { ParagraphsBlokkliRemoteVideoProvider } from "#graphql-operations";
+function mapPluginConfigInputs(inputs) {
+  return inputs.map((input) => {
+    if (input.__typename === "ParagraphsBlokkliConfigInputText") {
+      return {
+        type: "text",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueText,
+        minLength: input.minLength,
+        maxLength: input.maxLength,
+        placeholder: input.placeholder,
+        pattern: input.pattern,
+        multiline: input.multiline,
+        rows: input.rows
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputCheckbox") {
+      return {
+        type: "checkbox",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueCheckbox ?? false,
+        checkboxLabel: input.checkboxLabel
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputOptions") {
+      return {
+        type: "options",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueOptions ?? "",
+        variant: input.variant,
+        options: input.options
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputSeed") {
+      return {
+        type: "seed",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required
+      };
+    }
+    return null;
+  }).filter(falsy);
+}
 export default defineBlokkliEditAdapter(
   async (providedContext) => {
+    if (import.meta.dev) {
+      console.log("initialise Drupal bl\xF6kkli adapter");
+    }
     const availableFeatureIds = new Set(availableFeaturesAtBuild);
     const availableGraphqlOperations = new Set(Object.keys(operationSources));
     function hasQuery(name) {
@@ -52,6 +105,14 @@ export default defineBlokkliEditAdapter(
         )
       };
     });
+    const entityConfig = await useGraphqlQuery("pbEntityConfig", {
+      entityType: providedContext.value.entityType,
+      entityUuid: providedContext.value.entityUuid
+    }).then((v) => {
+      return {
+        linkPath: v.data.config?.linkPath ?? ""
+      };
+    });
     const loadState = async () => {
       const state = await useGraphqlQuery("pbEditState", {
         ...ctx.value
@@ -101,6 +162,7 @@ export default defineBlokkliEditAdapter(
           return null;
         }).filter(falsy)
       };
+      const mutatedHostOptions = state.mutatedState?.hostOptions || {};
       return {
         currentIndex,
         mutations,
@@ -109,7 +171,9 @@ export default defineBlokkliEditAdapter(
         mutatedState: {
           fields,
           violations,
-          mutatedOptions
+          mutatedOptions,
+          // PHP and its arrays...
+          mutatedHostOptions: Array.isArray(mutatedHostOptions) ? {} : mutatedHostOptions
         },
         entity,
         mutatedEntity: state.mutatedEntity,
@@ -233,6 +297,9 @@ export default defineBlokkliEditAdapter(
     const getLastChanged = () => $fetch(
       `/paragraphs_blokkli/${ctx.value.entityType}/${ctx.value.entityUuid}/last_changed`
     ).then((v) => v.changed);
+    const buildAnchorLink = (id, _uuid) => {
+      return `${entityConfig.linkPath}#${id}`;
+    };
     const adapter = {
       addNewBlock,
       buildEditableFrameUrl,
@@ -248,7 +315,8 @@ export default defineBlokkliEditAdapter(
       loadStateAtIndex,
       mapState,
       moveBlock,
-      moveMultipleBlocks
+      moveMultipleBlocks,
+      buildAnchorLink
     };
     if (hasQuery("pbPublishOptions")) {
       adapter.getPublishOptions = () => useGraphqlQuery("pbPublishOptions", ctx.value).then((v) => {
@@ -286,6 +354,12 @@ export default defineBlokkliEditAdapter(
     if (hasMutation("pbTakeOwnership")) {
       adapter.takeOwnership = () => useGraphqlMutation("pbTakeOwnership", ctx.value).then(mapMutation);
     }
+    if (hasMutation("pbUpdateHostOptions")) {
+      adapter.updateHostOptions = (items) => useGraphqlMutation("pbUpdateHostOptions", {
+        ...ctx.value,
+        items
+      }).then(mapMutation);
+    }
     if (hasMutation("pbSetHistoryIndex")) {
       adapter.setHistoryIndex = (index) => useGraphqlMutation("pbSetHistoryIndex", {
         ...ctx.value,
@@ -304,7 +378,6 @@ export default defineBlokkliEditAdapter(
         entityType: options.hostEntityType.toUpperCase(),
         entityUuid: options.hostEntityUuid,
         createNewState: !options.closeAfterPublish,
-        // @ts-expect-error Might not exist.
         publishIfUnpublished: options.publishIfUnpublished,
         revisionLogMessage: options.revisionLogMessage
       }).then(mapMutation);
@@ -487,10 +560,26 @@ export default defineBlokkliEditAdapter(
           return {
             id: plugin.id,
             label: plugin.label,
+            description: plugin.description,
             bundles: plugin.bundles,
             targetBundles: plugin.targetBundles,
             min: plugin.min,
-            max: plugin.max
+            max: plugin.max,
+            configInputs: mapPluginConfigInputs(plugin.configInputs),
+            preview: plugin.allowPreview
+          };
+        })
+      );
+    }
+    if (hasQuery("pbGetHostTransformPlugins")) {
+      adapter.getHostTransformPlugins = () => useGraphqlQuery("pbGetHostTransformPlugins", ctx.value).then((v) => v.data.paragraphsBlokkliGetHostTransformPlugins || []).then(
+        (plugins) => plugins.map((plugin) => {
+          return {
+            id: plugin.id,
+            label: plugin.label,
+            description: plugin.description,
+            configInputs: mapPluginConfigInputs(plugin.configInputs),
+            preview: plugin.allowPreview
           };
         })
       );
@@ -500,6 +589,22 @@ export default defineBlokkliEditAdapter(
         ...ctx.value,
         ...e
       }).then(mapMutation);
+      adapter.previewTransformPlugin = (e) => useGraphqlMutation("pbApplyTransformPlugin", {
+        ...ctx.value,
+        ...e,
+        preview: true
+      }).then(mapMutation);
+    }
+    if (hasMutation("pbApplyHostTransformPlugin")) {
+      adapter.applyHostTransformPlugin = (e) => useGraphqlMutation("pbApplyHostTransformPlugin", {
+        ...ctx.value,
+        ...e
+      }).then(mapMutation);
+      adapter.previewHostTransformPlugin = (e) => useGraphqlMutation("pbApplyHostTransformPlugin", {
+        ...ctx.value,
+        ...e,
+        preview: true
+      }).then(mapMutation);
     }
     const buildFormUrl = (parts, langcode) => {
       const prefix = config.urlPrefixes[langcode];

package/dist/runtime/adapter/index.d.ts

@@ -1,7 +1,8 @@
 import type { ComputedRef } from 'vue';
-import type { CommentItem, ConversionItem, MappedState, ImportItem, LibraryItem, BlockBundleDefinition, EntityTranslation, SearchContentItem, AddClipboardItemEvent, AddNewBlockEvent, AddReusableItemEvent, ImportFromExistingEvent, MakeReusableEvent, MoveMultipleBlocksEvent, MoveBlockEvent, UpdateBlockOptionEvent, AddContentSearchItemEvent, TransformPlugin, EditBlockEvent, PasteExistingBlocksEvent, UpdateFieldValueEvent, AssistantResult, DraggableHostData, DetachReusableBlockEvent, FieldConfig, EditableFieldConfig, DraggableMediaLibraryItem, DroppableFieldConfig, PublishOptions, GetEditStatesItem } from './../types/index.js';
+import type { CommentItem, ConversionItem, MappedState, ImportItem, LibraryItem, BlockBundleDefinition, EntityTranslation, SearchContentItem, AddClipboardItemEvent, AddNewBlockEvent, AddReusableItemEvent, ImportFromExistingEvent, MakeReusableEvent, MoveMultipleBlocksEvent, MoveBlockEvent, UpdateBlockOptionEvent, AddContentSearchItemEvent, TransformPlugin, EditBlockEvent, PasteExistingBlocksEvent, UpdateFieldValueEvent, AssistantResult, DraggableHostData, DetachReusableBlockEvent, FieldConfig, EditableFieldConfig, DraggableMediaLibraryItem, DroppableFieldConfig, PublishOptions, GetEditStatesItem, UpdateHostOptionEvent, HostTransformPlugin, PluginConfigInputItem } from './../types/index.js';
 import type getVideoId from 'get-video-id';
 import type { GetMediaLibraryFunction } from './../components/Edit/Features/MediaLibrary/types.js';
+import type { Analyzer } from '#blokkli/analyzer/types';
 export type { GetMediaLibraryFunction };
 export interface MutationResponseLike<T> {
     success: boolean;
@@ -11,6 +12,11 @@ export interface MutationResponseLike<T> {
 type AdapterApplyTransformPlugin = {
     pluginId: string;
     uuids: string[];
+    config?: PluginConfigInputItem[];
+};
+type AdapterApplyHostTransformPlugin = {
+    pluginId: string;
+    config?: PluginConfigInputItem[];
 };
 export type UpdateEntityFieldValueEvent = {
     fieldName: string;
@@ -203,10 +209,38 @@ export interface BlokkliAdapter<T> {
      * Get all possible transform plugins.
      */
     getTransformPlugins?: () => Promise<TransformPlugin[]>;
+    /**
+     * Get all possible host transform plugins.
+     */
+    getHostTransformPlugins?: () => Promise<HostTransformPlugin[]>;
     /**
      * Apply a transform plugin.
      */
     applyTransformPlugin?: (e: AdapterApplyTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Preview the output of a transform plugin.
+     *
+     * The transform plugin is expected to apply its transform without actually
+     * persisting it and not creating any side effects.
+     *
+     * It must produce the same result when called for the "final"
+     * transformation that is added to the edit state.
+     */
+    previewTransformPlugin?: (e: AdapterApplyTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Apply a host transform plugin.
+     */
+    applyHostTransformPlugin?: (e: AdapterApplyHostTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Preview the output of a host transform plugin.
+     *
+     * The transform plugin is expected to apply its transform without actually
+     * persisting it and not creating any side effects.
+     *
+     * It must produce the same result when called for the "final"
+     * transformation that is added to the edit state.
+     */
+    previewHostTransformPlugin?: (e: AdapterApplyHostTransformPlugin) => Promise<MutationResponseLike<T>>;
     /**
      * Add a new block.
      */
@@ -215,6 +249,10 @@ export interface BlokkliAdapter<T> {
      * Update multiple options.
      */
     updateOptions?: (options: UpdateBlockOptionEvent[]) => Promise<MutationResponseLike<T>>;
+    /**
+     * Update multiple host options.
+     */
+    updateHostOptions?: (options: UpdateHostOptionEvent[]) => Promise<MutationResponseLike<T>>;
     /**
      * Determine the block bundle for the given clipboard item.
      */
@@ -400,6 +438,21 @@ export interface BlokkliAdapter<T> {
      * Add a fragment block.
      */
     fragmentsAddBlock?: (e: AdapterFragmentsAddBlock) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Build the link that is copied to the clipboard when clicking on an "anchor link" indicator.
+     */
+    buildAnchorLink?: (id: string, uuid: string) => string;
+    getAnalyzers?: () => Analyzer | Analyzer[] | Promise<Analyzer> | Promise<Analyzer[]>;
+    userSettings?: {
+        /**
+         * Load user settings.
+         */
+        load: () => Promise<string | Record<string, any>>;
+        /**
+         * Persist user settings.
+         */
+        persist: (settings: string) => Promise<undefined>;
+    };
 }
 export type BlokkliAdapterFactory<T> = (ctx: ComputedRef<AdapterContext>) => Promise<BlokkliAdapter<T>> | BlokkliAdapter<T>;
 export type AdapterMethods = keyof BlokkliAdapter<any>;

package/dist/runtime/blokkliPlugins/AddAction/index.vue

@@ -17,7 +17,14 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, nextTick, ref } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  nextTick,
+  ref,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
 import { AddListItem } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
@@ -33,7 +40,7 @@ const props = defineProps({
 });
 const item = ref(null);
 const emit = defineEmits(["placed"]);
-const { ui, state, features } = useBlokkli();
+const { ui, state, features, plugins } = useBlokkli();
 const addListAvailable = computed(
   () => !!features.mountedFeatures.value.find((v) => v.id === "add-list")
 );
@@ -47,7 +54,7 @@ onBlokkliEvent("add-list:change", () => {
   });
 });
 onBlokkliEvent("action:placed", (e) => {
-  if (e.action.actionType !== props.type) {
+  if (e.id !== props.type) {
     return;
   }
   emit("placed", e);
@@ -63,6 +70,23 @@ defineTourItem(() => {
     element: () => item.value?.getElement()
   };
 });
+function addActionFunction() {
+  return {
+    id: props.type,
+    icon: props.icon,
+    color: props.color,
+    itemBundle: props.itemBundle,
+    title: props.title,
+    description: props.description,
+    enabled: !props.disabled
+  };
+}
+onMounted(() => {
+  plugins.addAddAction(addActionFunction);
+});
+onBeforeUnmount(() => {
+  plugins.removeAddAction(addActionFunction);
+});
 </script>
 
 <script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Teleport to="#bk-indicators-left">
+    <div
+      ref="el"
+      class="bk-indicator-item"
+      @click.prevent="$emit('click')"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot>
+        <div class="bk-indicator-item-inner">
+          <div v-if="label">{{ label }}</div>
+          <div v-if="icon">
+            <Icon :name="icon" />
+          </div>
+        </div>
+      </slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onMounted,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  position: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["click"]);
+const { indicators } = useBlokkli();
+const el = useTemplateRef("el");
+function onMouseEnter() {
+  indicators.setHovered(props.uuid);
+}
+function onMouseLeave() {
+  indicators.setHovered();
+}
+onMounted(() => {
+  if (el.value) {
+    indicators.addIndicator({
+      id: props.id,
+      uuid: props.uuid,
+      position: props.position ?? "left",
+      element: el.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicators.removeIndicator(props.id, props.uuid);
+});
+</script>
+
+<script>
+export default {
+  name: "PluginBlockIndicator"
+};
+</script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue.d.ts

@@ -0,0 +1,26 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -44,6 +44,9 @@ onBlokkliEvent("keyPressed", (e) => {
     emit("close");
   }
 });
+onBlokkliEvent("window:clickAway", () => {
+  emit("close");
+});
 watch(selection.uuids, () => emit("close"));
 const onClick = (index) => {
   const item = props.menu[index];

package/dist/runtime/blokkliPlugins/ContextMenu/index.vue

@@ -2,7 +2,7 @@
   <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
     <slot />
     <Teleport to="body">
-      <Transition name="bk-context-menu">
+      <BlokkliTransition name="context-menu">
         <ContextMenuMenu
           v-if="isVisible"
           :menu="menu"
@@ -10,7 +10,7 @@
           :y="y"
           @close="ui.openContextMenu.value = ''"
         />
-      </Transition>
+      </BlokkliTransition>
     </Teleport>
   </Component>
 </template>
@@ -18,6 +18,7 @@
 <script setup>
 import { ref, computed, useBlokkli } from "#imports";
 import ContextMenuMenu from "./Menu/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 const props = defineProps({
   id: { type: String, required: true },
   menu: { type: Array, required: true },