@revenexx/editor 0.1.0

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,49 @@
+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;
+    }
+    const children = instance?.subTree?.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        if (child !== null && typeof child === "object" && "el" in child && child.el instanceof HTMLElement) {
+          return child.el;
+        }
+      }
+    }
+    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'], zIndex?: 'default' | 'high'): WritableComputedRef<boolean>;

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

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

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

@@ -0,0 +1,30 @@
+import type { MaybeRefOrGetter } from 'vue';
+export type UseDismissOptions = {
+    /** Boundary element; interactions outside it dismiss. Ref or getter. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /**
+     * Called when a dismiss condition (outside click, canvas clickAway, Escape
+     * or a selection change) fires.
+     */
+    onDismiss: () => void;
+    /** Dismiss on Escape (unless a dialog is open). Defaults to true. */
+    escape?: boolean;
+    /**
+     * An additional element whose clicks should NOT dismiss — typically the
+     * trigger that toggles the dismissable element.
+     *
+     * Needed because the document click listener runs in the capture phase: the
+     * trigger's own `@click.stop` can't prevent it, so without this a click on
+     * the trigger would dismiss and then immediately re-open.
+     */
+    ignore?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+};
+/**
+ * Close a floating element (dropdown, menu, popover) when the user clicks
+ * outside of it, presses Escape, or changes the editor selection.
+ *
+ * @example
+ * const root = useTemplateRef('root')
+ * useDismiss({ element: root, onDismiss: () => emit('close') })
+ */
+export declare function useDismiss(options: UseDismissOptions): void;

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

@@ -0,0 +1,43 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  toValue,
+  useBlokkli,
+  watch
+} from "#imports";
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+export function useDismiss(options) {
+  const { ui, selection } = useBlokkli();
+  const onDocumentClick = (e) => {
+    const el = toValue(options.element);
+    if (!el) {
+      return;
+    }
+    const target = e.target;
+    if (el.contains(target)) {
+      return;
+    }
+    const ignore = toValue(options.ignore);
+    if (ignore && ignore.contains(target)) {
+      return;
+    }
+    options.onDismiss();
+  };
+  onBlokkliEvent("keyPressed", (e) => {
+    if (options.escape === false || ui.hasDialogOpen.value) {
+      return;
+    }
+    if (e.code === "Escape") {
+      options.onDismiss();
+    }
+  });
+  onBlokkliEvent("window:clickAway", options.onDismiss);
+  watch(selection.uuids, options.onDismiss);
+  watch(selection.isDragging, options.onDismiss);
+  onMounted(
+    () => document.addEventListener("click", onDocumentClick, { capture: true })
+  );
+  onBeforeUnmount(
+    () => document.removeEventListener("click", onDocumentClick, { capture: true })
+  );
+}

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

@@ -0,0 +1,26 @@
+import type { EntityContext } from '#blokkli/types';
+export type EditableFieldOverride = {
+    /** The resolved DOM element, or null if not found. */
+    element: HTMLElement | null;
+    /** The original value captured when the override was created. */
+    originalValue: string;
+    /** The field type (plain or markup). */
+    fieldType: 'plain' | 'markup';
+    /** Apply a value — updates live preview via the correct strategy. */
+    setValue(value: string): void;
+    /** Apply pre-built diff HTML (with <ins>/<del> tags) to the DOM element. */
+    setDiffHtml(html: string): void;
+    /** Restore the original value (shorthand for setValue(originalValue)). */
+    restore(): void;
+};
+/**
+ * Create an override for an editable field.
+ *
+ * Resolves the element and determines the correct update strategy
+ * (direct DOM, mutatedItemProps, or component event), captures the
+ * original value, and returns methods to set/restore the field value.
+ *
+ * If the field element is not found or the field type is unsupported
+ * (e.g. 'table'), returns a no-op override with empty values.
+ */
+export declare function useEditableFieldOverride(fieldName: string, host: EntityContext): EditableFieldOverride;

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

