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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, addTypeTemplate, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
+import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, useLogger, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
 import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
@@ -10,12 +10,12 @@ import path, { basename } from 'node:path';
 import { dirname, relative } from 'pathe';
 import micromatch from 'micromatch';
 import { hash } from 'ohash';
-import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helpers/symbols.js';
-import fs from 'node:fs';
+import fs, { readFileSync, existsSync } from 'node:fs';
+import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from './global/constants';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.27";
+const version = "2.0.0-alpha.29";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -113,6 +113,9 @@ function extractObjectLiteral(fileContents, composables) {
   }
   return void 0;
 }
+function onlyUnique(value, index, self) {
+  return self.indexOf(value) === index;
+}
 
 class CollectedFile {
   constructor(filePath, fileContents) {
@@ -122,6 +125,13 @@ class CollectedFile {
   async handleChange(_helper) {
     return Promise.resolve(true);
   }
+  /**
+   * Validate the collected file and return any errors.
+   * Override this method in subclasses to add validation logic.
+   */
+  validate() {
+    return [];
+  }
 }
 class Collector {
   constructor(helper) {
@@ -200,6 +210,56 @@ class Collector {
     }
     return { hasChanged };
   }
+  /**
+   * Validate all collected files and log any errors/warnings to the console.
+   * @returns true if there are validation errors (not warnings), false otherwise.
+   */
+  validate() {
+    const allIssues = [];
+    for (const file of this.files.values()) {
+      const issues = file.validate();
+      if (issues.length > 0) {
+        allIssues.push({ filePath: file.filePath, issues });
+      }
+    }
+    if (allIssues.length === 0) {
+      return false;
+    }
+    const errors = [];
+    const warnings = [];
+    for (const { filePath, issues } of allIssues) {
+      const fileErrors = issues.filter((i) => i.severity !== "warning");
+      const fileWarnings = issues.filter((i) => i.severity === "warning");
+      if (fileErrors.length > 0) {
+        errors.push({ filePath, issues: fileErrors });
+      }
+      if (fileWarnings.length > 0) {
+        warnings.push({ filePath, issues: fileWarnings });
+      }
+    }
+    if (warnings.length > 0) {
+      const lines = warnings.flatMap(({ filePath, issues }) => [
+        `  ${filePath}:`,
+        ...issues.map((e) => `    - ${e.message}`)
+      ]);
+      this.helper.logger.warn(
+        `bl\xF6kkli validation warnings:
+${lines.join("\n")}`
+      );
+    }
+    if (errors.length > 0) {
+      const lines = errors.flatMap(({ filePath, issues }) => [
+        `  ${filePath}:`,
+        ...issues.map((e) => `    - ${e.message}`)
+      ]);
+      this.helper.logger.error(
+        `bl\xF6kkli validation errors:
+${lines.join("\n")}`
+      );
+      return true;
+    }
+    return false;
+  }
 }
 
 const DEFINE_BLOKKLI = "defineBlokkli";
@@ -254,6 +314,135 @@ function getIdentifier(definition) {
     )
   );
 }
