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

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;

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

@@ -0,0 +1,101 @@
+import { z } from "zod";
+import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
+import { mutationResultSchema } from "#blokkli/agent/app/tools/schemas";
+import {
+  chartTypeEnum,
+  chartColorEnum,
+  chartSeriesSchema,
+  validateChartData
+} 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 to update"),
+  title: z.string().optional().describe("Chart title"),
+  type: chartTypeEnum.optional().describe("Chart type"),
+  categories: z.array(z.string()).min(1).optional().describe(
+    "Category labels (x-axis or slice names). Replaces all existing categories."
+  ),
+  series: z.array(chartSeriesSchema).min(1).optional().describe("Data series. Replaces all existing 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().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 default defineBlokkliAgentTool({
+  name: "update_chart",
+  description: "Update an existing chart. Provide only the properties you want to change \u2014 they will be merged with the current chart data. Arrays (series, categories, footnotes) are replaced entirely when provided, not merged element-by-element.",
+  category: "mutation",
+  prunedSummary: (r) => r.success ? "updated chart" : "rejected",
+  modes: ["editing"],
+  lazy: true,
+  label($t) {
+    return $t("aiAgentUpdateChartRunning", "Updating chart...");
+  },
+  paramsSchema,
+  resultSchema: mutationResultSchema,
+  requiredAdapterMethods: ["updateOptions"],
+  execute(ctx, params) {
+    const { blocks, state } = 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 "${fragmentBlockBundle}".`
+      };
+    }
+    if (block.fragment?.name !== "blokkli_chart") {
+      return {
+        error: `Fragment "${params.uuid}" is a "${block.fragment?.name}", not a "blokkli_chart".`
+      };
+    }
+    let current;
+    const item = state.getFieldListItem(params.uuid);
+    const rawData = item?.options?.data;
+    if (rawData) {
+      try {
+        current = JSON.parse(rawData);
+      } catch {
+        current = getDefaultChartData(COLORS);
+      }
+    } else {
+      current = getDefaultChartData(COLORS);
+    }
+    const merged = {
+      title: params.title !== void 0 ? params.title : current.title,
+      type: params.type !== void 0 ? params.type : current.type,
+      categories: params.categories !== void 0 ? params.categories : current.categories,
+      series: params.series !== void 0 ? params.series.map((s) => ({
+        name: s.name,
+        color: s.color || "",
+        data: s.data
+      })) : current.series,
+      categoryColors: params.categoryColors !== void 0 ? params.categoryColors : current.categoryColors,
+      footnotes: params.footnotes !== void 0 ? params.footnotes : current.footnotes,
+      typeOptions: params.typeOptions !== void 0 ? params.typeOptions : current.typeOptions || {}
+    };
+    const result = validateChartData(merged, COLORS);
+    if ("error" in result) return result;
+    const { $t } = ctx.app;
+    return {
+      type: "options",
+      label: $t("aiAgentUpdateChartDone", "Updated chart"),
+      affectedUuids: [params.uuid],
+      apply: (adapter) => adapter.updateOptions([
+        {
+          uuid: params.uuid,
+          key: "data",
+          value: JSON.stringify(result.data)
+        }
+      ])
+    };
+  }
+});

package/dist/modules/charts/runtime/chartTypes/area.d.ts

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

package/dist/modules/charts/runtime/chartTypes/area.js

@@ -0,0 +1,68 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  strokeWidthOptions,
+  buildStrokeWidthOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t),
+    strokeWidthOptions($t)
+  );
+  return {
+    id: "area",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      const strokeWidth = buildStrokeWidthOptions(ctx.typeOptions);
+      return {
+        stroke: {
+          curve: ctx.typeOptions.curved ? "smooth" : "straight",
+          ...strokeWidth.stroke
+        },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeArea", "Area"),
+      icon: "bk_mdi_area_chart",
+      options: {
+        curved: {
+          type: "checkbox",
+          label: $t("chartsAreaCurved", "Smooth curves"),
+          default: false,
+          group: "display"
+        },
+        markers: {
+          type: "checkbox",
+          label: $t("chartsAreaMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/bar.d.ts

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

package/dist/modules/charts/runtime/chartTypes/bar.js

@@ -0,0 +1,76 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t)
+  );
+  return {
+    id: "bar",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        chart: { stacked: !!ctx.typeOptions.stacked },
+        plotOptions: {
+          bar: {
+            horizontal: !!ctx.typeOptions.horizontal,
+            borderRadius: Number(ctx.typeOptions.borderRadius) || 0
+          }
+        },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeBar", "Bar"),
+      icon: "bk_mdi_bar_chart",
+      options: {
+        stacked: {
+          type: "checkbox",
+          label: $t("chartsBarStacked", "Stacked"),
+          default: false,
+          group: "display"
+        },
+        horizontal: {
+          type: "checkbox",
+          label: $t("chartsBarHorizontal", "Horizontal"),
+          default: false,
+          group: "display"
+        },
+        borderRadius: {
+          type: "radios",
+          label: $t("chartsBorderRadius", "Corner radius"),
+          default: "0",
+          options: {
+            "0": $t("chartsBorderRadiusNone", "None"),
+            "4": $t("chartsBorderRadiusSmall", "Small"),
+            "8": $t("chartsBorderRadiusLarge", "Large")
+          }
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/define.d.ts

@@ -0,0 +1,2 @@
+import type { ChartTypeFactory } from './types.js';
+export declare function defineChartType(factory: ChartTypeFactory): ChartTypeFactory;

package/dist/modules/charts/runtime/chartTypes/define.js

@@ -0,0 +1,3 @@
+export function defineChartType(factory) {
+  return factory;
+}

package/dist/modules/charts/runtime/chartTypes/donut.d.ts

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

package/dist/modules/charts/runtime/chartTypes/donut.js

@@ -0,0 +1,45 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "donut",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    const show = !!ctx.typeOptions.showTotal;
+    return {
+      labels: ctx.categories,
+      dataLabels: { enabled: !!ctx.typeOptions.showLabels },
+      plotOptions: {
+        pie: {
+          donut: {
+            labels: {
+              show,
+              total: { show }
+            }
+          }
+        }
+      }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypeDonut", "Donut"),
+    icon: "bk_mdi_donut_large",
+    options: {
+      showTotal: {
+        type: "checkbox",
+        label: $t("chartsDonutShowTotal", "Show total"),
+        default: false,
+        group: "display"
+      },
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsDonutShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      }
+    }
+  }
+}));

package/dist/modules/charts/runtime/chartTypes/heatmap.d.ts

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

package/dist/modules/charts/runtime/chartTypes/heatmap.js

@@ -0,0 +1,54 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    legendOptions($t),
+    gridOptions($t)
+  );
+  return {
+    id: "heatmap",
+    hasMultipleSeries: true,
+    hasSeriesColors: false,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        dataLabels: { enabled: true },
+        plotOptions: {
+          heatmap: {
+            colorScale: { ranges: [] }
+          }
+        },
+        xaxis: {
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({
+        name: s.name,
+        data: s.data.map((value, i) => ({
+          x: ctx.categories[i] || "",
+          y: value
+        }))
+      }));
+    },
+    editor: {
+      label: $t("chartsTypeHeatmap", "Heatmap"),
+      icon: "bk_mdi_grid_view",
+      options: {
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/index.d.ts

@@ -0,0 +1,21 @@
+import type { TranslateFunction, ChartTypeDefinition } from './types.js';
+/**
+ * Get a chart type definition using fallback labels (no real translations).
+ * Used by ChartRenderer which runs in both edit mode and production.
+ */
+export declare function getChartTypeRuntime(id: string): ChartTypeDefinition | undefined;
+/**
+ * Get all chart type definitions with translated labels.
+ * Used by editor components only.
+ */
+export declare function getChartTypes($t: TranslateFunction): ChartTypeDefinition[];
+/**
+ * Get a single chart type definition with translated labels.
+ * Used by editor components only.
+ */
+export declare function getChartType(id: string, $t: TranslateFunction): ChartTypeDefinition | undefined;
+/**
+ * Get the default type options for a chart type.
+ */
+export declare function getDefaultTypeOptions(id: string): Record<string, unknown>;
+export type { ChartTypeDefinition, ChartBuildContext, TranslateFunction, } from './types.js';

package/dist/modules/charts/runtime/chartTypes/index.js

@@ -0,0 +1,47 @@
+import barFactory from "./bar.js";
+import lineFactory from "./line.js";
+import areaFactory from "./area.js";
+import pieFactory from "./pie.js";
+import donutFactory from "./donut.js";
+import heatmapFactory from "./heatmap.js";
+import radialBarFactory from "./radialBar.js";
+import radarFactory from "./radar.js";
+const factories = [
+  barFactory,
+  lineFactory,
+  pieFactory,
+  areaFactory,
+  donutFactory,
+  heatmapFactory,
+  radialBarFactory,
+  radarFactory
+];
+const noopT = (_key, fallback) => fallback;
+const runtimeCache = {};
+function ensureRuntimeCache() {
+  if (Object.keys(runtimeCache).length === 0) {
+    for (const factory of factories) {
+      const def = factory(noopT);
+      runtimeCache[def.id] = def;
+    }
+  }
+}
+export function getChartTypeRuntime(id) {
+  ensureRuntimeCache();
+  return runtimeCache[id];
+}
+export function getChartTypes($t) {
+  return factories.map((factory) => factory($t));
+}
+export function getChartType(id, $t) {
+  return getChartTypes($t).find((def) => def.id === id);
+}
+export function getDefaultTypeOptions(id) {
+  const def = getChartTypeRuntime(id);
+  if (!def) return {};
+  const defaults = {};
+  for (const [key, opt] of Object.entries(def.editor.options)) {
+    defaults[key] = opt.default;
+  }
+  return defaults;
+}

package/dist/modules/charts/runtime/chartTypes/line.d.ts

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

package/dist/modules/charts/runtime/chartTypes/line.js

@@ -0,0 +1,68 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  strokeWidthOptions,
+  buildStrokeWidthOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t),
+    strokeWidthOptions($t)
+  );
+  return {
+    id: "line",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      const strokeWidth = buildStrokeWidthOptions(ctx.typeOptions);
+      return {
+        stroke: {
+          curve: ctx.typeOptions.curved ? "smooth" : "straight",
+          ...strokeWidth.stroke
+        },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeLine", "Line"),
+      icon: "bk_mdi_show_chart",
+      options: {
+        curved: {
+          type: "checkbox",
+          label: $t("chartsLineCurved", "Smooth curves"),
+          default: false,
+          group: "display"
+        },
+        markers: {
+          type: "checkbox",
+          label: $t("chartsLineMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/pie.d.ts

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

package/dist/modules/charts/runtime/chartTypes/pie.js

@@ -0,0 +1,28 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "pie",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    return {
+      labels: ctx.categories,
+      dataLabels: { enabled: !!ctx.typeOptions.showLabels }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypePie", "Pie"),
+    icon: "bk_mdi_pie_chart",
+    options: {
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsPieShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      }
+    }
+  }
+}));

package/dist/modules/charts/runtime/chartTypes/radar.d.ts

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