@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g124fc92

package/src/components/form/fields/Field.tsx

@@ -2,7 +2,6 @@ import {
   IReqoreLabelProps,
   ReqoreCheckbox,
   ReqoreControlGroup,
-  ReqoreSpan,
 } from '@qoretechnologies/reqore';
 import { IWithReqoreSize } from '@qoretechnologies/reqore/dist/types/global';
 import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
@@ -34,6 +33,7 @@ import {
   UNAVAILABLE_ITEM_CLASS,
 } from './select/SelectCollection';
 import { useAllowedValueAvailability } from '../engine/OptionFieldMessages';
+import { ChoiceGroupHeading, useSelectedChoiceIntent } from './ChoiceGroupHeading';
 import { StringFormField } from './string/String';
 import { ArrayAutoField } from './array/ArrayAutoField';
 import { AutoFormField } from './auto/AutoFormField';
@@ -46,6 +46,7 @@ import { IDataSchemaDefinition } from './schema-definition/types';
 // because modules are all loaded before any component renders
 import { FormEngine } from '../engine/FormEngine';
 import { FormFieldsSkeleton } from '../engine/FormFieldsSkeleton';
+import { allowedValueOf } from '../../../helpers/allowedValues';
 
 /** Soft Qore types (softint, softstring, …) render as their concrete base —
  * the soft/hard distinction is value-level, not UI. */
