@blokkli/editor 2.0.0-alpha.39 → 2.0.0-alpha.40

package/dist/runtime/editor/features/analyze/readability/chunkHtml.js

@@ -0,0 +1,97 @@
+const BLOCK_ELEMENTS = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "DD",
+  "DIV",
+  "DL",
+  "DT",
+  "FIELDSET",
+  "FIGCAPTION",
+  "FIGURE",
+  "FOOTER",
+  "FORM",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HEADER",
+  "HR",
+  "LI",
+  "MAIN",
+  "NAV",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "TABLE",
+  "TD",
+  "TH",
+  "UL",
+  "DETAILS",
+  "SUMMARY",
+  "DIALOG"
+]);
+function isBlockElement(el) {
+  return BLOCK_ELEMENTS.has(el.tagName);
+}
+function containsBlockElements(el) {
+  for (const child of el.children) {
+    if (isBlockElement(child)) {
+      return true;
+    }
+    if (containsBlockElements(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+function traverse(el, results) {
+  if (el.tagName === "SCRIPT" || el.tagName === "STYLE") {
+    return;
+  }
+  if (isBlockElement(el)) {
+    if (!containsBlockElements(el)) {
+      const text = (el.textContent || "").trim();
+      if (text) {
+        results.push({
+          text,
+          html: el.innerHTML
+        });
+      }
+    } else {
+      for (const child of el.children) {
+        traverse(child, results);
+      }
+    }
+  } else {
+    for (const child of el.children) {
+      traverse(child, results);
+    }
+  }
+}
+export function chunkHtml(value, fieldType) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return [];
+  }
+  if (fieldType === "plain") {
+    return [{ text: trimmed }];
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(trimmed, "text/html");
+  const results = [];
+  for (const child of doc.body.children) {
+    traverse(child, results);
+  }
+  if (results.length === 0) {
+    const text = (doc.body.textContent || "").trim();
+    if (text) {
+      results.push({ text, html: doc.body.innerHTML });
+    }
+  }
+  return results;
+}

package/dist/runtime/editor/features/analyze/readability/types.d.ts

@@ -0,0 +1,72 @@
+import type { AnalyzeImpact } from '../analyzers/types.js';
+/**
+ * Classification band for a chunk of text.
+ */
+export type ReadabilityBand = 'easy' | 'ok' | 'hard';
+/**
+ * Result for a single chunk of text within a field.
+ */
+export type ReadabilityChunkResult = {
+    text: string;
+    html?: string;
+    score: number;
+    band: ReadabilityBand;
+    impact: AnalyzeImpact;
+    description?: string;
+};
+/**
+ * Result for a single field, containing all its scored chunks.
+ */
+export type ReadabilityFieldResult = {
+    rawValue: string;
+    fieldType: 'plain' | 'markup';
+    chunks: ReadabilityChunkResult[];
+};
+/**
+ * Full analysis result keyed by "{uuid}/{fieldName}".
+ */
+export type ReadabilityAnalysisResult = Record<string, ReadabilityFieldResult>;
+/**
+ * Interface for a readability analyzer.
+ *
+ * One analyzer is active at a time. The built-in default uses
+ * LIX/CLI/ARI/Gulpease. Adapters can override with a custom implementation
+ * (e.g. CEFR via API).
+ */
+export type ReadabilityAnalyzer = {
+    id: string;
+    label?: string | ((langcode: string) => string);
+    description?: string;
+    supportedLanguages?: string[];
+    minWordsForConfidence?: number;
+    /**
+     * Short label for the primary score metric (e.g. "LIX", "Gulpease", "CEFR").
+     * Used by the UI to display scores like "LIX: 45".
+     */
+    scoreLabel: string;
+    /**
+     * Optional initialization (e.g. lazy-load a library).
+     */
+    init?(langcode: string): void | Promise<void>;
+    /**
+     * Score an array of plain-text strings.
+     * Returns one primary score per input text (null if not scorable).
+     */
+    analyze(texts: string[], langcode: string): Promise<(number | null)[]>;
+    /**
+     * Classify a score into a readability band.
+     */
+    classifyBand(score: number, langcode: string): ReadabilityBand;
+    /**
+     * Determine the impact severity for a score.
+     */
+    impactForScore(score: number): AnalyzeImpact;
+    /**
+     * Return context text for the agent prompt (e.g. LIX reference table).
+     */
+    getAgentContext(): string;
+    /**
+     * Optional display formatting for a score value.
+     */
+    formatScore?(value: number): string;
+};

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -272,11 +272,11 @@ onBlokkliEvent("keyPressed", (e) => {
     e.originalEvent.preventDefault();
     artboard.scrollPageDown();
     animation.requestDraw();
-  } else if (e.code === "ArrowUp") {
+  } else if (e.code === "ArrowUp" && !ui.isApproving.value) {
     e.originalEvent.preventDefault();
     artboard.scrollUp();
     animation.requestDraw();
-  } else if (e.code === "ArrowDown") {
+  } else if (e.code === "ArrowDown" && !ui.isApproving.value) {
     e.originalEvent.preventDefault();
     artboard.scrollDown();
     animation.requestDraw();
@@ -303,7 +303,8 @@ onBlokkliEvent("scrollIntoView", (e) => {
     artboard.scrollIntoView(rect, {
       scale: "none",
       axis: "y",
-      behavior: e.immediate ? "instant" : "auto"
+      behavior: e.immediate ? "instant" : "auto",
+      area: "blocking"
     });
   } else {
     if (artboardElement.contains(e.element)) {
@@ -313,8 +314,11 @@ onBlokkliEvent("scrollIntoView", (e) => {
       }
       artboard.scrollElementIntoView(e.element, {
         scale: "none",
-        axis: "y",
-        behavior: e.immediate ? "instant" : "auto"
+        axis: "both",
+        behavior: e.immediate ? "instant" : "auto",
+        area: "blocking",
+        block: "auto",
+        inline: "auto"
       });
     } else {
       artboard.scrollToTop({

package/dist/runtime/editor/features/breadcrumbs/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport v-if="ui.mainLayoutElement.value" :to="ui.mainLayoutElement.value">
-    <div class="bk bk-breadcrumbs">
+    <div v-show="!ui.isApproving.value" class="bk bk-breadcrumbs">
       <ul>
         <li>
           <button

package/dist/runtime/editor/features/dragging-overlay/index.vue

@@ -242,7 +242,7 @@ onBlokkliEvent("state:reloaded", async function() {
   if (!editableFieldElement) {
     return;
   }
-  eventBus.emit("editable:focus", {
+  eventBus.emit("editable:open", {
     fieldName: editableField,
     uuid: newUuid
   });

package/dist/runtime/editor/features/editable-field/index.vue

@@ -97,7 +97,7 @@ const buildEditable = (fieldName, uuid) => {
     config
   };
 };
-onBlokkliEvent("editable:focus", (e) => {
+onBlokkliEvent("editable:open", (e) => {
   if (!state.canEdit.value) {
     return;
   }

package/dist/runtime/editor/features/hover/index.vue

@@ -17,7 +17,7 @@ defineBlokkliFeature({
 const { selection, ui, dom, animation, $t } = useBlokkli();
 const isLocked = ref(false);
 const isVisible = computed(
-  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value && !ui.isApproving.value
 );
 </script>
 

package/dist/runtime/editor/features/options/index.vue

@@ -2,7 +2,7 @@
   <Teleport to="#bk-blokkli-item-actions-controls">
     <OptionsForm
       v-if="
-  definition && !selection.isDragging.value && !ui.isAnimating.value && uuids
+  definition && !selection.isDragging.value && !ui.isAnimating.value && !ui.isTransforming.value && uuids
 "
       :key="key + state.refreshKey.value + ui.isAnimating.value"
       :uuids

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -348,7 +348,7 @@ const { collector } = defineRenderer("add-buttons", {
     if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
       return false;
     }
-    if (ui.hasTransformOverlayOpen.value) {
+    if (ui.hasTransformOverlayOpen.value || ui.isApproving.value) {
       return false;
     }
     return true;

package/dist/runtime/editor/features/selection/index.vue

@@ -80,7 +80,7 @@ const stop = watch(
   }
 );
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value && !ui.isApproving.value
 );
 const findMostVisibleBlock = () => {
   const viewport = ui.visibleViewportPadded.value;
@@ -240,7 +240,7 @@ onBlokkliEvent("keyPressed", (e) => {
       eventBus.emit("select:host:unselect");
     }
   } else if (e.code === "Tab") {
-    if (tour.isTouring.value || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
+    if (tour.isTouring.value || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value || ui.isApproving.value) {
       return;
     }
     e.originalEvent.preventDefault();

package/dist/runtime/editor/features/structure/List/Item/index.vue

@@ -64,9 +64,7 @@ function onMouseUp(e) {
   } else {
     eventBus.emit("select", props.uuid);
     eventBus.emit("scrollIntoView", {
-      uuid: props.uuid,
-      immediate: true,
-      center: true
+      uuid: props.uuid
     });
   }
 }

package/dist/runtime/editor/helpers/diff/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Compute an inline HTML diff between two strings.
+ *
+ * For content with block-level HTML elements (p, h1-h6, etc.), aligns blocks
+ * by tag name and diffs within each block individually, preventing diff markers
+ * from crossing element boundaries.
+ *
+ * For plain text or inline-only HTML, uses flat word-level diffing with
+ * post-processing to merge long runs of consecutive modifications.
+ */
+export declare function computeDiff(before: string, after: string): string;

package/dist/runtime/editor/helpers/diff/index.js

@@ -0,0 +1,227 @@
+import diff from "html-diff-ts";
+const PAIR_RE = /<del class="diffmod">((?:[^<]|<(?!\/del>))*?)<\/del><ins class="diffmod">((?:[^<]|<(?!\/ins>))*?)<\/ins>/g;
+function tokenize(html) {
+  const tokens = [];
+  let lastIndex = 0;
+  PAIR_RE.lastIndex = 0;
+  let match = PAIR_RE.exec(html);
+  while (match) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "other", text: html.slice(lastIndex, match.index) });
+    }
+    tokens.push({
+      type: "pair",
+      del: match[1] || "",
+      ins: match[2] || "",
+      raw: match[0]
+    });
+    lastIndex = match.index + match[0].length;
+    match = PAIR_RE.exec(html);
+  }
+  if (lastIndex < html.length) {
+    tokens.push({ type: "other", text: html.slice(lastIndex) });
+  }
+  return tokens;
+}
+function isMergeableSeparator(text) {
+  if (/<[^>]+>/.test(text)) {
+    return false;
+  }
+  if (/^(?:\s|&nbsp;)*$/.test(text)) {
+    return true;
+  }
+  return text.length <= 20;
+}
+function cleanupDiffMods(html) {
+  const tokens = tokenize(html);
+  const runs = [];
+  let i = 0;
+  while (i < tokens.length) {
+    const token = tokens[i];
+    if (token?.type !== "pair") {
+      i++;
+      continue;
+    }
+    const run = { startIndex: i, endIndex: i + 1, pairCount: 1 };
+    let j = i + 1;
+    while (j < tokens.length) {
+      const next = tokens[j];
+      if (!next) break;
+      if (next.type === "pair") {
+        run.endIndex = j + 1;
+        run.pairCount++;
+        j++;
+        continue;
+      }
+      const afterNext = tokens[j + 1];
+      if (next.type === "other" && isMergeableSeparator(next.text) && afterNext?.type === "pair") {
+        run.endIndex = j + 2;
+        run.pairCount++;
+        j += 2;
+        continue;
+      }
+      break;
+    }
+    runs.push(run);
+    i = run.endIndex;
+  }
+  const mergeSet = /* @__PURE__ */ new Set();
+  const mergeRuns = runs.filter((r) => r.pairCount >= 3);
+  for (const run of mergeRuns) {
+    for (let k = run.startIndex; k < run.endIndex; k++) {
+      mergeSet.add(k);
+    }
+  }
+  if (mergeRuns.length === 0) {
+    return html;
+  }
+  let result = "";
+  let ri = 0;
+  for (let k = 0; k < tokens.length; k++) {
+    if (ri < mergeRuns.length && k === mergeRuns[ri]?.startIndex) {
+      const run = mergeRuns[ri];
+      const dels = [];
+      const inss = [];
+      for (let m = run.startIndex; m < run.endIndex; m++) {
+        const t2 = tokens[m];
+        if (t2.type === "pair") {
+          dels.push(t2.del);
+          inss.push(t2.ins);
+        } else {
+          dels.push(t2.text);
+          inss.push(t2.text);
+        }
+      }
+      result += `<del>${dels.join("")}</del><ins>${inss.join("")}</ins>`;
+      k = run.endIndex - 1;
+      ri++;
+      continue;
+    }
+    const t = tokens[k];
+    result += t.type === "pair" ? t.raw : t.text;
+  }
+  return result;
+}
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "blockquote",
+  "pre",
+  "div",
+  "table",
+  "figure",
+  "section",
+  "article"
+]);
+function parseBlocks(html) {
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const blocks = [];
+  for (const child of container.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const el = child;
+      const tag = el.tagName.toLowerCase();
+      if (!BLOCK_TAGS.has(tag)) {
+        return null;
+      }
+      let openTag = `<${tag}`;
+      for (const attr of el.attributes) {
+        openTag += ` ${attr.name}="${attr.value}"`;
+      }
+      openTag += ">";
+      blocks.push({ tag, innerHTML: el.innerHTML, openTag });
+    } else if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+      return null;
+    }
+  }
+  return blocks;
+}
+function alignBlocks(before, after) {
+  const m = before.length;
+  const n = after.length;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => Array(n + 1).fill(0)
+  );
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (before[i2 - 1].tag === after[j2 - 1].tag) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const entries = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (before[i - 1].tag === after[j - 1].tag) {
+      entries.push({
+        type: "match",
+        before: before[i - 1],
+        after: after[j - 1]
+      });
+      i--;
+      j--;
+    } else if (dp[i - 1][j] >= dp[i][j - 1]) {
+      entries.push({ type: "delete", before: before[i - 1] });
+      i--;
+    } else {
+      entries.push({ type: "insert", after: after[j - 1] });
+      j--;
+    }
+  }
+  while (i > 0) {
+    entries.push({ type: "delete", before: before[i - 1] });
+    i--;
+  }
+  while (j > 0) {
+    entries.push({ type: "insert", after: after[j - 1] });
+    j--;
+  }
+  return entries.reverse();
+}
+function computeBlockDiff(before, after) {
+  const alignment = alignBlocks(before, after);
+  const parts = [];
+  for (const entry of alignment) {
+    if (entry.type === "match") {
+      if (entry.before.innerHTML === entry.after.innerHTML) {
+        parts.push(
+          `${entry.after.openTag}${entry.after.innerHTML}</${entry.after.tag}>`
+        );
+      } else {
+        const innerDiff = diff(entry.before.innerHTML, entry.after.innerHTML);
+        parts.push(
+          `${entry.after.openTag}${cleanupDiffMods(innerDiff)}</${entry.after.tag}>`
+        );
+      }
+    } else if (entry.type === "delete") {
+      parts.push(
+        `${entry.before.openTag}<del>${entry.before.innerHTML}</del></${entry.before.tag}>`
+      );
+    } else {
+      parts.push(
+        `${entry.after.openTag}<ins>${entry.after.innerHTML}</ins></${entry.after.tag}>`
+      );
+    }
+  }
+  return parts.join("");
+}
+export function computeDiff(before, after) {
+  const beforeBlocks = parseBlocks(before);
+  const afterBlocks = parseBlocks(after);
+  if (beforeBlocks && afterBlocks && (beforeBlocks.length > 0 || afterBlocks.length > 0)) {
+    return computeBlockDiff(beforeBlocks, afterBlocks);
+  }
+  const raw = diff(before, after);
+  return cleanupDiffMods(raw);
+}

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

@@ -253,7 +253,7 @@ onBlokkliEvent("item:dropped", () => {
   }
 });
 onBlokkliEvent("sidebar:open", (id) => {
-  if (id === props.id) {
+  if (id === props.id && !isRenderedDetached.value) {
     activeSidebar.value = props.id;
   }
 });

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

@@ -2,6 +2,7 @@ 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';
@@ -40,4 +41,4 @@ export type AnalyzeProvider = {
         nodes: AnalyzeNode[];
     }>>;
 };
-export default function analyzeProvider(adapters: AdaptersProvider, state: StateProvider, ui: UiProvider, context: ComputedRef<AdapterContext>, $t: TextProvider): AnalyzeProvider;
+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

@@ -1,7 +1,7 @@
 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) {
+export default function analyzeProvider(adapters, state, ui, context, $t, readability) {
   const analyzers = ref([]);
   const isInitialized = ref(false);
   let initPromise = null;
@@ -12,7 +12,9 @@ export default function analyzeProvider(adapters, state, ui, context, $t) {
       ui.interfaceLanguage.value,
       ui.providerElement,
       state,
-      $t
+      $t,
+      void 0,
+      readability
     );
     await Promise.all(
       fetched.map(async (analyzer) => {
@@ -40,7 +42,8 @@ export default function analyzeProvider(adapters, state, ui, context, $t) {
       element,
       state,
       $t,
-      signal
+      signal,
+      readability
     );
   }
   async function runAnalyzer(analyzer, ctx) {

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

@@ -217,6 +217,7 @@ export default function(debug, ui) {
   });
   onBlokkliEvent("ui:resized", handleRefresh);
   onBlokkliEvent("option:finish-change", handleRefresh);
+  onBlokkliEvent("ui:update-rects", handleRefresh);
   onMounted(() => {
     doInitTimeout();
   });

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;