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

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue

@@ -1,23 +1,45 @@
 <template>
   <div :class="{ 'bk-is-stale': stale }">
-    <ChartRenderer v-if="data" v-bind="data" />
-    <div v-else class="bk-chart-preview-placeholder">
-      {{
-        $t(
-  "chartsPreviewPlaceholder",
-  'Click "Refresh Preview" to see the chart.'
-)
-      }}
-    </div>
+    <BlokkliItem
+      v-if="item"
+      v-bind="item"
+      :options="mergedOptions"
+      :is-editing="false"
+    />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli } from "#imports";
-import ChartRenderer from "../../../../components/ChartRenderer/index.vue";
-const { $t } = useBlokkli();
-defineProps({
+import { computed, provide, useBlokkli } from "#imports";
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/injections";
+const { state } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true },
   data: { type: [Object, null], required: true },
   stale: { type: Boolean, required: true }
 });
+const item = computed(() => state.getFieldListItem(props.uuid));
+const mergedOptions = computed(() => {
+  const base = item.value?.options || {};
+  return {
+    ...base,
+    [props.optionKey]: JSON.stringify(props.data)
+  };
+});
+const blocks = computed(() => []);
+const fieldListType = computed(() => "default");
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
+provide(INJECT_FIELD_LIST_TYPE, fieldListType);
+provide(INJECT_EDIT_CONTEXT, null);
 </script>

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue.d.ts

@@ -1,5 +1,7 @@
 import type { BlokkliChartData } from '../../../../types.js';
 type __VLS_Props = {
+    uuid: string;
+    optionKey: string;
     data: BlokkliChartData | null;
     stale: boolean;
 };

package/dist/modules/charts/runtime/features/charts/Editor/index.d.vue.ts

@@ -1,6 +1,7 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
     uuid: string;
+    optionKey: string;
 };
 declare function getData(): BlokkliChartData;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

package/dist/modules/charts/runtime/features/charts/Editor/index.vue

@@ -44,7 +44,12 @@
             />
           </div>
         </div>
-        <Preview :data="previewData" :stale="isStale" />
+        <Preview
+          :uuid
+          :option-key="optionKey"
+          :data="previewData"
+          :stale="isStale"
+        />
       </div>
 
       <div class="bk-chart-editor-section">
@@ -93,7 +98,7 @@
 
 <script setup>
 import { ref, computed, watch, useBlokkli, onBeforeUnmount } from "#imports";
-import { getDefaultChartData, getFirstColorId } from "../../../types";
+import { getDefaultChartData, getFirstColorId } from "../../../helpers";
 import { getChartType, getDefaultTypeOptions } from "../../../chartTypes";
 import { COLORS } from "#blokkli-build/charts-config";
 import { useChartEditorState } from "./useChartEditorState";
@@ -106,7 +111,8 @@ import Preview from "./Preview/index.vue";
 import ChartTypeOptions from "./ChartTypeOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
-  uuid: { type: String, required: true }
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true }
 });
 const { $t, state } = useBlokkli();
 function getCurrentData() {

package/dist/modules/charts/runtime/features/charts/Editor/index.vue.d.ts

@@ -1,6 +1,7 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
     uuid: string;
+    optionKey: string;
 };
 declare function getData(): BlokkliChartData;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.js

@@ -1,5 +1,5 @@
 import { ref, watch, nextTick, computed } from "#imports";
