@blokkli/editor 1.0.0

package/dist/runtime/helpers/domProvider.js

@@ -0,0 +1,446 @@
+import { reactive, ref, computed } from "#imports";
+import {
+  findClosestBlock,
+  buildDraggableItem,
+  falsy,
+  mapDroppableField,
+  findClosestEntityContext
+} from "#blokkli/helpers";
+import { cloneElementWithStyles } from "./dom/index.js";
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
+import { getDefinition } from "#blokkli/definitions";
+const buildFieldElement = (element) => {
+  const key = element.dataset.fieldKey;
+  const name = element.dataset.fieldName;
+  const label = element.dataset.fieldLabel;
+  const isNested = element.dataset.fieldIsNested === "true";
+  const fieldListType = element.dataset.fieldListType;
+  const hostEntityType = element.dataset.hostEntityType;
+  const hostEntityBundle = element.dataset.hostEntityBundle;
+  const hostEntityUuid = element.dataset.hostEntityUuid;
+  const dropAlignment = element.dataset.fieldDropAlignment;
+  const cardinality = Number.parseInt(element.dataset.fieldCardinality || "-1");
+  const allowedBundles = (element.dataset.fieldAllowedBundles || "").split(",").filter(Boolean);
+  const allowedFragments = (element.dataset.allowedFragments || "").split(",").filter(Boolean);
+  if (key && name && label && hostEntityType && hostEntityUuid && hostEntityBundle && fieldListType) {
+    return {
+      key,
+      name,
+      label,
+      isNested,
+      hostEntityType,
+      hostEntityUuid,
+      hostEntityBundle,
+      cardinality: Number.isNaN(cardinality) ? -1 : cardinality,
+      allowedBundles,
+      allowedFragments,
+      fieldListType,
+      element,
+      dropAlignment: dropAlignment === "vertical" || dropAlignment === "horizontal" ? dropAlignment : void 0
+    };
+  }
+};
+const getVisibleBlockElement = (instance) => {
+  if (instance.vnode.el instanceof HTMLElement) {
+    return instance.vnode.el;
+  } else if (instance?.vnode.el instanceof Text && instance?.vnode.el.nextElementSibling instanceof HTMLElement) {
+    return instance.vnode.el.nextElementSibling;
+  }
+};
+function rectWithTime(rect, time) {
+  return {
+    ...rect,
+    time: time || performance.now()
+  };
+}
+export default function(ui, debug) {
+  const logger = debug.createLogger("DomProvider");
+  const mutationsReady = ref(true);
+  const intersectionReady = ref(false);
+  const blockVisibility = {};
+  const visibleBlocks = /* @__PURE__ */ new Set();
+  const visibleFields = /* @__PURE__ */ new Set();
+  const blockRects = {};
+  const fieldRects = {};
+  let draggableBlockCache = {};
+  const resizeObserver = new ResizeObserver(function(entries) {
+    for (const entry of entries) {
+      if (!(entry.target instanceof HTMLElement)) {
+        return;
+      }
+      const uuid = entry.target.dataset.uuid || entry.target.closest("[data-uuid]")?.dataset.uuid;
+      if (!uuid) {
+        return;
+      }
+      const currentRect = blockRects[uuid];
+      const now = performance.now();
+      if (!currentRect) {
+        blockRects[uuid] = rectWithTime(
+          {
+            x: entry.contentRect.x,
+            y: entry.contentRect.y,
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize
+          },
+          now
+        );
+        return;
+      }
+      if (currentRect.time > now) {
+        return;
+      }
+      blockRects[uuid].width = entry.borderBoxSize[0].inlineSize;
+      blockRects[uuid].height = entry.borderBoxSize[0].blockSize;
+      blockRects[uuid].time = now;
+    }
+  });
+  function intersectionCallback(entries) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    for (const entry of entries) {
+      if (entry.target instanceof HTMLElement) {
+        const uuid = entry.target.dataset.uuid || entry.target.closest("[data-uuid]")?.dataset.uuid;
+        const fieldKey = entry.target.dataset.fieldKey;
+        const rect = entry.boundingClientRect;
+        if (fieldKey) {
+          if (entry.isIntersecting) {
+            visibleFields.add(fieldKey);
+          } else {
+            visibleFields.delete(fieldKey);
+          }
+          fieldRects[fieldKey] = ui.getAbsoluteElementRect(rect, scale, offset);
+        } else if (uuid) {
+          const newRect = ui.getAbsoluteElementRect(rect, scale, offset);
+          const currentRect = blockRects[uuid];
+          if (currentRect) {
+            if (currentRect.time > entry.time) {
+              blockRects[uuid].x = newRect.x;
+              blockRects[uuid].y = newRect.y;
+            } else {
+              blockRects[uuid] = rectWithTime(newRect, entry.time);
+            }
+          } else {
+            blockRects[uuid] = rectWithTime(newRect, entry.time);
+          }
+          if (entry.isIntersecting) {
+            visibleBlocks.add(uuid);
+          } else {
+            visibleBlocks.delete(uuid);
+          }
+          blockVisibility[uuid] = entry.isIntersecting;
+        }
+      }
+    }
+  }
+  const observer = useDelayedIntersectionObserver(intersectionCallback);
+  const registeredBlocks = reactive({});
+  const registeredFields = reactive({});
+  const registerField = (uuid, fieldName, element) => {
+    const key = `${uuid}:${fieldName}`;
+    registeredFields[key] = element;
+    observer.observe(element);
+  };
+  const unregisterField = (uuid, fieldName) => {
+    const key = `${uuid}:${fieldName}`;
+    const el = registeredFields[key];
+    if (el) {
+      observer.unobserve(el);
+    }
+    registeredFields[key] = void 0;
+  };
+  function getElementToObserve(el, bundle, fieldListType, parentBlockBundle) {
+    const definition = getDefinition(bundle, fieldListType, parentBlockBundle);
+    if (!definition) {
+      throw new Error("Failed to load definition for bundle: " + bundle);
+    }
+    const observableElement = (definition.editor?.getDraggableElement ? definition.editor.getDraggableElement(el) : el) || el;
+    if (observableElement instanceof HTMLElement) {
+      return observableElement;
+    }
+    return el;
+  }
+  const registerBlock = (uuid, instance, bundle, fieldListType, parentBlockBundle) => {
+    if (registeredBlocks[uuid]) {
+      console.error(
+        "Trying to register block with already existing UUID: " + uuid
+      );
+    }
+    if (!instance) {
+      console.error(
+        `Failed to get component instance of block with UUID "${uuid}"`
+      );
+      return;
+    }
+    const el = getVisibleBlockElement(instance);
+    if (!el) {
+      console.error(
+        `Failed to locate block component element for UUID "${uuid}". Make sure the block renders at least one root element that is always visible.`
+      );
+      return;
+    }
+    const observableElement = getElementToObserve(
+      el,
+      bundle,
+      fieldListType,
+      parentBlockBundle
+    );
+    observer.observe(observableElement);
+    resizeObserver.observe(observableElement);
+    registeredBlocks[uuid] = el;
+  };
+  const unregisterBlock = (uuid) => {
+    const el = registeredBlocks[uuid];
+    if (el) {
+      observer.unobserve(el);
+      resizeObserver.unobserve(el);
+    }
+    registeredBlocks[uuid] = void 0;
+    delete blockRects[uuid];
+  };
+  const findBlock = (uuid) => {
+    const cached = draggableBlockCache[uuid];
+    if (cached) {
+      return cached;
+    }
+    const el = registeredBlocks[uuid];
+    if (!el) {
+      return;
+    }
+    const item = buildDraggableItem(el);
+    if (item?.itemType === "existing") {
+      draggableBlockCache[uuid] = item;
+      return item;
+    }
+  };
+  const getAllBlocks = () => {
+    return [
+      ...document.querySelectorAll(
+        '[data-blokkli-provider-active="true"] [data-uuid]'
+      )
+    ].map((v) => {
+      const item = buildDraggableItem(v);
+      if (item?.itemType === "existing") {
+        return item;
+      }
+    }).filter(falsy);
+  };
+  const getAllFields = () => {
+    const elements = [...document.querySelectorAll(".bk-field-list")];
+    return elements.map((element) => {
+      if (element instanceof HTMLElement) {
+        return buildFieldElement(element);
+      }
+    }).filter(falsy);
+  };
+  const getDropElementMarkup = (item, checkSize) => {
+    const el = item.itemType === "existing" ? getDragElement(item) : item.element();
+    if (!el) {
+      return "";
+    }
+    const dropElement = el.querySelector(".bk-drop-element") || el;
+    const childCount = dropElement.querySelectorAll("*").length;
+    if (checkSize && childCount > 80) {
+      return "";
+    }
+    return cloneElementWithStyles(dropElement, true).replace(
+      /\sdata-\w+="[^"]*"/g,
+      ""
+    );
+  };
+  const getBlockField = (uuid) => {
+    const block = findBlock(uuid);
+    if (!block) {
+      throw new Error("Block does not exist: " + uuid);
+    }
+    const el = block.element().closest(".bk-field-list");
+    if (!(el instanceof HTMLElement)) {
+      throw new TypeError("Failed to locate field element for block: " + uuid);
+    }
+    const field = buildFieldElement(el);
+    if (!field) {
+      throw new Error("Failed to build field for block: " + uuid);
+    }
+    return field;
+  };
+  const findField = (uuid, fieldName) => {
+    const el = document.querySelector(
+      `[data-field-name="${fieldName}"][data-host-entity-uuid="${uuid}"]`
+    );
+    if (!(el instanceof HTMLElement)) {
+      return;
+    }
+    return buildFieldElement(el);
+  };
+  const getAllDroppableFields = () => [...document.querySelectorAll("[data-blokkli-droppable-field]")].map(
+    mapDroppableField
+  );
+  const getBlockVisibilities = () => {
+    return blockVisibility;
+  };
+  const getVisibleBlocks = () => Array.from(visibleBlocks);
+  const getVisibleFields = () => Array.from(visibleFields);
+  const getActiveProviderElement = () => {
+    const el = document.querySelector('[data-blokkli-provider-active="true"]');
+    if (!el) {
+      throw new Error("Failed to find active <BlokkliProvider> element.");
+    }
+    if (!(el instanceof HTMLElement)) {
+      throw new TypeError(
+        "The root element of the active <BlokkliProvider> is not an HTMLElement."
+      );
+    }
+    return el;
+  };
+  function getBlockRects() {
+    return blockRects;
+  }
+  function getBlockRect(uuid) {
+    return blockRects[uuid];
+  }
+  function getFieldRect(key) {
+    return fieldRects[key];
+  }
+  function refreshBlockRect(uuid) {
+    const block = findBlock(uuid);
+    if (!block) {
+      return;
+    }
+    const el = getDragElement(block);
+    if (!el) {
+      return;
+    }
+    blockRects[uuid] = rectWithTime(
+      ui.getAbsoluteElementRect(el.getBoundingClientRect())
+    );
+  }
+  function refreshFieldRect(key) {
+    const el = document.querySelector(
+      `.bk-draggable-list-container[data-field-key="${key}"]`
+    );
+    if (!(el instanceof HTMLElement)) {
+      return;
+    }
+    fieldRects[key] = ui.getAbsoluteElementRect(el.getBoundingClientRect());
+  }
+  let stateReloadTimeout = null;
+  function updateVisibleRects() {
+    const visible = getVisibleBlocks();
+    const offset = ui.artboardOffset.value;
+    const scale = ui.artboardScale.value;
+    for (let i = 0; i < visible.length; i++) {
+      const uuid = visible[i];
+      const el = registeredBlocks[uuid];
+      if (!el) {
+        continue;
+      }
+      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++) {
+      const key = visibleFieldKeys[i];
+      const field = registeredFields[key];
+      if (!field) {
+        continue;
+      }
+      fieldRects[key] = ui.getAbsoluteElementRect(
+        field.getBoundingClientRect(),
+        scale,
+        offset
+      );
+    }
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    draggableBlockCache = {};
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+    stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
+  });
+  onBlokkliEvent("ui:resized", function() {
+    getVisibleBlocks().forEach(refreshBlockRect);
+    getVisibleFields().forEach(refreshFieldRect);
+    logger.log("Refreshed all visible rects");
+  });
+  function init() {
+    observer.init();
+    intersectionReady.value = true;
+    logger.log("IntersectionObserver initialized");
+  }
+  const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
+  const dragElementCache = /* @__PURE__ */ new Map();
+  const callback = function(mutationsList) {
+    for (const mutation of mutationsList) {
+      if (mutation.type === "childList") {
+        mutation.removedNodes.forEach((node) => {
+          const uuid = dragElementUuidMap.get(node);
+          dragElementUuidMap.delete(node);
+          if (uuid) {
+            dragElementCache.delete(uuid);
+          }
+        });
+      }
+    }
+  };
+  const mutationObserver = new MutationObserver(callback);
+  function getDragElement(block) {
+    const cached = dragElementCache.get(block.uuid);
+    if (cached && document.body.contains(cached)) {
+      return cached;
+    }
+    const el = block.element();
+    if (!el) {
+      return;
+    }
+    if (el.parentNode) {
+      mutationObserver.observe(el.parentNode, { childList: true });
+    }
+    dragElementUuidMap.set(el, block.uuid);
+    dragElementCache.set(block.uuid, el);
+    return el;
+  }
+  return {
+    findBlock,
+    getAllBlocks,
+    findClosestBlock,
+    getAllFields,
+    getDropElementMarkup,
+    getBlockField,
+    findField,
+    registerBlock,
+    unregisterBlock,
+    getAllDroppableFields,
+    findClosestEntityContext,
+    getBlockVisibilities,
+    getVisibleBlocks,
+    getVisibleFields,
+    registerField,
+    unregisterField,
+    getActiveProviderElement,
+    getBlockRects,
+    getBlockRect,
+    getFieldRect,
+    refreshBlockRect,
+    isReady: computed(() => mutationsReady.value && intersectionReady.value),
+    init,
+    getDragElement
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { DraggableItem, DropArea } from '#blokkli/types';
+type DropAreaProviderFunction = (items: DraggableItem[]) => DropArea[] | DropArea | undefined;
+export type DropAreaProvider = {
+    add: (fn: DropAreaProviderFunction) => void;
+    remove: (fn: DropAreaProviderFunction) => void;
+    getDropAreas: (items: DraggableItem[]) => DropArea[];
+};
+export default function (): DropAreaProvider;
+export {};

package/dist/runtime/helpers/dropAreaProvider.js

@@ -0,0 +1,22 @@
+import { falsy } from "./index.js";
+export default function() {
+  let functions = [];
+  const add = (fn) => {
+    functions.push(fn);
+  };
+  const remove = (fn) => {
+    functions = functions.filter((v) => v !== fn);
+  };
+  const getDropAreas = (items) => functions.flatMap((fn) => {
+    const v = fn(items);
+    if (v) {
+      return v;
+    }
+    return null;
+  }).filter(falsy);
+  return {
+    add,
+    remove,
+    getDropAreas
+  };
+}

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

@@ -0,0 +1,3 @@
+export declare function easeOutElastic(time: number, startIntensity?: number, elasticPeriod?: number): number;
+export declare function easeOutSine(x: number): number;
+export declare function easeOutQuad(x: number): number;

package/dist/runtime/helpers/easing.js

@@ -0,0 +1,16 @@
+export function easeOutElastic(time, startIntensity = 2, elasticPeriod = 0.5) {
+  if (time === 0 || time === 1) {
+    return time;
+  }
+  const modifiedTime = Math.pow(time, startIntensity);
+  const amplitudeAdjustment = elasticPeriod / (2 * Math.PI) * Math.asin(1);
+  return Math.pow(2, -10 * modifiedTime) * Math.sin(
+    (modifiedTime - amplitudeAdjustment) * (2 * Math.PI) / elasticPeriod
+  ) + 1;
+}
+export function easeOutSine(x) {
+  return Math.sin(x * Math.PI / 2);
+}
+export function easeOutQuad(x) {
+  return 1 - (1 - x) * (1 - x);
+}

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

@@ -0,0 +1,3 @@
+import type { EventbusEvents } from '#blokkli/types';
+export declare const eventBus: import("mitt").Emitter<EventbusEvents>;
+export declare const emitMessage: (message: string, type?: "success" | "error", additional?: string | Error | unknown) => void;

package/dist/runtime/helpers/eventBus.js

@@ -0,0 +1,5 @@
+import mitt from "mitt";
+export const eventBus = mitt();
+export const emitMessage = (message, type = "success", additional) => {
+  eventBus.emit("message", { type, message, additional });
+};

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

@@ -0,0 +1,23 @@
+import type { FeatureDefinition, AdapterMethods } from '#blokkli/types';
+import type { ValidFeatureKey } from '#blokkli-runtime/features';
+import { type ComputedRef } from '#imports';
+export type FeaturesProvider = {
+    features: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
+    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
+    unmount: (id: string) => void;
+};
+export default function (): {
+    features: ComputedRef<{
+        id: "artboard" | "clipboard" | "delete" | "duplicate" | "edit" | "exit" | "grid" | "help" | "history" | "multi-select" | "preview" | "publish" | "revert" | "search" | "selection" | "options" | "add-list" | "assistant" | "block-add-list" | "command-palette" | "comments" | "conversions" | "debug" | "dragging-overlay" | "edit-form" | "editable-field" | "editable-mask" | "entity-title" | "field-areas" | "fragments" | "import-existing" | "library" | "media-library" | "ownership" | "preview-grant" | "responsive-preview" | "settings" | "structure" | "theme" | "touch-action-bar" | "tour" | "transform" | "translations" | "validations" | "demo-feature";
+        label?: string | undefined;
+        icon: import("../../../playground/.nuxt/blokkli/icons").BlokkliIcon;
+        description?: string | undefined;
+        dependencies?: ("artboard" | "clipboard" | "delete" | "duplicate" | "edit" | "exit" | "grid" | "help" | "history" | "multi-select" | "preview" | "publish" | "revert" | "search" | "selection" | "options" | "add-list" | "assistant" | "block-add-list" | "command-palette" | "comments" | "conversions" | "debug" | "dragging-overlay" | "edit-form" | "editable-field" | "editable-mask" | "entity-title" | "field-areas" | "fragments" | "import-existing" | "library" | "media-library" | "ownership" | "preview-grant" | "responsive-preview" | "settings" | "structure" | "theme" | "touch-action-bar" | "tour" | "transform" | "translations" | "validations" | "demo-feature")[] | undefined;
+        viewports?: import("../constants").Viewport[] | undefined;
+        requiredAdapterMethods?: (keyof import("../adapter").BlokkliAdapter<any>)[] | undefined;
+        settings?: Record<string, import("#blokkli/types").FeatureDefinitionSetting> | undefined;
+        screenshot?: string | undefined;
+    }[]>;
+    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
+    unmount: (id: string) => void;
+};

package/dist/runtime/helpers/featuresProvider.js

@@ -0,0 +1,16 @@
+import { computed, ref } from "#imports";
+export default function() {
+  const mountedFeatures = ref([]);
+  const features = computed(() => mountedFeatures.value);
+  const unmount = (id) => {
+    mountedFeatures.value = mountedFeatures.value.filter((v) => v.id !== id);
+  };
+  const mount = (feature) => {
+    mountedFeatures.value.push(feature);
+  };
+  return {
+    features,
+    mount,
+    unmount
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { MutatedField, UpdateBlockOptionEvent } from '../types.js';
+type FrameEventBusEvents = {
+    selectItems: string[];
+    mutatedFields: MutatedField[];
+    focus: string;
+    updateOption: UpdateBlockOptionEvent;
+};
+export declare const frameEventBus: import("mitt").Emitter<FrameEventBusEvents>;
+export {};

package/dist/runtime/helpers/frameEventBus.js

@@ -0,0 +1,2 @@
+import mitt from "mitt";
+export const frameEventBus = mitt();

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

@@ -0,0 +1,87 @@
+import type { DraggableItem, Rectangle, DroppableEntityField, DraggableExistingBlock, EntityContext, Coord } from '#blokkli/types';
+import type { RGB } from '#blokkli/types/theme';
+/**
+ * Type check for falsy values.
+ *
+ * Used as the callback for array.filter, e.g.
+ * items.filter(falsy)
+ */
+export declare function falsy<T>(value: T): value is NonNullable<T>;
+/**
+ * Maps a HTML element that is draggable to a draggable item data object.
+ */
+export declare function buildDraggableItem(element: Element | EventTarget): DraggableItem | undefined;
+export declare function findElement(uuid: string): HTMLElement | undefined;
+export declare function onlyUnique(value: string, index: number, self: Array<string>): boolean;
+/**
+ * Convert a date to a relative time string, such as
+ * "a minute ago", "in 2 hours", "yesterday", "3 months ago", etc.
+ * using Intl.RelativeTimeFormat
+ */
+export declare function getRelativeTimeString(date: Date | number, lang?: string): string;
+export declare function modulo(n: number, m: number): number;
+export declare function getBounds(rects: Rectangle[]): Rectangle | undefined;
+export declare function intersects(a: Rectangle, b: Rectangle): boolean;
+export declare function isInsideRect(x: number, y: number, rect: Rectangle): boolean;
+/**
+ * Calculate the intersection amount of two rectangles as a value from 0 to 1.
+ */
+export declare function calculateIntersection(rectA: Rectangle, rectB: Rectangle): number;
+/**
+ * Return the closest rectangle.
+ */
+export declare function findClosestRectangle<T extends Rectangle>(x: number, y: number, rects: T[]): T;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToRectangle(x: number, y: number, rect: Rectangle): number;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToClosestRectangleEdge(x: number, y: number, rect: Rectangle): number;
+export declare function getDistance(a: Coord, b: Coord): number;
+export declare const parseColorString: (color: string) => RGB | undefined;
+/**
+ * Determine the visual background color of an element.
+ *
+ * If the element defines a background color itself, it will be returned.
+ * If the element has no explicit background color, we iterate over the
+ * ancestors until we find an element with a background color. If no background
+ * color can be determined, a transparent color is returned.
+ */
+export declare const realBackgroundColor: (el: HTMLElement | SVGElement | null) => string;
+export declare const lerp: (s: number, e: number, t: number) => number;
+/**
+ * Calculate the ideal X coordinate for placing a rectangle.
+ *
+ * Coordinates are assumed to be 0,0 for top-left. The method returns a number that can be used to set the
+ */
+export declare const calculateCenterPosition: (blockingRects: Rectangle[], viewport: Rectangle, widthToPlace: number) => number;
+export declare function getContrastRatio(color1: RGB, color2: RGB): number;
+export declare function findHighestContrastColor(colors: RGB[], backgroundColor?: RGB): RGB;
+export declare const rgbaToString: (color: RGB, alpha?: number) => string;
+export declare const getNumericStyleValue: (str: string, fallback?: number) => number;
+/**
+ * Position the given rectToPlace so that it doesn't overlap with any of the blockingRects.
+ */
+export declare function findIdealRectPosition(blockingRects: Rectangle[], rectToPlace: Rectangle, viewport: Rectangle, maxOverlap?: number): {
+    x: number;
+    y: number;
+};
+export declare const findClosestBlock: (el: Element | EventTarget) => DraggableExistingBlock | undefined;
+/**
+ * Find the closest entity context from a BlokkliProvider.
+ */
+export declare const findClosestEntityContext: (el: HTMLElement) => EntityContext | undefined;
+export declare const findParentContext: (el: HTMLElement) => EntityContext | DraggableExistingBlock | undefined;
+/**
+ * Maps a HTMLElement to a DroppableEntityField.
+ */
+export declare const mapDroppableField: (el: Element) => DroppableEntityField;
+export declare const originatesFromEditable: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
+export declare const getOriginatingDroppableElement: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
+export declare const originatesFromTextInput: (e: Event) => boolean;
+export declare function getFieldKey(uuid: string, fieldName: string): string;
+export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;
+export declare function toShaderColor(rgba: RGB): RGB;
+export declare function generateUUID(): string;