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

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

@@ -1,4 +1,4 @@
-import type { PageContext } from '../shared/types.js';
+import type { PageContext, TranscriptSystemPrompt } from '../shared/types.js';
 import type { ResolvedSkill } from './skills/types.js';
 import type { ActivePlanContext, SystemPromptBlock } from './system-prompts/types.js';
 /**
@@ -20,3 +20,11 @@ export declare function buildSystemPromptText(context: PageContext, resolvedSkil
     name: string;
     description: string;
 }[], activePlan?: ActivePlanContext, loadedSkills?: ReadonlySet<string>): string;
+/**
+ * Build structured system prompt entries for the transcript.
+ * Returns one entry per prompt definition with id, name, and content.
+ */
+export declare function buildSystemPromptEntries(context: PageContext, resolvedSkills: ResolvedSkill[], lazyTools?: {
+    name: string;
+    description: string;
+}[], activePlan?: ActivePlanContext, loadedSkills?: ReadonlySet<string>): TranscriptSystemPrompt[];

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

@@ -51,3 +51,29 @@ export function buildSystemPromptText(context, resolvedSkills, lazyTools = [], a
     loadedSkills
   ).map((b) => b.text).join("\n\n");
 }
+export function buildSystemPromptEntries(context, resolvedSkills, lazyTools = [], activePlan, loadedSkills = /* @__PURE__ */ new Set()) {
+  const promptContext = {
+    pageContext: context,
+    resolvedSkills,
+    lazyTools,
+    isDebugMode: !!(import.meta.dev && debugPrompt),
+    activePlan,
+    loadedSkills
+  };
+  const sorted = systemPrompts.filter((sp) => !sp.modes?.length || sp.modes.includes(context.editMode)).sort((a, b) => {
+    const groupDiff = getCacheGroupOrder(a) - getCacheGroupOrder(b);
+    if (groupDiff !== 0) return groupDiff;
+    return a.weight - b.weight;
+  });
+  const entries = [];
+  for (const sp of sorted) {
+    const text = sp.getPrompt(promptContext)?.trim();
+    if (!text) continue;
+    entries.push({
+      id: sp.id,
+      name: sp.title,
+      content: text
+    });
+  }
+  return entries;
+}

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

@@ -204,6 +204,40 @@ export type UsageTurn = {
     cacheReadInputTokens: number;
     pricing: UsagePricing | null;
 };
+/**
+ * A single system prompt entry in the structured transcript.
+ */
+export type TranscriptSystemPrompt = {
+    id: string;
+    name: string;
+    content: string;
+};
+/**
+ * A single message in the structured transcript.
+ * `seen` is the pruned content actually sent to the LLM.
+ * `full` is the pre-pruned content, omitted when identical to `seen`.
+ */
+export type TranscriptMessage = {
+    type: 'agent' | 'user';
+    seen: string | GenericContentBlock[];
+    full?: string | GenericContentBlock[];
+};
+/**
+ * Tool definition as included in the transcript.
+ */
+export type TranscriptToolDefinition = {
+    name: string;
+    description: string;
+    input_schema: Record<string, unknown>;
+};
+/**
+ * Structured transcript of the current conversation state.
+ */
+export type Transcript = {
+    system: TranscriptSystemPrompt[];
+    messages: TranscriptMessage[];
+    tools: TranscriptToolDefinition[];
+};
 /**
  * Tool definition sent from client to server on init.
  */