-import { getColorIdAtIndex } from "../../../types.js";
+import { getColorIdAtIndex } from "../../../helpers/index.js";
 const MAX_HISTORY = 50;
 function clone(v) {
   return JSON.parse(JSON.stringify(v));

package/dist/modules/charts/runtime/features/charts/index.vue

@@ -9,7 +9,7 @@
     @submit="onSubmit"
     @close="onSubmit"
   >
-    <ChartsEditor ref="editorRef" :uuid />
+    <ChartsEditor ref="editorRef" :uuid :option-key="optionKey" />
   </NestedEditorOverlay>
 </template>
 
@@ -33,6 +33,7 @@ defineBlokkliFeature({
 });
 const { $t, state, adapter, dom, blocks } = useBlokkli();
 const uuid = ref(null);
+const optionKey = ref("data");
 const element = computed(() => {
   if (!uuid.value) {
     return null;
@@ -53,7 +54,7 @@ async function onSubmit() {
     () => adapter.updateOptions([
       {
         uuid: uuid.value,
-        key: "data",
+        key: optionKey.value,
         value: JSON.stringify(chartData)
       }
     ]),
@@ -62,11 +63,10 @@ async function onSubmit() {
   isLoading.value = false;
   uuid.value = null;
 }
-onBlokkliEvent("fragment:edit", (data) => {
-  if (data.name === "blokkli_chart") {
+onBlokkliEvent("option:edit-complex", (data) => {
+  if (data.dataType === "chart") {
     uuid.value = data.uuid;
-  } else {
-    uuid.value = null;
+    optionKey.value = data.key;
   }
 });
 </script>

package/dist/modules/charts/runtime/helpers/index.d.ts

@@ -1 +1,26 @@
+import type { BlokkliChartData, ChartColor } from '../types.js';
+export declare const SUPERSCRIPTS: Record<string, string>;
+/**
+ * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
+ */
+export declare function applyFootnotes(text: string): string;
+/**
+ * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
+ *
+ * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
+ * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
+ * by setting the value on a DOM element and reading the computed color.
+ *
+ * Falls back to the first defined color if the ID is not found.
+ */
+export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
+/**
+ * Get the fallback color ID (first defined color).
+ */
+export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
+/**
+ * Get a color ID for the given index, cycling through available colors.
+ */
+export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
+export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
 export declare function parseNumericInput(raw: string): number;

package/dist/modules/charts/runtime/helpers/index.js

@@ -1,3 +1,66 @@
+export const SUPERSCRIPTS = {
+  "1": "\xB9",
+  "2": "\xB2",
+  "3": "\xB3",
+  "4": "\u2074",
+  "5": "\u2075",
+  "6": "\u2076",
+  "7": "\u2077",
+  "8": "\u2078",
+  "9": "\u2079",
+  "0": "\u2070"
+};
+export function applyFootnotes(text) {
+  return text.replace(
+    /\{(\d)\}/g,
+    (_, d) => SUPERSCRIPTS[d] || `{${d}}`
+  );
+}
+export function resolveChartColor(colorId, colors, el) {
+  const ids = Object.keys(colors);
+  const entry = colors[colorId] || colors[ids[0] || ""];
+  if (!entry) {
+    return "#888888";
+  }
+  const value = entry.color;
+  if (!value.includes("var(")) {
+    return value;
+  }
+  const target = el || document.documentElement;
+  const prev = target.style.color;
+  target.style.color = value;
+  const resolved = getComputedStyle(target).color;
+  target.style.color = prev;
+  return resolved || value;
+}
+export function getFirstColorId(colors) {
+  return Object.keys(colors)[0] || "";
+}
+export function getColorIdAtIndex(index, colors) {
+  const ids = Object.keys(colors);
+  return ids[index % ids.length] || ids[0] || "";
+}
+export function getDefaultChartData(colors) {
+  return {
+    title: "",
+    type: "bar",
+    categories: ["Category 1", "Category 2", "Category 3"],
+    series: [
+      {
+        name: "Series 1",
+        color: getColorIdAtIndex(0, colors),
+        data: [30, 40, 35]
+      }
+    ],
+    categoryColors: [
+      getColorIdAtIndex(0, colors),
+      getColorIdAtIndex(1, colors),
+      getColorIdAtIndex(2, colors)
+    ],
+    footnotes: [],
+    typeOptions: {}
+  };
+}
 export function parseNumericInput(raw) {
   let str = raw.trim();
   if (!str) return 0;

package/dist/modules/charts/runtime/types.d.ts

@@ -1,4 +1,6 @@
+import type { ChartTypeOptionsMap } from './chartTypes/index.js';
 export type ChartType = 'bar' | 'line' | 'pie' | 'area' | 'donut' | 'heatmap' | 'radialBar' | 'radar';
+export type ChartTypeOptions = ChartTypeOptionsMap[ChartType];
 export type ChartSeries = {
     name: string;
     /**
@@ -7,9 +9,8 @@ export type ChartSeries = {
     color: string;
     data: number[];
 };
-export type BlokkliChartData = {
+type ChartDataBase = {
     title: string;
-    type: ChartType;
     categories: string[];
     series: ChartSeries[];
     /**
@@ -18,34 +19,15 @@ export type BlokkliChartData = {
      */
     categoryColors: string[];
     footnotes: string[];
-    typeOptions?: Record<string, unknown>;
 };
-declare const SUPERSCRIPTS: Record<string, string>;
-export { SUPERSCRIPTS };
-/**
- * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
- */
-export declare function applyFootnotes(text: string): string;
+export type BlokkliChartData = {
+    [K in ChartType]: ChartDataBase & {
+        type: K;
+        typeOptions?: Partial<ChartTypeOptionsMap[K]>;
+    };
+}[ChartType];
 export type ChartColor = {
     color: string;
     label: string;
 };
-/**
- * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
- *
- * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
- * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
- * by setting the value on a DOM element and reading the computed color.
- *
- * Falls back to the first defined color if the ID is not found.
- */
-export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
-/**
- * Get the fallback color ID (first defined color).
- */
-export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
-/**
- * Get a color ID for the given index, cycling through available colors.
- */
-export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
-export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
+export {};

package/dist/modules/charts/runtime/types.js

@@ -1,64 +0,0 @@
-const SUPERSCRIPTS = {
-  "1": "\xB9",
-  "2": "\xB2",
-  "3": "\xB3",
-  "4": "\u2074",
-  "5": "\u2075",
-  "6": "\u2076",
-  "7": "\u2077",
-  "8": "\u2078",
-  "9": "\u2079",
-  "0": "\u2070"
-};
-export { SUPERSCRIPTS };
-export function applyFootnotes(text) {
-  return text.replace(
-    /\{(\d)\}/g,
-    (_, d) => SUPERSCRIPTS[d] || `{${d}}`
-  );
-}
-export function resolveChartColor(colorId, colors, el) {
-  const ids = Object.keys(colors);
-  const entry = colors[colorId] || colors[ids[0] || ""];
-  if (!entry) {
-    return "#888888";
-  }
-  const value = entry.color;
-  if (!value.includes("var(")) {
-    return value;
-  }
-  const target = el || document.documentElement;
-  const prev = target.style.color;
-  target.style.color = value;
-  const resolved = getComputedStyle(target).color;
-  target.style.color = prev;
-  return resolved || value;
-}
-export function getFirstColorId(colors) {
-  return Object.keys(colors)[0] || "";
-}
-export function getColorIdAtIndex(index, colors) {
-  const ids = Object.keys(colors);
-  return ids[index % ids.length] || ids[0] || "";
-}
-export function getDefaultChartData(colors) {
-  return {
-    title: "",
-    type: "bar",
-    categories: ["Category 1", "Category 2", "Category 3"],
-    series: [
-      {
-        name: "Series 1",
-        color: getColorIdAtIndex(0, colors),
-        data: [30, 40, 35]
-      }
-    ],
-    categoryColors: [
-      getColorIdAtIndex(0, colors),
-      getColorIdAtIndex(1, colors),
-      getColorIdAtIndex(2, colors)
-    ],
-    footnotes: [],
-    typeOptions: {}
-  };
-}

package/dist/modules/drupal/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/runtime/adapter/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
+import { type BlokkliAdapterFactory } from '#blokkli/editor/adapter';
+import type { ParagraphsBlokkliEditStateFragment } from '#graphql-operations';
+declare const _default: BlokkliAdapterFactory<ParagraphsBlokkliEditStateFragment>;
 export default _default;

package/dist/modules/drupal/runtime/adapter/index.js

@@ -852,19 +852,19 @@ export default defineBlokkliEditAdapter(
               }
             }
             return false;
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "plaintext") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardRichText";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "image") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardImage";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "file") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardFile";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         }
       };
     }

package/dist/modules/table-of-contents/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/runtime/components/BlokkliItem.vue

@@ -56,7 +56,7 @@ const isGlobalProxyMode = inject(INJECT_GLOBAL_PROXY_MODE, null);
 const fieldListType = inject(INJECT_FIELD_LIST_TYPE, void 0);
 const providerType = inject(INJECT_PROVIDER_TYPE, void 0);
 const itemProps = computed(() => {
-  if (mutatedItemProps) {
+  if (mutatedItemProps && componentProps.isEditing) {
     const mutatedProps = mutatedItemProps[componentProps.uuid];
     if (mutatedProps) {
       return {

package/dist/runtime/composables/defineBlokkli.js

@@ -92,7 +92,7 @@ export function defineBlokkli(arg) {
   }
   if (editContext?.useBlockRegistration && editContext.dom && bundle !== fromLibraryBlockBundle && bundle !== fragmentBlockBundle) {
     const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
-    if (!isProxyMode) {
+    if (!isProxyMode && isEditing) {
       editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
     }
   }

package/dist/runtime/editor/components/AnimationCanvas/index.vue

@@ -79,6 +79,7 @@ let pointerDownElement = null;
 let mouseStartCoordinates = null;
 let pointerDownTimestamp = 0;
 let pointerUpTimestamp = 0;
+let pointerDownOnCanvas = false;
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
   const visibleUuids = dom.getVisibleBlocks();
@@ -144,7 +145,7 @@ function onPointerMove(e) {
   if (!handlePointerMove) {
     return;
   }
-  if (keyboard.isPressingSpace.value || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
+  if (keyboard.isPressingSpace.value || e.buttons & MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
   e.preventDefault();
@@ -201,9 +202,10 @@ function onPointerMove(e) {
   }
 }
 function onPointerDown(e) {
-  if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
+  if (e.buttons & MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
+  pointerDownOnCanvas = true;
   if (canvasEl.value) {
     canvasEl.value.focus();
   }
@@ -251,15 +253,15 @@ function isClickInArtboard(coords) {
   return isInsideRect(coords.x, coords.y, rect);
 }
 function onPointerUp(e) {
-  handlePointerMove = false;
   if (e.button === MOUSE_BUTTON.AUXILIARY) {
     e.preventDefault();
     return;
   }
+  handlePointerMove = false;
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
-  if (ui.openTooltip.value) {
+  if (ui.openTooltip.value && !selection.activeEditableLabel.value) {
     ui.openTooltip.value = "";
     return;
   }
@@ -289,8 +291,11 @@ function onPointerUp(e) {
     return;
   }
   if (selection.activeEditableLabel.value) {
-    eventBus.emit("window:clickAway");
-    lastInteractedElement = null;
+    if (pointerDownOnCanvas) {
+      eventBus.emit("window:clickAway");
+      lastInteractedElement = null;
+    }
+    pointerDownOnCanvas = false;
     return;
   }
   if (animation.handleClick(e.clientX, e.clientY)) {
@@ -303,6 +308,7 @@ function onPointerUp(e) {
     const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
     if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
       if (clicked.editableFieldName) {
+        pointerDownOnCanvas = false;
         eventBus.emit("editable:focus", {
           fieldName: clicked.editableFieldName,
           uuid: clicked.uuid
@@ -448,7 +454,7 @@ function onClick(e) {
   e.preventDefault();
   e.stopImmediatePropagation();
   e.stopPropagation();
-  if (canvasEl.value) {
+  if (canvasEl.value && !selection.activeEditableLabel.value) {
     canvasEl.value.focus();
   }
 }

package/dist/runtime/editor/components/Banner/index.d.vue.ts

@@ -16,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
+    text: string;
     button: string;
     scheme: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/Banner/index.vue

@@ -26,7 +26,7 @@ import {
 const props = defineProps({
   id: { type: String, required: true },
   icon: { type: null, required: true },
-  text: { type: String, required: false },
+  text: { type: String, required: false, default: void 0 },
   button: { type: String, required: false, default: void 0 },
   scheme: { type: String, required: false, default: "accent" }
 });

package/dist/runtime/editor/components/Banner/index.vue.d.ts

@@ -16,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
+    text: string;
     button: string;
     scheme: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/DropdownItem/index.d.vue.ts

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

package/dist/runtime/editor/components/DropdownItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="bk-dropdown-menu-item" @click="$emit('click')">
+  <button class="bk-dropdown-menu-item" :disabled @click="$emit('click')">
     <Icon :name="icon" />
     <span>{{ text }}</span>
   </button>
@@ -9,7 +9,8 @@
 import { Icon } from "#blokkli/editor/components";
 defineProps({
   icon: { type: null, required: true },
-  text: { type: String, required: true }
+  text: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
 });
 defineEmits(["click"]);
 </script>

package/dist/runtime/editor/components/DropdownItem/index.vue.d.ts

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

package/dist/runtime/editor/components/EditProvider.vue

@@ -100,7 +100,6 @@ import commandsProvider from "#blokkli/editor/providers/commands";
 import tourProvider from "#blokkli/editor/providers/tour";
 import debugProvider from "#blokkli/editor/providers/debug";
 import definitionProvider from "#blokkli/editor/providers/definition";
-import dropAreasProvider from "#blokkli/editor/providers/dropArea";
 import blocksProvider from "#blokkli/editor/providers/blocks";
 import indicatorsProvider from "#blokkli/editor/providers/indicators";
 import pluginProvider from "#blokkli/editor/providers/plugin";
@@ -109,6 +108,8 @@ import fieldsProvider from "#blokkli/editor/providers/fields";
 import iconsProvider from "#blokkli/editor/providers/icons";
 import permissionsProvider from "#blokkli/editor/providers/permissions";
 import adaptersProvider from "#blokkli/editor/providers/adapters";
+import analyzeProviderFn from "#blokkli/editor/providers/analyze";
+import dragdropProvider from "#blokkli/editor/providers/dragdrop";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -186,7 +187,6 @@ const element = elementProvider(debug);
 const features = featuresProvider(storage);
 const commands = commandsProvider();
 const tour = tourProvider();
-const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
 const icons = iconsProvider();
 const ui = uiProvider(
@@ -216,6 +216,8 @@ const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(dom, types, state);
 const permissionsInstance = await permissionsProvider(adapter);
+const analyze = analyzeProviderFn(adapters, state, ui, context, $t);
+const dragdrop = dragdropProvider();
 const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
 const mutatedEntity = computed(() => {
   return {
@@ -283,7 +285,6 @@ const app = {
   debug,
   definitions,
   dom,
-  dropAreas,
   element,
   eventBus,
   directive,
@@ -301,7 +302,9 @@ const app = {
   ui,
   fields,
   icons,
-  permissions: permissionsInstance
+  permissions: permissionsInstance,
+  analyze,
+  dragdrop
 };
 provide(INJECT_APP, app);
 function textWithHighlight(title, text) {