storybook 10.4.2 → 10.5.7

package/dist/_browser-chunks/{Color-QOVTYR6E.js → Color-BT4BG5DT.js}

@@ -1,11 +1,11 @@
 import {
   getControlId
-} from "./chunk-4AB3IUR2.js";
+} from "./chunk-YPBWNTGF.js";
 import "./chunk-NZMVUW5T.js";
 import {
   __commonJS,
   __toESM
-} from "./chunk-A242L54C.js";
+} from "./chunk-IMSF75WX.js";
 
 // ../../node_modules/color-name/index.js
 var require_color_name = __commonJS({
@@ -611,7 +611,7 @@ function partialImpl(func, placeholder, ...partialArgs) {
   };
   return func.prototype && (partialed.prototype = Object.create(func.prototype)), partialed;
 }
-var placeholderSymbol = Symbol("partial.placeholder");
+var placeholderSymbol = /* @__PURE__ */ Symbol("partial.placeholder");
 partial.placeholder = placeholderSymbol;
 
 // ../../node_modules/es-toolkit/dist/function/partialRight.mjs
@@ -625,7 +625,7 @@ function partialRightImpl(func, placeholder, ...partialArgs) {
   };
   return func.prototype && (partialedRight.prototype = Object.create(func.prototype)), partialedRight;
 }
-var placeholderSymbol2 = Symbol("partialRight.placeholder");
+var placeholderSymbol2 = /* @__PURE__ */ Symbol("partialRight.placeholder");
 partialRight.placeholder = placeholderSymbol2;
 
 // ../../node_modules/es-toolkit/dist/function/retry.mjs
