@revenexx/editor 0.1.0

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="_bk_px-20 _bk_pb-20 _bk_pt-0">
+    <div class="_bk_flex _bk_items-center _bk_gap-20">
+      <DonutChart
+        :data="summary"
+        :center-text="`${percentage}%`"
+        class="_bk_text-lime-normal"
+      />
+      <ul class="_bk_flex-1 _bk_flex _bk_flex-col _bk_gap-[7px]">
+        <li
+          v-for="item in summary"
+          :key="item.status"
+          class="_bk_flex _bk_items-center _bk_gap-[0.5em] _bk_leading-none"
+        >
+          <div
+            :style="{ backgroundColor: item.color }"
+            class="_bk_size-[0.75em] _bk_shrink-0 _bk_rounded-full"
+          />
+          <div class="_bk_font-semibold _bk_flex _bk_justify-between _bk_flex-1">
+            <span>{{ item.label }}</span>
+            <span>{{ item.value }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { rgbaToString } from "#blokkli/editor/helpers/color";
+import { computed, useBlokkli } from "#imports";
+import { useAnalyzeHelper } from "../helper";
+import { DonutChart } from "#blokkli/editor/components";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { theme } = useBlokkli();
+const { getStatusLabel } = useAnalyzeHelper();
+const SORT = {
+  violation: 4,
+  incomplete: 3,
+  pass: 2,
+  inapplicable: 1
+};
+function getColor(status) {
+  if (status === "pass") {
+    return rgbaToString(theme.lime.value.normal);
+  } else if (status === "incomplete") {
+    return rgbaToString(theme.yellow.value.normal);
+  } else if (status === "violation") {
+    return rgbaToString(theme.red.value.normal);
+  }
+  return rgbaToString(theme.mono.value[200]);
+}
+const summary = computed(() => {
+  const byStatus = props.results.reduce(
+    (acc, result) => {
+      acc[result.status] ||= 0;
+      const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+      const total = nodes.reduce((acc2, node) => {
+        const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+        return acc2 + targets.length;
+      }, 0);
+      acc[result.status] += total;
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(byStatus).map(([key, value]) => {
+    const status = key;
+    return {
+      status,
+      label: getStatusLabel(status),
+      value,
+      color: getColor(status)
+    };
+  }).filter((v) => v.status !== "inapplicable").sort((a, b) => {
+    return SORT[b.status] - SORT[a.status];
+  });
+});
+const percentage = computed(() => {
+  const total = summary.value.reduce((acc, item) => {
+    return acc + item.value;
+  }, 0);
+  const pass = summary.value.find((v) => v.status === "pass")?.value ?? 0;
+  return Math.round(pass / total * 100);
+});
+</script>

package/dist/runtime/editor/features/analyze/Summary/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+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/analyze/analyzers/altText.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,62 @@
+import { defineAnalyzer } from "#blokkli/analyzer";
+import { hashString } from "#blokkli/analyzer/helpers/hashString";
+export default defineAnalyzer(() => {
+  return {
+    id: "blokkli:image-alt-text",
+    label: (_langcode, $t) => $t("analyzeAltTextLabel", "Image Alt Texts"),
+    continuous: true,
+    run: async (context) => {
+      const $t = context.$t;
+      const images = [
+        ...context.providerRootElement.querySelectorAll("img")
+      ].map((img) => {
+        const alt = img.getAttribute("alt");
+        return {
+          element: img,
+          hasAlt: alt !== null && alt.trim() !== "",
+          alt: alt || "",
+          src: img.src.substring(0, 50)
+        };
+      });
+      const withAlt = images.filter((v) => v.hasAlt);
+      const withoutAlt = images.filter((v) => !v.hasAlt);
+      const results = [];
+      results.push({
+        id: "blokkli:image-alt-text:valid",
+        title: $t("analyzeAltTextValid", "Images with alt text"),
+        category: "accessibility",
+        description: $t(
+          "analyzeAltTextValidDescription",
+          "Images have an alt text."
+        ),
+        status: "pass",
+        nodes: withAlt.map((img) => ({
+          targets: img.element
+        }))
+      });
+      if (withoutAlt.length > 0) {
+        results.push({
+          id: "blokkli:image-alt-text:missing",
+          title: $t("analyzeAltTextMissing", "Images without alt text"),
+          category: "accessibility",
+          description: $t(
+            "analyzeAltTextMissingDescription",
+            "Images are missing alt text. Alt texts are important for accessibility and SEO."
+          ),
+          status: "violation",
+          impact: "serious",
+          nodes: withoutAlt.map((img) => ({
+            description: $t(
+              "analyzeAltTextMissingNode",
+              "Image without alt text"
+            ),
+            impact: "serious",
+            identifier: hashString(img.src),
+            targets: img.element
+          }))
+        });
+      }
+      return results;
+    }
+  };
+});

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

@@ -0,0 +1,12 @@
+import type { RunOptions } from 'axe-core';
+declare const _default: (options?: {
+    /**
+     * Selectors to exclude.
+     */
+    exclude?: string[];
+    /**
+     * Run options passed to axe-core.
+     */
+    runOptions?: RunOptions;
+} | undefined) => import("./types.js").Analyzer;
+export default _default;

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

@@ -0,0 +1,78 @@
+import { defineAnalyzer } from "./defineAnalyzer.js";
+import { falsy } from "#blokkli/helpers";
+function mapAxeNode(node) {
+  return {
+    description: node.failureSummary,
+    impact: node.impact ?? void 0,
+    targets: node.target.map((v) => {
+      if (Array.isArray(v)) {
+        return null;
+      }
+      return v;
+    }).filter(falsy)
+  };
+}
+function mapAxeResult(result, status) {
+  return {
+    id: result.id,
+    title: result.description,
+    category: "accessibility",
+    description: result.help,
+    link: result.helpUrl,
+    status,
+    impact: result.impact ?? void 0,
+    nodes: result.nodes.map(mapAxeNode)
+  };
+}
+function mapAxeResults(results, status) {
+  return results.map((v) => mapAxeResult(v, status));
+}
+async function getLocale(langcode) {
+  if (langcode === "de") {
+    const de = await import("axe-core/locales/de.json");
+    return de.default;
+  } else if (langcode === "fr") {
+    const fr = await import("axe-core/locales/fr.json");
+    return fr.default;
+  } else if (langcode === "it") {
+    const it = await import("axe-core/locales/it.json");
+    return it.default;
+  }
+  return null;
+}
+export default defineAnalyzer((options) => {
+  const userExclude = options?.exclude ?? [];
+  const elementContext = {
+    exclude: [
+      "#nuxt-devtools-container",
+      ".bk",
+      ".bk-sidebar",
+      "#bk-animation-canvas-webgl",
+      ...userExclude
+    ]
+  };
+  let axe;
+  return {
+    id: "axe",
+    label: "Axe (Accessibility Check)",
+    requireRawPage: true,
+    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"),
+          ...mapAxeResults(result.inapplicable, "inapplicable"),
+          ...mapAxeResults(result.passes, "pass"),
+          ...mapAxeResults(result.violations, "violation")
+        ];
+      });
+    }
+  };
+});

