@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -0,0 +1,64 @@
+import { type ComputedRef, type WritableComputedRef } from '#imports';
+import type { AdapterContext, BlokkliAdapter } from '#blokkli/editor/adapter';
+export type StorageProvider = {
+    /**
+     * Create a reactive storage value synced to localStorage.
+     *
+     * The value is automatically persisted to localStorage on change.
+     * Can optionally be synced to user settings on the server.
+     *
+     * @param key - Storage key (will be prefixed with 'blokkli:')
+     * @param defaultValue - Default value if no stored value exists
+     * @param persist - Whether to sync to server user settings (default: false)
+     * @returns Reactive writable computed ref synced to storage
+     *
+     * @example
+     * ```ts
+     * const showGrid = storage.use('showGrid', false)
+     * showGrid.value = true // Automatically saved to localStorage
+     * ```
+     */
+    use: <T>(key: string | ComputedRef<string>, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
+    /**
+     * Create a reactive storage value with entity context prefix.
+     *
+     * Same as `use()` but automatically prefixes the key with entity type and UUID.
+     * Useful for entity-specific settings (e.g., sidebar state per page).
+     *
+     * @param key - Storage key (will be prefixed with context)
+     * @param defaultValue - Default value if no stored value exists
+     * @param persist - Whether to sync to server user settings (default: false)
+     * @returns Reactive writable computed ref synced to storage
+     *
+     * @example
+     * ```ts
+     * // If context is node:abc123, key becomes 'sidebarOpen:node:abc123'
+     * const sidebarOpen = storage.useWithContextPrefix('sidebarOpen', false)
+     * ```
+     */
+    useWithContextPrefix: <T>(key: string, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
+    /**
+     * Clear all blokkli storage values.
+     *
+     * Removes all localStorage entries starting with 'blokkli:' prefix.
+     * Does not affect server user settings.
+     */
+    clearAll: () => void;
+    /**
+     * Clear a specific storage value.
+     *
+     * Removes the value from localStorage (without prefix).
+     *
+     * @param key - The storage key to clear (without 'blokkli:' prefix)
+     */
+    clear: (key: string) => void;
+};
+/**
+ * Create a reactive variable that is synced to local storage using the
+ * given key. The sync only happens client side and after the component
+ * has been mounted.
+ *
+ * This composable can be used to keep state across page navigations and
+ * even after a refresh.
+ */
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>): Promise<StorageProvider>;

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

@@ -0,0 +1,118 @@
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "#imports";
+import { storageDefaults } from "#blokkli-build/editor-config";
+const PREFIX = "blokkli:";
+const getExisting = (key) => {
+  try {
+    const value = localStorage.getItem(key);
+    if (value) {
+      return JSON.parse(value);
+    }
+  } catch {
+  }
+};
+export default async function(adapter, context) {
+  const values = ref({});
+  const defaults = ref({});
+  let timeout = null;
+  const persistableKeys = ref([]);
+  onBeforeUnmount(() => {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+  });
+  const persistedValues = adapter.userSettings ? await adapter.userSettings.load().then((v) => {
+    if (typeof v === "object" && v !== null) {
+      return JSON.stringify(v);
+    }
+    return v;
+  }) : null;
+  if (persistedValues) {
+    values.value = JSON.parse(persistedValues);
+  }
+  const persistableData = computed(() => {
+    const mapped = [...persistableKeys.value].sort().reduce((acc, key) => {
+      const value = values.value[key];
+      if (value !== void 0) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+    return JSON.stringify(mapped);
+  });
+  function persistUserSettings() {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+    timeout = window.setTimeout(async () => {
+      if (!adapter.userSettings) {
+        return;
+      }
+      if (persistableData.value === persistedValues) {
+        return;
+      }
+      await adapter.userSettings.persist(persistableData.value);
+    }, 1e3);
+  }
+  if (adapter.userSettings) {
+    watch(persistableData, persistUserSettings);
+  }
+  const use = (key, providedDefaultValue, persist) => {
+    const storageKey = computed(
+      () => PREFIX + (typeof key === "string" ? key : key.value)
+    );
+    const storageDefaultsValue = storageDefaults[typeof key === "string" ? key : key.value];
+    const defaultValue = storageDefaultsValue && typeof storageDefaultsValue === typeof providedDefaultValue ? storageDefaultsValue : providedDefaultValue;
+    if (!defaults.value[storageKey.value]) {
+      defaults.value[storageKey.value] = defaultValue;
+    }
+    if (values.value[storageKey.value] === void 0) {
+      const existing = getExisting(storageKey.value);
+      if (existing !== void 0) {
+        values.value[storageKey.value] = existing;
+      } else {
+        values.value[storageKey.value] = defaultValue;
+      }
+    }
+    if (persist) {
+      if (!persistableKeys.value.includes(storageKey.value)) {
+        persistableKeys.value.push(storageKey.value);
+      }
+    }
+    return computed({
+      get() {
+        const v = values.value[storageKey.value];
+        if (v === void 0) {
+          return defaults.value[storageKey.value];
+        }
+        return v;
+      },
+      set(newValue) {
+        values.value[storageKey.value] = newValue;
+        window.localStorage.setItem(storageKey.value, JSON.stringify(newValue));
+      }
+    });
+  };
+  const useWithContextPrefix = (key, providedDefaultValue, persist) => {
+    const fullKey = key + ":" + context.value.entityType + ":" + context.value.entityUuid;
+    return use(fullKey, providedDefaultValue, persist);
+  };
+  const clearAll = () => {
+    values.value = {};
+    Object.keys(window.localStorage).forEach((key) => {
+      if (key.startsWith(PREFIX)) {
+        window.localStorage.removeItem(key);
+      }
+    });
+  };
+  const clear = (key) => {
+    const storageKey = PREFIX + key;
+    values.value[storageKey] = void 0;
+    window.localStorage.removeItem(storageKey);
+  };
+  return { use, useWithContextPrefix, clearAll, clear };
+}

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

@@ -0,0 +1,4 @@
+import { type ComputedRef } from 'vue';
+import type { AdapterContext } from '../adapter/index.js';
+export type TextProvider = (key: string, defaultValue?: string) => string;
+export default function (context?: ComputedRef<AdapterContext>): TextProvider;

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

@@ -0,0 +1,29 @@
+import { computed } from "vue";
+import { translations } from "#blokkli-build/translations";
+import {
+  defaultLanguage,
+  forceDefaultLanguage
+} from "#blokkli-build/editor-config";
+const DEBUG_SWISS_GERMAN = false;
+export default function(context) {
+  const language = computed(() => {
+    if (forceDefaultLanguage) {
+      return defaultLanguage;
+    }
+    if (context?.value.language && translations[context.value.language]) {
+      return context.value.language;
+    }
+    return defaultLanguage;
+  });
+  const currentTranslations = computed(() => {
+    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 translations[language.value] || {};
+  });
+  return (key, defaultValue) => {
+    return currentTranslations.value[key] || defaultValue;
+  };
+}

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

@@ -0,0 +1,119 @@
+import type { RGB, ThemeColorGroup, ThemeColorShade, ThemeColors, ThemeContextColorGroup, ThemeContextColorShade, ThemeContextColors, ThemeName } from './../../../global/types/theme.js';
+import { type Ref } from '#imports';
+import type { ElementProvider } from './element.js';
+import type { DraggableStyle } from '../types/style.js';
+type ThemeMap = {
+    accent: Ref<ThemeColors>;
+    mono: Ref<ThemeColors>;
+    teal: Ref<ThemeContextColors>;
+    yellow: Ref<ThemeContextColors>;
+    red: Ref<ThemeContextColors>;
+    lime: Ref<ThemeContextColors>;
+    orange: Ref<ThemeContextColors>;
+};
+export type ThemeProvider = {
+    /**
+     * Accent color palette (primary brand color).
+     *
+     * Available shades: 50-950
+     */
+    accent: Ref<ThemeColors>;
+    /**
+     * Monochrome color palette (grays).
+     *
+     * Available shades: 50-950
+     */
+    mono: Ref<ThemeColors>;
+    /**
+     * Teal context color palette.
+     *
+     * Available shades: bg, fg, fgHover, bgHover
+     */
+    teal: Ref<ThemeContextColors>;
+    /**
+     * Yellow context color palette.
+     *
+     * Available shades: bg, fg, fgHover, bgHover
+     */
+    yellow: Ref<ThemeContextColors>;
+    /**
+     * Red context color palette.
+     *
+     * Available shades: bg, fg, fgHover, bgHover
+     */
+    red: Ref<ThemeContextColors>;
+    /**
+     * Lime context color palette.
+     *
+     * Available shades: bg, fg, fgHover, bgHover
+     */
+    lime: Ref<ThemeContextColors>;
+    /**
+     * Orange context color palette.
+     *
+     * Available shades: bg, fg, fgHover, bgHover
+     */
+    orange: Ref<ThemeContextColors>;
+    /**
+     * Get the draggable style for an element.
+     *
+     * Computes and caches the visual style to use when dragging this element.
+     * Includes background color, text color, and border radius.
+     *
+     * @param el - The element to get style for
+     * @returns The draggable style configuration
+     */
+    getDraggableStyle: (el: HTMLElement | SVGElement) => DraggableStyle;
+    /**
+     * Set a theme color value.
+     *
+     * Updates both the reactive ref and the CSS custom property on :root.
+     *
+     * @param group - The color group (accent, mono, teal, etc.)
+     * @param shade - The shade (50-950 for accent/mono, bg/fg/etc for context colors)
+     * @param value - RGB color as [r, g, b] array
+     */
+    setColor: <Group extends ThemeColorGroup | ThemeContextColorGroup>(group: Group, shade: Group extends ThemeColorGroup ? ThemeColorShade : ThemeContextColorShade, value: RGB) => void;
+    /**
+     * Apply a theme by name.
+     *
+     * Replaces all theme colors with the selected theme.
+     * Use 'custom' to restore previously customized colors.
+     *
+     * @param name - Theme name or 'custom' for customized theme
+     */
+    applyTheme: (name: ThemeName | 'custom') => void;
+    /**
+     * Invalidate cached style for an element.
+     *
+     * Forces recalculation of draggable style next time it's requested.
+     * Useful when element styling changes dynamically.
+     *
+     * @param el - The element to invalidate
+     */
+    invalidateCachedStyle: (el: HTMLElement | SVGElement) => void;
+    /**
+     * Get an RGB color value from the theme.
+     *
+     * @param color - The color group
+     * @param key - The shade key
+     * @returns RGB color as [r, g, b] array
+     */
+    getColor<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T): RGB;
+    /**
+     * Get a color as an rgba() CSS string.
+     *
+     * @param color - The color group
+     * @param key - The shade key
+     * @param alpha - Optional alpha value (0-1, default: 1)
+     * @returns CSS rgba() string
+     *
+     * @example
+     * ```ts
+     * theme.getColorString('accent', 700, 0.5) // 'rgba(59, 130, 246, 0.5)'
+     * ```
+     */
+    getColorString<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T, alpha?: number): string;
+};
+export default function (element: ElementProvider): ThemeProvider;
+export {};

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

@@ -0,0 +1,140 @@
+import { theme, themes } from "#blokkli-build/editor-config";
+import { ref, onMounted, onBeforeUnmount } from "#imports";
+import { rgbaToString } from "#blokkli/editor/helpers/color";
+import { DragStyle } from "../helpers/dragStyle/index.js";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+export default function(element) {
+  const rootElement = element.query(
+    document,
+    ":root",
+    "Get document root element for setting theme color."
+  );
+  if (!rootElement) {
+    throw new Error("Failed to query :root - is this even possible?");
+  }
+  const originalBrowserThemeColor = ref("");
+  const THEME_COLOR = "black";
+  const accent = ref(theme.accent);
+  const mono = ref(theme.mono);
+  const teal = ref(theme.teal);
+  const yellow = ref(theme.yellow);
+  const red = ref(theme.red);
+  const lime = ref(theme.lime);
+  const orange = ref(theme.orange);
+  const themeMap = {
+    accent,
+    mono,
+    teal,
+    yellow,
+    red,
+    lime,
+    orange
+  };
+  function getColor(color, key) {
+    return themeMap[color].value[key];
+  }
+  function getColorString(color, key, alpha = 1) {
+    const rgb = getColor(color, key);
+    return rgbaToString(rgb, alpha);
+  }
+  const customTheme = ref(theme);
+  const setColor = (group, shade, value) => {
+    if (group === "accent") {
+      accent.value[shade] = value;
+    } else if (group === "mono") {
+      mono.value[shade] = value;
+    } else if (group === "teal") {
+      teal.value[shade] = value;
+    } else if (group === "red") {
+      red.value[shade] = value;
+    } else if (group === "yellow") {
+      yellow.value[shade] = value;
+    } else if (group === "lime") {
+      lime.value[shade] = value;
+    }
+    rootElement.style.setProperty(
+      `--bk-theme-${group}-${shade}`,
+      `${value[0]} ${value[1]} ${value[2]}`
+    );
+  };
+  const setColorsFromTheme = (v) => {
+    Object.entries(v).forEach(([group, colors]) => {
+      Object.entries(colors).forEach(([shade, value]) => {
+        setColor(group, shade, value);
+      });
+    });
+  };
+  const applyTheme = (name) => {
+    customTheme.value = JSON.parse(
+      JSON.stringify({
+        accent: accent.value,
+        mono: mono.value,
+        teal: teal.value,
+        yellow: yellow.value,
+        red: red.value,
+        lime: lime.value
+      })
+    );
+    if (name === "custom") {
+      return setColorsFromTheme(customTheme.value);
+    }
+    const themeToApply = themes[name];
+    if (themeToApply) {
+      setColorsFromTheme(themeToApply);
+    }
+  };
+  onMounted(() => {
+    const el = element.query(
+      document.head,
+      '[name="theme-color"]',
+      "Theme: theme-color"
+    );
+    if (el instanceof HTMLMetaElement) {
+      originalBrowserThemeColor.value = el.content;
+      el.content = THEME_COLOR;
+    } else {
+      const meta = document.createElement("meta");
+      meta.name = "theme-color";
+      meta.content = THEME_COLOR;
+      document.head.appendChild(meta);
+    }
+  });
+  onBeforeUnmount(() => {
+    const el = element.query(
+      document.head,
+      '[name="theme-color"]',
+      "Theme: theme-color"
+    );
+    if (el instanceof HTMLMetaElement) {
+      if (originalBrowserThemeColor.value) {
+        el.content = originalBrowserThemeColor.value;
+      } else {
+        el.remove();
+      }
+    }
+  });
+  const dragStyle = new DragStyle();
+  function invalidateCachedStyle(el) {
+    dragStyle.invalidateStyle(el);
+  }
+  onBlokkliEvent("state:reloaded", function() {
+    dragStyle.reset();
+  });
+  return {
+    accent,
+    mono,
+    teal,
+    yellow,
+    red,
+    lime,
+    orange,
+    getDraggableStyle: function(el) {
+      return dragStyle.getStyle(el, theme.accent[700]);
+    },
+    invalidateCachedStyle,
+    setColor,
+    applyTheme,
+    getColor,
+    getColorString
+  };
+}

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

@@ -0,0 +1,49 @@
+import { type Ref } from '#imports';
+import type { TourItem } from '../features/tour/types.js';
+type TourProviderFunction = () => TourItem[] | TourItem | undefined;
+export type TourProvider = {
+    /**
+     * Register a tour provider function.
+     *
+     * The function will be called when tour items are requested.
+     * It can return a single tour item, an array of tour items, or undefined.
+     *
+     * @param fn - Function that returns tour item(s)
+     *
+     * @example
+     * ```ts
+     * tour.add(() => ({
+     *   id: 'welcome',
+     *   title: 'Welcome',
+     *   text: 'Welcome to the editor!',
+     *   element: '.bk-main-canvas',
+     * }))
+     * ```
+     */
+    add: (fn: TourProviderFunction) => void;
+    /**
+     * Unregister a tour provider function.
+     *
+     * Removes a previously registered function so it no longer provides tour items.
+     *
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove: (fn: TourProviderFunction) => void;
+    /**
+     * Get all tour items from all registered providers.
+     *
+     * Calls all registered provider functions, flattens the results,
+     * and filters out undefined values.
+     *
+     * @returns Array of all available tour items
+     */
+    getTourItems: () => TourItem[];
+    /**
+     * Whether a tour is currently active.
+     *
+     * Set to true when a tour starts, false when it ends.
+     */
+    isTouring: Ref<boolean>;
+};
+export default function (): TourProvider;
+export {};

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

@@ -0,0 +1,19 @@
+import { falsy } from "../../helpers/index.js";
+import { ref } from "#imports";
+export default function() {
+  let functions = [];
+  const isTouring = ref(false);
+  const add = (fn) => {
+    functions.push(fn);
+  };
+  const remove = (fn) => {
+    functions = functions.filter((v) => v !== fn);
+  };
+  const getTourItems = () => functions.flatMap((fn) => fn()).filter(falsy);
+  return {
+    add,
+    remove,
+    getTourItems,
+    isTouring
+  };
+}