@@ -404,7 +438,7 @@ export type ServerMessage = {
     retryable?: boolean;
 } | {
     type: 'transcript';
-    content: string;
+    transcript: Transcript;
 } | {
     type: 'server_tool_result';
     tool: 'load_skill' | 'load_tools' | 'create_plan' | 'complete_plan_step';

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

@@ -0,0 +1,35 @@
+import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
+import 'nuxt/schema';
+import 'consola';
+import '../../../dist/global/types/definitions.js';
+import '../../../dist/global/types/theme.js';
+import '@nuxt/kit';
+import '../../../dist/global/types/features.js';
+
+type ChartColor = {
+    /**
+     * A valid CSS color value, e.g. '#ff0000', 'rgb(255, 0, 0)',
+     * or 'rgb(var(--theme-color-primary))' for CSS custom properties.
+     */
+    color: string;
+    /**
+     * The label of the color.
+     */
+    label: string;
+};
+type ChartsModuleOptions = {
+    /**
+     * Provide the path to a custom component to render charts.
+     *
+     * @todo not yet implemented
+     */
+    chartRenderComponent?: string;
+    /**
+     * The available chart colors.
+     */
+    colors: Record<string, ChartColor>;
+};
+
+declare const _default: (options: ChartsModuleOptions) => BlokkliModule<ChartsModuleOptions>;
+
+export { _default as default };

package/dist/modules/charts/index.mjs

@@ -0,0 +1,43 @@
+import { createResolver } from '@nuxt/kit';
+import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
+import { fileURLToPath } from 'node:url';
+import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
+
+function chartsConfigTemplate(options) {
+  return defineCodeTemplate(
+    "charts-config",
+    () => {
+      return `
+export const COLORS = ${JSON.stringify(options.colors)}
+`;
+    },
+    () => {
+      return `
+import type { ChartColor } from '#blokkli/charts/types'
+
+export const COLORS: Record<string, ChartColor>
+`;
+    }
+  );
+}
+
+const resolve = createResolver(
+  fileURLToPath(new URL("./", import.meta.url))
+).resolve;
+const index = defineBlokkliModule({
+  alterOptions(options) {
+    options.blokkliDirs ??= [];
+    options.blokkliDirs.push(resolve("./runtime/blokkli"));
+  },
+  setup(ctx, options) {
+    ctx.context.blocks.addFile(
+      resolve("./runtime/components/Fragment/BlokkliChart.vue")
+    );
+    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"));
+  }
+});
+
+export { index as default };

package/dist/modules/charts/runtime/blokkli/skills/charts.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/modules/charts/runtime/blokkli/skills/charts.js

@@ -0,0 +1,42 @@
+import { defineBlokkliAgentSkill } from "#blokkli/agent/server/skills";
+export default defineBlokkliAgentSkill({
+  name: "charts",
+  label: { en: "Working with charts", de: "Arbeiten mit Diagrammen" },
+  description: "How charts work in bl\xF6kkli. LOAD THIS when the user asks about charts or when you need to create or update a chart! Charts are a special blokkli_fragment.",
+  getContents: () => `
+# Charts
+
+Charts are implemented as **fragments** with the bundle "blokkli_fragment" and the fragment name "blokkli_chart". When you see a paragraph with bundle "blokkli_fragment" and fragmentName "blokkli_chart", that IS the chart paragraph.
+
+## Key concept
+
+The chart paragraph's UUID is what you pass directly to the chart tools. There is no separate "chart entity" inside the fragment \u2014 the fragment IS the chart.
+
+## Available tools
+
+- **get_chart_data**: Read the current chart data (type, categories, series, colors, typeOptions). Always call this first when modifying an existing chart!
+- **create_chart**: Create a new chart. Requires chart data (type, categories, series).
+- **update_chart**: Update an existing chart. Pass the fragment paragraph's UUID and only the properties you want to change (title, type, categories, series, categoryColors, footnotes, typeOptions).
+- **get_chart_type_options**: Get available typeOptions for a chart type. Call this to discover which rendering options exist (e.g. stacked, horizontal for bar charts) before setting typeOptions.
+
+## Workflow
+
+1. To **read** a chart's current state: use get_chart_data with the paragraph UUID.
+2. To **create** a chart: use create_chart with the data.
+3. To **modify** a chart: first call get_chart_data to see the current state, then use update_chart with only the properties you want to change.
+4. To **change rendering options** (e.g. stacked bars, smooth lines, grid lines): first call get_chart_type_options with the chart type to see available options, then use update_chart with the typeOptions property.
+
+## Chart types
+
+bar, line, pie, area, donut, heatmap, radialBar, radar.
+
+- pie, donut, radialBar: Single-series charts where each category gets its own color (categoryColors).
+- bar, line, area, heatmap, radar: Multi-series charts where each series has its own color.
+
+Each chart type has different options!
+
+## Colors
+
+Series colors and category colors use color IDs defined in the project configuration. They are auto-assigned if omitted. The valid color IDs are part of the tool schemas (enum values).
+`
+});

package/dist/modules/charts/runtime/blokkli/tools/chart_schemas.d.ts

@@ -0,0 +1,63 @@
+import { z } from 'zod';
+import type { BlokkliChartData, ChartColor } from '#blokkli/charts/types';
+export declare const chartTypeEnum: z.ZodEnum<{
+    bar: "bar";
+    line: "line";
+    pie: "pie";
+    area: "area";
+    donut: "donut";
+    heatmap: "heatmap";
+    radialBar: "radialBar";
+    radar: "radar";
+}>;
+export declare const chartColorEnum: z.ZodEnum<{
+    [x: string]: string;
+}>;
+export declare const chartSeriesSchema: z.ZodObject<{
+    name: z.ZodString;
+    color: z.ZodOptional<z.ZodEnum<{
+        [x: string]: string;
+    }>>;
+    data: z.ZodArray<z.ZodNumber>;
+}, z.core.$strip>;
+export declare const chartDataSchema: z.ZodObject<{
+    title: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    type: z.ZodEnum<{
+        bar: "bar";
+        line: "line";
+        pie: "pie";
+        area: "area";
+        donut: "donut";
+        heatmap: "heatmap";
+        radialBar: "radialBar";
+        radar: "radar";
+    }>;
+    categories: z.ZodArray<z.ZodString>;
+    series: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        color: z.ZodOptional<z.ZodEnum<{
+            [x: string]: string;
+        }>>;
+        data: z.ZodArray<z.ZodNumber>;
+    }, z.core.$strip>>;
+    categoryColors: z.ZodOptional<z.ZodArray<z.ZodEnum<{
+        [x: string]: string;
+    }>>>;
+    footnotes: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodString>>>;
+    typeOptions: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodBoolean, z.ZodNumber]>>>;
+}, z.core.$strip>;
+/**
+ * Validate and normalize chart data.
+ *
+ * - Checks series data length matches categories length
+ * - Auto-assigns missing series colors
+ * - Auto-assigns categoryColors for pie/donut/radialBar
+ * - Validates color IDs exist in the provided colors map
+ * - Validates typeOptions keys against the chart type definition
+ * - Fills typeOptions defaults
+ */
+export declare function validateChartData(data: BlokkliChartData, colors: Record<string, ChartColor>): {
+    error: string;
+} | {
+    data: BlokkliChartData;
+};

