@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.56

package/dist/runtime/components/BlokkliEditable.vue

@@ -1,102 +1,22 @@
 <template>
-  <component
-    :is="tag"
-    ref="root"
-    :data-blokkli-editable-field="isEditingBuild ? name : void 0"
-  >
-    <slot :value="renderedValue" />
+  <component :is="EditComponent ?? tag" v-bind="editProps">
+    <template #default="slotProps">
+      <slot :value="slotProps?.value ?? value" />
+    </template>
   </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_EDITING,
-  INJECT_IS_IN_REUSABLE
-} from "#blokkli/helpers/injections";
+import { inject, computed } from "#imports";
+import { INJECT_EDIT_EDITABLE_COMPONENT } 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 isEditingBuild = import.meta.blokkliEditing;
-const valueOverride = ref("");
-const renderedValue = computed(() => valueOverride.value || props.value || "");
-if (isEditingBuild) {
-  let getValueCallback = function() {
-    return props.value;
-  }, onStateReloaded = function() {
-    valueOverride.value = "";
-  }, registerDirective = function(name) {
-    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
-      return;
-    }
-    app.directive.registerDirectiveElement(
-      root.value,
-      name,
-      entity,
-      "editable",
-      true,
-      getValueCallback
-    );
-  }, unregisterDirective = function(name) {
-    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
-      return;
-    }
-    app.directive.unregisterDirectiveElement(
-      root.value,
-      name,
-      entity,
-      "editable"
-    );
-  };
-  const root = useTemplateRef("root");
-  const isEditing = inject(INJECT_IS_EDITING, false);
-  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 onEditableUpdateValue = (e) => {
-    if (e.name === props.name && e.entityUuid === entity?.uuid) {
-      valueOverride.value = e.value;
-    }
-  };
-  onMounted(() => {
-    if (!isEditing || !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 (!isEditing || !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);
-  });
-}
+const EditComponent = inject(INJECT_EDIT_EDITABLE_COMPONENT, null);
+const editProps = computed(
+  () => EditComponent ? { name: props.name, value: props.value, tag: props.tag } : {}
+);
 </script>

package/dist/runtime/components/BlokkliItem.vue

@@ -82,7 +82,7 @@ const itemProps = computed(() => {
   }
   return componentProps.props;
 });
-const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent(
+const component = (isProxyMode || isGlobalProxyMode?.value) && isEditingComponent && import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/BlockProxy/index.vue")
 ) : getComponent(
   "block",
@@ -94,7 +94,7 @@ const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent
   },
   allComponentsChunk
 );
-const blockNotImplemented = isEditingComponent ? defineAsyncComponent(() => import("./Blocks/NotImplemented/index.vue")) : null;
+const blockNotImplemented = isEditingComponent && import.meta.client ? defineAsyncComponent(() => import("./Blocks/NotImplemented/index.vue")) : null;
 const index = computed(() => componentProps.index);
 const item = computed(() => ({
   index,

package/dist/runtime/components/BlokkliProvider.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <Component
+    :is="tag"
     ref="providerEl"
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
@@ -7,7 +8,7 @@
     :data-blokkli-provider-active="isInEditor ? 'true' : 'false'"
   >
     <ClientOnly v-if="isInEditor">
-      <BlokkliRootErrorBoundary>
+      <BlokkliRootErrorBoundary :language>
         <PreviewProvider
           v-if="isPreviewing"
           v-slot="{ mutatedEntity }"
@@ -17,6 +18,7 @@
           :entity-bundle
           :language
           :provider-type
+          @ready="isReady = true"
         >
           <slot
             :entity="mutatedEntity"
@@ -37,6 +39,7 @@
           :isolate
           :permissions
           :provider-type
+          @ready="isReady = true"
         >
           <slot
             :is-editing
@@ -46,6 +49,7 @@
           />
         </EditProvider>
       </BlokkliRootErrorBoundary>
+      <div v-if="!isReady" style="height: 100vh" />
     </ClientOnly>
 
     <slot
@@ -63,10 +67,11 @@
         :entity-type
         :edit-label
         :permissions
+        :language
         @edit="edit"
       />
     </ClientOnly>
-  </div>
+  </Component>
 </template>
 
 <script setup>
@@ -110,13 +115,14 @@ const EditProvider = import.meta.client ? defineAsyncComponent(
 ) : null;
 const BlokkliRootErrorBoundary = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/BlokkliRootErrorBoundary.vue")
-) : "div";
+) : null;
 const EditIndicator = import.meta.client ? defineAsyncComponent(
   () => import("./../editor/components/EditIndicator.vue")
-) : "div";
+) : null;
 const route = useRoute();
 const router = useRouter();
 const shouldRender = ref(false);
