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

package/dist/module.d.mts

@@ -1,11 +1,12 @@
-export { a as ModuleHooks, M as ModuleOptions } from './shared/editor.Iax3GCvt.mjs';
-import 'nuxt/schema';
+import { NuxtModule } from 'nuxt/schema';
+import { M as ModuleOptions } from './shared/editor.Iax3GCvt.mjs';
+export { a as ModuleHooks } from './shared/editor.Iax3GCvt.mjs';
 import 'consola';
 import '../dist/global/types/definitions.js';
 import '../dist/global/types/theme.js';
 import '@nuxt/kit';
 import '../dist/global/types/features.js';
 
-declare const _default: any;
+declare const _default: NuxtModule<ModuleOptions>;
 
-export { _default as default };
+export { ModuleOptions, _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.33",
+  "version": "2.0.0-alpha.35",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -17,7 +17,7 @@ import { createRequire } from 'node:module';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.33";
+const version = "2.0.0-alpha.35";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -3807,8 +3807,6 @@ const module$1 = defineNuxtModule({
       featureCollector,
       blockCollector
     ];
-    await Promise.all(collectors.map((v) => v.init()));
-    await Promise.all(collectors.map((v) => v.runHooks()));
     const hasErrors = [...collectors, helper].flatMap((v) => v.validate(iconCollector)).some((v) => v);
     if (!helper.isDev && !helper.isPrepare && hasErrors) {
       throw new Error("Failed to build bl\xF6kkli due to validation errors.");
@@ -3830,6 +3828,8 @@ const module$1 = defineNuxtModule({
     app.context.collectors.forEach((collector) => {
       collectors.push(collector);
     });
+    await Promise.all(collectors.map((v) => v.init()));
+    await Promise.all(collectors.map((v) => v.runHooks()));
     TEMPLATES.forEach((v) => {
       if (typeof v === "function") {
         const result = v(helper);

package/dist/modules/agent/runtime/app/tools/schemas.d.ts

@@ -50,9 +50,9 @@ export declare const mutationResultSchema: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodEnum<{
         add: "add";
         delete: "delete";
+        options: "options";
         move: "move";
         rewrite: "rewrite";
-        options: "options";
     }>;
     label: z.ZodString;
 }, z.core.$strip>, z.ZodObject<{

package/dist/runtime/components/BlokkliField.d.vue.ts

@@ -52,6 +52,11 @@ type __VLS_Props = {
      * Force an alignment during drag and drop interactions.
      */
     dropAlignment?: FieldDropAlignment;
+    /**
+     * The z-index of this field, used to resolve overlapping blocks at the same
+     * nesting level. Higher values take priority. Default is 0.
+     */
+    zIndex?: number | string;
     /**
      * Renders proxy blocks during editing.
      *
@@ -80,6 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     fieldListType: ValidFieldListTypes;
     allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
     listClass: VueClassProp;

package/dist/runtime/components/BlokkliField.vue

@@ -18,6 +18,7 @@
   { [nonEmptyClass]: filteredList.length }
 ]"
     :is-nested
+    :z-index
     :language="providerEntity?.language"
     :proxy-mode
     :tag
@@ -56,6 +57,7 @@ import BlokkliItem from "./BlokkliItem.vue";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
+  INJECT_FIELD_Z_INDEX,
   INJECT_IS_EDITING,
   INJECT_IS_IN_REUSABLE,
   INJECT_IS_NESTED,
@@ -86,6 +88,7 @@ const props = defineProps({
   nonEmptyClass: { type: String, required: false, default: "" },
   allowedFragments: { type: null, required: false, default: () => [] },
   dropAlignment: { type: String, required: false, default: void 0 },
+  zIndex: { type: [Number, String], required: false, default: 0 },
   proxyMode: { type: Boolean, required: false },
   shouldRenderItem: { type: Function, required: false, default: void 0 }
 });
@@ -153,6 +156,7 @@ const filteredList = computed(() => {
 });
 provide(INJECT_IS_NESTED, true);
 provide(INJECT_NESTING_LEVEL, nestingLevel + 1);
+provide(INJECT_FIELD_Z_INDEX, Number(props.zIndex));
 provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 provide(INJECT_FIELD_LIST_BLOCKS, filteredList);
 if (props.proxyMode) {

package/dist/runtime/components/BlokkliField.vue.d.ts

@@ -52,6 +52,11 @@ type __VLS_Props = {
      * Force an alignment during drag and drop interactions.
      */
     dropAlignment?: FieldDropAlignment;
+    /**
+     * The z-index of this field, used to resolve overlapping blocks at the same
+     * nesting level. Higher values take priority. Default is 0.
+     */
+    zIndex?: number | string;
     /**
      * Renders proxy blocks during editing.
      *
@@ -80,6 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     fieldListType: ValidFieldListTypes;
     allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
     listClass: VueClassProp;

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

@@ -78,40 +78,64 @@ let pointerDownElement = null;
 let mouseStartCoordinates = null;
 let pointerDownTimestamp = 0;
 let pointerUpTimestamp = 0;
+function getFieldZIndex(uuid) {
+  const fieldKey = state.getFieldKeyForUuid(uuid);
+  if (!fieldKey) {
+    return 0;
+  }
+  const separatorIndex = fieldKey.indexOf(":");
+  const entityUuid = fieldKey.substring(0, separatorIndex);
+  const fieldName = fieldKey.substring(separatorIndex + 1);
+  return dom.getRegisteredField(entityUuid, fieldName)?.zIndex ?? 0;
+}
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
-  const editableField = directive.getEditableAtPoint(x, y);
-  if (editableField) {
-    const uuid = editableField.type === itemEntityType ? editableField.uuid : void 0;
-    return {
-      editableFieldName: editableField.fieldName,
-      uuid,
-      timestamp: Date.now(),
-      x,
-      y
-    };
-  }
   const visibleUuids = dom.getVisibleBlocks();
   let deepestUuid = "";
   let deepestLevel = -1;
+  let deepestZIndex = 0;
   for (let i = 0; i < visibleUuids.length; i++) {
     const uuid = visibleUuids[i];
     if (!uuid) {
       continue;
     }
     const rect = dom.getBlockRect(uuid);
-    if (rect) {
-      const level = state.getNestingLevel(uuid);
-      if (level <= deepestLevel) {
-        continue;
-      }
-      const relativeRect = ui.getViewportRelativeRect(rect);
-      if (isInsideRect(x, y, relativeRect)) {
+    if (!rect) {
+      continue;
+    }
+    const level = state.getNestingLevel(uuid);
+    if (level < deepestLevel) {
+      continue;
+    }
+    const relativeRect = ui.getViewportRelativeRect(rect);
+    if (!isInsideRect(x, y, relativeRect)) {
+      continue;
+    }
+    if (level > deepestLevel) {
+      deepestUuid = uuid;
+      deepestLevel = level;
+      deepestZIndex = getFieldZIndex(uuid);
+    } else {
+      const zIndex = getFieldZIndex(uuid);
+      if (zIndex > deepestZIndex) {
         deepestUuid = uuid;
-        deepestLevel = level;
+        deepestZIndex = zIndex;
       }
     }
   }
+  const editableField = directive.getEditableAtPoint(x, y);
+  if (editableField) {
+    const editableUuid = editableField.type === itemEntityType ? editableField.uuid : void 0;
+    if (!editableUuid || editableUuid === deepestUuid) {
+      return {
+        editableFieldName: editableField.fieldName,
+        uuid: editableUuid,
+        timestamp: Date.now(),
+        x,
+        y
+      };
+    }
+  }
   if (deepestUuid) {
     return {
       uuid: deepestUuid,
@@ -318,6 +342,7 @@ function onPointerUp(e) {
     } else if (keyboard.isPressingShift.value) {
       eventBus.emit("select:shiftToggle", clicked.uuid);
     } else {
+      console.log("asdfasdf");
       eventBus.emit("select", clicked.uuid);
     }
     return;

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     fieldListType: ValidFieldListTypes;
     allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment?: FieldDropAlignment;
+    zIndex?: number | string;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
     nestingLevel: number;
@@ -22,6 +23,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     tag: string;
     allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
     language: string;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -87,6 +87,7 @@ const props = defineProps({
     return [];
   } },
   dropAlignment: { type: String, required: false, default: void 0 },
+  zIndex: { type: [Number, String], required: false, default: 0 },
   proxyMode: { type: Boolean, required: false },
   globalProxyMode: { type: Boolean, required: false },
   nestingLevel: { type: Number, required: true },
@@ -111,12 +112,14 @@ function isMuted(item) {
 }
 const data = computed(() => {
   const allowedFragments = Array.isArray(props.allowedFragments) ? props.allowedFragments : [props.allowedFragments];
+  const zIndex = Number(props.zIndex);
   return {
     fieldListType: props.fieldListType,
     allowedFragments,
     isNested: props.isNested,
     nestingLevel: props.nestingLevel,
-    dropAlignment: props.dropAlignment ?? null
+    dropAlignment: props.dropAlignment ?? null,
+    zIndex: Number.isNaN(zIndex) ? 0 : zIndex
   };
 });
 watch(

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     fieldListType: ValidFieldListTypes;
     allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment?: FieldDropAlignment;
+    zIndex?: number | string;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
     nestingLevel: number;
@@ -22,6 +23,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     tag: string;
     allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
     language: string;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -191,9 +191,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         height: number;
     };
     minHeight: number;
-    tourText: string;
     minWidth: number;
     region: SidebarRegion;
+    tourText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -191,9 +191,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         height: number;
     };
     minHeight: number;
-    tourText: string;
     minWidth: number;
     region: SidebarRegion;
+    tourText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/types/field.d.ts

@@ -32,8 +32,9 @@ export type RegisteredField = {
     isNested: boolean;
     nestingLevel: number;
     dropAlignment: FieldDropAlignment | null;
+    zIndex: number;
 };
-export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
+export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment' | 'zIndex'>;
 export type RenderedFieldListItem = {
     uuid: string;
     bundle: string;

package/dist/runtime/helpers/injections.d.ts

@@ -35,6 +35,11 @@ export declare const INJECT_IS_NESTED: InjectionKey<boolean>;
  * The current nesting level, starting at 0.
  */
 export declare const INJECT_NESTING_LEVEL: InjectionKey<number>;
+/**
+ * The z-index of the parent field, used to resolve overlapping blocks at the
+ * same nesting level. Higher values take priority.
+ */
+export declare const INJECT_FIELD_Z_INDEX: InjectionKey<number>;
 /**
  * Whether we're currently in preview mode.
  */

package/dist/runtime/helpers/injections.js

@@ -11,6 +11,9 @@ export const INJECT_IS_NESTED = Symbol(
 export const INJECT_NESTING_LEVEL = Symbol(
   "blokkli_nesting_level"
 );
+export const INJECT_FIELD_Z_INDEX = Symbol(
+  "blokkli_field_z_index"
+);
 export const INJECT_IS_PREVIEW = Symbol("blokkli_is_preview");
 export const INJECT_IS_IN_REUSABLE = Symbol(
   "blokkli_is_in_reusable"

package/dist/types.d.mts

@@ -4,6 +4,6 @@ declare module '@nuxt/schema' {
   interface NuxtHooks extends ModuleHooks {}
 }
 
-export { type ModuleHooks, type ModuleOptions } from './shared/editor.Iax3GCvt.mjs'
+export { type ModuleHooks } from './shared/editor.Iax3GCvt.mjs'
 
-export { default } from './module.mjs'
+export { type ModuleOptions, default } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.33",
+  "version": "2.0.0-alpha.35",
   "description": "Interactive page building experience for Nuxt",
   "keywords": [
     "cms",