@blokkli/editor 1.0.0

package/dist/runtime/helpers/themeProvider.js

@@ -0,0 +1,124 @@
+import { theme, themes } from "#blokkli/config";
+import { ref, onMounted, onBeforeUnmount } from "#imports";
+import { rgbaToString } from "./index.js";
+import { DragStyle } from "./DragStyle/index.js";
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+export default function() {
+  const originalBrowserThemeColor = ref("");
+  const THEME_COLOR = "black";
+  const accent = ref(theme.accent);
+  const mono = ref(theme.mono);
+  const teal = ref(theme.teal);
+  const yellow = ref(theme.yellow);
+  const red = ref(theme.red);
+  const lime = ref(theme.lime);
+  const themeMap = {
+    accent,
+    mono,
+    teal,
+    yellow,
+    red,
+    lime
+  };
+  function getColor(color, key) {
+    return themeMap[color].value[key];
+  }
+  function getColorString(color, key, alpha = 1) {
+    const rgb = getColor(color, key);
+    return rgbaToString(rgb, alpha);
+  }
+  const customTheme = ref(theme);
+  const setColor = (group, shade, value) => {
+    if (group === "accent") {
+      accent.value[shade] = value;
+    } else if (group === "mono") {
+      mono.value[shade] = value;
+    } else if (group === "teal") {
+      teal.value[shade] = value;
+    } else if (group === "red") {
+      red.value[shade] = value;
+    } else if (group === "yellow") {
+      yellow.value[shade] = value;
+    } else if (group === "lime") {
+      lime.value[shade] = value;
+    }
+    const root = document.querySelector(":root");
+    if (root instanceof HTMLElement) {
+      root.style.setProperty(
+        `--bk-theme-${group}-${shade}`,
+        `${value[0]} ${value[1]} ${value[2]}`
+      );
+    }
+  };
+  const setColorsFromTheme = (v) => {
+    Object.entries(v).forEach(([group, colors]) => {
+      Object.entries(colors).forEach(([shade, value]) => {
+        setColor(group, shade, value);
+      });
+    });
+  };
+  const applyTheme = (name) => {
+    customTheme.value = JSON.parse(
+      JSON.stringify({
+        accent: accent.value,
+        mono: mono.value,
+        teal: teal.value,
+        yellow: yellow.value,
+        red: red.value,
+        lime: lime.value
+      })
+    );
+    if (name === "custom") {
+      return setColorsFromTheme(customTheme.value);
+    }
+    const themeToApply = themes[name];
+    if (themeToApply) {
+      setColorsFromTheme(themeToApply);
+    }
+  };
+  onMounted(() => {
+    const el = document.head.querySelectorAll('[name="theme-color"]');
+    if (el instanceof HTMLMetaElement) {
+      originalBrowserThemeColor.value = el.content;
+      el.content = THEME_COLOR;
+    } else {
+      const meta = document.createElement("meta");
+      meta.name = "theme-color";
+      meta.content = THEME_COLOR;
+      document.getElementsByTagName("head")[0].appendChild(meta);
+    }
+  });
+  onBeforeUnmount(() => {
+    const el = document.head.querySelectorAll('[name="theme-color"]');
+    if (el instanceof HTMLMetaElement) {
+      if (originalBrowserThemeColor.value) {
+        el.content = originalBrowserThemeColor.value;
+      } else {
+        el.remove();
+      }
+    }
+  });
+  const dragStyle = new DragStyle();
+  function invalidateCachedStyle(el) {
+    dragStyle.invalidateStyle(el);
+  }
+  onBlokkliEvent("state:reloaded", function() {
+    dragStyle.reset();
+  });
+  return {
+    accent,
+    mono,
+    teal,
+    yellow,
+    red,
+    lime,
+    getDraggableStyle: function(el) {
+      return dragStyle.getStyle(el, theme.accent[700]);
+    },
+    invalidateCachedStyle,
+    setColor,
+    applyTheme,
+    getColor,
+    getColorString
+  };
+}

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

