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

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

@@ -0,0 +1,23 @@
+import type { BlokkliFieldElement } from '../types/field.js';
+import type { DomProvider } from './dom.js';
+import type { BlockDefinitionProvider } from './types.js';
+export type FieldsProvider = {
+    /**
+     * Find a field element by host entity UUID and field name.
+     *
+     * Returns a BlokkliFieldElement with complete field metadata including:
+     * - Field configuration (label, cardinality, allowed bundles)
+     * - Host entity information
+     * - Nesting level and field list type
+     * - HTML element reference
+     * - Drop alignment settings
+     *
+     * Results are cached and invalidated on state reload.
+     *
+     * @param uuid - The host entity UUID
+     * @param fieldName - The name of the field
+     * @returns The field element with metadata, or undefined if not found
+     */
+    find: (uuid: string, fieldName: string) => BlokkliFieldElement | undefined;
+};
+export default function (dom: DomProvider, types: BlockDefinitionProvider): FieldsProvider;

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

@@ -0,0 +1,47 @@
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+export default function(dom, types) {
+  const fieldCache = /* @__PURE__ */ new Map();
+  function find(uuid, fieldName) {
+    const key = uuid + ":" + fieldName;
+    const cached = fieldCache.get(key);
+    if (cached) {
+      return cached;
+    }
+    const registeredField = dom.getRegisteredField(uuid, fieldName);
+    if (!registeredField) {
+      return;
+    }
+    const definition = types.getFieldConfig(
+      registeredField.entity.type,
+      registeredField.entity.bundle,
+      registeredField.fieldName
+    );
+    if (!definition) {
+      return;
+    }
+    const fieldElement = {
+      key,
+      name: registeredField.fieldName,
+      label: definition.label,
+      isNested: registeredField.isNested,
+      nestingLevel: registeredField.nestingLevel,
+      fieldListType: registeredField.fieldListType,
+      hostEntityType: registeredField.entity.type,
+      hostEntityBundle: registeredField.entity.bundle,
+      hostEntityUuid: registeredField.entity.uuid,
+      allowedBundles: definition.allowedBundles,
+      allowedFragments: registeredField.allowedFragments,
+      cardinality: definition.cardinality,
+      element: registeredField.element,
+      dropAlignment: registeredField.dropAlignment
+    };
+    fieldCache.set(key, fieldElement);
+    return fieldElement;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    fieldCache.clear();
+  });
+  return {
+    find
+  };
+}

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

@@ -0,0 +1,6 @@
+import { type BlokkliIcon } from '#blokkli-build/icons';
+import { type Ref } from '#imports';
+export type IconsProvider = {
+    icons: Ref<Record<BlokkliIcon, string>>;
+};
+export default function (): IconsProvider;

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

@@ -0,0 +1,16 @@
+import { icons as iconsBuild } from "#blokkli-build/icons";
+import { ref } from "#imports";
+export default function() {
+  const icons = ref(iconsBuild);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/icons", (mod) => {
+      const newIcons = mod;
+      if (newIcons) {
+        icons.value = newIcons.icons;
+      }
+    });
+  }
+  return {
+    icons
+  };
+}

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

@@ -0,0 +1,44 @@
+import { type Ref } from 'vue';
+import type { BlockIndicator } from '../types/ui.js';
+export type IndicatorsProvider = {
+    /**
+     * List of all active block indicators.
+     *
+     * Indicators are visual badges/icons that appear on blocks
+     * (e.g., anchor icons, schedule indicators, etc.).
+     */
+    indicators: Ref<BlockIndicator[]>;
+    /**
+     * UUID of the currently hovered block.
+     *
+     * Used to show/hide hover-specific indicators.
+     */
+    hovered: Ref<string>;
+    /**
+     * Add a block indicator.
+     *
+     * Registers a new indicator to be displayed on a block.
+     *
+     * @param indicator - The indicator configuration
+     */
+    addIndicator: (indicator: BlockIndicator) => void;
+    /**
+     * Remove a block indicator.
+     *
+     * Removes an indicator based on its ID and the block UUID.
+     * Both must match to remove the indicator.
+     *
+     * @param id - The indicator ID
+     * @param uuid - The block UUID
+     */
+    removeIndicator: (id: string, uuid: string) => void;
+    /**
+     * Set the currently hovered block.
+     *
+     * Updates the hovered state used to show hover-specific indicators.
+     *
+     * @param uuid - The block UUID, or null/undefined to clear
+     */
+    setHovered: (uuid?: string | null) => void;
+};
+export default function (): IndicatorsProvider;

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

