@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

package/dist/module.mjs

@@ -1,14 +1,19 @@
-import path, { basename, extname } from 'node:path';
-import fs, { promises, existsSync } from 'node:fs';
-import { defineNuxtModule, createResolver, resolveFiles, addTemplate, addComponent, addBuildPlugin, addImports, addPlugin, updateTemplates } from '@nuxt/kit';
-import { defu, createDefu } from 'defu';
-import { relative } from 'pathe';
+import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, addTypeTemplate, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
 import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
+import { pathToFileURL } from 'node:url';
+import { parseURL, parseQuery } from 'ufo';
+import * as ts from 'typescript';
+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 { defu, createDefu } from 'defu';
 
-const version = "1.4.0-alpha.1";
+const version = "2.0.0-alpha.2";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -23,846 +28,918 @@ function sortObjectKeys(obj) {
   }
   return obj;
 }
-
-function falsy(value) {
-  return value !== null && value !== void 0;
+function toValidVariableName(input) {
+  let result = input.replace(/\W/g, "_");
+  if (/^\d/.test(result)) {
+    result = "_" + result;
+  }
+  if (result === "") {
+    result = "_empty";
+  }
+  return result;
 }
-const fileRegex = /\.vue$/;
-function estreeToObject(expression) {
-  return Object.fromEntries(
-    expression.properties.map((prop) => {
-      if (prop.type === "Property" && "name" in prop.key) {
-        if (prop.value.type === "Literal") {
-          return [prop.key.name, prop.value.value];
-        } else if (prop.value.type === "ObjectExpression") {
-          return [prop.key.name, estreeToObject(prop.value)];
-        } else if (prop.value.type === "ArrayExpression") {
-          return [
-            prop.key.name,
-            prop.value.elements.map((v) => {
-              if (v && "value" in v) {
-                return v.value;
-              }
-            }).filter(falsy)
-          ];
-        }
-      }
-      return null;
-    }).filter(falsy)
-  );
+function parseTsObject(tsObjectStr) {
+  const source = `(${tsObjectStr})`;
+  const result = ts.transpileModule(source, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ESNext,
+      module: ts.ModuleKind.None,
+      removeComments: true
+    }
+  });
+  const jsCode = result.outputText.trim();
+  const createObj = new Function(`return ${jsCode}`);
+  const object = createObj();
+  return { object, source: jsCode };
 }
