@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue.d.ts

@@ -1,8 +1,14 @@
+import type { AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
 type __VLS_Props = {
     resultId: string;
-    target: string | HTMLElement | {
-        uuid: string;
-    };
+    target: AnalyzeNodeTargetMapped;
 };
-declare const _default: 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>;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Summary/Chart.vue

@@ -1,11 +1,11 @@
 <template>
   <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
     <circle
-      v-if="data.length === 1"
+      v-if="dataWithValues.length === 1"
       :cx="radius"
       :cy="radius"
       :r="radius"
-      :fill="data[0]?.color"
+      :fill="dataWithValues[0]?.color"
     />
     <g v-else :transform="`translate(${radius}, ${radius})`">
       <path
@@ -40,11 +40,14 @@ const props = defineProps({
   percentage: { type: Number, required: false, default: void 0 }
 });
 const size = computed(() => props.radius * 2);
+const dataWithValues = computed(
+  () => props.data.filter((item) => item.value > 0)
+);
 const segments = computed(() => {
   const total = props.data.reduce((sum, item) => sum + item.value, 0);
   if (total === 0) return [];
   let currentAngle = -90;
-  return props.data.map((item) => {
+  return props.data.filter((item) => item.value > 0).map((item) => {
     const percentage = item.value / total;
     const angle = percentage * 360;
     const startAngle = currentAngle;
@@ -77,7 +80,8 @@ function createPieSegment(cx, cy, radius, startAngle, endAngle) {
   const largeArc = endAngle - startAngle > 180 ? 1 : 0;
   if (endAngle - startAngle >= 360) {
     return `
-      M ${cx + radius} ${cy}
+      M ${cx} ${cy}
+      L ${cx + radius} ${cy}
       A ${radius} ${radius} 0 1 1 ${cx + radius} ${cy + 1e-3}
       Z
     `;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/axe.js

@@ -54,6 +54,7 @@ export default defineAnalyzer((options) => {
   };
   return {
     id: "axe",
+    label: "Axe (Accessibility Check)",
     requireRawPage: true,
     init: function(context) {
       const locale = getLocale(context.interfaceLangcode) ?? {};

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.d.ts

@@ -1,6 +1,6 @@
 import type { FieldListItemTyped } from '#blokkli-build/generated-types';
-import type { StateProvider } from '#blokkli/helpers/stateProvider';
-import type { TextProvider } from '#blokkli/helpers/textProvider';
+import type { StateProvider } from '#blokkli/helpers/providers/state';
+import type { TextProvider } from '#blokkli/helpers/providers/texts';
 import type { MutatedField } from '#blokkli/types';
 import type { AnalyzeCategory, AnalyzeNode, AnalyzeResult, AnalyzeStatus } from '../types.js';
 import { type TextElement } from './collectTextElements.js';
@@ -10,12 +10,13 @@ export declare class AnalyzerContext {
     readonly providerRootElement: HTMLElement;
     private state;
     readonly $t: TextProvider;
+    readonly signal?: AbortSignal | undefined;
     readonly mutatedFields: Readonly<MutatedField[]>;
     /**
      * The collected text elements.
      */
     private textElements;
-    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider);
+    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider, signal?: AbortSignal | undefined);
     /**
      * Get the field list item for a block UUID.
      */

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.js

@@ -1,11 +1,12 @@
 import { collectTextElements } from "./collectTextElements.js";
 export class AnalyzerContext {
-  constructor(langcode, interfaceLangcode, providerRootElement, state, $t) {
+  constructor(langcode, interfaceLangcode, providerRootElement, state, $t, signal) {
     this.langcode = langcode;
     this.interfaceLangcode = interfaceLangcode;
     this.providerRootElement = providerRootElement;
     this.state = state;
     this.$t = $t;
+    this.signal = signal;
     this.mutatedFields = JSON.parse(JSON.stringify(state.mutatedFields.value));
   }
   mutatedFields;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/readability.js

@@ -10,7 +10,7 @@ const LIX_BANDS = { easyMax: 40, okMax: 59 };
 const CLI_HARD_MIN = 12;
 const ARI_HARD_MIN = 12;
 const GULPEASE_BANDS = { easyMin: 80, okMin: 60 };
-const MIN_WORDS_FOR_CONFIDENCE = 30;
+const MIN_WORDS_FOR_CONFIDENCE = 5;
 function mapLang(langcode) {
   const lc = (langcode || "").toLowerCase();
   if (lc.startsWith("de")) return "de_CH";
@@ -70,22 +70,48 @@ function summarizeImpact(nodes) {
 function format(n, d = 1) {
   return typeof n === "number" && Number.isFinite(n) ? n.toFixed(d) : "\u2014";
 }
-function analyzeReadability(tr, blocks, langcode, $t) {
+function analyzeReadability(tr, blocks, langcode, $t, cache) {
   const lang = langcode ?? "en";
   const nodes = [];
   for (const b of blocks) {
     const text = (b.text || "").trim();
     if (!text) continue;
     const words = segmentWords(text);
-    if (words.length < MIN_WORDS_FOR_CONFIDENCE) continue;
-    const sentences = Math.max(1, countSentences(text));
-    const avgSentLen = words.length / sentences;
-    const lix = safe(() => tr.lix(text));
-    const cli = safe(() => tr.colemanLiauIndex(text));
-    const ari = safe(() => tr.automatedReadabilityIndex(text));
-    const gulpease = lang === "it" ? safe(() => tr.gulpeaseIndex(text)) : void 0;
-    const band = toBand(lang, { lix, cli, ari, gulpease });
-    if (band !== "hard") continue;
+    if (words.length < MIN_WORDS_FOR_CONFIDENCE) {
+      continue;
+    }
+    const cacheKey = `${langcode}:${text}`;
+    let scores;
+    const cached = cache.get(cacheKey);
+    if (cached) {
+      scores = cached;
+    } else {
+      const sentences = Math.max(1, countSentences(text));
+      const avgSentLen = words.length / sentences;
+      const lix = safe(() => tr.lix(text));
+      const cli = safe(() => tr.colemanLiauIndex(text));
+      const ari = safe(() => tr.automatedReadabilityIndex(text));
+      const gulpease = lang === "it" ? safe(() => tr.gulpeaseIndex(text)) : void 0;
+      scores = {
+        lix,
+        cli,
+        ari,
+        gulpease,
+        words: words.length,
+        sentences,
+        avgSentLen
+      };
+      cache.set(cacheKey, scores);
+    }
+    const band = toBand(lang, {
+      lix: scores.lix,
+      cli: scores.cli,
+      ari: scores.ari,
+      gulpease: scores.gulpease
+    });
+    if (band !== "hard") {
+      continue;
+    }
     const parts = [];
     parts.push(
       $t("analyzerReadabiliyHardToRead", `Hard to read (@lang).`).replace(
@@ -93,16 +119,21 @@ function analyzeReadability(tr, blocks, langcode, $t) {
         lang.toUpperCase()
       )
     );
-    if (lix != null) parts.push(`LIX ${format(lix)}`);
-    if (lang === "it" && gulpease != null)
-      parts.push(`Gulpease ${format(gulpease)}`);
-    if (cli != null) parts.push(`CLI ${format(cli)}`);
-    if (avgSentLen > 25) {
+    if (scores.lix != null) {
+      parts.push(`LIX ${format(scores.lix)}`);
+    }
+    if (lang === "it" && scores.gulpease != null) {
+      parts.push(`Gulpease ${format(scores.gulpease)}`);
+    }
+    if (scores.cli != null) {
+      parts.push(`CLI ${format(scores.cli)}`);
+    }
+    if (scores.avgSentLen > 25) {
       parts.push(
         $t(
           "analyzerReadabiliyAverageSentenceLength",
           `Average sentence length @length \u2192 split sentences.`
-        ).replace("@length", format(avgSentLen))
+        ).replace("@length", format(scores.avgSentLen))
       );
     } else {
       parts.push(
@@ -114,7 +145,7 @@ function analyzeReadability(tr, blocks, langcode, $t) {
     }
     nodes.push({
       description: parts.join(" \xB7 "),
-      impact: impactFor(lix),
+      impact: impactFor(scores.lix),
       targets: [b.element]
     });
   }
@@ -142,8 +173,16 @@ function safe(fn) {
 }
 export default defineAnalyzer(() => {
   let textReadability = null;
+  const cache = /* @__PURE__ */ new Map();
   return {
     id: "readability",
+    label: (langcode) => {
+      if (langcode === "de") {
+        return "Lesbarkeit";
+      }
+      return "Readability";
+    },
+    continuous: true,
     init: function(context) {
       textReadability = new TextReadability({
         lang: mapLang(context.langcode),
@@ -154,11 +193,13 @@ export default defineAnalyzer(() => {
       if (!isSupportedLangcode(context.langcode)) {
         return;
       }
+      const elements = context.getTextElements();
       return analyzeReadability(
         textReadability,
-        context.getTextElements(),
+        elements,
         context.langcode,
-        context.$t
+        context.$t,
+        cache
       );
     }
   };

package/dist/runtime/components/Edit/Features/Analyze/analyzers/types.d.ts

@@ -5,6 +5,10 @@ export type AnalyzeCategory = 'accessibility' | 'seo' | 'text' | 'content';
 export type AnalyzeNodeTarget = string | HTMLElement | {
     uuid: string;
 };
+export type AnalyzeNodeTargetMapped = {
+    target: AnalyzeNodeTarget;
+    globalIndex: number;
+};
 export type AnalyzeNode = {
     description?: string;
     impact?: AnalyzeImpact;
@@ -16,6 +20,9 @@ export type AnalyzeNode = {
      */
     targets: AnalyzeNodeTarget | AnalyzeNodeTarget[];
 };
+export type AnalyzeNodeMapped = Omit<AnalyzeNode, 'targets'> & {
+    targets: AnalyzeNodeTargetMapped[];
+};
 export type AnalyzeResult = {
     id: string;
     title: string;
@@ -30,15 +37,22 @@ export type AnalyzeResult = {
      */
     scoreTargets?: boolean;
 };
-export type AnalyzeResultMapped = AnalyzeResult & {
+export type AnalyzeResultMapped = Omit<AnalyzeResult, 'nodes'> & {
     plugin: string;
+    nodes: AnalyzeNodeMapped[];
 };
 export type Analyzer = {
     id: string;
+    label?: string | ((langcode: string) => string);
     /**
      * If true, the raw page (without editor UI) is required for this analyzer.
      */
     requireRawPage?: boolean;
+    /**
+     * If true, the analyzer is called automatically. This assumes it runs without
+     * blocking the main thread.
+     */
+    continuous?: boolean;
     init?: (context: AnalyzerContext) => void | Promise<void>;
     run: (context: AnalyzerContext) => undefined | null | AnalyzeResult | AnalyzeResult[] | Promise<undefined | null | AnalyzeResult | AnalyzeResult[]>;
 };

package/dist/runtime/components/Edit/Features/Analyze/index.vue

@@ -4,9 +4,27 @@
     :title="$t('analyzeSidebarTitle', 'Analyze')"
     :tour-text="$t('analyzeTourText', 'Analyze the content of your page')"
     icon="speedometer"
+    weight="10"
+    :is-loading="isRunning"
   >
+    <template #icon>
+      <AnalyzeIcon :is-running />
+    </template>
+    <div v-if="ui.isProxyMode.value" class="bk-sidebar-padding bk">
+      <InfoBox
+        :text="
+  $t(
+    'analyzeNotAvailableInStructureView',
+    'Analyze is not available in structure view.'
+  )
+"
+        icon="tree"
+      />
+    </div>
     <AnalyzerMain
+      v-else
       :key="animation.renderKey.value"
+      v-model="isRunning"
       :langcode="context.language"
       :analyzers
     />
@@ -14,9 +32,11 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginSidebar } from "#blokkli/plugins";
+import { InfoBox } from "#blokkli/components";
 import AnalyzerMain from "./Main.vue";
+import AnalyzeIcon from "./Icon.vue";
 const { adapter } = defineBlokkliFeature({
   id: "analyze",
   label: "Analyze",
@@ -25,6 +45,8 @@ const { adapter } = defineBlokkliFeature({
   description: "Analyze blocks and page for SEO, accessibility, etc.",
   viewports: []
 });
+const { $t, context, animation, ui } = useBlokkli();
+const isRunning = ref(false);
 function getAdapterAnalyzers() {
   const result = adapter.getAnalyzers();
   if (Array.isArray(result)) {
@@ -38,7 +60,6 @@ function getAdapterAnalyzers() {
   });
 }
 const analyzers = await getAdapterAnalyzers();
-const { $t, context, animation } = useBlokkli();
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Artboard/Overview/index.vue

@@ -18,14 +18,16 @@
 </template>
 
 <script setup>
-import { overview } from "artboard-deluxe";
+import {
+  overview
+} from "artboard-deluxe";
 import {
   onBeforeUnmount,
   onMounted,
-  ref,
   useBlokkli,
   computed,
-  useTemplateRef
+  useTemplateRef,
+  watch
 } from "#imports";
 import { ViewportBlockingRect } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -40,9 +42,9 @@ const selectedColor = computed(() => {
   return theme.getColorString("accent", "700", 1);
 });
 const overviewEl = useTemplateRef("overviewEl");
-const overviewArtboardEl = ref();
-const overviewVisibleEl = ref();
-const canvas = ref();
+const overviewArtboardEl = useTemplateRef("overviewArtboardEl");
+const overviewVisibleEl = useTemplateRef("overviewVisibleEl");
+const canvas = useTemplateRef("canvas");
 let pluginOverview = null;
 function updateCanvas() {
   const ctx = canvas.value?.getContext("2d");
@@ -78,6 +80,13 @@ function updateCanvas() {
   }
 }
 onBlokkliEvent("animationFrame", updateCanvas);
+const overviewOptions = computed(() => {
+  return {
+    padding: 15,
+    autoHeight: true,
+    maxHeight: ui.visibleViewportPadded.value.height
+  };
+});
 onMounted(() => {
   if (overviewEl.value && overviewArtboardEl.value && overviewVisibleEl.value) {
     const el = overviewEl.value.$el;
@@ -87,13 +96,18 @@ onMounted(() => {
           element: el,
           artboardElement: overviewArtboardEl.value,
           visibleAreaElement: overviewVisibleEl.value,
-          padding: 20,
-          autoHeight: true
+          ...overviewOptions.value
         })
       );
     }
   }
 });
+watch(overviewOptions, (newOptions) => {
+  if (!pluginOverview) {
+    return;
+  }
+  pluginOverview.options.setMultiple(newOptions);
+});
 onBeforeUnmount(() => {
   if (pluginOverview) {
     props.artboard.removePlugin(pluginOverview);

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue

@@ -38,7 +38,10 @@
     key-code="O"
     weight="90"
   >
-    <Teleport v-if="isActive && dom.isReady.value" to="body">
+    <Teleport
+      v-if="isActive && dom.isReady.value"
+      :to="ui.mainLayoutElement.value"
+    >
       <Overview :artboard="artboard" />
     </Teleport>
   </PluginViewOption>
@@ -68,7 +71,7 @@ import {
   mouse,
   dom as domPlugin
 } from "artboard-deluxe";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 const props = defineProps({
   persist: { type: Boolean, required: true },
   momentum: { type: Boolean, required: true },
@@ -166,45 +169,63 @@ watch(options, function(newOptions) {
 const AUTOSCROLL_EDGE_ZONE = 130;
 const AUTOSCROLL_SPEED = 12;
 let autoScrollSpeed = 1;
+let lastScrollDirection = 0;
 function edgeStep(distance) {
   const ratio = distance / AUTOSCROLL_EDGE_ZONE;
   return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
 }
 let hasLeftAddList = false;
+let hasLeftEdgeZone = false;
 onBlokkliEvent("dragging:end", () => {
   hasLeftAddList = false;
+  hasLeftEdgeZone = false;
+  autoScrollSpeed = 1;
+  lastScrollDirection = 0;
 });
-onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+function handleAutoScroll(mouseX, mouseY) {
   if (selection.isDragging.value) {
-    if (ui.addListOrientation.value === "horizontal") {
-      if (!hasLeftAddList) {
-        if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
-          hasLeftAddList = true;
-        } else {
-          return;
-        }
+    if (!hasLeftAddList) {
+      if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
+        hasLeftAddList = true;
+      } else {
+        return;
       }
     }
-    const viewportHeight = ui.viewport.value.height;
+    const viewportHeight = ui.visibleViewport.value.height;
     const currentOffset = artboard.getOffset();
-    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
+    const y = Math.min(
+      Math.max(mouseY - ui.visibleViewport.value.y, 0),
+      viewportHeight
+    );
+    const isInEdgeZone = y < AUTOSCROLL_EDGE_ZONE || y > viewportHeight - AUTOSCROLL_EDGE_ZONE;
+    if (!isInEdgeZone && !hasLeftEdgeZone) {
+      hasLeftEdgeZone = true;
+    }
     let dy = 0;
-    if (y < AUTOSCROLL_EDGE_ZONE) {
-      const dist = AUTOSCROLL_EDGE_ZONE - y;
-      dy = edgeStep(dist);
-    } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
-      const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
-      dy = -edgeStep(dist);
-    } else {
+    let currentDirection = 0;
+    if (hasLeftEdgeZone && isInEdgeZone) {
+      if (y < AUTOSCROLL_EDGE_ZONE) {
+        const dist = AUTOSCROLL_EDGE_ZONE - y;
+        dy = edgeStep(dist);
+        currentDirection = 1;
+      } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
+        const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
+        dy = -edgeStep(dist);
+        currentDirection = -1;
+      }
+    }
+    if (currentDirection !== 0 && currentDirection !== lastScrollDirection) {
       autoScrollSpeed = 1;
+      lastScrollDirection = currentDirection;
     }
     if (dy !== 0) {
       artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
       autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
     }
-  } else {
-    autoScrollSpeed = 1;
   }
+}
+onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+  handleAutoScroll(mouseX, mouseY);
   artboard.loop(time);
   const artboardSize = artboard.getArtboardSize();
   if (artboardSize) {

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value" defer>
     <div
       class="bk bk-artboard-scrollbar"
       :class="'bk-orientation-' + orientation"
@@ -13,13 +13,19 @@
 
 <script setup>
 import { scrollbar } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref } from "#imports";
+import {
+  onBeforeUnmount,
+  onMounted,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
 const props = defineProps({
   artboard: { type: Object, required: true },
   orientation: { type: String, required: true }
 });
-const el = ref();
-const thumb = ref();
+const { ui } = useBlokkli();
+const el = useTemplateRef("el");
+const thumb = useTemplateRef("thumb");
 let scrollbarPlugin = null;
 onMounted(() => {
   if (el.value && thumb.value) {

package/dist/runtime/components/Edit/Features/Assistant/Overlay/index.vue

@@ -68,37 +68,11 @@ import { useBlokkli, ref } from "#imports";
 import ResultMarkup from "./ResultMarkup/index.vue";
 const { $t, adapter } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
-const prompt = ref(
-  `Write content for a page talking about VueJS. Please come up with good titles and content for each section.
-
-# Origins
-Write about when Vue was created and by whom.
-
-# Release of Vue 2
-When was it released, what were the changes.
-
-# Release of Vue 3
-Write about the big changes introduced in Vue 3.
-
-# Comparison to React
-`
-);
+const prompt = ref("");
 const isGenerating = ref(false);
 const result = ref({
   type: "markup",
-  content: `
-<h2>Origins</h2>
-<p>Vue was created in 2014 by Evan You, a former Google engineer. It was initially released to the public in February 2014.</p>
-
-<h2>Release of Vue 2</h2>
-<p>Vue 2 was released in September 2016. This release introduced significant improvements in performance and the virtual DOM implementation, making Vue even more efficient and capable.</p>
-
-<h2>Release of Vue 3</h2>
-<p>Vue 3, released in September 2020, brought several major changes, including the composition API, better TypeScript integration, and significant improvements in terms of performance, tree-shaking, and the overall developer experience.</p>
-
-<h2>Comparison to React</h2>
-<p>Vue is often compared to React due to their shared focus on building user interfaces. While React is developed and maintained by Facebook, Vue is an open-source project led by Evan You. Both frameworks have their strengths and weaknesses, and the choice between them often depends on the specific requirements of a project and the preferences of the development team.</p>
-`
+  content: ""
 });
 const onSubmit = () => {
   if (!result.value) {

package/dist/runtime/components/Edit/Features/Assistant/index.vue

@@ -1,25 +1,14 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <Overlay v-if="placedAction" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
   </Teleport>
-
-  <PluginAddAction
-    type="assistant"
-    :title="$t('assistantAddAction', 'Add with AI Assistant')"
-    :description="
-  $t('assistantAddActionDescription', 'Add content using an AI assistant.')
-"
-    icon="robot"
-    color="rose"
-    @placed="placedAction = $event"
-  />
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginAddAction } from "#blokkli/plugins";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
 import { BlokkliTransition } from "#blokkli/components";
 import Overlay from "./Overlay/index.vue";
 const { adapter } = defineBlokkliFeature({
@@ -34,7 +23,7 @@ const { adapter } = defineBlokkliFeature({
   screenshot: "feature-assistant.jpg",
   dependencies: ["add-list"]
 });
-const { state, $t } = useBlokkli();
+const { state, $t, ui } = useBlokkli();
 const placedAction = ref(null);
 const onClose = () => {
   placedAction.value = null;
@@ -52,6 +41,21 @@ const onSubmit = async (result) => {
   }
   onClose();
 };
+defineAddAction(() => {
+  return {
+    id: "assistant",
+    title: $t("assistantAddAction", "Add with AI Assistant"),
+    description: $t(
+      "assistantAddActionDescription",
+      "Add content using an AI assistant."
+    ),
+    icon: "robot",
+    color: "rose",
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
 </script>
 
 <script>