@blokkli/editor 2.0.0-alpha.62 → 2.0.0-alpha.64

package/dist/global/types/blockOptions.d.ts

@@ -1,3 +1,4 @@
+export type DefinitionString = string | Record<string, string>;
 type DefinitionOptionText = {
     /**
      * The option type.
@@ -10,13 +11,17 @@ type DefinitionOptionText = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
+    /**
+     * The placeholder.
+     */
+    placeholder?: DefinitionString;
     /**
      * The HTML input type.
      *
@@ -38,13 +43,13 @@ type DefinitionOptionNumberBase = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * Minimum allowed value.
      *
@@ -93,13 +98,13 @@ type DefinitionOptionRange = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * Minimum allowed value.
      */
@@ -127,13 +132,13 @@ type DefinitionOptionDateTimeLocal = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * The default value as an ISO 8601 datetime string.
      *
@@ -167,13 +172,13 @@ type DefinitionOptionCheckbox = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * Optional group name for organizing options.
      *
@@ -195,13 +200,13 @@ type DefinitionOptionColor = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * Optional group name for organizing options.
      *
@@ -217,13 +222,13 @@ type DefinitionOptionCheckboxes = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * The default values.
      */
@@ -233,7 +238,7 @@ type DefinitionOptionCheckboxes = {
      *
      * Key is the option value, value is the display label.
      */
-    options: Record<string, string>;
+    options: Record<string, DefinitionString>;
     /**
      * Optional group name for organizing options.
      *
@@ -251,11 +256,11 @@ type DefinitionOptionRadiosGridOption = {
     /**
      * The label displayed for this option.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context for this option.
      */
-    description?: string;
+    description?: DefinitionString;
 };
 type DefinitionOptionRadiosGrid = {
     /**
@@ -285,11 +290,11 @@ type DefinitionOptionRadiosColorsOption = {
     /**
      * The label displayed for this option.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context for this option.
      */
-    description?: string;
+    description?: DefinitionString;
 };
 type DefinitionOptionRadiosColors = {
     /**
@@ -317,8 +322,8 @@ type DefinitionOptionRadiosRadios = {
      * label and optional description.
      */
     options: Record<string, string | {
-        label: string;
-        description?: string;
+        label: DefinitionString;
+        description?: DefinitionString;
     }>;
 };
 type DefinitionOptionRadiosIconsOptionBase<Icon extends string = string> = {
@@ -331,11 +336,11 @@ type DefinitionOptionRadiosIconsOptionBase<Icon extends string = string> = {
     /**
      * The label displayed for this option.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context for this option.
      */
-    description?: string;
+    description?: DefinitionString;
 };
 type DefinitionOptionRadiosIconsBase<Icon extends string = string> = {
     /**
@@ -357,13 +362,13 @@ type DefinitionOptionRadiosBase<Icon extends string = string> = {
     /**
      * The label displayed in the editor.
      */
-    label: string;
+    label: DefinitionString;
     /**
      * Optional description providing additional context.
      *
      * Displayed below the option label in the editor.
      */
-    description?: string;
+    description?: DefinitionString;
     /**
      * The default value.
      *
@@ -379,10 +384,10 @@ type DefinitionOptionRadiosBase<Icon extends string = string> = {
 } & (DefinitionOptionRadiosColors | DefinitionOptionRadiosGrid | DefinitionOptionRadiosRadios | DefinitionOptionRadiosIconsBase<Icon>);
 type DefinitionOptionJsonBase<DataType extends string = string> = {
     type: 'json';
-    label: string;
+    label: DefinitionString;
     default: string;
     dataType?: DataType;
-    description?: string;
+    description?: DefinitionString;
     group?: string;
 };
 export type BlockOptionDefinitionBase<Icon extends string = string, DataType extends string = string> = DefinitionOptionJsonBase<DataType> | DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadiosBase<Icon> | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber | DefinitionOptionDateTimeLocal;

package/dist/global/types/colorOptions.d.ts

@@ -1,4 +1,20 @@
+/**
+ * A color option declared at build time.
+ *
+ * Two shapes:
+ * - A flat color with a single hex value.
+ * - A ramped color with a map of shades and an explicit `mainShade` that
+ *   identifies which shade is the canonical/base swatch.
+ *
+ * For ramped colors, a chart can reference the base via the bare color id
+ * (e.g. `red`) or any specific shade via the compound id `red.<shade>` (e.g.
+ * `red.300`).
+ */
 export type ColorOption = {
+    label: string;
     hex: string;
+} | {
     label: string;
+    shades: Record<string, string>;
+    mainShade: string;
 };

package/dist/module.d.mts

@@ -1,6 +1,6 @@
 import { NuxtModule } from 'nuxt/schema';
-import { M as ModuleOptions } from './shared/editor.D28NbXr3.mjs';
-export { a as ModuleHooks } from './shared/editor.D28NbXr3.mjs';
+import { M as ModuleOptions } from './shared/editor.BDyiQvbV.mjs';
+export { a as ModuleHooks } from './shared/editor.BDyiQvbV.mjs';
 import 'consola';
 import '../dist/global/types/definitions.js';
 import '../dist/global/types/theme.js';

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.62",
+  "version": "2.0.0-alpha.64",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

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, c as extractObjectLiteral, p as parseTsObject, t as toValidVariableName, o as onlyUnique, f as falsy, s as sortObjectKeys } from './shared/editor.Gu7mgJ5Q.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.BGemL1Oh.mjs';
 import { dirname, resolve, relative } from 'pathe';
 import micromatch from 'micromatch';
 import { hash } from 'ohash';
@@ -19,7 +19,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.62";
+const version = "2.0.0-alpha.64";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1008,6 +1008,95 @@ class FileCache {
   }
 }
 
+const HEX_COLOR_REGEX = /^#(?:[\da-f]{3}|[\da-f]{6})$/i;
+const VALID_ID_REGEX = /^[a-z_$][\w$]*$/i;
+function isHex(value) {
+  return typeof value === "string" && HEX_COLOR_REGEX.test(value);
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.length > 0;
+}
+function hasShades(option) {
+  return "shades" in option && !!option.shades && typeof option.shades === "object";
+}
+function validateColorOption(colorId, option) {
+  const errors = [];
+  if (!VALID_ID_REGEX.test(colorId)) {
+    errors.push({
+      message: `Color id "${colorId}" is not a valid JavaScript identifier (must start with a letter, underscore or $, followed by letters, digits, underscores or $). Color ids may not contain "." \u2014 that character is reserved for shade-qualified ids (e.g. "red.300").`,
+      optionKey: colorId
+    });
+  }
+  if (!isNonEmptyString(option.label)) {
+    errors.push({
+      message: `Option "${colorId}" is missing a non-empty "label".`,
+      optionKey: colorId
+    });
+  }
+  if (hasShades(option)) {
+    const shadeKeys = Object.keys(option.shades);
+    if (shadeKeys.length === 0) {
+      errors.push({
+        message: `Option "${colorId}" declares an empty "shades" object. Either omit "shades" or declare at least one shade.`,
+        optionKey: colorId
+      });
+    }
+    for (const shadeKey of shadeKeys) {
+      const shadeValue = option.shades[shadeKey];
+      if (!isHex(shadeValue)) {
+        errors.push({
+          message: `Option "${colorId}" shade "${shadeKey}" has value "${shadeValue}" which is not a valid hex color (expected format: #RRGGBB or #RGB)`,
+          optionKey: colorId
+        });
+      }
+    }
+    if (!isNonEmptyString(option.mainShade)) {
+      errors.push({
+        message: `Option "${colorId}" declares "shades" but is missing "mainShade".`,
+        optionKey: colorId
+      });
+    } else if (!shadeKeys.includes(option.mainShade)) {
+      errors.push({
+        message: `Option "${colorId}" mainShade "${option.mainShade}" is not a key of shades (available: ${shadeKeys.map((k) => `"${k}"`).join(", ")})`,
+        optionKey: colorId
+      });
+    }
+    if ("hex" in option) {
+      errors.push({
+        message: `Option "${colorId}" declares both "hex" and "shades". Use one or the other: shaded colors derive their base hex from "shades[mainShade]".`,
+        optionKey: colorId
+      });
+    }
+  } else {
+    const hex = option.hex;
+    if (hex === void 0) {
+      errors.push({
+        message: `Option "${colorId}": "hex" is required when "shades" is not provided.`,
+        optionKey: colorId
+      });
+    } else if (!isHex(hex)) {
+      errors.push({
+        message: `Option "${colorId}" has hex value "${hex}" which is not a valid hex color (expected format: #RRGGBB or #RGB)`,
+        optionKey: colorId
+      });
+    }
+  }
+  return errors;
+}
+function validateColorOptions(colorOptions) {
+  if (!colorOptions) {
+    return [];
+  }
+  const errors = [];
+  for (const [colorId, option] of Object.entries(colorOptions)) {
+    if (!option || typeof option !== "object") {
+      continue;
+    }
+    errors.push(...validateColorOption(colorId, option));
+  }
+  return errors;
+}
+
 const defaultColorOptions = {
   blue: { hex: "#3b82f6", label: "Blue" },
   red: { hex: "#ef4444", label: "Red" },
@@ -1109,6 +1198,11 @@ class ModuleHelper {
   resolvers;
   fileCache;
   options;
+  /**
+   * npm packages to pre-bundle via Vite's optimizeDeps, collected from the core
+   * module and enabled sub-modules. Flushed by {@link applyBuildConfig}.
+   */
+  packageDependencies = /* @__PURE__ */ new Set();
   isDev;
   isModuleBuild;
   isPrepare;
@@ -1165,6 +1259,43 @@ class ModuleHelper {
       from: this.resolvers.module.resolve("./runtime/composables/" + name)
     });
   }
+  /**
+   * Register npm packages that the editor imports at runtime so Vite
+   * pre-bundles them.
+   *
+   * Without this, Vite discovers a dependency lazily on first import (often via
+   * a dynamic `import()`) and triggers a full page reload to re-optimize. The
+   * core module declares its own dependencies; optional modules (agent, charts,
+   * …) declare theirs only when enabled, so projects that don't use a module
+   * don't pre-bundle its dependencies.
+   *
+   * Collected here and flushed to the Vite config by {@link applyBuildConfig},
+   * which the core module calls once all modules have run their setup.
+   *
+   * @param names - Bare package specifiers (e.g. 'echarts', '@tiptap/core').
+   */
+  addPackageDependency(...names) {
+    for (const name of names) {
+      this.packageDependencies.add(name);
+    }
+  }
+  /**
+   * Apply collected build configuration to the Nuxt/Vite config.
+   *
+   * Called once by the core module after every module's setup has run, so it
+   * sees the full set of {@link addPackageDependency} registrations.
+   */
+  applyBuildConfig() {
+    this.nuxt.options.vite.optimizeDeps ??= {};
+    const include = this.nuxt.options.vite.optimizeDeps.include ??= [];
+    const exclude = this.nuxt.options.vite.optimizeDeps.exclude ?? [];
+    for (const name of this.packageDependencies) {
+      if (include.includes(name) || exclude.includes(name)) {
+        continue;
+      }
+      include.push(name);
+    }
+  }
   addAlias(name, path) {
     this.nuxt.options.alias[name] = path;
     this.nuxt.options.nitro.typescript ||= {};
@@ -1221,9 +1352,10 @@ class ModuleHelper {
     return bundle;
   }
   validate(icons) {
-    const errors = validateOptions(this.options.globalOptions, icons);
-    if (errors.length > 0) {
-      const lines = errors.map((error) => {
+    let hasErrors = false;
+    const optionErrors = validateOptions(this.options.globalOptions, icons);
+    if (optionErrors.length > 0) {
+      const lines = optionErrors.map((error) => {
         const prefix = error.optionKey ? `  Option "${error.optionKey}": ` : "  ";
         return prefix + error.message;
       });
@@ -1231,9 +1363,21 @@ class ModuleHelper {
         `bl\xF6kkli global options validation errors:
 ${lines.join("\n")}`
       );
-      return true;
+      hasErrors = true;
     }
-    return false;
+    const colorErrors = validateColorOptions(this.options.colorOptions);
+    if (colorErrors.length > 0) {
+      const lines = colorErrors.map((error) => {
+        const prefix = error.optionKey ? `  Option "${error.optionKey}": ` : "  ";
+        return prefix + error.message;
+      });
+      this.logger.error(
+        `bl\xF6kkli colorOptions validation errors:
+${lines.join("\n")}`
+      );
+      hasErrors = true;
+    }
+    return hasErrors;
   }
 }
 
@@ -2121,12 +2265,20 @@ function mangleClassExpression(expr) {
   }
   return result;
 }
+const CLASS_BEARING_PROPS = ["button-class", "background-class"];
 function mangleTemplateAndScript(code) {
   let result = code;
   result = result.replace(
     /(?<![-:.])\bclass="([^"]*)"/g,
     (_match, value) => `class="${mangleClassString(value)}"`
   );
+  for (const prop of CLASS_BEARING_PROPS) {
+    const staticAttr = new RegExp(`(?<![:.])\\b${prop}="([^"]*)"`, "g");
+    result = result.replace(
+      staticAttr,
+      (_match, value) => `${prop}="${mangleClassString(value)}"`
+    );
+  }
   result = result.replace(
     /\btw\(\s*(['"])([\s\S]*?)\1\s*\)/g,
     (_match, quote, value) => `tw(${quote}${mangleClassString(value)}${quote})`
@@ -2135,6 +2287,13 @@ function mangleTemplateAndScript(code) {
     /(?::|v-bind:)class="([^"]*)"/g,
     (_match, expr) => `:class="${mangleClassExpression(expr)}"`
   );
+  for (const prop of CLASS_BEARING_PROPS) {
+    const boundAttr = new RegExp(`(:|v-bind:)${prop}="([^"]*)"`, "g");
+    result = result.replace(
+      boundAttr,
+      (_match, prefix, expr) => `${prefix}${prop}="${mangleClassExpression(expr)}"`
+    );
+  }
   return result;
 }
 function withTailwindConfig(cssContent, tailwindConfigPath) {
@@ -2279,6 +2438,19 @@ ${moduleCSS}
   { dependencies: ["module-css"] }
 );
 
+function buildColorPalette(ctx) {
+  const palette = [];
+  for (const [id, option] of Object.entries(
+    ctx.helper.options.colorOptions || {}
+  )) {
+    if ("shades" in option) {
+      palette.push(`${id}.${option.mainShade}`);
+    } else {
+      palette.push(id);
+    }
+  }
+  return palette;
+}
 function mapVars(ctx) {
   return {
     itemEntityType: JSON.stringify(
@@ -2289,7 +2461,8 @@ function mapVars(ctx) {
     ),
     fragmentBlockBundle: JSON.stringify(
       ctx.helper.options.fragmentBlockBundle ?? "blokkli_fragment"
-    )
+    ),
+    colorPalette: JSON.stringify(buildColorPalette(ctx))
   };
 }
 const config = defineCodeTemplate(
@@ -2302,6 +2475,8 @@ export const itemEntityType = ${vars.itemEntityType}
 export const fromLibraryBlockBundle = ${vars.fromLibraryBlockBundle}
 
 export const fragmentBlockBundle = ${vars.fragmentBlockBundle}
+
+export const colorPalette = ${vars.colorPalette}
 `;
   },
   (ctx) => {
@@ -2314,6 +2489,15 @@ export declare const itemEntityType: ${vars.itemEntityType}
 
 export declare const fromLibraryBlockBundle: ${vars.fromLibraryBlockBundle}
 export declare const fragmentBlockBundle: ${vars.fragmentBlockBundle}
+
+/**
+ * Ordered list of canonical default color ids \u2014 one per declared family,
+ * in declaration order. Flat colors appear as bare ids, ramped colors as
+ * \`<id>.<mainShade>\`. Runtime consumers cycle through this to assign
+ * default colors (e.g. dynamic chart series); the runtime composable also
+ * walks it as a fallback cascade when a requested id can't be resolved.
+ */
+export declare const colorPalette: string[]
 `;
   }
 );
@@ -3176,6 +3360,10 @@ import type { InterfaceLanguage } from '#blokkli-build/translations'
 
 export type ValidColorOption = ${validColorOptions}
 
+export type GeneratedColorOption =
+  | { label: string; hex: string }
+  | { label: string; shades: Record<string, string>; mainShade: string }
+
 /**
  * Whether the app uses a custom theme.
  */
@@ -3189,7 +3377,7 @@ export declare const themes: Record<string, Theme>
 /**
  * The available color options.
  */
-export declare const colorOptions: Record<ValidColorOption, { hex: string; label: string }>
+export declare const colorOptions: Record<ValidColorOption, GeneratedColorOption>
 
 /**
  * The default theme.
@@ -3913,6 +4101,39 @@ const optionsSchema = withHelper((helper) => {
   }
   return defineFileTemplate(fileName, (ctx) => {
     const globalOptions = ctx.helper.options.globalOptions || {};
+    const defaultLanguage = ctx.helper.options.defaultLanguage || "en";
+    const normalizeDefinitionString = (value) => {
+      if (typeof value === "string") {
+        return { [defaultLanguage]: value };
+      }
+      return value;
+    };
+    const normalizeOption = (option) => {
+      if (!option || typeof option !== "object") {
+        return option;
+      }
+      const result = { ...option };
+      if ("label" in result) {
+        result.label = normalizeDefinitionString(result.label);
+      }
+      if ("description" in result) {
+        result.description = normalizeDefinitionString(result.description);
+      }
+      if (result.options && typeof result.options === "object") {
+        const normalizedOptions = {};
+        for (const [key, value] of Object.entries(result.options)) {
+          if (result.type === "checkboxes") {
+            normalizedOptions[key] = normalizeDefinitionString(value);
+          } else if (typeof value === "string") {
+            normalizedOptions[key] = { label: { [defaultLanguage]: value } };
+          } else {
+            normalizedOptions[key] = normalizeOption(value);
+          }
+        }
+        result.options = normalizedOptions;
+      }
+      return result;
+    };
     const blocks = [...ctx.blocks.files.values()];
     const schema = blocks.reduce((acc, v) => {
       if (v.definition && isBlock(v.definition)) {
@@ -3928,6 +4149,12 @@ const optionsSchema = withHelper((helper) => {
       }
       return acc;
     }, {});
+    for (const bundle of Object.keys(schema)) {
+      const options = schema[bundle];
+      for (const key of Object.keys(options)) {
+        options[key] = normalizeOption(options[key]);
+      }
+    }
     const sorted = sortObjectKeys(schema);
     return JSON.stringify(sorted, null, 2);
   });
@@ -4366,14 +4593,21 @@ const module$1 = defineNuxtModule({
       import.meta.url,
       moduleOptions
     );
-    const colorOptions = Object.entries(
+    const colorOptions = {};
+    for (const [id, option] of Object.entries(
       helper.options.colorOptions || {}
-    ).reduce((acc, entry) => {
-      acc[entry[0]] = entry[1].hex;
-      return acc;
-    }, {});
+    )) {
+      if ("shades" in option) {
+        colorOptions[id] = option.shades[option.mainShade];
+        for (const [shadeId, hex] of Object.entries(option.shades)) {
+          colorOptions[`${id}.${shadeId}`] = hex;
+        }
+      } else {
+        colorOptions[id] = option.hex;
+      }
+    }
     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.
+      // @ts-expect-error generic type vs runtime derived type.
       colorOptions
     };
     const theme = new ThemeData(helper);
@@ -4437,9 +4671,31 @@ const module$1 = defineNuxtModule({
     const moduleDir = import.meta.url;
     const resolver = createResolver(moduleDir);
     nuxt.options.build.transpile.push(resolver.resolve("runtime"));
-    nuxt.options.vite.optimizeDeps ??= {};
-    nuxt.options.vite.optimizeDeps.include ??= [];
-    nuxt.options.vite.optimizeDeps.include.push("papaparse", "pofile");
+    helper.addPackageDependency(
+      "@floating-ui/dom",
+      "@tiptap/core",
+      "@tiptap/extension-emoji",
+      "@tiptap/extension-mention",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-task-list",
+      "@tiptap/starter-kit",
+      "@tiptap/vue-3",
+      "@vue/devtools-core",
+      "@vue/devtools-kit",
+      "axe-core",
+      // CJS
+      "fzf",
+      "get-video-id",
+      "html-diff-ts",
+      "mitt",
+      "papaparse",
+      // CJS
+      "pofile",
+      // CJS
+      "qrcode.vue",
+      "twgl.js"
+    );
+    helper.applyBuildConfig();
     helper.addComponent("BlokkliField");
     helper.addComponent("BlokkliEditable");
     helper.addComponent("BlokkliProvider");
@@ -4450,6 +4706,7 @@ const module$1 = defineNuxtModule({
     helper.addComposable("defineBlokkliProvider");
     helper.addComposable("useBlokkli");
     helper.addComposable("useBlokkliHelper");
+    helper.addComposable("useBlokkliRuntimeConfig");
     helper.addAlias(
       "#blokkli/analyzer",
       resolver.resolve("runtime/editor/features/analyze/analyzers")

package/dist/modules/agent/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.D28NbXr3.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BDyiQvbV.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';