+const isReady = ref(false);
 const isInEditor = computed(
   () => isClient && !!props.entityUuid && !!props.entityType && !!props.entityBundle && (isPreviewing.value || isEditing.value)
 );

package/dist/runtime/composables/defineBlokkli.js

@@ -96,6 +96,7 @@ export function defineBlokkli(arg) {
       editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
     }
   }
+  const isSelected = editContext ? computed(() => editContext.selectedUuids.value.includes(uuid)) : void 0;
   return {
     uuid,
     index,
@@ -105,6 +106,7 @@ export function defineBlokkli(arg) {
     fieldListType,
     siblings,
     rootBlocks,
-    provider
+    provider,
+    isSelected
   };
 }

package/dist/runtime/composables/defineBlokkliFeature.d.ts

@@ -1,6 +1,5 @@
 import { type ComputedRef } from '#imports';
 import type { FullBlokkliAdapter, AdapterMethods } from '#blokkli/editor/adapter';
-import type { ValidFeatureKey } from '#blokkli-build/features';
 import type { DebugLogger } from '#blokkli/editor/providers/debug';
 import type { AdaptersProvider } from '#blokkli/editor/providers/adapters';
 import type { FeatureDefinition } from '#blokkli/editor/types/features';
@@ -17,11 +16,11 @@ type SettingsTypes<S> = {
     [P in keyof S]: SettingType<S[P]>;
 };
 type RequireAdapterMethods<T extends FullBlokkliAdapter<any>, Methods extends readonly AdapterMethods[]> = Omit<T, Methods[number]> & Required<Pick<T, Methods[number] & keyof T>>;