package/dist/runtime/editor/features/analyze/analyzers/defaults/validations.d.ts

@@ -0,0 +1,10 @@
+import type { Analyzer } from '../types.js';
+/**
+ * Built-in analyzer that surfaces backend-reported validation violations
+ * (`state.violations`) inside the analyze sidebar. Always registered by the
+ * analyze provider — adapters do not need to opt in.
+ *
+ * Violations intentionally carry no `identifier` so they cannot be ignored:
+ * a validation error must be resolved, not silenced.
+ */
+export declare const validationsAnalyzer: Analyzer;

package/dist/runtime/editor/features/analyze/analyzers/defaults/validations.js

@@ -0,0 +1,39 @@
+export const validationsAnalyzer = {
+  id: "blokkli:validations",
+  type: "generic",
+  label: (_langcode, $t) => $t("analyzerValidationsLabel", "Validations"),
+  continuous: true,
+  run(context) {
+    const { violations, $t } = context;
+    const title = $t("analyzerValidationsLabel", "Validations");
+    if (!violations.length) {
+      return {
+        id: "blokkli:validations:pass",
+        title,
+        category: "content",
+        description: $t(
+          "analyzerValidationsPassDescription",
+          "No validation errors for the current state."
+        ),
+        status: "pass",
+        nodes: []
+      };
+    }
+    const nodes = violations.map((violation) => ({
+      description: violation.message,
+      uuid: violation.entityUuid,
+      targets: violation.entityUuid ? [{ uuid: violation.entityUuid }] : []
+    }));
+    return {
+      id: "blokkli:validations:failed",
+      title,
+      category: "content",
+      description: $t(
+        "analyzerValidationsDescription",
+        "Validation errors reported for the current state."
+      ),
+      status: "violation",
+      nodes
+    };
+  }
+};

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

