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

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

@@ -0,0 +1,174 @@
+import type { ComputedRef } from 'vue';
+import type { EntityContext } from '../../types/index.js';
+import type { AdapterContext, BlokkliAdapter } from '../adapter/index.js';
+import type { SelectionProvider } from './selection.js';
+import type { DroppableFieldConfig, EditableFieldConfig } from '../features/editable-field/types.js';
+import type { BlockBundleDefinition, FieldConfig } from '../types/definitions.js';
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput } from '#blokkli/types/definitions';
+import type { DraggableExistingBlock } from '../types/draggable.js';
+export type BlokkliBlockType = BlockBundleDefinition & {
+    definition: BlockDefinitionInput<BlockDefinitionOptionsInput, never[]> | undefined;
+};
+/**
+ * Base interface for configuration objects that can be mapped by entity context.
+ *
+ * Used by ConfigMap to organize configuration data by entity type, bundle, and name
+ * for efficient lookup.
+ */
+interface MappableConfig {
+    /**
+     * The entity type (e.g., 'paragraph', 'node', 'block_content').
+     */
+    entityType: string;
+    /**
+     * The entity bundle (e.g., 'text', 'image', 'article').
+     */
+    entityBundle: string;
+    /**
+     * The configuration name (typically a field name like 'field_paragraphs').
+     */
+    name: string;
+}
+/**
+ * Efficient lookup map for configuration objects organized by entity context.
+ *
+ * Provides O(1) lookups by entity type, entity type + bundle, and
+ * entity type + bundle + name combinations. Used for field configurations,
+ * editable field configurations, and droppable field configurations.
+ *
+ * @template T - Configuration type extending MappableConfig
+ */
+declare class ConfigMap<T extends MappableConfig> {
+    private configs;
+    private mapEntityType;
+    private mapEntityTypeBundle;
+    private mapEntityTypeBundleName;
+    constructor(items: T[]);
+    /**
+     * Get all configurations for a specific entity type.
+     *
+     * @param entityType - The entity type to filter by
+     * @returns Array of matching configurations
+     *
+     * @example
+     * ```ts
+     * // Get all field configs for paragraph entities
+     * const paragraphFields = fieldConfig.forEntityType('paragraph')
+     * ```
+     */
+    forEntityType(entityType: string): T[];
+    /**
+     * Get all configurations for a specific entity type and bundle combination.
+     *
+     * @param entityType - The entity type
+     * @param entityBundle - The entity bundle
+     * @returns Array of matching configurations
+     *
+     * @example
+     * ```ts
+     * // Get all field configs for text paragraph bundle
+     * const textFields = fieldConfig.forEntityTypeAndBundle('paragraph', 'text')
+     * ```
+     */
+    forEntityTypeAndBundle(entityType: string, entityBundle: string): T[];
+    /**
+     * Get a specific configuration by entity type, bundle, and name.
+     *
+     * @param entityType - The entity type
+     * @param entityBundle - The entity bundle
+     * @param name - The configuration name (typically field name)
+     * @returns The matching configuration, or undefined if not found
+     *
+     * @example
+     * ```ts
+     * // Get field config for specific field on text paragraph
+     * const config = fieldConfig.forName('paragraph', 'text', 'field_items')
+     * ```
+     */
+    forName(entityType: string, entityBundle: string, name: string): T | undefined;
+    /**
+     * Get all configurations.
+     *
+     * @returns Array of all configurations in the map
+     */
+    all(): T[];
+}
+export type BlockDefinitionProvider = {
+    /**
+     * List of block bundles that contain nested blocks.
+     *
+     * A bundle is included if it has any field configurations
+     * where it can contain other blocks.
+     */
+    itemBundlesWithNested: string[];
+    /**
+     * Allowed block types in the currently selected list.
+     *
+     * Computed based on the parent field of selected blocks.
+     * Returns empty array if:
+     * - No blocks are selected
+     * - Selected blocks are in different fields
+     */
+    allowedTypesInList: ComputedRef<string[]>;
+    /**
+     * Block bundles that can be used somewhere in the current context.
+     *
+     * Includes bundles allowed:
+     * - Directly on the current entity
+     * - In nested blocks allowed on the current entity
+     *
+     * Used for add dialogs, library, and other "available blocks" UIs.
+     */
+    generallyAvailableBundles: BlockBundleDefinition[];
+    /**
+     * Get the bundle definition for a specific block type.
+     *
+     * @param bundle - The block bundle ID (e.g., 'text', 'image')
+     * @returns The bundle definition, or undefined if not found
+     */
+    getBlockBundleDefinition: (bundle: string) => BlockBundleDefinition | undefined;
+    /**
+     * Get the field configuration for a specific field on an entity.
+     *
+     * Field configurations define allowed bundles, cardinality, and other
+     * field-level settings.
+     *
+     * @param entityType - The entity type
+     * @param entityBundle - The entity bundle
+     * @param fieldName - The field name
+     * @returns The field configuration, or undefined if not found
+     */
+    getFieldConfig: (entityType: string, entityBundle: string, fieldName: string) => FieldConfig | undefined;
+    /**
+     * Map of all field configurations.
+     *
+     * Provides efficient lookups by entity type, bundle, and field name.
+     */
+    fieldConfig: ConfigMap<FieldConfig>;
+    /**
+     * Map of editable field configurations.
+     *
+     * Defines which fields support inline editing and their configuration.
+     */
+    editableFieldConfig: ConfigMap<EditableFieldConfig>;
+    /**
+     * Map of droppable field configurations.
+     *
+     * Defines which fields can accept dropped blocks and their behavior.
+     */
+    droppableFieldConfig: ConfigMap<DroppableFieldConfig>;
+    /**
+     * Get droppable field configuration for a field on a host.
+     *
+     * Throws an error if configuration is not found, as droppable fields
+     * should always have configuration when accessed.
+     *
+     * @param fieldName - The field name
+     * @param host - The host block or entity context
+     * @returns The droppable field configuration
+     * @throws Error if configuration not found
+     */
+    getDroppableFieldConfig: (fieldName: string, host: DraggableExistingBlock | EntityContext) => DroppableFieldConfig;
+};
+export default function (adapter: BlokkliAdapter<any>, selection: SelectionProvider, context: ComputedRef<AdapterContext>): Promise<BlockDefinitionProvider>;
+export {};