package/dist/modules/charts/runtime/blokkli/tools/chart_schemas.js

@@ -0,0 +1,98 @@
+import { z } from "zod";
+import { getColorIdAtIndex } from "#blokkli/charts/types";
+import { getChartTypeRuntime, getDefaultTypeOptions } from "../../chartTypes/index.js";
+import { COLORS } from "#blokkli-build/charts-config";
+const SINGLE_SERIES_TYPES = ["pie", "donut", "radialBar"];
+export const chartTypeEnum = z.enum([
+  "bar",
+  "line",
+  "pie",
+  "area",
+  "donut",
+  "heatmap",
+  "radialBar",
+  "radar"
+]);
+const colorIds = Object.keys(COLORS);
+export const chartColorEnum = z.enum(colorIds);
+export const chartSeriesSchema = z.object({
+  name: z.string().describe("Series name (shown in legend)"),
+  color: chartColorEnum.optional().describe(
+    "Color ID from available chart colors. Auto-assigned if omitted."
+  ),
+  data: z.array(z.number()).describe("Data values, one per category")
+});
+export const chartDataSchema = z.object({
+  title: z.string().optional().default("").describe("Chart title"),
+  type: chartTypeEnum.describe("Chart type"),
+  categories: z.array(z.string()).min(1).describe("Category labels (x-axis or slice names)"),
+  series: z.array(chartSeriesSchema).min(1).describe("Data series"),
+  categoryColors: z.array(chartColorEnum).optional().describe(
+    "Color IDs per category (for pie/donut/radialBar). Auto-assigned if omitted."
+  ),
+  footnotes: z.array(z.string()).optional().default([]).describe(
+    "Footnote texts. Reference in categories/series names as {1}, {2}, etc."
+  ),
+  typeOptions: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional().describe(
+    "Type-specific rendering options. Use get_chart_type_options to see available keys."
+  )
+});
+export function validateChartData(data, colors) {
+  const colorIds2 = Object.keys(colors);
+  for (let i = 0; i < data.series.length; i++) {
+    const series = data.series[i];
+    if (series.data.length !== data.categories.length) {
+      return {
+        error: `Series "${series.name}" has ${series.data.length} data values but there are ${data.categories.length} categories. Each series must have exactly one value per category.`
+      };
+    }
+  }
+  for (let i = 0; i < data.series.length; i++) {
+    const series = data.series[i];
+    if (!series.color) {
+      series.color = getColorIdAtIndex(i, colors);
+    } else if (!colors[series.color]) {
+      return {
+        error: `Invalid color ID "${series.color}" on series "${series.name}". Available colors: ${colorIds2.join(", ")}`
+      };
+    }
+  }
+  const isSingleSeries = SINGLE_SERIES_TYPES.includes(data.type);
+  if (isSingleSeries) {
+    if (!data.categoryColors || data.categoryColors.length !== data.categories.length) {
+      data.categoryColors = data.categories.map(
+        (_, i) => getColorIdAtIndex(i, colors)
+      );
+    } else {
+      for (let i = 0; i < data.categoryColors.length; i++) {
+        const id = data.categoryColors[i];
+        if (!colors[id]) {
+          return {
+            error: `Invalid categoryColor ID "${id}" at index ${i}. Available colors: ${colorIds2.join(", ")}`
+          };
+        }
+      }
+    }
+  } else if (!data.categoryColors || data.categoryColors.length !== data.categories.length) {
+    data.categoryColors = data.categories.map(
+      (_, i) => getColorIdAtIndex(i, colors)
+    );
+  }
+  const defaults = getDefaultTypeOptions(data.type);
+  const typeDef = getChartTypeRuntime(data.type);
+  if (data.typeOptions && typeDef) {
+    for (const key of Object.keys(data.typeOptions)) {
+      if (!(key in typeDef.editor.options)) {
+        const availableKeys = Object.keys(typeDef.editor.options);
+        return {
+          error: `Invalid typeOption "${key}" for chart type "${data.type}". Available options: ${availableKeys.join(", ")}`
+        };
+      }
+    }
+  }
+  data.typeOptions = { ...defaults, ...data.typeOptions || {} };
+  if (!data.footnotes) {
+    data.footnotes = [];
+  }
+  return { data };
+}

