@blokkli/editor 2.0.0-alpha.42 → 2.0.0-alpha.44

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

@@ -27,11 +27,21 @@
         v-else-if="!ui.isTransforming.value"
         :key="animation.renderKey.value"
         v-model="isRunning"
+        v-model:issue-count="issueCount"
+        v-model:has-violation="hasViolation"
         :langcode="context.language"
         :analyze
         :is-shown
       />
     </template>
+    <template v-if="issueCount" #badge>
+      <div
+        class="bk-sidebar-badge"
+        :class="hasViolation ? 'bk-is-red' : 'bk-is-yellow'"
+      >
+        {{ issueCount }}
+      </div>
+    </template>
   </PluginSidebar>
 </template>
 
@@ -51,6 +61,8 @@ defineBlokkliFeature({
 });
 const { $t, context, animation, ui, analyze } = useBlokkli();
 const isRunning = ref(false);
+const issueCount = ref(0);
+const hasViolation = ref(false);
 </script>
 
 <script>

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

@@ -1,38 +1,39 @@
 const SCORE_CONFIGS = {
   en: {
-    label: "LIX",
-    compute: (tr, text) => tr.lix(text),
-    direction: "higher_harder",
-    bands: { easy: 40, ok: 59 },
-    impactThresholds: [50, 60, 70],
+    label: "FRE",
+    compute: (tr, text) => tr.fleschReadingEase(text),
+    direction: "higher_easier",
+    bands: { easy: 60, ok: 30 },
+    impactThresholds: [50, 30, 10],
+    minWords: 15,
     referenceTable: [
-      { range: "Below 25", label: "Very easy (children's books)" },
-      { range: "25\u201340", label: "Easy (simple articles)" },
-      { range: "40\u201350", label: "Medium (newspapers)" },
-      { range: "50\u201360", label: "Difficult (official documents)" },
+      { range: "Above 70", label: "Very easy (simple, conversational)" },
+      { range: "60\u201370", label: "Easy (standard web content)" },
+      { range: "50\u201360", label: "Fairly difficult (could be simpler)" },
+      { range: "30\u201350", label: "Difficult (academic, technical)" },
       {
-        range: "Above 60",
+        range: "Below 30",
         label: "Very difficult \u2014 this is what gets flagged"
       },
-      { range: "Above 70", label: "Critical \u2014 must be simplified" }
+      { range: "Below 10", label: "Critical \u2014 must be simplified" }
     ]
   },
   de: {
     label: "WSTF",
     compute: (tr, text) => tr.wienerSachtextformel(text, 1),
     direction: "higher_harder",
-    bands: { easy: 7, ok: 14 },
-    impactThresholds: [12, 16, 20],
+    bands: { easy: 15, ok: 18 },
+    impactThresholds: [16, 20, 24],
+    minWords: 5,
     referenceTable: [
-      { range: "Below 4", label: "Very easy (children's books)" },
-      { range: "4\u20137", label: "Easy (simple articles)" },
-      { range: "7\u201311", label: "Medium (standard website content)" },
-      { range: "11\u201314", label: "Moderately difficult (official documents)" },
+      { range: "Below 8", label: "Very easy (children's books)" },
+      { range: "8\u201315", label: "Easy (standard website content)" },
+      { range: "15\u201318", label: "Moderately difficult (could be simpler)" },
       {
-        range: "Above 14",
+        range: "Above 18",
         label: "Difficult \u2014 this is what gets flagged"
       },
-      { range: "Above 20", label: "Critical \u2014 must be simplified" }
+      { range: "Above 24", label: "Critical \u2014 must be simplified" }
     ]
   },
   fr: {
@@ -41,6 +42,7 @@ const SCORE_CONFIGS = {
     direction: "higher_harder",
     bands: { easy: 40, ok: 59 },
     impactThresholds: [50, 60, 70],
+    minWords: 5,
     referenceTable: [
       { range: "Below 25", label: "Very easy (children's books)" },
       { range: "25\u201340", label: "Easy (simple articles)" },
@@ -59,6 +61,7 @@ const SCORE_CONFIGS = {
     direction: "higher_easier",
     bands: { easy: 80, ok: 60 },
     impactThresholds: [60, 50, 40],
+    minWords: 5,
     referenceTable: [
       { range: "Above 80", label: "Very easy (children's books)" },
       { range: "60\u201380", label: "Easy (simple articles)" },
@@ -73,7 +76,6 @@ const SCORE_CONFIGS = {
   }
 };
 const SUPPORTED_LANGUAGES = ["en", "de", "fr", "it"];
-const DEFAULT_MIN_WORDS = 5;
 function getConfig(langcode) {
   if (isSupportedLangcode(langcode)) {
     return SCORE_CONFIGS[langcode];
@@ -153,7 +155,9 @@ export function createBuiltinReadabilityAnalyzer() {
     },
     description: "Analyzes text readability using language-specific algorithms (LIX, Wiener Sachtextformel, Gulpease).",
     supportedLanguages: SUPPORTED_LANGUAGES,
-    minWordsForConfidence: DEFAULT_MIN_WORDS,
+    get minWordsForConfidence() {
+      return getConfig(currentLangcode).minWords;
+    },
     get scoreLabel() {
       return getConfig(currentLangcode).label;
     },
@@ -182,7 +186,7 @@ export function createBuiltinReadabilityAnalyzer() {
         const trimmed = text.trim();
         if (!trimmed) return null;
         const words = segmentWords(trimmed);
-        if (words.length < DEFAULT_MIN_WORDS) return null;
+        if (words.length < config.minWords) return null;
         const score = safe(() => config.compute(tr, trimmed));
         return score != null ? round(score) : null;
       });
@@ -195,6 +199,18 @@ export function createBuiltinReadabilityAnalyzer() {
     },
     getAgentContext() {
       return buildAgentContext(getConfig(currentLangcode));
+    },
+    getScaleInfo(langcode) {
+      const config = getConfig(langcode);
+      const t1 = Math.min(config.bands.easy, config.bands.ok);
+      const t2 = Math.max(config.bands.easy, config.bands.ok);
+      const padding = Math.round((t2 - t1) * 0.5);
+      return {
+        thresholds: [t1, t2],
+        direction: config.direction,
+        scaleMin: Math.max(0, t1 - padding),
+        scaleMax: t2 + padding
+      };
     }
   };
 }

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

@@ -9,9 +9,9 @@ export type ReadabilityBand = 'easy' | 'ok' | 'hard';
 export type ReadabilityChunkResult = {
     text: string;
     html?: string;
-    score: number;
-    band: ReadabilityBand;
-    impact: AnalyzeImpact;
+    score: number | null;
+    band: ReadabilityBand | null;
+    impact: AnalyzeImpact | null;
     description?: string;
 };
 /**
@@ -69,4 +69,19 @@ export type ReadabilityAnalyzer = {
      * Optional display formatting for a score value.
      */
     formatScore?(value: number): string;
+    /**
+     * Return scale information for visualizing score bands.
+     * Used by the UI to render a score bar with thresholds.
+     *
+     * - `thresholds`: The two boundary values between easy/ok and ok/hard.
+     *   Listed in ascending order (lower value first).
+     * - `direction`: Whether higher scores mean easier or harder text.
+     * - `scaleMin`/`scaleMax`: The visual range of the score bar.
+     */
+    getScaleInfo?(langcode: string): {
+        thresholds: [number, number];
+        direction: 'higher_easier' | 'higher_harder';
+        scaleMin: number;
+        scaleMax: number;
+    };
 };

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

@@ -21,6 +21,7 @@ type __VLS_Props = {
     color?: string;
     backgroundColor?: string;
     activeLabel?: string;
+    activeRect?: Rectangle;
 };
 declare function getRect(): Rectangle;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

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

@@ -14,6 +14,7 @@
     v-show="activeLabel"
     ref="labelEl"
     class="bk bk-dragging-overlay-label"
+    :class="labelPosition.className"
     :style="styleLabel"
   >
     <Icon name="bk_mdi_drag_pan" />
@@ -45,10 +46,12 @@ const props = defineProps({
   isTouch: { type: Boolean, required: true },
   color: { type: String, required: false },
   backgroundColor: { type: String, required: false },
-  activeLabel: { type: String, required: false }
+  activeLabel: { type: String, required: false },
+  activeRect: { type: Object, required: false }
 });
 const MAX_WIDTH = 350;
 const MAX_HEIGHT = 200;
+const LABEL_GAP = 20;
 const labelEl = useTemplateRef("labelEl");
 const labelWidth = ref(0);
 const labelHeight = ref(0);
@@ -107,12 +110,109 @@ const style = computed(() => {
     "--bk-active-color": props.color && props.activeLabel ? props.color : "rgba(255,255,255,0)"
   };
 });
-const styleLabel = computed(() => {
+function rangesOverlap(aStart, aEnd, bStart, bEnd) {
+  return aStart < bEnd && aEnd > bStart;
+}
+function resolveVerticalPlacement(activeRect, dragItemsRect, lw, lh, vw, vh, gap) {
+  const x = Math.min(
+    Math.max(0, activeRect.x + activeRect.width / 2 - lw / 2),
+    vw - lw
+  );
+  const overlapsHorizontally = rangesOverlap(
+    x,
+    x + lw,
+    dragItemsRect.x,
+    dragItemsRect.x + dragItemsRect.width
+  );
+  let topEdge = activeRect.y;
+  if (overlapsHorizontally) {
+    topEdge = Math.min(topEdge, dragItemsRect.y);
+  }
+  let y = topEdge - lh - gap;
+  let placement = "top";
+  if (y < 0) {
+    let bottomEdge = activeRect.y + activeRect.height;
+    if (overlapsHorizontally) {
+      bottomEdge = Math.max(bottomEdge, dragItemsRect.y + dragItemsRect.height);
+    }
+    y = bottomEdge + gap;
+    placement = "bottom";
+  }
+  y = Math.min(Math.max(0, y), vh - lh);
+  return { x, y, placement, className: `bk-is-${placement}` };
+}
+function resolveHorizontalPlacement(activeRect, dragItemsRect, lw, lh, vw, vh, gap) {
+  const y = Math.min(
+    Math.max(0, activeRect.y + activeRect.height / 2 - lh / 2),
+    vh - lh
+  );
+  const overlapsVertically = rangesOverlap(
+    y,
+    y + lh,
+    dragItemsRect.y,
+    dragItemsRect.y + dragItemsRect.height
+  );
+  let leftEdge = activeRect.x;
+  if (overlapsVertically) {
+    leftEdge = Math.min(leftEdge, dragItemsRect.x);
+  }
+  let x = leftEdge - lw - gap;
+  let placement = "left";
+  if (x < 0) {
+    let rightEdge = activeRect.x + activeRect.width;
+    if (overlapsVertically) {
+      rightEdge = Math.max(rightEdge, dragItemsRect.x + dragItemsRect.width);
+    }
+    x = rightEdge + gap;
+    placement = "right";
+  }
+  x = Math.min(Math.max(0, x), vw - lw);
+  return { x, y, placement, className: `bk-is-${placement}` };
+}
+const labelPosition = computed(() => {
+  if (props.activeRect && !props.isTouch) {
+    const vw = ui.viewport.value.width;
+    const vh = ui.viewport.value.height;
+    const lw = labelWidth.value;
+    const lh = labelHeight.value;
+    const gap = LABEL_GAP;
+    const dragItemsRect = {
+      x: translateX.value,
+      y: translateY.value,
+      width: width.value,
+      height: height.value
+    };
+    const useHorizontal = props.activeRect.width >= props.activeRect.height && props.activeRect.width < vw / 2;
+    if (useHorizontal) {
+      return resolveHorizontalPlacement(
+        props.activeRect,
+        dragItemsRect,
+        lw,
+        lh,
+        vw,
+        vh,
+        gap
+      );
+    }
+    return resolveVerticalPlacement(
+      props.activeRect,
+      dragItemsRect,
+      lw,
+      lh,
+      vw,
+      vh,
+      gap
+    );
+  }
   const x = Math.min(
     Math.max(10, translateX.value - labelWidth.value / 2 + width.value / 2),
     ui.viewport.value.width - labelWidth.value
   );
   const y = Math.max(10, translateY.value - labelHeight.value - 20);
+  return { x, y, placement: "top", className: "bk-is-top" };
+});
+const styleLabel = computed(() => {
+  const { x, y } = labelPosition.value;
   return {
     transform: `translate(${x}px, ${y}px)`,
     "--bk-active-background-color": props.backgroundColor && props.activeLabel ? props.backgroundColor : "rgba(255,255,255,0)",
@@ -200,8 +300,13 @@ onMounted(() => {
   let boundsX = props.isTouch ? 0 : bounds.x;
   let boundsY = props.isTouch ? translateY.value : bounds.y;
   if (!mouseInsideBound && !props.isTouch) {
-    boundsX = props.startCoords.x - bounds.width / 2;
-    boundsY = props.startCoords.y - bounds.height / 2;
+    if (isExisting.value) {
+      boundsX = props.startCoords.x - 20;
+      boundsY = props.startCoords.y - 20;
+    } else {
+      boundsX = props.startCoords.x - bounds.width / 2;
+      boundsY = props.startCoords.y - bounds.height / 2;
+    }
   }
   offsetX.value = props.startCoords.x - boundsX;
   offsetY.value = props.startCoords.y - boundsY;
@@ -254,7 +359,7 @@ onMounted(() => {
     const borderRadius = isTop ? theme.getDraggableStyle(item.element).radiusMin : 4;
     return {
       isTop,
-      from: ui.lowPerformanceMode.value || !mouseInsideBound ? to : from,
+      from: ui.lowPerformanceMode.value || !mouseInsideBound && !isExisting.value ? to : from,
       to,
       width: item.element.offsetWidth,
       height: item.element.offsetHeight,

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

@@ -21,6 +21,7 @@ type __VLS_Props = {
     color?: string;
     backgroundColor?: string;
     activeLabel?: string;
+    activeRect?: Rectangle;
 };
 declare function getRect(): Rectangle;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

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

@@ -11,6 +11,7 @@ declare var __VLS_7: {
     backgroundColor: any;
     color: any;
     label: any;
+    activeRect: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;

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

@@ -4,6 +4,7 @@
       :background-color="activeBackgroundColorHex"
       :color="activeColor"
       :label="active?.label"
+      :active-rect="activeScreenRect"
     />
   </Teleport>
 </template>
@@ -611,7 +612,8 @@ const fieldRenderPalette = computed(() => {
       gradEnd: accent[500],
       borderOuter: accent[400],
       borderInner: accent[300],
-      color: accent[950]
+      color: [255, 255, 255]
+      // color: accent[950],
     },
     "2": {
       gradStart: mono[700],
@@ -667,6 +669,19 @@ const activeBackgroundColorHex = computed(() => {
   }
   return "";
 });
+const activeScreenRect = computed(() => {
+  if (!active.value) {
+    return;
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  return {
+    x: active.value.x * scale + offset.x,
+    y: active.value.y * scale + offset.y,
+    width: active.value.width * scale,
+    height: active.value.height * scale
+  };
+});
 const activeHoverField = ref(null);
 const activeHoverRect = computed(() => {
   if (!activeHoverField.value) {

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

@@ -11,6 +11,7 @@ declare var __VLS_7: {
     backgroundColor: any;
     color: any;
     label: any;
+    activeRect: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;

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

@@ -1,7 +1,7 @@
 <template>
   <Renderer
     v-if="dragItems.length && isVisible"
-    v-slot="{ backgroundColor, color, label }"
+    v-slot="{ backgroundColor, color, label, activeRect }"
     :items="dragItems"
     :box="box"
     :mouse-x="mouseX"
@@ -18,6 +18,7 @@
       :background-color
       :color
       :active-label="label"
+      :active-rect="activeRect"
     />
   </Renderer>
   <Teleport to="#bk-canvas-overlay">

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/ChunkOverlay.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    text: string;
+    fieldType: 'plain' | 'markup';
+    element: HTMLElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/ChunkOverlay.vue

@@ -0,0 +1,135 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <div
+      class="bk bk-readability-chunk-overlay"
+      :class="{ 'bk-is-stale': stale }"
+      :style="containerStyle"
+    >
+      <div
+        v-for="chunk in visibleChunks"
+        :key="chunk.index"
+        class="bk-readability-chunk-rect"
+        :class="'bk-is-' + chunk.band"
+        :style="chunk.style"
+      >
+        <span class="bk-readability-chunk-badge">
+          {{ scoreLabel }} {{ formatScore(chunk.score) }}
+        </span>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  useBlokkli
+} from "#imports";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { collectTextElements } from "../../../analyze/analyzers/helpers/collectTextElements";
+const props = defineProps({
+  text: { type: String, required: true },
+  fieldType: { type: String, required: true },
+  element: { type: null, required: true }
+});
+const { readability, context, ui } = useBlokkli();
+const chunks = ref([]);
+const stale = ref(false);
+let timeout = null;
+let lastFullUpdate = 0;
+const scoreLabel = computed(() => readability.analyzer.value.scoreLabel);
+function formatScore(value) {
+  return readability.formatScore(value);
+}
+const containerStyle = computed(() => {
+  const offset = ui.artboardOffset.value;
+  return {
+    width: ui.artboardSize.value.width + "px",
+    height: ui.artboardSize.value.height + "px",
+    transform: `translate(${offset.x}px, ${offset.y}px) scale(${ui.artboardScale.value})`
+  };
+});
+const visibleChunks = computed(
+  () => chunks.value.filter((c) => c.style.width !== "0px")
+);
+function updatePositions() {
+  for (const chunk of chunks.value) {
+    const r = ui.getAbsoluteElementRect(chunk.element);
+    chunk.style = {
+      width: r.width + "px",
+      height: r.height + "px",
+      transform: `translate(${r.x}px, ${r.y}px)`
+    };
+  }
+}
+async function analyze(text) {
+  if (!text.trim() || props.fieldType !== "markup") {
+    chunks.value = [];
+    stale.value = false;
+    return;
+  }
+  const chunkResults = await readability.analyzeText(
+    text,
+    context.value.language,
+    props.fieldType
+  );
+  if (chunkResults.length === 0) {
+    chunks.value = [];
+    stale.value = false;
+    return;
+  }
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  const textElements = collectTextElements(props.element);
+  const newChunks = [];
+  const count = Math.min(chunkResults.length, textElements.length);
+  for (let i = 0; i < count; i++) {
+    const result = chunkResults[i];
+    if (result.score === null || result.band === null) continue;
+    const textEl = textElements[i];
+    const r = ui.getAbsoluteElementRect(textEl.element);
+    newChunks.push({
+      index: i,
+      score: result.score,
+      band: result.band,
+      element: textEl.element,
+      style: {
+        width: r.width + "px",
+        height: r.height + "px",
+        transform: `translate(${r.x}px, ${r.y}px)`
+      }
+    });
+  }
+  chunks.value = newChunks;
+  stale.value = false;
+}
+watch(
+  () => props.text,
+  (newText) => {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+    stale.value = true;
+    timeout = window.setTimeout(() => {
+      analyze(newText);
+    }, 500);
+  }
+);
+onBlokkliEvent("animationFrame", (ctx) => {
+  const forceRefresh = ctx.time - lastFullUpdate > 1e3;
+  if (!forceRefresh) return;
+  lastFullUpdate = ctx.time;
+  updatePositions();
+});
+onMounted(() => {
+  analyze(props.text);
+});
+onBeforeUnmount(() => {
+  if (timeout) {
+    window.clearTimeout(timeout);
+  }
+});
+</script>

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/ChunkOverlay.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    text: string;
+    fieldType: 'plain' | 'markup';
+    element: HTMLElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/index.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    text: string;
+    fieldType: 'plain' | 'markup';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;