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

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

@@ -0,0 +1,2 @@
+import { type Ref } from '#imports';
+export declare function addElementClasses(element: HTMLElement, classesArg: string | string[], watchSource?: Ref<string | boolean | null | undefined>): void;

package/dist/runtime/helpers/addElementClasses.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, watch } from "#imports";
+export function addElementClasses(element, classesArg, watchSource) {
+  const classes = Array.isArray(classesArg) ? classesArg : [classesArg];
+  if (watchSource) {
+    watch(
+      watchSource,
+      function(value) {
+        if (value) {
+          element.classList.add(...classes);
+        } else {
+          element.classList.remove(...classes);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+  } else {
+    element.classList.add(...classes);
+  }
+  onBeforeUnmount(() => {
+    element.classList.remove(...classes);
+  });
+}

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

@@ -1,6 +1,7 @@
-import { type ComputedRef } from '#imports';
+import { type ComputedRef, type WritableComputedRef } from '#imports';
 import type { UiProvider } from './uiProvider.js';
 import { type ProgramInfo } from 'twgl.js';
+import type { StorageProvider } from './storageProvider.js';
 export type AnimationProvider = {
     /**
      * Request an animation loop. Should be called when UI state changes.
@@ -13,6 +14,7 @@ export type AnimationProvider = {
     setSharedUniforms: (gl: WebGLRenderingContext, programInfo: ProgramInfo) => void;
     dpi: ComputedRef<number>;
     webglSupported: ComputedRef<boolean | null>;
+    webglEnabled: WritableComputedRef<boolean>;
     getCanvasElement: () => HTMLCanvasElement;
     /**
      * Register a WebGL program.
@@ -22,4 +24,4 @@ export type AnimationProvider = {
     registerProgram: (id: string, gl: WebGLRenderingContext, shaders: string[]) => ProgramInfo;
     setMouseCoords: (x: number, y: number) => void;
 };
-export default function (ui: UiProvider): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -8,7 +8,8 @@ import {
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-export default function(ui) {
+export default function(ui, storage) {
+  const webglEnabled = storage.use("webglEnabled", true);
   let mouseX = 0;
   let mouseY = 0;
   let iterator = 120;
@@ -99,6 +100,9 @@ export default function(ui) {
   return {
     requestDraw,
     gl: function() {
+      if (!webglEnabled.value) {
+        return;
+      }
       if (webglSupported.value === false) {
         return;
       }
@@ -117,7 +121,8 @@ export default function(ui) {
     dpi,
     registerProgram,
     setMouseCoords,
-    webglSupported: computed(() => webglSupported.value),
+    webglSupported: computed(() => webglSupported.value && webglEnabled.value),
+    webglEnabled,
     getCanvasElement
   };
 }

package/dist/runtime/helpers/bundles/index.d.ts

@@ -0,0 +1 @@
+export declare function isInternalBundle(bundle: string): boolean;

package/dist/runtime/helpers/bundles/index.js

@@ -0,0 +1,4 @@
+import { INTERNAL_BUNDLES } from "#blokkli/constants";
+export function isInternalBundle(bundle) {
+  return INTERNAL_BUNDLES.includes(bundle);
+}

package/dist/runtime/helpers/composables/useStickyToolbar.d.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+type PlacementVertical = 'top' | 'bottom' | 'auto';
+type PlacementHorizontal = 'left' | 'center';
+type UseStickyToolbarOptions = {
+    getPlacementY?: () => PlacementVertical;
+    getPlacementX?: () => PlacementHorizontal;
+    shouldUpdate?: () => boolean;
+    getWidth?: () => number;
+    getHeight?: () => number;
+    getMargin?: () => number;
+    getAnchorElement?: () => HTMLElement | null;
+    getCaretWidth?: () => number;
+};
+type UseStickyToolbar = {
+    shouldRender: ComputedRef<boolean>;
+    placementY: ComputedRef<'top' | 'bottom'>;
+    caretX: ComputedRef<number>;
+};
+export default function (el: Readonly<ShallowRef<HTMLElement | null>>, options?: UseStickyToolbarOptions): UseStickyToolbar;
+export {};

package/dist/runtime/helpers/composables/useStickyToolbar.js

@@ -0,0 +1,215 @@
+import onBlokkliEvent from "./onBlokkliEvent.js";
+import { computed, ref, useBlokkli } from "#imports";
+import { falsy, findIdealRectPosition } from "../index.js";
+const limitPlacedRect = (rect, padding) => {
+  return {
+    width: rect.width,
+    height: rect.height,
+    x: Math.min(
+      Math.max(rect.x, padding.x),
+      padding.x + padding.width - rect.width
+    ),
+    y: Math.min(
+      Math.max(padding.y, rect.y),
+      padding.height + padding.y - rect.height
+    )
+  };
+};
+export default function(el, options) {
+  const { ui, selection, dom } = useBlokkli();
+  const shouldRender = ref(false);
+  const actualPlacement = ref("bottom");
+  const caretXPosition = ref(0);
+  function getMargin() {
+    if (options && options.getMargin) {
+      return options.getMargin();
+    }
+    return 15;
+  }
+  function getCaretWidth() {
+    if (options && options.getCaretWidth) {
+      return options.getCaretWidth();
+    }
+    return 0;
+  }
+  let anchorRect = null;
+  function getCoords(width, height, placementY, placementX, offset, scale) {
+    let minX = 0;
+    let maxX = 0;
+    let minY = 0;
+    let maxY = 0;
+    let hasRects = false;
+    if (options && options.getAnchorElement) {
+      const anchorElement = options.getAnchorElement();
+      if (anchorElement) {
+        anchorRect ||= ui.getAbsoluteElementRect(
+          anchorElement.getBoundingClientRect(),
+          scale,
+          offset
+        );
+        const rectX = (anchorRect.x + offset.x / scale) * scale;
+        const rectY = (anchorRect.y + offset.y / scale) * scale;
+        const rectRight = rectX + anchorRect.width * scale;
+        const rectBottom = rectY + anchorRect.height * scale;
+        minX = rectX;
+        maxX = rectRight;
+        minY = rectY;
+        maxY = rectBottom;
+        hasRects = true;
+      }
+    } else {
+      const rects = selection.blocks.value.map((block) => dom.getBlockRect(block.uuid)).filter(falsy).filter((rect2) => rect2.height || rect2.width);
+      hasRects = !!rects.length;
+      if (hasRects) {
+        for (let i = 0; i < rects.length; i++) {
+          const { x: x2, y: y2, height: height2, width: rectWidth } = rects[i];
+          const rectX = (x2 + offset.x / scale) * scale;
+          const rectY = (y2 + offset.y / scale) * scale;
+          const rectRight = rectX + rectWidth * scale;
+          const rectBottom = rectY + height2 * scale;
+          if (i === 0 || rectX < minX) {
+            minX = rectX;
+          }
+          if (i === 0 || rectRight > maxX) {
+            maxX = rectRight;
+          }
+          if (i === 0 || rectY < minY) {
+            minY = rectY;
+          }
+          if (i === 0 || rectBottom > maxY) {
+            maxY = rectBottom;
+          }
+        }
+      } else {
+        if (!selection.hasHostSelected.value) {
+          return;
+        }
+        minX = offset.x;
+        maxX = minX + ui.artboardSize.value.width;
+        minY = offset.y;
+        maxY = minY + ui.artboardSize.value.height;
+      }
+    }
+    const padding = ui.visibleViewportPadded.value;
+    const xSubtract = hasRects ? 5 * Math.min(scale, 1) : 0;
+    const margin = getMargin() * Math.min(scale, 1);
+    let actualPlacementY = placementY === "auto" ? "bottom" : placementY;
+    if (placementY === "auto") {
+      const spaceAbove = minY - padding.y;
+      const spaceBelow = padding.y + padding.height - maxY;
+      const requiredSpace = height + margin;
+      if (spaceBelow >= requiredSpace) {
+        actualPlacementY = "bottom";
+      } else if (spaceAbove >= requiredSpace) {
+        actualPlacementY = "top";
+      } else {
+        actualPlacementY = spaceAbove > spaceBelow ? "top" : "bottom";
+      }
+    }
+    const y = actualPlacementY === "top" ? minY - height - margin : maxY + margin;
+    const centerX = (minX + maxX) / 2;
+    let x;
+    if (placementX === "center") {
+      x = centerX - width / 2;
+    } else {
+      x = minX - xSubtract;
+    }
+    const rect = limitPlacedRect(
+      {
+        x,
+        y,
+        width,
+        height
+      },
+      padding
+    );
+    const idealPosition = findIdealRectPosition(
+      ui.viewportBlockingRects.value,
+      rect,
+      padding
+    );
+    if (!idealPosition) {
+      return void 0;
+    }
+    const caretWidth = getCaretWidth();
+    const caretHalfWidth = caretWidth / 2;
+    const minCaretX = caretHalfWidth;
+    const maxCaretX = width - caretHalfWidth;
+    const caretX = Math.max(
+      minCaretX,
+      Math.min(centerX - idealPosition.x, maxCaretX)
+    );
+    return { ...idealPosition, actualPlacementY, caretX };
+  }
+  function getWidth() {
+    if (options && options.getWidth) {
+      return options.getWidth();
+    }
+    if (el.value) {
+      return el.value.clientWidth;
+    }
+    return null;
+  }
+  function getHeight() {
+    if (options && options.getHeight) {
+      return options.getHeight();
+    }
+    if (el.value) {
+      return el.value.clientHeight;
+    }
+    return null;
+  }
+  function getPlacementVertical() {
+    if (options && options.getPlacementY) {
+      return options.getPlacementY();
+    }
+    return "top";
+  }
+  function getPlacementHorizontal() {
+    if (options && options.getPlacementX) {
+      return options.getPlacementX();
+    }
+    return "left";
+  }
+  onBlokkliEvent("canvas:draw", (ctx) => {
+    if (!el.value) {
+      return;
+    }
+    if (ui.isMobile.value) {
+      el.value.style.transform = "";
+      shouldRender.value = true;
+      return;
+    }
+    if (options && options.shouldUpdate && !options.shouldUpdate()) {
+      return;
+    }
+    const width = getWidth();
+    const height = getHeight();
+    if (width === null || height === null) {
+      return;
+    }
+    const placementY = getPlacementVertical();
+    const placementX = getPlacementHorizontal();
+    const coords = getCoords(
+      width,
+      height,
+      placementY,
+      placementX,
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!coords) {
+      shouldRender.value = false;
+      return;
+    }
+    el.value.style.transform = `translate3d(${coords.x}px, ${coords.y}px, 0)`;
+    actualPlacement.value = coords.actualPlacementY;
+    caretXPosition.value = coords.caretX;
+    shouldRender.value = true;
+  });
+  return {
+    shouldRender: computed(() => shouldRender.value),
+    placementY: computed(() => actualPlacement.value),
+    caretX: computed(() => caretXPosition.value)
+  };
+}

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

@@ -1,5 +1,5 @@
 import { type Ref, type ComputedRef } from '#imports';
-import type { BlockDefinition, FragmentDefinition } from '#blokkli-build/definitions';
+import type { BlockDefinition, FragmentDefinition, ProviderDefinition } from '#blokkli-build/definitions';
 import type { ValidFieldListTypes, BlockBundleWithNested } from '#blokkli-build/generated-types';
 import type { DeepReadonly } from 'vue';
 import type { BlockDefinitionOptionsInput } from '../types/index.js';
@@ -8,6 +8,7 @@ export type DefinitionProvider = {
     getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested) => BlockDefinition | undefined;
     getDefaultDefinition: (bundle: string) => BlockDefinition | undefined;
     getFragmentDefinition: (name: string) => FragmentDefinition | undefined;
+    getProviderDefinition: (entityType: string, entityBundle: string) => ProviderDefinition | undefined;
     getBlockIcon: (bundle: string) => string | undefined;
     fragmentDefinitions: ComputedRef<FragmentDefinition[]>;
     blockDefinitions: ComputedRef<BlockDefinition[]>;

package/dist/runtime/helpers/definitionProvider.js

@@ -6,6 +6,7 @@ import {
 export default function() {
   const blocks = ref(definitions.blocks);
   const fragments = ref(definitions.fragments);
+  const providers = ref(definitions.providers);
   const renderKey = ref(definitions.renderKey);
   const blockIcons = ref(definitions.icons);
   const allGlobalOptions = ref(
@@ -18,6 +19,7 @@ export default function() {
       renderKey.value = newDefinitions?.default.renderKey || "";
       blocks.value = newDefinitions?.default?.blocks || [];
       fragments.value = newDefinitions?.default?.fragments || [];
+      providers.value = newDefinitions?.default?.providers || [];
       blockIcons.value = newDefinitions?.default?.icons || {};
       allGlobalOptions.value = newDefinitions?.default?.globalOptions || {};
     });
@@ -57,6 +59,16 @@ export default function() {
       {}
     )
   );
+  const providersByName = computed(
+    () => providers.value.reduce(
+      (acc, definition) => {
+        const key = `${definition.entityType}:${definition.bundle}`;
+        acc[key] = definition;
+        return acc;
+      },
+      {}
+    )
+  );
   function getBlockDefinition(bundle, fieldListType, parentBundle) {
     const forFieldListType = bundle + "__field:" + fieldListType;
     if (blocksByKey.value[forFieldListType]) {
@@ -73,6 +85,10 @@ export default function() {
   function getFragmentDefinition(name) {
     return fragmentsByName.value[name];
   }
+  function getProviderDefinition(entityType, entityBundle) {
+    const key = `${entityType}:${entityBundle}`;
+    return providersByName.value[key];
+  }
   function getDefaultDefinition(bundle) {
     return blocksByKey.value[bundle];
   }
@@ -82,6 +98,7 @@ export default function() {
   return {
     getBlockDefinition,
     getFragmentDefinition,
+    getProviderDefinition,
     getDefaultDefinition,
     getBlockIcon,
     fragmentDefinitions: computed(() => fragments.value),

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

@@ -26,6 +26,7 @@ export type DomProvider = {
     updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;
     registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
+    registeredBlockUuids: ComputedRef<string[]>;
     /**
      * Get all droppable entity fields.
      */
@@ -36,7 +37,7 @@ export type DomProvider = {
     isBlockVisible(uuid: string): boolean;
     getActiveProviderElement: () => HTMLElement;
     getBlockRects: () => Record<string, MeasuredBlockRect>;
-    getBlockRect: (uuid: string) => MeasuredBlockRect | undefined;
+    getBlockRect: (uuid: string, refresh?: boolean) => MeasuredBlockRect | undefined;
     refreshBlockRect: (uuid: string) => void;
     getFieldRect: (key: string) => Rectangle | undefined;
     updateVisibleRects: () => void;

package/dist/runtime/helpers/domProvider.js

@@ -52,12 +52,25 @@ export default function(ui, debug, definitions) {
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
+  const registeredBlocks = reactive({});
+  const registeredFields = reactive({});
   const visibleBlocks = /* @__PURE__ */ new Set();
   const visibleFields = /* @__PURE__ */ new Set();
   const blockRects = {};
   const fieldRects = {};
   const blockUuidCurrentKey = {};
   let draggableBlockCache = {};
+  let initTimeout = null;
+  const isInitalizing = ref(true);
+  const observedElementCache = /* @__PURE__ */ new Map();
+  const registeredBlockUuids = computed(() => {
+    return Object.entries(registeredBlocks).map(([uuid, element]) => {
+      if (element) {
+        return uuid;
+      }
+      return null;
+    }).filter(falsy);
+  });
   const resizeObserver = new ResizeObserver(function(entries) {
     for (const entry of entries) {
       if (!(entry.target instanceof HTMLElement)) {
@@ -127,8 +140,6 @@ export default function(ui, debug, definitions) {
     }
   }
   const intersectionObserver = useDelayedIntersectionObserver(intersectionCallback);
-  const registeredBlocks = reactive({});
-  const registeredFields = reactive({});
   const registeredFieldTypes = computed(() => {
     const fields = Object.values(registeredFields);
     const found = /* @__PURE__ */ new Set();
@@ -172,10 +183,15 @@ export default function(ui, debug, definitions) {
     visibleFields.delete(key);
     registeredFields[key] = void 0;
   };
-  function getElementToObserve(el, bundle, fieldListType, parentBlockBundle) {
+  function getElementToObserve(uuid, el, bundle, fieldListType, parentBlockBundle) {
     if (el.classList.contains("bk-block-proxy")) {
       return el;
     }
+    const key = `${uuid}${bundle}${fieldListType}${parentBlockBundle ?? "none"}`;
+    const cached = observedElementCache.get(key);
+    if (cached) {
+      return cached;
+    }
     const definition = definitions.getBlockDefinition(
       bundle,
       fieldListType,
@@ -186,8 +202,10 @@ export default function(ui, debug, definitions) {
     }
     const observableElement = (definition.editor?.getDraggableElement ? definition.editor.getDraggableElement(el) : el) || el;
     if (observableElement instanceof HTMLElement) {
+      observedElementCache.set(key, observableElement);
       return observableElement;
     }
+    observedElementCache.set(key, el);
     return el;
   }
   const findBlock = (uuid) => {
@@ -261,23 +279,41 @@ export default function(ui, debug, definitions) {
   function getBlockRects() {
     return blockRects;
   }
-  function getBlockRect(uuid) {
+  function getBlockRect(uuid, refresh) {
+    if (refresh) {
+      refreshBlockRect(uuid);
+    }
     return blockRects[uuid];
   }
   function getFieldRect(key) {
     return fieldRects[key];
   }
-  function refreshBlockRect(uuid) {
-    const block = findBlock(uuid);
-    if (!block) {
+  function refreshBlockRect(uuid, providedOffset, providedScale) {
+    const offset = providedOffset ?? ui.artboardOffset.value;
+    const scale = providedScale ?? ui.artboardScale.value;
+    const el = registeredBlocks[uuid];
+    if (!el) {
       return;
     }
-    const el = getDragElement(block);
-    if (!el) {
+    const bundle = el.dataset.itemBundle;
+    const hostBundle = el.dataset.hostBundle;
+    const hostFieldListType = el.dataset.hostFieldListType;
+    if (!bundle || !hostFieldListType) {
       return;
     }
+    const observableElement = getElementToObserve(
+      uuid,
+      el,
+      bundle,
+      hostFieldListType,
+      hostBundle
+    );
     blockRects[uuid] = rectWithTime(
-      ui.getAbsoluteElementRect(el.getBoundingClientRect())
+      ui.getAbsoluteElementRect(
+        observableElement.getBoundingClientRect(),
+        scale,
+        offset
+      )
     );
   }
   function refreshFieldRect(key) {
@@ -298,34 +334,15 @@ export default function(ui, debug, definitions) {
     return getVisibleBlocks();
   }
   function updateVisibleRects() {
+    logger.log("Update visible rects");
     const toUpdate = getUuidsToUpdateRectsFor();
     const offset = ui.artboardOffset.value;
     const scale = ui.artboardScale.value;
     for (let i = 0; i < toUpdate.length; i++) {
       const uuid = toUpdate[i];
-      const el = registeredBlocks[uuid];
-      if (!el) {
-        continue;
+      if (uuid) {
+        refreshBlockRect(uuid, offset, scale);
       }
-      const bundle = el.dataset.itemBundle;
-      const hostBundle = el.dataset.hostBundle;
-      const hostFieldListType = el.dataset.hostFieldListType;
-      if (!bundle || !hostFieldListType) {
-        continue;
-      }
-      const observableElement = getElementToObserve(
-        el,
-        bundle,
-        hostFieldListType,
-        hostBundle
-      );
-      blockRects[uuid] = rectWithTime(
-        ui.getAbsoluteElementRect(
-          observableElement.getBoundingClientRect(),
-          scale,
-          offset
-        )
-      );
     }
     const visibleFieldKeys = getVisibleFields();
     for (let i = 0; i < visibleFieldKeys.length; i++) {
@@ -342,10 +359,15 @@ export default function(ui, debug, definitions) {
     }
   }
   onBlokkliEvent("state:reloaded", () => {
+    observedElementCache.clear();
     draggableBlockCache = {};
     if (stateReloadTimeout) {
       window.clearTimeout(stateReloadTimeout);
     }
+    const allUuids = Object.keys(registeredBlocks);
+    if (allUuids.length < 150) {
+      updateVisibleRects();
+    }
     stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
   });
   onBlokkliEvent("ui:resized", function() {
@@ -361,24 +383,45 @@ export default function(ui, debug, definitions) {
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
   function getDragElement(block) {
-    const cached = dragElementCache.get(block.uuid);
-    if (cached && document.body.contains(cached)) {
-      return cached;
-    }
     const el = block.element();
     if (!el) {
-      return;
+      return void 0;
     }
-    dragElementUuidMap.set(el, block.uuid);
-    dragElementCache.set(block.uuid, el);
-    return el;
+    return getElementToObserve(
+      block.uuid,
+      el,
+      block.itemBundle,
+      block.hostFieldListType,
+      block.hostBundle
+    );
   }
   function isBlockVisible(uuid) {
     return visibleBlocks.has(uuid);
   }
+  function refreshAllBlockRects() {
+    const uuids = Object.keys(blockRects);
+    if (uuids.length < 200) {
+      for (let i = 0; i < uuids.length; i++) {
+        const uuid = uuids[i];
+        if (!uuid) {
+          continue;
+        }
+        refreshBlockRect(uuid);
+      }
+    }
+  }
   function registerBlock(key, uuid, el) {
     logger.log("registerBlock: " + uuid);
     blockUuidCurrentKey[uuid] = key;
+    if (initTimeout) {
+      window.clearTimeout(initTimeout);
+    }
+    if (isInitalizing.value) {
+      initTimeout = window.setTimeout(() => {
+        isInitalizing.value = false;
+        refreshAllBlockRects();
+      }, 500);
+    }
     if (!el) {
       logger.log("registerBlock call unregisterBlock because no element", uuid);
       unregisterBlock(key, uuid);
@@ -394,6 +437,7 @@ export default function(ui, debug, definitions) {
     const item = buildDraggableItem(el);
     if (item && item.itemType === "existing") {
       const observableElement = getElementToObserve(
+        item.uuid,
         el,
         item.itemBundle,
         item.hostFieldListType,
@@ -415,7 +459,6 @@ export default function(ui, debug, definitions) {
       intersectionObserver.unobserve(el);
       resizeObserver.unobserve(el);
       dragElementUuidMap.delete(el);
-      dragElementUuidMap.delete(el);
     }
     dragElementCache.delete(uuid);
     registeredBlocks[uuid] = void 0;
@@ -441,12 +484,15 @@ export default function(ui, debug, definitions) {
     getFieldRect,
     refreshBlockRect,
     isBlockVisible,
-    isReady: computed(() => mutationsReady.value && intersectionReady.value),
+    isReady: computed(
+      () => mutationsReady.value && intersectionReady.value && !isInitalizing.value
+    ),
     init,
     getDragElement,
     updateVisibleRects,
     registeredFieldTypes,
     registerBlock,
-    unregisterBlock
+    unregisterBlock,
+    registeredBlockUuids
   };
 }

package/dist/runtime/helpers/dropTargets/index.d.ts

@@ -0,0 +1,6 @@
+import type { BlokkliFieldElement } from '#blokkli/types';
+export type Orientation = 'horizontal' | 'vertical';
+export declare const MIN_GAP = 20;
+export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
+export declare function getChildrenOrientation(element: HTMLElement): Orientation;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[]): boolean;