@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.56

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

@@ -37,6 +37,11 @@ export type EditableFieldFocusEvent = {
     fieldName: string;
     uuid?: string;
 };
+export type DroppableFieldOpenEvent = {
+    fieldName: string;
+    uuid: string;
+    entityType: string;
+};
 export type EditableFieldUpdateEvent = {
     name: string;
     entityUuid: string;
@@ -236,6 +241,7 @@ export interface EventbusEvents {
     'editable:focus': EditableFieldFocusEvent;
     'editable:update': EditableFieldUpdateEvent;
     'editable:save': undefined;
+    'droppable:open': DroppableFieldOpenEvent;
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;

package/dist/runtime/editor/features/analyze/Main.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     langcode: string;
     analyze: AnalyzeProvider;
     isShown: boolean;
+    shouldRender: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -53,7 +53,7 @@
       </p>
     </div>
 
-    <div v-if="results.length" class="bk-analyze-wrapper">
+    <div v-if="results.length && shouldRender" class="bk-analyze-wrapper">
       <div v-if="categoryOptions.length > 2" class="bk-analyze-form">
         <FormSelect
           id="category"
@@ -77,11 +77,9 @@ import {
   useState,
   onMounted,
   onUnmounted,
-  watch
+  watch,
+  defineAsyncComponent
 } from "#imports";
-import Results from "./Results/Results.vue";
-import IgnoredResults from "./Ignored/index.vue";
-import AnalyzeSummary from "./Summary/index.vue";
 import { useAnalyzeHelper } from "./helper";
 import {
   FormSelect,
@@ -91,10 +89,14 @@ import {
 import { renderCycle } from "#blokkli/editor/helpers/vue";
 import { defineHighlight, onBlokkliEvent } from "#blokkli/editor/composables";
 import { falsy } from "#blokkli/helpers";
+const AnalyzeSummary = defineAsyncComponent(() => import("./Summary/index.vue"));
+const IgnoredResults = defineAsyncComponent(() => import("./Ignored/index.vue"));
+const Results = defineAsyncComponent(() => import("./Results/Results.vue"));
 const props = defineProps({
   langcode: { type: String, required: true },
   analyze: { type: Object, required: true },
-  isShown: { type: Boolean, required: true }
+  isShown: { type: Boolean, required: true },
+  shouldRender: { type: Boolean, required: true }
 });
 const ALL = "ALL";
 const {
@@ -182,8 +184,7 @@ defineHighlight(() => {
           const id = result.id + "_____" + target.globalIndex;
           let label = result.title;
           if (node.score != null) {
-            const scoreLabel = readability.analyzer.value.scoreLabel;
-            label += ` \xB7 ${scoreLabel} ${readability.formatScore(node.score)}`;
+            label += ` \xB7 ${readability.scoreLabel.value} ${readability.formatScore(node.score)}`;
           }
           highlights.push({
             id,

package/dist/runtime/editor/features/analyze/Main.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     langcode: string;
     analyze: AnalyzeProvider;
     isShown: boolean;
+    shouldRender: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

package/dist/runtime/editor/features/analyze/Results/ResultsItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bk-analyze-results-item">
+  <div class="_bk_py-20 _bk_border-b _bk_border-b-mono-300 _bk_first:pt-0 _bk_last:border-b-0">
     <div class="bk-analyze-results-item-tags">
       <Status :status :title="key" />
       <div class="bk-pill bk-is-mono">{{ categoryLabel }}</div>
@@ -10,10 +10,12 @@
         </a>
       </div>
     </div>
-    <h3>{{ title }}</h3>
-    <p v-if="descriptionMapped || link">
-      {{ descriptionMapped }}
-    </p>
+    <h3 class="_bk_font-semibold _bk_text-base">{{ title }}</h3>
+    <div
+      v-if="description"
+      class="_bk_text-sm _bk_text-mono-600 _bk_mt-5 bk-analyze-results-item-description"
+      v-html="description"
+    />
 
     <ResultsItemNodes :nodes :result-id="id" />
   </div>
@@ -41,15 +43,5 @@ const { $t } = useBlokkli();
 const categoryLabel = computed(() => {
   return getCategoryLabel(props.category);
 });
-const descriptionMapped = computed(() => {
-  if (!props.description) {
-    return "";
-  }
-  const punctuation = /[.!?]$/;
-  if (punctuation.test(props.description.trim())) {
-    return props.description;
-  }
-  return props.description + ".";
-});
 const key = computed(() => `${props.plugin}:${props.id}`);
 </script>

package/dist/runtime/editor/features/analyze/Results/ResultsItemNodesTarget.vue

@@ -14,7 +14,9 @@
       @click.prevent="onClick"
     >
       <div v-if="node.score != null && node.scoreLabel">
-        <span class="bk-pill _bk_shrink-0">{{ node.score.toFixed(1) }}</span>
+        <span class="bk-pill _bk_shrink-0">{{
+          readability.formatScore(node.score)
+        }}</span>
       </div>
       <span class="_bk_truncate _bk_w-full _bk_inline-block _bk_font-mono">{{
         getLabel()
@@ -57,7 +59,7 @@ const props = defineProps({
   node: { type: Object, required: true },
   target: { type: Object, required: true }
 });
-const { $t, ui, eventBus, dom, blocks, element } = useBlokkli();
+const { $t, ui, eventBus, dom, blocks, element, readability } = useBlokkli();
 const activeIndex = computed(() => {
   const index = ui.activeHighlightId.value.split("_____")[1];
   if (index === void 0) {

package/dist/runtime/editor/features/analyze/analyzers/axe.js

@@ -56,15 +56,15 @@ export default defineAnalyzer((options) => {
     id: "axe",
     label: "Axe (Accessibility Check)",
     requireRawPage: true,
-    init: async function(context) {
-      const axeModule = await import("axe-core");
-      axe = axeModule.default;
-      const locale = await getLocale(context.interfaceLangcode) ?? {};
-      axe.configure({
-        locale
-      });
-    },
-    run: function() {
+    run: async function(ctx) {
+      if (!axe) {
+        const axeModule = await import("axe-core");
+        axe = axeModule.default;
+        const locale = await getLocale(ctx.langcode) ?? {};
+        axe.configure({
+          locale
+        });
+      }
       return axe.run(elementContext, options?.runOptions ?? {}).then((result) => {
         return [
           ...mapAxeResults(result.incomplete, "incomplete"),

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

@@ -37,8 +37,11 @@ function buildDescription(lang, band, $t) {
   return parts.join(" \xB7 ");
 }
 async function analyzeViaProvider(readabilityProvider, langcode, $t) {
+  if (!readabilityProvider.isAvailable.value) {
+    return [];
+  }
   const result = await readabilityProvider.analyzeAllFields();
-  const analyzer = readabilityProvider.analyzer.value;
+  const scoreLabel = readabilityProvider.scoreLabel.value;
   const hardNodes = [];
   const okNodes = [];
   for (const [key, fieldResult] of Object.entries(result)) {
@@ -49,7 +52,7 @@ async function analyzeViaProvider(readabilityProvider, langcode, $t) {
     const fieldTextElements = fieldElement ? collectTextElements(fieldElement) : [];
     for (let i = 0; i < fieldResult.chunks.length; i++) {
       const chunk = fieldResult.chunks[i];
-      if (chunk.band === "easy" || chunk.band === null || chunk.score === null)
+      if (chunk.band === "easy" || chunk.band === null || chunk.score === null || chunk.impact === null)
         continue;
       const targets = [];
       const textElement = fieldTextElements[i];
@@ -58,9 +61,9 @@ async function analyzeViaProvider(readabilityProvider, langcode, $t) {
       }
       const node = {
         description: buildDescription(langcode, chunk.band, $t),
-        impact: analyzer.impactForScore(chunk.score),
+        impact: chunk.impact,
         score: chunk.score,
-        scoreLabel: analyzer.scoreLabel,
+        scoreLabel,
         uuid,
         identifier: hashString(chunk.text),
         targets
@@ -115,9 +118,6 @@ export default defineAnalyzer(() => {
     },
     description: "Analyzes text readability using language-specific algorithms. Flags hard-to-read text blocks.",
     continuous: true,
-    async init(context) {
-      await context.readability.ensureInitialized();
-    },
     run(context) {
       return analyzeViaProvider(
         context.readability,

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

@@ -11,7 +11,7 @@
     <template #icon>
       <AnalyzeIcon :is-running />
     </template>
-    <template #default="{ isShown }">
+    <template #default="{ isShown, shouldRender }">
       <div v-if="ui.isProxyMode.value" class="bk-sidebar-padding bk">
         <InfoBox
           :text="
@@ -32,6 +32,7 @@
         :langcode="context.language"
         :analyze
         :is-shown
+        :should-render
       />
     </template>
     <template v-if="issueCount" #badge>
@@ -321,34 +322,33 @@ export default {
     width: 18px;
     height: 18px;
     fill: currentColor
-}
-  .bk.bk-analyze .bk-analyze-results-item {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding-top: 20px;
-    padding-bottom: 20px
-}
-  .bk.bk-analyze .bk-analyze-results-item:first-child {
-    padding-top: 0px
-}
-  .bk.bk-analyze .bk-analyze-results-item:last-child {
-    border-bottom-width: 0
-}
-  .bk.bk-analyze .bk-analyze-results-item > h3 {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 600
-}
-  .bk.bk-analyze .bk-analyze-results-item > p {
-    margin-top: 5px;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
 }
   .bk.bk-analyze .bk-analyze-results-item:hover .bk-analyze-results-item-help span {
     opacity: 1
+}
+  .bk.bk-analyze .bk-analyze-results-item-description ul {
+    margin-left: 15px;
+    list-style-type: disc
+}
+  .bk.bk-analyze .bk-analyze-results-item-description ol {
+    margin-left: 15px;
+    list-style-type: decimal
+}
+  .bk.bk-analyze .bk-analyze-results-item-description ul,
+    .bk.bk-analyze .bk-analyze-results-item-description ol,
+    .bk.bk-analyze .bk-analyze-results-item-description p {
+    margin-top: 8px;
+    margin-bottom: 8px
+}
+  .bk.bk-analyze .bk-analyze-results-item-description ul:first-child,
+    .bk.bk-analyze .bk-analyze-results-item-description ol:first-child,
+    .bk.bk-analyze .bk-analyze-results-item-description p:first-child {
+    margin-top: 0px
+}
+  .bk.bk-analyze .bk-analyze-results-item-description ul:last-child,
+    .bk.bk-analyze .bk-analyze-results-item-description ol:last-child,
+    .bk.bk-analyze .bk-analyze-results-item-description p:last-child {
+    margin-bottom: 0px
 }
   .bk.bk-analyze .bk-analyze-results-item-nodes {
     margin-top: 10px;

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

@@ -29,28 +29,33 @@ 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).
+ * Adapters can provide a custom analyzer via `getReadabilityAnalyzer`
+ * on an adapter extension; the built-in implementation lives in the
+ * `@blokkli/readability` sub-module.
+ *
+ * Every per-language method takes the active langcode explicitly — analyzers
+ * are stateless with respect to language. The `analyze` method is responsible
+ * for any async setup (e.g. loading language data on first call).
  */
 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".
+     * Short label for the primary score metric in the given language
+     * (e.g. "LIX", "Gulpease", "CEFR").
      */
-    scoreLabel: string;
+    scoreLabel(langcode: string): string;
     /**
-     * Optional initialization (e.g. lazy-load a library).
+     * Minimum word count required to produce a confident score in the given
+     * language.
      */
-    init?(langcode: string): void | Promise<void>;
+    minWordsForConfidence?(langcode: string): number;
     /**
      * Score an array of plain-text strings.
      * Returns one primary score per input text (null if not scorable).
+     * Implementations may perform lazy setup on first call.
      */
     analyze(texts: string[], langcode: string): Promise<(number | null)[]>;
     /**
@@ -60,18 +65,17 @@ export type ReadabilityAnalyzer = {
     /**
      * Determine the impact severity for a score.
      */
-    impactForScore(score: number): AnalyzeImpact;
+    impactForScore(score: number, langcode: string): AnalyzeImpact;
     /**
-     * Return context text for the agent prompt (e.g. LIX reference table).
+     * Return context text for the agent prompt (e.g. score reference table).
      */
-    getAgentContext(): string;
+    getAgentContext(langcode: string): string;
     /**
      * Optional display formatting for a score value.
      */
-    formatScore?(value: number): string;
+    formatScore?(value: number, langcode: string): 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).

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

@@ -12,9 +12,13 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { PluginViewOption } from "#blokkli/editor/plugins";
-import AnchorOverlay from "./Overlay/index.vue";
+const AnchorOverlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
 defineBlokkliFeature({
   id: "anchors",
   label: "Anchors",

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

@@ -58,7 +58,8 @@ import {
   computed,
   useBlokkli,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  defineAsyncComponent
 } from "#imports";
 import {
   calculateIntersection,
@@ -70,7 +71,6 @@ import {
   PluginViewOption,
   PluginContextMenu
 } from "#blokkli/editor/plugins";
-import Overview from "./Overview/index.vue";
 import Scrollbar from "./Scrollbar/index.vue";
 import { addElementClasses, onBlokkliEvent } from "#blokkli/editor/composables";
 import { asValidNumber } from "#blokkli/editor/helpers/math";
@@ -81,6 +81,7 @@ import {
   mouse,
   dom as domPlugin
 } from "artboard-deluxe";
+const Overview = defineAsyncComponent(() => import("./Overview/index.vue"));
 const props = defineProps({
   persist: { type: Boolean, required: true },
   momentum: { type: Boolean, required: true },

package/dist/runtime/editor/features/block-scheduler/Dialog/index.vue

@@ -230,3 +230,81 @@ async function onSubmit() {
   emit("close");
 }
 </script>
+
+<style>
+.bk.bk-block-scheduler-dialog {
+  min-height: calc(100vh - 350px);
+}
+
+.bk .bk-schedule-section-content {
+  padding-top: 5px;
+  padding-bottom: 25px;
+}
+
+.bk .bk-schedule-section-mixed .bk-button {
+  margin-top: 20px;
+}
+
+.bk .bk-schedule-section {
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+.bk .bk-schedule-section:first-child {
+  border-top-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+.bk .bk-schedule-section > .bk-checkbox-toggle {
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.bk .bk-schedule-section-toggle-title {
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bk .bk-schedule-section-toggle-title .bk-icon svg {
+  width: 25px;
+  height: 25px;
+  fill: currentColor;
+}
+
+.bk .bk-schedule-section-toggle-title-label {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 700;
+}
+
+.bk .bk-block-scheduler-table {
+  margin-top: 20px;
+  border-radius: 6px;
+  border-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  padding: 20px;
+}
+
+.bk .bk-block-scheduler-table table {
+  margin-top: 20px;
+}
+
+.bk .bk-block-scheduler-table table thead {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk .bk-block-scheduler-table-title {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 700;
+}
+</style>

package/dist/runtime/editor/features/block-scheduler/index.vue

@@ -37,10 +37,16 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed, ref } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  ref,
+  defineAsyncComponent
+} from "#imports";
 import { PluginItemAction } from "#blokkli/editor/plugins";
 import { BlokkliTransition, Icon } from "#blokkli/editor/components";
-import SchedulerDialog from "./Dialog/index.vue";
+const SchedulerDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 defineBlokkliFeature({
   id: "block-scheduler",
   icon: "bk_mdi_calendar_month",
@@ -102,115 +108,54 @@ export default {
 </script>
 
 <style>
-.bk.bk-block-scheduler-dialog {
-  min-height: calc(100vh - 350px);
-}
+.bk .bk-item-action.bk-has-schedule {
 
-.bk .bk-schedule-section-content {
-  padding-top: 5px;
-  padding-bottom: 25px;
+    background-color: rgb(var(--bk-theme-yellow-dark) / 0.5)
 }
 
-.bk .bk-schedule-section-mixed .bk-button {
-  margin-top: 20px;
-}
+.bk .bk-item-action.bk-has-schedule:hover {
 
-.bk .bk-schedule-section {
-  border-bottom-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    background-color: rgb(var(--bk-theme-yellow-dark) / 0.7)
 }
 
-.bk .bk-schedule-section:first-child {
-  border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-}
+    .bk .bk-item-action.bk-has-schedule .bk-icon-clock {
 
-.bk .bk-schedule-section > .bk-checkbox-toggle {
-  align-items: center;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
+    --bk-tw-text-opacity: 1;
 
-.bk .bk-schedule-section-toggle-title {
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+    color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1))
 }
+  .bk .bk-schedule-action-icon {
 
-.bk .bk-schedule-section-toggle-title .bk-icon svg {
-  width: 25px;
-  height: 25px;
-  fill: currentColor;
+    position: relative
 }
+  .bk .bk-schedule-action-icon .bk-schedule-action-icon-check {
 
-.bk .bk-schedule-section-toggle-title-label {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 700;
-}
+    position: absolute;
 
-.bk .bk-block-scheduler-table {
-  margin-top: 20px;
-  border-radius: 6px;
-  border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-  padding: 20px;
-}
+    top: -5px;
 
-.bk .bk-block-scheduler-table table {
-  margin-top: 20px;
-}
+    right: -5px;
 
-.bk .bk-block-scheduler-table table thead {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-}
+    display: flex;
 
-.bk .bk-block-scheduler-table-title {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 700;
-}
+    width: 15px;
 
-.bk .bk-schedule-action-icon {
-  position: relative;
-}
+    height: 15px;
 
-.bk .bk-schedule-action-icon .bk-schedule-action-icon-check {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  display: flex;
-  width: 15px;
-  height: 15px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
-}
+    align-items: center;
 
-.bk .bk-schedule-action-icon .bk-schedule-action-icon-check svg {
-  width: 10px;
-  height: 10px;
-}
+    justify-content: center;
 
-.bk .bk-item-action.bk-has-schedule {
-  background-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
-}
+    border-radius: 9999px;
 
-.bk .bk-item-action.bk-has-schedule:hover {
-  background-color: rgb(var(--bk-theme-yellow-dark) / 0.7);
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1))
 }
+  .bk .bk-schedule-action-icon .bk-schedule-action-icon-check svg {
+
+    width: 10px;
 
-.bk .bk-item-action.bk-has-schedule .bk-icon-clock {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1));
+    height: 10px
 }
 </style>

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

@@ -44,9 +44,9 @@
             <span>{{ crumb.label }}</span>
           </button>
         </li>
-        <li v-if="selection.activeEditableLabel.value">
+        <li v-if="selection.activeFieldLabel.value">
           <div class="bk-breadcrumb-inner bk-is-editable">
-            <span>{{ selection.activeEditableLabel.value }}</span>
+            <span>{{ selection.activeFieldLabel.value }}</span>
           </div>
         </li>
       </ul>