@@ -0,0 +1,77 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { KeyboardShortcut } from '#blokkli/editor/types/ui';
+import type { BlokkliEventBus } from '../events/index.js';
+type RegisteredShortcut = {
+    key: string;
+    shortcut: KeyboardShortcut;
+};
+export type KeyboardProvider = {
+    /**
+     * Whether the Space key is currently pressed.
+     *
+     * Commonly used to enable panning mode in the artboard.
+     */
+    isPressingSpace: Readonly<Ref<boolean>>;
+    /**
+     * Whether Control/Meta key is currently pressed.
+     *
+     * Meta is Cmd on macOS, Ctrl on Windows/Linux.
+     * Also true when CapsLock is active.
+     */
+    isPressingControl: Readonly<Ref<boolean>>;
+    /**
+     * Whether the Shift key is currently pressed.
+     */
+    isPressingShift: Readonly<Ref<boolean>>;
+    /**
+     * Update keyboard modifier state from a mouse/pointer event.
+     *
+     * Useful for updating modifier state during drag operations where
+     * keyboard events might not fire.
+     *
+     * @param e - The mouse or pointer event
+     */
+    setShortcutStateFromEvent: (e: MouseEvent | PointerEvent) => void;
+    /**
+     * List of all registered keyboard shortcuts.
+     *
+     * Shortcuts are registered by features, buttons, and actions to enable
+     * keyboard navigation and commands.
+     */
+    shortcuts: ComputedRef<RegisteredShortcut[]>;
+    /**
+     * Register a keyboard shortcut.
+     *
+     * Adds the shortcut to the global shortcuts list for display in help UI.
+     *
+     * @param shortcut - The keyboard shortcut configuration
+     */
+    registerShortcut: (shortcut: KeyboardShortcut) => void;
+    /**
+     * Unregister a keyboard shortcut.
+     *
+     * Removes the shortcut from the global shortcuts list.
+     *
+     * @param shortcut - The keyboard shortcut to remove
+     */
+    unregisterShortcut: (shortcut: KeyboardShortcut) => void;
+    /**
+     * Lock keyboard events.
+     *
+     * Prevents keyboard shortcuts from firing. Used when text input is focused
+     * or dialogs are open to avoid unintended actions.
+     *
+     * @param id - Unique identifier for this lock
+     */
+    lockKeyboardEvents: (id: string) => void;
+    /**
+     * Unlock keyboard events.
+     *
+     * Removes a keyboard lock, re-enabling shortcuts when all locks are removed.
+     *
+     * @param id - The lock identifier to remove
+     */
+    unlockKeyboardEvents: (id: string) => void;
+};
+export default function (eventBus: BlokkliEventBus): KeyboardProvider;
+export {};

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

