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

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -57,31 +57,37 @@
   "license": "MIT",
   "dependencies": {
     "@types/micromatch": "^4.0.9",
-    "artboard-deluxe": "^0.1.1",
+    "artboard-deluxe": "^0.1.2",
     "estree-walker-ts": "^1.1.0",
+    "flesch": "^2.0.1",
     "fzf": "^0.5.2",
     "get-video-id": "^4.1.7",
     "html-diff-ts": "^1.4.2",
+    "hyphen": "^1.10.6",
     "mitt": "^3.0.1",
+    "parse-latin": "^7.0.0",
     "qrcode.vue": "^3.6.0",
     "twgl.js": "^7.0.0"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-build-classic": "^44.3.0",
     "@ckeditor/ckeditor5-vue": "^7.3.0",
+    "@lunarisapp/readability": "^1.0.2",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^1.9.0",
-    "@nuxt/kit": "^4.0.3",
+    "@nuxt/kit": "^4.1.2",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.0.3",
+    "@nuxt/schema": "^4.1.2",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "@types/gettext-parser": "^8.0.0",
+    "@types/hyphen": "^1.6.7",
     "@types/node": "^24.3.0",
     "@vue/test-utils": "^2.4.6",
+    "axe-core": "^4.10.3",
     "changelogen": "^0.6.2",
     "cypress": "^15.0.0",
     "eslint": "^9.33.0",
@@ -89,10 +95,11 @@
     "eslint-plugin-tailwindcss": "^3.18.2",
     "gettext-parser": "^8.0.0",
     "happy-dom": "^18.0.1",
-    "nuxt": "^4.0.3",
+    "nuxt": "^4.1.2",
     "nuxt-graphql-middleware": "^5.2.1",
     "nuxt-svg-icon-sprite": "^2.0.2",
     "openai": "^5.13.1",
+    "oxc-walker": "^0.5.2",
     "playwright-core": "^1.55.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -109,5 +116,13 @@
     "vitepress": "^1.6.4",
     "vitest": "^3.2.4",
     "vue-tsc": "^2.2.12"
+  },
+  "peerDependencies": {
+    "@lunarisapp/readability": "^1.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@lunarisapp/readability": {
+      "optional": true
+    }
   }
 }

package/dist/runtime/components/Edit/Features/FieldAreas/Overlay/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div v-show="!selection.isDragging.value" class="bk">
-    <div
-      v-for="area in areas"
-      :key="area.key"
-      class="bk-field-area"
-      :style="area.style"
-      :class="{ 'bk-is-active': area.key === selection.activeFieldKey.value }"
-      @click="eventBus.emit('setActiveFieldKey', area.key)"
-    >
-      <div>
-        <span>{{ area.label }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, useBlokkli } from "#imports";
-const { eventBus, selection } = useBlokkli();
-const areas = ref([]);
-</script>

package/dist/runtime/components/Edit/Features/FieldAreas/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <PluginViewOption
-    id="fieldAreas"
-    v-slot="{ isActive }"
-    :label="$t('fieldAreasToggle', 'Toggle block fields')"
-    :title-on="$t('fieldAreasShow', 'Show block fields')"
-    :title-off="$t('fieldAreasHide', 'Hide block fields')"
-    :tour-text="
-  $t(
-    'fieldAreasTourText',
-    'Toggle between showing or hiding the areas where blocks can be placed.'
-  )
-"
-    icon="area"
-    key-code="I"
-  >
-    <Teleport v-if="isActive" to="body">
-      <Overlay />
-    </Teleport>
-  </PluginViewOption>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import Overlay from "./Overlay/index.vue";
-import { PluginViewOption } from "#blokkli/plugins";
-defineBlokkliFeature({
-  id: "field-areas",
-  label: "Field Areas",
-  icon: "area",
-  description: "Provides a view option to render the field areas with labels.",
-  viewports: ["desktop"]
-});
-const { $t } = useBlokkli();
-</script>
-
-<script>
-export default {
-  name: "FieldAreas"
-};
-</script>