@@ -0,0 +1,11 @@
+import type { TourItem } from '#blokkli/types';
+import { type Ref } from '#imports';
+type TourProviderFunction = () => TourItem[] | TourItem | undefined;
+export type TourProvider = {
+    add: (fn: TourProviderFunction) => void;
+    remove: (fn: TourProviderFunction) => void;
+    getTourItems: () => TourItem[];
+    isTouring: Ref<boolean>;
+};
+export default function (): TourProvider;
+export {};

package/dist/runtime/helpers/tourProvider.js

@@ -0,0 +1,19 @@
+import { falsy } from "./index.js";
+import { ref } from "#imports";
+export default function() {
+  let functions = [];
+  const isTouring = ref(false);
+  const add = (fn) => {
+    functions.push(fn);
+  };
+  const remove = (fn) => {
+    functions = functions.filter((v) => v !== fn);
+  };
+  const getTourItems = () => functions.flatMap((fn) => fn()).filter(falsy);
+  return {
+    add,
+    remove,
+    getTourItems,
+    isTouring
+  };
+}

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

@@ -0,0 +1,2 @@
+import type { TransformPlugin } from '../types.js';
+export declare function filterTransforms(plugins: TransformPlugin[], selectedItems: any[], selectedBundles: string[], allowedBundles: string[]): TransformPlugin[];

package/dist/runtime/helpers/transform.js

@@ -0,0 +1,17 @@
+export function filterTransforms(plugins, selectedItems, selectedBundles, allowedBundles) {
+  return plugins.filter((plugin) => {
+    if (selectedItems.length < plugin.min) {
+      return false;
+    }
+    if (plugin.max !== -1 && selectedItems.length > plugin.max) {
+      return false;
+    }
+    const allAllowedInList = plugin.targetBundles.every(
+      (bundle) => allowedBundles.includes(bundle)
+    );
+    if (!allAllowedInList) {
+      return false;
+    }
+    return selectedBundles.every((bundle) => plugin.bundles.includes(bundle));
+  });
+}

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

@@ -0,0 +1,36 @@
+import type { ComputedRef } from 'vue';
+import type { FieldConfig, BlockBundleDefinition, EditableFieldConfig, BlockDefinitionInput, BlockDefinitionOptionsInput, DroppableFieldConfig, DraggableExistingBlock, EntityContext } from '../types.js';
+import type { AdapterContext, BlokkliAdapter } from '../adapter.js';
+import type { SelectionProvider } from './selectionProvider.js';
+export type BlokkliBlockType = BlockBundleDefinition & {
+    definition: BlockDefinitionInput<BlockDefinitionOptionsInput, any[]> | undefined;
+};
+interface MappableConfig {
+    entityType: string;
+    entityBundle: string;
+    name: string;
+}
+declare class ConfigMap<T extends MappableConfig> {
+    private configs;
+    private mapEntityType;
+    private mapEntityTypeBundle;
+    private mapEntityTypeBundleName;
+    constructor(items: T[]);
+    forEntityType(entityType: string): T[];
+    forEntityTypeAndBundle(entityType: string, entityBundle: string): T[];
+    forName(entityType: string, entityBundle: string, name: string): T | undefined;
+    all(): T[];
+}
+export type BlockDefinitionProvider = {
+    itemBundlesWithNested: string[];
+    allowedTypesInList: ComputedRef<string[]>;
+    generallyAvailableBundles: BlockBundleDefinition[];
+    getBlockBundleDefinition: (bundle: string) => BlockBundleDefinition | undefined;
+    getFieldConfig: (entityType: string, entityBundle: string, fieldName: string) => FieldConfig | undefined;
+    fieldConfig: ConfigMap<FieldConfig>;
+    editableFieldConfig: ConfigMap<EditableFieldConfig>;
+    droppableFieldConfig: ConfigMap<DroppableFieldConfig>;
+    getDroppableFieldConfig: (fieldName: string, host: DraggableExistingBlock | EntityContext) => DroppableFieldConfig;
+};
+export default function (adapter: BlokkliAdapter<any>, selection: SelectionProvider, context: ComputedRef<AdapterContext>): Promise<BlockDefinitionProvider>;
+export {};