@@ -0,0 +1,148 @@
+import { useBlokkli } from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+const NOOP_OVERRIDE = {
+  element: null,
+  originalValue: "",
+  fieldType: "plain",
+  setValue() {
+  },
+  setDiffHtml() {
+  },
+  restore() {
+  }
+};
+export function useEditableFieldOverride(fieldName, host) {
+  const { eventBus, state, types, definitions, directive, fieldValue, blocks } = useBlokkli();
+  const el = directive.findEditableElement(fieldName, host);
+  if (!el) {
+    return NOOP_OVERRIDE;
+  }
+  const element = el;
+  const editableData = directive.findEditable(fieldName, host);
+  const cfg = types.editableFieldConfig.forName(
+    host.type,
+    host.bundle,
+    fieldName
+  );
+  if (!cfg || cfg.type === "table") {
+    return NOOP_OVERRIDE;
+  }
+  const config = cfg;
+  const fieldType = config.type === "frame" || config.type === "markup" ? "markup" : "plain";
+  const isMarkup = config.type !== "plain";
+  const isComponent = !!editableData?.isComponent;
+  function findMatchingProp(mapping) {
+    return Object.entries(mapping).find(
+      ([_prop, propMapping]) => propMapping?.name === fieldName && propMapping.type === "editable"
+    )?.[0] ?? null;
+  }
+  const providerDefinition = definitions.getProviderDefinition(
+    host.type,
+    host.bundle
+  );
+  let matchingProp = null;
+  if (host.type === itemEntityType) {
+    const block = blocks.getBlock(host.uuid);
+    const defintion = definitions.getBlockDefinition(
+      host.bundle,
+      block?.fieldListType ?? "default",
+      block?.parentBlockBundle ?? null
+    );
+    if (defintion?.propsFieldMapping) {
+      matchingProp = findMatchingProp(defintion.propsFieldMapping);
+    }
+  } else if (providerDefinition) {
+    const mapping = providerDefinition.propsFieldMapping;
+    if (mapping) {
+      matchingProp = findMatchingProp(mapping);
+    }
+  }
+  const mutatedItemPropsKey = providerDefinition ? "HOST" : host.uuid;
+  const usesMutatedProps = !!matchingProp;
+  const usesDirectDom = !isComponent && !matchingProp;
+  const readResult = fieldValue.readFieldValue(fieldName, host);
+  const originalValue = readResult?.value ?? "";
+  const originalMutatedProp = usesMutatedProps && matchingProp ? state.mutatedItemProps[mutatedItemPropsKey]?.[matchingProp] : void 0;
+  let savedNodes = null;
+  function reattachOriginalNodes() {
+    if (savedNodes) {
+      element.replaceChildren(...savedNodes);
+      savedNodes = null;
+      return true;
+    }
+    return false;
+  }
+  function setValue(value) {
+    reattachOriginalNodes();
+    element.removeAttribute("data-bk-diff-active");
+    if (usesMutatedProps && matchingProp) {
+      if (!state.mutatedItemProps[mutatedItemPropsKey]) {
+        state.mutatedItemProps[mutatedItemPropsKey] = {};
+      }
+      state.mutatedItemProps[mutatedItemPropsKey][matchingProp] = value;
+    }
+    if (usesDirectDom) {
+      if (config.type === "plain") {
+        element.textContent = value;
+      } else {
+        element.innerHTML = value;
+      }
+    }
+    if (isComponent) {
+      eventBus.emit("editable:update", {
+        name: fieldName,
+        entityUuid: host.uuid,
+        value
+      });
+    }
+  }
+  function setDiffHtml(html) {
+    if (!element.hasAttribute("data-bk-diff-active")) {
+      savedNodes = Array.from(element.childNodes);
+    }
+    element.setAttribute("data-bk-diff-active", "");
+    element.innerHTML = html;
+  }
+  function restore() {
+    const wasDiffActive = element.hasAttribute("data-bk-diff-active");
+    element.removeAttribute("data-bk-diff-active");
+    if (wasDiffActive && reattachOriginalNodes()) {
+      return;
+    }
+    if (usesMutatedProps && matchingProp) {
+      const propsObj = state.mutatedItemProps[mutatedItemPropsKey];
+      if (propsObj) {
+        if (originalMutatedProp === void 0) {
+          Reflect.deleteProperty(propsObj, matchingProp);
+          if (Object.keys(propsObj).length === 0) {
+            state.mutatedItemProps[mutatedItemPropsKey] = void 0;
+          }
+        } else {
+          propsObj[matchingProp] = originalMutatedProp;
+        }
+      }
+    }
+    if (usesDirectDom) {
+      if (isMarkup) {
+        element.innerHTML = originalValue;
+      } else {
+        element.textContent = originalValue;
+      }
+    }
+    if (isComponent) {
+      eventBus.emit("editable:update", {
+        name: fieldName,
+        entityUuid: host.uuid,
+        value: originalValue
+      });
+    }
+  }
+  return {
+    element,
+    originalValue,
+    fieldType,
+    setValue,
+    setDiffHtml,
+    restore
+  };
+}

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