@@ -0,0 +1,4 @@
+import type { Analyzer } from './types.js';
+type AnalyzerInit<O extends object> = (options?: O) => Analyzer;
+export declare function defineAnalyzer<O extends object, HasOptions = object extends O ? true : false>(init: AnalyzerInit<O>): HasOptions extends true ? (options?: O) => Analyzer : (options: O) => Analyzer;
+export {};

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

@@ -0,0 +1,5 @@
+export function defineAnalyzer(init) {
+  return function(options) {
+    return init(options);
+  };
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (options?: object | undefined) => import("./types.js").Analyzer;
+export default _default;

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

@@ -0,0 +1,144 @@
+import { falsy } from "#blokkli/helpers";
+import { defineAnalyzer } from "./defineAnalyzer.js";
+import { hashString } from "./helpers/hashString.js";
+export default defineAnalyzer(() => {
+  return {
+    id: "blokkli:heading-structure",
+    label: (_langcode, $t) => $t("analyzeHeadingStructureLabel", "Heading Structure"),
+    continuous: true,
+    run: async (context) => {
+      const $t = context.$t;
+      const results = [];
+      const allHeadings = [
+        ...context.providerRootElement.querySelectorAll(
+          "h1, h2, h3, h4, h5, h6"
+        )
+      ].map((heading) => {
+        if (heading instanceof HTMLElement) {
+          const level = parseInt(heading.tagName.substring(1));
+          return {
+            element: heading,
+            level,
+            text: heading.textContent?.trim() || ""
+          };
+        }
+      }).filter(falsy);
+      const h1Elements = allHeadings.filter((h) => h.level === 1);
+      if (h1Elements.length > 1) {
+        results.push({
+          id: "blokkli:heading-structure:multiple-h1",
+          title: $t("analyzeHeadingMultipleH1", "Multiple H1 headings"),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingMultipleH1Description",
+            "The page contains multiple H1 headings. There should only be one H1 heading per page."
+          ),
+          status: "violation",
+          impact: "serious",
+          nodes: h1Elements.map((h) => ({
+            description: h.text,
+            identifier: hashString(h.level + ":" + h.text),
+            targets: h.element
+          }))
+        });
+      } else if (h1Elements.length === 1) {
+        results.push({
+          id: "blokkli:heading-structure:single-h1",
+          title: $t("analyzeHeadingSingleH1", "Single H1 heading"),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingSingleH1Description",
+            "The page has exactly one H1 heading."
+          ),
+          status: "pass",
+          nodes: h1Elements.map((h) => ({
+            description: h.text,
+            targets: h.element
+          }))
+        });
+      }
+      const orderIssues = [];
+      for (let i = 1; i < allHeadings.length; i++) {
+        const previous = allHeadings[i - 1];
+        const current = allHeadings[i];
+        if (!previous || !current) {
+          continue;
+        }
+        if (current.level > previous.level + 1) {
+          orderIssues.push({ current, previous });
+        }
+      }
+      if (orderIssues.length > 0) {
+        results.push({
+          id: "blokkli:heading-structure:skipped-levels",
+          title: $t("analyzeHeadingSkippedLevels", "Skipped heading levels"),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingSkippedLevelsDescription",
+            "Headings skip a level. The heading hierarchy should not skip levels (e.g. do not jump from H2 to H4)."
+          ),
+          status: "violation",
+          impact: "moderate",
+          nodes: orderIssues.map(({ current, previous }) => ({
+            description: `${previous.element.tagName} \u2192 ${current.element.tagName}: "${current.text}"`,
+            impact: "moderate",
+            identifier: hashString(current.level + ":" + current.text),
+            targets: current.element
+          }))
+        });
+      } else if (allHeadings.length > 1) {
+        results.push({
+          id: "blokkli:heading-structure:no-skipped-levels",
+          title: $t(
+            "analyzeHeadingNoSkippedLevels",
+            "No skipped heading levels"
+          ),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingNoSkippedLevelsDescription",
+            "The heading hierarchy does not skip any levels."
+          ),
+          status: "pass",
+          nodes: allHeadings.map((h) => ({
+            description: `${h.element.tagName}: ${h.text}`,
+            targets: h.element
+          }))
+        });
+      }
+      const h2Elements = allHeadings.filter((h) => h.level === 2);
+      if (h2Elements.length === 0) {
+        results.push({
+          id: "blokkli:heading-structure:no-h2",
+          title: $t("analyzeHeadingNoH2", "Missing H2 headings"),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingNoH2Description",
+            "The page contains no H2 headings. A clear heading structure is important for SEO and accessibility."
+          ),
+          status: "violation",
+          impact: "moderate",
+          nodes: {
+            description: $t("analyzeHeadingNoH2Found", "No H2 headings found"),
+            targets: context.providerRootElement
+          }
+        });
+      } else {
+        results.push({
+          id: "blokkli:heading-structure:has-h2",
+          title: $t("analyzeHeadingHasH2", "H2 headings present"),
+          category: "seo",
+          description: $t(
+            "analyzeHeadingHasH2Description",
+            "The page contains H2 headings for a clear content structure."
+          ),
+          status: "pass",
+          nodes: h2Elements.map((h) => ({
+            description: h.text,
+            targets: h.element
+          }))
+        });
+      }
+      return results;
+    }
+  };
+});

