@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -0,0 +1,76 @@
+import type { MutationResponseLike } from '#blokkli/editor/adapter';
+import type { FieldListItem } from '#blokkli/types';
+import type { PublishOptions } from '../features/publish/types.js';
+export type MutatedField = {
+    name: string;
+    entityType: string;
+    entityUuid: string;
+    list: FieldListItem[];
+};
+export type EditEntity = {
+    label?: string;
+    status?: boolean;
+    bundleLabel?: string;
+};
+export interface Language {
+    id: string;
+    name: string;
+}
+export interface EntityTranslation {
+    id: string;
+    url: string;
+    editUrl?: string;
+    exists: boolean;
+    status: boolean;
+}
+export interface TranslationState {
+    isTranslatable?: boolean | null;
+    sourceLanguage?: string | null;
+    availableLanguages?: Language[];
+    translations?: EntityTranslation[];
+}
+export interface MutationItem {
+    timestamp?: string;
+    pluginId?: string;
+    plugin?: {
+        label?: string;
+        affectedItemUuid?: string;
+    };
+    enabled?: boolean;
+}
+export interface Validation {
+    message: string;
+    code?: string;
+    propertyPath?: string;
+    entityType?: string;
+    entityUuid?: string;
+}
+export interface MappedState {
+    currentIndex: number;
+    mutations: MutationItem[];
+    currentUserIsOwner: boolean;
+    ownerName: string;
+    mutatedState?: {
+        mutatedOptions?: any;
+        mutatedHostOptions?: Record<string, string>;
+        fields?: MutatedField[];
+        violations?: Validation[];
+    };
+    publishOptions: PublishOptions;
+    entity: EditEntity;
+    mutatedEntity?: any;
+    translationState: TranslationState;
+    previewUrl?: string;
+}
+export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string | false, successMessage?: string) => Promise<boolean>;
+export type MutatedOptions = {
+    [uuid: string]: {
+        [key: string]: string;
+    };
+};
+export type MutatedItemProps = {
+    [uuid: string]: {
+        [key: string]: string;
+    } | undefined;
+};
+export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';

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

@@ -0,0 +1,29 @@
+import type { RGB } from './../../../global/types/theme.js';
+export type DraggableStyle = {
+    /**
+     * The border radius for every corner, starting from top left.
+     */
+    radius: [number, number, number, number];
+    /**
+     * The smallest radius of the element.
+     */
+    radiusMin: number;
+    /**
+     * The border radius as a CSS property value.
+     */
+    radiusString: string;
+    /**
+     * The contrast color for highlighting.
+     */
+    contrastColor: string;
+    /**
+     * The translucent contrast color for highlighting.
+     */
+    contrastColorTranslucent: string;
+    /**
+     * The color to make a text (mostly) readable when put on top of the element.
+     */
+    textColor: string;
+    contrastColorRGB: RGB;
+    isInverted: boolean;
+};

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

@@ -0,0 +1,44 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+export type Message = {
+    type: 'success' | 'error' | 'warning';
+    message: string;
+    additional?: string | Error | unknown;
+    replace?: boolean;
+};
+export type SidebarRegion = 'left' | 'right';
+export type GlobalUiDialog = {
+    id: string;
+    alignment: 'left' | 'right' | 'center';
+    confirmClose?: boolean;
+};
+export type ContextMenuRule = {
+    type: 'rule';
+};
+export type ContextMenuButton = {
+    type: 'button';
+    label: string;
+    icon: BlokkliIcon;
+    callback: () => void;
+};
+export type ContextMenu = ContextMenuButton | ContextMenuRule;
+export type KeyboardShortcut = {
+    group?: string;
+    meta?: boolean;
+    shift?: boolean;
+    code: string;
+    label: string;
+};
+export type DropArea = {
+    id: string;
+    label: string;
+    icon?: BlokkliIcon;
+    element: HTMLElement;
+    onDrop: () => Promise<any> | any;
+};
+export type InteractionMode = 'mouse' | 'touch';
+export type BlockIndicator = {
+    id: string;
+    uuid: string;
+    element: HTMLElement;
+    position: 'left' | 'right';
+};

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

@@ -1,5 +1,3 @@
-import type { Rectangle, Coord, Size } from '#blokkli/types';
-import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
  *
@@ -8,73 +6,4 @@ import type { RGB } from '#blokkli/types/theme';
  */
 export declare function falsy<T>(value: T): value is NonNullable<T>;
 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;
