@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

package/dist/runtime/editor/components/index.d.ts

@@ -0,0 +1,49 @@
+import AddListItem from './AddListItem/index.vue.js';
+import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
+import AutoHeight from './AutoHeight/index.vue.js';
+import Banner from './Banner/index.vue.js';
+import BlockPreviewItem from './BlockPreviewItem/index.vue.js';
+import BlockPreviewRenderer from './BlockPreviewRenderer/index.vue.js';
+import BlokkliTransition from './Transition/index.vue.js';
+import BundleSelector from './BundleSelector/index.vue.js';
+import ConfigForm from './PluginConfigForm/index.vue.js';
+import DialogModal from './Dialog/index.vue.js';
+import DiffApproval from './DiffApproval/index.vue.js';
+import DiffDisplay from './DiffViewer/DiffDisplay/index.vue.js';
+import DiffValue from './DiffViewer/DiffValue.vue.js';
+import DiffViewerState from './DiffViewer/State.vue.js';
+import Dropdown from './Dropdown/index.vue.js';
+import DropdownItem from './DropdownItem/index.vue.js';
+import ErrorBoundary from './BlokkliErrorBoundary.vue.js';
+import FlexTextarea from './FlexTextarea/index.vue.js';
+import FormCheckboxes from './Form/Checkboxes/index.vue.js';
+import FormDatepicker from './Form/Datepicker/index.vue.js';
+import FormGroup from './Form/Group/index.vue.js';
+import FormItem from './Form/Item/index.vue.js';
+import FormOverlay from './FormOverlay/index.vue.js';
+import FormRadio from './Form/Radio/index.vue.js';
+import FormRadioTabs from './Form/RadioTabs/index.vue.js';
+import FormSelect from './Form/Select/index.vue.js';
+import FormText from './Form/Text/index.vue.js';
+import FormTextarea from './Form/Textarea/index.vue.js';
+import FormToggle from './Form/Toggle/index.vue.js';
+import Highlight from './Highlight/index.vue.js';
+import Icon from './Icon/index.vue.js';
+import InfoBox from './InfoBox/index.vue.js';
+import ItemIcon from './ItemIcon/index.vue.js';
+import ItemIconBox from './ItemIconBox/index.vue.js';
+import Loading from './Loading/index.vue.js';
+import NestedEditorOverlay from './NestedEditorOverlay/index.vue.js';
+import Pagination from './Pagination/index.vue.js';
+import Popup from './Popup/index.vue.js';
+import RelativeTime from './RelativeTime/index.vue.js';
+import Resizable from './Resizable/index.vue.js';
+import ScaleToFit from './ScaleToFit/index.vue.js';
+import ScheduleDate from './ScheduleDate/index.vue.js';
+import ScrollBoundary from './ScrollBoundary/index.vue.js';
+import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
+import Sortli from './Sortli/index.vue.js';
+import StatusIcon from './StatusIcon/index.vue.js';
+import TransitionHeight from './Transition/Height.vue.js';
+import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
+export { AddListItem, ArtboardTooltip, AutoHeight, Banner, BlockPreviewItem, BlockPreviewRenderer, BlokkliTransition, BundleSelector, ConfigForm, DialogModal, DiffApproval, DiffDisplay, DiffValue, DiffViewerState, Dropdown, DropdownItem, ErrorBoundary, FlexTextarea, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, ItemIconBox, Loading, NestedEditorOverlay, Pagination, Popup, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, StatusIcon, TransitionHeight, ViewportBlockingRect, };

package/dist/runtime/editor/components/index.js