-function buildRuntimeDefinition(definition) {
-  return {
-    bundle: definition.bundle
-  };
+function extractObjectLiteral(fileContents, composables) {
+  const composablesMatch = composables.join("|");
+  const pattern = `(${composablesMatch})\\(\\s*(\\{[\\s\\S]+?\\})\\s*\\)`;
+  const rgx = new RegExp(pattern);
+  const matches = rgx.exec(fileContents);
+  if (!matches) {
+    return;
+  }
+  return matches?.at(2);
+}
+function falsy(value) {
+  return value !== null && value !== void 0;
 }
-const DefinitionPlugin = (nuxt, composableName = "defineBlokkli") => createUnplugin(() => {
-  return {
-    name: "transform-file",
-    enforce: "post",
-    transform(source, id) {
-      if (!fileRegex.test(id)) {
-        return;
-      }
-      if (!source.includes(composableName)) {
-        return;
-      }
-      const s = new MagicString(source);
-      const parsed = this.parse(source, {
-        sourceType: "module",
-        ecmaVersion: "latest"
-      });
-      walk(parsed, {
-        enter: (node) => {
-          if (node.type !== "CallExpression" || node.callee.type !== "Identifier") {
-            return;
-          }
-          const callNode = node;
-          const name = "name" in callNode.callee && callNode.callee.name;
-          if (name === composableName) {
-            const arg = callNode.arguments[0];
-            const meta = callNode.arguments[0];
-            if (arg.type === "ObjectExpression") {
-              const definition = estreeToObject(arg);
-              const runtimeDefinition = buildRuntimeDefinition(definition);
-              const start = meta.start;
-              const end = meta.end;
-              s.overwrite(start, end, JSON.stringify(runtimeDefinition));
-            }
-          }
-        },
-        leave: () => {
-        }
-      });
-      if (s.hasChanged()) {
-        return {
-          code: s.toString(),
-          map: nuxt.options.sourcemap.client || nuxt.options.sourcemap.server ? s.generateMap({ hires: true }) : null
-        };
-      }
-      return source;
-    }
-  };
-});
 
-class BlockExtractor {
-  definitions = {};
-  fragmentDefinitions = {};
-  isBuild = false;
-  composableName;
-  fragmentComposableName;
-  buildDir;
-  imports;
-  constructor(isBuild = false, buildDir, imports) {
-    this.isBuild = isBuild;
-    this.buildDir = buildDir;
-    this.imports = imports;
-    this.composableName = "defineBlokkli";
-    this.fragmentComposableName = "defineBlokkliFragment";
+class CollectedFile {
+  constructor(filePath, fileContents) {
+    this.filePath = filePath;
+    this.fileContents = fileContents;
   }
-  /**
-   * Add files by path.
-   */
-  addFiles(files) {
-    return Promise.all(files.map((v) => this.handleFile(v)));
+  async handleChange(_helper) {
+    return Promise.resolve(true);
   }
-  async getIcon(componentPath) {
-    const folder = path.dirname(componentPath);
-    const iconPath = path.join(folder, "/icon.svg");
-    try {
-      await fs.promises.access(iconPath, fs.constants.F_OK);
-      const data = await fs.promises.readFile(iconPath);
-      return data.toString();
-    } catch {
+}
+class Collector {
+  constructor(helper) {
+    this.helper = helper;
+    this.files = /* @__PURE__ */ new Map();
+  }
+  files;
+  needsFileContents = true;
+  async addFile(filePath) {
+    if (this.needsFileContents) {
+      const contents = await this.helper.fileCache.read(filePath);
+      const file = this.createCollectedFile(filePath, contents.toString());
+      await file.handleChange(this.helper);
+      this.files.set(filePath, file);
+    } else {
+      const file = this.createCollectedFile(filePath);
+      await file.handleChange(this.helper);
+      this.files.set(filePath, file);
     }
   }
-  async getContextComponent(baseComponentPath, name) {
-    const folder = path.dirname(baseComponentPath);
-    const componentPath = path.join(folder, `/${name}.vue`);
-    try {
-      await fs.promises.access(componentPath, fs.constants.F_OK);
-      return componentPath;
-    } catch {
+  async handleAdd(filePath) {
+    const applies = await this.applies(filePath);
+    if (applies) {
+      await this.addFile(filePath);
+      return true;
     }
+    return false;
   }
-  /**
-   * Read the file and extract the blokkli component definitions.
-   *
-   * Returns a promise containing a boolean that indicated if the given file
-   * should trigger a rebuild of the query.
-   */
-  async handleFile(filePath2) {
-    const fileSource = await this.readFile(filePath2);
-    const extracted = this.extractSingle(fileSource, filePath2);
-    if (!extracted) {
-      if (this.definitions[filePath2]) {
-        this.definitions[filePath2] = void 0;
-        return true;
-      }
-      if (this.fragmentDefinitions[filePath2]) {
-        this.fragmentDefinitions[filePath2] = void 0;
-        return true;
-      }
+  async handleChange(filePath) {
+    const applies = await this.applies(filePath);
+    if (!applies) {
+      return this.handleUnlink(filePath);
+    }
+    const file = this.files.get(filePath);
+    if (!file) {
       return false;
     }
-    if ("bundle" in extracted.definition) {
-      const icon = await this.getIcon(filePath2);
-      const proxyComponent = await this.getContextComponent(filePath2, "proxy");
-      const diffComponent = await this.getContextComponent(filePath2, "diff");
-      if (this.definitions[filePath2] && this.definitions[filePath2]?.source === extracted.source) {
-        return false;
-      }
-      const extension = path.extname(filePath2);
-      const componentFileName = path.basename(filePath2, extension);
-      this.definitions[filePath2] = {
-        filePath: filePath2,
-        definition: extracted.definition,
-        icon,
-        proxyComponent,
-        diffComponent,
-        chunkName: this.isBuild ? extracted.definition.chunkName || "global" : "global",
-        componentName: "BlokkliComponent_" + extracted.definition.bundle + "_" + componentFileName,
-        source: extracted.source,
-        fileSource,
-        hasBlokkliField: fileSource.includes("<BlokkliField") || fileSource.includes("<blokkli-field") || fileSource.includes(':is="BlokkliField"')
-      };
-    } else if ("name" in extracted.definition) {
-      if (this.fragmentDefinitions[filePath2] && this.fragmentDefinitions[filePath2]?.source === extracted.source) {
-        return false;
-      }
-      this.fragmentDefinitions[filePath2] = {
-        filePath: filePath2,
-        definition: extracted.definition,
-        chunkName: this.isBuild ? extracted.definition.chunkName || "global" : "global",
-        componentName: "BlokkliFragmentComponent_" + extracted.definition.name,
-        source: extracted.source,
-        fileSource
-      };
+    if (this.needsFileContents) {
+      const contents = await this.helper.fileCache.read(filePath);
+      file.fileContents = contents.toString();
+      return await file.handleChange(this.helper);
     }
     return true;
   }
-  /**
-   * Extract the single text method calls.
-   */
-  extractSingle(code, filePath) {
-    const pattern = `(${this.composableName}|${this.fragmentComposableName})\\((\\{.+?\\})\\)`;
-    const rgx = new RegExp(pattern, "gms");
-    const source = rgx.exec(code)?.[2];
-    if (source) {
-      try {
-        const definition = eval(`(${source})`);
-        return { definition, source };
-      } catch (e) {
-        console.error(
-          `Failed to parse component "${filePath}": ${this.composableName} does not contain a valid object literal. No variables and methods are allowed inside ${this.composableName}().`,
-          e
-        );
-      }
+  handleUnlink(filePath) {
+    if (this.files.has(filePath)) {
+      this.files.delete(filePath);
+      return true;
     }
+    return false;
   }
-  /**
-   * Read the given file and return its contents.
-   */
-  readFile(filePath2) {
-    return fs.promises.readFile(filePath2).then((v) => {
-      return v.toString();
-    });
+  handleAddDir() {
+    return false;
+  }
+  handleUnlinkDir(folderPath) {
+    const allKeys = [...this.files.keys()];
+    const toRemove = allKeys.filter((filePath) => filePath.includes(folderPath));
+    if (toRemove.length) {
+      toRemove.forEach((key) => this.files.delete(key));
+      return true;
+    }
+    return false;
+  }
+  async handleWatchEvent(event, filePath) {
+    let hasChanged = false;
+    if (event === "add") {
+      hasChanged = await this.handleAdd(filePath);
+    } else if (event === "change") {
+      hasChanged = await this.handleChange(filePath);
+    } else if (event === "unlink") {
+      hasChanged = await this.handleUnlink(filePath);
+    } else if (event === "addDir") {
+      hasChanged = this.handleAddDir();
+    } else if (event === "unlinkDir") {
+      hasChanged = this.handleUnlinkDir(filePath);
+    }
+    return { hasChanged };
   }
-  /**
-   * Generate the template.
-   */
-  generateDefinitionTemplate(globalOptions = {}) {
-    const definitionDeclarations = Object.values(this.definitions).filter(falsy).map((v) => {
-      return `const ${v.componentName}: DefinitionItem = ${v.source}`;
-    }, {});
-    const allDefinitions = Object.values(this.definitions).filter(falsy).reduce((acc, v) => {
-      const bundle = v.definition.bundle;
-      const renderFor = v.definition.renderFor;
-      if (renderFor) {
-        const renderForList = Array.isArray(renderFor) ? renderFor : [renderFor];
-        renderForList.forEach((entry) => {
-          if ("parentBundle" in entry) {
-            acc.push(
-              `${bundle}__parent_block_${entry.parentBundle}: ${v.componentName}`
-            );
-          } else if ("fieldList" in entry) {
-            acc.push(
-              `${bundle}__field_list_type_${entry.fieldList}: ${v.componentName}`
-            );
-          } else if ("fieldListType" in entry) {
-            acc.push(
-              `${bundle}__field_list_type_${entry.fieldListType}: ${v.componentName}`
-            );
-          }
-        });
-      } else {
-        acc.push(`${bundle}: ${v.componentName}`);
-      }
-      return acc;
-    }, []);
-    const allFragmentDefinitions = Object.values(this.fragmentDefinitions).filter(falsy).map((v) => {
-      return `${v.definition.name}: ${v.source}`;
-    });
-    const icons = Object.values(this.definitions).filter(falsy).reduce((acc, v) => {
-      if (v.icon) {
-        acc[v.definition.bundle] = v.icon;
-      }
-      return acc;
-    }, {});
-    const allFragmentNames = Object.values(this.fragmentDefinitions).filter(falsy).map((v) => `'${v.definition.name}'`).join(" | ");
-    return `
-import type { GlobalOptionsKey, ValidFieldListTypes, BlockBundleWithNested } from './generated-types'
-import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput } from '${this.imports.TYPES}'
-export const globalOptions = ${JSON.stringify(globalOptions, null, 2)} as const
-
-type DefinitionItem = BlockDefinitionInput<BlockDefinitionOptionsInput, GlobalOptionsKey[]>
-
-${definitionDeclarations.join("\n")}
-
-export const icons: Record<string, string> = ${JSON.stringify(icons)}
-
-export const definitionsMap: Record<string, DefinitionItem> = {
-  ${allDefinitions.join(",\n")}
 }
 
-export const fragmentDefinitionsMap: Record<string, FragmentDefinitionInput<BlockDefinitionOptionsInput, GlobalOptionsKey[]>> = {
-  ${allFragmentDefinitions.join(",\n")}
+const DEFINE_BLOKKLI = "defineBlokkli";
+const DEFINE_BLOKKLI_FRAGMENT = "defineBlokkliFragment";
+function isEditComponent(filePath) {
+  return filePath.endsWith("/diff.vue") || filePath.endsWith("/proxy.vue");
 }
-
-export type BlokkliFragmentName = ${allFragmentNames || "never"}
-
-export const definitions: BlockDefinitionInput<any, GlobalOptionsKey[]>[] = Object.values(definitionsMap)
-export const fragmentDefinitions: FragmentDefinitionInput<any, GlobalOptionsKey[]>[] = Object.values(fragmentDefinitionsMap)
-
-/**
- * Get the block definition for the given field and parent context.
- */
-export function getDefinition(bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested): BlockDefinitionInput<Record<string, any>, GlobalOptionsKey[]>|undefined {
-  const forFieldListType = bundle + '__field_list_type_' + fieldListType
-  if (definitionsMap[forFieldListType]) {
-    return definitionsMap[forFieldListType]
+function isBlock(definition) {
+  return "bundle" in definition;
+}
+function getVariations(definition) {
+  if (!definition) {
+    return [];
   }
-  if (parentBundle) {
-    const forParentBundle = bundle + '__parent_block_' + parentBundle
-    if (definitionsMap[forParentBundle]) {
-      return definitionsMap[forParentBundle]
+  if (isBlock(definition)) {
+    const bundle = definition.bundle;
+    if (!definition.renderFor) {
+      return ["block:" + bundle];
     }
+    const renderFor = Array.isArray(definition.renderFor) ? definition.renderFor : [definition.renderFor];
+    return renderFor.map((v) => {
+      if ("parentBundle" in v) {
+        return `block:${bundle}__p:${v.parentBundle}`;
+      } else if ("fieldList" in v) {
+        return `block:${bundle}__f:${v.fieldList}`;
+      } else {
+        return `block:${bundle}__f:${v.fieldListType}`;
+      }
+    }).sort();
   }
-
-  return definitionsMap[bundle]
+  return [`fragment:${definition.name}`];
 }
-
-/**
- * Get the definition of the default block component.
- */
-export function getDefaultDefinition(bundle: string): BlockDefinitionInput<Record<string, any>, GlobalOptionsKey[]>|undefined {
-  return definitionsMap[bundle]
+function getIdentifier(definition) {
+  const type = isBlock(definition) ? "b" : "f";
+  const name = isBlock(definition) ? definition.bundle : definition.name;
+  return toValidVariableName(
+    type + "_" + hash(name + getVariations(definition).join("__"))
+  );
 }
-export const getFragmentDefinition = (name: string): FragmentDefinitionInput<Record<string, any>, GlobalOptionsKey[]>|undefined => fragmentDefinitionsMap[name]
-`;
+class CollectedBlockFile extends CollectedFile {
+  folder = "";
+  iconPath = null;
+  iconContents = null;
+  diffComponentPath = null;
+  proxyComponentPath = null;
+  type = null;
+  definition = null;
+  definitionSource = null;
+  hasBlokkliField = false;
+  identifier = "";
+  chunkName = "global";
+  variations = [];
+  objectLiteralString = "";
+  hasSiblingFile(name, helper) {
+    const siblingFilePath = path.join(this.folder, "/" + name);
+    if (helper.fileCache.fileExists(siblingFilePath)) {
+      return siblingFilePath;
+    }
+    return null;
   }
-  /**
-   * Generate the template for the block item options used for runtime (e.g. not during editing).
-   */
-  generateRuntimeOptionsTemplate(globalOptions = {}) {
-    const bundles = Object.values(this.definitions).filter(falsy).reduce((acc, definition2) => {
-      if (definition2.definition.renderFor) {
-        return acc;
+  async handleChange(helper) {
+    this.folder = dirname(this.filePath);
+    const diffComponentPath = this.hasSiblingFile("diff.vue", helper);
+    const proxyComponentPath = this.hasSiblingFile("proxy.vue", helper);
+    const objectLiteralString = extractObjectLiteral(this.fileContents, [
+      DEFINE_BLOKKLI,
+      DEFINE_BLOKKLI_FRAGMENT
+    ]);
+    if (objectLiteralString === this.objectLiteralString && diffComponentPath === this.diffComponentPath && proxyComponentPath === this.proxyComponentPath) {
+      return false;
+    }
+    this.objectLiteralString = objectLiteralString || "";
+    this.diffComponentPath = diffComponentPath;
+    this.proxyComponentPath = proxyComponentPath;
+    try {
+      if (this.objectLiteralString) {
+        const result = parseTsObject(
+          this.objectLiteralString
+        );
+        this.definition = result.object;
+        this.definitionSource = result.source;
       }
-      const bundle = definition2.definition.bundle;
-      const optionDefinitions = Object.entries(
-        definition2.definition.options || {}
+    } catch (e) {
+      console.error(
+        `Failed to parse component "${this.filePath}": The composabe does not contain a valid object literal. No variables and methods are allowed inside the composable.`,
+        e
       );
-      const options = {};
-      if (definition2.definition.globalOptions) {
-        definition2.definition.globalOptions.forEach((name) => {
-          const option = globalOptions[name];
-          options[name] = [option.type, option.default];
-        });
+      return false;
+    }
+    this.hasBlokkliField = this.fileContents.includes("<BlokkliField") || this.fileContents.includes("<blokkli-field") || this.fileContents.includes(':is="BlokkliField"');
+    this.chunkName = this.definition?.chunkName || "global";
+    this.identifier = this.definition ? getIdentifier(this.definition) : "";
+    if (!this.definition) {
+      this.type = null;
+    } else if (isBlock(this.definition)) {
+      if (this.definition.renderFor) {
+        this.type = "context";
+      } else {
+        this.type = "main";
       }
-      optionDefinitions.forEach(([name, option]) => {
-        options[name] = [option.type, option.default];
-      });
-      if (Object.values(options).length) {
-        acc[bundle] = options;
+    } else {
+      this.type = "fragment";
+    }
+    if (this.type === "main") {
+      this.iconPath = this.hasSiblingFile("icon.svg", helper);
+      if (this.iconPath) {
+        this.iconContents = await helper.fileCache.read(this.iconPath);
       }
-      return acc;
-    }, {});
-    function getOptionTypes(definition2) {
-      const definedOptions = definition2.options || {};
-      const blockGlobalOptions = definition2.globalOptions || [];
-      blockGlobalOptions.forEach((key) => {
-        if (globalOptions[key]) {
-          definedOptions[key] = globalOptions[key];
-        }
-      });
-      return Object.entries(definedOptions || {}).map(([key, option]) => {
-        if (option.type === "text") {
-          return `${key}: string`;
-        } else if (option.type === "checkbox") {
-          return `${key}: boolean`;
-        } else if (option.type === "checkboxes") {
-          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
-          return `${key}: Array<${possibleValues}>`;
-        } else if (option.type === "radios") {
-          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
-          return `${key}: ${possibleValues}`;
-        } else if (option.type === "color") {
-          return key + ": `#${string}`";
-        } else if (option.type === "range" || option.type === "number") {
-          return `${key}: number`;
+    } else {
+      this.iconPath = null;
+      this.iconContents = null;
+    }
+    this.variations = getVariations(this.definition);
+    return true;
+  }
+}
+class BlockCollector extends Collector {
+  patterns;
+  constructor(helper) {
+    super(helper);
+    this.patterns = (helper.options.pattern || []).map((pattern) => {
+      if (pattern.startsWith("/")) {
+        return pattern;
+      } else if (pattern.startsWith(".")) {
+        return helper.resolvers.src.resolve(pattern);
+      }
+      return resolveAlias(pattern);
+    });
+  }
+  async init() {
+    const files = await resolveFiles(
+      this.helper.nuxt.options.srcDir,
+      this.patterns
+    );
+    const promises = [];
+    for (const filePath of files) {
+      const applies = await this.applies(filePath);
+      if (applies) {
+        promises.push(this.addFile(filePath));
+      }
+    }
+    await Promise.all(promises);
+  }
+  runHooks() {
+    return this.helper.nuxt.hooks.callHook("blokkli:alter-blocks", {
+      blocks: [...this.files.values()]
+    });
+  }
+  createCollectedFile(filePath, fileContents = "") {
+    return new CollectedBlockFile(filePath, fileContents);
+  }
+  findBlockForFolderFile(iconPath) {
+    for (const file of this.files.values()) {
+      if (file.iconPath === iconPath || file.proxyComponentPath === iconPath || file.diffComponentPath === iconPath) {
+        return file.filePath;
+      }
+    }
+    return null;
+  }
+  async handleAdd(filePath) {
+    if (isEditComponent(filePath)) {
+      const folder = dirname(filePath);
+      for (const file of this.files.values()) {
+        if (file.folder === folder) {
+          return super.handleChange(file.filePath);
         }
-      });
+      }
     }
-    const runtimeMappedOptionTypes = Object.values(this.definitions).filter(falsy).map((definition2) => {
-      if (definition2.definition.renderFor) {
-        return null;
+    return super.handleAdd(filePath);
+  }
+  async handleUnlink(filePath) {
+    if (isEditComponent(filePath)) {
+      const folder = dirname(filePath);
+      for (const file of this.files.values()) {
+        if (file.folder === folder) {
+          return super.handleChange(file.filePath);
+        }
       }
-      const bundle = definition2.definition.bundle;
-      const options = getOptionTypes(definition2.definition).join("\n    ");
-      if (!options) {
-        return `  ${bundle}: {}`;
+    }
+    return super.handleUnlink(filePath);
+  }
+  async handleChange(filePath) {
+    if (filePath.includes("icon.svg")) {
+      const matchingBlockFilePath = this.findBlockForFolderFile(filePath);
+      if (matchingBlockFilePath) {
+        return this.handleChange(matchingBlockFilePath);
       }
-      return `  ${bundle}: {
-    ${options}
-  }`;
-    }).filter(falsy).join(",\n");
-    return `
-import type { BlockOptionDefinition } from '${this.imports.TYPES_BLOKK_OPTIONS}'
-
-export type RuntimeBlockOptionArray = {
-  [T in BlockOptionDefinition as T['type']]: [T['type'], T['default']]
-}[BlockOptionDefinition['type']]
-
-export type RuntimeBlockOptions = {
-${runtimeMappedOptionTypes}
+      return false;
+    }
+    return super.handleChange(filePath);
+  }
+  async applies(filePath) {
+    if (!filePath.endsWith(".vue")) {
+      return false;
+    }
+    if (!micromatch.isMatch(filePath, this.patterns)) {
+      return false;
+    }
+    if (isEditComponent(filePath)) {
+      return true;
+    }
+    const content = await this.helper.fileCache.read(filePath);
+    return content.includes(DEFINE_BLOKKLI) || content.includes(DEFINE_BLOKKLI_FRAGMENT);
+  }
+  getDependencyTypes() {
+    return ["block-content", "block-path"];
+  }
 }
 
-export const BLOCK_OPTIONS: Record<string, Record<string, RuntimeBlockOptionArray>> = ${JSON.stringify(bundles, null, 2)}
-`;
+function isVue(id, opts = {}) {
+  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  if (id.endsWith(".vue") && !search) {
+    return true;
   }
-  generateEditComponents() {
-    const buildContextComponents = (name) => {
-      const proxyComponents = Object.values(this.definitions).reduce((acc, v) => {
-        if (v?.[name]) {
-          acc[v.definition.bundle] = v[name];
-        }
-        return acc;
-      }, {});
-      const imports = Object.entries(proxyComponents).map(([bundle, proxyComponentPath]) => {
-        return `import ${name}_${bundle} from '${this.toBuildRelativePath(proxyComponentPath)}'`;
-      }).join("\n");
-      const maps = Object.keys(proxyComponents).map((bundle) => {
-        return `'${bundle}': ${name}_${bundle}`;
-      }).join(",  \n");
-      return {
-        imports,
-        maps
-      };
-    };
-    const proxy = buildContextComponents("proxyComponent");
-    const diff = buildContextComponents("diffComponent");
-    return `
-${proxy.imports}
-${diff.imports}
-
-const PROXY_COMPONENTS: Record<string, any> = {
-  ${proxy.maps}
+  if (!search) {
+    return false;
+  }
+  const query = parseQuery(search);
+  if (query.nuxt_component) {
+    return false;
+  }
+  if (query.macro && (search === "?macro=true" || !opts.type || opts.type.includes("script"))) {
+    return true;
+  }
+  const type = "setup" in query ? "script" : query.type;
+  if (!("vue" in query) || opts.type && !opts.type.includes(type)) {
+    return false;
+  }
+  return true;
 }
-
-const DIFF_COMPONENTS: Record<string, any> = {
-  ${diff.maps}
+function generateRuntimeArg(definition) {
+  const name = isBlock(definition) ? definition.bundle : definition.name;
+  return `${name}::${getIdentifier(definition)}`;
 }
+const RuntimeDefinitionPlugin = (nuxt, composableName) => {
+  const cache = /* @__PURE__ */ new Map();
+  function extract(source) {
+    const fromCache = cache.get(source);
+    if (fromCache) {
+      return fromCache;
+    }
+    const definition = parseTsObject(source);
+    if (definition.object) {
+      cache.set(source, definition.object);
+      return definition.object;
+    }
+    return null;
+  }
+  return createUnplugin(() => {
+    return {
+      name: "blokkli:runtime-definition",
+      enforce: "post",
+      transformInclude(id) {
+        return isVue(id);
+      },
+      transform(source) {
+        if (!source.includes(composableName)) {
+          return;
+        }
+        const s = new MagicString(source);
+        const parsed = this.parse(source, {
+          sourceType: "module",
+          ecmaVersion: "latest"
+        });
+        walk(parsed, {
+          enter: (node) => {
+            if (node.type !== "CallExpression" || node.callee.type !== "Identifier") {
+              return;
+            }
+            const callNode = node;
+            const name = "name" in callNode.callee && callNode.callee.name;
+            if (name === composableName) {
+              const arg = callNode.arguments[0];
+              if (!arg) {
+                return;
+              }
+              const meta = callNode.arguments[0];
+              if (arg.type === "ObjectExpression") {
+                const start = meta.start;
+                const end = meta.end;
+                const objectSource = s.slice(start, end);
+                const object = extract(objectSource);
+                if (object) {
+                  const arg2 = generateRuntimeArg(object);
+                  s.overwrite(start, end, `"${arg2}"`);
+                }
+              }
+            }
+          },
+          leave: () => {
+          }
+        });
+        if (s.hasChanged()) {
+          return {
+            code: s.toString(),
+            map: nuxt.options.sourcemap.client || nuxt.options.sourcemap.server ? s.generateMap({ hires: true }) : null
+          };
+        }
+      }
+    };
+  });
+};
 
-export function getBlokkliItemProxyComponent(bundle: string): any {
-  return PROXY_COMPONENTS[bundle]
+class IconCollector extends Collector {
+  needsFileContents = false;
+  srcFromModule;
+  constructor(helper) {
+    super(helper);
+    this.srcFromModule = helper.resolvers.module.resolve("./runtime/icons");
+  }
+  async init() {
+    const srcFromModule = this.helper.resolvers.module.resolve("./runtime/icons");
+    const filesModule = await resolveFiles(srcFromModule, "*.svg");
+    const filesApp = await resolveFiles(
+      this.helper.paths.srcDir,
+      "**/icon-blokkli-*.svg"
+    );
+    const allFiles = [...filesModule, ...filesApp];
+    await Promise.all(allFiles.map((filePath) => this.addFile(filePath)));
+  }
+  runHooks() {
+    return this.helper.nuxt.hooks.callHook("blokkli:alter-icons", {
+      icons: [...this.files.values()]
+    });
+  }
+  applies(filePath) {
+    return Promise.resolve(
+      filePath.startsWith(this.srcFromModule) || micromatch.isMatch(filePath, "icon-blokkli-*.svg")
+    );
+  }
+  getDependencyTypes() {
+    return ["icons"];
+  }
+  createCollectedFile(filePath, fileContents = "") {
+    return new CollectedFile(filePath, fileContents);
+  }
 }
 
-export function getBlokkliItemDiffComponent(bundle: string): any {
-  return DIFF_COMPONENTS[bundle]
-}
-`;
+class FileCache {
+  cache = /* @__PURE__ */ new Map();
+  existingFiles = /* @__PURE__ */ new Set();
+  /**
+   * Read a file from disk.
+   */
+  async read(filePath) {
+    const existing = this.cache.get(filePath);
+    if (existing) {
+      return existing;
+    }
+    const buffer = await fs.promises.readFile(filePath);
+    const content = buffer.toString();
+    this.cache.set(filePath, content);
+    return content;
   }
   /**
-   * Generate the options schema.
+   * Delete a file.
    */
-  generateOptionsSchema(globalOptions = {}) {
-    const schema = Object.values(this.definitions).filter(falsy).reduce((acc, v) => {
-      const existing = acc[v.definition.bundle] || {};
-      acc[v.definition.bundle] = defu(existing, v.definition.options || {});
-      const globalOptionKeys = v.definition.globalOptions || [];
-      globalOptionKeys.forEach((name) => {
-        if (globalOptions[name]) {
-          acc[v.definition.bundle][name] = globalOptions[name];
-        }
-      });
-      return acc;
-    }, {});
-    const sorted = sortObjectKeys(schema);
-    return JSON.stringify(sorted, null, 2);
+  delete(filePath) {
+    this.cache.delete(filePath);
   }
-  getBundlesWithGlobalOptions(key) {
-    return Object.values(this.definitions).map((definition2) => {
-      const globalOptions = definition2?.definition.globalOptions;
-      if (definition2 && globalOptions && globalOptions.includes(key)) {
-        return definition2.definition.bundle;
-      }
-    }).filter(falsy);
+  /**
+   * Check if a file exists.
+   */
+  fileExists(filePath) {
+    if (this.existingFiles.has(filePath)) {
+      return true;
+    }
+    const exists = fs.existsSync(filePath);
+    if (exists) {
+      this.existingFiles.add(filePath);
+    }
+    return exists;
   }
   /**
-   * Generate the default global options values template.
+   * Handles the builder watch event.
    */
-  generateDefaultGlobalOptions(globalOptions = {}) {
-    const defaults = Object.entries(globalOptions).reduce(
-      (acc, [key, option]) => {
-        if (option.default !== void 0 && option.default !== null) {
-          acc[key] = {
-            default: option.default,
-            type: option.type
-          };
-        }
-        return acc;
-      },
-      {}
-    );
-    return `import type { BlockOptionDefinition } from '${this.imports.TYPES_BLOKK_OPTIONS}'
-
-type GlobalOptionsDefaults = {
-  type: BlockOptionDefinition['type']
-  default: any
-}
-
-export const bundlesWithVisibleLanguage: string[] = ${JSON.stringify(this.getBundlesWithGlobalOptions(BK_VISIBLE_LANGUAGES))}
-export const bundlesWithHiddenGlobally: string[] = ${JSON.stringify(this.getBundlesWithGlobalOptions(BK_HIDDEN_GLOBALLY))}
-
-export const globalOptionsDefaults: Record<string, GlobalOptionsDefaults> = ${JSON.stringify(
-      defaults,
-      null,
-      2
-    )} as const`;
-  }
-  generateTypesTemplate(globalOptions, chunkNames, fieldListTypes, getBundlePropsType) {
-    const allDefintions = Object.values(
-      this.definitions
-    ).map((v) => v?.definition).filter(falsy);
-    const validChunkNames = chunkNames.map((v) => {
-      return `'${v}'`;
-    }).join(" | ");
-    const validFieldListTypes = fieldListTypes.map((v) => {
-      return `'${v}'`;
-    }).join(" | ");
-    const validGlobalOptions = Object.keys(globalOptions).map((v) => {
-      return `'${v}'`;
-    }).join(" | ");
-    const blockBundlesWithNested = Object.values(this.definitions).filter(falsy).filter((v) => v.hasBlokkliField).map((v) => {
-      return `'${v.definition.bundle}'`;
-    }).join(" | ");
-    const validBlockBundles = allDefintions.filter((v) => v.bundle !== "from_library").map((v) => {
-      return `'${v.bundle}'`;
-    }).join(" | ");
-    function getOptionTypes(definition2) {
-      const definedOptions = definition2.options || {};
-      const blockGlobalOptions = definition2.globalOptions || [];
-      blockGlobalOptions.forEach((key) => {
-        if (globalOptions[key]) {
-          definedOptions[key] = globalOptions[key];
-        }
-      });
-      const options = Object.entries(definedOptions || {}).map(([key, option]) => {
-        if (option.type === "text") {
-          return `${key}: string | undefined`;
-        } else if (option.type === "checkbox") {
-          return `${key}: '1' | '0' | undefined`;
-        } else if (option.type === "radios" || option.type === "checkboxes") {
-          return `${key}: string | undefined`;
-        } else if (option.type === "color") {
-          return `${key}: string | undefined`;
-        } else if (option.type === "range" || option.type === "number") {
-          return `${key}: number | string | undefined`;
-        }
-      }).join("\n    ");
-      return `{
-    ${options}
-  }`;
-    }
-    const propTypeImports = {};
-    const typedFieldListItems = [];
-    const definitions = Object.entries(this.definitions);
-    const mappedGetBundlePropsType = (bundle, definition2) => {
-      if (bundle === "from_library" || bundle === "blokkli_fragment") {
-        return {
-          typeName: "Props",
-          from: definition2.filePath
-        };
-      } else if (getBundlePropsType) {
-        return getBundlePropsType(bundle, definition2);
-      }
-      return null;
-    };
-    for (let i = 0; i < definitions.length; i++) {
-      const [_, definition2] = definitions[i];
-      if (!definition2) {
-        continue;
-      }
-      if (definition2.definition.renderFor) {
-        continue;
-      }
-      const bundle = definition2.definition.bundle;
-      const options = getOptionTypes(definition2.definition);
-      const generatedTypeName = `FieldListItem_${bundle}`;
-      const lines = [`  bundle: '${bundle}'`, `options: ${options}`];
-      const bundlePropsType = mappedGetBundlePropsType(bundle, definition2);
-      if (bundlePropsType) {
-        const { typeName, from } = bundlePropsType;
-        if (!propTypeImports[from]) {
-          propTypeImports[from] = [];
+  async handleWatchEvent(event, filePath) {
+    if (event === "add") {
+      this.existingFiles.add(filePath);
+      this.cache.delete(filePath);
+    } else if (event === "change") {
+      this.existingFiles.add(filePath);
+      this.cache.delete(filePath);
+    } else if (event === "unlink") {
+      this.existingFiles.delete(filePath);
+      this.cache.delete(filePath);
+    } else if (event === "unlinkDir") {
+      const filePaths = [...this.existingFiles.keys()];
+      filePaths.forEach((v) => {
+        if (v.startsWith(filePath)) {
+          this.existingFiles.delete(v);
+          this.cache.delete(v);
         }
-        propTypeImports[from].push({ bundle, typeName });
-        lines.push(`props: Bundle_${bundle}_Props`);
-      }
-      const typeDefinition = `
-type ${generatedTypeName} = {
-${lines.join("\n  ")}
-}`;
-      typedFieldListItems.push({
-        typeName: generatedTypeName,
-        typeDefinition
       });
     }
-    const propTypeImportStatements = Object.entries(propTypeImports).map(([from, items]) => {
-      const imports = items.map((v) => {
-        return `${v.typeName} as Bundle_${v.bundle}_Props`;
-      }).join(",\n  ");
-      const importPath = this.toBuildRelativePath(from);
-      return `import type {
-  ${imports}
-} from '${importPath}'`;
-    }).join("\n");
-    return `
-${propTypeImportStatements}
-import type { FieldListItem } from "${this.imports.TYPES}"
-
-export type ValidFieldListTypes = ${validFieldListTypes}
-
-export type BlockBundle = ${validBlockBundles || `''`}
-
-export type BlockBundleWithNested = ${blockBundlesWithNested || `''`}
-
-export type ValidChunkNames = ${validChunkNames}
-
-export type GlobalOptionsKey = ${validGlobalOptions || "never"}
-
-export type ValidGlobalConfigKeys = Array<GlobalOptionsKey>
-
-${typedFieldListItems.map((v) => v.typeDefinition).join("\n\n")}
-
-export type FieldListItemTyped = Omit<FieldListItem, 'props'> & (${typedFieldListItems.map((v) => v.typeName).join(" | ")})
-export type FieldListItemTypedArray = Array<FieldListItemTyped>
-`;
   }
-  generateChunkGroupTemplate(chunkName) {
-    return this.generateChunkGroup(
-      chunkName,
-      chunkName,
-      { ...this.definitions, ...this.fragmentDefinitions },
-      true
+}
+
+function onlyUnique(value, index, self) {
+  return self.indexOf(value) === index;
+}
+class ModuleHelper {
+  constructor(nuxt, moduleUrl, providedOptions) {
+    this.nuxt = nuxt;
+    this.isDev = nuxt.options.dev;
+    this.isModuleBuild = false;
+    this.fileCache = new FileCache();
+    this.resolvers = {
+      module: createResolver(moduleUrl),
+      build: createResolver(nuxt.options.buildDir),
+      src: createResolver(nuxt.options.srcDir),
+      app: createResolver(nuxt.options.dir.app)
+    };
+    this.paths = {
+      blokkliBuildDir: this.resolvers.build.resolve("blokkli"),
+      srcDir: nuxt.options.srcDir,
+      editAdapter: ""
+    };
+    this.relativePaths = {
+      TYPES: relative(
+        this.paths.blokkliBuildDir,
+        this.resolvers.module.resolve("./runtime/types/index.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")
+      ),
+      TYPES_THEME: relative(
+        this.paths.blokkliBuildDir,
+        this.resolvers.module.resolve("./runtime/types/theme.ts")
+      ),
+      TYPES_BLOKK_OPTIONS: relative(
+        this.paths.blokkliBuildDir,
+        this.resolvers.module.resolve("./runtime/types/blokkOptions.ts")
+      )
+    };
+    const pattern = providedOptions.pattern || [];
+    pattern.push(
+      this.resolvers.module.resolve(
+        "./runtime/components/Blocks/FromLibrary/*.vue"
+      )
+    );
+    pattern.push(
+      this.resolvers.module.resolve(
+        "./runtime/components/Blocks/Fragment/*.vue"
+      )
     );
+    const fieldListTypes = providedOptions.fieldListTypes || [];
+    if (!fieldListTypes.includes("default")) {
+      fieldListTypes.push("default");
+    }
+    const chunkNames = providedOptions.chunkNames || [];
+    if (!chunkNames.includes("global")) {
+      chunkNames.push("global");
+    }
+    this.options = {
+      ...providedOptions,
+      pattern,
+      fieldListTypes: fieldListTypes.filter(onlyUnique),
+      chunkNames: chunkNames.filter(onlyUnique)
+    };
+    this.paths.editAdapter = this.findEditAdapterPath();
   }
+  relativePaths;
+  paths;
+  resolvers;
+  fileCache;
+  options;
+  isDev;
+  isModuleBuild;
   /**
-   * Generate the template.
+   * Transform the path relative to the module's build directory.
+   *
+   * @param path - The absolute path.
+   *
+   * @returns The path relative to the module's build directory.
    */
-  generateImportsTemplate(chunkNames) {
-    const chunkImports = chunkNames.filter((v) => v !== "global").map((chunkName) => {
-      return `${chunkName}: () => import('./chunk-${chunkName}')`;
-    });
-    const nonGlobalChunkMapping = Object.values(this.definitions).reduce((acc, v) => {
-      if (v && v.chunkName !== "global") {
-        acc["block_" + v.definition.bundle] = v.chunkName;
-      }
-      return acc;
-    }, {});
-    const nonGlobalFragmentChunkMapping = Object.values(
-      this.fragmentDefinitions
-    ).reduce((acc, v) => {
-      if (v && v.chunkName !== "global") {
-        acc["fragment_" + v.definition.name] = v.chunkName;
-      }
-      return acc;
-    }, {});
-    return `
-    import { defineAsyncComponent } from '#imports'
-    ${this.generateChunkGroup("global", "global", this.definitions)}
-    ${this.generateChunkGroup(
-      "global",
-      "globalFragments",
-      this.fragmentDefinitions
-    )}
-
-const chunks: Record<string, () => Promise<any>> = {
-  ${chunkImports.join(",\n  ")}
-}
-
-const chunkMapping: Record<string, string> = ${JSON.stringify(
-      nonGlobalChunkMapping,
-      null,
-      2
-    )}
-
-const fragmentChunkMapping: Record<string, string> = ${JSON.stringify(
-      nonGlobalFragmentChunkMapping,
-      null,
-      2
-    )}
-
-function componentOrFunction(component: any) {
-  if (typeof component === 'object') {
-    return component
-  }
-
-  return defineAsyncComponent(() => component())
-}
-
-export function getBlokkliItemComponent(bundle: string, fieldListType?: string, parentBundle?: string): any {
-  const forFieldListType = 'block_' + bundle + '__field_list_type_' + fieldListType
-  if (global[forFieldListType]) {
-    return componentOrFunction(global[forFieldListType])
+  toModuleBuildRelative(path) {
+    return relative(this.paths.blokkliBuildDir, path);
   }
-  if (parentBundle) {
-    const forParentBundle = 'block_' + bundle + '__parent_block_' + parentBundle
-    if (global[forParentBundle]) {
-      return componentOrFunction(global[forParentBundle])
+  findEditAdapterPath() {
+    const filePath = this.resolvers.app.resolve("blokkli.editAdapter.ts");
+    if (this.fileCache.fileExists(filePath)) {
+      return filePath;
+    }
+    if (this.options.editAdapterPath && this.fileCache.fileExists(this.options.editAdapterPath)) {
+      return this.options.editAdapterPath;
     }
+    throw new Error(`Missing bl\xF6kkli edit adapter at "${filePath}"`);
   }
-  const key = 'block_' + bundle
-  if (global[key]) {
-    return componentOrFunction(global[key])
+  getChunkNames() {
+    return this.options.chunkNames || ["global"];
   }
-  const chunkName = chunkMapping[key]
-  if (chunkName) {
-    return defineAsyncComponent(() => chunks[chunkName]().then(chunk => {
-      return chunk.default[key]
-    }))
+  addComponent(name) {
+    addComponent({
+      filePath: this.resolvers.module.resolve("./runtime/components/" + name),
+      name,
+      global: true
+    });
   }
-}
-
-export function getBlokkliFragmentComponent(name: string): any {
-  const key = 'fragment_' + name
-  if (globalFragments[key]) {
-    return componentOrFunction(globalFragments[key])
+  addComposable(name) {
+    addImports({
+      name,
+      from: this.resolvers.module.resolve("./runtime/composables/" + name)
+    });
   }
-  const chunkName = fragmentChunkMapping[key]
-  if (chunkName) {
-    return defineAsyncComponent(() => chunks[chunkName]().then(chunk => {
-      return chunk.default[key]
-    }))
+  addAlias(name, path) {
+    this.nuxt.options.alias[name] = path;
+    this.nuxt.options.nitro.typescript ||= {};
+    this.nuxt.options.nitro.typescript.tsConfig ||= {};
+    this.nuxt.options.nitro.typescript.tsConfig.compilerOptions ||= {};
+    this.nuxt.options.nitro.typescript.tsConfig.compilerOptions.paths ||= {};
+    this.nuxt.options.nitro.typescript.tsConfig.compilerOptions.paths[name] = [
+      path
+    ];
+    this.nuxt.options.nitro.typescript.tsConfig.compilerOptions.paths[name + "/*"] = [path + "/*"];
+    this.nuxt.options.typescript.tsConfig ||= {};
+    this.nuxt.options.typescript.tsConfig.compilerOptions ||= {};
+    this.nuxt.options.typescript.tsConfig.compilerOptions.paths ||= {};
+    this.nuxt.options.typescript.tsConfig.compilerOptions.paths[name] = [path];
+    this.nuxt.options.typescript.tsConfig.compilerOptions.paths[name + "/*"] = [
+      path + "/*"
+    ];
   }
 }
-`;
+
+const WRITE = false;
+class ModuleContext {
+  constructor(helper, icons, features, blocks, theme) {
+    this.helper = helper;
+    this.icons = icons;
+    this.features = features;
+    this.blocks = blocks;
+    this.theme = theme;
   }
-  toBuildRelativePath(path2) {
-    if (!path2.startsWith("/")) {
-      return path2;
+  templates = [];
+  templateContents = /* @__PURE__ */ new Map();
+  getTemplateContents(type, name) {
+    const contents = this.templateContents.get(type + name);
+    if (contents === void 0) {
+      throw new Error(
+        `Failed to get contents for template "${name}" of type ${type}`
+      );
     }
-    return relative(this.buildDir, path2);
+    return contents;
   }
-  /**
-   * Generate the template.
-   */
-  generateChunkGroup(chunkName, exportName, inputDefinitions, addExport) {
-    const definitions = Object.values(inputDefinitions).filter((v) => {
-      return v?.chunkName === chunkName;
-    }).filter(falsy);
-    const imports = definitions.map((v) => {
-      if (this.isBuild) {
-        return `import ${v.componentName} from '${this.toBuildRelativePath(v.filePath)}'`;
+  setTemplateContents(type, name, contents) {
+    this.templateContents.set(type + name, contents.trim());
+  }
+  async generateTemplates(dependencies) {
+    for (const template of this.templates) {
+      if (dependencies?.length) {
+        const shouldUpdate = dependencies.some(
+          (v) => template.options.dependencies.includes(v)
+        );
+        if (!shouldUpdate) {
+          continue;
+        }
+      }
+      if (template.type === "code") {
+        this.setTemplateContents(
+          "code",
+          template.name,
+          await template.buildCode(this)
+        );
+        this.setTemplateContents(
+          "types",
+          template.name,
+          await template.buildTypes(this)
+        );
       } else {
-        return `const ${v.componentName} = () => import('${this.toBuildRelativePath(v.filePath)}')`;
+        this.setTemplateContents(
+          "file",
+          template.fileName,
+          await template.build(this)
+        );
       }
-    });
-    const map = definitions.reduce((acc, v) => {
-      if ("bundle" in v.definition) {
-        const bundle = v.definition.bundle;
-        const renderFor = v.definition.renderFor;
-        if (!renderFor) {
-          acc.push(`block_${v.definition.bundle}: ${v.componentName}`);
-        } else {
-          const renderForList = Array.isArray(renderFor) ? renderFor : [renderFor];
-          renderForList.forEach((entry) => {
-            if ("parentBundle" in entry) {
-              acc.push(
-                `block_${bundle}__parent_block_${entry.parentBundle}: ${v.componentName}`
-              );
-            } else if ("fieldList" in entry) {
-              acc.push(
-                `block_${bundle}__field_list_type_${entry.fieldList}: ${v.componentName}`
-              );
-            } else if ("fieldListType" in entry) {
-              acc.push(
-                `block_${bundle}__field_list_type_${entry.fieldListType}: ${v.componentName}`
-              );
+    }
+  }
+  addTemplate(template) {
+    this.templates.push(template);
+    if (template.type === "code") {
+      addTemplate({
+        filename: `blokkli/${template.name}.js`,
+        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);
             }
-          });
+          }
+          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({
+          filename,
+          write: true,
+          getContents: () => this.getTemplateContents("file", template.fileName)
+        });
       } else {
-        acc.push(`fragment_${v.definition.name}: ${v.componentName}`);
+        addTemplate({
+          filename,
+          write: true,
+          getContents: () => this.getTemplateContents("file", template.fileName)
+        });
       }
-      return acc;
-    }, []);
-    let content = `
-${imports.join("\n")}
-
-const ${exportName}: Record<string, any> = {
-  ${map.join(",\n  ")}
-}
-`;
-    if (addExport) {
-      content += `export default ${exportName}`;
     }
-    return content;
   }
 }
 
-class Extractor {
-  definitions = {};
-  isBuild = false;
-  composableName;
-  constructor(isBuild = false) {
-    this.isBuild = isBuild;
-    this.composableName = "defineBlokkliFeature";
-  }
-  /**
-   * Add files by path.
-   */
-  addFiles(files) {
-    return Promise.all(files.map((v) => this.handleFile(v)));
-  }
-  /**
-   * Read the file and extract the blokkli component definitions.
-   *
-   * Returns a promise containing a boolean that indicated if the given file
-   * should trigger a rebuild of the query.
-   */
-  async handleFile(filePath2) {
-    const fileSource = await this.readFile(filePath2);
-    const extracted = this.extractSingle(fileSource, filePath2);
-    if (!extracted) {
-      if (this.definitions[filePath2]) {
-        this.definitions[filePath2] = void 0;
-        return true;
-      }
-      return false;
-    }
-    const { definition: definition2, source: source2 } = extracted;
-    if (!this.definitions[filePath2]) {
-      const regex = /\/Features\/([^/]+)\//;
-      const componentName = filePath2.match(regex)?.[1] || "";
-      this.definitions[filePath2] = {
-        id: definition2.id,
-        componentName,
-        componentPath: filePath2,
-        filePath: filePath2,
-        definition: definition2,
-        source: source2
-      };
-      return true;
+function defineCodeTemplate(name, buildCode, buildTypes, options) {
+  return {
+    type: "code",
+    name,
+    buildCode,
+    buildTypes,
+    options: {
+      dependencies: options?.dependencies || [],
+      write: !!options?.write
     }
-    if (this.definitions[filePath2]?.definition === definition2) {
-      return false;
+  };
+}
+function defineFileTemplate(fileName, build) {
+  return {
+    type: "file",
+    fileName,
+    build,
+    options: {
+      dependencies: [],
+      write: true
     }
-    this.definitions[filePath2].definition = definition2;
-    return true;
+  };
+}
+function withHelper(cb) {
+  return cb;
+}
+
+function toObject(name, map, noExport) {
+  const lines = [...map.entries()].map(([key, value]) => {
+    return `'${key}': ${value}`;
+  }).sort().join(",\n  ");
+  if (noExport) {
+    return `
+const ${name} = {
+  ${lines}
+}
+`;
   }
-  /**
-   * Extract the single text method calls.
-   */
-  extractSingle(code, filePath) {
-    const pattern = this.composableName + "\\((\\{.+?\\})\\)";
-    const rgx = new RegExp(pattern, "gms");
-    const source = rgx.exec(code)?.[1];
-    if (source) {
-      try {
-        const definition = eval(`(${source})`);
-        return { definition, source };
-      } catch (e) {
-        console.error(
-          `Failed to parse component "${filePath}": ${this.composableName} does not contain a valid object literal. No variables and methods are allowed inside ${this.composableName}().`,
-          e
-        );
-      }
+  return `
+export const ${name} = {
+  ${lines}
+}
+`;
+}
+function toImports(map) {
+  return [...map.entries()].map(([key, path]) => {
+    return `import ${key} from '${path}'`;
+  }).sort().join("\n");
+}
+
+const icons = defineCodeTemplate(
+  "icons",
+  (ctx) => {
+    const imports = /* @__PURE__ */ new Map();
+    const icons = /* @__PURE__ */ new Map();
+    const files = ctx.icons.files.values();
+    for (const file of files) {
+      const name = basename(file.filePath, ".svg").toLowerCase();
+      const importName = "icon_" + toValidVariableName(name);
+      imports.set(importName, `${file.filePath}?raw`);
+      icons.set(name, importName);
     }
+    return `${toImports(imports)}
+
+${toObject("icons", icons)}
+`;
+  },
+  (ctx) => {
+    const allIconNames = [...ctx.icons.files.values()].map((file) => {
+      return basename(file.filePath, ".svg").toLowerCase();
+    }).sort().map((name) => `"${name}"`).join("\n  | ");
+    return `
+export type BlokkliIcon =
+  | ${allIconNames}
+export const icons: Record<BlokkliIcon, string>
+`;
+  },
+  {
+    dependencies: ["icons"]
   }
-  /**
-   * Read the given file and return its contents.
-   */
-  readFile(filePath2) {
-    return fs.promises.readFile(filePath2).then((v) => {
-      return v.toString();
-    });
-  }
-  getFeatures() {
-    return Object.values(this.definitions).filter(falsy);
+);
+
+const features = defineCodeTemplate(
+  "features",
+  (ctx) => {
+    const features = ctx.features.getEnabledFeatures().sort((a, b) => b.id.localeCompare(a.id));
+    const featuresComponents = /* @__PURE__ */ new Map();
+    const definitions = [];
+    const declarations = [];
+    const imports = /* @__PURE__ */ new Map();
+    for (const feature of features) {
+      const componentVarName = toValidVariableName(`component_${feature.id}`);
+      const declarationVarName = toValidVariableName(`feature_${feature.id}`);
+      declarations.push(
+        `const ${declarationVarName} = ${feature.definitionSource}`
+      );
+      definitions.push(declarationVarName);
+      imports.set(componentVarName, feature.componentPath);
+      featuresComponents.set(feature.id, componentVarName);
+    }
+    const availableFeaturesAtBuild = features.map((v) => v.id);
+    return `${toImports(imports)}
+
+export const availableFeaturesAtBuild = ${JSON.stringify(
+      availableFeaturesAtBuild.sort()
+    )}
+
+${toObject("featureComponents", featuresComponents)}
+
+${declarations.join("\n\n")}
+
+export const featureDefinitions = [
+  ${definitions.join(",\n  ")}
+]
+`;
+  },
+  (ctx) => {
+    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 { Component } from 'vue'
+
+type AdapterMethods = keyof BlokkliAdapter<any>
+
+export type ValidFeatureKey = ${availableFeaturesAtBuild.map((v) => '"' + v + '"').join(" | ")}
+
+export declare const featureComponents: Record<ValidFeatureKey, Component>
+export declare const featureDefinitions: FeatureDefinition[]
+export declare const availableFeaturesAtBuild: ValidFeatureKey[]
+`;
+  },
+  {
+    dependencies: ["features"]
   }
-}
+);
+
+const featuresJson = defineFileTemplate("features-data.json", async (ctx) => {
+  const features = [...ctx.features.files.values()];
+  const featuresData = await Promise.all(
+    features.map(async (v) => {
+      const docsPath = v.filePath.replace("index.vue", "docs.md");
+      let docs = "";
+      if (ctx.helper.fileCache.fileExists(docsPath)) {
+        docs = await ctx.helper.fileCache.read(docsPath);
+      }
+      return {
+        ...v,
+        repoRelativePath: v.filePath.replace(/.*\/src/, "/src"),
+        docs
+      };
+    })
+  );
+  return JSON.stringify(featuresData, null, 2);
+});
 
 const addCommentToItem$2 = {
 	source: "Comment",
@@ -6222,12 +6299,66 @@ const it = {
 	validationsTourText: validationsTourText
 };
 
-const translations = {
+const translations$1 = {
   de,
   fr,
   it
 };
 
+const translations = defineCodeTemplate(
+  "translations",
+  (ctx) => {
+    const translations = {};
+    Object.keys(translations$1).forEach((language) => {
+      translations[language] = {};
+      Object.keys(translations$1[language]).forEach((key) => {
+        translations[language][key] = translations$1[language][key].translation;
+      });
+    });
+    const merged = defu(ctx.helper.options.translations, translations);
+    return `export const translations = ${JSON.stringify(merged, null, 2)}`;
+  },
+  () => {
+    return `
+export declare const translations: Record<string, Record<string, string>>
+`;
+  }
+);
+
+const editAdapter = defineCodeTemplate(
+  "edit-adapter",
+  (ctx) => {
+    const pathRelative = ctx.helper.toModuleBuildRelative(
+      ctx.helper.paths.editAdapter
+    );
+    return `
+  import adapter from '${pathRelative}'
+
+export default adapter
+`;
+  },
+  (ctx) => {
+    return `
+import type { BlokkliAdapterFactory } from '${ctx.helper.relativePaths.ADAPTER}'
+
+declare const adapter: BlokkliAdapterFactory<any>
+
+export default adapter
+`;
+  }
+);
+
+const styles = defineFileTemplate("styles.css", (ctx) => {
+  const cssFilePath = ctx.helper.resolvers.module.resolve(
+    "./runtime/css/output.css"
+  );
+  return `
+@import url("${relative(ctx.helper.paths.blokkliBuildDir, cssFilePath)}");
+
+${ctx.theme.css}
+`;
+});
+
 const accent$3 = {
 	"50": [
 		237,
@@ -6992,27 +7123,871 @@ const nuxt = {
 	lime: lime
 };
 
-const themes = {
-  fire,
-  arctic,
-  gruvbox,
-  nuxt
-};
-const getTheme = (v) => {
-  if (typeof v === "string") {
-    if (v === "arctic") {
-      return themes.arctic;
-    } else if (v === "gruvbox") {
-      return themes.gruvbox;
-    } else if (v === "fire") {
-      return themes.fire;
-    } else if (v === "nuxt") {
-      return themes.nuxt;
+const themes = {
+  fire,
+  arctic,
+  gruvbox,
+  nuxt
+};
+const getTheme = (v) => {
+  if (typeof v === "string") {
+    if (v === "arctic") {
+      return themes.arctic;
+    } else if (v === "gruvbox") {
+      return themes.gruvbox;
+    } else if (v === "fire") {
+      return themes.fire;
+    } else if (v === "nuxt") {
+      return themes.nuxt;
+    }
+    throw new Error(`Invalid theme name: ${v}`);
+  }
+  return v || {};
+};
+
+const config = defineCodeTemplate(
+  "config",
+  (ctx) => {
+    const settingsOverride = ctx.helper.options.settingsOverride || {};
+    return `
+export const hasCustomTheme = ${JSON.stringify(ctx.theme.hasCustomTheme)}
+
+export const themes = ${JSON.stringify(themes, null, 2)}
+
+export const theme = ${JSON.stringify(ctx.theme.fullTheme, null, 2)}
+
+export const settingsOverride = ${JSON.stringify(settingsOverride)}
+
+export const blokkliVersion = ${JSON.stringify(version)}
+
+export const storageDefaults  = ${JSON.stringify(
+      ctx.helper.options.storageDefaults || {}
+    )}
+export const defaultLanguage = ${JSON.stringify(
+      ctx.helper.options.defaultLanguage || "en"
+    )}
+export const forceDefaultLanguage = ${JSON.stringify(
+      !!ctx.helper.options.forceDefaultLanguage
+    )}
+`;
+  },
+  (ctx) => {
+    return `
+import type { Theme } from '${ctx.helper.relativePaths.TYPES_THEME}'
+import type { ModuleOptionsSettings } from '#blokkli-build/module-types'
+
+/**
+ * Whether the app uses a custom theme.
+ */
+export declare const hasCustomTheme: boolean
+
+/**
+ * All available themes.
+ */
+export declare const themes: Record<string, Theme>
+
+/**
+ * The default theme.
+ */
+export declare const theme: Theme
+
+/**
+ * Overrides for settings.
+ */
+export declare const settingsOverride: ModuleOptionsSettings
+
+/**
+ * The version of the @blokkli/editor package.
+ */
+export declare const blokkliVersion: string
+
+/**
+ * Default storage settings.
+ */
+export declare const storageDefaults: Record<string, string|boolean|string[]>
+
+/**
+ * The default/fallback language.
+ */
+export declare const defaultLanguage: string
+
+/**
+ * Whether to always force the default language, even on translation pages.
+ */
+export declare const forceDefaultLanguage: boolean
+`;
+  }
+);
+
+const definitions = defineCodeTemplate(
+  "definitions",
+  (ctx) => {
+    const blocks = [];
+    const fragments = [];
+    const icons = /* @__PURE__ */ new Map();
+    const definitions = [];
+    const files = [...ctx.blocks.files.values()].sort(
+      (a, b) => b.identifier.localeCompare(a.identifier)
+    );
+    let key = "";
+    files.forEach((file) => {
+      if (!file.definition || !file.definitionSource) {
+        return;
+      }
+      const identifier = file.identifier;
+      key += identifier;
+      if (isBlock(file.definition)) {
+        definitions.push(`const ${identifier} = ${file.definitionSource}`);
+        blocks.push(identifier);
+        if (file.iconContents) {
+          icons.set(file.definition.bundle, JSON.stringify(file.iconContents));
+        }
+      } else {
+        definitions.push(`const ${identifier} = ${file.definitionSource}`);
+        fragments.push(identifier);
+      }
+    });
+    const renderKey = hash(key);
+    return `
+${definitions.join("\n\n")}
+
+const blocks = [
+  ${blocks.join(",\n  ")}
+]
+
+const fragments = [
+  ${fragments.join(",\n  ")}
+]
+
+${toObject("icons", icons, true)}
+
+
+const globalOptions = ${JSON.stringify(ctx.helper.options.globalOptions || {})}
+
+const renderKey = "${renderKey}"
+
+const definitions = {
+  blocks,
+  fragments,
+  icons,
+  globalOptions,
+  renderKey
+}
+
+export default definitions
+`;
+  },
+  (ctx) => {
+    const fragmentNames = [];
+    for (const file of ctx.blocks.files.values()) {
+      if (!file.definition) {
+        continue;
+      }
+      if (isBlock(file.definition)) {
+        continue;
+      }
+      fragmentNames.push(`'${file.definition.name}'`);
+    }
+    return `
+import type { GlobalOptionsKey, ValidFieldListTypes, BlockBundleWithNested, ValidGlobalConfigKeys } from '#blokkli-build/generated-types'
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput } from '${ctx.helper.relativePaths.TYPES}'
+
+export type BlockDefinition = BlockDefinitionInput<BlockDefinitionOptionsInput, GlobalOptionsKey[]>
+export type FragmentDefinition = FragmentDefinitionInput<Record<string, any>, GlobalOptionsKey[]>
+
+export type BlokkliFragmentName = ${fragmentNames.join(" | ") || "never"}
+
+const globalOptions = ${JSON.stringify(ctx.helper.options.globalOptions || {})} as const
+
+export type GlobalOptionsType = typeof globalOptions
+
+export type Definitions = {
+  blocks: BlockDefinition[]
+  fragments: FragmentDefinition[]
+  icons: Record<string, string>
+  globalOptions: BlockDefinitionOptionsInput
+  renderKey: string
+}
+
+const definitions: Definitions
+
+export default definitions
+`;
+  },
+  {
+    dependencies: ["block-content", "block-path"]
+  }
+);
+
+const moduleTypes = defineCodeTemplate(
+  "module-types",
+  () => {
+    return `export {}`;
+  },
+  (ctx) => {
+    const features = ctx.features.getEnabledFeatures();
+    const settings = [];
+    features.forEach((feature) => {
+      if (feature.definition.settings) {
+        Object.entries(feature.definition.settings).sort((a, b) => a[0].localeCompare(b[0])).forEach(([key, setting]) => {
+          const settingsKey = `feature:${feature.id}:${key}`;
+          settings.push(`/** ${setting.label} */`);
+          if (setting.type === "radios") {
+            const type = Object.keys(setting.options).map((v) => `'${v}'`).join(" | ");
+            settings.push(
+              `'${settingsKey}'?: { disable?: boolean, default?: ${type} }
+`
+            );
+          } else if (setting.type === "checkbox") {
+            settings.push(
+              `'${settingsKey}'?: { disable?: boolean, default?: boolean }
+`
+            );
+          } else if (setting.type === "slider") {
+            settings.push(
+              `'${settingsKey}'?: { disable?: boolean, default?: number }
+`
+            );
+          } else {
+            settings.push(`'${settingsKey}'?: { disable?: boolean }
+`);
+          }
+        });
+      }
+    });
+    return `
+export type ModuleOptionsSettings = {
+  ${settings.join("\n  ")}
+}
+  `;
+  },
+  {
+    dependencies: ["features"]
+  }
+);
+
+const runtimeOptions = defineCodeTemplate(
+  "runtime-options",
+  (ctx) => {
+    const globalOptions = ctx.helper.options.globalOptions || {};
+    const files = [...ctx.blocks.files.values()];
+    const items = files.map((v) => {
+      if (v.definition && v.identifier) {
+        if (isBlock(v.definition)) {
+          return {
+            varName: v.identifier,
+            definition: v.definition,
+            variations: v.variations
+          };
+        }
+        return {
+          varName: v.identifier,
+          definition: v.definition,
+          variations: v.variations
+        };
+      }
+      return null;
+    }).filter(falsy);
+    const declarations = [];
+    const OPTIONS = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const optionDefinitions = Object.entries(item.definition.options || {});
+      const options = {};
+      if (item.definition.globalOptions) {
+        item.definition.globalOptions.forEach((name) => {
+          const option = globalOptions[name];
+          if (option) {
+            options[name] = [option.type, option.default];
+          }
+        });
+      }
+      optionDefinitions.forEach(([name, option]) => {
+        options[name] = [option.type, option.default];
+      });
+      const hasOptions = Object.keys(options).length > 0;
+      if (hasOptions) {
+        declarations.push(`const ${item.varName} = ${JSON.stringify(options)}`);
+        OPTIONS.set(item.varName, item.varName);
+      }
+      item.variations.forEach((variation) => {
+        if (hasOptions) {
+          OPTIONS.set(variation, item.varName);
+        }
+      });
+    }
+    return `
+${declarations.join("\n")}
+
+${toObject("OPTIONS", OPTIONS)}
+`;
+  },
+  (ctx) => {
+    const globalOptions = ctx.helper.options.globalOptions || {};
+    const blocks = [...ctx.blocks.files.values()].map((v) => {
+      if (v.definition && isBlock(v.definition)) {
+        return v.definition;
+      }
+      return null;
+    }).filter(falsy);
+    function getOptionTypes(definition) {
+      const definedOptions = definition.options || {};
+      const blockGlobalOptions = definition.globalOptions || [];
+      blockGlobalOptions.forEach((key) => {
+        if (globalOptions[key]) {
+          definedOptions[key] = globalOptions[key];
+        }
+      });
+      return Object.entries(definedOptions || {}).map(([key, option]) => {
+        if (option.type === "text" || option.type === "datetime-local") {
+          return `${key}: string`;
+        } else if (option.type === "checkbox") {
+          return `${key}: boolean`;
+        } else if (option.type === "checkboxes") {
+          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
+          return `${key}: Array<${possibleValues}>`;
+        } else if (option.type === "radios") {
+          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
+          return `${key}: ${possibleValues}`;
+        } else if (option.type === "color") {
+          return key + ": `#${string}`";
+        } else if (option.type === "range" || option.type === "number") {
+          return `${key}: number`;
+        }
+      });
+    }
+    const runtimeMappedOptionTypes = blocks.map((definition) => {
+      if (definition.renderFor) {
+        return null;
+      }
+      const bundle = definition.bundle;
+      const options = getOptionTypes(definition).join("\n    ");
+      if (!options) {
+        return `  ${bundle}: {}`;
+      }
+      return `  ${bundle}: {
+    ${options}
+  }`;
+    }).filter(falsy).join(",\n");
+    return `
+import type { BlockOptionDefinition } from '${ctx.helper.relativePaths.TYPES_BLOKK_OPTIONS}'
+
+export type RuntimeBlockOptionArray = {
+  [T in BlockOptionDefinition as T['type']]: [T['type'], T['default']]
+}[BlockOptionDefinition['type']]
+
+export type RuntimeBlockOptions = {
+${runtimeMappedOptionTypes}
+}
+
+export declare const OPTIONS: Record<string, Record<string, RuntimeBlockOptionArray>>
+`;
+  },
+  {
+    dependencies: ["block-content", "block-path"]
+  }
+);
+
+const editComponents = defineCodeTemplate(
+  "edit-components",
+  (ctx) => {
+    const imports = {};
+    const proxyComponents = /* @__PURE__ */ new Map();
+    const diffComponents = /* @__PURE__ */ new Map();
+    for (const file of ctx.blocks.files.values()) {
+      if (!file.definition || !isBlock(file.definition)) {
+        continue;
+      }
+      const { bundle } = file.definition;
+      if (file.proxyComponentPath) {
+        const importName = "proxy_" + bundle;
+        imports[importName] = file.proxyComponentPath;
+        proxyComponents.set(bundle, importName);
+      } else if (file.diffComponentPath) {
+        const importName = "diff_" + file.definition.bundle;
+        imports[importName] = file.diffComponentPath;
+        diffComponents.set(bundle, importName);
+      }
+    }
+    const importLines = Object.entries(imports).map(([variableName, path]) => {
+      return `import ${variableName} from '${path}'`;
+    }).join("\n");
+    return `
+${importLines}
+
+${toObject("PROXY_COMPONENTS", proxyComponents)}
+
+${toObject("DIFF_COMPONENTS", diffComponents)}
+`;
+  },
+  () => {
+    return `
+export declare const PROXY_COMPONENTS: Record<string, any>
+export declare const DIFF_COMPONENTS: Record<string, any>
+`;
+  },
+  {
+    dependencies: ["block-path"]
+  }
+);
+
+function toStringUnion(strings) {
+  return strings.sort().map((v) => `'${v}'`).join(" | ") || "never";
+}
+function getOptionTypes(definition, globalOptions) {
+  const definedOptions = { ...definition.options || {} };
+  const blockGlobalOptions = definition.globalOptions || [];
+  blockGlobalOptions.forEach((key) => {
+    if (globalOptions[key]) {
+      definedOptions[key] = globalOptions[key];
+    }
+  });
+  const options = Object.entries(definedOptions || {}).map(([key, option]) => {
+    if (option.type === "checkbox") {
+      return `${key}: '1' | '0' | undefined`;
+    } else if (option.type === "text" || option.type === "radios" || option.type === "checkboxes" || option.type === "color" || option.type === "datetime-local") {
+      return `${key}: string | undefined`;
+    } else if (option.type === "range" || option.type === "number") {
+      return `${key}: number | string | undefined`;
+    }
+  }).join("\n    ");
+  return `{
+    ${options}
+  }`;
+}
+const generatedTypes = defineCodeTemplate(
+  "generated-types",
+  () => {
+    return `export {}`;
+  },
+  (ctx) => {
+    const mappedGetBundlePropsType = (bundle, file) => {
+      if (bundle === "from_library" || bundle === "blokkli_fragment") {
+        return {
+          typeName: "Props",
+          from: file.filePath
+        };
+      } else if (ctx.helper.options.getBundlePropsType) {
+        return ctx.helper.options.getBundlePropsType(bundle, file);
+      }
+      return null;
+    };
+    const chunkNames = ctx.helper.options.chunkNames || ["global"];
+    const fieldListTypes = ctx.helper.options.fieldListTypes || ["default"];
+    const globalOptions = ctx.helper.options.globalOptions || {};
+    const validGlobalOptions = Object.keys(globalOptions);
+    const blockBundlesWithNested = [];
+    const validBlockBundles = [];
+    const propTypeImports = {};
+    const propTypes = {};
+    const typedFieldListItems = [];
+    for (const file of ctx.blocks.files.values()) {
+      if (!file.definition || !isBlock(file.definition)) {
+        continue;
+      }
+      if (file.hasBlokkliField) {
+        blockBundlesWithNested.push(file.definition.bundle);
+      }
+      if (file.definition.bundle !== "from_library") {
+        validBlockBundles.push(file.definition.bundle);
+      }
+      if (!file.definition.renderFor) {
+        const bundle = file.definition.bundle;
+        const options = getOptionTypes(file.definition, globalOptions);
+        const generatedTypeName = `FieldListItem_${bundle}`;
+        const lines = [`  bundle: '${bundle}'`, `options: ${options}`];
+        const bundlePropsType = mappedGetBundlePropsType(bundle, file);
+        if (bundlePropsType) {
+          const { typeName, from } = bundlePropsType;
+          if (!propTypeImports[from]) {
+            propTypeImports[from] = [];
+          }
+          propTypeImports[from].push({ bundle, typeName });
+          const tsTypeName = `Bundle_${bundle}_Props`;
+          lines.push(`props: ${tsTypeName}`);
+          propTypes[bundle] = tsTypeName;
+        }
+        const typeDefinition = `
+type ${generatedTypeName} = {
+${lines.join("\n  ")}
+}`;
+        typedFieldListItems.push({
+          typeName: generatedTypeName,
+          typeDefinition
+        });
+      }
+    }
+    const propTypeImportStatements = Object.entries(propTypeImports).map(([from, items]) => {
+      const imports = items.map((v) => {
+        return `${v.typeName} as Bundle_${v.bundle}_Props`;
+      }).join(", ");
+      const importPath = relative(ctx.helper.paths.blokkliBuildDir, from);
+      return `import type { ${imports} } from '${importPath}'`;
+    }).join("\n");
+    const BundleProps = Object.entries(propTypes).map(([key, type]) => {
+      return `'${key}': ${type}`;
+    }).join("\n  ");
+    return `
+${propTypeImportStatements}
+import type { FieldListItem } from "${ctx.helper.relativePaths.TYPES}"
+
+export type ValidFieldListTypes = ${toStringUnion(fieldListTypes)}
+
+export type BlockBundle = ${toStringUnion(validBlockBundles)}
+
+export type BlockBundleWithNested = ${toStringUnion(blockBundlesWithNested)}
+
+export type ValidChunkNames = ${toStringUnion(chunkNames)}
+
+export type BundleProps = {
+  ${BundleProps}
+}
+
+export type GlobalOptionsKey = ${toStringUnion(validGlobalOptions)}
+
+export type ValidGlobalConfigKeys = Array<GlobalOptionsKey>
+
+${typedFieldListItems.map((v) => v.typeDefinition).join("\n\n")}
+
+export type FieldListItemTyped = Omit<FieldListItem, 'props'> & (${typedFieldListItems.map((v) => v.typeName).sort().join(" | ")})
+export type FieldListItemTypedArray = Array<FieldListItemTyped>
+`;
+  },
+  {
+    dependencies: ["block-path"]
+  }
+);
+
+const defaultGlobalOptions = defineCodeTemplate(
+  "default-global-options",
+  (ctx) => {
+    const globalOptions = ctx.helper.options.globalOptions || {};
+    const defaults = Object.entries(globalOptions).reduce(
+      (acc, [key, option]) => {
+        if (option.default !== void 0 && option.default !== null) {
+          acc[key] = {
+            default: option.default,
+            type: option.type
+          };
+        }
+        return acc;
+      },
+      {}
+    );
+    const bundlesWithVisibleLanguage = [];
+    const bundlesWithHiddenGlobally = [];
+    for (const file of ctx.blocks.files.values()) {
+      if (!file.definition || !isBlock(file.definition)) {
+        continue;
+      }
+      const usedGlobalOptions = file.definition.globalOptions || [];
+      if (usedGlobalOptions.includes(BK_VISIBLE_LANGUAGES)) {
+        bundlesWithVisibleLanguage.push(file.definition.bundle);
+      }
+      if (usedGlobalOptions.includes(BK_HIDDEN_GLOBALLY)) {
+        bundlesWithHiddenGlobally.push(file.definition.bundle);
+      }
+    }
+    return `
+export const bundlesWithVisibleLanguage = ${JSON.stringify(bundlesWithVisibleLanguage.sort())}
+export const bundlesWithHiddenGlobally = ${JSON.stringify(bundlesWithHiddenGlobally.sort())}
+
+export const globalOptionsDefaults = ${JSON.stringify(defaults, null, 2)}`;
+  },
+  (ctx) => {
+    return `
+import type { BlockOptionDefinition } from '${ctx.helper.relativePaths.TYPES_BLOKK_OPTIONS}'
+
+type GlobalOptionsDefaults = {
+  type: BlockOptionDefinition['type']
+  default: any
+}
+
+export declare const bundlesWithVisibleLanguage: string[]
+export declare const bundlesWithHiddenGlobally: string[]
+
+export declare const globalOptionsDefaults: Record<string, GlobalOptionsDefaults>
+`;
+  },
+  {
+    dependencies: ["block-path"]
+  }
+);
+
+const imports = defineCodeTemplate(
+  "imports",
+  (ctx) => {
+    const chunkMapping = {};
+    for (const file of ctx.blocks.files.values()) {
+      if (!file.definition) {
+        continue;
+      }
+      file.variations.forEach((variation) => {
+        chunkMapping[variation] = file.chunkName;
+      });
+    }
+    const lines = Object.entries(chunkMapping).map(
+      ([variation, importName]) => {
+        return `'${variation}': '${importName}'`;
+      }
+    );
+    const chunks = ctx.helper.getChunkNames().map((chunkName) => {
+      if (chunkName === "global") {
+        return null;
+      }
+      return `${chunkName}: () => import('#blokkli-build/chunk-${chunkName}.js').then(v => v['${chunkName}'])`;
+    }).filter(falsy).sort().join(",\n  ");
+    return `
+import { global } from '#blokkli-build/chunk-global.js'
+
+export const chunks = {
+  global,
+  ${chunks}
+}
+
+export const chunkMapping = {
+  ${lines.sort().join(",\n  ")}
+}
+`;
+  },
+  () => {
+    return `
+import type { Component } from 'vue'
+
+export type ChunkGroup = Record<string, Component | { loadComponent: () => Promise<Component> } >
+export type ChunkGroupEntry = ChunkGroup | (() => Promise<ChunkGroup>)
+
+/**
+ * Mapping of block/fragment variation ID to a chunk group.
+ *
+ * The variation is only present if its chunkName is not 'global'.
+ */
+export declare const chunkMapping: Record<string, string>
+
+/**
+ * All available chunks.
+ */
+export declare const chunks: Record<string, ChunkGroupEntry>
+`;
+  },
+  {
+    dependencies: ["block-path", "block-content"]
+  }
+);
+
+const optionsSchema = withHelper((helper) => {
+  let fileName = "options-schema.json";
+  const outputPath = helper.options.schemaOptionsPath;
+  if (outputPath) {
+    const resolved = resolveAlias(outputPath);
+    fileName = helper.resolvers.src.resolve(resolved);
+  }
+  return defineFileTemplate(fileName, (ctx) => {
+    const globalOptions = ctx.helper.options.globalOptions || {};
+    const blocks = [...ctx.blocks.files.values()];
+    const schema = blocks.reduce((acc, v) => {
+      if (v.definition && isBlock(v.definition)) {
+        const bundle = v.definition.bundle;
+        const existing = acc[v.definition.bundle] || {};
+        acc[v.definition.bundle] = defu(existing, v.definition.options || {});
+        const globalOptionKeys = v.definition.globalOptions || [];
+        globalOptionKeys.forEach((name) => {
+          if (globalOptions[name]) {
+            acc[bundle][name] = globalOptions[name];
+          }
+        });
+      }
+      return acc;
+    }, {});
+    const sorted = sortObjectKeys(schema);
+    return JSON.stringify(sorted, null, 2);
+  });
+});
+
+const chunkGroup = withHelper((helper) => {
+  return helper.getChunkNames().map((chunkName) => {
+    return defineCodeTemplate(
+      "chunk-" + chunkName,
+      (ctx) => {
+        const imports = [];
+        const map = {};
+        for (const file of ctx.blocks.files.values()) {
+          if (!file.definition) {
+            continue;
+          }
+          if (!fs.existsSync(file.filePath)) {
+            continue;
+          }
+          if (file.chunkName !== chunkName) {
+            continue;
+          }
+          if (helper.isDev) {
+            imports.push(
+              `const ${file.identifier} = () => import('${file.filePath}').then(v => v.default)`
+            );
+            file.variations.forEach((variation) => {
+              map[variation] = `{ loadComponent: ${file.identifier} }`;
+            });
+          } else {
+            imports.push(`import ${file.identifier} from '${file.filePath}'`);
+            file.variations.forEach((variation) => {
+              map[variation] = file.identifier;
+            });
+          }
+        }
+        const lines = Object.entries(map).map(([variation, importName]) => {
+          return `'${variation}': ${importName}`;
+        });
+        return `
+${imports.sort().join("\n")}
+
+export const ${chunkName} = {
+  ${lines.sort().join(",\n  ")}
+}
+`;
+      },
+      () => {
+        return `
+import type { Component } from 'vue'
+export declare const ${chunkName}: Record<string, { loadComponent: () => Promise<Component> } | Component>
+`;
+      },
+      {
+        dependencies: ["block-path", "block-content"]
+      }
+    );
+  });
+});
+
+const TEMPLATES = [
+  icons,
+  features,
+  featuresJson,
+  translations,
+  editAdapter,
+  styles,
+  config,
+  definitions,
+  moduleTypes,
+  runtimeOptions,
+  editComponents,
+  generatedTypes,
+  defaultGlobalOptions,
+  imports,
+  optionsSchema,
+  chunkGroup
+];
+
+class CollectedFeatureFile extends CollectedFile {
+  definition = null;
+  composableName = "defineBlokkliFeature";
+  enabled = true;
+  objectLiteral = void 0;
+  getDefinition() {
+    return this.definition;
+  }
+  async handleChange() {
+    const objectLiteral = extractObjectLiteral(this.fileContents, [
+      this.composableName
+    ]);
+    if (this.objectLiteral === objectLiteral) {
+      return false;
     }
-    throw new Error(`Invalid theme name: ${v}`);
+    this.objectLiteral = objectLiteral;
+    if (!this.objectLiteral) {
+      return false;
+    }
+    try {
+      const { object: definition, source } = parseTsObject(
+        this.objectLiteral
+      );
+      const regex = /\/Features\/([^/]+)\//;
+      const componentName = this.filePath.match(regex)?.[1] || "";
+      this.definition = {
+        id: definition.id,
+        componentName,
+        componentPath: this.filePath,
+        definition,
+        definitionSource: source
+      };
+    } catch (e) {
+      console.error(
+        `Failed to parse component "${this.filePath}": ${this.composableName} does not contain a valid object literal. No variables and methods are allowed inside ${this.composableName}().`,
+        e
+      );
+    }
+    return Promise.resolve(true);
   }
-  return v || {};
-};
+  isEnabled() {
+    return this.enabled;
+  }
+  /**
+   * Disable the feature.
+   */
+  disable() {
+    this.enabled = false;
+  }
+}
+class FeatureCollector extends Collector {
+  needsFileContents = true;
+  disabledFeatures = /* @__PURE__ */ new Set();
+  srcFromModule;
+  constructor(helper) {
+    super(helper);
+    this.srcFromModule = helper.resolvers.module.resolve(
+      "./runtime/components/Edit/Features"
+    );
+  }
+  getEnabledFeatures() {
+    return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id));
+  }
+  async init() {
+    const builtinFeatures = await resolveFiles(
+      this.srcFromModule,
+      ["*/index.vue"],
+      {
+        followSymbolicLinks: false
+      }
+    );
+    const customFeatures = this.helper.options.featureImports ? await resolveFiles(
+      this.helper.paths.srcDir,
+      this.helper.options.featureImports,
+      {
+        followSymbolicLinks: false
+      }
+    ) : [];
+    await Promise.all(
+      [...builtinFeatures, ...customFeatures].map((v) => this.addFile(v))
+    );
+    const features = [...this.files.values()];
+    if (!this.helper.options.enableThemeEditor) {
+      const themeFeature = features.find(
+        (v) => v.getDefinition()?.id === "theme"
+      );
+      if (themeFeature) {
+        themeFeature.disable();
+      }
+    }
+  }
+  runHooks() {
+    return this.helper.nuxt.hooks.callHook("blokkli:alter-features", {
+      features: [...this.files.values()]
+    });
+  }
+  createCollectedFile(filePath, fileContents = "") {
+    return new CollectedFeatureFile(filePath, fileContents);
+  }
+  applies(filePath) {
+    return Promise.resolve(
+      filePath.startsWith(this.srcFromModule) || micromatch.isMatch(filePath, "icon-blokkli-*.svg")
+    );
+  }
+  getDependencyTypes() {
+    return ["features"];
+  }
+  disableFeature(id) {
+    this.disabledFeatures.add(id);
+  }
+}
 
 function hexToRgb(hex) {
   if (hex.startsWith("#")) {
@@ -7026,21 +8001,6 @@ function hexToRgb(hex) {
   const b = Number.parseInt(hex.slice(4, 6), 16);
   return [r, g, b];
 }
-function onlyUnique(value, index, self) {
-  return self.indexOf(value) === index;
-}
-const fileExists = (path, extensions = ["js", "ts"]) => {
-  if (!path) {
-    return null;
-  } else if (existsSync(path)) {
-    return path;
-  }
-  const extension = extensions.find(
-    (extension2) => existsSync(`${path}.${extension2}`)
-  );
-  return extension ? `${path}.${extension}` : null;
-};
-const POSSIBLE_EXTENSIONS = [".js", ".ts", ".vue", ".mjs"];
 const buildThemeData = (themeOption) => {
   const hasCustomTheme = !!themeOption;
   const mergeTheme = createDefu((obj, key, value) => {
@@ -7077,17 +8037,28 @@ const buildThemeData = (themeOption) => {
   );
   return { themeCss, fullTheme, hasCustomTheme };
 };
+class ThemeData {
+  css;
+  fullTheme;
+  hasCustomTheme;
+  constructor(helper) {
+    const data = buildThemeData(helper.options.theme);
+    this.css = data.themeCss;
+    this.fullTheme = data.fullTheme;
+    this.hasCustomTheme = data.hasCustomTheme;
+  }
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "blokkli",
     configKey: "blokkli",
     version,
     compatibility: {
-      nuxt: "^3.12.0"
+      nuxt: "^3.15.0"
     }
   },
   defaults: {
-    pattern: ["components/Blokkli/**/*.{js,ts,vue}"],
     globalOptions: {
       [BK_VISIBLE_LANGUAGES]: {
         type: "checkboxes",
@@ -7101,494 +8072,85 @@ const module = defineNuxtModule({
         default: false
       }
     },
-    chunkNames: ["global"],
-    itemEntityType: "block"
+    chunkNames: ["global"]
   },
   async setup(moduleOptions, nuxt) {
-    const srcDir = nuxt.options.srcDir;
-    const srcResolver = createResolver(srcDir);
-    const moduleDir = import.meta.url;
-    const resolver = createResolver(moduleDir);
-    const buildResolver = createResolver(nuxt.options.buildDir);
-    const blokkliBuildDir = buildResolver.resolve("blokkli");
-    const IMPORTS = {
-      TYPES: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/types/index.ts")
-      ),
-      CONSTANTS: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/constants/index.ts")
-      ),
-      ADAPTER: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/adapter/index.ts")
-      ),
-      TYPES_THEME: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/types/theme.ts")
-      ),
-      TYPES_GENERATED_MODULE_TYPED: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/types/generatedModuleTypes.ts")
-      ),
-      TYPES_BLOKK_OPTIONS: relative(
-        blokkliBuildDir,
-        resolver.resolve("./runtime/types/blokkOptions.ts")
-      )
-    };
-    const featureFolder = resolver.resolve("./runtime/components/Edit/Features");
-    const featureExtractor = new Extractor(!nuxt.options.dev);
-    const builtinFeatures = await resolveFiles(featureFolder, ["*/index.vue"], {
-      followSymbolicLinks: false
-    });
-    const customFeatures = moduleOptions.featureImports ? await resolveFiles(srcDir, moduleOptions.featureImports, {
-      followSymbolicLinks: false
-    }) : [];
-    await featureExtractor.addFiles([...builtinFeatures, ...customFeatures]);
-    const extractedFeatures = featureExtractor.getFeatures();
-    const features = extractedFeatures.filter((v) => {
-      return v.id !== "theme" || moduleOptions.enableThemeEditor;
-    });
-    const featuresContext = {
-      features
-    };
-    if (moduleOptions.alterFeatures) {
-      featuresContext.features = await Promise.resolve(
-        moduleOptions.alterFeatures(featuresContext)
-      );
-    }
-    const allFeatureIds = [
-      ...extractedFeatures.map((v) => v.id),
-      ...featuresContext.features.map((v) => v.id)
-    ].filter(onlyUnique);
-    const featureComponents = addTemplate({
-      write: true,
-      filename: "blokkli/features.ts",
-      getContents: () => {
-        const features2 = featuresContext.features.map((v) => {
-          const importName = `Feature_${v.componentName}`;
-          return {
-            id: v.id,
-            componentName: v.componentPath,
-            importName,
-            importStatement: `import ${importName} from '${relative(blokkliBuildDir, v.componentPath)}'`,
-            definition: v.definition
-          };
-        });
-        const imports = features2.map((v) => {
-          return v.importStatement;
-        }).join("\n");
-        const availableFeaturesAtBuild = featuresContext.features.map(
-          (v) => v.id
-        );
-        const featuresArray = features2.map((v) => {
-          return `{
-  id: "${v.id}",
-  dependencies: ${JSON.stringify(v.definition.dependencies || [])},
-  viewports: ${JSON.stringify(v.definition.viewports || [])},
-  component: ${v.importName},
-  requiredAdapterMethods: ${JSON.stringify(
-            v.definition.requiredAdapterMethods || []
-          )},
-  label: ${JSON.stringify(v.definition.label || "")},
-  beta: ${JSON.stringify(!!v.definition.beta)},
-  description: "${v.definition.description || ""}"
-}`;
-        }).join(",\n");
-        return `${imports}
-import type { BlokkliAdapter } from '${IMPORTS.ADAPTER}'
-import type { Viewport } from '${IMPORTS.CONSTANTS}'
-type AdapterMethods = keyof BlokkliAdapter<any>
-
-export const availableFeaturesAtBuild = ${JSON.stringify(
-          availableFeaturesAtBuild
-        )} as const
-
-export type ValidFeatureKey = ${allFeatureIds.map((v) => '"' + v + '"').join(" | ")}
-
-type FeatureComponent = {
-  id: ValidFeatureKey
-  component: any
-  requiredAdapterMethods: AdapterMethods[]
-  dependencies: ValidFeatureKey[]
-  description: string
-  label: string
-  beta: boolean
-  viewports: Viewport[]
-}
-
-export const featureComponents: FeatureComponent[] = [
-${featuresArray}
-]
-`;
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/features"] = featureComponents.dst;
-    addTemplate({
-      write: true,
-      filename: "blokkli/features.json",
-      getContents: async () => {
-        const featuresData = await Promise.all(
-          featuresContext.features.map(async (v) => {
-            const docsPath = v.filePath.replace("index.vue", "docs.md");
-            let docs = "";
-            if (fileExists(docsPath)) {
-              docs = await promises.readFile(docsPath).then((v2) => v2.toString());
-            }
-            return {
-              ...v,
-              repoRelativePath: v.filePath.replace(/.*\/src/, "/src"),
-              docs
-            };
-          })
-        );
-        return JSON.stringify(featuresData, null, 2);
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    function getChunkNames() {
-      const chunkNames = [...moduleOptions.chunkNames || []];
-      if (!chunkNames.includes("global")) {
-        chunkNames.push("global");
-      }
-      return chunkNames.filter(onlyUnique);
-    }
-    function getFieldListTypes() {
-      const types = [...moduleOptions.fieldListTypes || []];
-      if (!types.includes("default")) {
-        types.push("default");
+    const blokkliModules = moduleOptions.modules || [];
+    for (const module of blokkliModules) {
+      if (module.init.alterOptions) {
+        module.init.alterOptions(moduleOptions);
       }
-      return types.filter(onlyUnique);
-    }
-    const importPattern = moduleOptions.pattern || [];
-    const featureIsEnabled = (id) => featuresContext.features.some((v) => v.id === id);
-    if (featureIsEnabled("library")) {
-      importPattern.push(
-        resolver.resolve("./runtime/components/Blocks/FromLibrary/*.vue")
-      );
-    }
-    if (featureIsEnabled("fragments")) {
-      importPattern.push(
-        resolver.resolve("./runtime/components/Blocks/Fragment/*.vue")
-      );
     }
-    const files = await resolveFiles(srcDir, importPattern, {
-      followSymbolicLinks: false
-    });
-    const blockExtractor = new BlockExtractor(
-      !nuxt.options.dev,
-      blokkliBuildDir,
-      IMPORTS
+    const helper = new ModuleHelper(nuxt, import.meta.url, moduleOptions);
+    const theme = new ThemeData(helper);
+    const iconCollector = new IconCollector(helper);
+    const featureCollector = new FeatureCollector(helper);
+    const blockCollector = new BlockCollector(helper);
+    const collectors = [
+      iconCollector,
+      featureCollector,
+      blockCollector
+    ];
+    await Promise.all(collectors.map((v) => v.init()));
+    await Promise.all(collectors.map((v) => v.runHooks()));
+    const context = new ModuleContext(
+      helper,
+      iconCollector,
+      featureCollector,
+      blockCollector,
+      theme
     );
-    await blockExtractor.addFiles(files);
-    const templateDefinitions = addTemplate({
-      write: true,
-      filename: "blokkli/definitions.ts",
-      getContents: () => {
-        return blockExtractor.generateDefinitionTemplate(
-          moduleOptions.globalOptions
-        );
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/definitions"] = templateDefinitions.dst;
-    const templateRuntimeOptions = addTemplate({
-      write: true,
-      filename: "blokkli/runtime-options.ts",
-      getContents: () => {
-        return blockExtractor.generateRuntimeOptionsTemplate(
-          moduleOptions.globalOptions
-        );
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/runtime-options"] = templateRuntimeOptions.dst;
-    const templateEditComponents = addTemplate({
-      write: true,
-      filename: "blokkli/edit-components.ts",
-      getContents: () => {
-        return blockExtractor.generateEditComponents();
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/edit-components"] = templateEditComponents.dst;
-    const templateTranslations = addTemplate({
-      write: true,
-      filename: "blokkli/translations.ts",
-      getContents: () => {
-        const translations$1 = {};
-        Object.keys(translations).forEach((language) => {
-          translations$1[language] = {};
-          Object.keys(translations[language]).forEach((key) => {
-            translations$1[language][key] = translations[language][key].translation;
-          });
+    const app = {
+      helper,
+      context
+    };
+    for (const module of blokkliModules) {
+      await module.init.setup(app, module.options);
+    }
+    TEMPLATES.forEach((v) => {
+      if (typeof v === "function") {
+        const result = v(helper);
+        const templates = Array.isArray(result) ? result : [result];
+        templates.forEach((template) => {
+          context.addTemplate(template);
         });
-        const merged = defu(moduleOptions.translations, translations$1);
-        return `export const translations = ${JSON.stringify(merged, null, 2)}`;
-      },
-      options: {
-        blokkli: true
+      } else {
+        context.addTemplate(v);
       }
     });
-    nuxt.options.alias["#blokkli-build/translations"] = templateTranslations.dst;
+    await context.generateTemplates();
+    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"
     };
-    const resolvedPath = "~/app/blokkli.editAdapter".replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir);
-    const adapterTemplate = (() => {
-      const resolvedFilename = `blokkli/editAdapter.ts`;
-      const maybeUserFile = fileExists(resolvedPath, ["ts"]);
-      if (!maybeUserFile) {
-        throw new Error(
-          "Missing blokkli adapter file in ~/app/blokkli.editAdapter.ts"
-        );
-      }
-      return addTemplate({
-        filename: resolvedFilename,
-        write: true,
-        getContents: () => `
-        import type { BlokkliAdapterFactory } from '${IMPORTS.ADAPTER}'
-        import adapter from '${relative(blokkliBuildDir, resolvedPath)}'
-
-        export default adapter as BlokkliAdapterFactory<any>
-        `
-      });
-    })();
-    nuxt.options.alias["#blokkli-build/compiled-edit-adapter"] = adapterTemplate.dst;
     nuxt.options.build.transpile.push(resolver.resolve("runtime"));
-    addComponent({
-      filePath: resolver.resolve("./runtime/components/BlokkliField"),
-      name: "BlokkliField",
-      global: true
-    });
-    addComponent({
-      filePath: resolver.resolve("./runtime/components/BlokkliEditable"),
-      name: "BlokkliEditable",
-      global: true
-    });
-    addComponent({
-      filePath: resolver.resolve("./runtime/components/BlokkliProvider"),
-      name: "BlokkliProvider",
-      global: true
-    });
-    addComponent({
-      filePath: resolver.resolve("./runtime/components/BlokkliItem"),
-      name: "BlokkliItem",
-      global: true
-    });
-    addBuildPlugin(DefinitionPlugin(nuxt));
-    addImports({
-      name: "defineBlokkli",
-      from: resolver.resolve("./runtime/composables/defineBlokkli"),
-      as: "defineBlokkli"
-    });
-    addImports({
-      name: "defineBlokkliFragment",
-      from: resolver.resolve("./runtime/composables/defineBlokkliFragment"),
-      as: "defineBlokkliFragment"
-    });
-    addImports({
-      name: "defineBlokkliFeature",
-      from: resolver.resolve("./runtime/composables/defineBlokkliFeature"),
-      as: "defineBlokkliFeature"
-    });
-    addImports({
-      name: "useBlokkli",
-      from: resolver.resolve("./runtime/composables/useBlokkli"),
-      as: "useBlokkli"
-    });
-    nuxt.options.alias["#blokkli-build/styles"] = resolver.resolve(
-      "./runtime/css/output.css"
-    );
-    const templateGeneratedTypes = addTemplate({
-      write: true,
-      filename: "blokkli/generated-types.ts",
-      getContents: () => {
-        return blockExtractor.generateTypesTemplate(
-          moduleOptions.globalOptions || {},
-          getChunkNames(),
-          getFieldListTypes(),
-          moduleOptions.getBundlePropsType
-        );
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/generated-types"] = templateGeneratedTypes.dst;
-    const { themeCss, fullTheme, hasCustomTheme } = buildThemeData(
-      moduleOptions.theme
-    );
-    const templateThemeCss = addTemplate({
-      write: true,
-      filename: "blokkli/theme.css",
-      getContents: () => {
-        return themeCss;
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/theme"] = templateThemeCss.dst;
-    const templateConfig = addTemplate({
-      write: true,
-      filename: "blokkli/config.ts",
-      getContents: () => {
-        const settingsOverride = moduleOptions.settingsOverride || {};
-        return `import type { Theme } from '${IMPORTS.TYPES_THEME}'
-import type { ModuleOptionsSettings } from '${IMPORTS.TYPES_GENERATED_MODULE_TYPED}'
-
-export const hasCustomTheme = ${JSON.stringify(hasCustomTheme)}
-export const themes: Record<string, Theme> = ${JSON.stringify(themes, null, 2)}
-export const theme: Theme = ${JSON.stringify(fullTheme, null, 2)}
-
-export const settingsOverride: ModuleOptionsSettings = ${JSON.stringify(
-          settingsOverride
-        )}
-
-export const blokkliVersion = ${JSON.stringify(version)}
-
-export const storageDefaults: Record<string, string|boolean|string[]> = ${JSON.stringify(
-          moduleOptions.storageDefaults || {}
-        )}
-export const defaultLanguage: string = ${JSON.stringify(
-          moduleOptions.defaultLanguage || "en"
-        )}
-export const forceDefaultLanguage: boolean = ${JSON.stringify(
-          !!moduleOptions.forceDefaultLanguage
-        )}
-`;
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/config"] = templateConfig.dst;
-    const templateDefaultGlobalOptions = addTemplate({
-      write: true,
-      filename: "blokkli/default-global-options.ts",
-      getContents: () => {
-        return blockExtractor.generateDefaultGlobalOptions(
-          moduleOptions.globalOptions || {}
-        );
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/default-global-options"] = templateDefaultGlobalOptions.dst;
-    let optionsSchemaTemplate = null;
-    const generateOptionsSchema = async () => {
-      const outputPath = moduleOptions.schemaOptionsPath;
-      if (outputPath) {
-        const resolvedPath2 = await srcResolver.resolvePath(outputPath);
-        const content = blockExtractor.generateOptionsSchema(
-          moduleOptions.globalOptions || {}
-        );
-        return promises.writeFile(resolvedPath2, content);
-      }
-      if (optionsSchemaTemplate) {
-        return;
-      }
-      optionsSchemaTemplate = addTemplate({
-        write: true,
-        filename: "blokkli/options-schema.json",
-        getContents: () => {
-          return blockExtractor.generateOptionsSchema(
-            moduleOptions.globalOptions || {}
-          );
-        },
-        options: {
-          blokkli: true
-        }
-      });
-    };
-    await generateOptionsSchema();
-    getChunkNames().forEach((chunkName) => {
-      if (chunkName !== "global" && !nuxt.options.dev) {
-        addTemplate({
-          write: true,
-          filename: `blokkli/chunk-${chunkName}.ts`,
-          getContents: () => {
-            return blockExtractor.generateChunkGroupTemplate(chunkName);
-          },
-          options: {
-            blokkli: true
-          }
-        });
-      }
-    });
-    const templateImports = addTemplate({
-      write: true,
-      filename: "blokkli/imports.ts",
-      getContents: () => {
-        return blockExtractor.generateImportsTemplate(
-          nuxt.options.dev ? ["global"] : getChunkNames()
-        );
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    const templateIcons = addTemplate({
-      write: true,
-      filename: "blokkli/icons.ts",
-      getContents: async () => {
-        const pathModule = resolver.resolve("./runtime/icons");
-        const filesModule = await resolveFiles(pathModule, "*.svg");
-        const filesApp = await resolveFiles(
-          srcDir,
-          "components/**/icon-blokkli-*.svg"
-        );
-        const icons = await Promise.all(
-          [...filesModule, ...filesApp].map((filePath) => {
-            return promises.readFile(filePath).then((data) => {
-              const name = basename(filePath, ".svg").toLowerCase();
-              return {
-                markup: data.toString(),
-                name
-              };
-            });
-          })
-        );
-        const iconMap = icons.reduce((acc, v) => {
-          acc[v.name] = v.markup;
-          return acc;
-        }, {});
-        return `export const icons = ${JSON.stringify(iconMap)} as const
-export type BlokkliIcon = keyof typeof icons`;
-      },
-      options: {
-        blokkli: true
-      }
-    });
-    nuxt.options.alias["#blokkli-build/icons"] = templateIcons.dst;
-    nuxt.options.alias["#blokkli-build/imports"] = templateImports.dst;
-    nuxt.options.alias["#blokkli/types"] = resolver.resolve("runtime/types");
-    nuxt.options.alias["#blokkli/constants"] = resolver.resolve("runtime/constants");
-    nuxt.options.alias["#blokkli/plugins"] = resolver.resolve(
-      "runtime/blokkliPlugins"
+    helper.addComponent("BlokkliField");
+    helper.addComponent("BlokkliEditable");
+    helper.addComponent("BlokkliProvider");
+    helper.addComponent("BlokkliItem");
+    helper.addComposable("defineBlokkli");
+    helper.addComposable("defineBlokkliFragment");
+    helper.addComposable("defineBlokkliFeature");
+    helper.addComposable("useBlokkli");
+    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")
     );
-    nuxt.options.alias["#blokkli/components"] = resolver.resolve(
-      "runtime/components/Edit"
+    helper.addAlias(
+      "#blokkli/components",
+      resolver.resolve("runtime/components/Edit")
     );
-    nuxt.options.alias["#blokkli/helpers"] = resolver.resolve("runtime/helpers");
-    nuxt.options.alias["#blokkli/adapter"] = resolver.resolve("runtime/adapter");
-    nuxt.options.alias["#blokkli/runtime-helpers"] = resolver.resolve(
-      "runtime/helpers/runtimeHelpers"
+    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")
     );
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
@@ -7601,43 +8163,22 @@ export type BlokkliIcon = keyof typeof icons`;
     addPlugin({
       src: resolver.resolve("runtime/plugins/blokkliEditable")
     });
-    const applies = (path) => {
-      const filePath = srcResolver.resolve(path);
-      if (!POSSIBLE_EXTENSIONS.includes(extname(filePath))) {
-        return Promise.resolve(void 0);
-      }
-      return resolveFiles(srcDir, importPattern, {
-        followSymbolicLinks: false
-      }).then((files2) => {
-        return files2.find((v) => v === filePath);
-      });
-    };
+    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, "defineBlokkli"));
+    addBuildPlugin(RuntimeDefinitionPlugin(nuxt, "defineBlokkliFragment"));
     if (nuxt.options.dev) {
-      nuxt.hook("vite:serverCreated", (viteServer) => {
-        nuxt.hook("builder:watch", async (_event, path) => {
-          const filePath = await applies(path);
-          if (!filePath) {
-            return;
-          }
-          const hasChanged = await blockExtractor.handleFile(filePath);
-          if (!hasChanged) {
-            return;
-          }
-          await updateTemplates({
-            filter: (template) => {
-              return template.options && template.options.blokkli;
-            }
-          });
-          await generateOptionsSchema();
-          const modules = viteServer.moduleGraph.getModulesByFile(
-            templateDefinitions.dst
-          );
-          if (modules) {
-            modules.forEach((v) => {
-              viteServer.reloadModule(v);
-            });
+      nuxt.hook("builder:watch", async (event, providedFilePath) => {
+        const filePath = providedFilePath.startsWith("/") ? providedFilePath : helper.resolvers.src.resolve(providedFilePath);
+        helper.fileCache.handleWatchEvent(event, filePath);
+        const dependenciesToUpdate = [];
+        for (const collector of collectors) {
+          const result = await collector.handleWatchEvent(event, filePath);
+          if (result.hasChanged) {
+            dependenciesToUpdate.push(...collector.getDependencyTypes());
           }
-        });
+        }
+        if (dependenciesToUpdate.length) {
+          await context.generateTemplates(dependenciesToUpdate);
+        }
       });
     }
   }