@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

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

@@ -0,0 +1,119 @@
+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/{themeProvider.js → providers/theme.js}

@@ -1,8 +1,8 @@
 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";
+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,

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

@@ -0,0 +1,49 @@
+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/{tourProvider.js → providers/tour.js}

@@ -1,4 +1,4 @@
-import { falsy } from "./index.js";
+import { falsy } from "../index.js";
 import { ref } from "#imports";
 export default function() {
   let functions = [];

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

@@ -0,0 +1,170 @@
+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 {};

package/dist/runtime/helpers/{typesProvider.js → providers/types.js}

@@ -1,5 +1,5 @@
 import { useRuntimeConfig, computed } from "#imports";
-import { onlyUnique } from "./index.js";
+import { onlyUnique } from "../index.js";
 class ConfigMap {
   configs = [];
   mapEntityType = {};
@@ -29,15 +29,59 @@ class ConfigMap {
       this.mapEntityTypeBundleName[item.entityType][item.entityBundle][item.name] = item;
     }
   }
+  /**
+   * 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) {
     return this.mapEntityType[entityType] || [];
   }
+  /**
+   * 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, entityBundle) {
     return this.mapEntityTypeBundle[entityType]?.[entityBundle] || [];
   }
+  /**
+   * 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, entityBundle, name) {
     return this.mapEntityTypeBundleName[entityType]?.[entityBundle]?.[name];
   }
+  /**
+   * Get all configurations.
+   *
+   * @returns Array of all configurations in the map
+   */
   all() {
     return this.configs;
   }