@@ -0,0 +1,98 @@
+import AddListItem from "./AddListItem/index.vue";
+import ArtboardTooltip from "./ArtboardTooltip/index.vue";
+import AutoHeight from "./AutoHeight/index.vue";
+import Banner from "./Banner/index.vue";
+import BlockPreviewItem from "./BlockPreviewItem/index.vue";
+import BlockPreviewRenderer from "./BlockPreviewRenderer/index.vue";
+import BlokkliTransition from "./Transition/index.vue";
+import BundleSelector from "./BundleSelector/index.vue";
+import ConfigForm from "./PluginConfigForm/index.vue";
+import DialogModal from "./Dialog/index.vue";
+import DiffApproval from "./DiffApproval/index.vue";
+import DiffDisplay from "./DiffViewer/DiffDisplay/index.vue";
+import DiffValue from "./DiffViewer/DiffValue.vue";
+import DiffViewerState from "./DiffViewer/State.vue";
+import Dropdown from "./Dropdown/index.vue";
+import DropdownItem from "./DropdownItem/index.vue";
+import ErrorBoundary from "./BlokkliErrorBoundary.vue";
+import FlexTextarea from "./FlexTextarea/index.vue";
+import FormCheckboxes from "./Form/Checkboxes/index.vue";
+import FormDatepicker from "./Form/Datepicker/index.vue";
+import FormGroup from "./Form/Group/index.vue";
+import FormItem from "./Form/Item/index.vue";
+import FormOverlay from "./FormOverlay/index.vue";
+import FormRadio from "./Form/Radio/index.vue";
+import FormRadioTabs from "./Form/RadioTabs/index.vue";
+import FormSelect from "./Form/Select/index.vue";
+import FormText from "./Form/Text/index.vue";
+import FormTextarea from "./Form/Textarea/index.vue";
+import FormToggle from "./Form/Toggle/index.vue";
+import Highlight from "./Highlight/index.vue";
+import Icon from "./Icon/index.vue";
+import InfoBox from "./InfoBox/index.vue";
+import ItemIcon from "./ItemIcon/index.vue";
+import ItemIconBox from "./ItemIconBox/index.vue";
+import Loading from "./Loading/index.vue";
+import NestedEditorOverlay from "./NestedEditorOverlay/index.vue";
+import Pagination from "./Pagination/index.vue";
+import Popup from "./Popup/index.vue";
+import RelativeTime from "./RelativeTime/index.vue";
+import Resizable from "./Resizable/index.vue";
+import ScaleToFit from "./ScaleToFit/index.vue";
+import ScheduleDate from "./ScheduleDate/index.vue";
+import ScrollBoundary from "./ScrollBoundary/index.vue";
+import ShortcutIndicator from "./ShortcutIndicator/index.vue";
+import Sortli from "./Sortli/index.vue";
+import StatusIcon from "./StatusIcon/index.vue";
+import TransitionHeight from "./Transition/Height.vue";
+import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
+export {
+  AddListItem,
+  ArtboardTooltip,
+  AutoHeight,
+  Banner,
+  BlockPreviewItem,
+  BlockPreviewRenderer,
+  BlokkliTransition,
+  BundleSelector,
+  ConfigForm,
+  DialogModal,
+  DiffApproval,
+  DiffDisplay,
+  DiffValue,
+  DiffViewerState,
+  Dropdown,
+  DropdownItem,
+  ErrorBoundary,
+  FlexTextarea,
+  FormCheckboxes,
+  FormDatepicker,
+  FormGroup,
+  FormItem,
+  FormOverlay,
+  FormRadio,
+  FormRadioTabs,
+  FormSelect,
+  FormText,
+  FormTextarea,
+  FormToggle,
+  Highlight,
+  Icon,
+  InfoBox,
+  ItemIcon,
+  ItemIconBox,
+  Loading,
+  NestedEditorOverlay,
+  Pagination,
+  Popup,
+  RelativeTime,
+  Resizable,
+  ScaleToFit,
+  ScheduleDate,
+  ScrollBoundary,
+  ShortcutIndicator,
+  Sortli,
+  StatusIcon,
+  TransitionHeight,
+  ViewportBlockingRect
+};

package/dist/runtime/editor/composables/addElementClasses.d.ts

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

package/dist/runtime/editor/composables/addElementClasses.js

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

package/dist/runtime/editor/composables/defineAddAction.d.ts

@@ -0,0 +1,2 @@
+import type { AddAction } from '../types/actions.js';
+export declare function defineAddAction(cb: () => AddAction | AddAction[] | undefined): void;

package/dist/runtime/editor/composables/defineAddAction.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineAddAction(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("addAction", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("addAction", cb);
+  });
+}

package/dist/runtime/editor/composables/defineCommands.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from '../features/command-palette/types.js';
+export declare function defineCommands(cb: () => Command | Command[] | undefined): void;

package/dist/runtime/editor/composables/defineCommands.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineCommands(cb) {
+  const { commands } = useBlokkli();
+  onMounted(() => {
+    commands.add(cb);
+  });
+  onBeforeUnmount(() => {
+    commands.remove(cb);
+  });
+}

package/dist/runtime/editor/composables/defineDropAreas.d.ts

@@ -0,0 +1,3 @@
+import type { DraggableItem } from '../types/draggable.js';
+import type { DropArea } from '../types/ui.js';
+export declare function defineDropAreas(cb: (items: DraggableItem[]) => DropArea | DropArea[] | undefined): void;

package/dist/runtime/editor/composables/defineDropAreas.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineDropAreas(cb) {
+  const { dragdrop } = useBlokkli();
+  onMounted(() => {
+    dragdrop.addDropArea(cb);
+  });
+  onBeforeUnmount(() => {
+    dragdrop.removeDropArea(cb);
+  });
+}

package/dist/runtime/editor/composables/defineDropHandler.d.ts

@@ -0,0 +1,3 @@
+import type { DraggableItemTypes } from '../types/draggable.js';
+import type { DropHandler } from '../providers/dragdrop.js';
+export declare function defineDropHandler<K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>): void;

package/dist/runtime/editor/composables/defineDropHandler.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineDropHandler(itemType, handler) {
+  const { dragdrop } = useBlokkli();
+  onMounted(() => {
+    dragdrop.registerDropHandler(itemType, handler);
+  });
+  onBeforeUnmount(() => {
+    dragdrop.unregisterDropHandler(itemType, handler);
+  });
+}

package/dist/runtime/editor/composables/defineElementStyle.d.ts

@@ -0,0 +1,2 @@
+import { type ComputedRef } from '#imports';
+export declare function defineElementStyle(property: string, providedValue: ComputedRef<string | number> | (() => string | number), providedElement?: HTMLElement): void;

package/dist/runtime/editor/composables/defineElementStyle.js

@@ -0,0 +1,33 @@
+import {
+  onBeforeUnmount,
+  watch,
+  computed,
+  unref
+} from "#imports";
+export function defineElementStyle(property, providedValue, providedElement) {
+  const element = providedElement ?? document.documentElement;
+  const value = computed(() => {
+    if (typeof providedValue === "function") {
+      return providedValue();
+    }
+    return unref(providedValue);
+  });
+  const originalValue = element.style.getPropertyValue(property);
+  watch(
+    value,
+    function(newValue) {
+      const styleValue = typeof newValue === "number" ? newValue + "px" : newValue;
+      element.style.setProperty(property, styleValue);
+    },
+    {
+      immediate: true
+    }
+  );
+  onBeforeUnmount(() => {
+    if (originalValue) {
+      element.style.setProperty(property, originalValue);
+    } else {
+      element.style.removeProperty(property);
+    }
+  });
+}

package/dist/runtime/editor/composables/defineItemDropdownAction.d.ts

@@ -0,0 +1,2 @@
+import type { ItemDropdownAction } from '../providers/plugin.js';
+export declare function defineItemDropdownAction(cb: () => ItemDropdownAction | ItemDropdownAction[] | undefined): void;

package/dist/runtime/editor/composables/defineItemDropdownAction.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineItemDropdownAction(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("itemDropdownAction", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("itemDropdownAction", cb);
+  });
+}

package/dist/runtime/editor/composables/defineMenuButton.d.ts

@@ -0,0 +1,2 @@
+import type { MenuButtonPlugin } from '../providers/plugin.js';
+export declare function defineMenuButton(cb: () => MenuButtonPlugin | MenuButtonPlugin[] | undefined): void;

package/dist/runtime/editor/composables/defineMenuButton.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineMenuButton(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("menuButton", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("menuButton", cb);
+  });
+}

package/dist/runtime/editor/composables/defineRenderer.d.ts

@@ -0,0 +1,11 @@
+import type { Renderer } from '../providers/animation.js';
+/**
+ * Register a WebGL renderer with automatic cleanup on unmount.
+ *
+ * @param id - Unique identifier for the renderer
+ * @param config - Renderer configuration (zIndex, enabled, render, collector)
+ * @returns Object containing the collector instance with inferred type
+ */
+export declare function defineRenderer<T>(id: string, config: Omit<Renderer<T>, 'id'>): {
+    collector: T;
+};