package/dist/runtime/editor/providers/types.js

@@ -0,0 +1,166 @@
+import { computed } from "#imports";
+import { onlyUnique } from "../../helpers/index.js";
+import { itemEntityType } from "#blokkli-build/config";
+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;
+    }
+  }
+  /**
+   * Get all configurations for a specific entity type.
+   *
+   * @param entityType - The entity type to filter by
+   * @returns Array of matching configurations
+   *
+   * @example
+   * ```ts
+   * // Get all field configs for paragraph entities
+   * const paragraphFields = fieldConfig.forEntityType('paragraph')
+   * ```
+   */
+  forEntityType(entityType) {
+    return this.mapEntityType[entityType] || [];
+  }
+  /**
+   * Get all configurations for a specific entity type and bundle combination.
+   *
+   * @param entityType - The entity type
+   * @param entityBundle - The entity bundle
+   * @returns Array of matching configurations
+   *
+   * @example
+   * ```ts
+   * // Get all field configs for text paragraph bundle
+   * const textFields = fieldConfig.forEntityTypeAndBundle('paragraph', 'text')
+   * ```
+   */
+  forEntityTypeAndBundle(entityType, entityBundle) {
+    return this.mapEntityTypeBundle[entityType]?.[entityBundle] || [];
+  }
+  /**
+   * Get a specific configuration by entity type, bundle, and name.
+   *
+   * @param entityType - The entity type
+   * @param entityBundle - The entity bundle
+   * @param name - The configuration name (typically field name)
+   * @returns The matching configuration, or undefined if not found
+   *
+   * @example
+   * ```ts
+   * // Get field config for specific field on text paragraph
+   * const config = fieldConfig.forName('paragraph', 'text', 'field_items')
+   * ```
+   */
+  forName(entityType, entityBundle, name) {
+    return this.mapEntityTypeBundleName[entityType]?.[entityBundle]?.[name];
+  }
+  /**
+   * Get all configurations.
+   *
+   * @returns Array of all configurations in the map
+   */
+  all() {
+    return this.configs;
+  }
+}
+export default async function(adapter, selection, context) {
+  const bundleDefinitions = await adapter.getAllBundles();
+  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.items.value.length) {
+      return [];
+    }
+    let hostType = "";
+    let hostBundle = "";
+    let fieldName = "";
+    for (let i = 0; i < selection.items.value.length; i++) {
+      const block = selection.items.value[i];
+      if (i !== 0 && (hostType !== block.host.type || hostBundle !== block.host.bundle || fieldName !== block.host.fieldName)) {
+        return [];
+      }
+      hostType = block.host.type;
+      hostBundle = block.host.bundle;
+      fieldName = block.host.fieldName;
+    }
+    return fieldConfig.forName(hostType, hostBundle, fieldName)?.allowedBundles || [];
+  });
+  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 = "itemType" in host ? host.block.host.type : host.type;
+    const entityBundle = "itemType" in host ? host.block.host.bundle : 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/editor/providers/ui.d.ts

