@blokkli/editor 2.0.0-alpha.36 → 2.0.0-alpha.38

package/dist/modules/agent/runtime/server/Session.js

@@ -1,3 +1,4 @@
+import { z } from "zod";
 import { buildSystemPrompt, buildSystemPromptEntries } from "./agentPrompt.js";
 import { provider, models } from "#blokkli-build/agent-server";
 import {
@@ -12,7 +13,7 @@ import {
   verifyStateHash,
   validateMessages
 } from "./helpers.js";
-import { buildDefinition } from "./server-tools/index.js";
+import { buildDefinition, stripSchemaOverhead } from "./server-tools/index.js";
 import loadSkillTool from "./server-tools/load_skill/index.js";
 import loadToolsTool from "./server-tools/load_tools/index.js";
 import createPlanTool from "./server-tools/create_plan/index.js";
@@ -28,10 +29,10 @@ export class Session {
   pendingToolCalls = /* @__PURE__ */ new Map();
   abortController = null;
   isProcessing = false;
-  /** Eager tools sent to the LLM on every turn */
-  tools = [];
-  /** Lazy tools held back until activated via load_tools */
-  lazyTools = [];
+  /** Names of eager tools sent to the LLM on every turn */
+  toolNames = [];
+  /** Names of lazy tools held back until activated via load_tools */
+  lazyToolNames = [];
   /** Names of lazy tools that have been activated via load_tools */
   activatedLazyTools = /* @__PURE__ */ new Set();
   /** Names of skills that have been loaded via load_skill */
@@ -46,12 +47,73 @@ export class Session {
   unprunedMessages = [];
   /** Last generic tool definitions for transcript */
   lastTools = [];
+  /** Bundled tool metadata map for server-side resolution */
+  bundledToolMap;
+  /** Cache for resolved JSON Schemas (Zod→JSON Schema is deterministic) */
+  jsonSchemaCache = /* @__PURE__ */ new Map();
+  constructor(toolDefinitions) {
+    this.bundledToolMap = new Map(toolDefinitions.map((t) => [t.name, t]));
+  }
+  /**
+   * Resolve a single tool name into a ClientToolDefinition.
+   * Resolves from bundled metadata. Caches the JSON Schema conversion.
+   */
+  resolveToolDefinition(name) {
+    const bundled = this.bundledToolMap.get(name);
+    if (!bundled) return void 0;
+    let inputSchema = this.jsonSchemaCache.get(name);
+    if (!inputSchema) {
+      inputSchema = stripSchemaOverhead(
+        z.toJSONSchema(bundled.paramsSchema)
+      );
+      this.jsonSchemaCache.set(name, inputSchema);
+    }
+    return {
+      name: bundled.name,
+      description: bundled.description,
+      input_schema: inputSchema,
+      ...bundled.lazy ? { lazy: true } : {},
+      category: bundled.category,
+      ...bundled.volatile ? { volatile: true } : {}
+    };
+  }
+  /**
+   * Resolve multiple tool names into ClientToolDefinition objects.
+   * Skips names that cannot be resolved.
+   */
+  resolveToolDefinitions(names) {
+    const result = [];
+    for (const name of names) {
+      const def = this.resolveToolDefinition(name);
+      if (def) {
+        result.push(def);
+      }
+    }
+    return result;
+  }
+  /**
+   * Look up name + description for a tool.
+   */
+  getToolSummary(name) {
+    const bundled = this.bundledToolMap.get(name);
+    if (!bundled) return void 0;
+    return { name: bundled.name, description: bundled.description };
+  }
   // --------------------------------------------------------------------------
   // Public methods
   // --------------------------------------------------------------------------
-  init(tools, pageContext) {
-    this.tools = tools.filter((t) => !t.lazy);
-    this.lazyTools = tools.filter((t) => !!t.lazy);
+  init(toolNames, pageContext) {
+    this.toolNames = [];
+    this.lazyToolNames = [];
+    for (const name of toolNames) {
+      const bundled = this.bundledToolMap.get(name);
+      const isLazy = bundled?.lazy ?? false;
+      if (isLazy) {
+        this.lazyToolNames.push(name);
+      } else {
+        this.toolNames.push(name);
+      }
+    }
     this.activatedLazyTools = /* @__PURE__ */ new Set();
     this.loadedSkills = /* @__PURE__ */ new Set();
     this.pageContext = pageContext;
@@ -142,8 +204,8 @@ export class Session {
     }
     this.plan = null;
     this.messages = [];
-    this.tools = [];
-    this.lazyTools = [];
+    this.toolNames = [];
+    this.lazyToolNames = [];
     this.activatedLazyTools.clear();
     this.loadedSkills.clear();
     this.pageContext = void 0;
@@ -188,7 +250,7 @@ export class Session {
     this.messages = state.messages;
     this.unprunedMessages = [];
     this.lastTools = [];
-    const validLazyToolNames = new Set(this.lazyTools.map((t) => t.name));
+    const validLazyToolNames = new Set(this.lazyToolNames);
     this.activatedLazyTools = new Set(
       state.activatedLazyTools.filter((name) => validLazyToolNames.has(name))
     );
@@ -240,7 +302,7 @@ export class Session {
     });
   }
   async runAgentLoop(peer, prompt, apiKey, authSecret, selectedUuids) {
-    if (this.tools.length === 0) {
+    if (this.toolNames.length === 0) {
       send(peer, {
         type: "error",
         errorType: "bad_request",
@@ -257,10 +319,9 @@ export class Session {
       return;
     }
     const resolvedSkills = resolveSkills(this.pageContext);
-    const lazyToolSummaries = this.lazyTools.map((t) => ({
-      name: t.name,
-      description: t.description
-    }));
+    const lazyToolSummaries = this.lazyToolNames.map((name) => this.getToolSummary(name)).filter(
+      (s) => s !== void 0
+    );
     const userParts = [];
     if (selectedUuids?.length) {
       userParts.push(
@@ -295,11 +356,16 @@ export class Session {
         let currentToolUse = null;
         let currentTextContent = "";
         let inTextBlock = false;
-        const activatedTools = this.lazyTools.filter(
-          (t) => this.activatedLazyTools.has(t.name)
+        const eagerTools = this.resolveToolDefinitions(this.toolNames);
+        const activatedToolNames = this.lazyToolNames.filter(
+          (name) => this.activatedLazyTools.has(name)
+        );
+        const activatedTools = this.resolveToolDefinitions(activatedToolNames);
+        const unloadedLazyToolNames = this.lazyToolNames.filter(
+          (name) => !this.activatedLazyTools.has(name)
         );
-        const unloadedLazyTools = this.lazyTools.filter(
-          (t) => !this.activatedLazyTools.has(t.name)
+        const unloadedLazyTools = unloadedLazyToolNames.map((name) => this.getToolSummary(name)).filter(
+          (s) => s !== void 0
         );
         const defCtx = {
           resolvedSkills,
@@ -307,7 +373,7 @@ export class Session {
           unloadedLazyTools
         };
         const serverToolDefs = serverTools.map((t) => buildDefinition(t, defCtx)).filter((d) => d !== null);
-        const allTools = [...serverToolDefs, ...this.tools, ...activatedTools];
+        const allTools = [...serverToolDefs, ...eagerTools, ...activatedTools];
         this.lastTools = allTools;
         const systemPrompt = buildSystemPrompt(
           this.pageContext,
@@ -440,7 +506,7 @@ export class Session {
                       toolUseId: currentToolUse.id,
                       send: (msg) => send(peer, msg),
                       resolvedSkills,
-                      lazyTools: this.lazyTools,
+                      lazyToolNames: this.lazyToolNames,
                       activatedLazyTools: this.activatedLazyTools,
                       loadedSkills: this.loadedSkills,
                       plan: this.plan,
@@ -476,7 +542,20 @@ export class Session {
                       }
                     };
                     try {
-                      const parsed = matchedServerTool.inputSchema(defCtx).parse(input);
+                      const coercedInput = {};
+                      for (const key of Object.keys(input)) {
+                        const value = input[key];
+                        if (typeof value === "string" && (value[0] === "[" || value[0] === "{")) {
+                          try {
+                            coercedInput[key] = JSON.parse(value);
+                          } catch {
+                            coercedInput[key] = value;
+                          }
+                        } else {
+                          coercedInput[key] = value;
+                        }
+                      }
+                      const parsed = matchedServerTool.inputSchema(defCtx).parse(coercedInput);
                       const result = await matchedServerTool.handle(
                         handlerCtx,
                         parsed
@@ -695,9 +774,10 @@ export class Session {
    */
   buildToolMetadataMap() {
     const map = /* @__PURE__ */ new Map();
-    for (const tool of [...this.tools, ...this.lazyTools]) {
-      if (tool.volatile) {
-        map.set(tool.name, { volatile: true });
+    for (const name of [...this.toolNames, ...this.lazyToolNames]) {
+      const bundled = this.bundledToolMap.get(name);
+      if (bundled?.volatile) {
+        map.set(name, { volatile: true });
       }
     }
     return map;
@@ -706,10 +786,9 @@ export class Session {
     const system = this.pageContext ? buildSystemPromptEntries(
       this.pageContext,
       resolveSkills(this.pageContext),
-      this.lazyTools.map((t) => ({
-        name: t.name,
-        description: t.description
-      })),
+      this.lazyToolNames.map((name) => this.getToolSummary(name)).filter(
+        (s) => s !== void 0
+      ),
       this.getActivePlanContext(),
       this.loadedSkills
     ) : [];

package/dist/modules/agent/runtime/server/SessionManager.d.ts

@@ -1,9 +1,12 @@
 import { Session } from './Session.js';
+import type { ServerToolMetadata } from '../shared/types.js';
 export declare class SessionManager {
+    private toolDefinitions;
     private sessions;
     /** Maps used token strings to their embedded timestamp (seconds). */
     private usedTokens;
     private pruneTimer;
+    constructor(toolDefinitions: ServerToolMetadata[]);
     create(peerId: string): Session;
     get(peerId: string): Session | undefined;
     /**

package/dist/modules/agent/runtime/server/SessionManager.js

@@ -3,6 +3,9 @@ import { Session } from "./Session.js";
 const TOKEN_EXPIRY_SECONDS = 300;
 const SESSION_IDLE_TIMEOUT_MS = 5 * 60 * 1e3;
 export class SessionManager {
+  constructor(toolDefinitions) {
+    this.toolDefinitions = toolDefinitions;
+  }
   sessions = /* @__PURE__ */ new Map();
   /** Maps used token strings to their embedded timestamp (seconds). */
   usedTokens = /* @__PURE__ */ new Map();
@@ -11,7 +14,7 @@ export class SessionManager {
     this.pruneTokens();
   }, 6e4);
   create(peerId) {
-    const session = new Session();
+    const session = new Session(this.toolDefinitions);
     this.sessions.set(peerId, { session, lastActivity: Date.now() });
     return session;
   }

package/dist/modules/agent/runtime/server/agent.js

@@ -2,7 +2,8 @@ import { defineWebSocketHandler, useRuntimeConfig } from "#imports";
 import { clientMessageSchema } from "../shared/types.js";
 import { SessionManager } from "./SessionManager.js";
 import { send } from "./helpers.js";
-const sessionManager = new SessionManager();
+import { toolDefinitions } from "#blokkli-build/agent-server";
+const sessionManager = new SessionManager(toolDefinitions);
 const config = useRuntimeConfig();
 const authSecret = config.blokkli?.agent?.authSecret || "";
 const apiKey = config.blokkli?.agent?.apiKey || "";
@@ -69,7 +70,7 @@ export default defineWebSocketHandler({
       }
       switch (data.type) {
         case "init":
-          session.init(data.tools, data.pageContext);
+          session.init(data.toolNames, data.pageContext);
           break;
         case "start":
           if (!apiKey) {

package/dist/modules/agent/runtime/server/default-skills/fixReadability.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../skills/index.js").SkillDefinition;
+export default _default;

package/dist/modules/agent/runtime/server/default-skills/fixReadability.js

@@ -0,0 +1,69 @@
+import { defineBlokkliAgentSkill } from "../skills/index.js";
+export default defineBlokkliAgentSkill({
+  name: "fix-readability",
+  label: { en: "Fix Readability", de: "Lesbarkeit verbessern" },
+  description: "Load this skill when asked to check, fix, or improve readability of texts on the page.",
+  getContents: () => `
+# Fix Readability - Iterative Workflow
+
+Fixing readability is an **iterative process**. You must verify your rewrites actually improved the scores before moving on.
+
+## Step 1: Analyze
+
+Call \`get_readability_issues\` to get current issues.
+
+The result is an object keyed by paragraph UUID, then by field name:
+\`\`\`
+{
+  "<uuid>": {
+    "<fieldName>": {
+      "fieldValue": "current text",
+      "issues": [
+        { "text": "flagged segment", "impact": "critical", "scores": { "lix": 85 } }
+      ]
+    }
+  }
+}
+\`\`\`
+
+- \`fieldValue\` is the full editable field content.
+- Each issue is a text segment within the field that was flagged, with its own scores.
+- A field can have multiple issues (e.g. a rich text field with several hard-to-read paragraphs).
+
+## Step 2: Pre-check with \`check_readability_for_texts\`
+
+Before applying a rewrite, use \`check_readability_for_texts\` to verify your rewritten text actually scores better. Pass the proposed new text and check that the scores improved compared to the original.
+
+This is cheap and fast \u2014 use it to iterate on your wording before committing a rewrite.
+
+## Step 3: Rewrite
+
+Use \`batch_rewrite_text\` to apply the improved texts. The UUID and field name from the analyze result map directly to the batch_rewrite_text input:
+\`\`\`
+{ "uuids": { "<uuid>": { "<fieldName>": "improved text" } } }
+\`\`\`
+
+When rewriting:
+- Use shorter sentences and simpler words.
+- Keep the original meaning and tone.
+- Focus on fields with "critical" and "serious" impact first.
+
+## Step 4: Verify
+
+After the rewrites are applied, call \`get_readability_issues\` **again** to check if the issues are resolved.
+
+- If issues remain: rewrite again with different wording.
+- If new issues appeared: fix those too.
+- Repeat until no more readability issues are reported.
+
+**Do NOT skip the verification step.** A rewrite can easily make readability worse if sentences become longer or more complex.
+
+## Important
+
+- Always pre-check with \`check_readability_for_texts\` before applying rewrites.
+- Always verify with \`get_readability_issues\` after applying rewrites.
+- Never assume a rewrite fixed the issue.
+- The scores (LIX, CLI, ARI) measure sentence length and word complexity. Lower is easier to read.
+- LIX above 60 is flagged. Above 70 is critical.
+`
+});

package/dist/modules/agent/runtime/server/default-system-prompts/page-context.js

@@ -51,6 +51,34 @@ export default defineBlokkliAgentSystemPrompt({
         lines.push(formatContentField(field));
       }
     }
+    if (pageContext.contentSearchTabs?.length) {
+      lines.push(
+        "",
+        "## Content Search Tabs",
+        "",
+        "Use the `search_content` tool with one of these tab IDs to search for content:",
+        ""
+      );
+      for (const tab of pageContext.contentSearchTabs) {
+        const typesDescription = tab.types.map((t) => `${t.type} (${t.bundles.join(", ")})`).join(", ");
+        lines.push(`- **\`${tab.id}\`** \u2014 ${tab.title}: ${typesDescription}`);
+      }
+    }
+    if (pageContext.analyzers?.length) {
+      lines.push(
+        "",
+        "## Available Analyzers",
+        "",
+        "Use `get_readability_issues` to run all readability analyzers. The following analyzers are available:",
+        ""
+      );
+      for (const a of pageContext.analyzers) {
+        const parts = [`- **\`${a.id}\`**`];
+        if (a.label) parts.push(`\u2014 ${a.label}`);
+        if (a.description) parts.push(`: ${a.description}`);
+        lines.push(parts.join(""));
+      }
+    }
     const editModeDescription = getEditModeDescription(pageContext.editMode);
     if (editModeDescription) {
       lines.push("", "## Edit Mode", "", editModeDescription);

package/dist/modules/agent/runtime/server/server-tools/index.d.ts

@@ -23,7 +23,10 @@ export type ToolResultEntry = {
 export type ToolDefinitionContext = {
     resolvedSkills: ResolvedSkill[];
     plan: ServerPlan | null;
-    unloadedLazyTools: ClientToolDefinition[];
+    unloadedLazyTools: {
+        name: string;
+        description: string;
+    }[];
 };
 /**
  * Context passed to `handle()` — provides access to session state
@@ -33,7 +36,7 @@ export type ServerToolContext = {
     toolUseId: string;
     send: (message: ServerMessage) => void;
     resolvedSkills: ResolvedSkill[];
-    lazyTools: ClientToolDefinition[];
+    lazyToolNames: string[];
     activatedLazyTools: Set<string>;
     loadedSkills: Set<string>;
     plan: ServerPlan | null;
@@ -79,6 +82,11 @@ export type ServerSideTool<T extends z.ZodType = z.ZodType> = {
  * Identity function for type inference when defining a server-side tool.
  */
 export declare function defineServerSideTool<T extends z.ZodType>(tool: ServerSideTool<T>): ServerSideTool<T>;
+/**
+ * Recursively strip $schema and additionalProperties from a JSON Schema object.
+ * These are unnecessary for the LLM and waste context window tokens.
+ */
+export declare function stripSchemaOverhead(obj: unknown): unknown;
 /**
  * Build a ClientToolDefinition from a ServerSideTool for a given context.
  * Returns null when the tool should not be offered this turn.

package/dist/modules/agent/runtime/server/server-tools/index.js

@@ -2,7 +2,7 @@ import { z } from "zod";
 export function defineServerSideTool(tool) {
   return tool;
 }
-function stripSchemaOverhead(obj) {
+export function stripSchemaOverhead(obj) {
   if (Array.isArray(obj)) {
     return obj.map(stripSchemaOverhead);
   }

package/dist/modules/agent/runtime/server/server-tools/load_tools/index.js

@@ -18,7 +18,7 @@ export default defineServerSideTool({
   handle(ctx, input) {
     const loaded = [];
     for (const name of input.tools) {
-      if (ctx.lazyTools.some((t) => t.name === name)) {
+      if (ctx.lazyToolNames.includes(name)) {
         ctx.activatedLazyTools.add(name);
         loaded.push(name);
       }

package/dist/modules/agent/runtime/shared/types.d.ts

@@ -113,6 +113,21 @@ export type BlockBundle = {
  * Edit mode determines what actions the user is allowed to perform.
  */
 export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
+/**
+ * Server-side tool metadata extracted at build time.
+ * Contains only static properties needed by the server — no execute(), label(),
+ * component, or other runtime-only fields.
+ */
+export type ServerToolMetadata = {
+    name: string;
+    description: string;
+    category: 'query' | 'mutation';
+    modes: EditMode[];
+    paramsSchema: z.ZodType;
+    lazy?: boolean;
+    volatile?: boolean;
+    requiredAdapterMethods?: string[];
+};
 /**
  * Fragment definition for reusable content blocks.
  */
@@ -152,6 +167,22 @@ export type PageContext = {
     fragments: Fragment[];
     /** Content fields on the page entity itself (e.g., lead text, hero image) */
     entityContentFields: BlockBundleContentField[];
+    /** Available content search tabs (for the search_content tool) */
+    contentSearchTabs?: {
+        id: string;
+        title: string;
+        types: {
+            type: string;
+            bundles: string[];
+        }[];
+    }[];
+    /** Available content analyzers (for the get_readability_issues tool) */
+    analyzers?: {
+        id: string;
+        type?: string;
+        label?: string;
+        description?: string;
+    }[];
 };
 /**
  * Classified error categories for AI provider errors.
@@ -266,17 +297,7 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     authToken: z.ZodString;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"init">;
-    tools: z.ZodArray<z.ZodObject<{
-        name: z.ZodString;
-        description: z.ZodString;
-        input_schema: z.ZodRecord<z.ZodString, z.ZodUnknown>;
-        lazy: z.ZodOptional<z.ZodBoolean>;
-        category: z.ZodOptional<z.ZodEnum<{
-            query: "query";
-            mutation: "mutation";
-        }>>;
-        volatile: z.ZodOptional<z.ZodBoolean>;
-    }, z.core.$strip>>;
+    toolNames: z.ZodArray<z.ZodString>;
     pageContext: z.ZodObject<{
         title: z.ZodString;
         entityType: z.ZodString;
@@ -347,6 +368,20 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 bundles: z.ZodArray<z.ZodString>;
             }, z.core.$strip>>;
         }, z.core.$strip>]>>;
+        contentSearchTabs: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            title: z.ZodString;
+            types: z.ZodArray<z.ZodObject<{
+                type: z.ZodString;
+                bundles: z.ZodArray<z.ZodString>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+        analyzers: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            type: z.ZodOptional<z.ZodString>;
+            label: z.ZodOptional<z.ZodString>;
+            description: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>>;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"start">;

package/dist/modules/agent/runtime/shared/types.js

@@ -66,7 +66,27 @@ const pageContextSchema = z.object({
   isPublished: z.boolean().nullable(),
   editMode: z.enum(["readonly", "editing", "translating", "review"]),
   fragments: z.array(fragmentSchema),
-  entityContentFields: z.array(blockBundleContentFieldSchema)
+  entityContentFields: z.array(blockBundleContentFieldSchema),
+  contentSearchTabs: z.array(
+    z.object({
+      id: z.string(),
+      title: z.string(),
+      types: z.array(
+        z.object({
+          type: z.string(),
+          bundles: z.array(z.string())
+        })
+      )
+    })
+  ).optional(),
+  analyzers: z.array(
+    z.object({
+      id: z.string(),
+      type: z.string().optional(),
+      label: z.string().optional(),
+      description: z.string().optional()
+    })
+  ).optional()
 });
 const pageStructureBlockSchema = z.lazy(
   () => z.object({
@@ -81,14 +101,6 @@ export const pageStructureSchema = z.object({
   fields: z.record(z.string(), z.array(pageStructureBlockSchema)),
   entityContentFields: z.record(z.string(), z.string()).optional()
 });
-const clientToolDefinitionSchema = z.object({
-  name: z.string(),
-  description: z.string(),
-  input_schema: z.record(z.string(), z.unknown()),
-  lazy: z.boolean().optional(),
-  category: z.enum(["query", "mutation"]).optional(),
-  volatile: z.boolean().optional()
-});
 const genericContentBlockSchema = z.discriminatedUnion("type", [
   z.object({ type: z.literal("text"), text: z.string() }),
   z.object({ type: z.literal("skill"), name: z.string(), text: z.string() }),
@@ -118,7 +130,7 @@ export const clientMessageSchema = z.discriminatedUnion("type", [
   z.object({ type: z.literal("authenticate"), authToken: z.string() }),
   z.object({
     type: z.literal("init"),
-    tools: z.array(clientToolDefinitionSchema),
+    toolNames: z.array(z.string()),
     pageContext: pageContextSchema
   }),
   z.object({

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

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

package/dist/modules/charts/index.mjs

@@ -17,6 +17,10 @@ import type { ChartColor } from '#blokkli/charts/types'
 
 export const COLORS: Record<string, ChartColor>
 `;
+    },
+    {
+      context: "both",
+      write: true
     }
   );
 }
@@ -29,14 +33,24 @@ const index = defineBlokkliModule({
     options.blokkliDirs ??= [];
     options.blokkliDirs.push(resolve("./runtime/blokkli"));
   },
-  setup(ctx, options) {
-    ctx.context.blocks.addFile(
-      resolve("./runtime/components/Fragment/BlokkliChart.vue")
+  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(
+      "#blokkli/charts/components",
+      resolve("./runtime/components")
     );
-    ctx.context.features.addFile(resolve("./runtime/features/charts/index.vue"));
-    ctx.context.addFeatureFragment("blokkli_chart");
-    ctx.context.addTemplate(chartsConfigTemplate(options));
-    ctx.helper.addAlias("#blokkli/charts/types", resolve("./runtime/types"));
+    context.registerComplexOptionType({
+      id: "chart",
+      typeName: "BlokkliChartData",
+      typePath: resolve("./runtime/types"),
+      editorComponentPath: resolve(
+        "./runtime/features/charts/Editor/index.vue"
+      ),
+      editorButtonLabel: $t("chartsEditButton", "Edit chart..."),
+      editorIcon: "bk_mdi_area_chart"
+    });
   }
 });