package/dist/runtime/editor/features/analyze/analyzers/helpers/Context.d.ts

@@ -0,0 +1,42 @@
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { StateProvider } from '#blokkli/editor/providers/state';
+import type { ReadabilityProvider } from '#blokkli/editor/providers/readability';
+import type { TextProvider } from '#blokkli/editor/providers/texts';
+import type { MutatedField, Validation } from '#blokkli/editor/types/state';
+import type { AnalyzeCategory, AnalyzeNode, AnalyzeResult, AnalyzeStatus } from '../types.js';
+import { type TextElement } from './collectTextElements.js';
+export declare class AnalyzerContext {
+    readonly langcode: string;
+    readonly interfaceLangcode: string;
+    readonly providerRootElement: HTMLElement;
+    private state;
+    readonly $t: TextProvider;
+    readonly signal: AbortSignal | undefined;
+    readonly mutatedFields: Readonly<MutatedField[]>;
+    /**
+     * Backend-reported validation violations for the current state.
+     */
+    readonly violations: Readonly<Validation[]>;
+    /**
+     * The readability provider.
+     */
+    readonly readability: ReadabilityProvider;
+    /**
+     * The collected text elements.
+     */
+    private textElements;
+    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider, signal: AbortSignal | undefined, readability: ReadabilityProvider);
+    /**
+     * Get the field list item for a block UUID.
+     */
+    getFieldListItem(uuid: string): FieldListItemTyped | undefined;
+    /**
+     * Returns an array of all text elements inside the provider root element.
+     *
+     * A 'text element' is defined as the lowest block element that contains text.
+     * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+     * would return as a single text element containing "Foobar Test".
+     */
+    getTextElements(): Readonly<TextElement[]>;
+    defineResult(id: string, title: string, category: AnalyzeCategory, description: string, status: AnalyzeStatus, nodes?: AnalyzeNode | AnalyzeNode[]): AnalyzeResult;
+}