@@ -0,0 +1,98 @@
+import {
+  ref,
+  readonly,
+  onMounted,
+  onBeforeUnmount,
+  computed
+} from "vue";
+function getControlState(e) {
+  if ("code" in e && e.code === "CapsLock") {
+    return true;
+  }
+  return e.getModifierState("Control") || e.getModifierState("Meta");
+}
+export default function(eventBus) {
+  const isPressingControl = ref(false);
+  const isPressingSpace = ref(false);
+  const isPressingShift = ref(false);
+  const registeredShortcuts = ref([]);
+  const keyboardLocks = ref([]);
+  const keyboardLocked = computed(() => !!keyboardLocks.value.length);
+  const onKeyUp = (e) => {
+    isPressingControl.value = e.getModifierState("Control") || e.getModifierState("Meta");
+    isPressingShift.value = e.getModifierState("Shift");
+    if (e.code === "Space") {
+      isPressingSpace.value = false;
+    }
+    if (e.code === "Control" || e.key === "CapsLock") {
+      isPressingControl.value = false;
+    }
+  };
+  const onKeyDown = (e) => {
+    if (keyboardLocked.value) {
+      return;
+    }
+    isPressingControl.value = getControlState(e);
+    isPressingShift.value = e.getModifierState("Shift");
+    if (!isPressingSpace.value) {
+      eventBus.emit("keyPressed", {
+        code: e.key,
+        shift: e.shiftKey,
+        meta: e.ctrlKey || e.metaKey || isPressingControl.value,
+        originalEvent: e
+      });
+    }
+    if (e.code === "Space") {
+      isPressingSpace.value = true;
+    }
+  };
+  const onVisibilityChange = () => {
+    isPressingControl.value = false;
+    isPressingSpace.value = false;
+  };
+  onMounted(() => {
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("keyup", onKeyUp);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+  });
+  const getShortcutKey = (shortcut) => [!!shortcut.meta, !!shortcut.shift, shortcut.code].join("-");
+  const registerShortcut = (shortcut) => {
+    registeredShortcuts.value.push({ key: getShortcutKey(shortcut), shortcut });
+  };
+  const unregisterShortcut = (shortcut) => {
+    const key = getShortcutKey(shortcut);
+    registeredShortcuts.value = registeredShortcuts.value.filter(
+      (v) => v.key !== key
+    );
+  };
+  const shortcuts = computed(() => registeredShortcuts.value);
+  function setShortcutStateFromEvent(e) {
+    isPressingControl.value = getControlState(e);
+    isPressingShift.value = !!e.shiftKey;
+  }
+  function lockKeyboardEvents(id) {
+    if (keyboardLocks.value.includes(id)) {
+      return;
+    }
+    keyboardLocks.value.push(id);
+  }
+  function unlockKeyboardEvents(id) {
+    keyboardLocks.value = keyboardLocks.value.filter((v) => v !== id);
+  }
+  return {
+    isPressingSpace: readonly(isPressingSpace),
+    isPressingControl: readonly(isPressingControl),
+    isPressingShift: readonly(isPressingShift),
+    shortcuts,
+    registerShortcut,
+    unregisterShortcut,
+    setShortcutStateFromEvent,
+    lockKeyboardEvents,
+    unlockKeyboardEvents
+  };
+}

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

@@ -0,0 +1,81 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { AddAction } from '../types/actions.js';
+type PluginAddFunction<T> = () => T | T[] | undefined;
+type AddActionFunction = PluginAddFunction<AddAction>;
+export type ItemDropdownAction = {
+    id: string;
+    label: string;
+    description?: string;
+    enabled?: boolean;
+    icon?: BlokkliIcon;
+    bundle?: string;
+    weight?: number;
+    group: string;
+    callback: () => void;
+};
+type ItemDropdownActionFunction = PluginAddFunction<ItemDropdownAction>;
+export type MenuButtonPlugin = {
+    id: string;
+    title: string;
+    description: string;
+    icon?: BlokkliIcon;
+    type?: 'success' | 'danger' | 'yellow';
+    weight?: number;
+    secondary?: boolean;
+    disabled?: boolean;
+    callback: () => void;
+};
+type MenuButtonFunction = PluginAddFunction<MenuButtonPlugin>;
+type PluginFunctionMap = {
+    addAction: AddActionFunction;
+    itemDropdownAction: ItemDropdownActionFunction;
+    menuButton: MenuButtonFunction;
+};
+type PluginDataMap = {
+    addAction: AddAction;
+    itemDropdownAction: ItemDropdownAction;
+    menuButton: MenuButtonPlugin;
+};
+export type PluginProvider = {
+    /**
+     * Register a plugin provider function.
+     *
+     * The function will be called when plugins of this type are requested.
+     * It can return a single plugin, an array of plugins, or undefined.
+     *
+     * @param type - The plugin type ('addAction', 'itemDropdownAction', 'menuButton')
+     * @param fn - Function that returns plugin(s)
+     *
+     * @example
+     * ```ts
+     * plugin.add('addAction', () => ({
+     *   id: 'custom-add',
+     *   label: 'Add Custom',
+     *   bundles: ['text'],
+     *   callback: () => console.log('add'),
+     * }))
+     * ```
+     */
+    add<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    /**
+     * Unregister a plugin provider function.
+     *
+     * Removes a previously registered function so it no longer provides plugins.
+     *
+     * @param type - The plugin type
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    /**
+     * Get all plugins from all registered providers.
+     *
+     * Calls all registered provider functions for this type, flattens the results,
+     * and filters out undefined values.
+     *
+     * @param type - The plugin type to retrieve
+     * @returns Array of all available plugins of this type
+     */
+    get<T extends keyof PluginDataMap>(type: T): PluginDataMap[T][];
+};
+export default function (): PluginProvider;
+export {};

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

