@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -11,6 +11,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * The title displayed in the sidebar header.
      */
     title: string;
+    /**
+     * The title for the tooltip. Falls back to the title.
+     */
+    tooltipTitle?: string;
     /**
      * Optional text for the interactive tour.
      *
@@ -92,8 +96,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }, {
     showSidebar: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    updated: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: () => void;
+    toggle: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     /**
      * Unique identifier for this sidebar.
@@ -103,6 +108,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * The title displayed in the sidebar header.
      */
     title: string;
+    /**
+     * The title for the tooltip. Falls back to the title.
+     */
+    tooltipTitle?: string;
     /**
      * Optional text for the interactive tour.
      *
@@ -184,16 +193,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }> & Readonly<{
     onUpdated?: (() => any) | undefined;
+    onToggle?: (() => any) | undefined;
 }>, {
     keyCode: string;
     size: {
         width: number;
         height: number;
     };
-    minHeight: number;
+    tourText: string;
     minWidth: number;
+    minHeight: number;
     region: SidebarRegion;
-    tourText: string;
+    tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

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

@@ -0,0 +1,43 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { AdaptersProvider } from './adapters.js';
+import type { StateProvider } from './state.js';
+import type { UiProvider } from './ui.js';
+import type { AdapterContext } from '#blokkli/editor/adapter';
+import type { TextProvider } from './texts.js';
+import type { AnalyzeNode, AnalyzeResult, Analyzer, AnalyzerType } from '../features/analyze/analyzers/types.js';
+import { AnalyzerContext } from '../features/analyze/analyzers/helpers/Context.js';
+export type AnalyzeProvider = {
+    /**
+     * All available analyzers, fetched once from adapters.
+     * Empty array until initialized.
+     */
+    analyzers: Readonly<Ref<Analyzer[]>>;
+    /**
+     * Whether analyzers have been fetched and initialized.
+     */
+    isInitialized: Readonly<Ref<boolean>>;
+    /**
+     * Fetch analyzers and call init() on each one. Idempotent.
+     */
+    ensureInitialized: () => Promise<void>;
+    /**
+     * Create an AnalyzerContext scoped to the given element.
+     */
+    createContext: (element: HTMLElement, signal?: AbortSignal) => AnalyzerContext;
+    /**
+     * Run a single analyzer and return its results as a flat array.
+     */
+    runAnalyzer: (analyzer: Analyzer, context: AnalyzerContext) => Promise<AnalyzeResult[]>;
+    /**
+     * Run analyzeText on all analyzers that support it.
+     * Optionally filter by analyzer type.
+     * Returns nodes per analyzer per text.
+     */
+    runOnTexts: (texts: string[], analyzerType?: AnalyzerType) => Promise<Array<{
+        analyzerId: string;
+        analyzerLabel?: string;
+        text: string;
+        nodes: AnalyzeNode[];
+    }>>;
+};
+export default function analyzeProvider(adapters: AdaptersProvider, state: StateProvider, ui: UiProvider, context: ComputedRef<AdapterContext>, $t: TextProvider): AnalyzeProvider;

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

@@ -0,0 +1,78 @@
+import { ref } from "#imports";
+import { AnalyzerContext } from "../features/analyze/analyzers/helpers/Context.js";
+import { normalizeToArray } from "../features/analyze/analyzers/helpers/normalizeArray.js";
+export default function analyzeProvider(adapters, state, ui, context, $t) {
+  const analyzers = ref([]);
+  const isInitialized = ref(false);
+  let initPromise = null;
+  async function doInit() {
+    const fetched = await adapters.getAggregated("getAnalyzers");
+    const initCtx = new AnalyzerContext(
+      context.value.language,
+      ui.interfaceLanguage.value,
+      ui.providerElement,
+      state,
+      $t
+    );
+    await Promise.all(
+      fetched.map(async (analyzer) => {
+        if (analyzer.init) {
+          await analyzer.init(initCtx);
+        }
+      })
+    );
+    analyzers.value = fetched;
+    isInitialized.value = true;
+  }
+  function ensureInitialized() {
+    if (isInitialized.value) {
+      return Promise.resolve();
+    }
+    if (!initPromise) {
+      initPromise = doInit();
+    }
+    return initPromise;
+  }
+  function createContext(element, signal) {
+    return new AnalyzerContext(
+      context.value.language,
+      ui.interfaceLanguage.value,
+      element,
+      state,
+      $t,
+      signal
+    );
+  }
+  async function runAnalyzer(analyzer, ctx) {
+    return normalizeToArray(analyzer.run(ctx));
+  }
+  async function runOnTexts(texts, analyzerType) {
+    await ensureInitialized();
+    let textAnalyzers = analyzers.value.filter((a) => a.analyzeText);
+    if (analyzerType) {
+      textAnalyzers = textAnalyzers.filter((a) => a.type === analyzerType);
+    }
+    const results = [];
+    for (const text of texts) {
+      for (const analyzer of textAnalyzers) {
+        const nodes = await analyzer.analyzeText(text, context.value.language);
+        const label = typeof analyzer.label === "function" ? analyzer.label(context.value.language) : analyzer.label;
+        results.push({
+          analyzerId: analyzer.id,
+          analyzerLabel: label,
+          text,
+          nodes
+        });
+      }
+    }
+    return results;
+  }
+  return {
+    analyzers,
+    isInitialized,
+    ensureInitialized,
+    createContext,
+    runAnalyzer,
+    runOnTexts
+  };
+}

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

@@ -182,6 +182,10 @@ export type AnimationProvider = {
      * Defaults to 'move' when pressing Space, otherwise determined by highest zIndex renderer.
      */
     cursor: ComputedRef<CursorKeyword>;
+    /**
+     * Get the current mouse coordinates.
+     */
+    getMouseCoords: () => Coord;
     /**
      * Handle a click event by calling onClick handlers on renderers.
      * Returns true if any renderer claimed the click, false otherwise.

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

@@ -437,6 +437,11 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
   onBlokkliEvent("select:toggle", requestDraw);
   onBlokkliEvent("option:update", requestDraw);
   onBlokkliEvent("state:reloaded", requestDraw);
+  onBlokkliEvent("dragging:move", (e) => {
+    mouseX = e.x;
+    mouseY = e.y;
+    requestDraw();
+  });
   const dpi = computed(() => {
     const viewportWidth = ui.viewport.value.width;
     const viewportHeight = ui.viewport.value.height;
@@ -513,6 +518,7 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
     setCanvasElement,
     removeCanvasElement,
     cursor,
+    getMouseCoords: () => ({ x: mouseX, y: mouseY }),
     handleClick,
     registerRenderer,
     unregisterRenderer,

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

@@ -1,6 +1,6 @@
 import { type Ref, type ComputedRef } from '#imports';
 import type { BlockDefinition, FragmentDefinition, ProviderDefinition } from '#blokkli-build/definitions';
-import type { ValidFieldListTypes, BlockBundleWithNested } from '#blokkli-build/generated-types';
+import type { ValidFieldListTypes, BlockBundleWithNested, ValidProviderTypes } from '#blokkli-build/generated-types';
 import type { DeepReadonly } from 'vue';
 import type { BlockDefinitionOptionsInput } from '../../types/definitions.js';
 import type { RuntimeBlockOptionArray } from '../../../global/types/blockOptions.js';
@@ -95,4 +95,4 @@ export type DefinitionProvider = {
      */
     bundlesWithAutoAdd: ComputedRef<string[]>;
 };
-export default function (): DefinitionProvider;
+export default function (providerType: ValidProviderTypes): DefinitionProvider;

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

@@ -1,7 +1,7 @@
 import { computed, ref, readonly } from "#imports";
 import definitions from "#blokkli-build/definitions";
 import { OPTIONS } from "#blokkli-build/runtime-options";
-export default function() {
+export default function(providerType) {
   const blocks = ref(definitions.blocks);
   const fragments = ref(definitions.fragments);
   const providers = ref(definitions.providers);
@@ -42,6 +42,8 @@ export default function() {
             acc[bundle + "__field:" + renderFor.fieldList] = definition;
           } else if ("fieldListType" in renderFor) {
             acc[bundle + "__field:" + renderFor.fieldListType] = definition;
+          } else if (renderFor.providerType) {
+            acc[bundle + "__provider:" + renderFor.providerType] = definition;
           }
         });
       } else {
@@ -80,6 +82,10 @@ export default function() {
         return blocksByKey.value[forParentBundle];
       }
     }
