@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

package/dist/chunks/tailwindConfig.mjs

@@ -34,11 +34,11 @@ const zIndexKeys = [
   "tour-overlay",
   "tour-item",
   "context-menu",
-  "search",
   "resizable",
   "transform-overlay",
-  "overlay",
   "sidebar-detached",
+  "search",
+  "overlay",
   "form-overlay",
   "form-overlay-header",
   "dialog",
@@ -56,7 +56,7 @@ const zIndex = zIndexKeys.reduce((acc, key, index) => {
   return acc;
 }, {});
 const tailwindConfig = {
-  content: [],
+  content: ["./src/runtime/**/*.vue", "./src/modules/*/runtime/**/*.vue"],
   corePlugins: {
     preflight: false,
     container: false

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

@@ -235,6 +235,10 @@ type DefinitionOptionRadiosGridOption = {
      * The label displayed for this option.
      */
     label: string;
+    /**
+     * Optional description providing additional context for this option.
+     */
+    description?: string;
 };
 type DefinitionOptionRadiosGrid = {
     /**
@@ -265,6 +269,10 @@ type DefinitionOptionRadiosColorsOption = {
      * The label displayed for this option.
      */
     label: string;
+    /**
+     * Optional description providing additional context for this option.
+     */
+    description?: string;
 };
 type DefinitionOptionRadiosColors = {
     /**
@@ -288,9 +296,13 @@ type DefinitionOptionRadiosRadios = {
     /**
      * Available options.
      *
-     * Key is the option value, value is the display label.
+     * Key is the option value, value is the display label or an object with
+     * label and optional description.
      */
-    options: Record<string, string>;
+    options: Record<string, string | {
+        label: string;
+        description?: string;
+    }>;
 };
 type DefinitionOptionRadiosIconsOptionBase<Icon extends string = string> = {
     /**
@@ -303,6 +315,10 @@ type DefinitionOptionRadiosIconsOptionBase<Icon extends string = string> = {
      * The label displayed for this option.
      */
     label: string;
+    /**
+     * Optional description providing additional context for this option.
+     */
+    description?: string;
 };
 type DefinitionOptionRadiosIconsBase<Icon extends string = string> = {
     /**

package/dist/module.d.mts

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, useLogger, defineNuxtModule, addPlugin, addBuildPlugin, updateTemplates } from '@nuxt/kit';
+import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, useLogger, defineNuxtModule, addPlugin, addBuildPlugin, addVitePlugin, 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';
@@ -14,11 +14,12 @@ import { LANGUAGES, BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from './global/co
 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 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.51";
+const version = "2.0.0-alpha.53";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1211,6 +1212,7 @@ class ModuleContext {
   featureFragments = /* @__PURE__ */ new Set();
   complexOptionTypes = /* @__PURE__ */ new Map();
   cssFiles = [];
+  contentPaths = [];
   additionalIcons = [];
   collectors = [];
   addCSS(filePath) {
@@ -1219,6 +1221,21 @@ class ModuleContext {
   getCSSFiles() {
     return this.cssFiles;
   }
+  /**
+   * Register a directory containing Vue files that should participate in
+   * blökkli's CSS build pipeline. Files in these directories will:
+   * - Have their Tailwind utility classes generated and included in the output
+   * - Have their template class names mangled (_bk_ prefix) at build time
+   * - Have their <style> blocks processed through blökkli's PostCSS pipeline
+   *
+   * @param dirPath - Absolute path to a directory containing Vue components
+   */
+  addContentPath(dirPath) {
+    this.contentPaths.push(dirPath);
+  }
+  getContentPaths() {
+    return this.contentPaths;
+  }
   addIcon(...names) {
     this.additionalIcons.push(...names);
   }
@@ -1480,6 +1497,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_check",
   "bk_mdi_check_box",
   "bk_mdi_check_box_outline_blank",
+  "bk_mdi_check_circle",
   "bk_mdi_chevron_backward",
   "bk_mdi_chevron_forward",
   "bk_mdi_chevron_left",
@@ -1494,6 +1512,7 @@ const USED_MATERIAL_ICONS = [
   "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_drag_pan",
@@ -1502,7 +1521,11 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_exit_to_app",
   "bk_mdi_expand_all",
   "bk_mdi_extension",
+  "bk_mdi_feature_search",
+  "bk_mdi_fit_screen",
   "bk_mdi_forum",
+  "bk_mdi_fullscreen",
+  "bk_mdi_fullscreen_exit",
   "bk_mdi_function",
   "bk_mdi_grid_view",
   "bk_mdi_grid_view-fill",
@@ -1514,6 +1537,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_info-fill",
   "bk_mdi_ink_selection",
   "bk_mdi_inventory",
+  "bk_mdi_join",
   "bk_mdi_keyboard_arrow_down",
   "bk_mdi_keyboard_command_key",
   "bk_mdi_lists",
@@ -1528,6 +1552,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_person",
   "bk_mdi_person-fill",
   "bk_mdi_pie_chart",
+  "bk_mdi_play_circle",
   "bk_mdi_priority_high",
   "bk_mdi_publish",
   "bk_mdi_qr_code",
@@ -1558,6 +1583,9 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_text_compare",
   "bk_mdi_text_select_end",
   "bk_mdi_texture",
+  "bk_mdi_thumb_down",
+  "bk_mdi_thumb_up",
+  "bk_mdi_thumbs_up_double",
   "bk_mdi_title",
   "bk_mdi_track_changes",
   "bk_mdi_trackpad_input",
@@ -1567,10 +1595,10 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_upload",
   "bk_mdi_video_camera_back",
   "bk_mdi_visibility",
-  "bk_mdi_visibility-fill",
   "bk_mdi_visibility_off",
   "bk_mdi_warning",
   "bk_mdi_web_traffic",
+  "bk_mdi_workspaces",
   "bk_mdi_zoom_in"
 ];
 
@@ -1832,31 +1860,70 @@ export default adapterExtensions
   }
 );
 
-let processor = null;
-async function processCSS(css, from) {
-  if (!processor) {
-    processor = await createProcessor();
+const processors = /* @__PURE__ */ new Map();
+function postcssMangleClasses(selectorParser) {
+  const plugin = () => ({
+    postcssPlugin: "postcss-mangle-blokkli-classes",
+    OnceExit(root) {
+      root.walkRules((rule) => {
+        if (rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes") {
+          return;
+        }
+        rule.selector = selectorParser((selectors) => {
+          selectors.each((selector) => {
+            let hasMangled = false;
+            let hasBk = false;
+            selector.walkClasses((classNode) => {
+              if (classNode.value === "bk") {
+                hasBk = true;
+                return;
+              }
+              if (classNode.value.startsWith("bk-")) return;
+              classNode.value = "_bk_" + classNode.value;
+              hasMangled = true;
+            });
+            if (hasMangled && !hasBk) {
+              const descendant = selector.clone();
+              descendant.prepend(selectorParser.combinator({ value: " " }));
+              descendant.prepend(selectorParser.className({ value: "bk" }));
+              const compound = selector.clone();
+              compound.prepend(selectorParser.className({ value: "bk" }));
+              selector.replaceWith(descendant, compound);
+            }
+          });
+        }).processSync(rule.selector);
+      });
+    }
+  });
+  plugin.postcss = true;
+  return plugin;
+}
+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" });
   return result.css;
 }
 function resetProcessor() {
-  processor = null;
+  processors.clear();
 }
-async function createProcessor() {
+async function createProcessor(contentPaths) {
   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 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" }]
+        content
       }),
+      postcssMangleClasses(_require("postcss-selector-parser")),
       // Same scoping rules as postcss.config.cjs: scope selectors to .bk
       // and rename Tailwind CSS variables from --tw-* to --bk-tw-*.
       _require("postcss-replace")({
@@ -1911,6 +1978,24 @@ ${e.message}`
         moduleCSS = "\n/* Module CSS */\n" + processed.join("\n");
       }
     }
+    const contentPaths = ctx.getContentPaths();
+    if (contentPaths.length > 0) {
+      try {
+        const utilities = await processCSS(
+          "@tailwind utilities;",
+          "module-utilities.css",
+          contentPaths
+        );
+        if (utilities.trim()) {
+          moduleCSS += "\n/* Module Utilities */\n" + utilities;
+        }
+      } catch (e) {
+        logger$1.error(
+          `Failed to generate utilities for module content paths:
+${e.message}`
+        );
+      }
+    }
     return `
 @import url("${cssFilePath}");
 
@@ -3697,9 +3782,8 @@ const complexOptionTypes = defineCodeTemplate(
     const entries = types.map(
       (t) => `  '${t.id}': {
     editorComponent: defineAsyncComponent(() => import('${ctx.helper.toModuleBuildRelative(t.editorComponentPath)}')),
-    editorButtonLabel: '${t.editorButtonLabel}',
+    editTitle: ${JSON.stringify(t.editTitle)},
     editorIcon: '${t.editorIcon}',
-    editorTitle: '${t.editorTitle || t.editorButtonLabel}',
   }`
     ).join(",\n");
     return `import { defineAsyncComponent } from 'vue'
@@ -3728,9 +3812,8 @@ ${entries}
 
 export const COMPLEX_OPTION_TYPES: Record<string, {
   editorComponent: Component
-  editorButtonLabel: string
+  editTitle: { key: string; defaultTranslation: string }
   editorIcon: BlokkliIcon
-  editorTitle: string
 }>`;
   },
   {
@@ -3938,6 +4021,136 @@ 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: {
@@ -4000,7 +4213,10 @@ const module$1 = defineNuxtModule({
     const app = {
       helper,
       context,
-      $t: (key, _defaultText) => key
+      $t: (key, defaultText) => ({
+        key,
+        defaultTranslation: defaultText
+      })
     };
     for (const module of blokkliModules) {
       await module.init.setup(app, module.options);
@@ -4031,6 +4247,9 @@ 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.addComponent("BlokkliField");
     helper.addComponent("BlokkliEditable");
     helper.addComponent("BlokkliProvider");
@@ -4066,7 +4285,7 @@ const module$1 = defineNuxtModule({
       });
     });
     addPlugin({
-      src: resolver.resolve("runtime/plugins/blokkliDirectives")
+      src: resolver.resolve("./runtime/plugins/blokkliDirectives")
     });
     addBuildPlugin(RuntimeDefinitionPlugin(nuxt, helper, "defineBlokkli"));
     addBuildPlugin(
@@ -4076,6 +4295,50 @@ const module$1 = defineNuxtModule({
       RuntimeDefinitionPlugin(nuxt, helper, "defineBlokkliProvider", 1)
     );
     addBuildPlugin(BlokkliEditingPlugin(nuxt));
+    const contentPaths = context.getContentPaths();
+    if (contentPaths.length > 0) {
+      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);
+          return result ? { code: result, map: null } : null;
+        },
+        hotUpdate: {
+          order: "post",
+          async handler({ file, server, modules: hmrModules }) {
+            if (!file.endsWith(".vue")) return;
+            if (!contentPaths.some((dir) => file.startsWith(dir))) return;
+            const environment = server.environments["client"];
+            if (!environment) return;
+            const modules = environment.moduleGraph.getModulesByFile(file);
+            if (!modules || modules.size === 0) return;
+            const mainModule = [...modules].find((m) => !m.url.includes("?"));
+            if (mainModule) {
+              environment.moduleGraph.invalidateModule(mainModule);
+              await environment.transformRequest(mainModule.url);
+            }
+            const styleModules = [...modules].filter(
+              (m) => m.url.includes("type=style")
+            );
+            if (styleModules.length) {
+              for (const styleMod of styleModules) {
+                environment.moduleGraph.invalidateModule(styleMod);
+              }
+              const result = [...hmrModules];
+              for (const styleMod of styleModules) {
+                if (!result.some((m) => m.url === styleMod.url)) {
+                  result.push(styleMod);
+                }
+              }
+              return result;
+            }
+          }
+        }
+      });
+    }
     if (nuxt.options.dev) {
       for (const cssFile of context.getCSSFiles()) {
         nuxt.options.watch.push(dirname$1(cssFile));

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

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

package/dist/modules/agent/runtime/app/composables/agentProvider.d.ts

@@ -56,6 +56,7 @@ export type AgentProvider = {
     switchConversation: (id: string) => void;
     deleteConversation: (id: string) => void;
     refreshConversationList: () => Promise<void>;
+    feedbackItemIds: Ref<Set<string>>;
     pageContext: Ref<PageContext | null>;
 };
 export default function (app: BlokkliApp, adapter: FullBlokkliAdapter<any>, agentName: string): AgentProvider;

package/dist/modules/agent/runtime/app/composables/agentProvider.js

@@ -46,6 +46,7 @@ export default function(app, adapter, agentName) {
   const activeConversationId = ref(null);
   const conversationList = ref([]);
   const showConversationList = ref(false);
+  const feedbackItemIds = ref(/* @__PURE__ */ new Set());
   const toolDetails = reactive(/* @__PURE__ */ new Map());
   async function saveCurrentConversation(serverState) {
     if (!adapter.agentConversations) return;
@@ -102,6 +103,7 @@ export default function(app, adapter, agentName) {
       return {
         conversation: clientConversation,
         usageTurns: parsed.usageTurns ?? [],
+        feedbackItemIds: data.feedbackItemIds ?? [],
         serverState: {
           messages: serverParsed.messages,
           activatedLazyTools: serverParsed.activatedLazyTools,
@@ -147,6 +149,7 @@ export default function(app, adapter, agentName) {
     if (!loaded) return;
     conversation.value = loaded.conversation;
     usageTurns.value = loaded.usageTurns;
+    feedbackItemIds.value = new Set(loaded.feedbackItemIds);
     activeItem.value = null;
     activeConversationId.value = id;
     send({ type: "restore_conversation", state: loaded.serverState });
@@ -331,6 +334,7 @@ export default function(app, adapter, agentName) {
             activeConversationId.value = latest.uuid;
             conversation.value = parsed.conversation;
             usageTurns.value = parsed.usageTurns;
+            feedbackItemIds.value = new Set(parsed.feedbackItemIds);
             send({ type: "restore_conversation", state: parsed.serverState });
           }
         }
@@ -976,6 +980,7 @@ export default function(app, adapter, agentName) {
     activeConversationId.value = null;
     plan.value = null;
     usageTurns.value = [];
+    feedbackItemIds.value = /* @__PURE__ */ new Set();
     toolDetails.clear();
     send({ type: "new_conversation" });
   }
@@ -1034,6 +1039,8 @@ export default function(app, adapter, agentName) {
     switchConversation,
     deleteConversation,
     refreshConversationList,
+    // Feedback
+    feedbackItemIds,
     // Page context (built once during connection)
     pageContext: storedPageContext
   };

package/dist/modules/agent/runtime/app/features/agent/Panel/DropHandler/index.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     drop: (attachments: Attachment[]) => any;