@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.41

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

@@ -0,0 +1,35 @@
+export default function(debug) {
+  const logger = debug.createLogger("ElementProvider");
+  function queryAll(target, query2, reason, map) {
+    const results = [];
+    logger.log(`querySelectorAll - "${query2}" - ${reason}`);
+    for (const element of target.querySelectorAll(query2)) {
+      if (element instanceof HTMLElement) {
+        if (map) {
+          const result = map(element);
+          if (result) {
+            results.push(result);
+          }
+        } else {
+          results.push(element);
+        }
+      }
+    }
+    return results;
+  }
+  function query(target, query2, reason, map) {
+    logger.log(`querySelector - "${query2}" - ${reason}`);
+    const match = target.querySelector(query2);
+    if (!(match instanceof HTMLElement)) {
+      return null;
+    }
+    if (map) {
+      return map(match) ?? null;
+    }
+    return match;
+  }
+  return {
+    query,
+    queryAll
+  };
+}

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

@@ -0,0 +1,57 @@
+import { type ValidFeatureKey } from '#blokkli-build/features';
+import { type ComputedRef } from '#imports';
+import type { StorageProvider } from './storage.js';
+import type { AdapterMethods } from '#blokkli/editor/adapter';
+import type { FeatureDefinition } from '../types/features.js';
+export type FeaturesProvider = {
+    /**
+     * List of all registered feature definitions.
+     *
+     * Updates automatically via HMR during development.
+     */
+    features: ComputedRef<FeatureDefinition[]>;
+    /**
+     * List of currently mounted features.
+     *
+     * Features are mounted when their components are rendered in the editor.
+     * This list is used to track which features are active in the current session.
+     */
+    mountedFeatures: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
+    /**
+     * List of available beta features.
+     *
+     * Only includes features marked with `beta: true` in their definition.
+     * These features can be individually enabled/disabled by users.
+     */
+    betaFeatures: ComputedRef<{
+        id: ValidFeatureKey;
+        label: string;
+        description?: string;
+    }[]>;
+    /**
+     * List of beta features that are currently enabled.
+     *
+     * Derived from user settings stored in local storage.
+     * Users can toggle beta features on/off in the settings UI.
+     */
+    enabledBetaFeatures: ComputedRef<ValidFeatureKey[]>;
+    /**
+     * Mount a feature.
+     *
+     * Called when a feature component is mounted/rendered.
+     * Adds the feature to the mountedFeatures list.
+     *
+     * @param feature - The feature definition to mount
+     */
+    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
+    /**
+     * Unmount a feature.
+     *
+     * Called when a feature component is unmounted/destroyed.
+     * Removes the feature from the mountedFeatures list.
+     *
+     * @param id - The feature ID to unmount
+     */
+    unmount: (id: string) => void;
+};
+export default function (storage: StorageProvider): FeaturesProvider;

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

@@ -0,0 +1,53 @@
+import {
+  featureDefinitions
+} from "#blokkli-build/features";
+import { computed, ref } from "#imports";
+import { falsy } from "../../helpers/index.js";
+export default function(storage) {
+  const definitions = ref(featureDefinitions);
+  const mountedFeatures = ref([]);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/features", (mod) => {
+      const newDefinitions = mod;
+      definitions.value = newDefinitions?.featureDefinitions || [];
+    });
+  }
+  const settingsSettings = storage.use(
+    "feature:settings:settings",
+    {}
+  );
+  const enabledBetaFeatures = computed(() => {
+    return Object.entries(settingsSettings.value).map(([key, value]) => {
+      const [a, b] = key.split(":");
+      if (a === "beta" && b && value === true) {
+        return b;
+      }
+      return null;
+    }).filter(falsy);
+  });
+  const betaFeatures = computed(
+    () => definitions.value.map((v) => {
+      if (v.beta && v.label) {
+        return {
+          id: v.id,
+          label: v.label,
+          description: v.description
+        };
+      }
+    }).filter(falsy)
+  );
+  const unmount = (id) => {
+    mountedFeatures.value = mountedFeatures.value.filter((v) => v.id !== id);
+  };
+  const mount = (feature) => {
+    mountedFeatures.value.push(feature);
+  };
+  return {
+    features: computed(() => definitions.value),
+    mountedFeatures: computed(() => mountedFeatures.value),
+    betaFeatures,
+    enabledBetaFeatures,
+    mount,
+    unmount
+  };
+}

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