-/**
- * Subtracts a rectangle from a viewport and returns the remaining area as rectangles.
- * The viewport is assumed to have x=0 and y=0.
- *
- * @param viewport - The size of the viewport to subtract from
- * @param rect - The rectangle to subtract
- * @returns An array of 0 to 4 rectangles representing the area outside of rect
- */
-export declare function subtractRectFromViewport(viewport: Size, rect: Rectangle): Rectangle[];
-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 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;
-export declare function asValidNumber(v: unknown, defaultValue: number): number;

package/dist/runtime/helpers/index.js

@@ -1,335 +1,9 @@
-import { easeOutSine } from "./easing.js";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
 export function onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
-export function getRelativeTimeString(date, lang = navigator.language) {
-  const timeMs = typeof date === "number" ? date : date.getTime();
-  const deltaSeconds = Math.round((timeMs - Date.now()) / 1e3);
-  const cutoffs = [
-    60,
-    3600,
-    86400,
-    86400 * 7,
-    86400 * 30,
-    86400 * 365,
-    Infinity
-  ];
-  const units = [
-    "second",
-    "minute",
-    "hour",
-    "day",
-    "week",
-    "month",
-    "year"
-  ];
-  const unitIndex = cutoffs.findIndex(
-    (cutoff) => cutoff > Math.abs(deltaSeconds)
-  );
-  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
-  const rtf = new Intl.RelativeTimeFormat(lang, { numeric: "auto" });
-  return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex]);
-}
-export function modulo(n, m) {
-  return (n % m + m) % m;
-}
-export function getBounds(rects) {
-  if (!rects.length) {
-    return;
-  }
-  const firstRect = rects[0];
-  let minX = firstRect.x;
-  let minY = firstRect.y;
-  let maxX = minX + firstRect.width;
-  let maxY = minY + firstRect.height;
-  for (const rect of rects.slice(1)) {
-    minX = Math.min(minX, rect.x);
-    minY = Math.min(minY, rect.y);
-    maxX = Math.max(maxX, rect.x + rect.width);
-    maxY = Math.max(maxY, rect.y + rect.height);
-  }
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  };
-}
-export function intersects(a, b) {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}
-export function isInsideRect(x, y, rect) {
-  return x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;
-}
-export function calculateIntersection(rectA, rectB) {
-  if (!intersects(rectA, rectB)) {
-    return 0;
-  }
-  const xOverlap = Math.max(
-    0,
-    Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)
-  );
-  const yOverlap = Math.max(
-    0,
-    Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y)
-  );
-  const intersectionArea = xOverlap * yOverlap;
-  const rectAArea = rectA.width * rectA.height;
-  return intersectionArea / rectAArea;
-}
-export function findClosestRectangle(x, y, rects) {
-  let closestRect = rects[0];
-  if (!closestRect) {
-    throw new Error("Need at least one rect.");
-  }
-  let minDistance = distanceToClosestRectangleEdge(x, y, closestRect);
-  for (let i = 1; i < rects.length; i++) {
-    const rect = rects[i];
-    const distance = distanceToClosestRectangleEdge(x, y, rect);
-    if (distance < minDistance) {
-      closestRect = rect;
-      minDistance = distance;
-    }
-  }
-  return closestRect;
-}
-export function distanceToRectangle(x, y, rect) {
-  const minX = rect.x;
-  const minY = rect.y;
-  const maxX = rect.x + rect.width;
-  const maxY = rect.y + rect.height;
-  const dx = Math.max(minX - x, 0, x - maxX);
-  const dy = Math.max(minY - y, 0, y - maxY);
-  return Math.sqrt(dx * dx + dy * dy);
-}
-export function distanceToClosestRectangleEdge(x, y, rect) {
-  if (isInsideRect(x, y, rect)) {
-    return 0;
-  }
-  const minX = rect.x;
-  const minY = rect.y;
-  const maxX = rect.x + rect.width;
-  const maxY = rect.y + rect.height;
-  const dx = Math.max(minX - x, 0, x - maxX);
-  const dy = Math.max(minY - y, 0, y - maxY);
-  return Math.sqrt(dx * dx + dy * dy);
-}
-export function subtractRectFromViewport(viewport, rect) {
-  const viewportLeft = 0;
-  const viewportTop = 0;
-  const viewportRight = viewport.width;
-  const viewportBottom = viewport.height;
-  const intersectLeft = Math.max(viewportLeft, rect.x);
-  const intersectTop = Math.max(viewportTop, rect.y);
-  const intersectRight = Math.min(viewportRight, rect.x + rect.width);
-  const intersectBottom = Math.min(viewportBottom, rect.y + rect.height);
-  if (intersectLeft >= intersectRight || intersectTop >= intersectBottom) {
-    return [
-      {
-        x: 0,
-        y: 0,
-        width: viewport.width,
-        height: viewport.height
-      }
-    ];
-  }
-  if (intersectLeft <= viewportLeft && intersectTop <= viewportTop && intersectRight >= viewportRight && intersectBottom >= viewportBottom) {
-    return [];
-  }
-  const result = [];
-  if (intersectTop > viewportTop) {
-    result.push({
-      x: viewportLeft,
-      y: viewportTop,
-      width: viewport.width,
-      height: intersectTop - viewportTop
-    });
-  }
-  if (intersectBottom < viewportBottom) {
-    result.push({
-      x: viewportLeft,
-      y: intersectBottom,
-      width: viewport.width,
-      height: viewportBottom - intersectBottom
-    });
-  }
-  if (intersectLeft > viewportLeft) {
-    result.push({
-      x: viewportLeft,
-      y: intersectTop,
-      width: intersectLeft - viewportLeft,
-      height: intersectBottom - intersectTop
-    });
-  }
-  if (intersectRight < viewportRight) {
-    result.push({
-      x: intersectRight,
-      y: intersectTop,
-      width: viewportRight - intersectRight,
-      height: intersectBottom - intersectTop
-    });
-  }
-  return result;
-}
-export function getDistance(a, b) {
-  const dx = a.x - b.x;
-  const dy = a.y - b.y;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-export const parseColorString = (color) => {
-  const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(0|1|0?\.\d+))?\)$/;
-  const match = color.match(rgbaRegex);
-  if (!match) {
-    return;
-  }
-  const r = Number.parseInt(match[1]);
-  const g = Number.parseInt(match[2]);
-  const b = Number.parseInt(match[3]);
-  const a = match[4] !== void 0 ? Number.parseFloat(match[4]) : 1;
-  if ([r, g, b, a].some((val) => Number.isNaN(val))) {
-    throw new Error("Invalid color values");
-  }
-  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
-    return;
-  }
-  return [r, g, b];
-};
-export const realBackgroundColor = (el) => {
-  const transparent = "rgba(0, 0, 0, 0)";
-  if (!el) return transparent;
-  const bg = getComputedStyle(el).backgroundColor;
-  if (bg === transparent || bg === "transparent") {
-    return realBackgroundColor(el.parentElement);
-  }
-  return bg;
-};
-export const lerp = (s, e, t) => s * (1 - t) + e * t;
-export const calculateCenterPosition = (blockingRects, viewport, widthToPlace) => {
-  const viewportCenterX = (viewport.x + viewport.width) / 2;
-  const blockingThreshold = viewport.width / 7;
-  const x = blockingRects.reduce((acc, rect) => {
-    if (rect.x < viewportCenterX && viewportCenterX - rect.x > blockingThreshold && rect.x + rect.width > acc) {
-      return rect.x + rect.width;
-    }
-    return acc;
-  }, viewport.x);
-  const width = blockingRects.reduce((acc, rect) => {
-    if (rect.x > viewportCenterX && rect.x - viewportCenterX > blockingThreshold && rect.x < acc) {
-      return rect.x;
-    }
-    return acc;
-  }, viewport.width + viewport.x);
-  return (x + width) / 2 - widthToPlace / 2;
-};
-export function getContrastRatio(color1, color2) {
-  const luminance1 = getLuminance(color1);
-  const luminance2 = getLuminance(color2);
-  const lighter = Math.max(luminance1, luminance2);
-  const darker = Math.min(luminance1, luminance2);
-  return (lighter + 0.05) / (darker + 0.05);
-}
-function getLuminance(color) {
-  const [r, g, b] = color.map((val) => {
-    val /= 255;
-    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-export function findHighestContrastColor(colors, backgroundColor = [255, 255, 255]) {
-  let maxContrast = 0;
-  let maxContrastColor = colors[0];
-  for (const color of colors) {
-    const contrast = getContrastRatio(color, backgroundColor);
-    if (contrast > maxContrast) {
-      maxContrast = contrast;
-      maxContrastColor = color;
-    }
-  }
-  return maxContrastColor;
-}
-export const rgbaToString = (color, alpha = 1) => `rgba(${[...color, alpha].join(", ")})`;
-export const getNumericStyleValue = (str, fallback = 0) => {
-  const v = str.replace("px", "");
-  const num = Number.parseFloat(v);
-  if (Number.isNaN(num) || num === 0) {
-    return fallback;
-  }
-  return num;
-};
-export function findIdealRectPosition(blockingRects, rectToPlace, viewport, maxOverlap = 60) {
-  let targetX = rectToPlace.x;
-  for (const blockingRect of blockingRects) {
-    if (intersects(rectToPlace, blockingRect)) {
-      const a = Math.abs(rectToPlace.y + rectToPlace.height - blockingRect.y);
-      const b = Math.abs(blockingRect.y + blockingRect.height - rectToPlace.y);
-      const verticalOverlap = Math.min(a, b);
-      const smoothingFactor = easeOutSine(
-        Math.min(verticalOverlap, maxOverlap) / maxOverlap
-      );
-      if (rectToPlace.x + rectToPlace.width / 2 > blockingRect.x + blockingRect.width / 2) {
-        targetX = blockingRect.x + blockingRect.width;
-      } else {
-        targetX = blockingRect.x - rectToPlace.width;
-      }
-      targetX = rectToPlace.x + smoothingFactor * (targetX - rectToPlace.x);
-      break;
-    }
-  }
-  return {
-    x: Math.min(
-      Math.max(targetX, viewport.x),
-      viewport.x + viewport.width - rectToPlace.width
-    ),
-    y: Math.min(
-      Math.max(viewport.y, rectToPlace.y),
-      viewport.height + viewport.y - rectToPlace.height
-    )
-  };
-}
-export const originatesFromTextInput = (e) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
 export function getFieldKey(uuid, fieldName) {
   return uuid + ":" + fieldName;
 }
-export function getInteractionCoordinates(e) {
-  if ("touches" in e) {
-    const touch = e.touches[0] || e.changedTouches[0];
-    return {
-      x: touch.clientX,
-      y: touch.clientY
-    };
-  }
-  return {
-    x: e.clientX,
-    y: e.clientY
-  };
-}
-export function toShaderColor(rgba) {
-  return rgba.map((v) => v / 255);
-}
-export function generateUUID() {
-  try {
-    return crypto.randomUUID();
-  } catch {
-  }
-  let d = (/* @__PURE__ */ new Date()).getTime(), d2 = typeof performance !== "undefined" && performance.now && performance.now() * 1e3 || 0;
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    let r = Math.random() * 16;
-    if (d > 0) {
-      r = (d + r) % 16 | 0;
-      d = Math.floor(d / 16);
-    } else {
-      r = (d2 + r) % 16 | 0;
-      d2 = Math.floor(d2 / 16);
-    }
-    return (c == "x" ? r : r & 7 | 8).toString(16);
-  });
-}
-export function asValidNumber(v, defaultValue) {
-  if (typeof v === "number" && !Number.isNaN(v)) {
-    return v;
-  }
-  return defaultValue;
-}

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

@@ -0,0 +1,127 @@
+import type { InjectionKey, ComputedRef, Component } from 'vue';
+import type { EntityContext } from './../types/index.js';
+import type { DebugLogger } from '#blokkli/editor/providers/debug';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
+import type DraggableListComponent from '../editor/components/DraggableList.vue.js';
+import type { BlokkliApp } from '#blokkli/editor/types/app';
+import type { MutatedField, MutatedItemProps, MutatedOptions } from '#blokkli/editor/types/state';
+import type { DefineBlokkliContext } from '#blokkli/types/definitions';
+import type { InjectedBlokkliItem } from '#blokkli/types/field';
+import type { Eventbus } from '#blokkli/editor/events';
+import type { DomProvider } from '#blokkli/editor/providers/dom';
+import type { DefinitionProvider } from '#blokkli/editor/providers/definition';
+import type { BlokkliProviderEntityContext } from '#blokkli/types/provider';
+type ItemEditContext = {
+    eventBus: Eventbus;
+    mutatedOptions: MutatedOptions;
+    dom?: DomProvider;
+    definitions: DefinitionProvider;
+    useBlockRegistration?: (dom: DomProvider, uuid: string) => void;
+};
+export declare const INJECT_APP: InjectionKey<BlokkliApp>;
+/**
+ * The reduced edit context.
+ */
+export declare const INJECT_EDIT_CONTEXT: InjectionKey<ItemEditContext>;
+/**
+ * Whether we're currently editing (within the editor).
+ */
+export declare const INJECT_IS_EDITING: InjectionKey<boolean>;
+/**
+ * Whether the block is rendered within another block (nested).
+ */
+export declare const INJECT_IS_NESTED: InjectionKey<boolean>;
+/**
+ * The current nesting level, starting at 0.
+ */
+export declare const INJECT_NESTING_LEVEL: InjectionKey<number>;
+/**
+ * Whether we're currently in preview mode.
+ */
+export declare const INJECT_IS_PREVIEW: InjectionKey<ComputedRef<boolean>>;
+/**
+ * Whether the block is rendered inside a from_library block.
+ */
+export declare const INJECT_IS_IN_REUSABLE: InjectionKey<boolean>;
+/**
+ * The options provided by the from_library block.
+ */
+export declare const INJECT_REUSABLE_OPTIONS: InjectionKey<ComputedRef<Record<string, string | number | boolean | string[] | undefined>>>;
+/**
+ * The UUID of the parent from_library block.
+ */
+export declare const INJECT_REUSABLE_UUID: InjectionKey<string>;
+/**
+ * The field list type of the parent field.
+ */
+export declare const INJECT_FIELD_LIST_TYPE: InjectionKey<ComputedRef<ValidFieldListTypes>>;
+/**
+ * The field list items of the containing block.
+ */
+export declare const INJECT_FIELD_LIST_BLOCKS: InjectionKey<ComputedRef<FieldListItemTyped[]>>;
+/**
+ * Whether the parent field is rendering in proxy mode.
+ */
+export declare const INJECT_FIELD_PROXY_MODE: InjectionKey<boolean>;
+/**
+ * Whether the parent field is rendering in proxy mode.
+ *
+ * @todo: This is probably the ssame as INJECT_FIELD_PROXY_MODE.
+ */
+export declare const INJECT_FIELD_USES_PROXY: InjectionKey<boolean>;
+/**
+ * Whether the global proxy mode setting is enabled in the editor.
+ */
+export declare const INJECT_GLOBAL_PROXY_MODE: InjectionKey<ComputedRef<boolean>>;
+/**
+ * The blocks of the root field.
+ */
+export declare const INJECT_PROVIDER_BLOCKS: InjectionKey<ComputedRef<FieldListItemTyped[]>>;
+/**
+ * The item data provided by BlokkliItem.
+ */
+export declare const INJECT_BLOCK_ITEM: InjectionKey<ComputedRef<InjectedBlokkliItem>>;
+/**
+ * The mutated fields map provided in the editor.
+ *
+ * This is a reactive property with an objected keyed by field list key.
+ */
+export declare const INJECT_MUTATED_FIELDS_MAP: InjectionKey<Record<string, MutatedField | undefined>>;
+/**
+ * The current "entity context".
+ *
+ * For blocks rendered directly within the first BlokkliField inside BlokkliProvider, the entity is the provider.
+ * For nested blocks, the entity context will be the block that contains nested blocks.
+ */
+export declare const INJECT_ENTITY_CONTEXT: InjectionKey<EntityContext>;
+/**
+ * The entity context of the provider.
+ */
+export declare const INJECT_PROVIDER_CONTEXT: InjectionKey<ComputedRef<BlokkliProviderEntityContext>>;
+/**
+ * The defineBlokkli context of the "blokkli_fragment" block.
+ */
+export declare const INJECT_FRAGMENT_CONTEXT: InjectionKey<DefineBlokkliContext<any, any>>;
+/**
+ * The unique key of the current provider.
+ */
+export declare const INJECT_PROVIDER_KEY: InjectionKey<string>;
+/**
+ * The DraggableList component used during editing.
+ */
+export declare const INJECT_EDIT_FIELD_LIST_COMPONENT: InjectionKey<typeof DraggableListComponent>;
+/**
+ * The reactive item props override object, used to override props values (during editing).
+ */
+export declare const INJECT_ITEM_PROPS_OVERRIDE: InjectionKey<MutatedItemProps>;
+/**
+ * The debug logger instance.
+ */
+export declare const INJECT_EDIT_LOGGER: InjectionKey<DebugLogger>;
+/**
+ * An object containing block item component keys as properties and the Vue component as values.
+ *
+ * Used to prevent async loading of components in the editor.
+ */
+export declare const INJECT_ALL_COMPONENTS_CHUNK: InjectionKey<Record<string, Component>>;
+export {};