package/dist/runtime/editor/composables/defineRenderer.js

@@ -0,0 +1,9 @@
+import { onBeforeUnmount, useBlokkli } from "#imports";
+export function defineRenderer(id, config) {
+  const { animation } = useBlokkli();
+  const { collector, unregister } = animation.registerRenderer(id, config);
+  onBeforeUnmount(() => {
+    unregister();
+  });
+  return { collector };
+}

package/dist/runtime/editor/composables/defineShortcut.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardShortcut } from '../types/ui.js';
+export declare function defineShortcut(shortcut: KeyboardShortcut[] | KeyboardShortcut): void;

package/dist/runtime/editor/composables/defineShortcut.js

@@ -0,0 +1,18 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineShortcut(shortcut) {
+  const { keyboard } = useBlokkli();
+  onMounted(() => {
+    if (Array.isArray(shortcut)) {
+      shortcut.forEach((v) => keyboard.registerShortcut(v));
+      return;
+    }
+    keyboard.registerShortcut(shortcut);
+  });
+  onBeforeUnmount(() => {
+    if (Array.isArray(shortcut)) {
+      shortcut.forEach((v) => keyboard.unregisterShortcut(v));
+      return;
+    }
+    keyboard.unregisterShortcut(shortcut);
+  });
+}

package/dist/runtime/editor/composables/defineTourItem.d.ts

@@ -0,0 +1,2 @@
+import type { TourItem } from '../features/tour/types.js';
+export declare function defineTourItem(cb: () => TourItem | TourItem[] | undefined): void;

package/dist/runtime/editor/composables/defineTourItem.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineTourItem(cb) {
+  const { tour } = useBlokkli();
+  onMounted(() => {
+    tour.add(cb);
+  });
+  onBeforeUnmount(() => {
+    tour.remove(cb);
+  });
+}

package/dist/runtime/editor/composables/index.d.ts

@@ -0,0 +1,25 @@
+export { addElementClasses } from './addElementClasses.js';
+export { defineAddAction } from './defineAddAction.js';
+export { defineCommands } from './defineCommands.js';
+export { defineDropAreas } from './defineDropAreas.js';
+export { defineDropHandler } from './defineDropHandler.js';
+export { defineElementStyle } from './defineElementStyle.js';
+export { defineItemDropdownAction } from './defineItemDropdownAction.js';
+export { defineMenuButton } from './defineMenuButton.js';
+export { defineRenderer } from './defineRenderer.js';
+export { defineShortcut } from './defineShortcut.js';
+export { defineTourItem } from './defineTourItem.js';
+export { onBlokkliEvent } from './onBlokkliEvent.js';
+export { onBroadcastEvent } from './onBroadcastEvent.js';
+export { useAnimationFrame } from './useAnimationFrame.js';
+export { useBlockRegistration } from './useBlockRegistration.js';
+export { useDebugLogger } from './useDebugLogger.js';
+export { useDelayedIntersectionObserver } from './useDelayedIntersectionObserver.js';
+export { useDialog } from './useDialog.js';
+export { useFocusTrap } from './useFocusTrap.js';
+export { useGlobalBlokkliObject } from './useGlobalBlokkliObject.js';
+export { useStateBasedCache } from './useStateBasedCache.js';
+export { useStickyToolbar } from './useStickyToolbar.js';
+export { useTransitionedValue } from './useTransitionedValue.js';
+export { onElementResize } from './onElementResize.js';
+export { useEditableFieldOverride } from './useEditableFieldOverride.js';

package/dist/runtime/editor/composables/index.js