@@ -0,0 +1,54 @@
+import type { EntityContext } from '#blokkli/types';
+import type { AdaptersProvider } from './adapters.js';
+import type { DefinitionProvider } from './definition.js';
+import type { DirectiveProvider } from './directive.js';
+import type { StateProvider } from './state.js';
+import type { BlockDefinitionProvider } from './types.js';
+import './fieldValueAdapterTypes.js';
+/**
+ * Simplified field type for editable fields.
+ */
+export type FieldValueType = 'plain' | 'markup';
+/**
+ * A text field value as provided by the adapter or directive system.
+ */
+export type TextFieldValue = {
+    uuid: string;
+    fieldName: string;
+    value: string;
+    fieldType: FieldValueType;
+};
+/**
+ * The result of reading a field value.
+ */
+export type ReadFieldValueResult = {
+    value: string;
+    fieldType: FieldValueType;
+};
+export type FieldValueProvider = {
+    /**
+     * Resolve an editable field config to its simplified type.
+     * Returns 'plain' for text fields, 'markup' for rich text/frame fields, null for unsupported.
+     */
+    resolveFieldType: (entityType: string, bundle: string, fieldName: string) => FieldValueType | null;
+    /**
+     * Read the current value of an editable field on a block or entity.
+     * Tries the registered getValue() callback first, falls back to DOM element reading.
+     */
+    readValue: (entityType: string, uuid: string, bundle: string, fieldName: string, fieldType: FieldValueType) => string;
+    /**
+     * Read the current value and field type of an editable field.
+     *
+     * Uses the correct strategy based on the field's configuration:
+     * 1. Component editables — use getValue() callback
+     * 2. Mutated props — read from mutatedItemProps or mutatedEntity
+     * 3. Direct DOM — read innerHTML (markup) or textContent (plain)
+     */
+    readFieldValue: (fieldName: string, host: EntityContext) => ReadFieldValueResult | null;
+    /**
+     * Get all text field values from the page.
+     * Tries the adapter method first, falls back to reading from directive system.
+     */
+    getTextFieldValues: () => Promise<TextFieldValue[]>;
+};
+export default function fieldValueProvider(adapters: AdaptersProvider, directive: DirectiveProvider, state: StateProvider, types: BlockDefinitionProvider, definitions: DefinitionProvider): FieldValueProvider;

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

@@ -0,0 +1,126 @@
+import { itemEntityType } from "#blokkli-build/config";
+import "./fieldValueAdapterTypes";
+export default function fieldValueProvider(adapters, directive, state, types, definitions) {
+  function resolveFieldType(entityType, bundle, fieldName) {
+    const config = types.editableFieldConfig.forName(
+      entityType,
+      bundle,
+      fieldName
+    );
+    if (!config) return null;
+    if (config.type === "table") return null;
+    if (config.type === "frame" || config.type === "markup") return "markup";
+    return "plain";
+  }
+  function findMatchingProp(mapping, fieldName) {
+    return Object.entries(mapping).find(
+      ([_prop, propMapping]) => propMapping?.name === fieldName && propMapping.type === "editable"
+    )?.[0] ?? null;
+  }
+  function readFieldValue(fieldName, host) {
+    const element = directive.findEditableElement(fieldName, host);
+    if (!element) {
+      return null;
+    }
+    const editableData = directive.findEditable(fieldName, host);
+    const cfg = types.editableFieldConfig.forName(
+      host.type,
+      host.bundle,
+      fieldName
+    );
+    if (!cfg || cfg.type === "table") {
+      return null;
+    }
+    const fieldType = cfg.type === "frame" || cfg.type === "markup" ? "markup" : "plain";
+    const isMarkup = cfg.type !== "plain";
+    const isComponent = !!editableData?.isComponent;
+    const providerDefinition = definitions.getProviderDefinition(
+      host.type,
+      host.bundle
+    );
+    let matchingProp = null;
+    if (host.type === itemEntityType) {
+      const definition = definitions.getBlockDefinition(host.bundle, "default");
+      if (definition?.propsFieldMapping) {
+        matchingProp = findMatchingProp(definition.propsFieldMapping, fieldName);
+      }
+    } else if (providerDefinition) {
+      const mapping = providerDefinition.propsFieldMapping;
+      if (mapping) {
+        matchingProp = findMatchingProp(mapping, fieldName);
+      }
+    }
+    let value;
+    if (isComponent && editableData?.getValue) {
+      value = editableData.getValue();
+    } else if (matchingProp) {
+      if (providerDefinition) {
+        value = state.mutatedEntity.value[matchingProp] || "";
+      } else {
+        value = state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
+      }
+    } else if (isMarkup) {
+      value = element.innerHTML;
+    } else {
+      value = element.textContent || "";
+    }
+    return { value, fieldType };
+  }
+  function readValue(entityType, uuid, bundle, fieldName, fieldType) {
+    const result = readFieldValue(fieldName, {
+      type: entityType,
+      uuid,
+      bundle
+    });
+    if (result) {
+      return result.value;
+    }
+    const element = directive.findEditableElement(fieldName, {
+      type: entityType,
+      uuid,
+      bundle
+    });
+    if (element) {
+      return fieldType === "markup" ? element.innerHTML || "" : element.textContent || "";
+    }
+    return "";
+  }
+  async function getTextFieldValues() {
+    const adapter = adapters.adapter;
+    if (adapter.getTextFieldValues) {
+      return adapter.getTextFieldValues();
+    }
+    const values = [];
+    const fields = state.mutatedFields.value;
+    for (const field of fields) {
+      for (const item of field.list) {
+        const configs = types.editableFieldConfig.forEntityTypeAndBundle(
+          itemEntityType,
+          item.bundle
+        );
+        for (const config of configs) {
+          const result = readFieldValue(config.name, {
+            type: itemEntityType,
+            uuid: item.uuid,
+            bundle: item.bundle
+          });
+          if (result && result.value.trim()) {
+            values.push({
+              uuid: item.uuid,
+              fieldName: config.name,
+              value: result.value,
+              fieldType: result.fieldType
+            });
+          }
+        }
+      }
+    }
+    return values;
+  }
+  return {
+    resolveFieldType,
+    readValue,
+    readFieldValue,
+    getTextFieldValues
+  };
+}

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

