@qoretechnologies/reqraft 0.10.55-pr.124.g43fa138 → 0.10.55

package/src/components/form/engine/OptionFieldMessages.tsx

@@ -1,14 +1,23 @@
 import { ReqoreControlGroup, ReqoreTag, ReqoreVerticalSpacer } from '@qoretechnologies/reqore';
 import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
+import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
 import { IQorusFormField, IQorusFormSchema, TQorusForm } from '@qoretechnologies/ts-toolkit';
-import { flatten, size } from 'lodash';
+import { isArray, size } from 'lodash';
 import { useMemo } from 'react';
-import { getRequiredOptionMessage } from '../../../helpers/options';
+import { useContextSelector } from 'use-context-selector';
+import {
+  UNAVAILABLE_VALUE_FALLBACK_REASON,
+  getRefusalMessage,
+  getRequiredOptionMessage,
+} from '../../../helpers/options';
+import { isUntypedOptionType } from '../../../helpers/optionUiTypes';
 import {
   hasAllDependenciesFullfilled,
+  parseDependency,
   validateFieldWithResult,
   validateOptionWithRequiredGroups,
 } from '../../../helpers/validations';
+import { OptionsContext } from './optionsContext';
 
 /** A `messages` entry that appears only for certain values of its siblings. */
 export interface IConditionalFieldMessage {
@@ -49,10 +58,13 @@ export const isConditionalMessageShown = (
   optionsSchema?: IQorusFormSchema
 ): boolean => {
   const values = allOptions || {};
-  if (message.when && !hasAllDependenciesFullfilled(message.when as never, values, optionsSchema)) {
+  if (message.when && !hasAllDependenciesFullfilled(message.when, values, optionsSchema)) {
     return false;
   }
-  if (message.unless && hasAllDependenciesFullfilled(message.unless as never, values, optionsSchema)) {
+  if (
+    message.unless &&
+    hasAllDependenciesFullfilled(message.unless, values, optionsSchema)
+  ) {
     return false;
   }
   return true;
@@ -65,12 +77,270 @@ export const getShownSchemaMessages = <T extends IConditionalFieldMessage>(
   optionsSchema?: IQorusFormSchema
 ): T[] => (messages || []).filter((m) => isConditionalMessageShown(m, allOptions, optionsSchema));
 
+/**
+ * Name one `depends_on` entry so the reader can act on it.
+ *
+ * The list used to be built by looking each entry up as a whole field name,
+ * which is only ever true of the bare-name form. A COMPARISON entry
+ * (`kind=type`, `kind!=type`) matched no field, was dropped, and a field whose
+ * dependencies are all comparisons — the shape every subject field of a test
+ * uses — rendered "…are not fulfilled:" with nothing after the colon. The
+ * reader was told a dependency was unmet and not which one, by a sentence that
+ * stopped mid-way.
+ *
+ * One parser for both halves, the same one the evaluator uses, so the sentence
+ * and the lock cannot disagree about what an entry means.
+ */
+const describeDependency = (dependency: string, schema: IQorusFormSchema): string | undefined => {
+  const { name, op, value } = parseDependency(dependency);
+  const dependencySchema = schema[name];
+
+  if (!dependencySchema) {
+    return undefined;
+  }
+
+  const label = `"${dependencySchema.display_name || name}"`;
+
+  // `!name` names no value to compare against — it is satisfied by the sibling
+  // being unanswered — so it gets a sentence of its own rather than the
+  // comparison template, which would read `must not be "undefined"`.
+  if (op === '!') {
+    return `${label} must have no value`;
+  }
+
+  return op ? `${label} must ${op === '!=' ? 'not ' : ''}be "${value}"` : label;
+};
+
+/**
+ * The whole `depends_on` list as one phrase.
+ *
+ * A nested entry is an OR — only one of its members has to hold. It used to be
+ * flattened into the same comma-separated list as the top-level entries, which
+ * are an AND, so an either/or was shown to the reader as a set of things all
+ * required. The alternatives now stay grouped and joined by "or".
+ */
+export const describeDependencies = (
+  dependencies: (string | string[])[] | string[][],
+  schema: IQorusFormSchema
+): string =>
+  (dependencies as (string | string[])[])
+    .map((entry) => {
+      if (!isArray(entry)) {
+        return describeDependency(entry as string, schema);
+      }
+      const alternatives = (entry as string[])
+        .map((dep) => describeDependency(dep, schema))
+        .filter((dep): dep is string => !!dep);
+      if (!alternatives.length) {
+        return undefined;
+      }
+      return alternatives.length > 1 ? `(${alternatives.join(' or ')})` : alternatives[0];
+    })
+    .filter((entry): entry is string => !!entry)
+    .join(', ');
+
+/**
+ * An allowed VALUE, as far as being offered is concerned.
+ *
+ * ts-toolkit 0.5.82 carries both `IQorusAllowedValue.depends_on` and
+ * `IQorusFormFieldMessage.when` / `unless`, so this no longer waits on a publish.
+ * It remains its own shape because it states only what DECIDING AVAILABILITY needs —
+ * three keys out of the twenty an allowed value can carry — so a caller that has
+ * only those three can be answered, and the predicate cannot quietly start reading
+ * a fourth.
+ */
+export interface IAllowedValueAvailabilityInput {
+  /**
+   * The value is offered only while every entry holds — the SAME grammar, the
+   * same parser and the same evaluator a field's `depends_on` uses, one level
+   * down. For what this form can decide on its own.
+   */
+  depends_on?: (string | string[])[];
+  /**
+   * Someone who already knows has refused it — the server, for a sandbox or
+   * permission context, a capability of the selected kind, or a requirement in
+   * a scope `depends_on` deliberately cannot reach.
+   */
+  disabled?: boolean;
+  /** Where a refusal says why. */
+  messages?: IConditionalFieldMessage[];
+}
+
+/** Whether a value can be picked, and the sentence that stands in for it. */
+export interface IAllowedValueAvailability {
+  available: boolean;
+  /** Why not. Read by the row itself, by its tooltip and by the list's search. */
+  reason?: string;
+  /** A heading the refusal came with, when it came with one. */
+  title?: string;
+  intent?: TReqoreIntent;
+}
+
+/** One object for every available value, so identity says "nothing to show". */
+export const ALLOWED_VALUE_AVAILABLE: IAllowedValueAvailability = Object.freeze({
+  available: true,
+});
+
+/**
+ * Whether an offered value can be picked, and why not.
+ *
+ * Two things can refuse a value and they render identically, because a reader
+ * has no way to tell them apart and no reason to care:
+ *
+ * - **the predicate** — the value's own `depends_on`, judged against the form
+ *   it is standing in. Whatever the form itself can decide.
+ * - **the pre-resolved refusal** — `disabled: true` with a message, from
+ *   whoever already knows. A sandbox that denies a domain, a capability of the
+ *   selected kind, a requirement in another value scope: none of them are
+ *   reachable from a sibling's answer, and a predicate that pretended otherwise
+ *   would be a predicate that never fires.
+ *
+ * The predicate is checked first when both could speak. It names a field in
+ * this very form, so the reader can act on it without leaving the row; a served
+ * reason is a statement about somewhere else.
+ *
+ * A value is never HIDDEN for either reason. A choice that vanishes takes its
+ * own explanation with it, and leaves the reader looking for something they
+ * were told exists.
+ */
+export const getAllowedValueAvailability = (
+  value: IAllowedValueAvailabilityInput | undefined,
+  allOptions?: TQorusForm,
+  schema?: IQorusFormSchema
+): IAllowedValueAvailability => {
+  if (!value) {
+    return ALLOWED_VALUE_AVAILABLE;
+  }
+
+  /* `allOptions` is undefined only when there is no form around the picker at
+     all (see `OptionsContext`). A predicate about siblings has nothing to judge
+     there, and locking every gated value in a standalone picker would be a
+     rendering fault rather than a fact about the form. */
+  if (
+    size(value.depends_on) &&
+    allOptions &&
+    !hasAllDependenciesFullfilled(value.depends_on!, allOptions, schema)
+  ) {
+    const dependsOn = schema ? describeDependencies(value.depends_on!, schema) : '';
+
+    return {
+      available: false,
+      intent: 'warning',
+      reason:
+        dependsOn ?
+          `Unavailable because some dependencies are not fulfilled: ${dependsOn}`
+          // Nothing nameable: every entry pointed at a field this schema does
+          // not contain. A sentence that ends in a colon and then stops reads
+          // as a rendering fault rather than as a fact about the form.
+        : 'Unavailable because some dependencies are not fulfilled',
+    };
+  }
+
+  if (value.disabled) {
+    /* The refusal picks its own words out of `messages`, through the same
+       `when`/`unless` filter a field's messages go through — a served reason
+       can itself be conditional. The most serious one speaks: a `danger`
+       message is the one that explains a refusal, and an `info` note beside it
+       is not. */
+    const explanation = getRefusalMessage(getShownSchemaMessages(value.messages, allOptions, schema));
+
+    return {
+      available: false,
+      intent: (explanation?.intent as TReqoreIntent) || 'warning',
+      title: explanation?.title,
+      // A refusal with no message at all still has to say something: silence
+      // over a value that will not respond is the defect this whole mechanism
+      // exists to remove.
+      reason: explanation?.content || UNAVAILABLE_VALUE_FALLBACK_REASON,
+    };
+  }
+
+  return ALLOWED_VALUE_AVAILABLE;
+};
+
+/**
+ * The availability of each offered value, against the form the picker stands in.
+ *
+ * Aligned with `items`: the result at index `i` describes `items[i]`.
+ *
+ * The answer is computed INSIDE the context selector, not from a copy of the
+ * form values pulled out of it. `OptionsContext` hands down a fresh object on
+ * every render of the engine, so a picker that selected the values themselves
+ * would re-render on every keystroke anywhere in the form; selecting the
+ * computed answer re-renders it only when an availability actually changes.
+ *
+ * Values that gate on nothing skip the computation entirely, and that is a
+ * claim about each VALUE rather than about the field it belongs to. The gate
+ * used to be one flag for the whole list, so a single gated value in a
+ * thousand-item picker resolved all thousand and serialised all thousand on
+ * every keystroke anywhere in the form. Only the gated indices are resolved
+ * and serialised; every other position is the same frozen
+ * {@link ALLOWED_VALUE_AVAILABLE}, which costs nothing to fill in and lets
+ * identity say "nothing to show".
+ */
+export const useAllowedValueAvailability = (
+  items: readonly IAllowedValueAvailabilityInput[] | undefined
+): IAllowedValueAvailability[] => {
+  const gatedIndices = useMemo(
+    () =>
+      (items || []).reduce<number[]>((indices, item, index) => {
+        if (size(item?.depends_on) || item?.disabled === true) {
+          indices.push(index);
+        }
+        return indices;
+      }, []),
+    [items]
+  );
+
+  const serialized = useContextSelector(OptionsContext, (context) =>
+    gatedIndices.length ?
+      JSON.stringify(
+        gatedIndices.map((index) =>
+          getAllowedValueAvailability(items![index], context.value, context.schema)
+        )
+      )
+    : ''
+  );
+
+  return useMemo(() => {
+    const result = (items || []).map(() => ALLOWED_VALUE_AVAILABLE);
+
+    if (!serialized) {
+      return result;
+    }
+
+    // Aligned back onto the caller's own indices: the picker asks for
+    // `availability[i]` and must get the answer for `items[i]`.
+    const resolved = JSON.parse(serialized) as IAllowedValueAvailability[];
+    gatedIndices.forEach((index, position) => {
+      result[index] = resolved[position];
+    });
+
+    return result;
+  }, [serialized, items, gatedIndices]);
+};
+
 export interface IOptionFieldMessagesProps {
   schema: IQorusFormSchema;
   option: IQorusFormField;
   allOptions?: TQorusForm;
   name: string;
   getType: (type: string) => string;
+  /**
+   * The reader has not edited this field in this session.
+   *
+   * An error is a report that something went WRONG. "This field is required"
+   * under a field nobody has been in yet reports nothing: the form is empty
+   * because it is new. The requirement is already carried three other ways —
+   * the asterisk on the label, the Needs-attention box the row sits in, and the
+   * completion meter — so the message waits until the reader has been in the
+   * field and left it empty, which IS a thing that went wrong.
+   *
+   * Only the plain required message is held back. A value that fails
+   * validation, an unmet required GROUP and a locked dependency are all facts
+   * about what the form currently holds, and they show immediately.
+   */
+  untouched?: boolean;
 }
 
 /**
@@ -84,13 +354,26 @@ export const getOptionFieldMessages = ({
   name,
   allOptions,
   getType,
+  untouched,
 }: IOptionFieldMessagesProps): IReqoreTagProps[] => {
   const optionSchema = schema[name];
   const result: IReqoreTagProps[] = [];
 
   if (option.value || option.value === false || option.value === 0 || option.value === null) {
+    /* A concrete type the VALUE carries beats an untyped schema.
+       `auto`/`any` declare no type — the author picks one (Binary, Date, …)
+       and it is recorded beside the value. Reading the schema first validated
+       a binary value as `auto`, which auto-detects from the value and accepts
+       anything, so the form said the field needed attention while the field
+       itself gave no reason. The form's own check already prefers the stored
+       type (`getOptionFieldStorageType`); this is the same precedence. */
+    const schemaType = optionSchema?.ui_type as string;
+    const storedType = option.type as string;
+    const typeToValidate =
+      isUntypedOptionType(schemaType) && storedType ? storedType : schemaType || storedType;
+
     const validationData = validateFieldWithResult(
-      getType((optionSchema?.ui_type as string) || (option.type as string)),
+      getType(typeToValidate),
       option.value,
       {
         has_to_have_value: true,
@@ -109,7 +392,7 @@ export const getOptionFieldMessages = ({
       });
     }
   } else {
-    if (optionSchema?.required) {
+    if (optionSchema?.required && !untouched) {
       result.push({ label: 'This field is required', intent: 'danger' });
     }
 
@@ -134,14 +417,16 @@ export const getOptionFieldMessages = ({
     optionSchema?.depends_on &&
     !hasAllDependenciesFullfilled(optionSchema.depends_on, allOptions, schema)
   ) {
-    const dependsOn = flatten(optionSchema.depends_on)
-      .filter((dep: string) => !!schema[dep])
-      .map((dep: string) => schema[dep].display_name || dep)
-      .map((dep: string) => `"${dep}"`)
-      .join(', ');
+    const dependsOn = describeDependencies(optionSchema.depends_on, schema);
 
     result.push({
-      label: `This field is disabled because some dependencies are not fulfilled: ${dependsOn}`,
+      label:
+        dependsOn ?
+          `This field is disabled because some dependencies are not fulfilled: ${dependsOn}`
+          // Nothing nameable: every entry pointed at a field this schema does
+          // not contain. A sentence that ends in a colon and then stops reads
+          // as a rendering fault rather than as a fact about the form.
+        : 'This field is disabled because some dependencies are not fulfilled',
       intent: 'warning',
     });
   }
@@ -155,10 +440,11 @@ export const OptionFieldMessages = ({
   name,
   allOptions,
   getType,
+  untouched,
 }: IOptionFieldMessagesProps) => {
   const messages: IReqoreTagProps[] = useMemo(
-    () => getOptionFieldMessages({ schema, option, name, allOptions, getType }),
-    [JSON.stringify(schema), JSON.stringify(option), JSON.stringify(allOptions), name]
+    () => getOptionFieldMessages({ schema, option, name, allOptions, getType, untouched }),
+    [JSON.stringify(schema), JSON.stringify(option), JSON.stringify(allOptions), name, untouched]
   );
 
   if (!size(messages)) {

package/src/components/form/engine/_structuredData/SchemaDataView.tsx

@@ -5,11 +5,14 @@ import {
   ReqoreP,
   ReqoreTag,
 } from '@qoretechnologies/reqore';
+import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import {
   IQorusFormField,
   IQorusFormSchema,
   TQorusFormFieldSchema,
 } from '@qoretechnologies/ts-toolkit';
+import { IRichtextSegment } from '../../../../helpers/common';
+import { templateTextSegments } from '../../../../helpers/templateText';
 import React from 'react';
 import styled from 'styled-components';
 import { useContextSelector } from 'use-context-selector';
@@ -24,12 +27,15 @@ import {
   fieldLabel,
   findAllowedValueOption,
   formatOptionValue,
+  getAllowedValueIcon,
   getAllowedValueImage,
   isCodeField,
   orderedKeys,
   recordIdentity,
   titleKeyFor,
 } from '../readFirst';
+import { TemplateText } from '../../fields/template/TemplateText';
+import { TFieldWithOwnTemplates } from '../rendererTypes';
 import { isEmptyUiEnvelope, isUiEncodedValue } from './structuredData';
 
 /**
@@ -343,6 +349,32 @@ const labelColumn = (value: unknown, schema: IQorusFormSchema): string => {
 const isNavigableUrl = (value: unknown): value is string =>
   typeof value === 'string' && /^(https?|wss?|ftps?):\/\//i.test(value);
 
+/**
+ * The reference chips inside a formatted value — none when it holds no
+ * reference at all.
+ *
+ * The preview is the SAME value the row above draws, one level down, and it
+ * reached the mono cell as a raw string: a sub-field holding
+ * `$._case.mode != 'simulate'` read as a chip on the row and as the engine's
+ * own spelling in the inset beneath it, which is a row disagreeing with itself
+ * about what its value is.
+ *
+ * A field's OWN list and grammar win where it declares them — the same
+ * precedence the rows use — falling back to the form's shared catalogue.
+ */
+const referenceSegments = (
+  text: unknown,
+  templates: IReqoreFormTemplates | undefined,
+  fieldSchema?: TQorusFormFieldSchema
+): IRichtextSegment[] => {
+  if (typeof text !== 'string' || !text) {
+    return [];
+  }
+  const own = fieldSchema as TFieldWithOwnTemplates | undefined;
+  const segments = templateTextSegments(text, own?.templates ?? templates, own?.templateToken);
+  return segments.some((segment) => segment.kind === 'tag') ? segments : [];
+};
+
 /** One field's value, rendered the way its row above renders it. */
 const FieldValue = ({
   field,
@@ -356,7 +388,11 @@ const FieldValue = ({
   const formatted = formatOptionValue(field, fieldSchema);
   // An allowed value that carries a logo shows it here too, exactly as the row
   // above does — the preview is the same value, so it gets the same treatment.
+  // An option marked with an ICON rather than a logo gets the same, for the same
+  // reason: the mark is how a list of bare words is told apart, and dropping it
+  // here would make the preview disagree with the row it previews.
   const image = getAllowedValueImage(field.value, fieldSchema);
+  const icon = getAllowedValueIcon(field.value, fieldSchema);
 
   // Data reads in mono; a chosen label does not.
   //
@@ -368,6 +404,13 @@ const FieldValue = ({
   // separates the two, and it is the same lookup that produced the text.
   const isChosenLabel = !!findAllowedValueOption(field.value, fieldSchema);
 
+  /* Read from context, like the code renderer above: a level is arbitrarily
+     deep, and the form's catalogue is a property of the form rather than of any
+     one level. See `referenceSegments`. */
+  const templates = useContextSelector(CompactRowContext, (v) => v.templates);
+  const fieldTemplates = (fieldSchema as TFieldWithOwnTemplates | undefined)?.templates ?? templates;
+  const segments = isNavigableUrl(field.value) ? [] : referenceSegments(formatted, templates, fieldSchema);
+
   return (
     <StyledRowValue $color={color}>
       {field.value === true || field.value === false ?
@@ -387,6 +430,12 @@ const FieldValue = ({
               size='14px'
               style={{ flexShrink: 0, marginRight: 6, verticalAlign: 'middle' }}
             />
+          : icon ?
+            <ReqoreIcon
+              icon={icon as any}
+              size='14px'
+              style={{ flexShrink: 0, marginRight: 6, verticalAlign: 'middle' }}
+            />
           : null}
           {isNavigableUrl(field.value) ?
             // The address IS the link — it used to render as inert text with a
@@ -403,6 +452,10 @@ const FieldValue = ({
             >
               {formatted}
             </ReqoreLink>
+          : segments.length ?
+            // `full`: the preview is where a value that the row had to cut is
+            // shown whole, so its chips wrap rather than clipping.
+            <TemplateText segments={segments} templates={fieldTemplates} full />
           : formatted}
         </span>
       }
@@ -410,6 +463,25 @@ const FieldValue = ({
   );
 };
 
+/**
+ * A value with no field schema of its own — a bare entry in a list, a level
+ * that turned out to be a scalar. It still reads as prose with named chips
+ * where it holds references, because a reference is not more raw for having
+ * arrived without a schema.
+ */
+const ScalarText = ({
+  text,
+  templates,
+}: {
+  text: string;
+  templates: IReqoreFormTemplates | undefined;
+}) => {
+  const segments = referenceSegments(text, templates);
+  return segments.length ?
+      <TemplateText segments={segments} templates={templates} full />
+    : <>{text}</>;
+};
+
 /** One described hash: its fields as label/value pairs in the shared columns. */
 const SchemaRecord = ({
   record,
@@ -547,6 +619,9 @@ const SchemaLevel = ({
   colors: ISchemaDataViewProps['colors'];
 }) => {
   const inner = unwrap(value);
+  // Same reason as `FieldValue`: a heading and a bare list entry are values too,
+  // and a reference in one reads as a name everywhere else in the form.
+  const templates = useContextSelector(CompactRowContext, (v) => v.templates);
 
   if (Array.isArray(inner)) {
     return (
@@ -567,6 +642,14 @@ const SchemaLevel = ({
                       if (!identity) {
                         return null;
                       }
+                      // An item is headed by one of its own fields, so the
+                      // heading is that field's value and reads like it: a case
+                      // named by a reference is named by the reference's NAME.
+                      const titleSegments = referenceSegments(
+                        identity.text,
+                        templates,
+                        schema[identity.key] as TQorusFormFieldSchema | undefined
+                      );
                       return (
                         <StyledItemTitle
                           className='schema-view-item-title'
@@ -578,7 +661,9 @@ const SchemaLevel = ({
                           $accent={colors.accent}
                           title={identity.label}
                         >
-                          {identity.text}
+                          {titleSegments.length ?
+                            <TemplateText segments={titleSegments} templates={templates} full />
+                          : identity.text}
                         </StyledItemTitle>
                       );
                     })()}
@@ -595,7 +680,10 @@ const SchemaLevel = ({
                       className='options-readfirst-valuetext schema-view-data'
                       style={{ fontFamily: MONO_FONT_STACK }}
                     >
-                      {formatOptionValue({ value: record } as IQorusFormField)}
+                      <ScalarText
+                        text={formatOptionValue({ value: record } as IQorusFormField)}
+                        templates={templates}
+                      />
                     </span>
                   </StyledRowValue>
                 }
@@ -613,7 +701,10 @@ const SchemaLevel = ({
 
   return (
     <ReqoreP size='small' style={{ color: colors.key }}>
-      {formatOptionValue({ value: inner } as IQorusFormField)}
+      <ScalarText
+        text={formatOptionValue({ value: inner } as IQorusFormField)}
+        templates={templates}
+      />
     </ReqoreP>
   );
 };

package/src/components/form/engine/compactRowContext.ts

@@ -39,6 +39,21 @@ export type TCodePreviewRenderer = (props: {
 export interface ICompactRowContext {
   // Props / config
   readOnly?: boolean;
+  /**
+   * What a click on a READ-ONLY row should do, when the consumer has somewhere
+   * to send it.
+   *
+   * A read-only row is not a control, so by default it opens nothing: it shows
+   * everything it has and answers a click with silence. That is right when
+   * there is nowhere else to go, and a dead end when there is — a reader
+   * clicking a value they want to change is telling you exactly what they want,
+   * and being ignored teaches them the surface is broken.
+   *
+   * Given this, the row becomes the way in to wherever that field IS editable,
+   * and says so: it takes a button's role and keyboard handling. Without it
+   * nothing changes, so a read-only form with no editor behind it stays inert.
+   */
+  onReadOnlyActivate?: (optionName: string) => void;
   commitMode: 'immediate' | 'batched';
   expandMode: 'single' | 'multi';
 
@@ -54,12 +69,6 @@ export interface ICompactRowContext {
   // display name in the read-first chip.
   templates?: IReqoreFormTemplates;
   expandedOptions: string[];
-  // Name of the field the engine expanded programmatically for
-  // `autoFocusFirstRequired`. CompactRow focuses this one with `preventScroll`
-  // so an off-screen / below-the-fold form is never scrolled into view on
-  // mount. A ref (not state) so it's current when the 60ms focus timer fires,
-  // regardless of render batching.
-  autoFocusNameRef?: MutableRefObject<string | undefined>;
   highlightedOptions: string[];
   flashedOptions: string[];
   infoPanelOverrides: Record<string, boolean>;