@@ -152,6 +153,7 @@ export const FormField = <T extends TFormFieldType>({
   ...rest
 }: IFormFieldProps<T>) => {
   const id = useId();
+  const selectedChoiceIntent = useSelectedChoiceIntent();
   const { schema: finalArgSchema, loading: argSchemaLoading } = useArgSchema(arg_schema);
 
   const handleChange = (value: TFormFieldValueType<T>, event?: unknown) => {
@@ -415,7 +417,7 @@ export const FormField = <T extends TFormFieldType>({
         if (size(element_allowed_values) && !element_allowed_values_creatable) {
           const formatToServer = (vals: unknown[]) =>
             (vals || []).map((v) => {
-              const match = element_allowed_values.find((ev) => isEqual(ev.value?.value, v));
+              const match = element_allowed_values.find((ev) => isEqual(allowedValueOf(ev), v));
               return { value: v, type: match?.value?.type ?? effectiveElementType };
             });
           const formatFromServer = (vals: unknown[]) =>
@@ -426,7 +428,7 @@ export const FormField = <T extends TFormFieldType>({
             return (
               <ReqoreControlGroup vertical size='tiny'>
                 {element_allowed_values.map((item, index) => {
-                  const itemValue = item.value?.value;
+                  const itemValue = allowedValueOf(item);
                   const checked = serverValue.some((v) => isEqual(v, itemValue));
                   return (
                     <ReqoreCheckbox
@@ -435,7 +437,7 @@ export const FormField = <T extends TFormFieldType>({
                       label={item.display_name ?? String(itemValue)}
                       tooltip={item.short_desc || item.desc}
                       checked={checked}
-                      intent={checked ? 'info' : undefined}
+                      intent={selectedChoiceIntent(checked)}
                       onClick={() => {
                         const next =
                           checked ?
@@ -590,7 +592,7 @@ export const FormField = <T extends TFormFieldType>({
         resolved && !resolved.available ?
           { title: resolved.title, content: resolved.reason as string, intent: resolved.intent }
         : undefined,
-      value: item.value?.value,
+      value: allowedValueOf(item),
     };
   };
 
@@ -653,13 +655,13 @@ export const FormField = <T extends TFormFieldType>({
     if (allowed_values.length <= 3) {
       return (
         <ReqoreControlGroup vertical size='tiny'>
-          <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
+          <ChoiceGroupHeading>
             {/* Headed by the field's own name; "Select one:" only when it has
                 none. Same rule as FieldAllowedValuesCheckGroup. */}
             {display_name ? `${display_name}:` : 'Select one:'}
-          </ReqoreSpan>
+          </ChoiceGroupHeading>
           {allowed_values.map((item, index) => {
-            const itemValue = item.value?.value;
+            const itemValue = allowedValueOf(item);
             const checked = isEqual(value, itemValue);
             const mapped = mapAllowedValue(item, index);
             const unavailable = getSelectItemUnavailability(mapped);
@@ -695,7 +697,7 @@ export const FormField = <T extends TFormFieldType>({
                 readOnly={!!unavailable}
                 uncheckedIcon={unavailable ? 'LockLine' : undefined}
                 checked={checked}
-                intent={checked ? 'info' : undefined}
+                intent={selectedChoiceIntent(checked)}
                 onClick={
                   unavailable ? undefined : (
                     () => handleChange((checked ? undefined : itemValue) as TFormFieldValueType<T>)

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -2,13 +2,13 @@
 // (FIELD_STACK_REPORT batch). Markup, props and the debounced local-value
 // flow are preserved. Seams (IDE-only infrastructure, same classes as the
 // ExpressionBuilder port):
-// - `useSavedValues` — saved-values storage is IDE-only; `showSavedValues`
-//   stays in the interface but contributes no items.
+// - `useSavedValues` — saved-values storage is the host's; a field that shows
+//   saved values reads them from `SavedValuesContext` (see `savedValues.ts`).
 // - `useSubscriptionEvents` (CONNECTION_DELETED pruning) — dropped.
 // - `ConnectionManagement` per-item actions — dropped (actions omitted).
 // - `Select` → reqraft `SelectFormField` (`items` instead of `defaultItems`,
 //   single-arg `onChange`; `type`/`closeCollectionOnUnMount` not forwarded).
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreSpan } from '@qoretechnologies/reqore';
+import { ReqoreCheckbox, ReqoreControlGroup } from '@qoretechnologies/reqore';
 import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
@@ -20,7 +20,10 @@ import {
 } from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
 import { useAllowedValueAvailability } from '../../engine/OptionFieldMessages';
+import { ChoiceGroupHeading, useSelectedChoiceIntent } from '../ChoiceGroupHeading';
 import type { IReqraftAllowedValue } from '../Field';
+import { allowedValueOf } from '../../../../helpers/allowedValues';
+import { useSavedValueChoices } from './savedValues';
 
 export interface IFieldAllowedValuesProps extends Pick<
   IReqoreButtonProps,
@@ -97,13 +100,15 @@ export const FieldAllowedValuesCheckGroup = memo(
      */
     label?: string;
   }) => {
+    const selectedChoiceIntent = useSelectedChoiceIntent();
+
     return (
       <ReqoreControlGroup vertical size={rest.size || 'small'} gapSize='tiny'>
-        <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
+        <ChoiceGroupHeading>
           {label ? `${label}:`
           : multiSelect ? 'Select one or more:'
           : 'Select one:'}
-        </ReqoreSpan>
+        </ChoiceGroupHeading>
         {items?.map((item) => {
           const unavailable = getSelectItemUnavailability(item);
 
@@ -134,7 +139,7 @@ export const FieldAllowedValuesCheckGroup = memo(
                  which keeps the pointer events the tooltip is read through.
                  It does not withhold `onClick` — the handler below does. */
               readOnly={rest.readOnly || !!unavailable}
-              intent={item.value === value ? 'info' : undefined}
+              intent={selectedChoiceIntent(item.value === value)}
               // `isEqual`, and only once there is a value to match. The single
               // -select branch compared JSON.stringify(value) with
               // JSON.stringify(item.value), and JSON.stringify(undefined) is
@@ -194,6 +199,8 @@ export const FieldAllowedValues = memo(
        `depends_on`, and a refusal the server had already decided. Both end up
        as one state on the item: no click handler, and a reason to read. */
     const availability = useAllowedValueAvailability(items as IReqraftAllowedValue[]);
+    const savedValues = useSavedValueChoices(type);
+    const offersSavedValues = !!showSavedValues && !readOnly && !disabled && count(savedValues) > 0;
 
     const fullItems = useMemo(() => {
       const result = [
@@ -202,7 +209,7 @@ export const FieldAllowedValues = memo(
           const resolved = availability[index];
 
           return {
-            value: value?.value,
+            value: allowedValueOf({ value, name: rest.name }),
             ...rest,
             disabled: rest.disabled || resolved?.available === false,
             unavailable:
@@ -217,12 +224,17 @@ export const FieldAllowedValues = memo(
         }),
       ] as ISelectFormFieldItem[];
 
+      if (offersSavedValues) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        result.push(...savedValues.map(({ valueType, ...saved }) => saved));
+      }
+
       return result;
-    }, [JSON.stringify(items), availability, type, value, showSavedValues, disabled, readOnly]);
+    }, [JSON.stringify(items), availability, type, value, offersSavedValues, savedValues]);
 
     const style = useMemo(() => ({ width: '100%' }), []);
 
-    if (!count(fullItems) || type === 'enum' || (!count(items) && !showSavedValues)) {
+    if (!count(fullItems) || type === 'enum' || (!count(items) && !offersSavedValues)) {
       return null;
     }
 

package/src/components/form/fields/allowed-values/savedValues.ts

@@ -0,0 +1,41 @@
+import { createContext, useContext, useMemo } from 'react';
+import { ISelectFormFieldItem } from '../select/Select';
+
+/**
+ * SEAM (reqraft): values a person saved to reuse in other fields.
+ *
+ * Where they are kept is the host's business — the IDE stores them in the
+ * user's settings — so this package draws them and asks the host to save one;
+ * it never stores anything itself. Without a provider a form offers neither,
+ * which is what it did before the seam existed (`showSavedValues` and
+ * `allowSaving` were inert).
+ */
+export interface ISavedValueChoice extends ISelectFormFieldItem {
+  /** The type of the saved value: a field offers only the values of its own type. */
+  valueType?: string;
+}
+
+export interface ISavedValues {
+  /** Every saved value, drawn as choices by a field that shows saved values. */
+  items: ISavedValueChoice[];
+  /** Saves a field's current value; the host asks what to call it. */
+  saveValue?: (field: { value: unknown; type?: string }) => void;
+  /** The label of the row-menu item that saves a value. */
+  saveLabel?: string;
+}
+
+export const SavedValuesContext = createContext<ISavedValues | undefined>(undefined);
+
+const NO_SAVED_VALUES: ISavedValueChoice[] = [];
+
+/** The saved values a field of `type` can choose from. */
+export const useSavedValueChoices = (type?: string): ISavedValueChoice[] => {
+  const items = useContext(SavedValuesContext)?.items;
+  return useMemo(
+    () =>
+      !items ? NO_SAVED_VALUES
+      : type ? items.filter((item) => !item.valueType || item.valueType === type)
+      : items,
+    [items, type]
+  );
+};

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -17,6 +17,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import useMount from 'react-use/lib/useMount';
 import { typedToYaml, yamlToTyped } from '../../../../helpers/common';
+import { allowedValueOf } from '../../../../helpers/allowedValues';
 import { getListElementValue } from '../../../../helpers/options';
 import { isSingleLineStringType } from '../../../../helpers/singleLineString';
 import {
@@ -658,9 +659,21 @@ function AutoField<T = any>({
            Without the type the field cannot tell them apart and treats them all
            as documents, so an interface's Internal Name — which becomes a YAML
            key — accepted Enter. Only text takes references; `data` and
-           `binary` are encoded content, where a chip would stand for nothing. */
+           `binary` are encoded content, where a chip would stand for nothing.
+
+           The semantic string formats (`email` … `phone`) are one line of text
+           whose identity the validator checks. They are in the option vocabulary
+           (`optionUiTypes`) and the single-line list, but had no case here, so a
+           field of one drew "Unknown type!" in every form. */
         case 'string':
         case 'long-string':
+        case 'email':
+        case 'uri':
+        case 'uuid':
+        case 'hostname':
+        case 'ipv4':
+        case 'ipv6':
+        case 'phone':
           return renderTextEditor(currentType);
         case 'data':
         case 'binary':
@@ -974,8 +987,8 @@ function AutoField<T = any>({
           // previously only `allowed_values` was read, leaving `items` empty.
           const enumItems = (rest.allowed_values as any[] | undefined)?.length
             ? (rest.allowed_values as any[]).map((av) => ({
-                label: av.display_name ?? String(av.value?.value ?? av.value),
-                value: av.value?.value ?? av.value,
+                label: av.display_name ?? String(allowedValueOf(av)),
+                value: allowedValueOf(av),
                 image: av.image,
                 icon: av.icon,
               }))
@@ -1008,7 +1021,7 @@ function AutoField<T = any>({
             <SelectFormField
               items={(rest.allowed_values || []).map((av) => ({
                 ...av,
-                value: av.value?.value,
+                value: allowedValueOf(av),
               }))}
               value={value}
               onChange={(val) => handleChange(name, val)}

package/src/components/form/fields/long-string/LongString.stories.tsx

@@ -118,3 +118,30 @@ export const Disabled: Story = {
     await expect(textarea).toHaveValue('Cannot edit this');
   },
 };
+
+/**
+ * `debounceMs={0}` passes every change on at once. A form submitted by Enter (a Qonsole
+ * question) reads the value the moment the key goes down; with the usual wait it would
+ * submit the text as it was before the last few keys.
+ */
+export const PassedOnAtOnce: Story = {
+  args: {
+    debounceMs: 0,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the LongString field with no wait before a change is passed on, so each key reaches the form immediately — what a form submitted by Enter needs.',
+      },
+    },
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByLabelText('LongString');
+
+    await userEvent.type(textarea, 'abc');
+    // no waitFor: the last key is already with the form
+    await expect(args.onChange).toHaveBeenLastCalledWith('abc');
+  },
+};

package/src/components/form/fields/long-string/LongString.tsx

@@ -20,6 +20,12 @@ export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'o
    * names and URLs with a newline in them. See `helpers/singleLineString`.
    */
   type?: string;
+  /**
+   * How long the text waits after the last key before it is passed on (ms). `0` passes
+   * every change on at once: a form submitted by Enter — a Qonsole question — must see
+   * the last thing typed, not the text from 100 ms earlier.
+   */
+  debounceMs?: number;
 }
 
 export const LongStringFormField = ({
@@ -27,6 +33,7 @@ export const LongStringFormField = ({
   onChange,
   onClearClick,
   type,
+  debounceMs = 100,
   ...rest
 }: ILongStringFormFieldProps) => {
   const [localValue, setLocalValue] = useState<string>(value ?? '');
@@ -72,7 +79,7 @@ export const LongStringFormField = ({
         emit(localValue);
       }
     },
-    100,
+    debounceMs,
     [localValue, emit]
   );
 
@@ -84,9 +91,13 @@ export const LongStringFormField = ({
       // Flatten here rather than only blocking the Enter key: a line break also
       // arrives by paste, by drag-and-drop, from autofill and from an IME, and
       // a keydown guard catches none of those.
-      setLocalValue(singleLine && hasLineBreak(raw) ? flattenToSingleLine(raw) : raw);
+      const next = singleLine && hasLineBreak(raw) ? flattenToSingleLine(raw) : raw;
+      setLocalValue(next);
+      if (debounceMs === 0 && next !== lastEmittedRef.current) {
+        emit(next);
+      }
     },
-    [singleLine]
+    [singleLine, debounceMs, emit]
   );
 
   // Stop Enter before it inserts anything, so the caret does not jump to a

package/src/components/form/fields/multi-select/MultiSelectFormField.tsx

@@ -7,6 +7,7 @@ import {
   getSelectItemUnavailability,
   UNAVAILABLE_ITEM_CLASS,
 } from '../select/SelectCollection';
+import { allowedValueOf } from '../../../../helpers/allowedValues';
 
 export interface IMultiSelectFormFieldProps {
   /** Currently selected values (plain scalars) */
@@ -55,7 +56,7 @@ export const MultiSelectFormField = memo(
                   messages: item.messages,
                 })
             )
-            .map((item) => String(item.value?.value ?? ''))
+            .map((item) => String(allowedValueOf(item) ?? ''))
         ),
       [JSON.stringify(items)]
     );
@@ -75,8 +76,8 @@ export const MultiSelectFormField = memo(
           });
 
           return {
-            value: item.value?.value as string,
-            label: item.display_name ?? String(item.value?.value ?? ''),
+            value: allowedValueOf(item) as string,
+            label: item.display_name ?? String(allowedValueOf(item) ?? ''),
             description:
               unavailable ?
                 [unavailable.title, unavailable.content, description].filter(Boolean).join(' — ')
@@ -91,7 +92,7 @@ export const MultiSelectFormField = memo(
                That one stays reqore's `disabled` — the wildcard is a state of
                the SELECTION rather than a refusal of the value, and it has no
                reason of its own to protect. */
-            disabled: selectedValues.includes('*') && item.value?.value !== '*',
+            disabled: selectedValues.includes('*') && allowedValueOf(item) !== '*',
           };
         }
       );

package/src/components/form/fields/number/Number.tsx

@@ -25,6 +25,9 @@ export interface INumberFormFieldProps extends Omit<IReqoreInputProps, 'value' |
    */
   min_value?: number;
   max_value?: number;
+  /** How long a typed number waits after the last key before it is passed on (ms); `0`
+   *  passes every change on at once, for a form submitted by Enter. */
+  debounceMs?: number;
 }
 
 /** A whole number as typed: an optional sign and digits. */
@@ -51,6 +54,7 @@ export const NumberFormField = ({
   templates,
   min_value,
   max_value,
+  debounceMs = 100,
   ...rest
 }: INumberFormFieldProps) => {
   // What is shown is what was typed; what the form gets is the number it writes, or the text when it writes
@@ -77,13 +81,24 @@ export const NumberFormField = ({
         onChange?.(localValue);
       }
     },
-    100,
+    debounceMs,
     [localValue, onChange]
   );
 
-  const handleChange = useCallback((rawValue: number | string): void => {
-    setText(String(rawValue));
-  }, []);
+  const handleChange = useCallback(
+    (rawValue: number | string): void => {
+      const nextText = String(rawValue);
+      setText(nextText);
+      if (debounceMs === 0) {
+        const next = nextText === '' ? '' : typedNumber(nextText, type);
+        if (next !== value) {
+          emitted.record(next);
+          onChange?.(next);
+        }
+      }
+    },
+    [debounceMs, type, value, onChange]
+  );
 
   const handleInputChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>): void => {

package/src/components/form/fields/radio-group/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import { ReqoreRadioGroup } from '@qoretechnologies/reqore';
 import { IReqoreRadioGroupProps } from '@qoretechnologies/reqore/dist/components/RadioGroup';
 import { useMemo } from 'react';
+import { useIsCalmForm } from '../../engine/formAppearance';
 
 export interface IRadioGroupFormFieldProps
   extends Omit<IReqoreRadioGroupProps, 'onChange' | 'onSelectClick' | 'selected'> {
@@ -16,20 +17,25 @@ export const RadioGroupFormField = ({
   value,
   ...rest
 }: IRadioGroupFormFieldProps) => {
+  const calm = useIsCalmForm();
   const items: IReqoreRadioGroupProps['items'] = useMemo(
     () =>
       _items.map((item) => ({
         margin: 'right',
-        labelEffect: {
-          spaced: 1,
-          weight: 'bold',
-          uppercase: true,
-          textSize: 'small',
-        },
+        // Calm: an option's name as written — a choice is read, not shouted.
+        labelEffect:
+          calm ?
+            { textSize: 'small' }
+          : {
+              spaced: 1,
+              weight: 'bold',
+              uppercase: true,
+              textSize: 'small',
+            },
         ...item,
         disabled: disabled || item.disabled,
       })),
-    [_items]
+    [_items, calm]
   );
 
   return (

package/src/components/form/fields/template/TemplateField.tsx

@@ -29,7 +29,7 @@ import {
 } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { IQorusFormFieldSchemaBase, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size } from 'lodash';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import {
   filterTemplatesByType as templatesFilterFunc,
@@ -73,6 +73,7 @@ import {
   useRowMenu,
   useRowMenuPublisher,
 } from '../../engine/rowMenuContext';
+import { SavedValuesContext } from '../allowed-values/savedValues';
 
 // Re-export template utilities for consumers
 export { getTemplateKey, getTemplateValue, isValueTemplate };
@@ -919,9 +920,22 @@ const TemplateFieldImpl = memo(
       [name, onChange]
     );
 
-    // SEAM (reqraft): the IDE computes `canSaveValue` here and renders a
-    // `SaveValueButton` in the controls menu — the saved-values storage is
-    // IDE-only, so the menu item is dropped (`allowSaving` is inert).
+    /* Saving a value for reuse goes to the HOST, which keeps saved values and
+       asks what to call this one (`SavedValuesContext`). Offered where a value
+       can be typed in — a field of fixed choices has nothing of its own to
+       save, and neither does a yes/no — and only once there is a value. */
+    const savedValues = useContext(SavedValuesContext);
+    const canSaveValue =
+      !!rest.allowSaving &&
+      !!savedValues?.saveValue &&
+      (!rest.allowed_values || !!rest.allowed_values_creatable) &&
+      type !== 'bool' &&
+      type !== 'boolean' &&
+      !rest.readonly &&
+      !rest.disabled &&
+      value !== undefined &&
+      value !== null &&
+      value !== '';
 
     const handleRemoveTemplateClick = useCallback(() => {
       /* This is the `×` ON the template control, and it means "I do not want a
@@ -1218,6 +1232,15 @@ const TemplateFieldImpl = memo(
               },
             ]
           : []),
+        ...(canSaveValue
+          ? [
+              {
+                label: savedValues?.saveLabel ?? 'Save value',
+                icon: 'SaveLine' as const,
+                onClick: () => savedValues?.saveValue?.({ value, type }),
+              },
+            ]
+          : []),
         /* The "set a value of this type" choices an untyped field offers.
            Dividers are dropped: they grouped items in a menu this field drew
            itself, and in the row's shared menu they would divide other
@@ -1243,6 +1266,10 @@ const TemplateFieldImpl = memo(
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        canSaveValue,
+        savedValues,
+        value,
+        type,
       ]
     );
 
@@ -1253,6 +1280,7 @@ const TemplateFieldImpl = memo(
       canOfferExpression && !functions.loading ? 'expression' : '',
       canOfferTemplate ? 'template' : '',
       canOfferCustomValue ? 'custom-value' : '',
+      canSaveValue ? 'save-value' : '',
       `custom:${((menuItems ?? []) as { label?: unknown }[]).map((item) => String(item.label ?? '')).join('|')}`,
     ].join(',');
 

package/src/components/form/index.tsx

@@ -1,5 +1,6 @@
 export * from './fields/Field';
 export * from './fields/allowed-values/AllowedValues';
+export * from './fields/allowed-values/savedValues';
 export * from './fields/array/ArrayAuto';
 export * from './fields/array/ArrayAutoField';
 export * from './fields/auto/AutoFormField';
@@ -24,6 +25,7 @@ export * from './fields/string/String';
 export * from './fields/template/ExampleValueModal';
 export * from './fields/template/TemplateField';
 export * from './engine/FormEngine';
+export * from './engine/formAppearance';
 export * from './engine/FormFieldsSkeleton';
 export * from './engine/optionActions';
 export * from './engine/rendererTypes';

package/src/components/imageLightbox/ImageLightbox.tsx

@@ -7,6 +7,7 @@ import {
 } from '@qoretechnologies/reqore';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { loadedImageUrl } from '../supportTicket/useLoadedImages';
 
 /*
  * The shared full-image viewer: a `ReqoreModal` holding one image at a time, with
@@ -121,6 +122,7 @@ export const ImageLightbox = ({
     }
     requested.current.add(id);
     fetchRef.current(id)
+      .then(loadedImageUrl)
       .then((resolved) => mounted.current && setUrls((current) => ({ ...current, [id]: resolved })))
       .catch(() => mounted.current && setUrls((current) => ({ ...current, [id]: null })));
     return undefined;

package/src/components/supportTicket/InterfaceReferenceTags.tsx

@@ -31,8 +31,9 @@ export interface IInterfaceReferenceTagsProps {
    */
   onRemove?: (reference: IInterfaceReference) => void;
   size?: TSizes;
-  /** Chip styling — pass `intent`/`customTheme` (e.g. `{ main: 'custom1' }`) to tint
-   *  the reference chips to a surface's accent (the Qonsole/helpdesk composer does). */
+  /** Chip styling. Left out, a reference is a quiet tag with its kind's icon, as the
+   *  support surfaces draw it; tint it only where the colour has a job (Qonsole's purple
+   *  is Qonsole's alone — instruction-files decision 002). */
   intent?: ComponentProps<typeof ReqoreTag>['intent'];
   customTheme?: ComponentProps<typeof ReqoreTag>['customTheme'];
   /** Resolve a per-reference image — e.g. a qog's trigger-app logo, the way the

package/src/components/supportTicket/ReferencePicker.stories.tsx

@@ -29,8 +29,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const ACCENT = { main: 'custom1' } as const;
-
 /* The kind ids a host passes — wire values, not labels. `qog` is the customer-facing
  * kind for what the instance still lists as `fsm`; hosts map that at the fetch
  * boundary, so `fsm` never reaches the picker. */
@@ -143,7 +141,6 @@ const Hosted = ({
                their own remove — and read a size up from the thread's, where they're
                a record rather than a control. */
             <InterfaceReferenceTags
-              customTheme={ACCENT}
               references={picked}
               onRemove={(reference) =>
                 setPicked((current) =>
@@ -167,7 +164,6 @@ const Hosted = ({
             flat
             badge={picked.length || undefined}
             active={open}
-            customTheme={ACCENT}
             tooltip={open ? 'Hide references' : 'Reference interfaces'}
             onClick={() => setOpen((shown) => !shown)}
           />