@@ -0,0 +1,13 @@
+import type { TextFieldValue } from './fieldValue.js';
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Return raw text field values for all blocks.
+         *
+         * Used by the fieldValue provider to score unprocessed markup instead of
+         * DOM-rendered content. If not implemented, the provider falls back to
+         * reading text from the directive system / DOM.
+         */
+        getTextFieldValues?: () => Promise<TextFieldValue[]>;
+    }
+}

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

@@ -0,0 +1,41 @@
+import type { BlokkliFieldElement } from '../types/field.js';
+import type { DomProvider } from './dom.js';
+import type { BlockDefinitionProvider } from './types.js';
+import type { StateProvider } from './state.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;
+    /**
+     * Get the z-index of the field containing the given block UUID.
+     *
+     * @param uuid - The block UUID
+     * @returns The z-index of the field, or 0 if not found
+     */
+    getFieldZIndex: (uuid: string) => number;
+    /**
+     * Compare field priority between two blocks.
+     * Returns > 0 if uuidA wins, < 0 if uuidB wins, 0 if equal.
+     * Uses z-index as primary sort, DOM order as tiebreaker.
+     *
+     * @param uuidA - First block UUID
+     * @param uuidB - Second block UUID
+     * @returns Comparison result
+     */
+    compareFieldPriority: (uuidA: string, uuidB: string) => number;
+};
+export default function (dom: DomProvider, types: BlockDefinitionProvider, state: StateProvider): FieldsProvider;

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

@@ -0,0 +1,99 @@
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+export default function(dom, types, state) {
+  const fieldCache = /* @__PURE__ */ new Map();
+  const fieldInfoCache = /* @__PURE__ */ new Map();
+  const comparisonCache = /* @__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;
+  }
+  function getFieldInfo(uuid) {
+    const cached = fieldInfoCache.get(uuid);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldKey = state.getFieldKeyForUuid(uuid);
+    if (!fieldKey) {
+      fieldInfoCache.set(uuid, null);
+      return null;
+    }
+    const separatorIndex = fieldKey.indexOf(":");
+    const entityUuid = fieldKey.substring(0, separatorIndex);
+    const fieldName = fieldKey.substring(separatorIndex + 1);
+    const field = dom.getRegisteredField(entityUuid, fieldName);
+    const info = field ? { zIndex: field.zIndex, element: field.element } : null;
+    fieldInfoCache.set(uuid, info);
+    return info;
+  }
+  function getFieldZIndex(uuid) {
+    return getFieldInfo(uuid)?.zIndex ?? 0;
+  }
+  function compareFieldPriority(uuidA, uuidB) {
+    const cacheKey = uuidA + "\0" + uuidB;
+    const cached = comparisonCache.get(cacheKey);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldA = getFieldInfo(uuidA);
+    const fieldB = getFieldInfo(uuidB);
+    const zIndexA = fieldA?.zIndex ?? 0;
+    const zIndexB = fieldB?.zIndex ?? 0;
+    let result = 0;
+    if (zIndexA !== zIndexB) {
+      result = zIndexA - zIndexB;
+    } else {
+      const elA = fieldA?.element;
+      const elB = fieldB?.element;
+      if (elA && elB && elA !== elB) {
+        const position = elA.compareDocumentPosition(elB);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) result = -1;
+        else if (position & Node.DOCUMENT_POSITION_PRECEDING) result = 1;
+      }
+    }
+    comparisonCache.set(cacheKey, result);
+    return result;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    fieldCache.clear();
+    fieldInfoCache.clear();
+    comparisonCache.clear();
+  });
+  return {
+    find,
+    getFieldZIndex,
+    compareFieldPriority
+  };
+}

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/indicators.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+export default function() {
+  const indicators = ref([]);
+  const hovered = ref("");
+  function addIndicator(indicator) {
+    indicators.value.push(indicator);
+  }
+  function removeIndicator(id, uuid) {
+    indicators.value = indicators.value.filter(
+      (v) => v.id !== id || v.uuid !== uuid
+    );
+  }
+  function setHovered(uuid) {
+    hovered.value = uuid ?? "";
+  }
+  return {
+    indicators,
+    hovered,
+    addIndicator,
+    removeIndicator,
+    setHovered
+  };
+}

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 {};