@@ -0,0 +1,52 @@
+import { type Ref } from '#imports';
+type FocusableElement = HTMLInputElement | HTMLSelectElement | HTMLButtonElement | HTMLTextAreaElement;
+export type UseFocusTrapOptions = {
+    /**
+     * The container element to trap focus within.
+     */
+    container: Ref<HTMLElement | undefined | null>;
+    /**
+     * Whether to auto-focus the first focusable element on mount.
+     *
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Element selector for focusable elements.
+     *
+     * @default 'input,select,button,textarea'
+     */
+    selector?: string;
+    /**
+     * Debug label for element queries.
+     */
+    debugLabel?: string;
+};
+/**
+ * Creates a focus trap within a container element.
+ *
+ * Handles Tab/Shift+Tab keyboard navigation to cycle through focusable elements,
+ * and optionally auto-focuses the first element on mount.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useFocusTrap } from '#blokkli/helpers'
+ *
+ * const containerEl = useTemplateRef('container')
+ * const { onKeyDown } = useFocusTrap({ container: containerEl })
+ * </script>
+ *
+ * <template>
+ *   <div ref="container" @keydown.stop="onKeyDown">
+ *     <input type="text" />
+ *     <button>Submit</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFocusTrap(options: UseFocusTrapOptions): {
+    onKeyDown: (e: KeyboardEvent) => void;
+    getFocusableElements: () => FocusableElement[];
+};
+export {};

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

@@ -0,0 +1,59 @@
+import { useBlokkli, onMounted } from "#imports";
+import { modulo } from "#blokkli/editor/helpers/math";
+export function useFocusTrap(options) {
+  const { element } = useBlokkli();
+  const {
+    container,
+    autoFocus = true,
+    selector = "input,select,button,textarea",
+    debugLabel = "useFocusTrap"
+  } = options;
+  const getFocusableElements = () => {
+    if (!container.value) {
+      return [];
+    }
+    return element.queryAll(container.value, selector, debugLabel);
+  };
+  const onKeyDown = (e) => {
+    if (!container.value || e.code !== "Tab") {
+      return;
+    }
+    const prev = e.shiftKey;
+    const focusableElements = getFocusableElements().filter((el) => {
+      if (el.tabIndex === -1) {
+        return false;
+      }
+      const style = window.getComputedStyle(el);
+      if (style.pointerEvents === "none") {
+        return false;
+      } else if (style.display === "none") {
+        return false;
+      }
+      return !el.disabled;
+    });
+    const activeIndex = Math.max(
+      focusableElements.findIndex((el) => document.activeElement === el),
+      0
+    );
+    const delta = prev ? -1 : 1;
+    const indexToFocus = modulo(activeIndex + delta, focusableElements.length);
+    const elementToFocus = focusableElements[indexToFocus];
+    if (elementToFocus) {
+      elementToFocus.focus();
+      e.preventDefault();
+    }
+  };
+  if (autoFocus) {
+    onMounted(() => {
+      const focusableElements = getFocusableElements();
+      const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
+      if (bestMatch) {
+        bestMatch.focus();
+      }
+    });
+  }
+  return {
+    onKeyDown,
+    getFocusableElements
+  };
+}

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

@@ -0,0 +1,30 @@
+import type { LogMessage } from '#blokkli/editor/providers/debug';
+import type { BlokkliApp } from '#blokkli/editor/types/app';
+export interface BlokkliGlobalWindowObject {
+    messages: LogMessage[];
+    /**
+     * The full editor API (the object returned by `useBlokkli()`).
+     *
+     * Assigned (see `setApp`) so E2E tests can both drive the editor (mutations,
+     * event bus) and assert against live state. Playground-only test scaffolding
+     * augments this interface with a `test` namespace (see the playground
+     * `test-cases` feature).
+     *
+     * The assignment is a test-only seam: its call site (in `EditProvider.vue`)
+     * is wrapped in `blokkli-test-only` markers and stripped from the published
+     * library during the dist build, so `.app` is never set in a real bundle.
+     */
+    app?: BlokkliApp;
+}
+export declare function useGlobalBlokkliObject(): {
+    init: () => void;
+    pushMessage: (message: LogMessage) => void;
+    getMessages: () => LogMessage[];
+    setApp: (app: BlokkliApp) => void;
+    cleanup: () => void;
+};
+declare global {
+    interface Window {
+        __BLOKKLI__?: BlokkliGlobalWindowObject;
+    }
+}

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

