@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.51

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

@@ -0,0 +1,139 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
+    id: string;
+    /**
+     * The label used in commands and tour.
+     */
+    label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
+    titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
+    titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
+    editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
+    keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
+    icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
+    tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
+    modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
+    weight?: number | string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (data: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
+    id: string;
+    /**
+     * The label used in commands and tour.
+     */
+    label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
+    titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
+    titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
+    editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
+    keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
+    icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
+    tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
+    modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
+    weight?: number | string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((data: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {
+        isActive: any;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+import PluginBlockIndicator from './BlockIndicator/index.vue.js';
+import PluginContextMenu from './ContextMenu/index.vue.js';
+import PluginDebugOverlay from './DebugOverlay/index.vue.js';
+import PluginItemAction from './ItemAction/index.vue.js';
+import PluginSidebar from './Sidebar/index.vue.js';
+import PluginToolbarButton from './ToolbarButton/index.vue.js';
+import PluginTourItem from './TourItem/index.vue.js';
+import PluginViewOption from './ViewOption/index.vue.js';
+export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/editor/plugins/index.js

@@ -0,0 +1,18 @@
+import PluginBlockIndicator from "./BlockIndicator/index.vue";
+import PluginContextMenu from "./ContextMenu/index.vue";
+import PluginDebugOverlay from "./DebugOverlay/index.vue";
+import PluginItemAction from "./ItemAction/index.vue";
+import PluginSidebar from "./Sidebar/index.vue";
+import PluginToolbarButton from "./ToolbarButton/index.vue";
+import PluginTourItem from "./TourItem/index.vue";
+import PluginViewOption from "./ViewOption/index.vue";
+export {
+  PluginBlockIndicator,
+  PluginContextMenu,
+  PluginDebugOverlay,
+  PluginItemAction,
+  PluginSidebar,
+  PluginToolbarButton,
+  PluginTourItem,
+  PluginViewOption
+};

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

@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { FullBlokkliAdapter, BlokkliAdapterExtension, AdapterExtensionMethods, AdapterContext, BlokkliAdapterExtensionFactory } from '#blokkli/editor/adapter';
+export type AdapterExtensionDefinition = {
+    namespace: string;
+    factory: BlokkliAdapterExtensionFactory<any>;
+};
+export interface AdaptersProvider {
+    /**
+     * The base adapter.
+     */
+    adapter: FullBlokkliAdapter<any>;
+    /**
+     * All registered extensions.
+     */
+    extensions: BlokkliAdapterExtension<any>[];
+    /**
+     * Get aggregated results from base adapter + all extensions.
+     * Results from extensions have their IDs prefixed with namespace.
+     */
+    getAggregated<K extends keyof AdapterExtensionMethods<any>>(methodName: K): Promise<any[]>;
+    /**
+     * Call a method, routing to the correct source based on namespace in pluginId.
+     * If pluginId has namespace prefix, calls extension; otherwise calls base adapter.
+     */
+    callNamespaced<K extends keyof AdapterExtensionMethods<any>>(methodName: K, args: {
+        pluginId: string;
+    } & Record<string, any>): Promise<any>;
+    /**
+     * Get extension by namespace.
+     */
+    getExtension(namespace: string): BlokkliAdapterExtension<any> | undefined;
+}
+export default function adaptersProvider(adapter: FullBlokkliAdapter<any>, extensionDefinitions: AdapterExtensionDefinition[], context: ComputedRef<AdapterContext>): Promise<AdaptersProvider>;

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

@@ -0,0 +1,88 @@
+const NAMESPACE_SEPARATOR = ":";
+export default async function adaptersProvider(adapter, extensionDefinitions, context) {
+  const extensions = await Promise.all(
+    extensionDefinitions.map(async (def) => ({
+      namespace: def.namespace,
+      methods: await Promise.resolve(def.factory(context))
+    }))
+  );
+  const extensionsByNamespace = /* @__PURE__ */ new Map();
+  for (const ext of extensions) {
+    extensionsByNamespace.set(ext.namespace, ext);
+  }
+  function prefixId(namespace, id) {
+    return `${namespace}${NAMESPACE_SEPARATOR}${id}`;
+  }
+  function parseNamespace(id) {
+    const sepIndex = id.indexOf(NAMESPACE_SEPARATOR);
+    if (sepIndex > 0 && id.startsWith("@")) {
+      return [id.substring(0, sepIndex), id.substring(sepIndex + 1)];
+    }
+    return [null, id];
+  }
+  function normalizeToArray(result) {
+    if (Array.isArray(result)) {
+      return result;
+    }
+    if (result !== void 0 && result !== null) {
+      return [result];
+    }
+    return [];
+  }
+  async function getAggregated(methodName) {
+    const results = [];
+    const baseMethod = adapter[methodName];
+    if (typeof baseMethod === "function") {
+      const baseResults = await baseMethod.call(adapter);
+      results.push(...normalizeToArray(baseResults));
+    }
+    for (const ext of extensions) {
+      const extMethod = ext.methods[methodName];
+      if (typeof extMethod === "function") {
+        const extResults = await extMethod();
+        results.push(
+          ...normalizeToArray(extResults).map((item) => {
+            if (item && typeof item === "object" && "id" in item) {
+              return { ...item, id: prefixId(ext.namespace, item.id) };
+            }
+            return item;
+          })
+        );
+      }
+    }
+    return results;
+  }
+  async function callNamespaced(methodName, args) {
+    const [namespace, localId] = parseNamespace(args.pluginId);
+    if (namespace) {
+      const ext = extensionsByNamespace.get(namespace);
+      if (!ext) {
+        throw new Error(
+          `No adapter extension found for namespace: ${namespace}`
+        );
+      }
+      const method = ext.methods[methodName];
+      if (typeof method !== "function") {
+        throw new Error(
+          `Extension ${namespace} does not implement ${String(methodName)}`
+        );
+      }
+      return method({ ...args, pluginId: localId });
+    }
+    const baseMethod = adapter[methodName];
+    if (typeof baseMethod !== "function") {
+      throw new Error(`Base adapter does not implement ${String(methodName)}`);
+    }
+    return baseMethod.call(adapter, args);
+  }
+  function getExtension(namespace) {
+    return extensionsByNamespace.get(namespace);
+  }
+  return {
+    adapter,
+    extensions,
+    getAggregated,
+    callNamespaced,
+    getExtension
+  };
+}

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

@@ -0,0 +1,44 @@
+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 { ReadabilityProvider } from './readability.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, readability: ReadabilityProvider): AnalyzeProvider;

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

@@ -0,0 +1,81 @@
+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, readability) {
+  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,
+      void 0,
+      readability
+    );
+    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,
+      readability
+    );
+  }
+  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, $t) : 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