+function validateOption(optionKey, option) {
+  const errors = [];
+  switch (option.type) {
+    case "radios": {
+      const defaultValue = option.default;
+      const availableOptions = option.options;
+      if (availableOptions && typeof availableOptions === "object" && defaultValue !== void 0) {
+        const optionKeys = Object.keys(availableOptions);
+        if (!optionKeys.includes(defaultValue)) {
+          errors.push({
+            message: `Option "${optionKey}" has default value "${defaultValue}" which is not one of the available options: ${optionKeys.map((k) => `"${k}"`).join(", ")}`,
+            optionKey
+          });
+        }
+      }
+      break;
+    }
+    case "checkboxes": {
+      const defaultValues = option.default;
+      const availableOptions = option.options;
+      if (Array.isArray(defaultValues) && availableOptions && typeof availableOptions === "object") {
+        const optionKeys = Object.keys(availableOptions);
+        for (const value of defaultValues) {
+          if (!optionKeys.includes(value)) {
+            errors.push({
+              message: `Option "${optionKey}" has default value "${value}" which is not one of the available options: ${optionKeys.map((k) => `"${k}"`).join(", ")}`,
+              optionKey
+            });
+          }
+        }
+      }
+      break;
+    }
+    case "number":
+    case "range": {
+      const defaultValue = option.default;
+      const min = option.min;
+      const max = option.max;
+      if (typeof defaultValue === "number") {
+        if (typeof min === "number" && defaultValue < min) {
+          errors.push({
+            message: `Option "${optionKey}" has default value ${defaultValue} which is less than the minimum value ${min}`,
+            optionKey
+          });
+        }
+        if (typeof max === "number" && defaultValue > max) {
+          errors.push({
+            message: `Option "${optionKey}" has default value ${defaultValue} which is greater than the maximum value ${max}`,
+            optionKey
+          });
+        }
+      }
+      break;
+    }
+    case "color": {
+      const defaultValue = option.default;
+      if (typeof defaultValue === "string") {
+        const hexColorRegex = /^#[0-9A-F]{6}$/i;
+        if (!hexColorRegex.test(defaultValue)) {
+          errors.push({
+            message: `Option "${optionKey}" has default value "${defaultValue}" which is not a valid hex color (expected format: #RRGGBB)`,
+            optionKey
+          });
+        }
+      }
+      break;
+    }
+    case "datetime-local": {
+      const defaultValue = option.default;
+      const min = option.min;
+      const max = option.max;
+      if (typeof defaultValue === "string") {
+        const defaultDate = new Date(defaultValue);
+        if (Number.isNaN(defaultDate.getTime())) {
+          errors.push({
+            message: `Option "${optionKey}" has default value "${defaultValue}" which is not a valid datetime`,
+            optionKey
+          });
+        } else {
+          if (typeof min === "string") {
+            const minDate = new Date(min);
+            if (!Number.isNaN(minDate.getTime()) && defaultDate < minDate) {
+              errors.push({
+                message: `Option "${optionKey}" has default value "${defaultValue}" which is before the minimum "${min}"`,
+                optionKey
+              });
+            }
+          }
+          if (typeof max === "string") {
+            const maxDate = new Date(max);
+            if (!Number.isNaN(maxDate.getTime()) && defaultDate > maxDate) {
+              errors.push({
+                message: `Option "${optionKey}" has default value "${defaultValue}" which is after the maximum "${max}"`,
+                optionKey
+              });
+            }
+          }
+        }
+      }
+      break;
+    }
+  }
+  return errors;
+}
+function validateBlockDefinition(definition) {
+  const errors = [];
+  if ("options" in definition && definition.options) {
+    const options = definition.options;
+    for (const [optionKey, option] of Object.entries(options)) {
+      if (!option || typeof option !== "object") {
+        continue;
+      }
+      const optionErrors = validateOption(optionKey, option);
+      errors.push(...optionErrors);
+    }
+  }
+  if ("renderFor" in definition && definition.renderFor) {
+    const renderFor = Array.isArray(definition.renderFor) ? definition.renderFor : [definition.renderFor];
+    for (const entry of renderFor) {
+      if ("fieldList" in entry) {
+        errors.push({
+          message: `renderFor uses deprecated "fieldList" property. Use "fieldListType" instead.`,
+          severity: "warning"
+        });
+      }
+    }
+  }
+  return errors;
+}
 class CollectedBlockFile extends CollectedFile {
   folder = "";
   iconPath = null;
@@ -268,6 +457,7 @@ class CollectedBlockFile extends CollectedFile {
   chunkName = "global";
   variations = [];
   objectLiteralString = "";
+  validationCache = null;
   hasSiblingFile(name, helper) {
     const siblingFilePath = path.join(this.folder, "/" + name);
     if (helper.fileCache.fileExists(siblingFilePath)) {
@@ -276,6 +466,7 @@ class CollectedBlockFile extends CollectedFile {
     return null;
   }
   async handleChange(helper) {
+    this.validationCache = null;
     this.folder = dirname(this.filePath);
     const diffComponentPath = this.hasSiblingFile("diff.vue", helper);
     const proxyComponentPath = this.hasSiblingFile("proxy.vue", helper);
@@ -297,6 +488,11 @@ class CollectedBlockFile extends CollectedFile {
         );
         this.definition = result.object;
         this.definitionSource = result.source;
+        if (isBlock(this.definition)) {
+          this.definition.bundle = helper.getMappedBlockBundle(
+            this.definition.bundle
+          );
+        }
       }
     } catch (e) {
       console.log(e);
@@ -334,6 +530,177 @@ class CollectedBlockFile extends CollectedFile {
     this.variations = getVariations(this.definition);
     return true;
   }
+  /**
+   * Validate the block definition and return any errors.
+   * Results are cached and invalidated when the file changes.
+   */
+  validate() {
+    if (this.validationCache !== null) {
+      return this.validationCache;
+    }
+    if (!this.definition) {
+      this.validationCache = [];
+      return this.validationCache;
+    }
+    const errors = validateBlockDefinition(this.definition);
+    if (this.type === "main" && isBlock(this.definition)) {
+      const hasIconFile = !!this.iconPath;
+      const hasEditorIcon = !!(this.definition.editor && "icon" in this.definition.editor && this.definition.editor.icon);
+      if (!hasIconFile && !hasEditorIcon) {
+        errors.push({
+          message: `Block is missing an icon. Add an icon.svg file or set editor.icon in the definition.`,
+          severity: "warning"
+        });
+      }
+    }
+    if (this.fileContents.includes("isEditing")) {
+      const isEditingPattern = /\bisEditing\b[^\n\r=\u2028\u2029]*=.*define(?:Blokkli|BlokkliFragment)\s*\(|define(?:Blokkli|BlokkliFragment)\s*\([^)]*\).*\bisEditing\b|\{[^}]*\bisEditing\b[^}]*\}\s*=\s*define(?:Blokkli|BlokkliFragment)/;
+      if (isEditingPattern.test(this.fileContents)) {
+        errors.push({
+          message: `Using deprecated "isEditing" property. Use "import.meta.blokkliEditing" instead.`,
+          severity: "warning"
+        });
+      }
+    }
+    this.validationCache = errors;
+    return this.validationCache;
+  }
+}
+function validateBundleOptionCompatibility(files) {
+  const conflicts = [];
+  const bundleGroups = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    if (!file.definition || !isBlock(file.definition)) {
+      continue;
+    }
+    const bundle = file.definition.bundle;
+    const existing = bundleGroups.get(bundle) || [];
+    existing.push(file);
+    bundleGroups.set(bundle, existing);
+  }
+  for (const [bundle, bundleFiles] of bundleGroups) {
+    if (bundleFiles.length < 2) {
+      continue;
+    }
+    const optionInfos = /* @__PURE__ */ new Map();
+    for (const file of bundleFiles) {
+      if (!file.definition || !isBlock(file.definition)) {
+        continue;
+      }
+      const options = file.definition.options;
+      if (!options) {
+        continue;
+      }
+      for (const [optionKey, option] of Object.entries(options)) {
+        if (!option || typeof option !== "object" || !option.type) {
+          continue;
+        }
+        const info = {
+          filePath: file.filePath,
+          type: option.type
+        };
+        if ((option.type === "radios" || option.type === "checkboxes") && option.options && typeof option.options === "object") {
+          info.optionKeys = Object.keys(option.options).sort();
+        }
+        const existing = optionInfos.get(optionKey) || [];
+        existing.push(info);
+        optionInfos.set(optionKey, existing);
+      }
+    }
+    for (const [optionKey, entries] of optionInfos) {
+      if (entries.length < 2) {
+        continue;
+      }
+      const types = new Set(entries.map((e) => e.type));
+      if (types.size > 1) {
+        conflicts.push({
+          bundle,
+          optionKey,
+          reason: "type",
+          conflicts: entries
+        });
+        continue;
+      }
+      const entriesWithOptionKeys = entries.filter((e) => e.optionKeys);
+      if (entriesWithOptionKeys.length >= 2) {
+        const optionKeySets = entriesWithOptionKeys.map(
+          (e) => e.optionKeys.join(",")
+        );
+        const uniqueOptionKeySets = new Set(optionKeySets);
+        if (uniqueOptionKeySets.size > 1) {
+          conflicts.push({
+            bundle,
+            optionKey,
+            reason: "options",
+            conflicts: entriesWithOptionKeys
+          });
+        }
+      }
+    }
+  }
+  return conflicts;
+}
+function validateRenderForConflicts(files) {
+  const conflicts = [];
+  const bundleGroups = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    if (!file.definition || !isBlock(file.definition)) {
+      continue;
+    }
+    const bundle = file.definition.bundle;
+    const existing = bundleGroups.get(bundle) || [];
+    existing.push(file);
+    bundleGroups.set(bundle, existing);
+  }
+  for (const [bundle, bundleFiles] of bundleGroups) {
+    if (bundleFiles.length < 2) {
+      continue;
+    }
+    const variationToFiles = /* @__PURE__ */ new Map();
+    for (const file of bundleFiles) {
+      for (const variation of file.variations) {
+        const existing = variationToFiles.get(variation) || [];
+        existing.push(file.filePath);
+        variationToFiles.set(variation, existing);
+      }
+    }
+    for (const [variation, filePaths] of variationToFiles) {
+      if (filePaths.length > 1) {
+        conflicts.push({
+          bundle,
+          variation,
+          filePaths
+        });
+      }
+    }
+  }
+  return conflicts;
+}
+function validateMissingMainComponent(files) {
+  const errors = [];
+  const bundleGroups = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    if (!file.definition || !isBlock(file.definition)) {
+      continue;
+    }
+    const bundle = file.definition.bundle;
+    const existing = bundleGroups.get(bundle) || { main: [], context: [] };
+    if (file.type === "main") {
+      existing.main.push(file.filePath);
+    } else if (file.type === "context") {
+      existing.context.push(file.filePath);
+    }
+    bundleGroups.set(bundle, existing);
+  }
+  for (const [bundle, { main, context }] of bundleGroups) {
+    if (context.length > 0 && main.length === 0) {
+      errors.push({
+        bundle,
+        filePaths: context
+      });
+    }
+  }
+  return errors;
 }
 class BlockCollector extends Collector {
   patterns;
@@ -426,6 +793,56 @@ class BlockCollector extends Collector {
   getDependencyTypes() {
     return ["block-content", "block-path"];
   }
+  validate() {
+    const hasFileErrors = super.validate();
+    const files = [...this.files.values()];
+    let hasCollectorErrors = false;
+    const optionConflicts = validateBundleOptionCompatibility(files);
+    if (optionConflicts.length > 0) {
+      const lines = optionConflicts.flatMap((conflict) => {
+        const reasonLabel = conflict.reason === "type" ? "conflicting types" : "conflicting option keys";
+        return [
+          `  Bundle "${conflict.bundle}", option "${conflict.optionKey}" (${reasonLabel}):`,
+          ...conflict.conflicts.map((c) => {
+            if (conflict.reason === "options" && c.optionKeys) {
+              return `    - ${c.filePath} (keys: ${c.optionKeys.join(", ")})`;
+            }
+            return `    - ${c.filePath} (type: ${c.type})`;
+          })
+        ];
+      });
+      this.helper.logger.error(
+        `bl\xF6kkli option conflicts across bundle components:
+${lines.join("\n")}`
+      );
+      hasCollectorErrors = true;
+    }
+    const renderForConflicts = validateRenderForConflicts(files);
+    if (renderForConflicts.length > 0) {
+      const lines = renderForConflicts.flatMap((conflict) => [
+        `  Bundle "${conflict.bundle}", variation "${conflict.variation}":`,
+        ...conflict.filePaths.map((fp) => `    - ${fp}`)
+      ]);
+      this.helper.logger.error(
+        `bl\xF6kkli duplicate renderFor entries:
+${lines.join("\n")}`
+      );
+      hasCollectorErrors = true;
+    }
+    const missingMainErrors = validateMissingMainComponent(files);
+    if (missingMainErrors.length > 0) {
+      const lines = missingMainErrors.flatMap((error) => [
+        `  Bundle "${error.bundle}":`,
+        ...error.filePaths.map((fp) => `    - ${fp}`)
+      ]);
+      this.helper.logger.error(
+        `bl\xF6kkli bundles with renderFor components but no main component:
+${lines.join("\n")}`
+      );
+      hasCollectorErrors = true;
+    }
+    return hasFileErrors || hasCollectorErrors;
+  }
 }
 
 function isVue(id, opts = {}) {
@@ -457,7 +874,7 @@ function generateRuntimeArg(definition) {
   }
   return `${definition.entityType}__${definition.bundle}::${getIdentifier(definition)}`;
 }
-const RuntimeDefinitionPlugin = (nuxt, composableName, argIndex = 0) => {
+const RuntimeDefinitionPlugin = (nuxt, helper, composableName, argIndex = 0) => {
   const cache = /* @__PURE__ */ new Map();
   function extract(source) {
     const fromCache = cache.get(source);
@@ -466,6 +883,11 @@ const RuntimeDefinitionPlugin = (nuxt, composableName, argIndex = 0) => {
     }
     const definition = parseTsObject(source);
     if (definition.object) {
+      if (isBlock(definition.object)) {
+        definition.object.bundle = helper.getMappedBlockBundle(
+          definition.object.bundle
+        );
+      }
       cache.set(source, definition.object);
       return definition.object;
     }
@@ -526,16 +948,81 @@ const RuntimeDefinitionPlugin = (nuxt, composableName, argIndex = 0) => {
   });
 };
 
+const REPLACE_TARGET = "import.meta.blokkliEditing";
+const EDITING_MARKER = "__blokkli_editing__";
+const BlokkliEditingPlugin = (nuxt) => {
+  return createUnplugin(() => {
+    return {
+      name: "blokkli:editing",
+      enforce: "pre",
+      resolveId(id) {
+        const { pathname, search } = parseURL(decodeURIComponent(id));
+        if (!search || !pathname.endsWith(".vue")) {
+          return;
+        }
+        const query = parseQuery(search);
+        if (query.blokkliEditing !== "true") {
+          return;
+        }
+        return pathname.replace(/\.vue$/, `${EDITING_MARKER}.vue`);
+      },
+      load(id) {
+        if (!id.includes(EDITING_MARKER) || id.includes("?")) {
+          return;
+        }
+        const originalPath = id.replace(EDITING_MARKER, "");
+        this.addWatchFile(originalPath);
+        return readFileSync(originalPath, "utf-8");
+      },
+      transform(source, id) {
+        if (!source.includes(REPLACE_TARGET)) {
+          return;
+        }
+        const isEditing = id.includes(EDITING_MARKER);
+        const replacement = isEditing ? "true" : "false";
+        const s = new MagicString(source);
+        let index = source.indexOf(REPLACE_TARGET);
+        while (index !== -1) {
+          s.overwrite(index, index + REPLACE_TARGET.length, replacement);
+          index = source.indexOf(REPLACE_TARGET, index + 1);
+        }
+        if (s.hasChanged()) {
+          return {
+            code: s.toString(),
+            map: nuxt.options.sourcemap.client || nuxt.options.sourcemap.server ? s.generateMap({ hires: true }) : null
+          };
+        }
+      },
+      vite: {
+        handleHotUpdate({ file, server, modules }) {
+          if (file.endsWith(".vue") && !file.includes(EDITING_MARKER)) {
+            const editingVariantPath = file.replace(
+              /\.vue$/,
+              `${EDITING_MARKER}.vue`
+            );
+            const editingModule = server.moduleGraph.getModuleById(editingVariantPath);
+            if (editingModule) {
+              server.moduleGraph.invalidateModule(editingModule);
+              return [...modules, editingModule];
+            }
+          }
+        }
+      }
+    };
+  });
+};
+
 class IconCollector extends Collector {
   needsFileContents = false;
   srcFromModule;
   constructor(helper) {
     super(helper);
-    this.srcFromModule = helper.resolvers.module.resolve("./runtime/icons");
+    this.srcFromModule = helper.resolvers.module.resolve(
+      "./runtime/editor/icons/svg"
+    );
   }
   async init() {
-    const srcFromModule = this.helper.resolvers.module.resolve("./runtime/icons");
-    const filesModule = await resolveFiles(srcFromModule, "*.svg");
+    const filesModule = await resolveFiles(this.srcFromModule, "*.svg");
     const filesApp = await resolveFiles(
       this.helper.paths.srcDir,
       "**/icon-blokkli-*.svg"
@@ -621,12 +1108,10 @@ class FileCache {
   }
 }
 
-function onlyUnique(value, index, self) {
-  return self.indexOf(value) === index;
-}
 class ModuleHelper {
-  constructor(nuxt, moduleUrl, providedOptions) {
+  constructor(nuxt, logger, moduleUrl, providedOptions) {
     this.nuxt = nuxt;
+    this.logger = logger;
     this.isDev = nuxt.options.dev;
     this.isModuleBuild = false;
     this.fileCache = new FileCache();
@@ -646,13 +1131,23 @@ class ModuleHelper {
         this.paths.blokkliBuildDir,
         this.resolvers.module.resolve("./runtime/types/index.ts")
       ),
+      TYPES_DEFINITIONS: relative(
+        this.paths.blokkliBuildDir,
+        this.resolvers.module.resolve("./runtime/types/definitions.ts")
+      ),
+      RUNTIME_MATERIAL_ICONS: relative(
+        this.paths.blokkliBuildDir,
+        this.resolvers.module.resolve(
+          "./runtime/editor/icons/material-icons.ts"
+        )
+      ),
       CONSTANTS: relative(
         this.paths.blokkliBuildDir,
         this.resolvers.module.resolve("./runtime/constants/index.ts")
       ),
       ADAPTER: relative(
         this.paths.blokkliBuildDir,
-        this.resolvers.module.resolve("./runtime/adapter/index.ts")
+        this.resolvers.module.resolve("./runtime/editor/adapter/index.ts")
       ),
       TYPES_THEME: relative(
         this.paths.blokkliBuildDir,
@@ -758,6 +1253,14 @@ class ModuleHelper {
       path + "/*"
     ];
   }
+  getMappedBlockBundle(bundle) {
+    if (bundle === "BK_BUNDLE_FROM_LIBRARY") {
+      return this.options.fromLibraryBlockBundle ?? "from_library";
+    } else if (bundle === "BK_BUNDLE_FRAGMENT") {
+      return this.options.fragmentBlockBundle ?? "blokkli_fragment";
+    }
+    return bundle;
+  }
 }
 
 const WRITE = false;
@@ -821,36 +1324,30 @@ class ModuleContext {
         write: template.options.write || WRITE,
         getContents: () => this.getTemplateContents("code", template.name)
       });
-      addTypeTemplate({
-        filename: `blokkli/${template.name}.d.ts`,
-        write: true,
-        // Type files are always written.
-        getContents: () => {
-          const lines = this.getTemplateContents("types", template.name).trim().split("\n");
-          const imports = [];
-          const declarations = [];
-          for (const line of lines) {
-            if (line.startsWith("import ") && line.includes(" from ")) {
-              imports.push(line);
-            } else {
-              declarations.push(line);
-            }
+      this.addTypeTemplate(`blokkli/${template.name}.d.ts`, () => {
+        const lines = this.getTemplateContents("types", template.name).trim().split("\n");
+        const imports = [];
+        const declarations = [];
+        for (const line of lines) {
+          if (line.startsWith("import ") && line.includes(" from ")) {
+            imports.push(line);
+          } else {
+            declarations.push(line);
           }
-          return `${imports.join("\n")}
+        }
+        return `${imports.join("\n")}
 
 declare module '#blokkli-build/${template.name}' {
   ${declarations.join("\n  ")}
 }`;
-        }
       });
     } else {
       const filename = template.fileName.startsWith("/") ? template.fileName : `blokkli/${template.fileName}`;
       if (filename.endsWith(".d.ts")) {
-        addTypeTemplate({
+        this.addTypeTemplate(
           filename,
-          write: true,
-          getContents: () => this.getTemplateContents("file", template.fileName)
-        });
+          () => this.getTemplateContents("file", template.fileName)
+        );
       } else {
         addTemplate({
           filename,
@@ -860,6 +1357,24 @@ declare module '#blokkli-build/${template.name}' {
       }
     }
   }
+  /**
+   * Register a type template without adding to globalTypeFiles.
+   *
+   * Uses addTemplate instead of addTypeTemplate to avoid Vue compiler-sfc
+   * issue where exported types from globalTypeFiles cannot be resolved.
+   * @see https://github.com/nuxt/nuxt/issues/33694
+   */
+  addTypeTemplate(filename, getContents) {
+    const resolvedTemplate = addTemplate({
+      filename,
+      write: true,
+      getContents
+    });
+    this.helper.nuxt.hook("prepare:types", (payload) => {
+      payload.references ||= [];
+      payload.references.push({ path: resolvedTemplate.dst });
+    });
+  }
 }
 
 function defineCodeTemplate(name, buildCode, buildTypes, options) {
@@ -911,6 +1426,132 @@ function toImports(map) {
     return `import ${key} from '${path}'`;
   }).sort().join("\n");
 }
+function toTypeLiteral(value) {
+  if (value === null) {
+    return "null";
+  }
+  if (value === void 0) {
+    return "undefined";
+  }
+  if (typeof value === "string") {
+    return JSON.stringify(value);
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return "[]";
+    }
+    const items = value.map((v) => toTypeLiteral(v));
+    return `[${items.join(", ")}]`;
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return "{}";
+    }
+    const props = entries.map(([key, val]) => {
+      const safeKey = /^[a-z_$][\w$]*$/i.test(key) ? key : JSON.stringify(key);
+      return `${safeKey}: ${toTypeLiteral(val)}`;
+    }).join("; ");
+    return `{ ${props} }`;
+  }
+  return "unknown";
+}
+
+const USED_MATERIAL_ICONS = [
+  "bk_mdi_account_tree",
+  "bk_mdi_add",
+  "bk_mdi_add_comment",
+  "bk_mdi_anchor",
+  "bk_mdi_arrow_downward",
+  "bk_mdi_arrow_drop_down",
+  "bk_mdi_arrow_left",
+  "bk_mdi_arrow_left_alt",
+  "bk_mdi_arrow_right",
+  "bk_mdi_arrow_right_alt",
+  "bk_mdi_arrow_selector_tool",
+  "bk_mdi_attach_file",
+  "bk_mdi_bakery_dining",
+  "bk_mdi_bar_chart",
+  "bk_mdi_bug_report",
+  "bk_mdi_calendar_clock",
+  "bk_mdi_calendar_month",
+  "bk_mdi_check",
+  "bk_mdi_check_box",
+  "bk_mdi_check_box_outline_blank",
+  "bk_mdi_chevron_backward",
+  "bk_mdi_chevron_forward",
+  "bk_mdi_close",
+  "bk_mdi_comment",
+  "bk_mdi_construction",
+  "bk_mdi_content_copy",
+  "bk_mdi_content_paste",
+  "bk_mdi_delete",
+  "bk_mdi_dock_to_left",
+  "bk_mdi_dock_to_right",
+  "bk_mdi_drag_pan",
+  "bk_mdi_edit",
+  "bk_mdi_exit_to_app",
+  "bk_mdi_extension",
+  "bk_mdi_function",
+  "bk_mdi_grid_view",
+  "bk_mdi_grid_view-fill",
+  "bk_mdi_help",
+  "bk_mdi_help-fill",
+  "bk_mdi_history",
+  "bk_mdi_image",
+  "bk_mdi_info-fill",
+  "bk_mdi_ink_selection",
+  "bk_mdi_keyboard_command_key",
+  "bk_mdi_lists",
+  "bk_mdi_logo_dev",
+  "bk_mdi_menu",
+  "bk_mdi_mobile",
+  "bk_mdi_mobile_rotate",
+  "bk_mdi_newspaper",
+  "bk_mdi_open_in_new",
+  "bk_mdi_palette",
+  "bk_mdi_person",
+  "bk_mdi_person-fill",
+  "bk_mdi_publish",
+  "bk_mdi_qr_code",
+  "bk_mdi_question_mark",
+  "bk_mdi_radio_button_checked",
+  "bk_mdi_redo",
+  "bk_mdi_remove",
+  "bk_mdi_replay",
+  "bk_mdi_robot",
+  "bk_mdi_save",
+  "bk_mdi_school-fill",
+  "bk_mdi_search",
+  "bk_mdi_select",
+  "bk_mdi_select_all",
+  "bk_mdi_select_check_box",
+  "bk_mdi_sentiment_dissatisfied",
+  "bk_mdi_sentiment_worried",
+  "bk_mdi_settings",
+  "bk_mdi_speed",
+  "bk_mdi_stack_group",
+  "bk_mdi_swap_horiz",
+  "bk_mdi_swap_horizontal_circle",
+  "bk_mdi_text_compare",
+  "bk_mdi_text_select_end",
+  "bk_mdi_texture",
+  "bk_mdi_title",
+  "bk_mdi_trackpad_input",
+  "bk_mdi_translate",
+  "bk_mdi_undo",
+  "bk_mdi_upload",
+  "bk_mdi_video_camera_back",
+  "bk_mdi_visibility",
+  "bk_mdi_visibility-fill",
+  "bk_mdi_visibility_off",
+  "bk_mdi_warning",
+  "bk_mdi_web_traffic",
+  "bk_mdi_zoom_in"
+];
 
 const icons = defineCodeTemplate(
   "icons",
@@ -918,12 +1559,44 @@ const icons = defineCodeTemplate(
     const imports = /* @__PURE__ */ new Map();
     const icons = /* @__PURE__ */ new Map();
     const files = ctx.icons.files.values();
+    const blockIcons = [...ctx.blocks.files.values()].flatMap((v) => {
+      const icon = v.definition?.editor?.icon;
+      const optionIcons = Object.values(v.definition?.options ?? {}).flatMap(
+        (option) => {
+          if (option.type === "radios" && option.displayAs === "icons") {
+            return Object.values(option.options).map((optionOption) => {
+              return optionOption.icon;
+            });
+          }
+        }
+      );
+      return [icon, ...optionIcons];
+    });
+    const featureIcons = [...ctx.features.files.values()].map(
+      (v) => v.getDefinition()?.definition.icon
+    );
+    const definitionIcons = [
+      ...blockIcons,
+      ...featureIcons,
+      ...USED_MATERIAL_ICONS
+    ].filter(falsy).filter(onlyUnique);
     for (const file of files) {
       const name = basename(file.filePath, ".svg").toLowerCase();
       const importName = "icon_" + toValidVariableName(name);
-      imports.set(importName, `${file.filePath}?raw`);
+      const realtivePath = ctx.helper.toModuleBuildRelative(file.filePath);
+      imports.set(importName, `${realtivePath}?raw`);
       icons.set(name, importName);
     }
+    const materialIcons = definitionIcons.filter((v) => v.startsWith("bk_mdi_"));
+    for (const icon of materialIcons) {
+      const importName = "icon_" + toValidVariableName(icon);
+      const mdiImportName = icon.replace("bk_mdi_", "");
+      imports.set(
+        importName,
+        `@material-symbols/svg-600/rounded/${mdiImportName}.svg?raw`
+      );
+      icons.set(icon, importName);
+    }
     return `${toImports(imports)}
 
 ${toObject("icons", icons)}
@@ -932,15 +1605,19 @@ ${toObject("icons", icons)}
   (ctx) => {
     const allIconNames = [...ctx.icons.files.values()].map((file) => {
       return basename(file.filePath, ".svg").toLowerCase();
-    }).sort().map((name) => `"${name}"`).join("\n  | ");
+    }).sort().map((name) => `"${name}"`).join("\n  | ") || "'never'";
     return `
-export type BlokkliIcon =
+import type { MaterialIconName } from '${ctx.helper.relativePaths.RUNTIME_MATERIAL_ICONS}'
+
+type ProvidedIconName =
   | ${allIconNames}
-export const icons: Record<BlokkliIcon, string>
+
+export type BlokkliIcon = MaterialIconName | ProvidedIconName
+export declare const icons: Record<BlokkliIcon, string>
 `;
   },
   {
-    dependencies: ["icons"]
+    dependencies: ["icons", "block-content"]
   }
 );
 
@@ -952,6 +1629,7 @@ const features = defineCodeTemplate(
     const definitions = [];
     const declarations = [];
     const imports = /* @__PURE__ */ new Map();
+    const typeImports = [];
     for (const feature of features) {
       const componentVarName = toValidVariableName(`component_${feature.id}`);
       const declarationVarName = toValidVariableName(`feature_${feature.id}`);
@@ -961,9 +1639,16 @@ const features = defineCodeTemplate(
       definitions.push(declarationVarName);
       imports.set(componentVarName, feature.componentPath);
       featuresComponents.set(feature.id, componentVarName);
+      const typesPath = feature.componentPath.replace("/index.vue", "/types.ts");
+      if (existsSync(typesPath)) {
+        typeImports.push(
+          `import '${feature.componentPath.replace("/index.vue", "/types")}'`
+        );
+      }
     }
     const availableFeaturesAtBuild = features.map((v) => v.id);
-    return `${toImports(imports)}
+    const typeImportsCode = typeImports.length > 0 ? typeImports.join("\n") + "\n" : "";
+    return `${typeImportsCode}${toImports(imports)}
 
 export const availableFeaturesAtBuild = ${JSON.stringify(
       availableFeaturesAtBuild.sort()
@@ -982,12 +1667,9 @@ export const featureDefinitions = [
     const features = ctx.features.getEnabledFeatures().map((v) => v.id);
     const availableFeaturesAtBuild = features;
     return `
-import type { BlokkliAdapter } from '${ctx.helper.relativePaths.ADAPTER}'
-import type { Viewport } from '${ctx.helper.relativePaths.CONSTANTS}'
+import type { FeatureDefinition } from '${ctx.helper.relativePaths.TYPES}'
 import type { Component } from 'vue'
 
-type AdapterMethods = keyof BlokkliAdapter<any>
-
 export type ValidFeatureKey = ${availableFeaturesAtBuild.map((v) => '"' + v + '"').join(" | ")}
 
 export declare const featureComponents: Record<ValidFeatureKey, Component>
@@ -1515,6 +2197,10 @@ const downloadLogsButton$3 = {
 	source: "Download Logs",
 	translation: "Fehlerprotokoll herunterladen"
 };
+const draggingOverlaySelectBundle$3 = {
+	source: "Select block type to create",
+	translation: "Block-Typ zum Erstellen auswählen"
+};
 const duplicate$3 = {
 	source: "Duplicate",
 	translation: "Duplizieren"
@@ -1671,6 +2357,14 @@ const feature_assistant_label$3 = {
 	source: "Assistant",
 	translation: "Assistent"
 };
+const feature_breadcrumbs_description$3 = {
+	source: "Provides a breadcrumb of the selection.",
+	translation: ""
+};
+const feature_breadcrumbs_label$3 = {
+	source: "Breadcrumbs",
+	translation: ""
+};
 const feature_clipboard_description$3 = {
 	source: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
 	translation: "Stellt Zwischenablage-Integration bereit zum Kopieren/Einfügen von bestehenden Blöcken oder zum Einfügen von unterstützten Inhalten wie Text oder Bildern."
@@ -2067,17 +2761,9 @@ const importExistingFieldsLabel$3 = {
 	source: "Which content would you like to import?",
 	translation: "Welche Inhalte möchten Sie importieren?"
 };
-const importExistingPagesLabel$3 = {
-	source: "From which page would you like to import?",
-	translation: "Von welcher Seite möchten Sie importieren?"
-};
-const importExistingResultsTitle$3 = {
-	source: "@count of @total pages",
-	translation: "@count von @total Seiten"
-};
-const importExistingSearchPlaceholder$3 = {
-	source: "Search pages",
-	translation: "Seiten durchsuchen"
+const importExistingPagesTitle$3 = {
+	source: "Select page",
+	translation: ""
 };
 const importExistingSuccess$3 = {
 	source: "Content imported successfully.",
@@ -2087,6 +2773,14 @@ const importExistingTitle$3 = {
 	source: "Import...",
 	translation: "Importieren..."
 };
+const interactionLayerOff$3 = {
+	source: "Show interaction layers",
+	translation: ""
+};
+const interactionLayersOn$3 = {
+	source: "Hide interaction layers",
+	translation: ""
+};
 const libraryAdd$3 = {
 	source: "Add to library...",
 	translation: "Zur Bibliothek hinzufügen..."
@@ -2155,14 +2849,6 @@ const libraryPlaceDialogTitle$3 = {
 	source: "Add block from library",
 	translation: "Block aus Bibliothek hinzufügen"
 };
-const libraryPlaceSearchInputPlaceholder$3 = {
-	source: "Search library items",
-	translation: "Suchbegriff eingeben"
-};
-const libraryPlaceSearchLabel$3 = {
-	source: "Filter library items",
-	translation: "Bibliothek durchsuchen"
-};
 const libraryPreviewLabel$3 = {
 	source: "Preview",
 	translation: "Vorschau"
@@ -2675,6 +3361,10 @@ const themeTourText$3 = {
 	source: "Change the colors of the theme and generate a theme file.",
 	translation: "Ändern Sie das Theme und generieren Sie eine Theme-Datei."
 };
+const toggleInteractionLayers$3 = {
+	source: "Toggle interaction layers",
+	translation: ""
+};
 const touchBarCancelDragging$3 = {
 	source: "Cancel dragging",
 	translation: "Platzieren abbrechen"
@@ -2940,6 +3630,7 @@ const de = {
 	diffStatusEdited: diffStatusEdited$3,
 	diffStatusUnchanged: diffStatusUnchanged$3,
 	downloadLogsButton: downloadLogsButton$3,
+	draggingOverlaySelectBundle: draggingOverlaySelectBundle$3,
 	duplicate: duplicate$3,
 	duplicateError: duplicateError$3,
 	edit: edit$3,
@@ -3003,6 +3694,8 @@ const de = {
 	source: "Block Scheduler",
 	translation: ""
 },
+	feature_breadcrumbs_description: feature_breadcrumbs_description$3,
+	feature_breadcrumbs_label: feature_breadcrumbs_label$3,
 	feature_clipboard_description: feature_clipboard_description$3,
 	feature_clipboard_label: feature_clipboard_label$3,
 	feature_clipboard_setting_openSidebarOnPaste_description: feature_clipboard_setting_openSidebarOnPaste_description$3,
@@ -3023,6 +3716,14 @@ const de = {
 	feature_debug_label: feature_debug_label$3,
 	feature_delete_description: feature_delete_description$3,
 	feature_delete_label: feature_delete_label$3,
+	"feature_dev-mode_description": {
+	source: "Feature enabled in development mode.",
+	translation: ""
+},
+	"feature_dev-mode_label": {
+	source: "Dev Mode",
+	translation: ""
+},
 	feature_diff_description: feature_diff_description$3,
 	feature_diff_label: feature_diff_label$3,
 	"feature_dragging-overlay_description": {
@@ -3206,11 +3907,11 @@ const de = {
 	importExistingDialogTitle: importExistingDialogTitle$3,
 	importExistingError: importExistingError$3,
 	importExistingFieldsLabel: importExistingFieldsLabel$3,
-	importExistingPagesLabel: importExistingPagesLabel$3,
-	importExistingResultsTitle: importExistingResultsTitle$3,
-	importExistingSearchPlaceholder: importExistingSearchPlaceholder$3,
+	importExistingPagesTitle: importExistingPagesTitle$3,
 	importExistingSuccess: importExistingSuccess$3,
 	importExistingTitle: importExistingTitle$3,
+	interactionLayerOff: interactionLayerOff$3,
+	interactionLayersOn: interactionLayersOn$3,
 	libraryAdd: libraryAdd$3,
 	libraryAddDescription: libraryAddDescription$3,
 	libraryAddFromLibrary: libraryAddFromLibrary$3,
@@ -3228,8 +3929,6 @@ const de = {
 	libraryPlaceDialogLead: libraryPlaceDialogLead$3,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit$3,
 	libraryPlaceDialogTitle: libraryPlaceDialogTitle$3,
-	libraryPlaceSearchInputPlaceholder: libraryPlaceSearchInputPlaceholder$3,
-	libraryPlaceSearchLabel: libraryPlaceSearchLabel$3,
 	libraryPreviewLabel: libraryPreviewLabel$3,
 	manageSchedule: manageSchedule$3,
 	maskHide: maskHide$3,
@@ -3378,6 +4077,7 @@ const de = {
 	systemRequirementsWebglText: systemRequirementsWebglText$3,
 	theme: theme$3,
 	themeTourText: themeTourText$3,
+	toggleInteractionLayers: toggleInteractionLayers$3,
 	touchBarCancelDragging: touchBarCancelDragging$3,
 	touchBarFinishSelecting: touchBarFinishSelecting$3,
 	tourDescription: tourDescription$3,
@@ -3902,6 +4602,10 @@ const downloadLogsButton$2 = {
 	source: "Download Logs",
 	translation: ""
 };
+const draggingOverlaySelectBundle$2 = {
+	source: "Select block type to create",
+	translation: ""
+};
 const duplicate$2 = {
 	source: "Duplicate",
 	translation: "Dupliquer"
@@ -4058,6 +4762,14 @@ const feature_assistant_label$2 = {
 	source: "Assistant",
 	translation: "Assistant"
 };
+const feature_breadcrumbs_description$2 = {
+	source: "Provides a breadcrumb of the selection.",
+	translation: ""
+};
+const feature_breadcrumbs_label$2 = {
+	source: "Breadcrumbs",
+	translation: ""
+};
 const feature_clipboard_description$2 = {
 	source: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
 	translation: "Fournit l'intégration du presse-papiers pour copier/coller des blocs existants ou coller du contenu pris en charge comme du texte ou des images."
@@ -4454,17 +5166,9 @@ const importExistingFieldsLabel$2 = {
 	source: "Which content would you like to import?",
 	translation: "Quel contenu souhaitez-vous importer ?"
 };
-const importExistingPagesLabel$2 = {
-	source: "From which page would you like to import?",
-	translation: "De quelle page souhaitez-vous importer ?"
-};
-const importExistingResultsTitle$2 = {
-	source: "@count of @total pages",
-	translation: "@count sur @total pages"
-};
-const importExistingSearchPlaceholder$2 = {
-	source: "Search pages",
-	translation: "Rechercher des pages"
+const importExistingPagesTitle$2 = {
+	source: "Select page",
+	translation: ""
 };
 const importExistingSuccess$2 = {
 	source: "Content imported successfully.",
@@ -4474,6 +5178,14 @@ const importExistingTitle$2 = {
 	source: "Import...",
 	translation: "Importer..."
 };
+const interactionLayerOff$2 = {
+	source: "Show interaction layers",
+	translation: ""
+};
+const interactionLayersOn$2 = {
+	source: "Hide interaction layers",
+	translation: ""
+};
 const libraryAdd$2 = {
 	source: "Add to library...",
 	translation: "Ajouter à la bibliothèque"
@@ -4542,14 +5254,6 @@ const libraryPlaceDialogTitle$2 = {
 	source: "Add block from library",
 	translation: ""
 };
-const libraryPlaceSearchInputPlaceholder$2 = {
-	source: "Search library items",
-	translation: ""
-};
-const libraryPlaceSearchLabel$2 = {
-	source: "Filter library items",
-	translation: ""
-};
 const libraryPreviewLabel$2 = {
 	source: "Preview",
 	translation: "Aperçu"
@@ -5062,6 +5766,10 @@ const themeTourText$2 = {
 	source: "Change the colors of the theme and generate a theme file.",
 	translation: ""
 };
+const toggleInteractionLayers$2 = {
+	source: "Toggle interaction layers",
+	translation: ""
+};
 const touchBarCancelDragging$2 = {
 	source: "Cancel dragging",
 	translation: ""
@@ -5327,6 +6035,7 @@ const fr = {
 	diffStatusEdited: diffStatusEdited$2,
 	diffStatusUnchanged: diffStatusUnchanged$2,
 	downloadLogsButton: downloadLogsButton$2,
+	draggingOverlaySelectBundle: draggingOverlaySelectBundle$2,
 	duplicate: duplicate$2,
 	duplicateError: duplicateError$2,
 	edit: edit$2,
@@ -5390,6 +6099,8 @@ const fr = {
 	source: "Block Scheduler",
 	translation: ""
 },
+	feature_breadcrumbs_description: feature_breadcrumbs_description$2,
+	feature_breadcrumbs_label: feature_breadcrumbs_label$2,
 	feature_clipboard_description: feature_clipboard_description$2,
 	feature_clipboard_label: feature_clipboard_label$2,
 	feature_clipboard_setting_openSidebarOnPaste_description: feature_clipboard_setting_openSidebarOnPaste_description$2,
@@ -5410,6 +6121,14 @@ const fr = {
 	feature_debug_label: feature_debug_label$2,
 	feature_delete_description: feature_delete_description$2,
 	feature_delete_label: feature_delete_label$2,
+	"feature_dev-mode_description": {
+	source: "Feature enabled in development mode.",
+	translation: ""
+},
+	"feature_dev-mode_label": {
+	source: "Dev Mode",
+	translation: ""
+},
 	feature_diff_description: feature_diff_description$2,
 	feature_diff_label: feature_diff_label$2,
 	"feature_dragging-overlay_description": {
@@ -5593,11 +6312,11 @@ const fr = {
 	importExistingDialogTitle: importExistingDialogTitle$2,
 	importExistingError: importExistingError$2,
 	importExistingFieldsLabel: importExistingFieldsLabel$2,
-	importExistingPagesLabel: importExistingPagesLabel$2,
-	importExistingResultsTitle: importExistingResultsTitle$2,
-	importExistingSearchPlaceholder: importExistingSearchPlaceholder$2,
+	importExistingPagesTitle: importExistingPagesTitle$2,
 	importExistingSuccess: importExistingSuccess$2,
 	importExistingTitle: importExistingTitle$2,
+	interactionLayerOff: interactionLayerOff$2,
+	interactionLayersOn: interactionLayersOn$2,
 	libraryAdd: libraryAdd$2,
 	libraryAddDescription: libraryAddDescription$2,
 	libraryAddFromLibrary: libraryAddFromLibrary$2,
@@ -5615,8 +6334,6 @@ const fr = {
 	libraryPlaceDialogLead: libraryPlaceDialogLead$2,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit$2,
 	libraryPlaceDialogTitle: libraryPlaceDialogTitle$2,
-	libraryPlaceSearchInputPlaceholder: libraryPlaceSearchInputPlaceholder$2,
-	libraryPlaceSearchLabel: libraryPlaceSearchLabel$2,
 	libraryPreviewLabel: libraryPreviewLabel$2,
 	manageSchedule: manageSchedule$2,
 	maskHide: maskHide$2,
@@ -5765,6 +6482,7 @@ const fr = {
 	systemRequirementsWebglText: systemRequirementsWebglText$2,
 	theme: theme$2,
 	themeTourText: themeTourText$2,
+	toggleInteractionLayers: toggleInteractionLayers$2,
 	touchBarCancelDragging: touchBarCancelDragging$2,
 	touchBarFinishSelecting: touchBarFinishSelecting$2,
 	tourDescription: tourDescription$2,
@@ -6289,6 +7007,10 @@ const downloadLogsButton$1 = {
 	source: "Download Logs",
 	translation: ""
 };
+const draggingOverlaySelectBundle$1 = {
+	source: "Select block type to create",
+	translation: ""
+};
 const duplicate$1 = {
 	source: "Duplicate",
 	translation: "Duplica"
@@ -6445,6 +7167,14 @@ const feature_assistant_label$1 = {
 	source: "Assistant",
 	translation: "Assistente"
 };
+const feature_breadcrumbs_description$1 = {
+	source: "Provides a breadcrumb of the selection.",
+	translation: ""
+};
+const feature_breadcrumbs_label$1 = {
+	source: "Breadcrumbs",
+	translation: ""
+};
 const feature_clipboard_description$1 = {
 	source: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
 	translation: "Fornisce l'integrazione degli appunti per copiare/incollare blocchi esistenti o incollare contenuti supportati come testo o immagini."
@@ -6841,17 +7571,9 @@ const importExistingFieldsLabel$1 = {
 	source: "Which content would you like to import?",
 	translation: "Quali contenuti vuoi importare?"
 };
-const importExistingPagesLabel$1 = {
-	source: "From which page would you like to import?",
-	translation: "Da quale pagina vuoi importare?"
-};
-const importExistingResultsTitle$1 = {
-	source: "@count of @total pages",
-	translation: "@count di @total pagine"
-};
-const importExistingSearchPlaceholder$1 = {
-	source: "Search pages",
-	translation: "Cerca pagine"
+const importExistingPagesTitle$1 = {
+	source: "Select page",
+	translation: ""
 };
 const importExistingSuccess$1 = {
 	source: "Content imported successfully.",
@@ -6861,6 +7583,14 @@ const importExistingTitle$1 = {
 	source: "Import...",
 	translation: "Importa..."
 };
+const interactionLayerOff$1 = {
+	source: "Show interaction layers",
+	translation: ""
+};
+const interactionLayersOn$1 = {
+	source: "Hide interaction layers",
+	translation: ""
+};
 const libraryAdd$1 = {
 	source: "Add to library...",
 	translation: "Aggiungi alla biblioteca"
@@ -6929,14 +7659,6 @@ const libraryPlaceDialogTitle$1 = {
 	source: "Add block from library",
 	translation: ""
 };
-const libraryPlaceSearchInputPlaceholder$1 = {
-	source: "Search library items",
-	translation: ""
-};
-const libraryPlaceSearchLabel$1 = {
-	source: "Filter library items",
-	translation: ""
-};
 const libraryPreviewLabel$1 = {
 	source: "Preview",
 	translation: "Anteprima"
@@ -7449,6 +8171,10 @@ const themeTourText$1 = {
 	source: "Change the colors of the theme and generate a theme file.",
 	translation: ""
 };
+const toggleInteractionLayers$1 = {
+	source: "Toggle interaction layers",
+	translation: ""
+};
 const touchBarCancelDragging$1 = {
 	source: "Cancel dragging",
 	translation: ""
@@ -7714,6 +8440,7 @@ const it = {
 	diffStatusEdited: diffStatusEdited$1,
 	diffStatusUnchanged: diffStatusUnchanged$1,
 	downloadLogsButton: downloadLogsButton$1,
+	draggingOverlaySelectBundle: draggingOverlaySelectBundle$1,
 	duplicate: duplicate$1,
 	duplicateError: duplicateError$1,
 	edit: edit$1,
@@ -7777,6 +8504,8 @@ const it = {
 	source: "Block Scheduler",
 	translation: ""
 },
+	feature_breadcrumbs_description: feature_breadcrumbs_description$1,
+	feature_breadcrumbs_label: feature_breadcrumbs_label$1,
 	feature_clipboard_description: feature_clipboard_description$1,
 	feature_clipboard_label: feature_clipboard_label$1,
 	feature_clipboard_setting_openSidebarOnPaste_description: feature_clipboard_setting_openSidebarOnPaste_description$1,
@@ -7797,6 +8526,14 @@ const it = {
 	feature_debug_label: feature_debug_label$1,
 	feature_delete_description: feature_delete_description$1,
 	feature_delete_label: feature_delete_label$1,
+	"feature_dev-mode_description": {
+	source: "Feature enabled in development mode.",
+	translation: ""
+},
+	"feature_dev-mode_label": {
+	source: "Dev Mode",
+	translation: ""
+},
 	feature_diff_description: feature_diff_description$1,
 	feature_diff_label: feature_diff_label$1,
 	"feature_dragging-overlay_description": {
@@ -7980,11 +8717,11 @@ const it = {
 	importExistingDialogTitle: importExistingDialogTitle$1,
 	importExistingError: importExistingError$1,
 	importExistingFieldsLabel: importExistingFieldsLabel$1,
-	importExistingPagesLabel: importExistingPagesLabel$1,
-	importExistingResultsTitle: importExistingResultsTitle$1,
-	importExistingSearchPlaceholder: importExistingSearchPlaceholder$1,
+	importExistingPagesTitle: importExistingPagesTitle$1,
 	importExistingSuccess: importExistingSuccess$1,
 	importExistingTitle: importExistingTitle$1,
+	interactionLayerOff: interactionLayerOff$1,
+	interactionLayersOn: interactionLayersOn$1,
 	libraryAdd: libraryAdd$1,
 	libraryAddDescription: libraryAddDescription$1,
 	libraryAddFromLibrary: libraryAddFromLibrary$1,
@@ -8002,8 +8739,6 @@ const it = {
 	libraryPlaceDialogLead: libraryPlaceDialogLead$1,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit$1,
 	libraryPlaceDialogTitle: libraryPlaceDialogTitle$1,
-	libraryPlaceSearchInputPlaceholder: libraryPlaceSearchInputPlaceholder$1,
-	libraryPlaceSearchLabel: libraryPlaceSearchLabel$1,
 	libraryPreviewLabel: libraryPreviewLabel$1,
 	manageSchedule: manageSchedule$1,
 	maskHide: maskHide$1,
@@ -8152,6 +8887,7 @@ const it = {
 	systemRequirementsWebglText: systemRequirementsWebglText$1,
 	theme: theme$1,
 	themeTourText: themeTourText$1,
+	toggleInteractionLayers: toggleInteractionLayers$1,
 	touchBarCancelDragging: touchBarCancelDragging$1,
 	touchBarFinishSelecting: touchBarFinishSelecting$1,
 	tourDescription: tourDescription$1,
@@ -8676,6 +9412,10 @@ const downloadLogsButton = {
 	source: "Download Logs",
 	translation: ""
 };
+const draggingOverlaySelectBundle = {
+	source: "Select block type to create",
+	translation: ""
+};
 const duplicate = {
 	source: "Duplicate",
 	translation: "Dupliziere"
@@ -8832,6 +9572,14 @@ const feature_assistant_label = {
 	source: "Assistant",
 	translation: "Assischtänt"
 };
+const feature_breadcrumbs_description = {
+	source: "Provides a breadcrumb of the selection.",
+	translation: ""
+};
+const feature_breadcrumbs_label = {
+	source: "Breadcrumbs",
+	translation: ""
+};
 const feature_clipboard_description = {
 	source: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
 	translation: "Stellt Zwüscheablag-Integration bereit zum bestehendi Blöck z'kopiere/iizfüege oder understützti Inhält wie Teggscht oder Bilder iizfüege."
@@ -9228,17 +9976,9 @@ const importExistingFieldsLabel = {
 	source: "Which content would you like to import?",
 	translation: "Weli Inhält sölle importiert wärde?"
 };
-const importExistingPagesLabel = {
-	source: "From which page would you like to import?",
-	translation: "Von welere Sitte willsch öbbis importiere?"
-};
-const importExistingResultsTitle = {
-	source: "@count of @total pages",
-	translation: "@count vo @total Sitte"
-};
-const importExistingSearchPlaceholder = {
-	source: "Search pages",
-	translation: "Sitte durchsueche"
+const importExistingPagesTitle = {
+	source: "Select page",
+	translation: ""
 };
 const importExistingSuccess = {
 	source: "Content imported successfully.",
@@ -9248,6 +9988,14 @@ const importExistingTitle = {
 	source: "Import...",
 	translation: "Importiere..."
 };
+const interactionLayerOff = {
+	source: "Show interaction layers",
+	translation: ""
+};
+const interactionLayersOn = {
+	source: "Hide interaction layers",
+	translation: ""
+};
 const libraryAdd = {
 	source: "Add to library...",
 	translation: "Zur Bibliothek drzuefüege"
@@ -9316,14 +10064,6 @@ const libraryPlaceDialogTitle = {
 	source: "Add block from library",
 	translation: "Block us dr Bibliothek drzuefüege"
 };
-const libraryPlaceSearchInputPlaceholder = {
-	source: "Search library items",
-	translation: "Suchbegriff iigeh"
-};
-const libraryPlaceSearchLabel = {
-	source: "Filter library items",
-	translation: "Bibliothek durchsueche"
-};
 const libraryPreviewLabel = {
 	source: "Preview",
 	translation: "Vorschau"
@@ -9836,6 +10576,10 @@ const themeTourText = {
 	source: "Change the colors of the theme and generate a theme file.",
 	translation: "Änderi d'Farbe vom Theme und generier e Theme-Datei."
 };
+const toggleInteractionLayers = {
+	source: "Toggle interaction layers",
+	translation: ""
+};
 const touchBarCancelDragging = {
 	source: "Cancel dragging",
 	translation: "Platziere abbräche"
@@ -10101,6 +10845,7 @@ const gsw_CH = {
 	diffStatusEdited: diffStatusEdited,
 	diffStatusUnchanged: diffStatusUnchanged,
 	downloadLogsButton: downloadLogsButton,
+	draggingOverlaySelectBundle: draggingOverlaySelectBundle,
 	duplicate: duplicate,
 	duplicateError: duplicateError,
 	edit: edit,
@@ -10164,6 +10909,8 @@ const gsw_CH = {
 	source: "Block Scheduler",
 	translation: ""
 },
+	feature_breadcrumbs_description: feature_breadcrumbs_description,
+	feature_breadcrumbs_label: feature_breadcrumbs_label,
 	feature_clipboard_description: feature_clipboard_description,
 	feature_clipboard_label: feature_clipboard_label,
 	feature_clipboard_setting_openSidebarOnPaste_description: feature_clipboard_setting_openSidebarOnPaste_description,
@@ -10184,6 +10931,14 @@ const gsw_CH = {
 	feature_debug_label: feature_debug_label,
 	feature_delete_description: feature_delete_description,
 	feature_delete_label: feature_delete_label,
+	"feature_dev-mode_description": {
+	source: "Feature enabled in development mode.",
+	translation: ""
+},
+	"feature_dev-mode_label": {
+	source: "Dev Mode",
+	translation: ""
+},
 	feature_diff_description: feature_diff_description,
 	feature_diff_label: feature_diff_label,
 	"feature_dragging-overlay_description": {
@@ -10367,11 +11122,11 @@ const gsw_CH = {
 	importExistingDialogTitle: importExistingDialogTitle,
 	importExistingError: importExistingError,
 	importExistingFieldsLabel: importExistingFieldsLabel,
-	importExistingPagesLabel: importExistingPagesLabel,
-	importExistingResultsTitle: importExistingResultsTitle,
-	importExistingSearchPlaceholder: importExistingSearchPlaceholder,
+	importExistingPagesTitle: importExistingPagesTitle,
 	importExistingSuccess: importExistingSuccess,
 	importExistingTitle: importExistingTitle,
+	interactionLayerOff: interactionLayerOff,
+	interactionLayersOn: interactionLayersOn,
 	libraryAdd: libraryAdd,
 	libraryAddDescription: libraryAddDescription,
 	libraryAddFromLibrary: libraryAddFromLibrary,
@@ -10389,8 +11144,6 @@ const gsw_CH = {
 	libraryPlaceDialogLead: libraryPlaceDialogLead,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit,
 	libraryPlaceDialogTitle: libraryPlaceDialogTitle,
-	libraryPlaceSearchInputPlaceholder: libraryPlaceSearchInputPlaceholder,
-	libraryPlaceSearchLabel: libraryPlaceSearchLabel,
 	libraryPreviewLabel: libraryPreviewLabel,
 	manageSchedule: manageSchedule,
 	maskHide: maskHide,
@@ -10539,6 +11292,7 @@ const gsw_CH = {
 	systemRequirementsWebglText: systemRequirementsWebglText,
 	theme: theme,
 	themeTourText: themeTourText,
+	toggleInteractionLayers: toggleInteractionLayers,
 	touchBarCancelDragging: touchBarCancelDragging,
 	touchBarFinishSelecting: touchBarFinishSelecting,
 	tourDescription: tourDescription,
@@ -10622,7 +11376,7 @@ export default adapter
 
 const styles = defineFileTemplate("styles.css", (ctx) => {
   const cssFilePath = ctx.helper.resolvers.module.resolve(
-    "./runtime/css/output.css"
+    "./runtime/editor/css/output.css"
   );
   return `
 @import url("${cssFilePath}");
@@ -10631,6 +11385,45 @@ ${ctx.theme.css}
 `;
 });
 
+function mapVars(ctx) {
+  return {
+    itemEntityType: JSON.stringify(
+      ctx.helper.options.itemEntityType ?? "block"
+    ),
+    fromLibraryBlockBundle: JSON.stringify(
+      ctx.helper.options.fromLibraryBlockBundle ?? "from_library"
+    ),
+    fragmentBlockBundle: JSON.stringify(
+      ctx.helper.options.fragmentBlockBundle ?? "blokkli_fragment"
+    )
+  };
+}
+const config = defineCodeTemplate(
+  "config",
+  (ctx) => {
+    const vars = mapVars(ctx);
+    return `
+export const itemEntityType = ${vars.itemEntityType}
+
+export const fromLibraryBlockBundle = ${vars.fromLibraryBlockBundle}
+
+export const fragmentBlockBundle = ${vars.fragmentBlockBundle}
+`;
+  },
+  (ctx) => {
+    const vars = mapVars(ctx);
+    return `
+/**
+ * The block item entity type.
+ */
+export declare const itemEntityType: ${vars.itemEntityType}
+
+export declare const fromLibraryBlockBundle: ${vars.fromLibraryBlockBundle}
+export declare const fragmentBlockBundle: ${vars.fragmentBlockBundle}
+`;
+  }
+);
+
 const accent$3 = {
 	"50": [
 		237,
@@ -11435,8 +12228,8 @@ const getTheme = (v) => {
   return v || {};
 };
 
-const config = defineCodeTemplate(
-  "config",
+const editorConfig = defineCodeTemplate(
+  "editor-config",
   (ctx) => {
     const settingsOverride = ctx.helper.options.settingsOverride || {};
     return `
@@ -11459,10 +12252,6 @@ export const defaultLanguage = ${JSON.stringify(
 export const forceDefaultLanguage = ${JSON.stringify(
       !!ctx.helper.options.forceDefaultLanguage
     )}
-
-export const itemEntityType = ${JSON.stringify(
-      ctx.helper.options.itemEntityType || "block"
-    )}
 `;
   },
   (ctx) => {
@@ -11509,15 +12298,34 @@ export declare const defaultLanguage: string
  * Whether to always force the default language, even on translation pages.
  */
 export declare const forceDefaultLanguage: boolean
-
-/**
- * The block item entity type.
- */
-export declare const itemEntityType: string
 `;
   }
 );
 
+function transformGlobalOptionsForType(globalOptions) {
+  const result = {};
+  for (const [key, option] of Object.entries(globalOptions)) {
+    const entry = { type: option.type };
+    if (option.type === "radios" || option.type === "checkboxes") {
+      if (option.options && Object.keys(option.options).length > 0) {
+        entry.options = Object.fromEntries(
+          Object.keys(option.options).map((k) => [k, null])
+        );
+      } else {
+        entry.options = "__RECORD_STRING_UNKNOWN__";
+      }
+    }
+    result[key] = entry;
+  }
+  return result;
+}
+function generateGlobalOptionsType(globalOptions) {
+  const transformed = transformGlobalOptionsForType(globalOptions);
+  return toTypeLiteral(transformed).replaceAll(
+    '"__RECORD_STRING_UNKNOWN__"',
+    "Record<string, unknown>"
+  );
+}
 const definitions = defineCodeTemplate(
   "definitions",
   (ctx) => {
@@ -11595,8 +12403,8 @@ export default definitions
       fragmentNames.push(`'${file.definition.name}'`);
     }
     return `
-import type { GlobalOptionsKey, ValidFieldListTypes, BlockBundleWithNested, ValidGlobalConfigKeys } from '#blokkli-build/generated-types'
-import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput, ProviderDefinitionInput } from '${ctx.helper.relativePaths.TYPES}'
+import type { GlobalOptionsKey } from '#blokkli-build/generated-types'
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput, ProviderDefinitionInput } from '${ctx.helper.relativePaths.TYPES_DEFINITIONS}'
 
 export type BlockDefinition = BlockDefinitionInput<BlockDefinitionOptionsInput, GlobalOptionsKey[]>
 export type FragmentDefinition = FragmentDefinitionInput<Record<string, any>, GlobalOptionsKey[]>
@@ -11604,9 +12412,7 @@ export type ProviderDefinition = ProviderDefinitionInput<Record<string, any>, Gl
 
 export type BlokkliFragmentName = ${fragmentNames.join(" | ") || "never"}
 
-const globalOptions = ${JSON.stringify(ctx.helper.options.globalOptions || {})} as const
-
-export type GlobalOptionsType = typeof globalOptions
+export type GlobalOptionsType = ${generateGlobalOptionsType(ctx.helper.options.globalOptions || {})}
 
 export type Definitions = {
   blocks: BlockDefinition[]
@@ -11617,7 +12423,7 @@ export type Definitions = {
   renderKey: string
 }
 
-const definitions: Definitions
+declare const definitions: Definitions
 
 export default definitions
 `;
@@ -11872,8 +12678,10 @@ const generatedTypes = defineCodeTemplate(
     return `export {}`;
   },
   (ctx) => {
+    const fromLibraryBlockBundle = ctx.helper.options.fromLibraryBlockBundle;
+    const fragmentBlockBundle = ctx.helper.options.fragmentBlockBundle;
     const mappedGetBundlePropsType = (bundle, file) => {
-      if (bundle === "from_library" || bundle === "blokkli_fragment") {
+      if (bundle === fromLibraryBlockBundle || bundle === fragmentBlockBundle) {
         return {
           typeName: "Props",
           from: file.filePath
@@ -11899,7 +12707,7 @@ const generatedTypes = defineCodeTemplate(
       if (file.hasBlokkliField) {
         blockBundlesWithNested.push(file.definition.bundle);
       }
-      if (file.definition.bundle !== "from_library") {
+      if (file.definition.bundle !== ctx.helper.options.fromLibraryBlockBundle && !validBlockBundles.includes(file.definition.bundle)) {
         validBlockBundles.push(file.definition.bundle);
       }
       if (!file.definition.renderFor) {
@@ -12188,7 +12996,9 @@ const chunkEditing = defineCodeTemplate(
       if (!fs.existsSync(file.filePath)) {
         continue;
       }
-      imports.push(`import ${file.identifier} from '${file.filePath}'`);
+      imports.push(
+        `import ${file.identifier} from '${file.filePath}?blokkliEditing=true'`
+      );
       file.variations.forEach((variation) => {
         map.set(variation, file.identifier);
       });
@@ -12216,6 +13026,24 @@ export declare const allComponents: Record<string, Component>
   }
 );
 
+const importMeta = defineFileTemplate("import-meta.d.ts", () => {
+  return `declare global {
+  interface ImportMeta {
+    /**
+     * Whether this block or fragment component is rendered in the editor
+     * bundle.
+     *
+     * This may ONLY used in components that contain "defineBlokkli" or "defineBlokkliFragment".
+     * It will always resolve to "false" if used in any other component.
+     */
+    readonly blokkliEditing: boolean
+  }
+}
+
+export {}
+`;
+});
+
 const TEMPLATES = [
   icons,
   features,
@@ -12224,6 +13052,7 @@ const TEMPLATES = [
   editAdapter,
   styles,
   config,
+  editorConfig,
   definitions,
   moduleTypes,
   runtimeOptions,
@@ -12233,7 +13062,8 @@ const TEMPLATES = [
   imports,
   optionsSchema,
   chunkGroup,
-  chunkEditing
+  chunkEditing,
+  importMeta
 ];
 
 class CollectedFeatureFile extends CollectedFile {
@@ -12256,9 +13086,7 @@ class CollectedFeatureFile extends CollectedFile {
       return false;
     }
     try {
-      const { object: definition, source } = parseTsObject(
-        this.objectLiteral
-      );
+      const { object: definition, source } = parseTsObject(this.objectLiteral);
       const regex = /\/Features\/([^/]+)\//;
       const componentName = this.filePath.match(regex)?.[1] || "";
       this.definition = {
@@ -12293,11 +13121,16 @@ class FeatureCollector extends Collector {
   constructor(helper) {
     super(helper);
     this.srcFromModule = helper.resolvers.module.resolve(
-      "./runtime/components/Edit/Features"
+      "./runtime/editor/features"
     );
   }
   getEnabledFeatures() {
-    return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id));
+    return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id)).filter((v) => {
+      if (!this.helper.isDev && v.id === "dev-mode") {
+        return false;
+      }
+      return true;
+    });
   }
   async init() {
     const builtinFeatures = await resolveFiles(
@@ -12408,7 +13241,8 @@ class ThemeData {
   }
 }
 
-const module = defineNuxtModule({
+const logger = useLogger("@blokkli/editor");
+const module$1 = defineNuxtModule({
   meta: {
     name,
     configKey: "blokkli",
@@ -12433,7 +13267,9 @@ const module = defineNuxtModule({
         default: false
       }
     },
-    chunkNames: ["global"]
+    chunkNames: ["global"],
+    fromLibraryBlockBundle: "from_library",
+    fragmentBlockBundle: "blokkli_fragment"
   },
   async setup(moduleOptions, nuxt) {
     const blokkliModules = moduleOptions.modules || [];
@@ -12442,7 +13278,12 @@ const module = defineNuxtModule({
         module.init.alterOptions(moduleOptions);
       }
     }
-    const helper = new ModuleHelper(nuxt, import.meta.url, moduleOptions);
+    const helper = new ModuleHelper(
+      nuxt,
+      logger,
+      import.meta.url,
+      moduleOptions
+    );
     const theme = new ThemeData(helper);
     const iconCollector = new IconCollector(helper);
     const featureCollector = new FeatureCollector(helper);
@@ -12454,6 +13295,10 @@ const module = defineNuxtModule({
     ];
     await Promise.all(collectors.map((v) => v.init()));
     await Promise.all(collectors.map((v) => v.runHooks()));
+    const hasErrors = collectors.flatMap((v) => v.validate()).some((v) => v);
+    if (!helper.isDev && hasErrors) {
+      throw new Error("Failed to build bl\xF6kkli due to validation errors.");
+    }
     const context = new ModuleContext(
       helper,
       iconCollector,
@@ -12483,10 +13328,6 @@ const module = defineNuxtModule({
     helper.addAlias("#blokkli-build", helper.paths.blokkliBuildDir);
     const moduleDir = import.meta.url;
     const resolver = createResolver(moduleDir);
-    nuxt.options.runtimeConfig.public.blokkli = {
-      itemEntityType: moduleOptions.itemEntityType || "",
-      defaultLanguage: moduleOptions.defaultLanguage || "en"
-    };
     nuxt.options.build.transpile.push(resolver.resolve("runtime"));
     helper.addComponent("BlokkliField");
     helper.addComponent("BlokkliEditable");
@@ -12500,21 +13341,13 @@ const module = defineNuxtModule({
     helper.addComposable("useBlokkliHelper");
     helper.addAlias(
       "#blokkli/analyzer",
-      resolver.resolve("runtime/components/Edit/Features/Analyze/analyzers")
+      resolver.resolve("runtime/editor/features/analyze/analyzers")
     );
     helper.addAlias("#blokkli-build", helper.paths.blokkliBuildDir);
     helper.addAlias("#blokkli/types", resolver.resolve("runtime/types"));
     helper.addAlias("#blokkli/constants", resolver.resolve("runtime/constants"));
-    helper.addAlias(
-      "#blokkli/plugins",
-      resolver.resolve("runtime/blokkliPlugins")
-    );
-    helper.addAlias(
-      "#blokkli/components",
-      resolver.resolve("runtime/components/Edit")
-    );
+    helper.addAlias("#blokkli/editor", resolver.resolve("runtime/editor"));
     helper.addAlias("#blokkli/helpers", resolver.resolve("runtime/helpers"));
-    helper.addAlias("#blokkli/adapter", resolver.resolve("runtime/adapter"));
     helper.addAlias(
       "#blokkli/runtime-helpers",
       resolver.resolve("runtime/helpers/runtimeHelpers")
@@ -12530,9 +13363,14 @@ const module = defineNuxtModule({
     addPlugin({
       src: resolver.resolve("runtime/plugins/blokkliDirectives")
     });
-    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, "defineBlokkli"));
-    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, "defineBlokkliFragment"));
-    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, "defineBlokkliProvider", 1));
+    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, helper, "defineBlokkli"));
+    addBuildPlugin(
+      RuntimeDefinitionPlugin(nuxt, helper, "defineBlokkliFragment")
+    );
+    addBuildPlugin(
+      RuntimeDefinitionPlugin(nuxt, helper, "defineBlokkliProvider", 1)
+    );
+    addBuildPlugin(BlokkliEditingPlugin(nuxt));
     if (nuxt.options.dev) {
       nuxt.hook("builder:watch", async (event, providedFilePath) => {
         const filePath = providedFilePath.startsWith("/") ? providedFilePath : helper.resolvers.src.resolve(providedFilePath);
@@ -12541,6 +13379,7 @@ const module = defineNuxtModule({
         for (const collector of collectors) {
           const result = await collector.handleWatchEvent(event, filePath);
           if (result.hasChanged) {
+            collector.validate();
             dependenciesToUpdate.push(...collector.getDependencyTypes());
           }
         }
@@ -12552,4 +13391,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };