@blokkli/editor 2.0.0-alpha.47 → 2.0.0-alpha.49

package/dist/chunks/tailwindConfig.mjs

@@ -0,0 +1,222 @@
+import plugin from 'tailwindcss/plugin';
+
+const z = (index, key) => {
+  return `calc(var(--bk-z-index-base) + ${index}) /* "${key}" */`;
+};
+const zIndexKeys = [
+  "main-layout",
+  "canvas-overlay",
+  "animation-canvas",
+  "selection",
+  "analyze-tooltip",
+  "interaction-overlay",
+  "comments-overlay",
+  "comments-overlay-active",
+  "artboard-scrollbar",
+  "artboard-overview",
+  "translations-banner-mobile",
+  "editable-field",
+  "translations-banner-desktop",
+  "actions",
+  "sidebar",
+  "sidebar-tabs",
+  "toolbar",
+  "selection-add",
+  "add-buttons-label",
+  "add-list",
+  "add-list-info",
+  "tour-popup",
+  "preview",
+  "toolbar-dropdown",
+  "drop-targets",
+  "dragging-overlay",
+  "touch-action-bar",
+  "tour-overlay",
+  "tour-item",
+  "context-menu",
+  "search",
+  "resizable",
+  "transform-overlay",
+  "overlay",
+  "sidebar-detached",
+  "form-overlay",
+  "form-overlay-header",
+  "dialog",
+  "messages",
+  "menu",
+  "command-palette",
+  "library-edit-dialog",
+  "nested-editor-overlay-bg",
+  "nested-editor-overlay-iframe",
+  "init-overlay"
+];
+const zIndexCssVars = ["sidebar-detached"];
+const zIndex = zIndexKeys.reduce((acc, key, index) => {
+  acc[key] = z(index * 1e4, key);
+  return acc;
+}, {});
+const tailwindConfig = {
+  content: [],
+  corePlugins: {
+    preflight: false,
+    container: false
+  },
+  theme: {
+    fontFamily: {
+      sans: ["PB Inter, sans-serif"],
+      mono: ["monospace"]
+    },
+    colors: {
+      accent: {
+        50: "rgb(var(--bk-theme-accent-50) / <alpha-value>)",
+        100: "rgb(var(--bk-theme-accent-100) / <alpha-value>)",
+        200: "rgb(var(--bk-theme-accent-200) / <alpha-value>)",
+        300: "rgb(var(--bk-theme-accent-300) / <alpha-value>)",
+        400: "rgb(var(--bk-theme-accent-400) / <alpha-value>)",
+        500: "rgb(var(--bk-theme-accent-500) / <alpha-value>)",
+        600: "rgb(var(--bk-theme-accent-600) / <alpha-value>)",
+        700: "rgb(var(--bk-theme-accent-700) / <alpha-value>)",
+        800: "rgb(var(--bk-theme-accent-800) / <alpha-value>)",
+        900: "rgb(var(--bk-theme-accent-900) / <alpha-value>)",
+        950: "rgb(var(--bk-theme-accent-950) / <alpha-value>)"
+      },
+      mono: {
+        50: "rgb(var(--bk-theme-mono-50) / <alpha-value>)",
+        100: "rgb(var(--bk-theme-mono-100) / <alpha-value>)",
+        200: "rgb(var(--bk-theme-mono-200) / <alpha-value>)",
+        300: "rgb(var(--bk-theme-mono-300) / <alpha-value>)",
+        400: "rgb(var(--bk-theme-mono-400) / <alpha-value>)",
+        500: "rgb(var(--bk-theme-mono-500) / <alpha-value>)",
+        600: "rgb(var(--bk-theme-mono-600) / <alpha-value>)",
+        700: "rgb(var(--bk-theme-mono-700) / <alpha-value>)",
+        800: "rgb(var(--bk-theme-mono-800) / <alpha-value>)",
+        900: "rgb(var(--bk-theme-mono-900) / <alpha-value>)",
+        950: "rgb(var(--bk-theme-mono-950) / <alpha-value>)"
+      },
+      teal: {
+        light: "rgb(var(--bk-theme-teal-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-teal-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-teal-dark) / <alpha-value>)"
+      },
+      yellow: {
+        light: "rgb(var(--bk-theme-yellow-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-yellow-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-yellow-dark) / <alpha-value>)"
+      },
+      red: {
+        light: "rgb(var(--bk-theme-red-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-red-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-red-dark) / <alpha-value>)"
+      },
+      lime: {
+        light: "rgb(var(--bk-theme-lime-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-lime-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-lime-dark) / <alpha-value>)"
+      },
+      orange: {
+        light: "rgb(var(--bk-theme-orange-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-orange-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-orange-dark) / <alpha-value>)"
+      },
+      scheme: {
+        light: "rgb(var(--bk-scheme-light, var(--bk-theme-accent-100)) / <alpha-value>)",
+        normal: "rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / <alpha-value>)",
+        dark: "rgb(var(--bk-scheme-dark, var(--bk-theme-accent-800)) / <alpha-value>)",
+        text: "rgb(var(--bk-scheme-text, var(--bk-scheme-dark)) / <alpha-value>)"
+      },
+      white: "white",
+      black: "black",
+      transparent: "transparent",
+      current: "currentColor"
+    },
+    extend: {
+      screens: {
+        "3xl": "1920px"
+      },
+      transitionTimingFunction: {
+        swing: "cubic-bezier(0.56, 0.04, 0.25, 1)"
+      },
+      zIndex: {
+        ...zIndex
+      },
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        "md-even": "0 0px 10px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+        inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+        none: "none",
+        "lg-inverted": "0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        "xl-inverted": "0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "xl-left": "-20px 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "xl-even": "0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+      }
+    },
+    spacing: {
+      770: "770px",
+      340: "340px",
+      300: "300px",
+      200: "200px",
+      120: "120px",
+      100: "100px",
+      90: "90px",
+      80: "80px",
+      70: "70px",
+      60: "60px",
+      50: "50px",
+      40: "40px",
+      30: "30px",
+      25: "25px",
+      24: "24px",
+      20: "20px",
+      18: "18px",
+      15: "15px",
+      10: "10px",
+      8: "8px",
+      5: "5px",
+      3: "3px",
+      2: "2px",
+      1: "1px",
+      0: "0px",
+      "offset-t": "var(--bk-root-offset-top)",
+      "offset-r": "var(--bk-root-offset-right)",
+      "offset-b": "var(--bk-root-offset-bottom)",
+      scrollbar: "var(--bk-artboard-scrollbar-size)",
+      "sidebar-right": "var(--bk-sidebar-width-right)",
+      "toolbar-left": "var(--bk-toolbar-left-width)"
+    },
+    borderWidth: {
+      DEFAULT: "1px",
+      0: "0",
+      2: "2px",
+      3: "3px",
+      4: "4px"
+    }
+  },
+  plugins: [
+    plugin(function({ addVariant, addBase }) {
+      addVariant(
+        "mobile-only",
+        "@media screen and (max-width: theme('screens.sm'))"
+      );
+      const cssVars = zIndexCssVars.reduce(
+        (acc, key) => {
+          const index = zIndexKeys.indexOf(key);
+          if (index !== -1) {
+            acc[`--bk-z-index-${key}`] = `calc(var(--bk-z-index-base) + ${index * 1e4})`;
+          }
+          return acc;
+        },
+        {}
+      );
+      addBase({
+        ":root": cssVars
+      });
+    })
+  ]
+};
+
+export { tailwindConfig as default };

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

@@ -2,7 +2,7 @@ import type { BlockOptionDefinitionBase } from './blockOptions';
 export type BlockDefinitionOptionsInputBase = {
     [key: string]: BlockOptionDefinitionBase;
 };
-export type BlokkliDefinitionAddBehaviour = 'no-form' | 'form' | `editable:${string}`;
+export type BlokkliDefinitionAddBehaviour = 'no-form' | 'form' | `editable:${string}` | `complex-option:${string}`;
 export type BlockDefinitionRenderForParentBase<BundleWithNested extends string = string> = {
     parentBundle: BundleWithNested;
 };

package/dist/module.d.mts

@@ -1,6 +1,6 @@
 import { NuxtModule } from 'nuxt/schema';
-import { M as ModuleOptions } from './shared/editor.BVregnEC.mjs';
-export { a as ModuleHooks } from './shared/editor.BVregnEC.mjs';
+import { M as ModuleOptions } from './shared/editor.DsGJIlGn.mjs';
+export { a as ModuleHooks } from './shared/editor.DsGJIlGn.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.47",
+  "version": "2.0.0-alpha.49",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -1,11 +1,11 @@
-import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, useLogger, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
+import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, useLogger, defineNuxtModule, addPlugin, addBuildPlugin, updateTemplates } from '@nuxt/kit';
+import path__default, { basename, dirname as dirname$1, resolve as resolve$1, join } from 'node:path';
 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 { 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.9vf8ZnOp.mjs';
-import path__default, { basename, dirname as dirname$1 } from 'node:path';
 import { dirname, resolve, relative } from 'pathe';
 import micromatch from 'micromatch';
 import { hash } from 'ohash';
@@ -18,7 +18,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.47";
+const version = "2.0.0-alpha.49";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -809,16 +809,32 @@ const BlokkliEditingPlugin = (nuxt) => {
         }
       },
       vite: {
-        handleHotUpdate({ file, server }) {
-          if (file.endsWith(".vue") && !file.includes(EDITING_MARKER)) {
+        hotUpdate: {
+          order: "post",
+          async handler({ file, modules, server }) {
+            if (!file.endsWith(".vue") || file.includes(EDITING_MARKER)) {
+              return;
+            }
             const editingVariantPath = file.replace(
               /\.vue$/,
               `${EDITING_MARKER}.vue`
             );
-            const editingModule = server.moduleGraph.getModuleById(editingVariantPath);
-            if (editingModule) {
-              server.reloadModule(editingModule);
+            const environment = server.environments["client"];
+            if (!environment) {
+              return;
+            }
+            const editingModules = environment.moduleGraph.getModulesByFile(editingVariantPath);
+            if (!editingModules || editingModules.size === 0) {
+              return;
+            }
+            const mainModule = [...editingModules].find(
+              (m) => !m.url.includes("?")
+            );
+            if (mainModule) {
+              environment.moduleGraph.invalidateModule(mainModule);
+              await environment.transformRequest(mainModule.url);
             }
+            return [...modules, ...editingModules];
           }
         }
       }
@@ -1126,6 +1142,25 @@ class ModuleHelper {
       path + "/*"
     ];
   }
+  /**
+   * Add a directory to the app TypeScript tsconfig includes.
+   */
+  addAppTsInclude(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);
+  }
+  /**
+   * Add a directory to the server/Nitro TypeScript tsconfig includes.
+   */
+  addServerTsInclude(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 ||= [];
+    this.nuxt.options.nitro.typescript.tsConfig.include.push(rel);
+  }
   /**
    * Add a path to Nitro's externals.inline for server-side usage.
    * @see https://github.com/nuxt/nuxt/issues/28995
@@ -1175,7 +1210,21 @@ class ModuleContext {
   adapterExtensions = [];
   featureFragments = /* @__PURE__ */ new Set();
   complexOptionTypes = /* @__PURE__ */ new Map();
+  cssFiles = [];
+  additionalIcons = [];
   collectors = [];
+  addCSS(filePath) {
+    this.cssFiles.push(filePath);
+  }
+  getCSSFiles() {
+    return this.cssFiles;
+  }
+  addIcon(...names) {
+    this.additionalIcons.push(...names);
+  }
+  getAdditionalIcons() {
+    return this.additionalIcons;
+  }
   addFeatureFragment(name) {
     if (this.featureFragments.has(name)) {
       throw new Error(`A feature fragment with name "${name}" already exists.`);
@@ -1551,7 +1600,8 @@ const icons = defineCodeTemplate(
       ...blockIcons,
       ...featureIcons,
       ...USED_MATERIAL_ICONS,
-      ...globalOptionsIcons
+      ...globalOptionsIcons,
+      ...ctx.getAdditionalIcons()
     ].filter(falsy).filter(onlyUnique);
     for (const file of files) {
       const name = basename(file.filePath, ".svg").toLowerCase();
@@ -1781,16 +1831,94 @@ export default adapterExtensions
   }
 );
 
-const styles = defineFileTemplate("styles.css", (ctx) => {
-  const cssFilePath = ctx.helper.resolvers.module.resolve(
-    "./runtime/editor/css/output.css"
-  );
-  return `
+let processor = null;
+async function processCSS(css, from) {
+  if (!processor) {
+    processor = await createProcessor();
+  }
+  const result = await processor.process(css, { from: from || "module.css" });
+  return result.css;
+}
+function resetProcessor() {
+  processor = null;
+}
+async function createProcessor() {
+  const _require = createRequire(import.meta.url);
+  try {
+    const postcss = _require("postcss");
+    const { default: tailwindConfig } = await import('./chunks/tailwindConfig.mjs');
+    const plugins = [
+      _require("postcss-import"),
+      _require("tailwindcss/nesting"),
+      _require("tailwindcss")({
+        ...tailwindConfig,
+        // Empty content prevents Tailwind from scanning the project.
+        // @apply directives are resolved regardless of content scanning.
+        content: [{ raw: " ", extension: "html" }]
+      }),
+      // Same scoping rules as postcss.config.cjs: scope selectors to .bk
+      // and rename Tailwind CSS variables from --tw-* to --bk-tw-*.
+      _require("postcss-replace")({
+        pattern: /(--tw|\*, ::before, ::after)/g,
+        data: {
+          "--tw": "--bk-tw",
+          "*, ::before, ::after": ".bk, .bk *, .bk-sidebar, .bk ::before, .bk ::after, .bk-vars, .bk-vars ::before, .bk-vars ::after",
+          "::backdrop": ".bk::backdrop, .bk ::backdrop"
+        }
+      }),
+      _require("@thedutchcoder/postcss-rem-to-px")({ baseValue: 16 })
+    ];
+    return postcss(plugins);
+  } catch (e) {
+    if (e.code === "MODULE_NOT_FOUND") {
+      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`
+      );
+    }
+    throw e;
+  }
+}
+
+const logger$1 = useLogger("@blokkli/editor");
+const styles = defineFileTemplate(
+  "styles.css",
+  async (ctx) => {
+    const cssFilePath = ctx.helper.resolvers.module.resolve(
+      "./runtime/editor/css/output.css"
+    );
+    let moduleCSS = "";
+    const cssFiles = ctx.getCSSFiles();
+    if (cssFiles.length > 0) {
+      resetProcessor();
+      const processed = [];
+      for (const filePath of cssFiles) {
+        const content = await ctx.helper.fileCache.read(filePath);
+        try {
+          const result = await processCSS(content, filePath);
+          processed.push(result);
+        } catch (e) {
+          logger$1.error(
+            `Failed to process module CSS "${filePath}":
+${e.message}`
+          );
+        }
+      }
+      if (processed.length > 0) {
+        moduleCSS = "\n/* Module CSS */\n" + processed.join("\n");
+      }
+    }
+    return `
 @import url("${cssFilePath}");
 
 ${ctx.theme.css}
+${moduleCSS}
 `;
-});
+  },
+  { dependencies: ["module-css"] }
+);
 
 function mapVars(ctx) {
   return {
@@ -3570,6 +3698,7 @@ const complexOptionTypes = defineCodeTemplate(
     editorComponent: defineAsyncComponent(() => import('${ctx.helper.toModuleBuildRelative(t.editorComponentPath)}')),
     editorButtonLabel: '${t.editorButtonLabel}',
     editorIcon: '${t.editorIcon}',
+    editorTitle: '${t.editorTitle || t.editorButtonLabel}',
   }`
     ).join(",\n");
     return `import { defineAsyncComponent } from 'vue'
@@ -3590,15 +3719,17 @@ export const COMPLEX_OPTION_TYPES: Record<string, never>`;
     const entries = types.map((t) => `  '${t.id}': ${t.typeName}`).join("\n");
     return `${imports}
 import type { BlokkliIcon } from './icons'
+import type { Component } from 'vue'
 
 export interface ComplexOptionTypeMap {
 ${entries}
 }
 
 export const COMPLEX_OPTION_TYPES: Record<string, {
-  editorComponent: import('vue').Component
+  editorComponent: Component
   editorButtonLabel: string
   editorIcon: BlokkliIcon
+  editorTitle: string
 }>`;
   },
   {
@@ -3922,6 +4053,9 @@ const module$1 = defineNuxtModule({
       "#blokkli/runtime-helpers",
       resolver.resolve("runtime/helpers/runtimeHelpers")
     );
+    const blokkliModulesDir = resolve$1(nuxt.options.rootDir, "blokkli/modules");
+    helper.addAppTsInclude(join(blokkliModulesDir, "*/app"));
+    helper.addServerTsInclude(join(blokkliModulesDir, "*/server"));
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push({
@@ -3942,6 +4076,9 @@ const module$1 = defineNuxtModule({
     );
     addBuildPlugin(BlokkliEditingPlugin(nuxt));
     if (nuxt.options.dev) {
+      for (const cssFile of context.getCSSFiles()) {
+        nuxt.options.watch.push(dirname$1(cssFile));
+      }
       nuxt.hook("builder:watch", async (event, providedFilePath) => {
         const filePath = providedFilePath.startsWith("/") ? providedFilePath : helper.resolvers.src.resolve(providedFilePath);
         helper.fileCache.handleWatchEvent(event, filePath);
@@ -3953,8 +4090,19 @@ const module$1 = defineNuxtModule({
             dependenciesToUpdate.push(...collector.getDependencyTypes());
           }
         }
+        const cssFiles = context.getCSSFiles();
+        if (cssFiles.length > 0) {
+          const cssFileDirs = cssFiles.map((f) => dirname$1(f));
+          const isModuleCSSRelated = cssFiles.some(
+            (cssFile, i) => filePath === cssFile || filePath.startsWith(cssFileDirs[i] + "/")
+          );
+          if (isModuleCSSRelated) {
+            dependenciesToUpdate.push("module-css");
+          }
+        }
         if (dependenciesToUpdate.length) {
           await context.generateTemplates(dependenciesToUpdate);
+          await updateTemplates();
         }
       });
     }

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

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

package/dist/modules/agent/index.mjs

@@ -1,7 +1,7 @@
 import { resolveFiles, createResolver, addServerHandler } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import * as path from 'node:path';
-import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
+import { defineBlokkliModule } from '../index.mjs';
 import * as fs from 'node:fs';
 import { C as Collector, a as CollectedFile, e as extractStringProperty } from '../../shared/editor.9vf8ZnOp.mjs';
 import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
@@ -651,22 +651,10 @@ export default defineNuxtConfig({
       ]
     });
     ctx.context.addCollector(promptsCollector);
-    const relativeToolsDir = path.relative(
-      nuxt.options.buildDir,
-      projectToolsDir
-    );
-    nuxt.options.typescript.tsConfig ||= {};
-    nuxt.options.typescript.tsConfig.include ||= [];
-    nuxt.options.typescript.tsConfig.include.push(relativeToolsDir);
-    const relativePromptsDir = path.relative(
-      nuxt.options.buildDir,
-      projectPromptsDir
-    );
-    nuxt.options.typescript.tsConfig.include.push(relativePromptsDir);
+    ctx.helper.addAppTsInclude(projectToolsDir);
+    ctx.helper.addAppTsInclude(projectPromptsDir);
     for (const dir of moduleBlokkliDirs) {
-      const toolsDir = path.join(dir, "tools");
-      const relDir = path.relative(nuxt.options.buildDir, toolsDir);
-      nuxt.options.typescript.tsConfig.include.push(relDir);
+      ctx.helper.addAppTsInclude(path.join(dir, "tools"));
     }
     const moduleSkillsDir = moduleResolver.resolve(
       "./runtime/server/default-skills"
@@ -746,20 +734,9 @@ export default defineNuxtConfig({
       route: routes.routing,
       handler: moduleResolver.resolve("./runtime/server/route")
     });
-    const relativeSkillsDir = path.relative(
-      nuxt.options.buildDir,
-      projectSkillsDir
-    );
-    const relativeSystemPromptsDir = path.relative(
-      nuxt.options.buildDir,
-      projectSystemPromptsDir
-    );
+    ctx.helper.addServerTsInclude(projectSkillsDir);
+    ctx.helper.addServerTsInclude(projectSystemPromptsDir);
     nuxt.hook("nitro:config", (nitroConfig) => {
-      nitroConfig.typescript ||= {};
-      nitroConfig.typescript.tsConfig ||= {};
-      nitroConfig.typescript.tsConfig.include ||= [];
-      nitroConfig.typescript.tsConfig.include.push(relativeSkillsDir);
-      nitroConfig.typescript.tsConfig.include.push(relativeSystemPromptsDir);
       nitroConfig.rollupConfig ||= {};
       nitroConfig.rollupConfig.plugins ||= [];
       nitroConfig.rollupConfig.plugins.push(

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

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

package/dist/modules/charts/index.mjs

@@ -1,5 +1,5 @@
 import { createResolver } from '@nuxt/kit';
-import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
+import { defineBlokkliModule } from '../index.mjs';
 import { fileURLToPath } from 'node:url';
 import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
 
@@ -34,7 +34,6 @@ const index = defineBlokkliModule({
     options.blokkliDirs.push(resolve("./runtime/blokkli"));
   },
   setup({ context, helper, $t }, options) {
-    context.features.addFile(resolve("./runtime/features/charts/index.vue"));
     context.addTemplate(chartsConfigTemplate(options));
     helper.addAlias("#blokkli/charts/types", resolve("./runtime/types"));
     helper.addAlias(
@@ -49,7 +48,8 @@ const index = defineBlokkliModule({
         "./runtime/features/charts/Editor/index.vue"
       ),
       editorButtonLabel: $t("chartsEditButton", "Edit chart..."),
-      editorIcon: "bk_mdi_area_chart"
+      editorIcon: "bk_mdi_area_chart",
+      editorTitle: $t("chartsEditorTitle", "Edit chart")
     });
   }
 });

package/dist/modules/charts/runtime/features/charts/Editor/index.d.vue.ts

@@ -1,5 +1,6 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
+    data: BlokkliChartData | null;
     uuid: string;
     optionKey: string;
 };