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

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

@@ -1,118 +0,0 @@
-import {
-  computed,
-  onBeforeUnmount,
-  ref,
-  watch
-} from "#imports";
-import { storageDefaults } from "#blokkli-build/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/helpers/providers/texts.d.ts

@@ -1,4 +0,0 @@
-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/helpers/providers/texts.js

@@ -1,26 +0,0 @@
-import { computed } from "vue";
-import { translations } from "#blokkli-build/translations";
-import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/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/helpers/providers/theme.d.ts

@@ -1,119 +0,0 @@
-import type { DraggableStyle } from '#blokkli/types';
-import type { RGB, ThemeColorGroup, ThemeColorShade, ThemeColors, ThemeContextColorGroup, ThemeContextColorShade, ThemeContextColors, ThemeName } from '#blokkli/types/theme';
-import { type Ref } from '#imports';
-import type { ElementProvider } from './element.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/helpers/providers/theme.js

@@ -1,140 +0,0 @@
-import { theme, themes } from "#blokkli-build/config";
-import { ref, onMounted, onBeforeUnmount } from "#imports";
-import { rgbaToString } from "../index.js";
-import { DragStyle } from "../DragStyle/index.js";
-import onBlokkliEvent from "../composables/onBlokkliEvent.js";
-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/helpers/providers/tour.d.ts

@@ -1,49 +0,0 @@
-import type { TourItem } from '#blokkli/types';
-import { type Ref } from '#imports';
-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/helpers/providers/tour.js

@@ -1,19 +0,0 @@
-import { falsy } from "../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
-  };
-}

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