@@ -0,0 +1,350 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { ShallowRef } from 'vue';
+import type { StorageProvider } from './storage.js';
+import type { GlobalUiDialog, SidebarRegion } from '#blokkli/editor/types/ui';
+import type { Viewport } from '../../../global/constants/index.js';
+import type { AdapterContext } from '#blokkli/editor/adapter';
+import type { ThemeColorName } from './../../../global/types/theme.js';
+import type { ElementProvider } from './element.js';
+import type { BlokkliEventBus } from '../events/index.js';
+import type { Coord, Rectangle, Size } from '../types/geometry.js';
+export type UiProvider = {
+    /**
+     * Get the Nuxt root element (#nuxt-root).
+     *
+     * Cached after first access for performance.
+     *
+     * @returns The root HTML element
+     * @throws Error if element cannot be found
+     */
+    rootElement: () => HTMLElement;
+    /**
+     * Get the artboard element (.bk-main-canvas).
+     *
+     * The artboard is the scrollable container for the edited content.
+     * Cached after first access for performance.
+     *
+     * @returns The artboard HTML element
+     * @throws Error if element cannot be found
+     */
+    artboardElement: () => HTMLElement;
+    /**
+     * The blökkli provider root element.
+     *
+     * This is the element that contains the entire editor UI.
+     */
+    providerElement: HTMLElement;
+    /**
+     * Whether the viewport is mobile (< 1024px width).
+     */
+    isMobile: ComputedRef<boolean>;
+    /**
+     * Whether the viewport is desktop (>= 1024px width).
+     */
+    isDesktop: ComputedRef<boolean>;
+    /**
+     * Whether animations are currently running.
+     *
+     * When true, adds 'bk-is-animating' class to document root.
+     * Used to disable certain interactions during animations.
+     */
+    isAnimating: Ref<boolean>;
+    /**
+     * Whether the analyzer is currently active.
+     *
+     * When true, adds 'bk-is-analyzing' class to document root.
+     */
+    isAnalyzing: Ref<boolean>;
+    /**
+     * Whether proxy mode is active.
+     *
+     * Proxy mode shows a structured view of blocks instead of their components.
+     */
+    isProxyMode: Ref<boolean>;
+    /**
+     * Whether any dialog is currently open.
+     */
+    hasDialogOpen: ComputedRef<boolean>;
+    /**
+     * The currently open dialog, or null if none is open.
+     */
+    currentDialog: Readonly<Ref<GlobalUiDialog | null>>;
+    /**
+     * Require confirmation before closing the current dialog.
+     *
+     * Sets the confirmClose flag on the current dialog, which will
+     * require double clicking the dialog background overlay to close it.
+     */
+    requireDialogCloseConfirm: () => void;
+    /**
+     * Open a global dialog.
+     *
+     * Closes any previously open dialog and opens the new one.
+     *
+     * @param dialog - The dialog configuration to open
+     */
+    openDialog: (dialog: GlobalUiDialog) => void;
+    /**
+     * Close a dialog.
+     *
+     * @param id - Optional dialog ID. If provided, only closes if it matches the current dialog.
+     */
+    closeDialog: (id?: string) => void;
+    /**
+     * Whether any tooltip is currently open.
+     */
+    hasTooltipOpen: ComputedRef<boolean>;
+    /**
+     * ID of the currently open tooltip, or empty string if none is open.
+     */
+    openTooltip: Ref<string>;
+    /**
+     * The current selection color.
+     *
+     * Returns the most recently set color, or null if none is set.
+     * Used to colorize the selection UI (selection rect, drop target indicators, etc.).
+     */
+    selectionColor: ComputedRef<ThemeColorName | null>;
+    /**
+     * Set a selection color.
+     *
+     * Multiple features can set colors with different IDs.
+     * The most recently set color is used.
+     *
+     * @param id - Unique identifier for this color source
+     * @param color - The theme color to use
+     */
+    setSelectionColor: (id: string, color: ThemeColorName) => void;
+    /**
+     * Remove a selection color by ID.
+     *
+     * If this was the active color, the previous color will become active.
+     *
+     * @param id - The color source ID to remove
+     */
+    removeSelectionColor: (id: string) => void;
+    /**
+     * Whether the transform overlay is open.
+     *
+     * The transform overlay is shown during drag operations, resizing, etc.
+     */
+    hasTransformOverlayOpen: Ref<boolean>;
+    /**
+     * Whether a transform operation is active.
+     *
+     * True when transformLabel is not empty.
+     */
+    isTransforming: ComputedRef<boolean>;
+    /**
+     * Set the active transform operation.
+     *
+     * @param label - Label describing the transform (e.g., "Moving 3 blocks"), or null/undefined to clear
+     */
+    setTransform: (label?: string | null | undefined) => void;
+    /**
+     * The current transform operation label.
+     */
+    transformLabel: ComputedRef<string>;
+    /**
+     * Whether animations are enabled.
+     *
+     * Can be disabled in settings for performance or accessibility.
+     * Defaults to true.
+     */
+    useAnimations: ComputedRef<boolean>;
+    /**
+     * Whether low performance mode is enabled.
+     *
+     * When enabled, reduces visual effects and animations for better performance
+     * on slower devices.
+     */
+    lowPerformanceMode: ComputedRef<boolean>;
+    /**
+     * The visible viewport rectangle.
+     *
+     * Represents the portion of the window where the editor is visible,
+     * excluding any overlays or sidebars.
+     */
+    visibleViewport: ComputedRef<Rectangle>;
+    /**
+     * The visible viewport rectangle with padding applied.
+     *
+     * Used for positioning elements that should be inset from the viewport edges.
+     */
+    visibleViewportPadded: ComputedRef<Rectangle>;
+    /**
+     * Register a rectangle that blocks part of the viewport.
+     *
+     * Blocking rectangles are used for persistent UI elements (toolbars, sidebars)
+     * that should affect element positioning and visibility calculations.
+     *
+     * @param key - Unique identifier for this blocking rectangle
+     * @param rect - The rectangle, or undefined to remove the blocking rectangle
+     */
+    setViewportBlockingRectangle: (key: string, rect?: Rectangle) => void;
+    /**
+     * All viewport blocking rectangles with padding applied.
+     *
+     * Each rectangle is expanded by blockingPaddingX and blockingPaddingY
+     * to create a buffer zone around blocking UI elements.
+     */
+    viewportBlockingRects: ComputedRef<Rectangle[]>;
+    /**
+     * The current viewport type.
+     *
+     * 'mobile' for viewports < 1024px width, 'desktop' otherwise.
+     * Used to adjust UI layout and behavior.
+     */
+    appViewport: ComputedRef<Viewport>;
+    /**
+     * ID of the currently open context menu, or empty string if none is open.
+     */
+    openContextMenu: Ref<string>;
+    /**
+     * The browser window viewport size.
+     *
+     * Updated on window resize with 400ms debounce.
+     */
+    viewport: ComputedRef<Size>;
+    /**
+     * The artboard element size.
+     *
+     * Tracked via ResizeObserver for accurate, efficient updates.
+     */
+    artboardSize: ComputedRef<Size>;
+    /**
+     * The artboard zoom/scale factor.
+     *
+     * 1.0 = 100%, 0.5 = 50%, 2.0 = 200%, etc.
+     * Used by artboard zoom feature.
+     */
+    artboardScale: Ref<number>;
+    /**
+     * The artboard scroll/pan offset in pixels.
+     *
+     * Represents how far the artboard has been scrolled or panned.
+     */
+    artboardOffset: Ref<Coord>;
+    /**
+     * Top-left coordinate of the selection rectangle.
+     *
+     * Updated during drag operations and multi-select.
+     */
+    selectionTopLeft: Ref<Coord>;
+    /**
+     * The interface language code.
+     *
+     * Respects forceDefaultLanguage config setting.
+     * Falls back to context language otherwise.
+     */
+    interfaceLanguage: ComputedRef<string>;
+    /**
+     * The full locale string for date/number formatting.
+     *
+     * Maps language codes to locale strings (e.g., 'de' -> 'de-CH').
+     */
+    locale: ComputedRef<string>;
+    /**
+     * Format a date using the current locale.
+     *
+     * @param date - Date object or ISO string
+     * @param options - Intl.DateTimeFormat options. Defaults to numeric date + time.
+     * @returns Localized date string
+     *
+     * @example
+     * ```ts
+     * formatDate(new Date()) // "16.11.2025, 14:30"
+     * formatDate(isoString, { dateStyle: 'long' }) // "16. November 2025"
+     * ```
+     */
+    formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
+    /**
+     * Get absolute rectangle for an element or rectangle.
+     *
+     * Converts viewport-relative coordinates to artboard-absolute coordinates
+     * by accounting for artboard scale and offset. Ensures minimum size of 24x24.
+     *
+     * @param v - HTML element or rectangle
+     * @param scale - Override artboard scale (uses current scale if not provided)
+     * @param offset - Override artboard offset (uses current offset if not provided)
+     * @returns Absolute rectangle in artboard coordinates
+     */
+    getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    /**
+     * Convert viewport-relative coordinates to artboard-relative coordinates.
+     *
+     * @param coords - The coordinates to convert.
+     * @param scale - Override artboard scale (uses current scale if not provided)
+     * @param offset - Override artboard offset (uses current offset if not provided)
+     * @returns Coordinates in artboard coordinate space
+     */
+    toArtboardCoords: (coords: Coord, scale?: number, offset?: Coord) => Coord;
+    /**
+     * Convert artboard-absolute rectangle to viewport-relative coordinates.
+     *
+     * Applies artboard scale and offset to convert from artboard space
+     * to viewport/screen space.
+     *
+     * @param rect - Rectangle in artboard coordinates
+     * @param scale - Override artboard scale (uses current scale if not provided)
+     * @param offset - Override artboard offset (uses current offset if not provided)
+     * @returns Rectangle in viewport coordinates
+     */
+    getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    /**
+     * Set the height of a banner by ID.
+     *
+     * Banners are persistent notification bars at the top of the interface.
+     * Height is used to adjust viewport calculations.
+     *
+     * @param id - Unique banner identifier
+     * @param height - Banner height in pixels
+     */
+    setBannerHeight: (id: string, height: number) => void;
+    /**
+     * Remove a banner by ID.
+     *
+     * Sets the banner height to 0.
+     *
+     * @param id - The banner identifier to remove
+     */
+    removeBanner: (id: string) => void;
+    /**
+     * Register an active sidebar.
+     *
+     * Adds the sidebar ID to the active list for the specified region.
+     * When sidebars are active, the interface adjusts layout accordingly.
+     *
+     * @param region - Which sidebar region ('left' or 'right')
+     * @param id - Unique sidebar identifier
+     */
+    setActiveSidebar: (region: SidebarRegion, id: string) => void;
+    /**
+     * Unregister an active sidebar.
+     *
+     * Removes the sidebar ID from the active list for the specified region.
+     *
+     * @param region - Which sidebar region ('left' or 'right')
+     * @param id - The sidebar identifier to remove
+     */
+    removeActiveSidebar: (region: SidebarRegion, id: string) => void;
+    /**
+     * Whether any sidebar is active on the left.
+     *
+     * When true, adds 'bk-has-sidebar-left' class to document root.
+     */
+    hasSidebarLeft: ComputedRef<boolean>;
+    /**
+     * Whether any sidebar is active on the right.
+     *
+     * When true, adds 'bk-has-sidebar-right' class to document root.
+     */
+    hasSidebarRight: ComputedRef<boolean>;
+    /**
+     * Reference to the main layout element.
+     *
+     * The container element for the primary editor interface.
+     */
+    mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>;
+};
+export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;