@@ -0,0 +1,84 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { BlocksProvider } from './blocks.js';
+import type { DraggableItem } from '../types/draggable.js';
+import type { RenderedFieldListItem } from '../types/field.js';
+import type { InteractionMode } from '../types/ui.js';
+export type SelectionProvider = {
+    /**
+     * The currently selected UUIDs.
+     */
+    uuids: Readonly<Ref<string[]>>;
+    /**
+     * Whether the host is currently selected.
+     */
+    hasHostSelected: ComputedRef<boolean>;
+    /**
+     * Whether anything is selected.
+     */
+    hasAnythingSelected: ComputedRef<boolean>;
+    /**
+     * The selected bundles.
+     */
+    bundles: ComputedRef<string[]>;
+    /**
+     * The currently selected UUIDs as a Set.
+     */
+    uuidsSet: ComputedRef<Set<string>>;
+    /**
+     * The currently selected field list items.
+     */
+    items: ComputedRef<RenderedFieldListItem[]>;
+    /**
+     * The currently selected field list item, if only a single item is selected.
+     */
+    item: ComputedRef<RenderedFieldListItem | null>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    isDragging: ComputedRef<boolean>;
+    /**
+     * Whether the user is currently dragging at least one existing block.
+     */
+    isDraggingExisting: ComputedRef<boolean>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    draggingMode: Readonly<Ref<InteractionMode | null>>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    interactionMode: Readonly<Ref<InteractionMode | null>>;
+    /**
+     * Whether the user is currently in multi select mode.
+     */
+    isMultiSelecting: Ref<boolean>;
+    /**
+     * The label of the active editable field.
+     */
+    activeEditableLabel: Ref<string | null>;
+    /**
+     * Whether the user is currently changing block options.
+     */
+    isChangingOptions: Ref<boolean>;
+    /**
+     * The items that are currently being dragged.
+     */
+    dragItems: Ref<DraggableItem[]>;
+    /**
+     * The block bundles of the items being dragged.
+     */
+    dragItemsBundles: ComputedRef<string[]>;
+    /**
+     * Determine if the given block UUID is currently selected.
+     */
+    isBlockSelected(uuid: string): boolean;
+    /**
+     * Lock selection.
+     */
+    lockSelection: (key: string) => void;
+    /**
+     * Unlock selection.
+     */
+    unlockSelection: (key: string) => void;
+};
+export default function (blocks: BlocksProvider): SelectionProvider;

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

