@blokkli/editor 2.0.0-alpha.12 → 2.0.0-alpha.14

package/dist/runtime/helpers/uiProvider.js

@@ -2,29 +2,37 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed,
-  watch
+  computed
 } from "vue";
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
-const ARTBOARD_CLASS = "bk-is-artboard";
+import { addElementClasses } from "./addElementClasses.js";
+import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
-export default function(storage, state) {
+export default function(storage, state, context) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   let cachedProviderElement = null;
+  const interfaceLanguage = computed(() => {
+    return forceDefaultLanguage ? defaultLanguage : context.value.language;
+  });
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
+  const hasDialogOpen = ref(false);
+  const hasAddTooltipOpen = ref(false);
+  const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
+  const isAnalyzing = ref(false);
   const transformLabel = ref("");
   const openContextMenu = ref("");
   const selectionTopLeft = ref({ x: 0, y: 0 });
-  const useAnimationsSetting = storage.use("useAnimations", true);
-  const useAnimations = computed(() => useAnimationsSetting.value);
   const baseSettings = storage.use("feature:settings:settings", {});
   const lowPerformanceMode = computed(
     () => baseSettings.value.lowPerformanceMode
   );
+  const useAnimations = computed(
+    () => baseSettings.value.useAnimations !== false
+  );
   const viewportBlockingRectsMap = ref(
     {}
   );
@@ -109,16 +117,6 @@ export default function(storage, state) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const isArtboard = () => {
-    return document.documentElement.classList.contains(ARTBOARD_CLASS);
-  };
-  watch(isAnimating, (is) => {
-    if (is) {
-      document.documentElement.classList.add("bk-is-animating");
-    } else {
-      document.documentElement.classList.remove("bk-is-animating");
-    }
-  });
   const toolbarHeight = computed(() => {
     if (isMobile.value) {
       return 80;
@@ -200,35 +198,6 @@ export default function(storage, state) {
       height: visibleViewportHeight.value - 20
     };
   });
-  function setProxyModeClass() {
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    if (isProxyMode.value) {
-      document.documentElement.classList.add(CLASS_PROXY_MODE);
-    }
-  }
-  watch(isProxyMode, setProxyModeClass);
-  onMounted(() => {
-    document.documentElement.classList.add("bk-html-root");
-    document.body.classList.add("bk-body");
-    document.documentElement.classList.add(ARTBOARD_CLASS);
-    setProxyModeClass();
-    viewportWidth.value = window.innerWidth;
-    viewportHeight.value = window.innerHeight;
-    window.addEventListener("resize", onResize);
-    const artboard = artboardElement();
-    resizeObserver.observe(artboard);
-  });
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", onResize);
-    document.documentElement.classList.remove("bk-html-root");
-    document.body.classList.remove("bk-body");
-    document.documentElement.classList.remove(ARTBOARD_CLASS);
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    clearTimeout(resizeTimeout);
-    const artboard = artboardElement();
-    resizeObserver.unobserve(artboard);
-    resizeObserver.disconnect();
-  });
   const viewport = computed(() => {
     return {
       width: viewportWidth.value,
@@ -260,6 +229,35 @@ export default function(storage, state) {
   function setTransform(label) {
     transformLabel.value = label || "";
   }
+  addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-left",
+    activeSidebarLeft
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right",
+    activeSidebarRight
+  );
+  addElementClasses(document.documentElement, ["bk-html-root"]);
+  addElementClasses(document.body, "bk-body");
+  addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
+  addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  onMounted(() => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    resizeObserver.observe(artboard);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    clearTimeout(resizeTimeout);
+    const artboard = artboardElement();
+    resizeObserver.unobserve(artboard);
+    resizeObserver.disconnect();
+  });
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -271,8 +269,8 @@ export default function(storage, state) {
     providerElement,
     isMobile,
     isDesktop,
-    isArtboard,
     isAnimating,
+    isAnalyzing,
     isTransforming,
     setTransform,
     transformLabel: computed(() => transformLabel.value),
@@ -293,6 +291,10 @@ export default function(storage, state) {
     selectionTopLeft,
     lowPerformanceMode,
     getAbsoluteElementRect,
-    getViewportRelativeRect
+    getViewportRelativeRect,
+    interfaceLanguage,
+    hasDialogOpen,
+    hasTransformOverlayOpen,
+    hasAddTooltipOpen
   };
 }

package/dist/runtime/helpers/useTransitionedValue.d.ts

@@ -0,0 +1,18 @@
+import type { RGB } from '#blokkli/types/theme';
+interface TransitionOptions {
+    /**
+     * Duration in milliseconds.
+     */
+    duration?: number;
+    /**
+     * The easing method. Defaults to "ease out quad".
+     */
+    easing?: (t: number) => number;
+}
+/**
+ * Creates a computed property from the given callback and transitions between values.
+ *
+ * Returns a method that, when called, will return the current transitioned value.
+ */
+export declare function useTransitionedValue<T extends RGB | number>(valueCallback: () => T, options?: TransitionOptions): () => T;
+export {};

package/dist/runtime/helpers/useTransitionedValue.js

@@ -0,0 +1,57 @@
+import { computed, watch } from "vue";
+import { easeOutQuad } from "./easing.js";
+function isRGB(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function interpolateColor(from, to, t) {
+  return [
+    lerp(from[0], to[0], t),
+    lerp(from[1], to[1], t),
+    lerp(from[2], to[2], t)
+  ];
+}
+function interpolateValue(from, to, t) {
+  if (isRGB(from) && isRGB(to)) {
+    return interpolateColor(from, to, t);
+  } else if (typeof from === "number" && typeof to === "number") {
+    return lerp(from, to, t);
+  }
+  return to;
+}
+function cloneValue(value) {
+  if (isRGB(value)) {
+    return [...value];
+  }
+  return value;
+}
+export function useTransitionedValue(valueCallback, options = {}) {
+  const { duration = 300, easing = easeOutQuad } = options;
+  const value = computed(valueCallback);
+  const initial = value.value;
+  let current = cloneValue(initial);
+  let target = cloneValue(initial);
+  let from = cloneValue(initial);
+  let startTime = null;
+  watch(value, (newValue) => {
+    from = cloneValue(current);
+    target = cloneValue(newValue);
+    startTime = Date.now();
+  });
+  return function getCurrentValue() {
+    if (startTime !== null) {
+      const elapsed = Date.now() - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      if (rawProgress >= 1) {
+        current = cloneValue(target);
+        startTime = null;
+      } else {
+        const easedProgress = easing(rawProgress);
+        current = interpolateValue(from, target, easedProgress);
+      }
+    }
+    return current;
+  };
+}

package/dist/runtime/icons/anchor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A3 3 0 0 0 9 5A3 3 0 0 0 11 7.83V9H8V11H11V19.92C10.26 19.79 9.5 19.58 8.79 19.27C8.05 18.95 7.4 18.56 6.82 18.09C6.24 17.62 5.78 17.11 5.44 16.55L7 15L3 12V15C3 15.97 3.27 16.88 3.82 17.72C4.37 18.56 5.09 19.31 6 19.95C6.87 20.59 7.84 21.09 8.88 21.45C9.93 21.81 10.97 22 12 22C13.03 22 14.07 21.8 15.12 21.44C16.16 21.08 17.13 20.58 18 19.95C18.92 19.31 19.63 18.57 20.18 17.72C20.73 16.88 21 15.97 21 15V12L17 15L18.56 16.55C18.22 17.11 17.76 17.62 17.18 18.09C16.6 18.56 15.95 18.95 15.21 19.27C14.5 19.58 13.74 19.79 13 19.92V11H16V9H13V7.82A3 3 0 0 0 15 5A3 3 0 0 0 12 2M12 4A1 1 0 0 1 13 5A1 1 0 0 1 12 6A1 1 0 0 1 11 5A1 1 0 0 1 12 4Z" /></svg>

package/dist/runtime/icons/arrow-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-left</title><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>

package/dist/runtime/icons/arrow-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-right</title><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>

package/dist/runtime/icons/arrow-top-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" /></svg>

package/dist/runtime/icons/chart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" /></svg>

package/dist/runtime/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg>

package/dist/runtime/icons/cursor-move.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cursor-move</title><path d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" /></svg>

package/dist/runtime/icons/diff.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>select-compare</title><path d="M13,23H11V1H13V23M9,19H5V5H9V3H5C3.89,3 3,3.89 3,5V19C3,20.11 3.9,21 5,21H9V19M19,7V9H21V7H19M19,5H21C21,3.89 20.1,3 19,3V5M21,15H19V17H21V15M19,11V13H21V11H19M17,3H15V5H17V3M19,21C20.11,21 21,20.11 21,19H19V21M17,19H15V21H17V19Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,23H11V1H13V23M9,19H5V5H9V3H5C3.89,3 3,3.89 3,5V19C3,20.11 3.9,21 5,21H9V19M19,7V9H21V7H19M19,5H21C21,3.89 20.1,3 19,3V5M21,15H19V17H21V15M19,11V13H21V11H19M17,3H15V5H17V3M19,21C20.11,21 21,20.11 21,19H19V21M17,19H15V21H17V19Z" /></svg>

package/dist/runtime/icons/eye.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye</title><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>

package/dist/runtime/icons/info.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-slab-circle</title><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22M11 7H13V9H11V7M14 17H10V15H11V13H10V11H13V15H14V17Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22M11 7H13V9H11V7M14 17H10V15H11V13H10V11H13V15H14V17Z" /></svg>

package/dist/runtime/icons/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>

package/dist/runtime/icons/speedometer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z" /></svg>

package/dist/runtime/types/blokkOptions.d.ts

@@ -3,6 +3,7 @@ type DefinitionOptionText = {
     type: 'text';
     default: string;
     label: string;
+    description?: string;
     inputType?: 'text' | 'number' | 'date';
     group?: string;
 };
@@ -10,6 +11,7 @@ type DefinitionOptionNumber = {
     type: 'number';
     default: number;
     label: string;
+    description?: string;
     min: number;
     max: number;
     group?: string;
@@ -18,6 +20,7 @@ type DefinitionOptionRange = {
     type: 'range';
     default: number;
     label: string;
+    description?: string;
     min: number;
     max: number;
     step: number;
@@ -26,6 +29,7 @@ type DefinitionOptionRange = {
 type DefinitionOptionDateTimeLocal = {
     type: 'datetime-local';
     label: string;
+    description?: string;
     default?: string;
     min?: string;
     max?: string;
@@ -35,17 +39,20 @@ type DefinitionOptionCheckbox = {
     type: 'checkbox';
     default: boolean;
     label: string;
+    description?: string;
     group?: string;
 };
 type DefinitionOptionColor = {
     type: 'color';
     default: `#${string}`;
     label: string;
+    description?: string;
     group?: string;
 };
 type DefinitionOptionCheckboxes = {
     type: 'checkboxes';
     label: string;
+    description?: string;
     /**
      * The default values.
      */
@@ -85,6 +92,7 @@ type DefinitionOptionRadiosIcons = {
 type DefinitionOptionRadios = {
     type: 'radios';
     label: string;
+    description?: string;
     default: string;
     group?: string;
 } & (DefinitionOptionRadiosColors | DefinitionOptionRadiosGrid | DefinitionOptionRadiosRadios | DefinitionOptionRadiosIcons);

package/dist/runtime/types/index.d.ts

@@ -9,6 +9,7 @@ import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
 import type { TextProvider } from '../helpers/textProvider.js';
+import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
 import type { BlockOptionDefinition } from './blokkOptions.js';
 import type { BlokkliAdapter, AdapterContext, MutationResponseLike } from './../adapter/index.js';
@@ -26,6 +27,7 @@ import type { RGB } from './theme.js';
 import type { DebugProvider } from '#blokkli/helpers/debugProvider';
 import type getVideoId from 'get-video-id';
 import type { DefinitionProvider } from '../helpers/definitionProvider.js';
+import type { IndicatorsProvider } from '#blokkli/helpers/indicatorsProvider';
 export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string, successMessage?: string) => Promise<boolean>;
 type GetType<T> = T extends {
     options: infer O;
@@ -89,6 +91,15 @@ export type DefineBlokkliContext<T extends BlockDefinitionOptionsInput = BlockDe
      */
     provider: ComputedRef<BlokkliProviderEntityContext | null>;
 };
+export type DefineProviderContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends ValidGlobalConfigKeys | undefined = undefined> = {
+    /**
+     * The reactive runtime options.
+     *
+     * This includes both the locally defined options and the inherited global
+     * options.
+     */
+    options: ComputedRef<(T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object)>;
+};
 type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined, B extends BundleKey | string = string> = {
     options: (T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object);
     parentType: BlockBundleWithNested | undefined;
@@ -99,7 +110,7 @@ type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = Bloc
 type ExtractGlobalOptions<G extends GlobalOptionsKey[]> = G[number] extends GlobalOptionsKey ? G[number] : never;
 type CombineKeysAndGlobalOptions<T extends BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined> = keyof T | ExtractGlobalOptions<NonNullable<G>>;
 export type BlokkliDefinitionAddBehaviour = 'no-form' | 'form' | `editable:${string}`;
-export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string> = {
+export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string, PropsType = Bundle extends BundleKey ? BundleProps[Bundle] : Record<string, any>> = {
     /**
      * Determine which options should be visible in the editor based on the
      * given context.
@@ -234,7 +245,7 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
      * You can also return HTML as the value. The feature uses an HTML differ to
      * render the diff.
      */
-    mapDiffProps?: (props?: any) => Record<string, string>;
+    mapDiffProps?: (props?: PropsType) => Record<string, string>;
 };
 export type BlockDefinitionRenderForParent = {
     parentBundle: BlockBundleWithNested;
@@ -396,6 +407,50 @@ export interface ConversionItem {
     sourceBundle: string;
     targetBundle: string;
 }
+export type PluginConfigInputText = {
+    type: 'text';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    minLength?: number;
+    maxLength?: number;
+    placeholder?: string;
+    pattern?: string;
+    multiline?: boolean;
+    rows?: number;
+};
+export type PluginConfigInputSeed = {
+    type: 'seed';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+};
+export type PluginConfigInputCheckbox = {
+    type: 'checkbox';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    checkboxLabel?: string;
+    defaultValue: boolean;
+};
+export type PluginConfigInputOptions = {
+    type: 'options';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    variant: 'select' | 'radio';
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+export type PluginConfigInput = PluginConfigInputText | PluginConfigInputSeed | PluginConfigInputCheckbox | PluginConfigInputOptions;
 export interface TransformPlugin {
     /**
      * The ID of the plugin.
@@ -412,7 +467,7 @@ export interface TransformPlugin {
     /**
      * The array of bundles that the transform might create.
      */
-    targetBundles: string[];
+    targetBundles?: string[];
     /**
      * The minimum number of items required.
      */
@@ -421,6 +476,38 @@ export interface TransformPlugin {
      * The maximum number of items.
      */
     max: number;
+    configInputs?: PluginConfigInput[];
+    description?: string;
+    /**
+     * Whether the transform plugin supports previewing the changes first.
+     *
+     * If true, the plugin is expected to to defer producing any side effects
+     * to when it's executed in non-preview mode.
+     */
+    preview?: boolean;
+}
+export type PluginConfigInputItem = {
+    name: string;
+    value: string;
+};
+export interface HostTransformPlugin {
+    /**
+     * The ID of the plugin.
+     */
+    id: string;
+    /**
+     * The label of the transform plugin which is shown in the editor.
+     */
+    label: string;
+    configInputs?: PluginConfigInput[];
+    description?: string;
+    /**
+     * Whether the transform plugin supports previewing the changes first.
+     *
+     * If true, the plugin is expected to to defer producing any side effects
+     * to when it's executed in non-preview mode.
+     */
+    preview?: boolean;
 }
 export interface LibraryItem {
     uuid: string;
@@ -465,6 +552,7 @@ export interface MappedState {
     ownerName: string;
     mutatedState?: {
         mutatedOptions?: any;
+        mutatedHostOptions?: Record<string, string>;
         fields?: MutatedField[];
         violations?: Validation[];
     };
@@ -718,6 +806,10 @@ export type UpdateBlockOptionEvent = {
     key: string;
     value: string;
 };
+export type UpdateHostOptionEvent = {
+    key: string;
+    value: string;
+};
 export type EditBlockEvent = {
     uuid: string;
     bundle: string;
@@ -743,6 +835,7 @@ export type Message = {
     type: 'success' | 'error';
     message: string;
     additional?: string | Error | unknown;
+    replace?: boolean;
 };
 export type Size = {
     width: number;
@@ -789,6 +882,11 @@ export type ScrollIntoViewEvent = {
     uuid: string;
     center?: boolean;
     immediate?: boolean;
+} | {
+    element: HTMLElement;
+    center?: boolean;
+    immediate?: boolean;
+    highlight?: boolean;
 };
 export type PluginMountEvent = {
     type: 'ItemDropdown';
@@ -840,7 +938,7 @@ export type BlokkliFieldElement = {
     dropAlignment?: 'vertical' | 'horizontal';
 };
 export type ActionPlacedEvent = {
-    action: DraggableActionItem;
+    id: string;
     preceedingUuid?: string;
     host: DraggableHostData;
     field: BlokkliFieldElement;
@@ -906,9 +1004,17 @@ export type AnimationFrameBeforeEvent = {
     mouseX: number;
     mouseY: number;
 };
+type MultiSelectStartEvent = {
+    x: number;
+    y: number;
+};
 export type EventbusEvents = {
     select: string | string[];
     'select:unselect': undefined;
+    'select:force': string | string[];
+    'select:host': undefined;
+    'select:host:unselect': undefined;
+    'multi-select:start': MultiSelectStartEvent;
     'item:edit': EditBlockEvent;
     batchTranslate: undefined;
     'dragging:start': DraggableStartEvent;
@@ -950,6 +1056,7 @@ export type EventbusEvents = {
     'sidebar:close': undefined;
     'sidebar:open': string;
     'action:placed': ActionPlacedEvent;
+    'action:selected': undefined;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;
     'add-list:change': undefined;
@@ -965,6 +1072,19 @@ export type EventbusEvents = {
      * Edit a library item.
      */
     'library:edit-item': LibraryEditItemEvent;
+    /**
+     * Emitted when a view option is being toggled.
+     */
+    'view-option:toggle': {
+        id: string;
+    };
+    /**
+     * An analyze node target was clicked.
+     */
+    'analyze:click-node': {
+        id: string;
+        target: HTMLElement;
+    };
 };
 export type Eventbus = Emitter<EventbusEvents>;
 export type ItemEditContext = {
@@ -1002,6 +1122,8 @@ export interface BlokkliApp {
     tour: TourProvider;
     dropAreas: DropAreaProvider;
     debug: DebugProvider;
+    indicators: IndicatorsProvider;
+    plugins: PluginProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];
@@ -1132,7 +1254,7 @@ export type DropArea = {
     label: string;
     icon?: BlokkliIcon;
     element: HTMLElement;
-    onDrop: () => Promise<any>;
+    onDrop: () => Promise<any> | any;
 };
 export type ContextMenuRule = {
     type: 'rule';
@@ -1181,6 +1303,26 @@ export type FragmentDefinitionInput<Options extends BlockDefinitionOptionsInput
      */
     editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions>;
 };
+export type ProviderDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = {
+    /**
+     * The entity type.
+     */
+    entityType: string;
+    /**
+     * The bundle.
+     */
+    bundle: string;
+    /**
+     * Define options available for this block.
+     */
+    options?: Options;
+    /**
+     * Global options to use.
+     *
+     * These options will be merged with the component-specific options.
+     */
+    globalOptions?: GlobalOptions;
+};
 export type TourItem = {
     id: string;
     title: string;
@@ -1218,5 +1360,21 @@ export type GetEditStatesItem = {
     entity: EditEntity;
     currentUserIsOwner: boolean;
 };
+export type BlockIndicator = {
+    id: string;
+    uuid: string;
+    element: HTMLElement;
+    position: 'left' | 'right';
+};
+export type AddActionColor = 'rose' | 'lime' | 'accent';
+export type AddAction = {
+    id: string;
+    icon: BlokkliIcon;
+    color: AddActionColor;
+    itemBundle?: string;
+    title: string;
+    description?: string;
+    enabled?: boolean;
+};
 declare const _default: {};
 export default _default;

package/dist/runtime/types/theme.d.ts

@@ -25,7 +25,8 @@ export type ThemeContextColorGroup =
 /**
  * The lime color used for reusable blocks / library and status indicators.
  */
- | 'lime';
+ | 'lime' | 'orange';
+export type ThemeColorName = ThemeColorGroup | ThemeContextColorGroup;
 export type ThemeColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
 export type ThemeContextColorShade = 'light' | 'normal' | 'dark';
 export type ThemeColors = Record<ThemeColorShade, RGB>;

package/dist/shared/{editor.gz_ac6uT.d.mts → editor.CKsrTpc1.d.mts}

@@ -25,7 +25,7 @@ type ModuleFileTemplate = {
 };
 type ModuleTemplate = ModuleCodeTemplate | ModuleFileTemplate;
 
-type CollectedBlockType = 'main' | 'context' | 'fragment';
+type CollectedBlockType = 'main' | 'context' | 'fragment' | 'provider';
 declare class CollectedBlockFile extends CollectedFile {
     folder: string;
     iconPath: string | null;