@@ -0,0 +1,25 @@
+export { addElementClasses } from "./addElementClasses.js";
+export { defineAddAction } from "./defineAddAction.js";
+export { defineCommands } from "./defineCommands.js";
+export { defineDropAreas } from "./defineDropAreas.js";
+export { defineDropHandler } from "./defineDropHandler.js";
+export { defineElementStyle } from "./defineElementStyle.js";
+export { defineItemDropdownAction } from "./defineItemDropdownAction.js";
+export { defineMenuButton } from "./defineMenuButton.js";
+export { defineRenderer } from "./defineRenderer.js";
+export { defineShortcut } from "./defineShortcut.js";
+export { defineTourItem } from "./defineTourItem.js";
+export { onBlokkliEvent } from "./onBlokkliEvent.js";
+export { onBroadcastEvent } from "./onBroadcastEvent.js";
+export { useAnimationFrame } from "./useAnimationFrame.js";
+export { useBlockRegistration } from "./useBlockRegistration.js";
+export { useDebugLogger } from "./useDebugLogger.js";
+export { useDelayedIntersectionObserver } from "./useDelayedIntersectionObserver.js";
+export { useDialog } from "./useDialog.js";
+export { useFocusTrap } from "./useFocusTrap.js";
+export { useGlobalBlokkliObject } from "./useGlobalBlokkliObject.js";
+export { useStateBasedCache } from "./useStateBasedCache.js";
+export { useStickyToolbar } from "./useStickyToolbar.js";
+export { useTransitionedValue } from "./useTransitionedValue.js";
+export { onElementResize } from "./onElementResize.js";
+export { useEditableFieldOverride } from "./useEditableFieldOverride.js";

package/dist/runtime/editor/composables/onBlokkliEvent.d.ts

@@ -0,0 +1,2 @@
+import { type EventbusEvents } from '../events/index.js';
+export declare function onBlokkliEvent<T extends keyof EventbusEvents>(name: T, cb: (e: EventbusEvents[T]) => void): void;

package/dist/runtime/editor/composables/onBlokkliEvent.js

@@ -0,0 +1,10 @@
+import { eventBus } from "../events/index.js";
+import { onBeforeUnmount, onMounted } from "#imports";
+export function onBlokkliEvent(name, cb) {
+  onMounted(() => {
+    eventBus.on(name, cb);
+  });
+  onBeforeUnmount(() => {
+    eventBus.off(name, cb);
+  });
+}

package/dist/runtime/editor/composables/onBroadcastEvent.d.ts

@@ -0,0 +1,2 @@
+import type { BroadcastEvents } from '../providers/broadcast.js';
+export declare function onBroadcastEvent<T extends keyof BroadcastEvents>(name: T, cb: (e: BroadcastEvents[T]) => void): void;

package/dist/runtime/editor/composables/onBroadcastEvent.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function onBroadcastEvent(name, cb) {
+  const { broadcast } = useBlokkli();
+  onMounted(() => {
+    broadcast.on(name, cb);
+  });
+  onBeforeUnmount(() => {
+    broadcast.off(name, cb);
+  });
+}

package/dist/runtime/editor/composables/onElementResize.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+import type { Size } from '../types/geometry.js';
+export declare function onElementResize(el: Ref<HTMLElement | null>, cb: (size: Size) => void): void;

package/dist/runtime/editor/composables/onElementResize.js

@@ -0,0 +1,36 @@
+import { watch, onUnmounted } from "#imports";
+export function onElementResize(el, cb) {
+  let observer = null;
+  function disconnect() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+  watch(
+    el,
+    (element) => {
+      disconnect();
+      if (!element) {
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+        const boxSize = entry.borderBoxSize[0];
+        if (!boxSize) {
+          return;
+        }
+        cb({
+          width: boxSize.inlineSize,
+          height: boxSize.blockSize
+        });
+      });
+      observer.observe(element);
+    },
+    { immediate: true }
+  );
+  onUnmounted(disconnect);
+}

package/dist/runtime/editor/composables/useAnimationFrame.d.ts

@@ -0,0 +1 @@
+export declare function useAnimationFrame(cb: (time: number) => void): void;

package/dist/runtime/editor/composables/useAnimationFrame.js

@@ -0,0 +1,14 @@
+import { onBeforeUnmount, onMounted } from "#imports";
+export function useAnimationFrame(cb) {
+  let raf = null;
+  const loop = (time) => {
+    cb(time);
+    raf = window.requestAnimationFrame(loop);
+  };
+  onMounted(() => {
+    raf = window.requestAnimationFrame(loop);
+  });
+  onBeforeUnmount(() => {
+    window.cancelAnimationFrame(raf);
+  });
+}

