@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

package/dist/module.mjs

@@ -5,7 +5,7 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
 import { pathToFileURL } from 'node:url';
 import { parseURL, parseQuery } from 'ufo';
-import { C as Collector, a as CollectedFile, b as extractObjectLiteral, p as parseTsObject, t as toValidVariableName, o as onlyUnique, f as falsy, s as sortObjectKeys } from './shared/editor.FygP6XeF.mjs';
+import { C as Collector, a as CollectedFile, c as extractObjectLiteral, p as parseTsObject, t as toValidVariableName, o as onlyUnique, f as falsy, s as sortObjectKeys } from './shared/editor.Gu7mgJ5Q.mjs';
 import { dirname, resolve, relative } from 'pathe';
 import micromatch from 'micromatch';
 import { hash } from 'ohash';
@@ -13,13 +13,13 @@ import fs__default, { readFileSync, existsSync, readdirSync } from 'node:fs';
 import { TRANSLATION_LANGUAGES, BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from './global/constants';
 import { createRequire } from 'node:module';
 import { d as defineCodeTemplate, a as defineFileTemplate, w as withHelper } from './shared/editor.6D5vApr0.mjs';
-import { defu, createDefu } from 'defu';
 import * as acorn from 'acorn';
+import { defu, createDefu } from 'defu';
 import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.58";
+const version = "2.0.0-alpha.60";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -71,6 +71,12 @@ function validateOption(optionKey, option, icons) {
       const defaultValue = option.default;
       const min = option.min;
       const max = option.max;
+      if (typeof min === "number" && typeof max === "number" && min > max) {
+        errors.push({
+          message: `Option "${optionKey}" has minimum value ${min} which is greater than the maximum value ${max}`,
+          optionKey
+        });
+      }
       if (typeof defaultValue === "number") {
         if (typeof min === "number" && defaultValue < min) {
           errors.push({
@@ -84,6 +90,11 @@ function validateOption(optionKey, option, icons) {
             optionKey
           });
         }
+      } else if (defaultValue === void 0 && option.type === "number" && !option.nullable) {
+        errors.push({
+          message: `Option "${optionKey}" of type "number" must declare a default value (or set "nullable: true").`,
+          optionKey
+        });
       }
       break;
     }
@@ -997,6 +1008,16 @@ class FileCache {
   }
 }
 
+const defaultColorOptions = {
+  blue: { hex: "#3b82f6", label: "Blue" },
+  red: { hex: "#ef4444", label: "Red" },
+  green: { hex: "#10b981", label: "Green" },
+  amber: { hex: "#f59e0b", label: "Amber" },
+  purple: { hex: "#8b5cf6", label: "Purple" },
+  pink: { hex: "#ec4899", label: "Pink" },
+  teal: { hex: "#14b8a6", label: "Teal" },
+  orange: { hex: "#f97316", label: "Orange" }
+};
 class ModuleHelper {
   constructor(nuxt, logger, moduleUrl, providedOptions) {
     this.nuxt = nuxt;
@@ -1009,7 +1030,8 @@ class ModuleHelper {
       module: createResolver(moduleUrl),
       build: createResolver(nuxt.options.buildDir),
       src: createResolver(nuxt.options.srcDir),
-      app: createResolver(nuxt.options.dir.app)
+      app: createResolver(nuxt.options.dir.app),
+      root: createResolver(nuxt.options.rootDir)
     };
     this.paths = {
       blokkliBuildDir: this.resolvers.build.resolve("blokkli"),
@@ -1077,7 +1099,8 @@ class ModuleHelper {
       pattern,
       fieldListTypes: fieldListTypes.filter(onlyUnique),
       providerTypes: providerTypes.filter(onlyUnique),
-      chunkNames: chunkNames.filter(onlyUnique)
+      chunkNames: chunkNames.filter(onlyUnique),
+      colorOptions: providedOptions.colorOptions || defaultColorOptions
     };
     this.paths.editAdapter = this.findEditAdapterPath();
   }
@@ -1099,6 +1122,23 @@ class ModuleHelper {
   toModuleBuildRelative(path) {
     return relative(this.paths.blokkliBuildDir, path);
   }
+  /**
+   * Path to the editor's compiled tailwind config. Used by the SFC mangle
+   * pipeline and module CSS processing to inject `@config` so consumer-side
+   * `@apply` resolves against the editor's theme + utilities.
+   *
+   * In dist (npm install): `dist/modules/tailwind/index.mjs`. In source (this
+   * repo's playground): `tailwind.config.ts` at the repo root.
+   */
+  getTailwindConfigPath() {
+    const distPath = this.resolvers.module.resolve(
+      "./modules/tailwind/index.mjs"
+    );
+    if (this.fileCache.fileExists(distPath)) {
+      return distPath;
+    }
+    return this.resolvers.module.resolve("../tailwind.config.ts");
+  }
   findEditAdapterPath() {
     const filePath = this.resolvers.app.resolve("blokkli.editAdapter.ts");
     if (this.fileCache.fileExists(filePath)) {
@@ -1147,7 +1187,7 @@ class ModuleHelper {
    * Add a directory to the app TypeScript tsconfig includes.
    */
   addAppTsInclude(absolutePath) {
-    const rel = relative(this.nuxt.options.buildDir, absolutePath);
+    const rel = relative(this.nuxt.options.buildDir, absolutePath) + "/**/*";
     this.nuxt.options.typescript.tsConfig ||= {};
     this.nuxt.options.typescript.tsConfig.include ||= [];
     this.nuxt.options.typescript.tsConfig.include.push(rel);
@@ -1156,7 +1196,7 @@ class ModuleHelper {
    * Add a directory to the server/Nitro TypeScript tsconfig includes.
    */
   addServerTsInclude(absolutePath) {
-    const rel = relative(this.nuxt.options.buildDir, absolutePath);
+    const rel = relative(this.nuxt.options.buildDir, absolutePath) + "/**/*";
     this.nuxt.options.nitro.typescript ||= {};
     this.nuxt.options.nitro.typescript.tsConfig ||= {};
     this.nuxt.options.nitro.typescript.tsConfig.include ||= [];
@@ -1472,11 +1512,14 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_add_column_right",
   "bk_mdi_add_comment",
   "bk_mdi_add_row_below",
+  "bk_mdi_alternate_email",
   "bk_mdi_anchor",
   "bk_mdi_architecture",
   "bk_mdi_area_chart",
+  "bk_mdi_arrow_back",
   "bk_mdi_arrow_downward",
   "bk_mdi_arrow_drop_down",
+  "bk_mdi_arrow_forward",
   "bk_mdi_arrow_left",
   "bk_mdi_arrow_left_alt",
   "bk_mdi_arrow_right",
@@ -1494,41 +1537,56 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_calendar_month",
   "bk_mdi_campaign",
   "bk_mdi_chat",
+  "bk_mdi_chat_bubble-fill",
   "bk_mdi_check",
   "bk_mdi_check_box",
   "bk_mdi_check_box_outline_blank",
   "bk_mdi_check_circle",
+  "bk_mdi_check_circle-fill",
+  "bk_mdi_checklist",
   "bk_mdi_chevron_backward",
   "bk_mdi_chevron_forward",
-  "bk_mdi_chevron_left",
-  "bk_mdi_chevron_right",
   "bk_mdi_close",
+  "bk_mdi_code",
   "bk_mdi_collapse_all",
   "bk_mdi_comment",
   "bk_mdi_construction",
   "bk_mdi_content_copy",
   "bk_mdi_content_paste",
+  "bk_mdi_crop_9_16",
+  "bk_mdi_csv",
   "bk_mdi_dashboard",
+  "bk_mdi_data_object",
   "bk_mdi_delete",
   "bk_mdi_dock_to_left",
   "bk_mdi_dock_to_right",
   "bk_mdi_docs",
   "bk_mdi_done_all",
   "bk_mdi_donut_large",
+  "bk_mdi_download",
   "bk_mdi_drag_pan",
   "bk_mdi_edit",
   "bk_mdi_error",
+  "bk_mdi_error-fill",
   "bk_mdi_exit_to_app",
   "bk_mdi_expand_all",
   "bk_mdi_extension",
+  "bk_mdi_eye_tracking",
   "bk_mdi_feature_search",
   "bk_mdi_fit_screen",
+  "bk_mdi_format_bold",
+  "bk_mdi_format_italic",
+  "bk_mdi_format_list_bulleted",
+  "bk_mdi_format_list_numbered",
+  "bk_mdi_format_quote",
+  "bk_mdi_format_strikethrough",
   "bk_mdi_forum",
   "bk_mdi_fullscreen",
   "bk_mdi_fullscreen_exit",
   "bk_mdi_function",
   "bk_mdi_grid_view",
   "bk_mdi_grid_view-fill",
+  "bk_mdi_groups_2",
   "bk_mdi_help",
   "bk_mdi_help-fill",
   "bk_mdi_history",
@@ -1541,18 +1599,23 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_keyboard_arrow_down",
   "bk_mdi_keyboard_command_key",
   "bk_mdi_laptop_mac",
+  "bk_mdi_lightbulb",
+  "bk_mdi_link",
   "bk_mdi_lists",
   "bk_mdi_lock",
   "bk_mdi_logo_dev",
+  "bk_mdi_mark_chat_read",
   "bk_mdi_menu",
   "bk_mdi_mobile",
   "bk_mdi_mobile_rotate",
   "bk_mdi_monitor",
   "bk_mdi_newspaper",
+  "bk_mdi_notifications",
   "bk_mdi_open_in_new",
   "bk_mdi_palette",
   "bk_mdi_person",
   "bk_mdi_person-fill",
+  "bk_mdi_person_search",
   "bk_mdi_pie_chart",
   "bk_mdi_play_circle",
   "bk_mdi_priority_high",
@@ -1564,6 +1627,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_redo",
   "bk_mdi_remove",
   "bk_mdi_replay",
+  "bk_mdi_reply",
   "bk_mdi_resize",
   "bk_mdi_robot",
   "bk_mdi_save",
@@ -1583,6 +1647,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_swap_horiz",
   "bk_mdi_swap_horizontal_circle",
   "bk_mdi_swap_vert",
+  "bk_mdi_table_convert",
   "bk_mdi_tablet",
   "bk_mdi_text_compare",
   "bk_mdi_text_select_end",
@@ -1596,12 +1661,15 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_translate",
   "bk_mdi_tune",
   "bk_mdi_undo",
+  "bk_mdi_unpublished",
   "bk_mdi_upload",
+  "bk_mdi_verified",
   "bk_mdi_video_camera_back",
   "bk_mdi_visibility",
   "bk_mdi_visibility_off",
   "bk_mdi_warning",
   "bk_mdi_web_traffic",
+  "bk_mdi_widgets",
   "bk_mdi_workspaces",
   "bk_mdi_zoom_in"
 ];
@@ -1859,7 +1927,9 @@ export default adapterExtensions
   }
 );
 
-const processors = /* @__PURE__ */ new Map();
+const logger$2 = useLogger("@blokkli/editor");
+let processor = null;
+let processorUnavailable = false;
 function postcssMangleClasses(selectorParser) {
   const plugin = () => ({
     postcssPlugin: "postcss-mangle-blokkli-classes",
@@ -1878,6 +1948,10 @@ function postcssMangleClasses(selectorParser) {
                 return;
               }
               if (classNode.value.startsWith("bk-")) return;
+              if (classNode.value.startsWith("_bk_")) {
+                hasMangled = true;
+                return;
+              }
               classNode.value = "_bk_" + classNode.value;
               hasMangled = true;
             });
@@ -1897,35 +1971,41 @@ function postcssMangleClasses(selectorParser) {
   plugin.postcss = true;
   return plugin;
 }
+async function ensureProcessor() {
+  if (processor || processorUnavailable) return processor;
+  processor = await createProcessor();
+  return processor;
+}
 async function processCSS(css, from, contentPaths) {
-  const key = contentPaths?.join(",") || "";
-  if (!processors.has(key)) {
-    processors.set(key, await createProcessor(contentPaths));
-  }
-  const processor = processors.get(key);
-  const result = await processor.process(css, { from: from || "module.css" });
+  const proc = await ensureProcessor();
+  if (!proc) return css;
+  const sourceDirectives = contentPaths?.length ? "\n" + contentPaths.map((dir) => `@source "${dir}/**/*.vue";`).join("\n") : "";
+  const result = await proc.process(css + sourceDirectives, {
+    from: from || "module.css"
+  });
   return result.css;
 }
 function resetProcessor() {
-  processors.clear();
+  processor = null;
 }
-async function createProcessor(contentPaths) {
+async function createProcessor() {
   const _require = createRequire(import.meta.url);
   try {
     const postcss = _require("postcss");
-    const { default: tailwindConfig } = await import('./chunks/tailwindConfig.mjs');
-    const content = contentPaths?.length ? contentPaths.map((dir) => dir + "/**/*.vue") : [{ raw: " ", extension: "html" }];
+    const postcssImport = _require("postcss-import");
+    const postcssNesting = _require("postcss-nesting");
+    const tailwindPostcss = _require("@tailwindcss/postcss");
+    const selectorParser = _require("postcss-selector-parser");
+    const postcssReplace = _require("postcss-replace");
+    const remToPx = _require("@thedutchcoder/postcss-rem-to-px");
     const plugins = [
-      _require("postcss-import"),
-      _require("tailwindcss/nesting"),
-      _require("tailwindcss")({
-        ...tailwindConfig,
-        content
-      }),
-      postcssMangleClasses(_require("postcss-selector-parser")),
+      (postcssImport.default || postcssImport)(),
+      (postcssNesting.default || postcssNesting)(),
+      (tailwindPostcss.default || tailwindPostcss)(),
+      postcssMangleClasses(selectorParser)(),
       // Same scoping rules as postcss.config.cjs: scope selectors to .bk
       // and rename Tailwind CSS variables from --tw-* to --bk-tw-*.
-      _require("postcss-replace")({
+      (postcssReplace.default || postcssReplace)({
         pattern: /(--tw|\*, ::before, ::after)/g,
         data: {
           "--tw": "--bk-tw",
@@ -1933,22 +2013,207 @@ async function createProcessor(contentPaths) {
           "::backdrop": ".bk::backdrop, .bk ::backdrop"
         }
       }),
-      _require("@thedutchcoder/postcss-rem-to-px")({ baseValue: 16 })
+      (remToPx.default || remToPx)({ baseValue: 16 })
     ];
     return postcss(plugins);
   } catch (e) {
     if (e.code === "MODULE_NOT_FOUND") {
+      processorUnavailable = true;
       const missing = e.message.match(/Cannot find module '([^']+)'/)?.[1] || "unknown";
-      throw new Error(
-        `Missing dependency "${missing}" required for processing module CSS.
-Install the required PostCSS packages:
-npm install -D postcss tailwindcss postcss-import postcss-replace @thedutchcoder/postcss-rem-to-px`
+      logger$2.warn(
+        `bl\xF6kkli's PostCSS pipeline is disabled \u2014 missing dependency "${missing}". This is only required if you author custom bl\xF6kkli modules or features that use Tailwind v4 \`@apply\` / \`theme()\` in their <style> blocks. To enable it, install:
+  npm install -D postcss tailwindcss @tailwindcss/postcss postcss-import postcss-nesting postcss-replace @thedutchcoder/postcss-rem-to-px`
       );
+      return null;
     }
     throw e;
   }
 }
 
+function mangleClassName(name) {
+  if (name === "bk" || name.startsWith("bk-") || name.startsWith("_bk_")) {
+    return name;
+  }
+  return "_bk_" + name;
+}
+function mangleClassString(str) {
+  return str.split(/\s+/).filter(Boolean).map(mangleClassName).join(" ");
+}
+
+function collectClassReplacements(node, out) {
+  switch (node.type) {
+    case "Literal":
+      if (typeof node.value === "string" && node.value) {
+        const mangled = mangleClassString(node.value);
+        if (mangled !== node.value) {
+          out.push({ start: node.start + 1, end: node.end - 1, value: mangled });
+        }
+      }
+      break;
+    case "ObjectExpression":
+      for (const prop of node.properties) {
+        if (prop.type === "Property") {
+          if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+            const mangled = mangleClassString(prop.key.value);
+            if (mangled !== prop.key.value) {
+              out.push({
+                start: prop.key.start + 1,
+                end: prop.key.end - 1,
+                value: mangled
+              });
+            }
+          } else if (prop.computed) {
+            collectClassReplacements(prop.key, out);
+          }
+        }
+      }
+      break;
+    case "ArrayExpression":
+      for (const el of node.elements) {
+        if (el) collectClassReplacements(el, out);
+      }
+      break;
+    case "ConditionalExpression":
+      collectClassReplacements(node.consequent, out);
+      collectClassReplacements(node.alternate, out);
+      break;
+    case "LogicalExpression":
+      collectClassReplacements(node.left, out);
+      collectClassReplacements(node.right, out);
+      break;
+    case "CallExpression":
+      if (node.callee.type === "Identifier" && node.callee.name === "tw") {
+        for (const arg of node.arguments) {
+          if (arg.type === "Literal" && typeof arg.value === "string") {
+            const mangled = mangleClassString(arg.value);
+            if (mangled !== arg.value) {
+              out.push({
+                start: arg.start + 1,
+                end: arg.end - 1,
+                value: mangled
+              });
+            }
+          }
+        }
+      }
+      break;
+  }
+}
+function mangleClassExpression(expr) {
+  let ast;
+  try {
+    ast = acorn.parse("(" + expr + ")", {
+      ecmaVersion: 2022,
+      sourceType: "module"
+    });
+  } catch {
+    return expr;
+  }
+  const body = ast.body[0];
+  if (!body || body.type !== "ExpressionStatement") return expr;
+  const replacements = [];
+  collectClassReplacements(body.expression, replacements);
+  if (replacements.length === 0) return expr;
+  replacements.sort((a, b) => b.start - a.start);
+  let result = expr;
+  for (const r of replacements) {
+    result = result.slice(0, r.start - 1) + r.value + result.slice(r.end - 1);
+  }
+  return result;
+}
+function mangleTemplateAndScript(code) {
+  let result = code;
+  result = result.replace(
+    /(?<![-:.])\bclass="([^"]*)"/g,
+    (_match, value) => `class="${mangleClassString(value)}"`
+  );
+  result = result.replace(
+    /\btw\(\s*(['"])([\s\S]*?)\1\s*\)/g,
+    (_match, quote, value) => `tw(${quote}${mangleClassString(value)}${quote})`
+  );
+  result = result.replace(
+    /(?::|v-bind:)class="([^"]*)"/g,
+    (_match, expr) => `:class="${mangleClassExpression(expr)}"`
+  );
+  return result;
+}
+function withTailwindConfig(cssContent, tailwindConfigPath) {
+  if (cssContent.includes("@reference") || cssContent.includes("@config")) {
+    return cssContent;
+  }
+  const leadingPattern = /^(?:\s*(?:\/\*[\s\S]*?\*\/|@charset[^;]*;|@import[^;]*;|@layer\s[\w\s,-]+;))*\s*/;
+  const match = cssContent.match(leadingPattern);
+  const insertAt = match ? match[0].length : 0;
+  const injection = `@reference 'tailwindcss';
+@config '${tailwindConfigPath}';
+`;
+  return cssContent.slice(0, insertAt) + injection + cssContent.slice(insertAt);
+}
+let stripProcessor = null;
+async function stripDistBoilerplate(css) {
+  if (!stripProcessor) {
+    const _require = createRequire(import.meta.url);
+    const postcss = _require("postcss");
+    const plugin = () => ({
+      postcssPlugin: "postcss-strip-blokkli-dist-boilerplate",
+      Once(root) {
+        const toUnwrap = [];
+        const toRemove = [];
+        root.walkAtRules("layer", (atRule) => {
+          if (!atRule.nodes) {
+            toRemove.push(atRule);
+            return;
+          }
+          const name = atRule.params.trim();
+          if (name === "base" || name === "theme" || name === "properties") {
+            toRemove.push(atRule);
+          } else if (name === "components" || name === "utilities") {
+            toUnwrap.push(atRule);
+          }
+        });
+        root.walkAtRules("property", (atRule) => {
+          if (atRule.params.startsWith("--bk-tw-")) {
+            toRemove.push(atRule);
+          }
+        });
+        for (const r of toUnwrap) r.replaceWith(r.nodes);
+        for (const r of toRemove) r.remove();
+      }
+    });
+    plugin.postcss = true;
+    stripProcessor = postcss([plugin()]);
+  }
+  const result = await stripProcessor.process(css, { from: void 0 });
+  return result.css;
+}
+async function processStyleBlocks(code, filePath, tailwindConfigPath) {
+  if (!await ensureProcessor()) return code;
+  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/g;
+  let result = code;
+  let styleMatch;
+  while ((styleMatch = styleRegex.exec(result)) !== null) {
+    const fullMatch = styleMatch[0];
+    const attrs = styleMatch[1] || "";
+    const cssContent = styleMatch[2] || "";
+    if (cssContent.trim()) {
+      const withConfig = withTailwindConfig(cssContent, tailwindConfigPath);
+      const processed = await processCSS(withConfig, filePath);
+      const stripped = await stripDistBoilerplate(processed);
+      const cleanAttrs = attrs.replace(/\s*lang=["']postcss["']/g, "");
+      const replacement = `<style${cleanAttrs}>${stripped}</style>`;
+      result = result.slice(0, styleMatch.index) + replacement + result.slice(styleMatch.index + fullMatch.length);
+      styleRegex.lastIndex = styleMatch.index + replacement.length;
+    }
+  }
+  return result;
+}
+async function mangleVueSFC(code, id, tailwindConfigPath) {
+  let result = mangleTemplateAndScript(code);
+  result = await processStyleBlocks(result, id, tailwindConfigPath);
+  if (result === code) return null;
+  return result;
+}
+
 const logger$1 = useLogger("@blokkli/editor");
 const styles = defineFileTemplate(
   "styles.css",
@@ -1957,14 +2222,16 @@ const styles = defineFileTemplate(
       "./runtime/editor/css/output.css"
     );
     let moduleCSS = "";
+    const tailwindConfigPath = ctx.helper.getTailwindConfigPath();
     const cssFiles = ctx.getCSSFiles();
     if (cssFiles.length > 0) {
       resetProcessor();
       const processed = [];
       for (const filePath of cssFiles) {
         const content = await ctx.helper.fileCache.read(filePath);
+        const withConfig = withTailwindConfig(content, tailwindConfigPath);
         try {
-          const result = await processCSS(content, filePath);
+          const result = await processCSS(withConfig, filePath);
           processed.push(result);
         } catch (e) {
           logger$1.error(
@@ -1977,11 +2244,18 @@ ${e.message}`
         moduleCSS = "\n/* Module CSS */\n" + processed.join("\n");
       }
     }
-    const contentPaths = ctx.getContentPaths();
+    const editorOwnRuntime = ctx.helper.resolvers.module.resolve("./runtime");
+    const editorOwnModules = ctx.helper.resolvers.module.resolve("./modules");
+    const contentPaths = ctx.getContentPaths().filter(
+      (p) => !p.startsWith(editorOwnRuntime) && !p.startsWith(editorOwnModules)
+    );
     if (contentPaths.length > 0) {
       try {
         const utilities = await processCSS(
-          "@tailwind utilities;",
+          `@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@config '${tailwindConfigPath}';`,
           "module-utilities.css",
           contentPaths
         );
@@ -2852,6 +3126,7 @@ const editorConfig = defineCodeTemplate(
   "editor-config",
   (ctx) => {
     const settingsOverride = ctx.helper.options.settingsOverride || {};
+    const colorOptions = ctx.helper.options.colorOptions || {};
     const featureFragmentNames = ctx.getFeatureFragmentNames();
     return `
 export const hasCustomTheme = ${JSON.stringify(ctx.theme.hasCustomTheme)}
@@ -2860,6 +3135,8 @@ export const themes = ${JSON.stringify(themes, null, 2)}
 
 export const theme = ${JSON.stringify(ctx.theme.fullTheme, null, 2)}
 
+export const colorOptions = ${JSON.stringify(colorOptions, null, 2)}
+
 export const settingsOverride = ${JSON.stringify(settingsOverride)}
 
 export const blokkliVersion = ${JSON.stringify(version)}
@@ -2891,11 +3168,14 @@ export const textAutoReplace = ${(() => {
 `;
   },
   (ctx) => {
+    const validColorOptions = Object.keys(ctx.helper.options.colorOptions || {}).map((v) => `'${v}'`).join(" | ");
     return `
 import type { Theme } from '${ctx.helper.relativePaths.TYPES_THEME}'
 import type { ModuleOptionsSettings } from '#blokkli-build/module-types'
 import type { InterfaceLanguage } from '#blokkli-build/translations'
 
+export type ValidColorOption = ${validColorOptions}
+
 /**
  * Whether the app uses a custom theme.
  */
@@ -2906,6 +3186,11 @@ export declare const hasCustomTheme: boolean
  */
 export declare const themes: Record<string, Theme>
 
+/**
+ * The available color options.
+ */
+export declare const colorOptions: Record<ValidColorOption, { hex: string; label: string }>
+
 /**
  * The default theme.
  */
@@ -2955,6 +3240,10 @@ export declare const textAutoReplace: {
   enDash: boolean
 }
 `;
+  },
+  {
+    context: "both",
+    write: true
   }
 );
 
@@ -3159,7 +3448,14 @@ function toRuntimeOptionArray(option) {
   } else if (option.type === "checkboxes") {
     return [option.type, option.default, Object.keys(option.options)];
   } else if (option.type === "number") {
-    return [option.type, option.default, [option.min, option.max]];
+    const hasBounds = option.min !== void 0 || option.max !== void 0;
+    if (option.nullable) {
+      return [option.type, option.default, [option.min, option.max], true];
+    }
+    if (hasBounds) {
+      return [option.type, option.default, [option.min, option.max]];
+    }
+    return [option.type, option.default];
   } else if (option.type === "range") {
     return [option.type, option.default, [option.min, option.max]];
   } else if (option.type === "datetime-local") {
@@ -3278,8 +3574,10 @@ ${toObject("FIELD_MAPPING", FIELD_MAPPING)}
           return `${key}: ${possibleValues}`;
         } else if (option.type === "color") {
           return key + ": `#${string}`";
-        } else if (option.type === "range" || option.type === "number") {
+        } else if (option.type === "range") {
           return `${key}: number`;
+        } else if (option.type === "number") {
+          return option.nullable ? `${key}: number | undefined` : `${key}: number`;
         }
       });
     }
@@ -3896,11 +4194,13 @@ class FeatureCollector extends Collector {
   needsFileContents = true;
   disabledFeatures = /* @__PURE__ */ new Set();
   srcFromModule;
+  srcFromBlokkliDir;
   constructor(helper) {
     super(helper);
     this.srcFromModule = helper.resolvers.module.resolve(
       "./runtime/editor/features"
     );
+    this.srcFromBlokkliDir = helper.resolvers.root.resolve("./blokkli/features");
   }
   getEnabledFeatures() {
     return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id));
@@ -3913,6 +4213,13 @@ class FeatureCollector extends Collector {
         followSymbolicLinks: false
       }
     );
+    const blokkliDirFeatures = await resolveFiles(
+      this.srcFromBlokkliDir,
+      ["*/index.vue"],
+      {
+        followSymbolicLinks: false
+      }
+    );
     const customFeatures = this.helper.options.featureImports ? await resolveFiles(
       this.helper.paths.srcDir,
       this.helper.options.featureImports,
@@ -3921,7 +4228,9 @@ class FeatureCollector extends Collector {
       }
     ) : [];
     await Promise.all(
-      [...builtinFeatures, ...customFeatures].map((v) => this.addFile(v))
+      [...builtinFeatures, ...blokkliDirFeatures, ...customFeatures].map(
+        (v) => this.addFile(v)
+      )
     );
     const features = [...this.files.values()];
     if (!this.helper.options.enableThemeEditor) {
@@ -4014,136 +4323,6 @@ class ThemeData {
   }
 }
 
-function mangleClassName(name) {
-  if (name === "bk" || name.startsWith("bk-")) return name;
-  return "_bk_" + name;
-}
-function mangleClassString(str) {
-  return str.split(/\s+/).filter(Boolean).map(mangleClassName).join(" ");
-}
-
-function collectClassReplacements(node, out) {
-  switch (node.type) {
-    case "Literal":
-      if (typeof node.value === "string" && node.value) {
-        const mangled = mangleClassString(node.value);
-        if (mangled !== node.value) {
-          out.push({ start: node.start + 1, end: node.end - 1, value: mangled });
-        }
-      }
-      break;
-    case "ObjectExpression":
-      for (const prop of node.properties) {
-        if (prop.type === "Property") {
-          if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
-            const mangled = mangleClassString(prop.key.value);
-            if (mangled !== prop.key.value) {
-              out.push({
-                start: prop.key.start + 1,
-                end: prop.key.end - 1,
-                value: mangled
-              });
-            }
-          } else if (prop.computed) {
-            collectClassReplacements(prop.key, out);
-          }
-        }
-      }
-      break;
-    case "ArrayExpression":
-      for (const el of node.elements) {
-        if (el) collectClassReplacements(el, out);
-      }
-      break;
-    case "ConditionalExpression":
-      collectClassReplacements(node.consequent, out);
-      collectClassReplacements(node.alternate, out);
-      break;
-    case "LogicalExpression":
-      collectClassReplacements(node.left, out);
-      collectClassReplacements(node.right, out);
-      break;
-    case "CallExpression":
-      if (node.callee.type === "Identifier" && node.callee.name === "tw") {
-        for (const arg of node.arguments) {
-          if (arg.type === "Literal" && typeof arg.value === "string") {
-            const mangled = mangleClassString(arg.value);
-            if (mangled !== arg.value) {
-              out.push({
-                start: arg.start + 1,
-                end: arg.end - 1,
-                value: mangled
-              });
-            }
-          }
-        }
-      }
-      break;
-  }
-}
-function mangleClassExpression(expr) {
-  let ast;
-  try {
-    ast = acorn.parse("(" + expr + ")", {
-      ecmaVersion: 2022,
-      sourceType: "module"
-    });
-  } catch {
-    return expr;
-  }
-  const body = ast.body[0];
-  if (!body || body.type !== "ExpressionStatement") return expr;
-  const replacements = [];
-  collectClassReplacements(body.expression, replacements);
-  if (replacements.length === 0) return expr;
-  replacements.sort((a, b) => b.start - a.start);
-  let result = expr;
-  for (const r of replacements) {
-    result = result.slice(0, r.start - 1) + r.value + result.slice(r.end - 1);
-  }
-  return result;
-}
-function mangleTemplateAndScript(code) {
-  let result = code;
-  result = result.replace(
-    /(?<![-:.])\bclass="([^"]*)"/g,
-    (_match, value) => `class="${mangleClassString(value)}"`
-  );
-  result = result.replace(
-    /\btw\(\s*(['"])([\s\S]*?)\1\s*\)/g,
-    (_match, quote, value) => `tw(${quote}${mangleClassString(value)}${quote})`
-  );
-  result = result.replace(
-    /(?::|v-bind:)class="([^"]*)"/g,
-    (_match, expr) => `:class="${mangleClassExpression(expr)}"`
-  );
-  return result;
-}
-async function processStyleBlocks(code, filePath) {
-  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/g;
-  let result = code;
-  let styleMatch;
-  while ((styleMatch = styleRegex.exec(result)) !== null) {
-    const fullMatch = styleMatch[0];
-    const attrs = styleMatch[1] || "";
-    const cssContent = styleMatch[2] || "";
-    if (cssContent.trim()) {
-      const processed = await processCSS(cssContent, filePath);
-      const cleanAttrs = attrs.replace(/\s*lang=["']postcss["']/g, "");
-      const replacement = `<style${cleanAttrs}>${processed}</style>`;
-      result = result.slice(0, styleMatch.index) + replacement + result.slice(styleMatch.index + fullMatch.length);
-      styleRegex.lastIndex = styleMatch.index + replacement.length;
-    }
-  }
-  return result;
-}
-async function mangleVueSFC(code, id) {
-  let result = mangleTemplateAndScript(code);
-  result = await processStyleBlocks(result, id);
-  if (result === code) return null;
-  return result;
-}
-
 const logger = useLogger("@blokkli/editor");
 const module$1 = defineNuxtModule({
   meta: {
@@ -4187,6 +4366,16 @@ const module$1 = defineNuxtModule({
       import.meta.url,
       moduleOptions
     );
+    const colorOptions = Object.entries(
+      helper.options.colorOptions || {}
+    ).reduce((acc, entry) => {
+      acc[entry[0]] = entry[1].hex;
+      return acc;
+    }, {});
+    nuxt.options.appConfig.blokkli = {
+      // @ts-expect-error The module config type defined a generic Record type, but in userland, this type will automatically contain the actual color keys as properties.
+      colorOptions
+    };
     const theme = new ThemeData(helper);
     const iconCollector = new IconCollector(helper);
     const featureCollector = new FeatureCollector(helper);
@@ -4203,6 +4392,14 @@ const module$1 = defineNuxtModule({
       blockCollector,
       theme
     );
+    const distMarker = helper.resolvers.module.resolve(
+      "./modules/tailwind/index.mjs"
+    );
+    const isRunningFromDist = helper.fileCache.fileExists(distMarker);
+    if (!isRunningFromDist) {
+      context.addContentPath(helper.resolvers.module.resolve("./runtime"));
+      context.addContentPath(helper.resolvers.module.resolve("./modules"));
+    }
     const app = {
       helper,
       context,
@@ -4269,6 +4466,8 @@ const module$1 = defineNuxtModule({
     const blokkliModulesDir = resolve$1(nuxt.options.rootDir, "blokkli/modules");
     helper.addAppTsInclude(join(blokkliModulesDir, "*/app"));
     helper.addServerTsInclude(join(blokkliModulesDir, "*/server"));
+    const blokkliFeaturesDir = helper.resolvers.root.resolve("./blokkli/features");
+    context.addContentPath(blokkliFeaturesDir);
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push({
@@ -4290,13 +4489,14 @@ const module$1 = defineNuxtModule({
     addBuildPlugin(BlokkliEditingPlugin(nuxt));
     const contentPaths = context.getContentPaths();
     if (contentPaths.length > 0) {
+      const tailwindConfigPath = helper.getTailwindConfigPath();
       addVitePlugin({
         name: "blokkli-mangle-module-classes",
         enforce: "pre",
         async transform(code, id) {
           if (!id.endsWith(".vue")) return null;
           if (!contentPaths.some((dir) => id.startsWith(dir))) return null;
-          const result = await mangleVueSFC(code, id);
+          const result = await mangleVueSFC(code, id, tailwindConfigPath);
           return result ? { code: result, map: null } : null;
         },
         hotUpdate: {