package/dist/modules/charts/runtime/blokkli/tools/create_chart/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/modules/charts/runtime/blokkli/tools/create_chart/index.js

@@ -0,0 +1,86 @@
+import { z } from "zod";
+import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
+import {
+  mutationResultSchema,
+  parentSchema,
+  positionSchema,
+  resolvePosition
+} from "#blokkli/agent/app/tools/schemas";
+import { chartDataSchema, validateChartData } from "../chart_schemas.js";
+import { COLORS } from "#blokkli-build/charts-config";
+const paramsSchema = z.object({
+  chart: chartDataSchema,
+  parent: parentSchema.describe("The parent entity to add the chart to"),
+  position: positionSchema
+});
+export default defineBlokkliAgentTool({
+  name: "create_chart",
+  description: "Create a new chart on the page. Series colors are auto-assigned if omitted. For pie/donut/radialBar charts, only the first series is used and each category gets its own color (auto-assigned if categoryColors is omitted). Use get_chart_type_options to discover available typeOptions for the chosen chart type before setting them.",
+  category: "mutation",
+  prunedSummary: (r) => r.success ? "created chart" : "rejected",
+  modes: ["editing"],
+  lazy: true,
+  label($t) {
+    return $t("aiAgentCreateChartRunning", "Creating chart...");
+  },
+  paramsSchema,
+  resultSchema: mutationResultSchema,
+  requiredAdapterMethods: ["fragmentsAddBlock"],
+  execute(ctx, params) {
+    const { fields, definitions } = ctx.app;
+    const fragment = definitions.fragmentDefinitions.value.find(
+      (f) => f.name === "blokkli_chart"
+    );
+    if (!fragment) {
+      return { error: 'Chart fragment "blokkli_chart" is not available.' };
+    }
+    const field = fields.find(params.parent.uuid, params.parent.field);
+    if (!field) {
+      return {
+        error: `Field not found: ${params.parent.field} on entity ${params.parent.uuid}`
+      };
+    }
+    if (!field.allowedFragments.includes("blokkli_chart")) {
+      return {
+        error: `Field "${params.parent.field}" does not allow the "blokkli_chart" fragment. Allowed fragments: ${field.allowedFragments.length ? field.allowedFragments.join(", ") : "none"}`
+      };
+    }
+    const chartData = {
+      title: params.chart.title,
+      type: params.chart.type,
+      categories: params.chart.categories,
+      series: params.chart.series.map((s) => ({
+        name: s.name,
+        color: s.color || "",
+        data: s.data
+      })),
+      categoryColors: params.chart.categoryColors || [],
+      footnotes: params.chart.footnotes,
+      typeOptions: params.chart.typeOptions || {}
+    };
+    const result = validateChartData(chartData, COLORS);
+    if ("error" in result) return result;
+    const resolved = resolvePosition(
+      ctx.app,
+      params.parent.uuid,
+      params.parent.field,
+      params.position
+    );
+    if ("error" in resolved) return resolved;
+    const { $t } = ctx.app;
+    return {
+      type: "add",
+      label: $t("aiAgentCreateChartDone", "Added chart"),
+      apply: (adapter) => adapter.fragmentsAddBlock({
+        name: "blokkli_chart",
+        host: {
+          type: params.parent.type,
+          uuid: params.parent.uuid,
+          fieldName: params.parent.field
+        },
+        preceedingUuid: resolved.afterUuid,
+        options: { data: JSON.stringify(result.data) }
+      })
+    };
+  }
+});