+    const forProviderType = bundle + "__provider:" + providerType;
+    if (blocksByKey.value[forProviderType]) {
+      return blocksByKey.value[forProviderType];
+    }
     return blocksByKey.value[bundle];
   }
   function getFragmentDefinition(name) {

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

@@ -7,6 +7,7 @@ import type { ElementProvider } from './element.js';
 import type { Rectangle } from '../types/geometry.js';
 import type { DraggableExistingBlock, DraggableItem } from '../types/draggable.js';
 import type { RegisteredField, RegisterFieldData, RenderedFieldListItem } from '../types/field.js';
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
 type RegisteredFieldType = {
     entityType: string;
     entityBundle: string;
@@ -186,6 +187,10 @@ export type DomProvider = {
      * Get the drag element for a block.
      */
     getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
+    /**
+     * The fragments that are generally available to be added anywhere on the page.
+     */
+    generallyAvailableFragments: ComputedRef<BlokkliFragmentName[]>;
     /**
      * Get debug data for troubleshooting.
      */

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

@@ -1,5 +1,5 @@
 import { reactive, ref, computed, onMounted } from "#imports";
-import { falsy } from "#blokkli/helpers";
+import { falsy, onlyUnique } from "#blokkli/helpers";
 import { cloneElementWithStyles } from "../helpers/dom/index.js";
 import {
   onBlokkliEvent,
@@ -28,6 +28,14 @@ export default function(ui, debug, state, element) {
   const isInitalizing = ref(true);
   let settleTimeout = null;
   const settleKey = ref(0);
+  const generallyAvailableFragments = computed(() => {
+    return Object.values(registeredFields).flatMap((field) => {
+      if (field && field.allowedFragments.length) {
+        return field.allowedFragments;
+      }
+      return null;
+    }).filter(falsy).filter(onlyUnique);
+  });
   const observedElements = {};
   function getBoundingClientRect(element2) {
     logger.log("getBoundingClientRect", element2);
@@ -526,6 +534,7 @@ export default function(ui, debug, state, element) {
     getRegisteredField,
     getFieldsAllowingFragment,
     registeredBlocks: computed(() => registeredBlocks),
-    getBoundingClientRect
+    getBoundingClientRect,
+    generallyAvailableFragments
   };
 }

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

@@ -0,0 +1,55 @@
+import type { DraggableItemTypes, DraggableItem } from '../types/draggable.js';
+import type { BlokkliFieldElement, BlokkliItemHost } from '#blokkli/editor/types/field';
+import type { DropArea } from '#blokkli/editor/types/ui';
+type MaybePromise<T> = T | Promise<T>;
+export type DropResolveContext<K extends keyof DraggableItemTypes> = {
+    items: DraggableItemTypes[K][];
+    field: BlokkliFieldElement;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export type DropExecuteContext<K extends keyof DraggableItemTypes> = DropResolveContext<K> & {
+    bundle: string;
+};
+export type DropExecuteResult = {
+    /** If true, the dispatcher will focus the editable field after the block is added. */
+    focusEditable?: boolean;
+};
+export type DropHandler<K extends keyof DraggableItemTypes> = {
+    /**
+     * Optional. Called at drop time to refine which bundles are applicable.
+     * Can read DataTransfer, detect content types, re-map via clipboardMapBundle, etc.
+     * Returns the refined list of possible bundles.
+     * If omitted, the overlay calls execute() directly without bundle resolution.
+     */
+    resolveBundles?: (ctx: DropResolveContext<K>) => string[] | Promise<string[]>;
+    /**
+     * Called to perform the actual mutation.
+     * If resolveBundles was provided, `ctx.bundle` is the resolved bundle
+     * (either the single result or the user's BundleSelector pick).
+     */
+    execute: (ctx: DropExecuteContext<K>) => MaybePromise<DropExecuteResult | void>;
+};
+type DropAreaProviderFunction = (items: DraggableItem[]) => DropArea[] | DropArea | undefined;
+export type DragDropProvider = {
+    registerDropHandler: <K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>) => void;
+    unregisterDropHandler: <K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>) => void;
+    getDropHandler: <K extends keyof DraggableItemTypes>(itemType: K) => DropHandler<K> | undefined;
+    /**
+     * Register a drop area provider function.
+     *
+     * The function will be called when drop areas are requested during drag operations.
+     * It receives the currently dragged items and can return drop areas where those items can be dropped.
+     */
+    addDropArea: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Unregister a drop area provider function.
+     */
+    removeDropArea: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Get all drop areas from all registered providers.
+     */
+    getDropAreas: (items: DraggableItem[]) => DropArea[];
+};
+export default function (): DragDropProvider;
+export {};

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

@@ -0,0 +1,37 @@
+import { falsy } from "../../helpers/index.js";
+export default function() {
+  const handlers = /* @__PURE__ */ new Map();
+  let dropAreaFunctions = [];
+  const registerDropHandler = (itemType, handler) => {
+    handlers.set(itemType, handler);
+  };
+  const unregisterDropHandler = (itemType, handler) => {
+    if (handlers.get(itemType) === handler) {
+      handlers.delete(itemType);
+    }
+  };
+  const getDropHandler = (itemType) => {
+    return handlers.get(itemType);
+  };
+  const addDropArea = (fn) => {
+    dropAreaFunctions.push(fn);
+  };
+  const removeDropArea = (fn) => {
+    dropAreaFunctions = dropAreaFunctions.filter((v) => v !== fn);
+  };
+  const getDropAreas = (items) => dropAreaFunctions.flatMap((fn) => {
+    const v = fn(items);
+    if (v) {
+      return v;
+    }
+    return null;
+  }).filter(falsy);
+  return {
+    registerDropHandler,
+    unregisterDropHandler,
+    getDropHandler,
+    addDropArea,
+    removeDropArea,
+    getDropAreas
+  };
+}

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

@@ -1,6 +1,7 @@
 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.
@@ -19,5 +20,22 @@ export type FieldsProvider = {
      * @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): FieldsProvider;
+export default function (dom: DomProvider, types: BlockDefinitionProvider, state: StateProvider): FieldsProvider;

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

@@ -1,6 +1,8 @@
 import { onBlokkliEvent } from "#blokkli/editor/composables";
-export default function(dom, types) {
+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);
@@ -38,10 +40,60 @@ export default function(dom, types) {
     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
+    find,
+    getFieldZIndex,
+    compareFieldPriority
   };
 }

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

@@ -6,6 +6,12 @@ import {
 } from "#imports";
 import { storageDefaults } from "#blokkli-build/editor-config";
 const PREFIX = "blokkli:";
+const migrations = {
+  showTourPopup: (oldValue) => ({
+    key: "popup:tour:closed",
+    value: !oldValue
+  })
+};
 const getExisting = (key) => {
   try {
     const value = localStorage.getItem(key);
@@ -114,5 +120,14 @@ export default async function(adapter, context) {
     values.value[storageKey] = void 0;
     window.localStorage.removeItem(storageKey);
   };
+  for (const [oldKey, migrate] of Object.entries(migrations)) {
+    const oldStorageKey = PREFIX + oldKey;
+    const oldValue = getExisting(oldStorageKey);
+    if (oldValue !== void 0) {
+      const { key, value } = migrate(oldValue);
+      localStorage.setItem(PREFIX + key, JSON.stringify(value));
+      localStorage.removeItem(oldStorageKey);
+    }
+  }
   return { use, useWithContextPrefix, clearAll, clear };
 }

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

@@ -375,6 +375,12 @@ export type UiProvider = {
      * When true, adds 'bk-has-sidebar-right' class to document root.
      */
     hasSidebarRight: ComputedRef<boolean>;
+    /**
+     * Whether any sidebar is active in the right-bottom region.
+     *
+     * When true, adds 'bk-has-sidebar-right-bottom' class to document root.
+     */
+    hasSidebarRightBottom: ComputedRef<boolean>;
     /**
      * Reference to the main layout element.
      *

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

@@ -190,12 +190,18 @@ export default function(eventBus, providerElement, storage, context, element, ma
   };
   const activeSidebarsLeft = ref([]);
   const activeSidebarsRight = ref([]);
+  const activeSidebarsRightBottom = ref([]);
   function setActiveSidebar(region, id) {
     if (region === "left") {
       if (activeSidebarsLeft.value.includes(id)) {
         return;
       }
       activeSidebarsLeft.value.push(id);
+    } else if (region === "right-bottom") {
+      if (activeSidebarsRightBottom.value.includes(id)) {
+        return;
+      }
+      activeSidebarsRightBottom.value.push(id);
     } else {
       if (activeSidebarsRight.value.includes(id)) {
         return;
@@ -208,6 +214,10 @@ export default function(eventBus, providerElement, storage, context, element, ma
       activeSidebarsLeft.value = activeSidebarsLeft.value.filter(
         (v) => v !== id
       );
+    } else if (region === "right-bottom") {
+      activeSidebarsRightBottom.value = activeSidebarsRightBottom.value.filter(
+        (v) => v !== id
+      );
     } else {
       activeSidebarsRight.value = activeSidebarsRight.value.filter(
         (v) => v !== id
@@ -220,6 +230,9 @@ export default function(eventBus, providerElement, storage, context, element, ma
   const hasSidebarRight = computed(() => {
     return !!activeSidebarsRight.value.length;
   });
+  const hasSidebarRightBottom = computed(() => {
+    return !!activeSidebarsRightBottom.value.length;
+  });
   const blockingPaddingX = computed(() => 15);
   const blockingPaddingY = computed(() => 50);
   const viewportPadding = computed(() => 10);
@@ -326,6 +339,11 @@ export default function(eventBus, providerElement, storage, context, element, ma
     "bk-has-sidebar-right",
     hasSidebarRight
   );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right-bottom",
+    hasSidebarRightBottom
+  );
   addElementClasses(document.documentElement, ["bk-html-root"]);
   addElementClasses(document.body, "bk-body");
   addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
@@ -418,6 +436,7 @@ export default function(eventBus, providerElement, storage, context, element, ma
     removeActiveSidebar,
     hasSidebarLeft,
     hasSidebarRight,
+    hasSidebarRightBottom,
     mainLayoutElement,
     openDialog,
     closeDialog,