package/dist/runtime/editor/features/analyze/analyzers/helpers/Context.js

@@ -0,0 +1,56 @@
+import { collectTextElements } from "./collectTextElements.js";
+export class AnalyzerContext {
+  constructor(langcode, interfaceLangcode, providerRootElement, state, $t, signal, readability) {
+    this.langcode = langcode;
+    this.interfaceLangcode = interfaceLangcode;
+    this.providerRootElement = providerRootElement;
+    this.state = state;
+    this.$t = $t;
+    this.signal = signal;
+    this.readability = readability;
+    this.mutatedFields = JSON.parse(JSON.stringify(state.mutatedFields.value));
+    this.violations = JSON.parse(JSON.stringify(state.violations.value));
+  }
+  mutatedFields;
+  /**
+   * Backend-reported validation violations for the current state.
+   */
+  violations;
+  /**
+   * The readability provider.
+   */
+  readability;
+  /**
+   * The collected text elements.
+   */
+  textElements = null;
+  /**
+   * Get the field list item for a block UUID.
+   */
+  getFieldListItem(uuid) {
+    return this.state.getFieldListItem(uuid);
+  }
+  /**
+   * Returns an array of all text elements inside the provider root element.
+   *
+   * A 'text element' is defined as the lowest block element that contains text.
+   * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+   * would return as a single text element containing "Foobar Test".
+   */
+  getTextElements() {
+    if (!this.textElements) {
+      this.textElements = collectTextElements(this.providerRootElement);
+    }
+    return this.textElements;
+  }
+  defineResult(id, title, category, description, status, nodes = []) {
+    return {
+      id,
+      title,
+      category,
+      description,
+      status,
+      nodes
+    };
+  }
+}

package/dist/runtime/editor/features/analyze/analyzers/helpers/collectTextElements.d.ts

@@ -0,0 +1,5 @@
+export interface TextElement {
+    text: string;
+    element: HTMLElement;
+}
+export declare function collectTextElements(rootElement: HTMLElement): TextElement[];

package/dist/runtime/editor/features/analyze/analyzers/helpers/collectTextElements.js

@@ -0,0 +1,98 @@
+const blockElements = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "CANVAS",
+  "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"
+]);
+const isBlockElement = (element) => {
+  if (blockElements.has(element.tagName.toUpperCase())) {
+    return true;
+  }
+  if (element.tagName.toUpperCase() === "A" && element instanceof HTMLElement) {
+    const display = window.getComputedStyle(element).display;
+    return display === "block" || display === "flex" || display === "grid";
+  }
+  return false;
+};
+const containsBlockElements = (element) => {
+  for (const child of element.children) {
+    if (isBlockElement(child)) {
+      return true;
+    }
+    if (child instanceof HTMLElement && containsBlockElements(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+const getCleanText = (element) => {
+  return element.textContent?.trim() || "";
+};
+const traverse = (element, results) => {
+  if (element.tagName === "SCRIPT" || element.tagName === "STYLE") {
+    return;
+  }
+  if (element.classList.contains("bk-skip-analyze")) {
+    return;
+  }
+  if (isBlockElement(element)) {
+    if (!containsBlockElements(element)) {
+      const text = getCleanText(element);
+      if (text) {
+        results.push({
+          text,
+          element
+        });
+      }
+    } else {
+      for (const child of element.children) {
+        if (child instanceof HTMLElement) {
+          traverse(child, results);
+        }
+      }
+    }
+  } else {
+    for (const child of element.children) {
+      if (child instanceof HTMLElement) {
+        traverse(child, results);
+      }
+    }
+  }
+};
+export function collectTextElements(rootElement) {
+  const results = [];
+  traverse(rootElement, results);
+  return results;
+}

package/dist/runtime/editor/features/analyze/analyzers/helpers/hashString.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Simple string hash (djb2 variant). Returns a base-36 encoded 32-bit integer.
+ *
+ * Used to create content-based identifiers for analyze nodes so that ignored
+ * findings reappear when the underlying content changes.
+ */
+export declare function hashString(input: string): string;