package/dist/modules/charts/runtime/blokkli/tools/get_chart_data/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/modules/charts/runtime/blokkli/tools/get_chart_data/index.js

@@ -0,0 +1,74 @@
+import { z } from "zod";
+import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
+import { chartTypeEnum, chartColorEnum, chartSeriesSchema } from "../chart_schemas.js";
+import { COLORS } from "#blokkli-build/charts-config";
+import { getDefaultChartData } from "#blokkli/charts/types";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const paramsSchema = z.object({
+  uuid: z.string().describe("UUID of the chart paragraph")
+});
+const resultSchema = z.object({
+  title: z.string().describe("Chart title"),
+  type: chartTypeEnum.describe("Chart type"),
+  categories: z.array(z.string()).describe("Category labels"),
+  series: z.array(chartSeriesSchema.required()).describe("Data series with colors"),
+  categoryColors: z.array(chartColorEnum).describe("Color IDs per category"),
+  footnotes: z.array(z.string()).describe("Footnote texts"),
+  typeOptions: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).describe("Current type-specific rendering options")
+});
+export default defineBlokkliAgentTool({
+  name: "get_chart_data",
+  description: "Get the current data of a chart. Returns the chart type, categories, series, colors, footnotes, and typeOptions. Use this to inspect a chart before updating it.",
+  category: "query",
+  volatile: true,
+  prunedSummary: (r) => `chart data (${r.type})`,
+  modes: ["readonly", "editing", "translating", "review"],
+  lazy: true,
+  label($t) {
+    return $t("aiAgentGetChartDataRunning", "Getting chart data...");
+  },
+  paramsSchema,
+  resultSchema,
+  execute(ctx, params) {
+    const { blocks, state, $t } = ctx.app;
+    const block = blocks.getBlock(params.uuid);
+    if (!block) {
+      return { error: `Paragraph not found: ${params.uuid}` };
+    }
+    if (block.bundle !== fragmentBlockBundle) {
+      return {
+        error: `Paragraph "${params.uuid}" is a "${block.bundle}", not a fragment.`
+      };
+    }
+    if (block.fragment?.name !== "blokkli_chart") {
+      return {
+        error: `Fragment "${params.uuid}" is a "${block.fragment?.name}", not a "blokkli_chart".`
+      };
+    }
+    const item = state.getFieldListItem(params.uuid);
+    const rawData = item?.options?.data;
+    let data;
+    if (rawData) {
+      try {
+        data = JSON.parse(rawData);
+      } catch {
+        data = getDefaultChartData(COLORS);
+      }
+    } else {
+      data = getDefaultChartData(COLORS);
+    }
+    return {
+      result: {
+        title: data.title || "",
+        type: data.type,
+        categories: data.categories,
+        series: data.series,
+        categoryColors: data.categoryColors || [],
+        footnotes: data.footnotes || [],
+        typeOptions: data.typeOptions || {}
+      },
+      label: $t("aiAgentGetChartDataDone", "Got chart data"),
+      affectedUuids: [params.uuid]
+    };
+  }
+});

