@blokkli/editor 2.0.0-alpha.62 → 2.0.0-alpha.63

package/dist/modules/agent/runtime/app/tools/fieldDiffApproval.js

@@ -1,3 +1,4 @@
+import { flattenSegments, reassembleValue } from "#blokkli/editor/helpers/diff";
 export function skippedFieldsMessage(skipped) {
   if (!skipped.length) return void 0;
   const list = skipped.map((s) => `"${s.uuid}" ${s.fieldName} (${s.reason})`).join(", ");
@@ -10,55 +11,164 @@ export function appendAgentNote(message, note) {
 
 ${note}`;
 }
+export function decideFieldUpdates(items, selected, reasons) {
+  const rejectedByUser = {};
+  const updates = [];
+  let acceptedCount = 0;
+  let totalCount = 0;
+  for (const item of items) {
+    if (item.segments) {
+      const atoms = flattenSegments(item.segments).filter(
+        (s) => s.status !== "matched" || s.beforeHtml !== s.afterHtml
+      );
+      totalCount += atoms.length;
+      const acceptedById = {};
+      const rejectedSegments = [];
+      let accepted = 0;
+      for (const atom of atoms) {
+        const key = `${item.id}:${atom.id}`;
+        const isAccepted = selected[key] !== false;
+        acceptedById[atom.id] = isAccepted;
+        if (isAccepted) {
+          accepted++;
+        } else {
+          rejectedSegments.push({
+            tag: atom.tag,
+            beforeHtml: atom.beforeHtml,
+            afterHtml: atom.afterHtml,
+            status: atom.status,
+            reasonForRejection: reasons[key] || ""
+          });
+        }
+      }
+      acceptedCount += accepted;
+      if (accepted > 0) {
+        updates.push({
+          itemId: item.id,
+          uuid: item.uuid,
+          fieldName: item.fieldName,
+          fieldValue: reassembleValue(item.segments, acceptedById)
+        });
+      }
+      if (rejectedSegments.length > 0) {
+        const fields = rejectedByUser[item.uuid] ?? {};
+        fields[item.fieldName] = {
+          reasonForRejection: "",
+          partial: {
+            accepted,
+            total: atoms.length,
+            rejectedSegments
+          }
+        };
+        rejectedByUser[item.uuid] = fields;
+      }
+    } else {
+      totalCount++;
+      const key = String(item.id);
+      const isAccepted = selected[key] !== false;
+      if (isAccepted) {
+        acceptedCount++;
+        updates.push({
+          itemId: item.id,
+          uuid: item.uuid,
+          fieldName: item.fieldName,
+          fieldValue: item.value
+        });
+      } else {
+        const fields = rejectedByUser[item.uuid] ?? {};
+        fields[item.fieldName] = {
+          reasonForRejection: reasons[key] || ""
+        };
+        rejectedByUser[item.uuid] = fields;
+      }
+    }
+  }
+  return { updates, rejectedByUser, acceptedCount, totalCount };
+}
 export async function applyFieldDiffs(app, adapter, items, selected, reasons) {
   const { $t, state, context } = app;
   const entityUuid = context.value.entityUuid;
-  const rejectedByUser = {};
+  const decision = decideFieldUpdates(items, selected, reasons);
   const batchItems = [];
   const entityItems = [];
-  for (const item of items) {
-    if (!selected[item.id]) {
-      const fields = rejectedByUser[item.uuid] ?? {};
-      fields[item.fieldName] = { reasonForRejection: reasons[item.id] || "" };
-      rejectedByUser[item.uuid] = fields;
-      continue;
-    }
-    if (item.uuid === entityUuid) {
-      entityItems.push({ fieldName: item.fieldName, fieldValue: item.value });
+  const appliedByItemId = {};
+  for (const update of decision.updates) {
+    appliedByItemId[update.itemId] = update.fieldValue;
+    if (update.uuid === entityUuid) {
+      entityItems.push({
+        fieldName: update.fieldName,
+        fieldValue: update.fieldValue
+      });
     } else {
       batchItems.push({
-        uuid: item.uuid,
-        fieldName: item.fieldName,
-        fieldValue: item.value
+        uuid: update.uuid,
+        fieldName: update.fieldName,
+        fieldValue: update.fieldValue
       });
     }
   }
   await state.mutateWithLoadingState(
     () => adapter.updateFieldValueBatched({ items: batchItems, entityItems })
   );
-  const acceptedCount = batchItems.length + entityItems.length;
-  const label = acceptedCount === items.length ? $t(
+  const label = decision.acceptedCount === decision.totalCount ? $t(
     "aiAgentBatchRewriteAllApplied",
     "All @count changes applied"
-  ).replace("@count", String(acceptedCount)) : $t(
+  ).replace("@count", String(decision.acceptedCount)) : $t(
     "aiAgentBatchRewriteSomeApplied",
     "@applied of @total changes applied"
-  ).replace("@applied", String(acceptedCount)).replace("@total", String(items.length));
-  return { acceptedCount, rejectedByUser, label };
+  ).replace("@applied", String(decision.acceptedCount)).replace("@total", String(decision.totalCount));
+  return {
+    ...decision,
+    label,
+    appliedByItemId
+  };
 }
-export function rejectedWithoutReasonMessage(rejectedByUser) {
-  const rejected = [];
-  for (const [uuid, fields] of Object.entries(rejectedByUser)) {
+export function partialRejectionGuidance(rejected) {
+  const partials = [];
+  for (const [uuid, fields] of Object.entries(rejected)) {
     for (const [fieldName, v] of Object.entries(fields)) {
-      if (!v?.reasonForRejection) rejected.push({ uuid, fieldName });
+      if (v.partial && v.partial.accepted > 0) {
+        partials.push({ uuid, fieldName });
+      }
     }
   }
-  if (rejected.length === 1 || rejected.length === 2) {
-    const fieldList = rejected.map((r) => `"${r.fieldName}" of paragraph ${r.uuid}`).join(" and ");
-    return `The user rejected ${fieldList} without a reason. Use the ask_question tool to present the user with 2 or more alternative texts for each rejected field.`;
+  if (partials.length === 0) return void 0;
+  const fieldList = partials.map((p) => `"${p.fieldName}" (paragraph ${p.uuid})`).join(", ");
+  const noun = partials.length === 1 ? "This field was" : "These fields were";
+  return `${noun} updated with a hybrid value \u2014 accepted chunks plus the original content of the rejected ones: ${fieldList}. If you follow up on the rejected chunks, scope your change to those chunks only \u2014 use update_text_fields patch mode (operations) with search matching the rejected chunk's original content. Do NOT re-rewrite the whole field; the accepted chunks must stay byte-for-byte identical.`;
+}
+export function rejectedWithoutReasonMessage(rejected) {
+  const entries = [];
+  for (const [uuid, fields] of Object.entries(rejected)) {
+    for (const [fieldName, v] of Object.entries(fields)) {
+      if (v.partial) {
+        for (const seg of v.partial.rejectedSegments) {
+          if (!seg.reasonForRejection) {
+            entries.push({
+              kind: "segment",
+              uuid,
+              fieldName,
+              tag: seg.tag,
+              status: seg.status
+            });
+          }
+        }
+      } else if (!v.reasonForRejection) {
+        entries.push({ kind: "field", uuid, fieldName });
+      }
+    }
+  }
+  if (entries.length === 0) return void 0;
+  const describe = (e) => e.kind === "segment" ? `a <${e.tag}> ${e.status === "matched" ? "change" : e.status === "inserted" ? "insertion" : "deletion"} in "${e.fieldName}" of paragraph ${e.uuid}` : `"${e.fieldName}" of paragraph ${e.uuid}`;
+  if (entries.length === 1) {
+    const it = entries[0];
+    if (it.kind === "segment") {
+      return `The user rejected ${describe(it)} without a reason. Use the ask_question tool to present 2 or more alternative wordings for that specific chunk \u2014 do not rewrite the whole field.`;
+    }
+    return `The user rejected ${describe(it)} without a reason. Use the ask_question tool to present the user with 2 or more alternative texts.`;
   }
-  if (rejected.length > 2) {
-    return "Some changes were rejected without a reason. Ask the user what they would like to change instead.";
+  if (entries.length === 2) {
+    return `The user rejected ${describe(entries[0])} and ${describe(entries[1])} without a reason. Use the ask_question tool to present 2 or more alternative texts for each.`;
   }
-  return void 0;
+  return "Some changes were rejected without a reason. Ask the user what they would like to change instead.";
 }

package/dist/modules/agent/runtime/app/tools/schemas.d.ts

@@ -86,15 +86,25 @@ export declare const optionValueSchema: z.ZodUnion<readonly [z.ZodString, z.ZodB
  * - `"before:<UUID>"` — insert before the block with the given UUID
  */
 export declare const positionSchema: z.ZodDefault<z.ZodOptional<z.ZodString>>;
-/**
- * Shared result schema for the interactive field-diff rewrite tools
- * (`update_text_fields`, `delegate_text_rewrite`). Both present a diff approval
- * UI and report what the user accepted/rejected.
- */
 export declare const fieldDiffResultSchema: z.ZodObject<{
     acceptedCount: z.ZodNumber;
     rejectedByUser: z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodObject<{
         reasonForRejection: z.ZodString;
+        partial: z.ZodOptional<z.ZodObject<{
+            accepted: z.ZodNumber;
+            total: z.ZodNumber;
+            rejectedSegments: z.ZodArray<z.ZodObject<{
+                tag: z.ZodString;
+                beforeHtml: z.ZodString;
+                afterHtml: z.ZodString;
+                status: z.ZodEnum<{
+                    deleted: "deleted";
+                    matched: "matched";
+                    inserted: "inserted";
+                }>;
+                reasonForRejection: z.ZodString;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>>;
     label: z.ZodString;
     agentMessage: z.ZodOptional<z.ZodString>;

package/dist/modules/agent/runtime/app/tools/schemas.js

@@ -68,20 +68,37 @@ export const optionValueSchema = z.union([
 export const positionSchema = z.string().optional().default("end").describe(
   'Where to place the paragraph(s). "start" = beginning, "end" (default) = append at end, "after:<UUID>" = after a specific paragraph, "before:<UUID>" = before a specific paragraph.'
 );
+const rejectedSegmentSchema = z.object({
+  tag: z.string().describe('HTML tag of the rejected chunk (e.g. "p", "li", "h2")'),
+  beforeHtml: z.string().describe(
+    "The original innerHTML kept in the field (empty for newly inserted chunks that were rejected and dropped)"
+  ),
+  afterHtml: z.string().describe(
+    "The innerHTML you proposed for this chunk and the user rejected (empty for deletions that were rejected and restored)"
+  ),
+  status: z.enum(["matched", "inserted", "deleted"]).describe(
+    "Whether your proposal modified an existing chunk (matched), added a new one (inserted), or removed one (deleted)"
+  ),
+  reasonForRejection: z.string().describe("Per-chunk rejection reason; empty if none given")
+});
+const fieldRejectionSchema = z.object({
+  reasonForRejection: z.string().describe(
+    "Field-level rejection reason; empty when no reason given or when rejection is per-chunk (see `partial`)"
+  ),
+  partial: z.object({
+    accepted: z.number().describe("Number of changed chunks in this field the user accepted"),
+    total: z.number().describe("Total number of changed chunks in this field"),
+    rejectedSegments: z.array(rejectedSegmentSchema).describe(
+      "Details for each rejected chunk. The field still gets updated with a hybrid value combining the accepted chunks and the original content of the rejected ones."
+    )
+  }).optional().describe(
+    "Present when the user evaluated chunk-by-chunk. When `accepted > 0`, the field was updated with a hybrid value; when `accepted === 0`, every chunk was rejected and the field stayed at its original value."
+  )
+});
 export const fieldDiffResultSchema = z.object({
   acceptedCount: z.number().describe("Number of changes accepted by the user"),
-  rejectedByUser: z.record(
-    z.string(),
-    z.record(
-      z.string(),
-      z.object({
-        reasonForRejection: z.string().describe(
-          "Reason provided by the user for rejecting, empty if no reason given"
-        )
-      })
-    )
-  ).describe(
-    "Map of rejected paragraph UUID to field name to rejection details"
+  rejectedByUser: z.record(z.string(), z.record(z.string(), fieldRejectionSchema)).describe(
+    "Map of paragraph UUID \u2192 field name \u2192 rejection details. A field appears here when at least one chunk was rejected (or, for non-chunked fields, when the whole field was rejected)."
   ),
   label: z.string().describe("Human-readable summary shown in the UI"),
   agentMessage: z.string().optional().describe(

package/dist/modules/agent/runtime/app/tools/search_text/index.js

@@ -57,7 +57,7 @@ export default defineBlokkliAgentTool({
     const getBlockOwnText = (el) => {
       if (!el) return "";
       const clone = el.cloneNode(true);
-      const nestedBlocks = clone.querySelectorAll("[data-item-bundle]");
+      const nestedBlocks = clone.querySelectorAll("[data-bk-uuid]");
       nestedBlocks.forEach((nested) => nested.remove());
       const altTexts = element.queryAll(clone, "img", "searchTextAlt", (img) => {
         if (img instanceof HTMLImageElement) {

package/dist/modules/agent/runtime/app/tools/update_text_fields/Component.d.vue.ts

@@ -9,6 +9,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;
@@ -19,6 +30,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;

package/dist/modules/agent/runtime/app/tools/update_text_fields/Component.vue

@@ -11,10 +11,12 @@
 <script setup>
 import { useBlokkli, ref, onMounted } from "#imports";
 import { DiffApproval } from "#blokkli/editor/components";
+import { splitIntoSegments } from "#blokkli/editor/helpers/diff";
 import { applyOperations, resolveHost as resolveBlockHost } from "../helpers";
 import {
   applyFieldDiffs,
   rejectedWithoutReasonMessage,
+  partialRejectionGuidance,
   skippedFieldsMessage,
   appendAgentNote
 } from "../fieldDiffApproval";
@@ -63,6 +65,17 @@ function resolveFieldLabel(uuid, fieldName) {
   );
   return config?.label || fieldName;
 }
+function getFieldType(uuid, fieldName) {
+  const host = resolveHost(uuid);
+  if (!host) return null;
+  const cfg = types.editableFieldConfig.forName(
+    host.entityType,
+    host.bundle,
+    fieldName
+  );
+  if (!cfg || cfg.type === "table") return null;
+  return cfg.type === "plain" ? "plain" : "markup";
+}
 function getCurrentValue(uuid, fieldName) {
   const host = resolveHost(uuid);
   if (!host) return null;
@@ -72,27 +85,29 @@ function getCurrentValue(uuid, fieldName) {
     uuid
   });
   if (!el) return null;
-  const cfg = types.editableFieldConfig.forName(
-    host.entityType,
-    host.bundle,
-    fieldName
-  );
-  if (!cfg || cfg.type === "table") return null;
-  return cfg.type === "plain" ? el.textContent || "" : el.innerHTML;
+  const fieldType = getFieldType(uuid, fieldName);
+  if (fieldType === null) return null;
+  return fieldType === "plain" ? el.textContent || "" : el.innerHTML;
 }
 let idCounter = 0;
 const beforeValues = /* @__PURE__ */ new Map();
 function buildItems() {
   const result = [];
+  const pushItem = (uuid, fieldName, value, fieldType) => {
+    result.push({
+      id: idCounter++,
+      uuid,
+      fieldName,
+      fieldLabel: resolveFieldLabel(uuid, fieldName),
+      value,
+      fieldType
+    });
+  };
   if (props.params.updates) {
     for (const { uuid, fieldName, value } of props.params.updates) {
-      result.push({
-        id: idCounter++,
-        uuid,
-        fieldName,
-        fieldLabel: resolveFieldLabel(uuid, fieldName),
-        value
-      });
+      const fieldType = getFieldType(uuid, fieldName);
+      if (fieldType === null) continue;
+      pushItem(uuid, fieldName, value, fieldType);
     }
   }
   if (props.params.operations?.length) {
@@ -113,46 +128,55 @@ function buildItems() {
     for (const { uuid, fieldName, ops } of grouped.values()) {
       const current = getCurrentValue(uuid, fieldName);
       if (current === null) continue;
+      const fieldType = getFieldType(uuid, fieldName);
+      if (fieldType === null) continue;
       const newValue = applyOperations(current, ops);
       if (newValue === current) continue;
-      result.push({
-        id: idCounter++,
-        uuid,
-        fieldName,
-        fieldLabel: resolveFieldLabel(uuid, fieldName),
-        value: newValue
-      });
+      pushItem(uuid, fieldName, newValue, fieldType);
     }
   }
   return result;
 }
-const items = buildItems().filter((item) => {
-  const current = getCurrentValue(item.uuid, item.fieldName);
+const items = [];
+for (const draft of buildItems()) {
+  const current = getCurrentValue(draft.uuid, draft.fieldName);
   if (current !== null) {
-    beforeValues.set(item.id, current);
+    beforeValues.set(draft.id, current);
+    if (current === draft.value) continue;
   }
-  return current === null || current !== item.value;
-});
+  const segments = current !== null ? splitIntoSegments(current, draft.value, draft.fieldType) ?? void 0 : void 0;
+  items.push({
+    id: draft.id,
+    uuid: draft.uuid,
+    fieldName: draft.fieldName,
+    fieldLabel: draft.fieldLabel,
+    value: draft.value,
+    segments
+  });
+}
 async function applySelected(data) {
   const { selected, reasons } = data;
   isApplying.value = true;
-  const { acceptedCount, rejectedByUser, label } = await applyFieldDiffs(
+  const { acceptedCount, rejectedByUser, label, appliedByItemId } = await applyFieldDiffs(
     blokkli,
     props.context.adapter,
     items,
     selected,
     reasons
   );
-  const _details = items.filter((item) => selected[item.id]).map((item) => ({
+  const _details = items.filter((item) => appliedByItemId[item.id] !== void 0).map((item) => ({
     fieldLabel: item.fieldLabel,
     before: beforeValues.get(item.id) || "",
-    after: item.value
+    after: appliedByItemId[item.id]
   }));
   emitDone({
     acceptedCount,
     rejectedByUser,
     label,
-    agentMessage: rejectedWithoutReasonMessage(rejectedByUser),
+    agentMessage: appendAgentNote(
+      partialRejectionGuidance(rejectedByUser),
+      rejectedWithoutReasonMessage(rejectedByUser)
+    ),
     historyIndex: state.currentMutationIndex.value,
     _details
   });

package/dist/modules/agent/runtime/app/tools/update_text_fields/Component.vue.d.ts

@@ -9,6 +9,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;
@@ -19,6 +30,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;

package/dist/modules/agent/runtime/app/tools/update_text_fields/index.d.ts

@@ -46,6 +46,21 @@ export declare const resultSchema: z.ZodObject<{
     acceptedCount: z.ZodNumber;
     rejectedByUser: z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodObject<{
         reasonForRejection: z.ZodString;
+        partial: z.ZodOptional<z.ZodObject<{
+            accepted: z.ZodNumber;
+            total: z.ZodNumber;
+            rejectedSegments: z.ZodArray<z.ZodObject<{
+                tag: z.ZodString;
+                beforeHtml: z.ZodString;
+                afterHtml: z.ZodString;
+                status: z.ZodEnum<{
+                    deleted: "deleted";
+                    matched: "matched";
+                    inserted: "inserted";
+                }>;
+                reasonForRejection: z.ZodString;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>>;
     label: z.ZodString;
     agentMessage: z.ZodOptional<z.ZodString>;

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

@@ -25,7 +25,7 @@ export default defineBlokkliAgentSystemPrompt({
 - The available options change based on various factors, such as the value of other options, the specific state of the paragraph's field values, etc. Always first check which options are available.
 
 ### EXTRA UX FEATURES
-- You can create markdown links for a specific paragraph by using the paragraph UUID! For example: "You should rewrite [this text](#UUID)". This will be converted to a HTML link the user can click on!
+- To reference a specific paragraph, write its bare UUID inline. For example: "You should rewrite aaaaaaaa-1111-2222-3333-444444444444." The frontend renders the UUID as a clickable chip labelled with the paragraph's bundle. Do **not** wrap the UUID in markdown link syntax \u2014 emit the UUID on its own.
 - You can address the user using the special "${PLACEHOLDER_USER_NAME}" placeholder for a friendly welcome message. This is magically replaced in the frontend with the name of the user!
 
 ### History and Undo/Redo

package/dist/modules/agent/runtime/server/default-system-prompts/important-rules.js

@@ -17,6 +17,7 @@ export default defineBlokkliAgentSystemPrompt({
 - The user's first message includes their selection inline as "[User has selected: <bundle> (<uuid>), ...]". Treat that as the target of vague references like "this", "these", "translate this", "make this bigger" \u2014 no extra tool call needed to identify them.
 - For LATER messages where the prompt implies acting on the current selection but the first-message annotation is absent or stale, call "get_selected_paragraphs" \u2014 the user may have changed their selection since the conversation started.
 - You can output text as you please, markdown is allowed!
+- DO NOT use emojis when writing content, unless explicitly told to do so!
 `;
   }
 });

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

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import type { BlokkliChartData } from '#blokkli/charts/types';
 import type { McpToolContext } from '#blokkli/agent/app/types';
-import type { ColorOption } from '#blokkli/editor/types/config';
+import type { ColorOption } from '#blokkli/types/colors';
 export declare const chartTypeEnum: z.ZodEnum<{
     [x: string]: string;
 }>;

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

@@ -1,11 +1,17 @@
 import { z } from "zod";
+import { isColorIdValid } from "#blokkli/helpers/colors";
 import { getColorIdAtIndex } from "../../helpers/index.js";
 import { getChartTypeRuntime, getDefaultTypeOptions } from "../../chart-types/index.js";
 import { colorOptions } from "#blokkli-build/editor-config";
 import { definitionIds } from "#blokkli-build/charts-definitions";
 const agentChartTypeIds = definitionIds.filter((id) => id !== "advanced");
 export const chartTypeEnum = z.enum(agentChartTypeIds);
-const colorIds = Object.keys(colorOptions);
+const colorIds = Object.entries(colorOptions).flatMap(([id, option]) => {
+  if ("shades" in option) {
+    return Object.keys(option.shades).map((shade) => `${id}.${shade}`);
+  }
+  return [id];
+});
 export const chartColorEnum = z.enum(colorIds);
 export const chartSeriesSchema = z.object({
   name: z.string().describe("Series name (shown in legend)"),
@@ -89,8 +95,9 @@ export function validateAdvancedConfig(value) {
   return { value };
 }
 export function validateChartData(data, options) {
-  const validIds = new Set(options.map((c) => c.id));
-  const availableIds = options.map((c) => c.id);
+  const availableIds = options.flatMap(
+    (c) => c.shades?.length ? c.shades.map((s) => `${c.id}.${s.id}`) : [c.id]
+  );
   for (let i = 0; i < data.series.length; i++) {
     const series = data.series[i];
     if (series.data.length !== data.categories.length) {
@@ -103,7 +110,7 @@ export function validateChartData(data, options) {
     const series = data.series[i];
     if (!series.color) {
       series.color = getColorIdAtIndex(i, options);
-    } else if (!validIds.has(series.color)) {
+    } else if (!isColorIdValid(series.color, options)) {
       return {
         error: `Invalid color ID "${series.color}" on series "${series.name}". Available colors: ${availableIds.join(", ")}`
       };
@@ -118,7 +125,7 @@ export function validateChartData(data, options) {
     } else {
       for (let i = 0; i < data.categoryColors.length; i++) {
         const id = data.categoryColors[i];
-        if (!validIds.has(id)) {
+        if (!isColorIdValid(id, options)) {
           return {
             error: `Invalid categoryColor ID "${id}" at index ${i}. Available colors: ${availableIds.join(", ")}`
           };