package/dist/runtime/helpers/typesProvider.js

@@ -0,0 +1,138 @@
+import { eventBus } from "#blokkli/helpers/eventBus";
+import { useRuntimeConfig, computed, watch } from "#imports";
+import { onlyUnique } from "./index.js";
+class ConfigMap {
+  configs = [];
+  mapEntityType = {};
+  mapEntityTypeBundle = {};
+  mapEntityTypeBundleName = {};
+  constructor(items) {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      this.configs.push(item);
+      if (!this.mapEntityType[item.entityType]) {
+        this.mapEntityType[item.entityType] = [];
+      }
+      this.mapEntityType[item.entityType].push(item);
+      if (!this.mapEntityTypeBundle[item.entityType]) {
+        this.mapEntityTypeBundle[item.entityType] = {};
+      }
+      if (!this.mapEntityTypeBundle[item.entityType][item.entityBundle]) {
+        this.mapEntityTypeBundle[item.entityType][item.entityBundle] = [];
+      }
+      this.mapEntityTypeBundle[item.entityType][item.entityBundle].push(item);
+      if (!this.mapEntityTypeBundleName[item.entityType]) {
+        this.mapEntityTypeBundleName[item.entityType] = {};
+      }
+      if (!this.mapEntityTypeBundleName[item.entityType][item.entityBundle]) {
+        this.mapEntityTypeBundleName[item.entityType][item.entityBundle] = {};
+      }
+      this.mapEntityTypeBundleName[item.entityType][item.entityBundle][item.name] = item;
+    }
+  }
+  forEntityType(entityType) {
+    return this.mapEntityType[entityType] || [];
+  }
+  forEntityTypeAndBundle(entityType, entityBundle) {
+    return this.mapEntityTypeBundle[entityType]?.[entityBundle] || [];
+  }
+  forName(entityType, entityBundle, name) {
+    return this.mapEntityTypeBundleName[entityType]?.[entityBundle]?.[name];
+  }
+  all() {
+    return this.configs;
+  }
+}
+export default async function(adapter, selection, context) {
+  const bundleDefinitions = await adapter.getAllBundles();
+  const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
+  const fieldConfig = new ConfigMap(await adapter.getFieldConfig());
+  const editableFieldConfigData = adapter.getEditableFieldConfig ? await adapter.getEditableFieldConfig() : [];
+  const editableFieldConfig = new ConfigMap(editableFieldConfigData);
+  const droppableFieldConfigData = adapter.getDroppableFieldConfig ? await adapter.getDroppableFieldConfig() : [];
+  const droppableFieldConfig = new ConfigMap(droppableFieldConfigData);
+  const allowedTypesInList = computed(() => {
+    if (!selection.blocks.value.length) {
+      return [];
+    }
+    let hostType = "";
+    let hostBundle = "";
+    let fieldName = "";
+    for (let i = 0; i < selection.blocks.value.length; i++) {
+      const block = selection.blocks.value[i];
+      if (i !== 0 && (hostType !== block.hostType || hostBundle !== block.hostBundle || fieldName !== block.hostFieldName)) {
+        return [];
+      }
+      hostType = block.hostType;
+      hostBundle = block.hostBundle;
+      fieldName = block.hostFieldName;
+    }
+    return fieldConfig.forName(hostType, hostBundle, fieldName)?.allowedBundles || [];
+  });
+  watch(selection.blocks, () => {
+    if (selection.blocks.value.length !== 1) {
+      return;
+    }
+    const item = selection.blocks.value[0];
+    const hasNested = itemBundlesWithNested.includes(item.itemBundle);
+    if (hasNested) {
+      const nestedFields = fieldConfig.forEntityTypeAndBundle(itemEntityType, item.itemBundle).map((v) => v.name) || [];
+      if (nestedFields.length === 1) {
+        eventBus.emit("setActiveFieldKey", `${item.uuid}:${nestedFields[0]}`);
+        return;
+      }
+    }
+    eventBus.emit("setActiveFieldKey", `${item.hostUuid}:${item.hostFieldName}`);
+  });
+  const itemBundlesWithNested = fieldConfig.forEntityType(itemEntityType).map((v) => v.entityBundle) || [];
+  const typeMap = bundleDefinitions.reduce((acc, type) => {
+    acc[type.id] = type;
+    return acc;
+  }, {});
+  function getBlockBundleDefinition(bundle) {
+    return typeMap[bundle];
+  }
+  function getFieldConfig(entityType, entityBundle, fieldName) {
+    return fieldConfig.forName(entityType, entityBundle, fieldName);
+  }
+  function getDroppableFieldConfig(fieldName, host) {
+    const entityType = "entityType" in host ? host.entityType : host.type;
+    const entityBundle = "itemBundle" in host ? host.itemBundle : host.bundle;
+    const config = droppableFieldConfig.forName(
+      entityType,
+      entityBundle,
+      fieldName
+    );
+    if (!config) {
+      throw new Error(
+        `Missing droppable field config for field name "${fieldName}" on entity type "${entityType}" of bundle "${entityBundle}"`
+      );
+    }
+    return config;
+  }
+  const bundlesAllowedOnPage = fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).flatMap((v) => v.allowedBundles).filter(Boolean);
+  const bundlesAllowedOnBlocks = bundlesAllowedOnPage.flatMap(
+    (bundle) => fieldConfig.forEntityTypeAndBundle(itemEntityType, bundle)
+  ).flatMap((v) => v.allowedBundles) || [];
+  const allAllowedBundles = [
+    ...bundlesAllowedOnPage,
+    ...bundlesAllowedOnBlocks
+  ].filter(onlyUnique);
+  const generallyAvailableBundles = bundleDefinitions.filter(
+    (v) => allAllowedBundles.includes(v.id)
+  );
+  return {
+    itemBundlesWithNested,
+    allowedTypesInList,
+    getBlockBundleDefinition,
+    getDroppableFieldConfig,
+    generallyAvailableBundles,
+    getFieldConfig,
+    editableFieldConfig,
+    droppableFieldConfig,
+    fieldConfig
+  };
+}

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