package/dist/modules/charts/runtime/blokkli/tools/get_chart_type_options/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/modules/charts/runtime/blokkli/tools/get_chart_type_options/index.js

@@ -0,0 +1,42 @@
+import { z } from "zod";
+import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
+import {
+  blockOptionsMapSchema,
+  buildBlockOptionsMapFromDefinitions
+} from "#blokkli/agent/app/tools/schemas";
+import { getChartTypeRuntime } from "../../../chartTypes/index.js";
+import { chartTypeEnum } from "../chart_schemas.js";
+const paramsSchema = z.object({
+  type: chartTypeEnum.describe("The chart type to get options for")
+});
+const resultSchema = z.object({
+  type: z.string().describe("The chart type ID"),
+  options: blockOptionsMapSchema.describe("Available typeOptions")
+});
+export default defineBlokkliAgentTool({
+  name: "get_chart_type_options",
+  description: "Get available typeOptions for a chart type. Call this before setting typeOptions on create_chart or update_chart to know which keys are valid, their types, defaults, and allowed values.",
+  category: "query",
+  volatile: true,
+  lazy: true,
+  prunedSummary: (r) => `options for ${r.type}`,
+  modes: ["editing"],
+  label($t) {
+    return $t("aiAgentGetChartTypeOptionsRunning", "Getting chart options...");
+  },
+  paramsSchema,
+  resultSchema,
+  execute(_ctx, params) {
+    const def = getChartTypeRuntime(params.type);
+    if (!def) {
+      return { error: `Unknown chart type: ${params.type}` };
+    }
+    return {
+      result: {
+        type: params.type,
+        options: buildBlockOptionsMapFromDefinitions(def.editor.options)
+      },
+      label: `Chart options for "${def.editor.label}"`
+    };
+  }
+});

package/dist/modules/charts/runtime/blokkli/tools/update_chart/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;