package/dist/runtime/editor/composables/useBlockRegistration.d.ts

@@ -0,0 +1,5 @@
+import type { DomProvider } from '../providers/dom.js';
+/**
+ * Helper composable to handle registering the block in the DOM provider.
+ */
+export declare function useBlockRegistration(dom: DomProvider, uuid: string): void;

package/dist/runtime/editor/composables/useBlockRegistration.js

@@ -0,0 +1,41 @@
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated
+} from "#imports";
+export function useBlockRegistration(dom, uuid) {
+  const instance = getCurrentInstance();
+  const key = uuid + Math.round(Math.random() * 1e10).toString() + Date.now().toString();
+  let rootElement = null;
+  function getDraggableElement() {
+    const blokkliDraggable = instance?.refs.blokkliDraggable;
+    if (blokkliDraggable instanceof HTMLElement) {
+      return blokkliDraggable;
+    } else if (
+      // The ref is another component. Try to get the root element.
+      blokkliDraggable !== null && typeof blokkliDraggable === "object" && "$el" in blokkliDraggable
+    ) {
+      if (blokkliDraggable.$el instanceof HTMLElement) {
+        return blokkliDraggable.$el;
+      }
+    }
+    const rootElement2 = instance?.proxy?.$el;
+    if (rootElement2 instanceof HTMLElement) {
+      return rootElement2;
+    }
+    return null;
+  }
+  function setRootElement() {
+    const newElement = getDraggableElement();
+    if (newElement && rootElement !== newElement) {
+      rootElement = newElement;
+      dom.registerBlock(key, uuid, newElement);
+    }
+  }
+  onMounted(setRootElement);
+  onUpdated(setRootElement);
+  onBeforeUnmount(() => {
+    dom.unregisterBlock(key, uuid);
+  });
+}

package/dist/runtime/editor/composables/useDebugLogger.d.ts

@@ -0,0 +1,2 @@
+import type { DebugLogger } from '#blokkli/editor/providers/debug';
+export declare function useDebugLogger(): DebugLogger;

package/dist/runtime/editor/composables/useDebugLogger.js

@@ -0,0 +1,5 @@
+import { inject } from "#imports";
+import { INJECT_EDIT_LOGGER } from "../../helpers/injections.js";
+export function useDebugLogger() {
+  return inject(INJECT_EDIT_LOGGER);
+}

package/dist/runtime/editor/composables/useDelayedIntersectionObserver.d.ts

@@ -0,0 +1,5 @@
+export declare function useDelayedIntersectionObserver(callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverInit): {
+    observe: (el: HTMLElement) => void;
+    unobserve: (el: HTMLElement) => void;
+    init: () => void;
+};

package/dist/runtime/editor/composables/useDelayedIntersectionObserver.js

@@ -0,0 +1,27 @@
+export function useDelayedIntersectionObserver(callback, options = {}) {
+  let observer = null;
+  let collected = [];
+  function init() {
+    observer = new IntersectionObserver(callback, {
+      threshold: 0,
+      ...options
+    });
+    for (const el of collected) {
+      observer.observe(el);
+    }
+    collected = [];
+  }
+  function observe(el) {
+    if (observer) {
+      observer.observe(el);
+      return;
+    }
+    collected.push(el);
+  }
+  function unobserve(el) {
+    if (observer) {
+      observer.unobserve(el);
+    }
+  }
+  return { observe, unobserve, init };
+}

package/dist/runtime/editor/composables/useDialog.d.ts

@@ -0,0 +1,3 @@
+import { type WritableComputedRef } from '#imports';
+import type { GlobalUiDialog } from '../types/ui.js';
+export declare function useDialog(id: string, alignment: GlobalUiDialog['alignment']): WritableComputedRef<boolean>;

package/dist/runtime/editor/composables/useDialog.js

@@ -0,0 +1,16 @@
+import { computed, useBlokkli } from "#imports";
+export function useDialog(id, alignment) {
+  const { ui } = useBlokkli();
+  return computed({
+    get() {
+      return ui.currentDialog.value?.id === id;
+    },
+    set(isOpen) {
+      if (isOpen) {
+        ui.openDialog({ id, alignment });
+      } else {
+        ui.closeDialog(id);
+      }
+    }
+  });
+}