@blokkli/editor 2.0.0-alpha.24 → 2.0.0-alpha.25

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { Renderer } from '../animationProvider.js';
+import type { Renderer } from '../providers/animation.js';
 /**
  * Register a WebGL renderer with automatic cleanup on unmount.
  *

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

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

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

@@ -1,4 +1,4 @@
-import type { DomProvider } from '../domProvider.js';
+import type { DomProvider } from '../providers/dom.js';
 /**
  * Helper composable to handle registering the block in the DOM provider.
  */

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

@@ -8,8 +8,19 @@ 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;
+    }
+    const rootElement2 = instance?.proxy?.$el;
+    if (rootElement2 instanceof HTMLElement) {
+      return rootElement2;
+    }
+    return null;
+  }
   function setRootElement() {
-    const newElement = instance?.proxy?.$el;
+    const newElement = getDraggableElement();
     if (newElement && rootElement !== newElement) {
       rootElement = newElement;
       dom.registerBlock(key, uuid, newElement);

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

@@ -1,2 +1,2 @@
-import type { DebugLogger } from '../debugProvider.js';
+import type { DebugLogger } from '../providers/debug.js';
 export default function (): DebugLogger;

package/dist/runtime/helpers/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 default function useFocusTrap(options: UseFocusTrapOptions): {
+    onKeyDown: (e: KeyboardEvent) => void;
+    getFocusableElements: () => FocusableElement[];
+};
+export {};

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

@@ -0,0 +1,59 @@
+import { useBlokkli, onMounted } from "#imports";
+import { modulo } from "#blokkli/helpers";
+export default 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/helpers/composables/useGlobalBlokkliObject.d.ts

@@ -1,4 +1,4 @@
-import type { LogMessage } from '../debugProvider.js';
+import type { LogMessage } from '../providers/debug.js';
 type BlokkliGlobalWindowObject = {
     messages: LogMessage[];
 };

package/dist/runtime/helpers/{useTransitionedValue.js → composables/useTransitionedValue.js}

@@ -1,5 +1,5 @@
 import { computed, watch } from "vue";
-import { easeOutQuad } from "./easing.js";
+import { easeOutQuad } from "./../easing.js";
 function isRGB(value) {
   return Array.isArray(value) && value.length === 3;
 }

package/dist/runtime/helpers/imports/index.d.ts

@@ -1 +1,2 @@
-export declare function getComponent(type: 'block' | 'fragment', bundle: string, fieldListType?: string, parentBundle?: string): any;
+import type { Component } from 'vue';
+export declare function getComponent(type: 'block' | 'fragment', bundle: string, fieldListType?: string, parentBundle?: string, allComponents?: Record<string, Component> | null): any;

package/dist/runtime/helpers/imports/index.js

@@ -26,19 +26,28 @@ function objectOrImport(key) {
   }
   return item;
 }
-export function getComponent(type, bundle, fieldListType, parentBundle) {
+export function getComponent(type, bundle, fieldListType, parentBundle, allComponents) {
   if (fieldListType) {
     const key2 = `${type}:${bundle}__f:${fieldListType}`;
+    if (allComponents && allComponents[key2]) {
+      return allComponents[key2];
+    }
     if (chunkMapping[key2]) {
       return objectOrImport(key2);
     }
   }
   if (parentBundle) {
     const key2 = `${type}:${bundle}__p:${parentBundle}`;
+    if (allComponents && allComponents[key2]) {
+      return allComponents[key2];
+    }
     if (chunkMapping[key2]) {
       return objectOrImport(key2);
     }
   }
   const key = `${type}:${bundle}`;
+  if (allComponents && allComponents[key]) {
+    return allComponents[key];
+  }
   return objectOrImport(key);
 }

package/dist/runtime/helpers/{animationProvider.d.ts → providers/animation.d.ts}

@@ -1,31 +1,88 @@
 import { type ComputedRef, type WritableComputedRef } from '#imports';
-import type { UiProvider } from './uiProvider.js';
+import type { UiProvider } from './ui.js';
 import { type ProgramInfo } from 'twgl.js';
-import type { StorageProvider } from './storageProvider.js';
-import type { CursorKeyword } from './dom/index.js';
+import type { StorageProvider } from './storage.js';
+import type { CursorKeyword } from '../dom/index.js';
 import type { CanvasDrawEvent, Coord } from '#blokkli/types';
-import type { SelectionProvider } from './selectionProvider.js';
-import type { RectangleBufferCollector } from './webgl/index.js';
-import type { DebugProvider } from './debugProvider.js';
+import type { SelectionProvider } from './selection.js';
+import type { RectangleBufferCollector } from '../webgl/index.js';
+import type { DebugProvider } from './debug.js';
+import type { KeyboardProvider } from './keyboard.js';
 export type RenderContext = CanvasDrawEvent & {
     changeOptionsTransition: number;
 };
 type PreferredRenderingMode = 'auto' | 'webgl' | '2d';
 export type Renderer<T = RectangleBufferCollector<any>> = {
+    /**
+     * Unique identifier for this renderer.
+     */
     id: string;
+    /**
+     * Z-index for rendering order.
+     *
+     * Lower values render first (bottom), higher values render last (top).
+     */
     zIndex: number;
+    /**
+     * Whether this renderer is currently enabled.
+     *
+     * If not provided or returns true, the renderer will execute.
+     */
     enabled?: () => boolean;
+    /**
+     * Whether this renderer should be the only one rendered.
+     *
+     * When true or returns true, all other renderers are skipped.
+     * Useful for debugging or exclusive rendering modes.
+     */
     only?: boolean | (() => boolean);
+    /**
+     * Get the cursor style when hovering over this renderer's content.
+     *
+     * Higher zIndex renderers take precedence.
+     * @returns The cursor keyword, or null/undefined to defer to lower renderers
+     */
     cursor?: () => CursorKeyword | undefined | null;
+    /**
+     * Handle click events on this renderer's content.
+     *
+     * Renderers are checked from highest to lowest zIndex.
+     * @param coord - Mouse coordinates in screen and artboard space
+     * @returns True to claim the click and stop propagation, false/undefined to continue
+     */
     onClick?: (coord: {
         mouse: Coord;
         mouseArtboard: Coord;
     }) => boolean | undefined;
+    /**
+     * Create the buffer collector instance for this renderer.
+     *
+     * The collector manages data buffers and rendering state.
+     */
     collector: () => T;
+    /**
+     * Define the WebGL shader program for this renderer.
+     *
+     * @returns Object with vertex and fragment shader source code
+     */
     program?: () => {
         shaders: [string, string];
     };
+    /**
+     * Render using WebGL.
+     *
+     * @param ctx - Rendering context with viewport, mouse, artboard data
+     * @param gl - WebGL rendering context
+     * @param program - Compiled shader program
+     */
     render: (ctx: RenderContext, gl: WebGLRenderingContext, program: ProgramInfo) => void;
+    /**
+     * Fallback rendering using 2D canvas context.
+     *
+     * Used when WebGL is disabled or unavailable.
+     * @param ctx - Rendering context
+     * @param ctx2d - 2D canvas rendering context
+     */
     renderFallback?: (ctx: RenderContext, ctx2d: CanvasRenderingContext2D) => void;
 };
 export type AnimationProvider = {
@@ -47,10 +104,40 @@ export type AnimationProvider = {
      * For debugging purposes only (e.g., context loss testing).
      */
     getRawGL: () => WebGLRenderingContext | null;
+    /**
+     * Set shared uniforms that are common across all renderers.
+     *
+     * Sets resolution, artboard offset, scale, and DPI uniforms.
+     * @param gl - WebGL rendering context
+     * @param programInfo - Shader program to set uniforms on
+     */
     setSharedUniforms: (gl: WebGLRenderingContext, programInfo: ProgramInfo) => void;
+    /**
+     * Device pixel ratio adjusted for canvas size limits.
+     *
+     * Automatically scales down to prevent exceeding WebGL/2D canvas size limits
+     * and memory constraints. Lower in low-performance mode.
+     */
     dpi: ComputedRef<number>;
+    /**
+     * Whether WebGL is supported and enabled.
+     *
+     * Null initially, then true/false after detection.
+     */
     webglSupported: ComputedRef<boolean | null>;
+    /**
+     * Whether WebGL rendering is currently enabled.
+     *
+     * Can be set to force WebGL on/off. Automatically disables if unsupported.
+     */
     webglEnabled: WritableComputedRef<boolean>;
+    /**
+     * User's preferred rendering mode.
+     *
+     * - 'auto': Uses WebGL if supported, falls back to 2D
+     * - 'webgl': Forces WebGL rendering
+     * - '2d': Forces 2D canvas rendering
+     */
     preferredRenderingMode: WritableComputedRef<PreferredRenderingMode>;
     /**
      * Reactive property that indicates if we're currently rendering with WebGL.
@@ -87,6 +174,12 @@ export type AnimationProvider = {
      * The programs are cached by the given ID.
      */
     registerProgram: (id: string, gl: WebGLRenderingContext, shaders: string[]) => ProgramInfo;
+    /**
+     * Current cursor style determined by active renderers.
+     *
+     * Automatically updated each frame based on mouse position and renderer priorities.
+     * Defaults to 'move' when pressing Space, otherwise determined by highest zIndex renderer.
+     */
     cursor: ComputedRef<CursorKeyword>;
     /**
      * Handle a click event by calling onClick handlers on renderers.
@@ -106,5 +199,5 @@ export type AnimationProvider = {
      */
     unregisterRenderer: (id: string) => void;
 };
-export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, debug: DebugProvider): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, debug: DebugProvider, keyboard: KeyboardProvider): AnimationProvider;
 export {};

package/dist/runtime/helpers/{animationProvider.js → providers/animation.js}

@@ -1,5 +1,5 @@
-import onBlokkliEvent from "./composables/onBlokkliEvent.js";
-import useAnimationFrame from "./composables/useAnimationFrame.js";
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+import useAnimationFrame from "../composables/useAnimationFrame.js";
 import {
   ref,
   computed,
@@ -9,7 +9,7 @@ import {
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-import { useTransitionedValue } from "./useTransitionedValue.js";
+import { useTransitionedValue } from "../composables/useTransitionedValue.js";
 function configureWebGLContext(gl) {
   gl.enable(gl.BLEND);
   gl.disable(gl.DEPTH_TEST);
@@ -17,7 +17,7 @@ function configureWebGLContext(gl) {
   gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE);
   gl.blendEquation(gl.FUNC_ADD);
 }
-export default function(ui, storage, selection, debug) {
+export default function(ui, storage, selection, debug, keyboard) {
   const logger = debug.createLogger("Animation");
   const preferredRenderingMode = storage.use(
     "preferredRenderingMode",
@@ -394,13 +394,17 @@ export default function(ui, storage, selection, debug) {
       }
     }
     let newCursor = "default";
-    for (let i = sortedRenderers.length - 1; i >= 0; i--) {
-      const renderer = sortedRenderers[i];
-      if (renderer.cursor && (!renderer.enabled || renderer.enabled())) {
-        const cursorValue = renderer.cursor();
-        if (cursorValue) {
-          newCursor = cursorValue;
-          break;
+    if (keyboard.isPressingSpace.value) {
+      newCursor = "move";
+    } else {
+      for (let i = sortedRenderers.length - 1; i >= 0; i--) {
+        const renderer = sortedRenderers[i];
+        if (renderer.cursor && (!renderer.enabled || renderer.enabled())) {
+          const cursorValue = renderer.cursor();
+          if (cursorValue) {
+            newCursor = cursorValue;
+            break;
+          }
         }
       }
     }
@@ -482,6 +486,12 @@ export default function(ui, storage, selection, debug) {
     }
     return registeredPrograms.get(id);
   }
+  watch(keyboard.isPressingSpace, () => {
+    requestDraw();
+  });
+  watch(keyboard.isPressingControl, () => {
+    requestDraw();
+  });
   return {
     requestDraw,
     gl,

package/dist/runtime/helpers/providers/blocks.d.ts

@@ -1,10 +1,32 @@
 import type { RenderedFieldListItem } from '#blokkli/types';
-import type { DomProvider } from '../domProvider.js';
-import type { StateProvider } from '../stateProvider.js';
+import type { DomProvider } from './dom.js';
+import type { StateProvider } from './state.js';
 import type { AdapterContext } from '#blokkli/adapter';
-import type { ComputedRef } from 'vue';
+import { type ComputedRef } from '#imports';
 export type BlocksProvider = {
+    /**
+     * Get a rendered block by its UUID.
+     *
+     * Returns a RenderedFieldListItem with complete block metadata including:
+     * - Host entity and field information
+     * - Publishing status and schedule
+     * - Library/fragment data (if applicable)
+     * - Parent block bundle (for nested blocks)
+     *
+     * Results are cached and invalidated on state reload.
+     *
+     * @param uuid - The block's UUID
+     * @returns The rendered block item, or undefined if not found
+     */
     getBlock: (uuid: string) => RenderedFieldListItem | undefined;
+    /**
+     * Get all rendered blocks in the current state.
+     *
+     * Returns an array of all blocks with complete metadata.
+     * Iterates through all UUIDs in state and builds RenderedFieldListItem for each.
+     *
+     * @returns Array of all rendered block items
+     */
     getAllBlocks: () => RenderedFieldListItem[];
 };
 export default function (state: StateProvider, dom: DomProvider, context: ComputedRef<AdapterContext>): BlocksProvider;

package/dist/runtime/helpers/providers/blocks.js

@@ -1,8 +1,10 @@
 import { itemEntityType } from "#blokkli-build/config";
 import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+import { ref } from "#imports";
 import { BUNDLE_BLOKKLI_FRAGMENT } from "#blokkli/constants";
 export default function(state, dom, context) {
   const renderedFieldListItemCache = /* @__PURE__ */ new Map();
+  const refreshKey = ref(1);
   function getParentBlockBundle(field) {
     if (field.entityType !== itemEntityType) {
       return null;
@@ -36,6 +38,9 @@ export default function(state, dom, context) {
     return null;
   }
   function getBlock(uuid) {
+    if (refreshKey.value === 0) {
+      return;
+    }
     const cached = renderedFieldListItemCache.get(uuid);
     if (cached) {
       return cached;
@@ -76,6 +81,9 @@ export default function(state, dom, context) {
     return renderedItem;
   }
   function getAllBlocks() {
+    if (refreshKey.value === 0) {
+      return [];
+    }
     const blocks = [];
     const uuids = state.getAllUuids();
     for (let i = 0; i < uuids.length; i++) {
@@ -93,6 +101,7 @@ export default function(state, dom, context) {
   }
   onBlokkliEvent("state:reloaded", () => {
     renderedFieldListItemCache.clear();
+    refreshKey.value++;
   });
   return {
     getBlock,

package/dist/runtime/helpers/providers/commands.d.ts

@@ -0,0 +1,41 @@
+import type { Command } from '#blokkli/types';
+type CommandsProviderFunction = () => Command[] | Command | undefined;
+export type CommandsProvider = {
+    /**
+     * Register a command provider function.
+     *
+     * The function will be called when commands are requested.
+     * It can return a single command, an array of commands, or undefined.
+     *
+     * @param fn - Function that returns commands
+     *
+     * @example
+     * ```ts
+     * commands.add(() => ({
+     *   id: 'my-command',
+     *   label: 'My Command',
+     *   callback: () => console.log('executed'),
+     * }))
+     * ```
+     */
+    add: (fn: CommandsProviderFunction) => void;
+    /**
+     * Unregister a command provider function.
+     *
+     * Removes a previously registered function so it no longer provides commands.
+     *
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove: (fn: CommandsProviderFunction) => void;
+    /**
+     * Get all commands from all registered providers.
+     *
+     * Calls all registered provider functions, flattens the results,
+     * and filters out undefined values.
+     *
+     * @returns Array of all available commands
+     */
+    getCommands: () => Command[];
+};
+export default function (): CommandsProvider;
+export {};

package/dist/runtime/helpers/{commandsProvider.js → providers/commands.js}

@@ -1,4 +1,4 @@
-import { falsy } from "./index.js";
+import { falsy } from "../index.js";
 export default function() {
   let functions = [];
   const add = (fn) => {