@@ -0,0 +1,42 @@
+export function useGlobalBlokkliObject() {
+  function init() {
+    if (typeof window !== "undefined") {
+      if (!window.__BLOKKLI__) {
+        window.__BLOKKLI__ = {
+          messages: []
+        };
+      }
+    }
+  }
+  function pushMessage(message) {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      window.__BLOKKLI__.messages.push(message);
+      if (window.__BLOKKLI__.messages.length > 1e3) {
+        window.__BLOKKLI__.messages = window.__BLOKKLI__.messages.slice(-1e3);
+      }
+    }
+  }
+  function getMessages() {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      return window.__BLOKKLI__.messages;
+    }
+    return [];
+  }
+  function setApp(app) {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      window.__BLOKKLI__.app = app;
+    }
+  }
+  function cleanup() {
+    if (typeof window !== "undefined") {
+      delete window.__BLOKKLI__;
+    }
+  }
+  return {
+    init,
+    pushMessage,
+    getMessages,
+    setApp,
+    cleanup
+  };
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Caches the result of the given callback for the duration of the current state.
+ */
+export declare function useStateBasedCache<T>(cb: () => T): () => T;

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

@@ -0,0 +1,13 @@
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+export function useStateBasedCache(cb) {
+  let cached = null;
+  onBlokkliEvent("state:reloaded", () => {
+    cached = null;
+  });
+  return () => {
+    if (!cached) {
+      cached = cb();
+    }
+    return cached;
+  };
+}

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

@@ -0,0 +1,25 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+import type { Coord } from '../types/geometry.js';
+export type PlacementVertical = 'top' | 'bottom' | 'center' | 'auto';
+export type PlacementHorizontal = 'left' | 'center' | 'right' | 'auto-side';
+type UseStickyToolbarOptions = {
+    getPlacementY?: () => PlacementVertical;
+    getPlacementX?: () => PlacementHorizontal;
+    shouldUpdate?: () => boolean;
+    getWidth?: () => number;
+    getHeight?: () => number;
+    getMargin?: () => number;
+    getAnchorElement?: () => HTMLElement | null;
+    getAnchorCoordinates?: () => Coord | null;
+    getCaretWidth?: () => number;
+    allowHorizontalOverflow?: boolean;
+    isFullscreen?: () => boolean;
+};
+type UseStickyToolbar = {
+    shouldRender: ComputedRef<boolean>;
+    placementY: ComputedRef<'top' | 'bottom' | 'center'>;
+    placementX: ComputedRef<'left' | 'center' | 'right'>;
+    caretX: ComputedRef<number>;
+};
+export declare function useStickyToolbar(el: Readonly<ShallowRef<HTMLElement | null>>, options?: UseStickyToolbarOptions): UseStickyToolbar;
+export {};