-type DefineBlokkliFeature<F extends FeatureDefinition<any, any>> = {
+type DefineBlokkliFeature<F extends FeatureDefinition<any>> = {
     adapter: F['requiredAdapterMethods'] extends readonly AdapterMethods[] ? RequireAdapterMethods<FullBlokkliAdapter<any>, F['requiredAdapterMethods']> : FullBlokkliAdapter<any>;
     adapters: AdaptersProvider;
     settings: ComputedRef<SettingsTypes<F['settings']>>;
     logger: DebugLogger;
 };
-export declare function defineBlokkliFeature<const F extends FeatureDefinition<AdapterMethods[], ValidFeatureKey>>(feature: F): DefineBlokkliFeature<F>;
+export declare function defineBlokkliFeature<const F extends FeatureDefinition<AdapterMethods[]>>(feature: F): DefineBlokkliFeature<F>;
 export {};

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

@@ -202,7 +202,7 @@ const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
 const isVisible = computed(() => {
-  return !selection.isDragging.value && !selection.activeEditableLabel.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value && !ui.isApproving.value;
+  return !selection.isDragging.value && !selection.activeFieldLabel.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value && !ui.isApproving.value;
 });
 watch(selection.items, () => {
   showDropdown.value = false;

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

@@ -47,7 +47,8 @@ const {
   directive,
   blocks,
   fields,
-  permissions
+  permissions,
+  types
 } = useBlokkli();
 function onCanvasFocus() {
   ui.setCanvasFocused(true);
@@ -113,7 +114,8 @@ function getInteractedElement(e) {
       deepestUuid = uuid;
     }
   }
-  const editableField = directive.getEditableAtPoint(x, y);
+  const skipFields = keyboard.isPressingControl.value;
+  const editableField = skipFields ? null : directive.getEditableAtPoint(x, y);
   if (editableField) {
     const editableUuid = editableField.type === itemEntityType ? editableField.uuid : void 0;
     const canEdit = !editableUuid || permissions.checkBlockBundlePermission(editableField.bundle, "edit") && !permissions.blockHasRestrictedAncestor(editableUuid);
@@ -127,6 +129,27 @@ function getInteractedElement(e) {
       };
     }
   }
+  const droppableField = skipFields ? null : directive.getDroppableAtPoint(x, y);
+  if (droppableField) {
+    const config = types.getDroppableFieldConfig(
+      droppableField.fieldName,
+      droppableField
+    );
+    if (config.type === "reference") {
+      const droppableUuid = droppableField.type === itemEntityType ? droppableField.uuid : void 0;
+      if (!droppableUuid || droppableUuid === deepestUuid) {
+        return {
+          droppableFieldName: droppableField.fieldName,
+          droppableEntityType: droppableField.type,
+          droppableEntityUuid: droppableField.uuid,
+          uuid: droppableUuid,
+          timestamp: Date.now(),
+          x,
+          y
+        };
+      }
+    }
+  }
   if (deepestUuid) {
     const restrictedAncestor = permissions.getRestrictedAncestor(deepestUuid);
     return {
@@ -219,6 +242,9 @@ function onPointerDown(e) {
   }
   keyboard.setShortcutStateFromEvent(e);
   canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+  if (selection.activeFieldLabel.value) {
+    return;
+  }
   if (ui.openTooltip.value) {
     return;
   }
@@ -267,7 +293,7 @@ function onPointerUp(e) {
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
-  if (ui.openTooltip.value && !selection.activeEditableLabel.value) {
+  if (ui.openTooltip.value && !selection.activeFieldLabel.value) {
     ui.openTooltip.value = "";
     return;
   }
@@ -296,7 +322,7 @@ function onPointerUp(e) {
   if (keyboard.isPressingSpace.value) {
     return;
   }
-  if (selection.activeEditableLabel.value) {
+  if (selection.activeFieldLabel.value) {
     if (pointerDownOnCanvas) {
       eventBus.emit("window:clickAway");
       lastInteractedElement = null;
@@ -308,7 +334,7 @@ function onPointerUp(e) {
     return;
   }
   const clicked = getInteractedElement(e);
-  if (clicked && pointerUpTimestamp && lastInteractedElement && (clicked.uuid === lastInteractedElement.uuid || clicked.editableFieldName === lastInteractedElement.editableFieldName)) {
+  if (clicked && pointerUpTimestamp && lastInteractedElement && (clicked.uuid === lastInteractedElement.uuid || clicked.editableFieldName === lastInteractedElement.editableFieldName || clicked.droppableFieldName === lastInteractedElement.droppableFieldName)) {
     const deltaTime = Date.now() - pointerUpTimestamp;
     const deltaX = Math.abs(lastInteractedElement.x - e.clientX);
     const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
@@ -321,6 +347,15 @@ function onPointerUp(e) {
         });
         return;
       }
+      if (clicked.droppableFieldName && clicked.droppableEntityUuid && clicked.droppableEntityType) {
+        pointerDownOnCanvas = false;
+        eventBus.emit("droppable:open", {
+          fieldName: clicked.droppableFieldName,
+          uuid: clicked.droppableEntityUuid,
+          entityType: clicked.droppableEntityType
+        });
+        return;
+      }
       if (lastInteractedElement.uuid) {
         const block = blocks.getBlock(lastInteractedElement.uuid);
         if (!block) {
@@ -471,7 +506,7 @@ function onClick(e) {
     }
     return;
   }
-  if (canvasEl.value && !selection.activeEditableLabel.value && !ui.hasTooltipOpen.value) {
+  if (canvasEl.value && !selection.activeFieldLabel.value && !ui.hasTooltipOpen.value) {
     canvasEl.value.focus();
   }
 }

package/dist/runtime/editor/components/AppMenu/Inner.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/AppMenu/Inner.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="bk _bk_fixed _bk_inset-y-0 _bk_left-0 _bk_bg-white _bk_shadow-lg _bk_max-w-[480px] _bk_lg:min-w-[400px] _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-menu _bk_w-[calc(100vw-40px)]"
+    @wheel.passive.stop
+    @touchstart.stop.passive
+    @touchmove.stop.passive
+  >
+    <button
+      class="_bk_h-40 _bk_md:h-50 _bk_flex _bk_items-center _bk_text-base _bk_font-bold _bk_pl-15 _bk_md:pl-25 _bk_bg-white _bk_text-mono-950"
+      @click="$emit('close')"
+    >
+      <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
+    </button>
+    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col">
+      <div id="bk-menu-primary" class="_bk_grid _bk_border-t _bk_border-t-mono-200">
+        <MenuButton
+          v-for="button in primaryButtons"
+          :id="button.id"
+          :key="button.id"
+          :title="button.title"
+          :description="button.description"
+          :icon="button.icon"
+          :type="button.type"
+          :disabled="button.disabled"
+          @click="onClick(button)"
+        />
+      </div>
+      <div id="bk-menu-secondary" class="_bk_mt-auto">
+        <MenuButton
+          v-for="button in secondaryButtons"
+          :id="button.id"
+          :key="button.id"
+          :title="button.title"
+          :description="button.description"
+          :icon="button.icon"
+          :type="button.type"
+          :disabled="button.disabled"
+          @click="onClick(button)"
+        />
+      </div>
+      <aside
+        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-mono-100 _bk_text-mono-600 _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
+      >
+        <div class="_bk_flex _bk_gap-5 _bk_items-center">
+          <Icon
+            name="logo"
+            class="_bk_bg-accent-700 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-white"
+          />
+          <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
+        </div>
+
+        <div>
+          <a
+            href="https://www.blokk.li"
+            target="_blank"
+            class="_bk_hover:text-accent-700 _bk_hover:underline"
+            >blokk.li</a
+          >
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { blokkliVersion } from "#blokkli-build/editor-config";
+import MenuButton from "./MenuButton.vue";
+const { plugins } = useBlokkli();
+const emit = defineEmits(["close"]);
+const allButtons = computed(() => plugins.get("menuButton"));
+const primaryButtons = computed(() => {
+  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+const secondaryButtons = computed(() => {
+  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+function onClick(button) {
+  button.callback();
+  emit("close");
+}
+</script>

package/dist/runtime/editor/components/AppMenu/Inner.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,95 +1,21 @@
 <template>
   <BlokkliTransition name="menu">
-    <div
-      v-if="menuOpen"
-      class="bk _bk_fixed _bk_inset-y-0 _bk_left-0 _bk_bg-white _bk_shadow-lg _bk_max-w-[480px] _bk_lg:min-w-[400px] _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-menu _bk_w-[calc(100vw-40px)]"
-      @wheel.passive.stop
-      @touchstart.stop.passive
-      @touchmove.stop.passive
-    >
-      <button
-        :class="{ 'bk-is-active': menuOpen }"
-        class="_bk_h-40 _bk_md:h-50 _bk_flex _bk_items-center _bk_text-base _bk_font-bold _bk_pl-15 _bk_md:pl-25 _bk_bg-white _bk_text-mono-950"
-        @click="closeMenu"
-      >
-        <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
-      </button>
-      <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col">
-        <div id="bk-menu-primary" class="_bk_grid _bk_border-t _bk_border-t-mono-200">
-          <MenuButton
-            v-for="button in primaryButtons"
-            :id="button.id"
-            :key="button.id"
-            :title="button.title"
-            :description="button.description"
-            :icon="button.icon"
-            :type="button.type"
-            :disabled="button.disabled"
-            @click="onClick(button)"
-          />
-        </div>
-        <div id="bk-menu-secondary" class="_bk_mt-auto">
-          <MenuButton
-            v-for="button in secondaryButtons"
-            :id="button.id"
-            :key="button.id"
-            :title="button.title"
-            :description="button.description"
-            :icon="button.icon"
-            :type="button.type"
-            :disabled="button.disabled"
-            @click="onClick(button)"
-          />
-        </div>
-        <aside
-          class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-mono-100 _bk_text-mono-600 _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
-        >
-          <div class="_bk_flex _bk_gap-5 _bk_items-center">
-            <Icon
-              name="logo"
-              class="_bk_bg-accent-700 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-white"
-            />
-            <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
-          </div>
-
-          <div>
-            <a
-              href="https://www.blokk.li"
-              target="_blank"
-              class="_bk_hover:text-accent-700 _bk_hover:underline"
-              >blokk.li</a
-            >
-          </div>
-        </aside>
-      </div>
-    </div>
+    <AppMenuInner v-if="menuOpen" @close="closeMenu" />
   </BlokkliTransition>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon, BlokkliTransition } from "#blokkli/editor/components";
-import { blokkliVersion } from "#blokkli-build/editor-config";
-import MenuButton from "./MenuButton.vue";
+import { computed, defineAsyncComponent, useBlokkli } from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+const AppMenuInner = defineAsyncComponent(() => import("./Inner.vue"));
 const DIALOG_MENU = "menu";
-const { ui, plugins } = useBlokkli();
+const { ui } = useBlokkli();
 const menuOpen = computed(() => ui.currentDialog.value?.id === DIALOG_MENU);
 function closeMenu() {
   ui.closeDialog(DIALOG_MENU);
 }
 onBlokkliEvent("overlay:close", closeMenu);
-const allButtons = computed(() => plugins.get("menuButton"));
-const primaryButtons = computed(() => {
-  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
-});
-const secondaryButtons = computed(() => {
-  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
-});
-function onClick(button) {
-  button.callback();
-  closeMenu();
-}
 </script>
 
 <script>

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
     placementY?: PlacementVertical;
     placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
+    closeDisabled?: boolean;
     fullscreen?: boolean;
 };
 declare var __VLS_1: {}, __VLS_8: {};

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

@@ -16,7 +16,7 @@
       <div class="bk-artboard-tooltip-header">
         <div class="_bk_mr-auto" v-html="title" />
         <slot name="header" />
-        <button @click="$emit('close')">
+        <button :disabled="closeDisabled" @click="$emit('close')">
           <Icon :name="closeIcon" />
           <span v-if="buttonLabel">{{ buttonLabel }}</span>
         </button>
@@ -48,6 +48,7 @@ const props = defineProps({
   placementY: { type: String, required: false, default: "auto" },
   placementX: { type: String, required: false, default: "center" },
   closeIcon: { type: null, required: false, default: "bk_mdi_close" },
+  closeDisabled: { type: Boolean, required: false },
   fullscreen: { type: Boolean, required: false }
 });
 const emit = defineEmits(["close"]);
@@ -282,10 +283,12 @@ onBeforeUnmount(() => {
 .bk .bk-artboard-tooltip-info-button {
   display: flex;
   align-items: center;
+  gap: 5px;
   font-size: 14px;
   line-height: 20px;
   --bk-tw-text-opacity: 1;
   color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / var(--bk-tw-text-opacity, 1));
+  height: 32px;
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 10px;
@@ -307,4 +310,9 @@ onBeforeUnmount(() => {
   --bk-tw-text-opacity: 1;
   color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
 }
+
+.bk .bk-artboard-tooltip-info-button svg {
+  width: 15px;
+  height: 15px;
+}
 </style>

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
     placementY?: PlacementVertical;
     placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
+    closeDisabled?: boolean;
     fullscreen?: boolean;
 };
 declare var __VLS_1: {}, __VLS_8: {};

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

@@ -40,6 +40,7 @@ import {
   INJECT_IS_IN_REUSABLE,
   INJECT_PROVIDER_BLOCKS
 } from "#blokkli/helpers/injections";
+import { fragmentBlockBundle } from "#blokkli-build/config";
 const props = defineProps({
   items: { type: [Array, Object], required: false, default: () => [] },
   title: { type: String, required: true },
@@ -58,12 +59,17 @@ const normalizedItems = computed(() => {
 const bundleLabel = computed(
   () => props.bundle ? types.getBlockBundleDefinition(props.bundle)?.label || props.bundle : ""
 );
-const firstBundle = computed(
-  () => props.bundle || normalizedItems.value[0]?.bundle
-);
-const definition = computed(
-  () => firstBundle.value ? definitions.getDefaultDefinition(firstBundle.value) : null
-);
+const definition = computed(() => {
+  const item = normalizedItems.value[0];
+  const bundle = props.bundle || item?.bundle;
+  if (!bundle) {
+    return null;
+  }
+  if (bundle === fragmentBlockBundle && item?.props) {
+    return definitions.getFragmentDefinition(item.props.name);
+  }
+  return definitions.getDefaultDefinition(bundle);
+});
 const previewWidth = computed(
   () => definition.value?.editor?.previewWidth || 400
 );

package/dist/runtime/editor/components/BlokkliEditableEdit.d.vue.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;
+    };
+};