@@ -0,0 +1,159 @@
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { computed, ref } from "#imports";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+export default function(blocks) {
+  const selectedUuids = ref([]);
+  const hasHostSelected = ref(false);
+  const draggingMode = ref(null);
+  const activeEditableLabel = ref(null);
+  const isChangingOptions = ref(false);
+  const isMultiSelecting = ref(false);
+  const interactionMode = ref("mouse");
+  const selectionLocks = ref([]);
+  const selectedRenderedItems = computed(() => {
+    const items = [];
+    for (let i = 0; i < selectedUuids.value.length; i++) {
+      const uuid = selectedUuids.value[i];
+      if (!uuid) {
+        continue;
+      }
+      const item2 = blocks.getBlock(uuid);
+      if (!item2) {
+        continue;
+      }
+      items.push(item2);
+    }
+    return items;
+  });
+  const item = computed(() => {
+    if (selectedRenderedItems.value.length === 1) {
+      return selectedRenderedItems.value[0] ?? null;
+    }
+    return null;
+  });
+  const bundles = computed(() => {
+    return selectedRenderedItems.value.map((v) => v.bundle).filter(onlyUnique);
+  });
+  const selectionIsLocked = computed(() => !!selectionLocks.value.length);
+  const dragItems = ref([]);
+  const dragItemsBundles = computed(
+    () => dragItems.value.map((v) => {
+      if (v.itemType === "existing") {
+        return v.block.bundle;
+      } else if ("itemBundle" in v) {
+        return v.itemBundle;
+      }
+    }).filter(falsy)
+  );
+  const uuidsSet = computed(() => new Set(selectedUuids.value));
+  const isDragging = computed(() => !!draggingMode.value);
+  function updateSelectedUuids(uuids, force) {
+    if (selectionIsLocked.value && !force) {
+      return;
+    }
+    selectedUuids.value = uuids;
+  }
+  function unselectItems() {
+    if (selectedUuids.value.length === 0) {
+      return;
+    }
+    updateSelectedUuids([]);
+  }
+  function onSelect(v, force) {
+    if (typeof v === "string") {
+      updateSelectedUuids([v], force);
+    } else {
+      updateSelectedUuids(v.filter(onlyUnique), force);
+    }
+  }
+  onBlokkliEvent("select", onSelect);
+  onBlokkliEvent("select:force", (arg) => {
+    onSelect(arg, true);
+  });
+  onBlokkliEvent("select:start", (e) => {
+    updateSelectedUuids((e.uuids || []).filter(onlyUnique));
+    isMultiSelecting.value = true;
+    interactionMode.value = e.mode;
+  });
+  onBlokkliEvent("select:toggle", (uuid) => {
+    if (selectedUuids.value.includes(uuid)) {
+      updateSelectedUuids(selectedUuids.value.filter((v) => v !== uuid));
+    } else {
+      selectedUuids.value.push(uuid);
+    }
+  });
+  onBlokkliEvent("select:end", (uuids) => {
+    isMultiSelecting.value = false;
+    if (!uuids || uuids.length === 0 && selectedUuids.value.length === 0) {
+      return;
+    }
+    updateSelectedUuids(uuids);
+  });
+  onBlokkliEvent("dragging:start", (e) => {
+    draggingMode.value = e.mode;
+    isMultiSelecting.value = false;
+    dragItems.value = e.items;
+    const blocks2 = e.items.filter((v) => v.itemType === "existing");
+    if (blocks2.length) {
+      updateSelectedUuids(blocks2.map((v) => v.block.uuid));
+    }
+  });
+  onBlokkliEvent("dragging:end", () => {
+    draggingMode.value = null;
+  });
+  onBlokkliEvent("select:unselect", () => {
+    updateSelectedUuids([]);
+  });
+  onBlokkliEvent("select:host", () => {
+    hasHostSelected.value = true;
+  });
+  onBlokkliEvent("select:host:unselect", () => {
+    hasHostSelected.value = false;
+  });
+  onBlokkliEvent("window:clickAway", () => {
+    unselectItems();
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  });
+  const isDraggingExisting = computed(() => {
+    return isDragging.value && !!dragItems.value.length && dragItems.value.some(
+      (v) => v.itemType === "existing" || v.itemType === "existing_structure"
+    );
+  });
+  const hasAnythingSelected = computed(() => {
+    return hasHostSelected.value || !!selectedUuids.value.length;
+  });
+  function isBlockSelected(uuid) {
+    return uuidsSet.value.has(uuid);
+  }
+  function lockSelection(key) {
+    selectionLocks.value.push(key);
+  }
+  function unlockSelection(key) {
+    selectionLocks.value = selectionLocks.value.filter((v) => v !== key);
+  }
+  return {
+    uuids: selectedUuids,
+    bundles,
+    items: selectedRenderedItems,
+    item,
+    isDragging,
+    isDraggingExisting,
+    activeEditableLabel,
+    isChangingOptions,
+    isMultiSelecting,
+    draggingMode,
+    interactionMode,
+    dragItems,
+    uuidsSet,
+    dragItemsBundles,
+    isBlockSelected,
+    hasHostSelected: computed(() => {
+      return hasHostSelected.value && !selectedUuids.value.length;
+    }),
+    hasAnythingSelected,
+    lockSelection,
+    unlockSelection
+  };
+}