@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

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

@@ -65,7 +65,8 @@
               :key="isRenderedDetached ? 'detached' : 'attached'"
               :scrolled-to-end
               :is-detached="isRenderedDetached"
-              :is-shown="isShown"
+              :is-shown
+              :should-render
               :width
               :height
               :toggle-sidebar
@@ -99,12 +100,13 @@
         <div ref="sidebarContent" class="bk-sidebar-content">
           <slot
             :key="isRenderedDetached ? 'detached' : 'attached'"
-            :scrolled-to-end="scrolledToEnd"
+            :scrolled-to-end
             :is-detached="isRenderedDetached"
-            :is-shown="isShown"
+            :is-shown
+            :should-render
             :width="undefined"
             :height="undefined"
-            :toggle-sidebar="toggleSidebar"
+            :toggle-sidebar
             :is-resizing="false"
           />
         </div>
@@ -190,6 +192,12 @@ const isRenderedDetached = computed(
 const isShown = computed(
   () => (activeSidebar.value === props.id || isRenderedDetached.value) && !isDisabled.value
 );
+const shouldRender = ref(isShown.value);
+watch(isShown, (v) => {
+  if (v) {
+    shouldRender.value = true;
+  }
+});
 watch(isDisabled, (v) => {
   if (v && activeSidebar.value === props.id) {
     activeSidebar.value = "";

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

@@ -217,6 +217,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         scrolledToEnd: any;
         isDetached: any;
         isShown: any;
+        shouldRender: any;
         width: any;
         height: any;
         toggleSidebar: () => void;
@@ -228,6 +229,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         scrolledToEnd: any;
         isDetached: any;
         isShown: any;
+        shouldRender: any;
         width: undefined;
         height: undefined;
         toggleSidebar: () => void;

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

@@ -1,6 +1,7 @@
 import { type ComputedRef, type WritableComputedRef } from '#imports';
 import type { UiProvider } from './ui.js';
-import { type ProgramInfo } from 'twgl.js';
+import type { ProgramInfo } from 'twgl.js';
+import type { TwglHelpers } from '../libraries/twgl.js';
 import type { StorageProvider } from './storage.js';
 import type { CursorKeyword } from '#blokkli/editor/types';
 import type { SelectionProvider } from './selection.js';
@@ -76,7 +77,7 @@ export type Renderer<T = RectangleBufferCollector<any>> = {
      * @param gl - WebGL rendering context
      * @param program - Compiled shader program
      */
-    render: (ctx: RenderContext, gl: WebGLRenderingContext, program: ProgramInfo) => void;
+    render: (ctx: RenderContext, gl: WebGLRenderingContext, program: ProgramInfo, twgl: TwglHelpers) => void;
     /**
      * Fallback rendering using 2D canvas context.
      *
@@ -169,12 +170,6 @@ export type AnimationProvider = {
      * 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.
      *
@@ -195,10 +190,10 @@ export type AnimationProvider = {
      * 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'>) => {
+    registerRenderer: <T = RectangleBufferCollector<any>>(id: string, config: Omit<Renderer<T>, 'id'>) => Promise<{
         collector: T;
         unregister: () => void;
-    };
+    }>;
     /**
      * Unregister a WebGL renderer.
      */

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

@@ -10,7 +10,6 @@ import {
   onMounted,
   onBeforeUnmount
 } from "#imports";
-import { createProgramInfo } from "twgl.js";
 function configureWebGLContext(gl) {
   gl.enable(gl.BLEND);
   gl.disable(gl.DEPTH_TEST);
@@ -49,6 +48,7 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
   const renderers = /* @__PURE__ */ new Map();
   const rendererPrograms = /* @__PURE__ */ new Map();
   const rendererCollectors = /* @__PURE__ */ new Map();
+  let twglModule = null;
   const rendererFailures = /* @__PURE__ */ new Map();
   const rendererCooldowns = /* @__PURE__ */ new Map();
   const renderersPermanentlyDisabled = /* @__PURE__ */ new Set();
@@ -95,9 +95,9 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
       const glContext2 = gl();
       if (glContext2 && webglEnabled.value && !shouldSkipRenderer(renderer.id)) {
         const program = rendererPrograms.get(renderer.id);
-        if (program) {
+        if (program && twglModule) {
           try {
-            renderer.render(ctx, glContext2, program);
+            renderer.render(ctx, glContext2, program, twglModule);
             handleRendererSuccess(renderer.id);
           } catch (error) {
             handleRendererFailure(renderer.id);
@@ -115,7 +115,7 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
       }
     }
   }
-  function registerRenderer(id, config) {
+  async function registerRenderer(id, config) {
     logger.log("Registered Renderer: " + id);
     const renderer = { id, ...config };
     renderers.set(id, renderer);
@@ -125,7 +125,7 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
       const glContext2 = gl();
       if (glContext2) {
         const { shaders } = renderer.program();
-        const programInfo = registerProgram(id, glContext2, shaders);
+        const programInfo = await registerProgram(id, glContext2, shaders);
         rendererPrograms.set(id, programInfo);
       }
     }
@@ -489,9 +489,12 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
     gl2.uniform1f(gl2.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
   }
   const registeredPrograms = /* @__PURE__ */ new Map();
-  function registerProgram(id, gl2, shaders) {
+  async function registerProgram(id, gl2, shaders) {
+    if (!twglModule) {
+      twglModule = (await import("./../libraries/twgl.js")).twgl;
+    }
     if (!registeredPrograms.has(id)) {
-      registeredPrograms.set(id, createProgramInfo(gl2, shaders));
+      registeredPrograms.set(id, twglModule.createProgramInfo(gl2, shaders));
     }
     return registeredPrograms.get(id);
   }
@@ -507,7 +510,6 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
     getRawGL,
     setSharedUniforms,
     dpi,
-    registerProgram,
     webglSupported: computed(() => webglSupported.value && webglEnabled.value),
     webglEnabled,
     preferredRenderingMode,

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

@@ -72,6 +72,17 @@ export type DirectiveProvider = {
      * @returns The editable field data at that point, or undefined
      */
     getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
+    /**
+     * Find the droppable field at a specific screen coordinate.
+     *
+     * Converts screen coordinates to artboard space and checks if any visible
+     * droppable field contains the point.
+     *
+     * @param x - Screen X coordinate
+     * @param y - Screen Y coordinate
+     * @returns The droppable field data at that point, or undefined
+     */
+    getDroppableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
     /**
      * Get all editable fields for a specific block.
      *

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

@@ -160,6 +160,21 @@ export default function(debug, ui) {
     }
     return void 0;
   }
+  function getDroppableAtPoint(x, y) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const artboardX = x / scale - offset.x / scale;
+    const artboardY = y / scale - offset.y / scale;
+    for (const key of visible) {
+      if (!key.startsWith("droppable:")) continue;
+      const rect = rects[key];
+      if (!rect) continue;
+      if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+        return fieldData.get(key);
+      }
+    }
+    return void 0;
+  }
   function updateRects() {
     const scale = ui.artboardScale.value;
     const offset = ui.artboardOffset.value;
@@ -248,6 +263,7 @@ export default function(debug, ui) {
     init,
     getVisible,
     getEditableAtPoint,
+    getDroppableAtPoint,
     findEditable,
     getEditablesForBlock,
     findEditableElement,

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

@@ -9,14 +9,14 @@ export type FeaturesProvider = {
      *
      * Updates automatically via HMR during development.
      */
-    features: ComputedRef<FeatureDefinition[]>;
+    definitions: 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>[]>;
+    mountedFeatures: ComputedRef<FeatureDefinition<AdapterMethods[]>[]>;
     /**
      * List of available beta features.
      *
@@ -43,7 +43,7 @@ export type FeaturesProvider = {
      *
      * @param feature - The feature definition to mount
      */
-    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
+    mount: (feature: FeatureDefinition<AdapterMethods[]>) => void;
     /**
      * Unmount a feature.
      *

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

@@ -43,7 +43,7 @@ export default function(storage) {
     mountedFeatures.value.push(feature);
   };
   return {
-    features: computed(() => definitions.value),
+    definitions: computed(() => definitions.value),
     mountedFeatures: computed(() => mountedFeatures.value),
     betaFeatures,
     enabledBetaFeatures,

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

@@ -19,6 +19,17 @@ export type TextFieldValue = {
     entityType: string;
     entityBundle: string;
 };
+/**
+ * A droppable field value (ordered list of referenced entity IDs currently in
+ * the field) as provided by the adapter's mapped state.
+ */
+export type DroppableFieldValue = {
+    uuid: string;
+    fieldName: string;
+    ids: string[];
+    entityType: string;
+    entityBundle: string;
+};
 /**
  * The result of reading a field value.
  */
@@ -51,5 +62,21 @@ export type FieldValueProvider = {
      * Reads from mapped state if available, falls back to reading from directive system.
      */
     getTextFieldValues: () => TextFieldValue[];
+    /**
+     * Get all droppable field values (item counts) from the mapped state.
+     * Returns an empty array when the adapter hasn't populated this.
+     */
+    getDroppableFieldValues: () => DroppableFieldValue[];
+    /**
+     * Get the current number of items in a droppable field.
+     * Reads from mapped state; returns 0 when the adapter hasn't populated it.
+     */
+    getDroppableFieldCount: (fieldName: string, host: EntityContext) => number;
+    /**
+     * Get the ordered list of referenced entity IDs currently in a droppable
+     * field. Reads from mapped state; returns an empty array when the adapter
+     * hasn't populated it.
+     */
+    getDroppableFieldIds: (fieldName: string, host: EntityContext) => string[];
 };
 export default function fieldValueProvider(directive: DirectiveProvider, state: StateProvider, types: BlockDefinitionProvider, definitions: DefinitionProvider, blocks: BlocksProvider): FieldValueProvider;

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

@@ -123,10 +123,30 @@ export default function fieldValueProvider(directive, state, types, definitions,
     }
     return values;
   }
+  function getDroppableFieldValues() {
+    const mappedState = state.getMappedState();
+    return mappedState.droppableFieldValues ?? [];
+  }
+  function getDroppableFieldIds(fieldName, host) {
+    const values = getDroppableFieldValues();
+    for (let i = 0; i < values.length; i++) {
+      const v = values[i];
+      if (v.uuid === host.uuid && v.fieldName === fieldName && v.entityType === host.type) {
+        return v.ids;
+      }
+    }
+    return [];
+  }
+  function getDroppableFieldCount(fieldName, host) {
+    return getDroppableFieldIds(fieldName, host).length;
+  }
   return {
     resolveFieldType,
     readValue,
     readFieldValue,
-    getTextFieldValues
+    getTextFieldValues,
+    getDroppableFieldValues,
+    getDroppableFieldCount,
+    getDroppableFieldIds
   };
 }

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

@@ -49,19 +49,22 @@ export default function(eventBus) {
       isPressingSpace.value = true;
     }
   };
-  const onVisibilityChange = () => {
+  const resetModifierStates = () => {
     isPressingControl.value = false;
     isPressingSpace.value = false;
+    isPressingShift.value = false;
   };
   onMounted(() => {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
-    document.addEventListener("visibilitychange", onVisibilityChange);
+    document.addEventListener("visibilitychange", resetModifierStates);
+    window.addEventListener("blur", resetModifierStates);
   });
   onBeforeUnmount(() => {
     document.removeEventListener("keydown", onKeyDown);
     document.removeEventListener("keyup", onKeyUp);
-    document.removeEventListener("visibilitychange", onVisibilityChange);
+    document.removeEventListener("visibilitychange", resetModifierStates);
+    window.removeEventListener("blur", resetModifierStates);
   });
   const getShortcutKey = (shortcut) => [!!shortcut.meta, !!shortcut.shift, shortcut.code].join("-");
   const registerShortcut = (shortcut) => {

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

@@ -5,19 +5,43 @@ import type { DirectiveProvider } from './directive.js';
 import type { FieldValueProvider, TextFieldValue } from './fieldValue.js';
 import type { ReadabilityAnalysisResult, ReadabilityAnalyzer, ReadabilityChunkResult } from '../features/analyze/readability/types.js';
 import '../features/analyze/readability/adapterTypes.js';
+type ReadabilityScaleInfo = NonNullable<ReturnType<NonNullable<ReadabilityAnalyzer['getScaleInfo']>>>;
 export type ReadabilityProvider = {
-    analyzer: Readonly<Ref<ReadabilityAnalyzer>>;
-    isInitialized: Readonly<Ref<boolean>>;
-    ensureInitialized: () => Promise<void>;
+    /**
+     * Whether a readability analyzer is registered and usable.
+     *
+     * Resolved at provider construction time. `true` when an adapter extension
+     * supplied `getReadabilityAnalyzer` (typically via the `@blokkli/readability`
+     * sub-module), `false` otherwise. Features that render readability UI
+     * should gate on this flag; method calls are safe no-ops when false.
+     */
+    isAvailable: Readonly<Ref<boolean>>;
+    /**
+     * Label of the primary score metric for the current language
+     * (e.g. "LIX", "Gulpease", "CEFR"). Empty string when no analyzer is
+     * available.
+     */
+    scoreLabel: ComputedRef<string>;
+    /**
+     * Minimum word count required for a confident score in the current
+     * language. `0` when no analyzer is available.
+     */
+    minWordsForConfidence: ComputedRef<number>;
     analyzeAllFields: () => Promise<ReadabilityAnalysisResult>;
     analyzeText: (text: string, langcode: string, fieldType?: 'plain' | 'markup') => Promise<ReadabilityChunkResult[]>;
     analyzeFieldValues: (fields: TextFieldValue[]) => Promise<ReadabilityAnalysisResult>;
     getAgentContext: () => string;
     formatScore: (value: number) => string;
+    /**
+     * Return scale information for visualizing score bands, or `null` if no
+     * analyzer is available (or it does not provide one).
+     */
+    getScaleInfo: (langcode: string) => ReadabilityScaleInfo | null;
     /**
      * Find the DOM element for a specific editable field.
      * Used by the analyzer to scope DOM highlighting to the correct block.
      */
     getFieldElement: (uuid: string, fieldName: string) => HTMLElement | undefined;
 };
-export default function readabilityProvider(adapters: AdaptersProvider, context: ComputedRef<AdapterContext>, directive: DirectiveProvider, fieldValue: FieldValueProvider): ReadabilityProvider;
+export default function readabilityProvider(adapters: AdaptersProvider, context: ComputedRef<AdapterContext>, directive: DirectiveProvider, fieldValue: FieldValueProvider): Promise<ReadabilityProvider>;
+export {};

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

@@ -1,37 +1,18 @@
-import { ref } from "#imports";
+import { ref, readonly, computed } from "#imports";
 import { chunkHtml } from "../features/analyze/readability/chunkHtml.js";
-import { createBuiltinReadabilityAnalyzer } from "../features/analyze/readability/builtinAnalyzer.js";
 import "../features/analyze/readability/adapterTypes";
-export default function readabilityProvider(adapters, context, directive, fieldValue) {
-  const builtin = createBuiltinReadabilityAnalyzer();
-  const analyzer = ref(builtin);
-  const isInitialized = ref(false);
-  let initPromise = null;
-  async function doInit() {
-    const customAnalyzers = await adapters.getAggregated(
-      "getReadabilityAnalyzer"
-    );
-    if (customAnalyzers.length > 0) {
-      analyzer.value = customAnalyzers[0];
-    }
-    const a = analyzer.value;
-    if (a.init) {
-      await a.init(context.value.language);
-    }
-    isInitialized.value = true;
-  }
-  function ensureInitialized() {
-    if (isInitialized.value) {
-      return Promise.resolve();
-    }
-    if (!initPromise) {
-      initPromise = doInit();
-    }
-    return initPromise;
-  }
+export default async function readabilityProvider(adapters, context, directive, fieldValue) {
+  const list = await adapters.getAggregated("getReadabilityAnalyzer");
+  const analyzer = list[0] ?? null;
+  const isAvailable = ref(analyzer !== null);
+  const scoreLabel = computed(
+    () => analyzer?.scoreLabel(context.value.language) ?? ""
+  );
+  const minWordsForConfidence = computed(
+    () => analyzer?.minWordsForConfidence?.(context.value.language) ?? 0
+  );
   async function analyzeFieldValues(fields) {
-    await ensureInitialized();
-    const a = analyzer.value;
+    if (!analyzer) return {};
     const langcode = context.value.language;
     const fieldEntries = [];
     const allTexts = [];
@@ -47,7 +28,7 @@ export default function readabilityProvider(adapters, context, directive, fieldV
         textToIndex.push(entryIndex);
       }
     }
-    const scores = await a.analyze(allTexts, langcode);
+    const scores = await analyzer.analyze(allTexts, langcode);
     const result = {};
     let textIndex = 0;
     for (const entry of fieldEntries) {
@@ -59,8 +40,8 @@ export default function readabilityProvider(adapters, context, directive, fieldV
           text: chunk.text,
           html: chunk.html,
           score,
-          band: score != null ? a.classifyBand(score, langcode) : null,
-          impact: score != null ? a.impactForScore(score) : null
+          band: score != null ? analyzer.classifyBand(score, langcode) : null,
+          impact: score != null ? analyzer.impactForScore(score, langcode) : null
         });
       }
       result[entry.key] = {
@@ -72,16 +53,16 @@ export default function readabilityProvider(adapters, context, directive, fieldV
     return result;
   }
   async function analyzeAllFields() {
+    if (!analyzer) return {};
     const fields = fieldValue.getTextFieldValues();
     return analyzeFieldValues(fields);
   }
   async function analyzeText(text, langcode, fieldType = "plain") {
-    await ensureInitialized();
-    const a = analyzer.value;
+    if (!analyzer) return [];
     const chunks = chunkHtml(text, fieldType);
     if (chunks.length === 0) return [];
     const texts = chunks.map((c) => c.text);
-    const scores = await a.analyze(texts, langcode);
+    const scores = await analyzer.analyze(texts, langcode);
     const results = [];
     for (let i = 0; i < chunks.length; i++) {
       const score = scores[i] ?? null;
@@ -89,14 +70,14 @@ export default function readabilityProvider(adapters, context, directive, fieldV
         text: chunks[i].text,
         html: chunks[i].html,
         score,
-        band: score != null ? a.classifyBand(score, langcode) : null,
-        impact: score != null ? a.impactForScore(score) : null
+        band: score != null ? analyzer.classifyBand(score, langcode) : null,
+        impact: score != null ? analyzer.impactForScore(score, langcode) : null
       });
     }
     return results;
   }
   function getAgentContext() {
-    return analyzer.value.getAgentContext();
+    return analyzer?.getAgentContext(context.value.language) ?? "";
   }
   function getFieldElement(uuid, fieldName) {
     const editables = directive.getEditablesForBlock(uuid);
@@ -106,21 +87,24 @@ export default function readabilityProvider(adapters, context, directive, fieldV
     }
   }
   function formatScore(value) {
-    const a = analyzer.value;
-    if (a.formatScore) {
-      return a.formatScore(value);
+    if (analyzer?.formatScore) {
+      return analyzer.formatScore(value, context.value.language);
     }
     return typeof value === "number" && Number.isFinite(value) ? value.toFixed(1) : String(value);
   }
+  function getScaleInfo(langcode) {
+    return analyzer?.getScaleInfo?.(langcode) ?? null;
+  }
   return {
-    analyzer,
-    isInitialized,
-    ensureInitialized,
+    isAvailable: readonly(isAvailable),
+    scoreLabel,
+    minWordsForConfidence,
     analyzeAllFields,
     analyzeText,
     analyzeFieldValues,
     getAgentContext,
     formatScore,
+    getScaleInfo,
     getFieldElement
   };
 }

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

@@ -57,6 +57,14 @@ export type SelectionProvider = {
      * The label of the active editable field.
      */
     activeEditableLabel: Ref<string | null>;
+    /**
+     * The label of the active droppable field being edited.
+     */
+    activeDroppableFieldLabel: Ref<string | null>;
+    /**
+     * The label of any active field-level editing mode (editable or droppable).
+     */
+    activeFieldLabel: ComputedRef<string | null>;
     /**
      * The items that are currently being dragged.
      */

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

@@ -6,6 +6,10 @@ export default function(blocks, permissions) {
   const hasHostSelected = ref(false);
   const draggingMode = ref(null);
   const activeEditableLabel = ref(null);
+  const activeDroppableFieldLabel = ref(null);
+  const activeFieldLabel = computed(
+    () => activeEditableLabel.value || activeDroppableFieldLabel.value
+  );
   const isMultiSelecting = ref(false);
   const interactionMode = ref("mouse");
   const selectionLocks = ref([]);
@@ -145,6 +149,8 @@ export default function(blocks, permissions) {
     isDragging,
     isDraggingExisting,
     activeEditableLabel,
+    activeDroppableFieldLabel,
+    activeFieldLabel,
     isMultiSelecting,
     draggingMode,
     interactionMode,

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

@@ -1,4 +1,2 @@
-import { type ComputedRef } from 'vue';
-import type { AdapterContext } from '../adapter/index.js';
 export type TextProvider = (key: string, defaultValue?: string) => string;
-export default function (context?: ComputedRef<AdapterContext>): TextProvider;
+export default function (requestedLanguage: string): Promise<TextProvider>;