@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/runtime/editor/plugins/Sidebar/Detached/index.vue

@@ -74,7 +74,11 @@ import {
   useState,
   useTemplateRef
 } from "#imports";
-import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/editor/components";
+import {
+  Icon,
+  ViewportBlockingRect,
+  ScrollBoundary
+} from "#blokkli/editor/components";
 import { addElementClasses, onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   id: { type: String, required: true },
@@ -98,18 +102,17 @@ function onPointerMove(e) {
   }
   e.stopPropagation();
 }
-const BASE_Z = 19e4;
 const isMinimized = storage.use(
   computed(() => "sidebar:detached:minimized:" + props.id),
   false
 );
 const storageKey = computed(() => "sidebar:detached:size:" + props.id);
 const focusedSidebar = storage.use("sidebar:focused", "");
-const zStorageKey = computed(() => "sidebar:detached:zIndex:" + props.id);
-const globalZ = useState("blokkli:zIndex", () => BASE_Z);
-const z = storage.use(zStorageKey.value, BASE_Z);
-if (z.value > globalZ.value) {
-  globalZ.value = z.value;
+const zStorageKey = computed(() => "sidebar:detached:zindexOffset:" + props.id);
+const globalZOffset = useState("blokkli:zOffset", () => 0);
+const zOffset = storage.use(zStorageKey.value, 0);
+if (zOffset.value > globalZOffset.value) {
+  globalZOffset.value = zOffset.value;
 }
 const offsetX = computed(() => {
   if (x.value + width.value > ui.visibleViewport.value.x + ui.visibleViewport.value.width) {
@@ -183,7 +186,7 @@ watch(
 const style = computed(() => {
   return {
     transform: `translate(${x.value - offsetX.value}px, ${y.value}px)`,
-    zIndex: z.value
+    zIndex: `calc(var(--bk-z-index-sidebar-detached) + ${zOffset.value})`
   };
 });
 const innerStyle = computed(() => {
@@ -194,8 +197,8 @@ const innerStyle = computed(() => {
 });
 const onFocus = () => {
   focusedSidebar.value = props.id;
-  globalZ.value++;
-  z.value = globalZ.value;
+  globalZOffset.value++;
+  zOffset.value = globalZOffset.value;
 };
 const onMouseDown = (e, mode) => {
   mouseMode.value = mode;

package/dist/runtime/editor/plugins/Sidebar/Detached/index.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -190,9 +190,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
+    minHeight: number;
     tourText: string;
     minWidth: number;
-    minHeight: number;
     region: SidebarRegion;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
@@ -205,6 +205,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         key: string;
         scrolledToEnd: any;
         isDetached: any;
+        isShown: any;
         width: any;
         height: any;
         toggleSidebar: () => void;
@@ -215,6 +216,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         key: string;
         scrolledToEnd: any;
         isDetached: any;
+        isShown: any;
         width: undefined;
         height: undefined;
         toggleSidebar: () => void;

package/dist/runtime/editor/plugins/Sidebar/index.vue

@@ -34,7 +34,9 @@
     v-if="
   (activeSidebar === id || isRenderedDetached || renderAlways) && !isDisabled
 "
-    :to="isRenderedDetached ? 'body' : '#bk-sidebar-content-' + region"
+    :to="
+  isRenderedDetached ? ui.mainLayoutElement.value : '#bk-sidebar-content-' + region
+"
   >
     <SidebarDetached
       v-if="isRenderedDetached"
@@ -59,6 +61,7 @@
               :key="isRenderedDetached ? 'detached' : 'attached'"
               :scrolled-to-end
               :is-detached="isRenderedDetached"
+              :is-shown="isShown"
               :width
               :height
               :toggle-sidebar
@@ -92,6 +95,7 @@
             :key="isRenderedDetached ? 'detached' : 'attached'"
             :scrolled-to-end="scrolledToEnd"
             :is-detached="isRenderedDetached"
+            :is-shown="isShown"
             :width="undefined"
             :height="undefined"
             :toggle-sidebar="toggleSidebar"
@@ -119,7 +123,12 @@ import {
   Loading
 } from "#blokkli/editor/components";
 import SidebarDetached from "./Detached/index.vue";
-import { defineCommands, defineTourItem, onBlokkliEvent, useAnimationFrame } from "#blokkli/editor/composables";
+import {
+  defineCommands,
+  defineTourItem,
+  onBlokkliEvent,
+  useAnimationFrame
+} from "#blokkli/editor/composables";
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
@@ -169,6 +178,9 @@ watch(
 const isRenderedDetached = computed(
   () => isDetached.value && !ui.isMobile.value
 );
+const isShown = computed(
+  () => (activeSidebar.value === props.id || isRenderedDetached.value) && !isDisabled.value
+);
 watch(isDisabled, (v) => {
   if (v && activeSidebar.value === props.id) {
     activeSidebar.value = "";

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -190,9 +190,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
+    minHeight: number;
     tourText: string;
     minWidth: number;
-    minHeight: number;
     region: SidebarRegion;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
@@ -205,6 +205,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         key: string;
         scrolledToEnd: any;
         isDetached: any;
+        isShown: any;
         width: any;
         height: any;
         toggleSidebar: () => void;
@@ -215,6 +216,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         key: string;
         scrolledToEnd: any;
         isDetached: any;
+        isShown: any;
         width: undefined;
         height: undefined;
         toggleSidebar: () => void;

package/dist/runtime/editor/providers/adapters.d.ts

@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { FullBlokkliAdapter, BlokkliAdapterExtension, AdapterExtensionMethods, AdapterContext, BlokkliAdapterExtensionFactory } from '#blokkli/editor/adapter';
+export type AdapterExtensionDefinition = {
+    namespace: string;
+    factory: BlokkliAdapterExtensionFactory<any>;
+};
+export interface AdaptersProvider {
+    /**
+     * The base adapter.
+     */
+    adapter: FullBlokkliAdapter<any>;
+    /**
+     * All registered extensions.
+     */
+    extensions: BlokkliAdapterExtension<any>[];
+    /**
+     * Get aggregated results from base adapter + all extensions.
+     * Results from extensions have their IDs prefixed with namespace.
+     */
+    getAggregated<K extends keyof AdapterExtensionMethods<any>>(methodName: K): Promise<any[]>;
+    /**
+     * Call a method, routing to the correct source based on namespace in pluginId.
+     * If pluginId has namespace prefix, calls extension; otherwise calls base adapter.
+     */
+    callNamespaced<K extends keyof AdapterExtensionMethods<any>>(methodName: K, args: {
+        pluginId: string;
+    } & Record<string, any>): Promise<any>;
+    /**
+     * Get extension by namespace.
+     */
+    getExtension(namespace: string): BlokkliAdapterExtension<any> | undefined;
+}
+export default function adaptersProvider(adapter: FullBlokkliAdapter<any>, extensionDefinitions: AdapterExtensionDefinition[], context: ComputedRef<AdapterContext>): Promise<AdaptersProvider>;

package/dist/runtime/editor/providers/adapters.js

@@ -0,0 +1,88 @@
+const NAMESPACE_SEPARATOR = ":";
+export default async function adaptersProvider(adapter, extensionDefinitions, context) {
+  const extensions = await Promise.all(
+    extensionDefinitions.map(async (def) => ({
+      namespace: def.namespace,
+      methods: await Promise.resolve(def.factory(context))
+    }))
+  );
+  const extensionsByNamespace = /* @__PURE__ */ new Map();
+  for (const ext of extensions) {
+    extensionsByNamespace.set(ext.namespace, ext);
+  }
+  function prefixId(namespace, id) {
+    return `${namespace}${NAMESPACE_SEPARATOR}${id}`;
+  }
+  function parseNamespace(id) {
+    const sepIndex = id.indexOf(NAMESPACE_SEPARATOR);
+    if (sepIndex > 0 && id.startsWith("@")) {
+      return [id.substring(0, sepIndex), id.substring(sepIndex + 1)];
+    }
+    return [null, id];
+  }
+  function normalizeToArray(result) {
+    if (Array.isArray(result)) {
+      return result;
+    }
+    if (result !== void 0 && result !== null) {
+      return [result];
+    }
+    return [];
+  }
+  async function getAggregated(methodName) {
+    const results = [];
+    const baseMethod = adapter[methodName];
+    if (typeof baseMethod === "function") {
+      const baseResults = await baseMethod.call(adapter);
+      results.push(...normalizeToArray(baseResults));
+    }
+    for (const ext of extensions) {
+      const extMethod = ext.methods[methodName];
+      if (typeof extMethod === "function") {
+        const extResults = await extMethod();
+        results.push(
+          ...normalizeToArray(extResults).map((item) => {
+            if (item && typeof item === "object" && "id" in item) {
+              return { ...item, id: prefixId(ext.namespace, item.id) };
+            }
+            return item;
+          })
+        );
+      }
+    }
+    return results;
+  }
+  async function callNamespaced(methodName, args) {
+    const [namespace, localId] = parseNamespace(args.pluginId);
+    if (namespace) {
+      const ext = extensionsByNamespace.get(namespace);
+      if (!ext) {
+        throw new Error(
+          `No adapter extension found for namespace: ${namespace}`
+        );
+      }
+      const method = ext.methods[methodName];
+      if (typeof method !== "function") {
+        throw new Error(
+          `Extension ${namespace} does not implement ${String(methodName)}`
+        );
+      }
+      return method({ ...args, pluginId: localId });
+    }
+    const baseMethod = adapter[methodName];
+    if (typeof baseMethod !== "function") {
+      throw new Error(`Base adapter does not implement ${String(methodName)}`);
+    }
+    return baseMethod.call(adapter, args);
+  }
+  function getExtension(namespace) {
+    return extensionsByNamespace.get(namespace);
+  }
+  return {
+    adapter,
+    extensions,
+    getAggregated,
+    callNamespaced,
+    getExtension
+  };
+}

package/dist/runtime/editor/providers/animation.js

@@ -328,6 +328,9 @@ export default function(eventBus, ui, storage, selection, debug, keyboard) {
     }
   );
   useAnimationFrame((time) => {
+    if (ui.hasNestedEditorOpen.value) {
+      return;
+    }
     const selectedUuids = [...selection.uuids.value];
     const changeOptionsTransition = getChangeOptionsTransition();
     if (iterator < 1) {

package/dist/runtime/editor/providers/definition.d.ts

@@ -50,6 +50,13 @@ export type DefinitionProvider = {
      * @returns The icon name, or undefined if no icon is defined
      */
     getBlockIcon: (bundle: string) => string | undefined;
+    /**
+     * Get the image of a block.
+     *
+     * @param bundle - The block bundle name
+     * @returns The url of the image.
+     */
+    getBlockImage: (bundle: string) => string | undefined;
     /**
      * List of all registered fragment definitions.
      *

package/dist/runtime/editor/providers/definition.js

@@ -7,6 +7,7 @@ export default function() {
   const providers = ref(definitions.providers);
   const renderKey = ref(definitions.renderKey);
   const blockIcons = ref(definitions.icons);
+  const blockImages = ref(definitions.images);
   const allGlobalOptions = ref(
     definitions.globalOptions
   );
@@ -19,6 +20,7 @@ export default function() {
       fragments.value = newDefinitions?.default?.fragments || [];
       providers.value = newDefinitions?.default?.providers || [];
       blockIcons.value = newDefinitions?.default?.icons || {};
+      blockImages.value = newDefinitions?.default?.images || {};
       allGlobalOptions.value = newDefinitions?.default?.globalOptions || {};
     });
     import.meta.hot.accept("#blokkli-build/runtime-options", (mod) => {
@@ -93,6 +95,9 @@ export default function() {
   function getBlockIcon(bundle) {
     return blockIcons.value[bundle];
   }
+  function getBlockImage(bundle) {
+    return blockImages.value[bundle];
+  }
   const bundlesWithAutoAdd = computed(() => {
     return blocks.value.filter((v) => {
       const addBehaviour = v.editor?.addBehaviour ?? "form";
@@ -105,6 +110,7 @@ export default function() {
     getProviderDefinition,
     getDefaultDefinition,
     getBlockIcon,
+    getBlockImage,
     fragmentDefinitions: computed(() => fragments.value),
     blockDefinitions: computed(() => blocks.value),
     globalOptions: readonly(allGlobalOptions),

package/dist/runtime/editor/providers/dom.d.ts

@@ -84,6 +84,13 @@ export type DomProvider = {
      * @returns The registered field data, or undefined if not found
      */
     getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
+    /**
+     * Get all registered fields that allow a specific fragment.
+     *
+     * @param fragmentName - The fragment name to search for
+     * @returns Array of RegisteredField objects that allow the fragment
+     */
+    getFieldsAllowingFragment: (fragmentName: string) => RegisteredField[];
     /**
      * List of unique field types currently registered.
      *

package/dist/runtime/editor/providers/dom.js

@@ -188,6 +188,17 @@ export default function(ui, debug, state, element) {
     const key = `${uuid}:${fieldName}`;
     return registeredFields[key];
   };
+  const getFieldsAllowingFragment = (fragmentName) => {
+    const results = [];
+    for (const field of Object.values(registeredFields)) {
+      if (field && field.allowedFragments.includes(
+        fragmentName
+      )) {
+        results.push(field);
+      }
+    }
+    return results;
+  };
   const getDropElementMarkup = (item, checkSize) => {
     const getElement = () => {
       if ("itemType" in item) {
@@ -513,6 +524,7 @@ export default function(ui, debug, state, element) {
     registeredBlockUuids,
     getDebugData,
     getRegisteredField,
+    getFieldsAllowingFragment,
     registeredBlocks: computed(() => registeredBlocks),
     getBoundingClientRect
   };

package/dist/runtime/editor/providers/permissions.d.ts

@@ -0,0 +1,6 @@
+import type { BlokkliAdapter } from '#blokkli/editor/adapter';
+import type { UserPermissions } from '../types/permissions.js';
+export type PermissionsProvider = {
+    hasPermission: (permission: UserPermissions) => boolean;
+};
+export default function (adapter: BlokkliAdapter<any>): Promise<PermissionsProvider>;

package/dist/runtime/editor/providers/permissions.js

@@ -0,0 +1,9 @@
+export default async function(adapter) {
+  const permissionsArray = await adapter.getUserPermissions();
+  function hasPermission(permission) {
+    return permissionsArray.includes(permission);
+  }
+  return {
+    hasPermission
+  };
+}

package/dist/runtime/editor/providers/plugin.d.ts

@@ -11,6 +11,7 @@ export type ItemDropdownAction = {
     bundle?: string;
     weight?: number;
     group: string;
+    variant?: string;
     callback: () => void;
 };
 type ItemDropdownActionFunction = PluginAddFunction<ItemDropdownAction>;

package/dist/runtime/editor/providers/state.js

@@ -301,6 +301,7 @@ export default async function(eventBus, adapter, context, $t, providerKey, permi
       }
       return true;
     } catch (e) {
+      console.log(e);
       if (errorMessage !== false) {
         emitMessage(
           errorMessage || $t("unexpectedMutationError", "An unexpected error happened."),

package/dist/runtime/editor/providers/texts.js

@@ -1,16 +1,30 @@
-import { computed } from "vue";
-import { translations } from "#blokkli-build/translations";
+import { computed, ref } from "vue";
+import {
+  translations
+} from "#blokkli-build/translations";
 import {
   defaultLanguage,
   forceDefaultLanguage
 } from "#blokkli-build/editor-config";
+import { LANGUAGES } from "../../../global/constants";
+function isInterfaceLanguage(value) {
+  return LANGUAGES.includes(value);
+}
 const DEBUG_SWISS_GERMAN = false;
 export default function(context) {
+  const allTranslations = ref(translations);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/translations", (mod) => {
+      if (mod?.translations) {
+        allTranslations.value = mod.translations;
+      }
+    });
+  }
   const language = computed(() => {
     if (forceDefaultLanguage) {
       return defaultLanguage;
     }
-    if (context?.value.language && translations[context.value.language]) {
+    if (context?.value.language && isInterfaceLanguage(context.value.language)) {
       return context.value.language;
     }
     return defaultLanguage;
@@ -19,11 +33,11 @@ export default function(context) {
     const today = /* @__PURE__ */ new Date();
     const isAprilFirst = today.getMonth() === 3 && today.getDate() === 1;
     if (isAprilFirst && language.value === "de" || DEBUG_SWISS_GERMAN && import.meta.dev) {
-      return translations.gsw_CH || translations[language.value] || {};
+      return allTranslations.value.gsw_CH || allTranslations.value[language.value] || {};
     }
-    return translations[language.value] || {};
+    return allTranslations.value[language.value] || {};
   });
   return (key, defaultValue) => {
-    return currentTranslations.value[key] || defaultValue;
+    return currentTranslations.value[key] || defaultValue || key;
   };
 }

package/dist/runtime/editor/providers/types.d.ts

@@ -127,6 +127,13 @@ export type BlockDefinitionProvider = {
      * @returns The bundle definition, or undefined if not found
      */
     getBlockBundleDefinition: (bundle: string) => BlockBundleDefinition | undefined;
+    /**
+     * Get the label of a bundle.
+     *
+     * @param bundle - The block bundle ID (e.g., 'text', 'image')
+     * @returns The label.
+     */
+    getBlockLabel: (bundle: string) => string;
     /**
      * Get the field configuration for a specific field on an entity.
      *

package/dist/runtime/editor/providers/types.js

@@ -120,6 +120,9 @@ export default async function(adapter, selection, context) {
   function getBlockBundleDefinition(bundle) {
     return typeMap[bundle];
   }
+  function getBlockLabel(bundle) {
+    return typeMap[bundle]?.label ?? bundle;
+  }
   function getFieldConfig(entityType, entityBundle, fieldName) {
     return fieldConfig.forName(entityType, entityBundle, fieldName);
   }
@@ -155,6 +158,7 @@ export default async function(adapter, selection, context) {
   return {
     itemBundlesWithNested,
     allowedTypesInList,
+    getBlockLabel,
     getBlockBundleDefinition,
     getDroppableFieldConfig,
     generallyAvailableBundles,

package/dist/runtime/editor/providers/ui.d.ts

@@ -65,6 +65,14 @@ export type UiProvider = {
      * Whether any dialog is currently open.
      */
     hasDialogOpen: ComputedRef<boolean>;
+    /**
+     * Whether a nested editor overlay is currently open.
+     */
+    hasNestedEditorOpen: ComputedRef<boolean>;
+    /**
+     * Set the currently open nested editor.
+     */
+    setNestedEditor: (key: string | null) => void;
     /**
      * The currently open dialog, or null if none is open.
      */
@@ -258,6 +266,33 @@ export type UiProvider = {
      * ```
      */
     formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
+    /**
+     * Format a number using the current locale.
+     *
+     * @param value - The number to format
+     * @param options - Intl.NumberFormat options
+     * @returns Localized number string
+     *
+     * @example
+     * ```ts
+     * formatNumber(12345) // "12'345" (de-CH) or "12,345" (en)
+     * formatNumber(0.5, { style: 'percent' }) // "50%"
+     * ```
+     */
+    formatNumber: (value: number, options?: Intl.NumberFormatOptions) => string;
+    /**
+     * Format a price in USD using the current locale.
+     *
+     * @param value - The price value
+     * @returns Localized currency string
+     *
+     * @example
+     * ```ts
+     * formatPrice(12.5) // "$12.50" (en) or "12.50 $" (de-CH)
+     * formatPrice(0.0042) // "$0.0042"
+     * ```
+     */
+    formatPrice: (value: number) => string;
     /**
      * Get absolute rectangle for an element or rectangle.
      *
@@ -346,5 +381,10 @@ export type UiProvider = {
      * The container element for the primary editor interface.
      */
     mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /**
+     * Whether the canvas is currently focused.
+     */
+    canvasFocused: Readonly<Ref<boolean>>;
+    setCanvasFocused: (isFocused: boolean) => void;
 };
 export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;

package/dist/runtime/editor/providers/ui.js

@@ -32,12 +32,21 @@ export default function(eventBus, providerElement, storage, context, element, ma
     const lang = interfaceLanguage.value;
     return localeMap[lang] || lang;
   });
+  const nestedEditorKey = ref("");
+  const hasNestedEditorOpen = computed(() => !!nestedEditorKey.value);
+  function setNestedEditor(key) {
+    nestedEditorKey.value = key ?? "";
+  }
   const viewportWidth = ref(window.innerWidth);
   const viewportHeight = ref(window.innerHeight);
   const visibleViewportWidth = ref(0);
   const visibleViewportHeight = ref(0);
   const visibleViewportX = ref(0);
   const visibleViewportY = ref(0);
+  const canvasFocused = ref(false);
+  function setCanvasFocused(isFocused) {
+    canvasFocused.value = isFocused;
+  }
   const isProxyMode = ref(false);
   const currentDialog = ref(null);
   const openTooltip = ref("");
@@ -295,6 +304,17 @@ export default function(eventBus, providerElement, storage, context, element, ma
     };
     return dateObj.toLocaleString(locale.value, options || defaultOptions);
   }
+  function formatNumber(value, options) {
+    return value.toLocaleString(locale.value, options);
+  }
+  function formatPrice(value) {
+    return value.toLocaleString(locale.value, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4
+    });
+  }
   addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
   addElementClasses(
     document.documentElement,
@@ -383,6 +403,8 @@ export default function(eventBus, providerElement, storage, context, element, ma
     interfaceLanguage,
     locale,
     formatDate,
+    formatNumber,
+    formatPrice,
     hasDialogOpen,
     hasTransformOverlayOpen,
     hasTooltipOpen,
@@ -401,6 +423,10 @@ export default function(eventBus, providerElement, storage, context, element, ma
     closeDialog,
     currentDialog: readonly(currentDialog),
     requireDialogCloseConfirm,
-    toArtboardCoords
+    toArtboardCoords,
+    hasNestedEditorOpen,
+    setNestedEditor,
+    setCanvasFocused,
+    canvasFocused: readonly(canvasFocused)
   };
 }