@@ -1,170 +0,0 @@
-import type { ComputedRef } from 'vue';
-import type { FieldConfig, BlockBundleDefinition, EditableFieldConfig, BlockDefinitionInput, BlockDefinitionOptionsInput, DroppableFieldConfig, DraggableExistingBlock, EntityContext } from '../../types/index.js';
-import type { AdapterContext, BlokkliAdapter } from '../../adapter/index.js';
-import type { SelectionProvider } from './selection.js';
-export type BlokkliBlockType = BlockBundleDefinition & {
-    definition: BlockDefinitionInput<BlockDefinitionOptionsInput, never[]> | undefined;
-};
-/**
- * Base interface for configuration objects that can be mapped by entity context.
- *
- * Used by ConfigMap to organize configuration data by entity type, bundle, and name
- * for efficient lookup.
- */
-interface MappableConfig {
-    /**
-     * The entity type (e.g., 'paragraph', 'node', 'block_content').
-     */
-    entityType: string;
-    /**
-     * The entity bundle (e.g., 'text', 'image', 'article').
-     */
-    entityBundle: string;
-    /**
-     * The configuration name (typically a field name like 'field_paragraphs').
-     */
-    name: string;
-}
-/**
- * Efficient lookup map for configuration objects organized by entity context.
- *
- * Provides O(1) lookups by entity type, entity type + bundle, and
- * entity type + bundle + name combinations. Used for field configurations,
- * editable field configurations, and droppable field configurations.
- *
- * @template T - Configuration type extending MappableConfig
- */
-declare class ConfigMap<T extends MappableConfig> {
-    private configs;
-    private mapEntityType;
-    private mapEntityTypeBundle;
-    private mapEntityTypeBundleName;
-    constructor(items: T[]);
-    /**
-     * Get all configurations for a specific entity type.
-     *
-     * @param entityType - The entity type to filter by
-     * @returns Array of matching configurations
-     *
-     * @example
-     * ```ts
-     * // Get all field configs for paragraph entities
-     * const paragraphFields = fieldConfig.forEntityType('paragraph')
-     * ```
-     */
-    forEntityType(entityType: string): T[];
-    /**
-     * Get all configurations for a specific entity type and bundle combination.
-     *
-     * @param entityType - The entity type
-     * @param entityBundle - The entity bundle
-     * @returns Array of matching configurations
-     *
-     * @example
-     * ```ts
-     * // Get all field configs for text paragraph bundle
-     * const textFields = fieldConfig.forEntityTypeAndBundle('paragraph', 'text')
-     * ```
-     */
-    forEntityTypeAndBundle(entityType: string, entityBundle: string): T[];
-    /**
-     * Get a specific configuration by entity type, bundle, and name.
-     *
-     * @param entityType - The entity type
-     * @param entityBundle - The entity bundle
-     * @param name - The configuration name (typically field name)
-     * @returns The matching configuration, or undefined if not found
-     *
-     * @example
-     * ```ts
-     * // Get field config for specific field on text paragraph
-     * const config = fieldConfig.forName('paragraph', 'text', 'field_items')
-     * ```
-     */
-    forName(entityType: string, entityBundle: string, name: string): T | undefined;
-    /**
-     * Get all configurations.
-     *
-     * @returns Array of all configurations in the map
-     */
-    all(): T[];
-}
-export type BlockDefinitionProvider = {
-    /**
-     * List of block bundles that contain nested blocks.
-     *
-     * A bundle is included if it has any field configurations
-     * where it can contain other blocks.
-     */
-    itemBundlesWithNested: string[];
-    /**
-     * Allowed block types in the currently selected list.
-     *
-     * Computed based on the parent field of selected blocks.
-     * Returns empty array if:
-     * - No blocks are selected
-     * - Selected blocks are in different fields
-     */
-    allowedTypesInList: ComputedRef<string[]>;
-    /**
-     * Block bundles that can be used somewhere in the current context.
-     *
-     * Includes bundles allowed:
-     * - Directly on the current entity
-     * - In nested blocks allowed on the current entity
-     *
-     * Used for add dialogs, library, and other "available blocks" UIs.
-     */
-    generallyAvailableBundles: BlockBundleDefinition[];
-    /**
-     * Get the bundle definition for a specific block type.
-     *
-     * @param bundle - The block bundle ID (e.g., 'text', 'image')
-     * @returns The bundle definition, or undefined if not found
-     */
-    getBlockBundleDefinition: (bundle: string) => BlockBundleDefinition | undefined;
-    /**
-     * Get the field configuration for a specific field on an entity.
-     *
-     * Field configurations define allowed bundles, cardinality, and other
-     * field-level settings.
-     *
-     * @param entityType - The entity type
-     * @param entityBundle - The entity bundle
-     * @param fieldName - The field name
-     * @returns The field configuration, or undefined if not found
-     */
-    getFieldConfig: (entityType: string, entityBundle: string, fieldName: string) => FieldConfig | undefined;
-    /**
-     * Map of all field configurations.
-     *
-     * Provides efficient lookups by entity type, bundle, and field name.
-     */
-    fieldConfig: ConfigMap<FieldConfig>;
-    /**
-     * Map of editable field configurations.
-     *
-     * Defines which fields support inline editing and their configuration.
-     */
-    editableFieldConfig: ConfigMap<EditableFieldConfig>;
-    /**
-     * Map of droppable field configurations.
-     *
-     * Defines which fields can accept dropped blocks and their behavior.
-     */
-    droppableFieldConfig: ConfigMap<DroppableFieldConfig>;
-    /**
-     * Get droppable field configuration for a field on a host.
-     *
-     * Throws an error if configuration is not found, as droppable fields
-     * should always have configuration when accessed.
-     *
-     * @param fieldName - The field name
-     * @param host - The host block or entity context
-     * @returns The droppable field configuration
-     * @throws Error if configuration not found
-     */
-    getDroppableFieldConfig: (fieldName: string, host: DraggableExistingBlock | EntityContext) => DroppableFieldConfig;
-};
-export default function (adapter: BlokkliAdapter<any>, selection: SelectionProvider, context: ComputedRef<AdapterContext>): Promise<BlockDefinitionProvider>;
-export {};