@@ -0,0 +1,36 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { StorageProvider } from './storageProvider.js';
+import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
+import type { Viewport } from '#blokkli/constants';
+export type UiProvider = {
+    rootElement: () => HTMLElement;
+    artboardElement: () => HTMLElement;
+    providerElement: () => HTMLElement;
+    menu: {
+        isOpen: Readonly<Ref<boolean>>;
+        close: () => void;
+        open: () => void;
+    };
+    isMobile: ComputedRef<boolean>;
+    isDesktop: ComputedRef<boolean>;
+    isArtboard: () => boolean;
+    isAnimating: Ref<boolean>;
+    useAnimations: ComputedRef<boolean>;
+    lowPerformanceMode: ComputedRef<boolean>;
+    toolbarHeight: ComputedRef<number>;
+    visibleViewport: ComputedRef<Rectangle>;
+    visibleViewportPadded: ComputedRef<Rectangle>;
+    addListOrientation: ComputedRef<AddListOrientation>;
+    setViewportBlockingRectangle: (key: string, rect?: Rectangle) => void;
+    viewportBlockingRects: ComputedRef<Rectangle[]>;
+    appViewport: ComputedRef<Viewport>;
+    openContextMenu: Ref<string>;
+    viewport: ComputedRef<Size>;
+    artboardSize: ComputedRef<Size>;
+    artboardScale: Ref<number>;
+    artboardOffset: Ref<Coord>;
+    selectionTopLeft: Ref<Coord>;
+    getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+};
+export default function (storage: StorageProvider): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -0,0 +1,278 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  computed,
+  watch
+} from "vue";
+import { eventBus } from "./eventBus.js";
+import { falsy } from "./index.js";
+const ARTBOARD_CLASS = "bk-is-artboard";
+export default function(storage) {
+  let cachedRootElement = null;
+  let cachedArtboardElement = null;
+  let cachedProviderElement = null;
+  const menuIsOpen = ref(false);
+  const isAnimating = ref(false);
+  const openContextMenu = ref("");
+  const selectionTopLeft = ref({ x: 0, y: 0 });
+  const useAnimationsSetting = storage.use("useAnimations", true);
+  const useAnimations = computed(() => useAnimationsSetting.value);
+  const baseSettings = storage.use("feature:settings:settings", {});
+  const lowPerformanceMode = computed(
+    () => baseSettings.value.lowPerformanceMode
+  );
+  const viewportBlockingRectsMap = ref(
+    {}
+  );
+  const artboardSize = ref({
+    width: 1,
+    height: 1
+  });
+  const artboardOffset = ref({
+    x: 0,
+    y: 0
+  });
+  const artboardScale = ref(1);
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) {
+      return;
+    }
+    const size = entry.contentBoxSize[0];
+    if (!size) {
+      return;
+    }
+    artboardSize.value.width = size.inlineSize;
+    artboardSize.value.height = size.blockSize;
+  });
+  const setViewportBlockingRectangle = (key, rect) => {
+    if (!rect) {
+      viewportBlockingRectsMap.value[key] = void 0;
+      return;
+    }
+    viewportBlockingRectsMap.value[key] = rect;
+  };
+  const artboardElement = () => {
+    if (cachedArtboardElement) {
+      return cachedArtboardElement;
+    }
+    const el = document.querySelector(".bk-main-canvas");
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate artboard element.");
+    }
+    cachedArtboardElement = el;
+    return el;
+  };
+  const rootElement = () => {
+    if (cachedRootElement) {
+      return cachedRootElement;
+    }
+    const el = document.querySelector("#nuxt-root");
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate root Nuxt element.");
+    }
+    cachedRootElement = el;
+    return el;
+  };
+  const providerElement = () => {
+    if (cachedProviderElement) {
+      return cachedProviderElement;
+    }
+    const el = document.querySelector('[data-blokkli-provider-active="true"]');
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate provider element.");
+    }
+    cachedProviderElement = el;
+    return el;
+  };
+  const appViewport = computed(() => {
+    if (viewportWidth.value < 1024) {
+      return "mobile";
+    }
+    return "desktop";
+  });
+  const viewportWidth = ref(window.innerWidth);
+  const viewportHeight = ref(window.innerHeight);
+  const isMobile = computed(() => appViewport.value === "mobile");
+  const isDesktop = computed(() => appViewport.value === "desktop");
+  let resizeTimeout = null;
+  const onResize = () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      viewportWidth.value = window.innerWidth;
+      viewportHeight.value = window.innerHeight;
+      eventBus.emit("ui:resized");
+    }, 400);
+  };
+  const isArtboard = () => {
+    return document.documentElement.classList.contains(ARTBOARD_CLASS);
+  };
+  watch(isAnimating, (is) => {
+    if (is) {
+      document.documentElement.classList.add("bk-is-animating");
+    } else {
+      document.documentElement.classList.remove("bk-is-animating");
+    }
+  });
+  const toolbarHeight = computed(() => {
+    if (isMobile.value) {
+      return 80;
+    }
+    return 50;
+  });
+  const activeSidebarLeft = storage.use("sidebar:active:left", "");
+  const activeSidebarRight = storage.use("sidebar:active:right", "");
+  const settingsStorage = storage.use("feature:add-list:settings", {
+    orientation: "vertical"
+  });
+  const addListOrientation = computed(
+    () => isMobile.value ? "horizontal" : settingsStorage.value.orientation
+  );
+  const visibleViewportX = computed(() => {
+    let x = 0;
+    if (!isMobile.value) {
+      if (addListOrientation.value === "vertical") {
+        x += 70;
+      }
+      if (activeSidebarLeft.value) {
+        x += 400;
+      }
+    }
+    return x;
+  });
+  const visibleViewportY = computed(() => {
+    return toolbarHeight.value;
+  });
+  const visibleViewportWidth = computed(() => {
+    if (isMobile.value) {
+      return viewportWidth.value;
+    }
+    let width = viewportWidth.value - visibleViewportX.value - 50;
+    if (activeSidebarRight.value) {
+      width -= 351;
+    }
+    return width;
+  });
+  const visibleViewportHeight = computed(() => {
+    let height = viewportHeight.value - visibleViewportY.value;
+    if (addListOrientation.value === "horizontal") {
+      if (isMobile.value) {
+        height -= 50;
+      } else {
+        height -= 70;
+      }
+    }
+    return height;
+  });
+  const viewportPadding = computed(() => 10);
+  const blockingPaddingX = computed(() => 15);
+  const blockingPaddingY = computed(() => 50);
+  const viewportBlockingRects = computed(() => {
+    return Object.values(viewportBlockingRectsMap.value).map((rect) => {
+      if (!rect) {
+        return;
+      }
+      return {
+        x: rect.x - blockingPaddingX.value,
+        y: rect.y - blockingPaddingY.value,
+        width: rect.width + blockingPaddingX.value * 2,
+        height: rect.height + blockingPaddingY.value * 2
+      };
+    }).filter(falsy);
+  });
+  const visibleViewport = computed(() => {
+    return {
+      x: visibleViewportX.value,
+      y: visibleViewportY.value,
+      width: visibleViewportWidth.value,
+      height: visibleViewportHeight.value
+    };
+  });
+  const visibleViewportPadded = computed(() => {
+    return {
+      x: visibleViewportX.value + viewportPadding.value,
+      y: visibleViewportY.value + viewportPadding.value,
+      width: visibleViewportWidth.value - 2 * viewportPadding.value,
+      height: visibleViewportHeight.value - 2 * viewportPadding.value
+    };
+  });
+  onMounted(() => {
+    document.documentElement.classList.add("bk-html-root");
+    document.body.classList.add("bk-body");
+    document.documentElement.classList.add(ARTBOARD_CLASS);
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    resizeObserver.observe(artboard);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    document.documentElement.classList.remove("bk-html-root");
+    document.body.classList.remove("bk-body");
+    document.documentElement.classList.remove(ARTBOARD_CLASS);
+    clearTimeout(resizeTimeout);
+    const artboard = artboardElement();
+    resizeObserver.unobserve(artboard);
+    resizeObserver.disconnect();
+  });
+  const viewport = computed(() => {
+    return {
+      width: viewportWidth.value,
+      height: viewportHeight.value
+    };
+  });
+  function getAbsoluteElementRect(v, providedScale, providedOffset) {
+    const rect = "x" in v && "y" in v && "width" in v && "height" in v ? v : v.getBoundingClientRect();
+    const scale = providedScale || artboardScale.value;
+    const offset = providedOffset || artboardOffset.value;
+    return {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      width: rect.width / scale,
+      height: rect.height / scale
+    };
+  }
+  function getViewportRelativeRect(rect) {
+    const scale = artboardScale.value;
+    const offset = artboardOffset.value;
+    return {
+      x: rect.x * scale + offset.x,
+      y: rect.y * scale + offset.y,
+      width: rect.width * scale,
+      height: rect.height * scale
+    };
+  }
+  return {
+    menu: {
+      isOpen: menuIsOpen,
+      close: () => menuIsOpen.value = false,
+      open: () => menuIsOpen.value = true
+    },
+    artboardElement,
+    rootElement,
+    providerElement,
+    isMobile,
+    isDesktop,
+    isArtboard,
+    isAnimating,
+    useAnimations,
+    visibleViewport,
+    visibleViewportPadded,
+    toolbarHeight,
+    addListOrientation,
+    setViewportBlockingRectangle,
+    viewportBlockingRects,
+    appViewport,
+    openContextMenu,
+    viewport,
+    artboardSize: computed(() => artboardSize.value),
+    artboardScale,
+    artboardOffset,
+    selectionTopLeft,
+    lowPerformanceMode,
+    getAbsoluteElementRect,
+    getViewportRelativeRect
+  };
+}