@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

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

@@ -189,6 +189,7 @@ export interface EventbusEvents {
     'multi-select:start': MultiSelectStartEvent;
     'dragging:start': DraggableStartEvent;
     'dragging:drop': DropTargetEvent;
+    'dragging:move': Coord;
     'dragging:end': undefined;
     'add:block:new': AddNewBlockEvent;
     updateMutatedFields: UpdateMutatedFieldsEvent;
@@ -215,6 +216,14 @@ export interface EventbusEvents {
     'state:reload:before': undefined;
     'state:reloaded': undefined;
     'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted when editing a complex option type (e.g. chart data).
+     */
+    'option:edit-complex': {
+        uuid: string;
+        key: string;
+        dataType: string;
+    };
     /**
      * Emitted after finishing changing options.
      */
@@ -241,6 +250,13 @@ export interface EventbusEvents {
     'view-option:toggle': {
         id: string;
     };
+    /**
+     * Emitted when editing a fragment provided by a feature.
+     */
+    'fragment:edit': {
+        name: string;
+        uuid: string;
+    };
 }
 type EventbusEventsType = {
     [K in keyof EventbusEvents]: EventbusEvents[K];

package/dist/runtime/editor/features/add-list/Help/Item.vue

@@ -73,12 +73,15 @@ onElementResize(el, (size) => {
 defineExpose({
   height
 });
-const { types, $t, definitions } = useBlokkli();
+const { types, $t, definitions, dom } = useBlokkli();
 const reusableBlockTypes = computed(
   () => types.generallyAvailableBundles.filter((v) => v.allowReusable)
 );
 const fragments = computed(() => {
-  return definitions.fragmentDefinitions.value.map((v) => {
+  const available = dom.generallyAvailableFragments.value;
+  return definitions.fragmentDefinitions.value.filter((definition) => {
+    return available.includes(definition.name);
+  }).map((v) => {
     return {
       bundle: fragmentBlockBundle,
       label: v.label,

package/dist/runtime/editor/features/add-list/index.vue

@@ -69,6 +69,7 @@ import AddListActions from "./Actions/index.vue";
 import AddListHelpComponent from "./Help/index.vue";
 import { itemEntityType } from "#blokkli-build/config";
 import { onlyUnique } from "#blokkli/helpers";
+import { defineDropHandler } from "#blokkli/editor/composables";
 const DEBUG_HELP = false;
 const { settings } = defineBlokkliFeature({
   id: "add-list",
@@ -86,7 +87,63 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-const { $t, ui, selection, state, tour, types, context, dom, plugins } = useBlokkli();
+const {
+  $t,
+  ui,
+  selection,
+  state,
+  tour,
+  types,
+  context,
+  dom,
+  plugins,
+  adapter,
+  definitions,
+  fields,
+  eventBus
+} = useBlokkli();
+defineDropHandler("new", {
+  async execute({ items, host, afterUuid, bundle }) {
+    const itemBundle = bundle || items[0].itemBundle;
+    const field = fields.find(host.uuid, host.fieldName);
+    if (!field) {
+      throw new Error(
+        `Failed to locate field with name "${host.fieldName}" on UUID "${host.uuid}"`
+      );
+    }
+    const definition = definitions.getBlockDefinition(
+      itemBundle,
+      field.fieldListType,
+      field.hostEntityBundle
+    );
+    const addBehaviour = definition?.editor?.addBehaviour || "form";
+    if (definition?.editor?.disableEdit || addBehaviour === "no-form" || addBehaviour.startsWith("editable:") || !adapter.formFrameBuilder) {
+      await state.mutateWithLoadingState(
+        () => adapter.addNewBlock({
+          bundle: itemBundle,
+          host,
+          afterUuid
+        })
+      );
+      return { focusEditable: true };
+    } else {
+      eventBus.emit("add:block:new", {
+        bundle: itemBundle,
+        host,
+        afterUuid
+      });
+    }
+  }
+});
+defineDropHandler("action", {
+  execute({ items, host, field, afterUuid }) {
+    items[0].action.callback({
+      preceedingUuid: afterUuid,
+      host,
+      field
+    });
+  }
+});
 const actions = computed(() => {
   return plugins.get("addAction").sort((a, b) => a.weight - b.weight);
 });

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

@@ -1,7 +1,8 @@
-import type { Analyzer } from './analyzers/types.js';
+import type { AnalyzeProvider } from '#blokkli/editor/providers/analyze';
 type __VLS_Props = {
     langcode: string;
-    analyzers: Analyzer[];
+    analyze: AnalyzeProvider;
+    isShown: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -21,6 +21,11 @@
         </RelativeTime>
       </p>
 
+      <FormToggle
+        v-model="keepVisible"
+        :label="$t('analyzeKeepVisible', 'Keep results visible')"
+      />
+
       <div v-if="analyzerStatuses.length > 1" class="bk-analyze-statuses">
         <div
           v-for="analyzer in analyzerStatuses"
@@ -56,7 +61,7 @@
     </div>
   </div>
   <Renderer
-    v-if="results.length"
+    v-if="results.length && (keepVisible || isShown)"
     v-model="activeId"
     :results
     :is-stale
@@ -78,16 +83,19 @@ import Results from "./Results/Results.vue";
 import AnalyzeSummary from "./Summary/index.vue";
 import Renderer from "./Renderer/index.vue";
 import { useAnalyzeHelper } from "./helper";
-import { FormSelect, RelativeTime } from "#blokkli/editor/components";
-import { AnalyzerContext } from "./analyzers/helpers/Context";
-import { normalizeToArray } from "./analyzers/helpers/normalizeArray";
+import {
+  FormSelect,
+  FormToggle,
+  RelativeTime
+} from "#blokkli/editor/components";
 import { renderCycle } from "#blokkli/editor/helpers/vue";
 const props = defineProps({
   langcode: { type: String, required: true },
-  analyzers: { type: Array, required: true }
+  analyze: { type: Object, required: true },
+  isShown: { type: Boolean, required: true }
 });
 const ALL = "ALL";
-const { $t, ui, state, directive, dom } = useBlokkli();
+const { $t, ui, state, directive, dom, storage } = useBlokkli();
 const { getCategoryLabel } = useAnalyzeHelper();
 const refreshKey = computed(() => {
   return `dom:${dom.settleKey.value}_directive:${directive.settleKey.value}_state:${state.refreshKey.value}`;
@@ -107,13 +115,13 @@ const activeId = useState(() => "");
 const lastRun = useState(() => 0);
 const lastRunKey = useState(() => "");
 const selectedCategory = useState(() => ALL);
-const hasInitialized = useState(() => false);
+const keepVisible = storage.use("analyze:keepVisible", true);
 const providerRootElement = ui.providerElement;
 const continuousAnalyzers = computed(
-  () => props.analyzers.filter((a) => a.continuous)
+  () => props.analyze.analyzers.value.filter((a) => a.continuous)
 );
 const manualAnalyzers = computed(
-  () => props.analyzers.filter((a) => !a.continuous)
+  () => props.analyze.analyzers.value.filter((a) => !a.continuous)
 );
 const hasContinuousAnalyzers = computed(
   () => continuousAnalyzers.value.length > 0
@@ -193,7 +201,7 @@ const analyzerStatuses = computed(() => {
   if (!hasRunOnce.value) {
     return [];
   }
-  return props.analyzers.map((analyzer) => {
+  return props.analyze.analyzers.value.map((analyzer) => {
     const status = analyzer.continuous ? $t("analyzeStatusUpToDate", "Up-to-date") : isStale.value ? $t("analyzeStatusStale", "Stale") : $t("analyzeStatusUpToDate", "Up-to-date");
     const title = typeof analyzer.label === "function" ? analyzer.label(ui.interfaceLanguage.value) : analyzer.label;
     return {
@@ -229,16 +237,6 @@ onUnmounted(() => {
     currentAbortController = null;
   }
 });
-function getContext(signal) {
-  return new AnalyzerContext(
-    props.langcode,
-    ui.interfaceLanguage.value,
-    providerRootElement,
-    state,
-    $t,
-    signal
-  );
-}
 async function runContinuous() {
   if (!continuousAnalyzers.value.length) {
     return;
@@ -251,21 +249,15 @@ async function runContinuous() {
   isRunning.value = true;
   let wasAborted = false;
   try {
-    const context = getContext(abortController.signal);
-    if (!hasInitialized.value) {
-      await Promise.all(
-        props.analyzers.map(async (analyzer) => {
-          if (analyzer.init) {
-            await analyzer.init(context);
-          }
-        })
-      );
-      hasInitialized.value = true;
-    }
+    await props.analyze.ensureInitialized();
     if (abortController.signal.aborted) {
       wasAborted = true;
       return;
     }
+    const context = props.analyze.createContext(
+      providerRootElement,
+      abortController.signal
+    );
     const newResults = [];
     for (let i = 0; i < continuousAnalyzers.value.length; i++) {
       if (abortController.signal.aborted) {
@@ -273,7 +265,7 @@ async function runContinuous() {
         return;
       }
       const analyzer = continuousAnalyzers.value[i];
-      const result = (await normalizeToArray(analyzer.run(context))).map(
+      const result = (await props.analyze.runAnalyzer(analyzer, context)).map(
         (v) => {
           return {
             ...v,
@@ -319,21 +311,12 @@ async function onClick() {
   await renderCycle();
   const currentRefreshKey = state.refreshKey.value;
   try {
-    const context = getContext();
-    if (!hasInitialized.value) {
-      await Promise.all(
-        props.analyzers.map(async (analyzer) => {
-          if (analyzer.init) {
-            await analyzer.init(context);
-          }
-        })
-      );
-    }
-    hasInitialized.value = true;
+    await props.analyze.ensureInitialized();
+    const context = props.analyze.createContext(providerRootElement);
     const newManualResults = [];
     for (let i = 0; i < manualAnalyzers.value.length; i++) {
       const analyzer = manualAnalyzers.value[i];
-      const result = (await normalizeToArray(analyzer.run(context))).map(
+      const result = (await props.analyze.runAnalyzer(analyzer, context)).map(
         (v) => {
           return {
             ...v,
@@ -381,6 +364,7 @@ const categoryOptions = computed(() => {
   ];
 });
 onMounted(async () => {
+  await props.analyze.ensureInitialized();
   if (hasContinuousAnalyzers.value) {
     await runContinuous();
   }

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

@@ -1,7 +1,8 @@
-import type { Analyzer } from './analyzers/types.js';
+import type { AnalyzeProvider } from '#blokkli/editor/providers/analyze';
 type __VLS_Props = {
     langcode: string;
-    analyzers: Analyzer[];
+    analyze: AnalyzeProvider;
+    isShown: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -145,6 +145,12 @@ function analyzeReadability(tr, blocks, langcode, $t, cache) {
     nodes.push({
       description: parts.join(" \xB7 "),
       impact: impactFor(scores.lix),
+      scores: {
+        ...scores.lix != null ? { lix: round(scores.lix) } : {},
+        ...scores.cli != null ? { cli: round(scores.cli) } : {},
+        ...scores.ari != null ? { ari: round(scores.ari) } : {},
+        ...scores.gulpease != null ? { gulpease: round(scores.gulpease) } : {}
+      },
       targets: [b.element]
     });
   }
@@ -162,6 +168,49 @@ function analyzeReadability(tr, blocks, langcode, $t, cache) {
     impact: summarizeImpact(nodes)
   };
 }
+function scoreText(tr, text, langcode) {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const words = segmentWords(trimmed);
+  if (words.length < MIN_WORDS_FOR_CONFIDENCE) return null;
+  const sentences = Math.max(1, countSentences(trimmed));
+  const avgSentLen = words.length / sentences;
+  const lix = safe(() => tr.lix(trimmed));
+  const cli = safe(() => tr.colemanLiauIndex(trimmed));
+  const ari = safe(() => tr.automatedReadabilityIndex(trimmed));
+  const gulpease = langcode === "it" ? safe(() => tr.gulpeaseIndex(trimmed)) : void 0;
+  const scores = {
+    ...lix != null ? { lix: round(lix) } : {},
+    ...cli != null ? { cli: round(cli) } : {},
+    ...ari != null ? { ari: round(ari) } : {},
+    ...gulpease != null ? { gulpease: round(gulpease) } : {}
+  };
+  const band = toBand(langcode, { lix, cli, ari, gulpease });
+  const impact = impactFor(lix);
+  const parts = [];
+  if (band === "hard") {
+    parts.push("Hard to read.");
+  } else if (band === "ok") {
+    parts.push("Acceptable readability.");
+  } else {
+    parts.push("Easy to read.");
+  }
+  if (lix != null) parts.push(`LIX ${format(lix)}`);
+  if (langcode === "it" && gulpease != null) {
+    parts.push(`Gulpease ${format(gulpease)}`);
+  }
+  if (cli != null) parts.push(`CLI ${format(cli)}`);
+  parts.push(`Avg sentence length ${format(avgSentLen)}`);
+  return {
+    description: parts.join(" \xB7 "),
+    impact,
+    scores,
+    targets: []
+  };
+}
+function round(n) {
+  return Math.round(n * 10) / 10;
+}
 function safe(fn) {
   try {
     const n = fn();
@@ -175,12 +224,14 @@ export default defineAnalyzer(() => {
   const cache = /* @__PURE__ */ new Map();
   return {
     id: "readability",
+    type: "readability",
     label: (langcode) => {
       if (langcode === "de") {
         return "Lesbarkeit";
       }
       return "Readability";
     },
+    description: "Analyzes text readability using LIX, Coleman-Liau, and ARI indices. Flags hard-to-read text blocks.",
     continuous: true,
     init: async function(context) {
       const { TextReadability } = await import("@lunarisapp/readability");
@@ -201,6 +252,20 @@ export default defineAnalyzer(() => {
         context.$t,
         cache
       );
+    },
+    async analyzeText(text, langcode) {
+      if (!isSupportedLangcode(langcode)) {
+        return [];
+      }
+      if (!textReadability) {
+        const { TextReadability } = await import("@lunarisapp/readability");
+        textReadability = new TextReadability({
+          lang: mapLang(langcode),
+          cache: true
+        });
+      }
+      const node = scoreText(textReadability, text, langcode);
+      return node ? [node] : [];
     }
   };
 });

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

@@ -12,6 +12,10 @@ export type AnalyzeNodeTargetMapped = {
 export type AnalyzeNode = {
     description?: string;
     impact?: AnalyzeImpact;
+    /**
+     * Optional numeric scores for this node (e.g. readability indices).
+     */
+    scores?: Record<string, number>;
     /**
      * An array of either:
      * - string: a valid selector
@@ -41,9 +45,18 @@ export type AnalyzeResultMapped = Omit<AnalyzeResult, 'nodes'> & {
     plugin: string;
     nodes: AnalyzeNodeMapped[];
 };
+export type AnalyzerType = 'generic' | 'readability';
 export type Analyzer = {
     id: string;
+    /**
+     * The type of analyzer. Defaults to 'generic'.
+     *
+     * - 'readability': Text readability analysis (LIX, Flesch, etc.)
+     * - 'generic': Any other type of analysis (accessibility, SEO, custom checks)
+     */
+    type?: AnalyzerType;
     label?: string | ((langcode: string) => string);
+    description?: string | ((langcode: string) => string);
     /**
      * If true, the raw page (without editor UI) is required for this analyzer.
      */
@@ -55,4 +68,10 @@ export type Analyzer = {
     continuous?: boolean;
     init?: (context: AnalyzerContext) => void | Promise<void>;
     run: (context: AnalyzerContext) => undefined | null | AnalyzeResult | AnalyzeResult[] | Promise<undefined | null | AnalyzeResult | AnalyzeResult[]>;
+    /**
+     * Optional method to analyze raw text without DOM context.
+     * Enables agent feedback loops (test a rewrite before applying).
+     * Analyzers that only work with DOM (e.g. axe-core) don't implement this.
+     */
+    analyzeText?: (text: string, langcode: string) => AnalyzeNode[] | Promise<AnalyzeNode[]>;
 };

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

@@ -6,28 +6,32 @@
     icon="bk_mdi_speed"
     weight="10"
     :is-loading="isRunning"
+    render-always
   >
     <template #icon>
       <AnalyzeIcon :is-running />
     </template>
-    <div v-if="ui.isProxyMode.value" class="bk-sidebar-padding bk">
-      <InfoBox
-        :text="
+    <template #default="{ isShown }">
+      <div v-if="ui.isProxyMode.value" class="bk-sidebar-padding bk">
+        <InfoBox
+          :text="
   $t(
     'analyzeNotAvailableInStructureView',
     'Analyze is not available in structure view.'
   )
 "
-        icon="bk_mdi_account_tree"
+          icon="bk_mdi_account_tree"
+        />
+      </div>
+      <AnalyzerMain
+        v-else
+        :key="animation.renderKey.value"
+        v-model="isRunning"
+        :langcode="context.language"
+        :analyze
+        :is-shown
       />
-    </div>
-    <AnalyzerMain
-      v-else
-      :key="animation.renderKey.value"
-      v-model="isRunning"
-      :langcode="context.language"
-      :analyzers
-    />
+    </template>
   </PluginSidebar>
 </template>
 
@@ -37,7 +41,7 @@ import { PluginSidebar } from "#blokkli/editor/plugins";
 import { InfoBox } from "#blokkli/editor/components";
 import AnalyzerMain from "./Main.vue";
 import AnalyzeIcon from "./Icon.vue";
-const { adapters } = defineBlokkliFeature({
+defineBlokkliFeature({
   id: "analyze",
   label: "Analyze",
   icon: "bk_mdi_speed",
@@ -45,9 +49,8 @@ const { adapters } = defineBlokkliFeature({
   description: "Analyze blocks and page for SEO, accessibility, etc.",
   viewports: []
 });
-const { $t, context, animation, ui } = useBlokkli();
+const { $t, context, animation, ui, analyze } = useBlokkli();
 const isRunning = ref(false);
-const analyzers = await adapters.getAggregated("getAnalyzers");
 </script>
 
 <script>

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

@@ -253,7 +253,7 @@ const resetZoom = () => {
   animation.requestDraw();
 };
 onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "Home") {

package/dist/runtime/editor/features/clipboard/DropElement/Video.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    data: string;
+    videoService?: string;
+    videoId: string;
+};
+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/clipboard/{List/Item → DropElement}/Video.vue

@@ -15,12 +15,8 @@
 import { computed } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 const props = defineProps({
-  type: { type: String, required: true },
-  id: { type: String, required: true },
-  itemBundle: { type: String, required: true },
   data: { type: String, required: true },
-  additional: { type: String, required: false },
-  videoService: { type: null, required: true },
+  videoService: { type: String, required: false },
   videoId: { type: String, required: true }
 });
 const imgUrl = computed(() => {

package/dist/runtime/editor/features/clipboard/DropElement/Video.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    data: string;
+    videoService?: string;
+    videoId: string;
+};
+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/clipboard/DropElement/helpers.d.ts

@@ -0,0 +1 @@
+export declare function humanFileSize(bytes: number, si?: boolean, dp?: number): string;

package/dist/runtime/editor/features/clipboard/DropElement/helpers.js

@@ -0,0 +1,14 @@
+export function humanFileSize(bytes, si = false, dp = 1) {
+  const thresh = si ? 1e3 : 1024;
+  if (Math.abs(bytes) < thresh) {
+    return bytes + " B";
+  }
+  const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  let u = -1;
+  const r = 10 ** dp;
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  return bytes.toFixed(dp) + " " + units[u];
+}

package/dist/runtime/editor/features/clipboard/DropElement/index.d.vue.ts

@@ -0,0 +1,16 @@
+export type DropElementItemType = 'image' | 'video' | 'file' | 'text';
+export type DropElementItem = {
+    type: DropElementItemType;
+    data?: string;
+    fileName?: string;
+    fileSize?: number;
+    videoId?: string;
+    videoService?: string;
+};
+type __VLS_Props = {
+    bundles: string[];
+    items: DropElementItem[];
+};
+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;