@@ -1022,6 +1022,7 @@ var Wrapper = styled.div({
 }, ColorControl = ({
   name,
   storyId,
+  controlsId,
   value: initialValue,
   onChange,
   onFocus,
@@ -1029,12 +1030,13 @@ var Wrapper = styled.div({
   presetColors,
   maxPresetColors,
   startOpen = !1,
-  argType
+  argType,
+  required
 }) => {
   let debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]), { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
     initialValue,
     debouncedOnChange
-  ), { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace, maxPresetColors), Picker = ColorPicker[colorSpace], readOnly = !!argType?.table?.readonly, controlId = getControlId(name, storyId);
+  ), { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace, maxPresetColors), Picker = ColorPicker[colorSpace], readOnly = !!argType?.table?.readonly, controlId = getControlId(name, storyId, controlsId);
   return React.createElement(Wrapper, null, React.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React.createElement(
     Input,
     {
@@ -1043,6 +1045,7 @@ var Wrapper = styled.div({
       onChange: (e2) => updateValue(e2.target.value),
       onFocus: (e2) => e2.target.select(),
       readOnly,
+      "aria-required": required || void 0,
       placeholder: "Choose color..."
     }
   ), React.createElement(

package/dist/_browser-chunks/{WithTooltip-65CFNBJE.js → WithTooltip-7X4HQR7L.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk-LE2LTDW3.js";
 import {
   require_memoizerific
-} from "./chunk-ZCFV7BZB.js";
+} from "./chunk-DRQKCCAG.js";
 import {
   __commonJS,
   __toESM
-} from "./chunk-A242L54C.js";
+} from "./chunk-IMSF75WX.js";
 
 // ../../node_modules/react-fast-compare/index.js
 var require_react_fast_compare = __commonJS({

package/dist/_browser-chunks/{chunk-QIIJQEST.js → chunk-4PUEAVR7.js}

@@ -1,36 +1,12 @@
 import {
-  StatusTypeIdMismatchError
-} from "./chunk-C3TKC4WX.js";
-import {
-  StatusTypeIdMismatchError as StatusTypeIdMismatchError2
+  StatusTypeIdMismatchError as StatusTypeIdMismatchError3
 } from "./chunk-MFQQ5L5I.js";
 import {
-  StorybookError
-} from "./chunk-2HVKLHKJ.js";
-import {
-  require_picocolors_browser
-} from "./chunk-7YGTGCDG.js";
+  StatusTypeIdMismatchError
+} from "./chunk-KUHYVZJN.js";
 import {
-  __toESM
-} from "./chunk-A242L54C.js";
-
-// src/server-errors.ts
-var import_picocolors = __toESM(require_picocolors_browser(), 1);
-var StatusTypeIdMismatchError3 = class extends StorybookError {
-  constructor(data) {
-    super({
-      name: "StatusTypeIdMismatchError",
-      category: "CORE-SERVER" /* CORE_SERVER */,
-      code: 16,
-      message: `Status has typeId "${data.status.typeId}" but was added to store with typeId "${data.typeId}". Full status: ${JSON.stringify(
-        data.status,
-        null,
-        2
-      )}`
-    });
-    this.data = data;
-  }
-};
+  StatusTypeIdMismatchError as StatusTypeIdMismatchError2
+} from "./chunk-IUGBVGDA.js";
 
 // src/shared/status-store/index.ts
 var STATUS_VALUE_PREFIX = "status-value:", STATUS_VALUES = [
@@ -39,6 +15,7 @@ var STATUS_VALUE_PREFIX = "status-value:", STATUS_VALUES = [
   "status-value:new",
   "status-value:modified",
   "status-value:affected",
+  "status-value:reviewing",
   "status-value:warning",
   "status-value:error",
   "status-value:unknown"
@@ -47,7 +24,10 @@ var STATUS_VALUE_PREFIX = "status-value:", STATUS_VALUES = [
   let candidate = `${STATUS_VALUE_PREFIX}${shortName}`;
   return STATUS_VALUES.includes(candidate) ? candidate : void 0;
 }, statusValueShortName = (value) => value === "status-value:affected" ? "related" : value.slice(STATUS_VALUE_PREFIX.length);
-var CHANGE_DETECTION_STATUS_TYPE_ID = "storybook/change-detection", UNIVERSAL_STATUS_STORE_OPTIONS = {
+var CHANGE_DETECTION_STATUS_TYPE_ID = "storybook/change-detection", REVIEW_STATUS_TYPE_ID = "storybook/review", NON_AGGREGATED_STATUS_TYPE_IDS = [
+  CHANGE_DETECTION_STATUS_TYPE_ID,
+  REVIEW_STATUS_TYPE_ID
+], UNIVERSAL_STATUS_STORE_OPTIONS = {
   id: "storybook/status",
   leader: !0,
   initialState: {}
@@ -116,18 +96,17 @@ function createStatusStore({
           if (status.typeId !== typeId)
             switch (environment) {
               case "server":
-                throw new StatusTypeIdMismatchError3({
+                throw new StatusTypeIdMismatchError({
                   status,
                   typeId
                 });
               case "manager":
-                throw new StatusTypeIdMismatchError({
+                throw new StatusTypeIdMismatchError2({
                   status,
                   typeId
                 });
-              case "preview":
               default:
-                throw new StatusTypeIdMismatchError2({
+                throw new StatusTypeIdMismatchError3({
                   status,
                   typeId
                 });
@@ -168,6 +147,8 @@ export {
   toStatusValue,
   statusValueShortName,
   CHANGE_DETECTION_STATUS_TYPE_ID,
+  REVIEW_STATUS_TYPE_ID,
+  NON_AGGREGATED_STATUS_TYPE_IDS,
   UNIVERSAL_STATUS_STORE_OPTIONS,
   countStatusesByValue,
   createStatusStore

package/dist/_browser-chunks/chunk-5FAQJLSD.js

@@ -0,0 +1,101 @@
+import {
+  array,
+  custom,
+  looseObject,
+  object,
+  optional,
+  record,
+  string,
+  undefined_,
+  void_
+} from "./chunk-W6Y3UHOT.js";
+
+// src/measure/constants.ts
+var ADDON_ID = "storybook/measure-addon", TOOL_ID = `${ADDON_ID}/tool`, PARAM_KEY = "measureEnabled", EVENTS = {
+  RESULT: `${ADDON_ID}/result`,
+  REQUEST: `${ADDON_ID}/request`,
+  CLEAR: `${ADDON_ID}/clear`
+};
+
+// src/outline/constants.ts
+var ADDON_ID2 = "storybook/outline", PARAM_KEY2 = "outline";
+
+// src/shared/open-service/services/docgen/definition.ts
+import { defineService } from "storybook/open-service";
+
+// src/shared/open-service/services/docgen/paths.ts
+function docgenQueryStaticPath(id) {
+  return `${id}.json`;
+}
+
+// src/shared/open-service/services/docgen/definition.ts
+var docgenInputSchema = object({ id: string() }), argTypesSchema = custom(
+  (value) => typeof value == "object" && value !== null && !Array.isArray(value)
+), docgenErrorSchema = object({
+  name: string(),
+  message: string()
+}), docgenJsDocTagsSchema = record(string(), array(string())), docgenComponentFields = {
+  name: string(),
+  path: string(),
+  description: optional(string()),
+  summary: optional(string()),
+  jsDocTags: docgenJsDocTagsSchema,
+  argTypes: optional(argTypesSchema),
+  error: optional(docgenErrorSchema)
+}, docgenSubcomponentFields = {
+  ...docgenComponentFields,
+  import: optional(string())
+}, docgenSubcomponentSchema = looseObject(docgenSubcomponentFields), docgenPayloadSchema = looseObject({
+  id: string(),
+  ...docgenComponentFields,
+  subcomponents: optional(record(string(), docgenSubcomponentSchema))
+}), docgenOutputSchema = optional(docgenPayloadSchema), docgenServiceDef = defineService({
+  id: "core/docgen",
+  description: "Component documentation (name, description, props, JSDoc tags) keyed by component id.",
+  initialState: { components: {} },
+  queries: {
+    docgen: {
+      description: "Returns the docgen payload for one component id, or undefined when not loaded.",
+      input: docgenInputSchema,
+      output: docgenOutputSchema,
+      handler: (input, ctx) => ctx.self.state.components[input.id],
+      load: async (input, ctx) => {
+        await ctx.self.commands.extractDocgen(input);
+      },
+      staticPath: (input) => docgenQueryStaticPath(input.id)
+    },
+    docgenForAllComponents: {
+      description: "Returns docgen payloads for every component in the story index.",
+      input: void_(),
+      output: record(string(), docgenPayloadSchema),
+      handler: (_input, ctx) => ctx.self.state.components,
+      load: async (_input, ctx) => {
+        await ctx.self.commands.extractAllDocgen(void 0);
+      }
+    }
+  },
+  commands: {
+    extractDocgen: {
+      description: "Resolves the story entry for a component id, runs the registered provider chain, writes the result into state, and returns it (or undefined when no provider produced docgen).",
+      input: docgenInputSchema,
+      output: docgenOutputSchema
+      // Handler is supplied at registration time so it can close over the story index and the
+      // composed experimental_docgenProvider chain.
+    },
+    extractAllDocgen: {
+      description: "Extracts docgen for every component id in the story index by invoking `extractDocgen` for each.",
+      input: undefined_(),
+      output: void_()
+      // Handler is supplied at registration time so it can close over the story index.
+    }
+  }
+});
+
+export {
+  ADDON_ID,
+  TOOL_ID,
+  PARAM_KEY,
+  ADDON_ID2,
+  PARAM_KEY2,
+  docgenServiceDef
+};

package/dist/_browser-chunks/{chunk-YK43Z22A.js → chunk-5GYAEUAU.js}

@@ -26,7 +26,7 @@ import {
   uint32ArrayTag,
   uint8ArrayTag,
   uint8ClampedArrayTag
-} from "./chunk-LCHBOIHN.js";
+} from "./chunk-Z3B64JMR.js";
 
 // ../../node_modules/es-toolkit/dist/object/mapValues.mjs
 function mapValues(object, getNewValue) {

package/dist/_browser-chunks/chunk-6YDLG6WW.js

@@ -0,0 +1,18 @@
+// src/backgrounds/constants.ts
+var ADDON_ID = "storybook/background", PARAM_KEY = "backgrounds", GRID_PARAM_KEY = "grid", EVENTS = {
+  UPDATE: `${ADDON_ID}/update`
+};
+
+// src/backgrounds/defaults.ts
+var DEFAULT_BACKGROUNDS = {
+  light: { name: "light", value: "#F8F8F8" },
+  dark: { name: "dark", value: "#333" }
+};
+
+export {
+  ADDON_ID,
+  PARAM_KEY,
+  GRID_PARAM_KEY,
+  EVENTS,
+  DEFAULT_BACKGROUNDS
+};

package/dist/_browser-chunks/{chunk-2GLGVABT.js → chunk-A26ZOLVJ.js}

@@ -1,3 +1,16 @@
+import {
+  Channel
+} from "./chunk-KK3JJ3E4.js";
+
+// src/channels/mock-channel.ts
+function mockChannel() {
+  return new Channel({
+    transport: { setHandler: () => {
+    }, send: () => {
+    } }
+  });
+}
+
 // src/shared/constants/tags.ts
 var Tag = {
   /** Indicates that autodocs should be generated for this component */
@@ -23,6 +36,7 @@ var Tag = {
 }, USER_TAG_FILTER = (tag) => (entry, excluded) => excluded ? !entry.tags?.includes(tag) : !!entry.tags?.includes(tag);
 
 export {
+  mockChannel,
   Tag,
   BUILT_IN_FILTERS,
   USER_TAG_FILTER

package/dist/_browser-chunks/{chunk-NQJGOFZV.js → chunk-DFGA7I22.js}

@@ -1,3 +1,50 @@
+import {
+  createBrowserStaticLoader,
+  getService,
+  registerService
+} from "./chunk-W6Y3UHOT.js";
+import {
+  seedQueryState
+} from "./chunk-QC4HFS6K.js";
+import {
+  isEqual
+} from "./chunk-Z3B64JMR.js";
+
+// src/shared/open-service/use-service-command.ts
+import * as React from "react";
+function useServiceCommand(service, commandName) {
+  return React.useMemo(
+    () => service.commands[commandName],
+    [service, commandName]
+  );
+}
+
+// src/shared/open-service/use-service-query.ts
+import * as React2 from "react";
+function useServiceQuery(query, input, selector) {
+  let subscriptionKeyRef = React2.useRef(null), snapshotRef = React2.useRef(void 0);
+  (subscriptionKeyRef.current === null || subscriptionKeyRef.current.query !== query || !isEqual(subscriptionKeyRef.current.input, input) || subscriptionKeyRef.current.selector !== selector) && (subscriptionKeyRef.current = { query, input, selector }, snapshotRef.current = selector ? seedQueryState(query, input, selector) : seedQueryState(query, input));
+  let subscriptionKey = subscriptionKeyRef.current, subscribe = React2.useCallback(
+    (listener) => {
+      let { query: q, input: i, selector: s } = subscriptionKey, onQueryState = (queryState) => {
+        snapshotRef.current = queryState, listener();
+      };
+      return s ? q.subscribe(i, s, onQueryState) : q.subscribe(i, onQueryState);
+    },
+    [subscriptionKey]
+  ), getSnapshot = React2.useCallback(() => snapshotRef.current, []);
+  return React2.useSyncExternalStore(subscribe, getSnapshot);
+}
+
+// src/shared/open-service/manager.ts
+var getService2 = getService;
+function registerService2(definition, registration) {
+  return registerService(definition, registration, {
+    relay: !0,
+    staticLoader: createBrowserStaticLoader()
+  });
+}
+
 // ../../node_modules/dequal/dist/index.mjs
 var has = Object.prototype.hasOwnProperty;
 function find(iter, tar, key) {
@@ -78,6 +125,10 @@ function uniq(arr) {
 }
 
 export {
+  useServiceCommand,
+  useServiceQuery,
+  getService2 as getService,
+  registerService2 as registerService,
   dequal,
   countBy,
   partition,

package/dist/_browser-chunks/{chunk-ZCFV7BZB.js → chunk-DRQKCCAG.js}

@@ -1,7 +1,7 @@
 import {
   __commonJS,
   __require
-} from "./chunk-A242L54C.js";
+} from "./chunk-IMSF75WX.js";
 
 // ../../node_modules/memoizerific/memoizerific.js
 var require_memoizerific = __commonJS({

package/dist/_browser-chunks/chunk-FLUL445Z.js

@@ -0,0 +1,159 @@
+import {
+  mapValues,
+  pickBy
+} from "./chunk-5GYAEUAU.js";
+import {
+  isPlainObject
+} from "./chunk-Z3B64JMR.js";
+import {
+  dedent
+} from "./chunk-3LY4VQVK.js";
+
+// src/preview-api/modules/store/parameters.ts
+var combineParameters = (...parameterSets) => {
+  let mergeKeys = {}, definedParametersSets = parameterSets.filter(Boolean), combined = definedParametersSets.reduce((acc, parameters) => (Object.entries(parameters).forEach(([key, value]) => {
+    let existing = acc[key];
+    Array.isArray(value) || typeof existing > "u" ? acc[key] = value : isPlainObject(value) && isPlainObject(existing) ? mergeKeys[key] = !0 : typeof value < "u" && (acc[key] = value);
+  }), acc), {});
+  return Object.keys(mergeKeys).forEach((key) => {
+    let mergeValues = definedParametersSets.filter(Boolean).map((p) => p[key]).filter((value) => typeof value < "u");
+    mergeValues.every((value) => isPlainObject(value)) ? combined[key] = combineParameters(...mergeValues) : combined[key] = mergeValues[mergeValues.length - 1];
+  }), combined;
+};
+
+// src/preview-api/modules/store/filterArgTypes.ts
+var matches = (name, descriptor) => Array.isArray(descriptor) ? descriptor.includes(name) : name.match(descriptor), filterArgTypes = (argTypes, include, exclude) => !include && !exclude ? argTypes : argTypes && pickBy(argTypes, (argType, key) => {
+  let name = argType.name || key.toString();
+  return !!(!include || matches(name, include)) && (!exclude || !matches(name, exclude));
+});
+
+// src/preview-api/modules/store/inferControls.ts
+import { logger } from "storybook/internal/client-logger";
+var inferControl = (argType, name, matchers) => {
+  let { type, options } = argType;
+  if (type) {
+    if (matchers.color && matchers.color.test(name)) {
+      let controlType = type.name;
+      if (controlType === "string")
+        return { control: { type: "color" } };
+      controlType !== "enum" && logger.warn(
+        `Addon controls: Control of type color only supports string, received "${controlType}" instead`
+      );
+    }
+    if (matchers.date && matchers.date.test(name))
+      return { control: { type: "date" } };
+    switch (type.name) {
+      case "array":
+        return { control: { type: "object" } };
+      case "boolean":
+        return { control: { type: "boolean" } };
+      case "string":
+        return { control: { type: "text" } };
+      case "number":
+        return { control: { type: "number" } };
+      case "enum": {
+        let { value } = type;
+        return { control: { type: value?.length <= 5 ? "radio" : "select" }, options: value };
+      }
+      case "function":
+      case "symbol":
+        return null;
+      default:
+        return { control: { type: options ? "select" : "object" } };
+    }
+  }
+}, inferControls = (context) => {
+  let {
+    argTypes,
+    parameters: { __isArgsStory, controls: { include = null, exclude = null, matchers = {} } = {} }
+  } = context;
+  if (!__isArgsStory)
+    return argTypes;
+  let filteredArgTypes = filterArgTypes(argTypes, include, exclude), withControls = mapValues(filteredArgTypes, (argType, name) => argType?.type && inferControl(argType, name.toString(), matchers));
+  return combineParameters(withControls, filteredArgTypes);
+};
+inferControls.secondPass = !0;
+
+// src/preview-api/modules/store/inferArgTypes.ts
+import { logger as logger2 } from "storybook/internal/client-logger";
+var inferType = (value, name, visited, cache) => {
+  let type = typeof value;
+  switch (type) {
+    case "boolean":
+    case "string":
+    case "number":
+    case "function":
+    case "symbol":
+      return { name: type };
+    default:
+      break;
+  }
+  if (value) {
+    if (cache.has(value))
+      return cache.get(value);
+    if (visited.has(value))
+      return logger2.warn(dedent`
+        We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
+
+        Consider using the mapping feature or fully custom args:
+        - Mapping: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
+        - Custom args: https://storybook.js.org/docs/essentials/controls#fully-custom-args
+      `), { name: "other", value: "cyclic object" };
+    visited.add(value);
+    let result;
+    return Array.isArray(value) ? result = { name: "array", value: value.length > 0 ? inferType(value[0], name, visited, cache) : { name: "other", value: "unknown" } } : result = { name: "object", value: mapValues(value, (field) => inferType(field, name, visited, cache)) }, visited.delete(value), cache.set(value, result), result;
+  }
+  return { name: "object", value: {} };
+}, inferArgTypes = (context) => {
+  let { id, argTypes: userArgTypes = {}, initialArgs = {} } = context, cache = /* @__PURE__ */ new Map(), argTypes = Object.fromEntries(
+    Object.entries(initialArgs).filter(([key]) => !userArgTypes[key]?.type).map(([key, arg]) => [
+      key,
+      {
+        name: key,
+        type: inferType(arg, `${id}.${key}`, /* @__PURE__ */ new Set(), cache)
+      }
+    ])
+  ), userArgTypesNames = mapValues(userArgTypes, (argType, key) => ({
+    name: key
+  }));
+  return combineParameters(argTypes, userArgTypesNames, userArgTypes);
+};
+inferArgTypes.secondPass = !0;
+
+// src/docs-tools/argTypes/docgenServiceArgTypes.ts
+function mergeServiceArgTypes({
+  payload,
+  storyId,
+  parameters,
+  initialArgs,
+  customArgTypes
+}) {
+  let merged = combineParameters(payload.argTypes ?? {}, customArgTypes ?? {}), withInferredTypes = inferArgTypes({
+    id: storyId,
+    argTypes: merged,
+    initialArgs: initialArgs ?? {}
+  });
+  return inferControls({
+    argTypes: withInferredTypes,
+    // The manager can render this before the preview reports `storyPrepared`, so `parameters` may be
+    // undefined; `inferControls` reads `parameters.__isArgsStory` and would throw. An empty object
+    // makes it a no-op until prepared parameters arrive and trigger a re-render.
+    parameters: parameters ?? {}
+  });
+}
+function getServiceSubcomponentArgTypes(payload) {
+  return Object.fromEntries(
+    Object.entries(payload.subcomponents ?? {}).flatMap(
+      ([name, subcomponent]) => subcomponent.argTypes ? [[name, subcomponent.argTypes]] : []
+    )
+  );
+}
+
+export {
+  combineParameters,
+  inferArgTypes,
+  filterArgTypes,
+  inferControls,
+  mergeServiceArgTypes,
+  getServiceSubcomponentArgTypes
+};

package/dist/_browser-chunks/{chunk-IH6QJILI.js → chunk-GLOGC42D.js}

@@ -109,7 +109,8 @@ var color = {
       positive: "#427C27",
       warning: "#7A4100",
       negative: "#C23400",
-      critical: "#FFFFFF"
+      critical: "#FFFFFF",
+      agentic: "#723aa6"
     },
     bgColor: {
       default: color.lightest,
@@ -118,7 +119,8 @@ var color = {
       positive: "#F1FFEB",
       warning: "#FFF7EB",
       negative: "#FFF0EB",
-      critical: "#D13800"
+      critical: "#D13800",
+      agentic: "#f5f0fa"
     },
     borderColor: {
       default: color.border,
@@ -127,7 +129,8 @@ var color = {
       positive: "#BFE7AC",
       warning: "#FFCE85",
       negative: "#FFC3AD",
-      critical: "hsl(16 100% 100% / 0)"
+      critical: "hsl(16 100% 100% / 0)",
+      agentic: "#e1d2ef"
     }
   },
   dark: {
@@ -140,7 +143,8 @@ var color = {
       positive: "#86CE64",
       warning: "#FFAD33",
       negative: "#FF6933",
-      critical: "#FF6933"
+      critical: "#FF6933",
+      agentic: "#b07fdc"
     },
     bgColor: {
       default: "#222325",
@@ -149,7 +153,8 @@ var color = {
       positive: "hsl(101 100% 100% / 0)",
       warning: "hsl(101 100% 100% / 0)",
       negative: "hsl(101 100% 100% / 0)",
-      critical: "hsl(101 100% 100% / 0)"
+      critical: "hsl(101 100% 100% / 0)",
+      agentic: "rgba(114,58,166,0.15)"
     },
     borderColor: {
       default: "hsl(0 0% 100% / 0.1)",
@@ -158,7 +163,8 @@ var color = {
       positive: "hsl(101 52% 64% / 0.15)",
       warning: "hsl(36 100% 64% / 0.15)",
       negative: "hsl(16 100% 64% / 0.15)",
-      critical: "#FF6933"
+      critical: "#FF6933",
+      agentic: "rgba(114,58,166,0.35)"
     }
   }
 };