@@ -0,0 +1,208 @@
+import { type ComputedRef, type WritableComputedRef } from '#imports';
+import type { UiProvider } from './ui.js';
+import { type ProgramInfo } from 'twgl.js';
+import type { StorageProvider } from './storage.js';
+import type { CursorKeyword } from '#blokkli/editor/types';
+import type { SelectionProvider } from './selection.js';
+import type { RectangleBufferCollector } from '../helpers/webgl/index.js';
+import type { DebugProvider } from './debug.js';
+import type { KeyboardProvider } from './keyboard.js';
+import type { BlokkliEventBus, CanvasDrawEvent } from '../events/index.js';
+import type { Coord } from '../types/geometry.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 = {
+    /**
+     * Request an animation loop. Should be called when UI state changes.
+     */
+    requestDraw: () => void;
+    /**
+     * Reset the animation state and force a remount of all renderer components.
+     */
+    reset: () => void;
+    /**
+     * Get the WebGL rendering context.
+     * Returns undefined if context is lost or not available.
+     */
+    gl: () => WebGLRenderingContext | undefined;
+    /**
+     * Get the raw WebGL context even if it's lost.
+     * 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.
+     * True when WebGL context exists and is not lost.
+     */
+    isRenderingWebGL: ComputedRef<boolean>;
+    /**
+     * Reactive property that indicates if we have a WebGL context.
+     * True even if the context is lost (for debugging purposes).
+     */
+    hasWebGLContext: ComputedRef<boolean>;
+    /**
+     * Reactive key that increments when WebGL context is restored.
+     * Use this as a component key to force remounting renderer components on context loss/restore.
+     */
+    renderKey: ComputedRef<number>;
+    /**
+     * Reactive key that changes when switching between WebGL and 2D rendering modes.
+     * Use this as the canvas element key to force creating a new canvas with the appropriate context.
+     */
+    canvasKey: ComputedRef<string>;
+    /**
+     * Set the canvas element to use for rendering.
+     * This initializes the appropriate context based on webglEnabled.
+     */
+    setCanvasElement: (canvas: HTMLCanvasElement) => void;
+    /**
+     * Remove the canvas element and clean up contexts.
+     */
+    removeCanvasElement: () => void;
+    /**
+     * Register a WebGL program.
+     *
+     * 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>;
+    /**
+     * 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.
+     */
+    handleClick: (x: number, y: number) => boolean;
+    /**
+     * Register a WebGL renderer with a specific zIndex.
+     * Returns an object with the collector instance and an unregister function.
+     */
+    registerRenderer: <T = RectangleBufferCollector<any>>(id: string, config: Omit<Renderer<T>, 'id'>) => {
+        collector: T;
+        unregister: () => void;
+    };
+    /**
+     * Unregister a WebGL renderer.
+     */
+    unregisterRenderer: (id: string) => void;
+};
+export default function (eventBus: BlokkliEventBus, ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, debug: DebugProvider, keyboard: KeyboardProvider): AnimationProvider;
+export {};